@proyecto-viviana/solidaria-components 0.3.2 → 0.4.0

package/dist/ActionGroup.jsx

@@ -0,0 +1,129 @@
+import { filterDOMProps, useRenderProps } from "./utils.jsx";
+import { For, createContext, createMemo, splitProps, useContext } from "solid-js";
+import { createActionGroup, createActionGroupItem } from "@proyecto-viviana/solidaria";
+import { createListState } from "@proyecto-viviana/solid-stately";
+//#region src/ActionGroup.tsx
+/**
+* ActionGroup component for solidaria-components
+*
+* Pre-wired headless action group component that combines
+* createListState + createActionGroup/createActionGroupItem.
+* Provides proper dynamic roles (toolbar/radiogroup), keyboard
+* navigation, and ARIA attributes.
+*
+* No RAC equivalent exists — this bridges solidaria ARIA hooks
+* directly to a headless component.
+*/
+const ActionGroupContext = createContext(null);
+const ActionGroupStateContext = createContext(null);
+function ActionGroup(props) {
+	const [local, ariaGroupProps, domProps] = splitProps(props, [
+		"items",
+		"selectionMode",
+		"orientation",
+		"isDisabled",
+		"selectedKeys",
+		"defaultSelectedKeys",
+		"onSelectionChange",
+		"onAction",
+		"disabledKeys",
+		"children",
+		"class",
+		"style",
+		"slot"
+	], ["aria-label", "aria-labelledby"]);
+	const state = createListState({
+		get items() {
+			return local.items;
+		},
+		get selectionMode() {
+			return local.selectionMode ?? "none";
+		},
+		get selectedKeys() {
+			return local.selectedKeys;
+		},
+		get defaultSelectedKeys() {
+			return local.defaultSelectedKeys;
+		},
+		get onSelectionChange() {
+			return local.onSelectionChange;
+		},
+		get disabledKeys() {
+			return local.disabledKeys;
+		},
+		getKey: (item) => item.id,
+		getTextValue: (item) => item.label,
+		getDisabled: (item) => !!item.isDisabled
+	});
+	const { actionGroupProps } = createActionGroup({
+		get items() {
+			return local.items;
+		},
+		get isDisabled() {
+			return local.isDisabled;
+		},
+		get orientation() {
+			return local.orientation;
+		},
+		get "aria-label"() {
+			return ariaGroupProps["aria-label"];
+		},
+		get "aria-labelledby"() {
+			return ariaGroupProps["aria-labelledby"];
+		},
+		get onAction() {
+			return local.onAction;
+		}
+	}, state);
+	const orientation = () => local.orientation ?? "horizontal";
+	const renderProps = useRenderProps({
+		children: void 0,
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ActionGroup"
+	}, () => ({
+		orientation: orientation(),
+		isDisabled: !!local.isDisabled,
+		selectionMode: local.selectionMode ?? "none"
+	}));
+	const filteredDOMProps = createMemo(() => filterDOMProps(domProps, { global: true }));
+	return <ActionGroupContext.Provider value={{ state }}>
+      <ActionGroupStateContext.Provider value={state}>
+        <div {...filteredDOMProps()} {...actionGroupProps} ref={(el) => {
+		const refFn = actionGroupProps.ref;
+		refFn?.(el);
+	}} class={renderProps.class()} style={renderProps.style()} slot={local.slot} data-orientation={orientation()} data-disabled={local.isDisabled || void 0}>
+          <For each={local.items}>
+            {(item) => <ActionGroupItemWrapper item={item} state={state} renderChild={local.children} />}
+          </For>
+        </div>
+      </ActionGroupStateContext.Provider>
+    </ActionGroupContext.Provider>;
+}
+function ActionGroupItemWrapper(props) {
+	const { buttonProps } = createActionGroupItem({ get key() {
+		return props.item.id;
+	} }, props.state);
+	const isFocused = () => props.state.focusedKey() === props.item.id;
+	const isSelected = () => {
+		const keys = props.state.selectedKeys();
+		return keys === "all" || keys instanceof Set && keys.has(props.item.id);
+	};
+	const isDisabled = () => props.state.isDisabled(props.item.id);
+	const renderProps = createMemo(() => ({
+		isSelected: isSelected(),
+		isDisabled: isDisabled(),
+		isFocused: isFocused()
+	}));
+	const { ref: _ref, ...restButtonProps } = buttonProps;
+	return <button {...restButtonProps} data-selected={isSelected() || void 0} data-disabled={isDisabled() || void 0} data-focused={isFocused() || void 0}>
+      {props.renderChild(props.item, renderProps())}
+    </button>;
+}
+function useActionGroupContext() {
+	return useContext(ActionGroupContext);
+}
+//#endregion
+export { ActionGroup, ActionGroupContext, ActionGroupStateContext, useActionGroupContext };
+
+//# sourceMappingURL=ActionGroup.jsx.map

