@karakuri-ui/react 0.2.3 → 0.3.0
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.
- package/README.md +0 -1
- package/dist/components/ui/accordion.d.mts +40 -0
- package/dist/components/ui/accordion.d.ts +40 -0
- package/dist/components/ui/accordion.js +215 -0
- package/dist/components/ui/accordion.js.map +1 -0
- package/dist/components/ui/accordion.mjs +176 -0
- package/dist/components/ui/accordion.mjs.map +1 -0
- package/dist/components/ui/alert.d.mts +38 -0
- package/dist/components/ui/alert.d.ts +38 -0
- package/dist/components/ui/alert.js +217 -0
- package/dist/components/ui/alert.js.map +1 -0
- package/dist/components/ui/alert.mjs +180 -0
- package/dist/components/ui/alert.mjs.map +1 -0
- package/dist/components/ui/avatar.d.mts +223 -0
- package/dist/components/ui/avatar.d.ts +223 -0
- package/dist/components/ui/avatar.js +245 -0
- package/dist/components/ui/avatar.js.map +1 -0
- package/dist/components/ui/avatar.mjs +204 -0
- package/dist/components/ui/avatar.mjs.map +1 -0
- package/dist/components/ui/badge.d.mts +31 -0
- package/dist/components/ui/badge.d.ts +31 -0
- package/dist/components/ui/badge.js +205 -0
- package/dist/components/ui/badge.js.map +1 -0
- package/dist/components/ui/badge.mjs +170 -0
- package/dist/components/ui/badge.mjs.map +1 -0
- package/dist/components/ui/breadcrumb.d.mts +46 -0
- package/dist/components/ui/breadcrumb.d.ts +46 -0
- package/dist/components/ui/breadcrumb.js +201 -0
- package/dist/components/ui/breadcrumb.js.map +1 -0
- package/dist/components/ui/breadcrumb.mjs +160 -0
- package/dist/components/ui/breadcrumb.mjs.map +1 -0
- package/dist/components/ui/button-group.d.mts +22 -0
- package/dist/components/ui/button-group.d.ts +22 -0
- package/dist/components/ui/button-group.js +107 -0
- package/dist/components/ui/button-group.js.map +1 -0
- package/dist/components/ui/button-group.mjs +72 -0
- package/dist/components/ui/button-group.mjs.map +1 -0
- package/dist/components/ui/button.d.mts +31 -0
- package/dist/components/ui/button.d.ts +31 -0
- package/dist/components/ui/button.js +176 -0
- package/dist/components/ui/button.js.map +1 -0
- package/dist/components/ui/button.mjs +141 -0
- package/dist/components/ui/button.mjs.map +1 -0
- package/dist/components/ui/card.d.mts +60 -0
- package/dist/components/ui/card.d.ts +60 -0
- package/dist/components/ui/card.js +361 -0
- package/dist/components/ui/card.js.map +1 -0
- package/dist/components/ui/card.mjs +319 -0
- package/dist/components/ui/card.mjs.map +1 -0
- package/dist/{chart.d.mts → components/ui/chart.d.mts} +2 -18
- package/dist/{chart.d.ts → components/ui/chart.d.ts} +2 -18
- package/dist/{chart.js → components/ui/chart.js} +30 -55
- package/dist/components/ui/chart.js.map +1 -0
- package/dist/{chart.mjs → components/ui/chart.mjs} +22 -46
- package/dist/components/ui/chart.mjs.map +1 -0
- package/dist/components/ui/checkbox.d.mts +24 -0
- package/dist/components/ui/checkbox.d.ts +24 -0
- package/dist/components/ui/checkbox.js +173 -0
- package/dist/components/ui/checkbox.js.map +1 -0
- package/dist/components/ui/checkbox.mjs +138 -0
- package/dist/components/ui/checkbox.mjs.map +1 -0
- package/dist/components/ui/divider.d.mts +27 -0
- package/dist/components/ui/divider.d.ts +27 -0
- package/dist/components/ui/divider.js +147 -0
- package/dist/components/ui/divider.js.map +1 -0
- package/dist/components/ui/divider.mjs +112 -0
- package/dist/components/ui/divider.mjs.map +1 -0
- package/dist/components/ui/drawer.d.mts +36 -0
- package/dist/components/ui/drawer.d.ts +36 -0
- package/dist/components/ui/drawer.js +211 -0
- package/dist/components/ui/drawer.js.map +1 -0
- package/dist/components/ui/drawer.mjs +165 -0
- package/dist/components/ui/drawer.mjs.map +1 -0
- package/dist/components/ui/dropdown.d.mts +34 -0
- package/dist/components/ui/dropdown.d.ts +34 -0
- package/dist/components/ui/dropdown.js +295 -0
- package/dist/components/ui/dropdown.js.map +1 -0
- package/dist/components/ui/dropdown.mjs +248 -0
- package/dist/components/ui/dropdown.mjs.map +1 -0
- package/dist/components/ui/field.d.mts +26 -0
- package/dist/components/ui/field.d.ts +26 -0
- package/dist/components/ui/field.js +141 -0
- package/dist/components/ui/field.js.map +1 -0
- package/dist/components/ui/field.mjs +103 -0
- package/dist/components/ui/field.mjs.map +1 -0
- package/dist/components/ui/icon-button.d.mts +20 -0
- package/dist/components/ui/icon-button.d.ts +20 -0
- package/dist/components/ui/icon-button.js +147 -0
- package/dist/components/ui/icon-button.js.map +1 -0
- package/dist/components/ui/icon-button.mjs +112 -0
- package/dist/components/ui/icon-button.mjs.map +1 -0
- package/dist/components/ui/index.d.mts +55 -0
- package/dist/components/ui/index.d.ts +55 -0
- package/dist/components/ui/index.js +468 -0
- package/dist/components/ui/index.js.map +1 -0
- package/dist/components/ui/index.mjs +242 -0
- package/dist/components/ui/index.mjs.map +1 -0
- package/dist/components/ui/input.d.mts +20 -0
- package/dist/components/ui/input.d.ts +20 -0
- package/dist/components/ui/input.js +250 -0
- package/dist/components/ui/input.js.map +1 -0
- package/dist/components/ui/input.mjs +215 -0
- package/dist/components/ui/input.mjs.map +1 -0
- package/dist/components/ui/metric-card.d.mts +38 -0
- package/dist/components/ui/metric-card.d.ts +38 -0
- package/dist/components/ui/metric-card.js +250 -0
- package/dist/components/ui/metric-card.js.map +1 -0
- package/dist/components/ui/metric-card.mjs +209 -0
- package/dist/components/ui/metric-card.mjs.map +1 -0
- package/dist/components/ui/modal.d.mts +47 -0
- package/dist/components/ui/modal.d.ts +47 -0
- package/dist/components/ui/modal.js +371 -0
- package/dist/components/ui/modal.js.map +1 -0
- package/dist/components/ui/modal.mjs +313 -0
- package/dist/components/ui/modal.mjs.map +1 -0
- package/dist/components/ui/navigation-menu.d.mts +120 -0
- package/dist/components/ui/navigation-menu.d.ts +120 -0
- package/dist/components/ui/navigation-menu.js +521 -0
- package/dist/components/ui/navigation-menu.js.map +1 -0
- package/dist/components/ui/navigation-menu.mjs +478 -0
- package/dist/components/ui/navigation-menu.mjs.map +1 -0
- package/dist/components/ui/pagination.d.mts +113 -0
- package/dist/components/ui/pagination.d.ts +113 -0
- package/dist/components/ui/pagination.js +484 -0
- package/dist/components/ui/pagination.js.map +1 -0
- package/dist/components/ui/pagination.mjs +438 -0
- package/dist/components/ui/pagination.mjs.map +1 -0
- package/dist/components/ui/popover.d.mts +29 -0
- package/dist/components/ui/popover.d.ts +29 -0
- package/dist/components/ui/popover.js +165 -0
- package/dist/components/ui/popover.js.map +1 -0
- package/dist/components/ui/popover.mjs +124 -0
- package/dist/components/ui/popover.mjs.map +1 -0
- package/dist/components/ui/progress.d.mts +35 -0
- package/dist/components/ui/progress.d.ts +35 -0
- package/dist/components/ui/progress.js +194 -0
- package/dist/components/ui/progress.js.map +1 -0
- package/dist/components/ui/progress.mjs +159 -0
- package/dist/components/ui/progress.mjs.map +1 -0
- package/dist/components/ui/radio-group.d.mts +35 -0
- package/dist/components/ui/radio-group.d.ts +35 -0
- package/dist/components/ui/radio-group.js +174 -0
- package/dist/components/ui/radio-group.js.map +1 -0
- package/dist/components/ui/radio-group.mjs +137 -0
- package/dist/components/ui/radio-group.mjs.map +1 -0
- package/dist/components/ui/segmented.d.mts +25 -0
- package/dist/components/ui/segmented.d.ts +25 -0
- package/dist/components/ui/segmented.js +238 -0
- package/dist/components/ui/segmented.js.map +1 -0
- package/dist/components/ui/segmented.mjs +201 -0
- package/dist/components/ui/segmented.mjs.map +1 -0
- package/dist/components/ui/select.d.mts +20 -0
- package/dist/components/ui/select.d.ts +20 -0
- package/dist/components/ui/select.js +308 -0
- package/dist/components/ui/select.js.map +1 -0
- package/dist/components/ui/select.mjs +267 -0
- package/dist/components/ui/select.mjs.map +1 -0
- package/dist/components/ui/skeleton.d.mts +26 -0
- package/dist/components/ui/skeleton.d.ts +26 -0
- package/dist/components/ui/skeleton.js +144 -0
- package/dist/components/ui/skeleton.js.map +1 -0
- package/dist/components/ui/skeleton.mjs +109 -0
- package/dist/components/ui/skeleton.mjs.map +1 -0
- package/dist/components/ui/slider.d.mts +38 -0
- package/dist/components/ui/slider.d.ts +38 -0
- package/dist/components/ui/slider.js +180 -0
- package/dist/components/ui/slider.js.map +1 -0
- package/dist/components/ui/slider.mjs +145 -0
- package/dist/components/ui/slider.mjs.map +1 -0
- package/dist/components/ui/spinner.d.mts +23 -0
- package/dist/components/ui/spinner.d.ts +23 -0
- package/dist/components/ui/spinner.js +471 -0
- package/dist/components/ui/spinner.js.map +1 -0
- package/dist/components/ui/spinner.mjs +436 -0
- package/dist/components/ui/spinner.mjs.map +1 -0
- package/dist/components/ui/switch.d.mts +22 -0
- package/dist/components/ui/switch.d.ts +22 -0
- package/dist/components/ui/switch.js +173 -0
- package/dist/components/ui/switch.js.map +1 -0
- package/dist/components/ui/switch.mjs +138 -0
- package/dist/components/ui/switch.mjs.map +1 -0
- package/dist/components/ui/table.d.mts +60 -0
- package/dist/components/ui/table.d.ts +60 -0
- package/dist/components/ui/table.js +231 -0
- package/dist/components/ui/table.js.map +1 -0
- package/dist/components/ui/table.mjs +190 -0
- package/dist/components/ui/table.mjs.map +1 -0
- package/dist/components/ui/tabs.d.mts +31 -0
- package/dist/components/ui/tabs.d.ts +31 -0
- package/dist/components/ui/tabs.js +233 -0
- package/dist/components/ui/tabs.js.map +1 -0
- package/dist/components/ui/tabs.mjs +194 -0
- package/dist/components/ui/tabs.mjs.map +1 -0
- package/dist/components/ui/textarea.d.mts +19 -0
- package/dist/components/ui/textarea.d.ts +19 -0
- package/dist/components/ui/textarea.js +181 -0
- package/dist/components/ui/textarea.js.map +1 -0
- package/dist/components/ui/textarea.mjs +146 -0
- package/dist/components/ui/textarea.mjs.map +1 -0
- package/dist/components/ui/toast.d.mts +93 -0
- package/dist/components/ui/toast.d.ts +93 -0
- package/dist/components/ui/toast.js +429 -0
- package/dist/components/ui/toast.js.map +1 -0
- package/dist/components/ui/toast.mjs +393 -0
- package/dist/components/ui/toast.mjs.map +1 -0
- package/dist/components/ui/toggle-group.d.mts +42 -0
- package/dist/components/ui/toggle-group.d.ts +42 -0
- package/dist/components/ui/toggle-group.js +183 -0
- package/dist/components/ui/toggle-group.js.map +1 -0
- package/dist/components/ui/toggle-group.mjs +146 -0
- package/dist/components/ui/toggle-group.mjs.map +1 -0
- package/dist/components/ui/toggle.d.mts +19 -0
- package/dist/components/ui/toggle.d.ts +19 -0
- package/dist/components/ui/toggle.js +194 -0
- package/dist/components/ui/toggle.js.map +1 -0
- package/dist/components/ui/toggle.mjs +159 -0
- package/dist/components/ui/toggle.mjs.map +1 -0
- package/dist/components/ui/tooltip.d.mts +26 -0
- package/dist/components/ui/tooltip.d.ts +26 -0
- package/dist/components/ui/tooltip.js +128 -0
- package/dist/components/ui/tooltip.js.map +1 -0
- package/dist/components/ui/tooltip.mjs +88 -0
- package/dist/components/ui/tooltip.mjs.map +1 -0
- package/dist/lib/code-generator.d.mts +60 -0
- package/dist/lib/code-generator.d.ts +60 -0
- package/dist/lib/code-generator.js +224 -0
- package/dist/lib/code-generator.js.map +1 -0
- package/dist/lib/code-generator.mjs +159 -0
- package/dist/lib/code-generator.mjs.map +1 -0
- package/dist/lib/utils.d.mts +10 -0
- package/dist/lib/utils.d.ts +10 -0
- package/dist/lib/utils.js +33 -0
- package/dist/lib/utils.js.map +1 -0
- package/dist/lib/utils.mjs +9 -0
- package/dist/lib/utils.mjs.map +1 -0
- package/package.json +11 -11
- package/dist/chart.js.map +0 -1
- package/dist/chart.mjs.map +0 -1
- package/dist/index.d.mts +0 -1636
- package/dist/index.d.ts +0 -1636
- package/dist/index.js +0 -7291
- package/dist/index.js.map +0 -1
- package/dist/index.mjs +0 -7048
- package/dist/index.mjs.map +0 -1
|
@@ -0,0 +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":[]}
|
|
@@ -0,0 +1,319 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { Slot } from "@radix-ui/react-slot";
|
|
4
|
+
import { cva } from "class-variance-authority";
|
|
5
|
+
import { cn } from "../../lib/utils";
|
|
6
|
+
const CardContext = React.createContext({
|
|
7
|
+
size: "default",
|
|
8
|
+
direction: "vertical"
|
|
9
|
+
});
|
|
10
|
+
function useCard() {
|
|
11
|
+
return React.useContext(CardContext);
|
|
12
|
+
}
|
|
13
|
+
const cardVariants = cva(
|
|
14
|
+
"flex overflow-hidden transition-all duration-normal",
|
|
15
|
+
{
|
|
16
|
+
variants: {
|
|
17
|
+
variant: {
|
|
18
|
+
default: "bg-background-paper border border-border-subtle shadow-sm",
|
|
19
|
+
outline: "bg-background-paper border border-border",
|
|
20
|
+
ghost: "bg-transparent"
|
|
21
|
+
},
|
|
22
|
+
size: {
|
|
23
|
+
sm: "",
|
|
24
|
+
default: "",
|
|
25
|
+
lg: ""
|
|
26
|
+
},
|
|
27
|
+
radius: {
|
|
28
|
+
sm: "rounded-sm",
|
|
29
|
+
// 2px
|
|
30
|
+
base: "rounded",
|
|
31
|
+
// 4px
|
|
32
|
+
md: "rounded-md",
|
|
33
|
+
// 6px
|
|
34
|
+
lg: "rounded-lg",
|
|
35
|
+
// 8px
|
|
36
|
+
xl: "rounded-xl",
|
|
37
|
+
// 12px
|
|
38
|
+
"2xl": "rounded-2xl"
|
|
39
|
+
// 16px
|
|
40
|
+
},
|
|
41
|
+
direction: {
|
|
42
|
+
vertical: "flex-col",
|
|
43
|
+
horizontal: "flex-row"
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
defaultVariants: {
|
|
47
|
+
variant: "default",
|
|
48
|
+
size: "default",
|
|
49
|
+
radius: "xl",
|
|
50
|
+
direction: "vertical"
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
);
|
|
54
|
+
const Card = React.forwardRef(
|
|
55
|
+
({
|
|
56
|
+
className,
|
|
57
|
+
variant = "default",
|
|
58
|
+
size = "default",
|
|
59
|
+
radius = "xl",
|
|
60
|
+
direction = "vertical",
|
|
61
|
+
interactive = false,
|
|
62
|
+
asChild = false,
|
|
63
|
+
children,
|
|
64
|
+
...props
|
|
65
|
+
}, ref) => {
|
|
66
|
+
const Comp = asChild ? Slot : "div";
|
|
67
|
+
let content = children;
|
|
68
|
+
if (direction === "horizontal") {
|
|
69
|
+
const childArray = React.Children.toArray(children);
|
|
70
|
+
const imageChildren = [];
|
|
71
|
+
const otherChildren = [];
|
|
72
|
+
childArray.forEach((child) => {
|
|
73
|
+
if (React.isValidElement(child) && child.type === CardImage) {
|
|
74
|
+
imageChildren.push(child);
|
|
75
|
+
} else {
|
|
76
|
+
otherChildren.push(child);
|
|
77
|
+
}
|
|
78
|
+
});
|
|
79
|
+
content = /* @__PURE__ */ React.createElement(React.Fragment, null, imageChildren, /* @__PURE__ */ React.createElement("div", { className: "flex-1 flex flex-col min-w-0" }, otherChildren));
|
|
80
|
+
}
|
|
81
|
+
return /* @__PURE__ */ React.createElement(CardContext.Provider, { value: { size, direction } }, /* @__PURE__ */ React.createElement(
|
|
82
|
+
Comp,
|
|
83
|
+
{
|
|
84
|
+
ref,
|
|
85
|
+
className: cn(
|
|
86
|
+
cardVariants({ variant, size, radius, direction }),
|
|
87
|
+
interactive && "cursor-pointer hover:shadow-md hover:-translate-y-0.5",
|
|
88
|
+
className
|
|
89
|
+
),
|
|
90
|
+
...props
|
|
91
|
+
},
|
|
92
|
+
content
|
|
93
|
+
));
|
|
94
|
+
}
|
|
95
|
+
);
|
|
96
|
+
Card.displayName = "Card";
|
|
97
|
+
const sizePaddingMap = {
|
|
98
|
+
sm: "p-4",
|
|
99
|
+
// 16px
|
|
100
|
+
default: "p-4 sm:p-6",
|
|
101
|
+
// 16px → 24px
|
|
102
|
+
lg: "p-6 sm:p-8"
|
|
103
|
+
// 24px → 32px
|
|
104
|
+
};
|
|
105
|
+
const sizePaddingXMap = {
|
|
106
|
+
sm: "px-4",
|
|
107
|
+
// 16px
|
|
108
|
+
default: "px-4 sm:px-6",
|
|
109
|
+
// 16px → 24px
|
|
110
|
+
lg: "px-6 sm:px-8"
|
|
111
|
+
// 24px → 32px
|
|
112
|
+
};
|
|
113
|
+
const sizePaddingYMap = {
|
|
114
|
+
sm: "py-3",
|
|
115
|
+
// 12px
|
|
116
|
+
default: "py-3 sm:py-4",
|
|
117
|
+
// 12px → 16px
|
|
118
|
+
lg: "py-4 sm:py-5"
|
|
119
|
+
// 16px → 20px
|
|
120
|
+
};
|
|
121
|
+
const sizePaddingTMap = {
|
|
122
|
+
sm: "pt-5",
|
|
123
|
+
// 20px
|
|
124
|
+
default: "pt-5 sm:pt-6",
|
|
125
|
+
// 20px → 24px
|
|
126
|
+
lg: "pt-6 sm:pt-8"
|
|
127
|
+
// 24px → 32px
|
|
128
|
+
};
|
|
129
|
+
const sizeInnerPbMap = {
|
|
130
|
+
sm: "pb-3",
|
|
131
|
+
// 12px
|
|
132
|
+
default: "pb-3 sm:pb-4",
|
|
133
|
+
// 12px → 16px
|
|
134
|
+
lg: "pb-3 sm:pb-4"
|
|
135
|
+
// 12px → 16px (default와 동일)
|
|
136
|
+
};
|
|
137
|
+
const sizeLastPbMap = {
|
|
138
|
+
sm: "last:pb-5",
|
|
139
|
+
// 20px
|
|
140
|
+
default: "last:pb-5 sm:last:pb-6",
|
|
141
|
+
// 20px → 24px
|
|
142
|
+
lg: "last:pb-6 sm:last:pb-8"
|
|
143
|
+
// 24px → 32px
|
|
144
|
+
};
|
|
145
|
+
const overlayOpacityMap = {
|
|
146
|
+
10: "from-black/10",
|
|
147
|
+
20: "from-black/20",
|
|
148
|
+
30: "from-black/30",
|
|
149
|
+
40: "from-black/40",
|
|
150
|
+
50: "from-black/50",
|
|
151
|
+
60: "from-black/60",
|
|
152
|
+
70: "from-black/70",
|
|
153
|
+
80: "from-black/80",
|
|
154
|
+
90: "from-black/90"
|
|
155
|
+
};
|
|
156
|
+
const CardImage = React.forwardRef(
|
|
157
|
+
({ className, overlay = false, overlayOpacity = 60, overlayClassName, alt = "", ...props }, ref) => {
|
|
158
|
+
const { direction } = useCard();
|
|
159
|
+
const isHorizontal = direction === "horizontal";
|
|
160
|
+
if (isHorizontal) {
|
|
161
|
+
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) }));
|
|
171
|
+
}
|
|
172
|
+
if (overlay) {
|
|
173
|
+
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) }));
|
|
183
|
+
}
|
|
184
|
+
return /* @__PURE__ */ React.createElement(
|
|
185
|
+
"img",
|
|
186
|
+
{
|
|
187
|
+
ref,
|
|
188
|
+
alt,
|
|
189
|
+
className: cn("w-full object-cover shrink-0", className),
|
|
190
|
+
...props
|
|
191
|
+
}
|
|
192
|
+
);
|
|
193
|
+
}
|
|
194
|
+
);
|
|
195
|
+
CardImage.displayName = "CardImage";
|
|
196
|
+
const CardHeader = React.forwardRef(
|
|
197
|
+
({ className, children, ...props }, ref) => {
|
|
198
|
+
const { size } = useCard();
|
|
199
|
+
const childArray = React.Children.toArray(children);
|
|
200
|
+
const actionChildren = [];
|
|
201
|
+
const otherChildren = [];
|
|
202
|
+
childArray.forEach((child) => {
|
|
203
|
+
if (React.isValidElement(child) && child.type === CardAction) {
|
|
204
|
+
actionChildren.push(child);
|
|
205
|
+
} else {
|
|
206
|
+
otherChildren.push(child);
|
|
207
|
+
}
|
|
208
|
+
});
|
|
209
|
+
return /* @__PURE__ */ React.createElement(
|
|
210
|
+
"div",
|
|
211
|
+
{
|
|
212
|
+
ref,
|
|
213
|
+
className: cn(
|
|
214
|
+
"flex items-start gap-3",
|
|
215
|
+
sizePaddingXMap[size],
|
|
216
|
+
sizePaddingTMap[size],
|
|
217
|
+
sizeInnerPbMap[size],
|
|
218
|
+
sizeLastPbMap[size],
|
|
219
|
+
className
|
|
220
|
+
),
|
|
221
|
+
...props
|
|
222
|
+
},
|
|
223
|
+
/* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0 space-y-3" }, otherChildren),
|
|
224
|
+
actionChildren
|
|
225
|
+
);
|
|
226
|
+
}
|
|
227
|
+
);
|
|
228
|
+
CardHeader.displayName = "CardHeader";
|
|
229
|
+
const CardTitle = React.forwardRef(
|
|
230
|
+
({ className, icon, children, ...props }, ref) => {
|
|
231
|
+
return /* @__PURE__ */ React.createElement(
|
|
232
|
+
"h3",
|
|
233
|
+
{
|
|
234
|
+
ref,
|
|
235
|
+
className: cn(
|
|
236
|
+
"font-semibold text-foreground leading-none tracking-tight",
|
|
237
|
+
icon && "flex items-center gap-2",
|
|
238
|
+
className
|
|
239
|
+
),
|
|
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
|
|
244
|
+
);
|
|
245
|
+
}
|
|
246
|
+
);
|
|
247
|
+
CardTitle.displayName = "CardTitle";
|
|
248
|
+
const CardDescription = React.forwardRef(
|
|
249
|
+
({ className, ...props }, ref) => {
|
|
250
|
+
return /* @__PURE__ */ React.createElement(
|
|
251
|
+
"p",
|
|
252
|
+
{
|
|
253
|
+
ref,
|
|
254
|
+
className: cn("text-sm text-text-muted", className),
|
|
255
|
+
...props
|
|
256
|
+
}
|
|
257
|
+
);
|
|
258
|
+
}
|
|
259
|
+
);
|
|
260
|
+
CardDescription.displayName = "CardDescription";
|
|
261
|
+
const CardAction = React.forwardRef(
|
|
262
|
+
({ className, ...props }, ref) => {
|
|
263
|
+
return /* @__PURE__ */ React.createElement(
|
|
264
|
+
"div",
|
|
265
|
+
{
|
|
266
|
+
ref,
|
|
267
|
+
className: cn("shrink-0 ml-auto -mr-2 -mt-2", className),
|
|
268
|
+
...props
|
|
269
|
+
}
|
|
270
|
+
);
|
|
271
|
+
}
|
|
272
|
+
);
|
|
273
|
+
CardAction.displayName = "CardAction";
|
|
274
|
+
const CardContent = React.forwardRef(
|
|
275
|
+
({ className, ...props }, ref) => {
|
|
276
|
+
const { size } = useCard();
|
|
277
|
+
return /* @__PURE__ */ React.createElement(
|
|
278
|
+
"div",
|
|
279
|
+
{
|
|
280
|
+
ref,
|
|
281
|
+
className: cn(sizePaddingXMap[size], "pb-0", sizeLastPbMap[size], className),
|
|
282
|
+
...props
|
|
283
|
+
}
|
|
284
|
+
);
|
|
285
|
+
}
|
|
286
|
+
);
|
|
287
|
+
CardContent.displayName = "CardContent";
|
|
288
|
+
const CardFooter = React.forwardRef(
|
|
289
|
+
({ className, ...props }, ref) => {
|
|
290
|
+
const { size } = useCard();
|
|
291
|
+
return /* @__PURE__ */ React.createElement(
|
|
292
|
+
"div",
|
|
293
|
+
{
|
|
294
|
+
ref,
|
|
295
|
+
className: cn(
|
|
296
|
+
"flex items-center gap-2",
|
|
297
|
+
sizePaddingXMap[size],
|
|
298
|
+
sizePaddingYMap[size],
|
|
299
|
+
"mt-auto",
|
|
300
|
+
className
|
|
301
|
+
),
|
|
302
|
+
...props
|
|
303
|
+
}
|
|
304
|
+
);
|
|
305
|
+
}
|
|
306
|
+
);
|
|
307
|
+
CardFooter.displayName = "CardFooter";
|
|
308
|
+
export {
|
|
309
|
+
Card,
|
|
310
|
+
CardAction,
|
|
311
|
+
CardContent,
|
|
312
|
+
CardDescription,
|
|
313
|
+
CardFooter,
|
|
314
|
+
CardHeader,
|
|
315
|
+
CardImage,
|
|
316
|
+
CardTitle,
|
|
317
|
+
cardVariants
|
|
318
|
+
};
|
|
319
|
+
//# sourceMappingURL=card.mjs.map
|
|
@@ -0,0 +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":[]}
|
|
@@ -26,7 +26,7 @@ type ChartContextProps = {
|
|
|
26
26
|
setActiveDataKey: (key: string | null) => void;
|
|
27
27
|
};
|
|
28
28
|
declare function useChart(): ChartContextProps;
|
|
29
|
-
declare function
|
|
29
|
+
declare function Chart({ id, className, children, config, hoverFade, ...props }: React.ComponentProps<'div'> & {
|
|
30
30
|
config: ChartConfig;
|
|
31
31
|
/** Enable hover-to-highlight: hovered bar group stays full opacity, others fade. */
|
|
32
32
|
hoverFade?: boolean;
|
|
@@ -143,21 +143,5 @@ type ChartPieProps = Omit<React.ComponentProps<typeof RechartsPrimitive.Pie>, 'l
|
|
|
143
143
|
cornerRadius?: number;
|
|
144
144
|
};
|
|
145
145
|
declare function ChartPie({ variant, label: labelMode, labelContent, activeShape: showActiveShape, innerRadius, paddingAngle, cornerRadius, startAngle, endAngle, ...props }: ChartPieProps): React.JSX.Element;
|
|
146
|
-
declare const Chart: typeof ChartContainer & {
|
|
147
|
-
Bar: typeof ChartBar;
|
|
148
|
-
Line: typeof ChartLine;
|
|
149
|
-
Area: typeof ChartArea;
|
|
150
|
-
Pie: typeof ChartPie;
|
|
151
|
-
Tooltip: typeof ChartTooltip;
|
|
152
|
-
TooltipContent: typeof ChartTooltipContent;
|
|
153
|
-
Legend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
|
|
154
|
-
LegendContent: typeof ChartLegendContent;
|
|
155
|
-
XAxis: typeof ChartXAxis;
|
|
156
|
-
YAxis: typeof ChartYAxis;
|
|
157
|
-
Style: ({ id, config }: {
|
|
158
|
-
id: string;
|
|
159
|
-
config: ChartConfig;
|
|
160
|
-
}) => React.JSX.Element;
|
|
161
|
-
};
|
|
162
146
|
|
|
163
|
-
export { Chart, ChartArea, type ChartAreaType, type ChartAreaVariant, ChartBar, type ChartBarRadius, type ChartBarVariant, type ChartConfig,
|
|
147
|
+
export { Chart, ChartArea, type ChartAreaType, type ChartAreaVariant, ChartBar, type ChartBarRadius, type ChartBarVariant, type ChartConfig, ChartLegend, ChartLegendContent, ChartLine, type ChartLineType, type ChartLineVariant, ChartPie, type ChartPieLabel, type ChartPieLabelContent, type ChartPieVariant, ChartStyle, ChartTooltip, ChartTooltipContent, ChartXAxis, ChartYAxis, useChart };
|
|
@@ -26,7 +26,7 @@ type ChartContextProps = {
|
|
|
26
26
|
setActiveDataKey: (key: string | null) => void;
|
|
27
27
|
};
|
|
28
28
|
declare function useChart(): ChartContextProps;
|
|
29
|
-
declare function
|
|
29
|
+
declare function Chart({ id, className, children, config, hoverFade, ...props }: React.ComponentProps<'div'> & {
|
|
30
30
|
config: ChartConfig;
|
|
31
31
|
/** Enable hover-to-highlight: hovered bar group stays full opacity, others fade. */
|
|
32
32
|
hoverFade?: boolean;
|
|
@@ -143,21 +143,5 @@ type ChartPieProps = Omit<React.ComponentProps<typeof RechartsPrimitive.Pie>, 'l
|
|
|
143
143
|
cornerRadius?: number;
|
|
144
144
|
};
|
|
145
145
|
declare function ChartPie({ variant, label: labelMode, labelContent, activeShape: showActiveShape, innerRadius, paddingAngle, cornerRadius, startAngle, endAngle, ...props }: ChartPieProps): React.JSX.Element;
|
|
146
|
-
declare const Chart: typeof ChartContainer & {
|
|
147
|
-
Bar: typeof ChartBar;
|
|
148
|
-
Line: typeof ChartLine;
|
|
149
|
-
Area: typeof ChartArea;
|
|
150
|
-
Pie: typeof ChartPie;
|
|
151
|
-
Tooltip: typeof ChartTooltip;
|
|
152
|
-
TooltipContent: typeof ChartTooltipContent;
|
|
153
|
-
Legend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
|
|
154
|
-
LegendContent: typeof ChartLegendContent;
|
|
155
|
-
XAxis: typeof ChartXAxis;
|
|
156
|
-
YAxis: typeof ChartYAxis;
|
|
157
|
-
Style: ({ id, config }: {
|
|
158
|
-
id: string;
|
|
159
|
-
config: ChartConfig;
|
|
160
|
-
}) => React.JSX.Element;
|
|
161
|
-
};
|
|
162
146
|
|
|
163
|
-
export { Chart, ChartArea, type ChartAreaType, type ChartAreaVariant, ChartBar, type ChartBarRadius, type ChartBarVariant, type ChartConfig,
|
|
147
|
+
export { Chart, ChartArea, type ChartAreaType, type ChartAreaVariant, ChartBar, type ChartBarRadius, type ChartBarVariant, type ChartConfig, ChartLegend, ChartLegendContent, ChartLine, type ChartLineType, type ChartLineVariant, ChartPie, type ChartPieLabel, type ChartPieLabelContent, type ChartPieVariant, ChartStyle, ChartTooltip, ChartTooltipContent, ChartXAxis, ChartYAxis, useChart };
|