@seekalfred/primitives 0.5.1 → 0.7.1

package/dist/onboarding-checklist/onboarding-checklist.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"onboarding-checklist.js","names":[],"sources":["../../src/onboarding-checklist/onboarding-checklist.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useEffect,\n  useId,\n  useMemo,\n  useReducer,\n  useRef,\n  useState,\n  type CSSProperties,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { ActionButton } from \"../action-button/action-button.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { RollingNumber } from \"../lib/field-message.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * OnboardingChecklist: a getting-started card for a new account or workspace,\n * for a short, one-time setup of three to eight loosely ordered steps. (Use a\n * Stepper when the order is strict and steps map to screens.)\n *\n * The progress ring and the count follow every check: the ring fills on the\n * morph spring, the count rolls its digits, and at 100% a tick draws in the\n * ring while the title morphs to `doneTitle`. A checked step fills its circle\n * from the centre, draws its tick and strikes its title through; 720ms later it\n * folds into a \"N completed\" row that opens again, and the next unfinished step\n * opens and takes focus if the finished one had it. A step with an `actionLabel`\n * runs `onAction`: resolving checks the step, throwing an Error keeps it open\n * and shows the message. The body can be hidden and shown again.\n *\n * Rows and panels open and close their height on a spring that never\n * overshoots, closing a little quicker. Nothing animates on first render, and\n * reduced motion removes the height animation and keeps short fades.\n *\n * Built on plain buttons and the shared swap and rolling-number helpers; the\n * action is the library's ActionButton, whose arrow becomes a spinner and then\n * a tick that draws itself. Keyboard: Up and Down walk the step titles,\n * Home and End jump to the first and last, Enter or Space expands a step,\n * toggles its checkbox or runs its action.\n */\nexport interface OnboardingStep {\n  id: string;\n  title: string;\n  description?: string;\n  /** Label of the button that does the step. Without it, the step is checked off by hand. */\n  actionLabel?: string;\n  /** Runs the step. Resolve to check it off; throw an Error to keep it open and show the error's message. */\n  onAction?: () => void | Promise<void>;\n}\n\nexport interface OnboardingChecklistProps {\n  /** Card title while steps remain. */\n  title: string;\n  /** Title once every step is done. @default \"You’re all set\" */\n  doneTitle?: string;\n  /** Steps in order. */\n  steps: OnboardingStep[];\n  /** Step ids that start completed. */\n  defaultCompleted?: string[];\n  /** Called with the completed ids, in step order, whenever they change. */\n  onCompletedChange?: (completed: string[]) => void;\n  /** Starts with the body collapsed. @default false */\n  defaultHidden?: boolean;\n  /** Called when the Hide or Show button is used. */\n  onHiddenChange?: (hidden: boolean) => void;\n  /** Extra classes for the card. Merged last. */\n  className?: string;\n}\n\ninterface State {\n  done: string[];\n  settled: string[];\n  expanded: string | null;\n  errors: Record<string, string>;\n  groupOpen: boolean;\n  hidden: boolean;\n  message: string;\n}\ntype Action =\n  | { type: \"check\" | \"uncheck\" | \"settle\" | \"expand\" | \"start\"; id: string; steps: OnboardingStep[] }\n  | { type: \"fail\"; id: string; message: string }\n  | { type: \"group\" | \"hide\" };\n\n/** How long a checked step stays in place, struck through, before it folds into the completed row. */\nconst SETTLE_MS = 720;\n\nconst ordered = (ids: string[], steps: OnboardingStep[]) =>\n  steps.map((step) => step.id).filter((id) => ids.includes(id));\nconst without = (ids: string[], id: string) => ids.filter((item) => item !== id);\nconst omit = (errors: Record<string, string>, id: string) =>\n  Object.fromEntries(Object.entries(errors).filter(([key]) => key !== id));\nconst titleOf = (steps: OnboardingStep[], id: string) =>\n  steps.find((step) => step.id === id)?.title ?? \"Step\";\n\nfunction init({\n  steps,\n  completed,\n  hidden,\n}: {\n  steps: OnboardingStep[];\n  completed: string[];\n  hidden: boolean;\n}): State {\n  const done = ordered(completed, steps);\n  return {\n    done,\n    settled: done,\n    expanded: steps.find((step) => !done.includes(step.id))?.id ?? null,\n    errors: {},\n    groupOpen: false,\n    hidden,\n    message: \"\",\n  };\n}\n\nfunction reducer(state: State, action: Action): State {\n  switch (action.type) {\n    case \"check\": {\n      if (state.done.includes(action.id)) return state;\n      const done = ordered([...state.done, action.id], action.steps);\n      const total = action.steps.length;\n      return {\n        ...state,\n        done,\n        errors: omit(state.errors, action.id),\n        message:\n          done.length === total\n            ? `All ${total} steps done.`\n            : `${titleOf(action.steps, action.id)} done. ${done.length} of ${total} complete.`,\n      };\n    }\n    case \"uncheck\": {\n      if (!state.done.includes(action.id)) return state;\n      const done = without(state.done, action.id);\n      return {\n        ...state,\n        done,\n        settled: without(state.settled, action.id),\n        expanded: state.expanded ?? action.id,\n        message: `${titleOf(action.steps, action.id)} marked as not done. ${done.length} of ${action.steps.length} complete.`,\n      };\n    }\n    case \"settle\": {\n      if (!state.done.includes(action.id) || state.settled.includes(action.id)) return state;\n      let expanded = state.expanded;\n      // The step that just finished hands the open panel to the next unfinished step, wrapping to the top.\n      if (expanded === action.id) {\n        const order = action.steps.map((step) => step.id);\n        const start = order.indexOf(action.id);\n        expanded =\n          order\n            .map((_, offset) => order[(start + offset + 1) % order.length]!)\n            .find((id) => !state.done.includes(id)) ?? null;\n      }\n      return { ...state, settled: ordered([...state.settled, action.id], action.steps), expanded };\n    }\n    case \"expand\":\n      return { ...state, expanded: state.expanded === action.id ? null : action.id };\n    case \"start\":\n      return { ...state, errors: omit(state.errors, action.id) };\n    case \"fail\":\n      return {\n        ...state,\n        errors: { ...state.errors, [action.id]: action.message },\n        message: action.message,\n      };\n    case \"group\":\n      return { ...state, groupOpen: !state.groupOpen };\n    case \"hide\":\n      return { ...state, hidden: !state.hidden };\n  }\n}\n\nconst Chevron = () => (\n  <svg\n    width={16}\n    height={16}\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth={1.75}\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"m18 15-6-6-6 6\" />\n  </svg>\n);\n\n/**\n * A box that opens and closes its height (a grid track going between 0fr and 1fr).\n * Closed, it is visibility: hidden once folded, so it leaves the tab order.\n */\nfunction Collapse({ show, children }: { show: boolean; children: ReactNode }) {\n  return (\n    <div data-shown={show || undefined} className=\"checklist-collapse\">\n      <div>{children}</div>\n    </div>\n  );\n}\n\n/** Every label the slot can show sits invisibly underneath, so a swap never changes the slot's size. */\nfunction SwapLabel({ text, options }: { text: string; options: string[] }) {\n  return (\n    <span className=\"checklist-swap\" aria-hidden=\"true\">\n      {options.map((option, index) => (\n        <span key={index} className=\"checklist-swap-sizer\">\n          {option}\n        </span>\n      ))}\n      <SwapText swapKey={text} motion=\"rise\" className=\"checklist-swap-item\">\n        {text}\n      </SwapText>\n    </span>\n  );\n}\n\n/** The ring's stroke fills on a spring as steps are checked; once every step is done a tick draws in its center. */\nfunction ProgressRing({ done, total }: { done: number; total: number }) {\n  const ratio = total ? done / total : 0;\n  const complete = total > 0 && done === total;\n  return (\n    <span\n      className=\"checklist-ring\"\n      role=\"progressbar\"\n      aria-label=\"Setup progress\"\n      aria-valuemin={0}\n      aria-valuemax={total}\n      aria-valuenow={done}\n      aria-valuetext={`${done} of ${total} steps done`}\n    >\n      <svg viewBox=\"0 0 40 40\" fill=\"none\" aria-hidden=\"true\">\n        <circle className=\"checklist-ring-track\" cx=\"20\" cy=\"20\" r=\"17\" strokeWidth={3} />\n        <g transform=\"rotate(-90 20 20)\">\n          <circle\n            className=\"checklist-ring-fill\"\n            cx=\"20\"\n            cy=\"20\"\n            r=\"17\"\n            strokeWidth={3}\n            strokeLinecap=\"round\"\n            pathLength={1}\n            data-started={ratio > 0 ? \"\" : undefined}\n            style={{ \"--ratio\": ratio } as CSSProperties}\n          />\n        </g>\n      </svg>\n      <span className=\"checklist-ring-tick\" aria-hidden=\"true\">\n        <SwapText swapKey={complete ? \"tick\" : \"\"} motion=\"glyph\" className=\"grid place-items-center\">\n          {complete ? (\n            <svg viewBox=\"0 0 40 40\" fill=\"none\">\n              <path\n                className=\"checklist-draw\"\n                pathLength={1}\n                d=\"M13.5 20.5 18 25l8.5-9.5\"\n                stroke=\"currentColor\"\n                strokeWidth={2.25}\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n              />\n            </svg>\n          ) : null}\n        </SwapText>\n      </span>\n    </span>\n  );\n}\n\n/** The fill grows from the center while the tick draws from its short stroke; unchecking retracts both quickly. */\nfunction CheckButton({\n  checked,\n  labelledBy,\n  onToggle,\n}: {\n  checked: boolean;\n  labelledBy: string;\n  onToggle: () => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      role=\"checkbox\"\n      aria-checked={checked}\n      aria-labelledby={labelledBy}\n      className=\"checklist-check\"\n      data-check=\"\"\n      onClick={onToggle}\n    >\n      <span className=\"checklist-check-visual\" aria-hidden=\"true\">\n        <span className=\"checklist-check-fill\" />\n        <svg className=\"checklist-check-mark\" viewBox=\"0 0 22 22\" fill=\"none\">\n          <path\n            pathLength={1}\n            d=\"M6.75 11.25 9.75 14.25 15.25 8.25\"\n            stroke=\"currentColor\"\n            strokeWidth={1.75}\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      </span>\n    </button>\n  );\n}\n\ninterface StepItemProps {\n  step: OnboardingStep;\n  baseId: string;\n  done: boolean;\n  settled: boolean;\n  expanded: boolean;\n  error: string | undefined;\n  onToggle: () => void;\n  onExpand: () => void;\n  onRun: () => Promise<void>;\n}\n\nfunction StepItem({\n  step,\n  baseId,\n  done,\n  settled,\n  expanded,\n  error,\n  onToggle,\n  onExpand,\n  onRun,\n}: StepItemProps) {\n  const titleId = `${baseId}-${step.id}-title`;\n  const panelId = `${baseId}-${step.id}-panel`;\n  // The message stays while its slot folds away.\n  const [lastError, setLastError] = useState(error);\n  if (error && error !== lastError) setLastError(error);\n  return (\n    <li\n      data-step={step.id}\n      data-done={done || undefined}\n      data-current={expanded || undefined}\n      data-open={settled ? undefined : \"\"}\n    >\n      <Collapse show={!settled}>\n        <div className=\"checklist-step-inner\">\n          <CheckButton checked={done} labelledBy={titleId} onToggle={onToggle} />\n          <div className=\"checklist-step-main\">\n            <button\n              type=\"button\"\n              className=\"checklist-step-title\"\n              data-title=\"\"\n              aria-expanded={expanded}\n              aria-controls={panelId}\n              onClick={onExpand}\n            >\n              <span id={titleId} className=\"checklist-title-text\">\n                {step.title}\n              </span>\n            </button>\n            <Collapse show={expanded}>\n              <div id={panelId} role=\"region\" aria-labelledby={titleId} className=\"checklist-panel-inner\">\n                {step.description ? <p className=\"checklist-description\">{step.description}</p> : null}\n                <Collapse show={Boolean(error)}>\n                  <p role=\"alert\" className=\"checklist-error\">\n                    {lastError}\n                  </p>\n                </Collapse>\n                {step.actionLabel ? (\n                  // The label stays put through the whole action: only the icon beside it changes.\n                  <ActionButton\n                    variant=\"primary\"\n                    size=\"sm\"\n                    className=\"mt-3\"\n                    data-primary=\"\"\n                    pendingLabel={step.actionLabel}\n                    successLabel={step.actionLabel}\n                    onAction={onRun}\n                  >\n                    {step.actionLabel}\n                  </ActionButton>\n                ) : null}\n              </div>\n            </Collapse>\n          </div>\n        </div>\n      </Collapse>\n    </li>\n  );\n}\n\nexport const OnboardingChecklist = forwardRef<HTMLElement, OnboardingChecklistProps>(\n  function OnboardingChecklist(\n    {\n      title,\n      doneTitle = \"You’re all set\",\n      steps,\n      defaultCompleted = [],\n      onCompletedChange,\n      defaultHidden = false,\n      onHiddenChange,\n      className,\n    },\n    ref,\n  ) {\n    const baseId = useId();\n    const [state, dispatch] = useReducer(\n      reducer,\n      { steps, completed: defaultCompleted, hidden: defaultHidden },\n      init,\n    );\n    const root = useRef<HTMLElement | null>(null);\n    const refs = useMemo(() => mergeRefs(ref, root), [ref]);\n    const timers = useRef(new Map<string, ReturnType<typeof setTimeout>>());\n    const focusRequest = useRef<\"next\" | { id: string } | null>(null);\n    const reportCompleted = useRef(onCompletedChange);\n    const reported = useRef(state.done);\n\n    useEffect(() => {\n      reportCompleted.current = onCompletedChange;\n    });\n    useEffect(() => {\n      if (reported.current === state.done) return;\n      reported.current = state.done;\n      reportCompleted.current?.(state.done);\n    }, [state.done]);\n    useEffect(() => {\n      const pending = timers.current;\n      return () => pending.forEach(clearTimeout);\n    }, []);\n    // Focus moves after the commit that opens its target: the next step's action, or the step reopened from the completed row.\n    useEffect(() => {\n      const request = focusRequest.current;\n      const node = root.current;\n      if (!request || !node) return;\n      focusRequest.current = null;\n      let target: HTMLElement | null;\n      if (request === \"next\") {\n        const next = state.expanded\n          ? node.querySelector<HTMLElement>(`[data-step=\"${state.expanded}\"][data-open]`)\n          : null;\n        target =\n          next?.querySelector<HTMLElement>(\"[data-primary]\") ??\n          next?.querySelector<HTMLElement>(\"[data-title]\") ??\n          node.querySelector<HTMLElement>(\"[data-group-toggle]\");\n      } else {\n        target = node.querySelector<HTMLElement>(`[data-step=\"${request.id}\"][data-open] [data-check]`);\n      }\n      target?.focus({ preventScroll: true });\n    });\n\n    function check(id: string) {\n      dispatch({ type: \"check\", id, steps });\n      if (timers.current.has(id)) return;\n      timers.current.set(\n        id,\n        setTimeout(() => {\n          timers.current.delete(id);\n          if (root.current?.querySelector(`[data-step=\"${id}\"]`)?.contains(document.activeElement))\n            focusRequest.current = \"next\";\n          dispatch({ type: \"settle\", id, steps });\n        }, SETTLE_MS),\n      );\n    }\n\n    function uncheck(id: string, fromGroup: boolean) {\n      clearTimeout(timers.current.get(id));\n      timers.current.delete(id);\n      if (fromGroup) focusRequest.current = { id };\n      dispatch({ type: \"uncheck\", id, steps });\n    }\n\n    async function run(step: OnboardingStep) {\n      if (!step.onAction || state.done.includes(step.id)) return;\n      dispatch({ type: \"start\", id: step.id, steps });\n      try {\n        await step.onAction();\n      } catch (error) {\n        dispatch({\n          type: \"fail\",\n          id: step.id,\n          message:\n            error instanceof Error && error.message ? error.message : \"That didn’t work. Try again.\",\n        });\n        // The button goes back to rest on a rejection.\n        throw error;\n      }\n      check(step.id);\n    }\n\n    function toggleHidden() {\n      dispatch({ type: \"hide\" });\n      onHiddenChange?.(!state.hidden);\n    }\n\n    /** Up and Down walk the step titles, Home and End jump to the first and last. */\n    function navigate(event: KeyboardEvent<HTMLUListElement>) {\n      const target = event.target as HTMLElement;\n      if (!target.matches(\"[data-title]\") || ![\"ArrowDown\", \"ArrowUp\", \"Home\", \"End\"].includes(event.key))\n        return;\n      const titles = Array.from(\n        event.currentTarget.querySelectorAll<HTMLElement>(\"li[data-open] [data-title]\"),\n      );\n      const index = titles.indexOf(target);\n      const next =\n        event.key === \"Home\"\n          ? 0\n          : event.key === \"End\"\n            ? titles.length - 1\n            : (index + (event.key === \"ArrowDown\" ? 1 : -1) + titles.length) % titles.length;\n      event.preventDefault();\n      titles[next]?.focus();\n    }\n\n    const total = steps.length;\n    const doneCount = state.done.length;\n    const allDone = total > 0 && doneCount === total;\n    const completed = steps.filter((step) => state.settled.includes(step.id));\n    const titleId = `${baseId}-title`;\n    const bodyId = `${baseId}-body`;\n    const groupId = `${baseId}-completed`;\n\n    return (\n      <section\n        ref={refs}\n        aria-labelledby={titleId}\n        data-slot=\"onboarding-checklist\"\n        data-complete={allDone || undefined}\n        data-hidden={state.hidden || undefined}\n        className={cn(\"checklist box-border font-sans\", className)}\n      >\n        <div className=\"checklist-header\">\n          <ProgressRing done={doneCount} total={total} />\n          <div className=\"checklist-heading\">\n            <h3 id={titleId} className=\"checklist-title\">\n              <span className=\"sr-only\">{allDone ? doneTitle : title}</span>\n              <SwapLabel text={allDone ? doneTitle : title} options={[title, doneTitle]} />\n            </h3>\n            <p className=\"checklist-count\">\n              <span className=\"sr-only\">\n                {doneCount} of {total} done\n              </span>\n              <span className=\"checklist-count-visual\" aria-hidden=\"true\">\n                <RollingNumber word={String(doneCount)} />\n                &nbsp;of {total} done\n              </span>\n            </p>\n          </div>\n          <button\n            type=\"button\"\n            className=\"checklist-hide\"\n            aria-expanded={!state.hidden}\n            aria-controls={bodyId}\n            onClick={toggleHidden}\n          >\n            <span className=\"checklist-hide-label\">\n              <SwapLabel text={state.hidden ? \"Show\" : \"Hide\"} options={[\"Hide\", \"Show\"]} />\n            </span>\n            <span className=\"sr-only\">{state.hidden ? \"Show\" : \"Hide\"} checklist</span>\n            <span className=\"checklist-chevron\" aria-hidden=\"true\" data-flipped={state.hidden || undefined}>\n              <Chevron />\n            </span>\n          </button>\n        </div>\n        <div id={bodyId} data-shown={state.hidden ? undefined : \"\"} className=\"checklist-collapse\">\n          <div>\n            <div className=\"checklist-body-inner\">\n              <ul\n                className=\"checklist-list\"\n                aria-label=\"Steps to do\"\n                aria-hidden={completed.length === total ? true : undefined}\n                onKeyDown={navigate}\n              >\n                {steps.map((step) => (\n                  <StepItem\n                    key={step.id}\n                    step={step}\n                    baseId={baseId}\n                    done={state.done.includes(step.id)}\n                    settled={state.settled.includes(step.id)}\n                    expanded={state.expanded === step.id}\n                    error={state.errors[step.id]}\n                    onToggle={() =>\n                      state.done.includes(step.id) ? uncheck(step.id, false) : check(step.id)\n                    }\n                    onExpand={() => dispatch({ type: \"expand\", id: step.id, steps })}\n                    onRun={() => run(step)}\n                  />\n                ))}\n              </ul>\n              <Collapse show={completed.length > 0}>\n                <button\n                  type=\"button\"\n                  className=\"checklist-group-toggle\"\n                  data-group-toggle=\"\"\n                  aria-expanded={state.groupOpen}\n                  aria-controls={groupId}\n                  onClick={() => dispatch({ type: \"group\" })}\n                >\n                  <span className=\"sr-only\">{completed.length} completed</span>\n                  <span className=\"checklist-count-visual\" aria-hidden=\"true\">\n                    <RollingNumber word={String(completed.length)} />\n                    &nbsp;completed\n                  </span>\n                  <span\n                    className=\"checklist-chevron\"\n                    aria-hidden=\"true\"\n                    data-flipped={state.groupOpen ? undefined : \"\"}\n                  >\n                    <Chevron />\n                  </span>\n                </button>\n                <Collapse show={state.groupOpen}>\n                  <div id={groupId}>\n                    <ul className=\"checklist-list\" aria-label=\"Completed steps\">\n                      {steps.map((step) => {\n                        const doneId = `${baseId}-${step.id}-done`;\n                        return (\n                          <li key={step.id} data-completed-step={step.id} data-done=\"\">\n                            <Collapse show={state.settled.includes(step.id)}>\n                              <div className=\"checklist-step-inner\">\n                                <CheckButton checked labelledBy={doneId} onToggle={() => uncheck(step.id, true)} />\n                                <span className=\"checklist-done-title\">\n                                  <span id={doneId} className=\"checklist-title-text\">\n                                    {step.title}\n                                  </span>\n                                </span>\n                              </div>\n                            </Collapse>\n                          </li>\n                        );\n                      })}\n                    </ul>\n                  </div>\n                </Collapse>\n              </Collapse>\n            </div>\n          </div>\n        </div>\n        <span className=\"sr-only\" role=\"status\">\n          {state.message}\n        </span>\n      </section>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/page-header/index.d.ts

@@ -0,0 +1,2 @@
+import { PageHeader, PageHeaderProps, pageHeaderActionsVariants, pageHeaderBackVariants, pageHeaderDescriptionVariants, pageHeaderMetaVariants, pageHeaderRowVariants, pageHeaderTitleVariants, pageHeaderVariants } from "./page-header.js";
+export { PageHeader, type PageHeaderProps, pageHeaderActionsVariants, pageHeaderBackVariants, pageHeaderDescriptionVariants, pageHeaderMetaVariants, pageHeaderRowVariants, pageHeaderTitleVariants, pageHeaderVariants };

package/dist/page-header/index.js

@@ -0,0 +1,2 @@
+import { PageHeader, pageHeaderActionsVariants, pageHeaderBackVariants, pageHeaderDescriptionVariants, pageHeaderMetaVariants, pageHeaderRowVariants, pageHeaderTitleVariants, pageHeaderVariants } from "./page-header.js";
+export { PageHeader, pageHeaderActionsVariants, pageHeaderBackVariants, pageHeaderDescriptionVariants, pageHeaderMetaVariants, pageHeaderRowVariants, pageHeaderTitleVariants, pageHeaderVariants };

package/dist/page-header/page-header.d.ts

@@ -0,0 +1,75 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/page-header/page-header.d.ts
+/**
+ * PageHeader: the top of a page. One title, an optional line saying what the
+ * page is for, the page's own actions, a short piece of metadata and an
+ * optional way back.
+ *
+ * Presentational, so there is no React Aria base. It exists because a page
+ * title is the one element every screen has, and without a shared component
+ * each screen picks its own size, weight, spacing and action placement, so the
+ * title moves as a person moves between pages.
+ *
+ * The title renders the page's single `<h1>`. A page has one, and putting it
+ * here means a consumer cannot render two by accident.
+ *
+ * Every string in the cva blocks below is a STATIC literal. Tailwind scans
+ * source text, so a class assembled at runtime is invisible to it and would
+ * simply never be emitted.
+ */
+export declare const pageHeaderVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/**
+ * Title block and actions share one row. `items-start` keeps the actions level
+ * with the title when a description wraps under it; `flex-wrap` moves the
+ * actions below the title on a narrow screen instead of squeezing it.
+ */
+export declare const pageHeaderRowVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const pageHeaderTitleVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const pageHeaderMetaVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/**
+ * Capped at the md breakpoint (48rem), a readable measure for a sentence or
+ * two. The scale defines no container size between `max` and nothing, and a
+ * bracket length is rejected by check:hardcoding, so the token is referenced.
+ */
+export declare const pageHeaderDescriptionVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const pageHeaderActionsVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const pageHeaderBackVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/**
+ * The header at the top of a page.
+ *
+ * @example
+ * <PageHeader
+ *   title="Projects"
+ *   description="Everything your team is working on."
+ *   meta="updated 14 Oct 2026"
+ *   actions={<Button>New project</Button>}
+ * />
+ */
+export interface PageHeaderProps extends Omit<ComponentPropsWithoutRef<"header">, "title"> {
+  /** The page's title. Rendered as the page's single `<h1>`. */
+  title: ReactNode;
+  /**
+   * One or two sentences under the title saying what the page is for.
+   * Muted, and capped at a readable measure.
+   */
+  description?: ReactNode;
+  /**
+   * The page's primary actions, right-aligned on the title row. They wrap
+   * below the title on a narrow screen. Pass buttons or links; the header
+   * spaces them and does not style them.
+   */
+  actions?: ReactNode;
+  /**
+   * A short piece of context inline after the title, on the same baseline:
+   * a date the figures are as of, a status chip, a count.
+   */
+  meta?: ReactNode;
+  /**
+   * A slot above the title for a way back, on a detail page. Supply the link
+   * yourself so it uses your router; the header sizes and colours the slot.
+   */
+  back?: ReactNode;
+}
+export declare const PageHeader: import("react").ForwardRefExoticComponent<PageHeaderProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//# sourceMappingURL=page-header.d.ts.map

package/dist/page-header/page-header.js

@@ -0,0 +1,83 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/page-header/page-header.tsx
+/**
+* PageHeader: the top of a page. One title, an optional line saying what the
+* page is for, the page's own actions, a short piece of metadata and an
+* optional way back.
+*
+* Presentational, so there is no React Aria base. It exists because a page
+* title is the one element every screen has, and without a shared component
+* each screen picks its own size, weight, spacing and action placement, so the
+* title moves as a person moves between pages.
+*
+* The title renders the page's single `<h1>`. A page has one, and putting it
+* here means a consumer cannot render two by accident.
+*
+* Every string in the cva blocks below is a STATIC literal. Tailwind scans
+* source text, so a class assembled at runtime is invisible to it and would
+* simply never be emitted.
+*/
+const pageHeaderVariants = cva(["mb-6 block", "box-border font-sans text-foreground"]);
+/**
+* Title block and actions share one row. `items-start` keeps the actions level
+* with the title when a description wraps under it; `flex-wrap` moves the
+* actions below the title on a narrow screen instead of squeezing it.
+*/
+const pageHeaderRowVariants = cva("flex flex-wrap items-start justify-between gap-3");
+const pageHeaderTitleVariants = cva(["font-display text-h3 leading-(--leading-snug) font-semibold", "m-0"]);
+const pageHeaderMetaVariants = cva("text-xs leading-(--leading-normal) text-muted-foreground");
+/**
+* Capped at the md breakpoint (48rem), a readable measure for a sentence or
+* two. The scale defines no container size between `max` and nothing, and a
+* bracket length is rejected by check:hardcoding, so the token is referenced.
+*/
+const pageHeaderDescriptionVariants = cva(["mt-1 mb-0 max-w-(--breakpoint-md)", "text-sm leading-(--leading-normal) text-muted-foreground"]);
+const pageHeaderActionsVariants = cva("flex shrink-0 flex-wrap items-center gap-2");
+const pageHeaderBackVariants = cva("mb-2 text-xs leading-(--leading-normal) text-muted-foreground");
+const PageHeader = forwardRef(function PageHeader({ className, title, description, actions, meta, back, ...props }, ref) {
+	return /* @__PURE__ */ jsxs("header", {
+		ref,
+		...props,
+		"data-slot": "page-header",
+		className: cn(pageHeaderVariants(), className),
+		children: [back === void 0 ? null : /* @__PURE__ */ jsx("div", {
+			"data-slot": "page-header-back",
+			className: pageHeaderBackVariants(),
+			children: back
+		}), /* @__PURE__ */ jsxs("div", {
+			"data-slot": "page-header-row",
+			className: pageHeaderRowVariants(),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 grow basis-64",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap items-baseline gap-x-3 gap-y-1",
+					children: [/* @__PURE__ */ jsx("h1", {
+						"data-slot": "page-header-title",
+						className: pageHeaderTitleVariants(),
+						children: title
+					}), meta === void 0 ? null : /* @__PURE__ */ jsx("div", {
+						"data-slot": "page-header-meta",
+						className: pageHeaderMetaVariants(),
+						children: meta
+					})]
+				}), description === void 0 ? null : /* @__PURE__ */ jsx("p", {
+					"data-slot": "page-header-description",
+					className: pageHeaderDescriptionVariants(),
+					children: description
+				})]
+			}), actions === void 0 ? null : /* @__PURE__ */ jsx("div", {
+				"data-slot": "page-header-actions",
+				className: pageHeaderActionsVariants(),
+				children: actions
+			})]
+		})]
+	});
+});
+//#endregion
+export { PageHeader, pageHeaderActionsVariants, pageHeaderBackVariants, pageHeaderDescriptionVariants, pageHeaderMetaVariants, pageHeaderRowVariants, pageHeaderTitleVariants, pageHeaderVariants };
+
+//# sourceMappingURL=page-header.js.map

