@vamos-ui/react 0.3.0 → 0.4.1

package/dist/blocks/site/shared/open-now.d.ts

@@ -15,7 +15,7 @@ export interface OpenNowProps {
     className?: string;
 }
 /**
- * "Open now · closes at 22:00" — computed in the business's time zone on the client, refreshed
+ * "Open · until 10 PM" / "Closed · opens tomorrow at 12 PM" — computed in the business's time zone on the client, refreshed
  * every minute. Renders nothing on the server and without JS: a cached page never shows a stale
  * status. ~1 KB.
  */

package/dist/blocks/site/shared/open-now.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import { cn2 as cn } from "./kit-2.js";
 import { describeStatus, hoursStatus } from "./opening-hours.js";
 /**
- * "Open now · closes at 22:00" — computed in the business's time zone on the client, refreshed
+ * "Open · until 10 PM" / "Closed · opens tomorrow at 12 PM" — computed in the business's time zone on the client, refreshed
  * every minute. Renders nothing on the server and without JS: a cached page never shows a stale
  * status. ~1 KB.
  */

package/dist/blocks/site/shared/opening-hours.d.ts

@@ -110,8 +110,24 @@ export declare function summarizeHours(hours: OpeningHours, locale?: string): {
 }[];
 /** schema.org `OpeningHoursSpecification[]` for JSON-LD (weekly + special days). */
 export declare function openingHoursJsonLd(hours: OpeningHours): Record<string, unknown>[];
-/** The status sentence: "Open now · closes at 22:00", "Closed · opens Thu at 12:00". */
-export declare function describeStatus(s: OpenStatus, labels: Record<"openNow" | "closesAt" | "closingSoon" | "closed" | "closedToday" | "opensAt" | "opensTodayAt" | "open24h", string>, locale?: string): {
+/** Label keys `describeStatus` reads. */
+export type StatusLabelKey = "openNow" | "openUntil" | "closingSoon" | "closingSoonUntil" | "openAllDay" | "closed" | "closedToday" | "opensAt" | "opensTodayAt" | "opensTomorrowAt";
+/**
+ * Variables for a time in a status template: `{time}` ("01:00", "1 AM"), plus `{timeTo}` /
+ * `{timeAt}` — the time with the Turkish dative / locative suffix ("01:00’e", "12:00’de") so the
+ * TR strings read naturally; other locales get the plain time.
+ */
+export declare function timeVars(hhmm: string, locale?: string): {
+    time: string;
+    timeTo: string;
+    timeAt: string;
+};
+/**
+ * The status as `{ head, tail }`, each said once: "Open · until 1 AM", "Closing soon · open until
+ * 1 AM", "Open · 24 hours", "Closed · opens tomorrow at 12 PM", "Closed today · Staff day · opens
+ * Thu at 12 PM". TR: "Açık · 01:00’e kadar", "Kapalı · yarın 12:00’de açılıyor".
+ */
+export declare function describeStatus(s: OpenStatus, labels: Record<StatusLabelKey, string>, locale?: string): {
     head: string;
     tail?: string;
 };

package/dist/blocks/site/shared/opening-hours.js

@@ -227,19 +227,48 @@ export function openingHoursJsonLd(hours) {
     }
     return out;
 }
-/** The status sentence: "Open now · closes at 22:00", "Closed · opens Thu at 12:00". */
+// Turkish case suffixes on a clock time follow the last spoken word: "01:00" is read "bir" →
+// "01:00’e" (dative) / "01:00’de" (locative); "22:30" ends in "otuz" → "22:30’a" / "22:30’da".
+const TR_UNITS_DAT = ["", "e", "ye", "e", "e", "e", "ya", "ye", "e", "a"];
+const TR_UNITS_LOC = ["", "de", "de", "te", "te", "te", "da", "de", "de", "da"];
+const TR_TENS_DAT = ["a", "a", "ye", "a", "a", "ye"]; // sıfır, on, yirmi, otuz, kırk, elli
+const TR_TENS_LOC = ["da", "da", "de", "da", "ta", "de"];
+function trSuffix(hhmm, kind) {
+    const [h = 0, m = 0] = hhmm.split(":").map(Number);
+    const n = m === 0 ? h % 24 : m; // the last word read aloud
+    const unit = n % 10;
+    if (unit)
+        return (kind === "dat" ? TR_UNITS_DAT : TR_UNITS_LOC)[unit];
+    return (kind === "dat" ? TR_TENS_DAT : TR_TENS_LOC)[Math.floor(n / 10)];
+}
+/**
+ * Variables for a time in a status template: `{time}` ("01:00", "1 AM"), plus `{timeTo}` /
+ * `{timeAt}` — the time with the Turkish dative / locative suffix ("01:00’e", "12:00’de") so the
+ * TR strings read naturally; other locales get the plain time.
+ */
+export function timeVars(hhmm, locale = "en-US") {
+    const time = formatTime(hhmm, locale);
+    if (!/^tr\b/i.test(locale))
+        return { time, timeTo: time, timeAt: time };
+    return { time, timeTo: `${time}’${trSuffix(hhmm, "dat")}`, timeAt: `${time}’${trSuffix(hhmm, "loc")}` };
+}
+/**
+ * The status as `{ head, tail }`, each said once: "Open · until 1 AM", "Closing soon · open until
+ * 1 AM", "Open · 24 hours", "Closed · opens tomorrow at 12 PM", "Closed today · Staff day · opens
+ * Thu at 12 PM". TR: "Açık · 01:00’e kadar", "Kapalı · yarın 12:00’de açılıyor".
+ */
 export function describeStatus(s, labels, locale = "en-US") {
     const f = (tpl, vars) => formatMessage(tpl, vars, locale);
     if (s.state !== "closed") {
         if (s.allDay)
-            return { head: f(labels.openNow), tail: f(labels.open24h) };
-        const tail = f(labels.closesAt, { time: formatTime(s.closesAt, locale) });
-        return { head: f(s.state === "closing-soon" ? labels.closingSoon : labels.openNow), tail };
+            return { head: f(labels.openNow), tail: f(labels.openAllDay) };
+        const vars = timeVars(s.closesAt, locale);
+        return s.state === "closing-soon" ? { head: f(labels.closingSoon), tail: f(labels.closingSoonUntil, vars) } : { head: f(labels.openNow), tail: f(labels.openUntil, vars) };
     }
     const head = s.special?.closed ? (s.special.note ? `${f(labels.closedToday)} · ${s.special.note}` : f(labels.closedToday)) : f(labels.closed);
     if (!s.opensAt)
         return { head };
-    const time = formatTime(s.opensAt.time, locale);
-    const tail = s.opensAt.dayOffset === 0 ? f(labels.opensTodayAt, { time }) : f(labels.opensAt, { day: weekdayName(s.opensAt.weekday, locale, "short"), time });
-    return { head, tail };
+    const vars = { ...timeVars(s.opensAt.time, locale), day: weekdayName(s.opensAt.weekday, locale, "short") };
+    const tpl = s.opensAt.dayOffset === 0 ? labels.opensTodayAt : s.opensAt.dayOffset === 1 ? labels.opensTomorrowAt : labels.opensAt;
+    return { head, tail: f(tpl, vars) };
 }

package/dist/blocks/site/shared/tap.d.ts

@@ -0,0 +1,9 @@
+/** ≥ 24×24 CSS px everywhere (WCAG 2.5.8), ≥ 44px tall on touch. For text links in lists. */
+export declare const TAP = "inline-flex min-h-6 items-center pointer-coarse:min-h-11";
+/** A square icon control: ≥ 24px everywhere, 44×44 on touch. Combine with the control's own size. */
+export declare const TAP_ICON = "min-h-6 min-w-6 pointer-coarse:min-h-11 pointer-coarse:min-w-11";
+/**
+ * WCAG 2.5.3 Label in Name: an `aria-label` must contain the visible label. Returns `name` when
+ * it already does (case-insensitive), else `"<visible>, <name>"`.
+ */
+export declare function nameWithLabel(visible: string | undefined, name: string): string;

package/dist/blocks/site/shared/tap.js

