@krizaka/ui 3.2.0 → 3.4.0

package/dist/activity-feed.d.ts

@@ -0,0 +1,199 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+type ActivityTone = "neutral" | "accent" | "success" | "warning" | "danger" | "info";
+type ActivityEvent = {
+    /** A stable id. */
+    id: string;
+    /** When it happened: an ISO date-time, an epoch in ms or a `Date`. */
+    at: string | number | Date;
+    /** What happened, in a sentence — passed translated (“Mina tipped your video $5”). */
+    title: string;
+    /** A detail under it. */
+    description?: string;
+    /** Who did it (folds a run of the same `kind` by the same actor). */
+    actor?: string;
+    /** The kind of event (`tip`, `bid`, `job.done`): with `actor`, what folds. */
+    kind?: string;
+    /** The tone of its marker: success for a payout, danger for a failure. */
+    tone?: ActivityTone;
+};
+type ActivityGroup<T extends ActivityEvent> = {
+    /** The day's heading (“Today”, “Yesterday”, “Monday, Oct 6”). */
+    label: string;
+    /** Its events, newest first; a folded run is its newest event with `count` > 1. */
+    events: {
+        event: T;
+        count: number;
+    }[];
+};
+/** Groups events (any order) by day, newest first, folding runs of the same actor and kind when `fold` is set. */
+declare function groupActivity<T extends ActivityEvent>(events: readonly T[], { now, locale, today, yesterday, fold }?: {
+    now?: Date;
+    locale?: string;
+    today?: string;
+    yesterday?: string;
+    fold?: boolean;
+}): ActivityGroup<T>[];
+/** “2 minutes ago”, “yesterday”: how long ago, in the largest unit that reads well (`style` short: “2 min. ago”). */
+declare function timeAgo(at: string | number | Date, { now, locale, style }?: {
+    now?: Date;
+    locale?: string;
+    style?: "long" | "short" | "narrow";
+}): string;
+
+declare const activityFeed: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            group?: tailwind_variants.ClassValue;
+            heading?: tailwind_variants.ClassValue;
+            ol?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            marker?: tailwind_variants.ClassValue;
+            rail?: tailwind_variants.ClassValue;
+            body?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            count?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            time?: tailwind_variants.ClassValue;
+            leading?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            group?: tailwind_variants.ClassValue;
+            heading?: tailwind_variants.ClassValue;
+            ol?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            marker?: tailwind_variants.ClassValue;
+            rail?: tailwind_variants.ClassValue;
+            body?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            count?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            time?: tailwind_variants.ClassValue;
+            leading?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    group: string;
+    heading: string;
+    ol: string;
+    item: string;
+    marker: string;
+    rail: string;
+    body: string;
+    title: string;
+    count: string;
+    description: string;
+    time: string;
+    leading: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            group?: tailwind_variants.ClassValue;
+            heading?: tailwind_variants.ClassValue;
+            ol?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+            marker?: tailwind_variants.ClassValue;
+            rail?: tailwind_variants.ClassValue;
+            body?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            count?: tailwind_variants.ClassValue;
+            description?: tailwind_variants.ClassValue;
+            time?: tailwind_variants.ClassValue;
+            leading?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    group: string;
+    heading: string;
+    ol: string;
+    item: string;
+    marker: string;
+    rail: string;
+    body: string;
+    title: string;
+    count: string;
+    description: string;
+    time: string;
+    leading: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    group: string;
+    heading: string;
+    ol: string;
+    item: string;
+    marker: string;
+    rail: string;
+    body: string;
+    title: string;
+    count: string;
+    description: string;
+    time: string;
+    leading: string;
+}>>;
+type ActivityFeedLabels = {
+    /** The heading of today's events. */
+    today: string;
+    /** The heading of yesterday's. */
+    yesterday: string;
+    /** A folded run: `(n) => "×" + n` (“3 times”). */
+    times: (count: number) => string;
+    /** Announced when new events arrive in a live feed: `(n) => n + " new events"`. */
+    newEvents: (count: number) => string;
+};
+declare const activityFeedLabels: ActivityFeedLabels;
+type ActivityFeedProps<T extends ActivityEvent> = {
+    /** The events, in any order. */
+    events: readonly T[];
+    /** The feed's accessible name (“Activity”). */
+    "aria-label": string;
+    /** The locale of the dates and the “… ago”. Default `en-US`. */
+    locale?: string;
+    /** Now, for the “… ago” and the day headings (pass it from the server for the same text on both sides). */
+    now?: Date;
+    /** Refresh the “… ago” every minute. Default true. */
+    ticking?: boolean;
+    /** Fold the runs of the same actor and kind. Default true. */
+    fold?: boolean;
+    /** Announce new events politely (a stream). */
+    live?: boolean;
+    /** Before an event's text: its actor's `Avatar`, an icon. */
+    leading?: (event: T) => React.ReactNode;
+    /** After an event's text: an action (Reply, View). */
+    action?: (event: T) => React.ReactNode;
+    /** The words, passed translated; English by default. */
+    labels?: Partial<ActivityFeedLabels>;
+    /** Shown when there is no event (an `EmptyState`). */
+    empty?: React.ReactNode;
+    /** Classes merged on the root. */
+    className?: string;
+};
+/**
+ * What happened, newest first: grouped by day, runs folded (“Mina tipped ×3”), “2 min ago” kept fresh, new events
+ * announced when `live`. Orazaka's job activity, Orochia's notifications, the console's audit log.
+ */
+declare function ActivityFeed<T extends ActivityEvent>({ events, "aria-label": label, locale, now: given, ticking, fold, live, leading, action, labels: words, empty, className }: ActivityFeedProps<T>): React.JSX.Element;
+type TimelineProps<T extends ActivityEvent> = {
+    /** One thing's events, oldest first (a job's run, a payout's life). */
+    events: readonly T[];
+    /** The timeline's accessible name (“History of the payout”). */
+    "aria-label": string;
+    /** The locale of the times. Default `en-US`. */
+    locale?: string;
+    /** How a time is written: `time` (14:02, default), `datetime`, `date`. */
+    timeStyle?: "time" | "datetime" | "date";
+    /** Classes merged on the list. */
+    className?: string;
+};
+/** One thing's history on a rail, oldest first: each event a marker in its tone, its time and its words. */
+declare function Timeline<T extends ActivityEvent>({ events, "aria-label": label, locale, timeStyle, className }: TimelineProps<T>): React.JSX.Element;
+
+export { type ActivityEvent, ActivityFeed, type ActivityFeedLabels, type ActivityFeedProps, type ActivityGroup, type ActivityTone, Timeline, type TimelineProps, activityFeed, activityFeedLabels, groupActivity, timeAgo };

