@hyddenlabs/hydn-ui 0.3.0-alpha.99 → 0.3.1

package/dist/components/layout/accordion/accordion.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+export type AccordionItemProps = {
+    /** Title text displayed in the accordion header button */
+    title: string;
+    /** Content displayed when the accordion item is expanded */
+    children: ReactNode;
+    /** Whether the accordion item is initially expanded on mount */
+    defaultOpen?: boolean;
+};
+export type AccordionProps = {
+    /** Accordion items (typically AccordionItem components) */
+    children: ReactNode;
+    /** Additional CSS classes applied to the accordion container */
+    className?: string;
+    /** Whether multiple accordion items can be open simultaneously (not implemented) */
+    allowMultiple?: boolean;
+};
+/**
+ * AccordionItem - Single expandable section
+ */
+export declare function AccordionItem({ title, children, defaultOpen }: Readonly<AccordionItemProps>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Accordion - Expandable sections for FAQs, filters, etc.
+ */
+declare function Accordion({ children, className }: Readonly<AccordionProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace Accordion {
+    var displayName: string;
+}
+export default Accordion;
+//# sourceMappingURL=accordion.d.ts.map

package/dist/components/layout/accordion/accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/accordion/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAE5C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,QAAQ,EAAE,SAAS,CAAC;IACpB,gEAAgE;IAChE,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,2DAA2D;IAC3D,QAAQ,EAAE,SAAS,CAAC;IACpB,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oFAAoF;IACpF,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAmB,EAAE,EAAE,QAAQ,CAAC,kBAAkB,CAAC,2CAuBnG;AAED;;GAEG;AACH,iBAAS,SAAS,CAAC,EAAE,QAAQ,EAAE,SAAc,EAAE,EAAE,QAAQ,CAAC,cAAc,CAAC,2CAExE;kBAFQ,SAAS;;;AAMlB,eAAe,SAAS,CAAC"}

package/dist/components/layout/accordion/accordion.js

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+function AccordionItem({ title, children, defaultOpen = false }) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  return /* @__PURE__ */ jsxs("article", { className: "border-b border-border", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setIsOpen(!isOpen),
+        className: "w-full flex items-center justify-between py-4 px-2 text-left text-foreground hover:bg-muted/50 active:bg-muted transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm",
+        "aria-expanded": isOpen,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: title }),
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: `w-5 h-5 transition-transform ${isOpen ? "rotate-180" : ""}`,
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+            }
+          )
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx("section", { className: "px-2 pb-4 text-muted-foreground", children })
+  ] });
+}
+function Accordion({ children, className = "" }) {
+  return /* @__PURE__ */ jsx("div", { className: `divide-y divide-border ${className}`, children });
+}
+Accordion.displayName = "Accordion";
+export {
+  AccordionItem,
+  Accordion as default
+};
+//# sourceMappingURL=accordion.js.map

