@proyecto-viviana/ui 0.4.1 → 0.6.0

package/dist/separator/index.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.jsx","names":[],"sources":["../../src/separator/index.tsx"],"sourcesContent":["import { type JSX, splitProps } from \"solid-js\";\nimport {\n  Separator as HeadlessSeparator,\n  type SeparatorProps as HeadlessSeparatorProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport { style } from \"../style\" with { type: \"macro\" };\n\n/**\n * The rule's colour weight.\n *\n * NOTE: the design register publishes exactly two neutral rule weights\n * (`--border-subtle` and `--border-default`), so this three-member union no\n * longer maps onto three distinct colours: `strong` is currently an alias for\n * `default` and renders identically to it at every size. It is kept so existing\n * call sites keep compiling; prefer `size` to make a rule read heavier. Giving\n * `strong` its own colour again requires a third rule weight in the app's token\n * layer, which is an owner decision rather than a library one.\n */\nexport type SeparatorVariant = \"default\" | \"subtle\" | \"strong\";\nexport type SeparatorSize = \"sm\" | \"md\" | \"lg\";\ntype SeparatorOrientation = \"horizontal\" | \"vertical\";\n\nexport interface SeparatorProps extends Omit<HeadlessSeparatorProps, \"class\" | \"style\"> {\n  /** The visual style variant. Note that `strong` currently renders as `default`\n   * — see {@link SeparatorVariant}. @default 'default' */\n  variant?: SeparatorVariant;\n  /** The size/thickness of the separator. @default 'md' */\n  size?: SeparatorSize;\n  /** Additional CSS class name. */\n  class?: string;\n}\n\n// A rule drawn as a filled bar, mirroring Divider's S2 approach (a solid\n// `backgroundColor` plus an explicit px thickness rather than a CSS border).\n// Sizes sm/md/lg map to 1/2/4px — the same steps as Divider's S/M/L — and the\n// variants pick one of the register's neutral rule tokens. Routed through the\n// `style()` macro so the CSS ships in the package bundle for installed\n// consumers; the values are baked at build time, so this needs a rebuild of\n// viviana-ui before any of it reaches a browser.\nconst separatorStyles = style<{\n  variant: SeparatorVariant;\n  size: SeparatorSize;\n  orientation: SeparatorOrientation;\n}>({\n  /* The register's two rule weights, reached as a fill because this component paints\n     its rule rather than bordering it. See the `backgroundColor` map in\n     style/spectrum-theme.ts, which publishes exactly `border-subtle` and\n     `border-default` and states there is deliberately no third weight.\n     `strong` therefore resolves to the same rule as `default` — see the note on\n     SeparatorVariant above. */\n  backgroundColor: {\n    variant: {\n      default: \"border-default\",\n      subtle: \"border-subtle\",\n      strong: \"border-default\",\n    },\n  },\n  borderStyle: \"none\",\n  margin: 0,\n  flexShrink: 0,\n  alignSelf: { orientation: { vertical: \"stretch\" } },\n  width: {\n    orientation: {\n      horizontal: \"full\",\n      vertical: { default: \"[2px]\", size: { sm: \"[1px]\", lg: \"[4px]\" } },\n    },\n  },\n  height: {\n    orientation: {\n      horizontal: { default: \"[2px]\", size: { sm: \"[1px]\", lg: \"[4px]\" } },\n      vertical: \"full\",\n    },\n  },\n});\n\n/**\n * A separator is a visual divider between two groups of content,\n * e.g. groups of menu items or sections of a page.\n *\n * @example\n * ```tsx\n * <Separator />\n *\n * // Vertical separator\n * <div class=\"flex items-center gap-4\">\n *   <span>Item 1</span>\n *   <Separator orientation=\"vertical\" />\n *   <span>Item 2</span>\n * </div>\n *\n * // A lighter rule, or a heavier one\n * <Separator variant=\"subtle\" />\n * <Separator size=\"lg\" />\n * ```\n */\nexport function Separator(props: SeparatorProps): JSX.Element {\n  const [local, headlessProps] = splitProps(props, [\"orientation\", \"variant\", \"size\", \"class\"]);\n\n  const orientation = () => local.orientation ?? \"horizontal\";\n  const variant = () => local.variant ?? \"default\";\n  const size = () => local.size ?? \"md\";\n\n  return (\n    <HeadlessSeparator\n      {...headlessProps}\n      orientation={orientation()}\n      class={[\n        separatorStyles({ variant: variant(), size: size(), orientation: orientation() }),\n        local.class,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n    />\n  );\n}\n"],"mappings":";;;AA4BA,MAAM,kBAAe,SAAY,UAAC,OAAA;CAChC,IAAM,QAAQ;CAChB,IAAA,MAAA,YAAA,UAAA,SAAA;MAEU,IAAK,MAAM,YAAY,UAC7B,SAAA;MACO,IAAI,MAAM,YAAY,WAC9B,SAAc;CAEd,SAAU;CACV,SAAU;CACb,SAAM;CACJ,SAAS;CACT,SAAM;CACN,SAAW;CACV,IAAA,MAAA,gBAAA,YACK,SAAS;CAEb,IAAC,MAAM,gBAAmB,YACxB,IAAM,MAAC,SAAa,MACd,SAAE;MACT,IAAA,MAAiB,SAAQ,MAC5B,SAAiB;MAEb,SAAU;MAEV,IAAS,MAAM,gBAAS,cACzB,SAAA;CAEH,IAAA,MAAY,gBAAO,YACb,SAAG;MACT,IAAa,MAAA,gBAAA,cACb,IAAU,MAAG,SAAY,MAClB,SAAA;MACM,IAAE,MAAA,SAAA,MACX,SAAa;MAEd,SAAA;CAGD,OAAA;AACJ;;;;;;;;;;;;;;;;;;;;GAoBC,SAAA,UAAA,OAAA;CACG,MAAI,CAAA,OAAQ,iBAAmB,WAAA,OAAA;EAC/B;EACA;EACC;EACH;CACF,CAAA;CACE,MAAO,oBAAO,MAAiB,eAAgB;;CAE/C,MAAM,aAAa,MAAM,QAAO;CAChC,OAAM,CAAA,gBAAsB,eAAoB,aAAA,YAAA,GAAA,OAAA,CAC1C,gBAAa;;EAEZ,MAAA,KAAA;EACJ,aAAA,YAAA;CACG,CAAC,GACH,MAAA,KACF,EAAE,OAAO,OAAA,EAAA,KAAA,GAAA;AACb"}

