@bubo-squared/ui-framework 0.1.96 → 0.1.97

package/dist/index.d.cts

@@ -256,7 +256,7 @@ interface DropdownOption {
     value: string;
 }
 declare const dropdownTriggerVariants: (props?: ({
-    size?: "large" | "extra-large" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
     status?: "success" | "error" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface DropdownProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "onChange">, VariantProps<typeof dropdownTriggerVariants> {
@@ -293,7 +293,7 @@ interface FieldProps {
 }
 declare const Field: React$1.FC<FieldProps>;
 
-type PasswordInputSize = "large" | "extra-large";
+type PasswordInputSize = "sm" | "md" | "lg" | "xl";
 type PasswordInputStatus = "default" | "success" | "error";
 type PasswordInputVariant = "icons" | "action";
 interface PasswordInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "disabled"> {
@@ -315,7 +315,7 @@ interface PasswordInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputE
 }
 declare const PasswordInput: React$1.FC<PasswordInputProps>;
 
-type TextInputSize = "large" | "extra-large";
+type TextInputSize = "sm" | "md" | "lg" | "xl";
 type TextInputStatus = "default" | "success" | "error";
 interface TextInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size" | "disabled"> {
     label?: string;
@@ -370,7 +370,7 @@ interface RadioGroupProps extends Omit<RadioGroupPrimitive.RadioGroupProps, "chi
 }
 declare const RadioGroup: React$1.FC<RadioGroupProps>;
 
-type SearchInputSize = "large" | "extra-large";
+type SearchInputSize = "sm" | "md" | "lg" | "xl";
 interface SearchInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size" | "disabled"> {
     placeholder?: string;
     leadingIcon?: React$1.ReactNode;

package/dist/index.d.ts

@@ -256,7 +256,7 @@ interface DropdownOption {
     value: string;
 }
 declare const dropdownTriggerVariants: (props?: ({
-    size?: "large" | "extra-large" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
     status?: "success" | "error" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface DropdownProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "onChange">, VariantProps<typeof dropdownTriggerVariants> {
@@ -293,7 +293,7 @@ interface FieldProps {
 }
 declare const Field: React$1.FC<FieldProps>;
 
-type PasswordInputSize = "large" | "extra-large";
+type PasswordInputSize = "sm" | "md" | "lg" | "xl";
 type PasswordInputStatus = "default" | "success" | "error";
 type PasswordInputVariant = "icons" | "action";
 interface PasswordInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "disabled"> {
@@ -315,7 +315,7 @@ interface PasswordInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputE
 }
 declare const PasswordInput: React$1.FC<PasswordInputProps>;
 
-type TextInputSize = "large" | "extra-large";
+type TextInputSize = "sm" | "md" | "lg" | "xl";
 type TextInputStatus = "default" | "success" | "error";
 interface TextInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size" | "disabled"> {
     label?: string;
@@ -370,7 +370,7 @@ interface RadioGroupProps extends Omit<RadioGroupPrimitive.RadioGroupProps, "chi
 }
 declare const RadioGroup: React$1.FC<RadioGroupProps>;
 
-type SearchInputSize = "large" | "extra-large";
+type SearchInputSize = "sm" | "md" | "lg" | "xl";
 interface SearchInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size" | "disabled"> {
     placeholder?: string;
     leadingIcon?: React$1.ReactNode;

package/dist/index.js

@@ -1068,8 +1068,10 @@ var dropdownTriggerVariants = cva12(
   {
     variants: {
       size: {
-        large: "h-11",
-        "extra-large": "h-14"
+        sm: "h-8 py-1",
+        md: "h-10 py-2",
+        lg: "h-11",
+        xl: "h-14"
       },
       status: {
         default: "border-(--border-secondary)",
@@ -1078,7 +1080,7 @@ var dropdownTriggerVariants = cva12(
       }
     },
     defaultVariants: {
-      size: "large",
+      size: "lg",
       status: "default"
     }
   }
@@ -1086,8 +1088,10 @@ var dropdownTriggerVariants = cva12(
 var dropdownTextVariants = cva12("truncate", {
   variants: {
     size: {
-      large: "subtitle",
-      "extra-large": "h6-title"
+      sm: "paragraph-m",
+      md: "paragraph-l",
+      lg: "subtitle",
+      xl: "h6-title"
     },
     hasValue: {
       false: "text-(--color-secondary)",
@@ -1098,15 +1102,17 @@ var dropdownTextVariants = cva12("truncate", {
     }
   },
   defaultVariants: {
-    size: "large",
+    size: "lg",
     hasValue: false
   }
 });
 var dropdownIconVariants = cva12("flex items-center justify-center shrink-0", {
   variants: {
     size: {
-      large: "w-5 h-5",
-      "extra-large": "w-6 h-6"
+      sm: "w-4 h-4",
+      md: "w-5 h-5",
+      lg: "w-5 h-5",
+      xl: "w-6 h-6"
     },
     disabled: {
       false: "text-(--icon-primary)",
@@ -1114,7 +1120,7 @@ var dropdownIconVariants = cva12("flex items-center justify-center shrink-0", {
     }
   },
   defaultVariants: {
-    size: "large",
+    size: "lg",
     disabled: false
   }
 });
@@ -1125,7 +1131,7 @@ var Dropdown = (props) => {
     hint = "This is a hint text to help user.",
     hideHint = false,
     placeholder = "Placeholder text",
-    size = "large",
+    size = "lg",
     status = "default",
     disabled,
     options,
@@ -1354,8 +1360,10 @@ var inputShellVariants = cva13(
   {
     variants: {
       size: {
-        large: "gap-2 px-2 py-2 h-11",
-        "extra-large": "gap-2 px-[10px] py-2 h-14"
+        sm: "gap-2 px-2 py-1 h-8",
+        md: "gap-2 px-2 py-2 h-10",
+        lg: "gap-2 px-2 py-2 h-11",
+        xl: "gap-2 px-[10px] py-2 h-14"
       },
       status: {
         default: "input-default",
@@ -1367,7 +1375,7 @@ var inputShellVariants = cva13(
       }
     },
     defaultVariants: {
-      size: "large",
+      size: "lg",
       status: "default"
     }
   }
@@ -1395,8 +1403,10 @@ import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
 var passwordTextVariants = cva14("truncate", {
   variants: {
     size: {
-      large: "subtitle",
-      "extra-large": "h6-title"
+      sm: "paragraph-m",
+      md: "paragraph-l",
+      lg: "subtitle",
+      xl: "h6-title"
     },
     disabled: {
       true: "text-primary-disabled",
@@ -1404,7 +1414,7 @@ var passwordTextVariants = cva14("truncate", {
     }
   },
   defaultVariants: {
-    size: "large",
+    size: "lg",
     disabled: false
   }
 });
@@ -1413,15 +1423,17 @@ var iconWrapperVariants = cva14(
   {
     variants: {
       size: {
-        large: "size-5 [&>svg]:size-5",
-        "extra-large": "size-6 [&>svg]:size-6"
+        sm: "size-4 [&>svg]:size-4",
+        md: "size-5 [&>svg]:size-5",
+        lg: "size-5 [&>svg]:size-5",
+        xl: "size-6 [&>svg]:size-6"
       },
       disabled: {
         true: "text-(--icon-primary-disabled)"
       }
     },
     defaultVariants: {
-      size: "large"
+      size: "lg"
     }
   }
 );
@@ -1430,15 +1442,17 @@ var actionButtonVariants = cva14(
   {
     variants: {
       size: {
-        large: "paragraph-s",
-        "extra-large": "paragraph-m"
+        sm: "paragraph-s",
+        md: "paragraph-s",
+        lg: "paragraph-s",
+        xl: "paragraph-m"
       },
       disabled: {
         true: "cursor-default text-primary-disabled hover:text-primary-disabled"
       }
     },
     defaultVariants: {
-      size: "large"
+      size: "lg"
     }
   }
 );
@@ -1448,7 +1462,7 @@ var PasswordInput = (props) => {
     hint,
     hideHint,
     placeholder = "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
-    size = "large",
+    size = "lg",
     status = "default",
     variant = "icons",
     disabled,
@@ -1828,8 +1842,10 @@ var sizeBase = cva16(
   {
     variants: {
       size: {
-        large: "h-11 [&_button]:gap-2",
-        "extra-large": "h-14 [&_button]:gap-3"
+        sm: "h-8 [&_button]:gap-2",
+        md: "h-10 [&_button]:gap-2",
+        lg: "h-11 [&_button]:gap-2",
+        xl: "h-14 [&_button]:gap-3"
       }
     }
   }
@@ -1837,15 +1853,17 @@ var sizeBase = cva16(
 var inputTextVariants = cva16("", {
   variants: {
     size: {
-      large: "subtitle",
-      "extra-large": "h6-title"
+      sm: "paragraph-m",
+      md: "paragraph-l",
+      lg: "subtitle",
+      xl: "h6-title"
     },
     disabled: {
       true: "text-primary-disabled border-(--border-secondary-disabled)"
     }
   },
   defaultVariants: {
-    size: "large"
+    size: "lg"
   }
 });
 var wrapperStatusClass = {
@@ -1863,7 +1881,7 @@ var PhoneInput = React26.forwardRef(
       hint,
       hideHint,
       placeholder,
-      size = "large",
+      size = "lg",
       disabled = false,
       status = "default",
       ...rest
@@ -2192,32 +2210,36 @@ import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
 var searchTextVariants = cva17("truncate", {
   variants: {
     size: {
-      large: "subtitle",
-      "extra-large": "h6-title"
+      sm: "paragraph-m",
+      md: "paragraph-l",
+      lg: "subtitle",
+      xl: "h6-title"
     }
   },
   defaultVariants: {
-    size: "large"
+    size: "lg"
   }
 });
 var iconWrapperVariants2 = cva17("flex items-center justify-center shrink-0 text-(--icon-primary)", {
   variants: {
     size: {
-      large: "size-5 [&>svg]:size-5",
-      "extra-large": "size-6 [&>svg]:size-6"
+      sm: "size-4 [&>svg]:size-4",
+      md: "size-5 [&>svg]:size-5",
+      lg: "size-5 [&>svg]:size-5",
+      xl: "size-6 [&>svg]:size-6"
     },
     disabled: {
       true: "text-(--icon-primary-disabled)"
     }
   },
   defaultVariants: {
-    size: "large"
+    size: "lg"
   }
 });
 var SearchInput = (props) => {
   const {
     placeholder = "Search...",
-    size = "large",
+    size = "lg",
     disabled,
     className,
     leadingIcon,
@@ -2820,12 +2842,14 @@ import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
 var inputTextVariants2 = cva18("truncate", {
   variants: {
     size: {
-      large: "subtitle",
-      "extra-large": "h6-title"
+      sm: "paragraph-m",
+      md: "paragraph-l",
+      lg: "subtitle",
+      xl: "h6-title"
     }
   },
   defaultVariants: {
-    size: "large"
+    size: "lg"
   }
 });
 var iconWrapperVariants3 = cva18(
@@ -2833,15 +2857,17 @@ var iconWrapperVariants3 = cva18(
   {
     variants: {
       size: {
-        large: "size-5 [&>svg]:size-5",
-        "extra-large": "size-6 [&>svg]:size-6"
+        sm: "size-4 [&>svg]:size-4",
+        md: "size-5 [&>svg]:size-5",
+        lg: "size-5 [&>svg]:size-5",
+        xl: "size-6 [&>svg]:size-6"
       },
       disabled: {
         true: "text-(--icon-primary-disabled)"
       }
     },
     defaultVariants: {
-      size: "large"
+      size: "lg"
     }
   }
 );
@@ -2851,7 +2877,7 @@ var TextInput = (props) => {
     hint,
     hideHint,
     placeholder = "Placeholder text",
-    size = "large",
+    size = "lg",
     status = "default",
     disabled = false,
     className,
@@ -3040,21 +3066,22 @@ var WebsiteInput = (props) => {
     hierarchy = "leading",
     protocolLabel = "http://",
     icon,
-    size = "large",
+    size = "lg",
     disabled,
     className,
     ...rest
   } = props;
   const isLeading = hierarchy === "leading";
+  const spanHeightClass = size === "xl" ? "[&>span]:h-14!" : size === "lg" ? "[&>span]:h-11!" : size === "md" ? "[&>span]:h-10!" : "[&>span]:h-8!";
   const baseClass = cn(
     "[&>span]:w-[unset] hover:bg-[unset]",
     !disabled && "[&:not(:focus-within):hover]:shadow-[0_0_0_var(--focus-ring-spread)_var(--background-secondary-hover)]",
     disabled && "bg-[unset] hover:shadow-none hover:border-(--border-secondary-disabled) border-(--border-secondary-disabled)",
-    size === "extra-large" ? "[&>span]:h-14!" : "[&>span]:h-11!"
+    spanHeightClass
   );
   const addonTextClass = cn(
     "flex mb-0!",
-    size === "extra-large" ? "paragraph-m" : "paragraph-s",
+    size === "xl" ? "paragraph-m" : size === "sm" ? "paragraph-m" : "paragraph-s",
     disabled ? "text-primary-disabled" : "text-primary group-hover:text-(--color-primary-hover) group-focus-within:text-(--color-primary-focus)"
   );
   const baseAddonClass = cn(
@@ -3067,7 +3094,7 @@ var WebsiteInput = (props) => {
   );
   const iconWrapperClass = cn(
     "flex items-center justify-center shrink-0",
-    size === "extra-large" ? "[&>svg]:w-6 [&>svg]:h-6" : "[&>svg]:w-5 [&>svg]:h-5",
+    size === "xl" ? "[&>svg]:w-6 [&>svg]:h-6" : size === "sm" ? "[&>svg]:w-4 [&>svg]:h-4" : "[&>svg]:w-5 [&>svg]:h-5",
     disabled ? "text-(--icon-primary-disabled)" : "text-(--icon-primary) group-hover:text-(--icon-primary-hover) group-focus-within:text-(--icon-primary-focus)"
   );
   const leadingAddon = /* @__PURE__ */ jsxs25("div", { className: baseAddonClass, children: [