@mortenbrudvik/waveui 0.7.0 → 0.8.0

package/dist/components/feedback/ProgressBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.cjs","names":["useId","useFieldContext","useFieldControl","isDev","cn","forcedColors","require_runtime","require_cn","require_dev","require_useId","require_useFieldControl","require_styles","react","react_jsx_runtime","fillColorClasses","fieldColors","isName","value","ProgressBar","ariaDescribedBy","_ariaInvalid","_ariaRequired","rest","labelId","ownId","field","fieldProps","id","fieldState","resolvedColor","color","isIndeterminate","validMax","max","validValue","clamped","percentage","hasLabel","label","hasAriaLabel","hasAriaLabelledBy","fieldLabelledBy","hasFieldName","showLabel","visibleLabel","barProps","key","propValue","bar","className"],"sources":["../../../src/components/feedback/ProgressBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { isDev, warnOnce } from '../../lib/dev';\nimport { forcedColors } from '../../lib/styles';\nimport type { ValidationState } from '../../lib/types';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useId } from '../../hooks/useId';\n\n/** Color of a {@link ProgressBar}'s fill. */\nexport type ProgressBarColor = 'brand' | 'success' | 'warning' | 'error';\n\n/** Properties for the ProgressBar component. */\nexport interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Current progress value, clamped to `0…max` for both the fill and `aria-valuenow`. Omit for\n   * indeterminate mode. A non-finite value renders 0% (development warning).\n   */\n  value?: number;\n  /**\n   * Maximum progress value. A `max` of 0 or less, or a non-finite `max`, renders 0% (development\n   * warning) and is reported to assistive technology as 0 of 100.\n   * @default 100\n   */\n  max?: number;\n  /**\n   * Accessible name of the progress bar: `aria-label` by default, or a visible label with\n   * `showLabel`. A progress bar needs a name (`label`, `aria-label` or `aria-labelledby`); a\n   * development warning fires without one. A consumer `aria-label` or `aria-labelledby` takes\n   * precedence over `label`; an empty or whitespace-only one counts as absent (it is not rendered).\n   * Inside a `Field`, the Field's label names the bar when neither `label` nor a consumer name is\n   * given.\n   */\n  label?: string;\n  /**\n   * Renders `label` as visible text above the bar and names the bar with it (`aria-labelledby`)\n   * instead of `aria-label`, unless a consumer `aria-label` or `aria-labelledby` names the bar\n   * (keep the visible text in that name, WCAG 2.5.3). The label and the bar are then wrapped in a\n   * `div`; `ref`, `className`, `style` and the other props stay on the progress bar element.\n   */\n  showLabel?: boolean;\n  /**\n   * Color of the fill. Inside a `Field` it follows the Field's validation state (error, warning,\n   * success) unless you set it. `warning` fills with the dark orange of the `severe` color, which\n   * keeps 3:1 against the track in every theme. The bar carries `data-color` with the resolved\n   * color.\n   * @default 'brand'\n   */\n  color?: ProgressBarColor;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst fillColorClasses: Record<ProgressBarColor, string> = {\n  brand: 'bg-primary',\n  success: 'bg-success',\n  // The warning token (a light yellow) is 1.02:1 on the light track: the severe orange passes 3:1.\n  warning: 'bg-severe',\n  error: 'bg-error',\n};\n\n/** The fill color a Field's validation state gives the bar (`none` keeps the default). */\nconst fieldColors: Partial<Record<ValidationState, ProgressBarColor>> = {\n  error: 'error',\n  warning: 'warning',\n  success: 'success',\n};\n\n/** Whether a name prop (`label`, `aria-label`, `aria-labelledby`) holds more than whitespace. */\nfunction isName(value: unknown): value is string {\n  return typeof value === 'string' && value.trim() !== '';\n}\n\n/**\n * Shows the progress of a task, or that a task is running (indeterminate, `value` omitted).\n *\n * - Name it with `label` (or `aria-label` / `aria-labelledby`); `showLabel` shows the label above\n *   the bar.\n * - `value` is clamped to `0…max`; invalid numbers render an empty bar and warn in development.\n * - `color` picks the fill (`brand`, `success`, `warning`, `error`).\n * - Inside a `Field`, the Field's label names a bar that has no name of its own, its validation\n *   message and hint describe the bar, and its validation state (error, warning, success) colors\n *   the fill unless `color` is set. A progress bar is never invalid or required: the\n *   `aria-invalid` and `aria-required` a Field adds are not rendered. Next to another control in\n *   a Field's wrapper element, the bar gets an id of its own and leaves the Field's\n *   `<label htmlFor>` to that control.\n * - The indeterminate animation follows the writing direction and becomes a full-width pulse for\n *   reduced motion. In forced-colors mode the fill uses `Highlight` and the track gets a border.\n *\n * @example\n * <ProgressBar value={uploaded} max={total} label=\"Uploading photos\" showLabel />\n *\n * @example\n * <Field label=\"Upload\" validationState=\"warning\" validationMessage=\"The connection is slow.\">\n *   <ProgressBar value={uploaded} max={total} />\n * </Field>\n */\nexport const ProgressBar = ({\n  value,\n  max = 100,\n  label,\n  showLabel,\n  color,\n  id,\n  'aria-describedby': ariaDescribedBy,\n  // Field merges both into its first child; neither is allowed on role=\"progressbar\".\n  'aria-invalid': _ariaInvalid,\n  'aria-required': _ariaRequired,\n  className,\n  ref,\n  ...rest\n}: ProgressBarProps) => {\n  const labelId = useId('progress-label');\n  const ownId = useId('progress');\n  const field = useFieldContext();\n  // A <label htmlFor> cannot name a progress bar, so inside a Field a bar without an id (Field\n  // passes its control id to a first child as `id`) takes its own instead of claiming the\n  // control id: that stays with the control the label names (an Input next to the bar in a\n  // wrapper). No name props are passed, so with `labelable: false` the merged `aria-labelledby`\n  // is exactly the Field's label id (or absent); it is used only when the bar has no name of its\n  // own.\n  const fieldProps = useFieldControl(\n    { id: id ?? (field ? ownId : undefined), 'aria-describedby': ariaDescribedBy },\n    { labelable: false },\n  );\n  // A context built before 0.6 has no validation state: read it from `invalid`.\n  const fieldState = field ? (field.validationState ?? (field.invalid ? 'error' : 'none')) : 'none';\n  const resolvedColor = color ?? fieldColors[fieldState] ?? 'brand';\n  const isIndeterminate = value === undefined;\n  const validMax = Number.isFinite(max) && max > 0;\n  const validValue = isIndeterminate || Number.isFinite(value);\n  /** Clamped once, used for both the fill width and `aria-valuenow`. */\n  const clamped =\n    !isIndeterminate && validMax && validValue ? Math.min(max, Math.max(0, value)) : 0;\n  const percentage = validMax ? (clamped / max) * 100 : 0;\n\n  // An empty or whitespace-only `label`, `aria-label` or `aria-labelledby` names nothing: it is\n  // treated like `undefined` by the precedence, the rendered attributes and the warning alike.\n  const hasLabel = isName(label);\n  const hasAriaLabel = isName(rest['aria-label']);\n  const hasAriaLabelledBy = isName(rest['aria-labelledby']);\n  const fieldLabelledBy = fieldProps['aria-labelledby'];\n  const hasFieldName = !hasLabel && !hasAriaLabel && !hasAriaLabelledBy && isName(fieldLabelledBy);\n\n  // Development diagnostics (C-DEV): emitted from an effect, once per page.\n  React.useEffect(() => {\n    if (!isDev) return;\n    if (!hasLabel && !hasAriaLabel && !hasAriaLabelledBy && !hasFieldName) {\n      warnOnce(\n        'ProgressBar:name',\n        'ProgressBar: a progress bar needs an accessible name. Pass `label` (add `showLabel` to show it), `aria-label` or `aria-labelledby`.',\n      );\n    }\n    if (showLabel && !hasLabel) {\n      warnOnce(\n        'ProgressBar:show-label',\n        'ProgressBar: `showLabel` renders the `label` prop, which is empty.',\n      );\n    }\n    if (!validMax) {\n      warnOnce(\n        'ProgressBar:max',\n        `ProgressBar: \\`max\\` must be a finite number greater than 0 (got ${String(max)}); the bar renders 0%.`,\n      );\n    }\n    if (!validValue) {\n      warnOnce(\n        'ProgressBar:value',\n        `ProgressBar: \\`value\\` must be a finite number (got ${String(value)}); the bar renders 0%.`,\n      );\n    }\n  }, [\n    hasLabel,\n    hasAriaLabel,\n    hasAriaLabelledBy,\n    hasFieldName,\n    showLabel,\n    validMax,\n    validValue,\n    max,\n    value,\n  ]);\n\n  const visibleLabel = Boolean(showLabel && hasLabel);\n\n  /**\n   * The bar's attributes. Defaults the consumer may override (C-COMPOSE) apply wherever the\n   * consumer's value is `undefined` — also when the key is present, e.g. a wrapper that forwards\n   * `aria-label={props['aria-label']}` — so a forwarded `undefined` never strips the role, the\n   * values or the name derived from `label`. An empty `aria-label`/`aria-labelledby` is dropped\n   * the same way instead of rendering a nameless attribute.\n   */\n  const barProps: Record<string, unknown> = {\n    role: 'progressbar',\n    'aria-valuenow': isIndeterminate ? undefined : clamped,\n    'aria-valuemin': 0,\n    'aria-valuemax': validMax ? max : 100,\n    'data-color': resolvedColor,\n  };\n  // The consumer's id (or the control id Field passes to its first child), else its own id inside\n  // a Field; the consumer's description, then the Field's validation message and hint.\n  if (fieldProps.id !== undefined) barProps.id = fieldProps.id;\n  if (fieldProps['aria-describedby'] !== undefined) {\n    barProps['aria-describedby'] = fieldProps['aria-describedby'];\n  }\n  // A consumer `aria-label` or `aria-labelledby` wins over the name derived from `label`, also\n  // with `showLabel` (the visible label then stays unreferenced text). The Field's label names\n  // only a bar without a name of its own.\n  if (!hasAriaLabel && !hasAriaLabelledBy) {\n    if (visibleLabel) barProps['aria-labelledby'] = labelId;\n    else if (hasLabel) barProps['aria-label'] = label;\n    else if (hasFieldName) barProps['aria-labelledby'] = fieldLabelledBy;\n  }\n  for (const [key, propValue] of Object.entries(rest)) {\n    if (propValue === undefined) continue;\n    if ((key === 'aria-label' || key === 'aria-labelledby') && !isName(propValue)) continue;\n    barProps[key] = propValue;\n  }\n\n  const bar = (\n    <div\n      {...barProps}\n      ref={ref}\n      className={cn(\n        'h-2 overflow-hidden rounded-full bg-track',\n        'forced-colors:border',\n        forcedColors.border,\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          'h-full rounded-full',\n          fillColorClasses[resolvedColor],\n          forcedColors.selectedLeaf,\n          isIndeterminate &&\n            'w-2/5 animate-wave-indeterminate wave-rtl:animate-wave-indeterminate-rtl motion-reduce:w-full motion-reduce:translate-x-0 motion-reduce:animate-wave-pulse wave-rtl:motion-reduce:animate-wave-pulse',\n        )}\n        style={isIndeterminate ? undefined : { width: `${percentage}%` }}\n      />\n    </div>\n  );\n\n  if (!visibleLabel) return bar;\n\n  return (\n    <div className=\"flex flex-col gap-1\">\n      <span id={labelId} className=\"text-body-1 text-foreground\">\n        {label}\n      </span>\n      {bar}\n    </div>\n  );\n};\n\nProgressBar.displayName = 'ProgressBar';\n"],"mappings":"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"}
+{"version":3,"file":"ProgressBar.cjs","names":["useId","useFieldContext","useFieldControl","isDev","cn","progressBarClassNames","forcedColors","require_runtime","require_cn","require_dev","require_classNames","require_useId","require_useFieldControl","require_styles","react","react_jsx_runtime","fillColorClasses","fieldColors","isName","value","ProgressBar","ariaDescribedBy","_ariaInvalid","_ariaRequired","rest","labelId","ownId","field","fieldProps","id","fieldState","resolvedColor","color","isIndeterminate","validMax","max","validValue","clamped","percentage","hasLabel","label","hasAriaLabel","hasAriaLabelledBy","fieldLabelledBy","hasFieldName","showLabel","visibleLabel","barProps","key","propValue","bar","className"],"sources":["../../../src/components/feedback/ProgressBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { progressBarClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { isDev, warnOnce } from '../../lib/dev';\nimport { forcedColors } from '../../lib/styles';\nimport type { ValidationState } from '../../lib/types';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useId } from '../../hooks/useId';\n\n/** Color of a {@link ProgressBar}'s fill. */\nexport type ProgressBarColor = 'brand' | 'success' | 'warning' | 'error';\n\n/** Properties for the ProgressBar component. */\nexport interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Current progress value, clamped to `0…max` for both the fill and `aria-valuenow`. Omit for\n   * indeterminate mode. A non-finite value renders 0% (development warning).\n   */\n  value?: number;\n  /**\n   * Maximum progress value. A `max` of 0 or less, or a non-finite `max`, renders 0% (development\n   * warning) and is reported to assistive technology as 0 of 100.\n   * @default 100\n   */\n  max?: number;\n  /**\n   * Accessible name of the progress bar: `aria-label` by default, or a visible label with\n   * `showLabel`. A progress bar needs a name (`label`, `aria-label` or `aria-labelledby`); a\n   * development warning fires without one. A consumer `aria-label` or `aria-labelledby` takes\n   * precedence over `label`; an empty or whitespace-only one counts as absent (it is not rendered).\n   * Inside a `Field`, the Field's label names the bar when neither `label` nor a consumer name is\n   * given.\n   */\n  label?: string;\n  /**\n   * Renders `label` as visible text above the bar and names the bar with it (`aria-labelledby`)\n   * instead of `aria-label`, unless a consumer `aria-label` or `aria-labelledby` names the bar\n   * (keep the visible text in that name, WCAG 2.5.3). The label and the bar are then wrapped in a\n   * `div`; `ref`, `className`, `style` and the other props stay on the progress bar element.\n   */\n  showLabel?: boolean;\n  /**\n   * Color of the fill. Inside a `Field` it follows the Field's validation state (error, warning,\n   * success) unless you set it. `warning` fills with the dark orange of the `severe` color, which\n   * keeps 3:1 against the track in every theme. The bar carries `data-color` with the resolved\n   * color.\n   * @default 'brand'\n   */\n  color?: ProgressBarColor;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst fillColorClasses: Record<ProgressBarColor, string> = {\n  brand: 'bg-primary',\n  success: 'bg-success',\n  // The warning token (a light yellow) is 1.02:1 on the light track: the severe orange passes 3:1.\n  warning: 'bg-severe',\n  error: 'bg-error',\n};\n\n/** The fill color a Field's validation state gives the bar (`none` keeps the default). */\nconst fieldColors: Partial<Record<ValidationState, ProgressBarColor>> = {\n  error: 'error',\n  warning: 'warning',\n  success: 'success',\n};\n\n/** Whether a name prop (`label`, `aria-label`, `aria-labelledby`) holds more than whitespace. */\nfunction isName(value: unknown): value is string {\n  return typeof value === 'string' && value.trim() !== '';\n}\n\n/**\n * Shows the progress of a task, or that a task is running (indeterminate, `value` omitted).\n *\n * - Name it with `label` (or `aria-label` / `aria-labelledby`); `showLabel` shows the label above\n *   the bar.\n * - `value` is clamped to `0…max`; invalid numbers render an empty bar and warn in development.\n * - `color` picks the fill (`brand`, `success`, `warning`, `error`).\n * - Inside a `Field`, the Field's label names a bar that has no name of its own, its validation\n *   message and hint describe the bar, and its validation state (error, warning, success) colors\n *   the fill unless `color` is set. A progress bar is never invalid or required: the\n *   `aria-invalid` and `aria-required` a Field adds are not rendered. Next to another control in\n *   a Field's wrapper element, the bar gets an id of its own and leaves the Field's\n *   `<label htmlFor>` to that control.\n * - The indeterminate animation follows the writing direction and becomes a full-width pulse for\n *   reduced motion. In forced-colors mode the fill uses `Highlight` and the track gets a border.\n *\n * @example\n * <ProgressBar value={uploaded} max={total} label=\"Uploading photos\" showLabel />\n *\n * @example\n * <Field label=\"Upload\" validationState=\"warning\" validationMessage=\"The connection is slow.\">\n *   <ProgressBar value={uploaded} max={total} />\n * </Field>\n */\nexport const ProgressBar = ({\n  value,\n  max = 100,\n  label,\n  showLabel,\n  color,\n  id,\n  'aria-describedby': ariaDescribedBy,\n  // Field merges both into its first child; neither is allowed on role=\"progressbar\".\n  'aria-invalid': _ariaInvalid,\n  'aria-required': _ariaRequired,\n  className,\n  ref,\n  ...rest\n}: ProgressBarProps) => {\n  const labelId = useId('progress-label');\n  const ownId = useId('progress');\n  const field = useFieldContext();\n  // A <label htmlFor> cannot name a progress bar, so inside a Field a bar without an id (Field\n  // passes its control id to a first child as `id`) takes its own instead of claiming the\n  // control id: that stays with the control the label names (an Input next to the bar in a\n  // wrapper). No name props are passed, so with `labelable: false` the merged `aria-labelledby`\n  // is exactly the Field's label id (or absent); it is used only when the bar has no name of its\n  // own.\n  const fieldProps = useFieldControl(\n    { id: id ?? (field ? ownId : undefined), 'aria-describedby': ariaDescribedBy },\n    { labelable: false },\n  );\n  // A context built before 0.6 has no validation state: read it from `invalid`.\n  const fieldState = field ? (field.validationState ?? (field.invalid ? 'error' : 'none')) : 'none';\n  const resolvedColor = color ?? fieldColors[fieldState] ?? 'brand';\n  const isIndeterminate = value === undefined;\n  const validMax = Number.isFinite(max) && max > 0;\n  const validValue = isIndeterminate || Number.isFinite(value);\n  /** Clamped once, used for both the fill width and `aria-valuenow`. */\n  const clamped =\n    !isIndeterminate && validMax && validValue ? Math.min(max, Math.max(0, value)) : 0;\n  const percentage = validMax ? (clamped / max) * 100 : 0;\n\n  // An empty or whitespace-only `label`, `aria-label` or `aria-labelledby` names nothing: it is\n  // treated like `undefined` by the precedence, the rendered attributes and the warning alike.\n  const hasLabel = isName(label);\n  const hasAriaLabel = isName(rest['aria-label']);\n  const hasAriaLabelledBy = isName(rest['aria-labelledby']);\n  const fieldLabelledBy = fieldProps['aria-labelledby'];\n  const hasFieldName = !hasLabel && !hasAriaLabel && !hasAriaLabelledBy && isName(fieldLabelledBy);\n\n  // Development diagnostics (C-DEV): emitted from an effect, once per page.\n  React.useEffect(() => {\n    if (!isDev) return;\n    if (!hasLabel && !hasAriaLabel && !hasAriaLabelledBy && !hasFieldName) {\n      warnOnce(\n        'ProgressBar:name',\n        'ProgressBar: a progress bar needs an accessible name. Pass `label` (add `showLabel` to show it), `aria-label` or `aria-labelledby`.',\n      );\n    }\n    if (showLabel && !hasLabel) {\n      warnOnce(\n        'ProgressBar:show-label',\n        'ProgressBar: `showLabel` renders the `label` prop, which is empty.',\n      );\n    }\n    if (!validMax) {\n      warnOnce(\n        'ProgressBar:max',\n        `ProgressBar: \\`max\\` must be a finite number greater than 0 (got ${String(max)}); the bar renders 0%.`,\n      );\n    }\n    if (!validValue) {\n      warnOnce(\n        'ProgressBar:value',\n        `ProgressBar: \\`value\\` must be a finite number (got ${String(value)}); the bar renders 0%.`,\n      );\n    }\n  }, [\n    hasLabel,\n    hasAriaLabel,\n    hasAriaLabelledBy,\n    hasFieldName,\n    showLabel,\n    validMax,\n    validValue,\n    max,\n    value,\n  ]);\n\n  const visibleLabel = Boolean(showLabel && hasLabel);\n\n  /**\n   * The bar's attributes. Defaults the consumer may override (C-COMPOSE) apply wherever the\n   * consumer's value is `undefined` — also when the key is present, e.g. a wrapper that forwards\n   * `aria-label={props['aria-label']}` — so a forwarded `undefined` never strips the role, the\n   * values or the name derived from `label`. An empty `aria-label`/`aria-labelledby` is dropped\n   * the same way instead of rendering a nameless attribute.\n   */\n  const barProps: Record<string, unknown> = {\n    role: 'progressbar',\n    'aria-valuenow': isIndeterminate ? undefined : clamped,\n    'aria-valuemin': 0,\n    'aria-valuemax': validMax ? max : 100,\n    'data-color': resolvedColor,\n  };\n  // The consumer's id (or the control id Field passes to its first child), else its own id inside\n  // a Field; the consumer's description, then the Field's validation message and hint.\n  if (fieldProps.id !== undefined) barProps.id = fieldProps.id;\n  if (fieldProps['aria-describedby'] !== undefined) {\n    barProps['aria-describedby'] = fieldProps['aria-describedby'];\n  }\n  // A consumer `aria-label` or `aria-labelledby` wins over the name derived from `label`, also\n  // with `showLabel` (the visible label then stays unreferenced text). The Field's label names\n  // only a bar without a name of its own.\n  if (!hasAriaLabel && !hasAriaLabelledBy) {\n    if (visibleLabel) barProps['aria-labelledby'] = labelId;\n    else if (hasLabel) barProps['aria-label'] = label;\n    else if (hasFieldName) barProps['aria-labelledby'] = fieldLabelledBy;\n  }\n  for (const [key, propValue] of Object.entries(rest)) {\n    if (propValue === undefined) continue;\n    if ((key === 'aria-label' || key === 'aria-labelledby') && !isName(propValue)) continue;\n    barProps[key] = propValue;\n  }\n\n  const bar = (\n    <div\n      {...barProps}\n      ref={ref}\n      className={cn(\n        progressBarClassNames.root,\n        'h-2 overflow-hidden rounded-full bg-track',\n        'forced-colors:border',\n        forcedColors.border,\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          progressBarClassNames.bar,\n          'h-full rounded-full',\n          fillColorClasses[resolvedColor],\n          forcedColors.selectedLeaf,\n          isIndeterminate &&\n            'w-2/5 animate-wave-indeterminate wave-rtl:animate-wave-indeterminate-rtl motion-reduce:w-full motion-reduce:translate-x-0 motion-reduce:animate-wave-pulse wave-rtl:motion-reduce:animate-wave-pulse',\n        )}\n        style={isIndeterminate ? undefined : { width: `${percentage}%` }}\n      />\n    </div>\n  );\n\n  if (!visibleLabel) return bar;\n\n  return (\n    <div className=\"flex flex-col gap-1\">\n      <span id={labelId} className={cn(progressBarClassNames.label, 'text-body-1 text-foreground')}>\n        {label}\n      </span>\n      {bar}\n    </div>\n  );\n};\n\nProgressBar.displayName = 'ProgressBar';\n"],"mappings":"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"}

package/dist/components/feedback/ProgressBar.mjs

@@ -1,72 +1,73 @@
 "use client";
 import { cn as e } from "../../lib/cn.mjs";
 import { isDev as t, warnOnce as n } from "../../lib/dev.mjs";
-import { useId as r } from "../../hooks/useId.mjs";
-import { useFieldContext as i, useFieldControl as a } from "../../hooks/useFieldControl.mjs";
-import { forcedColors as o } from "../../lib/styles.mjs";
-import * as s from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { progressBarClassNames as r } from "../../lib/classNames.mjs";
+import { useId as i } from "../../hooks/useId.mjs";
+import { useFieldContext as a, useFieldControl as o } from "../../hooks/useFieldControl.mjs";
+import { forcedColors as s } from "../../lib/styles.mjs";
+import * as c from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/feedback/ProgressBar.tsx
-var u = {
+var d = {
 	brand: "bg-primary",
 	success: "bg-success",
 	warning: "bg-severe",
 	error: "bg-error"
-}, d = {
+}, f = {
 	error: "error",
 	warning: "warning",
 	success: "success"
 };
-function f(e) {
+function p(e) {
 	return typeof e == "string" && e.trim() !== "";
 }
-var p = ({ value: p, max: m = 100, label: h, showLabel: g, color: _, id: v, "aria-describedby": y, "aria-invalid": b, "aria-required": x, className: S, ref: C, ...w }) => {
-	let T = r("progress-label"), E = r("progress"), D = i(), O = a({
-		id: v ?? (D ? E : void 0),
-		"aria-describedby": y
-	}, { labelable: !1 }), k = D ? D.validationState ?? (D.invalid ? "error" : "none") : "none", A = _ ?? d[k] ?? "brand", j = p === void 0, M = Number.isFinite(m) && m > 0, N = j || Number.isFinite(p), P = !j && M && N ? Math.min(m, Math.max(0, p)) : 0, F = M ? P / m * 100 : 0, I = f(h), L = f(w["aria-label"]), R = f(w["aria-labelledby"]), z = O["aria-labelledby"], B = !I && !L && !R && f(z);
-	s.useEffect(() => {
-		t && (!I && !L && !R && !B && n("ProgressBar:name", "ProgressBar: a progress bar needs an accessible name. Pass `label` (add `showLabel` to show it), `aria-label` or `aria-labelledby`."), g && !I && n("ProgressBar:show-label", "ProgressBar: `showLabel` renders the `label` prop, which is empty."), M || n("ProgressBar:max", `ProgressBar: \`max\` must be a finite number greater than 0 (got ${String(m)}); the bar renders 0%.`), N || n("ProgressBar:value", `ProgressBar: \`value\` must be a finite number (got ${String(p)}); the bar renders 0%.`));
+var m = ({ value: m, max: h = 100, label: g, showLabel: _, color: v, id: y, "aria-describedby": b, "aria-invalid": x, "aria-required": S, className: C, ref: w, ...T }) => {
+	let E = i("progress-label"), D = i("progress"), O = a(), k = o({
+		id: y ?? (O ? D : void 0),
+		"aria-describedby": b
+	}, { labelable: !1 }), A = O ? O.validationState ?? (O.invalid ? "error" : "none") : "none", j = v ?? f[A] ?? "brand", M = m === void 0, N = Number.isFinite(h) && h > 0, P = M || Number.isFinite(m), F = !M && N && P ? Math.min(h, Math.max(0, m)) : 0, I = N ? F / h * 100 : 0, L = p(g), R = p(T["aria-label"]), z = p(T["aria-labelledby"]), B = k["aria-labelledby"], V = !L && !R && !z && p(B);
+	c.useEffect(() => {
+		t && (!L && !R && !z && !V && n("ProgressBar:name", "ProgressBar: a progress bar needs an accessible name. Pass `label` (add `showLabel` to show it), `aria-label` or `aria-labelledby`."), _ && !L && n("ProgressBar:show-label", "ProgressBar: `showLabel` renders the `label` prop, which is empty."), N || n("ProgressBar:max", `ProgressBar: \`max\` must be a finite number greater than 0 (got ${String(h)}); the bar renders 0%.`), P || n("ProgressBar:value", `ProgressBar: \`value\` must be a finite number (got ${String(m)}); the bar renders 0%.`));
 	}, [
-		I,
 		L,
 		R,
-		B,
-		g,
-		M,
+		z,
+		V,
+		_,
 		N,
-		m,
-		p
+		P,
+		h,
+		m
 	]);
-	let V = !!(g && I), H = {
+	let H = !!(_ && L), U = {
 		role: "progressbar",
-		"aria-valuenow": j ? void 0 : P,
+		"aria-valuenow": M ? void 0 : F,
 		"aria-valuemin": 0,
-		"aria-valuemax": M ? m : 100,
-		"data-color": A
+		"aria-valuemax": N ? h : 100,
+		"data-color": j
 	};
-	O.id !== void 0 && (H.id = O.id), O["aria-describedby"] !== void 0 && (H["aria-describedby"] = O["aria-describedby"]), !L && !R && (V ? H["aria-labelledby"] = T : I ? H["aria-label"] = h : B && (H["aria-labelledby"] = z));
-	for (let [e, t] of Object.entries(w)) t !== void 0 && (e !== "aria-label" && e !== "aria-labelledby" || f(t)) && (H[e] = t);
-	let U = /* @__PURE__ */ c("div", {
-		...H,
-		ref: C,
-		className: e("h-2 overflow-hidden rounded-full bg-track", "forced-colors:border", o.border, S),
-		children: /* @__PURE__ */ c("div", {
-			className: e("h-full rounded-full", u[A], o.selectedLeaf, j && "w-2/5 animate-wave-indeterminate wave-rtl:animate-wave-indeterminate-rtl motion-reduce:w-full motion-reduce:translate-x-0 motion-reduce:animate-wave-pulse wave-rtl:motion-reduce:animate-wave-pulse"),
-			style: j ? void 0 : { width: `${F}%` }
+	k.id !== void 0 && (U.id = k.id), k["aria-describedby"] !== void 0 && (U["aria-describedby"] = k["aria-describedby"]), !R && !z && (H ? U["aria-labelledby"] = E : L ? U["aria-label"] = g : V && (U["aria-labelledby"] = B));
+	for (let [e, t] of Object.entries(T)) t !== void 0 && (e !== "aria-label" && e !== "aria-labelledby" || p(t)) && (U[e] = t);
+	let W = /* @__PURE__ */ l("div", {
+		...U,
+		ref: w,
+		className: e(r.root, "h-2 overflow-hidden rounded-full bg-track", "forced-colors:border", s.border, C),
+		children: /* @__PURE__ */ l("div", {
+			className: e(r.bar, "h-full rounded-full", d[j], s.selectedLeaf, M && "w-2/5 animate-wave-indeterminate wave-rtl:animate-wave-indeterminate-rtl motion-reduce:w-full motion-reduce:translate-x-0 motion-reduce:animate-wave-pulse wave-rtl:motion-reduce:animate-wave-pulse"),
+			style: M ? void 0 : { width: `${I}%` }
 		})
 	});
-	return V ? /* @__PURE__ */ l("div", {
+	return H ? /* @__PURE__ */ u("div", {
 		className: "flex flex-col gap-1",
-		children: [/* @__PURE__ */ c("span", {
-			id: T,
-			className: "text-body-1 text-foreground",
-			children: h
-		}), U]
-	}) : U;
+		children: [/* @__PURE__ */ l("span", {
+			id: E,
+			className: e(r.label, "text-body-1 text-foreground"),
+			children: g
+		}), W]
+	}) : W;
 };
-p.displayName = "ProgressBar";
+m.displayName = "ProgressBar";
 //#endregion
-export { p as ProgressBar };
+export { m as ProgressBar };
 
 //# sourceMappingURL=ProgressBar.mjs.map

package/dist/components/feedback/ProgressBar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.mjs","names":["useId","useId$1","React","fillColorClasses","fieldColors","isName","value","ProgressBar","ariaDescribedBy","_ariaInvalid","_ariaRequired","rest","labelId","ownId","field","useFieldContext","fieldProps","useFieldControl","id","fieldState","resolvedColor","color","isIndeterminate","validMax","max","validValue","clamped","percentage","hasLabel","label","hasAriaLabel","hasAriaLabelledBy","fieldLabelledBy","hasFieldName","isDev","warnOnce","showLabel","visibleLabel","barProps","key","propValue","bar","cn","forcedColors","className"],"sources":["../../../src/components/feedback/ProgressBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { isDev, warnOnce } from '../../lib/dev';\nimport { forcedColors } from '../../lib/styles';\nimport type { ValidationState } from '../../lib/types';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useId } from '../../hooks/useId';\n\n/** Color of a {@link ProgressBar}'s fill. */\nexport type ProgressBarColor = 'brand' | 'success' | 'warning' | 'error';\n\n/** Properties for the ProgressBar component. */\nexport interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Current progress value, clamped to `0…max` for both the fill and `aria-valuenow`. Omit for\n   * indeterminate mode. A non-finite value renders 0% (development warning).\n   */\n  value?: number;\n  /**\n   * Maximum progress value. A `max` of 0 or less, or a non-finite `max`, renders 0% (development\n   * warning) and is reported to assistive technology as 0 of 100.\n   * @default 100\n   */\n  max?: number;\n  /**\n   * Accessible name of the progress bar: `aria-label` by default, or a visible label with\n   * `showLabel`. A progress bar needs a name (`label`, `aria-label` or `aria-labelledby`); a\n   * development warning fires without one. A consumer `aria-label` or `aria-labelledby` takes\n   * precedence over `label`; an empty or whitespace-only one counts as absent (it is not rendered).\n   * Inside a `Field`, the Field's label names the bar when neither `label` nor a consumer name is\n   * given.\n   */\n  label?: string;\n  /**\n   * Renders `label` as visible text above the bar and names the bar with it (`aria-labelledby`)\n   * instead of `aria-label`, unless a consumer `aria-label` or `aria-labelledby` names the bar\n   * (keep the visible text in that name, WCAG 2.5.3). The label and the bar are then wrapped in a\n   * `div`; `ref`, `className`, `style` and the other props stay on the progress bar element.\n   */\n  showLabel?: boolean;\n  /**\n   * Color of the fill. Inside a `Field` it follows the Field's validation state (error, warning,\n   * success) unless you set it. `warning` fills with the dark orange of the `severe` color, which\n   * keeps 3:1 against the track in every theme. The bar carries `data-color` with the resolved\n   * color.\n   * @default 'brand'\n   */\n  color?: ProgressBarColor;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst fillColorClasses: Record<ProgressBarColor, string> = {\n  brand: 'bg-primary',\n  success: 'bg-success',\n  // The warning token (a light yellow) is 1.02:1 on the light track: the severe orange passes 3:1.\n  warning: 'bg-severe',\n  error: 'bg-error',\n};\n\n/** The fill color a Field's validation state gives the bar (`none` keeps the default). */\nconst fieldColors: Partial<Record<ValidationState, ProgressBarColor>> = {\n  error: 'error',\n  warning: 'warning',\n  success: 'success',\n};\n\n/** Whether a name prop (`label`, `aria-label`, `aria-labelledby`) holds more than whitespace. */\nfunction isName(value: unknown): value is string {\n  return typeof value === 'string' && value.trim() !== '';\n}\n\n/**\n * Shows the progress of a task, or that a task is running (indeterminate, `value` omitted).\n *\n * - Name it with `label` (or `aria-label` / `aria-labelledby`); `showLabel` shows the label above\n *   the bar.\n * - `value` is clamped to `0…max`; invalid numbers render an empty bar and warn in development.\n * - `color` picks the fill (`brand`, `success`, `warning`, `error`).\n * - Inside a `Field`, the Field's label names a bar that has no name of its own, its validation\n *   message and hint describe the bar, and its validation state (error, warning, success) colors\n *   the fill unless `color` is set. A progress bar is never invalid or required: the\n *   `aria-invalid` and `aria-required` a Field adds are not rendered. Next to another control in\n *   a Field's wrapper element, the bar gets an id of its own and leaves the Field's\n *   `<label htmlFor>` to that control.\n * - The indeterminate animation follows the writing direction and becomes a full-width pulse for\n *   reduced motion. In forced-colors mode the fill uses `Highlight` and the track gets a border.\n *\n * @example\n * <ProgressBar value={uploaded} max={total} label=\"Uploading photos\" showLabel />\n *\n * @example\n * <Field label=\"Upload\" validationState=\"warning\" validationMessage=\"The connection is slow.\">\n *   <ProgressBar value={uploaded} max={total} />\n * </Field>\n */\nexport const ProgressBar = ({\n  value,\n  max = 100,\n  label,\n  showLabel,\n  color,\n  id,\n  'aria-describedby': ariaDescribedBy,\n  // Field merges both into its first child; neither is allowed on role=\"progressbar\".\n  'aria-invalid': _ariaInvalid,\n  'aria-required': _ariaRequired,\n  className,\n  ref,\n  ...rest\n}: ProgressBarProps) => {\n  const labelId = useId('progress-label');\n  const ownId = useId('progress');\n  const field = useFieldContext();\n  // A <label htmlFor> cannot name a progress bar, so inside a Field a bar without an id (Field\n  // passes its control id to a first child as `id`) takes its own instead of claiming the\n  // control id: that stays with the control the label names (an Input next to the bar in a\n  // wrapper). No name props are passed, so with `labelable: false` the merged `aria-labelledby`\n  // is exactly the Field's label id (or absent); it is used only when the bar has no name of its\n  // own.\n  const fieldProps = useFieldControl(\n    { id: id ?? (field ? ownId : undefined), 'aria-describedby': ariaDescribedBy },\n    { labelable: false },\n  );\n  // A context built before 0.6 has no validation state: read it from `invalid`.\n  const fieldState = field ? (field.validationState ?? (field.invalid ? 'error' : 'none')) : 'none';\n  const resolvedColor = color ?? fieldColors[fieldState] ?? 'brand';\n  const isIndeterminate = value === undefined;\n  const validMax = Number.isFinite(max) && max > 0;\n  const validValue = isIndeterminate || Number.isFinite(value);\n  /** Clamped once, used for both the fill width and `aria-valuenow`. */\n  const clamped =\n    !isIndeterminate && validMax && validValue ? Math.min(max, Math.max(0, value)) : 0;\n  const percentage = validMax ? (clamped / max) * 100 : 0;\n\n  // An empty or whitespace-only `label`, `aria-label` or `aria-labelledby` names nothing: it is\n  // treated like `undefined` by the precedence, the rendered attributes and the warning alike.\n  const hasLabel = isName(label);\n  const hasAriaLabel = isName(rest['aria-label']);\n  const hasAriaLabelledBy = isName(rest['aria-labelledby']);\n  const fieldLabelledBy = fieldProps['aria-labelledby'];\n  const hasFieldName = !hasLabel && !hasAriaLabel && !hasAriaLabelledBy && isName(fieldLabelledBy);\n\n  // Development diagnostics (C-DEV): emitted from an effect, once per page.\n  React.useEffect(() => {\n    if (!isDev) return;\n    if (!hasLabel && !hasAriaLabel && !hasAriaLabelledBy && !hasFieldName) {\n      warnOnce(\n        'ProgressBar:name',\n        'ProgressBar: a progress bar needs an accessible name. Pass `label` (add `showLabel` to show it), `aria-label` or `aria-labelledby`.',\n      );\n    }\n    if (showLabel && !hasLabel) {\n      warnOnce(\n        'ProgressBar:show-label',\n        'ProgressBar: `showLabel` renders the `label` prop, which is empty.',\n      );\n    }\n    if (!validMax) {\n      warnOnce(\n        'ProgressBar:max',\n        `ProgressBar: \\`max\\` must be a finite number greater than 0 (got ${String(max)}); the bar renders 0%.`,\n      );\n    }\n    if (!validValue) {\n      warnOnce(\n        'ProgressBar:value',\n        `ProgressBar: \\`value\\` must be a finite number (got ${String(value)}); the bar renders 0%.`,\n      );\n    }\n  }, [\n    hasLabel,\n    hasAriaLabel,\n    hasAriaLabelledBy,\n    hasFieldName,\n    showLabel,\n    validMax,\n    validValue,\n    max,\n    value,\n  ]);\n\n  const visibleLabel = Boolean(showLabel && hasLabel);\n\n  /**\n   * The bar's attributes. Defaults the consumer may override (C-COMPOSE) apply wherever the\n   * consumer's value is `undefined` — also when the key is present, e.g. a wrapper that forwards\n   * `aria-label={props['aria-label']}` — so a forwarded `undefined` never strips the role, the\n   * values or the name derived from `label`. An empty `aria-label`/`aria-labelledby` is dropped\n   * the same way instead of rendering a nameless attribute.\n   */\n  const barProps: Record<string, unknown> = {\n    role: 'progressbar',\n    'aria-valuenow': isIndeterminate ? undefined : clamped,\n    'aria-valuemin': 0,\n    'aria-valuemax': validMax ? max : 100,\n    'data-color': resolvedColor,\n  };\n  // The consumer's id (or the control id Field passes to its first child), else its own id inside\n  // a Field; the consumer's description, then the Field's validation message and hint.\n  if (fieldProps.id !== undefined) barProps.id = fieldProps.id;\n  if (fieldProps['aria-describedby'] !== undefined) {\n    barProps['aria-describedby'] = fieldProps['aria-describedby'];\n  }\n  // A consumer `aria-label` or `aria-labelledby` wins over the name derived from `label`, also\n  // with `showLabel` (the visible label then stays unreferenced text). The Field's label names\n  // only a bar without a name of its own.\n  if (!hasAriaLabel && !hasAriaLabelledBy) {\n    if (visibleLabel) barProps['aria-labelledby'] = labelId;\n    else if (hasLabel) barProps['aria-label'] = label;\n    else if (hasFieldName) barProps['aria-labelledby'] = fieldLabelledBy;\n  }\n  for (const [key, propValue] of Object.entries(rest)) {\n    if (propValue === undefined) continue;\n    if ((key === 'aria-label' || key === 'aria-labelledby') && !isName(propValue)) continue;\n    barProps[key] = propValue;\n  }\n\n  const bar = (\n    <div\n      {...barProps}\n      ref={ref}\n      className={cn(\n        'h-2 overflow-hidden rounded-full bg-track',\n        'forced-colors:border',\n        forcedColors.border,\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          'h-full rounded-full',\n          fillColorClasses[resolvedColor],\n          forcedColors.selectedLeaf,\n          isIndeterminate &&\n            'w-2/5 animate-wave-indeterminate wave-rtl:animate-wave-indeterminate-rtl motion-reduce:w-full motion-reduce:translate-x-0 motion-reduce:animate-wave-pulse wave-rtl:motion-reduce:animate-wave-pulse',\n        )}\n        style={isIndeterminate ? undefined : { width: `${percentage}%` }}\n      />\n    </div>\n  );\n\n  if (!visibleLabel) return bar;\n\n  return (\n    <div className=\"flex flex-col gap-1\">\n      <span id={labelId} className=\"text-body-1 text-foreground\">\n        {label}\n      </span>\n      {bar}\n    </div>\n  );\n};\n\nProgressBar.displayName = 'ProgressBar';\n"],"mappings":"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"}
+{"version":3,"file":"ProgressBar.mjs","names":["useId","useId$1","React","fillColorClasses","fieldColors","isName","value","ProgressBar","ariaDescribedBy","_ariaInvalid","_ariaRequired","rest","labelId","ownId","field","useFieldContext","fieldProps","useFieldControl","id","fieldState","resolvedColor","color","isIndeterminate","validMax","max","validValue","clamped","percentage","hasLabel","label","hasAriaLabel","hasAriaLabelledBy","fieldLabelledBy","hasFieldName","isDev","warnOnce","showLabel","visibleLabel","barProps","key","propValue","bar","cn","progressBarClassNames","forcedColors","className"],"sources":["../../../src/components/feedback/ProgressBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { progressBarClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { isDev, warnOnce } from '../../lib/dev';\nimport { forcedColors } from '../../lib/styles';\nimport type { ValidationState } from '../../lib/types';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useId } from '../../hooks/useId';\n\n/** Color of a {@link ProgressBar}'s fill. */\nexport type ProgressBarColor = 'brand' | 'success' | 'warning' | 'error';\n\n/** Properties for the ProgressBar component. */\nexport interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Current progress value, clamped to `0…max` for both the fill and `aria-valuenow`. Omit for\n   * indeterminate mode. A non-finite value renders 0% (development warning).\n   */\n  value?: number;\n  /**\n   * Maximum progress value. A `max` of 0 or less, or a non-finite `max`, renders 0% (development\n   * warning) and is reported to assistive technology as 0 of 100.\n   * @default 100\n   */\n  max?: number;\n  /**\n   * Accessible name of the progress bar: `aria-label` by default, or a visible label with\n   * `showLabel`. A progress bar needs a name (`label`, `aria-label` or `aria-labelledby`); a\n   * development warning fires without one. A consumer `aria-label` or `aria-labelledby` takes\n   * precedence over `label`; an empty or whitespace-only one counts as absent (it is not rendered).\n   * Inside a `Field`, the Field's label names the bar when neither `label` nor a consumer name is\n   * given.\n   */\n  label?: string;\n  /**\n   * Renders `label` as visible text above the bar and names the bar with it (`aria-labelledby`)\n   * instead of `aria-label`, unless a consumer `aria-label` or `aria-labelledby` names the bar\n   * (keep the visible text in that name, WCAG 2.5.3). The label and the bar are then wrapped in a\n   * `div`; `ref`, `className`, `style` and the other props stay on the progress bar element.\n   */\n  showLabel?: boolean;\n  /**\n   * Color of the fill. Inside a `Field` it follows the Field's validation state (error, warning,\n   * success) unless you set it. `warning` fills with the dark orange of the `severe` color, which\n   * keeps 3:1 against the track in every theme. The bar carries `data-color` with the resolved\n   * color.\n   * @default 'brand'\n   */\n  color?: ProgressBarColor;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst fillColorClasses: Record<ProgressBarColor, string> = {\n  brand: 'bg-primary',\n  success: 'bg-success',\n  // The warning token (a light yellow) is 1.02:1 on the light track: the severe orange passes 3:1.\n  warning: 'bg-severe',\n  error: 'bg-error',\n};\n\n/** The fill color a Field's validation state gives the bar (`none` keeps the default). */\nconst fieldColors: Partial<Record<ValidationState, ProgressBarColor>> = {\n  error: 'error',\n  warning: 'warning',\n  success: 'success',\n};\n\n/** Whether a name prop (`label`, `aria-label`, `aria-labelledby`) holds more than whitespace. */\nfunction isName(value: unknown): value is string {\n  return typeof value === 'string' && value.trim() !== '';\n}\n\n/**\n * Shows the progress of a task, or that a task is running (indeterminate, `value` omitted).\n *\n * - Name it with `label` (or `aria-label` / `aria-labelledby`); `showLabel` shows the label above\n *   the bar.\n * - `value` is clamped to `0…max`; invalid numbers render an empty bar and warn in development.\n * - `color` picks the fill (`brand`, `success`, `warning`, `error`).\n * - Inside a `Field`, the Field's label names a bar that has no name of its own, its validation\n *   message and hint describe the bar, and its validation state (error, warning, success) colors\n *   the fill unless `color` is set. A progress bar is never invalid or required: the\n *   `aria-invalid` and `aria-required` a Field adds are not rendered. Next to another control in\n *   a Field's wrapper element, the bar gets an id of its own and leaves the Field's\n *   `<label htmlFor>` to that control.\n * - The indeterminate animation follows the writing direction and becomes a full-width pulse for\n *   reduced motion. In forced-colors mode the fill uses `Highlight` and the track gets a border.\n *\n * @example\n * <ProgressBar value={uploaded} max={total} label=\"Uploading photos\" showLabel />\n *\n * @example\n * <Field label=\"Upload\" validationState=\"warning\" validationMessage=\"The connection is slow.\">\n *   <ProgressBar value={uploaded} max={total} />\n * </Field>\n */\nexport const ProgressBar = ({\n  value,\n  max = 100,\n  label,\n  showLabel,\n  color,\n  id,\n  'aria-describedby': ariaDescribedBy,\n  // Field merges both into its first child; neither is allowed on role=\"progressbar\".\n  'aria-invalid': _ariaInvalid,\n  'aria-required': _ariaRequired,\n  className,\n  ref,\n  ...rest\n}: ProgressBarProps) => {\n  const labelId = useId('progress-label');\n  const ownId = useId('progress');\n  const field = useFieldContext();\n  // A <label htmlFor> cannot name a progress bar, so inside a Field a bar without an id (Field\n  // passes its control id to a first child as `id`) takes its own instead of claiming the\n  // control id: that stays with the control the label names (an Input next to the bar in a\n  // wrapper). No name props are passed, so with `labelable: false` the merged `aria-labelledby`\n  // is exactly the Field's label id (or absent); it is used only when the bar has no name of its\n  // own.\n  const fieldProps = useFieldControl(\n    { id: id ?? (field ? ownId : undefined), 'aria-describedby': ariaDescribedBy },\n    { labelable: false },\n  );\n  // A context built before 0.6 has no validation state: read it from `invalid`.\n  const fieldState = field ? (field.validationState ?? (field.invalid ? 'error' : 'none')) : 'none';\n  const resolvedColor = color ?? fieldColors[fieldState] ?? 'brand';\n  const isIndeterminate = value === undefined;\n  const validMax = Number.isFinite(max) && max > 0;\n  const validValue = isIndeterminate || Number.isFinite(value);\n  /** Clamped once, used for both the fill width and `aria-valuenow`. */\n  const clamped =\n    !isIndeterminate && validMax && validValue ? Math.min(max, Math.max(0, value)) : 0;\n  const percentage = validMax ? (clamped / max) * 100 : 0;\n\n  // An empty or whitespace-only `label`, `aria-label` or `aria-labelledby` names nothing: it is\n  // treated like `undefined` by the precedence, the rendered attributes and the warning alike.\n  const hasLabel = isName(label);\n  const hasAriaLabel = isName(rest['aria-label']);\n  const hasAriaLabelledBy = isName(rest['aria-labelledby']);\n  const fieldLabelledBy = fieldProps['aria-labelledby'];\n  const hasFieldName = !hasLabel && !hasAriaLabel && !hasAriaLabelledBy && isName(fieldLabelledBy);\n\n  // Development diagnostics (C-DEV): emitted from an effect, once per page.\n  React.useEffect(() => {\n    if (!isDev) return;\n    if (!hasLabel && !hasAriaLabel && !hasAriaLabelledBy && !hasFieldName) {\n      warnOnce(\n        'ProgressBar:name',\n        'ProgressBar: a progress bar needs an accessible name. Pass `label` (add `showLabel` to show it), `aria-label` or `aria-labelledby`.',\n      );\n    }\n    if (showLabel && !hasLabel) {\n      warnOnce(\n        'ProgressBar:show-label',\n        'ProgressBar: `showLabel` renders the `label` prop, which is empty.',\n      );\n    }\n    if (!validMax) {\n      warnOnce(\n        'ProgressBar:max',\n        `ProgressBar: \\`max\\` must be a finite number greater than 0 (got ${String(max)}); the bar renders 0%.`,\n      );\n    }\n    if (!validValue) {\n      warnOnce(\n        'ProgressBar:value',\n        `ProgressBar: \\`value\\` must be a finite number (got ${String(value)}); the bar renders 0%.`,\n      );\n    }\n  }, [\n    hasLabel,\n    hasAriaLabel,\n    hasAriaLabelledBy,\n    hasFieldName,\n    showLabel,\n    validMax,\n    validValue,\n    max,\n    value,\n  ]);\n\n  const visibleLabel = Boolean(showLabel && hasLabel);\n\n  /**\n   * The bar's attributes. Defaults the consumer may override (C-COMPOSE) apply wherever the\n   * consumer's value is `undefined` — also when the key is present, e.g. a wrapper that forwards\n   * `aria-label={props['aria-label']}` — so a forwarded `undefined` never strips the role, the\n   * values or the name derived from `label`. An empty `aria-label`/`aria-labelledby` is dropped\n   * the same way instead of rendering a nameless attribute.\n   */\n  const barProps: Record<string, unknown> = {\n    role: 'progressbar',\n    'aria-valuenow': isIndeterminate ? undefined : clamped,\n    'aria-valuemin': 0,\n    'aria-valuemax': validMax ? max : 100,\n    'data-color': resolvedColor,\n  };\n  // The consumer's id (or the control id Field passes to its first child), else its own id inside\n  // a Field; the consumer's description, then the Field's validation message and hint.\n  if (fieldProps.id !== undefined) barProps.id = fieldProps.id;\n  if (fieldProps['aria-describedby'] !== undefined) {\n    barProps['aria-describedby'] = fieldProps['aria-describedby'];\n  }\n  // A consumer `aria-label` or `aria-labelledby` wins over the name derived from `label`, also\n  // with `showLabel` (the visible label then stays unreferenced text). The Field's label names\n  // only a bar without a name of its own.\n  if (!hasAriaLabel && !hasAriaLabelledBy) {\n    if (visibleLabel) barProps['aria-labelledby'] = labelId;\n    else if (hasLabel) barProps['aria-label'] = label;\n    else if (hasFieldName) barProps['aria-labelledby'] = fieldLabelledBy;\n  }\n  for (const [key, propValue] of Object.entries(rest)) {\n    if (propValue === undefined) continue;\n    if ((key === 'aria-label' || key === 'aria-labelledby') && !isName(propValue)) continue;\n    barProps[key] = propValue;\n  }\n\n  const bar = (\n    <div\n      {...barProps}\n      ref={ref}\n      className={cn(\n        progressBarClassNames.root,\n        'h-2 overflow-hidden rounded-full bg-track',\n        'forced-colors:border',\n        forcedColors.border,\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          progressBarClassNames.bar,\n          'h-full rounded-full',\n          fillColorClasses[resolvedColor],\n          forcedColors.selectedLeaf,\n          isIndeterminate &&\n            'w-2/5 animate-wave-indeterminate wave-rtl:animate-wave-indeterminate-rtl motion-reduce:w-full motion-reduce:translate-x-0 motion-reduce:animate-wave-pulse wave-rtl:motion-reduce:animate-wave-pulse',\n        )}\n        style={isIndeterminate ? undefined : { width: `${percentage}%` }}\n      />\n    </div>\n  );\n\n  if (!visibleLabel) return bar;\n\n  return (\n    <div className=\"flex flex-col gap-1\">\n      <span id={labelId} className={cn(progressBarClassNames.label, 'text-body-1 text-foreground')}>\n        {label}\n      </span>\n      {bar}\n    </div>\n  );\n};\n\nProgressBar.displayName = 'ProgressBar';\n"],"mappings":"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"}

package/dist/components/feedback/Skeleton.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a={text:`rounded`,circular:`circular`,rectangular:`rounded`},o=`forced-colors:bg-[GrayText] forced-colors:forced-color-adjust-none`,s={rounded:`rounded`,circular:`rounded-full`,square:`rounded-none`},c=({width:e,height:r,shape:c,variant:l,className:u,style:d,ref:f,...p})=>{let m=n.resolveDeprecatedProp(`Skeleton`,c,l===void 0?void 0:a[l],`variant`,`shape`)??`rounded`;return(0,i.jsx)(`div`,{"aria-hidden":`true`,...p,ref:f,className:t.cn(`bg-skeleton animate-wave-pulse motion-reduce:animate-none`,o,s[m],u),style:{width:e,height:r,...d}})};c.displayName=`Skeleton`;var l=({label:e=`Loading`,"aria-busy":t=!0,children:n,ref:r,...a})=>{let o=t!==!1&&t!==`false`;return(0,i.jsxs)(`div`,{...a,"aria-busy":t,ref:r,children:[o&&(0,i.jsx)(`span`,{className:`sr-only`,children:e}),n]})};l.displayName=`SkeletonGroup`;var u=Object.assign(c,{Group:l});exports.Skeleton=u,exports.SkeletonGroup=l;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/classNames.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o={text:`rounded`,circular:`circular`,rectangular:`rounded`},s=`forced-colors:bg-[GrayText] forced-colors:forced-color-adjust-none`,c={rounded:`rounded`,circular:`rounded-full`,square:`rounded-none`},l=({width:e,height:i,shape:l,variant:u,className:d,style:f,ref:p,...m})=>{let h=n.resolveDeprecatedProp(`Skeleton`,l,u===void 0?void 0:o[u],`variant`,`shape`)??`rounded`;return(0,a.jsx)(`div`,{"aria-hidden":`true`,...m,ref:p,className:t.cn(r.skeletonClassNames.root,`bg-skeleton animate-wave-pulse motion-reduce:animate-none`,s,c[h],d),style:{width:e,height:i,...f}})};l.displayName=`Skeleton`;var u=({label:e=`Loading`,"aria-busy":n=!0,className:i,children:o,ref:s,...c})=>{let l=n!==!1&&n!==`false`;return(0,a.jsxs)(`div`,{...c,"aria-busy":n,ref:s,className:t.cn(r.skeletonGroupClassNames.root,i),children:[l&&(0,a.jsx)(`span`,{className:`sr-only`,children:e}),o]})};u.displayName=`SkeletonGroup`;var d=Object.assign(l,{Group:u});exports.Skeleton=d,exports.SkeletonGroup=u;
 //# sourceMappingURL=Skeleton.cjs.map

package/dist/components/feedback/Skeleton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.cjs","names":["resolveDeprecatedProp","cn","require_runtime","require_cn","require_dev","react","react_jsx_runtime","variantShapes","forcedColorsFill","shapeClasses","SkeletonRoot","shapeProp","rest","shape","variant","className","style","SkeletonGroup","busy","loading","label","children","Skeleton"],"sources":["../../../src/components/feedback/Skeleton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { resolveDeprecatedProp } from '../../lib/dev';\nimport type { Shape } from '../../lib/types';\n\n/** The 0.4 `variant` values (deprecated; written out in {@link SkeletonProps}, not a public name). */\ntype SkeletonVariant = NonNullable<SkeletonProps['variant']>;\n\n/** `rectangular` rendered with the default 4px radius in 0.4, so it maps to `rounded`. */\nconst variantShapes: Record<SkeletonVariant, Shape> = {\n  text: 'rounded',\n  circular: 'circular',\n  rectangular: 'rounded',\n};\n\n/**\n * Forced colors replace the author fill with the page color, so the placeholder would vanish: it\n * is painted `GrayText` instead (a leaf element, so opting out of forced colors reaches nothing\n * else).\n */\nconst forcedColorsFill = 'forced-colors:bg-[GrayText] forced-colors:forced-color-adjust-none';\n\nconst shapeClasses: Record<Shape, string> = {\n  rounded: 'rounded',\n  circular: 'rounded-full',\n  square: 'rounded-none',\n};\n\n/** Properties for the Skeleton component. */\nexport interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Width of the skeleton placeholder. */\n  width?: string | number;\n  /** Height of the skeleton placeholder. */\n  height?: string | number;\n  /**\n   * Geometry of the placeholder: `rounded` (4px radius), `circular` (avatars) or `square`.\n   * @default 'rounded'\n   */\n  shape?: Shape;\n  /**\n   * @deprecated Use `shape`: `text` and `rectangular` → `rounded` (their 0.4 look), `circular` →\n   * `circular`. Still works, warns once in development, and `shape` wins when both are given.\n   */\n  variant?: 'text' | 'circular' | 'rectangular';\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n// The component-level JSDoc sits on the exported `Skeleton` below (it reaches index.d.ts).\nconst SkeletonRoot = ({\n  width,\n  height,\n  shape: shapeProp,\n  variant,\n  className,\n  style,\n  ref,\n  ...rest\n}: SkeletonProps) => {\n  const shape =\n    resolveDeprecatedProp(\n      'Skeleton',\n      shapeProp,\n      variant === undefined ? undefined : variantShapes[variant],\n      'variant',\n      'shape',\n    ) ?? 'rounded';\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      {...rest}\n      ref={ref}\n      className={cn(\n        'bg-skeleton animate-wave-pulse motion-reduce:animate-none',\n        forcedColorsFill,\n        shapeClasses[shape],\n        className,\n      )}\n      style={{ width, height, ...style }}\n    />\n  );\n};\nSkeletonRoot.displayName = 'Skeleton';\n\n/** Properties for the Skeleton.Group component. */\nexport interface SkeletonGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Visually hidden text announced in place of the decorative placeholders. Localize it.\n   * @default 'Loading'\n   */\n  label?: string;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Container for the Skeletons of a loading region: `aria-busy=\"true\"` plus a visually hidden\n * `label` (\"Loading\"), while the placeholders stay decorative. It uses no live-region role, so it\n * does not interrupt; announce completion separately if needed. When the content arrives, remove\n * the group or pass `aria-busy={false}`, which also drops the hidden label (no stale \"Loading\" is\n * read before the content). A forwarded `aria-busy={undefined}` keeps the busy default. Flat\n * export for React Server Components (`Skeleton.Group` in client files).\n */\nexport const SkeletonGroup = ({\n  label = 'Loading',\n  // Destructured with a default rather than set before `{...rest}`: a wrapper that forwards\n  // `aria-busy={props['aria-busy']}` passes `undefined`, which must not strip the busy state.\n  'aria-busy': busy = true,\n  children,\n  ref,\n  ...rest\n}: SkeletonGroupProps) => {\n  const loading = busy !== false && busy !== 'false';\n  return (\n    <div {...rest} aria-busy={busy} ref={ref}>\n      {loading && <span className=\"sr-only\">{label}</span>}\n      {children}\n    </div>\n  );\n};\nSkeletonGroup.displayName = 'SkeletonGroup';\n\n/**\n * A decorative loading placeholder. Each Skeleton is `aria-hidden` (a consumer `aria-hidden`\n * overrides it); wrap the placeholders of a loading region in {@link SkeletonGroup}\n * (`Skeleton.Group`), which marks it busy and gives it a visually hidden \"Loading\" label.\n * The pulse animation stops for reduced motion; in forced-colors mode the placeholders are\n * painted `GrayText`. In React Server Components use the flat export `SkeletonGroup` instead of\n * `Skeleton.Group`.\n *\n * @example\n * <Skeleton.Group label=\"Loading profile\">\n *   <Skeleton shape=\"circular\" width={32} height={32} />\n *   <Skeleton width={160} height={12} />\n * </Skeleton.Group>\n */\nexport const Skeleton = /* @__PURE__ */ Object.assign(SkeletonRoot, { Group: SkeletonGroup });\n"],"mappings":"6MASA,IAAMO,EAAgD,CACpD,KAAM,UACN,SAAU,WACV,YAAa,SACf,EAOMC,EAAmB,qEAEnBC,EAAsC,CAC1C,QAAS,UACT,SAAU,eACV,OAAQ,cACV,EAsBMC,GAAgB,CACpB,QACA,SACA,MAAOC,EACP,UACA,YACA,QACA,MACA,GAAGC,KACgB,CACnB,IAAMC,EACJb,EAAAA,sBACE,WACAW,EACAG,IAAY,IAAA,GAAY,IAAA,GAAYP,EAAcO,GAClD,UACA,OACF,GAAK,UAEP,OACE,EAAAR,EAAA,IAAA,CAAC,MAAD,CACE,cAAY,OACZ,GAAIM,EACC,MACL,UAAWX,EAAAA,GACT,4DACAO,EACAC,EAAaI,GACbE,CACF,EACA,MAAO,CAAE,QAAO,SAAQ,GAAGC,CAAM,CAClC,CAAA,CAEL,EACA,EAAa,YAAc,WAoB3B,IAAaC,GAAiB,CAC5B,QAAQ,UAGR,YAAaC,EAAO,GACpB,WACA,MACA,GAAGN,KACqB,CACxB,IAAMO,EAAUD,IAAS,IAASA,IAAS,QAC3C,OACE,EAAAZ,EAAA,KAAA,CAAC,MAAD,CAAK,GAAIM,EAAM,YAAWM,EAAW,MAArC,SAAA,CACGC,IAAW,EAAAb,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,UAAW,SAAAc,CAAY,CAAA,EAClDC,CACE,GAET,EACA,EAAc,YAAc,gBAgB5B,IAAaC,EAA2B,OAAO,OAAOZ,EAAc,CAAE,MAAOO,CAAc,CAAC"}
+{"version":3,"file":"Skeleton.cjs","names":["resolveDeprecatedProp","cn","skeletonClassNames","skeletonGroupClassNames","require_runtime","require_cn","require_dev","require_classNames","react","react_jsx_runtime","variantShapes","forcedColorsFill","shapeClasses","SkeletonRoot","shapeProp","rest","shape","variant","className","style","SkeletonGroup","busy","loading","label","children","Skeleton"],"sources":["../../../src/components/feedback/Skeleton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { skeletonClassNames, skeletonGroupClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { resolveDeprecatedProp } from '../../lib/dev';\nimport type { Shape } from '../../lib/types';\n\n/** The 0.4 `variant` values (deprecated; written out in {@link SkeletonProps}, not a public name). */\ntype SkeletonVariant = NonNullable<SkeletonProps['variant']>;\n\n/** `rectangular` rendered with the default 4px radius in 0.4, so it maps to `rounded`. */\nconst variantShapes: Record<SkeletonVariant, Shape> = {\n  text: 'rounded',\n  circular: 'circular',\n  rectangular: 'rounded',\n};\n\n/**\n * Forced colors replace the author fill with the page color, so the placeholder would vanish: it\n * is painted `GrayText` instead (a leaf element, so opting out of forced colors reaches nothing\n * else).\n */\nconst forcedColorsFill = 'forced-colors:bg-[GrayText] forced-colors:forced-color-adjust-none';\n\nconst shapeClasses: Record<Shape, string> = {\n  rounded: 'rounded',\n  circular: 'rounded-full',\n  square: 'rounded-none',\n};\n\n/** Properties for the Skeleton component. */\nexport interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Width of the skeleton placeholder. */\n  width?: string | number;\n  /** Height of the skeleton placeholder. */\n  height?: string | number;\n  /**\n   * Geometry of the placeholder: `rounded` (4px radius), `circular` (avatars) or `square`.\n   * @default 'rounded'\n   */\n  shape?: Shape;\n  /**\n   * @deprecated Use `shape`: `text` and `rectangular` → `rounded` (their 0.4 look), `circular` →\n   * `circular`. Still works, warns once in development, and `shape` wins when both are given.\n   */\n  variant?: 'text' | 'circular' | 'rectangular';\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n// The component-level JSDoc sits on the exported `Skeleton` below (it reaches index.d.ts).\nconst SkeletonRoot = ({\n  width,\n  height,\n  shape: shapeProp,\n  variant,\n  className,\n  style,\n  ref,\n  ...rest\n}: SkeletonProps) => {\n  const shape =\n    resolveDeprecatedProp(\n      'Skeleton',\n      shapeProp,\n      variant === undefined ? undefined : variantShapes[variant],\n      'variant',\n      'shape',\n    ) ?? 'rounded';\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      {...rest}\n      ref={ref}\n      className={cn(\n        skeletonClassNames.root,\n        'bg-skeleton animate-wave-pulse motion-reduce:animate-none',\n        forcedColorsFill,\n        shapeClasses[shape],\n        className,\n      )}\n      style={{ width, height, ...style }}\n    />\n  );\n};\nSkeletonRoot.displayName = 'Skeleton';\n\n/** Properties for the Skeleton.Group component. */\nexport interface SkeletonGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Visually hidden text announced in place of the decorative placeholders. Localize it.\n   * @default 'Loading'\n   */\n  label?: string;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Container for the Skeletons of a loading region: `aria-busy=\"true\"` plus a visually hidden\n * `label` (\"Loading\"), while the placeholders stay decorative. It uses no live-region role, so it\n * does not interrupt; announce completion separately if needed. When the content arrives, remove\n * the group or pass `aria-busy={false}`, which also drops the hidden label (no stale \"Loading\" is\n * read before the content). A forwarded `aria-busy={undefined}` keeps the busy default. Flat\n * export for React Server Components (`Skeleton.Group` in client files).\n */\nexport const SkeletonGroup = ({\n  label = 'Loading',\n  // Destructured with a default rather than set before `{...rest}`: a wrapper that forwards\n  // `aria-busy={props['aria-busy']}` passes `undefined`, which must not strip the busy state.\n  'aria-busy': busy = true,\n  className,\n  children,\n  ref,\n  ...rest\n}: SkeletonGroupProps) => {\n  const loading = busy !== false && busy !== 'false';\n  return (\n    <div\n      {...rest}\n      aria-busy={busy}\n      ref={ref}\n      className={cn(skeletonGroupClassNames.root, className)}\n    >\n      {loading && <span className=\"sr-only\">{label}</span>}\n      {children}\n    </div>\n  );\n};\nSkeletonGroup.displayName = 'SkeletonGroup';\n\n/**\n * A decorative loading placeholder. Each Skeleton is `aria-hidden` (a consumer `aria-hidden`\n * overrides it); wrap the placeholders of a loading region in {@link SkeletonGroup}\n * (`Skeleton.Group`), which marks it busy and gives it a visually hidden \"Loading\" label.\n * The pulse animation stops for reduced motion; in forced-colors mode the placeholders are\n * painted `GrayText`. In React Server Components use the flat export `SkeletonGroup` instead of\n * `Skeleton.Group`.\n *\n * @example\n * <Skeleton.Group label=\"Loading profile\">\n *   <Skeleton shape=\"circular\" width={32} height={32} />\n *   <Skeleton width={160} height={12} />\n * </Skeleton.Group>\n */\nexport const Skeleton = /* @__PURE__ */ Object.assign(SkeletonRoot, { Group: SkeletonGroup });\n"],"mappings":"mPAUA,IAAMU,EAAgD,CACpD,KAAM,UACN,SAAU,WACV,YAAa,SACf,EAOMC,EAAmB,qEAEnBC,EAAsC,CAC1C,QAAS,UACT,SAAU,eACV,OAAQ,cACV,EAsBMC,GAAgB,CACpB,QACA,SACA,MAAOC,EACP,UACA,YACA,QACA,MACA,GAAGC,KACgB,CACnB,IAAMC,EACJhB,EAAAA,sBACE,WACAc,EACAG,IAAY,IAAA,GAAY,IAAA,GAAYP,EAAcO,GAClD,UACA,OACF,GAAK,UAEP,OACE,EAAAR,EAAA,IAAA,CAAC,MAAD,CACE,cAAY,OACZ,GAAIM,EACC,MACL,UAAWd,EAAAA,GACTC,EAAAA,mBAAmB,KACnB,4DACAS,EACAC,EAAaI,GACbE,CACF,EACA,MAAO,CAAE,QAAO,SAAQ,GAAGC,CAAM,CAClC,CAAA,CAEL,EACA,EAAa,YAAc,WAoB3B,IAAaC,GAAiB,CAC5B,QAAQ,UAGR,YAAaC,EAAO,GACpB,YACA,WACA,MACA,GAAGN,KACqB,CACxB,IAAMO,EAAUD,IAAS,IAASA,IAAS,QAC3C,OACE,EAAAZ,EAAA,KAAA,CAAC,MAAD,CACE,GAAIM,EACJ,YAAWM,EACN,MACL,UAAWpB,EAAAA,GAAGE,EAAAA,wBAAwB,KAAMe,CAAS,EAJvD,SAAA,CAMGI,IAAW,EAAAb,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,UAAW,SAAAc,CAAY,CAAA,EAClDC,CACE,GAET,EACA,EAAc,YAAc,gBAgB5B,IAAaC,EAA2B,OAAO,OAAOZ,EAAc,CAAE,MAAOO,CAAc,CAAC"}

package/dist/components/feedback/Skeleton.mjs

@@ -1,47 +1,49 @@
 "use client";
 import { cn as e } from "../../lib/cn.mjs";
 import { resolveDeprecatedProp as t } from "../../lib/dev.mjs";
+import { skeletonClassNames as n, skeletonGroupClassNames as r } from "../../lib/classNames.mjs";
 import "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/feedback/Skeleton.tsx
-var i = {
+var o = {
 	text: "rounded",
 	circular: "circular",
 	rectangular: "rounded"
-}, a = "forced-colors:bg-[GrayText] forced-colors:forced-color-adjust-none", o = {
+}, s = "forced-colors:bg-[GrayText] forced-colors:forced-color-adjust-none", c = {
 	rounded: "rounded",
 	circular: "rounded-full",
 	square: "rounded-none"
-}, s = ({ width: r, height: s, shape: c, variant: l, className: u, style: d, ref: f, ...p }) => {
-	let m = t("Skeleton", c, l === void 0 ? void 0 : i[l], "variant", "shape") ?? "rounded";
-	return /* @__PURE__ */ n("div", {
+}, l = ({ width: r, height: a, shape: l, variant: u, className: d, style: f, ref: p, ...m }) => {
+	let h = t("Skeleton", l, u === void 0 ? void 0 : o[u], "variant", "shape") ?? "rounded";
+	return /* @__PURE__ */ i("div", {
 		"aria-hidden": "true",
-		...p,
-		ref: f,
-		className: e("bg-skeleton animate-wave-pulse motion-reduce:animate-none", a, o[m], u),
+		...m,
+		ref: p,
+		className: e(n.root, "bg-skeleton animate-wave-pulse motion-reduce:animate-none", s, c[h], d),
 		style: {
 			width: r,
-			height: s,
-			...d
+			height: a,
+			...f
 		}
 	});
 };
-s.displayName = "Skeleton";
-var c = ({ label: e = "Loading", "aria-busy": t = !0, children: i, ref: a, ...o }) => {
-	let s = t !== !1 && t !== "false";
-	return /* @__PURE__ */ r("div", {
-		...o,
-		"aria-busy": t,
-		ref: a,
-		children: [s && /* @__PURE__ */ n("span", {
+l.displayName = "Skeleton";
+var u = ({ label: t = "Loading", "aria-busy": n = !0, className: o, children: s, ref: c, ...l }) => {
+	let u = n !== !1 && n !== "false";
+	return /* @__PURE__ */ a("div", {
+		...l,
+		"aria-busy": n,
+		ref: c,
+		className: e(r.root, o),
+		children: [u && /* @__PURE__ */ i("span", {
 			className: "sr-only",
-			children: e
-		}), i]
+			children: t
+		}), s]
 	});
 };
-c.displayName = "SkeletonGroup";
-var l = /* @__PURE__ */ Object.assign(s, { Group: c });
+u.displayName = "SkeletonGroup";
+var d = /* @__PURE__ */ Object.assign(l, { Group: u });
 //#endregion
-export { l as Skeleton, c as SkeletonGroup };
+export { d as Skeleton, u as SkeletonGroup };
 
 //# sourceMappingURL=Skeleton.mjs.map

package/dist/components/feedback/Skeleton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.mjs","names":["variantShapes","forcedColorsFill","shapeClasses","SkeletonRoot","shapeProp","rest","shape","resolveDeprecatedProp","variant","cn","className","style","SkeletonGroup","busy","loading","label","children","Skeleton"],"sources":["../../../src/components/feedback/Skeleton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { resolveDeprecatedProp } from '../../lib/dev';\nimport type { Shape } from '../../lib/types';\n\n/** The 0.4 `variant` values (deprecated; written out in {@link SkeletonProps}, not a public name). */\ntype SkeletonVariant = NonNullable<SkeletonProps['variant']>;\n\n/** `rectangular` rendered with the default 4px radius in 0.4, so it maps to `rounded`. */\nconst variantShapes: Record<SkeletonVariant, Shape> = {\n  text: 'rounded',\n  circular: 'circular',\n  rectangular: 'rounded',\n};\n\n/**\n * Forced colors replace the author fill with the page color, so the placeholder would vanish: it\n * is painted `GrayText` instead (a leaf element, so opting out of forced colors reaches nothing\n * else).\n */\nconst forcedColorsFill = 'forced-colors:bg-[GrayText] forced-colors:forced-color-adjust-none';\n\nconst shapeClasses: Record<Shape, string> = {\n  rounded: 'rounded',\n  circular: 'rounded-full',\n  square: 'rounded-none',\n};\n\n/** Properties for the Skeleton component. */\nexport interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Width of the skeleton placeholder. */\n  width?: string | number;\n  /** Height of the skeleton placeholder. */\n  height?: string | number;\n  /**\n   * Geometry of the placeholder: `rounded` (4px radius), `circular` (avatars) or `square`.\n   * @default 'rounded'\n   */\n  shape?: Shape;\n  /**\n   * @deprecated Use `shape`: `text` and `rectangular` → `rounded` (their 0.4 look), `circular` →\n   * `circular`. Still works, warns once in development, and `shape` wins when both are given.\n   */\n  variant?: 'text' | 'circular' | 'rectangular';\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n// The component-level JSDoc sits on the exported `Skeleton` below (it reaches index.d.ts).\nconst SkeletonRoot = ({\n  width,\n  height,\n  shape: shapeProp,\n  variant,\n  className,\n  style,\n  ref,\n  ...rest\n}: SkeletonProps) => {\n  const shape =\n    resolveDeprecatedProp(\n      'Skeleton',\n      shapeProp,\n      variant === undefined ? undefined : variantShapes[variant],\n      'variant',\n      'shape',\n    ) ?? 'rounded';\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      {...rest}\n      ref={ref}\n      className={cn(\n        'bg-skeleton animate-wave-pulse motion-reduce:animate-none',\n        forcedColorsFill,\n        shapeClasses[shape],\n        className,\n      )}\n      style={{ width, height, ...style }}\n    />\n  );\n};\nSkeletonRoot.displayName = 'Skeleton';\n\n/** Properties for the Skeleton.Group component. */\nexport interface SkeletonGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Visually hidden text announced in place of the decorative placeholders. Localize it.\n   * @default 'Loading'\n   */\n  label?: string;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Container for the Skeletons of a loading region: `aria-busy=\"true\"` plus a visually hidden\n * `label` (\"Loading\"), while the placeholders stay decorative. It uses no live-region role, so it\n * does not interrupt; announce completion separately if needed. When the content arrives, remove\n * the group or pass `aria-busy={false}`, which also drops the hidden label (no stale \"Loading\" is\n * read before the content). A forwarded `aria-busy={undefined}` keeps the busy default. Flat\n * export for React Server Components (`Skeleton.Group` in client files).\n */\nexport const SkeletonGroup = ({\n  label = 'Loading',\n  // Destructured with a default rather than set before `{...rest}`: a wrapper that forwards\n  // `aria-busy={props['aria-busy']}` passes `undefined`, which must not strip the busy state.\n  'aria-busy': busy = true,\n  children,\n  ref,\n  ...rest\n}: SkeletonGroupProps) => {\n  const loading = busy !== false && busy !== 'false';\n  return (\n    <div {...rest} aria-busy={busy} ref={ref}>\n      {loading && <span className=\"sr-only\">{label}</span>}\n      {children}\n    </div>\n  );\n};\nSkeletonGroup.displayName = 'SkeletonGroup';\n\n/**\n * A decorative loading placeholder. Each Skeleton is `aria-hidden` (a consumer `aria-hidden`\n * overrides it); wrap the placeholders of a loading region in {@link SkeletonGroup}\n * (`Skeleton.Group`), which marks it busy and gives it a visually hidden \"Loading\" label.\n * The pulse animation stops for reduced motion; in forced-colors mode the placeholders are\n * painted `GrayText`. In React Server Components use the flat export `SkeletonGroup` instead of\n * `Skeleton.Group`.\n *\n * @example\n * <Skeleton.Group label=\"Loading profile\">\n *   <Skeleton shape=\"circular\" width={32} height={32} />\n *   <Skeleton width={160} height={12} />\n * </Skeleton.Group>\n */\nexport const Skeleton = /* @__PURE__ */ Object.assign(SkeletonRoot, { Group: SkeletonGroup });\n"],"mappings":";;;;;;AASA,IAAMA,IAAgD;CACpD,MAAM;CACN,UAAU;CACV,aAAa;AACf,GAOMC,IAAmB,sEAEnBC,IAAsC;CAC1C,SAAS;CACT,UAAU;CACV,QAAQ;AACV,GAsBMC,KAAgB,EACpB,UACA,WACA,OAAOC,GACP,YACA,cACA,UACA,QACA,GAAGC,QACgB;CACnB,IAAMC,IACJC,EACE,YACAH,GACAI,MAAY,KAAA,IAAY,KAAA,IAAYR,EAAcQ,IAClD,WACA,OACF,KAAK;CAEP,OACE,kBAAC,OAAD;EACE,eAAY;EACZ,GAAIH;EACC;EACL,WAAWI,EACT,6DACAR,GACAC,EAAaI,IACbI,CACF;EACA,OAAO;GAAE;GAAO;GAAQ,GAAGC;EAAM;CAClC,CAAA;AAEL;AACA,EAAa,cAAc;AAoB3B,IAAaC,KAAiB,EAC5B,WAAQ,WAGR,aAAaC,IAAO,IACpB,aACA,QACA,GAAGR,QACqB;CACxB,IAAMS,IAAUD,MAAS,MAASA,MAAS;CAC3C,OACE,kBAAC,OAAD;EAAK,GAAIR;EAAM,aAAWQ;EAAW;EAArC,UAAA,CACGC,KAAW,kBAAC,QAAD;GAAM,WAAU;GAAW,UAAAC;EAAY,CAAA,GAClDC,CACE;;AAET;AACA,EAAc,cAAc;AAgB5B,IAAaC,IAA2B,uBAAO,OAAOd,GAAc,EAAE,OAAOS,EAAc,CAAC"}
+{"version":3,"file":"Skeleton.mjs","names":["variantShapes","forcedColorsFill","shapeClasses","SkeletonRoot","shapeProp","rest","shape","resolveDeprecatedProp","variant","cn","skeletonClassNames","className","style","SkeletonGroup","busy","loading","skeletonGroupClassNames","label","children","Skeleton"],"sources":["../../../src/components/feedback/Skeleton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { skeletonClassNames, skeletonGroupClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { resolveDeprecatedProp } from '../../lib/dev';\nimport type { Shape } from '../../lib/types';\n\n/** The 0.4 `variant` values (deprecated; written out in {@link SkeletonProps}, not a public name). */\ntype SkeletonVariant = NonNullable<SkeletonProps['variant']>;\n\n/** `rectangular` rendered with the default 4px radius in 0.4, so it maps to `rounded`. */\nconst variantShapes: Record<SkeletonVariant, Shape> = {\n  text: 'rounded',\n  circular: 'circular',\n  rectangular: 'rounded',\n};\n\n/**\n * Forced colors replace the author fill with the page color, so the placeholder would vanish: it\n * is painted `GrayText` instead (a leaf element, so opting out of forced colors reaches nothing\n * else).\n */\nconst forcedColorsFill = 'forced-colors:bg-[GrayText] forced-colors:forced-color-adjust-none';\n\nconst shapeClasses: Record<Shape, string> = {\n  rounded: 'rounded',\n  circular: 'rounded-full',\n  square: 'rounded-none',\n};\n\n/** Properties for the Skeleton component. */\nexport interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Width of the skeleton placeholder. */\n  width?: string | number;\n  /** Height of the skeleton placeholder. */\n  height?: string | number;\n  /**\n   * Geometry of the placeholder: `rounded` (4px radius), `circular` (avatars) or `square`.\n   * @default 'rounded'\n   */\n  shape?: Shape;\n  /**\n   * @deprecated Use `shape`: `text` and `rectangular` → `rounded` (their 0.4 look), `circular` →\n   * `circular`. Still works, warns once in development, and `shape` wins when both are given.\n   */\n  variant?: 'text' | 'circular' | 'rectangular';\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n// The component-level JSDoc sits on the exported `Skeleton` below (it reaches index.d.ts).\nconst SkeletonRoot = ({\n  width,\n  height,\n  shape: shapeProp,\n  variant,\n  className,\n  style,\n  ref,\n  ...rest\n}: SkeletonProps) => {\n  const shape =\n    resolveDeprecatedProp(\n      'Skeleton',\n      shapeProp,\n      variant === undefined ? undefined : variantShapes[variant],\n      'variant',\n      'shape',\n    ) ?? 'rounded';\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      {...rest}\n      ref={ref}\n      className={cn(\n        skeletonClassNames.root,\n        'bg-skeleton animate-wave-pulse motion-reduce:animate-none',\n        forcedColorsFill,\n        shapeClasses[shape],\n        className,\n      )}\n      style={{ width, height, ...style }}\n    />\n  );\n};\nSkeletonRoot.displayName = 'Skeleton';\n\n/** Properties for the Skeleton.Group component. */\nexport interface SkeletonGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Visually hidden text announced in place of the decorative placeholders. Localize it.\n   * @default 'Loading'\n   */\n  label?: string;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Container for the Skeletons of a loading region: `aria-busy=\"true\"` plus a visually hidden\n * `label` (\"Loading\"), while the placeholders stay decorative. It uses no live-region role, so it\n * does not interrupt; announce completion separately if needed. When the content arrives, remove\n * the group or pass `aria-busy={false}`, which also drops the hidden label (no stale \"Loading\" is\n * read before the content). A forwarded `aria-busy={undefined}` keeps the busy default. Flat\n * export for React Server Components (`Skeleton.Group` in client files).\n */\nexport const SkeletonGroup = ({\n  label = 'Loading',\n  // Destructured with a default rather than set before `{...rest}`: a wrapper that forwards\n  // `aria-busy={props['aria-busy']}` passes `undefined`, which must not strip the busy state.\n  'aria-busy': busy = true,\n  className,\n  children,\n  ref,\n  ...rest\n}: SkeletonGroupProps) => {\n  const loading = busy !== false && busy !== 'false';\n  return (\n    <div\n      {...rest}\n      aria-busy={busy}\n      ref={ref}\n      className={cn(skeletonGroupClassNames.root, className)}\n    >\n      {loading && <span className=\"sr-only\">{label}</span>}\n      {children}\n    </div>\n  );\n};\nSkeletonGroup.displayName = 'SkeletonGroup';\n\n/**\n * A decorative loading placeholder. Each Skeleton is `aria-hidden` (a consumer `aria-hidden`\n * overrides it); wrap the placeholders of a loading region in {@link SkeletonGroup}\n * (`Skeleton.Group`), which marks it busy and gives it a visually hidden \"Loading\" label.\n * The pulse animation stops for reduced motion; in forced-colors mode the placeholders are\n * painted `GrayText`. In React Server Components use the flat export `SkeletonGroup` instead of\n * `Skeleton.Group`.\n *\n * @example\n * <Skeleton.Group label=\"Loading profile\">\n *   <Skeleton shape=\"circular\" width={32} height={32} />\n *   <Skeleton width={160} height={12} />\n * </Skeleton.Group>\n */\nexport const Skeleton = /* @__PURE__ */ Object.assign(SkeletonRoot, { Group: SkeletonGroup });\n"],"mappings":";;;;;;;AAUA,IAAMA,IAAgD;CACpD,MAAM;CACN,UAAU;CACV,aAAa;AACf,GAOMC,IAAmB,sEAEnBC,IAAsC;CAC1C,SAAS;CACT,UAAU;CACV,QAAQ;AACV,GAsBMC,KAAgB,EACpB,UACA,WACA,OAAOC,GACP,YACA,cACA,UACA,QACA,GAAGC,QACgB;CACnB,IAAMC,IACJC,EACE,YACAH,GACAI,MAAY,KAAA,IAAY,KAAA,IAAYR,EAAcQ,IAClD,WACA,OACF,KAAK;CAEP,OACE,kBAAC,OAAD;EACE,eAAY;EACZ,GAAIH;EACC;EACL,WAAWI,EACTC,EAAmB,MACnB,6DACAT,GACAC,EAAaI,IACbK,CACF;EACA,OAAO;GAAE;GAAO;GAAQ,GAAGC;EAAM;CAClC,CAAA;AAEL;AACA,EAAa,cAAc;AAoB3B,IAAaC,KAAiB,EAC5B,WAAQ,WAGR,aAAaC,IAAO,IACpB,cACA,aACA,QACA,GAAGT,QACqB;CACxB,IAAMU,IAAUD,MAAS,MAASA,MAAS;CAC3C,OACE,kBAAC,OAAD;EACE,GAAIT;EACJ,aAAWS;EACN;EACL,WAAWL,EAAGO,EAAwB,MAAML,CAAS;EAJvD,UAAA,CAMGI,KAAW,kBAAC,QAAD;GAAM,WAAU;GAAW,UAAAE;EAAY,CAAA,GAClDC,CACE;;AAET;AACA,EAAc,cAAc;AAgB5B,IAAaC,IAA2B,uBAAO,OAAOhB,GAAc,EAAE,OAAOU,EAAc,CAAC"}

package/dist/components/feedback/Spinner.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/styles.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");function a(e){return typeof e==`string`&&e.trim()!==``}var o={"extra-small":`w-3 h-3`,small:`w-4 h-4`,medium:`w-6 h-6`,large:`w-9 h-9`,"extra-large":`w-12 h-12`},s={primary:{ring:`border-track border-t-primary`,label:`text-muted-foreground`},inverted:{ring:`border-current/30 border-t-current`,label:`text-current`}},c=({size:e=`medium`,label:c=`Loading`,labelVisible:l,appearance:u=`primary`,delay:d=0,className:f,role:p=`status`,ref:m,...h})=>{let g=Number.isFinite(d)&&d>0?d:0,[_,v]=r.useState(g===0),[y,b]=r.useState(!1);r.useEffect(()=>{if(_)return;let e=setTimeout(()=>v(!0),g);return()=>clearTimeout(e)},[_,g]),r.useEffect(()=>{if(!_)return;let e=requestAnimationFrame(()=>b(!0));return()=>cancelAnimationFrame(e)},[_]);let x=p===`progressbar`&&!a(h[`aria-label`])&&!a(h[`aria-labelledby`]),S=Object.hasOwn(s,u??``)?u:`primary`,C=s[S];return(0,i.jsxs)(`span`,{"data-appearance":S,"data-state":_?`shown`:`delayed`,...h,role:p,"aria-label":x?c:h[`aria-label`],ref:m,className:t.cn(`inline-flex items-center gap-2`,f),children:[_?(0,i.jsx)(`span`,{"aria-hidden":`true`,"data-wave-spinner-ring":``,className:t.cn(`rounded-full border-2 animate-wave-spin motion-reduce:animate-wave-spin-slow`,C.ring,n.forcedColors.ringArc,o[e])}):null,(0,i.jsx)(`span`,{"data-wave-spinner-label":``,className:l?t.cn(`text-body-1`,C.label):`sr-only`,children:y?c:null})]})};c.displayName=`Spinner`,exports.Spinner=c;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/classNames.cjs"),r=require("../../lib/styles.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");function o(e){return typeof e==`string`&&e.trim()!==``}var s={"extra-small":`w-3 h-3`,small:`w-4 h-4`,medium:`w-6 h-6`,large:`w-9 h-9`,"extra-large":`w-12 h-12`},c={primary:{ring:`border-track border-t-primary`,label:`text-muted-foreground`},inverted:{ring:`border-current/30 border-t-current`,label:`text-current`}},l=({size:e=`medium`,label:l=`Loading`,labelVisible:u,appearance:d=`primary`,delay:f=0,className:p,role:m=`status`,ref:h,...g})=>{let _=Number.isFinite(f)&&f>0?f:0,[v,y]=i.useState(_===0),[b,x]=i.useState(!1);i.useEffect(()=>{if(v)return;let e=setTimeout(()=>y(!0),_);return()=>clearTimeout(e)},[v,_]),i.useEffect(()=>{if(!v)return;let e=requestAnimationFrame(()=>x(!0));return()=>cancelAnimationFrame(e)},[v]);let S=m===`progressbar`&&!o(g[`aria-label`])&&!o(g[`aria-labelledby`]),C=Object.hasOwn(c,d??``)?d:`primary`,w=c[C];return(0,a.jsxs)(`span`,{"data-appearance":C,"data-state":v?`shown`:`delayed`,...g,role:m,"aria-label":S?l:g[`aria-label`],ref:h,className:t.cn(n.spinnerClassNames.root,`inline-flex items-center gap-2`,p),children:[v?(0,a.jsx)(`span`,{"aria-hidden":`true`,"data-wave-spinner-ring":``,className:t.cn(n.spinnerClassNames.spinner,`rounded-full border-2 animate-wave-spin motion-reduce:animate-wave-spin-slow`,w.ring,r.forcedColors.ringArc,s[e])}):null,(0,a.jsx)(`span`,{"data-wave-spinner-label":``,className:t.cn(n.spinnerClassNames.label,u?t.cn(`text-body-1`,w.label):`sr-only`),children:b?l:null})]})};l.displayName=`Spinner`,exports.Spinner=l;
 //# sourceMappingURL=Spinner.cjs.map

package/dist/components/feedback/Spinner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.cjs","names":["React","cn","forcedColors","require_runtime","require_cn","require_styles","react","react_jsx_runtime","isName","value","sizeClasses","appearanceClasses","Spinner","rest","wait","delay","shown","setShown","announced","setAnnounced","handle","frame","nameFromLabel","role","resolvedAppearance","appearance","colors","label","className","size","labelVisible"],"sources":["../../../src/components/feedback/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { forcedColors } from '../../lib/styles';\nimport type { Size } from '../../lib/types';\n\n/** Color treatment of a {@link Spinner}. */\nexport type SpinnerAppearance = 'primary' | 'inverted';\n\n/** Properties for the Spinner component. */\nexport interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Size of the spinner.\n   * @default 'medium'\n   */\n  size?: Size;\n  /**\n   * Text announced by the spinner's status region (and shown with `labelVisible`). Localize it.\n   * @default 'Loading'\n   */\n  label?: string;\n  /** Whether the label text is visually displayed alongside the spinner. */\n  labelVisible?: boolean;\n  /**\n   * `primary`: a primary arc on the track color. `inverted`: drawn in the current text color (a\n   * 30% track), for brand or inverted surfaces such as a primary Button.\n   * @default 'primary'\n   */\n  appearance?: SpinnerAppearance;\n  /**\n   * Milliseconds to wait before the ring and the label appear, so a fast load does not flash the\n   * spinner. The status region is mounted (empty) at once and announces the label once shown.\n   * A non-finite or negative value means 0.\n   * @default 0\n   */\n  delay?: number;\n  /**\n   * Role of the root; a forwarded `undefined` keeps the default live region. Use `none` inside a\n   * region that already announces the busy state, or `progressbar`, which `label` names\n   * (`aria-label`) unless you pass `aria-label` or `aria-labelledby` (a progress bar is not named by\n   * its content).\n   * @default 'status'\n   */\n  role?: React.AriaRole;\n  ref?: React.Ref<HTMLSpanElement>;\n}\n\n/** Whether a name prop (`aria-label`, `aria-labelledby`) holds more than whitespace. */\nfunction isName(value: unknown): value is string {\n  return typeof value === 'string' && value.trim() !== '';\n}\n\nconst sizeClasses: Record<Size, string> = {\n  'extra-small': 'w-3 h-3',\n  small: 'w-4 h-4',\n  medium: 'w-6 h-6',\n  large: 'w-9 h-9',\n  'extra-large': 'w-12 h-12',\n};\n\n/** Ring (track, then arc) and visible-label colors of each appearance. */\nconst appearanceClasses: Record<SpinnerAppearance, { ring: string; label: string }> = {\n  primary: { ring: 'border-track border-t-primary', label: 'text-muted-foreground' },\n  // The current text color matches any surface the spinner sits on (on-brand text in a primary\n  // Button, the inverted foreground), so no token is needed.\n  inverted: { ring: 'border-current/30 border-t-current', label: 'text-current' },\n};\n\n/**\n * An indeterminate loading indicator.\n *\n * - The root is a `role=\"status\"` live region (override `role`, e.g. `role=\"none\"` inside a region\n *   that already announces the busy state, or `role=\"progressbar\"`, which `label` names unless you\n *   pass `aria-label` or `aria-labelledby`).\n * - The region mounts **empty** and receives its `label` (default \"Loading\") one animation frame\n *   after the spinner is shown, so screen readers announce it (a live region that mounts with its\n *   content is often not announced). With `labelVisible` the label also shows next to the ring\n *   from that frame on.\n * - `delay` holds back the ring and the label for that many milliseconds (the region mounts at\n *   once), so a fast load does not flash the spinner. The root's `data-state` is `delayed`, then\n *   `shown`.\n * - `appearance=\"inverted\"` draws the spinner in the current text color, for a primary Button or\n *   another brand or inverted surface. The root carries `data-appearance`.\n * - The ring is decorative (`aria-hidden`) and spins slower for reduced motion. In forced-colors\n *   mode its arc is drawn in `Highlight` on a `Canvas` track, so the rotation stays perceivable.\n *\n * @example\n * <Spinner label=\"Loading results\" delay={300} />\n *\n * @example\n * // In a primary Button's (decorative) icon slot; the Button's text names the busy state.\n * <Button appearance=\"primary\" icon={<Spinner appearance=\"inverted\" size=\"extra-small\" />}>\n *   Saving\n * </Button>\n */\nexport const Spinner = ({\n  size = 'medium',\n  label = 'Loading',\n  labelVisible,\n  appearance = 'primary',\n  delay = 0,\n  className,\n  // Destructured with a default rather than set before `{...rest}`: a wrapper that forwards\n  // `role={props.role}` passes `undefined`, which must not strip the live region.\n  role = 'status',\n  ref,\n  ...rest\n}: SpinnerProps) => {\n  const wait = Number.isFinite(delay) && delay > 0 ? delay : 0;\n  const [shown, setShown] = React.useState(wait === 0);\n  const [announced, setAnnounced] = React.useState(false);\n\n  // C-HOOKS deferred updates: each state is set in its callback, never in the effect body. Once\n  // shown, the spinner stays shown; a delay that changes while it waits starts the wait again.\n  React.useEffect(() => {\n    if (shown) return;\n    const handle = setTimeout(() => setShown(true), wait);\n    return () => clearTimeout(handle);\n  }, [shown, wait]);\n\n  React.useEffect(() => {\n    if (!shown) return;\n    const frame = requestAnimationFrame(() => setAnnounced(true));\n    return () => cancelAnimationFrame(frame);\n  }, [shown]);\n\n  // A progressbar takes its name from the author, never from its content (the label text): name it\n  // with `label` unless the consumer does. Also applies to a forwarded `aria-label={undefined}`.\n  const nameFromLabel =\n    role === 'progressbar' && !isName(rest['aria-label']) && !isName(rest['aria-labelledby']);\n  // An appearance outside the union (from untyped code) renders as primary instead of throwing.\n  const resolvedAppearance: SpinnerAppearance = Object.hasOwn(appearanceClasses, appearance ?? '')\n    ? appearance\n    : 'primary';\n  const colors = appearanceClasses[resolvedAppearance];\n\n  return (\n    <span\n      data-appearance={resolvedAppearance}\n      data-state={shown ? 'shown' : 'delayed'}\n      {...rest}\n      role={role}\n      aria-label={nameFromLabel ? label : rest['aria-label']}\n      ref={ref}\n      className={cn('inline-flex items-center gap-2', className)}\n    >\n      {shown ? (\n        <span\n          aria-hidden=\"true\"\n          data-wave-spinner-ring=\"\"\n          className={cn(\n            'rounded-full border-2 animate-wave-spin motion-reduce:animate-wave-spin-slow',\n            colors.ring,\n            forcedColors.ringArc,\n            sizeClasses[size],\n          )}\n        />\n      ) : null}\n      <span\n        data-wave-spinner-label=\"\"\n        className={labelVisible ? cn('text-body-1', colors.label) : 'sr-only'}\n      >\n        {announced ? label : null}\n      </span>\n    </span>\n  );\n};\n\nSpinner.displayName = 'Spinner';\n"],"mappings":"gNA8CA,SAASQ,EAAO,EAAiC,CAC/C,OAAO,OAAOC,GAAU,UAAYA,EAAM,KAAK,IAAM,EACvD,CAEA,IAAMC,EAAoC,CACxC,cAAe,UACf,MAAO,UACP,OAAQ,UACR,MAAO,UACP,cAAe,WACjB,EAGMC,EAAgF,CACpF,QAAS,CAAE,KAAM,gCAAiC,MAAO,uBAAwB,EAGjF,SAAU,CAAE,KAAM,qCAAsC,MAAO,cAAe,CAChF,EA6BaC,GAAW,CACtB,OAAO,SACP,QAAQ,UACR,eACA,aAAa,UACb,QAAQ,EACR,YAGA,OAAO,SACP,MACA,GAAGC,KACe,CAClB,IAAMC,EAAO,OAAO,SAASC,CAAK,GAAKA,EAAQ,EAAIA,EAAQ,EACrD,CAACC,EAAOC,GAAYjB,EAAM,SAASc,IAAS,CAAC,EAC7C,CAACI,EAAWC,GAAgBnB,EAAM,SAAS,EAAK,EAItDM,EAAM,cAAgB,CACpB,GAAIU,EAAO,OACX,IAAMI,EAAS,eAAiBH,EAAS,EAAI,EAAGH,CAAI,EACpD,UAAa,aAAaM,CAAM,CAClC,EAAG,CAACJ,EAAOF,CAAI,CAAC,EAEhBR,EAAM,cAAgB,CACpB,GAAI,CAACU,EAAO,OACZ,IAAMK,EAAQ,0BAA4BF,EAAa,EAAI,CAAC,EAC5D,UAAa,qBAAqBE,CAAK,CACzC,EAAG,CAACL,CAAK,CAAC,EAIV,IAAMM,EACJC,IAAS,eAAiB,CAACf,EAAOK,EAAK,aAAa,GAAK,CAACL,EAAOK,EAAK,kBAAkB,EAEpFW,EAAwC,OAAO,OAAOb,EAAmBc,GAAc,EAAE,EAC3FA,EACA,UACEC,EAASf,EAAkBa,GAEjC,OACE,EAAAjB,EAAA,KAAA,CAAC,OAAD,CACE,kBAAiBiB,EACjB,aAAYR,EAAQ,QAAU,UAC9B,GAAIH,EACE,OACN,aAAYS,EAAgBK,EAAQd,EAAK,cACpC,MACL,UAAWZ,EAAAA,GAAG,iCAAkC2B,CAAS,EAP3D,SAAA,CASGZ,GACC,EAAAT,EAAA,IAAA,CAAC,OAAD,CACE,cAAY,OACZ,yBAAuB,GACvB,UAAWN,EAAAA,GACT,+EACAyB,EAAO,KACPxB,EAAAA,aAAa,QACbQ,EAAYmB,EACd,CACD,CAAA,EACC,MACJ,EAAAtB,EAAA,IAAA,CAAC,OAAD,CACE,0BAAwB,GACxB,UAAWuB,EAAe7B,EAAAA,GAAG,cAAeyB,EAAO,KAAK,EAAI,UAE3D,SAAAR,EAAYS,EAAQ,IACjB,CAAA,CACF,GAEV,EAEA,EAAQ,YAAc"}
+{"version":3,"file":"Spinner.cjs","names":["React","cn","spinnerClassNames","forcedColors","require_runtime","require_cn","require_classNames","require_styles","react","react_jsx_runtime","isName","value","sizeClasses","appearanceClasses","Spinner","rest","wait","delay","shown","setShown","announced","setAnnounced","handle","frame","nameFromLabel","role","resolvedAppearance","appearance","colors","label","className","size","labelVisible"],"sources":["../../../src/components/feedback/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { spinnerClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { forcedColors } from '../../lib/styles';\nimport type { Size } from '../../lib/types';\n\n/** Color treatment of a {@link Spinner}. */\nexport type SpinnerAppearance = 'primary' | 'inverted';\n\n/** Properties for the Spinner component. */\nexport interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Size of the spinner.\n   * @default 'medium'\n   */\n  size?: Size;\n  /**\n   * Text announced by the spinner's status region (and shown with `labelVisible`). Localize it.\n   * @default 'Loading'\n   */\n  label?: string;\n  /** Whether the label text is visually displayed alongside the spinner. */\n  labelVisible?: boolean;\n  /**\n   * `primary`: a primary arc on the track color. `inverted`: drawn in the current text color (a\n   * 30% track), for brand or inverted surfaces such as a primary Button.\n   * @default 'primary'\n   */\n  appearance?: SpinnerAppearance;\n  /**\n   * Milliseconds to wait before the ring and the label appear, so a fast load does not flash the\n   * spinner. The status region is mounted (empty) at once and announces the label once shown.\n   * A non-finite or negative value means 0.\n   * @default 0\n   */\n  delay?: number;\n  /**\n   * Role of the root; a forwarded `undefined` keeps the default live region. Use `none` inside a\n   * region that already announces the busy state, or `progressbar`, which `label` names\n   * (`aria-label`) unless you pass `aria-label` or `aria-labelledby` (a progress bar is not named by\n   * its content).\n   * @default 'status'\n   */\n  role?: React.AriaRole;\n  ref?: React.Ref<HTMLSpanElement>;\n}\n\n/** Whether a name prop (`aria-label`, `aria-labelledby`) holds more than whitespace. */\nfunction isName(value: unknown): value is string {\n  return typeof value === 'string' && value.trim() !== '';\n}\n\nconst sizeClasses: Record<Size, string> = {\n  'extra-small': 'w-3 h-3',\n  small: 'w-4 h-4',\n  medium: 'w-6 h-6',\n  large: 'w-9 h-9',\n  'extra-large': 'w-12 h-12',\n};\n\n/** Ring (track, then arc) and visible-label colors of each appearance. */\nconst appearanceClasses: Record<SpinnerAppearance, { ring: string; label: string }> = {\n  primary: { ring: 'border-track border-t-primary', label: 'text-muted-foreground' },\n  // The current text color matches any surface the spinner sits on (on-brand text in a primary\n  // Button, the inverted foreground), so no token is needed.\n  inverted: { ring: 'border-current/30 border-t-current', label: 'text-current' },\n};\n\n/**\n * An indeterminate loading indicator.\n *\n * - The root is a `role=\"status\"` live region (override `role`, e.g. `role=\"none\"` inside a region\n *   that already announces the busy state, or `role=\"progressbar\"`, which `label` names unless you\n *   pass `aria-label` or `aria-labelledby`).\n * - The region mounts **empty** and receives its `label` (default \"Loading\") one animation frame\n *   after the spinner is shown, so screen readers announce it (a live region that mounts with its\n *   content is often not announced). With `labelVisible` the label also shows next to the ring\n *   from that frame on.\n * - `delay` holds back the ring and the label for that many milliseconds (the region mounts at\n *   once), so a fast load does not flash the spinner. The root's `data-state` is `delayed`, then\n *   `shown`.\n * - `appearance=\"inverted\"` draws the spinner in the current text color, for a primary Button or\n *   another brand or inverted surface. The root carries `data-appearance`.\n * - The ring is decorative (`aria-hidden`) and spins slower for reduced motion. In forced-colors\n *   mode its arc is drawn in `Highlight` on a `Canvas` track, so the rotation stays perceivable.\n *\n * @example\n * <Spinner label=\"Loading results\" delay={300} />\n *\n * @example\n * // In a primary Button's (decorative) icon slot; the Button's text names the busy state.\n * <Button appearance=\"primary\" icon={<Spinner appearance=\"inverted\" size=\"extra-small\" />}>\n *   Saving\n * </Button>\n */\nexport const Spinner = ({\n  size = 'medium',\n  label = 'Loading',\n  labelVisible,\n  appearance = 'primary',\n  delay = 0,\n  className,\n  // Destructured with a default rather than set before `{...rest}`: a wrapper that forwards\n  // `role={props.role}` passes `undefined`, which must not strip the live region.\n  role = 'status',\n  ref,\n  ...rest\n}: SpinnerProps) => {\n  const wait = Number.isFinite(delay) && delay > 0 ? delay : 0;\n  const [shown, setShown] = React.useState(wait === 0);\n  const [announced, setAnnounced] = React.useState(false);\n\n  // C-HOOKS deferred updates: each state is set in its callback, never in the effect body. Once\n  // shown, the spinner stays shown; a delay that changes while it waits starts the wait again.\n  React.useEffect(() => {\n    if (shown) return;\n    const handle = setTimeout(() => setShown(true), wait);\n    return () => clearTimeout(handle);\n  }, [shown, wait]);\n\n  React.useEffect(() => {\n    if (!shown) return;\n    const frame = requestAnimationFrame(() => setAnnounced(true));\n    return () => cancelAnimationFrame(frame);\n  }, [shown]);\n\n  // A progressbar takes its name from the author, never from its content (the label text): name it\n  // with `label` unless the consumer does. Also applies to a forwarded `aria-label={undefined}`.\n  const nameFromLabel =\n    role === 'progressbar' && !isName(rest['aria-label']) && !isName(rest['aria-labelledby']);\n  // An appearance outside the union (from untyped code) renders as primary instead of throwing.\n  const resolvedAppearance: SpinnerAppearance = Object.hasOwn(appearanceClasses, appearance ?? '')\n    ? appearance\n    : 'primary';\n  const colors = appearanceClasses[resolvedAppearance];\n\n  return (\n    <span\n      data-appearance={resolvedAppearance}\n      data-state={shown ? 'shown' : 'delayed'}\n      {...rest}\n      role={role}\n      aria-label={nameFromLabel ? label : rest['aria-label']}\n      ref={ref}\n      className={cn(spinnerClassNames.root, 'inline-flex items-center gap-2', className)}\n    >\n      {shown ? (\n        <span\n          aria-hidden=\"true\"\n          data-wave-spinner-ring=\"\"\n          className={cn(\n            spinnerClassNames.spinner,\n            'rounded-full border-2 animate-wave-spin motion-reduce:animate-wave-spin-slow',\n            colors.ring,\n            forcedColors.ringArc,\n            sizeClasses[size],\n          )}\n        />\n      ) : null}\n      <span\n        data-wave-spinner-label=\"\"\n        className={cn(\n          spinnerClassNames.label,\n          labelVisible ? cn('text-body-1', colors.label) : 'sr-only',\n        )}\n      >\n        {announced ? label : null}\n      </span>\n    </span>\n  );\n};\n\nSpinner.displayName = 'Spinner';\n"],"mappings":"sPA+CA,SAASU,EAAO,EAAiC,CAC/C,OAAO,OAAOC,GAAU,UAAYA,EAAM,KAAK,IAAM,EACvD,CAEA,IAAMC,EAAoC,CACxC,cAAe,UACf,MAAO,UACP,OAAQ,UACR,MAAO,UACP,cAAe,WACjB,EAGMC,EAAgF,CACpF,QAAS,CAAE,KAAM,gCAAiC,MAAO,uBAAwB,EAGjF,SAAU,CAAE,KAAM,qCAAsC,MAAO,cAAe,CAChF,EA6BaC,GAAW,CACtB,OAAO,SACP,QAAQ,UACR,eACA,aAAa,UACb,QAAQ,EACR,YAGA,OAAO,SACP,MACA,GAAGC,KACe,CAClB,IAAMC,EAAO,OAAO,SAASC,CAAK,GAAKA,EAAQ,EAAIA,EAAQ,EACrD,CAACC,EAAOC,GAAYnB,EAAM,SAASgB,IAAS,CAAC,EAC7C,CAACI,EAAWC,GAAgBrB,EAAM,SAAS,EAAK,EAItDQ,EAAM,cAAgB,CACpB,GAAIU,EAAO,OACX,IAAMI,EAAS,eAAiBH,EAAS,EAAI,EAAGH,CAAI,EACpD,UAAa,aAAaM,CAAM,CAClC,EAAG,CAACJ,EAAOF,CAAI,CAAC,EAEhBR,EAAM,cAAgB,CACpB,GAAI,CAACU,EAAO,OACZ,IAAMK,EAAQ,0BAA4BF,EAAa,EAAI,CAAC,EAC5D,UAAa,qBAAqBE,CAAK,CACzC,EAAG,CAACL,CAAK,CAAC,EAIV,IAAMM,EACJC,IAAS,eAAiB,CAACf,EAAOK,EAAK,aAAa,GAAK,CAACL,EAAOK,EAAK,kBAAkB,EAEpFW,EAAwC,OAAO,OAAOb,EAAmBc,GAAc,EAAE,EAC3FA,EACA,UACEC,EAASf,EAAkBa,GAEjC,OACE,EAAAjB,EAAA,KAAA,CAAC,OAAD,CACE,kBAAiBiB,EACjB,aAAYR,EAAQ,QAAU,UAC9B,GAAIH,EACE,OACN,aAAYS,EAAgBK,EAAQd,EAAK,cACpC,MACL,UAAWd,EAAAA,GAAGC,EAAAA,kBAAkB,KAAM,iCAAkC4B,CAAS,EAPnF,SAAA,CASGZ,GACC,EAAAT,EAAA,IAAA,CAAC,OAAD,CACE,cAAY,OACZ,yBAAuB,GACvB,UAAWR,EAAAA,GACTC,EAAAA,kBAAkB,QAClB,+EACA0B,EAAO,KACPzB,EAAAA,aAAa,QACbS,EAAYmB,EACd,CACD,CAAA,EACC,MACJ,EAAAtB,EAAA,IAAA,CAAC,OAAD,CACE,0BAAwB,GACxB,UAAWR,EAAAA,GACTC,EAAAA,kBAAkB,MAClB8B,EAAe/B,EAAAA,GAAG,cAAe2B,EAAO,KAAK,EAAI,SACnD,EAEC,SAAAR,EAAYS,EAAQ,IACjB,CAAA,CACF,GAEV,EAEA,EAAQ,YAAc"}

package/dist/components/feedback/Spinner.mjs

@@ -1,19 +1,20 @@
 "use client";
 import { cn as e } from "../../lib/cn.mjs";
-import { forcedColors as t } from "../../lib/styles.mjs";
-import * as n from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { spinnerClassNames as t } from "../../lib/classNames.mjs";
+import { forcedColors as n } from "../../lib/styles.mjs";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/feedback/Spinner.tsx
-function a(e) {
+function o(e) {
 	return typeof e == "string" && e.trim() !== "";
 }
-var o = {
+var s = {
 	"extra-small": "w-3 h-3",
 	small: "w-4 h-4",
 	medium: "w-6 h-6",
 	large: "w-9 h-9",
 	"extra-large": "w-12 h-12"
-}, s = {
+}, c = {
 	primary: {
 		ring: "border-track border-t-primary",
 		label: "text-muted-foreground"
@@ -22,39 +23,39 @@ var o = {
 		ring: "border-current/30 border-t-current",
 		label: "text-current"
 	}
-}, c = ({ size: c = "medium", label: l = "Loading", labelVisible: u, appearance: d = "primary", delay: f = 0, className: p, role: m = "status", ref: h, ...g }) => {
-	let _ = Number.isFinite(f) && f > 0 ? f : 0, [v, y] = n.useState(_ === 0), [b, x] = n.useState(!1);
-	n.useEffect(() => {
-		if (v) return;
-		let e = setTimeout(() => y(!0), _);
+}, l = ({ size: l = "medium", label: u = "Loading", labelVisible: d, appearance: f = "primary", delay: p = 0, className: m, role: h = "status", ref: g, ..._ }) => {
+	let v = Number.isFinite(p) && p > 0 ? p : 0, [y, b] = r.useState(v === 0), [x, S] = r.useState(!1);
+	r.useEffect(() => {
+		if (y) return;
+		let e = setTimeout(() => b(!0), v);
 		return () => clearTimeout(e);
-	}, [v, _]), n.useEffect(() => {
-		if (!v) return;
-		let e = requestAnimationFrame(() => x(!0));
+	}, [y, v]), r.useEffect(() => {
+		if (!y) return;
+		let e = requestAnimationFrame(() => S(!0));
 		return () => cancelAnimationFrame(e);
-	}, [v]);
-	let S = m === "progressbar" && !a(g["aria-label"]) && !a(g["aria-labelledby"]), C = Object.hasOwn(s, d ?? "") ? d : "primary", w = s[C];
-	return /* @__PURE__ */ i("span", {
-		"data-appearance": C,
-		"data-state": v ? "shown" : "delayed",
-		...g,
-		role: m,
-		"aria-label": S ? l : g["aria-label"],
-		ref: h,
-		className: e("inline-flex items-center gap-2", p),
-		children: [v ? /* @__PURE__ */ r("span", {
+	}, [y]);
+	let C = h === "progressbar" && !o(_["aria-label"]) && !o(_["aria-labelledby"]), w = Object.hasOwn(c, f ?? "") ? f : "primary", T = c[w];
+	return /* @__PURE__ */ a("span", {
+		"data-appearance": w,
+		"data-state": y ? "shown" : "delayed",
+		..._,
+		role: h,
+		"aria-label": C ? u : _["aria-label"],
+		ref: g,
+		className: e(t.root, "inline-flex items-center gap-2", m),
+		children: [y ? /* @__PURE__ */ i("span", {
 			"aria-hidden": "true",
 			"data-wave-spinner-ring": "",
-			className: e("rounded-full border-2 animate-wave-spin motion-reduce:animate-wave-spin-slow", w.ring, t.ringArc, o[c])
-		}) : null, /* @__PURE__ */ r("span", {
+			className: e(t.spinner, "rounded-full border-2 animate-wave-spin motion-reduce:animate-wave-spin-slow", T.ring, n.ringArc, s[l])
+		}) : null, /* @__PURE__ */ i("span", {
 			"data-wave-spinner-label": "",
-			className: u ? e("text-body-1", w.label) : "sr-only",
-			children: b ? l : null
+			className: e(t.label, d ? e("text-body-1", T.label) : "sr-only"),
+			children: x ? u : null
 		})]
 	});
 };
-c.displayName = "Spinner";
+l.displayName = "Spinner";
 //#endregion
-export { c as Spinner };
+export { l as Spinner };
 
 //# sourceMappingURL=Spinner.mjs.map