@orion-ds/react 4.9.2 → 4.9.3

package/dist/components/ErrorBoundary/ErrorBoundary.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { ErrorBoundaryProps, ErrorBoundaryState } from './ErrorBoundary.types';
+
+export declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    componentDidUpdate(prevProps: ErrorBoundaryProps): void;
+    reset: () => void;
+    render(): React.ReactNode;
+}
+//# sourceMappingURL=ErrorBoundary.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorBoundary/ErrorBoundary.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EACV,kBAAkB,EAClB,kBAAkB,EACnB,MAAM,uBAAuB,CAAC;AAG/B,qBAAa,aAAc,SAAQ,KAAK,CAAC,SAAS,CAChD,kBAAkB,EAClB,kBAAkB,CACnB;gBACa,KAAK,EAAE,kBAAkB;IAKrC,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,kBAAkB;IAIjE,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI;IAIjE,kBAAkB,CAAC,SAAS,EAAE,kBAAkB,GAAG,IAAI;IAUvD,KAAK,QAAO,IAAI,CAEd;IAEF,MAAM,IAAI,KAAK,CAAC,SAAS;CA8B1B"}

package/dist/components/ErrorBoundary/ErrorBoundary.mjs

@@ -0,0 +1,43 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import i from "react";
+import { AlertCircle as a } from "lucide-react";
+import e from "./ErrorBoundary.module.css.mjs";
+class m extends i.Component {
+  constructor(r) {
+    super(r), this.reset = () => {
+      this.setState({ hasError: !1, error: null });
+    }, this.state = { hasError: !1, error: null };
+  }
+  static getDerivedStateFromError(r) {
+    return { hasError: !0, error: r };
+  }
+  componentDidCatch(r, s) {
+    this.props.onError?.(r, s);
+  }
+  componentDidUpdate(r) {
+    this.state.hasError && this.props.resetKey !== void 0 && r.resetKey !== this.props.resetKey && this.reset();
+  }
+  render() {
+    if (this.state.hasError && this.state.error) {
+      const { fallback: r } = this.props;
+      return typeof r == "function" ? r(this.state.error, this.reset) : r || /* @__PURE__ */ o("div", { className: e.errorBoundary, role: "alert", children: [
+        /* @__PURE__ */ t(a, { size: 32, className: e.icon }),
+        /* @__PURE__ */ t("p", { className: e.title, children: "Something went wrong" }),
+        /* @__PURE__ */ t("p", { className: e.message, children: this.state.error.message }),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            className: e.resetButton,
+            onClick: this.reset,
+            type: "button",
+            children: "Try again"
+          }
+        )
+      ] });
+    }
+    return this.props.children;
+  }
+}
+export {
+  m as ErrorBoundary
+};

package/dist/components/ErrorBoundary/ErrorBoundary.module.css

@@ -0,0 +1 @@
+._errorBoundary_hux00_1{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-8);text-align:center;min-height:200px;border:1px solid var(--border-subtle);border-radius:var(--radius-container);background:var(--surface-subtle)}._icon_hux00_14{color:var(--status-error);margin-bottom:var(--spacing-4)}._title_hux00_19{font-family:var(--font-secondary);font-weight:600;font-size:1.125rem;color:var(--text-primary);margin:0 0 var(--spacing-2) 0}._message_hux00_27{font-family:var(--font-secondary);font-size:.875rem;color:var(--text-secondary);margin:0 0 var(--spacing-4) 0;max-width:400px}._resetButton_hux00_35{padding:var(--spacing-2) var(--spacing-4);border-radius:var(--radius-control);border:1px solid var(--border-default);background:var(--surface-base);color:var(--text-primary);font-family:var(--font-secondary);font-size:.875rem;cursor:pointer;transition:background var(--transition-fast)}._resetButton_hux00_35:hover{background:var(--surface-layer)}._resetButton_hux00_35:focus-visible{outline:2px solid var(--interactive-primary);outline-offset:2px}

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="_errorBoundary_hux00_1",t="_icon_hux00_14",o="_title_hux00_19",r="_message_hux00_27",s="_resetButton_hux00_35",n={errorBoundary:e,icon:t,title:o,message:r,resetButton:s};exports.default=n;exports.errorBoundary=e;exports.icon=t;exports.message=r;exports.resetButton=s;exports.title=o;

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