package/dist/shared-element/index.d.ts

@@ -0,0 +1,10 @@
+import type { JSX } from "solid-js";
+import { type SharedElementProps as HeadlessSharedElementProps, type SharedElementTransitionProps as HeadlessSharedElementTransitionProps } from "@proyecto-viviana/solidaria-components";
+export interface SharedElementProps extends Omit<HeadlessSharedElementProps, "class" | "style"> {
+    class?: string;
+    style?: JSX.CSSProperties;
+}
+export declare function SharedElement(props: SharedElementProps): JSX.Element;
+export declare function SharedElementTransition(props: HeadlessSharedElementTransitionProps): JSX.Element;
+export type SharedElementTransitionProps = HeadlessSharedElementTransitionProps;
+//# sourceMappingURL=index.d.ts.map

package/dist/shared-element/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/shared-element/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AACpC,OAAO,EAGL,KAAK,kBAAkB,IAAI,0BAA0B,EAErD,KAAK,4BAA4B,IAAI,oCAAoC,EAC1E,MAAM,wCAAwC,CAAC;AAKhD,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,0BAA0B,EAAE,OAAO,GAAG,OAAO,CAAC;IAC7F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;CAC3B;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAKpE;AAED,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,oCAAoC,GAAG,GAAG,CAAC,OAAO,CAEhG;AAED,MAAM,MAAM,4BAA4B,GAAG,oCAAoC,CAAC"}

package/dist/skeleton/index.d.ts

@@ -0,0 +1,29 @@
+import { type Accessor, type JSX } from "solid-js";
+import type { StyleString } from "../style";
+export type SkeletonContextValue = boolean | null | Accessor<boolean | null | undefined>;
+export interface SkeletonProps {
+    children: JSX.Element;
+    isLoading: boolean;
+}
+export interface SkeletonCollectionProps {
+    children: () => JSX.Element;
+}
+export declare const SkeletonContext: import("solid-js").Context<SkeletonContextValue>;
+export declare function createIsSkeleton(): Accessor<boolean>;
+export declare function useIsSkeleton(): Accessor<boolean>;
+export declare const loadingStyle: string;
+type MaybeAccessor<T> = T | Accessor<T>;
+export declare function useLoadingAnimation(isAnimating: MaybeAccessor<boolean>): (element: Element | null) => void;
+export declare function useInertAttribute(isInert: MaybeAccessor<boolean>): (element: Element | null) => void;
+export declare function Skeleton(props: SkeletonProps): JSX.Element;
+export declare function SkeletonText(props: {
+    children: JSX.Element;
+}): JSX.Element;
+export declare function useSkeletonText(children: Accessor<JSX.Element>, unsafeStyle: Accessor<JSX.CSSProperties | undefined>): [Accessor<JSX.Element>, Accessor<JSX.CSSProperties | undefined>];
+export declare function useSkeletonIcon(styles: MaybeAccessor<StyleString | undefined>): Accessor<string>;
+export declare function SkeletonWrapper(props: {
+    children: JSX.Element;
+}): JSX.Element;
+export declare const SkeletonCollection: (props: SkeletonCollectionProps) => unknown;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/skeleton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,QAAQ,EACb,KAAK,GAAG,EAET,MAAM,UAAU,CAAC;AAGlB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAK5C,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,IAAI,GAAG,QAAQ,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;AAEzF,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,eAAe,kDAA4C,CAAC;AAMzE,wBAAgB,gBAAgB,IAAI,QAAQ,CAAC,OAAO,CAAC,CAGpD;AAED,wBAAgB,aAAa,IAAI,QAAQ,CAAC,OAAO,CAAC,CAEjD;AAED,eAAO,MAAM,YAAY,QAWxB,CAAC;AAYF,KAAK,aAAa,CAAC,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;AAyBxC,wBAAgB,mBAAmB,CACjC,WAAW,EAAE,aAAa,CAAC,OAAO,CAAC,GAClC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CA4BnC;AAED,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,GAC9B,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAiBnC;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAI1D;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAe1E;AAED,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAC/B,WAAW,EAAE,QAAQ,CAAC,GAAG,CAAC,aAAa,GAAG,SAAS,CAAC,GACnD,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC,CAalE;AAED,wBAAgB,eAAe,CAAC,MAAM,EAAE,aAAa,CAAC,WAAW,GAAG,SAAS,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAIhG;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE;IAAE,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CA2B7E;AAID,eAAO,MAAM,kBAAkB,6CAU7B,CAAC"}

package/dist/skeleton/index.js

