@chekinapp/ui 0.0.7 → 0.0.10

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import { ReactNode, ElementType, InputHTMLAttributes, ComponentProps, PropsWithChildren, MouseEvent, SVGProps, FC, ImgHTMLAttributes, ComponentType, AnchorHTMLAttributes, ForwardedRef, ButtonHTMLAttributes, HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes, ComponentPropsWithoutRef, ReactElement, TextareaHTMLAttributes } from 'react';
+import { ReactNode, ElementType, InputHTMLAttributes, ComponentProps, PropsWithChildren, MouseEvent, SVGProps, FC, ImgHTMLAttributes, ComponentType, AnchorHTMLAttributes, ForwardedRef, ButtonHTMLAttributes, HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes, ComponentPropsWithoutRef, ReactElement, TextareaHTMLAttributes, FocusEventHandler } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
@@ -163,8 +163,8 @@ type BreadcrumbsProps = {
 declare function Breadcrumbs({ className, children }: BreadcrumbsProps): react_jsx_runtime.JSX.Element;
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "secondary" | "destructive" | "primary" | "ghost" | "tertiary" | null | undefined;
-    size?: "s" | "default" | "sm" | "lg" | "icon" | "m" | "xs" | null | undefined;
+    variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "primary" | "ghost" | "tertiary" | null | undefined;
+    size?: "s" | "default" | "sm" | "md" | "lg" | "icon" | "m" | "xs" | null | undefined;
     shape?: "rounded" | "pill" | null | undefined;
     readOnly?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -2224,6 +2224,7 @@ type DatePickerProps = {
     value?: DatePickerValue;
     defaultValue?: DatePickerValue;
     onChange: (value: Date | null) => void;
+    onBlur?: React$1.FocusEventHandler<HTMLButtonElement>;
     placeholder?: string;
     disabled?: boolean;
     error?: string;
@@ -2400,6 +2401,7 @@ type PhoneFieldProps = {
     topLabel?: string;
     value?: PhoneFieldValue | null;
     onChange: (value: PhoneFieldValue) => void;
+    onBlur?: React$1.FocusEventHandler<HTMLInputElement>;
     options: PhoneFieldOption[];
     placeholder?: string;
     disabled?: boolean;
@@ -2439,11 +2441,13 @@ type SelectRenderTriggerProps<T = undefined, V extends SelectValue = string, L e
     triggerRef: React$1.Ref<HTMLButtonElement>;
     onClick: () => void;
     onKeyDown: React$1.KeyboardEventHandler<HTMLButtonElement>;
+    onBlur?: React$1.FocusEventHandler<HTMLButtonElement>;
 };
 type AirbnbSelectProps<T = undefined, V extends SelectValue = string, L extends string | number | React$1.ReactNode = string> = {
-    options: SelectOption<T, V, L>[];
+    options?: SelectOption<T, V, L>[];
     value?: SelectOption<T, V, L> | null;
     onChange: (option: SelectOption<T, V, L>) => void;
+    onBlur?: React$1.FocusEventHandler<HTMLButtonElement>;
     variant?: 'default' | 'airbnb';
     label: string;
     topLabel?: string;
@@ -2481,6 +2485,7 @@ type SearchableSelectProps<T = undefined, V extends SearchableSelectValue = stri
     options: SelectOption<T, V, L>[];
     value?: SelectOption<T, V, L> | null;
     onChange: (option: SelectOption<T, V, L>) => void;
+    onBlur?: FocusEventHandler<HTMLButtonElement>;
     onOpenChange?: (open: boolean) => void;
     searchValue?: string;
     onSearchChange?: (value: string) => void;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import { ReactNode, ElementType, InputHTMLAttributes, ComponentProps, PropsWithChildren, MouseEvent, SVGProps, FC, ImgHTMLAttributes, ComponentType, AnchorHTMLAttributes, ForwardedRef, ButtonHTMLAttributes, HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes, ComponentPropsWithoutRef, ReactElement, TextareaHTMLAttributes } from 'react';
+import { ReactNode, ElementType, InputHTMLAttributes, ComponentProps, PropsWithChildren, MouseEvent, SVGProps, FC, ImgHTMLAttributes, ComponentType, AnchorHTMLAttributes, ForwardedRef, ButtonHTMLAttributes, HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes, ComponentPropsWithoutRef, ReactElement, TextareaHTMLAttributes, FocusEventHandler } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
@@ -163,8 +163,8 @@ type BreadcrumbsProps = {
 declare function Breadcrumbs({ className, children }: BreadcrumbsProps): react_jsx_runtime.JSX.Element;
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "secondary" | "destructive" | "primary" | "ghost" | "tertiary" | null | undefined;
-    size?: "s" | "default" | "sm" | "lg" | "icon" | "m" | "xs" | null | undefined;
+    variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "primary" | "ghost" | "tertiary" | null | undefined;
+    size?: "s" | "default" | "sm" | "md" | "lg" | "icon" | "m" | "xs" | null | undefined;
     shape?: "rounded" | "pill" | null | undefined;
     readOnly?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -2224,6 +2224,7 @@ type DatePickerProps = {
     value?: DatePickerValue;
     defaultValue?: DatePickerValue;
     onChange: (value: Date | null) => void;
+    onBlur?: React$1.FocusEventHandler<HTMLButtonElement>;
     placeholder?: string;
     disabled?: boolean;
     error?: string;
@@ -2400,6 +2401,7 @@ type PhoneFieldProps = {
     topLabel?: string;
     value?: PhoneFieldValue | null;
     onChange: (value: PhoneFieldValue) => void;
+    onBlur?: React$1.FocusEventHandler<HTMLInputElement>;
     options: PhoneFieldOption[];
     placeholder?: string;
     disabled?: boolean;
@@ -2439,11 +2441,13 @@ type SelectRenderTriggerProps<T = undefined, V extends SelectValue = string, L e
     triggerRef: React$1.Ref<HTMLButtonElement>;
     onClick: () => void;
     onKeyDown: React$1.KeyboardEventHandler<HTMLButtonElement>;
+    onBlur?: React$1.FocusEventHandler<HTMLButtonElement>;
 };
 type AirbnbSelectProps<T = undefined, V extends SelectValue = string, L extends string | number | React$1.ReactNode = string> = {
-    options: SelectOption<T, V, L>[];
+    options?: SelectOption<T, V, L>[];
     value?: SelectOption<T, V, L> | null;
     onChange: (option: SelectOption<T, V, L>) => void;
+    onBlur?: React$1.FocusEventHandler<HTMLButtonElement>;
     variant?: 'default' | 'airbnb';
     label: string;
     topLabel?: string;
@@ -2481,6 +2485,7 @@ type SearchableSelectProps<T = undefined, V extends SearchableSelectValue = stri
     options: SelectOption<T, V, L>[];
     value?: SelectOption<T, V, L> | null;
     onChange: (option: SelectOption<T, V, L>) => void;
+    onBlur?: FocusEventHandler<HTMLButtonElement>;
     onOpenChange?: (open: boolean) => void;
     searchValue?: string;
     onSearchChange?: (value: string) => void;

package/dist/index.js

@@ -627,10 +627,12 @@ 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 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]"
@@ -639,47 +641,62 @@ var buttonVariants = cva3(
     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: {
@@ -733,15 +750,28 @@ var Button = React4.forwardRef(
     ...props
   }, ref) => {
     const { t } = useTranslation3();
-    const Comp = asChild ? Slot2 : "button";
     const showLoadingLabel = size !== "icon";
+    const isDisabled = readOnly || disabled || loading;
+    const classNames = cn(buttonVariants({ variant, size, shape, readOnly }), className);
+    if (asChild) {
+      return /* @__PURE__ */ jsx10(
+        Slot2,
+        {
+          ref,
+          "aria-disabled": isDisabled || void 0,
+          className: classNames,
+          ...props,
+          children
+        }
+      );
+    }
     return /* @__PURE__ */ jsx10(
-      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__ */ jsxs9("span", { className: "inline-flex items-center gap-1.5", children: [
           /* @__PURE__ */ jsx10(Spinner, {}),
@@ -8937,6 +8967,7 @@ var DatePicker = React30.forwardRef(
     value,
     defaultValue,
     onChange,
+    onBlur,
     placeholder = "Select a date",
     disabled,
     error,
@@ -9078,6 +9109,7 @@ var DatePicker = React30.forwardRef(
           "aria-expanded": isOpen,
           onClick: handleTriggerClick,
           onKeyDown: handleTriggerKeyDown,
+          onBlur,
           trailingAdornment: /* @__PURE__ */ jsx121(Calendar2, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
         }
       ),
@@ -9133,7 +9165,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) {
@@ -9749,7 +9781,8 @@ var SelectTrigger2 = React32.forwardRef(
     listboxId,
     describedBy,
     onClick,
-    onKeyDown
+    onKeyDown,
+    onBlur
   }, ref) => {
     return /* @__PURE__ */ jsx128(
       FieldTrigger,
@@ -9779,6 +9812,7 @@ var SelectTrigger2 = React32.forwardRef(
         disabled,
         onClick,
         onKeyDown,
+        onBlur,
         trailingAdornment: /* @__PURE__ */ jsx128(
           ChevronDown,
           {
@@ -10195,9 +10229,10 @@ function useOutsideClick(elementRef, onOutsideClick, nested) {
 // src/airbnb/select/Select.tsx
 import { jsx as jsx129, jsxs as jsxs83 } from "react/jsx-runtime";
 var AirbnbSelect = React36.forwardRef(function AirbnbSelect2({
-  options,
+  options = [],
   value,
   onChange,
+  onBlur,
   variant = "default",
   label,
   topLabel,
@@ -10391,7 +10426,8 @@ var AirbnbSelect = React36.forwardRef(function AirbnbSelect2({
           describedBy,
           triggerRef: combinedRef,
           onClick: handleTriggerClick,
-          onKeyDown: handleRootTriggerKeyDown
+          onKeyDown: handleRootTriggerKeyDown,
+          onBlur
         }) : /* @__PURE__ */ jsx129(
           SelectTrigger2,
           {
@@ -10416,7 +10452,8 @@ var AirbnbSelect = React36.forwardRef(function AirbnbSelect2({
             listboxId,
             describedBy,
             onClick: handleTriggerClick,
-            onKeyDown: handleRootTriggerKeyDown
+            onKeyDown: handleRootTriggerKeyDown,
+            onBlur
           }
         ),
         isMobile ? /* @__PURE__ */ jsx129(
@@ -10486,6 +10523,7 @@ var PhoneField = React37.forwardRef(
     topLabel,
     value,
     onChange,
+    onBlur,
     options,
     placeholder = "Phone number",
     disabled,
@@ -10506,7 +10544,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]
@@ -10641,7 +10679,8 @@ var PhoneField = React37.forwardRef(
             onChange: (event) => onChange({
               code: value?.code ?? "",
               number: event.target.value
-            })
+            }),
+            onBlur
           }
         )
       ] }),
@@ -10709,6 +10748,7 @@ var SearchableSelectInternal = ({
   options,
   value,
   onChange,
+  onBlur,
   onOpenChange,
   searchValue,
   onSearchChange,
@@ -10926,6 +10966,7 @@ var SearchableSelectInternal = ({
               openSelect();
             },
             onKeyDown: handleTriggerKeyDown,
+            onBlur,
             trailingAdornment: /* @__PURE__ */ jsx132(
               ChevronDown3,
               {