package/dist/ActionGroup.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionGroup.jsx","names":[],"sources":["../src/ActionGroup.tsx"],"sourcesContent":["/**\n * ActionGroup component for solidaria-components\n *\n * Pre-wired headless action group component that combines\n * createListState + createActionGroup/createActionGroupItem.\n * Provides proper dynamic roles (toolbar/radiogroup), keyboard\n * navigation, and ARIA attributes.\n *\n * No RAC equivalent exists — this bridges solidaria ARIA hooks\n * directly to a headless component.\n */\n\nimport {\n  type JSX,\n  type ParentProps,\n  createContext,\n  createMemo,\n  splitProps,\n  useContext,\n  For,\n} from \"solid-js\";\nimport {\n  createActionGroup,\n  createActionGroupItem,\n  type AriaActionGroupProps,\n} from \"@proyecto-viviana/solidaria\";\nimport {\n  createListState,\n  type ListState,\n  type Key,\n  type SelectionMode,\n} from \"@proyecto-viviana/solid-stately\";\nimport {\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type SlotProps,\n  useRenderProps,\n  filterDOMProps,\n} from \"./utils\";\n\nexport interface ActionGroupRenderProps {\n  /** The orientation of the action group. */\n  orientation: \"horizontal\" | \"vertical\";\n  /** Whether the entire group is disabled. */\n  isDisabled: boolean;\n  /** The selection mode. */\n  selectionMode: SelectionMode;\n}\n\nexport interface ActionGroupItemRenderProps {\n  /** Whether the item is selected. */\n  isSelected: boolean;\n  /** Whether the item is disabled. */\n  isDisabled: boolean;\n  /** Whether the item is focused. */\n  isFocused: boolean;\n}\n\nexport interface ActionGroupItem {\n  id: string;\n  label: string;\n  isDisabled?: boolean;\n  [key: string]: unknown;\n}\n\nexport interface ActionGroupProps<T extends ActionGroupItem = ActionGroupItem> extends SlotProps {\n  /** The items in the action group. */\n  items: T[];\n  /** The selection mode. @default 'none' */\n  selectionMode?: SelectionMode;\n  /** Orientation of the group. @default 'horizontal' */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Whether the entire group is disabled. */\n  isDisabled?: boolean;\n  /** Accessible label. */\n  \"aria-label\"?: string;\n  /** Labelled-by id. */\n  \"aria-labelledby\"?: string;\n  /** Currently selected keys (controlled). */\n  selectedKeys?: Iterable<Key>;\n  /** Default selected keys (uncontrolled). */\n  defaultSelectedKeys?: Iterable<Key>;\n  /** Handler called when selection changes. */\n  onSelectionChange?: (keys: \"all\" | Set<Key>) => void;\n  /** Handler called when an item action is triggered. */\n  onAction?: (key: Key) => void;\n  /** Keys of disabled items. */\n  disabledKeys?: Iterable<Key>;\n  /** Render function for each item. */\n  children: (item: T, renderProps: ActionGroupItemRenderProps) => JSX.Element;\n  /** CSS class for the container. */\n  class?: ClassNameOrFunction<ActionGroupRenderProps>;\n  /** Inline style for the container. */\n  style?: StyleOrFunction<ActionGroupRenderProps>;\n}\n\nexport interface ActionGroupContextValue<T extends ActionGroupItem = ActionGroupItem> {\n  state: ListState<T>;\n}\n\nexport const ActionGroupContext = createContext<ActionGroupContextValue | null>(null);\nexport const ActionGroupStateContext = createContext<ListState<ActionGroupItem> | null>(null);\n\nexport function ActionGroup<T extends ActionGroupItem = ActionGroupItem>(\n  props: ActionGroupProps<T>,\n): JSX.Element {\n  const [local, ariaGroupProps, domProps] = splitProps(\n    props,\n    [\n      \"items\",\n      \"selectionMode\",\n      \"orientation\",\n      \"isDisabled\",\n      \"selectedKeys\",\n      \"defaultSelectedKeys\",\n      \"onSelectionChange\",\n      \"onAction\",\n      \"disabledKeys\",\n      \"children\",\n      \"class\",\n      \"style\",\n      \"slot\",\n    ],\n    [\"aria-label\", \"aria-labelledby\"],\n  );\n\n  const state = createListState<T>({\n    get items() {\n      return local.items;\n    },\n    get selectionMode() {\n      return local.selectionMode ?? \"none\";\n    },\n    get selectedKeys() {\n      return local.selectedKeys;\n    },\n    get defaultSelectedKeys() {\n      return local.defaultSelectedKeys;\n    },\n    get onSelectionChange() {\n      return local.onSelectionChange;\n    },\n    get disabledKeys() {\n      return local.disabledKeys;\n    },\n    getKey: (item) => item.id,\n    getTextValue: (item) => item.label,\n    getDisabled: (item) => !!item.isDisabled,\n  });\n\n  const groupAriaProps: AriaActionGroupProps<T> = {\n    get items() {\n      return local.items;\n    },\n    get isDisabled() {\n      return local.isDisabled;\n    },\n    get orientation() {\n      return local.orientation;\n    },\n    get \"aria-label\"() {\n      return ariaGroupProps[\"aria-label\"];\n    },\n    get \"aria-labelledby\"() {\n      return ariaGroupProps[\"aria-labelledby\"];\n    },\n    get onAction() {\n      return local.onAction;\n    },\n  };\n\n  const { actionGroupProps } = createActionGroup(groupAriaProps, state as ListState<T>);\n\n  const orientation = () => local.orientation ?? \"horizontal\";\n\n  const renderProps = useRenderProps(\n    {\n      children: undefined,\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-ActionGroup\",\n    },\n    () => ({\n      orientation: orientation(),\n      isDisabled: !!local.isDisabled,\n      selectionMode: (local.selectionMode ?? \"none\") as SelectionMode,\n    }),\n  );\n\n  const filteredDOMProps = createMemo(() =>\n    filterDOMProps(domProps as Record<string, unknown>, { global: true }),\n  );\n\n  return (\n    <ActionGroupContext.Provider value={{ state: state as ListState<ActionGroupItem> }}>\n      <ActionGroupStateContext.Provider value={state as ListState<ActionGroupItem>}>\n        <div\n          {...filteredDOMProps()}\n          {...actionGroupProps}\n          ref={(el: HTMLDivElement) => {\n            const refFn = (actionGroupProps as { ref?: (el: HTMLElement) => void }).ref;\n            refFn?.(el);\n          }}\n          class={renderProps.class()}\n          style={renderProps.style()}\n          slot={local.slot}\n          data-orientation={orientation()}\n          data-disabled={local.isDisabled || undefined}\n        >\n          <For each={local.items}>\n            {(item) => (\n              <ActionGroupItemWrapper\n                item={item}\n                state={state as ListState<ActionGroupItem>}\n                renderChild={\n                  local.children as (\n                    item: ActionGroupItem,\n                    rp: ActionGroupItemRenderProps,\n                  ) => JSX.Element\n                }\n              />\n            )}\n          </For>\n        </div>\n      </ActionGroupStateContext.Provider>\n    </ActionGroupContext.Provider>\n  );\n}\n\ninterface ActionGroupItemWrapperProps {\n  item: ActionGroupItem;\n  state: ListState<ActionGroupItem>;\n  renderChild: (item: ActionGroupItem, renderProps: ActionGroupItemRenderProps) => JSX.Element;\n}\n\nfunction ActionGroupItemWrapper(props: ActionGroupItemWrapperProps): JSX.Element {\n  const { buttonProps } = createActionGroupItem(\n    {\n      get key() {\n        return props.item.id;\n      },\n    },\n    props.state,\n  );\n\n  const isFocused = () => props.state.focusedKey() === props.item.id;\n  const isSelected = () => {\n    const keys = props.state.selectedKeys();\n    return keys === \"all\" || (keys instanceof Set && keys.has(props.item.id));\n  };\n  const isDisabled = () => props.state.isDisabled(props.item.id);\n\n  const renderProps = createMemo<ActionGroupItemRenderProps>(() => ({\n    isSelected: isSelected(),\n    isDisabled: isDisabled(),\n    isFocused: isFocused(),\n  }));\n\n  const { ref: _ref, ...restButtonProps } = buttonProps as Record<string, unknown> & {\n    ref?: unknown;\n  };\n\n  return (\n    <button\n      {...restButtonProps}\n      data-selected={isSelected() || undefined}\n      data-disabled={isDisabled() || undefined}\n      data-focused={isFocused() || undefined}\n    >\n      {props.renderChild(props.item, renderProps())}\n    </button>\n  );\n}\n\nexport function useActionGroupContext(): ActionGroupContextValue | null {\n  return useContext(ActionGroupContext);\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAoGA,MAAa,qBAAqB,cAA8C,IAAI;AACpF,MAAa,0BAA0B,cAAiD,IAAI;AAE5F,SAAgB,YACd,OACa;CACb,MAAM,CAAC,OAAO,gBAAgB,YAAY,WACxC,OACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,GACA,CAAC,cAAc,iBAAiB,CAClC;CAEA,MAAM,QAAQ,gBAAmB;EAC/B,IAAI,QAAQ;GACV,OAAO,MAAM;EACf;EACA,IAAI,gBAAgB;GAClB,OAAO,MAAM,iBAAiB;EAChC;EACA,IAAI,eAAe;GACjB,OAAO,MAAM;EACf;EACA,IAAI,sBAAsB;GACxB,OAAO,MAAM;EACf;EACA,IAAI,oBAAoB;GACtB,OAAO,MAAM;EACf;EACA,IAAI,eAAe;GACjB,OAAO,MAAM;EACf;EACA,SAAS,SAAS,KAAK;EACvB,eAAe,SAAS,KAAK;EAC7B,cAAc,SAAS,CAAC,CAAC,KAAK;CAChC,CAAC;CAuBD,MAAM,EAAE,qBAAqB,kBAAkB;EApB7C,IAAI,QAAQ;GACV,OAAO,MAAM;EACf;EACA,IAAI,aAAa;GACf,OAAO,MAAM;EACf;EACA,IAAI,cAAc;GAChB,OAAO,MAAM;EACf;EACA,IAAI,eAAe;GACjB,OAAO,eAAe;EACxB;EACA,IAAI,oBAAoB;GACtB,OAAO,eAAe;EACxB;EACA,IAAI,WAAW;GACb,OAAO,MAAM;EACf;CAG0D,GAAG,KAAqB;CAEpF,MAAM,oBAAoB,MAAM,eAAe;CAE/C,MAAM,cAAc,eAClB;EACE,UAAU,KAAA;EACV,OAAO,MAAM;EACb,OAAO,MAAM;EACb,kBAAkB;CACpB,UACO;EACL,aAAa,YAAY;EACzB,YAAY,CAAC,CAAC,MAAM;EACpB,eAAgB,MAAM,iBAAiB;CACzC,EACF;CAEA,MAAM,mBAAmB,iBACvB,eAAe,UAAqC,EAAE,QAAQ,KAAK,CAAC,CACtE;CAEA,OACE,CAAC,mBAAmB,SAAS,OAAO,EAAS,MAAoC,GAAG;MAClF,CAAC,wBAAwB,SAAS,OAAO,OAAqC;QAC5E,CAAC,QACK,iBAAiB,OACjB,kBACJ,MAAM,OAAuB;EAC3B,MAAM,QAAS,iBAAyD;EACxE,QAAQ,EAAE;CACZ,GACA,OAAO,YAAY,MAAM,GACzB,OAAO,YAAY,MAAM,GACzB,MAAM,MAAM,MACZ,kBAAkB,YAAY,GAC9B,eAAe,MAAM,cAAc,KAAA,GACpC;UACC,CAAC,IAAI,MAAM,MAAM,OAAO;cACpB,SACA,CAAC,uBACC,MAAM,MACN,OAAO,OACP,aACE,MAAM,aAMV;UACJ,EAAE,IAAI;QACR,EAAE,IAAI;MACR,EAAE,wBAAwB,SAAS;IACrC,EAAE,mBAAmB;AAEzB;AAQA,SAAS,uBAAuB,OAAiD;CAC/E,MAAM,EAAE,gBAAgB,sBACtB,EACE,IAAI,MAAM;EACR,OAAO,MAAM,KAAK;CACpB,EACF,GACA,MAAM,KACR;CAEA,MAAM,kBAAkB,MAAM,MAAM,WAAW,MAAM,MAAM,KAAK;CAChE,MAAM,mBAAmB;EACvB,MAAM,OAAO,MAAM,MAAM,aAAa;EACtC,OAAO,SAAS,SAAU,gBAAgB,OAAO,KAAK,IAAI,MAAM,KAAK,EAAE;CACzE;CACA,MAAM,mBAAmB,MAAM,MAAM,WAAW,MAAM,KAAK,EAAE;CAE7D,MAAM,cAAc,kBAA8C;EAChE,YAAY,WAAW;EACvB,YAAY,WAAW;EACvB,WAAW,UAAU;CACvB,EAAE;CAEF,MAAM,EAAE,KAAK,MAAM,GAAG,oBAAoB;CAI1C,OACE,CAAC,WACK,iBACJ,eAAe,WAAW,KAAK,KAAA,GAC/B,eAAe,WAAW,KAAK,KAAA,GAC/B,cAAc,UAAU,KAAK,KAAA,GAC9B;OACE,MAAM,YAAY,MAAM,MAAM,YAAY,CAAC,EAAE;IAChD,EAAE;AAEN;AAEA,SAAgB,wBAAwD;CACtE,OAAO,WAAW,kBAAkB;AACtC"}

