@namroodinc/liquid-editorial 0.0.0-stage → 0.1.0

package/dist/components/AssetGrid/style.css

@@ -0,0 +1,196 @@
+@layer components {
+  /* Columns and gap come from Grid; the grid only adds its own inset. */
+  .ds-asset-grid {
+    padding: var(--space-4);
+  }
+
+  .ds-asset-tile {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    padding: var(--space-3);
+    background: var(--color-surface);
+    border: var(--control-border-width) solid var(--control-border-color);
+    border-radius: var(--radius-md);
+    /* The rail exists on every tile, so selecting one never shifts the grid. */
+    box-shadow: inset var(--rail-width) 0 0 0 transparent;
+    transition:
+      background-color var(--duration-fast) var(--ease-standard),
+      box-shadow var(--duration-fast) var(--ease-standard);
+  }
+
+  .ds-asset-tile:hover:not([data-pending]) {
+    background: var(--field-hover);
+  }
+
+  .ds-asset-tile[data-selected] {
+    background: var(--color-primary-soft);
+    box-shadow: inset var(--rail-width) 0 0 0 var(--rail-color);
+  }
+
+  .ds-asset-tile[data-pending] {
+    opacity: 70%;
+  }
+
+  .ds-asset-tile[data-loading="true"] {
+    background: var(--color-surface);
+  }
+
+  .ds-asset-tile__thumb {
+    position: relative;
+    aspect-ratio: var(--asset-thumb-aspect);
+    overflow: hidden;
+    border-radius: var(--field-radius);
+    background: var(--field-rest);
+    display: grid;
+    place-content: center;
+  }
+
+  .ds-asset-tile__thumb img {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+    opacity: 0;
+    transition: opacity var(--duration-base) var(--ease-standard);
+  }
+
+  .ds-asset-tile__thumb img[data-loaded] {
+    opacity: 100%;
+  }
+
+  .ds-asset-tile__thumb-skeleton {
+    position: absolute;
+    inset: 0;
+    block-size: 100%;
+    border-radius: 0;
+  }
+
+  .ds-asset-tile__placeholder {
+    display: grid;
+    place-content: center;
+    color: var(--color-text-muted);
+  }
+
+  .ds-asset-tile__pending {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    background: color-mix(in srgb, var(--color-surface) 72%, transparent);
+    color: var(--color-text-muted);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-bold);
+  }
+
+  .ds-asset-tile__spinner {
+    animation: ds-asset-spin 900ms linear infinite;
+  }
+
+  @keyframes ds-asset-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .ds-asset-tile__actions {
+    position: absolute;
+    inset-block-start: var(--space-2);
+    inset-inline: var(--space-2);
+    z-index: 1;
+    display: flex;
+    justify-content: space-between;
+    gap: var(--space-2);
+    pointer-events: none;
+  }
+
+  .ds-asset-tile__actions > * {
+    pointer-events: auto;
+  }
+
+  /* The whole thumbnail is the selection target; the name stays readable text
+   * underneath rather than being swallowed by the button. */
+  .ds-asset-tile__hit {
+    position: absolute;
+    inset: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+  }
+
+  .ds-asset-tile__hit:focus-visible {
+    outline: var(--control-border-width) solid var(--color-focus);
+    outline-offset: -2px;
+  }
+
+  .ds-asset-tile__hit:disabled {
+    cursor: not-allowed;
+  }
+
+  .ds-asset-tile__hit-label {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+
+  .ds-asset-tile__text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    min-inline-size: 0;
+  }
+
+  .ds-asset-tile__name {
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--line-height-body);
+    overflow-wrap: anywhere;
+  }
+
+  .ds-asset-tile__meta {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-body);
+    color: var(--color-text-muted);
+  }
+
+  .ds-asset-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-12) var(--space-6);
+    text-align: center;
+    color: var(--color-text-muted);
+  }
+
+  .ds-asset-empty__title {
+    font-size: var(--font-size-lead);
+    font-weight: var(--font-weight-bold);
+    color: var(--color-text);
+  }
+
+  .ds-asset-empty__description {
+    max-inline-size: 34rem;
+    line-height: var(--line-height-body);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ds-asset-tile,
+    .ds-asset-tile__thumb img {
+      transition: none;
+    }
+
+    .ds-asset-tile__spinner {
+      animation: none;
+    }
+  }
+}

package/dist/components/Avatar/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react"),t=require("react/jsx-runtime");function n(e){let t=e.trim().split(/\s+/);return((t[0]?.[0]??``)+(t.length>1?t[t.length-1][0]:``)).toUpperCase()}var r=(0,e.forwardRef)(function({name:e,src:r,size:i=24,className:a,...o},s){return(0,t.jsx)(`span`,{ref:s,role:`img`,"aria-label":e,title:e,"data-size":i,className:[`ds-avatar`,a].filter(Boolean).join(` `),...o,children:r?(0,t.jsx)(`img`,{src:r,alt:``}):n(e)})}),i=(0,e.forwardRef)(function({people:e,size:n=24,className:i,...a},o){let s=e.slice(0,3),c=e.length-s.length;return(0,t.jsxs)(`span`,{ref:o,role:`group`,"aria-label":e.map(e=>e.name).join(`, `),className:[`ds-avatar-group`,i].filter(Boolean).join(` `),...a,children:[s.map(e=>(0,t.jsx)(r,{name:e.name,src:e.src,size:n},e.name)),c>0&&(0,t.jsxs)(`span`,{className:`ds-avatar-group__count`,children:[`+`,c]})]})});exports.Avatar=r,exports.AvatarGroup=i;
+//# sourceMappingURL=index.cjs.map

