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

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

@@ -0,0 +1,41 @@
+import { ReactNode } from 'react';
+export type CardHeaderProps = {
+    /** Header content (typically heading or metadata) */
+    children: ReactNode;
+    /** Additional CSS classes applied to the header container */
+    className?: string;
+    /**
+     * Add border to bottom of header
+     * @default true
+     */
+    bordered?: boolean;
+    /**
+     * Padding size
+     * @default 'md'
+     */
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+};
+/**
+ * CardHeader - Header section for Card
+ *
+ * Displays a header section at the top of a card, typically used for titles or metadata.
+ * Can be used with or without CardBody.
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <CardHeader>
+ *     <h3>Card Header</h3>
+ *   </CardHeader>
+ *   <CardBody>
+ *     <p>Content</p>
+ *   </CardBody>
+ * </Card>
+ * ```
+ */
+declare function CardHeader({ children, className, bordered, padding }: Readonly<CardHeaderProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace CardHeader {
+    var displayName: string;
+}
+export default CardHeader;
+//# sourceMappingURL=card-header.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card-header.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/card/card-header.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;CACvC,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,iBAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAc,EAAE,QAAe,EAAE,OAAc,EAAE,EAAE,QAAQ,CAAC,eAAe,CAAC,2CAuB3G;kBAvBQ,UAAU;;;AA2BnB,eAAe,UAAU,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"card-header.js","sources":["../../../../src/components/layout/card/card-header.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nexport type CardHeaderProps = {\n  /** Header content (typically heading or metadata) */\n  children: ReactNode;\n  /** Additional CSS classes applied to the header container */\n  className?: string;\n  /**\n   * Add border to bottom of header\n   * @default true\n   */\n  bordered?: boolean;\n  /**\n   * Padding size\n   * @default 'md'\n   */\n  padding?: 'none' | 'sm' | 'md' | 'lg';\n};\n\n/**\n * CardHeader - Header section for Card\n *\n * Displays a header section at the top of a card, typically used for titles or metadata.\n * Can be used with or without CardBody.\n *\n * @example\n * ```tsx\n * <Card>\n *   <CardHeader>\n *     <h3>Card Header</h3>\n *   </CardHeader>\n *   <CardBody>\n *     <p>Content</p>\n *   </CardBody>\n * </Card>\n * ```\n */\nfunction CardHeader({ children, className = '', bordered = true, padding = 'md' }: Readonly<CardHeaderProps>) {\n  const paddingClasses = {\n    none: 'p-0',\n    sm: 'p-4',\n    md: 'p-6',\n    lg: 'p-8'\n  };\n\n  return (\n    <div\n      className={`\n        card-header\n        flex items-center justify-between gap-3\n        ${paddingClasses[padding]}\n        ${bordered ? 'border-b border-border' : ''}\n        ${className}\n      `\n        .trim()\n        .replace(/\\s+/g, ' ')}\n    >\n      {children}\n    </div>\n  );\n}\n\nCardHeader.displayName = 'CardHeader';\n\nexport default CardHeader;\n"],"names":[],"mappings":";AAqCA,SAAS,WAAW,EAAE,UAAU,YAAY,IAAI,WAAW,MAAM,UAAU,QAAmC;AAC5G,QAAM,iBAAiB;AAAA,IACrB,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA;AAGN,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA;AAAA;AAAA,UAGP,eAAe,OAAO,CAAC;AAAA,UACvB,WAAW,2BAA2B,EAAE;AAAA,UACxC,SAAS;AAAA,QAEV,KAAA,EACA,QAAQ,QAAQ,GAAG;AAAA,MAErB;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,WAAW,cAAc;"}

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

@@ -0,0 +1,43 @@
+import { ReactNode } from 'react';
+import { HeadingSize } from '../../../theme/size-tokens';
+export type CardTitleProps = {
+    /**
+     * Title content
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * HTML heading level
+     * @default 'h2'
+     */
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * Size of the title - uses unified size system
+     * @default 'md'
+     */
+    size?: HeadingSize;
+};
+/**
+ * CardTitle - Title component for Card
+ *
+ * Displays a prominent title within a card, typically used at the top of CardBody.
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <CardBody>
+ *     <CardTitle>My Card Title</CardTitle>
+ *     <p>Card content goes here</p>
+ *   </CardBody>
+ * </Card>
+ * ```
+ */
+declare function CardTitle({ children, className, as: Component, size }: Readonly<CardTitleProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace CardTitle {
+    var displayName: string;
+}
+export default CardTitle;
+//# sourceMappingURL=card-title.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card-title.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/card/card-title.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAgB,KAAK,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE5E,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAE7C;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,iBAAS,SAAS,CAAC,EAAE,QAAQ,EAAE,SAAc,EAAE,EAAE,EAAE,SAAgB,EAAE,IAAW,EAAE,EAAE,QAAQ,CAAC,cAAc,CAAC,2CAgB3G;kBAhBQ,SAAS;;;AAoBlB,eAAe,SAAS,CAAC"}

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

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { headingSizes } from "../../../theme/size-tokens.js";
+function CardTitle({ children, className = "", as: Component = "h2", size = "md" }) {
+  const sizeClasses = headingSizes[size];
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: `
+        card-title
+        ${sizeClasses}
+        ${className}
+      `.trim().replace(/\s+/g, " "),
+      children
+    }
+  );
+}
+CardTitle.displayName = "CardTitle";
+export {
+  CardTitle as default
+};
+//# sourceMappingURL=card-title.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card-title.js","sources":["../../../../src/components/layout/card/card-title.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { headingSizes, type HeadingSize } from '../../../theme/size-tokens';\n\nexport type CardTitleProps = {\n  /**\n   * Title content\n   */\n  children: ReactNode;\n\n  /**\n   * Additional CSS classes\n   */\n  className?: string;\n\n  /**\n   * HTML heading level\n   * @default 'h2'\n   */\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n  /**\n   * Size of the title - uses unified size system\n   * @default 'md'\n   */\n  size?: HeadingSize;\n};\n\n/**\n * CardTitle - Title component for Card\n *\n * Displays a prominent title within a card, typically used at the top of CardBody.\n *\n * @example\n * ```tsx\n * <Card>\n *   <CardBody>\n *     <CardTitle>My Card Title</CardTitle>\n *     <p>Card content goes here</p>\n *   </CardBody>\n * </Card>\n * ```\n */\nfunction CardTitle({ children, className = '', as: Component = 'h2', size = 'md' }: Readonly<CardTitleProps>) {\n  const sizeClasses = headingSizes[size];\n\n  return (\n    <Component\n      className={`\n        card-title\n        ${sizeClasses}\n        ${className}\n      `\n        .trim()\n        .replace(/\\s+/g, ' ')}\n    >\n      {children}\n    </Component>\n  );\n}\n\nCardTitle.displayName = 'CardTitle';\n\nexport default CardTitle;\n"],"names":[],"mappings":";;AA0CA,SAAS,UAAU,EAAE,UAAU,YAAY,IAAI,IAAI,YAAY,MAAM,OAAO,QAAkC;AAC5G,QAAM,cAAc,aAAa,IAAI;AAErC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA;AAAA,UAEP,WAAW;AAAA,UACX,SAAS;AAAA,QAEV,KAAA,EACA,QAAQ,QAAQ,GAAG;AAAA,MAErB;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,UAAU,cAAc;"}

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