package/dist/Alert.js

@@ -0,0 +1,111 @@
+import { filterDOMProps } from "./utils.js";
+import { Button } from "./Button.js";
+import { createComponent, getNextElement, insert, memo, mergeProps, runHydrationEvents, spread, template } from "solid-js/web";
+import { createContext, createMemo, splitProps, useContext } from "solid-js";
+//#region src/Alert.tsx
+/**
+* Alert component for solidaria-components
+*
+* Minimal headless Alert that owns ARIA semantics (role="alert")
+* and provides render props for styling. The UI layer consumes this
+* for styling/composition only.
+*/
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+const AlertContext = createContext(null);
+/**
+* An alert displays a brief, important message in a way that
+* attracts the user's attention without interrupting their task.
+*
+* This is a headless component that provides the ARIA `role="alert"`
+* semantics and render props for styling.
+*
+* @example
+* ```tsx
+* <Alert variant="error" isDismissible onDismiss={() => setVisible(false)}>
+*   {({ variant }) => <span>Something went wrong ({variant})</span>}
+* </Alert>
+* ```
+*/
+function Alert(props) {
+	const [local, rest] = splitProps(props, [
+		"children",
+		"class",
+		"style",
+		"slot",
+		"variant",
+		"isDismissible",
+		"onDismiss"
+	]);
+	const variant = () => local.variant ?? "info";
+	const isDismissible = () => !!local.isDismissible;
+	const renderValues = createMemo(() => ({
+		variant: variant(),
+		isDismissible: isDismissible()
+	}));
+	const computedClass = createMemo(() => {
+		const cls = local.class;
+		return typeof cls === "function" ? cls(renderValues()) : cls ?? "solidaria-Alert";
+	});
+	const computedStyle = createMemo(() => {
+		const s = local.style;
+		return typeof s === "function" ? s(renderValues()) : s;
+	});
+	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+	const contextValue = {
+		variant,
+		isDismissible,
+		onDismiss: local.onDismiss
+	};
+	return createComponent(AlertContext.Provider, {
+		value: contextValue,
+		get children() {
+			var _el$ = getNextElement(_tmpl$);
+			spread(_el$, mergeProps(domProps, {
+				"role": "alert",
+				get ["class"]() {
+					return computedClass();
+				},
+				get style() {
+					return computedStyle();
+				},
+				get ["data-variant"]() {
+					return variant();
+				},
+				get ["data-dismissible"]() {
+					return isDismissible() || void 0;
+				}
+			}), false, true);
+			insert(_el$, (() => {
+				var _c$ = memo(() => typeof local.children === "function");
+				return () => _c$() ? local.children(renderValues()) : local.children;
+			})());
+			runHydrationEvents();
+			return _el$;
+		}
+	});
+}
+/**
+* A dismiss button for use inside an Alert.
+* Uses the headless Button for full keyboard/a11y support.
+*
+* @example
+* ```tsx
+* <Alert isDismissible onDismiss={handleDismiss}>
+*   <span>Alert content</span>
+*   <AlertDismissButton aria-label="Dismiss">X</AlertDismissButton>
+* </Alert>
+* ```
+*/
+function AlertDismissButton(props) {
+	const context = useContext(AlertContext);
+	return createComponent(Button, mergeProps(props, {
+		get ["aria-label"]() {
+			return props["aria-label"] ?? "Dismiss";
+		},
+		onPress: () => context?.onDismiss?.()
+	}));
+}
+//#endregion
+export { Alert, AlertContext, AlertDismissButton };
+
+//# sourceMappingURL=Alert.js.map