package/dist/components/Avatar/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["forwardRef","react","react_jsx_runtime","initialsOf","words","name","Avatar","rest","size","className","src","AvatarGroup","shown","people","overflow","p","person"],"sources":["../../../src/components/Avatar/index.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport \"./style.css\";\n\nexport type AvatarSize = 24 | 32 | 40;\n\nexport interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Required — drives the initials and the accessible name. */\n  name: string;\n  src?: string;\n  size?: AvatarSize;\n}\n\nfunction initialsOf(name: string) {\n  const words = name.trim().split(/\\s+/);\n  const first = words[0]?.[0] ?? \"\";\n  const last = words.length > 1 ? words[words.length - 1][0] : \"\";\n  return (first + last).toUpperCase();\n}\n\n/**\n * Identifies a person at a glance in a dense surface. An identifier, not a\n * control — never colour-generated, never carrying a status dot.\n */\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(function Avatar(\n  { name, src, size = 24, className, ...rest },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      role=\"img\"\n      aria-label={name}\n      title={name}\n      data-size={size}\n      className={[\"ds-avatar\", className].filter(Boolean).join(\" \")}\n      {...rest}\n    >\n      {src ? <img src={src} alt=\"\" /> : initialsOf(name)}\n    </span>\n  );\n});\n\nexport interface AvatarGroupProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Up to three render; the rest become a `+n` count. */\n  people: { name: string; src?: string }[];\n  size?: AvatarSize;\n}\n\n/** Overlapping stack of at most three avatars, then a `+n` chip. */\nexport const AvatarGroup = forwardRef<HTMLSpanElement, AvatarGroupProps>(\n  function AvatarGroup({ people, size = 24, className, ...rest }, ref) {\n    const shown = people.slice(0, 3);\n    const overflow = people.length - shown.length;\n    return (\n      <span\n        ref={ref}\n        role=\"group\"\n        aria-label={people.map((p) => p.name).join(\", \")}\n        className={[\"ds-avatar-group\", className].filter(Boolean).join(\" \")}\n        {...rest}\n      >\n        {shown.map((person) => (\n          <Avatar key={person.name} name={person.name} src={person.src} size={size} />\n        ))}\n        {overflow > 0 && <span className=\"ds-avatar-group__count\">+{overflow}</span>}\n      </span>\n    );\n  },\n);\n"],"mappings":"A,yHAYA,SAASG,EAAW,EAAc,CAChC,IAAMC,EAAQC,EAAK,KAAK,CAAC,CAAC,MAAM,KAAK,EAGrC,QAFcD,EAAM,EAAE,GAAG,IAAM,KAClBA,EAAM,OAAS,EAAIA,EAAMA,EAAM,OAAS,EAAE,CAAC,GAAK,IAAA,CACvC,YAAY,CACpC,CAMA,IAAaE,GAAA,EAASN,EAAAA,WAAAA,CAAyC,SAC7D,CAAE,OAAM,MAAK,OAAO,GAAI,YAAW,GAAGO,GACtC,EACA,CACA,OACE,EAAAL,EAAA,IAAA,CAAC,OAAD,CACO,MACL,KAAK,MACL,aAAYG,EACZ,MAAOA,EACP,YAAWG,EACX,UAAW,CAAC,YAAaC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,EAC5D,GAAIF,EAEH,SAAAG,GAAM,EAAAR,EAAA,IAAA,CAAC,MAAD,CAAU,MAAK,IAAI,EAAI,CAAA,EAAIC,EAAWE,CAAI,CAC7C,CAAA,CAEV,CAAC,EASYM,GAAA,EAAcX,EAAAA,WAAAA,CACzB,SAAqB,CAAE,SAAQ,OAAO,GAAI,YAAW,GAAGO,GAAQ,EAAK,CACnE,IAAMK,EAAQC,EAAO,MAAM,EAAG,CAAC,EACzBC,EAAWD,EAAO,OAASD,EAAM,OACvC,OACE,EAAAV,EAAA,KAAA,CAAC,OAAD,CACO,MACL,KAAK,QACL,aAAYW,EAAO,IAAK,GAAME,EAAE,IAAI,CAAC,CAAC,KAAK,IAAI,EAC/C,UAAW,CAAC,kBAAmBN,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,EAClE,GAAIF,EALN,SAAA,CAOGK,EAAM,IAAK,IACV,EAAAV,EAAA,IAAA,CAACI,EAAD,CAA0B,KAAMU,EAAO,KAAM,IAAKA,EAAO,IAAW,MAAO,EAA9DA,EAAO,IAAuD,CAC5E,EACAF,EAAW,IAAK,EAAAZ,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,yBAAhB,SAAA,CAAyC,IAAEY,CAAe,CACvE,CAAA,CAAA,C,EAEV,CACF,E"}

package/dist/components/Avatar/index.d.cts

