@orion-ds/react 4.9.2 → 4.9.3

package/dist/ComponentShowcase.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),P=require("./hooks/useTheme.cjs"),n=require("./components/Navbar/Navbar.cjs"),t=require("./components/Button/Button.cjs"),L=require("./components/Breadcrumb/Breadcrumb.cjs"),W=require("./components/ThemeController/ThemeController.cjs"),B=require("./components/Field/Field.cjs"),M=require("./components/Select/Select.cjs"),R=require("./components/Textarea/Textarea.cjs"),y=require("./components/Checkbox/Checkbox.cjs"),f=require("./components/Radio/Radio.cjs"),S=require("./components/Switch/Switch.cjs"),i=require("./components/Card/Card.cjs"),s=require("./components/Badge/Badge.cjs"),p=require("./components/Alert/Alert.cjs"),l=require("./components/Spinner/Spinner.cjs"),h=require("./components/ProgressBar/ProgressBar.cjs"),d=require("./components/Avatar/Avatar.cjs"),g=require("./components/Tooltip/Tooltip.cjs"),N=require("./components/Tabs/Tabs.cjs"),E=require("./components/Table/Table.cjs"),v=require("./components/Modal/Modal.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;

package/dist/ComponentShowcase.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+
+export declare const ComponentShowcase: React.FC;
+//# sourceMappingURL=ComponentShowcase.d.ts.map

package/dist/ComponentShowcase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentShowcase.d.ts","sourceRoot":"","sources":["../src/ComponentShowcase.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AA+DxC,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EA2gBrC,CAAC"}

package/dist/ComponentShowcase.mjs

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

package/dist/blocks/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./sections/ActivityFeed/ActivityFeed.cjs"),t=require("./templates/app/AgentEditor/AgentEditor.cjs"),r=require("./sections/AgentFolder/AgentFolder.cjs"),o=require("./templates/app/AgentWorkspace/AgentWorkspace.cjs"),a=require("./sections/AppDownload/AppDownload.cjs"),i=require("./sections/Blog/Blog.cjs"),n=require("./sections/Breadcrumbs/Breadcrumbs.cjs"),s=require("./sections/CTA/CTA.cjs"),l=require("./sections/CarouselSection/CarouselCard.cjs"),c=require("./sections/CarouselSection/CarouselSection.cjs"),u=require("./templates/app/ChatPageTemplate/ChatPageTemplate.cjs"),g=require("./sections/Chat/Chat.cjs"),p=require("./sections/Comparison/Comparison.cjs"),m=require("./sections/Contact/Contact.cjs"),q=require("./templates/app/DashboardTemplate/DashboardTemplate.cjs"),T=require("./sections/EmptyState/EmptyState.cjs"),C=require("./sections/FAQ/FAQ.cjs"),d=require("./sections/Features/Features.cjs"),S=require("./sections/Footer/Footer.cjs"),A=require("./sections/Gallery/Gallery.cjs"),P=require("./sections/Hero/Hero.cjs"),h=require("./sections/Hero/HeroHighlight.cjs"),F=require("./templates/app/KanbanPageTemplate/KanbanPageTemplate.cjs"),y=require("./templates/app/LoginTemplate/LoginTemplate.cjs"),b=require("./sections/LogoCloud/LogoCloud.cjs"),H=require("./sections/Newsletter/Newsletter.cjs"),L=require("./sections/Pricing/Pricing.cjs"),f=require("./templates/app/ProfilePageTemplate/ProfilePageTemplate.cjs"),w=require("./sections/SettingsLayout/SettingsLayout.cjs"),B=require("./templates/app/SettingsTemplate/SettingsTemplate.cjs"),D=require("./sections/SocialProof/SocialProof.cjs"),E=require("./sections/Stats/Stats.cjs"),v=require("./sections/Stepper/Stepper.cjs"),k=require("./sections/Team/Team.cjs"),G=require("./sections/Testimonials/Testimonials.cjs"),K=require("./sections/Timeline/Timeline.cjs");exports.ActivityFeed=e.ActivityFeed;exports.AgentEditor=t.AgentEditor;exports.AgentFolder=r.AgentFolder;exports.AgentWorkspace=o.AgentWorkspace;exports.AppDownload=a.AppDownload;exports.Blog=i.Blog;exports.Breadcrumbs=n.Breadcrumbs;exports.CTA=s.CTA;exports.CarouselCard=l.CarouselCard;exports.CarouselSection=c.CarouselSection;exports.ChatPageTemplate=u.ChatPageTemplate;exports.ChatSection=g.ChatSection;exports.Comparison=p.Comparison;exports.Contact=m.Contact;exports.DashboardTemplate=q.DashboardTemplate;exports.EmptyState=T.EmptyState;exports.FAQ=C.FAQ;exports.Features=d.Features;exports.Footer=S.Footer;exports.Gallery=A.Gallery;exports.Hero=P.Hero;exports.HeroHighlight=h.HeroHighlight;exports.KanbanPageTemplate=F.KanbanPageTemplate;exports.LoginTemplate=y.LoginTemplate;exports.LogoCloud=b.LogoCloud;exports.Newsletter=H.Newsletter;exports.Pricing=L.Pricing;exports.ProfilePageTemplate=f.ProfilePageTemplate;exports.SettingsLayout=w.SettingsLayout;exports.SettingsTemplate=B.SettingsTemplate;exports.SocialProof=D.SocialProof;exports.Stats=E.Stats;exports.Stepper=v.Stepper;exports.Team=k.Team;exports.Testimonials=G.Testimonials;exports.Timeline=K.Timeline;

package/dist/blocks/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @orion-ds/react/blocks - Premium sections and marketing blocks
+ *
+ * High-level marketing and app sections built with Orion components.
+ * Includes Hero, Features, CTA, Pricing, Footer, and more.
+ */
+export * from './sections';
+export * from './templates';
+//# sourceMappingURL=index.d.ts.map