@@ -0,0 +1,15 @@
+const t = "_errorBoundary_hux00_1", e = "_icon_hux00_14", o = "_title_hux00_19", s = "_message_hux00_27", r = "_resetButton_hux00_35", n = {
+  errorBoundary: t,
+  icon: e,
+  title: o,
+  message: s,
+  resetButton: r
+};
+export {
+  n as default,
+  t as errorBoundary,
+  e as icon,
+  s as message,
+  r as resetButton,
+  o as title
+};

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

@@ -0,0 +1,17 @@
+import { ReactNode, ErrorInfo } from 'react';
+
+export interface ErrorBoundaryProps {
+    /** Content to render when no error has occurred */
+    children: ReactNode;
+    /** Custom fallback UI to display when an error is caught */
+    fallback?: ReactNode | ((error: Error, reset: () => void) => ReactNode);
+    /** Callback fired when an error is caught */
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+    /** Reset error state when this key changes */
+    resetKey?: string | number;
+}
+export interface ErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+}
+//# sourceMappingURL=ErrorBoundary.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.types.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorBoundary/ErrorBoundary.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,MAAM,WAAW,kBAAkB;IACjC,mDAAmD;IACnD,QAAQ,EAAE,SAAS,CAAC;IACpB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC,CAAC;IACxE,6CAA6C;IAC7C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACvD,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACrB"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorBoundary/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,uBAAuB,CAAC"}

package/dist/components/Field/Field.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),x=require("react"),b=require("lucide-react"),e=require("./Field.module.css.cjs"),v=x.forwardRef(({label:i,error:s,helperText:t,leftIcon:r,rightIcon:d,fullWidth:I=!1,size:c="md",optional:u=!1,className:g,id:$,disabled:f,required:o,"aria-label":h,"aria-describedby":p,...y},F)=>{const C=x.useId(),n=$||`field-${C}`,m=`${n}-error`,j=`${n}-helper`,N=s&&!d,l=[];s&&l.push(m),t&&!s&&l.push(j),p&&l.push(p);const R=l.length>0?l.join(" "):void 0;!(i||h)&&process.env.NODE_ENV==="development"&&console.warn("Field: Missing accessible name. Provide either a `label` prop or `aria-label` for screen reader users.");const q=[e.default.fieldContainer,I&&e.default.fullWidth,s&&e.default.error,f&&e.default.disabled,g].filter(Boolean).join(" "),A=[e.default.input,e.default[c],r&&e.default.hasLeftIcon,(d||N)&&e.default.hasRightIcon].filter(Boolean).join(" "),B=c==="sm"?14:c==="lg"?20:16;return a.jsxs("div",{className:q,children:[i&&a.jsxs("label",{htmlFor:n,className:e.default.label,children:[a.jsx("span",{className:e.default.labelText,children:i}),u&&a.jsx("span",{className:e.default.optional,"aria-hidden":"true",children:"(optional)"}),o&&!u&&a.jsx("span",{className:e.default.required,"aria-hidden":"true",children:"*"})]}),a.jsxs("div",{className:e.default.inputWrapper,children:[r&&a.jsx("span",{className:e.default.leftIcon,"aria-hidden":"true",children:r}),a.jsx("input",{ref:F,id:n,className:A,disabled:f,required:o,"aria-required":o||void 0,"aria-invalid":s?"true":"false","aria-describedby":R,"aria-label":i?void 0:h,...y}),d&&a.jsx("span",{className:`${e.default.rightIcon} ${e.default.rightIconInteractive}`,children:d}),N&&a.jsx("span",{className:`${e.default.rightIcon} ${e.default.errorIconInline}`,"aria-hidden":"true",children:a.jsx(b.AlertCircle,{size:B})})]}),t&&!s&&a.jsx("p",{id:j,className:e.default.helperText,children:t}),s&&a.jsxs("p",{id:m,className:e.default.errorMessage,role:"alert","aria-live":"assertive",children:[a.jsx(b.AlertCircle,{size:14,"aria-hidden":"true",className:e.default.errorIconMessage}),a.jsx("span",{children:s})]})]})});v.displayName="Field";exports.Field=v;

package/dist/components/Field/Field.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../src/components/Field/Field.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhD,eAAO,MAAM,KAAK,yGAgKjB,CAAC"}

package/dist/components/Field/Field.mjs

