@evinvest/uikit 0.17.0 → 0.18.0

package/README.md

@@ -51,7 +51,7 @@ your Tailwind v4 entrypoint — this is the load-bearing part of the kit:
 | surfaces | `background` `card` `popover` `muted` `hover` |
 | ink | `ink` `ink-mid` `ink-soft` — hierarchy, loudest first |
 | lines | `border` `input` `ring` |
-| roles | `brand` `primary` `secondary` `positive` `accent-trace` `accent-debug` `accent-info` `accent-warn` `accent-error`, each with `on-*` where it gets filled |
+| roles | `brand` `primary` `secondary` `positive` `accent-trace` `accent-debug` `accent-info` `accent-warn` `accent-error`, each with `on-*` where it gets filled; `primary-ink` — the primary role as ink on a surface (`#128377` fill under a white `on-primary`, `#2a9d8f` ink) |
 | scalars | `radius` `control-radius` `control-py` `display-scale` `band-py` `page-max` `page-px` `shadow-*` `font-*` |
 | charts | `chart-1` … `chart-5` |
 
@@ -63,6 +63,17 @@ A surface takes its ink from the scope, so it carries no `-foreground`. A
 **filled role** does not — gold wants black and navy wants white regardless of
 polarity — so `on-{role}` exists exactly there.
 
+A fill and an ink are different jobs, and `primary` is the one role that
+names them separately: `primary` is the fill (`bg-primary text-on-primary` on
+a button, a checked switch or checkbox — `#128377`, white reads on it at
+4.63:1 and it clears 3:1 against `background`, `secondary`, `card` and
+`popover`) and `primary-ink` is the same hue as ink (`text-primary-ink` on a
+link or eyebrow, a radio dot, a slider range, `border-primary-ink` on a checked
+outline, the focus `ring` — `#2a9d8f`, 5.85:1 on `background`, 4.72:1 on
+`card`). Every other role holds its own label and reads as ink with one value.
+A consumer sheet must define `--primary-ink`; see
+[`docs/spec/accents.md`](../../docs/spec/accents.md).
+
 Accents are decorative and **ordered by significance**, quiet to loud. Pick a
 rung by how loud the thing should be, never by what it means; see
 [`docs/spec/accents.md`](../../docs/spec/accents.md). Every consumer defines all
@@ -78,11 +89,6 @@ state, never its appearance (`Red`) and never its selection (`Default`); see
 and carries EV's values: a single dark palette on `:root, .dark`. A consumer
 with two polarities writes its own sheet against the same names.
 
