@kimdw-rtk/ui 0.0.0 → 0.0.3

package/dist/components/Skeleton/Skeleton.css.js

@@ -0,0 +1,19 @@
+import { keyframes } from '@vanilla-extract/css';
+import { styleWithLayer } from '#styleUtils';
+import { theme } from '#themes';
+const shimmer = keyframes({
+    '0%': {
+        backgroundPosition: '-300% 0',
+    },
+    '100%': {
+        backgroundPosition: '300% 0',
+    },
+});
+export const skeleton = styleWithLayer({
+    display: 'block',
+    maxWidth: '100%',
+    borderRadius: theme.borderRadius,
+    background: `linear-gradient(90deg, rgba(${theme.color.accent}, 0.4) 30%, rgba(${theme.color.accent}, 0.2) 65%, rgba(${theme.color.accent}, 0.4))`,
+    backgroundSize: '300% 100%',
+    animation: `${shimmer} 5s linear 0s infinite`,
+});

package/dist/components/Skeleton/Skeleton.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Skeleton.spec.d.ts.map

package/dist/components/Skeleton/Skeleton.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.spec.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.spec.tsx"],"names":[],"mappings":""}

package/{src/components/Skeleton/Skeleton.spec.tsx → dist/components/Skeleton/Skeleton.spec.js}

@@ -1,6 +1,5 @@
-import { Skeleton } from '.';
-import { uiTest } from '../../tests/uiTest';
-
-describe('Skeleton 컴포넌트', () => {
-  uiTest(Skeleton, 'Skeleton');
-});
+import { Skeleton } from '.';
+import { uiTest } from '../../tests/uiTest';
+describe('Skeleton 컴포넌트', () => {
+    uiTest(Skeleton, 'Skeleton');
+});

package/dist/components/Skeleton/index.d.ts

@@ -0,0 +1,9 @@
+import { type CSSProperties } from 'react';
+import type { UIComponent } from '#types';
+interface SkeletonProps extends UIComponent<'div'> {
+    width?: CSSProperties['width'];
+    height?: CSSProperties['height'];
+}
+export declare const Skeleton: import("react").ForwardRefExoticComponent<Omit<SkeletonProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Skeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAKvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAI1C,UAAU,aAAc,SAAQ,WAAW,CAAC,KAAK,CAAC;IAChD,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;CAClC;AAED,eAAO,MAAM,QAAQ,uHAWpB,CAAC"}

package/dist/components/Skeleton/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { clsx } from 'clsx';
+import { sx } from '#styles';
+import * as s from './Skeleton.css';
+export const Skeleton = forwardRef(({ className, width, height, style, sx: propSx, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: clsx(s.skeleton, className, sx(propSx)), style: { ...style, width, height }, ...props }));
+});
+Skeleton.displayName = 'Skeleton';

package/dist/components/Table/Table.css.d.ts

@@ -0,0 +1,3 @@
+export declare const table: string;
+export declare const striped: string;
+//# sourceMappingURL=Table.css.d.ts.map

package/dist/components/Table/Table.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.css.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,QAKhB,CAAC;AAEH,eAAO,MAAM,OAAO,QAAqB,CAAC"}

package/{src/components/Table/Table.css.ts → dist/components/Table/Table.css.js}

@@ -1,10 +1,7 @@
-import { styleWithLayer } from '#styleUtils';
-
-export const table = styleWithLayer({
-  width: '100%',
-
-  tableLayout: 'fixed',
-  borderSpacing: '0',
-});
-
-export const striped = styleWithLayer({});
+import { styleWithLayer } from '#styleUtils';
+export const table = styleWithLayer({
+    width: '100%',
+    tableLayout: 'fixed',
+    borderSpacing: '0',
+});
+export const striped = styleWithLayer({});

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,8 @@
+import type { UIComponent } from '#types';
+import * as s from './Table.css';
+interface TableProps extends UIComponent<'table'> {
+    isStriped?: boolean;
+}
+export declare const Table: import("react").ForwardRefExoticComponent<Omit<TableProps, "ref"> & import("react").RefAttributes<HTMLTableElement>>;
+export { s as tableCss };
+//# sourceMappingURL=Table.d.ts.map

