@kimdw-rtk/ui 0.0.18 → 0.0.21

package/dist/components/Select/SelectOption.js

@@ -0,0 +1,25 @@
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { useContext, useEffect } from 'react';
+import { SelectContext } from './SelectContext.js';
+import { selectOption } from './SelectOption.css.js';
+
+const SelectOption = ({ children, value }) => {
+    const selectContext = useContext(SelectContext);
+    if (!selectContext) {
+        throw new Error('SelectOption must be rendered within a Select.');
+    }
+    const { dispatch } = selectContext;
+    useEffect(() => {
+        dispatch({ type: 'ADD', payload: { value, children } });
+        return () => {
+            dispatch({ type: 'REMOVE', payload: { value } });
+        };
+        // eslint-disable-next-line
+    }, [dispatch, value]);
+    const handleClick = () => {
+        dispatch({ type: 'SELECT', payload: { value } });
+    };
+    return (jsxRuntimeExports.jsx("div", { className: selectOption, onClick: handleClick, children: children }));
+};
+
+export { SelectOption };

package/dist/components/Select/SelectOptionList.css.d.ts

@@ -1,6 +1,4 @@
-import * as _vanilla_extract_recipes from '@vanilla-extract/recipes';
-
-declare const container: _vanilla_extract_recipes.RuntimeFn<{
+export declare const container: import("@vanilla-extract/recipes").RuntimeFn<{
     isVisible: {
         true: {
             display: "block";
@@ -18,5 +16,4 @@ declare const container: _vanilla_extract_recipes.RuntimeFn<{
         };
     };
 }>;
-
-export { container };
+//# sourceMappingURL=SelectOptionList.css.d.ts.map

package/dist/components/Select/SelectOptionList.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectOptionList.css.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SelectOptionList.css.ts"],"names":[],"mappings":"AAiBA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAkDpB,CAAC"}

package/dist/components/Select/SelectOptionList.css.js

@@ -0,0 +1,58 @@
+import { keyframes } from '../../node_modules/.pnpm/@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js';
+import { recipeWithLayer } from '../../utils/styleUtils.css.js';
+import { theme } from '../../themes/theme.css.js';
+
+const fadeIn = keyframes({
+    '0%': {
+        transform: 'scale(0.95)',
+        opacity: 0,
+    },
+    '100%': {
+        transform: 'scale(1)',
+        opacity: 1,
+    },
+});
+const container = recipeWithLayer({
+    base: {
+        overflowY: 'auto',
+        position: 'absolute',
+        zIndex: '10',
+        width: '100%',
+        minWidth: 'max-content',
+        border: `1px solid rgb(${theme.color.border})`,
+        borderRadius: theme.borderRadius,
+        margin: '0.5rem 0',
+        backgroundColor: `rgb(${theme.color.background})`,
+        animation: `${fadeIn} 0.3s ease 1`,
+        transformOrigin: '0 0',
+        userSelect: 'none',
+        '::-webkit-scrollbar': {
+            width: '0.25rem',
+            height: '0.25rem',
+        },
+        '::-webkit-scrollbar-thumb': {
+            borderRadius: '0.5rem',
+            backgroundColor: `rgb(${theme.color['muted-foreground']})`,
+        },
+    },
+    variants: {
+        isVisible: {
+            true: {
+                display: 'block',
+            },
+            false: {
+                display: 'none',
+            },
+        },
+        isAbove: {
+            true: {
+                top: '100%',
+            },
+            false: {
+                bottom: '100%',
+            },
+        },
+    },
+});
+
+export { container };

package/dist/components/Select/SelectOptionList.d.ts

@@ -1,9 +1,7 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
-
+import { type ReactNode } from 'react';
 interface SelectOptionListProps {
     children: ReactNode;
 }
-declare const SelectOptionList: ({ children }: SelectOptionListProps) => react_jsx_runtime.JSX.Element;
-
-export { SelectOptionList as default };
+declare const SelectOptionList: ({ children }: SelectOptionListProps) => import("react/jsx-runtime").JSX.Element;
+export default SelectOptionList;
+//# sourceMappingURL=SelectOptionList.d.ts.map

package/dist/components/Select/SelectOptionList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectOptionList.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SelectOptionList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AASpE,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,QAAA,MAAM,gBAAgB,GAAI,cAAc,qBAAqB,4CA2C5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/Select/SelectOptionList.js

@@ -0,0 +1,35 @@
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { useContext, useRef, useMemo } from 'react';
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { SelectContext } from './SelectContext.js';
+import { container } from './SelectOptionList.css.js';
+import { sprinkles } from '../../styles/sprinkles.css.js';
+
+const SelectOptionList = ({ children }) => {
+    const selectContext = useContext(SelectContext);
+    const containerRef = useRef(null);
+    if (!selectContext) {
+        throw new Error('SelectOption must be rendered within a Select.');
+    }
+    const { state } = selectContext;
+    const isAbove = useMemo(() => {
+        const container = containerRef.current;
+        const parent = state.containerRef.current;
+        if (!state.isActive || !container || !parent) {
+            return;
+        }
+        const parentRect = parent.getBoundingClientRect();
+        container.style.display = 'block';
+        const containerRect = container.getBoundingClientRect();
+        container.style.display = '';
+        // 하단에 리스트를 모두 보여줄 공간이 충분한 경우
+        if (containerRect.top + containerRect.height < window.innerHeight) {
+            return true;
+        }
+        // 그렇지 않으면 parent의 상단/하단 중 공간이 더 넓은 쪽으로 리스트를 보여줌
+        return parentRect.top + parentRect.height / 2 < window.innerHeight / 2;
+    }, [state.isActive, state.containerRef]);
+    return (jsxRuntimeExports.jsx("div", { ref: containerRef, className: clsx(container({ isVisible: state.isActive, isAbove }), sprinkles({ boxShadow: 'accent-sm' })), children: children }));
+};
+
+export { SelectOptionList as default };

package/dist/components/Select/SelectTrigger.css.d.ts

@@ -1,7 +1,5 @@
-import * as _vanilla_extract_recipes from '@vanilla-extract/recipes';
-
-declare const children: string;
-declare const icon: _vanilla_extract_recipes.RuntimeFn<{
+export declare const children: string;
+export declare const icon: import("@vanilla-extract/recipes").RuntimeFn<{
     isActive: {
         false: {
             transform: "rotate(0)";
@@ -12,7 +10,7 @@ declare const icon: _vanilla_extract_recipes.RuntimeFn<{
         };
     };
 }>;
-declare const selectTrigger: _vanilla_extract_recipes.RuntimeFn<{
+export declare const selectTrigger: import("@vanilla-extract/recipes").RuntimeFn<{
     isActive: {
         true: {
             borderColor: `rgb(var(--${string}))`;
@@ -33,5 +31,4 @@ declare const selectTrigger: _vanilla_extract_recipes.RuntimeFn<{
         };
     };
 }>;
-
-export { children, icon, selectTrigger };
+//# sourceMappingURL=SelectTrigger.css.d.ts.map

package/dist/components/Select/SelectTrigger.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectTrigger.css.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SelectTrigger.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,QAAQ,QAInB,CAAC;AAEH,eAAO,MAAM,IAAI;;;;;;;;;;EAqBf,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;EAsCxB,CAAC"}

package/dist/components/Select/SelectTrigger.css.js

@@ -0,0 +1,62 @@
+import { style } from '../../node_modules/.pnpm/@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js';
+import { recipe } from '../../node_modules/.pnpm/@vanilla-extract_recipes@0.5.7_@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0_/node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.esm.js';
+import { theme } from '../../themes/theme.css.js';
+
+const children = style({
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+});
+const icon = recipe({
+    base: {
+        flexShrink: '0',
+        lineHeight: '0',
+        transition: 'color 0.2s ease, transform 0.2s ease',
+    },
+    variants: {
+        isActive: {
+            false: {
+                transform: 'rotate(0)',
+            },
+            true: {
+                color: `rgb(${theme.color.primary})`,
+                transform: 'rotate(-180deg)',
+            },
+        },
+    },
+});
+const selectTrigger = recipe({
+    base: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.5em',
+        justifyContent: 'space-between',
+        width: '100%',
+        transition: 'border-color 0.2s ease',
+        cursor: 'pointer',
+        userSelect: 'none',
+    },
+    variants: {
+        isActive: {
+            true: {
+                borderColor: `rgb(${theme.color.primary})`,
+            },
+        },
+        variant: {
+            contained: {
+                padding: '0.75em 0.75em',
+                borderRadius: theme.borderRadius,
+                backgroundColor: `rgb(${theme.color.secondary})`,
+            },
+            outlined: {
+                padding: '0.75em 0.5em',
+                border: '1px solid',
+                borderColor: `rgb(${theme.color.border})`,
+                borderRadius: theme.borderRadius,
+                backgroundColor: `rgb(${theme.color.background})`,
+            },
+        },
+    },
+});
+
+export { children, icon, selectTrigger };

package/dist/components/Select/SelectTrigger.d.ts

@@ -1,12 +1,6 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { UIComponent } from '../../types/ui.types.js';
-import { selectTrigger } from './SelectTrigger.css.js';
-import 'react';
-import '@vanilla-extract/css';
-import '@vanilla-extract/recipes';
-import '../../styles/sprinkles.css.js';
-
-type SelectTriggerProps = UIComponent<'div', typeof selectTrigger>;
-declare const SelectTrigger: ({ children, className, variant, sx: propSx, }: SelectTriggerProps) => react_jsx_runtime.JSX.Element;
-
-export { SelectTrigger as default };
+import type { UIComponent } from '@/types';
+import * as s from './SelectTrigger.css';
+type SelectTriggerProps = UIComponent<'div', typeof s.selectTrigger>;
+declare const SelectTrigger: ({ children, className, variant, sx: propSx, }: SelectTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export default SelectTrigger;
+//# sourceMappingURL=SelectTrigger.d.ts.map

package/dist/components/Select/SelectTrigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectTrigger.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SelectTrigger.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAG3C,OAAO,KAAK,CAAC,MAAM,qBAAqB,CAAC;AAEzC,KAAK,kBAAkB,GAAG,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,aAAa,CAAC,CAAC;AAErE,QAAA,MAAM,aAAa,GAAI,+CAKpB,kBAAkB,4CA4BpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/Select/SelectTrigger.js

@@ -0,0 +1,21 @@
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { useContext } from 'react';
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { SelectContext } from './SelectContext.js';
+import { children, icon, selectTrigger } from './SelectTrigger.css.js';
+import ChevronDown from '../../node_modules/.pnpm/lucide-react@0.503.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/chevron-down.js';
+import { sx } from '../../styles/sx.js';
+
+const SelectTrigger = ({ children: children$1, className, variant, sx: propSx, }) => {
+    const selectContext = useContext(SelectContext);
+    if (!selectContext) {
+        throw new Error('SelectTrigger must be rendered within a Select.');
+    }
+    const { state, dispatch } = selectContext;
+    const handleClick = () => {
+        dispatch({ type: 'TOGGLE' });
+    };
+    return (jsxRuntimeExports.jsxs("div", { className: clsx(selectTrigger({ isActive: state.isActive, variant }), className, sx(propSx)), onClick: handleClick, children: [jsxRuntimeExports.jsx("span", { className: children, children: children$1 }), jsxRuntimeExports.jsx("span", { className: icon({ isActive: state.isActive }), children: jsxRuntimeExports.jsx(ChevronDown, { size: "1em", strokeWidth: "2px" }) })] }));
+};
+
+export { SelectTrigger as default };

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

@@ -1,11 +1,3 @@
-export { Select } from './Select.js';
-export { SelectOption } from './SelectOption.js';
-export { S as selectCss } from '../../Select.css-BlJORB-N.js';
-import 'react';
-import '../../types/ui.types.js';
-import '@vanilla-extract/css';
-import '@vanilla-extract/recipes';
-import '../../styles/sprinkles.css.js';
-import './SelectTrigger.js';
-import 'react/jsx-runtime';
-import './SelectTrigger.css.js';
+export * from './Select';
+export * from './SelectOption';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC"}

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

@@ -1,3 +1,2 @@
-declare const skeleton: string;
-
-export { skeleton };
+export declare const skeleton: string;
+//# sourceMappingURL=Skeleton.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.css.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.css.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,QAAQ,QAUnB,CAAC"}

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

@@ -0,0 +1,22 @@
+import { keyframes } from '../../node_modules/.pnpm/@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js';
+import { styleWithLayer } from '../../utils/styleUtils.css.js';
+import { theme } from '../../themes/theme.css.js';
+
+const shimmer = keyframes({
+    '0%': {
+        backgroundPosition: '-300% 0',
+    },
+    '100%': {
+        backgroundPosition: '300% 0',
+    },
+});
+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`,
+});
+
+export { skeleton };

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

@@ -1,2 +1,2 @@
-
-export {  }
+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/dist/components/Skeleton/index.d.ts

@@ -1,14 +1,9 @@
-import * as react from 'react';
-import { CSSProperties } from 'react';
-import { UIComponent } from '../../types/ui.types.js';
-import '@vanilla-extract/css';
-import '@vanilla-extract/recipes';
-import '../../styles/sprinkles.css.js';
-
+import { type CSSProperties } from 'react';
+import type { UIComponent } from '@/types';
 interface SkeletonProps extends UIComponent<'div'> {
     width?: CSSProperties['width'];
     height?: CSSProperties['height'];
 }
-declare const Skeleton: react.ForwardRefExoticComponent<Omit<SkeletonProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-
-export { Skeleton };
+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,SAAS,CAAC;AAI3C,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,12 @@
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { forwardRef } from 'react';
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { skeleton } from './Skeleton.css.js';
+import { sx } from '../../styles/sx.js';
+
+const Skeleton = forwardRef(({ className, width, height, style, sx: propSx, ...props }, ref) => {
+    return (jsxRuntimeExports.jsx("div", { ref: ref, className: clsx(skeleton, className, sx(propSx)), style: { ...style, width, height }, ...props }));
+});
+Skeleton.displayName = 'Skeleton';
+
+export { Skeleton };

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

@@ -1 +1,3 @@
-export { s as striped, t as table } from '../../Table.css-5Pm2Q-3j.js';
+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/dist/components/Table/Table.css.js

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

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

@@ -1,13 +1,8 @@
-import * as react from 'react';
-import { UIComponent } from '../../types/ui.types.js';
-export { T as tableCss } from '../../Table.css-5Pm2Q-3j.js';
-import '@vanilla-extract/css';
-import '@vanilla-extract/recipes';
-import '../../styles/sprinkles.css.js';
-
+import type { UIComponent } from '@/types';
+import * as s from './Table.css';
 interface TableProps extends UIComponent<'table'> {
     isStriped?: boolean;
 }
-declare const Table: react.ForwardRefExoticComponent<Omit<TableProps, "ref"> & react.RefAttributes<HTMLTableElement>>;
-
-export { Table };
+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,SAAS,CAAC;AAE3C,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,14 @@
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { forwardRef } from 'react';
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { striped, table } from './Table.css.js';
+import * as Table_css from './Table.css.js';
+export { Table_css as tableCss };
+import { sx } from '../../styles/sx.js';
+
+const Table = forwardRef(({ isStriped, className, sx: propSx, ...props }, ref) => {
+    return (jsxRuntimeExports.jsx("table", { ref: ref, className: clsx(table, isStriped && striped, sx(propSx), className), ...props }));
+});
+Table.displayName = 'Table';
+
+export { Table };

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

@@ -1,2 +1,2 @@
-
-export {  }
+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/TableBody.d.ts

@@ -1,11 +1,5 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { UIComponent } from '../../types/ui.types.js';
-import 'react';
-import '@vanilla-extract/css';
-import '@vanilla-extract/recipes';
-import '../../styles/sprinkles.css.js';
-
+import type { UIComponent } from '@/types';
 type TableBodyProps = UIComponent<'tbody'>;
-declare const TableBody: ({ className, sx: propSx, ...props }: TableBodyProps) => react_jsx_runtime.JSX.Element;
-
-export { TableBody };
+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,SAAS,CAAC;AAE3C,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,9 @@
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { sx } from '../../styles/sx.js';
+
+const TableBody = ({ className, sx: propSx, ...props }) => {
+    return jsxRuntimeExports.jsx("tbody", { className: clsx(className, sx(propSx)), ...props });
+};
+
+export { TableBody };

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

@@ -1,3 +1,2 @@
-declare const tableCell: string;
-
-export { tableCell };
+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,35 @@
+import { styleWithLayer } from '../../utils/styleUtils.css.js';
+import { striped } from './Table.css.js';
+import { interactive } from './TableRow.css.js';
+import { theme } from '../../themes/theme.css.js';
+
+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})`,
+        },
+    },
+});
+
+export { tableCell };

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

@@ -1,14 +1,9 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { CSSProperties } from 'react';
-import { UIComponent } from '../../types/ui.types.js';
-import '@vanilla-extract/css';
-import '@vanilla-extract/recipes';
-import '../../styles/sprinkles.css.js';
-
+import { type CSSProperties } from 'react';
+import type { UIComponent } from '@/types';
 interface TableCellProps extends UIComponent<'td'> {
     width?: CSSProperties['width'];
     textAlign?: CSSProperties['textAlign'];
 }
-declare const TableCell: ({ width, textAlign, style, className, sx: propSx, ...props }: TableCellProps) => react_jsx_runtime.JSX.Element;
-
-export { TableCell };
+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,SAAS,CAAC;AAI3C,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,10 @@
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { tableCell } from './TableCell.css.js';
+import { sx } from '../../styles/sx.js';
+
+const TableCell = ({ width, textAlign, style, className, sx: propSx, ...props }) => {
+    return (jsxRuntimeExports.jsx("td", { style: { ...style, width, textAlign }, className: clsx(tableCell, className, sx(propSx)), ...props }));
+};
+
+export { TableCell };

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

@@ -1,3 +1,2 @@
-declare const tableHead: string;
-
-export { tableHead };
+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,11 @@
+import { styleWithLayer } from '../../utils/styleUtils.css.js';
+import { theme } from '../../themes/theme.css.js';
+
+const tableHead = styleWithLayer({
+    padding: '0.5em 0.625em',
+    color: `rgb(${theme.color['accent-foreground']})`,
+    fontSize: '0.9375em',
+    fontWeight: '500',
+});
+
+export { tableHead };