@ostack.tech/ui 0.10.5 → 0.11.0

package/dist/types/components/Separator/Separator.d.ts

@@ -1,7 +1,45 @@
 import { Separator as SeparatorPrimitive } from 'radix-ui';
 import { ComponentPropsWithoutRef } from 'react';
+import { AccentColor } from '../../utils/accent.ts';
+/** Link colours. */
+export type SeparatorColor = AccentColor;
 /** Properties of the separator component. */
 export interface SeparatorProps extends ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> {
+    /**
+     * Colour of the separator.
+     *
+     * @default neutral
+     */
+    color?: SeparatorColor;
+    /**
+     * Length of the separator. When a number is provided, each unit corresponds
+     * to `var(--o-ui-space)`.
+     *
+     * Defaults to `"100%"` when horizontal, and `4` when vertical.
+     */
+    length?: number | string;
 }
-/** Component that visually or semantically separates content. */
+/**
+ * Component that visually or semantically separates content. Built on top of
+ * the [Radix Separator
+ * primitive](https://www.radix-ui.com/primitives/docs/components/separator)
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * import { Link, Separator, Stack } from "@ostack.tech/ui";
+ *
+ * function NavLinks() {
+ *   return (
+ *     <Stack gap={2}>
+ *       <Link href="#home">Home</Link>
+ *       <Separator />
+ *       <Link href="#user">User</Link>
+ *       <Separator />
+ *       <Link href="#settings">Settings</Link>
+ *     </Stack>
+ *   );
+ * }
+ * ```
+ */
 export declare const Separator: import('react').ForwardRefExoticComponent<SeparatorProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/components/Stack/Stack.d.ts

@@ -1,7 +1,9 @@
 import { ComponentPropsWithoutRef, CSSProperties, ReactElement } from 'react';
 import { Responsive } from '../../utils/useResponsiveValues.ts';
 /** Possible stack directions. */
