@seekalfred/primitives 0.7.3 → 0.7.4

package/dist/multi-select/multi-select.d.ts

@@ -12,6 +12,11 @@ import { Key, SelectProps } from "react-aria-components";
  * in beside the chevron when anything is picked. Options are `SelectItem`s, whose
  * tick pops in as an option is picked; `MultiSelectGroup` gathers them under a
  * heading.
+ *
+ * Opt in to `searchable` for a search field at the top of the list that filters
+ * the options as you type (React Aria's Autocomplete, so the arrow keys and Enter
+ * work from the field). Pass `onCreate` to also offer a "Create “…”" row when the
+ * typed text matches no option.
  */
 export interface MultiSelectProps extends Omit<SelectProps<object, "multiple">, "className" | "style" | "children" | "items" | "selectionMode"> {
   /** `SelectItem` children. */
@@ -43,6 +48,32 @@ export interface MultiSelectProps extends Omit<SelectProps<object, "multiple">,
   size?: "sm" | "md" | "lg";
   /** Extra classes for the wrapper. Merged last. */
   className?: string;
+  /**
+   * Puts a search field at the top of the list. Typing filters the options (and
+   * groups) by their text, ignoring case and accents; the arrow keys and Enter
+   * work from the field. Cleared each time the list closes. Off by default.
+   * Turned on by `onCreate` too.
+   *
+   * @default false
+   */
+  searchable?: boolean;
+  /** Accessible name of the search field. @default "Search options" */
+  searchLabel?: string;
+  /** Placeholder of the search field. @default "Search" */
+  searchPlaceholder?: string;
+  /** Shown in the list while the search matches nothing. @default "No options found" */
+  emptyLabel?: string;
+  /**
+   * Makes the list creatable, and searchable. While the typed text (trimmed)
+   * matches no option's text or id nor a picked value, ignoring case, the list ends
+   * with a "Create “text”" row. Picking it calls `onCreate` with the text, adds
+   * the text itself as a picked key (through `onChange`, as any pick) and clears
+   * the search. Render a `SelectItem` whose `id` is that text so it lists like
+   * the others; until then its chip shows the text.
+   */
+  onCreate?: (value: string) => void;
+  /** The create row's text for the typed value. @default (value) => `Create “${value}”` */
+  createLabel?: (value: string) => string;
 }
 export declare const MultiSelect: import("react").ForwardRefExoticComponent<MultiSelectProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const multiSelectGroupVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/multi-select/multi-select.js

@@ -4,12 +4,95 @@ import { SwapText } from "../lib/swap-text.js";
 import { useFlip } from "../lib/flip.js";
 import { Tooltip as Tooltip$1, TooltipTrigger as TooltipTrigger$1 } from "../tooltip/tooltip.js";
 import { labelVariants } from "../label/label.js";
-import { selectPopoverVariants, selectTriggerVariants, selectVariants } from "../select/select.js";
+import { selectItemVariants, selectPopoverVariants, selectTriggerVariants, selectVariants } from "../select/select.js";
 import { cva } from "class-variance-authority";
 import { forwardRef, useContext, useRef, useState } from "react";
-import { Button, ButtonContext, FieldError, Header, Label, ListBox, ListBoxSection, Popover, Select, SelectStateContext, SelectValue } from "react-aria-components";
+import { Autocomplete, Button, ButtonContext, FieldError, Header, Input, Label, ListBox, ListBoxItem, ListBoxSection, Popover, SearchField, Select, SelectStateContext, SelectValue, useFilter } from "react-aria-components";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/multi-select/multi-select.tsx
+/** The key of the create row. Never reaches `onChange`. */
+const CREATE_KEY = "__multi-select-create__";
+const defaultCreateLabel = (value) => `Create \u201c${value}\u201d`;
+/** Whether `text` already names an option (by its text or its key) or a pick, ignoring case. */
+function isTaken(state, text) {
+	const want = text.toLocaleLowerCase();
+	if ((state?.value ?? []).some((key) => String(key).toLocaleLowerCase() === want)) return true;
+	if (!state) return false;
+	for (const key of state.collection.getKeys()) {
+		const node = state.collection.getItem(key);
+		if (node?.type === "item" && node.key !== CREATE_KEY && (node.textValue.toLocaleLowerCase() === want || String(node.key).toLocaleLowerCase() === want)) return true;
+	}
+	return false;
+}
+/**
+* The list with a search field over it (React Aria's Autocomplete): the field
+* keeps focus and drives the options with the arrow keys, Enter picks.
+*/
+function SearchList({ query, onQueryChange, creatable, searchLabel, searchPlaceholder, emptyLabel, children }) {
+	const state = useContext(SelectStateContext);
+	const { contains } = useFilter({ sensitivity: "base" });
+	const text = query.trim();
+	const offerCreate = creatable && text !== "" && !isTaken(state, text);
+	return /* @__PURE__ */ jsxs(Autocomplete, {
+		inputValue: query,
+		onInputChange: onQueryChange,
+		filter: (textValue, input, node) => node.key === CREATE_KEY ? offerCreate : contains(textValue, input),
+		children: [/* @__PURE__ */ jsxs(SearchField, {
+			"aria-label": searchLabel,
+			autoFocus: true,
+			"data-slot": "multi-select-search",
+			className: multiSelectSearchClass,
+			children: [/* @__PURE__ */ jsxs("svg", {
+				"aria-hidden": "true",
+				viewBox: "0 0 16 16",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "1.75",
+				strokeLinecap: "round",
+				className: "size-4 flex-none text-muted-foreground",
+				children: [/* @__PURE__ */ jsx("circle", {
+					cx: "7",
+					cy: "7",
+					r: "4.5"
+				}), /* @__PURE__ */ jsx("path", { d: "m10.5 10.5 3 3" })]
+			}), /* @__PURE__ */ jsx(Input, {
+				placeholder: searchPlaceholder,
+				"data-slot": "multi-select-search-input",
+				className: "min-w-0 flex-1 appearance-none border-0 bg-transparent p-0 font-sans text-sm text-foreground outline-none placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden"
+			})]
+		}), /* @__PURE__ */ jsx(ListBox, {
+			"data-slot": "multi-select-list",
+			renderEmptyState: () => /* @__PURE__ */ jsx("p", {
+				"data-slot": "multi-select-empty",
+				className: "m-0 px-2 py-1.5 text-sm text-muted-foreground",
+				children: emptyLabel
+			}),
+			className: "min-h-0 flex-1 overflow-y-auto outline-none",
+			children
+		})]
+	});
+}
+/** The search row: a quiet field over the list, underlined while focused. */
+const multiSelectSearchClass = "relative mb-1 flex h-(--density-control-h-sm) flex-none items-center gap-2 border-b-(length:--border-width) border-border px-2 after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-(--focus-ring-width) after:bg-transparent has-[input:focus]:after:bg-(--color-control-edge)";
+/** The row that creates the typed value. Kept in the collection; the filter shows it. */
+function CreateItem({ label }) {
+	return /* @__PURE__ */ jsxs(ListBoxItem, {
+		id: CREATE_KEY,
+		textValue: label,
+		"data-slot": "multi-select-create",
+		className: cnAll(selectItemVariants(), "text-text-secondary data-[focused]:text-foreground"),
+		children: [/* @__PURE__ */ jsx("svg", {
+			"aria-hidden": "true",
+			viewBox: "0 0 16 16",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "1.75",
+			strokeLinecap: "round",
+			className: "size-3.5 flex-none",
+			children: /* @__PURE__ */ jsx("path", { d: "M8 3.5v9M3.5 8h9" })
+		}), label]
+	});
+}
 /** The picked options as chips, then "+N", reading Select's own state. */
 function Chips({ placeholder, maxVisible, moreLabel, moreRef }) {
 	const state = useContext(SelectStateContext);
@@ -117,8 +200,29 @@ function Clear({ label, disabled }) {
 		})
 	});
 }