package/dist/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","names":["JSX","createContext","createMemo","splitProps","useContext","RenderChildren","ClassNameOrFunction","StyleOrFunction","SlotProps","filterDOMProps","Button","ButtonProps","AlertVariant","AlertRenderProps","variant","isDismissible","AlertProps","onDismiss","children","class","style","id","AlertContextValue","AlertContext","Alert","props","Element","local","rest","renderValues","computedClass","cls","computedStyle","s","domProps","global","contextValue","_$createComponent","Provider","value","_el$","_$getNextElement","_tmpl$","_$spread","_$mergeProps","data-variant","data-dismissible","undefined","_$insert","_c$","_$memo","_$runHydrationEvents","AlertDismissButtonProps","Omit","AlertDismissButton","context","aria-label","onPress"],"sources":["../src/Alert.tsx"],"sourcesContent":["/**\n * Alert component for solidaria-components\n *\n * Minimal headless Alert that owns ARIA semantics (role=\"alert\")\n * and provides render props for styling. The UI layer consumes this\n * for styling/composition only.\n */\n\nimport { type JSX, createContext, createMemo, splitProps, useContext } from \"solid-js\";\nimport {\n  type RenderChildren,\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type SlotProps,\n  filterDOMProps,\n} from \"./utils\";\nimport { Button, type ButtonProps } from \"./Button\";\n\nexport type AlertVariant = \"info\" | \"success\" | \"warning\" | \"error\";\n\nexport interface AlertRenderProps {\n  /** The variant of the alert. */\n  variant: AlertVariant;\n  /** Whether the alert can be dismissed. */\n  isDismissible: boolean;\n}\n\nexport interface AlertProps extends SlotProps {\n  /** The variant of the alert. */\n  variant?: AlertVariant;\n  /** Whether the alert can be dismissed. */\n  isDismissible?: boolean;\n  /** Handler called when the alert is dismissed. */\n  onDismiss?: () => void;\n  /** The children of the component. A function may be provided to receive render props. */\n  children?: RenderChildren<AlertRenderProps>;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<AlertRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<AlertRenderProps>;\n  /** The id of the element. */\n  id?: string;\n}\n\nexport interface AlertContextValue {\n  variant: () => AlertVariant;\n  isDismissible: () => boolean;\n  onDismiss?: () => void;\n}\n\nexport const AlertContext = createContext<AlertContextValue | null>(null);\n\n/**\n * An alert displays a brief, important message in a way that\n * attracts the user's attention without interrupting their task.\n *\n * This is a headless component that provides the ARIA `role=\"alert\"`\n * semantics and render props for styling.\n *\n * @example\n * ```tsx\n * <Alert variant=\"error\" isDismissible onDismiss={() => setVisible(false)}>\n *   {({ variant }) => <span>Something went wrong ({variant})</span>}\n * </Alert>\n * ```\n */\nexport function Alert(props: AlertProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"children\",\n    \"class\",\n    \"style\",\n    \"slot\",\n    \"variant\",\n    \"isDismissible\",\n    \"onDismiss\",\n  ]);\n\n  const variant = () => local.variant ?? \"info\";\n  const isDismissible = () => !!local.isDismissible;\n\n  const renderValues = createMemo<AlertRenderProps>(() => ({\n    variant: variant(),\n    isDismissible: isDismissible(),\n  }));\n\n  // Resolve class and style manually. We intentionally avoid useRenderProps()\n  // because it destructures children eagerly, which would create child\n  // components (e.g. AlertDismissButton) BEFORE the AlertContext.Provider\n  // is in scope, breaking context for sub-components.\n  const computedClass = createMemo(() => {\n    const cls = local.class;\n    return typeof cls === \"function\" ? cls(renderValues()) : (cls ?? \"solidaria-Alert\");\n  });\n\n  const computedStyle = createMemo(() => {\n    const s = local.style;\n    return typeof s === \"function\" ? s(renderValues()) : s;\n  });\n\n  const domProps = createMemo(() => filterDOMProps(rest, { global: true }));\n\n  const contextValue: AlertContextValue = {\n    variant,\n    isDismissible,\n    onDismiss: local.onDismiss,\n  };\n\n  // Children are accessed lazily inside the Provider scope (via local.children\n  // in JSX) so sub-components like AlertDismissButton can read AlertContext.\n  return (\n    <AlertContext.Provider value={contextValue}>\n      <div\n        {...domProps()}\n        role=\"alert\"\n        class={computedClass()}\n        style={computedStyle()}\n        data-variant={variant()}\n        data-dismissible={isDismissible() || undefined}\n      >\n        {typeof local.children === \"function\"\n          ? (local.children as (props: AlertRenderProps) => JSX.Element)(renderValues())\n          : local.children}\n      </div>\n    </AlertContext.Provider>\n  );\n}\n\nexport interface AlertDismissButtonProps extends Omit<ButtonProps, \"onPress\"> {}\n\n/**\n * A dismiss button for use inside an Alert.\n * Uses the headless Button for full keyboard/a11y support.\n *\n * @example\n * ```tsx\n * <Alert isDismissible onDismiss={handleDismiss}>\n *   <span>Alert content</span>\n *   <AlertDismissButton aria-label=\"Dismiss\">X</AlertDismissButton>\n * </Alert>\n * ```\n */\nexport function AlertDismissButton(props: AlertDismissButtonProps): JSX.Element {\n  const context = useContext(AlertContext);\n\n  return (\n    <Button\n      {...props}\n      aria-label={props[\"aria-label\"] ?? \"Dismiss\"}\n      onPress={() => context?.onDismiss?.()}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAkDA,MAAauB,eAAetB,cAAwC,IAAI;;;;;;;;;;;;;;;AAgBxE,SAAgBuB,MAAMC,OAAgC;CACpD,MAAM,CAACE,OAAOC,QAAQzB,WAAWsB,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;CAAW,CACZ;CAED,MAAMX,gBAAgBa,MAAMb,WAAW;CACvC,MAAMC,sBAAsB,CAAC,CAACY,MAAMZ;CAEpC,MAAMc,eAAe3B,kBAAoC;EACvDY,SAASA,QAAQ;EACjBC,eAAeA,cAAc;CAC/B,EAAE;CAMF,MAAMe,gBAAgB5B,iBAAiB;EACrC,MAAM6B,MAAMJ,MAAMR;EAClB,OAAO,OAAOY,QAAQ,aAAaA,IAAIF,aAAa,CAAC,IAAKE,OAAO;CACnE,CAAC;CAED,MAAMC,gBAAgB9B,iBAAiB;EACrC,MAAM+B,IAAIN,MAAMP;EAChB,OAAO,OAAOa,MAAM,aAAaA,EAAEJ,aAAa,CAAC,IAAII;CACvD,CAAC;CAED,MAAMC,WAAWhC,iBAAiBO,eAAemB,MAAM,EAAEO,QAAQ,KAAK,CAAC,CAAC;CAExE,MAAMC,eAAkC;EACtCtB;EACAC;EACAE,WAAWU,MAAMV;CACnB;CAIA,OAAAoB,gBACGd,aAAae,UAAQ;EAACC,OAAOH;EAAY,IAAAlB,WAAA;GAAA,IAAAsB,OAAAC,eAAAC,MAAA;GAAAC,OAAAH,MAAAI,WAElCV,UAAQ;IAAA,QACP;IAAO,KAAA,WAAA;KAAA,OACLJ,cAAc;IAAC;IAAA,IACtBV,QAAK;KAAA,OAAEY,cAAc;IAAC;IAAA,KAAA,kBAAA;KAAA,OACRlB,QAAQ;IAAC;IAAA,KAAA,sBAAA;KAAA,OACLC,cAAc,KAAKgC,KAAAA;IAAS;GAAA,CAAA,GAAA,OAAA,IAAA;GAAAC,OAAAR,aAAA;IAAA,IAAAS,MAAAC,WAE7C,OAAOvB,MAAMT,aAAa,UAAU;IAAA,aAApC+B,IAAA,IACItB,MAAMT,SAAsDW,aAAa,CAAC,IAC3EF,MAAMT;GAAQ,EAAA,CAAA,CAAA;GAAAiC,mBAAA;GAAA,OAAAX;EAAA;CAAA,CAAA;AAI1B;;;;;;;;;;;;;AAgBA,SAAgBc,mBAAmB7B,OAA6C;CAC9E,MAAM8B,UAAUnD,WAAWmB,YAAY;CAEvC,OAAAc,gBACG3B,QAAMkC,WACDnB,OAAK;EAAA,KAAA,gBAAA;GAAA,OACGA,MAAM,iBAAiB;EAAS;EAC5CgC,eAAeF,SAAStC,YAAY;CAAC,CAAA,CAAA;AAG3C"}

package/dist/Alert.jsx

@@ -0,0 +1,82 @@
+import { filterDOMProps } from "./utils.jsx";
+import { Button } from "./Button.jsx";
+import { createContext, createMemo, splitProps, useContext } from "solid-js";
+//#region src/Alert.tsx
+/**
+* Alert component for solidaria-components
+*
+* Minimal headless Alert that owns ARIA semantics (role="alert")
+* and provides render props for styling. The UI layer consumes this
+* for styling/composition only.
+*/
+const AlertContext = createContext(null);
+/**
+* An alert displays a brief, important message in a way that
+* attracts the user's attention without interrupting their task.
+*
+* This is a headless component that provides the ARIA `role="alert"`
+* semantics and render props for styling.
+*
+* @example
+* ```tsx
+* <Alert variant="error" isDismissible onDismiss={() => setVisible(false)}>
+*   {({ variant }) => <span>Something went wrong ({variant})</span>}
+* </Alert>
+* ```
+*/
+function Alert(props) {
+	const [local, rest] = splitProps(props, [
+		"children",
+		"class",
+		"style",
+		"slot",
+		"variant",
+		"isDismissible",
+		"onDismiss"
+	]);
+	const variant = () => local.variant ?? "info";
+	const isDismissible = () => !!local.isDismissible;
+	const renderValues = createMemo(() => ({
+		variant: variant(),
+		isDismissible: isDismissible()
+	}));
+	const computedClass = createMemo(() => {
+		const cls = local.class;
+		return typeof cls === "function" ? cls(renderValues()) : cls ?? "solidaria-Alert";
+	});
+	const computedStyle = createMemo(() => {
+		const s = local.style;
+		return typeof s === "function" ? s(renderValues()) : s;
+	});
+	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+	const contextValue = {
+		variant,
+		isDismissible,
+		onDismiss: local.onDismiss
+	};
+	return <AlertContext.Provider value={contextValue}>
+      <div {...domProps()} role="alert" class={computedClass()} style={computedStyle()} data-variant={variant()} data-dismissible={isDismissible() || void 0}>
+        {typeof local.children === "function" ? local.children(renderValues()) : local.children}
+      </div>
+    </AlertContext.Provider>;
+}
+/**
+* A dismiss button for use inside an Alert.
+* Uses the headless Button for full keyboard/a11y support.
+*
+* @example
+* ```tsx
+* <Alert isDismissible onDismiss={handleDismiss}>
+*   <span>Alert content</span>
+*   <AlertDismissButton aria-label="Dismiss">X</AlertDismissButton>
+* </Alert>
+* ```
+*/
+function AlertDismissButton(props) {
+	const context = useContext(AlertContext);
+	return <Button {...props} aria-label={props["aria-label"] ?? "Dismiss"} onPress={() => context?.onDismiss?.()} />;
+}
+//#endregion
+export { Alert, AlertContext, AlertDismissButton };
+
+//# sourceMappingURL=Alert.jsx.map