@@ -0,0 +1,24 @@
+import { type HTMLAttributes } from "react";
+export type AvatarSize = 24 | 32 | 40;
+export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Required — drives the initials and the accessible name. */
+    name: string;
+    src?: string;
+    size?: AvatarSize;
+}
+/**
+ * Identifies a person at a glance in a dense surface. An identifier, not a
+ * control — never colour-generated, never carrying a status dot.
+ */
+export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLSpanElement>>;
+export interface AvatarGroupProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Up to three render; the rest become a `+n` count. */
+    people: {
+        name: string;
+        src?: string;
+    }[];
+    size?: AvatarSize;
+}
+/** Overlapping stack of at most three avatars, then a `+n` chip. */
+export declare const AvatarGroup: import("react").ForwardRefExoticComponent<AvatarGroupProps & import("react").RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=index.d.cts.map

package/dist/components/Avatar/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Avatar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,UAAU,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEtC,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,eAAe,CAAC;IAClE,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AASD;;;GAGG;AACH,eAAO,MAAM,MAAM,yGAiBjB,CAAC;AAEH,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,eAAe,CAAC;IACvE,wDAAwD;IACxD,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACzC,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED,oEAAoE;AACpE,eAAO,MAAM,WAAW,8GAmBvB,CAAC"}

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

@@ -0,0 +1,24 @@
+import { type HTMLAttributes } from "react";
+export type AvatarSize = 24 | 32 | 40;
+export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Required — drives the initials and the accessible name. */
+    name: string;
+    src?: string;
+    size?: AvatarSize;
+}
+/**
+ * Identifies a person at a glance in a dense surface. An identifier, not a
+ * control — never colour-generated, never carrying a status dot.
+ */
+export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLSpanElement>>;
+export interface AvatarGroupProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Up to three render; the rest become a `+n` count. */
+    people: {
+        name: string;
+        src?: string;
+    }[];
+    size?: AvatarSize;
+}
+/** Overlapping stack of at most three avatars, then a `+n` chip. */
+export declare const AvatarGroup: import("react").ForwardRefExoticComponent<AvatarGroupProps & import("react").RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,UAAU,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEtC,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,eAAe,CAAC;IAClE,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AASD;;;GAGG;AACH,eAAO,MAAM,MAAM,yGAiBjB,CAAC;AAEH,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,eAAe,CAAC;IACvE,wDAAwD;IACxD,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACzC,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED,oEAAoE;AACpE,eAAO,MAAM,WAAW,8GAmBvB,CAAC"}

package/dist/components/Avatar/index.js

@@ -0,0 +1,43 @@
+import { forwardRef as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/Avatar/index.tsx
+function r(e) {
+	let t = e.trim().split(/\s+/);
+	return ((t[0]?.[0] ?? "") + (t.length > 1 ? t[t.length - 1][0] : "")).toUpperCase();
+}
+var i = e(function({ name: e, src: n, size: i = 24, className: a, ...o }, s) {
+	return /* @__PURE__ */ t("span", {
+		ref: s,
+		role: "img",
+		"aria-label": e,
+		title: e,
+		"data-size": i,
+		className: ["ds-avatar", a].filter(Boolean).join(" "),
+		...o,
+		children: n ? /* @__PURE__ */ t("img", {
+			src: n,
+			alt: ""
+		}) : r(e)
+	});
+}), a = e(function({ people: e, size: r = 24, className: a, ...o }, s) {
+	let c = e.slice(0, 3), l = e.length - c.length;
+	return /* @__PURE__ */ n("span", {
+		ref: s,
+		role: "group",
+		"aria-label": e.map((e) => e.name).join(", "),
+		className: ["ds-avatar-group", a].filter(Boolean).join(" "),
+		...o,
+		children: [c.map((e) => /* @__PURE__ */ t(i, {
+			name: e.name,
+			src: e.src,
+			size: r
+		}, e.name)), l > 0 && /* @__PURE__ */ n("span", {
+			className: "ds-avatar-group__count",
+			children: ["+", l]
+		})]
+	});
+});
+//#endregion
+export { i as Avatar, a as AvatarGroup };
+
+//# sourceMappingURL=index.js.map

package/dist/components/Avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["initialsOf","words","name","Avatar","forwardRef","rest","size","className","src","AvatarGroup","shown","people","overflow","p","person"],"sources":["../../../src/components/Avatar/index.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport \"./style.css\";\n\nexport type AvatarSize = 24 | 32 | 40;\n\nexport interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Required — drives the initials and the accessible name. */\n  name: string;\n  src?: string;\n  size?: AvatarSize;\n}\n\nfunction initialsOf(name: string) {\n  const words = name.trim().split(/\\s+/);\n  const first = words[0]?.[0] ?? \"\";\n  const last = words.length > 1 ? words[words.length - 1][0] : \"\";\n  return (first + last).toUpperCase();\n}\n\n/**\n * Identifies a person at a glance in a dense surface. An identifier, not a\n * control — never colour-generated, never carrying a status dot.\n */\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(function Avatar(\n  { name, src, size = 24, className, ...rest },\n  ref,\n) {\n  return (\n    <span\n      ref={ref}\n      role=\"img\"\n      aria-label={name}\n      title={name}\n      data-size={size}\n      className={[\"ds-avatar\", className].filter(Boolean).join(\" \")}\n      {...rest}\n    >\n      {src ? <img src={src} alt=\"\" /> : initialsOf(name)}\n    </span>\n  );\n});\n\nexport interface AvatarGroupProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Up to three render; the rest become a `+n` count. */\n  people: { name: string; src?: string }[];\n  size?: AvatarSize;\n}\n\n/** Overlapping stack of at most three avatars, then a `+n` chip. */\nexport const AvatarGroup = forwardRef<HTMLSpanElement, AvatarGroupProps>(\n  function AvatarGroup({ people, size = 24, className, ...rest }, ref) {\n    const shown = people.slice(0, 3);\n    const overflow = people.length - shown.length;\n    return (\n      <span\n        ref={ref}\n        role=\"group\"\n        aria-label={people.map((p) => p.name).join(\", \")}\n        className={[\"ds-avatar-group\", className].filter(Boolean).join(\" \")}\n        {...rest}\n      >\n        {shown.map((person) => (\n          <Avatar key={person.name} name={person.name} src={person.src} size={size} />\n        ))}\n        {overflow > 0 && <span className=\"ds-avatar-group__count\">+{overflow}</span>}\n      </span>\n    );\n  },\n);\n"],"mappings":";;;AAYA,SAASA,EAAW,GAAc;CAChC,IAAMC,IAAQC,EAAK,KAAK,CAAC,CAAC,MAAM,KAAK;CAGrC,SAFcD,EAAM,EAAE,GAAG,MAAM,OAClBA,EAAM,SAAS,IAAIA,EAAMA,EAAM,SAAS,EAAE,CAAC,KAAK,IAAA,CACvC,YAAY;AACpC;AAMA,IAAaE,IAASC,EAAyC,SAC7D,EAAE,SAAM,QAAK,UAAO,IAAI,cAAW,GAAGC,KACtC,GACA;CACA,OACE,kBAAC,QAAD;EACO;EACL,MAAK;EACL,cAAYH;EACZ,OAAOA;EACP,aAAWI;EACX,WAAW,CAAC,aAAaC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAC5D,GAAIF;EAEH,UAAAG,IAAM,kBAAC,OAAD;GAAU;GAAK,KAAI;EAAI,CAAA,IAAIR,EAAWE,CAAI;CAC7C,CAAA;AAEV,CAAC,GASYO,IAAcL,EACzB,SAAqB,EAAE,WAAQ,UAAO,IAAI,cAAW,GAAGC,KAAQ,GAAK;CACnE,IAAMK,IAAQC,EAAO,MAAM,GAAG,CAAC,GACzBC,IAAWD,EAAO,SAASD,EAAM;CACvC,OACE,kBAAC,QAAD;EACO;EACL,MAAK;EACL,cAAYC,EAAO,KAAK,MAAME,EAAE,IAAI,CAAC,CAAC,KAAK,IAAI;EAC/C,WAAW,CAAC,mBAAmBN,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAClE,GAAIF;EALN,UAAA,CAOGK,EAAM,KAAK,MACV,kBAACP,GAAD;GAA0B,MAAMW,EAAO;GAAM,KAAKA,EAAO;GAAW;EAAO,GAA9DA,EAAO,IAAuD,CAC5E,GACAF,IAAW,KAAK,kBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CAAyC,KAAEA,CAAe;EACvE,CAAA,CAAA;;AAEV,CACF"}