package/dist/activity-feed.js

@@ -0,0 +1,155 @@
+"use client";
+
+// src/activity-feed/activity-feed.tsx
+import * as React from "react";
+import { tv } from "tailwind-variants";
+
+// src/activity-feed/group.ts
+var dayKey = (date) => `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
+function groupActivity(events, { now = /* @__PURE__ */ new Date(), locale = "en-US", today = "Today", yesterday = "Yesterday", fold = true } = {}) {
+  const sorted = [...events].sort((a, b) => new Date(b.at).getTime() - new Date(a.at).getTime());
+  const day = new Intl.DateTimeFormat(locale, { weekday: "long", month: "short", day: "numeric" });
+  const todayKey = dayKey(now);
+  const yesterdayKey = dayKey(new Date(now.getTime() - 864e5));
+  const groups = [];
+  let current = null;
+  let currentKey = "";
+  for (const event of sorted) {
+    const date = new Date(event.at);
+    const key = dayKey(date);
+    if (!current || key !== currentKey) {
+      currentKey = key;
+      current = { label: key === todayKey ? today : key === yesterdayKey ? yesterday : day.format(date), events: [] };
+      groups.push(current);
+    }
+    const last = current.events[current.events.length - 1];
+    if (fold && last && event.actor && event.kind && last.event.actor === event.actor && last.event.kind === event.kind) last.count += 1;
+    else current.events.push({ event, count: 1 });
+  }
+  return groups;
+}
+var UNITS = [
+  ["second", 60],
+  ["minute", 60],
+  ["hour", 24],
+  ["day", 7],
+  ["week", 4.35],
+  ["month", 12],
+  ["year", Number.POSITIVE_INFINITY]
+];
+function timeAgo(at, { now = /* @__PURE__ */ new Date(), locale = "en-US", style = "short" } = {}) {
+  let value = (new Date(at).getTime() - now.getTime()) / 1e3;
+  let unit = "second";
+  for (const [name, size] of UNITS) {
+    unit = name;
+    if (Math.abs(value) < size - 0.5) break;
+    value /= size;
+  }
+  return new Intl.RelativeTimeFormat(locale, { numeric: "auto", style }).format(Math.round(value) + 0, unit);
+}
+
+// src/activity-feed/activity-feed.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var activityFeed = tv({
+  slots: {
+    root: "flex flex-col gap-5",
+    group: "flex flex-col gap-1",
+    heading: "sticky top-0 z-10 bg-surface-0/90 py-1 text-xs font-semibold uppercase tracking-wider text-fg-secondary backdrop-blur-sm",
+    ol: "m-0 flex list-none flex-col p-0",
+    item: "relative flex gap-3 py-2.5",
+    marker: "relative mt-1 flex h-2.5 w-2.5 shrink-0 rounded-full bg-[var(--kz-af-tone)] ring-4 ring-surface-0",
+    rail: "absolute left-[4.5px] top-5 -bottom-1 w-px bg-border-default",
+    body: "flex min-w-0 flex-1 flex-col",
+    title: "text-sm text-fg",
+    count: "ml-1.5 inline-flex rounded-full bg-surface-3 px-1.5 text-xs font-semibold tabular-nums text-fg-secondary",
+    description: "text-xs text-fg-secondary",
+    time: "shrink-0 pt-0.5 text-xs tabular-nums text-fg-secondary",
+    leading: "shrink-0"
+  }
+});
+var TONE = {
+  neutral: "var(--kz-border-strong)",
+  accent: "var(--kz-accent)",
+  success: "var(--kz-success)",
+  warning: "var(--kz-warning)",
+  danger: "var(--kz-danger)",
+  info: "var(--kz-info)"
+};
+var activityFeedLabels = {
+  today: "Today",
+  yesterday: "Yesterday",
+  times: (count) => `\xD7${count}`,
+  newEvents: (count) => count === 1 ? "1 new event" : `${count} new events`
+};
+function useNow(initial, ticking) {
+  const [now, setNow] = React.useState(() => initial ?? /* @__PURE__ */ new Date());
+  React.useEffect(() => {
+    if (!ticking) return;
+    const timer = setInterval(() => setNow(/* @__PURE__ */ new Date()), 6e4);
+    return () => clearInterval(timer);
+  }, [ticking]);
+  return now;
+}
+function ActivityFeed({ events, "aria-label": label, locale = "en-US", now: given, ticking = true, fold = true, live, leading, action, labels: words, empty, className }) {
+  const labels = { ...activityFeedLabels, ...words };
+  const s = activityFeed();
+  const now = useNow(given, ticking && !given);
+  const groups = groupActivity(events, { now, locale, today: labels.today, yesterday: labels.yesterday, fold });
+  const seen = React.useRef(events.length);
+  const [announcement, setAnnouncement] = React.useState("");
+  React.useEffect(() => {
+    const added = events.length - seen.current;
+    seen.current = events.length;
+    if (!live || added <= 0) return;
+    const timer = setTimeout(() => setAnnouncement(labels.newEvents(added)), 0);
+    return () => clearTimeout(timer);
+  }, [events.length, live]);
+  return /* @__PURE__ */ jsxs("section", { "aria-label": label, className: s.root({ className }), children: [
+    live ? /* @__PURE__ */ jsx("p", { className: "sr-only", "aria-live": "polite", children: announcement }) : null,
+    groups.length === 0 && empty ? empty : null,
+    groups.map((group) => /* @__PURE__ */ jsxs("div", { className: s.group(), children: [
+      /* @__PURE__ */ jsx("h3", { className: s.heading(), children: group.label }),
+      /* @__PURE__ */ jsx("ol", { className: s.ol(), children: group.events.map(({ event, count }) => {
+        const date = new Date(event.at);
+        return /* @__PURE__ */ jsxs("li", { className: s.item(), style: { ["--kz-af-tone"]: TONE[event.tone ?? "neutral"] }, children: [
+          leading ? /* @__PURE__ */ jsx("span", { className: s.leading(), children: leading(event) }) : /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: s.marker() }),
+          /* @__PURE__ */ jsxs("span", { className: s.body(), children: [
+            /* @__PURE__ */ jsxs("span", { className: s.title(), children: [
+              event.title,
+              count > 1 ? /* @__PURE__ */ jsx("span", { className: s.count(), children: labels.times(count) }) : null
+            ] }),
+            event.description ? /* @__PURE__ */ jsx("span", { className: s.description(), children: event.description }) : null
+          ] }),
+          /* @__PURE__ */ jsx("time", { dateTime: date.toISOString(), title: date.toLocaleString(locale), className: s.time(), children: timeAgo(date, { now, locale }) }),
+          action ? /* @__PURE__ */ jsx("span", { className: "shrink-0", children: action(event) }) : null
+        ] }, event.id);
+      }) })
+    ] }, group.label))
+  ] });
+}
+function Timeline({ events, "aria-label": label, locale = "en-US", timeStyle = "time", className }) {
+  const s = activityFeed();
+  const options = timeStyle === "time" ? { hour: "2-digit", minute: "2-digit" } : timeStyle === "date" ? { dateStyle: "medium" } : { dateStyle: "medium", timeStyle: "short" };
+  const write = new Intl.DateTimeFormat(locale, options);
+  return /* @__PURE__ */ jsx("ol", { "aria-label": label, className: s.ol({ className }), children: events.map((event, i) => {
+    const date = new Date(event.at);
+    return /* @__PURE__ */ jsxs("li", { className: s.item(), style: { ["--kz-af-tone"]: TONE[event.tone ?? "neutral"] }, children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: s.marker() }),
+      i < events.length - 1 ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: s.rail() }) : null,
+      /* @__PURE__ */ jsxs("span", { className: s.body(), children: [
+        /* @__PURE__ */ jsx("span", { className: s.title(), children: event.title }),
+        event.description ? /* @__PURE__ */ jsx("span", { className: s.description(), children: event.description }) : null
+      ] }),
+      /* @__PURE__ */ jsx("time", { dateTime: date.toISOString(), className: s.time(), children: write.format(date) })
+    ] }, event.id);
+  }) });
+}
+export {
+  ActivityFeed,
+  Timeline,
+  activityFeed,
+  activityFeedLabels,
+  groupActivity,
+  timeAgo
+};
+//# sourceMappingURL=activity-feed.js.map

package/dist/activity-feed.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/activity-feed/activity-feed.tsx","../src/activity-feed/group.ts"],"sourcesContent":["// Client (the clock of “… ago”, the announcement of new events). What happened, newest first: an activity feed\n// grouped by day with folded runs and relative times, announced politely when it is live; and a `Timeline` — one\n// thing's history on a rail, oldest first. Words are props.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { type ActivityEvent, type ActivityTone, groupActivity, timeAgo } from \"./group\";\n\nexport const activityFeed = tv({\n  slots: {\n    root: \"flex flex-col gap-5\",\n    group: \"flex flex-col gap-1\",\n    heading: \"sticky top-0 z-10 bg-surface-0/90 py-1 text-xs font-semibold uppercase tracking-wider text-fg-secondary backdrop-blur-sm\",\n    ol: \"m-0 flex list-none flex-col p-0\",\n    item: \"relative flex gap-3 py-2.5\",\n    marker: \"relative mt-1 flex h-2.5 w-2.5 shrink-0 rounded-full bg-[var(--kz-af-tone)] ring-4 ring-surface-0\",\n    rail: \"absolute left-[4.5px] top-5 -bottom-1 w-px bg-border-default\",\n    body: \"flex min-w-0 flex-1 flex-col\",\n    title: \"text-sm text-fg\",\n    count: \"ml-1.5 inline-flex rounded-full bg-surface-3 px-1.5 text-xs font-semibold tabular-nums text-fg-secondary\",\n    description: \"text-xs text-fg-secondary\",\n    time: \"shrink-0 pt-0.5 text-xs tabular-nums text-fg-secondary\",\n    leading: \"shrink-0\",\n  },\n});\n\nconst TONE: Record<ActivityTone, string> = {\n  neutral: \"var(--kz-border-strong)\",\n  accent: \"var(--kz-accent)\",\n  success: \"var(--kz-success)\",\n  warning: \"var(--kz-warning)\",\n  danger: \"var(--kz-danger)\",\n  info: \"var(--kz-info)\",\n};\n\nexport type ActivityFeedLabels = {\n  /** The heading of today's events. */\n  today: string;\n  /** The heading of yesterday's. */\n  yesterday: string;\n  /** A folded run: `(n) => \"×\" + n` (“3 times”). */\n  times: (count: number) => string;\n  /** Announced when new events arrive in a live feed: `(n) => n + \" new events\"`. */\n  newEvents: (count: number) => string;\n};\n\nexport const activityFeedLabels: ActivityFeedLabels = {\n  today: \"Today\",\n  yesterday: \"Yesterday\",\n  times: (count) => `×${count}`,\n  newEvents: (count) => (count === 1 ? \"1 new event\" : `${count} new events`),\n};\n\nexport type ActivityFeedProps<T extends ActivityEvent> = {\n  /** The events, in any order. */\n  events: readonly T[];\n  /** The feed's accessible name (“Activity”). */\n  \"aria-label\": string;\n  /** The locale of the dates and the “… ago”. Default `en-US`. */\n  locale?: string;\n  /** Now, for the “… ago” and the day headings (pass it from the server for the same text on both sides). */\n  now?: Date;\n  /** Refresh the “… ago” every minute. Default true. */\n  ticking?: boolean;\n  /** Fold the runs of the same actor and kind. Default true. */\n  fold?: boolean;\n  /** Announce new events politely (a stream). */\n  live?: boolean;\n  /** Before an event's text: its actor's `Avatar`, an icon. */\n  leading?: (event: T) => React.ReactNode;\n  /** After an event's text: an action (Reply, View). */\n  action?: (event: T) => React.ReactNode;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<ActivityFeedLabels>;\n  /** Shown when there is no event (an `EmptyState`). */\n  empty?: React.ReactNode;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\nfunction useNow(initial: Date | undefined, ticking: boolean) {\n  const [now, setNow] = React.useState(() => initial ?? new Date());\n  React.useEffect(() => {\n    if (!ticking) return;\n    const timer = setInterval(() => setNow(new Date()), 60_000);\n    return () => clearInterval(timer);\n  }, [ticking]);\n  return now;\n}\n\n/**\n * What happened, newest first: grouped by day, runs folded (“Mina tipped ×3”), “2 min ago” kept fresh, new events\n * announced when `live`. Orazaka's job activity, Orochia's notifications, the console's audit log.\n */\nexport function ActivityFeed<T extends ActivityEvent>({ events, \"aria-label\": label, locale = \"en-US\", now: given, ticking = true, fold = true, live, leading, action, labels: words, empty, className }: ActivityFeedProps<T>) {\n  const labels = { ...activityFeedLabels, ...words };\n  const s = activityFeed();\n  const now = useNow(given, ticking && !given);\n  const groups = groupActivity(events, { now, locale, today: labels.today, yesterday: labels.yesterday, fold });\n  const seen = React.useRef(events.length);\n  const [announcement, setAnnouncement] = React.useState(\"\");\n  React.useEffect(() => {\n    const added = events.length - seen.current;\n    seen.current = events.length;\n    if (!live || added <= 0) return;\n    const timer = setTimeout(() => setAnnouncement(labels.newEvents(added)), 0);\n    return () => clearTimeout(timer);\n  }, [events.length, live]); // eslint-disable-line react-hooks/exhaustive-deps -- announce on a new count only\n  return (\n    <section aria-label={label} className={s.root({ className })}>\n      {live ? (\n        <p className=\"sr-only\" aria-live=\"polite\">\n          {announcement}\n        </p>\n      ) : null}\n      {groups.length === 0 && empty ? empty : null}\n      {groups.map((group) => (\n        <div key={group.label} className={s.group()}>\n          <h3 className={s.heading()}>{group.label}</h3>\n          <ol className={s.ol()}>\n            {group.events.map(({ event, count }) => {\n              const date = new Date(event.at);\n              return (\n                <li key={event.id} className={s.item()} style={{ [\"--kz-af-tone\" as string]: TONE[event.tone ?? \"neutral\"] }}>\n                  {leading ? <span className={s.leading()}>{leading(event)}</span> : <span aria-hidden className={s.marker()} />}\n                  <span className={s.body()}>\n                    <span className={s.title()}>\n                      {event.title}\n                      {count > 1 ? <span className={s.count()}>{labels.times(count)}</span> : null}\n                    </span>\n                    {event.description ? <span className={s.description()}>{event.description}</span> : null}\n                  </span>\n                  <time dateTime={date.toISOString()} title={date.toLocaleString(locale)} className={s.time()}>\n                    {timeAgo(date, { now, locale })}\n                  </time>\n                  {action ? <span className=\"shrink-0\">{action(event)}</span> : null}\n                </li>\n              );\n            })}\n          </ol>\n        </div>\n      ))}\n    </section>\n  );\n}\n\nexport type TimelineProps<T extends ActivityEvent> = {\n  /** One thing's events, oldest first (a job's run, a payout's life). */\n  events: readonly T[];\n  /** The timeline's accessible name (“History of the payout”). */\n  \"aria-label\": string;\n  /** The locale of the times. Default `en-US`. */\n  locale?: string;\n  /** How a time is written: `time` (14:02, default), `datetime`, `date`. */\n  timeStyle?: \"time\" | \"datetime\" | \"date\";\n  /** Classes merged on the list. */\n  className?: string;\n};\n\n/** One thing's history on a rail, oldest first: each event a marker in its tone, its time and its words. */\nexport function Timeline<T extends ActivityEvent>({ events, \"aria-label\": label, locale = \"en-US\", timeStyle = \"time\", className }: TimelineProps<T>) {\n  const s = activityFeed();\n  const options: Intl.DateTimeFormatOptions =\n    timeStyle === \"time\" ? { hour: \"2-digit\", minute: \"2-digit\" } : timeStyle === \"date\" ? { dateStyle: \"medium\" } : { dateStyle: \"medium\", timeStyle: \"short\" };\n  const write = new Intl.DateTimeFormat(locale, options);\n  return (\n    <ol aria-label={label} className={s.ol({ className })}>\n      {events.map((event, i) => {\n        const date = new Date(event.at);\n        return (\n          <li key={event.id} className={s.item()} style={{ [\"--kz-af-tone\" as string]: TONE[event.tone ?? \"neutral\"] }}>\n            <span aria-hidden className={s.marker()} />\n            {i < events.length - 1 ? <span aria-hidden className={s.rail()} /> : null}\n            <span className={s.body()}>\n              <span className={s.title()}>{event.title}</span>\n              {event.description ? <span className={s.description()}>{event.description}</span> : null}\n            </span>\n            <time dateTime={date.toISOString()} className={s.time()}>\n              {write.format(date)}\n            </time>\n          </li>\n        );\n      })}\n    </ol>\n  );\n}\n","// Shared by the web and React Native ActivityFeed: the events grouped by day (“Today”, “Yesterday”, a date), the same\n// events of one actor in a row folded into one (“Mina tipped 3 times”), and how long ago each happened — Intl only.\n\nexport type ActivityTone = \"neutral\" | \"accent\" | \"success\" | \"warning\" | \"danger\" | \"info\";\n\nexport type ActivityEvent = {\n  /** A stable id. */\n  id: string;\n  /** When it happened: an ISO date-time, an epoch in ms or a `Date`. */\n  at: string | number | Date;\n  /** What happened, in a sentence — passed translated (“Mina tipped your video $5”). */\n  title: string;\n  /** A detail under it. */\n  description?: string;\n  /** Who did it (folds a run of the same `kind` by the same actor). */\n  actor?: string;\n  /** The kind of event (`tip`, `bid`, `job.done`): with `actor`, what folds. */\n  kind?: string;\n  /** The tone of its marker: success for a payout, danger for a failure. */\n  tone?: ActivityTone;\n};\n\nexport type ActivityGroup<T extends ActivityEvent> = {\n  /** The day's heading (“Today”, “Yesterday”, “Monday, Oct 6”). */\n  label: string;\n  /** Its events, newest first; a folded run is its newest event with `count` > 1. */\n  events: { event: T; count: number }[];\n};\n\nconst dayKey = (date: Date) => `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;\n\n/** Groups events (any order) by day, newest first, folding runs of the same actor and kind when `fold` is set. */\nexport function groupActivity<T extends ActivityEvent>(\n  events: readonly T[],\n  { now = new Date(), locale = \"en-US\", today = \"Today\", yesterday = \"Yesterday\", fold = true }: { now?: Date; locale?: string; today?: string; yesterday?: string; fold?: boolean } = {},\n): ActivityGroup<T>[] {\n  const sorted = [...events].sort((a, b) => new Date(b.at).getTime() - new Date(a.at).getTime());\n  const day = new Intl.DateTimeFormat(locale, { weekday: \"long\", month: \"short\", day: \"numeric\" });\n  const todayKey = dayKey(now);\n  const yesterdayKey = dayKey(new Date(now.getTime() - 86_400_000));\n  const groups: ActivityGroup<T>[] = [];\n  let current: ActivityGroup<T> | null = null;\n  let currentKey = \"\";\n  for (const event of sorted) {\n    const date = new Date(event.at);\n    const key = dayKey(date);\n    if (!current || key !== currentKey) {\n      currentKey = key;\n      current = { label: key === todayKey ? today : key === yesterdayKey ? yesterday : day.format(date), events: [] };\n      groups.push(current);\n    }\n    const last = current.events[current.events.length - 1];\n    if (fold && last && event.actor && event.kind && last.event.actor === event.actor && last.event.kind === event.kind) last.count += 1;\n    else current.events.push({ event, count: 1 });\n  }\n  return groups;\n}\n\nconst UNITS: [Intl.RelativeTimeFormatUnit, number][] = [\n  [\"second\", 60],\n  [\"minute\", 60],\n  [\"hour\", 24],\n  [\"day\", 7],\n  [\"week\", 4.35],\n  [\"month\", 12],\n  [\"year\", Number.POSITIVE_INFINITY],\n];\n\n/** “2 minutes ago”, “yesterday”: how long ago, in the largest unit that reads well (`style` short: “2 min. ago”). */\nexport function timeAgo(at: string | number | Date, { now = new Date(), locale = \"en-US\", style = \"short\" }: { now?: Date; locale?: string; style?: \"long\" | \"short\" | \"narrow\" } = {}): string {\n  let value = (new Date(at).getTime() - now.getTime()) / 1000;\n  let unit: Intl.RelativeTimeFormatUnit = \"second\";\n  for (const [name, size] of UNITS) {\n    unit = name;\n    if (Math.abs(value) < size - 0.5) break;\n    value /= size;\n  }\n  return new Intl.RelativeTimeFormat(locale, { numeric: \"auto\", style }).format(Math.round(value) + 0, unit);\n}\n"],"mappings":"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","names":[]}

