@seekalfred/primitives 0.6.0 → 0.7.3

package/dist/number-field/number-field.js

@@ -0,0 +1,199 @@
+"use client";
+import { cn, cnAll } from "../lib/cn.js";
+import { fieldSurfaceVariants } from "../lib/field-surface.js";
+import { Label as Label$1 } from "../label/label.js";
+import { FieldMessage, RollingNumber } from "../lib/field-message.js";
+import { cva } from "class-variance-authority";
+import { forwardRef, useContext, useId, useRef, useState } from "react";
+import { Button, Group, Input, NumberField, NumberFieldStateContext } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/number-field/number-field.tsx
+const controlVariants = cva([
+	fieldSurfaceVariants(),
+	"flex items-center gap-0.5 p-0.75",
+	"data-[focus-within]:not-data-[invalid]:border-foreground",
+	"forced-colors:data-[focus-within]:outline-solid forced-colors:data-[focus-within]:outline-(length:--focus-ring-width) forced-colors:data-[focus-within]:outline-offset-(--focus-ring-offset)"
+], {
+	variants: { size: {
+		sm: "h-(--density-control-h-sm)",
+		md: "h-(--density-control-h-md)",
+		lg: "h-(--density-control-h-lg)"
+	} },
+	defaultVariants: { size: "md" }
+});
+const stepVariants = cva([
+	"grid shrink-0 place-items-center rounded-md border-0 bg-transparent p-0",
+	"cursor-pointer text-text-secondary outline-none",
+	"motion-safe:transition-[background-color,color,scale] motion-safe:duration-(--duration-quick) motion-safe:ease-settle",
+	"data-[hovered]:bg-muted data-[hovered]:text-foreground",
+	"data-[pressed]:bg-muted data-[pressed]:text-foreground data-[pressed]:scale-95",
+	"motion-safe:data-[pressed]:duration-(--duration-instant)",
+	"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)",
+	"[&_svg]:pointer-events-none [&_svg]:size-4"
+], {
+	variants: { size: {
+		sm: "size-7",
+		md: "size-9",
+		lg: "size-12"
+	} },
+	defaultVariants: { size: "md" }
+});
+/** How far, in px, the digits are pushed toward a limit they just met. */
+const STRAIN_PX = 5;
+const decimalsOf = (value) => (String(value).split(".")[1] ?? "").length;
+function Control({ size, placeholder, largeStep, step, min, max, inputRef }) {
+	const state = useContext(NumberFieldStateContext);
+	const displayRef = useRef(null);
+	const [typing, setTyping] = useState(false);
+	const value = state?.numberValue ?? NaN;
+	const [trail, setTrail] = useState({
+		value,
+		direction: 1
+	});
+	if (!Object.is(trail.value, value)) setTrail({
+		value,
+		direction: !Number.isNaN(value) && !Number.isNaN(trail.value) && value < trail.value ? -1 : 1
+	});
+	const text = (state?.inputValue ?? "").replace(/ /g, "\xA0");
+	function strain(y) {
+		const node = displayRef.current;
+		if (!node) return;
+		node.style.setProperty("--strain-y", `${y}px`);
+		node.removeAttribute("data-strain");
+		node.offsetWidth;
+		node.setAttribute("data-strain", "");
+	}
+	/** PageUp, PageDown and Shift with an arrow take a large step. Runs in the capture phase, so React Aria's own single step does not also run. */
+	function onKeyDownCapture(event) {
+		if (!state) return;
+		const page = event.key === "PageUp" || event.key === "PageDown";
+		const arrow = event.shiftKey && (event.key === "ArrowUp" || event.key === "ArrowDown");
+		if (!page && !arrow) return;
+		event.preventDefault();
+		event.stopPropagation();
+		setTyping(false);
+		const toward = event.key.endsWith("Up") ? 1 : -1;
+		if (toward > 0 ? !state.canIncrement : !state.canDecrement) {
+			strain(-toward * STRAIN_PX);
+			return;
+		}
+		const next = (Number.isNaN(state.numberValue) ? min ?? 0 : state.numberValue) + toward * (largeStep ?? step * 10);
+		const places = Math.max(decimalsOf(step), decimalsOf(largeStep ?? step));
+		state.setNumberValue(Number(Math.min(max ?? Infinity, Math.max(min ?? -Infinity, next)).toFixed(places)));
+	}
+	function onKeyDown(event) {
+		const up = event.key === "ArrowUp";
+		const down = event.key === "ArrowDown";
+		if (up || down || event.key === "Home" || event.key === "End") setTyping(false);
+		if (!state) return;
+		if ((up || event.key === "End") && !state.canIncrement) strain(-5);
+		if ((down || event.key === "Home") && !state.canDecrement) strain(STRAIN_PX);
+	}
+	return /* @__PURE__ */ jsxs(Group, {
+		role: "presentation",
+		"data-slot": "number-field-control",
+		className: controlVariants({ size }),
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				slot: "decrement",
+				"data-slot": "number-field-decrement",
+				onPressStart: () => setTyping(false),
+				className: stepVariants({ size }),
+				children: /* @__PURE__ */ jsx("svg", {
+					"aria-hidden": "true",
+					viewBox: "0 0 16 16",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "1.75",
+					strokeLinecap: "round",
+					children: /* @__PURE__ */ jsx("path", { d: "M3.5 8h9" })
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative grid min-w-0 flex-1 cursor-text place-items-center self-stretch",
+				children: [/* @__PURE__ */ jsx("span", {
+					ref: displayRef,
+					"aria-hidden": "true",
+					"data-slot": "number-field-display",
+					className: "pointer-events-none inline-flex items-center whitespace-nowrap font-sans text-base font-medium tabular-nums text-foreground data-[strain]:motion-safe:animate-field-strain",
+					children: text ? /* @__PURE__ */ jsx(RollingNumber, {
+						word: text,
+						direction: trail.direction,
+						still: typing
+					}) : /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: placeholder
+					})
+				}), /* @__PURE__ */ jsx(Input, {
+					ref: inputRef,
+					"data-slot": "number-field-input",
+					onChange: () => setTyping(true),
+					onBlur: () => setTyping(false),
+					onKeyDownCapture,
+					onKeyDown,
+					className: "absolute inset-0 z-10 m-0 h-full w-full min-w-0 border-0 bg-transparent p-0 text-center font-sans text-base font-medium tabular-nums text-transparent caret-foreground outline-none selection:bg-primary/20 selection:text-transparent data-[disabled]:cursor-not-allowed"
+				})]
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				slot: "increment",
+				"data-slot": "number-field-increment",
+				onPressStart: () => setTyping(false),
+				className: stepVariants({ size }),
+				children: /* @__PURE__ */ jsx("svg", {
+					"aria-hidden": "true",
+					viewBox: "0 0 16 16",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "1.75",
+					strokeLinecap: "round",
+					children: /* @__PURE__ */ jsx("path", { d: "M3.5 8h9M8 3.5v9" })
+				})
+			})
+		]
+	});
+}
+const NumberField$1 = forwardRef(function NumberField$2({ label, labelHidden, description, error, placeholder, largeStep, size = "md", className, isInvalid, "aria-describedby": describedBy, ...props }, ref) {
+	const id = useId();
+	const hintId = description ? `${id}-description` : void 0;
+	const errorId = error ? `${id}-error` : void 0;
+	return /* @__PURE__ */ jsxs(NumberField, {
+		...props,
+		isInvalid: isInvalid || Boolean(error),
+		"aria-describedby": [
+			describedBy,
+			hintId,
+			errorId
+		].filter(Boolean).join(" ") || void 0,
+		"data-slot": "number-field",
+		className: cn("grid w-full min-w-0 max-w-64 font-sans", className),
+		children: [
+			/* @__PURE__ */ jsx(Label$1, {
+				className: cnAll("mb-1.5", labelHidden && "sr-only"),
+				children: label
+			}),
+			/* @__PURE__ */ jsx(Control, {
+				size,
+				placeholder,
+				largeStep,
+				step: props.step ?? 1,
+				min: props.minValue,
+				max: props.maxValue,
+				inputRef: ref
+			}),
+			/* @__PURE__ */ jsx(FieldMessage, {
+				id: hintId,
+				text: description,
+				tone: "description"
+			}),
+			/* @__PURE__ */ jsx(FieldMessage, {
+				id: errorId,
+				text: error,
+				tone: "error"
+			})
+		]
+	});
+});
+//#endregion
+export { NumberField$1 as NumberField };
+
+//# sourceMappingURL=number-field.js.map