@@ -0,0 +1,142 @@
+import { mergeStyles } from "../style/runtime.js";
+import { createComponent, getNextElement, insert, memo, template, use } from "solid-js/web";
+import { createContext, createEffect, createMemo, createSignal, onCleanup, useContext } from "solid-js";
+import { createLeafComponent } from "@proyecto-viviana/solidaria-components";
+//#region src/skeleton/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span class="_8QL4Vd pw151 _ma151 oa151 na151 ka151 ja151">`), _tmpl$2 = /*#__PURE__*/ template(`<span class=_8QL4Vd>`);
+const SkeletonContext = createContext(null);
+function readSkeletonContext(value) {
+	return typeof value === "function" ? value() : value;
+}
+function createIsSkeleton() {
+	const context = useContext(SkeletonContext);
+	return () => readSkeletonContext(context) || false;
+}
+function useIsSkeleton() {
+	return createIsSkeleton();
+}
+const loadingStyle = "_8QL4Vd";
+const skeletonIconStyles = " oa151 na151 ka151 ja151";
+function access(value) {
+	return typeof value === "function" ? value() : value;
+}
+function createPrefersReducedMotion() {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => false;
+	const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+	if (!mediaQuery) return () => false;
+	const [matches, setMatches] = createSignal(mediaQuery.matches);
+	const handleChange = (event) => setMatches(event.matches);
+	mediaQuery.addEventListener?.("change", handleChange);
+	onCleanup(() => mediaQuery.removeEventListener?.("change", handleChange));
+	return matches;
+}
+function useLoadingAnimation(isAnimating) {
+	const reduceMotion = createPrefersReducedMotion();
+	const [element, setElement] = createSignal(null);
+	let animation;
+	createEffect(() => {
+		const target = element();
+		const shouldAnimate = access(isAnimating) && !reduceMotion();
+		if (target && shouldAnimate && !animation && typeof target.animate === "function") {
+			animation = target.animate([{ backgroundPosition: "100%" }, { backgroundPosition: "0%" }], {
+				duration: 2e3,
+				iterations: Infinity,
+				easing: "ease-in-out"
+			});
+			animation.startTime = 0;
+		} else if ((!target || !shouldAnimate) && animation) {
+			animation.cancel();
+			animation = void 0;
+		}
+	});
+	onCleanup(() => {
+		animation?.cancel();
+		animation = void 0;
+	});
+	return setElement;
+}
+function useInertAttribute(isInert) {
+	const [element, setElement] = createSignal(null);
+	createEffect(() => {
+		const target = element();
+		if (!target) return;
+		if (access(isInert)) target.setAttribute("inert", "true");
+		else target.removeAttribute("inert");
+	});
+	return setElement;
+}
+function Skeleton(props) {
+	const isLoading = createMemo(() => props.isLoading);
+	return createComponent(SkeletonContext.Provider, {
+		value: isLoading,
+		get children() {
+			return props.children;
+		}
+	});
+}
+function SkeletonText(props) {
+	const loadingAnimationRef = useLoadingAnimation(true);
+	const inertRef = useInertAttribute(true);
+	return (() => {
+		var _el$ = getNextElement(_tmpl$);
+		use((element) => {
+			loadingAnimationRef(element);
+			inertRef(element);
+		}, _el$);
+		insert(_el$, () => props.children);
+		return _el$;
+	})();
+}
+function useSkeletonText(children, unsafeStyle) {
+	const isSkeleton = createIsSkeleton();
+	return [() => isSkeleton() ? createComponent(SkeletonText, { get children() {
+		return children();
+	} }) : children(), () => isSkeleton() ? {
+		...unsafeStyle(),
+		"-webkit-text-fill-color": "transparent"
+	} : unsafeStyle()];
+}
+function useSkeletonIcon(styles) {
+	const isSkeleton = createIsSkeleton();
+	return () => mergeStyles(isSkeleton() ? skeletonIconStyles : void 0, access(styles) ?? void 0);
+}
+function SkeletonWrapper(props) {
+	const context = useContext(SkeletonContext);
+	const isLoading = () => readSkeletonContext(context);
+	const animationRef = useLoadingAnimation(() => isLoading() || false);
+	const inertRef = useInertAttribute(() => isLoading() || false);
+	if (isLoading() == null) return props.children;
+	return createComponent(SkeletonContext.Provider, {
+		value: null,
+		get children() {
+			return memo(() => !!isLoading())() ? (() => {
+				var _el$2 = getNextElement(_tmpl$2);
+				use((element) => {
+					animationRef(element);
+					inertRef(element);
+				}, _el$2);
+				insert(_el$2, () => props.children);
+				return _el$2;
+			})() : props.children;
+		}
+	});
+}
+const skeletonCollectionCache = /* @__PURE__ */ new WeakMap();
+const SkeletonCollection = createLeafComponent((props, node) => {
+	const cacheKey = node ?? props;
+	let cached = skeletonCollectionCache.get(cacheKey);
+	if (!cached) {
+		cached = createComponent(Skeleton, {
+			isLoading: true,
+			get children() {
+				return props.children();
+			}
+		});
+		skeletonCollectionCache.set(cacheKey, cached);
+	}
+	return cached;
+});
+//#endregion
+export { Skeleton, SkeletonCollection, SkeletonContext, SkeletonText, SkeletonWrapper, createIsSkeleton, loadingStyle, useInertAttribute, useIsSkeleton, useLoadingAnimation, useSkeletonIcon, useSkeletonText };
+
+//# sourceMappingURL=index.js.map

