@proyecto-viviana/solidaria-components 0.5.0 → 0.7.0-rc.0

package/dist/Meter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Meter.js","names":["JSX","createContext","createMemo","splitProps","createMeter","AriaMeterProps","RenderChildren","ClassNameOrFunction","StyleOrFunction","SlotProps","useRenderProps","filterDOMProps","MeterRenderProps","percentage","valueText","MeterProps","children","class","style","MeterContext","clamp","value","min","max","Math","getSafeRange","range","Number","isFinite","Meter","props","Element","local","ariaProps","minValue","maxValue","meterAria","valueLabel","formatOptions","label","aria-label","aria-labelledby","aria-describedby","aria-details","clampedValue","meterProps","renderValues","renderProps","defaultClassName","domProps","global","_el$","_$getNextElement","_tmpl$","_$spread","_$mergeProps","slot","_$insert","renderChildren","_$runHydrationEvents"],"sources":["../src/Meter.tsx"],"sourcesContent":["/**\n * Meter component for solidaria-components\n *\n * Pre-wired headless meter component that combines aria hooks.\n * Port of react-aria-components/src/Meter.tsx\n *\n * Meters represent a quantity within a known range, or a fractional value.\n * Unlike progress bars, meters represent a current value rather than progress toward a goal.\n */\n\nimport { type JSX, createContext, createMemo, splitProps } from \"solid-js\";\nimport { createMeter, type AriaMeterProps } from \"@proyecto-viviana/solidaria\";\nimport {\n  type RenderChildren,\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type SlotProps,\n  useRenderProps,\n  filterDOMProps,\n} from \"./utils\";\n\nexport interface MeterRenderProps {\n  /** The value as a percentage between the minimum and maximum (0-100). */\n  percentage: number;\n  /** A formatted version of the value. */\n  valueText: string | undefined;\n}\n\nexport interface MeterProps extends AriaMeterProps, SlotProps {\n  /** The children of the component. A function may be provided to receive render props. */\n  children?: RenderChildren<MeterRenderProps>;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<MeterRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<MeterRenderProps>;\n}\n\nexport const MeterContext = createContext<MeterProps | null>(null);\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max);\n}\n\nfunction getSafeRange(min: number, max: number): number {\n  const range = max - min;\n  return Number.isFinite(range) && range > 0 ? range : 1;\n}\n\n/**\n * A meter represents a quantity within a known range, or a fractional value.\n * Unlike progress bars, meters represent a current value rather than progress toward a goal.\n *\n * @example\n * ```tsx\n * <Meter value={75}>\n *   {({ percentage, valueText }) => (\n *     <>\n *       <Label>Storage space</Label>\n *       <span>{valueText}</span>\n *       <div class=\"bar\" style={{ width: `${percentage}%` }} />\n *     </>\n *   )}\n * </Meter>\n * ```\n */\nexport function Meter(props: MeterProps): JSX.Element {\n  const [local, ariaProps] = splitProps(props, [\"children\", \"class\", \"style\", \"slot\"]);\n\n  const value = () => ariaProps.value ?? 0;\n  const minValue = () => ariaProps.minValue ?? 0;\n  const maxValue = () => ariaProps.maxValue ?? 100;\n\n  const meterAria = createMeter({\n    get value() {\n      return ariaProps.value;\n    },\n    get minValue() {\n      return ariaProps.minValue;\n    },\n    get maxValue() {\n      return ariaProps.maxValue;\n    },\n    get valueLabel() {\n      return ariaProps.valueLabel;\n    },\n    get formatOptions() {\n      return ariaProps.formatOptions;\n    },\n    get label() {\n      return ariaProps.label;\n    },\n    get \"aria-label\"() {\n      return ariaProps[\"aria-label\"];\n    },\n    get \"aria-labelledby\"() {\n      return ariaProps[\"aria-labelledby\"];\n    },\n    get \"aria-describedby\"() {\n      return ariaProps[\"aria-describedby\"];\n    },\n    get \"aria-details\"() {\n      return ariaProps[\"aria-details\"];\n    },\n  });\n\n  const percentage = createMemo(() => {\n    const clampedValue = clamp(value(), minValue(), maxValue());\n    return ((clampedValue - minValue()) / getSafeRange(minValue(), maxValue())) * 100;\n  });\n\n  const valueText = createMemo(() => {\n    return meterAria.meterProps[\"aria-valuetext\"] as string | undefined;\n  });\n\n  const renderValues = createMemo<MeterRenderProps>(() => ({\n    percentage: percentage(),\n    valueText: valueText(),\n  }));\n\n  const renderProps = useRenderProps(\n    {\n      get children() {\n        return props.children;\n      },\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-Meter\",\n    },\n    renderValues,\n  );\n\n  const domProps = createMemo(() => filterDOMProps(ariaProps, { global: true }));\n\n  return (\n    <div\n      {...domProps()}\n      {...meterAria.meterProps}\n      class={renderProps.class()}\n      style={renderProps.style()}\n      slot={local.slot}\n    >\n      {renderProps.renderChildren()}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAqCA,MAAamB,eAAelB,cAAiC,IAAI;AAEjE,SAASmB,MAAMC,OAAeC,KAAaC,KAAqB;CAC9D,OAAOC,KAAKF,IAAIE,KAAKD,IAAIF,OAAOC,GAAG,GAAGC,GAAG;AAC3C;AAEA,SAASE,aAAaH,KAAaC,KAAqB;CACtD,MAAMG,QAAQH,MAAMD;CACpB,OAAOK,OAAOC,SAASF,KAAK,KAAKA,QAAQ,IAAIA,QAAQ;AACvD;;;;;;;;;;;;;;;;;;AAmBA,SAAgBG,MAAMC,OAAgC;CACpD,MAAM,CAACE,OAAOC,aAAa9B,WAAW2B,OAAO;EAAC;EAAY;EAAS;EAAS;CAAM,CAAC;CAEnF,MAAMT,cAAcY,UAAUZ,SAAS;CACvC,MAAMa,iBAAiBD,UAAUC,YAAY;CAC7C,MAAMC,iBAAiBF,UAAUE,YAAY;CAE7C,MAAMC,YAAYhC,YAAY;EAC5B,IAAIiB,QAAQ;GACV,OAAOY,UAAUZ;EACnB;EACA,IAAIa,WAAW;GACb,OAAOD,UAAUC;EACnB;EACA,IAAIC,WAAW;GACb,OAAOF,UAAUE;EACnB;EACA,IAAIE,aAAa;GACf,OAAOJ,UAAUI;EACnB;EACA,IAAIC,gBAAgB;GAClB,OAAOL,UAAUK;EACnB;EACA,IAAIC,QAAQ;GACV,OAAON,UAAUM;EACnB;EACA,IAAI,eAAe;GACjB,OAAON,UAAU;EACnB;EACA,IAAI,oBAAoB;GACtB,OAAOA,UAAU;EACnB;EACA,IAAI,qBAAqB;GACvB,OAAOA,UAAU;EACnB;EACA,IAAI,iBAAiB;GACnB,OAAOA,UAAU;EACnB;CACF,CAAC;CAED,MAAMpB,aAAaX,iBAAiB;EAElC,QADqBkB,MAAMC,MAAM,GAAGa,SAAS,GAAGC,SAAS,CAChDS,IAAeV,SAAS,KAAKT,aAAaS,SAAS,GAAGC,SAAS,CAAC,IAAK;CAChF,CAAC;CAED,MAAMrB,YAAYZ,iBAAiB;EACjC,OAAOkC,UAAUS,WAAW;CAC9B,CAAC;CAED,MAAMC,eAAe5C,kBAAoC;EACvDW,YAAYA,WAAW;EACvBC,WAAWA,UAAU;CACvB,EAAE;CAEF,MAAMiC,cAAcrC,eAClB;EACE,IAAIM,WAAW;GACb,OAAOc,MAAMd;EACf;EACAC,OAAOe,MAAMf;EACbC,OAAOc,MAAMd;EACb8B,kBAAkB;CACpB,GACAF,YACF;CAEA,MAAMG,WAAW/C,iBAAiBS,eAAesB,WAAW,EAAEiB,QAAQ,KAAK,CAAC,CAAC;CAE7E,cAAA;EAAA,IAAAC,OAAAC,eAAAC,MAAA;EAAAC,OAAAH,MAAAI,WAEQN,gBACAb,UAAUS,YAAU;GAAA,KAAA,WAAA;IAAA,OACjBE,YAAY9B,MAAM;GAAC;GAAA,IAC1BC,QAAK;IAAA,OAAE6B,YAAY7B,MAAM;GAAC;GAAA,IAC1BsC,OAAI;IAAA,OAAExB,MAAMwB;GAAI;EAAA,CAAA,GAAA,OAAA,IAAA;EAAAC,OAAAN,YAEfJ,YAAYW,eAAe,CAAC;EAAAC,mBAAA;EAAA,OAAAR;CAAA,EAAA,CAAA;AAGnC"}
+{"version":3,"file":"Meter.js","names":["ref={ref}","<LabelContext value={labelContextValue}>{renderProps.renderChildren()}</LabelContext>","value={labelContextValue}","<div\n      {...domProps()}\n      {...meterAria.meterProps}\n      class={renderProps.class()}\n      style={renderProps.style()}\n      slot={local.slot ?? undefined}\n      ref={ref}\n    >\n      <LabelContext value={labelContextValue}>{renderProps.renderChildren()}</LabelContext>\n    </div>"],"sources":["../src/Meter.tsx"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/Meter.tsx\n\n/**\n * Meter component for solidaria-components\n *\n * Pre-wired headless meter component that combines aria hooks.\n * Port of react-aria-components/src/Meter.tsx\n *\n * Meters represent a quantity within a known range, or a fractional value.\n * Unlike progress bars, meters represent a current value rather than progress toward a goal.\n */\n\nimport { createContext, createMemo } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { createMeter, type AriaMeterProps } from \"@proyecto-viviana/solidaria\";\nimport { LabelContext, type LabelProps } from \"./Label\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n  type RenderChildren,\n  type ClassNameOrFunction,\n  type ContextValue,\n  type RefLike,\n  type StyleOrFunction,\n  type SlotProps,\n  useRenderProps,\n  filterDOMProps,\n  useContextProps,\n  useSlot,\n} from \"./utils\";\n\nexport interface MeterRenderProps {\n  /** The value as a percentage between the minimum and maximum (0-100). */\n  percentage: number;\n  /** A formatted version of the value. */\n  valueText: string | undefined;\n}\n\nexport interface MeterProps extends Omit<AriaMeterProps, \"label\">, SlotProps {\n  /** The children of the component. A function may be provided to receive render props. */\n  children?: RenderChildren<MeterRenderProps>;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<MeterRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<MeterRenderProps>;\n  /** A ref for the meter element. */\n  ref?: RefLike<HTMLDivElement>;\n}\n\nexport const MeterContext = createContext<ContextValue<MeterProps, HTMLDivElement>>(null);\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max);\n}\n\nfunction getSafeRange(min: number, max: number): number {\n  const range = max - min;\n  return Number.isFinite(range) && range > 0 ? range : 1;\n}\n\n/**\n * A meter represents a quantity within a known range, or a fractional value.\n * Unlike progress bars, meters represent a current value rather than progress toward a goal.\n *\n * @example\n * ```tsx\n * <Meter value={75}>\n *   {({ percentage, valueText }) => (\n *     <>\n *       <Label>Storage space</Label>\n *       <span>{valueText}</span>\n *       <div class=\"bar\" style={{ width: `${percentage}%` }} />\n *     </>\n *   )}\n * </Meter>\n * ```\n */\nexport function Meter(props: MeterProps): JSX.Element {\n  const [mergedProps, ref] = useContextProps(props, props.ref, MeterContext);\n  const [local, ariaProps] = splitProps(mergedProps, [\"children\", \"class\", \"style\", \"slot\", \"ref\"]);\n\n  const value = () => ariaProps.value ?? 0;\n  const minValue = () => ariaProps.minValue ?? 0;\n  const maxValue = () => ariaProps.maxValue ?? 100;\n  const hasExplicitLabel = () => Boolean(ariaProps[\"aria-label\"] || ariaProps[\"aria-labelledby\"]);\n  const [labelRef, hasLabel] = useSlot(!hasExplicitLabel());\n\n  const meterAria = createMeter({\n    get value() {\n      return ariaProps.value;\n    },\n    get minValue() {\n      return ariaProps.minValue;\n    },\n    get maxValue() {\n      return ariaProps.maxValue;\n    },\n    get valueLabel() {\n      return ariaProps.valueLabel;\n    },\n    get formatOptions() {\n      return ariaProps.formatOptions;\n    },\n    get label() {\n      return hasExplicitLabel() ? undefined : hasLabel();\n    },\n    get \"aria-label\"() {\n      return ariaProps[\"aria-label\"];\n    },\n    get \"aria-labelledby\"() {\n      return ariaProps[\"aria-labelledby\"];\n    },\n    get \"aria-describedby\"() {\n      return ariaProps[\"aria-describedby\"];\n    },\n    get \"aria-details\"() {\n      return ariaProps[\"aria-details\"];\n    },\n  });\n\n  const percentage = createMemo(() => {\n    const clampedValue = clamp(value(), minValue(), maxValue());\n    return ((clampedValue - minValue()) / getSafeRange(minValue(), maxValue())) * 100;\n  });\n\n  const valueText = createMemo(() => {\n    return meterAria.meterProps[\"aria-valuetext\"] as string | undefined;\n  });\n\n  const renderValues = createMemo<MeterRenderProps>(() => ({\n    percentage: percentage(),\n    valueText: valueText(),\n  }));\n\n  const renderProps = useRenderProps(\n    {\n      get children() {\n        return mergedProps.children;\n      },\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-Meter\",\n    },\n    renderValues,\n  );\n\n  const domProps = createMemo(() => filterDOMProps(ariaProps, { global: true }));\n  const labelContextValue: LabelProps = {\n    get id() {\n      return hasExplicitLabel() ? undefined : (meterAria.labelProps.id as string | undefined);\n    },\n    ref: labelRef,\n    elementType: \"span\",\n  };\n\n  return (\n    <div\n      {...domProps()}\n      {...meterAria.meterProps}\n      class={renderProps.class()}\n      style={renderProps.style()}\n      slot={local.slot ?? undefined}\n      ref={ref}\n    >\n      <LabelContext value={labelContextValue}>{renderProps.renderChildren()}</LabelContext>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DA,MAAa,eAAe,cAAwD,IAAI;AAExF,SAAS,MAAM,OAAe,KAAa,KAAqB;CAC9D,OAAO,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAC3C;AAEA,SAAS,aAAa,KAAa,KAAqB;CACtD,MAAM,QAAQ,MAAM;CACpB,OAAO,OAAO,SAAS,KAAK,KAAK,QAAQ,IAAI,QAAQ;AACvD;;;;;;;;;;;;;;;;;;AAmBA,SAAgB,MAAM,OAAgC;CACpD,MAAM,CAAC,aAAa,SAAO,gBAAgB,OAAO,MAAM,KAAK,YAAY;CACzE,MAAM,CAAC,OAAO,aAAa,WAAW,aAAa;EAAC;EAAY;EAAS;EAAS;EAAQ;CAAK,CAAC;CAEhG,MAAM,cAAc,UAAU,SAAS;CACvC,MAAM,iBAAiB,UAAU,YAAY;CAC7C,MAAM,iBAAiB,UAAU,YAAY;CAC7C,MAAM,yBAAyB,QAAQ,UAAU,iBAAiB,UAAU,kBAAkB;CAC9F,MAAM,CAAC,UAAU,YAAY,QAAQ,CAAC,iBAAiB,CAAC;CAExD,MAAM,YAAY,YAAY;EAC5B,IAAI,QAAQ;GACV,OAAO,UAAU;EACnB;EACA,IAAI,WAAW;GACb,OAAO,UAAU;EACnB;EACA,IAAI,WAAW;GACb,OAAO,UAAU;EACnB;EACA,IAAI,aAAa;GACf,OAAO,UAAU;EACnB;EACA,IAAI,gBAAgB;GAClB,OAAO,UAAU;EACnB;EACA,IAAI,QAAQ;GACV,OAAO,iBAAiB,IAAI,KAAA,IAAY,SAAS;EACnD;EACA,IAAI,eAAe;GACjB,OAAO,UAAU;EACnB;EACA,IAAI,oBAAoB;GACtB,OAAO,UAAU;EACnB;EACA,IAAI,qBAAqB;GACvB,OAAO,UAAU;EACnB;EACA,IAAI,iBAAiB;GACnB,OAAO,UAAU;EACnB;CACF,CAAC;CAED,MAAM,aAAa,iBAAiB;EAElC,QADqB,MAAM,MAAM,GAAG,SAAS,GAAG,SAAS,CAChD,IAAe,SAAS,KAAK,aAAa,SAAS,GAAG,SAAS,CAAC,IAAK;CAChF,CAAC;CAED,MAAM,YAAY,iBAAiB;EACjC,OAAO,UAAU,WAAW;CAC9B,CAAC;CAED,MAAM,eAAe,kBAAoC;EACvD,YAAY,WAAW;EACvB,WAAW,UAAU;CACvB,EAAE;CAEF,MAAM,cAAc,eAClB;EACE,IAAI,WAAW;GACb,OAAO,YAAY;EACrB;EACA,OAAO,MAAM;EACb,OAAO,MAAM;EACb,kBAAkB;CACpB,GACA,YACF;CAEA,MAAM,WAAW,iBAAiB,eAAe,WAAW,EAAE,QAAQ,KAAK,CAAC,CAAC;CAC7E,MAAM,oBAAgC;EACpC,IAAI,KAAK;GACP,OAAO,iBAAiB,IAAI,KAAA,IAAa,UAAU,WAAW;EAChE;EACA,KAAK;EACL,aAAa;CACf;CAGE,IAAA,OAAA,eAAA,MASK;CAHH,UAAA;EAAK,OAAA;CAAG,GAARA,IAAQ;;EALJ;QACJ;GAAI,OAAA,UAAU;EAAU;;GACxB,IAAA,UAAA;IAAO,OAAA,YAAY,MAAM;GAAC;GAC1B,IAAA,QAAA;IAAO,OAAA,YAAY,MAAM;GAAC;GAC1B,IAAA,OAAA;IAAM,OAAA,MAAM,QAAQ,KAAA;GAAS;;;CAL/B,OAAA,MAQEC,gBAAAA,cAAAA;EAAcC,OAAO;EAArB,IAAA,WAAA;GAAyC,OAAA,YAAY,eAAe;EAAgB;CACjF,CAAA,CAAA;CATL,mBASK;CAVP,OACEC;AAWJ"}

package/dist/Meter.jsx

@@ -1,6 +1,20 @@
-import { filterDOMProps, useRenderProps } from "./utils.jsx";
-import { createContext, createMemo, splitProps } from "solid-js";
+/*
+* Copyright 2022 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-aria-components/src/Meter.tsx
+import { filterDOMProps, useContextProps, useRenderProps, useSlot } from "./utils.jsx";
+import { n as LabelContext } from "./Label.jsx";
+import { createContext, createMemo } from "solid-js";
 import { createMeter } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 //#region src/Meter.tsx
 /**
 * Meter component for solidaria-components
@@ -37,15 +51,19 @@ function getSafeRange(min, max) {
 * ```
 */
 function Meter(props) {
-	const [local, ariaProps] = splitProps(props, [
+	const [mergedProps, ref] = useContextProps(props, props.ref, MeterContext);
+	const [local, ariaProps] = splitProps(mergedProps, [
 		"children",
 		"class",
 		"style",
-		"slot"
+		"slot",
+		"ref"
 	]);
 	const value = () => ariaProps.value ?? 0;
 	const minValue = () => ariaProps.minValue ?? 0;
 	const maxValue = () => ariaProps.maxValue ?? 100;
+	const hasExplicitLabel = () => Boolean(ariaProps["aria-label"] || ariaProps["aria-labelledby"]);
+	const [labelRef, hasLabel] = useSlot(!hasExplicitLabel());
 	const meterAria = createMeter({
 		get value() {
 			return ariaProps.value;
@@ -63,7 +81,7 @@ function Meter(props) {
 			return ariaProps.formatOptions;
 		},
 		get label() {
-			return ariaProps.label;
+			return hasExplicitLabel() ? void 0 : hasLabel();
 		},
 		get "aria-label"() {
 			return ariaProps["aria-label"];
@@ -90,15 +108,22 @@ function Meter(props) {
 	}));
 	const renderProps = useRenderProps({
 		get children() {
-			return props.children;
+			return mergedProps.children;
 		},
 		class: local.class,
 		style: local.style,
 		defaultClassName: "solidaria-Meter"
 	}, renderValues);
 	const domProps = createMemo(() => filterDOMProps(ariaProps, { global: true }));
-	return <div {...domProps()} {...meterAria.meterProps} class={renderProps.class()} style={renderProps.style()} slot={local.slot}>
-      {renderProps.renderChildren()}
+	const labelContextValue = {
+		get id() {
+			return hasExplicitLabel() ? void 0 : meterAria.labelProps.id;
+		},
+		ref: labelRef,
+		elementType: "span"
+	};
+	return <div {...domProps()} {...meterAria.meterProps} class={renderProps.class()} style={renderProps.style()} slot={local.slot ?? void 0} ref={ref}>
+      <LabelContext value={labelContextValue}>{renderProps.renderChildren()}</LabelContext>
     </div>;
 }
 //#endregion

package/dist/Meter.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Meter.jsx","names":[],"sources":["../src/Meter.tsx"],"sourcesContent":["/**\n * Meter component for solidaria-components\n *\n * Pre-wired headless meter component that combines aria hooks.\n * Port of react-aria-components/src/Meter.tsx\n *\n * Meters represent a quantity within a known range, or a fractional value.\n * Unlike progress bars, meters represent a current value rather than progress toward a goal.\n */\n\nimport { type JSX, createContext, createMemo, splitProps } from \"solid-js\";\nimport { createMeter, type AriaMeterProps } from \"@proyecto-viviana/solidaria\";\nimport {\n  type RenderChildren,\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type SlotProps,\n  useRenderProps,\n  filterDOMProps,\n} from \"./utils\";\n\nexport interface MeterRenderProps {\n  /** The value as a percentage between the minimum and maximum (0-100). */\n  percentage: number;\n  /** A formatted version of the value. */\n  valueText: string | undefined;\n}\n\nexport interface MeterProps extends AriaMeterProps, SlotProps {\n  /** The children of the component. A function may be provided to receive render props. */\n  children?: RenderChildren<MeterRenderProps>;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<MeterRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<MeterRenderProps>;\n}\n\nexport const MeterContext = createContext<MeterProps | null>(null);\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max);\n}\n\nfunction getSafeRange(min: number, max: number): number {\n  const range = max - min;\n  return Number.isFinite(range) && range > 0 ? range : 1;\n}\n\n/**\n * A meter represents a quantity within a known range, or a fractional value.\n * Unlike progress bars, meters represent a current value rather than progress toward a goal.\n *\n * @example\n * ```tsx\n * <Meter value={75}>\n *   {({ percentage, valueText }) => (\n *     <>\n *       <Label>Storage space</Label>\n *       <span>{valueText}</span>\n *       <div class=\"bar\" style={{ width: `${percentage}%` }} />\n *     </>\n *   )}\n * </Meter>\n * ```\n */\nexport function Meter(props: MeterProps): JSX.Element {\n  const [local, ariaProps] = splitProps(props, [\"children\", \"class\", \"style\", \"slot\"]);\n\n  const value = () => ariaProps.value ?? 0;\n  const minValue = () => ariaProps.minValue ?? 0;\n  const maxValue = () => ariaProps.maxValue ?? 100;\n\n  const meterAria = createMeter({\n    get value() {\n      return ariaProps.value;\n    },\n    get minValue() {\n      return ariaProps.minValue;\n    },\n    get maxValue() {\n      return ariaProps.maxValue;\n    },\n    get valueLabel() {\n      return ariaProps.valueLabel;\n    },\n    get formatOptions() {\n      return ariaProps.formatOptions;\n    },\n    get label() {\n      return ariaProps.label;\n    },\n    get \"aria-label\"() {\n      return ariaProps[\"aria-label\"];\n    },\n    get \"aria-labelledby\"() {\n      return ariaProps[\"aria-labelledby\"];\n    },\n    get \"aria-describedby\"() {\n      return ariaProps[\"aria-describedby\"];\n    },\n    get \"aria-details\"() {\n      return ariaProps[\"aria-details\"];\n    },\n  });\n\n  const percentage = createMemo(() => {\n    const clampedValue = clamp(value(), minValue(), maxValue());\n    return ((clampedValue - minValue()) / getSafeRange(minValue(), maxValue())) * 100;\n  });\n\n  const valueText = createMemo(() => {\n    return meterAria.meterProps[\"aria-valuetext\"] as string | undefined;\n  });\n\n  const renderValues = createMemo<MeterRenderProps>(() => ({\n    percentage: percentage(),\n    valueText: valueText(),\n  }));\n\n  const renderProps = useRenderProps(\n    {\n      get children() {\n        return props.children;\n      },\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-Meter\",\n    },\n    renderValues,\n  );\n\n  const domProps = createMemo(() => filterDOMProps(ariaProps, { global: true }));\n\n  return (\n    <div\n      {...domProps()}\n      {...meterAria.meterProps}\n      class={renderProps.class()}\n      style={renderProps.style()}\n      slot={local.slot}\n    >\n      {renderProps.renderChildren()}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAqCA,MAAa,eAAe,cAAiC,IAAI;AAEjE,SAAS,MAAM,OAAe,KAAa,KAAqB;CAC9D,OAAO,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAC3C;AAEA,SAAS,aAAa,KAAa,KAAqB;CACtD,MAAM,QAAQ,MAAM;CACpB,OAAO,OAAO,SAAS,KAAK,KAAK,QAAQ,IAAI,QAAQ;AACvD;;;;;;;;;;;;;;;;;;AAmBA,SAAgB,MAAM,OAAgC;CACpD,MAAM,CAAC,OAAO,aAAa,WAAW,OAAO;EAAC;EAAY;EAAS;EAAS;CAAM,CAAC;CAEnF,MAAM,cAAc,UAAU,SAAS;CACvC,MAAM,iBAAiB,UAAU,YAAY;CAC7C,MAAM,iBAAiB,UAAU,YAAY;CAE7C,MAAM,YAAY,YAAY;EAC5B,IAAI,QAAQ;GACV,OAAO,UAAU;EACnB;EACA,IAAI,WAAW;GACb,OAAO,UAAU;EACnB;EACA,IAAI,WAAW;GACb,OAAO,UAAU;EACnB;EACA,IAAI,aAAa;GACf,OAAO,UAAU;EACnB;EACA,IAAI,gBAAgB;GAClB,OAAO,UAAU;EACnB;EACA,IAAI,QAAQ;GACV,OAAO,UAAU;EACnB;EACA,IAAI,eAAe;GACjB,OAAO,UAAU;EACnB;EACA,IAAI,oBAAoB;GACtB,OAAO,UAAU;EACnB;EACA,IAAI,qBAAqB;GACvB,OAAO,UAAU;EACnB;EACA,IAAI,iBAAiB;GACnB,OAAO,UAAU;EACnB;CACF,CAAC;CAED,MAAM,aAAa,iBAAiB;EAElC,QADqB,MAAM,MAAM,GAAG,SAAS,GAAG,SAAS,CACrC,IAAI,SAAS,KAAK,aAAa,SAAS,GAAG,SAAS,CAAC,IAAK;CAChF,CAAC;CAED,MAAM,YAAY,iBAAiB;EACjC,OAAO,UAAU,WAAW;CAC9B,CAAC;CAED,MAAM,eAAe,kBAAoC;EACvD,YAAY,WAAW;EACvB,WAAW,UAAU;CACvB,EAAE;CAEF,MAAM,cAAc,eAClB;EACE,IAAI,WAAW;GACb,OAAO,MAAM;EACf;EACA,OAAO,MAAM;EACb,OAAO,MAAM;EACb,kBAAkB;CACpB,GACA,YACF;CAEA,MAAM,WAAW,iBAAiB,eAAe,WAAW,EAAE,QAAQ,KAAK,CAAC,CAAC;CAE7E,OACE,CAAC,QACK,SAAS,OACT,UAAU,YACd,OAAO,YAAY,MAAM,GACzB,OAAO,YAAY,MAAM,GACzB,MAAM,MAAM,MACb;OACE,YAAY,eAAe,EAAE;IAChC,EAAE;AAEN"}
+{"version":3,"file":"Meter.jsx","names":[],"sources":["../src/Meter.tsx"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/Meter.tsx\n\n/**\n * Meter component for solidaria-components\n *\n * Pre-wired headless meter component that combines aria hooks.\n * Port of react-aria-components/src/Meter.tsx\n *\n * Meters represent a quantity within a known range, or a fractional value.\n * Unlike progress bars, meters represent a current value rather than progress toward a goal.\n */\n\nimport { createContext, createMemo } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { createMeter, type AriaMeterProps } from \"@proyecto-viviana/solidaria\";\nimport { LabelContext, type LabelProps } from \"./Label\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n  type RenderChildren,\n  type ClassNameOrFunction,\n  type ContextValue,\n  type RefLike,\n  type StyleOrFunction,\n  type SlotProps,\n  useRenderProps,\n  filterDOMProps,\n  useContextProps,\n  useSlot,\n} from \"./utils\";\n\nexport interface MeterRenderProps {\n  /** The value as a percentage between the minimum and maximum (0-100). */\n  percentage: number;\n  /** A formatted version of the value. */\n  valueText: string | undefined;\n}\n\nexport interface MeterProps extends Omit<AriaMeterProps, \"label\">, SlotProps {\n  /** The children of the component. A function may be provided to receive render props. */\n  children?: RenderChildren<MeterRenderProps>;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<MeterRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<MeterRenderProps>;\n  /** A ref for the meter element. */\n  ref?: RefLike<HTMLDivElement>;\n}\n\nexport const MeterContext = createContext<ContextValue<MeterProps, HTMLDivElement>>(null);\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max);\n}\n\nfunction getSafeRange(min: number, max: number): number {\n  const range = max - min;\n  return Number.isFinite(range) && range > 0 ? range : 1;\n}\n\n/**\n * A meter represents a quantity within a known range, or a fractional value.\n * Unlike progress bars, meters represent a current value rather than progress toward a goal.\n *\n * @example\n * ```tsx\n * <Meter value={75}>\n *   {({ percentage, valueText }) => (\n *     <>\n *       <Label>Storage space</Label>\n *       <span>{valueText}</span>\n *       <div class=\"bar\" style={{ width: `${percentage}%` }} />\n *     </>\n *   )}\n * </Meter>\n * ```\n */\nexport function Meter(props: MeterProps): JSX.Element {\n  const [mergedProps, ref] = useContextProps(props, props.ref, MeterContext);\n  const [local, ariaProps] = splitProps(mergedProps, [\"children\", \"class\", \"style\", \"slot\", \"ref\"]);\n\n  const value = () => ariaProps.value ?? 0;\n  const minValue = () => ariaProps.minValue ?? 0;\n  const maxValue = () => ariaProps.maxValue ?? 100;\n  const hasExplicitLabel = () => Boolean(ariaProps[\"aria-label\"] || ariaProps[\"aria-labelledby\"]);\n  const [labelRef, hasLabel] = useSlot(!hasExplicitLabel());\n\n  const meterAria = createMeter({\n    get value() {\n      return ariaProps.value;\n    },\n    get minValue() {\n      return ariaProps.minValue;\n    },\n    get maxValue() {\n      return ariaProps.maxValue;\n    },\n    get valueLabel() {\n      return ariaProps.valueLabel;\n    },\n    get formatOptions() {\n      return ariaProps.formatOptions;\n    },\n    get label() {\n      return hasExplicitLabel() ? undefined : hasLabel();\n    },\n    get \"aria-label\"() {\n      return ariaProps[\"aria-label\"];\n    },\n    get \"aria-labelledby\"() {\n      return ariaProps[\"aria-labelledby\"];\n    },\n    get \"aria-describedby\"() {\n      return ariaProps[\"aria-describedby\"];\n    },\n    get \"aria-details\"() {\n      return ariaProps[\"aria-details\"];\n    },\n  });\n\n  const percentage = createMemo(() => {\n    const clampedValue = clamp(value(), minValue(), maxValue());\n    return ((clampedValue - minValue()) / getSafeRange(minValue(), maxValue())) * 100;\n  });\n\n  const valueText = createMemo(() => {\n    return meterAria.meterProps[\"aria-valuetext\"] as string | undefined;\n  });\n\n  const renderValues = createMemo<MeterRenderProps>(() => ({\n    percentage: percentage(),\n    valueText: valueText(),\n  }));\n\n  const renderProps = useRenderProps(\n    {\n      get children() {\n        return mergedProps.children;\n      },\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-Meter\",\n    },\n    renderValues,\n  );\n\n  const domProps = createMemo(() => filterDOMProps(ariaProps, { global: true }));\n  const labelContextValue: LabelProps = {\n    get id() {\n      return hasExplicitLabel() ? undefined : (meterAria.labelProps.id as string | undefined);\n    },\n    ref: labelRef,\n    elementType: \"span\",\n  };\n\n  return (\n    <div\n      {...domProps()}\n      {...meterAria.meterProps}\n      class={renderProps.class()}\n      style={renderProps.style()}\n      slot={local.slot ?? undefined}\n      ref={ref}\n    >\n      <LabelContext value={labelContextValue}>{renderProps.renderChildren()}</LabelContext>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DA,MAAa,eAAe,cAAwD,IAAI;AAExF,SAAS,MAAM,OAAe,KAAa,KAAqB;CAC9D,OAAO,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAC3C;AAEA,SAAS,aAAa,KAAa,KAAqB;CACtD,MAAM,QAAQ,MAAM;CACpB,OAAO,OAAO,SAAS,KAAK,KAAK,QAAQ,IAAI,QAAQ;AACvD;;;;;;;;;;;;;;;;;;AAmBA,SAAgB,MAAM,OAAgC;CACpD,MAAM,CAAC,aAAa,OAAO,gBAAgB,OAAO,MAAM,KAAK,YAAY;CACzE,MAAM,CAAC,OAAO,aAAa,WAAW,aAAa;EAAC;EAAY;EAAS;EAAS;EAAQ;CAAK,CAAC;CAEhG,MAAM,cAAc,UAAU,SAAS;CACvC,MAAM,iBAAiB,UAAU,YAAY;CAC7C,MAAM,iBAAiB,UAAU,YAAY;CAC7C,MAAM,yBAAyB,QAAQ,UAAU,iBAAiB,UAAU,kBAAkB;CAC9F,MAAM,CAAC,UAAU,YAAY,QAAQ,CAAC,iBAAiB,CAAC;CAExD,MAAM,YAAY,YAAY;EAC5B,IAAI,QAAQ;GACV,OAAO,UAAU;EACnB;EACA,IAAI,WAAW;GACb,OAAO,UAAU;EACnB;EACA,IAAI,WAAW;GACb,OAAO,UAAU;EACnB;EACA,IAAI,aAAa;GACf,OAAO,UAAU;EACnB;EACA,IAAI,gBAAgB;GAClB,OAAO,UAAU;EACnB;EACA,IAAI,QAAQ;GACV,OAAO,iBAAiB,IAAI,KAAA,IAAY,SAAS;EACnD;EACA,IAAI,eAAe;GACjB,OAAO,UAAU;EACnB;EACA,IAAI,oBAAoB;GACtB,OAAO,UAAU;EACnB;EACA,IAAI,qBAAqB;GACvB,OAAO,UAAU;EACnB;EACA,IAAI,iBAAiB;GACnB,OAAO,UAAU;EACnB;CACF,CAAC;CAED,MAAM,aAAa,iBAAiB;EAElC,QADqB,MAAM,MAAM,GAAG,SAAS,GAAG,SAAS,CACrC,IAAI,SAAS,KAAK,aAAa,SAAS,GAAG,SAAS,CAAC,IAAK;CAChF,CAAC;CAED,MAAM,YAAY,iBAAiB;EACjC,OAAO,UAAU,WAAW;CAC9B,CAAC;CAED,MAAM,eAAe,kBAAoC;EACvD,YAAY,WAAW;EACvB,WAAW,UAAU;CACvB,EAAE;CAEF,MAAM,cAAc,eAClB;EACE,IAAI,WAAW;GACb,OAAO,YAAY;EACrB;EACA,OAAO,MAAM;EACb,OAAO,MAAM;EACb,kBAAkB;CACpB,GACA,YACF;CAEA,MAAM,WAAW,iBAAiB,eAAe,WAAW,EAAE,QAAQ,KAAK,CAAC,CAAC;CAC7E,MAAM,oBAAgC;EACpC,IAAI,KAAK;GACP,OAAO,iBAAiB,IAAI,KAAA,IAAa,UAAU,WAAW;EAChE;EACA,KAAK;EACL,aAAa;CACf;CAEA,OACE,CAAC,QACK,SAAS,OACT,UAAU,YACd,OAAO,YAAY,MAAM,GACzB,OAAO,YAAY,MAAM,GACzB,MAAM,MAAM,QAAQ,KAAA,GACpB,KAAK,KACN;MACC,CAAC,aAAa,OAAO,oBAAoB,YAAY,eAAe,EAAE,EAAE,aAAa;IACvF,EAAE;AAEN"}

package/dist/Modal.d.ts

@@ -1,10 +1,4 @@
-/**
- * Modal and ModalOverlay components for solidaria-components
- *
- * Headless modal components with overlay, focus trapping, and dismissal handling.
- * Port of react-aria-components Modal.
- */
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { type RenderChildren, type ClassNameOrFunction, type StyleOrFunction } from "./utils";
 import { type OverlayTriggerState } from "./contexts";
 export interface ModalRenderProps {

package/dist/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../src/Modal.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EACL,KAAK,GAAG,EAST,MAAM,UAAU,CAAC;AAUlB,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,eAAe,EAKrB,MAAM,SAAS,CAAC;AACjB,OAAO,EAGL,KAAK,mBAAmB,EACzB,MAAM,YAAY,CAAC;AAiCpB,MAAM,WAAW,gBAAgB;IAC/B,gEAAgE;IAChE,UAAU,EAAE,OAAO,CAAC;IACpB,+DAA+D;IAC/D,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,qEAAqE;IACrE,QAAQ,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAC5C,yCAAyC;IACzC,KAAK,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAC9C,wCAAwC;IACxC,KAAK,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IAC1C,8CAA8C;IAC9C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yDAAyD;IACzD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0DAA0D;IAC1D,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,oDAAoD;IACpD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gDAAgD;IAChD,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,sDAAsD;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qDAAqD;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,UAAW,SAAQ,iBAAiB;CAAG;AAExD,OAAO,EAAE,0BAA0B,EAAE,KAAK,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAClF,OAAO,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AACpD,eAAO,MAAM,YAAY,wDAA6B,CAAC;AAEvD;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAoMlE;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CAIpD;AAgRD,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../src/Modal.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAWxC,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,eAAe,EAKrB,MAAM,SAAS,CAAC;AACjB,OAAO,EAGL,KAAK,mBAAmB,EACzB,MAAM,YAAY,CAAC;AAkCpB,MAAM,WAAW,gBAAgB;IAC/B,gEAAgE;IAChE,UAAU,EAAE,OAAO,CAAC;IACpB,+DAA+D;IAC/D,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,qEAAqE;IACrE,QAAQ,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAC5C,yCAAyC;IACzC,KAAK,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAC9C,wCAAwC;IACxC,KAAK,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IAC1C,8CAA8C;IAC9C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yDAAyD;IACzD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0DAA0D;IAC1D,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,oDAAoD;IACpD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gDAAgD;IAChD,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,sDAAsD;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qDAAqD;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,UAAW,SAAQ,iBAAiB;CAAG;AAExD,OAAO,EAAE,0BAA0B,EAAE,KAAK,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAClF,OAAO,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AACpD,eAAO,MAAM,YAAY,wDAA6B,CAAC;AAEvD;;;GAGG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAkNlE;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CAIpD;AA6RD,eAAe,KAAK,CAAC"}

package/dist/Modal.js

@@ -1,9 +1,22 @@
+/*
+* Copyright 2022 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-aria-components/src/Modal.tsx
 import { dataAttr, filterDOMProps, useIsHydrated, useRenderProps } from "./utils.js";
 import { VisuallyHidden } from "./VisuallyHidden.js";
 import { a as useOverlayTriggerState, n as OverlayTriggerStateContext, t as DialogTriggerContext } from "./contexts.js";
-import { Portal, createComponent, delegateEvents, getNextElement, getNextMarker, insert, isServer, memo, mergeProps, runHydrationEvents, spread, template, use } from "solid-js/web";
-import { Show, createContext, createEffect, createMemo, createSignal, onCleanup, splitProps, useContext } from "solid-js";
-import { FocusScope, ariaHideOutside, createEnterAnimation, createExitAnimation, createInteractOutside, useUNSAFE_PortalContext } from "@proyecto-viviana/solidaria";
+import { Portal, createComponent, delegateEvents, getNextElement, getNextMarker, insert, isServer, memo, mergeProps, ref, runHydrationEvents, scope, spread, template } from "@solidjs/web";
+import { Show, createContext, createMemo, createSignal, createTrackedEffect, useContext } from "solid-js";
+import { FocusScope, ariaHideOutside, createEnterAnimation, createExitAnimation, createInteractOutside, createPreventScroll, useUNSAFE_PortalContext } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 //#region src/Modal.tsx
 /**
 * Modal and ModalOverlay components for solidaria-components
@@ -11,7 +24,9 @@ import { FocusScope, ariaHideOutside, createEnterAnimation, createExitAnimation,
 * Headless modal components with overlay, focus trapping, and dismissal handling.
 * Port of react-aria-components Modal.
 */
-var _tmpl$ = /*#__PURE__*/ template(`<div>`), _tmpl$2 = /*#__PURE__*/ template(`<button aria-label=Dismiss tabindex=-1 style=width:1px;height:1px>`), _tmpl$3 = /*#__PURE__*/ template(`<div><!$><!/><!$><!/>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<button aria-label=Dismiss tabindex=-1 style=width:1px;height:1px>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div><!$><!/><!$><!/>`);
 const InternalModalContext = createContext(null);
 const visibleModals = [];
 function pruneDisconnectedModals() {
@@ -72,16 +87,24 @@ function ModalOverlay(props) {
 		},
 		open,
 		close,
-		toggle
+		toggle,
+		setOpen: (next) => {
+			if (next) open();
+			else close();
+		},
+		get point() {
+			return null;
+		},
+		setPoint: () => {}
 	};
 	let overlayRef;
-	const [overlayEl, setOverlayEl] = createSignal(null);
+	const [overlayEl, setOverlayEl] = createSignal(null, { ownedWrite: true });
 	const overlayRefAccessor = () => overlayEl();
 	const registerOverlayRef = (element) => {
 		overlayRef = element;
 		setOverlayEl(element);
 	};
-	const [modalEl, setModalEl] = createSignal(null);
+	const [modalEl, setModalEl] = createSignal(null, { ownedWrite: true });
 	const isOverlayEntering = createEnterAnimation(overlayRefAccessor, isOpen);
 	const isOverlayExiting = createExitAnimation(overlayRefAccessor, isOpen);
 	const isModalExiting = createExitAnimation(() => modalEl(), isOpen);
@@ -113,7 +136,8 @@ function ModalOverlay(props) {
 	const handleOverlayPointerDown = (event) => {
 		if (local.isDismissable && event.target === event.currentTarget && isTopMostModalInOverlay()) close();
 	};
-	createEffect(() => {
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		if (!isOpen() || local.isKeyboardDismissDisabled) return;
 		const handleKeyDown = (event) => {
 			if (event.key === "Escape" && !event.isComposing && isTopMostModalInOverlay()) {
@@ -123,9 +147,12 @@ function ModalOverlay(props) {
 			}
 		};
 		document.addEventListener("keydown", handleKeyDown, false);
-		onCleanup(() => {
+		_s2Cleanups.push(() => {
 			document.removeEventListener("keydown", handleKeyDown, false);
 		});
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
 	const resolveChildren = () => {
 		const children = props.children;
@@ -134,7 +161,9 @@ function ModalOverlay(props) {
 	};
 	return createComponent(Show, {
 		get when() {
-			return memo(() => !!isHydrated())() && (isOpen() || combinedExiting());
+			return memo(() => {
+				return !!isHydrated();
+			})() ? isOpen() || combinedExiting() : isHydrated();
 		},
 		get children() {
 			return createComponent(Portal, {
@@ -142,30 +171,34 @@ function ModalOverlay(props) {
 					return portalContainer();
 				},
 				get children() {
-					return createComponent(OverlayTriggerStateContext.Provider, {
+					return createComponent(OverlayTriggerStateContext, {
 						value: state,
 						get children() {
-							return createComponent(InternalModalContext.Provider, {
+							return createComponent(InternalModalContext, {
 								value: internalModalContext,
 								get children() {
 									var _el$ = getNextElement(_tmpl$);
-									use(registerOverlayRef, _el$);
-									spread(_el$, mergeProps(domProps, {
-										get ["class"]() {
+									ref(() => {
+										return registerOverlayRef;
+									}, _el$);
+									spread(_el$, [domProps, {
+										get "class"() {
 											return renderProps.class();
 										},
 										get style() {
 											return renderProps.style();
 										},
-										get ["data-entering"]() {
+										get "data-entering"() {
 											return dataAttr(overlayEntering());
 										},
-										get ["data-exiting"]() {
+										get "data-exiting"() {
 											return dataAttr(combinedExiting());
 										},
-										"onPointerDown": handleOverlayPointerDown
-									}), false, true);
-									insert(_el$, resolveChildren);
+										onPointerDown: handleOverlayPointerDown
+									}], true);
+									insert(_el$, scope(() => {
+										return resolveChildren();
+									}));
 									runHydrationEvents();
 									return _el$;
 								}
@@ -221,7 +254,9 @@ function ModalContentWithAutoOverlay(props) {
 * Used by both standalone Modal and Modal wrapped in ModalOverlay.
 */
 function ModalContent(props) {
-	if (isServer) return memo(() => props.children);
+	if (isServer) return memo(() => {
+		return props.children;
+	});
 	const [local, rest] = splitProps(props, [
 		"children",
 		"class",
@@ -236,7 +271,7 @@ function ModalContent(props) {
 	]);
 	let modalRef;
 	const modalRefAccessor = () => modalRef ?? null;
-	const [modalEl, setModalEl] = createSignal(null);
+	const [modalEl, setModalEl] = createSignal(null, { ownedWrite: true });
 	const parentState = useContext(OverlayTriggerStateContext);
 	const internalContext = useContext(InternalModalContext);
 	const isDismissable = () => internalContext?.isDismissable ?? local.isDismissable;
@@ -252,14 +287,18 @@ function ModalContent(props) {
 	};
 	const isModalEntering = createEnterAnimation(() => modalEl(), isOpen);
 	const isModalExiting = () => internalContext?.isExiting?.() ?? local.isExiting ?? false;
-	createEffect(() => {
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		if (!isOpen()) return;
 		pruneDisconnectedModals();
 		if (!visibleModals.includes(modalRefAccessor)) visibleModals.push(modalRefAccessor);
-		onCleanup(() => {
+		_s2Cleanups.push(() => {
 			const index = visibleModals.indexOf(modalRefAccessor);
 			if (index >= 0) visibleModals.splice(index, 1);
 		});
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
 	const isTopMostModal = () => {
 		pruneDisconnectedModals();
@@ -269,26 +308,20 @@ function ModalContent(props) {
 		if (local.isOpen !== void 0) local.onOpenChange?.(false);
 		else parentState?.close();
 	};
-	createEffect(() => {
-		if (!isOpen()) return;
-		const html = document.documentElement;
-		const prevOverflow = html.style.overflow;
-		html.style.overflow = "hidden";
-		onCleanup(() => {
-			html.style.overflow = prevOverflow;
-		});
-	});
-	createEffect(() => {
-		if (!isOpen() || !isDismissable()) return;
-		createInteractOutside({
-			ref: modalRefAccessor,
-			onInteractOutside: () => {
-				if (isTopMostModal()) close();
-			},
-			isDisabled: false
-		});
+	createPreventScroll({ get isDisabled() {
+		return !isOpen();
+	} });
+	createInteractOutside({
+		ref: modalRefAccessor,
+		onInteractOutside: () => {
+			if (isTopMostModal()) close();
+		},
+		get isDisabled() {
+			return !isOpen() || !isDismissable();
+		}
 	});
-	createEffect(() => {
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		if (!isOpen() || isKeyboardDismissDisabled()) return;
 		const handleKeyDown = (e) => {
 			if (e.key === "Escape" && !e.isComposing && isTopMostModal()) {
@@ -298,11 +331,15 @@ function ModalContent(props) {
 			}
 		};
 		document.addEventListener("keydown", handleKeyDown, false);
-		onCleanup(() => {
+		_s2Cleanups.push(() => {
 			document.removeEventListener("keydown", handleKeyDown, false);
 		});
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
-	createEffect(() => {
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		if (!isOpen() || !modalRef) return;
 		let cleanup;
 		let cancelled = false;
@@ -313,10 +350,13 @@ function ModalContent(props) {
 		};
 		if (modalRef.isConnected) hideOutside();
 		else ownerWindow.queueMicrotask(hideOutside);
-		onCleanup(() => {
+		_s2Cleanups.push(() => {
 			cancelled = true;
 			cleanup?.();
 		});
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
 	const renderValues = createMemo(() => ({
 		isEntering: isModalEntering(),
@@ -337,22 +377,28 @@ function ModalContent(props) {
 		},
 		restoreFocus: true,
 		get children() {
-			var _el$2 = getNextElement(_tmpl$3), _el$4 = _el$2.firstChild, [_el$5, _co$] = getNextMarker(_el$4.nextSibling), _el$6 = _el$5.nextSibling, [_el$7, _co$2] = getNextMarker(_el$6.nextSibling);
-			use(registerModalRef, _el$2);
-			spread(_el$2, mergeProps(domProps, {
-				get ["class"]() {
+			var _el$2 = getNextElement(_tmpl$3);
+			var _el$4 = _el$2.firstChild;
+			var [_el$5, _el$6] = getNextMarker(_el$4.nextSibling);
+			var _el$7 = _el$5.nextSibling;
+			var [_el$8, _el$9] = getNextMarker(_el$7.nextSibling);
+			ref(() => {
+				return registerModalRef;
+			}, _el$2);
+			spread(_el$2, [domProps, {
+				get "class"() {
 					return renderProps.class();
 				},
 				get style() {
 					return renderProps.style();
 				},
-				get ["data-entering"]() {
+				get "data-entering"() {
 					return dataAttr(isModalEntering());
 				},
-				get ["data-exiting"]() {
+				get "data-exiting"() {
 					return dataAttr(isModalExiting());
 				}
-			}), false, true);
+			}], true);
 			insert(_el$2, createComponent(Show, {
 				get when() {
 					return isDismissable();
@@ -362,14 +408,16 @@ function ModalContent(props) {
 						elementType: "div",
 						get children() {
 							var _el$3 = getNextElement(_tmpl$2);
-							_el$3.$$click = close;
+							_el$3._$$click = close;
 							runHydrationEvents();
 							return _el$3;
 						}
 					});
 				}
-			}), _el$5, _co$);
-			insert(_el$2, () => renderProps.renderChildren(), _el$7, _co$2);
+			}), _el$5, _el$6);
+			insert(_el$2, scope(() => {
+				return renderProps.renderChildren();
+			}), _el$8, _el$9);
 			runHydrationEvents();
 			return _el$2;
 		}