@@ -0,0 +1,74 @@
+import { default as React } from 'react';
+import { MarginXSize, MarginYSize, CardSize } from '../../../theme/size-tokens';
+export type CardProps = {
+    /** Card content - typically CardHeader, CardBody, CardFooter, or CardFigure components */
+    children: React.ReactNode;
+    /** Additional CSS classes applied to the card */
+    className?: string;
+    /** Visual style variant */
+    variant?: 'neutral' | 'bordered' | 'ghost' | 'filled';
+    /** Size of the card (sets fixed width) - uses unified size system */
+    size?: CardSize;
+    /** Width behavior - 'auto' uses size prop, 'full' stretches to container, 'fit' fits content */
+    width?: 'auto' | 'full' | 'fit';
+    /** Makes the card hoverable with transition effects */
+    hoverable?: boolean;
+    /** Card image position (when using figure element) */
+    imagePosition?: 'top' | 'bottom' | 'side' | 'overlay';
+    /** Centers the card content */
+    centered?: boolean;
+    /** Compact mode with reduced padding */
+    compact?: boolean;
+    /** Horizontal margin spacing */
+    marginX?: MarginXSize;
+    /** Vertical margin spacing */
+    marginY?: MarginYSize;
+} & React.HTMLAttributes<HTMLDivElement>;
+/**
+ * Card - Modern card component with flexible layouts
+ *
+ * Features:
+ * - Multiple visual variants (neutral, bordered, ghost, filled)
+ * - Flexible image positioning (top, bottom, side, overlay)
+ * - Size variants from xs to xl
+ * - Hover effects and transitions
+ * - Centered content option
+ * - Works with CardTitle, CardBody, CardActions, and CardFigure sub-components
+ *
+ * @example
+ * ```tsx
+ * // Basic card
+ * <Card>
+ *   <CardBody>Content</CardBody>
+ * </Card>
+ *
+ * // Card in Grid - stretches to fill grid cell
+ * <Grid>
+ *   <Card width="full">
+ *     <CardBody>Grid Item</CardBody>
+ *   </Card>
+ * </Grid>
+ *
+ * // Fixed size card
+ * <Card size="lg">
+ *   <CardBody>Fixed width card</CardBody>
+ * </Card>
+ *
+ * // Card with image and content
+ * <Card hoverable width="full">
+ *   <CardFigure>
+ *     <img src="..." alt="..." />
+ *   </CardFigure>
+ *   <CardBody>
+ *     <CardTitle>Product Name</CardTitle>
+ *     <Text>Description</Text>
+ *   </CardBody>
+ * </Card>
+ * ```
+ */
+declare function Card({ children, className, variant, size, width, hoverable, imagePosition, centered, compact, marginX: mX, marginY: mY, ...props }: Readonly<CardProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace Card {
+    var displayName: string;
+}
+export default Card;
+//# sourceMappingURL=card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAsB,WAAW,EAAW,WAAW,EAAE,KAAK,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAElH,MAAM,MAAM,SAAS,GAAG;IACtB,0FAA0F;IAC1F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;IACtD,qEAAqE;IACrE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,gGAAgG;IAChG,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC;IAChC,uDAAuD;IACvD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sDAAsD;IACtD,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;IACtD,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gCAAgC;IAChC,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,iBAAS,IAAI,CAAC,EACZ,QAAQ,EACR,SAAc,EACd,OAAmB,EACnB,IAAW,EACX,KAAc,EACd,SAAiB,EACjB,aAAqB,EACrB,QAAgB,EAChB,OAAe,EACf,OAAO,EAAE,EAAW,EACpB,OAAO,EAAE,EAAW,EACpB,GAAG,KAAK,EACT,EAAE,QAAQ,CAAC,SAAS,CAAC,2CAqDrB;kBAlEQ,IAAI;;;AAsEb,eAAe,IAAI,CAAC"}

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

@@ -0,0 +1,64 @@
+import { jsx } from "react/jsx-runtime";
+import { cardSizes, marginX, marginY } from "../../../theme/size-tokens.js";
+function Card({
+  children,
+  className = "",
+  variant = "neutral",
+  size = "md",
+  width = "auto",
+  hoverable = false,
+  imagePosition = "top",
+  centered = false,
+  compact = false,
+  marginX: mX = "none",
+  marginY: mY = "none",
+  ...props
+}) {
+  const variantClasses = {
+    neutral: "bg-card text-card-foreground border border-border shadow-md",
+    bordered: "bg-card text-card-foreground border-2 border-border",
+    ghost: "bg-transparent",
+    filled: "bg-muted text-foreground"
+  };
+  const widthClasses = {
+    auto: size ? cardSizes[size] : "max-w-full",
+    full: "w-full",
+    fit: "w-fit"
+  };
+  const marginXClass = mX !== "none" ? marginX[mX] : "";
+  const marginYClass = mY !== "none" ? marginY[mY] : "";
+  const hoverClasses = hoverable ? "transition-all duration-300 hover:shadow-xl hover:-translate-y-1" : "transition-shadow duration-200";
+  const imagePositionClasses = {
+    top: "flex-col",
+    bottom: "flex-col-reverse",
+    side: "flex-row",
+    overlay: "relative"
+  };
+  const centerClasses = centered ? "text-center items-center" : "";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `
+        rounded-2xl
+        overflow-hidden
+        ${variantClasses[variant]}
+        ${widthClasses[width]}
+        ${hoverClasses}
+        ${imagePositionClasses[imagePosition]}
+        ${centerClasses}
+        ${compact ? "p-4" : ""}
+        ${imagePosition === "side" ? "flex" : "flex"}
+        ${marginXClass}
+        ${marginYClass}
+        ${className}
+      `.trim().replace(/\s+/g, " "),
+      ...props,
+      children
+    }
+  );
+}
+Card.displayName = "Card";
+export {
+  Card as default
+};
+//# sourceMappingURL=card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sources":["../../../../src/components/layout/card/card.tsx"],"sourcesContent":["import React from 'react';\nimport { cardSizes, marginX, MarginXSize, marginY, MarginYSize, type CardSize } from '../../../theme/size-tokens';\n\nexport type CardProps = {\n  /** Card content - typically CardHeader, CardBody, CardFooter, or CardFigure components */\n  children: React.ReactNode;\n  /** Additional CSS classes applied to the card */\n  className?: string;\n  /** Visual style variant */\n  variant?: 'neutral' | 'bordered' | 'ghost' | 'filled';\n  /** Size of the card (sets fixed width) - uses unified size system */\n  size?: CardSize;\n  /** Width behavior - 'auto' uses size prop, 'full' stretches to container, 'fit' fits content */\n  width?: 'auto' | 'full' | 'fit';\n  /** Makes the card hoverable with transition effects */\n  hoverable?: boolean;\n  /** Card image position (when using figure element) */\n  imagePosition?: 'top' | 'bottom' | 'side' | 'overlay';\n  /** Centers the card content */\n  centered?: boolean;\n  /** Compact mode with reduced padding */\n  compact?: boolean;\n  /** Horizontal margin spacing */\n  marginX?: MarginXSize;\n  /** Vertical margin spacing */\n  marginY?: MarginYSize;\n} & React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Card - Modern card component with flexible layouts\n *\n * Features:\n * - Multiple visual variants (neutral, bordered, ghost, filled)\n * - Flexible image positioning (top, bottom, side, overlay)\n * - Size variants from xs to xl\n * - Hover effects and transitions\n * - Centered content option\n * - Works with CardTitle, CardBody, CardActions, and CardFigure sub-components\n *\n * @example\n * ```tsx\n * // Basic card\n * <Card>\n *   <CardBody>Content</CardBody>\n * </Card>\n *\n * // Card in Grid - stretches to fill grid cell\n * <Grid>\n *   <Card width=\"full\">\n *     <CardBody>Grid Item</CardBody>\n *   </Card>\n * </Grid>\n *\n * // Fixed size card\n * <Card size=\"lg\">\n *   <CardBody>Fixed width card</CardBody>\n * </Card>\n *\n * // Card with image and content\n * <Card hoverable width=\"full\">\n *   <CardFigure>\n *     <img src=\"...\" alt=\"...\" />\n *   </CardFigure>\n *   <CardBody>\n *     <CardTitle>Product Name</CardTitle>\n *     <Text>Description</Text>\n *   </CardBody>\n * </Card>\n * ```\n */\nfunction Card({\n  children,\n  className = '',\n  variant = 'neutral',\n  size = 'md',\n  width = 'auto',\n  hoverable = false,\n  imagePosition = 'top',\n  centered = false,\n  compact = false,\n  marginX: mX = 'none',\n  marginY: mY = 'none',\n  ...props\n}: Readonly<CardProps>) {\n  const variantClasses = {\n    neutral: 'bg-card text-card-foreground border border-border shadow-md',\n    bordered: 'bg-card text-card-foreground border-2 border-border',\n    ghost: 'bg-transparent',\n    filled: 'bg-muted text-foreground'\n  };\n\n  const widthClasses = {\n    auto: size ? cardSizes[size] : 'max-w-full',\n    full: 'w-full',\n    fit: 'w-fit'\n  };\n\n  const marginXClass = mX !== 'none' ? marginX[mX] : '';\n  const marginYClass = mY !== 'none' ? marginY[mY] : '';\n\n  const hoverClasses = hoverable\n    ? 'transition-all duration-300 hover:shadow-xl hover:-translate-y-1'\n    : 'transition-shadow duration-200';\n\n  const imagePositionClasses = {\n    top: 'flex-col',\n    bottom: 'flex-col-reverse',\n    side: 'flex-row',\n    overlay: 'relative'\n  };\n\n  const centerClasses = centered ? 'text-center items-center' : '';\n\n  return (\n    <div\n      className={`\n        rounded-2xl\n        overflow-hidden\n        ${variantClasses[variant]}\n        ${widthClasses[width]}\n        ${hoverClasses}\n        ${imagePositionClasses[imagePosition]}\n        ${centerClasses}\n        ${compact ? 'p-4' : ''}\n        ${imagePosition === 'side' ? 'flex' : 'flex'}\n        ${marginXClass}\n        ${marginYClass}\n        ${className}\n      `\n        .trim()\n        .replace(/\\s+/g, ' ')}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nCard.displayName = 'Card';\n\nexport default Card;\n"],"names":[],"mappings":";;AAsEA,SAAS,KAAK;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS,KAAK;AAAA,EACd,SAAS,KAAK;AAAA,EACd,GAAG;AACL,GAAwB;AACtB,QAAM,iBAAiB;AAAA,IACrB,SAAS;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAGV,QAAM,eAAe;AAAA,IACnB,MAAM,OAAO,UAAU,IAAI,IAAI;AAAA,IAC/B,MAAM;AAAA,IACN,KAAK;AAAA,EAAA;AAGP,QAAM,eAAe,OAAO,SAAS,QAAQ,EAAE,IAAI;AACnD,QAAM,eAAe,OAAO,SAAS,QAAQ,EAAE,IAAI;AAEnD,QAAM,eAAe,YACjB,qEACA;AAEJ,QAAM,uBAAuB;AAAA,IAC3B,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAGX,QAAM,gBAAgB,WAAW,6BAA6B;AAE9D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA;AAAA;AAAA,UAGP,eAAe,OAAO,CAAC;AAAA,UACvB,aAAa,KAAK,CAAC;AAAA,UACnB,YAAY;AAAA,UACZ,qBAAqB,aAAa,CAAC;AAAA,UACnC,aAAa;AAAA,UACb,UAAU,QAAQ,EAAE;AAAA,UACpB,kBAAkB,SAAS,SAAS,MAAM;AAAA,UAC1C,YAAY;AAAA,UACZ,YAAY;AAAA,UACZ,SAAS;AAAA,QAEV,KAAA,EACA,QAAQ,QAAQ,GAAG;AAAA,MACrB,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,KAAK,cAAc;"}

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

