From 5f167e1d269fbb30625e4ac17ea5478f9ca26a98 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=98=84=EC=88=98?=
<54893898+junghyeonsu@users.noreply.github.com>
Date: Wed, 4 Dec 2024 16:37:12 +0900
Subject: [PATCH] =?UTF-8?q?feat(headless:tabs):=20isSwipeable=20prop?=
=?UTF-8?q?=EC=9D=B4=20false=EB=A9=B4=20dragProp=EC=9D=84=20spread?=
=?UTF-8?q?=ED=95=98=EC=A7=80=20=EC=95=8A=EA=B2=8C=20=EB=B3=80=EA=B2=BD?=
=?UTF-8?q?=ED=95=B4=EC=9A=94=20(#488)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* feat: tabs overflow to visible
* chore: stylesheet bump
* chore: bump
* chore: useSwipeable bump
---
docs/components/example/index.json | 2 +-
docs/package.json | 6 +++---
docs/public/__registry__/ui/tabs.json | 8 +++++---
docs/registry/ui/tabs.tsx | 19 ++++++++-----------
examples/stackflow-spa/package.json | 6 +++---
packages/react-headless/tabs/CHANGELOG.md | 6 ++++++
packages/react-headless/tabs/package.json | 2 +-
.../react-headless/tabs/src/useSwipeable.ts | 5 ++++-
packages/recipe/CHANGELOG.md | 12 ++++++++++++
packages/recipe/package.json | 2 +-
packages/stylesheet/CHANGELOG.md | 12 ++++++++++++
packages/stylesheet/package.json | 2 +-
yarn.lock | 18 +++++++++---------
13 files changed, 66 insertions(+), 34 deletions(-)
diff --git a/docs/components/example/index.json b/docs/components/example/index.json
index 4fb15c75d..65fd6d222 100644
--- a/docs/components/example/index.json
+++ b/docs/components/example/index.json
@@ -123,7 +123,7 @@
"tabs-alert": "import {\n Tabs,\n TabContent,\n TabContentList,\n TabTrigger,\n TabTriggerList,\n} from \"seed-design/ui/tabs\";\n\nexport default function TabsAlert() {\n return (\n \n \n \n 라벨1\n \n 라벨2\n \n 라벨3\n \n \n \n Content 1\n \n \n Content 2\n \n \n Content 3\n \n \n \n
\n );\n}\n\nconst Content = (props: React.PropsWithChildren) => {\n return (\n \n {props.children}\n \n );\n};",
"tabs-disabled": "import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from \"seed-design/ui/tabs\";\n\nexport default function TabsDisabled() {\n return (\n \n \n \n 라벨1\n \n 라벨2\n \n 라벨3\n \n \n \n Content 1\n \n \n Content 2\n \n \n Content 3\n \n \n \n
\n );\n}\n\nconst Content = (props: React.PropsWithChildren) => {\n return (\n \n {props.children}\n \n );\n};",
"tabs-dynamic-height": "import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from \"seed-design/ui/tabs\";\n\nexport default function TabsDynamicHeight() {\n return (\n \n
\n \n 라벨1\n 라벨2\n 라벨3\n \n \n \n Content 1\n \n \n Content 2\n \n \n Content 3\n \n \n \n
아래 컨텐츠
\n
\n \n \n 라벨1\n 라벨2\n 라벨3\n \n \n \n Content 1\n \n \n Content 2\n \n \n Content 3\n \n \n \n
\n );\n}\n\nconst Content = (props: React.PropsWithChildren<{ height: string }>) => {\n const { height, children } = props;\n return (\n \n {children}\n \n );\n};",
+ "tabs-fix-trigger-list": "import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from \"seed-design/ui/tabs\";\n\nexport default function TabsFixTriggerList() {\n return (\n // 600은 화면 높이라고 가정합니다.\n \n \n \n 라벨1\n 라벨2\n 라벨3\n \n \n \n Content 1\n \n \n Content 2\n \n \n Content 3\n \n \n \n
\n );\n}\n\nconst Content = (props: React.PropsWithChildren<{ height: string }>) => {\n const { height, children } = props;\n return (\n \n {children}\n \n );\n};",
"tabs-layout-fill": "import {\n Tabs,\n TabContent,\n TabContentList,\n TabTrigger,\n TabTriggerList,\n} from \"seed-design/ui/tabs\";\n\nexport default function TabsLayoutFill() {\n return (\n \n \n \n 라벨1\n 라벨2\n 라벨3\n \n \n \n Content 1\n \n \n Content 2\n \n \n Content 3\n \n \n \n
\n );\n}\n\nconst Content = (props: React.PropsWithChildren) => {\n return (\n \n {props.children}\n \n );\n};",
"tabs-layout-hug": "import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from \"seed-design/ui/tabs\";\n\nexport default function TabsLayoutHug() {\n return (\n \n \n \n 라벨1\n 라벨2\n 라벨3\n \n \n \n Content 1\n \n \n Content 2\n \n \n Content 3\n \n \n \n
\n );\n}\n\nconst Content = (props: React.PropsWithChildren) => {\n return (\n \n {props.children}\n \n );\n};",
"tabs-preview": "import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from \"seed-design/ui/tabs\";\n\nexport default function TabsPreview() {\n return (\n \n \n \n 라벨1\n 라벨2\n 라벨3\n \n \n \n Content 1\n \n \n Content 2\n \n \n Content 3\n \n \n \n
\n );\n}\n\nconst Content = (props: React.PropsWithChildren) => {\n return (\n \n {props.children}\n \n );\n};",
diff --git a/docs/package.json b/docs/package.json
index 5f3ba523d..a29ad62eb 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -26,11 +26,11 @@
"@seed-design/react-radio-group": "0.0.0-alpha-20241030023710",
"@seed-design/react-segmented-control": "workspace:^",
"@seed-design/react-switch": "0.0.0-alpha-20241030023710",
- "@seed-design/react-tabs": "0.0.0-alpha-20241203133940",
- "@seed-design/recipe": "0.0.0-alpha-20241203133940",
+ "@seed-design/react-tabs": "0.0.0-alpha-20241204061301",
+ "@seed-design/recipe": "0.0.0-alpha-20241204032829",
"@seed-design/rootage-cli": "0.0.0",
"@seed-design/rootage-core": "0.0.0",
- "@seed-design/stylesheet": "3.0.0-alpha-20241203133940",
+ "@seed-design/stylesheet": "3.0.0-alpha-20241204032654",
"@stackflow/config": "^1.2.0",
"@stackflow/core": "^1.1.0",
"@stackflow/plugin-basic-ui": "^1.10.0",
diff --git a/docs/public/__registry__/ui/tabs.json b/docs/public/__registry__/ui/tabs.json
index 96e4b3369..6fc3caf28 100644
--- a/docs/public/__registry__/ui/tabs.json
+++ b/docs/public/__registry__/ui/tabs.json
@@ -1,11 +1,13 @@
{
"name": "tabs",
- "dependencies": ["@seed-design/react-tabs@alpha"],
+ "dependencies": [
+ "@seed-design/react-tabs@alpha"
+ ],
"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\nimport \"@seed-design/stylesheet/tabs.css\";\nimport \"@seed-design/stylesheet/tab.css\";\n\ntype Assign = Omit & U;\n\ninterface TabsContextValue {\n api: ReturnType & 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}\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 Assign, UseTabsProps>,\n Omit {\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\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 } = props;\n const useTabsProps = useTabs(props);\n const useSwipeableProps = useSwipeable({\n isSwipeable,\n onSwipeLeftToRight: useTabsProps.movePrev,\n onSwipeRightToLeft: useTabsProps.moveNext,\n });\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 ...useSwipeableProps,\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 \n );\n});\nTabTriggerList.displayName = \"TabTriggerList\";\n\nexport interface TabTriggerProps\n extends Assign, TriggerProps> {\n /**\n * @default false\n */\n alert?: boolean;\n}\n\nexport const TabTrigger = React.forwardRef(\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 \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 } = useTabsContext();\n const {\n tabContentListProps,\n tabContentCameraProps,\n getDragProps,\n currentTabEnabledIndex,\n swipeMoveX,\n swipeStatus,\n tabEnabledCount,\n } = api;\n const { contentList, contentCamera } = classNames;\n const dragProps = getDragProps();\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 );\n});\nTabIndicator.displayName = \"TabIndicator\";\n"
+ "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\nimport \"@seed-design/stylesheet/tabs.css\";\nimport \"@seed-design/stylesheet/tab.css\";\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}\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 Assign, UseTabsProps>,\n Omit {\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\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 } = 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 \n );\n});\nTabTriggerList.displayName = \"TabTriggerList\";\n\nexport interface TabTriggerProps\n extends Assign, TriggerProps> {\n /**\n * @default false\n */\n alert?: boolean;\n}\n\nexport const TabTrigger = React.forwardRef(\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 \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 } = 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 });\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 );\n});\nTabIndicator.displayName = \"TabIndicator\";\n"
}
]
-}
+}
\ No newline at end of file
diff --git a/docs/registry/ui/tabs.tsx b/docs/registry/ui/tabs.tsx
index f77b536fc..1cbcd670c 100644
--- a/docs/registry/ui/tabs.tsx
+++ b/docs/registry/ui/tabs.tsx
@@ -20,7 +20,7 @@ import "@seed-design/stylesheet/tab.css";
type Assign = Omit & U;
interface TabsContextValue {
- api: ReturnType & ReturnType;
+ api: ReturnType;
classNames: ReturnType;
shouldRender: (value: string) => boolean;
@@ -74,11 +74,6 @@ export const Tabs = React.forwardRef(
fixTriggerList = false,
} = props;
const useTabsProps = useTabs(props);
- const useSwipeableProps = useSwipeable({
- isSwipeable,
- onSwipeLeftToRight: useTabsProps.movePrev,
- onSwipeRightToLeft: useTabsProps.moveNext,
- });
const classNames = tabs({
layout,
size,
@@ -92,7 +87,6 @@ export const Tabs = React.forwardRef(
});
const api = {
...useTabsProps,
- ...useSwipeableProps,
};
return (
@@ -205,14 +199,17 @@ export const TabContentList = React.forwardRef<
const {
tabContentListProps,
tabContentCameraProps,
- getDragProps,
currentTabEnabledIndex,
- swipeMoveX,
- swipeStatus,
tabEnabledCount,
+ moveNext,
+ movePrev,
} = api;
const { contentList, contentCamera } = classNames;
- const dragProps = getDragProps();
+ const { dragProps, swipeMoveX, swipeStatus } = useSwipeable({
+ isSwipeable,
+ onSwipeLeftToRight: movePrev,
+ onSwipeRightToLeft: moveNext,
+ });
const getCameraTranslateX = () => {
const MODIFIER = 5;
diff --git a/examples/stackflow-spa/package.json b/examples/stackflow-spa/package.json
index b2af533d7..1d4c604ba 100644
--- a/examples/stackflow-spa/package.json
+++ b/examples/stackflow-spa/package.json
@@ -13,10 +13,10 @@
"@seed-design/react-popover": "0.0.0-alpha-20241030023710",
"@seed-design/react-radio-group": "0.0.0-alpha-20241030023710",
"@seed-design/react-switch": "0.0.0-alpha-20241030023710",
- "@seed-design/react-tabs": "0.0.0-alpha-20241203133940",
+ "@seed-design/react-tabs": "0.0.0-alpha-20241204061301",
"@seed-design/react-text-field": "0.0.0-alpha-20241030023710",
- "@seed-design/recipe": "0.0.0-alpha-20241203133940",
- "@seed-design/stylesheet": "3.0.0-alpha-20241203133940",
+ "@seed-design/recipe": "0.0.0-alpha-20241204032829",
+ "@seed-design/stylesheet": "3.0.0-alpha-20241204032654",
"@seed-design/vars": "0.0.0",
"@stackflow/core": "^1.1.0",
"@stackflow/plugin-basic-ui": "^1.10.1",
diff --git a/packages/react-headless/tabs/CHANGELOG.md b/packages/react-headless/tabs/CHANGELOG.md
index 9f421bf2d..1255948e2 100644
--- a/packages/react-headless/tabs/CHANGELOG.md
+++ b/packages/react-headless/tabs/CHANGELOG.md
@@ -1,5 +1,11 @@
# @seed-design/react-tabs
+## 0.0.0-alpha-20241204061301
+
+### Patch Changes
+
+- useSwipeable dragProps
+
## 0.0.0-alpha-20241203133940
### Patch Changes
diff --git a/packages/react-headless/tabs/package.json b/packages/react-headless/tabs/package.json
index dbc45cc05..9149263d9 100644
--- a/packages/react-headless/tabs/package.json
+++ b/packages/react-headless/tabs/package.json
@@ -1,6 +1,6 @@
{
"name": "@seed-design/react-tabs",
- "version": "0.0.0-alpha-20241203133940",
+ "version": "0.0.0-alpha-20241204061301",
"repository": {
"type": "git",
"url": "git+https://github.com/daangn/seed-design.git",
diff --git a/packages/react-headless/tabs/src/useSwipeable.ts b/packages/react-headless/tabs/src/useSwipeable.ts
index 37bb11cfa..dc8d4cef6 100644
--- a/packages/react-headless/tabs/src/useSwipeable.ts
+++ b/packages/react-headless/tabs/src/useSwipeable.ts
@@ -94,6 +94,7 @@ export const useSwipeable = (props: UseSwipeableProps) => {
},
{
drag: {
+ filterTaps: false,
preventScrollAxis: "y",
preventDefault: true,
swipe: {
@@ -105,9 +106,11 @@ export const useSwipeable = (props: UseSwipeableProps) => {
},
);
+ const dragProps = isSwipeable ? getDragProps() : {};
+
return {
swipeMoveX,
swipeStatus,
- getDragProps,
+ dragProps,
};
};
diff --git a/packages/recipe/CHANGELOG.md b/packages/recipe/CHANGELOG.md
index d96721b56..3788a7b75 100644
--- a/packages/recipe/CHANGELOG.md
+++ b/packages/recipe/CHANGELOG.md
@@ -1,5 +1,17 @@
# @seed-design/recipe
+## 0.0.0-alpha-20241204032829
+
+### Patch Changes
+
+- revert tabs overflowX (to hidden)
+
+## 0.0.0-alpha-20241204031604
+
+### Patch Changes
+
+- tabs overflowX to visible
+
## 0.0.0-alpha-20241203133940
### Patch Changes
diff --git a/packages/recipe/package.json b/packages/recipe/package.json
index 5965c4552..e5f943360 100644
--- a/packages/recipe/package.json
+++ b/packages/recipe/package.json
@@ -1,6 +1,6 @@
{
"name": "@seed-design/recipe",
- "version": "0.0.0-alpha-20241203133940",
+ "version": "0.0.0-alpha-20241204032829",
"repository": {
"type": "git",
"url": "git+https://github.com/daangn/seed-design.git",
diff --git a/packages/stylesheet/CHANGELOG.md b/packages/stylesheet/CHANGELOG.md
index 25b64fe51..0c651edef 100644
--- a/packages/stylesheet/CHANGELOG.md
+++ b/packages/stylesheet/CHANGELOG.md
@@ -1,5 +1,17 @@
# @seed-design/stylesheet
+## 3.0.0-alpha-20241204032654
+
+### Patch Changes
+
+- revert tabs overflowX (to hidden)
+
+## 3.0.0-alpha-20241204032110
+
+### Patch Changes
+
+- tabs overflowX to visible
+
## 3.0.0-alpha-20241203133940
### Patch Changes
diff --git a/packages/stylesheet/package.json b/packages/stylesheet/package.json
index e85c5ac8a..781c264bb 100644
--- a/packages/stylesheet/package.json
+++ b/packages/stylesheet/package.json
@@ -1,6 +1,6 @@
{
"name": "@seed-design/stylesheet",
- "version": "3.0.0-alpha-20241203133940",
+ "version": "3.0.0-alpha-20241204032654",
"repository": {
"type": "git",
"url": "git+https://github.com/daangn/seed-design.git",
diff --git a/yarn.lock b/yarn.lock
index c91833a37..af7d50c74 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6426,7 +6426,7 @@ __metadata:
languageName: unknown
linkType: soft
-"@seed-design/react-tabs@0.0.0-alpha-20241203133940, @seed-design/react-tabs@workspace:packages/react-headless/tabs":
+"@seed-design/react-tabs@0.0.0-alpha-20241204061301, @seed-design/react-tabs@workspace:packages/react-headless/tabs":
version: 0.0.0-use.local
resolution: "@seed-design/react-tabs@workspace:packages/react-headless/tabs"
dependencies:
@@ -6514,7 +6514,7 @@ __metadata:
languageName: unknown
linkType: soft
-"@seed-design/recipe@0.0.0-alpha-20241203133940, @seed-design/recipe@workspace:packages/recipe":
+"@seed-design/recipe@0.0.0-alpha-20241204032829, @seed-design/recipe@workspace:packages/recipe":
version: 0.0.0-use.local
resolution: "@seed-design/recipe@workspace:packages/recipe"
dependencies:
@@ -6568,10 +6568,10 @@ __metadata:
"@seed-design/react-popover": 0.0.0-alpha-20241030023710
"@seed-design/react-radio-group": 0.0.0-alpha-20241030023710
"@seed-design/react-switch": 0.0.0-alpha-20241030023710
- "@seed-design/react-tabs": 0.0.0-alpha-20241203133940
+ "@seed-design/react-tabs": 0.0.0-alpha-20241204061301
"@seed-design/react-text-field": 0.0.0-alpha-20241030023710
- "@seed-design/recipe": 0.0.0-alpha-20241203133940
- "@seed-design/stylesheet": 3.0.0-alpha-20241203133940
+ "@seed-design/recipe": 0.0.0-alpha-20241204032829
+ "@seed-design/stylesheet": 3.0.0-alpha-20241204032654
"@seed-design/vars": 0.0.0
"@stackflow/core": ^1.1.0
"@stackflow/plugin-basic-ui": ^1.10.1
@@ -6594,7 +6594,7 @@ __metadata:
languageName: unknown
linkType: soft
-"@seed-design/stylesheet@3.0.0-alpha-20241203133940, @seed-design/stylesheet@workspace:packages/stylesheet":
+"@seed-design/stylesheet@3.0.0-alpha-20241204032654, @seed-design/stylesheet@workspace:packages/stylesheet":
version: 0.0.0-use.local
resolution: "@seed-design/stylesheet@workspace:packages/stylesheet"
dependencies:
@@ -10818,11 +10818,11 @@ __metadata:
"@seed-design/react-radio-group": 0.0.0-alpha-20241030023710
"@seed-design/react-segmented-control": "workspace:^"
"@seed-design/react-switch": 0.0.0-alpha-20241030023710
- "@seed-design/react-tabs": 0.0.0-alpha-20241203133940
- "@seed-design/recipe": 0.0.0-alpha-20241203133940
+ "@seed-design/react-tabs": 0.0.0-alpha-20241204061301
+ "@seed-design/recipe": 0.0.0-alpha-20241204032829
"@seed-design/rootage-cli": 0.0.0
"@seed-design/rootage-core": 0.0.0
- "@seed-design/stylesheet": 3.0.0-alpha-20241203133940
+ "@seed-design/stylesheet": 3.0.0-alpha-20241204032654
"@stackflow/config": ^1.2.0
"@stackflow/core": ^1.1.0
"@stackflow/plugin-basic-ui": ^1.10.0