@kimdw-rtk/ui 0.0.20 → 0.0.21

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

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

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

@@ -0,0 +1,34 @@
+import { type Dispatch, type ReactNode } from 'react';
+type SelectState = {
+    isActive: boolean;
+    selected?: string;
+    defaultValue?: string;
+    items: Map<string, ReactNode>;
+    containerRef: React.RefObject<HTMLDivElement | null>;
+};
+type SelectAction = {
+    type: 'ADD';
+    payload: {
+        value: string;
+        children: ReactNode;
+    };
+} | {
+    type: 'REMOVE';
+    payload: {
+        value: string;
+    };
+} | {
+    type: 'SELECT';
+    payload: {
+        value: string;
+    };
+} | {
+    type: 'TOGGLE';
+};
+export declare const SelectContext: import("react").Context<{
+    state: SelectState;
+    dispatch: Dispatch<SelectAction>;
+} | undefined>;
+export declare const selectReducer: (state: SelectState, action: SelectAction) => SelectState;
+export {};
+//# sourceMappingURL=SelectContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectContext.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SelectContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,QAAQ,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAErE,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAC9B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACtD,CAAC;AAEF,KAAK,YAAY,GACb;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAA;CAAE,GAChE;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,GAC9C;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,GAC9C;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,CAAC;AAEvB,eAAO,MAAM,aAAa;WACf,WAAW;cAAY,QAAQ,CAAC,YAAY,CAAC;cAC5C,CAAC;AAEb,eAAO,MAAM,aAAa,GACxB,OAAO,WAAW,EAClB,QAAQ,YAAY,KACnB,WAmCF,CAAC"}

package/dist/components/Select/SelectContext.js

@@ -0,0 +1,33 @@
+import { createContext } from 'react';
+
+const SelectContext = createContext(undefined);
+const selectReducer = (state, action) => {
+    switch (action.type) {
+        case 'ADD': {
+            // 현재 selected가 없고, defaultValue === payload.value일 경우 select함.
+            if (state.selected === undefined &&
+                state.defaultValue === action.payload.value) {
+                return {
+                    ...state,
+                    selected: action.payload.value,
+                    items: new Map(state.items).set(action.payload.value, action.payload.children),
+                };
+            }
+            return {
+                ...state,
+                items: new Map(state.items).set(action.payload.value, action.payload.children),
+            };
+        }
+        case 'REMOVE': {
+            const newMap = new Map(state.items);
+            newMap.delete(action.payload.value);
+            return { ...state, items: newMap };
+        }
+        case 'SELECT':
+            return { ...state, isActive: false, selected: action.payload.value };
+        case 'TOGGLE':
+            return { ...state, isActive: !state.isActive };
+    }
+};
+
+export { SelectContext, selectReducer };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectOption.css.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SelectOption.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,QAUvB,CAAC"}

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

@@ -0,0 +1,13 @@
+import { styleWithLayer } from '../../utils/styleUtils.css.js';
+import { theme } from '../../themes/theme.css.js';
+
+const selectOption = styleWithLayer({
+    padding: '0.75em 0.5em',
+    transition: 'background-color 0.2s ease',
+    cursor: 'default',
+    ':hover': {
+        backgroundColor: `rgb(${theme.color.accent})`,
+    },
+});
+
+export { selectOption };

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

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+interface SelectOptionProps {
+    children: ReactNode;
+    value: string;
+}
+export declare const SelectOption: ({ children, value }: SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SelectOption.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectOption.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SelectOption.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAK9D,UAAU,iBAAiB;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,YAAY,GAAI,qBAAqB,iBAAiB,4CA2BlE,CAAC"}

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

@@ -0,0 +1,19 @@
+export declare const container: import("@vanilla-extract/recipes").RuntimeFn<{
+    isVisible: {
+        true: {
+            display: "block";
+        };
+        false: {
+            display: "none";
+        };
+    };
+    isAbove: {
+        true: {
+            top: "100%";
+        };
+        false: {
+            bottom: "100%";
+        };
+    };
+}>;
+//# 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

@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react';
+interface SelectOptionListProps {
+    children: ReactNode;
+}
+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

@@ -0,0 +1,34 @@
+export declare const children: string;
+export declare const icon: import("@vanilla-extract/recipes").RuntimeFn<{
+    isActive: {
+        false: {
+            transform: "rotate(0)";
+        };
+        true: {
+            color: `rgb(var(--${string}))`;
+            transform: "rotate(-180deg)";
+        };
+    };
+}>;
+export declare const selectTrigger: import("@vanilla-extract/recipes").RuntimeFn<{
+    isActive: {
+        true: {
+            borderColor: `rgb(var(--${string}))`;
+        };
+    };
+    variant: {
+        contained: {
+            padding: "0.75em 0.75em";
+            borderRadius: `var(--${string})`;
+            backgroundColor: `rgb(var(--${string}))`;
+        };
+        outlined: {
+            padding: "0.75em 0.5em";
+            border: "1px solid";
+            borderColor: `rgb(var(--${string}))`;
+            borderRadius: `var(--${string})`;
+            backgroundColor: `rgb(var(--${string}))`;
+        };
+    };
+}>;
+//# 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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,2 @@
+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

@@ -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/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,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

@@ -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/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

@@ -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,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

@@ -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/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,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

@@ -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,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

@@ -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,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

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