package/dist/components/Avatar/style.css

@@ -0,0 +1,70 @@
+@layer components {
+  .ds-avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border: var(--control-border-width) solid var(--control-border-color);
+    border-radius: var(--radius-pill);
+    background: var(--color-surface-subtle);
+    color: var(--color-text);
+    font-weight: var(--font-weight-bold);
+    line-height: 1;
+    user-select: none;
+  }
+
+  .ds-avatar img {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+  }
+
+  .ds-avatar[data-size="24"] {
+    inline-size: var(--icon-lg);
+    block-size: var(--icon-lg);
+    font-size: 10px;
+  }
+
+  .ds-avatar[data-size="32"] {
+    inline-size: var(--space-8);
+    block-size: var(--space-8);
+    font-size: var(--field-font-size-sm);
+  }
+
+  .ds-avatar[data-size="40"] {
+    inline-size: var(--space-10);
+    block-size: var(--space-10);
+    font-size: var(--font-size-md);
+  }
+
+  .ds-avatar-group {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .ds-avatar-group .ds-avatar + .ds-avatar {
+    margin-inline-start: calc(-1 * var(--space-2));
+  }
+
+  .ds-avatar-group .ds-avatar:nth-child(1) {
+    z-index: 3;
+  }
+
+  .ds-avatar-group .ds-avatar:nth-child(2) {
+    z-index: 2;
+  }
+
+  .ds-avatar-group .ds-avatar:nth-child(3) {
+    z-index: 1;
+  }
+
+  .ds-avatar-group__count {
+    margin-inline-start: var(--space-2);
+    padding: 2px var(--space-2);
+    border: var(--badge-border-width) solid var(--color-text-muted);
+    border-radius: var(--radius-pill);
+    color: var(--color-text-muted);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-bold);
+  }
+}

package/dist/components/Badge/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react"),t=require("react/jsx-runtime");var n=(0,e.forwardRef)(function({shape:e=`tag`,tone:n,appearance:r=`outline`,className:i,children:a,...o},s){if(e===`count`){let e=Number(a);if(!Number.isNaN(e)){if(e===0)return null;a=e>99?`99+`:String(e)}}return(0,t.jsxs)(`span`,{ref:s,"data-shape":e,"data-appearance":r,"data-tone":e===`status`?n:void 0,className:[`ds-badge`,i].filter(Boolean).join(` `),...o,children:[e===`status`&&(0,t.jsx)(`span`,{className:`ds-badge__dot`,"aria-hidden":`true`}),a]})});exports.Badge=n;
+//# sourceMappingURL=index.cjs.map

