@orion-ds/react 4.6.5 → 4.7.0

package/dist/index285.mjs

@@ -0,0 +1,15 @@
+const n = "_collapsible_1swsf_3", t = "_trigger_1swsf_8", e = "_content_1swsf_32", s = "_contentOpen_1swsf_38", o = "_contentInner_1swsf_42", _ = {
+  collapsible: n,
+  trigger: t,
+  content: e,
+  contentOpen: s,
+  contentInner: o
+};
+export {
+  n as collapsible,
+  e as content,
+  o as contentInner,
+  s as contentOpen,
+  _ as default,
+  t as trigger
+};

package/dist/index286.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="_folder_vmfz9_8",t="_dropTarget_vmfz9_21",_="_dropCompleted_vmfz9_30",o="_header_vmfz9_36",r="_trigger_vmfz9_44",d="_chevron_vmfz9_69",n="_expanded_vmfz9_75",m="_title_vmfz9_84",a="_badge_vmfz9_94",p="_actions_vmfz9_99",i="_content_vmfz9_106",f="_grid_vmfz9_112",v="_badgeLabel_vmfz9_131",g="_sortDropdown_vmfz9_136",l="_emptyState_vmfz9_147",z="_emptyText_vmfz9_152",s="_insertionLine_vmfz9_160",c="_emptyDropZone_vmfz9_182",b={folder:e,dropTarget:t,dropCompleted:_,header:o,trigger:r,chevron:d,expanded:n,title:m,badge:a,actions:p,content:i,grid:f,badgeLabel:v,sortDropdown:g,emptyState:l,emptyText:z,insertionLine:s,emptyDropZone:c};exports.actions=p;exports.badge=a;exports.badgeLabel=v;exports.chevron=d;exports.content=i;exports.default=b;exports.dropCompleted=_;exports.dropTarget=t;exports.emptyDropZone=c;exports.emptyState=l;exports.emptyText=z;exports.expanded=n;exports.folder=e;exports.grid=f;exports.header=o;exports.insertionLine=s;exports.sortDropdown=g;exports.title=m;exports.trigger=r;

package/dist/index286.mjs

@@ -0,0 +1,41 @@
+const e = "_folder_vmfz9_8", _ = "_dropTarget_vmfz9_21", t = "_dropCompleted_vmfz9_30", a = "_header_vmfz9_36", o = "_trigger_vmfz9_44", r = "_chevron_vmfz9_69", d = "_expanded_vmfz9_75", n = "_title_vmfz9_84", m = "_badge_vmfz9_94", s = "_actions_vmfz9_99", p = "_content_vmfz9_106", f = "_grid_vmfz9_112", i = "_badgeLabel_vmfz9_131", v = "_sortDropdown_vmfz9_136", g = "_emptyState_vmfz9_147", z = "_emptyText_vmfz9_152", l = "_insertionLine_vmfz9_160", c = "_emptyDropZone_vmfz9_182", y = {
+  folder: e,
+  dropTarget: _,
+  dropCompleted: t,
+  header: a,
+  trigger: o,
+  chevron: r,
+  expanded: d,
+  title: n,
+  badge: m,
+  actions: s,
+  content: p,
+  grid: f,
+  badgeLabel: i,
+  sortDropdown: v,
+  emptyState: g,
+  emptyText: z,
+  insertionLine: l,
+  emptyDropZone: c
+};
+export {
+  s as actions,
+  m as badge,
+  i as badgeLabel,
+  r as chevron,
+  p as content,
+  y as default,
+  t as dropCompleted,
+  _ as dropTarget,
+  c as emptyDropZone,
+  g as emptyState,
+  z as emptyText,
+  d as expanded,
+  e as folder,
+  f as grid,
+  a as header,
+  l as insertionLine,
+  v as sortDropdown,
+  n as title,
+  o as trigger
+};

package/dist/index287.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r="_trigger_9nsdr_9",e="_menu_9nsdr_14",_="_visible_9nsdr_31",s="_group_9nsdr_45",d="_groupLabel_9nsdr_49",n="_separator_9nsdr_59",t="_item_9nsdr_69",a="_disabled_9nsdr_82",i="_danger_9nsdr_98",l="_icon_9nsdr_111",o="_label_9nsdr_122",u="_shortcut_9nsdr_126",g={trigger:r,menu:e,visible:_,group:s,groupLabel:d,separator:n,item:t,disabled:a,danger:i,icon:l,label:o,shortcut:u};exports.danger=i;exports.default=g;exports.disabled=a;exports.group=s;exports.groupLabel=d;exports.icon=l;exports.item=t;exports.label=o;exports.menu=e;exports.separator=n;exports.shortcut=u;exports.trigger=r;exports.visible=_;

package/dist/index287.mjs

