@proyecto-viviana/ui 0.4.1 → 0.6.0

package/dist/labeledvalue/index.d.ts

@@ -0,0 +1,47 @@
+import { type JSX } from "solid-js";
+import type { StyleString } from "../style";
+export type LabeledValueSize = "S" | "M" | "L" | "XL";
+export type LabeledValueLabelPosition = "top" | "side";
+export type LabeledValueLabelAlign = "start" | "end";
+/** The value types LabeledValue can format. Dates are not yet supported (tracked). */
+export type LabeledValueValue = string | number | readonly string[] | JSX.Element;
+export interface LabeledValueProps {
+    /** The content to display as the label. */
+    label: JSX.Element;
+    /** The value to display. Numbers and string lists are formatted for the current locale. */
+    value?: LabeledValueValue;
+    /** Formatting options for the value (Intl.NumberFormat / Intl.ListFormat). */
+    formatOptions?: Intl.NumberFormatOptions | Intl.ListFormatOptions;
+    /**
+     * The size of the component.
+     * @default 'M'
+     */
+    size?: LabeledValueSize;
+    /**
+     * The label's position relative to the value.
+     * @default 'top'
+     */
+    labelPosition?: LabeledValueLabelPosition;
+    /**
+     * The label's horizontal alignment relative to the element.
+     * @default 'start'
+     */
+    labelAlign?: LabeledValueLabelAlign;
+    /** Inline style overrides for the root. */
+    UNSAFE_style?: JSX.CSSProperties;
+    /** Class name concatenated onto the root. */
+    UNSAFE_className?: string;
+    /** Spectrum style-macro overrides (width/height allowed). */
+    styles?: StyleString;
+}
+/**
+ * A LabeledValue displays a non-editable value with a label. It formats numbers and lists
+ * according to the user's locale.
+ *
+ * Faithful port of `@react-spectrum/s2` `LabeledValue`: the shared `field()` grid, a
+ * `FieldLabel` rendered as a `<span>`, and a value `<span>` styled with `fieldInput()` +
+ * `controlFont()`. `size` / `labelPosition` / `labelAlign` are inherited from an enclosing
+ * `Form` via `useFormProps` for any prop left undefined.
+ */
+export declare function LabeledValue(props: LabeledValueProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/labeledvalue/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAgC,MAAM,UAAU,CAAC;AAElE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAY5C,MAAM,MAAM,gBAAgB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AACtD,MAAM,MAAM,yBAAyB,GAAG,KAAK,GAAG,MAAM,CAAC;AACvD,MAAM,MAAM,sBAAsB,GAAG,OAAO,GAAG,KAAK,CAAC;AAErD,sFAAsF;AACtF,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC;AAYlF,MAAM,WAAW,iBAAiB;IAChC,2CAA2C;IAC3C,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,2FAA2F;IAC3F,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,8EAA8E;IAC9E,aAAa,CAAC,EAAE,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,iBAAiB,CAAC;IAClE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,aAAa,CAAC,EAAE,yBAAyB,CAAC;IAC1C;;;OAGG;IACH,UAAU,CAAC,EAAE,sBAAsB,CAAC;IACpC,2CAA2C;IAC3C,YAAY,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IACjC,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,6DAA6D;IAC7D,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAoDD;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAsFlE"}

package/dist/labeledvalue/index.js

@@ -0,0 +1,310 @@
+import { a as useIsInForm, i as useFormProps } from "../_chunk/form.js";
+/* empty css                                                                               */
+/* empty css                                                                               */
+/* empty css                                                                               */
+import { className, createComponent, effect, getNextElement, getNextMarker, insert, style, template } from "solid-js/web";
+import { Show, createMemo, splitProps } from "solid-js";
+import { NumberFormatter, useLocale } from "@proyecto-viviana/solidaria";
+//#region src/labeledvalue/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div><span>`), _tmpl$2 = /*#__PURE__*/ template(`<div><!$><!/><span>`);
+const fieldStyles = function anonymous(props, overrides) {
+	let rules = " ";
+	let gridColumnStart = false;
+	let gridColumnEnd = 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)[^\s]+/g);
+	for (let p of matches) {
+		if (p[1] === "z") gridColumnStart = true;
+		if (p[1] === "y") gridColumnEnd = true;
+		rules += p[0];
+	}
+	rules += " se151";
+	if (props.isInForm) {
+		if (!gridColumnStart) rules += " z2mU151";
+	}
+	if (props.isInForm) {
+		if (props.labelPosition === "side") {
+			if (!gridColumnEnd) rules += " yvoofG151";
+		}
+	}
+	if (props.isInForm) rules += " DLwlgod151";
+	else if (props.labelPosition === "side") rules += " DPlN5qb151";
+	else if (props.labelPosition === "top") rules += " DM8Mfn151";
+	if (props.labelPosition === "side") rules += " EPlN5qb151";
+	else if (props.labelPosition === "top") rules += " E4w1sLc151";
+	if (props.labelPosition === "side") rules += " CfFpp6c151";
+	else if (props.labelPosition === "top") rules += " C1xyRcb151";
+	if (props.size === "XL") {
+		rules += " -_6BNtrc-e151";
+		rules += " vx151";
+	} else if (props.size === "L") {
+		rules += " -_6BNtrc-d151";
+		rules += " vx151";
+	} else if (props.size === "S") {
+		rules += " -_6BNtrc-b151";
+		rules += " vx151";
+	} else if (props.size === "XS") {
+		rules += " -_6BNtrc-a151";
+		rules += " vx151";
+	} else {
+		rules += " -_6BNtrc-c151";
+		rules += " vx151";
+	}
+	rules += " ea151";
+	rules += " _Fd151";
+	rules += " _FnuYUweb151";
+	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 += " -AJjOLd-UVkF0Db151";
+	rules += " qg151";
+	rules += " __ca151";
+	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.isQuiet) rules += " _qd151";
+	else if (props.labelPosition === "top") rules += " _qb151";
+	return rules;
+};
+const labelStyles = function anonymous(props) {
+	let rules = " ";
+	rules += " uxe7h4151";
+	if (props.size === "XL") {
+		rules += " -_6BNtrc-e151";
+		rules += " vx151";
+	} else if (props.size === "L") {
+		rules += " -_6BNtrc-d151";
+		rules += " vx151";
+	} else if (props.size === "S") {
+		rules += " -_6BNtrc-b151";
+		rules += " vx151";
+	} else if (props.size === "XS") {
+		rules += " -_6BNtrc-a151";
+		rules += " vx151";
+	} else {
+		rules += " -_6BNtrc-c151";
+		rules += " vx151";
+	}
+	if (props.size === "XL") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else if (props.size === "L") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else if (props.size === "S") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else if (props.size === "XS") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else {
+		rules += " xb151";
+		rules += " _xa151";
+	}
+	if (props.size === "XL") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "L") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "S") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "XS") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	}
+	if (props.isStaticColor) rules += " pl151";
+	else if (props.isDisabled) rules += " pUvnvv151";
+	else rules += " pUUi0Fe151";
+	rules += " plb151";
+	rules += " ri151";
+	return rules;
+};
+const valueStyles = function anonymous(props) {
+	let rules = " ";
+	rules += " zXcEWr151";
+	rules += " yXcEWr151";
+	rules += " BXcEWr151";
+	rules += " AXcEWr151";
+	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";
+	if (props.isInForm) if (props.size === "XL") rules += " Mk151";
+	else if (props.size === "L") rules += " Mh151";
+	else if (props.size === "S") rules += " Mg151";
+	else if (props.size === "XS") rules += " Mf151";
+	else rules += " Mi151";
+	rules += " sd151";
+	rules += " eb151";
+	if (props.size === "XL") rules += " uxe7h4151";
+	else if (props.size === "L") rules += " uxe7h4151";
+	else if (props.size === "S") rules += " uxe7h4151";
+	else if (props.size === "XS") rules += " uxe7h4151";
+	else rules += " uxe7h4151";
+	if (props.size === "XL") {
+		rules += " -_6BNtrc-e151";
+		rules += " vx151";
+	} else if (props.size === "L") {
+		rules += " -_6BNtrc-d151";
+		rules += " vx151";
+	} else if (props.size === "S") {
+		rules += " -_6BNtrc-b151";
+		rules += " vx151";
+	} else if (props.size === "XS") {
+		rules += " -_6BNtrc-a151";
+		rules += " vx151";
+	} else {
+		rules += " -_6BNtrc-c151";
+		rules += " vx151";
+	}
+	if (props.size === "XL") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else if (props.size === "L") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else if (props.size === "S") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else if (props.size === "XS") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else {
+		rules += " xb151";
+		rules += " _xa151";
+	}
+	if (props.size === "XL") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "L") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "S") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "XS") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	}
+	if (props.size === "XL") rules += " pHKLAu151";
+	else if (props.size === "L") rules += " pHKLAu151";
+	else if (props.size === "S") rules += " pHKLAu151";
+	else if (props.size === "XS") rules += " pHKLAu151";
+	else rules += " pHKLAu151";
+	return rules;
+};
+/**
+* A LabeledValue displays a non-editable value with a label. It formats numbers and lists
+* according to the user's locale.
+*
+* Faithful port of `@react-spectrum/s2` `LabeledValue`: the shared `field()` grid, a
+* `FieldLabel` rendered as a `<span>`, and a value `<span>` styled with `fieldInput()` +
+* `controlFont()`. `size` / `labelPosition` / `labelAlign` are inherited from an enclosing
+* `Form` via `useFormProps` for any prop left undefined.
+*/
+function LabeledValue(props) {
+	const merged = useFormProps(props);
+	const isInForm = useIsInForm();
+	const locale = useLocale();
+	const [local] = splitProps(merged, [
+		"label",
+		"value",
+		"formatOptions",
+		"size",
+		"labelPosition",
+		"labelAlign",
+		"UNSAFE_style",
+		"UNSAFE_className",
+		"styles"
+	]);
+	const size = () => local.size ?? "M";
+	const labelPosition = () => local.labelPosition ?? "top";
+	const labelAlign = () => local.labelAlign ?? "start";
+	const formatted = createMemo(() => {
+		const value = local.value;
+		if (Array.isArray(value)) return new Intl.ListFormat(locale().locale, local.formatOptions).format(value);
+		if (typeof value === "number") return new NumberFormatter(locale().locale, local.formatOptions).format(value);
+		return value;
+	});
+	const rootClass = () => [local.UNSAFE_className, fieldStyles({
+		isInForm,
+		labelPosition: labelPosition(),
+		size: size()
+	}, local.styles)].filter(Boolean).join(" ");
+	return (() => {
+		var _el$ = getNextElement(_tmpl$2), _el$5 = _el$.firstChild, [_el$6, _co$] = getNextMarker(_el$5.nextSibling), _el$4 = _el$6.nextSibling;
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return local.label != null;
+			},
+			get children() {
+				var _el$2 = getNextElement(_tmpl$), _el$3 = _el$2.firstChild;
+				insert(_el$3, () => local.label);
+				effect((_p$) => {
+					var _v$ = labelWrapperStyles({
+						labelAlign: labelAlign(),
+						labelPosition: labelPosition()
+					}), _v$2 = labelStyles({
+						labelPosition: labelPosition(),
+						size: size(),
+						isStaticColor: false
+					});
+					_v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+					_v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0
+				});
+				return _el$2;
+			}
+		}), _el$6, _co$);
+		insert(_el$4, formatted);
+		effect((_p$) => {
+			var _v$3 = rootClass(), _v$4 = local.UNSAFE_style, _v$5 = valueStyles({
+				isInForm,
+				size: size(),
+				labelPosition: labelPosition()
+			});
+			_v$3 !== _p$.e && className(_el$, _p$.e = _v$3);
+			_p$.t = style(_el$, _v$4, _p$.t);
+			_v$5 !== _p$.a && className(_el$4, _p$.a = _v$5);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		});
+		return _el$;
+	})();
+}
+//#endregion
+export { LabeledValue };
+
+//# sourceMappingURL=index.js.map