package/dist/components/Table/Table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,OAAO,KAAK,CAAC,MAAM,aAAa,CAAC;AAEjC,UAAU,UAAW,SAAQ,WAAW,CAAC,OAAO,CAAC;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,KAAK,sHAUjB,CAAC;AAGF,OAAO,EAAE,CAAC,IAAI,QAAQ,EAAE,CAAC"}

package/dist/components/Table/Table.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { sx } from '#styles';
+import * as s from './Table.css';
+export const Table = forwardRef(({ isStriped, className, sx: propSx, ...props }, ref) => {
+    return (_jsx("table", { ref: ref, className: clsx(s.table, isStriped && s.striped, sx(propSx), className), ...props }));
+});
+Table.displayName = 'Table';
+export { s as tableCss };

package/dist/components/Table/Table.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Table.spec.d.ts.map

package/dist/components/Table/Table.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.spec.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.spec.tsx"],"names":[],"mappings":""}

package/dist/components/Table/Table.spec.js

@@ -0,0 +1,10 @@
+import { Table } from '#components';
+import { uiTest } from '../../tests/uiTest';
+describe('Table 컴포넌트', () => {
+    uiTest(Table, 'Table');
+    // uiTest(TableBody, 'TableBody');
+    // uiTest(TableCell, 'TableCell');
+    // uiTest(TableHead, 'TableHead');
+    // uiTest(TableHeader, 'TableHeader');
+    // uiTest(TableRow, 'TableRow');
+});

package/dist/components/Table/TableBody.d.ts

