@kimdw-rtk/ui 0.0.20 → 0.0.21

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

@@ -0,0 +1,185 @@
+import { style, keyframes, createVar, globalStyle } 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, styleWithLayer } from '../../utils/styleUtils.css.js';
+import { SCALE_COLOR } from '../../tokens/scale/color.js';
+import { theme } from '../../themes/theme.css.js';
+import { semanticColor } from '../../tokens/semantic/color.js';
+
+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',
+    },
+});
+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',
+            },
+        },
+    },
+});
+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`,
+                },
+            },
+        },
+    },
+});
+const icon = style({
+    lineHeight: '0',
+});
+globalStyle(`${icon} > *`, {
+    width: '1em',
+    height: '1em',
+    lineHeight: '0',
+    pointerEvents: 'none',
+});
+globalStyle(`${button.classNames.base} svg`, {
+    width: '1em',
+    height: '1em',
+});
+
+export { button, icon, span };

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/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,SAAS,CAAC;AAE3C,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,22 @@
+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 { icon, span, button } from './Button.css.js';
+import * as Button_css from './Button.css.js';
+export { Button_css as buttonCss };
+import { useRipple } from '../../hooks/useRipple/index.js';
+import { sx } from '../../styles/sx.js';
+
+const Button = forwardRef(({ children, color = 'primary', size = 'md', variant = 'contained', pulse = false, className, sx: propSx, icon: icon$1, ...props }, ref) => {
+    const { ripple } = useRipple(ref);
+    return (jsxRuntimeExports.jsxs("button", { ref: ref, className: clsx(className, button({
+            color,
+            size,
+            variant,
+            pulse,
+            hasIcon: icon$1 !== undefined,
+        }), sx(propSx)), ...props, children: [icon$1 !== undefined && jsxRuntimeExports.jsx("span", { className: icon, children: icon$1 }), jsxRuntimeExports.jsx("span", { className: span({ size }), children: children }), ripple] }));
+});
+Button.displayName = 'Button';
+
+export { Button };

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,71 @@
+import { recipeWithLayer, styleWithLayer } from '../../utils/styleUtils.css.js';
+import { SCALE_COLOR } from '../../tokens/scale/color.js';
+import { cardInteraction } from './CardInteraction.css.js';
+import { theme } from '../../themes/theme.css.js';
+import { semanticColor } from '../../tokens/semantic/color.js';
+
+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%)`,
+    }),
+}), {});
+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,
+        },
+    },
+});
+
+export { card };

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,SAAS,CAAC;AAE3C,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,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 { card } from './Card.css.js';
+import * as Card_css from './Card.css.js';
+export { Card_css as cardCss };
+import { sx } from '../../styles/sx.js';
+
+const Card = forwardRef(({ width, height, color = 'card', variant = 'outlined', className, style, sx: propSx, ...props }, ref) => {
+    return (jsxRuntimeExports.jsx("div", { ref: ref, className: clsx(card({ color, variant }), className, sx(propSx)), style: { width, height, ...style }, ...props }));
+});
+Card.displayName = 'Card';
+
+export { Card };

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/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,9 @@
+import { styleWithLayer } from '../../utils/styleUtils.css.js';
+import { spacing } from '../../tokens/semantic/spacing.js';
+
+const cardContent = styleWithLayer({
+    flex: '1 1 auto',
+    padding: spacing.md,
+});
+
+export { cardContent };

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,SAAS,CAAC;AAI3C,KAAK,gBAAgB,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,eAAO,MAAM,WAAW,0HAUvB,CAAC"}

package/dist/components/Card/CardContent.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 { cardContent } from './CardContent.css.js';
+import { sx } from '../../styles/sx.js';
+
+const CardContent = forwardRef(({ className, sx: propSx, ...props }, ref) => {
+    return (jsxRuntimeExports.jsx("div", { ref: ref, className: clsx(cardContent, className, sx(propSx)), ...props }));
+});
+CardContent.displayName = 'CardContent';
+
+export { 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,11 @@
+import { styleWithLayer } from '../../utils/styleUtils.css.js';
+
+const cardInteraction = styleWithLayer({
+    position: 'relative',
+    overflow: 'hidden',
+    height: '100%',
+    cursor: 'pointer',
+    userSelect: 'none',
+});
+
+export { cardInteraction };

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,SAAS,CAAC;AAI3C,KAAK,oBAAoB,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;AAE/C,eAAO,MAAM,eAAe,8HAoB3B,CAAC"}

package/dist/components/Card/CardInteraction.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 { cardInteraction } from './CardInteraction.css.js';
+import { useRipple } from '../../hooks/useRipple/index.js';
+import { sx } from '../../styles/sx.js';
+
+const CardInteraction = forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
+    const { ripple } = useRipple(ref);
+    return (jsxRuntimeExports.jsxs("div", { ref: ref, className: clsx(className, cardInteraction, cardInteraction, sx(propSx)), ...props, children: [children, ripple] }));
+});
+CardInteraction.displayName = 'CardInteraction';
+
+export { 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,8 @@
+import { styleWithLayer } from '../../utils/styleUtils.css.js';
+
+const thumbnail = styleWithLayer({
+    width: 'auto',
+    maxWidth: '100%',
+});
+
+export { thumbnail };

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,SAAS,CAAC;AAI3C,KAAK,kBAAkB,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;AAE7C,eAAO,MAAM,aAAa,8HAUzB,CAAC"}

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

package/dist/components/Chip/Chip.css.js

@@ -0,0 +1,59 @@
+import { createVar } 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, styleWithLayer } from '../../utils/styleUtils.css.js';
+import { SCALE_COLOR } from '../../tokens/scale/color.js';
+import { theme } from '../../themes/theme.css.js';
+import { semanticColor } from '../../tokens/semantic/color.js';
+
+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[value][50],
+        },
+    }),
+}), {});
+const chip = recipeWithLayer({
+    base: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        lineHeight: '0',
+        gap: '0.125em',
+        height: '2em',
+        padding: '0 0.75em',
+        borderRadius: theme.borderRadius,
+        backgroundColor: `rgb(${backgroundVar})`,
+        color: `rgb(${foregroundVar})`,
+        userSelect: 'none',
+    },
+    variants: {
+        color: {
+            ...semanticColors,
+            ...scaleColors,
+        },
+        size: {
+            sm: {
+                fontSize: '0.75em',
+            },
+            md: {
+                fontSize: '0.875em',
+            },
+            lg: {
+                fontSize: '1em',
+            },
+        },
+    },
+});
+
+export { chip };