package/dist/labeledvalue/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/labeledvalue/index.tsx"],"sourcesContent":["import { type JSX, Show, createMemo, splitProps } from \"solid-js\";\nimport { NumberFormatter, useLocale } from \"@proyecto-viviana/solidaria\";\nimport type { StyleString } from \"../style\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport {\n  controlFont,\n  controlSize,\n  field,\n  fieldInput,\n  fieldLabel,\n  getAllowedOverrides,\n} from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport { useFormProps, useIsInForm } from \"../form\";\n\nexport type LabeledValueSize = \"S\" | \"M\" | \"L\" | \"XL\";\nexport type LabeledValueLabelPosition = \"top\" | \"side\";\nexport type LabeledValueLabelAlign = \"start\" | \"end\";\n\n/** The value types LabeledValue can format. Dates are not yet supported (tracked). */\nexport type LabeledValueValue = string | number | readonly string[] | JSX.Element;\n\ninterface LabeledValueStyleProps {\n  labelPosition?: LabeledValueLabelPosition;\n  labelAlign?: LabeledValueLabelAlign;\n  size?: LabeledValueSize;\n  isInForm?: boolean;\n  isDisabled?: boolean;\n  isStaticColor?: boolean;\n  isQuiet?: boolean;\n}\n\nexport interface LabeledValueProps {\n  /** The content to display as the label. */\n  label: JSX.Element;\n  /** The value to display. Numbers and string lists are formatted for the current locale. */\n  value?: LabeledValueValue;\n  /** Formatting options for the value (Intl.NumberFormat / Intl.ListFormat). */\n  formatOptions?: Intl.NumberFormatOptions | Intl.ListFormatOptions;\n  /**\n   * The size of the component.\n   * @default 'M'\n   */\n  size?: LabeledValueSize;\n  /**\n   * The label's position relative to the value.\n   * @default 'top'\n   */\n  labelPosition?: LabeledValueLabelPosition;\n  /**\n   * The label's horizontal alignment relative to the element.\n   * @default 'start'\n   */\n  labelAlign?: LabeledValueLabelAlign;\n  /** Inline style overrides for the root. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Class name concatenated onto the root. */\n  UNSAFE_className?: string;\n  /** Spectrum style-macro overrides (width/height allowed). */\n  styles?: StyleString;\n}\n\n// Mirrors upstream S2 `LabeledValue.tsx` `fieldStyles` — the shared field() grid, with the\n// width/height style-macro overrides allowed (upstream `getAllowedOverrides()`).\nconst fieldStyles = style<LabeledValueStyleProps>(\n  {\n    ...field(),\n  },\n  getAllowedOverrides(),\n);\n\n// Mirrors upstream `FieldLabel`'s wrapper <div> (gridArea label + text-align + top padding +\n// containment). LabeledValue renders the label as a <span> (elementType=\"span\") with no\n// necessity indicator (LabeledValueBaseProps omits isRequired/necessityIndicator).\nconst labelWrapperStyles = style<LabeledValueStyleProps>({\n  gridArea: \"label\",\n  display: \"inline\",\n  textAlign: {\n    labelAlign: {\n      start: \"start\",\n      end: \"end\",\n    },\n  },\n  paddingBottom: {\n    labelPosition: {\n      top: \"--field-gap\",\n    },\n  },\n  contain: {\n    labelPosition: {\n      top: \"inline-size\",\n    },\n    isQuiet: \"none\",\n  },\n});\n\n// Mirrors upstream `fieldLabel()` — the label's font + neutral-subdued color.\nconst labelStyles = style<LabeledValueStyleProps>({\n  ...fieldLabel(),\n});\n\n// Byte-identical to upstream `LabeledValue.tsx` `valueStyles`.\nconst valueStyles = style<LabeledValueStyleProps>({\n  ...fieldInput(),\n  minHeight: {\n    isInForm: controlSize(),\n  },\n  display: \"flex\",\n  alignItems: \"center\",\n  font: controlFont(),\n});\n\n/**\n * A LabeledValue displays a non-editable value with a label. It formats numbers and lists\n * according to the user's locale.\n *\n * Faithful port of `@react-spectrum/s2` `LabeledValue`: the shared `field()` grid, a\n * `FieldLabel` rendered as a `<span>`, and a value `<span>` styled with `fieldInput()` +\n * `controlFont()`. `size` / `labelPosition` / `labelAlign` are inherited from an enclosing\n * `Form` via `useFormProps` for any prop left undefined.\n */\nexport function LabeledValue(props: LabeledValueProps): JSX.Element {\n  const merged = useFormProps(props);\n  const isInForm = useIsInForm();\n  const locale = useLocale();\n  const [local] = splitProps(merged, [\n    \"label\",\n    \"value\",\n    \"formatOptions\",\n    \"size\",\n    \"labelPosition\",\n    \"labelAlign\",\n    \"UNSAFE_style\",\n    \"UNSAFE_className\",\n    \"styles\",\n  ]);\n\n  const size = () => local.size ?? \"M\";\n  const labelPosition = () => local.labelPosition ?? \"top\";\n  const labelAlign = () => local.labelAlign ?? \"start\";\n\n  // Format the value the same way upstream does (useNumberFormatter / useListFormatter, both\n  // Intl-backed): numbers via NumberFormatter, string lists via Intl.ListFormat, strings and\n  // elements as-is. Reactive to both the value and the locale.\n  const formatted = createMemo<JSX.Element>(() => {\n    const value = local.value;\n    if (Array.isArray(value)) {\n      return new Intl.ListFormat(\n        locale().locale,\n        local.formatOptions as Intl.ListFormatOptions | undefined,\n      ).format(value as string[]);\n    }\n    if (typeof value === \"number\") {\n      return new NumberFormatter(\n        locale().locale,\n        local.formatOptions as Intl.NumberFormatOptions | undefined,\n      ).format(value);\n    }\n    return value as JSX.Element;\n  });\n\n  const rootClass = () =>\n    [\n      local.UNSAFE_className,\n      fieldStyles(\n        {\n          isInForm,\n          labelPosition: labelPosition(),\n          size: size(),\n        },\n        local.styles,\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  return (\n    <div class={rootClass()} style={local.UNSAFE_style}>\n      <Show when={local.label != null}>\n        <div\n          class={labelWrapperStyles({\n            labelAlign: labelAlign(),\n            labelPosition: labelPosition(),\n          })}\n        >\n          <span\n            class={labelStyles({\n              labelPosition: labelPosition(),\n              size: size(),\n              isStaticColor: false,\n            })}\n          >\n            {local.label}\n          </span>\n        </div>\n      </Show>\n      <span\n        class={valueStyles({\n          isInForm,\n          size: size(),\n          labelPosition: labelPosition(),\n        })}\n      >\n        {formatted()}\n      </span>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AA+DA,MAAM,cAAA,SAAA,UAAA,OAAA,WAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUN,MAAM,qBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;AAuBN,MAAM,cAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKN,MAAM,cAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBN,SAAgB,aAAa,OAA+B;CAC1D,MAAM,SAAS,aAAa,KAAA;CAC5B,MAAM,WAAW,YAAA;CACjB,MAAM,SAAS,UAAA;CACf,MAAM,CAAC,SAAS,WAAW,QAAQ;EACjC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAA,CACD;CAED,MAAM,aAAa,MAAM,QAAQ;CACjC,MAAM,sBAAsB,MAAM,iBAAiB;CACnD,MAAM,mBAAmB,MAAM,cAAc;CAK7C,MAAM,YAAY,iBAAwB;EACxC,MAAM,QAAQ,MAAM;EACpB,IAAI,MAAM,QAAQ,KAAA,GAChB,OAAO,IAAI,KAAK,WACd,OAAA,EAAS,QACT,MAAM,aAAmD,EACzD,OAAO,KAAe;EAE1B,IAAI,OAAO,UAAU,UACnB,OAAO,IAAI,gBACT,OAAA,EAAS,QACT,MAAM,aAAqD,EAC3D,OAAO,KAAA;EAEX,OAAO;CACT,CAAA;CAEA,MAAM,kBACJ,CACE,MAAM,kBACN,YACE;EACE;EACA,eAAe,cAAA;EACf,MAAM,KAAA;CACR,GACA,MAAM,MAAM,CAAA,EAGb,OAAO,OAAA,EACP,KAAK,GAAA;CAEV,cAAA;EAAA,IAAA,OAAA,eAAA,OAAA,GAAA,QAAA,KAAA,YAAA,CAAA,OAAA,QAAA,cAAA,MAAA,WAAA,GAAA,QAAA,MAAA;EAAA,OAAA,MAAA,gBAEK,MAAA;GAAA,IAAK,OAAA;IAAA,OAAM,MAAM,SAAS;GAAA;GAAA,IAAA,WAAA;IAAA,IAAA,QAAA,eAAA,MAAA,GAAA,QAAA,MAAA;IAAA,OAAA,aAcpB,MAAM,KAAK;IAAA,QAAA,QAAA;KAAA,IAAA,MAZP,mBAAmB;MACxB,YAAY,WAAA;MACZ,eAAe,cAAA;KACjB,CAAA,GAAA,OAGS,YAAY;MACjB,eAAe,cAAA;MACf,MAAM,KAAA;MACN,eAAe;KACjB,CAAA;KAAA,QAAA,IAAA,KAAA,UAAA,OAAA,IAAA,IAAA,GAAA;KAAA,SAAA,IAAA,KAAA,UAAA,OAAA,IAAA,IAAA,IAAA;KAAA,OAAA;IAAA,GAAA;KAAA,GAAA,KAAA;KAAA,GAAA,KAAA;IAAA,CAAA;IAAA,OAAA;GAAA;EAAA,CAAA,GAAA,OAAA,IAAA;EAAA,OAAA,OAaH,SAAA;EAAA,QAAA,QAAA;GAAA,IAAA,OA1BO,UAAA,GAAA,OAAoB,MAAM,cAAY,OAoBvC,YAAY;IACjB;IACA,MAAM,KAAA;IACN,eAAe,cAAA;GACjB,CAAA;GAAA,SAAA,IAAA,KAAA,UAAA,MAAA,IAAA,IAAA,IAAA;GAAA,IAAA,IAAA,MAAA,MAAA,MAAA,IAAA,CAAA;GAAA,SAAA,IAAA,KAAA,UAAA,OAAA,IAAA,IAAA,IAAA;GAAA,OAAA;EAAA,GAAA;GAAA,GAAA,KAAA;GAAA,GAAA,KAAA;GAAA,GAAA,KAAA;EAAA,CAAA;EAAA,OAAA;CAAA,GAAA;AAMR"}

