@alfadocs/ui-kit 0.16.0 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alfadocs/ui-kit",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "type": "module",
   "description": "AlfaDocs shared design system — tokens, components, patterns, and translations for platform, booking, and alfascribe.",
   "license": "BUSL-1.1",
@@ -155,6 +155,10 @@
       "types": "./dist/components/contact-card/index.d.ts",
       "import": "./dist/components/contact-card/index.js"
     },
+    "./copy-field": {
+      "types": "./dist/components/copy-field/index.d.ts",
+      "import": "./dist/components/copy-field/index.js"
+    },
     "./data-table": {
       "types": "./dist/components/data-table/index.d.ts",
       "import": "./dist/components/data-table/index.js"

package/dist/_chunks/benefit-card-Czs0oXdi.js

@@ -1,161 +0,0 @@
-import { jsx as r, jsxs as g } from "react/jsx-runtime";
-import { forwardRef as u, useContext as k, Children as y, createContext as w } from "react";
-import { c as l } from "./index-D2ZczOXr.js";
-const b = [
-  "violet",
-  "purple",
-  "magenta",
-  "blue",
-  "green",
-  "red"
-], m = w(null), C = l("ds:grid ds:grid-cols-1 ds:gap-[var(--spacing-lg)]", {
-  variants: {
-    columns: {
-      1: "ds:md:grid-cols-1",
-      2: "ds:md:grid-cols-2",
-      3: "ds:md:grid-cols-3",
-      4: "ds:md:grid-cols-4"
-    }
-  },
-  defaultVariants: { columns: 3 }
-}), N = l(
-  [
-    "ds:relative ds:rounded-[var(--radius-lg)] ds:overflow-hidden",
-    "ds:flex ds:flex-col ds:h-full",
-    "ds:bg-[var(--card)] ds:text-[var(--card-foreground)]",
-    // Hover lift — the transform is gated through `motion-safe:` so users
-    // with `prefers-reduced-motion: reduce` see only the shadow change.
-    // `--animation-duration` is pinned to 0ms in the accessible theme,
-    // which collapses the transition without dropping the rule entirely.
-    "ds:transition-[transform,box-shadow] ds:duration-[var(--animation-duration)]",
-    "ds:motion-reduce:transition-none",
-    "ds:hover:shadow-[var(--shadow-hover)]",
-    "ds:motion-safe:hover:-translate-y-0.5"
-  ].join(" "),
-  {
-    variants: {
-      variant: {
-        elevated: "ds:shadow-[var(--shadow-card)]",
-        outlined: "ds:border ds:border-[color:var(--border)]"
-      },
-      // 4px accent strip via the logical `border-block-start` shorthand.
-      // Tailwind v4 doesn't ship per-side logical-border utilities, so the
-      // bracketed CSS shorthand is the kit's idiom (mirrors patterns at
-      // `src/patterns/operator-profile/operator-profile.tsx`).
-      accent: {
-        primary: "ds:[border-block-start:4px_solid_var(--primary)]",
-        accent: "ds:[border-block-start:4px_solid_var(--accent)]",
-        info: "ds:[border-block-start:4px_solid_var(--info)]",
-        success: "ds:[border-block-start:4px_solid_var(--success)]",
-        warning: "ds:[border-block-start:4px_solid_var(--warning)]",
-        violet: "ds:[border-block-start:4px_solid_var(--color-violet-500)]",
-        purple: "ds:[border-block-start:4px_solid_var(--color-purple-500)]",
-        magenta: "ds:[border-block-start:4px_solid_var(--color-magenta-500)]",
-        blue: "ds:[border-block-start:4px_solid_var(--color-blue-500)]",
-        green: "ds:[border-block-start:4px_solid_var(--color-green-500)]",
-        red: "ds:[border-block-start:4px_solid_var(--color-red-500)]"
-      }
-    },
-    defaultVariants: { variant: "elevated", accent: "primary" }
-  }
-), j = l(
-  [
-    "ds:inline-flex ds:items-center ds:justify-center",
-    "ds:size-12 ds:rounded-[var(--radius-md)] ds:shrink-0",
-    "ds:[&>svg]:size-6"
-  ].join(" "),
-  {
-    variants: {
-      accent: {
-        primary: "ds:text-[color:var(--primary)] ds:bg-[color-mix(in_srgb,var(--primary)_12%,var(--background))]",
-        accent: "ds:text-[color:var(--accent)] ds:bg-[color-mix(in_srgb,var(--accent)_12%,var(--background))]",
-        info: "ds:text-[color:var(--info)] ds:bg-[color-mix(in_srgb,var(--info)_12%,var(--background))]",
-        success: "ds:text-[color:var(--success)] ds:bg-[color-mix(in_srgb,var(--success)_12%,var(--background))]",
-        warning: "ds:text-[color:var(--warning)] ds:bg-[color-mix(in_srgb,var(--warning)_12%,var(--background))]",
-        violet: "ds:text-[color:var(--color-violet-500)] ds:bg-[color-mix(in_srgb,var(--color-violet-500)_12%,var(--background))]",
-        purple: "ds:text-[color:var(--color-purple-500)] ds:bg-[color-mix(in_srgb,var(--color-purple-500)_12%,var(--background))]",
-        magenta: "ds:text-[color:var(--color-magenta-500)] ds:bg-[color-mix(in_srgb,var(--color-magenta-500)_12%,var(--background))]",
-        blue: "ds:text-[color:var(--color-blue-500)] ds:bg-[color-mix(in_srgb,var(--color-blue-500)_12%,var(--background))]",
-        green: "ds:text-[color:var(--color-green-500)] ds:bg-[color-mix(in_srgb,var(--color-green-500)_12%,var(--background))]",
-        red: "ds:text-[color:var(--color-red-500)] ds:bg-[color-mix(in_srgb,var(--color-red-500)_12%,var(--background))]"
-      }
-    },
-    defaultVariants: { accent: "primary" }
-  }
-);
-function B(o, a) {
-  return o !== "auto" ? o : a ? b[a.index % b.length] : "primary";
-}
-const p = u(
-  ({ columns: o = 3, children: a, className: t, ...s }, n) => {
-    const c = y.toArray(a);
-    return /* @__PURE__ */ r(
-      "div",
-      {
-        ref: n,
-        "data-component": "benefit-card-row",
-        className: C({ columns: o, className: t }),
-        ...s,
-        children: c.map((e, d) => /* @__PURE__ */ r(m.Provider, { value: { index: d }, children: e }, d))
-      }
-    );
-  }
-);
-p.displayName = "BenefitCard.Row";
-const x = u(
-  ({
-    step: o,
-    icon: a,
-    title: t,
-    cta: s,
-    variant: n = "elevated",
-    accent: c = "auto",
-    children: e,
-    className: d,
-    ..._
-  }, f) => {
-    const h = k(m), i = B(c, h), v = typeof o == "number";
-    return /* @__PURE__ */ r(
-      "article",
-      {
-        ref: f,
-        "data-component": "benefit-card",
-        "data-accent": i,
-        className: N({ variant: n, accent: i, className: d }),
-        ..._,
-        children: /* @__PURE__ */ g("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)] ds:p-[var(--spacing-lg)] ds:flex-1", children: [
-          (a || v) && /* @__PURE__ */ g("div", { className: "ds:flex ds:items-start ds:justify-between ds:gap-[var(--spacing-sm)]", children: [
-            a ? /* @__PURE__ */ r(
-              "span",
-              {
-                "aria-hidden": "true",
-                className: j({ accent: i }),
-                children: a
-              }
-            ) : /* @__PURE__ */ r("span", { "aria-hidden": "true" }),
-            v ? /* @__PURE__ */ r(
-              "span",
-              {
-                "aria-hidden": "true",
-                "data-part": "step",
-                className: "type-eyebrow ds:rounded-[var(--radius-full)] ds:bg-[var(--muted)] ds:text-[var(--muted-foreground)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:py-[var(--spacing-xs)]",
-                children: String(o).padStart(2, "0")
-              }
-            ) : null
-          ] }),
-          /* @__PURE__ */ r("h3", { className: "type-title-card ds:text-[var(--foreground)]", children: t }),
-          e ? /* @__PURE__ */ r("div", { className: "type-body ds:text-[var(--muted-foreground)] ds:flex-1", children: e }) : null,
-          s ? /* @__PURE__ */ r("div", { className: "ds:mt-[var(--spacing-xs)]", children: s }) : null
-        ] })
-      }
-    );
-  }
-);
-x.displayName = "BenefitCard";
-const E = Object.assign(x, {
-  Row: p
-});
-export {
-  E as B
-};
-//# sourceMappingURL=benefit-card-Czs0oXdi.js.map

