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

package/dist/StepList.js

@@ -1,16 +1,35 @@
-import { filterDOMProps, useRenderProps } from "./utils.js";
-import { addEventListener, createComponent, delegateEvents, effect, getNextElement, insert, mergeProps, runHydrationEvents, setAttribute, spread, template } from "solid-js/web";
-import { For, createContext, createMemo, splitProps, useContext } from "solid-js";
+/*
+* Copyright 2023 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/src/steplist/useStepList.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/steplist/useStepListItem.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/steplist/useStepListState.ts
+import { attrTrue, dataAttr, filterDOMProps, useRenderProps } from "./utils.js";
+import { createComponent, delegateEvents, effect, getNextElement, insert, runHydrationEvents, scope, setAttribute, spread, template } from "@solidjs/web";
+import { For, createContext, createMemo, useContext } from "solid-js";
 import { createStepList } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { createStepListState } from "@proyecto-viviana/solid-stately";
 //#region src/StepList.tsx
 /**
 * StepList component for solidaria-components
 *
 * A pre-wired headless step list component that combines state + aria hooks.
-* Renders an ordered list of steps with completion tracking.
+* Renders an ordered list of steps with completion tracking. Based on:
+* - packages/react-aria/src/steplist/useStepList.ts
+* - packages/react-aria/src/steplist/useStepListItem.ts
+* - packages/react-stately/src/steplist/useStepListState.ts
 */
-var _tmpl$ = /*#__PURE__*/ template(`<ol>`), _tmpl$2 = /*#__PURE__*/ template(`<li><a role=link>`);
+var _tmpl$ = /* @__PURE__ */ template(`<ol>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<li><a role=link>`);
 const StepListStateContext = createContext(null);
 const StepListContext = createContext(null);
 function useStepListState() {
@@ -37,18 +56,38 @@ function StepList(props) {
 		"class",
 		"style"
 	], ["aria-label", "aria-labelledby"]);