package/dist/components/layout/accordion/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","sources":["../../../../src/components/layout/accordion/accordion.tsx"],"sourcesContent":["import { ReactNode, useState } from 'react';\n\nexport type AccordionItemProps = {\n  /** Title text displayed in the accordion header button */\n  title: string;\n  /** Content displayed when the accordion item is expanded */\n  children: ReactNode;\n  /** Whether the accordion item is initially expanded on mount */\n  defaultOpen?: boolean;\n};\n\nexport type AccordionProps = {\n  /** Accordion items (typically AccordionItem components) */\n  children: ReactNode;\n  /** Additional CSS classes applied to the accordion container */\n  className?: string;\n  /** Whether multiple accordion items can be open simultaneously (not implemented) */\n  allowMultiple?: boolean;\n};\n\n/**\n * AccordionItem - Single expandable section\n */\nexport function AccordionItem({ title, children, defaultOpen = false }: Readonly<AccordionItemProps>) {\n  const [isOpen, setIsOpen] = useState(defaultOpen);\n\n  return (\n    <article className=\"border-b border-border\">\n      <button\n        onClick={() => setIsOpen(!isOpen)}\n        className=\"w-full flex items-center justify-between py-4 px-2 text-left text-foreground hover:bg-muted/50 active:bg-muted transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm\"\n        aria-expanded={isOpen}\n      >\n        <span className=\"font-medium\">{title}</span>\n        <svg\n          className={`w-5 h-5 transition-transform ${isOpen ? 'rotate-180' : ''}`}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          viewBox=\"0 0 24 24\"\n        >\n          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\n        </svg>\n      </button>\n      {isOpen && <section className=\"px-2 pb-4 text-muted-foreground\">{children}</section>}\n    </article>\n  );\n}\n\n/**\n * Accordion - Expandable sections for FAQs, filters, etc.\n */\nfunction Accordion({ children, className = '' }: Readonly<AccordionProps>) {\n  return <div className={`divide-y divide-border ${className}`}>{children}</div>;\n}\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"names":[],"mappings":";;AAuBO,SAAS,cAAc,EAAE,OAAO,UAAU,cAAc,SAAuC;AACpG,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,WAAW;AAEhD,SACE,qBAAC,WAAA,EAAQ,WAAU,0BACjB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS,MAAM,UAAU,CAAC,MAAM;AAAA,QAChC,WAAU;AAAA,QACV,iBAAe;AAAA,QAEf,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAU,eAAe,UAAA,OAAM;AAAA,UACrC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,gCAAgC,SAAS,eAAe,EAAE;AAAA,cACrE,MAAK;AAAA,cACL,QAAO;AAAA,cACP,SAAQ;AAAA,cAER,UAAA,oBAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,aAAa,GAAG,GAAE,iBAAA,CAAiB;AAAA,YAAA;AAAA,UAAA;AAAA,QACxF;AAAA,MAAA;AAAA,IAAA;AAAA,IAED,UAAU,oBAAC,WAAA,EAAQ,WAAU,mCAAmC,SAAA,CAAS;AAAA,EAAA,GAC5E;AAEJ;AAKA,SAAS,UAAU,EAAE,UAAU,YAAY,MAAgC;AACzE,6BAAQ,OAAA,EAAI,WAAW,0BAA0B,SAAS,IAAK,UAAS;AAC1E;AAEA,UAAU,cAAc;"}

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

@@ -0,0 +1,3 @@
+export { default, AccordionItem } from './accordion';
+export type { AccordionProps, AccordionItemProps } from './accordion';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/accordion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACrD,YAAY,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/layout/action-card/action-card.d.ts

@@ -0,0 +1,37 @@
+import { ComponentProps, ReactNode } from 'react';
+import { default as Button } from '../../forms/button/button';
+import { default as ButtonWithIcon } from '../../forms/button/button-with-icon';
+import { default as Icon } from '../../system/icon/icon';
+import { default as CardBody } from '../card/card-body';
+import { default as Stack } from '../stack/stack';
+export type ActionCardButton = Omit<ComponentProps<typeof ButtonWithIcon>, 'children'> & {
+    label: string;
+};
+export type ActionCardItemAction = Omit<ComponentProps<typeof Button>, 'children'> & {
+    label: string;
+};
+export type ActionCardItem = {
+    id: string;
+    icon?: ComponentProps<typeof Icon>['name'];
+    label: string;
+    description?: string;
+    action?: ActionCardItemAction;
+};
+export type ActionCardProps = {
+    icon?: ComponentProps<typeof Icon>['name'];
+    title: string;
+    description?: string;
+    children?: ReactNode;
+    primaryAction?: ActionCardButton;
+    secondaryAction?: ActionCardButton;
+    align?: 'start' | 'center';
+    bodyPadding?: ComponentProps<typeof CardBody>['padding'];
+    items?: ActionCardItem[];
+    showItemDividers?: boolean;
+    itemSpacing?: ComponentProps<typeof Stack>['spacing'];
+    statusContent?: ReactNode;
+    footerContent?: ReactNode;
+    'data-testid'?: string;
+};
+export declare function ActionCard({ icon, title, description, children, primaryAction, secondaryAction, align, items, showItemDividers, itemSpacing, statusContent, footerContent, 'data-testid': dataTestId }: ActionCardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=action-card.d.ts.map

package/dist/components/layout/action-card/action-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-card.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/action-card/action-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAC/C,OAAO,cAAc,MAAM,qCAAqC,CAAC;AACjE,OAAO,IAAI,MAAM,wBAAwB,CAAC;AAG1C,OAAO,QAAQ,MAAM,mBAAmB,CAAC;AAEzC,OAAO,KAAK,MAAM,gBAAgB,CAAC;AAGnC,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACvF,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACnF,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,oBAAoB,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,CAAC,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC,eAAe,CAAC,EAAE,gBAAgB,CAAC;IACnC,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC3B,WAAW,CAAC,EAAE,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAC;IACzD,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC;IACtD,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AA6EF,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,aAAa,EACb,eAAe,EACf,KAAgB,EAChB,KAAK,EACL,gBAAuB,EACvB,WAAkB,EAClB,aAAa,EACb,aAAa,EACb,aAAa,EAAE,UAAU,EAC1B,EAAE,eAAe,2CA6DjB"}

package/dist/components/layout/action-card/action-card.js

@@ -0,0 +1,104 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Fragment } from "react";
+import ButtonWithIcon from "../../forms/button/button-with-icon.js";
+import { Icon } from "../../system/icon/icon.js";
+import Text from "../../typography/text/text.js";
+import Card from "../card/card.js";
+import CardBody from "../card/card-body.js";
+import Divider from "../divider/divider.js";
+import Stack from "../stack/stack.js";
+import CardHeader from "../card/card-header.js";
+const stackAlignMap = {
+  start: "start",
+  center: "center"
+};
+const stackJustifyMap = {
+  start: "start",
+  center: "center"
+};
+function renderItems(items, options) {
+  if (!items?.length) return null;
+  const { showDividers = false, spacing = "sm" } = options ?? {};
+  return /* @__PURE__ */ jsx(Stack, { direction: "vertical", spacing, className: "w-full", children: items.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Stack, { direction: "vertical", spacing: "xs", className: "w-full", children: [
+      /* @__PURE__ */ jsxs(Stack, { direction: "horizontal", align: "center", spacing: "sm", className: "w-full", children: [
+        /* @__PURE__ */ jsxs(Stack, { direction: "horizontal", align: "center", spacing: "sm", className: "flex-1", children: [
+          item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon }),
+          /* @__PURE__ */ jsx(Text, { weight: "medium", children: item.label })
+        ] }),
+        item.action && /* @__PURE__ */ jsx(
+          ButtonWithIcon,
+          {
+            ...item.action,
+            icon: typeof item.action.icon === "string" ? item.action.icon : "",
+            iconPosition: item.action.iconPosition ?? "right",
+            children: item.action.label
+          }
+        )
+      ] }),
+      item.description && /* @__PURE__ */ jsx(Text, { size: "sm", variant: "muted", children: item.description })
+    ] }),
+    showDividers && index < items.length - 1 && /* @__PURE__ */ jsx(Divider, {})
+  ] }, item.id)) });
+}
+function renderAction(action, fallbackVariant = "primary") {
+  if (!action) return null;
+  return /* @__PURE__ */ jsx(
+    ButtonWithIcon,
+    {
+      ...action,
+      variant: action.variant ?? fallbackVariant,
+      iconPosition: action.iconPosition ?? "right",
+      icon: action.icon ?? "",
+      children: action.label
+    }
+  );
+}
+function ActionCard({
+  icon,
+  title,
+  description,
+  children,
+  primaryAction,
+  secondaryAction,
+  align = "center",
+  items,
+  showItemDividers = true,
+  itemSpacing = "sm",
+  statusContent,
+  footerContent,
+  "data-testid": dataTestId
+}) {
+  const stackAlign = stackAlignMap[align];
+  const stackJustify = stackJustifyMap[align];
+  const hasItems = Boolean(items?.length);
+  const hasChildren = Boolean(children);
+  const hasStatus = Boolean(statusContent);
+  const hasFooter = Boolean(footerContent);
+  return /* @__PURE__ */ jsxs(Card, { variant: "neutral", width: "full", "data-testid": dataTestId, children: [
+    /* @__PURE__ */ jsx(CardHeader, { padding: "sm", children: /* @__PURE__ */ jsxs(Stack, { direction: "vertical", spacing: "sm", children: [
+      /* @__PURE__ */ jsxs(Stack, { direction: "horizontal", spacing: "sm", align, children: [
+        icon && /* @__PURE__ */ jsx(Icon, { name: icon }),
+        /* @__PURE__ */ jsx(Text, { size: "lg", weight: "semibold", children: title })
+      ] }),
+      description && /* @__PURE__ */ jsx(Text, { variant: "muted", size: "sm", children: description })
+    ] }) }),
+    /* @__PURE__ */ jsx(CardBody, { padding: "sm", children: /* @__PURE__ */ jsxs(Stack, { direction: "vertical", spacing: "md", align: stackAlign, children: [
+      hasStatus && /* @__PURE__ */ jsx(Stack, { direction: "vertical", className: "w-full", children: statusContent }),
+      hasItems && renderItems(items, {
+        showDividers: showItemDividers,
+        spacing: itemSpacing
+      }),
+      hasChildren && /* @__PURE__ */ jsx(Stack, { direction: "vertical", spacing: "sm", className: "w-full", children }),
+      hasFooter && /* @__PURE__ */ jsx(Stack, { direction: "vertical", className: "w-full", children: footerContent }),
+      (primaryAction ?? secondaryAction) && /* @__PURE__ */ jsxs(Stack, { direction: "horizontal", spacing: "sm", justify: stackJustify, className: "w-full flex-wrap", children: [
+        renderAction(primaryAction),
+        renderAction(secondaryAction, "neutral")
+      ] })
+    ] }) })
+  ] });
+}
+export {
+  ActionCard
+};
+//# sourceMappingURL=action-card.js.map