package/dist/Alert.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.jsx","names":[],"sources":["../src/Alert.tsx"],"sourcesContent":["/**\n * Alert component for solidaria-components\n *\n * Minimal headless Alert that owns ARIA semantics (role=\"alert\")\n * and provides render props for styling. The UI layer consumes this\n * for styling/composition only.\n */\n\nimport { type JSX, createContext, createMemo, splitProps, useContext } from \"solid-js\";\nimport {\n  type RenderChildren,\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type SlotProps,\n  filterDOMProps,\n} from \"./utils\";\nimport { Button, type ButtonProps } from \"./Button\";\n\nexport type AlertVariant = \"info\" | \"success\" | \"warning\" | \"error\";\n\nexport interface AlertRenderProps {\n  /** The variant of the alert. */\n  variant: AlertVariant;\n  /** Whether the alert can be dismissed. */\n  isDismissible: boolean;\n}\n\nexport interface AlertProps extends SlotProps {\n  /** The variant of the alert. */\n  variant?: AlertVariant;\n  /** Whether the alert can be dismissed. */\n  isDismissible?: boolean;\n  /** Handler called when the alert is dismissed. */\n  onDismiss?: () => void;\n  /** The children of the component. A function may be provided to receive render props. */\n  children?: RenderChildren<AlertRenderProps>;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<AlertRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<AlertRenderProps>;\n  /** The id of the element. */\n  id?: string;\n}\n\nexport interface AlertContextValue {\n  variant: () => AlertVariant;\n  isDismissible: () => boolean;\n  onDismiss?: () => void;\n}\n\nexport const AlertContext = createContext<AlertContextValue | null>(null);\n\n/**\n * An alert displays a brief, important message in a way that\n * attracts the user's attention without interrupting their task.\n *\n * This is a headless component that provides the ARIA `role=\"alert\"`\n * semantics and render props for styling.\n *\n * @example\n * ```tsx\n * <Alert variant=\"error\" isDismissible onDismiss={() => setVisible(false)}>\n *   {({ variant }) => <span>Something went wrong ({variant})</span>}\n * </Alert>\n * ```\n */\nexport function Alert(props: AlertProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"children\",\n    \"class\",\n    \"style\",\n    \"slot\",\n    \"variant\",\n    \"isDismissible\",\n    \"onDismiss\",\n  ]);\n\n  const variant = () => local.variant ?? \"info\";\n  const isDismissible = () => !!local.isDismissible;\n\n  const renderValues = createMemo<AlertRenderProps>(() => ({\n    variant: variant(),\n    isDismissible: isDismissible(),\n  }));\n\n  // Resolve class and style manually. We intentionally avoid useRenderProps()\n  // because it destructures children eagerly, which would create child\n  // components (e.g. AlertDismissButton) BEFORE the AlertContext.Provider\n  // is in scope, breaking context for sub-components.\n  const computedClass = createMemo(() => {\n    const cls = local.class;\n    return typeof cls === \"function\" ? cls(renderValues()) : (cls ?? \"solidaria-Alert\");\n  });\n\n  const computedStyle = createMemo(() => {\n    const s = local.style;\n    return typeof s === \"function\" ? s(renderValues()) : s;\n  });\n\n  const domProps = createMemo(() => filterDOMProps(rest, { global: true }));\n\n  const contextValue: AlertContextValue = {\n    variant,\n    isDismissible,\n    onDismiss: local.onDismiss,\n  };\n\n  // Children are accessed lazily inside the Provider scope (via local.children\n  // in JSX) so sub-components like AlertDismissButton can read AlertContext.\n  return (\n    <AlertContext.Provider value={contextValue}>\n      <div\n        {...domProps()}\n        role=\"alert\"\n        class={computedClass()}\n        style={computedStyle()}\n        data-variant={variant()}\n        data-dismissible={isDismissible() || undefined}\n      >\n        {typeof local.children === \"function\"\n          ? (local.children as (props: AlertRenderProps) => JSX.Element)(renderValues())\n          : local.children}\n      </div>\n    </AlertContext.Provider>\n  );\n}\n\nexport interface AlertDismissButtonProps extends Omit<ButtonProps, \"onPress\"> {}\n\n/**\n * A dismiss button for use inside an Alert.\n * Uses the headless Button for full keyboard/a11y support.\n *\n * @example\n * ```tsx\n * <Alert isDismissible onDismiss={handleDismiss}>\n *   <span>Alert content</span>\n *   <AlertDismissButton aria-label=\"Dismiss\">X</AlertDismissButton>\n * </Alert>\n * ```\n */\nexport function AlertDismissButton(props: AlertDismissButtonProps): JSX.Element {\n  const context = useContext(AlertContext);\n\n  return (\n    <Button\n      {...props}\n      aria-label={props[\"aria-label\"] ?? \"Dismiss\"}\n      onPress={() => context?.onDismiss?.()}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;AAkDA,MAAa,eAAe,cAAwC,IAAI;;;;;;;;;;;;;;;AAgBxE,SAAgB,MAAM,OAAgC;CACpD,MAAM,CAAC,OAAO,QAAQ,WAAW,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,gBAAgB,MAAM,WAAW;CACvC,MAAM,sBAAsB,CAAC,CAAC,MAAM;CAEpC,MAAM,eAAe,kBAAoC;EACvD,SAAS,QAAQ;EACjB,eAAe,cAAc;CAC/B,EAAE;CAMF,MAAM,gBAAgB,iBAAiB;EACrC,MAAM,MAAM,MAAM;EAClB,OAAO,OAAO,QAAQ,aAAa,IAAI,aAAa,CAAC,IAAK,OAAO;CACnE,CAAC;CAED,MAAM,gBAAgB,iBAAiB;EACrC,MAAM,IAAI,MAAM;EAChB,OAAO,OAAO,MAAM,aAAa,EAAE,aAAa,CAAC,IAAI;CACvD,CAAC;CAED,MAAM,WAAW,iBAAiB,eAAe,MAAM,EAAE,QAAQ,KAAK,CAAC,CAAC;CAExE,MAAM,eAAkC;EACtC;EACA;EACA,WAAW,MAAM;CACnB;CAIA,OACE,CAAC,aAAa,SAAS,OAAO,cAAc;MAC1C,CAAC,QACK,SAAS,GACb,aACA,OAAO,cAAc,GACrB,OAAO,cAAc,GACrB,cAAc,QAAQ,GACtB,kBAAkB,cAAc,KAAK,KAAA,GACtC;SACE,OAAO,MAAM,aAAa,aACtB,MAAM,SAAsD,aAAa,CAAC,IAC3E,MAAM,SAAS;MACrB,EAAE,IAAI;IACR,EAAE,aAAa;AAEnB;;;;;;;;;;;;;AAgBA,SAAgB,mBAAmB,OAA6C;CAC9E,MAAM,UAAU,WAAW,YAAY;CAEvC,OACE,CAAC,WACK,OACJ,YAAY,MAAM,iBAAiB,WACnC,eAAe,SAAS,YAAY;AAG1C"}

package/dist/Autocomplete.js

