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

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

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.js","sources":["../../../../src/components/layout/drawer/drawer.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport useOverlay from '../../feedback/overlay/useOverlay';\n\nimport { overlaySizes, OverlaySize } from '../../../theme/size-tokens';\nimport IconButton from '../../forms/button/button';\n\nexport type DrawerProps = {\n  /** Controls drawer visibility */\n  isOpen: boolean;\n  /** Callback fired when drawer should close */\n  onClose: () => void;\n  /** Drawer content */\n  children: ReactNode;\n  /** Side of the screen from which drawer slides in */\n  position?: 'left' | 'right' | 'top' | 'bottom';\n  /** Additional CSS classes applied to the drawer panel */\n  className?: string;\n  /** Optional header title displayed at the top of the drawer */\n  title?: string;\n  /** Size - uses unified overlay sizes */\n  size?: OverlaySize;\n  /** Close drawer when Escape key is pressed */\n  closeOnEscape?: boolean;\n  /** Close drawer when clicking outside the panel (on backdrop) */\n  closeOnOutside?: boolean;\n  /** Unmount drawer from DOM after exit animation completes */\n  unmountOnExit?: boolean;\n  /** Disable slide animation for instant open/close */\n  noAnimation?: boolean;\n};\n\n/**\n * Drawer - Simple, reliable slide-in panel\n */\nfunction Drawer({\n  isOpen,\n  onClose,\n  children,\n  position = 'right',\n  className = '',\n  title,\n  size = 'md',\n  closeOnEscape = true,\n  closeOnOutside = true,\n  unmountOnExit = true,\n  noAnimation = false\n}: Readonly<DrawerProps>) {\n  const { phase, shouldRender, ref, getPhaseClass } = useOverlay<HTMLDivElement>({\n    isOpen,\n    lockScroll: true,\n    restoreFocus: true,\n    focusTrap: true,\n    unmountOnExit,\n    exitDuration: noAnimation ? 0 : 250,\n    animationFrames: noAnimation ? 0 : 0\n  });\n\n  // If closed & unmounting, skip render\n  if (!shouldRender) return null;\n\n  const sizeClasses = overlaySizes[size];\n\n  const edgeClasses: Record<string, string> = {\n    left: 'left-0 top-0 bottom-0',\n    right: 'right-0 top-0 bottom-0',\n    top: 'top-0 left-0 right-0 h-96',\n    bottom: 'bottom-0 left-0 right-0 h-96'\n  };\n\n  const closedTransform: Record<string, string> = {\n    left: '-translate-x-full',\n    right: 'translate-x-full',\n    top: '-translate-y-full',\n    bottom: 'translate-y-full'\n  };\n\n  const openTransform = 'translate-x-0 translate-y-0';\n  const panelTransform = noAnimation ? '' : getPhaseClass(openTransform, closedTransform[position]);\n  const overlayOpacity = noAnimation ? 'opacity-100' : getPhaseClass('opacity-100', 'opacity-0');\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Escape' && closeOnEscape) {\n      e.stopPropagation();\n      onClose();\n    }\n  };\n\n  const panel = (\n    <>\n      {/* Overlay */}\n      <button\n        type=\"button\"\n        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`}\n        aria-label={closeOnOutside ? 'Close overlay' : undefined}\n        aria-hidden={!closeOnOutside}\n        tabIndex={closeOnOutside ? 0 : -1}\n        onClick={() => closeOnOutside && onClose()}\n        onKeyDown={(e) => {\n          if (!closeOnOutside) return;\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            onClose();\n          }\n        }}\n        data-phase={phase}\n      />\n      {/* Panel */}\n      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- This <div> is used as a dialog with role=\"dialog\" and appropriate ARIA attributes. Keyboard interactions are handled for accessibility compliance. */}\n      <div\n        ref={ref}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={title || 'Drawer'}\n        tabIndex={-1}\n        data-phase={phase}\n        data-position={position}\n        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}`}\n        onKeyDown={handleKeyDown}\n      >\n        {title && (\n          <div className=\"flex items-center justify-between px-5 py-4 border-b border-border/60 bg-card/95 backdrop-blur-sm\">\n            <h2 className=\"text-base font-semibold tracking-tight\">{title}</h2>\n            <IconButton\n              ariaLabel=\"Close drawer\"\n              style=\"ghost\"\n              icon=\"IconX\"\n              onClick={onClose}\n              aria-label=\"Close drawer\"\n            />\n          </div>\n        )}\n        <div className=\"flex-1 overflow-y-auto p-5 flex flex-col gap-4\">{children}</div>\n      </div>\n    </>\n  );\n\n  return createPortal(panel, document.body);\n}\n\nDrawer.displayName = 'Drawer';\n\nexport default Drawer;\n"],"names":["IconButton"],"mappings":";;;;;AAmCA,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,YAAY;AAAA,EACZ;AAAA,EACA,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,cAAc;AAChB,GAA0B;AACxB,QAAM,EAAE,OAAO,cAAc,KAAK,cAAA,IAAkB,WAA2B;AAAA,IAC7E;AAAA,IACA,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,WAAW;AAAA,IACX;AAAA,IACA,cAAc,cAAc,IAAI;AAAA,IAChC,iBAAiB,cAAc,IAAI;AAAA,EAAA,CACpC;AAGD,MAAI,CAAC,aAAc,QAAO;AAE1B,QAAM,cAAc,aAAa,IAAI;AAErC,QAAM,cAAsC;AAAA,IAC1C,MAAM;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,IACL,QAAQ;AAAA,EAAA;AAGV,QAAM,kBAA0C;AAAA,IAC9C,MAAM;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,IACL,QAAQ;AAAA,EAAA;AAGV,QAAM,gBAAgB;AACtB,QAAM,iBAAiB,cAAc,KAAK,cAAc,eAAe,gBAAgB,QAAQ,CAAC;AAChG,QAAM,iBAAiB,cAAc,gBAAgB,cAAc,eAAe,WAAW;AAE7F,QAAM,gBAAgB,CAAC,MAA2B;AAChD,QAAI,EAAE,QAAQ,YAAY,eAAe;AACvC,QAAE,gBAAA;AACF,cAAA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,QACJ,qBAAA,UAAA,EAEE,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,gGAAgG,cAAc;AAAA,QACzH,cAAY,iBAAiB,kBAAkB;AAAA,QAC/C,eAAa,CAAC;AAAA,QACd,UAAU,iBAAiB,IAAI;AAAA,QAC/B,SAAS,MAAM,kBAAkB,QAAA;AAAA,QACjC,WAAW,CAAC,MAAM;AAChB,cAAI,CAAC,eAAgB;AACrB,cAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,cAAE,eAAA;AACF,oBAAA;AAAA,UACF;AAAA,QACF;AAAA,QACA,cAAY;AAAA,MAAA;AAAA,IAAA;AAAA,IAId;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QACX,cAAY,SAAS;AAAA,QACrB,UAAU;AAAA,QACV,cAAY;AAAA,QACZ,iBAAe;AAAA,QACf,WAAW,SAAS,YAAY,QAAQ,CAAC,IAAI,aAAa,UAAU,aAAa,UAAU,cAAc,EAAE,8EAA8E,cAAc,IAAI,cAAc,KAAK,kEAAkE,IAAI,SAAS;AAAA,QAC7S,WAAW;AAAA,QAEV,UAAA;AAAA,UAAA,SACC,qBAAC,OAAA,EAAI,WAAU,qGACb,UAAA;AAAA,YAAA,oBAAC,MAAA,EAAG,WAAU,0CAA0C,UAAA,OAAM;AAAA,YAC9D;AAAA,cAACA;AAAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAM;AAAA,gBACN,MAAK;AAAA,gBACL,SAAS;AAAA,gBACT,cAAW;AAAA,cAAA;AAAA,YAAA;AAAA,UACb,GACF;AAAA,UAEF,oBAAC,OAAA,EAAI,WAAU,kDAAkD,SAAA,CAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAC5E,GACF;AAGF,SAAO,aAAa,OAAO,SAAS,IAAI;AAC1C;AAEA,OAAO,cAAc;"}

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

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

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

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

package/dist/components/layout/feature-section/feature-section.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+export type Feature = {
+    /** Icon component to display for the feature */
+    icon: ReactNode;
+    /** Feature title text */
+    title: string;
+    /** Feature description text */
+    description: string;
+};
+export type FeatureSectionProps = {
+    /** Optional section title displayed above features */
+    title?: string;
+    /** Optional section description displayed below title */
+    description?: string;
+    /** Array of feature objects to display in the grid */
+    features: Feature[];
+    /** Maximum number of columns in the feature grid */
+    columns?: 2 | 3 | 4;
+    /** Whether feature content is centered horizontally */
+    centered?: boolean;
+    /** Additional CSS classes applied to the section */
+    className?: string;
+};
+/**
+ * FeatureSection Component - Features grid
+ * - Display features with icons in a responsive grid
+ * - Configurable column count
+ * - Optional section title and description
+ * - Icon-first design pattern
+ */
+declare function FeatureSection({ title, description, features, columns, centered, className }: Readonly<FeatureSectionProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace FeatureSection {
+    var displayName: string;
+}
+export default FeatureSection;
+//# sourceMappingURL=feature-section.d.ts.map

package/dist/components/layout/feature-section/feature-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"feature-section.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/feature-section/feature-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQlC,MAAM,MAAM,OAAO,GAAG;IACpB,gDAAgD;IAChD,IAAI,EAAE,SAAS,CAAC;IAChB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sDAAsD;IACtD,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,oDAAoD;IACpD,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;GAMG;AACH,iBAAS,cAAc,CAAC,EACtB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,OAAW,EACX,QAAe,EACf,SAAc,EACf,EAAE,QAAQ,CAAC,mBAAmB,CAAC,2CAqC/B;kBA5CQ,cAAc;;;AAgDvB,eAAe,cAAc,CAAC"}

package/dist/components/layout/feature-section/feature-section.js

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Container from "../container/container.js";
+import Grid from "../grid/grid.js";
+import Heading from "../../typography/heading/heading.js";
+import Text from "../../typography/text/text.js";
+import Stack from "../stack/stack.js";
+function FeatureSection({
+  title,
+  description,
+  features,
+  columns = 3,
+  centered = true,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx("section", { className: `py-16 md:py-20 ${className}`, children: /* @__PURE__ */ jsxs(Container, { marginX: "sm", children: [
+    (title || description) && /* @__PURE__ */ jsxs(Stack, { spacing: "md", className: `mb-12 md:mb-16 ${centered ? "text-center max-w-3xl mx-auto" : "max-w-3xl"}`, children: [
+      title && /* @__PURE__ */ jsx(Heading, { level: 2, hasMargin: true, children: title }),
+      description && /* @__PURE__ */ jsx(Text, { className: "text-lg md:text-xl", children: description })
+    ] }),
+    /* @__PURE__ */ jsx(Grid, { itemSize: "md", maxCols: columns, gap: "lg", children: features.map((feature, index) => /* @__PURE__ */ jsxs("article", { className: centered ? "text-center" : "", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `inline-flex items-center justify-center w-12 h-12 md:w-16 md:h-16 rounded-lg md:rounded-xl bg-primary/10 text-primary mb-4 md:mb-6 ${centered ? "" : "mr-auto"}`,
+          children: feature.icon
+        }
+      ),
+      /* @__PURE__ */ jsx(Heading, { level: 3, className: "text-xl font-semibold mb-2 md:mb-3", children: feature.title }),
+      /* @__PURE__ */ jsx(Text, { variant: "muted", className: "text-sm md:text-base", children: feature.description })
+    ] }, index)) })
+  ] }) });
+}
+FeatureSection.displayName = "FeatureSection";
+export {
+  FeatureSection as default
+};
+//# sourceMappingURL=feature-section.js.map