package/dist/components/layout/action-card/action-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-card.js","sources":["../../../../src/components/layout/action-card/action-card.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\nimport { Fragment } from 'react';\n\nimport Button from '../../forms/button/button';\nimport ButtonWithIcon from '../../forms/button/button-with-icon';\nimport Icon from '../../system/icon/icon';\nimport Text from '../../typography/text/text';\nimport Card from '../card/card';\nimport CardBody from '../card/card-body';\nimport Divider from '../divider/divider';\nimport Stack from '../stack/stack';\nimport CardHeader from '../card/card-header';\n\nexport type ActionCardButton = Omit<ComponentProps<typeof ButtonWithIcon>, 'children'> & {\n  label: string;\n};\n\nexport type ActionCardItemAction = Omit<ComponentProps<typeof Button>, 'children'> & {\n  label: string;\n};\n\nexport type ActionCardItem = {\n  id: string;\n  icon?: ComponentProps<typeof Icon>['name'];\n  label: string;\n  description?: string;\n  action?: ActionCardItemAction;\n};\n\nexport type ActionCardProps = {\n  icon?: ComponentProps<typeof Icon>['name'];\n  title: string;\n  description?: string;\n  children?: ReactNode;\n  primaryAction?: ActionCardButton;\n  secondaryAction?: ActionCardButton;\n  align?: 'start' | 'center';\n  bodyPadding?: ComponentProps<typeof CardBody>['padding'];\n  items?: ActionCardItem[];\n  showItemDividers?: boolean;\n  itemSpacing?: ComponentProps<typeof Stack>['spacing'];\n  statusContent?: ReactNode;\n  footerContent?: ReactNode;\n  'data-testid'?: string;\n};\n\nconst stackAlignMap: Record<'start' | 'center', ComponentProps<typeof Stack>['align']> = {\n  start: 'start',\n  center: 'center'\n};\n\nconst stackJustifyMap: Record<'start' | 'center', ComponentProps<typeof Stack>['justify']> = {\n  start: 'start',\n  center: 'center'\n};\n\nfunction renderItems(\n  items?: ActionCardItem[],\n  options?: {\n    showDividers?: boolean;\n    spacing?: ComponentProps<typeof Stack>['spacing'];\n  }\n) {\n  if (!items?.length) return null;\n\n  const { showDividers = false, spacing = 'sm' } = options ?? {};\n\n  return (\n    <Stack direction=\"vertical\" spacing={spacing} className=\"w-full\">\n      {items.map((item, index) => (\n        <Fragment key={item.id}>\n          <Stack direction=\"vertical\" spacing=\"xs\" className=\"w-full\">\n            <Stack direction=\"horizontal\" align=\"center\" spacing=\"sm\" className=\"w-full\">\n              <Stack direction=\"horizontal\" align=\"center\" spacing=\"sm\" className=\"flex-1\">\n                {item.icon && <Icon name={item.icon} />}\n                <Text weight=\"medium\">{item.label}</Text>\n              </Stack>\n\n              {item.action && (\n                <ButtonWithIcon\n                  {...item.action}\n                  icon={typeof item.action.icon === 'string' ? item.action.icon : ''}\n                  iconPosition={item.action.iconPosition ?? 'right'}\n                >\n                  {item.action.label}\n                </ButtonWithIcon>\n              )}\n            </Stack>\n\n            {item.description && (\n              <Text size=\"sm\" variant=\"muted\">\n                {item.description}\n              </Text>\n            )}\n          </Stack>\n\n          {showDividers && index < items.length - 1 && <Divider />}\n        </Fragment>\n      ))}\n    </Stack>\n  );\n}\n\nfunction renderAction(\n  action?: ActionCardButton,\n  fallbackVariant: ComponentProps<typeof ButtonWithIcon>['variant'] = 'primary'\n) {\n  if (!action) return null;\n\n  return (\n    <ButtonWithIcon\n      {...action}\n      variant={action.variant ?? fallbackVariant}\n      iconPosition={action.iconPosition ?? 'right'}\n      icon={action.icon ?? ''}\n    >\n      {action.label}\n    </ButtonWithIcon>\n  );\n}\n\nexport function ActionCard({\n  icon,\n  title,\n  description,\n  children,\n  primaryAction,\n  secondaryAction,\n  align = 'center',\n  items,\n  showItemDividers = true,\n  itemSpacing = 'sm',\n  statusContent,\n  footerContent,\n  'data-testid': dataTestId\n}: ActionCardProps) {\n  const stackAlign = stackAlignMap[align];\n  const stackJustify = stackJustifyMap[align];\n  const hasItems = Boolean(items?.length);\n  const hasChildren = Boolean(children);\n  const hasStatus = Boolean(statusContent);\n  const hasFooter = Boolean(footerContent);\n\n  return (\n    <Card variant=\"neutral\" width=\"full\" data-testid={dataTestId}>\n      <CardHeader padding=\"sm\">\n        <Stack direction=\"vertical\" spacing=\"sm\">\n          <Stack direction=\"horizontal\" spacing=\"sm\" align={align}>\n            {icon && <Icon name={icon} />}\n            <Text size=\"lg\" weight=\"semibold\">\n              {title}\n            </Text>\n          </Stack>\n          {description && (\n            <Text variant=\"muted\" size=\"sm\">\n              {description}\n            </Text>\n          )}\n        </Stack>\n      </CardHeader>\n      <CardBody padding=\"sm\">\n        <Stack direction=\"vertical\" spacing=\"md\" align={stackAlign}>\n          {hasStatus && (\n            <Stack direction=\"vertical\" className=\"w-full\">\n              {statusContent}\n            </Stack>\n          )}\n\n          {hasItems &&\n            renderItems(items, {\n              showDividers: showItemDividers,\n              spacing: itemSpacing\n            })}\n\n          {hasChildren && (\n            <Stack direction=\"vertical\" spacing=\"sm\" className=\"w-full\">\n              {children}\n            </Stack>\n          )}\n\n          {hasFooter && (\n            <Stack direction=\"vertical\" className=\"w-full\">\n              {footerContent}\n            </Stack>\n          )}\n\n          {(primaryAction ?? secondaryAction) && (\n            <Stack direction=\"horizontal\" spacing=\"sm\" justify={stackJustify} className=\"w-full flex-wrap\">\n              {renderAction(primaryAction)}\n              {renderAction(secondaryAction, 'neutral')}\n            </Stack>\n          )}\n        </Stack>\n      </CardBody>\n    </Card>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/layout/action-card/index.d.ts

@@ -0,0 +1,3 @@
+export { ActionCard } from './action-card';
+export type { ActionCardProps, ActionCardButton, ActionCardItem, ActionCardItemAction } from './action-card';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/action-card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/action-card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/layout/card/card-actions.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+export type CardActionsProps = {
+    /**
+     * Action buttons or elements
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Alignment of actions
+     * @default 'end'
+     */
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    /**
+     * Direction of actions
+     * @default 'row'
+     */
+    direction?: 'row' | 'column';
+};
+/**
+ * CardActions - Action buttons container for Card (DaisyUI aesthetic with pure Tailwind)
+ *
+ * Container for buttons and other interactive elements within a card.
+ * Place after CardBody for proper spacing and alignment.
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <CardBody>
+ *     <CardTitle>Product</CardTitle>
+ *     <p>Description</p>
+ *   </CardBody>
+ *   <CardActions align="end">
+ *     <Button style="ghost">Cancel</Button>
+ *     <Button>Buy Now</Button>
+ *   </CardActions>
+ * </Card>
+ * ```
+ */
+declare function CardActions({ children, className, align, direction }: Readonly<CardActionsProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace CardActions {
+    var displayName: string;
+}
+export default CardActions;
+//# sourceMappingURL=card-actions.d.ts.map

package/dist/components/layout/card/card-actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-actions.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/card/card-actions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IAE/C;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CAC9B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,iBAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAc,EAAE,KAAa,EAAE,SAAiB,EAAE,EAAE,QAAQ,CAAC,gBAAgB,CAAC,2CA2B9G;kBA3BQ,WAAW;;;AA+BpB,eAAe,WAAW,CAAC"}

package/dist/components/layout/card/card-actions.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+function CardActions({ children, className = "", align = "end", direction = "row" }) {
+  const alignClasses = {
+    start: "justify-start",
+    center: "justify-center",
+    end: "justify-end",
+    stretch: "justify-stretch"
+  };
+  const directionClasses = {
+    row: "flex-row",
+    column: "flex-col"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `
+        flex gap-2 px-6 pb-6 pt-2
+        ${directionClasses[direction]}
+        ${alignClasses[align]}
+        ${className}
+      `.trim().replace(/\s+/g, " "),
+      children
+    }
+  );
+}
+CardActions.displayName = "CardActions";
+export {
+  CardActions as default
+};
+//# sourceMappingURL=card-actions.js.map

package/dist/components/layout/card/card-actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-actions.js","sources":["../../../../src/components/layout/card/card-actions.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nexport type CardActionsProps = {\n  /**\n   * Action buttons or elements\n   */\n  children: ReactNode;\n\n  /**\n   * Additional CSS classes\n   */\n  className?: string;\n\n  /**\n   * Alignment of actions\n   * @default 'end'\n   */\n  align?: 'start' | 'center' | 'end' | 'stretch';\n\n  /**\n   * Direction of actions\n   * @default 'row'\n   */\n  direction?: 'row' | 'column';\n};\n\n/**\n * CardActions - Action buttons container for Card (DaisyUI aesthetic with pure Tailwind)\n *\n * Container for buttons and other interactive elements within a card.\n * Place after CardBody for proper spacing and alignment.\n *\n * @example\n * ```tsx\n * <Card>\n *   <CardBody>\n *     <CardTitle>Product</CardTitle>\n *     <p>Description</p>\n *   </CardBody>\n *   <CardActions align=\"end\">\n *     <Button style=\"ghost\">Cancel</Button>\n *     <Button>Buy Now</Button>\n *   </CardActions>\n * </Card>\n * ```\n */\nfunction CardActions({ children, className = '', align = 'end', direction = 'row' }: Readonly<CardActionsProps>) {\n  const alignClasses = {\n    start: 'justify-start',\n    center: 'justify-center',\n    end: 'justify-end',\n    stretch: 'justify-stretch'\n  };\n\n  const directionClasses = {\n    row: 'flex-row',\n    column: 'flex-col'\n  };\n\n  return (\n    <div\n      className={`\n        flex gap-2 px-6 pb-6 pt-2\n        ${directionClasses[direction]}\n        ${alignClasses[align]}\n        ${className}\n      `\n        .trim()\n        .replace(/\\s+/g, ' ')}\n    >\n      {children}\n    </div>\n  );\n}\n\nCardActions.displayName = 'CardActions';\n\nexport default CardActions;\n"],"names":[],"mappings":";AA8CA,SAAS,YAAY,EAAE,UAAU,YAAY,IAAI,QAAQ,OAAO,YAAY,SAAqC;AAC/G,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAGX,QAAM,mBAAmB;AAAA,IACvB,KAAK;AAAA,IACL,QAAQ;AAAA,EAAA;AAGV,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA;AAAA,UAEP,iBAAiB,SAAS,CAAC;AAAA,UAC3B,aAAa,KAAK,CAAC;AAAA,UACnB,SAAS;AAAA,QAEV,KAAA,EACA,QAAQ,QAAQ,GAAG;AAAA,MAErB;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,YAAY,cAAc;"}

package/dist/components/layout/card/card-body.d.ts

@@ -0,0 +1,26 @@
+import { CardPaddingSize } from '../../../theme/size-tokens';
+export interface CardBodyProps {
+    /**
+     * Content to render inside the card body
+     */
+    children: React.ReactNode;
+    /**
+     * Padding size - uses unified size system
+     * @default 'md'
+     */
+    padding?: CardPaddingSize;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * CardBody - Content container for Card component
+ * Uses unified size system from theme/size-tokens
+ */
+declare function CardBody({ children, padding, className }: CardBodyProps): import("react/jsx-runtime").JSX.Element;
+declare namespace CardBody {
+    var displayName: string;
+}
+export default CardBody;
+//# sourceMappingURL=card-body.d.ts.map

package/dist/components/layout/card/card-body.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-body.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/card/card-body.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE1E,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,iBAAS,QAAQ,CAAC,EAAE,QAAQ,EAAE,OAAc,EAAE,SAAc,EAAE,EAAE,aAAa,2CAiB5E;kBAjBQ,QAAQ;;;AAqBjB,eAAe,QAAQ,CAAC"}

package/dist/components/layout/card/card-body.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { cardPadding } from "../../../theme/size-tokens.js";
+function CardBody({ children, padding = "md", className = "" }) {
+  const paddingClasses = cardPadding[padding];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `
+        card-body
+        flex flex-col gap-2
+        ${paddingClasses}
+        ${className}
+      `.trim().replace(/\s+/g, " "),
+      children
+    }
+  );
+}
+CardBody.displayName = "CardBody";
+export {
+  CardBody as default
+};
+//# sourceMappingURL=card-body.js.map

package/dist/components/layout/card/card-body.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-body.js","sources":["../../../../src/components/layout/card/card-body.tsx"],"sourcesContent":["import { cardPadding, CardPaddingSize } from '../../../theme/size-tokens';\n\nexport interface CardBodyProps {\n  /**\n   * Content to render inside the card body\n   */\n  children: React.ReactNode;\n\n  /**\n   * Padding size - uses unified size system\n   * @default 'md'\n   */\n  padding?: CardPaddingSize;\n\n  /**\n   * Additional CSS classes\n   */\n  className?: string;\n}\n\n/**\n * CardBody - Content container for Card component\n * Uses unified size system from theme/size-tokens\n */\nfunction CardBody({ children, padding = 'md', className = '' }: CardBodyProps) {\n  const paddingClasses = cardPadding[padding];\n\n  return (\n    <div\n      className={`\n        card-body\n        flex flex-col gap-2\n        ${paddingClasses}\n        ${className}\n      `\n        .trim()\n        .replace(/\\s+/g, ' ')}\n    >\n      {children}\n    </div>\n  );\n}\n\nCardBody.displayName = 'CardBody';\n\nexport default CardBody;\n"],"names":[],"mappings":";;AAwBA,SAAS,SAAS,EAAE,UAAU,UAAU,MAAM,YAAY,MAAqB;AAC7E,QAAM,iBAAiB,YAAY,OAAO;AAE1C,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA;AAAA;AAAA,UAGP,cAAc;AAAA,UACd,SAAS;AAAA,QAEV,KAAA,EACA,QAAQ,QAAQ,GAAG;AAAA,MAErB;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAAS,cAAc;"}

package/dist/components/layout/card/card-figure.d.ts

@@ -0,0 +1,50 @@
+import { ReactNode } from 'react';
+export type CardFigureProps = {
+    /**
+     * Image or media content
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Aspect ratio for the image
+     */
+    aspectRatio?: 'square' | 'video' | 'wide' | 'portrait' | 'auto';
+};
+/**
+ * CardFigure - Image/media container for Card
+ *
+ * Container for images or other media content within a card.
+ * Automatically handles aspect ratios and positioning based on parent Card's imagePosition.
+ *
+ * @example
+ * ```tsx
+ * // Basic card with image
+ * <Card>
+ *   <CardFigure>
+ *     <img src="product.jpg" alt="Product" />
+ *   </CardFigure>
+ *   <CardBody>
+ *     <CardTitle>Product Name</CardTitle>
+ *   </CardBody>
+ * </Card>
+ *
+ * // Card with custom aspect ratio
+ * <Card>
+ *   <CardFigure aspectRatio="wide">
+ *     <img src="banner.jpg" alt="Banner" />
+ *   </CardFigure>
+ *   <CardBody>
+ *     <CardTitle>Wide Image</CardTitle>
+ *   </CardBody>
+ * </Card>
+ * ```
+ */
+declare function CardFigure({ children, className, aspectRatio }: Readonly<CardFigureProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace CardFigure {
+    var displayName: string;
+}
+export default CardFigure;
+//# sourceMappingURL=card-figure.d.ts.map

package/dist/components/layout/card/card-figure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-figure.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/card/card-figure.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,WAAW,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC;CACjE,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAc,EAAE,WAAoB,EAAE,EAAE,QAAQ,CAAC,eAAe,CAAC,2CAuBhG;kBAvBQ,UAAU;;;AA2BnB,eAAe,UAAU,CAAC"}

package/dist/components/layout/card/card-figure.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+function CardFigure({ children, className = "", aspectRatio = "auto" }) {
+  const aspectRatioClasses = {
+    square: "aspect-square",
+    video: "aspect-video",
+    wide: "aspect-[21/9]",
+    portrait: "aspect-[3/4]",
+    auto: ""
+  };
+  return /* @__PURE__ */ jsx(
+    "figure",
+    {
+      className: `
+        card-figure
+        relative overflow-hidden
+        ${aspectRatioClasses[aspectRatio]}
+        ${className}
+      `.trim().replace(/\s+/g, " "),
+      children
+    }
+  );
+}
+CardFigure.displayName = "CardFigure";
+export {
+  CardFigure as default
+};
+//# sourceMappingURL=card-figure.js.map

package/dist/components/layout/card/card-figure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-figure.js","sources":["../../../../src/components/layout/card/card-figure.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nexport type CardFigureProps = {\n  /**\n   * Image or media content\n   */\n  children: ReactNode;\n\n  /**\n   * Additional CSS classes\n   */\n  className?: string;\n\n  /**\n   * Aspect ratio for the image\n   */\n  aspectRatio?: 'square' | 'video' | 'wide' | 'portrait' | 'auto';\n};\n\n/**\n * CardFigure - Image/media container for Card\n *\n * Container for images or other media content within a card.\n * Automatically handles aspect ratios and positioning based on parent Card's imagePosition.\n *\n * @example\n * ```tsx\n * // Basic card with image\n * <Card>\n *   <CardFigure>\n *     <img src=\"product.jpg\" alt=\"Product\" />\n *   </CardFigure>\n *   <CardBody>\n *     <CardTitle>Product Name</CardTitle>\n *   </CardBody>\n * </Card>\n *\n * // Card with custom aspect ratio\n * <Card>\n *   <CardFigure aspectRatio=\"wide\">\n *     <img src=\"banner.jpg\" alt=\"Banner\" />\n *   </CardFigure>\n *   <CardBody>\n *     <CardTitle>Wide Image</CardTitle>\n *   </CardBody>\n * </Card>\n * ```\n */\nfunction CardFigure({ children, className = '', aspectRatio = 'auto' }: Readonly<CardFigureProps>) {\n  const aspectRatioClasses = {\n    square: 'aspect-square',\n    video: 'aspect-video',\n    wide: 'aspect-[21/9]',\n    portrait: 'aspect-[3/4]',\n    auto: ''\n  };\n\n  return (\n    <figure\n      className={`\n        card-figure\n        relative overflow-hidden\n        ${aspectRatioClasses[aspectRatio]}\n        ${className}\n      `\n        .trim()\n        .replace(/\\s+/g, ' ')}\n    >\n      {children}\n    </figure>\n  );\n}\n\nCardFigure.displayName = 'CardFigure';\n\nexport default CardFigure;\n"],"names":[],"mappings":";AAgDA,SAAS,WAAW,EAAE,UAAU,YAAY,IAAI,cAAc,UAAqC;AACjG,QAAM,qBAAqB;AAAA,IACzB,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,IACN,UAAU;AAAA,IACV,MAAM;AAAA,EAAA;AAGR,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA;AAAA;AAAA,UAGP,mBAAmB,WAAW,CAAC;AAAA,UAC/B,SAAS;AAAA,QAEV,KAAA,EACA,QAAQ,QAAQ,GAAG;AAAA,MAErB;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,WAAW,cAAc;"}

package/dist/components/layout/card/card-footer.d.ts

@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+export type CardFooterProps = {
+    /** Footer content (typically buttons or metadata) */
+    children: ReactNode;
+    /** Additional CSS classes applied to the footer container */
+    className?: string;
+    /**
+     * Add border to top of footer
+     * @default true
+     */
+    bordered?: boolean;
+    /**
+     * Padding size
+     * @default 'md'
+     */
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    /**
+     * Alignment of footer content
+     * @default 'start'
+     */
+    align?: 'start' | 'center' | 'end';
+};
+/**
+ * CardFooter - Footer section for Card
+ *
+ * Displays a footer section at the bottom of a card, typically used for actions or metadata.
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <CardBody>
+ *     <CardTitle>Title</CardTitle>
+ *     <p>Content</p>
+ *   </CardBody>
+ *   <CardFooter align="end">
+ *     <Button>Action</Button>
+ *   </CardFooter>
+ * </Card>
+ * ```
+ */
+declare function CardFooter({ children, className, bordered, padding, align }: Readonly<CardFooterProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace CardFooter {
+    var displayName: string;
+}
+export default CardFooter;
+//# sourceMappingURL=card-footer.d.ts.map

package/dist/components/layout/card/card-footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-footer.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/card/card-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,eAAe,GAAG;IAC5B,qDAAqD;IACrD,QAAQ,EAAE,SAAS,CAAC;IACpB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACtC;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACpC,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,iBAAS,UAAU,CAAC,EAClB,QAAQ,EACR,SAAc,EACd,QAAe,EACf,OAAc,EACd,KAAe,EAChB,EAAE,QAAQ,CAAC,eAAe,CAAC,2CA8B3B;kBApCQ,UAAU;;;AAwCnB,eAAe,UAAU,CAAC"}

package/dist/components/layout/card/card-footer.js

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+function CardFooter({
+  children,
+  className = "",
+  bordered = true,
+  padding = "md",
+  align = "start"
+}) {
+  const paddingClasses = {
+    none: "p-0",
+    sm: "p-4",
+    md: "p-6",
+    lg: "p-8"
+  };
+  const alignClasses = {
+    start: "justify-start",
+    center: "justify-center",
+    end: "justify-end"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `
+        card-footer
+        flex items-center gap-1
+        ${paddingClasses[padding]}
+        ${bordered ? "border-t border-border" : ""}
+        ${alignClasses[align]}
+        ${className}
+      `.trim().replace(/\s+/g, " "),
+      children
+    }
+  );
+}
+CardFooter.displayName = "CardFooter";
+export {
+  CardFooter as default
+};
+//# sourceMappingURL=card-footer.js.map

package/dist/components/layout/card/card-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-footer.js","sources":["../../../../src/components/layout/card/card-footer.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nexport type CardFooterProps = {\n  /** Footer content (typically buttons or metadata) */\n  children: ReactNode;\n  /** Additional CSS classes applied to the footer container */\n  className?: string;\n  /**\n   * Add border to top of footer\n   * @default true\n   */\n  bordered?: boolean;\n  /**\n   * Padding size\n   * @default 'md'\n   */\n  padding?: 'none' | 'sm' | 'md' | 'lg';\n  /**\n   * Alignment of footer content\n   * @default 'start'\n   */\n  align?: 'start' | 'center' | 'end';\n};\n\n/**\n * CardFooter - Footer section for Card\n *\n * Displays a footer section at the bottom of a card, typically used for actions or metadata.\n *\n * @example\n * ```tsx\n * <Card>\n *   <CardBody>\n *     <CardTitle>Title</CardTitle>\n *     <p>Content</p>\n *   </CardBody>\n *   <CardFooter align=\"end\">\n *     <Button>Action</Button>\n *   </CardFooter>\n * </Card>\n * ```\n */\nfunction CardFooter({\n  children,\n  className = '',\n  bordered = true,\n  padding = 'md',\n  align = 'start'\n}: Readonly<CardFooterProps>) {\n  const paddingClasses = {\n    none: 'p-0',\n    sm: 'p-4',\n    md: 'p-6',\n    lg: 'p-8'\n  };\n\n  const alignClasses = {\n    start: 'justify-start',\n    center: 'justify-center',\n    end: 'justify-end'\n  };\n\n  return (\n    <div\n      className={`\n        card-footer\n        flex items-center gap-1\n        ${paddingClasses[padding]}\n        ${bordered ? 'border-t border-border' : ''}\n        ${alignClasses[align]}\n        ${className}\n      `\n        .trim()\n        .replace(/\\s+/g, ' ')}\n    >\n      {children}\n    </div>\n  );\n}\n\nCardFooter.displayName = 'CardFooter';\n\nexport default CardFooter;\n"],"names":[],"mappings":";AA0CA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,UAAU;AAAA,EACV,QAAQ;AACV,GAA8B;AAC5B,QAAM,iBAAiB;AAAA,IACrB,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA;AAGN,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,KAAK;AAAA,EAAA;AAGP,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA;AAAA;AAAA,UAGP,eAAe,OAAO,CAAC;AAAA,UACvB,WAAW,2BAA2B,EAAE;AAAA,UACxC,aAAa,KAAK,CAAC;AAAA,UACnB,SAAS;AAAA,QAEV,KAAA,EACA,QAAQ,QAAQ,GAAG;AAAA,MAErB;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,WAAW,cAAc;"}