@krizaka/ui 2.2.0 → 2.4.0

package/README.md

@@ -124,18 +124,19 @@ light or a product's — is a set of tokens.
 | :-- | :-- | :-- |
 | `@krizaka/ui/cn` | `cn(...classes)` — clsx + tailwind-merge (the engine `tailwind-variants` ships) | server |
 | `@krizaka/ui/slot` | `Slot`, `VisuallyHidden` (Radix) | server |
-| `@krizaka/ui/button` | `Button` (`variant` primary·gradient·secondary·outline·ghost·danger, `size` sm·md·lg·icon, `shape` rounded·pill, `loading`, `asChild`), `IconButton` (`label` required), `buttonVariants` | server |
+| `@krizaka/ui/button` | `Button` (`variant` primary·gradient·secondary·outline·ghost·danger, `size` sm·md·lg·icon, `shape` rounded·pill·cut, `loading` (the loader glyph; `indicator={false}` to draw your own), `progress`, `status` success·error, `announce`, `shimmer`, `magnetic`, `asChild`), `IconButton` (`label` required; the glyph takes the icon's place), `buttonVariants` | server |
 | `@krizaka/ui/badge` | `Badge` (`tone` neutral·accent·success·warning·danger·scrim, `size` sm·md, `dot`, `pulse`), `badgeVariants` | server |
 | `@krizaka/ui/avatar` | `Avatar` (`src`, `alt`, `fallback`, `size` xs·sm·md·lg·xl), `Avatar.Group` (`max`) | client |
 | `@krizaka/ui/field` | `Field.Root/Label/Hint/Error`, `Input`, `Textarea`, `Select` (native, styled) — `invalid` | server |
 | `@krizaka/ui/theme` | `ThemeScript` (in `<head>`, no flash), `ThemeProvider`, `useTheme()` → `{ mode, setMode, theme, setTheme }`, `ThemeToggle` (`label`) | client |
-| `@krizaka/ui/skeleton` | `Skeleton` (`shape` text·circle·rect) | server |
+| `@krizaka/ui/skeleton` | `Skeleton` (`shape` text·circle·rect), `SkeletonText` (`lines`), `SkeletonShape` (the real component turned into its skeleton; `data-skeleton` marks a shape) — one brand reflection across the page | server |
 | `@krizaka/ui/empty-state` | `EmptyState` (`icon`, `title`, `description`, `action`) | server |
-| `@krizaka/ui/spinner` | `Spinner` (`label`, `size`) | server |
+| `@krizaka/ui/spinner` | `Spinner` (`label`, `size`, `value`): the Krizaka glyph (a hexagon traced by light around a node), `LoaderGlyph` (`state` loading·success·error, `value`) | server |
+| `@krizaka/ui/loader` | `Loader` (`label`, `status` loading·success·error, `successLabel`, `errorLabel`, `value`, `eta`, `delay` 250, `minDuration` 600, `endDuration` 1600, `variant` inline·block·overlay·page), `LoadingRegion` (`loading`, `skeleton`, `label`, `slowLabel`, `slowAfter`), `useDelayedWait` | client |
 | `@krizaka/ui/countdown` | `Countdown` (`target`, `label`, `showLabel`, `units`, `size`, `urgentBelowMs`, `skewMs`), `useCountdown`, `splitDuration` | client |
 | `@krizaka/ui/card` | `Card.Root` (`asChild`, `reveal`, `radius` md·lg·xl, `tone` default·elevated·glass, `interactive`), `Card.Media` (`aspect` video·square·portrait·auto), `Card.Image` (`fallback`), `Card.Overlay` (`corner`), `Card.Body` (`padding`), `Card.Title` (`as`), `Card.Description`, `Card.Stat` (`label`), `Card.Footer`; `card` (the slots) | server |
-| `@krizaka/ui/dialog` | `Dialog.Root/Trigger/Content/Header/Title/Description/Body/Footer/Close` (`placement` center·bottom·right, `size` sm·md·lg, `closeLabel` required unless `hideClose`, `dismissible={false}`: no close on Escape or outside click), `Sheet` (= `placement="bottom"`), `AlertDialog` (`title`, `description`, `confirmLabel`, `cancelLabel`, `tone` danger·primary, async `onConfirm`, `trigger`) | client |
-| `@krizaka/ui/toast` | `Toaster` (sonner styled by roles: `label`, `closeLabel`, `position`, `closeButton`; `richColors` off), `toast` (`.success/.warning/.error/.info/.custom`…) | client |
+| `@krizaka/ui/dialog` | `Dialog.Root/Trigger/Content/Header/Title/Description/Body/Footer/Close` (`placement` center·bottom·right·left, `size` sm·md·lg, `closeLabel` required unless `hideClose`, `dismissible={false}`: no close on Escape or outside click), `Sheet` (= `placement="bottom"`), `AlertDialog` (`title`, `description`, `confirmLabel`, `cancelLabel`, `tone` danger·primary, async `onConfirm`, `trigger`) | client |
+| `@krizaka/ui/toast` | `Toaster` (sonner styled by roles: `label`, `closeLabel`, `position`, `closeButton`; `richColors` off; a hairline counts each toast's time left), `toast` (`.success/.warning/.error/.info/.custom`…), `undoToast` (`undoLabel`, `onUndo`, `onCommit`), `progressToast` (`id`, `value`, `doneMessage`), `groupedToast` (`key`, `countLabel`) | client |
 | `@krizaka/ui/popover` | `Popover.Root/Trigger/Anchor/Content/Close` | client |
 | `@krizaka/ui/dropdown-menu` | `DropdownMenu.Root/Trigger/Content/Item/CheckboxItem/Label/Separator/Group` (`Item` `tone` default·danger), `menu` (the slots) | client |
 | `@krizaka/ui/tooltip` | `Tooltip` (`content`, `delayDuration` 300, `side`, `open`/`defaultOpen`), `TooltipProvider` | client |
@@ -144,19 +145,43 @@ light or a product's — is a set of tokens.
 | `@krizaka/ui/alert` | `Alert` (`tone` info·success·warning·danger, `icon`, `title`, `action`; `role="alert"` for danger and warning, `status` otherwise), `alertVariants` | server |
 | `@krizaka/ui/separator` | `Separator` (`orientation`, `decorative`, Radix), `separatorVariants` | server |
 | `@krizaka/ui/kbd` | `Kbd` (`size` sm·md), `kbdVariants` | server |
-| `@krizaka/ui/tabs` | `Tabs.Root/List/Trigger/Content` (`variant` underline·segmented·pills on the root, `orientation`, `value`/`defaultValue` + `onValueChange`), `tabs` (the slots) | client |
+| `@krizaka/ui/tabs` | `Tabs.Root/List/Trigger/Content` (`variant` underline·segmented·pills on the root, `orientation`, `value`/`defaultValue` + `onValueChange`; one light glides to the active tab), `tabs` (the slots) | client |
+| `@krizaka/ui/nav-bar` | `NavBar.Root` (`label`, `compactAfter`, `floating`) `/Brand/Items/Link` (`active`) `/Menu` (`label`, `columns`) `/MenuLink` (`title`, `description`, `icon`) `/Actions/Mobile` (`openLabel`, `closeLabel`) `/MobileLink`, `navBar` (the slots) | client |
 | `@krizaka/ui/chip` | `Chip` (`selected`/`defaultSelected` + `onSelectedChange`, `size` sm·md; `removable` + `removeLabel` + `onRemove`), `Chip.Group` (`type` single·multiple, `label`, `required` for single), `chip` (the slots) | client |
+| `@krizaka/ui/chip-link` | `ChipLink` (a filter that is a link: `selected`, `current`, `size`, `asChild`), `chipVariants` (`size`, `selected`) | server |
 | `@krizaka/ui/switch` | `Switch` (`checked`/`defaultChecked` + `onCheckedChange`, `label` unless a visible label names it, `size` sm·md, `invalid`), `switchVariants` | client |
 | `@krizaka/ui/slider` | `Slider` (`value`: a number or a `[min, max]` range, `onValueChange`, `onValueCommit`, `label`, `thumbLabels`, `formatValue` → aria-valuetext, `showLabel`, `origin`), `slider` (the slots) | client |
 | `@krizaka/ui/checkbox` | `Checkbox` (`checked` true·false·"indeterminate" + `onCheckedChange`, `invalid`, its words as children) — sits in a `Field` | client |
 | `@krizaka/ui/radio-group` | `RadioGroup.Root` (`label`, `orientation`, `invalid`), `RadioGroup.Item` (a dot and its words), `RadioGroup.Card` (a whole card is the radio) | client |
 | `@krizaka/ui/command` | `Command.Root` (`label`, `shouldFilter`…) `/Input` (`placeholder`, `trailing`) `/List` (`label`) `/Empty` (`emptyLabel`) `/Loading/Group/Item/Separator/Shortcut` on cmdk; `CommandDialog` (`label`, `open`/`onOpenChange`, `footer`, `contentProps`) | client |
 | `@krizaka/ui/confirm-button` | `ConfirmButton` (two presses: `confirmLabel`, `onConfirm`, `timeoutMs` 4000, `label` for an icon, `armedContent`; the `Button` variants), `confirmArmed` | client |
-| `@krizaka/ui/progress` | `Progress` (`variant` bar·ring, `size` sm·md·lg, `value`/`max`, indeterminate without a value, `label`, `valueText`, a ring's centre as children) | server |
+| `@krizaka/ui/progress` | `Progress` (`variant` bar·ring, `size` sm·md·lg, `value`/`max`, indeterminate without a value, `label`, `valueText`, `showLabel`, `eta`, `buffer`, `segments`, `status` active·paused·error, a ring's centre as children) | server |
+| `@krizaka/ui/meter` | `Meter` (`label`, `value`/`min`/`max`, `valueText`, `thresholds`, `optimum` low·high, `parts` with their legend, `variant` bar·ring, `size`, `showLabel`), `MeterValue` | server |
+| `@krizaka/ui/stepper` | `Stepper` (`steps`: `title`, `description`, `status`, `value`, `content`; `current`, `labels` of the states, `orientation`) | server |
+| `@krizaka/ui/number-ticker` | `NumberTicker` (`value`, `locale`, `format`, `trigger` view·change, `duration`, `announce`, `align`) | client |
+| `@krizaka/ui/glow-card` | `GlowCard` (`glow` border·spotlight·both, `alive`, `asChild`) | client |
+| `@krizaka/ui/marquee` | `Marquee` (`label`, `pauseLabel`, `playLabel`, `speed` px/s, `direction`, `fade`, `defaultPaused`) | client |
 | `@krizaka/ui/section-backdrop` | `SectionBackdrop` (`as`, `direction` down·up, `dome`, `grid`, `media` blurred for depth of field, `animated`): a page section on the brand's section gradient — see `@krizaka/tokens` BRAND.md, "Visual language" | server |
 | `@krizaka/ui/mascots` | `Mascot` (`bird` falcon·owl·duck·flamingo·pigeon, `mood` welcome·thinking·success·empty·error, `tone` brand·own, `size`, `animated`, `title`), `MASCOT_BIRDS`, `MASCOT_MOODS`: the Krizaka flock, in the host brand's accent — one bird at a moment that matters (onboarding, a long wait, a success, an empty list, an error); native `Mascot` in `/native` | client |
+| `@krizaka/ui/iso` | the isometric kit: `IsoHub` (a hero driven by data: `layers`, `dome`, `satellites`, `highlight`), `IsoScene`, `IsoPrism`, `IsoStack`, `IsoDome`, `IsoTile`, `IsoLink`, `IsoNode`, `IsoLabel`, the projection helpers — static SVG animated by motion.css | server |
+| `@krizaka/ui/motion` | `MotionObserver` (reveal, off-screen pause, settle, spotlight, magnetism) and `RotatingWord` (no layout shift) | client |
+| `@krizaka/ui/pagination` | `Pagination` (pages: `page`, `pageCount`, `onPageChange` or `getHref` for links; cursor: `hasPrevious`/`hasNext`, `onPrevious`/`onNext`; `status`, `pageSize` + `pageSizeOptions`, `siblings`, `boundaries`, `labels`; folds into "Page 3 of 12" in a narrow container), `pageRange` | server |
+| `@krizaka/ui/data-table` | `DataTable` (`rows`, `columns` with `header`, `cell`, `value`, `sortable`, `align`, `card` title·label·hidden; `caption`, `sort`/`defaultSort` + `onSortChange`, `manualSort`, `selectable` + `selected`, `loading`, `empty`, `error`, `layout` auto·table·cards, `density`, `virtualize`, `footer`) | client |
+| `@krizaka/ui/filter-bar` | `FilterBar` (`label`, the controls as children, `active` chips, `onClearAll`, `results` announced), `FilterMenu` (checkboxes or radios with counts), `readFilterParams` / `writeFilterParams` (the filters in the address) | client |
+| `@krizaka/ui/combobox` | `Combobox` (ARIA 1.2: `options` or `onSearch(query, signal)` debounced, `multiple` chips + `maxSelected`, `creatable` + `onCreate`, `separators`, `hint`, `error`, `labels`) | client |
+| `@krizaka/ui/tag-input` | `TagInput` (free words as chips: `suggestions`, `normalize`, `validate`, `max`, `separators`, paste split) | client |
+| `@krizaka/ui/date-picker` | `DatePicker`, `DateRangePicker` (`presets`), `Calendar` — ISO dates, the locale's names through `@krizaka/intl`, `min`/`max`/`isDateDisabled`, the APG grid keyboard | client |
+| `@krizaka/ui/search-field` | `SearchField` (`onSearch` debounced, `onSubmit`, `shortcut` ⌘K, `suggestions`, `clearLabel`, `landmark`) | client |
+| `@krizaka/ui/video-player` | `VideoPlayer` (`src` or a signed-source function, `loadHls={() => import("hls.js")}` (optional peer, loaded only without native HLS), `tracks`, `playbackRates`, `preload`, `pauseWhenHidden`, `overlay` for a gate, `labels`; keyboard Space/K, J/L, arrows, M, F, C) | client |
+| `@krizaka/ui/file-upload` | `Dropzone` (`accept`, `maxSize`, `maxFiles`, refusals with reasons), `UploadList` (preview, progress, speed, pause/resume/retry/cancel), `useUploadQueue` (`upload(file, { signal, onProgress, resumed })`: Tus-ready without depending on it), `acceptsFile`, `formatBytes` | client |
+| `@krizaka/ui/media-capture` | `MediaCapture` (`mode` photo·video·both, `facing`, `maxDuration`, permission asked on a gesture, the file picker as the way out, `onCapture({ blob, kind, url })`) | client |
+| `@krizaka/ui/video-trimmer` | `VideoTrimmer` (`duration`, `value` [start, end], `minLength`, `step`/`largeStep`, `frames` or children, `time` + `onSeek`, `classNames` per part, `renderHandle`) | client |
+| `@krizaka/ui/audio-player` | `AudioPlayer` (a seekable waveform: `peaks` or `computePeaks`, `bars`, `playbackRates`, `duration`), `resamplePeaks`, `computeAudioPeaks` | client |
+| `@krizaka/ui/image-cropper` | `ImageCropper` (`aspect`, `round`, an image or a `<video>`, a focus point + zoom out, keyboard and zoom slider), `cropRect` | client |
+| `@krizaka/ui/native/video-player` | React Native `VideoPlayer` on expo-video (optional peer) | native |
+| `@krizaka/ui/native/media-capture` | React Native `MediaCapture` on expo-camera (optional peer) | native |
 | `@krizaka/ui` | the marks, `MotionObserver`, `RotatingWord`, `cx` (unchanged) | client |
-| `@krizaka/ui/native` | React Native: `ThemeProvider`/`useTheme`, `Txt`, `Button`, `IconButton`, `Card.*`, `Badge`, `Chip` (+ `Group`), `Avatar` (+ `Group`), `Skeleton`, `EmptyState`, `Spinner`, `Countdown`, `Segmented`, `Progress`, `Toaster`/`toast`, the marks — see [React Native](#react-native) | native |
+| `@krizaka/ui/native` | React Native: `ThemeProvider`/`useTheme`, `Txt`, `Button`, `IconButton`, `Card.*`, `Badge`, `Chip` (+ `Group`), `Avatar` (+ `Group`), `Skeleton`, `EmptyState`, `Spinner`, `Countdown`, `Segmented`, `Progress`, `Toaster`/`toast`, `Pagination`, `SearchField`, the marks — see [React Native](#react-native) | native |
 | `@krizaka/ui/motion.css`, `@krizaka/ui/tailwind.css` | the motion signature; the `@source` of the primitives' classes | CSS |
 | `@krizaka/ui/registry/<name>`, `@krizaka/ui/registry/examples/<name>/<example>` | the registry (JSON) and the examples — see [Registry](#registry--the-code-drives-the-documentation) | data · client |
 

package/dist/audio-player.d.ts

@@ -0,0 +1,113 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const audioPlayer: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            body?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            bar?: tailwind_variants.ClassValue;
+            meta?: tailwind_variants.ClassValue;
+            play?: tailwind_variants.ClassValue;
+            wave?: tailwind_variants.ClassValue;
+            speed?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            body?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            bar?: tailwind_variants.ClassValue;
+            meta?: tailwind_variants.ClassValue;
+            play?: tailwind_variants.ClassValue;
+            wave?: tailwind_variants.ClassValue;
+            speed?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    play: string;
+    body: string;
+    title: string;
+    wave: string;
+    bar: string;
+    meta: string;
+    speed: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            body?: tailwind_variants.ClassValue;
+            title?: tailwind_variants.ClassValue;
+            bar?: tailwind_variants.ClassValue;
+            meta?: tailwind_variants.ClassValue;
+            play?: tailwind_variants.ClassValue;
+            wave?: tailwind_variants.ClassValue;
+            speed?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    play: string;
+    body: string;
+    title: string;
+    wave: string;
+    bar: string;
+    meta: string;
+    speed: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    play: string;
+    body: string;
+    title: string;
+    wave: string;
+    bar: string;
+    meta: string;
+    speed: string;
+}>>;
+type AudioPlayerLabels = {
+    play: string;
+    pause: string;
+    /** The waveform slider ("Seek"). */
+    seek: string;
+    /** The speed button: `(rate) => "Speed " + rate + "×"`. */
+    speed: (rate: number) => string;
+    /** The slider's value: `(time, duration) => "0:42 of 3:10"`. */
+    time: (time: string, duration: string) => string;
+};
+declare const audioPlayerLabels: AudioPlayerLabels;
+type AudioPlayerProps = {
+    /** The address of the sound. */
+    src: string;
+    /** What it is ("Voice note — Eric, 0:42"): shown, and the accessible name of the player. */
+    title: string;
+    /** The peaks, between 0 and 1, as many as you like (they are resampled to `bars`). */
+    peaks?: readonly number[];
+    /** Without `peaks`: fetches the file and computes them with Web Audio at the first play (same-origin or CORS). */
+    computePeaks?: boolean;
+    /** How many bars. Default 48. */
+    bars?: number;
+    /** The speeds of the speed button. Default `[1, 1.5, 2]`; `[]` hides it. */
+    playbackRates?: readonly number[];
+    /** Pauses when it leaves the screen. Default `true`. */
+    pauseWhenHidden?: boolean;
+    /** The length, in seconds, before the metadata is loaded (from the server). */
+    duration?: number;
+    /** Called when playback starts, pauses, ends. */
+    onPlayingChange?: (playing: boolean) => void;
+    /** The words, passed translated; English by default. */
+    labels?: Partial<AudioPlayerLabels>;
+    /** Classes merged on the root. */
+    className?: string;
+};
+/** Resamples peaks to `count` bars (the maximum of each slice), normalised to the loudest. */
+declare function resamplePeaks(peaks: readonly number[], count: number): number[];
+/** The peaks of a sound file, computed with Web Audio (`count` of them). */
+declare function computeAudioPeaks(src: string, count?: number, signal?: AbortSignal): Promise<number[]>;
+/** A sound with a seekable waveform: play / pause, time, speed — a voice note, a podcast clip, a track. */
+declare function AudioPlayer({ src, title, peaks: given, computePeaks, bars, playbackRates, pauseWhenHidden, duration: knownDuration, onPlayingChange, labels: words, className, }: AudioPlayerProps): React.JSX.Element;
+
+export { AudioPlayer, type AudioPlayerLabels, type AudioPlayerProps, audioPlayer, audioPlayerLabels, computeAudioPeaks, resamplePeaks };

package/dist/audio-player.js

@@ -0,0 +1,207 @@
+"use client";
+import {
+  clamp,
+  formatClock,
+  playSafely,
+  useInView
+} from "./chunk-EUPTXKH7.js";
+import {
+  PauseGlyph,
+  PlayGlyph
+} from "./chunk-YX6CNVJA.js";
+
+// src/audio-player/audio-player.tsx
+import * as React from "react";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var audioPlayer = tv({
+  slots: {
+    root: "flex w-full items-center gap-3 rounded-xl border border-border-default bg-surface-1 p-3",
+    play: "inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-accent text-on-accent transition-colors hover:bg-accent-hover focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-1",
+    body: "flex min-w-0 flex-1 flex-col gap-1",
+    title: "truncate text-sm font-semibold text-fg",
+    wave: "relative flex h-10 w-full cursor-pointer touch-none items-center gap-[2px] rounded-md focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+    bar: "min-w-[2px] flex-1 rounded-full bg-border-strong data-[played]:bg-accent",
+    meta: "flex items-center justify-between font-mono text-[11px] tabular-nums text-fg-secondary",
+    speed: "shrink-0 rounded-md px-2 py-1 text-xs font-semibold tabular-nums text-fg-secondary hover:bg-surface-3 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
+  }
+});
+var audioPlayerLabels = {
+  play: "Play",
+  pause: "Pause",
+  seek: "Seek",
+  speed: (rate) => `Speed ${rate}\xD7`,
+  time: (time, duration) => `${time} of ${duration}`
+};
+function resamplePeaks(peaks, count) {
+  if (peaks.length === 0) return Array.from({ length: count }, () => 0.15);
+  const out = Array.from({ length: count }, (_, i) => {
+    const from = Math.floor(i / count * peaks.length);
+    const to = Math.max(from + 1, Math.floor((i + 1) / count * peaks.length));
+    return Math.max(...peaks.slice(from, to).map(Math.abs));
+  });
+  const loudest = Math.max(...out, 1e-4);
+  return out.map((v) => Math.max(0.08, v / loudest));
+}
+async function computeAudioPeaks(src, count = 200, signal) {
+  const response = await fetch(src, { signal });
+  const data = await response.arrayBuffer();
+  const Context = window.AudioContext ?? window.webkitAudioContext;
+  const context = new Context();
+  try {
+    const buffer = await context.decodeAudioData(data);
+    const channel = buffer.getChannelData(0);
+    const size = Math.max(1, Math.floor(channel.length / count));
+    return Array.from({ length: count }, (_, i) => {
+      let peak = 0;
+      for (let j = i * size; j < Math.min(channel.length, (i + 1) * size); j += 1) peak = Math.max(peak, Math.abs(channel[j]));
+      return peak;
+    });
+  } finally {
+    void context.close();
+  }
+}
+function AudioPlayer({
+  src,
+  title,
+  peaks: given,
+  computePeaks,
+  bars = 48,
+  playbackRates = [1, 1.5, 2],
+  pauseWhenHidden = true,
+  duration: knownDuration = 0,
+  onPlayingChange,
+  labels: words,
+  className
+}) {
+  const labels = { ...audioPlayerLabels, ...words };
+  const s = audioPlayer();
+  const audio = React.useRef(null);
+  const root = React.useRef(null);
+  const wave = React.useRef(null);
+  const dragging = React.useRef(false);
+  const [playing, setPlaying] = React.useState(false);
+  const [time, setTime] = React.useState(0);
+  const [duration, setDuration] = React.useState(knownDuration);
+  const [rate, setRate] = React.useState(playbackRates[0] ?? 1);
+  const [computed, setComputed] = React.useState(null);
+  const [wantPeaks, setWantPeaks] = React.useState(false);
+  React.useEffect(() => {
+    if (given || !computePeaks || !wantPeaks) return;
+    const controller = new AbortController();
+    computeAudioPeaks(src, 200, controller.signal).then(setComputed, () => void 0);
+    return () => controller.abort();
+  }, [given, computePeaks, wantPeaks, src]);
+  useInView(root, (visible) => !visible && audio.current && !audio.current.paused && audio.current.pause(), pauseWhenHidden);
+  const shape = React.useMemo(() => resamplePeaks(given ?? computed ?? [], bars), [given, computed, bars]);
+  const progress = duration > 0 ? time / duration : 0;
+  const seek = (to) => {
+    if (!audio.current) return;
+    const next = clamp(to, 0, duration || audio.current.duration || 0);
+    audio.current.currentTime = next;
+    setTime(next);
+  };
+  const at = (clientX) => {
+    const box = wave.current?.getBoundingClientRect();
+    return box && box.width ? (clientX - box.left) / box.width * duration : 0;
+  };
+  const toggle = () => {
+    setWantPeaks(true);
+    if (!audio.current) return;
+    if (audio.current.paused) playSafely(audio.current);
+    else audio.current.pause();
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: root, role: "group", "aria-label": title, className: s.root({ className }), children: [
+    /* @__PURE__ */ jsx(
+      "audio",
+      {
+        ref: audio,
+        src,
+        preload: "metadata",
+        onPlay: () => {
+          setPlaying(true);
+          onPlayingChange?.(true);
+        },
+        onPause: () => {
+          setPlaying(false);
+          onPlayingChange?.(false);
+        },
+        onTimeUpdate: (event) => setTime(event.currentTarget.currentTime),
+        onDurationChange: (event) => Number.isFinite(event.currentTarget.duration) && setDuration(event.currentTarget.duration)
+      }
+    ),
+    /* @__PURE__ */ jsx("button", { type: "button", className: s.play(), "aria-label": playing ? labels.pause : labels.play, onClick: toggle, children: playing ? /* @__PURE__ */ jsx(PauseGlyph, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx(PlayGlyph, { className: "ml-0.5 h-5 w-5" }) }),
+    /* @__PURE__ */ jsxs("div", { className: s.body(), children: [
+      /* @__PURE__ */ jsx("p", { className: s.title(), "aria-hidden": true, children: title }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: wave,
+          role: "slider",
+          tabIndex: 0,
+          "aria-label": labels.seek,
+          "aria-valuemin": 0,
+          "aria-valuemax": Math.round(duration),
+          "aria-valuenow": Math.round(time),
+          "aria-valuetext": labels.time(formatClock(time), formatClock(duration)),
+          className: s.wave(),
+          onPointerDown: (event) => {
+            dragging.current = true;
+            wave.current?.setPointerCapture?.(event.pointerId);
+            seek(at(event.clientX));
+          },
+          onPointerMove: (event) => dragging.current && seek(at(event.clientX)),
+          onPointerUp: () => {
+            dragging.current = false;
+          },
+          onKeyDown: (event) => {
+            const moves = {
+              ArrowLeft: time - 5,
+              ArrowDown: time - 5,
+              ArrowRight: time + 5,
+              ArrowUp: time + 5,
+              PageDown: time - 30,
+              PageUp: time + 30,
+              Home: 0,
+              End: duration
+            };
+            const to = moves[event.key];
+            if (to === void 0) return;
+            event.preventDefault();
+            seek(to);
+          },
+          children: shape.map((peak, i) => /* @__PURE__ */ jsx("span", { "aria-hidden": true, "data-played": (i + 0.5) / bars <= progress ? "" : void 0, className: s.bar(), style: { height: `${Math.round(peak * 100)}%` } }, i))
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: s.meta(), "aria-hidden": true, children: [
+        /* @__PURE__ */ jsx("span", { children: formatClock(time) }),
+        /* @__PURE__ */ jsx("span", { children: formatClock(duration) })
+      ] })
+    ] }),
+    playbackRates.length > 1 && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: s.speed(),
+        "aria-label": labels.speed(rate),
+        onClick: () => {
+          const next = playbackRates[(playbackRates.indexOf(rate) + 1) % playbackRates.length] ?? 1;
+          if (audio.current) audio.current.playbackRate = next;
+          setRate(next);
+        },
+        children: [
+          rate,
+          "\xD7"
+        ]
+      }
+    )
+  ] });
+}
+export {
+  AudioPlayer,
+  audioPlayer,
+  audioPlayerLabels,
+  computeAudioPeaks,
+  resamplePeaks
+};
+//# sourceMappingURL=audio-player.js.map

package/dist/audio-player.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/audio-player/audio-player.tsx"],"sourcesContent":["// Client. An `<audio>` with a waveform you can seek on: the bars are the sound's peaks (given by the server, or\n// computed here from the file with Web Audio when `computePeaks` — once, on demand), the played part in the accent.\n// The waveform is a `slider` (arrows ± 5 s, Page keys ± 30 s, Home / End) whose value is read as a time; the play\n// button and the speed are named by props. No animation but the played part's colour, and it pauses off screen.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { PauseGlyph, PlayGlyph } from \"../glyphs\";\nimport { clamp, formatClock, playSafely, useInView } from \"../media\";\n\nexport const audioPlayer = tv({\n  slots: {\n    root: \"flex w-full items-center gap-3 rounded-xl border border-border-default bg-surface-1 p-3\",\n    play:\n      \"inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-accent text-on-accent transition-colors hover:bg-accent-hover \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-1\",\n    body: \"flex min-w-0 flex-1 flex-col gap-1\",\n    title: \"truncate text-sm font-semibold text-fg\",\n    wave:\n      \"relative flex h-10 w-full cursor-pointer touch-none items-center gap-[2px] rounded-md \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    bar: \"min-w-[2px] flex-1 rounded-full bg-border-strong data-[played]:bg-accent\",\n    meta: \"flex items-center justify-between font-mono text-[11px] tabular-nums text-fg-secondary\",\n    speed:\n      \"shrink-0 rounded-md px-2 py-1 text-xs font-semibold tabular-nums text-fg-secondary hover:bg-surface-3 hover:text-fg \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  },\n});\n\nexport type AudioPlayerLabels = {\n  play: string;\n  pause: string;\n  /** The waveform slider (\"Seek\"). */\n  seek: string;\n  /** The speed button: `(rate) => \"Speed \" + rate + \"×\"`. */\n  speed: (rate: number) => string;\n  /** The slider's value: `(time, duration) => \"0:42 of 3:10\"`. */\n  time: (time: string, duration: string) => string;\n};\n\nexport const audioPlayerLabels: AudioPlayerLabels = {\n  play: \"Play\",\n  pause: \"Pause\",\n  seek: \"Seek\",\n  speed: (rate) => `Speed ${rate}×`,\n  time: (time, duration) => `${time} of ${duration}`,\n};\n\nexport type AudioPlayerProps = {\n  /** The address of the sound. */\n  src: string;\n  /** What it is (\"Voice note — Eric, 0:42\"): shown, and the accessible name of the player. */\n  title: string;\n  /** The peaks, between 0 and 1, as many as you like (they are resampled to `bars`). */\n  peaks?: readonly number[];\n  /** Without `peaks`: fetches the file and computes them with Web Audio at the first play (same-origin or CORS). */\n  computePeaks?: boolean;\n  /** How many bars. Default 48. */\n  bars?: number;\n  /** The speeds of the speed button. Default `[1, 1.5, 2]`; `[]` hides it. */\n  playbackRates?: readonly number[];\n  /** Pauses when it leaves the screen. Default `true`. */\n  pauseWhenHidden?: boolean;\n  /** The length, in seconds, before the metadata is loaded (from the server). */\n  duration?: number;\n  /** Called when playback starts, pauses, ends. */\n  onPlayingChange?: (playing: boolean) => void;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<AudioPlayerLabels>;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\n/** Resamples peaks to `count` bars (the maximum of each slice), normalised to the loudest. */\nexport function resamplePeaks(peaks: readonly number[], count: number): number[] {\n  if (peaks.length === 0) return Array.from({ length: count }, () => 0.15);\n  const out = Array.from({ length: count }, (_, i) => {\n    const from = Math.floor((i / count) * peaks.length);\n    const to = Math.max(from + 1, Math.floor(((i + 1) / count) * peaks.length));\n    return Math.max(...peaks.slice(from, to).map(Math.abs));\n  });\n  const loudest = Math.max(...out, 0.0001);\n  return out.map((v) => Math.max(0.08, v / loudest));\n}\n\n/** The peaks of a sound file, computed with Web Audio (`count` of them). */\nexport async function computeAudioPeaks(src: string, count = 200, signal?: AbortSignal): Promise<number[]> {\n  const response = await fetch(src, { signal });\n  const data = await response.arrayBuffer();\n  const Context = window.AudioContext ?? (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext;\n  const context = new Context();\n  try {\n    const buffer = await context.decodeAudioData(data);\n    const channel = buffer.getChannelData(0);\n    const size = Math.max(1, Math.floor(channel.length / count));\n    return Array.from({ length: count }, (_, i) => {\n      let peak = 0;\n      for (let j = i * size; j < Math.min(channel.length, (i + 1) * size); j += 1) peak = Math.max(peak, Math.abs(channel[j]!));\n      return peak;\n    });\n  } finally {\n    void context.close();\n  }\n}\n\n/** A sound with a seekable waveform: play / pause, time, speed — a voice note, a podcast clip, a track. */\nexport function AudioPlayer({\n  src,\n  title,\n  peaks: given,\n  computePeaks,\n  bars = 48,\n  playbackRates = [1, 1.5, 2],\n  pauseWhenHidden = true,\n  duration: knownDuration = 0,\n  onPlayingChange,\n  labels: words,\n  className,\n}: AudioPlayerProps) {\n  const labels = { ...audioPlayerLabels, ...words };\n  const s = audioPlayer();\n  const audio = React.useRef<HTMLAudioElement>(null);\n  const root = React.useRef<HTMLDivElement>(null);\n  const wave = React.useRef<HTMLDivElement>(null);\n  const dragging = React.useRef(false);\n  const [playing, setPlaying] = React.useState(false);\n  const [time, setTime] = React.useState(0);\n  const [duration, setDuration] = React.useState(knownDuration);\n  const [rate, setRate] = React.useState(playbackRates[0] ?? 1);\n  const [computed, setComputed] = React.useState<number[] | null>(null);\n  const [wantPeaks, setWantPeaks] = React.useState(false);\n\n  React.useEffect(() => {\n    if (given || !computePeaks || !wantPeaks) return;\n    const controller = new AbortController();\n    computeAudioPeaks(src, 200, controller.signal).then(setComputed, () => undefined);\n    return () => controller.abort();\n  }, [given, computePeaks, wantPeaks, src]);\n\n  useInView(root, (visible) => !visible && audio.current && !audio.current.paused && audio.current.pause(), pauseWhenHidden);\n\n  const shape = React.useMemo(() => resamplePeaks(given ?? computed ?? [], bars), [given, computed, bars]);\n  const progress = duration > 0 ? time / duration : 0;\n\n  const seek = (to: number) => {\n    if (!audio.current) return;\n    const next = clamp(to, 0, duration || audio.current.duration || 0);\n    audio.current.currentTime = next;\n    setTime(next);\n  };\n  const at = (clientX: number) => {\n    const box = wave.current?.getBoundingClientRect();\n    return box && box.width ? ((clientX - box.left) / box.width) * duration : 0;\n  };\n  const toggle = () => {\n    setWantPeaks(true);\n    if (!audio.current) return;\n    if (audio.current.paused) playSafely(audio.current);\n    else audio.current.pause();\n  };\n\n  return (\n    <div ref={root} role=\"group\" aria-label={title} className={s.root({ className })}>\n      <audio\n        ref={audio}\n        src={src}\n        preload=\"metadata\"\n        onPlay={() => {\n          setPlaying(true);\n          onPlayingChange?.(true);\n        }}\n        onPause={() => {\n          setPlaying(false);\n          onPlayingChange?.(false);\n        }}\n        onTimeUpdate={(event) => setTime(event.currentTarget.currentTime)}\n        onDurationChange={(event) => Number.isFinite(event.currentTarget.duration) && setDuration(event.currentTarget.duration)}\n      />\n      <button type=\"button\" className={s.play()} aria-label={playing ? labels.pause : labels.play} onClick={toggle}>\n        {playing ? <PauseGlyph className=\"h-5 w-5\" /> : <PlayGlyph className=\"ml-0.5 h-5 w-5\" />}\n      </button>\n      <div className={s.body()}>\n        <p className={s.title()} aria-hidden>\n          {title}\n        </p>\n        <div\n          ref={wave}\n          role=\"slider\"\n          tabIndex={0}\n          aria-label={labels.seek}\n          aria-valuemin={0}\n          aria-valuemax={Math.round(duration)}\n          aria-valuenow={Math.round(time)}\n          aria-valuetext={labels.time(formatClock(time), formatClock(duration))}\n          className={s.wave()}\n          onPointerDown={(event) => {\n            dragging.current = true;\n            wave.current?.setPointerCapture?.(event.pointerId);\n            seek(at(event.clientX));\n          }}\n          onPointerMove={(event) => dragging.current && seek(at(event.clientX))}\n          onPointerUp={() => {\n            dragging.current = false;\n          }}\n          onKeyDown={(event) => {\n            const moves: Record<string, number> = {\n              ArrowLeft: time - 5,\n              ArrowDown: time - 5,\n              ArrowRight: time + 5,\n              ArrowUp: time + 5,\n              PageDown: time - 30,\n              PageUp: time + 30,\n              Home: 0,\n              End: duration,\n            };\n            const to = moves[event.key];\n            if (to === undefined) return;\n            event.preventDefault();\n            seek(to);\n          }}\n        >\n          {shape.map((peak, i) => (\n            <span key={i} aria-hidden data-played={(i + 0.5) / bars <= progress ? \"\" : undefined} className={s.bar()} style={{ height: `${Math.round(peak * 100)}%` }} />\n          ))}\n        </div>\n        <div className={s.meta()} aria-hidden>\n          <span>{formatClock(time)}</span>\n          <span>{formatClock(duration)}</span>\n        </div>\n      </div>\n      {playbackRates.length > 1 && (\n        <button\n          type=\"button\"\n          className={s.speed()}\n          aria-label={labels.speed(rate)}\n          onClick={() => {\n            const next = playbackRates[(playbackRates.indexOf(rate) + 1) % playbackRates.length] ?? 1;\n            if (audio.current) audio.current.playbackRate = next;\n            setRate(next);\n          }}\n        >\n          {rate}×\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{button-Cgfkg_3y.d.ts → button-BMAO7dKF.d.ts}

@@ -20,6 +20,7 @@ declare const buttonVariants: tailwind_variants.TVReturnType<{
     shape: {
         rounded: "rounded-lg";
         pill: "rounded-full";
+        cut: "rounded-[10px] [corner-shape:bevel]";
     };
 }, undefined, string, {
     variant: {
@@ -39,6 +40,7 @@ declare const buttonVariants: tailwind_variants.TVReturnType<{
     shape: {
         rounded: "rounded-lg";
         pill: "rounded-full";
+        cut: "rounded-[10px] [corner-shape:bevel]";
     };
 }, undefined, tailwind_variants.TVReturnTypeLike<{
     variant: {
@@ -58,6 +60,7 @@ declare const buttonVariants: tailwind_variants.TVReturnType<{
     shape: {
         rounded: "rounded-lg";
         pill: "rounded-full";
+        cut: "rounded-[10px] [corner-shape:bevel]";
     };
 }, undefined>>;
 type ButtonVariants = VariantProps<typeof buttonVariants>;
@@ -74,14 +77,38 @@ type ButtonProps = React.ComponentProps<"button"> & ButtonVariants & {
      */
     size?: ButtonVariants["size"];
     /**
-     * rounded · pill.
+     * rounded · pill · cut (45° corners, the Krizaka chamfer).
      * @default "rounded"
      */
     shape?: ButtonVariants["shape"];
     /** Renders the child (e.g. a <Link>) instead of the <button>, with props, classes and ref merged. */
     asChild?: boolean;
-    /** Disables and signals the wait (aria-busy, data-loading) — the product adds a spinner if it wants one. */
+    /**
+     * Disables and signals the wait (aria-busy, data-loading) and shows the Krizaka loader glyph before the label; the
+     * button keeps its colour.
+     */
     loading?: boolean;
+    /**
+     * Between 0 and 1, while `loading`: the glyph's trace and a light fill across the button grow to the value (an
+     * upload, an export).
+     */
+    progress?: number | null;
+    /**
+     * How the action ended: `success` draws a check, `error` a cross (and the button shakes its head once); a ring of
+     * the status colour opens around it. Clear it to return to rest.
+     */
+    status?: "success" | "error" | null;
+    /** A message announced politely by assistive technology when it changes (“Saved”, “Upload failed”) — passed translated. */
+    announce?: string;
+    /**
+     * Shows the glyph while `loading` / with a `status`. `false`: you draw your own.
+     * @default true
+     */
+    indicator?: boolean;
+    /** A sheen of light crosses the button on hover — for the one action a page is about. */
+    shimmer?: boolean;
+    /** The button leans a few pixels toward a fine pointer (driven by `MotionObserver`; never under reduced motion or on touch). */
+    magnetic?: boolean;
 };
 
 export type { ButtonProps as B, ButtonVariants as a };

package/dist/button.d.ts

@@ -20,6 +20,7 @@ declare const buttonVariants: tailwind_variants.TVReturnType<{
     shape: {
         rounded: "rounded-lg";
         pill: "rounded-full";
+        cut: "rounded-[10px] [corner-shape:bevel]";
     };
 }, undefined, string, {
     variant: {
@@ -39,6 +40,7 @@ declare const buttonVariants: tailwind_variants.TVReturnType<{
     shape: {
         rounded: "rounded-lg";
         pill: "rounded-full";
+        cut: "rounded-[10px] [corner-shape:bevel]";
     };
 }, undefined, tailwind_variants.TVReturnTypeLike<{
     variant: {
@@ -58,6 +60,7 @@ declare const buttonVariants: tailwind_variants.TVReturnType<{
     shape: {
         rounded: "rounded-lg";
         pill: "rounded-full";
+        cut: "rounded-[10px] [corner-shape:bevel]";
     };
 }, undefined>>;
 type ButtonVariants = VariantProps<typeof buttonVariants>;
@@ -74,16 +77,40 @@ type ButtonProps = React.ComponentProps<"button"> & ButtonVariants & {
      */
     size?: ButtonVariants["size"];
     /**
-     * rounded · pill.
+     * rounded · pill · cut (45° corners, the Krizaka chamfer).
      * @default "rounded"
      */
     shape?: ButtonVariants["shape"];
     /** Renders the child (e.g. a <Link>) instead of the <button>, with props, classes and ref merged. */
     asChild?: boolean;
-    /** Disables and signals the wait (aria-busy, data-loading) — the product adds a spinner if it wants one. */
+    /**
+     * Disables and signals the wait (aria-busy, data-loading) and shows the Krizaka loader glyph before the label; the
+     * button keeps its colour.
+     */
     loading?: boolean;
+    /**
+     * Between 0 and 1, while `loading`: the glyph's trace and a light fill across the button grow to the value (an
+     * upload, an export).
+     */
+    progress?: number | null;
+    /**
+     * How the action ended: `success` draws a check, `error` a cross (and the button shakes its head once); a ring of
+     * the status colour opens around it. Clear it to return to rest.
+     */
+    status?: "success" | "error" | null;
+    /** A message announced politely by assistive technology when it changes (“Saved”, “Upload failed”) — passed translated. */
+    announce?: string;
+    /**
+     * Shows the glyph while `loading` / with a `status`. `false`: you draw your own.
+     * @default true
+     */
+    indicator?: boolean;
+    /** A sheen of light crosses the button on hover — for the one action a page is about. */
+    shimmer?: boolean;
+    /** The button leans a few pixels toward a fine pointer (driven by `MotionObserver`; never under reduced motion or on touch). */
+    magnetic?: boolean;
 };
-declare function Button({ asChild, loading, variant, size, shape, className, disabled, ...props }: ButtonProps): React.JSX.Element;
+declare function Button({ asChild, loading, progress, status, announce, indicator, shimmer, magnetic, variant, size, shape, className, disabled, children, ...props }: ButtonProps): React.JSX.Element;
 type IconButtonProps = Omit<ButtonProps, "size"> & {
     /** The accessible name (and tooltip) of the button — required, passed translated. */
     label: string;
@@ -93,7 +120,7 @@ type IconButtonProps = Omit<ButtonProps, "size"> & {
      */
     size?: ButtonProps["size"];
 };
-/** An icon-only button: `label` is required, it is its accessible name. */
-declare function IconButton({ label, size, ...props }: IconButtonProps): React.JSX.Element;
+/** An icon-only button: `label` is required, it is its accessible name. Loading or with a status, the glyph takes the icon's place. */
+declare function IconButton({ label, size, children, ...props }: IconButtonProps): React.JSX.Element;
 
 export { Button, type ButtonProps, type ButtonVariants, IconButton, type IconButtonProps, buttonVariants };