@@ -0,0 +1,130 @@
+import { createComponent } from "solid-js/web";
+import { createContext, createMemo, splitProps, useContext } from "solid-js";
+import { createAutocomplete } from "@proyecto-viviana/solidaria";
+import { createAutocompleteState } from "@proyecto-viviana/solid-stately";
+//#region src/Autocomplete.tsx
+/**
+* Autocomplete component for solidaria-components
+*
+* Provides autocomplete functionality by wrapping a text input
+* with a filterable collection (ListBox/Menu).
+*
+* Port of react-aria-components/src/Autocomplete.tsx
+*/
+const AutocompleteContext = createContext(null);
+const AutocompleteStateContext = createContext(null);
+const AutocompleteCollectionContext = createContext(null);
+/**
+* Hook to consume autocomplete input context.
+* Use this in your input component (TextField/SearchField) to get the autocomplete props.
+*/
+function useAutocompleteInput() {
+	return useContext(AutocompleteContext);
+}
+/**
+* Hook to consume autocomplete state context.
+*/
+function useAutocompleteState() {
+	return useContext(AutocompleteStateContext);
+}
+/**
+* Hook to consume autocomplete collection context.
+* Use this in your collection component (ListBox/Menu) to get the autocomplete props.
+*/
+function useAutocompleteCollection() {
+	return useContext(AutocompleteCollectionContext);
+}
+/**
+* An autocomplete allows users to search or filter a list of suggestions.
+* It wraps a text input and a collection component (ListBox or Menu),
+* providing keyboard navigation and filtering capabilities.
+*
+* @example
+* ```tsx
+* // Basic usage with SearchField and ListBox
+* <Autocomplete
+*   filter={(textValue, inputValue) =>
+*     textValue.toLowerCase().includes(inputValue.toLowerCase())
+*   }
+* >
+*   <SearchField aria-label="Search">
+*     <Input />
+*   </SearchField>
+*   <ListBox aria-label="Suggestions">
+*     <ListBoxItem>Option 1</ListBoxItem>
+*     <ListBoxItem>Option 2</ListBoxItem>
+*     <ListBoxItem>Option 3</ListBoxItem>
+*   </ListBox>
+* </Autocomplete>
+*
+* // Controlled input value
+* const [value, setValue] = createSignal('');
+* <Autocomplete
+*   inputValue={value()}
+*   onInputChange={setValue}
+*   filter={(textValue, inputValue) =>
+*     textValue.toLowerCase().includes(inputValue.toLowerCase())
+*   }
+* >
+*   {/* ... *\/}
+* </Autocomplete>
+* ```
+*/
+function Autocomplete(props) {
+	const [stateProps, ariaProps, local] = splitProps(props, [
+		"inputValue",
+		"defaultInputValue",
+		"onInputChange"
+	], [
+		"filter",
+		"disableAutoFocusFirst",
+		"disableVirtualFocus",
+		"collectionId",
+		"collectionAriaLabel"
+	]);
+	const state = createAutocompleteState(stateProps);
+	let inputRef;
+	let collectionRef;
+	const autocomplete = createAutocomplete({
+		...ariaProps,
+		inputRef: () => inputRef,
+		collectionRef: () => collectionRef
+	}, state);
+	const inputContextValue = createMemo(() => ({
+		inputProps: autocomplete.inputProps,
+		inputRef: (el) => {
+			inputRef = el;
+		}
+	}));
+	const collectionContextValue = createMemo(() => ({
+		collectionProps: autocomplete.collectionProps,
+		collectionRef: (el) => {
+			collectionRef = el;
+		},
+		filter: autocomplete.filter
+	}));
+	return createComponent(AutocompleteStateContext.Provider, {
+		value: state,
+		get children() {
+			return createComponent(AutocompleteContext.Provider, {
+				get value() {
+					return inputContextValue();
+				},
+				get children() {
+					return createComponent(AutocompleteCollectionContext.Provider, {
+						get value() {
+							return collectionContextValue();
+						},
+						get children() {
+							return props.children;
+						}
+					});
+				}
+			});
+		}
+	});
+}
+//#endregion
+export { Autocomplete, AutocompleteCollectionContext, AutocompleteContext, AutocompleteStateContext, useAutocompleteCollection, useAutocompleteInput, useAutocompleteState };
+
+//# sourceMappingURL=Autocomplete.js.map

