@karakuri-ui/react 0.3.3 → 0.3.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (149) hide show
  1. package/README.md +27 -4
  2. package/dist/components/ui/accordion.js +27 -24
  3. package/dist/components/ui/accordion.js.map +1 -1
  4. package/dist/components/ui/accordion.mjs +28 -25
  5. package/dist/components/ui/accordion.mjs.map +1 -1
  6. package/dist/components/ui/alert.js +45 -27
  7. package/dist/components/ui/alert.js.map +1 -1
  8. package/dist/components/ui/alert.mjs +46 -28
  9. package/dist/components/ui/alert.mjs.map +1 -1
  10. package/dist/components/ui/avatar.js +41 -32
  11. package/dist/components/ui/avatar.js.map +1 -1
  12. package/dist/components/ui/avatar.mjs +42 -33
  13. package/dist/components/ui/avatar.mjs.map +1 -1
  14. package/dist/components/ui/badge.js +46 -43
  15. package/dist/components/ui/badge.js.map +1 -1
  16. package/dist/components/ui/badge.mjs +47 -44
  17. package/dist/components/ui/badge.mjs.map +1 -1
  18. package/dist/components/ui/breadcrumb.js +30 -25
  19. package/dist/components/ui/breadcrumb.js.map +1 -1
  20. package/dist/components/ui/breadcrumb.mjs +31 -26
  21. package/dist/components/ui/breadcrumb.mjs.map +1 -1
  22. package/dist/components/ui/button-group.js +6 -5
  23. package/dist/components/ui/button-group.js.map +1 -1
  24. package/dist/components/ui/button-group.mjs +7 -6
  25. package/dist/components/ui/button-group.mjs.map +1 -1
  26. package/dist/components/ui/button.js +24 -14
  27. package/dist/components/ui/button.js.map +1 -1
  28. package/dist/components/ui/button.mjs +26 -16
  29. package/dist/components/ui/button.mjs.map +1 -1
  30. package/dist/components/ui/card.js +53 -39
  31. package/dist/components/ui/card.js.map +1 -1
  32. package/dist/components/ui/card.mjs +54 -40
  33. package/dist/components/ui/card.mjs.map +1 -1
  34. package/dist/components/ui/chart.d.mts +1 -1
  35. package/dist/components/ui/chart.d.ts +1 -1
  36. package/dist/components/ui/chart.js +154 -130
  37. package/dist/components/ui/chart.js.map +1 -1
  38. package/dist/components/ui/chart.mjs +155 -131
  39. package/dist/components/ui/chart.mjs.map +1 -1
  40. package/dist/components/ui/checkbox.js +47 -40
  41. package/dist/components/ui/checkbox.js.map +1 -1
  42. package/dist/components/ui/checkbox.mjs +49 -42
  43. package/dist/components/ui/checkbox.mjs.map +1 -1
  44. package/dist/components/ui/divider.js +16 -13
  45. package/dist/components/ui/divider.js.map +1 -1
  46. package/dist/components/ui/divider.mjs +17 -14
  47. package/dist/components/ui/divider.mjs.map +1 -1
  48. package/dist/components/ui/drawer.js +44 -35
  49. package/dist/components/ui/drawer.js.map +1 -1
  50. package/dist/components/ui/drawer.mjs +45 -36
  51. package/dist/components/ui/drawer.mjs.map +1 -1
  52. package/dist/components/ui/dropdown.js +31 -24
  53. package/dist/components/ui/dropdown.js.map +1 -1
  54. package/dist/components/ui/dropdown.mjs +32 -25
  55. package/dist/components/ui/dropdown.mjs.map +1 -1
  56. package/dist/components/ui/field.js +18 -15
  57. package/dist/components/ui/field.js.map +1 -1
  58. package/dist/components/ui/field.mjs +19 -16
  59. package/dist/components/ui/field.mjs.map +1 -1
  60. package/dist/components/ui/icon-button.js +17 -14
  61. package/dist/components/ui/icon-button.js.map +1 -1
  62. package/dist/components/ui/icon-button.mjs +19 -16
  63. package/dist/components/ui/icon-button.mjs.map +1 -1
  64. package/dist/components/ui/index.mjs +35 -35
  65. package/dist/components/ui/input.js +34 -29
  66. package/dist/components/ui/input.js.map +1 -1
  67. package/dist/components/ui/input.mjs +36 -31
  68. package/dist/components/ui/input.mjs.map +1 -1
  69. package/dist/components/ui/metric-card.js +24 -21
  70. package/dist/components/ui/metric-card.js.map +1 -1
  71. package/dist/components/ui/metric-card.mjs +25 -22
  72. package/dist/components/ui/metric-card.mjs.map +1 -1
  73. package/dist/components/ui/modal.js +91 -74
  74. package/dist/components/ui/modal.js.map +1 -1
  75. package/dist/components/ui/modal.mjs +92 -75
  76. package/dist/components/ui/modal.mjs.map +1 -1
  77. package/dist/components/ui/navigation-menu.js +114 -93
  78. package/dist/components/ui/navigation-menu.js.map +1 -1
  79. package/dist/components/ui/navigation-menu.mjs +115 -94
  80. package/dist/components/ui/navigation-menu.mjs.map +1 -1
  81. package/dist/components/ui/pagination.js +66 -55
  82. package/dist/components/ui/pagination.js.map +1 -1
  83. package/dist/components/ui/pagination.mjs +67 -56
  84. package/dist/components/ui/pagination.mjs.map +1 -1
  85. package/dist/components/ui/popover.js +39 -36
  86. package/dist/components/ui/popover.js.map +1 -1
  87. package/dist/components/ui/popover.mjs +40 -37
  88. package/dist/components/ui/popover.mjs.map +1 -1
  89. package/dist/components/ui/progress.js +73 -64
  90. package/dist/components/ui/progress.js.map +1 -1
  91. package/dist/components/ui/progress.mjs +74 -65
  92. package/dist/components/ui/progress.mjs.map +1 -1
  93. package/dist/components/ui/radio-group.js +23 -19
  94. package/dist/components/ui/radio-group.js.map +1 -1
  95. package/dist/components/ui/radio-group.mjs +25 -21
  96. package/dist/components/ui/radio-group.mjs.map +1 -1
  97. package/dist/components/ui/segmented.js +7 -6
  98. package/dist/components/ui/segmented.js.map +1 -1
  99. package/dist/components/ui/segmented.mjs +8 -7
  100. package/dist/components/ui/segmented.mjs.map +1 -1
  101. package/dist/components/ui/select.js +55 -48
  102. package/dist/components/ui/select.js.map +1 -1
  103. package/dist/components/ui/select.mjs +56 -49
  104. package/dist/components/ui/select.mjs.map +1 -1
  105. package/dist/components/ui/skeleton.js +20 -19
  106. package/dist/components/ui/skeleton.js.map +1 -1
  107. package/dist/components/ui/skeleton.mjs +21 -20
  108. package/dist/components/ui/skeleton.mjs.map +1 -1
  109. package/dist/components/ui/slider.js +68 -58
  110. package/dist/components/ui/slider.js.map +1 -1
  111. package/dist/components/ui/slider.mjs +69 -59
  112. package/dist/components/ui/slider.mjs.map +1 -1
  113. package/dist/components/ui/spinner.js +185 -176
  114. package/dist/components/ui/spinner.js.map +1 -1
  115. package/dist/components/ui/spinner.mjs +186 -177
  116. package/dist/components/ui/spinner.mjs.map +1 -1
  117. package/dist/components/ui/switch.js +39 -28
  118. package/dist/components/ui/switch.js.map +1 -1
  119. package/dist/components/ui/switch.mjs +41 -30
  120. package/dist/components/ui/switch.mjs.map +1 -1
  121. package/dist/components/ui/table.js +26 -23
  122. package/dist/components/ui/table.js.map +1 -1
  123. package/dist/components/ui/table.mjs +27 -24
  124. package/dist/components/ui/table.mjs.map +1 -1
  125. package/dist/components/ui/tabs.js +25 -9
  126. package/dist/components/ui/tabs.js.map +1 -1
  127. package/dist/components/ui/tabs.mjs +26 -10
  128. package/dist/components/ui/tabs.mjs.map +1 -1
  129. package/dist/components/ui/textarea.js +2 -1
  130. package/dist/components/ui/textarea.js.map +1 -1
  131. package/dist/components/ui/textarea.mjs +4 -3
  132. package/dist/components/ui/textarea.mjs.map +1 -1
  133. package/dist/components/ui/toast.js +104 -80
  134. package/dist/components/ui/toast.js.map +1 -1
  135. package/dist/components/ui/toast.mjs +105 -81
  136. package/dist/components/ui/toast.mjs.map +1 -1
  137. package/dist/components/ui/toggle-group.js +9 -8
  138. package/dist/components/ui/toggle-group.js.map +1 -1
  139. package/dist/components/ui/toggle-group.mjs +10 -9
  140. package/dist/components/ui/toggle-group.mjs.map +1 -1
  141. package/dist/components/ui/toggle.js +3 -2
  142. package/dist/components/ui/toggle.js.map +1 -1
  143. package/dist/components/ui/toggle.mjs +4 -3
  144. package/dist/components/ui/toggle.mjs.map +1 -1
  145. package/dist/components/ui/tooltip.js +18 -15
  146. package/dist/components/ui/tooltip.js.map +1 -1
  147. package/dist/components/ui/tooltip.mjs +19 -16
  148. package/dist/components/ui/tooltip.mjs.map +1 -1
  149. package/package.json +27 -19