@@ -0,0 +1,16 @@
+// Tap-target sizing for site blocks (WCAG 2.5.8 + touch comfort). Padding/min-size only — the
+// visual stays the same on a mouse; on touch (`pointer: coarse`) primary controls grow to 44px.
+/** ≥ 24×24 CSS px everywhere (WCAG 2.5.8), ≥ 44px tall on touch. For text links in lists. */
+export const TAP = "inline-flex min-h-6 items-center pointer-coarse:min-h-11";
+/** A square icon control: ≥ 24px everywhere, 44×44 on touch. Combine with the control's own size. */
+export const TAP_ICON = "min-h-6 min-w-6 pointer-coarse:min-h-11 pointer-coarse:min-w-11";
+/**
+ * WCAG 2.5.3 Label in Name: an `aria-label` must contain the visible label. Returns `name` when
+ * it already does (case-insensitive), else `"<visible>, <name>"`.
+ */
+export function nameWithLabel(visible, name) {
+    const v = visible?.trim();
+    if (!v)
+        return name;
+    return name.toLocaleLowerCase().includes(v.toLocaleLowerCase()) ? name : `${v}, ${name}`;
+}

package/dist/blocks/site/site-shell.js

@@ -8,7 +8,7 @@ import { isBuiltInAccent, siteAccent, siteAccentCss, siteAccentKey } from "./sha
 import { motionAllowed } from "../../motion/core.js";
 import { startPageTransition, viewTransitionsSupported } from "../../motion/page-transition.js";
 import { parseSiteHref, readSiteLocation, sitePageHref, writeSiteLocation } from "./shared/site-routing.js";
