@orion-ds/react 4.9.2 → 4.9.3

package/dist/components/Banner/index.d.ts

@@ -0,0 +1,3 @@
+export { Banner } from './Banner';
+export type { BannerProps, BannerVariant } from './Banner.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Banner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/Breadcrumb/Breadcrumb.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),f=require("react"),B=require("lucide-react"),a=require("./Breadcrumb.module.css.cjs"),h=({items:l,separator:c="chevron",customSeparator:u,showHomeIcon:m=!1,maxItems:n,size:i="md",className:j,linkProps:p})=>{const t=f.useMemo(()=>{if(!n||l.length<=n)return l;const e=l[0],s=l.slice(-(n-1));return[...e?[e]:[],{label:"...",href:void 0},...s]},[l,n]),b=e=>{const s=[a.default.separator,c==="chevron"&&a.default.chevron,c==="slash"&&a.default.slash].filter(Boolean).join(" ");return c==="custom"&&u?r.jsx("span",{className:a.default.separator,"aria-hidden":"true",children:u},`sep-${e}`):r.jsx("span",{className:s,"aria-hidden":"true"},`sep-${e}`)},N=()=>{switch(i){case"sm":return 14;case"lg":return 18;default:return 16}},o=()=>m?r.jsx("span",{className:a.default.homeIcon,"aria-label":"Home",children:r.jsx(B.Home,{size:N()})}):null,g=(e,s)=>{const d=s===t.length-1;return e.label==="..."?r.jsx("li",{className:a.default.item,children:r.jsx("span",{className:a.default.ellipsis,"aria-label":"More items",children:"…"})},`ellipsis-${s}`):d||!e.href?r.jsx("li",{className:a.default.item,"aria-current":d?"page":void 0,children:r.jsxs("span",{className:a.default.current,children:[s===0&&o(),e.icon&&r.jsx("span",{className:a.default.icon,children:e.icon}),e.label]})},s):r.jsx("li",{className:a.default.item,children:r.jsxs("a",{href:e.href,className:a.default.link,...p,children:[s===0&&o(),e.icon&&r.jsx("span",{className:a.default.icon,children:e.icon}),e.label]})},s)},v=[a.default.breadcrumb,a.default[i],j].filter(Boolean).join(" ");return r.jsx("nav",{"aria-label":"Breadcrumb",children:r.jsx("ol",{className:v,children:t.map((e,s)=>r.jsxs(f.Fragment,{children:[g(e,s),s<t.length-1&&b(s)]},s))})})};h.displayName="Breadcrumb";exports.Breadcrumb=h;

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { BreadcrumbProps } from './Breadcrumb.types';
+
+export declare const Breadcrumb: React.FC<BreadcrumbProps>;
+//# sourceMappingURL=Breadcrumb.d.ts.map

package/dist/components/Breadcrumb/Breadcrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,eAAe,EAAkB,MAAM,oBAAoB,CAAC;AAG1E,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA8IhD,CAAC"}

package/dist/components/Breadcrumb/Breadcrumb.mjs

@@ -0,0 +1,84 @@
+import { jsx as a, jsxs as i } from "react/jsx-runtime";
+import p from "react";
+import { Home as j } from "lucide-react";
+import s from "./Breadcrumb.module.css.mjs";
+const I = ({
+  items: l,
+  separator: c = "chevron",
+  customSeparator: t,
+  showHomeIcon: d = !1,
+  maxItems: n,
+  size: h = "md",
+  className: f,
+  linkProps: b
+}) => {
+  const o = p.useMemo(() => {
+    if (!n || l.length <= n)
+      return l;
+    const r = l[0], e = l.slice(-(n - 1));
+    return [
+      ...r ? [r] : [],
+      { label: "...", href: void 0 },
+      // Ellipsis
+      ...e
+    ];
+  }, [l, n]), N = (r) => {
+    const e = [
+      s.separator,
+      c === "chevron" && s.chevron,
+      c === "slash" && s.slash
+    ].filter(Boolean).join(" ");
+    return c === "custom" && t ? /* @__PURE__ */ a(
+      "span",
+      {
+        className: s.separator,
+        "aria-hidden": "true",
+        children: t
+      },
+      `sep-${r}`
+    ) : /* @__PURE__ */ a(
+      "span",
+      {
+        className: e,
+        "aria-hidden": "true"
+      },
+      `sep-${r}`
+    );
+  }, g = () => {
+    switch (h) {
+      case "sm":
+        return 14;
+      case "lg":
+        return 18;
+      default:
+        return 16;
+    }
+  }, m = () => d ? /* @__PURE__ */ a("span", { className: s.homeIcon, "aria-label": "Home", children: /* @__PURE__ */ a(j, { size: g() }) }) : null, v = (r, e) => {
+    const u = e === o.length - 1;
+    return r.label === "..." ? /* @__PURE__ */ a("li", { className: s.item, children: /* @__PURE__ */ a("span", { className: s.ellipsis, "aria-label": "More items", children: "…" }) }, `ellipsis-${e}`) : u || !r.href ? /* @__PURE__ */ a(
+      "li",
+      {
+        className: s.item,
+        "aria-current": u ? "page" : void 0,
+        children: /* @__PURE__ */ i("span", { className: s.current, children: [
+          e === 0 && m(),
+          r.icon && /* @__PURE__ */ a("span", { className: s.icon, children: r.icon }),
+          r.label
+        ] })
+      },
+      e
+    ) : /* @__PURE__ */ a("li", { className: s.item, children: /* @__PURE__ */ i("a", { href: r.href, className: s.link, ...b, children: [
+      e === 0 && m(),
+      r.icon && /* @__PURE__ */ a("span", { className: s.icon, children: r.icon }),
+      r.label
+    ] }) }, e);
+  }, B = [s.breadcrumb, s[h], f].filter(Boolean).join(" ");
+  return /* @__PURE__ */ a("nav", { "aria-label": "Breadcrumb", children: /* @__PURE__ */ a("ol", { className: B, children: o.map((r, e) => /* @__PURE__ */ i(p.Fragment, { children: [
+    v(r, e),
+    e < o.length - 1 && N(e)
+  ] }, e)) }) });
+};
+I.displayName = "Breadcrumb";
+export {
+  I as Breadcrumb
+};