package/dist/skeleton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/skeleton/index.tsx"],"sourcesContent":["import {\n  createContext,\n  createEffect,\n  createMemo,\n  createSignal,\n  onCleanup,\n  type Accessor,\n  type JSX,\n  useContext,\n} from \"solid-js\";\nimport { createLeafComponent } from \"@proyecto-viviana/solidaria-components\";\nimport { css } from \"../style/style-macro\" with { type: \"macro\" };\nimport type { StyleString } from \"../style\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport { color } from \"../style/spectrum-theme\" with { type: \"macro\" };\nimport { mergeStyles } from \"../style/runtime\";\n\nexport type SkeletonContextValue = boolean | null | Accessor<boolean | null | undefined>;\n\nexport interface SkeletonProps {\n  children: JSX.Element;\n  isLoading: boolean;\n}\n\nexport interface SkeletonCollectionProps {\n  children: () => JSX.Element;\n}\n\nexport const SkeletonContext = createContext<SkeletonContextValue>(null);\n\nfunction readSkeletonContext(value: SkeletonContextValue): boolean | null | undefined {\n  return typeof value === \"function\" ? value() : value;\n}\n\nexport function createIsSkeleton(): Accessor<boolean> {\n  const context = useContext(SkeletonContext);\n  return () => readSkeletonContext(context) || false;\n}\n\nexport function useIsSkeleton(): Accessor<boolean> {\n  return createIsSkeleton();\n}\n\nexport const loadingStyle = css(\n  `\n  background-image: linear-gradient(to right, ${color(\"gray-100\")} 33%, light-dark(${color(\n    \"gray-25\",\n  )}, ${color(\"gray-300\")}), ${color(\"gray-100\")} 66%);\n  background-size: 300%;\n  * {\n    visibility: hidden;\n  }\n`,\n  \"L\",\n);\n\nconst skeletonTextStyles = style({\n  color: \"transparent\",\n  boxDecorationBreak: \"clone\",\n  borderRadius: \"sm\",\n});\n\nconst skeletonIconStyles = style({\n  borderRadius: \"sm\",\n});\n\ntype MaybeAccessor<T> = T | Accessor<T>;\n\nfunction access<T>(value: MaybeAccessor<T>): T {\n  return typeof value === \"function\" ? (value as Accessor<T>)() : value;\n}\n\nfunction createPrefersReducedMotion(): Accessor<boolean> {\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") {\n    return () => false;\n  }\n\n  const mediaQuery = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n  if (!mediaQuery) {\n    return () => false;\n  }\n\n  const [matches, setMatches] = createSignal(mediaQuery.matches);\n  const handleChange = (event: MediaQueryListEvent) => setMatches(event.matches);\n\n  mediaQuery.addEventListener?.(\"change\", handleChange);\n  onCleanup(() => mediaQuery.removeEventListener?.(\"change\", handleChange));\n\n  return matches;\n}\n\nexport function useLoadingAnimation(\n  isAnimating: MaybeAccessor<boolean>,\n): (element: Element | null) => void {\n  const reduceMotion = createPrefersReducedMotion();\n  const [element, setElement] = createSignal<Element | null>(null);\n  let animation: Animation | undefined;\n\n  createEffect(() => {\n    const target = element();\n    const shouldAnimate = access(isAnimating) && !reduceMotion();\n\n    if (target && shouldAnimate && !animation && typeof target.animate === \"function\") {\n      animation = target.animate([{ backgroundPosition: \"100%\" }, { backgroundPosition: \"0%\" }], {\n        duration: 2000,\n        iterations: Infinity,\n        easing: \"ease-in-out\",\n      });\n      animation.startTime = 0;\n    } else if ((!target || !shouldAnimate) && animation) {\n      animation.cancel();\n      animation = undefined;\n    }\n  });\n\n  onCleanup(() => {\n    animation?.cancel();\n    animation = undefined;\n  });\n\n  return setElement;\n}\n\nexport function useInertAttribute(\n  isInert: MaybeAccessor<boolean>,\n): (element: Element | null) => void {\n  const [element, setElement] = createSignal<Element | null>(null);\n\n  createEffect(() => {\n    const target = element();\n    if (!target) {\n      return;\n    }\n\n    if (access(isInert)) {\n      target.setAttribute(\"inert\", \"true\");\n    } else {\n      target.removeAttribute(\"inert\");\n    }\n  });\n\n  return setElement;\n}\n\nexport function Skeleton(props: SkeletonProps): JSX.Element {\n  const isLoading = createMemo(() => props.isLoading);\n\n  return <SkeletonContext.Provider value={isLoading}>{props.children}</SkeletonContext.Provider>;\n}\n\nexport function SkeletonText(props: { children: JSX.Element }): JSX.Element {\n  const loadingAnimationRef = useLoadingAnimation(true);\n  const inertRef = useInertAttribute(true);\n\n  return (\n    <span\n      ref={(element) => {\n        loadingAnimationRef(element);\n        inertRef(element);\n      }}\n      class={`${loadingStyle} ${skeletonTextStyles}`}\n    >\n      {props.children}\n    </span>\n  );\n}\n\nexport function useSkeletonText(\n  children: Accessor<JSX.Element>,\n  unsafeStyle: Accessor<JSX.CSSProperties | undefined>,\n): [Accessor<JSX.Element>, Accessor<JSX.CSSProperties | undefined>] {\n  const isSkeleton = createIsSkeleton();\n\n  return [\n    () => (isSkeleton() ? <SkeletonText>{children()}</SkeletonText> : children()),\n    () =>\n      isSkeleton()\n        ? {\n            ...unsafeStyle(),\n            \"-webkit-text-fill-color\": \"transparent\",\n          }\n        : unsafeStyle(),\n  ];\n}\n\nexport function useSkeletonIcon(styles: MaybeAccessor<StyleString | undefined>): Accessor<string> {\n  const isSkeleton = createIsSkeleton();\n  return () =>\n    mergeStyles(isSkeleton() ? skeletonIconStyles : undefined, access(styles) ?? undefined);\n}\n\nexport function SkeletonWrapper(props: { children: JSX.Element }): JSX.Element {\n  const context = useContext(SkeletonContext);\n  const isLoading = () => readSkeletonContext(context);\n  const animationRef = useLoadingAnimation(() => isLoading() || false);\n  const inertRef = useInertAttribute(() => isLoading() || false);\n\n  if (isLoading() == null) {\n    return props.children;\n  }\n\n  return (\n    <SkeletonContext.Provider value={null}>\n      {isLoading() ? (\n        <span\n          ref={(element) => {\n            animationRef(element);\n            inertRef(element);\n          }}\n          class={loadingStyle}\n        >\n          {props.children}\n        </span>\n      ) : (\n        props.children\n      )}\n    </SkeletonContext.Provider>\n  );\n}\n\nconst skeletonCollectionCache = new WeakMap<object, JSX.Element>();\n\nexport const SkeletonCollection = createLeafComponent<SkeletonCollectionProps>((props, node) => {\n  const cacheKey = node ?? props;\n  let cached = skeletonCollectionCache.get(cacheKey as object);\n\n  if (!cached) {\n    cached = <Skeleton isLoading>{props.children()}</Skeleton>;\n    skeletonCollectionCache.set(cacheKey as object, cached);\n  }\n\n  return cached;\n});\n"],"mappings":"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"}

package/dist/skeleton/index.jsx