@@ -0,0 +1,107 @@
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import { forwardRef as E, useId as M } from "react";
+import { AlertCircle as b } from "lucide-react";
+import e from "./Field.module.css.mjs";
+const R = E(
+  ({
+    label: n,
+    error: a,
+    helperText: d,
+    leftIcon: o,
+    rightIcon: r,
+    fullWidth: g = !1,
+    size: t = "md",
+    optional: h = !1,
+    className: $,
+    id: j,
+    disabled: m,
+    required: p,
+    "aria-label": f,
+    "aria-describedby": u,
+    ...y
+  }, B) => {
+    const C = M(), l = j || `field-${C}`, N = `${l}-error`, v = `${l}-helper`, I = a && !r, i = [];
+    a && i.push(N), d && !a && i.push(v), u && i.push(u);
+    const F = i.length > 0 ? i.join(" ") : void 0;
+    !(n || f) && process.env.NODE_ENV === "development" && console.warn(
+      "Field: Missing accessible name. Provide either a `label` prop or `aria-label` for screen reader users."
+    );
+    const w = [
+      e.fieldContainer,
+      g && e.fullWidth,
+      a && e.error,
+      m && e.disabled,
+      $
+    ].filter(Boolean).join(" "), x = [
+      e.input,
+      e[t],
+      o && e.hasLeftIcon,
+      (r || I) && e.hasRightIcon
+    ].filter(Boolean).join(" "), A = t === "sm" ? 14 : t === "lg" ? 20 : 16;
+    return /* @__PURE__ */ c("div", { className: w, children: [
+      n && /* @__PURE__ */ c("label", { htmlFor: l, className: e.label, children: [
+        /* @__PURE__ */ s("span", { className: e.labelText, children: n }),
+        h && /* @__PURE__ */ s("span", { className: e.optional, "aria-hidden": "true", children: "(optional)" }),
+        p && !h && /* @__PURE__ */ s("span", { className: e.required, "aria-hidden": "true", children: "*" })
+      ] }),
+      /* @__PURE__ */ c("div", { className: e.inputWrapper, children: [
+        o && /* @__PURE__ */ s("span", { className: e.leftIcon, "aria-hidden": "true", children: o }),
+        /* @__PURE__ */ s(
+          "input",
+          {
+            ref: B,
+            id: l,
+            className: x,
+            disabled: m,
+            required: p,
+            "aria-required": p || void 0,
+            "aria-invalid": a ? "true" : "false",
+            "aria-describedby": F,
+            "aria-label": n ? void 0 : f,
+            ...y
+          }
+        ),
+        r && /* @__PURE__ */ s(
+          "span",
+          {
+            className: `${e.rightIcon} ${e.rightIconInteractive}`,
+            children: r
+          }
+        ),
+        I && /* @__PURE__ */ s(
+          "span",
+          {
+            className: `${e.rightIcon} ${e.errorIconInline}`,
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ s(b, { size: A })
+          }
+        )
+      ] }),
+      d && !a && /* @__PURE__ */ s("p", { id: v, className: e.helperText, children: d }),
+      a && /* @__PURE__ */ c(
+        "p",
+        {
+          id: N,
+          className: e.errorMessage,
+          role: "alert",
+          "aria-live": "assertive",
+          children: [
+            /* @__PURE__ */ s(
+              b,
+              {
+                size: 14,
+                "aria-hidden": "true",
+                className: e.errorIconMessage
+              }
+            ),
+            /* @__PURE__ */ s("span", { children: a })
+          ]
+        }
+      )
+    ] });
+  }
+);
+R.displayName = "Field";
+export {
+  R as Field
+};

package/dist/components/Field/Field.module.css