package/dist/components/Breadcrumb/Breadcrumb.module.css

@@ -0,0 +1 @@
+._breadcrumb_12bqk_8{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-2);list-style:none;margin:0;padding:0;font-family:var(--font-secondary)}._item_12bqk_20{display:flex;align-items:center}._link_12bqk_26{display:inline-flex;align-items:center;gap:var(--spacing-2);font-weight:var(--font-weight-regular);color:var(--text-secondary);text-decoration:none;padding:var(--spacing-1) var(--spacing-2);border-radius:var(--radius-sm);transition:all var(--transition-fast)}._link_12bqk_26:hover{color:var(--text-primary);background:var(--surface-subtle)}._link_12bqk_26:focus-visible{outline:2px solid var(--interactive-primary);outline-offset:2px}._current_12bqk_49{display:inline-flex;align-items:center;gap:var(--spacing-2);font-weight:var(--font-weight-medium);color:var(--text-primary);padding:var(--spacing-1) var(--spacing-2)}._separator_12bqk_59{display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);-webkit-user-select:none;user-select:none;flex-shrink:0}._chevron_12bqk_69{width:16px;height:16px}._chevron_12bqk_69:after{content:"";display:block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);margin-left:2px}._slash_12bqk_86:after{content:"/";font-weight:var(--font-weight-regular);font-size:.875em;opacity:.5}._icon_12bqk_94{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:currentColor;opacity:.7}._link_12bqk_26:hover ._icon_12bqk_94,._current_12bqk_49 ._icon_12bqk_94{opacity:1}._homeIcon_12bqk_112{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}._ellipsis_12bqk_120{display:inline-flex;align-items:center;justify-content:center;color:var(--text-tertiary);font-weight:var(--font-weight-medium);-webkit-user-select:none;user-select:none;padding:var(--spacing-1) var(--spacing-2);letter-spacing:2px}._sm_12bqk_135 ._link_12bqk_26,._sm_12bqk_135 ._current_12bqk_49,._sm_12bqk_135 ._ellipsis_12bqk_120{font-size:var(--font-size-12);padding:2px var(--spacing-1)}._sm_12bqk_135 ._icon_12bqk_94,._sm_12bqk_135 ._homeIcon_12bqk_112,._sm_12bqk_135 ._separator_12bqk_59{width:14px;height:14px}._sm_12bqk_135 ._chevron_12bqk_69:after{width:5px;height:5px}._md_12bqk_158 ._link_12bqk_26,._md_12bqk_158 ._current_12bqk_49,._md_12bqk_158 ._ellipsis_12bqk_120{font-size:var(--font-size-14)}._md_12bqk_158 ._icon_12bqk_94,._md_12bqk_158 ._homeIcon_12bqk_112,._md_12bqk_158 ._separator_12bqk_59{width:16px;height:16px}._lg_12bqk_175 ._link_12bqk_26,._lg_12bqk_175 ._current_12bqk_49,._lg_12bqk_175 ._ellipsis_12bqk_120{font-size:var(--font-size-16);padding:var(--spacing-1) var(--spacing-2)}._lg_12bqk_175 ._icon_12bqk_94,._lg_12bqk_175 ._homeIcon_12bqk_112,._lg_12bqk_175 ._separator_12bqk_59{width:18px;height:18px}._lg_12bqk_175 ._chevron_12bqk_69:after{width:7px;height:7px}