package/dist/components/layout/feature-section/feature-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"feature-section.js","sources":["../../../../src/components/layout/feature-section/feature-section.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport Container from '../container/container';\nimport Grid from '../grid/grid';\nimport Heading from '../../typography/heading/heading';\nimport Text from '../../typography/text/text';\nimport Stack from '../stack/stack';\n\nexport type Feature = {\n  /** Icon component to display for the feature */\n  icon: ReactNode;\n  /** Feature title text */\n  title: string;\n  /** Feature description text */\n  description: string;\n};\n\nexport type FeatureSectionProps = {\n  /** Optional section title displayed above features */\n  title?: string;\n  /** Optional section description displayed below title */\n  description?: string;\n  /** Array of feature objects to display in the grid */\n  features: Feature[];\n  /** Maximum number of columns in the feature grid */\n  columns?: 2 | 3 | 4;\n  /** Whether feature content is centered horizontally */\n  centered?: boolean;\n  /** Additional CSS classes applied to the section */\n  className?: string;\n};\n\n/**\n * FeatureSection Component - Features grid\n * - Display features with icons in a responsive grid\n * - Configurable column count\n * - Optional section title and description\n * - Icon-first design pattern\n */\nfunction FeatureSection({\n  title,\n  description,\n  features,\n  columns = 3,\n  centered = true,\n  className = ''\n}: Readonly<FeatureSectionProps>) {\n  return (\n    <section className={`py-16 md:py-20 ${className}`}>\n      <Container marginX=\"sm\">\n        {(title || description) && (\n          <Stack spacing=\"md\" className={`mb-12 md:mb-16 ${centered ? 'text-center max-w-3xl mx-auto' : 'max-w-3xl'}`}>\n            {title && (\n              <Heading level={2} hasMargin>\n                {title}\n              </Heading>\n            )}\n            {description && <Text className=\"text-lg md:text-xl\">{description}</Text>}\n          </Stack>\n        )}\n\n        <Grid itemSize=\"md\" maxCols={columns} gap=\"lg\">\n          {features.map((feature, index) => (\n            <article key={index} className={centered ? 'text-center' : ''}>\n              <span\n                className={`inline-flex items-center justify-center w-12 h-12 md:w-16 md:h-16 rounded-lg md:rounded-xl bg-primary/10 text-primary mb-4 md:mb-6 ${\n                  centered ? '' : 'mr-auto'\n                }`}\n              >\n                {feature.icon}\n              </span>\n              <Heading level={3} className=\"text-xl font-semibold mb-2 md:mb-3\">\n                {feature.title}\n              </Heading>\n              <Text variant=\"muted\" className=\"text-sm md:text-base\">\n                {feature.description}\n              </Text>\n            </article>\n          ))}\n        </Grid>\n      </Container>\n    </section>\n  );\n}\n\nFeatureSection.displayName = 'FeatureSection';\n\nexport default FeatureSection;\n"],"names":[],"mappings":";;;;;;AAuCA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,WAAW;AAAA,EACX,YAAY;AACd,GAAkC;AAChC,SACE,oBAAC,aAAQ,WAAW,kBAAkB,SAAS,IAC7C,UAAA,qBAAC,WAAA,EAAU,SAAQ,MACf,UAAA;AAAA,KAAA,SAAS,gBACT,qBAAC,OAAA,EAAM,SAAQ,MAAK,WAAW,kBAAkB,WAAW,kCAAkC,WAAW,IACtG,UAAA;AAAA,MAAA,6BACE,SAAA,EAAQ,OAAO,GAAG,WAAS,MACzB,UAAA,OACH;AAAA,MAED,eAAe,oBAAC,MAAA,EAAK,WAAU,sBAAsB,UAAA,YAAA,CAAY;AAAA,IAAA,GACpE;AAAA,wBAGD,MAAA,EAAK,UAAS,MAAK,SAAS,SAAS,KAAI,MACvC,UAAA,SAAS,IAAI,CAAC,SAAS,UACtB,qBAAC,aAAoB,WAAW,WAAW,gBAAgB,IACzD,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,sIACT,WAAW,KAAK,SAClB;AAAA,UAEC,UAAA,QAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,0BAEV,SAAA,EAAQ,OAAO,GAAG,WAAU,sCAC1B,kBAAQ,OACX;AAAA,0BACC,MAAA,EAAK,SAAQ,SAAQ,WAAU,wBAC7B,kBAAQ,YAAA,CACX;AAAA,IAAA,EAAA,GAbY,KAcd,CACD,EAAA,CACH;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;AAEA,eAAe,cAAc;"}

