@orion-ds/react 4.9.2 → 4.9.3

package/dist/components/InputOTP/InputOTP.mjs

@@ -0,0 +1,143 @@
+import { jsx as c, jsxs as Z } from "react/jsx-runtime";
+import { forwardRef as O, useState as D, useRef as $, useEffect as _, useCallback as f, createContext as q, useContext as H } from "react";
+import e from "./InputOTP.module.css.mjs";
+const g = q(null);
+function J() {
+  const t = H(g);
+  if (!t)
+    throw new Error(
+      "InputOTP.Slot/Group/Separator must be used within an InputOTP"
+    );
+  return t;
+}
+const w = O(
+  ({ className: t, children: o, ...r }, s) => {
+    const a = [e.group, t].filter(Boolean).join(" ");
+    return /* @__PURE__ */ c("div", { ref: s, className: a, ...r, children: o });
+  }
+);
+w.displayName = "InputOTP.Group";
+const B = O(
+  ({ index: t, className: o, ...r }, s) => {
+    const {
+      value: a,
+      activeIndex: i,
+      size: N,
+      disabled: l,
+      isFocused: m,
+      focusInput: T
+    } = J(), p = a[t], I = m && t === i, v = p !== void 0 && p !== "", h = [
+      e.slot,
+      I && e.slotActive,
+      v && e.slotFilled,
+      l && e.slotDisabled,
+      o
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ c("div", { ref: s, className: h, onClick: T, ...r, children: v ? p : I ? /* @__PURE__ */ c("span", { className: e.caret }) : null });
+  }
+);
+B.displayName = "InputOTP.Slot";
+const b = O(
+  ({ className: t, children: o, ...r }, s) => {
+    const a = [e.separator, t].filter(Boolean).join(" ");
+    return /* @__PURE__ */ c("div", { ref: s, className: a, role: "separator", ...r, children: o ?? /* @__PURE__ */ c("span", { "aria-hidden": "true", children: "–" }) });
+  }
+);
+b.displayName = "InputOTP.Separator";
+const k = O(
+  ({
+    maxLength: t,
+    value: o,
+    defaultValue: r = "",
+    onChange: s,
+    onComplete: a,
+    type: i = "numeric",
+    size: N = "md",
+    disabled: l = !1,
+    autoFocus: m = !1,
+    className: T,
+    children: p,
+    ...I
+  }, v) => {
+    const [h, F] = D(r), [A, C] = D(!1), x = $(null), S = o !== void 0, d = S ? o : h, G = Math.min(d.length, t - 1), R = i === "numeric" ? "[0-9]" : "[a-zA-Z0-9]", j = i === "numeric" ? /[^0-9]/g : /[^a-zA-Z0-9]/g;
+    _(() => {
+      m && x.current?.focus();
+    }, [m]);
+    const P = f(
+      (n) => {
+        const u = n.replace(j, "").slice(0, t);
+        S || F(u), s?.(u), u.length === t && a?.(u);
+      },
+      [t, j, S, s, a]
+    ), V = f(
+      (n) => {
+        P(n.target.value);
+      },
+      [P]
+    ), z = f(
+      (n) => {
+        n.key === "Backspace" && d.length === 0 && n.preventDefault();
+      },
+      [d]
+    ), E = f(
+      (n) => {
+        n.preventDefault();
+        const u = n.clipboardData.getData("text/plain");
+        P(u);
+      },
+      [P]
+    ), y = f(() => {
+      l || x.current?.focus();
+    }, [l]), K = [e.root, e[N], T].filter(Boolean).join(" "), M = {
+      value: d,
+      activeIndex: G,
+      size: N,
+      disabled: l,
+      isFocused: A,
+      focusInput: y
+    };
+    return /* @__PURE__ */ c(g.Provider, { value: M, children: /* @__PURE__ */ Z(
+      "div",
+      {
+        ref: v,
+        className: K,
+        onClick: y,
+        "data-otp-container": !0,
+        ...I,
+        children: [
+          /* @__PURE__ */ c(
+            "input",
+            {
+              ref: x,
+              className: e.hiddenInput,
+              type: "text",
+              inputMode: i === "numeric" ? "numeric" : "text",
+              pattern: `${R}*`,
+              maxLength: t,
+              value: d,
+              disabled: l,
+              autoComplete: "one-time-code",
+              "aria-label": `OTP input, ${t} digits`,
+              onChange: V,
+              onKeyDown: z,
+              onPaste: E,
+              onFocus: () => C(!0),
+              onBlur: () => C(!1),
+              tabIndex: 0
+            }
+          ),
+          p
+        ]
+      }
+    ) });
+  }
+);
+k.displayName = "InputOTP";
+const X = Object.assign(k, {
+  Group: w,
+  Slot: B,
+  Separator: b
+});
+export {
+  X as InputOTP
+};

package/dist/components/InputOTP/InputOTP.module.css

@@ -0,0 +1 @@
+._root_10v6s_3{display:inline-flex;align-items:center;gap:var(--spacing-2);position:relative}._hiddenInput_10v6s_11{position:absolute;inset:0;opacity:0;pointer-events:none}._group_10v6s_19{display:inline-flex;align-items:center;gap:var(--spacing-1)}._slot_10v6s_26{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border-subtle);border-radius:var(--radius-control);font-family:var(--font-mono);font-weight:var(--font-weight-medium);color:var(--text-primary);background:var(--surface-base);transition:all var(--transition-fast);cursor:text;-webkit-user-select:none;user-select:none;position:relative}._slot_10v6s_26:hover:not(._slotDisabled_10v6s_42){border-color:var(--border-strong)}._slotActive_10v6s_47{border-color:var(--interactive-primary);box-shadow:0 0 0 3px var(--soft-brand)}._slotFilled_10v6s_53{color:var(--text-primary)}._slotDisabled_10v6s_42{opacity:.5;cursor:not-allowed;background:var(--surface-subtle)}._caret_10v6s_65{width:1px;height:50%;background:var(--text-primary);animation:_blink_10v6s_1 1s step-end infinite}._sm_10v6s_77 ._slot_10v6s_26,._sm_10v6s_77._slot_10v6s_26{width:36px;height:36px;font-size:var(--font-size-14)}._md_10v6s_84 ._slot_10v6s_26,._md_10v6s_84._slot_10v6s_26{width:44px;height:44px;font-size:var(--font-size-18)}._lg_10v6s_91 ._slot_10v6s_26,._lg_10v6s_91._slot_10v6s_26{width:52px;height:52px;font-size:var(--font-size-24)}._separator_10v6s_99{display:inline-flex;align-items:center;justify-content:center;color:var(--text-tertiary);font-size:var(--font-size-18)}@keyframes _blink_10v6s_1{0%,to{opacity:1}50%{opacity:0}}@media(prefers-reduced-motion:reduce){._slot_10v6s_26{transition:none}._caret_10v6s_65{animation:none;opacity:1}}@media(forced-colors:active){._slot_10v6s_26{border:1px solid ButtonText}._slotActive_10v6s_47{border-color:Highlight;outline:1px solid Highlight;box-shadow:none}._caret_10v6s_65{background:ButtonText}}

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s="_root_10v6s_3",t="_hiddenInput_10v6s_11",o="_group_10v6s_19",l="_slot_10v6s_26",_="_slotDisabled_10v6s_42",e="_slotActive_10v6s_47",n="_slotFilled_10v6s_53",r="_caret_10v6s_65",c="_blink_10v6s_1",d="_sm_10v6s_77",i="_md_10v6s_84",a="_lg_10v6s_91",v="_separator_10v6s_99",u={root:s,hiddenInput:t,group:o,slot:l,slotDisabled:_,slotActive:e,slotFilled:n,caret:r,blink:c,sm:d,md:i,lg:a,separator:v};exports.blink=c;exports.caret=r;exports.default=u;exports.group=o;exports.hiddenInput=t;exports.lg=a;exports.md=i;exports.root=s;exports.separator=v;exports.slot=l;exports.slotActive=e;exports.slotDisabled=_;exports.slotFilled=n;exports.sm=d;

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