package/dist/_chunks/public-header.agent-ZLBAQ30j.js

@@ -1,242 +0,0 @@
-import { jsxs as g, jsx as s } from "react/jsx-runtime";
-import { forwardRef as P, useId as Y, useState as b, useCallback as N, useImperativeHandle as q, useEffect as j, useRef as L } from "react";
-import { c as C } from "./index-D2ZczOXr.js";
-import { useTranslation as S } from "react-i18next";
-import { I as D } from "./icon-button-C4CGcYuz.js";
-import { S as c } from "./sheet-BT0izeoI.js";
-import { X as F } from "./x-CCcI3eJp.js";
-import { M as W } from "./menu-XRhW3_99.js";
-const X = C(
-  [
-    "ds:flex ds:items-center ds:gap-[var(--spacing-md)]",
-    "ds:w-full ds:z-[var(--z-sticky)]",
-    "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)] ds:sm:ps-[var(--spacing-lg)] ds:sm:pe-[var(--spacing-lg)]",
-    "ds:h-14 ds:md:h-16",
-    "ds:transition-[background-color,box-shadow,transform] ds:duration-[var(--animation-duration)]",
-    "ds:motion-reduce:transition-none"
-  ].join(" "),
-  {
-    variants: {
-      variant: {
-        default: "ds:bg-[var(--card)] ds:text-[var(--foreground)] ds:border-b ds:border-[color:var(--border)]",
-        // Transparent fades to default once data-stuck="true" (set by the
-        // rAF scroll listener). The fade is handled via the same
-        // background utility so `data-stuck` swaps cleanly between states.
-        transparent: [
-          "ds:bg-transparent ds:text-[var(--foreground)]",
-          "ds:data-[stuck=true]:bg-[var(--card)]",
-          "ds:data-[stuck=true]:shadow-[var(--shadow-md)]",
-          "ds:forced-colors:border-b ds:forced-colors:border-[CanvasText]"
-        ].join(" "),
-        // `dark` flips its own scope into the dark token set so nav
-        // links + buttons inside read off-white text on the blue-800
-        // surface. Without the `theme-dark` scope the children inherit
-        // the light-theme `--foreground` (blue-500) and fail
-        // color-contrast at ~1.3:1.
-        dark: "theme-dark ds:bg-[var(--color-blue-800)] ds:text-[var(--foreground)]"
-      },
-      sticky: {
-        none: "",
-        top: "ds:sticky ds:top-0",
-        // `scroll-up` is sticky but translates off-screen when scrolling
-        // down past `stickyOffset` (handled by data-hidden="true") and
-        // slides back in when scrolling up.
-        "scroll-up": [
-          "ds:sticky ds:top-0",
-          "ds:data-[hidden=true]:-translate-y-full"
-        ].join(" ")
-      }
-    },
-    defaultVariants: { variant: "default", sticky: "none" }
-  }
-), $ = C(
-  [
-    "ds:inline-flex ds:items-center",
-    "ds:type-body-sm ds:font-medium",
-    "ds:text-[var(--foreground)]",
-    "ds:rounded-[var(--radius-sm)]",
-    "ds:ps-[var(--spacing-xs)] ds:pe-[var(--spacing-xs)] ds:py-[var(--spacing-2xs)]",
-    "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
-    "ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
-    "ds:hover:text-[var(--primary)]",
-    "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
-    "ds:data-[active=true]:text-[var(--primary)]",
-    "ds:data-[active=true]:[box-shadow:inset_0_-2px_0_var(--primary)]"
-  ].join(" ")
-);
-function G() {
-  const [e, d] = b(() => typeof window > "u" || !window.matchMedia ? !1 : window.matchMedia("(prefers-reduced-motion: reduce)").matches);
-  return j(() => {
-    if (typeof window > "u" || !window.matchMedia) return;
-    const r = window.matchMedia("(prefers-reduced-motion: reduce)"), n = () => d(r.matches);
-    return r.addEventListener("change", n), () => r.removeEventListener("change", n);
-  }, []), e;
-}
-function J(e, d, r) {
-  const [n, a] = b(!1), [p, o] = b(!1), l = L(0), u = L(!1);
-  return j(() => {
-    if (!e || typeof window > "u") return;
-    l.current = window.scrollY;
-    const f = () => {
-      const t = window.scrollY;
-      if (a(t > r), d === "scroll-up") {
-        const v = t - l.current;
-        v > 4 && t > r ? o(!0) : (v < -4 || t <= r) && o(!1);
-      }
-      l.current = t, u.current = !1;
-    }, m = () => {
-      u.current || (u.current = !0, window.requestAnimationFrame(f));
-    };
-    return window.addEventListener("scroll", m, { passive: !0 }), f(), () => {
-      window.removeEventListener("scroll", m);
-    };
-  }, [e, d, r]), { stuck: n, hidden: p };
-}
-const I = P(
-  ({
-    logo: e,
-    homeHref: d = "/",
-    homeLabel: r,
-    navSlot: n,
-    actionsSlot: a,
-    variant: p = "default",
-    sticky: o = "none",
-    stickyOffset: l = 80,
-    menuLabel: u,
-    navLabel: f,
-    id: m,
-    className: t,
-    ...v
-  }, E) => {
-    const { t: h } = S(), y = G(), O = Y(), H = `${m ?? O}-sheet`, [i, w] = b(!1), _ = p === "transparent" || o === "scroll-up", { stuck: z, hidden: T } = J(
-      _,
-      o,
-      l
-    ), A = y ? !1 : T, k = N(() => w(!0), []), M = N(() => w(!1), []);
-    q(
-      E,
-      () => ({
-        openMenu: k,
-        closeMenu: M,
-        getMenuOpen: () => i
-      }),
-      [k, M, i]
-    );
-    const B = r ?? h("publicHeader.homeLabel", "AlfaDocs — home"), x = f ?? h("publicHeader.primaryNavLabel", "Primary"), V = u ?? (i ? h("publicHeader.closeMenu", "Close menu") : h("publicHeader.openMenu", "Open menu"));
-    return /* @__PURE__ */ g(
-      "header",
-      {
-        ...v,
-        "data-component": "public-header",
-        "data-component-id": m,
-        "data-stuck": z ? "true" : void 0,
-        "data-hidden": A ? "true" : void 0,
-        "data-state": y ? "reduced-motion" : void 0,
-        className: X({ variant: p, sticky: o, className: t }),
-        children: [
-          /* @__PURE__ */ s(
-            "a",
-            {
-              href: d,
-              "aria-label": B,
-              className: "ds:inline-flex ds:items-center ds:rounded-[var(--radius-sm)] ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
-              children: e
-            }
-          ),
-          n ? /* @__PURE__ */ s(
-            "nav",
-            {
-              "aria-label": x,
-              className: "ds:hidden ds:md:flex ds:items-center ds:gap-[var(--spacing-md)] ds:ms-[var(--spacing-lg)]",
-              children: n
-            }
-          ) : null,
-          a ? /* @__PURE__ */ s("div", { className: "ds:hidden ds:md:flex ds:items-center ds:gap-[var(--spacing-sm)] ds:ms-auto", children: a }) : null,
-          /* @__PURE__ */ g(c, { open: i, onOpenChange: w, children: [
-            /* @__PURE__ */ s(c.Trigger, { asChild: !0, children: /* @__PURE__ */ s(
-              D,
-              {
-                size: "md",
-                intent: "ghost",
-                className: "ds:ms-auto ds:md:hidden",
-                icon: i ? /* @__PURE__ */ s(F, { "aria-hidden": "true" }) : /* @__PURE__ */ s(W, { "aria-hidden": "true" }),
-                "aria-controls": H,
-                "aria-expanded": i,
-                "aria-label": V
-              }
-            ) }),
-            /* @__PURE__ */ g(c.Content, { side: "end", size: "md", id: H, children: [
-              /* @__PURE__ */ s(c.Header, { children: /* @__PURE__ */ s(c.Title, { children: x }) }),
-              /* @__PURE__ */ s(c.Body, { children: /* @__PURE__ */ g("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]", children: [
-                n ? /* @__PURE__ */ s(
-                  "nav",
-                  {
-                    "aria-label": x,
-                    className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]",
-                    children: n
-                  }
-                ) : null,
-                a ? /* @__PURE__ */ s("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:mt-[var(--spacing-md)]", children: a }) : null
-              ] }) })
-            ] })
-          ] })
-        ]
-      }
-    );
-  }
-);
-I.displayName = "PublicHeader";
-const R = P(({ active: e, className: d, children: r, ...n }, a) => /* @__PURE__ */ s(
-  "a",
-  {
-    ref: a,
-    ...n,
-    "data-active": e ? "true" : void 0,
-    "aria-current": e ? "page" : void 0,
-    className: [$(), d].filter(Boolean).join(" "),
-    children: r
-  }
-));
-R.displayName = "PublicHeader.NavLink";
-const de = Object.assign(I, {
-  NavLink: R
-}), ae = {
-  id: "public-header",
-  capabilities: ["open", "close"],
-  state: {
-    menuOpen: {
-      type: "boolean",
-      description: "Whether the mobile drawer is currently open.",
-      read: (e) => e.getMenuOpen()
-    }
-  },
-  actions: {
-    open_menu: {
-      safety: "read",
-      description: "Open the mobile drawer.",
-      invoke: (e) => {
-        e.openMenu();
-      }
-    },
-    close_menu: {
-      safety: "read",
-      description: "Close the mobile drawer.",
-      invoke: (e) => {
-        e.closeMenu();
-      }
-    }
-  },
-  domHooks: {
-    root: { attr: "data-component", value: "public-header" },
-    instanceId: {
-      attr: "data-component-id",
-      sourceProp: "id",
-      description: "Sourced from the id prop on PublicHeader."
-    }
-  }
-};
-export {
-  de as P,
-  ae as p
-};
-//# sourceMappingURL=public-header.agent-ZLBAQ30j.js.map