package/dist/components/Badge/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["forwardRef","react","react_jsx_runtime","Badge","rest","shape","value","children","appearance","tone","className"],"sources":["../../../src/components/Badge/index.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport \"./style.css\";\n\nexport type BadgeShape = \"status\" | \"tag\" | \"count\";\n\n/**\n * How much ink the badge spends.\n * - `outline` — the tone as a 2px stroke on the surface. The quiet default.\n * - `soft` — the tone's soft fill behind tone-coloured text. For dense tables.\n * - `solid` — the tone as a full fill. Reserve it for the one state a row is\n *   really about; a table of solid badges reads as noise.\n */\nexport type BadgeAppearance = \"outline\" | \"soft\" | \"solid\";\n\n/** Six publication states, and no seventh without a decision record. */\nexport type StatusTone =\n  | \"draft\"\n  | \"scheduled\"\n  | \"published\"\n  | \"changed\"\n  | \"unpublished\"\n  | \"archived\";\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  shape?: BadgeShape;\n  /** Required on `status`, forbidden on `tag` and `count`. */\n  tone?: StatusTone;\n  appearance?: BadgeAppearance;\n  children?: ReactNode;\n}\n\n/**\n * A small, non-interactive label attached to something else. Never a button,\n * never a filter. Status tones are reserved for publication state.\n */\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  { shape = \"tag\", tone, appearance = \"outline\", className, children, ...rest },\n  ref,\n) {\n  if (shape === \"count\") {\n    const value = Number(children);\n    if (!Number.isNaN(value)) {\n      if (value === 0) return null;\n      children = value > 99 ? \"99+\" : String(value);\n    }\n  }\n\n  return (\n    <span\n      ref={ref}\n      data-shape={shape}\n      data-appearance={appearance}\n      data-tone={shape === \"status\" ? tone : undefined}\n      className={[\"ds-badge\", className].filter(Boolean).join(\" \")}\n      {...rest}\n    >\n      {shape === \"status\" && <span className=\"ds-badge__dot\" aria-hidden=\"true\" />}\n      {children}\n    </span>\n  );\n});\n"],"mappings":"A,yHAmCA,IAAaG,GAAA,EAAQH,EAAAA,WAAAA,CAAwC,SAC3D,CAAE,QAAQ,MAAO,OAAM,aAAa,UAAW,YAAW,WAAU,GAAGI,GACvE,EACA,CACA,GAAIC,IAAU,QAAS,CACrB,IAAMC,EAAQ,OAAOC,CAAQ,EAC7B,GAAI,CAAC,OAAO,MAAMD,CAAK,EAAG,CACxB,GAAIA,IAAU,EAAG,OAAO,KACxB,EAAWA,EAAQ,GAAK,MAAQ,OAAOA,CAAK,CAC9C,CACF,CAEA,OACE,EAAAJ,EAAA,KAAA,CAAC,OAAD,CACO,MACL,aAAYG,EACZ,kBAAiBG,EACjB,YAAWH,IAAU,SAAWI,EAAO,IAAA,GACvC,UAAW,CAAC,WAAYC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,EAC3D,GAAIN,EANN,SAAA,CAQGC,IAAU,WAAY,EAAAH,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,gBAAgB,cAAY,MAAQ,CAAA,EAC1EK,CACG,C,EAEV,CAAC,E"}

package/dist/components/Badge/index.d.cts

@@ -0,0 +1,25 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export type BadgeShape = "status" | "tag" | "count";
+/**
+ * How much ink the badge spends.
+ * - `outline` — the tone as a 2px stroke on the surface. The quiet default.
+ * - `soft` — the tone's soft fill behind tone-coloured text. For dense tables.
+ * - `solid` — the tone as a full fill. Reserve it for the one state a row is
+ *   really about; a table of solid badges reads as noise.
+ */
+export type BadgeAppearance = "outline" | "soft" | "solid";
+/** Six publication states, and no seventh without a decision record. */
+export type StatusTone = "draft" | "scheduled" | "published" | "changed" | "unpublished" | "archived";
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    shape?: BadgeShape;
+    /** Required on `status`, forbidden on `tag` and `count`. */
+    tone?: StatusTone;
+    appearance?: BadgeAppearance;
+    children?: ReactNode;
+}
+/**
+ * A small, non-interactive label attached to something else. Never a button,
+ * never a filter. Status tones are reserved for publication state.
+ */
+export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=index.d.cts.map

package/dist/components/Badge/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAC;AAEpD;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAE3D,wEAAwE;AACxE,MAAM,MAAM,UAAU,GAClB,OAAO,GACP,WAAW,GACX,WAAW,GACX,SAAS,GACT,aAAa,GACb,UAAU,CAAC;AAEf,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,eAAe,CAAC;IACjE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK,wGAyBhB,CAAC"}

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