@@ -0,0 +1,120 @@
+import { t as mergeStyles } from "../_chunk/runtime.jsx";
+import { createContext, createEffect, createMemo, createSignal, onCleanup, useContext } from "solid-js";
+import { createLeafComponent } from "@proyecto-viviana/solidaria-components";
+//#region src/skeleton/index.tsx
+const SkeletonContext = createContext(null);
+function readSkeletonContext(value) {
+	return typeof value === "function" ? value() : value;
+}
+function createIsSkeleton() {
+	const context = useContext(SkeletonContext);
+	return () => readSkeletonContext(context) || false;
+}
+function useIsSkeleton() {
+	return createIsSkeleton();
+}
+const loadingStyle = "_8QL4Vd";
+const skeletonTextStyles = " pw151 _ma151 oa151 na151 ka151 ja151";
+const skeletonIconStyles = " oa151 na151 ka151 ja151";
+function access(value) {
+	return typeof value === "function" ? value() : value;
+}
+function createPrefersReducedMotion() {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => false;
+	const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+	if (!mediaQuery) return () => false;
+	const [matches, setMatches] = createSignal(mediaQuery.matches);
+	const handleChange = (event) => setMatches(event.matches);
+	mediaQuery.addEventListener?.("change", handleChange);
+	onCleanup(() => mediaQuery.removeEventListener?.("change", handleChange));
+	return matches;
+}
+function useLoadingAnimation(isAnimating) {
+	const reduceMotion = createPrefersReducedMotion();
+	const [element, setElement] = createSignal(null);
+	let animation;
+	createEffect(() => {
+		const target = element();
+		const shouldAnimate = access(isAnimating) && !reduceMotion();
+		if (target && shouldAnimate && !animation && typeof target.animate === "function") {
+			animation = target.animate([{ backgroundPosition: "100%" }, { backgroundPosition: "0%" }], {
+				duration: 2e3,
+				iterations: Infinity,
+				easing: "ease-in-out"
+			});
+			animation.startTime = 0;
+		} else if ((!target || !shouldAnimate) && animation) {
+			animation.cancel();
+			animation = void 0;
+		}
+	});
+	onCleanup(() => {
+		animation?.cancel();
+		animation = void 0;
+	});
+	return setElement;
+}
+function useInertAttribute(isInert) {
+	const [element, setElement] = createSignal(null);
+	createEffect(() => {
+		const target = element();
+		if (!target) return;
+		if (access(isInert)) target.setAttribute("inert", "true");
+		else target.removeAttribute("inert");
+	});
+	return setElement;
+}
+function Skeleton(props) {
+	const isLoading = createMemo(() => props.isLoading);
+	return <SkeletonContext.Provider value={isLoading}>{props.children}</SkeletonContext.Provider>;
+}
+function SkeletonText(props) {
+	const loadingAnimationRef = useLoadingAnimation(true);
+	const inertRef = useInertAttribute(true);
+	return <span ref={(element) => {
+		loadingAnimationRef(element);
+		inertRef(element);
+	}} class={`${loadingStyle} ${skeletonTextStyles}`}>
+      {props.children}
+    </span>;
+}
+function useSkeletonText(children, unsafeStyle) {
+	const isSkeleton = createIsSkeleton();
+	return [() => isSkeleton() ? <SkeletonText>{children()}</SkeletonText> : children(), () => isSkeleton() ? {
+		...unsafeStyle(),
+		"-webkit-text-fill-color": "transparent"
+	} : unsafeStyle()];
+}
+function useSkeletonIcon(styles) {
+	const isSkeleton = createIsSkeleton();
+	return () => mergeStyles(isSkeleton() ? skeletonIconStyles : void 0, access(styles) ?? void 0);
+}
+function SkeletonWrapper(props) {
+	const context = useContext(SkeletonContext);
+	const isLoading = () => readSkeletonContext(context);
+	const animationRef = useLoadingAnimation(() => isLoading() || false);
+	const inertRef = useInertAttribute(() => isLoading() || false);
+	if (isLoading() == null) return props.children;
+	return <SkeletonContext.Provider value={null}>
+      {isLoading() ? <span ref={(element) => {
+		animationRef(element);
+		inertRef(element);
+	}} class={loadingStyle}>
+          {props.children}
+        </span> : props.children}
+    </SkeletonContext.Provider>;
+}
+const skeletonCollectionCache = /* @__PURE__ */ new WeakMap();
+const SkeletonCollection = createLeafComponent((props, node) => {
+	const cacheKey = node ?? props;
+	let cached = skeletonCollectionCache.get(cacheKey);
+	if (!cached) {
+		cached = <Skeleton isLoading>{props.children()}</Skeleton>;
+		skeletonCollectionCache.set(cacheKey, cached);
+	}
+	return cached;
+});
+//#endregion
+export { Skeleton, SkeletonCollection, SkeletonContext, SkeletonText, SkeletonWrapper, createIsSkeleton, loadingStyle, useInertAttribute, useIsSkeleton, useLoadingAnimation, useSkeletonIcon, useSkeletonText };
+
+//# sourceMappingURL=index.jsx.map

