@alfadocs/ui-kit-debug 0.24.0 → 0.25.1
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/dist/_chunks/{card-CWzuTLYE.js → card-C353dU-H.js} +21 -13
- package/dist/_chunks/{card-CWzuTLYE.js.map → card-C353dU-H.js.map} +1 -1
- package/dist/_chunks/carousel.agent-DnPiqijR.js +1733 -0
- package/dist/_chunks/carousel.agent-DnPiqijR.js.map +1 -0
- package/dist/_chunks/{contact-card-DTQUMetD.js → contact-card-CjG7c-1q.js} +2 -2
- package/dist/_chunks/{contact-card-DTQUMetD.js.map → contact-card-CjG7c-1q.js.map} +1 -1
- package/dist/_chunks/description-list-Bsga4IW8.js +309 -0
- package/dist/_chunks/description-list-Bsga4IW8.js.map +1 -0
- package/dist/_chunks/{locale-picker-CYBhgSHR.js → locale-picker-BxEUUPW7.js} +212 -149
- package/dist/_chunks/locale-picker-BxEUUPW7.js.map +1 -0
- package/dist/_chunks/{timeline-Czeqr3HF.js → timeline-jmd7lfDf.js} +19 -12
- package/dist/_chunks/{timeline-Czeqr3HF.js.map → timeline-jmd7lfDf.js.map} +1 -1
- package/dist/_chunks/{workflow-map-712GL-8u.js → workflow-map-BR6txfFX.js} +2 -2
- package/dist/_chunks/{workflow-map-712GL-8u.js.map → workflow-map-BR6txfFX.js.map} +1 -1
- package/dist/agent-catalog.json +1 -1
- package/dist/components/card/card.d.ts.map +1 -1
- package/dist/components/card/index.js +1 -1
- package/dist/components/carousel/carousel.d.ts +21 -0
- package/dist/components/carousel/carousel.d.ts.map +1 -1
- package/dist/components/carousel/index.js +1 -1
- package/dist/components/contact-card/index.js +1 -1
- package/dist/components/description-list/description-list.d.ts +40 -0
- package/dist/components/description-list/description-list.d.ts.map +1 -1
- package/dist/components/description-list/index.d.ts +1 -1
- package/dist/components/description-list/index.d.ts.map +1 -1
- package/dist/components/description-list/index.js +1 -1
- package/dist/components/header-settings/index.js +140 -102
- package/dist/components/header-settings/index.js.map +1 -1
- package/dist/components/locale-picker/index.js +1 -1
- package/dist/components/timeline/index.js +1 -1
- package/dist/components/timeline/timeline.d.ts.map +1 -1
- package/dist/components/workflow/index.js +1 -1
- package/dist/index.js +6 -6
- package/dist/tokens.css +1 -1
- package/package.json +1 -1
- package/dist/_chunks/carousel.agent-CQPFfppK.js +0 -1696
- package/dist/_chunks/carousel.agent-CQPFfppK.js.map +0 -1
- package/dist/_chunks/description-list-y7Hk51KI.js +0 -191
- package/dist/_chunks/description-list-y7Hk51KI.js.map +0 -1
- package/dist/_chunks/locale-picker-CYBhgSHR.js.map +0 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx as d } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef as
|
|
2
|
+
import { forwardRef as t, useId as B, useState as k, useCallback as v, useContext as I, createContext as _ } from "react";
|
|
3
3
|
import { Slot as F } from "@radix-ui/react-slot";
|
|
4
4
|
import { c as M } from "./index-D2ZczOXr.js";
|
|
5
|
-
const u =
|
|
5
|
+
const u = _({
|
|
6
6
|
headerId: "",
|
|
7
7
|
interactive: !1,
|
|
8
8
|
registerHeader: () => {
|
|
@@ -45,7 +45,7 @@ const u = I({
|
|
|
45
45
|
stretch: !1
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
|
-
), m =
|
|
48
|
+
), m = t(
|
|
49
49
|
({
|
|
50
50
|
variant: r = "default",
|
|
51
51
|
interactive: e = !1,
|
|
@@ -57,10 +57,10 @@ const u = I({
|
|
|
57
57
|
onKeyDown: c,
|
|
58
58
|
...C
|
|
59
59
|
}, x) => {
|
|
60
|
-
const f = B(), [w, y] =
|
|
60
|
+
const f = B(), [w, y] = k(!1), N = v(() => y(!0), []), j = e ? {
|
|
61
61
|
...i ? {} : { role: "button", tabIndex: 0 },
|
|
62
|
-
onKeyDown: (
|
|
63
|
-
e && (
|
|
62
|
+
onKeyDown: (o) => {
|
|
63
|
+
e && (o.key === "Enter" || o.key === " ") && (o.preventDefault(), o.currentTarget.click()), c == null || c(o);
|
|
64
64
|
},
|
|
65
65
|
onClick: s
|
|
66
66
|
} : { onClick: s }, H = i ? F : e ? "div" : "article";
|
|
@@ -90,9 +90,9 @@ const u = I({
|
|
|
90
90
|
}
|
|
91
91
|
);
|
|
92
92
|
m.displayName = "Card";
|
|
93
|
-
const p =
|
|
93
|
+
const p = t(
|
|
94
94
|
({ className: r, ...e }, a) => {
|
|
95
|
-
const { headerId: i, registerHeader: l } =
|
|
95
|
+
const { headerId: i, registerHeader: l } = I(u), n = v(
|
|
96
96
|
(s) => {
|
|
97
97
|
s && l(), typeof a == "function" ? a(s) : a && (a.current = s);
|
|
98
98
|
},
|
|
@@ -105,7 +105,15 @@ const p = o(
|
|
|
105
105
|
id: i,
|
|
106
106
|
className: [
|
|
107
107
|
"ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:p-[var(--spacing-md)] ds:pb-0",
|
|
108
|
-
|
|
108
|
+
// Wrap policy for header text content. Scoped to DIRECT children
|
|
109
|
+
// (h1–h6 / p / div) and using `break-word` instead of `anywhere`
|
|
110
|
+
// so natural-language titles wrap at word boundaries first; only
|
|
111
|
+
// genuinely unbreakable strings (URLs, hashes) break mid-word
|
|
112
|
+
// when they'd otherwise overflow. The previous `[&_*]:` cascade
|
|
113
|
+
// applied `overflow-wrap: anywhere` to every descendant, which
|
|
114
|
+
// chopped natural-language labels mid-character inside narrow
|
|
115
|
+
// contexts (DescriptionList rows in a Carousel slide).
|
|
116
|
+
"ds:[&>*]:break-normal ds:[&>*]:[overflow-wrap:break-word]",
|
|
109
117
|
r
|
|
110
118
|
].filter(Boolean).join(" "),
|
|
111
119
|
...e
|
|
@@ -114,7 +122,7 @@ const p = o(
|
|
|
114
122
|
}
|
|
115
123
|
);
|
|
116
124
|
p.displayName = "Card.Header";
|
|
117
|
-
const g =
|
|
125
|
+
const g = t(
|
|
118
126
|
({ className: r, ...e }, a) => /* @__PURE__ */ d(
|
|
119
127
|
"div",
|
|
120
128
|
{
|
|
@@ -128,7 +136,7 @@ const g = o(
|
|
|
128
136
|
)
|
|
129
137
|
);
|
|
130
138
|
g.displayName = "Card.Media";
|
|
131
|
-
const h =
|
|
139
|
+
const h = t(
|
|
132
140
|
({ className: r, ...e }, a) => /* @__PURE__ */ d(
|
|
133
141
|
"div",
|
|
134
142
|
{
|
|
@@ -139,7 +147,7 @@ const h = o(
|
|
|
139
147
|
)
|
|
140
148
|
);
|
|
141
149
|
h.displayName = "Card.Body";
|
|
142
|
-
const b =
|
|
150
|
+
const b = t(
|
|
143
151
|
({ className: r, ...e }, a) => /* @__PURE__ */ d(
|
|
144
152
|
"div",
|
|
145
153
|
{
|
|
@@ -162,4 +170,4 @@ const O = Object.assign(m, {
|
|
|
162
170
|
export {
|
|
163
171
|
O as C
|
|
164
172
|
};
|
|
165
|
-
//# sourceMappingURL=card-
|
|
173
|
+
//# sourceMappingURL=card-C353dU-H.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card-CWzuTLYE.js","sources":["../../src/components/card/card.tsx"],"sourcesContent":["import {\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useId,\n useState,\n type HTMLAttributes,\n type KeyboardEvent,\n type ReactNode,\n} from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\n/* ------------------------------------------------------------------ */\n/* Context */\n/* ------------------------------------------------------------------ */\n\ninterface CardContextValue {\n headerId: string;\n interactive: boolean;\n registerHeader: () => void;\n}\n\nconst CardContext = createContext<CardContextValue>({\n headerId: '',\n interactive: false,\n registerHeader: () => {},\n});\n\n/* ------------------------------------------------------------------ */\n/* Variants */\n/* ------------------------------------------------------------------ */\n\nconst cardVariants = cva(\n [\n 'ds:rounded-[var(--radius-lg)] ds:text-[var(--card-foreground)]',\n 'ds:overflow-hidden',\n 'ds:flex ds:flex-col',\n ].join(' '),\n {\n variants: {\n variant: {\n default:\n 'ds:bg-[var(--card)] ds:border ds:border-[color:var(--card-border)]',\n outlined:\n 'ds:bg-[var(--card)] ds:border ds:border-[color:var(--border)]',\n elevated: 'ds:bg-[var(--card)] ds:shadow-[var(--shadow-card)]',\n },\n interactive: {\n true: [\n 'ds:cursor-pointer',\n 'ds:transition-shadow ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none',\n 'ds:hover:shadow-[var(--shadow-hover)]',\n 'ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid',\n 'ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]',\n 'ds:min-h-[var(--min-target-size)]',\n ].join(' '),\n false: '',\n },\n // `stretch: true` fills the parent layout cell (grid / flex) so a\n // row of Cards ends up with matching heights. Combined with the\n // `flex-1` on `Card.Body`, the footer naturally pins to the bottom.\n stretch: {\n true: 'ds:h-full ds:self-stretch',\n false: '',\n },\n },\n defaultVariants: {\n variant: 'default',\n interactive: false,\n stretch: false,\n },\n },\n);\n\n/* ------------------------------------------------------------------ */\n/* Types */\n/* ------------------------------------------------------------------ */\n\nexport interface CardProps\n extends\n Omit<HTMLAttributes<HTMLElement>, 'role'>,\n VariantProps<typeof cardVariants> {\n variant?: 'default' | 'outlined' | 'elevated';\n interactive?: boolean;\n /**\n * Stretch the Card to fill its parent layout cell. Use on every Card in\n * a dashboard row so siblings end up with matching heights, and the\n * `Card.Body` + `Card.Footer` flex naturally pin the footer to the\n * bottom. Grid cells already `align-items: stretch` by default, but an\n * explicit `h-full` keeps the behaviour robust under flex parents too.\n */\n stretch?: boolean;\n asChild?: boolean;\n children: ReactNode;\n}\n\n/* ------------------------------------------------------------------ */\n/* Root */\n/* ------------------------------------------------------------------ */\n\nconst CardRoot = forwardRef<HTMLElement, CardProps>(\n (\n {\n variant = 'default',\n interactive = false,\n stretch = false,\n asChild = false,\n className,\n children,\n onClick,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const headerId = useId();\n const [hasHeader, setHasHeader] = useState(false);\n const registerHeader = useCallback(() => setHasHeader(true), []);\n\n const handleKeyDown = (e: KeyboardEvent<HTMLElement>) => {\n if (interactive && (e.key === 'Enter' || e.key === ' ')) {\n e.preventDefault();\n (e.currentTarget as HTMLElement).click();\n }\n onKeyDown?.(e);\n };\n\n // When asChild=true the consumer provides its own element (<a>, <button>)\n // which already carries the correct role and tabIndex — don't override them.\n const interactiveProps = interactive\n ? {\n ...(asChild ? {} : { role: 'button' as const, tabIndex: 0 }),\n onKeyDown: handleKeyDown,\n onClick,\n }\n : { onClick };\n\n // `<article>` is the default semantic root, but axe's\n // `aria-allowed-role` rule forbids `role=\"button\"` on `<article>`.\n // When the card is interactive we switch to `<div>` so the explicit\n // role is valid. Consumers can still pass `asChild` to provide their\n // own anchor / button element when they want stronger semantics.\n const Comp = asChild ? Slot : interactive ? 'div' : 'article';\n\n return (\n <CardContext.Provider\n value={{ headerId, interactive: interactive ?? false, registerHeader }}\n >\n <Comp\n ref={ref as React.Ref<HTMLDivElement>}\n aria-labelledby={hasHeader ? headerId : undefined}\n data-component=\"card\"\n className={cardVariants({\n variant,\n interactive: interactive ?? false,\n stretch: stretch ?? false,\n className,\n })}\n {...interactiveProps}\n {...props}\n >\n {children}\n </Comp>\n </CardContext.Provider>\n );\n },\n);\nCardRoot.displayName = 'Card';\n\n/* ------------------------------------------------------------------ */\n/* Header */\n/* ------------------------------------------------------------------ */\n\nconst CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => {\n const { headerId, registerHeader } = useContext(CardContext);\n\n // Notify root that a header is present so aria-labelledby is applied.\n const callbackRef = useCallback(\n (node: HTMLDivElement | null) => {\n if (node) registerHeader();\n if (typeof ref === 'function') ref(node);\n else if (ref)\n (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n },\n [ref, registerHeader],\n );\n\n return (\n <div\n ref={callbackRef}\n id={headerId}\n className={[\n 'ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:p-[var(--spacing-md)] ds:pb-0',\n 'ds:[&_*]:break-normal ds:[&_*]:[overflow-wrap:anywhere]',\n className,\n ]\n .filter(Boolean)\n .join(' ')}\n {...props}\n />\n );\n },\n);\nCardHeader.displayName = 'Card.Header';\n\n/* ------------------------------------------------------------------ */\n/* Media */\n/* ------------------------------------------------------------------ */\n\nconst CardMedia = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={[\n 'ds:overflow-hidden ds:[&_img]:w-full ds:[&_img]:h-auto ds:[&_img]:[object-fit:cover] ds:[&_video]:w-full',\n className,\n ]\n .filter(Boolean)\n .join(' ')}\n {...props}\n />\n ),\n);\nCardMedia.displayName = 'Card.Media';\n\n/* ------------------------------------------------------------------ */\n/* Body */\n/* ------------------------------------------------------------------ */\n\nconst CardBody = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={['ds:p-[var(--spacing-md)] ds:flex-1 ds:text-start', className]\n .filter(Boolean)\n .join(' ')}\n {...props}\n />\n ),\n);\nCardBody.displayName = 'Card.Body';\n\n/* ------------------------------------------------------------------ */\n/* Footer */\n/* ------------------------------------------------------------------ */\n\nconst CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={[\n 'ds:flex ds:items-center ds:gap-[var(--spacing-sm)] ds:p-[var(--spacing-md)] ds:pt-0',\n className,\n ]\n .filter(Boolean)\n .join(' ')}\n {...props}\n />\n ),\n);\nCardFooter.displayName = 'Card.Footer';\n\n/* ------------------------------------------------------------------ */\n/* Compound export */\n/* ------------------------------------------------------------------ */\n\nexport const Card = Object.assign(CardRoot, {\n Header: CardHeader,\n Media: CardMedia,\n Body: CardBody,\n Footer: CardFooter,\n});\n\nexport type { VariantProps as CardVariantProps };\n"],"names":["CardContext","createContext","cardVariants","cva","CardRoot","forwardRef","variant","interactive","stretch","asChild","className","children","onClick","onKeyDown","props","ref","headerId","useId","hasHeader","setHasHeader","useState","registerHeader","useCallback","interactiveProps","e","Comp","Slot","jsx","CardHeader","useContext","callbackRef","node","CardMedia","CardBody","CardFooter","Card"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"card-C353dU-H.js","sources":["../../src/components/card/card.tsx"],"sourcesContent":["import {\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useId,\n useState,\n type HTMLAttributes,\n type KeyboardEvent,\n type ReactNode,\n} from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\n/* ------------------------------------------------------------------ */\n/* Context */\n/* ------------------------------------------------------------------ */\n\ninterface CardContextValue {\n headerId: string;\n interactive: boolean;\n registerHeader: () => void;\n}\n\nconst CardContext = createContext<CardContextValue>({\n headerId: '',\n interactive: false,\n registerHeader: () => {},\n});\n\n/* ------------------------------------------------------------------ */\n/* Variants */\n/* ------------------------------------------------------------------ */\n\nconst cardVariants = cva(\n [\n 'ds:rounded-[var(--radius-lg)] ds:text-[var(--card-foreground)]',\n 'ds:overflow-hidden',\n 'ds:flex ds:flex-col',\n ].join(' '),\n {\n variants: {\n variant: {\n default:\n 'ds:bg-[var(--card)] ds:border ds:border-[color:var(--card-border)]',\n outlined:\n 'ds:bg-[var(--card)] ds:border ds:border-[color:var(--border)]',\n elevated: 'ds:bg-[var(--card)] ds:shadow-[var(--shadow-card)]',\n },\n interactive: {\n true: [\n 'ds:cursor-pointer',\n 'ds:transition-shadow ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none',\n 'ds:hover:shadow-[var(--shadow-hover)]',\n 'ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid',\n 'ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]',\n 'ds:min-h-[var(--min-target-size)]',\n ].join(' '),\n false: '',\n },\n // `stretch: true` fills the parent layout cell (grid / flex) so a\n // row of Cards ends up with matching heights. Combined with the\n // `flex-1` on `Card.Body`, the footer naturally pins to the bottom.\n stretch: {\n true: 'ds:h-full ds:self-stretch',\n false: '',\n },\n },\n defaultVariants: {\n variant: 'default',\n interactive: false,\n stretch: false,\n },\n },\n);\n\n/* ------------------------------------------------------------------ */\n/* Types */\n/* ------------------------------------------------------------------ */\n\nexport interface CardProps\n extends\n Omit<HTMLAttributes<HTMLElement>, 'role'>,\n VariantProps<typeof cardVariants> {\n variant?: 'default' | 'outlined' | 'elevated';\n interactive?: boolean;\n /**\n * Stretch the Card to fill its parent layout cell. Use on every Card in\n * a dashboard row so siblings end up with matching heights, and the\n * `Card.Body` + `Card.Footer` flex naturally pin the footer to the\n * bottom. Grid cells already `align-items: stretch` by default, but an\n * explicit `h-full` keeps the behaviour robust under flex parents too.\n */\n stretch?: boolean;\n asChild?: boolean;\n children: ReactNode;\n}\n\n/* ------------------------------------------------------------------ */\n/* Root */\n/* ------------------------------------------------------------------ */\n\nconst CardRoot = forwardRef<HTMLElement, CardProps>(\n (\n {\n variant = 'default',\n interactive = false,\n stretch = false,\n asChild = false,\n className,\n children,\n onClick,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const headerId = useId();\n const [hasHeader, setHasHeader] = useState(false);\n const registerHeader = useCallback(() => setHasHeader(true), []);\n\n const handleKeyDown = (e: KeyboardEvent<HTMLElement>) => {\n if (interactive && (e.key === 'Enter' || e.key === ' ')) {\n e.preventDefault();\n (e.currentTarget as HTMLElement).click();\n }\n onKeyDown?.(e);\n };\n\n // When asChild=true the consumer provides its own element (<a>, <button>)\n // which already carries the correct role and tabIndex — don't override them.\n const interactiveProps = interactive\n ? {\n ...(asChild ? {} : { role: 'button' as const, tabIndex: 0 }),\n onKeyDown: handleKeyDown,\n onClick,\n }\n : { onClick };\n\n // `<article>` is the default semantic root, but axe's\n // `aria-allowed-role` rule forbids `role=\"button\"` on `<article>`.\n // When the card is interactive we switch to `<div>` so the explicit\n // role is valid. Consumers can still pass `asChild` to provide their\n // own anchor / button element when they want stronger semantics.\n const Comp = asChild ? Slot : interactive ? 'div' : 'article';\n\n return (\n <CardContext.Provider\n value={{ headerId, interactive: interactive ?? false, registerHeader }}\n >\n <Comp\n ref={ref as React.Ref<HTMLDivElement>}\n aria-labelledby={hasHeader ? headerId : undefined}\n data-component=\"card\"\n className={cardVariants({\n variant,\n interactive: interactive ?? false,\n stretch: stretch ?? false,\n className,\n })}\n {...interactiveProps}\n {...props}\n >\n {children}\n </Comp>\n </CardContext.Provider>\n );\n },\n);\nCardRoot.displayName = 'Card';\n\n/* ------------------------------------------------------------------ */\n/* Header */\n/* ------------------------------------------------------------------ */\n\nconst CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => {\n const { headerId, registerHeader } = useContext(CardContext);\n\n // Notify root that a header is present so aria-labelledby is applied.\n const callbackRef = useCallback(\n (node: HTMLDivElement | null) => {\n if (node) registerHeader();\n if (typeof ref === 'function') ref(node);\n else if (ref)\n (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n },\n [ref, registerHeader],\n );\n\n return (\n <div\n ref={callbackRef}\n id={headerId}\n className={[\n 'ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:p-[var(--spacing-md)] ds:pb-0',\n // Wrap policy for header text content. Scoped to DIRECT children\n // (h1–h6 / p / div) and using `break-word` instead of `anywhere`\n // so natural-language titles wrap at word boundaries first; only\n // genuinely unbreakable strings (URLs, hashes) break mid-word\n // when they'd otherwise overflow. The previous `[&_*]:` cascade\n // applied `overflow-wrap: anywhere` to every descendant, which\n // chopped natural-language labels mid-character inside narrow\n // contexts (DescriptionList rows in a Carousel slide).\n 'ds:[&>*]:break-normal ds:[&>*]:[overflow-wrap:break-word]',\n className,\n ]\n .filter(Boolean)\n .join(' ')}\n {...props}\n />\n );\n },\n);\nCardHeader.displayName = 'Card.Header';\n\n/* ------------------------------------------------------------------ */\n/* Media */\n/* ------------------------------------------------------------------ */\n\nconst CardMedia = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={[\n 'ds:overflow-hidden ds:[&_img]:w-full ds:[&_img]:h-auto ds:[&_img]:[object-fit:cover] ds:[&_video]:w-full',\n className,\n ]\n .filter(Boolean)\n .join(' ')}\n {...props}\n />\n ),\n);\nCardMedia.displayName = 'Card.Media';\n\n/* ------------------------------------------------------------------ */\n/* Body */\n/* ------------------------------------------------------------------ */\n\nconst CardBody = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={['ds:p-[var(--spacing-md)] ds:flex-1 ds:text-start', className]\n .filter(Boolean)\n .join(' ')}\n {...props}\n />\n ),\n);\nCardBody.displayName = 'Card.Body';\n\n/* ------------------------------------------------------------------ */\n/* Footer */\n/* ------------------------------------------------------------------ */\n\nconst CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={[\n 'ds:flex ds:items-center ds:gap-[var(--spacing-sm)] ds:p-[var(--spacing-md)] ds:pt-0',\n className,\n ]\n .filter(Boolean)\n .join(' ')}\n {...props}\n />\n ),\n);\nCardFooter.displayName = 'Card.Footer';\n\n/* ------------------------------------------------------------------ */\n/* Compound export */\n/* ------------------------------------------------------------------ */\n\nexport const Card = Object.assign(CardRoot, {\n Header: CardHeader,\n Media: CardMedia,\n Body: CardBody,\n Footer: CardFooter,\n});\n\nexport type { VariantProps as CardVariantProps };\n"],"names":["CardContext","createContext","cardVariants","cva","CardRoot","forwardRef","variant","interactive","stretch","asChild","className","children","onClick","onKeyDown","props","ref","headerId","useId","hasHeader","setHasHeader","useState","registerHeader","useCallback","interactiveProps","e","Comp","Slot","jsx","CardHeader","useContext","callbackRef","node","CardMedia","CardBody","CardFooter","Card"],"mappings":"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"}
|