@proyecto-viviana/ui 0.5.0 → 0.6.0

package/dist/progress/ProgressCircle.js

@@ -0,0 +1,235 @@
+import { a as mergeContextUnsafeStyle, i as mergeContextStyles, n as getSlottedContextProps, r as mergeContextRefs } from "../_chunk/spectrum-context.js";
+import { className, createComponent, effect, getNextElement, getNextMarker, insert, mergeProps, runHydrationEvents, setStyleProperty, spread, template, use } from "solid-js/web";
+import { For, createContext, createMemo, mergeProps as mergeProps$1, splitProps, useContext } from "solid-js";
+import { createProgressBar } from "@proyecto-viviana/solidaria";
+//#region src/progress/ProgressCircle.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div><!$><!/><!$><!/>`), _tmpl$2 = /*#__PURE__*/ template(`<div aria-hidden=true>`), _tmpl$3 = /*#__PURE__*/ template(`<div class=" _Pa151 Wr151 _lr151 _Ar151 _zr151 sd151 _ta151 eb151 _Ca151 _Ob151">`);
+const ProgressCircleContext = createContext(null);
+const RING_COUNT = 16;
+function ringGeometry(container, radius, block) {
+	return {
+		block,
+		positions: Array.from({ length: RING_COUNT }, (_, i) => {
+			const a = i / RING_COUNT * Math.PI * 2 - Math.PI / 2;
+			return {
+				x: Math.round(container / 2 + radius * Math.cos(a) - block / 2),
+				y: Math.round(container / 2 + radius * Math.sin(a) - block / 2)
+			};
+		})
+	};
+}
+const RING_GEOMETRY = {
+	S: ringGeometry(16, 7, 2),
+	M: ringGeometry(32, 13, 3),
+	L: ringGeometry(64, 26, 6)
+};
+const wrapperStyles = function anonymous(props, overrides) {
+	let rules = " ";
+	let position = false;
+	let width = false;
+	let height = false;
+	let matches = String(overrides || "").matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L|F|M|K)[^\s]+/g);
+	for (let p of matches) {
+		if (p[1] === "_P") position = true;
+		if (p[1] === "Z") width = true;
+		if (p[1] === "F") height = true;
+		rules += p[0];
+	}
+	if (props.staticColor === "white") rules += " -Ovbhqd-gcwrnr151";
+	else if (props.staticColor === "black") rules += " -Ovbhqd-g4hn3s151";
+	if (!position) rules += " _Pc151";
+	if (props.size === "L") {
+		if (!width) rules += " ZG151";
+	} else if (props.size === "S") {
+		if (!width) rules += " Zu151";
+	} else if (!width) rules += " ZC151";
+	if (props.size === "L") {
+		if (!height) rules += " FA151";
+	} else if (props.size === "S") {
+		if (!height) rules += " Ft151";
+	} else if (!height) rules += " Fx151";
+	rules += " fa151";
+	return rules;
+};
+const blockStyles = function anonymous(props) {
+	let rules = " ";
+	rules += " _Pa151";
+	if (props.size === "L") rules += " Zg151";
+	else if (props.size === "S") rules += " Zf151";
+	else rules += " Z8ap6Nb151";
+	if (props.size === "L") rules += " Fg151";
+	else if (props.size === "S") rules += " FlAZvq151";
+	else rules += " F8ap6Nb151";
+	if (props.isStaticColor) if (props.isLead) rules += " g9151";
+	else if (props.isLit) rules += " gj151";
+	else rules += " gh151";
+	else if (props.isLead) rules += " g9151";
+	else if (props.isLit) rules += " gdeCgNc151";
+	else rules += " gW36Rud151";
+	if (props.isLit) rules += " glc151";
+	else rules += " gla151";
+	if (props.isLead) rules += " _iatgCI151";
+	if (props.size === "L") rules += " __mlgTz3b151";
+	else if (props.size === "M") rules += " __m1mkFl151";
+	else if (props.size === "S") rules += " __mdgorVd151";
+	rules += " _neYWWze151";
+	if (props.isIndeterminate) rules += " _gfEXdW151";
+	else if (props.isLit) {
+		rules += " _gfEXdW151";
+		rules += " _gdklsgch3TDrc151";
+	}
+	if (props.isLit) rules += " _eLaQYvc151";
+	if (props.isLit) rules += " _h3jWUfc151";
+	if (props.isLit) rules += " __ea151";
+	if (props.isStaticColor) rules += " -oArxZd-gj151";
+	else rules += " -oArxZd-gdeCgNc151";
+	rules += " -oArxZd-lgc151";
+	return rules;
+};
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+function safeRange(min, max) {
+	const range = max - min;
+	return Number.isFinite(range) && range > 0 ? range : 1;
+}
+function getDataAttributes(source) {
+	const record = source;
+	const attributes = {};
+	for (const key in record) if (key.startsWith("data-")) {
+		const value = record[key];
+		attributes[key] = value == null ? void 0 : String(value);
+	}
+	return attributes;
+}
+function ProgressCircle(props) {
+	const contextProps = getSlottedContextProps(useContext(ProgressCircleContext), props.slot);
+	const merged = mergeProps$1(contextProps ?? {}, props);
+	const [local] = splitProps(merged, [
+		"value",
+		"minValue",
+		"maxValue",
+		"isIndeterminate",
+		"size",
+		"staticColor",
+		"children",
+		"styles",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"slot",
+		"ref",
+		"id",
+		"aria-label",
+		"aria-labelledby",
+		"aria-describedby",
+		"aria-details"
+	]);
+	const size = () => local.size ?? "M";
+	const isIndeterminate = () => local.isIndeterminate ?? false;
+	const isStaticColor = () => !!local.staticColor;
+	const state = () => ({
+		size: size(),
+		staticColor: local.staticColor,
+		isStaticColor: isStaticColor()
+	});
+	const progressAria = createProgressBar({
+		get id() {
+			return local.id;
+		},
+		get value() {
+			return local.value;
+		},
+		get minValue() {
+			return local.minValue;
+		},
+		get maxValue() {
+			return local.maxValue;
+		},
+		get isIndeterminate() {
+			return isIndeterminate();
+		},
+		get "aria-label"() {
+			return local["aria-label"];
+		},
+		get "aria-labelledby"() {
+			return local["aria-labelledby"];
+		},
+		get "aria-describedby"() {
+			return local["aria-describedby"];
+		},
+		get "aria-details"() {
+			return local["aria-details"];
+		}
+	});
+	const percentage = createMemo(() => {
+		const minValue = local.minValue ?? 0;
+		const maxValue = local.maxValue ?? 100;
+		return (clamp(local.value ?? 0, minValue, maxValue) - minValue) / safeRange(minValue, maxValue) * 100;
+	});
+	const litCount = createMemo(() => isIndeterminate() ? RING_COUNT : clamp(Math.round(percentage() / 100 * RING_COUNT), 0, RING_COUNT));
+	const geometry = () => RING_GEOMETRY[size()];
+	const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);
+	const mergedUnsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);
+	return (() => {
+		var _el$ = getNextElement(_tmpl$), _el$2 = _el$.firstChild, [_el$3, _co$] = getNextMarker(_el$2.nextSibling), _el$4 = _el$3.nextSibling, [_el$5, _co$2] = getNextMarker(_el$4.nextSibling);
+		var _ref$ = mergeContextRefs(contextProps?.ref, props.ref);
+		typeof _ref$ === "function" && use(_ref$, _el$);
+		spread(_el$, mergeProps(() => getDataAttributes(merged), () => progressAria.progressBarProps, {
+			"data-rac": "",
+			get ["class"]() {
+				return [local.UNSAFE_className, wrapperStyles(state(), mergedStyles())].filter(Boolean).join(" ");
+			},
+			get style() {
+				return mergedUnsafeStyle();
+			},
+			get slot() {
+				return local.slot ?? void 0;
+			}
+		}), false, true);
+		insert(_el$, createComponent(For, {
+			get each() {
+				return geometry().positions;
+			},
+			children: (position, index) => {
+				const isLit = () => index() < litCount();
+				const isLead = () => !isIndeterminate() && litCount() > 0 && litCount() < RING_COUNT && isLit() && index() >= litCount() - 2;
+				return (() => {
+					var _el$6 = getNextElement(_tmpl$2);
+					effect((_p$) => {
+						var _v$ = blockStyles({
+							...state(),
+							isLit: isLit(),
+							isLead: isLead(),
+							isIndeterminate: isIndeterminate()
+						}), _v$2 = `${position.x}px`, _v$3 = `${position.y}px`, _v$4 = isLit() ? `${(index() * .16).toFixed(2)}s` : void 0;
+						_v$ !== _p$.e && className(_el$6, _p$.e = _v$);
+						_v$2 !== _p$.t && setStyleProperty(_el$6, "left", _p$.t = _v$2);
+						_v$3 !== _p$.a && setStyleProperty(_el$6, "top", _p$.a = _v$3);
+						_v$4 !== _p$.o && setStyleProperty(_el$6, "animation-delay", _p$.o = _v$4);
+						return _p$;
+					}, {
+						e: void 0,
+						t: void 0,
+						a: void 0,
+						o: void 0
+					});
+					return _el$6;
+				})();
+			}
+		}), _el$3, _co$);
+		insert(_el$, () => {
+			const content = local.children;
+			return content != null ? (() => {
+				var _el$7 = getNextElement(_tmpl$3);
+				insert(_el$7, content);
+				return _el$7;
+			})() : void 0;
+		}, _el$5, _co$2);
+		runHydrationEvents();
+		return _el$;
+	})();
+}
+//#endregion
+export { ProgressCircle, ProgressCircleContext };
+
+//# sourceMappingURL=ProgressCircle.js.map

