@chekinapp/ui 0.0.10 → 0.0.13

package/dist/index.cjs

@@ -924,7 +924,7 @@ 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",
+    "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)]",
@@ -938,39 +938,45 @@ var buttonVariants = (0, import_class_variance_authority3.cva)(
     variants: {
       variant: {
         default: [
+          "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: [
+          "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: [
+          "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: [
+          "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: [
+          "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-[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"
+          "button_link",
+          "h-auto [font-weight:var(--button-link-font-weight)] rounded-none bg-[var(--button-link-bg)] px-0 py-0 text-[color:var(--button-link-text)]",
+          "hover:opacity-80 active:opacity-80 before:hidden",
+          "disabled:hover:no-opacity-80"
         ],
         tertiary: [
+          "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)]",
@@ -983,21 +989,21 @@ var buttonVariants = (0, import_class_variance_authority3.cva)(
         ]
       },
       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: "h-[var(--button-height-m)] min-w-[var(--button-min-width-m)] px-4 text-[length:var(--button-font-size)]",
-        md: "h-[var(--button-height-m)] min-w-[var(--button-min-width-m)] px-4 text-[length:var(--button-font-size)]",
-        s: "h-[var(--button-height-s)] px-[12px] text-[13px]",
-        sm: "h-[var(--button-height-sm)] px-3 text-[length:var(--button-font-size)]",
-        lg: "h-[var(--button-height-lg)] px-8 text-[15px]",
-        xs: "h-[var(--button-height-xs)] px-[10px] text-[12px]",
-        icon: "h-[var(--button-height-icon)] w-[var(--button-height-icon)] 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-[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: ""
       }
     },
@@ -1037,8 +1043,6 @@ var Button = React4.forwardRef(
     shape,
     asChild = false,
     readOnly = false,
-    leftIcon,
-    rightIcon,
     loading = false,
     loadingText,
     disabled,
@@ -1073,11 +1077,7 @@ var Button = React4.forwardRef(
         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, {}),
           showLoadingLabel ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: loadingText || t("please_wait") }) : null
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "inline-flex items-center gap-2", children: [
-          leftIcon,
-          children,
-          rightIcon
-        ] })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "inline-flex items-center gap-2", children })
       }
     );
   }
@@ -6400,7 +6400,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
     }
   );
@@ -9505,11 +9508,7 @@ function ResponsiveSheet({
       onPointerDownOutside: handleInteractOutside,
       onInteractOutside: handleInteractOutside,
       onEscapeKeyDown: handleEscapeKeyDown,
-      className: cn(
-        "max-w-[560px] rounded-[28px] border-0 p-0 shadow-xl",
-        className,
-        dialogClassName
-      ),
+      className: cn("max-w-[560px] border-0 p-0 shadow-xl", className, dialogClassName),
       lockScroll: false,
       children: [
         title ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(DialogTitle, { className: "sr-only", children: title }) : null,
@@ -11002,6 +11001,7 @@ AirbnbSearchInput.displayName = "SearchInput";
 var React39 = __toESM(require("react"), 1);
 var import_lucide_react46 = require("lucide-react");
 var import_react_virtual = require("@tanstack/react-virtual");
+var import_react46 = require("react");
 var import_jsx_runtime134 = require("react/jsx-runtime");
 var ROW_HEIGHT = 48;
 var DESKTOP_LIST_HEIGHT = 280;
@@ -11075,6 +11075,16 @@ var SearchableSelectInternal = ({
   const describedBy = error && !hideErrorMessage ? errorId : void 0;
   const activeOptionId = highlightedIndex >= 0 ? getOptionId(reactId, highlightedIndex) : void 0;
   useOutsideClick(containerRef, open && !isMobile ? () => closeSelect() : null);
+  const setSelectOpen = (0, import_react46.useCallback)(
+    (nextOpen, options2) => {
+      setOpen(nextOpen);
+      onOpenChange?.(nextOpen);
+      if (!nextOpen && options2?.restoreFocus) {
+        triggerRef.current?.focus();
+      }
+    },
+    []
+  );
   React39.useEffect(() => {
     if (isBlocked) {
       setSelectOpen(false);
@@ -11087,7 +11097,7 @@ var SearchableSelectInternal = ({
     return () => {
       window.cancelAnimationFrame(frameId);
     };
-  }, [isBlocked, open]);
+  }, [isBlocked, open, setSelectOpen]);
   React39.useEffect(() => {
     if (!open) {
       setHighlightedIndex(-1);
@@ -11100,13 +11110,6 @@ var SearchableSelectInternal = ({
       return selectedIndex >= 0 ? selectedIndex : getFirstEnabledIndex(visibleOptions);
     });
   }, [open, selectedIndex, visibleOptions]);
-  function setSelectOpen(nextOpen, options2) {
-    setOpen(nextOpen);
-    onOpenChange?.(nextOpen);
-    if (!nextOpen && options2?.restoreFocus) {
-      triggerRef.current?.focus();
-    }
-  }
   function openSelect() {
     if (isBlocked) return;
     setSelectOpen(true);