@seekalfred/primitives 0.7.1 → 0.7.4

package/dist/time-picker/time-picker.d.ts

@@ -1,3 +1,4 @@
+import { FocusEvent, ReactNode } from "react";
 import { TimeValue } from "react-aria-components";
 //#region src/time-picker/time-picker.d.ts
 /**
@@ -26,7 +27,12 @@ export interface TimePickerProps {
   description?: string;
   /** Shown while no time is chosen. @default "Select a time" */
   placeholder?: string;
-  /** The chosen time. Controlled: pass `null` for none. */
+  /**
+   * The chosen time. Controlled: pass `null` for none. `undefined` means
+   * UNCONTROLLED, so going from a time to `undefined` keeps the last time on
+   * screen: to clear a controlled picker (a form reset) pass `null`, for example
+   * `value={field.value ?? null}`.
+   */
   value?: TimeValue | null;
   /** The starting time when uncontrolled. @default null */
   defaultValue?: TimeValue | null;
@@ -40,6 +46,29 @@ export interface TimePickerProps {
   size?: "sm" | "md" | "lg";
   /** Disable the control. */
   isDisabled?: boolean;
+  /**
+   * The trigger's `id`, so a `<label htmlFor>` outside the picker (or a form
+   * library that focuses a field by id) reaches the real control.
+   */
+  id?: string;
+  /**
+   * Submits the time with a native form, as "HH:MM" in 24-hour time (the same
+   * string an `<input type="time">` submits). While no time is chosen the field
+   * submits an empty string under this name, as an empty `<input type="time">` does.
+   */
+  name?: string;
+  /**
+   * Marks the time as wrong: the trigger takes the invalid border. Pair it with
+   * `errorMessage`, or the state is shown in colour only.
+   */
+  isInvalid?: boolean;
+  /**
+   * Why the time is wrong, under the control. It shows only while `isInvalid`
+   * is set, and React Aria names it in the trigger's `aria-describedby`.
+   */
+  errorMessage?: ReactNode;
+  /** Called when focus leaves the trigger, such as react-hook-form's `field.onBlur`. */
+  onBlur?: (event: FocusEvent<Element>) => void;
   /** Extra classes for the wrapper. Merged last. */
   className?: string;
 }
@@ -48,6 +77,12 @@ export interface TimePickerProps {
  *
  * @example
  * <TimePicker label="Start time" value={time} onChange={setTime} minuteStep={30} />
+ *
+ * @example
+ * // With react-hook-form's Controller
+ * <TimePicker label="Sync time" id={field.name} name={field.name} value={field.value ?? null}
+ *             onChange={field.onChange} onBlur={field.onBlur}
+ *             isInvalid={!!fieldState.error} errorMessage={fieldState.error?.message} />
  */
 export declare const TimePicker: import("react").ForwardRefExoticComponent<TimePickerProps & import("react").RefAttributes<HTMLButtonElement>>;
 //#endregion

package/dist/time-picker/time-picker.js

@@ -3,10 +3,10 @@ import { cn, cnAll } from "../lib/cn.js";
 import { useIsomorphicLayoutEffect } from "../lib/motion.js";
 import { labelVariants } from "../label/label.js";
 import { RollingValue } from "../lib/rolling-value.js";
-import { selectTriggerVariants, selectVariants } from "../select/select.js";
+import { selectErrorClass, selectTriggerVariants, selectVariants } from "../select/select.js";
 import { cva } from "class-variance-authority";
 import { forwardRef, useMemo, useRef, useState } from "react";
-import { Button, Label, ListBox, ListBoxItem, Popover, Select, SelectValue, Text, useLocale } from "react-aria-components";
+import { Button, FieldError, Label, ListBox, ListBoxItem, Popover, Select, SelectValue, Text, useLocale } from "react-aria-components";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Time } from "@internationalized/date";
 //#region src/time-picker/time-picker.tsx
@@ -31,6 +31,19 @@ const timePickerListVariants = cva([
 	"bg-card text-card-foreground shadow-floating",
 	"box-border font-sans text-sm leading-(--leading-normal)"
 ]);