package/dist/progress/ProgressCircle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressCircle.js","names":[],"sources":["../../src/progress/ProgressCircle.tsx"],"sourcesContent":["import {\n  type JSX,\n  For,\n  createContext,\n  createMemo,\n  mergeProps,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport { createProgressBar } from \"@proyecto-viviana/solidaria\";\nimport type { StyleString } from \"../style\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport { keyframes } from \"../style/style-macro\" with { type: \"macro\" };\nimport type { UnsafeClassName } from \"../s2-internal/style-utils\";\nimport {\n  getAllowedOverrides,\n  staticColor as staticColorStyles,\n} from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n  type SpectrumContextValue,\n} from \"../button/spectrum-context\";\n\nexport type ProgressCircleSize = \"S\" | \"M\" | \"L\";\nexport type ProgressCircleStaticColor = \"white\" | \"black\" | \"auto\";\n\nexport interface ProgressCircleProps {\n  /** The current value. @default 0 */\n  value?: number;\n  /** The smallest value allowed. @default 0 */\n  minValue?: number;\n  /** The largest value allowed. @default 100 */\n  maxValue?: number;\n  /** Whether presentation is indeterminate. */\n  isIndeterminate?: boolean;\n  /** The size of the progress circle. @default 'M' */\n  size?: ProgressCircleSize;\n  /** The static color style to apply over a color background. */\n  staticColor?: ProgressCircleStaticColor;\n  /**\n   * Content centered inside the ring — the register composes a headline count\n   * over the pixel ring (TerminalGlassLab.tsx:640-662: \"3/5\" over \"FOCUS\").\n   * Purely visual; the accessible value stays on the progressbar attributes.\n   */\n  children?: JSX.Element;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString | (() => StyleString | undefined);\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: UnsafeClassName | string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  id?: string;\n  slot?: string | null;\n  ref?: RefLike<HTMLDivElement>;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  \"aria-details\"?: string;\n  [key: `data-${string}`]: string | undefined;\n}\n\nexport const ProgressCircleContext = createContext<SpectrumContextValue<ProgressCircleProps>>(null);\n\ntype ProgressCircleStyleState = {\n  size: ProgressCircleSize;\n  staticColor?: ProgressCircleStaticColor;\n  isStaticColor: boolean;\n};\n\ntype RingBlockStyleState = ProgressCircleStyleState & {\n  isLit: boolean;\n  isLead: boolean;\n  isIndeterminate: boolean;\n};\n\n/* The register's ring is not an arc — it is 16 discrete pixel blocks on a circle\n * (PIX_RING, TerminalGlassLab.tsx:74-90): lit blocks in the accent, the two at the\n * leading edge on a checker dither, the remainder recessed on the inset surface,\n * every block beveled with the edge-glass rim. Geometry is pure trig computed once\n * at module load, exactly like the spec (deterministic, so it is SSR-safe). The\n * spec's single instance is 7px blocks at radius 31 in a 76px box; each size here\n * keeps those proportions inside the existing S/M/L = 16/32/64 footprints. */\nconst RING_COUNT = 16;\n\ninterface RingGeometry {\n  block: number;\n  positions: { x: number; y: number }[];\n}\n\nfunction ringGeometry(container: number, radius: number, block: number): RingGeometry {\n  return {\n    block,\n    positions: Array.from({ length: RING_COUNT }, (_, i) => {\n      const a = (i / RING_COUNT) * Math.PI * 2 - Math.PI / 2;\n      return {\n        x: Math.round(container / 2 + radius * Math.cos(a) - block / 2),\n        y: Math.round(container / 2 + radius * Math.sin(a) - block / 2),\n      };\n    }),\n  };\n}\n\nconst RING_GEOMETRY: Record<ProgressCircleSize, RingGeometry> = {\n  S: ringGeometry(16, 7, 2),\n  M: ringGeometry(32, 13, 3),\n  L: ringGeometry(64, 26, 6),\n};\n\n/* The spec's glxRingBlink (glasselated.css:325-335): each lit block snaps from\n * 15% to full opacity early in a 2.6s loop, step-end, staggered 0.16s per block —\n * a clockwise chase. Determinate rings gate it on prefers-reduced-motion (the\n * blink is decoration; the lit count carries the value). Indeterminate rings keep\n * it unconditionally: there the chase IS the \"something is happening\" signal, and\n * a frozen full ring would read as 100%. Gate is the CSS media condition, not a\n * runtime matchMedia check — Solid hydration trusts the server DOM (see Badge). */\nconst ringBlink = keyframes(`\n  0% {\n    opacity: 0.15;\n  }\n\n  12% {\n    opacity: 1;\n  }\n\n  100% {\n    opacity: 1;\n  }\n`);\n\nconst wrapperStyles = style<ProgressCircleStyleState>(\n  {\n    ...staticColorStyles(),\n    position: \"relative\",\n    size: {\n      default: 32,\n      size: {\n        S: 16,\n        L: 64,\n      },\n    },\n    aspectRatio: \"square\",\n  },\n  getAllowedOverrides({ height: true }),\n);\n\nconst blockStyles = style<RingBlockStyleState>({\n  position: \"absolute\",\n  size: {\n    default: 3,\n    size: {\n      S: 2,\n      L: 6,\n    },\n  },\n  backgroundColor: {\n    /* Unlit blocks recess into the same inset surface as the linear track\n     * (`pasteboard` carries `var(--surface-inset)` — see the note that was on the\n     * old arc's trackStyles). Lead blocks go transparent so only their dither\n     * paints, exactly like the spec's blocks whose checker shows the panel\n     * through its off quarters. */\n    default: \"pasteboard\",\n    isLit: \"accent\",\n    isLead: \"transparent\",\n    isStaticColor: {\n      default: \"transparent-overlay-300\",\n      isLit: \"transparent-overlay-900\",\n      isLead: \"transparent\",\n    },\n    forcedColors: {\n      default: \"Background\",\n      isLit: \"ButtonText\",\n    },\n  },\n  /* The leading-edge dither: the register's one ordered-dither recipe,\n   * repeating-conic checker at half the block's own size (3.5px tile on the\n   * spec's 7px block = 2×2 sub-cells; scaled per size here). */\n  backgroundImage: {\n    isLead: \"[repeating-conic-gradient(var(--pv-ring-fill) 0% 25%, transparent 0% 50%)]\",\n  },\n  backgroundSize: {\n    size: {\n      S: \"[1px 1px]\",\n      M: \"[1.5px 1.5px]\",\n      L: \"[3px 3px]\",\n    },\n  },\n  boxShadow: \"edge-glass\",\n  animation: {\n    isLit: {\n      default: ringBlink,\n      \"@media (prefers-reduced-motion: reduce)\": \"none\",\n    },\n    isIndeterminate: ringBlink,\n  },\n  animationDuration: {\n    isLit: 2600,\n  },\n  animationTimingFunction: {\n    isLit: \"[step-end]\",\n  },\n  animationIterationCount: {\n    isLit: \"infinite\",\n  },\n  \"--pv-ring-fill\": {\n    type: \"backgroundColor\",\n    value: {\n      default: \"accent\",\n      isStaticColor: \"transparent-overlay-900\",\n      forcedColors: \"ButtonText\",\n    },\n  },\n});\n\nconst centerStyles = style({\n  position: \"absolute\",\n  inset: 0,\n  display: \"flex\",\n  flexDirection: \"column\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  pointerEvents: \"none\",\n});\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max);\n}\n\nfunction safeRange(min: number, max: number): number {\n  const range = max - min;\n  return Number.isFinite(range) && range > 0 ? range : 1;\n}\n\nfunction getDataAttributes(source: object): JSX.HTMLAttributes<HTMLDivElement> {\n  const record = source as Record<string, unknown>;\n  const attributes: Record<string, string | undefined> = {};\n\n  for (const key in record) {\n    if (key.startsWith(\"data-\")) {\n      const value = record[key];\n      attributes[key] = value == null ? undefined : String(value);\n    }\n  }\n\n  return attributes as JSX.HTMLAttributes<HTMLDivElement>;\n}\n\nexport function ProgressCircle(props: ProgressCircleProps): JSX.Element {\n  const contextProps = getSlottedContextProps(useContext(ProgressCircleContext), props.slot);\n  const merged = mergeProps(contextProps ?? {}, props) as ProgressCircleProps;\n  const [local] = splitProps(merged, [\n    \"value\",\n    \"minValue\",\n    \"maxValue\",\n    \"isIndeterminate\",\n    \"size\",\n    \"staticColor\",\n    \"children\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"slot\",\n    \"ref\",\n    \"id\",\n    \"aria-label\",\n    \"aria-labelledby\",\n    \"aria-describedby\",\n    \"aria-details\",\n  ]);\n  const size = () => local.size ?? \"M\";\n  const isIndeterminate = () => local.isIndeterminate ?? false;\n  const isStaticColor = () => !!local.staticColor;\n  const state = (): ProgressCircleStyleState => ({\n    size: size(),\n    staticColor: local.staticColor,\n    isStaticColor: isStaticColor(),\n  });\n  const progressAria = createProgressBar({\n    get id() {\n      return local.id;\n    },\n    get value() {\n      return local.value;\n    },\n    get minValue() {\n      return local.minValue;\n    },\n    get maxValue() {\n      return local.maxValue;\n    },\n    get isIndeterminate() {\n      return isIndeterminate();\n    },\n    get \"aria-label\"() {\n      return local[\"aria-label\"];\n    },\n    get \"aria-labelledby\"() {\n      return local[\"aria-labelledby\"];\n    },\n    get \"aria-describedby\"() {\n      return local[\"aria-describedby\"];\n    },\n    get \"aria-details\"() {\n      return local[\"aria-details\"];\n    },\n  });\n  const percentage = createMemo(() => {\n    const minValue = local.minValue ?? 0;\n    const maxValue = local.maxValue ?? 100;\n    const value = clamp(local.value ?? 0, minValue, maxValue);\n    return ((value - minValue) / safeRange(minValue, maxValue)) * 100;\n  });\n  /* Value → block quantization. Indeterminate lights the whole ring and lets the\n   * staggered blink chase around it. The spec's hardcoded 10-lit/2-dithered split\n   * is generalized: the last two lit blocks dither while the ring is partial\n   * (work in flight has a leading edge; a full or empty ring has none). */\n  const litCount = createMemo(() =>\n    isIndeterminate()\n      ? RING_COUNT\n      : clamp(Math.round((percentage() / 100) * RING_COUNT), 0, RING_COUNT),\n  );\n  const geometry = () => RING_GEOMETRY[size()];\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n\n  return (\n    <div\n      {...getDataAttributes(merged)}\n      {...progressAria.progressBarProps}\n      data-rac=\"\"\n      ref={mergeContextRefs(\n        (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,\n        props.ref,\n      )}\n      class={[local.UNSAFE_className, wrapperStyles(state(), mergedStyles())]\n        .filter(Boolean)\n        .join(\" \")}\n      style={mergedUnsafeStyle()}\n      slot={local.slot ?? undefined}\n    >\n      <For each={geometry().positions}>\n        {(position, index) => {\n          const isLit = () => index() < litCount();\n          const isLead = () =>\n            !isIndeterminate() &&\n            litCount() > 0 &&\n            litCount() < RING_COUNT &&\n            isLit() &&\n            index() >= litCount() - 2;\n          return (\n            <div\n              aria-hidden=\"true\"\n              class={blockStyles({\n                ...state(),\n                isLit: isLit(),\n                isLead: isLead(),\n                isIndeterminate: isIndeterminate(),\n              })}\n              style={{\n                left: `${position.x}px`,\n                top: `${position.y}px`,\n                /* The spec's stagger: i × 0.16s inside the 2.6s loop. Inert when\n                 * the media gate zeroes the animation-name. */\n                \"animation-delay\": isLit() ? `${(index() * 0.16).toFixed(2)}s` : undefined,\n              }}\n            />\n          );\n        }}\n      </For>\n      {/* Read `children` exactly once per run — a repeated getter read\n        * re-instantiates the subtree and desyncs hydration keys. */}\n      {(() => {\n        const content = local.children;\n        return content != null ? <div class={centerStyles}>{content}</div> : undefined;\n      })()}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/progress/ProgressCircle.jsx

@@ -0,0 +1,199 @@
+import { a as mergeContextUnsafeStyle, i as mergeContextStyles, n as getSlottedContextProps, r as mergeContextRefs } from "../_chunk/spectrum-context.jsx";
+import { For, createContext, createMemo, mergeProps, splitProps, useContext } from "solid-js";
+import { createProgressBar } from "@proyecto-viviana/solidaria";
+//#region src/progress/ProgressCircle.tsx
+const ProgressCircleContext = createContext(null);
+const RING_COUNT = 16;
+function ringGeometry(container, radius, block) {
+	return {
+		block,
+		positions: Array.from({ length: RING_COUNT }, (_, i) => {
+			const a = i / RING_COUNT * Math.PI * 2 - Math.PI / 2;
+			return {
+				x: Math.round(container / 2 + radius * Math.cos(a) - block / 2),
+				y: Math.round(container / 2 + radius * Math.sin(a) - block / 2)
+			};
+		})
+	};
+}
+const RING_GEOMETRY = {
+	S: ringGeometry(16, 7, 2),
+	M: ringGeometry(32, 13, 3),
+	L: ringGeometry(64, 26, 6)
+};
+const wrapperStyles = function anonymous(props, overrides) {
+	let rules = " ";
+	let position = false;
+	let width = false;
+	let height = false;
+	let matches = String(overrides || "").matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L|F|M|K)[^\s]+/g);
+	for (let p of matches) {
+		if (p[1] === "_P") position = true;
+		if (p[1] === "Z") width = true;
+		if (p[1] === "F") height = true;
+		rules += p[0];
+	}
+	if (props.staticColor === "white") rules += " -Ovbhqd-gcwrnr151";
+	else if (props.staticColor === "black") rules += " -Ovbhqd-g4hn3s151";
+	if (!position) rules += " _Pc151";
+	if (props.size === "L") {
+		if (!width) rules += " ZG151";
+	} else if (props.size === "S") {
+		if (!width) rules += " Zu151";
+	} else if (!width) rules += " ZC151";
+	if (props.size === "L") {
+		if (!height) rules += " FA151";
+	} else if (props.size === "S") {
+		if (!height) rules += " Ft151";
+	} else if (!height) rules += " Fx151";
+	rules += " fa151";
+	return rules;
+};
+const blockStyles = function anonymous(props) {
+	let rules = " ";
+	rules += " _Pa151";
+	if (props.size === "L") rules += " Zg151";
+	else if (props.size === "S") rules += " Zf151";
+	else rules += " Z8ap6Nb151";
+	if (props.size === "L") rules += " Fg151";
+	else if (props.size === "S") rules += " FlAZvq151";
+	else rules += " F8ap6Nb151";
+	if (props.isStaticColor) if (props.isLead) rules += " g9151";
+	else if (props.isLit) rules += " gj151";
+	else rules += " gh151";
+	else if (props.isLead) rules += " g9151";
+	else if (props.isLit) rules += " gdeCgNc151";
+	else rules += " gW36Rud151";
+	if (props.isLit) rules += " glc151";
+	else rules += " gla151";
+	if (props.isLead) rules += " _iatgCI151";
+	if (props.size === "L") rules += " __mlgTz3b151";
+	else if (props.size === "M") rules += " __m1mkFl151";
+	else if (props.size === "S") rules += " __mdgorVd151";
+	rules += " _neYWWze151";
+	if (props.isIndeterminate) rules += " _gfEXdW151";
+	else if (props.isLit) {
+		rules += " _gfEXdW151";
+		rules += " _gdklsgch3TDrc151";
+	}
+	if (props.isLit) rules += " _eLaQYvc151";
+	if (props.isLit) rules += " _h3jWUfc151";
+	if (props.isLit) rules += " __ea151";
+	if (props.isStaticColor) rules += " -oArxZd-gj151";
+	else rules += " -oArxZd-gdeCgNc151";
+	rules += " -oArxZd-lgc151";
+	return rules;
+};
+const centerStyles = " _Pa151 Wr151 _lr151 _Ar151 _zr151 sd151 _ta151 eb151 _Ca151 _Ob151";
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+function safeRange(min, max) {
+	const range = max - min;
+	return Number.isFinite(range) && range > 0 ? range : 1;
+}
+function getDataAttributes(source) {
+	const record = source;
+	const attributes = {};
+	for (const key in record) if (key.startsWith("data-")) {
+		const value = record[key];
+		attributes[key] = value == null ? void 0 : String(value);
+	}
+	return attributes;
+}
+function ProgressCircle(props) {
+	const contextProps = getSlottedContextProps(useContext(ProgressCircleContext), props.slot);
+	const merged = mergeProps(contextProps ?? {}, props);
+	const [local] = splitProps(merged, [
+		"value",
+		"minValue",
+		"maxValue",
+		"isIndeterminate",
+		"size",
+		"staticColor",
+		"children",
+		"styles",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"slot",
+		"ref",
+		"id",
+		"aria-label",
+		"aria-labelledby",
+		"aria-describedby",
+		"aria-details"
+	]);
+	const size = () => local.size ?? "M";
+	const isIndeterminate = () => local.isIndeterminate ?? false;
+	const isStaticColor = () => !!local.staticColor;
+	const state = () => ({
+		size: size(),
+		staticColor: local.staticColor,
+		isStaticColor: isStaticColor()
+	});
+	const progressAria = createProgressBar({
+		get id() {
+			return local.id;
+		},
+		get value() {
+			return local.value;
+		},
+		get minValue() {
+			return local.minValue;
+		},
+		get maxValue() {
+			return local.maxValue;
+		},
+		get isIndeterminate() {
+			return isIndeterminate();
+		},
+		get "aria-label"() {
+			return local["aria-label"];
+		},
+		get "aria-labelledby"() {
+			return local["aria-labelledby"];
+		},
+		get "aria-describedby"() {
+			return local["aria-describedby"];
+		},
+		get "aria-details"() {
+			return local["aria-details"];
+		}
+	});
+	const percentage = createMemo(() => {
+		const minValue = local.minValue ?? 0;
+		const maxValue = local.maxValue ?? 100;
+		return (clamp(local.value ?? 0, minValue, maxValue) - minValue) / safeRange(minValue, maxValue) * 100;
+	});
+	const litCount = createMemo(() => isIndeterminate() ? RING_COUNT : clamp(Math.round(percentage() / 100 * RING_COUNT), 0, RING_COUNT));
+	const geometry = () => RING_GEOMETRY[size()];
+	const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);
+	const mergedUnsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);
+	return <div {...getDataAttributes(merged)} {...progressAria.progressBarProps} data-rac="" ref={mergeContextRefs(contextProps?.ref, props.ref)} class={[local.UNSAFE_className, wrapperStyles(state(), mergedStyles())].filter(Boolean).join(" ")} style={mergedUnsafeStyle()} slot={local.slot ?? void 0}>
+      <For each={geometry().positions}>
+        {(position, index) => {
+		const isLit = () => index() < litCount();
+		const isLead = () => !isIndeterminate() && litCount() > 0 && litCount() < RING_COUNT && isLit() && index() >= litCount() - 2;
+		return <div aria-hidden="true" class={blockStyles({
+			...state(),
+			isLit: isLit(),
+			isLead: isLead(),
+			isIndeterminate: isIndeterminate()
+		})} style={{
+			left: `${position.x}px`,
+			top: `${position.y}px`,
+			"animation-delay": isLit() ? `${(index() * .16).toFixed(2)}s` : void 0
+		}} />;
+	}}
+      </For>
+      {}
+      {(() => {
+		const content = local.children;
+		return content != null ? <div class={centerStyles}>{content}</div> : void 0;
+	})()}
+    </div>;
+}
+//#endregion
+export { ProgressCircle, ProgressCircleContext };
+
+//# sourceMappingURL=ProgressCircle.jsx.map

