@kimdw-rtk/ui 0.0.2 → 0.0.5

package/dist/components/Button/Button.css.js

@@ -0,0 +1,182 @@
+import { createVar, globalStyle, keyframes, style } from '@vanilla-extract/css';
+import { recipeWithLayer, styleWithLayer } from '#styleUtils';
+import { theme } from '#themes';
+import { semanticColor } from '#tokens';
+import { SCALE_COLOR } from '../../tokens/scale/color';
+const backgroundVar = createVar();
+const foregroundVar = createVar();
+const semanticColors = semanticColor.reduce((prev, color) => ({
+    ...prev,
+    [color]: styleWithLayer({
+        vars: {
+            [backgroundVar]: theme.color[color],
+            [foregroundVar]: theme.color[`${color}-foreground`],
+        },
+    }),
+}), {});
+const scaleColors = SCALE_COLOR.reduce((prev, value) => ({
+    ...prev,
+    [value]: styleWithLayer({
+        vars: {
+            [backgroundVar]: theme.color[value][500],
+            [foregroundVar]: theme.color.background,
+        },
+    }),
+}), {});
+const pulse = keyframes({
+    '0%': {
+        backgroundPosition: '-300% 0',
+    },
+    '100%': {
+        backgroundPosition: '300% 0',
+    },
+});
+export const span = recipeWithLayer({
+    base: {
+        lineHeight: '0',
+    },
+    variants: {
+        size: {
+            sm: {
+                fontSize: '0.875em',
+            },
+            md: {
+                fontSize: '1em',
+            },
+            lg: {
+                fontSize: '1.125em',
+            },
+            'icon-sm': {
+                fontSize: '1em',
+            },
+            'icon-md': {
+                fontSize: '1.25em',
+            },
+            'icon-lg': {
+                fontSize: '1.5em',
+            },
+        },
+    },
+});
+export const button = recipeWithLayer({
+    base: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'relative',
+        overflow: 'hidden',
+        border: '0',
+        borderRadius: theme.borderRadius,
+        fontSize: '1em',
+        transition: 'background-color 0.2s ease, color 0.2s ease',
+        cursor: 'pointer',
+        userSelect: 'none',
+    },
+    variants: {
+        hasIcon: {
+            true: {
+                gap: '0.5em',
+            },
+        },
+        color: {
+            ...semanticColors,
+            ...scaleColors,
+        },
+        size: {
+            sm: {
+                height: '2.25em',
+                padding: '0 0.75em',
+            },
+            md: {
+                height: '2.5em',
+                padding: '0 0.875em',
+            },
+            lg: {
+                height: '2.75em',
+                padding: '0 1em',
+            },
+            'icon-sm': {
+                width: '2em',
+                height: '2em',
+            },
+            'icon-md': {
+                width: '2.5em',
+                height: '2.5em',
+            },
+            'icon-lg': {
+                width: '2.75em',
+                height: '2.75em',
+            },
+        },
+        variant: {
+            contained: {
+                boxShadow: `inset 0 0 0 1px rgba(255, 255, 255, 0.08)`,
+                backgroundColor: `rgb(${backgroundVar})`,
+                color: `rgb(${foregroundVar})`,
+                ':disabled': {
+                    backgroundColor: `rgb(${theme.color.muted})`,
+                    color: `rgb(${theme.color['muted-foreground']})`,
+                    cursor: 'default',
+                },
+            },
+            outlined: {
+                boxShadow: `inset 0 0 0 1px rgb(${backgroundVar})`,
+                backgroundColor: `rgb(${theme.color.background})`,
+                color: `rgb(${theme.color.foreground})`,
+                ':disabled': {
+                    backgroundColor: `rgb(${theme.color.muted})`,
+                    color: `rgb(${theme.color['muted-foreground']})`,
+                    cursor: 'default',
+                },
+            },
+            ghost: {
+                background: 'transparent',
+                color: `rgb(${theme.color.foreground})`,
+                ':hover': {
+                    backgroundColor: `rgba(${backgroundVar}, 0.8)`,
+                    color: `rgb(${foregroundVar})`,
+                },
+                ':disabled': {
+                    color: `rgb(${theme.color['muted-foreground']})`,
+                    cursor: 'default',
+                },
+            },
+            glass: {
+                boxShadow: `inset 0 0 0 1px rgba(255, 255, 255, 0.08)`,
+                backgroundColor: `rgba(${backgroundVar}, 0.75)`,
+                backdropFilter: 'blur(1rem)',
+                color: `rgb(${theme.color.foreground})`,
+                ':disabled': {
+                    backgroundColor: `rgb(${theme.color.muted})`,
+                    color: `rgb(${theme.color['muted-foreground']})`,
+                    cursor: 'default',
+                },
+            },
+        },
+        pulse: {
+            true: {
+                '::after': {
+                    content: '',
+                    position: 'absolute',
+                    inset: '0',
+                    background: 'linear-gradient(90deg, transparent 30%, #ffffff33 65%, transparent 100%)',
+                    backgroundSize: '300% 100%',
+                    animation: `${pulse} 5s linear 0s infinite`,
+                },
+            },
+        },
+    },
+});
+export const icon = style({
+    lineHeight: '0',
+});
+globalStyle(`${icon} > *`, {
+    width: '1em',
+    height: '1em',
+    lineHeight: '0',
+    pointerEvents: 'none',
+});
+globalStyle(`${button.classNames.base} svg`, {
+    width: '1em',
+    height: '1em',
+});

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

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

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

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