@@ -0,0 +1,15 @@
+export { default } from './card';
+export type { CardProps } from './card';
+export { default as CardHeader } from './card-header';
+export type { CardHeaderProps } from './card-header';
+export { default as CardBody } from './card-body';
+export type { CardBodyProps } from './card-body';
+export { default as CardFooter } from './card-footer';
+export type { CardFooterProps } from './card-footer';
+export { default as CardTitle } from './card-title';
+export type { CardTitleProps } from './card-title';
+export { default as CardActions } from './card-actions';
+export type { CardActionsProps } from './card-actions';
+export { default as CardFigure } from './card-figure';
+export type { CardFigureProps } from './card-figure';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC;AACtD,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC;AACtD,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC;AACtD,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}

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

@@ -0,0 +1,33 @@
+import { default as React } from 'react';
+import { SectionPaddingSize, MarginXSize } from '../../../theme/size-tokens';
+export type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+export type ContainerProps = {
+    /** Container content */
+    children: React.ReactNode;
+    /** Additional CSS classes applied to the container */
+    className?: string;
+    /** Maximum content width - controls responsive centering breakpoint */
+    size?: ContainerSize;
+    /** Horizontal page margins (gutters) - applied to inner container */
+    marginX?: MarginXSize;
+    /** Vertical page padding */
+    paddingY?: 'none' | SectionPaddingSize;
+    /** HTML id attribute for the container element */
+    id?: string;
+    /** Horizontal alignment of the container within its parent */
+    align?: 'start' | 'center' | 'end';
+};
+/**
+ * Page-level layout wrapper for content centering and spacing
+ *
+ * Container is the outermost layout component that wraps page content.
+ * Use it to control max-width, horizontal margins (gutters), and vertical padding.
+ *
+ * For arranging content inside Container, use Stack, Grid, or other layout primitives.
+ */
+declare function Container({ children, className, size, marginX, paddingY, align, id }: Readonly<ContainerProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace Container {
+    var displayName: string;
+}
+export default Container;
+//# sourceMappingURL=container.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/container/container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,WAAW,EACjB,MAAM,4BAA4B,CAAC;AAEpC,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;AAEvE,MAAM,MAAM,cAAc,GAAG;IAC3B,wBAAwB;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uEAAuE;IACvE,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,qEAAqE;IACrE,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,GAAG,kBAAkB,CAAC;IACvC,kDAAkD;IAClD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,8DAA8D;IAC9D,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACpC,CAAC;AAiBF;;;;;;;GAOG;AACH,iBAAS,SAAS,CAAC,EACjB,QAAQ,EACR,SAAc,EACd,IAAW,EACX,OAAgB,EAChB,QAAiB,EACjB,KAAgB,EAChB,EAAE,EACH,EAAE,QAAQ,CAAC,cAAc,CAAC,2CAgB1B;kBAxBQ,SAAS;;;AA4BlB,eAAe,SAAS,CAAC"}

package/dist/components/layout/container/container.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { marginX, sectionPadding } from "../../../theme/size-tokens.js";
+const containerSizes = {
+  sm: "max-w-screen-sm",
+  md: "max-w-screen-md",
+  lg: "max-w-screen-lg",
+  xl: "max-w-screen-xl",
+  "2xl": "max-w-screen-2xl",
+  full: "max-w-full"
+};
+const alignClasses = {
+  start: "mr-auto",
+  center: "mx-auto",
+  end: "ml-auto"
+};
+function Container({
+  children,
+  className = "",
+  size = "lg",
+  marginX: marginX$1 = "none",
+  paddingY = "none",
+  align = "center",
+  id
+}) {
+  const sizeClass = containerSizes[size];
+  const horizontalSpacingClass = marginX$1 !== "none" ? marginX[marginX$1] : "";
+  const paddingYClass = paddingY === "none" ? "" : sectionPadding[paddingY];
+  const outerClasses = ["w-auto", sizeClass, alignClasses[align]].filter(Boolean).join(" ");
+  const innerClasses = [horizontalSpacingClass, paddingYClass, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: outerClasses, id, children: /* @__PURE__ */ jsx("div", { className: innerClasses, children }) });
+}
+Container.displayName = "Container";
+export {
+  Container as default
+};
+//# sourceMappingURL=container.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"container.js","sources":["../../../../src/components/layout/container/container.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  sectionPadding,\n  type SectionPaddingSize,\n  marginX as marginXTokens,\n  type MarginXSize\n} from '../../../theme/size-tokens';\n\nexport type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';\n\nexport type ContainerProps = {\n  /** Container content */\n  children: React.ReactNode;\n  /** Additional CSS classes applied to the container */\n  className?: string;\n  /** Maximum content width - controls responsive centering breakpoint */\n  size?: ContainerSize;\n  /** Horizontal page margins (gutters) - applied to inner container */\n  marginX?: MarginXSize;\n  /** Vertical page padding */\n  paddingY?: 'none' | SectionPaddingSize;\n  /** HTML id attribute for the container element */\n  id?: string;\n  /** Horizontal alignment of the container within its parent */\n  align?: 'start' | 'center' | 'end';\n};\n\nconst containerSizes: Record<ContainerSize, string> = {\n  sm: 'max-w-screen-sm',\n  md: 'max-w-screen-md',\n  lg: 'max-w-screen-lg',\n  xl: 'max-w-screen-xl',\n  '2xl': 'max-w-screen-2xl',\n  full: 'max-w-full'\n};\n\nconst alignClasses = {\n  start: 'mr-auto',\n  center: 'mx-auto',\n  end: 'ml-auto'\n};\n\n/**\n * Page-level layout wrapper for content centering and spacing\n *\n * Container is the outermost layout component that wraps page content.\n * Use it to control max-width, horizontal margins (gutters), and vertical padding.\n *\n * For arranging content inside Container, use Stack, Grid, or other layout primitives.\n */\nfunction Container({\n  children,\n  className = '',\n  size = 'lg',\n  marginX = 'none',\n  paddingY = 'none',\n  align = 'center',\n  id\n}: Readonly<ContainerProps>) {\n  const sizeClass = containerSizes[size];\n  const horizontalSpacingClass = marginX !== 'none' ? marginXTokens[marginX] : '';\n  const paddingYClass = paddingY === 'none' ? '' : sectionPadding[paddingY];\n\n  // Outer container controls max-width and horizontal alignment via the `align` prop\n  const outerClasses = ['w-auto', sizeClass, alignClasses[align]].filter(Boolean).join(' ');\n\n  // Inner wrapper applies horizontal spacing (via marginX) and vertical spacing (via paddingY)\n  const innerClasses = [horizontalSpacingClass, paddingYClass, className].filter(Boolean).join(' ');\n\n  return (\n    <div className={outerClasses} id={id}>\n      <div className={innerClasses}>{children}</div>\n    </div>\n  );\n}\n\nContainer.displayName = 'Container';\n\nexport default Container;\n"],"names":["marginX","marginXTokens"],"mappings":";;AA2BA,MAAM,iBAAgD;AAAA,EACpD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,MAAM;AACR;AAEA,MAAM,eAAe;AAAA,EACnB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AACP;AAUA,SAAS,UAAU;AAAA,EACjB;AAAA,EACA,YAAY;AAAA,EACZ,OAAO;AAAA,EAAA,SACPA,YAAU;AAAA,EACV,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AACF,GAA6B;AAC3B,QAAM,YAAY,eAAe,IAAI;AACrC,QAAM,yBAAyBA,cAAY,SAASC,QAAcD,SAAO,IAAI;AAC7E,QAAM,gBAAgB,aAAa,SAAS,KAAK,eAAe,QAAQ;AAGxE,QAAM,eAAe,CAAC,UAAU,WAAW,aAAa,KAAK,CAAC,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAGxF,QAAM,eAAe,CAAC,wBAAwB,eAAe,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEhG,SACE,oBAAC,OAAA,EAAI,WAAW,cAAc,IAC5B,8BAAC,OAAA,EAAI,WAAW,cAAe,SAAA,CAAS,EAAA,CAC1C;AAEJ;AAEA,UAAU,cAAc;"}

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