@@ -0,0 +1,29 @@
+const s = "_trigger_9nsdr_9", r = "_menu_9nsdr_14", _ = "_visible_9nsdr_31", a = "_group_9nsdr_45", e = "_groupLabel_9nsdr_49", d = "_separator_9nsdr_59", n = "_item_9nsdr_69", i = "_disabled_9nsdr_82", t = "_danger_9nsdr_98", o = "_icon_9nsdr_111", l = "_label_9nsdr_122", g = "_shortcut_9nsdr_126", u = {
+  trigger: s,
+  menu: r,
+  visible: _,
+  group: a,
+  groupLabel: e,
+  separator: d,
+  item: n,
+  disabled: i,
+  danger: t,
+  icon: o,
+  label: l,
+  shortcut: g
+};
+export {
+  t as danger,
+  u as default,
+  i as disabled,
+  a as group,
+  e as groupLabel,
+  o as icon,
+  n as item,
+  l as label,
+  r as menu,
+  d as separator,
+  g as shortcut,
+  s as trigger,
+  _ as visible
+};

package/dist/index289.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=t=>{if(!t||t===0)return"0 B";const o=1024,r=["B","KB","MB","GB"],a=Math.floor(Math.log(t)/Math.log(o));return`${parseFloat((t/Math.pow(o,a)).toFixed(1))} ${r[a]}`},i=t=>{const o=Math.floor(t/60),r=Math.floor(t%60);return`${o}:${r.toString().padStart(2,"0")}`};exports.formatFileSize=e;exports.formatTime=i;

package/dist/index289.mjs

@@ -0,0 +1,12 @@
+const n = (t) => {
+  if (!t || t === 0) return "0 B";
+  const o = 1024, r = ["B", "KB", "MB", "GB"], a = Math.floor(Math.log(t) / Math.log(o));
+  return `${parseFloat((t / Math.pow(o, a)).toFixed(1))} ${r[a]}`;
+}, i = (t) => {
+  const o = Math.floor(t / 60), r = Math.floor(t % 60);
+  return `${o}:${r.toString().padStart(2, "0")}`;
+};
+export {
+  n as formatFileSize,
+  i as formatTime
+};

package/dist/index29 2.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),c=require("react"),e=require("./index182.cjs"),t=c.forwardRef(({size:r="lg",centered:n=!0,padded:a=!0,className:o,children:i,...s},u)=>{const d=[e.default.container,e.default[r],n&&e.default.centered,a&&e.default.padded,o].filter(Boolean).join(" ");return l.jsx("div",{ref:u,className:d,...s,children:i})});t.displayName="Container";exports.Container=t;

package/dist/index29 2.mjs