package/dist/components/Button/Button.spec.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, fireEvent } from '@testing-library/react';
+import { uiTest } from '../../tests/uiTest';
+import { Button } from './';
+describe('Button 컴포넌트', () => {
+    uiTest(Button, 'Button');
+    it('Button을 클릭하면 onClick이 호출되어야 한다', () => {
+        const handleClick = jest.fn();
+        render(_jsx(Button, { onClick: handleClick, children: "Click" }));
+        fireEvent.click(screen.getByRole('button', { name: 'Click' }));
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+    it('disabled Button을 클릭하면 onClick이 호출되지 않아야 한다', () => {
+        const handleClick = jest.fn();
+        render(_jsx(Button, { onClick: handleClick, disabled: true, children: "Click" }));
+        fireEvent.click(screen.getByRole('button', { name: 'Click' }));
+        expect(handleClick).not.toHaveBeenCalledTimes(1);
+    });
+});

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

@@ -0,0 +1,9 @@
+import { type ReactElement } from 'react';
+import type { UIComponent } from '#types';
+import * as s from './Button.css';
+interface ButtonProps extends Omit<UIComponent<'button', typeof s.button>, 'hasIcon'> {
+    icon?: ReactElement;
+}
+export declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export { s as buttonCss };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAMtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,OAAO,KAAK,CAAC,MAAM,cAAc,CAAC;AAElC,UAAU,WACR,SAAQ,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;IAC/D,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,eAAO,MAAM,MAAM,wHAuClB,CAAC;AAGF,OAAO,EAAE,CAAC,IAAI,SAAS,EAAE,CAAC"}

package/dist/components/Button/index.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { clsx } from 'clsx';
+import { useRipple } from '#hooks';
+import { sx } from '#styles';
+import * as s from './Button.css';
+export const Button = forwardRef(({ children, color = 'primary', size = 'md', variant = 'contained', pulse = false, className, sx: propSx, icon, ...props }, ref) => {
+    const { ripple } = useRipple(ref);
+    return (_jsxs("button", { ref: ref, className: clsx(className, s.button({
+            color,
+            size,
+            variant,
+            pulse,
+            hasIcon: icon !== undefined,
+        }), sx(propSx)), ...props, children: [icon !== undefined && _jsx("span", { className: s.icon, children: icon }), _jsx("span", { className: s.span({ size }), children: children }), ripple] }));
+});
+Button.displayName = 'Button';
+export { s as buttonCss };

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

@@ -0,0 +1,61 @@
+export declare const card: import("@vanilla-extract/recipes").RuntimeFn<{
+    variant: {
+        contained: {};
+        outlined: {
+            border: "1px solid";
+            borderColor: `rgb(var(--${string}))`;
+        };
+        glass: {
+            border: `1px solid rgb(var(--${string}))`;
+            borderRadius: "0.75rem";
+            background: `linear-gradient(rgba(var(--${string}), 0.06) 0%, rgba(var(--${string}), 0.02) 100%)`;
+            backdropFilter: "blur(1rem)";
+            '::before': {
+                position: "absolute";
+                inset: "0";
+                background: "linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%)";
+                opacity: "0";
+                transition: "opacity 0.3s ease";
+                content: "";
+            };
+            selectors: {
+                '&:hover::before': {
+                    opacity: "1";
+                };
+            };
+        };
+    };
+    color: {
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+        slate: string;
+        gray: string;
+        zinc: string;
+        neutral: string;
+        stone: string;
+        primary: string;
+        secondary: string;
+        muted: string;
+        accent: string;
+        card: string;
+        danger: string;
+        warning: string;
+        success: string;
+    };
+}>;
+//# sourceMappingURL=Card.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.css.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.css.ts"],"names":[],"mappings":"AA2BA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiEf,CAAC"}

package/dist/components/Card/Card.css.js

@@ -0,0 +1,68 @@
+import { recipeWithLayer, styleWithLayer } from '#styleUtils';
+import { theme } from '#themes';
+import { semanticColor } from '#tokens';
+import { SCALE_COLOR } from '../../tokens/scale/color';
+import { cardInteraction } from './CardInteraction.css';
+const semanticColors = semanticColor.reduce((prev, color) => ({
+    ...prev,
+    [color]: styleWithLayer({
+        backgroundColor: `rgb(${theme.color[color]})`,
+    }),
+}), {});
+const scaleColors = SCALE_COLOR.reduce((prev, value) => ({
+    ...prev,
+    [value]: styleWithLayer({
+        backgroundColor: `color-mix(in srgb, rgb(${theme.color[value][500]}) 20%, rgb(${theme.color.background}) 80%)`,
+    }),
+}), {});
+export const card = recipeWithLayer({
+    base: {
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+        position: 'relative',
+        borderRadius: theme.borderRadius,
+        color: `rgb(${theme.color.foreground})`,
+        transition: 'border-color 0.2s ease, transform 0.4s ease',
+        selectors: {
+            [`&:has(${cardInteraction}:hover)`]: {
+                borderColor: `color-mix(in srgb, rgb(${theme.color.primary}) 10%, rgb(${theme.color.border}) 90%)`,
+            },
+            [`&:has(${cardInteraction}:active)`]: {
+                borderColor: `color-mix(in srgb, rgb(${theme.color.primary}) 40%, rgb(${theme.color.border}) 60%)`,
+            },
+        },
+    },
+    variants: {
+        variant: {
+            contained: {},
+            outlined: {
+                border: '1px solid',
+                borderColor: `rgb(${theme.color.border})`,
+            },
+            glass: {
+                border: `1px solid rgb(${theme.color['border.weak']})`,
+                borderRadius: '0.75rem',
+                background: `linear-gradient(rgba(${theme.color['card.gradient']}, 0.06) 0%, rgba(${theme.color['card.gradient']}, 0.02) 100%)`,
+                backdropFilter: 'blur(1rem)',
+                '::before': {
+                    position: 'absolute',
+                    inset: '0',
+                    background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%)',
+                    opacity: '0',
+                    transition: 'opacity 0.3s ease',
+                    content: '',
+                },
+                selectors: {
+                    '&:hover::before': {
+                        opacity: '1',
+                    },
+                },
+            },
+        },
+        color: {
+            ...semanticColors,
+            ...scaleColors,
+        },
+    },
+});

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,10 @@
+import { type CSSProperties } from 'react';
+import type { UIComponent } from '#types';
+import * as s from './Card.css';
+interface CardProps extends UIComponent<'div', typeof s.card> {
+    width?: CSSProperties['width'];
+    height?: CSSProperties['height'];
+}
+export declare const Card: import("react").ForwardRefExoticComponent<Omit<CardProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export { s as cardCss };
+//# sourceMappingURL=Card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAKvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,OAAO,KAAK,CAAC,MAAM,YAAY,CAAC;AAEhC,UAAU,SAAU,SAAQ,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC;IAC3D,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;CAClC;AAED,eAAO,MAAM,IAAI,mHAuBhB,CAAC;AAGF,OAAO,EAAE,CAAC,IAAI,OAAO,EAAE,CAAC"}

package/dist/components/Card/Card.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 './Card.css';
+export const Card = forwardRef(({ width, height, color = 'card', variant = 'outlined', className, style, sx: propSx, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: clsx(s.card({ color, variant }), className, sx(propSx)), style: { width, height, ...style }, ...props }));
+});
+Card.displayName = 'Card';
+export { s as cardCss };

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

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

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

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

