@seekalfred/primitives 0.6.0 → 0.7.1

package/README.md

@@ -224,8 +224,8 @@ A new string label swaps as a whole and the pill's width springs to the new size
 ```tsx
 <Breadcrumbs>
   <BreadcrumbItem href="/">Home</BreadcrumbItem>
-  <BreadcrumbItem href="/design-thinking">Design Thinking</BreadcrumbItem>
-  <BreadcrumbItem>User Personas</BreadcrumbItem>
+  <BreadcrumbItem href="/design-thinking">Design thinking</BreadcrumbItem>
+  <BreadcrumbItem>User personas</BreadcrumbItem>
 </Breadcrumbs>
 ```
 
@@ -1351,17 +1351,21 @@ The pulse dims a block to about half and back over 1.8s, 11 times (about 20 seco
 ## Slider
 
 ```tsx
-<Slider label="Input volume" defaultValue={40} />
+<Slider label="Volume" defaultValue={60} formatOptions={{ style: "unit", unit: "percent" }} />
+<Slider label="Budget" defaultValue={[2200, 8000]} minValue={0} maxValue={10000} step={100} description="Per month" />
+<Slider label="Volume" step={25} marks={[0, 25, 50, 75, 100].map((v) => ({ value: v, label: `${v}%` }))} start={<Button size="icon" aria-label="Mute">...</Button>} />
 ```
 
 **`label` is required** — all four legacy call sites are unnamed sliders.
 
+The look follows the design spec: a thin, rounded, light-grey track with a solid ink (`foreground`) fill, and a solid white thumb with a soft shadow. The label sits left and the value right. `value`/`defaultValue` may be a `[low, high]` pair, which gives two thumbs and a range readout ("$2,200 – $8,000"); `description` adds grey helper text; `marks` draws tick dots (a mark with a `label` prints it under the track); `start`/`end` hold content beside the track, such as an icon button.
+
 The thumb is 24×24 (WCAG 2.5.8); the legacy's was 16. `aria-valuetext` comes
 free, so a scrubber can announce a time instead of a raw second count.
 
 ### Motion (Slider)
 
-A value that arrives from outside a drag (a key, a prop, a click on the track) moves the thumb and the fill on the snappy spring; while dragging they stay under the pointer. The thumb swells to 1.16 while held. A bubble with the value rises in over the thumb (from small and blurred) while it is dragged or keyboard focused, and drops away in 120ms; the readout and the bubble roll their value up or down as it changes. The bubble is `aria-hidden`: the output beside the label carries the value. Reduced motion keeps opacity changes only. Not ported: marks, range, the springing catch-up on a click of the track (React Aria starts a drag at once), rubber-banding past the limits and release momentum.
+A value that arrives from outside a drag (a key, a prop, a click on the track) moves the thumb and the fill on the snappy spring; while dragging they stay under the pointer. The thumb swells to 1.16 while held. A bubble with the value rises in over the thumb (from small and blurred) while it is dragged or keyboard focused, and drops away in 120ms; the readout and the bubble roll their value up or down as it changes. The bubble is `aria-hidden`: the output beside the label carries the value. Reduced motion keeps opacity changes only. Not ported: clicking a mark label to move there, the springing catch-up on a click of the track (React Aria starts a drag at once), rubber-banding past the limits and release momentum.
 
 ## SplitButton
 
@@ -1422,8 +1426,9 @@ The thumb travels on a no-overshoot spring (559ms), stretches 5px toward its tra
 
 **The track colours are not the legacy's, and could not be.** A white thumb
 on `--color-primary` is 2.44:1 and on `--color-muted` is 1.13:1 — both fail
-WCAG 1.4.11. The track is `border` unchecked and `primary-strong` checked,
-which clears 3:1 in both themes.
+WCAG 1.4.11. The track is `control-edge` unchecked and `primary-strong`
+checked, which clears 3:1 in both themes. (`control-edge`, not the light
+page `border`, which is a decorative hairline.)
 
 ## Table
 
@@ -1526,9 +1531,10 @@ already agree on every value that matters:
 | cell padding | 16px / 12px | same |
 | typeface | Satoshi | same |
 
-The text colours were never a gap: the product's `--muted-foreground` is
-`#6B6B78` and its body ink is `#02021e`, which are this system's
-`--color-muted-foreground` and `--color-foreground` exactly. An earlier draft of
+The text colours were never a gap at the time: the product's
+`--muted-foreground` (`#6B6B78`) and body ink (`#02021e`) matched this
+system's `--color-muted-foreground` and `--color-foreground`. Since the 2026
+colour refresh these roles follow the design tokens (ink 600 and ink 900). An earlier draft of
 this section claimed otherwise and prescribed `#0f172b` / `#6b6b6b`; those come
 from `--table-text-*`, which the AI-visibility tables do not use. Do not apply
 them.
@@ -1591,8 +1597,8 @@ uncommitted form state, a running video or a scroll position will lose it
 on tab change — pass `shouldForceMount` on that `TabPanel`. With 31 legacy
 panels, some will need it.
 
-The selected tab carries a **border**, not just a fill: `bg-background` on
-a `bg-muted` list is 1.13:1, and WCAG 1.4.11 wants 3:1 for the thing
+The selected tab carries a **border**, not just a fill: a surface on a
+`bg-muted` list is barely distinguishable, and WCAG 1.4.11 wants 3:1 for the thing
 telling you which tab is active.
 
 ## ThemeSwitch
@@ -1681,6 +1687,8 @@ A toast rises 16px from below and grows from .96 on the morph spring while it fa
 </TooltipTrigger>
 ```
 
+The bubble is solid ink with `background` text (so it inverts in dark mode), a large corner and comfortable padding; long text wraps at 15rem. It opens above its trigger with **no arrow**; `placement` and `showArrow` are opt-in.
+
 **`delay` defaults to 0**, matching the legacy provider. React Aria ships
 1500ms — taking that default would have put a 1.5-second warm-up on every
 tooltip in the app. Focus opens it immediately regardless.

package/dist/activity-heatmap/activity-heatmap.d.ts

@@ -0,0 +1,92 @@
+import { ReactNode } from "react";
+//#region src/activity-heatmap/activity-heatmap.d.ts
+/**
+ * ActivityHeatmap: one square per day, weeks as columns, four tints of the
+ * primary chart colour for how busy a day was. Use it when rhythm, streaks and
+ * quiet weeks matter more than exact comparisons; use a bar chart when the
+ * exact comparison is the point.
+ *
+ * The squares wave in once, diagonally, when the grid is seen. A tooltip
+ * glides between squares on hover or keyboard focus and its words rise in. A
+ * new range recolours the grid in a sweep instead of redrawing it, and the
+ * total rolls to its new number. The legend's squares preview a level on the
+ * grid (the others step back) and pin it on press.
+ *
+ * It sits in a card (`framed`, on by default). A year switch (`periods`) sits
+ * beside the total, and a detail line under the legend says what the hovered,
+ * focused or selected day holds (`describeDay`).
+ *
+ * The grid is a `grid` of `gridcell`s with one tab stop: arrow keys move by
+ * day (up and down) and by week (left and right), Home and End jump to the
+ * ends, Enter selects. A visually hidden table carries every day.
+ */
+export interface ActivityDay {
+  /** Calendar day as YYYY-MM-DD. */
+  date: string;
+  count: number;
+}
+/** What `describeDay` is given for one day. */
+export interface ActivityDayDetail {
+  /** The day as YYYY-MM-DD. */
+  date: string;
+  count: number;
+  /** The day spelled out, such as "Tuesday, March 18". The year is added when the range spans more than one. */
+  label: string;
+  /** The nouns for the count, as passed in `unit`. */
+  unit: {
+    one: string;
+    other: string;
+  };
+}
+export interface ActivityHeatmapProps {
+  /** One entry per day, oldest first. Days missing inside the range count as zero. */
+  days: ActivityDay[];
+  /** Accessible name for the grid, such as "Contributions in 2025". */
+  label: string;
+  /** Finishes the summary line: "1,284 contributions in {period}". */
+  period: string;
+  /** Nouns for the count. @default { one: "contribution", other: "contributions" } */
+  unit?: {
+    one: string;
+    other: string;
+  };
+  /** Upper bounds for levels one to three; anything above the last is level four. Defaults to quarters of the busiest day. */
+  thresholds?: [number, number, number];
+  /** @default 0 (Sunday) */
+  weekStartsOn?: 0 | 1;
+  /** Controlled selected day, as YYYY-MM-DD. */
+  selectedDate?: string | null;
+  defaultSelectedDate?: string | null;
+  /** Called with the day's YYYY-MM-DD when a day is pressed or chosen with Enter. */
+  onSelectDate?: (date: string) => void;
+  /** Controls beside the summary. */
+  actions?: ReactNode;
+  /**
+   * The ranges to switch between, such as ["2025", "2024", "2023"], shown as a segmented switch beside the summary with the one
+   * equal to `period` selected. You own the data: when `onPeriodChange` fires, pass the new `days`, `period` and `label`.
+   */
+  periods?: string[];
+  /** Called with the chosen entry of `periods`. */
+  onPeriodChange?: (period: string) => void;
+  /** Accessible name for the switch. @default "Period" */
+  periodsLabel?: string;
+  /**
+   * The sentence under the legend about the hovered, focused or selected day. Return the whole sentence, so it can carry data
+   * the heatmap does not hold. Pass `null` to remove the line. The default is date and count only:
+   * "Tuesday, March 18: 4 contributions."
+   */
+  describeDay?: ((day: ActivityDayDetail) => string) | null;
+  /** The detail line when no day is hovered, focused or selected. @default "Hover or select a day for details." */
+  detailHint?: string;
+  /** Draws the card around it: border, panel radius, surface and padding. Turn it off to place the heatmap inside a card of your own. @default true */
+  framed?: boolean;
+  /** Shown instead of the grid when there are no days. @default "No activity yet" */
+  emptyLabel?: string;
+  /** Formatting locale. Fixed by default so server and client render the same labels. @default "en-US" */
+  locale?: string;
+  /** Extra classes for the root. Merged last. */
+  className?: string;
+}
+export declare const ActivityHeatmap: import("react").ForwardRefExoticComponent<ActivityHeatmapProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+//# sourceMappingURL=activity-heatmap.d.ts.map