@@ -40,6 +40,7 @@ __export(card_exports, {
40
40
  cardVariants: () => cardVariants
41
41
  });
42
42
  module.exports = __toCommonJS(card_exports);
43
+ var import_jsx_runtime = require("react/jsx-runtime");
43
44
  var React = __toESM(require("react"));
44
45
  var import_react_slot = require("@radix-ui/react-slot");
45
46
  var import_class_variance_authority = require("class-variance-authority");
@@ -117,9 +118,12 @@ const Card = React.forwardRef(
117
118
  otherChildren.push(child);
118
119
  }
119
120
  });
120
- content = /* @__PURE__ */ React.createElement(React.Fragment, null, imageChildren, /* @__PURE__ */ React.createElement("div", { className: "flex-1 flex flex-col min-w-0" }, otherChildren));
121
+ content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
122
+ imageChildren,
123
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-1 flex flex-col min-w-0", children: otherChildren })
124
+ ] });
121
125
  }
122
- return /* @__PURE__ */ React.createElement(CardContext.Provider, { value: { size, direction } }, /* @__PURE__ */ React.createElement(
126
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardContext.Provider, { value: { size, direction }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
123
127
  Comp,
124
128
  {
125
129
  ref,
@@ -128,10 +132,10 @@ const Card = React.forwardRef(
128
132
  interactive && "cursor-pointer hover:shadow-md hover:-translate-y-0.5",
129
133
  className
130
134
  ),
131
- ...props
132
- },
133
- content
134
- ));
135
+ ...props,
136
+ children: content
137
+ }
138
+ ) });
135
139
  }
136
140
  );
137
141
  Card.displayName = "Card";
@@ -200,29 +204,35 @@ const CardImage = React.forwardRef(
200
204
  const isHorizontal = direction === "horizontal";
201
205
  if (isHorizontal) {
202
206
  const opacityClass = overlay ? overlayOpacityMap[overlayOpacity] || "from-black/60" : null;
203
- return /* @__PURE__ */ React.createElement("div", { className: (0, import_utils.cn)("relative shrink-0 w-48 overflow-hidden", className) }, /* @__PURE__ */ React.createElement(
204
- "img",
205
- {
206
- ref,
207
- alt,
208
- className: "absolute inset-0 w-full h-full object-cover",
209
- ...props
210
- }
211
- ), overlay && /* @__PURE__ */ React.createElement("div", { className: (0, import_utils.cn)("absolute inset-0 bg-gradient-to-t to-transparent", overlayClassName || opacityClass) }));
207
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_utils.cn)("relative shrink-0 w-48 overflow-hidden", className), children: [
208
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
209
+ "img",
210
+ {
211
+ ref,
212
+ alt,
213
+ className: "absolute inset-0 w-full h-full object-cover",
214
+ ...props
215
+ }
216
+ ),
217
+ overlay && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_utils.cn)("absolute inset-0 bg-gradient-to-t to-transparent", overlayClassName || opacityClass) })
218
+ ] });
212
219
  }
213
220
  if (overlay) {
214
221
  const opacityClass = overlayOpacityMap[overlayOpacity] || "from-black/60";
215
- return /* @__PURE__ */ React.createElement("div", { className: "relative w-full shrink-0 overflow-hidden" }, /* @__PURE__ */ React.createElement(
216
- "img",
217
- {
218
- ref,
219
- alt,
220
- className: (0, import_utils.cn)("w-full object-cover", className),
221
- ...props
222
- }
223
- ), /* @__PURE__ */ React.createElement("div", { className: (0, import_utils.cn)("absolute inset-0 bg-gradient-to-t to-transparent", overlayClassName || opacityClass) }));
222
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative w-full shrink-0 overflow-hidden", children: [
223
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
224
+ "img",
225
+ {
226
+ ref,
227
+ alt,
228
+ className: (0, import_utils.cn)("w-full object-cover", className),
229
+ ...props
230
+ }
231
+ ),
232
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_utils.cn)("absolute inset-0 bg-gradient-to-t to-transparent", overlayClassName || opacityClass) })
233
+ ] });
224
234
  }
225
- return /* @__PURE__ */ React.createElement(
235
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
226
236
  "img",
227
237
  {
228
238
  ref,
@@ -247,7 +257,7 @@ const CardHeader = React.forwardRef(
247
257
  otherChildren.push(child);
248
258
  }
249
259
  });
250
- return /* @__PURE__ */ React.createElement(
260
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
251
261
  "div",
252
262
  {
253
263
  ref,
@@ -259,17 +269,19 @@ const CardHeader = React.forwardRef(
259
269
  sizeLastPbMap[size],
260
270
  className
261
271
  ),
262
- ...props
263
- },
264
- /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0 space-y-3" }, otherChildren),
265
- actionChildren
272
+ ...props,
273
+ children: [
274
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-1 min-w-0 space-y-3", children: otherChildren }),
275
+ actionChildren
276
+ ]
277
+ }
266
278
  );
267
279
  }
268
280
  );
269
281
  CardHeader.displayName = "CardHeader";
270
282
  const CardTitle = React.forwardRef(
271
283
  ({ className, icon, children, ...props }, ref) => {
272
- return /* @__PURE__ */ React.createElement(
284
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
273
285
  "h3",
274
286
  {
275
287
  ref,
@@ -278,17 +290,19 @@ const CardTitle = React.forwardRef(
278
290
  icon && "flex items-center gap-2",
279
291
  className
280
292
  ),
281
- ...props
282
- },
283
- icon && /* @__PURE__ */ React.createElement("span", { className: "shrink-0 icon-sm [&>svg]:w-full [&>svg]:h-full", "aria-hidden": "true" }, icon),
284
- children
293
+ ...props,
294
+ children: [
295
+ icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "shrink-0 icon-sm [&>svg]:w-full [&>svg]:h-full", "aria-hidden": "true", children: icon }),
296
+ children
297
+ ]
298
+ }
285
299
  );
286
300
  }
287
301
  );
288
302
  CardTitle.displayName = "CardTitle";
