@proyecto-viviana/ui 0.6.2 → 0.8.0-rc.0

package/dist/progress-bar/index.jsx

@@ -1,10 +1,25 @@
+/*
+* Copyright 2024 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ProgressBar.tsx
+import { t as mergeStyles } from "../_chunk/runtime.jsx";
 import { a as mergeContextUnsafeStyle, i as mergeContextStyles, n as getSlottedContextProps, r as mergeContextRefs } from "../_chunk/spectrum-context.jsx";
-import { createContext, createMemo, createUniqueId, mergeProps, splitProps, useContext } from "solid-js";
-import { createProgressBar, useLocale } from "@proyecto-viviana/solidaria";
+import { For, createContext, createMemo, createUniqueId, useContext } from "solid-js";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
+import { createProgressBar, mergeProps as mergeProps$1, useLocale } from "@proyecto-viviana/solidaria";
 //#region src/progress-bar/index.tsx
+const BRACKET_CELLS = 10;
+const BRACKET_FILLED = "▮";
+const BRACKET_EMPTY = "▯";
 const ProgressBarContext = createContext(null);
-const progressBarIndeterminateLtr = "VqLd1c";
-const progressBarIndeterminateRtl = "rXxI0";
 const wrapperStyles = function anonymous(props, overrides) {
 	let rules = " ";
 	let position = false;
@@ -17,228 +32,297 @@ const wrapperStyles = function anonymous(props, overrides) {
 		if (p[1] === "L") maxWidth = true;
 		rules += p[0];
 	}
-	if (props.staticColor === "white") rules += " -Ovbhqd-gcwrnr151";
-	else if (props.staticColor === "black") rules += " -Ovbhqd-g4hn3s151";
-	if (!position) rules += " _Pc151";
-	rules += " se151";
+	if (props.staticColor === "white") rules += " -Ovbhqd-gcwrnr17";
+	else if (props.staticColor === "black") rules += " -Ovbhqd-g4hn3s17";
+	if (!position) rules += " _Pc17";
+	rules += " se17";
 	if (props.isIndeterminate) {
-		if (props.labelPosition === "side") rules += " DPlN5qb151";
-		else if (props.labelPosition === "top") rules += " DM8Mfn151";
-	} else if (props.labelPosition === "side") rules += " D4w1sLc151";
-	else if (props.labelPosition === "top") rules += " Dxumf9b151";
+		if (props.labelPosition === "side") rules += " DPlN5qb17";
+		else if (props.labelPosition === "top") rules += " DM8Mfn17";
+	} else if (props.labelPosition === "side") rules += " D4w1sLc17";
+	else if (props.labelPosition === "top") rules += " Dxumf9b17";
 	if (props.isIndeterminate) {
-		if (props.labelPosition === "side") rules += " C2Yfxtb151";
-		else if (props.labelPosition === "top") rules += " C0vit9d151";
-	} else if (props.labelPosition === "side") rules += " Cvv4gue151";
-	else if (props.labelPosition === "top") rules += " Cc1xmg151";
-	rules += " ea151";
-	rules += " _Bb151";
-	if (!minWidth) rules += " Nl151";
-	if (!maxWidth) rules += " Lk151";
-	if (props.size === "XL") rules += " -BhX7R-Fz151";
-	else if (props.size === "L") rules += " -BhX7R-Fv151";
-	else if (props.size === "S") rules += " -BhX7R-Fp151";
-	else if (props.size === "XS") rules += " -BhX7R-Fn151";
-	else rules += " -BhX7R-Fx151";
-	rules += " -dTMmze-Fe151";
-	rules += " -AJjOLd-UCwrhQe151";
-	rules += " qg151";
+		if (props.labelPosition === "side") rules += " C2Yfxtb17";
+		else if (props.labelPosition === "top") rules += " C0vit9d17";
+	} else if (props.labelPosition === "side") rules += " Cvv4gue17";
+	else if (props.labelPosition === "top") rules += " Cc1xmg17";
+	rules += " ea17";
+	rules += " _Bb17";
+	if (!minWidth) rules += " Nl17";
+	if (!maxWidth) rules += " Lk17";
+	if (props.size === "XL") rules += " -BhX7R-Fz17";
+	else if (props.size === "L") rules += " -BhX7R-Fv17";
+	else if (props.size === "S") rules += " -BhX7R-Fp17";
+	else if (props.size === "XS") rules += " -BhX7R-Fn17";
+	else rules += " -BhX7R-Fx17";
+	rules += " -dTMmze-Fe17";
+	rules += " -AJjOLd-UCwrhQe17";
+	rules += " qg17";
 	return rules;
 };
 const labelWrapperStyles = function anonymous(props) {
 	let rules = " ";
-	rules += " zv6x9r151";
-	rules += " yv6x9r151";
-	rules += " Bv6x9r151";
-	rules += " Av6x9r151";
-	rules += " sf151";
-	if (props.labelAlign === "end") rules += " _Wb151";
-	else if (props.labelAlign === "start") rules += " _Wd151";
-	if (props.labelPosition === "top") rules += " QgOnRt151";
-	if (props.labelPosition === "top") rules += " _qb151";
+	rules += " zv6x9r17";
+	rules += " yv6x9r17";
+	rules += " Bv6x9r17";
+	rules += " Av6x9r17";
+	rules += " sf17";
+	if (props.labelAlign === "end") rules += " _Wb17";
+	else if (props.labelAlign === "start") rules += " _Wd17";
+	if (props.labelPosition === "top") rules += " QgOnRt17";
+	if (props.labelPosition === "top") rules += " _qb17";
 	return rules;
 };
 const labelStyles = function anonymous(props) {
 	let rules = " ";
-	rules += " uxe7h4151";
+	rules += " uxe7h417";
 	if (props.size === "XL") {
-		rules += " -_6BNtrc-e151";
-		rules += " vx151";
+		rules += " -_6BNtrc-e17";
+		rules += " vx17";
 	} else if (props.size === "L") {
-		rules += " -_6BNtrc-d151";
-		rules += " vx151";
+		rules += " -_6BNtrc-d17";
+		rules += " vx17";
 	} else if (props.size === "S") {
-		rules += " -_6BNtrc-b151";
-		rules += " vx151";
+		rules += " -_6BNtrc-b17";
+		rules += " vx17";
 	} else if (props.size === "XS") {
-		rules += " -_6BNtrc-a151";
-		rules += " vx151";
+		rules += " -_6BNtrc-a17";
+		rules += " vx17";
 	} else {
-		rules += " -_6BNtrc-c151";
-		rules += " vx151";
+		rules += " -_6BNtrc-c17";
+		rules += " vx17";
 	}
 	if (props.size === "XL") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else if (props.size === "L") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else if (props.size === "S") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else if (props.size === "XS") {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	} else {
-		rules += " xb151";
-		rules += " _xa151";
+		rules += " xb17";
+		rules += " _xa17";
 	}
 	if (props.size === "XL") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "L") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "S") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "XS") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	}
-	if (props.isStaticColor) rules += " pl151";
-	else if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
-	rules += " plb151";
-	rules += " ri151";
+	if (props.isStaticColor) rules += " pl17";
+	else if (props.isDisabled) rules += " p8H6Pad17";
+	else rules += " ptacXCd17";
+	rules += " plb17";
+	rules += " ri17";
 	return rules;
 };
 const valueStyles = function anonymous(props) {
 	let rules = " ";
-	rules += " uxe7h4151";
+	rules += " uxe7h417";
 	if (props.size === "XL") {
-		rules += " -_6BNtrc-d151";
-		rules += " vx151";
+		rules += " -_6BNtrc-d17";
+		rules += " vx17";
 	} else if (props.size === "L") {
-		rules += " -_6BNtrc-c151";
-		rules += " vx151";
+		rules += " -_6BNtrc-c17";
+		rules += " vx17";
 	} else if (props.size === "S") {
-		rules += " -_6BNtrc-a151";
-		rules += " vx151";
+		rules += " -_6BNtrc-a17";
+		rules += " vx17";
 	} else if (props.size === "XS") {
-		rules += " -_6BNtrc-a151";
-		rules += " vx151";
+		rules += " -_6BNtrc-a17";
+		rules += " vx17";
 	} else {
-		rules += " -_6BNtrc-b151";
-		rules += " vx151";
+		rules += " -_6BNtrc-b17";
+		rules += " vx17";
 	}
-	rules += " xb151";
-	rules += " _xa151";
+	rules += " xb17";
+	rules += " _xa17";
 	if (props.size === "XL") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "L") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "S") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "XS") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	}
-	if (props.isStaticColor) rules += " pl151";
-	else if (props.isDisabled) rules += " pUvnvv151";
-	else rules += " pUUi0Fe151";
-	rules += " plb151";
-	rules += " ri151";
-	rules += " z8bmXs151";
-	rules += " y8bmXs151";
-	rules += " B8bmXs151";
-	rules += " A8bmXs151";
+	if (props.isStaticColor) rules += " pl17";
+	else if (props.isDisabled) rules += " p8H6Pad17";
+	else rules += " ptacXCd17";
+	rules += " plb17";
+	rules += " ri17";
+	rules += " z8bmXs17";
+	rules += " y8bmXs17";
+	rules += " B8bmXs17";
+	rules += " A8bmXs17";
 	return rules;
 };
 const trackStyles = function anonymous(props) {
 	let rules = " ";
-	rules += " zMY0fn151";
-	rules += " yMY0fn151";
-	rules += " BMY0fn151";
-	rules += " AMY0fn151";
-	if (props.size === "XL") rules += " Nl151";
-	else if (props.size === "L") rules += " Nj151";
-	else if (props.size === "S") rules += " Nf151";
-	else if (props.size === "XS") rules += " Ne151";
-	else rules += " Nk151";
-	if (props.isQuiet) rules += " _qd151";
-	else rules += " _qtb151";
-	if (props.size === "XL") rules += " -Anxdcc-Zt151";
-	else if (props.size === "L") rules += " -Anxdcc-ZStdtne151";
-	else if (props.size === "S") rules += " -Anxdcc-Zr151";
-	else rules += " -Anxdcc-Z3fn9H151";
-	rules += " __v6TNLWb151";
-	rules += " _Pc151";
-	rules += " _Nc151";
-	rules += " Pc151";
-	rules += " sd151";
-	rules += " od151";
-	rules += " nd151";
-	rules += " kd151";
-	rules += " jd151";
-	if (props.isStaticColor) rules += " gh151";
-	else rules += " gW36Rud151";
-	rules += " glb151";
-	rules += " _Ma151";
-	rules += " _Mlb151";
-	rules += " _Le151";
-	rules += " _Llf151";
-	rules += " Oj151";
-	rules += " Olb151";
-	rules += " _9c151";
-	if (props.size === "XL") rules += " Fj151";
-	else if (props.size === "L") rules += " Fi151";
-	else if (props.size === "M") rules += " Fg151";
-	else if (props.size === "S") rules += " Fe151";
-	else rules += " Fg151";
+	rules += " zMY0fn17";
+	rules += " yMY0fn17";
+	rules += " BMY0fn17";
+	rules += " AMY0fn17";
+	if (props.size === "XL") rules += " Nl17";
+	else if (props.size === "L") rules += " Nj17";
+	else if (props.size === "S") rules += " Nf17";
+	else if (props.size === "XS") rules += " Ne17";
+	else rules += " Nk17";
+	if (props.isQuiet) rules += " _qd17";
+	else rules += " _qtb17";
+	if (props.size === "XL") rules += " -Anxdcc-Zt17";
+	else if (props.size === "L") rules += " -Anxdcc-ZStdtne17";
+	else if (props.size === "S") rules += " -Anxdcc-Zr17";
+	else rules += " -Anxdcc-Z3fn9H17";
+	rules += " __v6TNLWb17";
+	rules += " _Pc17";
+	rules += " _Nc17";
+	rules += " Pc17";
+	rules += " sd17";
+	rules += " od17";
+	rules += " nd17";
+	rules += " kd17";
+	rules += " jd17";
+	if (props.isStaticColor) rules += " gh17";
+	else rules += " gW36Rud17";
+	rules += " glb17";
+	rules += " _Ma17";
+	rules += " _Mlb17";
+	rules += " _Le17";
+	rules += " _Llf17";
+	rules += " Oj17";
+	rules += " Olb17";
+	rules += " _9c17";
+	if (props.size === "XL") rules += " Fk17";
+	else if (props.size === "L") rules += " Fj17";
+	else if (props.size === "M") rules += " Fi17";
+	else if (props.size === "S") rules += " Fg17";
+	else rules += " Fi17";
 	return rules;
 };
-const trackRimStyles = " _Pa151 Wr151 _lr151 _Ar151 _zr151 _Ob151 oi151 ni151 ki151 ji151 _neYWWze151";
+const trackRimStyles = " _Pa17 Wr17 _lr17 _Ar17 _zr17 _Ob17 oi17 ni17 ki17 ji17 _nbkwzSb17";
 const fillStyles = function anonymous(props) {
 	let rules = " ";
-	rules += " Za151";
-	rules += " Fb151";
-	rules += " _je151";
-	rules += " od151";
-	rules += " nd151";
-	rules += " kd151";
-	rules += " jd151";
-	if (props.isStaticColor) rules += " gj151";
-	else rules += " gdeCgNc151";
-	rules += " glc151";
-	if (props.isIndeterminate) rules += " _0e151";
+	rules += " Za17";
+	rules += " Fb17";
+	rules += " _je17";
+	rules += " od17";
+	rules += " nd17";
+	rules += " kd17";
+	rules += " jd17";
+	if (props.isStaticColor) rules += " gj17";
+	else rules += " gpC4Gxe17";
+	rules += " glc17";
+	if (props.isIndeterminate) rules += " _0e17";
 	return rules;
 };
 const pendingStyles = function anonymous(props) {
 	let rules = " ";
-	rules += " Fb151";
-	rules += " _va151";
-	rules += " _je151";
-	rules += " od151";
-	rules += " nd151";
-	rules += " kd151";
-	rules += " jd151";
-	rules += " _iNW847b151";
-	rules += " __mrmLYsd151";
-	if (props.isStaticColor) rules += " -lMNcGb-gj151";
-	else rules += " -lMNcGb-gdeCgNc151";
-	rules += " -lMNcGb-lgc151";
+	rules += " Fb17";
+	rules += " _va17";
+	rules += " _je17";
+	rules += " od17";
+	rules += " nd17";
+	rules += " kd17";
+	rules += " jd17";
+	rules += " _iNW847b17";
+	rules += " __mrmLYsd17";
+	if (props.isStaticColor) rules += " -lMNcGb-gj17";
+	else rules += " -lMNcGb-gpC4Gxe17";
+	rules += " -lMNcGb-lgc17";
 	return rules;
 };
+const segmentStyles = " _Pc17 Fb17 sd17 _Nc17 Pc17 _va17";
+const bracketStyles = function anonymous(props) {
+	let rules = " ";
+	rules += " zMY0fn17";
+	rules += " yMY0fn17";
+	rules += " BMY0fn17";
+	rules += " AMY0fn17";
+	rules += " _dc17";
+	rules += " uxe7h417";
+	if (props.size === "XL") {
+		rules += " -_6BNtrc-d17";
+		rules += " vx17";
+	} else if (props.size === "L") {
+		rules += " -_6BNtrc-c17";
+		rules += " vx17";
+	} else if (props.size === "S") {
+		rules += " -_6BNtrc-a17";
+		rules += " vx17";
+	} else if (props.size === "XS") {
+		rules += " -_6BNtrc-a17";
+		rules += " vx17";
+	} else {
+		rules += " -_6BNtrc-b17";
+		rules += " vx17";
+	}
+	rules += " xb17";
+	rules += " _xa17";
+	rules += " _7c17";
+	if (props.isStaticColor) rules += " pk17";
+	else rules += " pwOLUue17";
+	rules += " plb17";
+	return rules;
+};
+/**
+* The bracket's glyph run for a percentage: filled cells, then empty ones, inside
+* literal brackets. Rounds rather than floors so a bar that is visually nearly full
+* does not read `▮▮▮▮▮▮▮▮▮▯` at 99%; 0 and 100 are exact because clamping happens on
+* the percentage before it arrives.
+*/ function bracketRun(percentage) {
+	const filled = clamp(Math.round(percentage / 100 * BRACKET_CELLS), 0, BRACKET_CELLS);
+	return `[${BRACKET_FILLED.repeat(filled)}${BRACKET_EMPTY.repeat(BRACKET_CELLS - filled)}]`;
+}
+/**
+* Turns the caller's relative weights into painted sections: each one carries its share
+* of the track's width plus the fraction of ITSELF that the fill and the pending dither
+* cover. Non-finite and non-positive weights are dropped (a zero-width section is not a
+* section), and fewer than two survivors means there is nothing to divide — the caller
+* gets the plain bar back rather than a single section pretending to be one.
+*/ function resolveSegments(weights, percentage, pendingWidth) {
+	if (!weights) return null;
+	const usable = weights.filter((weight) => Number.isFinite(weight) && weight > 0);
+	if (usable.length < 2) return null;
+	const total = usable.reduce((sum, weight) => sum + weight, 0);
+	const filledEnd = percentage;
+	const pendingEnd = percentage + pendingWidth;
+	let start = 0;
+	return usable.map((weight) => {
+		const width = weight / total * 100;
+		const end = start + width;
+		const fill = (clamp(filledEnd, start, end) - start) / width;
+		const pending = (clamp(pendingEnd, start, end) - start) / width - fill;
+		start = end;
+		return {
+			width,
+			fill: fill * 100,
+			pending: pending * 100
+		};
+	});
+}
 function clamp(value, min, max) {
 	return Math.min(Math.max(value, min), max);
 }
