@eifi1/ui-kit 0.17.0 → 0.18.0

package/dist/components/share-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/share-card.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Trash2, UserPlus, UsersRound } from \"lucide-react\";\n\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { cn } from \"../lib/cn\";\nimport { AlertBanner } from \"./alert-banner\";\nimport { Autocomplete } from \"./autocomplete\";\nimport type { ComboOption } from \"./combobox-core\";\nimport { Chip } from \"./chip\";\nimport { RoleChip } from \"./account-chips\";\nimport type { RoleDefinition } from \"./account-chips\";\nimport { useConfirm } from \"./confirm-dialog\";\nimport { CopyButton } from \"./copy-button\";\nimport { DialogFrame } from \"./dialog-frame\";\nimport type { DialogFrameProps } from \"./dialog-frame\";\nimport { Caption, SectionLabel } from \"./text\";\nimport { ToggleGroup } from \"./toggle-group\";\nimport { Tooltip } from \"./tooltip\";\nimport { Button, Card, IconButton, Spinner } from \"./ui\";\nimport { useWriteLock } from \"./write-lock\";\nimport type { CardProps } from \"./ui\";\n\n/**\n * Who holds one record, and the owner's every way of changing that — Kurvenschmiede's\n * `features/sharing/share-dialog.tsx` and keksdose's `features/budgets/budget-share-card.tsx`,\n * which are the same component twice (Kurvenschmiede's own doc comment says so).\n *\n * Presentational: the kit draws the rows, asks before a removal (the kit's\n * {@link useConfirm}), keeps the field and the busy state, and checks only that an\n * address is SHAPED like one. Everything that is policy stays with the app — who may\n * share, whether an address has an account (that is what makes a grant pending), what\n * a role permits, every request — through the callbacks, which may return a promise.\n */\n\n// ── Labels ────────────────────────────────────────────────────────────────────\n\nexport interface ShareCardLabels {\n  /** ShareDialog's heading. */\n  dialogTitle: string;\n  /** ShareDialog's close button. */\n  close: string;\n  /** The add field's label. */\n  email: string;\n  /** The add field's label when `addWithoutEmail` lets it stay empty. */\n  emailOptional: string;\n  emailPlaceholder: string;\n  /** Under the field when what was typed is not an address. */\n  invalidEmail: string;\n  /** Accessible name of the role choice beside the field. */\n  role: string;\n  /** Accessible name of one grantee's role choice. */\n  roleOf: (name: string) => string;\n  /** The add button. */\n  add: string;\n  /** Heading over the list. */\n  whoHasAccess: string;\n  /** The list is empty. */\n  nobodyYet: string;\n  /** Chip on a grant whose address has no account yet. */\n  pending: string;\n  /** A pending grant with no address — a link anybody holding it can redeem. */\n  openInvite: string;\n  copyLink: string;\n  /** A candidate that is a team (its sublabel, and the line under a team row). */\n  team: string;\n  /** Under the field while a team is the one named. */\n  teamHint: (name: string) => string;\n  /** The remove button on a grantee. */\n  remove: string;\n  removeConfirm: (name: string) => string;\n  /** The remove button on a pending grant. */\n  revokePending: string;\n  revokePendingConfirm: (name: string) => string;\n  /** A callback rejected and no `formatError` says better. */\n  failed: string;\n  /** Shown while `loading`. */\n  loading: string;\n}\n\nexport const DEFAULT_SHARE_CARD_LABELS: ShareCardLabels = {\n  dialogTitle: \"Share\",\n  close: \"Close\",\n  email: \"Email address\",\n  emailOptional: \"Email address (optional)\",\n  emailPlaceholder: \"name@example.com\",\n  invalidEmail: \"Enter a complete email address.\",\n  role: \"Role\",\n  roleOf: (name) => `Role of ${name}`,\n  add: \"Share\",\n  whoHasAccess: \"Who has access\",\n  nobodyYet: \"Nobody else has access yet.\",\n  pending: \"Pending\",\n  openInvite: \"Open invite link\",\n  copyLink: \"Copy link\",\n  team: \"Team\",\n  teamHint: (name) => `Everyone in ${name} gets access.`,\n  remove: \"Remove access\",\n  removeConfirm: (name) => `Remove access for ${name}?`,\n  revokePending: \"Withdraw invitation\",\n  revokePendingConfirm: (name) => `Withdraw the invitation for ${name}?`,\n  failed: \"That did not work. Please try again.\",\n  loading: \"Loading…\",\n};\n\n// ── Data shapes ───────────────────────────────────────────────────────────────\n\n/**\n * One role of the app's vocabulary: Kurvenschmiede's viewer/editor, keksdose's guest.\n *\n * The admin roster's {@link RoleDefinition} (label, tone, icon) plus the key it is\n * filed under — an ARRAY here rather than the keyed `RoleVocabulary` record,\n * because the order is the order of the role choice's segments.\n */\nexport type ShareRole = RoleDefinition & {\n  key: string;\n  /** What the role allows — under the role choice once chosen, and the chip's tooltip. */\n  description?: string;\n};\n\n/** Somebody (or a team) who holds the record now. */\nexport interface ShareGrantee {\n  id: string | number;\n  name: string;\n  /** The second line. A team row says {@link ShareCardLabels.team} instead. */\n  email?: string | null;\n  /** A {@link ShareRole.key}. */\n  role: string;\n  /** `team`: the grant reaches everybody in it (Kurvenschmiede). Default `person`. */\n  kind?: \"person\" | \"team\";\n  /** Shown, but neither its role nor its access can be changed here (an owner row). */\n  locked?: boolean;\n  /** The app's own line under the row — keksdose's per-guest key delivery. */\n  extra?: ReactNode;\n}\n\n/** A grant waiting for its address to have an account — or, with no address, an\n *  open invite link (keksdose). */\nexport interface SharePendingGrant {\n  id: string | number;\n  email?: string | null;\n  /** A {@link ShareRole.key}; left out when the app has only one role. */\n  role?: string;\n  /** The invite link, offered with a copy button. */\n  link?: string;\n}\n\n/** A completion offered while typing: a past grantee, or one of the sharer's teams. */\nexport interface ShareCandidate {\n  id: string | number;\n  name: string;\n  /** A person's address: taking the row fills the field with it, and the grant is\n   *  then an ordinary address grant. */\n  email?: string | null;\n  /** `team` (or a person with no address): taking the row names THIS candidate, and\n   *  `onAdd` receives it instead of an address. */\n  kind?: \"person\" | \"team\";\n  icon?: ReactNode;\n}\n\n/** What the add button asks for. Exactly one of `email` / `candidate` is set, except\n *  under `addWithoutEmail`, where both may be null (an open invite). */\nexport interface ShareAddRequest {\n  email: string | null;\n  candidate: ShareCandidate | null;\n  /** A {@link ShareRole.key}. */\n  role: string;\n}\n\ntype MaybePromise = void | Promise<unknown>;\n\n// ── Props ─────────────────────────────────────────────────────────────────────\n\nexport interface SharePanelProps {\n  grantees: ShareGrantee[];\n  /** The role vocabulary, in display order. One role: no choice is offered and each\n   *  row shows its chip. */\n  roles: ShareRole[];\n  pending?: SharePendingGrant[];\n  /** Completions for the field. Left out: the field is a plain address field. */\n  candidates?: ShareCandidate[];\n  /** The role a new grant starts with. Default: the first of `roles`. */\n  defaultRole?: string;\n  /** Resolve to clear the field; reject to keep it and show the error. Left out (or\n   *  `readOnly`): no add form. */\n  onAdd?: (request: ShareAddRequest) => MaybePromise;\n  /** Left out: roles are shown as chips. */\n  onRoleChange?: (grantee: ShareGrantee, role: string) => MaybePromise;\n  /** Called after the kit's confirm. Left out: no remove button. */\n  onRemove?: (grantee: ShareGrantee) => MaybePromise;\n  /** Called after the kit's confirm. Left out: no withdraw button. */\n  onRevokePending?: (grant: SharePendingGrant) => MaybePromise;\n  /** keksdose: an empty field is a request too — an invite link with no address. */\n  addWithoutEmail?: boolean;\n  /** Under the add field: whatever the app needs said there (Kurvenschmiede's \"your\n   *  pending grant does not let anybody register\"). A function receives the taken\n   *  candidate, so it can say something else while a team is named. */\n  caption?: ReactNode | ((candidate: ShareCandidate | null) => ReactNode);\n  /** Above everything — what sharing means here (keksdose's guest explanation). */\n  intro?: ReactNode;\n  /** The list is being fetched: a spinner instead of the rows. */\n  loading?: boolean;\n  /** The app's own error, shown in the error box (wins over a caught rejection). */\n  error?: ReactNode;\n  /** Turns a callback's rejection into words. Default {@link ShareCardLabels.failed}. */\n  formatError?: (error: unknown) => ReactNode;\n  /** Look, do not touch: no form, chips for roles, no remove buttons. Copying an\n   *  invite link still works. */\n  readOnly?: boolean;\n  /** Focus the field on mount — a dialog that exists to add somebody. */\n  autoFocus?: boolean;\n  labels?: Partial<ShareCardLabels>;\n}\n\n// Shape only. Whether the address exists, is allowed, or is the sharer's own is the\n// app's question — the field must never become a way to probe for accounts.\nconst EMAIL_SHAPE = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n\n/** The kit's {@link RoleChip}, so a role looks the same here as in the admin roster,\n *  with the role's description in a tooltip. */\nfunction ShareRoleChip({ role }: { role: ShareRole | undefined }) {\n  if (!role) return null;\n  const chip = <RoleChip value={role.key} roles={{ [role.key]: role }} />;\n  return role.description ? <Tooltip label={role.description}>{chip}</Tooltip> : chip;\n}\n\n/**\n * A row's role choice saves on change, so it is a commit that cannot take `commit`:\n * under a write lock it is disabled, and the lock's reason is put in the kit Tooltip\n * around it — the same sentence the locked buttons beside it give.\n */\nfunction LockedRoleChoice({ reason, children }: { reason: ReactNode; children: ReactNode }) {\n  return reason === undefined ? children : <Tooltip label={reason}>{children}</Tooltip>;\n}\n\n/**\n * The body both forms share: the add form, then the list. Exported for an app that\n * frames it itself (a settings section, a sheet).\n */\nexport function SharePanel({\n  grantees,\n  roles,\n  pending = [],\n  candidates,\n  defaultRole,\n  onAdd,\n  onRoleChange,\n  onRemove,\n  onRevokePending,\n  addWithoutEmail = false,\n  caption,\n  intro,\n  loading = false,\n  error,\n  formatError,\n  readOnly = false,\n  autoFocus,\n  labels: labelsProp,\n}: SharePanelProps) {\n  // The `shareCard` namespace: prop > `<UiKitProvider labels>` > English.\n  const labels = useKitLabels(\"shareCard\", DEFAULT_SHARE_CARD_LABELS, labelsProp);\n  const confirm = useConfirm();\n  // Every commit below opts into the surrounding WriteLockProvider with `commit`; the\n  // role choices save on change, cannot take it, and read the lock themselves.\n  const lock = useWriteLock();\n  const [email, setEmail] = useState(\"\");\n  // A candidate taken from the completion. Typing again lets it go: the field then\n  // names an address again, and a chosen team beside free text would be two answers\n  // to \"who\" (Kurvenschmiede's rule).\n  const [target, setTarget] = useState<ShareCandidate | null>(null);\n  const [newRole, setNewRole] = useState(defaultRole ?? roles[0]?.key ?? \"\");\n  const [invalid, setInvalid] = useState(false);\n  // One action at a time, for the whole panel: two in flight against one record's\n  // grants can answer out of order. The key says which control draws the spinner.\n  const [busy, setBusy] = useState<string | null>(null);\n  const [failure, setFailure] = useState<ReactNode>(null);\n\n  const roleOf = (key: string | undefined) => roles.find((r) => r.key === key);\n  const choosable = roles.length > 1;\n  const canAdd = !readOnly && onAdd !== undefined;\n\n  const run = async (key: string, action: () => MaybePromise): Promise<boolean> => {\n    setBusy(key);\n    setFailure(null);\n    try {\n      await action();\n      return true;\n    } catch (caught) {\n      setFailure(formatError ? formatError(caught) : labels.failed);\n      return false;\n    } finally {\n      setBusy(null);\n    }\n  };\n\n  const address = email.trim();\n  const empty = !target && address === \"\";\n\n  const submit = async () => {\n    // Enter in the field is a commit too — the button's lock does not see it.\n    if (!onAdd || busy || lock.locked) return;\n    if (empty && !addWithoutEmail) return;\n    if (!target && address !== \"\" && !EMAIL_SHAPE.test(address)) {\n      setInvalid(true);\n      return;\n    }\n    const request: ShareAddRequest = {\n      email: target ? null : address || null,\n      candidate: target,\n      role: newRole,\n    };\n    if (await run(\"add\", () => onAdd(request))) {\n      setEmail(\"\");\n      setTarget(null);\n    }\n  };\n\n  const options: ComboOption<string>[] = (candidates ?? []).map((c) => ({\n    value: String(c.id),\n    label: c.name,\n    sublabel: c.kind === \"team\" ? labels.team : (c.email ?? undefined),\n    icon: c.icon ?? (c.kind === \"team\" ? <UsersRound className=\"size-4\" /> : undefined),\n  }));\n\n  // The completion is a convenience, not a search: an address that matches nobody is\n  // the ordinary case (somebody new), so no \"No results\" box opens over the field —\n  // and over its error. The same narrowing Autocomplete applies, asked first.\n  const needle = (target ? \"\" : email).trim().toLowerCase();\n  const offers =\n    needle !== \"\" &&\n    options.some((o) => o.label.toLowerCase().includes(needle) || (o.sublabel ?? \"\").toLowerCase().includes(needle));\n\n  const captionNode = typeof caption === \"function\" ? caption(target) : caption;\n  const shownError = error ?? failure;\n  const nobody = grantees.length === 0 && pending.length === 0;\n\n  return (\n    <div className=\"space-y-3\">\n      {intro && <div className=\"text-xs text-[var(--text-muted)]\">{intro}</div>}\n\n      {canAdd && (\n        <div className=\"space-y-2\">\n          <div\n            className={cn(\n              \"grid grid-cols-1 gap-2\",\n              choosable && \"sm:grid-cols-[minmax(0,1fr)_auto] sm:items-start\",\n            )}\n          >\n            <Autocomplete<string>\n              label={addWithoutEmail ? labels.emailOptional : labels.email}\n              placeholder={labels.emailPlaceholder}\n              value={target ? target.name : email}\n              options={options}\n              open={offers ? undefined : false}\n              fillOnSelect={false}\n              // eslint-disable-next-line jsx-a11y/no-autofocus -- a documented prop the caller opts into (off by default); the field never takes focus on its own.\n              autoFocus={autoFocus}\n              inputMode=\"email\"\n              autoComplete=\"off\"\n              autoCapitalize=\"none\"\n              spellCheck={false}\n              disabled={busy !== null}\n              error={invalid ? labels.invalidEmail : undefined}\n              onChange={(text) => {\n                setTarget(null);\n                setInvalid(false);\n                setFailure(null);\n                setEmail(text);\n              }}\n              onSelect={(option) => {\n                const chosen = (candidates ?? []).find((c) => String(c.id) === option.value);\n                if (!chosen) return;\n                setInvalid(false);\n                if (chosen.kind !== \"team\" && chosen.email) {\n                  setTarget(null);\n                  setEmail(chosen.email);\n                } else {\n                  setTarget(chosen);\n                  setEmail(\"\");\n                }\n              }}\n              onKeyDown={(event) => {\n                if (event.key === \"Enter\") void submit();\n              }}\n            />\n            {choosable && (\n              <ToggleGroup<string>\n                aria-label={labels.role}\n                options={roles.map((r) => ({ value: r.key, label: r.label }))}\n                value={newRole}\n                onChange={setNewRole}\n                disabled={busy !== null}\n                caption={\n                  roles.some((r) => r.description) ? (key: string) => roleOf(key)?.description : undefined\n                }\n                // Level with the floating field beside it, as the two apps do by hand.\n                optionClassName=\"sm:min-h-10\"\n              />\n            )}\n          </div>\n          <div className=\"flex flex-wrap items-center justify-between gap-2\">\n            <div className=\"min-w-0 flex-1 basis-48 space-y-1\">\n              {target?.kind === \"team\" && <Caption>{labels.teamHint(target.name)}</Caption>}\n              {captionNode && <Caption as=\"div\">{captionNode}</Caption>}\n            </div>\n            <Button\n              variant=\"brand\"\n              commit\n              pending={busy === \"add\"}\n              disabled={busy !== null || (empty && !addWithoutEmail)}\n              onClick={() => void submit()}\n              className=\"ms-auto\"\n            >\n              <UserPlus className=\"size-4\" aria-hidden />\n              {labels.add}\n            </Button>\n          </div>\n        </div>\n      )}\n\n      {shownError && (\n        <AlertBanner tone=\"danger\" size=\"sm\">\n          {shownError}\n        </AlertBanner>\n      )}\n\n      {loading ? (\n        <div className=\"flex justify-center py-3\">\n          <Spinner label={labels.loading} />\n        </div>\n      ) : (\n        <div className=\"space-y-2\">\n          <SectionLabel as=\"h4\">{labels.whoHasAccess}</SectionLabel>\n          {nobody && <Caption>{labels.nobodyYet}</Caption>}\n          <ul className=\"divide-y divide-[var(--border)]\">\n            {grantees.map((g) => {\n              const editable = !readOnly && !g.locked;\n              const changeable = editable && onRoleChange !== undefined && choosable;\n              const key = `grantee:${g.id}`;\n              return (\n                <li key={key} className=\"space-y-1.5 py-2 first:pt-0 last:pb-0\">\n                  {/* Wraps rather than squeezes: on a phone the controls drop under\n                      the name, full row, instead of truncating it to a letter. */}\n                  <div className=\"flex flex-wrap items-center justify-between gap-x-3 gap-y-1.5\">\n                    <div className=\"min-w-0 flex-1 basis-40\">\n                      <div className=\"flex min-w-0 items-center gap-1.5 text-sm font-medium text-[var(--text-primary)]\">\n                        {g.kind === \"team\" && <UsersRound className=\"size-4 shrink-0\" aria-hidden />}\n                        <span data-private className=\"truncate\">\n                          {g.name}\n                        </span>\n                        {!changeable && <ShareRoleChip role={roleOf(g.role)} />}\n                      </div>\n                      {(g.kind === \"team\" || g.email) && (\n                        <div data-private className=\"truncate text-xs text-[var(--text-muted)]\">\n                          {g.kind === \"team\" ? labels.team : g.email}\n                        </div>\n                      )}\n                    </div>\n                    {(changeable || (editable && onRemove)) && (\n                      <div className=\"ms-auto flex shrink-0 items-center gap-1\">\n                        {changeable && (\n                          <LockedRoleChoice reason={lock.locked ? lock.reason : undefined}>\n                            <ToggleGroup<string>\n                              size=\"sm\"\n                              aria-label={labels.roleOf(g.name)}\n                              options={roles.map((r) => ({ value: r.key, label: r.label }))}\n                              value={g.role}\n                              disabled={busy !== null || lock.locked}\n                              onChange={(next) => {\n                                if (next !== g.role) void run(`role:${g.id}`, () => onRoleChange(g, next));\n                              }}\n                            />\n                          </LockedRoleChoice>\n                        )}\n                        {editable && onRemove && (\n                          <IconButton\n                            tone=\"danger\"\n                            size=\"xs\"\n                            commit\n                            label={labels.remove}\n                            pending={busy === key}\n                            disabled={busy !== null}\n                            onClick={async () => {\n                              const yes = await confirm({\n                                title: labels.removeConfirm(g.name),\n                                confirmLabel: labels.remove,\n                                tone: \"danger\",\n                              });\n                              if (yes) await run(key, () => onRemove(g));\n                            }}\n                          >\n                            <Trash2 />\n                          </IconButton>\n                        )}\n                      </div>\n                    )}\n                  </div>\n                  {g.extra}\n                </li>\n              );\n            })}\n            {pending.map((p) => {\n              const key = `pending:${p.id}`;\n              const name = p.email || labels.openInvite;\n              return (\n                <li key={key} className=\"py-2 first:pt-0 last:pb-0\">\n                  <div className=\"flex flex-wrap items-center justify-between gap-x-3 gap-y-1.5\">\n                    <div className=\"min-w-0 flex-1 basis-40\">\n                      <div\n                        data-private={p.email ? true : undefined}\n                        className={cn(\n                          \"truncate text-sm\",\n                          p.email ? \"text-[var(--text-primary)]\" : \"text-[var(--text-muted)]\",\n                        )}\n                      >\n                        {name}\n                      </div>\n                      <div className=\"mt-0.5 flex flex-wrap items-center gap-1\">\n                        <Chip size=\"sm\" shape=\"square\" tone=\"warning\" caps>\n                          {labels.pending}\n                        </Chip>\n                        <ShareRoleChip role={roleOf(p.role)} />\n                      </div>\n                    </div>\n                    {(p.link || (!readOnly && onRevokePending)) && (\n                      <div className=\"ms-auto flex shrink-0 items-center gap-1\">\n                        {p.link && <CopyButton size=\"xs\" tone=\"muted\" text={p.link} label={labels.copyLink} />}\n                        {!readOnly && onRevokePending && (\n                          <IconButton\n                            tone=\"danger\"\n                            size=\"xs\"\n                            commit\n                            label={labels.revokePending}\n                            pending={busy === key}\n                            disabled={busy !== null}\n                            onClick={async () => {\n                              const yes = await confirm({\n                                title: labels.revokePendingConfirm(name),\n                                confirmLabel: labels.revokePending,\n                                tone: \"danger\",\n                              });\n                              if (yes) await run(key, () => onRevokePending(p));\n                            }}\n                          >\n                            <Trash2 />\n                          </IconButton>\n                        )}\n                      </div>\n                    )}\n                  </div>\n                </li>\n              );\n            })}\n          </ul>\n        </div>\n      )}\n    </div>\n  );\n}\n\n// ── The two frames ────────────────────────────────────────────────────────────\n\nexport interface ShareCardProps extends SharePanelProps {\n  /** A heading over the card. */\n  title?: ReactNode;\n  /** The Card's variant. Default `outline` — a block inside a section, as keksdose's\n   *  card under a budget row is. */\n  variant?: CardProps[\"variant\"];\n  className?: string;\n}\n\n/** {@link SharePanel} in a card — keksdose's inline form, under the row it shares. */\nexport function ShareCard({ title, variant = \"outline\", className, ...panel }: ShareCardProps) {\n  return (\n    <Card variant={variant} padding=\"sm\" className={cn(\"space-y-3\", className)}>\n      {title && <h3 className=\"text-sm font-semibold text-[var(--text-primary)]\">{title}</h3>}\n      <SharePanel {...panel} />\n    </Card>\n  );\n}\n\nexport interface ShareDialogProps\n  extends SharePanelProps,\n    Pick<DialogFrameProps, \"open\" | \"onClose\" | \"size\" | \"className\"> {\n  /** The heading. Default {@link ShareCardLabels.dialogTitle}. */\n  title?: ReactNode;\n  /** Under the heading — what is being shared (Kurvenschmiede passes its name). */\n  description?: ReactNode;\n}\n\n/**\n * {@link SharePanel} in the kit's {@link DialogFrame} with a Close button —\n * Kurvenschmiede's form. Sharing commits as it goes, so there is nothing to save or\n * cancel: Close is the only action.\n */\nexport function ShareDialog({ open, onClose, size, className, title, description, ...panel }: ShareDialogProps) {\n  const labels = useKitLabels(\"shareCard\", DEFAULT_SHARE_CARD_LABELS, panel.labels);\n  return (\n    <DialogFrame\n      open={open}\n      onClose={onClose}\n      size={size}\n      className={className}\n      title={title ?? labels.dialogTitle}\n      description={description}\n      actions={(close) => (\n        <Button variant=\"secondary\" onClick={close}>\n          {labels.close}\n        </Button>\n      )}\n    >\n      <SharePanel {...panel} />\n    </DialogFrame>\n  );\n}\n"],"mappings":";AA8Ne,cAwHL,YAxHK;AA9Nf,SAAS,gBAAgB;AAEzB,SAAS,QAAQ,UAAU,kBAAkB;AAE7C,SAAS,oBAAoB;AAC7B,SAAS,UAAU;AACnB,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAE7B,SAAS,YAAY;AACrB,SAAS,gBAAgB;AAEzB,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAE5B,SAAS,SAAS,oBAAoB;AACtC,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AACxB,SAAS,QAAQ,MAAM,YAAY,eAAe;AAClD,SAAS,oBAAoB;AA4DtB,MAAM,4BAA6C;AAAA,EACxD,aAAa;AAAA,EACb,OAAO;AAAA,EACP,OAAO;AAAA,EACP,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,cAAc;AAAA,EACd,MAAM;AAAA,EACN,QAAQ,CAAC,SAAS,WAAW,IAAI;AAAA,EACjC,KAAK;AAAA,EACL,cAAc;AAAA,EACd,WAAW;AAAA,EACX,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU,CAAC,SAAS,eAAe,IAAI;AAAA,EACvC,QAAQ;AAAA,EACR,eAAe,CAAC,SAAS,qBAAqB,IAAI;AAAA,EAClD,eAAe;AAAA,EACf,sBAAsB,CAAC,SAAS,+BAA+B,IAAI;AAAA,EACnE,QAAQ;AAAA,EACR,SAAS;AACX;AAiHA,MAAM,cAAc;AAIpB,SAAS,cAAc,EAAE,KAAK,GAAoC;AAChE,MAAI,CAAC,KAAM,QAAO;AAClB,QAAM,OAAO,oBAAC,YAAS,OAAO,KAAK,KAAK,OAAO,EAAE,CAAC,KAAK,GAAG,GAAG,KAAK,GAAG;AACrE,SAAO,KAAK,cAAc,oBAAC,WAAQ,OAAO,KAAK,aAAc,gBAAK,IAAa;AACjF;AAOA,SAAS,iBAAiB,EAAE,QAAQ,SAAS,GAA+C;AAC1F,SAAO,WAAW,SAAY,WAAW,oBAAC,WAAQ,OAAO,QAAS,UAAS;AAC7E;AAMO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,UAAU,CAAC;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,QAAQ;AACV,GAAoB;AAElB,QAAM,SAAS,aAAa,aAAa,2BAA2B,UAAU;AAC9E,QAAM,UAAU,WAAW;AAG3B,QAAM,OAAO,aAAa;AAC1B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AAIrC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAgC,IAAI;AAChE,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,eAAe,MAAM,CAAC,GAAG,OAAO,EAAE;AACzE,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAG5C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAwB,IAAI;AACpD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAoB,IAAI;AAEtD,QAAM,SAAS,CAAC,QAA4B,MAAM,KAAK,CAAC,MAAM,EAAE,QAAQ,GAAG;AAC3E,QAAM,YAAY,MAAM,SAAS;AACjC,QAAM,SAAS,CAAC,YAAY,UAAU;AAEtC,QAAM,MAAM,OAAO,KAAa,WAAiD;AAC/E,YAAQ,GAAG;AACX,eAAW,IAAI;AACf,QAAI;AACF,YAAM,OAAO;AACb,aAAO;AAAA,IACT,SAAS,QAAQ;AACf,iBAAW,cAAc,YAAY,MAAM,IAAI,OAAO,MAAM;AAC5D,aAAO;AAAA,IACT,UAAE;AACA,cAAQ,IAAI;AAAA,IACd;AAAA,EACF;AAEA,QAAM,UAAU,MAAM,KAAK;AAC3B,QAAM,QAAQ,CAAC,UAAU,YAAY;AAErC,QAAM,SAAS,YAAY;AAEzB,QAAI,CAAC,SAAS,QAAQ,KAAK,OAAQ;AACnC,QAAI,SAAS,CAAC,gBAAiB;AAC/B,QAAI,CAAC,UAAU,YAAY,MAAM,CAAC,YAAY,KAAK,OAAO,GAAG;AAC3D,iBAAW,IAAI;AACf;AAAA,IACF;AACA,UAAM,UAA2B;AAAA,MAC/B,OAAO,SAAS,OAAO,WAAW;AAAA,MAClC,WAAW;AAAA,MACX,MAAM;AAAA,IACR;AACA,QAAI,MAAM,IAAI,OAAO,MAAM,MAAM,OAAO,CAAC,GAAG;AAC1C,eAAS,EAAE;AACX,gBAAU,IAAI;AAAA,IAChB;AAAA,EACF;AAEA,QAAM,WAAkC,cAAc,CAAC,GAAG,IAAI,CAAC,OAAO;AAAA,IACpE,OAAO,OAAO,EAAE,EAAE;AAAA,IAClB,OAAO,EAAE;AAAA,IACT,UAAU,EAAE,SAAS,SAAS,OAAO,OAAQ,EAAE,SAAS;AAAA,IACxD,MAAM,EAAE,SAAS,EAAE,SAAS,SAAS,oBAAC,cAAW,WAAU,UAAS,IAAK;AAAA,EAC3E,EAAE;AAKF,QAAM,UAAU,SAAS,KAAK,OAAO,KAAK,EAAE,YAAY;AACxD,QAAM,SACJ,WAAW,MACX,QAAQ,KAAK,CAAC,MAAM,EAAE,MAAM,YAAY,EAAE,SAAS,MAAM,MAAM,EAAE,YAAY,IAAI,YAAY,EAAE,SAAS,MAAM,CAAC;AAEjH,QAAM,cAAc,OAAO,YAAY,aAAa,QAAQ,MAAM,IAAI;AACtE,QAAM,aAAa,SAAS;AAC5B,QAAM,SAAS,SAAS,WAAW,KAAK,QAAQ,WAAW;AAE3D,SACE,qBAAC,SAAI,WAAU,aACZ;AAAA,aAAS,oBAAC,SAAI,WAAU,oCAAoC,iBAAM;AAAA,IAElE,UACC,qBAAC,SAAI,WAAU,aACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,aAAa;AAAA,UACf;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO,kBAAkB,OAAO,gBAAgB,OAAO;AAAA,gBACvD,aAAa,OAAO;AAAA,gBACpB,OAAO,SAAS,OAAO,OAAO;AAAA,gBAC9B;AAAA,gBACA,MAAM,SAAS,SAAY;AAAA,gBAC3B,cAAc;AAAA,gBAEd;AAAA,gBACA,WAAU;AAAA,gBACV,cAAa;AAAA,gBACb,gBAAe;AAAA,gBACf,YAAY;AAAA,gBACZ,UAAU,SAAS;AAAA,gBACnB,OAAO,UAAU,OAAO,eAAe;AAAA,gBACvC,UAAU,CAAC,SAAS;AAClB,4BAAU,IAAI;AACd,6BAAW,KAAK;AAChB,6BAAW,IAAI;AACf,2BAAS,IAAI;AAAA,gBACf;AAAA,gBACA,UAAU,CAAC,WAAW;AACpB,wBAAM,UAAU,cAAc,CAAC,GAAG,KAAK,CAAC,MAAM,OAAO,EAAE,EAAE,MAAM,OAAO,KAAK;AAC3E,sBAAI,CAAC,OAAQ;AACb,6BAAW,KAAK;AAChB,sBAAI,OAAO,SAAS,UAAU,OAAO,OAAO;AAC1C,8BAAU,IAAI;AACd,6BAAS,OAAO,KAAK;AAAA,kBACvB,OAAO;AACL,8BAAU,MAAM;AAChB,6BAAS,EAAE;AAAA,kBACb;AAAA,gBACF;AAAA,gBACA,WAAW,CAAC,UAAU;AACpB,sBAAI,MAAM,QAAQ,QAAS,MAAK,OAAO;AAAA,gBACzC;AAAA;AAAA,YACF;AAAA,YACC,aACC;AAAA,cAAC;AAAA;AAAA,gBACC,cAAY,OAAO;AAAA,gBACnB,SAAS,MAAM,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,EAAE;AAAA,gBAC5D,OAAO;AAAA,gBACP,UAAU;AAAA,gBACV,UAAU,SAAS;AAAA,gBACnB,SACE,MAAM,KAAK,CAAC,MAAM,EAAE,WAAW,IAAI,CAAC,QAAgB,OAAO,GAAG,GAAG,cAAc;AAAA,gBAGjF,iBAAgB;AAAA;AAAA,YAClB;AAAA;AAAA;AAAA,MAEJ;AAAA,MACA,qBAAC,SAAI,WAAU,qDACb;AAAA,6BAAC,SAAI,WAAU,qCACZ;AAAA,kBAAQ,SAAS,UAAU,oBAAC,WAAS,iBAAO,SAAS,OAAO,IAAI,GAAE;AAAA,UAClE,eAAe,oBAAC,WAAQ,IAAG,OAAO,uBAAY;AAAA,WACjD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,QAAM;AAAA,YACN,SAAS,SAAS;AAAA,YAClB,UAAU,SAAS,QAAS,SAAS,CAAC;AAAA,YACtC,SAAS,MAAM,KAAK,OAAO;AAAA,YAC3B,WAAU;AAAA,YAEV;AAAA,kCAAC,YAAS,WAAU,UAAS,eAAW,MAAC;AAAA,cACxC,OAAO;AAAA;AAAA;AAAA,QACV;AAAA,SACF;AAAA,OACF;AAAA,IAGD,cACC,oBAAC,eAAY,MAAK,UAAS,MAAK,MAC7B,sBACH;AAAA,IAGD,UACC,oBAAC,SAAI,WAAU,4BACb,8BAAC,WAAQ,OAAO,OAAO,SAAS,GAClC,IAEA,qBAAC,SAAI,WAAU,aACb;AAAA,0BAAC,gBAAa,IAAG,MAAM,iBAAO,cAAa;AAAA,MAC1C,UAAU,oBAAC,WAAS,iBAAO,WAAU;AAAA,MACtC,qBAAC,QAAG,WAAU,mCACX;AAAA,iBAAS,IAAI,CAAC,MAAM;AACnB,gBAAM,WAAW,CAAC,YAAY,CAAC,EAAE;AACjC,gBAAM,aAAa,YAAY,iBAAiB,UAAa;AAC7D,gBAAM,MAAM,WAAW,EAAE,EAAE;AAC3B,iBACE,qBAAC,QAAa,WAAU,yCAGtB;AAAA,iCAAC,SAAI,WAAU,iEACb;AAAA,mCAAC,SAAI,WAAU,2BACb;AAAA,qCAAC,SAAI,WAAU,oFACZ;AAAA,oBAAE,SAAS,UAAU,oBAAC,cAAW,WAAU,mBAAkB,eAAW,MAAC;AAAA,kBAC1E,oBAAC,UAAK,gBAAY,MAAC,WAAU,YAC1B,YAAE,MACL;AAAA,kBACC,CAAC,cAAc,oBAAC,iBAAc,MAAM,OAAO,EAAE,IAAI,GAAG;AAAA,mBACvD;AAAA,iBACE,EAAE,SAAS,UAAU,EAAE,UACvB,oBAAC,SAAI,gBAAY,MAAC,WAAU,6CACzB,YAAE,SAAS,SAAS,OAAO,OAAO,EAAE,OACvC;AAAA,iBAEJ;AAAA,eACE,cAAe,YAAY,aAC3B,qBAAC,SAAI,WAAU,4CACZ;AAAA,8BACC,oBAAC,oBAAiB,QAAQ,KAAK,SAAS,KAAK,SAAS,QACpD;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,cAAY,OAAO,OAAO,EAAE,IAAI;AAAA,oBAChC,SAAS,MAAM,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,EAAE;AAAA,oBAC5D,OAAO,EAAE;AAAA,oBACT,UAAU,SAAS,QAAQ,KAAK;AAAA,oBAChC,UAAU,CAAC,SAAS;AAClB,0BAAI,SAAS,EAAE,KAAM,MAAK,IAAI,QAAQ,EAAE,EAAE,IAAI,MAAM,aAAa,GAAG,IAAI,CAAC;AAAA,oBAC3E;AAAA;AAAA,gBACF,GACF;AAAA,gBAED,YAAY,YACX;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,MAAK;AAAA,oBACL,QAAM;AAAA,oBACN,OAAO,OAAO;AAAA,oBACd,SAAS,SAAS;AAAA,oBAClB,UAAU,SAAS;AAAA,oBACnB,SAAS,YAAY;AACnB,4BAAM,MAAM,MAAM,QAAQ;AAAA,wBACxB,OAAO,OAAO,cAAc,EAAE,IAAI;AAAA,wBAClC,cAAc,OAAO;AAAA,wBACrB,MAAM;AAAA,sBACR,CAAC;AACD,0BAAI,IAAK,OAAM,IAAI,KAAK,MAAM,SAAS,CAAC,CAAC;AAAA,oBAC3C;AAAA,oBAEA,8BAAC,UAAO;AAAA;AAAA,gBACV;AAAA,iBAEJ;AAAA,eAEJ;AAAA,YACC,EAAE;AAAA,eAzDI,GA0DT;AAAA,QAEJ,CAAC;AAAA,QACA,QAAQ,IAAI,CAAC,MAAM;AAClB,gBAAM,MAAM,WAAW,EAAE,EAAE;AAC3B,gBAAM,OAAO,EAAE,SAAS,OAAO;AAC/B,iBACE,oBAAC,QAAa,WAAU,6BACtB,+BAAC,SAAI,WAAU,iEACb;AAAA,iCAAC,SAAI,WAAU,2BACb;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,gBAAc,EAAE,QAAQ,OAAO;AAAA,kBAC/B,WAAW;AAAA,oBACT;AAAA,oBACA,EAAE,QAAQ,+BAA+B;AAAA,kBAC3C;AAAA,kBAEC;AAAA;AAAA,cACH;AAAA,cACA,qBAAC,SAAI,WAAU,4CACb;AAAA,oCAAC,QAAK,MAAK,MAAK,OAAM,UAAS,MAAK,WAAU,MAAI,MAC/C,iBAAO,SACV;AAAA,gBACA,oBAAC,iBAAc,MAAM,OAAO,EAAE,IAAI,GAAG;AAAA,iBACvC;AAAA,eACF;AAAA,aACE,EAAE,QAAS,CAAC,YAAY,oBACxB,qBAAC,SAAI,WAAU,4CACZ;AAAA,gBAAE,QAAQ,oBAAC,cAAW,MAAK,MAAK,MAAK,SAAQ,MAAM,EAAE,MAAM,OAAO,OAAO,UAAU;AAAA,cACnF,CAAC,YAAY,mBACZ;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,MAAK;AAAA,kBACL,QAAM;AAAA,kBACN,OAAO,OAAO;AAAA,kBACd,SAAS,SAAS;AAAA,kBAClB,UAAU,SAAS;AAAA,kBACnB,SAAS,YAAY;AACnB,0BAAM,MAAM,MAAM,QAAQ;AAAA,sBACxB,OAAO,OAAO,qBAAqB,IAAI;AAAA,sBACvC,cAAc,OAAO;AAAA,sBACrB,MAAM;AAAA,oBACR,CAAC;AACD,wBAAI,IAAK,OAAM,IAAI,KAAK,MAAM,gBAAgB,CAAC,CAAC;AAAA,kBAClD;AAAA,kBAEA,8BAAC,UAAO;AAAA;AAAA,cACV;AAAA,eAEJ;AAAA,aAEJ,KA5CO,GA6CT;AAAA,QAEJ,CAAC;AAAA,SACH;AAAA,OACF;AAAA,KAEJ;AAEJ;AAcO,SAAS,UAAU,EAAE,OAAO,UAAU,WAAW,WAAW,GAAG,MAAM,GAAmB;AAC7F,SACE,qBAAC,QAAK,SAAkB,SAAQ,MAAK,WAAW,GAAG,aAAa,SAAS,GACtE;AAAA,aAAS,oBAAC,QAAG,WAAU,oDAAoD,iBAAM;AAAA,IAClF,oBAAC,cAAY,GAAG,OAAO;AAAA,KACzB;AAEJ;AAgBO,SAAS,YAAY,EAAE,MAAM,SAAS,MAAM,WAAW,OAAO,aAAa,GAAG,MAAM,GAAqB;AAC9G,QAAM,SAAS,aAAa,aAAa,2BAA2B,MAAM,MAAM;AAChF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO,SAAS,OAAO;AAAA,MACvB;AAAA,MACA,SAAS,CAAC,UACR,oBAAC,UAAO,SAAQ,aAAY,SAAS,OAClC,iBAAO,OACV;AAAA,MAGF,8BAAC,cAAY,GAAG,OAAO;AAAA;AAAA,EACzB;AAEJ;","names":[]}

