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

package/dist/ToggleButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.d.ts","sourceRoot":"","sources":["../src/ToggleButton.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,KAAK,GAAG,EAAqD,MAAM,UAAU,CAAC;AACvF,OAAO,EAML,KAAK,qBAAqB,EAC3B,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,SAAS,EAGf,MAAM,SAAS,CAAC;AAGjB,KAAK,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;CAAE,GAAG,SAAS,CAAC;AAWzE,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,qBAAqB,EAAE,UAAU,CAAC,EAAE,SAAS;IAC3F,8DAA8D;IAC9D,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,+DAA+D;IAC/D,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,QAAQ,CAAC,EAAE,cAAc,CAAC,uBAAuB,CAAC,CAAC;IACnD,KAAK,CAAC,EAAE,mBAAmB,CAAC,uBAAuB,CAAC,CAAC;IACrD,KAAK,CAAC,EAAE,eAAe,CAAC,uBAAuB,CAAC,CAAC;IACjD,6CAA6C;IAC7C,GAAG,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CAClC;AAED,eAAO,MAAM,mBAAmB,sDAAgD,CAAC;AASjF,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAsGlE"}
+{"version":3,"file":"ToggleButton.d.ts","sourceRoot":"","sources":["../src/ToggleButton.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAOL,KAAK,qBAAqB,EAC3B,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,SAAS,EAIf,MAAM,SAAS,CAAC;AAIjB,KAAK,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;CAAE,GAAG,SAAS,CAAC;AAWzE,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,qBAAqB,EAAE,UAAU,CAAC,EAAE,SAAS;IAC3F,8DAA8D;IAC9D,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,+DAA+D;IAC/D,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,QAAQ,CAAC,EAAE,cAAc,CAAC,uBAAuB,CAAC,CAAC;IACnD,KAAK,CAAC,EAAE,mBAAmB,CAAC,uBAAuB,CAAC,CAAC;IACrD,KAAK,CAAC,EAAE,eAAe,CAAC,uBAAuB,CAAC,CAAC;IACjD,6CAA6C;IAC7C,GAAG,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CAClC;AAED,eAAO,MAAM,mBAAmB,sDAAgD,CAAC;AASjF,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAsGlE"}

package/dist/ToggleButton.js

@@ -1,17 +1,30 @@
-import { filterDOMProps, useRenderProps } from "./utils.js";
+/*
+* Copyright 2022 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/ToggleButton.tsx
+import { dataAttr, filterDOMProps, useRenderProps } from "./utils.js";
 import { useToggleButtonGroupStateContext } from "./ToggleButtonGroup.js";
-import { getNextElement, insert, mergeProps, runHydrationEvents, spread, template, use } from "solid-js/web";
-import { createContext, createMemo, splitProps, useContext } from "solid-js";
-import { createFocusRing, createHover, createToggleButton, createToggleButtonGroupItem, mergeProps as mergeProps$2 } from "@proyecto-viviana/solidaria";
+import { getNextElement, insert, ref, runHydrationEvents, scope, spread, template } from "@solidjs/web";
+import { createContext, createMemo, useContext } from "solid-js";
+import { createFocusRing, createHover, createToggleButton, createToggleButtonGroupItem, mergeProps as mergeProps$1 } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 //#region src/ToggleButton.tsx
 /**
 * ToggleButton component for solidaria-components
 *
 * A pre-wired headless toggle button that combines pressed + selected state.
-* Port direction: react-aria-components/src/ToggleButton.tsx
+* Based on packages/react-aria-components/src/ToggleButton.tsx.
 */
-var _tmpl$ = /*#__PURE__*/ template(`<button>`);
-function assignRef(ref, el) {
+var _tmpl$ = /* @__PURE__ */ template(`<button>`);
+function assignRef$1(ref, el) {
 	if (!ref) return;
 	if (typeof ref === "function") ref(el);
 	else ref.current = el;
@@ -23,7 +36,8 @@ function resolveDisabledValue(isDisabled) {
 }
 function ToggleButton(props) {
 	const contextProps = useContext(ToggleButtonContext);
-	const [local, ariaProps] = splitProps(contextProps ? mergeProps$2(contextProps, props) : props, [
+	const mergedProps = contextProps ? mergeProps$1(contextProps, props) : props;
+	const [local, ariaProps] = splitProps(mergedProps, [
 		"children",
 		"class",
 		"style",
@@ -34,13 +48,13 @@ function ToggleButton(props) {
 	]);
 	const groupState = useToggleButtonGroupStateContext();
 	const groupKey = local.id ?? local.toggleKey;
-	const standaloneAriaProps = mergeProps$2(ariaProps, { get id() {
+	const standaloneAriaProps = mergeProps$1(ariaProps, { get id() {
 		return local.id;
 	} });
-	const toggleAria = groupState && groupKey != null ? createToggleButtonGroupItem({
-		...ariaProps,
-		id: groupKey
-	}, groupState) : createToggleButton(standaloneAriaProps);
+	const groupedAriaProps = mergeProps$1(ariaProps, { get id() {
+		return local.id ?? local.toggleKey;
+	} });
+	const toggleAria = groupState && groupKey != null ? createToggleButtonGroupItem(groupedAriaProps, groupState) : createToggleButton(standaloneAriaProps);
 	const isDisabled = () => resolveDisabledValue(ariaProps.isDisabled) || !!groupState?.isDisabled;
 	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
 	const { isHovered, hoverProps } = createHover({ get isDisabled() {
@@ -80,11 +94,17 @@ function ToggleButton(props) {
 		const { ref: _ref3, ...rest } = hoverProps;
 		return rest;
 	};
-	return (() => {
-		var _el$ = getNextElement(_tmpl$);
-		use((el) => assignRef(local.ref, el), _el$);
-		spread(_el$, mergeProps(domProps, cleanButtonProps, cleanFocusProps, cleanHoverProps, {
-			get ["class"]() {
+	var _el$ = getNextElement(_tmpl$);
+	ref(() => {
+		return (el) => assignRef$1(local.ref, el);
+	}, _el$);
+	spread(_el$, [
+		domProps,
+		cleanButtonProps,
+		cleanFocusProps,
+		cleanHoverProps,
+		{
+			get "class"() {
 				return renderProps.class();
 			},
 			get style() {
@@ -93,29 +113,31 @@ function ToggleButton(props) {
 			get slot() {
 				return local.slot;
 			},
-			get ["data-pressed"]() {
-				return toggleAria.isPressed() || void 0;
+			get "data-pressed"() {
+				return dataAttr(toggleAria.isPressed());
 			},
-			get ["data-hovered"]() {
-				return isHovered() || void 0;
+			get "data-hovered"() {
+				return dataAttr(isHovered());
 			},
-			get ["data-focused"]() {
-				return isFocused() || void 0;
+			get "data-focused"() {
+				return dataAttr(isFocused());
 			},
-			get ["data-focus-visible"]() {
-				return isFocusVisible() || void 0;
+			get "data-focus-visible"() {
+				return dataAttr(isFocusVisible());
 			},
-			get ["data-disabled"]() {
-				return isDisabled() || void 0;
+			get "data-disabled"() {
+				return dataAttr(isDisabled());
 			},
-			get ["data-selected"]() {
-				return toggleAria.isSelected() || void 0;
+			get "data-selected"() {
+				return dataAttr(toggleAria.isSelected());
 			}
-		}), false, true);
-		insert(_el$, () => renderProps.renderChildren());
-		runHydrationEvents();
-		return _el$;
-	})();
+		}
+	], true);
+	insert(_el$, scope(() => {
+		return renderProps.renderChildren();
+	}));
+	runHydrationEvents();
+	return _el$;
 }
 //#endregion
 export { ToggleButton, ToggleButtonContext };

package/dist/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.js","names":["JSX","createContext","createMemo","splitProps","useContext","createToggleButton","createToggleButtonGroupItem","createFocusRing","createHover","mergeProps","AriaToggleButtonProps","Key","RenderChildren","ClassNameOrFunction","StyleOrFunction","SlotProps","useRenderProps","filterDOMProps","useToggleButtonGroupStateContext","RefLike","el","T","current","assignRef","ref","ToggleButtonRenderProps","isHovered","isPressed","isFocused","isFocusVisible","isDisabled","isSelected","ToggleButtonProps","Omit","toggleKey","id","children","class","style","HTMLButtonElement","ToggleButtonContext","resolveDisabledValue","ToggleButton","props","Element","contextProps","mergedProps","local","ariaProps","groupState","groupKey","standaloneAriaProps","toggleAria","focusProps","hoverProps","renderValues","renderProps","defaultClassName","domProps","filtered","global","Record","onClick","cleanButtonProps","_ref1","rest","buttonProps","cleanFocusProps","_ref2","cleanHoverProps","_ref3","_el$","_$getNextElement","_tmpl$","_$use","_$spread","_$mergeProps","slot","data-pressed","undefined","data-hovered","data-focused","data-focus-visible","data-disabled","data-selected","_$insert","renderChildren","_$runHydrationEvents"],"sources":["../src/ToggleButton.tsx"],"sourcesContent":["/**\n * ToggleButton component for solidaria-components\n *\n * A pre-wired headless toggle button that combines pressed + selected state.\n * Port direction: react-aria-components/src/ToggleButton.tsx\n */\n\nimport { type JSX, createContext, createMemo, splitProps, useContext } from \"solid-js\";\nimport {\n  createToggleButton,\n  createToggleButtonGroupItem,\n  createFocusRing,\n  createHover,\n  mergeProps,\n  type AriaToggleButtonProps,\n} from \"@proyecto-viviana/solidaria\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport {\n  type RenderChildren,\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type SlotProps,\n  useRenderProps,\n  filterDOMProps,\n} from \"./utils\";\nimport { useToggleButtonGroupStateContext } from \"./ToggleButtonGroup\";\n\ntype RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;\n\nfunction assignRef<T>(ref: RefLike<T>, el: T): void {\n  if (!ref) return;\n  if (typeof ref === \"function\") {\n    ref(el);\n  } else {\n    ref.current = el;\n  }\n}\n\nexport interface ToggleButtonRenderProps {\n  isHovered: boolean;\n  isPressed: boolean;\n  isFocused: boolean;\n  isFocusVisible: boolean;\n  isDisabled: boolean;\n  isSelected: boolean;\n}\n\nexport interface ToggleButtonProps extends Omit<AriaToggleButtonProps, \"children\">, SlotProps {\n  /** Key used when inside ToggleButtonGroup selection state. */\n  toggleKey?: Key;\n  /** Preferred group key prop, parity with RAC item id usage. */\n  id?: Key;\n  children?: RenderChildren<ToggleButtonRenderProps>;\n  class?: ClassNameOrFunction<ToggleButtonRenderProps>;\n  style?: StyleOrFunction<ToggleButtonRenderProps>;\n  /** Ref for the underlying button element. */\n  ref?: RefLike<HTMLButtonElement>;\n}\n\nexport const ToggleButtonContext = createContext<ToggleButtonProps | null>(null);\n\nfunction resolveDisabledValue(isDisabled: AriaToggleButtonProps[\"isDisabled\"]): boolean {\n  if (typeof isDisabled === \"function\") {\n    return isDisabled();\n  }\n  return !!isDisabled;\n}\n\nexport function ToggleButton(props: ToggleButtonProps): JSX.Element {\n  const contextProps = useContext(ToggleButtonContext);\n  const mergedProps = (contextProps ? mergeProps(contextProps, props) : props) as ToggleButtonProps;\n\n  const [local, ariaProps] = splitProps(mergedProps, [\n    \"children\",\n    \"class\",\n    \"style\",\n    \"ref\",\n    \"slot\",\n    \"toggleKey\",\n    \"id\",\n  ]);\n  const groupState = useToggleButtonGroupStateContext();\n  const groupKey = local.id ?? local.toggleKey;\n  const standaloneAriaProps = mergeProps<AriaToggleButtonProps>(ariaProps, {\n    get id() {\n      return local.id;\n    },\n  });\n\n  const toggleAria =\n    groupState && groupKey != null\n      ? createToggleButtonGroupItem(\n          {\n            ...ariaProps,\n            id: groupKey,\n          },\n          groupState,\n        )\n      : createToggleButton(standaloneAriaProps);\n\n  const isDisabled = () => resolveDisabledValue(ariaProps.isDisabled) || !!groupState?.isDisabled;\n\n  const { isFocused, isFocusVisible, focusProps } = createFocusRing();\n  const { isHovered, hoverProps } = createHover({\n    get isDisabled() {\n      return isDisabled();\n    },\n  });\n\n  const renderValues = createMemo<ToggleButtonRenderProps>(() => ({\n    isHovered: isHovered(),\n    isPressed: toggleAria.isPressed(),\n    isFocused: isFocused(),\n    isFocusVisible: isFocusVisible(),\n    isDisabled: isDisabled(),\n    isSelected: toggleAria.isSelected(),\n  }));\n\n  const renderProps = useRenderProps(\n    {\n      get children() {\n        return local.children;\n      },\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-ToggleButton\",\n    },\n    renderValues,\n  );\n\n  const domProps = createMemo(() => {\n    const filtered = filterDOMProps(ariaProps, { global: true });\n    delete (filtered as Record<string, unknown>).onClick;\n    delete (filtered as Record<string, unknown>).id;\n    return filtered;\n  });\n\n  const cleanButtonProps = () => {\n    const { ref: _ref1, ...rest } = toggleAria.buttonProps as Record<string, unknown>;\n    return rest;\n  };\n  const cleanFocusProps = () => {\n    const { ref: _ref2, ...rest } = focusProps as Record<string, unknown>;\n    return rest;\n  };\n  const cleanHoverProps = () => {\n    const { ref: _ref3, ...rest } = hoverProps as Record<string, unknown>;\n    return rest;\n  };\n\n  return (\n    <button\n      {...domProps()}\n      {...cleanButtonProps()}\n      {...cleanFocusProps()}\n      {...cleanHoverProps()}\n      class={renderProps.class()}\n      style={renderProps.style()}\n      ref={(el) => assignRef(local.ref, el)}\n      slot={local.slot}\n      data-pressed={toggleAria.isPressed() || undefined}\n      data-hovered={isHovered() || undefined}\n      data-focused={isFocused() || undefined}\n      data-focus-visible={isFocusVisible() || undefined}\n      data-disabled={isDisabled() || undefined}\n      data-selected={toggleAria.isSelected() || undefined}\n    >\n      {renderProps.renderChildren()}\n    </button>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ToggleButton.js","names":["ref={(el) => assignRef(local.ref, el)}","{renderProps.renderChildren()}","<button\n      {...domProps()}\n      {...cleanButtonProps()}\n      {...cleanFocusProps()}\n      {...cleanHoverProps()}\n      class={renderProps.class()}\n      style={renderProps.style()}\n      ref={(el) => assignRef(local.ref, el)}\n      slot={local.slot}\n      data-pressed={dataAttr(toggleAria.isPressed())}\n      data-hovered={dataAttr(isHovered())}\n      data-focused={dataAttr(isFocused())}\n      data-focus-visible={dataAttr(isFocusVisible())}\n      data-disabled={dataAttr(isDisabled())}\n      data-selected={dataAttr(toggleAria.isSelected())}\n    >\n      {renderProps.renderChildren()}\n    </button>"],"sources":["../src/ToggleButton.tsx"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/ToggleButton.tsx\n\n/**\n * ToggleButton component for solidaria-components\n *\n * A pre-wired headless toggle button that combines pressed + selected state.\n * Based on packages/react-aria-components/src/ToggleButton.tsx.\n */\n\nimport { createContext, createMemo, useContext } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n  createToggleButton,\n  createToggleButtonGroupItem,\n  createFocusRing,\n  createHover,\n  mergeProps,\n  type AriaToggleButtonGroupItemProps,\n  type AriaToggleButtonProps,\n} from \"@proyecto-viviana/solidaria\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport {\n  type RenderChildren,\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type SlotProps,\n  useRenderProps,\n  filterDOMProps,\n  dataAttr,\n} from \"./utils\";\nimport { useToggleButtonGroupStateContext } from \"./ToggleButtonGroup\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\ntype RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;\n\nfunction assignRef<T>(ref: RefLike<T>, el: T): void {\n  if (!ref) return;\n  if (typeof ref === \"function\") {\n    ref(el);\n  } else {\n    ref.current = el;\n  }\n}\n\nexport interface ToggleButtonRenderProps {\n  isHovered: boolean;\n  isPressed: boolean;\n  isFocused: boolean;\n  isFocusVisible: boolean;\n  isDisabled: boolean;\n  isSelected: boolean;\n}\n\nexport interface ToggleButtonProps extends Omit<AriaToggleButtonProps, \"children\">, SlotProps {\n  /** Key used when inside ToggleButtonGroup selection state. */\n  toggleKey?: Key;\n  /** Preferred group key prop, parity with RAC item id usage. */\n  id?: Key;\n  children?: RenderChildren<ToggleButtonRenderProps>;\n  class?: ClassNameOrFunction<ToggleButtonRenderProps>;\n  style?: StyleOrFunction<ToggleButtonRenderProps>;\n  /** Ref for the underlying button element. */\n  ref?: RefLike<HTMLButtonElement>;\n}\n\nexport const ToggleButtonContext = createContext<ToggleButtonProps | null>(null);\n\nfunction resolveDisabledValue(isDisabled: AriaToggleButtonProps[\"isDisabled\"]): boolean {\n  if (typeof isDisabled === \"function\") {\n    return isDisabled();\n  }\n  return !!isDisabled;\n}\n\nexport function ToggleButton(props: ToggleButtonProps): JSX.Element {\n  const contextProps = useContext(ToggleButtonContext);\n  const mergedProps = (contextProps ? mergeProps(contextProps, props) : props) as ToggleButtonProps;\n\n  const [local, ariaProps] = splitProps(mergedProps, [\n    \"children\",\n    \"class\",\n    \"style\",\n    \"ref\",\n    \"slot\",\n    \"toggleKey\",\n    \"id\",\n  ]);\n  const groupState = useToggleButtonGroupStateContext();\n  const groupKey = local.id ?? local.toggleKey;\n  const standaloneAriaProps = mergeProps<AriaToggleButtonProps>(ariaProps, {\n    get id() {\n      return local.id;\n    },\n  });\n\n  const groupedAriaProps = mergeProps<AriaToggleButtonGroupItemProps>(ariaProps, {\n    get id(): Key {\n      return (local.id ?? local.toggleKey) as Key;\n    },\n  });\n\n  const toggleAria =\n    groupState && groupKey != null\n      ? createToggleButtonGroupItem(groupedAriaProps, groupState)\n      : createToggleButton(standaloneAriaProps);\n\n  const isDisabled = () => resolveDisabledValue(ariaProps.isDisabled) || !!groupState?.isDisabled;\n\n  const { isFocused, isFocusVisible, focusProps } = createFocusRing();\n  const { isHovered, hoverProps } = createHover({\n    get isDisabled() {\n      return isDisabled();\n    },\n  });\n\n  const renderValues = createMemo<ToggleButtonRenderProps>(() => ({\n    isHovered: isHovered(),\n    isPressed: toggleAria.isPressed(),\n    isFocused: isFocused(),\n    isFocusVisible: isFocusVisible(),\n    isDisabled: isDisabled(),\n    isSelected: toggleAria.isSelected(),\n  }));\n\n  const renderProps = useRenderProps(\n    {\n      get children() {\n        return local.children;\n      },\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-ToggleButton\",\n    },\n    renderValues,\n  );\n\n  const domProps = createMemo(() => {\n    const filtered = filterDOMProps(ariaProps, { global: true });\n    delete (filtered as Record<string, unknown>).onClick;\n    delete (filtered as Record<string, unknown>).id;\n    return filtered;\n  });\n\n  const cleanButtonProps = () => {\n    const { ref: _ref1, ...rest } = toggleAria.buttonProps as Record<string, unknown>;\n    return rest;\n  };\n  const cleanFocusProps = () => {\n    const { ref: _ref2, ...rest } = focusProps as Record<string, unknown>;\n    return rest;\n  };\n  const cleanHoverProps = () => {\n    const { ref: _ref3, ...rest } = hoverProps as Record<string, unknown>;\n    return rest;\n  };\n\n  return (\n    <button\n      {...domProps()}\n      {...cleanButtonProps()}\n      {...cleanFocusProps()}\n      {...cleanHoverProps()}\n      class={renderProps.class()}\n      style={renderProps.style()}\n      ref={(el) => assignRef(local.ref, el)}\n      slot={local.slot}\n      data-pressed={dataAttr(toggleAria.isPressed())}\n      data-hovered={dataAttr(isHovered())}\n      data-focused={dataAttr(isFocused())}\n      data-focus-visible={dataAttr(isFocusVisible())}\n      data-disabled={dataAttr(isDisabled())}\n      data-selected={dataAttr(toggleAria.isSelected())}\n    >\n      {renderProps.renderChildren()}\n    </button>\n  );\n}\n"],"mappings":"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"}

package/dist/ToggleButton.jsx

@@ -1,15 +1,28 @@
-import { filterDOMProps, useRenderProps } from "./utils.jsx";
+/*
+* Copyright 2022 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/ToggleButton.tsx
+import { dataAttr, filterDOMProps, useRenderProps } from "./utils.jsx";
 import { useToggleButtonGroupStateContext } from "./ToggleButtonGroup.jsx";
-import { createContext, createMemo, splitProps, useContext } from "solid-js";
-import { createFocusRing, createHover, createToggleButton, createToggleButtonGroupItem, mergeProps as mergeProps$1 } from "@proyecto-viviana/solidaria";
+import { createContext, createMemo, useContext } from "solid-js";
+import { createFocusRing, createHover, createToggleButton, createToggleButtonGroupItem, mergeProps } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 //#region src/ToggleButton.tsx
 /**
 * ToggleButton component for solidaria-components
 *
 * A pre-wired headless toggle button that combines pressed + selected state.
-* Port direction: react-aria-components/src/ToggleButton.tsx
+* Based on packages/react-aria-components/src/ToggleButton.tsx.
 */
-function assignRef(ref, el) {
+function assignRef$1(ref, el) {
 	if (!ref) return;
 	if (typeof ref === "function") ref(el);
 	else ref.current = el;
@@ -21,7 +34,8 @@ function resolveDisabledValue(isDisabled) {
 }
 function ToggleButton(props) {
 	const contextProps = useContext(ToggleButtonContext);
-	const [local, ariaProps] = splitProps(contextProps ? mergeProps$1(contextProps, props) : props, [
+	const mergedProps = contextProps ? mergeProps(contextProps, props) : props;
+	const [local, ariaProps] = splitProps(mergedProps, [
 		"children",
 		"class",
 		"style",
@@ -32,13 +46,13 @@ function ToggleButton(props) {
 	]);
 	const groupState = useToggleButtonGroupStateContext();
 	const groupKey = local.id ?? local.toggleKey;
-	const standaloneAriaProps = mergeProps$1(ariaProps, { get id() {
+	const standaloneAriaProps = mergeProps(ariaProps, { get id() {
 		return local.id;
 	} });
-	const toggleAria = groupState && groupKey != null ? createToggleButtonGroupItem({
-		...ariaProps,
-		id: groupKey
-	}, groupState) : createToggleButton(standaloneAriaProps);
+	const groupedAriaProps = mergeProps(ariaProps, { get id() {
+		return local.id ?? local.toggleKey;
+	} });
+	const toggleAria = groupState && groupKey != null ? createToggleButtonGroupItem(groupedAriaProps, groupState) : createToggleButton(standaloneAriaProps);
 	const isDisabled = () => resolveDisabledValue(ariaProps.isDisabled) || !!groupState?.isDisabled;
 	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
 	const { isHovered, hoverProps } = createHover({ get isDisabled() {
@@ -78,7 +92,7 @@ function ToggleButton(props) {
 		const { ref: _ref3, ...rest } = hoverProps;
 		return rest;
 	};
-	return <button {...domProps()} {...cleanButtonProps()} {...cleanFocusProps()} {...cleanHoverProps()} class={renderProps.class()} style={renderProps.style()} ref={(el) => assignRef(local.ref, el)} slot={local.slot} data-pressed={toggleAria.isPressed() || void 0} data-hovered={isHovered() || void 0} data-focused={isFocused() || void 0} data-focus-visible={isFocusVisible() || void 0} data-disabled={isDisabled() || void 0} data-selected={toggleAria.isSelected() || void 0}>
+	return <button {...domProps()} {...cleanButtonProps()} {...cleanFocusProps()} {...cleanHoverProps()} class={renderProps.class()} style={renderProps.style()} ref={(el) => assignRef$1(local.ref, el)} slot={local.slot} data-pressed={dataAttr(toggleAria.isPressed())} data-hovered={dataAttr(isHovered())} data-focused={dataAttr(isFocused())} data-focus-visible={dataAttr(isFocusVisible())} data-disabled={dataAttr(isDisabled())} data-selected={dataAttr(toggleAria.isSelected())}>
       {renderProps.renderChildren()}
     </button>;
 }

package/dist/ToggleButton.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.jsx","names":["mergeProps"],"sources":["../src/ToggleButton.tsx"],"sourcesContent":["/**\n * ToggleButton component for solidaria-components\n *\n * A pre-wired headless toggle button that combines pressed + selected state.\n * Port direction: react-aria-components/src/ToggleButton.tsx\n */\n\nimport { type JSX, createContext, createMemo, splitProps, useContext } from \"solid-js\";\nimport {\n  createToggleButton,\n  createToggleButtonGroupItem,\n  createFocusRing,\n  createHover,\n  mergeProps,\n  type AriaToggleButtonProps,\n} from \"@proyecto-viviana/solidaria\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport {\n  type RenderChildren,\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type SlotProps,\n  useRenderProps,\n  filterDOMProps,\n} from \"./utils\";\nimport { useToggleButtonGroupStateContext } from \"./ToggleButtonGroup\";\n\ntype RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;\n\nfunction assignRef<T>(ref: RefLike<T>, el: T): void {\n  if (!ref) return;\n  if (typeof ref === \"function\") {\n    ref(el);\n  } else {\n    ref.current = el;\n  }\n}\n\nexport interface ToggleButtonRenderProps {\n  isHovered: boolean;\n  isPressed: boolean;\n  isFocused: boolean;\n  isFocusVisible: boolean;\n  isDisabled: boolean;\n  isSelected: boolean;\n}\n\nexport interface ToggleButtonProps extends Omit<AriaToggleButtonProps, \"children\">, SlotProps {\n  /** Key used when inside ToggleButtonGroup selection state. */\n  toggleKey?: Key;\n  /** Preferred group key prop, parity with RAC item id usage. */\n  id?: Key;\n  children?: RenderChildren<ToggleButtonRenderProps>;\n  class?: ClassNameOrFunction<ToggleButtonRenderProps>;\n  style?: StyleOrFunction<ToggleButtonRenderProps>;\n  /** Ref for the underlying button element. */\n  ref?: RefLike<HTMLButtonElement>;\n}\n\nexport const ToggleButtonContext = createContext<ToggleButtonProps | null>(null);\n\nfunction resolveDisabledValue(isDisabled: AriaToggleButtonProps[\"isDisabled\"]): boolean {\n  if (typeof isDisabled === \"function\") {\n    return isDisabled();\n  }\n  return !!isDisabled;\n}\n\nexport function ToggleButton(props: ToggleButtonProps): JSX.Element {\n  const contextProps = useContext(ToggleButtonContext);\n  const mergedProps = (contextProps ? mergeProps(contextProps, props) : props) as ToggleButtonProps;\n\n  const [local, ariaProps] = splitProps(mergedProps, [\n    \"children\",\n    \"class\",\n    \"style\",\n    \"ref\",\n    \"slot\",\n    \"toggleKey\",\n    \"id\",\n  ]);\n  const groupState = useToggleButtonGroupStateContext();\n  const groupKey = local.id ?? local.toggleKey;\n  const standaloneAriaProps = mergeProps<AriaToggleButtonProps>(ariaProps, {\n    get id() {\n      return local.id;\n    },\n  });\n\n  const toggleAria =\n    groupState && groupKey != null\n      ? createToggleButtonGroupItem(\n          {\n            ...ariaProps,\n            id: groupKey,\n          },\n          groupState,\n        )\n      : createToggleButton(standaloneAriaProps);\n\n  const isDisabled = () => resolveDisabledValue(ariaProps.isDisabled) || !!groupState?.isDisabled;\n\n  const { isFocused, isFocusVisible, focusProps } = createFocusRing();\n  const { isHovered, hoverProps } = createHover({\n    get isDisabled() {\n      return isDisabled();\n    },\n  });\n\n  const renderValues = createMemo<ToggleButtonRenderProps>(() => ({\n    isHovered: isHovered(),\n    isPressed: toggleAria.isPressed(),\n    isFocused: isFocused(),\n    isFocusVisible: isFocusVisible(),\n    isDisabled: isDisabled(),\n    isSelected: toggleAria.isSelected(),\n  }));\n\n  const renderProps = useRenderProps(\n    {\n      get children() {\n        return local.children;\n      },\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-ToggleButton\",\n    },\n    renderValues,\n  );\n\n  const domProps = createMemo(() => {\n    const filtered = filterDOMProps(ariaProps, { global: true });\n    delete (filtered as Record<string, unknown>).onClick;\n    delete (filtered as Record<string, unknown>).id;\n    return filtered;\n  });\n\n  const cleanButtonProps = () => {\n    const { ref: _ref1, ...rest } = toggleAria.buttonProps as Record<string, unknown>;\n    return rest;\n  };\n  const cleanFocusProps = () => {\n    const { ref: _ref2, ...rest } = focusProps as Record<string, unknown>;\n    return rest;\n  };\n  const cleanHoverProps = () => {\n    const { ref: _ref3, ...rest } = hoverProps as Record<string, unknown>;\n    return rest;\n  };\n\n  return (\n    <button\n      {...domProps()}\n      {...cleanButtonProps()}\n      {...cleanFocusProps()}\n      {...cleanHoverProps()}\n      class={renderProps.class()}\n      style={renderProps.style()}\n      ref={(el) => assignRef(local.ref, el)}\n      slot={local.slot}\n      data-pressed={toggleAria.isPressed() || undefined}\n      data-hovered={isHovered() || undefined}\n      data-focused={isFocused() || undefined}\n      data-focus-visible={isFocusVisible() || undefined}\n      data-disabled={isDisabled() || undefined}\n      data-selected={toggleAria.isSelected() || undefined}\n    >\n      {renderProps.renderChildren()}\n    </button>\n  );\n}\n"],"mappings":";;;;;;;;;;;AA6BA,SAAS,UAAa,KAAiB,IAAa;CAClD,IAAI,CAAC,KAAK;CACV,IAAI,OAAO,QAAQ,YACjB,IAAI,EAAE;MAEN,IAAI,UAAU;AAElB;AAuBA,MAAa,sBAAsB,cAAwC,IAAI;AAE/E,SAAS,qBAAqB,YAA0D;CACtF,IAAI,OAAO,eAAe,YACxB,OAAO,WAAW;CAEpB,OAAO,CAAC,CAAC;AACX;AAEA,SAAgB,aAAa,OAAuC;CAClE,MAAM,eAAe,WAAW,mBAAmB;CAGnD,MAAM,CAAC,OAAO,aAAa,WAFN,eAAeA,aAAW,cAAc,KAAK,IAAI,OAEnB;EACjD;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,MAAM,aAAa,iCAAiC;CACpD,MAAM,WAAW,MAAM,MAAM,MAAM;CACnC,MAAM,sBAAsBA,aAAkC,WAAW,EACvE,IAAI,KAAK;EACP,OAAO,MAAM;CACf,EACF,CAAC;CAED,MAAM,aACJ,cAAc,YAAY,OACtB,4BACE;EACE,GAAG;EACH,IAAI;CACN,GACA,UACF,IACA,mBAAmB,mBAAmB;CAE5C,MAAM,mBAAmB,qBAAqB,UAAU,UAAU,KAAK,CAAC,CAAC,YAAY;CAErF,MAAM,EAAE,WAAW,gBAAgB,eAAe,gBAAgB;CAClE,MAAM,EAAE,WAAW,eAAe,YAAY,EAC5C,IAAI,aAAa;EACf,OAAO,WAAW;CACpB,EACF,CAAC;CAED,MAAM,eAAe,kBAA2C;EAC9D,WAAW,UAAU;EACrB,WAAW,WAAW,UAAU;EAChC,WAAW,UAAU;EACrB,gBAAgB,eAAe;EAC/B,YAAY,WAAW;EACvB,YAAY,WAAW,WAAW;CACpC,EAAE;CAEF,MAAM,cAAc,eAClB;EACE,IAAI,WAAW;GACb,OAAO,MAAM;EACf;EACA,OAAO,MAAM;EACb,OAAO,MAAM;EACb,kBAAkB;CACpB,GACA,YACF;CAEA,MAAM,WAAW,iBAAiB;EAChC,MAAM,WAAW,eAAe,WAAW,EAAE,QAAQ,KAAK,CAAC;EAC3D,OAAQ,SAAqC;EAC7C,OAAQ,SAAqC;EAC7C,OAAO;CACT,CAAC;CAED,MAAM,yBAAyB;EAC7B,MAAM,EAAE,KAAK,OAAO,GAAG,SAAS,WAAW;EAC3C,OAAO;CACT;CACA,MAAM,wBAAwB;EAC5B,MAAM,EAAE,KAAK,OAAO,GAAG,SAAS;EAChC,OAAO;CACT;CACA,MAAM,wBAAwB;EAC5B,MAAM,EAAE,KAAK,OAAO,GAAG,SAAS;EAChC,OAAO;CACT;CAEA,OACE,CAAC,WACK,SAAS,OACT,iBAAiB,OACjB,gBAAgB,OAChB,gBAAgB,GACpB,OAAO,YAAY,MAAM,GACzB,OAAO,YAAY,MAAM,GACzB,MAAM,OAAO,UAAU,MAAM,KAAK,EAAE,GACpC,MAAM,MAAM,MACZ,cAAc,WAAW,UAAU,KAAK,KAAA,GACxC,cAAc,UAAU,KAAK,KAAA,GAC7B,cAAc,UAAU,KAAK,KAAA,GAC7B,oBAAoB,eAAe,KAAK,KAAA,GACxC,eAAe,WAAW,KAAK,KAAA,GAC/B,eAAe,WAAW,WAAW,KAAK,KAAA,GAC3C;OACE,YAAY,eAAe,EAAE;IAChC,EAAE;AAEN"}
+{"version":3,"file":"ToggleButton.jsx","names":["assignRef"],"sources":["../src/ToggleButton.tsx"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/ToggleButton.tsx\n\n/**\n * ToggleButton component for solidaria-components\n *\n * A pre-wired headless toggle button that combines pressed + selected state.\n * Based on packages/react-aria-components/src/ToggleButton.tsx.\n */\n\nimport { createContext, createMemo, useContext } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n  createToggleButton,\n  createToggleButtonGroupItem,\n  createFocusRing,\n  createHover,\n  mergeProps,\n  type AriaToggleButtonGroupItemProps,\n  type AriaToggleButtonProps,\n} from \"@proyecto-viviana/solidaria\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport {\n  type RenderChildren,\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type SlotProps,\n  useRenderProps,\n  filterDOMProps,\n  dataAttr,\n} from \"./utils\";\nimport { useToggleButtonGroupStateContext } from \"./ToggleButtonGroup\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\ntype RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;\n\nfunction assignRef<T>(ref: RefLike<T>, el: T): void {\n  if (!ref) return;\n  if (typeof ref === \"function\") {\n    ref(el);\n  } else {\n    ref.current = el;\n  }\n}\n\nexport interface ToggleButtonRenderProps {\n  isHovered: boolean;\n  isPressed: boolean;\n  isFocused: boolean;\n  isFocusVisible: boolean;\n  isDisabled: boolean;\n  isSelected: boolean;\n}\n\nexport interface ToggleButtonProps extends Omit<AriaToggleButtonProps, \"children\">, SlotProps {\n  /** Key used when inside ToggleButtonGroup selection state. */\n  toggleKey?: Key;\n  /** Preferred group key prop, parity with RAC item id usage. */\n  id?: Key;\n  children?: RenderChildren<ToggleButtonRenderProps>;\n  class?: ClassNameOrFunction<ToggleButtonRenderProps>;\n  style?: StyleOrFunction<ToggleButtonRenderProps>;\n  /** Ref for the underlying button element. */\n  ref?: RefLike<HTMLButtonElement>;\n}\n\nexport const ToggleButtonContext = createContext<ToggleButtonProps | null>(null);\n\nfunction resolveDisabledValue(isDisabled: AriaToggleButtonProps[\"isDisabled\"]): boolean {\n  if (typeof isDisabled === \"function\") {\n    return isDisabled();\n  }\n  return !!isDisabled;\n}\n\nexport function ToggleButton(props: ToggleButtonProps): JSX.Element {\n  const contextProps = useContext(ToggleButtonContext);\n  const mergedProps = (contextProps ? mergeProps(contextProps, props) : props) as ToggleButtonProps;\n\n  const [local, ariaProps] = splitProps(mergedProps, [\n    \"children\",\n    \"class\",\n    \"style\",\n    \"ref\",\n    \"slot\",\n    \"toggleKey\",\n    \"id\",\n  ]);\n  const groupState = useToggleButtonGroupStateContext();\n  const groupKey = local.id ?? local.toggleKey;\n  const standaloneAriaProps = mergeProps<AriaToggleButtonProps>(ariaProps, {\n    get id() {\n      return local.id;\n    },\n  });\n\n  const groupedAriaProps = mergeProps<AriaToggleButtonGroupItemProps>(ariaProps, {\n    get id(): Key {\n      return (local.id ?? local.toggleKey) as Key;\n    },\n  });\n\n  const toggleAria =\n    groupState && groupKey != null\n      ? createToggleButtonGroupItem(groupedAriaProps, groupState)\n      : createToggleButton(standaloneAriaProps);\n\n  const isDisabled = () => resolveDisabledValue(ariaProps.isDisabled) || !!groupState?.isDisabled;\n\n  const { isFocused, isFocusVisible, focusProps } = createFocusRing();\n  const { isHovered, hoverProps } = createHover({\n    get isDisabled() {\n      return isDisabled();\n    },\n  });\n\n  const renderValues = createMemo<ToggleButtonRenderProps>(() => ({\n    isHovered: isHovered(),\n    isPressed: toggleAria.isPressed(),\n    isFocused: isFocused(),\n    isFocusVisible: isFocusVisible(),\n    isDisabled: isDisabled(),\n    isSelected: toggleAria.isSelected(),\n  }));\n\n  const renderProps = useRenderProps(\n    {\n      get children() {\n        return local.children;\n      },\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-ToggleButton\",\n    },\n    renderValues,\n  );\n\n  const domProps = createMemo(() => {\n    const filtered = filterDOMProps(ariaProps, { global: true });\n    delete (filtered as Record<string, unknown>).onClick;\n    delete (filtered as Record<string, unknown>).id;\n    return filtered;\n  });\n\n  const cleanButtonProps = () => {\n    const { ref: _ref1, ...rest } = toggleAria.buttonProps as Record<string, unknown>;\n    return rest;\n  };\n  const cleanFocusProps = () => {\n    const { ref: _ref2, ...rest } = focusProps as Record<string, unknown>;\n    return rest;\n  };\n  const cleanHoverProps = () => {\n    const { ref: _ref3, ...rest } = hoverProps as Record<string, unknown>;\n    return rest;\n  };\n\n  return (\n    <button\n      {...domProps()}\n      {...cleanButtonProps()}\n      {...cleanFocusProps()}\n      {...cleanHoverProps()}\n      class={renderProps.class()}\n      style={renderProps.style()}\n      ref={(el) => assignRef(local.ref, el)}\n      slot={local.slot}\n      data-pressed={dataAttr(toggleAria.isPressed())}\n      data-hovered={dataAttr(isHovered())}\n      data-focused={dataAttr(isFocused())}\n      data-focus-visible={dataAttr(isFocusVisible())}\n      data-disabled={dataAttr(isDisabled())}\n      data-selected={dataAttr(toggleAria.isSelected())}\n    >\n      {renderProps.renderChildren()}\n    </button>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA+CA,SAASA,YAAa,KAAiB,IAAa;CAClD,IAAI,CAAC,KAAK;CACV,IAAI,OAAO,QAAQ,YACjB,IAAI,EAAE;MAEN,IAAI,UAAU;AAElB;AAuBA,MAAa,sBAAsB,cAAwC,IAAI;AAE/E,SAAS,qBAAqB,YAA0D;CACtF,IAAI,OAAO,eAAe,YACxB,OAAO,WAAW;CAEpB,OAAO,CAAC,CAAC;AACX;AAEA,SAAgB,aAAa,OAAuC;CAClE,MAAM,eAAe,WAAW,mBAAmB;CACnD,MAAM,cAAe,eAAe,WAAW,cAAc,KAAK,IAAI;CAEtE,MAAM,CAAC,OAAO,aAAa,WAAW,aAAa;EACjD;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,MAAM,aAAa,iCAAiC;CACpD,MAAM,WAAW,MAAM,MAAM,MAAM;CACnC,MAAM,sBAAsB,WAAkC,WAAW,EACvE,IAAI,KAAK;EACP,OAAO,MAAM;CACf,EACF,CAAC;CAED,MAAM,mBAAmB,WAA2C,WAAW,EAC7E,IAAI,KAAU;EACZ,OAAQ,MAAM,MAAM,MAAM;CAC5B,EACF,CAAC;CAED,MAAM,aACJ,cAAc,YAAY,OACtB,4BAA4B,kBAAkB,UAAU,IACxD,mBAAmB,mBAAmB;CAE5C,MAAM,mBAAmB,qBAAqB,UAAU,UAAU,KAAK,CAAC,CAAC,YAAY;CAErF,MAAM,EAAE,WAAW,gBAAgB,eAAe,gBAAgB;CAClE,MAAM,EAAE,WAAW,eAAe,YAAY,EAC5C,IAAI,aAAa;EACf,OAAO,WAAW;CACpB,EACF,CAAC;CAED,MAAM,eAAe,kBAA2C;EAC9D,WAAW,UAAU;EACrB,WAAW,WAAW,UAAU;EAChC,WAAW,UAAU;EACrB,gBAAgB,eAAe;EAC/B,YAAY,WAAW;EACvB,YAAY,WAAW,WAAW;CACpC,EAAE;CAEF,MAAM,cAAc,eAClB;EACE,IAAI,WAAW;GACb,OAAO,MAAM;EACf;EACA,OAAO,MAAM;EACb,OAAO,MAAM;EACb,kBAAkB;CACpB,GACA,YACF;CAEA,MAAM,WAAW,iBAAiB;EAChC,MAAM,WAAW,eAAe,WAAW,EAAE,QAAQ,KAAK,CAAC;EAC3D,OAAQ,SAAqC;EAC7C,OAAQ,SAAqC;EAC7C,OAAO;CACT,CAAC;CAED,MAAM,yBAAyB;EAC7B,MAAM,EAAE,KAAK,OAAO,GAAG,SAAS,WAAW;EAC3C,OAAO;CACT;CACA,MAAM,wBAAwB;EAC5B,MAAM,EAAE,KAAK,OAAO,GAAG,SAAS;EAChC,OAAO;CACT;CACA,MAAM,wBAAwB;EAC5B,MAAM,EAAE,KAAK,OAAO,GAAG,SAAS;EAChC,OAAO;CACT;CAEA,OACE,CAAC,WACK,SAAS,OACT,iBAAiB,OACjB,gBAAgB,OAChB,gBAAgB,GACpB,OAAO,YAAY,MAAM,GACzB,OAAO,YAAY,MAAM,GACzB,MAAM,OAAOA,YAAU,MAAM,KAAK,EAAE,GACpC,MAAM,MAAM,MACZ,cAAc,SAAS,WAAW,UAAU,CAAC,GAC7C,cAAc,SAAS,UAAU,CAAC,GAClC,cAAc,SAAS,UAAU,CAAC,GAClC,oBAAoB,SAAS,eAAe,CAAC,GAC7C,eAAe,SAAS,WAAW,CAAC,GACpC,eAAe,SAAS,WAAW,WAAW,CAAC,GAChD;OACE,YAAY,eAAe,EAAE;IAChC,EAAE;AAEN"}

package/dist/ToggleButtonGroup.d.ts

@@ -1,10 +1,4 @@
-/**
- * ToggleButtonGroup component for solidaria-components.
- *
- * Groups toggle buttons with single/multiple selection state.
- * Parity target: react-aria-components/src/ToggleButtonGroup.tsx
- */
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { type Key, type ToggleGroupState } from "@proyecto-viviana/solid-stately";
 import { type ClassNameOrFunction, type StyleOrFunction, type RenderChildren, type SlotProps } from "./utils";
 export interface ToggleButtonGroupRenderProps {

package/dist/ToggleButtonGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButtonGroup.d.ts","sourceRoot":"","sources":["../src/ToggleButtonGroup.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,KAAK,GAAG,EAAqD,MAAM,UAAU,CAAC;AAEvF,OAAO,EAEL,KAAK,GAAG,EACR,KAAK,gBAAgB,EACtB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,SAAS,EAGf,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,4BAA4B;IAC3C,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IACvC,UAAU,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,gBAAgB,CAAC;CACzB;AAED,MAAM,WAAW,sBACf,SACE,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,mBAAmB,CAAC,EAC9F,SAAS;IACX,aAAa,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IACtC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,YAAY,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC7B,mBAAmB,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACpC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IAC7C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,cAAc,CAAC,4BAA4B,CAAC,CAAC;IACxD,KAAK,CAAC,EAAE,mBAAmB,CAAC,4BAA4B,CAAC,CAAC;IAC1D,KAAK,CAAC,EAAE,eAAe,CAAC,4BAA4B,CAAC,CAAC;CACvD;AAED,eAAO,MAAM,wBAAwB,2DAAqD,CAAC;AAC3F,eAAO,MAAM,6BAA6B,qDAA+C,CAAC;AAC1F,eAAO,MAAM,uBAAuB,qDAAgC,CAAC;AACrE,MAAM,MAAM,kCAAkC,GAAG,gBAAgB,CAAC;AAElE,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,GAAG,CAAC,OAAO,CAwF5E;AAED,wBAAgB,gCAAgC,IAAI,gBAAgB,GAAG,IAAI,CAE1E"}
+{"version":3,"file":"ToggleButtonGroup.d.ts","sourceRoot":"","sources":["../src/ToggleButtonGroup.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAEL,KAAK,GAAG,EACR,KAAK,gBAAgB,EACtB,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,SAAS,EAKf,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,4BAA4B;IAC3C,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IACvC,UAAU,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,gBAAgB,CAAC;CACzB;AAED,MAAM,WAAW,sBACf,SACE,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,mBAAmB,CAAC,EAC9F,SAAS;IACX,aAAa,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IACtC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,YAAY,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC7B,mBAAmB,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACpC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IAC7C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,cAAc,CAAC,4BAA4B,CAAC,CAAC;IACxD,KAAK,CAAC,EAAE,mBAAmB,CAAC,4BAA4B,CAAC,CAAC;IAC1D,KAAK,CAAC,EAAE,eAAe,CAAC,4BAA4B,CAAC,CAAC;CACvD;AAED,eAAO,MAAM,wBAAwB,2DAAqD,CAAC;AAC3F,eAAO,MAAM,6BAA6B,qDAA+C,CAAC;AAC1F,eAAO,MAAM,uBAAuB,qDAAgC,CAAC;AACrE,MAAM,MAAM,kCAAkC,GAAG,gBAAgB,CAAC;AAElE,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,GAAG,CAAC,OAAO,CAwF5E;AAED,wBAAgB,gCAAgC,IAAI,gBAAgB,GAAG,IAAI,CAE1E"}

package/dist/ToggleButtonGroup.js

@@ -1,16 +1,29 @@
-import { filterDOMProps, useRenderProps } from "./utils.js";
-import { createComponent, getNextElement, insert, mergeProps, runHydrationEvents, spread, template, use } from "solid-js/web";
-import { createContext, createMemo, splitProps, useContext } from "solid-js";
-import { createToggleButtonGroup, mergeProps as mergeProps$2 } from "@proyecto-viviana/solidaria";
+/*
+* Copyright 2024 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/ToggleButtonGroup.tsx
+import { attrString as attrString$1, dataAttr, filterDOMProps, useRenderProps } from "./utils.js";
+import { createComponent, getNextElement, insert, ref, runHydrationEvents, spread, template } from "@solidjs/web";
+import { createContext, createMemo, useContext } from "solid-js";
+import { createToggleButtonGroup, mergeProps as mergeProps$1 } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { createToggleGroupState } from "@proyecto-viviana/solid-stately";
 //#region src/ToggleButtonGroup.tsx
 /**
 * ToggleButtonGroup component for solidaria-components.
 *
 * Groups toggle buttons with single/multiple selection state.
-* Parity target: react-aria-components/src/ToggleButtonGroup.tsx
+* Based on packages/react-aria-components/src/ToggleButtonGroup.tsx.
 */
-var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
 const ToggleButtonGroupContext = createContext(null);
 const ToggleButtonGroupStateContext = createContext(null);
 const ToggleGroupStateContext = ToggleButtonGroupStateContext;
@@ -47,10 +60,10 @@ function ToggleButtonGroup(props) {
 			return !!local.isDisabled;
 		},
 		get "aria-label"() {
-			return local["aria-label"];
+			return attrString$1(local["aria-label"]);
 		},
 		get "aria-labelledby"() {
-			return local["aria-labelledby"];
+			return attrString$1(local["aria-labelledby"]);
 		}
 	}, state);
 	const renderProps = useRenderProps({
@@ -66,44 +79,46 @@ function ToggleButtonGroup(props) {
 		state
 	}));
 	const filteredDomProps = createMemo(() => filterDOMProps(domProps, { global: true }));
-	const mergedGroupProps = createMemo(() => mergeProps$2(filteredDomProps(), groupProps));
-	return (() => {
-		var _el$ = getNextElement(_tmpl$);
-		use((el) => {
+	const mergedGroupProps = createMemo(() => mergeProps$1(filteredDomProps(), groupProps));
+	var _el$ = getNextElement(_tmpl$);
+	ref(() => {
+		return (el) => {
 			if (!local.ref) return;
 			if (typeof local.ref === "function") local.ref(el);
-		}, _el$);
-		spread(_el$, mergeProps(() => mergedGroupProps(), {
-			get ["class"]() {
-				return renderProps.class();
-			},
-			get style() {
-				return renderProps.style();
-			},
-			get slot() {
-				return local.slot;
-			},
-			get ["data-orientation"]() {
-				return local.orientation ?? "horizontal";
-			},
-			get ["data-disabled"]() {
-				return local.isDisabled || void 0;
-			}
-		}), false, true);
-		insert(_el$, createComponent(ToggleButtonGroupContext.Provider, {
-			value: props,
-			get children() {
-				return createComponent(ToggleButtonGroupStateContext.Provider, {
-					value: state,
-					get children() {
-						return renderProps.renderChildren();
-					}
-				});
-			}
-		}));
-		runHydrationEvents();
-		return _el$;
-	})();
+		};
+	}, _el$);
+	spread(_el$, [() => {
+		return mergedGroupProps();
+	}, {
+		get "class"() {
+			return renderProps.class();
+		},
+		get style() {
+			return renderProps.style();
+		},
+		get slot() {
+			return local.slot;
+		},
+		get "data-orientation"() {
+			return local.orientation ?? "horizontal";
+		},
+		get "data-disabled"() {
+			return dataAttr(local.isDisabled);
+		}
+	}], true);
+	insert(_el$, createComponent(ToggleButtonGroupContext, {
+		value: props,
+		get children() {
+			return createComponent(ToggleButtonGroupStateContext, {
+				value: state,
+				get children() {
+					return renderProps.renderChildren();
+				}
+			});
+		}
+	}));
+	runHydrationEvents();
+	return _el$;
 }
 function useToggleButtonGroupStateContext() {
 	return useContext(ToggleButtonGroupStateContext);

package/dist/ToggleButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButtonGroup.js","names":["JSX","createContext","createMemo","splitProps","useContext","createToggleButtonGroup","mergeProps","createToggleGroupState","Key","ToggleGroupState","ClassNameOrFunction","StyleOrFunction","RenderChildren","SlotProps","useRenderProps","filterDOMProps","ToggleButtonGroupRenderProps","orientation","isDisabled","state","ToggleButtonGroupProps","Omit","HTMLAttributes","HTMLDivElement","selectionMode","disallowEmptySelection","selectedKeys","Iterable","defaultSelectedKeys","onSelectionChange","keys","Set","children","class","style","ToggleButtonGroupContext","ToggleButtonGroupStateContext","ToggleGroupStateContext","ToggleButtonGroupStateContextValue","ToggleButtonGroup","props","Element","local","domProps","groupProps","aria-label","aria-labelledby","renderProps","defaultClassName","filteredDomProps","global","mergedGroupProps","Record","_el$","_$getNextElement","_tmpl$","_$use","el","ref","_$spread","_$mergeProps","slot","data-orientation","data-disabled","undefined","_$insert","_$createComponent","Provider","value","renderChildren","_$runHydrationEvents","useToggleButtonGroupStateContext"],"sources":["../src/ToggleButtonGroup.tsx"],"sourcesContent":["/**\n * ToggleButtonGroup component for solidaria-components.\n *\n * Groups toggle buttons with single/multiple selection state.\n * Parity target: react-aria-components/src/ToggleButtonGroup.tsx\n */\n\nimport { type JSX, createContext, createMemo, splitProps, useContext } from \"solid-js\";\nimport { createToggleButtonGroup, mergeProps } from \"@proyecto-viviana/solidaria\";\nimport {\n  createToggleGroupState,\n  type Key,\n  type ToggleGroupState,\n} from \"@proyecto-viviana/solid-stately\";\nimport {\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type RenderChildren,\n  type SlotProps,\n  useRenderProps,\n  filterDOMProps,\n} from \"./utils\";\n\nexport interface ToggleButtonGroupRenderProps {\n  orientation: \"horizontal\" | \"vertical\";\n  isDisabled: boolean;\n  state: ToggleGroupState;\n}\n\nexport interface ToggleButtonGroupProps\n  extends\n    Omit<JSX.HTMLAttributes<HTMLDivElement>, \"children\" | \"class\" | \"style\" | \"onSelectionChange\">,\n    SlotProps {\n  selectionMode?: \"single\" | \"multiple\";\n  disallowEmptySelection?: boolean;\n  selectedKeys?: Iterable<Key>;\n  defaultSelectedKeys?: Iterable<Key>;\n  onSelectionChange?: (keys: Set<Key>) => void;\n  orientation?: \"horizontal\" | \"vertical\";\n  isDisabled?: boolean;\n  children?: RenderChildren<ToggleButtonGroupRenderProps>;\n  class?: ClassNameOrFunction<ToggleButtonGroupRenderProps>;\n  style?: StyleOrFunction<ToggleButtonGroupRenderProps>;\n}\n\nexport const ToggleButtonGroupContext = createContext<ToggleButtonGroupProps | null>(null);\nexport const ToggleButtonGroupStateContext = createContext<ToggleGroupState | null>(null);\nexport const ToggleGroupStateContext = ToggleButtonGroupStateContext;\nexport type ToggleButtonGroupStateContextValue = ToggleGroupState;\n\nexport function ToggleButtonGroup(props: ToggleButtonGroupProps): JSX.Element {\n  const [local, domProps] = splitProps(props, [\n    \"selectionMode\",\n    \"disallowEmptySelection\",\n    \"selectedKeys\",\n    \"defaultSelectedKeys\",\n    \"onSelectionChange\",\n    \"orientation\",\n    \"isDisabled\",\n    \"children\",\n    \"class\",\n    \"style\",\n    \"ref\",\n    \"slot\",\n    \"aria-label\",\n    \"aria-labelledby\",\n  ]);\n\n  const state = createToggleGroupState(() => ({\n    selectionMode: local.selectionMode,\n    disallowEmptySelection: local.disallowEmptySelection,\n    selectedKeys: local.selectedKeys,\n    defaultSelectedKeys: local.defaultSelectedKeys,\n    onSelectionChange: local.onSelectionChange,\n    isDisabled: !!local.isDisabled,\n  }));\n\n  const { groupProps } = createToggleButtonGroup(\n    {\n      get orientation() {\n        return local.orientation;\n      },\n      get isDisabled() {\n        return !!local.isDisabled;\n      },\n      get \"aria-label\"() {\n        return local[\"aria-label\"];\n      },\n      get \"aria-labelledby\"() {\n        return local[\"aria-labelledby\"];\n      },\n    },\n    state,\n  );\n\n  const renderProps = useRenderProps(\n    {\n      get children() {\n        return local.children;\n      },\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-ToggleButtonGroup\",\n    },\n    () => ({\n      orientation: local.orientation ?? \"horizontal\",\n      isDisabled: !!local.isDisabled,\n      state,\n    }),\n  );\n\n  const filteredDomProps = createMemo(() => filterDOMProps(domProps, { global: true }));\n  const mergedGroupProps = createMemo(() =>\n    mergeProps(filteredDomProps(), groupProps as Record<string, unknown>),\n  );\n\n  return (\n    <div\n      {...(mergedGroupProps() as JSX.HTMLAttributes<HTMLDivElement>)}\n      class={renderProps.class()}\n      style={renderProps.style()}\n      slot={local.slot}\n      data-orientation={local.orientation ?? \"horizontal\"}\n      data-disabled={local.isDisabled || undefined}\n      ref={(el) => {\n        if (!local.ref) return;\n        if (typeof local.ref === \"function\") {\n          local.ref(el);\n        }\n      }}\n    >\n      <ToggleButtonGroupContext.Provider value={props}>\n        <ToggleButtonGroupStateContext.Provider value={state}>\n          {renderProps.renderChildren()}\n        </ToggleButtonGroupStateContext.Provider>\n      </ToggleButtonGroupContext.Provider>\n    </div>\n  );\n}\n\nexport function useToggleButtonGroupStateContext(): ToggleGroupState | null {\n  return useContext(ToggleButtonGroupStateContext);\n}\n"],"mappings":";;;;;;;;;;;;;AA6CA,MAAamC,2BAA2BlC,cAA6C,IAAI;AACzF,MAAamC,gCAAgCnC,cAAuC,IAAI;AACxF,MAAaoC,0BAA0BD;AAGvC,SAAgBG,kBAAkBC,OAA4C;CAC5E,MAAM,CAACE,OAAOC,YAAYxC,WAAWqC,OAAO;EAC1C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAiB,CAClB;CAED,MAAMrB,QAAQZ,8BAA8B;EAC1CiB,eAAekB,MAAMlB;EACrBC,wBAAwBiB,MAAMjB;EAC9BC,cAAcgB,MAAMhB;EACpBE,qBAAqBc,MAAMd;EAC3BC,mBAAmBa,MAAMb;EACzBX,YAAY,CAAC,CAACwB,MAAMxB;CACtB,EAAE;CAEF,MAAM,EAAE0B,eAAevC,wBACrB;EACE,IAAIY,cAAc;GAChB,OAAOyB,MAAMzB;EACf;EACA,IAAIC,aAAa;GACf,OAAO,CAAC,CAACwB,MAAMxB;EACjB;EACA,IAAI,eAAe;GACjB,OAAOwB,MAAM;EACf;EACA,IAAI,oBAAoB;GACtB,OAAOA,MAAM;EACf;CACF,GACAvB,KACF;CAEA,MAAM4B,cAAcjC,eAClB;EACE,IAAIkB,WAAW;GACb,OAAOU,MAAMV;EACf;EACAC,OAAOS,MAAMT;EACbC,OAAOQ,MAAMR;EACbc,kBAAkB;CACpB,UACO;EACL/B,aAAayB,MAAMzB,eAAe;EAClCC,YAAY,CAAC,CAACwB,MAAMxB;EACpBC;CACF,EACF;CAEA,MAAM8B,mBAAmB/C,iBAAiBa,eAAe4B,UAAU,EAAEO,QAAQ,KAAK,CAAC,CAAC;CACpF,MAAMC,mBAAmBjD,iBACvBI,aAAW2C,iBAAiB,GAAGL,UAAqC,CACtE;CAEA,cAAA;EAAA,IAAAS,OAAAC,eAAAC,MAAA;EAAAC,KAQUC,OAAO;GACX,IAAI,CAACf,MAAMgB,KAAK;GAChB,IAAI,OAAOhB,MAAMgB,QAAQ,YACvBhB,MAAMgB,IAAID,EAAE;EAEhB,GAACJ,IAAA;EAAAM,OAAAN,MAAAO,iBAXIT,iBAAiB,GAAuC;GAAA,KAAA,WAAA;IAAA,OACtDJ,YAAYd,MAAM;GAAC;GAAA,IAC1BC,QAAK;IAAA,OAAEa,YAAYb,MAAM;GAAC;GAAA,IAC1B2B,OAAI;IAAA,OAAEnB,MAAMmB;GAAI;GAAA,KAAA,sBAAA;IAAA,OACEnB,MAAMzB,eAAe;GAAY;GAAA,KAAA,mBAAA;IAAA,OACpCyB,MAAMxB,cAAc8C,KAAAA;GAAS;EAAA,CAAA,GAAA,OAAA,IAAA;EAAAC,OAAAZ,MAAAa,gBAQ3C/B,yBAAyBgC,UAAQ;GAACC,OAAO5B;GAAK,IAAAR,WAAA;IAAA,OAAAkC,gBAC5C9B,8BAA8B+B,UAAQ;KAACC,OAAOjD;KAAK,IAAAa,WAAA;MAAA,OACjDe,YAAYsB,eAAe;KAAC;IAAA,CAAA;GAAA;EAAA,CAAA,CAAA;EAAAC,mBAAA;EAAA,OAAAjB;CAAA,EAAA,CAAA;AAKvC;AAEA,SAAgBkB,mCAA4D;CAC1E,OAAOnE,WAAWgC,6BAA6B;AACjD"}
+{"version":3,"file":"ToggleButtonGroup.js","names":["ref={(el) => {\n        if (!local.ref) return;\n        if (typeof local.ref === \"function\") {\n          local.ref(el);\n        }\n      }}","<ToggleButtonGroupContext value={props}>\n        <ToggleButtonGroupStateContext value={state}>\n          {renderProps.renderChildren()}\n        </ToggleButtonGroupStateContext>\n      </ToggleButtonGroupContext>","value={props}","<ToggleButtonGroupStateContext value={state}>\n          {renderProps.renderChildren()}\n        </ToggleButtonGroupStateContext>","value={state}","<div\n      {...(mergedGroupProps() as JSX.HTMLAttributes<HTMLDivElement>)}\n      class={renderProps.class()}\n      style={renderProps.style()}\n      slot={local.slot}\n      data-orientation={local.orientation ?? \"horizontal\"}\n      data-disabled={dataAttr(local.isDisabled)}\n      ref={(el) => {\n        if (!local.ref) return;\n        if (typeof local.ref === \"function\") {\n          local.ref(el);\n        }\n      }}\n    >\n      <ToggleButtonGroupContext value={props}>\n        <ToggleButtonGroupStateContext value={state}>\n          {renderProps.renderChildren()}\n        </ToggleButtonGroupStateContext>\n      </ToggleButtonGroupContext>\n    </div>"],"sources":["../src/ToggleButtonGroup.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/ToggleButtonGroup.tsx\n\n/**\n * ToggleButtonGroup component for solidaria-components.\n *\n * Groups toggle buttons with single/multiple selection state.\n * Based on packages/react-aria-components/src/ToggleButtonGroup.tsx.\n */\n\nimport { createContext, createMemo, useContext } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { createToggleButtonGroup, mergeProps } from \"@proyecto-viviana/solidaria\";\nimport {\n  createToggleGroupState,\n  type Key,\n  type ToggleGroupState,\n} from \"@proyecto-viviana/solid-stately\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type RenderChildren,\n  type SlotProps,\n  useRenderProps,\n  filterDOMProps,\n  dataAttr,\n  attrString,\n} from \"./utils\";\n\nexport interface ToggleButtonGroupRenderProps {\n  orientation: \"horizontal\" | \"vertical\";\n  isDisabled: boolean;\n  state: ToggleGroupState;\n}\n\nexport interface ToggleButtonGroupProps\n  extends\n    Omit<JSX.HTMLAttributes<HTMLDivElement>, \"children\" | \"class\" | \"style\" | \"onSelectionChange\">,\n    SlotProps {\n  selectionMode?: \"single\" | \"multiple\";\n  disallowEmptySelection?: boolean;\n  selectedKeys?: Iterable<Key>;\n  defaultSelectedKeys?: Iterable<Key>;\n  onSelectionChange?: (keys: Set<Key>) => void;\n  orientation?: \"horizontal\" | \"vertical\";\n  isDisabled?: boolean;\n  children?: RenderChildren<ToggleButtonGroupRenderProps>;\n  class?: ClassNameOrFunction<ToggleButtonGroupRenderProps>;\n  style?: StyleOrFunction<ToggleButtonGroupRenderProps>;\n}\n\nexport const ToggleButtonGroupContext = createContext<ToggleButtonGroupProps | null>(null);\nexport const ToggleButtonGroupStateContext = createContext<ToggleGroupState | null>(null);\nexport const ToggleGroupStateContext = ToggleButtonGroupStateContext;\nexport type ToggleButtonGroupStateContextValue = ToggleGroupState;\n\nexport function ToggleButtonGroup(props: ToggleButtonGroupProps): JSX.Element {\n  const [local, domProps] = splitProps(props, [\n    \"selectionMode\",\n    \"disallowEmptySelection\",\n    \"selectedKeys\",\n    \"defaultSelectedKeys\",\n    \"onSelectionChange\",\n    \"orientation\",\n    \"isDisabled\",\n    \"children\",\n    \"class\",\n    \"style\",\n    \"ref\",\n    \"slot\",\n    \"aria-label\",\n    \"aria-labelledby\",\n  ]);\n\n  const state = createToggleGroupState(() => ({\n    selectionMode: local.selectionMode,\n    disallowEmptySelection: local.disallowEmptySelection,\n    selectedKeys: local.selectedKeys,\n    defaultSelectedKeys: local.defaultSelectedKeys,\n    onSelectionChange: local.onSelectionChange,\n    isDisabled: !!local.isDisabled,\n  }));\n\n  const { groupProps } = createToggleButtonGroup(\n    {\n      get orientation() {\n        return local.orientation;\n      },\n      get isDisabled() {\n        return !!local.isDisabled;\n      },\n      get \"aria-label\"() {\n        return attrString(local[\"aria-label\"]);\n      },\n      get \"aria-labelledby\"() {\n        return attrString(local[\"aria-labelledby\"]);\n      },\n    },\n    state,\n  );\n\n  const renderProps = useRenderProps(\n    {\n      get children() {\n        return local.children;\n      },\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-ToggleButtonGroup\",\n    },\n    () => ({\n      orientation: local.orientation ?? \"horizontal\",\n      isDisabled: !!local.isDisabled,\n      state,\n    }),\n  );\n\n  const filteredDomProps = createMemo(() => filterDOMProps(domProps, { global: true }));\n  const mergedGroupProps = createMemo(() =>\n    mergeProps(filteredDomProps(), groupProps as Record<string, unknown>),\n  );\n\n  return (\n    <div\n      {...(mergedGroupProps() as JSX.HTMLAttributes<HTMLDivElement>)}\n      class={renderProps.class()}\n      style={renderProps.style()}\n      slot={local.slot}\n      data-orientation={local.orientation ?? \"horizontal\"}\n      data-disabled={dataAttr(local.isDisabled)}\n      ref={(el) => {\n        if (!local.ref) return;\n        if (typeof local.ref === \"function\") {\n          local.ref(el);\n        }\n      }}\n    >\n      <ToggleButtonGroupContext value={props}>\n        <ToggleButtonGroupStateContext value={state}>\n          {renderProps.renderChildren()}\n        </ToggleButtonGroupStateContext>\n      </ToggleButtonGroupContext>\n    </div>\n  );\n}\n\nexport function useToggleButtonGroupStateContext(): ToggleGroupState | null {\n  return useContext(ToggleButtonGroupStateContext);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA+DA,MAAa,2BAA2B,cAA6C,IAAI;AACzF,MAAa,gCAAgC,cAAuC,IAAI;AACxF,MAAa,0BAA0B;AAGvC,SAAgB,kBAAkB,OAA4C;CAC5E,MAAM,CAAC,OAAO,YAAY,WAAW,OAAO;EAC1C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,QAAQ,8BAA8B;EAC1C,eAAe,MAAM;EACrB,wBAAwB,MAAM;EAC9B,cAAc,MAAM;EACpB,qBAAqB,MAAM;EAC3B,mBAAmB,MAAM;EACzB,YAAY,CAAC,CAAC,MAAM;CACtB,EAAE;CAEF,MAAM,EAAE,eAAe,wBACrB;EACE,IAAI,cAAc;GAChB,OAAO,MAAM;EACf;EACA,IAAI,aAAa;GACf,OAAO,CAAC,CAAC,MAAM;EACjB;EACA,IAAI,eAAe;GACjB,OAAO,aAAW,MAAM,aAAa;EACvC;EACA,IAAI,oBAAoB;GACtB,OAAO,aAAW,MAAM,kBAAkB;EAC5C;CACF,GACA,KACF;CAEA,MAAM,cAAc,eAClB;EACE,IAAI,WAAW;GACb,OAAO,MAAM;EACf;EACA,OAAO,MAAM;EACb,OAAO,MAAM;EACb,kBAAkB;CACpB,UACO;EACL,aAAa,MAAM,eAAe;EAClC,YAAY,CAAC,CAAC,MAAM;EACpB;CACF,EACF;CAEA,MAAM,mBAAmB,iBAAiB,eAAe,UAAU,EAAE,QAAQ,KAAK,CAAC,CAAC;CACpF,MAAM,mBAAmB,iBACvB,aAAW,iBAAiB,GAAG,UAAqC,CACtE;CAGE,IAAA,OAAA,eAAA,MAmBK;CAZH,UAAA;EAAM,QAAA,OAAO;GACX,IAAI,CAAC,MAAM,KAAK;GAChB,IAAI,OAAO,MAAM,QAAQ,YACvB,MAAM,IAAI,EAAE;EAEhB;CAAC,GALDA,IAKC;CAXD,OAAA,MAAA,OAAA;EAAK,OAAA,iBAAiB;CAAwC,GAAA;EAC9D,IAAA,UAAA;GAAO,OAAA,YAAY,MAAM;EAAC;EAC1B,IAAA,QAAA;GAAO,OAAA,YAAY,MAAM;EAAC;EAC1B,IAAA,OAAA;GAAM,OAAA,MAAM;EAAI;EAChB,IAAA,qBAAA;GAAkB,OAAA,MAAM,eAAe;EAAY;EACnD,IAAA,kBAAA;GAAe,OAAA,SAAS,MAAM,UAAU;EAAC;;CAN3C,OAAA,MAcEC,gBAAAA,0BAAAA;EAA0BC,OAAO;EAAjC,IAAA,WAAA;GACEC,OAAAA,gBAAAA,+BAAAA;IAA+BC,OAAO;IAAtC,IAAA,WAAA;KACG,OAAA,YAAY,eAAe;IACC;;EACP;CACvB,CAAA,CAAA;CAnBL,mBAmBK;CApBP,OACEC;AAqBJ;AAEA,SAAgB,mCAA4D;CAC1E,OAAO,WAAW,6BAA6B;AACjD"}

package/dist/ToggleButtonGroup.jsx

@@ -1,13 +1,26 @@
-import { filterDOMProps, useRenderProps } from "./utils.jsx";
-import { createContext, createMemo, splitProps, useContext } from "solid-js";
-import { createToggleButtonGroup, mergeProps as mergeProps$1 } from "@proyecto-viviana/solidaria";
+/*
+* Copyright 2024 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/ToggleButtonGroup.tsx
+import { attrString as attrString$1, dataAttr, filterDOMProps, useRenderProps } from "./utils.jsx";
+import { createContext, createMemo, useContext } from "solid-js";
+import { createToggleButtonGroup, mergeProps } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { createToggleGroupState } from "@proyecto-viviana/solid-stately";
 //#region src/ToggleButtonGroup.tsx
 /**
 * ToggleButtonGroup component for solidaria-components.
 *
 * Groups toggle buttons with single/multiple selection state.
-* Parity target: react-aria-components/src/ToggleButtonGroup.tsx
+* Based on packages/react-aria-components/src/ToggleButtonGroup.tsx.
 */
 const ToggleButtonGroupContext = createContext(null);
 const ToggleButtonGroupStateContext = createContext(null);
@@ -45,10 +58,10 @@ function ToggleButtonGroup(props) {
 			return !!local.isDisabled;
 		},
 		get "aria-label"() {
-			return local["aria-label"];
+			return attrString$1(local["aria-label"]);
 		},
 		get "aria-labelledby"() {
-			return local["aria-labelledby"];
+			return attrString$1(local["aria-labelledby"]);
 		}
 	}, state);
 	const renderProps = useRenderProps({
@@ -64,16 +77,16 @@ function ToggleButtonGroup(props) {
 		state
 	}));
 	const filteredDomProps = createMemo(() => filterDOMProps(domProps, { global: true }));
-	const mergedGroupProps = createMemo(() => mergeProps$1(filteredDomProps(), groupProps));
-	return <div {...mergedGroupProps()} class={renderProps.class()} style={renderProps.style()} slot={local.slot} data-orientation={local.orientation ?? "horizontal"} data-disabled={local.isDisabled || void 0} ref={(el) => {
+	const mergedGroupProps = createMemo(() => mergeProps(filteredDomProps(), groupProps));
+	return <div {...mergedGroupProps()} class={renderProps.class()} style={renderProps.style()} slot={local.slot} data-orientation={local.orientation ?? "horizontal"} data-disabled={dataAttr(local.isDisabled)} ref={(el) => {
 		if (!local.ref) return;
 		if (typeof local.ref === "function") local.ref(el);
 	}}>
-      <ToggleButtonGroupContext.Provider value={props}>
-        <ToggleButtonGroupStateContext.Provider value={state}>
+      <ToggleButtonGroupContext value={props}>
+        <ToggleButtonGroupStateContext value={state}>
           {renderProps.renderChildren()}
-        </ToggleButtonGroupStateContext.Provider>
-      </ToggleButtonGroupContext.Provider>
+        </ToggleButtonGroupStateContext>
+      </ToggleButtonGroupContext>
     </div>;
 }
 function useToggleButtonGroupStateContext() {