@proyecto-viviana/solidaria-components 0.5.1 → 0.7.0-rc.1

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() {

package/dist/ToggleButtonGroup.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButtonGroup.jsx","names":["mergeProps"],"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,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,MAAM;EACf;EACA,IAAI,oBAAoB;GACtB,OAAO,MAAM;EACf;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,iBACvBA,aAAW,iBAAiB,GAAG,UAAqC,CACtE;CAEA,OACE,CAAC,QACM,iBAAiB,GACtB,OAAO,YAAY,MAAM,GACzB,OAAO,YAAY,MAAM,GACzB,MAAM,MAAM,MACZ,kBAAkB,MAAM,eAAe,cACvC,eAAe,MAAM,cAAc,KAAA,GACnC,MAAM,OAAO;EACX,IAAI,CAAC,MAAM,KAAK;EAChB,IAAI,OAAO,MAAM,QAAQ,YACvB,MAAM,IAAI,EAAE;CAEhB,GACD;MACC,CAAC,yBAAyB,SAAS,OAAO,OAAO;QAC/C,CAAC,8BAA8B,SAAS,OAAO,OAAO;WACnD,YAAY,eAAe,EAAE;QAChC,EAAE,8BAA8B,SAAS;MAC3C,EAAE,yBAAyB,SAAS;IACtC,EAAE;AAEN;AAEA,SAAgB,mCAA4D;CAC1E,OAAO,WAAW,6BAA6B;AACjD"}
+{"version":3,"file":"ToggleButtonGroup.jsx","names":["attrString"],"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,OAAOA,aAAW,MAAM,aAAa;EACvC;EACA,IAAI,oBAAoB;GACtB,OAAOA,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,WAAW,iBAAiB,GAAG,UAAqC,CACtE;CAEA,OACE,CAAC,QACM,iBAAiB,GACtB,OAAO,YAAY,MAAM,GACzB,OAAO,YAAY,MAAM,GACzB,MAAM,MAAM,MACZ,kBAAkB,MAAM,eAAe,cACvC,eAAe,SAAS,MAAM,UAAU,GACxC,MAAM,OAAO;EACX,IAAI,CAAC,MAAM,KAAK;EAChB,IAAI,OAAO,MAAM,QAAQ,YACvB,MAAM,IAAI,EAAE;CAEhB,GACD;MACC,CAAC,yBAAyB,OAAO,OAAO;QACtC,CAAC,8BAA8B,OAAO,OAAO;WAC1C,YAAY,eAAe,EAAE;QAChC,EAAE,8BAA8B;MAClC,EAAE,yBAAyB;IAC7B,EAAE;AAEN;AAEA,SAAgB,mCAA4D;CAC1E,OAAO,WAAW,6BAA6B;AACjD"}

package/dist/TokenField.d.ts

@@ -0,0 +1,54 @@
+import type { Context } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { setTokenFieldSelection, tokenFieldPositionToDOMRange, type AriaTokenFieldProps } from "@proyecto-viviana/solidaria";
+import { TokenFieldValue, type Position, type SelectedRange, type TextSegment, type TokenFieldSegment, type TokenFieldValueOptions, type TokenSegment } from "@proyecto-viviana/solid-stately";
+export { TokenFieldValue, type Position, type SelectedRange, type TextSegment, type TokenFieldSegment, type TokenFieldValueOptions, type TokenSegment, };
+export { setTokenFieldSelection, tokenFieldPositionToDOMRange };
+import { type ClassNameOrFunction, type ContextValue, type RenderChildren, type SlotProps, type StyleOrFunction, type RefLike } from "./utils";
+export interface TokenFieldRenderProps {
+    isDisabled: boolean;
+    isReadOnly: boolean;
+}
+export interface TokenFieldProps<T extends TokenFieldValue = TokenFieldValue> extends Omit<AriaTokenFieldProps<T>, "class" | "style" | "children">, SlotProps {
+    children?: RenderChildren<TokenFieldRenderProps>;
+    class?: ClassNameOrFunction<TokenFieldRenderProps>;
+    style?: StyleOrFunction<TokenFieldRenderProps>;
+    ref?: RefLike<HTMLDivElement>;
+}
+export interface TokenInputRenderProps {
+    isHovered: boolean;
+    isFocused: boolean;
+    isFocusVisible: boolean;
+    isDisabled: boolean;
+    isReadOnly: boolean;
+}
+export interface TokenInputProps<T extends TokenFieldValue = TokenFieldValue> extends SlotProps {
+    children: (segment: TokenSegment<T extends TokenFieldValue<infer V> ? V : never>) => JSX.Element;
+    class?: ClassNameOrFunction<TokenInputRenderProps>;
+    style?: StyleOrFunction<TokenInputRenderProps>;
+    ref?: RefLike<HTMLDivElement>;
+}
+export declare const TokenFieldContext: Context<ContextValue<TokenFieldProps<TokenFieldValue<any>>, HTMLDivElement>>;
+/**
+ * A token field allows users to enter text with inline tokens.
+ */
+export declare const TokenField: (props: TokenFieldProps) => JSX.Element;
+/**
+ * A token input represents the editable area within a token field.
+ */
+export declare function TokenInput<T extends TokenFieldValue = TokenFieldValue>(props: TokenInputProps<T>): JSX.Element;
+export interface TokenRenderProps {
+    isSelected: boolean;
+    isDisabled: boolean;
+}
+export interface TokenProps extends SlotProps {
+    children?: RenderChildren<TokenRenderProps>;
+    class?: ClassNameOrFunction<TokenRenderProps>;
+    style?: StyleOrFunction<TokenRenderProps>;
+    ref?: RefLike<HTMLSpanElement>;
+}
+/**
+ * A token represents an inline segment within a token field.
+ */
+export declare function Token(props: TokenProps): JSX.Element;
+//# sourceMappingURL=TokenField.d.ts.map

package/dist/TokenField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenField.d.ts","sourceRoot":"","sources":["../src/TokenField.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAOL,sBAAsB,EACtB,4BAA4B,EAC5B,KAAK,mBAAmB,EACzB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAEL,eAAe,EACf,KAAK,QAAQ,EACb,KAAK,aAAa,EAClB,KAAK,WAAW,EAChB,KAAK,iBAAiB,EAEtB,KAAK,sBAAsB,EAC3B,KAAK,YAAY,EAClB,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EACL,eAAe,EACf,KAAK,QAAQ,EACb,KAAK,aAAa,EAClB,KAAK,WAAW,EAChB,KAAK,iBAAiB,EACtB,KAAK,sBAAsB,EAC3B,KAAK,YAAY,GAClB,CAAC;AACF,OAAO,EAAE,sBAAsB,EAAE,4BAA4B,EAAE,CAAC;AAKhE,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,YAAY,EACjB,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,eAAe,EAGpB,KAAK,OAAO,EAOb,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,eAAe,GAAG,eAAe,CAC1E,SAAQ,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC,EAAE,SAAS;IAC/E,QAAQ,CAAC,EAAE,cAAc,CAAC,qBAAqB,CAAC,CAAC;IACjD,KAAK,CAAC,EAAE,mBAAmB,CAAC,qBAAqB,CAAC,CAAC;IACnD,KAAK,CAAC,EAAE,eAAe,CAAC,qBAAqB,CAAC,CAAC;IAC/C,GAAG,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAC/B;AAED,MAAM,WAAW,qBAAqB;IACpC,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,eAAe,CAAC,CAAC,SAAS,eAAe,GAAG,eAAe,CAAE,SAAQ,SAAS;IAC7F,QAAQ,EAAE,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,SAAS,eAAe,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,KAAK,GAAG,CAAC,OAAO,CAAC;IACjG,KAAK,CAAC,EAAE,mBAAmB,CAAC,qBAAqB,CAAC,CAAC;IACnD,KAAK,CAAC,EAAE,eAAe,CAAC,qBAAqB,CAAC,CAAC;IAC/C,GAAG,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAC/B;AAWD,eAAO,MAAM,iBAAiB,8EAAqE,CAAC;AAGpG;;GAEG;AACH,eAAO,MAAM,UAAU,EAqKjB,CAAC,KAAK,EAAE,eAAe,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9C;;GAEG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,eAAe,GAAG,eAAe,EACpE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GACxB,GAAG,CAAC,OAAO,CAuGb;AAED,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,QAAQ,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAC5C,KAAK,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IAC1C,GAAG,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;CAChC;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CAgDpD"}