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

package/dist/components/navigation/stepper/stepper.js

@@ -0,0 +1,159 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Icon } from "../../system/icon/icon.js";
+function Stepper({
+  steps,
+  currentStep,
+  className = "",
+  orientation = "horizontal",
+  onStepClick,
+  clickable = false
+}) {
+  const getStepStatus = (index) => {
+    const step = steps[index];
+    if (step.status) return step.status;
+    if (index < currentStep) return "completed";
+    if (index === currentStep) return "current";
+    return "pending";
+  };
+  const renderStep = (step, index) => {
+    const status = getStepStatus(index) || "pending";
+    const isClickable = clickable;
+    const statusStyles = {
+      pending: {
+        circle: "bg-muted text-muted-foreground border-2 border-muted",
+        title: "text-muted-foreground",
+        description: "text-muted-foreground"
+      },
+      current: {
+        circle: "bg-primary text-primary-foreground border-2 border-primary",
+        title: "text-foreground font-semibold",
+        description: "text-muted-foreground"
+      },
+      completed: {
+        circle: "bg-success text-success-foreground border-2 border-success",
+        title: "text-foreground",
+        description: "text-muted-foreground"
+      },
+      error: {
+        circle: "bg-error text-error-foreground border-2 border-error",
+        title: "text-error",
+        description: "text-error"
+      }
+    };
+    const styles = statusStyles[status];
+    const handleClick = () => {
+      if (isClickable && onStepClick) {
+        onStepClick(index);
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (isClickable && onStepClick && (e.key === "Enter" || e.key === " ")) {
+        e.preventDefault();
+        onStepClick(index);
+      }
+    };
+    if (orientation === "horizontal") {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `flex-1 flex flex-col items-center ${isClickable ? "cursor-pointer" : ""}`,
+          onClick: handleClick,
+          onKeyDown: handleKeyDown,
+          role: isClickable ? "button" : void 0,
+          tabIndex: isClickable ? 0 : void 0,
+          "aria-label": `Step ${index + 1}: ${step.title}`,
+          "aria-current": status === "current" ? "step" : void 0,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "relative flex items-center w-full", children: [
+              index > 0 && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `h-0.5 flex-1 ${status === "completed" || status === "current" ? "bg-success" : "bg-muted"}`
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `
+                relative z-10 flex items-center justify-center
+                w-10 h-10 rounded-full
+                transition-[background-color,border-color] duration-300 ease-in-out
+                ${styles.circle}
+              `,
+                  children: status === "completed" ? /* @__PURE__ */ jsx(Icon, { name: "check", size: "sm" }) : step.icon ? step.icon : /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: index + 1 })
+                }
+              ),
+              index < steps.length - 1 && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `h-0.5 flex-1 transition-colors duration-300 ease-in-out ${status === "completed" ? "bg-success" : "bg-muted"}`
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: `mt-3 text-center text-sm transition-colors duration-300 ease-in-out ${styles.title}`, children: [
+              step.title,
+              step.optional && /* @__PURE__ */ jsx("span", { className: "ml-1 text-xs text-muted-foreground", children: "(Optional)" }),
+              step.description && /* @__PURE__ */ jsx("p", { className: `text-xs mt-1 transition-colors duration-300 ease-in-out ${styles.description}`, children: step.description })
+            ] })
+          ]
+        },
+        index
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `flex gap-4 ${index < steps.length - 1 ? "pb-8" : ""} ${isClickable ? "cursor-pointer" : ""}`,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        role: isClickable ? "button" : void 0,
+        tabIndex: isClickable ? 0 : void 0,
+        "aria-label": `Step ${index + 1}: ${step.title}`,
+        "aria-current": status === "current" ? "step" : void 0,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `
+              flex items-center justify-center
+              w-10 h-10 rounded-full shrink-0
+              transition-[background-color,border-color] duration-300 ease-in-out
+              ${styles.circle}
+            `,
+                children: status === "completed" ? /* @__PURE__ */ jsx(Icon, { name: "check", size: "sm" }) : step.icon ? step.icon : /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: index + 1 })
+              }
+            ),
+            index < steps.length - 1 && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `w-0.5 flex-1 mt-2 transition-colors duration-300 ease-in-out ${status === "completed" ? "bg-success" : "bg-muted"}`
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: `flex-1 pt-2 text-base transition-colors duration-300 ease-in-out ${styles.title}`, children: [
+            step.title,
+            step.optional && /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs text-muted-foreground", children: "(Optional)" }),
+            step.description && /* @__PURE__ */ jsx("p", { className: `text-sm mt-1 transition-colors duration-300 ease-in-out ${styles.description}`, children: step.description })
+          ] })
+        ]
+      },
+      index
+    );
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `
+        ${orientation === "horizontal" ? "flex items-start" : "flex flex-col"}
+        ${className}
+      `,
+      children: steps.map((step, index) => renderStep(step, index))
+    }
+  );
+}
+Stepper.displayName = "Stepper";
+export {
+  Stepper as default
+};
+//# sourceMappingURL=stepper.js.map