package/dist/progress/ProgressCircle.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressCircle.jsx","names":[],"sources":["../../src/progress/ProgressCircle.tsx"],"sourcesContent":["import {\n  type JSX,\n  For,\n  createContext,\n  createMemo,\n  mergeProps,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport { createProgressBar } from \"@proyecto-viviana/solidaria\";\nimport type { StyleString } from \"../style\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport { keyframes } from \"../style/style-macro\" with { type: \"macro\" };\nimport type { UnsafeClassName } from \"../s2-internal/style-utils\";\nimport {\n  getAllowedOverrides,\n  staticColor as staticColorStyles,\n} from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n  type SpectrumContextValue,\n} from \"../button/spectrum-context\";\n\nexport type ProgressCircleSize = \"S\" | \"M\" | \"L\";\nexport type ProgressCircleStaticColor = \"white\" | \"black\" | \"auto\";\n\nexport interface ProgressCircleProps {\n  /** The current value. @default 0 */\n  value?: number;\n  /** The smallest value allowed. @default 0 */\n  minValue?: number;\n  /** The largest value allowed. @default 100 */\n  maxValue?: number;\n  /** Whether presentation is indeterminate. */\n  isIndeterminate?: boolean;\n  /** The size of the progress circle. @default 'M' */\n  size?: ProgressCircleSize;\n  /** The static color style to apply over a color background. */\n  staticColor?: ProgressCircleStaticColor;\n  /**\n   * Content centered inside the ring — the register composes a headline count\n   * over the pixel ring (TerminalGlassLab.tsx:640-662: \"3/5\" over \"FOCUS\").\n   * Purely visual; the accessible value stays on the progressbar attributes.\n   */\n  children?: JSX.Element;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString | (() => StyleString | undefined);\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: UnsafeClassName | string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  id?: string;\n  slot?: string | null;\n  ref?: RefLike<HTMLDivElement>;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  \"aria-details\"?: string;\n  [key: `data-${string}`]: string | undefined;\n}\n\nexport const ProgressCircleContext = createContext<SpectrumContextValue<ProgressCircleProps>>(null);\n\ntype ProgressCircleStyleState = {\n  size: ProgressCircleSize;\n  staticColor?: ProgressCircleStaticColor;\n  isStaticColor: boolean;\n};\n\ntype RingBlockStyleState = ProgressCircleStyleState & {\n  isLit: boolean;\n  isLead: boolean;\n  isIndeterminate: boolean;\n};\n\n/* The register's ring is not an arc — it is 16 discrete pixel blocks on a circle\n * (PIX_RING, TerminalGlassLab.tsx:74-90): lit blocks in the accent, the two at the\n * leading edge on a checker dither, the remainder recessed on the inset surface,\n * every block beveled with the edge-glass rim. Geometry is pure trig computed once\n * at module load, exactly like the spec (deterministic, so it is SSR-safe). The\n * spec's single instance is 7px blocks at radius 31 in a 76px box; each size here\n * keeps those proportions inside the existing S/M/L = 16/32/64 footprints. */\nconst RING_COUNT = 16;\n\ninterface RingGeometry {\n  block: number;\n  positions: { x: number; y: number }[];\n}\n\nfunction ringGeometry(container: number, radius: number, block: number): RingGeometry {\n  return {\n    block,\n    positions: Array.from({ length: RING_COUNT }, (_, i) => {\n      const a = (i / RING_COUNT) * Math.PI * 2 - Math.PI / 2;\n      return {\n        x: Math.round(container / 2 + radius * Math.cos(a) - block / 2),\n        y: Math.round(container / 2 + radius * Math.sin(a) - block / 2),\n      };\n    }),\n  };\n}\n\nconst RING_GEOMETRY: Record<ProgressCircleSize, RingGeometry> = {\n  S: ringGeometry(16, 7, 2),\n  M: ringGeometry(32, 13, 3),\n  L: ringGeometry(64, 26, 6),\n};\n\n/* The spec's glxRingBlink (glasselated.css:325-335): each lit block snaps from\n * 15% to full opacity early in a 2.6s loop, step-end, staggered 0.16s per block —\n * a clockwise chase. Determinate rings gate it on prefers-reduced-motion (the\n * blink is decoration; the lit count carries the value). Indeterminate rings keep\n * it unconditionally: there the chase IS the \"something is happening\" signal, and\n * a frozen full ring would read as 100%. Gate is the CSS media condition, not a\n * runtime matchMedia check — Solid hydration trusts the server DOM (see Badge). */\nconst ringBlink = keyframes(`\n  0% {\n    opacity: 0.15;\n  }\n\n  12% {\n    opacity: 1;\n  }\n\n  100% {\n    opacity: 1;\n  }\n`);\n\nconst wrapperStyles = style<ProgressCircleStyleState>(\n  {\n    ...staticColorStyles(),\n    position: \"relative\",\n    size: {\n      default: 32,\n      size: {\n        S: 16,\n        L: 64,\n      },\n    },\n    aspectRatio: \"square\",\n  },\n  getAllowedOverrides({ height: true }),\n);\n\nconst blockStyles = style<RingBlockStyleState>({\n  position: \"absolute\",\n  size: {\n    default: 3,\n    size: {\n      S: 2,\n      L: 6,\n    },\n  },\n  backgroundColor: {\n    /* Unlit blocks recess into the same inset surface as the linear track\n     * (`pasteboard` carries `var(--surface-inset)` — see the note that was on the\n     * old arc's trackStyles). Lead blocks go transparent so only their dither\n     * paints, exactly like the spec's blocks whose checker shows the panel\n     * through its off quarters. */\n    default: \"pasteboard\",\n    isLit: \"accent\",\n    isLead: \"transparent\",\n    isStaticColor: {\n      default: \"transparent-overlay-300\",\n      isLit: \"transparent-overlay-900\",\n      isLead: \"transparent\",\n    },\n    forcedColors: {\n      default: \"Background\",\n      isLit: \"ButtonText\",\n    },\n  },\n  /* The leading-edge dither: the register's one ordered-dither recipe,\n   * repeating-conic checker at half the block's own size (3.5px tile on the\n   * spec's 7px block = 2×2 sub-cells; scaled per size here). */\n  backgroundImage: {\n    isLead: \"[repeating-conic-gradient(var(--pv-ring-fill) 0% 25%, transparent 0% 50%)]\",\n  },\n  backgroundSize: {\n    size: {\n      S: \"[1px 1px]\",\n      M: \"[1.5px 1.5px]\",\n      L: \"[3px 3px]\",\n    },\n  },\n  boxShadow: \"edge-glass\",\n  animation: {\n    isLit: {\n      default: ringBlink,\n      \"@media (prefers-reduced-motion: reduce)\": \"none\",\n    },\n    isIndeterminate: ringBlink,\n  },\n  animationDuration: {\n    isLit: 2600,\n  },\n  animationTimingFunction: {\n    isLit: \"[step-end]\",\n  },\n  animationIterationCount: {\n    isLit: \"infinite\",\n  },\n  \"--pv-ring-fill\": {\n    type: \"backgroundColor\",\n    value: {\n      default: \"accent\",\n      isStaticColor: \"transparent-overlay-900\",\n      forcedColors: \"ButtonText\",\n    },\n  },\n});\n\nconst centerStyles = style({\n  position: \"absolute\",\n  inset: 0,\n  display: \"flex\",\n  flexDirection: \"column\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  pointerEvents: \"none\",\n});\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max);\n}\n\nfunction safeRange(min: number, max: number): number {\n  const range = max - min;\n  return Number.isFinite(range) && range > 0 ? range : 1;\n}\n\nfunction getDataAttributes(source: object): JSX.HTMLAttributes<HTMLDivElement> {\n  const record = source as Record<string, unknown>;\n  const attributes: Record<string, string | undefined> = {};\n\n  for (const key in record) {\n    if (key.startsWith(\"data-\")) {\n      const value = record[key];\n      attributes[key] = value == null ? undefined : String(value);\n    }\n  }\n\n  return attributes as JSX.HTMLAttributes<HTMLDivElement>;\n}\n\nexport function ProgressCircle(props: ProgressCircleProps): JSX.Element {\n  const contextProps = getSlottedContextProps(useContext(ProgressCircleContext), props.slot);\n  const merged = mergeProps(contextProps ?? {}, props) as ProgressCircleProps;\n  const [local] = splitProps(merged, [\n    \"value\",\n    \"minValue\",\n    \"maxValue\",\n    \"isIndeterminate\",\n    \"size\",\n    \"staticColor\",\n    \"children\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"slot\",\n    \"ref\",\n    \"id\",\n    \"aria-label\",\n    \"aria-labelledby\",\n    \"aria-describedby\",\n    \"aria-details\",\n  ]);\n  const size = () => local.size ?? \"M\";\n  const isIndeterminate = () => local.isIndeterminate ?? false;\n  const isStaticColor = () => !!local.staticColor;\n  const state = (): ProgressCircleStyleState => ({\n    size: size(),\n    staticColor: local.staticColor,\n    isStaticColor: isStaticColor(),\n  });\n  const progressAria = createProgressBar({\n    get id() {\n      return local.id;\n    },\n    get value() {\n      return local.value;\n    },\n    get minValue() {\n      return local.minValue;\n    },\n    get maxValue() {\n      return local.maxValue;\n    },\n    get isIndeterminate() {\n      return isIndeterminate();\n    },\n    get \"aria-label\"() {\n      return local[\"aria-label\"];\n    },\n    get \"aria-labelledby\"() {\n      return local[\"aria-labelledby\"];\n    },\n    get \"aria-describedby\"() {\n      return local[\"aria-describedby\"];\n    },\n    get \"aria-details\"() {\n      return local[\"aria-details\"];\n    },\n  });\n  const percentage = createMemo(() => {\n    const minValue = local.minValue ?? 0;\n    const maxValue = local.maxValue ?? 100;\n    const value = clamp(local.value ?? 0, minValue, maxValue);\n    return ((value - minValue) / safeRange(minValue, maxValue)) * 100;\n  });\n  /* Value → block quantization. Indeterminate lights the whole ring and lets the\n   * staggered blink chase around it. The spec's hardcoded 10-lit/2-dithered split\n   * is generalized: the last two lit blocks dither while the ring is partial\n   * (work in flight has a leading edge; a full or empty ring has none). */\n  const litCount = createMemo(() =>\n    isIndeterminate()\n      ? RING_COUNT\n      : clamp(Math.round((percentage() / 100) * RING_COUNT), 0, RING_COUNT),\n  );\n  const geometry = () => RING_GEOMETRY[size()];\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n\n  return (\n    <div\n      {...getDataAttributes(merged)}\n      {...progressAria.progressBarProps}\n      data-rac=\"\"\n      ref={mergeContextRefs(\n        (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,\n        props.ref,\n      )}\n      class={[local.UNSAFE_className, wrapperStyles(state(), mergedStyles())]\n        .filter(Boolean)\n        .join(\" \")}\n      style={mergedUnsafeStyle()}\n      slot={local.slot ?? undefined}\n    >\n      <For each={geometry().positions}>\n        {(position, index) => {\n          const isLit = () => index() < litCount();\n          const isLead = () =>\n            !isIndeterminate() &&\n            litCount() > 0 &&\n            litCount() < RING_COUNT &&\n            isLit() &&\n            index() >= litCount() - 2;\n          return (\n            <div\n              aria-hidden=\"true\"\n              class={blockStyles({\n                ...state(),\n                isLit: isLit(),\n                isLead: isLead(),\n                isIndeterminate: isIndeterminate(),\n              })}\n              style={{\n                left: `${position.x}px`,\n                top: `${position.y}px`,\n                /* The spec's stagger: i × 0.16s inside the 2.6s loop. Inert when\n                 * the media gate zeroes the animation-name. */\n                \"animation-delay\": isLit() ? `${(index() * 0.16).toFixed(2)}s` : undefined,\n              }}\n            />\n          );\n        }}\n      </For>\n      {/* Read `children` exactly once per run — a repeated getter read\n        * re-instantiates the subtree and desyncs hydration keys. */}\n      {(() => {\n        const content = local.children;\n        return content != null ? <div class={centerStyles}>{content}</div> : undefined;\n      })()}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/progress/index.d.ts

@@ -0,0 +1,5 @@
+export { ProgressBar, ProgressBarContext } from "../progress-bar";
+export type { ProgressBarLabelPosition, ProgressBarProps, ProgressBarSize, ProgressBarStaticColor, } from "../progress-bar";
+export { ProgressCircle, ProgressCircleContext } from "./ProgressCircle";
+export type { ProgressCircleProps, ProgressCircleSize, ProgressCircleStaticColor, } from "./ProgressCircle";
+//# sourceMappingURL=index.d.ts.map

package/dist/progress/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/progress/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAClE,YAAY,EACV,wBAAwB,EACxB,gBAAgB,EAChB,eAAe,EACf,sBAAsB,GACvB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AACzE,YAAY,EACV,mBAAmB,EACnB,kBAAkB,EAClB,yBAAyB,GAC1B,MAAM,kBAAkB,CAAC"}

package/dist/progress/progress-circle-animation.d.ts

@@ -0,0 +1,2 @@
+export declare const s2ProgressCircleIndeterminateAnimation: string;
+//# sourceMappingURL=progress-circle-animation.d.ts.map

package/dist/progress/progress-circle-animation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-circle-animation.d.ts","sourceRoot":"","sources":["../../src/progress/progress-circle-animation.ts"],"names":[],"mappings":"AAsBA,eAAO,MAAM,sCAAsC,QAAkK,CAAC"}

package/dist/progress-bar/index.d.ts

@@ -0,0 +1,53 @@
+import { type JSX } from "solid-js";
+import type { StyleString } from "../style";
+import type { UnsafeClassName } from "../s2-internal/style-utils";
+import { type RefLike, type SpectrumContextValue } from "../button/spectrum-context";
+export type ProgressBarSize = "S" | "M" | "L" | "XL";
+export type ProgressBarStaticColor = "white" | "black" | "auto";
+export type ProgressBarLabelPosition = "top" | "side";
+export interface ProgressBarProps {
+    /** The current value. @default 0 */
+    value?: number;
+    /**
+     * A second value beyond `value` rendered as a dithered extension of the fill —
+     * the register's "in flight" segment (the XP bar's 6% checker after the 84%
+     * solid, TerminalGlassLab.tsx:773-780). Purely visual; the accessible value
+     * stays `value`. Ignored while indeterminate.
+     */
+    pendingValue?: number;
+    /** The smallest value allowed. @default 0 */
+    minValue?: number;
+    /** The largest value allowed. @default 100 */
+    maxValue?: number;
+    /** The content to display as the value's label, e.g. "1 of 4". */
+    valueLabel?: JSX.Element;
+    /** Whether presentation is indeterminate when progress isn't known. */
+    isIndeterminate?: boolean;
+    /** The display format of the value label. */
+    formatOptions?: Intl.NumberFormatOptions;
+    /** The size of the progress bar. @default 'M' */
+    size?: ProgressBarSize;
+    /** The label to display above or beside the progress bar. */
+    label?: JSX.Element;
+    /** The static color style to apply over a color background. */
+    staticColor?: ProgressBarStaticColor;
+    /** The label's overall position relative to the progress bar. @default 'top' */
+    labelPosition?: ProgressBarLabelPosition;
+    /** Spectrum-defined generated classes. */
+    styles?: StyleString | (() => StyleString | undefined);
+    /** Additional CSS class name. Use only as a last resort. */
+    UNSAFE_className?: UnsafeClassName | string;
+    /** Additional inline styles. Use only as a last resort. */
+    UNSAFE_style?: JSX.CSSProperties;
+    id?: string;
+    slot?: string | null;
+    ref?: RefLike<HTMLDivElement>;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-details"?: string;
+    [key: `data-${string}`]: string | undefined;
+}
+export declare const ProgressBarContext: import("solid-js").Context<SpectrumContextValue<ProgressBarProps>>;
+export declare function ProgressBar(props: ProgressBarProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/progress-bar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/progress-bar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,GAAG,EAOT,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAUlE,OAAO,EAKL,KAAK,OAAO,EACZ,KAAK,oBAAoB,EAC1B,MAAM,4BAA4B,CAAC;AAEpC,MAAM,MAAM,eAAe,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AACrD,MAAM,MAAM,sBAAsB,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAChE,MAAM,MAAM,wBAAwB,GAAG,KAAK,GAAG,MAAM,CAAC;AAEtD,MAAM,WAAW,gBAAgB;IAC/B,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kEAAkE;IAClE,UAAU,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACzB,uEAAuE;IACvE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,6CAA6C;IAC7C,aAAa,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC;IACzC,iDAAiD;IACjD,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACpB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,sBAAsB,CAAC;IACrC,gFAAgF;IAChF,aAAa,CAAC,EAAE,wBAAwB,CAAC;IACzC,0CAA0C;IAC1C,MAAM,CAAC,EAAE,WAAW,GAAG,CAAC,MAAM,WAAW,GAAG,SAAS,CAAC,CAAC;IACvD,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,eAAe,GAAG,MAAM,CAAC;IAC5C,2DAA2D;IAC3D,YAAY,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IACjC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,GAAG,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,GAAG,SAAS,CAAC;CAC7C;AAED,eAAO,MAAM,kBAAkB,oEAA8D,CAAC;AAiR9F,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAiJhE"}