289
303
  const CardDescription = React.forwardRef(
290
304
  ({ className, ...props }, ref) => {
291
- return /* @__PURE__ */ React.createElement(
305
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
292
306
  "p",
293
307
  {
294
308
  ref,
@@ -301,7 +315,7 @@ const CardDescription = React.forwardRef(
301
315
  CardDescription.displayName = "CardDescription";
302
316
  const CardAction = React.forwardRef(
303
317
  ({ className, ...props }, ref) => {
304
- return /* @__PURE__ */ React.createElement(
318
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
305
319
  "div",
306
320
  {
307
321
  ref,
@@ -315,7 +329,7 @@ CardAction.displayName = "CardAction";
315
329
  const CardContent = React.forwardRef(
316
330
  ({ className, ...props }, ref) => {
317
331
  const { size } = useCard();
318
- return /* @__PURE__ */ React.createElement(
332
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
319
333
  "div",
320
334
  {
321
335
  ref,
@@ -329,7 +343,7 @@ CardContent.displayName = "CardContent";
329
343
  const CardFooter = React.forwardRef(
330
344
  ({ className, ...props }, ref) => {
331
345
  const { size } = useCard();
332
- return /* @__PURE__ */ React.createElement(
346
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
333
347
  "div",
334
348
  {
335
349
  ref,
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/ui/card.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ── Context for size propagation ──\ntype CardSize = 'sm' | 'default' | 'lg'\ntype CardDirection = 'vertical' | 'horizontal'\n\nconst CardContext = React.createContext<{ size: CardSize; direction: CardDirection }>({\n size: 'default',\n direction: 'vertical',\n})\n\nfunction useCard() {\n return React.useContext(CardContext)\n}\n\n// ── Card (Root) ──\nconst cardVariants = cva(\n 'flex overflow-hidden transition-all duration-normal',\n {\n variants: {\n variant: {\n default: 'bg-background-paper border border-border-subtle shadow-sm',\n outline: 'bg-background-paper border border-border',\n ghost: 'bg-transparent',\n },\n size: {\n sm: '',\n default: '',\n lg: '',\n },\n radius: {\n sm: 'rounded-sm', // 2px\n base: 'rounded', // 4px\n md: 'rounded-md', // 6px\n lg: 'rounded-lg', // 8px\n xl: 'rounded-xl', // 12px\n '2xl': 'rounded-2xl', // 16px\n },\n direction: {\n vertical: 'flex-col',\n horizontal: 'flex-row',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n radius: 'xl',\n direction: 'vertical',\n },\n }\n)\n\nexport type CardVariant = 'default' | 'outline' | 'ghost'\nexport type CardRadius = 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl'\n\nexport interface CardProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof cardVariants> {\n /** Visual style */\n variant?: CardVariant\n /** Content padding scale */\n size?: CardSize\n /** Border radius */\n radius?: CardRadius\n /** Layout direction */\n direction?: CardDirection\n /** Enable hover effect for interactive cards */\n interactive?: boolean\n /** Render as child element (Slot pattern) */\n asChild?: boolean\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n ({\n className,\n variant = 'default',\n size = 'default',\n radius = 'xl',\n direction = 'vertical',\n interactive = false,\n asChild = false,\n children,\n ...props\n }, ref) => {\n const Comp = asChild ? Slot : 'div'\n\n // Horizontal: separate CardImage from rest, wrap rest in flex-col\n let content = children\n if (direction === 'horizontal') {\n const childArray = React.Children.toArray(children)\n const imageChildren: React.ReactNode[] = []\n const otherChildren: React.ReactNode[] = []\n\n childArray.forEach((child) => {\n if (React.isValidElement(child) && child.type === CardImage) {\n imageChildren.push(child)\n } else {\n otherChildren.push(child)\n }\n })\n\n content = (\n <>\n {imageChildren}\n <div className=\"flex-1 flex flex-col min-w-0\">\n {otherChildren}\n </div>\n </>\n )\n }\n\n return (\n <CardContext.Provider value={{ size, direction }}>\n <Comp\n ref={ref}\n className={cn(\n cardVariants({ variant, size, radius, direction }),\n interactive && 'cursor-pointer hover:shadow-md hover:-translate-y-0.5',\n className\n )}\n {...props}\n >\n {content}\n </Comp>\n </CardContext.Provider>\n )\n }\n)\nCard.displayName = 'Card'\n\n// ── Size-based padding map (responsive: mobile → desktop) ──\nconst sizePaddingMap = {\n sm: 'p-4', // 16px\n default: 'p-4 sm:p-6', // 16px → 24px\n lg: 'p-6 sm:p-8', // 24px → 32px\n} as const\n\nconst sizePaddingXMap = {\n sm: 'px-4', // 16px\n default: 'px-4 sm:px-6', // 16px → 24px\n lg: 'px-6 sm:px-8', // 24px → 32px\n} as const\n\nconst sizePaddingYMap = {\n sm: 'py-3', // 12px\n default: 'py-3 sm:py-4', // 12px → 16px\n lg: 'py-4 sm:py-5', // 16px → 20px\n} as const\n\n// Top padding for CardHeader — optical balance (top >= sides)\nconst sizePaddingTMap = {\n sm: 'pt-5', // 20px\n default: 'pt-5 sm:pt-6', // 20px → 24px\n lg: 'pt-6 sm:pt-8', // 24px → 32px\n} as const\n\n// Inner bottom padding (between sections) — tighter than outer\nconst sizeInnerPbMap = {\n sm: 'pb-3', // 12px\n default: 'pb-3 sm:pb-4', // 12px → 16px\n lg: 'pb-3 sm:pb-4', // 12px → 16px (default와 동일)\n} as const\n\n// Last-child bottom padding for CardContent (when no footer) — match pt\nconst sizeLastPbMap = {\n sm: 'last:pb-5', // 20px\n default: 'last:pb-5 sm:last:pb-6', // 20px → 24px\n lg: 'last:pb-6 sm:last:pb-8', // 24px → 32px\n} as const\n\n// ── CardImage ──\n// Overlay opacity to Tailwind class mapping\nconst overlayOpacityMap: Record<number, string> = {\n 10: 'from-black/10',\n 20: 'from-black/20',\n 30: 'from-black/30',\n 40: 'from-black/40',\n 50: 'from-black/50',\n 60: 'from-black/60',\n 70: 'from-black/70',\n 80: 'from-black/80',\n 90: 'from-black/90',\n}\n\nexport interface CardImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n /** Gradient overlay on image */\n overlay?: boolean\n /** Overlay opacity (10–90). Default: 60 */\n overlayOpacity?: number\n /** Custom class for overlay gradient (overrides overlayOpacity) */\n overlayClassName?: string\n}\n\nconst CardImage = React.forwardRef<HTMLImageElement, CardImageProps>(\n ({ className, overlay = false, overlayOpacity = 60, overlayClassName, alt = '', ...props }, ref) => {\n const { direction } = useCard()\n const isHorizontal = direction === 'horizontal'\n\n // Horizontal: use absolute positioning so the image fills the\n // wrapper height which is determined by the content side via\n // flexbox align-items:stretch (default).\n if (isHorizontal) {\n const opacityClass = overlay\n ? (overlayOpacityMap[overlayOpacity] || 'from-black/60')\n : null\n\n return (\n <div className={cn('relative shrink-0 w-48 overflow-hidden', className)}>\n <img\n ref={ref}\n alt={alt}\n className=\"absolute inset-0 w-full h-full object-cover\"\n {...props}\n />\n {overlay && (\n <div className={cn('absolute inset-0 bg-gradient-to-t to-transparent', overlayClassName || opacityClass)} />\n )}\n </div>\n )\n }\n\n // Vertical\n if (overlay) {\n const opacityClass = overlayOpacityMap[overlayOpacity] || 'from-black/60'\n\n return (\n <div className=\"relative w-full shrink-0 overflow-hidden\">\n <img\n ref={ref}\n alt={alt}\n className={cn('w-full object-cover', className)}\n {...props}\n />\n <div className={cn('absolute inset-0 bg-gradient-to-t to-transparent', overlayClassName || opacityClass)} />\n </div>\n )\n }\n\n return (\n <img\n ref={ref}\n alt={alt}\n className={cn('w-full object-cover shrink-0', className)}\n {...props}\n />\n )\n }\n)\nCardImage.displayName = 'CardImage'\n\n// ── CardHeader ──\nexport interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(\n ({ className, children, ...props }, ref) => {\n const { size } = useCard()\n\n // Separate CardAction from other children for proper flex layout\n const childArray = React.Children.toArray(children)\n const actionChildren: React.ReactNode[] = []\n const otherChildren: React.ReactNode[] = []\n\n childArray.forEach((child) => {\n if (React.isValidElement(child) && child.type === CardAction) {\n actionChildren.push(child)\n } else {\n otherChildren.push(child)\n }\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n 'flex items-start gap-3',\n sizePaddingXMap[size],\n sizePaddingTMap[size],\n sizeInnerPbMap[size],\n sizeLastPbMap[size],\n className\n )}\n {...props}\n >\n <div className=\"flex-1 min-w-0 space-y-3\">\n {otherChildren}\n </div>\n {actionChildren}\n </div>\n )\n }\n)\nCardHeader.displayName = 'CardHeader'\n\n// ── CardTitle ──\nexport interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {\n /** Leading icon */\n icon?: React.ReactNode\n}\n\nconst CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(\n ({ className, icon, children, ...props }, ref) => {\n return (\n <h3\n ref={ref}\n className={cn(\n 'font-semibold text-foreground leading-none tracking-tight',\n icon && 'flex items-center gap-2',\n className\n )}\n {...props}\n >\n {icon && (\n <span className=\"shrink-0 icon-sm [&>svg]:w-full [&>svg]:h-full\" aria-hidden=\"true\">\n {icon}\n </span>\n )}\n {children}\n </h3>\n )\n }\n)\nCardTitle.displayName = 'CardTitle'\n\n// ── CardDescription ──\nexport interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nconst CardDescription = React.forwardRef<HTMLParagraphElement, CardDescriptionProps>(\n ({ className, ...props }, ref) => {\n return (\n <p\n ref={ref}\n className={cn('text-sm text-text-muted', className)}\n {...props}\n />\n )\n }\n)\nCardDescription.displayName = 'CardDescription'\n\n// ── CardAction ──\nexport interface CardActionProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst CardAction = React.forwardRef<HTMLDivElement, CardActionProps>(\n ({ className, ...props }, ref) => {\n return (\n <div\n ref={ref}\n className={cn('shrink-0 ml-auto -mr-2 -mt-2', className)}\n {...props}\n />\n )\n }\n)\nCardAction.displayName = 'CardAction'\n\n// ── CardContent ──\nexport interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(\n ({ className, ...props }, ref) => {\n const { size } = useCard()\n\n return (\n <div\n ref={ref}\n className={cn(sizePaddingXMap[size], 'pb-0', sizeLastPbMap[size], className)}\n {...props}\n />\n )\n }\n)\nCardContent.displayName = 'CardContent'\n\n// ── CardFooter ──\nexport interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(\n ({ className, ...props }, ref) => {\n const { size } = useCard()\n\n return (\n <div\n ref={ref}\n className={cn(\n 'flex items-center gap-2',\n sizePaddingXMap[size],\n sizePaddingYMap[size],\n 'mt-auto',\n className\n )}\n {...props}\n />\n )\n }\n)\nCardFooter.displayName = 'CardFooter'\n\nexport {\n Card,\n CardImage,\n CardHeader,\n CardTitle,\n CardDescription,\n CardAction,\n CardContent,\n CardFooter,\n cardVariants,\n}\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../../../src/components/ui/card.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ── Context for size propagation ──\ntype CardSize = 'sm' | 'default' | 'lg'\ntype CardDirection = 'vertical' | 'horizontal'\n\nconst CardContext = React.createContext<{ size: CardSize; direction: CardDirection }>({\n size: 'default',\n direction: 'vertical',\n})\n\nfunction useCard() {\n return React.useContext(CardContext)\n}\n\n// ── Card (Root) ──\nconst cardVariants = cva(\n 'flex overflow-hidden transition-all duration-normal',\n {\n variants: {\n variant: {\n default: 'bg-background-paper border border-border-subtle shadow-sm',\n outline: 'bg-background-paper border border-border',\n ghost: 'bg-transparent',\n },\n size: {\n sm: '',\n default: '',\n lg: '',\n },\n radius: {\n sm: 'rounded-sm', // 2px\n base: 'rounded', // 4px\n md: 'rounded-md', // 6px\n lg: 'rounded-lg', // 8px\n xl: 'rounded-xl', // 12px\n '2xl': 'rounded-2xl', // 16px\n },\n direction: {\n vertical: 'flex-col',\n horizontal: 'flex-row',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n radius: 'xl',\n direction: 'vertical',\n },\n }\n)\n\nexport type CardVariant = 'default' | 'outline' | 'ghost'\nexport type CardRadius = 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl'\n\nexport interface CardProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof cardVariants> {\n /** Visual style */\n variant?: CardVariant\n /** Content padding scale */\n size?: CardSize\n /** Border radius */\n radius?: CardRadius\n /** Layout direction */\n direction?: CardDirection\n /** Enable hover effect for interactive cards */\n interactive?: boolean\n /** Render as child element (Slot pattern) */\n asChild?: boolean\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n ({\n className,\n variant = 'default',\n size = 'default',\n radius = 'xl',\n direction = 'vertical',\n interactive = false,\n asChild = false,\n children,\n ...props\n }, ref) => {\n const Comp = asChild ? Slot : 'div'\n\n // Horizontal: separate CardImage from rest, wrap rest in flex-col\n let content = children\n if (direction === 'horizontal') {\n const childArray = React.Children.toArray(children)\n const imageChildren: React.ReactNode[] = []\n const otherChildren: React.ReactNode[] = []\n\n childArray.forEach((child) => {\n if (React.isValidElement(child) && child.type === CardImage) {\n imageChildren.push(child)\n } else {\n otherChildren.push(child)\n }\n })\n\n content = (\n <>\n {imageChildren}\n <div className=\"flex-1 flex flex-col min-w-0\">\n {otherChildren}\n </div>\n </>\n )\n }\n\n return (\n <CardContext.Provider value={{ size, direction }}>\n <Comp\n ref={ref}\n className={cn(\n cardVariants({ variant, size, radius, direction }),\n interactive && 'cursor-pointer hover:shadow-md hover:-translate-y-0.5',\n className\n )}\n {...props}\n >\n {content}\n </Comp>\n </CardContext.Provider>\n )\n }\n)\nCard.displayName = 'Card'\n\n// ── Size-based padding map (responsive: mobile → desktop) ──\nconst sizePaddingMap = {\n sm: 'p-4', // 16px\n default: 'p-4 sm:p-6', // 16px → 24px\n lg: 'p-6 sm:p-8', // 24px → 32px\n} as const\n\nconst sizePaddingXMap = {\n sm: 'px-4', // 16px\n default: 'px-4 sm:px-6', // 16px → 24px\n lg: 'px-6 sm:px-8', // 24px → 32px\n} as const\n\nconst sizePaddingYMap = {\n sm: 'py-3', // 12px\n default: 'py-3 sm:py-4', // 12px → 16px\n lg: 'py-4 sm:py-5', // 16px → 20px\n} as const\n\n// Top padding for CardHeader — optical balance (top >= sides)\nconst sizePaddingTMap = {\n sm: 'pt-5', // 20px\n default: 'pt-5 sm:pt-6', // 20px → 24px\n lg: 'pt-6 sm:pt-8', // 24px → 32px\n} as const\n\n// Inner bottom padding (between sections) — tighter than outer\nconst sizeInnerPbMap = {\n sm: 'pb-3', // 12px\n default: 'pb-3 sm:pb-4', // 12px → 16px\n lg: 'pb-3 sm:pb-4', // 12px → 16px (default와 동일)\n} as const\n\n// Last-child bottom padding for CardContent (when no footer) — match pt\nconst sizeLastPbMap = {\n sm: 'last:pb-5', // 20px\n default: 'last:pb-5 sm:last:pb-6', // 20px → 24px\n lg: 'last:pb-6 sm:last:pb-8', // 24px → 32px\n} as const\n\n// ── CardImage ──\n// Overlay opacity to Tailwind class mapping\nconst overlayOpacityMap: Record<number, string> = {\n 10: 'from-black/10',\n 20: 'from-black/20',\n 30: 'from-black/30',\n 40: 'from-black/40',\n 50: 'from-black/50',\n 60: 'from-black/60',\n 70: 'from-black/70',\n 80: 'from-black/80',\n 90: 'from-black/90',\n}\n\nexport interface CardImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n /** Gradient overlay on image */\n overlay?: boolean\n /** Overlay opacity (10–90). Default: 60 */\n overlayOpacity?: number\n /** Custom class for overlay gradient (overrides overlayOpacity) */\n overlayClassName?: string\n}\n\nconst CardImage = React.forwardRef<HTMLImageElement, CardImageProps>(\n ({ className, overlay = false, overlayOpacity = 60, overlayClassName, alt = '', ...props }, ref) => {\n const { direction } = useCard()\n const isHorizontal = direction === 'horizontal'\n\n // Horizontal: use absolute positioning so the image fills the\n // wrapper height which is determined by the content side via\n // flexbox align-items:stretch (default).\n if (isHorizontal) {\n const opacityClass = overlay\n ? (overlayOpacityMap[overlayOpacity] || 'from-black/60')\n : null\n\n return (\n <div className={cn('relative shrink-0 w-48 overflow-hidden', className)}>\n <img\n ref={ref}\n alt={alt}\n className=\"absolute inset-0 w-full h-full object-cover\"\n {...props}\n />\n {overlay && (\n <div className={cn('absolute inset-0 bg-gradient-to-t to-transparent', overlayClassName || opacityClass)} />\n )}\n </div>\n )\n }\n\n // Vertical\n if (overlay) {\n const opacityClass = overlayOpacityMap[overlayOpacity] || 'from-black/60'\n\n return (\n <div className=\"relative w-full shrink-0 overflow-hidden\">\n <img\n ref={ref}\n alt={alt}\n className={cn('w-full object-cover', className)}\n {...props}\n />\n <div className={cn('absolute inset-0 bg-gradient-to-t to-transparent', overlayClassName || opacityClass)} />\n </div>\n )\n }\n\n return (\n <img\n ref={ref}\n alt={alt}\n className={cn('w-full object-cover shrink-0', className)}\n {...props}\n />\n )\n }\n)\nCardImage.displayName = 'CardImage'\n\n// ── CardHeader ──\nexport interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(\n ({ className, children, ...props }, ref) => {\n const { size } = useCard()\n\n // Separate CardAction from other children for proper flex layout\n const childArray = React.Children.toArray(children)\n const actionChildren: React.ReactNode[] = []\n const otherChildren: React.ReactNode[] = []\n\n childArray.forEach((child) => {\n if (React.isValidElement(child) && child.type === CardAction) {\n actionChildren.push(child)\n } else {\n otherChildren.push(child)\n }\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n 'flex items-start gap-3',\n sizePaddingXMap[size],\n sizePaddingTMap[size],\n sizeInnerPbMap[size],\n sizeLastPbMap[size],\n className\n )}\n {...props}\n >\n <div className=\"flex-1 min-w-0 space-y-3\">\n {otherChildren}\n </div>\n {actionChildren}\n </div>\n )\n }\n)\nCardHeader.displayName = 'CardHeader'\n\n// ── CardTitle ──\nexport interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {\n /** Leading icon */\n icon?: React.ReactNode\n}\n\nconst CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(\n ({ className, icon, children, ...props }, ref) => {\n return (\n <h3\n ref={ref}\n className={cn(\n 'font-semibold text-foreground leading-none tracking-tight',\n icon && 'flex items-center gap-2',\n className\n )}\n {...props}\n >\n {icon && (\n <span className=\"shrink-0 icon-sm [&>svg]:w-full [&>svg]:h-full\" aria-hidden=\"true\">\n {icon}\n </span>\n )}\n {children}\n </h3>\n )\n }\n)\nCardTitle.displayName = 'CardTitle'\n\n// ── CardDescription ──\nexport interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nconst CardDescription = React.forwardRef<HTMLParagraphElement, CardDescriptionProps>(\n ({ className, ...props }, ref) => {\n return (\n <p\n ref={ref}\n className={cn('text-sm text-text-muted', className)}\n {...props}\n />\n )\n }\n)\nCardDescription.displayName = 'CardDescription'\n\n// ── CardAction ──\nexport interface CardActionProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst CardAction = React.forwardRef<HTMLDivElement, CardActionProps>(\n ({ className, ...props }, ref) => {\n return (\n <div\n ref={ref}\n className={cn('shrink-0 ml-auto -mr-2 -mt-2', className)}\n {...props}\n />\n )\n }\n)\nCardAction.displayName = 'CardAction'\n\n// ── CardContent ──\nexport interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(\n ({ className, ...props }, ref) => {\n const { size } = useCard()\n\n return (\n <div\n ref={ref}\n className={cn(sizePaddingXMap[size], 'pb-0', sizeLastPbMap[size], className)}\n {...props}\n />\n )\n }\n)\nCardContent.displayName = 'CardContent'\n\n// ── CardFooter ──\nexport interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(\n ({ className, ...props }, ref) => {\n const { size } = useCard()\n\n return (\n <div\n ref={ref}\n className={cn(\n 'flex items-center gap-2',\n sizePaddingXMap[size],\n sizePaddingYMap[size],\n 'mt-auto',\n className\n )}\n {...props}\n />\n )\n }\n)\nCardFooter.displayName = 'CardFooter'\n\nexport {\n Card,\n CardImage,\n CardHeader,\n CardTitle,\n CardDescription,\n CardAction,\n CardContent,\n CardFooter,\n cardVariants,\n}\n"],"mappings":"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","names":[]}
@@ -1,8 +1,9 @@
1
1
  "use client";
2
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
3
  import * as React from "react";
3
4
  import { Slot } from "@radix-ui/react-slot";
4
5
  import { cva } from "class-variance-authority";
5
- import { cn } from "../../lib/utils";
6
+ import { cn } from "../../lib/utils.mjs";
6
7
  const CardContext = React.createContext({
7
8
  size: "default",
8
9
  direction: "vertical"
@@ -76,9 +77,12 @@ const Card = React.forwardRef(
76
77
  otherChildren.push(child);
77
78
  }
78
79
  });
79
- content = /* @__PURE__ */ React.createElement(React.Fragment, null, imageChildren, /* @__PURE__ */ React.createElement("div", { className: "flex-1 flex flex-col min-w-0" }, otherChildren));
80
+ content = /* @__PURE__ */ jsxs(Fragment, { children: [
81
+ imageChildren,
82
+ /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col min-w-0", children: otherChildren })
83
+ ] });
80
84
  }
81
- return /* @__PURE__ */ React.createElement(CardContext.Provider, { value: { size, direction } }, /* @__PURE__ */ React.createElement(
85
+ return /* @__PURE__ */ jsx(CardContext.Provider, { value: { size, direction }, children: /* @__PURE__ */ jsx(
82
86
  Comp,
83
87
  {
84
88
  ref,
@@ -87,10 +91,10 @@ const Card = React.forwardRef(
87
91
  interactive && "cursor-pointer hover:shadow-md hover:-translate-y-0.5",
88
92
  className
89
93
  ),
90
- ...props
91
- },
92
- content
93
- ));
94
+ ...props,
95
+ children: content
96
+ }
97
+ ) });
94
98
  }
95
99
  );
96
100
  Card.displayName = "Card";
@@ -159,29 +163,35 @@ const CardImage = React.forwardRef(
159
163
  const isHorizontal = direction === "horizontal";
160
164
  if (isHorizontal) {
161
165
  const opacityClass = overlay ? overlayOpacityMap[overlayOpacity] || "from-black/60" : null;
162
- return /* @__PURE__ */ React.createElement("div", { className: cn("relative shrink-0 w-48 overflow-hidden", className) }, /* @__PURE__ */ React.createElement(
163
- "img",
164
- {
165
- ref,
166
- alt,
167
- className: "absolute inset-0 w-full h-full object-cover",
168
- ...props
169
- }
170
- ), overlay && /* @__PURE__ */ React.createElement("div", { className: cn("absolute inset-0 bg-gradient-to-t to-transparent", overlayClassName || opacityClass) }));
166
+ return /* @__PURE__ */ jsxs("div", { className: cn("relative shrink-0 w-48 overflow-hidden", className), children: [
167
+ /* @__PURE__ */ jsx(
168
+ "img",
169
+ {
170
+ ref,
171
+ alt,
172
+ className: "absolute inset-0 w-full h-full object-cover",
173
+ ...props
174
+ }
175
+ ),
176
+ overlay && /* @__PURE__ */ jsx("div", { className: cn("absolute inset-0 bg-gradient-to-t to-transparent", overlayClassName || opacityClass) })
177
+ ] });
171
178
  }
172
179
  if (overlay) {
173
180
  const opacityClass = overlayOpacityMap[overlayOpacity] || "from-black/60";
174
- return /* @__PURE__ */ React.createElement("div", { className: "relative w-full shrink-0 overflow-hidden" }, /* @__PURE__ */ React.createElement(
175
- "img",
176
- {
177
- ref,
178
- alt,
179
- className: cn("w-full object-cover", className),
180
- ...props
181
- }
182
- ), /* @__PURE__ */ React.createElement("div", { className: cn("absolute inset-0 bg-gradient-to-t to-transparent", overlayClassName || opacityClass) }));
181
+ return /* @__PURE__ */ jsxs("div", { className: "relative w-full shrink-0 overflow-hidden", children: [
182
+ /* @__PURE__ */ jsx(
183
+ "img",
184
+ {
185
+ ref,
186
+ alt,
187
+ className: cn("w-full object-cover", className),
188
+ ...props
189
+ }
190
+ ),
191
+ /* @__PURE__ */ jsx("div", { className: cn("absolute inset-0 bg-gradient-to-t to-transparent", overlayClassName || opacityClass) })
192
+ ] });
183
193
  }
184
- return /* @__PURE__ */ React.createElement(
194
+ return /* @__PURE__ */ jsx(
185
195
  "img",
186
196
  {
187
197
  ref,
@@ -206,7 +216,7 @@ const CardHeader = React.forwardRef(
206
216
  otherChildren.push(child);
207
217
  }
208
218
  });
209
- return /* @__PURE__ */ React.createElement(
219
+ return /* @__PURE__ */ jsxs(
210
220
  "div",
211
221
  {
212
222
  ref,
@@ -218,17 +228,19 @@ const CardHeader = React.forwardRef(
218
228
  sizeLastPbMap[size],
219
229
  className
220
230
  ),
221
- ...props
222
- },
223
- /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0 space-y-3" }, otherChildren),
224
- actionChildren
231
+ ...props,
232
+ children: [
233
+ /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0 space-y-3", children: otherChildren }),
234
+ actionChildren
235
+ ]
236
+ }
225
237
  );
226
238
  }
227
239
  );
228
240
  CardHeader.displayName = "CardHeader";
229
241
  const CardTitle = React.forwardRef(
230
242
  ({ className, icon, children, ...props }, ref) => {
231
- return /* @__PURE__ */ React.createElement(
243
+ return /* @__PURE__ */ jsxs(
232
244
  "h3",
233
245
  {
234
246
  ref,
@@ -237,17 +249,19 @@ const CardTitle = React.forwardRef(
237
249
  icon && "flex items-center gap-2",
238
250
  className
239
251
  ),
240
- ...props
241
- },
242
- icon && /* @__PURE__ */ React.createElement("span", { className: "shrink-0 icon-sm [&>svg]:w-full [&>svg]:h-full", "aria-hidden": "true" }, icon),
243
- children
252
+ ...props,
253
+ children: [
254
+ icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 icon-sm [&>svg]:w-full [&>svg]:h-full", "aria-hidden": "true", children: icon }),
255
+ children
256
+ ]
257
+ }
244
258
  );
245
259
  }
246
260
  );
247
261
  CardTitle.displayName = "CardTitle";
248
262
  const CardDescription = React.forwardRef(
249
263
  ({ className, ...props }, ref) => {
250
- return /* @__PURE__ */ React.createElement(
264
+ return /* @__PURE__ */ jsx(
251
265
  "p",
252
266
  {
253
267
  ref,
@@ -260,7 +274,7 @@ const CardDescription = React.forwardRef(
260
274
  CardDescription.displayName = "CardDescription";
261
275
  const CardAction = React.forwardRef(
262
276
  ({ className, ...props }, ref) => {
263
- return /* @__PURE__ */ React.createElement(
277
+ return /* @__PURE__ */ jsx(
264
278
  "div",
265
279
  {
266
280
  ref,
@@ -274,7 +288,7 @@ CardAction.displayName = "CardAction";
274
288
  const CardContent = React.forwardRef(
275
289
  ({ className, ...props }, ref) => {
276
290
  const { size } = useCard();
277
- return /* @__PURE__ */ React.createElement(
291
+ return /* @__PURE__ */ jsx(
278
292
  "div",
279
293
  {
280
294
  ref,
@@ -288,7 +302,7 @@ CardContent.displayName = "CardContent";
288
302
  const CardFooter = React.forwardRef(
289
303
  ({ className, ...props }, ref) => {
290
304
  const { size } = useCard();
291
- return /* @__PURE__ */ React.createElement(
305
+ return /* @__PURE__ */ jsx(
292
306
  "div",
293
307
  {
294
308
  ref,
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/ui/card.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ── Context for size propagation ──\ntype CardSize = 'sm' | 'default' | 'lg'\ntype CardDirection = 'vertical' | 'horizontal'\n\nconst CardContext = React.createContext<{ size: CardSize; direction: CardDirection }>({\n size: 'default',\n direction: 'vertical',\n})\n\nfunction useCard() {\n return React.useContext(CardContext)\n}\n\n// ── Card (Root) ──\nconst cardVariants = cva(\n 'flex overflow-hidden transition-all duration-normal',\n {\n variants: {\n variant: {\n default: 'bg-background-paper border border-border-subtle shadow-sm',\n outline: 'bg-background-paper border border-border',\n ghost: 'bg-transparent',\n },\n size: {\n sm: '',\n default: '',\n lg: '',\n },\n radius: {\n sm: 'rounded-sm', // 2px\n base: 'rounded', // 4px\n md: 'rounded-md', // 6px\n lg: 'rounded-lg', // 8px\n xl: 'rounded-xl', // 12px\n '2xl': 'rounded-2xl', // 16px\n },\n direction: {\n vertical: 'flex-col',\n horizontal: 'flex-row',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n radius: 'xl',\n direction: 'vertical',\n },\n }\n)\n\nexport type CardVariant = 'default' | 'outline' | 'ghost'\nexport type CardRadius = 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl'\n\nexport interface CardProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof cardVariants> {\n /** Visual style */\n variant?: CardVariant\n /** Content padding scale */\n size?: CardSize\n /** Border radius */\n radius?: CardRadius\n /** Layout direction */\n direction?: CardDirection\n /** Enable hover effect for interactive cards */\n interactive?: boolean\n /** Render as child element (Slot pattern) */\n asChild?: boolean\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n ({\n className,\n variant = 'default',\n size = 'default',\n radius = 'xl',\n direction = 'vertical',\n interactive = false,\n asChild = false,\n children,\n ...props\n }, ref) => {\n const Comp = asChild ? Slot : 'div'\n\n // Horizontal: separate CardImage from rest, wrap rest in flex-col\n let content = children\n if (direction === 'horizontal') {\n const childArray = React.Children.toArray(children)\n const imageChildren: React.ReactNode[] = []\n const otherChildren: React.ReactNode[] = []\n\n childArray.forEach((child) => {\n if (React.isValidElement(child) && child.type === CardImage) {\n imageChildren.push(child)\n } else {\n otherChildren.push(child)\n }\n })\n\n content = (\n <>\n {imageChildren}\n <div className=\"flex-1 flex flex-col min-w-0\">\n {otherChildren}\n </div>\n </>\n )\n }\n\n return (\n <CardContext.Provider value={{ size, direction }}>\n <Comp\n ref={ref}\n className={cn(\n cardVariants({ variant, size, radius, direction }),\n interactive && 'cursor-pointer hover:shadow-md hover:-translate-y-0.5',\n className\n )}\n {...props}\n >\n {content}\n </Comp>\n </CardContext.Provider>\n )\n }\n)\nCard.displayName = 'Card'\n\n// ── Size-based padding map (responsive: mobile → desktop) ──\nconst sizePaddingMap = {\n sm: 'p-4', // 16px\n default: 'p-4 sm:p-6', // 16px → 24px\n lg: 'p-6 sm:p-8', // 24px → 32px\n} as const\n\nconst sizePaddingXMap = {\n sm: 'px-4', // 16px\n default: 'px-4 sm:px-6', // 16px → 24px\n lg: 'px-6 sm:px-8', // 24px → 32px\n} as const\n\nconst sizePaddingYMap = {\n sm: 'py-3', // 12px\n default: 'py-3 sm:py-4', // 12px → 16px\n lg: 'py-4 sm:py-5', // 16px → 20px\n} as const\n\n// Top padding for CardHeader — optical balance (top >= sides)\nconst sizePaddingTMap = {\n sm: 'pt-5', // 20px\n default: 'pt-5 sm:pt-6', // 20px → 24px\n lg: 'pt-6 sm:pt-8', // 24px → 32px\n} as const\n\n// Inner bottom padding (between sections) — tighter than outer\nconst sizeInnerPbMap = {\n sm: 'pb-3', // 12px\n default: 'pb-3 sm:pb-4', // 12px → 16px\n lg: 'pb-3 sm:pb-4', // 12px → 16px (default와 동일)\n} as const\n\n// Last-child bottom padding for CardContent (when no footer) — match pt\nconst sizeLastPbMap = {\n sm: 'last:pb-5', // 20px\n default: 'last:pb-5 sm:last:pb-6', // 20px → 24px\n lg: 'last:pb-6 sm:last:pb-8', // 24px → 32px\n} as const\n\n// ── CardImage ──\n// Overlay opacity to Tailwind class mapping\nconst overlayOpacityMap: Record<number, string> = {\n 10: 'from-black/10',\n 20: 'from-black/20',\n 30: 'from-black/30',\n 40: 'from-black/40',\n 50: 'from-black/50',\n 60: 'from-black/60',\n 70: 'from-black/70',\n 80: 'from-black/80',\n 90: 'from-black/90',\n}\n\nexport interface CardImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n /** Gradient overlay on image */\n overlay?: boolean\n /** Overlay opacity (10–90). Default: 60 */\n overlayOpacity?: number\n /** Custom class for overlay gradient (overrides overlayOpacity) */\n overlayClassName?: string\n}\n\nconst CardImage = React.forwardRef<HTMLImageElement, CardImageProps>(\n ({ className, overlay = false, overlayOpacity = 60, overlayClassName, alt = '', ...props }, ref) => {\n const { direction } = useCard()\n const isHorizontal = direction === 'horizontal'\n\n // Horizontal: use absolute positioning so the image fills the\n // wrapper height which is determined by the content side via\n // flexbox align-items:stretch (default).\n if (isHorizontal) {\n const opacityClass = overlay\n ? (overlayOpacityMap[overlayOpacity] || 'from-black/60')\n : null\n\n return (\n <div className={cn('relative shrink-0 w-48 overflow-hidden', className)}>\n <img\n ref={ref}\n alt={alt}\n className=\"absolute inset-0 w-full h-full object-cover\"\n {...props}\n />\n {overlay && (\n <div className={cn('absolute inset-0 bg-gradient-to-t to-transparent', overlayClassName || opacityClass)} />\n )}\n </div>\n )\n }\n\n // Vertical\n if (overlay) {\n const opacityClass = overlayOpacityMap[overlayOpacity] || 'from-black/60'\n\n return (\n <div className=\"relative w-full shrink-0 overflow-hidden\">\n <img\n ref={ref}\n alt={alt}\n className={cn('w-full object-cover', className)}\n {...props}\n />\n <div className={cn('absolute inset-0 bg-gradient-to-t to-transparent', overlayClassName || opacityClass)} />\n </div>\n )\n }\n\n return (\n <img\n ref={ref}\n alt={alt}\n className={cn('w-full object-cover shrink-0', className)}\n {...props}\n />\n )\n }\n)\nCardImage.displayName = 'CardImage'\n\n// ── CardHeader ──\nexport interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(\n ({ className, children, ...props }, ref) => {\n const { size } = useCard()\n\n // Separate CardAction from other children for proper flex layout\n const childArray = React.Children.toArray(children)\n const actionChildren: React.ReactNode[] = []\n const otherChildren: React.ReactNode[] = []\n\n childArray.forEach((child) => {\n if (React.isValidElement(child) && child.type === CardAction) {\n actionChildren.push(child)\n } else {\n otherChildren.push(child)\n }\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n 'flex items-start gap-3',\n sizePaddingXMap[size],\n sizePaddingTMap[size],\n sizeInnerPbMap[size],\n sizeLastPbMap[size],\n className\n )}\n {...props}\n >\n <div className=\"flex-1 min-w-0 space-y-3\">\n {otherChildren}\n </div>\n {actionChildren}\n </div>\n )\n }\n)\nCardHeader.displayName = 'CardHeader'\n\n// ── CardTitle ──\nexport interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {\n /** Leading icon */\n icon?: React.ReactNode\n}\n\nconst CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(\n ({ className, icon, children, ...props }, ref) => {\n return (\n <h3\n ref={ref}\n className={cn(\n 'font-semibold text-foreground leading-none tracking-tight',\n icon && 'flex items-center gap-2',\n className\n )}\n {...props}\n >\n {icon && (\n <span className=\"shrink-0 icon-sm [&>svg]:w-full [&>svg]:h-full\" aria-hidden=\"true\">\n {icon}\n </span>\n )}\n {children}\n </h3>\n )\n }\n)\nCardTitle.displayName = 'CardTitle'\n\n// ── CardDescription ──\nexport interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nconst CardDescription = React.forwardRef<HTMLParagraphElement, CardDescriptionProps>(\n ({ className, ...props }, ref) => {\n return (\n <p\n ref={ref}\n className={cn('text-sm text-text-muted', className)}\n {...props}\n />\n )\n }\n)\nCardDescription.displayName = 'CardDescription'\n\n// ── CardAction ──\nexport interface CardActionProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst CardAction = React.forwardRef<HTMLDivElement, CardActionProps>(\n ({ className, ...props }, ref) => {\n return (\n <div\n ref={ref}\n className={cn('shrink-0 ml-auto -mr-2 -mt-2', className)}\n {...props}\n />\n )\n }\n)\nCardAction.displayName = 'CardAction'\n\n// ── CardContent ──\nexport interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(\n ({ className, ...props }, ref) => {\n const { size } = useCard()\n\n return (\n <div\n ref={ref}\n className={cn(sizePaddingXMap[size], 'pb-0', sizeLastPbMap[size], className)}\n {...props}\n />\n )\n }\n)\nCardContent.displayName = 'CardContent'\n\n// ── CardFooter ──\nexport interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(\n ({ className, ...props }, ref) => {\n const { size } = useCard()\n\n return (\n <div\n ref={ref}\n className={cn(\n 'flex items-center gap-2',\n sizePaddingXMap[size],\n sizePaddingYMap[size],\n 'mt-auto',\n className\n )}\n {...props}\n />\n )\n }\n)\nCardFooter.displayName = 'CardFooter'\n\nexport {\n Card,\n CardImage,\n CardHeader,\n CardTitle,\n CardDescription,\n CardAction,\n CardContent,\n CardFooter,\n cardVariants,\n}\n"],"mappings":";AAEA,YAAY,WAAW;AACvB,SAAS,YAAY;AACrB,SAAS,WAA8B;AACvC,SAAS,UAAU;AAMnB,MAAM,cAAc,MAAM,cAA4D;AAAA,EACpF,MAAM;AAAA,EACN,WAAW;AACb,CAAC;AAED,SAAS,UAAU;AACjB,SAAO,MAAM,WAAW,WAAW;AACrC;AAGA,MAAM,eAAe;AAAA,EACnB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,QACT,OAAO;AAAA,MACT;AAAA,MACA,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,MACN;AAAA,MACA,QAAQ;AAAA,QACN,IAAI;AAAA;AAAA,QACJ,MAAM;AAAA;AAAA,QACN,IAAI;AAAA;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,OAAO;AAAA;AAAA,MACT;AAAA,MACA,WAAW;AAAA,QACT,UAAU;AAAA,QACV,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,WAAW;AAAA,IACb;AAAA,EACF;AACF;AAsBA,MAAM,OAAO,MAAM;AAAA,EACjB,CAAC;AAAA,IACC;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EACL,GAAG,QAAQ;AACT,UAAM,OAAO,UAAU,OAAO;AAG9B,QAAI,UAAU;AACd,QAAI,cAAc,cAAc;AAC9B,YAAM,aAAa,MAAM,SAAS,QAAQ,QAAQ;AAClD,YAAM,gBAAmC,CAAC;AAC1C,YAAM,gBAAmC,CAAC;AAE1C,iBAAW,QAAQ,CAAC,UAAU;AAC5B,YAAI,MAAM,eAAe,KAAK,KAAK,MAAM,SAAS,WAAW;AAC3D,wBAAc,KAAK,KAAK;AAAA,QAC1B,OAAO;AACL,wBAAc,KAAK,KAAK;AAAA,QAC1B;AAAA,MACF,CAAC;AAED,gBACE,0DACG,eACD,oCAAC,SAAI,WAAU,kCACZ,aACH,CACF;AAAA,IAEJ;AAEA,WACE,oCAAC,YAAY,UAAZ,EAAqB,OAAO,EAAE,MAAM,UAAU,KAC7C;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT,aAAa,EAAE,SAAS,MAAM,QAAQ,UAAU,CAAC;AAAA,UACjD,eAAe;AAAA,UACf;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,MAEH;AAAA,IACH,CACF;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;AAGnB,MAAM,iBAAiB;AAAA,EACrB,IAAI;AAAA;AAAA,EACJ,SAAS;AAAA;AAAA,EACT,IAAI;AAAA;AACN;AAEA,MAAM,kBAAkB;AAAA,EACtB,IAAI;AAAA;AAAA,EACJ,SAAS;AAAA;AAAA,EACT,IAAI;AAAA;AACN;AAEA,MAAM,kBAAkB;AAAA,EACtB,IAAI;AAAA;AAAA,EACJ,SAAS;AAAA;AAAA,EACT,IAAI;AAAA;AACN;AAGA,MAAM,kBAAkB;AAAA,EACtB,IAAI;AAAA;AAAA,EACJ,SAAS;AAAA;AAAA,EACT,IAAI;AAAA;AACN;AAGA,MAAM,iBAAiB;AAAA,EACrB,IAAI;AAAA;AAAA,EACJ,SAAS;AAAA;AAAA,EACT,IAAI;AAAA;AACN;AAGA,MAAM,gBAAgB;AAAA,EACpB,IAAI;AAAA;AAAA,EACJ,SAAS;AAAA;AAAA,EACT,IAAI;AAAA;AACN;AAIA,MAAM,oBAA4C;AAAA,EAChD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAWA,MAAM,YAAY,MAAM;AAAA,EACtB,CAAC,EAAE,WAAW,UAAU,OAAO,iBAAiB,IAAI,kBAAkB,MAAM,IAAI,GAAG,MAAM,GAAG,QAAQ;AAClG,UAAM,EAAE,UAAU,IAAI,QAAQ;AAC9B,UAAM,eAAe,cAAc;AAKnC,QAAI,cAAc;AAChB,YAAM,eAAe,UAChB,kBAAkB,cAAc,KAAK,kBACtC;AAEJ,aACE,oCAAC,SAAI,WAAW,GAAG,0CAA0C,SAAS,KACpE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,WAAU;AAAA,UACT,GAAG;AAAA;AAAA,MACN,GACC,WACC,oCAAC,SAAI,WAAW,GAAG,oDAAoD,oBAAoB,YAAY,GAAG,CAE9G;AAAA,IAEJ;AAGA,QAAI,SAAS;AACX,YAAM,eAAe,kBAAkB,cAAc,KAAK;AAE1D,aACE,oCAAC,SAAI,WAAU,8CACb;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,WAAW,GAAG,uBAAuB,SAAS;AAAA,UAC7C,GAAG;AAAA;AAAA,MACN,GACA,oCAAC,SAAI,WAAW,GAAG,oDAAoD,oBAAoB,YAAY,GAAG,CAC5G;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAW,GAAG,gCAAgC,SAAS;AAAA,QACtD,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,UAAU,cAAc;AAKxB,MAAM,aAAa,MAAM;AAAA,EACvB,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC1C,UAAM,EAAE,KAAK,IAAI,QAAQ;AAGzB,UAAM,aAAa,MAAM,SAAS,QAAQ,QAAQ;AAClD,UAAM,iBAAoC,CAAC;AAC3C,UAAM,gBAAmC,CAAC;AAE1C,eAAW,QAAQ,CAAC,UAAU;AAC5B,UAAI,MAAM,eAAe,KAAK,KAAK,MAAM,SAAS,YAAY;AAC5D,uBAAe,KAAK,KAAK;AAAA,MAC3B,OAAO;AACL,sBAAc,KAAK,KAAK;AAAA,MAC1B;AAAA,IACF,CAAC;AAED,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,gBAAgB,IAAI;AAAA,UACpB,gBAAgB,IAAI;AAAA,UACpB,eAAe,IAAI;AAAA,UACnB,cAAc,IAAI;AAAA,UAClB;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,MAEJ,oCAAC,SAAI,WAAU,8BACZ,aACH;AAAA,MACC;AAAA,IACH;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;AAQzB,MAAM,YAAY,MAAM;AAAA,EACtB,CAAC,EAAE,WAAW,MAAM,UAAU,GAAG,MAAM,GAAG,QAAQ;AAChD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,QAAQ;AAAA,UACR;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,MAEH,QACC,oCAAC,UAAK,WAAU,kDAAiD,eAAY,UAC1E,IACH;AAAA,MAED;AAAA,IACH;AAAA,EAEJ;AACF;AACA,UAAU,cAAc;AAKxB,MAAM,kBAAkB,MAAM;AAAA,EAC5B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAChC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,2BAA2B,SAAS;AAAA,QACjD,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,gBAAgB,cAAc;AAK9B,MAAM,aAAa,MAAM;AAAA,EACvB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAChC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,gCAAgC,SAAS;AAAA,QACtD,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;AAKzB,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAChC,UAAM,EAAE,KAAK,IAAI,QAAQ;AAEzB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,gBAAgB,IAAI,GAAG,QAAQ,cAAc,IAAI,GAAG,SAAS;AAAA,QAC1E,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;AAK1B,MAAM,aAAa,MAAM;AAAA,EACvB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAChC,UAAM,EAAE,KAAK,IAAI,QAAQ;AAEzB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,gBAAgB,IAAI;AAAA,UACpB,gBAAgB,IAAI;AAAA,UACpB;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;","names":[]}
1
+ {"version":3,"sources":["../../../src/components/ui/card.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ── Context for size propagation ──\ntype CardSize = 'sm' | 'default' | 'lg'\ntype CardDirection = 'vertical' | 'horizontal'\n\nconst CardContext = React.createContext<{ size: CardSize; direction: CardDirection }>({\n size: 'default',\n direction: 'vertical',\n})\n\nfunction useCard() {\n return React.useContext(CardContext)\n}\n\n// ── Card (Root) ──\nconst cardVariants = cva(\n 'flex overflow-hidden transition-all duration-normal',\n {\n variants: {\n variant: {\n default: 'bg-background-paper border border-border-subtle shadow-sm',\n outline: 'bg-background-paper border border-border',\n ghost: 'bg-transparent',\n },\n size: {\n sm: '',\n default: '',\n lg: '',\n },\n radius: {\n sm: 'rounded-sm', // 2px\n base: 'rounded', // 4px\n md: 'rounded-md', // 6px\n lg: 'rounded-lg', // 8px\n xl: 'rounded-xl', // 12px\n '2xl': 'rounded-2xl', // 16px\n },\n direction: {\n vertical: 'flex-col',\n horizontal: 'flex-row',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n radius: 'xl',\n direction: 'vertical',\n },\n }\n)\n\nexport type CardVariant = 'default' | 'outline' | 'ghost'\nexport type CardRadius = 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl'\n\nexport interface CardProps\n extends React.HTMLAttributes<HTMLDivElement>,\n VariantProps<typeof cardVariants> {\n /** Visual style */\n variant?: CardVariant\n /** Content padding scale */\n size?: CardSize\n /** Border radius */\n radius?: CardRadius\n /** Layout direction */\n direction?: CardDirection\n /** Enable hover effect for interactive cards */\n interactive?: boolean\n /** Render as child element (Slot pattern) */\n asChild?: boolean\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n ({\n className,\n variant = 'default',\n size = 'default',\n radius = 'xl',\n direction = 'vertical',\n interactive = false,\n asChild = false,\n children,\n ...props\n }, ref) => {\n const Comp = asChild ? Slot : 'div'\n\n // Horizontal: separate CardImage from rest, wrap rest in flex-col\n let content = children\n if (direction === 'horizontal') {\n const childArray = React.Children.toArray(children)\n const imageChildren: React.ReactNode[] = []\n const otherChildren: React.ReactNode[] = []\n\n childArray.forEach((child) => {\n if (React.isValidElement(child) && child.type === CardImage) {\n imageChildren.push(child)\n } else {\n otherChildren.push(child)\n }\n })\n\n content = (\n <>\n {imageChildren}\n <div className=\"flex-1 flex flex-col min-w-0\">\n {otherChildren}\n </div>\n </>\n )\n }\n\n return (\n <CardContext.Provider value={{ size, direction }}>\n <Comp\n ref={ref}\n className={cn(\n cardVariants({ variant, size, radius, direction }),\n interactive && 'cursor-pointer hover:shadow-md hover:-translate-y-0.5',\n className\n )}\n {...props}\n >\n {content}\n </Comp>\n </CardContext.Provider>\n )\n }\n)\nCard.displayName = 'Card'\n\n// ── Size-based padding map (responsive: mobile → desktop) ──\nconst sizePaddingMap = {\n sm: 'p-4', // 16px\n default: 'p-4 sm:p-6', // 16px → 24px\n lg: 'p-6 sm:p-8', // 24px → 32px\n} as const\n\nconst sizePaddingXMap = {\n sm: 'px-4', // 16px\n default: 'px-4 sm:px-6', // 16px → 24px\n lg: 'px-6 sm:px-8', // 24px → 32px\n} as const\n\nconst sizePaddingYMap = {\n sm: 'py-3', // 12px\n default: 'py-3 sm:py-4', // 12px → 16px\n lg: 'py-4 sm:py-5', // 16px → 20px\n} as const\n\n// Top padding for CardHeader — optical balance (top >= sides)\nconst sizePaddingTMap = {\n sm: 'pt-5', // 20px\n default: 'pt-5 sm:pt-6', // 20px → 24px\n lg: 'pt-6 sm:pt-8', // 24px → 32px\n} as const\n\n// Inner bottom padding (between sections) — tighter than outer\nconst sizeInnerPbMap = {\n sm: 'pb-3', // 12px\n default: 'pb-3 sm:pb-4', // 12px → 16px\n lg: 'pb-3 sm:pb-4', // 12px → 16px (default와 동일)\n} as const\n\n// Last-child bottom padding for CardContent (when no footer) — match pt\nconst sizeLastPbMap = {\n sm: 'last:pb-5', // 20px\n default: 'last:pb-5 sm:last:pb-6', // 20px → 24px\n lg: 'last:pb-6 sm:last:pb-8', // 24px → 32px\n} as const\n\n// ── CardImage ──\n// Overlay opacity to Tailwind class mapping\nconst overlayOpacityMap: Record<number, string> = {\n 10: 'from-black/10',\n 20: 'from-black/20',\n 30: 'from-black/30',\n 40: 'from-black/40',\n 50: 'from-black/50',\n 60: 'from-black/60',\n 70: 'from-black/70',\n 80: 'from-black/80',\n 90: 'from-black/90',\n}\n\nexport interface CardImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n /** Gradient overlay on image */\n overlay?: boolean\n /** Overlay opacity (10–90). Default: 60 */\n overlayOpacity?: number\n /** Custom class for overlay gradient (overrides overlayOpacity) */\n overlayClassName?: string\n}\n\nconst CardImage = React.forwardRef<HTMLImageElement, CardImageProps>(\n ({ className, overlay = false, overlayOpacity = 60, overlayClassName, alt = '', ...props }, ref) => {\n const { direction } = useCard()\n const isHorizontal = direction === 'horizontal'\n\n // Horizontal: use absolute positioning so the image fills the\n // wrapper height which is determined by the content side via\n // flexbox align-items:stretch (default).\n if (isHorizontal) {\n const opacityClass = overlay\n ? (overlayOpacityMap[overlayOpacity] || 'from-black/60')\n : null\n\n return (\n <div className={cn('relative shrink-0 w-48 overflow-hidden', className)}>\n <img\n ref={ref}\n alt={alt}\n className=\"absolute inset-0 w-full h-full object-cover\"\n {...props}\n />\n {overlay && (\n <div className={cn('absolute inset-0 bg-gradient-to-t to-transparent', overlayClassName || opacityClass)} />\n )}\n </div>\n )\n }\n\n // Vertical\n if (overlay) {\n const opacityClass = overlayOpacityMap[overlayOpacity] || 'from-black/60'\n\n return (\n <div className=\"relative w-full shrink-0 overflow-hidden\">\n <img\n ref={ref}\n alt={alt}\n className={cn('w-full object-cover', className)}\n {...props}\n />\n <div className={cn('absolute inset-0 bg-gradient-to-t to-transparent', overlayClassName || opacityClass)} />\n </div>\n )\n }\n\n return (\n <img\n ref={ref}\n alt={alt}\n className={cn('w-full object-cover shrink-0', className)}\n {...props}\n />\n )\n }\n)\nCardImage.displayName = 'CardImage'\n\n// ── CardHeader ──\nexport interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(\n ({ className, children, ...props }, ref) => {\n const { size } = useCard()\n\n // Separate CardAction from other children for proper flex layout\n const childArray = React.Children.toArray(children)\n const actionChildren: React.ReactNode[] = []\n const otherChildren: React.ReactNode[] = []\n\n childArray.forEach((child) => {\n if (React.isValidElement(child) && child.type === CardAction) {\n actionChildren.push(child)\n } else {\n otherChildren.push(child)\n }\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n 'flex items-start gap-3',\n sizePaddingXMap[size],\n sizePaddingTMap[size],\n sizeInnerPbMap[size],\n sizeLastPbMap[size],\n className\n )}\n {...props}\n >\n <div className=\"flex-1 min-w-0 space-y-3\">\n {otherChildren}\n </div>\n {actionChildren}\n </div>\n )\n }\n)\nCardHeader.displayName = 'CardHeader'\n\n// ── CardTitle ──\nexport interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {\n /** Leading icon */\n icon?: React.ReactNode\n}\n\nconst CardTitle = React.forwardRef<HTMLHeadingElement, CardTitleProps>(\n ({ className, icon, children, ...props }, ref) => {\n return (\n <h3\n ref={ref}\n className={cn(\n 'font-semibold text-foreground leading-none tracking-tight',\n icon && 'flex items-center gap-2',\n className\n )}\n {...props}\n >\n {icon && (\n <span className=\"shrink-0 icon-sm [&>svg]:w-full [&>svg]:h-full\" aria-hidden=\"true\">\n {icon}\n </span>\n )}\n {children}\n </h3>\n )\n }\n)\nCardTitle.displayName = 'CardTitle'\n\n// ── CardDescription ──\nexport interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nconst CardDescription = React.forwardRef<HTMLParagraphElement, CardDescriptionProps>(\n ({ className, ...props }, ref) => {\n return (\n <p\n ref={ref}\n className={cn('text-sm text-text-muted', className)}\n {...props}\n />\n )\n }\n)\nCardDescription.displayName = 'CardDescription'\n\n// ── CardAction ──\nexport interface CardActionProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst CardAction = React.forwardRef<HTMLDivElement, CardActionProps>(\n ({ className, ...props }, ref) => {\n return (\n <div\n ref={ref}\n className={cn('shrink-0 ml-auto -mr-2 -mt-2', className)}\n {...props}\n />\n )\n }\n)\nCardAction.displayName = 'CardAction'\n\n// ── CardContent ──\nexport interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(\n ({ className, ...props }, ref) => {\n const { size } = useCard()\n\n return (\n <div\n ref={ref}\n className={cn(sizePaddingXMap[size], 'pb-0', sizeLastPbMap[size], className)}\n {...props}\n />\n )\n }\n)\nCardContent.displayName = 'CardContent'\n\n// ── CardFooter ──\nexport interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(\n ({ className, ...props }, ref) => {\n const { size } = useCard()\n\n return (\n <div\n ref={ref}\n className={cn(\n 'flex items-center gap-2',\n sizePaddingXMap[size],\n sizePaddingYMap[size],\n 'mt-auto',\n className\n )}\n {...props}\n />\n )\n }\n)\nCardFooter.displayName = 'CardFooter'\n\nexport {\n Card,\n CardImage,\n CardHeader,\n CardTitle,\n CardDescription,\n CardAction,\n CardContent,\n CardFooter,\n cardVariants,\n}\n"],"mappings":"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","names":[]}
@@ -74,7 +74,7 @@ type ChartTooltipContentProps = React.ComponentProps<'div'> & {
74
74
  labelKey?: string;
75
75
  };
76
76
  declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: ChartTooltipContentProps): React.JSX.Element | null;
77
- declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
77
+ declare const ChartLegend: typeof RechartsPrimitive.Legend;
78
78
  type LegendPayloadItem = {
79
79
  value?: string;
80
80
  type?: string;
@@ -74,7 +74,7 @@ type ChartTooltipContentProps = React.ComponentProps<'div'> & {
74
74
  labelKey?: string;
75
75
  };
76
76
  declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: ChartTooltipContentProps): React.JSX.Element | null;
77
- declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
77
+ declare const ChartLegend: typeof RechartsPrimitive.Legend;
78
78
  type LegendPayloadItem = {
79
79
  value?: string;
80
80
  type?: string;