package/dist/components/Breadcrumb/Breadcrumb.module.css.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s="_breadcrumb_12bqk_8",e="_item_12bqk_20",_="_link_12bqk_26",o="_current_12bqk_49",c="_separator_12bqk_59",n="_chevron_12bqk_69",t="_slash_12bqk_86",r="_icon_12bqk_94",l="_homeIcon_12bqk_112",i="_ellipsis_12bqk_120",b="_sm_12bqk_135",m="_md_12bqk_158",a="_lg_12bqk_175",k={breadcrumb:s,item:e,link:_,current:o,separator:c,chevron:n,slash:t,icon:r,homeIcon:l,ellipsis:i,sm:b,md:m,lg:a};exports.breadcrumb=s;exports.chevron=n;exports.current=o;exports.default=k;exports.ellipsis=i;exports.homeIcon=l;exports.icon=r;exports.item=e;exports.lg=a;exports.link=_;exports.md=m;exports.separator=c;exports.slash=t;exports.sm=b;

package/dist/components/Breadcrumb/Breadcrumb.module.css.mjs

@@ -0,0 +1,31 @@
+const _ = "_breadcrumb_12bqk_8", s = "_item_12bqk_20", o = "_link_12bqk_26", c = "_current_12bqk_49", n = "_separator_12bqk_59", t = "_chevron_12bqk_69", e = "_slash_12bqk_86", r = "_icon_12bqk_94", b = "_homeIcon_12bqk_112", l = "_ellipsis_12bqk_120", k = "_sm_12bqk_135", i = "_md_12bqk_158", m = "_lg_12bqk_175", a = {
+  breadcrumb: _,
+  item: s,
+  link: o,
+  current: c,
+  separator: n,
+  chevron: t,
+  slash: e,
+  icon: r,
+  homeIcon: b,
+  ellipsis: l,
+  sm: k,
+  md: i,
+  lg: m
+};
+export {
+  _ as breadcrumb,
+  t as chevron,
+  c as current,
+  a as default,
+  l as ellipsis,
+  b as homeIcon,
+  r as icon,
+  s as item,
+  m as lg,
+  o as link,
+  i as md,
+  n as separator,
+  e as slash,
+  k as sm
+};

package/dist/components/Breadcrumb/Breadcrumb.types.d.ts

@@ -0,0 +1,88 @@
+import { ReactNode, AnchorHTMLAttributes } from 'react';
+
+/**
+ * Breadcrumb sizes
+ */
+export type BreadcrumbSize = "sm" | "md" | "lg";
+/**
+ * Breadcrumb separator type
+ */
+export type BreadcrumbSeparator = "chevron" | "slash" | "custom";
+/**
+ * Individual breadcrumb item
+ */
+export interface BreadcrumbItem {
+    /**
+     * Item label
+     */
+    label: string;
+    /**
+     * Link href (if undefined, renders as span)
+     */
+    href?: string;
+    /**
+     * Optional icon
+     */
+    icon?: ReactNode;
+}
+/**
+ * Breadcrumb component props
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumb
+ *   items={[
+ *     { label: 'Home', href: '/' },
+ *     { label: 'Products', href: '/products' },
+ *     { label: 'Laptop' }
+ *   ]}
+ * />
+ *
+ * <Breadcrumb
+ *   items={items}
+ *   separator="slash"
+ *   showHomeIcon
+ *   size="lg"
+ * />
+ * ```
+ */
+export interface BreadcrumbProps {
+    /**
+     * Breadcrumb items
+     */
+    items: BreadcrumbItem[];
+    /**
+     * Separator type
+     * @default 'chevron'
+     */
+    separator?: BreadcrumbSeparator;
+    /**
+     * Custom separator element
+     * (only used if separator is 'custom')
+     */
+    customSeparator?: ReactNode;
+    /**
+     * Show home icon for first item
+     * @default false
+     */
+    showHomeIcon?: boolean;
+    /**
+     * Maximum number of items to display
+     * (items in middle will be collapsed if exceeded)
+     */
+    maxItems?: number;
+    /**
+     * Breadcrumb size
+     * @default 'md'
+     */
+    size?: BreadcrumbSize;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+    /**
+     * Link props (applied to all anchor elements)
+     */
+    linkProps?: Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href">;
+}
+//# sourceMappingURL=Breadcrumb.types.d.ts.map

package/dist/components/Breadcrumb/Breadcrumb.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.types.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/Breadcrumb.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAE7D;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEhD;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEjE;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,KAAK,EAAE,cAAc,EAAE,CAAC;IAExB;;;OAGG;IACH,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAEhC;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,CAAC;CACnE"}