package/dist/components/layout/feature-section/index.d.ts

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

package/dist/components/layout/feature-section/index.d.ts.map

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

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

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import { MarginXSize } from '../../../theme/size-tokens';
+export type FooterSection = {
+    /** Section heading text */
+    title: string;
+    /** Array of links with label, href, and optional external flag */
+    links: Array<{
+        label: string;
+        href: string;
+        external?: boolean;
+    }>;
+};
+export type FooterProps = {
+    /** Array of footer sections containing grouped links */
+    sections?: FooterSection[];
+    /** Copyright text displayed at the bottom */
+    copyright?: string;
+    /** Social media icons or links to display */
+    social?: ReactNode;
+    /** Additional CSS classes applied to the footer element */
+    className?: string;
+    /** Horizontal margin spacing using unified size system */
+    marginX?: MarginXSize;
+};
+/**
+ * Footer Component - Site footer
+ * - Multi-column link sections
+ * - Copyright text
+ * - Social media icons
+ * - Responsive layout
+ */
+declare function Footer({ sections, copyright, social, className, marginX }: Readonly<FooterProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace Footer {
+    var displayName: string;
+}
+export default Footer;
+//# sourceMappingURL=footer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"footer.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/footer/footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMlC,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,MAAM,MAAM,aAAa,GAAG;IAC1B,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,KAAK,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;CACnE,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;IAC3B,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF;;;;;;GAMG;AACH,iBAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,SAAc,EAAE,OAAc,EAAE,EAAE,QAAQ,CAAC,WAAW,CAAC,2CA0CrG;kBA1CQ,MAAM;;;AA8Cf,eAAe,MAAM,CAAC"}

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

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Container from "../container/container.js";
+import Grid from "../grid/grid.js";
+import Text from "../../typography/text/text.js";
+import Link from "../../typography/link/link.js";
+function Footer({ sections, copyright, social, className = "", marginX = "sm" }) {
+  return /* @__PURE__ */ jsx("footer", { className: `border-t border-border bg-muted/20 ${className}`, children: /* @__PURE__ */ jsxs(Container, { marginX, children: [
+    sections && sections.length > 0 && /* @__PURE__ */ jsx("div", { className: "py-12 md:py-16", children: /* @__PURE__ */ jsx(Grid, { itemSize: "xs", maxCols: 4, gap: "lg", children: sections.map((section, index) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h3", { className: "font-semibold text-foreground mb-4", children: section.title }),
+      /* @__PURE__ */ jsx("ul", { className: "space-y-3", children: section.links.map((link, linkIndex) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        Link,
+        {
+          href: link.href,
+          external: link.external,
+          className: "text-sm text-muted hover:text-foreground transition-colors",
+          children: link.label
+        }
+      ) }, linkIndex)) })
+    ] }, index)) }) }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `${sections && sections.length > 0 ? "border-t border-border" : ""} py-6 flex flex-col md:flex-row items-center justify-between gap-4`,
+        children: [
+          copyright && /* @__PURE__ */ jsx(Text, { hasMargin: true, variant: "muted", className: "text-sm text-center md:text-left", children: copyright }),
+          social && /* @__PURE__ */ jsx("div", { className: "flex items-center space-x-4", children: social })
+        ]
+      }
+    )
+  ] }) });
+}
+Footer.displayName = "Footer";
+export {
+  Footer as default
+};
+//# sourceMappingURL=footer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"footer.js","sources":["../../../../src/components/layout/footer/footer.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport Container from '../container/container';\nimport Grid from '../grid/grid';\nimport Text from '../../typography/text/text';\nimport Link from '../../typography/link/link';\nimport { MarginXSize } from '@/theme/size-tokens';\n\nexport type FooterSection = {\n  /** Section heading text */\n  title: string;\n  /** Array of links with label, href, and optional external flag */\n  links: Array<{ label: string; href: string; external?: boolean }>;\n};\n\nexport type FooterProps = {\n  /** Array of footer sections containing grouped links */\n  sections?: FooterSection[];\n  /** Copyright text displayed at the bottom */\n  copyright?: string;\n  /** Social media icons or links to display */\n  social?: ReactNode;\n  /** Additional CSS classes applied to the footer element */\n  className?: string;\n  /** Horizontal margin spacing using unified size system */\n  marginX?: MarginXSize;\n};\n\n/**\n * Footer Component - Site footer\n * - Multi-column link sections\n * - Copyright text\n * - Social media icons\n * - Responsive layout\n */\nfunction Footer({ sections, copyright, social, className = '', marginX = 'sm' }: Readonly<FooterProps>) {\n  return (\n    <footer className={`border-t border-border bg-muted/20 ${className}`}>\n      <Container marginX={marginX}>\n        {sections && sections.length > 0 && (\n          <div className=\"py-12 md:py-16\">\n            <Grid itemSize=\"xs\" maxCols={4} gap=\"lg\">\n              {sections.map((section, index) => (\n                <div key={index}>\n                  <h3 className=\"font-semibold text-foreground mb-4\">{section.title}</h3>\n                  <ul className=\"space-y-3\">\n                    {section.links.map((link, linkIndex) => (\n                      <li key={linkIndex}>\n                        <Link\n                          href={link.href}\n                          external={link.external}\n                          className=\"text-sm text-muted hover:text-foreground transition-colors\"\n                        >\n                          {link.label}\n                        </Link>\n                      </li>\n                    ))}\n                  </ul>\n                </div>\n              ))}\n            </Grid>\n          </div>\n        )}\n\n        <div\n          className={`${sections && sections.length > 0 ? 'border-t border-border' : ''} py-6 flex flex-col md:flex-row items-center justify-between gap-4`}\n        >\n          {copyright && (\n            <Text hasMargin variant=\"muted\" className=\"text-sm text-center md:text-left\">\n              {copyright}\n            </Text>\n          )}\n          {social && <div className=\"flex items-center space-x-4\">{social}</div>}\n        </div>\n      </Container>\n    </footer>\n  );\n}\n\nFooter.displayName = 'Footer';\n\nexport default Footer;\n"],"names":[],"mappings":";;;;;AAmCA,SAAS,OAAO,EAAE,UAAU,WAAW,QAAQ,YAAY,IAAI,UAAU,QAA+B;AACtG,SACE,oBAAC,YAAO,WAAW,sCAAsC,SAAS,IAChE,UAAA,qBAAC,aAAU,SACR,UAAA;AAAA,IAAA,YAAY,SAAS,SAAS,KAC7B,oBAAC,SAAI,WAAU,kBACb,8BAAC,MAAA,EAAK,UAAS,MAAK,SAAS,GAAG,KAAI,MACjC,UAAA,SAAS,IAAI,CAAC,SAAS,UACtB,qBAAC,OAAA,EACC,UAAA;AAAA,MAAA,oBAAC,MAAA,EAAG,WAAU,sCAAsC,UAAA,QAAQ,OAAM;AAAA,MAClE,oBAAC,MAAA,EAAG,WAAU,aACX,UAAA,QAAQ,MAAM,IAAI,CAAC,MAAM,cACxB,oBAAC,MAAA,EACC,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM,KAAK;AAAA,UACX,UAAU,KAAK;AAAA,UACf,WAAU;AAAA,UAET,UAAA,KAAK;AAAA,QAAA;AAAA,MAAA,EACR,GAPO,SAQT,CACD,EAAA,CACH;AAAA,IAAA,EAAA,GAdQ,KAeV,CACD,EAAA,CACH,GACF;AAAA,IAGF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,YAAY,SAAS,SAAS,IAAI,2BAA2B,EAAE;AAAA,QAE5E,UAAA;AAAA,UAAA,aACC,oBAAC,QAAK,WAAS,MAAC,SAAQ,SAAQ,WAAU,oCACvC,UAAA,UAAA,CACH;AAAA,UAED,UAAU,oBAAC,OAAA,EAAI,WAAU,+BAA+B,UAAA,OAAA,CAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAClE,EAAA,CACF,EAAA,CACF;AAEJ;AAEA,OAAO,cAAc;"}

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

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

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

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

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