@@ -258,15 +342,25 @@ function getDataAttributes(source) {
 	}
 	return attributes;
 }
-function indeterminateAnimation(direction) {
-	return `${direction === "rtl" ? progressBarIndeterminateRtl : progressBarIndeterminateLtr} 1000ms cubic-bezier(.37, 0, .63, 1) infinite`;
-}
+const indeterminateAnimation = function anonymous(props) {
+	let rules = " ";
+	if (props.direction === "rtl") rules += " _gW08Bs17";
+	else if (props.direction === "ltr") rules += " _gQTm87d17";
+	rules += " _ea17";
+	rules += " _hb17";
+	rules += " __ea17";
+	rules += " _8d17";
+	rules += " _Pc17";
+	return rules;
+};
 function ProgressBar(props) {
 	const contextProps = getSlottedContextProps(useContext(ProgressBarContext), props.slot);
-	const merged = mergeProps(contextProps ?? {}, props);
+	const merged = mergeProps$1(contextProps ?? {}, props);
 	const [local] = splitProps(merged, [
 		"value",
 		"pendingValue",
+		"trackStyle",
+		"segments",
 		"minValue",
 		"maxValue",
 		"valueLabel",
@@ -299,7 +393,8 @@ function ProgressBar(props) {
 		labelPosition: labelPosition(),
 		labelAlign,
 		isStaticColor: isStaticColor(),
-		isIndeterminate: isIndeterminate()
+		isIndeterminate: isIndeterminate(),
+		hasSegments: segments() != null
 	});
 	const accessibleLabelledBy = () => local["aria-labelledby"] ?? (!local["aria-label"] && local.label ? labelId : void 0);
 	const progressAria = createProgressBar({
@@ -349,6 +444,8 @@ function ProgressBar(props) {
 		const pendingPercentage = (clamp(local.pendingValue, minValue, maxValue) - minValue) / safeRange(minValue, maxValue) * 100;
 		return Math.max(0, pendingPercentage - percentage());
 	});
+	const isBracket = () => local.trackStyle === "bracket" && !isIndeterminate();
+	const segments = createMemo(() => isIndeterminate() ? null : resolveSegments(local.segments, percentage(), pendingWidth() ?? 0));
 	const valueText = () => local.valueLabel ?? progressAria.progressBarProps["aria-valuetext"];
 	const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);
 	const mergedUnsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);
@@ -359,14 +456,20 @@ function ProgressBar(props) {
           </span>
         </div>}
       {local.label && !isIndeterminate() && <span class={valueStyles(state("end"))}>{valueText()}</span>}
-      <div class={trackStyles(state())}>
-        <div class={fillStyles(state())} style={{
-		width: isIndeterminate() ? void 0 : `${percentage()}%`,
-		animation: isIndeterminate() ? indeterminateAnimation(locale().direction) : void 0
-	}} />
-        {!isIndeterminate() && pendingWidth() != null && <div aria-hidden="true" class={pendingStyles(state())} style={{ width: `${pendingWidth()}%` }} />}
-        <div aria-hidden="true" class={trackRimStyles} />
-      </div>
+      {isBracket() ? <span aria-hidden="true" class={bracketStyles(state())}>
+          {bracketRun(percentage())}
+        </span> : <div class={trackStyles(state())}>
+          {segments() ? <For each={segments()}>
+              {(segment) => <div class={segmentStyles} style={{ width: `${segment.width}%` }}>
+                  <div class={fillStyles(state())} style={{ width: `${segment.fill}%` }} />
+                  {segment.pending > 0 && <div aria-hidden="true" class={pendingStyles(state())} style={{ width: `${segment.pending}%` }} />}
+                </div>}
+            </For> : <>
+              <div class={mergeStyles(fillStyles(state()), isIndeterminate() ? indeterminateAnimation({ direction: locale().direction }) : null)} style={{ width: isIndeterminate() ? void 0 : `${percentage()}%` }} />
+              {!isIndeterminate() && pendingWidth() != null && <div aria-hidden="true" class={pendingStyles(state())} style={{ width: `${pendingWidth()}%` }} />}
+            </>}
+          <div aria-hidden="true" class={trackRimStyles} />
+        </div>}
     </div>;
 }
 //#endregion