@kimdw-rtk/ui 0.0.9 → 0.0.11

package/dist/components/Button/index.js

@@ -1,65 +1,51 @@
-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 '@kimdw-rtk/utils';
-import '../Accordion/Accordion.js';
-import '../Accordion/AccordionContent.css.js';
-import '../Accordion/AccordionContext.js';
-import '../Accordion/AccordionTrigger.css.js';
-import '../Box/index.js';
-import '../Card/Card.js';
-import '../Card/CardContent.js';
-import '../Card/CardInteraction.js';
-import '../Card/CardThumbnail.js';
-import '../Chip/Chip.js';
-import '../Dialog/Dialog.js';
-import '../Dialog/DialogContent.js';
-import '../Dialog/DialogFooter.js';
-import '../Dialog/DialogHeader.js';
-import '../Navigation/NavigationAside.js';
-import '../Navigation/NavigationBar.js';
-import '../Navigation/NavigationContainer.js';
-import '../Navigation/NavigationDrawer.css.js';
-import '../Navigation/NavigationItem.js';
-import '../Navigation/NavigationLogo.js';
-import '../Navigation/NavigationMenu.js';
-import '../Range/Range.js';
-import '../ScrollArea/ScrollArea.js';
-import '../Select/Select.js';
-import '../Select/SelectContext.js';
-import '../Select/SelectOption.css.js';
-import '../Skeleton/index.js';
-import '../Table/Table.js';
-import '../../styles/layers.css.js';
-import '../../styles/sprinkles.css.js';
-import '../../styles/globalStyle.css.js';
-import { sx } from '../../styles/sx.js';
-import '../Table/TableCell.css.js';
-import '../Table/TableHead.css.js';
-import '../Table/TableRow.css.js';
-import '../Tabs/Tabs.js';
-import '../Tabs/TabsContent.js';
-import '../Tabs/TabsList.js';
-import '../Tabs/TabsTrigger.js';
-import '../TextField/index.js';
-import '../Toast/index.js';
-import '../Typography/index.js';
-import { useRipple } from '../../hooks/useRipple/index.js';
-import '../../hooks/useToast/ToastProvider.js';
-import { icon, span, button } from './Button.css.js';
-import * as Button_css from './Button.css.js';
-export { Button_css as buttonCss };
-
-const Button = forwardRef(({ children, color = 'primary', size = 'md', variant = 'contained', pulse = false, className, sx: propSx, icon: icon$1, ...props }, ref) => {
+"use client";
+import { jsx, 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";
+const Button = forwardRef(
+  ({
+    children,
+    color = "primary",
+    size = "md",
+    variant = "contained",
+    pulse = false,
+    className,
+    sx: propSx,
+    icon,
+    ...props
+  }, ref) => {
     const { ripple } = useRipple(ref);
-    return (jsxRuntimeExports.jsxs("button", { ref: ref, className: clsx(className, button({
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        className: clsx(
+          className,
+          s.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 };
+            hasIcon: icon !== void 0
+          }),
+          sx(propSx)
+        ),
+        ...props,
+        children: [
+          icon !== void 0 && /* @__PURE__ */ jsx("span", { className: s.icon, children: icon }),
+          /* @__PURE__ */ jsx("span", { className: s.span({ size }), children }),
+          ripple
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+export {
+  Button,
+  s as buttonCss
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Button/index.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ReactElement } from 'react';\n\nimport { clsx } from 'clsx';\n\nimport { useRipple } from '#hooks';\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport * as s from './Button.css';\n\ninterface ButtonProps\n  extends Omit<UIComponent<'button', typeof s.button>, 'hasIcon'> {\n  icon?: ReactElement;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      children,\n      color = 'primary',\n      size = 'md',\n      variant = 'contained',\n      pulse = false,\n      className,\n      sx: propSx,\n      icon,\n      ...props\n    },\n    ref,\n  ) => {\n    const { ripple } = useRipple<HTMLButtonElement>(ref);\n\n    return (\n      <button\n        ref={ref}\n        className={clsx(\n          className,\n          s.button({\n            color,\n            size,\n            variant,\n            pulse,\n            hasIcon: icon !== undefined,\n          }),\n          sx(propSx),\n        )}\n        {...props}\n      >\n        {icon !== undefined && <span className={s.icon}>{icon}</span>}\n        <span className={s.span({ size })}>{children}</span>\n        {ripple}\n      </button>\n    );\n  },\n);\nButton.displayName = 'Button';\n\nexport { s as buttonCss };\n"],"mappings":";AAmCM,SAeyB,KAfzB;AAjCN,SAAS,kBAAqC;AAE9C,SAAS,YAAY;AAErB,SAAS,iBAAiB;AAC1B,SAAS,UAAU;AAGnB,YAAY,OAAO;AAOZ,MAAM,SAAS;AAAA,EACpB,CACE;AAAA,IACE;AAAA,IACA,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA,IAAI;AAAA,IACJ;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,OAAO,IAAI,UAA6B,GAAG;AAEnD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,EAAE,OAAO;AAAA,YACP;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,SAAS;AAAA,UACpB,CAAC;AAAA,UACD,GAAG,MAAM;AAAA,QACX;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,mBAAS,UAAa,oBAAC,UAAK,WAAW,EAAE,MAAO,gBAAK;AAAA,UACtD,oBAAC,UAAK,WAAW,EAAE,KAAK,EAAE,KAAK,CAAC,GAAI,UAAS;AAAA,UAC5C;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,OAAO,cAAc;","names":[]}

package/dist/components/Card/Card.cjs

@@ -0,0 +1,33 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }var _jsxruntime = require('react/jsx-runtime');
+var _react = require('react');
+var _clsx = require('clsx'); var _clsx2 = _interopRequireDefault(_clsx);
+var _styles = require('#styles');
+var _Cardcss = require('./Card.css'); var s = _interopRequireWildcard(_Cardcss);
+const Card = _react.forwardRef.call(void 0, 
+  ({
+    width,
+    height,
+    color = "card",
+    variant = "outlined",
+    className,
+    style,
+    sx: propSx,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        ref,
+        className: _clsx2.default.call(void 0, s.card({ color, variant }), className, _styles.sx.call(void 0, propSx)),
+        style: { width, height, ...style },
+        ...props
+      }
+    );
+  }
+);
+Card.displayName = "Card";
+
+
+
+exports.Card = Card; exports.cardCss = s;
+//# sourceMappingURL=Card.cjs.map

package/dist/components/Card/Card.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Card/Card.tsx","/home/runner/work/react-kits/react-kits/packages/ui/dist/components/Card/Card.cjs"],"names":[],"mappings":"AA6BM,0eAAA;AA7BN,8BAA+C;AAE/C,wEAAiB;AAEjB,iCAAmB;AAGnB,gFAAmB;AAOZ,MAAM,KAAA,EAAO,+BAAA;AAAA,EAClB,CACE;AAAA,IACE,KAAA;AAAA,IACA,MAAA;AAAA,IACA,MAAA,EAAQ,MAAA;AAAA,IACR,QAAA,EAAU,UAAA;AAAA,IACV,SAAA;AAAA,IACA,KAAA;AAAA,IACA,EAAA,EAAI,MAAA;AAAA,IACJ,GAAG;AAAA,EACL,CAAA,EACA,GAAA,EAAA,GACG;AACH,IAAA,uBACE,6BAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,4BAAA,CAAK,CAAE,IAAA,CAAK,EAAE,KAAA,EAAO,QAAQ,CAAC,CAAA,EAAG,SAAA,EAAW,wBAAA,MAAS,CAAC,CAAA;AAAA,QACjE,KAAA,EAAO,EAAE,KAAA,EAAO,MAAA,EAAQ,GAAG,MAAM,CAAA;AAAA,QAChC,GAAG;AAAA,MAAA;AAAA,IACN,CAAA;AAAA,EAEJ;AACF,CAAA;AACA,IAAA,CAAK,YAAA,EAAc,MAAA;ACVnB;AACE;AACA;AACF,yCAAC","file":"/home/runner/work/react-kits/react-kits/packages/ui/dist/components/Card/Card.cjs","sourcesContent":["import { forwardRef, type CSSProperties } from 'react';\n\nimport clsx from 'clsx';\n\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport * as s from './Card.css';\n\ninterface CardProps extends UIComponent<'div', typeof s.card> {\n  width?: CSSProperties['width'];\n  height?: CSSProperties['height'];\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n  (\n    {\n      width,\n      height,\n      color = 'card',\n      variant = 'outlined',\n      className,\n      style,\n      sx: propSx,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={clsx(s.card({ color, variant }), className, sx(propSx))}\n        style={{ width, height, ...style }}\n        {...props}\n      />\n    );\n  },\n);\nCard.displayName = 'Card';\n\nexport { s as cardCss };\n",null]}

package/dist/components/Card/Card.css.cjs

@@ -0,0 +1,78 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _styleUtils = require('#styleUtils');
+var _themes = require('#themes');
+var _tokens = require('#tokens');
+var _color = require('../../tokens/scale/color');
+var _CardInteractioncss = require('./CardInteraction.css');
+const semanticColors = _tokens.semanticColor.reduce(
+  (prev, color) => ({
+    ...prev,
+    [color]: _styleUtils.styleWithLayer.call(void 0, {
+      backgroundColor: `rgb(${_themes.theme.color[color]})`
+    })
+  }),
+  {}
+);
+const scaleColors = _color.SCALE_COLOR.reduce(
+  (prev, value) => ({
+    ...prev,
+    [value]: _styleUtils.styleWithLayer.call(void 0, {
+      backgroundColor: `color-mix(in srgb, rgb(${_themes.theme.color[value][500]}) 20%, rgb(${_themes.theme.color.background}) 80%)`
+    })
+  }),
+  {}
+);
+const card = _styleUtils.recipeWithLayer.call(void 0, {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    position: "relative",
+    borderRadius: _themes.theme.borderRadius,
+    color: `rgb(${_themes.theme.color.foreground})`,
+    transition: "border-color 0.2s ease, transform 0.4s ease",
+    selectors: {
+      [`&:has(${_CardInteractioncss.cardInteraction}:hover)`]: {
+        borderColor: `color-mix(in srgb, rgb(${_themes.theme.color.primary}) 10%, rgb(${_themes.theme.color.border}) 90%)`
+      },
+      [`&:has(${_CardInteractioncss.cardInteraction}:active)`]: {
+        borderColor: `color-mix(in srgb, rgb(${_themes.theme.color.primary}) 40%, rgb(${_themes.theme.color.border}) 60%)`
+      }
+    }
+  },
+  variants: {
+    variant: {
+      contained: {},
+      outlined: {
+        border: "1px solid",
+        borderColor: `rgb(${_themes.theme.color.border})`
+      },
+      glass: {
+        border: `1px solid rgb(${_themes.theme.color["border.weak"]})`,
+        borderRadius: "0.75rem",
+        background: `linear-gradient(rgba(${_themes.theme.color["card.gradient"]}, 0.06) 0%, rgba(${_themes.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
+    }
+  }
+});
+
+
+exports.card = card;
+//# sourceMappingURL=Card.css.cjs.map

package/dist/components/Card/Card.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Card/Card.css.ts","/home/runner/work/react-kits/react-kits/packages/ui/dist/components/Card/Card.css.cjs"],"names":[],"mappings":"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","file":"/home/runner/work/react-kits/react-kits/packages/ui/dist/components/Card/Card.css.cjs","sourcesContent":["import { recipeWithLayer, styleWithLayer } from '#styleUtils';\nimport { theme } from '#themes';\nimport { semanticColor } from '#tokens';\n\nimport { SCALE_COLOR, type ScaleColor } from '../../tokens/scale/color';\nimport { cardInteraction } from './CardInteraction.css';\n\nconst semanticColors = semanticColor.reduce(\n  (prev, color) => ({\n    ...prev,\n    [color]: styleWithLayer({\n      backgroundColor: `rgb(${theme.color[color]})`,\n    }),\n  }),\n  {} as Record<(typeof semanticColor)[number], string>,\n);\n\nconst scaleColors = SCALE_COLOR.reduce(\n  (prev, value) => ({\n    ...prev,\n    [value]: styleWithLayer({\n      backgroundColor: `color-mix(in srgb, rgb(${theme.color[value][500]}) 20%, rgb(${theme.color.background}) 80%)`,\n    }),\n  }),\n  {} as Record<ScaleColor, string>,\n);\n\nexport const card = recipeWithLayer({\n  base: {\n    display: 'flex',\n    flexDirection: 'column',\n    overflow: 'hidden',\n    position: 'relative',\n\n    borderRadius: theme.borderRadius,\n\n    color: `rgb(${theme.color.foreground})`,\n\n    transition: 'border-color 0.2s ease, transform 0.4s ease',\n\n    selectors: {\n      [`&:has(${cardInteraction}:hover)`]: {\n        borderColor: `color-mix(in srgb, rgb(${theme.color.primary}) 10%, rgb(${theme.color.border}) 90%)`,\n      },\n\n      [`&:has(${cardInteraction}:active)`]: {\n        borderColor: `color-mix(in srgb, rgb(${theme.color.primary}) 40%, rgb(${theme.color.border}) 60%)`,\n      },\n    },\n  },\n  variants: {\n    variant: {\n      contained: {},\n\n      outlined: {\n        border: '1px solid',\n        borderColor: `rgb(${theme.color.border})`,\n      },\n\n      glass: {\n        border: `1px solid rgb(${theme.color['border.weak']})`,\n        borderRadius: '0.75rem',\n\n        background: `linear-gradient(rgba(${theme.color['card.gradient']}, 0.06) 0%, rgba(${theme.color['card.gradient']}, 0.02) 100%)`,\n        backdropFilter: 'blur(1rem)',\n\n        '::before': {\n          position: 'absolute',\n          inset: '0',\n\n          background:\n            'linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%)',\n\n          opacity: '0',\n          transition: 'opacity 0.3s ease',\n\n          content: '',\n        },\n\n        selectors: {\n          '&:hover::before': {\n            opacity: '1',\n          },\n        },\n      },\n    },\n\n    color: {\n      ...semanticColors,\n      ...scaleColors,\n    },\n  },\n});\n",null]}

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

@@ -0,0 +1,2 @@
+import '@vanilla-extract/recipes';
+export { c as card } from '../../Card.css-CotPlKu4.cjs';

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

@@ -1,61 +1,2 @@
-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
+import '@vanilla-extract/recipes';
+export { c as card } from '../../Card.css-CotPlKu4.js';

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

@@ -1,71 +1,78 @@
-import { styleWithLayer, recipeWithLayer } 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';
-import { cardInteraction } from './CardInteraction.css.js';
-
-const semanticColors = semanticColor.reduce((prev, color) => ({
+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) => ({
+      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%)`,
-    }),
-}), {});
+      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,
+  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 };
+export {
+  card
+};
+//# sourceMappingURL=Card.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Card/Card.css.ts"],"sourcesContent":["import { recipeWithLayer, styleWithLayer } from '#styleUtils';\nimport { theme } from '#themes';\nimport { semanticColor } from '#tokens';\n\nimport { SCALE_COLOR, type ScaleColor } from '../../tokens/scale/color';\nimport { cardInteraction } from './CardInteraction.css';\n\nconst semanticColors = semanticColor.reduce(\n  (prev, color) => ({\n    ...prev,\n    [color]: styleWithLayer({\n      backgroundColor: `rgb(${theme.color[color]})`,\n    }),\n  }),\n  {} as Record<(typeof semanticColor)[number], string>,\n);\n\nconst scaleColors = SCALE_COLOR.reduce(\n  (prev, value) => ({\n    ...prev,\n    [value]: styleWithLayer({\n      backgroundColor: `color-mix(in srgb, rgb(${theme.color[value][500]}) 20%, rgb(${theme.color.background}) 80%)`,\n    }),\n  }),\n  {} as Record<ScaleColor, string>,\n);\n\nexport const card = recipeWithLayer({\n  base: {\n    display: 'flex',\n    flexDirection: 'column',\n    overflow: 'hidden',\n    position: 'relative',\n\n    borderRadius: theme.borderRadius,\n\n    color: `rgb(${theme.color.foreground})`,\n\n    transition: 'border-color 0.2s ease, transform 0.4s ease',\n\n    selectors: {\n      [`&:has(${cardInteraction}:hover)`]: {\n        borderColor: `color-mix(in srgb, rgb(${theme.color.primary}) 10%, rgb(${theme.color.border}) 90%)`,\n      },\n\n      [`&:has(${cardInteraction}:active)`]: {\n        borderColor: `color-mix(in srgb, rgb(${theme.color.primary}) 40%, rgb(${theme.color.border}) 60%)`,\n      },\n    },\n  },\n  variants: {\n    variant: {\n      contained: {},\n\n      outlined: {\n        border: '1px solid',\n        borderColor: `rgb(${theme.color.border})`,\n      },\n\n      glass: {\n        border: `1px solid rgb(${theme.color['border.weak']})`,\n        borderRadius: '0.75rem',\n\n        background: `linear-gradient(rgba(${theme.color['card.gradient']}, 0.06) 0%, rgba(${theme.color['card.gradient']}, 0.02) 100%)`,\n        backdropFilter: 'blur(1rem)',\n\n        '::before': {\n          position: 'absolute',\n          inset: '0',\n\n          background:\n            'linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%)',\n\n          opacity: '0',\n          transition: 'opacity 0.3s ease',\n\n          content: '',\n        },\n\n        selectors: {\n          '&:hover::before': {\n            opacity: '1',\n          },\n        },\n      },\n    },\n\n    color: {\n      ...semanticColors,\n      ...scaleColors,\n    },\n  },\n});\n"],"mappings":"AAAA,SAAS,iBAAiB,sBAAsB;AAChD,SAAS,aAAa;AACtB,SAAS,qBAAqB;AAE9B,SAAS,mBAAoC;AAC7C,SAAS,uBAAuB;AAEhC,MAAM,iBAAiB,cAAc;AAAA,EACnC,CAAC,MAAM,WAAW;AAAA,IAChB,GAAG;AAAA,IACH,CAAC,KAAK,GAAG,eAAe;AAAA,MACtB,iBAAiB,OAAO,MAAM,MAAM,KAAK,CAAC;AAAA,IAC5C,CAAC;AAAA,EACH;AAAA,EACA,CAAC;AACH;AAEA,MAAM,cAAc,YAAY;AAAA,EAC9B,CAAC,MAAM,WAAW;AAAA,IAChB,GAAG;AAAA,IACH,CAAC,KAAK,GAAG,eAAe;AAAA,MACtB,iBAAiB,0BAA0B,MAAM,MAAM,KAAK,EAAE,GAAG,CAAC,cAAc,MAAM,MAAM,UAAU;AAAA,IACxG,CAAC;AAAA,EACH;AAAA,EACA,CAAC;AACH;AAEO,MAAM,OAAO,gBAAgB;AAAA,EAClC,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,UAAU;AAAA,IACV,UAAU;AAAA,IAEV,cAAc,MAAM;AAAA,IAEpB,OAAO,OAAO,MAAM,MAAM,UAAU;AAAA,IAEpC,YAAY;AAAA,IAEZ,WAAW;AAAA,MACT,CAAC,SAAS,eAAe,SAAS,GAAG;AAAA,QACnC,aAAa,0BAA0B,MAAM,MAAM,OAAO,cAAc,MAAM,MAAM,MAAM;AAAA,MAC5F;AAAA,MAEA,CAAC,SAAS,eAAe,UAAU,GAAG;AAAA,QACpC,aAAa,0BAA0B,MAAM,MAAM,OAAO,cAAc,MAAM,MAAM,MAAM;AAAA,MAC5F;AAAA,IACF;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,MACP,WAAW,CAAC;AAAA,MAEZ,UAAU;AAAA,QACR,QAAQ;AAAA,QACR,aAAa,OAAO,MAAM,MAAM,MAAM;AAAA,MACxC;AAAA,MAEA,OAAO;AAAA,QACL,QAAQ,iBAAiB,MAAM,MAAM,aAAa,CAAC;AAAA,QACnD,cAAc;AAAA,QAEd,YAAY,wBAAwB,MAAM,MAAM,eAAe,CAAC,oBAAoB,MAAM,MAAM,eAAe,CAAC;AAAA,QAChH,gBAAgB;AAAA,QAEhB,YAAY;AAAA,UACV,UAAU;AAAA,UACV,OAAO;AAAA,UAEP,YACE;AAAA,UAEF,SAAS;AAAA,UACT,YAAY;AAAA,UAEZ,SAAS;AAAA,QACX;AAAA,QAEA,WAAW;AAAA,UACT,mBAAmB;AAAA,YACjB,SAAS;AAAA,UACX;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IAEA,OAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,EACF;AACF,CAAC;","names":[]}

package/dist/components/Card/Card.d.cts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+import { CSSProperties } from 'react';
+import { UIComponent } from '../../types/ui.types.cjs';
+import { c as card } from '../../Card.css-CotPlKu4.cjs';
+export { C as cardCss } from '../../Card.css-CotPlKu4.cjs';
+import '@vanilla-extract/css';
+import '@vanilla-extract/recipes';
+import '../../styles/sprinkles.css.cjs';
+
+interface CardProps extends UIComponent<'div', typeof card> {
+    width?: CSSProperties['width'];
+    height?: CSSProperties['height'];
+}
+declare const Card: react.ForwardRefExoticComponent<Omit<CardProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+export { Card };

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

@@ -1,10 +1,16 @@
-import { type CSSProperties } from 'react';
-import type { UIComponent } from '#types';
-import * as s from './Card.css';
-interface CardProps extends UIComponent<'div', typeof s.card> {
+import * as react from 'react';
+import { CSSProperties } from 'react';
+import { UIComponent } from '../../types/ui.types.js';
+import { c as card } from '../../Card.css-CotPlKu4.js';
+export { C as cardCss } from '../../Card.css-CotPlKu4.js';
+import '@vanilla-extract/css';
+import '@vanilla-extract/recipes';
+import '../../styles/sprinkles.css.js';
+
+interface CardProps extends UIComponent<'div', typeof 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
+declare const Card: react.ForwardRefExoticComponent<Omit<CardProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+export { Card };

package/dist/components/Card/Card.js

@@ -1,17 +1,33 @@
-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 '../../styles/layers.css.js';
-import '../../styles/sprinkles.css.js';
-import '../../styles/globalStyle.css.js';
-import { sx } from '../../styles/sx.js';
-import { card } from './Card.css.js';
-import * as Card_css from './Card.css.js';
-export { Card_css as cardCss };
-
-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 };
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { sx } from "#styles";
+import * as s from "./Card.css";
+const Card = forwardRef(
+  ({
+    width,
+    height,
+    color = "card",
+    variant = "outlined",
+    className,
+    style,
+    sx: propSx,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: clsx(s.card({ color, variant }), className, sx(propSx)),
+        style: { width, height, ...style },
+        ...props
+      }
+    );
+  }
+);
+Card.displayName = "Card";
+export {
+  Card,
+  s as cardCss
+};
+//# sourceMappingURL=Card.js.map

package/dist/components/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties } from 'react';\n\nimport clsx from 'clsx';\n\nimport { sx } from '#styles';\nimport type { UIComponent } from '#types';\n\nimport * as s from './Card.css';\n\ninterface CardProps extends UIComponent<'div', typeof s.card> {\n  width?: CSSProperties['width'];\n  height?: CSSProperties['height'];\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n  (\n    {\n      width,\n      height,\n      color = 'card',\n      variant = 'outlined',\n      className,\n      style,\n      sx: propSx,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={clsx(s.card({ color, variant }), className, sx(propSx))}\n        style={{ width, height, ...style }}\n        {...props}\n      />\n    );\n  },\n);\nCard.displayName = 'Card';\n\nexport { s as cardCss };\n"],"mappings":"AA6BM;AA7BN,SAAS,kBAAsC;AAE/C,OAAO,UAAU;AAEjB,SAAS,UAAU;AAGnB,YAAY,OAAO;AAOZ,MAAM,OAAO;AAAA,EAClB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ,GAAG;AAAA,EACL,GACA,QACG;AACH,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,EAAE,KAAK,EAAE,OAAO,QAAQ,CAAC,GAAG,WAAW,GAAG,MAAM,CAAC;AAAA,QACjE,OAAO,EAAE,OAAO,QAAQ,GAAG,MAAM;AAAA,QAChC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;","names":[]}

package/dist/components/Card/Card.spec.cjs

@@ -0,0 +1,19 @@
+"use strict";var _jsxruntime = require('react/jsx-runtime');
+var _react = require('@testing-library/react');
+var _uiTest = require('../../tests/uiTest');
+var _ = require('./');
+describe("Card \uCEF4\uD3EC\uB10C\uD2B8", () => {
+  _uiTest.uiTest.call(void 0, _.Card, "Card");
+  _uiTest.uiTest.call(void 0, _.CardContent, "CardContent");
+  _uiTest.uiTest.call(void 0, _.CardInteraction, "CardInteraction");
+  _uiTest.uiTest.call(void 0, _.CardThumbnail, "CardThumbnail");
+  it("CardInteraction\uC744 \uD074\uB9AD\uD558\uBA74 onClick\uC774 \uD638\uCD9C\uB418\uC5B4\uC57C \uD55C\uB2E4", () => {
+    const handleClick = jest.fn();
+    _react.render.call(void 0, 
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _.Card, { onClick: handleClick, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _.CardInteraction, { children: "Click" }) })
+    );
+    _react.fireEvent.click(_react.screen.getByText("Click"));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+});
+//# sourceMappingURL=Card.spec.cjs.map

package/dist/components/Card/Card.spec.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Card/Card.spec.tsx"],"names":[],"mappings":"AAeQ,4DAAA;AAfR,+CAA0C;AAE1C,4CAAuB;AACvB,sBAAkE;AAElE,QAAA,CAAS,+BAAA,EAAa,CAAA,EAAA,GAAM;AAC1B,EAAA,4BAAA,MAAO,EAAM,MAAM,CAAA;AACnB,EAAA,4BAAA,aAAO,EAAa,aAAa,CAAA;AACjC,EAAA,4BAAA,iBAAO,EAAiB,iBAAiB,CAAA;AACzC,EAAA,4BAAA,eAAO,EAAe,eAAe,CAAA;AAErC,EAAA,EAAA,CAAG,0GAAA,EAA2C,CAAA,EAAA,GAAM;AAClD,IAAA,MAAM,YAAA,EAAc,IAAA,CAAK,EAAA,CAAG,CAAA;AAC5B,IAAA,2BAAA;AAAA,sBACE,6BAAA,MAAC,EAAA,EAAK,OAAA,EAAS,WAAA,EACb,QAAA,kBAAA,6BAAA,iBAAC,EAAA,EAAgB,QAAA,EAAA,QAAA,CAAK,EAAA,CACxB;AAAA,IACF,CAAA;AAEA,IAAA,gBAAA,CAAU,KAAA,CAAM,aAAA,CAAO,SAAA,CAAU,OAAO,CAAC,CAAA;AAEzC,IAAA,MAAA,CAAO,WAAW,CAAA,CAAE,qBAAA,CAAsB,CAAC,CAAA;AAAA,EAC7C,CAAC,CAAA;AACH,CAAC,CAAA","file":"/home/runner/work/react-kits/react-kits/packages/ui/dist/components/Card/Card.spec.cjs","sourcesContent":["import { render, screen, fireEvent } from '@testing-library/react';\n\nimport { uiTest } from '../../tests/uiTest';\nimport { Card, CardContent, CardInteraction, CardThumbnail } from './';\n\ndescribe('Card 컴포넌트', () => {\n  uiTest(Card, 'Card');\n  uiTest(CardContent, 'CardContent');\n  uiTest(CardInteraction, 'CardInteraction');\n  uiTest(CardThumbnail, 'CardThumbnail');\n\n  it('CardInteraction을 클릭하면 onClick이 호출되어야 한다', () => {\n    const handleClick = jest.fn();\n    render(\n      <Card onClick={handleClick}>\n        <CardInteraction>Click</CardInteraction>\n      </Card>,\n    );\n\n    fireEvent.click(screen.getByText('Click'));\n\n    expect(handleClick).toHaveBeenCalledTimes(1);\n  });\n});\n"]}

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

@@ -0,0 +1,2 @@
+
+export {  }

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

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

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

@@ -0,0 +1,19 @@
+import { 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 \uCEF4\uD3EC\uB10C\uD2B8", () => {
+  uiTest(Card, "Card");
+  uiTest(CardContent, "CardContent");
+  uiTest(CardInteraction, "CardInteraction");
+  uiTest(CardThumbnail, "CardThumbnail");
+  it("CardInteraction\uC744 \uD074\uB9AD\uD558\uBA74 onClick\uC774 \uD638\uCD9C\uB418\uC5B4\uC57C \uD55C\uB2E4", () => {
+    const handleClick = jest.fn();
+    render(
+      /* @__PURE__ */ jsx(Card, { onClick: handleClick, children: /* @__PURE__ */ jsx(CardInteraction, { children: "Click" }) })
+    );
+    fireEvent.click(screen.getByText("Click"));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+});
+//# sourceMappingURL=Card.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Card/Card.spec.tsx"],"sourcesContent":["import { render, screen, fireEvent } from '@testing-library/react';\n\nimport { uiTest } from '../../tests/uiTest';\nimport { Card, CardContent, CardInteraction, CardThumbnail } from './';\n\ndescribe('Card 컴포넌트', () => {\n  uiTest(Card, 'Card');\n  uiTest(CardContent, 'CardContent');\n  uiTest(CardInteraction, 'CardInteraction');\n  uiTest(CardThumbnail, 'CardThumbnail');\n\n  it('CardInteraction을 클릭하면 onClick이 호출되어야 한다', () => {\n    const handleClick = jest.fn();\n    render(\n      <Card onClick={handleClick}>\n        <CardInteraction>Click</CardInteraction>\n      </Card>,\n    );\n\n    fireEvent.click(screen.getByText('Click'));\n\n    expect(handleClick).toHaveBeenCalledTimes(1);\n  });\n});\n"],"mappings":"AAeQ;AAfR,SAAS,QAAQ,QAAQ,iBAAiB;AAE1C,SAAS,cAAc;AACvB,SAAS,MAAM,aAAa,iBAAiB,qBAAqB;AAElE,SAAS,iCAAa,MAAM;AAC1B,SAAO,MAAM,MAAM;AACnB,SAAO,aAAa,aAAa;AACjC,SAAO,iBAAiB,iBAAiB;AACzC,SAAO,eAAe,eAAe;AAErC,KAAG,4GAA2C,MAAM;AAClD,UAAM,cAAc,KAAK,GAAG;AAC5B;AAAA,MACE,oBAAC,QAAK,SAAS,aACb,8BAAC,mBAAgB,mBAAK,GACxB;AAAA,IACF;AAEA,cAAU,MAAM,OAAO,UAAU,OAAO,CAAC;AAEzC,WAAO,WAAW,EAAE,sBAAsB,CAAC;AAAA,EAC7C,CAAC;AACH,CAAC;","names":[]}