@rovula/ui 0.1.7 → 0.1.9

package/src/components/Text/Text.stories.tsx

@@ -14,7 +14,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>
     ),

package/src/components/Text/Text.tsx

@@ -72,7 +72,7 @@ export type TextProps = {
   id?: string;
 };
 
-const textVariants = cva(["text-foreground"], {
+const textVariants = cva(["text-common-black"], {
   variants: {
     color: {
       primary: "text-primary",

package/src/components/TextArea/TextArea.stories.tsx

@@ -11,7 +11,7 @@ const meta: Meta<typeof TextArea> = {
   tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <div className="p-5 flex h-screen w-full bg-base-bg2">
+      <div className="p-5 flex h-screen w-full bg-bg-bg2">
         <Story />
       </div>
     ),

package/src/components/TextArea/TextArea.styles.ts

@@ -56,17 +56,17 @@ export const textareaVariant = cva(
       {
         hasClearIcon: true,
         size: "sm",
-        class: "focus:pe-6",
+        className: "focus:pe-6",
       },
       {
         hasClearIcon: true,
         size: "md",
-        class: "focus:pe-8",
+        className: "focus:pe-8",
       },
       {
         hasClearIcon: true,
         size: "lg",
-        class: "focus:pe-10",
+        className: "focus:pe-10",
       },
     ],
     defaultVariants: {

package/src/components/TextInput/TextInput.stories.tsx

@@ -15,7 +15,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="p-5 flex h-full w-full bg-[var(--base-color-popup)] ">
+      <div className="p-5 flex h-full w-full bg-modal-surface">
         <Story />
       </div>
     ),
@@ -212,7 +212,7 @@ const KeepFooterSpaceDemo = () => {
   const [hasError, setHasError] = useState(false);
   return (
     <div className="flex flex-col gap-8 w-full max-w-md">
-      <p className="text-sm text-text-grey-dark">
+      <p className="text-sm text-text-g-contrast-low">
         Use <code>keepFooterSpace</code> to always reserve space for the
         footer/helper area, preventing layout shift when an error or helper text
         is shown or hidden.
@@ -228,7 +228,7 @@ const KeepFooterSpaceDemo = () => {
         </label>
         <div className="flex flex-col gap-4">
           <div>
-            <h4 className="text-sm font-medium mb-2 text-text-grey-dark">
+            <h4 className="text-sm font-medium mb-2 text-text-g-contrast-low">
               With keepFooterSpace (layout stays stable)
             </h4>
             <TextInput
@@ -241,7 +241,7 @@ const KeepFooterSpaceDemo = () => {
             />
           </div>
           <div>
-            <h4 className="text-sm font-medium mb-2 text-text-grey-dark">
+            <h4 className="text-sm font-medium mb-2 text-text-g-contrast-low">
               Without keepFooterSpace (layout shifts when error appears)
             </h4>
             <TextInput
@@ -275,7 +275,7 @@ const FeedbackApiDemo = () => {
 
   return (
     <div className="flex flex-col gap-6 w-full max-w-2xl">
-      <div className="flex flex-wrap items-center gap-4 text-sm text-text-grey-dark">
+      <div className="flex flex-wrap items-center gap-4 text-sm text-text-g-contrast-low">
         <label className="flex items-center gap-2 cursor-pointer">
           <input
             type="checkbox"
@@ -304,7 +304,7 @@ const FeedbackApiDemo = () => {
 
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
         <div className="flex flex-col gap-2">
-          <h4 className="text-sm font-medium text-text-grey-dark">
+          <h4 className="text-sm font-medium text-text-g-contrast-low">
             Legacy API (error / warning)
           </h4>
           <TextInput
@@ -320,7 +320,7 @@ const FeedbackApiDemo = () => {
         </div>
 
         <div className="flex flex-col gap-2">
-          <h4 className="text-sm font-medium text-text-grey-dark">
+          <h4 className="text-sm font-medium text-text-g-contrast-low">
             New API (status + message)
           </h4>
           <TextInput

package/src/components/TextInput/TextInput.styles.ts

@@ -16,7 +16,7 @@ export const inputVariant = cva(
       },
       rounded: {
         none: "rounded-none",
-        normal: "rounded-md",
+        normal: "",
         full: "rounded-full",
       },
       variant: {
@@ -58,6 +58,16 @@ export const inputVariant = cva(
       },
     },
     compoundVariants: [
+      {
+        rounded: "normal",
+        size: "sm",
+        className: "rounded-sm",
+      },
+      {
+        rounded: "normal",
+        size: ["md", "lg"],
+        className: "rounded-md",
+      },
       {
         variant: "underline",
         className: "rounded-none",
@@ -65,62 +75,62 @@ export const inputVariant = cva(
       {
         hasClearIcon: true,
         size: "sm",
-        class: "focus:pe-6",
+        className: "focus:pe-6",
       },
       {
         hasClearIcon: true,
         size: "md",
-        class: "focus:pe-8",
+        className: "focus:pe-8",
       },
       {
         hasClearIcon: true,
         size: "lg",
-        class: "focus:pe-10",
+        className: "focus:pe-10",
       },
       {
         hasSearchIcon: true,
         size: "sm",
-        class: "!ps-6",
+        className: "!ps-[26px]",
       },
       {
         hasSearchIcon: true,
         size: "md",
-        class: "!ps-9",
+        className: "!ps-[40px]",
       },
       {
         hasSearchIcon: true,
         size: "lg",
-        class: "!ps-11",
+        className: "!ps-[52px]",
       },
       {
         leftSectionIcon: true,
         size: "sm",
-        class: "!ps-[38px]",
+        className: "!ps-[38px]",
       },
       {
         leftSectionIcon: true,
         size: "md",
-        class: "!ps-[46px]",
+        className: "!ps-[46px]",
       },
       {
         leftSectionIcon: true,
         size: "lg",
-        class: "!ps-[72px]",
+        className: "!ps-[72px]",
       },
       {
         rightSectionIcon: true,
         size: "sm",
-        class: "!pe-[38px]",
+        className: "!pe-[38px]",
       },
       {
         rightSectionIcon: true,
         size: "md",
-        class: "!pe-[46px]",
+        className: "!pe-[46px]",
       },
       {
         rightSectionIcon: true,
         size: "lg",
-        class: "!pe-[72px]",
+        className: "!pe-[72px]",
       },
     ],
     defaultVariants: {
@@ -224,7 +234,7 @@ export const labelVariant = cva(
         hasSearchIcon: true,
         size: "sm",
         className: [
-          "left-6 -top-1.5 typography-label2 bg-input-label-bg",
+          "left-[26px] -top-1.5 typography-label2 bg-input-label-bg",
           "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-small1 peer-placeholder-shown:bg-transparent",
           "peer-focus:-top-1.5 peer-focus:typography-label2",
         ],
@@ -234,7 +244,7 @@ export const labelVariant = cva(
         hasSearchIcon: true,
         size: "md",
         className: [
-          "left-9 -top-1.5 typography-label1 bg-input-label-bg",
+          "left-[40px] -top-1.5 typography-label1 bg-input-label-bg",
           "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitle4 peer-placeholder-shown:bg-transparent",
           "peer-focus:-top-1.5 peer-focus:typography-label1",
         ],
@@ -244,7 +254,7 @@ export const labelVariant = cva(
         hasSearchIcon: true,
         size: "lg",
         className: [
-          "left-11 -top-1.5 typography-label1 bg-input-label-bg",
+          "left-[52px] -top-1.5 typography-label1 bg-input-label-bg",
           "peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitle1 peer-placeholder-shown:bg-transparent",
           "peer-focus:-top-1.5 peer-focus:typography-label1",
         ],
@@ -255,7 +265,7 @@ export const labelVariant = cva(
         hasSearchIcon: true,
         size: "sm",
         className: [
-          "left-6 peer-placeholder-shown:top-2 peer-placeholder-shown:typography-small1",
+          "left-[26px] peer-placeholder-shown:top-2 peer-placeholder-shown:typography-small1",
         ],
       },
       {
@@ -263,7 +273,7 @@ export const labelVariant = cva(
         hasSearchIcon: true,
         size: "md",
         className: [
-          "left-9 peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitle4",
+          "left-[40px] peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitle4",
         ],
       },
       {
@@ -271,7 +281,7 @@ export const labelVariant = cva(
         hasSearchIcon: true,
         size: "lg",
         className: [
-          "left-11 peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitle1",
+          "left-[52px] peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitle1",
         ],
       },
 
@@ -432,6 +442,19 @@ export const iconActionVariant = cva(["cursor-pointer z-50 select-none"], {
   },
 });
 
+export const searchIconVariant = cva(["cursor-pointer z-50 select-none"], {
+  variants: {
+    size: {
+      sm: "size-[14px]",
+      md: "size-5",
+      lg: "size-6",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
 export const segmentedIconWrapperVariant = cva(
   [
     "cursor-pointer",

package/src/components/TextInput/TextInput.tsx

@@ -13,6 +13,7 @@ import {
   inlineStartIconWrapperVariant,
   inputVariant,
   labelVariant,
+  searchIconVariant,
   segmentedIconWrapperVariant,
 } from "./TextInput.styles";
 import {
@@ -152,6 +153,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       size,
     });
     const iconActionClassname = iconActionVariant({ size });
+    const searchIconClassname = searchIconVariant({ size });
 
     // TODO wait for clearify aboutm start,end, search and clearIcon with iconMode
 
@@ -332,7 +334,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
                 classes?.iconSearchWrapper
               )}
             >
-              <Search className={cn(iconActionClassname, classes?.icon)} />
+              <Search className={cn(searchIconClassname, classes?.icon)} />
             </div>
           )}
           {startIconElement}

package/src/components/Toast/Toast.stories.tsx

@@ -21,7 +21,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="flex max-h-screen w-full bg-white p-4">
+      <div className="flex max-h-screen w-full bg-bg-bg1 p-4">
         <Story />
       </div>
     ),

package/src/components/Toast/Toast.styles.tsx

@@ -3,9 +3,9 @@ import { cva } from "class-variance-authority";
 export const toastVariants = cva(
   [
     "group pointer-events-auto relative flex w-full",
-    "rounded-lg shadow-[0px_8px_16px_0px_rgba(0,0,0,0.12)] px-4 py-3 gap-1",
+    "rounded-lg shadow-[0px_8px_16px_0px_rgba(0,0,0,0.08)] px-4 py-3 gap-1",
     "transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
-    "bg-base-popup text-base-popup-foreground",
+    "bg-modal-surface text-text-contrast-low",
   ],
   {
     variants: {
@@ -52,7 +52,7 @@ export const toastVariants = cva(
       variant: "success",
       showBorder: false,
     },
-  }
+  },
 );
 
 export const toastViewportVariants = cva(
@@ -71,7 +71,7 @@ export const toastViewportVariants = cva(
     defaultVariants: {
       position: "top-center",
     },
-  }
+  },
 );
 
 export const toastIconVariants = cva(
@@ -79,7 +79,7 @@ export const toastIconVariants = cva(
   {
     variants: {
       variant: {
-        default: "",
+        default: "text-text-g-contrast-high",
         success: "bg-success-transparent-8 text-success",
         info: "bg-info-transparent-8 text-info",
         warning: "bg-warning-transparent-8 text-warning",
@@ -89,14 +89,14 @@ export const toastIconVariants = cva(
     defaultVariants: {
       variant: "success",
     },
-  }
+  },
 );
 
 export const toastContentVariants = cva(["flex flex-1"], {
   variants: {
     contentMode: {
       horizontal: "items-center flex-row gap-2",
-      vertical: "flex-col gap-[2px]",
+      vertical: "items-start flex-col gap-0",
     },
   },
   defaultVariants: {

package/src/components/Toast/Toast.tsx

@@ -15,7 +15,7 @@ const ToastProvider = ToastPrimitives.Provider;
 const ToastViewport = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Viewport>,
   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport> &
-  VariantProps<typeof toastViewportVariants>
+    VariantProps<typeof toastViewportVariants>
 >(({ className, position, ...props }, ref) => (
   <ToastPrimitives.Viewport
     ref={ref}
@@ -28,7 +28,7 @@ ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 const Toast = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Root>,
   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-  VariantProps<typeof toastVariants>
+    VariantProps<typeof toastVariants>
 >(({ className, variant, showBorder, ...props }, ref) => {
   return (
     <ToastPrimitives.Root
@@ -63,7 +63,8 @@ const ToastClose = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Close
     ref={ref}
-    className={cn("-mr-2 self-center text-grey-light", className)}
+    // className={cn("-mr-2 self-center text-text-g-contrast-high", className)}
+    className={cn("self-center text-text-g-contrast-high", className)}
     toast-close=""
     {...props}
     asChild
@@ -93,7 +94,7 @@ const ToastDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Description
     ref={ref}
-    className={cn("typography-subtitle4 text-grey-light", className)}
+    className={cn("typography-subtitle4 text-text-g-contrast-high", className)}
     {...props}
   />
 ));

package/src/components/Toast/Toaster.tsx

@@ -51,28 +51,28 @@ export function Toaster({
           props.variant === "error"
             ? "circle-x"
             : props.variant === "warning"
-              ? "circle-alert"
-              : props.variant === "info"
-                ? "info"
-                : "circle-check";
+            ? "circle-alert"
+            : props.variant === "info"
+            ? "info"
+            : "circle-check";
 
         const titleToneClass =
           props.variant === "error"
             ? "text-error"
             : props.variant === "warning"
-              ? "text-warning"
-              : props.variant === "info"
-                ? "text-info"
-                : props.variant === "success"
-                  ? "text-success"
-                  : "text-base-popup-foreground";
+            ? "text-warning"
+            : props.variant === "info"
+            ? "text-info"
+            : props.variant === "success"
+            ? "text-success"
+            : "text-text-g-contrast-high";
 
         return (
           <Toast key={id} {...props}>
             <div
               className={cn(
                 toastIconVariants({ variant: props.variant }),
-                iconWrapperClassName
+                iconWrapperClassName,
               )}
             >
               {renderIcon ? (
@@ -89,7 +89,7 @@ export function Toaster({
             <div
               className={cn(
                 toastContentVariants({ contentMode }),
-                contentClassName
+                contentClassName,
               )}
             >
               {title && (
@@ -103,14 +103,11 @@ export function Toaster({
                 </ToastDescription>
               )}
             </div>
-            <div
-              className={cn(
-                "self-center ml-[var(--spacing-spacing-xl)]",
-                actionWrapperClassName
-              )}
-            >
-              {action}
-            </div>
+            {action ? (
+              <div className={cn("self-center mx-5", actionWrapperClassName)}>
+                {action}
+              </div>
+            ) : null}
             <ToastClose />
           </Toast>
         );

package/src/components/Tree/Tree.stories.tsx

@@ -29,7 +29,7 @@ const meta: Meta<typeof Tree> = {
   },
   decorators: [
     (Story) => (
-      <div className="p-5 flex w-full bg-base-bg">
+      <div className="p-5 flex w-full bg-bg-bg1">
         <Story />
       </div>
     ),

package/src/components/Tree/TreeItem.tsx

@@ -233,7 +233,7 @@ const TreeItem: FC<TreeItemProps> = ({
             )}
             <div
               className={cn(
-                "ml-2 gap-1 flex flex-1 items-center text-foreground",
+                "ml-2 gap-1 flex flex-1 items-center text-common-black",
                 classes?.item
               )}
               onClick={handleOnClickItem}

package/src/index.ts

@@ -22,6 +22,8 @@ export { Avatar, AvatarGroup } from "./components/Avatar";
 export { Collapsible } from "./components/Collapsible";
 export { Calendar } from "./components/Calendar";
 export { default as DatePicker } from "./components/DatePicker/DatePicker";
+export { default as OtpInput } from "./components/OtpInput";
+export { OtpInputGroup } from "./components/OtpInput";
 export {
   Popover,
   PopoverTrigger,
@@ -48,6 +50,7 @@ export * from "./components/Toast/useToast";
 export * from "./components/Tree";
 export * from "./components/FocusedScrollView/FocusedScrollView";
 export * from "./components/RadioGroup/RadioGroup";
+export * from "./components/Form";
 
 // Export component types
 export type { ButtonProps } from "./components/Button/Button";
@@ -59,6 +62,8 @@ export type {
 } from "./components/MaskedTextInput";
 export type { NumberInputProps } from "./components/NumberInput/NumberInput";
 export type { TextAreaProps } from "./components/TextArea/TextArea";
+export type { OtpInputProps } from "./components/OtpInput";
+export type { OtpInputGroupProps } from "./components/OtpInput";
 export type { DropdownProps, Options } from "./components/Dropdown/Dropdown";
 export type { NavbarProps, NavbarVariant } from "./components/Navbar/Navbar";
 export type { FooterProps, FooterVariant } from "./components/Footer/Footer";