@chekinapp/ui 0.0.58 → 0.0.59

package/dist/index.cjs

@@ -9612,12 +9612,12 @@ var Tabs = TabsPrimitive2.Root;
 var tabsListVariants = (0, import_class_variance_authority13.cva)("inline-flex items-center", {
   variants: {
     variant: {
-      default: "h-10 justify-center rounded-md bg-[var(--chekin-color-surface-input-empty)] p-1 text-[var(--chekin-color-gray-1)]",
-      underlined: "gap-6 border-b border-[var(--chekin-color-gray-3)]"
+      button: 'tab-list h-[42px] justify-center gap-[7px] rounded-md border border-[var(--chekin-color-gray-3)] bg-[var(--chekin-color-surface-input-empty)] p-[3px] [&>*:not(:last-child)]:after:content-[""] [&>*:not(:last-child)]:after:absolute [&>*:not(:last-child)]:after:right-[-4px] [&>*:not(:last-child)]:after:h-6 [&>*:not(:last-child)]:after:w-px [&>*:not(:last-child)]:after:bg-[var(--chekin-color-gray-3)]',
+      underlined: "tab-list mb-8 flex-wrap gap-x-6 gap-y-3 border-b border-[var(--chekin-color-gray-3)]"
     }
   },
   defaultVariants: {
-    variant: "default"
+    variant: "button"
   }
 });
 var TabsList = (0, import_react73.forwardRef)(
@@ -9632,29 +9632,68 @@ var TabsList = (0, import_react73.forwardRef)(
 );
 TabsList.displayName = TabsPrimitive2.List.displayName;
 var tabsTriggerVariants = (0, import_class_variance_authority13.cva)(
-  "inline-flex items-center justify-center whitespace-nowrap transition-all focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap transition-all focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 cursor-pointer select-none",
   {
     variants: {
       variant: {
-        default: "rounded-sm px-3 py-1.5 text-sm font-medium focus-visible:shadow-[var(--chekin-shadow-focus)] data-[state=active]:bg-[var(--chekin-color-white)] data-[state=active]:text-[var(--chekin-color-brand-navy)] data-[state=active]:shadow-sm",
-        underlined: "-mb-px border-b-[3px] border-transparent py-2 text-base font-medium text-[var(--chekin-color-gray-1)] data-[state=active]:border-[var(--chekin-color-brand-blue)] data-[state=active]:font-semibold data-[state=active]:text-[var(--chekin-color-brand-blue)]"
+        button: "h-full flex-1 rounded-md px-4 text-center text-[15px] font-medium relative text-[var(--chekin-color-gray-1)] hover:bg-[var(--chekin-color-brand-blue)] hover:text-white data-[state=active]:bg-[var(--chekin-color-brand-blue)] data-[state=active]:font-bold data-[state=active]:text-white data-[state=active]:shadow-sm [&.active]:bg-[var(--chekin-color-brand-blue)] [&.active]:font-bold [&.active]:text-white [&.active]:shadow-sm",
+        underlined: "h-full relative top-px pb-[15px] text-base font-medium leading-5 text-[var(--chekin-color-gray-1)] border-b-2 border-transparent -mb-px data-[state=active]:text-[var(--chekin-color-brand-blue)] data-[state=active]:border-[var(--chekin-color-brand-blue)] hover:border-[var(--chekin-color-brand-blue)]/30 [&.active]:border-[var(--chekin-color-brand-blue)]"
       }
     },
     defaultVariants: {
-      variant: "default"
+      variant: "button"
     }
   }
 );
-var TabsTrigger = (0, import_react73.forwardRef)(({ className, variant, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-  TabsPrimitive2.Trigger,
+var TabsTrigger = (0, import_react73.forwardRef)(({ className, variant = "button", hidden, ...props }, ref) => {
+  if (hidden) {
+    return null;
+  }
+  if (props.asLink) {
+    const { asLink: Link2, value, end, onClick: onClick2, children: children2, ...linkProps } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+      Link2,
+      {
+        relative: "route",
+        end,
+        to: value,
+        onClick: (event) => onClick2?.(event, value),
+        className: cn(
+          tabsTriggerVariants({ variant }),
+          variant === "button" ? "tabs__btn-item tabs__btn-item_link" : "tabs__item tabs__item_link",
+          className
+        ),
+        ...linkProps,
+        children: children2
+      }
+    );
+  }
+  const { children, onClick, end: _end, ...triggerProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+    TabsPrimitive2.Trigger,
+    {
+      ref,
+      className: cn(
+        tabsTriggerVariants({ variant }),
+        variant === "button" ? "tabs__btn-item" : "tabs__item",
+        className
+      ),
+      onClick,
+      ...triggerProps,
+      children
+    }
+  );
+});
+TabsTrigger.displayName = TabsPrimitive2.Trigger.displayName;
+var TabsContent = (0, import_react73.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+  TabsPrimitive2.Content,
   {
     ref,
-    className: cn(tabsTriggerVariants({ variant }), className),
+    className: cn("tabs__header-item", className),
+    tabIndex: -1,
     ...props
   }
 ));
-TabsTrigger.displayName = TabsPrimitive2.Trigger.displayName;
-var TabsContent = (0, import_react73.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(TabsPrimitive2.Content, { ref, className, tabIndex: -1, ...props }));
 TabsContent.displayName = TabsPrimitive2.Content.displayName;
 
 // src/tabbed-section/TabbedSection.tsx