@choco-vanille/ui 1.1.1 → 1.1.2

package/dist/components/surfaces/accordion/components/accordion-trigger/AccordionTrigger.cjs

@@ -0,0 +1,2 @@
+"use strict";const r=require("react/jsx-runtime"),q=require("react"),c=require("@base-ui/react/accordion"),g=require("./styles/AccordionTrigger.css.cjs"),m=require("../../../../_common/rotating-chevron/RotatingChevron.cjs");;/* empty css                                                 */;/* empty css                                                                               */const d=require("../../../../layout/flex/Flex.cjs");require("../../../../layout/flex/styles/Flex.css.cjs");const n=require("../../../../foundation/icon/Icon.cjs");require("../../../../foundation/icon/styles/Icon.css.cjs");const x=require("../../../../foundation/typography/Typography.cjs");require("../../../../foundation/typography/styles/Typography.css.cjs");const j=require("../../../../../utils/cn.cjs"),o=q.memo(({className:t,children:a,label:e,startIcon:s,endIcon:i,...u})=>r.jsx(c.Accordion.Header,{style:{margin:0},children:r.jsxs(c.Accordion.Trigger,{className:j.cn(g.ACCORDION_TRIGGER_STYLES.root,t),...u,children:[e?r.jsxs(d,{as:"span",alignItems:"center",gap:"sm",children:[s&&r.jsx(n,{icon:s,size:"sm"}),r.jsx(x,{as:"span",variant:"span",fontSize:"sm",children:e}),i&&r.jsx(n,{icon:i,size:"sm"})]}):a,r.jsx(m,{size:"sm"})]})}));o.displayName="Accordion.Trigger";module.exports=o;
+//# sourceMappingURL=AccordionTrigger.cjs.map

package/dist/components/surfaces/accordion/components/accordion-trigger/AccordionTrigger.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionTrigger.cjs","sources":["../../../../../../src/components/surfaces/accordion/components/accordion-trigger/AccordionTrigger.tsx"],"sourcesContent":["import { memo, type FC } from 'react'\r\n\r\nimport { Accordion as BaseAccordion } from '@base-ui/react/accordion'\r\n\r\nimport { ACCORDION_TRIGGER_STYLES } from '@components/surfaces/accordion/components/accordion-trigger/styles/AccordionTrigger.css.ts'\r\nimport type { AccordionTriggerProps } from '@components/surfaces/accordion/components/accordion-trigger/types/AccordionTrigger.props.ts'\r\nimport { RotatingChevron } from '@components/_common/rotating-chevron'\r\nimport { Flex } from '@components/layout/flex'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport { cn } from '@utils/cn.ts'\r\n\r\n/**\r\n * A button that opens and closes the corresponding accordion panel.\r\n *\r\n * Renders custom `children` when provided. When `label` is provided instead,\r\n * it is rendered through `Typography` and optional `startIcon` / `endIcon`\r\n * icons can be added.\r\n */\r\nconst AccordionTrigger: FC<AccordionTriggerProps> = memo(({\r\n    className,\r\n    children,\r\n    label,\r\n    startIcon,\r\n    endIcon,\r\n    ...props\r\n}) => (\r\n    <BaseAccordion.Header style={{ margin: 0 }}>\r\n        <BaseAccordion.Trigger\r\n            className={cn(ACCORDION_TRIGGER_STYLES.root, className)}\r\n            {...props}\r\n        >\r\n            {label ? (\r\n                <Flex\r\n                    as={'span'}\r\n                    alignItems={'center'}\r\n                    gap={'sm'}\r\n                >\r\n                    {startIcon && (\r\n                        <Icon\r\n                            icon={startIcon}\r\n                            size={'sm'}\r\n                        />\r\n                    )}\r\n                    <Typography\r\n                        as={'span'}\r\n                        variant={'span'}\r\n                        fontSize={'sm'}\r\n                    >\r\n                        {label}\r\n                    </Typography>\r\n                    {endIcon && (\r\n                        <Icon\r\n                            icon={endIcon}\r\n                            size={'sm'}\r\n                        />\r\n                    )}\r\n                </Flex>\r\n            ) : (\r\n                children\r\n            )}\r\n            <RotatingChevron size={'sm'} />\r\n        </BaseAccordion.Trigger>\r\n    </BaseAccordion.Header>\r\n))\r\n\r\nAccordionTrigger.displayName = 'Accordion.Trigger'\r\n\r\nexport default AccordionTrigger\r\n"],"names":["AccordionTrigger","memo","className","children","label","startIcon","endIcon","props","jsx","BaseAccordion","jsxs","cn","ACCORDION_TRIGGER_STYLES","Flex","Icon","Typography","RotatingChevron"],"mappings":"sxBAmBMA,EAA8CC,EAAAA,KAAK,CAAC,CACtD,UAAAC,EACA,SAAAC,EACA,MAAAC,EACA,UAAAC,EACA,QAAAC,EACA,GAAGC,CACP,IACIC,EAAAA,IAACC,YAAc,OAAd,CAAqB,MAAO,CAAE,OAAQ,GACnC,SAAAC,EAAAA,KAACD,EAAAA,UAAc,QAAd,CACG,UAAWE,EAAAA,GAAGC,2BAAyB,KAAMV,CAAS,EACrD,GAAGK,EAEH,SAAA,CAAAH,EACGM,EAAAA,KAACG,EAAA,CACG,GAAI,OACJ,WAAY,SACZ,IAAK,KAEJ,SAAA,CAAAR,GACGG,EAAAA,IAACM,EAAA,CACG,KAAMT,EACN,KAAM,IAAA,CAAA,EAGdG,EAAAA,IAACO,EAAA,CACG,GAAI,OACJ,QAAS,OACT,SAAU,KAET,SAAAX,CAAA,CAAA,EAEJE,GACGE,EAAAA,IAACM,EAAA,CACG,KAAMR,EACN,KAAM,IAAA,CAAA,CACV,CAAA,CAAA,EAIRH,EAEJK,EAAAA,IAACQ,EAAA,CAAgB,KAAM,IAAA,CAAM,CAAA,CAAA,CACjC,EACJ,CACH,EAEDhB,EAAiB,YAAc"}

package/dist/components/surfaces/accordion/components/accordion-trigger/AccordionTrigger.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { AccordionTriggerProps } from './types/AccordionTrigger.props.ts';
+/**
+ * A button that opens and closes the corresponding accordion panel.
+ *
+ * Renders custom `children` when provided. When `label` is provided instead,
+ * it is rendered through `Typography` and optional `startIcon` / `endIcon`
+ * icons can be added.
+ */
+declare const AccordionTrigger: FC<AccordionTriggerProps>;
+export default AccordionTrigger;

package/dist/components/surfaces/accordion/components/accordion-trigger/AccordionTrigger.js