@@ -0,0 +1,26 @@
+import { jsx as d } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import e from "./index182.mjs";
+const c = l(
+  ({
+    size: r = "lg",
+    centered: o = !0,
+    padded: t = !0,
+    className: a,
+    children: n,
+    ...s
+  }, i) => {
+    const m = [
+      e.container,
+      e[r],
+      o && e.centered,
+      t && e.padded,
+      a
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ d("div", { ref: i, className: m, ...s, children: n });
+  }
+);
+c.displayName = "Container";
+export {
+  c as Container
+};

package/dist/index29.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),l=require("react"),tt=require("./index30.cjs"),q=require("lucide-react"),p=require("./index13.cjs"),r=require("./index166.cjs"),et=parseInt(p.spacing[6],10),rt=parseInt(p.spacing[4],10),st=parseInt(p.spacing[6],10),lt=parseInt(p.spacing[8],10),T=l.forwardRef(({items:n,variant:_="editorial",aspectRatio:B="16/9",peek:D=!0,autoScroll:R=!1,autoScrollInterval:j=5e3,gap:i="md",align:I="edge",alignOffset:S,showNavigation:$=!0,showPagination:w=!1,onSlideChange:W,renderNavigation:N,highlightActive:y=!1,loop:x=!1,className:z,...H},F)=>{const s=l.useRef(null),[K,J]=l.useState(!1),[Q,U]=l.useState(!0),[f,V]=l.useState(0),M=l.useRef(0),u=l.useCallback(()=>i==="sm"?rt:i==="lg"?lt:st,[i]),d=l.useCallback(t=>{const e=t.children[0];return e?e.offsetWidth:0},[]),v=l.useCallback(()=>{if(!s.current)return;const{scrollLeft:t,scrollWidth:e,clientWidth:c}=s.current,h=d(s.current),g=u(),b=t>=e-c-1,m=t<=1;J(!m),U(!b);let o;if(b)o=n.length-1;else{const L=Math.round(t/(h+g));o=Math.min(Math.max(0,L),n.length-1)}o!==M.current&&(M.current=o,V(o),W?.(o))},[i,n.length,W,u,d]),C=l.useCallback(t=>{if(!s.current)return;const{scrollLeft:e,scrollWidth:c,clientWidth:h}=s.current,g=d(s.current),b=u(),m=g+b,o=e<=1,L=e>=c-h-1;if(x){if(t==="right"&&L){s.current.scrollTo({left:0,behavior:"smooth"});return}if(t==="left"&&o){s.current.scrollTo({left:c-h,behavior:"smooth"});return}}s.current.scrollBy({left:t==="left"?-m:m,behavior:"smooth"})},[i,x,u,d]),k=l.useCallback(t=>{if(!s.current)return;const e=d(s.current),c=u();s.current.scrollTo({left:t*(e+c),behavior:"smooth"})},[u,d]);l.useEffect(()=>{const t=s.current;if(t)return v(),t.addEventListener("scroll",v),()=>{t.removeEventListener("scroll",v)}},[v]),l.useEffect(()=>{if(!R||n.length<=1)return;const t=setInterval(()=>{const e=(f+1)%n.length;k(e)},j);return()=>clearInterval(t)},[R,j,f,n.length,k]);const P=I==="container"&&S!==void 0,E=P?Math.max(0,S-et):0,X=i==="sm"?r.default.gapSm:i==="lg"?r.default.gapLg:r.default.gapMd,Y=I==="container"?r.default.trackContainer:r.default.trackEdge,Z=[r.default.carousel,D&&r.default.peek,y&&r.default.highlightActive,X,z].filter(Boolean).join(" "),O=[r.default.track,Y].filter(Boolean).join(" "),G=x&&n.length>1,A={canScrollLeft:G||K,canScrollRight:G||Q,scrollLeft:()=>C("left"),scrollRight:()=>C("right"),activeIndex:f,totalItems:n.length};return a.jsxs("div",{ref:F,className:Z,...H,children:[a.jsx("div",{ref:s,className:O,style:P?{scrollPaddingInlineStart:S}:void 0,role:"region","aria-label":"Carousel",children:n.map((t,e)=>{const c=e===0,g=e===f&&y;return a.jsx(tt.CarouselCard,{item:t,aspectRatio:B,variant:_,className:g?r.default.cardHighlighted:void 0,style:c&&E>0?{marginLeft:E}:void 0},t.title||e)})}),$&&n.length>1&&(N?N(A):a.jsxs("div",{className:r.default.navigation,children:[a.jsx("button",{type:"button",className:r.default.navButton,onClick:()=>C("left"),disabled:!A.canScrollLeft,"aria-label":"Previous",children:a.jsx(q.ChevronLeft,{size:24})}),a.jsx("button",{type:"button",className:r.default.navButton,onClick:()=>C("right"),disabled:!A.canScrollRight,"aria-label":"Next",children:a.jsx(q.ChevronRight,{size:24})})]})),w&&n.length>1&&a.jsx("div",{className:r.default.pagination,children:n.map((t,e)=>a.jsx("button",{type:"button",className:`${r.default.dot} ${e===f?r.default.dotActive:""}`,onClick:()=>k(e),"aria-label":`Go to slide ${e+1}`},e))})]})});T.displayName="Carousel";exports.Carousel=T;

package/dist/index29.mjs

