(currentFilter);\n\n return (\n f.value === filter)?.label}>\n \n \n {options.map((option: Category) => (\n \n setSelectedOptions((prev) =>\n checked ? [...prev, option.id] : prev.filter((id) => id !== option.id),\n )\n }\n >\n {option.name}\n \n ))}\n \n \n \n {\n onConfirm(selectedOptions);\n onClose();\n }}\n >\n 완료\n \n \n \n );\n}"
}
\ No newline at end of file
diff --git a/docs/components/example/tabs-alert.tsx b/docs/components/example/tabs-alert.tsx
deleted file mode 100644
index b5ec7c390..000000000
--- a/docs/components/example/tabs-alert.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-"use client";
-
-import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";
-
-export default function TabsAlert() {
- return (
-
-
-
- 라벨1
-
- 라벨2
-
- 라벨3
-
-
-
- Content 1
-
-
- Content 2
-
-
- Content 3
-
-
-
-
- );
-}
-
-const Content = (props: React.PropsWithChildren) => {
- return (
-
- {props.children}
-
- );
-};
diff --git a/docs/components/example/tabs-disabled.tsx b/docs/components/example/tabs-disabled.tsx
index 20e28865e..6565cfbb9 100644
--- a/docs/components/example/tabs-disabled.tsx
+++ b/docs/components/example/tabs-disabled.tsx
@@ -1,28 +1,26 @@
-import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";
+import { TabsRoot, TabsContent, TabsTrigger, TabsList } from "seed-design/ui/tabs";
export default function TabsDisabled() {
return (
-
-
- 라벨1
-
+
+
+ 라벨1
+
라벨2
-
- 라벨3
-
-
-
- Content 1
-
-
- Content 2
-
-
- Content 3
-
-
-
+
+ 라벨3
+
+
+ Content 1
+
+
+ Content 2
+
+
+ Content 3
+
+
);
}
diff --git a/docs/components/example/tabs-dynamic-height.tsx b/docs/components/example/tabs-dynamic-height.tsx
index 45866434f..c5183f6e6 100644
--- a/docs/components/example/tabs-dynamic-height.tsx
+++ b/docs/components/example/tabs-dynamic-height.tsx
@@ -1,26 +1,26 @@
-import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";
+import { TabsRoot, TabsContent, TabsTrigger, TabsList, TabsCarousel } from "seed-design/ui/tabs";
export default function TabsDynamicHeight() {
return (
-
-
- 라벨1
- 라벨2
- 라벨3
-
-
-
+
+
+ 라벨1
+ 라벨2
+ 라벨3
+
+
+
Content 1
-
-
+
+
Content 2
-
-
+
+
Content 3
-
-
-
+
+
+
아래 컨텐츠
-
-
- 라벨1
- 라벨2
- 라벨3
-
-
-
- Content 1
-
-
- Content 2
-
-
- Content 3
-
-
-
-
- );
-}
-
-const Content = (props: React.PropsWithChildren<{ height: string }>) => {
- const { height, children } = props;
- return (
-
- {children}
-
- );
-};
diff --git a/docs/components/example/tabs-layout-fill.tsx b/docs/components/example/tabs-layout-fill.tsx
index 1d482b730..4f1c022a5 100644
--- a/docs/components/example/tabs-layout-fill.tsx
+++ b/docs/components/example/tabs-layout-fill.tsx
@@ -1,26 +1,24 @@
-import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";
+import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs";
export default function TabsLayoutFill() {
return (
-
-
- 라벨1
- 라벨2
- 라벨3
-
-
-
- Content 1
-
-
- Content 2
-
-
- Content 3
-
-
-
+
+
+ 라벨1
+ 라벨2
+ 라벨3
+
+
+ Content 1
+
+
+ Content 2
+
+
+ Content 3
+
+
);
}
diff --git a/docs/components/example/tabs-layout-hug.tsx b/docs/components/example/tabs-layout-hug.tsx
index d38d14c71..7b0953de6 100644
--- a/docs/components/example/tabs-layout-hug.tsx
+++ b/docs/components/example/tabs-layout-hug.tsx
@@ -1,26 +1,24 @@
-import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";
+import { TabsRoot, TabsContent, TabsTrigger, TabsList } from "seed-design/ui/tabs";
export default function TabsLayoutHug() {
return (
-
-
- 라벨1
- 라벨2
- 라벨3
-
-
-
- Content 1
-
-
- Content 2
-
-
- Content 3
-
-
-
+
+
+ 라벨1
+ 라벨2
+ 라벨3
+
+
+ Content 1
+
+
+ Content 2
+
+
+ Content 3
+
+
);
}
diff --git a/docs/components/example/tabs-notification.tsx b/docs/components/example/tabs-notification.tsx
new file mode 100644
index 000000000..aeabdece6
--- /dev/null
+++ b/docs/components/example/tabs-notification.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import { TabsRoot, TabsContent, TabsTrigger, TabsList } from "seed-design/ui/tabs";
+
+export default function TabsNotification() {
+ return (
+
+
+
+ 라벨1
+
+ 라벨2
+
+ 라벨3
+
+
+ Content 1
+
+
+ Content 2
+
+
+ Content 3
+
+
+
+ );
+}
+
+const Content = (props: React.PropsWithChildren) => {
+ return (
+
+ {props.children}
+
+ );
+};
diff --git a/docs/components/example/tabs-preview.tsx b/docs/components/example/tabs-preview.tsx
index 404343435..a2e794c2e 100644
--- a/docs/components/example/tabs-preview.tsx
+++ b/docs/components/example/tabs-preview.tsx
@@ -1,26 +1,24 @@
-import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";
+import { TabsRoot, TabsContent, TabsTrigger, TabsList } from "seed-design/ui/tabs";
export default function TabsPreview() {
return (
-
-
- 라벨1
- 라벨2
- 라벨3
-
-
-
- Content 1
-
-
- Content 2
-
-
- Content 3
-
-
-
+
+
+ 라벨1
+ 라벨2
+ 라벨3
+
+
+ Content 1
+
+
+ Content 2
+
+
+ Content 3
+
+
);
}
diff --git a/docs/components/example/tabs-scroll-top.tsx b/docs/components/example/tabs-scroll-top.tsx
index f393c86a7..7da815da1 100644
--- a/docs/components/example/tabs-scroll-top.tsx
+++ b/docs/components/example/tabs-scroll-top.tsx
@@ -1,7 +1,7 @@
"use client";
import { RefObject, useRef, useState } from "react";
-import { TabContent, TabContentList, Tabs, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";
+import { TabsCarousel, TabsContent, TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs";
export default function TabsScrollTop() {
const [currentTab, setCurrentTab] = useState("1");
@@ -18,24 +18,24 @@ export default function TabsScrollTop() {
return (
-
-
- handleTriggerClick("1")} value="1">
+
+
+ handleTriggerClick("1")} value="1">
라벨1
-
- handleTriggerClick("2")} value="2">
+
+ handleTriggerClick("2")} value="2">
라벨2
-
-
-
-
+
+
+
+
Content 1
-
-
+
+
Content 2
-
-
-
+
+
+
);
}
diff --git a/docs/components/example/tabs-size-medium.tsx b/docs/components/example/tabs-size-medium.tsx
index 2b5c1b0f2..ab0b14ab3 100644
--- a/docs/components/example/tabs-size-medium.tsx
+++ b/docs/components/example/tabs-size-medium.tsx
@@ -1,26 +1,24 @@
-import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";
+import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs";
export default function TabsSizeMedium() {
return (
-
-
- 라벨1
- 라벨2
- 라벨3
-
-
-
- Content 1
-
-
- Content 2
-
-
- Content 3
-
-
-
+
+
+ 라벨1
+ 라벨2
+ 라벨3
+
+
+ Content 1
+
+
+ Content 2
+
+
+ Content 3
+
+
);
}
diff --git a/docs/components/example/tabs-size-small.tsx b/docs/components/example/tabs-size-small.tsx
index fb5dda9bd..900c12cf9 100644
--- a/docs/components/example/tabs-size-small.tsx
+++ b/docs/components/example/tabs-size-small.tsx
@@ -1,26 +1,24 @@
-import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";
+import { TabsRoot, TabsTrigger, TabsList, TabsContent } from "seed-design/ui/tabs";
export default function TabsSizeSmall() {
return (
-
-
- 라벨1
- 라벨2
- 라벨3
-
-
-
- Content 1
-
-
- Content 2
-
-
- Content 3
-
-
-
+
+
+ 라벨1
+ 라벨2
+ 라벨3
+
+
+ Content 1
+
+
+ Content 2
+
+
+ Content 3
+
+
);
}
diff --git a/docs/components/example/tabs-standalone.tsx b/docs/components/example/tabs-standalone.tsx
index 5c1655b36..33b098443 100644
--- a/docs/components/example/tabs-standalone.tsx
+++ b/docs/components/example/tabs-standalone.tsx
@@ -1,19 +1,19 @@
"use client";
import { useState } from "react";
-import { Tabs, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";
+import { TabsRoot, TabsList, TabsTrigger } from "seed-design/ui/tabs";
export default function TabsStandalone() {
const [activeTab, setActiveTab] = useState("1");
return (
-
-
- 라벨1
- 라벨2
- 라벨3
-
+
+
+ 라벨1
+ 라벨2
+ 라벨3
+
{activeTab === "1" && (
Content 1
@@ -29,7 +29,7 @@ export default function TabsStandalone() {
Content 3
)}
-
+
+
+
+ 라벨1
+ 라벨2
+ 라벨3
+
+
+ Content 1
+
+
+ Content 2
+
+
+ Content 3
+
+
+
+ );
+}
+
+const Content = (props: React.PropsWithChildren<{ height: string }>) => {
+ const { height, children } = props;
+ return (
+
+ {children}
+
+ );
+};
diff --git a/docs/components/example/tabs-swipeable.tsx b/docs/components/example/tabs-swipeable.tsx
index bef9ba69d..83abe74a8 100644
--- a/docs/components/example/tabs-swipeable.tsx
+++ b/docs/components/example/tabs-swipeable.tsx
@@ -1,33 +1,28 @@
"use client";
-import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";
+import { TabsRoot, TabsList, TabsTrigger, TabsCarousel, TabsContent } from "seed-design/ui/tabs";
export default function TabsSwipeable() {
return (
- console.log("swipe start")}
- onSwipeEnd={() => console.log("swipe end")}
- >
-
- 라벨1
- 라벨2
- 라벨3
-
-
-
+
+
+ 라벨1
+ 라벨2
+ 라벨3
+
+
+
Content 1
-
-
+
+
Content 2
-
-
+
+
Content 3
-
-
-
+
+
+
);
}
diff --git a/docs/content/docs/react/components/tabs/chip-tabs.mdx b/docs/content/docs/react/components/tabs/chip-tabs.mdx
index 59b3fb53e..3fec8611f 100644
--- a/docs/content/docs/react/components/tabs/chip-tabs.mdx
+++ b/docs/content/docs/react/components/tabs/chip-tabs.mdx
@@ -11,9 +11,25 @@ description: "이 문서는 정리 중이에요. 문의 내용은 #_design_core
## Props
-### `ChipTabs`
+### `ChipTabsRoot`
-
-탭이 전체화면을 차지하고, Tab의 머리 부분인 TriggerList가 top에 고정되어 있는 경우 사용하는 예시입니다.
+탭이 전체화면을 차지하고, Tabs.List가 top에 고정되어 있는 경우 사용하는 예시입니다.
- = Omit & U;\n\ninterface ChipTabsContextValue {\n api: ReturnType;\n classNames: ReturnType;\n shouldRender: (value: string) => boolean;\n variant: ChipTabsVariant[\"variant\"];\n}\n\nconst ChipTabsContext = React.createContext(null);\n\nconst useChipTabsContext = () => {\n const context = React.useContext(ChipTabsContext);\n if (!context) {\n throw new Error(\"Tabs cannot be rendered outside the Tabs\");\n }\n return context;\n};\n\nexport interface ChipTabsProps\n extends Assign<\n React.HTMLAttributes,\n Omit\n >,\n ChipTabsVariant,\n Omit {}\n\n/**\n * @see https://v3.seed-design.io/docs/react/components/tabs/chip-tabs\n */\nexport const ChipTabs = React.forwardRef(\n (props, ref) => {\n const { className, lazyMode, isLazy, variant } = props;\n const api = useTabs(props);\n const classNames = chipTabs({\n variant,\n });\n const { rootProps, value, restProps } = api;\n const { shouldRender } = useLazyContents({\n currentValue: value ?? \"\",\n lazyMode,\n isLazy,\n });\n\n return (\n \n \n {props.children}\n \n \n );\n },\n);\nChipTabs.displayName = \"ChipTabs\";\n\nexport const ChipTabTriggerList = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, children, ...otherProps }, ref) => {\n const { api, classNames } = useChipTabsContext();\n const { tabTriggerListProps, triggerSize } = api;\n const { left } = triggerSize;\n const { triggerList } = classNames;\n\n const containerRef = React.useRef(null);\n React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement);\n\n React.useEffect(() => {\n if (containerRef.current) {\n containerRef.current?.scrollTo({\n // NOTE: 27px is half of tab's min-width\n left: left - 27,\n behavior: \"smooth\",\n });\n }\n }, [left]);\n\n return (\n \n {children}\n \n );\n});\nChipTabTriggerList.displayName = \"ChipTabTriggerList\";\n\nexport interface ChipTabTriggerProps\n extends Assign, TriggerProps> {}\n\nexport const ChipTabTrigger = React.forwardRef<\n HTMLButtonElement,\n ChipTabTriggerProps\n>(({ className, children, value, isDisabled, ...otherProps }, ref) => {\n const { api, variant } = useChipTabsContext();\n const { getTabTriggerProps } = api;\n const { label, root } = chipTab({\n variant,\n });\n const { rootProps, labelProps } = getTabTriggerProps({ value, isDisabled });\n\n return (\n \n \n {children}\n \n \n );\n});\nChipTabTrigger.displayName = \"ChipTabTrigger\";\n\nexport const ChipTabContent = React.forwardRef<\n HTMLDivElement,\n Assign, ContentProps>\n>(({ className, children, value, ...otherProps }, ref) => {\n const { api, classNames, shouldRender } = useChipTabsContext();\n const { getTabContentProps } = api;\n const { content } = classNames;\n const tabContentProps = getTabContentProps({ value });\n const isRender = shouldRender(value);\n\n return (\n \n {isRender && children}\n \n );\n});\nChipTabContent.displayName = \"ChipTabContent\";\n"
+ "content": "\"use client\";\n\nimport { ChipTabs as SeedChipTabs } from \"@seed-design/react\";\nimport { forwardRef } from \"react\";\n\nexport interface ChipTabsRootProps extends SeedChipTabs.RootProps {}\n\nexport const ChipTabsRoot = forwardRef(\n (props, ref) => {\n const { children, ...otherProps } = props;\n return (\n \n {children}\n \n );\n },\n);\nChipTabsRoot.displayName = \"ChipTabsRoot\";\n\nexport interface ChipTabsListProps extends SeedChipTabs.ListProps {}\n\nexport const ChipTabsList = SeedChipTabs.List;\n\nexport interface ChipTabsTriggerProps\n extends Omit {\n notification?: boolean;\n}\n\nexport const ChipTabsTrigger = forwardRef<\n HTMLButtonElement,\n ChipTabsTriggerProps\n>((props, ref) => {\n const { children, notification, ...otherProps } = props;\n return (\n \n {children} \n \n );\n});\nChipTabsTrigger.displayName = \"ChipTabsTrigger\";\n\nexport interface ChipTabsCarouselProps\n extends Omit {}\n\nexport const ChipTabsCarousel = (props: ChipTabsCarouselProps) => {\n const { children, ...otherProps } = props;\n return (\n \n {children} \n \n );\n};\nChipTabsCarousel.displayName = \"ChipTabsCarousel\";\n\nexport interface ChipTabsContentProps extends SeedChipTabs.ContentProps {}\n\nexport const ChipTabsContent = SeedChipTabs.Content;\n"
}
]
}
\ No newline at end of file
diff --git a/docs/public/__registry__/ui/help-bubble.json b/docs/public/__registry__/ui/help-bubble.json
index e888024fd..1f8f6ccfb 100644
--- a/docs/public/__registry__/ui/help-bubble.json
+++ b/docs/public/__registry__/ui/help-bubble.json
@@ -1,8 +1,7 @@
{
"name": "help-bubble",
"dependencies": [
- "@seed-design/react",
- "@radix-ui/react-slot"
+ "@seed-design/react"
],
"registries": [
{
diff --git a/docs/public/__registry__/ui/index.json b/docs/public/__registry__/ui/index.json
index 901f89411..f325f9353 100644
--- a/docs/public/__registry__/ui/index.json
+++ b/docs/public/__registry__/ui/index.json
@@ -225,8 +225,7 @@
{
"name": "help-bubble",
"dependencies": [
- "@seed-design/react",
- "@radix-ui/react-slot"
+ "@seed-design/react"
],
"files": [
"ui:help-bubble.tsx"
@@ -235,7 +234,7 @@
{
"name": "tabs",
"dependencies": [
- "@seed-design/react-tabs"
+ "@seed-design/react"
],
"files": [
"ui:tabs.tsx"
@@ -244,7 +243,7 @@
{
"name": "chip-tabs",
"dependencies": [
- "@seed-design/react-tabs"
+ "@seed-design/react"
],
"files": [
"ui:chip-tabs.tsx"
@@ -309,8 +308,7 @@
"name": "text-field",
"dependencies": [
"@seed-design/react",
- "@daangn/react-monochrome-icon",
- "@radix-ui/react-slot"
+ "@daangn/react-monochrome-icon"
],
"files": [
"ui:text-field.tsx"
diff --git a/docs/public/__registry__/ui/tabs.json b/docs/public/__registry__/ui/tabs.json
index 370b54df3..d18c67203 100644
--- a/docs/public/__registry__/ui/tabs.json
+++ b/docs/public/__registry__/ui/tabs.json
@@ -1,13 +1,13 @@
{
"name": "tabs",
"dependencies": [
- "@seed-design/react-tabs"
+ "@seed-design/react"
],
"registries": [
{
"name": "tabs.tsx",
"type": "ui",
- "content": "\"use client\";\n\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport {\n useTabs,\n useSwipeable,\n type UseTabsProps,\n type TriggerProps,\n type ContentProps,\n useLazyContents,\n type UseLazyContentsProps,\n} from \"@seed-design/react-tabs\";\nimport { tabs } from \"@seed-design/recipe/tabs\";\nimport { tab } from \"@seed-design/recipe/tab\";\n\ntype Assign = Omit & U;\n\ninterface TabsContextValue {\n api: ReturnType;\n classNames: ReturnType;\n shouldRender: (value: string) => boolean;\n\n /**\n * @default false\n */\n isSwipeable: boolean;\n\n layout: \"fill\" | \"hug\";\n size: \"small\" | \"medium\";\n onSwipeStart?: () => void;\n onSwipeEnd?: () => void;\n}\n\nconst TabsContext = React.createContext(null);\n\nconst useTabsContext = () => {\n const context = React.useContext(TabsContext);\n if (!context) {\n throw new Error(\"Tabs cannot be rendered outside the Tabs\");\n }\n return context;\n};\n\nexport interface TabsProps\n extends Omit,\n UseTabsProps {\n /**\n * @default \"hug\"\n */\n layout?: \"fill\" | \"hug\";\n\n /**\n * @default \"small\"\n */\n size?: \"small\" | \"medium\";\n\n /**\n * @default false\n */\n fixTriggerList?: boolean;\n}\n\ninterface ReactTabsProps\n extends Assign, UseTabsProps>,\n Omit,\n TabsProps {}\n\n/**\n * @see https://v3.seed-design.io/docs/react/components/tabs/tabs\n */\nexport const Tabs = React.forwardRef(\n (props, ref) => {\n const {\n className,\n lazyMode,\n isLazy,\n isSwipeable = false,\n layout = \"hug\",\n size = \"small\",\n fixTriggerList = false,\n onSwipeStart,\n onSwipeEnd,\n } = props;\n const useTabsProps = useTabs(props);\n const classNames = tabs({\n layout,\n size,\n fixTriggerList,\n });\n const { rootProps, value } = useTabsProps;\n const { shouldRender } = useLazyContents({\n currentValue: value ?? \"\",\n lazyMode,\n isLazy,\n });\n const api = {\n ...useTabsProps,\n };\n\n return (\n \n \n {props.children}\n \n \n );\n },\n);\nTabs.displayName = \"Tabs\";\n\nexport const TabTriggerList = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, children, ...otherProps }, ref) => {\n const { api, classNames } = useTabsContext();\n const { tabTriggerListProps, triggerSize } = api;\n const { left } = triggerSize;\n const { triggerList } = classNames;\n\n const containerRef = React.useRef(null);\n React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement);\n\n React.useEffect(() => {\n if (containerRef.current) {\n containerRef.current?.scrollTo({\n // NOTE: 27px is half of tab's min-width\n left: left - 27,\n behavior: \"smooth\",\n });\n }\n }, [left]);\n\n return (\n \n {children}\n ,\n TabTriggerProps\n > {}\n\nexport const TabTrigger = React.forwardRef<\n HTMLButtonElement,\n ReactTabTriggerProps\n>(\n (\n { className, children, value, isDisabled, alert = false, ...otherProps },\n ref,\n ) => {\n const { api, layout, size } = useTabsContext();\n const { getTabTriggerProps } = api;\n const { label, notification, root } = tab({\n size,\n layout,\n });\n const { rootProps, notificationProps, labelProps } = getTabTriggerProps({\n value,\n isDisabled,\n });\n\n return (\n {\n rootProps.onClick?.(e);\n otherProps.onClick?.(e);\n }}\n >\n \n {children}\n {alert &&
}\n \n \n );\n },\n);\nTabTrigger.displayName = \"TabTrigger\";\n\nexport const TabContentList = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, children, ...otherProps }, ref) => {\n const { api, classNames, isSwipeable, onSwipeStart, onSwipeEnd } =\n useTabsContext();\n const {\n tabContentListProps,\n tabContentCameraProps,\n currentTabEnabledIndex,\n tabEnabledCount,\n moveNext,\n movePrev,\n } = api;\n const { contentList, contentCamera } = classNames;\n const { dragProps, swipeMoveX, swipeStatus } = useSwipeable({\n isSwipeable,\n onSwipeLeftToRight: movePrev,\n onSwipeRightToLeft: moveNext,\n onSwipeStart,\n onSwipeEnd,\n });\n\n const getCameraTranslateX = () => {\n const MODIFIER = 5;\n\n const isSide =\n currentTabEnabledIndex === 0 ||\n currentTabEnabledIndex === tabEnabledCount - 1;\n const swipeOffset = isSide ? swipeMoveX / MODIFIER : swipeMoveX;\n\n return `calc(var(--seed-design-tabs-current-tab-enabled-index) * var(--seed-design-tabs-tab-camera-width) * -1px + ${swipeOffset}px)`;\n };\n\n return (\n \n \n {children}\n \n \n );\n});\nTabContentList.displayName = \"TabContentList\";\n\nexport const TabContent = React.forwardRef<\n HTMLDivElement,\n Assign, ContentProps>\n>(({ className, children, value, ...otherProps }, ref) => {\n const { api, classNames, shouldRender } = useTabsContext();\n const { getTabContentProps } = api;\n const { content } = classNames;\n const tabContentProps = getTabContentProps({ value });\n const isRender = shouldRender(value);\n\n return (\n \n {isRender && children}\n \n );\n});\nTabContent.displayName = \"TabContent\";\n\nconst TabIndicator = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...otherProps }, ref) => {\n const { api, classNames } = useTabsContext();\n const { tabIndicatorProps } = api;\n const { indicator } = classNames;\n\n return (\n (\n (props, ref) => {\n const { children, ...otherProps } = props;\n return (\n \n {children}\n \n );\n },\n);\nTabsRoot.displayName = \"TabsRoot\";\n\nexport interface TabsListProps extends SeedTabs.ListProps {}\n\nexport const TabsList = forwardRef(\n (props, ref) => {\n const { children, ...otherProps } = props;\n return (\n \n {children}\n \n );\n },\n);\nTabsList.displayName = \"TabsList\";\n\nexport interface TabsTriggerProps\n extends Omit {\n notification?: boolean;\n}\n\nexport const TabsTrigger = forwardRef(\n (props, ref) => {\n const { children, notification, ...otherProps } = props;\n return (\n \n \n {children}\n {notification && \n \n );\n },\n);\nTabsTrigger.displayName = \"TabsTrigger\";\n\nexport interface TabsCarouselProps\n extends Omit {}\n\nexport const TabsCarousel = (props: TabsCarouselProps) => {\n const { children, ...otherProps } = props;\n return (\n \n {children} \n \n );\n};\nTabsCarousel.displayName = \"TabsCarousel\";\n\nexport interface TabsContentProps extends SeedTabs.ContentProps {}\n\nexport const TabsContent = SeedTabs.Content;\n"
}
]
}
\ No newline at end of file
diff --git a/docs/public/__registry__/ui/text-field.json b/docs/public/__registry__/ui/text-field.json
index 7b9150957..cf873f02d 100644
--- a/docs/public/__registry__/ui/text-field.json
+++ b/docs/public/__registry__/ui/text-field.json
@@ -2,8 +2,7 @@
"name": "text-field",
"dependencies": [
"@seed-design/react",
- "@daangn/react-monochrome-icon",
- "@radix-ui/react-slot"
+ "@daangn/react-monochrome-icon"
],
"registries": [
{
diff --git a/docs/public/rootage-next/components/chip-tablist.json b/docs/public/rootage-next/components/chip-tablist.json
index f3c0a8f0a..bc014b83d 100644
--- a/docs/public/rootage-next/components/chip-tablist.json
+++ b/docs/public/rootage-next/components/chip-tablist.json
@@ -36,7 +36,7 @@
"enabled"
],
"slots": {
- "triggerList": {
+ "root": {
"gap": {
"type": "dimension",
"value": {
@@ -59,7 +59,7 @@
"enabled"
],
"slots": {
- "triggerList": {
+ "root": {
"gap": {
"type": "dimension",
"value": {
diff --git a/docs/public/rootage-next/components/tab.json b/docs/public/rootage-next/components/tab.json
index fec7ef261..952c8d470 100644
--- a/docs/public/rootage-next/components/tab.json
+++ b/docs/public/rootage-next/components/tab.json
@@ -102,6 +102,10 @@
"type": "dimension",
"value": "$font-size.s5"
},
+ "lineHeight": {
+ "type": "dimension",
+ "value": "$line-height.s5"
+ },
"fontWeight": {
"type": "number",
"value": "$font-weight.bold"
@@ -143,6 +147,10 @@
"type": "dimension",
"value": "$font-size.s4"
},
+ "lineHeight": {
+ "type": "dimension",
+ "value": "$line-height.s4"
+ },
"fontWeight": {
"type": "number",
"value": "$font-weight.bold"
diff --git a/docs/public/rootage-next/components/tablist.json b/docs/public/rootage-next/components/tablist.json
index cab9d7ae1..9bb4bd824 100644
--- a/docs/public/rootage-next/components/tablist.json
+++ b/docs/public/rootage-next/components/tablist.json
@@ -44,6 +44,14 @@
"color": {
"type": "color",
"value": "$color.fg.neutral"
+ },
+ "transformDuration": {
+ "type": "duration",
+ "value": "$duration.s4"
+ },
+ "transformTimingFunction": {
+ "type": "cubicBezier",
+ "value": "$timing-function.easing"
}
}
}
@@ -63,7 +71,16 @@
"root": {
"paddingX": {
"type": "dimension",
- "value": "$dimension.s4"
+ "value": "$dimension.spacing-x.global-gutter"
+ }
+ },
+ "indicator": {
+ "insetX": {
+ "type": "dimension",
+ "value": {
+ "value": 0,
+ "unit": "px"
+ }
}
}
}
@@ -88,6 +105,12 @@
"unit": "px"
}
}
+ },
+ "indicator": {
+ "insetX": {
+ "type": "dimension",
+ "value": "$dimension.spacing-x.global-gutter"
+ }
}
}
}
diff --git a/docs/public/rootage/components/chip-tablist.json b/docs/public/rootage/components/chip-tablist.json
index bb7cfba91..34ce6bf46 100644
--- a/docs/public/rootage/components/chip-tablist.json
+++ b/docs/public/rootage/components/chip-tablist.json
@@ -14,14 +14,14 @@
},
"variant=neutral solid": {
"enabled": {
- "triggerList": {
+ "root": {
"gap": "0px"
}
}
},
"variant=brand solid": {
"enabled": {
- "triggerList": {
+ "root": {
"gap": "8px"
}
}
diff --git a/docs/public/rootage/components/tab.json b/docs/public/rootage/components/tab.json
index a20186512..311aaa5fc 100644
--- a/docs/public/rootage/components/tab.json
+++ b/docs/public/rootage/components/tab.json
@@ -37,6 +37,7 @@
},
"label": {
"fontSize": "$font-size.s5",
+ "lineHeight": "$line-height.s5",
"fontWeight": "$font-weight.bold"
}
}
@@ -50,6 +51,7 @@
},
"label": {
"fontSize": "$font-size.s4",
+ "lineHeight": "$line-height.s4",
"fontWeight": "$font-weight.bold"
}
}
diff --git a/docs/public/rootage/components/tablist.json b/docs/public/rootage/components/tablist.json
index d5fde8f4b..44d8b9d78 100644
--- a/docs/public/rootage/components/tablist.json
+++ b/docs/public/rootage/components/tablist.json
@@ -14,14 +14,19 @@
},
"indicator": {
"height": "2px",
- "color": "$color.fg.neutral"
+ "color": "$color.fg.neutral",
+ "transformDuration": "$duration.s4",
+ "transformTimingFunction": "$timing-function.easing"
}
}
},
"layout=hug": {
"enabled": {
"root": {
- "paddingX": "$dimension.s4"
+ "paddingX": "$dimension.spacing-x.global-gutter"
+ },
+ "indicator": {
+ "insetX": "0px"
}
}
},
@@ -29,6 +34,9 @@
"enabled": {
"root": {
"paddingX": "0px"
+ },
+ "indicator": {
+ "insetX": "$dimension.spacing-x.global-gutter"
}
}
},
diff --git a/docs/public/rootage/parsed.json b/docs/public/rootage/parsed.json
index 79941a7f5..ec82d5441 100644
--- a/docs/public/rootage/parsed.json
+++ b/docs/public/rootage/parsed.json
@@ -14443,7 +14443,7 @@
],
"slot": [
{
- "key": "triggerList",
+ "key": "root",
"property": [
{
"key": "gap",
@@ -14470,7 +14470,7 @@
],
"slot": [
{
- "key": "triggerList",
+ "key": "root",
"property": [
{
"key": "gap",
@@ -22067,6 +22067,16 @@
"key": "s5"
}
},
+ {
+ "key": "lineHeight",
+ "value": {
+ "type": "token",
+ "group": [
+ "line-height"
+ ],
+ "key": "s5"
+ }
+ },
{
"key": "fontWeight",
"value": {
@@ -22139,6 +22149,16 @@
"key": "s4"
}
},
+ {
+ "key": "lineHeight",
+ "value": {
+ "type": "token",
+ "group": [
+ "line-height"
+ ],
+ "key": "s4"
+ }
+ },
{
"key": "fontWeight",
"value": {
@@ -22225,6 +22245,26 @@
],
"key": "neutral"
}
+ },
+ {
+ "key": "transformDuration",
+ "value": {
+ "type": "token",
+ "group": [
+ "duration"
+ ],
+ "key": "s4"
+ }
+ },
+ {
+ "key": "transformTimingFunction",
+ "value": {
+ "type": "token",
+ "group": [
+ "timing-function"
+ ],
+ "key": "easing"
+ }
}
]
}
@@ -22250,9 +22290,23 @@
"value": {
"type": "token",
"group": [
- "dimension"
+ "dimension",
+ "spacing-x"
],
- "key": "s4"
+ "key": "global-gutter"
+ }
+ }
+ ]
+ },
+ {
+ "key": "indicator",
+ "property": [
+ {
+ "key": "insetX",
+ "value": {
+ "type": "dimension",
+ "value": 0,
+ "unit": "px"
}
}
]
@@ -22283,6 +22337,22 @@
}
}
]
+ },
+ {
+ "key": "indicator",
+ "property": [
+ {
+ "key": "insetX",
+ "value": {
+ "type": "token",
+ "group": [
+ "dimension",
+ "spacing-x"
+ ],
+ "key": "global-gutter"
+ }
+ }
+ ]
}
]
}
diff --git a/docs/registry/registry-ui.ts b/docs/registry/registry-ui.ts
index c9ddbf62c..fccd78b69 100644
--- a/docs/registry/registry-ui.ts
+++ b/docs/registry/registry-ui.ts
@@ -122,19 +122,17 @@ export const registryUI: RegistryUI = [
},
{
name: "help-bubble",
- dependencies: ["@seed-design/react", "@radix-ui/react-slot"],
+ dependencies: ["@seed-design/react"],
files: ["ui:help-bubble.tsx"],
},
{
name: "tabs",
- // TODO: 탭 코드 수정 후 `@seed-design/react`로 변경
- dependencies: ["@seed-design/react-tabs"],
+ dependencies: ["@seed-design/react"],
files: ["ui:tabs.tsx"],
},
{
name: "chip-tabs",
- // TODO: 탭 코드 수정 후 `@seed-design/react`로 변경
- dependencies: ["@seed-design/react-tabs"],
+ dependencies: ["@seed-design/react"],
files: ["ui:chip-tabs.tsx"],
},
{
@@ -169,11 +167,7 @@ export const registryUI: RegistryUI = [
},
{
name: "text-field",
- dependencies: [
- "@seed-design/react",
- "@daangn/react-monochrome-icon",
- "@radix-ui/react-slot",
- ],
+ dependencies: ["@seed-design/react", "@daangn/react-monochrome-icon"],
files: ["ui:text-field.tsx"],
},
];
diff --git a/docs/registry/ui/chip-tabs.tsx b/docs/registry/ui/chip-tabs.tsx
index a87c561b4..c6e0f30be 100644
--- a/docs/registry/ui/chip-tabs.tsx
+++ b/docs/registry/ui/chip-tabs.tsx
@@ -1,168 +1,57 @@
"use client";
-import {
- useLazyContents,
- useTabs,
- type ContentProps,
- type TriggerProps,
- type UseLazyContentsProps,
- type UseTabsProps,
-} from "@seed-design/react-tabs";
-import { chipTab } from "@seed-design/recipe/chipTab";
-import { type ChipTabsVariant, chipTabs } from "@seed-design/recipe/chipTabs";
-import clsx from "clsx";
-import * as React from "react";
+import { ChipTabs as SeedChipTabs } from "@seed-design/react";
+import { forwardRef } from "react";
-type Assign = Omit & U;
+export interface ChipTabsRootProps extends SeedChipTabs.RootProps {}
-interface ChipTabsContextValue {
- api: ReturnType;
- classNames: ReturnType;
- shouldRender: (value: string) => boolean;
- variant: ChipTabsVariant["variant"];
-}
-
-const ChipTabsContext = React.createContext(null);
-
-const useChipTabsContext = () => {
- const context = React.useContext(ChipTabsContext);
- if (!context) {
- throw new Error("Tabs cannot be rendered outside the Tabs");
- }
- return context;
-};
-
-export interface ChipTabsProps
- extends Assign<
- React.HTMLAttributes,
- Omit
- >,
- ChipTabsVariant,
- Omit {}
-
-/**
- * @see https://v3.seed-design.io/docs/react/components/tabs/chip-tabs
- */
-export const ChipTabs = React.forwardRef(
+export const ChipTabsRoot = forwardRef(
(props, ref) => {
- const { className, lazyMode, isLazy, variant } = props;
- const api = useTabs(props);
- const classNames = chipTabs({
- variant,
- });
- const { rootProps, value, restProps } = api;
- const { shouldRender } = useLazyContents({
- currentValue: value ?? "",
- lazyMode,
- isLazy,
- });
-
+ const { children, ...otherProps } = props;
return (
-
-
- {props.children}
-
-
+
+ {children}
+
);
},
);
-ChipTabs.displayName = "ChipTabs";
+ChipTabsRoot.displayName = "ChipTabsRoot";
-export const ChipTabTriggerList = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, children, ...otherProps }, ref) => {
- const { api, classNames } = useChipTabsContext();
- const { tabTriggerListProps, triggerSize } = api;
- const { left } = triggerSize;
- const { triggerList } = classNames;
+export interface ChipTabsListProps extends SeedChipTabs.ListProps {}
- const containerRef = React.useRef(null);
- React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement);
+export const ChipTabsList = SeedChipTabs.List;
- React.useEffect(() => {
- if (containerRef.current) {
- containerRef.current?.scrollTo({
- // NOTE: 27px is half of tab's min-width
- left: left - 27,
- behavior: "smooth",
- });
- }
- }, [left]);
+export interface ChipTabsTriggerProps
+ extends Omit {
+ notification?: boolean;
+}
+export const ChipTabsTrigger = forwardRef<
+ HTMLButtonElement,
+ ChipTabsTriggerProps
+>((props, ref) => {
+ const { children, notification, ...otherProps } = props;
return (
-
- {children}
-
+
+ {children}
+
);
});
-ChipTabTriggerList.displayName = "ChipTabTriggerList";
-
-export interface ChipTabTriggerProps
- extends Assign, TriggerProps> {}
+ChipTabsTrigger.displayName = "ChipTabsTrigger";
-export const ChipTabTrigger = React.forwardRef<
- HTMLButtonElement,
- ChipTabTriggerProps
->(({ className, children, value, isDisabled, ...otherProps }, ref) => {
- const { api, variant } = useChipTabsContext();
- const { getTabTriggerProps } = api;
- const { label, root } = chipTab({
- variant,
- });
- const { rootProps, labelProps } = getTabTriggerProps({ value, isDisabled });
+export interface ChipTabsCarouselProps
+ extends Omit {}
+export const ChipTabsCarousel = (props: ChipTabsCarouselProps) => {
+ const { children, ...otherProps } = props;
return (
-
-
- {children}
-
-
+
+ {children}
+
);
-});
-ChipTabTrigger.displayName = "ChipTabTrigger";
+};
+ChipTabsCarousel.displayName = "ChipTabsCarousel";
-export const ChipTabContent = React.forwardRef<
- HTMLDivElement,
- Assign, ContentProps>
->(({ className, children, value, ...otherProps }, ref) => {
- const { api, classNames, shouldRender } = useChipTabsContext();
- const { getTabContentProps } = api;
- const { content } = classNames;
- const tabContentProps = getTabContentProps({ value });
- const isRender = shouldRender(value);
+export interface ChipTabsContentProps extends SeedChipTabs.ContentProps {}
- return (
-
- {isRender && children}
-
- );
-});
-ChipTabContent.displayName = "ChipTabContent";
+export const ChipTabsContent = SeedChipTabs.Content;
diff --git a/docs/registry/ui/tabs.tsx b/docs/registry/ui/tabs.tsx
index 055d9cae7..ea51e0707 100644
--- a/docs/registry/ui/tabs.tsx
+++ b/docs/registry/ui/tabs.tsx
@@ -1,328 +1,70 @@
"use client";
-import clsx from "clsx";
-import * as React from "react";
-import {
- useTabs,
- useSwipeable,
- type UseTabsProps,
- type TriggerProps,
- type ContentProps,
- useLazyContents,
- type UseLazyContentsProps,
-} from "@seed-design/react-tabs";
-import { tabs } from "@seed-design/recipe/tabs";
-import { tab } from "@seed-design/recipe/tab";
+import { Tabs as SeedTabs } from "@seed-design/react";
+import { forwardRef } from "react";
-type Assign = Omit & U;
+export interface TabsRootProps extends SeedTabs.RootProps {}
-interface TabsContextValue {
- api: ReturnType;
- classNames: ReturnType;
- shouldRender: (value: string) => boolean;
-
- /**
- * @default false
- */
- isSwipeable: boolean;
-
- layout: "fill" | "hug";
- size: "small" | "medium";
- onSwipeStart?: () => void;
- onSwipeEnd?: () => void;
-}
-
-const TabsContext = React.createContext(null);
-
-const useTabsContext = () => {
- const context = React.useContext(TabsContext);
- if (!context) {
- throw new Error("Tabs cannot be rendered outside the Tabs");
- }
- return context;
-};
-
-export interface TabsProps
- extends Omit,
- UseTabsProps {
- /**
- * @default "hug"
- */
- layout?: "fill" | "hug";
-
- /**
- * @default "small"
- */
- size?: "small" | "medium";
-
- /**
- * @default false
- */
- fixTriggerList?: boolean;
-}
-
-interface ReactTabsProps
- extends Assign, UseTabsProps>,
- Omit,
- TabsProps {}
-
-/**
- * @see https://v3.seed-design.io/docs/react/components/tabs/tabs
- */
-export const Tabs = React.forwardRef(
+export const TabsRoot = forwardRef(
(props, ref) => {
- const {
- className,
- lazyMode,
- isLazy,
- isSwipeable = false,
- layout = "hug",
- size = "small",
- fixTriggerList = false,
- onSwipeStart,
- onSwipeEnd,
- } = props;
- const useTabsProps = useTabs(props);
- const classNames = tabs({
- layout,
- size,
- fixTriggerList,
- });
- const { rootProps, value } = useTabsProps;
- const { shouldRender } = useLazyContents({
- currentValue: value ?? "",
- lazyMode,
- isLazy,
- });
- const api = {
- ...useTabsProps,
- };
-
+ const { children, ...otherProps } = props;
return (
-
-
- {props.children}
-
-
+
+ {children}
+
);
},
);
-Tabs.displayName = "Tabs";
-
-export const TabTriggerList = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, children, ...otherProps }, ref) => {
- const { api, classNames } = useTabsContext();
- const { tabTriggerListProps, triggerSize } = api;
- const { left } = triggerSize;
- const { triggerList } = classNames;
-
- const containerRef = React.useRef(null);
- React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement);
-
- React.useEffect(() => {
- if (containerRef.current) {
- containerRef.current?.scrollTo({
- // NOTE: 27px is half of tab's min-width
- left: left - 27,
- behavior: "smooth",
- });
- }
- }, [left]);
-
- return (
-
- {children}
-
- );
-});
-TabTriggerList.displayName = "TabTriggerList";
+TabsRoot.displayName = "TabsRoot";
-export interface TabTriggerProps extends TriggerProps {
- /**
- * @default false
- */
- alert?: boolean;
+export interface TabsListProps extends SeedTabs.ListProps {}
- isDisabled?: boolean;
+export const TabsList = forwardRef(
+ (props, ref) => {
+ const { children, ...otherProps } = props;
+ return (
+
+ {children}
+
+ );
+ },
+);
+TabsList.displayName = "TabsList";
- value: string;
+export interface TabsTriggerProps
+ extends Omit {
+ notification?: boolean;
}
-interface ReactTabTriggerProps
- extends Assign<
- React.ButtonHTMLAttributes,
- TabTriggerProps
- > {}
-
-export const TabTrigger = React.forwardRef<
- HTMLButtonElement,
- ReactTabTriggerProps
->(
- (
- { className, children, value, isDisabled, alert = false, ...otherProps },
- ref,
- ) => {
- const { api, layout, size } = useTabsContext();
- const { getTabTriggerProps } = api;
- const { label, notification, root } = tab({
- size,
- layout,
- });
- const { rootProps, notificationProps, labelProps } = getTabTriggerProps({
- value,
- isDisabled,
- });
-
+export const TabsTrigger = forwardRef(
+ (props, ref) => {
+ const { children, notification, ...otherProps } = props;
return (
- {
- rootProps.onClick?.(e);
- otherProps.onClick?.(e);
- }}
- >
-
+
+
{children}
- {alert &&
}
-
-
+ {notification &&
->(({ className, children, ...otherProps }, ref) => {
- const { api, classNames, isSwipeable, onSwipeStart, onSwipeEnd } =
- useTabsContext();
- const {
- tabContentListProps,
- tabContentCameraProps,
- currentTabEnabledIndex,
- tabEnabledCount,
- moveNext,
- movePrev,
- } = api;
- const { contentList, contentCamera } = classNames;
- const { dragProps, swipeMoveX, swipeStatus } = useSwipeable({
- isSwipeable,
- onSwipeLeftToRight: movePrev,
- onSwipeRightToLeft: moveNext,
- onSwipeStart,
- onSwipeEnd,
- });
+TabsTrigger.displayName = "TabsTrigger";
- const getCameraTranslateX = () => {
- const MODIFIER = 5;
-
- const isSide =
- currentTabEnabledIndex === 0 ||
- currentTabEnabledIndex === tabEnabledCount - 1;
- const swipeOffset = isSide ? swipeMoveX / MODIFIER : swipeMoveX;
-
- return `calc(var(--seed-design-tabs-current-tab-enabled-index) * var(--seed-design-tabs-tab-camera-width) * -1px + ${swipeOffset}px)`;
- };
-
- return (
-
- );
-});
-TabContentList.displayName = "TabContentList";
-
-export const TabContent = React.forwardRef<
- HTMLDivElement,
- Assign, ContentProps>
->(({ className, children, value, ...otherProps }, ref) => {
- const { api, classNames, shouldRender } = useTabsContext();
- const { getTabContentProps } = api;
- const { content } = classNames;
- const tabContentProps = getTabContentProps({ value });
- const isRender = shouldRender(value);
+export interface TabsCarouselProps
+ extends Omit {}
+export const TabsCarousel = (props: TabsCarouselProps) => {
+ const { children, ...otherProps } = props;
return (
-
- {isRender && children}
-
+
+ {children}
+
);
-});
-TabContent.displayName = "TabContent";
+};
+TabsCarousel.displayName = "TabsCarousel";
-const TabIndicator = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...otherProps }, ref) => {
- const { api, classNames } = useTabsContext();
- const { tabIndicatorProps } = api;
- const { indicator } = classNames;
+export interface TabsContentProps extends SeedTabs.ContentProps {}
- return (
-
- );
-});
-TabIndicator.displayName = "TabIndicator";
+export const TabsContent = SeedTabs.Content;
diff --git a/docs/stories/ChipTabs.stories.tsx b/docs/stories/ChipTabs.stories.tsx
index e70a74291..0f1d169b7 100644
--- a/docs/stories/ChipTabs.stories.tsx
+++ b/docs/stories/ChipTabs.stories.tsx
@@ -1,11 +1,6 @@
import type { Meta, StoryObj } from "@storybook/react";
-import {
- ChipTabs,
- ChipTabsProps,
- ChipTabTrigger,
- ChipTabTriggerList,
-} from "seed-design/ui/chip-tabs";
+import { ChipTabs, ChipTabsProps, ChipTabsTrigger, ChipTabsList } from "seed-design/ui/chip-tabs";
import { chipTabsVariantMap } from "@seed-design/recipe/chipTabs";
import { SeedThemeDecorator } from "./components/decorator";
@@ -15,11 +10,11 @@ import { createStoryWithParameters } from "@/stories/utils/parameters";
const Component = (props: ChipTabsProps) => {
return (
-
- Tab 1
- Tab 2
- Tab 3
-
+
+ Tab 1
+ Tab 2
+ Tab 3
+
);
};
diff --git a/examples/stackflow-spa/src/activities/ActivityAnimatedTabs.tsx b/examples/stackflow-spa/src/activities/ActivityAnimatedTabs.tsx
new file mode 100644
index 000000000..f161b185c
--- /dev/null
+++ b/examples/stackflow-spa/src/activities/ActivityAnimatedTabs.tsx
@@ -0,0 +1,56 @@
+import { Box } from "@seed-design/react";
+import type { ActivityComponentType } from "@stackflow/react";
+import {
+ AppBar,
+ AppBarBackButton,
+ AppBarLeft,
+ AppBarMain,
+} from "../design-system/stackflow/AppBar";
+import { AppScreen, AppScreenContent } from "../design-system/stackflow/AppScreen";
+import {
+ TabsCarousel,
+ TabsContent,
+ TabsList,
+ TabsRoot,
+ TabsTrigger,
+} from "../design-system/ui/tabs";
+
+const ActivityAnimatedTabs: ActivityComponentType = () => {
+ return (
+
+
+
+
+
+
+
+
+ Tab 1
+
+ Disabled
+
+
+ Tab 2
+
+
+
+
+
+ Tab 1 content
+
+
+
+
+ Tab 2 content
+
+
+
+
+
+
+ );
+};
+
+export default ActivityAnimatedTabs;
diff --git a/examples/stackflow-spa/src/activities/ActivityHome.tsx b/examples/stackflow-spa/src/activities/ActivityHome.tsx
index cdc7bda89..22a5c8796 100644
--- a/examples/stackflow-spa/src/activities/ActivityHome.tsx
+++ b/examples/stackflow-spa/src/activities/ActivityHome.tsx
@@ -154,6 +154,37 @@ const ActivityHome: ActivityComponentType = () => {
title="Snackbar (critical)"
/>
+
+ snackbarAdapter.create({
+ render: () =>
+ snackbarAdapter.create({
+ render: () => (
+
+ snackbarAdapter.create({
+ render: () => (
+ push("ActivityTabs", {})} title="Tabs" />
+ push("ActivityAnimatedTabs", {})} title="AnimatedTabs" />
+ push("ActivitySwipeableTabs", {})} title="SwipeableTabs" />
diff --git a/examples/stackflow-spa/src/activities/ActivitySwipeableTabs.tsx b/examples/stackflow-spa/src/activities/ActivitySwipeableTabs.tsx
new file mode 100644
index 000000000..d3e3c5199
--- /dev/null
+++ b/examples/stackflow-spa/src/activities/ActivitySwipeableTabs.tsx
@@ -0,0 +1,115 @@
+import { Inline, PullToRefresh, Stack, Text } from "@seed-design/react";
+import type { ActivityComponentType } from "@stackflow/react";
+import {
+ AppBar,
+ AppBarBackButton,
+ AppBarLeft,
+ AppBarMain,
+} from "../design-system/stackflow/AppBar";
+import { AppScreen, AppScreenContent } from "../design-system/stackflow/AppScreen";
+import { ProgressCircle } from "../design-system/ui/progress-circle";
+import {
+ TabsCarousel,
+ TabsContent,
+ TabsList,
+ TabsRoot,
+ TabsTrigger,
+} from "../design-system/ui/tabs";
+
+const ActivitySwipeableTabs: ActivityComponentType = () => {
+ return (
+
+
+
+
+
+
+
+
+ Tab 1
+
+ Disabled
+
+
+ Tab 2
+
+
+
+
+ {
+ await new Promise((resolve) => setTimeout(resolve, 1000));
+ }}
+ >
+
+ {(props) =>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+const Feed = () => {
+ return (
+
+
+
+
+ 독서 습관 만들기
+
+
+ 하루 10페이지부터 시작하자. 취침 전 20분 독서는 수면의 질도 높여주는 일석이조 습관이다.
+
+
+
+
+ 라이프스타일 ⸱ 서초2동
+
+
+
+
+ );
+};
+
+export default ActivitySwipeableTabs;
diff --git a/examples/stackflow-spa/src/activities/ActivityTabs.tsx b/examples/stackflow-spa/src/activities/ActivityTabs.tsx
new file mode 100644
index 000000000..b28392653
--- /dev/null
+++ b/examples/stackflow-spa/src/activities/ActivityTabs.tsx
@@ -0,0 +1,61 @@
+import { Box } from "@seed-design/react";
+import type { ActivityComponentType } from "@stackflow/react";
+import { useEffect, useState } from "react";
+import {
+ AppBar,
+ AppBarBackButton,
+ AppBarLeft,
+ AppBarMain,
+} from "../design-system/stackflow/AppBar";
+import { AppScreen, AppScreenContent } from "../design-system/stackflow/AppScreen";
+import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "../design-system/ui/tabs";
+
+const ActivityTabs: ActivityComponentType = () => {
+ return (
+
+
+
+
+
+
+
+
Sticky Tablist
+
+
+ Tab 1
+ Tab 2
+
+
+
+ Tab 1 content
+
+
+
+
+
+ Tab 2 content
+
+
+
+
+
+
+ );
+};
+
+const AsyncContent = (props: { children: React.ReactNode }) => {
+ const [loaded, setLoaded] = useState(false);
+
+ useEffect(() => {
+ setTimeout(() => {
+ setLoaded(true);
+ }, 1000);
+ }, []);
+
+ return loaded ? <>{props.children} : Loading...
;
+};
+
+export default ActivityTabs;
diff --git a/examples/stackflow-spa/src/design-system/ui/tabs.tsx b/examples/stackflow-spa/src/design-system/ui/tabs.tsx
new file mode 100644
index 000000000..f96c219d2
--- /dev/null
+++ b/examples/stackflow-spa/src/design-system/ui/tabs.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import { Tabs as SeedTabs } from "@seed-design/react";
+import { forwardRef } from "react";
+
+export interface TabsRootProps extends SeedTabs.RootProps {}
+
+export const TabsRoot = forwardRef((props, ref) => {
+ const { children, ...otherProps } = props;
+ return (
+
+ {children}
+
+ );
+});
+TabsRoot.displayName = "TabsRoot";
+
+export interface TabsListProps extends SeedTabs.ListProps {}
+
+export const TabsList = forwardRef((props, ref) => {
+ const { children, ...otherProps } = props;
+ return (
+
+ {children}
+
+ );
+});
+TabsList.displayName = "TabsList";
+
+export interface TabsTriggerProps extends Omit {
+ notification?: boolean;
+}
+
+export const TabsTrigger = forwardRef((props, ref) => {
+ const { children, notification, ...otherProps } = props;
+ return (
+
+
+ {children}
+ {notification &&
+
+ );
+});
+TabsTrigger.displayName = "TabsTrigger";
+
+export interface TabsCarouselProps extends Omit {}
+
+export const TabsCarousel = (props: TabsCarouselProps) => {
+ const { children, ...otherProps } = props;
+ return (
+
+ {children}
+
+ );
+};
+TabsCarousel.displayName = "TabsCarousel";
+
+export interface TabsContentProps extends SeedTabs.ContentProps {}
+
+export const TabsContent = SeedTabs.Content;
diff --git a/examples/stackflow-spa/src/stackflow/Stack.tsx b/examples/stackflow-spa/src/stackflow/Stack.tsx
index 5beeaa2c9..52305fbbf 100644
--- a/examples/stackflow-spa/src/stackflow/Stack.tsx
+++ b/examples/stackflow-spa/src/stackflow/Stack.tsx
@@ -40,6 +40,9 @@ const { Stack, useFlow, useStepFlow } = stackflow({
ActivityErrorState: React.lazy(() => import("../activities/ActivityErrorState")),
ActivityFab: React.lazy(() => import("../activities/ActivityFab")),
ActivityExtendedFab: React.lazy(() => import("../activities/ActivityExtendedFab")),
+ ActivityTabs: React.lazy(() => import("../activities/ActivityTabs")),
+ ActivityAnimatedTabs: React.lazy(() => import("../activities/ActivityAnimatedTabs")),
+ ActivitySwipeableTabs: React.lazy(() => import("../activities/ActivitySwipeableTabs")),
ActivityNotFound,
},
plugins: [
@@ -82,6 +85,9 @@ const { Stack, useFlow, useStepFlow } = stackflow({
ActivityFab: "/fab",
ActivityExtendedFab: "/extended-fab",
ActivityReactionButton: "/reaction-button",
+ ActivityTabs: "/tabs",
+ ActivitySwipeableTabs: "/swipeable-tabs",
+ ActivityAnimatedTabs: "/animated-tabs",
ActivityNotFound: "/404",
},
}),
diff --git a/packages/qvism-preset/src/index.ts b/packages/qvism-preset/src/index.ts
index dd58e7598..b77ff1cae 100644
--- a/packages/qvism-preset/src/index.ts
+++ b/packages/qvism-preset/src/index.ts
@@ -9,7 +9,6 @@ import badge from "./recipes/badge";
import bottomSheet from "./recipes/bottom-sheet";
import callout from "./recipes/callout";
import checkbox from "./recipes/checkbox";
-import chipTab from "./recipes/chip-tab";
import chipTabs from "./recipes/chip-tabs";
import controlChip from "./recipes/control-chip";
import dialog from "./recipes/dialog";
@@ -31,7 +30,6 @@ import { selectBox, selectBoxGroup } from "./recipes/select-box";
import skeleton from "./recipes/skeleton";
import { snackbar, snackbarRegion } from "./recipes/snackbar";
import switchRecipe from "./recipes/switch";
-import tab from "./recipes/tab";
import tabs from "./recipes/tabs";
import text from "./recipes/text";
import textButton from "./recipes/text-button";
@@ -40,7 +38,6 @@ import toggleButton from "./recipes/toggle-button";
import visuallyHidden from "./recipes/visually-hidden";
import { appBar, appBarMain } from "./stackflow/app-bar";
import { appScreen } from "./stackflow/app-screen";
-
const recipes = {
avatar,
avatarStack,
@@ -72,9 +69,7 @@ const recipes = {
identityPlaceholder,
inlineBanner,
progressCircle,
- tab,
tabs,
- chipTab,
chipTabs,
skeleton,
snackbar,
diff --git a/packages/qvism-preset/src/recipes/chip-tab.ts b/packages/qvism-preset/src/recipes/chip-tab.ts
deleted file mode 100644
index cc942f81a..000000000
--- a/packages/qvism-preset/src/recipes/chip-tab.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-import { chipTab as vars } from "@seed-design/vars/component";
-import { defineRecipe } from "../utils/define-recipe";
-import { pseudo, selected, active, disabled } from "../utils/pseudo";
-
-const chipTab = defineRecipe({
- name: "chipTab",
- slots: ["root", "label"],
- base: {
- root: {
- display: "flex",
- justifyContent: "center",
- alignItems: "center",
- padding: `${vars.base.enabled.root.paddingY} ${vars.base.enabled.root.paddingX}`,
- cursor: "pointer",
- border: "none",
- borderRadius: vars.base.enabled.root.cornerRadius,
- boxSizing: "border-box",
- whiteSpace: "nowrap",
- minHeight: vars.base.enabled.root.minHeight,
- fontFamily: "inherit",
- },
- label: {
- fontSize: vars.base.enabled.label.fontSize,
- fontWeight: vars.base.enabled.label.fontWeight,
- },
- },
- variants: {
- variant: {
- neutralSolid: {
- root: {
- [pseudo(selected)]: {
- backgroundColor: vars.variantNeutralSolid.selected.root.color,
- },
-
- [pseudo(active)]: {
- backgroundColor: vars.variantNeutralSolid.enabledPressed.root.color,
- },
-
- [pseudo(selected, active)]: {
- backgroundColor: vars.variantNeutralSolid.selectedPressed.root.color,
- },
-
- [pseudo(disabled)]: {
- cursor: "not-allowed",
- backgroundColor: undefined,
- },
-
- [pseudo(disabled, selected)]: {
- backgroundColor: vars.variantNeutralSolid.selectedDisabled.root.color,
- },
- },
-
- label: {
- color: vars.variantNeutralSolid.enabled.label.color,
- fontWeight: vars.base.enabled.label.fontWeight,
-
- [pseudo(selected)]: {
- color: vars.variantNeutralSolid.selected.label.color,
- },
-
- [pseudo(disabled)]: {
- color: vars.variantNeutralSolid.disabled.label.color,
- },
-
- [pseudo(disabled, selected)]: {
- color: vars.variantNeutralSolid.selectedDisabled.label.color,
- },
- },
- },
- brandSolid: {
- root: {
- fontWeight: vars.variantBrandSolid.enabled.label.fontWeight,
- backgroundColor: vars.variantBrandSolid.enabled.root.color,
-
- [pseudo(selected)]: {
- backgroundColor: vars.variantBrandSolid.selected.root.color,
- },
-
- [pseudo(active)]: {
- backgroundColor: vars.variantBrandSolid.enabledPressed.root.color,
- },
-
- [pseudo(selected, active)]: {
- backgroundColor: vars.variantBrandSolid.selectedPressed.root.color,
- },
-
- [pseudo(disabled)]: {
- cursor: "not-allowed",
- backgroundColor: vars.variantBrandSolid.disabled.root.color,
- },
-
- [pseudo(disabled, selected)]: {
- backgroundColor: vars.variantBrandSolid.selectedDisabled.root.color,
- },
- },
-
- label: {
- color: vars.variantBrandSolid.enabled.label.color,
- fontWeight: vars.variantBrandSolid.enabled.label.fontWeight,
-
- [pseudo(selected)]: {
- color: vars.variantBrandSolid.selected.label.color,
- fontWeight: vars.variantBrandSolid.selected.label.fontWeight,
- },
-
- [pseudo(disabled)]: {
- color: vars.variantBrandSolid.disabled.label.color,
- },
- },
- },
- },
- },
- defaultVariants: {
- variant: "neutralSolid",
- },
-});
-
-export default chipTab;
diff --git a/packages/qvism-preset/src/recipes/chip-tabs.ts b/packages/qvism-preset/src/recipes/chip-tabs.ts
index e098a0970..eaa688c1e 100644
--- a/packages/qvism-preset/src/recipes/chip-tabs.ts
+++ b/packages/qvism-preset/src/recipes/chip-tabs.ts
@@ -1,17 +1,18 @@
-import { chipTablist as vars } from "@seed-design/vars/component";
+import { chipTablist as vars, chipTab as triggerVars } from "@seed-design/vars/component";
import { defineRecipe } from "../utils/define-recipe";
+import { active, disabled, not, pseudo, selected } from "../utils/pseudo";
const chipTabs = defineRecipe({
name: "chipTabs",
- slots: ["root", "triggerList", "contentList", "contentCamera", "content"],
+ slots: ["root", "list", "carousel", "carouselCamera", "content", "trigger", "triggerLabel"],
base: {
root: {
- overflowX: "hidden",
- },
- triggerList: {
position: "relative",
+ },
+ list: {
display: "flex",
- flexDirection: "row",
+ position: "relative",
+ isolation: "isolate",
flexWrap: "nowrap",
alignItems: "stretch",
alignContent: "stretch",
@@ -26,35 +27,178 @@ const chipTabs = defineRecipe({
display: "none",
},
},
- contentList: {},
- contentCamera: {
+ carousel: {
+ display: "block",
+ overflow: "hidden",
+ },
+ carouselCamera: {
display: "flex",
- width: "100%",
- height: "100%",
+
+ [pseudo("[data-auto-height]")]: {
+ alignItems: "flex-start",
+ },
},
content: {
- width: "100%",
- height: "100%",
- flexShrink: 0,
- overflow: "auto",
+ flex: "0 0 100%",
+ minWidth: 0,
+ transform: "translate3d(0, 0, 0)",
+ overflowY: "auto",
+ overflowX: "hidden",
+
+ [pseudo(not("[data-carousel]"), not(selected))]: {
+ display: "none",
+ },
+ },
+
+ trigger: {
+ display: "flex",
+ justifyContent: "center",
+ alignItems: "center",
+ cursor: "pointer",
+ border: "none",
+ boxSizing: "border-box",
+ whiteSpace: "nowrap",
+ fontFamily: "inherit",
+
+ borderRadius: triggerVars.base.enabled.root.cornerRadius,
+ padding: `${triggerVars.base.enabled.root.paddingY} ${triggerVars.base.enabled.root.paddingX}`,
+ minHeight: triggerVars.base.enabled.root.minHeight,
+ },
+ triggerLabel: {
+ fontSize: triggerVars.base.enabled.label.fontSize,
+ fontWeight: triggerVars.base.enabled.label.fontWeight,
},
},
variants: {
variant: {
neutralSolid: {
- triggerList: {
- gap: vars.variantNeutralSolid.enabled.triggerList.gap,
+ list: {
+ gap: vars.variantNeutralSolid.enabled.root.gap,
+ },
+ trigger: {
+ [pseudo(selected)]: {
+ backgroundColor: triggerVars.variantNeutralSolid.selected.root.color,
+ },
+
+ [pseudo(active)]: {
+ backgroundColor: triggerVars.variantNeutralSolid.enabledPressed.root.color,
+ },
+
+ [pseudo(selected, active)]: {
+ backgroundColor: triggerVars.variantNeutralSolid.selectedPressed.root.color,
+ },
+
+ [pseudo(disabled)]: {
+ cursor: "not-allowed",
+ backgroundColor: undefined,
+ },
+
+ [pseudo(disabled, selected)]: {
+ backgroundColor: triggerVars.variantNeutralSolid.selectedDisabled.root.color,
+ },
+ },
+
+ triggerLabel: {
+ color: triggerVars.variantNeutralSolid.enabled.label.color,
+ fontWeight: triggerVars.base.enabled.label.fontWeight,
+
+ [pseudo(selected)]: {
+ color: triggerVars.variantNeutralSolid.selected.label.color,
+ },
+
+ [pseudo(disabled)]: {
+ color: triggerVars.variantNeutralSolid.disabled.label.color,
+ },
+
+ [pseudo(disabled, selected)]: {
+ color: triggerVars.variantNeutralSolid.selectedDisabled.label.color,
+ },
},
},
brandSolid: {
- triggerList: {
- gap: vars.variantBrandSolid.enabled.triggerList.gap,
+ list: {
+ gap: vars.variantBrandSolid.enabled.root.gap,
+ },
+ trigger: {
+ fontWeight: triggerVars.variantBrandSolid.enabled.label.fontWeight,
+ backgroundColor: triggerVars.variantBrandSolid.enabled.root.color,
+
+ [pseudo(selected)]: {
+ backgroundColor: triggerVars.variantBrandSolid.selected.root.color,
+ },
+
+ [pseudo(active)]: {
+ backgroundColor: triggerVars.variantBrandSolid.enabledPressed.root.color,
+ },
+
+ [pseudo(selected, active)]: {
+ backgroundColor: triggerVars.variantBrandSolid.selectedPressed.root.color,
+ },
+
+ [pseudo(disabled)]: {
+ cursor: "not-allowed",
+ backgroundColor: triggerVars.variantBrandSolid.disabled.root.color,
+ },
+
+ [pseudo(disabled, selected)]: {
+ backgroundColor: triggerVars.variantBrandSolid.selectedDisabled.root.color,
+ },
+ },
+
+ triggerLabel: {
+ color: triggerVars.variantBrandSolid.enabled.label.color,
+ fontWeight: triggerVars.variantBrandSolid.enabled.label.fontWeight,
+
+ [pseudo(selected)]: {
+ color: triggerVars.variantBrandSolid.selected.label.color,
+ fontWeight: triggerVars.variantBrandSolid.selected.label.fontWeight,
+ },
+
+ [pseudo(disabled)]: {
+ color: triggerVars.variantBrandSolid.disabled.label.color,
+ },
+ },
+ },
+ },
+ contentLayout: {
+ fill: {
+ root: {
+ display: "flex",
+ flexDirection: "column",
+ height: "100%",
+ },
+ carousel: {
+ flex: 1,
+ },
+ carouselCamera: {
+ height: "100%",
+ alignItems: "stretch",
+ },
+ },
+ hug: {
+ root: {
+ display: "block",
+ },
+ },
+ },
+ stickyList: {
+ true: {
+ root: {
+ position: "relative",
+ },
+ list: {
+ position: "sticky",
+ top: 0,
+ zIndex: 1,
},
},
+ false: {},
},
},
defaultVariants: {
variant: "neutralSolid",
+ contentLayout: "hug",
+ stickyList: false,
},
});
diff --git a/packages/qvism-preset/src/recipes/tab.ts b/packages/qvism-preset/src/recipes/tab.ts
deleted file mode 100644
index 683c24602..000000000
--- a/packages/qvism-preset/src/recipes/tab.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import { tab as vars } from "@seed-design/vars/component";
-import { defineRecipe } from "../utils/define-recipe";
-import { disabled, pseudo, selected } from "../utils/pseudo";
-
-const tab = defineRecipe({
- name: "tab",
- slots: ["root", "label", "notification"],
- base: {
- root: {
- display: "flex",
- justifyContent: "center",
- alignItems: "flex-end",
- cursor: "pointer",
- border: "none",
- boxSizing: "border-box",
- backgroundColor: "transparent",
- whiteSpace: "nowrap",
- [pseudo(disabled)]: {
- cursor: "not-allowed",
- },
- },
- label: {
- position: "relative",
- color: vars.base.enabled.label.color,
- [pseudo(selected)]: {
- color: vars.base.selected.label.color,
- },
- [pseudo(disabled)]: {
- color: vars.base.disabled.label.color,
- },
- },
- notification: {
- position: "absolute",
- top: 0,
-
- /**
- * notification이 Tabs의 박스 사이즈에 잡히지 않도록 하기 위한 트릭
- * notification의 위치를 absolute로 잡아주고, right를 음수로 설정하여 박스 밖으로 나가게 함
- * 이때, 텍스트에서 marginLeft만큼 떨어진 위치에 위치해야하기 위해서는
- * 우선 notification의 size만큼 오른쪽으로 한번 이동하고 거기서 marginLeft만큼 오른쪽으로 이동해야함
- * 그래서 아래와 같은 식이 나옴
- */
- right: `calc(-1 * ${vars.base.enabled.notification.size} - ${vars.base.enabled.notification.marginLeft})`,
-
- alignSelf: "flex-start",
- backgroundColor: vars.base.enabled.notification.color,
- width: vars.base.enabled.notification.size,
- height: vars.base.enabled.notification.size,
- borderRadius: vars.base.enabled.notification.cornerRadius,
- },
- },
- variants: {
- layout: {
- fill: {
- root: {
- flex: 1,
- },
- },
- hug: {},
- },
- size: {
- medium: {
- root: {
- minHeight: vars.sizeMedium.enabled.root.minHeight,
- paddingInline: vars.sizeMedium.enabled.root.paddingX,
- paddingBlock: vars.sizeMedium.enabled.root.paddingY,
- },
- label: {
- fontSize: vars.sizeMedium.enabled.label.fontSize,
- fontWeight: vars.sizeMedium.enabled.label.fontWeight,
- },
- },
- small: {
- root: {
- minHeight: vars.sizeSmall.enabled.root.minHeight,
- paddingInline: vars.sizeSmall.enabled.root.paddingX,
- paddingBlock: vars.sizeSmall.enabled.root.paddingY,
- },
- label: {
- fontSize: vars.sizeSmall.enabled.label.fontSize,
- fontWeight: vars.sizeSmall.enabled.label.fontWeight,
- },
- },
- },
- },
- defaultVariants: {
- size: "medium",
- layout: "hug",
- },
-});
-
-export default tab;
diff --git a/packages/qvism-preset/src/recipes/tabs.ts b/packages/qvism-preset/src/recipes/tabs.ts
index 0ef8252cf..9128caffb 100644
--- a/packages/qvism-preset/src/recipes/tabs.ts
+++ b/packages/qvism-preset/src/recipes/tabs.ts
@@ -1,17 +1,28 @@
-import { tablist as vars } from "@seed-design/vars/component";
+import { tablist as vars, tab as triggerVars } from "@seed-design/vars/component";
import { defineRecipe } from "../utils/define-recipe";
+import { disabled, not, pseudo, selected } from "../utils/pseudo";
const tabs = defineRecipe({
name: "tabs",
- slots: ["root", "triggerList", "contentList", "contentCamera", "content", "indicator"],
+ slots: [
+ "root",
+ "list",
+ "carousel",
+ "carouselCamera",
+ "content",
+ "indicator",
+ "trigger",
+ "triggerLabel",
+ "triggerNotification",
+ ],
base: {
root: {
- overflow: "hidden",
- },
- triggerList: {
position: "relative",
+ },
+ list: {
display: "flex",
- flexDirection: "row",
+ position: "relative",
+ isolation: "isolate",
flexWrap: "nowrap",
alignItems: "stretch",
alignContent: "stretch",
@@ -19,102 +30,211 @@ const tabs = defineRecipe({
overflowX: "auto",
msOverflowStyle: "none",
scrollbarWidth: "none",
-
- background: vars.base.enabled.root.color,
- borderBottom: `${vars.base.enabled.root.strokeBottomWidth} solid ${vars.base.enabled.root.strokeColor}`,
-
"&::-webkit-scrollbar": {
display: "none",
},
+
+ background: vars.base.enabled.root.color,
+ // use inset boxShadow instead of border to avoid layout shift
+ boxShadow: `inset 0 -${vars.base.enabled.root.strokeBottomWidth} ${vars.base.enabled.root.strokeColor}`,
},
- contentList: {
- width: "100%",
+ carousel: {
+ display: "block",
+ overflow: "hidden",
},
- contentCamera: {
+ carouselCamera: {
display: "flex",
- width: "100%",
- height: "100%",
+
+ [pseudo("[data-auto-height]")]: {
+ alignItems: "flex-start",
+ },
},
content: {
- width: "100%",
- height: "100%",
- flexShrink: 0,
+ flex: "0 0 100%",
+ minWidth: 0,
+ transform: "translate3d(0, 0, 0)",
overflowY: "auto",
overflowX: "hidden",
+
+ [pseudo(not("[data-carousel]"), not(selected))]: {
+ display: "none",
+ },
},
indicator: {
position: "absolute",
willChange: "left, width",
- transition:
- "left 0.2s cubic-bezier(0.15, 0.3, 0.25, 1), width 0.2s cubic-bezier(0.15, 0.3, 0.25, 1)",
- left: "var(--seed-design-tabs-indicator-left, 0px)",
- width: "var(--seed-design-tabs-indicator-width, 0px)",
+ transitionProperty: "left, width",
+ transitionDuration: vars.base.enabled.indicator.transformDuration,
+ transitionTimingFunction: vars.base.enabled.indicator.transformTimingFunction,
+ left: "var(--indicator-left, 0px)",
+ width: "var(--indicator-width, 0px)",
color: vars.base.enabled.indicator.color,
borderBottom: `${vars.base.enabled.indicator.height} solid ${vars.base.enabled.indicator.color}`,
bottom: 0,
+
+ [pseudo("[data-ssr]")]: {
+ display: "none",
+ },
+ },
+
+ trigger: {
+ position: "relative",
+ display: "flex",
+ justifyContent: "center",
+ alignItems: "flex-end",
+ cursor: "pointer",
+ border: "none",
+ boxSizing: "border-box",
+ backgroundColor: "transparent",
+ whiteSpace: "nowrap",
+ [pseudo(disabled)]: {
+ cursor: "not-allowed",
+ },
+
+ [pseudo(selected, "[data-ssr]:after")]: {
+ content: "''",
+ position: "absolute",
+ bottom: 0,
+ left: 0,
+ right: 0,
+ height: vars.base.enabled.indicator.height,
+ backgroundColor: vars.base.enabled.indicator.color,
+ },
+ },
+ triggerLabel: {
+ position: "relative",
+ color: triggerVars.base.enabled.label.color,
+ [pseudo(selected)]: {
+ color: triggerVars.base.selected.label.color,
+ },
+ [pseudo(disabled)]: {
+ color: triggerVars.base.disabled.label.color,
+ },
+ },
+ triggerNotification: {
+ position: "absolute",
+ top: 0,
+
+ /**
+ * notification이 Tabs의 박스 사이즈에 잡히지 않도록 하기 위한 트릭
+ * notification의 위치를 absolute로 잡아주고, right를 음수로 설정하여 박스 밖으로 나가게 함
+ * 이때, 텍스트에서 marginLeft만큼 떨어진 위치에 위치해야하기 위해서는
+ * 우선 notification의 size만큼 오른쪽으로 한번 이동하고 거기서 marginLeft만큼 오른쪽으로 이동해야함
+ * 그래서 아래와 같은 식이 나옴
+ */
+ right: `calc(-1 * ${triggerVars.base.enabled.notification.size} - ${triggerVars.base.enabled.notification.marginLeft})`,
+
+ alignSelf: "flex-start",
+ backgroundColor: triggerVars.base.enabled.notification.color,
+ width: triggerVars.base.enabled.notification.size,
+ height: triggerVars.base.enabled.notification.size,
+ borderRadius: triggerVars.base.enabled.notification.cornerRadius,
},
},
variants: {
- layout: {
+ triggerLayout: {
fill: {
- triggerList: {
- padding: `0px ${vars.layoutFill.enabled.root.paddingX}`,
+ list: {
+ paddingInline: vars.layoutFill.enabled.root.paddingX,
justifyContent: "space-around",
},
indicator: {
- left: "calc(var(--seed-design-tabs-indicator-left, 0px) + 16px)",
- width: "calc(var(--seed-design-tabs-indicator-width, 0px) - 32px)",
+ left: `calc(var(--indicator-left, 0px) + ${vars.layoutFill.enabled.indicator.insetX})`,
+ width: `calc(var(--indicator-width, 0px) - 2 * ${vars.layoutFill.enabled.indicator.insetX})`,
+ },
+ trigger: {
+ flex: 1,
},
},
hug: {
- triggerList: {
- padding: `0px ${vars.layoutHug.enabled.root.paddingX}`,
+ list: {
+ paddingInline: vars.layoutHug.enabled.root.paddingX,
justifyContent: "flex-start",
},
indicator: {
- left: "calc(var(--seed-design-tabs-indicator-left, 0px))",
- width: "calc(var(--seed-design-tabs-indicator-width, 0px))",
+ left: `calc(var(--indicator-left, 0px) + ${vars.layoutHug.enabled.indicator.insetX})`,
+ width: `calc(var(--indicator-width, 0px) - 2 * ${vars.layoutHug.enabled.indicator.insetX})`,
+ },
+ },
+ },
+ contentLayout: {
+ fill: {
+ root: {
+ display: "flex",
+ flexDirection: "column",
+ height: "100%",
+ },
+ carousel: {
+ flex: 1,
+ },
+ carouselCamera: {
+ height: "100%",
+ alignItems: "stretch",
+ },
+ },
+ hug: {
+ root: {
+ display: "block",
},
},
},
size: {
small: {
root: {
- "--seed-design-tabs-trigger-list-height": vars.sizeSmall.enabled.root.height,
+ "--tabs-list-height": vars.sizeSmall.enabled.root.height,
+ },
+ list: {
+ minHeight: vars.sizeSmall.enabled.root.height,
+ },
+ trigger: {
+ minHeight: triggerVars.sizeSmall.enabled.root.minHeight,
+ paddingInline: triggerVars.sizeSmall.enabled.root.paddingX,
+ paddingBlock: triggerVars.sizeSmall.enabled.root.paddingY,
},
- triggerList: {
- height: vars.sizeSmall.enabled.root.height,
+ triggerLabel: {
+ fontSize: triggerVars.sizeSmall.enabled.label.fontSize,
+ lineHeight: triggerVars.sizeSmall.enabled.label.lineHeight,
+ fontWeight: triggerVars.sizeSmall.enabled.label.fontWeight,
},
},
medium: {
root: {
- "--seed-design-tabs-trigger-list-height": vars.sizeMedium.enabled.root.height,
+ "--tabs-list-height": vars.sizeMedium.enabled.root.height,
},
- triggerList: {
- height: vars.sizeMedium.enabled.root.height,
+ list: {
+ minHeight: vars.sizeMedium.enabled.root.height,
+ },
+ trigger: {
+ minHeight: triggerVars.sizeMedium.enabled.root.minHeight,
+ paddingInline: triggerVars.sizeMedium.enabled.root.paddingX,
+ paddingBlock: triggerVars.sizeMedium.enabled.root.paddingY,
+ },
+ triggerLabel: {
+ fontSize: triggerVars.sizeMedium.enabled.label.fontSize,
+ lineHeight: triggerVars.sizeMedium.enabled.label.lineHeight,
+ fontWeight: triggerVars.sizeMedium.enabled.label.fontWeight,
},
},
},
- fixTriggerList: {
+ stickyList: {
true: {
root: {
position: "relative",
},
- triggerList: {
+ list: {
position: "sticky",
top: 0,
- },
- contentList: {
- height: "calc(100% - var(--seed-design-tabs-trigger-list-height))",
+ zIndex: 1,
},
},
false: {},
},
},
defaultVariants: {
- layout: "hug",
+ triggerLayout: "fill",
+ contentLayout: "hug",
size: "small",
- fixTriggerList: false,
+ stickyList: false,
},
});
diff --git a/packages/react-headless/tabs/package.json b/packages/react-headless/tabs/package.json
index 27c908350..e96f677d0 100644
--- a/packages/react-headless/tabs/package.json
+++ b/packages/react-headless/tabs/package.json
@@ -26,10 +26,14 @@
"build": "bun build.mjs && tsc"
},
"dependencies": {
+ "@radix-ui/react-compose-refs": "^1.1.1",
+ "@radix-ui/react-use-callback-ref": "^1.1.0",
"@radix-ui/react-use-controllable-state": "1.1.0",
+ "@radix-ui/react-use-layout-effect": "^1.1.0",
"@radix-ui/react-use-size": "^1.1.0",
"@seed-design/dom-utils": "0.0.0-alpha-20241030023710",
- "@use-gesture/react": "^10.3.1"
+ "embla-carousel-auto-height": "^8.5.2",
+ "embla-carousel-react": "^8.5.2"
},
"peerDependencies": {
"react": ">=18.0.0",
diff --git a/packages/react-headless/tabs/src/Tabs.namespace.ts b/packages/react-headless/tabs/src/Tabs.namespace.ts
new file mode 100644
index 000000000..fd5b3b229
--- /dev/null
+++ b/packages/react-headless/tabs/src/Tabs.namespace.ts
@@ -0,0 +1,16 @@
+export {
+ TabsContent as Content,
+ TabsIndicator as Indicator,
+ TabsList as List,
+ TabsRoot as Root,
+ TabsCarouselCamera as CarouselCamera,
+ TabsCarousel as Carousel,
+ TabsTrigger as Trigger,
+ type TabsContentProps as ContentProps,
+ type TabsIndicatorProps as IndicatorProps,
+ type TabsListProps as ListProps,
+ type TabsRootProps as RootProps,
+ type TabsCarouselCameraProps as CarouselCameraProps,
+ type TabsCarouselProps as CarouselProps,
+ type TabsTriggerProps as TriggerProps,
+} from "./Tabs";
diff --git a/packages/react-headless/tabs/src/Tabs.tsx b/packages/react-headless/tabs/src/Tabs.tsx
new file mode 100644
index 000000000..00b1981b3
--- /dev/null
+++ b/packages/react-headless/tabs/src/Tabs.tsx
@@ -0,0 +1,156 @@
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import { mergeProps } from "@seed-design/dom-utils";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import type * as React from "react";
+import { forwardRef } from "react";
+import { useRenderStrategy, type UseRenderStrategyProps } from "./private/useRenderStrategy";
+import {
+ RenderStrategyProvider,
+ useRenderStrategyContext,
+} from "./private/useRenderStrategyContext";
+import { useTabsCarousel, type UseTabsCarouselProps } from "./useTabsCarousel";
+import type { UseTabsContentProps, UseTabsProps, UseTabsTriggerProps } from "./useTabs";
+import { useTabs } from "./useTabs";
+import { TabsProvider, useTabsContext } from "./useTabsContext";
+import { TabsCarouselProvider, useTabsCarouselContext } from "./useTabsCarouselContext";
+import { TabsTriggerProvider } from "./useTabsTriggerContext";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface TabsRootProps
+ extends UseTabsProps,
+ UseRenderStrategyProps,
+ PrimitiveProps,
+ Omit, "defaultValue"> {}
+
+export const TabsRoot = forwardRef((props, ref) => {
+ const {
+ defaultValue,
+ value,
+ onValueChange,
+ orientation,
+ lazyMount,
+ unmountOnExit,
+ ...otherProps
+ } = props;
+ const api = useTabs({
+ defaultValue,
+ value,
+ onValueChange,
+ orientation,
+ });
+ const renderStrategyApi = useRenderStrategy({ lazyMount, unmountOnExit });
+ return (
+
+
+
+
+ );
+});
+TabsRoot.displayName = "TabsRoot";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface TabsListProps extends PrimitiveProps, React.HTMLAttributes {}
+
+export const TabsList = forwardRef((props, ref) => {
+ const api = useTabsContext();
+ return (
+ {}
+
+export const TabsTrigger = forwardRef((props, ref) => {
+ const { value, disabled, ...otherProps } = props;
+ const api = useTabsContext();
+ const triggerApi = api.getTriggerProps({ value, disabled });
+ return (
+
+
+ );
+});
+TabsTrigger.displayName = "TabsTrigger";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface TabsContentProps
+ extends PrimitiveProps,
+ UseTabsContentProps,
+ React.HTMLAttributes {}
+
+export const TabsContent = forwardRef((props, ref) => {
+ const { value, ...otherProps } = props;
+ const api = useTabsContext();
+ const carouselApi = useTabsCarouselContext({ strict: false });
+ const { getUnmounted } = useRenderStrategyContext();
+ const unmounted = getUnmounted(api.value === value);
+ if (unmounted) return null;
+
+ return (
+ {}
+
+export const TabsIndicator = forwardRef((props, ref) => {
+ const api = useTabsContext();
+ return {}
+
+export const TabsCarousel = forwardRef((props, ref) => {
+ const { dragThreshold, loop, swipeable, autoHeight, onSettle, ...otherProps } = props;
+ const api = useTabsCarousel({ dragThreshold, loop, swipeable, onSettle, autoHeight });
+
+ return (
+
+
+ {props.children}
+
+
+ );
+});
+TabsCarousel.displayName = "TabsCarousel";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface TabsCarouselCameraProps
+ extends PrimitiveProps,
+ React.HTMLAttributes {}
+
+export const TabsCarouselCamera = forwardRef(
+ (props, ref) => {
+ const api = useTabsCarouselContext();
+ return (root: Root, selector: string) {
- return Array.from(root?.querySelectorAll(selector) ?? []);
-}
-
-export function query(root: Root, selector: string) {
- return root?.querySelector(selector) ?? null;
-}
-
-export type ItemToId = (v: T) => string;
-
-export const defaultItemToId = (v: T) => v.id;
-export function itemById(
- v: T[],
- id: string,
- itemToId: ItemToId = defaultItemToId,
-) {
- return v.find((item) => itemToId(item) === id);
-}
-
-export const getAllValues = (id: string) => {
- const el = getTabTriggerListEl(id);
-
- if (!el) return [];
- return Array.from(el.children)
- .map((child) => child.getAttribute("data-value"))
- .filter(Boolean);
-};
-
-export const getEnabledValues = (id: string) => {
- const el = getTabTriggerListEl(id);
-
+export const getEnabledValues = (el: HTMLElement) => {
if (!el) return [];
return Array.from(el.children)
.filter((child) => !child.hasAttribute("aria-disabled"))
.map((child) => child.getAttribute("data-value"))
.filter(Boolean);
};
-
-export const getTabIndex = (value: string, id: string) => {
- const values = getAllValues(id);
- return values.indexOf(value);
-};
-
-export const getTabIndexOnlyEnabled = (value: string, id: string) => {
- const values = getEnabledValues(id);
- return values.indexOf(value);
-};
diff --git a/packages/react-headless/tabs/src/index.ts b/packages/react-headless/tabs/src/index.ts
index 06a7a93db..13e3171dd 100644
--- a/packages/react-headless/tabs/src/index.ts
+++ b/packages/react-headless/tabs/src/index.ts
@@ -1,9 +1,25 @@
-import { useTabs } from "./useTabs";
-import { useLazyContents, type UseLazyContentsProps } from "./useLazyContents";
-import { useSwipeable } from "./useSwipeable";
+export {
+ TabsContent,
+ TabsIndicator,
+ TabsList,
+ TabsRoot,
+ TabsCarouselCamera,
+ TabsCarousel,
+ TabsTrigger,
+ type TabsContentProps,
+ type TabsIndicatorProps,
+ type TabsListProps,
+ type TabsRootProps,
+ type TabsCarouselCameraProps,
+ type TabsCarouselProps,
+ type TabsTriggerProps,
+} from "./Tabs";
-import type { ContentProps, TriggerProps, UseTabsProps } from "./types";
-import type { UseSwipeableProps } from "./useSwipeable";
+export * as Tabs from "./Tabs.namespace";
-export { useLazyContents, useTabs, useSwipeable };
-export type { ContentProps, TriggerProps, UseTabsProps, UseLazyContentsProps, UseSwipeableProps };
+export { useTabsContext, type UseTabsContext } from "./useTabsContext";
+export {
+ useTabsCarouselContext,
+ type UseTabsCarouselContext,
+} from "./useTabsCarouselContext";
+export { useTabsTriggerContext, type UseTabsTriggerContext } from "./useTabsTriggerContext";
diff --git a/packages/react-headless/tabs/src/private/useRenderStrategy.ts b/packages/react-headless/tabs/src/private/useRenderStrategy.ts
new file mode 100644
index 000000000..f71cdaf0e
--- /dev/null
+++ b/packages/react-headless/tabs/src/private/useRenderStrategy.ts
@@ -0,0 +1,36 @@
+import { useRef } from "react";
+
+export interface UseRenderStrategyProps {
+ /**
+ * If `true`, the component will be mounted lazily.
+ * @default false
+ */
+ lazyMount?: boolean;
+
+ /**
+ * If `true`, the component will be unmounted when it's not selected.
+ * @default false
+ * */
+ unmountOnExit?: boolean;
+}
+
+export type UseRenderStrategyReturn = ReturnType;
+
+export function useRenderStrategy(props: UseRenderStrategyProps) {
+ const wasEverPresent = useRef(false);
+
+ function getUnmounted(isPresent: boolean) {
+ if (isPresent) {
+ wasEverPresent.current = true;
+ }
+
+ return (
+ (!isPresent && !wasEverPresent.current && props.lazyMount) ||
+ (props.unmountOnExit && !isPresent && wasEverPresent.current)
+ );
+ }
+
+ return {
+ getUnmounted,
+ };
+}
diff --git a/packages/react-headless/tabs/src/private/useRenderStrategyContext.tsx b/packages/react-headless/tabs/src/private/useRenderStrategyContext.tsx
new file mode 100644
index 000000000..4186111c2
--- /dev/null
+++ b/packages/react-headless/tabs/src/private/useRenderStrategyContext.tsx
@@ -0,0 +1,21 @@
+import { createContext, useContext } from "react";
+import type { UseRenderStrategyReturn } from "./useRenderStrategy";
+
+export interface UseRenderStrategyContext extends UseRenderStrategyReturn {}
+
+const RenderStrategyContext = createContext(null);
+
+export const RenderStrategyProvider = RenderStrategyContext.Provider;
+
+export function useRenderStrategyContext({
+ strict = true,
+}: { strict?: T } = {}): T extends false
+ ? UseRenderStrategyContext | null
+ : UseRenderStrategyContext {
+ const context = useContext(RenderStrategyContext);
+ if (!context && strict) {
+ throw new Error("useRenderStrategyContext must be used within a RenderStrategy");
+ }
+
+ return context as UseRenderStrategyContext;
+}
diff --git a/packages/react-headless/tabs/src/types.ts b/packages/react-headless/tabs/src/types.ts
deleted file mode 100644
index 06ed9d516..000000000
--- a/packages/react-headless/tabs/src/types.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-export type Vector2 = [number, number];
-
-export interface UseSwipeableStateProps {
- /**
- * tab swipe 기능 활성화 여부
- * @default false
- */
- isSwipeable?: boolean;
-
- onSwipeStart?: () => void;
- onSwipeEnd?: () => void;
-}
-
-export interface UseTabsStateProps {
- value?: string;
- defaultValue?: string;
- onValueChange?: (value: string) => void;
-}
-
-export interface UseTabsProps extends UseTabsStateProps, UseSwipeableStateProps {
- swipeConfig?: {
- /**
- * @default 0.3
- * The minimum velocity per axis (in pixels / ms) the drag gesture needs to
- * reach before the pointer is released.
- */
- velocity?: number | Vector2;
- /**
- * @default 50
- * The minimum distance per axis (in pixels) the drag gesture needs to
- * travel to trigger a swipe. Defaults to 50.
- */
- distance?: number | Vector2;
- /**
- * @default 250
- * The maximum duration in milliseconds that a swipe is detected. Defaults
- * to 250.
- */
- duration?: number;
- };
-
- orientation?: "horizontal" | "vertical";
-}
-
-export interface TriggerProps {
- value: string;
- isDisabled?: boolean;
-}
-
-export interface ContentProps {
- value: string;
-
- /**
- * @default "keep"
- * @description 실제 value에 해당하는 컨텐츠를 보여줄 때, 다른 컨텐츠를 숨길지 여부
- */
- visibilityMode?: "hidden" | "keep";
-}
diff --git a/packages/react-headless/tabs/src/useLazyContents.test.tsx b/packages/react-headless/tabs/src/useLazyContents.test.tsx
deleted file mode 100644
index 0c69fae9c..000000000
--- a/packages/react-headless/tabs/src/useLazyContents.test.tsx
+++ /dev/null
@@ -1,223 +0,0 @@
-import "@testing-library/jest-dom/vitest";
-import { cleanup, render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { afterEach, describe, expect, it } from "vitest";
-
-import type { ReactElement } from "react";
-import * as React from "react";
-
-import {
- useLazyContents,
- useTabs,
- type ContentProps,
- type TriggerProps,
- type UseLazyContentsProps,
- type UseTabsProps,
-} from "./index";
-
-afterEach(cleanup);
-
-/**
- * @see https://github.com/ZeeCoder/use-resize-observer/issues/40#issuecomment-644536259
- * useSize에서 사용하는 ResizeObserver를 mock으로 대체합니다.
- */
-class ResizeObserver {
- observe() {}
- unobserve() {}
- disconnect() {}
-}
-
-function setUp(jsx: ReactElement) {
- return {
- user: userEvent.setup(),
- ...render(jsx),
- };
-}
-
-const TabsContext = React.createContext<{
- api: ReturnType;
- shouldRender?: (value: string) => boolean;
-} | null>(null);
-
-const useTabsContext = () => {
- const context = React.useContext(TabsContext);
- if (!context) {
- throw new Error("Tabs cannot be rendered outside the Tabs");
- }
- return context;
-};
-
-function TabsWithLazy(
- props: React.PropsWithChildren>,
-) {
- const api = useTabs(props);
- const { rootProps, value } = api;
- const { shouldRender } = useLazyContents({
- currentValue: value,
- lazyMode: props.lazyMode,
- isLazy: props.isLazy,
- });
-
- return (
-
- {props.children}
-
- );
-}
-
-function TabTriggerList(props: React.PropsWithChildren) {
- const { api } = useTabsContext();
- const { tabTriggerListProps } = api;
- return {props.children}
;
-}
-
-function TabTrigger(props: React.PropsWithChildren) {
- const { api } = useTabsContext();
- const { getTabTriggerProps } = api;
- const { labelProps, notificationProps, rootProps } = getTabTriggerProps(props);
-
- return (
-
- {props.children}
-
- );
-}
-
-function TabContentList(props: React.PropsWithChildren) {
- const { api } = useTabsContext();
- const { tabContentListProps, tabContentCameraProps } = api;
- return (
-
- );
-}
-
-function TabContentWithLazy(props: React.PropsWithChildren) {
- const { api, shouldRender } = useTabsContext();
- const { getTabContentProps } = api;
- const tabContentProps = getTabContentProps(props);
-
- return {shouldRender(props.value) && props.children}
;
-}
-
-const tabs = {
- tab1: {
- value: "Tab 1",
- label: "Label 1",
- content: "Content 1",
- },
- tab2: {
- value: "Tab 2",
- label: "Label 2",
- content: "Content 2",
- },
- tab3: {
- value: "Tab 3",
- label: "Label 3",
- content: "Content 3",
- },
-};
-
-function LazyTabs(props: UseTabsProps & Omit) {
- return (
-
-
- {Object.values(tabs).map(({ value, label }) => (
-
- {label}
-
- ))}
-
-
- {Object.values(tabs).map(({ value, content }) => (
-
- {content}
-
- ))}
-
-
- );
-}
-
-describe("useLazyContents", () => {
- window.ResizeObserver = ResizeObserver;
-
- it("should render all tabs when isLazy=false, lazyMode='keepMounted'", async () => {
- const { queryByText, user } = setUp(>({});
-
- useEffect(() => {
- setPreviousValues((prev) => ({
- ...prev,
- [currentValue]: true,
- }));
- }, [currentValue]);
-
- function shouldRender(value: string): boolean {
- return lazyDisclosure({
- enabled: isLazy,
- isSelected: value === currentValue,
- wasSelected: previousValues[value],
- mode: lazyMode,
- });
- }
-
- return {
- shouldRender,
- };
-}
diff --git a/packages/react-headless/tabs/src/useSwipeable.ts b/packages/react-headless/tabs/src/useSwipeable.ts
deleted file mode 100644
index 564664c60..000000000
--- a/packages/react-headless/tabs/src/useSwipeable.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-import * as React from "react";
-
-import { type FullGestureState, useGesture } from "@use-gesture/react";
-
-import type { UseSwipeableStateProps } from "./types";
-
-const useSwipeableState = (props: UseSwipeableStateProps) => {
- const { isSwipeable, onSwipeEnd, onSwipeStart } = props;
- const [swipeStatus, setSwipeStatus] = React.useState<"idle" | "dragging">("idle");
- const [swipeMoveX, setSwipeMoveX] = React.useState(0);
-
- return {
- swipeStatus,
- swipeMoveX,
- onDrag: (
- state: Omit, "event"> & {
- event: PointerEvent | MouseEvent | TouchEvent | KeyboardEvent;
- },
- ) => {
- if (!isSwipeable) return;
-
- setSwipeMoveX(state.movement[0]);
- },
- onDragStart: () => {
- if (!isSwipeable) return;
-
- onSwipeStart?.();
- setSwipeStatus("dragging");
- },
- onDragEnd: () => {
- if (!isSwipeable) return;
-
- onSwipeEnd?.();
- setSwipeStatus("idle");
- setSwipeMoveX(0);
- },
- };
-};
-
-export type Vector2 = [number, number];
-
-export interface UseSwipeableProps extends UseSwipeableStateProps {
- onSwipeLeftToRight?: () => void;
- onSwipeRightToLeft?: () => void;
-
- swipeConfig?: {
- /**
- * @default 0.3
- * The minimum velocity per axis (in pixels / ms) the drag gesture needs to
- * reach before the pointer is released.
- */
- velocity?: number | Vector2;
- /**
- * @default 50
- * The minimum distance per axis (in pixels) the drag gesture needs to
- * travel to trigger a swipe. Defaults to 50.
- */
- distance?: number | Vector2;
- /**
- * @default 250
- * The maximum duration in milliseconds that a swipe is detected. Defaults
- * to 250.
- */
- duration?: number;
- };
-}
-
-export const useSwipeable = (props: UseSwipeableProps) => {
- const {
- isSwipeable = true,
- swipeConfig,
- onSwipeLeftToRight,
- onSwipeRightToLeft,
- onSwipeEnd,
- onSwipeStart,
- } = props;
-
- const { onDrag, onDragEnd, onDragStart, swipeMoveX, swipeStatus } = useSwipeableState({
- isSwipeable,
- onSwipeEnd,
- onSwipeStart,
- });
-
- const getDragProps = useGesture(
- {
- onDragStart: () => {
- if (!isSwipeable) return;
-
- onDragStart();
- },
-
- onDragEnd: ({ swipe: [swipeX] }) => {
- if (!isSwipeable) return;
-
- if (swipeX === -1) onSwipeRightToLeft?.();
-
- if (swipeX === 1) onSwipeLeftToRight?.();
-
- onDragEnd();
- },
-
- onDrag,
- },
- {
- drag: {
- filterTaps: false,
- preventScrollAxis: "y",
- preventDefault: true,
- swipe: {
- distance: swipeConfig?.distance || 50,
- velocity: swipeConfig?.velocity || 0.3,
- duration: swipeConfig?.duration || 250,
- },
- },
- },
- );
-
- const dragProps = isSwipeable
- ? {
- ...getDragProps(),
- }
- : {};
-
- return {
- swipeMoveX,
- swipeStatus,
- dragProps,
- };
-};
diff --git a/packages/react-headless/tabs/src/useTabs.test.tsx b/packages/react-headless/tabs/src/useTabs.test.tsx
index 0ff06b80b..286a18709 100644
--- a/packages/react-headless/tabs/src/useTabs.test.tsx
+++ b/packages/react-headless/tabs/src/useTabs.test.tsx
@@ -49,16 +49,16 @@ function Tabs(props: React.PropsWithChildren) {
);
}
-function TabTriggerList(props: React.PropsWithChildren) {
+function TabsList(props: React.PropsWithChildren) {
const { api } = useTabsContext();
- const { tabTriggerListProps } = api;
+ const { listProps: tabTriggerListProps } = api;
return {props.children}
;
}
-function TabTrigger(props: React.PropsWithChildren) {
+function TabsTrigger(props: React.PropsWithChildren) {
const { api } = useTabsContext();
- const { getTabTriggerProps } = api;
- const { labelProps, notificationProps, rootProps } = getTabTriggerProps(props);
+ const { getTriggerProps: getTabsTriggerProps } = api;
+ const { labelProps, notificationProps, rootProps } = getTabsTriggerProps(props);
return (
@@ -78,9 +78,9 @@ function TabContentList(props: React.PropsWithChildren) {
);
}
-function TabContent(props: React.PropsWithChildren) {
+function TabsContent(props: React.PropsWithChildren) {
const { api } = useTabsContext();
- const { getTabContentProps } = api;
+ const { getContentProps: getTabContentProps } = api;
const tabContentProps = getTabContentProps(props);
return {props.children}
;
@@ -98,18 +98,18 @@ function UncontrolledTabs({
}: { items: Record; tabsProps: UseTabsProps }) {
return (
-
+
{Object.values(items).map(({ value, label, ...restProps }) => (
-
+
{label}
-
+
))}
-
+
{Object.values(items).map(({ value, content }) => (
-
+
{content}
-
+
))}
diff --git a/packages/react-headless/tabs/src/useTabs.ts b/packages/react-headless/tabs/src/useTabs.ts
index 499cb7644..b1e1edd5e 100644
--- a/packages/react-headless/tabs/src/useTabs.ts
+++ b/packages/react-headless/tabs/src/useTabs.ts
@@ -1,239 +1,324 @@
import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { useLayoutEffect } from "@radix-ui/react-use-layout-effect";
+import { useSize } from "@radix-ui/react-use-size";
import { ariaAttr, buttonProps, dataAttr, elementProps } from "@seed-design/dom-utils";
-import * as React from "react";
+import type * as React from "react";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
import * as dom from "./dom";
-import type { ContentProps, TriggerProps, UseTabsProps, UseTabsStateProps } from "./types";
+import { getNextIndex, getPrevIndex } from "./utils";
-import { useSize } from "@radix-ui/react-use-size";
+export interface UseTabsStateProps {
+ value?: string;
+
+ defaultValue?: string;
-const useLayoutEffect = globalThis?.document ? React.useLayoutEffect : React.useEffect;
+ onValueChange?: (value: string) => void;
+}
+
+function useTabsState(props: UseTabsStateProps) {
+ const [interactionState, setInteractionState] = useState<"idle" | "focused">("idle");
-function useTabsState(props: UseTabsStateProps & { id: string }) {
- const tabValues = dom.getAllValues(props.id);
const [value, setValue] = useControllableState({
prop: props.value,
- defaultProp: props.defaultValue ?? tabValues[0] ?? undefined,
+ defaultProp: props.defaultValue ?? undefined,
onChange: props.onValueChange,
});
- const [hoveredValue, setHoveredValue] = React.useState(null);
- const [activeValue, setActiveValue] = React.useState(null);
- const [focusedValue, setFocusedValue] = React.useState(null);
- const [isFocusVisible, setIsFocusVisible] = React.useState(false);
- const [rootEl, setRootEl] = React.useState(null);
- const triggerEl = value ? dom.getTabTriggerEl(value, props.id) : null;
- const cameraEl = dom.getTabContentCameraEl(props.id);
- const triggerSize = useSize(triggerEl);
- const cameraSize = useSize(cameraEl);
-
- const tabEnabledValues = dom.getEnabledValues(props.id);
- const currentTabIndex = value ? dom.getTabIndex(value, props.id) : -1;
- const currentTabEnabledIndex = value ? dom.getTabIndexOnlyEnabled(value, props.id) : -1;
+ const [focusedValue, setFocusedValue] = useState(null);
+ const [isFocusVisible, setIsFocusVisible] = useState(false);
+ const [isSSR, setIsSSR] = useState(true);
- const isFirst = currentTabEnabledIndex === 0;
- const isLast = currentTabEnabledIndex === tabEnabledValues.length - 1;
+ useEffect(() => {
+ setIsSSR(false);
+ }, []);
- const prevIndex = isFirst
- ? tabEnabledValues.length - 1
- : (currentTabEnabledIndex - 1 + tabEnabledValues.length) % tabEnabledValues.length;
+ const [listEl, listRef] = useState(null);
+ const [triggerEls, setTriggerEls] = useState>({});
+ const selectedTriggerEl = value ? triggerEls[value] : null;
+ const selectedTriggerSize = useSize(selectedTriggerEl);
- const nextIndex = isLast ? 0 : (currentTabEnabledIndex + 1) % tabEnabledValues.length;
+ const enabledValues = useMemo(() => (listEl ? dom.getEnabledValues(listEl) : []), [listEl]);
+ const contentIndex = value ? enabledValues.indexOf(value) : -1;
- useLayoutEffect(() => {
- setRootEl(dom.getRootEl(props.id));
- }, [props.id]);
+ const prevIndex = contentIndex >= 0 ? getPrevIndex(contentIndex, enabledValues.length) : -1;
+ const nextIndex = contentIndex >= 0 ? getNextIndex(contentIndex, enabledValues.length) : -1;
- const events = {
- movePrev: () => {
- const prevValue = tabEnabledValues[prevIndex];
+ const actions = {
+ selectPrev: () => {
+ const prevValue = enabledValues[prevIndex];
if (!prevValue) return;
setValue(prevValue);
},
- moveNext: () => {
- const nextValue = tabEnabledValues[nextIndex];
+ selectNext: () => {
+ const nextValue = enabledValues[nextIndex];
if (!nextValue) return;
setValue(nextValue);
},
- focusPrev: () => {
- const prevValue = tabEnabledValues[prevIndex];
- if (!prevValue) return;
- const prevTriggerEl = dom.getTabTriggerEl(prevValue, props.id);
-
- if (prevTriggerEl) prevTriggerEl.focus();
+ selectFirst: () => {
+ const firstValue = enabledValues[0];
+ if (!firstValue) return;
+ setValue(firstValue);
},
- focusCurrent: () => {
- if (triggerEl) triggerEl.focus();
+ selectLast: () => {
+ const lastValue = enabledValues[enabledValues.length - 1];
+ if (!lastValue) return;
+ setValue(lastValue);
},
- focusNext: () => {
- const nextValue = tabEnabledValues[nextIndex];
- if (!nextValue) return;
- const nextTriggerEl = dom.getTabTriggerEl(nextValue, props.id);
+ setFocusedValue: (value: string) => {
+ setFocusedValue(value);
+ },
+ clearFocusedValue: () => {
+ setFocusedValue(null);
+ },
+ setValue: (value: string) => {
+ setValue(value);
+ },
+ };
- if (nextTriggerEl) nextTriggerEl.focus();
+ const events = {
+ arrowPrev: () => {
+ if (interactionState === "focused") {
+ actions.selectPrev();
+ setIsFocusVisible(true);
+ }
+ },
+ arrowNext: () => {
+ if (interactionState === "focused") {
+ actions.selectNext();
+ setIsFocusVisible(true);
+ }
+ },
+ arrowUp: () => {
+ if (interactionState === "focused") {
+ actions.selectPrev();
+ setIsFocusVisible(true);
+ }
+ },
+ arrowDown: () => {
+ if (interactionState === "focused") {
+ actions.selectNext();
+ setIsFocusVisible(true);
+ }
+ },
+ home: () => {
+ if (interactionState === "focused") {
+ actions.selectFirst();
+ setIsFocusVisible(true);
+ }
+ },
+ end: () => {
+ if (interactionState === "focused") {
+ actions.selectLast();
+ setIsFocusVisible(true);
+ }
+ },
+ tabFocus: (value: string) => {
+ actions.setFocusedValue(value);
+ if (interactionState === "idle") {
+ setInteractionState("focused");
+ }
+ },
+ tabBlur: () => {
+ if (interactionState === "focused") {
+ actions.clearFocusedValue();
+ setInteractionState("idle");
+ }
},
- setValue,
- setHoveredValue,
- setActiveValue,
- setFocusedValue,
+ tabClick: (value: string) => {
+ actions.setFocusedValue(value);
+ actions.setValue(value);
+ if (interactionState === "idle") {
+ setInteractionState("focused");
+ }
+ },
+
+ setValue: actions.setValue,
+ selectNext: actions.selectNext,
+ selectPrev: actions.selectPrev,
+ setContentIndex: useCallback(
+ (index: number) => {
+ const valueFromIndex = enabledValues[index];
+ if (!valueFromIndex) return;
+
+ setValue(valueFromIndex);
+ },
+ [enabledValues, setValue],
+ ),
setIsFocusVisible,
+
+ mountTrigger: (value: string, el: HTMLElement) => {
+ setTriggerEls((prev) => ({ ...prev, [value]: el }));
+ },
+ unmountTrigger: (value: string) => {
+ setTriggerEls((prev) => {
+ const { [value]: _, ...rest } = prev;
+ return rest;
+ });
+ },
};
return {
- value,
- rootEl,
- triggerSize: {
- width: triggerSize?.width || 0,
- height: triggerSize?.height || 0,
- left: triggerEl?.offsetLeft || 0,
+ refs: {
+ list: listRef,
},
- cameraSize: {
- width: cameraSize?.width || 0,
- height: cameraSize?.height || 0,
+ interactionState,
+ value,
+ isSSR,
+ triggerRect: {
+ width: selectedTriggerSize?.width || 0,
+ height: selectedTriggerSize?.height || 0,
+ left: selectedTriggerEl?.offsetLeft || 0,
},
- hoveredValue,
- activeValue,
focusedValue,
isFocusVisible,
- currentTabIndex,
- currentTabEnabledIndex,
- tabValues,
- tabEnabledValues,
+ contentIndex,
events,
};
}
+export interface UseTabsProps extends UseTabsStateProps {
+ orientation?: "horizontal" | "vertical";
+}
+
+export interface UseTabsTriggerProps {
+ value: string;
+
+ disabled?: boolean;
+}
+
+export interface UseTabsContentProps {
+ value: string;
+}
+
+export type UseTabsReturn = ReturnType;
+
+export type GetTriggerPropsReturn = ReturnType;
+
export function useTabs(props: UseTabsProps) {
- const id = React.useId();
+ const autoId = useId();
const {
+ refs,
+ interactionState,
value,
- currentTabIndex,
- currentTabEnabledIndex,
+ isSSR,
events,
- tabValues,
- tabEnabledValues,
- triggerSize,
- cameraSize,
- activeValue,
+ triggerRect,
focusedValue,
- hoveredValue,
isFocusVisible,
- rootEl,
- } = useTabsState({
- id,
- ...props,
+ contentIndex,
+ } = useTabsState(props);
+ const { orientation = "horizontal" } = props;
+ const focused = interactionState === "focused";
+
+ const stateProps = elementProps({
+ "data-orientation": orientation,
+ "data-focus": dataAttr(focused),
+ "data-ssr": dataAttr(isSSR),
});
- const {
- value: omitValue,
- defaultValue: omitDefaultValue,
- onValueChange: omitOnValueChange,
- isSwipeable = false,
- swipeConfig,
- orientation = "horizontal",
- ...restProps
- } = props;
-
- const updateIndicatorStyle = React.useCallback(() => {
- if (rootEl) {
- rootEl.style.setProperty("--seed-design-tabs-indicator-left", `${triggerSize.left}px`);
- rootEl.style.setProperty("--seed-design-tabs-indicator-width", `${triggerSize.width}px`);
- }
- }, [triggerSize, rootEl]);
-
- const updateCameraStyle = React.useCallback(() => {
- if (rootEl) {
- rootEl.style.setProperty("--seed-design-tabs-tab-camera-width", `${cameraSize.width}`);
- }
- }, [cameraSize, rootEl]);
-
- const updateCurrentIndex = React.useCallback(() => {
- if (rootEl) {
- rootEl.style.setProperty("--seed-design-tabs-current-tab-index", `${currentTabIndex}`);
- rootEl.style.setProperty(
- "--seed-design-tabs-current-tab-enabled-index",
- `${currentTabEnabledIndex}`,
- );
- }
- }, [currentTabIndex, currentTabEnabledIndex, rootEl]);
-
- const updateTabCount = React.useCallback(() => {
- if (rootEl) {
- rootEl.style.setProperty("--seed-design-tabs-tab-count", `${tabValues.length}`);
- }
- }, [tabValues.length, rootEl]);
-
- useLayoutEffect(() => {
- updateIndicatorStyle();
- window.addEventListener("resize", updateIndicatorStyle);
- return () => {
- window.removeEventListener("resize", updateIndicatorStyle);
- };
- }, [updateIndicatorStyle]);
-
- useLayoutEffect(() => {
- updateCameraStyle();
- window.addEventListener("resize", updateCameraStyle);
- return () => {
- window.removeEventListener("resize", updateCameraStyle);
- };
- }, [updateCameraStyle]);
-
- useLayoutEffect(() => {
- updateCurrentIndex();
- }, [updateCurrentIndex]);
-
- useLayoutEffect(() => {
- updateTabCount();
- }, [updateTabCount]);
return {
+ refs,
value,
- triggerSize,
- currentTabIndex,
- currentTabEnabledIndex,
- tabEnabledCount: tabEnabledValues.length,
+ contentIndex,
+ triggerRect,
- tabCount: tabValues.length,
+ selectNext: events.selectNext,
+ selectPrev: events.selectPrev,
+ setValue: events.setValue,
+ setContentIndex: events.setContentIndex,
- moveNext: events.moveNext,
- movePrev: events.movePrev,
+ stateProps,
- restProps,
rootProps: elementProps({
- id: dom.getRootId(id),
- "data-orientation": orientation,
+ ...stateProps,
+ style: {
+ "--indicator-left": `${triggerRect.left}px`,
+ "--indicator-width": `${triggerRect.width}px`,
+ } as React.CSSProperties,
}),
- tabTriggerListProps: elementProps({
- id: dom.getTabTriggerListId(id),
+ listProps: elementProps({
+ id: dom.getListId(autoId),
role: "tablist",
"aria-orientation": orientation,
- "data-orientation": orientation,
+ ...stateProps,
+
+ onKeyDown(event) {
+ if (event.defaultPrevented) return;
+ if (event.nativeEvent.isComposing) return;
+
+ // TODO: support activationMode="manual"
+ switch (event.key) {
+ case "ArrowLeft":
+ if (orientation !== "horizontal") return;
+ events.arrowPrev();
+ break;
+ case "ArrowRight":
+ if (orientation !== "horizontal") return;
+ events.arrowNext();
+ break;
+ case "ArrowUp":
+ if (orientation !== "vertical") return;
+ events.arrowPrev();
+ break;
+ case "ArrowDown":
+ if (orientation !== "vertical") return;
+ events.arrowNext();
+ break;
+ case "Home": {
+ events.home();
+ break;
+ }
+ case "End": {
+ events.end();
+ break;
+ }
+ }
+ },
}),
- getTabTriggerProps: (props: TriggerProps) => {
- const { isDisabled, value: triggerValue } = props;
+
+ getTriggerProps: (props: UseTabsTriggerProps) => {
+ const { disabled: isDisabled, value: triggerValue } = props;
const itemState = {
isDisabled,
isSelected: value === triggerValue,
isFocused: focusedValue === triggerValue,
- isHovered: hoveredValue === triggerValue,
- isActive: activeValue === triggerValue,
};
const itemStateProps = {
"data-focus": dataAttr(itemState.isFocused),
"data-focus-visible": dataAttr(itemState.isFocused && isFocusVisible),
- "data-active": dataAttr(itemState.isActive),
- "data-hover": dataAttr(itemState.isHovered),
"data-selected": dataAttr(itemState.isSelected),
"data-disabled": dataAttr(itemState.isDisabled),
+ "data-ssr": dataAttr(isSSR),
"aria-disabled": ariaAttr(itemState.isDisabled),
"aria-selected": ariaAttr(itemState.isSelected),
};
+ const ref = useRef(null);
+
+ useLayoutEffect(() => {
+ if (ref.current) {
+ events.mountTrigger(triggerValue, ref.current);
+ }
+
+ () => {
+ events.unmountTrigger(triggerValue);
+ };
+ }, [triggerValue]);
+
return {
+ ...itemState,
+
+ refs: {
+ root: ref,
+ },
+
+ stateProps: itemStateProps,
+
rootProps: buttonProps({
- id: dom.getTabTriggerRootId(triggerValue, id),
+ id: dom.getTriggerId(triggerValue, autoId),
role: "tab",
type: "button",
disabled: isDisabled,
@@ -241,150 +326,50 @@ export function useTabs(props: UseTabsProps) {
...itemStateProps,
"data-value": triggerValue,
"data-orientation": orientation,
- "data-ownedby": dom.getTabTriggerListId(id),
- "aria-controls": dom.getTabTriggerRootId(triggerValue, id),
- onClick() {
- if (itemState.isDisabled) return;
- events.setValue(triggerValue);
- },
- onPointerMove() {
- if (itemState.isDisabled) return;
- events.setHoveredValue(triggerValue);
- },
- onPointerLeave() {
- if (itemState.isDisabled) return;
- events.setHoveredValue(null);
- events.setActiveValue(null);
- },
- onPointerDown(event) {
- if (itemState.isDisabled) return;
- // On pointerdown, the input blurs and returns focus to the `body`,
- // we need to prevent this.
- if (itemState.isFocused && event.pointerType === "mouse") {
- event.preventDefault();
- }
- events.setActiveValue(triggerValue);
- },
- onPointerUp() {
+ "data-ownedby": dom.getListId(autoId),
+ "aria-controls": dom.getContentId(triggerValue, autoId),
+ onClick(event) {
if (itemState.isDisabled) return;
- events.setActiveValue(null);
+ if (event.defaultPrevented) return;
+ events.tabClick(triggerValue);
},
onFocus(event) {
- events.setFocusedValue(triggerValue);
+ events.tabFocus(props.value);
events.setIsFocusVisible(event.target.matches(":focus-visible"));
},
- onBlur() {
- events.setFocusedValue(null);
- events.setIsFocusVisible(false);
- },
- onKeyDown({ key }) {
- if (itemState.isDisabled) return;
-
- switch (key) {
- case "ArrowLeft":
- if (orientation !== "horizontal") return;
-
- events.movePrev();
- events.focusPrev();
-
- break;
- case "ArrowRight":
- if (orientation !== "horizontal") return;
-
- events.moveNext();
- events.focusNext();
-
- break;
- case "ArrowUp":
- if (orientation !== "vertical") return;
-
- events.movePrev();
- events.focusPrev();
-
- break;
- case "ArrowDown":
- if (orientation !== "vertical") return;
-
- events.moveNext();
- events.focusNext();
-
- break;
- case "Home": {
- const firstValue = tabEnabledValues[0];
- if (!firstValue) return;
- events.setValue(firstValue);
-
- break;
- }
- case "End": {
- const lastValue = tabEnabledValues[tabEnabledValues.length - 1];
- if (!lastValue) return;
- events.setValue(lastValue);
-
- break;
- }
- case " ":
- case "Enter":
- events.setValue(triggerValue);
-
- events.focusCurrent();
- events.setIsFocusVisible(true);
-
- break;
+ onBlur(event) {
+ const target = event.relatedTarget as HTMLElement | null;
+ if (target?.getAttribute("role") !== "tab") {
+ events.tabBlur();
}
+ events.setIsFocusVisible(false);
},
}),
- labelProps: elementProps({
- id: dom.getTabTriggerLabelId(triggerValue, id),
- ...itemStateProps,
- "data-value": triggerValue,
- "data-orientation": orientation,
- "data-ownedby": dom.getTabTriggerListId(id),
- "aria-controls": dom.getTabTriggerRootId(triggerValue, id),
- }),
- notificationProps: elementProps({
- id: dom.getTabTriggerNotificationId(triggerValue, id),
- ...itemStateProps,
- "data-value": triggerValue,
- "data-orientation": orientation,
- "data-ownedby": dom.getTabTriggerListId(id),
- "aria-controls": dom.getTabTriggerRootId(triggerValue, id),
- }),
};
},
- tabContentListProps: elementProps({
- id: dom.getTabContentListId(id),
- "data-orientation": orientation,
- }),
- tabContentCameraProps: elementProps({
- id: dom.getTabContentCameraId(id),
- "data-orientation": orientation,
- }),
- getTabContentProps: (props: ContentProps) => {
- const { value: contentValue, visibilityMode = "keep" } = props;
- const tabContentId = dom.getTabContentId(contentValue, id);
- const tabTriggerId = dom.getTabTriggerRootId(contentValue, id);
+ getContentProps: (props: UseTabsContentProps) => {
+ const { value: contentValue } = props;
+ const triggerId = dom.getTriggerId(contentValue, autoId);
const isSelected = value === contentValue;
- const isDisabled = !!dom.itemById(dom.getDisabledElements(id), tabTriggerId);
- const hidden = visibilityMode === "hidden" ? !isSelected || isDisabled : isDisabled;
return elementProps({
- id: tabContentId,
+ id: dom.getContentId(contentValue, autoId),
+ tabIndex: -1,
+
role: "tabpanel",
+ "aria-labelledby": triggerId,
+ "aria-selected": ariaAttr(isSelected),
+ "aria-hidden": !isSelected,
+
"data-selected": dataAttr(isSelected),
"data-orientation": orientation,
- "data-ownedby": dom.getTabTriggerListId(id),
- "aria-labelledby": tabTriggerId,
- "aria-selected": ariaAttr(isSelected),
- "aria-hidden": isDisabled ? undefined : !isSelected,
- hidden,
+ "data-ownedby": dom.getListId(autoId),
});
},
- tabIndicatorProps: elementProps({
- id: dom.getIndicatorId(id),
- "data-orientation": orientation,
+ indicatorProps: elementProps({
+ ...stateProps,
}),
};
}
diff --git a/packages/react-headless/tabs/src/useTabsCarousel.ts b/packages/react-headless/tabs/src/useTabsCarousel.ts
new file mode 100644
index 000000000..3e1ce60e6
--- /dev/null
+++ b/packages/react-headless/tabs/src/useTabsCarousel.ts
@@ -0,0 +1,157 @@
+import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
+import { dataAttr, elementProps } from "@seed-design/dom-utils";
+import AutoHeight from "embla-carousel-auto-height";
+import useEmblaCarousel from "embla-carousel-react";
+import { useEffect } from "react";
+import { useTabsContext } from "./useTabsContext";
+
+export interface UseTabsCarouselStateProps {
+ swipeable?: boolean;
+
+ autoHeight?: boolean;
+
+ loop?: boolean;
+
+ dragThreshold?: number;
+
+ onSettle?: () => void;
+}
+
+const autoHeight = AutoHeight();
+const plugins = [autoHeight, autoHeight];
+
+const useTabsCarouselState = (props: UseTabsCarouselStateProps) => {
+ const api = useTabsContext();
+ const [emblaRef, emblaApi] = useEmblaCarousel(
+ {
+ loop: props.loop,
+ dragThreshold: props.dragThreshold,
+ duration: 20,
+ },
+ plugins,
+ );
+
+ const onSettle = useCallbackRef(props.onSettle);
+
+ useEffect(() => {
+ const select = emblaApi?.on("select", () => {
+ const contentIndex = emblaApi.selectedScrollSnap();
+ api.setContentIndex(contentIndex);
+ });
+
+ const settle = emblaApi?.on("settle", () => {
+ onSettle?.();
+ });
+
+ return () => {
+ select?.clear();
+ settle?.clear();
+ };
+ }, [emblaApi, api.setContentIndex, onSettle]);
+
+ useEffect(() => {
+ if (!emblaApi) return;
+
+ const { dragHandler } = emblaApi.internalEngine();
+
+ if (props.swipeable) {
+ dragHandler.init(emblaApi);
+ } else {
+ dragHandler.destroy();
+ }
+ }, [emblaApi, props.swipeable]);
+
+ useEffect(() => {
+ if (emblaApi && api.contentIndex !== emblaApi.selectedScrollSnap()) {
+ const engine = emblaApi.internalEngine();
+
+ /**
+ * We want the content to quickly snap into place when a tab changes.
+ * However, using a very small duration can result in an underdamped spring, which produces a rubber-band (oscillatory) effect.
+ *
+ * To avoid that, we intentionally use a low duration and friction so that the motion feels fast (snappy)
+ * without overshooting. The underlying idea is to map our parameters to a physical spring model—a damped harmonic oscillator—
+ * so we can control the dynamics in a physically intuitive way.
+ *
+ * In embla, the acceleration is modeled as:
+ * a = (displacement * friction) / duration - velocity * (1 - friction)
+ *
+ * In a classical damped harmonic oscillator (assuming unit mass, m = 1), the acceleration is:
+ * a = (stiffness * displacement - damping * velocity)
+ *
+ * By comparing the two equations, we can equate the coefficients for displacement and velocity:
+ *
+ * For the displacement term:
+ * stiffness = friction / duration
+ *
+ * For the velocity term:
+ * damping = 1 - friction
+ *
+ * Additionally, the damping ratio (zeta) for a damped oscillator is defined as:
+ * zeta = damping / (2 * sqrt(stiffness))
+ *
+ * Substituting the derived expressions for stiffness and damping gives:
+ * zeta = (1 - friction) / (2 * sqrt(friction / duration))
+ *
+ * This damping ratio (zeta) tells us the nature of the response:
+ * - zeta < 1: Underdamped (oscillatory, rubber-band effect)
+ * - zeta = 1: Critically damped (fast snap without overshoot)
+ * - zeta > 1: Overdamped (slow response)
+ *
+ * For our current configuration, we use:
+ *
+ * duration = 4
+ * friction = 0.4
+ *
+ * Which gives:
+ *
+ * stiffness = 0.4 / 4 = 0.1
+ * damping = 1 - 0.4 = 0.6
+ *
+ * And the damping ratio becomes:
+ *
+ * zeta = 0.6 / (2 * sqrt(0.1))
+ * = 0.6 / (2 * 0.31623...)
+ * = 0.6 / 0.63246...
+ * = 0.94868...
+ *
+ * Since zeta is close to 1, this spring is nearly critically damped. This is enough for our usage,
+ * ensuring that the animation snaps quickly without overshooting (avoiding the rubber-band effect)
+ * when switching tabs.
+ */
+ engine.scrollBody.useDuration(4).useFriction(0.4);
+ engine.scrollTo.index(api.contentIndex, 0);
+ }
+ }, [emblaApi, api.contentIndex]);
+
+ return {
+ refs: {
+ root: emblaRef,
+ },
+ autoHeight: props.autoHeight,
+ };
+};
+
+export interface UseTabsCarouselProps extends UseTabsCarouselStateProps {}
+
+export type UseTabsCarouselReturn = ReturnType;
+
+export const useTabsCarousel = (props: UseTabsCarouselProps) => {
+ const { refs, autoHeight } = useTabsCarouselState(props);
+
+ const stateProps = elementProps({
+ "data-carousel": "",
+ "data-auto-height": dataAttr(autoHeight),
+ });
+
+ return {
+ refs,
+ stateProps,
+ rootProps: elementProps({
+ ...stateProps,
+ }),
+ cameraProps: elementProps({
+ ...stateProps,
+ }),
+ };
+};
diff --git a/packages/react-headless/tabs/src/useTabsCarouselContext.tsx b/packages/react-headless/tabs/src/useTabsCarouselContext.tsx
new file mode 100644
index 000000000..f9ae5ced0
--- /dev/null
+++ b/packages/react-headless/tabs/src/useTabsCarouselContext.tsx
@@ -0,0 +1,19 @@
+import { createContext, useContext } from "react";
+import type { UseTabsCarouselReturn } from "./useTabsCarousel";
+
+export interface UseTabsCarouselContext extends UseTabsCarouselReturn {}
+
+const TabsCarouselContext = createContext(null);
+
+export const TabsCarouselProvider = TabsCarouselContext.Provider;
+
+export function useTabsCarouselContext({
+ strict = true,
+}: { strict?: T } = {}): T extends false ? UseTabsCarouselContext | null : UseTabsCarouselContext {
+ const context = useContext(TabsCarouselContext);
+ if (!context && strict) {
+ throw new Error("useTabsCarouselContext must be used within a TabsCarousel");
+ }
+
+ return context as UseTabsCarouselContext;
+}
diff --git a/packages/react-headless/tabs/src/useTabsContext.tsx b/packages/react-headless/tabs/src/useTabsContext.tsx
new file mode 100644
index 000000000..62172ea1e
--- /dev/null
+++ b/packages/react-headless/tabs/src/useTabsContext.tsx
@@ -0,0 +1,19 @@
+import { createContext, useContext } from "react";
+import type { UseTabsReturn } from "./useTabs";
+
+export interface UseTabsContext extends UseTabsReturn {}
+
+const TabsContext = createContext(null);
+
+export const TabsProvider = TabsContext.Provider;
+
+export function useTabsContext({
+ strict = true,
+}: { strict?: T } = {}): T extends false ? UseTabsContext | null : UseTabsContext {
+ const context = useContext(TabsContext);
+ if (!context && strict) {
+ throw new Error("useTabsContext must be used within a Tabs");
+ }
+
+ return context as UseTabsContext;
+}
diff --git a/packages/react-headless/tabs/src/useTabsTriggerContext.tsx b/packages/react-headless/tabs/src/useTabsTriggerContext.tsx
new file mode 100644
index 000000000..fe9116c60
--- /dev/null
+++ b/packages/react-headless/tabs/src/useTabsTriggerContext.tsx
@@ -0,0 +1,19 @@
+import { createContext, useContext } from "react";
+import type { GetTriggerPropsReturn } from "./useTabs";
+
+export interface UseTabsTriggerContext extends GetTriggerPropsReturn {}
+
+const TabsTriggerContext = createContext(null);
+
+export const TabsTriggerProvider = TabsTriggerContext.Provider;
+
+export function useTabsTriggerContext({
+ strict = true,
+}: { strict?: T } = {}): T extends false ? UseTabsTriggerContext | null : UseTabsTriggerContext {
+ const context = useContext(TabsTriggerContext);
+ if (!context && strict) {
+ throw new Error("useTabsTriggerContext must be used within a TabsTrigger");
+ }
+
+ return context as UseTabsTriggerContext;
+}
diff --git a/packages/react-headless/tabs/src/utils.ts b/packages/react-headless/tabs/src/utils.ts
new file mode 100644
index 000000000..92d38ba2d
--- /dev/null
+++ b/packages/react-headless/tabs/src/utils.ts
@@ -0,0 +1,13 @@
+export function getPrevIndex(index: number, length: number): number {
+ if (length <= 0) {
+ throw new Error("Length must be a positive number.");
+ }
+ return (index - 1 + length) % length;
+}
+
+export function getNextIndex(index: number, length: number): number {
+ if (length <= 0) {
+ throw new Error("Length must be a positive number.");
+ }
+ return (index + 1) % length;
+}
diff --git a/packages/react/src/components/ChipTabs/ChipTabs.namespace.ts b/packages/react/src/components/ChipTabs/ChipTabs.namespace.ts
new file mode 100644
index 000000000..f2d8bb9a8
--- /dev/null
+++ b/packages/react/src/components/ChipTabs/ChipTabs.namespace.ts
@@ -0,0 +1,16 @@
+export {
+ ChipTabsContent as Content,
+ ChipTabsList as List,
+ ChipTabsRoot as Root,
+ ChipTabsCarouselCamera as CarouselCamera,
+ ChipTabsCarousel as Carousel,
+ ChipTabsTrigger as Trigger,
+ ChipTabsTriggerLabel as TriggerLabel,
+ type ChipTabsContentProps as ContentProps,
+ type ChipTabsListProps as ListProps,
+ type ChipTabsRootProps as RootProps,
+ type ChipTabsCarouselCameraProps as CarouselCameraProps,
+ type ChipTabsCarouselProps as CarouselProps,
+ type ChipTabsTriggerLabelProps as TriggerLabelProps,
+ type ChipTabsTriggerProps as TriggerProps,
+} from "./ChipTabs";
diff --git a/packages/react/src/components/ChipTabs/ChipTabs.tsx b/packages/react/src/components/ChipTabs/ChipTabs.tsx
new file mode 100644
index 000000000..99bd6096f
--- /dev/null
+++ b/packages/react/src/components/ChipTabs/ChipTabs.tsx
@@ -0,0 +1,80 @@
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import {
+ Tabs as TabsPrimitive,
+ useTabsContext,
+ useTabsTriggerContext,
+} from "@seed-design/react-tabs";
+import { chipTabs, type ChipTabsVariantProps } from "@seed-design/recipe/chipTabs";
+import type React from "react";
+import { createStyleContext } from "../../utils/createStyleContext";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+
+const { withProvider, withContext } = createStyleContext(chipTabs);
+const withStateProps = createWithStateProps([useTabsContext, useTabsTriggerContext], {
+ strict: false,
+});
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ChipTabsRootProps extends ChipTabsVariantProps, TabsPrimitive.RootProps {}
+
+export const ChipTabsRoot = withProvider(
+ TabsPrimitive.Root,
+ "root",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ChipTabsListProps extends TabsPrimitive.ListProps {}
+
+export const ChipTabsList = withContext(
+ TabsPrimitive.List,
+ "list",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ChipTabsTriggerProps extends TabsPrimitive.TriggerProps {}
+
+export const ChipTabsTrigger = withContext