package/dist/page-header/page-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.js","names":[],"sources":["../../src/page-header/page-header.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * PageHeader: the top of a page. One title, an optional line saying what the\n * page is for, the page's own actions, a short piece of metadata and an\n * optional way back.\n *\n * Presentational, so there is no React Aria base. It exists because a page\n * title is the one element every screen has, and without a shared component\n * each screen picks its own size, weight, spacing and action placement, so the\n * title moves as a person moves between pages.\n *\n * The title renders the page's single `<h1>`. A page has one, and putting it\n * here means a consumer cannot render two by accident.\n *\n * Every string in the cva blocks below is a STATIC literal. Tailwind scans\n * source text, so a class assembled at runtime is invisible to it and would\n * simply never be emitted.\n */\nexport const pageHeaderVariants = cva([\n  \"mb-6 block\",\n  // box-border and font-sans are not boilerplate: the reset in\n  // @seekalfred/styles is opt-in, so a consumer may load none, and an\n  // unstyled document renders text in a serif.\n  \"box-border font-sans text-foreground\",\n]);\n\n/**\n * Title block and actions share one row. `items-start` keeps the actions level\n * with the title when a description wraps under it; `flex-wrap` moves the\n * actions below the title on a narrow screen instead of squeezing it.\n */\nexport const pageHeaderRowVariants = cva(\"flex flex-wrap items-start justify-between gap-3\");\n\nexport const pageHeaderTitleVariants = cva([\n  // leading-* AFTER text-*: tailwind-merge treats a later text-* as owning\n  // line-height and silently strips a leading-* that precedes it.\n  \"font-display text-h3 leading-(--leading-snug) font-semibold\",\n  // The user-agent <h1> ships a 0.67em block margin and font-size 2em.\n  \"m-0\",\n]);\n\nexport const pageHeaderMetaVariants = cva(\n  \"text-xs leading-(--leading-normal) text-muted-foreground\",\n);\n\n/**\n * Capped at the md breakpoint (48rem), a readable measure for a sentence or\n * two. The scale defines no container size between `max` and nothing, and a\n * bracket length is rejected by check:hardcoding, so the token is referenced.\n */\nexport const pageHeaderDescriptionVariants = cva([\n  \"mt-1 mb-0 max-w-(--breakpoint-md)\",\n  \"text-sm leading-(--leading-normal) text-muted-foreground\",\n]);\n\nexport const pageHeaderActionsVariants = cva(\"flex shrink-0 flex-wrap items-center gap-2\");\n\nexport const pageHeaderBackVariants = cva(\n  \"mb-2 text-xs leading-(--leading-normal) text-muted-foreground\",\n);\n\n/**\n * The header at the top of a page.\n *\n * @example\n * <PageHeader\n *   title=\"Projects\"\n *   description=\"Everything your team is working on.\"\n *   meta=\"updated 14 Oct 2026\"\n *   actions={<Button>New project</Button>}\n * />\n */\nexport interface PageHeaderProps\n  // The native `title` attribute is omitted so this component can use the\n  // name for its heading. A tooltip on a page header is not keyboard\n  // reachable, and silently shadowing it with a ReactNode would be a type\n  // error waiting for the first consumer who tried both.\n  extends Omit<ComponentPropsWithoutRef<\"header\">, \"title\"> {\n  /** The page's title. Rendered as the page's single `<h1>`. */\n  title: ReactNode;\n  /**\n   * One or two sentences under the title saying what the page is for.\n   * Muted, and capped at a readable measure.\n   */\n  description?: ReactNode;\n  /**\n   * The page's primary actions, right-aligned on the title row. They wrap\n   * below the title on a narrow screen. Pass buttons or links; the header\n   * spaces them and does not style them.\n   */\n  actions?: ReactNode;\n  /**\n   * A short piece of context inline after the title, on the same baseline:\n   * a date the figures are as of, a status chip, a count.\n   */\n  meta?: ReactNode;\n  /**\n   * A slot above the title for a way back, on a detail page. Supply the link\n   * yourself so it uses your router; the header sizes and colours the slot.\n   */\n  back?: ReactNode;\n}\n\nexport const PageHeader = forwardRef<HTMLElement, PageHeaderProps>(function PageHeader(\n  { className, title, description, actions, meta, back, ...props },\n  ref,\n) {\n  return (\n    <header\n      ref={ref}\n      {...props}\n      data-slot=\"page-header\"\n      className={cn(pageHeaderVariants(), className)}\n    >\n      {back === undefined ? null : (\n        <div data-slot=\"page-header-back\" className={pageHeaderBackVariants()}>\n          {back}\n        </div>\n      )}\n      <div data-slot=\"page-header-row\" className={pageHeaderRowVariants()}>\n        {/*\n         * grow from a 16rem basis, not flex-1. flex-1 is a 0% basis, so the\n         * row never wraps: the actions keep their width and the title is\n         * crushed into a one-word column beside them on a phone. A real basis\n         * is the width the title needs before the actions move below it.\n         */}\n        <div className=\"min-w-0 grow basis-64\">\n          <div className=\"flex flex-wrap items-baseline gap-x-3 gap-y-1\">\n            <h1 data-slot=\"page-header-title\" className={pageHeaderTitleVariants()}>\n              {title}\n            </h1>\n            {meta === undefined ? null : (\n              <div data-slot=\"page-header-meta\" className={pageHeaderMetaVariants()}>\n                {meta}\n              </div>\n            )}\n          </div>\n          {description === undefined ? null : (\n            <p data-slot=\"page-header-description\" className={pageHeaderDescriptionVariants()}>\n              {description}\n            </p>\n          )}\n        </div>\n        {actions === undefined ? null : (\n          <div data-slot=\"page-header-actions\" className={pageHeaderActionsVariants()}>\n            {actions}\n          </div>\n        )}\n      </div>\n    </header>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAa,qBAAqB,IAAI,CACpC,cAIA,sCACF,CAAC;;;;;;AAOD,MAAa,wBAAwB,IAAI,kDAAkD;AAE3F,MAAa,0BAA0B,IAAI,CAGzC,+DAEA,KACF,CAAC;AAED,MAAa,yBAAyB,IACpC,0DACF;;;;;;AAOA,MAAa,gCAAgC,IAAI,CAC/C,qCACA,0DACF,CAAC;AAED,MAAa,4BAA4B,IAAI,4CAA4C;AAEzF,MAAa,yBAAyB,IACpC,+DACF;AA4CA,MAAa,aAAa,WAAyC,SAAS,WAC1E,EAAE,WAAW,OAAO,aAAa,SAAS,MAAM,MAAM,GAAG,SACzD,KACA;CACA,OACE,qBAAC,UAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,mBAAmB,GAAG,SAAS;EAJ/C,UAAA,CAMG,SAAS,KAAA,IAAY,OACpB,oBAAC,OAAD;GAAK,aAAU;GAAmB,WAAW,uBAAuB;GACjE,UAAA;EACE,CAAA,GAEP,qBAAC,OAAD;GAAK,aAAU;GAAkB,WAAW,sBAAsB;GAAlE,UAAA,CAOE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,oBAAC,MAAD;MAAI,aAAU;MAAoB,WAAW,wBAAwB;MAClE,UAAA;KACC,CAAA,GACH,SAAS,KAAA,IAAY,OACpB,oBAAC,OAAD;MAAK,aAAU;MAAmB,WAAW,uBAAuB;MACjE,UAAA;KACE,CAAA,CAEJ;IACJ,CAAA,GAAA,gBAAgB,KAAA,IAAY,OAC3B,oBAAC,KAAD;KAAG,aAAU;KAA0B,WAAW,8BAA8B;KAC7E,UAAA;IACA,CAAA,CAEF;GACJ,CAAA,GAAA,YAAY,KAAA,IAAY,OACvB,oBAAC,OAAD;IAAK,aAAU;IAAsB,WAAW,0BAA0B;IACvE,UAAA;GACE,CAAA,CAEJ;EACC,CAAA,CAAA;;AAEZ,CAAC"}

package/dist/password-field/index.d.ts

@@ -0,0 +1,2 @@
+import { PasswordField, PasswordFieldMessages, PasswordFieldProps, defaultPasswordFieldMessages } from "./password-field.js";
+export { PasswordField, type PasswordFieldMessages, type PasswordFieldProps, defaultPasswordFieldMessages };

package/dist/password-field/index.js

@@ -0,0 +1,2 @@
+import { PasswordField, defaultPasswordFieldMessages } from "./password-field.js";
+export { PasswordField, defaultPasswordFieldMessages };

package/dist/password-field/password-field.d.ts

@@ -0,0 +1,37 @@
+import { InputProps } from "react-aria-components";
+//#region src/password-field/password-field.d.ts
+/** The toggle's accessible names. Both have English defaults; pass the ones you translate. */
+export interface PasswordFieldMessages {
+  showPassword: string;
+  hidePassword: string;
+}
+export declare const defaultPasswordFieldMessages: PasswordFieldMessages;
+export interface PasswordFieldProps extends Omit<InputProps, "className" | "style" | "size" | "type"> {
+  /** Extra classes for the input. Merged last, so they win conflicts with ours. */
+  className?: string;
+  /** The visible label, tied to the input with `htmlFor`. */
+  label: string;
+  /**
+   * Helper text under the field, named by `aria-describedby`. A string, because
+   * the copy is animated word by word: it opens on a spring when it appears
+   * after mount and changed words rise in. Nothing animates on first render.
+   */
+  description?: string;
+  /** Translated or reworded toggle names. */
+  messages?: Partial<PasswordFieldMessages>;
+}
+/**
+ * A password input with a show and hide toggle. Switching resolves the text in
+ * place from a soft blur, and the eye is one outline that a slash draws across.
+ * Native input props apply to the input; `disabled` also disables the toggle,
+ * and `aria-invalid` gives the box its invalid border.
+ *
+ * The toggle's name changes with the state and it is also `aria-pressed`, so a
+ * screen reader may announce both ("Hide password, pressed").
+ *
+ * @example
+ * <PasswordField label="Password" description="At least eight characters." />
+ */
+export declare const PasswordField: import("react").ForwardRefExoticComponent<PasswordFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+//#endregion
+//# sourceMappingURL=password-field.d.ts.map

package/dist/password-field/password-field.js

@@ -0,0 +1,101 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { fieldSurfaceVariants } from "../lib/field-surface.js";
+import { FieldShell, useFieldWiring } from "../lib/field-shell.js";
+import { EyeMorph } from "../lib/eye-morph.js";
+import { forwardRef, useState } from "react";
+import { Button, Group, Input } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/password-field/password-field.tsx
+const defaultPasswordFieldMessages = {
+	showPassword: "Show password",
+	hidePassword: "Hide password"
+};
+/**
+* The field's box. A React Aria `Group` rather than the input, because the
+* toggle sits inside the same border: it carries the shared field surface (the
+* 160ms border transition, the darker border on hover and focus, the muted
+* disabled look, the invalid border) and the input inside is borderless.
+*
+* `data-focus-within` darkens the border too. A Group reports focus-visible
+* from the input modality, so a mouse click into the input, or onto the toggle,
+* would otherwise leave the border pale; a plain Input is different because
+* React Aria treats a text input as always keyboard-focused.
+*/
+const shellClass = cn(fieldSurfaceVariants(), "flex items-center h-(--density-control-h-md) ps-(--density-control-pad-md) field-toggle-shell [&:where([data-focus-within])]:border-border-strong");
+/** The input inside the box: no border, no fill, no outline of its own. */
+const inputClass = "min-w-0 flex-1 border-0 bg-transparent p-0 font-sans text-base text-foreground outline-none placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground data-[disabled]:cursor-not-allowed motion-safe:data-[reveal=shown]:animate-field-reveal-shown motion-safe:data-[reveal=hidden]:animate-field-reveal-hidden";
+const toggleClass = "field-toggle-button grid size-7.5 flex-none cursor-pointer place-items-center rounded-control border-0 bg-transparent p-0 text-muted-foreground outline-none data-[hovered]:bg-muted data-[hovered]:text-foreground aria-pressed:text-foreground data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width) data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring) data-[disabled]:cursor-not-allowed";
+/**
+* A password input with a show and hide toggle. Switching resolves the text in
+* place from a soft blur, and the eye is one outline that a slash draws across.
+* Native input props apply to the input; `disabled` also disables the toggle,
+* and `aria-invalid` gives the box its invalid border.
+*
+* The toggle's name changes with the state and it is also `aria-pressed`, so a
+* screen reader may announce both ("Hide password, pressed").
+*
+* @example
+* <PasswordField label="Password" description="At least eight characters." />
+*/
+const PasswordField = forwardRef(function PasswordField({ label, description, messages: messagesProp, className, ...props }, ref) {
+	const messages = {
+		...defaultPasswordFieldMessages,
+		...messagesProp
+	};
+	const [visible, setVisible] = useState(false);
+	const [toggled, setToggled] = useState(false);
+	const field = useFieldWiring({
+		enabled: true,
+		id: props.id,
+		describedBy: props["aria-describedby"],
+		invalid: props["aria-invalid"],
+		description,
+		error: void 0
+	});
+	const disabled = Boolean(props.disabled);
+	const ariaInvalid = props["aria-invalid"];
+	const control = /* @__PURE__ */ jsxs(Group, {
+		role: "presentation",
+		isDisabled: disabled,
+		isInvalid: ariaInvalid !== void 0 && ariaInvalid !== false && ariaInvalid !== "false",
+		"data-slot": "password-field-shell",
+		className: shellClass,
+		children: [/* @__PURE__ */ jsx(Input, {
+			ref,
+			...props,
+			...field.controlProps,
+			type: visible ? "text" : "password",
+			"data-slot": "password-field",
+			"data-reveal": toggled ? visible ? "shown" : "hidden" : void 0,
+			className: cn(inputClass, className)
+		}), /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			isDisabled: disabled,
+			"aria-label": visible ? messages.hidePassword : messages.showPassword,
+			"aria-pressed": visible,
+			onPress: () => {
+				setVisible((current) => !current);
+				setToggled(true);
+			},
+			className: toggleClass,
+			children: /* @__PURE__ */ jsx(EyeMorph, { slashed: visible })
+		})]
+	});
+	if (!field.active) return control;
+	return /* @__PURE__ */ jsx(FieldShell, {
+		label,
+		controlId: field.controlId,
+		description,
+		hintId: field.hintId,
+		error: void 0,
+		errorId: void 0,
+		wordExit: "sharp",
+		numbers: false,
+		children: control
+	});
+});
+//#endregion
+export { PasswordField, defaultPasswordFieldMessages };
+
+//# sourceMappingURL=password-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"password-field.js","names":["AriaGroup","AriaInput","AriaButton"],"sources":["../../src/password-field/password-field.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useState } from \"react\";\nimport {\n  Button as AriaButton,\n  Group as AriaGroup,\n  Input as AriaInput,\n  type InputProps as AriaInputProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { EyeMorph } from \"../lib/eye-morph.js\";\nimport { FieldShell, useFieldWiring } from \"../lib/field-shell.js\";\nimport { fieldSurfaceVariants } from \"../lib/field-surface.js\";\n\n/** The toggle's accessible names. Both have English defaults; pass the ones you translate. */\nexport interface PasswordFieldMessages {\n  showPassword: string;\n  hidePassword: string;\n}\n\nexport const defaultPasswordFieldMessages: PasswordFieldMessages = {\n  showPassword: \"Show password\",\n  hidePassword: \"Hide password\",\n};\n\n/**\n * The field's box. A React Aria `Group` rather than the input, because the\n * toggle sits inside the same border: it carries the shared field surface (the\n * 160ms border transition, the darker border on hover and focus, the muted\n * disabled look, the invalid border) and the input inside is borderless.\n *\n * `data-focus-within` darkens the border too. A Group reports focus-visible\n * from the input modality, so a mouse click into the input, or onto the toggle,\n * would otherwise leave the border pale; a plain Input is different because\n * React Aria treats a text input as always keyboard-focused.\n */\nconst shellClass = cn(\n  fieldSurfaceVariants(),\n  \"flex items-center h-(--density-control-h-md) ps-(--density-control-pad-md) field-toggle-shell [&:where([data-focus-within])]:border-border-strong\",\n);\n\n/** The input inside the box: no border, no fill, no outline of its own. */\nconst inputClass =\n  \"min-w-0 flex-1 border-0 bg-transparent p-0 font-sans text-base text-foreground outline-none placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground data-[disabled]:cursor-not-allowed motion-safe:data-[reveal=shown]:animate-field-reveal-shown motion-safe:data-[reveal=hidden]:animate-field-reveal-hidden\";\n\nconst toggleClass =\n  \"field-toggle-button grid size-7.5 flex-none cursor-pointer place-items-center rounded-control border-0 bg-transparent p-0 text-muted-foreground outline-none data-[hovered]:bg-muted data-[hovered]:text-foreground aria-pressed:text-foreground data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width) data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring) data-[disabled]:cursor-not-allowed\";\n\nexport interface PasswordFieldProps extends Omit<\n  AriaInputProps,\n  \"className\" | \"style\" | \"size\" | \"type\"\n> {\n  /** Extra classes for the input. Merged last, so they win conflicts with ours. */\n  className?: string;\n  /** The visible label, tied to the input with `htmlFor`. */\n  label: string;\n  /**\n   * Helper text under the field, named by `aria-describedby`. A string, because\n   * the copy is animated word by word: it opens on a spring when it appears\n   * after mount and changed words rise in. Nothing animates on first render.\n   */\n  description?: string;\n  /** Translated or reworded toggle names. */\n  messages?: Partial<PasswordFieldMessages>;\n}\n\n/**\n * A password input with a show and hide toggle. Switching resolves the text in\n * place from a soft blur, and the eye is one outline that a slash draws across.\n * Native input props apply to the input; `disabled` also disables the toggle,\n * and `aria-invalid` gives the box its invalid border.\n *\n * The toggle's name changes with the state and it is also `aria-pressed`, so a\n * screen reader may announce both (\"Hide password, pressed\").\n *\n * @example\n * <PasswordField label=\"Password\" description=\"At least eight characters.\" />\n */\nexport const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(\n  function PasswordField({ label, description, messages: messagesProp, className, ...props }, ref) {\n    const messages = { ...defaultPasswordFieldMessages, ...messagesProp };\n    const [visible, setVisible] = useState(false);\n    // data-reveal only appears after the first toggle, so the animation runs on each change but never on mount.\n    const [toggled, setToggled] = useState(false);\n    const field = useFieldWiring({\n      enabled: true,\n      id: props.id,\n      describedBy: props[\"aria-describedby\"],\n      invalid: props[\"aria-invalid\"],\n      description,\n      error: undefined,\n    });\n    const disabled = Boolean(props.disabled);\n    const ariaInvalid = props[\"aria-invalid\"];\n    const invalid = ariaInvalid !== undefined && ariaInvalid !== false && ariaInvalid !== \"false\";\n\n    const control = (\n      <AriaGroup\n        role=\"presentation\"\n        isDisabled={disabled}\n        isInvalid={invalid}\n        data-slot=\"password-field-shell\"\n        className={shellClass}\n      >\n        <AriaInput\n          ref={ref}\n          {...props}\n          {...field.controlProps}\n          type={visible ? \"text\" : \"password\"}\n          data-slot=\"password-field\"\n          data-reveal={toggled ? (visible ? \"shown\" : \"hidden\") : undefined}\n          className={cn(inputClass, className)}\n        />\n        <AriaButton\n          type=\"button\"\n          isDisabled={disabled}\n          aria-label={visible ? messages.hidePassword : messages.showPassword}\n          aria-pressed={visible}\n          onPress={() => {\n            setVisible((current) => !current);\n            setToggled(true);\n          }}\n          className={toggleClass}\n        >\n          <EyeMorph slashed={visible} />\n        </AriaButton>\n      </AriaGroup>\n    );\n\n    if (!field.active) return control;\n    return (\n      <FieldShell\n        label={label}\n        controlId={field.controlId}\n        description={description}\n        hintId={field.hintId}\n        error={undefined}\n        errorId={undefined}\n        wordExit=\"sharp\"\n        numbers={false}\n      >\n        {control}\n      </FieldShell>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;AAqBA,MAAa,+BAAsD;CACjE,cAAc;CACd,cAAc;AAChB;;;;;;;;;;;;AAaA,MAAM,aAAa,GACjB,qBAAqB,GACrB,mJACF;;AAGA,MAAM,aACJ;AAEF,MAAM,cACJ;;;;;;;;;;;;;AAgCF,MAAa,gBAAgB,WAC3B,SAAS,cAAc,EAAE,OAAO,aAAa,UAAU,cAAc,WAAW,GAAG,SAAS,KAAK;CAC/F,MAAM,WAAW;EAAE,GAAG;EAA8B,GAAG;CAAa;CACpE,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,QAAQ,eAAe;EAC3B,SAAS;EACT,IAAI,MAAM;EACV,aAAa,MAAM;EACnB,SAAS,MAAM;EACf;EACA,OAAO,KAAA;CACT,CAAC;CACD,MAAM,WAAW,QAAQ,MAAM,QAAQ;CACvC,MAAM,cAAc,MAAM;CAG1B,MAAM,UACJ,qBAACA,OAAD;EACE,MAAK;EACL,YAAY;EACZ,WANY,gBAAgB,KAAA,KAAa,gBAAgB,SAAS,gBAAgB;EAOlF,aAAU;EACV,WAAW;EALb,UAAA,CAOE,oBAACC,OAAD;GACO;GACL,GAAI;GACJ,GAAI,MAAM;GACV,MAAM,UAAU,SAAS;GACzB,aAAU;GACV,eAAa,UAAW,UAAU,UAAU,WAAY,KAAA;GACxD,WAAW,GAAG,YAAY,SAAS;EACpC,CAAA,GACD,oBAACC,QAAD;GACE,MAAK;GACL,YAAY;GACZ,cAAY,UAAU,SAAS,eAAe,SAAS;GACvD,gBAAc;GACd,eAAe;IACb,YAAY,YAAY,CAAC,OAAO;IAChC,WAAW,IAAI;GACjB;GACA,WAAW;GAEX,UAAA,oBAAC,UAAD,EAAU,SAAS,QAAU,CAAA;EACnB,CAAA,CACH;;CAGb,IAAI,CAAC,MAAM,QAAQ,OAAO;CAC1B,OACE,oBAAC,YAAD;EACS;EACP,WAAW,MAAM;EACJ;EACb,QAAQ,MAAM;EACd,OAAO,KAAA;EACP,SAAS,KAAA;EACT,UAAS;EACT,SAAS;EAER,UAAA;CACS,CAAA;AAEhB,CACF"}