@@ -0,0 +1,69 @@
+import { jsx as r, jsxs as t } from "react/jsx-runtime";
+import { memo as c } from "react";
+import { Accordion as e } from "@base-ui/react/accordion";
+import { ACCORDION_TRIGGER_STYLES as f } from "./styles/AccordionTrigger.css.js";
+import g from "../../../../_common/rotating-chevron/RotatingChevron.js";
+/* empty css                                               */
+/* empty css                                                                             */
+import d from "../../../../layout/flex/Flex.js";
+import "../../../../layout/flex/styles/Flex.css.js";
+import p from "../../../../foundation/icon/Icon.js";
+import "../../../../foundation/icon/styles/Icon.css.js";
+import l from "../../../../foundation/typography/Typography.js";
+import "../../../../foundation/typography/styles/Typography.css.js";
+import { cn as h } from "../../../../../utils/cn.js";
+const T = c(({
+  className: s,
+  children: n,
+  label: o,
+  startIcon: i,
+  endIcon: m,
+  ...a
+}) => /* @__PURE__ */ r(e.Header, { style: { margin: 0 }, children: /* @__PURE__ */ t(
+  e.Trigger,
+  {
+    className: h(f.root, s),
+    ...a,
+    children: [
+      o ? /* @__PURE__ */ t(
+        d,
+        {
+          as: "span",
+          alignItems: "center",
+          gap: "sm",
+          children: [
+            i && /* @__PURE__ */ r(
+              p,
+              {
+                icon: i,
+                size: "sm"
+              }
+            ),
+            /* @__PURE__ */ r(
+              l,
+              {
+                as: "span",
+                variant: "span",
+                fontSize: "sm",
+                children: o
+              }
+            ),
+            m && /* @__PURE__ */ r(
+              p,
+              {
+                icon: m,
+                size: "sm"
+              }
+            )
+          ]
+        }
+      ) : n,
+      /* @__PURE__ */ r(g, { size: "sm" })
+    ]
+  }
+) }));
+T.displayName = "Accordion.Trigger";
+export {
+  T as default
+};
+//# sourceMappingURL=AccordionTrigger.js.map

package/dist/components/surfaces/accordion/components/accordion-trigger/AccordionTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionTrigger.js","sources":["../../../../../../src/components/surfaces/accordion/components/accordion-trigger/AccordionTrigger.tsx"],"sourcesContent":["import { memo, type FC } from 'react'\r\n\r\nimport { Accordion as BaseAccordion } from '@base-ui/react/accordion'\r\n\r\nimport { ACCORDION_TRIGGER_STYLES } from '@components/surfaces/accordion/components/accordion-trigger/styles/AccordionTrigger.css.ts'\r\nimport type { AccordionTriggerProps } from '@components/surfaces/accordion/components/accordion-trigger/types/AccordionTrigger.props.ts'\r\nimport { RotatingChevron } from '@components/_common/rotating-chevron'\r\nimport { Flex } from '@components/layout/flex'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport { cn } from '@utils/cn.ts'\r\n\r\n/**\r\n * A button that opens and closes the corresponding accordion panel.\r\n *\r\n * Renders custom `children` when provided. When `label` is provided instead,\r\n * it is rendered through `Typography` and optional `startIcon` / `endIcon`\r\n * icons can be added.\r\n */\r\nconst AccordionTrigger: FC<AccordionTriggerProps> = memo(({\r\n    className,\r\n    children,\r\n    label,\r\n    startIcon,\r\n    endIcon,\r\n    ...props\r\n}) => (\r\n    <BaseAccordion.Header style={{ margin: 0 }}>\r\n        <BaseAccordion.Trigger\r\n            className={cn(ACCORDION_TRIGGER_STYLES.root, className)}\r\n            {...props}\r\n        >\r\n            {label ? (\r\n                <Flex\r\n                    as={'span'}\r\n                    alignItems={'center'}\r\n                    gap={'sm'}\r\n                >\r\n                    {startIcon && (\r\n                        <Icon\r\n                            icon={startIcon}\r\n                            size={'sm'}\r\n                        />\r\n                    )}\r\n                    <Typography\r\n                        as={'span'}\r\n                        variant={'span'}\r\n                        fontSize={'sm'}\r\n                    >\r\n                        {label}\r\n                    </Typography>\r\n                    {endIcon && (\r\n                        <Icon\r\n                            icon={endIcon}\r\n                            size={'sm'}\r\n                        />\r\n                    )}\r\n                </Flex>\r\n            ) : (\r\n                children\r\n            )}\r\n            <RotatingChevron size={'sm'} />\r\n        </BaseAccordion.Trigger>\r\n    </BaseAccordion.Header>\r\n))\r\n\r\nAccordionTrigger.displayName = 'Accordion.Trigger'\r\n\r\nexport default AccordionTrigger\r\n"],"names":["AccordionTrigger","memo","className","children","label","startIcon","endIcon","props","jsx","BaseAccordion","jsxs","cn","ACCORDION_TRIGGER_STYLES","Flex","Icon","Typography","RotatingChevron"],"mappings":";;;;;;;;;;;;;;AAmBA,MAAMA,IAA8CC,EAAK,CAAC;AAAA,EACtD,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACP,MACI,gBAAAC,EAACC,EAAc,QAAd,EAAqB,OAAO,EAAE,QAAQ,KACnC,UAAA,gBAAAC;AAAA,EAACD,EAAc;AAAA,EAAd;AAAA,IACG,WAAWE,EAAGC,EAAyB,MAAMV,CAAS;AAAA,IACrD,GAAGK;AAAA,IAEH,UAAA;AAAA,MAAAH,IACG,gBAAAM;AAAA,QAACG;AAAA,QAAA;AAAA,UACG,IAAI;AAAA,UACJ,YAAY;AAAA,UACZ,KAAK;AAAA,UAEJ,UAAA;AAAA,YAAAR,KACG,gBAAAG;AAAA,cAACM;AAAA,cAAA;AAAA,gBACG,MAAMT;AAAA,gBACN,MAAM;AAAA,cAAA;AAAA,YAAA;AAAA,YAGd,gBAAAG;AAAA,cAACO;AAAA,cAAA;AAAA,gBACG,IAAI;AAAA,gBACJ,SAAS;AAAA,gBACT,UAAU;AAAA,gBAET,UAAAX;AAAA,cAAA;AAAA,YAAA;AAAA,YAEJE,KACG,gBAAAE;AAAA,cAACM;AAAA,cAAA;AAAA,gBACG,MAAMR;AAAA,gBACN,MAAM;AAAA,cAAA;AAAA,YAAA;AAAA,UACV;AAAA,QAAA;AAAA,MAAA,IAIRH;AAAA,MAEJ,gBAAAK,EAACQ,GAAA,EAAgB,MAAM,KAAA,CAAM;AAAA,IAAA;AAAA,EAAA;AACjC,GACJ,CACH;AAEDhB,EAAiB,cAAc;"}

package/dist/components/surfaces/accordion/components/accordion-trigger/index.d.ts

@@ -0,0 +1,3 @@
+export { default as AccordionTrigger } from './AccordionTrigger.tsx';
+export { ACCORDION_TRIGGER_STYLES } from './styles/AccordionTrigger.css.ts';
+export type { AccordionTriggerProps } from './types/AccordionTrigger.props.ts';