@@ -0,0 +1,178 @@
+import { jsxs as _, jsx as c } from "react/jsx-runtime";
+import { forwardRef as et, useRef as j, useState as k, useCallback as f, useEffect as D } from "react";
+import { CarouselCard as nt } from "./index30.mjs";
+import { ChevronLeft as ot, ChevronRight as st } from "lucide-react";
+import { spacing as b } from "./index13.mjs";
+import e from "./index166.mjs";
+const lt = parseInt(b[6], 10), ct = parseInt(b[4], 10), at = parseInt(b[6], 10), it = parseInt(b[8], 10), dt = et(
+  ({
+    items: o,
+    variant: H = "editorial",
+    aspectRatio: $ = "16/9",
+    peek: w = !0,
+    autoScroll: N = !1,
+    autoScrollInterval: R = 5e3,
+    gap: a = "md",
+    align: x = "edge",
+    alignOffset: A,
+    showNavigation: z = !0,
+    showPagination: F = !1,
+    onSlideChange: y,
+    renderNavigation: M,
+    highlightActive: G = !1,
+    loop: L = !1,
+    className: K,
+    ...q
+  }, J) => {
+    const n = j(null), [Q, U] = k(!1), [V, X] = k(!0), [h, Y] = k(0), P = j(0), i = f(() => a === "sm" ? ct : a === "lg" ? it : at, [a]), d = f((t) => {
+      const r = t.children[0];
+      return r ? r.offsetWidth : 0;
+    }, []), g = f(() => {
+      if (!n.current) return;
+      const { scrollLeft: t, scrollWidth: r, clientWidth: s } = n.current, u = d(n.current), v = i(), p = t >= r - s - 1, C = t <= 1;
+      U(!C), X(!p);
+      let l;
+      if (p)
+        l = o.length - 1;
+      else {
+        const W = Math.round(t / (u + v));
+        l = Math.min(Math.max(0, W), o.length - 1);
+      }
+      l !== P.current && (P.current = l, Y(l), y?.(l));
+    }, [a, o.length, y, i, d]), m = f(
+      (t) => {
+        if (!n.current) return;
+        const { scrollLeft: r, scrollWidth: s, clientWidth: u } = n.current, v = d(n.current), p = i(), C = v + p, l = r <= 1, W = r >= s - u - 1;
+        if (L) {
+          if (t === "right" && W) {
+            n.current.scrollTo({ left: 0, behavior: "smooth" });
+            return;
+          }
+          if (t === "left" && l) {
+            n.current.scrollTo({
+              left: s - u,
+              behavior: "smooth"
+            });
+            return;
+          }
+        }
+        n.current.scrollBy({
+          left: t === "left" ? -C : C,
+          behavior: "smooth"
+        });
+      },
+      [a, L, i, d]
+    ), I = f(
+      (t) => {
+        if (!n.current) return;
+        const r = d(n.current), s = i();
+        n.current.scrollTo({
+          left: t * (r + s),
+          behavior: "smooth"
+        });
+      },
+      [i, d]
+    );
+    D(() => {
+      const t = n.current;
+      if (t)
+        return g(), t.addEventListener("scroll", g), () => {
+          t.removeEventListener("scroll", g);
+        };
+    }, [g]), D(() => {
+      if (!N || o.length <= 1) return;
+      const t = setInterval(() => {
+        const r = (h + 1) % o.length;
+        I(r);
+      }, R);
+      return () => clearInterval(t);
+    }, [
+      N,
+      R,
+      h,
+      o.length,
+      I
+    ]);
+    const E = x === "container" && A !== void 0, B = E ? Math.max(0, A - lt) : 0, Z = a === "sm" ? e.gapSm : a === "lg" ? e.gapLg : e.gapMd, O = x === "container" ? e.trackContainer : e.trackEdge, tt = [
+      e.carousel,
+      w && e.peek,
+      G && e.highlightActive,
+      Z,
+      K
+    ].filter(Boolean).join(" "), rt = [e.track, O].filter(Boolean).join(" "), T = L && o.length > 1, S = {
+      canScrollLeft: T || Q,
+      canScrollRight: T || V,
+      scrollLeft: () => m("left"),
+      scrollRight: () => m("right"),
+      activeIndex: h,
+      totalItems: o.length
+    };
+    return /* @__PURE__ */ _("div", { ref: J, className: tt, ...q, children: [
+      /* @__PURE__ */ c(
+        "div",
+        {
+          ref: n,
+          className: rt,
+          style: E ? { scrollPaddingInlineStart: A } : void 0,
+          role: "region",
+          "aria-label": "Carousel",
+          children: o.map((t, r) => {
+            const s = r === 0;
+            return /* @__PURE__ */ c(
+              nt,
+              {
+                item: t,
+                aspectRatio: $,
+                variant: H,
+                className: r === h && G ? e.cardHighlighted : void 0,
+                style: (
+                  // First card gets extra margin for container alignment
+                  s && B > 0 ? { marginLeft: B } : void 0
+                )
+              },
+              t.title || r
+            );
+          })
+        }
+      ),
+      z && o.length > 1 && (M ? M(S) : /* @__PURE__ */ _("div", { className: e.navigation, children: [
+        /* @__PURE__ */ c(
+          "button",
+          {
+            type: "button",
+            className: e.navButton,
+            onClick: () => m("left"),
+            disabled: !S.canScrollLeft,
+            "aria-label": "Previous",
+            children: /* @__PURE__ */ c(ot, { size: 24 })
+          }
+        ),
+        /* @__PURE__ */ c(
+          "button",
+          {
+            type: "button",
+            className: e.navButton,
+            onClick: () => m("right"),
+            disabled: !S.canScrollRight,
+            "aria-label": "Next",
+            children: /* @__PURE__ */ c(st, { size: 24 })
+          }
+        )
+      ] })),
+      F && o.length > 1 && /* @__PURE__ */ c("div", { className: e.pagination, children: o.map((t, r) => /* @__PURE__ */ c(
+        "button",
+        {
+          type: "button",
+          className: `${e.dot} ${r === h ? e.dotActive : ""}`,
+          onClick: () => I(r),
+          "aria-label": `Go to slide ${r + 1}`
+        },
+        r
+      )) })
+    ] });
+  }
+);
+dt.displayName = "Carousel";
+export {
+  dt as Carousel
+};