-const MultiSelect = forwardRef(function MultiSelect({ children, label, labelHidden, placeholder = "Select options", errorMessage, maxVisible = 2, moreLabel, overflowTooltip = false, clearLabel = "Clear selections", size = "md", className, ...props }, ref) {
+const MultiSelect = forwardRef(function MultiSelect({ children, label, labelHidden, placeholder = "Select options", errorMessage, maxVisible = 2, moreLabel, overflowTooltip = false, clearLabel = "Clear selections", size = "md", className, searchable = false, searchLabel = "Search options", searchPlaceholder = "Search", emptyLabel = "No options found", onCreate, createLabel = defaultCreateLabel, ...props }, ref) {
 	const moreRef = useRef(null);
+	const creatable = onCreate != null;
+	const withSearch = searchable || creatable;
+	const [query, setQuery] = useState("");
+	const [ownValue, setOwnValue] = useState(() => props.defaultValue ?? []);
+	const value = props.value ?? ownValue;
+	const creatableProps = creatable ? {
+		value,
+		defaultValue: void 0,
+		onChange: (keys) => {
+			let next = keys;
+			if (keys.includes(CREATE_KEY)) {
+				const text = query.trim();
+				next = keys.filter((key) => key !== CREATE_KEY);
+				if (text !== "" && !next.includes(text)) next.push(text);
+				setQuery("");
+				onCreate(text);
+			}
+			setOwnValue(next);
+			props.onChange?.(next);
+		}
+	} : {};
 	const trigger = /* @__PURE__ */ jsxs(Button, {
 		ref,
 		"data-slot": "multi-select-trigger",
@@ -150,6 +254,11 @@ const MultiSelect = forwardRef(function MultiSelect({ children, label, labelHidd
 	});
 	return /* @__PURE__ */ jsxs(Select, {
 		...props,
+		...creatableProps,
+		onOpenChange: (isOpen) => {
+			if (!isOpen) setQuery("");
+			props.onOpenChange?.(isOpen);
+		},
 		selectionMode: "multiple",
 		"data-slot": "multi-select",
 		className: cn(selectVariants(), className),
@@ -178,8 +287,16 @@ const MultiSelect = forwardRef(function MultiSelect({ children, label, labelHidd
 			}),
 			/* @__PURE__ */ jsx(Popover, {
 				"data-slot": "multi-select-popover",
-				className: selectPopoverVariants(),
-				children: /* @__PURE__ */ jsx(ListBox, {
+				className: withSearch ? cnAll(selectPopoverVariants({ reveal: "fade" }), "flex flex-col overflow-y-hidden") : selectPopoverVariants(),
+				children: withSearch ? /* @__PURE__ */ jsxs(SearchList, {
+					query,
+					onQueryChange: setQuery,
+					creatable,
+					searchLabel,
+					searchPlaceholder,
+					emptyLabel,
+					children: [children, creatable ? /* @__PURE__ */ jsx(CreateItem, { label: createLabel(query.trim()) }) : null]
+				}) : /* @__PURE__ */ jsx(ListBox, {
 					"data-slot": "multi-select-list",
 					className: "outline-none",
 					children

package/dist/multi-select/multi-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select.js","names":["TooltipTrigger","Tooltip","AriaButton","AriaSelectValue","AriaSelect","AriaLabel","AriaFieldError","AriaPopover","AriaListBox","AriaListBoxSection","AriaHeader"],"sources":["../../src/multi-select/multi-select.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useContext, useRef, useState, type ReactNode, type RefObject } from \"react\";\nimport {\n  Button as AriaButton,\n  ButtonContext,\n  FieldError as AriaFieldError,\n  Header as AriaHeader,\n  Label as AriaLabel,\n  ListBox as AriaListBox,\n  ListBoxSection as AriaListBoxSection,\n  Popover as AriaPopover,\n  Select as AriaSelect,\n  SelectStateContext,\n  SelectValue as AriaSelectValue,\n  type Key,\n  type SelectProps as AriaSelectProps,\n} from \"react-aria-components\";\n\nimport { labelVariants } from \"../label/label.js\";\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { useFlip } from \"../lib/flip.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\nimport { selectPopoverVariants, selectTriggerVariants, selectVariants } from \"../select/select.js\";\nimport { Tooltip, TooltipTrigger } from \"../tooltip/tooltip.js\";\n\n/**\n * MultiSelect: pick several options from a list. A Select in multiple mode\n * (React Aria), so the keyboard, typeahead, focus and screen-reader behaviour\n * are Select's own; the list stays open while picking.\n *\n * The trigger shows the first picks as chips and the rest as \"+N\". A new chip\n * fades up from a blur and grows in on the snappy spring while the chips beside\n * it glide over; the count rolls up or down as it changes. A clear button scales\n * in beside the chevron when anything is picked. Options are `SelectItem`s, whose\n * tick pops in as an option is picked; `MultiSelectGroup` gathers them under a\n * heading.\n */\nexport interface MultiSelectProps extends Omit<\n  AriaSelectProps<object, \"multiple\">,\n  \"className\" | \"style\" | \"children\" | \"items\" | \"selectionMode\"\n> {\n  /** `SelectItem` children. */\n  children?: ReactNode;\n  /** What is being chosen, and the control's accessible name. */\n  label: ReactNode;\n  labelHidden?: boolean;\n  /** Shown while nothing is picked. @default \"Select options\" */\n  placeholder?: string;\n  /** Why the selection is wrong. Rendered under the control. */\n  errorMessage?: ReactNode;\n  /** Chips shown in the trigger before the rest become \"+N\". @default 2 */\n  maxVisible?: number;\n  /**\n   * Words after the overflow count, so `\"more\"` reads \"+2 more\". Off by default:\n   * the count alone, \"+2\".\n   */\n  moreLabel?: string;\n  /**\n   * While some picks are folded into \"+N\", hovering or focusing the trigger shows\n   * a tooltip listing them. Off by default.\n   *\n   * @default false\n   */\n  overflowTooltip?: boolean;\n  /** Accessible name of the clear button. @default \"Clear selections\" */\n  clearLabel?: string;\n  /** @default \"md\" */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** Extra classes for the wrapper. Merged last. */\n  className?: string;\n}\n\n/** The picked options as chips, then \"+N\", reading Select's own state. */\nfunction Chips({\n  placeholder,\n  maxVisible,\n  moreLabel,\n  moreRef,\n}: {\n  placeholder: string;\n  maxVisible: number;\n  moreLabel: string | undefined;\n  moreRef: RefObject<HTMLSpanElement | null>;\n}) {\n  const state = useContext(SelectStateContext);\n  const keys = (state?.value as Key[] | undefined) ?? [];\n  const labelOf = (key: Key) => state?.collection.getItem(key)?.textValue ?? String(key);\n  const shown = keys.slice(0, maxVisible);\n  const rest = keys.length - shown.length;\n  const row = useRef<HTMLSpanElement>(null);\n  // The chips beside a new or removed one glide to their new place.\n  useFlip(row, keys.join(\"|\"), \"var(--duration-smooth)\", \"var(--ease-smooth)\");\n  // Chips there at first paint never animate; later ones grow in.\n  const [initial] = useState(() => new Set(keys));\n  const [count, setCount] = useState({ rest, dir: 1 });\n  if (count.rest !== rest) setCount({ rest, dir: rest > count.rest ? 1 : -1 });\n  return (\n    <span\n      ref={row}\n      aria-hidden=\"true\"\n      className=\"relative flex min-h-6.5 min-w-0 flex-1 items-center gap-1.5 overflow-hidden\"\n    >\n      {keys.length === 0 ? (\n        <span\n          data-slot=\"multi-select-placeholder\"\n          className=\"truncate text-muted-foreground motion-safe:animate-fade-in\"\n        >\n          {placeholder}\n        </span>\n      ) : null}\n      {shown.map((key) => (\n        <span\n          key={String(key)}\n          data-flip=\"\"\n          data-slot=\"multi-select-chip\"\n          className={cnAll(\n            \"multi-select-chip\",\n            !initial.has(key) && \"motion-safe:animate-chip-reveal\",\n          )}\n        >\n          {labelOf(key)}\n        </span>\n      ))}\n      {rest > 0 ? (\n        <span\n          ref={moreRef}\n          data-flip=\"\"\n          data-slot=\"multi-select-more\"\n          className=\"multi-select-chip text-text-secondary tabular-nums\"\n        >\n          +\n          <SwapText swapKey={String(rest)} dir={count.dir} motion=\"rise\">\n            {rest}\n          </SwapText>\n          {/* The chip is a flex box, which drops a leading space in a bare text\n              node; whitespace-pre keeps \"+2 more\" from reading \"+2more\". */}\n          {moreLabel ? (\n            <span data-slot=\"multi-select-more-label\" className=\"whitespace-pre\">\n              {` ${moreLabel}`}\n            </span>\n          ) : null}\n        </span>\n      ) : null}\n    </span>\n  );\n}\n\n/** The labels of the picks folded into \"+N\", in the order they were picked. */\nfunction useHiddenLabels(maxVisible: number) {\n  const state = useContext(SelectStateContext);\n  const keys = (state?.value as Key[] | undefined) ?? [];\n  return keys\n    .slice(maxVisible)\n    .map((key) => state?.collection.getItem(key)?.textValue ?? String(key));\n}\n\n/**\n * Wraps the trigger in a tooltip naming the picks hidden behind \"+N\", placed\n * against the +N chip rather than the whole field. Always rendered, so turning\n * `overflowTooltip` on or off never swaps the trigger element (and drops its\n * focus); disabled while off or while nothing is hidden, so it never opens empty.\n */\nfunction OverflowTooltip({\n  enabled,\n  maxVisible,\n  anchorRef,\n  children,\n}: {\n  enabled: boolean;\n  maxVisible: number;\n  anchorRef: RefObject<HTMLSpanElement | null>;\n  children: ReactNode;\n}) {\n  const hidden = useHiddenLabels(maxVisible);\n  return (\n    <TooltipTrigger isDisabled={!enabled || hidden.length === 0}>\n      {children}\n      <Tooltip triggerRef={anchorRef} data-slot=\"multi-select-overflow-tooltip\">\n        {hidden.join(\", \")}\n      </Tooltip>\n    </TooltipTrigger>\n  );\n}\n\n/** Clears every pick. It sits outside the trigger, so it is its own tab stop. */\nfunction Clear({ label, disabled }: { label: string; disabled: boolean }) {\n  const state = useContext(SelectStateContext);\n  const keys = (state?.value as Key[] | undefined) ?? [];\n  if (!state || keys.length === 0 || disabled) return null;\n  // Select hands its trigger props to every Button inside it; clear that, or this\n  // button would become a second trigger named by the label.\n  return (\n    <ButtonContext.Provider value={null}>\n      <AriaButton\n        aria-label={label}\n        data-slot=\"multi-select-clear\"\n        onPress={() => {\n          state.setValue([]);\n          state.close();\n        }}\n        className=\"multi-select-clear motion-safe:animate-field-clear-in motion-reduce:animate-fade-in\"\n      >\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          className=\"size-3.5\"\n        >\n          <path d=\"m4 4 8 8M12 4l-8 8\" />\n        </svg>\n      </AriaButton>\n    </ButtonContext.Provider>\n  );\n}\n\nexport const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(function MultiSelect(\n  {\n    children,\n    label,\n    labelHidden,\n    placeholder = \"Select options\",\n    errorMessage,\n    maxVisible = 2,\n    moreLabel,\n    overflowTooltip = false,\n    clearLabel = \"Clear selections\",\n    size = \"md\",\n    className,\n    ...props\n  },\n  ref,\n) {\n  const moreRef = useRef<HTMLSpanElement>(null);\n  const trigger = (\n    <AriaButton\n      ref={ref}\n      data-slot=\"multi-select-trigger\"\n      className={cnAll(selectTriggerVariants({ size }), \"pe-16 multi-select-trigger\")}\n    >\n      <AriaSelectValue data-slot=\"multi-select-value\" className=\"sr-only\">\n        {({ isPlaceholder, selectedText }) => (isPlaceholder ? placeholder : selectedText)}\n      </AriaSelectValue>\n      <Chips\n        placeholder={placeholder}\n        maxVisible={maxVisible}\n        moreLabel={moreLabel}\n        moreRef={moreRef}\n      />\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=\"absolute end-(--density-control-pad-md) 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    </AriaButton>\n  );\n  return (\n    <AriaSelect<object, \"multiple\">\n      {...props}\n      selectionMode=\"multiple\"\n      data-slot=\"multi-select\"\n      className={cn(selectVariants(), className)}\n    >\n      <AriaLabel\n        data-slot=\"multi-select-label\"\n        className={cnAll(labelVariants(), labelHidden && \"sr-only\")}\n      >\n        {label}\n      </AriaLabel>\n      <div className=\"relative\">\n        <OverflowTooltip enabled={overflowTooltip} maxVisible={maxVisible} anchorRef={moreRef}>\n          {trigger}\n        </OverflowTooltip>\n        <Clear label={clearLabel} disabled={props.isDisabled ?? false} />\n      </div>\n      {errorMessage == null ? null : (\n        <AriaFieldError\n          data-slot=\"multi-select-error\"\n          className=\"text-sm leading-(--leading-normal) text-destructive-strong\"\n        >\n          {errorMessage}\n        </AriaFieldError>\n      )}\n      <AriaPopover data-slot=\"multi-select-popover\" className={selectPopoverVariants()}>\n        <AriaListBox data-slot=\"multi-select-list\" className=\"outline-none\">\n          {children}\n        </AriaListBox>\n      </AriaPopover>\n    </AriaSelect>\n  );\n});\n\nexport const multiSelectGroupVariants = cva([\"flex flex-col not-first:mt-1\"]);\n\nexport const multiSelectGroupHeaderVariants = cva([\n  \"px-2 pt-1.5 pb-1 text-xs leading-(--leading-normal) font-semibold text-muted-foreground\",\n]);\n\n/**\n * A run of options under a heading, such as \"Countries\" and \"Regions\". React\n * Aria's ListBoxSection, so the heading names the group for assistive tech and\n * the arrow keys move straight through from one group to the next.\n *\n * @example\n * <MultiSelect label=\"Markets\">\n *   <MultiSelectGroup title=\"Countries\">\n *     <SelectItem id=\"IN\">India</SelectItem>\n *   </MultiSelectGroup>\n *   <MultiSelectGroup title=\"Regions\">\n *     <SelectItem id=\"europe\">Europe</SelectItem>\n *   </MultiSelectGroup>\n * </MultiSelect>\n */\nexport interface MultiSelectGroupProps {\n  /** The heading drawn above the group, and the group's accessible name. */\n  title: ReactNode;\n  /** `SelectItem` children. */\n  children?: ReactNode;\n  /** Identifies the group in the collection. Defaults to a generated id. */\n  id?: Key;\n  /** Extra classes for the group. Merged last. */\n  className?: string;\n}\n\nexport const MultiSelectGroup = forwardRef<HTMLElement, MultiSelectGroupProps>(\n  function MultiSelectGroup({ title, children, id, className }, ref) {\n    return (\n      <AriaListBoxSection\n        ref={ref}\n        id={id}\n        data-slot=\"multi-select-group\"\n        className={cn(multiSelectGroupVariants(), className)}\n      >\n        <AriaHeader\n          data-slot=\"multi-select-group-header\"\n          className={multiSelectGroupHeaderVariants()}\n        >\n          {title}\n        </AriaHeader>\n        {children}\n      </AriaListBoxSection>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"multi-select.js","names":["AriaAutocomplete","AriaSearchField","AriaInput","AriaListBox","AriaListBoxItem","TooltipTrigger","Tooltip","AriaButton","AriaSelectValue","AriaSelect","AriaLabel","AriaFieldError","AriaPopover","AriaListBoxSection","AriaHeader"],"sources":["../../src/multi-select/multi-select.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport {\n  forwardRef,\n  useContext,\n  useRef,\n  useState,\n  type ContextType,\n  type ReactNode,\n  type RefObject,\n} from \"react\";\nimport {\n  Autocomplete as AriaAutocomplete,\n  Button as AriaButton,\n  ButtonContext,\n  FieldError as AriaFieldError,\n  Header as AriaHeader,\n  Input as AriaInput,\n  Label as AriaLabel,\n  ListBox as AriaListBox,\n  ListBoxItem as AriaListBoxItem,\n  ListBoxSection as AriaListBoxSection,\n  Popover as AriaPopover,\n  SearchField as AriaSearchField,\n  Select as AriaSelect,\n  SelectStateContext,\n  SelectValue as AriaSelectValue,\n  type Key,\n  type SelectProps as AriaSelectProps,\n  useFilter,\n} from \"react-aria-components\";\n\nimport { labelVariants } from \"../label/label.js\";\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { useFlip } from \"../lib/flip.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\nimport {\n  selectItemVariants,\n  selectPopoverVariants,\n  selectTriggerVariants,\n  selectVariants,\n} from \"../select/select.js\";\nimport { Tooltip, TooltipTrigger } from \"../tooltip/tooltip.js\";\n\n/**\n * MultiSelect: pick several options from a list. A Select in multiple mode\n * (React Aria), so the keyboard, typeahead, focus and screen-reader behaviour\n * are Select's own; the list stays open while picking.\n *\n * The trigger shows the first picks as chips and the rest as \"+N\". A new chip\n * fades up from a blur and grows in on the snappy spring while the chips beside\n * it glide over; the count rolls up or down as it changes. A clear button scales\n * in beside the chevron when anything is picked. Options are `SelectItem`s, whose\n * tick pops in as an option is picked; `MultiSelectGroup` gathers them under a\n * heading.\n *\n * Opt in to `searchable` for a search field at the top of the list that filters\n * the options as you type (React Aria's Autocomplete, so the arrow keys and Enter\n * work from the field). Pass `onCreate` to also offer a \"Create “…”\" row when the\n * typed text matches no option.\n */\nexport interface MultiSelectProps extends Omit<\n  AriaSelectProps<object, \"multiple\">,\n  \"className\" | \"style\" | \"children\" | \"items\" | \"selectionMode\"\n> {\n  /** `SelectItem` children. */\n  children?: ReactNode;\n  /** What is being chosen, and the control's accessible name. */\n  label: ReactNode;\n  labelHidden?: boolean;\n  /** Shown while nothing is picked. @default \"Select options\" */\n  placeholder?: string;\n  /** Why the selection is wrong. Rendered under the control. */\n  errorMessage?: ReactNode;\n  /** Chips shown in the trigger before the rest become \"+N\". @default 2 */\n  maxVisible?: number;\n  /**\n   * Words after the overflow count, so `\"more\"` reads \"+2 more\". Off by default:\n   * the count alone, \"+2\".\n   */\n  moreLabel?: string;\n  /**\n   * While some picks are folded into \"+N\", hovering or focusing the trigger shows\n   * a tooltip listing them. Off by default.\n   *\n   * @default false\n   */\n  overflowTooltip?: boolean;\n  /** Accessible name of the clear button. @default \"Clear selections\" */\n  clearLabel?: string;\n  /** @default \"md\" */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** Extra classes for the wrapper. Merged last. */\n  className?: string;\n  /**\n   * Puts a search field at the top of the list. Typing filters the options (and\n   * groups) by their text, ignoring case and accents; the arrow keys and Enter\n   * work from the field. Cleared each time the list closes. Off by default.\n   * Turned on by `onCreate` too.\n   *\n   * @default false\n   */\n  searchable?: boolean;\n  /** Accessible name of the search field. @default \"Search options\" */\n  searchLabel?: string;\n  /** Placeholder of the search field. @default \"Search\" */\n  searchPlaceholder?: string;\n  /** Shown in the list while the search matches nothing. @default \"No options found\" */\n  emptyLabel?: string;\n  /**\n   * Makes the list creatable, and searchable. While the typed text (trimmed)\n   * matches no option's text or id nor a picked value, ignoring case, the list ends\n   * with a \"Create “text”\" row. Picking it calls `onCreate` with the text, adds\n   * the text itself as a picked key (through `onChange`, as any pick) and clears\n   * the search. Render a `SelectItem` whose `id` is that text so it lists like\n   * the others; until then its chip shows the text.\n   */\n  onCreate?: (value: string) => void;\n  /** The create row's text for the typed value. @default (value) => `Create “${value}”` */\n  createLabel?: (value: string) => string;\n}\n\n/** The key of the create row. Never reaches `onChange`. */\nconst CREATE_KEY = \"__multi-select-create__\";\n\nconst defaultCreateLabel = (value: string) => `Create \\u201c${value}\\u201d`;\n\ntype SelectState = NonNullable<ContextType<typeof SelectStateContext>>;\n\n/** Whether `text` already names an option (by its text or its key) or a pick, ignoring case. */\nfunction isTaken(state: SelectState | null, text: string) {\n  const want = text.toLocaleLowerCase();\n  const keys = (state?.value as Key[] | undefined) ?? [];\n  if (keys.some((key) => String(key).toLocaleLowerCase() === want)) return true;\n  if (!state) return false;\n  for (const key of state.collection.getKeys()) {\n    const node = state.collection.getItem(key);\n    if (\n      node?.type === \"item\" &&\n      node.key !== CREATE_KEY &&\n      // The key too: creating text equal to an unpicked option's id would pick\n      // that option AND tell the owner to create a duplicate.\n      (node.textValue.toLocaleLowerCase() === want || String(node.key).toLocaleLowerCase() === want)\n    ) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * The list with a search field over it (React Aria's Autocomplete): the field\n * keeps focus and drives the options with the arrow keys, Enter picks.\n */\nfunction SearchList({\n  query,\n  onQueryChange,\n  creatable,\n  searchLabel,\n  searchPlaceholder,\n  emptyLabel,\n  children,\n}: {\n  query: string;\n  onQueryChange: (query: string) => void;\n  creatable: boolean;\n  searchLabel: string;\n  searchPlaceholder: string;\n  emptyLabel: string;\n  children: ReactNode;\n}) {\n  const state = useContext(SelectStateContext);\n  const { contains } = useFilter({ sensitivity: \"base\" });\n  const text = query.trim();\n  const offerCreate = creatable && text !== \"\" && !isTaken(state, text);\n  return (\n    <AriaAutocomplete\n      inputValue={query}\n      onInputChange={onQueryChange}\n      filter={(textValue, input, node) =>\n        node.key === CREATE_KEY ? offerCreate : contains(textValue, input)\n      }\n    >\n      <AriaSearchField\n        aria-label={searchLabel}\n        autoFocus\n        data-slot=\"multi-select-search\"\n        className={multiSelectSearchClass}\n      >\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          className=\"size-4 flex-none text-muted-foreground\"\n        >\n          <circle cx=\"7\" cy=\"7\" r=\"4.5\" />\n          <path d=\"m10.5 10.5 3 3\" />\n        </svg>\n        <AriaInput\n          placeholder={searchPlaceholder}\n          data-slot=\"multi-select-search-input\"\n          className=\"min-w-0 flex-1 appearance-none border-0 bg-transparent p-0 font-sans text-sm text-foreground outline-none placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden\"\n        />\n      </AriaSearchField>\n      <AriaListBox\n        data-slot=\"multi-select-list\"\n        renderEmptyState={() => (\n          <p\n            data-slot=\"multi-select-empty\"\n            className=\"m-0 px-2 py-1.5 text-sm text-muted-foreground\"\n          >\n            {emptyLabel}\n          </p>\n        )}\n        className=\"min-h-0 flex-1 overflow-y-auto outline-none\"\n      >\n        {children}\n      </AriaListBox>\n    </AriaAutocomplete>\n  );\n}\n\n/** The search row: a quiet field over the list, underlined while focused. */\nconst multiSelectSearchClass =\n  \"relative mb-1 flex h-(--density-control-h-sm) flex-none items-center gap-2 border-b-(length:--border-width) border-border px-2 after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-(--focus-ring-width) after:bg-transparent has-[input:focus]:after:bg-(--color-control-edge)\";\n\n/** The row that creates the typed value. Kept in the collection; the filter shows it. */\nfunction CreateItem({ label }: { label: string }) {\n  return (\n    <AriaListBoxItem\n      id={CREATE_KEY}\n      textValue={label}\n      data-slot=\"multi-select-create\"\n      className={cnAll(selectItemVariants(), \"text-text-secondary data-[focused]:text-foreground\")}\n    >\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        className=\"size-3.5 flex-none\"\n      >\n        <path d=\"M8 3.5v9M3.5 8h9\" />\n      </svg>\n      {label}\n    </AriaListBoxItem>\n  );\n}\n\n/** The picked options as chips, then \"+N\", reading Select's own state. */\nfunction Chips({\n  placeholder,\n  maxVisible,\n  moreLabel,\n  moreRef,\n}: {\n  placeholder: string;\n  maxVisible: number;\n  moreLabel: string | undefined;\n  moreRef: RefObject<HTMLSpanElement | null>;\n}) {\n  const state = useContext(SelectStateContext);\n  const keys = (state?.value as Key[] | undefined) ?? [];\n  const labelOf = (key: Key) => state?.collection.getItem(key)?.textValue ?? String(key);\n  const shown = keys.slice(0, maxVisible);\n  const rest = keys.length - shown.length;\n  const row = useRef<HTMLSpanElement>(null);\n  // The chips beside a new or removed one glide to their new place.\n  useFlip(row, keys.join(\"|\"), \"var(--duration-smooth)\", \"var(--ease-smooth)\");\n  // Chips there at first paint never animate; later ones grow in.\n  const [initial] = useState(() => new Set(keys));\n  const [count, setCount] = useState({ rest, dir: 1 });\n  if (count.rest !== rest) setCount({ rest, dir: rest > count.rest ? 1 : -1 });\n  return (\n    <span\n      ref={row}\n      aria-hidden=\"true\"\n      className=\"relative flex min-h-6.5 min-w-0 flex-1 items-center gap-1.5 overflow-hidden\"\n    >\n      {keys.length === 0 ? (\n        <span\n          data-slot=\"multi-select-placeholder\"\n          className=\"truncate text-muted-foreground motion-safe:animate-fade-in\"\n        >\n          {placeholder}\n        </span>\n      ) : null}\n      {shown.map((key) => (\n        <span\n          key={String(key)}\n          data-flip=\"\"\n          data-slot=\"multi-select-chip\"\n          className={cnAll(\n            \"multi-select-chip\",\n            !initial.has(key) && \"motion-safe:animate-chip-reveal\",\n          )}\n        >\n          {labelOf(key)}\n        </span>\n      ))}\n      {rest > 0 ? (\n        <span\n          ref={moreRef}\n          data-flip=\"\"\n          data-slot=\"multi-select-more\"\n          className=\"multi-select-chip text-text-secondary tabular-nums\"\n        >\n          +\n          <SwapText swapKey={String(rest)} dir={count.dir} motion=\"rise\">\n            {rest}\n          </SwapText>\n          {/* The chip is a flex box, which drops a leading space in a bare text\n              node; whitespace-pre keeps \"+2 more\" from reading \"+2more\". */}\n          {moreLabel ? (\n            <span data-slot=\"multi-select-more-label\" className=\"whitespace-pre\">\n              {` ${moreLabel}`}\n            </span>\n          ) : null}\n        </span>\n      ) : null}\n    </span>\n  );\n}\n\n/** The labels of the picks folded into \"+N\", in the order they were picked. */\nfunction useHiddenLabels(maxVisible: number) {\n  const state = useContext(SelectStateContext);\n  const keys = (state?.value as Key[] | undefined) ?? [];\n  return keys\n    .slice(maxVisible)\n    .map((key) => state?.collection.getItem(key)?.textValue ?? String(key));\n}\n\n/**\n * Wraps the trigger in a tooltip naming the picks hidden behind \"+N\", placed\n * against the +N chip rather than the whole field. Always rendered, so turning\n * `overflowTooltip` on or off never swaps the trigger element (and drops its\n * focus); disabled while off or while nothing is hidden, so it never opens empty.\n */\nfunction OverflowTooltip({\n  enabled,\n  maxVisible,\n  anchorRef,\n  children,\n}: {\n  enabled: boolean;\n  maxVisible: number;\n  anchorRef: RefObject<HTMLSpanElement | null>;\n  children: ReactNode;\n}) {\n  const hidden = useHiddenLabels(maxVisible);\n  return (\n    <TooltipTrigger isDisabled={!enabled || hidden.length === 0}>\n      {children}\n      <Tooltip triggerRef={anchorRef} data-slot=\"multi-select-overflow-tooltip\">\n        {hidden.join(\", \")}\n      </Tooltip>\n    </TooltipTrigger>\n  );\n}\n\n/** Clears every pick. It sits outside the trigger, so it is its own tab stop. */\nfunction Clear({ label, disabled }: { label: string; disabled: boolean }) {\n  const state = useContext(SelectStateContext);\n  const keys = (state?.value as Key[] | undefined) ?? [];\n  if (!state || keys.length === 0 || disabled) return null;\n  // Select hands its trigger props to every Button inside it; clear that, or this\n  // button would become a second trigger named by the label.\n  return (\n    <ButtonContext.Provider value={null}>\n      <AriaButton\n        aria-label={label}\n        data-slot=\"multi-select-clear\"\n        onPress={() => {\n          state.setValue([]);\n          state.close();\n        }}\n        className=\"multi-select-clear motion-safe:animate-field-clear-in motion-reduce:animate-fade-in\"\n      >\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          className=\"size-3.5\"\n        >\n          <path d=\"m4 4 8 8M12 4l-8 8\" />\n        </svg>\n      </AriaButton>\n    </ButtonContext.Provider>\n  );\n}\n\nexport const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(function MultiSelect(\n  {\n    children,\n    label,\n    labelHidden,\n    placeholder = \"Select options\",\n    errorMessage,\n    maxVisible = 2,\n    moreLabel,\n    overflowTooltip = false,\n    clearLabel = \"Clear selections\",\n    size = \"md\",\n    className,\n    searchable = false,\n    searchLabel = \"Search options\",\n    searchPlaceholder = \"Search\",\n    emptyLabel = \"No options found\",\n    onCreate,\n    createLabel = defaultCreateLabel,\n    ...props\n  },\n  ref,\n) {\n  const moreRef = useRef<HTMLSpanElement>(null);\n  const creatable = onCreate != null;\n  const withSearch = searchable || creatable;\n  const [query, setQuery] = useState(\"\");\n  // Creating adds a key no option has yet, so the value is held here: the create\n  // row's own key is swapped for the typed text before anyone sees it.\n  const [ownValue, setOwnValue] = useState<readonly Key[]>(() => props.defaultValue ?? []);\n  const value = props.value ?? ownValue;\n  const creatableProps: Partial<AriaSelectProps<object, \"multiple\">> = creatable\n    ? {\n        value,\n        defaultValue: undefined,\n        onChange: (keys) => {\n          let next = keys;\n          if (keys.includes(CREATE_KEY)) {\n            const text = query.trim();\n            next = keys.filter((key) => key !== CREATE_KEY);\n            if (text !== \"\" && !next.includes(text)) next.push(text);\n            setQuery(\"\");\n            onCreate(text);\n          }\n          setOwnValue(next);\n          props.onChange?.(next);\n        },\n      }\n    : {};\n  const trigger = (\n    <AriaButton\n      ref={ref}\n      data-slot=\"multi-select-trigger\"\n      className={cnAll(selectTriggerVariants({ size }), \"pe-16 multi-select-trigger\")}\n    >\n      <AriaSelectValue data-slot=\"multi-select-value\" className=\"sr-only\">\n        {({ isPlaceholder, selectedText }) => (isPlaceholder ? placeholder : selectedText)}\n      </AriaSelectValue>\n      <Chips\n        placeholder={placeholder}\n        maxVisible={maxVisible}\n        moreLabel={moreLabel}\n        moreRef={moreRef}\n      />\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=\"absolute end-(--density-control-pad-md) 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    </AriaButton>\n  );\n  return (\n    <AriaSelect<object, \"multiple\">\n      {...props}\n      {...creatableProps}\n      onOpenChange={(isOpen) => {\n        // Each opening starts from the whole list.\n        if (!isOpen) setQuery(\"\");\n        props.onOpenChange?.(isOpen);\n      }}\n      selectionMode=\"multiple\"\n      data-slot=\"multi-select\"\n      className={cn(selectVariants(), className)}\n    >\n      <AriaLabel\n        data-slot=\"multi-select-label\"\n        className={cnAll(labelVariants(), labelHidden && \"sr-only\")}\n      >\n        {label}\n      </AriaLabel>\n      <div className=\"relative\">\n        <OverflowTooltip enabled={overflowTooltip} maxVisible={maxVisible} anchorRef={moreRef}>\n          {trigger}\n        </OverflowTooltip>\n        <Clear label={clearLabel} disabled={props.isDisabled ?? false} />\n      </div>\n      {errorMessage == null ? null : (\n        <AriaFieldError\n          data-slot=\"multi-select-error\"\n          className=\"text-sm leading-(--leading-normal) text-destructive-strong\"\n        >\n          {errorMessage}\n        </AriaFieldError>\n      )}\n      <AriaPopover\n        data-slot=\"multi-select-popover\"\n        className={\n          withSearch\n            ? cnAll(selectPopoverVariants({ reveal: \"fade\" }), \"flex flex-col overflow-y-hidden\")\n            : selectPopoverVariants()\n        }\n      >\n        {withSearch ? (\n          <SearchList\n            query={query}\n            onQueryChange={setQuery}\n            creatable={creatable}\n            searchLabel={searchLabel}\n            searchPlaceholder={searchPlaceholder}\n            emptyLabel={emptyLabel}\n          >\n            {children}\n            {creatable ? <CreateItem label={createLabel(query.trim())} /> : null}\n          </SearchList>\n        ) : (\n          <AriaListBox data-slot=\"multi-select-list\" className=\"outline-none\">\n            {children}\n          </AriaListBox>\n        )}\n      </AriaPopover>\n    </AriaSelect>\n  );\n});\n\nexport const multiSelectGroupVariants = cva([\"flex flex-col not-first:mt-1\"]);\n\nexport const multiSelectGroupHeaderVariants = cva([\n  \"px-2 pt-1.5 pb-1 text-xs leading-(--leading-normal) font-semibold text-muted-foreground\",\n]);\n\n/**\n * A run of options under a heading, such as \"Countries\" and \"Regions\". React\n * Aria's ListBoxSection, so the heading names the group for assistive tech and\n * the arrow keys move straight through from one group to the next.\n *\n * @example\n * <MultiSelect label=\"Markets\">\n *   <MultiSelectGroup title=\"Countries\">\n *     <SelectItem id=\"IN\">India</SelectItem>\n *   </MultiSelectGroup>\n *   <MultiSelectGroup title=\"Regions\">\n *     <SelectItem id=\"europe\">Europe</SelectItem>\n *   </MultiSelectGroup>\n * </MultiSelect>\n */\nexport interface MultiSelectGroupProps {\n  /** The heading drawn above the group, and the group's accessible name. */\n  title: ReactNode;\n  /** `SelectItem` children. */\n  children?: ReactNode;\n  /** Identifies the group in the collection. Defaults to a generated id. */\n  id?: Key;\n  /** Extra classes for the group. Merged last. */\n  className?: string;\n}\n\nexport const MultiSelectGroup = forwardRef<HTMLElement, MultiSelectGroupProps>(\n  function MultiSelectGroup({ title, children, id, className }, ref) {\n    return (\n      <AriaListBoxSection\n        ref={ref}\n        id={id}\n        data-slot=\"multi-select-group\"\n        className={cn(multiSelectGroupVariants(), className)}\n      >\n        <AriaHeader\n          data-slot=\"multi-select-group-header\"\n          className={multiSelectGroupHeaderVariants()}\n        >\n          {title}\n        </AriaHeader>\n        {children}\n      </AriaListBoxSection>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/progress/index.d.ts

@@ -1,2 +1,2 @@
-import { Progress, ProgressProps, progressFillVariants, progressTrackVariants, progressVariants } from "./progress.js";
-export { Progress, type ProgressProps, progressFillVariants, progressTrackVariants, progressVariants };
+import { Progress, ProgressProps, progressFillVariants, progressTargetVariants, progressTrackVariants, progressVariants } from "./progress.js";
+export { Progress, type ProgressProps, progressFillVariants, progressTargetVariants, progressTrackVariants, progressVariants };

package/dist/progress/index.js

@@ -1,2 +1,2 @@
-import { Progress, progressFillVariants, progressTrackVariants, progressVariants } from "./progress.js";
-export { Progress, progressFillVariants, progressTrackVariants, progressVariants };
+import { Progress, progressFillVariants, progressTargetVariants, progressTrackVariants, progressVariants } from "./progress.js";
+export { Progress, progressFillVariants, progressTargetVariants, progressTrackVariants, progressVariants };

package/dist/progress/progress.d.ts

@@ -31,13 +31,35 @@ import { ProgressBarProps } from "react-aria-components";
  * the track against the page at 5.25:1.
  *
  * Both are in the build-failing contrast contract.
+ *
+ * A TARGET MARKER is opt-in (`target`): a short upright tick that stands
+ * proud of the track at the value the bar should have reached -- "where the
+ * goal should be by now". The tick is decorative; its meaning is read to
+ * assistive technology as the bar's description (`targetLabel` plus the
+ * formatted value), and `showTargetLabel` also prints it under the tick.
+ *
+ * `surface="inverse"` is for a bar on the inverted (foreground-coloured)
+ * surface, such as a dark summary strip: the track is the inverse text colour
+ * mixed into the surface, the default fill and the copy take the inverse text
+ * colour, so the bar keeps its contrast where the default greys would vanish.
  */
 export declare const progressVariants: (props?: ({
   headerEmpty?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare const progressTrackVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const progressTrackVariants: (props?: ({
+  surface?: "inverse" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * The target tick: 2px wide, standing 4px proud of the track on both sides,
+ * with a 1px halo of the surface colour so it reads over the fill as well as
+ * over the track. Placed by an inline `inset-inline-start`, so it mirrors in
+ * right-to-left text.
+ */
+export declare const progressTargetVariants: (props?: ({
+  surface?: "inverse" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const progressFillVariants: (props?: ({
-  tone?: "success" | "warning" | "danger" | "neutral" | "info" | null | undefined;
+  tone?: "neutral" | "warning" | "success" | "info" | "danger" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * A determinate or indeterminate progress bar.
@@ -84,6 +106,35 @@ export interface ProgressProps extends Omit<ProgressBarProps, "className" | "sty
    * @default true
    */
   showCompletion?: boolean;
+  /**
+   * Where the bar should be by now, on the same scale as `value`
+   * (`minValue`..`maxValue`, clamped). Draws an upright tick across the track
+   * at that point. The tick is decorative; `targetLabel` and the formatted
+   * target are read as the bar's description. Leave it out (the default) for
+   * no marker and the bar exactly as before. Ignored while indeterminate.
+   */
+  target?: number;
+  /**
+   * What the target means, such as "Expected by now". Read with the formatted
+   * target ("Expected by now: 40%") as the bar's description, and printed
+   * under the tick with `showTargetLabel`.
+   * @default "Target"
+   */
+  targetLabel?: string;
+  /**
+   * Print `targetLabel` and the target under the tick. It follows the tick and
+   * stays inside the bar near either end.
+   * @default false
+   */
+  showTargetLabel?: boolean;
+  /**
+   * The surface the bar sits on. `inverse` is the inverted, foreground-coloured
+   * surface (a dark strip in the light theme, a light one in the dark theme):
+   * the track, the default-toned fill, the target tick and the copy take
+   * colours that hold their contrast there. Explicit tones keep their colours.
+   * @default "default"
+   */
+  surface?: "default" | "inverse";
   /** Extra classes for the track. */
   trackClassName?: string;
   /** Extra classes for the fill -- a per-call-site colour the tone axis cannot express. */

package/dist/progress/progress.js

@@ -3,8 +3,8 @@ import { cn, cnAll } from "../lib/cn.js";
 import { useAfter, useCountTo } from "../lib/count-to.js";
 import { SwapText } from "../lib/swap-text.js";
 import { cva } from "class-variance-authority";
-import { forwardRef } from "react";
-import { Label, ProgressBar } from "react-aria-components";
+import { forwardRef, useId, useMemo } from "react";
+import { Label, ProgressBar, useLocale } from "react-aria-components";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/progress/progress.tsx
 /**
@@ -36,6 +36,17 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 * the track against the page at 5.25:1.
 *
 * Both are in the build-failing contrast contract.
+*
+* A TARGET MARKER is opt-in (`target`): a short upright tick that stands
+* proud of the track at the value the bar should have reached -- "where the
+* goal should be by now". The tick is decorative; its meaning is read to
+* assistive technology as the bar's description (`targetLabel` plus the
+* formatted value), and `showTargetLabel` also prints it under the tick.
+*
+* `surface="inverse"` is for a bar on the inverted (foreground-coloured)
+* surface, such as a dark summary strip: the track is the inverse text colour
+* mixed into the surface, the default fill and the copy take the inverse text
+* colour, so the bar keeps its contrast where the default greys would vanish.
 */
 const progressVariants = cva(["flex w-full flex-col box-border font-sans"], {
 	variants: { headerEmpty: {
@@ -44,7 +55,28 @@ const progressVariants = cva(["flex w-full flex-col box-border font-sans"], {
 	} },
 	defaultVariants: { headerEmpty: false }
 });
-const progressTrackVariants = cva(["relative h-2 w-full overflow-hidden rounded-pill box-border", "bg-muted border-(length:--border-width) border-border"]);
+const progressTrackVariants = cva(["relative h-2 w-full overflow-hidden rounded-pill box-border", "border-(length:--border-width)"], {
+	variants: { 
+	/** The surface the bar sits on. */
+surface: {
+		default: "bg-muted border-border",
+		inverse: "bg-[color-mix(in_oklab,var(--color-text-inverse)_28%,var(--color-foreground))] border-transparent"
+	} },
+	defaultVariants: { surface: "default" }
+});
+/**
+* The target tick: 2px wide, standing 4px proud of the track on both sides,
+* with a 1px halo of the surface colour so it reads over the fill as well as
+* over the track. Placed by an inline `inset-inline-start`, so it mirrors in
+* right-to-left text.
+*/
+const progressTargetVariants = cva("pointer-events-none absolute -top-1 -bottom-1 w-0.5 -ms-px rounded-pill", {
+	variants: { surface: {
+		default: "bg-foreground shadow-[0_0_0_1px_var(--color-surface)]",
+		inverse: "bg-text-inverse shadow-[0_0_0_1px_var(--color-foreground)]"
+	} },
+	defaultVariants: { surface: "default" }
+});
 const progressFillVariants = cva(["h-full rounded-pill", "progress-fill"], {
 	variants: { tone: {
 		neutral: "bg-primary-strong",
@@ -86,47 +118,125 @@ function ProgressValue({ percentage, valueText, showCompletion }) {
 		})
 	}) : null] });
 }
-const Progress = forwardRef(function Progress({ label, labelHidden, showValue, showCompletion = true, tone, trackClassName, fillClassName, className, ...props }, ref) {
+/** The track's frame and the tick. With no marker it renders the track alone, as before. */
+function TargetFrame({ marker, surface, children }) {
+	if (!marker) return /* @__PURE__ */ jsx(Fragment$1, { children });
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "progress-target-frame",
+		className: "relative",
+		children: [children, /* @__PURE__ */ jsx("span", {
+			"data-slot": "progress-target",
+			"aria-hidden": "true",
+			className: progressTargetVariants({ surface }),
+			style: { insetInlineStart: `${marker.share * 100}%` }
+		})]
+	});
+}
+/**
+* The target's meaning, the bar's description. Printed, it hangs from a
+* zero-width anchor at the tick: centred on it, or running inward near either
+* end, in either text direction. Otherwise it is for screen readers only.
+*/
+function TargetText({ id, marker, shown, inverse }) {
+	if (!shown) return /* @__PURE__ */ jsx("span", {
+		id,
+		className: "sr-only",
+		children: marker.text
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "progress-target-label",
+		"aria-hidden": "true",
+		className: "relative h-[1lh] text-xs leading-(--leading-normal)",
+		children: /* @__PURE__ */ jsx("span", {
+			className: cnAll("absolute top-0 flex w-0 whitespace-nowrap", marker.share < .2 ? "justify-start" : marker.share > .8 ? "justify-end" : "justify-center", inverse ? "text-text-inverse" : "text-muted-foreground"),
+			style: { insetInlineStart: `${marker.share * 100}%` },
+			children: /* @__PURE__ */ jsx("span", {
+				id,
+				children: marker.text
+			})
+		})
+	});
+}
+const Progress = forwardRef(function Progress({ label, labelHidden, showValue, showCompletion = true, tone, target, targetLabel = "Target", showTargetLabel = false, surface = "default", trackClassName, fillClassName, className, ...props }, ref) {
+	const { locale } = useLocale();
+	const targetId = useId();
+	const { minValue = 0, maxValue = 100, formatOptions, isIndeterminate: indeterminate } = props;
+	const marker = useMemo(() => {
+		if (target === void 0 || !Number.isFinite(target) || indeterminate) return null;
+		const span = maxValue - minValue;
+		const share = span > 0 ? Math.min(1, Math.max(0, (target - minValue) / span)) : 0;
+		const options = formatOptions ?? { style: "percent" };
+		const shown = options.style === "percent" ? share : Math.min(maxValue, Math.max(minValue, target));
+		return {
+			share,
+			text: `${targetLabel}: ${new Intl.NumberFormat(locale, options).format(shown)}`
+		};
+	}, [
+		target,
+		indeterminate,
+		minValue,
+		maxValue,
+		formatOptions,
+		locale,
+		targetLabel
+	]);
+	const inverse = surface === "inverse";
+	const describedBy = marker ? [props["aria-describedby"], targetId].filter(Boolean).join(" ") : props["aria-describedby"];
 	return /* @__PURE__ */ jsx(ProgressBar, {
 		ref,
 		...props,
+		"aria-describedby": describedBy,
 		"data-slot": "progress",
+		"data-surface": inverse ? "inverse" : void 0,
 		className: cn(progressVariants({ headerEmpty: Boolean(labelHidden && !showValue) }), className),
-		children: ({ percentage, isIndeterminate, valueText }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
-			"data-slot": "progress-header",
-			className: cnAll(showValue && "flex items-baseline justify-between gap-2"),
-			children: [/* @__PURE__ */ jsx(Label, {
-				"data-slot": "progress-label",
-				className: cnAll("text-sm leading-(--leading-normal) text-foreground", labelHidden && "sr-only"),
-				children: typeof label === "string" ? /* @__PURE__ */ jsx(SwapText, {
-					swapKey: label,
-					className: "block",
-					children: label
-				}) : label
-			}), showValue ? /* @__PURE__ */ jsx("span", {
-				"data-slot": "progress-value",
-				"aria-hidden": "true",
-				className: "text-sm leading-(--leading-normal) text-muted-foreground tabular-nums",
-				children: /* @__PURE__ */ jsx(ProgressValue, {
-					percentage: percentage ?? 0,
-					valueText,
-					showCompletion
+		children: ({ percentage, isIndeterminate, valueText }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "progress-header",
+				className: cnAll(showValue && "flex items-baseline justify-between gap-2"),
+				children: [/* @__PURE__ */ jsx(Label, {
+					"data-slot": "progress-label",
+					className: cnAll("text-sm leading-(--leading-normal)", inverse ? "text-text-inverse" : "text-foreground", labelHidden && "sr-only"),
+					children: typeof label === "string" ? /* @__PURE__ */ jsx(SwapText, {
+						swapKey: label,
+						className: "block",
+						children: label
+					}) : label
+				}), showValue ? /* @__PURE__ */ jsx("span", {
+					"data-slot": "progress-value",
+					"aria-hidden": "true",
+					className: cnAll("text-sm leading-(--leading-normal) tabular-nums", inverse ? "text-text-inverse" : "text-muted-foreground"),
+					children: /* @__PURE__ */ jsx(ProgressValue, {
+						percentage: percentage ?? 0,
+						valueText,
+						showCompletion
+					})
+				}) : null]
+			}),
+			/* @__PURE__ */ jsx(TargetFrame, {
+				marker,
+				surface,
+				children: /* @__PURE__ */ jsx("div", {
+					"data-slot": "progress-track",
+					className: cn(progressTrackVariants({ surface }), trackClassName),
+					children: /* @__PURE__ */ jsx("div", {
+						"data-slot": "progress-fill",
+						"data-indeterminate": isIndeterminate || void 0,
+						"data-complete": showCompletion && (!tone || tone === "neutral") && !isIndeterminate && (percentage ?? 0) >= 100 ? "" : void 0,
+						className: cn([progressFillVariants({ tone }), inverse && (!tone || tone === "neutral") && "bg-text-inverse"], fillClassName),
+						style: isIndeterminate ? void 0 : { width: `${percentage ?? 0}%` }
+					})
 				})
-			}) : null]
-		}), /* @__PURE__ */ jsx("div", {
-			"data-slot": "progress-track",
-			className: cn(progressTrackVariants(), trackClassName),
-			children: /* @__PURE__ */ jsx("div", {
-				"data-slot": "progress-fill",
-				"data-indeterminate": isIndeterminate || void 0,
-				"data-complete": showCompletion && (!tone || tone === "neutral") && !isIndeterminate && (percentage ?? 0) >= 100 ? "" : void 0,
-				className: cn(progressFillVariants({ tone }), fillClassName),
-				style: isIndeterminate ? void 0 : { width: `${percentage ?? 0}%` }
-			})
-		})] })
+			}),
+			marker ? /* @__PURE__ */ jsx(TargetText, {
+				id: targetId,
+				marker,
+				shown: showTargetLabel,
+				inverse
+			}) : null
+		] })
 	});
 });
 //#endregion
-export { Progress, progressFillVariants, progressTrackVariants, progressVariants };
+export { Progress, progressFillVariants, progressTargetVariants, progressTrackVariants, progressVariants };
 
 //# sourceMappingURL=progress.js.map