@@ -0,0 +1,31 @@
+const s = "_root_10v6s_3", t = "_hiddenInput_10v6s_11", o = "_group_10v6s_19", _ = "_slot_10v6s_26", l = "_slotDisabled_10v6s_42", n = "_slotActive_10v6s_47", e = "_slotFilled_10v6s_53", c = "_caret_10v6s_65", d = "_blink_10v6s_1", r = "_sm_10v6s_77", v = "_md_10v6s_84", i = "_lg_10v6s_91", a = "_separator_10v6s_99", p = {
+  root: s,
+  hiddenInput: t,
+  group: o,
+  slot: _,
+  slotDisabled: l,
+  slotActive: n,
+  slotFilled: e,
+  caret: c,
+  blink: d,
+  sm: r,
+  md: v,
+  lg: i,
+  separator: a
+};
+export {
+  d as blink,
+  c as caret,
+  p as default,
+  o as group,
+  t as hiddenInput,
+  i as lg,
+  v as md,
+  s as root,
+  a as separator,
+  _ as slot,
+  n as slotActive,
+  l as slotDisabled,
+  e as slotFilled,
+  r as sm
+};

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

@@ -0,0 +1,44 @@
+import { HTMLAttributes, ReactNode } from 'react';
+
+export type InputOTPType = "numeric" | "alphanumeric";
+export type InputOTPSize = "sm" | "md" | "lg";
+export interface InputOTPProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    /** Number of OTP slots. */
+    maxLength: number;
+    /** Controlled value. */
+    value?: string;
+    /** Default value for uncontrolled usage. */
+    defaultValue?: string;
+    /** Callback when value changes. */
+    onChange?: (value: string) => void;
+    /** Callback when all slots are filled. */
+    onComplete?: (value: string) => void;
+    /** Input type — determines keyboard and allowed characters. @default 'numeric' */
+    type?: InputOTPType;
+    /** Size of the OTP slots. @default 'md' */
+    size?: InputOTPSize;
+    /** Disable the input. */
+    disabled?: boolean;
+    /** Auto-focus the input on mount. */
+    autoFocus?: boolean;
+    children?: ReactNode;
+}
+export interface InputOTPGroupProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+export interface InputOTPSlotProps extends HTMLAttributes<HTMLDivElement> {
+    /** Index of this slot (0-based). */
+    index: number;
+}
+export interface InputOTPSeparatorProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+export interface InputOTPContextValue {
+    value: string;
+    activeIndex: number;
+    size: InputOTPSize;
+    disabled: boolean;
+    isFocused: boolean;
+    focusInput: () => void;
+}
+//# sourceMappingURL=InputOTP.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputOTP.types.d.ts","sourceRoot":"","sources":["../../../src/components/InputOTP/InputOTP.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,cAAc,CAAC;AACtD,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,GAAG,cAAc,CAC5B;IACC,2BAA2B;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,0CAA0C;IAC1C,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,kFAAkF;IAClF,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACxE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,sBAAuB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC5E,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,YAAY,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB"}

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