@@ -0,0 +1 @@
+._fieldContainer_71nij_9{display:flex;flex-direction:column;gap:var(--spacing-2)}._fullWidth_71nij_15{width:100%}._disabled_71nij_19{opacity:.6}._label_71nij_24{display:flex;align-items:center;gap:var(--spacing-1);font-family:var(--font-secondary);font-size:var(--font-size-13);font-weight:var(--font-weight-medium);color:var(--text-primary);line-height:var(--line-height-tight);cursor:pointer}._disabled_71nij_19 ._label_71nij_24{cursor:not-allowed}._optional_71nij_44{font-size:var(--font-size-11);font-weight:var(--font-weight-normal);color:var(--text-tertiary)}._required_71nij_50{color:var(--status-error);font-weight:var(--font-weight-medium);margin-left:2px}._inputWrapper_71nij_57{position:relative;display:flex;align-items:center}._input_71nij_57{width:100%;display:block;font-family:var(--font-secondary);font-size:var(--font-size-16);line-height:var(--line-height-normal);color:var(--text-primary);background:var(--surface-base);border:1px solid var(--border-subtle);border-radius:var(--radius-control);transition:all var(--transition-fast);outline:none}._input_71nij_57::placeholder{color:var(--text-tertiary)}._input_71nij_57:hover:not(:disabled):not(:read-only){border-color:var(--border-strong)}._input_71nij_57:focus{border-color:var(--interactive-primary);box-shadow:0 0 0 3px var(--soft-brand)}._input_71nij_57:focus-visible{border-color:var(--interactive-primary);box-shadow:0 0 0 3px var(--soft-brand)}._input_71nij_57:disabled{opacity:.5;cursor:not-allowed;background:var(--surface-subtle)}._input_71nij_57:read-only{background:var(--surface-subtle);border-color:var(--border-subtle);cursor:default}._input_71nij_57:-webkit-autofill,._input_71nij_57:-webkit-autofill:hover,._input_71nij_57:-webkit-autofill:focus{-webkit-text-fill-color:var(--text-primary);box-shadow:0 0 0 1000px var(--surface-subtle) inset;transition:background-color 5000s ease-in-out 0s}._error_71nij_131 ._input_71nij_57{border-color:var(--status-error)}._error_71nij_131 ._input_71nij_57:focus{border-color:var(--status-error);box-shadow:0 0 0 3px var(--soft-error)}._error_71nij_131 ._input_71nij_57:focus-visible{border-color:var(--status-error);box-shadow:0 0 0 3px var(--soft-error)}._leftIcon_71nij_146,._rightIcon_71nij_147{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);pointer-events:none}._leftIcon_71nij_146{left:var(--spacing-3)}._rightIcon_71nij_147{right:var(--spacing-3)}._rightIconInteractive_71nij_167{pointer-events:auto}._rightIconInteractive_71nij_167 button,._rightIconInteractive_71nij_167 [role=button]{display:flex;align-items:center;justify-content:center;padding:var(--spacing-1);background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer;color:var(--text-tertiary);transition:color var(--transition-fast)}._rightIconInteractive_71nij_167 button:hover,._rightIconInteractive_71nij_167 [role=button]:hover{color:var(--text-primary)}._rightIconInteractive_71nij_167 button:focus-visible,._rightIconInteractive_71nij_167 [role=button]:focus-visible{outline:2px solid var(--interactive-primary);outline-offset:2px}._errorIconInline_71nij_198{color:var(--status-error);pointer-events:none}._errorIconMessage_71nij_204{flex-shrink:0}._sm_71nij_209{height:32px;padding-top:0;padding-bottom:0;padding-left:var(--spacing-3);padding-right:var(--spacing-3);font-size:var(--font-size-12)}._md_71nij_218{height:40px;padding-top:0;padding-bottom:0;padding-left:var(--spacing-4);padding-right:var(--spacing-4);font-size:var(--font-size-16)}._lg_71nij_227{height:48px;padding-top:0;padding-bottom:0;padding-left:var(--spacing-4);padding-right:var(--spacing-4);font-size:var(--font-size-18)}._input_71nij_57._hasLeftIcon_71nij_237{padding-left:var(--spacing-10)}._input_71nij_57._hasRightIcon_71nij_241{padding-right:var(--spacing-10)}._helperText_71nij_246{margin:0;font-family:var(--font-secondary);font-size:var(--font-size-12);color:var(--text-secondary);line-height:var(--line-height-snug)}._errorMessage_71nij_255{display:flex;align-items:flex-start;gap:var(--spacing-1);margin:0;font-family:var(--font-secondary);font-size:var(--font-size-12);color:var(--status-error);line-height:var(--line-height-snug)}@media(forced-colors:active){._input_71nij_57{border:2px solid CanvasText;background:Canvas;color:CanvasText}._input_71nij_57:focus,._input_71nij_57:focus-visible{outline:3px solid Highlight;outline-offset:2px}._input_71nij_57:disabled{border-color:GrayText;color:GrayText}._error_71nij_131 ._input_71nij_57{border-color:LinkText}._errorMessage_71nij_255,._errorIconInline_71nij_198,._errorIconMessage_71nij_204,._required_71nij_50{color:LinkText}._leftIcon_71nij_146,._rightIcon_71nij_147{color:CanvasText}}[data-dark-bg=true] ._label_71nij_24{color:var(--color-neutral-0)}[data-dark-bg=true] ._optional_71nij_44{color:var(--color-neutral-200)}[data-dark-bg=true] ._required_71nij_50{color:var(--status-error)}[data-dark-bg=true] ._input_71nij_57{background:color-mix(in srgb,var(--color-neutral-0) 15%,transparent);border-color:color-mix(in srgb,var(--color-neutral-0) 40%,transparent);color:var(--color-neutral-0)}[data-dark-bg=true] ._input_71nij_57::placeholder{color:var(--color-neutral-300)}[data-dark-bg=true] ._input_71nij_57:hover:not(:disabled):not(:read-only){border-color:color-mix(in srgb,var(--color-neutral-0) 60%,transparent)}[data-dark-bg=true] ._input_71nij_57:focus{border-color:var(--interactive-primary);box-shadow:0 0 0 3px var(--soft-brand)}[data-dark-bg=true] ._input_71nij_57:focus-visible{border-color:var(--interactive-primary);box-shadow:0 0 0 3px var(--soft-brand);outline:2px solid var(--interactive-primary);outline-offset:2px}[data-dark-bg=true] ._input_71nij_57:disabled{background:color-mix(in srgb,var(--color-neutral-0) 10%,transparent);border-color:color-mix(in srgb,var(--color-neutral-0) 20%,transparent)}[data-dark-bg=true] ._input_71nij_57:read-only{background:color-mix(in srgb,var(--color-neutral-0) 10%,transparent);border-color:color-mix(in srgb,var(--color-neutral-0) 20%,transparent)}[data-dark-bg=true] ._input_71nij_57:-webkit-autofill,[data-dark-bg=true] ._input_71nij_57:-webkit-autofill:hover,[data-dark-bg=true] ._input_71nij_57:-webkit-autofill:focus{-webkit-text-fill-color:var(--color-neutral-0);box-shadow:0 0 0 1000px color-mix(in srgb,var(--color-neutral-0) 15%,transparent) inset}[data-dark-bg=true] ._error_71nij_131 ._input_71nij_57{border-color:var(--status-error)}[data-dark-bg=true] ._error_71nij_131 ._input_71nij_57:focus{border-color:var(--status-error);box-shadow:0 0 0 3px var(--soft-error)}[data-dark-bg=true] ._error_71nij_131 ._input_71nij_57:focus-visible{border-color:var(--status-error);box-shadow:0 0 0 3px var(--soft-error)}[data-dark-bg=true] ._leftIcon_71nij_146,[data-dark-bg=true] ._rightIcon_71nij_147,[data-dark-bg=true] ._rightIconInteractive_71nij_167 button,[data-dark-bg=true] ._rightIconInteractive_71nij_167 [role=button]{color:var(--color-neutral-300)}[data-dark-bg=true] ._rightIconInteractive_71nij_167 button:hover,[data-dark-bg=true] ._rightIconInteractive_71nij_167 [role=button]:hover{color:var(--color-neutral-0)}[data-dark-bg=true] ._helperText_71nij_246{color:var(--color-neutral-300)}[data-dark-bg=true] ._errorMessage_71nij_255,[data-dark-bg=true] ._errorIconInline_71nij_198{color:var(--status-error)}@media(prefers-reduced-motion:reduce){._input_71nij_57,._rightIconInteractive_71nij_167 button,._rightIconInteractive_71nij_167 [role=button]{transition:none}}

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="_fieldContainer_71nij_9",n="_fullWidth_71nij_15",r="_disabled_71nij_19",t="_label_71nij_24",o="_labelText_71nij_40",i="_optional_71nij_44",_="_required_71nij_50",s="_inputWrapper_71nij_57",l="_input_71nij_57",c="_error_71nij_131",a="_leftIcon_71nij_146",I="_rightIcon_71nij_147",d="_rightIconInteractive_71nij_167",h="_errorIconInline_71nij_198",g="_errorIconMessage_71nij_204",p="_sm_71nij_209",j="_md_71nij_218",u="_lg_71nij_227",f="_hasLeftIcon_71nij_237",b="_hasRightIcon_71nij_241",M="_helperText_71nij_246",m="_errorMessage_71nij_255",T={fieldContainer:e,fullWidth:n,disabled:r,label:t,labelText:o,optional:i,required:_,inputWrapper:s,input:l,error:c,leftIcon:a,rightIcon:I,rightIconInteractive:d,errorIconInline:h,errorIconMessage:g,sm:p,md:j,lg:u,hasLeftIcon:f,hasRightIcon:b,helperText:M,errorMessage:m};exports.default=T;exports.disabled=r;exports.error=c;exports.errorIconInline=h;exports.errorIconMessage=g;exports.errorMessage=m;exports.fieldContainer=e;exports.fullWidth=n;exports.hasLeftIcon=f;exports.hasRightIcon=b;exports.helperText=M;exports.input=l;exports.inputWrapper=s;exports.label=t;exports.labelText=o;exports.leftIcon=a;exports.lg=u;exports.md=j;exports.optional=i;exports.required=_;exports.rightIcon=I;exports.rightIconInteractive=d;exports.sm=p;

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