@@ -0,0 +1,25 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+export type BadgeShape = "status" | "tag" | "count";
+/**
+ * How much ink the badge spends.
+ * - `outline` — the tone as a 2px stroke on the surface. The quiet default.
+ * - `soft` — the tone's soft fill behind tone-coloured text. For dense tables.
+ * - `solid` — the tone as a full fill. Reserve it for the one state a row is
+ *   really about; a table of solid badges reads as noise.
+ */
+export type BadgeAppearance = "outline" | "soft" | "solid";
+/** Six publication states, and no seventh without a decision record. */
+export type StatusTone = "draft" | "scheduled" | "published" | "changed" | "unpublished" | "archived";
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    shape?: BadgeShape;
+    /** Required on `status`, forbidden on `tag` and `count`. */
+    tone?: StatusTone;
+    appearance?: BadgeAppearance;
+    children?: ReactNode;
+}
+/**
+ * A small, non-interactive label attached to something else. Never a button,
+ * never a filter. Status tones are reserved for publication state.
+ */
+export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAC;AAEpD;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAE3D,wEAAwE;AACxE,MAAM,MAAM,UAAU,GAClB,OAAO,GACP,WAAW,GACX,WAAW,GACX,SAAS,GACT,aAAa,GACb,UAAU,CAAC;AAEf,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,eAAe,CAAC;IACjE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK,wGAyBhB,CAAC"}

package/dist/components/Badge/index.js

@@ -0,0 +1,28 @@
+import { forwardRef as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/Badge/index.tsx
+var r = e(function({ shape: e = "tag", tone: r, appearance: i = "outline", className: a, children: o, ...s }, c) {
+	if (e === "count") {
+		let e = Number(o);
+		if (!Number.isNaN(e)) {
+			if (e === 0) return null;
+			o = e > 99 ? "99+" : String(e);
+		}
+	}
+	return /* @__PURE__ */ n("span", {
+		ref: c,
+		"data-shape": e,
+		"data-appearance": i,
+		"data-tone": e === "status" ? r : void 0,
+		className: ["ds-badge", a].filter(Boolean).join(" "),
+		...s,
+		children: [e === "status" && /* @__PURE__ */ t("span", {
+			className: "ds-badge__dot",
+			"aria-hidden": "true"
+		}), o]
+	});
+});
+//#endregion
+export { r as Badge };
+
+//# sourceMappingURL=index.js.map

package/dist/components/Badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Badge","forwardRef","rest","shape","value","children","appearance","tone","className"],"sources":["../../../src/components/Badge/index.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport \"./style.css\";\n\nexport type BadgeShape = \"status\" | \"tag\" | \"count\";\n\n/**\n * How much ink the badge spends.\n * - `outline` — the tone as a 2px stroke on the surface. The quiet default.\n * - `soft` — the tone's soft fill behind tone-coloured text. For dense tables.\n * - `solid` — the tone as a full fill. Reserve it for the one state a row is\n *   really about; a table of solid badges reads as noise.\n */\nexport type BadgeAppearance = \"outline\" | \"soft\" | \"solid\";\n\n/** Six publication states, and no seventh without a decision record. */\nexport type StatusTone =\n  | \"draft\"\n  | \"scheduled\"\n  | \"published\"\n  | \"changed\"\n  | \"unpublished\"\n  | \"archived\";\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  shape?: BadgeShape;\n  /** Required on `status`, forbidden on `tag` and `count`. */\n  tone?: StatusTone;\n  appearance?: BadgeAppearance;\n  children?: ReactNode;\n}\n\n/**\n * A small, non-interactive label attached to something else. Never a button,\n * never a filter. Status tones are reserved for publication state.\n */\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  { shape = \"tag\", tone, appearance = \"outline\", className, children, ...rest },\n  ref,\n) {\n  if (shape === \"count\") {\n    const value = Number(children);\n    if (!Number.isNaN(value)) {\n      if (value === 0) return null;\n      children = value > 99 ? \"99+\" : String(value);\n    }\n  }\n\n  return (\n    <span\n      ref={ref}\n      data-shape={shape}\n      data-appearance={appearance}\n      data-tone={shape === \"status\" ? tone : undefined}\n      className={[\"ds-badge\", className].filter(Boolean).join(\" \")}\n      {...rest}\n    >\n      {shape === \"status\" && <span className=\"ds-badge__dot\" aria-hidden=\"true\" />}\n      {children}\n    </span>\n  );\n});\n"],"mappings":";;;AAmCA,IAAaA,IAAQC,EAAwC,SAC3D,EAAE,WAAQ,OAAO,SAAM,gBAAa,WAAW,cAAW,aAAU,GAAGC,KACvE,GACA;CACA,IAAIC,MAAU,SAAS;EACrB,IAAMC,IAAQ,OAAOC,CAAQ;EAC7B,IAAI,CAAC,OAAO,MAAMD,CAAK,GAAG;GACxB,IAAIA,MAAU,GAAG,OAAO;GACxB,IAAWA,IAAQ,KAAK,QAAQ,OAAOA,CAAK;EAC9C;CACF;CAEA,OACE,kBAAC,QAAD;EACO;EACL,cAAYD;EACZ,mBAAiBG;EACjB,aAAWH,MAAU,WAAWI,IAAO,KAAA;EACvC,WAAW,CAAC,YAAYC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAC3D,GAAIN;EANN,UAAA,CAQGC,MAAU,YAAY,kBAAC,QAAD;GAAM,WAAU;GAAgB,eAAY;EAAQ,CAAA,GAC1EE,CACG;;AAEV,CAAC"}

package/dist/components/Badge/style.css