@@ -0,0 +1,3 @@
+export { InputOTP } from './InputOTP';
+export type { InputOTPProps, InputOTPGroupProps, InputOTPSlotProps, InputOTPSeparatorProps, InputOTPType, InputOTPSize, } from './InputOTP.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/InputOTP/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EACV,aAAa,EACb,kBAAkB,EAClB,iBAAiB,EACjB,sBAAsB,EACtB,YAAY,EACZ,YAAY,GACb,MAAM,kBAAkB,CAAC"}

package/dist/components/KanbanBoard/KanbanBoard.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),v=require("react"),r=require("lucide-react"),a=require("./KanbanBoard.module.css.cjs"),b=({priority:s})=>!s||s==="low"?null:e.jsx("span",{className:`${a.default.priority} ${a.default[`priority-${s}`]}`,children:e.jsx(r.AlertCircle,{size:12})}),g=({card:s,compact:t,onClick:n,draggable:d})=>e.jsxs("div",{className:`${a.default.card} ${t?a.default.cardCompact:""}`,onClick:n,draggable:d,role:"button",tabIndex:0,onKeyDown:l=>{(l.key==="Enter"||l.key===" ")&&(l.preventDefault(),n?.())},children:[s.coverImage&&!t&&e.jsx("div",{className:a.default.cardCover,children:e.jsx("img",{src:s.coverImage,alt:""})}),e.jsxs("div",{className:a.default.cardContent,children:[s.labels&&s.labels.length>0&&!t&&e.jsx("div",{className:a.default.labels,children:s.labels.map(l=>e.jsx("span",{className:`${a.default.label} ${a.default[`label-${l.color}`]}`,children:l.text},l.id))}),e.jsxs("div",{className:a.default.cardTitle,children:[e.jsx(b,{priority:s.priority}),e.jsx("span",{children:s.title})]}),s.description&&!t&&e.jsx("p",{className:a.default.cardDescription,children:s.description}),(s.dueDate||s.assignees&&s.assignees.length>0)&&e.jsxs("div",{className:a.default.cardFooter,children:[s.dueDate&&e.jsxs("span",{className:a.default.dueDate,children:[e.jsx(r.Clock,{size:12}),e.jsx("span",{children:s.dueDate})]}),s.assignees&&s.assignees.length>0&&e.jsxs("div",{className:a.default.assignees,children:[s.assignees.slice(0,3).map(l=>e.jsx("div",{className:a.default.assignee,title:l.name,children:l.avatar?e.jsx("img",{src:l.avatar,alt:l.name}):e.jsx("span",{children:l.name.charAt(0)})},l.id)),s.assignees.length>3&&e.jsxs("div",{className:a.default.assigneeMore,children:["+",s.assignees.length-3]})]})]})]})]}),C=({column:s,compact:t,showCardCount:n,draggable:d,onCardClick:l,onAddCard:i,onColumnMenu:u})=>{const m=s.limit&&s.cards.length>s.limit;return e.jsxs("div",{className:a.default.column,children:[e.jsxs("div",{className:a.default.columnHeader,children:[e.jsxs("div",{className:a.default.columnTitleWrapper,children:[s.color&&s.color!=="default"&&e.jsx("span",{className:`${a.default.columnDot} ${a.default[`dot-${s.color}`]}`}),e.jsx("h3",{className:a.default.columnTitle,children:s.title}),n&&e.jsxs("span",{className:`${a.default.columnCount} ${m?a.default.columnCountOver:""}`,children:[s.cards.length,s.limit&&`/${s.limit}`]})]}),e.jsxs("div",{className:a.default.columnActions,children:[i&&e.jsx("button",{type:"button",className:a.default.columnAction,onClick:i,"aria-label":"Add card",children:e.jsx(r.Plus,{size:16})}),u&&e.jsx("button",{type:"button",className:a.default.columnAction,onClick:u,"aria-label":"Column menu",children:e.jsx(r.MoreHorizontal,{size:16})})]})]}),e.jsxs("div",{className:a.default.columnCards,children:[s.cards.map(c=>e.jsx(g,{card:c,compact:t,draggable:d,onClick:()=>l?.(c)},c.id)),s.cards.length===0&&e.jsx("div",{className:a.default.emptyColumn,children:"No cards yet"})]}),i&&e.jsxs("button",{type:"button",className:a.default.addCardButton,onClick:i,children:[e.jsx(r.Plus,{size:16}),e.jsx("span",{children:"Add card"})]})]})},j=v.forwardRef(({columns:s,onCardMove:t,onCardClick:n,onAddCard:d,onAddColumn:l,onColumnMenu:i,compact:u=!1,showCardCount:m=!0,draggable:c=!0,className:x,...f},h)=>{const N=[a.default.kanbanBoard,x].filter(Boolean).join(" ");return e.jsx("div",{ref:h,className:N,...f,children:e.jsxs("div",{className:a.default.columns,children:[s.map(o=>e.jsx(C,{column:o,compact:u,showCardCount:m,draggable:c,onCardClick:p=>n?.(p,o.id),onAddCard:d?()=>d(o.id):void 0,onColumnMenu:i?()=>i(o.id):void 0},o.id)),l&&e.jsxs("button",{type:"button",className:a.default.addColumnButton,onClick:l,children:[e.jsx(r.Plus,{size:20}),e.jsx("span",{children:"Add column"})]})]})})});j.displayName="KanbanBoard";exports.KanbanBoard=j;