package/dist/labeledvalue/index.jsx

@@ -0,0 +1,281 @@
+import { a as useIsInForm, i as useFormProps } from "../_chunk/form.jsx";
+import { Show, createMemo, splitProps } from "solid-js";
+import { NumberFormatter, useLocale } from "@proyecto-viviana/solidaria";
+//#region src/labeledvalue/index.tsx
+const fieldStyles = function anonymous(props, overrides) {
+	let rules = " ";
+	let gridColumnStart = false;
+	let gridColumnEnd = 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)[^\s]+/g);
+	for (let p of matches) {
+		if (p[1] === "z") gridColumnStart = true;
+		if (p[1] === "y") gridColumnEnd = true;
+		rules += p[0];
+	}
+	rules += " se151";
+	if (props.isInForm) {
+		if (!gridColumnStart) rules += " z2mU151";
+	}
+	if (props.isInForm) {
+		if (props.labelPosition === "side") {
+			if (!gridColumnEnd) rules += " yvoofG151";
+		}
+	}
+	if (props.isInForm) rules += " DLwlgod151";
+	else if (props.labelPosition === "side") rules += " DPlN5qb151";
+	else if (props.labelPosition === "top") rules += " DM8Mfn151";
+	if (props.labelPosition === "side") rules += " EPlN5qb151";
+	else if (props.labelPosition === "top") rules += " E4w1sLc151";
+	if (props.labelPosition === "side") rules += " CfFpp6c151";
+	else if (props.labelPosition === "top") rules += " C1xyRcb151";
+	if (props.size === "XL") {
+		rules += " -_6BNtrc-e151";
+		rules += " vx151";
+	} else if (props.size === "L") {
+		rules += " -_6BNtrc-d151";
+		rules += " vx151";
+	} else if (props.size === "S") {
+		rules += " -_6BNtrc-b151";
+		rules += " vx151";
+	} else if (props.size === "XS") {
+		rules += " -_6BNtrc-a151";
+		rules += " vx151";
+	} else {
+		rules += " -_6BNtrc-c151";
+		rules += " vx151";
+	}
+	rules += " ea151";
+	rules += " _Fd151";
+	rules += " _FnuYUweb151";
+	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 += " -AJjOLd-UVkF0Db151";
+	rules += " qg151";
+	rules += " __ca151";
+	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.isQuiet) rules += " _qd151";
+	else if (props.labelPosition === "top") rules += " _qb151";
+	return rules;
+};
+const labelStyles = function anonymous(props) {
+	let rules = " ";
+	rules += " uxe7h4151";
+	if (props.size === "XL") {
+		rules += " -_6BNtrc-e151";
+		rules += " vx151";
+	} else if (props.size === "L") {
+		rules += " -_6BNtrc-d151";
+		rules += " vx151";
+	} else if (props.size === "S") {
+		rules += " -_6BNtrc-b151";
+		rules += " vx151";
+	} else if (props.size === "XS") {
+		rules += " -_6BNtrc-a151";
+		rules += " vx151";
+	} else {
+		rules += " -_6BNtrc-c151";
+		rules += " vx151";
+	}
+	if (props.size === "XL") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else if (props.size === "L") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else if (props.size === "S") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else if (props.size === "XS") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else {
+		rules += " xb151";
+		rules += " _xa151";
+	}
+	if (props.size === "XL") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "L") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "S") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "XS") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	}
+	if (props.isStaticColor) rules += " pl151";
+	else if (props.isDisabled) rules += " pUvnvv151";
+	else rules += " pUUi0Fe151";
+	rules += " plb151";
+	rules += " ri151";
+	return rules;
+};
+const valueStyles = function anonymous(props) {
+	let rules = " ";
+	rules += " zXcEWr151";
+	rules += " yXcEWr151";
+	rules += " BXcEWr151";
+	rules += " AXcEWr151";
+	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";
+	if (props.isInForm) if (props.size === "XL") rules += " Mk151";
+	else if (props.size === "L") rules += " Mh151";
+	else if (props.size === "S") rules += " Mg151";
+	else if (props.size === "XS") rules += " Mf151";
+	else rules += " Mi151";
+	rules += " sd151";
+	rules += " eb151";
+	if (props.size === "XL") rules += " uxe7h4151";
+	else if (props.size === "L") rules += " uxe7h4151";
+	else if (props.size === "S") rules += " uxe7h4151";
+	else if (props.size === "XS") rules += " uxe7h4151";
+	else rules += " uxe7h4151";
+	if (props.size === "XL") {
+		rules += " -_6BNtrc-e151";
+		rules += " vx151";
+	} else if (props.size === "L") {
+		rules += " -_6BNtrc-d151";
+		rules += " vx151";
+	} else if (props.size === "S") {
+		rules += " -_6BNtrc-b151";
+		rules += " vx151";
+	} else if (props.size === "XS") {
+		rules += " -_6BNtrc-a151";
+		rules += " vx151";
+	} else {
+		rules += " -_6BNtrc-c151";
+		rules += " vx151";
+	}
+	if (props.size === "XL") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else if (props.size === "L") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else if (props.size === "S") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else if (props.size === "XS") {
+		rules += " xb151";
+		rules += " _xa151";
+	} else {
+		rules += " xb151";
+		rules += " _xa151";
+	}
+	if (props.size === "XL") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "L") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "S") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "XS") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	}
+	if (props.size === "XL") rules += " pHKLAu151";
+	else if (props.size === "L") rules += " pHKLAu151";
+	else if (props.size === "S") rules += " pHKLAu151";
+	else if (props.size === "XS") rules += " pHKLAu151";
+	else rules += " pHKLAu151";
+	return rules;
+};
+/**
+* A LabeledValue displays a non-editable value with a label. It formats numbers and lists
+* according to the user's locale.
+*
+* Faithful port of `@react-spectrum/s2` `LabeledValue`: the shared `field()` grid, a
+* `FieldLabel` rendered as a `<span>`, and a value `<span>` styled with `fieldInput()` +
+* `controlFont()`. `size` / `labelPosition` / `labelAlign` are inherited from an enclosing
+* `Form` via `useFormProps` for any prop left undefined.
+*/ function LabeledValue(props) {
+	const merged = useFormProps(props);
+	const isInForm = useIsInForm();
+	const locale = useLocale();
+	const [local] = splitProps(merged, [
+		"label",
+		"value",
+		"formatOptions",
+		"size",
+		"labelPosition",
+		"labelAlign",
+		"UNSAFE_style",
+		"UNSAFE_className",
+		"styles"
+	]);
+	const size = () => local.size ?? "M";
+	const labelPosition = () => local.labelPosition ?? "top";
+	const labelAlign = () => local.labelAlign ?? "start";
+	const formatted = createMemo(() => {
+		const value = local.value;
+		if (Array.isArray(value)) return new Intl.ListFormat(locale().locale, local.formatOptions).format(value);
+		if (typeof value === "number") return new NumberFormatter(locale().locale, local.formatOptions).format(value);
+		return value;
+	});
+	const rootClass = () => [local.UNSAFE_className, fieldStyles({
+		isInForm,
+		labelPosition: labelPosition(),
+		size: size()
+	}, local.styles)].filter(Boolean).join(" ");
+	return <div class={rootClass()} style={local.UNSAFE_style}>
+      <Show when={local.label != null}>
+        <div class={labelWrapperStyles({
+		labelAlign: labelAlign(),
+		labelPosition: labelPosition()
+	})}>
+          <span class={labelStyles({
+		labelPosition: labelPosition(),
+		size: size(),
+		isStaticColor: false
+	})}>
+            {local.label}
+          </span>
+        </div>
+      </Show>
+      <span class={valueStyles({
+		isInForm,
+		size: size(),
+		labelPosition: labelPosition()
+	})}>
+        {formatted()}
+      </span>
+    </div>;
+}
+//#endregion
+export { LabeledValue };
+
+//# sourceMappingURL=index.jsx.map