@@ -0,0 +1,66 @@
+import { default as React } from 'react';
+export type GridProps = {
+    /** Grid items to be laid out in responsive columns */
+    children: React.ReactNode;
+    /** Additional CSS classes applied to the grid container */
+    className?: string;
+    /** Size of grid items (controls minimum width before wrapping) */
+    itemSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    /** Maximum number of columns (optional constraint) */
+    maxCols?: number;
+    /** Gap between grid items - uses unified size system */
+    gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    /** Responsive column configuration for different breakpoints */
+    responsive?: {
+        sm?: number;
+        md?: number;
+        lg?: number;
+        xl?: number;
+    };
+    /** Align items vertically */
+    alignItems?: 'start' | 'center' | 'end' | 'stretch';
+    /** Justify items horizontally */
+    justifyItems?: 'start' | 'center' | 'end' | 'stretch';
+};
+/**
+ * Grid - Responsive grid layout component
+ *
+ * Features:
+ * - Auto-responsive grid using CSS Grid auto-fit/auto-fill
+ * - Configurable minimum item width (items wrap when too narrow)
+ * - Optional responsive column overrides for specific breakpoints
+ * - Flexible gap spacing
+ * - Alignment controls
+ *
+ * @example
+ * ```tsx
+ * // Auto-responsive grid with md (250px) item size
+ * <Grid itemSize="md" gap="md">
+ *   <Card>Item 1</Card>
+ *   <Card>Item 2</Card>
+ *   <Card>Item 3</Card>
+ * </Grid>
+ *
+ * // Responsive grid with breakpoint overrides
+ * <Grid
+ *   itemSize="sm"
+ *   responsive={{ sm: 1, md: 2, lg: 3, xl: 4 }}
+ *   gap="lg"
+ * >
+ *   <Card>Item 1</Card>
+ *   <Card>Item 2</Card>
+ * </Grid>
+ *
+ * // Fixed max columns with auto-fit
+ * <Grid itemSize="xs" maxCols={4} gap="md">
+ *   <Card>Item 1</Card>
+ *   <Card>Item 2</Card>
+ * </Grid>
+ * ```
+ */
+declare function Grid({ children, className, itemSize, maxCols, gap, responsive, alignItems, justifyItems }: Readonly<GridProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace Grid {
+    var displayName: string;
+}
+export default Grid;
+//# sourceMappingURL=grid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/grid/grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,SAAS,GAAG;IACtB,sDAAsD;IACtD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACpD,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wDAAwD;IACxD,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACxD,gEAAgE;IAChE,UAAU,CAAC,EAAE;QACX,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;KACb,CAAC;IACF,6BAA6B;IAC7B,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACpD,iCAAiC;IACjC,YAAY,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;CACvD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,iBAAS,IAAI,CAAC,EACZ,QAAQ,EACR,SAAc,EACd,QAAe,EACf,OAAO,EACP,GAAU,EACV,UAAU,EACV,UAAsB,EACtB,YAAwB,EACzB,EAAE,QAAQ,CAAC,SAAS,CAAC,2CAmErB;kBA5EQ,IAAI;;;AAgFb,eAAe,IAAI,CAAC"}

package/dist/components/layout/grid/grid.js

@@ -0,0 +1,62 @@
+import { jsx } from "react/jsx-runtime";
+import { gapSizes } from "../../../theme/size-tokens.js";
+function Grid({
+  children,
+  className = "",
+  itemSize = "md",
+  maxCols,
+  gap = "md",
+  responsive,
+  alignItems = "stretch",
+  justifyItems = "stretch"
+}) {
+  const itemSizeValues = {
+    xs: "150px",
+    sm: "200px",
+    md: "250px",
+    lg: "300px",
+    xl: "350px",
+    "2xl": "400px"
+  };
+  const gapClass = gapSizes[gap];
+  const alignItemsClasses = {
+    start: "items-start",
+    center: "items-center",
+    end: "items-end",
+    stretch: "items-stretch"
+  };
+  const justifyItemsClasses = {
+    start: "justify-items-start",
+    center: "justify-items-center",
+    end: "justify-items-end",
+    stretch: "justify-items-stretch"
+  };
+  const responsiveClasses = responsive ? Object.entries(responsive).map(([breakpoint, cols]) => {
+    const breakpointPrefix = breakpoint === "sm" ? "sm:" : breakpoint === "md" ? "md:" : breakpoint === "lg" ? "lg:" : "xl:";
+    return `${breakpointPrefix}grid-cols-${cols}`;
+  }).join(" ") : "";
+  const minWidth = itemSizeValues[itemSize];
+  const gridStyle = !responsive ? {
+    gridTemplateColumns: maxCols ? `repeat(auto-fit, minmax(min(${minWidth}, 100%), 1fr))` : `repeat(auto-fill, minmax(min(${minWidth}, 100%), 1fr))`
+  } : void 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `
+        grid
+        ${!responsive ? "" : responsiveClasses}
+        ${gapClass}
+        ${alignItemsClasses[alignItems]}
+        ${justifyItemsClasses[justifyItems]}
+        ${className}
+      `.trim(),
+      style: gridStyle,
+      children
+    }
+  );
+}
+Grid.displayName = "Grid";
+export {
+  Grid as default
+};
+//# sourceMappingURL=grid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","sources":["../../../../src/components/layout/grid/grid.tsx"],"sourcesContent":["import React from 'react';\n\nimport { gapSizes } from '../../../theme/size-tokens';\n\nexport type GridProps = {\n  /** Grid items to be laid out in responsive columns */\n  children: React.ReactNode;\n  /** Additional CSS classes applied to the grid container */\n  className?: string;\n  /** Size of grid items (controls minimum width before wrapping) */\n  itemSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /** Maximum number of columns (optional constraint) */\n  maxCols?: number;\n  /** Gap between grid items - uses unified size system */\n  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /** Responsive column configuration for different breakpoints */\n  responsive?: {\n    sm?: number; // min-width: 640px\n    md?: number; // min-width: 768px\n    lg?: number; // min-width: 1024px\n    xl?: number; // min-width: 1280px\n  };\n  /** Align items vertically */\n  alignItems?: 'start' | 'center' | 'end' | 'stretch';\n  /** Justify items horizontally */\n  justifyItems?: 'start' | 'center' | 'end' | 'stretch';\n};\n\n/**\n * Grid - Responsive grid layout component\n *\n * Features:\n * - Auto-responsive grid using CSS Grid auto-fit/auto-fill\n * - Configurable minimum item width (items wrap when too narrow)\n * - Optional responsive column overrides for specific breakpoints\n * - Flexible gap spacing\n * - Alignment controls\n *\n * @example\n * ```tsx\n * // Auto-responsive grid with md (250px) item size\n * <Grid itemSize=\"md\" gap=\"md\">\n *   <Card>Item 1</Card>\n *   <Card>Item 2</Card>\n *   <Card>Item 3</Card>\n * </Grid>\n *\n * // Responsive grid with breakpoint overrides\n * <Grid\n *   itemSize=\"sm\"\n *   responsive={{ sm: 1, md: 2, lg: 3, xl: 4 }}\n *   gap=\"lg\"\n * >\n *   <Card>Item 1</Card>\n *   <Card>Item 2</Card>\n * </Grid>\n *\n * // Fixed max columns with auto-fit\n * <Grid itemSize=\"xs\" maxCols={4} gap=\"md\">\n *   <Card>Item 1</Card>\n *   <Card>Item 2</Card>\n * </Grid>\n * ```\n */\nfunction Grid({\n  children,\n  className = '',\n  itemSize = 'md',\n  maxCols,\n  gap = 'md',\n  responsive,\n  alignItems = 'stretch',\n  justifyItems = 'stretch'\n}: Readonly<GridProps>) {\n  const itemSizeValues = {\n    xs: '150px',\n    sm: '200px',\n    md: '250px',\n    lg: '300px',\n    xl: '350px',\n    '2xl': '400px'\n  };\n\n  // Use unified gap sizes\n  const gapClass = gapSizes[gap];\n\n  const alignItemsClasses = {\n    start: 'items-start',\n    center: 'items-center',\n    end: 'items-end',\n    stretch: 'items-stretch'\n  };\n\n  const justifyItemsClasses = {\n    start: 'justify-items-start',\n    center: 'justify-items-center',\n    end: 'justify-items-end',\n    stretch: 'justify-items-stretch'\n  };\n\n  // Build responsive column classes if provided\n  const responsiveClasses = responsive\n    ? Object.entries(responsive)\n        .map(([breakpoint, cols]) => {\n          const breakpointPrefix =\n            breakpoint === 'sm' ? 'sm:' : breakpoint === 'md' ? 'md:' : breakpoint === 'lg' ? 'lg:' : 'xl:';\n          return `${breakpointPrefix}grid-cols-${cols}`;\n        })\n        .join(' ')\n    : '';\n\n  // Get minimum width value from variant\n  const minWidth = itemSizeValues[itemSize];\n\n  // Build grid template columns style\n  // If responsive classes are provided, use them via Tailwind\n  // Otherwise, use CSS custom property for auto-fit/auto-fill\n  const gridStyle = !responsive\n    ? {\n        gridTemplateColumns: maxCols\n          ? `repeat(auto-fit, minmax(min(${minWidth}, 100%), 1fr))`\n          : `repeat(auto-fill, minmax(min(${minWidth}, 100%), 1fr))`\n      }\n    : undefined;\n\n  return (\n    <div\n      className={`\n        grid\n        ${!responsive ? '' : responsiveClasses}\n        ${gapClass}\n        ${alignItemsClasses[alignItems]}\n        ${justifyItemsClasses[justifyItems]}\n        ${className}\n      `.trim()}\n      style={gridStyle}\n    >\n      {children}\n    </div>\n  );\n}\n\nGrid.displayName = 'Grid';\n\nexport default Grid;\n"],"names":[],"mappings":";;AAgEA,SAAS,KAAK;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,EACZ,WAAW;AAAA,EACX;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA,aAAa;AAAA,EACb,eAAe;AACjB,GAAwB;AACtB,QAAM,iBAAiB;AAAA,IACrB,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,EAAA;AAIT,QAAM,WAAW,SAAS,GAAG;AAE7B,QAAM,oBAAoB;AAAA,IACxB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAGX,QAAM,sBAAsB;AAAA,IAC1B,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,SAAS;AAAA,EAAA;AAIX,QAAM,oBAAoB,aACtB,OAAO,QAAQ,UAAU,EACtB,IAAI,CAAC,CAAC,YAAY,IAAI,MAAM;AAC3B,UAAM,mBACJ,eAAe,OAAO,QAAQ,eAAe,OAAO,QAAQ,eAAe,OAAO,QAAQ;AAC5F,WAAO,GAAG,gBAAgB,aAAa,IAAI;AAAA,EAC7C,CAAC,EACA,KAAK,GAAG,IACX;AAGJ,QAAM,WAAW,eAAe,QAAQ;AAKxC,QAAM,YAAY,CAAC,aACf;AAAA,IACE,qBAAqB,UACjB,+BAA+B,QAAQ,mBACvC,gCAAgC,QAAQ;AAAA,EAAA,IAE9C;AAEJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA;AAAA,UAEP,CAAC,aAAa,KAAK,iBAAiB;AAAA,UACpC,QAAQ;AAAA,UACR,kBAAkB,UAAU,CAAC;AAAA,UAC7B,oBAAoB,YAAY,CAAC;AAAA,UACjC,SAAS;AAAA,QACX,KAAA;AAAA,MACF,OAAO;AAAA,MAEN;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,KAAK,cAAc;"}

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

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

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

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

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

