@krizaka/ui 3.45.0 → 3.48.0

package/dist/account-settings.js

@@ -0,0 +1,354 @@
+import {
+  CheckGlyph
+} from "./chunk-3D2YI63L.js";
+import {
+  defineRecipe
+} from "./chunk-2VNYHG4E.js";
+import {
+  Avatar,
+  defaultAvatarUrl
+} from "./chunk-3RVFD3UX.js";
+import {
+  cn,
+  twMergeConfig
+} from "./chunk-S6NYGOJT.js";
+
+// src/badge/badge.tsx
+import { tv } from "tailwind-variants";
+
+// src/badge/recipe.ts
+var badgeRecipe = defineRecipe({
+  base: "inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-sm font-semibold ",
+  variants: {
+    tone: {
+      neutral: "bg-surface-3 text-fg-secondary",
+      accent: "bg-accent-soft text-fg ring-1 ring-inset ring-accent/40 [&>[data-dot]]:bg-accent",
+      success: "bg-success/15 text-fg ring-1 ring-inset ring-success/40 [&>[data-dot]]:bg-success",
+      warning: "bg-warning/15 text-fg ring-1 ring-inset ring-warning/40 [&>[data-dot]]:bg-warning",
+      danger: "bg-danger/15 text-fg ring-1 ring-inset ring-danger/40 [&>[data-dot]]:bg-danger",
+      /** On a media: veil and text invariant, identical in both themes. */
+      scrim: "bg-scrim text-fg-on-media backdrop-blur-md"
+    },
+    size: { sm: "px-2 py-0.5 text-[10px]", md: "px-2.5 py-1 text-[11px]" },
+    pulse: { true: "[&>[data-dot]]:motion-safe:animate-pulse" }
+  },
+  defaultVariants: { tone: "neutral", size: "sm" }
+});
+
+// src/badge/badge.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var badgeVariants = tv(badgeRecipe);
+function Badge({ tone, size, pulse, dot, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs("span", { "data-tone": tone ?? "neutral", className: badgeVariants({ tone, size, pulse, className }), ...props, children: [
+    dot && /* @__PURE__ */ jsx("span", { "data-dot": "", "aria-hidden": true, className: "h-1.5 w-1.5 rounded-full bg-current" }),
+    children
+  ] });
+}
+
+// src/account-settings/account-profile-card.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function AccountProfileCard({ name, email, verified, verifiedLabel, unverifiedLabel, memberSince, avatar, action, compact, className, ...props }) {
+  return /* @__PURE__ */ jsxs2("section", { "aria-label": name, className: cn("flex items-center gap-3", !compact && "flex-col items-start gap-4 sm:flex-row sm:gap-5", className), ...props, children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex shrink-0 flex-col items-center gap-2", children: [
+      /* @__PURE__ */ jsx2(Avatar, { size: compact ? "md" : "xl", alt: "", fallback: name.slice(0, 1), ...avatar }),
+      action
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-col gap-1", children: [
+      /* @__PURE__ */ jsx2("h2", { className: cn("m-0 truncate font-bold text-fg", compact ? "text-sm font-medium" : "text-lg"), children: name }),
+      /* @__PURE__ */ jsxs2("p", { className: "m-0 flex flex-wrap items-center gap-2 text-sm text-fg-secondary", children: [
+        /* @__PURE__ */ jsx2("span", { className: "min-w-0 truncate", children: email }),
+        /* @__PURE__ */ jsx2(Badge, { tone: verified ? "success" : "warning", dot: true, children: verified ? verifiedLabel : unverifiedLabel })
+      ] }),
+      memberSince ? /* @__PURE__ */ jsx2("p", { className: "text-sm text-fg-secondary", children: memberSince }) : null
+    ] })
+  ] });
+}
+
+// src/account-settings/avatar-picker.tsx
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
+import * as React from "react";
+
+// src/account-settings/group-head.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function GroupHead({ id, label, description }) {
+  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-0.5", children: [
+    /* @__PURE__ */ jsx3("span", { id, className: "text-sm font-medium text-fg", children: label }),
+    description ? /* @__PURE__ */ jsx3("span", { className: "text-sm text-fg-secondary", children: description }) : null
+  ] });
+}
+
+// src/account-settings/avatar-picker.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var pictureOf = (option) => option.src ?? (option.defaultAvatar ? defaultAvatarUrl(option.defaultAvatar, { size: 256 }) : void 0);
+function AvatarPicker({ label, showLabel, description, dense, options, upload, className, ...props }) {
+  const id = React.useId();
+  const group = /* @__PURE__ */ jsxs4(RadioGroupPrimitive.Root, { "aria-label": label, "aria-labelledby": showLabel ? id : void 0, className: cn(dense ? "flex flex-wrap gap-2.5" : "grid grid-cols-[repeat(auto-fill,minmax(4.25rem,1fr))] gap-3", !showLabel && className), ...props, children: [
+    options.map((option) => /* @__PURE__ */ jsxs4(
+      RadioGroupPrimitive.Item,
+      {
+        value: option.id,
+        "aria-label": option.label,
+        className: cn(
+          "group/avatar relative shrink-0 rounded-full",
+          dense ? "h-12 w-12" : "aspect-square w-full",
+          " outline-none transition-shadow duration-200 motion-reduce:transition-none",
+          "ring-1 ring-border-default hover:ring-border-strong focus-visible:focus-ring data-[state=checked]:ring-2 data-[state=checked]:ring-accent"
+        ),
+        children: [
+          /* @__PURE__ */ jsx4("img", { src: pictureOf(option), alt: "", draggable: false, className: "h-full w-full rounded-full bg-surface-3 object-cover" }),
+          /* @__PURE__ */ jsx4(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "absolute -bottom-0.5 -right-0.5 hidden h-5 w-5 items-center justify-center rounded-full border-2 border-surface-1 bg-accent text-on-accent group-data-[state=checked]/avatar:inline-flex",
+              children: /* @__PURE__ */ jsx4(CheckGlyph, { className: "h-3 w-3" })
+            }
+          )
+        ]
+      },
+      option.id
+    )),
+    upload ? /* @__PURE__ */ jsx4("div", { className: "flex aspect-square w-full items-center justify-center", children: upload }) : null
+  ] });
+  if (!showLabel) return group;
+  return /* @__PURE__ */ jsxs4("div", { className: cn("flex flex-col gap-3", className), children: [
+    /* @__PURE__ */ jsx4(GroupHead, { id, label, description }),
+    group
+  ] });
+}
+
+// src/account-settings/choice-cards.tsx
+import * as React4 from "react";
+
+// src/radio-group/radio-group.tsx
+import { RadioGroup as RadioGroupPrimitive2 } from "radix-ui";
+
+// src/router/route-state.tsx
+import * as React2 from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var CHANGE = "kz-route-state";
+var browserAdapter = {
+  search: () => typeof window === "undefined" ? "" : window.location.search,
+  navigate: (search, { replace }) => {
+    const url = `${window.location.pathname}${search}${window.location.hash}`;
+    window.history[replace ? "replaceState" : "pushState"](window.history.state, "", url);
+    window.dispatchEvent(new Event(CHANGE));
+  },
+  subscribe: (onChange) => {
+    window.addEventListener("popstate", onChange);
+    window.addEventListener(CHANGE, onChange);
+    return () => {
+      window.removeEventListener("popstate", onChange);
+      window.removeEventListener(CHANGE, onChange);
+    };
+  }
+};
+var AdapterContext = React2.createContext(browserAdapter);
+function readRouteValue(search, key, { values, default: fallback }) {
+  const raw = new URLSearchParams(search).get(key);
+  if (raw === null) return fallback;
+  return !values || values.includes(raw) ? raw : fallback;
+}
+function writeRouteValue(search, key, value, fallback) {
+  const params = new URLSearchParams(search);
+  if (value === fallback) params.delete(key);
+  else params.set(key, value);
+  const text = params.toString();
+  return text ? `?${text}` : "";
+}
+function useRouteState(key, { values, default: fallback, history = "push" }) {
+  const adapter = React2.useContext(AdapterContext);
+  const search = React2.useSyncExternalStore(adapter.subscribe, adapter.search, () => "");
+  const value = key === void 0 ? fallback : readRouteValue(search, key, { values, default: fallback });
+  const set = React2.useCallback(
+    (next) => {
+      if (key === void 0) return;
+      adapter.navigate(writeRouteValue(adapter.search(), key, next, fallback), { replace: history === "replace" });
+    },
+    [adapter, key, fallback, history]
+  );
+  return [value, set];
+}
+function useRouteBinding(routeKey, routeValues, props) {
+  const initial = props.defaultValue ?? props.value ?? routeValues?.[0] ?? "";
+  const [value, set] = useRouteState(routeKey, { values: routeValues, default: initial });
+  if (routeKey === void 0) return props;
+  return {
+    ...props,
+    value,
+    defaultValue: void 0,
+    onValueChange: (next) => {
+      set(next);
+      props.onValueChange?.(next);
+    }
+  };
+}
+
+// src/sliding-indicator.ts
+import * as React3 from "react";
+var useIsoLayoutEffect = typeof window === "undefined" ? React3.useEffect : React3.useLayoutEffect;
+function useSlidingIndicator({ item, active, prefer, follow = false }) {
+  const ref = React3.useRef(null);
+  const place = React3.useCallback((target) => {
+    const list = ref.current;
+    if (!list) return;
+    if (!(target instanceof HTMLElement) || !list.contains(target)) {
+      list.removeAttribute("data-indicator");
+      return;
+    }
+    const a = target.getBoundingClientRect();
+    const b = list.getBoundingClientRect();
+    list.style.setProperty("--kz-ind-x", `${a.left - b.left + list.scrollLeft}px`);
+    list.style.setProperty("--kz-ind-y", `${a.top - b.top + list.scrollTop}px`);
+    list.style.setProperty("--kz-ind-w", `${a.width}px`);
+    list.style.setProperty("--kz-ind-h", `${a.height}px`);
+    list.setAttribute("data-indicator", "on");
+  }, []);
+  const rest = React3.useCallback(
+    () => {
+      const list = ref.current;
+      const hovered = follow ? list?.querySelector(`${item}:hover`) : null;
+      place((prefer ? list?.querySelector(prefer) : null) ?? hovered ?? list?.querySelector(active) ?? null);
+    },
+    [place, active, prefer, item, follow]
+  );
+  const follow_ = React3.useCallback((target) => {
+    const hit = target instanceof Element ? target.closest(item) : null;
+    if (hit && ref.current?.contains(hit)) place(hit);
+    else rest();
+  }, [item, place, rest]);
+  useIsoLayoutEffect(() => {
+    const list = ref.current;
+    if (!list) return;
+    rest();
+    const resize = new ResizeObserver(rest);
+    resize.observe(list);
+    const changes = new MutationObserver(rest);
+    changes.observe(list, { subtree: true, attributes: true, attributeFilter: ["data-state", "aria-current", "data-active"] });
+    return () => {
+      resize.disconnect();
+      changes.disconnect();
+    };
+  }, [rest]);
+  const handlers = follow ? {
+    onPointerOver: (e) => follow_(e.target),
+    onPointerLeave: rest,
+    onFocus: (e) => follow_(e.target),
+    onBlur: rest
+  } : {};
+  return { ref, handlers };
+}
+
+// src/tv.ts
+import { createTV } from "tailwind-variants";
+var tv2 = createTV({ twMergeConfig });
+
+// src/radio-group/radio-group.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var radioGroup = tv2({
+  slots: {
+    root: "grid gap-2 data-[orientation=horizontal]:flex data-[orientation=horizontal]:flex-wrap",
+    item: "peer inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-border-strong bg-surface-1 inset-shadow-well transition-colors focus-visible:outline-hidden focus-visible:focus-ring hover:border-accent disabled:cursor-not-allowed disabled:opacity-40 data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=checked]:shadow-glow aria-invalid:border-danger",
+    dot: "h-2 w-2 rounded-full bg-on-accent",
+    label: "flex cursor-pointer items-start gap-3 text-sm text-fg has-disabled:cursor-not-allowed has-disabled:opacity-70",
+    card: "group relative flex min-w-0 flex-col items-start gap-1 rounded-2xl border border-border-default bg-surface-1 bg-sheen p-4 pr-10 text-left text-sm text-fg inset-shadow-edge transition-[border-color,background-color,box-shadow,transform] duration-200 hover:border-border-strong active:scale-[0.99] motion-reduce:transition-none motion-reduce:active:scale-100 focus-visible:outline-hidden focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-40 aria-invalid:border-danger data-[state=checked]:border-accent data-[state=checked]:bg-accent-soft data-[state=checked]:shadow-glow",
+    // The card's check: an empty ring at rest, the accent filled with its check once chosen.
+    cardCheck: "absolute right-3.5 top-3.5 inline-flex h-5 w-5 items-center justify-center rounded-full border border-border-strong bg-surface-1 text-on-accent transition-colors group-data-[state=checked]:border-accent group-data-[state=checked]:bg-accent",
+    // The tactile key: on a ledge (its lower edge), its hairline stronger on hover, pressed in while held and once chosen.
+    button: "relative inline-flex min-h-12 min-w-12 select-none flex-col items-center justify-center gap-0.5 rounded-xl border border-border-default bg-surface-2 bg-sheen px-4 py-2 text-sm font-semibold text-fg inset-shadow-edge shadow-[0_4px_0_0_var(--kz-border-strong)] transition-[transform,box-shadow,background-color,border-color,color] duration-100 ease-out motion-reduce:transition-none hover:border-border-strong active:translate-y-[3px] active:shadow-[0_1px_0_0_var(--kz-border-strong)] focus-visible:outline-hidden focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-40 aria-invalid:border-danger data-[state=checked]:translate-y-[3px] data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=checked]:bg-fill-shade data-[state=checked]:text-on-accent data-[state=checked]:inset-shadow-edge-fill data-[state=checked]:shadow-[0_1px_0_0_var(--kz-accent-hover)]",
+    buttonHint: "text-[11px] font-medium text-fg-secondary group-data-[state=checked]:text-on-accent",
+    segmented: "relative isolate inline-grid auto-cols-fr grid-flow-col gap-1 rounded-xl border border-border-default bg-surface-2 p-1 inset-shadow-well before:pointer-events-none before:absolute before:left-0 before:top-0 before:-z-10 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) before:rounded-lg before:border before:border-border-default before:bg-surface-0 before:bg-sheen before:opacity-0 before:shadow-raised before:transition-[translate,width,height,opacity] before:duration-300 motion-reduce:before:transition-none data-[indicator=on]:before:opacity-100",
+    segment: "inline-flex min-h-9 select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-lg px-3.5 text-sm font-semibold text-fg-secondary transition-colors hover:text-fg focus-visible:outline-hidden focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-40 data-[state=checked]:border data-[state=checked]:border-border-default data-[state=checked]:bg-surface-0 data-[state=checked]:text-fg data-[state=checked]:shadow-raised group-data-[indicator=on]/seg:data-[state=checked]:border-transparent group-data-[indicator=on]/seg:data-[state=checked]:bg-transparent group-data-[indicator=on]/seg:data-[state=checked]:shadow-none"
+  },
+  variants: {
+    variant: {
+      list: {},
+      cards: { root: "grid-cols-[repeat(auto-fit,minmax(10rem,1fr))] gap-3" },
+      buttons: { root: "flex flex-wrap gap-2.5 pb-1" },
+      segmented: {}
+    }
+  },
+  defaultVariants: { variant: "list" }
+});
+var s = radioGroup();
+function RadioGroupRoot({ label, invalid, variant = "list", className, routeKey, routeValues, ...rest }) {
+  const props = useRouteBinding(routeKey, routeValues, rest);
+  const { ref } = useSlidingIndicator({ item: "[role=radio]", active: "[role=radio][data-state=checked]" });
+  const segmented = variant === "segmented";
+  return /* @__PURE__ */ jsx6(
+    RadioGroupPrimitive2.Root,
+    {
+      ref: segmented ? ref : void 0,
+      "aria-label": label,
+      "aria-invalid": invalid || void 0,
+      "data-invalid": invalid ? "" : void 0,
+      "data-variant": variant,
+      orientation: segmented ? "horizontal" : props.orientation,
+      className: segmented ? s.segmented({ className: ["group/seg", className].filter(Boolean).join(" ") }) : radioGroup({ variant }).root({ className }),
+      ...props
+    }
+  );
+}
+function RadioGroupItem({ className, children, ...props }) {
+  const item = /* @__PURE__ */ jsx6(RadioGroupPrimitive2.Item, { className: s.item({ className: children ? "mt-0.5" : className }), ...props, children: /* @__PURE__ */ jsx6(RadioGroupPrimitive2.Indicator, { className: s.dot() }) });
+  if (!children) return item;
+  return /* @__PURE__ */ jsxs5("label", { className: s.label({ className }), children: [
+    item,
+    /* @__PURE__ */ jsx6("span", { className: "min-w-0", children })
+  ] });
+}
+function RadioGroupCard({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxs5(RadioGroupPrimitive2.Item, { className: s.card({ className }), ...props, children: [
+    children,
+    /* @__PURE__ */ jsx6("span", { "aria-hidden": true, className: s.cardCheck(), children: /* @__PURE__ */ jsx6(RadioGroupPrimitive2.Indicator, { forceMount: true, className: "inline-flex data-[state=unchecked]:hidden", children: /* @__PURE__ */ jsx6(CheckGlyph, { className: "h-3 w-3" }) }) })
+  ] });
+}
+function RadioGroupButton({ className, children, hint, ...props }) {
+  return /* @__PURE__ */ jsxs5(RadioGroupPrimitive2.Item, { className: s.button({ className: ["group", className].filter(Boolean).join(" ") }), ...props, children: [
+    /* @__PURE__ */ jsx6("span", { children }),
+    hint ? /* @__PURE__ */ jsx6("span", { className: s.buttonHint(), children: hint }) : null
+  ] });
+}
+function RadioGroupSegment({ className, ...props }) {
+  return /* @__PURE__ */ jsx6(RadioGroupPrimitive2.Item, { className: s.segment({ className }), ...props });
+}
+var RadioGroup = { Root: RadioGroupRoot, Item: RadioGroupItem, Card: RadioGroupCard, Button: RadioGroupButton, Segment: RadioGroupSegment };
+
+// src/account-settings/choice-cards.tsx
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function ChoiceCards({ label, showLabel, description, options, className, ...props }) {
+  const base = React4.useId();
+  const group = /* @__PURE__ */ jsx7(RadioGroup.Root, { variant: "cards", label, "aria-labelledby": showLabel ? `${base}-label` : void 0, className: ["grid grid-cols-1 gap-3 sm:grid-cols-2", !showLabel && className].filter(Boolean).join(" "), ...props, children: options.map((option) => {
+    const describedBy = option.description ? `${base}-${option.id}` : void 0;
+    return /* @__PURE__ */ jsxs6(RadioGroup.Card, { value: option.id, disabled: option.disabled, "aria-describedby": describedBy, children: [
+      /* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-2.5 font-semibold text-fg [&>svg]:h-5 [&>svg]:w-5 [&>svg]:text-accent", children: [
+        option.icon,
+        option.title
+      ] }),
+      option.description ? /* @__PURE__ */ jsx7("span", { id: describedBy, className: "text-sm font-normal text-fg-secondary", children: option.description }) : null
+    ] }, option.id);
+  }) });
+  if (!showLabel) return group;
+  return /* @__PURE__ */ jsxs6("div", { className: ["flex flex-col gap-3", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx7(GroupHead, { id: `${base}-label`, label, description }),
+    group
+  ] });
+}
+
+// src/account-settings/language-picker.tsx
+import * as React5 from "react";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function LanguagePicker({ label, showLabel = true, description, languages, className, ...props }) {
+  const id = React5.useId();
+  return /* @__PURE__ */ jsxs7("div", { className: ["flex flex-col gap-2", className].filter(Boolean).join(" "), children: [
+    showLabel ? /* @__PURE__ */ jsx8(GroupHead, { id: `${id}-label`, label, description }) : null,
+    /* @__PURE__ */ jsx8(RadioGroup.Root, { variant: "segmented", "aria-label": showLabel ? void 0 : String(label), "aria-labelledby": showLabel ? `${id}-label` : void 0, ...props, children: languages.map((language) => /* @__PURE__ */ jsx8(RadioGroup.Segment, { value: language.code, lang: language.code, children: language.name }, language.code)) })
+  ] });
+}
+export {
+  AccountProfileCard,
+  AvatarPicker,
+  ChoiceCards,
+  LanguagePicker
+};
+//# sourceMappingURL=account-settings.js.map

package/dist/account-settings.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/badge/badge.tsx","../src/badge/recipe.ts","../src/account-settings/account-profile-card.tsx","../src/account-settings/avatar-picker.tsx","../src/account-settings/group-head.tsx","../src/account-settings/choice-cards.tsx","../src/radio-group/radio-group.tsx","../src/router/route-state.tsx","../src/sliding-indicator.ts","../src/tv.ts","../src/account-settings/language-picker.tsx"],"sourcesContent":["// Server-safe: no hook, no context.\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { badgeRecipe } from \"./recipe\";\n\n// Status tones are soft (a tint, a coloured dot, a text role): the invariant status tokens are too light to carry\n// small text on a light surface, or to sit under white text (WCAG AA).\nexport const badgeVariants = tv(badgeRecipe);\n\nexport type BadgeVariants = VariantProps<typeof badgeVariants>;\n\nexport type BadgeProps = React.ComponentProps<\"span\"> &\n  BadgeVariants & {\n    /**\n     * neutral · accent · success · warning · danger (soft tints, the text stays a text role) · scrim (on a media).\n     * @default \"neutral\"\n     */\n    tone?: BadgeVariants[\"tone\"];\n    /**\n     * sm · md.\n     * @default \"sm\"\n     */\n    size?: BadgeVariants[\"size\"];\n    /** Makes the `dot` pulse (stopped under reduced motion). */\n    pulse?: BadgeVariants[\"pulse\"];\n    /** A small dot before the text, in the tone's colour (pulsing with `pulse`). */\n    dot?: boolean;\n  };\n\nexport function Badge({ tone, size, pulse, dot, className, children, ...props }: BadgeProps) {\n  return (\n    <span data-tone={tone ?? \"neutral\"} className={badgeVariants({ tone, size, pulse, className })} {...props}>\n      {dot && <span data-dot=\"\" aria-hidden className=\"h-1.5 w-1.5 rounded-full bg-current\" />}\n      {children}\n    </span>\n  );\n}\n","// The badge's tones and sizes, written once as classes of the Krizaka tokens: the web wears them with `tv(badgeRecipe)`,\n// React Native reads the same classes into styles (native/badge.tsx). Status tones are soft (a tint, a coloured dot, a\n// text role): the invariant status tokens are too light to carry small text on a light surface, or to sit under white\n// text (WCAG AA).\nimport { defineRecipe } from \"../recipes/define\";\n\nexport const badgeRecipe = defineRecipe({\n  base: \"inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-sm font-semibold \",\n  variants: {\n    tone: {\n      neutral: \"bg-surface-3 text-fg-secondary\",\n      accent: \"bg-accent-soft text-fg ring-1 ring-inset ring-accent/40 [&>[data-dot]]:bg-accent\",\n      success: \"bg-success/15 text-fg ring-1 ring-inset ring-success/40 [&>[data-dot]]:bg-success\",\n      warning: \"bg-warning/15 text-fg ring-1 ring-inset ring-warning/40 [&>[data-dot]]:bg-warning\",\n      danger: \"bg-danger/15 text-fg ring-1 ring-inset ring-danger/40 [&>[data-dot]]:bg-danger\",\n      /** On a media: veil and text invariant, identical in both themes. */\n      scrim: \"bg-scrim text-fg-on-media backdrop-blur-md\",\n    },\n    size: { sm: \"px-2 py-0.5 text-[10px]\", md: \"px-2.5 py-1 text-[11px]\" },\n    pulse: { true: \"[&>[data-dot]]:motion-safe:animate-pulse\" },\n  },\n  defaultVariants: { tone: \"neutral\", size: \"sm\" },\n});\n","// Server-safe. Who the account is, at a glance: the picture with its change action, the name, the e-mail and whether it is\n// verified, since when. The head of a profile section.\nimport type * as React from \"react\";\n\nimport { Avatar, type AvatarProps } from \"../avatar/avatar\";\nimport { Badge } from \"../badge/badge\";\nimport { cn } from \"../cn\";\n\nexport type AccountProfileCardProps = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /** The name (the card's heading). */\n  name: string;\n  /** The e-mail address. */\n  email: string;\n  /** Whether the address is verified. */\n  verified: boolean;\n  /** “Verified” — passed translated. */\n  verifiedLabel: string;\n  /** “Not verified” — passed translated. */\n  unverifiedLabel: string;\n  /** “Member since October 2026” — formatted by the app, in the viewer's language. */\n  memberSince?: string;\n  /** The picture: the person's photo, or the default avatar of the brand. */\n  avatar?: Pick<AvatarProps, \"src\" | \"defaultAvatar\" | \"fallback\">;\n  /** Beside the picture: the change action (a `Button`). */\n  action?: React.ReactNode;\n  /**\n   * One calm line for a settings row: a medium picture beside the name and the e-mail, no wrapping.\n   * @default false\n   */\n  compact?: boolean;\n};\n\n/** The account's identity card: picture, name, verified e-mail, member since. */\nexport function AccountProfileCard({ name, email, verified, verifiedLabel, unverifiedLabel, memberSince, avatar, action, compact, className, ...props }: AccountProfileCardProps) {\n  return (\n    <section aria-label={name} className={cn(\"flex items-center gap-3\", !compact && \"flex-col items-start gap-4 sm:flex-row sm:gap-5\", className)} {...props}>\n      <div className=\"flex shrink-0 flex-col items-center gap-2\">\n        <Avatar size={compact ? \"md\" : \"xl\"} alt=\"\" fallback={name.slice(0, 1)} {...avatar} />\n        {action}\n      </div>\n      <div className=\"flex min-w-0 flex-col gap-1\">\n        <h2 className={cn(\"m-0 truncate font-bold text-fg\", compact ? \"text-sm font-medium\" : \"text-lg\")}>{name}</h2>\n        <p className=\"m-0 flex flex-wrap items-center gap-2 text-sm text-fg-secondary\">\n          <span className=\"min-w-0 truncate\">{email}</span>\n          <Badge tone={verified ? \"success\" : \"warning\"} dot>\n            {verified ? verifiedLabel : unverifiedLabel}\n          </Badge>\n        </p>\n        {memberSince ? <p className=\"text-sm text-fg-secondary\">{memberSince}</p> : null}\n      </div>\n    </section>\n  );\n}\n","// Client (a radio group). The pictures of a person to choose from — the family's default avatars, a few photos — as a grid of\n// round tiles: one named radiogroup, one tab stop, the arrows choose, a ring and a check on the chosen one.\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { type DefaultAvatar, defaultAvatarUrl } from \"../avatar/default-avatar\";\nimport { cn } from \"../cn\";\nimport { CheckGlyph } from \"../glyphs\";\nimport { GroupHead } from \"./group-head\";\n\nexport interface AvatarOption {\n  /** The value of the choice. */\n  id: string;\n  /** Its name for assistive technology (“Teinte 3”) — passed translated. */\n  label: string;\n  /** A picture's address; otherwise `defaultAvatar` draws one of the family's pictures. */\n  src?: string;\n  /** One of Krizaka's default pictures (`{ brand, tone }`). */\n  defaultAvatar?: DefaultAvatar;\n}\n\nexport type AvatarPickerProps = Omit<React.ComponentProps<typeof RadioGroupPrimitive.Root>, \"children\" | \"onChange\" | \"dir\"> & {\n  /** The group's accessible name (“Profile picture”) — passed translated. */\n  label: string;\n  /**\n   * Smaller tiles, for a settings row.\n   * @default false\n   */\n  dense?: boolean;\n  /** Shows the label above the grid, with `description` under it. */\n  showLabel?: boolean;\n  /** One line under the visible label: what it changes. */\n  description?: React.ReactNode;\n  /** The pictures. */\n  options: readonly AvatarOption[];\n  /** The chosen id (controlled). */\n  value?: string;\n  /** The viewer chooses another picture. */\n  onValueChange?: (id: string) => void;\n  /** After the pictures, in the grid: the upload action (a `Button`, a file input's label). Not a radio. */\n  upload?: React.ReactNode;\n};\n\nconst pictureOf = (option: AvatarOption) => option.src ?? (option.defaultAvatar ? defaultAvatarUrl(option.defaultAvatar, { size: 256 }) : undefined);\n\n/** A grid of pictures to choose from, with an upload beside them: a radio group, never a row of loose radios. */\nexport function AvatarPicker({ label, showLabel, description, dense, options, upload, className, ...props }: AvatarPickerProps) {\n  const id = React.useId();\n  const group = (\n    <RadioGroupPrimitive.Root aria-label={label} aria-labelledby={showLabel ? id : undefined} className={cn(dense ? \"flex flex-wrap gap-2.5\" : \"grid grid-cols-[repeat(auto-fill,minmax(4.25rem,1fr))] gap-3\", !showLabel && className)} {...props}>\n      {options.map((option) => (\n        <RadioGroupPrimitive.Item\n          key={option.id}\n          value={option.id}\n          aria-label={option.label}\n          className={cn(\n            \"group/avatar relative shrink-0 rounded-full\", dense ? \"h-12 w-12\" : \"aspect-square w-full\",\n            \" outline-none transition-shadow duration-200 motion-reduce:transition-none\",\n            \"ring-1 ring-border-default hover:ring-border-strong focus-visible:focus-ring data-[state=checked]:ring-2 data-[state=checked]:ring-accent\",\n          )}\n        >\n          <img src={pictureOf(option)} alt=\"\" draggable={false} className=\"h-full w-full rounded-full bg-surface-3 object-cover\" />\n          <span\n            aria-hidden\n            className=\"absolute -bottom-0.5 -right-0.5 hidden h-5 w-5 items-center justify-center rounded-full border-2 border-surface-1 bg-accent text-on-accent group-data-[state=checked]/avatar:inline-flex\"\n          >\n            <CheckGlyph className=\"h-3 w-3\" />\n          </span>\n        </RadioGroupPrimitive.Item>\n      ))}\n      {upload ? <div className=\"flex aspect-square w-full items-center justify-center\">{upload}</div> : null}\n    </RadioGroupPrimitive.Root>\n  );\n  if (!showLabel) return group;\n  return (\n    <div className={cn(\"flex flex-col gap-3\", className)}>\n      <GroupHead id={id} label={label} description={description} />\n      {group}\n    </div>\n  );\n}\n","import type * as React from \"react\";\n\n/** The visible label (and one line of help) of a radio group: the group's `aria-labelledby` points at it. */\nexport function GroupHead({ id, label, description }: { id: string; label: React.ReactNode; description?: React.ReactNode }) {\n  return (\n    <div className=\"flex flex-col gap-0.5\">\n      <span id={id} className=\"text-sm font-medium text-fg\">\n        {label}\n      </span>\n      {description ? <span className=\"text-sm text-fg-secondary\">{description}</span> : null}\n    </div>\n  );\n}\n","// Client (a radio group). A single choice as selectable cards — an icon, a title, one line: the side of a lease, a plan, a\n// way to get the answer. Built on `RadioGroup.Card`, so the arrows choose, the card is the radio, the check lights up.\nimport * as React from \"react\";\n\nimport { RadioGroup } from \"../radio-group\";\nimport { GroupHead } from \"./group-head\";\n\nexport interface ChoiceCardOption {\n  /** The value of the choice. */\n  id: string;\n  /** Its name, short. */\n  title: React.ReactNode;\n  /** One line under the title: what it means. It describes the radio. */\n  description?: React.ReactNode;\n  /** A glyph before the title (decorative). */\n  icon?: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport type ChoiceCardsProps = Omit<React.ComponentProps<typeof RadioGroup.Root>, \"children\" | \"variant\" | \"label\"> & {\n  /** The question (“Which side of the lease are you?”) — the group's accessible name, passed translated. */\n  label: string;\n  /** Shows the question above the cards, with `description` under it. */\n  showLabel?: boolean;\n  /** One line under the visible question. */\n  description?: React.ReactNode;\n  /** The choices. */\n  options: readonly ChoiceCardOption[];\n  /** The chosen id (controlled). */\n  value?: string;\n  /** The viewer chooses another card. */\n  onValueChange?: (id: string) => void;\n};\n\n/** Cards to choose one from: a radio group where each card has an icon, a title and a description. */\nexport function ChoiceCards({ label, showLabel, description, options, className, ...props }: ChoiceCardsProps) {\n  const base = React.useId();\n  const group = (\n    <RadioGroup.Root variant=\"cards\" label={label} aria-labelledby={showLabel ? `${base}-label` : undefined} className={[\"grid grid-cols-1 gap-3 sm:grid-cols-2\", !showLabel && className].filter(Boolean).join(\" \")} {...props}>\n      {options.map((option) => {\n        const describedBy = option.description ? `${base}-${option.id}` : undefined;\n        return (\n          <RadioGroup.Card key={option.id} value={option.id} disabled={option.disabled} aria-describedby={describedBy}>\n            <span className=\"flex items-center gap-2.5 font-semibold text-fg [&>svg]:h-5 [&>svg]:w-5 [&>svg]:text-accent\">\n              {option.icon}\n              {option.title}\n            </span>\n            {option.description ? (\n              <span id={describedBy} className=\"text-sm font-normal text-fg-secondary\">\n                {option.description}\n              </span>\n            ) : null}\n          </RadioGroup.Card>\n        );\n      })}\n    </RadioGroup.Root>\n  );\n  if (!showLabel) return group;\n  return (\n    <div className={[\"flex flex-col gap-3\", className].filter(Boolean).join(\" \")}>\n      <GroupHead id={`${base}-label`} label={label} description={description} />\n      {group}\n    </div>\n  );\n}\n","// Client (a context). Radix RadioGroup: role=\"radiogroup\" / \"radio\", one tab stop, the arrows move and select, a\n// hidden input inside a form. Four looks, one behaviour:\n// - `RadioGroup.Item`: a dot and its words (a settings list);\n// - `RadioGroup.Card`: a whole card is the radio — an amount, a pack, a plan — its check lit when chosen;\n// - `RadioGroup.Button`: a tactile key that presses in — raised on a ledge, sunk when chosen (a size, a tip, a level);\n// - `RadioGroup.Segment` in `<RadioGroup.Root variant=\"segmented\">`: a segmented control, one light gliding to the choice.\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { CheckGlyph } from \"../glyphs\";\nimport { useRouteBinding } from \"../router\";\nimport { useSlidingIndicator } from \"../sliding-indicator\";\nimport { tv } from \"../tv\";\n\nexport const radioGroup = tv({\n  slots: {\n    root: \"grid gap-2 data-[orientation=horizontal]:flex data-[orientation=horizontal]:flex-wrap\",\n    item:\n      \"peer inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-border-strong bg-surface-1 inset-shadow-well transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:focus-ring hover:border-accent disabled:cursor-not-allowed disabled:opacity-40 \" +\n      \"data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=checked]:shadow-glow aria-invalid:border-danger\",\n    dot: \"h-2 w-2 rounded-full bg-on-accent\",\n    label: \"flex cursor-pointer items-start gap-3 text-sm text-fg has-disabled:cursor-not-allowed has-disabled:opacity-70\",\n    card:\n      \"group relative flex min-w-0 flex-col items-start gap-1 rounded-2xl border border-border-default bg-surface-1 bg-sheen p-4 pr-10 text-left text-sm text-fg inset-shadow-edge \" +\n      \"transition-[border-color,background-color,box-shadow,transform] duration-200 hover:border-border-strong active:scale-[0.99] motion-reduce:transition-none motion-reduce:active:scale-100 \" +\n      \"focus-visible:outline-hidden focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-40 aria-invalid:border-danger \" +\n      \"data-[state=checked]:border-accent data-[state=checked]:bg-accent-soft data-[state=checked]:shadow-glow\",\n    // The card's check: an empty ring at rest, the accent filled with its check once chosen.\n    cardCheck:\n      \"absolute right-3.5 top-3.5 inline-flex h-5 w-5 items-center justify-center rounded-full border border-border-strong bg-surface-1 text-on-accent transition-colors \" +\n      \"group-data-[state=checked]:border-accent group-data-[state=checked]:bg-accent\",\n    // The tactile key: on a ledge (its lower edge), its hairline stronger on hover, pressed in while held and once chosen.\n    button:\n      \"relative inline-flex min-h-12 min-w-12 select-none flex-col items-center justify-center gap-0.5 rounded-xl border border-border-default bg-surface-2 bg-sheen px-4 py-2 \" +\n      \"text-sm font-semibold text-fg inset-shadow-edge shadow-[0_4px_0_0_var(--kz-border-strong)] \" +\n      \"transition-[transform,box-shadow,background-color,border-color,color] duration-100 ease-out motion-reduce:transition-none \" +\n      \"hover:border-border-strong \" +\n      \"active:translate-y-[3px] active:shadow-[0_1px_0_0_var(--kz-border-strong)] \" +\n      \"focus-visible:outline-hidden focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-40 aria-invalid:border-danger \" +\n      \"data-[state=checked]:translate-y-[3px] data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=checked]:bg-fill-shade \" +\n      \"data-[state=checked]:text-on-accent data-[state=checked]:inset-shadow-edge-fill data-[state=checked]:shadow-[0_1px_0_0_var(--kz-accent-hover)]\",\n    buttonHint: \"text-[11px] font-medium text-fg-secondary group-data-[state=checked]:text-on-accent\",\n    segmented:\n      \"relative isolate inline-grid auto-cols-fr grid-flow-col gap-1 rounded-xl border border-border-default bg-surface-2 p-1 inset-shadow-well \" +\n      \"before:pointer-events-none before:absolute before:left-0 before:top-0 before:-z-10 before:h-(--kz-ind-h) before:w-(--kz-ind-w) \" +\n      \"before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) before:rounded-lg before:border before:border-border-default before:bg-surface-0 before:bg-sheen \" +\n      \"before:opacity-0 before:shadow-raised before:transition-[translate,width,height,opacity] before:duration-300 motion-reduce:before:transition-none data-[indicator=on]:before:opacity-100\",\n    segment:\n      \"inline-flex min-h-9 select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-lg px-3.5 text-sm font-semibold text-fg-secondary transition-colors \" +\n      \"hover:text-fg focus-visible:outline-hidden focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-40 \" +\n      \"data-[state=checked]:border data-[state=checked]:border-border-default data-[state=checked]:bg-surface-0 data-[state=checked]:text-fg data-[state=checked]:shadow-raised \" +\n      \"group-data-[indicator=on]/seg:data-[state=checked]:border-transparent group-data-[indicator=on]/seg:data-[state=checked]:bg-transparent group-data-[indicator=on]/seg:data-[state=checked]:shadow-none\",\n  },\n  variants: {\n    variant: {\n      list: {},\n      cards: { root: \"grid-cols-[repeat(auto-fit,minmax(10rem,1fr))] gap-3\" },\n      buttons: { root: \"flex flex-wrap gap-2.5 pb-1\" },\n      segmented: {},\n    },\n  },\n  defaultVariants: { variant: \"list\" },\n});\nconst s = radioGroup();\n\nexport type RadioGroupRootProps = React.ComponentProps<typeof RadioGroupPrimitive.Root> & {\n  /** The group's accessible name — passed translated (or `aria-labelledby` a visible heading). */\n  label?: string;\n  /** Marks every radio invalid: aria-invalid (pair it with a `Field.Error`). */\n  invalid?: boolean;\n  /**\n   * The layout of the radios: `list` (dots), `cards` (a grid of `Card`s), `buttons` (a row of tactile `Button`s), or\n   * `segmented` (a track of `Segment`s, one light gliding to the choice).\n   * @default \"list\"\n   */\n  variant?: \"list\" | \"cards\" | \"buttons\" | \"segmented\";\n  /** Binds the choice to this search parameter of the URL (`?kind=…`): the URL is the state — for a view's selection (a segmented switch), not a form field. */\n  routeKey?: string;\n  /** The values the parameter may hold (the radios' `value`s); the first is the default unless `defaultValue` says otherwise. */\n  routeValues?: readonly string[];\n};\n\n/** `value`/`defaultValue` + `onValueChange`, `orientation`, `required`, `name` for a form, `variant` for the layout. */\nexport function RadioGroupRoot({ label, invalid, variant = \"list\", className, routeKey, routeValues, ...rest }: RadioGroupRootProps) {\n  const props = useRouteBinding(routeKey, routeValues, rest);\n  const { ref } = useSlidingIndicator<HTMLDivElement>({ item: \"[role=radio]\", active: \"[role=radio][data-state=checked]\" });\n  const segmented = variant === \"segmented\";\n  return (\n    <RadioGroupPrimitive.Root\n      ref={segmented ? ref : undefined}\n      aria-label={label}\n      aria-invalid={invalid || undefined}\n      data-invalid={invalid ? \"\" : undefined}\n      data-variant={variant}\n      orientation={segmented ? \"horizontal\" : props.orientation}\n      className={segmented ? s.segmented({ className: [\"group/seg\", className].filter(Boolean).join(\" \") }) : radioGroup({ variant }).root({ className })}\n      {...props}\n    />\n  );\n}\n\nexport type RadioGroupItemProps = Omit<React.ComponentProps<typeof RadioGroupPrimitive.Item>, \"children\"> & {\n  /** The words next to the dot, clickable. Otherwise name it with `Field.Label htmlFor` or `aria-label`. */\n  children?: React.ReactNode;\n};\n\n/** A radio: a dot, and its words when given. */\nexport function RadioGroupItem({ className, children, ...props }: RadioGroupItemProps) {\n  const item = (\n    <RadioGroupPrimitive.Item className={s.item({ className: children ? \"mt-0.5\" : className })} {...props}>\n      <RadioGroupPrimitive.Indicator className={s.dot()} />\n    </RadioGroupPrimitive.Item>\n  );\n  if (!children) return item;\n  return (\n    <label className={s.label({ className })}>\n      {item}\n      <span className=\"min-w-0\">{children}</span>\n    </label>\n  );\n}\n\n/** A whole card as the radio: its content is the radio's name; its check lights up when chosen. */\nexport function RadioGroupCard({ className, children, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item className={s.card({ className })} {...props}>\n      {children}\n      <span aria-hidden className={s.cardCheck()}>\n        <RadioGroupPrimitive.Indicator forceMount className=\"inline-flex data-[state=unchecked]:hidden\">\n          <CheckGlyph className=\"h-3 w-3\" />\n        </RadioGroupPrimitive.Indicator>\n      </span>\n    </RadioGroupPrimitive.Item>\n  );\n}\n\nexport type RadioGroupButtonProps = React.ComponentProps<typeof RadioGroupPrimitive.Item> & {\n  /** A second line under the words (\"+15 %\"), part of the radio's name. */\n  hint?: React.ReactNode;\n};\n\n/** A tactile key: raised on its ledge, pressed in while held and once chosen — sizes, a tip, a level. */\nexport function RadioGroupButton({ className, children, hint, ...props }: RadioGroupButtonProps) {\n  return (\n    <RadioGroupPrimitive.Item className={s.button({ className: [\"group\", className].filter(Boolean).join(\" \") })} {...props}>\n      <span>{children}</span>\n      {hint ? <span className={s.buttonHint()}>{hint}</span> : null}\n    </RadioGroupPrimitive.Item>\n  );\n}\n\n/** A segment of a `variant=\"segmented\"` group: equal widths, one light gliding to the choice. */\nexport function RadioGroupSegment({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return <RadioGroupPrimitive.Item className={s.segment({ className })} {...props} />;\n}\n\n/** `RadioGroup.Root/Item/Card/Button/Segment`. */\nexport const RadioGroup = { Root: RadioGroupRoot, Item: RadioGroupItem, Card: RadioGroupCard, Button: RadioGroupButton, Segment: RadioGroupSegment };\n","// Client. The URL is the state: a selection the user would want to share, reload or come back to (a tab, a type, a\n// filter) lives in a search parameter, never in `useState` (Oussama, 2026-10-22: « changer les tabs doit changer les routes »).\n// One primitive reads and writes it: `useRouteState`. The selection components take `routeKey` and bind to it.\nimport * as React from \"react\";\n\n/** How a router moves and reads the address: the browser's by default, your framework's through `RouteStateProvider`. */\nexport interface RouteAdapter {\n  /** The current query string, with or without `?` (`\"\"` on the server). */\n  search: () => string;\n  /** Go to `search` (`?type=bail`, or `\"\"`), keeping the path and the hash; `replace` keeps the history as it is. */\n  navigate: (search: string, options: { replace: boolean }) => void;\n  /** Calls `onChange` when the address changes under you (back, forward, another navigation); returns the unsubscribe. */\n  subscribe: (onChange: () => void) => () => void;\n}\n\nconst CHANGE = \"kz-route-state\";\n\n/** The History API: any web app (Vite, a static site). Next.js apps pass their router's adapter once, in the layout. */\nexport const browserAdapter: RouteAdapter = {\n  search: () => (typeof window === \"undefined\" ? \"\" : window.location.search),\n  navigate: (search, { replace }) => {\n    const url = `${window.location.pathname}${search}${window.location.hash}`;\n    window.history[replace ? \"replaceState\" : \"pushState\"](window.history.state, \"\", url);\n    window.dispatchEvent(new Event(CHANGE));\n  },\n  subscribe: (onChange) => {\n    window.addEventListener(\"popstate\", onChange);\n    window.addEventListener(CHANGE, onChange);\n    return () => {\n      window.removeEventListener(\"popstate\", onChange);\n      window.removeEventListener(CHANGE, onChange);\n    };\n  },\n};\n\nconst AdapterContext = React.createContext<RouteAdapter>(browserAdapter);\n\nexport interface RouteStateProviderProps {\n  /** How your router reads the query string, navigates and tells about changes. */\n  adapter: RouteAdapter;\n  children: React.ReactNode;\n}\n\n/** Gives `useRouteState` your router: `<RouteStateProvider adapter={nextAdapter}>` once, in the root layout. */\nexport function RouteStateProvider({ adapter, children }: RouteStateProviderProps) {\n  return <AdapterContext.Provider value={adapter}>{children}</AdapterContext.Provider>;\n}\n\nexport interface RouteStateOptions<V extends string> {\n  /** The values the parameter may hold, as a const list: anything else in the address reads as the default. Omit for free text. */\n  values?: readonly V[];\n  /** The value when the parameter is absent. It is never written to the address (a clean URL). */\n  default: V;\n  /** `push` (the default) keeps each change in the history, `replace` overwrites it: use `replace` for a filter typed or toggled in passing. */\n  history?: \"push\" | \"replace\";\n}\n\n/** The value a query string holds for `key`, checked against `values`. Pure: the hook and the tests share it. */\nexport function readRouteValue<V extends string>(search: string, key: string, { values, default: fallback }: Pick<RouteStateOptions<V>, \"values\" | \"default\">): V {\n  const raw = new URLSearchParams(search).get(key);\n  if (raw === null) return fallback;\n  return !values || (values as readonly string[]).includes(raw) ? (raw as V) : fallback;\n}\n\n/** The query string with `key` set to `value` (removed when it is the default); every other parameter is kept. Pure. */\nexport function writeRouteValue(search: string, key: string, value: string, fallback: string): string {\n  const params = new URLSearchParams(search);\n  if (value === fallback) params.delete(key);\n  else params.set(key, value);\n  const text = params.toString();\n  return text ? `?${text}` : \"\";\n}\n\n/**\n * A value kept in the URL's search parameter `key`: `const [type, setType] = useRouteState(\"type\", { values: TYPES, default: \"auto\" })`\n * with `const TYPES = [\"auto\", \"lease\", \"contract\", \"invoice\", \"other\"] as const`. The value is typed from the list, an\n * unknown one in the address reads as the default, the default is not written, other parameters are kept.\n * `key` undefined makes the hook inert (it returns the default) so a component can call it unconditionally.\n */\nexport function useRouteState<V extends string>(key: string | undefined, { values, default: fallback, history = \"push\" }: RouteStateOptions<V>): readonly [V, (next: V) => void] {\n  const adapter = React.useContext(AdapterContext);\n  const search = React.useSyncExternalStore(adapter.subscribe, adapter.search, () => \"\");\n  const value = key === undefined ? fallback : readRouteValue(search, key, { values, default: fallback });\n  const set = React.useCallback(\n    (next: V) => {\n      if (key === undefined) return;\n      adapter.navigate(writeRouteValue(adapter.search(), key, next, fallback), { replace: history === \"replace\" });\n    },\n    [adapter, key, fallback, history],\n  );\n  return [value, set] as const;\n}\n\n/** What a selection component spreads on its root: `value` and `onValueChange` bound to the URL when `routeKey` is set. */\nexport interface RouteBindable {\n  value?: string | null;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n}\n\n/** The props of a selection component bound to the URL (`routeKey`), or its own, unchanged, when there is no `routeKey`. */\nexport function useRouteBinding<P extends RouteBindable>(routeKey: string | undefined, routeValues: readonly string[] | undefined, props: P): P {\n  const initial = props.defaultValue ?? props.value ?? routeValues?.[0] ?? \"\";\n  const [value, set] = useRouteState<string>(routeKey, { values: routeValues, default: initial });\n  if (routeKey === undefined) return props;\n  return {\n    ...props,\n    value,\n    defaultValue: undefined,\n    onValueChange: (next: string) => {\n      set(next);\n      props.onValueChange?.(next);\n    },\n  };\n}\n","// The shared sliding indicator (NavBar, Tabs): one element that glides from item to item instead of each item lighting\n// up on its own. It writes the target's box as CSS variables on the list (`--kz-ind-x/y/w/h`) and `data-indicator=\"on\"`\n// — no re-render, no animation frame: the glide is a CSS transition (none under reduced motion). Before hydration the\n// items keep their own active style, so nothing flashes.\nimport * as React from \"react\";\n\nconst useIsoLayoutEffect = typeof window === \"undefined\" ? React.useEffect : React.useLayoutEffect;\n\n/**\n * `item`: the selector of an item; `active`: of the current one, where the light rests; `prefer`: an item that, when\n * present, holds the light before the current one (the NavBar's open menu); `follow`: the light follows the pointer\n * and the focus — over anything that is not an item (an open menu's panel) it goes back to rest.\n */\nexport function useSlidingIndicator<T extends HTMLElement>({ item, active, prefer, follow = false }: { item: string; active: string; prefer?: string; follow?: boolean }) {\n  const ref = React.useRef<T>(null);\n  const place = React.useCallback((target: Element | null) => {\n    const list = ref.current;\n    if (!list) return;\n    if (!(target instanceof HTMLElement) || !list.contains(target)) {\n      list.removeAttribute(\"data-indicator\");\n      return;\n    }\n    const a = target.getBoundingClientRect();\n    const b = list.getBoundingClientRect();\n    list.style.setProperty(\"--kz-ind-x\", `${a.left - b.left + list.scrollLeft}px`);\n    list.style.setProperty(\"--kz-ind-y\", `${a.top - b.top + list.scrollTop}px`);\n    list.style.setProperty(\"--kz-ind-w\", `${a.width}px`);\n    list.style.setProperty(\"--kz-ind-h\", `${a.height}px`);\n    list.setAttribute(\"data-indicator\", \"on\");\n  }, []);\n  const rest = React.useCallback(\n    () => {\n      const list = ref.current;\n      // An item re-rendered under a resting pointer (a menu closing) keeps the light the pointer gave it.\n      const hovered = follow ? list?.querySelector(`${item}:hover`) : null;\n      place((prefer ? list?.querySelector(prefer) : null) ?? hovered ?? list?.querySelector(active) ?? null);\n    },\n    [place, active, prefer, item, follow],\n  );\n  const follow_ = React.useCallback((target: EventTarget) => {\n    const hit = target instanceof Element ? target.closest(item) : null;\n    if (hit && ref.current?.contains(hit)) place(hit);\n    else rest();\n  }, [item, place, rest]);\n\n  useIsoLayoutEffect(() => {\n    const list = ref.current;\n    if (!list) return;\n    rest();\n    const resize = new ResizeObserver(rest);\n    resize.observe(list);\n    const changes = new MutationObserver(rest);\n    changes.observe(list, { subtree: true, attributes: true, attributeFilter: [\"data-state\", \"aria-current\", \"data-active\"] });\n    return () => {\n      resize.disconnect();\n      changes.disconnect();\n    };\n  }, [rest]);\n\n  const handlers = follow\n    ? {\n        onPointerOver: (e: React.PointerEvent) => follow_(e.target),\n        onPointerLeave: rest,\n        onFocus: (e: React.FocusEvent) => follow_(e.target),\n        onBlur: rest,\n      }\n    : {};\n  return { ref, handlers };\n}\n","import { createTV } from \"tailwind-variants\";\n\nimport { twMergeConfig } from \"./cn\";\n\n/** `tv` with the preset's utilities known to the merge engine (`twMergeConfig`): what a primitive wearing the material is styled with. */\nexport const tv = createTV({ twMergeConfig });\n","// Client (a radio group). The language of the account, labelled, each language named in its own language, saved per user\n// (the caller saves on change or with its section). Segmented: one light gliding to the choice.\nimport * as React from \"react\";\n\nimport { RadioGroup } from \"../radio-group\";\nimport { GroupHead } from \"./group-head\";\n\nexport interface LanguageOption {\n  /** The BCP 47 code (`fr`, `en`): the value, and the `lang` of the name. */\n  code: string;\n  /** Its native name (`Français`, `English`) — never the current language's name for it. */\n  name: string;\n}\n\nexport type LanguagePickerProps = Omit<React.ComponentProps<typeof RadioGroup.Root>, \"children\" | \"variant\" | \"label\" | \"aria-labelledby\"> & {\n  /** The visible label (“Language”) — passed translated. */\n  label: React.ReactNode;\n  /**\n   * Shows the label above the control; `false` when a `SettingsRow` already says it (the group keeps its accessible name).\n   * @default true\n   */\n  showLabel?: boolean;\n  /** One line under it: what it changes. */\n  description?: React.ReactNode;\n  /** The languages offered. */\n  languages: readonly LanguageOption[];\n  /** The chosen code (controlled). */\n  value?: string;\n  /** The viewer chooses another language. */\n  onValueChange?: (code: string) => void;\n};\n\n/** The language control of an account page: a labelled segmented choice, native names. */\nexport function LanguagePicker({ label, showLabel = true, description, languages, className, ...props }: LanguagePickerProps) {\n  const id = React.useId();\n  return (\n    <div className={[\"flex flex-col gap-2\", className].filter(Boolean).join(\" \")}>\n      {showLabel ? <GroupHead id={`${id}-label`} label={label} description={description} /> : null}\n      <RadioGroup.Root variant=\"segmented\" aria-label={showLabel ? undefined : String(label)} aria-labelledby={showLabel ? `${id}-label` : undefined} {...props}>\n        {languages.map((language) => (\n          <RadioGroup.Segment key={language.code} value={language.code} lang={language.code}>\n            {language.name}\n          </RadioGroup.Segment>\n        ))}\n      </RadioGroup.Root>\n    </div>\n  );\n}\n"],"mappings":"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","names":["jsx","jsxs","jsx","jsxs","jsx","jsxs","React","RadioGroupPrimitive","React","jsx","React","tv","jsx","jsxs","tv","RadioGroupPrimitive","jsx","jsxs","React","jsx","jsxs"]}

package/dist/agenda.d.ts

@@ -0,0 +1,136 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const agenda: tailwind_variants.TVReturnType<{
+    past: {
+        true: {
+            times: string;
+            title: string;
+            marker: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    main: string;
+    times: string;
+    start: string;
+    end: string;
+    marker: string;
+    leading: string;
+    text: string;
+    title: string;
+    description: string;
+    status: string;
+    action: string;
+    now: string;
+    nowLine: string;
+    nowDot: string;
+    empty: string;
+}, undefined, {
+    past: {
+        true: {
+            times: string;
+            title: string;
+            marker: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    main: string;
+    times: string;
+    start: string;
+    end: string;
+    marker: string;
+    leading: string;
+    text: string;
+    title: string;
+    description: string;
+    status: string;
+    action: string;
+    now: string;
+    nowLine: string;
+    nowDot: string;
+    empty: string;
+}, tailwind_variants.TVReturnTypeLike<{
+    past: {
+        true: {
+            times: string;
+            title: string;
+            marker: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    main: string;
+    times: string;
+    start: string;
+    end: string;
+    marker: string;
+    leading: string;
+    text: string;
+    title: string;
+    description: string;
+    status: string;
+    action: string;
+    now: string;
+    nowLine: string;
+    nowDot: string;
+    empty: string;
+}>>;
+type AgendaTone = "neutral" | "accent" | "success" | "warning" | "danger" | "info";
+type AgendaItem = {
+    id: string;
+    /** ISO instant. */
+    start: string;
+    /** ISO instant; shown under the start and used to know which one is current. */
+    end?: string;
+    /** The client, the subject. */
+    title: React.ReactNode;
+    /** The service, the stylist: one muted line. */
+    description?: React.ReactNode;
+    /** The colour of the rail's dot; the status chip carries the word. */
+    tone?: AgendaTone;
+    /** Before the text: an `Avatar`. */
+    leading?: React.ReactNode;
+    /** After the text: a `Badge` with the status, in words. */
+    status?: React.ReactNode;
+    /** An address for the row (the app's URL state, `?appointment=…`); rendered with `linkAs`. */
+    href?: string;
+};
+type AgendaLabels = {
+    /** The « now » line: `(time) => "Now · 10:42"`. */
+    now: (time: string) => string;
+};
+declare const agendaLabels: AgendaLabels;
+type AgendaProps<T extends AgendaItem> = {
+    /** The day's appointments, in any order: the agenda sorts them by start. */
+    items: readonly T[];
+    /** The agenda's accessible name (« Appointments of Monday »). */
+    "aria-label": string;
+    /** The locale of the times. Default `en-US`. */
+    locale?: string;
+    /** The time zone of the shop, so the times read the same on the server and on the phone. */
+    timeZone?: string;
+    /** The instant of the « now » line; `null` or absent hides it (a day that is not today). */
+    now?: Date | null;
+    /** The open item: marked `aria-current`. */
+    selectedId?: string | null;
+    /** Called with the item pressed, for items with no `href`. */
+    onSelect?: (item: T) => void;
+    /** The router's link for items with an `href` (`next/link`). Default `a`. */
+    linkAs?: React.ElementType;
+    /** A small control after the row (Start, End), outside the row's link. */
+    action?: (item: T) => React.ReactNode;
+    /** The words, passed translated (the « now » line). */
+    labels?: Partial<AgendaLabels>;
+    /** Shown when there is no item (an `EmptyState`). */
+    empty?: React.ReactNode;
+    /** Classes merged on the list. */
+    className?: string;
+};
+declare function Agenda<T extends AgendaItem>({ items, locale, timeZone, now, selectedId, onSelect, linkAs, action, labels: given, empty, className, "aria-label": label }: AgendaProps<T>): React.JSX.Element | null;
+
+export { Agenda, type AgendaItem, type AgendaLabels, type AgendaProps, type AgendaTone, agenda, agendaLabels };