package/dist/argument-card.js

@@ -1,6 +1,3 @@
-import {
-  Facts
-} from "./chunk-DGQMDJXK.js";
 import {
   BlockLink
 } from "./chunk-2AGSO3WH.js";
@@ -8,6 +5,9 @@ import {
   ArrowGlyph,
   ChevronGlyph
 } from "./chunk-XCBVFMNV.js";
+import {
+  Facts
+} from "./chunk-DGQMDJXK.js";
 import "./chunk-XVLWVTQA.js";
 import {
   cn

package/dist/{chunk-I5RVM5CW.js → chunk-2FRWNSRO.js}

@@ -16,12 +16,8 @@ function cn(...inputs) {
   return cnMerge(clsx(inputs))({ twMergeConfig }) ?? "";
 }
 
-// src/floating.ts
-var floating = "kz-pop z-50 rounded-lg border border-border-default bg-surface-2 text-fg shadow-lg outline-hidden";
-
 export {
   twMergeConfig,
-  cn,
-  floating
+  cn
 };
-//# sourceMappingURL=chunk-I5RVM5CW.js.map
+//# sourceMappingURL=chunk-2FRWNSRO.js.map

package/dist/chunk-2FRWNSRO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/cn.ts"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { cnMerge, type TWMergeConfig } from \"tailwind-variants\";\n\nexport type { ClassValue };\n\n/**\n * The preset's own utilities, told to the merge engine: the material (BRAND.md §6: `bg-sheen`, `bg-fill-shade`,\n * `bg-halo` are background images; `shadow-raised` · `-floating` · `-overlay` · `-glow` are shadows; `inset-shadow-edge`\n * · `-edge-fill` · `-well` are inset shadows). Unknown, tailwind-merge would take `bg-sheen` for a colour and drop the\n * `bg-surface-2` it lies on.\n */\nexport const twMergeConfig: TWMergeConfig = {\n  extend: {\n    classGroups: {\n      \"bg-image\": [\"bg-sheen\", \"bg-fill-shade\", \"bg-halo\"],\n      shadow: [\"shadow-raised\", \"shadow-floating\", \"shadow-overlay\", \"shadow-glow\", \"shadow-glow-lg\"],\n      \"inset-shadow\": [\"inset-shadow-edge\", \"inset-shadow-edge-fill\", \"inset-shadow-well\"],\n    },\n  },\n};\n\n/**\n * Merges Tailwind classes: the last one wins — a product's `className` overrides the primitive's. The merge engine is\n * tailwind-merge as tailwind-variants ships it (the one `tv` uses), so the platform carries a single copy of it.\n * tailwind-variants bundles that engine since 3.3 (it never imports the `tailwind-merge` package, an optional peer):\n * hence `tailwind-variants ^3.3.1` and no `tailwind-merge` dependency — `scripts/consumer.mjs` checks it on a clean\n * install of the packed package.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return cnMerge(clsx(inputs))({ twMergeConfig }) ?? \"\";\n}\n"],"mappings":";;;AAAA,SAA0B,YAAY;AACtC,SAAS,eAAmC;AAUrC,IAAM,gBAA+B;AAAA,EAC1C,QAAQ;AAAA,IACN,aAAa;AAAA,MACX,YAAY,CAAC,YAAY,iBAAiB,SAAS;AAAA,MACnD,QAAQ,CAAC,iBAAiB,mBAAmB,kBAAkB,eAAe,gBAAgB;AAAA,MAC9F,gBAAgB,CAAC,qBAAqB,0BAA0B,mBAAmB;AAAA,IACrF;AAAA,EACF;AACF;AASO,SAAS,MAAM,QAA8B;AAClD,SAAO,QAAQ,KAAK,MAAM,CAAC,EAAE,EAAE,cAAc,CAAC,KAAK;AACrD;","names":[]}

