@rovula/ui 0.1.6 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",
@@ -77,7 +77,7 @@
   "dependencies": {
     "@headlessui/react": "^2.0.3",
     "@heroicons/react": "^2.1.3",
-    "lucide-react": "^0.460.0",
+    "@hookform/resolvers": "^5.2.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.0.4",
@@ -99,9 +99,11 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
+    "lucide-react": "^0.460.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-day-picker": "^9.0.7",
     "react-dom": "^17.0.0 || ^18.0.0",
+    "react-hook-form": "^7.71.2",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
     "yup": "^1.4.0"

package/src/components/ActionButton/ActionButton.stories.tsx

@@ -20,7 +20,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="p-5 bg-base-bg2">
+      <div className="p-5 bg-bg-bg2">
         <Story />
       </div>
     ),
@@ -99,23 +99,23 @@ const forcedStateClassName: Record<
 const icon = <ArrowsUpDownIcon />;
 
 const renderPreview = (shape: "round" | "capsule") => (
-  <div className="bg-base-bg2 p-8 min-h-screen">
+  <div className="bg-bg-bg2 p-8 min-h-screen">
     <div className="flex flex-col gap-6">
-      <h3 className="text-xl font-semibold tracking-wide text-text-white">Function button</h3>
+      <h3 className="text-xl font-semibold tracking-wide text-text-contrast-max">Function button</h3>
 
       {previewStates.map((state) => (
         <div
           key={state.key}
           className="grid grid-cols-[120px_repeat(3,minmax(0,1fr))] items-stretch gap-4"
         >
-          <span className="pt-3 text-sm font-semibold text-text-white">{state.label}</span>
+          <span className="pt-3 text-sm font-semibold text-text-contrast-max">{state.label}</span>
 
           {previewVariants.map((previewVariant) => (
             <div
               key={previewVariant.variant}
-              className="h-full rounded-lg border border-base-bg-stroke1 bg-base-bg1 p-3"
+              className="h-full rounded-lg border border-bg-stroke1 bg-bg-bg1 p-3"
             >
-              <span className="text-xs font-semibold tracking-wide text-text-white uppercase">
+              <span className="text-xs font-semibold tracking-wide text-text-contrast-max uppercase">
                 {previewVariant.label}
               </span>
 

package/src/components/ActionButton/ActionButton.styles.ts

@@ -106,7 +106,7 @@ export const actionButtonVariants = cva(
       {
         size: "xxs",
         variant: "icon",
-        className: "px-[1px] py-[1px] [&_svg]:size-[12px]",
+        className: "px-[1px] py-[1px] [&_svg]:size-[10px]",
       },
       {
         size: "xs",

package/src/components/AlertDialog/AlertDialog.stories.tsx

@@ -105,3 +105,25 @@ export const CustomStyle = {
     );
   },
 } satisfies StoryObj;
+
+export const FigmaFail = {
+  render: () => (
+    <div className="flex w-full">
+      <AlertDialog defaultOpen>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Infomation update failed</AlertDialogTitle>
+            <AlertDialogDescription>
+              Please login again and complete your profile to activate your account.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogAction className="w-[140px] justify-center">
+              Try again
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  ),
+} satisfies StoryObj;

package/src/components/AlertDialog/AlertDialog.tsx

@@ -18,7 +18,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      "fixed inset-0 bg-base-popup-curtain z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 bg-modal-overlay z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -37,7 +37,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed text-base-popup-foreground left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-6 border border-base-popup bg-base-popup p-8 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-md",
+        "fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-32px)] max-w-[460px] translate-x-[-50%] translate-y-[-50%] gap-8 rounded-md bg-modal-surface px-6 py-8 text-text-contrast-max shadow-[0px_12px_24px_-4px_rgba(0,0,0,0.12)] duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
         className
       )}
       {...props}
@@ -52,7 +52,7 @@ const AlertDialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
+      "flex flex-col items-center gap-2 text-center",
       className
     )}
     {...props}
@@ -66,7 +66,7 @@ const AlertDialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      "flex flex-col-reverse items-center justify-center gap-3 sm:flex-row sm:gap-4",
       className
     )}
     {...props}
@@ -80,7 +80,7 @@ const AlertDialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Title
     ref={ref}
-    className={cn("typography-h5", className)}
+    className={cn("typography-subtitle3 text-text-contrast-max", className)}
     {...props}
   />
 ));
@@ -92,7 +92,7 @@ const AlertDialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm", className)}
+    className={cn("typography-small1 text-text-contrast-max", className)}
     {...props}
   />
 ));

package/src/components/Avatar/Avatar.stories.tsx