package/dist/components/surfaces/accordion/components/accordion-trigger/styles/AccordionTrigger.css.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                                                    */;/* empty css                                      */var e={root:"_14oei6z0"};exports.ACCORDION_TRIGGER_STYLES=e;
+//# sourceMappingURL=AccordionTrigger.css.cjs.map

package/dist/components/surfaces/accordion/components/accordion-trigger/styles/AccordionTrigger.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionTrigger.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/surfaces/accordion/components/accordion-trigger/styles/AccordionTrigger.css.d.ts

@@ -0,0 +1,3 @@
+export declare const ACCORDION_TRIGGER_STYLES: {
+    root: string;
+};

package/dist/components/surfaces/accordion/components/accordion-trigger/styles/AccordionTrigger.css.js

@@ -0,0 +1,7 @@
+/* empty css                                                  */
+/* empty css                                    */
+var t = { root: "_14oei6z0" };
+export {
+  t as ACCORDION_TRIGGER_STYLES
+};
+//# sourceMappingURL=AccordionTrigger.css.js.map

package/dist/components/surfaces/accordion/components/accordion-trigger/styles/AccordionTrigger.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionTrigger.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/components/surfaces/accordion/components/accordion-trigger/types/AccordionTrigger.props.d.ts

@@ -0,0 +1,11 @@
+import { Accordion } from '@base-ui/react/accordion';
+export type AccordionTriggerProps = Omit<Accordion.Trigger.Props, 'children' | 'render'> & {
+    /** The text content rendered inside the trigger via the Typography component. */
+    label?: string;
+    /** Iconify icon name rendered before the label. */
+    startIcon?: string;
+    /** Iconify icon name rendered after the label. */
+    endIcon?: string;
+    /** Custom trigger content. Takes precedence over `label`. */
+    children?: Accordion.Trigger.Props['children'];
+};

package/dist/components/surfaces/accordion/index.d.ts

@@ -0,0 +1,9 @@
+export { default as Accordion } from './Accordion.tsx';
+export { ACCORDION_STYLES } from './styles/Accordion.css.ts';
+export { ACCORDION_ITEM_STYLES } from './components/accordion-item/styles/AccordionItem.css.ts';
+export { ACCORDION_TRIGGER_STYLES } from './components/accordion-trigger/styles/AccordionTrigger.css.ts';
+export { ACCORDION_CONTENT_STYLES } from './components/accordion-content/styles/AccordionContent.css.ts';
+export type { AccordionProps } from './types/Accordion.props.ts';
+export type { AccordionItemProps } from './components/accordion-item/types/AccordionItem.props.ts';
+export type { AccordionTriggerProps } from './components/accordion-trigger/types/AccordionTrigger.props.ts';
+export type { AccordionContentProps } from './components/accordion-content/types/AccordionContent.props.ts';

package/dist/components/surfaces/accordion/styles/Accordion.css.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                                              */;/* empty css                               */var e={root:"_1v2umme0"};exports.ACCORDION_STYLES=e;
+//# sourceMappingURL=Accordion.css.cjs.map

package/dist/components/surfaces/accordion/styles/Accordion.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/surfaces/accordion/styles/Accordion.css.d.ts

@@ -0,0 +1,3 @@
+export declare const ACCORDION_STYLES: {
+    root: string;
+};

package/dist/components/surfaces/accordion/styles/Accordion.css.js

@@ -0,0 +1,7 @@
+/* empty css                                            */
+/* empty css                             */
+var m = { root: "_1v2umme0" };
+export {
+  m as ACCORDION_STYLES
+};
+//# sourceMappingURL=Accordion.css.js.map

package/dist/components/surfaces/accordion/styles/Accordion.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/components/surfaces/accordion/types/Accordion.props.d.ts

@@ -0,0 +1,6 @@
+import { Accordion } from '@base-ui/react/accordion';
+import { CSSProperties } from 'react';
+export type AccordionProps = Accordion.Root.Props & {
+    /** Overrides the default full-width accordion. */
+    width?: CSSProperties['width'];
+};

package/dist/components/surfaces/accordion/types/index.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { default as AccordionContent } from '../components/accordion-content/AccordionContent.tsx';
+import { default as AccordionItem } from '../components/accordion-item/AccordionItem.tsx';
+import { default as AccordionTrigger } from '../components/accordion-trigger/AccordionTrigger.tsx';
+import { AccordionProps } from './Accordion.props.ts';
+export type AccordionCompound = FC<AccordionProps> & {
+    Item: typeof AccordionItem;
+    Trigger: typeof AccordionTrigger;
+    Content: typeof AccordionContent;
+};
+export type { AccordionProps } from './Accordion.props.ts';

package/dist/components/surfaces/card/Card.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=require("react/jsx-runtime"),C=require("react"),l=require("../../layout/box/Box.cjs");require("../../layout/box/styles/Box.css.cjs");const m=require("./components/card-body/CardBody.cjs"),y=require("./components/card-footer/CardFooter.cjs"),g=require("./components/card-header/CardHeader.cjs"),e=C.memo(({as:r="div",backgroundColor:o="card",color:d="cardForeground",borderRadius:t="lg",borderWidth:a="1px",borderColor:i="border",boxShadow:n="none",overflow:c="hidden",className:s,...u})=>q.jsx(l,{as:r,backgroundColor:o,color:d,borderRadius:t,borderWidth:a,borderColor:i,boxShadow:n,overflow:c,className:s,...u}));e.displayName="Card";e.Header=g;e.Body=m;e.Footer=y;exports.Card=e;
+//# sourceMappingURL=Card.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.cjs","sources":["../../../../src/components/surfaces/card/Card.tsx"],"sourcesContent":["import { memo } from 'react'\r\n\r\nimport { Box } from '@components/layout/box'\r\nimport CardBody from '@components/surfaces/card/components/card-body/CardBody.tsx'\r\nimport CardFooter from '@components/surfaces/card/components/card-footer/CardFooter.tsx'\r\nimport CardHeader from '@components/surfaces/card/components/card-header/CardHeader.tsx'\r\nimport type { CardCompound } from '@components/surfaces/card/types'\r\nimport type { CardProps } from '@components/surfaces/card/types/Card.props.ts'\r\n\r\n/**\r\n  * A surface container with a consistent background, border, shadow and\r\n  * rounded corners. Compose with the named sub-components for a structured\r\n  * layout.\r\n  *\r\n  * @example\r\n  * ```tsx\r\n  * <Card>\r\n  *   <Card.Header\r\n  *     title=\"Account settings\"\r\n  *     description=\"Manage your profile.\"\r\n  *     actions={<IconButton icon=\"lucide:ellipsis-vertical\" aria-label=\"More\" />}\r\n  *   />\r\n  *   <Card.Body>Content goes here</Card.Body>\r\n  *   <Card.Footer>\r\n  *     <Button label=\"Save\" variant=\"contained\" color=\"primary\" />\r\n  *   </Card.Footer>\r\n  * </Card>\r\n  * ```\r\n  */\r\nconst Card = memo<CardProps>(({\r\n    as = 'div',\r\n    backgroundColor = 'card',\r\n    color = 'cardForeground',\r\n    borderRadius = 'lg',\r\n    borderWidth = '1px',\r\n    borderColor = 'border',\r\n    boxShadow = 'none',\r\n    overflow = 'hidden',\r\n    className,\r\n    ...props\r\n}) => (\r\n    <Box\r\n        as={as}\r\n        backgroundColor={backgroundColor}\r\n        color={color}\r\n        borderRadius={borderRadius}\r\n        borderWidth={borderWidth}\r\n        borderColor={borderColor}\r\n        boxShadow={boxShadow}\r\n        overflow={overflow}\r\n        className={className}\r\n        {...props}\r\n    />\r\n)) as unknown as CardCompound\r\n\r\nCard.displayName = 'Card'\r\nCard.Header = CardHeader\r\nCard.Body = CardBody\r\nCard.Footer = CardFooter\r\n\r\nexport { Card }\r\n"],"names":["Card","memo","as","backgroundColor","color","borderRadius","borderWidth","borderColor","boxShadow","overflow","className","props","jsx","Box","CardHeader","CardBody","CardFooter"],"mappings":"8XA6BMA,EAAOC,EAAAA,KAAgB,CAAC,CAC1B,GAAAC,EAAK,MACL,gBAAAC,EAAkB,OAClB,MAAAC,EAAQ,iBACR,aAAAC,EAAe,KACf,YAAAC,EAAc,MACd,YAAAC,EAAc,SACd,UAAAC,EAAY,OACZ,SAAAC,EAAW,SACX,UAAAC,EACA,GAAGC,CACP,IACIC,EAAAA,IAACC,EAAA,CACG,GAAAX,EACA,gBAAAC,EACA,MAAAC,EACA,aAAAC,EACA,YAAAC,EACA,YAAAC,EACA,UAAAC,EACA,SAAAC,EACA,UAAAC,EACC,GAAGC,CAAA,CACR,CACH,EAEDX,EAAK,YAAc,OACnBA,EAAK,OAASc,EACdd,EAAK,KAAOe,EACZf,EAAK,OAASgB"}

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