@@ -0,0 +1,5 @@
+import type { UIComponent } from '#types';
+type TableBodyProps = UIComponent<'tbody'>;
+export declare const TableBody: ({ className, sx: propSx, ...props }: TableBodyProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TableBody.d.ts.map

package/dist/components/Table/TableBody.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableBody.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableBody.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,KAAK,cAAc,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;AAE3C,eAAO,MAAM,SAAS,GAAI,qCAIvB,cAAc,4CAEhB,CAAC"}

package/dist/components/Table/TableBody.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { sx } from '#styles';
+export const TableBody = ({ className, sx: propSx, ...props }) => {
+    return _jsx("tbody", { className: clsx(className, sx(propSx)), ...props });
+};

package/dist/components/Table/TableCell.css.d.ts

@@ -0,0 +1,2 @@
+export declare const tableCell: string;
+//# sourceMappingURL=TableCell.css.d.ts.map

package/dist/components/Table/TableCell.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.css.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableCell.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS,QAoCpB,CAAC"}

package/dist/components/Table/TableCell.css.js

@@ -0,0 +1,32 @@
+import { styleWithLayer } from '#styleUtils';
+import { theme } from '#themes';
+import { striped } from './Table.css';
+import { interactive } from './TableRow.css';
+export const tableCell = styleWithLayer({
+    padding: '0.5em',
+    transition: 'background-color 0.1s ease, color 0.1s ease',
+    selectors: {
+        [`${interactive} > &`]: {
+            cursor: 'pointer',
+        },
+        'tr > &:first-child': {
+            borderTopLeftRadius: theme.borderRadius,
+            borderBottomLeftRadius: theme.borderRadius,
+        },
+        'tr > &:last-child': {
+            borderTopRightRadius: theme.borderRadius,
+            borderBottomRightRadius: theme.borderRadius,
+        },
+        'tbody > tr:hover > &': {
+            backgroundColor: `rgb(${theme.color.accent})`,
+            color: `rgb(${theme.color['accent-foreground']})`,
+        },
+        [`${striped} > tbody > tr:nth-of-type(odd) > &`]: {
+            backgroundColor: `rgb(${theme.color.card})`,
+            color: `rgb(${theme.color['accent-foreground']})`,
+        },
+        [`${striped} > tbody > tr:nth-of-type(odd):hover > &`]: {
+            backgroundColor: `rgb(${theme.color.accent})`,
+        },
+    },
+});

package/dist/components/Table/TableCell.d.ts

@@ -0,0 +1,9 @@
+import { type CSSProperties } from 'react';
+import type { UIComponent } from '#types';
+interface TableCellProps extends UIComponent<'td'> {
+    width?: CSSProperties['width'];
+    textAlign?: CSSProperties['textAlign'];
+}
+export declare const TableCell: ({ width, textAlign, style, className, sx: propSx, ...props }: TableCellProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TableCell.d.ts.map

package/dist/components/Table/TableCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableCell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAK3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAI1C,UAAU,cAAe,SAAQ,WAAW,CAAC,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,SAAS,GAAI,8DAOvB,cAAc,4CAQhB,CAAC"}

package/dist/components/Table/TableCell.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import {} from 'react';
+import clsx from 'clsx';
+import { sx } from '#styles';
+import * as s from './TableCell.css';
+export const TableCell = ({ width, textAlign, style, className, sx: propSx, ...props }) => {
+    return (_jsx("td", { style: { ...style, width, textAlign }, className: clsx(s.tableCell, className, sx(propSx)), ...props }));
+};

package/dist/components/Table/TableHead.css.d.ts

@@ -0,0 +1,2 @@
+export declare const tableHead: string;
+//# sourceMappingURL=TableHead.css.d.ts.map

package/dist/components/Table/TableHead.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHead.css.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableHead.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,QAMpB,CAAC"}

package/dist/components/Table/TableHead.css.js

@@ -0,0 +1,8 @@
+import { styleWithLayer } from '#styleUtils';
+import { theme } from '#themes';
+export const tableHead = styleWithLayer({
+    padding: '0.5em 0.625em',
+    color: `rgb(${theme.color['accent-foreground']})`,
+    fontSize: '0.9375em',
+    fontWeight: '500',
+});

package/dist/components/Table/TableHead.d.ts

@@ -0,0 +1,9 @@
+import { type CSSProperties } from 'react';
+import type { UIComponent } from '#types';
+interface TableHeadProps extends UIComponent<'th'> {
+    width?: CSSProperties['width'];
+    textAlign?: CSSProperties['textAlign'];
+}
+export declare const TableHead: ({ width, textAlign, style, className, sx: propSx, ...props }: TableHeadProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TableHead.d.ts.map

package/dist/components/Table/TableHead.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHead.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableHead.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAK3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAI1C,UAAU,cAAe,SAAQ,WAAW,CAAC,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,SAAS,GAAI,8DAOvB,cAAc,4CAQhB,CAAC"}

package/dist/components/Table/TableHead.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import {} from 'react';
+import clsx from 'clsx';
+import { sx } from '#styles';
+import * as s from './TableHead.css';
+export const TableHead = ({ width, textAlign, style, className, sx: propSx, ...props }) => {
+    return (_jsx("th", { style: { ...style, width, textAlign }, className: clsx(s.tableHead, className, sx(propSx)), ...props }));
+};

package/dist/components/Table/TableHeader.d.ts

@@ -0,0 +1,5 @@
+import type { UIComponent } from '#types';
+type TableHeaderProps = UIComponent<'thead'>;
+export declare const TableHeader: ({ className, sx: propSx, ...props }: TableHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TableHeader.d.ts.map

package/dist/components/Table/TableHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableHeader.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,KAAK,gBAAgB,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;AAE7C,eAAO,MAAM,WAAW,GAAI,qCAIzB,gBAAgB,4CAElB,CAAC"}

package/dist/components/Table/TableHeader.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { sx } from '#styles';
+export const TableHeader = ({ className, sx: propSx, ...props }) => {
+    return _jsx("thead", { className: clsx(className, sx(propSx)), ...props });
+};

package/dist/components/Table/TableRow.css.d.ts

@@ -0,0 +1,2 @@
+export declare const interactive: string;
+//# sourceMappingURL=TableRow.css.d.ts.map

package/dist/components/Table/TableRow.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.css.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableRow.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,QAAqB,CAAC"}

package/{src/components/Table/TableRow.css.ts → dist/components/Table/TableRow.css.js}

@@ -1,3 +1,2 @@
-import { styleWithLayer } from '#styleUtils';
-
-export const interactive = styleWithLayer({});
+import { styleWithLayer } from '#styleUtils';
+export const interactive = styleWithLayer({});

package/dist/components/Table/TableRow.d.ts

@@ -0,0 +1,7 @@
+import type { UIComponent } from '#types';
+interface TableRowProps extends UIComponent<'tr'> {
+    isInteractive?: boolean;
+}
+export declare const TableRow: ({ isInteractive, className, sx: propSx, ...props }: TableRowProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TableRow.d.ts.map

package/dist/components/Table/TableRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableRow.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAI1C,UAAU,aAAc,SAAQ,WAAW,CAAC,IAAI,CAAC;IAC/C,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,QAAQ,GAAI,oDAKtB,aAAa,4CAOf,CAAC"}

package/dist/components/Table/TableRow.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { sx } from '#styles';
+import * as s from './TableRow.css';
+export const TableRow = ({ isInteractive = false, className, sx: propSx, ...props }) => {
+    return (_jsx("tr", { className: clsx(isInteractive && s.interactive, className, sx(propSx)), ...props }));
+};

package/dist/components/Table/index.d.ts

@@ -0,0 +1,7 @@
+export * from './Table';
+export * from './TableBody';
+export * from './TableCell';
+export * from './TableHead';
+export * from './TableHeader';
+export * from './TableRow';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC"}

package/{src/components/Table/index.ts → dist/components/Table/index.js}

@@ -1,6 +1,6 @@
-export * from './Table';
-export * from './TableBody';
-export * from './TableCell';
-export * from './TableHead';
-export * from './TableHeader';
-export * from './TableRow';
+export * from './Table';
+export * from './TableBody';
+export * from './TableCell';
+export * from './TableHead';
+export * from './TableHeader';
+export * from './TableRow';

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

@@ -0,0 +1,7 @@
+import type { UIComponent } from '#types';
+interface TabsProps extends UIComponent<'div'> {
+    defaultValue?: number | string;
+}
+export declare const Tabs: import("react").ForwardRefExoticComponent<Omit<TabsProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=Tabs.d.ts.map

package/dist/components/Tabs/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAI1C,UAAU,SAAU,SAAQ,WAAW,CAAC,KAAK,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC;AAED,eAAO,MAAM,IAAI,mHAiBhB,CAAC"}

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useReducer } from 'react';
+import clsx from 'clsx';
+import { sx } from '#styles';
+import { TabsContext, tabsReducer } from './TabsProvider';
+export const Tabs = forwardRef(({ children, defaultValue, className, sx: propSx, ...props }, ref) => {
+    const [value, setValue] = useReducer(tabsReducer, defaultValue);
+    return (_jsx(TabsContext.Provider, { value: { value, setValue }, children: _jsx("div", { ref: ref, className: clsx(className, sx(propSx)), style: { width: '100%' }, ...props, children: children }) }));
+});
+Tabs.displayName = 'Tabs';

package/dist/components/Tabs/Tabs.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Tabs.spec.d.ts.map

package/dist/components/Tabs/Tabs.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.spec.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.spec.tsx"],"names":[],"mappings":""}

package/dist/components/Tabs/Tabs.spec.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '.';
+import { uiTest } from '../../tests/uiTest';
+describe('Tabs 컴포넌트', () => {
+    uiTest(Tabs, 'Tabs');
+    uiTest(TabsList, 'TabsList');
+    it('TabsTrigger를 클릭하면 해당하는 value의 Content를 보여준다.', () => {
+        render(_jsxs(Tabs, { children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: 1, children: "Trigger1" }), _jsx(TabsTrigger, { value: 2, children: "Trigger2" })] }), _jsx(TabsContent, { value: 1, children: "Content1" }), _jsx(TabsContent, { value: 2, children: "Content2" })] }));
+        fireEvent.click(screen.getByText('Trigger1'));
+        expect(screen.queryByText('Content1')).toBeInTheDocument();
+        expect(screen.queryByText('Content2')).not.toBeInTheDocument();
+        fireEvent.click(screen.getByText('Trigger2'));
+        expect(screen.queryByText('Content1')).not.toBeInTheDocument();
+        expect(screen.queryByText('Content2')).toBeInTheDocument();
+    });
+    it('defaultValue에 해당하는 Content를 기본적으로 보여준다.', () => {
+        render(_jsxs(Tabs, { defaultValue: 2, children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: 1, children: "Trigger1" }), _jsx(TabsTrigger, { value: 2, children: "Trigger2" })] }), _jsx(TabsContent, { value: 1, children: "Content1" }), _jsx(TabsContent, { value: 2, children: "Content2" })] }));
+        expect(screen.queryByText('Content1')).not.toBeInTheDocument();
+        expect(screen.queryByText('Content2')).toBeInTheDocument();
+    });
+});