package/dist/skeleton/index.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.jsx","names":[],"sources":["../../src/skeleton/index.tsx"],"sourcesContent":["import {\n  createContext,\n  createEffect,\n  createMemo,\n  createSignal,\n  onCleanup,\n  type Accessor,\n  type JSX,\n  useContext,\n} from \"solid-js\";\nimport { createLeafComponent } from \"@proyecto-viviana/solidaria-components\";\nimport { css } from \"../style/style-macro\" with { type: \"macro\" };\nimport type { StyleString } from \"../style\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport { color } from \"../style/spectrum-theme\" with { type: \"macro\" };\nimport { mergeStyles } from \"../style/runtime\";\n\nexport type SkeletonContextValue = boolean | null | Accessor<boolean | null | undefined>;\n\nexport interface SkeletonProps {\n  children: JSX.Element;\n  isLoading: boolean;\n}\n\nexport interface SkeletonCollectionProps {\n  children: () => JSX.Element;\n}\n\nexport const SkeletonContext = createContext<SkeletonContextValue>(null);\n\nfunction readSkeletonContext(value: SkeletonContextValue): boolean | null | undefined {\n  return typeof value === \"function\" ? value() : value;\n}\n\nexport function createIsSkeleton(): Accessor<boolean> {\n  const context = useContext(SkeletonContext);\n  return () => readSkeletonContext(context) || false;\n}\n\nexport function useIsSkeleton(): Accessor<boolean> {\n  return createIsSkeleton();\n}\n\nexport const loadingStyle = css(\n  `\n  background-image: linear-gradient(to right, ${color(\"gray-100\")} 33%, light-dark(${color(\n    \"gray-25\",\n  )}, ${color(\"gray-300\")}), ${color(\"gray-100\")} 66%);\n  background-size: 300%;\n  * {\n    visibility: hidden;\n  }\n`,\n  \"L\",\n);\n\nconst skeletonTextStyles = style({\n  color: \"transparent\",\n  boxDecorationBreak: \"clone\",\n  borderRadius: \"sm\",\n});\n\nconst skeletonIconStyles = style({\n  borderRadius: \"sm\",\n});\n\ntype MaybeAccessor<T> = T | Accessor<T>;\n\nfunction access<T>(value: MaybeAccessor<T>): T {\n  return typeof value === \"function\" ? (value as Accessor<T>)() : value;\n}\n\nfunction createPrefersReducedMotion(): Accessor<boolean> {\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") {\n    return () => false;\n  }\n\n  const mediaQuery = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n  if (!mediaQuery) {\n    return () => false;\n  }\n\n  const [matches, setMatches] = createSignal(mediaQuery.matches);\n  const handleChange = (event: MediaQueryListEvent) => setMatches(event.matches);\n\n  mediaQuery.addEventListener?.(\"change\", handleChange);\n  onCleanup(() => mediaQuery.removeEventListener?.(\"change\", handleChange));\n\n  return matches;\n}\n\nexport function useLoadingAnimation(\n  isAnimating: MaybeAccessor<boolean>,\n): (element: Element | null) => void {\n  const reduceMotion = createPrefersReducedMotion();\n  const [element, setElement] = createSignal<Element | null>(null);\n  let animation: Animation | undefined;\n\n  createEffect(() => {\n    const target = element();\n    const shouldAnimate = access(isAnimating) && !reduceMotion();\n\n    if (target && shouldAnimate && !animation && typeof target.animate === \"function\") {\n      animation = target.animate([{ backgroundPosition: \"100%\" }, { backgroundPosition: \"0%\" }], {\n        duration: 2000,\n        iterations: Infinity,\n        easing: \"ease-in-out\",\n      });\n      animation.startTime = 0;\n    } else if ((!target || !shouldAnimate) && animation) {\n      animation.cancel();\n      animation = undefined;\n    }\n  });\n\n  onCleanup(() => {\n    animation?.cancel();\n    animation = undefined;\n  });\n\n  return setElement;\n}\n\nexport function useInertAttribute(\n  isInert: MaybeAccessor<boolean>,\n): (element: Element | null) => void {\n  const [element, setElement] = createSignal<Element | null>(null);\n\n  createEffect(() => {\n    const target = element();\n    if (!target) {\n      return;\n    }\n\n    if (access(isInert)) {\n      target.setAttribute(\"inert\", \"true\");\n    } else {\n      target.removeAttribute(\"inert\");\n    }\n  });\n\n  return setElement;\n}\n\nexport function Skeleton(props: SkeletonProps): JSX.Element {\n  const isLoading = createMemo(() => props.isLoading);\n\n  return <SkeletonContext.Provider value={isLoading}>{props.children}</SkeletonContext.Provider>;\n}\n\nexport function SkeletonText(props: { children: JSX.Element }): JSX.Element {\n  const loadingAnimationRef = useLoadingAnimation(true);\n  const inertRef = useInertAttribute(true);\n\n  return (\n    <span\n      ref={(element) => {\n        loadingAnimationRef(element);\n        inertRef(element);\n      }}\n      class={`${loadingStyle} ${skeletonTextStyles}`}\n    >\n      {props.children}\n    </span>\n  );\n}\n\nexport function useSkeletonText(\n  children: Accessor<JSX.Element>,\n  unsafeStyle: Accessor<JSX.CSSProperties | undefined>,\n): [Accessor<JSX.Element>, Accessor<JSX.CSSProperties | undefined>] {\n  const isSkeleton = createIsSkeleton();\n\n  return [\n    () => (isSkeleton() ? <SkeletonText>{children()}</SkeletonText> : children()),\n    () =>\n      isSkeleton()\n        ? {\n            ...unsafeStyle(),\n            \"-webkit-text-fill-color\": \"transparent\",\n          }\n        : unsafeStyle(),\n  ];\n}\n\nexport function useSkeletonIcon(styles: MaybeAccessor<StyleString | undefined>): Accessor<string> {\n  const isSkeleton = createIsSkeleton();\n  return () =>\n    mergeStyles(isSkeleton() ? skeletonIconStyles : undefined, access(styles) ?? undefined);\n}\n\nexport function SkeletonWrapper(props: { children: JSX.Element }): JSX.Element {\n  const context = useContext(SkeletonContext);\n  const isLoading = () => readSkeletonContext(context);\n  const animationRef = useLoadingAnimation(() => isLoading() || false);\n  const inertRef = useInertAttribute(() => isLoading() || false);\n\n  if (isLoading() == null) {\n    return props.children;\n  }\n\n  return (\n    <SkeletonContext.Provider value={null}>\n      {isLoading() ? (\n        <span\n          ref={(element) => {\n            animationRef(element);\n            inertRef(element);\n          }}\n          class={loadingStyle}\n        >\n          {props.children}\n        </span>\n      ) : (\n        props.children\n      )}\n    </SkeletonContext.Provider>\n  );\n}\n\nconst skeletonCollectionCache = new WeakMap<object, JSX.Element>();\n\nexport const SkeletonCollection = createLeafComponent<SkeletonCollectionProps>((props, node) => {\n  const cacheKey = node ?? props;\n  let cached = skeletonCollectionCache.get(cacheKey as object);\n\n  if (!cached) {\n    cached = <Skeleton isLoading>{props.children()}</Skeleton>;\n    skeletonCollectionCache.set(cacheKey as object, cached);\n  }\n\n  return cached;\n});\n"],"mappings":";;;;AAYA,MAAa,kBAAe,cAAe,IAAA;AAC3C,SAAS,oBAAiB,OAA6B;CACvD,OAAS,OAAQ,UAAS,aAAe,MAAM,IAAC;AAChD;;CAEA,MAAO,UAAK,WAAA,eAAiC;;AAE7C;AACA,SAAgB,gBAAO;CACrB,OAAS,iBAAS;AACpB;;AAEA,MAAM,qBAAW;AACjB,MAAE,qBAAoB;;CAGtB,OAAO,OAAM,UAAe,aAAG,MAAc,IAAsB;;AAEnE,SAAS,6BAAgD;CACvD,IAAM,OAAO,WAAW,eAAa,OAAS,OAAM,eAAA,YACtD,aAAA;CAEA,MAAO,aAAS,OAAA,WAAoB,kCAAkB;CACpD,IAAM,CAAA,YACA,aAAO;;CAGf,MAAO,gBAAS,UAAmC,WAAA,MAAA,OAAA;CACjD,WAAO,mBAAkB,UAAA,YAAA;CAC3B,gBAAA,WAAA,sBAAA,UAAA,YAAA,CAAA;;AAEA;AACA,SAAE,oBAAA,aAAA;CACA,MAAA,eAAkB,2BAA4B;CAC5C,MAAM,CAAA,SAAG,cAAA,aAAA,IAAA;CACT,IAAI;CACN,mBAAiB;EACf,MAAA,SAAA,QAAA;EACA,MAAU,gBAAQ,OAAA,WAAA,KAAA,CAAA,aAAA;EACpB,IAAA,UAAA,iBAAA,CAAA,aAAA,OAAA,OAAA,YAAA,YAAA;GACD,YAAA,OAAA,QAAA,CACI,EACJ,oBAAA,OAAA,GAEK,EACI,oBAAY,KACpB,CACA,GAAa;IACb,UAAA;;IAEI,QAAkB;GACtB,CAAA;GACA,UAAA,YAAA;;GAEG,UAAiB,OAAM;;EAEpB;CACN,CAAA;CACF,gBAAA;;EAEQ,YAAC,KAAA;CACL,CAAC;CACD,OAAO;AACX;;CAEE,MAAM,CAAA,SAAY,cAAQ,aAAmC,IAAE;CAC7D,mBAAe;EACf,MAAU,SAAQ,QAAA;EACpB,IAAA,CAAA,QAAA;EAGM,IAAA,OAAA,OAAgB,GAAA,OAAA,aAAA,SAAA,MAAA;OAGZ,OAAM,gBAAW,OAAA;CAE3B,CAAA;CACF,OAAA;;AAEA,SAAgB,SAAA,OAAmB;CACjC,MAAA,YAAa,iBAAsB,MAAA,SAAA;CACjC,OAAO,CAAC,gBAAgB,SAAS,OAAA,YAAA,MAAA,SAAA,EAAA,gBAAA;AACrC;AACA,SAAgB,aAAa,OAAA;CAG3B,MAAA,sBAAmB,oBAAA,IAAA;CACjB,MAAM,WAAS,kBAAS,IAAA;CACxB,OAAM,CAAA,KAAA,MAAc,YAAS;;EAEzB,SAAS,OAAC;CACd,GAAE,OAAA,GAAW,aAAQ,GAAQ,sBAAsB;OAChD,MAAC,SAAc;IAClB,EAAE;AACN;AACA,SAAQ,gBAAA,UAAA,aAAA;CACJ,MAAE,aAAU,iBAAa;CACzB,OAAO,OACL,WAAkB,IAAA,CAAA,cAAA,SAAA,EAAA,EAAA,gBAAA,SAAA,SAClB,WAAY,IAAS;EACvB,GAAA,YAAA;EACA,2BAAA;kBAEF;AACF;AACA,SAAgB,gBAAS,QAAA;CACrB,MAAA,aAAA,iBAAA;;AAEJ;AACA,SAAA,gBAAA,OAEgB;CACd,MAAQ,UAAC,WAAc,eAAQ;CAC7B,MAAA,kBAAmB,oBAAc,OAAA;CACnC,MAAO,eAAS,0BAA2B,UAAc,KAAE,KAAK;;CAEhE,IAAA,UAAgB,KAAG,MACjB,OAAM,MAAS;CAEf,OAAQ,CAAA,gBAAA,SAAA,OAAA,MAAA;OACR,UAAA,IAAA,CAAA,KAAA,MAAA,YAAA;;EAEI,SAAO,OAAS;CACpB,GAAE,OAAO,cAAc;WAChB,MAAA,SAAA;QACL,EAAA,QAAO,MAAA,SAAuB;IAChC,EAAA,gBAAA;AACJ;;AAEA,MAAS,qBAAU,qBAAA,OAAA,SAAA;CACnB,MAAA,WAAA,QAAA;;CAEA,IAAO,CAAA,QAAS;EACR,SAAS,CAAC,SAAE,WAAiB,MAAM,SAAU,EAAA,EAAA;;CAEnD;CACF,OAAA"}