package/dist/password-strength/index.d.ts

@@ -0,0 +1,2 @@
+import { EstimateStrengthOptions, PasswordRule, PasswordRuleLabels, PasswordRuleOptions, PasswordStrength, PasswordStrengthLevels, PasswordStrengthMessages, PasswordStrengthMessagesInput, PasswordStrengthProps, PasswordStrengthResult, countCodePoints, createPasswordRules, defaultPasswordRules, defaultPasswordStrengthMessages, estimateStrength } from "./password-strength.js";
+export { type EstimateStrengthOptions, type PasswordRule, type PasswordRuleLabels, type PasswordRuleOptions, PasswordStrength, type PasswordStrengthLevels, type PasswordStrengthMessages, type PasswordStrengthMessagesInput, type PasswordStrengthProps, type PasswordStrengthResult, countCodePoints, createPasswordRules, defaultPasswordRules, defaultPasswordStrengthMessages, estimateStrength };

package/dist/password-strength/index.js

@@ -0,0 +1,2 @@
+import { PasswordStrength, countCodePoints, createPasswordRules, defaultPasswordRules, defaultPasswordStrengthMessages, estimateStrength } from "./password-strength.js";
+export { PasswordStrength, countCodePoints, createPasswordRules, defaultPasswordRules, defaultPasswordStrengthMessages, estimateStrength };

