@seekalfred/primitives 0.7.3 → 0.8.0

package/dist/chip-group/chip-group.js

@@ -4,11 +4,26 @@ import { mergeRefs } from "../lib/merge-refs.js";
 import { SwapText } from "../lib/swap-text.js";
 import { useHeightFollow } from "../lib/height-follow.js";
 import { useFlip } from "../lib/flip.js";
-import { forwardRef, useMemo, useRef, useState } from "react";
+import { createElement, forwardRef, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chip-group/chip-group.tsx
 /** Roving-focus key of the overflow chip; the NUL keeps it from colliding with any option value. */
 const MORE = "\0more";
+/** Attributes the group owns; a chip's `attrs` can never set them. */
+const OWN_ATTRS = /* @__PURE__ */ new Set([
+	"data-chip",
+	"data-slot",
+	"data-flip",
+	"data-more",
+	"data-selected"
+]);
+/** Keeps only `data-*` keys the group does not own, so a chip's attrs cannot break its styling or roving focus. */
+function chipAttrs(attrs) {
+	if (!attrs) return void 0;
+	const kept = {};
+	for (const [key, value] of Object.entries(attrs)) if (key.startsWith("data-") && !OWN_ATTRS.has(key)) kept[key] = value;
+	return kept;
+}
 /** Stagger between chips revealed by the overflow (ms), at most 300 in all. */
 const STAGGER_MS = 35;
 const ChipGroup = forwardRef(function ChipGroup({ options, value, onValueChange, label, multiple = true, maxVisible = Infinity, moreLabel = (hidden) => `+${hidden} more`, lessLabel = "Show less", className }, ref) {
@@ -76,7 +91,9 @@ const ChipGroup = forwardRef(function ChipGroup({ options, value, onValueChange,
 			children: [visible.map((option) => {
 				const selected = value.includes(option.value);
 				const delay = revealedAt.get(option.value);
-				return /* @__PURE__ */ jsx("button", {
+				return /* @__PURE__ */ createElement("button", {
+					...chipAttrs(option.attrs),
+					key: option.value,
 					type: "button",
 					"data-flip": "",
 					"data-chip": option.value,
@@ -86,40 +103,39 @@ const ChipGroup = forwardRef(function ChipGroup({ options, value, onValueChange,
 					onClick: () => toggle(option.value),
 					onFocus: () => setActive(option.value),
 					style: delay === void 0 ? void 0 : { animationDelay: `${delay}ms` },
-					className: cn("chip", delay === void 0 ? "" : "motion-safe:animate-chip-reveal"),
-					children: /* @__PURE__ */ jsxs("span", {
-						"data-selected": selected,
-						className: "chip-body",
-						children: [
-							/* @__PURE__ */ jsx("span", {
-								"aria-hidden": "true",
-								className: "chip-check",
-								children: /* @__PURE__ */ jsx("svg", {
-									width: 14,
-									height: 14,
-									viewBox: "0 0 24 24",
-									fill: "none",
-									stroke: "currentColor",
-									strokeWidth: 2.5,
-									strokeLinecap: "round",
-									strokeLinejoin: "round",
-									children: /* @__PURE__ */ jsx("path", {
-										d: "M4 12.5 9.5 18 20 6.5",
-										pathLength: 1
-									})
+					className: cn("chip", delay === void 0 ? "" : "motion-safe:animate-chip-reveal")
+				}, /* @__PURE__ */ jsxs("span", {
+					"data-selected": selected,
+					className: "chip-body",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: "chip-check",
+							children: /* @__PURE__ */ jsx("svg", {
+								width: 14,
+								height: 14,
+								viewBox: "0 0 24 24",
+								fill: "none",
+								stroke: "currentColor",
+								strokeWidth: 2.5,
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								children: /* @__PURE__ */ jsx("path", {
+									d: "M4 12.5 9.5 18 20 6.5",
+									pathLength: 1
 								})
-							}),
-							/* @__PURE__ */ jsx("span", {
-								"aria-hidden": "true",
-								className: "chip-slot"
-							}),
-							/* @__PURE__ */ jsx("span", {
-								className: "truncate",
-								children: option.label
 							})
-						]
-					})
-				}, option.value);
+						}),
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: "chip-slot"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: option.label
+						})
+					]
+				}));
 			}), showMore ? /* @__PURE__ */ jsx("button", {
 				type: "button",
 				"data-flip": "",

package/dist/chip-group/chip-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip-group.js","names":[],"sources":["../../src/chip-group/chip-group.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useMemo, useRef, useState, type KeyboardEvent } from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { useFlip } from \"../lib/flip.js\";\nimport { useHeightFollow } from \"../lib/height-follow.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * ChipGroup: selectable filter chips for narrowing a list by facets people\n * toggle often, such as topics, statuses or tags.\n *\n * Selecting a chip grows a check in at its start (it draws itself as it\n * scales up from a soft blur), the label slides over, the chip widens on the\n * morph spring, and its neighbours glide to their new places, even across\n * lines. The row follows its own height. Long sets fold behind a \"+N more\"\n * chip; opening it grows the hidden chips in one after another. Arrow keys move\n * between chips, Space or Enter toggles, and each chip is a pressed or\n * unpressed button. Selected reads as a tint plus the check, never colour alone.\n */\nexport interface ChipOption {\n  value: string;\n  label: string;\n}\n\nexport interface ChipGroupProps {\n  options: ChipOption[];\n  value: string[];\n  onValueChange: (value: string[]) => void;\n  /** Accessible name of the group, such as \"Topics\". */\n  label: string;\n  /** Allow several chips at once. In single mode the selected chip can still be cleared. @default true */\n  multiple?: boolean;\n  /** Chips shown before the rest fold behind a \"+N more\" chip. Chips selected when it folds stay in view. */\n  maxVisible?: number;\n  /** Text of the overflow chip. @default (hidden) => `+${hidden} more` */\n  moreLabel?: (hidden: number) => string;\n  /** @default \"Show less\" */\n  lessLabel?: string;\n  /** Extra classes for the group. Merged last. */\n  className?: string;\n}\n\n/** Roving-focus key of the overflow chip; the NUL keeps it from colliding with any option value. */\nconst MORE = \"\\u0000more\";\n/** Stagger between chips revealed by the overflow (ms), at most 300 in all. */\nconst STAGGER_MS = 35;\n\nexport const ChipGroup = forwardRef<HTMLDivElement, ChipGroupProps>(function ChipGroup(\n  {\n    options,\n    value,\n    onValueChange,\n    label,\n    multiple = true,\n    maxVisible = Infinity,\n    moreLabel = (hidden) => `+${hidden} more`,\n    lessLabel = \"Show less\",\n    className,\n  },\n  ref,\n) {\n  const [expanded, setExpanded] = useState(false);\n  // Chips selected when the overflow folds stay in view, so a selection is never hidden.\n  const [pinned, setPinned] = useState<string[]>(value);\n  const [active, setActive] = useState<string | null>(null);\n  const foldable = options.length > maxVisible;\n  const visible =\n    !foldable || expanded\n      ? options\n      : options.filter(\n          (option, index) => index < maxVisible || pinned.includes(option.value) || value.includes(option.value),\n        );\n  const hidden = options.length - visible.length;\n  const showMore = foldable && (expanded || hidden > 0);\n  const keys = [...visible.map((option) => option.value), ...(showMore ? [MORE] : [])];\n  // One chip holds the tab stop: the last one focused, else the first selected, else the first.\n  const tabStop =\n    active !== null && keys.includes(active)\n      ? active\n      : (visible.find((option) => value.includes(option.value))?.value ?? keys[0]);\n\n  const group = useRef<HTMLDivElement | null>(null);\n  const refs = useMemo(() => mergeRefs(ref, group), [ref]);\n  const frame = useRef<HTMLDivElement>(null);\n  const morphKey = `${expanded}|${value.join(\",\")}`;\n  // Neighbours glide to their new places when a chip widens, even across lines; the row follows its height.\n  useFlip(group, morphKey, \"var(--duration-morph)\", \"var(--ease-morph)\");\n  useHeightFollow(frame, group, morphKey);\n  // Chips that appear after the first render grow in; the ones there from the start never animate.\n  const seen = useRef(new Set(options.map((option) => option.value)));\n  const revealedAt = new Map<string, number>();\n  let rank = 0;\n  for (const option of visible) {\n    if (!seen.current.has(option.value)) revealedAt.set(option.value, Math.min(rank++ * STAGGER_MS, 300));\n  }\n\n  function toggle(next: string) {\n    const on = value.includes(next);\n    if (!multiple) {\n      onValueChange(on ? [] : [next]);\n      return;\n    }\n    onValueChange(\n      options.filter((option) => (option.value === next ? !on : value.includes(option.value))).map((option) => option.value),\n    );\n  }\n\n  function toggleMore() {\n    if (expanded) setPinned(value);\n    // Only the chips this opening reveals grow in; the ones already on screen stay put.\n    else seen.current = new Set(visible.map((option) => option.value));\n    setExpanded(!expanded);\n  }\n\n  function onKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    const buttons = Array.from(event.currentTarget.querySelectorAll<HTMLButtonElement>(\"button[data-chip]\"));\n    const index = buttons.indexOf(document.activeElement as HTMLButtonElement);\n    if (index < 0) return;\n    const last = buttons.length - 1;\n    const moves: Record<string, number> = {\n      ArrowRight: index === last ? 0 : index + 1,\n      ArrowDown: index === last ? 0 : index + 1,\n      ArrowLeft: index === 0 ? last : index - 1,\n      ArrowUp: index === 0 ? last : index - 1,\n      Home: 0,\n      End: last,\n    };\n    if (!(event.key in moves)) return;\n    event.preventDefault();\n    buttons[moves[event.key]!]!.focus();\n  }\n\n  const moreText = expanded ? lessLabel : moreLabel(hidden);\n\n  return (\n    <div ref={frame} data-slot=\"chip-group-frame\" className=\"height-follow min-w-0\">\n      <div\n        ref={refs}\n        role=\"group\"\n        aria-label={label}\n        data-slot=\"chip-group\"\n        onKeyDown={onKeyDown}\n        className={cn(\"relative isolate flex flex-wrap gap-2 box-border font-sans\", className)}\n      >\n        {visible.map((option) => {\n          const selected = value.includes(option.value);\n          const delay = revealedAt.get(option.value);\n          return (\n            <button\n              key={option.value}\n              type=\"button\"\n              data-flip=\"\"\n              data-chip={option.value}\n              data-slot=\"chip\"\n              aria-pressed={selected}\n              tabIndex={tabStop === option.value ? 0 : -1}\n              onClick={() => toggle(option.value)}\n              onFocus={() => setActive(option.value)}\n              style={delay === undefined ? undefined : ({ animationDelay: `${delay}ms` })}\n              className={cn(\"chip\", delay === undefined ? \"\" : \"motion-safe:animate-chip-reveal\")}\n            >\n              <span data-selected={selected} className=\"chip-body\">\n                <span aria-hidden=\"true\" className=\"chip-check\">\n                  <svg width={14} height={14} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2.5} strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                    <path d=\"M4 12.5 9.5 18 20 6.5\" pathLength={1} />\n                  </svg>\n                </span>\n                <span aria-hidden=\"true\" className=\"chip-slot\" />\n                <span className=\"truncate\">{option.label}</span>\n              </span>\n            </button>\n          );\n        })}\n        {showMore ? (\n          <button\n            key={MORE}\n            type=\"button\"\n            data-flip=\"\"\n            data-chip={MORE}\n            data-more=\"\"\n            aria-expanded={expanded}\n            tabIndex={tabStop === MORE ? 0 : -1}\n            onClick={toggleMore}\n            onFocus={() => setActive(MORE)}\n            className=\"chip chip-more\"\n          >\n            <span className=\"chip-body tabular-nums\">\n              <SwapText swapKey={moreText} motion=\"rise\">\n                {moreText}\n              </SwapText>\n            </span>\n          </button>\n        ) : null}\n      </div>\n    </div>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"chip-group.js","names":[],"sources":["../../src/chip-group/chip-group.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useMemo, useRef, useState, type KeyboardEvent } from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { useFlip } from \"../lib/flip.js\";\nimport { useHeightFollow } from \"../lib/height-follow.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * ChipGroup: selectable filter chips for narrowing a list by facets people\n * toggle often, such as topics, statuses or tags.\n *\n * Selecting a chip grows a check in at its start (it draws itself as it\n * scales up from a soft blur), the label slides over, the chip widens on the\n * morph spring, and its neighbours glide to their new places, even across\n * lines. The row follows its own height. Long sets fold behind a \"+N more\"\n * chip; opening it grows the hidden chips in one after another. Arrow keys move\n * between chips, Space or Enter toggles, and each chip is a pressed or\n * unpressed button. Selected reads as a tint plus the check, never colour alone.\n */\nexport interface ChipOption {\n  value: string;\n  label: string;\n  /**\n   * Extra `data-*` attributes for this chip's button, such as\n   * `{ \"data-testid\": \"goal-market-IN\" }`, so tests and analytics can address\n   * one chip. They never override the group's own `data-chip`, `data-slot`,\n   * `data-flip`, `data-more` or `data-selected`; those keys are dropped.\n   */\n  attrs?: ChipAttrs;\n}\n\n/** `data-*` attributes passed through to one chip's button. */\nexport type ChipAttrs = { [key: `data-${string}`]: string | undefined };\n\nexport interface ChipGroupProps {\n  options: ChipOption[];\n  value: string[];\n  onValueChange: (value: string[]) => void;\n  /** Accessible name of the group, such as \"Topics\". */\n  label: string;\n  /** Allow several chips at once. In single mode the selected chip can still be cleared. @default true */\n  multiple?: boolean;\n  /** Chips shown before the rest fold behind a \"+N more\" chip. Chips selected when it folds stay in view. */\n  maxVisible?: number;\n  /** Text of the overflow chip. @default (hidden) => `+${hidden} more` */\n  moreLabel?: (hidden: number) => string;\n  /** @default \"Show less\" */\n  lessLabel?: string;\n  /** Extra classes for the group. Merged last. */\n  className?: string;\n}\n\n/** Roving-focus key of the overflow chip; the NUL keeps it from colliding with any option value. */\nconst MORE = \"\\u0000more\";\n/** Attributes the group owns; a chip's `attrs` can never set them. */\nconst OWN_ATTRS = new Set([\"data-chip\", \"data-slot\", \"data-flip\", \"data-more\", \"data-selected\"]);\n\n/** Keeps only `data-*` keys the group does not own, so a chip's attrs cannot break its styling or roving focus. */\nfunction chipAttrs(attrs: ChipAttrs | undefined): ChipAttrs | undefined {\n  if (!attrs) return undefined;\n  const kept: ChipAttrs = {};\n  for (const [key, value] of Object.entries(attrs)) {\n    if (key.startsWith(\"data-\") && !OWN_ATTRS.has(key)) kept[key as `data-${string}`] = value;\n  }\n  return kept;\n}\n\n/** Stagger between chips revealed by the overflow (ms), at most 300 in all. */\nconst STAGGER_MS = 35;\n\nexport const ChipGroup = forwardRef<HTMLDivElement, ChipGroupProps>(function ChipGroup(\n  {\n    options,\n    value,\n    onValueChange,\n    label,\n    multiple = true,\n    maxVisible = Infinity,\n    moreLabel = (hidden) => `+${hidden} more`,\n    lessLabel = \"Show less\",\n    className,\n  },\n  ref,\n) {\n  const [expanded, setExpanded] = useState(false);\n  // Chips selected when the overflow folds stay in view, so a selection is never hidden.\n  const [pinned, setPinned] = useState<string[]>(value);\n  const [active, setActive] = useState<string | null>(null);\n  const foldable = options.length > maxVisible;\n  const visible =\n    !foldable || expanded\n      ? options\n      : options.filter(\n          (option, index) => index < maxVisible || pinned.includes(option.value) || value.includes(option.value),\n        );\n  const hidden = options.length - visible.length;\n  const showMore = foldable && (expanded || hidden > 0);\n  const keys = [...visible.map((option) => option.value), ...(showMore ? [MORE] : [])];\n  // One chip holds the tab stop: the last one focused, else the first selected, else the first.\n  const tabStop =\n    active !== null && keys.includes(active)\n      ? active\n      : (visible.find((option) => value.includes(option.value))?.value ?? keys[0]);\n\n  const group = useRef<HTMLDivElement | null>(null);\n  const refs = useMemo(() => mergeRefs(ref, group), [ref]);\n  const frame = useRef<HTMLDivElement>(null);\n  const morphKey = `${expanded}|${value.join(\",\")}`;\n  // Neighbours glide to their new places when a chip widens, even across lines; the row follows its height.\n  useFlip(group, morphKey, \"var(--duration-morph)\", \"var(--ease-morph)\");\n  useHeightFollow(frame, group, morphKey);\n  // Chips that appear after the first render grow in; the ones there from the start never animate.\n  const seen = useRef(new Set(options.map((option) => option.value)));\n  const revealedAt = new Map<string, number>();\n  let rank = 0;\n  for (const option of visible) {\n    if (!seen.current.has(option.value)) revealedAt.set(option.value, Math.min(rank++ * STAGGER_MS, 300));\n  }\n\n  function toggle(next: string) {\n    const on = value.includes(next);\n    if (!multiple) {\n      onValueChange(on ? [] : [next]);\n      return;\n    }\n    onValueChange(\n      options.filter((option) => (option.value === next ? !on : value.includes(option.value))).map((option) => option.value),\n    );\n  }\n\n  function toggleMore() {\n    if (expanded) setPinned(value);\n    // Only the chips this opening reveals grow in; the ones already on screen stay put.\n    else seen.current = new Set(visible.map((option) => option.value));\n    setExpanded(!expanded);\n  }\n\n  function onKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    const buttons = Array.from(event.currentTarget.querySelectorAll<HTMLButtonElement>(\"button[data-chip]\"));\n    const index = buttons.indexOf(document.activeElement as HTMLButtonElement);\n    if (index < 0) return;\n    const last = buttons.length - 1;\n    const moves: Record<string, number> = {\n      ArrowRight: index === last ? 0 : index + 1,\n      ArrowDown: index === last ? 0 : index + 1,\n      ArrowLeft: index === 0 ? last : index - 1,\n      ArrowUp: index === 0 ? last : index - 1,\n      Home: 0,\n      End: last,\n    };\n    if (!(event.key in moves)) return;\n    event.preventDefault();\n    buttons[moves[event.key]!]!.focus();\n  }\n\n  const moreText = expanded ? lessLabel : moreLabel(hidden);\n\n  return (\n    <div ref={frame} data-slot=\"chip-group-frame\" className=\"height-follow min-w-0\">\n      <div\n        ref={refs}\n        role=\"group\"\n        aria-label={label}\n        data-slot=\"chip-group\"\n        onKeyDown={onKeyDown}\n        className={cn(\"relative isolate flex flex-wrap gap-2 box-border font-sans\", className)}\n      >\n        {visible.map((option) => {\n          const selected = value.includes(option.value);\n          const delay = revealedAt.get(option.value);\n          return (\n            <button\n              {...chipAttrs(option.attrs)}\n              key={option.value}\n              type=\"button\"\n              data-flip=\"\"\n              data-chip={option.value}\n              data-slot=\"chip\"\n              aria-pressed={selected}\n              tabIndex={tabStop === option.value ? 0 : -1}\n              onClick={() => toggle(option.value)}\n              onFocus={() => setActive(option.value)}\n              style={delay === undefined ? undefined : ({ animationDelay: `${delay}ms` })}\n              className={cn(\"chip\", delay === undefined ? \"\" : \"motion-safe:animate-chip-reveal\")}\n            >\n              <span data-selected={selected} className=\"chip-body\">\n                <span aria-hidden=\"true\" className=\"chip-check\">\n                  <svg width={14} height={14} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2.5} strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                    <path d=\"M4 12.5 9.5 18 20 6.5\" pathLength={1} />\n                  </svg>\n                </span>\n                <span aria-hidden=\"true\" className=\"chip-slot\" />\n                <span className=\"truncate\">{option.label}</span>\n              </span>\n            </button>\n          );\n        })}\n        {showMore ? (\n          <button\n            key={MORE}\n            type=\"button\"\n            data-flip=\"\"\n            data-chip={MORE}\n            data-more=\"\"\n            aria-expanded={expanded}\n            tabIndex={tabStop === MORE ? 0 : -1}\n            onClick={toggleMore}\n            onFocus={() => setActive(MORE)}\n            className=\"chip chip-more\"\n          >\n            <span className=\"chip-body tabular-nums\">\n              <SwapText swapKey={moreText} motion=\"rise\">\n                {moreText}\n              </SwapText>\n            </span>\n          </button>\n        ) : null}\n      </div>\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/chip-group/index.d.ts

@@ -1,2 +1,2 @@
-import { ChipGroup, ChipGroupProps, ChipOption } from "./chip-group.js";
-export { ChipGroup, type ChipGroupProps, type ChipOption };
+import { ChipAttrs, ChipGroup, ChipGroupProps, ChipOption } from "./chip-group.js";
+export { type ChipAttrs, ChipGroup, type ChipGroupProps, type ChipOption };

package/dist/code-block/code-block.d.ts

@@ -0,0 +1,45 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/code-block/code-block.d.ts
+export declare const codeBlockVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export interface CodeBlockProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+  /** The code. It is what is shown (unless `children` is given) and what goes on the clipboard. */
+  value: string;
+  /** Show this instead of `value` (for highlighted markup). `value` is still what is copied. */
+  children?: ReactNode;
+  /**
+   * Break long lines instead of scrolling sideways. Off by default: a line of code
+   * scrolls, and the scroll area takes keyboard focus (only while it actually
+   * overflows) so it can be read.
+   *
+   * @default false
+   */
+  wrap?: boolean;
+  /** The visible label of the copy button. @default "Copy" */
+  copyLabel?: string;
+  /** The copy button's accessible name; keep `copyLabel` inside it. @default "Copy code" */
+  copyAriaLabel?: string;
+  /** Only the icon on the copy button. @default false */
+  iconOnly?: boolean;
+  /**
+   * Names the code group for assistive technology. It is a `group`, not a landmark,
+   * so several blocks on one page do not each add a region to the landmark list.
+   * Give each a distinct label when it helps ("Install command").
+   *
+   * @default "Code"
+   */
+  codeLabel?: string;
+  /** Called once the code has reached the clipboard. */
+  onCopied?: () => void;
+  /** Called when the clipboard refused the text. */
+  onCopyError?: (error: unknown) => void;
+}
+/**
+ * A snippet of code with a copy button, built on CopyButton (which owns the
+ * copy, its feedback and its live-region announcement).
+ *
+ * @example
+ * <CodeBlock value="npm install @seekalfred/primitives" onCopied={() => toast("Copied")} />
+ */
+export declare const CodeBlock: import("react").ForwardRefExoticComponent<CodeBlockProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion
+//# sourceMappingURL=code-block.d.ts.map

package/dist/code-block/code-block.js

@@ -0,0 +1,74 @@
+"use client";
+import { cn, cnAll } from "../lib/cn.js";
+import { CopyButton } from "../copy-button/copy-button.js";
+import { cva } from "class-variance-authority";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/code-block/code-block.tsx
+const codeBlockVariants = cva([
+	"flex items-start justify-between gap-2",
+	"rounded-control bg-muted px-3 py-2 box-border",
+	"font-sans text-foreground"
+]);
+/**
+* A snippet of code with a copy button, built on CopyButton (which owns the
+* copy, its feedback and its live-region announcement).
+*
+* @example
+* <CodeBlock value="npm install @seekalfred/primitives" onCopied={() => toast("Copied")} />
+*/
+const CodeBlock = forwardRef(function CodeBlock({ value, children, wrap = false, copyLabel = "Copy", copyAriaLabel = "Copy code", iconOnly = false, codeLabel = "Code", onCopied, onCopyError, className, ...props }, ref) {
+	const preRef = useRef(null);
+	const [scrolls, setScrolls] = useState(false);
+	useEffect(() => {
+		const pre = preRef.current;
+		if (wrap || !pre) {
+			setScrolls(false);
+			return;
+		}
+		const measure = () => setScrolls(pre.scrollWidth > pre.clientWidth);
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(pre);
+		if (pre.firstElementChild) observer.observe(pre.firstElementChild);
+		return () => observer.disconnect();
+	}, [
+		wrap,
+		value,
+		children
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		...props,
+		"data-slot": "code-block",
+		"data-wrap": wrap || void 0,
+		className: cn(codeBlockVariants(), className),
+		children: [/* @__PURE__ */ jsx("pre", {
+			ref: preRef,
+			"data-slot": "code-block-pre",
+			...wrap ? {} : {
+				role: "group",
+				"aria-label": codeLabel,
+				tabIndex: scrolls ? 0 : void 0
+			},
+			className: cnAll("m-0 min-w-0 flex-1 font-mono text-sm leading-(--leading-normal)", wrap ? "whitespace-pre-wrap break-all" : "overflow-x-auto outline-none focus-visible:outline-solid focus-visible:outline-(length:--focus-ring-width) focus-visible:outline-(--color-ring)"),
+			children: /* @__PURE__ */ jsx("code", {
+				"data-slot": "code-block-code",
+				children: children ?? value
+			})
+		}), /* @__PURE__ */ jsx(CopyButton, {
+			value,
+			variant: "plain",
+			iconOnly,
+			"aria-label": copyAriaLabel,
+			onCopied,
+			onError: onCopyError,
+			children: copyLabel
+		})]
+	});
+});
+//#endregion
+export { CodeBlock, codeBlockVariants };
+
+//# sourceMappingURL=code-block.js.map

package/dist/code-block/code-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.js","names":[],"sources":["../../src/code-block/code-block.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useEffect, useRef, useState, type ComponentPropsWithoutRef, type ReactNode } from \"react\";\n\nimport { CopyButton } from \"../copy-button/copy-button.js\";\nimport { cn, cnAll } from \"../lib/cn.js\";\n\nexport const codeBlockVariants = cva([\n  \"flex items-start justify-between gap-2\",\n  \"rounded-control bg-muted px-3 py-2 box-border\",\n  \"font-sans text-foreground\",\n]);\n\nexport interface CodeBlockProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /** The code. It is what is shown (unless `children` is given) and what goes on the clipboard. */\n  value: string;\n  /** Show this instead of `value` (for highlighted markup). `value` is still what is copied. */\n  children?: ReactNode;\n  /**\n   * Break long lines instead of scrolling sideways. Off by default: a line of code\n   * scrolls, and the scroll area takes keyboard focus (only while it actually\n   * overflows) so it can be read.\n   *\n   * @default false\n   */\n  wrap?: boolean;\n  /** The visible label of the copy button. @default \"Copy\" */\n  copyLabel?: string;\n  /** The copy button's accessible name; keep `copyLabel` inside it. @default \"Copy code\" */\n  copyAriaLabel?: string;\n  /** Only the icon on the copy button. @default false */\n  iconOnly?: boolean;\n  /**\n   * Names the code group for assistive technology. It is a `group`, not a landmark,\n   * so several blocks on one page do not each add a region to the landmark list.\n   * Give each a distinct label when it helps (\"Install command\").\n   *\n   * @default \"Code\"\n   */\n  codeLabel?: string;\n  /** Called once the code has reached the clipboard. */\n  onCopied?: () => void;\n  /** Called when the clipboard refused the text. */\n  onCopyError?: (error: unknown) => void;\n}\n\n/**\n * A snippet of code with a copy button, built on CopyButton (which owns the\n * copy, its feedback and its live-region announcement).\n *\n * @example\n * <CodeBlock value=\"npm install @seekalfred/primitives\" onCopied={() => toast(\"Copied\")} />\n */\nexport const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(function CodeBlock(\n  {\n    value,\n    children,\n    wrap = false,\n    copyLabel = \"Copy\",\n    copyAriaLabel = \"Copy code\",\n    iconOnly = false,\n    codeLabel = \"Code\",\n    onCopied,\n    onCopyError,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const preRef = useRef<HTMLPreElement>(null);\n  const [scrolls, setScrolls] = useState(false);\n\n  // A scroll area must be a tab stop (axe: scrollable-region-focusable) but a snippet\n  // that fits is not one, so a page of short snippets adds no empty tab stops.\n  useEffect(() => {\n    const pre = preRef.current;\n    if (wrap || !pre) {\n      setScrolls(false);\n      return;\n    }\n    const measure = () => setScrolls(pre.scrollWidth > pre.clientWidth);\n    measure();\n    if (typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(measure);\n    // The pre's own box changes with its container; the code's with its content.\n    observer.observe(pre);\n    if (pre.firstElementChild) observer.observe(pre.firstElementChild);\n    return () => observer.disconnect();\n  }, [wrap, value, children]);\n\n  return (\n    <div\n      ref={ref}\n      {...props}\n      data-slot=\"code-block\"\n      data-wrap={wrap || undefined}\n      className={cn(codeBlockVariants(), className)}\n    >\n      <pre\n        ref={preRef}\n        data-slot=\"code-block-pre\"\n        // Scrolling code must be reachable by keyboard; code that fits or wraps never needs to be.\n        {...(wrap ? {} : { role: \"group\", \"aria-label\": codeLabel, tabIndex: scrolls ? 0 : undefined })}\n        className={cnAll(\n          \"m-0 min-w-0 flex-1 font-mono text-sm leading-(--leading-normal)\",\n          wrap\n            ? \"whitespace-pre-wrap break-all\"\n            : \"overflow-x-auto outline-none focus-visible:outline-solid focus-visible:outline-(length:--focus-ring-width) focus-visible:outline-(--color-ring)\",\n        )}\n      >\n        <code data-slot=\"code-block-code\">{children ?? value}</code>\n      </pre>\n      <CopyButton\n        value={value}\n        variant=\"plain\"\n        iconOnly={iconOnly}\n        aria-label={copyAriaLabel}\n        onCopied={onCopied}\n        onError={onCopyError}\n      >\n        {copyLabel}\n      </CopyButton>\n    </div>\n  );\n});\n"],"mappings":";;;;;;;AAQA,MAAa,oBAAoB,IAAI;CACnC;CACA;CACA;AACF,CAAC;;;;;;;;AA0CD,MAAa,YAAY,WAA2C,SAAS,UAC3E,EACE,OACA,UACA,OAAO,OACP,YAAY,QACZ,gBAAgB,aAChB,WAAW,OACX,YAAY,QACZ,UACA,aACA,WACA,GAAG,SAEL,KACA;CACA,MAAM,SAAS,OAAuB,IAAI;CAC1C,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAI5C,gBAAgB;EACd,MAAM,MAAM,OAAO;EACnB,IAAI,QAAQ,CAAC,KAAK;GAChB,WAAW,KAAK;GAChB;EACF;EACA,MAAM,gBAAgB,WAAW,IAAI,cAAc,IAAI,WAAW;EAClE,QAAQ;EACR,IAAI,OAAO,mBAAmB,aAAa;EAC3C,MAAM,WAAW,IAAI,eAAe,OAAO;EAE3C,SAAS,QAAQ,GAAG;EACpB,IAAI,IAAI,mBAAmB,SAAS,QAAQ,IAAI,iBAAiB;EACjE,aAAa,SAAS,WAAW;CACnC,GAAG;EAAC;EAAM;EAAO;CAAQ,CAAC;CAE1B,OACE,qBAAC,OAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,aAAW,QAAQ,KAAA;EACnB,WAAW,GAAG,kBAAkB,GAAG,SAAS;EAL9C,UAAA,CAOE,oBAAC,OAAD;GACE,KAAK;GACL,aAAU;GAEV,GAAK,OAAO,CAAC,IAAI;IAAE,MAAM;IAAS,cAAc;IAAW,UAAU,UAAU,IAAI,KAAA;GAAU;GAC7F,WAAW,MACT,mEACA,OACI,kCACA,iJACN;GAEA,UAAA,oBAAC,QAAD;IAAM,aAAU;IAAmB,UAAA,YAAY;GAAY,CAAA;EACxD,CAAA,GACL,oBAAC,YAAD;GACS;GACP,SAAQ;GACE;GACV,cAAY;GACF;GACV,SAAS;GAER,UAAA;EACS,CAAA,CACT;;AAET,CAAC"}

package/dist/code-block/index.d.ts

@@ -0,0 +1,2 @@
+import { CodeBlock, CodeBlockProps, codeBlockVariants } from "./code-block.js";
+export { CodeBlock, type CodeBlockProps, codeBlockVariants };

package/dist/code-block/index.js

@@ -0,0 +1,2 @@
+import { CodeBlock, codeBlockVariants } from "./code-block.js";
+export { CodeBlock, codeBlockVariants };

package/dist/command-palette/command-palette.d.ts

@@ -0,0 +1,128 @@
+import { ReactNode } from "react";
+//#region src/command-palette/command-palette.d.ts
+/**
+ * CommandPalette: a modal search-and-run list opened with Cmd+K or Ctrl+K.
+ *
+ * Built on the existing Dialog (React Aria's modal: focus trap, focus return, Escape, scrim,
+ * entrance motion that already honours prefers-reduced-motion), Input and ShortcutKeys, so it adds
+ * only the combobox + listbox wiring.
+ *
+ * The pattern is the WAI-ARIA "combobox with listbox popup": DOM focus never leaves the input,
+ * and the highlighted option is named by `aria-activedescendant`. Options are not tabbable.
+ *
+ * Every string in the cva blocks is a STATIC literal (Tailwind scans source text).
+ */
+/** One entry in the palette. */
+export interface CommandPaletteItem {
+  /**
+   * Stable identity. Unique within `items`. A `recent` entry is a copy of an item, so it uses
+   * that item's `id` and `recent` need not be unique against `items`; only each list on its own.
+   */
+  id: string;
+  /** The text shown, and the main thing the query is matched against. */
+  label: string;
+  /** The heading it is listed under. Items without one share an unlabelled group. */
+  group?: string;
+  /** A decorative glyph before the label. Mark it `aria-hidden`; it is sized by the palette. */
+  icon?: ReactNode;
+  /** A key combination shown as key caps, such as `"mod+shift+p"`. A hint only: it binds nothing. */
+  shortcut?: string;
+  /** Plain text at the trailing edge, such as "Go to" or "Run". Shown when there is no `shortcut`. */
+  hint?: string;
+  /** Extra words that also match the query but are not shown. */
+  keywords?: readonly string[];
+  /** Listed but skipped by the arrow keys and ignored when pressed. @default false */
+  isDisabled?: boolean;
+}
+export declare const commandPaletteListVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const commandPaletteOptionVariants: (props?: ({} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface CommandPaletteShortcutOptions {
+  /**
+   * The chord. `mod` matches Command or Control on any platform, so the default opens on both
+   * Cmd+K and Ctrl+K. Other modifiers: `ctrl`, `meta`, `alt`, `shift`. Modifiers you do not name
+   * must not be held.
+   *
+   * The last part is the key. Supported: a letter (`k`), a digit (`1`, also with `shift`), `space`,
+   * and any other name equal to `KeyboardEvent.key` such as `escape`, `enter`, `/`. A letter is
+   * read from what the key types, so it follows Dvorak and similar layouts. On a non-Latin layout
+   * it falls back to the physical key.
+   * @default "mod+k"
+   */
+  shortcut?: string;
+  /** Turn the listener off. @default true */
+  enabled?: boolean;
+}
+type KeyLike = Pick<KeyboardEvent, "key" | "code" | "ctrlKey" | "metaKey" | "altKey" | "shiftKey">;
+/** True when a keydown is this chord. `mod` is either Command or Control (not both required). */
+export declare function matchesCommandPaletteShortcut(event: KeyLike, shortcut: string): boolean;
+/**
+ * Calls `onTrigger` when the chord is pressed anywhere in the document, and prevents the
+ * browser's own use of it (Ctrl+K focuses the address bar in some browsers).
+ *
+ * `CommandPalette` installs this itself, so use the hook only to open a palette from a
+ * different chord than the one the palette listens for, or to drive one you render conditionally.
+ */
+export declare function useCommandPaletteShortcut(onTrigger: () => void, { shortcut, enabled }?: CommandPaletteShortcutOptions): void;
+export interface CommandPaletteProps {
+  /** Everything that can be run or opened. */
+  items: readonly CommandPaletteItem[];
+  /**
+   * A group of recent or suggested items, listed first while the search box is empty. It
+   * disappears once the user types, when the search runs over `items` alone.
+   */
+  recent?: readonly CommandPaletteItem[];
+  /** Heading of the `recent` group. @default "Recent" */
+  recentLabel?: string;
+  /** Called with the chosen item, after the palette has asked to close. */
+  onSelect?: (item: CommandPaletteItem) => void;
+  /** Whether it is open. Pass with `onOpenChange` to control it. */
+  isOpen?: boolean;
+  /** Whether it starts open when uncontrolled. @default false */
+  defaultOpen?: boolean;
+  /** Called when it wants to open or close: the shortcut, Escape, the scrim, a selection. */
+  onOpenChange?: (isOpen: boolean) => void;
+  /**
+   * The chord that toggles it, installed on the document while the component is mounted.
+   * `false` removes the listener, for an app that binds it elsewhere (see
+   * `useCommandPaletteShortcut`). `mod` is Command or Control.
+   * @default "mod+k"
+   */
+  shortcut?: string | false;
+  /** The dialog's accessible name. A prop so it can be translated. @default "Search and commands" */
+  label?: string;
+  /** Accessible name of the search box. @default "Search" */
+  searchLabel?: string;
+  /** Placeholder of the search box. @default "Search pages and actions" */
+  placeholder?: string;
+  /** Replaces the default filter. Receives the item and the trimmed query; the query is never empty. */
+  filter?: (item: CommandPaletteItem, query: string) => boolean;
+  /** What to show when nothing matches. @default ``No matches for “query”.`` */
+  emptyMessage?: ReactNode | ((query: string) => ReactNode);
+  /** The polite result-count announcement. @default "1 result" / "n results" / "No results" */
+  resultsLabel?: (count: number) => string;
+  /**
+   * The strip of key hints under the list. `undefined` shows the default ("↑ ↓ to move",
+   * "Enter to open"); `null` removes it; anything else replaces it, which is how to translate it.
+   */
+  footer?: ReactNode;
+  /** Extra classes for the panel. Merged last. */
+  className?: string;
+}
+/**
+ * A command palette.
+ *
+ * @example
+ * const [open, setOpen] = useState(false);
+ * <CommandPalette
+ *   items={[
+ *     { id: "home", group: "Pages", label: "Home", hint: "Go to" },
+ *     { id: "theme", group: "Actions", label: "Switch theme", keywords: ["dark"], shortcut: "mod+shift+l" },
+ *   ]}
+ *   isOpen={open}
+ *   onOpenChange={setOpen}
+ *   onSelect={(item) => run(item.id)}
+ * />
+ */
+export declare function CommandPalette({ items, recent, recentLabel, onSelect, isOpen: isOpenProp, defaultOpen, onOpenChange, shortcut, label, searchLabel, placeholder, filter, emptyMessage, resultsLabel, footer, className }: CommandPaletteProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=command-palette.d.ts.map