@@ -0,0 +1,49 @@
+const n = "_fieldContainer_71nij_9", e = "_fullWidth_71nij_15", t = "_disabled_71nij_19", o = "_label_71nij_24", _ = "_labelText_71nij_40", r = "_optional_71nij_44", i = "_required_71nij_50", s = "_inputWrapper_71nij_57", c = "_input_71nij_57", l = "_error_71nij_131", a = "_leftIcon_71nij_146", I = "_rightIcon_71nij_147", j = "_rightIconInteractive_71nij_167", h = "_errorIconInline_71nij_198", d = "_errorIconMessage_71nij_204", p = "_sm_71nij_209", g = "_md_71nij_218", f = "_lg_71nij_227", u = "_hasLeftIcon_71nij_237", b = "_hasRightIcon_71nij_241", x = "_helperText_71nij_246", m = "_errorMessage_71nij_255", M = {
+  fieldContainer: n,
+  fullWidth: e,
+  disabled: t,
+  label: o,
+  labelText: _,
+  optional: r,
+  required: i,
+  inputWrapper: s,
+  input: c,
+  error: l,
+  leftIcon: a,
+  rightIcon: I,
+  rightIconInteractive: j,
+  errorIconInline: h,
+  errorIconMessage: d,
+  sm: p,
+  md: g,
+  lg: f,
+  hasLeftIcon: u,
+  hasRightIcon: b,
+  helperText: x,
+  errorMessage: m
+};
+export {
+  M as default,
+  t as disabled,
+  l as error,
+  h as errorIconInline,
+  d as errorIconMessage,
+  m as errorMessage,
+  n as fieldContainer,
+  e as fullWidth,
+  u as hasLeftIcon,
+  b as hasRightIcon,
+  x as helperText,
+  c as input,
+  s as inputWrapper,
+  o as label,
+  _ as labelText,
+  a as leftIcon,
+  f as lg,
+  g as md,
+  r as optional,
+  i as required,
+  I as rightIcon,
+  j as rightIconInteractive,
+  p as sm
+};

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

