@chekinapp/ui 0.0.10 → 0.0.13

package/dist/index.d.cts

@@ -171,8 +171,6 @@ declare const buttonVariants: (props?: ({
 
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
-    leftIcon?: React$1.ReactNode;
-    rightIcon?: React$1.ReactNode;
     loading?: boolean;
     loadingText?: string;
 }

package/dist/index.d.ts

@@ -171,8 +171,6 @@ declare const buttonVariants: (props?: ({
 
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
-    leftIcon?: React$1.ReactNode;
-    rightIcon?: React$1.ReactNode;
     loading?: boolean;
     loadingText?: string;
 }

package/dist/index.js

@@ -627,7 +627,7 @@ import { useTranslation as useTranslation3 } from "react-i18next";
 import { cva as cva3 } from "class-variance-authority";
 var buttonVariants = cva3(
   [
-    "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)]",
@@ -641,39 +641,45 @@ var buttonVariants = cva3(
     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)]",
@@ -686,21 +692,21 @@ var buttonVariants = cva3(
         ]
       },
       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: ""
       }
     },
@@ -740,8 +746,6 @@ var Button = React4.forwardRef(
     shape,
     asChild = false,
     readOnly = false,
-    leftIcon,
-    rightIcon,
     loading = false,
     loadingText,
     disabled,
@@ -776,11 +780,7 @@ var Button = React4.forwardRef(
         children: loading ? /* @__PURE__ */ jsxs9("span", { className: "inline-flex items-center gap-1.5", children: [
           /* @__PURE__ */ jsx10(Spinner, {}),
           showLoadingLabel ? /* @__PURE__ */ jsx10("span", { children: loadingText || t("please_wait") }) : null
-        ] }) : /* @__PURE__ */ jsxs9("span", { className: "inline-flex items-center gap-2", children: [
-          leftIcon,
-          children,
-          rightIcon
-        ] })
+        ] }) : /* @__PURE__ */ jsx10("span", { className: "inline-flex items-center gap-2", children })
       }
     );
   }
@@ -6134,7 +6134,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
     }
   );
@@ -9239,11 +9242,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__ */ jsx122(DialogTitle, { className: "sr-only", children: title }) : null,
@@ -10736,6 +10735,7 @@ AirbnbSearchInput.displayName = "SearchInput";
 import * as React39 from "react";
 import { ChevronDown as ChevronDown3, Search as Search4 } from "lucide-react";
 import { useVirtualizer } from "@tanstack/react-virtual";
+import { useCallback as useCallback20 } from "react";
 import { jsx as jsx132, jsxs as jsxs86 } from "react/jsx-runtime";
 var ROW_HEIGHT = 48;
 var DESKTOP_LIST_HEIGHT = 280;
@@ -10809,6 +10809,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 = useCallback20(
+    (nextOpen, options2) => {
+      setOpen(nextOpen);
+      onOpenChange?.(nextOpen);
+      if (!nextOpen && options2?.restoreFocus) {
+        triggerRef.current?.focus();
+      }
+    },
+    []
+  );
   React39.useEffect(() => {
     if (isBlocked) {
       setSelectOpen(false);
@@ -10821,7 +10831,7 @@ var SearchableSelectInternal = ({
     return () => {
       window.cancelAnimationFrame(frameId);
     };
-  }, [isBlocked, open]);
+  }, [isBlocked, open, setSelectOpen]);
   React39.useEffect(() => {
     if (!open) {
       setHighlightedIndex(-1);
@@ -10834,13 +10844,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);