@@ -0,0 +1,103 @@
+@layer components {
+  .ds-badge {
+    /* Three inks per badge: the stroke/text tone, the soft fill it sits on,
+     * and the solid pair. A tone sets all four; appearance picks which two
+     * are used. Nothing else in the component knows a colour. */
+    --badge-ink: var(--color-text-muted);
+    --badge-soft: var(--color-surface-subtle);
+    --badge-solid: var(--color-text);
+    --badge-on-solid: var(--color-surface);
+
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: 2px var(--space-2);
+    border: var(--badge-border-width) solid transparent;
+    border-radius: var(--radius-pill);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--line-height-tight);
+    white-space: nowrap;
+  }
+
+  .ds-badge[data-shape="status"] {
+    padding: 2px 10px;
+  }
+
+  /* A count reads as one glyph: never narrower than it is tall. */
+  .ds-badge[data-shape="count"] {
+    justify-content: center;
+    min-inline-size: var(--space-6);
+    padding-inline: var(--space-2);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* ── Appearances ─────────────────────────────────────────────────────── */
+  .ds-badge[data-appearance="outline"] {
+    background: transparent;
+    border-color: var(--badge-ink);
+    color: var(--badge-ink);
+  }
+
+  .ds-badge[data-appearance="soft"] {
+    background: var(--badge-soft);
+    border-color: color-mix(in srgb, var(--badge-ink) 30%, transparent);
+    color: var(--badge-ink);
+  }
+
+  .ds-badge[data-appearance="solid"] {
+    background: var(--badge-solid);
+    border-color: var(--badge-solid);
+    color: var(--badge-on-solid);
+  }
+
+  .ds-badge__dot {
+    inline-size: var(--space-2);
+    block-size: var(--space-2);
+    border-radius: var(--radius-pill);
+    background: currentColor;
+  }
+
+  /* ── Publication tones ───────────────────────────────────────────────── */
+  .ds-badge[data-tone="draft"] {
+    --badge-ink: var(--status-draft-text);
+    --badge-soft: var(--status-draft-soft);
+    --badge-solid: var(--color-text-muted);
+    --badge-on-solid: var(--color-surface);
+  }
+
+  .ds-badge[data-tone="scheduled"] {
+    --badge-ink: var(--status-scheduled);
+    --badge-soft: var(--status-scheduled-soft);
+    --badge-solid: var(--color-primary);
+    --badge-on-solid: var(--color-text-on-solid);
+  }
+
+  .ds-badge[data-tone="published"] {
+    --badge-ink: var(--status-published);
+    --badge-soft: var(--status-published-soft);
+    --badge-solid: var(--color-success);
+    --badge-on-solid: var(--color-text-on-solid);
+  }
+
+  .ds-badge[data-tone="changed"] {
+    --badge-ink: var(--status-changed);
+    --badge-soft: var(--status-changed-soft);
+    --badge-solid: var(--color-warning);
+    --badge-on-solid: var(--color-text-on-solid);
+  }
+
+  .ds-badge[data-tone="unpublished"] {
+    --badge-ink: var(--status-unpublished);
+    --badge-soft: var(--status-unpublished-soft);
+    --badge-solid: var(--color-danger);
+    --badge-on-solid: var(--color-text-on-solid);
+  }
+
+  .ds-badge[data-tone="archived"] {
+    --badge-ink: var(--status-archived-text);
+    --badge-soft: var(--color-surface-subtle);
+    --badge-solid: var(--color-border-strong);
+    --badge-on-solid: var(--color-text);
+  }
+}

