@bloomneo/uikit 1.5.0

package/dist/footer.js

@@ -0,0 +1,308 @@
+import { jsx as e, jsxs as i, Fragment as B } from "react/jsx-runtime";
+import { createContext as V, forwardRef as v, useContext as k } from "react";
+import { c as w } from "./index-Bke1qZdk.js";
+import { c as t } from "./utils-CwJPJKOE.js";
+import { Button as I } from "./button.js";
+import { Separator as C } from "./separator.js";
+const y = V({
+  tone: "contrast",
+  size: "xl"
+}), T = w(
+  "w-full border-t transition-all duration-200",
+  {
+    variants: {
+      tone: {
+        clean: "bg-background/80 backdrop-blur-sm border-border/40 text-foreground",
+        subtle: "bg-muted/50 backdrop-blur-sm border-border/30 text-foreground",
+        brand: "bg-primary border-primary-foreground/20 text-primary-foreground",
+        contrast: "bg-zinc-900 border-zinc-700/40 text-zinc-100"
+      },
+      position: {
+        sticky: "sticky bottom-0 z-30",
+        fixed: "fixed bottom-0 left-0 right-0 z-30",
+        relative: "relative"
+      }
+    },
+    defaultVariants: {
+      tone: "contrast",
+      position: "relative"
+    }
+  }
+), L = w(
+  "mx-auto",
+  {
+    variants: {
+      size: {
+        sm: "max-w-2xl py-4 px-4",
+        md: "max-w-4xl py-5 px-4 sm:px-6",
+        lg: "max-w-6xl py-6 px-4 sm:px-6 lg:px-8",
+        xl: "max-w-7xl py-6 px-4 sm:px-6 lg:px-8",
+        full: "max-w-full py-8 px-4 sm:px-6 lg:px-8"
+      }
+    },
+    defaultVariants: {
+      size: "xl"
+    }
+  }
+), F = v(({
+  className: g,
+  tone: c = "contrast",
+  size: n = "xl",
+  position: m = "relative",
+  navigation: l = [],
+  currentPath: d = "",
+  onNavigate: s,
+  children: u,
+  ...h
+}, a) => /* @__PURE__ */ e(y.Provider, { value: { tone: c, size: n }, children: /* @__PURE__ */ e(
+  "footer",
+  {
+    ref: a,
+    className: t(T({ tone: c, position: m }), g),
+    ...h,
+    children: /* @__PURE__ */ i("div", { className: t(L({ size: n })), children: [
+      l.length > 0 && !u && /* @__PURE__ */ e(
+        z,
+        {
+          navigation: l,
+          currentPath: d,
+          onNavigate: s
+        }
+      ),
+      u
+    ] })
+  }
+) }));
+F.displayName = "Footer";
+const z = v(({
+  className: g,
+  navigation: c = [],
+  currentPath: n = "",
+  onNavigate: m,
+  logo: l,
+  social: d,
+  copyright: s,
+  ...u
+}, h) => {
+  const { tone: a } = k(y), N = (r) => {
+    r.href && m ? m(r.href, r) : r.onClick && r.onClick();
+  }, b = (r = !1) => {
+    const f = "text-sm transition-colors cursor-pointer";
+    switch (a) {
+      case "subtle":
+        return t(f, r ? "text-foreground" : "text-muted-foreground hover:text-foreground");
+      case "brand":
+        return t(f, r ? "text-primary-foreground" : "text-primary-foreground/80 hover:text-primary-foreground");
+      case "contrast":
+        return t(f, r ? "text-zinc-100" : "text-zinc-300 hover:text-zinc-100");
+      default:
+        return t(f, r ? "text-foreground" : "text-muted-foreground hover:text-foreground");
+    }
+  };
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      ref: h,
+      className: t("space-y-4", g),
+      ...u,
+      children: [
+        /* @__PURE__ */ i("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4", children: [
+          l && /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: l }),
+          c.length > 0 && /* @__PURE__ */ e("nav", { className: "flex flex-wrap items-center justify-center gap-6", children: c.map((r) => {
+            const f = r.href ? n === r.href : r.isActive;
+            return /* @__PURE__ */ e(
+              "button",
+              {
+                onClick: () => N(r),
+                className: t(b(f), r.className),
+                children: r.label
+              },
+              r.key
+            );
+          }) }),
+          d && /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: d })
+        ] }),
+        s && /* @__PURE__ */ i(B, { children: [
+          /* @__PURE__ */ e(C, { className: t(
+            a === "brand" && "bg-primary-foreground/20",
+            a === "contrast" && "bg-zinc-700"
+          ) }),
+          /* @__PURE__ */ e("div", { className: "text-center", children: /* @__PURE__ */ e("p", { className: t(
+            "text-sm",
+            a === "contrast" && "text-zinc-400",
+            a === "brand" && "text-primary-foreground/80",
+            (a === "clean" || a === "subtle") && "text-muted-foreground"
+          ), children: s }) })
+        ] })
+      ]
+    }
+  );
+});
+z.displayName = "FooterBasic";
+const S = v(({
+  className: g,
+  brand: c,
+  columns: n = [],
+  newsletter: m,
+  social: l,
+  legal: d = [],
+  currentPath: s = "",
+  onNavigate: u,
+  copyright: h,
+  ...a
+}, N) => {
+  const { tone: b } = k(y), r = (o) => {
+    o.href && u ? u(o.href, o) : o.onClick && o.onClick();
+  }, p = (() => {
+    switch (b) {
+      case "subtle":
+        return {
+          heading: "text-foreground",
+          text: "text-muted-foreground",
+          link: "text-muted-foreground hover:text-foreground"
+        };
+      case "brand":
+        return {
+          heading: "text-primary-foreground",
+          text: "text-primary-foreground/70",
+          link: "text-primary-foreground/70 hover:text-primary-foreground"
+        };
+      case "contrast":
+        return {
+          heading: "text-zinc-100",
+          text: "text-zinc-300",
+          link: "text-zinc-300 hover:text-zinc-100"
+        };
+      default:
+        return {
+          heading: "text-foreground",
+          text: "text-muted-foreground",
+          link: "text-muted-foreground hover:text-foreground"
+        };
+    }
+  })();
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      ref: N,
+      className: t("space-y-8", g),
+      ...a,
+      children: [
+        /* @__PURE__ */ i("div", { className: "grid gap-8 grid-cols-1 md:grid-cols-6 lg:grid-cols-6", children: [
+          c && /* @__PURE__ */ i("div", { className: "col-span-2", children: [
+            " ",
+            c
+          ] }),
+          /* @__PURE__ */ e("div", { className: "col-span-4", children: n.length > 0 && /* @__PURE__ */ e("div", { className: t(
+            "grid gap-6",
+            // No columns: hidden
+            n.length === 0 && "hidden",
+            // 1 column: single column
+            n.length === 1 && "grid-cols-1",
+            // 2 columns: responsive 1→2
+            n.length === 2 && "grid-cols-2 sm:grid-cols-2 md:grid-cols-3",
+            // 3 columns: responsive 1→2→3
+            n.length === 3 && "grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3",
+            // 4+ columns: responsive 1→2→4
+            n.length >= 4 && "grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4"
+          ), children: n.slice(0, 4).map((o) => /* @__PURE__ */ i("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ e("h4", { className: t("text-sm font-semibold", p.heading), children: o.title }),
+            /* @__PURE__ */ e("ul", { className: "space-y-2", children: o.items?.map((x) => {
+              const A = x.href ? s === x.href : x.isActive;
+              return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
+                "button",
+                {
+                  onClick: () => r(x),
+                  className: t(
+                    "text-sm transition-colors cursor-pointer block",
+                    A ? p.heading : p.link,
+                    x.className
+                  ),
+                  children: x.label
+                }
+              ) }, x.key);
+            }) })
+          ] }, o.key)) }) })
+        ] }),
+        /* @__PURE__ */ i("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ e(C, { className: t(
+            b === "brand" && "bg-primary-foreground/20",
+            b === "contrast" && "bg-zinc-700"
+          ) }),
+          /* @__PURE__ */ i("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4", children: [
+            h && /* @__PURE__ */ e("p", { className: t("text-sm", p.text), children: h }),
+            d.length > 0 && /* @__PURE__ */ e("div", { className: "flex items-center gap-4", children: d.map((o) => {
+              const x = o.href ? s === o.href : o.isActive;
+              return /* @__PURE__ */ e(
+                "button",
+                {
+                  onClick: () => r(o),
+                  className: t(
+                    "text-sm transition-colors cursor-pointer",
+                    x ? p.heading : p.link,
+                    o.className
+                  ),
+                  children: o.label
+                },
+                o.key
+              );
+            }) }),
+            l && /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: l })
+          ] })
+        ] })
+      ]
+    }
+  );
+});
+S.displayName = "FooterAdvanced";
+const j = v(({
+  className: g,
+  links: c = [],
+  ...n
+}, m) => {
+  const { tone: l } = k(y), d = () => {
+    switch (l) {
+      case "subtle":
+        return "text-muted-foreground hover:text-foreground hover:bg-background/50";
+      case "brand":
+        return "text-primary-foreground/70 hover:text-primary-foreground hover:bg-primary-foreground/10";
+      case "contrast":
+        return "text-zinc-300 hover:text-zinc-100 hover:bg-zinc-800/50";
+      default:
+        return "text-muted-foreground hover:text-foreground hover:bg-muted";
+    }
+  };
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      ref: m,
+      className: t("flex items-center gap-1", g),
+      ...n,
+      children: c.map((s) => /* @__PURE__ */ e(
+        I,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: t("h-8 w-8 cursor-pointer", d(), s.className),
+          onClick: s.onClick,
+          title: s.label,
+          children: /* @__PURE__ */ e(s.icon, { className: "h-4 w-4" })
+        },
+        s.key
+      ))
+    }
+  );
+});
+j.displayName = "FooterSocial";
+const H = Object.assign(F, {
+  Basic: z,
+  Advanced: S,
+  Social: j
+});
+export {
+  H as Footer,
+  S as FooterAdvanced,
+  z as FooterBasic,
+  j as FooterSocial
+};
+//# sourceMappingURL=footer.js.map