package/dist/number-field/number-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field.js","names":["AriaGroup","AriaButton","AriaInput","NumberField","AriaNumberField","Label"],"sources":["../../src/number-field/number-field.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useContext, useId, useRef, useState, type KeyboardEvent, type Ref } from \"react\";\nimport {\n  Button as AriaButton,\n  Group as AriaGroup,\n  Input as AriaInput,\n  NumberField as AriaNumberField,\n  NumberFieldStateContext,\n  type NumberFieldProps as AriaNumberFieldProps,\n} from \"react-aria-components\";\n\nimport { Label } from \"../label/label.js\";\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { FieldMessage, RollingNumber } from \"../lib/field-message.js\";\nimport { fieldSurfaceVariants } from \"../lib/field-surface.js\";\n\n/**\n * NumberField: a number with stepper buttons and rolling digits, on React Aria's\n * `NumberField`. Parsing and formatting follow the locale, the arrow keys, PageUp,\n * PageDown, Home and End step and jump, a held stepper repeats, and the field\n * clamps to `minValue` and `maxValue` and snaps to `step`. A currency, a percent\n * or a unit comes from `formatOptions`.\n *\n * The digits you see are drawn over the real input: each place value is its own\n * column, so 9 to 10 opens a column and rolls the ones, and a gained or lost digit\n * opens or closes its width. While you type, the columns follow the text at once\n * and the caret never lags; the roll returns with the next step. A press at a limit\n * (an arrow key past the maximum) pushes the digits toward it and they spring home.\n *\n * `description` and `error` open under the field on a spring, as Input's do.\n */\nexport interface NumberFieldProps extends Omit<\n  AriaNumberFieldProps,\n  \"className\" | \"style\" | \"children\"\n> {\n  /** What the number is, and the field's accessible name. */\n  label: string;\n  /** Render the label for screen readers only. */\n  labelHidden?: boolean;\n  /** Helper text under the field. A string, because the copy is animated word by word. */\n  description?: string;\n  /** Error text under the field. Sets `aria-invalid` and is announced as an alert. */\n  error?: string;\n  /** Shown, muted, while the field is empty. */\n  placeholder?: string;\n  /** PageUp, PageDown and Shift with an arrow move this far. React Aria steps by one on PageUp. Defaults to ten steps. */\n  largeStep?: number;\n  /**\n   * Control scale: the same heights as Input and Button.\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** Extra classes for the wrapper. Merged last. */\n  className?: string;\n}\n\nconst controlVariants = cva(\n  [\n    fieldSurfaceVariants(),\n    \"flex items-center gap-0.5 p-0.75\",\n    // Focus turns the box's own border dark whenever the input holds focus; no separate ring.\n    \"data-[focus-within]:not-data-[invalid]:border-foreground\",\n    \"forced-colors:data-[focus-within]:outline-solid forced-colors:data-[focus-within]:outline-(length:--focus-ring-width) forced-colors:data-[focus-within]:outline-offset-(--focus-ring-offset)\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"h-(--density-control-h-sm)\",\n        md: \"h-(--density-control-h-md)\",\n        lg: \"h-(--density-control-h-lg)\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\nconst stepVariants = cva(\n  [\n    \"grid shrink-0 place-items-center rounded-md border-0 bg-transparent p-0\",\n    \"cursor-pointer text-text-secondary outline-none\",\n    \"motion-safe:transition-[background-color,color,scale] motion-safe:duration-(--duration-quick) motion-safe:ease-settle\",\n    \"data-[hovered]:bg-muted data-[hovered]:text-foreground\",\n    \"data-[pressed]:bg-muted data-[pressed]:text-foreground data-[pressed]:scale-95\",\n    \"motion-safe:data-[pressed]:duration-(--duration-instant)\",\n    \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n    \"[&_svg]:pointer-events-none [&_svg]:size-4\",\n  ],\n  {\n    variants: {\n      size: { sm: \"size-7\", md: \"size-9\", lg: \"size-12\" },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\n/** How far, in px, the digits are pushed toward a limit they just met. */\nconst STRAIN_PX = 5;\n\nconst decimalsOf = (value: number) => (String(value).split(\".\")[1] ?? \"\").length;\n\nfunction Control({\n  size,\n  placeholder,\n  largeStep,\n  step,\n  min,\n  max,\n  inputRef,\n}: {\n  size: \"sm\" | \"md\" | \"lg\";\n  placeholder: string | undefined;\n  largeStep: number | undefined;\n  step: number;\n  min: number | undefined;\n  max: number | undefined;\n  inputRef: Ref<HTMLInputElement>;\n}) {\n  const state = useContext(NumberFieldStateContext);\n  const displayRef = useRef<HTMLSpanElement>(null);\n  // While the text is being typed the digits follow it at once; a step brings the roll back.\n  const [typing, setTyping] = useState(false);\n  const value = state?.numberValue ?? Number.NaN;\n  const [trail, setTrail] = useState({ value, direction: 1 as 1 | -1 });\n  // Object.is: an empty field is NaN, which is never equal to itself.\n  if (!Object.is(trail.value, value)) {\n    const known = !Number.isNaN(value) && !Number.isNaN(trail.value);\n    setTrail({ value, direction: known && value < trail.value ? -1 : 1 });\n  }\n  const text = (state?.inputValue ?? \"\").replace(/ /g, \" \");\n\n  function strain(y: number) {\n    const node = displayRef.current;\n    if (!node) return;\n    node.style.setProperty(\"--strain-y\", `${y}px`);\n    // Restart the animation: the attribute has to leave and come back across a style recalculation.\n    node.removeAttribute(\"data-strain\");\n    void node.offsetWidth;\n    node.setAttribute(\"data-strain\", \"\");\n  }\n\n  /** PageUp, PageDown and Shift with an arrow take a large step. Runs in the capture phase, so React Aria's own single step does not also run. */\n  function onKeyDownCapture(event: KeyboardEvent<HTMLInputElement>) {\n    if (!state) return;\n    const page = event.key === \"PageUp\" || event.key === \"PageDown\";\n    const arrow = event.shiftKey && (event.key === \"ArrowUp\" || event.key === \"ArrowDown\");\n    if (!page && !arrow) return;\n    event.preventDefault();\n    event.stopPropagation();\n    setTyping(false);\n    const toward = event.key.endsWith(\"Up\") ? 1 : -1;\n    if (toward > 0 ? !state.canIncrement : !state.canDecrement) {\n      strain(-toward * STRAIN_PX);\n      return;\n    }\n    const from = Number.isNaN(state.numberValue) ? (min ?? 0) : state.numberValue;\n    const next = from + toward * (largeStep ?? step * 10);\n    const places = Math.max(decimalsOf(step), decimalsOf(largeStep ?? step));\n    state.setNumberValue(Number(Math.min(max ?? Infinity, Math.max(min ?? -Infinity, next)).toFixed(places)));\n  }\n\n  function onKeyDown(event: KeyboardEvent<HTMLInputElement>) {\n    const up = event.key === \"ArrowUp\";\n    const down = event.key === \"ArrowDown\";\n    if (up || down || event.key === \"Home\" || event.key === \"End\") setTyping(false);\n    if (!state) return;\n    if ((up || event.key === \"End\") && !state.canIncrement) strain(-STRAIN_PX);\n    if ((down || event.key === \"Home\") && !state.canDecrement) strain(STRAIN_PX);\n  }\n\n  return (\n    <AriaGroup\n      role=\"presentation\"\n      data-slot=\"number-field-control\"\n      className={controlVariants({ size })}\n    >\n      <AriaButton\n        slot=\"decrement\"\n        data-slot=\"number-field-decrement\"\n        onPressStart={() => setTyping(false)}\n        className={stepVariants({ size })}\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        >\n          <path d=\"M3.5 8h9\" />\n        </svg>\n      </AriaButton>\n      <div className=\"relative grid min-w-0 flex-1 cursor-text place-items-center self-stretch\">\n        {/* The digits the eye sees. The input above them draws only the caret and the selection. */}\n        <span\n          ref={displayRef}\n          aria-hidden=\"true\"\n          data-slot=\"number-field-display\"\n          className=\"pointer-events-none inline-flex items-center whitespace-nowrap font-sans text-base font-medium tabular-nums text-foreground data-[strain]:motion-safe:animate-field-strain\"\n        >\n          {text ? (\n            <RollingNumber word={text} direction={trail.direction} still={typing} />\n          ) : (\n            <span className=\"text-muted-foreground\">{placeholder}</span>\n          )}\n        </span>\n        <AriaInput\n          ref={inputRef}\n          data-slot=\"number-field-input\"\n          onChange={() => setTyping(true)}\n          onBlur={() => setTyping(false)}\n          onKeyDownCapture={onKeyDownCapture}\n          onKeyDown={onKeyDown}\n          className=\"absolute inset-0 z-10 m-0 h-full w-full min-w-0 border-0 bg-transparent p-0 text-center font-sans text-base font-medium tabular-nums text-transparent caret-foreground outline-none selection:bg-primary/20 selection:text-transparent data-[disabled]:cursor-not-allowed\"\n        />\n      </div>\n      <AriaButton\n        slot=\"increment\"\n        data-slot=\"number-field-increment\"\n        onPressStart={() => setTyping(false)}\n        className={stepVariants({ size })}\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        >\n          <path d=\"M3.5 8h9M8 3.5v9\" />\n        </svg>\n      </AriaButton>\n    </AriaGroup>\n  );\n}\n\nexport const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(function NumberField(\n  {\n    label,\n    labelHidden,\n    description,\n    error,\n    placeholder,\n    largeStep,\n    size = \"md\",\n    className,\n    isInvalid,\n    \"aria-describedby\": describedBy,\n    ...props\n  },\n  ref,\n) {\n  const id = useId();\n  const hintId = description ? `${id}-description` : undefined;\n  const errorId = error ? `${id}-error` : undefined;\n  return (\n    <AriaNumberField\n      {...props}\n      isInvalid={isInvalid || Boolean(error)}\n      aria-describedby={[describedBy, hintId, errorId].filter(Boolean).join(\" \") || undefined}\n      data-slot=\"number-field\"\n      className={cn(\"grid w-full min-w-0 max-w-64 font-sans\", className)}\n    >\n      <Label className={cnAll(\"mb-1.5\", labelHidden && \"sr-only\")}>{label}</Label>\n      <Control\n        size={size}\n        placeholder={placeholder}\n        largeStep={largeStep}\n        step={props.step ?? 1}\n        min={props.minValue}\n        max={props.maxValue}\n        inputRef={ref}\n      />\n      <FieldMessage id={hintId} text={description} tone=\"description\" />\n      <FieldMessage id={errorId} text={error} tone=\"error\" />\n    </AriaNumberField>\n  );\n});\n"],"mappings":"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"}