package/dist/slider/RangeSlider.d.ts

@@ -0,0 +1,54 @@
+import { type JSX } from "solid-js";
+import type { StyleString } from "../style";
+import { type RefLike, type SpectrumContextValue } from "../button/spectrum-context";
+export type RangeSliderSize = "S" | "M" | "L" | "XL" | "sm" | "md" | "lg";
+export type RangeSliderVariant = "default" | "accent";
+export type RangeSliderTrackStyle = "thin" | "thick";
+export type RangeSliderThumbStyle = "default" | "precise";
+export type RangeSliderLabelPosition = "top" | "side";
+export type RangeSliderLabelAlign = "start" | "end";
+export interface RangeValue {
+    start: number;
+    end: number;
+}
+export interface RangeSliderProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "class" | "style" | "onChange" | "onChangeEnd" | "ref"> {
+    value?: RangeValue;
+    defaultValue?: RangeValue;
+    onChange?: (value: RangeValue) => void;
+    onChangeEnd?: (value: RangeValue) => void;
+    minValue?: number;
+    maxValue?: number;
+    step?: number;
+    size?: RangeSliderSize;
+    /** Legacy alias. Prefer S2 `isEmphasized`. */
+    variant?: RangeSliderVariant;
+    isEmphasized?: boolean;
+    trackStyle?: RangeSliderTrackStyle;
+    thumbStyle?: RangeSliderThumbStyle;
+    class?: string;
+    label?: JSX.Element;
+    contextualHelp?: JSX.Element;
+    showOutput?: boolean;
+    labelPosition?: RangeSliderLabelPosition;
+    labelAlign?: RangeSliderLabelAlign;
+    startName?: string;
+    endName?: string;
+    form?: string;
+    isDisabled?: boolean;
+    formatOptions?: Intl.NumberFormatOptions;
+    styles?: StyleString;
+    UNSAFE_className?: string;
+    UNSAFE_style?: JSX.CSSProperties;
+    slot?: string | null;
+    ref?: RefLike<HTMLDivElement>;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-details"?: string;
+}
+export declare const RangeSliderContext: import("solid-js").Context<SpectrumContextValue<RangeSliderProps>>;
+/**
+ * A range slider allows users to select a numeric subset from a range.
+ */
+export declare function RangeSlider(props: RangeSliderProps): JSX.Element;
+//# sourceMappingURL=RangeSlider.d.ts.map

package/dist/slider/RangeSlider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeSlider.d.ts","sourceRoot":"","sources":["../../src/slider/RangeSlider.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,GAAG,EAUT,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAY5C,OAAO,EAKL,KAAK,OAAO,EACZ,KAAK,oBAAoB,EAC1B,MAAM,4BAA4B,CAAC;AAEpC,MAAM,MAAM,eAAe,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1E,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,QAAQ,CAAC;AACtD,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,OAAO,CAAC;AACrD,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,SAAS,CAAC;AAC1D,MAAM,MAAM,wBAAwB,GAAG,KAAK,GAAG,MAAM,CAAC;AACtD,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,KAAK,CAAC;AAEpD,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC,EAClC,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,GAAG,KAAK,CACpE;IACC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,wBAAwB,CAAC;IACzC,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC;IACzC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IACjC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,GAAG,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAcD,eAAO,MAAM,kBAAkB,oEAA8D,CAAC;AA6W9F;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAsgBhE"}

package/dist/slider/index.d.ts