package/dist/components/Card/Card.spec.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, fireEvent } from '@testing-library/react';
+import { uiTest } from '../../tests/uiTest';
+import { Card, CardContent, CardInteraction, CardThumbnail } from './';
+describe('Card 컴포넌트', () => {
+    uiTest(Card, 'Card');
+    uiTest(CardContent, 'CardContent');
+    uiTest(CardInteraction, 'CardInteraction');
+    uiTest(CardThumbnail, 'CardThumbnail');
+    it('CardInteraction을 클릭하면 onClick이 호출되어야 한다', () => {
+        const handleClick = jest.fn();
+        render(_jsx(Card, { onClick: handleClick, children: _jsx(CardInteraction, { children: "Click" }) }));
+        fireEvent.click(screen.getByText('Click'));
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+});

package/dist/components/Card/CardContent.css.d.ts

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

package/dist/components/Card/CardContent.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardContent.css.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CardContent.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW,QAItB,CAAC"}

package/dist/components/Card/CardContent.css.js

@@ -0,0 +1,6 @@
+import { styleWithLayer } from '#styleUtils';
+import { spacing } from '#tokens';
+export const cardContent = styleWithLayer({
+    flex: '1 1 auto',
+    padding: spacing.md,
+});

package/dist/components/Card/CardContent.d.ts

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

package/dist/components/Card/CardContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardContent.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CardContent.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAI1C,KAAK,gBAAgB,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,eAAO,MAAM,WAAW,0HAUvB,CAAC"}

package/dist/components/Card/CardContent.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 './CardContent.css';
+export const CardContent = forwardRef(({ className, sx: propSx, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: clsx(s.cardContent, className, sx(propSx)), ...props }));
+});
+CardContent.displayName = 'CardContent';