package/dist/Autocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.js","names":["JSX","ParentProps","createContext","useContext","createMemo","splitProps","createSignal","createAutocomplete","AriaAutocompleteOptions","AutocompleteInputProps","CollectionOptions","createAutocompleteState","AutocompleteState","AutocompleteStateOptions","SlotProps","AutocompleteProps","Omit","T","AutocompleteContextValue","inputProps","inputRef","el","HTMLInputElement","AutocompleteCollectionContextValue","collectionProps","collectionRef","HTMLElement","filter","textValue","AutocompleteContext","AutocompleteStateContext","AutocompleteCollectionContext","useAutocompleteInput","useAutocompleteState","useAutocompleteCollection","Autocomplete","props","Element","stateProps","ariaProps","local","state","autocomplete","inputContextValue","collectionContextValue","_$createComponent","Provider","value","children"],"sources":["../src/Autocomplete.tsx"],"sourcesContent":["/**\n * Autocomplete component for solidaria-components\n *\n * Provides autocomplete functionality by wrapping a text input\n * with a filterable collection (ListBox/Menu).\n *\n * Port of react-aria-components/src/Autocomplete.tsx\n */\n\nimport {\n  type JSX,\n  type ParentProps,\n  createContext,\n  useContext,\n  createMemo,\n  splitProps,\n  createSignal,\n} from \"solid-js\";\nimport {\n  createAutocomplete,\n  type AriaAutocompleteOptions,\n  type AutocompleteInputProps,\n  type CollectionOptions,\n} from \"@proyecto-viviana/solidaria\";\nimport {\n  createAutocompleteState,\n  type AutocompleteState,\n  type AutocompleteStateOptions,\n} from \"@proyecto-viviana/solid-stately\";\nimport { type SlotProps } from \"./utils\";\n\nexport interface AutocompleteProps<T = unknown>\n  extends\n    Omit<AutocompleteStateOptions, \"children\">,\n    Omit<AriaAutocompleteOptions<T>, \"inputRef\" | \"collectionRef\">,\n    ParentProps,\n    SlotProps {}\n\nexport interface AutocompleteContextValue {\n  inputProps: AutocompleteInputProps;\n  inputRef: (el: HTMLInputElement) => void;\n}\n\nexport interface AutocompleteCollectionContextValue {\n  collectionProps: CollectionOptions;\n  collectionRef: (el: HTMLElement) => void;\n  filter?: (textValue: string) => boolean;\n}\n\nexport const AutocompleteContext = createContext<AutocompleteContextValue | null>(null);\nexport const AutocompleteStateContext = createContext<AutocompleteState | null>(null);\nexport const AutocompleteCollectionContext =\n  createContext<AutocompleteCollectionContextValue | null>(null);\n\n/**\n * Hook to consume autocomplete input context.\n * Use this in your input component (TextField/SearchField) to get the autocomplete props.\n */\nexport function useAutocompleteInput() {\n  return useContext(AutocompleteContext);\n}\n\n/**\n * Hook to consume autocomplete state context.\n */\nexport function useAutocompleteState() {\n  return useContext(AutocompleteStateContext);\n}\n\n/**\n * Hook to consume autocomplete collection context.\n * Use this in your collection component (ListBox/Menu) to get the autocomplete props.\n */\nexport function useAutocompleteCollection() {\n  return useContext(AutocompleteCollectionContext);\n}\n\n/**\n * An autocomplete allows users to search or filter a list of suggestions.\n * It wraps a text input and a collection component (ListBox or Menu),\n * providing keyboard navigation and filtering capabilities.\n *\n * @example\n * ```tsx\n * // Basic usage with SearchField and ListBox\n * <Autocomplete\n *   filter={(textValue, inputValue) =>\n *     textValue.toLowerCase().includes(inputValue.toLowerCase())\n *   }\n * >\n *   <SearchField aria-label=\"Search\">\n *     <Input />\n *   </SearchField>\n *   <ListBox aria-label=\"Suggestions\">\n *     <ListBoxItem>Option 1</ListBoxItem>\n *     <ListBoxItem>Option 2</ListBoxItem>\n *     <ListBoxItem>Option 3</ListBoxItem>\n *   </ListBox>\n * </Autocomplete>\n *\n * // Controlled input value\n * const [value, setValue] = createSignal('');\n * <Autocomplete\n *   inputValue={value()}\n *   onInputChange={setValue}\n *   filter={(textValue, inputValue) =>\n *     textValue.toLowerCase().includes(inputValue.toLowerCase())\n *   }\n * >\n *   {/* ... *\\/}\n * </Autocomplete>\n * ```\n */\nexport function Autocomplete<T = unknown>(props: AutocompleteProps<T>): JSX.Element {\n  const [stateProps, ariaProps, local] = splitProps(\n    props,\n    [\"inputValue\", \"defaultInputValue\", \"onInputChange\"],\n    [\n      \"filter\",\n      \"disableAutoFocusFirst\",\n      \"disableVirtualFocus\",\n      \"collectionId\",\n      \"collectionAriaLabel\",\n    ],\n  );\n\n  const state = createAutocompleteState(stateProps);\n\n  // Create refs\n  let inputRef: HTMLInputElement | undefined;\n  let collectionRef: HTMLElement | undefined;\n\n  // Create autocomplete aria\n  const autocomplete = createAutocomplete<T>(\n    {\n      ...ariaProps,\n      inputRef: () => inputRef,\n      collectionRef: () => collectionRef,\n    },\n    state,\n  );\n\n  // Input context value\n  const inputContextValue = createMemo<AutocompleteContextValue>(() => ({\n    inputProps: autocomplete.inputProps,\n    inputRef: (el: HTMLInputElement) => {\n      inputRef = el;\n    },\n  }));\n\n  // Collection context value\n  const collectionContextValue = createMemo<AutocompleteCollectionContextValue>(() => ({\n    collectionProps: autocomplete.collectionProps,\n    collectionRef: (el: HTMLElement) => {\n      collectionRef = el;\n    },\n    filter: autocomplete.filter,\n  }));\n\n  return (\n    <AutocompleteStateContext.Provider value={state}>\n      <AutocompleteContext.Provider value={inputContextValue()}>\n        <AutocompleteCollectionContext.Provider value={collectionContextValue()}>\n          {props.children}\n        </AutocompleteCollectionContext.Provider>\n      </AutocompleteContext.Provider>\n    </AutocompleteStateContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAiDA,MAAa6B,sBAAsB3B,cAA+C,IAAI;AACtF,MAAa4B,2BAA2B5B,cAAwC,IAAI;AACpF,MAAa6B,gCACX7B,cAAyD,IAAI;;;;;AAM/D,SAAgB8B,uBAAuB;CACrC,OAAO7B,WAAW0B,mBAAmB;AACvC;;;;AAKA,SAAgBI,uBAAuB;CACrC,OAAO9B,WAAW2B,wBAAwB;AAC5C;;;;;AAMA,SAAgBI,4BAA4B;CAC1C,OAAO/B,WAAW4B,6BAA6B;AACjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,SAAgBI,aAA0BC,OAA0C;CAClF,MAAM,CAACE,YAAYC,WAAWC,SAASnC,WACrC+B,OACA;EAAC;EAAc;EAAqB;CAAe,GACnD;EACE;EACA;EACA;EACA;EACA;CAAqB,CAEzB;CAEA,MAAMK,QAAQ9B,wBAAwB2B,UAAU;CAGhD,IAAIlB;CACJ,IAAIK;CAGJ,MAAMiB,eAAenC,mBACnB;EACE,GAAGgC;EACHnB,gBAAgBA;EAChBK,qBAAqBA;CACvB,GACAgB,KACF;CAGA,MAAME,oBAAoBvC,kBAA4C;EACpEe,YAAYuB,aAAavB;EACzBC,WAAWC,OAAyB;GAClCD,WAAWC;EACb;CACF,EAAE;CAGF,MAAMuB,yBAAyBxC,kBAAsD;EACnFoB,iBAAiBkB,aAAalB;EAC9BC,gBAAgBJ,OAAoB;GAClCI,gBAAgBJ;EAClB;EACAM,QAAQe,aAAaf;CACvB,EAAE;CAEF,OAAAkB,gBACGf,yBAAyBgB,UAAQ;EAACC,OAAON;EAAK,IAAAO,WAAA;GAAA,OAAAH,gBAC5ChB,oBAAoBiB,UAAQ;IAAA,IAACC,QAAK;KAAA,OAAEJ,kBAAkB;IAAC;IAAA,IAAAK,WAAA;KAAA,OAAAH,gBACrDd,8BAA8Be,UAAQ;MAAA,IAACC,QAAK;OAAA,OAAEH,uBAAuB;MAAC;MAAA,IAAAI,WAAA;OAAA,OACpEZ,MAAMY;MAAQ;KAAA,CAAA;IAAA;GAAA,CAAA;EAAA;CAAA,CAAA;AAKzB"}

package/dist/Autocomplete.jsx

@@ -0,0 +1,116 @@
+import { createContext, createMemo, splitProps, useContext } from "solid-js";
+import { createAutocomplete } from "@proyecto-viviana/solidaria";
+import { createAutocompleteState } from "@proyecto-viviana/solid-stately";
+//#region src/Autocomplete.tsx
+/**
+* Autocomplete component for solidaria-components
+*
+* Provides autocomplete functionality by wrapping a text input
+* with a filterable collection (ListBox/Menu).
+*
+* Port of react-aria-components/src/Autocomplete.tsx
+*/
+const AutocompleteContext = createContext(null);
+const AutocompleteStateContext = createContext(null);
+const AutocompleteCollectionContext = createContext(null);
+/**
+* Hook to consume autocomplete input context.
+* Use this in your input component (TextField/SearchField) to get the autocomplete props.
+*/
+function useAutocompleteInput() {
+	return useContext(AutocompleteContext);
+}
+/**
+* Hook to consume autocomplete state context.
+*/
+function useAutocompleteState() {
+	return useContext(AutocompleteStateContext);
+}
+/**
+* Hook to consume autocomplete collection context.
+* Use this in your collection component (ListBox/Menu) to get the autocomplete props.
+*/
+function useAutocompleteCollection() {
+	return useContext(AutocompleteCollectionContext);
+}
+/**
+* An autocomplete allows users to search or filter a list of suggestions.
+* It wraps a text input and a collection component (ListBox or Menu),
+* providing keyboard navigation and filtering capabilities.
+*
+* @example
+* ```tsx
+* // Basic usage with SearchField and ListBox
+* <Autocomplete
+*   filter={(textValue, inputValue) =>
+*     textValue.toLowerCase().includes(inputValue.toLowerCase())
+*   }
+* >
+*   <SearchField aria-label="Search">
+*     <Input />
+*   </SearchField>
+*   <ListBox aria-label="Suggestions">
+*     <ListBoxItem>Option 1</ListBoxItem>
+*     <ListBoxItem>Option 2</ListBoxItem>
+*     <ListBoxItem>Option 3</ListBoxItem>
+*   </ListBox>
+* </Autocomplete>
+*
+* // Controlled input value
+* const [value, setValue] = createSignal('');
+* <Autocomplete
+*   inputValue={value()}
+*   onInputChange={setValue}
+*   filter={(textValue, inputValue) =>
+*     textValue.toLowerCase().includes(inputValue.toLowerCase())
+*   }
+* >
+*   {/* ... *\/}
+* </Autocomplete>
+* ```
+*/
+function Autocomplete(props) {
+	const [stateProps, ariaProps, local] = splitProps(props, [
+		"inputValue",
+		"defaultInputValue",
+		"onInputChange"
+	], [
+		"filter",
+		"disableAutoFocusFirst",
+		"disableVirtualFocus",
+		"collectionId",
+		"collectionAriaLabel"
+	]);
+	const state = createAutocompleteState(stateProps);
+	let inputRef;
+	let collectionRef;
+	const autocomplete = createAutocomplete({
+		...ariaProps,
+		inputRef: () => inputRef,
+		collectionRef: () => collectionRef
+	}, state);
+	const inputContextValue = createMemo(() => ({
+		inputProps: autocomplete.inputProps,
+		inputRef: (el) => {
+			inputRef = el;
+		}
+	}));
+	const collectionContextValue = createMemo(() => ({
+		collectionProps: autocomplete.collectionProps,
+		collectionRef: (el) => {
+			collectionRef = el;
+		},
+		filter: autocomplete.filter
+	}));
+	return <AutocompleteStateContext.Provider value={state}>
+      <AutocompleteContext.Provider value={inputContextValue()}>
+        <AutocompleteCollectionContext.Provider value={collectionContextValue()}>
+          {props.children}
+        </AutocompleteCollectionContext.Provider>
+      </AutocompleteContext.Provider>
+    </AutocompleteStateContext.Provider>;
+}
+//#endregion
+export { Autocomplete, AutocompleteCollectionContext, AutocompleteContext, AutocompleteStateContext, useAutocompleteCollection, useAutocompleteInput, useAutocompleteState };
+
+//# sourceMappingURL=Autocomplete.jsx.map