@@ -0,0 +1,3 @@
+export { default } from './container';
+export type { ContainerProps, ContainerSize } from './container';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,15 @@
+export type DividerProps = {
+    /** Direction of the divider line */
+    orientation?: 'horizontal' | 'vertical';
+    /** Additional CSS classes applied to the divider */
+    className?: string;
+} & React.HTMLAttributes<HTMLHRElement>;
+/**
+ * Divider - Visual section break
+ */
+declare function Divider({ orientation, className, ...props }: Readonly<DividerProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace Divider {
+    var displayName: string;
+}
+export default Divider;
+//# sourceMappingURL=divider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/divider/divider.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG;IACzB,oCAAoC;IACpC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;AAExC;;GAEG;AACH,iBAAS,OAAO,CAAC,EAAE,WAA0B,EAAE,SAAc,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,CAAC,YAAY,CAAC,2CAMhG;kBANQ,OAAO;;;AAUhB,eAAe,OAAO,CAAC"}

package/dist/components/layout/divider/divider.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+function Divider({ orientation = "horizontal", className = "", ...props }) {
+  const orientationClasses = orientation === "horizontal" ? "w-full h-px" : "h-full w-px";
+  return /* @__PURE__ */ jsx("hr", { className: `border-0 bg-border ${orientationClasses} ${className}`, "aria-orientation": orientation, ...props });
+}
+Divider.displayName = "Divider";
+export {
+  Divider as default
+};
+//# sourceMappingURL=divider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"divider.js","sources":["../../../../src/components/layout/divider/divider.tsx"],"sourcesContent":["export type DividerProps = {\n  /** Direction of the divider line */\n  orientation?: 'horizontal' | 'vertical';\n  /** Additional CSS classes applied to the divider */\n  className?: string;\n} & React.HTMLAttributes<HTMLHRElement>;\n\n/**\n * Divider - Visual section break\n */\nfunction Divider({ orientation = 'horizontal', className = '', ...props }: Readonly<DividerProps>) {\n  const orientationClasses = orientation === 'horizontal' ? 'w-full h-px' : 'h-full w-px';\n\n  return (\n    <hr className={`border-0 bg-border ${orientationClasses} ${className}`} aria-orientation={orientation} {...props} />\n  );\n}\n\nDivider.displayName = 'Divider';\n\nexport default Divider;\n"],"names":[],"mappings":";AAUA,SAAS,QAAQ,EAAE,cAAc,cAAc,YAAY,IAAI,GAAG,SAAiC;AACjG,QAAM,qBAAqB,gBAAgB,eAAe,gBAAgB;AAE1E,SACE,oBAAC,MAAA,EAAG,WAAW,sBAAsB,kBAAkB,IAAI,SAAS,IAAI,oBAAkB,aAAc,GAAG,MAAA,CAAO;AAEtH;AAEA,QAAQ,cAAc;"}

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

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

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

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

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

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+import { OverlaySize } from '../../../theme/size-tokens';
+export type DrawerProps = {
+    /** Controls drawer visibility */
+    isOpen: boolean;
+    /** Callback fired when drawer should close */
+    onClose: () => void;
+    /** Drawer content */
+    children: ReactNode;
+    /** Side of the screen from which drawer slides in */
+    position?: 'left' | 'right' | 'top' | 'bottom';
+    /** Additional CSS classes applied to the drawer panel */
+    className?: string;
+    /** Optional header title displayed at the top of the drawer */
+    title?: string;
+    /** Size - uses unified overlay sizes */
+    size?: OverlaySize;
+    /** Close drawer when Escape key is pressed */
+    closeOnEscape?: boolean;
+    /** Close drawer when clicking outside the panel (on backdrop) */
+    closeOnOutside?: boolean;
+    /** Unmount drawer from DOM after exit animation completes */
+    unmountOnExit?: boolean;
+    /** Disable slide animation for instant open/close */
+    noAnimation?: boolean;
+};
+/**
+ * Drawer - Simple, reliable slide-in panel
+ */
+declare function Drawer({ isOpen, onClose, children, position, className, title, size, closeOnEscape, closeOnOutside, unmountOnExit, noAnimation }: Readonly<DrawerProps>): import('react').ReactPortal | null;
+declare namespace Drawer {
+    var displayName: string;
+}
+export default Drawer;
+//# sourceMappingURL=drawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/drawer/drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlC,OAAO,EAAgB,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAGvE,MAAM,MAAM,WAAW,GAAG;IACxB,iCAAiC;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,8CAA8C;IAC9C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,qBAAqB;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IAC/C,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qDAAqD;IACrD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF;;GAEG;AACH,iBAAS,MAAM,CAAC,EACd,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAkB,EAClB,SAAc,EACd,KAAK,EACL,IAAW,EACX,aAAoB,EACpB,cAAqB,EACrB,aAAoB,EACpB,WAAmB,EACpB,EAAE,QAAQ,CAAC,WAAW,CAAC,sCA2FvB;kBAvGQ,MAAM;;;AA2Gf,eAAe,MAAM,CAAC"}

package/dist/components/layout/drawer/drawer.js

@@ -0,0 +1,108 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import useOverlay from "../../feedback/overlay/useOverlay.js";
+import { overlaySizes } from "../../../theme/size-tokens.js";
+import Button from "../../forms/button/button.js";
+function Drawer({
+  isOpen,
+  onClose,
+  children,
+  position = "right",
+  className = "",
+  title,
+  size = "md",
+  closeOnEscape = true,
+  closeOnOutside = true,
+  unmountOnExit = true,
+  noAnimation = false
+}) {
+  const { phase, shouldRender, ref, getPhaseClass } = useOverlay({
+    isOpen,
+    lockScroll: true,
+    restoreFocus: true,
+    focusTrap: true,
+    unmountOnExit,
+    exitDuration: noAnimation ? 0 : 250,
+    animationFrames: noAnimation ? 0 : 0
+  });
+  if (!shouldRender) return null;
+  const sizeClasses = overlaySizes[size];
+  const edgeClasses = {
+    left: "left-0 top-0 bottom-0",
+    right: "right-0 top-0 bottom-0",
+    top: "top-0 left-0 right-0 h-96",
+    bottom: "bottom-0 left-0 right-0 h-96"
+  };
+  const closedTransform = {
+    left: "-translate-x-full",
+    right: "translate-x-full",
+    top: "-translate-y-full",
+    bottom: "translate-y-full"
+  };
+  const openTransform = "translate-x-0 translate-y-0";
+  const panelTransform = noAnimation ? "" : getPhaseClass(openTransform, closedTransform[position]);
+  const overlayOpacity = noAnimation ? "opacity-100" : getPhaseClass("opacity-100", "opacity-0");
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape" && closeOnEscape) {
+      e.stopPropagation();
+      onClose();
+    }
+  };
+  const panel = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: `fixed inset-0 z-999 bg-black/50 backdrop-blur-sm transition-opacity duration-250 ease-in-out ${overlayOpacity} border-0 p-0 m-0`,
+        "aria-label": closeOnOutside ? "Close overlay" : void 0,
+        "aria-hidden": !closeOnOutside,
+        tabIndex: closeOnOutside ? 0 : -1,
+        onClick: () => closeOnOutside && onClose(),
+        onKeyDown: (e) => {
+          if (!closeOnOutside) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onClose();
+          }
+        },
+        "data-phase": phase
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": title || "Drawer",
+        tabIndex: -1,
+        "data-phase": phase,
+        "data-position": position,
+        className: `fixed ${edgeClasses[position]} ${position === "left" || position === "right" ? sizeClasses : ""} bg-card text-card-foreground shadow-2xl z-1000 flex flex-col outline-none ${panelTransform} ${noAnimation ? "" : "transition-transform duration-250 ease-out will-change-transform"} ${className}`,
+        onKeyDown: handleKeyDown,
+        children: [
+          title && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-5 py-4 border-b border-border/60 bg-card/95 backdrop-blur-sm", children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold tracking-tight", children: title }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                ariaLabel: "Close drawer",
+                style: "ghost",
+                icon: "IconX",
+                onClick: onClose,
+                "aria-label": "Close drawer"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-5 flex flex-col gap-4", children })
+        ]
+      }
+    )
+  ] });
+  return createPortal(panel, document.body);
+}
+Drawer.displayName = "Drawer";
+export {
+  Drawer as default
+};
+//# sourceMappingURL=drawer.js.map