@chekinapp/ui 0.0.58 → 0.0.59

package/dist/index.d.cts

@@ -2325,21 +2325,39 @@ type TablePlaceholderProps = {
 };
 declare function TablePlaceholder({ children, text, title, className, visible, iconSlot, insideTable, }: TablePlaceholderProps): react_jsx_runtime.JSX.Element | null;
 
+type PathType = string | {
+    pathname: string;
+    search?: string;
+    hash?: string;
+};
 declare const Tabs: React$1.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const tabsListVariants: (props?: ({
-    variant?: "default" | "underlined" | null | undefined;
+    variant?: "button" | "underlined" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type TabsListProps = ComponentPropsWithoutRef<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>;
 declare const TabsList: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & VariantProps<(props?: ({
-    variant?: "default" | "underlined" | null | undefined;
+    variant?: "button" | "underlined" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
 declare const tabsTriggerVariants: (props?: ({
-    variant?: "default" | "underlined" | null | undefined;
+    variant?: "button" | "underlined" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-type TabsTriggerProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & VariantProps<typeof tabsTriggerVariants>;
-declare const TabsTrigger: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
-    variant?: "default" | "underlined" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLButtonElement>>;
+type BaseTabsTriggerProps = Omit<ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>, 'value' | 'onClick'> & VariantProps<typeof tabsTriggerVariants> & {
+    value: string;
+    hidden?: boolean;
+    end?: boolean;
+};
+type LinkTabsTriggerProps = Omit<BaseTabsTriggerProps, 'value'> & {
+    value: PathType;
+    end?: boolean;
+    asLink: ElementType;
+    onClick?: (event: MouseEvent<HTMLElement>, pathName?: PathType) => void;
+};
+type ButtonTabsTriggerProps = BaseTabsTriggerProps & {
+    asLink?: undefined;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+};
+type TabsTriggerProps = ButtonTabsTriggerProps | LinkTabsTriggerProps;
+declare const TabsTrigger: React$1.ForwardRefExoticComponent<TabsTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
 declare const TabsContent: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
 interface TimelineProps extends React$1.ComponentPropsWithoutRef<'ol'> {

package/dist/index.d.ts

@@ -2325,21 +2325,39 @@ type TablePlaceholderProps = {
 };
 declare function TablePlaceholder({ children, text, title, className, visible, iconSlot, insideTable, }: TablePlaceholderProps): react_jsx_runtime.JSX.Element | null;
 
+type PathType = string | {
+    pathname: string;
+    search?: string;
+    hash?: string;
+};
 declare const Tabs: React$1.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const tabsListVariants: (props?: ({
-    variant?: "default" | "underlined" | null | undefined;
+    variant?: "button" | "underlined" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type TabsListProps = ComponentPropsWithoutRef<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>;
 declare const TabsList: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & VariantProps<(props?: ({
-    variant?: "default" | "underlined" | null | undefined;
+    variant?: "button" | "underlined" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
 declare const tabsTriggerVariants: (props?: ({
-    variant?: "default" | "underlined" | null | undefined;
+    variant?: "button" | "underlined" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-type TabsTriggerProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & VariantProps<typeof tabsTriggerVariants>;
-declare const TabsTrigger: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
-    variant?: "default" | "underlined" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLButtonElement>>;
+type BaseTabsTriggerProps = Omit<ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>, 'value' | 'onClick'> & VariantProps<typeof tabsTriggerVariants> & {
+    value: string;
+    hidden?: boolean;
+    end?: boolean;
+};
+type LinkTabsTriggerProps = Omit<BaseTabsTriggerProps, 'value'> & {
+    value: PathType;
+    end?: boolean;
+    asLink: ElementType;
+    onClick?: (event: MouseEvent<HTMLElement>, pathName?: PathType) => void;
+};
+type ButtonTabsTriggerProps = BaseTabsTriggerProps & {
+    asLink?: undefined;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+};
+type TabsTriggerProps = ButtonTabsTriggerProps | LinkTabsTriggerProps;
+declare const TabsTrigger: React$1.ForwardRefExoticComponent<TabsTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
 declare const TabsContent: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
 interface TimelineProps extends React$1.ComponentPropsWithoutRef<'ol'> {

package/dist/index.js

@@ -9070,7 +9070,9 @@ var SwitchGroup = React35.forwardRef(
 SwitchGroup.displayName = "SwitchGroup";
 
 // src/tabs/Tabs.tsx
-import { forwardRef as forwardRef48 } from "react";
+import {
+  forwardRef as forwardRef48
+} from "react";
 import * as TabsPrimitive2 from "@radix-ui/react-tabs";
 import { cva as cva13 } from "class-variance-authority";
 import { jsx as jsx117 } from "react/jsx-runtime";
@@ -9078,12 +9080,12 @@ var Tabs = TabsPrimitive2.Root;
 var tabsListVariants = cva13("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 = forwardRef48(
@@ -9098,29 +9100,68 @@ var TabsList = forwardRef48(
 );
 TabsList.displayName = TabsPrimitive2.List.displayName;
 var tabsTriggerVariants = cva13(
-  "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 = forwardRef48(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx117(
-  TabsPrimitive2.Trigger,
+var TabsTrigger = forwardRef48(({ 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__ */ jsx117(
+      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__ */ jsx117(
+    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 = forwardRef48(({ className, ...props }, ref) => /* @__PURE__ */ jsx117(
+  TabsPrimitive2.Content,
   {
     ref,
-    className: cn(tabsTriggerVariants({ variant }), className),
+    className: cn("tabs__header-item", className),
+    tabIndex: -1,
     ...props
   }
 ));
-TabsTrigger.displayName = TabsPrimitive2.Trigger.displayName;
-var TabsContent = forwardRef48(({ className, ...props }, ref) => /* @__PURE__ */ jsx117(TabsPrimitive2.Content, { ref, className, tabIndex: -1, ...props }));
 TabsContent.displayName = TabsPrimitive2.Content.displayName;
 
 // src/tabbed-section/TabbedSection.tsx