@nation-a/ui 0.16.28 → 0.17.0

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

@@ -1,15 +1,12 @@
 import { Tabs as ArkTabs } from '@ark-ui/react/tabs';
-import { Assign } from '@ark-ui/react';
 import { ComponentProps } from 'react';
-import { HTMLStyledProps } from '../../../styled-system/jsx';
 export type NavigationProps = ComponentProps<typeof Root>;
-type RootProps = Assign<HTMLStyledProps<'div'>, ArkTabs.RootProps>;
-declare const Root: (props: RootProps) => import("react/jsx-runtime").JSX.Element;
-export type NavigationTriggerProps = Assign<HTMLStyledProps<'button'>, ArkTabs.TriggerBaseProps>;
-type ListProps = Assign<HTMLStyledProps<'div'>, ArkTabs.ListBaseProps>;
+declare const Root: import('../../../styled-system/jsx').StyleContextRootProvider<import('react').ForwardRefExoticComponent<ArkTabs.RootProps & import('react').RefAttributes<HTMLDivElement>>, import('../../../styled-system/types').SlotRecipeRuntimeFn<"list" | "content" | "trigger" | "indicator" | "root", import('../../../styled-system/types').SlotRecipeVariantRecord<"list" | "content" | "trigger" | "indicator" | "root">>>;
+export type NavigationTriggerProps = ComponentProps<typeof Trigger>;
+declare const Trigger: import('../../../styled-system/jsx').StyleContextConsumer<({ ...props }: any) => import("react/jsx-runtime").JSX.Element>;
 declare const Navigation: {
-    Root: (props: RootProps) => import("react/jsx-runtime").JSX.Element;
-    Item: import('react').ForwardRefExoticComponent<Omit<NavigationTriggerProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
-    List: import('react').ForwardRefExoticComponent<Omit<ListProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Root: import('../../../styled-system/jsx').StyleContextRootProvider<import('react').ForwardRefExoticComponent<ArkTabs.RootProps & import('react').RefAttributes<HTMLDivElement>>, import('../../../styled-system/types').SlotRecipeRuntimeFn<"list" | "content" | "trigger" | "indicator" | "root", import('../../../styled-system/types').SlotRecipeVariantRecord<"list" | "content" | "trigger" | "indicator" | "root">>>;
+    Item: import('../../../styled-system/jsx').StyleContextConsumer<({ ...props }: any) => import("react/jsx-runtime").JSX.Element>;
+    List: import('../../../styled-system/jsx').StyleContextConsumer<import('react').ForwardRefExoticComponent<ArkTabs.ListProps & import('react').RefAttributes<HTMLDivElement>>>;
 };
 export default Navigation;

package/dist/types/components/RadioGroup/Radio.stories.d.ts

@@ -1,6 +1,11 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { default as RadioGroup } from './index';
-declare const meta: Meta<typeof RadioGroup.Root>;
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const DefaultRadioGroup: Story;

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

@@ -1,14 +1,15 @@
-import { Assign } from '@ark-ui/react';
 import { RadioGroup as ArkRadioGroup } from '@ark-ui/react/radio-group';
-import { ComponentProps, HTMLStyledProps } from 'styled-system/types';
-export type RootProviderProps = ComponentProps<typeof RootProvider>;
-declare const RootProvider: import('react').ForwardRefExoticComponent<Omit<Omit<Assign<HTMLStyledProps<"div">, ArkRadioGroup.RootProviderBaseProps>, never> & {}, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+import { ComponentProps } from 'styled-system/types';
+import { ReactNode } from 'react';
 export type RadioGroupProps = ComponentProps<typeof Root>;