@@ -0,0 +1,190 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+
+/**
+ * Field component props
+ *
+ * @important Field is PROPS-BASED, not a wrapper. It renders its own `<input>`.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Field
+ *   label="Email"
+ *   type="email"
+ *   placeholder="you@example.com"
+ * />
+ * ```
+ *
+ * @example With validation error
+ * ```tsx
+ * <Field
+ *   label="Email"
+ *   type="email"
+ *   value={email}
+ *   onChange={(e) => setEmail(e.target.value)}
+ *   error={emailError}
+ * />
+ * ```
+ *
+ * @example With icons
+ * ```tsx
+ * import { Mail, Eye } from 'lucide-react';
+ *
+ * <Field
+ *   label="Email"
+ *   type="email"
+ *   leftIcon={<Mail size={18} />}
+ *   placeholder="you@example.com"
+ * />
+ * ```
+ *
+ * @example WRONG - Don't use children
+ * ```tsx
+ * // WRONG - Field doesn't accept children for input
+ * <Field label="Email">
+ *   <input type="email" />  // This won't work!
+ * </Field>
+ *
+ * // CORRECT - Use props
+ * <Field label="Email" type="email" />
+ * ```
+ */
+export interface FieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /**
+     * Input label text displayed above the input.
+     * Required for accessibility unless aria-label is provided.
+     *
+     * @example
+     * ```tsx
+     * <Field label="Email Address" type="email" />
+     * ```
+     */
+    label?: string;
+    /**
+     * Error message - shows error state and displays message below input.
+     * Takes precedence over helperText when both are provided.
+     * Automatically associated with input via aria-describedby.
+     *
+     * @example
+     * ```tsx
+     * <Field
+     *   label="Email"
+     *   type="email"
+     *   error="Please enter a valid email address"
+     * />
+     * ```
+     */
+    error?: string;
+    /**
+     * Helper text displayed below input (when no error).
+     * Provides additional context or instructions.
+     *
+     * @example
+     * ```tsx
+     * <Field
+     *   label="Password"
+     *   type="password"
+     *   helperText="Must be at least 8 characters"
+     * />
+     * ```
+     */
+    helperText?: string;
+    /**
+     * Icon to display on the left side of input.
+     * Use 18px icons (size={18}) for best results.
+     *
+     * @example
+     * ```tsx
+     * import { Mail } from 'lucide-react';
+     * <Field leftIcon={<Mail size={18} />} label="Email" type="email" />
+     * ```
+     */
+    leftIcon?: ReactNode;
+    /**
+     * Icon to display on the right side of input.
+     * Can be an icon or interactive element (e.g., password toggle).
+     *
+     * @example
+     * ```tsx
+     * import { Eye, EyeOff } from 'lucide-react';
+     *
+     * <Field
+     *   label="Password"
+     *   type={showPassword ? 'text' : 'password'}
+     *   rightIcon={
+     *     <button onClick={() => setShowPassword(!showPassword)}>
+     *       {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+     *     </button>
+     *   }
+     * />
+     * ```
+     */
+    rightIcon?: ReactNode;
+    /**
+     * Full width input - expands to fill container.
+     *
+     * @example
+     * ```tsx
+     * <form style={{ maxWidth: '400px' }}>
+     *   <Field label="Name" fullWidth />
+     *   <Field label="Email" type="email" fullWidth />
+     * </form>
+     * ```
+     *
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Input size variant.
+     *
+     * @semanticGuide
+     * - `sm`: Dense UIs, tables, compact forms
+     * - `md`: Default - most forms (recommended)
+     * - `lg`: Prominent forms, search inputs
+     *
+     * @default 'md'
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Shows "(optional)" indicator next to label.
+     * Use when most fields are required but some are optional.
+     *
+     * @example
+     * ```tsx
+     * <Field label="Phone Number" type="tel" optional />
+     * ```
+     *
+     * @default false
+     */
+    optional?: boolean;
+    /**
+     * Accessible label for screen readers when no visible label is provided.
+     * REQUIRED if `label` prop is not provided.
+     *
+     * @example
+     * ```tsx
+     * // Icon-only search input
+     * <Field
+     *   aria-label="Search"
+     *   leftIcon={<Search size={18} />}
+     *   placeholder="Search..."
+     * />
+     * ```
+     */
+    "aria-label"?: string;
+    /**
+     * Additional element IDs that describe this input.
+     * Automatically includes error and helper text IDs when provided.
+     *
+     * @example
+     * ```tsx
+     * <p id="password-requirements">Must be 8+ characters</p>
+     * <Field
+     *   label="Password"
+     *   type="password"
+     *   aria-describedby="password-requirements"
+     * />
+     * ```
+     */
+    "aria-describedby"?: string;
+}
+//# sourceMappingURL=Field.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Field.types.d.ts","sourceRoot":"","sources":["../../../src/components/Field/Field.types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,CACP;IACC;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;;;;;;OAaG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;;;;;OAYG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;;;;;;;;;;OAkBG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAE1B;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAMnB;;;;;;;;;;;;;OAaG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;;;;;;;;;OAaG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B"}

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