package/dist/components/navigation/stepper/stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.js","sources":["../../../../src/components/navigation/stepper/stepper.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport Icon from '../../system/icon/icon';\n\nexport type StepProps = {\n  /** Primary text label for the step */\n  title: string;\n  /** Optional secondary description text */\n  description?: string;\n  /** Custom icon to display instead of step number */\n  icon?: ReactNode;\n  /** Current status of the step (auto-determined from currentStep if not set) */\n  status?: 'pending' | 'current' | 'completed' | 'error';\n  /** Whether this step can be skipped */\n  optional?: boolean;\n};\n\nexport type StepperProps = {\n  /** Array of step configurations */\n  steps: StepProps[];\n  /** Zero-based index of the currently active step */\n  currentStep: number;\n  /** Additional CSS classes for the stepper container */\n  className?: string;\n  /** Layout direction for the stepper */\n  orientation?: 'horizontal' | 'vertical';\n  /** Callback fired when a step is clicked (only when clickable is true) */\n  onStepClick?: (step: number) => void;\n  /** Enable clicking on steps for navigation */\n  clickable?: boolean;\n};\n\n/**\n * Stepper - Multi-step progress indicator\n *\n * Features:\n * - Horizontal and vertical orientations\n * - Current, completed, and pending states\n * - Optional steps\n * - Custom icons\n * - Clickable steps (for navigation)\n * - Error states\n *\n * Common uses:\n * - Multi-step forms\n * - Checkout processes\n * - Onboarding flows\n * - Wizards\n */\nfunction Stepper({\n  steps,\n  currentStep,\n  className = '',\n  orientation = 'horizontal',\n  onStepClick,\n  clickable = false\n}: Readonly<StepperProps>) {\n  const getStepStatus = (index: number): StepProps['status'] => {\n    const step = steps[index];\n    if (step.status) return step.status;\n    if (index < currentStep) return 'completed';\n    if (index === currentStep) return 'current';\n    return 'pending';\n  };\n\n  const renderStep = (step: StepProps, index: number) => {\n    const status = getStepStatus(index) || 'pending';\n    const isClickable = clickable; // allow clicking any step when clickable enabled\n\n    // Status-based styles\n    const statusStyles: Record<\n      NonNullable<StepProps['status']>,\n      {\n        circle: string;\n        title: string;\n        description: string;\n      }\n    > = {\n      pending: {\n        circle: 'bg-muted text-muted-foreground border-2 border-muted',\n        title: 'text-muted-foreground',\n        description: 'text-muted-foreground'\n      },\n      current: {\n        circle: 'bg-primary text-primary-foreground border-2 border-primary',\n        title: 'text-foreground font-semibold',\n        description: 'text-muted-foreground'\n      },\n      completed: {\n        circle: 'bg-success text-success-foreground border-2 border-success',\n        title: 'text-foreground',\n        description: 'text-muted-foreground'\n      },\n      error: {\n        circle: 'bg-error text-error-foreground border-2 border-error',\n        title: 'text-error',\n        description: 'text-error'\n      }\n    };\n\n    const styles = statusStyles[status];\n\n    const handleClick = () => {\n      if (isClickable && onStepClick) {\n        onStepClick(index);\n      }\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent) => {\n      if (isClickable && onStepClick && (e.key === 'Enter' || e.key === ' ')) {\n        e.preventDefault();\n        onStepClick(index);\n      }\n    };\n\n    if (orientation === 'horizontal') {\n      return (\n        <div\n          key={index}\n          className={`flex-1 flex flex-col items-center ${isClickable ? 'cursor-pointer' : ''}`}\n          onClick={handleClick}\n          onKeyDown={handleKeyDown}\n          role={isClickable ? 'button' : undefined}\n          tabIndex={isClickable ? 0 : undefined}\n          aria-label={`Step ${index + 1}: ${step.title}`}\n          aria-current={status === 'current' ? 'step' : undefined}\n        >\n          {/* Step Number/Icon */}\n          <div className=\"relative flex items-center w-full\">\n            {/* Connector Line (Left) */}\n            {index > 0 && (\n              <div\n                className={`h-0.5 flex-1 ${status === 'completed' || status === 'current' ? 'bg-success' : 'bg-muted'}`}\n              />\n            )}\n\n            {/* Circle */}\n            <div\n              className={`\n                relative z-10 flex items-center justify-center\n                w-10 h-10 rounded-full\n                transition-[background-color,border-color] duration-300 ease-in-out\n                ${styles.circle}\n              `}\n            >\n              {status === 'completed' ? (\n                <Icon name=\"check\" size=\"sm\" />\n              ) : step.icon ? (\n                step.icon\n              ) : (\n                <span className=\"text-sm font-semibold\">{index + 1}</span>\n              )}\n            </div>\n\n            {/* Connector Line (Right) */}\n            {index < steps.length - 1 && (\n              <div\n                className={`h-0.5 flex-1 transition-colors duration-300 ease-in-out ${status === 'completed' ? 'bg-success' : 'bg-muted'}`}\n              />\n            )}\n          </div>\n\n          {/* Label */}\n          <div className={`mt-3 text-center text-sm transition-colors duration-300 ease-in-out ${styles.title}`}>\n            {step.title}\n            {step.optional && <span className=\"ml-1 text-xs text-muted-foreground\">(Optional)</span>}\n            {step.description && (\n              <p className={`text-xs mt-1 transition-colors duration-300 ease-in-out ${styles.description}`}>\n                {step.description}\n              </p>\n            )}\n          </div>\n        </div>\n      );\n    }\n\n    // Vertical orientation\n    return (\n      <div\n        key={index}\n        className={`flex gap-4 ${index < steps.length - 1 ? 'pb-8' : ''} ${isClickable ? 'cursor-pointer' : ''}`}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        role={isClickable ? 'button' : undefined}\n        tabIndex={isClickable ? 0 : undefined}\n        aria-label={`Step ${index + 1}: ${step.title}`}\n        aria-current={status === 'current' ? 'step' : undefined}\n      >\n        {/* Icon Column */}\n        <div className=\"flex flex-col items-center\">\n          {/* Circle */}\n          <div\n            className={`\n              flex items-center justify-center\n              w-10 h-10 rounded-full shrink-0\n              transition-[background-color,border-color] duration-300 ease-in-out\n              ${styles.circle}\n            `}\n          >\n            {status === 'completed' ? (\n              <Icon name=\"check\" size=\"sm\" />\n            ) : step.icon ? (\n              step.icon\n            ) : (\n              <span className=\"text-sm font-semibold\">{index + 1}</span>\n            )}\n          </div>\n\n          {/* Connector Line */}\n          {index < steps.length - 1 && (\n            <div\n              className={`w-0.5 flex-1 mt-2 transition-colors duration-300 ease-in-out ${status === 'completed' ? 'bg-success' : 'bg-muted'}`}\n            />\n          )}\n        </div>\n\n        {/* Content Column */}\n        <div className={`flex-1 pt-2 text-base transition-colors duration-300 ease-in-out ${styles.title}`}>\n          {step.title}\n          {step.optional && <span className=\"ml-2 text-xs text-muted-foreground\">(Optional)</span>}\n          {step.description && (\n            <p className={`text-sm mt-1 transition-colors duration-300 ease-in-out ${styles.description}`}>\n              {step.description}\n            </p>\n          )}\n        </div>\n      </div>\n    );\n  };\n\n  return (\n    <div\n      className={`\n        ${orientation === 'horizontal' ? 'flex items-start' : 'flex flex-col'}\n        ${className}\n      `}\n    >\n      {steps.map((step, index) => renderStep(step, index))}\n    </div>\n  );\n}\n\nStepper.displayName = 'Stepper';\n\nexport default Stepper;\n"],"names":[],"mappings":"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"}

package/dist/components/navigation/tabs/index.d.ts

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

package/dist/components/navigation/tabs/index.d.ts.map

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

package/dist/components/navigation/tabs/tabs.d.ts

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+export type Tab = {
+    /** Unique identifier for the tab */
+    id: string;
+    /** Display text shown in the tab button */
+    label: string;
+    /** Content to render when this tab is active */
+    content: React.ReactNode;
+};
+export type TabsProps = {
+    /** Array of tab configurations with id, label, and content */
+    tabs: Tab[];
+    /** ID of the tab to display initially (defaults to first tab) */
+    defaultTab?: string;
+    /** Additional CSS classes for the tabs container */
+    className?: string;
+    /** Accessibility label for the tab list */
+    ariaLabel?: string;
+    /** Remove the bottom border from the tab list */
+    noBorder?: boolean;
+    /** Optional localStorage key to persist the active tab */
+    storageKey?: string;
+};
+/**
+ * Accessible Tabs component with animated tab switching using PageTransition
+ */
+declare function Tabs({ tabs, defaultTab, className, ariaLabel, noBorder, storageKey }: Readonly<TabsProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace Tabs {
+    var displayName: string;
+}
+export default Tabs;
+//# sourceMappingURL=tabs.d.ts.map

package/dist/components/navigation/tabs/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,MAAM,MAAM,GAAG,GAAG;IAChB,oCAAoC;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,8DAA8D;IAC9D,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,iEAAiE;IACjE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF;;GAEG;AACH,iBAAS,IAAI,CAAC,EACZ,IAAI,EACJ,UAAU,EACV,SAAc,EACd,SAAkB,EAClB,QAAgB,EAChB,UAAU,EACX,EAAE,QAAQ,CAAC,SAAS,CAAC,2CA6DrB;kBApEQ,IAAI;;;AAwEb,eAAe,IAAI,CAAC"}

package/dist/components/navigation/tabs/tabs.js

@@ -0,0 +1,61 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { PageTransition } from "../../layout/page-transition/page-transition.js";
+function Tabs({
+  tabs,
+  defaultTab,
+  className = "",
+  ariaLabel = "Tabs",
+  noBorder = false,
+  storageKey
+}) {
+  const [activeTab, setActiveTab] = useState(() => {
+    if (storageKey) {
+      const stored = localStorage.getItem(storageKey);
+      if (stored && tabs.some((tab) => tab.id === stored)) {
+        return stored;
+      }
+    }
+    return defaultTab || tabs[0]?.id;
+  });
+  const handleSetActiveTab = (tabId) => {
+    setActiveTab(tabId);
+    if (storageKey) {
+      try {
+        localStorage.setItem(storageKey, tabId);
+      } catch {
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx("div", { role: "tablist", "aria-label": ariaLabel, className: `flex ${noBorder ? "" : "border-b-2 border-border/50"}`, children: tabs.map((tab) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        role: "tab",
+        "aria-selected": activeTab === tab.id,
+        "aria-controls": `panel-${tab.id}`,
+        id: `tab-${tab.id}`,
+        onClick: () => handleSetActiveTab(tab.id),
+        className: `px-4 py-3 font-medium cursor-pointer transition-all duration-200 focus:outline-none relative hover:text-foreground hover:bg-muted/50 ${activeTab === tab.id ? "text-primary hover:text-primary after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary after:rounded-t after:transition-all after:duration-200" : "text-muted-foreground"}`,
+        children: tab.label
+      },
+      tab.id
+    )) }),
+    tabs.map((tab) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "tabpanel",
+        id: `panel-${tab.id}`,
+        "aria-labelledby": `tab-${tab.id}`,
+        hidden: activeTab !== tab.id,
+        children: activeTab === tab.id && /* @__PURE__ */ jsx(PageTransition, { type: "fade", duration: 150, children: /* @__PURE__ */ jsx("div", { className: "pt-6", children: tab.content }) })
+      },
+      tab.id
+    ))
+  ] });
+}
+Tabs.displayName = "Tabs";
+export {
+  Tabs as default
+};
+//# sourceMappingURL=tabs.js.map

