@chekinapp/ui 0.0.8 → 0.0.11

package/dist/index.cjs

@@ -924,10 +924,12 @@ var import_react_i18next3 = require("react-i18next");
 var import_class_variance_authority3 = require("class-variance-authority");
 var buttonVariants = (0, import_class_variance_authority3.cva)(
   [
-    "relative inline-flex items-center justify-center gap-2 whitespace-nowrap font-sans font-semibold",
-    "transition-colors duration-150 ease-out outline-none",
-    "focus-visible:shadow-chekin-focus disabled:pointer-events-none disabled:opacity-50",
-    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+    "button relative inline-flex items-center justify-center gap-2 whitespace-nowrap",
+    "[font-family:var(--button-font-family)] [font-weight:var(--button-font-weight)]",
+    "transition-all duration-150 ease-out outline-none",
+    "focus-visible:shadow-[var(--button-focus-shadow)]",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:size-[var(--button-icon-size)] [&_svg]:shrink-0",
     'before:absolute before:inset-0 before:rounded-[inherit] before:content-[""]',
     "before:bg-transparent before:transition-colors before:duration-150",
     "[&>*]:relative [&>*]:z-[1]"
@@ -936,51 +938,73 @@ var buttonVariants = (0, import_class_variance_authority3.cva)(
     variants: {
       variant: {
         default: [
-          "bg-chekin-blue text-white",
-          "hover:before:bg-white/10 active:before:bg-black/10",
-          "focus-visible:ring-1 focus-visible:ring-chekin-navy focus-visible:ring-inset"
+          "button_default",
+          "bg-[var(--button-primary-bg)] text-[color:var(--button-primary-text)]",
+          "hover:before:bg-[var(--button-primary-hover-overlay)] active:before:bg-[var(--button-primary-active-overlay)]",
+          "disabled:hover:before:bg-transparent"
         ],
         primary: [
-          "bg-chekin-blue text-white",
-          "hover:before:bg-white/10 active:before:bg-black/10",
-          "focus-visible:ring-1 focus-visible:ring-chekin-navy focus-visible:ring-inset"
+          "button_default",
+          "bg-[var(--button-primary-bg)] text-[color:var(--button-primary-text)]",
+          "hover:before:bg-[var(--button-primary-hover-overlay)] active:before:bg-[var(--button-primary-active-overlay)]",
+          "disabled:hover:before:bg-transparent"
         ],
         destructive: [
-          "border border-chekin-red bg-white text-chekin-red shadow-chekin-subtle-outline",
-          "hover:bg-chekin-surface-input-empty"
+          "button_destructive",
+          "border border-[var(--button-destructive-border)] bg-[var(--button-destructive-bg)] text-[color:var(--button-destructive-text)]",
+          "shadow-[var(--button-shadow)]",
+          "hover:bg-[var(--button-destructive-hover-bg)]",
+          "disabled:hover:bg-[var(--button-destructive-bg)]"
         ],
         secondary: [
-          "bg-white/30 text-chekin-navy shadow-chekin-subtle-outline",
-          "hover:before:bg-black/5 active:before:bg-black/10"
+          "button_secondary",
+          "border border-[var(--button-secondary-border)] bg-[var(--button-secondary-bg)] text-[color:var(--button-secondary-text)]",
+          "shadow-[var(--button-shadow)]",
+          "hover:before:bg-[var(--button-secondary-hover-overlay)] active:before:bg-[var(--button-secondary-active-overlay)]",
+          "disabled:hover:before:bg-transparent"
         ],
         ghost: [
-          "bg-transparent text-chekin-navy",
-          "hover:bg-chekin-surface-input-empty active:bg-chekin-gray-3"
+          "button_ghost",
+          "bg-[var(--button-ghost-bg)] text-[color:var(--button-ghost-text)]",
+          "hover:bg-[var(--button-ghost-hover-bg)] active:bg-[var(--button-ghost-active-bg)]",
+          "disabled:hover:bg-[var(--button-ghost-bg)]"
         ],
         link: [
-          "h-auto rounded-none bg-transparent px-0 py-0 text-chekin-blue underline-offset-4",
-          "hover:underline active:opacity-80 before:hidden"
+          "button_link",
+          "h-auto rounded-none bg-[var(--button-link-bg)] px-0 py-0 text-[color:var(--button-link-text)]",
+          "underline-offset-4",
+          "hover:underline active:opacity-80 before:hidden",
+          "disabled:hover:no-underline"
         ],
         tertiary: [
-          "border border-white bg-transparent text-white shadow-chekin-subtle-outline",
-          "hover:before:bg-white/10 active:before:bg-black/10"
+          "button_tertiary",
+          "border border-[var(--button-tertiary-border)] bg-[var(--button-tertiary-bg)] text-[color:var(--button-tertiary-text)]",
+          "shadow-[var(--button-shadow)]",
+          "hover:before:bg-[var(--button-tertiary-hover-overlay)] active:before:bg-[var(--button-tertiary-active-overlay)]",
+          "disabled:hover:before:bg-transparent"
+        ],
+        outline: [
+          "border border-[var(--button-outline-border)] bg-[var(--button-outline-bg)] text-[color:var(--button-outline-text)]",
+          "hover:bg-[var(--button-outline-hover-bg)]",
+          "disabled:hover:bg-[var(--button-outline-bg)]"
         ]
       },
       size: {
-        default: "h-10 px-4 py-2 text-[14px]",
-        m: "h-12 min-w-[160px] rounded-xl px-4 text-[14px]",
-        s: "h-8 px-[12px] text-[13px]",
-        sm: "h-9 rounded-md px-3 text-[14px]",
-        lg: "h-11 rounded-md px-8 text-[15px]",
-        xs: "h-6 px-[10px] text-[12px]",
-        icon: "h-8 w-8 p-0"
+        default: "button_size_default h-[var(--button-height-default)] min-w-[var(--button-min-width-default)] px-4 py-2 text-[length:var(--button-font-size)]",
+        m: "button_size_m h-[var(--button-height-m)] min-w-[var(--button-min-width-m)] px-4 text-[length:var(--button-font-size)]",
+        md: "button_size_m h-[var(--button-height-m)] min-w-[var(--button-min-width-m)] px-4 text-[length:var(--button-font-size)]",
+        s: "button_size_sm h-[var(--button-height-s)] px-[12px] text-[13px]",
+        sm: "button_size_sm h-[var(--button-height-sm)] px-3 text-[length:var(--button-font-size)]",
+        lg: "button_size_lg h-[var(--button-height-lg)] px-8 text-[15px]",
+        xs: "button_size_xs h-[var(--button-height-xs)] px-[10px] text-[12px]",
+        icon: "button_size_icon h-[var(--button-height-icon)] w-[var(--button-height-icon)] p-0"
       },
       shape: {
-        rounded: "rounded-chekin-input",
+        rounded: "rounded-[var(--button-radius)]",
         pill: "rounded-full"
       },
       readOnly: {
-        true: "pointer-events-none cursor-not-allowed !opacity-100",
+        true: "button_readonly pointer-events-none cursor-not-allowed !opacity-100",
         false: ""
       }
     },
@@ -1030,15 +1054,28 @@ var Button = React4.forwardRef(
     ...props
   }, ref) => {
     const { t } = (0, import_react_i18next3.useTranslation)();
-    const Comp = asChild ? import_react_slot2.Slot : "button";
     const showLoadingLabel = size !== "icon";
+    const isDisabled = readOnly || disabled || loading;
+    const classNames = cn(buttonVariants({ variant, size, shape, readOnly }), className);
+    if (asChild) {
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        import_react_slot2.Slot,
+        {
+          ref,
+          "aria-disabled": isDisabled || void 0,
+          className: classNames,
+          ...props,
+          children
+        }
+      );
+    }
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      Comp,
+      "button",
       {
         ref,
-        type: Comp === "button" ? type ?? "button" : void 0,
-        disabled: readOnly || disabled || loading,
-        className: cn(buttonVariants({ variant, size, shape, readOnly }), className),
+        type: type ?? "button",
+        disabled: isDisabled,
+        className: classNames,
         ...props,
         children: loading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "inline-flex items-center gap-1.5", children: [
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Spinner, {}),
@@ -6370,7 +6407,10 @@ function Skeleton({ className, ...props }) {
     "div",
     {
       "data-slot": "skeleton",
-      className: cn("animate-pulse rounded-md bg-chekin-gray-3", className),
+      className: cn(
+        "animate-pulse rounded-md bg-[var(--chekin-color-gray-3)]",
+        className
+      ),
       ...props
     }
   );
@@ -9401,7 +9441,7 @@ function ResponsiveSheet({
   closeOnOverlayClick = true,
   closeOnEscape = true
 }) {
-  const { isMatch: isMobile } = useScreenResize(DEVICE.laptop);
+  const { isMatch: isMobile } = useScreenResize(DEVICE.tablet);
   const isMobileMode = isMobile && isMobileModalModeAvailable();
   const handleOpenChange = (nextOpen) => {
     if (!nextOpen) {