@@ -0,0 +1,23 @@
+import { CardCompound } from './types';
+/**
+  * A surface container with a consistent background, border, shadow and
+  * rounded corners. Compose with the named sub-components for a structured
+  * layout.
+  *
+  * @example
+  * ```tsx
+  * <Card>
+  *   <Card.Header
+  *     title="Account settings"
+  *     description="Manage your profile."
+  *     actions={<IconButton icon="lucide:ellipsis-vertical" aria-label="More" />}
+  *   />
+  *   <Card.Body>Content goes here</Card.Body>
+  *   <Card.Footer>
+  *     <Button label="Save" variant="contained" color="primary" />
+  *   </Card.Footer>
+  * </Card>
+  * ```
+  */
+declare const Card: CardCompound;
+export { Card };

package/dist/components/surfaces/card/Card.js

@@ -0,0 +1,41 @@
+import { jsx as C } from "react/jsx-runtime";
+import { memo as x } from "react";
+import c from "../../layout/box/Box.js";
+import "../../layout/box/styles/Box.css.js";
+import s from "./components/card-body/CardBody.js";
+import y from "./components/card-footer/CardFooter.js";
+import B from "./components/card-header/CardHeader.js";
+const r = x(({
+  as: o = "div",
+  backgroundColor: d = "card",
+  color: m = "cardForeground",
+  borderRadius: e = "lg",
+  borderWidth: a = "1px",
+  borderColor: t = "border",
+  boxShadow: i = "none",
+  overflow: p = "hidden",
+  className: f,
+  ...n
+}) => /* @__PURE__ */ C(
+  c,
+  {
+    as: o,
+    backgroundColor: d,
+    color: m,
+    borderRadius: e,
+    borderWidth: a,
+    borderColor: t,
+    boxShadow: i,
+    overflow: p,
+    className: f,
+    ...n
+  }
+));
+r.displayName = "Card";
+r.Header = B;
+r.Body = s;
+r.Footer = y;
+export {
+  r as Card
+};
+//# sourceMappingURL=Card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sources":["../../../../src/components/surfaces/card/Card.tsx"],"sourcesContent":["import { memo } from 'react'\r\n\r\nimport { Box } from '@components/layout/box'\r\nimport CardBody from '@components/surfaces/card/components/card-body/CardBody.tsx'\r\nimport CardFooter from '@components/surfaces/card/components/card-footer/CardFooter.tsx'\r\nimport CardHeader from '@components/surfaces/card/components/card-header/CardHeader.tsx'\r\nimport type { CardCompound } from '@components/surfaces/card/types'\r\nimport type { CardProps } from '@components/surfaces/card/types/Card.props.ts'\r\n\r\n/**\r\n  * A surface container with a consistent background, border, shadow and\r\n  * rounded corners. Compose with the named sub-components for a structured\r\n  * layout.\r\n  *\r\n  * @example\r\n  * ```tsx\r\n  * <Card>\r\n  *   <Card.Header\r\n  *     title=\"Account settings\"\r\n  *     description=\"Manage your profile.\"\r\n  *     actions={<IconButton icon=\"lucide:ellipsis-vertical\" aria-label=\"More\" />}\r\n  *   />\r\n  *   <Card.Body>Content goes here</Card.Body>\r\n  *   <Card.Footer>\r\n  *     <Button label=\"Save\" variant=\"contained\" color=\"primary\" />\r\n  *   </Card.Footer>\r\n  * </Card>\r\n  * ```\r\n  */\r\nconst Card = memo<CardProps>(({\r\n    as = 'div',\r\n    backgroundColor = 'card',\r\n    color = 'cardForeground',\r\n    borderRadius = 'lg',\r\n    borderWidth = '1px',\r\n    borderColor = 'border',\r\n    boxShadow = 'none',\r\n    overflow = 'hidden',\r\n    className,\r\n    ...props\r\n}) => (\r\n    <Box\r\n        as={as}\r\n        backgroundColor={backgroundColor}\r\n        color={color}\r\n        borderRadius={borderRadius}\r\n        borderWidth={borderWidth}\r\n        borderColor={borderColor}\r\n        boxShadow={boxShadow}\r\n        overflow={overflow}\r\n        className={className}\r\n        {...props}\r\n    />\r\n)) as unknown as CardCompound\r\n\r\nCard.displayName = 'Card'\r\nCard.Header = CardHeader\r\nCard.Body = CardBody\r\nCard.Footer = CardFooter\r\n\r\nexport { Card }\r\n"],"names":["Card","memo","as","backgroundColor","color","borderRadius","borderWidth","borderColor","boxShadow","overflow","className","props","jsx","Box","CardHeader","CardBody","CardFooter"],"mappings":";;;;;;;AA6BA,MAAMA,IAAOC,EAAgB,CAAC;AAAA,EAC1B,IAAAC,IAAK;AAAA,EACL,iBAAAC,IAAkB;AAAA,EAClB,OAAAC,IAAQ;AAAA,EACR,cAAAC,IAAe;AAAA,EACf,aAAAC,IAAc;AAAA,EACd,aAAAC,IAAc;AAAA,EACd,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,WAAAC;AAAA,EACA,GAAGC;AACP,MACI,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,IAAAX;AAAA,IACA,iBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACC,GAAGC;AAAA,EAAA;AACR,CACH;AAEDX,EAAK,cAAc;AACnBA,EAAK,SAASc;AACdd,EAAK,OAAOe;AACZf,EAAK,SAASgB;"}

