@chekinapp/ui 0.0.8 → 0.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.cjs +64 -34
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +2 -2
  4. package/dist/index.d.ts +2 -2
  5. package/dist/index.js +64 -34
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.cts CHANGED
@@ -163,8 +163,8 @@ type BreadcrumbsProps = {
163
163
  declare function Breadcrumbs({ className, children }: BreadcrumbsProps): react_jsx_runtime.JSX.Element;
164
164
 
165
165
  declare const buttonVariants: (props?: ({
166
- variant?: "link" | "default" | "secondary" | "destructive" | "primary" | "ghost" | "tertiary" | null | undefined;
167
- size?: "s" | "default" | "sm" | "lg" | "icon" | "m" | "xs" | null | undefined;
166
+ variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "primary" | "ghost" | "tertiary" | null | undefined;
167
+ size?: "s" | "default" | "sm" | "md" | "lg" | "icon" | "m" | "xs" | null | undefined;
168
168
  shape?: "rounded" | "pill" | null | undefined;
169
169
  readOnly?: boolean | null | undefined;
170
170
  } & class_variance_authority_types.ClassProp) | undefined) => string;
package/dist/index.d.ts CHANGED
@@ -163,8 +163,8 @@ type BreadcrumbsProps = {
163
163
  declare function Breadcrumbs({ className, children }: BreadcrumbsProps): react_jsx_runtime.JSX.Element;
164
164
 
165
165
  declare const buttonVariants: (props?: ({
166
- variant?: "link" | "default" | "secondary" | "destructive" | "primary" | "ghost" | "tertiary" | null | undefined;
167
- size?: "s" | "default" | "sm" | "lg" | "icon" | "m" | "xs" | null | undefined;
166
+ variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "primary" | "ghost" | "tertiary" | null | undefined;
167
+ size?: "s" | "default" | "sm" | "md" | "lg" | "icon" | "m" | "xs" | null | undefined;
168
168
  shape?: "rounded" | "pill" | null | undefined;
169
169
  readOnly?: boolean | null | undefined;
170
170
  } & class_variance_authority_types.ClassProp) | undefined) => string;
package/dist/index.js CHANGED
@@ -627,10 +627,12 @@ import { useTranslation as useTranslation3 } from "react-i18next";
627
627
  import { cva as cva3 } from "class-variance-authority";
628
628
  var buttonVariants = cva3(
629
629
  [
630
- "relative inline-flex items-center justify-center gap-2 whitespace-nowrap font-sans font-semibold",
631
- "transition-colors duration-150 ease-out outline-none",
632
- "focus-visible:shadow-chekin-focus disabled:pointer-events-none disabled:opacity-50",
633
- "[&_svg]:pointer-events-none [&_svg]:shrink-0",
630
+ "relative inline-flex items-center justify-center gap-2 whitespace-nowrap",
631
+ "[font-family:var(--button-font-family)] [font-weight:var(--button-font-weight)]",
632
+ "transition-all duration-150 ease-out outline-none",
633
+ "focus-visible:shadow-[var(--button-focus-shadow)]",
634
+ "disabled:pointer-events-none disabled:opacity-50",
635
+ "[&_svg]:pointer-events-none [&_svg]:size-[var(--button-icon-size)] [&_svg]:shrink-0",
634
636
  'before:absolute before:inset-0 before:rounded-[inherit] before:content-[""]',
635
637
  "before:bg-transparent before:transition-colors before:duration-150",
636
638
  "[&>*]:relative [&>*]:z-[1]"
@@ -639,47 +641,62 @@ var buttonVariants = cva3(
639
641
  variants: {
640
642
  variant: {
641
643
  default: [
642
- "bg-chekin-blue text-white",
643
- "hover:before:bg-white/10 active:before:bg-black/10",
644
- "focus-visible:ring-1 focus-visible:ring-chekin-navy focus-visible:ring-inset"
644
+ "bg-[var(--button-primary-bg)] text-[color:var(--button-primary-text)]",
645
+ "hover:before:bg-[var(--button-primary-hover-overlay)] active:before:bg-[var(--button-primary-active-overlay)]",
646
+ "disabled:hover:before:bg-transparent"
645
647
  ],
646
648
  primary: [
647
- "bg-chekin-blue text-white",
648
- "hover:before:bg-white/10 active:before:bg-black/10",
649
- "focus-visible:ring-1 focus-visible:ring-chekin-navy focus-visible:ring-inset"
649
+ "bg-[var(--button-primary-bg)] text-[color:var(--button-primary-text)]",
650
+ "hover:before:bg-[var(--button-primary-hover-overlay)] active:before:bg-[var(--button-primary-active-overlay)]",
651
+ "disabled:hover:before:bg-transparent"
650
652
  ],
651
653
  destructive: [
652
- "border border-chekin-red bg-white text-chekin-red shadow-chekin-subtle-outline",
653
- "hover:bg-chekin-surface-input-empty"
654
+ "border border-[var(--button-destructive-border)] bg-[var(--button-destructive-bg)] text-[color:var(--button-destructive-text)]",
655
+ "shadow-[var(--button-shadow)]",
656
+ "hover:bg-[var(--button-destructive-hover-bg)]",
657
+ "disabled:hover:bg-[var(--button-destructive-bg)]"
654
658
  ],
655
659
  secondary: [
656
- "bg-white/30 text-chekin-navy shadow-chekin-subtle-outline",
657
- "hover:before:bg-black/5 active:before:bg-black/10"
660
+ "border border-[var(--button-secondary-border)] bg-[var(--button-secondary-bg)] text-[color:var(--button-secondary-text)]",
661
+ "shadow-[var(--button-shadow)]",
662
+ "hover:before:bg-[var(--button-secondary-hover-overlay)] active:before:bg-[var(--button-secondary-active-overlay)]",
663
+ "disabled:hover:before:bg-transparent"
658
664
  ],
659
665
  ghost: [
660
- "bg-transparent text-chekin-navy",
661
- "hover:bg-chekin-surface-input-empty active:bg-chekin-gray-3"
666
+ "bg-[var(--button-ghost-bg)] text-[color:var(--button-ghost-text)]",
667
+ "hover:bg-[var(--button-ghost-hover-bg)] active:bg-[var(--button-ghost-active-bg)]",
668
+ "disabled:hover:bg-[var(--button-ghost-bg)]"
662
669
  ],
663
670
  link: [
664
- "h-auto rounded-none bg-transparent px-0 py-0 text-chekin-blue underline-offset-4",
665
- "hover:underline active:opacity-80 before:hidden"
671
+ "h-auto rounded-none bg-[var(--button-link-bg)] px-0 py-0 text-[color:var(--button-link-text)]",
672
+ "underline-offset-4",
673
+ "hover:underline active:opacity-80 before:hidden",
674
+ "disabled:hover:no-underline"
666
675
  ],
667
676
  tertiary: [
668
- "border border-white bg-transparent text-white shadow-chekin-subtle-outline",
669
- "hover:before:bg-white/10 active:before:bg-black/10"
677
+ "border border-[var(--button-tertiary-border)] bg-[var(--button-tertiary-bg)] text-[color:var(--button-tertiary-text)]",
678
+ "shadow-[var(--button-shadow)]",
679
+ "hover:before:bg-[var(--button-tertiary-hover-overlay)] active:before:bg-[var(--button-tertiary-active-overlay)]",
680
+ "disabled:hover:before:bg-transparent"
681
+ ],
682
+ outline: [
683
+ "border border-[var(--button-outline-border)] bg-[var(--button-outline-bg)] text-[color:var(--button-outline-text)]",
684
+ "hover:bg-[var(--button-outline-hover-bg)]",
685
+ "disabled:hover:bg-[var(--button-outline-bg)]"
670
686
  ]
671
687
  },
672
688
  size: {
673
- default: "h-10 px-4 py-2 text-[14px]",
674
- m: "h-12 min-w-[160px] rounded-xl px-4 text-[14px]",
675
- s: "h-8 px-[12px] text-[13px]",
676
- sm: "h-9 rounded-md px-3 text-[14px]",
677
- lg: "h-11 rounded-md px-8 text-[15px]",
678
- xs: "h-6 px-[10px] text-[12px]",
679
- icon: "h-8 w-8 p-0"
689
+ default: "h-[var(--button-height-default)] min-w-[var(--button-min-width-default)] px-4 py-2 text-[length:var(--button-font-size)]",
690
+ m: "h-[var(--button-height-m)] min-w-[var(--button-min-width-m)] px-4 text-[length:var(--button-font-size)]",
691
+ md: "h-[var(--button-height-m)] min-w-[var(--button-min-width-m)] px-4 text-[length:var(--button-font-size)]",
692
+ s: "h-[var(--button-height-s)] px-[12px] text-[13px]",
693
+ sm: "h-[var(--button-height-sm)] px-3 text-[length:var(--button-font-size)]",
694
+ lg: "h-[var(--button-height-lg)] px-8 text-[15px]",
695
+ xs: "h-[var(--button-height-xs)] px-[10px] text-[12px]",
696
+ icon: "h-[var(--button-height-icon)] w-[var(--button-height-icon)] p-0"
680
697
  },
681
698
  shape: {
682
- rounded: "rounded-chekin-input",
699
+ rounded: "rounded-[var(--button-radius)]",
683
700
  pill: "rounded-full"
684
701
  },
685
702
  readOnly: {
@@ -733,15 +750,28 @@ var Button = React4.forwardRef(
733
750
  ...props
734
751
  }, ref) => {
735
752
  const { t } = useTranslation3();
736
- const Comp = asChild ? Slot2 : "button";
737
753
  const showLoadingLabel = size !== "icon";
754
+ const isDisabled = readOnly || disabled || loading;
755
+ const classNames = cn(buttonVariants({ variant, size, shape, readOnly }), className);
756
+ if (asChild) {
757
+ return /* @__PURE__ */ jsx10(
758
+ Slot2,
759
+ {
760
+ ref,
761
+ "aria-disabled": isDisabled || void 0,
762
+ className: classNames,
763
+ ...props,
764
+ children
765
+ }
766
+ );
767
+ }
738
768
  return /* @__PURE__ */ jsx10(
739
- Comp,
769
+ "button",
740
770
  {
741
771
  ref,
742
- type: Comp === "button" ? type ?? "button" : void 0,
743
- disabled: readOnly || disabled || loading,
744
- className: cn(buttonVariants({ variant, size, shape, readOnly }), className),
772
+ type: type ?? "button",
773
+ disabled: isDisabled,
774
+ className: classNames,
745
775
  ...props,
746
776
  children: loading ? /* @__PURE__ */ jsxs9("span", { className: "inline-flex items-center gap-1.5", children: [
747
777
  /* @__PURE__ */ jsx10(Spinner, {}),
@@ -9135,7 +9165,7 @@ function ResponsiveSheet({
9135
9165
  closeOnOverlayClick = true,
9136
9166
  closeOnEscape = true
9137
9167
  }) {
9138
- const { isMatch: isMobile } = useScreenResize(DEVICE.laptop);
9168
+ const { isMatch: isMobile } = useScreenResize(DEVICE.tablet);
9139
9169
  const isMobileMode = isMobile && isMobileModalModeAvailable();
9140
9170
  const handleOpenChange = (nextOpen) => {
9141
9171
  if (!nextOpen) {