package/dist/chunk-7Z4KHPFC.js

@@ -0,0 +1,42 @@
+"use client";
+
+// src/checkbox/checkbox.tsx
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var checkbox = tv({
+  slots: {
+    root: "peer inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border border-border-strong bg-surface-1 text-on-accent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 hover:border-accent disabled:cursor-not-allowed disabled:opacity-40 data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent aria-invalid:border-danger aria-invalid:ring-danger/30",
+    indicator: "flex items-center justify-center",
+    label: "flex cursor-pointer items-start gap-3 text-sm text-fg has-disabled:cursor-not-allowed has-disabled:opacity-60"
+  }
+});
+function Check() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-3.5 w-3.5", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) });
+}
+function Dash() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-3.5 w-3.5", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" }) });
+}
+function Checkbox({ invalid, className, children, ...props }) {
+  const s = checkbox();
+  const box = /* @__PURE__ */ jsx(
+    CheckboxPrimitive.Root,
+    {
+      "aria-invalid": invalid || void 0,
+      "data-invalid": invalid ? "" : void 0,
+      className: s.root({ className: children ? "mt-0.5" : className }),
+      ...props,
+      children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: s.indicator(), children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(Dash, {}) : /* @__PURE__ */ jsx(Check, {}) })
+    }
+  );
+  if (!children) return box;
+  return /* @__PURE__ */ jsxs("label", { className: s.label({ className }), children: [
+    box,
+    /* @__PURE__ */ jsx("span", { className: "min-w-0", children })
+  ] });
+}
+
+export {
+  Checkbox
+};
+//# sourceMappingURL=chunk-7Z4KHPFC.js.map

