@dxos/react-ui-tabs 0.8.4-main.ef1bc66f44 → 0.8.4-main.effb148878
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.
- package/LICENSE +102 -5
- package/dist/lib/browser/index.mjs +52 -52
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +52 -52
- package/dist/lib/node-esm/index.mjs.map +3 -3
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/Tabs.d.ts +39 -12
- package/dist/types/src/Tabs.d.ts.map +1 -1
- package/dist/types/src/Tabs.stories.d.ts +8 -5
- package/dist/types/src/Tabs.stories.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +11 -14
- package/src/Tabs.stories.tsx +48 -41
- package/src/Tabs.tsx +62 -69
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/Tabs.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { useArrowNavigationGroup, useFocusFinders, useFocusableGroup } from '@fluentui/react-tabster';\nimport { createContext } from '@radix-ui/react-context';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, {\n Activity,\n type ComponentPropsWithoutRef,\n type MouseEvent,\n forwardRef,\n useCallback,\n useLayoutEffect,\n} from 'react';\n\nimport {\n Button,\n type ButtonProps,\n IconButton,\n type IconButtonProps,\n type ThemedClassName,\n useForwardedRef,\n} from '@dxos/react-ui';\nimport { useAttention } from '@dxos/react-ui-attention';\nimport {
|
|
5
|
-
"mappings": ";;;AAIA,SAASA,yBAAyBC,iBAAiBC,yBAAyB;AAC5E,SAASC,qBAAqB;AAC9B,YAAYC,mBAAmB;AAC/B,SAASC,4BAA4B;AACrC,OAAOC,SACLC,UAGAC,YACAC,aACAC,uBACK;AAEP,SACEC,QAEAC,YAGAC,uBACK;AACP,SAASC,oBAAoB;AAC7B,SAASC,
|
|
6
|
-
"names": ["useArrowNavigationGroup", "useFocusFinders", "useFocusableGroup", "createContext", "TabsPrimitive", "useControllableState", "React", "Activity", "forwardRef", "useCallback", "useLayoutEffect", "Button", "IconButton", "useForwardedRef", "useAttention", "
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { useArrowNavigationGroup, useFocusFinders, useFocusableGroup } from '@fluentui/react-tabster';\nimport { createContext } from '@radix-ui/react-context';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, {\n Activity,\n type ComponentPropsWithoutRef,\n type MouseEvent,\n forwardRef,\n useCallback,\n useLayoutEffect,\n} from 'react';\n\nimport {\n Button,\n type ButtonProps,\n IconButton,\n type IconButtonProps,\n type ThemedClassName,\n useForwardedRef,\n} from '@dxos/react-ui';\nimport { useAttention } from '@dxos/react-ui-attention';\nimport { mx } from '@dxos/ui-theme';\n\ntype TabsActivePart = 'list' | 'panel';\n\nconst TABS_NAME = 'Tabs';\n\ntype TabsContextValue = {\n activePart: TabsActivePart;\n setActivePart: (nextActivePart: TabsActivePart) => void;\n attendableId?: string;\n} & Pick<TabsPrimitive.TabsProps, 'orientation' | 'value'>;\n\nconst [TabsContextProvider, useTabsContext] = createContext<TabsContextValue>(TABS_NAME, {\n orientation: 'vertical',\n activePart: 'list',\n setActivePart: () => {},\n});\n\ntype TabsRootProps = ThemedClassName<TabsPrimitive.TabsProps> &\n Partial<\n Pick<TabsContextValue, 'activePart' | 'attendableId'> & {\n onActivePartChange: (nextActivePart: TabsActivePart) => void;\n defaultActivePart: TabsActivePart;\n }\n >;\n\nconst TabsRoot = forwardRef<HTMLDivElement, TabsRootProps>(\n (\n {\n children,\n classNames,\n activePart: propsActivePart,\n onActivePartChange,\n defaultActivePart,\n value: propsValue,\n onValueChange,\n defaultValue,\n orientation = 'vertical',\n activationMode = 'manual',\n attendableId,\n ...props\n },\n forwardedRef,\n ) => {\n // const tabsRoot = useRef<HTMLDivElement | null>(null);\n const tabsRoot = useForwardedRef(forwardedRef);\n\n // TODO(thure): Without these, we get Groupper/Mover `API used before initialization`, but why?\n const _1 = useArrowNavigationGroup();\n const _2 = useFocusableGroup();\n const [activePart = 'list', setActivePart] = useControllableState({\n prop: propsActivePart,\n onChange: onActivePartChange,\n defaultProp: defaultActivePart,\n });\n\n const [value, setValue] = useControllableState({\n prop: propsValue,\n onChange: onValueChange,\n defaultProp: defaultValue,\n });\n\n const handleValueChange = useCallback(\n (nextValue: string) => {\n setActivePart('panel');\n setValue(nextValue);\n },\n [value],\n );\n\n const { findFirstFocusable } = useFocusFinders();\n\n useLayoutEffect(() => {\n if (tabsRoot.current) {\n findFirstFocusable(tabsRoot.current)?.focus();\n }\n }, [activePart]);\n\n return (\n <TabsContextProvider\n orientation={orientation}\n activePart={activePart}\n setActivePart={setActivePart}\n value={value}\n attendableId={attendableId}\n >\n <TabsPrimitive.Root\n {...props}\n className={mx('overflow-hidden', classNames)}\n orientation={orientation}\n activationMode={activationMode}\n data-active={activePart}\n value={value}\n onValueChange={handleValueChange}\n ref={tabsRoot}\n >\n {children}\n </TabsPrimitive.Root>\n </TabsContextProvider>\n );\n },\n);\n\nTabsRoot.displayName = 'Tabs.Root';\n\ntype TabsViewportProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;\n\nfunction TabsViewport({ classNames, children, ...props }: TabsViewportProps) {\n const { activePart } = useTabsContext('TabsViewport');\n return (\n <div {...props} data-active={activePart} className={mx(classNames)}>\n {children}\n </div>\n );\n}\n\nTabsViewport.displayName = 'Tabs.Viewport';\n\ntype TabsTablistProps = ThemedClassName<TabsPrimitive.TabsListProps>;\n\nfunction TabsTablist({ children, classNames, ...props }: TabsTablistProps) {\n const { orientation } = useTabsContext('TabsTablist');\n return (\n <TabsPrimitive.List\n {...props}\n data-arrow-keys={orientation === 'vertical' ? 'up down' : 'left right'}\n className={mx(\n 'max-h-full w-full',\n // TODO(burdon): Should be embeddable inside Toolbar (if horizontal).\n orientation === 'vertical' ? 'overflow-y-auto' : 'flex p-1 gap-1 items-stretch justify-start overflow-x-auto',\n classNames,\n )}\n >\n {children}\n </TabsPrimitive.List>\n );\n}\n\nTabsTablist.displayName = 'Tabs.Tablist';\n\nfunction TabsBackButton({ onClick, classNames, ...props }: ButtonProps) {\n const { setActivePart } = useTabsContext('TabsBackButton');\n const handleClick = useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n setActivePart('list');\n return onClick?.(event);\n },\n [setActivePart, onClick],\n );\n\n return <Button {...props} classNames={['@md:hidden text-start', classNames]} onClick={handleClick} />;\n}\n\nTabsBackButton.displayName = 'Tabs.BackButton';\n\ntype TabsTabGroupHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'h2'>>;\n\nfunction TabsTabGroupHeading({ children, classNames, ...props }: ThemedClassName<TabsTabGroupHeadingProps>) {\n return (\n <h2 {...props} className={mx('my-1 px-2 text-sm text-un-accent', classNames)}>\n {children}\n </h2>\n );\n}\n\nTabsTabGroupHeading.displayName = 'Tabs.TabGroupHeading';\n\ntype TabsTabProps = ButtonProps & Pick<TabsPrimitive.TabsTriggerProps, 'value'>;\n\nfunction TabsTab({ value, classNames, children, onClick, ...props }: TabsTabProps) {\n const { setActivePart, orientation, value: contextValue, attendableId } = useTabsContext('TabsTab');\n const { hasAttention } = useAttention(attendableId);\n\n const handleClick = useCallback(\n // NOTE: This handler is only called if the tab is *already active*.\n (event: MouseEvent<HTMLButtonElement>) => {\n setActivePart('panel');\n onClick?.(event);\n },\n [setActivePart, onClick],\n );\n\n return (\n <TabsPrimitive.Trigger value={value} asChild>\n <Button\n {...props}\n variant={\n orientation === 'horizontal' && contextValue === value ? (hasAttention ? 'primary' : 'default') : 'ghost'\n }\n classNames={[\n orientation === 'vertical' && 'block justify-start text-start w-full',\n orientation === 'vertical' && 'dx-selected',\n classNames,\n ]}\n onClick={handleClick}\n >\n {children}\n </Button>\n </TabsPrimitive.Trigger>\n );\n}\n\nTabsTab.displayName = 'Tabs.Tab';\n\ntype TabsIconTabProps = IconButtonProps & Pick<TabsPrimitive.TabsTriggerProps, 'value'>;\n\nfunction TabsIconTab({ value, classNames, onClick, ...props }: TabsIconTabProps) {\n const { setActivePart, orientation, value: contextValue, attendableId } = useTabsContext('TabsTab');\n const { hasAttention } = useAttention(attendableId);\n\n // NOTE: This handler is only called if the tab is *already active*.\n const handleClick = useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n setActivePart('panel');\n onClick?.(event);\n },\n [setActivePart, onClick],\n );\n\n return (\n <TabsPrimitive.Trigger value={value} asChild>\n <IconButton\n {...props}\n variant={\n orientation === 'horizontal' && contextValue === value ? (hasAttention ? 'primary' : 'default') : 'ghost'\n }\n classNames={[\n orientation === 'vertical' && 'justify-start text-start w-full',\n orientation === 'vertical' && 'dx-selected',\n classNames,\n ]}\n onClick={handleClick}\n />\n </TabsPrimitive.Trigger>\n );\n}\n\nTabsIconTab.displayName = 'Tabs.IconTab';\n\ntype TabsPanelProps = ThemedClassName<TabsPrimitive.TabsContentProps>;\n\nfunction TabsPanel({ classNames, children, ...props }: TabsPanelProps) {\n const { value: contextValue } = useTabsContext('TabsTab');\n return (\n <Activity mode={contextValue === props.value ? 'visible' : 'hidden'}>\n <TabsPrimitive.Content {...props} className={mx('p-0! dx-focus-ring-inset-over-all', classNames)}>\n {children}\n </TabsPrimitive.Content>\n </Activity>\n );\n}\n\nTabsPanel.displayName = 'Tabs.Panel';\n\ntype TabsTabPrimitiveProps = TabsPrimitive.TabsTriggerProps;\n\nexport const Tabs = {\n Root: TabsRoot,\n Tablist: TabsTablist,\n Tab: TabsTab,\n IconTab: TabsIconTab,\n TabPrimitive: TabsPrimitive.Trigger,\n TabGroupHeading: TabsTabGroupHeading,\n Panel: TabsPanel,\n BackButton: TabsBackButton,\n Viewport: TabsViewport,\n};\n\nexport type {\n TabsActivePart,\n TabsRootProps,\n TabsTablistProps,\n TabsTabProps,\n TabsTabPrimitiveProps,\n TabsTabGroupHeadingProps,\n TabsPanelProps,\n TabsViewportProps,\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["useArrowNavigationGroup", "useFocusFinders", "useFocusableGroup", "createContext", "TabsPrimitive", "useControllableState", "React", "Activity", "forwardRef", "useCallback", "useLayoutEffect", "Button", "IconButton", "useForwardedRef", "useAttention", "mx", "TABS_NAME", "TabsContextProvider", "useTabsContext", "orientation", "activePart", "setActivePart", "TabsRoot", "children", "classNames", "propsActivePart", "onActivePartChange", "defaultActivePart", "value", "propsValue", "onValueChange", "defaultValue", "activationMode", "attendableId", "props", "forwardedRef", "tabsRoot", "_1", "_2", "prop", "onChange", "defaultProp", "setValue", "handleValueChange", "nextValue", "findFirstFocusable", "current", "focus", "Root", "className", "data-active", "ref", "displayName", "TabsViewport", "div", "TabsTablist", "List", "data-arrow-keys", "TabsBackButton", "onClick", "handleClick", "event", "TabsTabGroupHeading", "h2", "TabsTab", "contextValue", "hasAttention", "Trigger", "asChild", "variant", "TabsIconTab", "TabsPanel", "mode", "Content", "Tabs", "Tablist", "Tab", "IconTab", "TabPrimitive", "TabGroupHeading", "Panel", "BackButton", "Viewport"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/Tabs.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"src/Tabs.tsx":{"bytes":26019,"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-tabs","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-attention","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":368,"imports":[{"path":"src/Tabs.tsx","kind":"import-statement","original":"./Tabs"}],"format":"esm"}},"outputs":{"dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":13924},"dist/lib/node-esm/index.mjs":{"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-tabs","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-attention","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true}],"exports":["Tabs"],"entryPoint":"src/index.ts","inputs":{"src/Tabs.tsx":{"bytesInOutput":6480},"src/index.ts":{"bytesInOutput":0}},"bytes":6643}}}
|
package/dist/types/src/Tabs.d.ts
CHANGED
|
@@ -6,34 +6,61 @@ type TabsContextValue = {
|
|
|
6
6
|
activePart: TabsActivePart;
|
|
7
7
|
setActivePart: (nextActivePart: TabsActivePart) => void;
|
|
8
8
|
attendableId?: string;
|
|
9
|
-
verticalVariant?: 'stateful' | 'stateless';
|
|
10
9
|
} & Pick<TabsPrimitive.TabsProps, 'orientation' | 'value'>;
|
|
11
|
-
type TabsRootProps = ThemedClassName<TabsPrimitive.TabsProps> & Partial<Pick<TabsContextValue, 'activePart' | '
|
|
10
|
+
type TabsRootProps = ThemedClassName<TabsPrimitive.TabsProps> & Partial<Pick<TabsContextValue, 'activePart' | 'attendableId'> & {
|
|
12
11
|
onActivePartChange: (nextActivePart: TabsActivePart) => void;
|
|
13
12
|
defaultActivePart: TabsActivePart;
|
|
14
13
|
}>;
|
|
15
14
|
type TabsViewportProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;
|
|
15
|
+
declare function TabsViewport({ classNames, children, ...props }: TabsViewportProps): React.JSX.Element;
|
|
16
|
+
declare namespace TabsViewport {
|
|
17
|
+
var displayName: string;
|
|
18
|
+
}
|
|
16
19
|
type TabsTablistProps = ThemedClassName<TabsPrimitive.TabsListProps>;
|
|
20
|
+
declare function TabsTablist({ children, classNames, ...props }: TabsTablistProps): React.JSX.Element;
|
|
21
|
+
declare namespace TabsTablist {
|
|
22
|
+
var displayName: string;
|
|
23
|
+
}
|
|
24
|
+
declare function TabsBackButton({ onClick, classNames, ...props }: ButtonProps): React.JSX.Element;
|
|
25
|
+
declare namespace TabsBackButton {
|
|
26
|
+
var displayName: string;
|
|
27
|
+
}
|
|
17
28
|
type TabsTabGroupHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'h2'>>;
|
|
29
|
+
declare function TabsTabGroupHeading({ children, classNames, ...props }: ThemedClassName<TabsTabGroupHeadingProps>): React.JSX.Element;
|
|
30
|
+
declare namespace TabsTabGroupHeading {
|
|
31
|
+
var displayName: string;
|
|
32
|
+
}
|
|
18
33
|
type TabsTabProps = ButtonProps & Pick<TabsPrimitive.TabsTriggerProps, 'value'>;
|
|
34
|
+
declare function TabsTab({ value, classNames, children, onClick, ...props }: TabsTabProps): React.JSX.Element;
|
|
35
|
+
declare namespace TabsTab {
|
|
36
|
+
var displayName: string;
|
|
37
|
+
}
|
|
19
38
|
type TabsIconTabProps = IconButtonProps & Pick<TabsPrimitive.TabsTriggerProps, 'value'>;
|
|
20
|
-
|
|
39
|
+
declare function TabsIconTab({ value, classNames, onClick, ...props }: TabsIconTabProps): React.JSX.Element;
|
|
40
|
+
declare namespace TabsIconTab {
|
|
41
|
+
var displayName: string;
|
|
42
|
+
}
|
|
43
|
+
type TabsPanelProps = ThemedClassName<TabsPrimitive.TabsContentProps>;
|
|
44
|
+
declare function TabsPanel({ classNames, children, ...props }: TabsPanelProps): React.JSX.Element;
|
|
45
|
+
declare namespace TabsPanel {
|
|
46
|
+
var displayName: string;
|
|
47
|
+
}
|
|
21
48
|
type TabsTabPrimitiveProps = TabsPrimitive.TabsTriggerProps;
|
|
22
49
|
export declare const Tabs: {
|
|
23
50
|
Root: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps, "className"> & {
|
|
24
51
|
classNames?: import("@dxos/ui-types").ClassNameValue;
|
|
25
|
-
} & Partial<Pick<TabsContextValue, "activePart" | "
|
|
52
|
+
} & Partial<Pick<TabsContextValue, "activePart" | "attendableId"> & {
|
|
26
53
|
onActivePartChange: (nextActivePart: TabsActivePart) => void;
|
|
27
54
|
defaultActivePart: TabsActivePart;
|
|
28
55
|
}> & React.RefAttributes<HTMLDivElement>>;
|
|
29
|
-
Tablist:
|
|
30
|
-
Tab:
|
|
31
|
-
IconTab:
|
|
56
|
+
Tablist: typeof TabsTablist;
|
|
57
|
+
Tab: typeof TabsTab;
|
|
58
|
+
IconTab: typeof TabsIconTab;
|
|
32
59
|
TabPrimitive: React.ForwardRefExoticComponent<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
33
|
-
TabGroupHeading:
|
|
34
|
-
|
|
35
|
-
BackButton:
|
|
36
|
-
Viewport:
|
|
60
|
+
TabGroupHeading: typeof TabsTabGroupHeading;
|
|
61
|
+
Panel: typeof TabsPanel;
|
|
62
|
+
BackButton: typeof TabsBackButton;
|
|
63
|
+
Viewport: typeof TabsViewport;
|
|
37
64
|
};
|
|
38
|
-
export type { TabsActivePart, TabsRootProps, TabsTablistProps, TabsTabProps, TabsTabPrimitiveProps, TabsTabGroupHeadingProps,
|
|
65
|
+
export type { TabsActivePart, TabsRootProps, TabsTablistProps, TabsTabProps, TabsTabPrimitiveProps, TabsTabGroupHeadingProps, TabsPanelProps, TabsViewportProps, };
|
|
39
66
|
//# sourceMappingURL=Tabs.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/Tabs.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AAEtD,OAAO,KAAK,EAAE,EAEZ,KAAK,wBAAwB,EAK9B,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,WAAW,EAEhB,KAAK,eAAe,EACpB,KAAK,eAAe,EAErB,MAAM,gBAAgB,CAAC;AAIxB,KAAK,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAIvC,KAAK,gBAAgB,GAAG;IACtB,UAAU,EAAE,cAAc,CAAC;IAC3B,aAAa,EAAE,CAAC,cAAc,EAAE,cAAc,KAAK,IAAI,CAAC;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/Tabs.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AAEtD,OAAO,KAAK,EAAE,EAEZ,KAAK,wBAAwB,EAK9B,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,WAAW,EAEhB,KAAK,eAAe,EACpB,KAAK,eAAe,EAErB,MAAM,gBAAgB,CAAC;AAIxB,KAAK,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAIvC,KAAK,gBAAgB,GAAG;IACtB,UAAU,EAAE,cAAc,CAAC;IAC3B,aAAa,EAAE,CAAC,cAAc,EAAE,cAAc,KAAK,IAAI,CAAC;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,EAAE,aAAa,GAAG,OAAO,CAAC,CAAC;AAQ3D,KAAK,aAAa,GAAG,eAAe,CAAC,aAAa,CAAC,SAAS,CAAC,GAC3D,OAAO,CACL,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,cAAc,CAAC,GAAG;IACtD,kBAAkB,EAAE,CAAC,cAAc,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7D,iBAAiB,EAAE,cAAc,CAAC;CACnC,CACF,CAAC;AAiFJ,KAAK,iBAAiB,GAAG,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAC;AAE1E,iBAAS,YAAY,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,qBAO1E;;;;AAID,KAAK,gBAAgB,GAAG,eAAe,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;AAErE,iBAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,qBAgBxE;;;;AAID,iBAAS,cAAc,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,qBAWrE;;;;AAID,KAAK,wBAAwB,GAAG,eAAe,CAAC,wBAAwB,CAAC,IAAI,CAAC,CAAC,CAAC;AAEhF,iBAAS,mBAAmB,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,wBAAwB,CAAC,qBAMzG;;;;AAID,KAAK,YAAY,GAAG,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC;AAEhF,iBAAS,OAAO,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,qBA+BhF;;;;AAID,KAAK,gBAAgB,GAAG,eAAe,GAAG,IAAI,CAAC,aAAa,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC;AAExF,iBAAS,WAAW,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,qBA6B9E;;;;AAID,KAAK,cAAc,GAAG,eAAe,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;AAEtE,iBAAS,SAAS,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,qBASpE;;;;AAID,KAAK,qBAAqB,GAAG,aAAa,CAAC,gBAAgB,CAAC;AAE5D,eAAO,MAAM,IAAI;IACf,IAAI;;;4BA5OoB,CAAC,cAAc,EAAE,cAAc,KAAK,IAAI;2BACzC,cAAc;;IA4OrC,OAAO;IACP,GAAG;IACH,OAAO;IACP,YAAY;IACZ,eAAe;IACf,KAAK;IACL,UAAU;IACV,QAAQ;CACT,CAAC;AAEF,YAAY,EACV,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,qBAAqB,EACrB,wBAAwB,EACxB,cAAc,EACd,iBAAiB,GAClB,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type StoryObj } from '@storybook/react-vite';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
|
|
3
|
+
import { TabsRootProps } from './Tabs';
|
|
4
4
|
declare const meta: {
|
|
5
5
|
title: string;
|
|
6
6
|
component: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsProps, "className"> & {
|
|
@@ -9,15 +9,18 @@ declare const meta: {
|
|
|
9
9
|
activePart: import("./Tabs").TabsActivePart;
|
|
10
10
|
setActivePart: (nextActivePart: import("./Tabs").TabsActivePart) => void;
|
|
11
11
|
attendableId?: string;
|
|
12
|
-
|
|
13
|
-
} & Pick<import("@radix-ui/react-tabs").TabsProps, "orientation" | "value">, "activePart" | "verticalVariant" | "attendableId">> & Partial<{
|
|
12
|
+
} & Pick<import("@radix-ui/react-tabs").TabsProps, "orientation" | "value">, "activePart" | "attendableId"> & {
|
|
14
13
|
onActivePartChange: (nextActivePart: import("./Tabs").TabsActivePart) => void;
|
|
15
14
|
defaultActivePart: import("./Tabs").TabsActivePart;
|
|
16
15
|
}> & React.RefAttributes<HTMLDivElement>>;
|
|
17
|
-
render: () => React.JSX.Element;
|
|
16
|
+
render: ({ orientation }: TabsRootProps) => React.JSX.Element;
|
|
18
17
|
decorators: import("@storybook/react").Decorator[];
|
|
18
|
+
parameters: {
|
|
19
|
+
layout: string;
|
|
20
|
+
};
|
|
19
21
|
};
|
|
20
22
|
export default meta;
|
|
21
23
|
type Story = StoryObj<typeof meta>;
|
|
22
|
-
export declare const
|
|
24
|
+
export declare const Horizontal: Story;
|
|
25
|
+
export declare const Vertical: Story;
|
|
23
26
|
//# sourceMappingURL=Tabs.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/Tabs.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/Tabs.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAQ,aAAa,EAAE,MAAM,QAAQ,CAAC;AAwC7C,QAAA,MAAM,IAAI;;;;;;;;;;;;8BApC6B,aAAa;;;QA0ChD,MAAM;;CAE2B,CAAC;eAEvB,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,UAAU,EAAE,KAIxB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAC"}
|