-export type FlexDirection = "column" | "column-reverse" | "row" | "row-reverse";
+export type StackDirection = "column" | "column-reverse" | "row" | "row-reverse";
+/** Whether to wrap items. */
+export type StackWrap = boolean | "reverse";
 /** Properties of the stack component. */
 export interface StackProps extends ComponentPropsWithoutRef<"div"> {
     /**
@@ -13,9 +15,9 @@ export interface StackProps extends ComponentPropsWithoutRef<"div"> {
     /**
      * Direction of the stack.
      *
-     * @default column
+     * @default "column"
      */
-    direction?: Responsive<FlexDirection>;
+    direction?: Responsive<StackDirection>;
     /**
      * Spacing between items. When a number is provided, each unit corresponds to
      * `var(--o-ui-space)`.
@@ -28,15 +30,35 @@ export interface StackProps extends ComponentPropsWithoutRef<"div"> {
     justifyContent?: Responsive<CSSProperties["justifyContent"]>;
     alignItems?: Responsive<CSSProperties["alignItems"]>;
     alignContent?: Responsive<CSSProperties["alignContent"]>;
-    wrap?: Responsive<CSSProperties["flexWrap"]>;
+    wrap?: Responsive<StackWrap>;
 }
 /**
- * The Stack component manages the layout of immediate children along the
+ * The stack component manages the layout of immediate children along the
  * vertical or horizontal axis with optional spacing and/or dividers between
  * each child.
  *
  * It uses a flex display together with a variant of the [lobotomised
  * owl](https://css-tricks.com/lobotomized-owls/) selector (`* + *`) for
  * spacing.
+ *
+ * The stack component is mostly concerned with one-dimension layouts. For
+ * two-dimensional layouts, you might prefer to use the [`Grid`
+ * component](?path=/docs/ostack-ui-layout-grid--docs) instead.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * import { Stack } from "@ostack.tech/ui";
+ *
+ * function Items() {
+ *   return (
+ *     <Stack>
+ *       <Item>Item 1</Item>
+ *       <Item>Item 2</Item>
+ *       <Item>Item 3</Item>
+ *     </Stack>
+ *   );
+ * }
+ * ```
  */
 export declare const Stack: import('react').ForwardRefExoticComponent<StackProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/components/Stepper/Step.d.ts

@@ -1,17 +1,32 @@
-import { Tabs as TabsPrimitive } from 'radix-ui';
-import { ComponentPropsWithoutRef, ComponentPropsWithRef } from 'react';
+import { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode } from 'react';
 import { ControlStatus } from '../../utils/control.ts';
+import { ButtonProps } from '../Button';
 import { Label } from '../Label';
 /** Properties of the step component. */
-export interface StepProps extends Omit<ComponentPropsWithoutRef<typeof TabsPrimitive.TabsTrigger>, "asChild" | "value"> {
+export interface StepProps extends ComponentPropsWithoutRef<"li">, Pick<ButtonProps, "variant" | "disabled" | "loading" | "showSpinner" | "spinnerProps"> {
+    /**
+     * Change the component to the HTML tag or custom component of the only child.
+     * This will merge the original component props with the props of the supplied
+     * element/component and change the underlying DOM node.
+     */
+    asChild?: boolean;
     /** Index of the step. */
     index?: number;
+    /**
+     * Whether the step is completed. By default, a step is marked as completed if
+     * its index is less than the currently active step.
+     */
+    completed?: boolean;
     /** Status of the step. */
     status?: ControlStatus;
-    /** Properties to pass to the container element. */
-    containerProps?: ComponentPropsWithRef<"div">;
+    /** Visually hidden label for the step number. */
+    stepNumberLabel?: (number: number) => ReactNode;
+    /** Visually hidden label for completed steps. */
+    completedLabel?: ReactNode;
+    /** Properties to pass to the button element. */
+    buttonProps?: Omit<ComponentPropsWithRef<"button">, "color" | "children" | "disabled">;
     /** Properties to pass to the step's label component. */
     labelProps?: Omit<ComponentPropsWithRef<typeof Label>, "htmlFor">;
 }
 /** Step trigger component. */
-export declare const Step: import('react').ForwardRefExoticComponent<StepProps & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const Step: import('react').ForwardRefExoticComponent<StepProps & import('react').RefAttributes<HTMLLIElement>>;

package/dist/types/components/Stepper/StepContent.d.ts

@@ -1,9 +1,18 @@
-import { Tabs as TabsPrimitive } from 'radix-ui';
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef, ComponentPropsWithRef } from 'react';
 /** Properties of the step content component. */
-export interface StepContentProps extends Omit<ComponentPropsWithoutRef<typeof TabsPrimitive.TabsContent>, "value"> {
+export interface StepContentProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * Change the component to the HTML tag or custom component of the only child.
+     * This will merge the original component props with the props of the supplied
+     * element/component and change the underlying DOM node.
+     */
+    asChild?: boolean;
     /** Index of the step that corresponds to this content. */
-    index: number;
+    index?: number;
+    /** Properties to pass to the content label element (print only). */
+    stepContentLabelProps?: ComponentPropsWithRef<"span">;
+    /** Properties to pass to the content label index element (print only). */
+    stepContentLabelIndexProps?: ComponentPropsWithRef<"span">;
 }
 /** Step content component. */
 export declare const StepContent: import('react').ForwardRefExoticComponent<StepContentProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/components/Stepper/StepList.d.ts

@@ -1,7 +1,12 @@
-import { Tabs as TabsPrimitive } from 'radix-ui';
 import { ComponentPropsWithoutRef } from 'react';
 /** Properties of the step list component. */
-export interface StepListProps extends ComponentPropsWithoutRef<typeof TabsPrimitive.List> {
+export interface StepListProps extends ComponentPropsWithoutRef<"ol"> {
+    /**
+     * Change the component to the HTML tag or custom component of the only child.
+     * This will merge the original component props with the props of the supplied
+     * element/component and change the underlying DOM node.
+     */
+    asChild?: boolean;
 }
 /**
  * Component containing the list of steps.
@@ -9,4 +14,4 @@ export interface StepListProps extends ComponentPropsWithoutRef<typeof TabsPrimi
  * The `index` of each `Step` is automatically added when `Step`s are direct
  * children of `StepList`.
  */
-export declare const StepList: import('react').ForwardRefExoticComponent<StepListProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const StepList: import('react').ForwardRefExoticComponent<StepListProps & import('react').RefAttributes<HTMLOListElement>>;

package/dist/types/components/Stepper/Stepper.d.ts

@@ -1,7 +1,13 @@
-import { Tabs as TabsPrimitive } from 'radix-ui';
-import { ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
+import { ComponentPropsWithoutRef, Ref } from 'react';
+import { StepperApi } from './StepperContext.ts';
 /** Properties of the stepper component. */
-export interface StepperProps extends Omit<ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, "defaultValue" | "value" | "onValueChange" | "orientation" | "dir" | "children"> {
+export interface StepperProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * Change the component to the HTML tag or custom component of the only child.
+     * This will merge the original component props with the props of the supplied
+     * element/component and change the underlying DOM node.
+     */
+    asChild?: boolean;
     /**
      * Index of the default active step.
      *
@@ -16,44 +22,55 @@ export interface StepperProps extends Omit<ComponentPropsWithoutRef<typeof TabsP
      * @param newActiveStep Index of the new active step.
      */
     onActiveStepChange?: (newActiveStep: number) => void;
-    /** Reference to interact with the stepper's API. */
+    /** Whether the content of all steps should be shown while printing. */
+    showAllStepsWhilePrinting?: boolean;
+    /** Reference to interact with the stepper API. */
     apiRef?: Ref<StepperApi | undefined>;
-    children?: ReactNode | ((api: StepperApi) => ReactNode);
-}
-export interface StepperApi {
-    /** Currently active step. */
-    activeStep: number;
-    /**
-     * Navigates to the provided step.
-     *
-     * @param step Step to go to.
-     */
-    goTo: (step: number) => void;
-    /** Navigates to the next step. */
-    next: () => void;
-    /** Navigates to the previous step. */
-    previous: () => void;
 }
 /**
- * Component used to display progress through a sequence of numbered steps.
+ * Display progress through a sequence of numbered steps.
  *
  * It composes the following subcomponents:
  *
- * - `StepList`: Displays the `Step` in the sequence, helping users visualize
- *   their progress and navigate between steps.
- * - `StepComponent`: Displays the content relevant to each `Step`, ensuring users
- *   see detailed information as they progress through the steps.
+ * - `StepList`: List of steps.
+ * - `Step`: Single step of the list.
+ * - `StepContent`: Content of a step.
+ * - `StepperPreviousTrigger`: Trigger to navigate to the previous step.
+ * - `StepperNextTrigger`: Trigger to navigate to the next step.
+ * - `StepperFinishTrigger`: Trigger to finish the stepper.
+ * - `StepperState`: Utility component providing access to the state of the
+ *   stepper and its API.
+ *
+ * Example usage:
  *
- * The component leverages the `StepperApi` interface to manage navigation and
- * active step tracking through the following props:
+ * ```tsx
+ * import {
+ *   Step,
+ *   StepContent,
+ *   StepList,
+ *   Stepper,
+ *   StepperFinishTrigger,
+ *   StepperNextTrigger,
+ *   StepperPreviousTrigger,
+ * } from "@ostack.tech/ui";
  *
- * - `activeStep`: Tracks the currently active step to synchronize navigation and
- *   step content display.
- * - `previous`: Enables moving to the previous step. Prevents navigation beyond
- *   the first step by disabling the relevant button.
- * - `next`: Allows progression to the next step. On the final step, disables
- *   further navigation to maintain flow.
- * - `goTo`: Provides direct access to a specific step. While not used in all
- *   implementations, it adds flexibility for custom navigation flows.
+ * function Checkout() {
+ *   return (
+ *     <Stepper>
+ *       <StepList>
+ *         <Step>Shipping</Step>
+ *         <Step>Payment</Step>
+ *         <Step>Review</Step>
+ *       </StepList>
+ *       <StepContent>…</StepContent>
+ *       <StepContent>…</StepContent>
+ *       <StepContent>…</StepContent>
+ *       <StepperPreviousTrigger />
+ *       <StepperNextTrigger />
+ *       <StepperFinishTrigger onClick={completeCheckout} />
+ *     </Stepper>
+ *   );
+ * }
+ * ```
  */
 export declare const Stepper: import('react').ForwardRefExoticComponent<StepperProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/components/Stepper/StepperContext.d.ts

@@ -1,8 +1,81 @@
-/** Value of the stepper's context. */
+import { ReactNode, RefObject } from 'react';
+/** Value of the stepper context. */
 export interface StepperContextValue {
-    activeStep: number;
+    showAllStepsWhilePrinting?: boolean;
+    store: StepperStore;
+}
+/** Information about a registered step. */
+export interface RegisteredStepInfo {
+    labelId: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+/** Information about a registered step content. */
+export interface RegisteredStepContentInfo {
+    id: string;
+    ref: RefObject<HTMLElement | null>;
+}
+/** State of the stepper. */
+export interface StepperState {
+    _activeStep: number;
+    _controlledActiveStep: number | undefined;
+    activeStep: () => number;
+    stepsInfo: Record<number, RegisteredStepInfo>;
+    stepsContent: Record<number, RegisteredStepContentInfo>;
+    stepCount: () => number;
+    actions: StepperStateActions;
 }
-/** Stepper's context. */
+interface StepperStateActions {
+    registerStep: (index: number, info: RegisteredStepInfo) => (() => void) | void;
+    registerStepContent: (index: number, info: RegisteredStepContentInfo) => (() => void) | void;
+    getStepInfo: (index: number) => RegisteredStepInfo | undefined;
+    getStepContent: (index: number) => RegisteredStepContentInfo | undefined;
+    goTo: (index: string | number) => void;
+    previous: () => void;
+    next: () => void;
+}
+/** Stepper store. */
+export type StepperStore = ReturnType<typeof useCreateStepperContext>["store"];
+/** Stepper context. */
 export declare const StepperContext: import('react').Context<StepperContextValue | null>;
-/** Hook exposing the stepper's context. */
+/** Stepper API. */
+export interface StepperApi {
+    /** Currently active step. */
+    activeStep: number;
+    /**
+     * Navigates to the provided step.
+     *
+     * @param step Step to go to.
+     */
+    goTo: (step: number) => void;
+    /** Navigates to the next step. */
+    next: () => void;
+    /** Navigates to the previous step. */
+    previous: () => void;
+}
+/** Hook which creates the stepper store. */
+export declare function useCreateStepperContext(defaultActiveStep?: number, activeStep?: number, onActiveStepChange?: (activeStep: number) => void, showAllStepsWhilePrinting?: boolean): {
+    showAllStepsWhilePrinting: boolean | undefined;
+    store: Omit<import('zustand').StoreApi<StepperState>, "subscribe"> & {
+        subscribe: {
+            (listener: (selectedState: StepperState, previousSelectedState: StepperState) => void): () => void;
+            <U>(selector: (state: StepperState) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
+                equalityFn?: ((a: U, b: U) => boolean) | undefined;
+                fireImmediately?: boolean;
+            } | undefined): () => void;
+        };
+    };
+};
+/** Hooks returning the stepper context value. */
 export declare function useStepperContext(): StepperContextValue;
+/** Hook which registers a step. */
+export declare function useRegisterStep(index: number, info: RegisteredStepInfo): void;
+/** Hook which registers the id of a step content. */
+export declare function useRegisterStepContent(index: number, info: RegisteredStepContentInfo): void;
+/** Hook which returns the info of a step. */
+export declare function useStepInfo(index: number): RegisteredStepInfo | undefined;
+/** Hook which returns the info of a step. */
+export declare function useStepContentInfo(index: number): RegisteredStepContentInfo | undefined;
+/** Hook providing access to the stepper API. */
+export declare function useStepperApi(): StepperApi;
+export {};

package/dist/types/components/Stepper/StepperFinishTrigger.d.ts

@@ -0,0 +1,37 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { Button } from '../Button';
+/** Properties of the stepper finish trigger component. */
+export type StepperFinishTriggerProps = StepperFinishTriggerChildlessProps | StepperFinishTriggerChildrenProps;
+/** Base properties of the stepper finish trigger component. */
+export interface StepperFinishTriggerPropsBase {
+    /**
+     * Whether to show the (disabled) trigger when **not** on the last step.
+     *
+     * @default false
+     */
+    showWhenNotLast?: boolean;
+    /**
+     * Whether to show the trigger when it is being printed.
+     *
+     * @default false
+     */
+    showWhilePrinting?: boolean;
+}
+/**
+ * Properties of the stepper finish trigger component when rendered without
+ * children.
+ */
+export interface StepperFinishTriggerChildlessProps extends StepperFinishTriggerPropsBase, Omit<ComponentPropsWithoutRef<typeof Button<"button">>, "asChild" | "children"> {
+    /** Label displayed on the button. */
+    label?: ReactNode;
+    children?: never;
+}
+/**
+ * Properties of the stepper finish trigger component when rendered with
+ * children.
+ */
+export interface StepperFinishTriggerChildrenProps extends StepperFinishTriggerPropsBase, ComponentPropsWithoutRef<"button"> {
+    children: ReactNode;
+}
+/** Trigger used to conclude the stepper. */
+export declare const StepperFinishTrigger: import('react').ForwardRefExoticComponent<StepperFinishTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/types/components/Stepper/StepperNextTrigger.d.ts

@@ -0,0 +1,34 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { Button } from '../Button';
+/** Properties of the stepper next trigger component. */
+export type StepperNextTriggerProps = StepperNextTriggerChildlessProps | StepperNextTriggerChildrenProps;
+/** Base properties of the stepper next trigger component. */
+export interface StepperNextTriggerPropsBase {
+    /**
+     * Whether to show the (disabled) trigger when on the last step.
+     *
+     * @default false
+     */
+    showWhenLast?: boolean;
+    /**
+     * Whether to show the trigger when it is being printed.
+     *
+     * @default false
+     */
+    showWhilePrinting?: boolean;
+}
+/**
+ * Properties of the stepper next trigger component when rendered without
+ * children.
+ */
+export interface StepperNextTriggerChildlessProps extends StepperNextTriggerPropsBase, Omit<ComponentPropsWithoutRef<typeof Button<"button">>, "asChild" | "children"> {
+    /** Label displayed on the button. */
+    label?: ReactNode;
+    children?: never;
+}
+/** Properties of the stepper next trigger component when rendered with children. */
+export interface StepperNextTriggerChildrenProps extends StepperNextTriggerPropsBase, ComponentPropsWithoutRef<"button"> {
+    children: ReactNode;
+}
+/** Trigger used to go to the next step of the stepper. */
+export declare const StepperNextTrigger: import('react').ForwardRefExoticComponent<StepperNextTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/types/components/Stepper/StepperPreviousTrigger.d.ts

@@ -0,0 +1,37 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { Button } from '../Button';
+/** Properties of the stepper previous trigger component. */
+export type StepperPreviousTriggerProps = StepperPreviousTriggerChildlessProps | StepperPreviousTriggerChildrenProps;
+/** Base properties of the stepper previous trigger component. */
+export interface StepperPreviousTriggerPropsBase {
+    /**
+     * Whether to show the (disabled) trigger when on the first step.
+     *
+     * @default true
+     */
+    showWhenFirst?: boolean;
+    /**
+     * Whether to show the trigger when it is being printed.
+     *
+     * @default false
+     */
+    showWhilePrinting?: boolean;
+}
+/**
+ * Properties of the stepper previous trigger component when rendered without
+ * children.
+ */
+export interface StepperPreviousTriggerChildlessProps extends StepperPreviousTriggerPropsBase, Omit<ComponentPropsWithoutRef<typeof Button<"button">>, "asChild" | "children"> {
+    /** Label displayed on the button. */
+    label?: ReactNode;
+    children?: never;
+}
+/**
+ * Properties of the stepper previous trigger component when rendered with
+ * children.
+ */
+export interface StepperPreviousTriggerChildrenProps extends StepperPreviousTriggerPropsBase, ComponentPropsWithoutRef<"button"> {
+    children: ReactNode;
+}
+/** Trigger used to go to the previous step of the stepper. */
+export declare const StepperPreviousTrigger: import('react').ForwardRefExoticComponent<StepperPreviousTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/types/components/Stepper/StepperState.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { StepperApi } from './StepperContext.ts';
+/** Properties of the stepper state component. */
+export interface StepperStateProps {
+    children?: (api: StepperApi) => ReactNode;
+}
+/** Component used to access the state of the stepper and act on its API. */
+export declare function StepperState({ children }: StepperStateProps): ReactNode;

package/dist/types/components/Stepper/index.d.ts

@@ -2,3 +2,8 @@ export * from './Step.tsx';
 export * from './StepContent.tsx';
 export * from './StepList.tsx';
 export * from './Stepper.tsx';
+export { type StepperApi, useStepperApi } from './StepperContext.ts';
+export * from './StepperFinishTrigger.tsx';
+export * from './StepperNextTrigger.tsx';
+export * from './StepperPreviousTrigger.tsx';
+export * from './StepperState.tsx';

package/dist/types/components/Table/Table.d.ts

@@ -23,8 +23,8 @@ export interface TableProps extends ComponentPropsWithoutRef<"table"> {
      * as the `visuallyHiddenCaption` property is automatically set with the value
      * of the `Label`'s `children`.
      *
-     * **NOTE**: The visible caption is rendered as a `<div>` because of the
-     * difficulty in styling a `<caption>` element.
+     * > **Note:** The visible caption is rendered as a `<div>` because of the
+     * > difficulty in styling a `<caption>` element.
      */
     caption?: ReactNode;
     /**

package/dist/types/components/Table/TableColumn.d.ts

@@ -40,7 +40,7 @@ export interface TableColumnProps extends Omit<ComponentPropsWithoutRef<typeof T
      * Direction to initially sort the column by when first clicking on the sort
      * button.
      *
-     * @default asc
+     * @default "asc"
      */
     defaultSortDirection?: SortDirection;
     /**

package/dist/types/components/Tabs/Tab.d.ts

@@ -1,14 +1,19 @@
 import { Tabs as TabsPrimitive } from 'radix-ui';
 import { ComponentPropsWithoutRef, ComponentPropsWithRef } from 'react';
 import { ControlStatus } from '../../utils/control.ts';
+import { Tooltip } from '../Tooltip';
 /** Properties of the tab component. */
 export interface TabProps extends Omit<ComponentPropsWithoutRef<typeof TabsPrimitive.TabsTrigger>, "asChild" | "value"> {
     /** Value representing this tab. */
     value: string | number;
     /** Status of the tab. */
     status?: ControlStatus;
+    /** Properties to pass to the tooltip component when the tab text overflows. */
+    tooltipProps?: Omit<ComponentPropsWithRef<typeof Tooltip>, "content">;
     /** Properties to pass to the inner tab element. */
-    tabInnerProps?: ComponentPropsWithRef<"div">;
+    tabInnerProps?: ComponentPropsWithRef<"span">;
+    /** Properties to pass to the text of the tab element. */
+    tabTextProps?: ComponentPropsWithRef<"span">;
 }
 /** Tab trigger component. */
 export declare const Tab: import('react').ForwardRefExoticComponent<TabProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/types/components/Tabs/Tabs.d.ts

@@ -7,7 +7,7 @@ export interface TabsProps extends Omit<ComponentPropsWithoutRef<typeof TabsPrim
     /**
      * Tabs variant.
      *
-     * @default default
+     * @default "default"
      */
     variant?: TabsVariant;
     /** Value of the default active tab. */