package/dist/components/navigation/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sources":["../../../../src/components/navigation/tabs/tabs.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport PageTransition from '../../layout/page-transition/page-transition';\n\nexport type Tab = {\n  /** Unique identifier for the tab */\n  id: string;\n  /** Display text shown in the tab button */\n  label: string;\n  /** Content to render when this tab is active */\n  content: React.ReactNode;\n};\n\nexport type TabsProps = {\n  /** Array of tab configurations with id, label, and content */\n  tabs: Tab[];\n  /** ID of the tab to display initially (defaults to first tab) */\n  defaultTab?: string;\n  /** Additional CSS classes for the tabs container */\n  className?: string;\n  /** Accessibility label for the tab list */\n  ariaLabel?: string;\n  /** Remove the bottom border from the tab list */\n  noBorder?: boolean;\n  /** Optional localStorage key to persist the active tab */\n  storageKey?: string;\n};\n\n/**\n * Accessible Tabs component with animated tab switching using PageTransition\n */\nfunction Tabs({\n  tabs,\n  defaultTab,\n  className = '',\n  ariaLabel = 'Tabs',\n  noBorder = false,\n  storageKey\n}: Readonly<TabsProps>) {\n  const [activeTab, setActiveTab] = useState(() => {\n    if (storageKey) {\n      const stored = localStorage.getItem(storageKey);\n      if (stored && tabs.some((tab) => tab.id === stored)) {\n        return stored;\n      }\n    }\n    return defaultTab || tabs[0]?.id;\n  });\n\n  // Save to localStorage whenever activeTab changes\n  const handleSetActiveTab = (tabId: string) => {\n    setActiveTab(tabId);\n    if (storageKey) {\n      try {\n        localStorage.setItem(storageKey, tabId);\n      } catch {\n        // Persistence is best-effort; ignore storage errors\n      }\n    }\n  };\n\n  return (\n    <div className={className}>\n      <div role=\"tablist\" aria-label={ariaLabel} className={`flex ${noBorder ? '' : 'border-b-2 border-border/50'}`}>\n        {tabs.map((tab) => (\n          <button\n            key={tab.id}\n            role=\"tab\"\n            aria-selected={activeTab === tab.id}\n            aria-controls={`panel-${tab.id}`}\n            id={`tab-${tab.id}`}\n            onClick={() => handleSetActiveTab(tab.id)}\n            className={`px-4 py-3 font-medium cursor-pointer transition-all duration-200 focus:outline-none relative hover:text-foreground hover:bg-muted/50 ${\n              activeTab === tab.id\n                ? 'text-primary hover:text-primary after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary after:rounded-t after:transition-all after:duration-200'\n                : 'text-muted-foreground'\n            }`}\n          >\n            {tab.label}\n          </button>\n        ))}\n      </div>\n      {tabs.map((tab) => (\n        <div\n          key={tab.id}\n          role=\"tabpanel\"\n          id={`panel-${tab.id}`}\n          aria-labelledby={`tab-${tab.id}`}\n          hidden={activeTab !== tab.id}\n        >\n          {activeTab === tab.id && (\n            <PageTransition type=\"fade\" duration={150}>\n              <div className=\"pt-6\">{tab.content}</div>\n            </PageTransition>\n          )}\n        </div>\n      ))}\n    </div>\n  );\n}\n\nTabs.displayName = 'Tabs';\n\nexport default Tabs;\n"],"names":[],"mappings":";;;AA8BA,SAAS,KAAK;AAAA,EACZ;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,WAAW;AAAA,EACX;AACF,GAAwB;AACtB,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,MAAM;AAC/C,QAAI,YAAY;AACd,YAAM,SAAS,aAAa,QAAQ,UAAU;AAC9C,UAAI,UAAU,KAAK,KAAK,CAAC,QAAQ,IAAI,OAAO,MAAM,GAAG;AACnD,eAAO;AAAA,MACT;AAAA,IACF;AACA,WAAO,cAAc,KAAK,CAAC,GAAG;AAAA,EAChC,CAAC;AAGD,QAAM,qBAAqB,CAAC,UAAkB;AAC5C,iBAAa,KAAK;AAClB,QAAI,YAAY;AACd,UAAI;AACF,qBAAa,QAAQ,YAAY,KAAK;AAAA,MACxC,QAAQ;AAAA,MAER;AAAA,IACF;AAAA,EACF;AAEA,SACE,qBAAC,SAAI,WACH,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAI,MAAK,WAAU,cAAY,WAAW,WAAW,QAAQ,WAAW,KAAK,6BAA6B,IACxG,UAAA,KAAK,IAAI,CAAC,QACT;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,MAAK;AAAA,QACL,iBAAe,cAAc,IAAI;AAAA,QACjC,iBAAe,SAAS,IAAI,EAAE;AAAA,QAC9B,IAAI,OAAO,IAAI,EAAE;AAAA,QACjB,SAAS,MAAM,mBAAmB,IAAI,EAAE;AAAA,QACxC,WAAW,wIACT,cAAc,IAAI,KACd,kLACA,uBACN;AAAA,QAEC,UAAA,IAAI;AAAA,MAAA;AAAA,MAZA,IAAI;AAAA,IAAA,CAcZ,GACH;AAAA,IACC,KAAK,IAAI,CAAC,QACT;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,MAAK;AAAA,QACL,IAAI,SAAS,IAAI,EAAE;AAAA,QACnB,mBAAiB,OAAO,IAAI,EAAE;AAAA,QAC9B,QAAQ,cAAc,IAAI;AAAA,QAEzB,UAAA,cAAc,IAAI,MACjB,oBAAC,kBAAe,MAAK,QAAO,UAAU,KACpC,8BAAC,OAAA,EAAI,WAAU,QAAQ,UAAA,IAAI,SAAQ,EAAA,CACrC;AAAA,MAAA;AAAA,MATG,IAAI;AAAA,IAAA,CAYZ;AAAA,EAAA,GACH;AAEJ;AAEA,KAAK,cAAc;"}

package/dist/components/system/auth-provider/auth-provider.d.ts

@@ -0,0 +1,103 @@
+import { ReactNode } from 'react';
+/**
+ * Base user type - extend this in your app
+ */
+export interface AuthUser {
+    id: string;
+    [key: string]: unknown;
+}
+/**
+ * Authentication state
+ */
+export interface AuthState {
+    user: AuthUser | null;
+    isLoading: boolean;
+    isAuthenticated: boolean;
+    error: Error | null;
+}
+/**
+ * Authentication actions
+ */
+export interface AuthActions {
+    login: (credentials: unknown) => Promise<void>;
+    logout: () => Promise<void>;
+    refresh: () => Promise<void>;
+    clearError: () => void;
+    updateUser: (updates: Partial<AuthUser>) => void;
+}
+/**
+ * Complete auth context type
+ */
+export type AuthContextType = AuthState & AuthActions;
+/**
+ * Auth provider configuration
+ */
+export interface AuthProviderConfig {
+    /** Custom login handler - implement your auth logic */
+    onLogin: (credentials: unknown) => Promise<AuthUser>;
+    /** Custom logout handler */
+    onLogout?: () => Promise<void>;
+    /** Custom refresh handler - restore user from storage/API */
+    onRefresh?: () => Promise<AuthUser | null>;
+    /** Storage key for persisting user */
+    storageKey?: string;
+    /** Use sessionStorage instead of localStorage */
+    useSessionStorage?: boolean;
+    /** Auto-refresh on mount */
+    autoRefresh?: boolean;
+    /** External auth URL (e.g., auth server on different port) */
+    authUrl?: string;
+    /** Enable credentials for cross-origin requests */
+    withCredentials?: boolean;
+}
+/**
+ * Auth provider props
+ */
+export interface AuthProviderProps {
+    /** Authentication configuration object containing handlers and options */
+    config: AuthProviderConfig;
+    /** React children to be wrapped with authentication context */
+    children: ReactNode;
+}
+/**
+ * AuthProvider - Flexible authentication context provider
+ *
+ * @example
+ * ```tsx
+ * <AuthProvider
+ *   config={{
+ *     onLogin: async (credentials) => {
+ *       const res = await fetch('/api/login', {
+ *         method: 'POST',
+ *         body: JSON.stringify(credentials)
+ *       });
+ *       return await res.json();
+ *     },
+ *     onLogout: async () => {
+ *       await fetch('/api/logout', { method: 'POST' });
+ *     }
+ *   }}
+ * >
+ *   <App />
+ * </AuthProvider>
+ * ```
+ */
+export default function AuthProvider({ config, children }: Readonly<AuthProviderProps>): import("react/jsx-runtime").JSX.Element;
+/**
+ * useAuth hook - Access authentication context
+ *
+ * @example
+ * ```tsx
+ * function ProtectedPage() {
+ *   const { user, isAuthenticated, logout } = useAuth();
+ *
+ *   if (!isAuthenticated) {
+ *     return <Navigate to="/login" />;
+ *   }
+ *
+ *   return <div>Welcome, {user.name}</div>;
+ * }
+ * ```
+ */
+export declare function useAuth(): AuthContextType;
+//# sourceMappingURL=auth-provider.d.ts.map

package/dist/components/system/auth-provider/auth-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth-provider.d.ts","sourceRoot":"","sources":["../../../../src/components/system/auth-provider/auth-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkD,SAAS,EAAE,MAAM,OAAO,CAAC;AAElF;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,eAAe,EAAE,OAAO,CAAC;IACzB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/C,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7B,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;CAClD;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,WAAW,CAAC;AAEtD;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,uDAAuD;IACvD,OAAO,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAC;IACrD,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/B,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC;IAC3C,sCAAsC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iDAAiD;IACjD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,4BAA4B;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,0EAA0E;IAC1E,MAAM,EAAE,kBAAkB,CAAC;IAC3B,+DAA+D;IAC/D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAID;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAqHrF;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,IAAI,eAAe,CAMzC"}

package/dist/components/system/auth-provider/auth-provider.js

@@ -0,0 +1,118 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect, createContext, useContext } from "react";
+const AuthContext = createContext(void 0);
+function AuthProvider({ config, children }) {
+  const {
+    onLogin,
+    onLogout,
+    onRefresh,
+    storageKey = "auth_user",
+    useSessionStorage = false,
+    autoRefresh = true
+  } = config;
+  const [user, setUser] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const storage = useSessionStorage ? sessionStorage : localStorage;
+  useEffect(() => {
+    const loadUser = async () => {
+      try {
+        if (onRefresh && autoRefresh) {
+          const refreshedUser = await onRefresh();
+          setUser(refreshedUser);
+        } else {
+          const storedUser = storage.getItem(storageKey);
+          if (storedUser) {
+            setUser(JSON.parse(storedUser));
+          }
+        }
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error("Failed to load user"));
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    loadUser();
+  }, [storageKey, storage, onRefresh, autoRefresh]);
+  useEffect(() => {
+    if (user) {
+      storage.setItem(storageKey, JSON.stringify(user));
+    } else {
+      storage.removeItem(storageKey);
+    }
+  }, [user, storageKey, storage]);
+  const login = async (credentials) => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const loggedInUser = await onLogin(credentials);
+      setUser(loggedInUser);
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error("Login failed");
+      setError(error2);
+      throw error2;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const logout = async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      if (onLogout) {
+        await onLogout();
+      }
+      setUser(null);
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error("Logout failed");
+      setError(error2);
+      throw error2;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const refresh = async () => {
+    if (!onRefresh) return;
+    setIsLoading(true);
+    setError(null);
+    try {
+      const refreshedUser = await onRefresh();
+      setUser(refreshedUser);
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error("Refresh failed");
+      setError(error2);
+      throw error2;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const clearError = () => setError(null);
+  const updateUser = (updates) => {
+    if (!user) return;
+    setUser({ ...user, ...updates });
+  };
+  const value = {
+    user,
+    isLoading,
+    isAuthenticated: !!user,
+    error,
+    login,
+    logout,
+    refresh,
+    clearError,
+    updateUser
+  };
+  return /* @__PURE__ */ jsx(AuthContext.Provider, { value, children });
+}
+function useAuth() {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+}
+export {
+  AuthProvider as default,
+  useAuth
+};
+//# sourceMappingURL=auth-provider.js.map

package/dist/components/system/auth-provider/auth-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth-provider.js","sources":["../../../../src/components/system/auth-provider/auth-provider.tsx"],"sourcesContent":["import { createContext, useContext, useState, useEffect, ReactNode } from 'react';\n\n/**\n * Base user type - extend this in your app\n */\nexport interface AuthUser {\n  id: string;\n  [key: string]: unknown;\n}\n\n/**\n * Authentication state\n */\nexport interface AuthState {\n  user: AuthUser | null;\n  isLoading: boolean;\n  isAuthenticated: boolean;\n  error: Error | null;\n}\n\n/**\n * Authentication actions\n */\nexport interface AuthActions {\n  login: (credentials: unknown) => Promise<void>;\n  logout: () => Promise<void>;\n  refresh: () => Promise<void>;\n  clearError: () => void;\n  updateUser: (updates: Partial<AuthUser>) => void;\n}\n\n/**\n * Complete auth context type\n */\nexport type AuthContextType = AuthState & AuthActions;\n\n/**\n * Auth provider configuration\n */\nexport interface AuthProviderConfig {\n  /** Custom login handler - implement your auth logic */\n  onLogin: (credentials: unknown) => Promise<AuthUser>;\n  /** Custom logout handler */\n  onLogout?: () => Promise<void>;\n  /** Custom refresh handler - restore user from storage/API */\n  onRefresh?: () => Promise<AuthUser | null>;\n  /** Storage key for persisting user */\n  storageKey?: string;\n  /** Use sessionStorage instead of localStorage */\n  useSessionStorage?: boolean;\n  /** Auto-refresh on mount */\n  autoRefresh?: boolean;\n  /** External auth URL (e.g., auth server on different port) */\n  authUrl?: string;\n  /** Enable credentials for cross-origin requests */\n  withCredentials?: boolean;\n}\n\n/**\n * Auth provider props\n */\nexport interface AuthProviderProps {\n  /** Authentication configuration object containing handlers and options */\n  config: AuthProviderConfig;\n  /** React children to be wrapped with authentication context */\n  children: ReactNode;\n}\n\nconst AuthContext = createContext<AuthContextType | undefined>(undefined);\n\n/**\n * AuthProvider - Flexible authentication context provider\n *\n * @example\n * ```tsx\n * <AuthProvider\n *   config={{\n *     onLogin: async (credentials) => {\n *       const res = await fetch('/api/login', {\n *         method: 'POST',\n *         body: JSON.stringify(credentials)\n *       });\n *       return await res.json();\n *     },\n *     onLogout: async () => {\n *       await fetch('/api/logout', { method: 'POST' });\n *     }\n *   }}\n * >\n *   <App />\n * </AuthProvider>\n * ```\n */\nexport default function AuthProvider({ config, children }: Readonly<AuthProviderProps>) {\n  const {\n    onLogin,\n    onLogout,\n    onRefresh,\n    storageKey = 'auth_user',\n    useSessionStorage = false,\n    autoRefresh = true\n  } = config;\n\n  const [user, setUser] = useState<AuthUser | null>(null);\n  const [isLoading, setIsLoading] = useState(true);\n  const [error, setError] = useState<Error | null>(null);\n\n  const storage = useSessionStorage ? sessionStorage : localStorage;\n\n  // Load user from storage on mount\n  useEffect(() => {\n    const loadUser = async () => {\n      try {\n        if (onRefresh && autoRefresh) {\n          const refreshedUser = await onRefresh();\n          setUser(refreshedUser);\n        } else {\n          const storedUser = storage.getItem(storageKey);\n          if (storedUser) {\n            setUser(JSON.parse(storedUser));\n          }\n        }\n      } catch (err) {\n        setError(err instanceof Error ? err : new Error('Failed to load user'));\n      } finally {\n        setIsLoading(false);\n      }\n    };\n\n    loadUser();\n  }, [storageKey, storage, onRefresh, autoRefresh]);\n\n  // Persist user to storage when it changes\n  useEffect(() => {\n    if (user) {\n      storage.setItem(storageKey, JSON.stringify(user));\n    } else {\n      storage.removeItem(storageKey);\n    }\n  }, [user, storageKey, storage]);\n\n  const login = async (credentials: unknown) => {\n    setIsLoading(true);\n    setError(null);\n    try {\n      const loggedInUser = await onLogin(credentials);\n      setUser(loggedInUser);\n    } catch (err) {\n      const error = err instanceof Error ? err : new Error('Login failed');\n      setError(error);\n      throw error;\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  const logout = async () => {\n    setIsLoading(true);\n    setError(null);\n    try {\n      if (onLogout) {\n        await onLogout();\n      }\n      setUser(null);\n    } catch (err) {\n      const error = err instanceof Error ? err : new Error('Logout failed');\n      setError(error);\n      throw error;\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  const refresh = async () => {\n    if (!onRefresh) return;\n\n    setIsLoading(true);\n    setError(null);\n    try {\n      const refreshedUser = await onRefresh();\n      setUser(refreshedUser);\n    } catch (err) {\n      const error = err instanceof Error ? err : new Error('Refresh failed');\n      setError(error);\n      throw error;\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  const clearError = () => setError(null);\n\n  const updateUser = (updates: Partial<AuthUser>) => {\n    if (!user) return;\n    setUser({ ...user, ...updates });\n  };\n\n  const value: AuthContextType = {\n    user,\n    isLoading,\n    isAuthenticated: !!user,\n    error,\n    login,\n    logout,\n    refresh,\n    clearError,\n    updateUser\n  };\n\n  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;\n}\n\n/**\n * useAuth hook - Access authentication context\n *\n * @example\n * ```tsx\n * function ProtectedPage() {\n *   const { user, isAuthenticated, logout } = useAuth();\n *\n *   if (!isAuthenticated) {\n *     return <Navigate to=\"/login\" />;\n *   }\n *\n *   return <div>Welcome, {user.name}</div>;\n * }\n * ```\n */\nexport function useAuth(): AuthContextType {\n  const context = useContext(AuthContext);\n  if (!context) {\n    throw new Error('useAuth must be used within an AuthProvider');\n  }\n  return context;\n}\n"],"names":["error"],"mappings":"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"}

package/dist/components/system/auth-provider/auth-utils.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Auth utilities for cross-origin authentication
+ */
+/**
+ * Fetch with credentials for cross-origin requests
+ */
+export declare function authFetch(url: string, options?: RequestInit, withCredentials?: boolean): Promise<Response>;
+/**
+ * Check if user is authenticated via external auth server
+ */
+export declare function checkAuthStatus(authUrl: string): Promise<boolean>;
+/**
+ * Get current user from external auth server
+ */
+export declare function getCurrentUser(authUrl: string): Promise<unknown | null>;
+/**
+ * Login via external auth server
+ */
+export declare function loginExternal(authUrl: string, credentials: unknown): Promise<unknown>;
+/**
+ * Logout via external auth server
+ */
+export declare function logoutExternal(authUrl: string): Promise<void>;
+/**
+ * Redirect to external login page
+ */
+export declare function redirectToLogin(authUrl: string, returnUrl?: string): void;
+/**
+ * Open external login in popup window
+ */
+export declare function openLoginPopup(authUrl: string, onSuccess?: () => void): Window | null;
+//# sourceMappingURL=auth-utils.d.ts.map

package/dist/components/system/auth-provider/auth-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth-utils.d.ts","sourceRoot":"","sources":["../../../../src/components/system/auth-provider/auth-utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;GAEG;AACH,wBAAsB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,EAAE,eAAe,UAAO,GAAG,OAAO,CAAC,QAAQ,CAAC,CAWjH;AAED;;GAEG;AACH,wBAAsB,eAAe,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CASvE;AAED;;GAEG;AACH,wBAAsB,cAAc,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,CAa7E;AAED;;GAEG;AACH,wBAAsB,aAAa,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAW3F;AAED;;GAEG;AACH,wBAAsB,cAAc,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAInE;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAMzE;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,MAAM,GAAG,IAAI,CAoBrF"}