package/dist/components/Board/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs");let t=require("react"),n=require("react/jsx-runtime"),r=require("@dnd-kit/core"),i=require("@dnd-kit/sortable"),a=require("@dnd-kit/utilities");var o=(e,t)=>{let{currentCoordinates:n,context:r}=t;if(e.code===`ArrowLeft`||e.code===`ArrowRight`){let t=r.droppableContainers.getEnabled().filter(e=>e.data.current?.type===`column-body`).sort((e,t)=>(e.rect.current?.left??0)-(t.rect.current?.left??0)),i=r.active?.rect.current.translated;if(!i)return;let a=t[t.findIndex(e=>(e.rect.current?.left??0)<=i.left+1&&(e.rect.current?.right??0)>=i.left-1)+(e.code===`ArrowRight`?1:-1)]?.rect.current;return a?(e.preventDefault(),{x:a.left+a.width/2-i.width/2,y:n.y}):void 0}return(0,i.sortableKeyboardCoordinates)(e,t)},s=e=>{let t=e.active.data.current?.type===`column`,n=e.droppableContainers.filter(e=>{let n=e.data.current?.type;return t?n===`column`:n!==`column`}),i={...e,droppableContainers:n};if(t)return(0,r.closestCorners)(i);let a=(0,r.pointerWithin)(i);if(a.length>0){let e=e=>n.find(t=>t.id===e)?.data.current?.type===`card`?0:1;return[...a].sort((t,n)=>e(t.id)-e(n.id))}return(0,r.closestCorners)(i)},c=(0,t.createContext)({activeId:null,activeType:null,overColumnId:null}),l=(0,t.forwardRef)(function({columnIds:a,onMove:l,onColumnMove:u,renderDragOverlay:d,renderColumnDragOverlay:f,className:p,children:m,...h},g){let _=(0,t.useId)(),[v,y]=(0,t.useState)(null),[b,x]=(0,t.useState)(null),[S,C]=(0,t.useState)(null),w=(0,r.useSensors)((0,r.useSensor)(r.PointerSensor,{activationConstraint:{distance:4}}),(0,r.useSensor)(r.KeyboardSensor,{coordinateGetter:o})),T=(0,t.useCallback)(e=>{y(String(e.active.id)),x(e.active.data.current?.type===`column`?`column`:`card`)},[]),E=(0,t.useCallback)(e=>{let t=e.over;if(!t){C(null);return}let n=t.data.current??{},r=n.type===`column`?String(t.id):String(n.columnId??``);C(r||null)},[]),D=(0,t.useCallback)(()=>{y(null),x(null),C(null)},[]),O=(0,t.useCallback)(e=>{let{active:t,over:n}=e;if(D(),!n)return;let r=t.data.current??{},i=n.data.current??{};if(r.type===`column`){let e=a??[],r=i.type===`column`?String(n.id):String(i.columnId??``),o=e.indexOf(r);if(o<0||r===String(t.id))return;u?.({columnId:String(t.id),toIndex:o});return}let o=String(r.columnId??``),s=``,c=0;i.type===`card`?(s=String(i.columnId??``),c=i.sortable?.index??0):(s=String(i.columnId??n.id),c=(i.items??[]).length),s&&(o!==s||String(t.id)!==String(n.id))&&l?.({cardId:String(t.id),fromColumnId:o,toColumnId:s,toIndex:c})},[a,u,l,D]),k=(0,t.useMemo)(()=>({activeId:v,activeType:b,overColumnId:S}),[v,b,S]),A=(0,n.jsx)(`div`,{ref:g,className:[`ds-board`,p].filter(Boolean).join(` `),...h,children:m});return(0,n.jsx)(c.Provider,{value:k,children:(0,n.jsxs)(r.DndContext,{id:`ds-board-${_}`,sensors:w,collisionDetection:s,measuring:{droppable:{strategy:r.MeasuringStrategy.Always}},onDragStart:T,onDragOver:E,onDragEnd:O,onDragCancel:D,children:[a?(0,n.jsx)(i.SortableContext,{items:a,strategy:i.horizontalListSortingStrategy,children:A}):A,(0,n.jsxs)(r.DragOverlay,{children:[v&&b===`card`?(0,n.jsxs)(`div`,{className:`ds-board-card`,"data-overlay":!0,children:[(0,n.jsx)(`span`,{className:`ds-board-card__handle`,"aria-hidden":`true`,children:(0,n.jsx)(e.t,{name:`grip-vertical`})}),(0,n.jsx)(`div`,{className:`ds-board-card__content`,children:d?.(v)})]}):null,v&&b===`column`?(0,n.jsx)(`div`,{className:`ds-board-column`,"data-overlay":!0,children:f?.(v)}):null]})]})})}),u=(0,t.forwardRef)(function({id:o,title:s,itemIds:l,count:u,action:d,isDraggable:f=!0,className:p,children:m,...h},g){let{activeType:_,overColumnId:v}=(0,t.useContext)(c),{setNodeRef:y}=(0,r.useDroppable)({id:`${o}::body`,data:{type:`column-body`,columnId:o,items:l}}),{attributes:b,listeners:x,setNodeRef:S,transform:C,transition:w,isDragging:T}=(0,i.useSortable)({id:o,disabled:!f,data:{type:`column`,columnId:o,items:l}});return(0,n.jsxs)(`section`,{ref:e=>{S(e),typeof g==`function`?g(e):g&&(g.current=e)},style:{transform:a.CSS.Translate.toString(C),transition:w},className:[`ds-board-column`,p].filter(Boolean).join(` `),"data-over":_===`card`&&v===o||void 0,"data-dragging":T||void 0,"aria-label":s,...h,children:[f&&(0,n.jsx)(`button`,{type:`button`,className:`ds-board-column__grip`,"aria-label":`Reorder ${s}`,...b,...x,children:(0,n.jsx)(e.t,{name:`grip-horizontal`})}),(0,n.jsxs)(`header`,{className:`ds-board-column__head`,children:[(0,n.jsx)(`span`,{className:`ds-board-column__title`,children:s}),(0,n.jsx)(`span`,{className:`ds-board-column__count`,children:u??l.length}),d&&(0,n.jsx)(`span`,{className:`ds-board-column__action`,children:d})]}),(0,n.jsx)(`div`,{ref:y,className:`ds-board-column__body`,children:(0,n.jsx)(i.SortableContext,{items:l,strategy:i.verticalListSortingStrategy,children:m})})]})}),d=(0,t.forwardRef)(function({id:r,columnId:o,label:s,className:l,children:u,...d},f){let{attributes:p,listeners:m,setNodeRef:h,transform:g,transition:_,isDragging:v}=(0,i.useSortable)({id:r,data:{type:`card`,columnId:o}}),{activeId:y}=(0,t.useContext)(c);return(0,n.jsxs)(`div`,{ref:e=>{h(e),typeof f==`function`?f(e):f&&(f.current=e)},style:{transform:a.CSS.Translate.toString(g),transition:_},className:[`ds-board-card`,l].filter(Boolean).join(` `),"data-dragging":v||void 0,"data-idle":y&&y!==r?``:void 0,...d,children:[(0,n.jsx)(`button`,{type:`button`,className:`ds-board-card__handle`,"aria-label":s?`Move ${s}`:`Move card`,...p,...m,children:(0,n.jsx)(e.t,{name:`grip-vertical`})}),(0,n.jsx)(`div`,{className:`ds-board-card__content`,children:u})]})});exports.Board=l,exports.BoardCard=d,exports.BoardColumn=u;
+//# sourceMappingURL=index.cjs.map