@@ -0,0 +1,61 @@
+import { ReactNode } from 'react';
+export type HeroAction = {
+    /** Button label text */
+    label: string;
+    /** Click handler for the button */
+    onClick: () => void;
+    /** Button color variant */
+    variant?: 'primary' | 'neutral' | 'error' | 'accent';
+    /** Button style variant */
+    style?: 'solid' | 'outline' | 'ghost';
+    /** Whether the button shows a loading state */
+    loading?: boolean;
+    /** Optional icon to display in the button */
+    icon?: ReactNode;
+};
+export type HeroProps = {
+    /** Main hero heading text */
+    title: string;
+    /** Optional subtitle displayed above the title */
+    subtitle?: string;
+    /** Optional description text displayed below the title */
+    description?: string;
+    /** Primary call-to-action button configuration */
+    primaryAction?: HeroAction;
+    /** Secondary call-to-action button configuration */
+    secondaryAction?: HeroAction;
+    /** Optional custom content to display below actions */
+    children?: ReactNode;
+    /** Additional CSS classes applied to the hero section */
+    className?: string;
+    /** Visual background variant */
+    variant?: 'gradient' | 'solid' | 'minimal';
+    /** Whether content is centered horizontally */
+    centered?: boolean;
+    /** Size preset controlling padding and typography scale */
+    size?: 'sm' | 'md' | 'lg';
+};
+/**
+ * Hero Component - Eye-catching hero section
+ *
+ * @example
+ * ```tsx
+ * <Hero
+ *   title="Build Amazing Products"
+ *   subtitle="The modern way to ship"
+ *   description="Start building with our component library."
+ *   primaryAction={{
+ *     label: 'Get Started',
+ *     onClick: () => {},
+ *     variant: 'primary'
+ *   }}
+ *   variant="gradient"
+ * />
+ * ```
+ */
+declare function Hero({ title, subtitle, description, primaryAction, secondaryAction, children, className, variant, centered, size }: Readonly<HeroProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace Hero {
+    var displayName: string;
+}
+export default Hero;
+//# sourceMappingURL=hero.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hero.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/hero/hero.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASlC,MAAM,MAAM,UAAU,GAAG;IACvB,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;IACrD,2BAA2B;IAC3B,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;IACtC,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0DAA0D;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,oDAAoD;IACpD,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B,uDAAuD;IACvD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gCAAgC;IAChC,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,SAAS,CAAC;IAC3C,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,iBAAS,IAAI,CAAC,EACZ,KAAK,EACL,QAAQ,EACR,WAAW,EACX,aAAa,EACb,eAAe,EACf,QAAQ,EACR,SAAc,EACd,OAAoB,EACpB,QAAe,EACf,IAAW,EACZ,EAAE,QAAQ,CAAC,SAAS,CAAC,2CAoFrB;kBA/FQ,IAAI;;;AAmGb,eAAe,IAAI,CAAC"}

package/dist/components/layout/hero/hero.js

@@ -0,0 +1,79 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import Container from "../container/container.js";
+import Heading from "../../typography/heading/heading.js";
+import Text from "../../typography/text/text.js";
+import Stack from "../stack/stack.js";
+import Button from "../../forms/button/button.js";
+import { sectionPadding } from "../../../theme/size-tokens.js";
+function Hero({
+  title,
+  subtitle,
+  description,
+  primaryAction,
+  secondaryAction,
+  children,
+  className = "",
+  variant = "gradient",
+  centered = true,
+  size = "lg"
+}) {
+  const sizeClasses = {
+    sm: sectionPadding.md,
+    md: sectionPadding.lg,
+    lg: "pt-32 pb-20 md:pt-36 md:pb-28"
+    // Custom hero-specific padding
+  };
+  const titleSizes = {
+    sm: "text-3xl md:text-4xl",
+    md: "text-4xl md:text-5xl",
+    lg: "text-5xl md:text-6xl lg:text-7xl"
+  };
+  const variantClasses = {
+    gradient: "bg-gradient-to-b from-primary/10 via-primary/5 to-background",
+    solid: "bg-muted/30",
+    minimal: "bg-background"
+  };
+  return /* @__PURE__ */ jsxs("section", { className: `relative ${sizeClasses[size]} ${variantClasses[variant]} ${className}`, children: [
+    variant === "gradient" && /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-0 h-px bg-linear-to-r from-transparent via-primary/20 to-transparent" }),
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 h-32 bg-linear-to-t from-background to-transparent pointer-events-none" }),
+    /* @__PURE__ */ jsx(Container, { marginX: "sm", children: /* @__PURE__ */ jsxs("div", { className: centered ? "text-center mx-auto max-w-4xl" : "max-w-4xl", children: [
+      subtitle && /* @__PURE__ */ jsx(Text, { hasMargin: true, className: "text-lg md:text-xl font-semibold text-primary", weight: "semibold", children: subtitle }),
+      /* @__PURE__ */ jsx(Heading, { level: 1, className: `${titleSizes[size]} font-extrabold mb-6 tracking-tight`, children: title }),
+      description && /* @__PURE__ */ jsx(Text, { hasMargin: true, className: "text-lg md:text-xl mb-8 text-muted-foreground max-w-2xl mx-auto", children: description }),
+      (primaryAction || secondaryAction) && /* @__PURE__ */ jsxs(Stack, { direction: "horizontal", spacing: "md", justify: centered ? "center" : "start", children: [
+        primaryAction && /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "lg",
+            variant: primaryAction.variant || "primary",
+            style: primaryAction.style,
+            onClick: primaryAction.onClick,
+            loading: primaryAction.loading,
+            icon: primaryAction.icon,
+            className: "shadow-lg shadow-primary/20 hover:shadow-xl hover:shadow-primary/30 transition-all",
+            children: primaryAction.label
+          }
+        ),
+        secondaryAction && /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "lg",
+            variant: secondaryAction.variant || "neutral",
+            style: secondaryAction.style || "outline",
+            onClick: secondaryAction.onClick,
+            loading: secondaryAction.loading,
+            icon: secondaryAction.icon,
+            className: "hover:shadow-md transition-all",
+            children: secondaryAction.label
+          }
+        )
+      ] }),
+      children && /* @__PURE__ */ jsx("div", { className: "mt-10", children })
+    ] }) })
+  ] });
+}
+Hero.displayName = "Hero";
+export {
+  Hero as default
+};
+//# sourceMappingURL=hero.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hero.js","sources":["../../../../src/components/layout/hero/hero.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport Container from '../container/container';\nimport Heading from '../../typography/heading/heading';\nimport Text from '../../typography/text/text';\nimport Stack from '../stack/stack';\nimport Button from '../../forms/button/button';\nimport { sectionPadding } from '../../../theme/size-tokens';\n\nexport type HeroAction = {\n  /** Button label text */\n  label: string;\n  /** Click handler for the button */\n  onClick: () => void;\n  /** Button color variant */\n  variant?: 'primary' | 'neutral' | 'error' | 'accent';\n  /** Button style variant */\n  style?: 'solid' | 'outline' | 'ghost';\n  /** Whether the button shows a loading state */\n  loading?: boolean;\n  /** Optional icon to display in the button */\n  icon?: ReactNode;\n};\n\nexport type HeroProps = {\n  /** Main hero heading text */\n  title: string;\n  /** Optional subtitle displayed above the title */\n  subtitle?: string;\n  /** Optional description text displayed below the title */\n  description?: string;\n  /** Primary call-to-action button configuration */\n  primaryAction?: HeroAction;\n  /** Secondary call-to-action button configuration */\n  secondaryAction?: HeroAction;\n  /** Optional custom content to display below actions */\n  children?: ReactNode;\n  /** Additional CSS classes applied to the hero section */\n  className?: string;\n  /** Visual background variant */\n  variant?: 'gradient' | 'solid' | 'minimal';\n  /** Whether content is centered horizontally */\n  centered?: boolean;\n  /** Size preset controlling padding and typography scale */\n  size?: 'sm' | 'md' | 'lg';\n};\n\n/**\n * Hero Component - Eye-catching hero section\n *\n * @example\n * ```tsx\n * <Hero\n *   title=\"Build Amazing Products\"\n *   subtitle=\"The modern way to ship\"\n *   description=\"Start building with our component library.\"\n *   primaryAction={{\n *     label: 'Get Started',\n *     onClick: () => {},\n *     variant: 'primary'\n *   }}\n *   variant=\"gradient\"\n * />\n * ```\n */\nfunction Hero({\n  title,\n  subtitle,\n  description,\n  primaryAction,\n  secondaryAction,\n  children,\n  className = '',\n  variant = 'gradient',\n  centered = true,\n  size = 'lg'\n}: Readonly<HeroProps>) {\n  // Hero-specific size classes (extends sectionPadding)\n  const sizeClasses = {\n    sm: sectionPadding.md,\n    md: sectionPadding.lg,\n    lg: 'pt-32 pb-20 md:pt-36 md:pb-28' // Custom hero-specific padding\n  };\n\n  const titleSizes = {\n    sm: 'text-3xl md:text-4xl',\n    md: 'text-4xl md:text-5xl',\n    lg: 'text-5xl md:text-6xl lg:text-7xl'\n  };\n\n  const variantClasses = {\n    gradient: 'bg-gradient-to-b from-primary/10 via-primary/5 to-background',\n    solid: 'bg-muted/30',\n    minimal: 'bg-background'\n  };\n\n  return (\n    <section className={`relative ${sizeClasses[size]} ${variantClasses[variant]} ${className}`}>\n      {/* Top border with subtle glow */}\n      {variant === 'gradient' && (\n        <div className=\"absolute inset-x-0 top-0 h-px bg-linear-to-r from-transparent via-primary/20 to-transparent\" />\n      )}\n\n      {/* Bottom shadow fade */}\n      <div className=\"absolute inset-x-0 bottom-0 h-32 bg-linear-to-t from-background to-transparent pointer-events-none\" />\n\n      <Container marginX=\"sm\">\n        <div className={centered ? 'text-center mx-auto max-w-4xl' : 'max-w-4xl'}>\n          {subtitle && (\n            <Text hasMargin className=\"text-lg md:text-xl font-semibold text-primary\" weight=\"semibold\">\n              {subtitle}\n            </Text>\n          )}\n\n          <Heading level={1} className={`${titleSizes[size]} font-extrabold mb-6 tracking-tight`}>\n            {title}\n          </Heading>\n\n          {description && (\n            <Text hasMargin className=\"text-lg md:text-xl mb-8 text-muted-foreground max-w-2xl mx-auto\">\n              {description}\n            </Text>\n          )}\n\n          {(primaryAction || secondaryAction) && (\n            <Stack direction=\"horizontal\" spacing=\"md\" justify={centered ? 'center' : 'start'}>\n              {primaryAction && (\n                <Button\n                  size=\"lg\"\n                  variant={primaryAction.variant || 'primary'}\n                  style={primaryAction.style}\n                  onClick={primaryAction.onClick}\n                  loading={primaryAction.loading}\n                  icon={primaryAction.icon}\n                  className=\"shadow-lg shadow-primary/20 hover:shadow-xl hover:shadow-primary/30 transition-all\"\n                >\n                  {primaryAction.label}\n                </Button>\n              )}\n              {secondaryAction && (\n                <Button\n                  size=\"lg\"\n                  variant={secondaryAction.variant || 'neutral'}\n                  style={secondaryAction.style || 'outline'}\n                  onClick={secondaryAction.onClick}\n                  loading={secondaryAction.loading}\n                  icon={secondaryAction.icon}\n                  className=\"hover:shadow-md transition-all\"\n                >\n                  {secondaryAction.label}\n                </Button>\n              )}\n            </Stack>\n          )}\n\n          {children && <div className=\"mt-10\">{children}</div>}\n        </div>\n      </Container>\n    </section>\n  );\n}\n\nHero.displayName = 'Hero';\n\nexport default Hero;\n"],"names":[],"mappings":";;;;;;;AAiEA,SAAS,KAAK;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,WAAW;AAAA,EACX,OAAO;AACT,GAAwB;AAEtB,QAAM,cAAc;AAAA,IAClB,IAAI,eAAe;AAAA,IACnB,IAAI,eAAe;AAAA,IACnB,IAAI;AAAA;AAAA,EAAA;AAGN,QAAM,aAAa;AAAA,IACjB,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA;AAGN,QAAM,iBAAiB;AAAA,IACrB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAGX,SACE,qBAAC,WAAA,EAAQ,WAAW,YAAY,YAAY,IAAI,CAAC,IAAI,eAAe,OAAO,CAAC,IAAI,SAAS,IAEtF,UAAA;AAAA,IAAA,YAAY,cACX,oBAAC,OAAA,EAAI,WAAU,+FAA8F;AAAA,IAI/G,oBAAC,OAAA,EAAI,WAAU,qGAAA,CAAqG;AAAA,IAEpH,oBAAC,aAAU,SAAQ,MACjB,+BAAC,OAAA,EAAI,WAAW,WAAW,kCAAkC,aAC1D,UAAA;AAAA,MAAA,YACC,oBAAC,QAAK,WAAS,MAAC,WAAU,iDAAgD,QAAO,YAC9E,UAAA,SAAA,CACH;AAAA,MAGF,oBAAC,SAAA,EAAQ,OAAO,GAAG,WAAW,GAAG,WAAW,IAAI,CAAC,uCAC9C,UAAA,MAAA,CACH;AAAA,MAEC,eACC,oBAAC,MAAA,EAAK,WAAS,MAAC,WAAU,mEACvB,UAAA,aACH;AAAA,OAGA,iBAAiB,oBACjB,qBAAC,OAAA,EAAM,WAAU,cAAa,SAAQ,MAAK,SAAS,WAAW,WAAW,SACvE,UAAA;AAAA,QAAA,iBACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,cAAc,WAAW;AAAA,YAClC,OAAO,cAAc;AAAA,YACrB,SAAS,cAAc;AAAA,YACvB,SAAS,cAAc;AAAA,YACvB,MAAM,cAAc;AAAA,YACpB,WAAU;AAAA,YAET,UAAA,cAAc;AAAA,UAAA;AAAA,QAAA;AAAA,QAGlB,mBACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,gBAAgB,WAAW;AAAA,YACpC,OAAO,gBAAgB,SAAS;AAAA,YAChC,SAAS,gBAAgB;AAAA,YACzB,SAAS,gBAAgB;AAAA,YACzB,MAAM,gBAAgB;AAAA,YACtB,WAAU;AAAA,YAET,UAAA,gBAAgB;AAAA,UAAA;AAAA,QAAA;AAAA,MACnB,GAEJ;AAAA,MAGD,YAAY,oBAAC,OAAA,EAAI,WAAU,SAAS,SAAA,CAAS;AAAA,IAAA,EAAA,CAChD,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;AAEA,KAAK,cAAc;"}

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

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

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

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

package/dist/components/layout/left-nav-layout/index.d.ts

@@ -0,0 +1,7 @@
+export { default } from './left-nav-layout';
+export { default as LeftNavItem } from './left-nav-item';
+export { default as LeftNavSection } from './left-nav-section';
+export type { LeftNavLayoutProps } from './left-nav-layout';
+export type { LeftNavItemProps } from './left-nav-item';
+export type { LeftNavSectionProps } from './left-nav-section';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/left-nav-layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/left-nav-layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAE/D,YAAY,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC5D,YAAY,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACxD,YAAY,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC"}