package/dist/chunk-7Z4KHPFC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/checkbox/checkbox.tsx"],"sourcesContent":["// Client. Radix Checkbox: role=\"checkbox\", aria-checked (true · false · mixed), Space toggles, a hidden input inside a\n// form. It sits in a `Field` like the other controls: `<Field.Label htmlFor={id}>`, `invalid`, aria-describedby.\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const checkbox = tv({\n  slots: {\n    root:\n      \"peer inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border border-border-strong bg-surface-1 text-on-accent transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 \" +\n      \"hover:border-accent disabled:cursor-not-allowed disabled:opacity-40 \" +\n      \"data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent \" +\n      \"aria-invalid:border-danger aria-invalid:ring-danger/30\",\n    indicator: \"flex items-center justify-center\",\n    label: \"flex cursor-pointer items-start gap-3 text-sm text-fg has-disabled:cursor-not-allowed has-disabled:opacity-60\",\n  },\n});\n\nfunction Check() {\n  return (\n    <svg viewBox=\"0 0 24 24\" className=\"h-3.5 w-3.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n      <path d=\"M20 6 9 17l-5-5\" />\n    </svg>\n  );\n}\n\nfunction Dash() {\n  return (\n    <svg viewBox=\"0 0 24 24\" className=\"h-3.5 w-3.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" aria-hidden>\n      <path d=\"M5 12h14\" />\n    </svg>\n  );\n}\n\nexport type CheckboxProps = Omit<React.ComponentProps<typeof CheckboxPrimitive.Root>, \"children\"> & {\n  /** Marks it invalid: aria-invalid and data-invalid (pair it with a `Field.Error` in aria-describedby). */\n  invalid?: boolean;\n  /** The text next to the box, clickable: the box and its words in one `<label>`. Otherwise name it with\n   * `Field.Label htmlFor` or `aria-label`. */\n  children?: React.ReactNode;\n};\n\n/** A checkbox: `checked`/`defaultChecked` (`true` · `false` · `\"indeterminate\"`) + `onCheckedChange`. */\nexport function Checkbox({ invalid, className, children, ...props }: CheckboxProps) {\n  const s = checkbox();\n  const box = (\n    <CheckboxPrimitive.Root\n      aria-invalid={invalid || undefined}\n      data-invalid={invalid ? \"\" : undefined}\n      className={s.root({ className: children ? \"mt-0.5\" : className })}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator className={s.indicator()}>\n        {props.checked === \"indeterminate\" ? <Dash /> : <Check />}\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n  if (!children) return box;\n  return (\n    <label className={s.label({ className })}>\n      {box}\n      <span className=\"min-w-0\">{children}</span>\n    </label>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,YAAY,yBAAyB;AAE9C,SAAS,UAAU;AAkBb,cAsCF,YAtCE;AAhBC,IAAM,WAAW,GAAG;AAAA,EACzB,OAAO;AAAA,IACL,MACE;AAAA,IAKF,WAAW;AAAA,IACX,OAAO;AAAA,EACT;AACF,CAAC;AAED,SAAS,QAAQ;AACf,SACE,oBAAC,SAAI,SAAQ,aAAY,WAAU,eAAc,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,eAAW,MACzJ,8BAAC,UAAK,GAAE,mBAAkB,GAC5B;AAEJ;AAEA,SAAS,OAAO;AACd,SACE,oBAAC,SAAI,SAAQ,aAAY,WAAU,eAAc,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,eAAW,MAClI,8BAAC,UAAK,GAAE,YAAW,GACrB;AAEJ;AAWO,SAAS,SAAS,EAAE,SAAS,WAAW,UAAU,GAAG,MAAM,GAAkB;AAClF,QAAM,IAAI,SAAS;AACnB,QAAM,MACJ;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACC,gBAAc,WAAW;AAAA,MACzB,gBAAc,UAAU,KAAK;AAAA,MAC7B,WAAW,EAAE,KAAK,EAAE,WAAW,WAAW,WAAW,UAAU,CAAC;AAAA,MAC/D,GAAG;AAAA,MAEJ,8BAAC,kBAAkB,WAAlB,EAA4B,WAAW,EAAE,UAAU,GACjD,gBAAM,YAAY,kBAAkB,oBAAC,QAAK,IAAK,oBAAC,SAAM,GACzD;AAAA;AAAA,EACF;AAEF,MAAI,CAAC,SAAU,QAAO;AACtB,SACE,qBAAC,WAAM,WAAW,EAAE,MAAM,EAAE,UAAU,CAAC,GACpC;AAAA;AAAA,IACD,oBAAC,UAAK,WAAU,WAAW,UAAS;AAAA,KACtC;AAEJ;","names":[]}