package/dist/onboarding-checklist/index.d.ts

@@ -0,0 +1,2 @@
+import { OnboardingChecklist, OnboardingChecklistProps, OnboardingStep } from "./onboarding-checklist.js";
+export { OnboardingChecklist, type OnboardingChecklistProps, type OnboardingStep };

package/dist/onboarding-checklist/index.js

@@ -0,0 +1,2 @@
+import { OnboardingChecklist } from "./onboarding-checklist.js";
+export { OnboardingChecklist };

package/dist/onboarding-checklist/onboarding-checklist.d.ts

@@ -0,0 +1,55 @@
+//#region src/onboarding-checklist/onboarding-checklist.d.ts
+/**
+ * OnboardingChecklist: a getting-started card for a new account or workspace,
+ * for a short, one-time setup of three to eight loosely ordered steps. (Use a
+ * Stepper when the order is strict and steps map to screens.)
+ *
+ * The progress ring and the count follow every check: the ring fills on the
+ * morph spring, the count rolls its digits, and at 100% a tick draws in the
+ * ring while the title morphs to `doneTitle`. A checked step fills its circle
+ * from the centre, draws its tick and strikes its title through; 720ms later it
+ * folds into a "N completed" row that opens again, and the next unfinished step
+ * opens and takes focus if the finished one had it. A step with an `actionLabel`
+ * runs `onAction`: resolving checks the step, throwing an Error keeps it open
+ * and shows the message. The body can be hidden and shown again.
+ *
+ * Rows and panels open and close their height on a spring that never
+ * overshoots, closing a little quicker. Nothing animates on first render, and
+ * reduced motion removes the height animation and keeps short fades.
+ *
+ * Built on plain buttons and the shared swap and rolling-number helpers; the
+ * action is the library's ActionButton, whose arrow becomes a spinner and then
+ * a tick that draws itself. Keyboard: Up and Down walk the step titles,
+ * Home and End jump to the first and last, Enter or Space expands a step,
+ * toggles its checkbox or runs its action.
+ */
+export interface OnboardingStep {
+  id: string;
+  title: string;
+  description?: string;
+  /** Label of the button that does the step. Without it, the step is checked off by hand. */
+  actionLabel?: string;
+  /** Runs the step. Resolve to check it off; throw an Error to keep it open and show the error's message. */
+  onAction?: () => void | Promise<void>;
+}
+export interface OnboardingChecklistProps {
+  /** Card title while steps remain. */
+  title: string;
+  /** Title once every step is done. @default "You’re all set" */
+  doneTitle?: string;
+  /** Steps in order. */
+  steps: OnboardingStep[];
+  /** Step ids that start completed. */
+  defaultCompleted?: string[];
+  /** Called with the completed ids, in step order, whenever they change. */
+  onCompletedChange?: (completed: string[]) => void;
+  /** Starts with the body collapsed. @default false */
+  defaultHidden?: boolean;
+  /** Called when the Hide or Show button is used. */
+  onHiddenChange?: (hidden: boolean) => void;
+  /** Extra classes for the card. Merged last. */
+  className?: string;
+}
+export declare const OnboardingChecklist: import("react").ForwardRefExoticComponent<OnboardingChecklistProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//# sourceMappingURL=onboarding-checklist.d.ts.map