package/dist/components/KanbanBoard/KanbanBoard.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanBoard.d.ts","sourceRoot":"","sources":["../../../src/components/KanbanBoard/KanbanBoard.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EACV,gBAAgB,EAGjB,MAAM,qBAAqB,CAAC;AAgN7B,eAAO,MAAM,WAAW,6GAqDvB,CAAC"}

package/dist/components/KanbanBoard/KanbanBoard.mjs

@@ -0,0 +1,190 @@
+import { jsx as s, jsxs as l } from "react/jsx-runtime";
+import { forwardRef as g } from "react";
+import { Plus as p, MoreHorizontal as y, Clock as $, AlertCircle as f } from "lucide-react";
+import a from "./KanbanBoard.module.css.mjs";
+const k = ({
+  priority: e
+}) => !e || e === "low" ? null : /* @__PURE__ */ s("span", { className: `${a.priority} ${a[`priority-${e}`]}`, children: /* @__PURE__ */ s(f, { size: 12 }) }), D = ({
+  card: e,
+  compact: n,
+  onClick: r,
+  draggable: o
+}) => /* @__PURE__ */ l(
+  "div",
+  {
+    className: `${a.card} ${n ? a.cardCompact : ""}`,
+    onClick: r,
+    draggable: o,
+    role: "button",
+    tabIndex: 0,
+    onKeyDown: (i) => {
+      (i.key === "Enter" || i.key === " ") && (i.preventDefault(), r?.());
+    },
+    children: [
+      e.coverImage && !n && /* @__PURE__ */ s("div", { className: a.cardCover, children: /* @__PURE__ */ s("img", { src: e.coverImage, alt: "" }) }),
+      /* @__PURE__ */ l("div", { className: a.cardContent, children: [
+        e.labels && e.labels.length > 0 && !n && /* @__PURE__ */ s("div", { className: a.labels, children: e.labels.map((i) => /* @__PURE__ */ s(
+          "span",
+          {
+            className: `${a.label} ${a[`label-${i.color}`]}`,
+            children: i.text
+          },
+          i.id
+        )) }),
+        /* @__PURE__ */ l("div", { className: a.cardTitle, children: [
+          /* @__PURE__ */ s(k, { priority: e.priority }),
+          /* @__PURE__ */ s("span", { children: e.title })
+        ] }),
+        e.description && !n && /* @__PURE__ */ s("p", { className: a.cardDescription, children: e.description }),
+        (e.dueDate || e.assignees && e.assignees.length > 0) && /* @__PURE__ */ l("div", { className: a.cardFooter, children: [
+          e.dueDate && /* @__PURE__ */ l("span", { className: a.dueDate, children: [
+            /* @__PURE__ */ s($, { size: 12 }),
+            /* @__PURE__ */ s("span", { children: e.dueDate })
+          ] }),
+          e.assignees && e.assignees.length > 0 && /* @__PURE__ */ l("div", { className: a.assignees, children: [
+            e.assignees.slice(0, 3).map((i) => /* @__PURE__ */ s(
+              "div",
+              {
+                className: a.assignee,
+                title: i.name,
+                children: i.avatar ? /* @__PURE__ */ s("img", { src: i.avatar, alt: i.name }) : /* @__PURE__ */ s("span", { children: i.name.charAt(0) })
+              },
+              i.id
+            )),
+            e.assignees.length > 3 && /* @__PURE__ */ l("div", { className: a.assigneeMore, children: [
+              "+",
+              e.assignees.length - 3
+            ] })
+          ] })
+        ] })
+      ] })
+    ]
+  }
+), z = ({
+  column: e,
+  compact: n,
+  showCardCount: r,
+  draggable: o,
+  onCardClick: i,
+  onAddCard: t,
+  onColumnMenu: m
+}) => {
+  const h = e.limit && e.cards.length > e.limit;
+  return /* @__PURE__ */ l("div", { className: a.column, children: [
+    /* @__PURE__ */ l("div", { className: a.columnHeader, children: [
+      /* @__PURE__ */ l("div", { className: a.columnTitleWrapper, children: [
+        e.color && e.color !== "default" && /* @__PURE__ */ s(
+          "span",
+          {
+            className: `${a.columnDot} ${a[`dot-${e.color}`]}`
+          }
+        ),
+        /* @__PURE__ */ s("h3", { className: a.columnTitle, children: e.title }),
+        r && /* @__PURE__ */ l(
+          "span",
+          {
+            className: `${a.columnCount} ${h ? a.columnCountOver : ""}`,
+            children: [
+              e.cards.length,
+              e.limit && `/${e.limit}`
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ l("div", { className: a.columnActions, children: [
+        t && /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            className: a.columnAction,
+            onClick: t,
+            "aria-label": "Add card",
+            children: /* @__PURE__ */ s(p, { size: 16 })
+          }
+        ),
+        m && /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            className: a.columnAction,
+            onClick: m,
+            "aria-label": "Column menu",
+            children: /* @__PURE__ */ s(y, { size: 16 })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ l("div", { className: a.columnCards, children: [
+      e.cards.map((c) => /* @__PURE__ */ s(
+        D,
+        {
+          card: c,
+          compact: n,
+          draggable: o,
+          onClick: () => i?.(c)
+        },
+        c.id
+      )),
+      e.cards.length === 0 && /* @__PURE__ */ s("div", { className: a.emptyColumn, children: "No cards yet" })
+    ] }),
+    t && /* @__PURE__ */ l(
+      "button",
+      {
+        type: "button",
+        className: a.addCardButton,
+        onClick: t,
+        children: [
+          /* @__PURE__ */ s(p, { size: 16 }),
+          /* @__PURE__ */ s("span", { children: "Add card" })
+        ]
+      }
+    )
+  ] });
+}, B = g(
+  ({
+    columns: e,
+    onCardMove: n,
+    onCardClick: r,
+    onAddCard: o,
+    onAddColumn: i,
+    onColumnMenu: t,
+    compact: m = !1,
+    showCardCount: h = !0,
+    draggable: c = !0,
+    className: N,
+    ...v
+  }, u) => {
+    const b = [a.kanbanBoard, N].filter(Boolean).join(" ");
+    return /* @__PURE__ */ s("div", { ref: u, className: b, ...v, children: /* @__PURE__ */ l("div", { className: a.columns, children: [
+      e.map((d) => /* @__PURE__ */ s(
+        z,
+        {
+          column: d,
+          compact: m,
+          showCardCount: h,
+          draggable: c,
+          onCardClick: (C) => r?.(C, d.id),
+          onAddCard: o ? () => o(d.id) : void 0,
+          onColumnMenu: t ? () => t(d.id) : void 0
+        },
+        d.id
+      )),
+      i && /* @__PURE__ */ l(
+        "button",
+        {
+          type: "button",
+          className: a.addColumnButton,
+          onClick: i,
+          children: [
+            /* @__PURE__ */ s(p, { size: 20 }),
+            /* @__PURE__ */ s("span", { children: "Add column" })
+          ]
+        }
+      )
+    ] }) });
+  }
+);
+B.displayName = "KanbanBoard";
+export {
+  B as KanbanBoard
+};

package/dist/components/KanbanBoard/KanbanBoard.module.css

@@ -0,0 +1 @@
+._kanbanBoard_1yd9s_8{width:100%;overflow-x:auto;padding:var(--spacing-4)}._columns_1yd9s_14{display:flex;gap:var(--spacing-4);min-height:400px}._column_1yd9s_14{flex-shrink:0;width:280px;display:flex;flex-direction:column;background:var(--surface-subtle);border-radius:var(--radius-control);max-height:100%}._columnHeader_1yd9s_34{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-3) var(--spacing-3) var(--spacing-2);flex-shrink:0}._columnTitleWrapper_1yd9s_42{display:flex;align-items:center;gap:var(--spacing-2)}._columnDot_1yd9s_48{width:8px;height:8px;border-radius:var(--radius-full);flex-shrink:0}._dot-blue_1yd9s_55{background:var(--color-blue-500)}._dot-green_1yd9s_58{background:var(--color-green-500)}._dot-yellow_1yd9s_61{background:var(--color-yellow-500)}._dot-red_1yd9s_64{background:var(--color-red-500)}._dot-purple_1yd9s_67{background:var(--color-purple-500)}._columnTitle_1yd9s_42{font-family:var(--font-secondary);font-size:var(--font-size-14);font-weight:var(--font-weight-semibold);color:var(--text-primary);margin:0}._columnCount_1yd9s_79{font-family:var(--font-secondary);font-size:var(--font-size-12);font-weight:var(--font-weight-medium);color:var(--text-tertiary);background:var(--surface-base);padding:var(--spacing-0-5) var(--spacing-2);border-radius:var(--radius-full)}._columnCountOver_1yd9s_89{background:var(--status-error-bg);color:var(--text-error)}._columnActions_1yd9s_94{display:flex;gap:var(--spacing-1)}._columnAction_1yd9s_94{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:none;border:none;border-radius:var(--radius-sm);cursor:pointer;color:var(--text-tertiary);transition:all var(--mode-hover-duration)}._columnAction_1yd9s_94:hover{background:var(--surface-base);color:var(--text-primary)}._columnCards_1yd9s_122{flex:1;overflow-y:auto;padding:0 var(--spacing-3);display:flex;flex-direction:column;gap:var(--spacing-2)}._emptyColumn_1yd9s_131{padding:var(--spacing-6);text-align:center;font-family:var(--font-secondary);font-size:var(--font-size-13);color:var(--text-tertiary)}._card_1yd9s_143{background:var(--surface-base);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--mode-hover-duration);overflow:hidden}._card_1yd9s_143:hover{border-color:var(--border-moderate);box-shadow:var(--mode-shadow-hover)}._card_1yd9s_143:focus-visible{outline:2px solid var(--interactive-primary);outline-offset:2px}._card_1yd9s_143[draggable=true]{cursor:grab}._card_1yd9s_143[draggable=true]:active{cursor:grabbing}._cardCompact_1yd9s_170 ._cardContent_1yd9s_170{padding:var(--spacing-2)}._cardCover_1yd9s_174{width:100%;height:120px;overflow:hidden}._cardCover_1yd9s_174 img{width:100%;height:100%;object-fit:cover}._cardContent_1yd9s_170{padding:var(--spacing-3);display:flex;flex-direction:column;gap:var(--spacing-2)}._labels_1yd9s_194{display:flex;flex-wrap:wrap;gap:var(--spacing-1)}._label_1yd9s_194{font-family:var(--font-secondary);font-size:var(--font-size-10);font-weight:var(--font-weight-medium);padding:var(--spacing-0-5) var(--spacing-1-5);border-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:.02em}._label-red_1yd9s_210{background:var(--color-red-100);color:var(--color-red-700)}._label-orange_1yd9s_214{background:var(--color-orange-100);color:var(--color-orange-700)}._label-yellow_1yd9s_218{background:var(--color-yellow-100);color:var(--color-yellow-700)}._label-green_1yd9s_222{background:var(--color-green-100);color:var(--color-green-700)}._label-blue_1yd9s_226{background:var(--color-blue-100);color:var(--color-blue-700)}._label-purple_1yd9s_230{background:var(--color-purple-100);color:var(--color-purple-700)}._label-pink_1yd9s_234{background:var(--color-pink-100);color:var(--color-pink-700)}._label-gray_1yd9s_238{background:var(--surface-subtle);color:var(--text-secondary)}._cardTitle_1yd9s_244{display:flex;align-items:flex-start;gap:var(--spacing-1);font-family:var(--font-secondary);font-size:var(--font-size-14);font-weight:var(--font-weight-medium);color:var(--text-primary);line-height:var(--line-height-relaxed)}._priority_1yd9s_255{flex-shrink:0;margin-top:2px}._priority-medium_1yd9s_260{color:var(--color-yellow-500)}._priority-high_1yd9s_263{color:var(--color-orange-500)}._priority-urgent_1yd9s_266{color:var(--color-red-500)}._cardDescription_1yd9s_271{font-family:var(--font-secondary);font-size:var(--font-size-12);color:var(--text-secondary);line-height:var(--line-height-relaxed);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}._cardFooter_1yd9s_284{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-2);margin-top:var(--spacing-1)}._dueDate_1yd9s_292{display:inline-flex;align-items:center;gap:var(--spacing-1);font-family:var(--font-secondary);font-size:var(--font-size-11);color:var(--text-tertiary)}._assignees_1yd9s_302{display:flex;align-items:center;margin-left:auto}._assignee_1yd9s_302{width:24px;height:24px;border-radius:var(--radius-full);background:var(--surface-subtle);border:2px solid var(--surface-base);margin-left:-8px;display:flex;align-items:center;justify-content:center;overflow:hidden;font-family:var(--font-secondary);font-size:var(--font-size-10);font-weight:var(--font-weight-medium);color:var(--text-secondary)}._assignee_1yd9s_302:first-child{margin-left:0}._assignee_1yd9s_302 img{width:100%;height:100%;object-fit:cover}._assigneeMore_1yd9s_335{width:24px;height:24px;border-radius:var(--radius-full);background:var(--surface-layer);border:2px solid var(--surface-base);margin-left:-8px;display:flex;align-items:center;justify-content:center;font-family:var(--font-secondary);font-size:var(--font-size-10);font-weight:var(--font-weight-medium);color:var(--text-tertiary)}._addCardButton_1yd9s_355{display:flex;align-items:center;justify-content:center;gap:var(--spacing-1);width:calc(100% - var(--spacing-6));margin:var(--spacing-2) var(--spacing-3) var(--spacing-3);padding:var(--spacing-2);font-family:var(--font-secondary);font-size:var(--font-size-13);font-weight:var(--font-weight-medium);color:var(--text-tertiary);background:none;border:1px dashed var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--mode-hover-duration)}._addCardButton_1yd9s_355:hover{color:var(--text-primary);border-color:var(--border-moderate);background:var(--surface-base)}._addColumnButton_1yd9s_380{flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-2);width:280px;min-height:120px;padding:var(--spacing-4);font-family:var(--font-secondary);font-size:var(--font-size-14);font-weight:var(--font-weight-medium);color:var(--text-tertiary);background:var(--surface-subtle);border:2px dashed var(--border-subtle);border-radius:var(--radius-control);cursor:pointer;transition:all var(--mode-hover-duration)}._addColumnButton_1yd9s_380:hover{color:var(--text-primary);border-color:var(--border-moderate);background:var(--surface-layer)}@media(max-width:768px){._column_1yd9s_14{width:260px}._kanbanBoard_1yd9s_8{padding:var(--spacing-2)}._columns_1yd9s_14{gap:var(--spacing-3)}}

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o="_kanbanBoard_1yd9s_8",e="_columns_1yd9s_14",n="_column_1yd9s_14",t="_columnHeader_1yd9s_34",_="_columnTitleWrapper_1yd9s_42",l="_columnDot_1yd9s_48",d="_columnTitle_1yd9s_42",s="_columnCount_1yd9s_79",c="_columnCountOver_1yd9s_89",a="_columnActions_1yd9s_94",r="_columnAction_1yd9s_94",u="_columnCards_1yd9s_122",i="_emptyColumn_1yd9s_131",y="_card_1yd9s_143",m="_cardCompact_1yd9s_170",p="_cardContent_1yd9s_170",C="_cardCover_1yd9s_174",b="_labels_1yd9s_194",g="_label_1yd9s_194",T="_cardTitle_1yd9s_244",B="_priority_1yd9s_255",D="_cardDescription_1yd9s_271",v="_cardFooter_1yd9s_284",A="_dueDate_1yd9s_292",k="_assignees_1yd9s_302",M="_assignee_1yd9s_302",O="_assigneeMore_1yd9s_335",h="_addCardButton_1yd9s_355",w="_addColumnButton_1yd9s_380",F={kanbanBoard:o,columns:e,column:n,columnHeader:t,columnTitleWrapper:_,columnDot:l,"dot-blue":"_dot-blue_1yd9s_55","dot-green":"_dot-green_1yd9s_58","dot-yellow":"_dot-yellow_1yd9s_61","dot-red":"_dot-red_1yd9s_64","dot-purple":"_dot-purple_1yd9s_67",columnTitle:d,columnCount:s,columnCountOver:c,columnActions:a,columnAction:r,columnCards:u,emptyColumn:i,card:y,cardCompact:m,cardContent:p,cardCover:C,labels:b,label:g,"label-red":"_label-red_1yd9s_210","label-orange":"_label-orange_1yd9s_214","label-yellow":"_label-yellow_1yd9s_218","label-green":"_label-green_1yd9s_222","label-blue":"_label-blue_1yd9s_226","label-purple":"_label-purple_1yd9s_230","label-pink":"_label-pink_1yd9s_234","label-gray":"_label-gray_1yd9s_238",cardTitle:T,priority:B,"priority-medium":"_priority-medium_1yd9s_260","priority-high":"_priority-high_1yd9s_263","priority-urgent":"_priority-urgent_1yd9s_266",cardDescription:D,cardFooter:v,dueDate:A,assignees:k,assignee:M,assigneeMore:O,addCardButton:h,addColumnButton:w};exports.addCardButton=h;exports.addColumnButton=w;exports.assignee=M;exports.assigneeMore=O;exports.assignees=k;exports.card=y;exports.cardCompact=m;exports.cardContent=p;exports.cardCover=C;exports.cardDescription=D;exports.cardFooter=v;exports.cardTitle=T;exports.column=n;exports.columnAction=r;exports.columnActions=a;exports.columnCards=u;exports.columnCount=s;exports.columnCountOver=c;exports.columnDot=l;exports.columnHeader=t;exports.columnTitle=d;exports.columnTitleWrapper=_;exports.columns=e;exports.default=F;exports.dueDate=A;exports.emptyColumn=i;exports.kanbanBoard=o;exports.label=g;exports.labels=b;exports.priority=B;

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

@@ -0,0 +1,79 @@
+const o = "_kanbanBoard_1yd9s_8", _ = "_columns_1yd9s_14", n = "_column_1yd9s_14", e = "_columnHeader_1yd9s_34", s = "_columnTitleWrapper_1yd9s_42", t = "_columnDot_1yd9s_48", d = "_columnTitle_1yd9s_42", l = "_columnCount_1yd9s_79", c = "_columnCountOver_1yd9s_89", a = "_columnActions_1yd9s_94", r = "_columnAction_1yd9s_94", u = "_columnCards_1yd9s_122", y = "_emptyColumn_1yd9s_131", i = "_card_1yd9s_143", m = "_cardCompact_1yd9s_170", p = "_cardContent_1yd9s_170", b = "_cardCover_1yd9s_174", C = "_labels_1yd9s_194", g = "_label_1yd9s_194", B = "_cardTitle_1yd9s_244", D = "_priority_1yd9s_255", T = "_cardDescription_1yd9s_271", v = "_cardFooter_1yd9s_284", A = "_dueDate_1yd9s_292", k = "_assignees_1yd9s_302", h = "_assignee_1yd9s_302", w = "_assigneeMore_1yd9s_335", F = "_addCardButton_1yd9s_355", H = "_addColumnButton_1yd9s_380", M = {
+  kanbanBoard: o,
+  columns: _,
+  column: n,
+  columnHeader: e,
+  columnTitleWrapper: s,
+  columnDot: t,
+  "dot-blue": "_dot-blue_1yd9s_55",
+  "dot-green": "_dot-green_1yd9s_58",
+  "dot-yellow": "_dot-yellow_1yd9s_61",
+  "dot-red": "_dot-red_1yd9s_64",
+  "dot-purple": "_dot-purple_1yd9s_67",
+  columnTitle: d,
+  columnCount: l,
+  columnCountOver: c,
+  columnActions: a,
+  columnAction: r,
+  columnCards: u,
+  emptyColumn: y,
+  card: i,
+  cardCompact: m,
+  cardContent: p,
+  cardCover: b,
+  labels: C,
+  label: g,
+  "label-red": "_label-red_1yd9s_210",
+  "label-orange": "_label-orange_1yd9s_214",
+  "label-yellow": "_label-yellow_1yd9s_218",
+  "label-green": "_label-green_1yd9s_222",
+  "label-blue": "_label-blue_1yd9s_226",
+  "label-purple": "_label-purple_1yd9s_230",
+  "label-pink": "_label-pink_1yd9s_234",
+  "label-gray": "_label-gray_1yd9s_238",
+  cardTitle: B,
+  priority: D,
+  "priority-medium": "_priority-medium_1yd9s_260",
+  "priority-high": "_priority-high_1yd9s_263",
+  "priority-urgent": "_priority-urgent_1yd9s_266",
+  cardDescription: T,
+  cardFooter: v,
+  dueDate: A,
+  assignees: k,
+  assignee: h,
+  assigneeMore: w,
+  addCardButton: F,
+  addColumnButton: H
+};
+export {
+  F as addCardButton,
+  H as addColumnButton,
+  h as assignee,
+  w as assigneeMore,
+  k as assignees,
+  i as card,
+  m as cardCompact,
+  p as cardContent,
+  b as cardCover,
+  T as cardDescription,
+  v as cardFooter,
+  B as cardTitle,
+  n as column,
+  r as columnAction,
+  a as columnActions,
+  u as columnCards,
+  l as columnCount,
+  c as columnCountOver,
+  t as columnDot,
+  e as columnHeader,
+  d as columnTitle,
+  s as columnTitleWrapper,
+  _ as columns,
+  M as default,
+  A as dueDate,
+  y as emptyColumn,
+  o as kanbanBoard,
+  g as label,
+  C as labels,
+  D as priority
+};