@@ -0,0 +1,16 @@
+/**
+ * Field Component - Text input with label, validation, and icons.
+ *
+ * @example
+ * ```tsx
+ * import { Field } from '@orion-ds/react';
+ * import { Mail, Eye } from 'lucide-react';
+ *
+ * <Field label="Email" type="email" placeholder="you@example.com" />
+ * <Field label="Password" type="password" error="Required" />
+ * <Field label="Search" icon={<Search size={18} />} />
+ * ```
+ */
+export { Field } from './Field';
+export type { FieldProps } from './Field.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Field/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/FileUploader/FileUploader.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),n=require("react"),o=require("lucide-react"),s=require("./FileUploader.module.css.cjs"),G=t=>t.startsWith("image/")?o.FileImage:t.startsWith("video/")?o.FileVideo:t.startsWith("audio/")?o.FileAudio:t.includes("pdf")||t.includes("document")?o.FileText:o.File,z=t=>{if(t===0)return"0 B";const i=1024,c=["B","KB","MB","GB"],h=Math.floor(Math.log(t)/Math.log(i));return`${parseFloat((t/Math.pow(i,h)).toFixed(1))} ${c[h]}`},$=n.forwardRef(({accept:t,maxFiles:i,maxSize:c,multiple:h=!0,onFilesAdded:C,onFileRemove:D,files:p=[],disabled:l=!1,dropzoneContent:M,placeholder:B="Drag and drop files here, or click to browse",showFileList:E=!0,compact:v=!1,variant:R="default",error:g,helperText:k,className:S,...W},y)=>{const x=n.useRef(null),[A,N]=n.useState(!1),[m,w]=n.useState(null),F=n.useCallback(e=>{const u=[],r=[],I=Array.from(e);return i&&p.length+I.length>i?(r.push(`Maximum ${i} files allowed`),{valid:u,errors:r}):(I.forEach(d=>{if(c&&d.size>c){r.push(`${d.name} exceeds maximum size of ${z(c)}`);return}if(t&&t.length>0&&!t.some(f=>f.startsWith(".")?d.name.toLowerCase().endsWith(f.toLowerCase()):f.endsWith("/*")?d.type.startsWith(f.replace("/*","/")):d.type===f)){r.push(`${d.name} is not an accepted file type`);return}u.push(d)}),{valid:u,errors:r})},[t,i,c,p.length]),j=n.useCallback(e=>{if(l)return;const{valid:u,errors:r}=F(e);r.length>0&&r[0]&&(w(r[0]),setTimeout(()=>w(null),3e3)),u.length>0&&C?.(u)},[l,F,C]),L=n.useCallback(e=>{e.preventDefault(),l||N(!0)},[l]),U=n.useCallback(e=>{e.preventDefault(),N(!1)},[]),b=n.useCallback(e=>{e.preventDefault(),N(!1),j(e.dataTransfer.files)},[j]),T=n.useCallback(e=>{e.target.files&&j(e.target.files),e.target.value=""},[j]),q=()=>{l||x.current?.click()},H=e=>{(e.key==="Enter"||e.key===" ")&&!l&&(e.preventDefault(),x.current?.click())},P=t?.join(","),K=[s.default.fileUploader,s.default[R],v&&s.default.compact,S].filter(Boolean).join(" "),O=[s.default.dropzone,A&&s.default.dropzoneDragging,l&&s.default.dropzoneDisabled,(g||m)&&s.default.dropzoneError].filter(Boolean).join(" ");return a.jsxs("div",{ref:y,className:K,...W,children:[a.jsxs("div",{className:O,onDragOver:L,onDragLeave:U,onDrop:b,onClick:q,onKeyDown:H,role:"button",tabIndex:l?-1:0,"aria-disabled":l,children:[a.jsx("input",{ref:x,type:"file",className:s.default.input,accept:P,multiple:h,onChange:T,disabled:l,"aria-hidden":"true"}),M||a.jsxs("div",{className:s.default.dropzoneContent,children:[a.jsx("div",{className:s.default.dropzoneIcon,children:a.jsx(o.Upload,{size:v?20:24})}),a.jsx("p",{className:s.default.dropzonePlaceholder,children:B}),!v&&a.jsxs("div",{className:s.default.dropzoneHints,children:[t&&a.jsxs("span",{className:s.default.dropzoneHint,children:["Accepted: ",t.join(", ")]}),c&&a.jsxs("span",{className:s.default.dropzoneHint,children:["Max size: ",z(c)]}),i&&a.jsxs("span",{className:s.default.dropzoneHint,children:["Max files: ",i]})]})]})]}),(g||m||k)&&a.jsx("div",{className:`${s.default.helperText} ${g||m?s.default.helperTextError:""}`,children:g||m||k}),E&&p.length>0&&a.jsx("ul",{className:s.default.fileList,children:p.map(e=>{const u=G(e.type);return a.jsxs("li",{className:s.default.fileItem,children:[a.jsx("div",{className:s.default.fileIcon,children:e.preview?a.jsx("img",{src:e.preview,alt:"",className:s.default.filePreview}):a.jsx(u,{size:20})}),a.jsxs("div",{className:s.default.fileInfo,children:[a.jsx("span",{className:s.default.fileName,children:e.name}),a.jsx("span",{className:s.default.fileSize,children:z(e.size)})]}),a.jsxs("div",{className:s.default.fileStatus,children:[e.status==="uploading"&&a.jsxs(a.Fragment,{children:[a.jsx("div",{className:s.default.progressBar,children:a.jsx("div",{className:s.default.progressFill,style:{width:`${e.progress||0}%`}})}),a.jsx(o.Loader2,{size:16,className:s.default.fileStatusIcon})]}),e.status==="completed"&&a.jsx(o.CheckCircle,{size:16,className:s.default.fileStatusSuccess}),e.status==="error"&&a.jsx(o.AlertCircle,{size:16,className:s.default.fileStatusError})]}),D&&a.jsx("button",{type:"button",className:s.default.fileRemove,onClick:r=>{r.stopPropagation(),D(e.id)},"aria-label":`Remove ${e.name}`,children:a.jsx(o.X,{size:16})})]},e.id)})})]})});$.displayName="FileUploader";exports.FileUploader=$;

package/dist/components/FileUploader/FileUploader.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploader.d.ts","sourceRoot":"","sources":["../../../src/components/FileUploader/FileUploader.tsx"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAqB9D,eAAO,MAAM,YAAY,8GAoSxB,CAAC"}