@@ -52,7 +52,7 @@ export const Preview = {
     const BORDER: AvatarProps["rounded"][] = ["full", "normal", "none"];
 
     return (
-      <div className="flex flex-col gap-2 w-full  bg-black p-20">
+      <div className="flex flex-col gap-2 w-full bg-bg-bg2 p-20">
         {BORDER.map((rounded) => (
           <div key={rounded} className="flex flex-row items-center gap-3">
             <Avatar

package/src/components/Avatar/Avatar.styles.ts

@@ -2,7 +2,7 @@ import { cva } from "class-variance-authority";
 
 export const avatarVariants = cva(
   [
-    "flex items-center justify-center bg-grey2-700 text-foreground typography-subtitle2 truncate",
+    "flex items-center justify-center bg-grey2-700 text-common-black typography-subtitle2 truncate",
   ],
   {
     variants: {

package/src/components/Avatar/AvatarBase.tsx

@@ -39,7 +39,7 @@ const AvatarFallback = React.forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      "flex h-full w-full items-center justify-center rounded-full bg-inherit text-inherit",
       className
     )}
     {...props}

package/src/components/Avatar/AvatarGroup.stories.tsx

@@ -55,7 +55,7 @@ export const Preview = {
     };
 
     return (
-      <div className="flex flex-col gap-2 w-full  bg-black p-20">
+      <div className="flex flex-col gap-2 w-full bg-bg-bg2 p-20">
         <div className="flex flex-row items-center gap-3">
           <AvatarGroup>
             <Avatar size="lg" rounded="full" type="text" text="AS" />

package/src/components/Button/Buttons.stories.tsx

@@ -189,7 +189,13 @@ export const ShapePreview = {
 } satisfies Story;
 
 const previewColors: Array<
-  "primary" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error"
+  | "primary"
+  | "secondary"
+  | "tertiary"
+  | "info"
+  | "success"
+  | "warning"
+  | "error"
 > = ["primary", "secondary", "tertiary", "info", "success", "warning", "error"];
 const previewSizes: Array<"lg" | "md" | "sm"> = ["lg", "md", "sm"];
 const previewSizeLabel: Record<(typeof previewSizes)[number], string> = {
@@ -197,12 +203,14 @@ const previewSizeLabel: Record<(typeof previewSizes)[number], string> = {
   md: "Medium",
   sm: "Small",
 };
-const previewStyles: Array<{ label: string; variant: "solid" | "outline" | "text"; }> =
-  [
-    { label: "Solid", variant: "solid" },
-    { label: "Outline", variant: "outline" },
-    { label: "Text", variant: "text" },
-  ];
+const previewStyles: Array<{
+  label: string;
+  variant: "solid" | "outline" | "text";
+}> = [
+  { label: "Solid", variant: "solid" },
+  { label: "Outline", variant: "outline" },
+  { label: "Text", variant: "text" },
+];
 
 const icon = <ArrowsUpDownIcon />;
 const previewStates = [
@@ -213,11 +221,11 @@ const previewStates = [
 
 export const FigmaPreview = {
   render: () => (
-    <div className="bg-base-bg2 p-8 min-h-screen">
+    <div className="bg-bg-bg2 p-8 min-h-screen">
       <div className="flex flex-col gap-10">
         {previewColors.map((color) => (
           <div key={color} className="flex flex-col gap-2">
-            <h3 className="text-xl font-semibold tracking-wide text-text-white capitalize">
+            <h3 className="text-xl font-semibold tracking-wide text-text-contrast-max capitalize">
               {color} btn
             </h3>
 
@@ -226,16 +234,16 @@ export const FigmaPreview = {
                 key={state.label}
                 className="grid grid-cols-[repeat(3,minmax(0,1fr))] items-stretch gap-2"
               >
-                {/* <span className="pt-3 text-sm font-semibold text-text-white">
+                {/* <span className="pt-3 text-sm font-semibold text-text-contrast-max">
                   {state.label}
                 </span> */}
 
                 {previewStyles.map((style) => (
                   <div
                     key={style.label}
-                    className="h-full rounded-lg border border-base-bg-stroke1 bg-base-bg1 p-3"
+                    className="h-full rounded-lg border border-bg-stroke1 bg-bg-bg1 p-3"
                   >
-                    <span className="text-xs font-semibold tracking-wide text-text-white uppercase">
+                    <span className="text-xs font-semibold tracking-wide text-text-contrast-max uppercase">
                       {style.label} ({state.label})
                     </span>
 
@@ -287,11 +295,11 @@ export const FigmaPreview = {
 
 export const FigmaPreviewCapsule = {
   render: () => (
-    <div className="bg-base-bg2 p-8 min-h-screen">
+    <div className="bg-bg-bg2 p-8 min-h-screen">
       <div className="flex flex-col gap-10">
         {previewColors.map((color) => (
           <div key={color} className="flex flex-col gap-4">
-            <h3 className="text-xl font-semibold tracking-wide text-text-white capitalize">
+            <h3 className="text-xl font-semibold tracking-wide text-text-contrast-max capitalize">
               {color} btn
             </h3>
 
@@ -300,16 +308,16 @@ export const FigmaPreviewCapsule = {
                 key={state.label}
                 className="grid grid-cols-[repeat(3,minmax(0,1fr))] items-stretch gap-4"
               >
-                {/* <span className="pt-3 text-sm font-semibold text-text-white">
+                {/* <span className="pt-3 text-sm font-semibold text-text-contrast-max">
                   {state.label}
                 </span> */}
 
                 {previewStyles.map((style) => (
                   <div
                     key={style.label}
-                    className="h-full rounded-lg border border-base-bg-stroke1 bg-base-bg1 p-3"
+                    className="h-full rounded-lg border border-bg-stroke1 bg-bg-bg1 p-3"
                   >
-                    <span className="text-xs font-semibold tracking-wide text-text-white uppercase">
+                    <span className="text-xs font-semibold tracking-wide text-text-contrast-max uppercase">
                       {style.label} ({state.label})
                     </span>
 

package/src/components/Calendar/Calendar.tsx

@@ -22,7 +22,7 @@ function Calendar({
       captionLayout="dropdown-years"
       {...props}
       className={cn(
-        "bg-surface text-surface-foreground border-surface",
+        "bg-bg-bg1 text-common-black border-bg-bg1",
         className
       )}
       classNames={{
@@ -30,8 +30,8 @@ function Calendar({
         day_button: cn(defaultClassNames.day_button, "size-9"),
         day: "typography-subtitle1 ",
         today:
-          "text-bold text-surface-foreground [&_button]:rounded-full [&_button]:!border-primary [&_button]:!border [&_button]:!border-solid",
-        selected: "bg-primary !text-primary-foreground rounded-full ",
+          "text-bold text-common-black [&_button]:rounded-full [&_button]:!border-primary [&_button]:!border [&_button]:!border-solid",
+        selected: "bg-primary !text-state-primary-text-solid rounded-full ",
         weekdays: "text-gray-400",
         month_caption: cn(defaultClassNames.month_caption, "h-[54px]"),
         outside: "text-gray-400",

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -12,7 +12,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="p-5 flex w-full bg-base-bg2">
+      <div className="p-5 flex w-full bg-bg-bg2">
         <Story />
       </div>
     ),
@@ -37,7 +37,7 @@ export const Default = {
           <Checkbox id="terms" {...props} />
           <label
             htmlFor="terms"
-            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            className="text-sm font-medium leading-none text-text-contrast-max peer-disabled:cursor-not-allowed peer-disabled:text-state-disable-outline"
           >
             Accept terms and conditions
           </label>
@@ -59,11 +59,11 @@ export const WithText = {
         <div className="grid gap-1.5 leading-none">
           <label
             htmlFor="terms1"
-            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            className="text-sm font-medium leading-none text-text-contrast-max peer-disabled:cursor-not-allowed peer-disabled:text-state-disable-outline"
           >
             Accept terms and conditions
           </label>
-          <p className="text-sm text-muted-foreground">
+          <p className="text-sm text-text-g-contrast-medium">
             You agree to our Terms of Service and Privacy Policy.
           </p>
         </div>
@@ -83,7 +83,7 @@ export const Disabled = {
         <Checkbox id="terms2" disabled />
         <label
           htmlFor="terms2"
-          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+          className="text-sm font-medium leading-none text-state-disable-outline peer-disabled:cursor-not-allowed"
         >
           Accept terms and conditions
         </label>
@@ -101,7 +101,11 @@ type CheckboxPreviewRow = {
 
 const checkboxPreviewRows: CheckboxPreviewRow[] = [
   { label: "Default", checked: false },
-  { label: "Hover", checked: false, className: "!border-function-default-hover" },
+  {
+    label: "Hover",
+    checked: false,
+    className: "!border-function-default-hover",
+  },
   { label: "Disable", checked: false, disabled: true },
   { label: "Checked", checked: true },
   {
@@ -118,17 +122,36 @@ const checkboxPreviewRows: CheckboxPreviewRow[] = [
     className:
       "!data-[state=indeterminate]:border-function-active-hover !data-[state=indeterminate]:bg-function-active-hover",
   },
-  { label: "Indeterminate - Disable", checked: "indeterminate", disabled: true },
+  {
+    label: "Indeterminate - Disable",
+    checked: "indeterminate",
+    disabled: true,
+  },
 ];
 
 export const FigmaPreview = {
   render: () => (
-    <div className="bg-base-bg2 p-8 min-h-screen">
-      <div className="mx-auto flex w-full max-w-[360px] flex-col gap-4 rounded-lg border border-base-bg-stroke1 bg-base-bg1 p-6">
+    <div className="bg-bg-bg2 p-8 min-h-screen">
+      <div className="mx-auto flex w-full max-w-[360px] flex-col gap-4 rounded-lg border border-bg-stroke1 bg-bg-bg1 p-6">
         {checkboxPreviewRows.map((row) => (
-          <div key={row.label} className="grid grid-cols-[160px_16px] items-center gap-4">
-            <span className="text-sm font-medium text-text-white">{row.label}</span>
-            <Checkbox checked={row.checked} disabled={row.disabled} className={row.className} />
+          <div
+            key={row.label}
+            className="grid grid-cols-[160px_16px] items-center gap-4"
+          >
+            <span
+              className={`text-sm font-medium ${
+                row.disabled
+                  ? "text-state-disable-outline"
+                  : "text-text-contrast-max"
+              }`}
+            >
+              {row.label}
+            </span>
+            <Checkbox
+              checked={row.checked}
+              disabled={row.disabled}
+              className={row.className}
+            />
           </div>
         ))}
       </div>

package/src/components/Checkbox/Checkbox.tsx

@@ -14,17 +14,19 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer size-4 shrink-0 cursor-pointer rounded-[var(--spacing-spacing-xxs,2px)] border border-function-default-solid ring-offset-background",
+      "peer size-4 shrink-0 cursor-pointer rounded-[var(--spacing-spacing-xxs,2px)] border border-function-default-solid ring-offset-bg-bg1",
       "hover:border-function-default-hover",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      "disabled:cursor-not-allowed disabled:border-state-disable-solid disabled:text-state-disable-outline disabled:data-[state=checked]:bg-state-disable-solid disabled:data-[state=indeterminate]:bg-state-disable-solid",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-input-active-stroke focus-visible:ring-offset-2",
+      "disabled:cursor-not-allowed disabled:border-state-disable-outline disabled:text-state-disable-outline",
+      "disabled:data-[state=checked]:border-state-disable-solid disabled:data-[state=checked]:bg-state-disable-solid",
+      "disabled:data-[state=indeterminate]:border-state-disable-solid disabled:data-[state=indeterminate]:bg-state-disable-solid",
       {
         "data-[state=checked]:border-function-active-solid data-[state=checked]:bg-function-active-solid data-[state=checked]:text-function-active-icon data-[state=indeterminate]:border-function-active-solid data-[state=indeterminate]:bg-function-active-solid data-[state=indeterminate]:text-function-active-icon":
           !props.disabled,
         "hover:data-[state=checked]:border-function-active-hover hover:data-[state=checked]:bg-function-active-hover hover:data-[state=indeterminate]:border-function-active-hover hover:data-[state=indeterminate]:bg-function-active-hover":
           !props.disabled,
       },
-      className
+      className,
     )}
     {...props}
   >
@@ -32,7 +34,7 @@ const Checkbox = React.forwardRef<
       className={cn(
         "flex size-[14px] items-center justify-center text-current",
         "[&[data-state=checked]_.checkbox-check-icon]:block",
-        "[&[data-state=indeterminate]_.checkbox-minus-icon]:block"
+        "[&[data-state=indeterminate]_.checkbox-minus-icon]:block",
       )}
     >
       <CheckIcon className="checkbox-check-icon hidden size-[14px]" />

package/src/components/Collapsible/Collapsible.styles.ts

@@ -2,7 +2,7 @@ import { cva } from "class-variance-authority";
 
 export const collapseButtonVariants = cva(
   [
-    "flex flex-1 bg-secondary-default hover:bg-secondary-hover text-secondary-foreground",
+    "flex flex-1 bg-secondary-default hover:bg-secondary-hover text-state-secondary-text-solid",
     "focus:outline-none focus-visible:ring focus-visible:ring-gray-500 focus-visible:ring-opacity-75",
   ],
   {

package/src/components/DataTable/DataTable.tsx

@@ -127,7 +127,7 @@ export function DataTable<TData, TValue>({
                         desc: <ArrowDownIcon className="ml-3 h-4 w-4" />,
                       }[header.column.getIsSorted() as string] ??
                         (header.column.getCanSort() ? (
-                          <ArrowsUpDownIcon className="ml-3 h-4 w-4 text-text-grey-light" />
+                          <ArrowsUpDownIcon className="ml-3 h-4 w-4 text-text-g-contrast-high" />
                         ) : null)}
                     </div>
                   </TableHead>
@@ -155,7 +155,7 @@ export function DataTable<TData, TValue>({
             <TableRow className="h-full self-stretch">
               <TableCell
                 colSpan={columns.length}
-                className="typography-body1 text-text-grey-medium text-center h-full"
+                className="typography-body1 text-text-g-contrast-medium text-center h-full"
               >
                 <div className="flex flex-1 h-full flex-col items-center justify-center gap-3">
                   <ClipboardDocumentListIcon className="w-8 text-secondary-120" />