@n3wth/ui 0.8.0 → 0.9.0

package/dist/molecules/ErrorBoundary/ErrorBoundary.js

@@ -0,0 +1,128 @@
+var d = Object.defineProperty;
+var h = (t, o, e) => o in t ? d(t, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[o] = e;
+var n = (t, o, e) => h(t, typeof o != "symbol" ? o + "" : o, e);
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import { Component as m } from "react";
+import { cn as a } from "../../utils/cn.js";
+class v extends m {
+  constructor(e) {
+    super(e);
+    n(this, "handleRetry", () => {
+      this.setState({ hasError: !1, error: null });
+    });
+    this.state = { hasError: !1, error: null };
+  }
+  static getDerivedStateFromError(e) {
+    return { hasError: !0, error: e };
+  }
+  componentDidCatch(e, s) {
+    this.props.onError?.(e, s);
+  }
+  render() {
+    return this.state.hasError ? this.props.fallback ? this.props.fallback : /* @__PURE__ */ r("div", { className: "min-h-[400px] flex items-center justify-center p-8", children: /* @__PURE__ */ l("div", { className: "text-center max-w-md", children: [
+      /* @__PURE__ */ r("div", { className: "w-16 h-16 mx-auto mb-6 rounded-full bg-[var(--color-coral)]/10 flex items-center justify-center", children: /* @__PURE__ */ r(
+        "svg",
+        {
+          className: "w-8 h-8 text-[var(--color-coral)]",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          stroke: "currentColor",
+          children: /* @__PURE__ */ r(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ r("h2", { className: "text-xl font-semibold text-[var(--color-white)] mb-2", children: "Something went wrong" }),
+      /* @__PURE__ */ r("p", { className: "text-[var(--color-grey-400)] mb-6", children: "We encountered an unexpected error. Please try again." }),
+      /* @__PURE__ */ r(
+        "button",
+        {
+          onClick: this.handleRetry,
+          className: a(
+            "px-6 py-3 rounded-full font-medium",
+            "bg-[var(--glass-bg)] border border-[var(--glass-border)]",
+            "hover:bg-[var(--glass-highlight)] transition-colors"
+          ),
+          children: "Try Again"
+        }
+      )
+    ] }) }) : this.props.children;
+  }
+}
+function f({
+  title: t = "Page Error",
+  message: o = "This page encountered an error and could not be displayed.",
+  showReload: e = !0,
+  showHomeLink: s = !0,
+  homeUrl: i = "/",
+  className: c
+}) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: a(
+        "min-h-screen flex items-center justify-center p-8",
+        c
+      ),
+      children: /* @__PURE__ */ l("div", { className: "text-center max-w-md", children: [
+        /* @__PURE__ */ r("div", { className: "w-20 h-20 mx-auto mb-8 rounded-full bg-[var(--color-coral)]/10 flex items-center justify-center", children: /* @__PURE__ */ r(
+          "svg",
+          {
+            className: "w-10 h-10 text-[var(--color-coral)]",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            children: /* @__PURE__ */ r(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ r("h1", { className: "text-2xl font-semibold text-[var(--color-white)] mb-3", children: t }),
+        /* @__PURE__ */ r("p", { className: "text-[var(--color-grey-400)] mb-8", children: o }),
+        /* @__PURE__ */ l("div", { className: "flex gap-4 justify-center", children: [
+          e && /* @__PURE__ */ r(
+            "button",
+            {
+              onClick: () => window.location.reload(),
+              className: a(
+                "px-6 py-3 rounded-full font-medium",
+                "bg-[var(--glass-bg)] border border-[var(--glass-border)]",
+                "hover:bg-[var(--glass-highlight)] transition-colors"
+              ),
+              children: "Reload Page"
+            }
+          ),
+          s && /* @__PURE__ */ r(
+            "a",
+            {
+              href: i,
+              className: a(
+                "px-6 py-3 rounded-full font-medium",
+                "bg-[var(--glass-bg)] border border-[var(--glass-border)]",
+                "hover:bg-[var(--glass-highlight)] transition-colors"
+              ),
+              children: "Go Home"
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  v as ErrorBoundary,
+  f as ErrorFallback
+};
+//# sourceMappingURL=ErrorBoundary.js.map

package/dist/molecules/ErrorBoundary/ErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.js","sources":["../../../src/molecules/ErrorBoundary/ErrorBoundary.tsx"],"sourcesContent":["import { Component, type ReactNode } from 'react'\nimport { cn } from '../../utils/cn'\n\nexport interface ErrorBoundaryProps {\n  /** Child components to wrap */\n  children: ReactNode\n  /** Custom fallback UI */\n  fallback?: ReactNode\n  /** Callback when error is caught */\n  onError?: (error: Error, errorInfo: React.ErrorInfo) => void\n}\n\ninterface ErrorBoundaryState {\n  hasError: boolean\n  error: Error | null\n}\n\n/**\n * Error boundary component that catches JavaScript errors in child components\n * Displays fallback UI and optionally reports errors via callback\n */\nexport class ErrorBoundary extends Component<\n  ErrorBoundaryProps,\n  ErrorBoundaryState\n> {\n  constructor(props: ErrorBoundaryProps) {\n    super(props)\n    this.state = { hasError: false, error: null }\n  }\n\n  static getDerivedStateFromError(error: Error): ErrorBoundaryState {\n    return { hasError: true, error }\n  }\n\n  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {\n    this.props.onError?.(error, errorInfo)\n  }\n\n  handleRetry = (): void => {\n    this.setState({ hasError: false, error: null })\n  }\n\n  render(): ReactNode {\n    if (this.state.hasError) {\n      if (this.props.fallback) {\n        return this.props.fallback\n      }\n\n      return (\n        <div className=\"min-h-[400px] flex items-center justify-center p-8\">\n          <div className=\"text-center max-w-md\">\n            <div className=\"w-16 h-16 mx-auto mb-6 rounded-full bg-[var(--color-coral)]/10 flex items-center justify-center\">\n              <svg\n                className=\"w-8 h-8 text-[var(--color-coral)]\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={2}\n                  d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n                />\n              </svg>\n            </div>\n            <h2 className=\"text-xl font-semibold text-[var(--color-white)] mb-2\">\n              Something went wrong\n            </h2>\n            <p className=\"text-[var(--color-grey-400)] mb-6\">\n              We encountered an unexpected error. Please try again.\n            </p>\n            <button\n              onClick={this.handleRetry}\n              className={cn(\n                'px-6 py-3 rounded-full font-medium',\n                'bg-[var(--glass-bg)] border border-[var(--glass-border)]',\n                'hover:bg-[var(--glass-highlight)] transition-colors'\n              )}\n            >\n              Try Again\n            </button>\n          </div>\n        </div>\n      )\n    }\n\n    return this.props.children\n  }\n}\n\nexport interface ErrorFallbackProps {\n  /** Error title */\n  title?: string\n  /** Error message */\n  message?: string\n  /** Show reload button */\n  showReload?: boolean\n  /** Show home link */\n  showHomeLink?: boolean\n  /** Home URL (default: /) */\n  homeUrl?: string\n  /** Additional class names */\n  className?: string\n}\n\n/**\n * Standalone error fallback component for full-page errors\n */\nexport function ErrorFallback({\n  title = 'Page Error',\n  message = 'This page encountered an error and could not be displayed.',\n  showReload = true,\n  showHomeLink = true,\n  homeUrl = '/',\n  className,\n}: ErrorFallbackProps) {\n  return (\n    <div\n      className={cn(\n        'min-h-screen flex items-center justify-center p-8',\n        className\n      )}\n    >\n      <div className=\"text-center max-w-md\">\n        <div className=\"w-20 h-20 mx-auto mb-8 rounded-full bg-[var(--color-coral)]/10 flex items-center justify-center\">\n          <svg\n            className=\"w-10 h-10 text-[var(--color-coral)]\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2}\n              d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n            />\n          </svg>\n        </div>\n        <h1 className=\"text-2xl font-semibold text-[var(--color-white)] mb-3\">\n          {title}\n        </h1>\n        <p className=\"text-[var(--color-grey-400)] mb-8\">{message}</p>\n        <div className=\"flex gap-4 justify-center\">\n          {showReload && (\n            <button\n              onClick={() => window.location.reload()}\n              className={cn(\n                'px-6 py-3 rounded-full font-medium',\n                'bg-[var(--glass-bg)] border border-[var(--glass-border)]',\n                'hover:bg-[var(--glass-highlight)] transition-colors'\n              )}\n            >\n              Reload Page\n            </button>\n          )}\n          {showHomeLink && (\n            <a\n              href={homeUrl}\n              className={cn(\n                'px-6 py-3 rounded-full font-medium',\n                'bg-[var(--glass-bg)] border border-[var(--glass-border)]',\n                'hover:bg-[var(--glass-highlight)] transition-colors'\n              )}\n            >\n              Go Home\n            </a>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":["ErrorBoundary","Component","props","__publicField","error","errorInfo","jsxs","jsx","cn","ErrorFallback","title","message","showReload","showHomeLink","homeUrl","className"],"mappings":"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"}

package/dist/molecules/MobileDrawer/MobileDrawer.js

@@ -0,0 +1,78 @@
+import { jsxs as k, jsx as u } from "react/jsx-runtime";
+import { useRef as f, useEffect as l, useCallback as p } from "react";
+import { cn as m } from "../../utils/cn.js";
+function j({
+  isOpen: e,
+  onClose: o,
+  children: b,
+  width: y = "280px",
+  position: i = "right",
+  zIndex: s = 50,
+  ariaLabel: v = "Navigation menu",
+  className: h,
+  ...x
+}) {
+  const r = f(null), a = f(null);
+  l(() => (e ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
+    document.body.style.overflow = "";
+  }), [e]), l(() => {
+    const t = (n) => {
+      n.key === "Escape" && e && o();
+    };
+    return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+  }, [e, o]), l(() => {
+    e ? (a.current = document.activeElement, r.current?.querySelector(
+      'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    )?.focus()) : a.current && (a.current.focus(), a.current = null);
+  }, [e]);
+  const E = p((t) => {
+    if (t.key !== "Tab" || !r.current) return;
+    const n = r.current.querySelectorAll(
+      'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    ), d = n[0], c = n[n.length - 1];
+    t.shiftKey && document.activeElement === d ? (t.preventDefault(), c?.focus()) : !t.shiftKey && document.activeElement === c && (t.preventDefault(), d?.focus());
+  }, []), w = i === "right" ? e ? "translate-x-0" : "translate-x-full" : e ? "translate-x-0" : "-translate-x-full", g = i === "right" ? "right-0" : "left-0";
+  return /* @__PURE__ */ k("div", { className: h, children: [
+    /* @__PURE__ */ u(
+      "div",
+      {
+        className: m(
+          "fixed inset-0 bg-black/50 transition-opacity duration-300",
+          e ? "opacity-100" : "opacity-0 pointer-events-none"
+        ),
+        style: { zIndex: s },
+        onClick: o,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ u(
+      "div",
+      {
+        ref: r,
+        role: "dialog",
+        "aria-modal": e,
+        "aria-label": v,
+        "aria-hidden": !e,
+        className: m(
+          "mobile-menu-drawer",
+          "fixed top-0 h-full",
+          "transition-transform duration-300 ease-out",
+          w,
+          g
+        ),
+        style: {
+          width: y,
+          maxWidth: "80vw",
+          zIndex: s + 1
+        },
+        onKeyDown: E,
+        ...x,
+        children: b
+      }
+    )
+  ] });
+}
+export {
+  j as MobileDrawer
+};
+//# sourceMappingURL=MobileDrawer.js.map

package/dist/molecules/MobileDrawer/MobileDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileDrawer.js","sources":["../../../src/molecules/MobileDrawer/MobileDrawer.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, useEffect, useRef, useCallback } from 'react'\nimport { cn } from '../../utils/cn'\n\nexport interface MobileDrawerProps extends HTMLAttributes<HTMLDivElement> {\n  /** Whether the drawer is open */\n  isOpen: boolean\n  /** Callback when drawer should close */\n  onClose: () => void\n  /** Drawer content */\n  children: ReactNode\n  /** Width of the drawer */\n  width?: string\n  /** Position of the drawer */\n  position?: 'left' | 'right'\n  /** Z-index for the drawer */\n  zIndex?: number\n  /** Accessible label for the drawer */\n  ariaLabel?: string\n}\n\nexport function MobileDrawer({\n  isOpen,\n  onClose,\n  children,\n  width = '280px',\n  position = 'right',\n  zIndex = 50,\n  ariaLabel = 'Navigation menu',\n  className,\n  ...props\n}: MobileDrawerProps) {\n  const drawerRef = useRef<HTMLDivElement>(null)\n  const previousActiveElement = useRef<HTMLElement | null>(null)\n\n  // Lock body scroll when open\n  useEffect(() => {\n    if (isOpen) {\n      document.body.style.overflow = 'hidden'\n    } else {\n      document.body.style.overflow = ''\n    }\n    return () => {\n      document.body.style.overflow = ''\n    }\n  }, [isOpen])\n\n  // Handle escape key\n  useEffect(() => {\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === 'Escape' && isOpen) {\n        onClose()\n      }\n    }\n    document.addEventListener('keydown', handleEscape)\n    return () => document.removeEventListener('keydown', handleEscape)\n  }, [isOpen, onClose])\n\n  // Focus management\n  useEffect(() => {\n    if (isOpen) {\n      previousActiveElement.current = document.activeElement as HTMLElement\n      // Focus first focusable element in drawer\n      const firstFocusable = drawerRef.current?.querySelector<HTMLElement>(\n        'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])'\n      )\n      firstFocusable?.focus()\n    } else if (previousActiveElement.current) {\n      previousActiveElement.current.focus()\n      previousActiveElement.current = null\n    }\n  }, [isOpen])\n\n  // Focus trap\n  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {\n    if (e.key !== 'Tab' || !drawerRef.current) return\n\n    const focusableElements = drawerRef.current.querySelectorAll<HTMLElement>(\n      'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])'\n    )\n    const firstElement = focusableElements[0]\n    const lastElement = focusableElements[focusableElements.length - 1]\n\n    if (e.shiftKey && document.activeElement === firstElement) {\n      e.preventDefault()\n      lastElement?.focus()\n    } else if (!e.shiftKey && document.activeElement === lastElement) {\n      e.preventDefault()\n      firstElement?.focus()\n    }\n  }, [])\n\n  const translateClass =\n    position === 'right'\n      ? isOpen\n        ? 'translate-x-0'\n        : 'translate-x-full'\n      : isOpen\n        ? 'translate-x-0'\n        : '-translate-x-full'\n\n  const positionClass = position === 'right' ? 'right-0' : 'left-0'\n\n  return (\n    <div className={className}>\n      {/* Backdrop overlay */}\n      <div\n        className={cn(\n          'fixed inset-0 bg-black/50 transition-opacity duration-300',\n          isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'\n        )}\n        style={{ zIndex }}\n        onClick={onClose}\n        aria-hidden=\"true\"\n      />\n\n      {/* Drawer panel */}\n      <div\n        ref={drawerRef}\n        role=\"dialog\"\n        aria-modal={isOpen}\n        aria-label={ariaLabel}\n        aria-hidden={!isOpen}\n        className={cn(\n          'mobile-menu-drawer',\n          'fixed top-0 h-full',\n          'transition-transform duration-300 ease-out',\n          translateClass,\n          positionClass\n        )}\n        style={{\n          width,\n          maxWidth: '80vw',\n          zIndex: zIndex + 1,\n        }}\n        onKeyDown={handleKeyDown}\n        {...props}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n"],"names":["MobileDrawer","isOpen","onClose","children","width","position","zIndex","ariaLabel","className","props","drawerRef","useRef","previousActiveElement","useEffect","handleEscape","e","handleKeyDown","useCallback","focusableElements","firstElement","lastElement","translateClass","positionClass","jsxs","jsx","cn"],"mappings":";;;AAoBO,SAASA,EAAa;AAAA,EAC3B,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AAAA,EACX,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,GAAGC;AACL,GAAsB;AACpB,QAAMC,IAAYC,EAAuB,IAAI,GACvCC,IAAwBD,EAA2B,IAAI;AAG7D,EAAAE,EAAU,OACJZ,IACF,SAAS,KAAK,MAAM,WAAW,WAE/B,SAAS,KAAK,MAAM,WAAW,IAE1B,MAAM;AACX,aAAS,KAAK,MAAM,WAAW;AAAA,EACjC,IACC,CAACA,CAAM,CAAC,GAGXY,EAAU,MAAM;AACd,UAAMC,IAAe,CAACC,MAAqB;AACzC,MAAIA,EAAE,QAAQ,YAAYd,KACxBC,EAAA;AAAA,IAEJ;AACA,oBAAS,iBAAiB,WAAWY,CAAY,GAC1C,MAAM,SAAS,oBAAoB,WAAWA,CAAY;AAAA,EACnE,GAAG,CAACb,GAAQC,CAAO,CAAC,GAGpBW,EAAU,MAAM;AACd,IAAIZ,KACFW,EAAsB,UAAU,SAAS,eAElBF,EAAU,SAAS;AAAA,MACxC;AAAA,IAAA,GAEc,MAAA,KACPE,EAAsB,YAC/BA,EAAsB,QAAQ,MAAA,GAC9BA,EAAsB,UAAU;AAAA,EAEpC,GAAG,CAACX,CAAM,CAAC;AAGX,QAAMe,IAAgBC,EAAY,CAACF,MAA2B;AAC5D,QAAIA,EAAE,QAAQ,SAAS,CAACL,EAAU,QAAS;AAE3C,UAAMQ,IAAoBR,EAAU,QAAQ;AAAA,MAC1C;AAAA,IAAA,GAEIS,IAAeD,EAAkB,CAAC,GAClCE,IAAcF,EAAkBA,EAAkB,SAAS,CAAC;AAElE,IAAIH,EAAE,YAAY,SAAS,kBAAkBI,KAC3CJ,EAAE,eAAA,GACFK,GAAa,MAAA,KACJ,CAACL,EAAE,YAAY,SAAS,kBAAkBK,MACnDL,EAAE,eAAA,GACFI,GAAc,MAAA;AAAA,EAElB,GAAG,CAAA,CAAE,GAECE,IACJhB,MAAa,UACTJ,IACE,kBACA,qBACFA,IACE,kBACA,qBAEFqB,IAAgBjB,MAAa,UAAU,YAAY;AAEzD,SACE,gBAAAkB,EAAC,SAAI,WAAAf,GAEH,UAAA;AAAA,IAAA,gBAAAgB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC;AAAA,UACT;AAAA,UACAxB,IAAS,gBAAgB;AAAA,QAAA;AAAA,QAE3B,OAAO,EAAE,QAAAK,EAAA;AAAA,QACT,SAASJ;AAAA,QACT,eAAY;AAAA,MAAA;AAAA,IAAA;AAAA,IAId,gBAAAsB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKd;AAAA,QACL,MAAK;AAAA,QACL,cAAYT;AAAA,QACZ,cAAYM;AAAA,QACZ,eAAa,CAACN;AAAA,QACd,WAAWwB;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACAJ;AAAA,UACAC;AAAA,QAAA;AAAA,QAEF,OAAO;AAAA,UACL,OAAAlB;AAAA,UACA,UAAU;AAAA,UACV,QAAQE,IAAS;AAAA,QAAA;AAAA,QAEnB,WAAWU;AAAA,QACV,GAAGP;AAAA,QAEH,UAAAN;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}

package/dist/molecules/Modal/Modal.js

@@ -0,0 +1,262 @@
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as I, useRef as w, useId as k, useState as M, useEffect as u, useCallback as N } from "react";
+import { createPortal as R } from "react-dom";
+import { cn as s } from "../../utils/cn.js";
+const E = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])', S = {
+  sm: "max-w-[400px]",
+  md: "max-w-[560px]",
+  lg: "max-w-[720px]",
+  full: "max-w-none w-screen h-[100dvh] !rounded-none"
+}, q = I(
+  ({
+    isOpen: t,
+    onClose: o,
+    children: r,
+    size: l = "md",
+    closeOnBackdropClick: i = !0,
+    closeOnEscape: m = !0,
+    ariaLabel: f,
+    className: T,
+    ...D
+  }, B) => {
+    const C = w(null), d = B || C, c = w(null), y = k(), b = k(), [F, p] = M(!1), [v, x] = M(!1);
+    u(() => {
+      if (t)
+        p(!0), requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            x(!0);
+          });
+        });
+      else {
+        x(!1);
+        const e = setTimeout(() => p(!1), 200);
+        return () => clearTimeout(e);
+      }
+    }, [t]), u(() => {
+      if (t) {
+        const e = window.scrollY;
+        document.body.style.overflow = "hidden", document.body.style.position = "fixed", document.body.style.top = `-${e}px`, document.body.style.width = "100%";
+      } else {
+        const e = document.body.style.top;
+        document.body.style.overflow = "", document.body.style.position = "", document.body.style.top = "", document.body.style.width = "", e && window.scrollTo(0, parseInt(e, 10) * -1);
+      }
+      return () => {
+        document.body.style.overflow = "", document.body.style.position = "", document.body.style.top = "", document.body.style.width = "";
+      };
+    }, [t]), u(() => {
+      if (!m || !t) return;
+      const e = (n) => {
+        n.key === "Escape" && (n.stopPropagation(), o());
+      };
+      return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+    }, [t, o, m]), u(() => {
+      if (t) {
+        c.current = document.activeElement;
+        const e = d.current;
+        if (e) {
+          const n = e.querySelector(E);
+          n ? n.focus() : e.focus();
+        }
+      } else c.current && (c.current.focus(), c.current = null);
+    }, [t, d]);
+    const j = N(
+      (e) => {
+        if (e.key !== "Tab" || !d.current) return;
+        const n = d.current.querySelectorAll(E);
+        if (n.length === 0) {
+          e.preventDefault();
+          return;
+        }
+        const g = n[0], h = n[n.length - 1];
+        e.shiftKey && document.activeElement === g ? (e.preventDefault(), h?.focus()) : !e.shiftKey && document.activeElement === h && (e.preventDefault(), g?.focus());
+      },
+      [d]
+    ), A = N(
+      (e) => {
+        i && e.target === e.currentTarget && o();
+      },
+      [i, o]
+    );
+    return F ? R(
+      /* @__PURE__ */ a(
+        "div",
+        {
+          className: s(
+            "fixed inset-0 z-50 flex items-center justify-center",
+            // Backdrop
+            "transition-[background-color,backdrop-filter] duration-200 ease-out",
+            v ? "bg-black/60 backdrop-blur-sm" : "bg-black/0 backdrop-blur-none",
+            // Reduced motion: instant transitions
+            "motion-reduce:transition-none"
+          ),
+          onClick: A,
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ a(
+            "div",
+            {
+              ref: d,
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-labelledby": f ? void 0 : y,
+              "aria-label": f,
+              "aria-describedby": b,
+              tabIndex: -1,
+              className: s(
+                "relative w-full mx-4",
+                S[l],
+                // Glass panel styling
+                "bg-[var(--color-bg-secondary)] border border-[var(--glass-border)]",
+                "backdrop-blur-lg",
+                l !== "full" && "rounded-2xl",
+                // Focus ring
+                "focus-ring",
+                // Animation
+                "transition-[opacity,transform] duration-200 ease-out",
+                v ? "opacity-100 scale-100 translate-y-0" : "opacity-0 scale-95 translate-y-2",
+                // Reduced motion: no scale/translate, instant
+                "motion-reduce:transition-none motion-reduce:transform-none",
+                T
+              ),
+              onKeyDown: j,
+              "data-modal-label-id": y,
+              "data-modal-description-id": b,
+              ...D,
+              children: r
+            }
+          )
+        }
+      ),
+      document.body
+    ) : null;
+  }
+);
+q.displayName = "Modal";
+function K({ children: t, className: o, ...r }) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: s(
+        "px-6 pt-6 pb-0",
+        "flex items-start justify-between gap-4",
+        o
+      ),
+      ...r,
+      children: t
+    }
+  );
+}
+K.displayName = "ModalHeader";
+function L({ children: t, as: o = "h2", className: r, id: l, ...i }) {
+  return /* @__PURE__ */ a(
+    o,
+    {
+      id: l,
+      className: s(
+        "font-display text-lg font-semibold text-[var(--color-white)]",
+        "tracking-tight",
+        r
+      ),
+      ...i,
+      children: t
+    }
+  );
+}
+L.displayName = "ModalTitle";
+function H({ children: t, className: o, id: r, ...l }) {
+  return /* @__PURE__ */ a(
+    "p",
+    {
+      id: r,
+      className: s(
+        "text-sm text-[var(--color-grey-400)]",
+        "mt-1",
+        o
+      ),
+      ...l,
+      children: t
+    }
+  );
+}
+H.displayName = "ModalDescription";
+function P({ children: t, className: o, ...r }) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: s(
+        "px-6 py-4",
+        "overflow-y-auto",
+        o
+      ),
+      ...r,
+      children: t
+    }
+  );
+}
+P.displayName = "ModalBody";
+function Y({ children: t, className: o, ...r }) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: s(
+        "px-6 pb-6 pt-0",
+        "border-t border-[var(--glass-border)]",
+        "mt-2 pt-4",
+        "flex items-center justify-end gap-3",
+        o
+      ),
+      ...r,
+      children: t
+    }
+  );
+}
+Y.displayName = "ModalFooter";
+function z({
+  ariaLabel: t = "Close",
+  className: o,
+  onClick: r,
+  ...l
+}) {
+  return /* @__PURE__ */ a(
+    "button",
+    {
+      type: "button",
+      "aria-label": t,
+      className: s(
+        "inline-flex items-center justify-center",
+        "w-8 h-8 rounded-lg",
+        "text-[var(--color-grey-400)]",
+        "hover:text-[var(--color-white)] hover:bg-[var(--glass-bg)]",
+        "transition-colors duration-200",
+        "focus-ring",
+        "motion-reduce:transition-none",
+        o
+      ),
+      onClick: r,
+      ...l,
+      children: /* @__PURE__ */ a(
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 16 16",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          children: /* @__PURE__ */ a("path", { d: "M4 4l8 8M12 4l-8 8" })
+        }
+      )
+    }
+  );
+}
+z.displayName = "ModalCloseButton";
+export {
+  q as Modal,
+  P as ModalBody,
+  z as ModalCloseButton,
+  H as ModalDescription,
+  Y as ModalFooter,
+  K as ModalHeader,
+  L as ModalTitle
+};
+//# sourceMappingURL=Modal.js.map

package/dist/molecules/Modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sources":["../../../src/molecules/Modal/Modal.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useRef,\n  useCallback,\n  useId,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { cn } from '../../utils/cn'\n\nexport type ModalSize = 'sm' | 'md' | 'lg' | 'full'\n\nexport interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {\n  /** Whether the modal is open */\n  isOpen: boolean\n  /** Callback when modal should close */\n  onClose: () => void\n  /** Modal content */\n  children: ReactNode\n  /** Size of the modal panel */\n  size?: ModalSize\n  /** Whether clicking the backdrop closes the modal */\n  closeOnBackdropClick?: boolean\n  /** Whether pressing Escape closes the modal */\n  closeOnEscape?: boolean\n  /** Accessible label for the modal (used if no Modal.Header is provided) */\n  ariaLabel?: string\n}\n\nconst FOCUSABLE_SELECTOR =\n  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])'\n\nconst sizeClasses: Record<ModalSize, string> = {\n  sm: 'max-w-[400px]',\n  md: 'max-w-[560px]',\n  lg: 'max-w-[720px]',\n  full: 'max-w-none w-screen h-[100dvh] !rounded-none',\n}\n\nexport const Modal = forwardRef<HTMLDivElement, ModalProps>(\n  (\n    {\n      isOpen,\n      onClose,\n      children,\n      size = 'md',\n      closeOnBackdropClick = true,\n      closeOnEscape = true,\n      ariaLabel,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const internalRef = useRef<HTMLDivElement>(null)\n    const panelRef = (ref as React.RefObject<HTMLDivElement>) || internalRef\n    const previousActiveElement = useRef<HTMLElement | null>(null)\n    const labelId = useId()\n    const descriptionId = useId()\n    const [mounted, setMounted] = useState(false)\n    const [visible, setVisible] = useState(false)\n\n    // Mount/unmount with animation\n    useEffect(() => {\n      if (isOpen) {\n        setMounted(true)\n        // Trigger enter animation on next frame\n        requestAnimationFrame(() => {\n          requestAnimationFrame(() => {\n            setVisible(true)\n          })\n        })\n      } else {\n        setVisible(false)\n        const timer = setTimeout(() => setMounted(false), 200)\n        return () => clearTimeout(timer)\n      }\n    }, [isOpen])\n\n    // Lock body scroll when open\n    useEffect(() => {\n      if (isOpen) {\n        const scrollY = window.scrollY\n        document.body.style.overflow = 'hidden'\n        document.body.style.position = 'fixed'\n        document.body.style.top = `-${scrollY}px`\n        document.body.style.width = '100%'\n      } else {\n        const top = document.body.style.top\n        document.body.style.overflow = ''\n        document.body.style.position = ''\n        document.body.style.top = ''\n        document.body.style.width = ''\n        if (top) {\n          window.scrollTo(0, parseInt(top, 10) * -1)\n        }\n      }\n      return () => {\n        document.body.style.overflow = ''\n        document.body.style.position = ''\n        document.body.style.top = ''\n        document.body.style.width = ''\n      }\n    }, [isOpen])\n\n    // Escape key handler\n    useEffect(() => {\n      if (!closeOnEscape || !isOpen) return\n      const handleEscape = (e: KeyboardEvent) => {\n        if (e.key === 'Escape') {\n          e.stopPropagation()\n          onClose()\n        }\n      }\n      document.addEventListener('keydown', handleEscape)\n      return () => document.removeEventListener('keydown', handleEscape)\n    }, [isOpen, onClose, closeOnEscape])\n\n    // Focus management\n    useEffect(() => {\n      if (isOpen) {\n        previousActiveElement.current = document.activeElement as HTMLElement\n        // Focus first focusable element in panel\n        const panel = panelRef.current\n        if (panel) {\n          const firstFocusable = panel.querySelector<HTMLElement>(FOCUSABLE_SELECTOR)\n          if (firstFocusable) {\n            firstFocusable.focus()\n          } else {\n            panel.focus()\n          }\n        }\n      } else if (previousActiveElement.current) {\n        previousActiveElement.current.focus()\n        previousActiveElement.current = null\n      }\n    }, [isOpen, panelRef])\n\n    // Focus trap\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent) => {\n        if (e.key !== 'Tab' || !panelRef.current) return\n\n        const focusableElements =\n          panelRef.current.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)\n        if (focusableElements.length === 0) {\n          e.preventDefault()\n          return\n        }\n\n        const firstElement = focusableElements[0]\n        const lastElement = focusableElements[focusableElements.length - 1]\n\n        if (e.shiftKey && document.activeElement === firstElement) {\n          e.preventDefault()\n          lastElement?.focus()\n        } else if (!e.shiftKey && document.activeElement === lastElement) {\n          e.preventDefault()\n          firstElement?.focus()\n        }\n      },\n      [panelRef]\n    )\n\n    // Backdrop click handler\n    const handleBackdropClick = useCallback(\n      (e: React.MouseEvent) => {\n        if (closeOnBackdropClick && e.target === e.currentTarget) {\n          onClose()\n        }\n      },\n      [closeOnBackdropClick, onClose]\n    )\n\n    if (!mounted) return null\n\n    return createPortal(\n      <div\n        className={cn(\n          'fixed inset-0 z-50 flex items-center justify-center',\n          // Backdrop\n          'transition-[background-color,backdrop-filter] duration-200 ease-out',\n          visible\n            ? 'bg-black/60 backdrop-blur-sm'\n            : 'bg-black/0 backdrop-blur-none',\n          // Reduced motion: instant transitions\n          'motion-reduce:transition-none'\n        )}\n        onClick={handleBackdropClick}\n        aria-hidden=\"true\"\n      >\n        {/* Panel */}\n        <div\n          ref={panelRef}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby={ariaLabel ? undefined : labelId}\n          aria-label={ariaLabel}\n          aria-describedby={descriptionId}\n          tabIndex={-1}\n          className={cn(\n            'relative w-full mx-4',\n            sizeClasses[size],\n            // Glass panel styling\n            'bg-[var(--color-bg-secondary)] border border-[var(--glass-border)]',\n            'backdrop-blur-lg',\n            size !== 'full' && 'rounded-2xl',\n            // Focus ring\n            'focus-ring',\n            // Animation\n            'transition-[opacity,transform] duration-200 ease-out',\n            visible\n              ? 'opacity-100 scale-100 translate-y-0'\n              : 'opacity-0 scale-95 translate-y-2',\n            // Reduced motion: no scale/translate, instant\n            'motion-reduce:transition-none motion-reduce:transform-none',\n            className\n          )}\n          onKeyDown={handleKeyDown}\n          // Pass through the label/description IDs via data attributes for sub-components\n          data-modal-label-id={labelId}\n          data-modal-description-id={descriptionId}\n          {...props}\n        >\n          {children}\n        </div>\n      </div>,\n      document.body\n    )\n  }\n)\n\nModal.displayName = 'Modal'\n\n// --- Compound sub-components ---\n\nexport interface ModalHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode\n}\n\nexport function ModalHeader({ children, className, ...props }: ModalHeaderProps) {\n  return (\n    <div\n      className={cn(\n        'px-6 pt-6 pb-0',\n        'flex items-start justify-between gap-4',\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\nModalHeader.displayName = 'ModalHeader'\n\nexport interface ModalTitleProps extends HTMLAttributes<HTMLHeadingElement> {\n  children: ReactNode\n  as?: 'h1' | 'h2' | 'h3' | 'h4'\n}\n\nexport function ModalTitle({ children, as: Tag = 'h2', className, id, ...props }: ModalTitleProps) {\n  return (\n    <Tag\n      id={id}\n      className={cn(\n        'font-display text-lg font-semibold text-[var(--color-white)]',\n        'tracking-tight',\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </Tag>\n  )\n}\n\nModalTitle.displayName = 'ModalTitle'\n\nexport interface ModalDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {\n  children: ReactNode\n}\n\nexport function ModalDescription({ children, className, id, ...props }: ModalDescriptionProps) {\n  return (\n    <p\n      id={id}\n      className={cn(\n        'text-sm text-[var(--color-grey-400)]',\n        'mt-1',\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </p>\n  )\n}\n\nModalDescription.displayName = 'ModalDescription'\n\nexport interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode\n}\n\nexport function ModalBody({ children, className, ...props }: ModalBodyProps) {\n  return (\n    <div\n      className={cn(\n        'px-6 py-4',\n        'overflow-y-auto',\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\nModalBody.displayName = 'ModalBody'\n\nexport interface ModalFooterProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode\n}\n\nexport function ModalFooter({ children, className, ...props }: ModalFooterProps) {\n  return (\n    <div\n      className={cn(\n        'px-6 pb-6 pt-0',\n        'border-t border-[var(--glass-border)]',\n        'mt-2 pt-4',\n        'flex items-center justify-end gap-3',\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\nModalFooter.displayName = 'ModalFooter'\n\nexport interface ModalCloseButtonProps extends HTMLAttributes<HTMLButtonElement> {\n  /** Accessible label for the close button */\n  ariaLabel?: string\n}\n\nexport function ModalCloseButton({\n  ariaLabel = 'Close',\n  className,\n  onClick,\n  ...props\n}: ModalCloseButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      aria-label={ariaLabel}\n      className={cn(\n        'inline-flex items-center justify-center',\n        'w-8 h-8 rounded-lg',\n        'text-[var(--color-grey-400)]',\n        'hover:text-[var(--color-white)] hover:bg-[var(--glass-bg)]',\n        'transition-colors duration-200',\n        'focus-ring',\n        'motion-reduce:transition-none',\n        className\n      )}\n      onClick={onClick}\n      {...props}\n    >\n      <svg\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n      >\n        <path d=\"M4 4l8 8M12 4l-8 8\" />\n      </svg>\n    </button>\n  )\n}\n\nModalCloseButton.displayName = 'ModalCloseButton'\n"],"names":["FOCUSABLE_SELECTOR","sizeClasses","Modal","forwardRef","isOpen","onClose","children","size","closeOnBackdropClick","closeOnEscape","ariaLabel","className","props","ref","internalRef","useRef","panelRef","previousActiveElement","labelId","useId","descriptionId","mounted","setMounted","useState","visible","setVisible","useEffect","timer","scrollY","top","handleEscape","e","panel","firstFocusable","handleKeyDown","useCallback","focusableElements","firstElement","lastElement","handleBackdropClick","createPortal","jsx","cn","ModalHeader","ModalTitle","Tag","id","ModalDescription","ModalBody","ModalFooter","ModalCloseButton","onClick"],"mappings":"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"}

package/dist/molecules/NavLink/NavLink.js

@@ -0,0 +1,38 @@
+import { jsx as d } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { cn as b } from "../../utils/cn.js";
+const m = f(
+  ({ variant: r = "default", isActive: o = !1, children: e, className: t, style: l, ...n }, a) => {
+    const s = [
+      "inline-flex items-center",
+      "text-sm font-normal",
+      "transition-[color,background-color,border-color,transform] duration-200 ease-out",
+      "focus-ring",
+      "hover:text-[--color-white]"
+    ], i = {
+      default: [],
+      underline: ["relative", "link-hover"],
+      pill: [
+        "px-3 py-1.5",
+        "rounded-full",
+        "border",
+        o ? "bg-[--color-white] border-[--color-white]" : "bg-transparent border-transparent hover:bg-[--glass-bg] hover:border-[--glass-border]"
+      ]
+    }, c = () => r === "pill" && o ? "var(--color-bg)" : "var(--color-white)";
+    return /* @__PURE__ */ d(
+      "a",
+      {
+        ref: a,
+        className: b(s, i[r], t),
+        style: { color: c(), ...l },
+        ...n,
+        children: e
+      }
+    );
+  }
+);
+m.displayName = "NavLink";
+export {
+  m as NavLink
+};
+//# sourceMappingURL=NavLink.js.map

package/dist/molecules/NavLink/NavLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavLink.js","sources":["../../../src/molecules/NavLink/NavLink.tsx"],"sourcesContent":["import { type AnchorHTMLAttributes, type ReactNode, forwardRef } from 'react'\nimport { cn } from '../../utils/cn'\n\nexport interface NavLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  variant?: 'default' | 'underline' | 'pill'\n  isActive?: boolean\n  children: ReactNode\n}\n\nexport const NavLink = forwardRef<HTMLAnchorElement, NavLinkProps>(\n  ({ variant = 'default', isActive = false, children, className, style, ...props }, ref) => {\n    const baseStyles = [\n      'inline-flex items-center',\n      'text-sm font-normal',\n      'transition-[color,background-color,border-color,transform] duration-200 ease-out',\n      'focus-ring',\n      'hover:text-[--color-white]',\n    ]\n\n    const variants = {\n      default: [],\n      underline: ['relative', 'link-hover'],\n      pill: [\n        'px-3 py-1.5',\n        'rounded-full',\n        'border',\n        isActive\n          ? 'bg-[--color-white] border-[--color-white]'\n          : 'bg-transparent border-transparent hover:bg-[--glass-bg] hover:border-[--glass-border]',\n      ],\n    }\n\n    const getColor = () => {\n      if (variant === 'pill' && isActive) return 'var(--color-bg)'\n      return 'var(--color-white)'\n    }\n\n    return (\n      <a\n        ref={ref}\n        className={cn(baseStyles, variants[variant], className)}\n        style={{ color: getColor(), ...style }}\n        {...props}\n      >\n        {children}\n      </a>\n    )\n  }\n)\n\nNavLink.displayName = 'NavLink'\n"],"names":["NavLink","forwardRef","variant","isActive","children","className","style","props","ref","baseStyles","variants","getColor","jsx","cn"],"mappings":";;;AASO,MAAMA,IAAUC;AAAA,EACrB,CAAC,EAAE,SAAAC,IAAU,WAAW,UAAAC,IAAW,IAAO,UAAAC,GAAU,WAAAC,GAAW,OAAAC,GAAO,GAAGC,EAAA,GAASC,MAAQ;AACxF,UAAMC,IAAa;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,GAGIC,IAAW;AAAA,MACf,SAAS,CAAA;AAAA,MACT,WAAW,CAAC,YAAY,YAAY;AAAA,MACpC,MAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACAP,IACI,8CACA;AAAA,MAAA;AAAA,IACN,GAGIQ,IAAW,MACXT,MAAY,UAAUC,IAAiB,oBACpC;AAGT,WACE,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAJ;AAAA,QACA,WAAWK,EAAGJ,GAAYC,EAASR,CAAO,GAAGG,CAAS;AAAA,QACtD,OAAO,EAAE,OAAOM,EAAA,GAAY,GAAGL,EAAA;AAAA,QAC9B,GAAGC;AAAA,QAEH,UAAAH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEAJ,EAAQ,cAAc;"}