package/dist/index290.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),n=require("react"),b=require("lucide-react"),i=require("./index226.cjs"),l=({src:s,alt:d="Image",isOpen:a,onClose:t,className:f,...m})=>{const u=n.useRef(null),r=n.useRef(null),c=n.useCallback(e=>{if(e.key==="Escape"){t();return}e.key==="Tab"&&(e.preventDefault(),u.current?.focus())},[t]),g=e=>{e.target===e.currentTarget&&t()};return n.useEffect(()=>(a&&(r.current=document.activeElement,document.addEventListener("keydown",c),document.body.style.overflow="hidden",requestAnimationFrame(()=>{u.current?.focus()})),()=>{document.removeEventListener("keydown",c),document.body.style.overflow="",r.current&&typeof r.current.focus=="function"&&r.current.focus()}),[a,c]),a?o.jsxs("div",{className:[i.default.lightbox,f].filter(Boolean).join(" "),onClick:g,role:"dialog","aria-modal":"true","aria-label":"Image viewer",...m,children:[o.jsx("button",{ref:u,className:i.default.lightboxClose,onClick:t,"aria-label":"Close image viewer",children:o.jsx(b.X,{size:24})}),o.jsx("img",{src:s,alt:d,className:i.default.lightboxImage})]}):null};l.displayName="ChatLightbox";exports.ChatLightbox=l;

package/dist/index290.mjs

@@ -0,0 +1,57 @@
+import { jsxs as g, jsx as i } from "react/jsx-runtime";
+import { useRef as c, useCallback as b, useEffect as h } from "react";
+import { X as y } from "lucide-react";
+import l from "./index226.mjs";
+const v = ({
+  src: u,
+  alt: s = "Image",
+  isOpen: o,
+  onClose: t,
+  className: m,
+  ...f
+}) => {
+  const n = c(null), r = c(null), a = b(
+    (e) => {
+      if (e.key === "Escape") {
+        t();
+        return;
+      }
+      e.key === "Tab" && (e.preventDefault(), n.current?.focus());
+    },
+    [t]
+  ), d = (e) => {
+    e.target === e.currentTarget && t();
+  };
+  return h(() => (o && (r.current = document.activeElement, document.addEventListener("keydown", a), document.body.style.overflow = "hidden", requestAnimationFrame(() => {
+    n.current?.focus();
+  })), () => {
+    document.removeEventListener("keydown", a), document.body.style.overflow = "", r.current && typeof r.current.focus == "function" && r.current.focus();
+  }), [o, a]), o ? /* @__PURE__ */ g(
+    "div",
+    {
+      className: [l.lightbox, m].filter(Boolean).join(" "),
+      onClick: d,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Image viewer",
+      ...f,
+      children: [
+        /* @__PURE__ */ i(
+          "button",
+          {
+            ref: n,
+            className: l.lightboxClose,
+            onClick: t,
+            "aria-label": "Close image viewer",
+            children: /* @__PURE__ */ i(y, { size: 24 })
+          }
+        ),
+        /* @__PURE__ */ i("img", { src: u, alt: s, className: l.lightboxImage })
+      ]
+    }
+  ) : null;
+};
+v.displayName = "ChatLightbox";
+export {
+  v as ChatLightbox
+};