package/dist/components/surfaces/card/components/card-body/CardBody.cjs

@@ -0,0 +1,2 @@
+"use strict";const t=require("react/jsx-runtime"),i=require("react"),d=require("../../../../layout/box/Box.cjs");require("../../../../layout/box/styles/Box.css.cjs");const e=i.memo(({as:r="div",padding:s="md",...o})=>t.jsx(d,{as:r,padding:s,...o}));e.displayName="Card.Body";module.exports=e;
+//# sourceMappingURL=CardBody.cjs.map

package/dist/components/surfaces/card/components/card-body/CardBody.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardBody.cjs","sources":["../../../../../../src/components/surfaces/card/components/card-body/CardBody.tsx"],"sourcesContent":["import { memo, type FC } from 'react'\r\n\r\nimport { Box } from '@components/layout/box'\r\nimport type { CardBodyProps } from '@components/surfaces/card/components/card-body/types/CardBody.props.ts'\r\n\r\n/** Main content area of a `Card` with uniform padding. */\r\nconst CardBody: FC<CardBodyProps> = memo(({ as = 'div', padding = 'md', ...props }) => (\r\n    <Box\r\n        as={as}\r\n        padding={padding}\r\n        {...props}\r\n    />\r\n))\r\n\r\nCardBody.displayName = 'Card.Body'\r\n\r\nexport default CardBody\r\n"],"names":["CardBody","memo","as","padding","props","jsx","Box"],"mappings":"sKAMA,MAAMA,EAA8BC,EAAAA,KAAK,CAAC,CAAE,GAAAC,EAAK,MAAO,QAAAC,EAAU,KAAM,GAAGC,CAAA,IACvEC,EAAAA,IAACC,EAAA,CACG,GAAAJ,EACA,QAAAC,EACC,GAAGC,CAAA,CACR,CACH,EAEDJ,EAAS,YAAc"}

package/dist/components/surfaces/card/components/card-body/CardBody.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { CardBodyProps } from './types/CardBody.props.ts';
+/** Main content area of a `Card` with uniform padding. */
+declare const CardBody: FC<CardBodyProps>;
+export default CardBody;

package/dist/components/surfaces/card/components/card-body/CardBody.js

@@ -0,0 +1,17 @@
+import { jsx as d } from "react/jsx-runtime";
+import { memo as t } from "react";
+import a from "../../../../layout/box/Box.js";
+import "../../../../layout/box/styles/Box.css.js";
+const i = t(({ as: o = "div", padding: m = "md", ...r }) => /* @__PURE__ */ d(
+  a,
+  {
+    as: o,
+    padding: m,
+    ...r
+  }
+));
+i.displayName = "Card.Body";
+export {
+  i as default
+};
+//# sourceMappingURL=CardBody.js.map

package/dist/components/surfaces/card/components/card-body/CardBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardBody.js","sources":["../../../../../../src/components/surfaces/card/components/card-body/CardBody.tsx"],"sourcesContent":["import { memo, type FC } from 'react'\r\n\r\nimport { Box } from '@components/layout/box'\r\nimport type { CardBodyProps } from '@components/surfaces/card/components/card-body/types/CardBody.props.ts'\r\n\r\n/** Main content area of a `Card` with uniform padding. */\r\nconst CardBody: FC<CardBodyProps> = memo(({ as = 'div', padding = 'md', ...props }) => (\r\n    <Box\r\n        as={as}\r\n        padding={padding}\r\n        {...props}\r\n    />\r\n))\r\n\r\nCardBody.displayName = 'Card.Body'\r\n\r\nexport default CardBody\r\n"],"names":["CardBody","memo","as","padding","props","jsx","Box"],"mappings":";;;;AAMA,MAAMA,IAA8BC,EAAK,CAAC,EAAE,IAAAC,IAAK,OAAO,SAAAC,IAAU,MAAM,GAAGC,EAAA,MACvE,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,IAAAJ;AAAA,IACA,SAAAC;AAAA,IACC,GAAGC;AAAA,EAAA;AACR,CACH;AAEDJ,EAAS,cAAc;"}

package/dist/components/surfaces/card/components/card-body/index.d.ts

@@ -0,0 +1,2 @@
+export { default as CardBody } from './CardBody.tsx';
+export type { CardBodyProps } from './types/CardBody.props.ts';

package/dist/components/surfaces/card/components/card-body/types/CardBody.props.d.ts

@@ -0,0 +1,5 @@
+import { BoxProps } from '../../../../../layout/box/types/Box.props.ts';
+export type CardBodyProps = Omit<BoxProps, 'as'> & {
+    /** The HTML element to render. @default 'div' */
+    as?: 'div' | 'section';
+};

package/dist/components/surfaces/card/components/card-footer/CardFooter.cjs

@@ -0,0 +1,2 @@
+"use strict";const o=require("react/jsx-runtime"),s=require("react"),i=require("../../../../layout/flex/Flex.cjs");require("../../../../layout/flex/styles/Flex.css.cjs");const e=s.memo(({as:r="div",...t})=>o.jsx(i,{as:r,alignItems:"center",gap:"sm",padding:"md",paddingTop:"none",...t}));e.displayName="Card.Footer";module.exports=e;
+//# sourceMappingURL=CardFooter.cjs.map

package/dist/components/surfaces/card/components/card-footer/CardFooter.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardFooter.cjs","sources":["../../../../../../src/components/surfaces/card/components/card-footer/CardFooter.tsx"],"sourcesContent":["import { memo, type FC } from 'react'\r\n\r\nimport { Flex } from '@components/layout/flex'\r\nimport type { CardFooterProps } from '@components/surfaces/card/components/card-footer/types/CardFooter.props.ts'\r\n\r\n/** Footer area of a `Card` — a flex row for action buttons. */\r\nconst CardFooter: FC<CardFooterProps> = memo(({ as = 'div', ...props }) => (\r\n    <Flex\r\n        as={as}\r\n        alignItems={'center'}\r\n        gap={'sm'}\r\n        padding={'md'}\r\n        paddingTop={'none'}\r\n        {...props}\r\n    />\r\n))\r\n\r\nCardFooter.displayName = 'Card.Footer'\r\n\r\nexport default CardFooter\r\n"],"names":["CardFooter","memo","as","props","jsx","Flex"],"mappings":"0KAMA,MAAMA,EAAkCC,EAAAA,KAAK,CAAC,CAAE,GAAAC,EAAK,MAAO,GAAGC,KAC3DC,EAAAA,IAACC,EAAA,CACG,GAAAH,EACA,WAAY,SACZ,IAAK,KACL,QAAS,KACT,WAAY,OACX,GAAGC,CAAA,CACR,CACH,EAEDH,EAAW,YAAc"}