-declare const Root: import('react').ForwardRefExoticComponent<Omit<Omit<Assign<HTMLStyledProps<"div">, ArkRadioGroup.RootBaseProps>, never> & {}, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const Root: import('../../../styled-system/jsx').StyleContextProvider<import('react').ForwardRefExoticComponent<ArkRadioGroup.RootProps & import('react').RefAttributes<HTMLDivElement>>, import('styled-system/types').SlotRecipeRuntimeFn<"label" | "item" | "indicator" | "root" | "itemText" | "itemControl", import('styled-system/types').SlotRecipeVariantRecord<"label" | "item" | "indicator" | "root" | "itemText" | "itemControl">>>;
+declare const Item: import('../../../styled-system/jsx').StyleContextConsumer<import('react').ForwardRefExoticComponent<ArkRadioGroup.ItemProps & import('react').RefAttributes<HTMLLabelElement>>>;
 declare const RadioGroup: {
-    Root: import('react').ForwardRefExoticComponent<Omit<Omit<Assign<HTMLStyledProps<"div">, ArkRadioGroup.RootBaseProps>, never> & {}, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-    Item: import('react').ForwardRefExoticComponent<Omit<Assign<HTMLStyledProps<"label">, ArkRadioGroup.ItemBaseProps>, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
-    Label: import('react').ForwardRefExoticComponent<Omit<Assign<HTMLStyledProps<"label">, ArkRadioGroup.LabelBaseProps>, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
-    Context: (props: import('@ark-ui/react').RadioGroupContextProps) => import('react').ReactNode;
+    Root: import('../../../styled-system/jsx').StyleContextProvider<import('react').ForwardRefExoticComponent<ArkRadioGroup.RootProps & import('react').RefAttributes<HTMLDivElement>>, import('styled-system/types').SlotRecipeRuntimeFn<"label" | "item" | "indicator" | "root" | "itemText" | "itemControl", import('styled-system/types').SlotRecipeVariantRecord<"label" | "item" | "indicator" | "root" | "itemText" | "itemControl">>>;
+    Item: import('../../../styled-system/jsx').StyleContextConsumer<({ children, ...props }: ComponentProps<typeof Item> & {
+        children?: ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element>;
+    Label: import('../../../styled-system/jsx').StyleContextConsumer<import('react').ForwardRefExoticComponent<ArkRadioGroup.LabelProps & import('react').RefAttributes<HTMLLabelElement>>>;
+    Context: (props: import('@ark-ui/react').RadioGroupContextProps) => ReactNode;
 };
 export default RadioGroup;

package/dist/types/components/RadioGroup/radio.recipe.d.ts

@@ -1,3 +1,3 @@
 import { RecipeVariantProps } from '../../../styled-system/css';
 export type RadioGroupRecipeVariantProps = RecipeVariantProps<typeof radioGroupRecipe>;
-export declare const radioGroupRecipe: import('../../../styled-system/types').SlotRecipeRuntimeFn<"label" | "indicator" | "item" | "root" | "itemText" | "itemControl", import('../../../styled-system/types').SlotRecipeVariantRecord<"label" | "indicator" | "item" | "root" | "itemText" | "itemControl">>;
+export declare const radioGroupRecipe: import('../../../styled-system/types').SlotRecipeRuntimeFn<"label" | "item" | "indicator" | "root" | "itemText" | "itemControl", import('../../../styled-system/types').SlotRecipeVariantRecord<"label" | "item" | "indicator" | "root" | "itemText" | "itemControl">>;

package/dist/types/components/Select/Select.stories.d.ts

@@ -1,18 +1,10 @@
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: (props: Omit<import('../../../styled-system/jsx').HTMLStyledProps<"div">, keyof import('@ark-ui/react').SelectRootProps<T>> & {
-        collection: any;
-    } & import('@ark-ui/react').SelectRootProps<any>) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;
     };
-    argTypes: {
-        className: {
-            control: "text";
-        };
-    };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

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

@@ -4,34 +4,81 @@ import { Assign } from '@ark-ui/react';
 import { ComponentProps } from 'react';
 export { createListCollection } from '@ark-ui/react/select';
 export type SelectProps = ComponentProps<typeof Root>;
-type RootProps<T> = Assign<HTMLStyledProps<'div'>, {
-    collection: any;
-} & ArkSelect.RootProps<T>>;
-declare const Root: (props: RootProps<any>) => import("react/jsx-runtime").JSX.Element;
-type LabelProps = Assign<HTMLStyledProps<'label'>, ArkSelect.LabelProps>;
-type TriggerProps = Assign<HTMLStyledProps<'button'>, ArkSelect.TriggerProps & {
-    description?: string;
-}>;
-export declare const Control: import('react').ForwardRefExoticComponent<Omit<Assign<HTMLStyledProps<"div">, ArkSelect.ControlBaseProps>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-type ValueTextProps = Assign<HTMLStyledProps<'span'>, ArkSelect.ValueTextProps>;
-type DescriptionProps = Assign<HTMLStyledProps<'div'>, {
-    text: string;
-    className?: string;
-}>;
-type ContentProps = Assign<HTMLStyledProps<'div'>, ArkSelect.ContentProps & {
-    radius?: 'md' | 'lg';
-}>;
-type ItemProps = Assign<HTMLStyledProps<'div'>, ArkSelect.ItemProps>;
-export declare const Positioner: import('react').ForwardRefExoticComponent<Omit<Assign<HTMLStyledProps<"div">, ArkSelect.PositionerBaseProps>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const Root: import('../../../styled-system/jsx').StyleContextProvider<ArkSelect.RootComponent<any>, import('../../../styled-system/types').SlotRecipeRuntimeFn<"label" | "description" | "list" | "content" | "trigger" | "positioner" | "item" | "indicator" | "root" | "clearTrigger" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel" | "control" | "valueText", {
+    radius: {
+        md: {
+            trigger: {
+                borderRadius: number;
+            };
+            content: {
+                borderRadius: number;
+            };
+        };
+        lg: {
+            trigger: {
+                borderRadius: number;
+            };
+            content: {
+                borderRadius: number;
+            };
+        };
+    };
+    disabled: {
+        true: {
+            trigger: {
+                opacity: number;
+                cursor: "not-allowed";
+                '&:hover': {
+                    backgroundColor: "background.neutral.default";
+                };
+            };
+        };
+    };
+}>>;
 declare const Select: {
-    Root: (props: RootProps<any>) => import("react/jsx-runtime").JSX.Element;
-    Label: import('react').ForwardRefExoticComponent<Omit<LabelProps, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
-    Trigger: import('react').ForwardRefExoticComponent<Omit<TriggerProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
-    Content: import('react').ForwardRefExoticComponent<Omit<ContentProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-    Item: import('react').ForwardRefExoticComponent<Omit<ItemProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-    ValueText: import('react').ForwardRefExoticComponent<Omit<ValueTextProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
-    Description: import('react').ForwardRefExoticComponent<Omit<DescriptionProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-    Positioner: import('react').ForwardRefExoticComponent<Omit<Assign<HTMLStyledProps<"div">, ArkSelect.PositionerBaseProps>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-    Control: import('react').ForwardRefExoticComponent<Omit<Assign<HTMLStyledProps<"div">, ArkSelect.ControlBaseProps>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Root: import('../../../styled-system/jsx').StyleContextProvider<ArkSelect.RootComponent<any>, import('../../../styled-system/types').SlotRecipeRuntimeFn<"label" | "description" | "list" | "content" | "trigger" | "positioner" | "item" | "indicator" | "root" | "clearTrigger" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel" | "control" | "valueText", {
+        radius: {
+            md: {
+                trigger: {
+                    borderRadius: number;
+                };
+                content: {
+                    borderRadius: number;
+                };
+            };
+            lg: {
+                trigger: {
+                    borderRadius: number;
+                };
+                content: {
+                    borderRadius: number;
+                };
+            };
+        };
+        disabled: {
+            true: {
+                trigger: {
+                    opacity: number;
+                    cursor: "not-allowed";
+                    '&:hover': {
+                        backgroundColor: "background.neutral.default";
+                    };
+                };
+            };
+        };
+    }>>;
+    Label: import('../../../styled-system/jsx').StyleContextConsumer<import('react').ForwardRefExoticComponent<ArkSelect.LabelProps & import('react').RefAttributes<HTMLLabelElement>>>;
+    Trigger: import('../../../styled-system/jsx').StyleContextConsumer<({ description, ...props }: Assign<HTMLStyledProps<"button">, ArkSelect.TriggerProps & {
+        description?: string;
+    }>) => import("react/jsx-runtime").JSX.Element>;
+    Content: import('../../../styled-system/jsx').StyleContextConsumer<import('react').ForwardRefExoticComponent<ArkSelect.ContentProps & import('react').RefAttributes<HTMLDivElement>>>;
+    Item: import('../../../styled-system/jsx').StyleContextConsumer<import('react').ForwardRefExoticComponent<ArkSelect.ItemProps & import('react').RefAttributes<HTMLDivElement>>>;
+    ValueText: import('../../../styled-system/jsx').StyleContextConsumer<import('react').ForwardRefExoticComponent<ArkSelect.ValueTextProps & import('react').RefAttributes<HTMLSpanElement>>>;
+    Description: import('../../../styled-system/jsx').StyleContextConsumer<({ className, text, ...props }: Assign<HTMLStyledProps<"div">, {
+        text: string;
+        className?: string;
+    }>) => import("react/jsx-runtime").JSX.Element>;
+    Positioner: import('../../../styled-system/jsx').StyleContextConsumer<import('react').ForwardRefExoticComponent<ArkSelect.PositionerProps & import('react').RefAttributes<HTMLDivElement>>>;
+    Control: import('../../../styled-system/jsx').StyleContextConsumer<import('react').ForwardRefExoticComponent<ArkSelect.ControlProps & import('react').RefAttributes<HTMLDivElement>>>;
 };
 export default Select;