package/dist/components/status-dot.d.ts

@@ -2,6 +2,8 @@ import * as react from 'react';
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { ProgressBarTone } from './progress-bar.js';
 import { ChipHue } from './chip.js';
+import './signed-amount.js';
+import './stat-tile.js';
 import 'lucide-react';
 
 /**

package/dist/components/text-link.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactElement, ComponentPropsWithoutRef, ReactNode, Ref, MouseEvent, KeyboardEvent } from 'react';
 import { LucideIcon } from 'lucide-react';
-import { aE as KitLinkComponent } from '../kit-labels-C4uB_zmg.js';
+import { aF as KitLinkComponent } from '../kit-labels-CPbsjlXr.js';
 import './data-table-labels.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
@@ -51,6 +51,15 @@ import './authed-image.js';
 import '../hooks/use-authed-src.js';
 import './image-grid.js';
 import './lightbox.js';
+import './write-lock.js';
+import './account-chips.js';
+import '../lib/format.js';
+import '../data-table-3mi2R3so.js';
+import './data-table-sort.js';
+import './swipeable-row.js';
+import './reauth-dialog.js';
+import './server-wake.js';
+import '../lib/server-wake.js';
 
 /**
  * An `href` that leaves the app: a scheme (`https:`, `mailto:`, `tel:`) or a

package/dist/components/time-input.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { aD as InputProps } from '../kit-labels-C4uB_zmg.js';
+import { aE as InputProps } from '../kit-labels-CPbsjlXr.js';
 import './data-table-labels.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
@@ -50,6 +50,15 @@ import './authed-image.js';
 import '../hooks/use-authed-src.js';
 import './image-grid.js';
 import './lightbox.js';
+import './write-lock.js';
+import './account-chips.js';
+import '../lib/format.js';
+import '../data-table-3mi2R3so.js';
+import './data-table-sort.js';
+import './swipeable-row.js';
+import './reauth-dialog.js';
+import './server-wake.js';
+import '../lib/server-wake.js';
 
 /**
  * A time of day, as a `"HH:mm"` string (`"HH:mm:ss"` once `step` asks for seconds).

package/dist/components/toast.d.ts

@@ -148,6 +148,15 @@ interface ToasterProps {
     hotkey?: string[];
     gap?: number;
     dir?: "ltr" | "rtl" | "auto";
+    /**
+     * A middle click on a toast dismisses it (0.18.0) — the gesture that closes a tab,
+     * which is what keksdose's users reached for (dev #583). By id, so it works on a
+     * toast with `closeButton: false` too; it counts as the user closing it, so
+     * `onDismiss` runs. Not on a link or a button inside the toast — a middle click on a
+     * link still opens it in a new tab — and not on a `dismissible: false` toast.
+     * Default true.
+     */
+    dismissOnMiddleClick?: boolean;
     className?: string;
     style?: CSSProperties;
 }