package/dist/components/surfaces/card/components/card-footer/CardFooter.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { CardFooterProps } from './types/CardFooter.props.ts';
+/** Footer area of a `Card` — a flex row for action buttons. */
+declare const CardFooter: FC<CardFooterProps>;
+export default CardFooter;

package/dist/components/surfaces/card/components/card-footer/CardFooter.js

@@ -0,0 +1,20 @@
+import { jsx as r } from "react/jsx-runtime";
+import { memo as e } from "react";
+import t from "../../../../layout/flex/Flex.js";
+import "../../../../layout/flex/styles/Flex.css.js";
+const a = e(({ as: o = "div", ...m }) => /* @__PURE__ */ r(
+  t,
+  {
+    as: o,
+    alignItems: "center",
+    gap: "sm",
+    padding: "md",
+    paddingTop: "none",
+    ...m
+  }
+));
+a.displayName = "Card.Footer";
+export {
+  a as default
+};
+//# sourceMappingURL=CardFooter.js.map

package/dist/components/surfaces/card/components/card-footer/CardFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardFooter.js","sources":["../../../../../../src/components/surfaces/card/components/card-footer/CardFooter.tsx"],"sourcesContent":["import { memo, type FC } from 'react'\r\n\r\nimport { Flex } from '@components/layout/flex'\r\nimport type { CardFooterProps } from '@components/surfaces/card/components/card-footer/types/CardFooter.props.ts'\r\n\r\n/** Footer area of a `Card` — a flex row for action buttons. */\r\nconst CardFooter: FC<CardFooterProps> = memo(({ as = 'div', ...props }) => (\r\n    <Flex\r\n        as={as}\r\n        alignItems={'center'}\r\n        gap={'sm'}\r\n        padding={'md'}\r\n        paddingTop={'none'}\r\n        {...props}\r\n    />\r\n))\r\n\r\nCardFooter.displayName = 'Card.Footer'\r\n\r\nexport default CardFooter\r\n"],"names":["CardFooter","memo","as","props","jsx","Flex"],"mappings":";;;;AAMA,MAAMA,IAAkCC,EAAK,CAAC,EAAE,IAAAC,IAAK,OAAO,GAAGC,QAC3D,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,IAAAH;AAAA,IACA,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,SAAS;AAAA,IACT,YAAY;AAAA,IACX,GAAGC;AAAA,EAAA;AACR,CACH;AAEDH,EAAW,cAAc;"}

package/dist/components/surfaces/card/components/card-footer/index.d.ts

@@ -0,0 +1,2 @@
+export { default as CardFooter } from './CardFooter.tsx';
+export type { CardFooterProps } from './types/CardFooter.props.ts';

package/dist/components/surfaces/card/components/card-footer/types/CardFooter.props.d.ts

@@ -0,0 +1,5 @@
+import { FlexProps } from '../../../../../layout/flex';
+export type CardFooterProps = Omit<FlexProps, 'as'> & {
+    /** The HTML element to render. @default 'div' */
+    as?: 'div' | 'footer';
+};

package/dist/components/surfaces/card/components/card-header/CardHeader.cjs

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),H=require("react"),i=require("../../../../../theme/contract.css.cjs"),t=require("../../../../layout/flex/Flex.cjs");require("../../../../layout/flex/styles/Flex.css.cjs");const a=require("../../../../foundation/typography/Typography.cjs");require("../../../../foundation/typography/styles/Typography.css.cjs");const o=require("./styles/CardHeader.css.cjs"),c=H.memo(({as:l="div",title:r,titleAs:d,titleProps:g,description:s,descriptionProps:m,actions:n,className:u,children:h,...x})=>e.jsxs(t,{as:l,flexDirection:"row",alignItems:"start",justifyContent:"between",gap:"md",padding:"md",paddingBottom:"none",className:u,...x,children:[(r||s)&&e.jsxs(t,{flexDirection:"column",alignItems:"start",gap:"xs",className:o.CARD_HEADER_STYLES.content,children:[r&&e.jsx(a,{as:d??"h3",fontSize:"lg",fontWeight:"semibold",color:"cardForeground",style:{lineHeight:i.vars.lineHeight.tight},...g,children:r}),s&&e.jsx(a,{as:"p",fontSize:"sm",color:"mutedForeground",style:{lineHeight:i.vars.lineHeight.normal},...m,children:s})]}),h,n&&e.jsx(t,{alignItems:"center",gap:"xs",className:o.CARD_HEADER_STYLES.actions,children:n})]}));c.displayName="Card.Header";module.exports=c;
+//# sourceMappingURL=CardHeader.cjs.map