-	const state = createStepListState(createMemo(() => ({
-		items: local.items,
-		selectedKey: local.selectedKey,
-		defaultSelectedKey: local.defaultSelectedKey,
-		onSelectionChange: local.onSelectionChange,
-		lastCompletedStep: local.lastCompletedStep,
-		defaultLastCompletedStep: local.defaultLastCompletedStep,
-		onLastCompletedStepChange: local.onLastCompletedStepChange,
-		isDisabled: local.isDisabled,
-		isReadOnly: local.isReadOnly,
-		disabledKeys: local.disabledKeys
-	}))());
+	const state = createStepListState({
+		get items() {
+			return local.items;
+		},
+		get selectedKey() {
+			return local.selectedKey;
+		},
+		get defaultSelectedKey() {
+			return local.defaultSelectedKey;
+		},
+		get onSelectionChange() {
+			return local.onSelectionChange;
+		},
+		get lastCompletedStep() {
+			return local.lastCompletedStep;
+		},
+		get defaultLastCompletedStep() {
+			return local.defaultLastCompletedStep;
+		},
+		get onLastCompletedStepChange() {
+			return local.onLastCompletedStepChange;
+		},
+		get isDisabled() {
+			return local.isDisabled;
+		},
+		get isReadOnly() {
+			return local.isReadOnly;
+		},
+		get disabledKeys() {
+			return local.disabledKeys;
+		}
+	});
 	const { stepListProps } = createStepList({
 		get "aria-label"() {
 			return ariaProps["aria-label"];
@@ -64,21 +103,25 @@ function StepList(props) {
 		defaultClassName: "solidaria-StepList"
 	}, renderValues);
 	const domProps = createMemo(() => filterDOMProps(domRest, { global: true }));
-	return createComponent(StepListStateContext.Provider, {
+	return createComponent(StepListStateContext, {
 		value: state,
 		get children() {
 			var _el$ = getNextElement(_tmpl$);
-			spread(_el$, mergeProps(stepListProps, domProps, {
-				get ["class"]() {
-					return renderProps.class();
-				},
-				get style() {
-					return renderProps.style();
-				},
-				get ["data-disabled"]() {
-					return state.isDisabled() || void 0;
+			spread(_el$, [
+				stepListProps,
+				domProps,
+				{
+					get "class"() {
+						return renderProps.class();
+					},
+					get style() {
+						return renderProps.style();
+					},
+					get "data-disabled"() {
+						return dataAttr(state.isDisabled());
+					}
 				}
-			}), false, true);
+			], true);
 			insert(_el$, createComponent(For, {
 				get each() {
 					return local.items;
@@ -144,47 +187,48 @@ function Step(props) {
 			if (selectable()) state.setSelectedKey(local.item.key);
 		}
 	};
-	return (() => {
-		var _el$2 = getNextElement(_tmpl$2), _el$3 = _el$2.firstChild;
-		spread(_el$2, mergeProps(domProps, {
-			get ["class"]() {
-				return local.class;
-			},
-			get style() {
-				return local.style;
-			},
-			get ["data-selected"]() {
-				return isSelected() || void 0;
-			},
-			get ["data-completed"]() {
-				return isCompleted() || void 0;
-			},
-			get ["data-disabled"]() {
-				return !selectable() || void 0;
-			},
-			get ["data-selectable"]() {
-				return selectable() || void 0;
-			}
-		}), false, true);
-		addEventListener(_el$3, "keydown", handleKeyDown);
-		_el$3.$$click = handleClick;
-		insert(_el$3, () => local.children);
-		effect((_p$) => {
-			var _v$ = isSelected() ? "step" : void 0, _v$2 = !selectable() ? true : void 0, _v$3 = selectable() ? 0 : void 0;
-			_v$ !== _p$.e && setAttribute(_el$3, "aria-current", _p$.e = _v$);
-			_v$2 !== _p$.t && setAttribute(_el$3, "aria-disabled", _p$.t = _v$2);
-			_v$3 !== _p$.a && setAttribute(_el$3, "tabindex", _p$.a = _v$3);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0,
-			a: void 0
-		});
-		runHydrationEvents();
-		return _el$2;
-	})();
+	var _el$2 = getNextElement(_tmpl$2);
+	var _el$3 = _el$2.firstChild;
+	spread(_el$2, [domProps, {
+		get "class"() {
+			return local.class;
+		},
+		get style() {
+			return local.style;
+		},
+		get "data-selected"() {
+			return dataAttr(isSelected());
+		},
+		get "data-completed"() {
+			return dataAttr(isCompleted());
+		},
+		get "data-disabled"() {
+			return dataAttr(!selectable());
+		},
+		get "data-selectable"() {
+			return dataAttr(selectable());
+		}
+	}], true);
+	_el$3._$$keydown = handleKeyDown;
+	_el$3._$$click = handleClick;
+	insert(_el$3, scope(() => {
+		return local.children;
+	}));
+	effect(() => {
+		return {
+			e: isSelected() ? "step" : void 0,
+			t: attrTrue(!selectable()),
+			a: selectable() ? 0 : void 0
+		};
+	}, ({ e, t, a }, _p$) => {
+		e !== _p$?.e && setAttribute(_el$3, "aria-current", e);
+		t !== _p$?.t && setAttribute(_el$3, "aria-disabled", t);
+		a !== _p$?.a && setAttribute(_el$3, "tabindex", a);
+	});
+	runHydrationEvents();
+	return _el$2;
 }
-delegateEvents(["click"]);
+delegateEvents(["click", "keydown"]);
 //#endregion
 export { Step, StepList, StepListContext, StepListStateContext, useStepListState };
 

package/dist/StepList.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepList.js","names":["JSX","createContext","createMemo","splitProps","useContext","For","createStepListState","StepListState","StepListStateProps","Key","createStepList","AriaStepListProps","ClassNameOrFunction","StyleOrFunction","useRenderProps","filterDOMProps","StepListItemRenderProps","isSelected","isCompleted","isDisabled","isSelectable","stepNumber","stepStateText","StepListRenderProps","StepListProps","key","label","items","T","selectedKey","defaultSelectedKey","onSelectionChange","lastCompletedStep","defaultLastCompletedStep","onLastCompletedStepChange","isReadOnly","disabledKeys","Iterable","children","item","state","Element","class","style","StepProps","CSSProperties","StepListStateContext","StepListContext","useStepListState","ctx","Error","StepList","props","local","ariaProps","domRest","stateProps","stepListProps","aria-label","aria-labelledby","renderValues","renderProps","defaultClassName","domProps","Record","global","_$createComponent","Provider","value","_el$","_$getNextElement","_tmpl$","_$spread","_$mergeProps","data-disabled","undefined","_$insert","each","index","_$runHydrationEvents","Step","selectable","handleClick","e","MouseEvent","preventDefault","setSelectedKey","handleKeyDown","KeyboardEvent","_el$2","_tmpl$2","_el$3","firstChild","data-selected","data-completed","data-selectable","_$addEventListener","$$click","_$effect","_p$","_v$","_v$2","_v$3","_$setAttribute","t","a","_$delegateEvents"],"sources":["../src/StepList.tsx"],"sourcesContent":["/**\n * StepList component for solidaria-components\n *\n * A pre-wired headless step list component that combines state + aria hooks.\n * Renders an ordered list of steps with completion tracking.\n */\n\nimport { type JSX, createContext, createMemo, splitProps, useContext, For } from \"solid-js\";\nimport {\n  createStepListState,\n  type StepListState,\n  type StepListStateProps,\n  type Key,\n} from \"@proyecto-viviana/solid-stately\";\nimport { createStepList, type AriaStepListProps } from \"@proyecto-viviana/solidaria\";\nimport {\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  useRenderProps,\n  filterDOMProps,\n} from \"./utils\";\n\nexport interface StepListItemRenderProps {\n  /** Whether this step is currently selected. */\n  isSelected: boolean;\n  /** Whether this step is completed. */\n  isCompleted: boolean;\n  /** Whether this step is disabled. */\n  isDisabled: boolean;\n  /** Whether this step can be selected. */\n  isSelectable: boolean;\n  /** The 1-based step number. */\n  stepNumber: number;\n  /** Accessible text describing the step state. */\n  stepStateText: string;\n}\n\nexport interface StepListRenderProps {\n  /** Whether the step list is disabled. */\n  isDisabled: boolean;\n}\n\nexport interface StepListProps<T extends { key: Key; label: string }> extends AriaStepListProps {\n  /** The step items. */\n  items: T[];\n  /** The currently selected step key (controlled). */\n  selectedKey?: Key;\n  /** The default selected step key (uncontrolled). */\n  defaultSelectedKey?: Key;\n  /** Called when the selected step changes. */\n  onSelectionChange?: (key: Key) => void;\n  /** The last completed step key (controlled). */\n  lastCompletedStep?: Key;\n  /** The default last completed step key (uncontrolled). */\n  defaultLastCompletedStep?: Key;\n  /** Called when last completed step changes. */\n  onLastCompletedStepChange?: (key: Key | null) => void;\n  /** Whether all steps are disabled. */\n  isDisabled?: boolean;\n  /** Whether all steps are read-only. */\n  isReadOnly?: boolean;\n  /** Keys of individually disabled steps. */\n  disabledKeys?: Iterable<Key>;\n  /** Render function for each step item. */\n  children: (item: T, state: StepListItemRenderProps) => JSX.Element;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<StepListRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<StepListRenderProps>;\n}\n\nexport interface StepProps {\n  /** The step item. */\n  item: { key: Key; label: string };\n  /** The 1-based step number. */\n  stepNumber: number;\n  /** The children to render inside the step. */\n  children?: JSX.Element;\n  /** The CSS className for the element. */\n  class?: string;\n  /** The inline style for the element. */\n  style?: JSX.CSSProperties;\n}\n\nexport const StepListStateContext = createContext<StepListState | null>(null);\nexport const StepListContext = createContext<{} | null>(null);\n\nexport function useStepListState(): StepListState {\n  const ctx = useContext(StepListStateContext);\n  if (!ctx) throw new Error(\"useStepListState must be used within a StepList\");\n  return ctx;\n}\n\n/**\n * StepList displays a sequence of steps with completion tracking and selection.\n */\nexport function StepList<T extends { key: Key; label: string }>(\n  props: StepListProps<T>,\n): JSX.Element {\n  const [local, ariaProps, domRest] = splitProps(\n    props,\n    [\n      \"items\",\n      \"selectedKey\",\n      \"defaultSelectedKey\",\n      \"onSelectionChange\",\n      \"lastCompletedStep\",\n      \"defaultLastCompletedStep\",\n      \"onLastCompletedStepChange\",\n      \"isDisabled\",\n      \"isReadOnly\",\n      \"disabledKeys\",\n      \"children\",\n      \"class\",\n      \"style\",\n    ],\n    [\"aria-label\", \"aria-labelledby\"],\n  );\n\n  const stateProps = createMemo<StepListStateProps>(() => ({\n    items: local.items,\n    selectedKey: local.selectedKey,\n    defaultSelectedKey: local.defaultSelectedKey,\n    onSelectionChange: local.onSelectionChange,\n    lastCompletedStep: local.lastCompletedStep,\n    defaultLastCompletedStep: local.defaultLastCompletedStep,\n    onLastCompletedStepChange: local.onLastCompletedStepChange,\n    isDisabled: local.isDisabled,\n    isReadOnly: local.isReadOnly,\n    disabledKeys: local.disabledKeys,\n  }));\n\n  const state = createStepListState(stateProps());\n\n  // Create ARIA props\n  const { stepListProps } = createStepList(\n    {\n      get \"aria-label\"() {\n        return ariaProps[\"aria-label\"];\n      },\n      get \"aria-labelledby\"() {\n        return ariaProps[\"aria-labelledby\"];\n      },\n    },\n    state,\n  );\n\n  const renderValues = createMemo<StepListRenderProps>(() => ({\n    isDisabled: state.isDisabled(),\n  }));\n\n  const renderProps = useRenderProps(\n    {\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-StepList\",\n    },\n    renderValues,\n  );\n\n  const domProps = createMemo(() =>\n    filterDOMProps(domRest as Record<string, unknown>, { global: true }),\n  );\n\n  return (\n    <StepListStateContext.Provider value={state}>\n      <ol\n        {...stepListProps}\n        {...domProps()}\n        class={renderProps.class()}\n        style={renderProps.style()}\n        data-disabled={state.isDisabled() || undefined}\n      >\n        <For each={local.items}>\n          {(item, index) => {\n            const stepNumber = () => index() + 1;\n\n            // Build render props as a static snapshot for the initial render.\n            const renderProps: StepListItemRenderProps = {\n              get isSelected() {\n                return state.selectedKey() === item.key;\n              },\n              get isCompleted() {\n                return state.isCompleted(item.key);\n              },\n              get isDisabled() {\n                return state.isDisabled() || !state.isSelectable(item.key);\n              },\n              get isSelectable() {\n                return state.isSelectable(item.key);\n              },\n              get stepNumber() {\n                return stepNumber();\n              },\n              get stepStateText() {\n                if (state.selectedKey() === item.key) return \"Current\";\n                if (state.isCompleted(item.key)) return \"Completed\";\n                return \"Not completed\";\n              },\n            };\n\n            return local.children(item, renderProps);\n          }}\n        </For>\n      </ol>\n    </StepListStateContext.Provider>\n  );\n}\n\n/**\n * Step represents an individual step within a StepList.\n * Renders as an `<li>` wrapping an `<a>` with accessible step props.\n */\nexport function Step(props: StepProps): JSX.Element {\n  const [local, domProps] = splitProps(props, [\"item\", \"stepNumber\", \"children\", \"class\", \"style\"]);\n\n  const state = useStepListState();\n\n  const isSelected = () => state.selectedKey() === local.item.key;\n  const isCompleted = () => state.isCompleted(local.item.key);\n  const selectable = () => state.isSelectable(local.item.key);\n\n  const handleClick = (e: MouseEvent) => {\n    e.preventDefault();\n    if (selectable()) {\n      state.setSelectedKey(local.item.key);\n    }\n  };\n\n  const handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === \"ArrowUp\" || e.key === \"ArrowDown\") {\n      e.preventDefault();\n      return;\n    }\n    if (e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      if (selectable()) {\n        state.setSelectedKey(local.item.key);\n      }\n    }\n  };\n\n  return (\n    <li\n      {...domProps}\n      class={local.class}\n      style={local.style}\n      data-selected={isSelected() || undefined}\n      data-completed={isCompleted() || undefined}\n      data-disabled={!selectable() || undefined}\n      data-selectable={selectable() || undefined}\n    >\n      <a\n        role=\"link\"\n        aria-current={isSelected() ? \"step\" : undefined}\n        aria-disabled={!selectable() ? true : undefined}\n        tabIndex={selectable() ? 0 : undefined}\n        onClick={handleClick}\n        on:keydown={handleKeyDown}\n      >\n        {local.children}\n      </a>\n    </li>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"StepList.js","names":["<StepListStateContext value={state}>\n      <ol\n        {...stepListProps}\n        {...domProps()}\n        class={renderProps.class()}\n        style={renderProps.style()}\n        data-disabled={dataAttr(state.isDisabled())}\n      >\n        <For each={local.items}>\n          {(item, index) => {\n            const stepNumber = () => index() + 1;\n\n            // Build render props as a static snapshot for the initial render.\n            const renderProps: StepListItemRenderProps = {\n              get isSelected() {\n                return state.selectedKey() === item.key;\n              },\n              get isCompleted() {\n                return state.isCompleted(item.key);\n              },\n              get isDisabled() {\n                return state.isDisabled() || !state.isSelectable(item.key);\n              },\n              get isSelectable() {\n                return state.isSelectable(item.key);\n              },\n              get stepNumber() {\n                return stepNumber();\n              },\n              get stepStateText() {\n                if (state.selectedKey() === item.key) return \"Current\";\n                if (state.isCompleted(item.key)) return \"Completed\";\n                return \"Not completed\";\n              },\n            };\n\n            return local.children(item, renderProps);\n          }}\n        </For>\n      </ol>\n    </StepListStateContext>","value={state}","<For each={local.items}>\n          {(item, index) => {\n            const stepNumber = () => index() + 1;\n\n            // Build render props as a static snapshot for the initial render.\n            const renderProps: StepListItemRenderProps = {\n              get isSelected() {\n                return state.selectedKey() === item.key;\n              },\n              get isCompleted() {\n                return state.isCompleted(item.key);\n              },\n              get isDisabled() {\n                return state.isDisabled() || !state.isSelectable(item.key);\n              },\n              get isSelectable() {\n                return state.isSelectable(item.key);\n              },\n              get stepNumber() {\n                return stepNumber();\n              },\n              get stepStateText() {\n                if (state.selectedKey() === item.key) return \"Current\";\n                if (state.isCompleted(item.key)) return \"Completed\";\n                return \"Not completed\";\n              },\n            };\n\n            return local.children(item, renderProps);\n          }}\n        </For>","<ol\n        {...stepListProps}\n        {...domProps()}\n        class={renderProps.class()}\n        style={renderProps.style()}\n        data-disabled={dataAttr(state.isDisabled())}\n      >\n        <For each={local.items}>\n          {(item, index) => {\n            const stepNumber = () => index() + 1;\n\n            // Build render props as a static snapshot for the initial render.\n            const renderProps: StepListItemRenderProps = {\n              get isSelected() {\n                return state.selectedKey() === item.key;\n              },\n              get isCompleted() {\n                return state.isCompleted(item.key);\n              },\n              get isDisabled() {\n                return state.isDisabled() || !state.isSelectable(item.key);\n              },\n              get isSelectable() {\n                return state.isSelectable(item.key);\n              },\n              get stepNumber() {\n                return stepNumber();\n              },\n              get stepStateText() {\n                if (state.selectedKey() === item.key) return \"Current\";\n                if (state.isCompleted(item.key)) return \"Completed\";\n                return \"Not completed\";\n              },\n            };\n\n            return local.children(item, renderProps);\n          }}\n        </For>\n      </ol>","{local.children}","aria-disabled={attrTrue(!selectable())}","tabindex={selectable() ? 0 : undefined}","<li\n      {...domProps}\n      class={local.class}\n      style={local.style}\n      data-selected={dataAttr(isSelected())}\n      data-completed={dataAttr(isCompleted())}\n      data-disabled={dataAttr(!selectable())}\n      data-selectable={dataAttr(selectable())}\n    >\n      <a\n        role=\"link\"\n        aria-current={isSelected() ? \"step\" : undefined}\n        aria-disabled={attrTrue(!selectable())}\n        tabindex={selectable() ? 0 : undefined}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n      >\n        {local.children}\n      </a>\n    </li>"],"sources":["../src/StepList.tsx"],"sourcesContent":["/*\n * Copyright 2023 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/src/steplist/useStepList.ts\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/steplist/useStepListItem.ts\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/steplist/useStepListState.ts\n\n/**\n * StepList component for solidaria-components\n *\n * A pre-wired headless step list component that combines state + aria hooks.\n * Renders an ordered list of steps with completion tracking. Based on:\n * - packages/react-aria/src/steplist/useStepList.ts\n * - packages/react-aria/src/steplist/useStepListItem.ts\n * - packages/react-stately/src/steplist/useStepListState.ts\n */\n\nimport { createContext, createMemo, useContext, For } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { createStepListState, type StepListState, type Key } from \"@proyecto-viviana/solid-stately\";\nimport { createStepList, type AriaStepListProps } from \"@proyecto-viviana/solidaria\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  useRenderProps,\n  filterDOMProps,\n  dataAttr,\n  attrTrue,\n} from \"./utils\";\n\nexport interface StepListItemRenderProps {\n  /** Whether this step is currently selected. */\n  isSelected: boolean;\n  /** Whether this step is completed. */\n  isCompleted: boolean;\n  /** Whether this step is disabled. */\n  isDisabled: boolean;\n  /** Whether this step can be selected. */\n  isSelectable: boolean;\n  /** The 1-based step number. */\n  stepNumber: number;\n  /** Accessible text describing the step state. */\n  stepStateText: string;\n}\n\nexport interface StepListRenderProps {\n  /** Whether the step list is disabled. */\n  isDisabled: boolean;\n}\n\nexport interface StepListProps<T extends { key: Key; label: string }> extends AriaStepListProps {\n  /** The step items. */\n  items: T[];\n  /** The currently selected step key (controlled). */\n  selectedKey?: Key;\n  /** The default selected step key (uncontrolled). */\n  defaultSelectedKey?: Key;\n  /** Called when the selected step changes. */\n  onSelectionChange?: (key: Key) => void;\n  /** The last completed step key (controlled). */\n  lastCompletedStep?: Key;\n  /** The default last completed step key (uncontrolled). */\n  defaultLastCompletedStep?: Key;\n  /** Called when last completed step changes. */\n  onLastCompletedStepChange?: (key: Key | null) => void;\n  /** Whether all steps are disabled. */\n  isDisabled?: boolean;\n  /** Whether all steps are read-only. */\n  isReadOnly?: boolean;\n  /** Keys of individually disabled steps. */\n  disabledKeys?: Iterable<Key>;\n  /** Render function for each step item. */\n  children: (item: T, state: StepListItemRenderProps) => JSX.Element;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<StepListRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<StepListRenderProps>;\n}\n\nexport interface StepProps {\n  /** The step item. */\n  item: { key: Key; label: string };\n  /** The 1-based step number. */\n  stepNumber: number;\n  /** The children to render inside the step. */\n  children?: JSX.Element;\n  /** The CSS className for the element. */\n  class?: string;\n  /** The inline style for the element. */\n  style?: JSX.CSSProperties;\n}\n\nexport const StepListStateContext = createContext<StepListState | null>(null);\nexport const StepListContext = createContext<{} | null>(null);\n\nexport function useStepListState(): StepListState {\n  const ctx = useContext(StepListStateContext);\n  if (!ctx) throw new Error(\"useStepListState must be used within a StepList\");\n  return ctx;\n}\n\n/**\n * StepList displays a sequence of steps with completion tracking and selection.\n */\nexport function StepList<T extends { key: Key; label: string }>(\n  props: StepListProps<T>,\n): JSX.Element {\n  const [local, ariaProps, domRest] = splitProps(\n    props,\n    [\n      \"items\",\n      \"selectedKey\",\n      \"defaultSelectedKey\",\n      \"onSelectionChange\",\n      \"lastCompletedStep\",\n      \"defaultLastCompletedStep\",\n      \"onLastCompletedStepChange\",\n      \"isDisabled\",\n      \"isReadOnly\",\n      \"disabledKeys\",\n      \"children\",\n      \"class\",\n      \"style\",\n    ],\n    [\"aria-label\", \"aria-labelledby\"],\n  );\n\n  // Staying-mounted getters. `createMemo(() => ({ isDisabled: local.isDisabled }))`\n  // then `stateProps()` is a one-shot snapshot; createStepListState re-reads\n  // props.isDisabled / isReadOnly / disabledKeys only if those names stay live.\n  const state = createStepListState({\n    get items() {\n      return local.items;\n    },\n    get selectedKey() {\n      return local.selectedKey;\n    },\n    get defaultSelectedKey() {\n      return local.defaultSelectedKey;\n    },\n    get onSelectionChange() {\n      return local.onSelectionChange;\n    },\n    get lastCompletedStep() {\n      return local.lastCompletedStep;\n    },\n    get defaultLastCompletedStep() {\n      return local.defaultLastCompletedStep;\n    },\n    get onLastCompletedStepChange() {\n      return local.onLastCompletedStepChange;\n    },\n    get isDisabled() {\n      return local.isDisabled;\n    },\n    get isReadOnly() {\n      return local.isReadOnly;\n    },\n    get disabledKeys() {\n      return local.disabledKeys;\n    },\n  });\n\n  // Create ARIA props\n  const { stepListProps } = createStepList(\n    {\n      get \"aria-label\"() {\n        return ariaProps[\"aria-label\"];\n      },\n      get \"aria-labelledby\"() {\n        return ariaProps[\"aria-labelledby\"];\n      },\n    },\n    state,\n  );\n\n  const renderValues = createMemo<StepListRenderProps>(() => ({\n    isDisabled: state.isDisabled(),\n  }));\n\n  const renderProps = useRenderProps(\n    {\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-StepList\",\n    },\n    renderValues,\n  );\n\n  const domProps = createMemo(() =>\n    filterDOMProps(domRest as Record<string, unknown>, { global: true }),\n  );\n\n  return (\n    <StepListStateContext value={state}>\n      <ol\n        {...stepListProps}\n        {...domProps()}\n        class={renderProps.class()}\n        style={renderProps.style()}\n        data-disabled={dataAttr(state.isDisabled())}\n      >\n        <For each={local.items}>\n          {(item, index) => {\n            const stepNumber = () => index() + 1;\n\n            // Build render props as a static snapshot for the initial render.\n            const renderProps: StepListItemRenderProps = {\n              get isSelected() {\n                return state.selectedKey() === item.key;\n              },\n              get isCompleted() {\n                return state.isCompleted(item.key);\n              },\n              get isDisabled() {\n                return state.isDisabled() || !state.isSelectable(item.key);\n              },\n              get isSelectable() {\n                return state.isSelectable(item.key);\n              },\n              get stepNumber() {\n                return stepNumber();\n              },\n              get stepStateText() {\n                if (state.selectedKey() === item.key) return \"Current\";\n                if (state.isCompleted(item.key)) return \"Completed\";\n                return \"Not completed\";\n              },\n            };\n\n            return local.children(item, renderProps);\n          }}\n        </For>\n      </ol>\n    </StepListStateContext>\n  );\n}\n\n/**\n * Step represents an individual step within a StepList.\n * Renders as an `<li>` wrapping an `<a>` with accessible step props.\n */\nexport function Step(props: StepProps): JSX.Element {\n  const [local, domProps] = splitProps(props, [\"item\", \"stepNumber\", \"children\", \"class\", \"style\"]);\n\n  const state = useStepListState();\n\n  const isSelected = () => state.selectedKey() === local.item.key;\n  const isCompleted = () => state.isCompleted(local.item.key);\n  const selectable = () => state.isSelectable(local.item.key);\n\n  const handleClick = (e: MouseEvent) => {\n    e.preventDefault();\n    if (selectable()) {\n      state.setSelectedKey(local.item.key);\n    }\n  };\n\n  const handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === \"ArrowUp\" || e.key === \"ArrowDown\") {\n      e.preventDefault();\n      return;\n    }\n    if (e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      if (selectable()) {\n        state.setSelectedKey(local.item.key);\n      }\n    }\n  };\n\n  return (\n    <li\n      {...domProps}\n      class={local.class}\n      style={local.style}\n      data-selected={dataAttr(isSelected())}\n      data-completed={dataAttr(isCompleted())}\n      data-disabled={dataAttr(!selectable())}\n      data-selectable={dataAttr(selectable())}\n    >\n      <a\n        role=\"link\"\n        aria-current={isSelected() ? \"step\" : undefined}\n        aria-disabled={attrTrue(!selectable())}\n        tabindex={selectable() ? 0 : undefined}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n      >\n        {local.children}\n      </a>\n    </li>\n  );\n}\n"],"mappings":"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"}

package/dist/StepList.jsx

@@ -1,13 +1,31 @@
-import { filterDOMProps, useRenderProps } from "./utils.jsx";
-import { For, createContext, createMemo, splitProps, useContext } from "solid-js";
+/*
+* Copyright 2023 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/src/steplist/useStepList.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/steplist/useStepListItem.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/steplist/useStepListState.ts
+import { attrTrue, dataAttr, filterDOMProps, useRenderProps } from "./utils.jsx";
+import { For, createContext, createMemo, useContext } from "solid-js";
 import { createStepList } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { createStepListState } from "@proyecto-viviana/solid-stately";
 //#region src/StepList.tsx
 /**
 * StepList component for solidaria-components
 *
 * A pre-wired headless step list component that combines state + aria hooks.
-* Renders an ordered list of steps with completion tracking.
+* Renders an ordered list of steps with completion tracking. Based on:
+* - packages/react-aria/src/steplist/useStepList.ts
+* - packages/react-aria/src/steplist/useStepListItem.ts
+* - packages/react-stately/src/steplist/useStepListState.ts
 */
 const StepListStateContext = createContext(null);
 const StepListContext = createContext(null);
@@ -35,18 +53,38 @@ function StepList(props) {
 		"class",
 		"style"
 	], ["aria-label", "aria-labelledby"]);
-	const state = createStepListState(createMemo(() => ({
-		items: local.items,
-		selectedKey: local.selectedKey,
-		defaultSelectedKey: local.defaultSelectedKey,
-		onSelectionChange: local.onSelectionChange,
-		lastCompletedStep: local.lastCompletedStep,
-		defaultLastCompletedStep: local.defaultLastCompletedStep,
-		onLastCompletedStepChange: local.onLastCompletedStepChange,
-		isDisabled: local.isDisabled,
-		isReadOnly: local.isReadOnly,
-		disabledKeys: local.disabledKeys
-	}))());
+	const state = createStepListState({
+		get items() {
+			return local.items;
+		},
+		get selectedKey() {
+			return local.selectedKey;
+		},
+		get defaultSelectedKey() {
+			return local.defaultSelectedKey;
+		},
+		get onSelectionChange() {
+			return local.onSelectionChange;
+		},
+		get lastCompletedStep() {
+			return local.lastCompletedStep;
+		},
+		get defaultLastCompletedStep() {
+			return local.defaultLastCompletedStep;
+		},
+		get onLastCompletedStepChange() {
+			return local.onLastCompletedStepChange;
+		},
+		get isDisabled() {
+			return local.isDisabled;
+		},
+		get isReadOnly() {
+			return local.isReadOnly;
+		},
+		get disabledKeys() {
+			return local.disabledKeys;
+		}
+	});
 	const { stepListProps } = createStepList({
 		get "aria-label"() {
 			return ariaProps["aria-label"];
@@ -62,8 +100,8 @@ function StepList(props) {
 		defaultClassName: "solidaria-StepList"
 	}, renderValues);
 	const domProps = createMemo(() => filterDOMProps(domRest, { global: true }));
-	return <StepListStateContext.Provider value={state}>
-      <ol {...stepListProps} {...domProps()} class={renderProps.class()} style={renderProps.style()} data-disabled={state.isDisabled() || void 0}>
+	return <StepListStateContext value={state}>
+      <ol {...stepListProps} {...domProps()} class={renderProps.class()} style={renderProps.style()} data-disabled={dataAttr(state.isDisabled())}>
         <For each={local.items}>
           {(item, index) => {
 		const stepNumber = () => index() + 1;
@@ -92,7 +130,7 @@ function StepList(props) {
 	}}
         </For>
       </ol>
-    </StepListStateContext.Provider>;
+    </StepListStateContext>;
 }
 /**
 * Step represents an individual step within a StepList.
@@ -124,8 +162,8 @@ function Step(props) {
 			if (selectable()) state.setSelectedKey(local.item.key);
 		}
 	};
-	return <li {...domProps} class={local.class} style={local.style} data-selected={isSelected() || void 0} data-completed={isCompleted() || void 0} data-disabled={!selectable() || void 0} data-selectable={selectable() || void 0}>
-      <a role="link" aria-current={isSelected() ? "step" : void 0} aria-disabled={!selectable() ? true : void 0} tabIndex={selectable() ? 0 : void 0} onClick={handleClick} on:keydown={handleKeyDown}>
+	return <li {...domProps} class={local.class} style={local.style} data-selected={dataAttr(isSelected())} data-completed={dataAttr(isCompleted())} data-disabled={dataAttr(!selectable())} data-selectable={dataAttr(selectable())}>
+      <a role="link" aria-current={isSelected() ? "step" : void 0} aria-disabled={attrTrue(!selectable())} tabindex={selectable() ? 0 : void 0} onClick={handleClick} onKeyDown={handleKeyDown}>
         {local.children}
       </a>
     </li>;

package/dist/StepList.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"StepList.jsx","names":[],"sources":["../src/StepList.tsx"],"sourcesContent":["/**\n * StepList component for solidaria-components\n *\n * A pre-wired headless step list component that combines state + aria hooks.\n * Renders an ordered list of steps with completion tracking.\n */\n\nimport { type JSX, createContext, createMemo, splitProps, useContext, For } from \"solid-js\";\nimport {\n  createStepListState,\n  type StepListState,\n  type StepListStateProps,\n  type Key,\n} from \"@proyecto-viviana/solid-stately\";\nimport { createStepList, type AriaStepListProps } from \"@proyecto-viviana/solidaria\";\nimport {\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  useRenderProps,\n  filterDOMProps,\n} from \"./utils\";\n\nexport interface StepListItemRenderProps {\n  /** Whether this step is currently selected. */\n  isSelected: boolean;\n  /** Whether this step is completed. */\n  isCompleted: boolean;\n  /** Whether this step is disabled. */\n  isDisabled: boolean;\n  /** Whether this step can be selected. */\n  isSelectable: boolean;\n  /** The 1-based step number. */\n  stepNumber: number;\n  /** Accessible text describing the step state. */\n  stepStateText: string;\n}\n\nexport interface StepListRenderProps {\n  /** Whether the step list is disabled. */\n  isDisabled: boolean;\n}\n\nexport interface StepListProps<T extends { key: Key; label: string }> extends AriaStepListProps {\n  /** The step items. */\n  items: T[];\n  /** The currently selected step key (controlled). */\n  selectedKey?: Key;\n  /** The default selected step key (uncontrolled). */\n  defaultSelectedKey?: Key;\n  /** Called when the selected step changes. */\n  onSelectionChange?: (key: Key) => void;\n  /** The last completed step key (controlled). */\n  lastCompletedStep?: Key;\n  /** The default last completed step key (uncontrolled). */\n  defaultLastCompletedStep?: Key;\n  /** Called when last completed step changes. */\n  onLastCompletedStepChange?: (key: Key | null) => void;\n  /** Whether all steps are disabled. */\n  isDisabled?: boolean;\n  /** Whether all steps are read-only. */\n  isReadOnly?: boolean;\n  /** Keys of individually disabled steps. */\n  disabledKeys?: Iterable<Key>;\n  /** Render function for each step item. */\n  children: (item: T, state: StepListItemRenderProps) => JSX.Element;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<StepListRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<StepListRenderProps>;\n}\n\nexport interface StepProps {\n  /** The step item. */\n  item: { key: Key; label: string };\n  /** The 1-based step number. */\n  stepNumber: number;\n  /** The children to render inside the step. */\n  children?: JSX.Element;\n  /** The CSS className for the element. */\n  class?: string;\n  /** The inline style for the element. */\n  style?: JSX.CSSProperties;\n}\n\nexport const StepListStateContext = createContext<StepListState | null>(null);\nexport const StepListContext = createContext<{} | null>(null);\n\nexport function useStepListState(): StepListState {\n  const ctx = useContext(StepListStateContext);\n  if (!ctx) throw new Error(\"useStepListState must be used within a StepList\");\n  return ctx;\n}\n\n/**\n * StepList displays a sequence of steps with completion tracking and selection.\n */\nexport function StepList<T extends { key: Key; label: string }>(\n  props: StepListProps<T>,\n): JSX.Element {\n  const [local, ariaProps, domRest] = splitProps(\n    props,\n    [\n      \"items\",\n      \"selectedKey\",\n      \"defaultSelectedKey\",\n      \"onSelectionChange\",\n      \"lastCompletedStep\",\n      \"defaultLastCompletedStep\",\n      \"onLastCompletedStepChange\",\n      \"isDisabled\",\n      \"isReadOnly\",\n      \"disabledKeys\",\n      \"children\",\n      \"class\",\n      \"style\",\n    ],\n    [\"aria-label\", \"aria-labelledby\"],\n  );\n\n  const stateProps = createMemo<StepListStateProps>(() => ({\n    items: local.items,\n    selectedKey: local.selectedKey,\n    defaultSelectedKey: local.defaultSelectedKey,\n    onSelectionChange: local.onSelectionChange,\n    lastCompletedStep: local.lastCompletedStep,\n    defaultLastCompletedStep: local.defaultLastCompletedStep,\n    onLastCompletedStepChange: local.onLastCompletedStepChange,\n    isDisabled: local.isDisabled,\n    isReadOnly: local.isReadOnly,\n    disabledKeys: local.disabledKeys,\n  }));\n\n  const state = createStepListState(stateProps());\n\n  // Create ARIA props\n  const { stepListProps } = createStepList(\n    {\n      get \"aria-label\"() {\n        return ariaProps[\"aria-label\"];\n      },\n      get \"aria-labelledby\"() {\n        return ariaProps[\"aria-labelledby\"];\n      },\n    },\n    state,\n  );\n\n  const renderValues = createMemo<StepListRenderProps>(() => ({\n    isDisabled: state.isDisabled(),\n  }));\n\n  const renderProps = useRenderProps(\n    {\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-StepList\",\n    },\n    renderValues,\n  );\n\n  const domProps = createMemo(() =>\n    filterDOMProps(domRest as Record<string, unknown>, { global: true }),\n  );\n\n  return (\n    <StepListStateContext.Provider value={state}>\n      <ol\n        {...stepListProps}\n        {...domProps()}\n        class={renderProps.class()}\n        style={renderProps.style()}\n        data-disabled={state.isDisabled() || undefined}\n      >\n        <For each={local.items}>\n          {(item, index) => {\n            const stepNumber = () => index() + 1;\n\n            // Build render props as a static snapshot for the initial render.\n            const renderProps: StepListItemRenderProps = {\n              get isSelected() {\n                return state.selectedKey() === item.key;\n              },\n              get isCompleted() {\n                return state.isCompleted(item.key);\n              },\n              get isDisabled() {\n                return state.isDisabled() || !state.isSelectable(item.key);\n              },\n              get isSelectable() {\n                return state.isSelectable(item.key);\n              },\n              get stepNumber() {\n                return stepNumber();\n              },\n              get stepStateText() {\n                if (state.selectedKey() === item.key) return \"Current\";\n                if (state.isCompleted(item.key)) return \"Completed\";\n                return \"Not completed\";\n              },\n            };\n\n            return local.children(item, renderProps);\n          }}\n        </For>\n      </ol>\n    </StepListStateContext.Provider>\n  );\n}\n\n/**\n * Step represents an individual step within a StepList.\n * Renders as an `<li>` wrapping an `<a>` with accessible step props.\n */\nexport function Step(props: StepProps): JSX.Element {\n  const [local, domProps] = splitProps(props, [\"item\", \"stepNumber\", \"children\", \"class\", \"style\"]);\n\n  const state = useStepListState();\n\n  const isSelected = () => state.selectedKey() === local.item.key;\n  const isCompleted = () => state.isCompleted(local.item.key);\n  const selectable = () => state.isSelectable(local.item.key);\n\n  const handleClick = (e: MouseEvent) => {\n    e.preventDefault();\n    if (selectable()) {\n      state.setSelectedKey(local.item.key);\n    }\n  };\n\n  const handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === \"ArrowUp\" || e.key === \"ArrowDown\") {\n      e.preventDefault();\n      return;\n    }\n    if (e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      if (selectable()) {\n        state.setSelectedKey(local.item.key);\n      }\n    }\n  };\n\n  return (\n    <li\n      {...domProps}\n      class={local.class}\n      style={local.style}\n      data-selected={isSelected() || undefined}\n      data-completed={isCompleted() || undefined}\n      data-disabled={!selectable() || undefined}\n      data-selectable={selectable() || undefined}\n    >\n      <a\n        role=\"link\"\n        aria-current={isSelected() ? \"step\" : undefined}\n        aria-disabled={!selectable() ? true : undefined}\n        tabIndex={selectable() ? 0 : undefined}\n        onClick={handleClick}\n        on:keydown={handleKeyDown}\n      >\n        {local.children}\n      </a>\n    </li>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"StepList.jsx","names":[],"sources":["../src/StepList.tsx"],"sourcesContent":["/*\n * Copyright 2023 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/src/steplist/useStepList.ts\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/steplist/useStepListItem.ts\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/steplist/useStepListState.ts\n\n/**\n * StepList component for solidaria-components\n *\n * A pre-wired headless step list component that combines state + aria hooks.\n * Renders an ordered list of steps with completion tracking. Based on:\n * - packages/react-aria/src/steplist/useStepList.ts\n * - packages/react-aria/src/steplist/useStepListItem.ts\n * - packages/react-stately/src/steplist/useStepListState.ts\n */\n\nimport { createContext, createMemo, useContext, For } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { createStepListState, type StepListState, type Key } from \"@proyecto-viviana/solid-stately\";\nimport { createStepList, type AriaStepListProps } from \"@proyecto-viviana/solidaria\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  useRenderProps,\n  filterDOMProps,\n  dataAttr,\n  attrTrue,\n} from \"./utils\";\n\nexport interface StepListItemRenderProps {\n  /** Whether this step is currently selected. */\n  isSelected: boolean;\n  /** Whether this step is completed. */\n  isCompleted: boolean;\n  /** Whether this step is disabled. */\n  isDisabled: boolean;\n  /** Whether this step can be selected. */\n  isSelectable: boolean;\n  /** The 1-based step number. */\n  stepNumber: number;\n  /** Accessible text describing the step state. */\n  stepStateText: string;\n}\n\nexport interface StepListRenderProps {\n  /** Whether the step list is disabled. */\n  isDisabled: boolean;\n}\n\nexport interface StepListProps<T extends { key: Key; label: string }> extends AriaStepListProps {\n  /** The step items. */\n  items: T[];\n  /** The currently selected step key (controlled). */\n  selectedKey?: Key;\n  /** The default selected step key (uncontrolled). */\n  defaultSelectedKey?: Key;\n  /** Called when the selected step changes. */\n  onSelectionChange?: (key: Key) => void;\n  /** The last completed step key (controlled). */\n  lastCompletedStep?: Key;\n  /** The default last completed step key (uncontrolled). */\n  defaultLastCompletedStep?: Key;\n  /** Called when last completed step changes. */\n  onLastCompletedStepChange?: (key: Key | null) => void;\n  /** Whether all steps are disabled. */\n  isDisabled?: boolean;\n  /** Whether all steps are read-only. */\n  isReadOnly?: boolean;\n  /** Keys of individually disabled steps. */\n  disabledKeys?: Iterable<Key>;\n  /** Render function for each step item. */\n  children: (item: T, state: StepListItemRenderProps) => JSX.Element;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<StepListRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<StepListRenderProps>;\n}\n\nexport interface StepProps {\n  /** The step item. */\n  item: { key: Key; label: string };\n  /** The 1-based step number. */\n  stepNumber: number;\n  /** The children to render inside the step. */\n  children?: JSX.Element;\n  /** The CSS className for the element. */\n  class?: string;\n  /** The inline style for the element. */\n  style?: JSX.CSSProperties;\n}\n\nexport const StepListStateContext = createContext<StepListState | null>(null);\nexport const StepListContext = createContext<{} | null>(null);\n\nexport function useStepListState(): StepListState {\n  const ctx = useContext(StepListStateContext);\n  if (!ctx) throw new Error(\"useStepListState must be used within a StepList\");\n  return ctx;\n}\n\n/**\n * StepList displays a sequence of steps with completion tracking and selection.\n */\nexport function StepList<T extends { key: Key; label: string }>(\n  props: StepListProps<T>,\n): JSX.Element {\n  const [local, ariaProps, domRest] = splitProps(\n    props,\n    [\n      \"items\",\n      \"selectedKey\",\n      \"defaultSelectedKey\",\n      \"onSelectionChange\",\n      \"lastCompletedStep\",\n      \"defaultLastCompletedStep\",\n      \"onLastCompletedStepChange\",\n      \"isDisabled\",\n      \"isReadOnly\",\n      \"disabledKeys\",\n      \"children\",\n      \"class\",\n      \"style\",\n    ],\n    [\"aria-label\", \"aria-labelledby\"],\n  );\n\n  // Staying-mounted getters. `createMemo(() => ({ isDisabled: local.isDisabled }))`\n  // then `stateProps()` is a one-shot snapshot; createStepListState re-reads\n  // props.isDisabled / isReadOnly / disabledKeys only if those names stay live.\n  const state = createStepListState({\n    get items() {\n      return local.items;\n    },\n    get selectedKey() {\n      return local.selectedKey;\n    },\n    get defaultSelectedKey() {\n      return local.defaultSelectedKey;\n    },\n    get onSelectionChange() {\n      return local.onSelectionChange;\n    },\n    get lastCompletedStep() {\n      return local.lastCompletedStep;\n    },\n    get defaultLastCompletedStep() {\n      return local.defaultLastCompletedStep;\n    },\n    get onLastCompletedStepChange() {\n      return local.onLastCompletedStepChange;\n    },\n    get isDisabled() {\n      return local.isDisabled;\n    },\n    get isReadOnly() {\n      return local.isReadOnly;\n    },\n    get disabledKeys() {\n      return local.disabledKeys;\n    },\n  });\n\n  // Create ARIA props\n  const { stepListProps } = createStepList(\n    {\n      get \"aria-label\"() {\n        return ariaProps[\"aria-label\"];\n      },\n      get \"aria-labelledby\"() {\n        return ariaProps[\"aria-labelledby\"];\n      },\n    },\n    state,\n  );\n\n  const renderValues = createMemo<StepListRenderProps>(() => ({\n    isDisabled: state.isDisabled(),\n  }));\n\n  const renderProps = useRenderProps(\n    {\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-StepList\",\n    },\n    renderValues,\n  );\n\n  const domProps = createMemo(() =>\n    filterDOMProps(domRest as Record<string, unknown>, { global: true }),\n  );\n\n  return (\n    <StepListStateContext value={state}>\n      <ol\n        {...stepListProps}\n        {...domProps()}\n        class={renderProps.class()}\n        style={renderProps.style()}\n        data-disabled={dataAttr(state.isDisabled())}\n      >\n        <For each={local.items}>\n          {(item, index) => {\n            const stepNumber = () => index() + 1;\n\n            // Build render props as a static snapshot for the initial render.\n            const renderProps: StepListItemRenderProps = {\n              get isSelected() {\n                return state.selectedKey() === item.key;\n              },\n              get isCompleted() {\n                return state.isCompleted(item.key);\n              },\n              get isDisabled() {\n                return state.isDisabled() || !state.isSelectable(item.key);\n              },\n              get isSelectable() {\n                return state.isSelectable(item.key);\n              },\n              get stepNumber() {\n                return stepNumber();\n              },\n              get stepStateText() {\n                if (state.selectedKey() === item.key) return \"Current\";\n                if (state.isCompleted(item.key)) return \"Completed\";\n                return \"Not completed\";\n              },\n            };\n\n            return local.children(item, renderProps);\n          }}\n        </For>\n      </ol>\n    </StepListStateContext>\n  );\n}\n\n/**\n * Step represents an individual step within a StepList.\n * Renders as an `<li>` wrapping an `<a>` with accessible step props.\n */\nexport function Step(props: StepProps): JSX.Element {\n  const [local, domProps] = splitProps(props, [\"item\", \"stepNumber\", \"children\", \"class\", \"style\"]);\n\n  const state = useStepListState();\n\n  const isSelected = () => state.selectedKey() === local.item.key;\n  const isCompleted = () => state.isCompleted(local.item.key);\n  const selectable = () => state.isSelectable(local.item.key);\n\n  const handleClick = (e: MouseEvent) => {\n    e.preventDefault();\n    if (selectable()) {\n      state.setSelectedKey(local.item.key);\n    }\n  };\n\n  const handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === \"ArrowUp\" || e.key === \"ArrowDown\") {\n      e.preventDefault();\n      return;\n    }\n    if (e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      if (selectable()) {\n        state.setSelectedKey(local.item.key);\n      }\n    }\n  };\n\n  return (\n    <li\n      {...domProps}\n      class={local.class}\n      style={local.style}\n      data-selected={dataAttr(isSelected())}\n      data-completed={dataAttr(isCompleted())}\n      data-disabled={dataAttr(!selectable())}\n      data-selectable={dataAttr(selectable())}\n    >\n      <a\n        role=\"link\"\n        aria-current={isSelected() ? \"step\" : undefined}\n        aria-disabled={attrTrue(!selectable())}\n        tabindex={selectable() ? 0 : undefined}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n      >\n        {local.children}\n      </a>\n    </li>\n  );\n}\n"],"mappings":"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"}

package/dist/Switch.d.ts

@@ -1,12 +1,5 @@
-/**
- * ToggleSwitch component for solidaria-components
- *
- * A pre-wired headless switch that combines state + aria hooks.
- * Port of react-aria-components/src/Switch.tsx
- *
- * Named "ToggleSwitch" to avoid conflict with SolidJS's built-in Switch component.
- */
-import { type JSX, type Context } from "solid-js";
+import type { Context } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { type AriaSwitchProps } from "@proyecto-viviana/solidaria";
 import { type ToggleState } from "@proyecto-viviana/solid-stately";
 import { type RenderChildren, type ClassNameOrFunction, type StyleOrFunction, type SlotProps } from "./utils";

package/dist/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../src/Switch.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../src/Switch.tsx"],"names":[],"mappings":"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"}