package/dist/components/Breadcrumb/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Breadcrumb Component - Navigation hierarchy display.
+ *
+ * @example
+ * ```tsx
+ * import { Breadcrumb } from '@orion-ds/react';
+ *
+ * <Breadcrumb
+ *   items={[
+ *     { label: 'Home', href: '/' },
+ *     { label: 'Products', href: '/products' },
+ *     { label: 'Category', href: '/products/category' },
+ *     { label: 'Item' }, // Current page (no href)
+ *   ]}
+ * />
+ * ```
+ */
+export { Breadcrumb } from './Breadcrumb';
+export type { BreadcrumbProps, BreadcrumbItem, BreadcrumbSize, BreadcrumbSeparator, } from './Breadcrumb.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Breadcrumb/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EACV,eAAe,EACf,cAAc,EACd,cAAc,EACd,mBAAmB,GACpB,MAAM,oBAAoB,CAAC"}

package/dist/components/Button/Button.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),C=require("react"),e=require("./Button.module.css.cjs"),B=r=>r.replace(/-([a-z])/g,d=>d[1]?.toUpperCase()||""),c=C.forwardRef(({variant:r="primary",size:d="md",isLoading:t=!1,loadingText:u,fullWidth:i=!1,icon:s,iconRight:o,iconOnly:l=!1,className:f,children:m,disabled:p,type:h="button",...j},N)=>{const b=e.default[B(r)],$=[e.default.button,b,e.default[d],i&&e.default.fullWidth,l&&e.default.iconOnly,t&&e.default.loading,f].filter(Boolean).join(" "),x=p||t,n=t?e.default.loadingContent:void 0;return a.jsxs("button",{ref:N,type:h,className:$,disabled:x,...j,children:[t&&a.jsx("span",{className:e.default.spinner,"aria-hidden":"true"}),s&&!l&&a.jsx("span",{className:`${e.default.icon} ${n||""}`,"aria-hidden":"true",children:s}),l&&s?a.jsx("span",{className:`${e.default.icon} ${n||""}`,"aria-hidden":"true",children:s}):a.jsx("span",{className:n,children:t&&u?u:m}),o&&!l&&a.jsx("span",{className:`${e.default.icon} ${e.default.iconRight} ${n||""}`,"aria-hidden":"true",children:o})]})});c.displayName="Button";exports.Button=c;

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,4 @@
+import { ButtonProps } from './Button.types';
+
+export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/Button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAOlD,eAAO,MAAM,MAAM,2GAqFlB,CAAC"}

package/dist/components/Button/Button.mjs