package/dist/components/surfaces/card/components/card-header/CardHeader.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardHeader.cjs","sources":["../../../../../../src/components/surfaces/card/components/card-header/CardHeader.tsx"],"sourcesContent":["import { memo, type FC } from 'react'\r\n\r\nimport { vars } from '@theme/contract.css.ts'\r\nimport { Flex } from '@components/layout/flex'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport { CARD_HEADER_STYLES } from '@components/surfaces/card/components/card-header/styles/CardHeader.css.ts'\r\nimport type { CardHeaderProps } from '@components/surfaces/card/components/card-header/types/CardHeader.props.ts'\r\n\r\n/**\r\n  * Header section of a `Card`. Renders an optional title, description and\r\n  * an actions slot in the trailing corner — all via props.\r\n  *\r\n  * `children` can be used for fully custom header content alongside or instead\r\n  * of the `title` / `description` props.\r\n  *\r\n  * @example\r\n  * ```tsx\r\n  * <CardHeader\r\n  *   title=\"Account settings\"\r\n  *   description=\"Manage your profile and preferences.\"\r\n  *   actions={<IconButton icon=\"lucide:ellipsis-vertical\" aria-label=\"More\" variant=\"ghost\" color=\"primary\" />}\r\n  * />\r\n  * ```\r\n  */\r\nconst CardHeader: FC<CardHeaderProps> = memo(({\r\n    as: Element = 'div',\r\n    title,\r\n    titleAs,\r\n    titleProps,\r\n    description,\r\n    descriptionProps,\r\n    actions,\r\n    className,\r\n    children,\r\n    ...props\r\n}) => (\r\n    <Flex\r\n        as={Element}\r\n        flexDirection={'row'}\r\n        alignItems={'start'}\r\n        justifyContent={'between'}\r\n        gap={'md'}\r\n        padding={'md'}\r\n        paddingBottom={'none'}\r\n        className={className}\r\n        {...props}\r\n    >\r\n        {(title || description) && (\r\n            <Flex\r\n                flexDirection={'column'}\r\n                alignItems={'start'}\r\n                gap={'xs'}\r\n                className={CARD_HEADER_STYLES.content}\r\n            >\r\n                {title && (\r\n                    <Typography\r\n                        as={titleAs ?? 'h3'}\r\n                        fontSize={'lg'}\r\n                        fontWeight={'semibold'}\r\n                        color={'cardForeground'}\r\n                        style={{ lineHeight: vars.lineHeight.tight }}\r\n                        {...titleProps}\r\n                    >\r\n                        {title}\r\n                    </Typography>\r\n                )}\r\n                {description && (\r\n                    <Typography\r\n                        as={'p'}\r\n                        fontSize={'sm'}\r\n                        color={'mutedForeground'}\r\n                        style={{ lineHeight: vars.lineHeight.normal }}\r\n                        {...descriptionProps}\r\n                    >\r\n                        {description}\r\n                    </Typography>\r\n                )}\r\n            </Flex>\r\n        )}\r\n\r\n        {children}\r\n\r\n        {actions && (\r\n            <Flex\r\n                alignItems={'center'}\r\n                gap={'xs'}\r\n                className={CARD_HEADER_STYLES.actions}\r\n            >\r\n                {actions}\r\n            </Flex>\r\n        )}\r\n    </Flex>\r\n))\r\n\r\nCardHeader.displayName = 'Card.Header'\r\n\r\nexport default CardHeader\r\n"],"names":["CardHeader","memo","Element","title","titleAs","titleProps","description","descriptionProps","actions","className","children","props","jsxs","Flex","CARD_HEADER_STYLES","jsx","Typography","vars"],"mappings":"uZAwBMA,EAAkCC,EAAAA,KAAK,CAAC,CAC1C,GAAIC,EAAU,MACd,MAAAC,EACA,QAAAC,EACA,WAAAC,EACA,YAAAC,EACA,iBAAAC,EACA,QAAAC,EACA,UAAAC,EACA,SAAAC,EACA,GAAGC,CACP,IACIC,EAAAA,KAACC,EAAA,CACG,GAAIX,EACJ,cAAe,MACf,WAAY,QACZ,eAAgB,UAChB,IAAK,KACL,QAAS,KACT,cAAe,OACf,UAAAO,EACC,GAAGE,EAEF,SAAA,EAAAR,GAASG,IACPM,EAAAA,KAACC,EAAA,CACG,cAAe,SACf,WAAY,QACZ,IAAK,KACL,UAAWC,EAAAA,mBAAmB,QAE7B,SAAA,CAAAX,GACGY,EAAAA,IAACC,EAAA,CACG,GAAIZ,GAAW,KACf,SAAU,KACV,WAAY,WACZ,MAAO,iBACP,MAAO,CAAE,WAAYa,OAAK,WAAW,KAAA,EACpC,GAAGZ,EAEH,SAAAF,CAAA,CAAA,EAGRG,GACGS,EAAAA,IAACC,EAAA,CACG,GAAI,IACJ,SAAU,KACV,MAAO,kBACP,MAAO,CAAE,WAAYC,OAAK,WAAW,MAAA,EACpC,GAAGV,EAEH,SAAAD,CAAA,CAAA,CACL,CAAA,CAAA,EAKXI,EAEAF,GACGO,EAAAA,IAACF,EAAA,CACG,WAAY,SACZ,IAAK,KACL,UAAWC,EAAAA,mBAAmB,QAE7B,SAAAN,CAAA,CAAA,CACL,CAAA,CAER,CACH,EAEDR,EAAW,YAAc"}

package/dist/components/surfaces/card/components/card-header/CardHeader.d.ts

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import { CardHeaderProps } from './types/CardHeader.props.ts';
+/**
+  * Header section of a `Card`. Renders an optional title, description and
+  * an actions slot in the trailing corner — all via props.
+  *
+  * `children` can be used for fully custom header content alongside or instead
+  * of the `title` / `description` props.
+  *
+  * @example
+  * ```tsx
+  * <CardHeader
+  *   title="Account settings"
+  *   description="Manage your profile and preferences."
+  *   actions={<IconButton icon="lucide:ellipsis-vertical" aria-label="More" variant="ghost" color="primary" />}
+  * />
+  * ```
+  */
+declare const CardHeader: FC<CardHeaderProps>;
+export default CardHeader;

package/dist/components/surfaces/card/components/card-header/CardHeader.js

@@ -0,0 +1,84 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { memo as x } from "react";
+import { vars as m } from "../../../../../theme/contract.css.js";
+import t from "../../../../layout/flex/Flex.js";
+import "../../../../layout/flex/styles/Flex.css.js";
+import n from "../../../../foundation/typography/Typography.js";
+import "../../../../foundation/typography/styles/Typography.css.js";
+import { CARD_HEADER_STYLES as l } from "./styles/CardHeader.css.js";
+const H = x(({
+  as: s = "div",
+  title: e,
+  titleAs: d,
+  titleProps: g,
+  description: o,
+  descriptionProps: p,
+  actions: i,
+  className: c,
+  children: f,
+  ...h
+}) => /* @__PURE__ */ a(
+  t,
+  {
+    as: s,
+    flexDirection: "row",
+    alignItems: "start",
+    justifyContent: "between",
+    gap: "md",
+    padding: "md",
+    paddingBottom: "none",
+    className: c,
+    ...h,
+    children: [
+      (e || o) && /* @__PURE__ */ a(
+        t,
+        {
+          flexDirection: "column",
+          alignItems: "start",
+          gap: "xs",
+          className: l.content,
+          children: [
+            e && /* @__PURE__ */ r(
+              n,
+              {
+                as: d ?? "h3",
+                fontSize: "lg",
+                fontWeight: "semibold",
+                color: "cardForeground",
+                style: { lineHeight: m.lineHeight.tight },
+                ...g,
+                children: e
+              }
+            ),
+            o && /* @__PURE__ */ r(
+              n,
+              {
+                as: "p",
+                fontSize: "sm",
+                color: "mutedForeground",
+                style: { lineHeight: m.lineHeight.normal },
+                ...p,
+                children: o
+              }
+            )
+          ]
+        }
+      ),
+      f,
+      i && /* @__PURE__ */ r(
+        t,
+        {
+          alignItems: "center",
+          gap: "xs",
+          className: l.actions,
+          children: i
+        }
+      )
+    ]
+  }
+));
+H.displayName = "Card.Header";
+export {
+  H as default
+};
+//# sourceMappingURL=CardHeader.js.map

