@chekinapp/ui 0.0.7 → 0.0.10

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",
+    "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,47 +938,62 @@ 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"
+          "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"
+          "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"
+          "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"
+          "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"
+          "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"
+          "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"
+          "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: "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"
       },
       shape: {
-        rounded: "rounded-chekin-input",
+        rounded: "rounded-[var(--button-radius)]",
         pill: "rounded-full"
       },
       readOnly: {
@@ -1030,15 +1047,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, {}),
@@ -9203,6 +9233,7 @@ var DatePicker = React30.forwardRef(
     value,
     defaultValue,
     onChange,
+    onBlur,
     placeholder = "Select a date",
     disabled,
     error,
@@ -9344,6 +9375,7 @@ var DatePicker = React30.forwardRef(
           "aria-expanded": isOpen,
           onClick: handleTriggerClick,
           onKeyDown: handleTriggerKeyDown,
+          onBlur,
           trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_lucide_react42.Calendar, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
         }
       ),
@@ -9399,7 +9431,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) {
@@ -10015,7 +10047,8 @@ var SelectTrigger2 = React32.forwardRef(
     listboxId,
     describedBy,
     onClick,
-    onKeyDown
+    onKeyDown,
+    onBlur
   }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
       FieldTrigger,
@@ -10045,6 +10078,7 @@ var SelectTrigger2 = React32.forwardRef(
         disabled,
         onClick,
         onKeyDown,
+        onBlur,
         trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
           import_lucide_react43.ChevronDown,
           {
@@ -10461,9 +10495,10 @@ function useOutsideClick(elementRef, onOutsideClick, nested) {
 // src/airbnb/select/Select.tsx
 var import_jsx_runtime131 = require("react/jsx-runtime");
 var AirbnbSelect = React36.forwardRef(function AirbnbSelect2({
-  options,
+  options = [],
   value,
   onChange,
+  onBlur,
   variant = "default",
   label,
   topLabel,
@@ -10657,7 +10692,8 @@ var AirbnbSelect = React36.forwardRef(function AirbnbSelect2({
           describedBy,
           triggerRef: combinedRef,
           onClick: handleTriggerClick,
-          onKeyDown: handleRootTriggerKeyDown
+          onKeyDown: handleRootTriggerKeyDown,
+          onBlur
         }) : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
           SelectTrigger2,
           {
@@ -10682,7 +10718,8 @@ var AirbnbSelect = React36.forwardRef(function AirbnbSelect2({
             listboxId,
             describedBy,
             onClick: handleTriggerClick,
-            onKeyDown: handleRootTriggerKeyDown
+            onKeyDown: handleRootTriggerKeyDown,
+            onBlur
           }
         ),
         isMobile ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
@@ -10752,6 +10789,7 @@ var PhoneField = React37.forwardRef(
     topLabel,
     value,
     onChange,
+    onBlur,
     options,
     placeholder = "Phone number",
     disabled,
@@ -10772,7 +10810,7 @@ var PhoneField = React37.forwardRef(
     const codeOptions = React37.useMemo(
       () => options.map((option) => ({
         value: option.value,
-        label: option.label,
+        label: `${option.label} (${option.value})`,
         disabled: option.disabled
       })),
       [options]
@@ -10907,7 +10945,8 @@ var PhoneField = React37.forwardRef(
             onChange: (event) => onChange({
               code: value?.code ?? "",
               number: event.target.value
-            })
+            }),
+            onBlur
           }
         )
       ] }),
@@ -10975,6 +11014,7 @@ var SearchableSelectInternal = ({
   options,
   value,
   onChange,
+  onBlur,
   onOpenChange,
   searchValue,
   onSearchChange,
@@ -11192,6 +11232,7 @@ var SearchableSelectInternal = ({
               openSelect();
             },
             onKeyDown: handleTriggerKeyDown,
+            onBlur,
             trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
               import_lucide_react46.ChevronDown,
               {