+/**
+* Keyboard focus on an INVALID trigger. The shared field surface shows focus by
+* darkening the border, but an invalid field keeps its red border while focused,
+* so a keyboard user tabbing onto an invalid picker saw no change at all
+* (WCAG 2.4.7). The red border stays (it is the state) and the focus ring is
+* added outside it. Only while invalid: a valid trigger is unchanged.
+*/
+const timePickerInvalidFocusClass = [
+	"group-data-[invalid]:data-[focus-visible]:outline-solid",
+	"group-data-[invalid]:data-[focus-visible]:outline-(length:--focus-ring-width)",
+	"group-data-[invalid]:data-[focus-visible]:outline-offset-(--focus-ring-offset)",
+	"group-data-[invalid]:data-[focus-visible]:outline-(--color-ring)"
+].join(" ");
 /** A time. The highlight changes almost at once (the arrows move it often); a dot marks the chosen one. */
 const timePickerItemVariants = cva([
 	"relative flex min-h-9 cursor-pointer select-none items-center justify-between gap-2",
@@ -102,8 +115,14 @@ function CenteredListBox({ children }) {
 *
 * @example
 * <TimePicker label="Start time" value={time} onChange={setTime} minuteStep={30} />
+*
+* @example
+* // With react-hook-form's Controller
+* <TimePicker label="Sync time" id={field.name} name={field.name} value={field.value ?? null}
+*             onChange={field.onChange} onBlur={field.onBlur}
+*             isInvalid={!!fieldState.error} errorMessage={fieldState.error?.message} />
 */
-const TimePicker = forwardRef(function TimePicker({ label, labelHidden, description, placeholder = "Select a time", value, defaultValue = null, onChange, minuteStep = 15, hourCycle = 12, size = "md", isDisabled, className }, ref) {
+const TimePicker = forwardRef(function TimePicker({ label, labelHidden, description, placeholder = "Select a time", value, defaultValue = null, onChange, minuteStep = 15, hourCycle = 12, size = "md", isDisabled, id, name, isInvalid, errorMessage, onBlur, className }, ref) {
 	const { locale } = useLocale();
 	const [inner, setInner] = useState(defaultValue);
 	const current = value === void 0 ? inner : value;
@@ -140,6 +159,10 @@ const TimePicker = forwardRef(function TimePicker({ label, labelHidden, descript
 			onChange?.(time);
 		},
 		isDisabled,
+		id,
+		name,
+		isInvalid,
+		onBlur,
 		placeholder,
 		className: cn(selectVariants(), className),
 		children: [
@@ -151,7 +174,7 @@ const TimePicker = forwardRef(function TimePicker({ label, labelHidden, descript
 			/* @__PURE__ */ jsxs(Button, {
 				ref,
 				"data-slot": "time-picker-trigger",
-				className: selectTriggerVariants({ size }),
+				className: cnAll(selectTriggerVariants({ size }), timePickerInvalidFocusClass),
 				children: [
 					/* @__PURE__ */ jsx(ClockGlyph, {}),
 					/* @__PURE__ */ jsx(RollingValue, {
@@ -177,6 +200,11 @@ const TimePicker = forwardRef(function TimePicker({ label, labelHidden, descript
 				className: descriptionClass,
 				children: description
 			}) : null,
+			errorMessage == null ? null : /* @__PURE__ */ jsx(FieldError, {
+				"data-slot": "time-picker-error",
+				className: selectErrorClass,
+				children: errorMessage
+			}),
 			/* @__PURE__ */ jsx(Popover, {
 				"data-slot": "time-picker-popover",
 				className: timePickerListVariants(),
@@ -196,6 +224,6 @@ const TimePicker = forwardRef(function TimePicker({ label, labelHidden, descript
 	});
 });
 //#endregion
-export { TimePicker, timePickerItemVariants, timePickerListVariants };
+export { TimePicker, timePickerInvalidFocusClass, timePickerItemVariants, timePickerListVariants };
 
 //# sourceMappingURL=time-picker.js.map

package/dist/time-picker/time-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-picker.js","names":["AriaListBox","AriaSelect","AriaLabel","AriaButton","AriaSelectValue","AriaText","AriaPopover","AriaListBoxItem"],"sources":["../../src/time-picker/time-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport { Time } from \"@internationalized/date\";\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useMemo, useRef, useState } from \"react\";\nimport {\n  Button as AriaButton,\n  Label as AriaLabel,\n  ListBox as AriaListBox,\n  ListBoxItem as AriaListBoxItem,\n  Popover as AriaPopover,\n  Select as AriaSelect,\n  SelectValue as AriaSelectValue,\n  Text as AriaText,\n  useLocale,\n  type TimeValue,\n} from \"react-aria-components\";\n\nimport { labelVariants } from \"../label/label.js\";\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { useIsomorphicLayoutEffect } from \"../lib/motion.js\";\nimport { RollingValue } from \"../lib/rolling-value.js\";\nimport { selectTriggerVariants, selectVariants } from \"../select/select.js\";\n\n/**\n * TimePicker, a field that shows a time and opens a list of times to pick from.\n *\n * Values are `TimeValue` objects from `@internationalized/date`, as Calendar and\n * DatePicker use `DateValue` (ADR 0006), not \"HH:MM\" strings: a time of day has\n * no time zone or format of its own. Unlike those two, this one builds a `Time`\n * at runtime to hand back, so the package is a real (peer) dependency here and\n * not only a type.\n *\n * The control is a React Aria `Select`, so the list is a listbox with typeahead,\n * arrow keys and a roving highlight; the motion (the value rolling like a clock\n * face, the chevron, the list growing from the field) sits on top of it.\n */\n\n/** The list: it grows from the field, and the highlight follows the pointer and the arrows. */\nexport const timePickerListVariants = cva([\n  \"picker-pop w-(--trigger-width) origin-top overflow-hidden\",\n  // A little less offset than a date picker: this list sits close under its field.\n  \"[--pop-in-y:-6px] [--pop-in-scale:0.97] [--pop-out-y:-4px] [--pop-out-scale:0.98] [--pop-out-duration:120ms]\",\n  \"rounded-panel border-(length:--border-width) border-border p-1\",\n  \"bg-card text-card-foreground shadow-floating\",\n  \"box-border font-sans text-sm leading-(--leading-normal)\",\n]);\n\n/** A time. The highlight changes almost at once (the arrows move it often); a dot marks the chosen one. */\nexport const timePickerItemVariants = cva([\n  \"relative flex min-h-9 cursor-pointer select-none items-center justify-between gap-2\",\n  \"rounded-control px-3 py-1.5 tabular-nums outline-none\",\n  \"text-sm leading-(--leading-normal) text-card-foreground\",\n  \"data-[focused]:bg-muted\",\n  \"motion-safe:transition-colors motion-safe:duration-80 motion-safe:ease-settle\",\n  \"data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring)\",\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n]);\n\nconst descriptionClass = \"text-sm leading-(--leading-normal) text-muted-foreground\";\n\nconst pad = (value: number) => String(value).padStart(2, \"0\");\nconst keyOf = (minutes: number) => `${pad(Math.floor(minutes / 60))}:${pad(minutes % 60)}`;\nconst minutesOf = (value: TimeValue) => value.hour * 60 + value.minute;\n\nfunction ClockGlyph() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"text-muted-foreground\"\n    >\n      <circle cx=\"8\" cy=\"8\" r=\"5.5\" />\n      <path d=\"M8 5v3l2 1.5\" />\n    </svg>\n  );\n}\n\n/** The chevron turns half a turn while the list is open, on the gentle spring. */\nfunction Chevron() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.75\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"text-muted-foreground motion-safe:transition-[rotate] motion-safe:duration-(--duration-gentle) motion-safe:ease-gentle group-aria-expanded/trigger:rotate-180\"\n    >\n      <path d=\"m4 6 4 4 4-4\" />\n    </svg>\n  );\n}\n\n/**\n * The list of times. It opens centred on the chosen time (or at the top with\n * none), before the first frame, so there is no scroll to watch; the arrow keys\n * then keep the highlight in view, which React Aria does.\n */\nfunction CenteredListBox({ children }: { children: React.ReactNode }) {\n  const ref = useRef<HTMLDivElement>(null);\n  useIsomorphicLayoutEffect(() => {\n    const list = ref.current;\n    const chosen = list?.querySelector<HTMLElement>('[role=\"option\"][aria-selected=\"true\"]');\n    if (!list || !chosen) return;\n    list.scrollTop = chosen.offsetTop - (list.clientHeight - chosen.offsetHeight) / 2;\n  }, []);\n  return (\n    <AriaListBox\n      ref={ref}\n      data-slot=\"time-picker-list\"\n      className=\"relative max-h-62.5 overflow-y-auto overscroll-contain outline-none\"\n    >\n      {children}\n    </AriaListBox>\n  );\n}\n\nexport interface TimePickerProps {\n  /** What is being chosen, and the control's accessible name. Required, as on Select. */\n  label: string;\n  /** Render the label for screen readers only. */\n  labelHidden?: boolean;\n  /** Help text under the control, named in `aria-describedby`. */\n  description?: string;\n  /** Shown while no time is chosen. @default \"Select a time\" */\n  placeholder?: string;\n  /** The chosen time. Controlled: pass `null` for none. */\n  value?: TimeValue | null;\n  /** The starting time when uncontrolled. @default null */\n  defaultValue?: TimeValue | null;\n  /** Called with the chosen time, as a `Time`. */\n  onChange?: (value: TimeValue) => void;\n  /** Minutes between the times in the list. @default 15 */\n  minuteStep?: 1 | 5 | 10 | 15 | 30;\n  /** 12-hour (9:00 AM) or 24-hour (09:00) times. @default 12 */\n  hourCycle?: 12 | 24;\n  /** Control scale of the trigger. @default \"md\" */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** Disable the control. */\n  isDisabled?: boolean;\n  /** Extra classes for the wrapper. Merged last. */\n  className?: string;\n}\n\n/**\n * A time picker.\n *\n * @example\n * <TimePicker label=\"Start time\" value={time} onChange={setTime} minuteStep={30} />\n */\nexport const TimePicker = forwardRef<HTMLButtonElement, TimePickerProps>(function TimePicker(\n  {\n    label,\n    labelHidden,\n    description,\n    placeholder = \"Select a time\",\n    value,\n    defaultValue = null,\n    onChange,\n    minuteStep = 15,\n    hourCycle = 12,\n    size = \"md\",\n    isDisabled,\n    className,\n  },\n  ref,\n) {\n  const { locale } = useLocale();\n  const [inner, setInner] = useState<TimeValue | null>(defaultValue);\n  const current = value === undefined ? inner : value;\n  const minutes = current ? minutesOf(current) : null;\n  const key = minutes === null ? null : keyOf(minutes);\n\n  const display = useMemo(() => {\n    const format = new Intl.DateTimeFormat(locale, {\n      hour: \"numeric\",\n      minute: \"2-digit\",\n      hourCycle: hourCycle === 24 ? \"h23\" : \"h12\",\n      timeZone: \"UTC\",\n    });\n    return (total: number) =>\n      format\n        .format(new Date(Date.UTC(2000, 0, 1, Math.floor(total / 60), total % 60)))\n        .replace(/\\u202f/g, \" \");\n  }, [locale, hourCycle]);\n\n  // The list: every step of the day, plus the current time if it falls between steps.\n  const options = useMemo(() => {\n    const all = Array.from({ length: Math.ceil(1440 / minuteStep) }, (_, i) => i * minuteStep);\n    if (minutes !== null && !all.includes(minutes)) all.push(minutes);\n    return all.sort((a, b) => a - b);\n  }, [minuteStep, minutes]);\n\n  // Which way the time moved, so the shown value rolls like a clock face.\n  const [previous, setPrevious] = useState(minutes);\n  const [dir, setDir] = useState(1);\n  if (previous !== minutes) {\n    setPrevious(minutes);\n    setDir(minutes !== null && previous !== null && minutes < previous ? -1 : 1);\n  }\n\n  return (\n    <AriaSelect\n      data-slot=\"time-picker\"\n      selectedKey={key}\n      onSelectionChange={(next) => {\n        if (next == null) return;\n        const [hour = 0, minute = 0] = String(next).split(\":\").map(Number);\n        const time = new Time(hour, minute);\n        if (value === undefined) setInner(time);\n        onChange?.(time);\n      }}\n      isDisabled={isDisabled}\n      placeholder={placeholder}\n      className={cn(selectVariants(), className)}\n    >\n      <AriaLabel\n        data-slot=\"time-picker-label\"\n        className={cnAll(labelVariants(), labelHidden && \"sr-only\")}\n      >\n        {label}\n      </AriaLabel>\n      <AriaButton ref={ref} data-slot=\"time-picker-trigger\" className={selectTriggerVariants({ size })}>\n        <ClockGlyph />\n        <RollingValue\n          srValue={\n            <AriaSelectValue data-slot=\"time-picker-value\" className=\"sr-only\">\n              {({ isPlaceholder, selectedText }) => (isPlaceholder ? placeholder : selectedText)}\n            </AriaSelectValue>\n          }\n          swapKey={key ?? \"placeholder\"}\n          dir={key === null ? -1 : dir}\n        >\n          {minutes === null ? (\n            <span data-slot=\"time-picker-placeholder\" className=\"text-muted-foreground\">\n              {placeholder}\n            </span>\n          ) : (\n            display(minutes)\n          )}\n        </RollingValue>\n        <Chevron />\n      </AriaButton>\n      {description ? (\n        <AriaText slot=\"description\" data-slot=\"time-picker-description\" className={descriptionClass}>\n          {description}\n        </AriaText>\n      ) : null}\n      <AriaPopover data-slot=\"time-picker-popover\" className={timePickerListVariants()}>\n        <CenteredListBox>\n          {options.map((total) => (\n            <AriaListBoxItem\n              key={keyOf(total)}\n              id={keyOf(total)}\n              textValue={display(total)}\n              data-slot=\"time-picker-item\"\n              className={timePickerItemVariants()}\n            >\n              {({ isSelected }) => (\n                <>\n                  {display(total)}\n                  {isSelected ? (\n                    <span\n                      aria-hidden=\"true\"\n                      data-slot=\"time-picker-dot\"\n                      className=\"size-1.5 rounded-full bg-foreground\"\n                    />\n                  ) : null}\n                </>\n              )}\n            </AriaListBoxItem>\n          ))}\n        </CenteredListBox>\n      </AriaPopover>\n    </AriaSelect>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"time-picker.js","names":["AriaListBox","AriaSelect","AriaLabel","AriaButton","AriaSelectValue","AriaText","AriaFieldError","AriaPopover","AriaListBoxItem"],"sources":["../../src/time-picker/time-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport { Time } from \"@internationalized/date\";\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useMemo, useRef, useState, type FocusEvent, type ReactNode } from \"react\";\nimport {\n  Button as AriaButton,\n  FieldError as AriaFieldError,\n  Label as AriaLabel,\n  ListBox as AriaListBox,\n  ListBoxItem as AriaListBoxItem,\n  Popover as AriaPopover,\n  Select as AriaSelect,\n  SelectValue as AriaSelectValue,\n  Text as AriaText,\n  useLocale,\n  type TimeValue,\n} from \"react-aria-components\";\n\nimport { labelVariants } from \"../label/label.js\";\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { useIsomorphicLayoutEffect } from \"../lib/motion.js\";\nimport { RollingValue } from \"../lib/rolling-value.js\";\nimport { selectErrorClass, selectTriggerVariants, selectVariants } from \"../select/select.js\";\n\n/**\n * TimePicker, a field that shows a time and opens a list of times to pick from.\n *\n * Values are `TimeValue` objects from `@internationalized/date`, as Calendar and\n * DatePicker use `DateValue` (ADR 0006), not \"HH:MM\" strings: a time of day has\n * no time zone or format of its own. Unlike those two, this one builds a `Time`\n * at runtime to hand back, so the package is a real (peer) dependency here and\n * not only a type.\n *\n * The control is a React Aria `Select`, so the list is a listbox with typeahead,\n * arrow keys and a roving highlight; the motion (the value rolling like a clock\n * face, the chevron, the list growing from the field) sits on top of it.\n */\n\n/** The list: it grows from the field, and the highlight follows the pointer and the arrows. */\nexport const timePickerListVariants = cva([\n  \"picker-pop w-(--trigger-width) origin-top overflow-hidden\",\n  // A little less offset than a date picker: this list sits close under its field.\n  \"[--pop-in-y:-6px] [--pop-in-scale:0.97] [--pop-out-y:-4px] [--pop-out-scale:0.98] [--pop-out-duration:120ms]\",\n  \"rounded-panel border-(length:--border-width) border-border p-1\",\n  \"bg-card text-card-foreground shadow-floating\",\n  \"box-border font-sans text-sm leading-(--leading-normal)\",\n]);\n\n/**\n * Keyboard focus on an INVALID trigger. The shared field surface shows focus by\n * darkening the border, but an invalid field keeps its red border while focused,\n * so a keyboard user tabbing onto an invalid picker saw no change at all\n * (WCAG 2.4.7). The red border stays (it is the state) and the focus ring is\n * added outside it. Only while invalid: a valid trigger is unchanged.\n */\nexport const timePickerInvalidFocusClass = [\n  \"group-data-[invalid]:data-[focus-visible]:outline-solid\",\n  \"group-data-[invalid]:data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"group-data-[invalid]:data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"group-data-[invalid]:data-[focus-visible]:outline-(--color-ring)\",\n].join(\" \");\n\n/** A time. The highlight changes almost at once (the arrows move it often); a dot marks the chosen one. */\nexport const timePickerItemVariants = cva([\n  \"relative flex min-h-9 cursor-pointer select-none items-center justify-between gap-2\",\n  \"rounded-control px-3 py-1.5 tabular-nums outline-none\",\n  \"text-sm leading-(--leading-normal) text-card-foreground\",\n  \"data-[focused]:bg-muted\",\n  \"motion-safe:transition-colors motion-safe:duration-80 motion-safe:ease-settle\",\n  \"data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring)\",\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n]);\n\nconst descriptionClass = \"text-sm leading-(--leading-normal) text-muted-foreground\";\n\nconst pad = (value: number) => String(value).padStart(2, \"0\");\nconst keyOf = (minutes: number) => `${pad(Math.floor(minutes / 60))}:${pad(minutes % 60)}`;\nconst minutesOf = (value: TimeValue) => value.hour * 60 + value.minute;\n\nfunction ClockGlyph() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"text-muted-foreground\"\n    >\n      <circle cx=\"8\" cy=\"8\" r=\"5.5\" />\n      <path d=\"M8 5v3l2 1.5\" />\n    </svg>\n  );\n}\n\n/** The chevron turns half a turn while the list is open, on the gentle spring. */\nfunction Chevron() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.75\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"text-muted-foreground motion-safe:transition-[rotate] motion-safe:duration-(--duration-gentle) motion-safe:ease-gentle group-aria-expanded/trigger:rotate-180\"\n    >\n      <path d=\"m4 6 4 4 4-4\" />\n    </svg>\n  );\n}\n\n/**\n * The list of times. It opens centred on the chosen time (or at the top with\n * none), before the first frame, so there is no scroll to watch; the arrow keys\n * then keep the highlight in view, which React Aria does.\n */\nfunction CenteredListBox({ children }: { children: React.ReactNode }) {\n  const ref = useRef<HTMLDivElement>(null);\n  useIsomorphicLayoutEffect(() => {\n    const list = ref.current;\n    const chosen = list?.querySelector<HTMLElement>('[role=\"option\"][aria-selected=\"true\"]');\n    if (!list || !chosen) return;\n    list.scrollTop = chosen.offsetTop - (list.clientHeight - chosen.offsetHeight) / 2;\n  }, []);\n  return (\n    <AriaListBox\n      ref={ref}\n      data-slot=\"time-picker-list\"\n      className=\"relative max-h-62.5 overflow-y-auto overscroll-contain outline-none\"\n    >\n      {children}\n    </AriaListBox>\n  );\n}\n\nexport interface TimePickerProps {\n  /** What is being chosen, and the control's accessible name. Required, as on Select. */\n  label: string;\n  /** Render the label for screen readers only. */\n  labelHidden?: boolean;\n  /** Help text under the control, named in `aria-describedby`. */\n  description?: string;\n  /** Shown while no time is chosen. @default \"Select a time\" */\n  placeholder?: string;\n  /**\n   * The chosen time. Controlled: pass `null` for none. `undefined` means\n   * UNCONTROLLED, so going from a time to `undefined` keeps the last time on\n   * screen: to clear a controlled picker (a form reset) pass `null`, for example\n   * `value={field.value ?? null}`.\n   */\n  value?: TimeValue | null;\n  /** The starting time when uncontrolled. @default null */\n  defaultValue?: TimeValue | null;\n  /** Called with the chosen time, as a `Time`. */\n  onChange?: (value: TimeValue) => void;\n  /** Minutes between the times in the list. @default 15 */\n  minuteStep?: 1 | 5 | 10 | 15 | 30;\n  /** 12-hour (9:00 AM) or 24-hour (09:00) times. @default 12 */\n  hourCycle?: 12 | 24;\n  /** Control scale of the trigger. @default \"md\" */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** Disable the control. */\n  isDisabled?: boolean;\n  /**\n   * The trigger's `id`, so a `<label htmlFor>` outside the picker (or a form\n   * library that focuses a field by id) reaches the real control.\n   */\n  id?: string;\n  /**\n   * Submits the time with a native form, as \"HH:MM\" in 24-hour time (the same\n   * string an `<input type=\"time\">` submits). While no time is chosen the field\n   * submits an empty string under this name, as an empty `<input type=\"time\">` does.\n   */\n  name?: string;\n  /**\n   * Marks the time as wrong: the trigger takes the invalid border. Pair it with\n   * `errorMessage`, or the state is shown in colour only.\n   */\n  isInvalid?: boolean;\n  /**\n   * Why the time is wrong, under the control. It shows only while `isInvalid`\n   * is set, and React Aria names it in the trigger's `aria-describedby`.\n   */\n  errorMessage?: ReactNode;\n  /** Called when focus leaves the trigger, such as react-hook-form's `field.onBlur`. */\n  onBlur?: (event: FocusEvent<Element>) => void;\n  /** Extra classes for the wrapper. Merged last. */\n  className?: string;\n}\n\n/**\n * A time picker.\n *\n * @example\n * <TimePicker label=\"Start time\" value={time} onChange={setTime} minuteStep={30} />\n *\n * @example\n * // With react-hook-form's Controller\n * <TimePicker label=\"Sync time\" id={field.name} name={field.name} value={field.value ?? null}\n *             onChange={field.onChange} onBlur={field.onBlur}\n *             isInvalid={!!fieldState.error} errorMessage={fieldState.error?.message} />\n */\nexport const TimePicker = forwardRef<HTMLButtonElement, TimePickerProps>(function TimePicker(\n  {\n    label,\n    labelHidden,\n    description,\n    placeholder = \"Select a time\",\n    value,\n    defaultValue = null,\n    onChange,\n    minuteStep = 15,\n    hourCycle = 12,\n    size = \"md\",\n    isDisabled,\n    id,\n    name,\n    isInvalid,\n    errorMessage,\n    onBlur,\n    className,\n  },\n  ref,\n) {\n  const { locale } = useLocale();\n  const [inner, setInner] = useState<TimeValue | null>(defaultValue);\n  const current = value === undefined ? inner : value;\n  const minutes = current ? minutesOf(current) : null;\n  const key = minutes === null ? null : keyOf(minutes);\n\n  const display = useMemo(() => {\n    const format = new Intl.DateTimeFormat(locale, {\n      hour: \"numeric\",\n      minute: \"2-digit\",\n      hourCycle: hourCycle === 24 ? \"h23\" : \"h12\",\n      timeZone: \"UTC\",\n    });\n    return (total: number) =>\n      format\n        .format(new Date(Date.UTC(2000, 0, 1, Math.floor(total / 60), total % 60)))\n        .replace(/\\u202f/g, \" \");\n  }, [locale, hourCycle]);\n\n  // The list: every step of the day, plus the current time if it falls between steps.\n  const options = useMemo(() => {\n    const all = Array.from({ length: Math.ceil(1440 / minuteStep) }, (_, i) => i * minuteStep);\n    if (minutes !== null && !all.includes(minutes)) all.push(minutes);\n    return all.sort((a, b) => a - b);\n  }, [minuteStep, minutes]);\n\n  // Which way the time moved, so the shown value rolls like a clock face.\n  const [previous, setPrevious] = useState(minutes);\n  const [dir, setDir] = useState(1);\n  if (previous !== minutes) {\n    setPrevious(minutes);\n    setDir(minutes !== null && previous !== null && minutes < previous ? -1 : 1);\n  }\n\n  return (\n    <AriaSelect\n      data-slot=\"time-picker\"\n      selectedKey={key}\n      onSelectionChange={(next) => {\n        if (next == null) return;\n        const [hour = 0, minute = 0] = String(next).split(\":\").map(Number);\n        const time = new Time(hour, minute);\n        if (value === undefined) setInner(time);\n        onChange?.(time);\n      }}\n      isDisabled={isDisabled}\n      id={id}\n      name={name}\n      isInvalid={isInvalid}\n      onBlur={onBlur}\n      placeholder={placeholder}\n      className={cn(selectVariants(), className)}\n    >\n      <AriaLabel\n        data-slot=\"time-picker-label\"\n        className={cnAll(labelVariants(), labelHidden && \"sr-only\")}\n      >\n        {label}\n      </AriaLabel>\n      <AriaButton\n        ref={ref}\n        data-slot=\"time-picker-trigger\"\n        className={cnAll(selectTriggerVariants({ size }), timePickerInvalidFocusClass)}\n      >\n        <ClockGlyph />\n        <RollingValue\n          srValue={\n            <AriaSelectValue data-slot=\"time-picker-value\" className=\"sr-only\">\n              {({ isPlaceholder, selectedText }) => (isPlaceholder ? placeholder : selectedText)}\n            </AriaSelectValue>\n          }\n          swapKey={key ?? \"placeholder\"}\n          dir={key === null ? -1 : dir}\n        >\n          {minutes === null ? (\n            <span data-slot=\"time-picker-placeholder\" className=\"text-muted-foreground\">\n              {placeholder}\n            </span>\n          ) : (\n            display(minutes)\n          )}\n        </RollingValue>\n        <Chevron />\n      </AriaButton>\n      {description ? (\n        <AriaText slot=\"description\" data-slot=\"time-picker-description\" className={descriptionClass}>\n          {description}\n        </AriaText>\n      ) : null}\n      {errorMessage == null ? null : (\n        // Select's pattern: React Aria renders FieldError only while the field is invalid.\n        <AriaFieldError data-slot=\"time-picker-error\" className={selectErrorClass}>\n          {errorMessage}\n        </AriaFieldError>\n      )}\n      <AriaPopover data-slot=\"time-picker-popover\" className={timePickerListVariants()}>\n        <CenteredListBox>\n          {options.map((total) => (\n            <AriaListBoxItem\n              key={keyOf(total)}\n              id={keyOf(total)}\n              textValue={display(total)}\n              data-slot=\"time-picker-item\"\n              className={timePickerItemVariants()}\n            >\n              {({ isSelected }) => (\n                <>\n                  {display(total)}\n                  {isSelected ? (\n                    <span\n                      aria-hidden=\"true\"\n                      data-slot=\"time-picker-dot\"\n                      className=\"size-1.5 rounded-full bg-foreground\"\n                    />\n                  ) : null}\n                </>\n              )}\n            </AriaListBoxItem>\n          ))}\n        </CenteredListBox>\n      </AriaPopover>\n    </AriaSelect>\n  );\n});\n"],"mappings":"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"}

package/dist/toast/toast.d.ts

@@ -34,11 +34,11 @@ import { UNSTABLE_ToastQueue } from "react-aria-components";
 /** Where the region sits. Fixed, above everything, out of the way of content. */
 export declare const toastRegionVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const toastVariants: (props?: ({
-  tone?: "neutral" | "success" | "warning" | "danger" | "info" | null | undefined;
+  tone?: "neutral" | "warning" | "success" | "info" | "danger" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /** The status icon's circle: the tone's light fill with its AA text colour. */
 export declare const toastIconVariants: (props?: ({
-  tone?: "neutral" | "success" | "warning" | "danger" | "info" | null | undefined;
+  tone?: "neutral" | "warning" | "success" | "info" | "danger" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const toastCloseVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 /** What a toast carries. `title` is required: an unnamed toast announces nothing. */

package/dist/usage-meter/index.d.ts

@@ -1,2 +1,2 @@
-import { UsageMeter, UsageMeterProps, UsageMeterSegment } from "./usage-meter.js";
-export { UsageMeter, type UsageMeterProps, type UsageMeterSegment };
+import { UsageMeter, UsageMeterProps, UsageMeterSegment, UsageMeterStatus } from "./usage-meter.js";
+export { UsageMeter, type UsageMeterProps, type UsageMeterSegment, type UsageMeterStatus };

package/dist/usage-meter/usage-meter.d.ts

@@ -44,7 +44,37 @@ export interface UsageMeterProps extends Omit<ComponentPropsWithoutRef<"div">, "
   overLabel?: string;
   /** Share of the limit at which the meter warns that it is almost full. @default 0.9 */
   warnAt?: number;
+  /**
+   * The state as the caller (usually the backend) reads it, overriding the one
+   * `warnAt` and the limit would give. `ok` and `warn` look as the meter's own
+   * under-limit and almost-full states; `full` is the allowance used up
+   * ("Limit reached"); `exhausted` is nothing left to draw on at all ("None
+   * left"). Left out, the meter works it out itself.
+   *
+   * The bar and legend agree with it: under `full` or `exhausted` the free
+   * share is shown as none (the bar fills, the free item reads 0), and past
+   * the limit `ok` and `warn` give way to the meter's own over state, since
+   * the hatch already says over.
+   */
+  status?: UsageMeterStatus;
+  /**
+   * The product's words for the status, such as "Credits paused". They replace
+   * the badge's words (including "Unlimited"), the status in the bar's name and
+   * the announcement; the tone and icon still follow the status.
+   */
+  statusLabel?: string;
+  /**
+   * No limit: the bar shows each category's share of what is used, with no
+   * free share, limit marker or overflow, and the badge reads "Unlimited"
+   * unless `statusLabel` is set. `limit`, `warnAt` and `status` are ignored.
+   */
+  unlimited?: boolean;
 }
+/**
+ * A status the caller can impose: under the limit, almost full, allowance used
+ * up, and nothing left at all.
+ */
+export type UsageMeterStatus = "ok" | "warn" | "full" | "exhausted";
 export declare const UsageMeter: import("react").ForwardRefExoticComponent<UsageMeterProps & import("react").RefAttributes<HTMLDivElement>>;
 //#endregion
 //# sourceMappingURL=usage-meter.d.ts.map

package/dist/usage-meter/usage-meter.js

@@ -10,6 +10,13 @@ import { useSvgId } from "../lib/svg-id.js";
 import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/usage-meter/usage-meter.tsx
+/** The imposed status as `data-status` names it: `warn` is the meter's own `near`. */
+const IMPOSED = {
+	ok: "ok",
+	warn: "near",
+	full: "full",
+	exhausted: "exhausted"
+};
 /** A segment stops two pixels short of the next, so neighbours read apart without an outline. */
 const GAP = 2;
 /** Stagger of each segment's first growth. */
@@ -62,7 +69,7 @@ function AlertTriangleIcon() {
 		children: [/* @__PURE__ */ jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }), /* @__PURE__ */ jsx("path", { d: "M12 9v4M12 17h.01" })]
 	});
 }
-const UsageMeter = forwardRef(function UsageMeter({ label, segments, limit, unit = "", decimals = 1, freeLabel = "Free", overLabel = "Over limit", warnAt = .9, className, ...props }, ref) {
+const UsageMeter = forwardRef(function UsageMeter({ label, segments, limit, unit = "", decimals = 1, freeLabel = "Free", overLabel = "Over limit", warnAt = .9, status: imposed, statusLabel, unlimited = false, className, ...props }, ref) {
 	const root = useRef(null);
 	const refs = useMemo(() => mergeRefs(ref, root), [ref]);
 	const bar = useRef(null);
@@ -74,9 +81,13 @@ const UsageMeter = forwardRef(function UsageMeter({ label, segments, limit, unit
 	const hatchId = `hatch${useSvgId()}`;
 	const round = (value) => Math.round(value * 10 ** decimals) / 10 ** decimals;
 	const total = round(segments.reduce((sum, segment) => sum + segment.value, 0));
-	const free = round(Math.max(0, limit - total));
 	const over = round(Math.max(0, total - limit));
-	const status = total > limit ? "over" : total >= limit * warnAt ? "near" : "ok";
+	const past = !unlimited && total > limit;
+	const status = unlimited ? "ok" : imposed && !(past && (imposed === "ok" || imposed === "warn")) ? IMPOSED[imposed] : past ? "over" : total >= limit * warnAt ? "near" : "ok";
+	const capped = !unlimited && !past && (status === "full" || status === "exhausted");
+	const ceiling = capped ? total : limit;
+	const free = round(Math.max(0, ceiling - total));
+	const danger = status === "over" || status === "full" || status === "exhausted";
 	const format = (value) => `${numberFormat(decimals).format(value)}${unit ? ` ${unit}` : ""}`;
 	const limitText = format(limit).replace(/\.0+(?= |$)/, "");
 	const [ready, setReady] = useState(false);
@@ -95,8 +106,12 @@ const UsageMeter = forwardRef(function UsageMeter({ label, segments, limit, unit
 		return () => observer.disconnect();
 	}, []);
 	const [amounts] = useState(() => /* @__PURE__ */ new Map());
-	const shownLimit = useRef(live(limit));
+	const shownLimit = useRef(live(unlimited ? 0 : ceiling));
 	const width = useRef(0);
+	const bounded = useRef(!unlimited && !capped);
+	useIsomorphicLayoutEffect(() => {
+		bounded.current = !unlimited && !capped;
+	});
 	/** One writer: every segment's place and length, the limit marker and the overflow hatch. */
 	const paint = useCallback(() => {
 		const frame = track.current;
@@ -121,7 +136,7 @@ const UsageMeter = forwardRef(function UsageMeter({ label, segments, limit, unit
 		if (marker.current) marker.current.style.translate = `${limitX}px 0`;
 		if (overflow.current) overflow.current.style.clipPath = `inset(0 0 0 ${limitX + GAP}px)`;
 		if (bar.current) {
-			if (used > limitNow) bar.current.setAttribute("data-over", "");
+			if (bounded.current && used > limitNow) bar.current.setAttribute("data-over", "");
 			else bar.current.removeAttribute("data-over");
 		}
 	}, [amounts]);
@@ -164,8 +179,12 @@ const UsageMeter = forwardRef(function UsageMeter({ label, segments, limit, unit
 		amounts
 	]);
 	useEffect(() => {
-		retarget(shownLimit.current, limit, SMOOTH, paint);
-	}, [limit, paint]);
+		retarget(shownLimit.current, unlimited ? 0 : ceiling, SMOOTH, paint);
+	}, [
+		ceiling,
+		unlimited,
+		paint
+	]);
 	useEffect(() => {
 		const bound = shownLimit.current;
 		return () => {
@@ -181,24 +200,25 @@ const UsageMeter = forwardRef(function UsageMeter({ label, segments, limit, unit
 		id: segment.id,
 		label: segment.label,
 		value: segment.value
-	})), {
+	})), ...unlimited ? [] : [{
 		id: "free",
-		label: status === "over" ? overLabel : freeLabel,
-		value: status === "over" ? over : free
-	}];
+		label: past ? overLabel : freeLabel,
+		value: past ? over : free
+	}]];
+	const rove = Math.min(roving, Math.max(0, items.length - 1));
 	const active = hovered ?? focused ?? pinned;
 	const activeItem = items.find((item) => item.id === active) ?? null;
 	const idAt = (clientX) => {
 		const rect = track.current?.getBoundingClientRect();
 		if (!rect?.width) return null;
-		const at = (clientX - rect.left) / rect.width * Math.max(limit, total);
-		if (at > limit) return "free";
+		const at = (clientX - rect.left) / rect.width * (unlimited ? total : Math.max(ceiling, total));
+		if (!unlimited && at > ceiling) return "free";
 		let end = 0;
 		for (const segment of segments) {
 			end += segment.value;
 			if (at <= end) return segment.id;
 		}
-		return "free";
+		return unlimited ? null : "free";
 	};
 	const onTrackMove = (event) => {
 		if (event.pointerType === "mouse") setHovered(idAt(event.clientX));
@@ -218,32 +238,34 @@ const UsageMeter = forwardRef(function UsageMeter({ label, segments, limit, unit
 			return;
 		}
 		const next = {
-			ArrowRight: roving + 1,
-			ArrowDown: roving + 1,
-			ArrowLeft: roving - 1,
-			ArrowUp: roving - 1,
+			ArrowRight: rove + 1,
+			ArrowDown: rove + 1,
+			ArrowLeft: rove - 1,
+			ArrowUp: rove - 1,
 			Home: 0,
 			End: items.length - 1
 		}[event.key];
-		if (next === void 0) return;
+		if (next === void 0 || !items.length) return;
 		event.preventDefault();
 		const index = (next + items.length) % items.length;
 		setRoving(index);
 		legend.current?.querySelectorAll("button")[index]?.focus();
 	};
 	const headline = ready ? activeItem ? activeItem.value : total : 0;
-	const share = activeItem ? Math.round(activeItem.value / limit * 100) : 0;
-	const caption = !activeItem ? `${unit} of ${limitText} used` : activeItem.id === "free" ? `${unit} ${status === "over" ? "over the limit" : "free"}` : `${unit} in ${activeItem.label} · ${share}% of plan`;
-	const badge = status === "over" ? `${format(over)} over` : status === "near" ? "Almost full" : `${format(free)} free`;
-	const summary = `${label}: ${format(total)} of ${limitText} used. ${segments.map((segment) => `${segment.label} ${format(segment.value)}`).join(", ")}. ${status === "over" ? `Over the limit by ${format(over)}.` : `${format(free)} free${status === "near" ? ", almost full" : ""}.`}`;
-	const notice = status === "over" ? `over:${over}` : status;
+	const share = activeItem && !unlimited && limit > 0 ? Math.round(activeItem.value / limit * 100) : 0;
+	const caption = !activeItem ? unlimited ? `${unit} used · no limit` : `${unit} of ${limitText} used` : activeItem.id === "free" ? `${unit} ${past ? "over the limit" : "free"}` : unlimited ? `${unit} in ${activeItem.label}` : `${unit} in ${activeItem.label} · ${share}% of plan`;
+	const badge = statusLabel ?? (unlimited ? "Unlimited" : status === "over" ? `${format(over)} over` : status === "near" ? "Almost full" : status === "full" ? "Limit reached" : status === "exhausted" ? "None left" : `${format(free)} free`);
+	const breakdown = segments.map((segment) => `${segment.label} ${format(segment.value)}`).join(", ");
+	const labelled = statusLabel ? ` ${statusLabel}.` : "";
+	const summary = unlimited ? `${label}: ${format(total)} used, no limit. ${breakdown}.${labelled}` : `${label}: ${format(total)} of ${limitText} used. ${breakdown}. ${status === "over" ? `Over the limit by ${format(over)}.` : `${format(free)} free${statusLabel ? "" : status === "near" ? ", almost full" : status === "full" ? ", limit reached" : status === "exhausted" ? ", none left" : ""}.`}${labelled}`;
+	const notice = `${unlimited ? "unlimited" : status === "over" ? `over:${over}` : status}|${statusLabel ?? ""}`;
 	const [announced, setAnnounced] = useState({
 		notice,
 		message: ""
 	});
 	if (announced.notice !== notice) setAnnounced({
 		notice,
-		message: status === "over" ? `Over the plan limit by ${format(over)}.` : status === "near" ? `Almost full. ${format(free)} free.` : `Under the limit. ${format(free)} free.`
+		message: unlimited ? `No limit.${labelled}` : status === "over" ? `Over the plan limit by ${format(over)}.${labelled}` : statusLabel ? `${statusLabel}. ${format(free)} free.` : status === "near" ? `Almost full. ${format(free)} free.` : status === "full" ? "Limit reached." : status === "exhausted" ? "None left." : `Under the limit. ${format(free)} free.`
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		ref: refs,
@@ -252,6 +274,7 @@ const UsageMeter = forwardRef(function UsageMeter({ label, segments, limit, unit
 		"aria-labelledby": titleId,
 		"data-slot": "usage-meter",
 		"data-status": status,
+		"data-unlimited": unlimited || void 0,
 		className: cn("usage-meter", className),
 		children: [
 			/* @__PURE__ */ jsxs("div", {
@@ -261,24 +284,19 @@ const UsageMeter = forwardRef(function UsageMeter({ label, segments, limit, unit
 					className: "min-w-0 text-base font-medium text-foreground text-balance",
 					children: label
 				}), /* @__PURE__ */ jsx(Badge, {
-					tone: status === "over" ? "danger" : status === "near" ? "warning" : "neutral",
+					tone: danger ? "danger" : status === "near" ? "warning" : "neutral",
 					shape: "pill",
 					size: "lg",
-					icon: status === "over" ? /* @__PURE__ */ jsx(AlertTriangleIcon, {}) : status === "near" ? /* @__PURE__ */ jsx(AlertCircleIcon, {}) : void 0,
+					icon: danger ? /* @__PURE__ */ jsx(AlertTriangleIcon, {}) : status === "near" ? /* @__PURE__ */ jsx(AlertCircleIcon, {}) : void 0,
 					children: badge
 				})]
 			}),
 			/* @__PURE__ */ jsxs("p", {
 				className: "m-0 flex min-w-0 items-baseline gap-2",
 				children: [
-					/* @__PURE__ */ jsxs("span", {
+					/* @__PURE__ */ jsx("span", {
 						className: "sr-only",
-						children: [
-							format(total),
-							" of ",
-							limitText,
-							" used"
-						]
+						children: unlimited ? `${format(total)} used, no limit` : `${format(total)} of ${limitText} used`
 					}),
 					/* @__PURE__ */ jsx("span", {
 						"data-slot": "usage-meter-amount",
@@ -318,7 +336,7 @@ const UsageMeter = forwardRef(function UsageMeter({ label, segments, limit, unit
 						"data-index": index,
 						"data-highlight": active ? active === segment.id ? "on" : "off" : void 0,
 						className: "usage-meter-segment"
-					}, segment.id)), /* @__PURE__ */ jsxs("svg", {
+					}, segment.id)), unlimited ? null : /* @__PURE__ */ jsxs("svg", {
 						ref: overflow,
 						"aria-hidden": "true",
 						focusable: "false",
@@ -349,7 +367,7 @@ const UsageMeter = forwardRef(function UsageMeter({ label, segments, limit, unit
 							})
 						]
 					})]
-				}), /* @__PURE__ */ jsx("span", {
+				}), unlimited ? null : /* @__PURE__ */ jsx("span", {
 					ref: marker,
 					"aria-hidden": "true",
 					className: "usage-meter-limit"
@@ -362,14 +380,14 @@ const UsageMeter = forwardRef(function UsageMeter({ label, segments, limit, unit
 				onKeyDown: onLegendKey,
 				className: "usage-meter-legend",
 				children: items.map((item, index) => {
-					const warning = item.id === "free" && status === "over";
+					const warning = item.id === "free" && past;
 					return /* @__PURE__ */ jsxs("button", {
 						type: "button",
 						"data-slot": "usage-meter-item",
 						"data-highlight": active ? active === item.id ? "on" : "off" : void 0,
 						"aria-pressed": pinned === item.id,
 						"aria-label": `${item.label}, ${format(item.value)}`,
-						tabIndex: index === roving ? 0 : -1,
+						tabIndex: index === rove ? 0 : -1,
 						onClick: () => {
 							setRoving(index);
 							setPinned((current) => current === item.id ? null : item.id);