@@ -0,0 +1,71 @@
+import { jsxs as j, jsx as e } from "react/jsx-runtime";
+import { forwardRef as B } from "react";
+import a from "./Button.module.css.mjs";
+const v = (l) => l.replace(/-([a-z])/g, (o) => o[1]?.toUpperCase() || ""), x = B(
+  ({
+    variant: l = "primary",
+    size: o = "md",
+    isLoading: s = !1,
+    loadingText: c,
+    fullWidth: i = !1,
+    icon: t,
+    iconRight: d,
+    iconOnly: r = !1,
+    className: m,
+    children: p,
+    disabled: u,
+    type: f = "button",
+    ...h
+  }, N) => {
+    const $ = a[v(l)], C = [
+      a.button,
+      $,
+      a[o],
+      i && a.fullWidth,
+      r && a.iconOnly,
+      s && a.loading,
+      m
+    ].filter(Boolean).join(" "), b = u || s, n = s ? a.loadingContent : void 0;
+    return /* @__PURE__ */ j(
+      "button",
+      {
+        ref: N,
+        type: f,
+        className: C,
+        disabled: b,
+        ...h,
+        children: [
+          s && /* @__PURE__ */ e("span", { className: a.spinner, "aria-hidden": "true" }),
+          t && !r && /* @__PURE__ */ e(
+            "span",
+            {
+              className: `${a.icon} ${n || ""}`,
+              "aria-hidden": "true",
+              children: t
+            }
+          ),
+          r && t ? /* @__PURE__ */ e(
+            "span",
+            {
+              className: `${a.icon} ${n || ""}`,
+              "aria-hidden": "true",
+              children: t
+            }
+          ) : /* @__PURE__ */ e("span", { className: n, children: s && c ? c : p }),
+          d && !r && /* @__PURE__ */ e(
+            "span",
+            {
+              className: `${a.icon} ${a.iconRight} ${n || ""}`,
+              "aria-hidden": "true",
+              children: d
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+x.displayName = "Button";
+export {
+  x as Button
+};

package/dist/components/Button/Button.module.css

@@ -0,0 +1 @@
+._button_g3h5h_9{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);font-family:var(--font-secondary);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all var(--transition-fast);border:1px solid transparent;outline:none}._button_g3h5h_9:focus-visible{outline:2px solid var(--interactive-primary);outline-offset:2px}._button_g3h5h_9:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}._primary_g3h5h_49{background:var(--interactive-primary);color:var(--interactive-primary-text)}._primary_g3h5h_49:hover:not(:disabled){background:var(--interactive-primary-hover)}._primary_g3h5h_49:active:not(:disabled){transform:translateY(1px)}._secondary_g3h5h_63{background:var(--interactive-secondary);color:var(--interactive-secondary-text);border:1px solid var(--border-subtle)}._secondary_g3h5h_63:hover:not(:disabled){background:var(--interactive-secondary-hover);border-color:var(--border-subtle)}._secondary_g3h5h_63:active:not(:disabled){background:var(--surface-layer);transform:translateY(1px)}[data-theme=dark] ._secondary_g3h5h_63{background:color-mix(in srgb,var(--color-neutral-0) 15%,transparent);border-color:color-mix(in srgb,var(--color-neutral-0) 15%,transparent);color:var(--text-primary);backdrop-filter:blur(var(--mode-blur-amount, var(--blur-md)));-webkit-backdrop-filter:blur(var(--mode-blur-amount, var(--blur-md)))}[data-theme=dark] ._secondary_g3h5h_63:hover:not(:disabled){background:color-mix(in srgb,var(--color-neutral-0) 22%,transparent);border-color:color-mix(in srgb,var(--color-neutral-0) 15%,transparent)}[data-theme=dark] ._secondary_g3h5h_63:active:not(:disabled){background:color-mix(in srgb,var(--color-neutral-0) 30%,transparent)}._secondaryInverse_g3h5h_100{background:color-mix(in srgb,var(--color-neutral-0) 20%,transparent);color:var(--color-neutral-0);border:1px solid color-mix(in srgb,var(--color-neutral-0) 20%,transparent)}._secondaryInverse_g3h5h_100:hover:not(:disabled){background:color-mix(in srgb,var(--color-neutral-0) 30%,transparent);border-color:color-mix(in srgb,var(--color-neutral-0) 30%,transparent)}._secondaryInverse_g3h5h_100:active:not(:disabled){background:color-mix(in srgb,var(--color-neutral-0) 40%,transparent);transform:translateY(1px)}._ghost_g3h5h_118{background:transparent;color:var(--text-primary)}._ghost_g3h5h_118:hover:not(:disabled){background:var(--interactive-ghost-hover)}._ghost_g3h5h_118:active:not(:disabled){transform:scale(.98)}._ghostInverse_g3h5h_133{background:transparent;color:var(--color-neutral-0)}._ghostInverse_g3h5h_133:hover:not(:disabled){background:color-mix(in srgb,var(--color-neutral-0) 15%,transparent)}._ghostInverse_g3h5h_133:active:not(:disabled){transform:scale(.98)}._danger_g3h5h_147{background:var(--status-error);color:var(--color-neutral-0)}._danger_g3h5h_147:hover:not(:disabled){background:color-mix(in srgb,var(--status-error) 85%,var(--color-neutral-1000))}._danger_g3h5h_147:active:not(:disabled){transform:translateY(1px)}._inverse_g3h5h_166{background:var(--color-neutral-0);color:var(--interactive-primary);border-color:transparent}._inverse_g3h5h_166:hover:not(:disabled){background:color-mix(in srgb,var(--color-neutral-0) 92%,var(--color-neutral-900))}._inverse_g3h5h_166:active:not(:disabled){transform:translateY(1px)}[data-brand=lemon] ._inverse_g3h5h_166{color:var(--color-neutral-1000)}._sm_g3h5h_193{height:32px;padding:0 var(--spacing-3);font-size:var(--font-size-12);border-radius:var(--radius-button)}._md_g3h5h_200{height:40px;padding:0 var(--spacing-4);font-size:var(--font-size-16);border-radius:var(--radius-button)}._lg_g3h5h_207{height:48px;padding:0 var(--spacing-6);font-size:var(--font-size-18);border-radius:var(--radius-button)}._fullWidth_g3h5h_219{width:100%}._iconOnly_g3h5h_224._sm_g3h5h_193{width:32px;padding:0}._iconOnly_g3h5h_224._md_g3h5h_200{width:40px;padding:0}._iconOnly_g3h5h_224._lg_g3h5h_207{width:48px;padding:0}._loading_g3h5h_242{position:relative;pointer-events:none}._spinner_g3h5h_247{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;animation:_spin_g3h5h_247 .6s linear infinite}._primary_g3h5h_49 ._spinner_g3h5h_247{border:2px solid var(--interactive-primary-text);border-top-color:transparent}._secondary_g3h5h_63 ._spinner_g3h5h_247{border:2px solid var(--text-primary);border-top-color:transparent}._secondaryInverse_g3h5h_100 ._spinner_g3h5h_247{border:2px solid var(--color-neutral-0);border-top-color:transparent}._ghost_g3h5h_118 ._spinner_g3h5h_247{border:2px solid var(--text-primary);border-top-color:transparent}._ghostInverse_g3h5h_133 ._spinner_g3h5h_247,._danger_g3h5h_147 ._spinner_g3h5h_247{border:2px solid var(--color-neutral-0);border-top-color:transparent}._inverse_g3h5h_166 ._spinner_g3h5h_247{border:2px solid var(--interactive-primary);border-top-color:transparent}[data-brand=lemon] ._inverse_g3h5h_166 ._spinner_g3h5h_247{border:2px solid var(--color-neutral-1000);border-top-color:transparent}[data-theme=light][data-brand=ember] ._primary_g3h5h_49{background:var(--color-neutral-900);color:var(--color-neutral-0)}[data-theme=light][data-brand=ember] ._primary_g3h5h_49:hover:not(:disabled){background:var(--color-neutral-700)}[data-theme=dark][data-brand=ember] ._primary_g3h5h_49{background:var(--color-neutral-100);color:var(--color-neutral-900)}[data-theme=dark][data-brand=ember] ._primary_g3h5h_49:hover:not(:disabled){background:var(--color-neutral-0)}._loadingContent_g3h5h_325{visibility:hidden}[data-dark-bg=true] ._primary_g3h5h_49{background:var(--color-neutral-0);color:var(--interactive-primary);border-color:transparent}[data-dark-bg=true] ._primary_g3h5h_49:hover:not(:disabled){background:color-mix(in srgb,var(--color-neutral-0) 92%,var(--color-neutral-900))}[data-dark-bg=true] ._primary_g3h5h_49:active:not(:disabled){transform:translateY(1px)}[data-dark-bg=true] ._secondary_g3h5h_63{background:color-mix(in srgb,var(--color-neutral-0) 20%,transparent);color:var(--color-neutral-0);border:1px solid color-mix(in srgb,var(--color-neutral-0) 20%,transparent);backdrop-filter:none;-webkit-backdrop-filter:none}[data-dark-bg=true] ._secondary_g3h5h_63:hover:not(:disabled){background:color-mix(in srgb,var(--color-neutral-0) 30%,transparent);border-color:color-mix(in srgb,var(--color-neutral-0) 30%,transparent)}[data-dark-bg=true] ._secondary_g3h5h_63:active:not(:disabled){background:color-mix(in srgb,var(--color-neutral-0) 40%,transparent);transform:translateY(1px)}[data-dark-bg=true] ._ghost_g3h5h_118{background:transparent;color:var(--color-neutral-0)}[data-dark-bg=true] ._ghost_g3h5h_118:hover:not(:disabled){background:color-mix(in srgb,var(--color-neutral-0) 15%,transparent)}[data-dark-bg=true] ._ghost_g3h5h_118:active:not(:disabled){transform:scale(.98)}[data-dark-bg=true] ._primary_g3h5h_49 ._spinner_g3h5h_247{border:2px solid var(--interactive-primary);border-top-color:transparent}[data-dark-bg=true] ._secondary_g3h5h_63 ._spinner_g3h5h_247,[data-dark-bg=true] ._ghost_g3h5h_118 ._spinner_g3h5h_247{border:2px solid var(--color-neutral-0);border-top-color:transparent}[data-brand=lemon][data-dark-bg=true] ._primary_g3h5h_49{color:var(--color-neutral-1000)}@keyframes _spin_g3h5h_247{to{transform:translate(-50%,-50%) rotate(360deg)}}._icon_g3h5h_224{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0}._iconRight_g3h5h_423{order:1}

package/dist/components/Button/Button.module.css.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n="_button_g3h5h_9",o="_primary_g3h5h_49",s="_secondary_g3h5h_63",t="_secondaryInverse_g3h5h_100",_="_ghost_g3h5h_118",e="_ghostInverse_g3h5h_133",h="_danger_g3h5h_147",g="_inverse_g3h5h_166",i="_sm_g3h5h_193",c="_md_g3h5h_200",r="_lg_g3h5h_207",d="_fullWidth_g3h5h_219",l="_iconOnly_g3h5h_224",a="_loading_g3h5h_242",y="_spinner_g3h5h_247",u="_spin_g3h5h_247",v="_loadingContent_g3h5h_325",m="_icon_g3h5h_224",p="_iconRight_g3h5h_423",I={button:n,primary:o,secondary:s,secondaryInverse:t,ghost:_,ghostInverse:e,danger:h,inverse:g,sm:i,md:c,lg:r,fullWidth:d,iconOnly:l,loading:a,spinner:y,spin:u,loadingContent:v,icon:m,iconRight:p};exports.button=n;exports.danger=h;exports.default=I;exports.fullWidth=d;exports.ghost=_;exports.ghostInverse=e;exports.icon=m;exports.iconOnly=l;exports.iconRight=p;exports.inverse=g;exports.lg=r;exports.loading=a;exports.loadingContent=v;exports.md=c;exports.primary=o;exports.secondary=s;exports.secondaryInverse=t;exports.sm=i;exports.spin=u;exports.spinner=y;

package/dist/components/Button/Button.module.css.mjs

@@ -0,0 +1,43 @@
+const n = "_button_g3h5h_9", _ = "_primary_g3h5h_49", o = "_secondary_g3h5h_63", s = "_secondaryInverse_g3h5h_100", h = "_ghost_g3h5h_118", t = "_ghostInverse_g3h5h_133", g = "_danger_g3h5h_147", e = "_inverse_g3h5h_166", c = "_sm_g3h5h_193", i = "_md_g3h5h_200", r = "_lg_g3h5h_207", d = "_fullWidth_g3h5h_219", a = "_iconOnly_g3h5h_224", l = "_loading_g3h5h_242", y = "_spinner_g3h5h_247", p = "_spin_g3h5h_247", m = "_loadingContent_g3h5h_325", v = "_icon_g3h5h_224", u = "_iconRight_g3h5h_423", I = {
+  button: n,
+  primary: _,
+  secondary: o,
+  secondaryInverse: s,
+  ghost: h,
+  ghostInverse: t,
+  danger: g,
+  inverse: e,
+  sm: c,
+  md: i,
+  lg: r,
+  fullWidth: d,
+  iconOnly: a,
+  loading: l,
+  spinner: y,
+  spin: p,
+  loadingContent: m,
+  icon: v,
+  iconRight: u
+};
+export {
+  n as button,
+  g as danger,
+  I as default,
+  d as fullWidth,
+  h as ghost,
+  t as ghostInverse,
+  v as icon,
+  a as iconOnly,
+  u as iconRight,
+  e as inverse,
+  r as lg,
+  l as loading,
+  m as loadingContent,
+  i as md,
+  _ as primary,
+  o as secondary,
+  s as secondaryInverse,
+  c as sm,
+  p as spin,
+  y as spinner
+};

package/dist/components/Button/Button.types.d.ts

@@ -0,0 +1,208 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+
+/**
+ * Button visual variants - each has specific semantic meaning.
+ *
+ * @semanticGuide
+ * - `primary`: Main CTA - Submit, Save, Continue, Get Started
+ * - `secondary`: Supporting action ON LIGHT BACKGROUNDS - Cancel, Back, Learn More
+ * - `secondaryInverse`: Supporting action ON DARK/COLORED BACKGROUNDS - Learn More on hero photo
+ * - `ghost`: Subtle/tertiary action ON LIGHT BACKGROUNDS - Close, Dismiss, Skip
+ * - `ghostInverse`: Subtle/tertiary action ON DARK/COLORED BACKGROUNDS - Skip on banner
+ * - `danger`: Destructive action - Delete, Remove, Unsubscribe
+ * - `inverse`: Primary CTA on colored backgrounds - Hero CTAs, Banners
+ *
+ * @backgroundContext
+ * Use regular variants (secondary, ghost) on light/white backgrounds.
+ * Use inverse variants (secondaryInverse, ghostInverse) on dark/colored/photo backgrounds.
+ *
+ * @example Light background context
+ * ```tsx
+ * <Button variant="primary">Save</Button>           // Main action
+ * <Button variant="secondary">Cancel</Button>       // Supporting
+ * <Button variant="ghost">Skip</Button>             // Tertiary
+ * ```
+ *
+ * @example Dark/colored background context (hero, photo, colored banner)
+ * ```tsx
+ * <Button variant="inverse">Get Started</Button>         // Primary on brand bg
+ * <Button variant="secondaryInverse">Learn More</Button> // Supporting on photo
+ * <Button variant="ghostInverse">Skip</Button>           // Tertiary on dark bg
+ * ```
+ */
+export type ButtonVariant = "primary" | "secondary" | "secondaryInverse" | "ghost" | "ghostInverse" | "danger" | "inverse";
+/**
+ * Button sizes - automatically adapt to current mode (display/product/app).
+ *
+ * @modeAware Sizes scale per data-mode:
+ * - Display mode: sm=40px, md=56px, lg=64px (spacious, marketing)
+ * - Product mode: sm=28px, md=32px, lg=36px (compact, SaaS)
+ * - App mode: sm=40px, md=44px, lg=48px (touch-friendly, mobile)
+ *
+ * @semanticGuide
+ * - `sm`: Dense UIs, tables, inline actions
+ * - `md`: Default - most buttons (recommended)
+ * - `lg`: Hero CTAs, prominent actions
+ *
+ * @example
+ * ```tsx
+ * <Button size="sm">Edit</Button>           // Dense UI
+ * <Button size="md">Submit</Button>         // Default
+ * <Button size="lg">Get Started</Button>    // Hero CTA
+ * ```
+ */
+export type ButtonSize = "sm" | "md" | "lg";
+/**
+ * Button component props
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Button variant="primary" size="md">
+ *   Click me
+ * </Button>
+ * ```
+ *
+ * @example With icon
+ * ```tsx
+ * import { Download } from 'lucide-react';
+ *
+ * <Button icon={<Download size={20} />}>
+ *   Download
+ * </Button>
+ * ```
+ *
+ * @example Icon-only (requires aria-label)
+ * ```tsx
+ * import { Settings } from 'lucide-react';
+ *
+ * <Button
+ *   iconOnly
+ *   icon={<Settings size={20} />}
+ *   aria-label="Settings"
+ * />
+ * ```
+ *
+ * @example Loading state
+ * ```tsx
+ * <Button isLoading>
+ *   Saving...
+ * </Button>
+ * ```
+ */
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Visual variant of the button.
+     *
+     * @semanticGuide
+     * - `primary`: Main CTA (Submit, Save, Continue)
+     * - `secondary`: Supporting action on LIGHT backgrounds (Cancel, Back)
+     * - `secondaryInverse`: Supporting action on DARK/COLORED backgrounds
+     * - `ghost`: Subtle action on LIGHT backgrounds (Close, Dismiss)
+     * - `ghostInverse`: Subtle action on DARK/COLORED backgrounds
+     * - `danger`: Destructive action (Delete, Remove)
+     * - `inverse`: Primary CTA on colored backgrounds
+     *
+     * @backgroundContext
+     * Use `secondary`/`ghost` on white/light backgrounds.
+     * Use `secondaryInverse`/`ghostInverse` on dark/colored/photo backgrounds.
+     *
+     * @default 'primary'
+     */
+    variant?: ButtonVariant;
+    /**
+     * Size of the button. Automatically adapts to current mode.
+     *
+     * @modeAware
+     * - Display: 40/56/64px heights (spacious)
+     * - Product: 28/32/36px heights (compact)
+     * - App: 40/44/48px heights (touch-friendly)
+     *
+     * @default 'md'
+     */
+    size?: ButtonSize;
+    /**
+     * Loading state - shows spinner and disables interaction.
+     * Button text remains visible but dimmed.
+     *
+     * @example
+     * ```tsx
+     * <Button isLoading>Saving...</Button>
+     * ```
+     *
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Text to display during loading state instead of children.
+     * Screen-reader accessible alternative for custom loading messaging.
+     *
+     * @example
+     * ```tsx
+     * <Button isLoading loadingText="Saving...">Save Changes</Button>
+     * ```
+     *
+     * @default undefined (uses children)
+     */
+    loadingText?: string;
+    /**
+     * Full width button - expands to fill container.
+     * Useful for form submissions and card footers.
+     *
+     * @example
+     * ```tsx
+     * <Card.Footer>
+     *   <Button fullWidth>Continue</Button>
+     * </Card.Footer>
+     * ```
+     *
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Icon to display on the left side of button text.
+     * Use 20px icons (size={20}) for best results.
+     *
+     * @example
+     * ```tsx
+     * import { Download } from 'lucide-react';
+     * <Button icon={<Download size={20} />}>Download</Button>
+     * ```
+     */
+    icon?: ReactNode;
+    /**
+     * Icon to display on the right side of button text.
+     * Commonly used for chevrons/arrows indicating action direction.
+     *
+     * @example
+     * ```tsx
+     * import { ChevronRight } from 'lucide-react';
+     * <Button iconRight={<ChevronRight size={20} />}>Continue</Button>
+     * ```
+     */
+    iconRight?: ReactNode;
+    /**
+     * Icon-only button (no text, just icon).
+     *
+     * @requires aria-label - MUST provide aria-label for accessibility
+     *
+     * @example
+     * ```tsx
+     * import { Settings } from 'lucide-react';
+     *
+     * // CORRECT - has aria-label
+     * <Button iconOnly icon={<Settings size={20} />} aria-label="Settings" />
+     *
+     * // WRONG - missing aria-label (accessibility violation)
+     * <Button iconOnly icon={<Settings size={20} />} />
+     * ```
+     *
+     * @default false
+     */
+    iconOnly?: boolean;
+    /**
+     * Button content (text and/or elements).
+     * Ignored when iconOnly is true.
+     */
+    children?: ReactNode;
+}
+//# sourceMappingURL=Button.types.d.ts.map

package/dist/components/Button/Button.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.types.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,MAAM,aAAa,GACrB,SAAS,GACT,WAAW,GACX,kBAAkB,GAClB,OAAO,GACP,cAAc,GACd,QAAQ,GACR,SAAS,CAAC;AAEd;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E;;;;;;;;;;;;;;;;;OAiBG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;;;;;;;;;;;;;;;OAiBG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB"}

package/dist/components/Button/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Button Component - Primary action element for triggering events.
+ *
+ * @example
+ * ```tsx
+ * import { Button } from '@orion-ds/react';
+ *
+ * <Button variant="primary">Click me</Button>
+ * <Button variant="secondary" icon={<Plus size={20} />}>Add Item</Button>
+ * <Button iconOnly icon={<Settings size={20} />} aria-label="Settings" />
+ * <Button variant="danger" size="sm">Delete</Button>
+ * ```
+ */
+export { Button } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './Button.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC"}