@team-monolith/cds 1.111.0 → 1.111.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/patterns/Tabs.d.ts +8 -1
- package/dist/patterns/Tabs.js +8 -2
- package/package.json +1 -1
package/dist/patterns/Tabs.d.ts
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
import { ReactNode, MouseEvent } from "react";
|
|
2
|
+
export declare const tabsClasses: {
|
|
3
|
+
readonly root: "Tabs";
|
|
4
|
+
readonly tabBar: "Tabs-tabBar";
|
|
5
|
+
readonly tab: "Tabs-tab";
|
|
6
|
+
readonly activeIndicator: "Tabs-activeIndicator";
|
|
7
|
+
};
|
|
2
8
|
export type TabsProps = {
|
|
9
|
+
className?: string;
|
|
3
10
|
/** 현재 활성화된 탭의 키 */
|
|
4
11
|
activeKey: string;
|
|
5
12
|
/** 탭 클릭 시 호출되는 콜백 함수 */
|
|
@@ -16,4 +23,4 @@ export type TabsProps = {
|
|
|
16
23
|
* - https://www.figma.com/design/cxqE6nECkuqOlfdMOWjIZE/2025---Design-Working-file?node-id=2596-24381&m=dev
|
|
17
24
|
* - /images/2025-08-04-09-37-39.png
|
|
18
25
|
*/
|
|
19
|
-
export declare function Tabs({ activeKey, onTabClick, items }: TabsProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
26
|
+
export declare function Tabs({ className, activeKey, onTabClick, items }: TabsProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
package/dist/patterns/Tabs.js
CHANGED
|
@@ -3,14 +3,20 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
|
|
|
3
3
|
import { css } from "@emotion/react";
|
|
4
4
|
import styled from "@emotion/styled";
|
|
5
5
|
import { HOVER } from "../utils/hover";
|
|
6
|
+
export const tabsClasses = {
|
|
7
|
+
root: "Tabs",
|
|
8
|
+
tabBar: "Tabs-tabBar",
|
|
9
|
+
tab: "Tabs-tab",
|
|
10
|
+
activeIndicator: "Tabs-activeIndicator",
|
|
11
|
+
};
|
|
6
12
|
/**
|
|
7
13
|
* 탭 컴포넌트
|
|
8
14
|
* - https://www.figma.com/design/cxqE6nECkuqOlfdMOWjIZE/2025---Design-Working-file?node-id=2596-24381&m=dev
|
|
9
15
|
* - /images/2025-08-04-09-37-39.png
|
|
10
16
|
*/
|
|
11
|
-
export function Tabs({ activeKey, onTabClick, items }) {
|
|
17
|
+
export function Tabs({ className, activeKey, onTabClick, items }) {
|
|
12
18
|
var _a;
|
|
13
|
-
return (_jsxs(Wrapper, { children: [_jsx(TabBar, { children: items.map((item) => (_jsxs(Tab, { onClick: (event) => onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(item.key, event), active: activeKey === item.key, children: [item.label, activeKey === item.key && _jsx(ActiveIndicator, {})] }, item.key))) }), (_a = items.find((item) => item.key === activeKey)) === null || _a === void 0 ? void 0 : _a.children] }));
|
|
19
|
+
return (_jsxs(Wrapper, { className: [tabsClasses.root, className].filter(Boolean).join(" "), children: [_jsx(TabBar, { className: tabsClasses.tabBar, children: items.map((item) => (_jsxs(Tab, { className: tabsClasses.tab, onClick: (event) => onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(item.key, event), active: activeKey === item.key, children: [item.label, activeKey === item.key && (_jsx(ActiveIndicator, { className: tabsClasses.activeIndicator }))] }, item.key))) }), (_a = items.find((item) => item.key === activeKey)) === null || _a === void 0 ? void 0 : _a.children] }));
|
|
14
20
|
}
|
|
15
21
|
const Wrapper = styled.div `
|
|
16
22
|
display: flex;
|