feat: update apsara to 1.0.0-rc.6

web/sdk/package.json

@@ -107,7 +107,7 @@
     "@connectrpc/connect-query": "2.1.1",
     "@connectrpc/connect-web": "2.1.1",
     "@hookform/resolvers": "^3.10.0",
-    "@raystack/apsara-v1": "npm:@raystack/apsara@1.0.0-rc.2",
+    "@raystack/apsara-v1": "npm:@raystack/apsara@1.0.0-rc.6",
     "@raystack/proton": "0.1.0-7523cfd3a676d3fb72d63c8c4f0476738a2217b3",
     "@tanstack/react-query": "^5.90.2",
     "@tanstack/react-router": "^1.168.3",

web/sdk/react/utils/transform-query.ts

@@ -22,9 +22,7 @@ export interface TransformOptions {
 /**
  * Converts a filter value to the appropriate RQLFilter value format
  */
-function convertFilterValue(
-  value: string | number | boolean | null | undefined,
-): RQLFilter["value"] {
+function convertFilterValue(value: unknown): RQLFilter["value"] {
   switch (typeof value) {
     case "boolean":
       return { case: "boolValue", value };
@@ -33,7 +31,7 @@ function convertFilterValue(
     case "string":
       return { case: "stringValue", value };
     default:
-      return { case: "stringValue", value: value ?? "" };
+      return { case: "stringValue", value: value == null ? "" : String(value) };
   }
 }
 

web/sdk/react/views-new/auth/magic-link-verify/magic-link-verify-view.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Button, Text, Link, Flex, InputField } from '@raystack/apsara-v1';
+import { Button, Text, Link, Flex, Input } from '@raystack/apsara-v1';
 import {
   ChangeEvent,
   ComponentPropsWithRef,
@@ -96,7 +96,7 @@ export const MagicLinkVerifyView = ({
 
       <form onSubmit={OTPVerifyHandler} className={styles.form}>
         <Flex direction="column" gap={2} className={styles.otpInputContainer}>
-          <InputField
+          <Input
             data-test-id="enter-code"
             autoFocus
             size="large"

web/sdk/react/views-new/auth/magic-link/magic-link-view.tsx

@@ -4,7 +4,7 @@ import {
   Text,
   Separator,
   Flex,
-  InputField
+  Input
 } from '@raystack/apsara-v1';
 import { ComponentPropsWithRef, ReactNode, useCallback, useState } from 'react';
 import { useForm } from 'react-hook-form';
@@ -115,7 +115,7 @@ export const MagicLinkView = ({
     <form className={styles.form} onSubmit={handleSubmit(magicLinkHandler)}>
       {!open && <Separator />}
       <Flex direction="column" align="start" className={styles.field}>
-        <InputField
+        <Input
           {...register('email')}
           size="large"
           placeholder="name@example.com"

web/sdk/react/views-new/auth/subscribe/subscribe-view.tsx

@@ -8,7 +8,8 @@ import {
   Button,
   Flex,
   Text,
-  InputField,
+  Field,
+  Input,
   Toast,
   toastManager,
   Image,
@@ -167,30 +168,33 @@ export const SubscribeView = ({
               {desc}
             </Text>
           </Flex>
-          <InputField
-            {...register('name')}
-            label="Name"
-            placeholder="Enter name"
-            error={errors.name?.message}
-            data-test-id="subscribe-name-input"
-          />
-          <InputField
-            {...register('email')}
-            label="Email"
-            type="email"
-            placeholder="Enter email"
-            error={errors.email?.message}
-            data-test-id="subscribe-email-input"
-          />
-          <InputField
-            {...register('contactNumber')}
-            optional
+          <Field label="Name" error={errors.name?.message}>
+            <Input
+              {...register('name')}
+              placeholder="Enter name"
+              data-test-id="subscribe-name-input"
+            />
+          </Field>
+          <Field label="Email" error={errors.email?.message}>
+            <Input
+              {...register('email')}
+              type="email"
+              placeholder="Enter email"
+              data-test-id="subscribe-email-input"
+            />
+          </Field>
+          <Field
             label="Contact number"
-            placeholder="Enter contact"
+            description="Add country code at the start"
+            required={false}
             error={errors.contactNumber?.message}
-            helperText="Add country code at the start"
-            data-test-id="subscribe-contact-input"
-          />
+          >
+            <Input
+              {...register('contactNumber')}
+              placeholder="Enter contact"
+              data-test-id="subscribe-contact-input"
+            />
+          </Field>
           <Button
             className={styles.button}
             type="submit"

web/sdk/react/views-new/billing/components/confirm-cycle-switch-dialog.tsx

@@ -224,7 +224,7 @@ function ConfirmCycleSwitchContent({
             <Skeleton />
           ) : (
             <Text size="small" variant="secondary">
-              <Text as="span" size="small" weight="medium">
+              <Text size="small" weight="medium">
                 Current cycle:
               </Text>{' '}
               {activePlanIntervalName}
@@ -234,7 +234,7 @@ function ConfirmCycleSwitchContent({
             <Skeleton />
           ) : (
             <Text size="small" variant="secondary">
-              <Text as="span" size="small" weight="medium">
+              <Text size="small" weight="medium">
                 New cycle:
               </Text>{' '}
               {nextPlanIntervalName} (
@@ -247,7 +247,7 @@ function ConfirmCycleSwitchContent({
           {!isLoading && savings && (
             <Text size="small" variant="secondary">
               You can save{' '}
-              <Text as="span" size="small" weight="medium">
+              <Text size="small" weight="medium">
                 <Amount
                   value={savings.amount}
                   currency={savings.currency}

web/sdk/react/views-new/billing/components/upcoming-billing-cycle.tsx

@@ -171,7 +171,7 @@ export function UpcomingBillingCycle({
       >
         <Flex gap={3} align="center">
           <Text size="small">
-            <Text as="span" size="small" weight="medium">Plan:</Text>
+            <Text size="small" weight="medium">Plan:</Text>
             {' '}{planName}
           </Text>
           {switchablePlan && isAllowed && !alreadyPhased ? (
@@ -188,18 +188,18 @@ export function UpcomingBillingCycle({
         </Flex>
         <Flex gap={5} align="center">
           <Text size="small">
-            <Text as="span" size="small" weight="medium">Next billing:</Text>
+            <Text size="small" weight="medium">Next billing:</Text>
             {' '}{timestampToDayjs(dueDate)?.format(config.dateFormat) || '-'}
           </Text>
           <div className={styles.separator} />
           <Text size="small">
-            <Text as="span" size="small" weight="medium">Users:</Text>
+            <Text size="small" weight="medium">Users:</Text>
             {' '}{memberCount}
           </Text>
           <div className={styles.separator} />
           <Flex gap={2} align="center">
             <Text size="small">
-              <Text as="span" size="small" weight="medium">Amount:</Text>
+              <Text size="small" weight="medium">Amount:</Text>
               {' '}
               <Amount
                 currency={upcomingInvoice?.currency}

web/sdk/react/views-new/create-organization/create-organization-view.tsx

@@ -6,7 +6,8 @@ import {
   Text,
   Headline,
   Flex,
-  InputField,
+  Field,
+  Input,
   toastManager
 } from '@raystack/apsara-v1';
 import { ComponentPropsWithRef } from 'react';
@@ -94,20 +95,26 @@ export const CreateOrganizationView = ({
       </Flex>
       <form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
         <Flex direction="column" align="center" gap={9} className={styles.card}>
-          <InputField
+          <Field
             label={`${t.organization({ case: 'capital' })} name`}
-            size="large"
             error={errors.title && String(errors.title?.message)}
-            {...register('title')}
-            placeholder={`Provide ${t.organization({ case: 'lower' })} name`}
-          />
-          <InputField
+          >
+            <Input
+              size="large"
+              {...register('title')}
+              placeholder={`Provide ${t.organization({ case: 'lower' })} name`}
+            />
+          </Field>
+          <Field
             label={`${t.organization({ case: 'capital' })} URL`}
-            size="large"
             error={errors.name && String(errors.name?.message)}
-            {...register('name')}
-            placeholder="raystack.org/"
-          />
+          >
+            <Input
+              size="large"
+              {...register('name')}
+              placeholder="raystack.org/"
+            />
+          </Field>
           <Button
             className={styles.submit}
             type="submit"

web/sdk/react/views-new/general/components/delete-organization-dialog.tsx

@@ -14,7 +14,8 @@ import {
   Text,
   Flex,
   Dialog,
-  InputField,
+  Field,
+  Input,
   toastManager
 } from '@raystack/apsara-v1';
 import { useFrontier } from '../../../contexts/FrontierContext';
@@ -104,17 +105,20 @@ export const DeleteOrganizationDialog = ({
                 This action can not be undone. This will permanently
                 delete all the projects and resources in {organization?.title}.
               </Text>
-              <InputField
+              <Field
                 label={`Please type name of the ${orgLabel} to confirm.`}
-                size="large"
                 error={
                   errors.title
                     ? String(errors.title.message)
                     : undefined
                 }
-                {...register('title')}
-                placeholder={`Provide the ${orgLabel} name`}
-              />
+              >
+                <Input
+                  size="large"
+                  {...register('title')}
+                  placeholder={`Provide the ${orgLabel} name`}
+                />
+              </Field>
               <Flex gap={3} align="start">
                 <Checkbox
                   checked={isAcknowledged}

web/sdk/react/views-new/general/general-view.tsx

@@ -21,7 +21,8 @@ import {
   Skeleton,
   Text,
   Flex,
-  InputField,
+  Field,
+  Input,
   toastManager
 } from '@raystack/apsara-v1';
 import { useFrontier } from '../../contexts/FrontierContext';
@@ -207,25 +208,31 @@ export function GeneralView({ onDeleteSuccess, urlPrefix }: GeneralViewProps = {
                 </>
               ) : (
                 <>
-                  <InputField
+                  <Field
                     label={`${orgLabel} name`}
-                    size="large"
                     error={errors.title && String(errors.title?.message)}
-                    defaultValue={organization?.title || ''}
-                    disabled={!canUpdateWorkspace}
-                    placeholder={`Provide ${orgLabelLower} name`}
-                    {...register('title')}
-                  />
-                  <InputField
+                  >
+                    <Input
+                      size="large"
+                      defaultValue={organization?.title || ''}
+                      disabled={!canUpdateWorkspace}
+                      placeholder={`Provide ${orgLabelLower} name`}
+                      {...register('title')}
+                    />
+                  </Field>
+                  <Field
                     label={`${orgLabel} URL`}
-                    size="large"
                     error={errors.name && String(errors.name?.message)}
-                    defaultValue={organization?.name || ''}
-                    disabled
-                    prefix={URL_PREFIX}
-                    placeholder={`Provide ${orgLabelLower} URL`}
-                    {...register('name')}
-                  />
+                  >
+                    <Input
+                      size="large"
+                      defaultValue={organization?.name || ''}
+                      disabled
+                      prefix={URL_PREFIX}
+                      placeholder={`Provide ${orgLabelLower} URL`}
+                      {...register('name')}
+                    />
+                  </Field>
                 </>
               )}
             </Flex>