-`text-main-mist`, `bg-sidebar`, `text-muted-foreground` and the rest keep
-working, and the current tokens are re-pointed at the old values so rendered
-colour is unchanged. Import it instead while migrating; it goes away once every
-consumer has moved.
-
 ## Usage
 
 ```tsx
@@ -188,8 +194,10 @@ measuring needs host-only `web-sys`). Known gaps:
   at day granularity (days outside render `disabled` + `data-disabled="true"`);
   `disabled` freezes the whole grid and the nav the same way; the nav buttons
   take label overrides. TS-only `locale` renders the caption and weekday headers through
-  `Intl` (Monday-first); Rust has no `Intl`, so its captions stay English. Rust
-  does manual date math; TS uses the built-in `Date`.
+  `Intl` (Monday-first): `weekday: "short"`, falling back to `"narrow"` for a
+  locale whose short form contains whitespace (vi's "Thứ 2" → "T2", he's
+  "יום ב׳" → "ב׳") as long as narrow still yields seven distinct labels. Rust has no `Intl`, so its captions
+  stay English. Rust does manual date math; TS uses the built-in `Date`.
 - **date-time-picker:** the kit's own bricks only — an outline trigger, a
   `Popover` with the `Calendar` and two numeric 24-hour hours/minutes fields (no
   native `datetime-local` / `time` input, so the browser's locale popup never

package/dist/index.d.ts

@@ -254,7 +254,7 @@ declare const buttonVariantClasses: {
     readonly outline: "border bg-transparent shadow-xs hover:bg-hover hover:text-ink";
     readonly ghost: "hover:bg-hover hover:text-ink";
     readonly destructive: "bg-accent-error text-on-accent-error hover:bg-accent-error/90 focus-visible:ring-accent-error/20";
-    readonly link: "text-primary underline-offset-4 hover:underline";
+    readonly link: "text-primary-ink underline-offset-4 hover:underline";
 };
 type ButtonVariant = keyof typeof buttonVariantClasses;
 declare const buttonSizeClasses: {

package/dist/index.js

@@ -234,9 +234,19 @@ function useFloating(opts) {
 
 // src/primitives/focus-scope.tsx
 import * as React6 from "react";
-var FOCUSABLE = 'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])';
+var FOCUSABLE = [
+  "a[href]",
+  "button:not([disabled])",
+  "textarea:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "[tabindex]"
+].map((sel) => `${sel}:not([tabindex="-1"])`).join(",");
+function focusCandidates(root) {
+  return Array.from(root.querySelectorAll(FOCUSABLE));
+}
 function focusable(root) {
-  return Array.from(root.querySelectorAll(FOCUSABLE)).filter(
+  return focusCandidates(root).filter(
     (el) => el.offsetWidth > 0 || el.offsetHeight > 0 || el === document.activeElement
   );
 }
@@ -708,7 +718,7 @@ var buttonVariantClasses = {
   "outline": "border bg-transparent shadow-xs hover:bg-hover hover:text-ink",
   "ghost": "hover:bg-hover hover:text-ink",
   "destructive": "bg-accent-error text-on-accent-error hover:bg-accent-error/90 focus-visible:ring-accent-error/20",
-  "link": "text-primary underline-offset-4 hover:underline"
+  "link": "text-primary-ink underline-offset-4 hover:underline"
 };
 var buttonSizeClasses = {
   "xs": "h-7 gap-1 px-2 text-xs has-[>svg]:px-1.5",
@@ -930,7 +940,7 @@ var emptyMediaVariants = {
   "icon": "bg-muted text-ink flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6"
 };
 var EMPTY_TITLE = "text-lg font-medium tracking-tight";
-var EMPTY_DESCRIPTION = "text-ink-soft [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4";
+var EMPTY_DESCRIPTION = "text-ink-soft [&>a:hover]:text-primary-ink text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4";
 var EMPTY_CONTENT = "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance";
 
 // src/components/empty.tsx
@@ -1032,9 +1042,9 @@ var FIELD_SET = "flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has
 var FIELD_LEGEND = "mb-3 font-medium data-[variant=legend]:text-base data-[variant=label]:text-sm";
 var FIELD_GROUP = "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4";
 var FIELD_CONTENT = "group/field-content flex flex-1 flex-col gap-1.5 leading-snug";
-var FIELD_LABEL = "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4 has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary";
+var FIELD_LABEL = "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4 has-data-[state=checked]:bg-primary-ink/5 has-data-[state=checked]:border-primary-ink";
 var FIELD_TITLE = "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50";
-var FIELD_DESCRIPTION = "text-ink-soft text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5 [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4";
+var FIELD_DESCRIPTION = "text-ink-soft text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5 [&>a:hover]:text-primary-ink [&>a]:underline [&>a]:underline-offset-4";
 var FIELD_SEPARATOR = "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2";
 var FIELD_SEPARATOR_LINE = "absolute inset-0 top-1/2 shrink-0 bg-border h-px w-full";
 var FIELD_SEPARATOR_CONTENT = "bg-background text-ink-soft relative mx-auto block w-fit px-2";
@@ -1643,7 +1653,7 @@ var itemMediaVariants = {
 };
 var ITEM_CONTENT = "flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none";
 var ITEM_TITLE = "flex w-fit items-center gap-2 text-sm leading-snug font-medium";
-var ITEM_DESCRIPTION = "text-ink-soft line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4";
+var ITEM_DESCRIPTION = "text-ink-soft line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary-ink [&>a]:underline [&>a]:underline-offset-4";
 var ITEM_ACTIONS = "flex items-center gap-2";
 var ITEM_HEADER = "flex basis-full items-center justify-between gap-2";
 var ITEM_FOOTER = "flex basis-full items-center justify-between gap-2";
@@ -1947,8 +1957,8 @@ function PaginationEllipsis({
 import "react";
 
 // src/generated/progress.ts
-var PROGRESS_TRACK = "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full";
-var PROGRESS_INDICATOR = "bg-primary h-full w-full flex-1 transition-all";
+var PROGRESS_TRACK = "bg-primary-ink/20 relative h-2 w-full overflow-hidden rounded-full";
+var PROGRESS_INDICATOR = "bg-primary-ink h-full w-full flex-1 transition-all";
 
 // src/components/progress.tsx
 import { jsx as jsx22 } from "react/jsx-runtime";
@@ -2466,7 +2476,7 @@ var SECTION_BASE = "w-full px-[var(--page-px)]";
 var SECTION_PY = "py-[var(--band-py)]";
 var SECTION_PY_TIGHT = "py-[var(--band-py-tight)]";
 var SECTION_HEAD = "flex flex-col gap-2 md:gap-3.5";
-var EYEBROW = "font-medium text-[10px] md:text-[11.5px] tracking-[0.15em] md:tracking-[0.16em] text-primary";
+var EYEBROW = "font-medium text-[10px] md:text-[11.5px] tracking-[0.15em] md:tracking-[0.16em] text-primary-ink [.bg-primary_&]:text-on-primary";
 var DISPLAY_BASE = "font-display [font-weight:700] max-w-[54rem] tracking-[-0.005em] leading-[1.16] md:leading-[1.14] text-[calc(1.5625rem*var(--display-scale))] md:text-[calc(2.625rem*var(--display-scale))]";
 var LEDE = "max-w-[52rem] text-[15px] md:text-[17px] leading-[1.58] text-ink-soft";
 var PROSE = "text-[14px] md:text-[15px] leading-[1.62] text-ink-soft";
@@ -2924,7 +2934,7 @@ import * as React45 from "react";
 
 // src/generated/radio-group.ts
 var RADIO_GROUP_ROOT = "grid gap-3";
-var RADIO_GROUP_ITEM = "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-accent-error/20 aria-invalid:border-accent-error aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50";
+var RADIO_GROUP_ITEM = "border-input text-primary-ink focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-accent-error/20 aria-invalid:border-accent-error aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50";
 
 // src/components/radio-group.tsx
 import { jsx as jsx35 } from "react/jsx-runtime";
@@ -3018,7 +3028,7 @@ function RadioGroupItem({
           children: /* @__PURE__ */ jsx35(
             "svg",
             {
-              className: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2",
+              className: "fill-primary-ink absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2",
               viewBox: "0 0 24 24",
               "aria-hidden": "true",
               children: /* @__PURE__ */ jsx35("circle", { cx: "12", cy: "12", r: "10" })
@@ -3036,8 +3046,8 @@ import * as React46 from "react";
 // src/generated/slider.ts
 var SLIDER_ROOT = "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col";
 var SLIDER_TRACK = "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5";
-var SLIDER_RANGE = "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full";
-var SLIDER_THUMB = "border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-ink shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50";
+var SLIDER_RANGE = "bg-primary-ink absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full";
+var SLIDER_THUMB = "border-primary-ink ring-ring/50 block size-4 shrink-0 rounded-full border bg-ink shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50";
 
 // src/components/slider.tsx
 import { jsx as jsx36, jsxs as jsxs9 } from "react/jsx-runtime";
@@ -6970,7 +6980,7 @@ var CALENDAR_NAV = "flex items-center justify-between gap-1 w-full px-1";
 var CALENDAR_CAPTION = "text-sm font-medium select-none";
 var CALENDAR_GRID = "w-full border-collapse mt-4";
 var CALENDAR_WEEKDAY_ROW = "flex";
-var CALENDAR_WEEKDAY = "text-ink-soft rounded-md w-9 shrink-0 font-normal text-[0.8rem] select-none";
+var CALENDAR_WEEKDAY = "text-ink-soft rounded-md w-9 shrink-0 font-normal text-[0.8rem] select-none whitespace-nowrap";
 var CALENDAR_WEEK = "flex w-full mt-2";
 var CALENDAR_DAY_EMPTY = "relative size-9 shrink-0 p-0 select-none";
 var CALENDAR_DAY_CELL = "relative size-9 shrink-0 p-0 text-center select-none";
@@ -7033,13 +7043,19 @@ function outOfRange(day, min, max) {
   return !!min && t < startOfDay(min).getTime() || !!max && t > startOfDay(max).getTime();
 }
 var MONDAY = new Date(2024, 0, 1);
-function localisedWeekdays(locale) {
-  const fmt = new Intl.DateTimeFormat(locale, { weekday: "short" });
+function formatWeekdays(locale, weekday) {
+  const fmt = new Intl.DateTimeFormat(locale, { weekday });
   return Array.from(
     { length: 7 },
     (_, i) => fmt.format(new Date(MONDAY.getFullYear(), MONDAY.getMonth(), MONDAY.getDate() + i))
   );
 }
+function localisedWeekdays(locale) {
+  const short = formatWeekdays(locale, "short");
+  if (!short.some((label) => /\s/.test(label))) return short;
+  const narrow = formatWeekdays(locale, "narrow");
+  return new Set(narrow).size === narrow.length ? narrow : short;
+}
 function Calendar({
   selected,
   onSelect,
@@ -7289,6 +7305,7 @@ function DateTimePicker({
   });
   const rootRef = React67.useRef(null);
   const hoursRef = React67.useRef(null);
+  const focusTrigger = () => rootRef.current?.querySelector("[data-slot=date-time-picker-trigger]")?.focus();
   React67.useEffect(() => {
     if (!isOpen) return;
     hoursRef.current?.focus();
@@ -7296,9 +7313,7 @@ function DateTimePicker({
       const active = document.activeElement;
       const content = hoursRef.current?.closest("[data-slot=date-time-picker-content]");
       const lost = !active || active === document.body || !!content?.contains(active);
-      if (lost) {
-        rootRef.current?.querySelector("[data-slot=date-time-picker-trigger]")?.focus();
-      }
+      if (lost) focusTrigger();
     };
   }, [isOpen]);
   const emit = (next) => setValue(clampMoment(atMinute(next), min, max));
@@ -7330,6 +7345,15 @@ function DateTimePicker({
     setValue(null);
     setOpen(false);
   };
+  const onContentKeyDown = (e) => {
+    if (e.key !== "Tab") return;
+    const items = focusCandidates(e.currentTarget);
+    const edge = e.shiftKey ? items[0] : items[items.length - 1];
+    if (!edge || e.target !== edge) return;
+    e.preventDefault();
+    setOpen(false);
+    focusTrigger();
+  };
   const onContentBlur = (e) => {
     const next = e.relatedTarget;
     if (!(next instanceof Node)) return;
@@ -7383,6 +7407,7 @@ function DateTimePicker({
         "aria-label": labels.dialog ?? "Choose date and time",
         align,
         onBlur: onContentBlur,
+        onKeyDown: onContentKeyDown,
         className: DATE_TIME_PICKER_CONTENT,
         children: [
           /* @__PURE__ */ jsx57(