package/dist/components/Tabs/TabsContent.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+import type { UIComponent } from '#types';
+interface TabsContentProps extends UIComponent<'div'> {
+    children: ReactNode;
+    value: string | number;
+}
+export declare const TabsContent: import("react").ForwardRefExoticComponent<Omit<TabsContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=TabsContent.d.ts.map

package/dist/components/Tabs/TabsContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsContent.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabsContent.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA0B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAK/D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAI1C,UAAU,gBAAiB,SAAQ,WAAW,CAAC,KAAK,CAAC;IACnD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,0HAcvB,CAAC"}

package/dist/components/Tabs/TabsContent.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useContext } from 'react';
+import clsx from 'clsx';
+import { sx } from '#styles';
+import { TabsContext } from './TabsProvider';
+export const TabsContent = forwardRef(({ value, className, sx: propSx, ...props }, ref) => {
+    const tabsContext = useContext(TabsContext);
+    if (tabsContext === undefined) {
+        throw new Error('TabsContext must be used within a Tabs.');
+    }
+    if (tabsContext.value !== value) {
+        return null;
+    }
+    return _jsx("div", { ref: ref, className: clsx(className, sx(propSx)), ...props });
+});
+TabsContent.displayName = 'TabsContent';

package/dist/components/Tabs/TabsList.css.d.ts