package/dist/types/components/Select/select.recipe.d.ts

@@ -1,5 +1,5 @@
 export type SelectVariantProps = keyof typeof selectRecipe.variantMap;
-export declare const selectRecipe: import('../../../styled-system/types').SlotRecipeRuntimeFn<"label" | "description" | "list" | "content" | "trigger" | "positioner" | "indicator" | "item" | "root" | "clearTrigger" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel" | "control" | "valueText", {
+export declare const selectRecipe: import('../../../styled-system/types').SlotRecipeRuntimeFn<"label" | "description" | "list" | "content" | "trigger" | "positioner" | "item" | "indicator" | "root" | "clearTrigger" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel" | "control" | "valueText", {
     radius: {
         md: {
             trigger: {

package/dist/types/components/Spinner/Spinner.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import { default as Spinner } from './index';
 declare const meta: Meta<typeof Spinner>;
 export default meta;

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

@@ -4,5 +4,8 @@ import { UtilityValues } from '../../../styled-system/types/prop-type';
 export type SpinnerProps = HTMLStyledProps<'div'> & SpinnerVariantProps & {
     color?: UtilityValues['color'];
 };
-declare const Spinner: import('react').ForwardRefExoticComponent<Omit<SpinnerProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const Spinner: {
+    ({ className, size, color, ref, ...props }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default Spinner;

package/dist/types/components/Switch/Switch.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-vite';
 import { default as Switch } from './index';
 declare const meta: Meta<typeof Switch>;
 export default meta;

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

@@ -1,4 +1,7 @@
 import * as StyledSwitch from './switch.styled';
-export type SwitchProps = StyledSwitch.RootProps;
-declare const Switch: import('react').ForwardRefExoticComponent<Omit<StyledSwitch.RootProps, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
+export type SwitchProps = StyledSwitch.SwitchProps;
+declare const Switch: {
+    (props: SwitchProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default Switch;

package/dist/types/components/Switch/switch.styled.d.ts

@@ -1,17 +1,91 @@
-import { Assign } from '@ark-ui/react';
 import { Switch } from '@ark-ui/react/switch';
-import { ComponentProps, HTMLStyledProps } from 'styled-system/types';
-export type RootProviderProps = ComponentProps<typeof RootProvider>;
-export declare const RootProvider: import('react').ForwardRefExoticComponent<Omit<Omit<Assign<HTMLStyledProps<"label">, Switch.RootProviderBaseProps>, never> & {
-    size?: "md" | "lg" | undefined;
-    color?: "neutral" | "neuroid" | "heyd" | "heybee" | "zoltarina" | undefined;
-}, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
-export type RootProps = ComponentProps<typeof Root>;
-export declare const Root: import('react').ForwardRefExoticComponent<Omit<Omit<Assign<HTMLStyledProps<"label">, Switch.RootBaseProps>, never> & {
-    size?: "md" | "lg" | undefined;
-    color?: "neutral" | "neuroid" | "heyd" | "heybee" | "zoltarina" | undefined;
-}, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
-export declare const Control: import('react').ForwardRefExoticComponent<Omit<Assign<HTMLStyledProps<"span">, Switch.ControlBaseProps>, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
-export declare const Label: import('react').ForwardRefExoticComponent<Omit<Assign<HTMLStyledProps<"span">, Switch.LabelBaseProps>, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
-export declare const Thumb: import('react').ForwardRefExoticComponent<Omit<Assign<HTMLStyledProps<"span">, Switch.ThumbBaseProps>, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+import { ComponentProps } from 'styled-system/types';
+export type SwitchProps = ComponentProps<typeof Root>;
+export declare const Root: import('../../../styled-system/jsx').StyleContextProvider<import('react').ForwardRefExoticComponent<Switch.RootProps & import('react').RefAttributes<HTMLLabelElement>>, import('styled-system/types').SlotRecipeRuntimeFn<"label" | "root" | "control" | "thumb", {
+    size: {
+        md: {
+            control: {
+                width: number;
+                p: number;
+            };
+            thumb: {
+                width: number;
+                height: number;
+            };
+        };
+        lg: {
+            control: {
+                width: number;
+                p: number;
+            };
+            thumb: {
+                width: number;
+                height: number;
+            };
+        };
+    };
+    color: {
+        neutral: {
+            thumb: {
+                _checked: {
+                    background: "content.neutralInverse.bold";
+                };
+            };
+        };
+        neuroid: {
+            control: {
+                _checked: {
+                    background: "background.neuroidSecondary.selected";
+                };
+            };
+            thumb: {
+                _checked: {
+                    background: "content.static.white.bold";
+                };
+            };
+        };
+        heyd: {
+            control: {
+                _checked: {
+                    background: "background.heydPrimary.selected";
+                };
+            };
+            thumb: {
+                _checked: {
+                    background: "content.static.white.bold";
+                };
+            };
+        };
+        heybee: {
+            control: {
+                _checked: {
+                    background: "background.heybeePrimary.selected";
+                };
+            };
+            thumb: {
+                _checked: {
+                    background: "content.static.white.bold";
+                };
+            };
+        };
+        zoltarina: {
+            control: {
+                _checked: {
+                    background: "background.zoltarinaPrimary.selected";
+                };
+            };
+            thumb: {
+                _checked: {
+                    background: "content.static.white.bold";
+                };
+            };
+        };
+    };
+}>>;
+export type SwitchControlProps = ComponentProps<typeof Control>;
+export declare const Control: import('../../../styled-system/jsx').StyleContextConsumer<import('react').ForwardRefExoticComponent<Switch.ControlProps & import('react').RefAttributes<HTMLSpanElement>>>;
+export type SwitchLabelProps = ComponentProps<typeof Label>;
+export declare const Label: import('../../../styled-system/jsx').StyleContextConsumer<import('react').ForwardRefExoticComponent<Switch.LabelProps & import('react').RefAttributes<HTMLSpanElement>>>;
+export type SwitchThumbProps = ComponentProps<typeof Thumb>;
+export declare const Thumb: import('../../../styled-system/jsx').StyleContextConsumer<import('react').ForwardRefExoticComponent<Switch.ThumbProps & import('react').RefAttributes<HTMLSpanElement>>>;
 export { SwitchContext as Context, SwitchHiddenInput as HiddenInput } from '@ark-ui/react/switch';

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

@@ -1,8 +1,12 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { default as Tabs, TabsProps } from '.';
-declare const meta: Meta<typeof Tabs>;
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+};
 export default meta;
-type Story = StoryObj<TabsProps>;
+type Story = StoryObj<typeof meta>;
 export declare const Basic: Story;
 export declare const Enclosed: Story;
 export declare const Fitted: Story;

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

@@ -1,34 +1,213 @@
-import { default as React } from 'react';
 import { ComponentProps } from '../../../styled-system/types';
 import { Tabs as ArkTabs } from '@ark-ui/react/tabs';
-import { Assign } from '@ark-ui/react';
-declare const Root: (props: Omit<ArkTabs.RootProps, never> & {
-    variant?: "line" | "enclosed" | undefined;
-    fitted?: boolean | undefined;
-    bottomLine?: boolean | undefined;
-    shadow?: boolean | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
+declare const Root: import('../../../styled-system/jsx').StyleContextRootProvider<import('react').ForwardRefExoticComponent<ArkTabs.RootProps & import('react').RefAttributes<HTMLDivElement>>, import('../../../styled-system/types').SlotRecipeRuntimeFn<"list" | "content" | "trigger" | "indicator" | "root", {
+    variant: {
+        line: {
+            list: {
+                borderBottomWidth: "1px";
+                borderColor: "background.neutral.selected";
+            };
+        };
+        enclosed: {
+            list: {
+                p: "16px 0 0 16px";
+                borderRadius: "md";
+                gap: "16";
+            };
+            trigger: {
+                borderRadius: "full";
+                _selected: {
+                    background: "background.neutral.selected";
+                };
+            };
+            indicator: {
+                display: "none";
+            };
+        };
+    };
+    fitted: {
+        true: {
+            root: {
+                width: "100%";
+            };
+            list: {
+                width: "100%";
+                p: number;
+                overflowX: "visible";
+            };
+            trigger: {
+                flex: number;
+                justifyContent: "center";
+                overflow: "hidden";
+                textOverflow: "ellipsis";
+                whiteSpace: "nowrap";
+            };
+        };
+    };
+    bottomLine: {
+        true: {
+            list: {
+                borderBottomWidth: "1px";
+                borderColor: "background.neutral.selected";
+            };
+        };
+        false: {
+            list: {
+                borderBottomWidth: "0px";
+            };
+        };
+    };
+    shadow: {
+        true: {
+            list: {
+                boxShadow: "0px 8px 12px 0px var(--colors-semantic-shadow-overlay, rgba(0, 0, 0, 0.08))";
+            };
+        };
+    };
+}>>;
 export type TabsProps = ComponentProps<typeof Root>;
-export type TabsListProps = Assign<React.HTMLAttributes<HTMLDivElement>, ArkTabs.ListBaseProps>;
-export type TabsTriggerProps = Assign<React.HTMLAttributes<HTMLButtonElement>, ArkTabs.TriggerBaseProps>;
-export type TabsContentProps = Assign<React.HTMLAttributes<HTMLDivElement>, ArkTabs.ContentBaseProps>;
-export type TabsIndicatorProps = Assign<React.HTMLAttributes<HTMLDivElement>, ArkTabs.IndicatorBaseProps>;
-declare const Tabs: ((props: Omit<ArkTabs.RootProps, never> & {
-    variant?: "line" | "enclosed" | undefined;
-    fitted?: boolean | undefined;
-    bottomLine?: boolean | undefined;
-    shadow?: boolean | undefined;
-}) => import("react/jsx-runtime").JSX.Element) & {
-    Root: (props: Omit<ArkTabs.RootProps, never> & {
-        variant?: "line" | "enclosed" | undefined;
-        fitted?: boolean | undefined;
-        bottomLine?: boolean | undefined;
-        shadow?: boolean | undefined;
-    }) => import("react/jsx-runtime").JSX.Element;
-    List: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "asChild"> & ArkTabs.ListBaseProps & React.RefAttributes<HTMLDivElement>>;
-    Trigger: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLButtonElement>, keyof ArkTabs.TriggerBaseProps> & ArkTabs.TriggerBaseProps & React.RefAttributes<HTMLButtonElement>>;
-    Content: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, keyof ArkTabs.ContentBaseProps> & ArkTabs.ContentBaseProps & React.RefAttributes<HTMLDivElement>>;
-    Indicator: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "asChild"> & ArkTabs.IndicatorBaseProps & React.RefAttributes<HTMLDivElement>>;
+export type TabsListProps = ComponentProps<typeof List>;
+declare const List: import('../../../styled-system/jsx').StyleContextConsumer<import('react').ForwardRefExoticComponent<ArkTabs.ListProps & import('react').RefAttributes<HTMLDivElement>>>;
+export type TabsTriggerProps = ComponentProps<typeof Trigger>;
+declare const Trigger: import('../../../styled-system/jsx').StyleContextConsumer<import('react').ForwardRefExoticComponent<ArkTabs.TriggerProps & import('react').RefAttributes<HTMLButtonElement>>>;
+export type TabsContentProps = ComponentProps<typeof Content>;
+declare const Content: import('../../../styled-system/jsx').StyleContextConsumer<import('react').ForwardRefExoticComponent<ArkTabs.ContentProps & import('react').RefAttributes<HTMLDivElement>>>;
+export type TabsIndicatorProps = ComponentProps<typeof Indicator>;
+declare const Indicator: import('../../../styled-system/jsx').StyleContextConsumer<import('react').ForwardRefExoticComponent<ArkTabs.IndicatorProps & import('react').RefAttributes<HTMLDivElement>>>;
+declare const Tabs: import('../../../styled-system/jsx').StyleContextRootProvider<import('react').ForwardRefExoticComponent<ArkTabs.RootProps & import('react').RefAttributes<HTMLDivElement>>, import('../../../styled-system/types').SlotRecipeRuntimeFn<"list" | "content" | "trigger" | "indicator" | "root", {
+    variant: {
+        line: {
+            list: {
+                borderBottomWidth: "1px";
+                borderColor: "background.neutral.selected";
+            };
+        };
+        enclosed: {
+            list: {
+                p: "16px 0 0 16px";
+                borderRadius: "md";
+                gap: "16";
+            };
+            trigger: {
+                borderRadius: "full";
+                _selected: {
+                    background: "background.neutral.selected";
+                };
+            };
+            indicator: {
+                display: "none";
+            };
+        };
+    };
+    fitted: {
+        true: {
+            root: {
+                width: "100%";
+            };
+            list: {
+                width: "100%";
+                p: number;
+                overflowX: "visible";
+            };
+            trigger: {
+                flex: number;
+                justifyContent: "center";
+                overflow: "hidden";
+                textOverflow: "ellipsis";
+                whiteSpace: "nowrap";
+            };
+        };
+    };
+    bottomLine: {
+        true: {
+            list: {
+                borderBottomWidth: "1px";
+                borderColor: "background.neutral.selected";
+            };
+        };
+        false: {
+            list: {
+                borderBottomWidth: "0px";
+            };
+        };
+    };
+    shadow: {
+        true: {
+            list: {
+                boxShadow: "0px 8px 12px 0px var(--colors-semantic-shadow-overlay, rgba(0, 0, 0, 0.08))";
+            };
+        };
+    };
+}>> & {
+    Root: import('../../../styled-system/jsx').StyleContextRootProvider<import('react').ForwardRefExoticComponent<ArkTabs.RootProps & import('react').RefAttributes<HTMLDivElement>>, import('../../../styled-system/types').SlotRecipeRuntimeFn<"list" | "content" | "trigger" | "indicator" | "root", {
+        variant: {
+            line: {
+                list: {
+                    borderBottomWidth: "1px";
+                    borderColor: "background.neutral.selected";
+                };
+            };
+            enclosed: {
+                list: {
+                    p: "16px 0 0 16px";
+                    borderRadius: "md";
+                    gap: "16";
+                };
+                trigger: {
+                    borderRadius: "full";
+                    _selected: {
+                        background: "background.neutral.selected";
+                    };
+                };
+                indicator: {
+                    display: "none";
+                };
+            };
+        };
+        fitted: {
+            true: {
+                root: {
+                    width: "100%";
+                };
+                list: {
+                    width: "100%";
+                    p: number;
+                    overflowX: "visible";
+                };
+                trigger: {
+                    flex: number;
+                    justifyContent: "center";
+                    overflow: "hidden";
+                    textOverflow: "ellipsis";
+                    whiteSpace: "nowrap";
+                };
+            };
+        };
+        bottomLine: {
+            true: {
+                list: {
+                    borderBottomWidth: "1px";
+                    borderColor: "background.neutral.selected";
+                };
+            };
+            false: {
+                list: {
+                    borderBottomWidth: "0px";
+                };
+            };
+        };
+        shadow: {
+            true: {
+                list: {
+                    boxShadow: "0px 8px 12px 0px var(--colors-semantic-shadow-overlay, rgba(0, 0, 0, 0.08))";
+                };
+            };
+        };
+    }>>;
+    List: import('../../../styled-system/jsx').StyleContextConsumer<import('react').ForwardRefExoticComponent<ArkTabs.ListProps & import('react').RefAttributes<HTMLDivElement>>>;
+    Trigger: import('../../../styled-system/jsx').StyleContextConsumer<import('react').ForwardRefExoticComponent<ArkTabs.TriggerProps & import('react').RefAttributes<HTMLButtonElement>>>;
+    Content: import('../../../styled-system/jsx').StyleContextConsumer<import('react').ForwardRefExoticComponent<ArkTabs.ContentProps & import('react').RefAttributes<HTMLDivElement>>>;
+    Indicator: import('../../../styled-system/jsx').StyleContextConsumer<import('react').ForwardRefExoticComponent<ArkTabs.IndicatorProps & import('react').RefAttributes<HTMLDivElement>>>;
 };
-export declare const TabsContext: (props: ArkTabs.ContextProps) => React.ReactNode;
+export declare const TabsContext: (props: ArkTabs.ContextProps) => import('react').ReactNode;
 export default Tabs;