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

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,52 @@
+import type { Context } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { type AriaTokenFieldProps } from "@proyecto-viviana/solidaria";
+import { TokenFieldValue, type TokenSegment } from "@proyecto-viviana/solid-stately";
+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,KAAK,mBAAmB,EACzB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAEL,eAAe,EAEf,KAAK,YAAY,EAClB,MAAM,iCAAiC,CAAC;AAKzC,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,EAmIjB,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,CAwEb;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"}

package/dist/TokenField.js

@@ -0,0 +1,301 @@
+/*
+* Copyright 2026 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/TokenField.tsx
+import { Provider, assignRef as assignRef$1, dataAttr, filterDOMProps, useContextProps, useRenderProps, useSlot, useSlottedContext } from "./utils.js";
+import { TextContext } from "./Text.js";
+import { n as LabelContext } from "./Label.js";
+import { FieldInputContext } from "./TextField.js";
+import { createComponent, getNextElement, getNextMarker, insert, memo, ref, runHydrationEvents, scope, spread, template } from "@solidjs/web";
+import { createContext, createMemo, createSignal, useContext } from "solid-js";
+import { createFocusRing, createHideableComponent, createHover, createToken, createTokenField, mergeProps as mergeProps$1 } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
+import { createTokenFieldState } from "@proyecto-viviana/solid-stately";
+//#region src/TokenField.tsx
+/**
+* Token field components for solidaria-components.
+*
+* A token field allows users to enter text with inline tokens.
+*/
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div><!$><!/><!$><!/>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<span>​<!$><!/>​`);
+var _tmpl$4 = /* @__PURE__ */ template(`<br>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<span>`);
+const TokenFieldContext = createContext(null);
+const TokenInputContext = createContext(null);
+/**
+* A token field allows users to enter text with inline tokens.
+*/
+const TokenField = createHideableComponent(function TokenField(props) {
+	const [merged, setOuterRef] = useContextProps(props, props.ref, TokenFieldContext);
+	const [local, rest] = splitProps(merged, [
+		"children",
+		"class",
+		"style",
+		"slot",
+		"ref",
+		"isDisabled",
+		"isReadOnly",
+		"onChange",
+		"role"
+	]);
+	const [labelRef] = useSlot(!merged["aria-label"] && !merged["aria-labelledby"]);
+	const fieldCtx = useSlottedContext(FieldInputContext, merged.slot);
+	const [inputRef, setInputRef] = createSignal(null);
+	const isDisabled = () => local.isDisabled || false;
+	const isReadOnly = () => local.isReadOnly || false;
+	const state = createTokenFieldState({
+		get value() {
+			return merged.value;
+		},
+		get defaultValue() {
+			return merged.defaultValue;
+		},
+		onChange: (value) => {
+			local.onChange?.(value);
+			const onAutocompleteChange = fieldCtx?.onChange;
+			onAutocompleteChange?.(value.toString());
+		}
+	});
+	const aria = createTokenField({
+		...merged,
+		get role() {
+			return local.role || fieldCtx?.inputProps?.role || "textbox";
+		}
+	}, state, () => inputRef());
+	const renderValues = createMemo(() => ({
+		isDisabled: isDisabled(),
+		isReadOnly: isReadOnly()
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return local.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-TokenField"
+	}, renderValues);
+	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+	var _el$ = getNextElement(_tmpl$);
+	ref(() => {
+		return (el) => {
+			setOuterRef(el);
+			assignRef$1(local.ref, el);
+		};
+	}, _el$);
+	spread(_el$, [domProps, {
+		get slot() {
+			return local.slot || void 0;
+		},
+		get "data-disabled"() {
+			return dataAttr(isDisabled());
+		},
+		get "data-readonly"() {
+			return dataAttr(isReadOnly());
+		},
+		get "class"() {
+			return renderProps.class();
+		},
+		get style() {
+			return renderProps.style();
+		}
+	}], true);
+	insert(_el$, createComponent(Provider, {
+		get values() {
+			return [
+				[LabelContext, {
+					...aria.labelProps,
+					elementType: "span",
+					ref: labelRef
+				}],
+				[TextContext, { slots: { description: aria.descriptionProps } }],
+				[TokenInputContext, {
+					tokenFieldProps: aria.tokenFieldProps,
+					state,
+					isDisabled: isDisabled(),
+					isReadOnly: isReadOnly(),
+					autocompleteProps: fieldCtx,
+					setInputRef
+				}]
+			];
+		},
+		get children() {
+			return renderProps.renderChildren();
+		}
+	}));
+	runHydrationEvents();
+	return _el$;
+});
+/**
+* A token input represents the editable area within a token field.
+*/
+function TokenInput(props) {
+	const context = useContext(TokenInputContext);
+	if (!context) throw new Error("TokenInput must be used within a TokenField");
+	const [local, rest] = splitProps(props, [
+		"children",
+		"class",
+		"style",
+		"slot",
+		"ref"
+	]);
+	const { isHovered, hoverProps } = createHover({});
+	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+	const renderValues = createMemo(() => ({
+		isHovered: isHovered(),
+		isFocused: isFocused(),
+		isFocusVisible: isFocusVisible(),
+		isDisabled: context.isDisabled,
+		isReadOnly: context.isReadOnly
+	}));
+	const renderProps = useRenderProps({
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-TokenInput"
+	}, renderValues);
+	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+	const cleanFocusProps = () => {
+		const { ref: _ref, ...restFocus } = focusProps;
+		return restFocus;
+	};
+	var _el$2 = getNextElement(_tmpl$2);
+	var _el$3 = _el$2.firstChild;
+	var [_el$4, _el$5] = getNextMarker(_el$3.nextSibling);
+	var _el$6 = _el$4.nextSibling;
+	var [_el$7, _el$8] = getNextMarker(_el$6.nextSibling);
+	ref(() => {
+		return (el) => {
+			context.setInputRef(el);
+			assignRef$1(local.ref, el);
+		};
+	}, _el$2);
+	spread(_el$2, [() => {
+		return mergeProps$1(domProps(), cleanFocusProps(), hoverProps, context.tokenFieldProps, context.autocompleteProps ?? {});
+	}, {
+		get slot() {
+			return local.slot || void 0;
+		},
+		get "data-focused"() {
+			return dataAttr(isFocused());
+		},
+		get "data-focus-visible"() {
+			return dataAttr(isFocusVisible());
+		},
+		get "data-disabled"() {
+			return dataAttr(context.isDisabled);
+		},
+		get "data-readonly"() {
+			return dataAttr(context.isReadOnly);
+		},
+		get "class"() {
+			return renderProps.class();
+		},
+		get style() {
+			return {
+				...renderProps.style(),
+				...context.tokenFieldProps.style ?? {}
+			};
+		}
+	}], true);
+	insert(_el$2, scope(() => {
+		return context.state.value().segments.map((segment) => {
+			if (segment.type === "token") {
+				var _el$9 = getNextElement(_tmpl$3);
+				var _el$11 = _el$9.firstChild.nextSibling;
+				var [_el$12, _el$13] = getNextMarker(_el$11.nextSibling);
+				_el$12.nextSibling;
+				insert(_el$9, scope(() => {
+					return local.children(segment);
+				}), _el$12, _el$13);
+				return _el$9;
+			}
+			return segment.text;
+		});
+	}), _el$4, _el$5);
+	insert(_el$2, scope((() => {
+		var _c$ = memo(() => {
+			return !!context.state.value().segments.at(-1)?.text.endsWith("\n");
+		});
+		return () => {
+			return _c$() ? getNextElement(_tmpl$4) : null;
+		};
+	})()), _el$7, _el$8);
+	runHydrationEvents();
+	return _el$2;
+}
+/**
+* A token represents an inline segment within a token field.
+*/
+function Token(props) {
+	const context = useContext(TokenInputContext);
+	if (!context) throw new Error("Token must be used within a TokenField");
+	const [local, rest] = splitProps(props, [
+		"children",
+		"class",
+		"style",
+		"slot",
+		"ref"
+	]);
+	const [tokenRef, setTokenRef] = createSignal(null);
+	const aria = createToken({}, context.state, () => tokenRef());
+	const renderValues = createMemo(() => ({
+		isSelected: aria.isSelected(),
+		isDisabled: context.isDisabled
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return local.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-Token"
+	}, renderValues);
+	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+	var _el$16 = getNextElement(_tmpl$5);
+	ref(() => {
+		return (el) => {
+			setTokenRef(el);
+			assignRef$1(local.ref, el);
+		};
+	}, _el$16);
+	spread(_el$16, [() => {
+		return mergeProps$1(domProps(), aria.tokenProps);
+	}, {
+		get slot() {
+			return local.slot || void 0;
+		},
+		get "data-selected"() {
+			return dataAttr(aria.isSelected());
+		},
+		get "data-disabled"() {
+			return dataAttr(context.isDisabled);
+		},
+		get "class"() {
+			return renderProps.class();
+		},
+		get style() {
+			return {
+				...renderProps.style(),
+				...aria.tokenProps.style ?? {}
+			};
+		}
+	}], true);
+	insert(_el$16, scope(() => {
+		return renderProps.renderChildren();
+	}));
+	runHydrationEvents();
+	return _el$16;
+}
+//#endregion
+export { Token, TokenField, TokenFieldContext, TokenInput };
+
+//# sourceMappingURL=TokenField.js.map

package/dist/TokenField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenField.js","names":["ref={(el) => {\n        setOuterRef(el);\n        assignRef(local.ref, el);\n      }}","<Provider\n        values={\n          [\n            [\n              LabelContext,\n              {\n                ...aria.labelProps,\n                elementType: \"span\",\n                ref: labelRef,\n              },\n            ],\n            [\n              TextContext,\n              {\n                slots: {\n                  description: aria.descriptionProps,\n                },\n              },\n            ],\n            [\n              TokenInputContext,\n              {\n                tokenFieldProps: aria.tokenFieldProps,\n                state,\n                isDisabled: isDisabled(),\n                isReadOnly: isReadOnly(),\n                autocompleteProps: fieldCtx as JSX.HTMLAttributes<HTMLDivElement> | undefined,\n                setInputRef,\n              },\n            ],\n          ] as Array<[Context<unknown>, unknown]>\n        }\n      >\n        {renderProps.renderChildren()}\n      </Provider>","<div\n      {...domProps()}\n      ref={(el) => {\n        setOuterRef(el);\n        assignRef(local.ref, el);\n      }}\n      slot={local.slot || undefined}\n      data-disabled={dataAttr(isDisabled())}\n      data-readonly={dataAttr(isReadOnly())}\n      class={renderProps.class()}\n      style={renderProps.style()}\n    >\n      <Provider\n        values={\n          [\n            [\n              LabelContext,\n              {\n                ...aria.labelProps,\n                elementType: \"span\",\n                ref: labelRef,\n              },\n            ],\n            [\n              TextContext,\n              {\n                slots: {\n                  description: aria.descriptionProps,\n                },\n              },\n            ],\n            [\n              TokenInputContext,\n              {\n                tokenFieldProps: aria.tokenFieldProps,\n                state,\n                isDisabled: isDisabled(),\n                isReadOnly: isReadOnly(),\n                autocompleteProps: fieldCtx as JSX.HTMLAttributes<HTMLDivElement> | undefined,\n                setInputRef,\n              },\n            ],\n          ] as Array<[Context<unknown>, unknown]>\n        }\n      >\n        {renderProps.renderChildren()}\n      </Provider>\n    </div>","ref={(el) => {\n        context.setInputRef(el);\n        assignRef(local.ref, el);\n      }}","{context.state.value().segments.map((segment) => {\n        if (segment.type === \"token\") {\n          return (\n            <span>\n              {\"\\u200b\"}\n              {local.children(segment as TokenSegment)}\n              {\"\\u200b\"}\n            </span>\n          );\n        }\n        return segment.text;\n      })}","{local.children(segment as TokenSegment)}","<span>\n              {\"\\u200b\"}\n              {local.children(segment as TokenSegment)}\n              {\"\\u200b\"}\n            </span>","<div\n      {...mergeProps(\n        domProps(),\n        cleanFocusProps(),\n        hoverProps as Record<string, unknown>,\n        context.tokenFieldProps as Record<string, unknown>,\n        (context.autocompleteProps as Record<string, unknown> | undefined) ?? {},\n      )}\n      ref={(el) => {\n        context.setInputRef(el);\n        assignRef(local.ref, el);\n      }}\n      slot={local.slot || undefined}\n      data-focused={dataAttr(isFocused())}\n      data-focus-visible={dataAttr(isFocusVisible())}\n      data-disabled={dataAttr(context.isDisabled)}\n      data-readonly={dataAttr(context.isReadOnly)}\n      class={renderProps.class()}\n      style={{\n        ...(renderProps.style() as JSX.CSSProperties | undefined),\n        ...((context.tokenFieldProps.style as JSX.CSSProperties | undefined) ?? {}),\n      }}\n    >\n      {context.state.value().segments.map((segment) => {\n        if (segment.type === \"token\") {\n          return (\n            <span>\n              {\"\\u200b\"}\n              {local.children(segment as TokenSegment)}\n              {\"\\u200b\"}\n            </span>\n          );\n        }\n        return segment.text;\n      })}\n      {context.state.value().segments.at(-1)?.text.endsWith(\"\\n\") ? <br /> : null}\n    </div>","{context.state.value().segments.at(-1)?.text.endsWith(\"\\n\") ? <br /> : null}","<br />","ref={(el) => {\n        setTokenRef(el);\n        assignRef(local.ref, el);\n      }}","{renderProps.renderChildren()}","<span\n      {...mergeProps(domProps(), aria.tokenProps as Record<string, unknown>)}\n      ref={(el) => {\n        setTokenRef(el);\n        assignRef(local.ref, el);\n      }}\n      slot={local.slot || undefined}\n      data-selected={dataAttr(aria.isSelected())}\n      data-disabled={dataAttr(context.isDisabled)}\n      class={renderProps.class()}\n      style={{\n        ...(renderProps.style() as JSX.CSSProperties | undefined),\n        ...((aria.tokenProps.style as JSX.CSSProperties | undefined) ?? {}),\n      }}\n    >\n      {renderProps.renderChildren()}\n    </span>"],"sources":["../src/TokenField.tsx"],"sourcesContent":["/*\n * Copyright 2026 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/TokenField.tsx\n\n/**\n * Token field components for solidaria-components.\n *\n * A token field allows users to enter text with inline tokens.\n */\n\nimport { createContext, createMemo, createSignal, useContext } from \"solid-js\";\nimport type { Context } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n  createHideableComponent,\n  createHover,\n  createFocusRing,\n  createToken,\n  createTokenField,\n  mergeProps,\n  type AriaTokenFieldProps,\n} from \"@proyecto-viviana/solidaria\";\nimport {\n  createTokenFieldState,\n  TokenFieldValue,\n  type TokenFieldState,\n  type TokenSegment,\n} from \"@proyecto-viviana/solid-stately\";\nimport { LabelContext } from \"./Label\";\nimport { TextContext } from \"./Text\";\nimport { FieldInputContext, type TextFieldContextValue } from \"./TextField\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n  Provider,\n  type ClassNameOrFunction,\n  type ContextValue,\n  type RenderChildren,\n  type SlotProps,\n  type StyleOrFunction,\n  assignRef,\n  filterDOMProps,\n  type RefLike,\n  type SlottedContextValue,\n  useContextProps,\n  useRenderProps,\n  useSlot,\n  useSlottedContext,\n  dataAttr,\n} from \"./utils\";\n\nexport interface TokenFieldRenderProps {\n  isDisabled: boolean;\n  isReadOnly: boolean;\n}\n\nexport interface TokenFieldProps<T extends TokenFieldValue = TokenFieldValue>\n  extends Omit<AriaTokenFieldProps<T>, \"class\" | \"style\" | \"children\">, SlotProps {\n  children?: RenderChildren<TokenFieldRenderProps>;\n  class?: ClassNameOrFunction<TokenFieldRenderProps>;\n  style?: StyleOrFunction<TokenFieldRenderProps>;\n  ref?: RefLike<HTMLDivElement>;\n}\n\nexport interface TokenInputRenderProps {\n  isHovered: boolean;\n  isFocused: boolean;\n  isFocusVisible: boolean;\n  isDisabled: boolean;\n  isReadOnly: boolean;\n}\n\nexport interface TokenInputProps<T extends TokenFieldValue = TokenFieldValue> extends SlotProps {\n  children: (segment: TokenSegment<T extends TokenFieldValue<infer V> ? V : never>) => JSX.Element;\n  class?: ClassNameOrFunction<TokenInputRenderProps>;\n  style?: StyleOrFunction<TokenInputRenderProps>;\n  ref?: RefLike<HTMLDivElement>;\n}\n\ninterface TokenInputContextValue<T extends TokenFieldValue = TokenFieldValue> {\n  tokenFieldProps: JSX.HTMLAttributes<HTMLDivElement>;\n  state: TokenFieldState<T>;\n  isDisabled: boolean;\n  isReadOnly: boolean;\n  autocompleteProps?: JSX.HTMLAttributes<HTMLDivElement>;\n  setInputRef: (el: HTMLDivElement | null) => void;\n}\n\nexport const TokenFieldContext = createContext<ContextValue<TokenFieldProps, HTMLDivElement>>(null);\nconst TokenInputContext = createContext<TokenInputContextValue | null>(null);\n\n/**\n * A token field allows users to enter text with inline tokens.\n */\nexport const TokenField = createHideableComponent(function TokenField<\n  T extends TokenFieldValue = TokenFieldValue,\n>(props: TokenFieldProps<T>): JSX.Element {\n  const [merged, setOuterRef] = useContextProps(\n    props,\n    props.ref,\n    TokenFieldContext as Context<ContextValue<TokenFieldProps<T>, HTMLDivElement>>,\n  );\n  const [local, rest] = splitProps(merged, [\n    \"children\",\n    \"class\",\n    \"style\",\n    \"slot\",\n    \"ref\",\n    \"isDisabled\",\n    \"isReadOnly\",\n    \"onChange\",\n    \"role\",\n  ]);\n  const [labelRef] = useSlot(!merged[\"aria-label\"] && !merged[\"aria-labelledby\"]);\n\n  const fieldCtx = useSlottedContext(\n    FieldInputContext as unknown as Context<SlottedContextValue<TextFieldContextValue>>,\n    merged.slot,\n  );\n  const [inputRef, setInputRef] = createSignal<HTMLDivElement | null>(null);\n\n  const isDisabled = () => local.isDisabled || false;\n  const isReadOnly = () => local.isReadOnly || false;\n\n  const state = createTokenFieldState<T>({\n    get value() {\n      return merged.value;\n    },\n    get defaultValue() {\n      return merged.defaultValue;\n    },\n    onChange: (value) => {\n      local.onChange?.(value);\n      const onAutocompleteChange = (fieldCtx as { onChange?: (value: string) => void } | null)\n        ?.onChange;\n      onAutocompleteChange?.(value.toString());\n    },\n  });\n\n  const aria = createTokenField(\n    {\n      ...merged,\n      get role() {\n        return (\n          local.role ||\n          ((fieldCtx as { inputProps?: { role?: string } } | null)?.inputProps?.role as\n            | AriaTokenFieldProps[\"role\"]\n            | undefined) ||\n          \"textbox\"\n        );\n      },\n    },\n    state,\n    () => inputRef(),\n  );\n\n  const renderValues = createMemo<TokenFieldRenderProps>(() => ({\n    isDisabled: isDisabled(),\n    isReadOnly: isReadOnly(),\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-TokenField\",\n    },\n    renderValues,\n  );\n  const domProps = createMemo(() =>\n    filterDOMProps(rest as Record<string, unknown>, { global: true }),\n  );\n\n  return (\n    <div\n      {...domProps()}\n      ref={(el) => {\n        setOuterRef(el);\n        assignRef(local.ref, el);\n      }}\n      slot={local.slot || undefined}\n      data-disabled={dataAttr(isDisabled())}\n      data-readonly={dataAttr(isReadOnly())}\n      class={renderProps.class()}\n      style={renderProps.style()}\n    >\n      <Provider\n        values={\n          [\n            [\n              LabelContext,\n              {\n                ...aria.labelProps,\n                elementType: \"span\",\n                ref: labelRef,\n              },\n            ],\n            [\n              TextContext,\n              {\n                slots: {\n                  description: aria.descriptionProps,\n                },\n              },\n            ],\n            [\n              TokenInputContext,\n              {\n                tokenFieldProps: aria.tokenFieldProps,\n                state,\n                isDisabled: isDisabled(),\n                isReadOnly: isReadOnly(),\n                autocompleteProps: fieldCtx as JSX.HTMLAttributes<HTMLDivElement> | undefined,\n                setInputRef,\n              },\n            ],\n          ] as Array<[Context<unknown>, unknown]>\n        }\n      >\n        {renderProps.renderChildren()}\n      </Provider>\n    </div>\n  );\n}) as (props: TokenFieldProps) => JSX.Element;\n\n/**\n * A token input represents the editable area within a token field.\n */\nexport function TokenInput<T extends TokenFieldValue = TokenFieldValue>(\n  props: TokenInputProps<T>,\n): JSX.Element {\n  const context = useContext(TokenInputContext);\n  if (!context) {\n    throw new Error(\"TokenInput must be used within a TokenField\");\n  }\n\n  const [local, rest] = splitProps(props, [\"children\", \"class\", \"style\", \"slot\", \"ref\"]);\n  const { isHovered, hoverProps } = createHover({});\n  const { isFocused, isFocusVisible, focusProps } = createFocusRing();\n\n  const renderValues = createMemo<TokenInputRenderProps>(() => ({\n    isHovered: isHovered(),\n    isFocused: isFocused(),\n    isFocusVisible: isFocusVisible(),\n    isDisabled: context.isDisabled,\n    isReadOnly: context.isReadOnly,\n  }));\n  const renderProps = useRenderProps(\n    {\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-TokenInput\",\n    },\n    renderValues,\n  );\n  const domProps = createMemo(() =>\n    filterDOMProps(rest as Record<string, unknown>, { global: true }),\n  );\n  const cleanFocusProps = () => {\n    const { ref: _ref, ...restFocus } = focusProps as Record<string, unknown>;\n    return restFocus;\n  };\n\n  return (\n    <div\n      {...mergeProps(\n        domProps(),\n        cleanFocusProps(),\n        hoverProps as Record<string, unknown>,\n        context.tokenFieldProps as Record<string, unknown>,\n        (context.autocompleteProps as Record<string, unknown> | undefined) ?? {},\n      )}\n      ref={(el) => {\n        context.setInputRef(el);\n        assignRef(local.ref, el);\n      }}\n      slot={local.slot || undefined}\n      data-focused={dataAttr(isFocused())}\n      data-focus-visible={dataAttr(isFocusVisible())}\n      data-disabled={dataAttr(context.isDisabled)}\n      data-readonly={dataAttr(context.isReadOnly)}\n      class={renderProps.class()}\n      style={{\n        ...(renderProps.style() as JSX.CSSProperties | undefined),\n        ...((context.tokenFieldProps.style as JSX.CSSProperties | undefined) ?? {}),\n      }}\n    >\n      {context.state.value().segments.map((segment) => {\n        if (segment.type === \"token\") {\n          return (\n            <span>\n              {\"\\u200b\"}\n              {local.children(segment as TokenSegment)}\n              {\"\\u200b\"}\n            </span>\n          );\n        }\n        return segment.text;\n      })}\n      {context.state.value().segments.at(-1)?.text.endsWith(\"\\n\") ? <br /> : null}\n    </div>\n  );\n}\n\nexport interface TokenRenderProps {\n  isSelected: boolean;\n  isDisabled: boolean;\n}\n\nexport interface TokenProps extends SlotProps {\n  children?: RenderChildren<TokenRenderProps>;\n  class?: ClassNameOrFunction<TokenRenderProps>;\n  style?: StyleOrFunction<TokenRenderProps>;\n  ref?: RefLike<HTMLSpanElement>;\n}\n\n/**\n * A token represents an inline segment within a token field.\n */\nexport function Token(props: TokenProps): JSX.Element {\n  const context = useContext(TokenInputContext);\n  if (!context) {\n    throw new Error(\"Token must be used within a TokenField\");\n  }\n\n  const [local, rest] = splitProps(props, [\"children\", \"class\", \"style\", \"slot\", \"ref\"]);\n  const [tokenRef, setTokenRef] = createSignal<HTMLSpanElement | null>(null);\n  const aria = createToken({}, context.state, () => tokenRef());\n\n  const renderValues = createMemo<TokenRenderProps>(() => ({\n    isSelected: aria.isSelected(),\n    isDisabled: context.isDisabled,\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-Token\",\n    },\n    renderValues,\n  );\n  const domProps = createMemo(() =>\n    filterDOMProps(rest as Record<string, unknown>, { global: true }),\n  );\n\n  return (\n    <span\n      {...mergeProps(domProps(), aria.tokenProps as Record<string, unknown>)}\n      ref={(el) => {\n        setTokenRef(el);\n        assignRef(local.ref, el);\n      }}\n      slot={local.slot || undefined}\n      data-selected={dataAttr(aria.isSelected())}\n      data-disabled={dataAttr(context.isDisabled)}\n      class={renderProps.class()}\n      style={{\n        ...(renderProps.style() as JSX.CSSProperties | undefined),\n        ...((aria.tokenProps.style as JSX.CSSProperties | undefined) ?? {}),\n      }}\n    >\n      {renderProps.renderChildren()}\n    </span>\n  );\n}\n"],"mappings":"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"}

package/dist/TokenField.jsx

@@ -0,0 +1,197 @@
+/*
+* Copyright 2026 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/TokenField.tsx
+import { Provider, assignRef as assignRef$1, dataAttr, filterDOMProps, useContextProps, useRenderProps, useSlot, useSlottedContext } from "./utils.jsx";
+import { TextContext } from "./Text.jsx";
+import { n as LabelContext } from "./Label.jsx";
+import { FieldInputContext } from "./TextField.jsx";
+import { createContext, createMemo, createSignal, useContext } from "solid-js";
+import { createFocusRing, createHideableComponent, createHover, createToken, createTokenField, mergeProps } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
+import { createTokenFieldState } from "@proyecto-viviana/solid-stately";
+//#region src/TokenField.tsx
+/**
+* Token field components for solidaria-components.
+*
+* A token field allows users to enter text with inline tokens.
+*/
+const TokenFieldContext = createContext(null);
+const TokenInputContext = createContext(null);
+/**
+* A token field allows users to enter text with inline tokens.
+*/
+const TokenField = createHideableComponent(function TokenField(props) {
+	const [merged, setOuterRef] = useContextProps(props, props.ref, TokenFieldContext);
+	const [local, rest] = splitProps(merged, [
+		"children",
+		"class",
+		"style",
+		"slot",
+		"ref",
+		"isDisabled",
+		"isReadOnly",
+		"onChange",
+		"role"
+	]);
+	const [labelRef] = useSlot(!merged["aria-label"] && !merged["aria-labelledby"]);
+	const fieldCtx = useSlottedContext(FieldInputContext, merged.slot);
+	const [inputRef, setInputRef] = createSignal(null);
+	const isDisabled = () => local.isDisabled || false;
+	const isReadOnly = () => local.isReadOnly || false;
+	const state = createTokenFieldState({
+		get value() {
+			return merged.value;
+		},
+		get defaultValue() {
+			return merged.defaultValue;
+		},
+		onChange: (value) => {
+			local.onChange?.(value);
+			const onAutocompleteChange = fieldCtx?.onChange;
+			onAutocompleteChange?.(value.toString());
+		}
+	});
+	const aria = createTokenField({
+		...merged,
+		get role() {
+			return local.role || fieldCtx?.inputProps?.role || "textbox";
+		}
+	}, state, () => inputRef());
+	const renderValues = createMemo(() => ({
+		isDisabled: isDisabled(),
+		isReadOnly: isReadOnly()
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return local.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-TokenField"
+	}, renderValues);
+	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+	return <div {...domProps()} ref={(el) => {
+		setOuterRef(el);
+		assignRef$1(local.ref, el);
+	}} slot={local.slot || void 0} data-disabled={dataAttr(isDisabled())} data-readonly={dataAttr(isReadOnly())} class={renderProps.class()} style={renderProps.style()}>
+      <Provider values={[
+		[LabelContext, {
+			...aria.labelProps,
+			elementType: "span",
+			ref: labelRef
+		}],
+		[TextContext, { slots: { description: aria.descriptionProps } }],
+		[TokenInputContext, {
+			tokenFieldProps: aria.tokenFieldProps,
+			state,
+			isDisabled: isDisabled(),
+			isReadOnly: isReadOnly(),
+			autocompleteProps: fieldCtx,
+			setInputRef
+		}]
+	]}>
+        {renderProps.renderChildren()}
+      </Provider>
+    </div>;
+});
+/**
+* A token input represents the editable area within a token field.
+*/
+function TokenInput(props) {
+	const context = useContext(TokenInputContext);
+	if (!context) throw new Error("TokenInput must be used within a TokenField");
+	const [local, rest] = splitProps(props, [
+		"children",
+		"class",
+		"style",
+		"slot",
+		"ref"
+	]);
+	const { isHovered, hoverProps } = createHover({});
+	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+	const renderValues = createMemo(() => ({
+		isHovered: isHovered(),
+		isFocused: isFocused(),
+		isFocusVisible: isFocusVisible(),
+		isDisabled: context.isDisabled,
+		isReadOnly: context.isReadOnly
+	}));
+	const renderProps = useRenderProps({
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-TokenInput"
+	}, renderValues);
+	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+	const cleanFocusProps = () => {
+		const { ref: _ref, ...restFocus } = focusProps;
+		return restFocus;
+	};
+	return <div {...mergeProps(domProps(), cleanFocusProps(), hoverProps, context.tokenFieldProps, context.autocompleteProps ?? {})} ref={(el) => {
+		context.setInputRef(el);
+		assignRef$1(local.ref, el);
+	}} slot={local.slot || void 0} data-focused={dataAttr(isFocused())} data-focus-visible={dataAttr(isFocusVisible())} data-disabled={dataAttr(context.isDisabled)} data-readonly={dataAttr(context.isReadOnly)} class={renderProps.class()} style={{
+		...renderProps.style(),
+		...context.tokenFieldProps.style ?? {}
+	}}>
+      {context.state.value().segments.map((segment) => {
+		if (segment.type === "token") return <span>
+              {"​"}
+              {local.children(segment)}
+              {"​"}
+            </span>;
+		return segment.text;
+	})}
+      {context.state.value().segments.at(-1)?.text.endsWith("\n") ? <br /> : null}
+    </div>;
+}
+/**
+* A token represents an inline segment within a token field.
+*/
+function Token(props) {
+	const context = useContext(TokenInputContext);
+	if (!context) throw new Error("Token must be used within a TokenField");
+	const [local, rest] = splitProps(props, [
+		"children",
+		"class",
+		"style",
+		"slot",
+		"ref"
+	]);
+	const [tokenRef, setTokenRef] = createSignal(null);
+	const aria = createToken({}, context.state, () => tokenRef());
+	const renderValues = createMemo(() => ({
+		isSelected: aria.isSelected(),
+		isDisabled: context.isDisabled
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return local.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-Token"
+	}, renderValues);
+	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+	return <span {...mergeProps(domProps(), aria.tokenProps)} ref={(el) => {
+		setTokenRef(el);
+		assignRef$1(local.ref, el);
+	}} slot={local.slot || void 0} data-selected={dataAttr(aria.isSelected())} data-disabled={dataAttr(context.isDisabled)} class={renderProps.class()} style={{
+		...renderProps.style(),
+		...aria.tokenProps.style ?? {}
+	}}>
+      {renderProps.renderChildren()}
+    </span>;
+}
+//#endregion
+export { Token, TokenField, TokenFieldContext, TokenInput };
+
+//# sourceMappingURL=TokenField.jsx.map