package/dist/footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer.js","sources":["../src/components/sections/footer.tsx"],"sourcesContent":["/**\n * Footer component with standardized prop naming and tone system\n * @module @bloomneo/uikit\n * @file src/components/sections/footer.tsx\n */\n\nimport * as React from 'react';\nimport { forwardRef, createContext, useContext } from 'react';\nimport { cva } from 'class-variance-authority';\nimport { cn } from '@/lib/utils';\nimport { Button } from '@/components/ui/button';\nimport { Separator } from '@/components/ui/separator';\nimport type { Size, NavigationItem } from '@/types';\n\n/**\n * Footer context for sharing configuration\n */\nconst FooterContext = createContext<{\n  tone: 'clean' | 'subtle' | 'brand' | 'contrast';\n  size: Size;\n}>({\n  tone: 'contrast',\n  size: 'xl',\n});\n\n/**\n * Footer variants with tone-based semantic colors\n */\nconst footerVariants = cva(\n  'w-full border-t transition-all duration-200',\n  {\n    variants: {\n      tone: {\n      clean: 'bg-background/80 backdrop-blur-sm border-border/40 text-foreground',\n      subtle: 'bg-muted/50 backdrop-blur-sm border-border/30 text-foreground', \n      brand: 'bg-primary border-primary-foreground/20 text-primary-foreground',\n      contrast: 'bg-zinc-900 border-zinc-700/40 text-zinc-100'\n    },\n      position: {\n        sticky: 'sticky bottom-0 z-30',\n        fixed: 'fixed bottom-0 left-0 right-0 z-30',\n        relative: 'relative'\n      }\n    },\n    defaultVariants: {\n      tone: 'contrast',\n      position: 'relative'\n    }\n  }\n);\n\n/**\n * Container variants for responsive sizing\n */\nconst containerVariants = cva(\n  'mx-auto',\n  {\n    variants: {\n      size: {\n        sm: 'max-w-2xl py-4 px-4',\n        md: 'max-w-4xl py-5 px-4 sm:px-6',\n        lg: 'max-w-6xl py-6 px-4 sm:px-6 lg:px-8',\n        xl: 'max-w-7xl py-6 px-4 sm:px-6 lg:px-8',\n        full: 'max-w-full py-8 px-4 sm:px-6 lg:px-8'\n      }\n    },\n    defaultVariants: {\n      size: 'xl'\n    }\n  }\n);\n\n/**\n * Footer component props with standardized system\n */\nexport interface FooterProps extends React.HTMLAttributes<HTMLElement> {\n  /** Visual styling tone */\n  tone?: 'clean' | 'subtle' | 'brand' | 'contrast';\n  /** Footer size (width + padding + spacing) */\n  size?: Size;\n  /** Footer positioning */\n  position?: 'sticky' | 'fixed' | 'relative';\n  /** Navigation items */\n  navigation?: NavigationItem[];\n  /** Current path for active states */\n  currentPath?: string;\n  /** Navigation handler */\n  onNavigate?: (href: string, item: NavigationItem) => void;\n  /** Footer content */\n  children: React.ReactNode;\n}\n\n/**\n * Main Footer component with standardized props\n */\nconst FooterComponent = forwardRef<HTMLElement, FooterProps>(({ \n  className,\n  tone = 'contrast',\n  size = 'xl',\n  position = 'relative',\n  navigation = [],\n  currentPath = '',\n  onNavigate,\n  children,\n  ...props \n}, ref) => {\n  return (\n    <FooterContext.Provider value={{ tone, size }}>\n      <footer\n        ref={ref}\n        className={cn(footerVariants({ tone, position }), className)}\n        {...props}\n      >\n        <div className={cn(containerVariants({ size }))}>\n          {/* Auto-render navigation if provided */}\n          {navigation.length > 0 && !children && (\n            <FooterBasic \n              navigation={navigation}\n              currentPath={currentPath}\n              onNavigate={onNavigate}\n            />\n          )}\n          {children}\n        </div>\n      </footer>\n    </FooterContext.Provider>\n  );\n});\n\nFooterComponent.displayName = 'Footer';\n\n/**\n * Basic Footer props\n */\nexport interface FooterBasicProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Navigation items (standardized) */\n  navigation?: NavigationItem[];\n  /** Current path for active states */\n  currentPath?: string;\n  /** Navigation handler */\n  onNavigate?: (href: string, item: NavigationItem) => void;\n  /** Footer logo/brand */\n  logo?: React.ReactNode;\n  /** Social media links */\n  social?: React.ReactNode;\n  /** Copyright text */\n  copyright?: React.ReactNode;\n}\n\n/**\n * Basic Footer - Simple row layout with navigation\n */\nconst FooterBasic = forwardRef<HTMLDivElement, FooterBasicProps>(({\n  className,\n  navigation = [],\n  currentPath = '',\n  onNavigate,\n  logo,\n  social,\n  copyright,\n  ...props\n}, ref) => {\n  const { tone } = useContext(FooterContext);\n\n  // Handle navigation click\n  const handleItemClick = (item: NavigationItem) => {\n    if (item.href && onNavigate) {\n      onNavigate(item.href, item);\n    } else if (item.onClick) {\n      item.onClick();\n    }\n  };\n\n  // Get tone-specific link styles\n  const getLinkStyles = (isActive = false) => {\n    const baseStyles = 'text-sm transition-colors cursor-pointer';\n    \n    switch (tone) {\n      case 'subtle':\n        return cn(baseStyles, isActive ? 'text-foreground' : 'text-muted-foreground hover:text-foreground');\n      case 'brand':\n        return cn(baseStyles, isActive ? 'text-primary-foreground' : 'text-primary-foreground/80 hover:text-primary-foreground');\n      case 'contrast':\n        return cn(baseStyles, isActive ? 'text-zinc-100' : 'text-zinc-300 hover:text-zinc-100');\n      default:\n        return cn(baseStyles, isActive ? 'text-foreground' : 'text-muted-foreground hover:text-foreground');\n    }\n  };\n\n  return (\n    <div \n      ref={ref}\n      className={cn('space-y-4', className)}\n      {...props}\n    >\n      {/* Main row with logo, links, and social */}\n      <div className=\"flex flex-col sm:flex-row items-center justify-between gap-4\">\n        {/* Logo */}\n        {logo && (\n          <div className=\"flex-shrink-0\">\n            {logo}\n          </div>\n        )}\n\n        {/* Navigation Links */}\n        {navigation.length > 0 && (\n          <nav className=\"flex flex-wrap items-center justify-center gap-6\">\n            {navigation.map((item) => {\n              const isActive = item.href ? currentPath === item.href : item.isActive;\n              \n              return (\n                <button\n                  key={item.key}\n                  onClick={() => handleItemClick(item)}\n                  className={cn(getLinkStyles(isActive), item.className)}\n                >\n                  {item.label}\n                </button>\n              );\n            })}\n          </nav>\n        )}\n\n        {/* Social Links */}\n        {social && (\n          <div className=\"flex-shrink-0\">\n            {social}\n          </div>\n        )}\n      </div>\n\n      {/* Copyright */}\n      {copyright && (\n        <>\n          <Separator className={cn(\n            tone === 'brand' && 'bg-primary-foreground/20',\n            tone === 'contrast' && 'bg-zinc-700'\n          )} />\n          <div className=\"text-center\">\n          <p className={cn(\n            'text-sm',\n            tone === 'contrast' && 'text-zinc-400',\n            tone === 'brand' && 'text-primary-foreground/80',\n            (tone === 'clean' || tone === 'subtle') && 'text-muted-foreground'\n          )}>\n            {copyright}\n          </p>\n        </div>\n        </>\n      )}\n    </div>\n  );\n});\n\nFooterBasic.displayName = 'FooterBasic';\n\n/**\n * Footer column interface\n */\nexport interface FooterColumn {\n  /** Unique key */\n  key: string;\n  /** Column title */\n  title: string;\n  /** Column navigation items */\n  items: NavigationItem[];\n}\n\n/**\n * Advanced Footer props\n */\nexport interface FooterAdvancedProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Brand section (logo + description) */\n  brand?: React.ReactNode;\n  /** Footer columns with navigation items (up to 5) */\n  columns?: FooterColumn[];\n  /** Newsletter signup */\n  newsletter?: React.ReactNode;\n  /** Social media links */\n  social?: React.ReactNode;\n  /** Legal navigation items */\n  legal?: NavigationItem[];\n  /** Current path for active states */\n  currentPath?: string;\n  /** Navigation handler */\n  onNavigate?: (href: string, item: NavigationItem) => void;\n  /** Copyright text */\n  copyright?: React.ReactNode;\n}\n\n/**\n * Advanced Footer - Multi-column layout with organized sections\n */\n/**\n * Advanced Footer - Multi-column layout with organized sections\n * Two-level grid: Brand (30%) + Menu Container (70%) with intelligent 0-4 columns\n */\nconst FooterAdvanced = forwardRef<HTMLDivElement, FooterAdvancedProps>(({\n  className,\n  brand,\n  columns = [],\n  newsletter,\n  social,\n  legal = [],\n  currentPath = '',\n  onNavigate,\n  copyright,\n  ...props\n}, ref) => {\n  const { tone } = useContext(FooterContext);\n\n  // Handle navigation click\n  const handleItemClick = (item: NavigationItem) => {\n    if (item.href && onNavigate) {\n      onNavigate(item.href, item);\n    } else if (item.onClick) {\n      item.onClick();\n    }\n  };\n\n  // Get tone-specific styles\n  const getTextStyles = () => {\n    switch (tone) {\n      case 'subtle':\n        return {\n          heading: 'text-foreground',\n          text: 'text-muted-foreground',\n          link: 'text-muted-foreground hover:text-foreground'\n        };\n      case 'brand':\n        return {\n          heading: 'text-primary-foreground',\n          text: 'text-primary-foreground/70',\n          link: 'text-primary-foreground/70 hover:text-primary-foreground'\n        };\n      case 'contrast':\n        return {\n          heading: 'text-zinc-100',\n          text: 'text-zinc-300',\n          link: 'text-zinc-300 hover:text-zinc-100'\n        };\n      default:\n        return {\n          heading: 'text-foreground',\n          text: 'text-muted-foreground',\n          link: 'text-muted-foreground hover:text-foreground'\n        };\n    }\n  };\n\n  const styles = getTextStyles();\n\n  return (\n    <div \n      ref={ref}\n      className={cn('space-y-8', className)}\n      {...props}\n    >\n      {/* LEVEL 1: Brand (30%) + Menu Container (70%) Grid */}\n      <div className=\"grid gap-8 grid-cols-1 md:grid-cols-6 lg:grid-cols-6\">\n        \n        {/* Brand Section - 30% width on md+ */}\n        {brand && (\n           <div className=\"col-span-2\"> {brand}</div>\n        )}\n\n        {/* Menu Container - 70% width on md+ */}\n          <div className=\"col-span-4\">\n            {/* LEVEL 2: Intelligent Menu Columns Grid (0-4 columns) */}\n          {columns.length > 0 && (\n            <div className={cn(\n              \"grid gap-6\",\n              // No columns: hidden\n              columns.length === 0 && \"hidden\",\n              // 1 column: single column\n              columns.length === 1 && \"grid-cols-1\",\n              // 2 columns: responsive 1→2\n              columns.length === 2 && \"grid-cols-2 sm:grid-cols-2 md:grid-cols-3\",\n              // 3 columns: responsive 1→2→3\n              columns.length === 3 && \"grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3\",\n              // 4+ columns: responsive 1→2→4\n              columns.length >= 4 && \"grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4\"\n            )}>\n              {columns.slice(0, 4).map((column) => (\n                <div key={column.key} className=\"space-y-3\">\n                  <h4 className={cn('text-sm font-semibold', styles.heading)}>\n                    {column.title}\n                  </h4>\n                  <ul className=\"space-y-2\">\n                    {column.items?.map((item) => {\n                      const isActive = item.href ? currentPath === item.href : item.isActive;\n                      \n                      return (\n                        <li key={item.key}>\n                          <button\n                            onClick={() => handleItemClick(item)}\n                            className={cn(\n                              'text-sm transition-colors cursor-pointer block',\n                              isActive ? styles.heading : styles.link,\n                              item.className\n                            )}\n                          >\n                            {item.label}\n                          </button>\n                        </li>\n                      );\n                    })}\n                  </ul>\n                </div>\n              ))}\n            </div>\n          )}\n          </div>\n          \n\n         \n        </div>\n\n      {/* Bottom Section - Legal + Copyright + Social */}\n      <div className=\"space-y-4\">\n        <Separator className={cn(\n          tone === 'brand' && 'bg-primary-foreground/20',\n          tone === 'contrast' && 'bg-zinc-700'\n        )} />\n        \n        <div className=\"flex flex-col sm:flex-row items-center justify-between gap-4\">\n          {/* Copyright */}\n          {copyright && (\n            <p className={cn('text-sm', styles.text)}>\n              {copyright}\n            </p>\n          )}\n\n          {/* Legal Links */}\n          {legal.length > 0 && (\n            <div className=\"flex items-center gap-4\">\n              {legal.map((item) => {\n                const isActive = item.href ? currentPath === item.href : item.isActive;\n                \n                return (\n                  <button\n                    key={item.key}\n                    onClick={() => handleItemClick(item)}\n                    className={cn(\n                      'text-sm transition-colors cursor-pointer',\n                      isActive ? styles.heading : styles.link,\n                      item.className\n                    )}\n                  >\n                    {item.label}\n                  </button>\n                );\n              })}\n            </div>\n          )}\n\n          {/* Social Links */}\n          {social && (\n            <div className=\"flex items-center gap-2\">\n              {social}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n});\n\nFooterAdvanced.displayName = 'FooterAdvanced';\n\n/**\n * Social link interface\n */\nexport interface SocialLink {\n  /** Unique key */\n  key: string;\n  /** Accessibility label */\n  label: string;\n  /** Icon component */\n  icon: React.ComponentType<{ className?: string }>;\n  /** Click handler */\n  onClick: () => void;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Footer Social props\n */\nexport interface FooterSocialProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Social media links */\n  links?: SocialLink[];\n}\n\n/**\n * Footer Social component\n */\nconst FooterSocial = forwardRef<HTMLDivElement, FooterSocialProps>(({\n  className,\n  links = [],\n  ...props\n}, ref) => {\n  const { tone } = useContext(FooterContext);\n\n  const getButtonStyles = () => {\n    switch (tone) {\n      case 'subtle':\n        return 'text-muted-foreground hover:text-foreground hover:bg-background/50';\n      case 'brand':\n        return 'text-primary-foreground/70 hover:text-primary-foreground hover:bg-primary-foreground/10';\n      case 'contrast':\n        return 'text-zinc-300 hover:text-zinc-100 hover:bg-zinc-800/50';\n      default:\n        return 'text-muted-foreground hover:text-foreground hover:bg-muted';\n    }\n  };\n\n  return (\n    <div \n      ref={ref}\n      className={cn('flex items-center gap-1', className)}\n      {...props}\n    >\n      {links.map((link) => (\n        <Button\n          key={link.key}\n          variant=\"ghost\"\n          size=\"icon\"\n          className={cn('h-8 w-8 cursor-pointer', getButtonStyles(), link.className)}\n          onClick={link.onClick}\n          title={link.label}\n        >\n          <link.icon className=\"h-4 w-4\" />\n        </Button>\n      ))}\n    </div>\n  );\n});\n\nFooterSocial.displayName = 'FooterSocial';\n\n/**\n * Footer with compound components\n */\nconst Footer = Object.assign(FooterComponent, {\n  Basic: FooterBasic,\n  Advanced: FooterAdvanced,\n  Social: FooterSocial,\n});\n\n/**\n * Export Footer with compound components and individual components\n */\nexport { \n  Footer,\n  FooterBasic,\n  FooterAdvanced,\n  FooterSocial\n};"],"names":["FooterContext","createContext","footerVariants","cva","containerVariants","FooterComponent","forwardRef","className","tone","size","position","navigation","currentPath","onNavigate","children","props","ref","jsx","cn","jsxs","FooterBasic","logo","social","copyright","useContext","handleItemClick","item","getLinkStyles","isActive","baseStyles","Fragment","Separator","FooterAdvanced","brand","columns","newsletter","legal","styles","column","FooterSocial","links","getButtonStyles","link","Button","Footer"],"mappings":"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"}

package/dist/form-field.js

@@ -0,0 +1,69 @@
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import * as r from "react";
+import { c as m } from "./utils-CwJPJKOE.js";
+import { Input as b } from "./input.js";
+import { E as N, a as g } from "./eye-DDKoW0KS.js";
+function j({
+  label: u,
+  helper: i,
+  error: e,
+  required: a,
+  id: d,
+  className: t,
+  labelClassName: n,
+  children: l
+}) {
+  const h = r.useId(), o = d ?? h, f = i ? o + "-helper" : void 0, p = e ? o + "-error" : void 0, x = [f, p].filter(Boolean).join(" ") || void 0, v = r.cloneElement(l, {
+    id: o,
+    "aria-invalid": e ? !0 : void 0,
+    "aria-describedby": x
+  });
+  return /* @__PURE__ */ c("div", { className: m("flex flex-col gap-1.5", t), children: [
+    /* @__PURE__ */ c(
+      "label",
+      {
+        htmlFor: o,
+        className: m("text-sm font-medium leading-none text-foreground", n),
+        children: [
+          u,
+          a && /* @__PURE__ */ s("span", { className: "ml-0.5 text-destructive", "aria-hidden": "true", children: "*" })
+        ]
+      }
+    ),
+    v,
+    i && !e && /* @__PURE__ */ s("p", { id: f, className: "text-xs text-muted-foreground", children: i }),
+    e && /* @__PURE__ */ s("p", { id: p, role: "alert", className: "text-xs font-medium text-destructive", children: e })
+  ] });
+}
+const F = r.forwardRef(
+  function({ className: i, toggleLabel: e = { show: "Show password", hide: "Hide password" }, ...a }, d) {
+    const [t, n] = r.useState(!1);
+    return /* @__PURE__ */ c("div", { className: "relative", children: [
+      /* @__PURE__ */ s(
+        b,
+        {
+          ref: d,
+          type: t ? "text" : "password",
+          className: m("pr-10", i),
+          ...a
+        }
+      ),
+      /* @__PURE__ */ s(
+        "button",
+        {
+          type: "button",
+          onClick: () => n((l) => !l),
+          "aria-label": t ? e.hide : e.show,
+          "aria-pressed": t,
+          className: "absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          children: t ? /* @__PURE__ */ s(N, { className: "size-4" }) : /* @__PURE__ */ s(g, { className: "size-4" })
+        }
+      )
+    ] });
+  }
+);
+export {
+  j as FormField,
+  F as PasswordInput
+};
+//# sourceMappingURL=form-field.js.map

package/dist/form-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field.js","sources":["../src/components/ui/form-field.tsx"],"sourcesContent":["/**\n * <FormField> — the canonical label/input/error/helper wrapper.\n *\n * Handles the boring parts every form needs and gets wrong half the time:\n *\n *   • generates a stable id and wires `htmlFor` / `aria-describedby` / `aria-invalid`\n *   • renders the error message in a `role=\"alert\"` region\n *   • supports a \"required\" indicator\n *   • clones the child input and merges the wired props automatically\n *\n * @example\n *   <FormField label=\"Email\" required error={errors.email} helper=\"We'll never share it\">\n *     <Input type=\"email\" value={email} onChange={(e) => setEmail(e.target.value)} />\n *   </FormField>\n *\n * Designed to compose cleanly with the existing react-hook-form `<Form />`\n * primitives in this package — pass `<Input {...register('email')} />` as the\n * child and FormField will wire ARIA correctly without you doing a thing.\n */\n\nimport * as React from 'react';\nimport { Eye, EyeOff } from 'lucide-react';\nimport { cn } from '@/lib/utils';\nimport { Input } from '@/components/ui/input';\n\nexport interface FormFieldProps {\n  /** Required label text. */\n  label: string;\n  /** Optional helper / description rendered below the input. */\n  helper?: React.ReactNode;\n  /** Error message. When present the input is marked aria-invalid. */\n  error?: React.ReactNode;\n  /** Mark the field as required (shows a red asterisk after the label). */\n  required?: boolean;\n  /** Pre-generated id. Defaults to React.useId(). */\n  id?: string;\n  /** Optional class on the wrapper. */\n  className?: string;\n  /** Optional class on the label. */\n  labelClassName?: string;\n  /** The actual input. Cloned with `id`, `aria-*` props merged in. */\n  children: React.ReactElement<{\n    id?: string;\n    'aria-invalid'?: boolean;\n    'aria-describedby'?: string;\n  }>;\n}\n\nexport function FormField({\n  label,\n  helper,\n  error,\n  required,\n  id: idProp,\n  className,\n  labelClassName,\n  children,\n}: FormFieldProps): React.JSX.Element {\n  const generatedId = React.useId();\n  const id = idProp ?? generatedId;\n  const helperId = helper ? id + '-helper' : undefined;\n  const errorId = error ? id + '-error' : undefined;\n  const describedBy = [helperId, errorId].filter(Boolean).join(' ') || undefined;\n\n  const child = React.cloneElement(children, {\n    id,\n    'aria-invalid': error ? true : undefined,\n    'aria-describedby': describedBy,\n  });\n\n  return (\n    <div className={cn('flex flex-col gap-1.5', className)}>\n      <label\n        htmlFor={id}\n        className={cn('text-sm font-medium leading-none text-foreground', labelClassName)}\n      >\n        {label}\n        {required && (\n          <span className=\"ml-0.5 text-destructive\" aria-hidden=\"true\">\n            *\n          </span>\n        )}\n      </label>\n      {child}\n      {helper && !error && (\n        <p id={helperId} className=\"text-xs text-muted-foreground\">\n          {helper}\n        </p>\n      )}\n      {error && (\n        <p id={errorId} role=\"alert\" className=\"text-xs font-medium text-destructive\">\n          {error}\n        </p>\n      )}\n    </div>\n  );\n}\n\n/* ------------------------------------------------------------------------- */\n/* <PasswordInput>                                                            */\n/* ------------------------------------------------------------------------- */\n\nexport interface PasswordInputProps\n  extends Omit<React.ComponentProps<typeof Input>, 'type'> {\n  /** Optional accessible label for the show/hide button. */\n  toggleLabel?: { show: string; hide: string };\n}\n\n/**\n * Password input with a built-in show/hide toggle. Forwards every other prop\n * (including refs, onChange, value) directly to the underlying <Input>.\n */\nexport const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(\n  function PasswordInput(\n    { className, toggleLabel = { show: 'Show password', hide: 'Hide password' }, ...rest },\n    ref\n  ) {\n    const [visible, setVisible] = React.useState(false);\n    return (\n      <div className=\"relative\">\n        <Input\n          ref={ref}\n          type={visible ? 'text' : 'password'}\n          className={cn('pr-10', className)}\n          {...rest}\n        />\n        <button\n          type=\"button\"\n          onClick={() => setVisible((v) => !v)}\n          aria-label={visible ? toggleLabel.hide : toggleLabel.show}\n          aria-pressed={visible}\n          className=\"absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n        >\n          {visible ? <EyeOff className=\"size-4\" /> : <Eye className=\"size-4\" />}\n        </button>\n      </div>\n    );\n  }\n);\n"],"names":["FormField","label","helper","error","required","idProp","className","labelClassName","children","generatedId","React","id","helperId","errorId","describedBy","child","cn","jsxs","jsx","PasswordInput","toggleLabel","rest","ref","visible","setVisible","Input","v","EyeOff","Eye"],"mappings":";;;;;AAgDO,SAASA,EAAU;AAAA,EACxB,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,IAAIC;AAAA,EACJ,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AACF,GAAsC;AACpC,QAAMC,IAAcC,EAAM,MAAA,GACpBC,IAAKN,KAAUI,GACfG,IAAWV,IAASS,IAAK,YAAY,QACrCE,IAAUV,IAAQQ,IAAK,WAAW,QAClCG,IAAc,CAACF,GAAUC,CAAO,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK,QAE/DE,IAAQL,EAAM,aAAaF,GAAU;AAAA,IACzC,IAAAG;AAAA,IACA,gBAAgBR,IAAQ,KAAO;AAAA,IAC/B,oBAAoBW;AAAA,EAAA,CACrB;AAED,2BACG,OAAA,EAAI,WAAWE,EAAG,yBAAyBV,CAAS,GACnD,UAAA;AAAA,IAAA,gBAAAW;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAASN;AAAA,QACT,WAAWK,EAAG,oDAAoDT,CAAc;AAAA,QAE/E,UAAA;AAAA,UAAAN;AAAA,UACAG,KACC,gBAAAc,EAAC,QAAA,EAAK,WAAU,2BAA0B,eAAY,QAAO,UAAA,IAAA,CAE7D;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGHH;AAAA,IACAb,KAAU,CAACC,KACV,gBAAAe,EAAC,OAAE,IAAIN,GAAU,WAAU,iCACxB,UAAAV,EAAA,CACH;AAAA,IAEDC,uBACE,KAAA,EAAE,IAAIU,GAAS,MAAK,SAAQ,WAAU,wCACpC,UAAAV,EAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;AAgBO,MAAMgB,IAAgBT,EAAM;AAAA,EACjC,SACE,EAAE,WAAAJ,GAAW,aAAAc,IAAc,EAAE,MAAM,iBAAiB,MAAM,gBAAA,GAAmB,GAAGC,EAAA,GAChFC,GACA;AACA,UAAM,CAACC,GAASC,CAAU,IAAId,EAAM,SAAS,EAAK;AAClD,WACE,gBAAAO,EAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,KAAAH;AAAA,UACA,MAAMC,IAAU,SAAS;AAAA,UACzB,WAAWP,EAAG,SAASV,CAAS;AAAA,UAC/B,GAAGe;AAAA,QAAA;AAAA,MAAA;AAAA,MAEN,gBAAAH;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS,MAAMM,EAAW,CAACE,MAAM,CAACA,CAAC;AAAA,UACnC,cAAYH,IAAUH,EAAY,OAAOA,EAAY;AAAA,UACrD,gBAAcG;AAAA,UACd,WAAU;AAAA,UAET,UAAAA,sBAAWI,GAAA,EAAO,WAAU,UAAS,IAAK,gBAAAT,EAACU,GAAA,EAAI,WAAU,SAAA,CAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IACrE,GACF;AAAA,EAEJ;AACF;"}