@@ -0,0 +1,2 @@
+export declare const container: string;
+//# sourceMappingURL=TabsList.css.d.ts.map

package/dist/components/Tabs/TabsList.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsList.css.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabsList.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,QAOpB,CAAC"}

package/dist/components/Tabs/TabsList.css.js

@@ -0,0 +1,8 @@
+import { styleWithLayer } from '#styleUtils';
+import { theme } from '#themes';
+export const container = styleWithLayer({
+    display: 'flex',
+    height: '2.5em',
+    boxShadow: `inset 0 -0.125em 0 rgb(${theme.color.muted})`,
+    backgroundColor: `rgb(${theme.color.background})`,
+});

package/dist/components/Tabs/TabsList.d.ts

@@ -0,0 +1,5 @@
+import type { UIComponent } from '#types';
+type TabsListProps = UIComponent<'div'>;
+export declare const TabsList: import("react").ForwardRefExoticComponent<Omit<TabsListProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=TabsList.d.ts.map

package/dist/components/Tabs/TabsList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsList.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabsList.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAI1C,KAAK,aAAa,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;AAExC,eAAO,MAAM,QAAQ,uHAYpB,CAAC"}

package/dist/components/Tabs/TabsList.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { sx } from '#styles';
+import * as s from './TabsList.css';
+export const TabsList = forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: clsx(className, s.container, sx(propSx)), ...props, children: children }));
+});
+TabsList.displayName = 'TabsList';

package/dist/components/Tabs/TabsProvider.d.ts

@@ -0,0 +1,9 @@
+import { type Dispatch } from 'react';
+interface TabsContext {
+    value: number | string | undefined;
+    setValue: Dispatch<number | string>;
+}
+export declare const TabsContext: import("react").Context<TabsContext | undefined>;
+export declare const tabsReducer: (_: TabsContext["value"], value: TabsContext["value"]) => string | number | undefined;
+export {};
+//# sourceMappingURL=TabsProvider.d.ts.map

package/dist/components/Tabs/TabsProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsProvider.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabsProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErD,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACnC,QAAQ,EAAE,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;CACrC;AAED,eAAO,MAAM,WAAW,kDAAoD,CAAC;AAE7E,eAAO,MAAM,WAAW,GACtB,GAAG,WAAW,CAAC,OAAO,CAAC,EACvB,OAAO,WAAW,CAAC,OAAO,CAAC,gCAG5B,CAAC"}