package/dist/chunk-BTMFZ66D.js

@@ -0,0 +1,135 @@
+"use client";
+import {
+  tv
+} from "./chunk-C2BRIFJG.js";
+
+// src/slider/slider.tsx
+import { Slider as SliderPrimitive } from "radix-ui";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var slider = tv({
+  slots: {
+    root: "flex flex-col gap-2 data-[orientation=vertical]:h-full data-[orientation=vertical]:items-center",
+    header: "flex items-baseline justify-between gap-3 text-xs font-semibold text-fg-secondary",
+    value: "font-mono text-[11px] tabular-nums text-fg-secondary",
+    control: "relative flex touch-none select-none items-center data-disabled:cursor-not-allowed data-disabled:opacity-40 data-[orientation=horizontal]:h-6 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-6 data-[orientation=vertical]:flex-col",
+    track: "relative grow overflow-hidden rounded-full bg-surface-3 inset-shadow-well data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5",
+    range: "absolute rounded-full data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
+    thumb: "group/thumb relative block h-5 w-5 cursor-grab rounded-full border-2 border-accent bg-fg-on-media shadow-raised transition-[box-shadow,scale] duration-150 hover:scale-110 focus-visible:outline-hidden focus-visible:focus-ring active:scale-110 active:cursor-grabbing motion-reduce:transition-none motion-reduce:hover:scale-100 motion-reduce:active:scale-100",
+    // The value over the thumb: shown while the thumb is hovered, focused or held.
+    bubble: "pointer-events-none absolute bottom-full left-1/2 mb-2.5 -translate-x-1/2 whitespace-nowrap rounded-lg bg-fg px-2 py-1 font-mono text-[11px] font-semibold tabular-nums text-surface-0 opacity-0 shadow-floating transition-opacity duration-150 after:absolute after:left-1/2 after:top-full after:-translate-x-1/2 after:border-4 after:border-transparent after:border-t-fg group-hover/thumb:opacity-100 group-focus-visible/thumb:opacity-100 group-active/thumb:opacity-100 data-[always]:opacity-100 motion-reduce:transition-none",
+    bubbleVertical: "bottom-auto left-full top-1/2 mb-0 ml-3 -translate-x-0 -translate-y-1/2 after:hidden",
+    ticks: "pointer-events-none absolute inset-0",
+    tick: "absolute rounded-full bg-border-strong data-[on]:bg-on-accent/70 data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-px data-[orientation=horizontal]:-translate-x-1/2 data-[orientation=horizontal]:-translate-y-1/2 data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:h-px data-[orientation=vertical]:w-1 data-[orientation=vertical]:-translate-x-1/2 data-[orientation=vertical]:translate-y-1/2",
+    marks: "relative h-4 w-full text-[11px] font-medium tabular-nums text-fg-secondary",
+    mark: "absolute top-0 -translate-x-1/2 whitespace-nowrap first:translate-x-0 last:-translate-x-full"
+  },
+  variants: {
+    tone: {
+      /** The brand's signature: accent → accent-2, a glow under it. */
+      gradient: { range: "bg-linear-to-r from-accent to-accent-2 shadow-glow data-[orientation=vertical]:bg-linear-to-t" },
+      /** The accent alone. */
+      solid: { range: "bg-accent" }
+    },
+    size: {
+      md: {},
+      lg: {
+        track: "data-[orientation=horizontal]:h-2.5 data-[orientation=vertical]:w-2.5",
+        thumb: "h-6 w-6",
+        control: "data-[orientation=horizontal]:h-8 data-[orientation=vertical]:w-8"
+      }
+    }
+  },
+  defaultVariants: { tone: "gradient", size: "md" }
+});
+var toArray = (v) => v === void 0 ? void 0 : typeof v === "number" ? [v] : v;
+function Slider({
+  value,
+  defaultValue,
+  onValueChange,
+  onValueCommit,
+  label,
+  thumbLabels,
+  formatValue = String,
+  showLabel,
+  floatingValue,
+  origin,
+  ticks,
+  marks,
+  tone,
+  size,
+  min = 0,
+  max = 100,
+  step = 1,
+  orientation = "horizontal",
+  className,
+  ...props
+}) {
+  const s = slider({ tone, size });
+  const range = Array.isArray(value ?? defaultValue);
+  const vertical = orientation === "vertical";
+  const [inner, setInner] = React.useState(() => toArray(defaultValue) ?? [min]);
+  const current = toArray(value) ?? inner;
+  const out = (next) => range ? next : next[0];
+  const pct = (v) => (v - min) / (max - min || 1) * 100;
+  const fill = origin !== void 0 && !range && !vertical ? { left: `${Math.min(pct(origin), pct(current[0]))}%`, right: `${100 - Math.max(pct(origin), pct(current[0]))}%` } : void 0;
+  const lo = range ? Math.min(...current) : origin ?? min;
+  const hi = range ? Math.max(...current) : current[0];
+  const tickValues = ticks === true ? (max - min) / step <= 40 ? Array.from({ length: Math.round((max - min) / step) + 1 }, (_, i) => min + i * step) : [] : ticks ? [...ticks] : [];
+  const id = React.useId();
+  return /* @__PURE__ */ jsxs("div", { className: s.root({ className }), "data-range": range ? "" : void 0, "data-orientation": orientation, children: [
+    showLabel && /* @__PURE__ */ jsxs("div", { className: s.header(), children: [
+      /* @__PURE__ */ jsx("span", { id: `${id}-label`, children: label }),
+      /* @__PURE__ */ jsx("span", { className: s.value(), "aria-hidden": true, children: current.map(formatValue).join(" \u2013 ") })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      SliderPrimitive.Root,
+      {
+        min,
+        max,
+        step,
+        orientation,
+        value: current,
+        onValueChange: (next) => {
+          if (value === void 0) setInner(next);
+          onValueChange?.(out(next));
+        },
+        onValueCommit: onValueCommit && ((next) => onValueCommit(out(next))),
+        className: s.control(),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(SliderPrimitive.Track, { className: s.track(), children: [
+            fill ? /* @__PURE__ */ jsx("span", { "data-origin": "", "data-orientation": orientation, className: s.range(), style: fill }) : /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: s.range() }),
+            tickValues.length ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: s.ticks(), children: tickValues.map((t) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-orientation": orientation,
+                "data-on": t > lo && t < hi ? "" : void 0,
+                className: s.tick(),
+                style: vertical ? { bottom: `${pct(t)}%` } : { left: `${pct(t)}%` }
+              },
+              t
+            )) }) : null
+          ] }),
+          current.map((v, i) => /* @__PURE__ */ jsx(
+            SliderPrimitive.Thumb,
+            {
+              "aria-label": range ? thumbLabels?.[i] ?? label : showLabel ? void 0 : label,
+              "aria-labelledby": !range && showLabel ? `${id}-label` : void 0,
+              "aria-valuetext": formatValue(v),
+              className: s.thumb(),
+              children: floatingValue ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, "data-always": floatingValue === "always" ? "" : void 0, className: s.bubble({ className: vertical ? s.bubbleVertical() : void 0 }), children: formatValue(v) }) : null
+            },
+            i
+          ))
+        ]
+      }
+    ),
+    marks?.length && !vertical ? /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: s.marks(), children: marks.map((m) => /* @__PURE__ */ jsx("span", { className: s.mark(), style: { left: `${pct(m.value)}%` }, children: m.label }, m.value)) }) : null
+  ] });
+}
+
+export {
+  Slider
+};
+//# sourceMappingURL=chunk-BTMFZ66D.js.map