package/dist/index3 2.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),P=require("./index94.cjs"),n=require("./index54.cjs"),t=require("./index14.cjs"),L=require("./index13.cjs"),W=require("./index74.cjs"),B=require("./index38.cjs"),M=require("./index64.cjs"),R=require("./index73.cjs"),y=require("./index21.cjs"),f=require("./index61.cjs"),S=require("./index70.cjs"),i=require("./index16.cjs"),s=require("./index11.cjs"),p=require("./index8.cjs"),l=require("./index68.cjs"),h=require("./index59.cjs"),d=require("./index10.cjs"),g=require("./index79.cjs"),N=require("./index72.cjs"),E=require("./index71.cjs"),v=require("./index52.cjs"),F=[{id:1,name:"Alice Johnson",email:"alice@example.com",status:"active"},{id:2,name:"Bob Smith",email:"bob@example.com",status:"active"},{id:3,name:"Charlie Davis",email:"charlie@example.com",status:"inactive"}],O=[{key:"name",header:"Name",sortable:!0},{key:"email",header:"Email",sortable:!0},{key:"status",header:"Status",cell:o=>e.jsx(s.Badge,{variant:o.status==="active"?"success":"secondary",children:o.status}),align:"center"}],H=()=>{const{theme:o,toggleTheme:u}=P.useTheme(),[m,x]=c.useState(!1),[C,w]=c.useState("tab1"),[T,k]=c.useState(!1),[z,q]=c.useState(!1),[j,b]=c.useState("option1"),[A,D]=c.useState("");return e.jsxs("div",{style:{minHeight:"100vh",background:"var(--surface-base)"},children:[e.jsxs(n.Navbar,{sticky:!0,bordered:!0,children:[e.jsxs(n.Navbar.Brand,{children:[e.jsx("span",{style:{fontSize:"24px"},children:"⚡"}),"Orion Design System"]}),e.jsxs(n.Navbar.Nav,{children:[e.jsx(n.Navbar.Link,{href:"#components",active:!0,children:"Components"}),e.jsx(n.Navbar.Link,{href:"#docs",children:"Documentation"}),e.jsx(n.Navbar.Link,{href:"#examples",children:"Examples"})]}),e.jsxs(n.Navbar.Actions,{children:[e.jsx(t.Button,{variant:"ghost",size:"sm",onClick:u,children:o==="light"?"🌙":"☀️"}),e.jsx(t.Button,{size:"sm",children:"Get Started"})]})]}),e.jsxs("div",{style:{padding:"var(--spacing-8) var(--spacing-4)",maxWidth:"1200px",margin:"0 auto"},children:[e.jsxs("div",{style:{marginBottom:"var(--spacing-8)"},children:[e.jsx("h1",{style:{fontSize:"var(--text-4xl)",fontWeight:"var(--font-weight-bold)",color:"var(--text-primary)",marginBottom:"var(--spacing-2)"},children:"Component Showcase"}),e.jsx("p",{style:{fontSize:"var(--text-lg)",color:"var(--text-secondary)"},children:"All 21 React components from the Orion Design System"}),e.jsx("div",{style:{marginTop:"var(--spacing-4)"},children:e.jsx(L.Breadcrumb,{items:[{label:"Home",href:"/"},{label:"Components",href:"/components"},{label:"Showcase"}],showHomeIcon:!0})})]}),e.jsx(W.ThemeController,{showBrandSelector:!0,showThemeToggle:!0,showSummary:!0,style:{marginBottom:"var(--spacing-6)"}}),e.jsx(a,{title:"Buttons",description:"Action triggers with multiple variants and sizes",children:e.jsxs("div",{style:{display:"flex",gap:"var(--spacing-3)",flexWrap:"wrap",alignItems:"center"},children:[e.jsx(t.Button,{variant:"primary",children:"Primary"}),e.jsx(t.Button,{variant:"secondary",children:"Secondary"}),e.jsx(t.Button,{variant:"ghost",children:"Ghost"}),e.jsx(t.Button,{variant:"danger",children:"Danger"}),e.jsx(t.Button,{size:"sm",children:"Small"}),e.jsx(t.Button,{size:"lg",children:"Large"}),e.jsx(t.Button,{isLoading:!0,children:"Loading"}),e.jsx(t.Button,{disabled:!0,children:"Disabled"})]})}),e.jsx(a,{title:"Form Controls",description:"Input fields and selection components",children:e.jsxs("div",{style:{display:"grid",gap:"var(--spacing-4)",maxWidth:"600px"},children:[e.jsx(B.Field,{label:"Email",type:"email",placeholder:"you@example.com",helperText:"We'll never share your email"}),e.jsx(B.Field,{label:"Password",type:"password",error:"Password must be at least 8 characters"}),e.jsx(M.Select,{label:"Country",value:A,onChange:r=>D(r.target.value),options:[{label:"United States",value:"us"},{label:"Canada",value:"ca"},{label:"Mexico",value:"mx"}]}),e.jsx(R.Textarea,{label:"Bio",placeholder:"Tell us about yourself...",maxLength:200,showCounter:!0,helperText:"Maximum 200 characters"})]})}),e.jsx(a,{title:"Checkbox & Radio",description:"Selection controls",children:e.jsxs("div",{style:{display:"grid",gap:"var(--spacing-4)"},children:[e.jsxs("div",{children:[e.jsx("h4",{style:{fontSize:"var(--text-base)",fontWeight:"var(--font-weight-medium)",color:"var(--text-primary)",marginBottom:"var(--spacing-2)"},children:"Checkbox"}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"var(--spacing-2)"},children:[e.jsx(y.Checkbox,{label:"Accept terms and conditions",checked:z,onChange:r=>q(r.target.checked)}),e.jsx(y.Checkbox,{label:"Subscribe to newsletter"}),e.jsx(y.Checkbox,{label:"Disabled option",disabled:!0})]})]}),e.jsxs("div",{children:[e.jsx("h4",{style:{fontSize:"var(--text-base)",fontWeight:"var(--font-weight-medium)",color:"var(--text-primary)",marginBottom:"var(--spacing-2)"},children:"Radio"}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"var(--spacing-2)"},children:[e.jsx(f.Radio,{name:"plan",value:"option1",label:"Free Plan",checked:j==="option1",onChange:r=>b(r.target.value)}),e.jsx(f.Radio,{name:"plan",value:"option2",label:"Pro Plan ($9/mo)",checked:j==="option2",onChange:r=>b(r.target.value)}),e.jsx(f.Radio,{name:"plan",value:"option3",label:"Enterprise Plan",checked:j==="option3",onChange:r=>b(r.target.value)})]})]})]})}),e.jsx(a,{title:"Switch",description:"Toggle control",children:e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"var(--spacing-3)"},children:[e.jsx(S.Switch,{label:"Enable notifications",checked:T,onChange:r=>k(r.target.checked)}),e.jsx(S.Switch,{label:"Auto-save",defaultChecked:!0}),e.jsx(S.Switch,{label:"Disabled",disabled:!0})]})}),e.jsx(a,{title:"Cards",description:"Container components with variants",children:e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(300px, 1fr))",gap:"var(--spacing-4)"},children:[e.jsxs(i.Card,{children:[e.jsx(i.Card.Header,{children:"Base Card"}),e.jsx(i.Card.Body,{children:"This is a base card with default styling."}),e.jsxs(i.Card.Footer,{children:[e.jsx(t.Button,{size:"sm",variant:"secondary",children:"Cancel"}),e.jsx(t.Button,{size:"sm",children:"Save"})]})]}),e.jsxs(i.Card,{variant:"glass",children:[e.jsx(i.Card.Header,{children:"Glass Card"}),e.jsx(i.Card.Body,{children:"Semi-transparent card with backdrop blur effect."})]}),e.jsxs(i.Card,{variant:"elevated",children:[e.jsx(i.Card.Header,{children:"Elevated Card"}),e.jsx(i.Card.Body,{children:"Card with shadow elevation for depth."})]})]})}),e.jsx(a,{title:"Badges",description:"Status indicators and labels",children:e.jsxs("div",{style:{display:"flex",gap:"var(--spacing-3)",flexWrap:"wrap",alignItems:"center"},children:[e.jsx(s.Badge,{variant:"primary",children:"Primary"}),e.jsx(s.Badge,{variant:"secondary",children:"Secondary"}),e.jsx(s.Badge,{variant:"success",children:"Success"}),e.jsx(s.Badge,{variant:"warning",children:"Warning"}),e.jsx(s.Badge,{variant:"error",children:"Error"}),e.jsx(s.Badge,{variant:"secondary",children:"Neutral"}),e.jsx(s.Badge,{size:"sm",children:"Small"}),e.jsx(s.Badge,{size:"lg",children:"Large"}),e.jsx(s.Badge,{dot:!0,children:"With Dot"})]})}),e.jsx(a,{title:"Alerts",description:"Feedback messages",children:e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"var(--spacing-3)"},children:[e.jsx(p.Alert,{variant:"info",title:"Information",children:"This is an informational message for the user."}),e.jsx(p.Alert,{variant:"success",title:"Success",children:"Your changes have been saved successfully!"}),e.jsx(p.Alert,{variant:"warning",title:"Warning",children:"Please review your information before proceeding."}),e.jsx(p.Alert,{variant:"error",title:"Error",dismissible:!0,children:"An error occurred while processing your request."})]})}),e.jsx(a,{title:"Spinners",description:"Loading indicators",children:e.jsxs("div",{style:{display:"flex",gap:"var(--spacing-4)",alignItems:"center"},children:[e.jsx(l.Spinner,{size:"xs"}),e.jsx(l.Spinner,{size:"sm"}),e.jsx(l.Spinner,{size:"md"}),e.jsx(l.Spinner,{size:"lg"}),e.jsx(l.Spinner,{size:"xl"}),e.jsx(l.Spinner,{variant:"secondary"}),e.jsx(l.Spinner,{showLabel:!0,label:"Loading..."})]})}),e.jsx(a,{title:"Progress Bars",description:"Progress indicators",children:e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"var(--spacing-4)"},children:[e.jsx(h.ProgressBar,{value:30}),e.jsx(h.ProgressBar,{value:60,variant:"success",showLabel:!0}),e.jsx(h.ProgressBar,{value:85,variant:"warning",showLabel:!0}),e.jsx(h.ProgressBar,{value:100,variant:"error"}),e.jsx(h.ProgressBar,{indeterminate:!0})]})}),e.jsx(a,{title:"Avatars",description:"User profile images",children:e.jsxs("div",{style:{display:"flex",gap:"var(--spacing-4)",alignItems:"center"},children:[e.jsx(d.Avatar,{initials:"AB"}),e.jsx(d.Avatar,{initials:"CD",size:"sm"}),e.jsx(d.Avatar,{initials:"EF",size:"lg"}),e.jsx(d.Avatar,{initials:"GH",size:"xl",status:"online"}),e.jsx(d.Avatar,{initials:"IJ",status:"away"}),e.jsx(d.Avatar,{initials:"KL",status:"busy"})]})}),e.jsx(a,{title:"Tooltips",description:"Contextual information on hover",children:e.jsxs("div",{style:{display:"flex",gap:"var(--spacing-4)"},children:[e.jsx(g.Tooltip,{content:"Tooltip on top",placement:"top",children:e.jsx(t.Button,{variant:"secondary",children:"Top"})}),e.jsx(g.Tooltip,{content:"Tooltip on right",placement:"right",children:e.jsx(t.Button,{variant:"secondary",children:"Right"})}),e.jsx(g.Tooltip,{content:"Tooltip on bottom",placement:"bottom",children:e.jsx(t.Button,{variant:"secondary",children:"Bottom"})}),e.jsx(g.Tooltip,{content:"Tooltip on left",placement:"left",children:e.jsx(t.Button,{variant:"secondary",children:"Left"})})]})}),e.jsx(a,{title:"Tabs",description:"Content organization",children:e.jsx(N.Tabs,{tabs:[{id:"tab1",label:"Overview",content:e.jsxs("div",{style:{padding:"var(--spacing-4)"},children:[e.jsx("h3",{style:{fontSize:"var(--text-lg)",fontWeight:"var(--font-weight-medium)",color:"var(--text-primary)",marginBottom:"var(--spacing-2)"},children:"Overview"}),e.jsx("p",{style:{color:"var(--text-secondary)"},children:"This is the overview tab content."})]})},{id:"tab2",label:"Details",badge:"5",content:e.jsxs("div",{style:{padding:"var(--spacing-4)"},children:[e.jsx("h3",{style:{fontSize:"var(--text-lg)",fontWeight:"var(--font-weight-medium)",color:"var(--text-primary)",marginBottom:"var(--spacing-2)"},children:"Details"}),e.jsx("p",{style:{color:"var(--text-secondary)"},children:"This is the details tab with a badge indicator."})]})},{id:"tab3",label:"Settings",content:e.jsxs("div",{style:{padding:"var(--spacing-4)"},children:[e.jsx("h3",{style:{fontSize:"var(--text-lg)",fontWeight:"var(--font-weight-medium)",color:"var(--text-primary)",marginBottom:"var(--spacing-2)"},children:"Settings"}),e.jsx("p",{style:{color:"var(--text-secondary)"},children:"This is the settings tab content."})]})}],activeTab:C,onChange:w})}),e.jsx(a,{title:"Table",description:"Data display with sorting",children:e.jsx(E.Table,{columns:O,data:F,striped:!0,hoverable:!0,onRowClick:r=>alert(`Clicked: ${r.name}`)})}),e.jsxs(a,{title:"Modal",description:"Dialog overlay",children:[e.jsx(t.Button,{onClick:()=>x(!0),children:"Open Modal"}),e.jsxs(v.Modal,{open:m,onClose:()=>x(!1),size:"md",children:[e.jsx(v.Modal.Header,{children:"Modal Title"}),e.jsx(v.Modal.Body,{children:e.jsx("p",{style:{color:"var(--text-primary)"},children:"This is a modal dialog with a header, body, and footer. You can close it by clicking the X button, pressing Escape, or clicking the backdrop."})}),e.jsxs(v.Modal.Footer,{children:[e.jsx(t.Button,{variant:"secondary",onClick:()=>x(!1),children:"Cancel"}),e.jsx(t.Button,{onClick:()=>x(!1),children:"Confirm"})]})]})]})]}),e.jsxs("footer",{style:{padding:"var(--spacing-8) var(--spacing-4)",borderTop:"1px solid var(--border-subtle)",textAlign:"center",color:"var(--text-secondary)"},children:[e.jsx("p",{children:"Orion Design System • Built with Chain of Truth Architecture"}),e.jsx("p",{style:{fontSize:"var(--text-sm)",marginTop:"var(--spacing-2)"},children:"21 Components • TypeScript • CSS Modules • Token-Based"})]})]})},a=({title:o,description:u,children:m})=>e.jsxs("section",{style:{marginBottom:"var(--spacing-8)"},children:[e.jsxs("div",{style:{marginBottom:"var(--spacing-4)"},children:[e.jsx("h2",{style:{fontSize:"var(--text-2xl)",fontWeight:"var(--font-weight-bold)",color:"var(--text-primary)",marginBottom:"var(--spacing-1)"},children:o}),e.jsx("p",{style:{fontSize:"var(--text-base)",color:"var(--text-secondary)"},children:u})]}),e.jsx("div",{style:{padding:"var(--spacing-6)",background:"var(--surface-subtle)",borderRadius:"var(--radius-container)",border:"1px solid var(--border-subtle)"},children:m})]});exports.ComponentShowcase=H;