package/dist/password-strength/password-strength.d.ts

@@ -0,0 +1,127 @@
+import { InputProps } from "react-aria-components";
+//#region src/password-strength/password-strength.d.ts
+export interface PasswordRule {
+  id: string;
+  label: string;
+  test: (password: string) => boolean;
+  /** Characters still missing. Shown as a rolling count beside the rule while it is unmet. */
+  remaining?: (password: string) => number;
+}
+export interface PasswordStrengthResult {
+  level: 0 | 1 | 2 | 3 | 4;
+  label: string;
+  met: string[];
+  /** True while the password is shorter than the short length, so the meter holds at its first step. */
+  short?: boolean;
+}
+/** The strength words, one per meter step. Override them to translate the meter. */
+export interface PasswordStrengthLevels {
+  tooShort: string;
+  weak: string;
+  fair: string;
+  good: string;
+  strong: string;
+}
+/** Every user-facing string in PasswordStrength. All have English defaults; pass only the ones you change. */
+export interface PasswordStrengthMessages {
+  levels: PasswordStrengthLevels;
+  /** Name of the show password toggle. It is a pressed toggle (aria-pressed), so the name stays the same in both states. */
+  showPassword: string;
+  /** Accessible name of the strength meter. */
+  meterLabel: string;
+  /** Meter value text while the field is empty. */
+  noPassword: string;
+  /** Accessible name of the requirements list. */
+  rulesLabel: string;
+  /** Read after a rule's label for screen readers, including any leading punctuation. */
+  ruleMet: string;
+  ruleNotMet: string;
+  /** Words around the rolling count beside an unmet rule, as in "4 more". */
+  remainingPrefix: string;
+  remainingSuffix: string;
+  /** The polite live-region summary read after each change. */
+  summary: (result: {
+    label: string;
+    met: number;
+    total: number;
+  }) => string;
+}
+export declare const defaultPasswordStrengthMessages: PasswordStrengthMessages;
+/** Partial messages, with partial strength words, for the `messages` prop. */
+export type PasswordStrengthMessagesInput = Partial<Omit<PasswordStrengthMessages, "levels">> & {
+  levels?: Partial<PasswordStrengthLevels>;
+};
+/**
+ * A new-password field that shows how strong the password is while it is typed:
+ * four segments fill and change tone, each rule checks off with a drawn tick, and
+ * the strength word swaps in place. Use it when creating or changing a password;
+ * use `PasswordField` for sign in. Scoring happens on the device, nothing is sent
+ * anywhere.
+ *
+ * Native input props apply to the input (`className` too); `disabled` also
+ * disables the toggle, and `aria-invalid` gives the box its invalid border.
+ *
+ * @example
+ * <PasswordStrength label="New password" onValueChange={(value, strength) => save(value, strength.level)} />
+ */
+export interface PasswordStrengthProps extends Omit<InputProps, "className" | "style" | "size" | "type" | "value" | "defaultValue" | "children"> {
+  /** Extra classes for the input. Merged last, so they win conflicts with ours. */
+  className?: string;
+  /** The visible label, tied to the input with `htmlFor`. */
+  label: string;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string, strength: PasswordStrengthResult) => void;
+  /** Rules to check. Strength is the share of rules met, spread over four steps. */
+  rules?: PasswordRule[];
+  /**
+   * Error copy tied to the field. It is an alert, opens on a spring and swaps as a
+   * whole when it changes; the field shakes once each time a new error appears.
+   */
+  error?: string;
+  revealed?: boolean;
+  onRevealedChange?: (revealed: boolean) => void;
+  /** Translated or reworded copy. Every string has an English default; see PasswordStrengthMessages. */
+  messages?: PasswordStrengthMessagesInput;
+  /** Below this many characters the meter holds at its first step and reads "Too short". Defaults to 8. */
+  shortLength?: number;
+  /** How characters are counted for shortLength. Defaults to code points, so an emoji counts once; pass `password => password.length` to count UTF-16 units like a server might. */
+  countCharacters?: (password: string) => number;
+}
+/** Counts code points, so an emoji or other astral character counts as one. */
+export declare const countCodePoints: (password: string) => number;
+/** Labels for the built-in rules. `length` receives the minimum length. */
+export interface PasswordRuleLabels {
+  length: (minLength: number) => string;
+  case: string;
+  number: string;
+  symbol: string;
+}
+export interface PasswordRuleOptions {
+  /** Characters the length rule asks for. Defaults to 12. */
+  minLength?: number;
+  /** Translated or reworded rule labels. */
+  labels?: Partial<PasswordRuleLabels>;
+  /** How the length rule counts characters. Defaults to code points. */
+  countCharacters?: (password: string) => number;
+}
+/** The built-in rules (length, mixed case, number, symbol) with your own minimum length, labels and character count. */
+export declare function createPasswordRules({ minLength, labels, countCharacters }?: PasswordRuleOptions): PasswordRule[];
+export declare const defaultPasswordRules: PasswordRule[];
+export interface EstimateStrengthOptions {
+  /** Below this many characters a password stays at the first step, however varied it is. Defaults to 8. */
+  shortLength?: number;
+  /** Strength words for the result's label. */
+  levels?: Partial<PasswordStrengthLevels>;
+  /** How characters are counted for shortLength. Defaults to code points. */
+  countCharacters?: (password: string) => number;
+}
+/** Scores a password on the device: one step per share of rules met, capped at the first step while it is shorter than the short length (8 by default). */
+export declare function estimateStrength(password: string, rules?: PasswordRule[], { shortLength, levels, countCharacters }?: EstimateStrengthOptions): PasswordStrengthResult;
+/**
+ * A new-password input with a strength meter and a checklist (see
+ * {@link PasswordStrengthProps}).
+ */
+export declare const PasswordStrength: import("react").ForwardRefExoticComponent<PasswordStrengthProps & import("react").RefAttributes<HTMLInputElement>>;
+//#endregion
+//# sourceMappingURL=password-strength.d.ts.map