package/dist/components/surfaces/card/components/card-header/CardHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardHeader.js","sources":["../../../../../../src/components/surfaces/card/components/card-header/CardHeader.tsx"],"sourcesContent":["import { memo, type FC } from 'react'\r\n\r\nimport { vars } from '@theme/contract.css.ts'\r\nimport { Flex } from '@components/layout/flex'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport { CARD_HEADER_STYLES } from '@components/surfaces/card/components/card-header/styles/CardHeader.css.ts'\r\nimport type { CardHeaderProps } from '@components/surfaces/card/components/card-header/types/CardHeader.props.ts'\r\n\r\n/**\r\n  * Header section of a `Card`. Renders an optional title, description and\r\n  * an actions slot in the trailing corner — all via props.\r\n  *\r\n  * `children` can be used for fully custom header content alongside or instead\r\n  * of the `title` / `description` props.\r\n  *\r\n  * @example\r\n  * ```tsx\r\n  * <CardHeader\r\n  *   title=\"Account settings\"\r\n  *   description=\"Manage your profile and preferences.\"\r\n  *   actions={<IconButton icon=\"lucide:ellipsis-vertical\" aria-label=\"More\" variant=\"ghost\" color=\"primary\" />}\r\n  * />\r\n  * ```\r\n  */\r\nconst CardHeader: FC<CardHeaderProps> = memo(({\r\n    as: Element = 'div',\r\n    title,\r\n    titleAs,\r\n    titleProps,\r\n    description,\r\n    descriptionProps,\r\n    actions,\r\n    className,\r\n    children,\r\n    ...props\r\n}) => (\r\n    <Flex\r\n        as={Element}\r\n        flexDirection={'row'}\r\n        alignItems={'start'}\r\n        justifyContent={'between'}\r\n        gap={'md'}\r\n        padding={'md'}\r\n        paddingBottom={'none'}\r\n        className={className}\r\n        {...props}\r\n    >\r\n        {(title || description) && (\r\n            <Flex\r\n                flexDirection={'column'}\r\n                alignItems={'start'}\r\n                gap={'xs'}\r\n                className={CARD_HEADER_STYLES.content}\r\n            >\r\n                {title && (\r\n                    <Typography\r\n                        as={titleAs ?? 'h3'}\r\n                        fontSize={'lg'}\r\n                        fontWeight={'semibold'}\r\n                        color={'cardForeground'}\r\n                        style={{ lineHeight: vars.lineHeight.tight }}\r\n                        {...titleProps}\r\n                    >\r\n                        {title}\r\n                    </Typography>\r\n                )}\r\n                {description && (\r\n                    <Typography\r\n                        as={'p'}\r\n                        fontSize={'sm'}\r\n                        color={'mutedForeground'}\r\n                        style={{ lineHeight: vars.lineHeight.normal }}\r\n                        {...descriptionProps}\r\n                    >\r\n                        {description}\r\n                    </Typography>\r\n                )}\r\n            </Flex>\r\n        )}\r\n\r\n        {children}\r\n\r\n        {actions && (\r\n            <Flex\r\n                alignItems={'center'}\r\n                gap={'xs'}\r\n                className={CARD_HEADER_STYLES.actions}\r\n            >\r\n                {actions}\r\n            </Flex>\r\n        )}\r\n    </Flex>\r\n))\r\n\r\nCardHeader.displayName = 'Card.Header'\r\n\r\nexport default CardHeader\r\n"],"names":["CardHeader","memo","Element","title","titleAs","titleProps","description","descriptionProps","actions","className","children","props","jsxs","Flex","CARD_HEADER_STYLES","jsx","Typography","vars"],"mappings":";;;;;;;;AAwBA,MAAMA,IAAkCC,EAAK,CAAC;AAAA,EAC1C,IAAIC,IAAU;AAAA,EACd,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACP,MACI,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,IAAIX;AAAA,IACJ,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAK;AAAA,IACL,SAAS;AAAA,IACT,eAAe;AAAA,IACf,WAAAO;AAAA,IACC,GAAGE;AAAA,IAEF,UAAA;AAAA,OAAAR,KAASG,MACP,gBAAAM;AAAA,QAACC;AAAA,QAAA;AAAA,UACG,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,KAAK;AAAA,UACL,WAAWC,EAAmB;AAAA,UAE7B,UAAA;AAAA,YAAAX,KACG,gBAAAY;AAAA,cAACC;AAAA,cAAA;AAAA,gBACG,IAAIZ,KAAW;AAAA,gBACf,UAAU;AAAA,gBACV,YAAY;AAAA,gBACZ,OAAO;AAAA,gBACP,OAAO,EAAE,YAAYa,EAAK,WAAW,MAAA;AAAA,gBACpC,GAAGZ;AAAA,gBAEH,UAAAF;AAAA,cAAA;AAAA,YAAA;AAAA,YAGRG,KACG,gBAAAS;AAAA,cAACC;AAAA,cAAA;AAAA,gBACG,IAAI;AAAA,gBACJ,UAAU;AAAA,gBACV,OAAO;AAAA,gBACP,OAAO,EAAE,YAAYC,EAAK,WAAW,OAAA;AAAA,gBACpC,GAAGV;AAAA,gBAEH,UAAAD;AAAA,cAAA;AAAA,YAAA;AAAA,UACL;AAAA,QAAA;AAAA,MAAA;AAAA,MAKXI;AAAA,MAEAF,KACG,gBAAAO;AAAA,QAACF;AAAA,QAAA;AAAA,UACG,YAAY;AAAA,UACZ,KAAK;AAAA,UACL,WAAWC,EAAmB;AAAA,UAE7B,UAAAN;AAAA,QAAA;AAAA,MAAA;AAAA,IACL;AAAA,EAAA;AAER,CACH;AAEDR,EAAW,cAAc;"}

package/dist/components/surfaces/card/components/card-header/index.d.ts

@@ -0,0 +1,3 @@
+export { default as CardHeader } from './CardHeader.tsx';
+export { CARD_HEADER_STYLES } from './styles/CardHeader.css.ts';
+export type { CardHeaderProps } from './types/CardHeader.props.ts';

package/dist/components/surfaces/card/components/card-header/styles/CardHeader.css.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                                */var e={content:"_1rabbpx0",actions:"_1rabbpx1"};exports.CARD_HEADER_STYLES=e;
+//# sourceMappingURL=CardHeader.css.cjs.map

package/dist/components/surfaces/card/components/card-header/styles/CardHeader.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardHeader.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/surfaces/card/components/card-header/styles/CardHeader.css.d.ts

@@ -0,0 +1,4 @@
+export declare const CARD_HEADER_STYLES: {
+    content: string;
+    actions: string;
+};

package/dist/components/surfaces/card/components/card-header/styles/CardHeader.css.js

@@ -0,0 +1,6 @@
+/* empty css                              */
+var t = { content: "_1rabbpx0", actions: "_1rabbpx1" };
+export {
+  t as CARD_HEADER_STYLES
+};
+//# sourceMappingURL=CardHeader.css.js.map

package/dist/components/surfaces/card/components/card-header/styles/CardHeader.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardHeader.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/components/surfaces/card/components/card-header/types/CardHeader.props.d.ts

@@ -0,0 +1,19 @@
+import { FlexProps } from '../../../../../layout/flex';
+import { TypographyProps } from '../../../../../foundation/typography';
+import type * as React from 'react';
+export type CardHeaderProps = Omit<FlexProps, 'as'> & {
+    /** The HTML element to render. @default 'div' */
+    as?: 'div' | 'header';
+    /** Title text rendered as a heading inside the header. */
+    title?: string;
+    /** Heading level for the title element. @default 'h3' */
+    titleAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /** Extra props forwarded to the title `<Typography>` element. */
+    titleProps?: TypographyProps;
+    /** Muted description text rendered below the title. */
+    description?: string;
+    /** Extra props forwarded to the description `<Typography>` element. */
+    descriptionProps?: TypographyProps;
+    /** Content rendered in the trailing corner — e.g. an `<IconButton>` or `<Button>`. */
+    actions?: React.ReactNode;
+};

package/dist/components/surfaces/card/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './card-header';
+export * from './card-body';
+export * from './card-footer';