-const SiteShellContext = React.createContext(null);
+const SiteShellContext = /*#__PURE__*/ React.createContext(null);
 /** Page, locale and navigation of the closest Site shell. Throws outside one. */
 export function useSiteShell() {
     const ctx = React.useContext(SiteShellContext);
@@ -34,7 +34,7 @@ export function useSiteShell() {
  * </SiteShell>
  * ```
  */
-export const SiteShell = React.forwardRef(function SiteShell({ accent, accentDark, font, material, density, theme, dir, locales = ["en", "tr"], locale: localeProp, defaultLocale, onLocaleChange, pages = ["home"], page: pageProp, defaultPage, onPageChange, routing = "search", pageParam = "page", localeParam = "lang", motion = "subtle", className, onClick, children, ...props }, ref) {
+export const SiteShell = /*#__PURE__*/ React.forwardRef(function SiteShell({ accent, accentDark, font, material, density, theme, dir, locales = ["en", "tr"], locale: localeProp, defaultLocale, onLocaleChange, pages = ["home"], page: pageProp, defaultPage, onPageChange, routing = "search", pageParam = "page", localeParam = "lang", motion = "subtle", className, onClick, children, ...props }, ref) {
     const homeLocale = defaultLocale ?? locales[0] ?? "en";
     const homePage = defaultPage ?? pages[0] ?? "home";
     const [locale, setLocale] = useControllableState({ value: localeProp, defaultValue: homeLocale, onChange: onLocaleChange, name: "SiteShell" });
@@ -248,7 +248,7 @@ export function SiteShellLocale({ code, children }) {
  * A link to an inner page for client code. Server components can use a plain
  * `href={sitePageHref("pricing")}` instead; the shell handles both.
  */
-export const SiteShellLink = React.forwardRef(function SiteShellLink({ page, anchor, ...props }, ref) {
+export const SiteShellLink = /*#__PURE__*/ React.forwardRef(function SiteShellLink({ page, anchor, ...props }, ref) {
     const { hrefFor, page: current } = useSiteShell();
     return _jsx("a", { ref: ref, href: hrefFor(page, anchor), "aria-current": !anchor && current === page ? "page" : undefined, ...props });
 });

package/dist/blocks/site/team.d.ts

@@ -11,7 +11,7 @@ export interface TeamMember {
     role: React.ReactNode;
     /** Specialty line in `list` ("Deep tissue · Sports massage"). */
     specialty?: React.ReactNode;
-    /** 4:5 portrait. No photo = an empty inset area, never initials. */
+    /** 4:5 portrait. No photo = an empty inset area, never initials. `sizes`: grid `min(25vw, 19rem)` / 50vw · rows 56px · feature `min(42vw, 32rem)` / 100vw · compact 160px. */
     photo?: SiteImage2;
     bio?: React.ReactNode;
     /** Up to 3 profile links, rendered as short text links ("LinkedIn"). */

package/dist/blocks/site/team.js

@@ -7,6 +7,7 @@ import { BlockLink } from "../block-link.js";
 import { site2Text } from "./shared/labels-2.js";
 import { fieldAttr, textOf, useBlockIds2 } from "./shared/kit-2.js";
 import { BRAND_NAMES } from "./shared/brand-icons.js";
+import { columnSizes } from "./shared/image-sizes.js";
 /**
  * Team and specialist introduction — spa therapists, clinic doctors, an agency team. Card-less
  * by default (D6-1). Server component; the hover portrait in `list` is CSS only.
@@ -30,7 +31,7 @@ function ProfileLinks({ member, ctx, className }) {
     if (!member.links?.length)
         return null;
     const name = textOf(member.name);
-    return (_jsx("span", { className: cn("flex flex-wrap gap-x-3 gap-y-1", className), children: member.links.slice(0, 3).map((l, i) => (_jsx(BlockLink, { href: l.href, newTab: true, components: ctx.components, labels: ctx.labels, locale: ctx.locale, "aria-label": name ? ctx.t("profileOf", { name, network: BRAND_NAMES[l.network] }) : undefined, className: "relative z-10 text-small text-fg-muted underline decoration-line underline-offset-[0.25em] transition-colors hover:text-fg hover:decoration-current focus-ring rounded-[2px]", children: BRAND_NAMES[l.network] }, i))) }));
+    return (_jsx("span", { className: cn("flex flex-wrap gap-x-3 gap-y-1 pointer-coarse:gap-y-0", className), children: member.links.slice(0, 3).map((l, i) => (_jsx(BlockLink, { href: l.href, newTab: true, components: ctx.components, labels: ctx.labels, locale: ctx.locale, "aria-label": name ? ctx.t("profileOf", { name, network: BRAND_NAMES[l.network] }) : undefined, className: "relative z-10 inline-flex min-h-6 items-center pointer-coarse:min-h-11 text-small text-fg-muted underline decoration-line underline-offset-[0.25em] transition-colors hover:text-fg hover:decoration-current focus-ring rounded-[2px]", children: BRAND_NAMES[l.network] }, i))) }));
 }
 function Portrait({ photo, ctx, className, sizes }) {
     if (!photo?.src)
@@ -38,11 +39,11 @@ function Portrait({ photo, ctx, className, sizes }) {
     return _jsx(BlockImage, { ...photo, alt: photo.alt ?? "", decorative: !photo.alt, aspect: "4:5", sizes: sizes, className: cn("rounded-ui", className), components: ctx.components });
 }
 function PortraitMember({ member, index, ctx }) {
-    return (_jsxs("li", { className: "flex flex-col gap-4", children: [_jsx(Portrait, { photo: member.photo, ctx: ctx, sizes: "(min-width: 56rem) 25vw, 50vw" }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1", children: [_jsx("h3", { className: "text-h3 font-semibold tracking-[-0.012em] text-fg", ...fieldAttr(ctx.editMode, `members.${index}.name`), children: _jsx(DisplayName, { member: member }) }), _jsx(ProfileLinks, { member: member, ctx: ctx })] }), _jsx("p", { className: "font-mono text-eyebrow uppercase tracking-[0.06em] text-fg-muted", children: member.role }), member.bio ? _jsx("p", { className: "mt-2 text-small text-fg-muted text-pretty", children: member.bio }) : null] })] }));
+    return (_jsxs("li", { className: "flex flex-col gap-4", children: [_jsx(Portrait, { photo: member.photo, ctx: ctx, sizes: columnSizes(1 / 4, { narrow: "50vw" }) }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1", children: [_jsx("h3", { className: "text-h3 font-semibold tracking-[-0.012em] text-fg", ...fieldAttr(ctx.editMode, `members.${index}.name`), children: _jsx(DisplayName, { member: member }) }), _jsx(ProfileLinks, { member: member, ctx: ctx })] }), _jsx("p", { className: "font-mono text-eyebrow uppercase tracking-[0.06em] text-fg-muted", children: member.role }), member.bio ? _jsx("p", { className: "mt-2 text-small text-fg-muted text-pretty", children: member.bio }) : null] })] }));
 }
 function ListMember({ member, index, ctx }) {
     return (_jsxs("li", { className: "vb-team-row group/row relative grid grid-cols-[3.5rem_1fr] items-center gap-x-4 gap-y-1 border-t border-line py-6 @2xl:grid-cols-12 @2xl:gap-x-(--gutter)", children: [_jsx("span", { className: "row-span-2 @2xl:hidden", children: _jsx(Portrait, { photo: member.photo, ctx: ctx, className: "w-14 rounded-ui-sm", sizes: "56px" }) }), _jsx("h3", { className: "text-h3 font-semibold tracking-[-0.012em] text-fg @2xl:col-span-4", ...fieldAttr(ctx.editMode, `members.${index}.name`), children: _jsx(DisplayName, { member: member }) }), _jsx("p", { className: "font-mono text-eyebrow uppercase tracking-[0.06em] text-fg-muted @2xl:col-span-3", children: member.role }), _jsxs("div", { className: "col-start-2 flex flex-wrap items-baseline gap-x-6 gap-y-1 @2xl:col-span-5 @2xl:col-start-auto @2xl:justify-between", children: [member.specialty ? _jsx("p", { className: "text-small text-fg-muted", children: member.specialty }) : _jsx("span", {}), _jsx(ProfileLinks, { member: member, ctx: ctx })] }), member.photo?.src ? (_jsx("span", { "aria-hidden": true, className: "vb-team-hover pointer-events-none absolute end-[22%] top-1/2 z-10 hidden w-40 -translate-y-1/2 @4xl:block", children: _jsx(BlockImage, { ...member.photo, decorative: true, aspect: "4:5", sizes: "160px", className: "rounded-ui", components: ctx.components }) })) : null] }));
 }
 function FeatureMember({ member, header, ctx }) {
-    return (_jsxs("div", { className: "grid gap-x-(--gutter) gap-y-10 @4xl:grid-cols-12 @4xl:items-start", children: [_jsx("div", { className: "@4xl:col-span-5", children: _jsx(Portrait, { photo: member.photo, ctx: ctx, sizes: "(min-width: 56rem) 40vw, 100vw" }) }), _jsxs("div", { className: "flex flex-col gap-8 @4xl:col-span-6 @4xl:col-start-7 @4xl:pt-6", children: [header, member.bio ? _jsx("div", { className: "text-lead text-fg-muted text-pretty [&_p+p]:mt-4", children: typeof member.bio === "string" ? member.bio.split(/\n{2,}/).map((p, i) => _jsx("p", { children: p }, i)) : member.bio }) : null, _jsxs("div", { className: "flex flex-col gap-2 border-t border-line pt-6", children: [_jsx("p", { className: "vb-signature font-display text-display-m italic text-fg", ...fieldAttr(ctx.editMode, "members.0.name"), children: _jsx(DisplayName, { member: member }) }), _jsx("p", { className: "font-mono text-eyebrow uppercase tracking-[0.06em] text-fg-muted", children: member.role }), _jsx(ProfileLinks, { member: member, ctx: ctx, className: "mt-2" })] })] })] }));
+    return (_jsxs("div", { className: "grid gap-x-(--gutter) gap-y-10 @4xl:grid-cols-12 @4xl:items-start", children: [_jsx("div", { className: "@4xl:col-span-5", children: _jsx(Portrait, { photo: member.photo, ctx: ctx, sizes: columnSizes(5 / 12) }) }), _jsxs("div", { className: "flex flex-col gap-8 @4xl:col-span-6 @4xl:col-start-7 @4xl:pt-6", children: [header, member.bio ? _jsx("div", { className: "text-lead text-fg-muted text-pretty [&_p+p]:mt-4", children: typeof member.bio === "string" ? member.bio.split(/\n{2,}/).map((p, i) => _jsx("p", { children: p }, i)) : member.bio }) : null, _jsxs("div", { className: "flex flex-col gap-2 border-t border-line pt-6", children: [_jsx("p", { className: "vb-signature font-display text-display-m italic text-fg", ...fieldAttr(ctx.editMode, "members.0.name"), children: _jsx(DisplayName, { member: member }) }), _jsx("p", { className: "font-mono text-eyebrow uppercase tracking-[0.06em] text-fg-muted", children: member.role }), _jsx(ProfileLinks, { member: member, ctx: ctx, className: "mt-2" })] })] })] }));
 }

package/dist/blocks/site/testimonials.d.ts

@@ -10,9 +10,9 @@ export interface TestimonialItem {
     author: React.ReactNode;
     role?: React.ReactNode;
     company?: React.ReactNode;
-    /** Small square portrait. No avatar = name only (never an initials circle). */
+    /** Small round portrait, 40px (`sizes="40px"`). No avatar = name only (never an initials circle). */
     avatar?: SiteImage2;
-    /** Company logo (feature variant). */
+    /** Company logo (feature variant), 6rem wide (`sizes="6rem"`). */
     logo?: SiteImage2;
     /** 1–5. Rendered only with a `source` (D6-8). */
     rating?: number;

package/dist/blocks/site/testimonials.js

@@ -42,14 +42,14 @@ export function RatingStars({ rating, label, size = "md", className }) {
 }
 function Attribution({ item, ctx, align = "start", as: Comp = "figcaption" }) {
     const meta = [item.role, item.company].filter(Boolean);
-    return (_jsxs(Comp, { className: cn("flex items-center gap-3", align === "between" && "justify-between"), children: [_jsxs("span", { className: "flex items-center gap-3", children: [item.avatar ? (_jsx(BlockImage, { ...item.avatar, alt: item.avatar.alt ?? "", decorative: !item.avatar.alt, aspect: "1:1", sizes: "40px", className: "size-10 shrink-0 rounded-full", components: ctx.components })) : null, _jsxs("span", { className: "flex flex-col", children: [_jsx("span", { className: "text-sm font-medium text-fg", children: item.author }), meta.length ? (_jsx("span", { className: "font-mono text-eyebrow uppercase tracking-[0.06em] text-fg-muted", children: meta.map((m, i) => (_jsxs(React.Fragment, { children: [i > 0 ? " · " : null, m] }, i))) })) : null] })] }), align === "between" && item.logo ? (_jsx(BlockImage, { ...item.logo, alt: item.logo.alt ?? "", decorative: !item.logo.alt, fit: "contain", className: "h-7 w-24 bg-transparent opacity-80", imgClassName: "vb-logo-mono", components: ctx.components })) : null] }));
+    return (_jsxs(Comp, { className: cn("flex items-center gap-3", align === "between" && "justify-between"), children: [_jsxs("span", { className: "flex items-center gap-3", children: [item.avatar ? (_jsx(BlockImage, { ...item.avatar, alt: item.avatar.alt ?? "", decorative: !item.avatar.alt, aspect: "1:1", sizes: "40px", className: "size-10 shrink-0 rounded-full", components: ctx.components })) : null, _jsxs("span", { className: "flex flex-col", children: [_jsx("span", { className: "text-sm font-medium text-fg", children: item.author }), meta.length ? (_jsx("span", { className: "font-mono text-eyebrow uppercase tracking-[0.06em] text-fg-muted", children: meta.map((m, i) => (_jsxs(React.Fragment, { children: [i > 0 ? " · " : null, m] }, i))) })) : null] })] }), align === "between" && item.logo ? (_jsx(BlockImage, { ...item.logo, alt: item.logo.alt ?? "", decorative: !item.logo.alt, fit: "contain", sizes: "6rem", className: "h-7 w-24 bg-transparent opacity-80", imgClassName: "vb-logo-mono", components: ctx.components })) : null] }));
 }
 function SourceLine({ item, ctx }) {
     const showRating = item.rating !== undefined && item.source;
     const name = item.source ? REVIEW_SOURCE_NAMES[item.source] : "";
     if (!showRating && !item.date && !name)
         return null;
-    return (_jsxs("p", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-fg-muted", children: [showRating ? _jsx(RatingStars, { rating: item.rating, label: ctx.t("ratingOutOf", { rating: item.rating }) }) : null, name ? (item.link ? (_jsx(BlockLink, { href: item.link.href, newTab: item.link.newTab ?? true, components: ctx.components, labels: ctx.labels, locale: ctx.locale, className: "underline decoration-line underline-offset-[0.25em] hover:decoration-current focus-ring rounded-[2px]", children: name })) : (_jsx("span", { children: name }))) : null, item.date ? _jsx("time", { dateTime: isoDay(item.date), children: formatDate2(isoDay(item.date), ctx.locale, "medium") }) : null] }));
+    return (_jsxs("p", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-fg-muted", children: [showRating ? _jsx(RatingStars, { rating: item.rating, label: ctx.t("ratingOutOf", { rating: item.rating }) }) : null, name ? (item.link ? (_jsx(BlockLink, { href: item.link.href, newTab: item.link.newTab ?? true, components: ctx.components, labels: ctx.labels, locale: ctx.locale, className: "inline-flex min-h-6 items-center underline decoration-line underline-offset-[0.25em] hover:decoration-current focus-ring rounded-[2px]", children: name })) : (_jsx("span", { children: name }))) : null, item.date ? _jsx("time", { dateTime: isoDay(item.date), children: formatDate2(isoDay(item.date), ctx.locale, "medium") }) : null] }));
 }
 function QuoteFigure({ item, index, ctx, size = "s" }) {
     return (_jsxs("figure", { className: "flex flex-col gap-5", children: [_jsx(SourceLine, { item: item, ctx: ctx }), _jsx("blockquote", { className: cn("text-fg text-pretty", size === "m" ? "text-lead" : "text-body"), ...fieldAttr(ctx.editMode, `items.${index}.quote`), children: _jsxs("p", { children: [_jsx("span", { "aria-hidden": true, children: ctx.t("quoteOpen") }), item.quote, _jsx("span", { "aria-hidden": true, children: ctx.t("quoteClose") })] }) }), _jsx(Attribution, { item: item, ctx: ctx })] }));
@@ -62,5 +62,5 @@ function ReviewsLayout({ header, items, summary, ctx }) {
     const sourceName = summary ? REVIEW_SOURCE_NAMES[summary.source] : "";
     return (_jsxs("div", { className: "grid gap-x-(--gutter) gap-y-12 @4xl:grid-cols-12", children: [_jsxs("div", { className: "flex flex-col gap-8 @4xl:sticky @4xl:top-[calc(var(--topbar-h,0px)+2rem)] @4xl:col-span-4 @4xl:self-start", children: [header, summary ? (_jsxs("div", { className: "flex flex-col gap-3 border-t border-line pt-6", children: [_jsxs("p", { className: "flex items-baseline gap-3", children: [_jsx("span", { className: "font-display text-display-l tabular text-fg", children: nf.number(summary.rating, { minimumFractionDigits: 1, maximumFractionDigits: 1 }) }), _jsx(RatingStars, { rating: summary.rating, label: ctx.t("ratingOutOf", { rating: nf.number(summary.rating, { maximumFractionDigits: 1 }) }) })] }), _jsxs("p", { className: "text-small text-fg-muted", children: [sourceName
                                         ? ctx.t("ratingSummary", { rating: nf.number(summary.rating, { maximumFractionDigits: 1 }), source: sourceName })
-                                        : ctx.t("ratingSummaryDirect", { rating: nf.number(summary.rating, { maximumFractionDigits: 1 }) }), " ", "\u2014 ", ctx.t("reviewCount", { count: summary.count })] }), summary.link ? (_jsx(BlockLink, { href: summary.link.href, newTab: summary.link.newTab ?? true, appearance: "link", components: ctx.components, labels: ctx.labels, locale: ctx.locale, className: "self-start text-small", children: summary.link.label ?? ctx.t("readAllReviews") })) : null] })) : null] }), _jsx("ol", { className: "flex flex-col @4xl:col-span-7 @4xl:col-start-6", children: items.map((item, i) => (_jsx("li", { className: "border-t border-line py-7 first:border-t-0 first:pt-0 @4xl:first:border-t @4xl:first:pt-7", children: _jsx(QuoteFigure, { item: item, index: i, ctx: ctx }) }, i))) })] }));
+                                        : ctx.t("ratingSummaryDirect", { rating: nf.number(summary.rating, { maximumFractionDigits: 1 }) }), " ", "\u2014 ", ctx.t("reviewCount", { count: summary.count })] }), summary.link ? (_jsx(BlockLink, { href: summary.link.href, newTab: summary.link.newTab ?? true, appearance: "link", components: ctx.components, labels: ctx.labels, locale: ctx.locale, className: "inline-flex min-h-6 items-center self-start text-small", children: summary.link.label ?? ctx.t("readAllReviews") })) : null] })) : null] }), _jsx("ol", { className: "flex flex-col @4xl:col-span-7 @4xl:col-start-6", children: items.map((item, i) => (_jsx("li", { className: "border-t border-line py-7 first:border-t-0 first:pt-0 @4xl:first:border-t @4xl:first:pt-7", children: _jsx(QuoteFigure, { item: item, index: i, ctx: ctx }) }, i))) })] }));
 }

package/dist/business/approval-flow.js

@@ -110,7 +110,7 @@ function groupStatus(g) {
  * <ApprovalFlow requester={{ name: "Deniz Aydın", at: "2026-11-03T09:12:00Z" }} stages={stages} />
  * ```
  */
-export const ApprovalFlow = React.forwardRef(function ApprovalFlow({ stages, requester, orientation = "vertical", variant = "full", now, labels, className, ...props }, ref) {
+export const ApprovalFlow = /*#__PURE__*/ React.forwardRef(function ApprovalFlow({ stages, requester, orientation = "vertical", variant = "full", now, labels, className, ...props }, ref) {
     const t = useLabels("approvalFlow", approvalFlowLabels, labels);
     if (variant === "compact")
         return _jsx(ApprovalSummary, { stages: stages, labels: labels, className: className });
@@ -153,7 +153,7 @@ function ApproverRow({ approver: a, t, stageActive }) {
     return (_jsxs("li", { className: "flex min-w-0 gap-2.5", "data-slot": "approval-approver", "data-decision": d?.value, children: [_jsx(Avatar, { name: a.name, src: a.avatarUrl, size: "sm" }), _jsxs("div", { className: "min-w-0 flex-1 text-[13px] leading-snug", children: [_jsxs("p", { className: "flex flex-wrap items-baseline gap-x-1.5", children: [_jsx("span", { className: "font-medium text-fg", children: a.name }), a.role ? _jsx("span", { className: "text-xs text-fg-subtle", children: a.role }) : null, d?.delegatedFrom ? (_jsxs(Badge, { tone: "info", size: "sm", children: [_jsx(Forward, {}), " ", t("delegated")] })) : null] }), d ? (_jsxs("p", { className: "mt-0.5 text-xs text-fg-muted", children: [_jsx("span", { className: cn("font-medium", decisionTone), children: decisionWord(t, d.value) }), " ", _jsx("time", { dateTime: d.at, className: "tabular", children: format.dateTime(d.at, { day: "numeric", month: "short", hour: "2-digit", minute: "2-digit" }) }), d.delegatedFrom ? _jsxs(_Fragment, { children: [" \u00B7 ", t("delegatedFrom", { name: d.delegatedFrom.name })] }) : null] })) : (_jsx("p", { className: "mt-0.5 text-xs text-fg-subtle", children: stageActive ? t("pending") : "—" })), d?.note ? (_jsx("blockquote", { className: "mt-1.5 rounded-ui-sm border-s-2 border-(--q) bg-surface-2 px-2.5 py-1.5 text-[13px] text-fg [--q:var(--line)] data-[v=rejected]:[--q:var(--danger)] data-[v=changes_requested]:[--q:var(--warning)]", "data-v": d.value, children: d.note })) : null] })] }));
 }
 /** Inline status for table rows: one dot per stage + "2 of 3 approved". */
-export const ApprovalSummary = React.forwardRef(function ApprovalSummary({ stages, showCurrent = true, labels, className, ...props }, ref) {
+export const ApprovalSummary = /*#__PURE__*/ React.forwardRef(function ApprovalSummary({ stages, showCurrent = true, labels, className, ...props }, ref) {
     const t = useLabels("approvalFlow", approvalFlowLabels, labels);
     const counted = stages.filter((s) => s.status !== "skipped");
     const done = counted.filter((s) => s.status === "approved").length;

package/dist/business/import-wizard.js

@@ -111,7 +111,7 @@ const DEFAULT_LOCALES = [
  * <ImportWizard fields={contactFields} dedupeKeys={["email"]} onImport={(rows, { signal }) => api.contacts.bulk(rows, { signal })} />
  * ```
  */
-export const ImportWizard = React.forwardRef(function ImportWizard({ fields, dedupeKeys, maxRows = 50_000, maxSize = 20 * 1024 * 1024, chunkSize = 200, onImport, templates, sampleFile, fileLocales, onDone, previewLimit = 200, labels, className, ...props }, ref) {
+export const ImportWizard = /*#__PURE__*/ React.forwardRef(function ImportWizard({ fields, dedupeKeys, maxRows = 50_000, maxSize = 20 * 1024 * 1024, chunkSize = 200, onImport, templates, sampleFile, fileLocales, onDone, previewLimit = 200, labels, className, ...props }, ref) {
     const t = useLabels("importWizard", importWizardLabels, labels);
     const { locale, format } = useLocale();
     const [step, setStep] = React.useState("upload");

package/dist/business/line-items.js

@@ -278,7 +278,7 @@ function LineItemsInner(props, ref) {
  * <LineItems currency="TRY" taxPack={trLineTaxPack()} units={["hour", "day", "pcs"]} defaultValue={rows} onValueChange={(rows, totals) => save(rows, totals.payable)} />
  * ```
  */
-export const LineItems = React.forwardRef(LineItemsInner);
+export const LineItems = /*#__PURE__*/ React.forwardRef(LineItemsInner);
 /* ------------------------------------------------------------------ */
 /* Summary                                                             */
 /* ------------------------------------------------------------------ */

package/dist/business/multi-step-form.js

@@ -28,7 +28,7 @@ export const multiStepFormLabels = {
     review: "Review",
     leave: "You have unsaved changes. Leave anyway?",
 };
-const MultiStepFormContext = React.createContext(null);
+const MultiStepFormContext = /*#__PURE__*/ React.createContext(null);
 function useCtx(part) {
     const ctx = React.useContext(MultiStepFormContext);
     if (!ctx)
@@ -262,7 +262,7 @@ function MultiStepFormInner(props, ref) {
  * </MultiStepForm>
  * ```
  */
-export const MultiStepForm = React.forwardRef(MultiStepFormInner);
+export const MultiStepForm = /*#__PURE__*/ React.forwardRef(MultiStepFormInner);
 /** The progress display (kit `Stepper`), wired to the form: completed steps are clickable. */
 export function MultiStepFormStepper({ variant = "numbered", className }) {
     const c = useCtx("MultiStepFormStepper");

package/dist/business/permission-matrix.js

@@ -67,7 +67,7 @@ const levelLabel = (t, v, scoped, scopeNames) => {
  *   inherited={manager} inheritedFrom="Manager" baseline={saved} onSave={save} dependencies={[{ action: "edit", requires: "view" }]} />
  * ```
  */
-export const PermissionMatrix = React.forwardRef(function PermissionMatrix({ resources, actions, scopes, value: valueProp, defaultValue, onValueChange, inherited, inheritedFrom = "parent role", baseline, onSave, subject = "this role", readOnly, dependencies, onDependencyApplied, maxHeight, labels, className, ...props }, ref) {
+export const PermissionMatrix = /*#__PURE__*/ React.forwardRef(function PermissionMatrix({ resources, actions, scopes, value: valueProp, defaultValue, onValueChange, inherited, inheritedFrom = "parent role", baseline, onSave, subject = "this role", readOnly, dependencies, onDependencyApplied, maxHeight, labels, className, ...props }, ref) {
     const t = useLabels("permissionMatrix", permissionMatrixLabels, labels);
     const [value, setValueState] = useControllableState({ value: valueProp, defaultValue: defaultValue ?? {} });
     const [collapsed, setCollapsed] = React.useState(() => new Set());

package/dist/business/setup-checklist.js

@@ -44,7 +44,7 @@ function counts(items) {
  * {hidden ? <SetupChecklistLauncher items={steps} onOpen={() => setHidden(false)} /> : null}
  * ```
  */
-export const SetupChecklist = React.forwardRef(function SetupChecklist({ title, description, items, onSkip, onUndoSkip, dismissed, onDismissedChange, variant = "card", expandFirstIncomplete = true, onAllDone, loading, labels, className, ...props }, ref) {
+export const SetupChecklist = /*#__PURE__*/ React.forwardRef(function SetupChecklist({ title, description, items, onSkip, onUndoSkip, dismissed, onDismissedChange, variant = "card", expandFirstIncomplete = true, onAllDone, loading, labels, className, ...props }, ref) {
     const t = useLabels("setupChecklist", setupChecklistLabels, labels);
     const { done, total, allDone } = counts(items);
     const firstOpen = items.find((i) => (i.status === "todo" || i.status === "in_progress") && !i.locked)?.id;
@@ -85,7 +85,7 @@ function SetupChecklistItem({ item, index, open, current, onToggle, onSkip, onUn
     return (_jsxs("li", { "data-slot": "setup-checklist-item", "data-status": item.status, "data-current": current && !finished ? "" : undefined, className: cn("vui-setup-item rounded-ui transition-colors", current && !finished && !compact && "bg-accent-soft/50"), children: [_jsx("h3", { className: "m-0 text-inherit font-normal", children: _jsxs("button", { type: "button", "aria-expanded": hasDetails ? open : undefined, "aria-controls": hasDetails ? panelId : undefined, onClick: hasDetails ? onToggle : undefined, className: cn("focus-ring flex w-full items-center gap-3 rounded-ui text-start", compact ? "px-1 py-1.5" : "px-2.5 py-2.5", hasDetails && "hover:bg-hover"), children: [_jsx(StatusMark, { status: item.status, locked: locked, index: index }), _jsxs("span", { className: cn("min-w-0 flex-1 text-sm", finished ? "text-fg-muted" : "text-fg", item.status === "done" && "line-through decoration-fg-subtle/60", item.status === "skipped" && "italic"), children: [item.title, _jsxs("span", { className: "sr-only", children: [", ", statusText] })] }), item.optional && !finished ? _jsx("span", { className: "text-[11px] text-fg-subtle", children: t("optional") }) : null, item.estimate && !finished && !compact ? _jsx("span", { className: "font-mono text-[11px] text-fg-subtle tabular", children: item.estimate }) : null, hasDetails ? _jsx(ChevronDown, { "aria-hidden": true, className: cn("size-4 shrink-0 text-fg-subtle transition-transform duration-200", open && "rotate-180") }) : null] }) }), hasDetails ? (_jsxs("div", { id: panelId, hidden: !open, className: cn("vui-setup-panel", compact ? "ps-8 pb-2" : "ps-[2.875rem] pe-3 pb-3"), children: [item.description ? _jsx("p", { className: "text-[13px] text-fg-muted", children: item.description }) : null, locked ? (_jsxs("p", { className: "mt-1.5 flex items-center gap-1.5 text-xs text-fg-subtle", children: [_jsx(Lock, { "aria-hidden": true, className: "size-3" }), " ", item.locked.reason] })) : null, _jsxs("div", { className: "mt-2.5 flex flex-wrap items-center gap-2 empty:hidden", children: [item.action && !finished ? (item.action.href ? (_jsx(Button, { asChild: true, size: "sm", variant: current ? "primary" : "secondary", disabled: locked, children: _jsxs(SmartLink, { href: item.action.href, children: [item.action.label, " ", _jsx(ArrowRight, { className: "rtl:rotate-180" })] }) })) : (_jsxs(Button, { size: "sm", variant: current ? "primary" : "secondary", disabled: locked, onClick: item.action.onSelect, children: [item.action.label, " ", _jsx(ArrowRight, { className: "rtl:rotate-180" })] }))) : null, !finished && onSkip ? (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => onSkip(item.id), children: t("skip") })) : null, item.status === "skipped" && onUndoSkip ? (_jsxs(Button, { size: "sm", variant: "ghost", onClick: () => onUndoSkip(item.id), children: [_jsx(Undo2, {}), " ", t("undoSkip")] })) : null] })] })) : null] }));
 }
 /** A pill that reopens a dismissed checklist: "Setup guide · 3 of 6". */
-export const SetupChecklistLauncher = React.forwardRef(function SetupChecklistLauncher({ items, onOpen, floating, labels, className, ...props }, ref) {
+export const SetupChecklistLauncher = /*#__PURE__*/ React.forwardRef(function SetupChecklistLauncher({ items, onOpen, floating, labels, className, ...props }, ref) {
     const t = useLabels("setupChecklist", setupChecklistLabels, labels);
     const { done, total } = counts(items);
     return (_jsxs("button", { ref: ref, type: "button", "data-slot": "setup-checklist-launcher", onClick: onOpen, className: cn("focus-ring inline-flex h-9 items-center gap-2 rounded-full surface-popover ps-1.5 pe-3.5 text-[13px] font-medium text-fg transition-[transform,box-shadow] duration-150 motion-safe:hover:-translate-y-px", floating && "fixed end-5 bottom-5 z-40", className), ...props, children: [_jsx(ProgressCircle, { value: total ? (done / total) * 100 : 0, size: "sm", "aria-hidden": true, className: "size-6" }), t("reopen", { done, total })] }));

package/dist/business/signer-status.js

@@ -44,7 +44,7 @@ const stateTone = {
  * <SignerStatus sequential signers={contract.signers} onRemind={(s) => api.remind(s.id)} />
  * ```
  */
-export const SignerStatus = React.forwardRef(function SignerStatus({ signers, sequential, title, onRemind, now, labels, className, ...props }, ref) {
+export const SignerStatus = /*#__PURE__*/ React.forwardRef(function SignerStatus({ signers, sequential, title, onRemind, now, labels, className, ...props }, ref) {
     const t = useLabels("signerStatus", signerStatusLabels, labels);
     const f = useFormat();
     const titleId = React.useId();

package/dist/charts/bar-chart.js

@@ -14,7 +14,7 @@ import { estimateAxisWidth, extent, formatValue, seriesColor } from "./utils.js"
  * ```
  */
 export function BarChart({ series, layout = "vertical", stack = "none", radius = 4, highlight, valueLabels, barSize = "auto", reference, ...props }) {
-    return (_jsx(Chart, { skeleton: layout === "horizontal" ? "bar-horizontal" : "bar", ...props, children: _jsx(BarPlot, { series: series, layout: layout, stack: stack, radius: radius, highlight: highlight, valueLabels: valueLabels, barSize: barSize, reference: reference }) }));
+    return (_jsx(Chart, { skeleton: layout === "horizontal" ? "bar-horizontal" : "bar", barKeys: series ?? Object.keys(props.config), ...props, children: _jsx(BarPlot, { series: series, layout: layout, stack: stack, radius: radius, highlight: highlight, valueLabels: valueLabels, barSize: barSize, reference: reference }) }));
 }
 function BarPlot({ series: keys, layout, stack, radius = 4, highlight, valueLabels, barSize, reference }) {
     const chart = useChart();

package/dist/charts/bar-list.js

@@ -18,7 +18,7 @@ const textOf = (item) => item.textLabel ?? (typeof item.label === "string" ? ite
  * <BarList aria-label="Top sources" data={[{ key: "google", label: "Google", value: 4120 }]} showShare />
  * ```
  */
-export const BarList = React.forwardRef(function BarList({ data, format = "number", color, max, sort = "desc", showShare, onItemClick, size = "md", variant = "filled", loading, loadingRows = 5, emptyMessage, labels, className, ...props }, ref) {
+export const BarList = /*#__PURE__*/ React.forwardRef(function BarList({ data, format = "number", color, max, sort = "desc", showShare, onItemClick, size = "md", variant = "filled", loading, loadingRows = 5, emptyMessage, labels, className, ...props }, ref) {
     const f = useFormat();
     const { locale } = useLocale();
     const t = useLabels("chart", chartLabels, labels);

package/dist/charts/chart-shell.d.ts

@@ -59,6 +59,8 @@ export interface ChartContextValue {
     onPointClick?: (row: Row, seriesKey: string) => void;
     height: number | undefined;
     idPrefix: string;
+    /** Series drawn as bars: no stroke pattern, so their legend and tooltip swatch is a solid square. */
+    isBar: (key: string) => boolean;
 }
 /** Chart context: config, formatters and hidden series. Use inside `<Chart>`. */
 export declare function useChart(): ChartContextValue;
@@ -100,6 +102,11 @@ export interface ChartProps<T extends object = Row> extends Omit<React.HTMLAttri
     labels?: Partial<ChartLabels>;
     /** Replace the generated data table. */
     table?: ChartTableSpec;
+    /**
+     * Series drawn as bars. Bars carry no stroke pattern, so their legend and tooltip swatch is a
+     * solid square even when the other series get dashed/dotted lines. Bar and Combo charts set it.
+     */
+    barKeys?: string[];
     /** Content beside (or under) the plot — e.g. the Donut legend list. */
     aside?: React.ReactNode;
     asidePosition?: "side" | "bottom";
@@ -127,8 +134,8 @@ export interface ChartLegendContentProps extends React.HTMLAttributes<HTMLDivEle
     keys?: string[];
     /** Click toggles visibility. Default `true`. */
     interactive?: boolean;
-    /** Swatch shape. Default: a line for line/area patterns, a dot otherwise. */
-    swatch?: "dot" | "line";
+    /** Swatch shape. Default: a solid square for bar series, a line for line/area patterns, a dot otherwise. */
+    swatch?: "dot" | "line" | "square";
 }
 /** The legend: one toggle per series (`aria-pressed`). At least one series always stays visible. */
 export declare function ChartLegendContent({ keys, interactive, swatch, className, ...props }: ChartLegendContentProps): React.JSX.Element;

package/dist/charts/chart-shell.js

@@ -29,7 +29,7 @@ export const chartLabels = {
     range: "{from} – {to}.",
     seriesSummary: "{label}: low {min} ({minAt}), high {max} ({maxAt}), average {avg}.",
 };
-const ChartContext = React.createContext(null);
+const ChartContext = /*#__PURE__*/ React.createContext(null);
 /** Chart context: config, formatters and hidden series. Use inside `<Chart>`. */
 export function useChart() {
     const ctx = React.useContext(ChartContext);
@@ -52,7 +52,7 @@ const capitalise = (s) => (s ? s[0].toUpperCase() + s.slice(1) : s);
  * ```
  */
 export function Chart(props) {
-    const { data: dataProp, config, x, xLabel, xFormat, yFormat, height, aspect, state: stateProp, title, summary, tableToggle, legend, tooltipIndicator = "dot", animate = true, onPointClick, hiddenSeries, defaultHiddenSeries, onHiddenSeriesChange, labels, table, aside, asidePosition = "side", skeleton = "area", toolbar, className, style, children, ...rest } = props;
+    const { data: dataProp, config, x, xLabel, xFormat, yFormat, height, aspect, state: stateProp, title, summary, tableToggle, legend, tooltipIndicator = "dot", animate = true, onPointClick, hiddenSeries, defaultHiddenSeries, onHiddenSeriesChange, labels, table, aside, asidePosition = "side", skeleton = "area", toolbar, barKeys, className, style, children, ...rest } = props;
     const data = dataProp;
     const f = useFormat();
     const t = useLabels("chart", chartLabels, labels);
@@ -79,6 +79,9 @@ export function Chart(props) {
     const status = stateProp ?? (data.length === 0 ? { status: "empty" } : { status: "ready" });
     const [showTable, setShowTable] = React.useState(false);
     const seriesFormat = React.useCallback((key) => config[key]?.format, [config]);
+    const barKeySet = barKeys?.join("\u0000") ?? "";
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const isBar = React.useCallback((key) => (barKeys ?? []).includes(key), [barKeySet]);
     const ctx = React.useMemo(() => ({
         config,
         series,
@@ -99,7 +102,8 @@ export function Chart(props) {
         onPointClick: onPointClick,
         height: height === "auto" ? undefined : typeof height === "string" ? CHART_HEIGHTS[height] : height,
         idPrefix,
-    }), [config, series, visibleSeries, hiddenSet, toggleSeries, data, x, xFormat, yFormat, f, t, animate, reduced, tooltipIndicator, onPointClick, height, idPrefix, seriesFormat]);
+        isBar,
+    }), [config, series, visibleSeries, hiddenSet, toggleSeries, data, x, xFormat, yFormat, f, t, animate, reduced, tooltipIndicator, onPointClick, height, idPrefix, seriesFormat, isBar]);
     const vars = React.useMemo(() => {
         const out = {};
         for (const s of series)
@@ -149,19 +153,21 @@ export function Chart(props) {
 }
 /** The legend: one toggle per series (`aria-pressed`). At least one series always stays visible. */
 export function ChartLegendContent({ keys, interactive = true, swatch, className, ...props }) {
-    const { series, isHidden, toggleSeries, visibleSeries, t } = useChart();
+    const { series, isHidden, toggleSeries, visibleSeries, t, isBar } = useChart();
     const items = keys ? series.filter((s) => keys.includes(s.key)) : series;
     return (_jsx("div", { role: "group", "aria-label": t("legend"), "data-slot": "chart-legend", className: cn("flex flex-wrap items-center gap-x-1 gap-y-1", className), ...props, children: items.map((s) => {
             const hidden = isHidden(s.key);
             const locked = !hidden && visibleSeries.length <= 1;
             const Icon = s.icon;
-            const content = (_jsxs(_Fragment, { children: [Icon ? _jsx(Icon, { className: "size-3.5" }) : _jsx(LegendSwatch, { color: seriesColor(s.key), pattern: s.pattern, shape: swatch ?? (s.pattern !== "solid" ? "line" : "dot") }), _jsx("span", { className: cn(hidden && "line-through decoration-fg-subtle"), children: s.label })] }));
+            const content = (_jsxs(_Fragment, { children: [Icon ? _jsx(Icon, { className: "size-3.5" }) : _jsx(LegendSwatch, { color: seriesColor(s.key), pattern: s.pattern, shape: swatch ?? (isBar(s.key) ? "square" : s.pattern !== "solid" ? "line" : "dot") }), _jsx("span", { className: cn(hidden && "line-through decoration-fg-subtle"), children: s.label })] }));
             if (!interactive)
                 return (_jsx("span", { className: "inline-flex items-center gap-1.5 px-1.5 text-[12.5px] text-fg-muted", children: content }, s.key));
             return (_jsx("button", { type: "button", "aria-pressed": !hidden, "aria-disabled": locked || undefined, onClick: () => toggleSeries(s.key), className: cn("inline-flex h-7 items-center gap-1.5 rounded-ui-sm px-2 text-[12.5px] text-fg-muted transition-[color,background-color,opacity] focus-ring hover:bg-hover hover:text-fg", hidden && "opacity-55", locked && "cursor-default hover:bg-transparent"), children: content }, s.key));
         }) }));
 }
 function LegendSwatch({ color, pattern, shape }) {
+    if (shape === "square")
+        return _jsx("span", { "aria-hidden": true, "data-swatch": "square", className: "size-2.5 shrink-0 rounded-[2px]", style: { background: color } });
     if (shape === "line")
         return (_jsx("svg", { width: "14", height: "8", viewBox: "0 0 14 8", "aria-hidden": true, className: "shrink-0", children: _jsx("line", { x1: "1", y1: "4", x2: "13", y2: "4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeDasharray: pattern === "dashed" ? "4 3" : pattern === "dotted" ? "0.5 3" : undefined }) }));
     return _jsx("span", { "aria-hidden": true, className: "size-2 shrink-0 rounded-[3px]", style: { background: color } });

package/dist/charts/chart.js

@@ -35,7 +35,7 @@ export function ChartTooltipContent({ active, payload, label, indicator, showTot
     return (_jsxs("div", { "data-slot": "chart-tooltip", className: cn("vui-chart-tooltip min-w-36 rounded-ui-sm px-2.5 py-2 text-[12px]", className), children: [header ? _jsx("div", { className: "mb-1.5 font-medium text-fg", children: header }) : null, _jsxs("div", { className: "grid gap-1", children: [rows.map((p) => {
                         const key = String(p.dataKey);
                         const s = chart.series.find((x) => x.key === key);
-                        return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ChartIndicator, { color: seriesColor(key), variant: ind, pattern: s?.pattern }), _jsx("span", { className: "me-auto text-fg-muted", children: s?.label ?? String(p.name ?? key) }), _jsx("span", { className: "font-mono text-fg tabular", children: chart.formatSeries(key, raw[key] ?? p.value) }), showShare && total ? _jsx("span", { className: "w-11 text-end font-mono text-fg-subtle tabular", children: chart.f.percent(numeric(key) / total) }) : null] }, key));
+                        return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ChartIndicator, { color: seriesColor(key), variant: chart.isBar(key) ? "dot" : ind, pattern: chart.isBar(key) ? undefined : s?.pattern }), _jsx("span", { className: "me-auto text-fg-muted", children: s?.label ?? String(p.name ?? key) }), _jsx("span", { className: "font-mono text-fg tabular", children: chart.formatSeries(key, raw[key] ?? p.value) }), showShare && total ? _jsx("span", { className: "w-11 text-end font-mono text-fg-subtle tabular", children: chart.f.percent(numeric(key) / total) }) : null] }, key));
                     }), showTotal && rows.length > 1 ? (_jsxs("div", { className: "mt-0.5 flex items-center gap-2 border-t border-line pt-1.5", children: [_jsx("span", { className: "me-auto text-fg-muted", children: chart.t("total") }), _jsx("span", { className: "font-mono font-medium text-fg tabular", children: chart.formatSeries(String(rows[0]?.dataKey), total) })] })) : null] })] }));
 }
 /** Recharts Tooltip wired to `ChartTooltipContent` and the themed cursor. */

package/dist/charts/combo-chart.js

@@ -5,7 +5,7 @@ import { Area, Bar, ComposedChart, Line } from "recharts";
 import { useLocale } from "../lib/locale.js";
 import { Chart, useChart } from "./chart-shell.js";
 import { ChartFrame, ChartGrid, ChartTooltip, ChartXAxis, ChartYAxis, useValueAxisWidth } from "./chart.js";
-import { alignZeroDomains, extent, patternDash, seriesColor } from "./utils.js";
+import { alignedAxes, extent, patternDash, seriesColor } from "./utils.js";
 /**
  * Volume and rate on two axes — bars on the start axis, a line on the end axis, zero lines aligned
  * so neither scale exaggerates. Axis sides are logical and swap in RTL.
@@ -15,7 +15,7 @@ import { alignZeroDomains, extent, patternDash, seriesColor } from "./utils.js";
  * ```
  */
 export function ComboChart({ bars, lines, areas = [], endAxisFormat, endAxis = true, stackBars, startAxisLabel, endAxisLabel, ...props }) {
-    return (_jsx(Chart, { skeleton: "bar", ...props, children: _jsx(ComboPlot, { bars: bars, lines: lines, areas: areas, endAxisFormat: endAxisFormat, endAxis: endAxis, stackBars: stackBars, startAxisLabel: startAxisLabel, endAxisLabel: endAxisLabel }) }));
+    return (_jsx(Chart, { skeleton: "bar", barKeys: bars, ...props, children: _jsx(ComboPlot, { bars: bars, lines: lines, areas: areas, endAxisFormat: endAxisFormat, endAxis: endAxis, stackBars: stackBars, startAxisLabel: startAxisLabel, endAxisLabel: endAxisLabel }) }));
 }
 function ComboPlot({ bars, lines, areas = [], endAxisFormat, endAxis, stackBars, startAxisLabel, endAxisLabel }) {
     const chart = useChart();
@@ -27,20 +27,18 @@ function ComboPlot({ bars, lines, areas = [], endAxisFormat, endAxis, stackBars,
     const startStacked = Boolean(stackBars);
     const endFormat = endAxisFormat ?? chart.config[endKeys[0] ?? ""]?.format;
     const startFormat = chart.config[startKeys[0] ?? ""]?.format ?? chart.yFormat;
-    const [startDomain, endDomain] = React.useMemo(() => {
+    const { domains: [startDomain, endDomain], ticks: [startTicks, endTicks] } = React.useMemo(() => {
         const a = extent(chart.data, startKeys, startStacked);
         const b = extent(chart.data, endKeys);
-        return alignZeroDomains(a, b);
+        return alignedAxes(a, b);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [chart.data, startKeys.join(), endKeys.join(), startStacked]);
-    // Non-negative data: four equal steps on both axes, so the grid lines serve both scales.
-    const ticksOf = (d) => (d[0] === 0 ? [0, 1, 2, 3, 4].map((i) => Number(((d[1] * i) / 4).toPrecision(12))) : undefined);
     const startWidth = useValueAxisWidth(startKeys, { stacked: startStacked, format: startFormat });
     const endWidth = useValueAxisWidth(endKeys, { format: endFormat });
     const left = rtl ? "end" : "start";
     const yId = (key, fallback) => axisOf(key, fallback);
     const titleProps = (value, side) => value ? { value, angle: -90, position: side === "left" ? "insideLeft" : "insideRight", className: "vui-chart-axis-title", offset: 0, style: { textAnchor: "middle" } } : undefined;
-    return (_jsx(ChartFrame, { children: _jsxs(ComposedChart, { data: chart.data, stackOffset: startStacked && startDomain[0] < 0 ? "sign" : undefined, margin: { top: 8, right: 4, bottom: 0, left: 4 }, barCategoryGap: "30%", children: [_jsx(ChartGrid, { yAxisId: "start" }), _jsx(ChartXAxis, {}), _jsx(ChartYAxis, { yAxisId: "start", orientation: left === "start" ? "left" : "right", domain: startDomain, ticks: ticksOf(startDomain), width: startWidth + (startAxisLabel ? 16 : 0), tickFormatter: (v) => chart.formatTick(v, startFormat), label: titleProps(startAxisLabel, left === "start" ? "left" : "right"), keys: startKeys }), _jsx(ChartYAxis, { yAxisId: "end", orientation: left === "start" ? "right" : "left", domain: endDomain, ticks: ticksOf(endDomain), hide: !endAxis || endKeys.length === 0, width: endWidth + (endAxisLabel ? 16 : 0), tickFormatter: (v) => chart.formatTick(v, endFormat), label: titleProps(endAxisLabel, left === "start" ? "right" : "left"), keys: endKeys }), _jsx(ChartTooltip, { cursor: { fill: "var(--hover)" } }), areas.map((key) => (_jsx(Area, { yAxisId: yId(key, "start"), dataKey: key, name: chart.config[key]?.label, hide: chart.isHidden(key), type: "monotone", stroke: seriesColor(key), strokeWidth: 1.5, fill: `color-mix(in oklch, ${seriesColor(key)} 16%, transparent)`, isAnimationActive: chart.animate }, key))), bars.map((key, i) => (_jsx(Bar, { yAxisId: yId(key, "start"), dataKey: key, name: chart.config[key]?.label, hide: chart.isHidden(key), stackId: stackBars ? "bars" : undefined, fill: seriesColor(key), radius: stackBars && i < bars.length - 1 ? 0 : [4, 4, 0, 0], maxBarSize: 40, isAnimationActive: chart.animate }, key))), lines.map((key) => {
+    return (_jsx(ChartFrame, { children: _jsxs(ComposedChart, { data: chart.data, stackOffset: startStacked && startDomain[0] < 0 ? "sign" : undefined, margin: { top: 8, right: 4, bottom: 0, left: 4 }, barCategoryGap: "30%", children: [_jsx(ChartGrid, { yAxisId: "start" }), _jsx(ChartXAxis, {}), _jsx(ChartYAxis, { yAxisId: "start", orientation: left === "start" ? "left" : "right", domain: startDomain, ticks: startTicks, width: startWidth + (startAxisLabel ? 16 : 0), tickFormatter: (v) => chart.formatTick(v, startFormat), label: titleProps(startAxisLabel, left === "start" ? "left" : "right"), keys: startKeys }), _jsx(ChartYAxis, { yAxisId: "end", orientation: left === "start" ? "right" : "left", domain: endDomain, ticks: endTicks, hide: !endAxis || endKeys.length === 0, width: endWidth + (endAxisLabel ? 16 : 0), tickFormatter: (v) => chart.formatTick(v, endFormat), label: titleProps(endAxisLabel, left === "start" ? "right" : "left"), keys: endKeys }), _jsx(ChartTooltip, { cursor: { fill: "var(--hover)" } }), areas.map((key) => (_jsx(Area, { yAxisId: yId(key, "start"), dataKey: key, name: chart.config[key]?.label, hide: chart.isHidden(key), type: "monotone", stroke: seriesColor(key), strokeWidth: 1.5, fill: `color-mix(in oklch, ${seriesColor(key)} 16%, transparent)`, isAnimationActive: chart.animate }, key))), bars.map((key, i) => (_jsx(Bar, { yAxisId: yId(key, "start"), dataKey: key, name: chart.config[key]?.label, hide: chart.isHidden(key), stackId: stackBars ? "bars" : undefined, fill: seriesColor(key), radius: stackBars && i < bars.length - 1 ? 0 : [4, 4, 0, 0], maxBarSize: 40, isAnimationActive: chart.animate }, key))), lines.map((key) => {
                     const s = chart.series.find((x) => x.key === key);
                     return (_jsx(Line, { yAxisId: yId(key, "end"), dataKey: key, name: s?.label, hide: chart.isHidden(key), type: "monotone", stroke: seriesColor(key), strokeWidth: 2, strokeDasharray: patternDash(s?.pattern), dot: { r: 2.5, fill: seriesColor(key), stroke: "var(--chart-tooltip)", strokeWidth: 1.5 }, activeDot: { r: 4, strokeWidth: 2, stroke: "var(--chart-tooltip)", fill: seriesColor(key) }, isAnimationActive: chart.animate }, key));
                 })] }) }));

package/dist/charts/donut-chart.js

@@ -55,7 +55,7 @@ export function DonutChart({ data, nameKey, valueKey, config, center = "total",
     const ctx = React.useMemo(() => ({ active, setActive, raw: slices }), [active, setActive, slices]);
     return (_jsx(DonutContext.Provider, { value: ctx, children: _jsx(Chart, { ...props, data: slices, config: effectiveConfig, height: height, legend: "none", skeleton: "donut", summary: summaryText, table: table, state: props.state ?? (rows.length === 0 ? { status: "empty" } : undefined), aside: legend === "none" ? undefined : _jsx(DonutLegend, {}), asidePosition: legend === "bottom" ? "bottom" : "side", children: _jsx(DonutPlot, { px: px, height: height, variant: variant, center: center, centerLabel: centerLabel }) }) }));
 }
-const DonutContext = React.createContext(null);
+const DonutContext = /*#__PURE__*/ React.createContext(null);
 const useDonut = () => React.useContext(DonutContext);
 function useSlices(slices) {
     const chart = useChart();

package/dist/charts/funnel.js

@@ -26,7 +26,7 @@ export const funnelLabels = {
  * <Funnel title="Sales pipeline" steps={[{ key: "leads", label: "Leads", value: 1240 }, …]} />
  * ```
  */
-export const Funnel = React.forwardRef(function Funnel({ steps, orientation = "horizontal", format = "integer", amountFormat = "currency", show = ["conversion", "dropoff"], color = "chart-1", compareTo, onStepClick, size = "md", loading, title, labels, className, style, ...props }, ref) {
+export const Funnel = /*#__PURE__*/ React.forwardRef(function Funnel({ steps, orientation = "horizontal", format = "integer", amountFormat = "currency", show = ["conversion", "dropoff"], color = "chart-1", compareTo, onStepClick, size = "md", loading, title, labels, className, style, ...props }, ref) {
     const f = useFormat();
     const t = useLabels("funnel", funnelLabels, labels);
     const first = steps[0]?.value ?? 0;