package/dist/components/Tabs/TabsProvider.js

@@ -0,0 +1,6 @@
+'use client';
+import { createContext } from 'react';
+export const TabsContext = createContext(undefined);
+export const tabsReducer = (_, value) => {
+    return value;
+};

package/dist/components/Tabs/TabsTrigger.css.d.ts

@@ -0,0 +1,13 @@
+export declare const container: import("@vanilla-extract/recipes").RuntimeFn<{
+    isSelected: {
+        true: {
+            borderBottomColor: `rgb(var(--${string}))`;
+            color: `rgb(var(--${string}))`;
+        };
+        false: {
+            borderBottomColor: "transparent";
+            color: `rgb(var(--${string}))`;
+        };
+    };
+}>;
+//# sourceMappingURL=TabsTrigger.css.d.ts.map

package/dist/components/Tabs/TabsTrigger.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsTrigger.css.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabsTrigger.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS;;;;;;;;;;;EAkCpB,CAAC"}

package/dist/components/Tabs/TabsTrigger.css.js

@@ -0,0 +1,29 @@
+import { recipeWithLayer } from '#styleUtils';
+import { theme } from '#themes';
+export const container = recipeWithLayer({
+    base: {
+        overflow: 'hidden',
+        height: '100%',
+        padding: '0 0.75em',
+        border: '0',
+        borderBottom: `0.125rem solid`,
+        backgroundColor: 'transparent',
+        fontSize: '1em',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        transition: 'border-bottom-color 0.15s ease, color 0.15s ease',
+        cursor: 'pointer',
+    },
+    variants: {
+        isSelected: {
+            true: {
+                borderBottomColor: `rgb(${theme.color.foreground})`,
+                color: `rgb(${theme.color.foreground})`,
+            },
+            false: {
+                borderBottomColor: 'transparent',
+                color: `rgb(${theme.color['muted-foreground']})`,
+            },
+        },
+    },
+});

package/dist/components/Tabs/TabsTrigger.d.ts

@@ -0,0 +1,7 @@
+import type { UIComponent } from '#types';
+interface TabsTriggerProps extends UIComponent<'button'> {
+    value: number | string;
+}
+export declare const TabsTrigger: import("react").ForwardRefExoticComponent<Omit<TabsTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=TabsTrigger.d.ts.map

package/dist/components/Tabs/TabsTrigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsTrigger.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabsTrigger.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAK1C,UAAU,gBAAiB,SAAQ,WAAW,CAAC,QAAQ,CAAC;IACtD,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,6HAyBvB,CAAC"}

package/dist/components/Tabs/TabsTrigger.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useContext } from 'react';
+import clsx from 'clsx';
+import { sx } from '#styles';
+import { TabsContext } from './TabsProvider';
+import * as s from './TabsTrigger.css';
+export const TabsTrigger = forwardRef(({ children, value, className, sx: propSx, ...props }, ref) => {
+    const tabsContext = useContext(TabsContext);
+    if (tabsContext === undefined) {
+        throw new Error('TabsTrigger must be used within a Tabs.');
+    }
+    const isSelected = tabsContext.value === value;
+    const handleClick = () => {
+        tabsContext.setValue(value);
+    };
+    return (_jsx("button", { ref: ref, className: clsx(className, s.container({ isSelected }), sx(propSx)), onClick: handleClick, ...props, children: children }));
+});
+TabsTrigger.displayName = 'TabsTrigger';

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

@@ -0,0 +1,5 @@
+export * from './Tabs';
+export * from './TabsContent';
+export * from './TabsList';
+export * from './TabsTrigger';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC"}

package/{src/components/Tabs/index.ts → dist/components/Tabs/index.js}

@@ -1,4 +1,4 @@
-export * from './Tabs';
-export * from './TabsContent';
-export * from './TabsList';
-export * from './TabsTrigger';
+export * from './Tabs';
+export * from './TabsContent';
+export * from './TabsList';
+export * from './TabsTrigger';