package/dist/Autocomplete.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.jsx","names":[],"sources":["../src/Autocomplete.tsx"],"sourcesContent":["/**\n * Autocomplete component for solidaria-components\n *\n * Provides autocomplete functionality by wrapping a text input\n * with a filterable collection (ListBox/Menu).\n *\n * Port of react-aria-components/src/Autocomplete.tsx\n */\n\nimport {\n  type JSX,\n  type ParentProps,\n  createContext,\n  useContext,\n  createMemo,\n  splitProps,\n  createSignal,\n} from \"solid-js\";\nimport {\n  createAutocomplete,\n  type AriaAutocompleteOptions,\n  type AutocompleteInputProps,\n  type CollectionOptions,\n} from \"@proyecto-viviana/solidaria\";\nimport {\n  createAutocompleteState,\n  type AutocompleteState,\n  type AutocompleteStateOptions,\n} from \"@proyecto-viviana/solid-stately\";\nimport { type SlotProps } from \"./utils\";\n\nexport interface AutocompleteProps<T = unknown>\n  extends\n    Omit<AutocompleteStateOptions, \"children\">,\n    Omit<AriaAutocompleteOptions<T>, \"inputRef\" | \"collectionRef\">,\n    ParentProps,\n    SlotProps {}\n\nexport interface AutocompleteContextValue {\n  inputProps: AutocompleteInputProps;\n  inputRef: (el: HTMLInputElement) => void;\n}\n\nexport interface AutocompleteCollectionContextValue {\n  collectionProps: CollectionOptions;\n  collectionRef: (el: HTMLElement) => void;\n  filter?: (textValue: string) => boolean;\n}\n\nexport const AutocompleteContext = createContext<AutocompleteContextValue | null>(null);\nexport const AutocompleteStateContext = createContext<AutocompleteState | null>(null);\nexport const AutocompleteCollectionContext =\n  createContext<AutocompleteCollectionContextValue | null>(null);\n\n/**\n * Hook to consume autocomplete input context.\n * Use this in your input component (TextField/SearchField) to get the autocomplete props.\n */\nexport function useAutocompleteInput() {\n  return useContext(AutocompleteContext);\n}\n\n/**\n * Hook to consume autocomplete state context.\n */\nexport function useAutocompleteState() {\n  return useContext(AutocompleteStateContext);\n}\n\n/**\n * Hook to consume autocomplete collection context.\n * Use this in your collection component (ListBox/Menu) to get the autocomplete props.\n */\nexport function useAutocompleteCollection() {\n  return useContext(AutocompleteCollectionContext);\n}\n\n/**\n * An autocomplete allows users to search or filter a list of suggestions.\n * It wraps a text input and a collection component (ListBox or Menu),\n * providing keyboard navigation and filtering capabilities.\n *\n * @example\n * ```tsx\n * // Basic usage with SearchField and ListBox\n * <Autocomplete\n *   filter={(textValue, inputValue) =>\n *     textValue.toLowerCase().includes(inputValue.toLowerCase())\n *   }\n * >\n *   <SearchField aria-label=\"Search\">\n *     <Input />\n *   </SearchField>\n *   <ListBox aria-label=\"Suggestions\">\n *     <ListBoxItem>Option 1</ListBoxItem>\n *     <ListBoxItem>Option 2</ListBoxItem>\n *     <ListBoxItem>Option 3</ListBoxItem>\n *   </ListBox>\n * </Autocomplete>\n *\n * // Controlled input value\n * const [value, setValue] = createSignal('');\n * <Autocomplete\n *   inputValue={value()}\n *   onInputChange={setValue}\n *   filter={(textValue, inputValue) =>\n *     textValue.toLowerCase().includes(inputValue.toLowerCase())\n *   }\n * >\n *   {/* ... *\\/}\n * </Autocomplete>\n * ```\n */\nexport function Autocomplete<T = unknown>(props: AutocompleteProps<T>): JSX.Element {\n  const [stateProps, ariaProps, local] = splitProps(\n    props,\n    [\"inputValue\", \"defaultInputValue\", \"onInputChange\"],\n    [\n      \"filter\",\n      \"disableAutoFocusFirst\",\n      \"disableVirtualFocus\",\n      \"collectionId\",\n      \"collectionAriaLabel\",\n    ],\n  );\n\n  const state = createAutocompleteState(stateProps);\n\n  // Create refs\n  let inputRef: HTMLInputElement | undefined;\n  let collectionRef: HTMLElement | undefined;\n\n  // Create autocomplete aria\n  const autocomplete = createAutocomplete<T>(\n    {\n      ...ariaProps,\n      inputRef: () => inputRef,\n      collectionRef: () => collectionRef,\n    },\n    state,\n  );\n\n  // Input context value\n  const inputContextValue = createMemo<AutocompleteContextValue>(() => ({\n    inputProps: autocomplete.inputProps,\n    inputRef: (el: HTMLInputElement) => {\n      inputRef = el;\n    },\n  }));\n\n  // Collection context value\n  const collectionContextValue = createMemo<AutocompleteCollectionContextValue>(() => ({\n    collectionProps: autocomplete.collectionProps,\n    collectionRef: (el: HTMLElement) => {\n      collectionRef = el;\n    },\n    filter: autocomplete.filter,\n  }));\n\n  return (\n    <AutocompleteStateContext.Provider value={state}>\n      <AutocompleteContext.Provider value={inputContextValue()}>\n        <AutocompleteCollectionContext.Provider value={collectionContextValue()}>\n          {props.children}\n        </AutocompleteCollectionContext.Provider>\n      </AutocompleteContext.Provider>\n    </AutocompleteStateContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAiDA,MAAa,sBAAsB,cAA+C,IAAI;AACtF,MAAa,2BAA2B,cAAwC,IAAI;AACpF,MAAa,gCACX,cAAyD,IAAI;;;;;AAM/D,SAAgB,uBAAuB;CACrC,OAAO,WAAW,mBAAmB;AACvC;;;;AAKA,SAAgB,uBAAuB;CACrC,OAAO,WAAW,wBAAwB;AAC5C;;;;;AAMA,SAAgB,4BAA4B;CAC1C,OAAO,WAAW,6BAA6B;AACjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,SAAgB,aAA0B,OAA0C;CAClF,MAAM,CAAC,YAAY,WAAW,SAAS,WACrC,OACA;EAAC;EAAc;EAAqB;CAAe,GACnD;EACE;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,QAAQ,wBAAwB,UAAU;CAGhD,IAAI;CACJ,IAAI;CAGJ,MAAM,eAAe,mBACnB;EACE,GAAG;EACH,gBAAgB;EAChB,qBAAqB;CACvB,GACA,KACF;CAGA,MAAM,oBAAoB,kBAA4C;EACpE,YAAY,aAAa;EACzB,WAAW,OAAyB;GAClC,WAAW;EACb;CACF,EAAE;CAGF,MAAM,yBAAyB,kBAAsD;EACnF,iBAAiB,aAAa;EAC9B,gBAAgB,OAAoB;GAClC,gBAAgB;EAClB;EACA,QAAQ,aAAa;CACvB,EAAE;CAEF,OACE,CAAC,yBAAyB,SAAS,OAAO,OAAO;MAC/C,CAAC,oBAAoB,SAAS,OAAO,kBAAkB,GAAG;QACxD,CAAC,8BAA8B,SAAS,OAAO,uBAAuB,GAAG;WACtE,MAAM,SAAS;QAClB,EAAE,8BAA8B,SAAS;MAC3C,EAAE,oBAAoB,SAAS;IACjC,EAAE,yBAAyB;AAE/B"}