package/dist/components/Card/CardInteraction.css.d.ts

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

package/dist/components/Card/CardInteraction.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardInteraction.css.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CardInteraction.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,QAQ1B,CAAC"}

package/dist/components/Card/CardInteraction.css.js

@@ -0,0 +1,8 @@
+import { styleWithLayer } from '#styleUtils';
+export const cardInteraction = styleWithLayer({
+    position: 'relative',
+    overflow: 'hidden',
+    height: '100%',
+    cursor: 'pointer',
+    userSelect: 'none',
+});

package/dist/components/Card/CardInteraction.d.ts

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

package/dist/components/Card/CardInteraction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardInteraction.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CardInteraction.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAI1C,KAAK,oBAAoB,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;AAE/C,eAAO,MAAM,eAAe,8HAoB3B,CAAC"}

package/dist/components/Card/CardInteraction.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { useRipple } from '#hooks';
+import { sx } from '#styles';
+import * as s from './CardInteraction.css';
+export const CardInteraction = forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
+    const { ripple } = useRipple(ref);
+    return (_jsxs("div", { ref: ref, className: clsx(className, s.cardInteraction, s.cardInteraction, sx(propSx)), ...props, children: [children, ripple] }));
+});
+CardInteraction.displayName = 'CardInteraction';

package/dist/components/Card/CardThumbnail.css.d.ts

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

package/dist/components/Card/CardThumbnail.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardThumbnail.css.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CardThumbnail.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,QAGpB,CAAC"}

package/dist/components/Card/CardThumbnail.css.js

@@ -0,0 +1,5 @@
+import { styleWithLayer } from '#styleUtils';
+export const thumbnail = styleWithLayer({
+    width: 'auto',
+    maxWidth: '100%',
+});

package/dist/components/Card/CardThumbnail.d.ts

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

package/dist/components/Card/CardThumbnail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardThumbnail.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CardThumbnail.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAI1C,KAAK,kBAAkB,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;AAE7C,eAAO,MAAM,aAAa,8HAUzB,CAAC"}

package/dist/components/Card/CardThumbnail.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 './CardThumbnail.css';
+export const CardThumbnail = forwardRef(({ className, sx: propSx, ...props }, ref) => {
+    return (_jsx("img", { ref: ref, className: clsx(s.thumbnail, className, sx(propSx)), ...props }));
+});
+CardThumbnail.displayName = 'CardThumbnail';

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

@@ -0,0 +1,5 @@
+export * from './Card';
+export * from './CardContent';
+export * from './CardInteraction';
+export * from './CardThumbnail';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/Card/index.js

@@ -0,0 +1,4 @@
+export * from './Card';
+export * from './CardContent';
+export * from './CardInteraction';
+export * from './CardThumbnail';

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

@@ -0,0 +1,46 @@
+export declare const chip: import("@vanilla-extract/recipes").RuntimeFn<{
+    color: {
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+        slate: string;
+        gray: string;
+        zinc: string;
+        neutral: string;
+        stone: string;
+        primary: string;
+        secondary: string;
+        muted: string;
+        accent: string;
+        card: string;
+        danger: string;
+        warning: string;
+        success: string;
+    };
+    size: {
+        sm: {
+            fontSize: "0.75em";
+        };
+        md: {
+            fontSize: "0.875em";
+        };
+        lg: {
+            fontSize: "1em";
+        };
+    };
+}>;
+//# sourceMappingURL=Chip.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.css.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.css.ts"],"names":[],"mappings":"AAqCA,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqCf,CAAC"}