@@ -162,6 +171,6 @@ interface ToasterProps {
  * and Alt+T ({@link ToasterProps.hotkey}) moves focus to the newest toast. A toast
  * with an action stays up 8s by default, so the button can be reached.
  */
-declare function Toaster({ position, navOffset, theme, labels: labelsProp, closeButton, richColors, swipeDirections, offset, mobileOffset, className, style, ...rest }: ToasterProps): react.JSX.Element | null;
+declare function Toaster({ position, navOffset, theme, labels: labelsProp, closeButton, richColors, swipeDirections, offset, mobileOffset, dismissOnMiddleClick, className, style, ...rest }: ToasterProps): react.JSX.Element | null;
 
 export { DEFAULT_TOAST_LABELS, TOAST_ACTION_DURATION, type ToastAction, type ToastId, type ToastLabels, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastRedoOptions, type ToastSwipeDirection, type ToastUndoOptions, Toaster, type ToasterOffset, type ToasterProps, toast };

package/dist/components/toast.js

@@ -43,9 +43,20 @@ const DEFAULT_TOAST_LABELS = {
 let activeLabels = DEFAULT_TOAST_LABELS;
 const TOAST_ACTION_DURATION = 8e3;
 const privately = (node) => /* @__PURE__ */ jsx("span", { "data-private": "", children: node });
+const ID_CLASS = "kit-toast-id-";
+const idClass = (id) => `${ID_CLASS}${typeof id === "number" ? "n" : "s"}-${encodeURIComponent(String(id))}`;
+function readToastId(el) {
+  for (const token of el.classList) {
+    if (!token.startsWith(ID_CLASS)) continue;
+    const kind = token.charAt(ID_CLASS.length);
+    const raw = decodeURIComponent(token.slice(ID_CLASS.length + 2));
+    return kind === "n" ? Number(raw) : raw;
+  }
+  return null;
+}
 function toSonnerData(opts, id) {
-  const { redact, description, duration, action, ...rest } = opts ?? {};
-  const data = { ...rest, id };
+  const { redact, description, duration, action, className, ...rest } = opts ?? {};
+  const data = { ...rest, id, className: className ? `${idClass(id)} ${className}` : idClass(id) };
   if (description !== void 0) data.description = redact ? privately(description) : description;
   if (action) data.action = action;
   const resolved = duration ?? (action ? TOAST_ACTION_DURATION : void 0);
@@ -169,6 +180,7 @@ function Toaster({
   swipeDirections = ALL_DIRECTIONS,
   offset,
   mobileOffset,
+  dismissOnMiddleClick = true,
   className,
   style,
   ...rest
@@ -191,6 +203,34 @@ function Toaster({
       if (activeLabels === labels) activeLabels = DEFAULT_TOAST_LABELS;
     };
   }, [labels]);
+  useEffect(() => {
+    if (!dismissOnMiddleClick || !mod) return;
+    const toastUnder = (e) => {
+      if (e.button !== 1 || !(e.target instanceof Element)) return null;
+      const li = e.target.closest("[data-sonner-toast]");
+      if (!li || li.dataset.dismissible === "false") return null;
+      const control = e.target.closest("a[href], button, input, select, textarea, [role='button'], [role='link']");
+      if (control && li.contains(control)) return null;
+      return li;
+    };
+    const onDown = (e) => {
+      if (toastUnder(e)) e.preventDefault();
+    };
+    const onAux = (e) => {
+      const li = toastUnder(e);
+      if (!li) return;
+      e.preventDefault();
+      const id = readToastId(li);
+      if (id !== null) mod.toast.dismiss(id);
+      else li.querySelector("[data-close-button]")?.click();
+    };
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("auxclick", onAux);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("auxclick", onAux);
+    };
+  }, [dismissOnMiddleClick, mod]);
   const documentTheme = useSyncExternalStore(subscribeDocumentTheme, readDocumentTheme, () => "light");
   const phone = useMediaQuery(PHONE_QUERY, false);
   const resolved = position ?? (phone ? "bottom-center" : "top-center");

package/dist/components/toast.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/toast.tsx"],"sourcesContent":["import { useEffect, useState, useSyncExternalStore } from \"react\";\nimport type { CSSProperties, MouseEvent, ReactElement, ReactNode } from \"react\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { PHONE_QUERY } from \"./ui\";\n\n/**\n * The kit's toast layer: a `toast` API and a `<Toaster>`, over sonner.\n *\n * WHY A WRAPPER AND NOT \"USE SONNER\". Both apps mounted sonner by hand and carried the\n * same policy in it — bottom-centre on a phone so the toast covers neither the header\n * nor the bottom nav, a lift above that nav, swipe in every direction, a z-index above\n * every overlay, the theme fed in from the store — and one of them wrote that policy\n * twice. `toast` mirrors sonner's call shape, so migrating is an import swap:\n *\n *     import { toast } from \"@eifi1/ui-kit\";   // was: from \"sonner\"\n *\n * WHY SONNER IS LOADED LAZILY. It is an OPTIONAL peer, and this module is re-exported by\n * the barrel: a static import here would make every app that imports a Button install\n * it (see optional-peer-imports.test.tsx). So nothing here imports it statically. The\n * `<Toaster>` loads it when it mounts — long before anyone clicks anything — and a call\n * made before that is queued and replayed in order the moment it has loaded. Every call\n * returns its id synchronously anyway: the id is chosen here, not by sonner.\n */\n\ntype Sonner = typeof import(\"sonner\");\ntype SonnerData = NonNullable<Parameters<Sonner[\"toast\"]>[1]>;\n\n/* ── Loading sonner ──────────────────────────────────────────────────────── */\n\nlet sonner: Sonner | null = null;\nlet loading: Promise<Sonner | null> | null = null;\nconst queue: Array<(s: Sonner) => void> = [];\n\nfunction loadSonner(): Promise<Sonner | null> {\n  loading ??= import(\"sonner\").then(\n    (mod) => {\n      sonner = mod;\n      // Flushed in the SAME callback that sets `sonner`, so a call arriving between\n      // the two cannot overtake one that was queued before it.\n      for (const fn of queue.splice(0)) fn(mod);\n      return mod;\n    },\n    () => {\n      queue.length = 0;\n      console.warn(\n        \"@eifi1/ui-kit: `toast` needs the optional peer `sonner` — install it (npm i sonner) to show toasts.\",\n      );\n      return null;\n    },\n  );\n  return loading;\n}\n\nfunction withSonner(fn: (s: Sonner) => void): void {\n  if (sonner) {\n    fn(sonner);\n    return;\n  }\n  queue.push(fn);\n  void loadSonner();\n}\n\nlet counter = 0;\nconst nextId = () => `kit-toast-${++counter}`;\n\n/* ── Labels ──────────────────────────────────────────────────────────────── */\n\n/** The words the toast layer says. `close` and `notifications` are read by a screen\n *  reader (the close button's name, the toast region's name); `undo` and `redo` are\n *  the default action labels of {@link toast.undo} / {@link toast.redo}. */\nexport interface ToastLabels {\n  close: string;\n  notifications: string;\n  undo: string;\n  redo: string;\n}\n\nexport const DEFAULT_TOAST_LABELS: ToastLabels = {\n  close: \"Close notification\",\n  notifications: \"Notifications\",\n  undo: \"Undo\",\n  redo: \"Redo\",\n};\n\n/** What the mounted `<Toaster>` resolved from `<UiKitProvider>` — so `toast.undo()`,\n *  which is called from mutation callbacks and not from a component, still says\n *  \"Rückgängig\" in a German app. */\nlet activeLabels: ToastLabels = DEFAULT_TOAST_LABELS;\n\n/* ── The API ─────────────────────────────────────────────────────────────── */\n\nexport type ToastId = string | number;\n\n/** A button on the toast. Clicking it dismisses the toast, unless `onClick` calls\n *  `event.preventDefault()`. */\nexport interface ToastAction {\n  label: ReactNode;\n  onClick: (event: MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport interface ToastOptions {\n  /** Re-using an id REPLACES the toast on screen with that id (in place — it does not\n   *  stack a second one), which is how a toast is updated. Default: a fresh id. */\n  id?: ToastId;\n  description?: ReactNode;\n  action?: ToastAction;\n  /** A second, quieter button (sonner's `cancel`). */\n  cancel?: ToastAction;\n  /** Milliseconds; `Infinity` keeps it until dismissed. Default 4s — or\n   *  {@link TOAST_ACTION_DURATION} when there is an `action`, so there is time to\n   *  read the message AND reach the button. */\n  duration?: number;\n  /** Called when the toast is closed by the user (close button, swipe, action). */\n  onDismiss?: (toast: { id: ToastId }) => void;\n  /** Called when the toast times out. */\n  onAutoClose?: (toast: { id: ToastId }) => void;\n  /** Wrap the message and the description in `data-private`, so an app's demo /\n   *  privacy mode blurs them like every other sensitive value. */\n  redact?: boolean;\n  /** Replaces the tone's icon. */\n  icon?: ReactNode;\n  /** `false`: no close button, no swipe. */\n  dismissible?: boolean;\n  /** Per toast, over the `<Toaster>`'s `closeButton`. */\n  closeButton?: boolean;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/** The default duration of a toast that carries an action (8s rather than 4s). */\nexport const TOAST_ACTION_DURATION = 8000;\n\ntype Kind = \"default\" | \"success\" | \"error\" | \"warning\" | \"info\" | \"loading\";\n\nconst privately = (node: ReactNode) => <span data-private=\"\">{node}</span>;\n\nfunction toSonnerData(opts: ToastOptions | undefined, id: ToastId): SonnerData {\n  const { redact, description, duration, action, ...rest } = opts ?? {};\n  const data: SonnerData = { ...rest, id };\n  if (description !== undefined) data.description = redact ? privately(description) : description;\n  if (action) data.action = action;\n  const resolved = duration ?? (action ? TOAST_ACTION_DURATION : undefined);\n  if (resolved !== undefined) data.duration = resolved;\n  return data;\n}\n\nfunction show(kind: Kind, message: ReactNode, opts?: ToastOptions): ToastId {\n  const id = opts?.id ?? nextId();\n  const title = opts?.redact ? privately(message) : message;\n  const data = toSonnerData(opts, id);\n  withSonner((s) => {\n    if (kind === \"default\") s.toast(title, data);\n    else s.toast[kind](title, data);\n  });\n  return id;\n}\n\nexport interface ToastPromiseOptions<T> extends ToastOptions {\n  loading: ReactNode;\n  /** The success message, or a function of the resolved value. Omitted: the loading\n   *  toast is dismissed. */\n  success?: ReactNode | ((value: T) => ReactNode);\n  /** The error message, or a function of the rejection. Omitted: dismissed. */\n  error?: ReactNode | ((error: unknown) => ReactNode);\n  finally?: () => void;\n}\n\nexport interface ToastUndoOptions extends Omit<ToastOptions, \"action\"> {\n  /** Called when the button is pressed. */\n  onUndo: () => void;\n  /** Default: `toast.undo` from `<UiKitProvider>` (\"Undo\"). */\n  label?: ReactNode;\n  /** Default `success` — the step the toast reports worked. */\n  tone?: Exclude<Kind, \"loading\">;\n}\n\nexport interface ToastRedoOptions extends Omit<ToastUndoOptions, \"onUndo\"> {\n  onRedo: () => void;\n}\n\nfunction undoable(\n  message: ReactNode,\n  { tone = \"success\", label, run, ...opts }: Omit<ToastUndoOptions, \"onUndo\"> & { run: () => void },\n  fallback: ReactNode,\n): ToastId {\n  return show(tone, message, {\n    ...opts,\n    action: { label: label ?? fallback, onClick: () => run() },\n  });\n}\n\n/**\n * Show a toast. The same shape as sonner's `toast`, so an app migrates by changing the\n * import: `toast(msg, opts)`, `toast.success` / `error` / `warning` / `info` /\n * `loading`, `toast.promise`, `toast.dismiss`, `toast.custom`. Each returns the toast's\n * id; pass it back as `id` to replace that toast in place.\n *\n * Needs a mounted {@link Toaster}. Messages may be any ReactNode.\n */\nexport const toast = Object.assign(\n  (message: ReactNode, opts?: ToastOptions): ToastId => show(\"default\", message, opts),\n  {\n    message: (message: ReactNode, opts?: ToastOptions) => show(\"default\", message, opts),\n    success: (message: ReactNode, opts?: ToastOptions) => show(\"success\", message, opts),\n    error: (message: ReactNode, opts?: ToastOptions) => show(\"error\", message, opts),\n    warning: (message: ReactNode, opts?: ToastOptions) => show(\"warning\", message, opts),\n    info: (message: ReactNode, opts?: ToastOptions) => show(\"info\", message, opts),\n    /** A spinner that does not time out — replace it (same `id`) or dismiss it. */\n    loading: (message: ReactNode, opts?: ToastOptions) => show(\"loading\", message, opts),\n\n    /**\n     * A loading toast that becomes the success or the error toast, in place, when\n     * `promise` settles. Returns the toast's id; the promise itself is the caller's.\n     */\n    promise<T>(promise: Promise<T> | (() => Promise<T>), options: ToastPromiseOptions<T>): ToastId {\n      const { loading: pending, success, error, finally: onFinally, ...opts } = options;\n      const id = show(\"loading\", pending, opts);\n      const same = { ...opts, id };\n      Promise.resolve()\n        .then(() => (typeof promise === \"function\" ? promise() : promise))\n        .then(\n          (value) => {\n            if (success === undefined) toast.dismiss(id);\n            else show(\"success\", typeof success === \"function\" ? success(value) : success, same);\n          },\n          (reason: unknown) => {\n            if (error === undefined) toast.dismiss(id);\n            else show(\"error\", typeof error === \"function\" ? error(reason) : error, same);\n          },\n        )\n        .finally(() => onFinally?.());\n      return id;\n    },\n\n    /** Close one toast, or every toast when `id` is omitted. */\n    dismiss(id?: ToastId): void {\n      withSonner((s) => s.toast.dismiss(id));\n    },\n\n    /** Render your own node in a toast slot — `render` receives the id to dismiss it. */\n    custom(render: (id: ToastId) => ReactElement, opts?: Omit<ToastOptions, \"redact\">): ToastId {\n      const id = opts?.id ?? nextId();\n      const data = toSonnerData(opts, id);\n      withSonner((s) => s.toast.custom(render, data));\n      return id;\n    },\n\n    /**\n     * \"Deleted — Undo\": a toast whose action takes the step back, labelled by the\n     * provider's `toast.undo`. The journal stays the app's; this is only its toast.\n     * Pair with {@link toast.redo} so the step back can itself be taken back.\n     */\n    undo(message: ReactNode, { onUndo, ...opts }: ToastUndoOptions): ToastId {\n      return undoable(message, { ...opts, run: onUndo }, activeLabels.undo);\n    },\n\n    /** {@link toast.undo}'s mirror: the action is labelled `toast.redo`. */\n    redo(message: ReactNode, { onRedo, ...opts }: ToastRedoOptions): ToastId {\n      return undoable(message, { ...opts, run: onRedo }, activeLabels.redo);\n    },\n  },\n);\n\n/* ── The Toaster ─────────────────────────────────────────────────────────── */\n\nexport type ToastPosition =\n  | \"top-left\"\n  | \"top-center\"\n  | \"top-right\"\n  | \"bottom-left\"\n  | \"bottom-center\"\n  | \"bottom-right\";\n\nexport type ToastSwipeDirection = \"top\" | \"right\" | \"bottom\" | \"left\";\n\n/** sonner's offset: one value for every edge, or per edge. Numbers are px. */\nexport type ToasterOffset =\n  | string\n  | number\n  | { top?: string | number; right?: string | number; bottom?: string | number; left?: string | number };\n\nexport interface ToasterProps {\n  /** Default: `bottom-center` on a phone (so the toast covers neither the header's\n   *  buttons nor the bottom nav's), `top-center` from `md` up. */\n  position?: ToastPosition;\n  /** The height to keep clear at the bottom — AppShell's bottom nav. Default: its\n   *  measured `--app-nav-h`, so nothing has to be passed under an AppShell. The safe\n   *  area is added either way. Numbers are px. */\n  navOffset?: string | number;\n  /** Default: follows the `.dark` class the kit's theme store (`useApplyTheme`) puts\n   *  on `<html>` — whichever store the app built, with nothing passed. */\n  theme?: \"light\" | \"dark\" | \"system\";\n  labels?: Partial<ToastLabels>;\n  /** Default 4s (8s for a toast with an action). */\n  duration?: number;\n  visibleToasts?: number;\n  expand?: boolean;\n  /** Default true. */\n  closeButton?: boolean;\n  /** Tone-coloured toasts (the AlertBanner tokens). Default true. */\n  richColors?: boolean;\n  /** Default: every direction. */\n  swipeDirections?: ToastSwipeDirection[];\n  /** Overrides the computed offset outright (above the nav on a phone, below a 48px\n   *  top bar on desktop). */\n  offset?: ToasterOffset;\n  /** Below 600px, where sonner switches to its full-width layout. Default: `offset`'s\n   *  phone value. */\n  mobileOffset?: ToasterOffset;\n  /** Keyboard shortcut that moves focus into the toasts. Default Alt+T. */\n  hotkey?: string[];\n  gap?: number;\n  dir?: \"ltr\" | \"rtl\" | \"auto\";\n  className?: string;\n  style?: CSSProperties;\n}\n\n/** The kit's palette, mapped onto sonner's variables. Inline on the toaster element,\n *  so it wins over sonner's injected sheet with no specificity contest. The tone\n *  backgrounds go through `--toast-*` aliases computed at `:root` in tokens.css:\n *  sonner redefines `--success-bg` on this same element, and a variable cannot read\n *  its own name — `--success-bg: var(--success-bg)` here would be a cycle. */\nconst KIT_TOASTER_STYLE = {\n  zIndex: \"var(--z-toast, 2147483647)\",\n  fontFamily: \"inherit\",\n  \"--normal-bg\": \"var(--bg-surface)\",\n  \"--normal-bg-hover\": \"var(--bg-hover)\",\n  \"--normal-border\": \"var(--border)\",\n  \"--normal-border-hover\": \"var(--border-strong)\",\n  \"--normal-text\": \"var(--text-primary)\",\n  \"--gray2\": \"var(--bg-hover)\",\n  \"--gray5\": \"var(--border-strong)\",\n  \"--gray11\": \"var(--text-muted)\",\n  \"--success-bg\": \"var(--toast-success-bg)\",\n  \"--success-border\": \"var(--toast-success-border)\",\n  \"--success-text\": \"var(--success)\",\n  \"--info-bg\": \"var(--toast-info-bg)\",\n  \"--info-border\": \"var(--toast-info-border)\",\n  \"--info-text\": \"var(--info)\",\n  \"--warning-bg\": \"var(--toast-warning-bg)\",\n  \"--warning-border\": \"var(--toast-warning-border)\",\n  \"--warning-text\": \"var(--warning)\",\n  \"--error-bg\": \"var(--toast-danger-bg)\",\n  \"--error-border\": \"var(--toast-danger-border)\",\n  \"--error-text\": \"var(--danger)\",\n} as CSSProperties;\n\nconst ALL_DIRECTIONS: ToastSwipeDirection[] = [\"top\", \"right\", \"bottom\", \"left\"];\n\n/** Light or dark, as the `.dark` class on `<html>` says right now. */\nfunction readDocumentTheme(): \"light\" | \"dark\" {\n  return typeof document !== \"undefined\" && document.documentElement.classList.contains(\"dark\")\n    ? \"dark\"\n    : \"light\";\n}\n\nfunction subscribeDocumentTheme(onChange: () => void): () => void {\n  if (typeof MutationObserver === \"undefined\") return () => {};\n  const mo = new MutationObserver(onChange);\n  mo.observe(document.documentElement, { attributes: true, attributeFilter: [\"class\"] });\n  return () => mo.disconnect();\n}\n\nconst px = (v: string | number) => (typeof v === \"number\" ? `${v}px` : v);\n\n/**\n * Where the toasts appear, with the kit's defaults — mount ONE, near the root and\n * inside `<UiKitProvider>` (it reads the `toast` labels) and inside the router if a\n * toast's content navigates.\n *\n * Accessible as sonner makes it: the toasts sit in a polite live region, so a message\n * is announced with its description and its action's label; every toast and every\n * button in it is focusable, the timer pauses while focus or the pointer is inside,\n * and Alt+T ({@link ToasterProps.hotkey}) moves focus to the newest toast. A toast\n * with an action stays up 8s by default, so the button can be reached.\n */\nexport function Toaster({\n  position,\n  navOffset,\n  theme,\n  labels: labelsProp,\n  closeButton = true,\n  richColors = true,\n  swipeDirections = ALL_DIRECTIONS,\n  offset,\n  mobileOffset,\n  className,\n  style,\n  ...rest\n}: ToasterProps) {\n  const [mod, setMod] = useState<Sonner | null>(sonner);\n  useEffect(() => {\n    if (mod) return;\n    let live = true;\n    void loadSonner().then((m) => {\n      if (live && m) setMod(m);\n    });\n    return () => {\n      live = false;\n    };\n  }, [mod]);\n\n  const labels = useKitLabels(\"toast\", DEFAULT_TOAST_LABELS, labelsProp);\n  useEffect(() => {\n    activeLabels = labels;\n    return () => {\n      if (activeLabels === labels) activeLabels = DEFAULT_TOAST_LABELS;\n    };\n  }, [labels]);\n\n  const documentTheme = useSyncExternalStore(subscribeDocumentTheme, readDocumentTheme, () => \"light\" as const);\n  const phone = useMediaQuery(PHONE_QUERY, false);\n  const resolved: ToastPosition = position ?? (phone ? \"bottom-center\" : \"top-center\");\n\n  // Above the bottom nav and the home indicator: whichever is taller, since the nav\n  // already pads itself by the safe area (the same sum BulkActionBar floats on).\n  const bottom = `calc(max(${navOffset === undefined ? \"var(--app-nav-h, 0px)\" : px(navOffset)}, env(safe-area-inset-bottom, 0px)) + 0.75rem)`;\n  // Below a 48px TopBar with the same 1rem clearance.\n  const top = \"calc(env(safe-area-inset-top, 0px) + 4rem)\";\n  const computed = resolved.startsWith(\"bottom\") ? { bottom } : { top };\n\n  if (!mod) return null;\n  const Sonner = mod.Toaster;\n  return (\n    <Sonner\n      {...rest}\n      position={resolved}\n      theme={theme ?? documentTheme}\n      closeButton={closeButton}\n      richColors={richColors}\n      swipeDirections={swipeDirections}\n      offset={offset ?? computed}\n      mobileOffset={mobileOffset ?? offset ?? computed}\n      containerAriaLabel={labels.notifications}\n      toastOptions={{ closeButtonAriaLabel: labels.close }}\n      className={className ? `kit-toaster ${className}` : \"kit-toaster\"}\n      style={{ ...KIT_TOASTER_STYLE, ...style }}\n    />\n  );\n}\n"],"mappings":";AAuIuC;AAvIvC,SAAS,WAAW,UAAU,4BAA4B;AAE1D,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AA0B5B,IAAI,SAAwB;AAC5B,IAAI,UAAyC;AAC7C,MAAM,QAAoC,CAAC;AAE3C,SAAS,aAAqC;AAC5C,cAAY,OAAO,QAAQ,EAAE;AAAA,IAC3B,CAAC,QAAQ;AACP,eAAS;AAGT,iBAAW,MAAM,MAAM,OAAO,CAAC,EAAG,IAAG,GAAG;AACxC,aAAO;AAAA,IACT;AAAA,IACA,MAAM;AACJ,YAAM,SAAS;AACf,cAAQ;AAAA,QACN;AAAA,MACF;AACA,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAEA,SAAS,WAAW,IAA+B;AACjD,MAAI,QAAQ;AACV,OAAG,MAAM;AACT;AAAA,EACF;AACA,QAAM,KAAK,EAAE;AACb,OAAK,WAAW;AAClB;AAEA,IAAI,UAAU;AACd,MAAM,SAAS,MAAM,aAAa,EAAE,OAAO;AAcpC,MAAM,uBAAoC;AAAA,EAC/C,OAAO;AAAA,EACP,eAAe;AAAA,EACf,MAAM;AAAA,EACN,MAAM;AACR;AAKA,IAAI,eAA4B;AA2CzB,MAAM,wBAAwB;AAIrC,MAAM,YAAY,CAAC,SAAoB,oBAAC,UAAK,gBAAa,IAAI,gBAAK;AAEnE,SAAS,aAAa,MAAgC,IAAyB;AAC7E,QAAM,EAAE,QAAQ,aAAa,UAAU,QAAQ,GAAG,KAAK,IAAI,QAAQ,CAAC;AACpE,QAAM,OAAmB,EAAE,GAAG,MAAM,GAAG;AACvC,MAAI,gBAAgB,OAAW,MAAK,cAAc,SAAS,UAAU,WAAW,IAAI;AACpF,MAAI,OAAQ,MAAK,SAAS;AAC1B,QAAM,WAAW,aAAa,SAAS,wBAAwB;AAC/D,MAAI,aAAa,OAAW,MAAK,WAAW;AAC5C,SAAO;AACT;AAEA,SAAS,KAAK,MAAY,SAAoB,MAA8B;AAC1E,QAAM,KAAK,MAAM,MAAM,OAAO;AAC9B,QAAM,QAAQ,MAAM,SAAS,UAAU,OAAO,IAAI;AAClD,QAAM,OAAO,aAAa,MAAM,EAAE;AAClC,aAAW,CAAC,MAAM;AAChB,QAAI,SAAS,UAAW,GAAE,MAAM,OAAO,IAAI;AAAA,QACtC,GAAE,MAAM,IAAI,EAAE,OAAO,IAAI;AAAA,EAChC,CAAC;AACD,SAAO;AACT;AAyBA,SAAS,SACP,SACA,EAAE,OAAO,WAAW,OAAO,KAAK,GAAG,KAAK,GACxC,UACS;AACT,SAAO,KAAK,MAAM,SAAS;AAAA,IACzB,GAAG;AAAA,IACH,QAAQ,EAAE,OAAO,SAAS,UAAU,SAAS,MAAM,IAAI,EAAE;AAAA,EAC3D,CAAC;AACH;AAUO,MAAM,QAAQ,OAAO;AAAA,EAC1B,CAAC,SAAoB,SAAiC,KAAK,WAAW,SAAS,IAAI;AAAA,EACnF;AAAA,IACE,SAAS,CAAC,SAAoB,SAAwB,KAAK,WAAW,SAAS,IAAI;AAAA,IACnF,SAAS,CAAC,SAAoB,SAAwB,KAAK,WAAW,SAAS,IAAI;AAAA,IACnF,OAAO,CAAC,SAAoB,SAAwB,KAAK,SAAS,SAAS,IAAI;AAAA,IAC/E,SAAS,CAAC,SAAoB,SAAwB,KAAK,WAAW,SAAS,IAAI;AAAA,IACnF,MAAM,CAAC,SAAoB,SAAwB,KAAK,QAAQ,SAAS,IAAI;AAAA;AAAA,IAE7E,SAAS,CAAC,SAAoB,SAAwB,KAAK,WAAW,SAAS,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,IAMnF,QAAW,SAA0C,SAA0C;AAC7F,YAAM,EAAE,SAAS,SAAS,SAAS,OAAO,SAAS,WAAW,GAAG,KAAK,IAAI;AAC1E,YAAM,KAAK,KAAK,WAAW,SAAS,IAAI;AACxC,YAAM,OAAO,EAAE,GAAG,MAAM,GAAG;AAC3B,cAAQ,QAAQ,EACb,KAAK,MAAO,OAAO,YAAY,aAAa,QAAQ,IAAI,OAAQ,EAChE;AAAA,QACC,CAAC,UAAU;AACT,cAAI,YAAY,OAAW,OAAM,QAAQ,EAAE;AAAA,cACtC,MAAK,WAAW,OAAO,YAAY,aAAa,QAAQ,KAAK,IAAI,SAAS,IAAI;AAAA,QACrF;AAAA,QACA,CAAC,WAAoB;AACnB,cAAI,UAAU,OAAW,OAAM,QAAQ,EAAE;AAAA,cACpC,MAAK,SAAS,OAAO,UAAU,aAAa,MAAM,MAAM,IAAI,OAAO,IAAI;AAAA,QAC9E;AAAA,MACF,EACC,QAAQ,MAAM,YAAY,CAAC;AAC9B,aAAO;AAAA,IACT;AAAA;AAAA,IAGA,QAAQ,IAAoB;AAC1B,iBAAW,CAAC,MAAM,EAAE,MAAM,QAAQ,EAAE,CAAC;AAAA,IACvC;AAAA;AAAA,IAGA,OAAO,QAAuC,MAA8C;AAC1F,YAAM,KAAK,MAAM,MAAM,OAAO;AAC9B,YAAM,OAAO,aAAa,MAAM,EAAE;AAClC,iBAAW,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ,IAAI,CAAC;AAC9C,aAAO;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,KAAK,SAAoB,EAAE,QAAQ,GAAG,KAAK,GAA8B;AACvE,aAAO,SAAS,SAAS,EAAE,GAAG,MAAM,KAAK,OAAO,GAAG,aAAa,IAAI;AAAA,IACtE;AAAA;AAAA,IAGA,KAAK,SAAoB,EAAE,QAAQ,GAAG,KAAK,GAA8B;AACvE,aAAO,SAAS,SAAS,EAAE,GAAG,MAAM,KAAK,OAAO,GAAG,aAAa,IAAI;AAAA,IACtE;AAAA,EACF;AACF;AA6DA,MAAM,oBAAoB;AAAA,EACxB,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,yBAAyB;AAAA,EACzB,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,kBAAkB;AAAA,EAClB,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,kBAAkB;AAAA,EAClB,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,gBAAgB;AAClB;AAEA,MAAM,iBAAwC,CAAC,OAAO,SAAS,UAAU,MAAM;AAG/E,SAAS,oBAAsC;AAC7C,SAAO,OAAO,aAAa,eAAe,SAAS,gBAAgB,UAAU,SAAS,MAAM,IACxF,SACA;AACN;AAEA,SAAS,uBAAuB,UAAkC;AAChE,MAAI,OAAO,qBAAqB,YAAa,QAAO,MAAM;AAAA,EAAC;AAC3D,QAAM,KAAK,IAAI,iBAAiB,QAAQ;AACxC,KAAG,QAAQ,SAAS,iBAAiB,EAAE,YAAY,MAAM,iBAAiB,CAAC,OAAO,EAAE,CAAC;AACrF,SAAO,MAAM,GAAG,WAAW;AAC7B;AAEA,MAAM,KAAK,CAAC,MAAwB,OAAO,MAAM,WAAW,GAAG,CAAC,OAAO;AAahE,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiB;AACf,QAAM,CAAC,KAAK,MAAM,IAAI,SAAwB,MAAM;AACpD,YAAU,MAAM;AACd,QAAI,IAAK;AACT,QAAI,OAAO;AACX,SAAK,WAAW,EAAE,KAAK,CAAC,MAAM;AAC5B,UAAI,QAAQ,EAAG,QAAO,CAAC;AAAA,IACzB,CAAC;AACD,WAAO,MAAM;AACX,aAAO;AAAA,IACT;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AAER,QAAM,SAAS,aAAa,SAAS,sBAAsB,UAAU;AACrE,YAAU,MAAM;AACd,mBAAe;AACf,WAAO,MAAM;AACX,UAAI,iBAAiB,OAAQ,gBAAe;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,gBAAgB,qBAAqB,wBAAwB,mBAAmB,MAAM,OAAgB;AAC5G,QAAM,QAAQ,cAAc,aAAa,KAAK;AAC9C,QAAM,WAA0B,aAAa,QAAQ,kBAAkB;AAIvE,QAAM,SAAS,YAAY,cAAc,SAAY,0BAA0B,GAAG,SAAS,CAAC;AAE5F,QAAM,MAAM;AACZ,QAAM,WAAW,SAAS,WAAW,QAAQ,IAAI,EAAE,OAAO,IAAI,EAAE,IAAI;AAEpE,MAAI,CAAC,IAAK,QAAO;AACjB,QAAM,SAAS,IAAI;AACnB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU;AAAA,MACV,OAAO,SAAS;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,UAAU;AAAA,MAClB,cAAc,gBAAgB,UAAU;AAAA,MACxC,oBAAoB,OAAO;AAAA,MAC3B,cAAc,EAAE,sBAAsB,OAAO,MAAM;AAAA,MACnD,WAAW,YAAY,eAAe,SAAS,KAAK;AAAA,MACpD,OAAO,EAAE,GAAG,mBAAmB,GAAG,MAAM;AAAA;AAAA,EAC1C;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/toast.tsx"],"sourcesContent":["import { useEffect, useState, useSyncExternalStore } from \"react\";\nimport type { CSSProperties, MouseEvent, ReactElement, ReactNode } from \"react\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { PHONE_QUERY } from \"./ui\";\n\n/**\n * The kit's toast layer: a `toast` API and a `<Toaster>`, over sonner.\n *\n * WHY A WRAPPER AND NOT \"USE SONNER\". Both apps mounted sonner by hand and carried the\n * same policy in it — bottom-centre on a phone so the toast covers neither the header\n * nor the bottom nav, a lift above that nav, swipe in every direction, a z-index above\n * every overlay, the theme fed in from the store — and one of them wrote that policy\n * twice. `toast` mirrors sonner's call shape, so migrating is an import swap:\n *\n *     import { toast } from \"@eifi1/ui-kit\";   // was: from \"sonner\"\n *\n * WHY SONNER IS LOADED LAZILY. It is an OPTIONAL peer, and this module is re-exported by\n * the barrel: a static import here would make every app that imports a Button install\n * it (see optional-peer-imports.test.tsx). So nothing here imports it statically. The\n * `<Toaster>` loads it when it mounts — long before anyone clicks anything — and a call\n * made before that is queued and replayed in order the moment it has loaded. Every call\n * returns its id synchronously anyway: the id is chosen here, not by sonner.\n */\n\ntype Sonner = typeof import(\"sonner\");\ntype SonnerData = NonNullable<Parameters<Sonner[\"toast\"]>[1]>;\n\n/* ── Loading sonner ──────────────────────────────────────────────────────── */\n\nlet sonner: Sonner | null = null;\nlet loading: Promise<Sonner | null> | null = null;\nconst queue: Array<(s: Sonner) => void> = [];\n\nfunction loadSonner(): Promise<Sonner | null> {\n  loading ??= import(\"sonner\").then(\n    (mod) => {\n      sonner = mod;\n      // Flushed in the SAME callback that sets `sonner`, so a call arriving between\n      // the two cannot overtake one that was queued before it.\n      for (const fn of queue.splice(0)) fn(mod);\n      return mod;\n    },\n    () => {\n      queue.length = 0;\n      console.warn(\n        \"@eifi1/ui-kit: `toast` needs the optional peer `sonner` — install it (npm i sonner) to show toasts.\",\n      );\n      return null;\n    },\n  );\n  return loading;\n}\n\nfunction withSonner(fn: (s: Sonner) => void): void {\n  if (sonner) {\n    fn(sonner);\n    return;\n  }\n  queue.push(fn);\n  void loadSonner();\n}\n\nlet counter = 0;\nconst nextId = () => `kit-toast-${++counter}`;\n\n/* ── Labels ──────────────────────────────────────────────────────────────── */\n\n/** The words the toast layer says. `close` and `notifications` are read by a screen\n *  reader (the close button's name, the toast region's name); `undo` and `redo` are\n *  the default action labels of {@link toast.undo} / {@link toast.redo}. */\nexport interface ToastLabels {\n  close: string;\n  notifications: string;\n  undo: string;\n  redo: string;\n}\n\nexport const DEFAULT_TOAST_LABELS: ToastLabels = {\n  close: \"Close notification\",\n  notifications: \"Notifications\",\n  undo: \"Undo\",\n  redo: \"Redo\",\n};\n\n/** What the mounted `<Toaster>` resolved from `<UiKitProvider>` — so `toast.undo()`,\n *  which is called from mutation callbacks and not from a component, still says\n *  \"Rückgängig\" in a German app. */\nlet activeLabels: ToastLabels = DEFAULT_TOAST_LABELS;\n\n/* ── The API ─────────────────────────────────────────────────────────────── */\n\nexport type ToastId = string | number;\n\n/** A button on the toast. Clicking it dismisses the toast, unless `onClick` calls\n *  `event.preventDefault()`. */\nexport interface ToastAction {\n  label: ReactNode;\n  onClick: (event: MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport interface ToastOptions {\n  /** Re-using an id REPLACES the toast on screen with that id (in place — it does not\n   *  stack a second one), which is how a toast is updated. Default: a fresh id. */\n  id?: ToastId;\n  description?: ReactNode;\n  action?: ToastAction;\n  /** A second, quieter button (sonner's `cancel`). */\n  cancel?: ToastAction;\n  /** Milliseconds; `Infinity` keeps it until dismissed. Default 4s — or\n   *  {@link TOAST_ACTION_DURATION} when there is an `action`, so there is time to\n   *  read the message AND reach the button. */\n  duration?: number;\n  /** Called when the toast is closed by the user (close button, swipe, action). */\n  onDismiss?: (toast: { id: ToastId }) => void;\n  /** Called when the toast times out. */\n  onAutoClose?: (toast: { id: ToastId }) => void;\n  /** Wrap the message and the description in `data-private`, so an app's demo /\n   *  privacy mode blurs them like every other sensitive value. */\n  redact?: boolean;\n  /** Replaces the tone's icon. */\n  icon?: ReactNode;\n  /** `false`: no close button, no swipe. */\n  dismissible?: boolean;\n  /** Per toast, over the `<Toaster>`'s `closeButton`. */\n  closeButton?: boolean;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/** The default duration of a toast that carries an action (8s rather than 4s). */\nexport const TOAST_ACTION_DURATION = 8000;\n\ntype Kind = \"default\" | \"success\" | \"error\" | \"warning\" | \"info\" | \"loading\";\n\nconst privately = (node: ReactNode) => <span data-private=\"\">{node}</span>;\n\n/**\n * The toast's id, written onto its `<li>` as a class — the one per-toast attribute\n * sonner passes through untouched besides `testId`, which is the app's (sonner keeps the\n * id in React state only). `<Toaster dismissOnMiddleClick>` reads it back to dismiss\n * the toast under the pointer, close button or not. The type is kept (`s`/`n`) because\n * sonner matches ids with `===`, and the value is URI-encoded so any string id is one\n * whitespace-free class token.\n */\nconst ID_CLASS = \"kit-toast-id-\";\nconst idClass = (id: ToastId) =>\n  `${ID_CLASS}${typeof id === \"number\" ? \"n\" : \"s\"}-${encodeURIComponent(String(id))}`;\n\n/** The id {@link idClass} stamped on a toast element, or null for a toast the kit did\n *  not make (an app still calling sonner directly). */\nfunction readToastId(el: Element): ToastId | null {\n  for (const token of el.classList) {\n    if (!token.startsWith(ID_CLASS)) continue;\n    const kind = token.charAt(ID_CLASS.length);\n    const raw = decodeURIComponent(token.slice(ID_CLASS.length + 2));\n    return kind === \"n\" ? Number(raw) : raw;\n  }\n  return null;\n}\n\nfunction toSonnerData(opts: ToastOptions | undefined, id: ToastId): SonnerData {\n  const { redact, description, duration, action, className, ...rest } = opts ?? {};\n  const data: SonnerData = { ...rest, id, className: className ? `${idClass(id)} ${className}` : idClass(id) };\n  if (description !== undefined) data.description = redact ? privately(description) : description;\n  if (action) data.action = action;\n  const resolved = duration ?? (action ? TOAST_ACTION_DURATION : undefined);\n  if (resolved !== undefined) data.duration = resolved;\n  return data;\n}\n\nfunction show(kind: Kind, message: ReactNode, opts?: ToastOptions): ToastId {\n  const id = opts?.id ?? nextId();\n  const title = opts?.redact ? privately(message) : message;\n  const data = toSonnerData(opts, id);\n  withSonner((s) => {\n    if (kind === \"default\") s.toast(title, data);\n    else s.toast[kind](title, data);\n  });\n  return id;\n}\n\nexport interface ToastPromiseOptions<T> extends ToastOptions {\n  loading: ReactNode;\n  /** The success message, or a function of the resolved value. Omitted: the loading\n   *  toast is dismissed. */\n  success?: ReactNode | ((value: T) => ReactNode);\n  /** The error message, or a function of the rejection. Omitted: dismissed. */\n  error?: ReactNode | ((error: unknown) => ReactNode);\n  finally?: () => void;\n}\n\nexport interface ToastUndoOptions extends Omit<ToastOptions, \"action\"> {\n  /** Called when the button is pressed. */\n  onUndo: () => void;\n  /** Default: `toast.undo` from `<UiKitProvider>` (\"Undo\"). */\n  label?: ReactNode;\n  /** Default `success` — the step the toast reports worked. */\n  tone?: Exclude<Kind, \"loading\">;\n}\n\nexport interface ToastRedoOptions extends Omit<ToastUndoOptions, \"onUndo\"> {\n  onRedo: () => void;\n}\n\nfunction undoable(\n  message: ReactNode,\n  { tone = \"success\", label, run, ...opts }: Omit<ToastUndoOptions, \"onUndo\"> & { run: () => void },\n  fallback: ReactNode,\n): ToastId {\n  return show(tone, message, {\n    ...opts,\n    action: { label: label ?? fallback, onClick: () => run() },\n  });\n}\n\n/**\n * Show a toast. The same shape as sonner's `toast`, so an app migrates by changing the\n * import: `toast(msg, opts)`, `toast.success` / `error` / `warning` / `info` /\n * `loading`, `toast.promise`, `toast.dismiss`, `toast.custom`. Each returns the toast's\n * id; pass it back as `id` to replace that toast in place.\n *\n * Needs a mounted {@link Toaster}. Messages may be any ReactNode.\n */\nexport const toast = Object.assign(\n  (message: ReactNode, opts?: ToastOptions): ToastId => show(\"default\", message, opts),\n  {\n    message: (message: ReactNode, opts?: ToastOptions) => show(\"default\", message, opts),\n    success: (message: ReactNode, opts?: ToastOptions) => show(\"success\", message, opts),\n    error: (message: ReactNode, opts?: ToastOptions) => show(\"error\", message, opts),\n    warning: (message: ReactNode, opts?: ToastOptions) => show(\"warning\", message, opts),\n    info: (message: ReactNode, opts?: ToastOptions) => show(\"info\", message, opts),\n    /** A spinner that does not time out — replace it (same `id`) or dismiss it. */\n    loading: (message: ReactNode, opts?: ToastOptions) => show(\"loading\", message, opts),\n\n    /**\n     * A loading toast that becomes the success or the error toast, in place, when\n     * `promise` settles. Returns the toast's id; the promise itself is the caller's.\n     */\n    promise<T>(promise: Promise<T> | (() => Promise<T>), options: ToastPromiseOptions<T>): ToastId {\n      const { loading: pending, success, error, finally: onFinally, ...opts } = options;\n      const id = show(\"loading\", pending, opts);\n      const same = { ...opts, id };\n      Promise.resolve()\n        .then(() => (typeof promise === \"function\" ? promise() : promise))\n        .then(\n          (value) => {\n            if (success === undefined) toast.dismiss(id);\n            else show(\"success\", typeof success === \"function\" ? success(value) : success, same);\n          },\n          (reason: unknown) => {\n            if (error === undefined) toast.dismiss(id);\n            else show(\"error\", typeof error === \"function\" ? error(reason) : error, same);\n          },\n        )\n        .finally(() => onFinally?.());\n      return id;\n    },\n\n    /** Close one toast, or every toast when `id` is omitted. */\n    dismiss(id?: ToastId): void {\n      withSonner((s) => s.toast.dismiss(id));\n    },\n\n    /** Render your own node in a toast slot — `render` receives the id to dismiss it. */\n    custom(render: (id: ToastId) => ReactElement, opts?: Omit<ToastOptions, \"redact\">): ToastId {\n      const id = opts?.id ?? nextId();\n      const data = toSonnerData(opts, id);\n      withSonner((s) => s.toast.custom(render, data));\n      return id;\n    },\n\n    /**\n     * \"Deleted — Undo\": a toast whose action takes the step back, labelled by the\n     * provider's `toast.undo`. The journal stays the app's; this is only its toast.\n     * Pair with {@link toast.redo} so the step back can itself be taken back.\n     */\n    undo(message: ReactNode, { onUndo, ...opts }: ToastUndoOptions): ToastId {\n      return undoable(message, { ...opts, run: onUndo }, activeLabels.undo);\n    },\n\n    /** {@link toast.undo}'s mirror: the action is labelled `toast.redo`. */\n    redo(message: ReactNode, { onRedo, ...opts }: ToastRedoOptions): ToastId {\n      return undoable(message, { ...opts, run: onRedo }, activeLabels.redo);\n    },\n  },\n);\n\n/* ── The Toaster ─────────────────────────────────────────────────────────── */\n\nexport type ToastPosition =\n  | \"top-left\"\n  | \"top-center\"\n  | \"top-right\"\n  | \"bottom-left\"\n  | \"bottom-center\"\n  | \"bottom-right\";\n\nexport type ToastSwipeDirection = \"top\" | \"right\" | \"bottom\" | \"left\";\n\n/** sonner's offset: one value for every edge, or per edge. Numbers are px. */\nexport type ToasterOffset =\n  | string\n  | number\n  | { top?: string | number; right?: string | number; bottom?: string | number; left?: string | number };\n\nexport interface ToasterProps {\n  /** Default: `bottom-center` on a phone (so the toast covers neither the header's\n   *  buttons nor the bottom nav's), `top-center` from `md` up. */\n  position?: ToastPosition;\n  /** The height to keep clear at the bottom — AppShell's bottom nav. Default: its\n   *  measured `--app-nav-h`, so nothing has to be passed under an AppShell. The safe\n   *  area is added either way. Numbers are px. */\n  navOffset?: string | number;\n  /** Default: follows the `.dark` class the kit's theme store (`useApplyTheme`) puts\n   *  on `<html>` — whichever store the app built, with nothing passed. */\n  theme?: \"light\" | \"dark\" | \"system\";\n  labels?: Partial<ToastLabels>;\n  /** Default 4s (8s for a toast with an action). */\n  duration?: number;\n  visibleToasts?: number;\n  expand?: boolean;\n  /** Default true. */\n  closeButton?: boolean;\n  /** Tone-coloured toasts (the AlertBanner tokens). Default true. */\n  richColors?: boolean;\n  /** Default: every direction. */\n  swipeDirections?: ToastSwipeDirection[];\n  /** Overrides the computed offset outright (above the nav on a phone, below a 48px\n   *  top bar on desktop). */\n  offset?: ToasterOffset;\n  /** Below 600px, where sonner switches to its full-width layout. Default: `offset`'s\n   *  phone value. */\n  mobileOffset?: ToasterOffset;\n  /** Keyboard shortcut that moves focus into the toasts. Default Alt+T. */\n  hotkey?: string[];\n  gap?: number;\n  dir?: \"ltr\" | \"rtl\" | \"auto\";\n  /**\n   * A middle click on a toast dismisses it (0.18.0) — the gesture that closes a tab,\n   * which is what keksdose's users reached for (dev #583). By id, so it works on a\n   * toast with `closeButton: false` too; it counts as the user closing it, so\n   * `onDismiss` runs. Not on a link or a button inside the toast — a middle click on a\n   * link still opens it in a new tab — and not on a `dismissible: false` toast.\n   * Default true.\n   */\n  dismissOnMiddleClick?: boolean;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/** The kit's palette, mapped onto sonner's variables. Inline on the toaster element,\n *  so it wins over sonner's injected sheet with no specificity contest. The tone\n *  backgrounds go through `--toast-*` aliases computed at `:root` in tokens.css:\n *  sonner redefines `--success-bg` on this same element, and a variable cannot read\n *  its own name — `--success-bg: var(--success-bg)` here would be a cycle. */\nconst KIT_TOASTER_STYLE = {\n  zIndex: \"var(--z-toast, 2147483647)\",\n  fontFamily: \"inherit\",\n  \"--normal-bg\": \"var(--bg-surface)\",\n  \"--normal-bg-hover\": \"var(--bg-hover)\",\n  \"--normal-border\": \"var(--border)\",\n  \"--normal-border-hover\": \"var(--border-strong)\",\n  \"--normal-text\": \"var(--text-primary)\",\n  \"--gray2\": \"var(--bg-hover)\",\n  \"--gray5\": \"var(--border-strong)\",\n  \"--gray11\": \"var(--text-muted)\",\n  \"--success-bg\": \"var(--toast-success-bg)\",\n  \"--success-border\": \"var(--toast-success-border)\",\n  \"--success-text\": \"var(--success)\",\n  \"--info-bg\": \"var(--toast-info-bg)\",\n  \"--info-border\": \"var(--toast-info-border)\",\n  \"--info-text\": \"var(--info)\",\n  \"--warning-bg\": \"var(--toast-warning-bg)\",\n  \"--warning-border\": \"var(--toast-warning-border)\",\n  \"--warning-text\": \"var(--warning)\",\n  \"--error-bg\": \"var(--toast-danger-bg)\",\n  \"--error-border\": \"var(--toast-danger-border)\",\n  \"--error-text\": \"var(--danger)\",\n} as CSSProperties;\n\nconst ALL_DIRECTIONS: ToastSwipeDirection[] = [\"top\", \"right\", \"bottom\", \"left\"];\n\n/** Light or dark, as the `.dark` class on `<html>` says right now. */\nfunction readDocumentTheme(): \"light\" | \"dark\" {\n  return typeof document !== \"undefined\" && document.documentElement.classList.contains(\"dark\")\n    ? \"dark\"\n    : \"light\";\n}\n\nfunction subscribeDocumentTheme(onChange: () => void): () => void {\n  if (typeof MutationObserver === \"undefined\") return () => {};\n  const mo = new MutationObserver(onChange);\n  mo.observe(document.documentElement, { attributes: true, attributeFilter: [\"class\"] });\n  return () => mo.disconnect();\n}\n\nconst px = (v: string | number) => (typeof v === \"number\" ? `${v}px` : v);\n\n/**\n * Where the toasts appear, with the kit's defaults — mount ONE, near the root and\n * inside `<UiKitProvider>` (it reads the `toast` labels) and inside the router if a\n * toast's content navigates.\n *\n * Accessible as sonner makes it: the toasts sit in a polite live region, so a message\n * is announced with its description and its action's label; every toast and every\n * button in it is focusable, the timer pauses while focus or the pointer is inside,\n * and Alt+T ({@link ToasterProps.hotkey}) moves focus to the newest toast. A toast\n * with an action stays up 8s by default, so the button can be reached.\n */\nexport function Toaster({\n  position,\n  navOffset,\n  theme,\n  labels: labelsProp,\n  closeButton = true,\n  richColors = true,\n  swipeDirections = ALL_DIRECTIONS,\n  offset,\n  mobileOffset,\n  dismissOnMiddleClick = true,\n  className,\n  style,\n  ...rest\n}: ToasterProps) {\n  const [mod, setMod] = useState<Sonner | null>(sonner);\n  useEffect(() => {\n    if (mod) return;\n    let live = true;\n    void loadSonner().then((m) => {\n      if (live && m) setMod(m);\n    });\n    return () => {\n      live = false;\n    };\n  }, [mod]);\n\n  const labels = useKitLabels(\"toast\", DEFAULT_TOAST_LABELS, labelsProp);\n  useEffect(() => {\n    activeLabels = labels;\n    return () => {\n      if (activeLabels === labels) activeLabels = DEFAULT_TOAST_LABELS;\n    };\n  }, [labels]);\n\n  useEffect(() => {\n    if (!dismissOnMiddleClick || !mod) return;\n    // On the document rather than the toaster: sonner owns the `<ol>`, and a listener\n    // there would have to be re-attached whenever it remounts it.\n    const toastUnder = (e: globalThis.MouseEvent) => {\n      if (e.button !== 1 || !(e.target instanceof Element)) return null;\n      const li = e.target.closest<HTMLElement>(\"[data-sonner-toast]\");\n      if (!li || li.dataset.dismissible === \"false\") return null;\n      // A link keeps its middle click (open in a new tab); a button or a field inside\n      // the toast is the app's, not a background to click.\n      const control = e.target.closest(\"a[href], button, input, select, textarea, [role='button'], [role='link']\");\n      if (control && li.contains(control)) return null;\n      return li;\n    };\n    // `mousedown`: the middle button starts autoscroll (Windows) before any click.\n    const onDown = (e: globalThis.MouseEvent) => {\n      if (toastUnder(e)) e.preventDefault();\n    };\n    const onAux = (e: globalThis.MouseEvent) => {\n      const li = toastUnder(e);\n      if (!li) return;\n      // No paste of the primary selection on Linux, no other handler's idea of it.\n      e.preventDefault();\n      const id = readToastId(li);\n      if (id !== null) mod.toast.dismiss(id);\n      // A toast made by sonner directly carries no id: its close button, if any.\n      else li.querySelector<HTMLButtonElement>(\"[data-close-button]\")?.click();\n    };\n    document.addEventListener(\"mousedown\", onDown);\n    document.addEventListener(\"auxclick\", onAux);\n    return () => {\n      document.removeEventListener(\"mousedown\", onDown);\n      document.removeEventListener(\"auxclick\", onAux);\n    };\n  }, [dismissOnMiddleClick, mod]);\n\n  const documentTheme = useSyncExternalStore(subscribeDocumentTheme, readDocumentTheme, () => \"light\" as const);\n  const phone = useMediaQuery(PHONE_QUERY, false);\n  const resolved: ToastPosition = position ?? (phone ? \"bottom-center\" : \"top-center\");\n\n  // Above the bottom nav and the home indicator: whichever is taller, since the nav\n  // already pads itself by the safe area (the same sum BulkActionBar floats on).\n  const bottom = `calc(max(${navOffset === undefined ? \"var(--app-nav-h, 0px)\" : px(navOffset)}, env(safe-area-inset-bottom, 0px)) + 0.75rem)`;\n  // Below a 48px TopBar with the same 1rem clearance.\n  const top = \"calc(env(safe-area-inset-top, 0px) + 4rem)\";\n  const computed = resolved.startsWith(\"bottom\") ? { bottom } : { top };\n\n  if (!mod) return null;\n  const Sonner = mod.Toaster;\n  return (\n    <Sonner\n      {...rest}\n      position={resolved}\n      theme={theme ?? documentTheme}\n      closeButton={closeButton}\n      richColors={richColors}\n      swipeDirections={swipeDirections}\n      offset={offset ?? computed}\n      mobileOffset={mobileOffset ?? offset ?? computed}\n      containerAriaLabel={labels.notifications}\n      toastOptions={{ closeButtonAriaLabel: labels.close }}\n      className={className ? `kit-toaster ${className}` : \"kit-toaster\"}\n      style={{ ...KIT_TOASTER_STYLE, ...style }}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/toggle-group.js

@@ -136,8 +136,11 @@ function ToggleGroup(props) {
               field && "py-0 leading-5",
               active ? "bg-[var(--bg-inverse)] text-[var(--text-inverse)]" : "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]",
               // No hover fill on a group that cannot be changed — a segment that
-              // lights up under the pointer is an offer, and there is none here.
-              disabled && "cursor-not-allowed hover:bg-transparent dark:hover:bg-transparent",
+              // lights up under the pointer is an offer, and there is none here. Not on
+              // the chosen segment: its fill IS its state, and its inverse text would
+              // vanish on a transparent hover.
+              disabled && "cursor-not-allowed",
+              disabled && !active && "hover:bg-transparent dark:hover:bg-transparent",
               optionClassName,
               opt.className
             ),

package/dist/components/toggle-group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/toggle-group.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactElement, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { FIELD_INVALID, FloatingField, Label } from \"./ui\";\n\nexport interface ToggleOption<T extends string> {\n  value: T;\n  label: string;\n  className?: string;\n}\n\n/**\n * `onChange` is the group's own — the chosen VALUE, not a DOM event — so the div's\n * `onChange` is omitted rather than shadowed: leaving both in scope would give the\n * prop two incompatible meanings depending on which overload TypeScript picked.\n *\n * `children` is omitted too: this renders its `options` and nothing else, so a `children` the type\n * accepted and the component ignored would be a prop that silently does nothing —\n * worse than one that does not compile.\n */\nexport interface ToggleGroupBaseProps<T extends string>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"children\"> {\n  options: ToggleOption<T>[];\n  className?: string;\n  /** Applied to every option button (e.g. to tune height/rounding to match\n   *  adjacent fields). Per-option `className` still wins over this. */\n  optionClassName?: string;\n  /**\n   * What happens when the options do not fit the group's width. `\"truncate\"`\n   * (default): one row, and the labels that do not fit end in an ellipsis — the height\n   * never changes. `\"wrap\"`: the segments flow onto a second row and every label stays\n   * whole (\"Bewegung\", not \"Beweg…\"), at the price of a taller group on a narrow\n   * screen (lenkbank L4: five signal types on a 390px control page). From the width\n   * where they fit, both look the same.\n   */\n  overflow?: \"truncate\" | \"wrap\";\n  /**\n   * @deprecated Pass `aria-label` instead — the DOM spelling, which every other\n   * control in this kit now answers to. Kept working because three applications ship\n   * this one today; it names the group only when `aria-label` is absent.\n   */\n  ariaLabel?: string;\n  /**\n   * Show, refuse the change (Keksdose live #288: a payment dated in the future has no\n   * state to set).\n   *\n   * Whatever `value` says stays pressed and keeps its own fill rather than going grey\n   * with the rest — a reader who cannot see WHICH option is chosen has been told less\n   * than before it was disabled. A caller with nothing to show passes no value, and\n   * the group renders dimmed with nothing pressed, which is the shape Keksdose's\n   * status picker uses for a row whose status does not exist yet.\n   *\n   * On the whole GROUP, not per option: a segmented control where some segments are\n   * live and others are not is a menu with holes in it, and no caller here wants one.\n   */\n  disabled?: boolean;\n  /**\n   * `sm`: 12px options with `px-2 py-1` — the compact group keksdose's rule editor\n   * (rule-editor:204) writes as `optionClassName=\"px-2 py-1 text-xs\"` beside a small\n   * caption. `md` (default) is the size every other group has.\n   */\n  size?: \"sm\" | \"md\";\n  /**\n   * Stand in a form row as a FIELD: with a label the group wears the field's chrome —\n   * border, surface, the top strip with a small static label in it, a labelled\n   * {@link Select}'s height — so beside an Input or a Select it reads as one of them\n   * rather than as a control with a caption over it. lenkbank builds exactly this by\n   * hand as `ToggleField` (features/gear/common.tsx:97, feedback #69), and its notes\n   * are why the chrome STRETCHES to its row as well as matching the select's padding:\n   * a native select's height is the browser's, so a toggle a few pixels short of it\n   * is levelled up by the row rather than by arithmetic.\n   *\n   * The label names the group (`aria-labelledby`), so `aria-label` is not needed. With\n   * a label, `className` styles the field's wrapper — as on {@link Select} — and the\n   * group's own box is dropped: two nested borders read as a control in a control.\n   */\n  label?: ReactNode;\n  /**\n   * Where `label` goes. `\"field\"` (default): the field chrome described under `label`.\n   * `\"above\"`: the kit's {@link Label} over the bare group — the shape of a {@link Field}\n   * — with `hint` beside the label and `error` under the group, for a form that sets\n   * its labels above its fields (kastlan's international-rent-calculator.tsx, whose DE\n   * cap pair sits in a `Field` column between two labelled-above inputs, where the\n   * chrome's inner label would be the only one of its kind).\n   *\n   * Inside a `Field`, pass no `label` at all and spread the render-prop instead —\n   * `{(ids, { labelId }) => <ToggleGroup {...ids} aria-labelledby={labelId} … />}` —\n   * so the Field's label names the group and its hint and error describe it.\n   */\n  labelPlacement?: \"field\" | \"above\";\n  /** A {@link FieldHint} on the label line, as on a labelled {@link Select}. Only with\n   *  `label`. */\n  hint?: ReactNode;\n  /** The message under the field when it is wrong: paints the field's border with\n   *  `--danger`, marks the group `aria-invalid` and describes it with the message, as\n   *  {@link Select}'s `error` does. Only with `label`. */\n  error?: ReactNode;\n}\n\n/**\n * A line under the group saying what the CHOSEN option means — lenkbank's ToggleField\n * `hint` (features/gear/common.tsx:97): not help behind a \"?\" but a caption, and one\n * that changes as the choice does. Pass a function of the value for that; it is\n * attached with `aria-describedby`, and a function caption is also a polite live\n * region, because a description is read when the group is entered and not again when\n * an arrow key changes the choice underneath it.\n *\n * In muted 11px text under the field (or the bare group), above an `error`.\n */\ntype ToggleGroupCaption<V> = ReactNode | ((value: V) => ReactNode);\n\n/** The group as it has always been: one option is always the answer. */\nexport interface ToggleGroupRequiredProps<T extends string> extends ToggleGroupBaseProps<T> {\n  allowEmpty?: false;\n  /**\n   * What the options ARE to a screen reader, separately from whether the group can be\n   * emptied (kastlan feedback #47).\n   *\n   *  - `\"radio\"` (default) — a `radiogroup` of radios: one Tab stop, arrow keys MOVE the\n   *    choice. Right for a choice between answers (\"Monthly / Yearly\").\n   *  - `\"pressed\"` — a `group` of toggle buttons (`aria-pressed`), each its own Tab stop,\n   *    Space/Enter to press; still one option always pressed. Right for a row that reads\n   *    as a set of switches — a view mode, a toolbar-like filter — where arrows moving the\n   *    selection on focus would be a surprise.\n   *\n   * Before this the only way to `aria-pressed` was `allowEmpty`, which also let a second\n   * press clear the choice — so kastlan took the clearable shape and threw the `null`\n   * away in `onChange` (`(v) => v && setMode(v)`), a group announcing that a press would\n   * unpress what it would not. Here a press on the pressed option re-sends its value, as\n   * the radio shape does, and nothing is ever unpressed. A clearable group\n   * (`allowEmpty`) is always `\"pressed\"`: a radio cannot be unchecked by activating it.\n   */\n  semantics?: \"radio\" | \"pressed\";\n  value: T;\n  onChange: (value: T) => void;\n  /** See {@link ToggleGroupCaption}. */\n  caption?: ToggleGroupCaption<T>;\n}\n\n/**\n * A group that can be emptied: clicking the active option clears it, and `onChange`\n * receives `null` (Keksdose's support-panel filters, where \"no filter\" is reached by\n * clicking the filter that is on).\n *\n * The options become TOGGLE BUTTONS (`aria-pressed`, in a `role=\"group\"`) rather than\n * radios. A radio cannot be unchecked by activating it — no screen reader user expects\n * a second press on \"Open, radio, checked\" to leave nothing checked, and nothing would\n * tell them it had. \"Open, toggle button, pressed\" says exactly what a press will do.\n */\nexport interface ToggleGroupClearableProps<T extends string> extends ToggleGroupBaseProps<T> {\n  allowEmpty: true;\n  /** Always toggle buttons — see {@link ToggleGroupRequiredProps.semantics}. Accepted so\n   *  a wrapper can forward one `semantics` to either shape. */\n  semantics?: \"pressed\";\n  value: T | null;\n  onChange: (value: T | null) => void;\n  /** See {@link ToggleGroupCaption}. `null` while nothing is chosen. */\n  caption?: ToggleGroupCaption<T | null>;\n}\n\n/** `allowEmpty` picks the shape, so `onChange` is typed `(T) => void` unless the group\n *  can actually emit `null` — no existing caller has a `null` to handle. */\nexport type ToggleGroupProps<T extends string> =\n  | ToggleGroupRequiredProps<T>\n  | ToggleGroupClearableProps<T>;\n\n/**\n * Overloaded rather than typed by the union alone (keksdose, \"Gaps found adopting\n * 0.6.0\" #7). Inferring `T` through a union of prop shapes let TypeScript settle on\n * `string`, so `<ToggleGroup allowEmpty value={filter} onChange={setFilter} />` over a\n * `useState<Status | null>` did not compile unless the caller spelled\n * `<ToggleGroup<Status>>`. One signature per mode lets each infer `T` from its own\n * `value`/`onChange`/`options`; the third keeps a caller that forwards a\n * {@link ToggleGroupProps} union (a wrapper component) compiling.\n */\nexport function ToggleGroup<T extends string>(props: ToggleGroupClearableProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupRequiredProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): ReactElement {\n  const {\n    value,\n    options,\n    className,\n    optionClassName,\n    overflow = \"truncate\",\n    ariaLabel,\n    disabled = false,\n    size = \"md\",\n    label,\n    labelPlacement = \"field\",\n    hint,\n    error,\n    \"aria-label\": ariaLabelAttr,\n    ...restWithMode\n  } = props;\n  const labelId = useId();\n  const errorId = useId();\n  const labelled = label !== undefined && label !== null && label !== false && label !== \"\";\n  // `field` is the chrome; a label placed above keeps the bare group's own box.\n  const field = labelled && labelPlacement === \"field\";\n  const above = labelled && labelPlacement === \"above\";\n  const hasError = labelled && error !== undefined && error !== null && error !== false && error !== \"\";\n  // Taken off the rest so neither reaches the DOM; `props` keeps them paired, which is\n  // what lets the `onChange` below be called with `null` only in the mode that allows it.\n  const { allowEmpty: _allowEmpty, onChange: _onChange, caption, semantics: _semantics, ...rest } = restWithMode;\n  // Invalid from outside too: a `Field` hands the bare group `aria-invalid`, and the\n  // border has to say what the attribute says.\n  const outsideInvalid = rest[\"aria-invalid\"] === true || rest[\"aria-invalid\"] === \"true\";\n  const captionId = useId();\n  const captionIsLive = typeof caption === \"function\";\n  const captionNode = captionIsLive ? (caption as (v: T | null) => ReactNode)(value) : caption;\n  const hasCaption = captionNode !== undefined && captionNode !== null && captionNode !== false && captionNode !== \"\";\n  const choose = (next: T) => {\n    if (props.allowEmpty) props.onChange(next === value ? null : next);\n    else props.onChange(next);\n  };\n  // `pressed`: toggle buttons. Every clearable group is; a required one is when it asks\n  // (kastlan #47) — the role, and not whether a second press clears, is what this flag\n  // decides from here on, so `choose` above still keys off `allowEmpty` alone.\n  const pressed = props.allowEmpty === true || props.semantics === \"pressed\";\n  // A radio group is ONE tab stop (the checked radio, else the first) and arrows move\n  // the choice — the pattern `role=\"radiogroup\"` promises a screen-reader user. Before\n  // 0.7.0 each segment was its own tab stop with no arrow keys. The toggle-button shape\n  // is a row of buttons, where separate tab stops are the pattern.\n  const tabStop = options.some((o) => o.value === value) ? value : options[0]?.value;\n  const onRadioKey = (e: KeyboardEvent<HTMLButtonElement>, index: number) => {\n    const last = options.length - 1;\n    let next: number | null = null;\n    const step = horizontalStep(e.key, e.currentTarget);\n    if (step !== 0) next = index + step;\n    else if (e.key === \"ArrowDown\") next = index + 1;\n    else if (e.key === \"ArrowUp\") next = index - 1;\n    else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = last;\n    if (next === null) return;\n    e.preventDefault();\n    next = next < 0 ? last : next > last ? 0 : next;\n    const buttons = e.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>(\":scope > button\");\n    buttons?.[next]?.focus();\n    choose(options[next].value);\n  };\n  const group = (\n    <div\n      // The audit's named example of a closed prop list (§\"Public API design\"): the\n      // tour locates a step by CSS SELECTOR, so a component that drops every attribute\n      // it was not expecting cannot be spotlighted at all — and Keksdose's rule editor\n      // carries a comment explaining that it wraps this group in a bare <div> for\n      // exactly that reason.\n      //\n      // `...rest` first, then the attributes the group cannot do without: a caller\n      // hanging an anchor or a test id on the group must not be able to overwrite the\n      // radiogroup role or the disabled state by accident. `className` is destructured\n      // out entirely and merged through `cn`, so it is never in here.\n      {...rest}\n      role={pressed ? \"group\" : \"radiogroup\"}\n      // The DOM spelling wins; `ariaLabel` is the fallback for the call sites that\n      // have not moved yet.\n      aria-label={ariaLabelAttr ?? ariaLabel}\n      aria-labelledby={labelled && ariaLabelAttr === undefined && ariaLabel === undefined ? labelId : rest[\"aria-labelledby\"]}\n      aria-invalid={hasError || rest[\"aria-invalid\"] || undefined}\n      aria-describedby={\n        [rest[\"aria-describedby\"], hasCaption && captionId, hasError && errorId].filter(Boolean).join(\" \") || undefined\n      }\n      // `aria-disabled` on the group as well as `disabled` on each button: a radio\n      // group is what the user is being refused, and a screen reader announcing\n      // three separately-disabled radios does not say that.\n      aria-disabled={disabled || undefined}\n      className={cn(\n        // `gap-0.5` — the same 2px as the container's own padding, so EVERY segment\n        // sits in a uniform 2px moat and no two fills ever touch. Flush segments were\n        // Keksdose live #268's rework: the pressed segment wears a saturated fill and\n        // an unpressed neighbour wears a pale hover fill, and with a shared edge the\n        // two rectangles read as one smeared shape — *\"the boundary of the selected\n        // option and hovering next to it overlays the boundary of the selected\n        // button\"*. A gap is what makes each segment its own chip; it cannot be\n        // undone by a caller's per-option colour, which a hover-only fix could.\n        //\n        // (The hover fill is the DESKTOP half of that report: Tailwind v4 wraps every\n        // `hover:` in `@media (hover: hover)`, so a phone never paints it. The half a\n        // phone does see is the focus ring — see the segment's own note below.)\n        \"inline-flex w-full gap-0.5 rounded-md border border-[var(--border-strong)] bg-[var(--bg-surface)] p-0.5 shadow-sm\",\n        overflow === \"wrap\" && \"flex-wrap\",\n        // The whole group fades, the way every other disabled control in this\n        // package does; `cursor-not-allowed` is on the buttons, which is what a\n        // pointer is actually over.\n        disabled && \"opacity-60\",\n        // The bare group (no chrome to paint) wears the invalid border itself.\n        !field && (outsideInvalid || (above && hasError)) && FIELD_INVALID,\n        // Inside the field's chrome the group is only a row of segments: no border, no\n        // surface, no padding of its own, and the field (not the group) is what dims.\n        field && \"border-0 bg-transparent p-0 shadow-none opacity-100\",\n        !labelled && className,\n      )}\n    >\n      {options.map((opt, index) => {\n        const active = opt.value === value;\n        return (\n          <button\n            key={opt.value}\n            type=\"button\"\n            role={pressed ? undefined : \"radio\"}\n            aria-checked={pressed ? undefined : active}\n            aria-pressed={pressed ? active : undefined}\n            disabled={disabled}\n            tabIndex={pressed ? undefined : opt.value === tabStop ? 0 : -1}\n            onKeyDown={pressed ? undefined : (e) => onRadioKey(e, index)}\n            onClick={() => choose(opt.value)}\n            className={cn(\n              // `truncate` (which carries whitespace-nowrap) rather than letting a\n              // label wrap: a segmented control sizes its whole row to the tallest\n              // option, so one two-word option — Keksdose feedback #147's \"Where I\n              // am\" — silently doubles the height of every segment beside it.\n              //\n              // `basis-auto` is what keeps that ellipsis a LAST resort rather than\n              // the normal state (Keksdose dev#475). With flex-1's `basis-0`, a\n              // shrink-to-fit group (`w-auto`) still resolves to the sum of the\n              // labels' widths — and then splits it EQUALLY, so the short option\n              // got 66px it did not need and \"Where I am\" got 66 of the 81 it did:\n              // truncated at 1778px of free screen. Basing each segment on its own\n              // content and sharing only the LEFTOVER space keeps a full-width\n              // group's segments near-equal and an auto-width group's exact.\n              //\n              // `focus-visible` + `ring-inset`, not `focus` + an outset ring. A ring\n              // is a box-shadow that spreads OUTWARD, so on a flush group it painted\n              // 2px of ring over both neighbours and over the container's own border\n              // — and on a phone it appeared on every TAP, because a tap focuses the\n              // button. That is the other half of what live #268's rework saw\n              // overlaying the selected segment's boundary. Inset keeps the ring\n              // inside the segment it belongs to; focus-visible keeps it for the\n              // keyboard, which is the only input that needs it.\n              overflow === \"wrap\" ? \"whitespace-nowrap\" : \"min-w-0 truncate\",\n              \"flex-1 basis-auto rounded px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--border-strong)]\",\n              size === \"sm\" && \"px-2 py-1 text-xs\",\n              // In a field: no vertical padding and a 20px line — a `text-sm` line, the\n              // same line a labelled Select holds under its label strip — so the field's\n              // own `pt-4 pb-1` decides the height, as it does for the select.\n              field && \"py-0 leading-5\",\n              active\n                ? \"bg-[var(--bg-inverse)] text-[var(--text-inverse)]\"\n                : \"text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\",\n              // No hover fill on a group that cannot be changed — a segment that\n              // lights up under the pointer is an offer, and there is none here.\n              disabled && \"cursor-not-allowed hover:bg-transparent dark:hover:bg-transparent\",\n              optionClassName,\n              opt.className,\n            )}\n          >\n            {opt.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n  // Rendered whenever the caption is — `aria-live` must be on the element BEFORE its\n  // text changes, or the change is not announced — but empty (no height, no margin)\n  // when there is nothing to say, so a function caption that returns null for some\n  // options leaves no gap. Empty rather than `hidden`: some readers do not announce\n  // text that appears inside an element coming back from `display: none`.\n  const captionEl =\n    hasCaption || captionIsLive ? (\n      <p\n        id={captionId}\n        aria-live={captionIsLive ? \"polite\" : undefined}\n        className={cn(\"text-[11px] leading-snug text-[var(--text-muted)]\", hasCaption && \"mt-1\")}\n      >\n        {hasCaption ? captionNode : null}\n      </p>\n    ) : null;\n  const errorEl = hasError ? (\n    <p id={errorId} className=\"mt-1 text-[11px] leading-tight text-[var(--danger)]\">\n      {error}\n    </p>\n  ) : null;\n  if (above) {\n    // `relative` so a caller's `sr-only` label cannot escape (sr-only-containment).\n    return (\n      <div className={cn(\"relative grid min-w-0 gap-1.5\", className)}>\n        <div className=\"flex items-center gap-1\">\n          {/* A `<label>` with no `htmlFor`: a group is not labelable, so it is named\n              by `aria-labelledby` on the group; the element keeps the Field look. */}\n          <Label\n            id={labelId}\n            disabled={disabled}\n            data-error={hasError || undefined}\n            className=\"data-[error=true]:text-[var(--danger)]\"\n          >\n            {label}\n          </Label>\n          {hint}\n        </div>\n        <div className=\"min-w-0\">\n          {group}\n          {captionEl}\n          {errorEl}\n        </div>\n      </div>\n    );\n  }\n  if (!field) {\n    if (!captionEl) return group;\n    // The group keeps its `className`, as without a caption; the wrapper only stacks.\n    return (\n      <div className=\"min-w-0\">\n        {group}\n        {captionEl}\n      </div>\n    );\n  }\n  return (\n    // `h-full` + `flex-1`: the chrome fills a grid or stretched flex row, which is what\n    // levels it with a select beside it whatever the browser makes of the select.\n    <div className={cn(\"flex h-full flex-col\", className)}>\n      <FloatingField\n        className=\"flex flex-1 flex-col\"\n        label={<span id={labelId}>{label}</span>}\n        staticLabel\n        hint={hint}\n      >\n        <div\n          className={cn(\n            \"flex flex-1 flex-col justify-center rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-1 pt-4 pb-1 shadow-sm\",\n            disabled && \"bg-[var(--bg-surface-2)] opacity-60\",\n            hasError && FIELD_INVALID,\n          )}\n        >\n          {group}\n        </div>\n      </FloatingField>\n      {captionEl}\n      {errorEl}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/toggle-group.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactElement, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { FIELD_INVALID, FloatingField, Label } from \"./ui\";\n\nexport interface ToggleOption<T extends string> {\n  value: T;\n  label: string;\n  className?: string;\n}\n\n/**\n * `onChange` is the group's own — the chosen VALUE, not a DOM event — so the div's\n * `onChange` is omitted rather than shadowed: leaving both in scope would give the\n * prop two incompatible meanings depending on which overload TypeScript picked.\n *\n * `children` is omitted too: this renders its `options` and nothing else, so a `children` the type\n * accepted and the component ignored would be a prop that silently does nothing —\n * worse than one that does not compile.\n */\nexport interface ToggleGroupBaseProps<T extends string>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"children\"> {\n  options: ToggleOption<T>[];\n  className?: string;\n  /** Applied to every option button (e.g. to tune height/rounding to match\n   *  adjacent fields). Per-option `className` still wins over this. */\n  optionClassName?: string;\n  /**\n   * What happens when the options do not fit the group's width. `\"truncate\"`\n   * (default): one row, and the labels that do not fit end in an ellipsis — the height\n   * never changes. `\"wrap\"`: the segments flow onto a second row and every label stays\n   * whole (\"Bewegung\", not \"Beweg…\"), at the price of a taller group on a narrow\n   * screen (lenkbank L4: five signal types on a 390px control page). From the width\n   * where they fit, both look the same.\n   */\n  overflow?: \"truncate\" | \"wrap\";\n  /**\n   * @deprecated Pass `aria-label` instead — the DOM spelling, which every other\n   * control in this kit now answers to. Kept working because three applications ship\n   * this one today; it names the group only when `aria-label` is absent.\n   */\n  ariaLabel?: string;\n  /**\n   * Show, refuse the change (Keksdose live #288: a payment dated in the future has no\n   * state to set).\n   *\n   * Whatever `value` says stays pressed and keeps its own fill rather than going grey\n   * with the rest — a reader who cannot see WHICH option is chosen has been told less\n   * than before it was disabled. A caller with nothing to show passes no value, and\n   * the group renders dimmed with nothing pressed, which is the shape Keksdose's\n   * status picker uses for a row whose status does not exist yet.\n   *\n   * On the whole GROUP, not per option: a segmented control where some segments are\n   * live and others are not is a menu with holes in it, and no caller here wants one.\n   */\n  disabled?: boolean;\n  /**\n   * `sm`: 12px options with `px-2 py-1` — the compact group keksdose's rule editor\n   * (rule-editor:204) writes as `optionClassName=\"px-2 py-1 text-xs\"` beside a small\n   * caption. `md` (default) is the size every other group has.\n   */\n  size?: \"sm\" | \"md\";\n  /**\n   * Stand in a form row as a FIELD: with a label the group wears the field's chrome —\n   * border, surface, the top strip with a small static label in it, a labelled\n   * {@link Select}'s height — so beside an Input or a Select it reads as one of them\n   * rather than as a control with a caption over it. lenkbank builds exactly this by\n   * hand as `ToggleField` (features/gear/common.tsx:97, feedback #69), and its notes\n   * are why the chrome STRETCHES to its row as well as matching the select's padding:\n   * a native select's height is the browser's, so a toggle a few pixels short of it\n   * is levelled up by the row rather than by arithmetic.\n   *\n   * The label names the group (`aria-labelledby`), so `aria-label` is not needed. With\n   * a label, `className` styles the field's wrapper — as on {@link Select} — and the\n   * group's own box is dropped: two nested borders read as a control in a control.\n   */\n  label?: ReactNode;\n  /**\n   * Where `label` goes. `\"field\"` (default): the field chrome described under `label`.\n   * `\"above\"`: the kit's {@link Label} over the bare group — the shape of a {@link Field}\n   * — with `hint` beside the label and `error` under the group, for a form that sets\n   * its labels above its fields (kastlan's international-rent-calculator.tsx, whose DE\n   * cap pair sits in a `Field` column between two labelled-above inputs, where the\n   * chrome's inner label would be the only one of its kind).\n   *\n   * Inside a `Field`, pass no `label` at all and spread the render-prop instead —\n   * `{(ids, { labelId }) => <ToggleGroup {...ids} aria-labelledby={labelId} … />}` —\n   * so the Field's label names the group and its hint and error describe it.\n   */\n  labelPlacement?: \"field\" | \"above\";\n  /** A {@link FieldHint} on the label line, as on a labelled {@link Select}. Only with\n   *  `label`. */\n  hint?: ReactNode;\n  /** The message under the field when it is wrong: paints the field's border with\n   *  `--danger`, marks the group `aria-invalid` and describes it with the message, as\n   *  {@link Select}'s `error` does. Only with `label`. */\n  error?: ReactNode;\n}\n\n/**\n * A line under the group saying what the CHOSEN option means — lenkbank's ToggleField\n * `hint` (features/gear/common.tsx:97): not help behind a \"?\" but a caption, and one\n * that changes as the choice does. Pass a function of the value for that; it is\n * attached with `aria-describedby`, and a function caption is also a polite live\n * region, because a description is read when the group is entered and not again when\n * an arrow key changes the choice underneath it.\n *\n * In muted 11px text under the field (or the bare group), above an `error`.\n */\ntype ToggleGroupCaption<V> = ReactNode | ((value: V) => ReactNode);\n\n/** The group as it has always been: one option is always the answer. */\nexport interface ToggleGroupRequiredProps<T extends string> extends ToggleGroupBaseProps<T> {\n  allowEmpty?: false;\n  /**\n   * What the options ARE to a screen reader, separately from whether the group can be\n   * emptied (kastlan feedback #47).\n   *\n   *  - `\"radio\"` (default) — a `radiogroup` of radios: one Tab stop, arrow keys MOVE the\n   *    choice. Right for a choice between answers (\"Monthly / Yearly\").\n   *  - `\"pressed\"` — a `group` of toggle buttons (`aria-pressed`), each its own Tab stop,\n   *    Space/Enter to press; still one option always pressed. Right for a row that reads\n   *    as a set of switches — a view mode, a toolbar-like filter — where arrows moving the\n   *    selection on focus would be a surprise.\n   *\n   * Before this the only way to `aria-pressed` was `allowEmpty`, which also let a second\n   * press clear the choice — so kastlan took the clearable shape and threw the `null`\n   * away in `onChange` (`(v) => v && setMode(v)`), a group announcing that a press would\n   * unpress what it would not. Here a press on the pressed option re-sends its value, as\n   * the radio shape does, and nothing is ever unpressed. A clearable group\n   * (`allowEmpty`) is always `\"pressed\"`: a radio cannot be unchecked by activating it.\n   */\n  semantics?: \"radio\" | \"pressed\";\n  value: T;\n  onChange: (value: T) => void;\n  /** See {@link ToggleGroupCaption}. */\n  caption?: ToggleGroupCaption<T>;\n}\n\n/**\n * A group that can be emptied: clicking the active option clears it, and `onChange`\n * receives `null` (Keksdose's support-panel filters, where \"no filter\" is reached by\n * clicking the filter that is on).\n *\n * The options become TOGGLE BUTTONS (`aria-pressed`, in a `role=\"group\"`) rather than\n * radios. A radio cannot be unchecked by activating it — no screen reader user expects\n * a second press on \"Open, radio, checked\" to leave nothing checked, and nothing would\n * tell them it had. \"Open, toggle button, pressed\" says exactly what a press will do.\n */\nexport interface ToggleGroupClearableProps<T extends string> extends ToggleGroupBaseProps<T> {\n  allowEmpty: true;\n  /** Always toggle buttons — see {@link ToggleGroupRequiredProps.semantics}. Accepted so\n   *  a wrapper can forward one `semantics` to either shape. */\n  semantics?: \"pressed\";\n  value: T | null;\n  onChange: (value: T | null) => void;\n  /** See {@link ToggleGroupCaption}. `null` while nothing is chosen. */\n  caption?: ToggleGroupCaption<T | null>;\n}\n\n/** `allowEmpty` picks the shape, so `onChange` is typed `(T) => void` unless the group\n *  can actually emit `null` — no existing caller has a `null` to handle. */\nexport type ToggleGroupProps<T extends string> =\n  | ToggleGroupRequiredProps<T>\n  | ToggleGroupClearableProps<T>;\n\n/**\n * Overloaded rather than typed by the union alone (keksdose, \"Gaps found adopting\n * 0.6.0\" #7). Inferring `T` through a union of prop shapes let TypeScript settle on\n * `string`, so `<ToggleGroup allowEmpty value={filter} onChange={setFilter} />` over a\n * `useState<Status | null>` did not compile unless the caller spelled\n * `<ToggleGroup<Status>>`. One signature per mode lets each infer `T` from its own\n * `value`/`onChange`/`options`; the third keeps a caller that forwards a\n * {@link ToggleGroupProps} union (a wrapper component) compiling.\n */\nexport function ToggleGroup<T extends string>(props: ToggleGroupClearableProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupRequiredProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): ReactElement;\nexport function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): ReactElement {\n  const {\n    value,\n    options,\n    className,\n    optionClassName,\n    overflow = \"truncate\",\n    ariaLabel,\n    disabled = false,\n    size = \"md\",\n    label,\n    labelPlacement = \"field\",\n    hint,\n    error,\n    \"aria-label\": ariaLabelAttr,\n    ...restWithMode\n  } = props;\n  const labelId = useId();\n  const errorId = useId();\n  const labelled = label !== undefined && label !== null && label !== false && label !== \"\";\n  // `field` is the chrome; a label placed above keeps the bare group's own box.\n  const field = labelled && labelPlacement === \"field\";\n  const above = labelled && labelPlacement === \"above\";\n  const hasError = labelled && error !== undefined && error !== null && error !== false && error !== \"\";\n  // Taken off the rest so neither reaches the DOM; `props` keeps them paired, which is\n  // what lets the `onChange` below be called with `null` only in the mode that allows it.\n  const { allowEmpty: _allowEmpty, onChange: _onChange, caption, semantics: _semantics, ...rest } = restWithMode;\n  // Invalid from outside too: a `Field` hands the bare group `aria-invalid`, and the\n  // border has to say what the attribute says.\n  const outsideInvalid = rest[\"aria-invalid\"] === true || rest[\"aria-invalid\"] === \"true\";\n  const captionId = useId();\n  const captionIsLive = typeof caption === \"function\";\n  const captionNode = captionIsLive ? (caption as (v: T | null) => ReactNode)(value) : caption;\n  const hasCaption = captionNode !== undefined && captionNode !== null && captionNode !== false && captionNode !== \"\";\n  const choose = (next: T) => {\n    if (props.allowEmpty) props.onChange(next === value ? null : next);\n    else props.onChange(next);\n  };\n  // `pressed`: toggle buttons. Every clearable group is; a required one is when it asks\n  // (kastlan #47) — the role, and not whether a second press clears, is what this flag\n  // decides from here on, so `choose` above still keys off `allowEmpty` alone.\n  const pressed = props.allowEmpty === true || props.semantics === \"pressed\";\n  // A radio group is ONE tab stop (the checked radio, else the first) and arrows move\n  // the choice — the pattern `role=\"radiogroup\"` promises a screen-reader user. Before\n  // 0.7.0 each segment was its own tab stop with no arrow keys. The toggle-button shape\n  // is a row of buttons, where separate tab stops are the pattern.\n  const tabStop = options.some((o) => o.value === value) ? value : options[0]?.value;\n  const onRadioKey = (e: KeyboardEvent<HTMLButtonElement>, index: number) => {\n    const last = options.length - 1;\n    let next: number | null = null;\n    const step = horizontalStep(e.key, e.currentTarget);\n    if (step !== 0) next = index + step;\n    else if (e.key === \"ArrowDown\") next = index + 1;\n    else if (e.key === \"ArrowUp\") next = index - 1;\n    else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = last;\n    if (next === null) return;\n    e.preventDefault();\n    next = next < 0 ? last : next > last ? 0 : next;\n    const buttons = e.currentTarget.parentElement?.querySelectorAll<HTMLButtonElement>(\":scope > button\");\n    buttons?.[next]?.focus();\n    choose(options[next].value);\n  };\n  const group = (\n    <div\n      // The audit's named example of a closed prop list (§\"Public API design\"): the\n      // tour locates a step by CSS SELECTOR, so a component that drops every attribute\n      // it was not expecting cannot be spotlighted at all — and Keksdose's rule editor\n      // carries a comment explaining that it wraps this group in a bare <div> for\n      // exactly that reason.\n      //\n      // `...rest` first, then the attributes the group cannot do without: a caller\n      // hanging an anchor or a test id on the group must not be able to overwrite the\n      // radiogroup role or the disabled state by accident. `className` is destructured\n      // out entirely and merged through `cn`, so it is never in here.\n      {...rest}\n      role={pressed ? \"group\" : \"radiogroup\"}\n      // The DOM spelling wins; `ariaLabel` is the fallback for the call sites that\n      // have not moved yet.\n      aria-label={ariaLabelAttr ?? ariaLabel}\n      aria-labelledby={labelled && ariaLabelAttr === undefined && ariaLabel === undefined ? labelId : rest[\"aria-labelledby\"]}\n      aria-invalid={hasError || rest[\"aria-invalid\"] || undefined}\n      aria-describedby={\n        [rest[\"aria-describedby\"], hasCaption && captionId, hasError && errorId].filter(Boolean).join(\" \") || undefined\n      }\n      // `aria-disabled` on the group as well as `disabled` on each button: a radio\n      // group is what the user is being refused, and a screen reader announcing\n      // three separately-disabled radios does not say that.\n      aria-disabled={disabled || undefined}\n      className={cn(\n        // `gap-0.5` — the same 2px as the container's own padding, so EVERY segment\n        // sits in a uniform 2px moat and no two fills ever touch. Flush segments were\n        // Keksdose live #268's rework: the pressed segment wears a saturated fill and\n        // an unpressed neighbour wears a pale hover fill, and with a shared edge the\n        // two rectangles read as one smeared shape — *\"the boundary of the selected\n        // option and hovering next to it overlays the boundary of the selected\n        // button\"*. A gap is what makes each segment its own chip; it cannot be\n        // undone by a caller's per-option colour, which a hover-only fix could.\n        //\n        // (The hover fill is the DESKTOP half of that report: Tailwind v4 wraps every\n        // `hover:` in `@media (hover: hover)`, so a phone never paints it. The half a\n        // phone does see is the focus ring — see the segment's own note below.)\n        \"inline-flex w-full gap-0.5 rounded-md border border-[var(--border-strong)] bg-[var(--bg-surface)] p-0.5 shadow-sm\",\n        overflow === \"wrap\" && \"flex-wrap\",\n        // The whole group fades, the way every other disabled control in this\n        // package does; `cursor-not-allowed` is on the buttons, which is what a\n        // pointer is actually over.\n        disabled && \"opacity-60\",\n        // The bare group (no chrome to paint) wears the invalid border itself.\n        !field && (outsideInvalid || (above && hasError)) && FIELD_INVALID,\n        // Inside the field's chrome the group is only a row of segments: no border, no\n        // surface, no padding of its own, and the field (not the group) is what dims.\n        field && \"border-0 bg-transparent p-0 shadow-none opacity-100\",\n        !labelled && className,\n      )}\n    >\n      {options.map((opt, index) => {\n        const active = opt.value === value;\n        return (\n          <button\n            key={opt.value}\n            type=\"button\"\n            role={pressed ? undefined : \"radio\"}\n            aria-checked={pressed ? undefined : active}\n            aria-pressed={pressed ? active : undefined}\n            disabled={disabled}\n            tabIndex={pressed ? undefined : opt.value === tabStop ? 0 : -1}\n            onKeyDown={pressed ? undefined : (e) => onRadioKey(e, index)}\n            onClick={() => choose(opt.value)}\n            className={cn(\n              // `truncate` (which carries whitespace-nowrap) rather than letting a\n              // label wrap: a segmented control sizes its whole row to the tallest\n              // option, so one two-word option — Keksdose feedback #147's \"Where I\n              // am\" — silently doubles the height of every segment beside it.\n              //\n              // `basis-auto` is what keeps that ellipsis a LAST resort rather than\n              // the normal state (Keksdose dev#475). With flex-1's `basis-0`, a\n              // shrink-to-fit group (`w-auto`) still resolves to the sum of the\n              // labels' widths — and then splits it EQUALLY, so the short option\n              // got 66px it did not need and \"Where I am\" got 66 of the 81 it did:\n              // truncated at 1778px of free screen. Basing each segment on its own\n              // content and sharing only the LEFTOVER space keeps a full-width\n              // group's segments near-equal and an auto-width group's exact.\n              //\n              // `focus-visible` + `ring-inset`, not `focus` + an outset ring. A ring\n              // is a box-shadow that spreads OUTWARD, so on a flush group it painted\n              // 2px of ring over both neighbours and over the container's own border\n              // — and on a phone it appeared on every TAP, because a tap focuses the\n              // button. That is the other half of what live #268's rework saw\n              // overlaying the selected segment's boundary. Inset keeps the ring\n              // inside the segment it belongs to; focus-visible keeps it for the\n              // keyboard, which is the only input that needs it.\n              overflow === \"wrap\" ? \"whitespace-nowrap\" : \"min-w-0 truncate\",\n              \"flex-1 basis-auto rounded px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--border-strong)]\",\n              size === \"sm\" && \"px-2 py-1 text-xs\",\n              // In a field: no vertical padding and a 20px line — a `text-sm` line, the\n              // same line a labelled Select holds under its label strip — so the field's\n              // own `pt-4 pb-1` decides the height, as it does for the select.\n              field && \"py-0 leading-5\",\n              active\n                ? \"bg-[var(--bg-inverse)] text-[var(--text-inverse)]\"\n                : \"text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\",\n              // No hover fill on a group that cannot be changed — a segment that\n              // lights up under the pointer is an offer, and there is none here. Not on\n              // the chosen segment: its fill IS its state, and its inverse text would\n              // vanish on a transparent hover.\n              disabled && \"cursor-not-allowed\",\n              disabled && !active && \"hover:bg-transparent dark:hover:bg-transparent\",\n              optionClassName,\n              opt.className,\n            )}\n          >\n            {opt.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n  // Rendered whenever the caption is — `aria-live` must be on the element BEFORE its\n  // text changes, or the change is not announced — but empty (no height, no margin)\n  // when there is nothing to say, so a function caption that returns null for some\n  // options leaves no gap. Empty rather than `hidden`: some readers do not announce\n  // text that appears inside an element coming back from `display: none`.\n  const captionEl =\n    hasCaption || captionIsLive ? (\n      <p\n        id={captionId}\n        aria-live={captionIsLive ? \"polite\" : undefined}\n        className={cn(\"text-[11px] leading-snug text-[var(--text-muted)]\", hasCaption && \"mt-1\")}\n      >\n        {hasCaption ? captionNode : null}\n      </p>\n    ) : null;\n  const errorEl = hasError ? (\n    <p id={errorId} className=\"mt-1 text-[11px] leading-tight text-[var(--danger)]\">\n      {error}\n    </p>\n  ) : null;\n  if (above) {\n    // `relative` so a caller's `sr-only` label cannot escape (sr-only-containment).\n    return (\n      <div className={cn(\"relative grid min-w-0 gap-1.5\", className)}>\n        <div className=\"flex items-center gap-1\">\n          {/* A `<label>` with no `htmlFor`: a group is not labelable, so it is named\n              by `aria-labelledby` on the group; the element keeps the Field look. */}\n          <Label\n            id={labelId}\n            disabled={disabled}\n            data-error={hasError || undefined}\n            className=\"data-[error=true]:text-[var(--danger)]\"\n          >\n            {label}\n          </Label>\n          {hint}\n        </div>\n        <div className=\"min-w-0\">\n          {group}\n          {captionEl}\n          {errorEl}\n        </div>\n      </div>\n    );\n  }\n  if (!field) {\n    if (!captionEl) return group;\n    // The group keeps its `className`, as without a caption; the wrapper only stacks.\n    return (\n      <div className=\"min-w-0\">\n        {group}\n        {captionEl}\n      </div>\n    );\n  }\n  return (\n    // `h-full` + `flex-1`: the chrome fills a grid or stretched flex row, which is what\n    // levels it with a select beside it whatever the browser makes of the select.\n    <div className={cn(\"flex h-full flex-col\", className)}>\n      <FloatingField\n        className=\"flex flex-1 flex-col\"\n        label={<span id={labelId}>{label}</span>}\n        staticLabel\n        hint={hint}\n      >\n        <div\n          className={cn(\n            \"flex flex-1 flex-col justify-center rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-1 pt-4 pb-1 shadow-sm\",\n            disabled && \"bg-[var(--bg-surface-2)] opacity-60\",\n            hasError && FIELD_INVALID,\n          )}\n        >\n          {group}\n        </div>\n      </FloatingField>\n      {captionEl}\n      {errorEl}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/ui.d.ts

@@ -1,6 +1,6 @@
 import 'react';
 import './tooltip.js';
-export { B as Button, a as ButtonClassesOptions, b as ButtonLinkProps, c as ButtonProps, d as ButtonSize, e as ButtonTone, f as ButtonVariant, g as Card, h as CardAction, i as CardActionProps, j as CardContent, k as CardContentProps, l as CardDensity, m as CardDescription, n as CardDescriptionProps, o as CardFooter, p as CardFooterProps, q as CardHeader, r as CardHeaderProps, s as CardProps, t as CardTitle, u as CardTitleLevel, v as CardTitleProps, w as CardTone, S as DEFAULT_PASSWORD_REVEAL_LABELS, V as DEFAULT_TABS_LABELS, Y as EmptyState, Z as EmptyStateProps, _ as FIELD_BASE, $ as FIELD_DISPLAY, a0 as FIELD_FLOATING_PAD, a1 as FIELD_INVALID, a2 as FIELD_TRIGGER, a3 as FIELD_WRITABLE_LOOK, a4 as FLOATING_INPUT_CLASS, a5 as FLOATING_LABEL_CLASS, a6 as FLOATING_LABEL_STATIC, a7 as FieldChevron, a8 as FieldChevronProps, a9 as FieldHint, aa as FieldHintProps, ab as FieldLabel, ac as FieldLabelProps, ak as FloatingField, al as FloatingFieldProps, au as IconButton, av as IconButtonGlyphSize, aw as IconButtonLinkProps, ax as IconButtonProps, ay as IconButtonSize, az as IconButtonTone, aA as IconButtonToneColor, aB as IconButtonVariant, aC as Input, aD as InputProps, aG as Label, aI as LabelProps, aK as PHONE_QUERY, aL as PasswordRevealLabels, aO as Select, aP as SelectProps, aQ as Spinner, aR as SpinnerProps, aT as TabItem, aU as Tabs, aV as TabsLabels, aW as TabsProps, aX as Textarea, aY as TextareaProps, b4 as buttonClasses, b8 as resolvePasswordRevealLabels } from '../kit-labels-C4uB_zmg.js';
+export { B as Button, a as ButtonClassesOptions, b as ButtonLinkProps, c as ButtonProps, d as ButtonSize, e as ButtonTone, f as ButtonVariant, g as Card, h as CardAction, i as CardActionProps, j as CardContent, k as CardContentProps, l as CardDensity, m as CardDescription, n as CardDescriptionProps, o as CardFooter, p as CardFooterProps, q as CardHeader, r as CardHeaderProps, s as CardProps, t as CardTitle, u as CardTitleLevel, v as CardTitleProps, w as CardTone, S as DEFAULT_PASSWORD_REVEAL_LABELS, W as DEFAULT_TABS_LABELS, Z as EmptyState, _ as EmptyStateProps, $ as FIELD_BASE, a0 as FIELD_DISPLAY, a1 as FIELD_FLOATING_PAD, a2 as FIELD_INVALID, a3 as FIELD_TRIGGER, a4 as FIELD_WRITABLE_LOOK, a5 as FLOATING_INPUT_CLASS, a6 as FLOATING_LABEL_CLASS, a7 as FLOATING_LABEL_STATIC, a8 as FieldChevron, a9 as FieldChevronProps, aa as FieldHint, ab as FieldHintProps, ac as FieldLabel, ad as FieldLabelProps, al as FloatingField, am as FloatingFieldProps, av as IconButton, aw as IconButtonGlyphSize, ax as IconButtonLinkProps, ay as IconButtonProps, az as IconButtonSize, aA as IconButtonTone, aB as IconButtonToneColor, aC as IconButtonVariant, aD as Input, aE as InputProps, aH as Label, aJ as LabelProps, aL as PHONE_QUERY, aM as PasswordRevealLabels, aP as Select, aQ as SelectProps, b1 as Spinner, b2 as SpinnerProps, b4 as TabItem, b5 as Tabs, b6 as TabsLabels, b7 as TabsProps, b8 as Textarea, b9 as TextareaProps, bh as buttonClasses, bl as resolvePasswordRevealLabels } from '../kit-labels-CPbsjlXr.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
 import './data-table-labels.js';
@@ -50,3 +50,12 @@ import './authed-image.js';
 import '../hooks/use-authed-src.js';
 import './image-grid.js';
 import './lightbox.js';
+import './write-lock.js';
+import './account-chips.js';
+import '../lib/format.js';
+import '../data-table-3mi2R3so.js';
+import './data-table-sort.js';
+import './swipeable-row.js';
+import './reauth-dialog.js';
+import './server-wake.js';
+import '../lib/server-wake.js';