@@ -0,0 +1,40 @@
+import { type JSX } from "solid-js";
+import { type SliderProps as HeadlessSliderProps } from "@proyecto-viviana/solidaria-components";
+import type { StyleString } from "../style";
+import { type RefLike, type SpectrumContextValue } from "../button/spectrum-context";
+export type SliderSize = "S" | "M" | "L" | "XL" | "sm" | "md" | "lg";
+export type SliderVariant = "default" | "accent";
+export type SliderTrackStyle = "thin" | "thick";
+export type SliderThumbStyle = "default" | "precise";
+export type SliderLabelPosition = "top" | "side";
+export type SliderLabelAlign = "start" | "end";
+export interface SliderProps extends Omit<HeadlessSliderProps, "class" | "style" | "children" | "label" | "slot" | "ref"> {
+    size?: SliderSize;
+    /** Legacy alias. Prefer S2 `isEmphasized`. */
+    variant?: SliderVariant;
+    isEmphasized?: boolean;
+    trackStyle?: SliderTrackStyle;
+    thumbStyle?: SliderThumbStyle;
+    fillOffset?: number;
+    class?: string;
+    label?: JSX.Element;
+    contextualHelp?: JSX.Element;
+    showOutput?: boolean;
+    showMinMax?: boolean;
+    labelPosition?: SliderLabelPosition;
+    labelAlign?: SliderLabelAlign;
+    styles?: StyleString;
+    UNSAFE_className?: string;
+    UNSAFE_style?: JSX.CSSProperties;
+    slot?: string | null;
+    ref?: RefLike<HTMLDivElement>;
+}
+export declare const SliderContext: import("solid-js").Context<SpectrumContextValue<SliderProps>>;
+/**
+ * A slider allows users to select a value from a range.
+ */
+export declare function Slider(props: SliderProps): JSX.Element;
+export type { SliderState, SliderOrientation } from "@proyecto-viviana/solid-stately";
+export { RangeSlider, RangeSliderContext } from "./RangeSlider";
+export type { RangeSliderLabelAlign, RangeSliderLabelPosition, RangeSliderProps, RangeSliderSize, RangeSliderThumbStyle, RangeSliderTrackStyle, RangeSliderVariant, } from "./RangeSlider";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/slider/index.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,GAAG,EAQT,MAAM,UAAU,CAAC;AAElB,OAAO,EAOL,KAAK,WAAW,IAAI,mBAAmB,EAIxC,MAAM,wCAAwC,CAAC;AAEhD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAY5C,OAAO,EAKL,KAAK,OAAO,EACZ,KAAK,oBAAoB,EAC1B,MAAM,4BAA4B,CAAC;AAEpC,MAAM,MAAM,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErE,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,QAAQ,CAAC;AACjD,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,CAAC;AAChD,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,SAAS,CAAC;AACrD,MAAM,MAAM,mBAAmB,GAAG,KAAK,GAAG,MAAM,CAAC;AACjD,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,KAAK,CAAC;AAE/C,MAAM,WAAW,WAAY,SAAQ,IAAI,CACvC,mBAAmB,EACnB,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,CAC1D;IACC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IACjC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,GAAG,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAC/B;AAUD,eAAO,MAAM,aAAa,+DAAyD,CAAC;AAuYpF;;GAEG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA2NtD;AAED,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAEtF,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAChE,YAAY,EACV,qBAAqB,EACrB,wBAAwB,EACxB,gBAAgB,EAChB,eAAe,EACf,qBAAqB,EACrB,qBAAqB,EACrB,kBAAkB,GACnB,MAAM,eAAe,CAAC"}

package/dist/slider/index.js

@@ -0,0 +1,2 @@
+import { i as RangeSliderContext, n as SliderContext, r as RangeSlider, t as Slider } from "../_chunk/slider.js";
+export { RangeSlider, RangeSliderContext, Slider, SliderContext };

package/dist/slider/index.jsx

@@ -0,0 +1,2 @@
+import { i as RangeSliderContext, n as SliderContext, r as RangeSlider, t as Slider } from "../_chunk/slider.jsx";
+export { RangeSlider, RangeSliderContext, Slider, SliderContext };

package/dist/statuslight/index.d.ts

@@ -0,0 +1,40 @@
+import { type JSX } from "solid-js";
+import type { StyleString } from "../style";
+import type { UnsafeClassName } from "../s2-internal/style-utils";
+import { type RefLike, type SpectrumContextValue } from "../button/spectrum-context";
+type StatusLightVariant = "informative" | "neutral" | "positive" | "notice" | "negative" | "metric" | "yellow" | "chartreuse" | "celery" | "seafoam" | "cyan" | "indigo" | "purple" | "fuchsia" | "magenta" | "pink" | "turquoise" | "brown" | "cinnamon" | "silver" | "success" | "warning";
+type StatusLightSize = "S" | "M" | "L" | "XL";
+export interface StatusLightProps {
+    /** The content to display as the label. */
+    children?: JSX.Element;
+    /**
+     * The variant changes the color of the status light.
+     * @default 'neutral'
+     */
+    variant?: StatusLightVariant;
+    /** The size of the status light. @default 'M' */
+    size?: StatusLightSize;
+    /**
+     * An accessibility role for the status light.
+     * Should be set when the status can change at runtime.
+     */
+    role?: "status";
+    /** Spectrum-defined generated classes. */
+    styles?: StyleString | (() => StyleString | undefined);
+    /** Additional CSS class name. Use only as a last resort. */
+    UNSAFE_className?: UnsafeClassName | string;
+    /** Additional inline styles. Use only as a last resort. */
+    UNSAFE_style?: JSX.CSSProperties;
+    id?: string;
+    slot?: string | null;
+    ref?: RefLike<HTMLDivElement>;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-details"?: string;
+    [key: `data-${string}`]: string | undefined;
+}
+export declare const StatusLightContext: import("solid-js").Context<SpectrumContextValue<StatusLightProps>>;
+export declare function StatusLight(props: StatusLightProps): JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/statuslight/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAqD,MAAM,UAAU,CAAC;AAGvF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAOlE,OAAO,EAKL,KAAK,OAAO,EACZ,KAAK,oBAAoB,EAC1B,MAAM,4BAA4B,CAAC;AAEpC,KAAK,kBAAkB,GACnB,aAAa,GACb,SAAS,GACT,UAAU,GACV,QAAQ,GACR,UAAU,GAKV,QAAQ,GACR,QAAQ,GACR,YAAY,GACZ,QAAQ,GACR,SAAS,GACT,MAAM,GACN,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,SAAS,GACT,MAAM,GACN,WAAW,GACX,OAAO,GACP,UAAU,GACV,QAAQ,GAKR,SAAS,GACT,SAAS,CAAC;AAId,KAAK,eAAe,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAa9C,MAAM,WAAW,gBAAgB;IAC/B,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,iDAAiD;IACjD,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,WAAW,GAAG,CAAC,MAAM,WAAW,GAAG,SAAS,CAAC,CAAC;IACvD,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,eAAe,GAAG,MAAM,CAAC;IAC5C,2DAA2D;IAC3D,YAAY,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IACjC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,GAAG,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,GAAG,SAAS,CAAC;CAC7C;AAED,eAAO,MAAM,kBAAkB,oEAA8D,CAAC;AAkF9F,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAyEhE"}