@proyecto-viviana/ui 0.6.2 → 0.8.0-rc.0

package/dist/selectboxgroup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/selectboxgroup/index.tsx"],"sourcesContent":["import {\n  children as resolveChildren,\n  createContext,\n  createEffect,\n  createMemo,\n  type JSX,\n  mergeProps,\n  onCleanup,\n  Show,\n  splitProps,\n  createSignal,\n  useContext,\n} from \"solid-js\";\nimport {\n  ListBox as HeadlessListBox,\n  ListBoxOption as HeadlessListBoxOption,\n  type ListBoxOptionProps as HeadlessListBoxOptionProps,\n  type ListBoxOptionRenderProps,\n  type ListBoxProps as HeadlessListBoxProps,\n  type ListBoxRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport type { StyleString } from \"../style\";\nimport { baseColor, focusRing, lightDark, style } from \"../style\" with { type: \"macro\" };\nimport { mergeStyles } from \"../style/runtime\";\nimport { useProviderProps } from \"../provider\";\nimport Checkmark from \"../icon/ui-icons/Checkmark\";\nimport { pressScale } from \"../pressScale\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n  type SpectrumContextValue,\n} from \"../button/spectrum-context\";\n\nexport type SelectBoxOrientation = \"horizontal\" | \"vertical\";\n\nexport interface SelectBoxGroupProps<T> extends Omit<\n  HeadlessListBoxProps<T>,\n  \"class\" | \"style\" | \"children\" | \"layout\" | \"orientation\" | \"slot\" | \"ref\"\n> {\n  /** The SelectBox elements contained within the SelectBoxGroup. */\n  children: JSX.Element | ((item: T) => JSX.Element);\n  /** The layout direction of the content in each SelectBox. @default 'vertical' */\n  orientation?: SelectBoxOrientation;\n  /** Whether the SelectBoxGroup is disabled. */\n  isDisabled?: boolean;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n  /** Slot name when used in a Spectrum context. */\n  slot?: string | null;\n  /** Ref for the underlying listbox element. */\n  ref?: RefLike<HTMLDivElement>;\n}\n\nexport interface SelectBoxProps extends Omit<\n  HeadlessListBoxOptionProps<unknown>,\n  \"class\" | \"style\" | \"children\"\n> {\n  /** The unique id of the SelectBox. */\n  id: Key;\n  /** The contents of the SelectBox. */\n  children?: JSX.Element;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n}\n\ninterface SelectBoxContextValue {\n  orientation?: SelectBoxOrientation;\n  selectionMode?: \"single\" | \"multiple\";\n  isDisabled?: boolean;\n}\n\ninterface StaticSelectBoxItem {\n  id: Key;\n  textValue?: string;\n  isDisabled?: boolean;\n  props: SelectBoxProps;\n}\n\ninterface StaticSelectBoxCollectionContextValue {\n  registerItem(item: StaticSelectBoxItem): void;\n  unregisterItem(id: Key): void;\n}\n\nconst SelectBoxContext = createContext<SelectBoxContextValue>({ orientation: \"vertical\" });\nconst StaticSelectBoxCollectionContext =\n  createContext<StaticSelectBoxCollectionContextValue | null>(null);\nexport const SelectBoxGroupContext =\n  createContext<SpectrumContextValue<SelectBoxGroupProps<unknown>>>(null);\nconst selectBoxGroupStyles = style<{ orientation?: SelectBoxOrientation }>({\n  display: \"grid\",\n  gridAutoRows: \"1fr\",\n  margin: 0,\n  padding: 0,\n  listStyleType: \"none\",\n  gap: 24,\n  justifyContent: \"center\",\n  gridTemplateColumns: {\n    orientation: {\n      vertical: \"[repeat(auto-fit,minmax(144px,min(170px,100%)))]\",\n      horizontal: \"[repeat(auto-fit,minmax(188px,min(368px,100%)))]\",\n    },\n  },\n});\n\nconst selectBoxStyles = style<ListBoxOptionRenderProps & { orientation?: SelectBoxOrientation }>({\n  ...focusRing(),\n  display: \"grid\",\n  gridAutoRows: \"1fr\",\n  position: \"relative\",\n  font: \"ui\",\n  boxSizing: \"border-box\",\n  overflow: \"hidden\",\n  width: {\n    default: 170,\n    orientation: {\n      horizontal: 368,\n    },\n  },\n  height: {\n    default: 170,\n    orientation: {\n      horizontal: \"auto\",\n    },\n  },\n  minWidth: {\n    default: 144,\n    orientation: {\n      horizontal: 188,\n    },\n  },\n  \"--select-box-max-width\": {\n    type: \"width\",\n    value: {\n      default: 170,\n      orientation: {\n        horizontal: 480,\n      },\n    },\n  },\n  maxWidth: \"[min(100%,var(--select-box-max-width))]\",\n  minHeight: {\n    default: 144,\n    orientation: {\n      horizontal: 80,\n    },\n  },\n  maxHeight: {\n    default: 170,\n    orientation: {\n      horizontal: 240,\n    },\n  },\n  padding: {\n    default: 24,\n    orientation: {\n      horizontal: 16,\n    },\n  },\n  paddingStart: {\n    orientation: {\n      horizontal: 32,\n    },\n  },\n  paddingEnd: {\n    orientation: {\n      horizontal: 24,\n    },\n  },\n  gridTemplateAreas: {\n    orientation: {\n      vertical: [\"illustration\", \".\", \"label\"],\n    },\n  },\n  gridTemplateRows: {\n    orientation: {\n      vertical: [\"min-content\", 8, \"min-content\"],\n    },\n  },\n  gridTemplateColumns: {\n    orientation: {\n      horizontal: \"[min-content 10px 1fr]\",\n    },\n  },\n  alignContent: {\n    orientation: {\n      vertical: \"center\",\n    },\n  },\n  borderRadius: \"panel\",\n  borderStyle: \"solid\",\n  borderWidth: 1,\n  /* Viviana UI v2 (Glasselated): hover and selection moved from the shadow to the edge.\n   * They used to be spelled in the boxShadow map below as emphasized/elevated/elevated —\n   * three distinct cast shadows. Now that the theme repoints both of those tokens to the\n   * register's inset rim (style/spectrum-theme.ts), all three states resolve to the SAME\n   * rim and the map no longer signals anything. The edge is where the register puts this\n   * signal anyway: the handoff's own surface hover is a border treatment, not a lift.\n   *\n   * The resting stop also stops being `transparent` — a glass surface in this register\n   * carries a visible 1px `--border-subtle` edge at rest, so hover/selection now read as a\n   * change of edge COLOR rather than an edge appearing from nothing.\n   *\n   * `accent-900`/`accent-700` rather than a plain `accent`: the theme's borderColor map is\n   * `...baseColors` plus negative/disabled and the three edge tokens, so it carries ramp\n   * stops but no semantic `accent` key — that exists only on color/backgroundColor/fill.\n   * Same constraint the tag-group edge hit. */\n  borderColor: {\n    default: \"border-subtle\",\n    isHovered: \"border-default\",\n    isSelected: lightDark(\"accent-900\", \"accent-700\"),\n    isDisabled: \"transparent\",\n  },\n  backgroundColor: {\n    default: \"layer-2\",\n    isDisabled: \"disabled\",\n  },\n  color: {\n    isDisabled: \"disabled\",\n  },\n  boxShadow: {\n    default: \"edge-glass\",\n    isDisabled: \"none\",\n  },\n  cursor: {\n    default: \"default\",\n    isDisabled: \"not-allowed\",\n  },\n  transition: \"default\",\n});\n\nconst selectBoxSelectionIndicator = style({\n  position: \"absolute\",\n  top: 8,\n  insetStart: 8,\n  pointerEvents: \"none\",\n});\n\nconst selectBoxCheckboxBox = style<ListBoxOptionRenderProps>({\n  ...focusRing(),\n  size: 16,\n  flexShrink: 0,\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  borderWidth: 1,\n  boxSizing: \"border-box\",\n  borderStyle: \"solid\",\n  borderRadius: \"sm\",\n  transition: \"default\",\n  forcedColorAdjust: \"none\",\n  backgroundColor: {\n    default: \"[light-dark(rgb(255, 255, 255), rgb(17, 17, 17))]\",\n    isSelected: \"neutral\",\n    isDisabled: \"disabled\",\n  },\n  borderColor: {\n    default: \"[light-dark(rgb(41, 41, 41), rgb(219, 219, 219))]\",\n    isDisabled: \"disabled\",\n    isSelected: \"transparent\",\n  },\n});\n\nconst selectBoxCheckboxIcon = style({\n  pointerEvents: \"none\",\n});\n\nconst selectBoxIllustration = style<\n  ListBoxOptionRenderProps & { orientation?: SelectBoxOrientation }\n>({\n  gridArea: \"illustration\",\n  alignSelf: \"center\",\n  justifySelf: \"center\",\n  minSize: 48,\n  \"--iconPrimary\": {\n    type: \"color\",\n    value: {\n      default: baseColor(\"neutral\"),\n      isDisabled: \"disabled\",\n    },\n  },\n});\n\nconst selectBoxDescription = style<\n  ListBoxOptionRenderProps & { orientation?: SelectBoxOrientation }\n>({\n  gridArea: \"description\",\n  alignSelf: \"center\",\n  display: {\n    default: \"block\",\n    orientation: {\n      vertical: \"none\",\n    },\n  },\n  overflow: \"hidden\",\n  textAlign: {\n    default: \"center\",\n    orientation: {\n      horizontal: \"start\",\n    },\n  },\n  color: {\n    default: baseColor(\"neutral\"),\n    isDisabled: \"disabled\",\n  },\n});\n\nconst selectBoxLabel = style<ListBoxOptionRenderProps & { orientation?: SelectBoxOrientation }>({\n  gridArea: \"label\",\n  alignSelf: \"center\",\n  justifySelf: {\n    default: \"center\",\n    orientation: {\n      horizontal: \"start\",\n    },\n  },\n  width: \"full\",\n  overflow: \"hidden\",\n  minWidth: 0,\n  textAlign: {\n    default: \"center\",\n    orientation: {\n      horizontal: \"start\",\n    },\n  },\n  whiteSpace: \"nowrap\",\n  textOverflow: \"ellipsis\",\n  fontWeight: {\n    orientation: {\n      horizontal: \"bold\",\n    },\n  },\n  color: {\n    default: baseColor(\"neutral\"),\n    isDisabled: \"disabled\",\n  },\n});\n\n/**\n * SelectBoxGroup allows users to select one or more options from a list.\n */\nexport function SelectBoxGroup<T>(props: SelectBoxGroupProps<T>): JSX.Element {\n  const providerProps = useProviderProps(props);\n  const contextProps = getSlottedContextProps(\n    useContext(SelectBoxGroupContext) as SpectrumContextValue<SelectBoxGroupProps<T>>,\n    props.slot,\n  );\n  const mergedProps = mergeProps(providerProps, contextProps ?? {}, props);\n  const [local, headlessProps] = splitProps(mergedProps, [\n    \"children\",\n    \"orientation\",\n    \"isDisabled\",\n    \"selectionMode\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"slot\",\n    \"ref\",\n  ]);\n  const orientation = (): SelectBoxOrientation => local.orientation ?? \"vertical\";\n  const selectionMode = (): \"single\" | \"multiple\" =>\n    local.selectionMode === \"multiple\" ? \"multiple\" : \"single\";\n  const [staticItems, setStaticItems] = createSignal<StaticSelectBoxItem[]>([]);\n  const staticItemMap = new Map<Key, StaticSelectBoxItem>();\n  const usesStaticChildren = () => headlessProps.items == null;\n  const syncStaticItems = () => setStaticItems(Array.from(staticItemMap.values()));\n  const staticCollectionContext: StaticSelectBoxCollectionContextValue = {\n    registerItem(item) {\n      const previous = staticItemMap.get(item.id);\n      if (\n        previous &&\n        previous.textValue === item.textValue &&\n        previous.isDisabled === item.isDisabled &&\n        previous.props === item.props\n      ) {\n        return;\n      }\n\n      staticItemMap.set(item.id, item);\n      syncStaticItems();\n    },\n    unregisterItem(id) {\n      if (staticItemMap.delete(id)) {\n        syncStaticItems();\n      }\n    },\n  };\n  const contextValue = {\n    get orientation() {\n      return orientation();\n    },\n    get selectionMode() {\n      return selectionMode();\n    },\n    get isDisabled() {\n      return local.isDisabled;\n    },\n  };\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const assignGroupRefs = mergeContextRefs(\n    (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,\n    props.ref,\n  );\n  const className = (_renderProps: ListBoxRenderProps): string =>\n    [\n      contextProps?.UNSAFE_className,\n      props.UNSAFE_className,\n      props.class,\n      mergeStyles(selectBoxGroupStyles({ orientation: orientation() }), mergedStyles()),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n  const collectionItems = createMemo(() =>\n    usesStaticChildren() ? (staticItems() as unknown as T[]) : headlessProps.items,\n  );\n  const getKey = () =>\n    usesStaticChildren() ? (item: T) => (item as StaticSelectBoxItem).id : headlessProps.getKey;\n  const getTextValue = () =>\n    usesStaticChildren()\n      ? (item: T) =>\n          (item as StaticSelectBoxItem).textValue ?? String((item as StaticSelectBoxItem).id)\n      : headlessProps.getTextValue;\n  const getDisabled = () =>\n    usesStaticChildren()\n      ? (item: T) => Boolean((item as StaticSelectBoxItem).isDisabled)\n      : headlessProps.getDisabled;\n  const renderItem = (item: T) =>\n    usesStaticChildren() ? (\n      <SelectBox {...(item as StaticSelectBoxItem).props} />\n    ) : typeof local.children === \"function\" ? (\n      local.children(item)\n    ) : null;\n  const staticRegistrationChildren = () => {\n    if (!usesStaticChildren()) {\n      return null;\n    }\n\n    const resolved = resolveChildren(() => local.children as JSX.Element);\n    return resolved();\n  };\n\n  return (\n    <SelectBoxContext.Provider value={contextValue}>\n      <StaticSelectBoxCollectionContext.Provider\n        value={usesStaticChildren() ? staticCollectionContext : null}\n      >\n        {staticRegistrationChildren()}\n      </StaticSelectBoxCollectionContext.Provider>\n      <HeadlessListBox\n        {...headlessProps}\n        ref={(element) => assignGroupRefs(element)}\n        items={collectionItems() ?? []}\n        getKey={getKey()}\n        getTextValue={getTextValue()}\n        getDisabled={getDisabled()}\n        isDisabled={local.isDisabled}\n        selectionMode={selectionMode()}\n        layout=\"grid\"\n        orientation={orientation()}\n        slot={local.slot ?? undefined}\n        class={className}\n        style={mergedUnsafeStyle()}\n        data-orientation={orientation()}\n        data-disabled={local.isDisabled ? \"true\" : undefined}\n      >\n        {(item: T) => renderItem(item)}\n      </HeadlessListBox>\n    </SelectBoxContext.Provider>\n  );\n}\n\nfunction replaceManagedClass(element: Element, dataAttribute: string, nextClass: string): void {\n  const previousClass = element.getAttribute(dataAttribute);\n  for (const className of previousClass?.split(/\\s+/).filter(Boolean) ?? []) {\n    element.classList.remove(className);\n  }\n\n  for (const className of nextClass.split(/\\s+/).filter(Boolean)) {\n    element.classList.add(className);\n  }\n\n  element.setAttribute(dataAttribute, nextClass);\n}\n\nfunction applySlotClasses(\n  root: HTMLElement | undefined,\n  renderProps: ListBoxOptionRenderProps,\n  orientation: SelectBoxOrientation,\n  isDisabled: boolean,\n): void {\n  if (!root) {\n    return;\n  }\n\n  const slotState = {\n    ...renderProps,\n    isDisabled: renderProps.isDisabled || isDisabled,\n    orientation,\n  };\n\n  for (const element of Array.from(\n    root.querySelectorAll(\n      '[slot=\"illustration\"], [data-slot=\"illustration\"], [data-rsp-slot=\"illustration\"]',\n    ),\n  )) {\n    replaceManagedClass(element, \"data-s2-select-box-slot-class\", selectBoxIllustration(slotState));\n    element.setAttribute(\"data-rsp-slot\", \"illustration\");\n  }\n\n  for (const element of Array.from(\n    root.querySelectorAll('[slot=\"label\"], [data-slot=\"label\"], [data-rsp-slot=\"label\"]'),\n  )) {\n    replaceManagedClass(element, \"data-s2-select-box-slot-class\", selectBoxLabel(slotState));\n    element.setAttribute(\"data-rsp-slot\", \"label\");\n  }\n\n  for (const element of Array.from(\n    root.querySelectorAll(\n      '[slot=\"description\"], [data-slot=\"description\"], [data-rsp-slot=\"description\"]',\n    ),\n  )) {\n    replaceManagedClass(element, \"data-s2-select-box-slot-class\", selectBoxDescription(slotState));\n    element.setAttribute(\"data-rsp-slot\", \"description\");\n  }\n\n  if (orientation === \"horizontal\") {\n    const hasIllustration = !!root.querySelector(\n      '[slot=\"illustration\"], [data-slot=\"illustration\"], [data-rsp-slot=\"illustration\"]',\n    );\n    const hasDescription = !!root.querySelector(\n      '[slot=\"description\"], [data-slot=\"description\"], [data-rsp-slot=\"description\"]',\n    );\n\n    root.style.gridTemplateAreas = hasDescription\n      ? '\"illustration . label\" \"illustration . description\"'\n      : '\"illustration . label\"';\n    root.style.gridTemplateRows = hasIllustration ? \"18px 30px\" : \"min-content\";\n  } else {\n    root.style.gridTemplateAreas = '\"illustration\" \".\" \"label\"';\n    root.style.gridTemplateRows = \"48px 8px 18px\";\n    root.style.gridTemplateColumns = \"1fr\";\n    return;\n  }\n\n  root.style.removeProperty(\"grid-template-columns\");\n}\n\n/**\n * SelectBox is a single selectable item in a SelectBoxGroup.\n */\nexport function SelectBox(props: SelectBoxProps): JSX.Element {\n  const context = useContext(SelectBoxContext);\n  const staticCollection = useContext(StaticSelectBoxCollectionContext);\n  const [local, headlessProps] = splitProps(props, [\n    \"children\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"ref\",\n  ]);\n  createEffect(() => {\n    if (!staticCollection) {\n      return;\n    }\n\n    staticCollection.registerItem({\n      id: props.id,\n      textValue: headlessProps.textValue ?? headlessProps[\"aria-label\"],\n      isDisabled: !!headlessProps.isDisabled,\n      props,\n    });\n  });\n\n  onCleanup(() => {\n    staticCollection?.unregisterItem(props.id);\n  });\n\n  if (staticCollection) {\n    return null;\n  }\n\n  const orientation = (): SelectBoxOrientation => context.orientation ?? \"vertical\";\n  const selectionMode = () => context.selectionMode ?? \"single\";\n  const isDisabled = () => !!headlessProps.isDisabled || !!context.isDisabled;\n  let optionElement: HTMLDivElement | undefined;\n  const assignOptionRef = mergeContextRefs(local.ref);\n  const getClassName = (renderProps: ListBoxOptionRenderProps): string =>\n    [\n      local.UNSAFE_className,\n      local.class,\n      mergeStyles(\n        selectBoxStyles({\n          ...renderProps,\n          isDisabled: renderProps.isDisabled || isDisabled(),\n          orientation: orientation(),\n        }),\n        local.styles,\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n  const getStyle = (renderProps: ListBoxOptionRenderProps): JSX.CSSProperties =>\n    pressScale(() => optionElement, local.UNSAFE_style)(renderProps);\n\n  function SelectBoxContent(renderProps: ListBoxOptionRenderProps) {\n    const resolvedChildren = resolveChildren(() => local.children);\n    createEffect(() => applySlotClasses(optionElement, renderProps, orientation(), isDisabled()));\n\n    return (\n      <>\n        <div class={selectBoxSelectionIndicator} aria-hidden=\"true\">\n          <Show when={!renderProps.isDisabled && selectionMode() === \"multiple\"}>\n            <div class={selectBoxCheckboxBox(renderProps)} data-rsp-slot=\"selection-indicator\">\n              <Checkmark\n                size=\"S\"\n                class={selectBoxCheckboxIcon}\n                style={{\n                  \"--iconPrimary\": \"var(--s2-container-bg, white)\",\n                  width: \"10px\",\n                  height: \"10px\",\n                }}\n              />\n            </div>\n          </Show>\n        </div>\n        {resolvedChildren()}\n      </>\n    );\n  }\n\n  return (\n    <HeadlessListBoxOption\n      {...headlessProps}\n      isDisabled={isDisabled()}\n      ref={(element) => {\n        optionElement = element;\n        assignOptionRef(element);\n      }}\n      class={getClassName}\n      style={getStyle}\n      data-select-box=\"\"\n    >\n      {(renderProps) => <SelectBoxContent {...renderProps} />}\n    </HeadlessListBoxOption>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/selectboxgroup/index.tsx"],"sourcesContent":["/*\n * Copyright 2025 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 CONDITIONS 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-spectrum/s2/src/SelectBoxGroup.tsx\n\n// Port of packages/@react-spectrum/s2/src/SelectBoxGroup.tsx.\n\nimport {\n  children as resolveChildren,\n  createContext,\n  createEffect,\n  createMemo,\n  onCleanup,\n  Show,\n  createSignal,\n  useContext,\n  createTrackedEffect,\n} from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { mergeProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n  ListBox as HeadlessListBox,\n  ListBoxOption as HeadlessListBoxOption,\n  type ListBoxOptionProps as HeadlessListBoxOptionProps,\n  type ListBoxOptionRenderProps,\n  type ListBoxProps as HeadlessListBoxProps,\n  type ListBoxRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport type { StyleString } from \"../style\";\nimport { baseColor, focusRing, lightDark, style } from \"../style\" with { type: \"macro\" };\nimport { mergeStyles } from \"../style/runtime\";\nimport { useProviderProps, type ProviderInheritedProps } from \"../provider\";\nimport Checkmark from \"../icon/ui-icons/Checkmark\";\nimport { pressScale } from \"../pressScale\";\nimport { glassSurface } from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n  type SpectrumContextValue,\n} from \"../button/spectrum-context\";\n\nexport type SelectBoxOrientation = \"horizontal\" | \"vertical\";\n\nexport interface SelectBoxGroupProps<T> extends Omit<\n  HeadlessListBoxProps<T>,\n  \"class\" | \"style\" | \"children\" | \"layout\" | \"orientation\" | \"slot\" | \"ref\"\n> {\n  /** The SelectBox elements contained within the SelectBoxGroup. */\n  children: JSX.Element | ((item: T) => JSX.Element);\n  /** The layout direction of the content in each SelectBox. @default 'vertical' */\n  orientation?: SelectBoxOrientation;\n  /** Whether the SelectBoxGroup is disabled. */\n  isDisabled?: boolean;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n  /** Slot name when used in a Spectrum context. */\n  slot?: string | null;\n  /** Ref for the underlying listbox element. */\n  ref?: RefLike<HTMLDivElement>;\n}\n\nexport interface SelectBoxProps extends Omit<\n  HeadlessListBoxOptionProps<unknown>,\n  \"class\" | \"style\" | \"children\"\n> {\n  /** The unique id of the SelectBox. */\n  id: Key;\n  /** The contents of the SelectBox. */\n  children?: JSX.Element;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n}\n\ninterface SelectBoxContextValue {\n  orientation?: SelectBoxOrientation;\n  selectionMode?: \"single\" | \"multiple\";\n  isDisabled?: boolean;\n}\n\ninterface StaticSelectBoxItem {\n  id: Key;\n  textValue?: string;\n  isDisabled?: boolean;\n  props: SelectBoxProps;\n}\n\ninterface StaticSelectBoxCollectionContextValue {\n  registerItem(item: StaticSelectBoxItem): void;\n  unregisterItem(id: Key): void;\n}\n\nconst SelectBoxContext = createContext<SelectBoxContextValue>({ orientation: \"vertical\" });\nconst StaticSelectBoxCollectionContext =\n  createContext<StaticSelectBoxCollectionContextValue | null>(null);\nexport const SelectBoxGroupContext =\n  createContext<SpectrumContextValue<SelectBoxGroupProps<unknown>>>(null);\nconst selectBoxGroupStyles = style<{ orientation?: SelectBoxOrientation }>({\n  display: \"grid\",\n  gridAutoRows: \"1fr\",\n  margin: 0,\n  padding: 0,\n  listStyleType: \"none\",\n  gap: 24,\n  justifyContent: \"center\",\n  gridTemplateColumns: {\n    orientation: {\n      vertical: \"[repeat(auto-fit,minmax(144px,min(170px,100%)))]\",\n      horizontal: \"[repeat(auto-fit,minmax(188px,min(368px,100%)))]\",\n    },\n  },\n});\n\nconst selectBoxStyles = style<ListBoxOptionRenderProps & { orientation?: SelectBoxOrientation }>({\n  ...focusRing(),\n  /* A SelectBox is a CARD in the register's surface ladder, and now says so in one\n   * word instead of five hand-copied declarations. It was already most of the way\n   * there — `layer-2`, a 1px `border-subtle` edge, a rim — but it had assembled that\n   * by hand, and the three places it disagreed with the ladder were exactly the three\n   * a hand-assembled surface gets wrong:\n   *   - radius `panel` (14px), the PANEL rung. A card is 12px; a tile that curves more\n   *     than the panel holding it inverts the nesting the ladder encodes.\n   *   - `edge-glass`, the CONTROL rim (0.9/0.35). Cards are translucent, and on dark\n   *     that opaque-control rim outlines the tile like a button; `edge-glass-surface`\n   *     (0.45/0.09) is the surface rung.\n   *   - no backdrop blur at all, so the one thing that makes a glass surface glass was\n   *     missing and the tile read as a flat swatch over the page.\n   * State (hover/selected/disabled) stays declared below and wins over the spread. */\n  ...glassSurface(\"card\"),\n  display: \"grid\",\n  gridAutoRows: \"1fr\",\n  position: \"relative\",\n  font: \"ui\",\n  boxSizing: \"border-box\",\n  overflow: \"hidden\",\n  width: {\n    default: 170,\n    orientation: {\n      horizontal: 368,\n    },\n  },\n  height: {\n    default: 170,\n    orientation: {\n      horizontal: \"auto\",\n    },\n  },\n  minWidth: {\n    default: 144,\n    orientation: {\n      horizontal: 188,\n    },\n  },\n  \"--select-box-max-width\": {\n    type: \"width\",\n    value: {\n      default: 170,\n      orientation: {\n        horizontal: 480,\n      },\n    },\n  },\n  maxWidth: \"[min(100%,var(--select-box-max-width))]\",\n  minHeight: {\n    default: 144,\n    orientation: {\n      horizontal: 80,\n    },\n  },\n  maxHeight: {\n    default: 170,\n    orientation: {\n      horizontal: 240,\n    },\n  },\n  padding: {\n    default: 24,\n    orientation: {\n      horizontal: 16,\n    },\n  },\n  paddingStart: {\n    orientation: {\n      horizontal: 32,\n    },\n  },\n  paddingEnd: {\n    orientation: {\n      horizontal: 24,\n    },\n  },\n  gridTemplateAreas: {\n    orientation: {\n      vertical: [\"illustration\", \".\", \"label\"],\n    },\n  },\n  gridTemplateRows: {\n    orientation: {\n      vertical: [\"min-content\", 8, \"min-content\"],\n    },\n  },\n  gridTemplateColumns: {\n    orientation: {\n      horizontal: \"[min-content 10px 1fr]\",\n    },\n  },\n  alignContent: {\n    orientation: {\n      vertical: \"center\",\n    },\n  },\n  /* Viviana UI v2 (Glasselated): hover and selection moved from the shadow to the edge.\n   * They used to be spelled in the boxShadow map below as emphasized/elevated/elevated —\n   * three distinct cast shadows. Now that the theme repoints both of those tokens to the\n   * register's inset rim (style/spectrum-theme.ts), all three states resolve to the SAME\n   * rim and the map no longer signals anything. The edge is where the register puts this\n   * signal anyway: the handoff's own surface hover is a border treatment, not a lift.\n   *\n   * The resting stop also stops being `transparent` — a glass surface in this register\n   * carries a visible 1px `--border-subtle` edge at rest, so hover/selection now read as a\n   * change of edge COLOR rather than an edge appearing from nothing.\n   *\n   * `accent-900`/`accent-700` rather than a plain `accent`: the theme's borderColor map is\n   * `...baseColors` plus negative/disabled and the three edge tokens, so it carries ramp\n   * stops but no semantic `accent` key — that exists only on color/backgroundColor/fill.\n   * Same constraint the tag-group edge hit. */\n  borderColor: {\n    default: \"border-subtle\",\n    isHovered: \"border-default\",\n    isSelected: lightDark(\"accent-900\", \"accent-700\"),\n    isDisabled: \"transparent\",\n  },\n  backgroundColor: {\n    default: \"layer-2\",\n    isDisabled: \"disabled\",\n  },\n  color: {\n    isDisabled: \"disabled\",\n  },\n  boxShadow: {\n    // Restated as a map only to carry the disabled branch; the resting value must\n    // stay the surface rim the spread above established, not the control one.\n    default: \"edge-glass-surface\",\n    isDisabled: \"none\",\n  },\n  cursor: {\n    default: \"default\",\n    isDisabled: \"not-allowed\",\n  },\n  transition: \"default\",\n});\n\nconst selectBoxSelectionIndicator = style({\n  position: \"absolute\",\n  top: 8,\n  insetStart: 8,\n  pointerEvents: \"none\",\n});\n\n/* The tile's selection mark is the same PIXEL box the Checkbox draws at size S —\n * 14x14, 2px edge, square (checkbox/index.tsx, \"Terminal Glass App.dc.html\":242) —\n * because it IS a checkbox to the reader, and two different checkbox shapes on one\n * screen is the drift this register exists to stop.\n *\n * It also stops spelling its own colours as raw `light-dark(rgb(...))` literals. Those\n * two values (#ffffff/#111111 fill, #292929/#dbdbdb edge) answer to no token in either\n * scheme, so a theme flip moved every other surface on the tile and left this box\n * behind. `well`/`well-border` are the register's field pair and follow the theme. */\nconst selectBoxCheckboxBox = style<ListBoxOptionRenderProps>({\n  ...focusRing(),\n  size: 14,\n  flexShrink: 0,\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  borderWidth: 2,\n  boxSizing: \"border-box\",\n  borderStyle: \"solid\",\n  borderRadius: \"none\",\n  transition: \"default\",\n  forcedColorAdjust: \"none\",\n  backgroundColor: {\n    default: \"well\",\n    isSelected: baseColor(\"accent-900\"),\n    isDisabled: \"disabled\",\n  },\n  borderColor: {\n    default: \"well-border\",\n    isDisabled: \"disabled\",\n    isSelected: \"transparent\",\n  },\n});\n\nconst selectBoxCheckboxIcon = style({\n  pointerEvents: \"none\",\n});\n\nconst selectBoxIllustration = style<\n  ListBoxOptionRenderProps & { orientation?: SelectBoxOrientation }\n>({\n  gridArea: \"illustration\",\n  alignSelf: \"center\",\n  justifySelf: \"center\",\n  minSize: 48,\n  \"--iconPrimary\": {\n    type: \"color\",\n    value: {\n      default: baseColor(\"neutral\"),\n      isDisabled: \"disabled\",\n    },\n  },\n});\n\nconst selectBoxDescription = style<\n  ListBoxOptionRenderProps & { orientation?: SelectBoxOrientation }\n>({\n  gridArea: \"description\",\n  alignSelf: \"center\",\n  display: {\n    default: \"block\",\n    orientation: {\n      vertical: \"none\",\n    },\n  },\n  overflow: \"hidden\",\n  textAlign: {\n    default: \"center\",\n    orientation: {\n      horizontal: \"start\",\n    },\n  },\n  color: {\n    default: baseColor(\"neutral\"),\n    isDisabled: \"disabled\",\n  },\n});\n\nconst selectBoxLabel = style<ListBoxOptionRenderProps & { orientation?: SelectBoxOrientation }>({\n  gridArea: \"label\",\n  alignSelf: \"center\",\n  justifySelf: {\n    default: \"center\",\n    orientation: {\n      horizontal: \"start\",\n    },\n  },\n  width: \"full\",\n  overflow: \"hidden\",\n  minWidth: 0,\n  textAlign: {\n    default: \"center\",\n    orientation: {\n      horizontal: \"start\",\n    },\n  },\n  whiteSpace: \"nowrap\",\n  textOverflow: \"ellipsis\",\n  fontWeight: {\n    orientation: {\n      horizontal: \"bold\",\n    },\n  },\n  color: {\n    default: baseColor(\"neutral\"),\n    isDisabled: \"disabled\",\n  },\n});\n\n/**\n * SelectBoxGroup allows users to select one or more options from a list.\n */\nexport function SelectBoxGroup<T>(props: SelectBoxGroupProps<T>): JSX.Element {\n  const providerProps = useProviderProps(props) as SelectBoxGroupProps<T> & ProviderInheritedProps;\n  const [flags] = splitProps(providerProps, [\n    \"isQuiet\",\n    \"isEmphasized\",\n    \"isDisabled\",\n    \"isRequired\",\n    \"isReadOnly\",\n    \"validationState\",\n  ]);\n  const contextProps = getSlottedContextProps(\n    useContext(SelectBoxGroupContext) as SpectrumContextValue<SelectBoxGroupProps<T>>,\n    props.slot,\n  );\n  const mergedProps = mergeProps<SelectBoxGroupProps<T>>(flags, contextProps ?? {}, props);\n  const [local, headlessProps] = splitProps(mergedProps, [\n    \"children\",\n    \"orientation\",\n    \"isDisabled\",\n    \"selectionMode\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"slot\",\n    \"ref\",\n  ]);\n  const orientation = (): SelectBoxOrientation => local.orientation ?? \"vertical\";\n  const selectionMode = (): \"single\" | \"multiple\" =>\n    local.selectionMode === \"multiple\" ? \"multiple\" : \"single\";\n  const [staticItems, setStaticItems] = createSignal<StaticSelectBoxItem[]>([], {\n    ownedWrite: true,\n  });\n  const staticItemMap = new Map<Key, StaticSelectBoxItem>();\n  const usesStaticChildren = () => headlessProps.items == null;\n  const syncStaticItems = () => setStaticItems(Array.from(staticItemMap.values()));\n  const staticCollectionContext: StaticSelectBoxCollectionContextValue = {\n    registerItem(item) {\n      const previous = staticItemMap.get(item.id);\n      if (\n        previous &&\n        previous.textValue === item.textValue &&\n        previous.isDisabled === item.isDisabled &&\n        previous.props === item.props\n      ) {\n        return;\n      }\n\n      staticItemMap.set(item.id, item);\n      syncStaticItems();\n    },\n    unregisterItem(id) {\n      if (staticItemMap.delete(id)) {\n        syncStaticItems();\n      }\n    },\n  };\n  const contextValue = {\n    get orientation() {\n      return orientation();\n    },\n    get selectionMode() {\n      return selectionMode();\n    },\n    get isDisabled() {\n      return local.isDisabled;\n    },\n  };\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const assignGroupRefs = mergeContextRefs(\n    (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,\n    props.ref,\n  );\n  const className = (_renderProps: ListBoxRenderProps): string =>\n    [\n      contextProps?.UNSAFE_className,\n      props.UNSAFE_className,\n      props.class,\n      mergeStyles(selectBoxGroupStyles({ orientation: orientation() }), mergedStyles()),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n  const collectionItems = createMemo(() =>\n    usesStaticChildren() ? (staticItems() as unknown as T[]) : headlessProps.items,\n  );\n  const getKey = () =>\n    usesStaticChildren() ? (item: T) => (item as StaticSelectBoxItem).id : headlessProps.getKey;\n  const getTextValue = () =>\n    usesStaticChildren()\n      ? (item: T) =>\n          (item as StaticSelectBoxItem).textValue ?? String((item as StaticSelectBoxItem).id)\n      : headlessProps.getTextValue;\n  const getDisabled = () =>\n    usesStaticChildren()\n      ? (item: T) => Boolean((item as StaticSelectBoxItem).isDisabled)\n      : headlessProps.getDisabled;\n  const renderItem = (item: T) =>\n    usesStaticChildren() ? (\n      <SelectBox {...(item as StaticSelectBoxItem).props} />\n    ) : typeof local.children === \"function\" ? (\n      local.children(item)\n    ) : null;\n  const staticRegistrationChildren = () => {\n    if (!usesStaticChildren()) {\n      return null;\n    }\n\n    const resolved = resolveChildren(() => local.children as JSX.Element);\n    return resolved();\n  };\n\n  return (\n    <SelectBoxContext value={contextValue}>\n      <StaticSelectBoxCollectionContext\n        value={usesStaticChildren() ? staticCollectionContext : null}\n      >\n        {staticRegistrationChildren()}\n      </StaticSelectBoxCollectionContext>\n      <HeadlessListBox\n        {...headlessProps}\n        ref={(element) => assignGroupRefs(element)}\n        items={collectionItems() ?? []}\n        getKey={getKey()}\n        getTextValue={getTextValue()}\n        getDisabled={getDisabled()}\n        isDisabled={local.isDisabled}\n        selectionMode={selectionMode()}\n        layout=\"grid\"\n        orientation={orientation()}\n        slot={local.slot ?? undefined}\n        class={className}\n        style={mergedUnsafeStyle()}\n        data-orientation={orientation()}\n        data-disabled={local.isDisabled ? \"true\" : undefined}\n      >\n        {(item: T) => renderItem(item)}\n      </HeadlessListBox>\n    </SelectBoxContext>\n  );\n}\n\nfunction replaceManagedClass(element: Element, dataAttribute: string, nextClass: string): void {\n  const previousClass = element.getAttribute(dataAttribute);\n  for (const className of previousClass?.split(/\\s+/).filter(Boolean) ?? []) {\n    element.classList.remove(className);\n  }\n\n  for (const className of nextClass.split(/\\s+/).filter(Boolean)) {\n    element.classList.add(className);\n  }\n\n  element.setAttribute(dataAttribute, nextClass);\n}\n\nfunction applySlotClasses(\n  root: HTMLElement | undefined,\n  renderProps: ListBoxOptionRenderProps,\n  orientation: SelectBoxOrientation,\n  isDisabled: boolean,\n): void {\n  if (!root) {\n    return;\n  }\n\n  const slotState = {\n    ...renderProps,\n    isDisabled: renderProps.isDisabled || isDisabled,\n    orientation,\n  };\n\n  for (const element of Array.from(\n    root.querySelectorAll(\n      '[slot=\"illustration\"], [data-slot=\"illustration\"], [data-rsp-slot=\"illustration\"]',\n    ),\n  )) {\n    replaceManagedClass(element, \"data-s2-select-box-slot-class\", selectBoxIllustration(slotState));\n    element.setAttribute(\"data-rsp-slot\", \"illustration\");\n  }\n\n  for (const element of Array.from(\n    root.querySelectorAll('[slot=\"label\"], [data-slot=\"label\"], [data-rsp-slot=\"label\"]'),\n  )) {\n    replaceManagedClass(element, \"data-s2-select-box-slot-class\", selectBoxLabel(slotState));\n    element.setAttribute(\"data-rsp-slot\", \"label\");\n  }\n\n  for (const element of Array.from(\n    root.querySelectorAll(\n      '[slot=\"description\"], [data-slot=\"description\"], [data-rsp-slot=\"description\"]',\n    ),\n  )) {\n    replaceManagedClass(element, \"data-s2-select-box-slot-class\", selectBoxDescription(slotState));\n    element.setAttribute(\"data-rsp-slot\", \"description\");\n  }\n\n  if (orientation === \"horizontal\") {\n    const hasIllustration = !!root.querySelector(\n      '[slot=\"illustration\"], [data-slot=\"illustration\"], [data-rsp-slot=\"illustration\"]',\n    );\n    const hasDescription = !!root.querySelector(\n      '[slot=\"description\"], [data-slot=\"description\"], [data-rsp-slot=\"description\"]',\n    );\n\n    root.style.gridTemplateAreas = hasDescription\n      ? '\"illustration . label\" \"illustration . description\"'\n      : '\"illustration . label\"';\n    root.style.gridTemplateRows = hasIllustration ? \"18px 30px\" : \"min-content\";\n  } else {\n    root.style.gridTemplateAreas = '\"illustration\" \".\" \"label\"';\n    root.style.gridTemplateRows = \"48px 8px 18px\";\n    root.style.gridTemplateColumns = \"1fr\";\n    return;\n  }\n\n  root.style.removeProperty(\"grid-template-columns\");\n}\n\n/**\n * SelectBox is a single selectable item in a SelectBoxGroup.\n */\nexport function SelectBox(props: SelectBoxProps): JSX.Element {\n  const context = useContext(SelectBoxContext);\n  const staticCollection = useContext(StaticSelectBoxCollectionContext);\n  const [local, headlessProps] = splitProps(props, [\n    \"children\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"ref\",\n  ]);\n  createTrackedEffect(() => {\n    if (!staticCollection) {\n      return;\n    }\n\n    staticCollection.registerItem({\n      id: props.id,\n      textValue: headlessProps.textValue ?? headlessProps[\"aria-label\"],\n      isDisabled: !!headlessProps.isDisabled,\n      props,\n    });\n  });\n\n  onCleanup(() => {\n    staticCollection?.unregisterItem(props.id);\n  });\n\n  if (staticCollection) {\n    return null;\n  }\n\n  const orientation = (): SelectBoxOrientation => context.orientation ?? \"vertical\";\n  const selectionMode = () => context.selectionMode ?? \"single\";\n  const isDisabled = () => !!headlessProps.isDisabled || !!context.isDisabled;\n  let optionElement: HTMLDivElement | undefined;\n  const assignOptionRef = mergeContextRefs(local.ref);\n  const getClassName = (renderProps: ListBoxOptionRenderProps): string =>\n    [\n      local.UNSAFE_className,\n      local.class,\n      mergeStyles(\n        selectBoxStyles({\n          ...renderProps,\n          isDisabled: renderProps.isDisabled || isDisabled(),\n          orientation: orientation(),\n        }),\n        local.styles,\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n  const getStyle = (renderProps: ListBoxOptionRenderProps): JSX.CSSProperties =>\n    pressScale(() => optionElement, local.UNSAFE_style)(renderProps);\n\n  function SelectBoxContent(renderProps: ListBoxOptionRenderProps) {\n    const resolvedChildren = resolveChildren(() => local.children);\n    createTrackedEffect(() =>\n      applySlotClasses(optionElement, renderProps, orientation(), isDisabled()),\n    );\n\n    return (\n      <>\n        <div class={selectBoxSelectionIndicator} aria-hidden=\"true\">\n          <Show when={!renderProps.isDisabled && selectionMode() === \"multiple\"}>\n            <div class={selectBoxCheckboxBox(renderProps)} data-rsp-slot=\"selection-indicator\">\n              <Checkmark\n                size=\"S\"\n                class={selectBoxCheckboxIcon}\n                style={{\n                  // Same mark ink as the Checkbox: the deep well, stamped into the\n                  // accent fill (checkbox/index.tsx). `--s2-container-bg` was the\n                  // TILE's fill, which is now what the mark sits on top of, not\n                  // what it should be drawn in.\n                  \"--iconPrimary\": \"var(--surface-well-deep)\",\n                  width: \"10px\",\n                  height: \"10px\",\n                }}\n              />\n            </div>\n          </Show>\n        </div>\n        {resolvedChildren()}\n      </>\n    );\n  }\n\n  return (\n    <HeadlessListBoxOption\n      {...headlessProps}\n      isDisabled={isDisabled()}\n      ref={(element) => {\n        optionElement = element;\n        assignOptionRef(element);\n      }}\n      class={getClassName}\n      style={getStyle}\n      data-select-box=\"\"\n    >\n      {(renderProps) => <SelectBoxContent {...renderProps} />}\n    </HeadlessListBoxOption>\n  );\n}\n"],"mappings":"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"}

package/dist/selectboxgroup/index.jsx

@@ -1,9 +1,21 @@
+/*
+* Copyright 2025 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 CONDITIONS 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-spectrum/s2/src/SelectBoxGroup.tsx
 import { t as mergeStyles } from "../_chunk/runtime.jsx";
-import { useProviderProps } from "../provider/index.jsx";
+import { a as useProviderProps } from "../_chunk/provider.jsx";
 import { a as mergeContextUnsafeStyle, i as mergeContextStyles, n as getSlottedContextProps, r as mergeContextRefs } from "../_chunk/spectrum-context.jsx";
 import { pressScale } from "../pressScale.jsx";
 import { t as Checkmark } from "../_chunk/Checkmark.jsx";
-import { Show, children, createContext, createEffect, createMemo, createSignal, mergeProps, onCleanup, splitProps, useContext } from "solid-js";
+import { Show, children, createContext, createMemo, createSignal, createTrackedEffect, onCleanup, useContext } from "solid-js";
+import { mergeProps, splitProps } from "@proyecto-viviana/solidaria/utils";
 import { ListBox, ListBoxOption } from "@proyecto-viviana/solidaria-components";
 //#region src/selectboxgroup/index.tsx
 const SelectBoxContext = createContext({ orientation: "vertical" });
@@ -11,204 +23,218 @@ const StaticSelectBoxCollectionContext = createContext(null);
 const SelectBoxGroupContext = createContext(null);
 const selectBoxGroupStyles = function anonymous(props) {
 	let rules = " ";
-	rules += " se151";
-	rules += " __yM8Mfn151";
-	rules += " Jy151";
-	rules += " Gy151";
-	rules += " Iy151";
-	rules += " Hy151";
-	rules += " Td151";
-	rules += " Qd151";
-	rules += " Sd151";
-	rules += " Rd151";
-	rules += " _Gc151";
-	rules += " Uj151";
-	rules += " qj151";
-	rules += " _Ca151";
-	if (props.orientation === "horizontal") rules += " DMvye4c151";
-	else if (props.orientation === "vertical") rules += " DbNECGe151";
+	rules += " se17";
+	rules += " __yM8Mfn17";
+	rules += " Jy17";
+	rules += " Gy17";
+	rules += " Iy17";
+	rules += " Hy17";
+	rules += " Td17";
+	rules += " Qd17";
+	rules += " Sd17";
+	rules += " Rd17";
+	rules += " _Gc17";
+	rules += " Uj17";
+	rules += " qj17";
+	rules += " _Ca17";
+	if (props.orientation === "horizontal") rules += " DMvye4c17";
+	else if (props.orientation === "vertical") rules += " DbNECGe17";
 	return rules;
 };
 const selectBoxStyles = function anonymous(props) {
 	let rules = " ";
-	if (props.isFocusVisible) rules += " _Lf151";
-	else rules += " _Le151";
-	rules += " O8KaFke151";
-	rules += " Olc151";
-	rules += " _Mc151";
-	rules += " _Kd151";
-	rules += " se151";
-	rules += " __yM8Mfn151";
-	rules += " _Pc151";
-	rules += " uxe7h4151";
-	rules += " -_6BNtrc-c151";
-	rules += " vx151";
-	rules += " xb151";
-	rules += " _xa151";
-	rules += " _Fd151";
-	rules += " _FnuYUweb151";
-	if (props.isDisabled) rules += " pUvnvv151";
-	rules += " _oa151";
-	rules += " _Nc151";
-	rules += " Pc151";
-	if (props.orientation === "horizontal") rules += " ZAK24ue151";
-	else rules += " Z75oWv151";
-	if (props.orientation === "horizontal") rules += " Fd151";
-	else rules += " F75oWv151";
-	if (props.orientation === "horizontal") rules += " NBzUiud151";
-	else rules += " NQGV3L151";
-	if (props.orientation === "horizontal") rules += " -_5yLdZ-ZILqIYb151";
-	else rules += " -_5yLdZ-Z75oWv151";
-	rules += " L0TTrwb151";
-	if (props.orientation === "horizontal") rules += " MKniM151";
-	else rules += " MQGV3L151";
-	if (props.orientation === "horizontal") rules += " KDvO7ld151";
-	else rules += " K75oWv151";
-	if (props.orientation === "horizontal") rules += " Tf151";
-	else rules += " Th151";
-	if (props.orientation === "horizontal") rules += " Qf151";
-	else rules += " Qh151";
-	if (props.orientation === "horizontal") rules += " Sk151";
-	if (props.orientation === "horizontal") rules += " Rh151";
-	if (props.orientation === "vertical") rules += " C586wNb151";
-	if (props.orientation === "vertical") rules += " EY7ZLHe151";
-	if (props.orientation === "horizontal") rules += " DJSAqje151";
-	if (props.orientation === "vertical") rules += " _cb151";
-	rules += " oY4qurc151";
-	rules += " nY4qurc151";
-	rules += " kY4qurc151";
-	rules += " jY4qurc151";
-	rules += " _jf151";
-	rules += " _kb151";
-	rules += " hb151";
-	rules += " mb151";
-	rules += " lb151";
-	if (props.isDisabled) rules += " iA151";
-	else if (props.isSelected) rules += " iI9Ko6c151";
-	else if (props.isHovered) rules += " ivsWZX151";
-	else rules += " irHHOgb151";
-	if (props.isDisabled) rules += " gkDWoNd151";
-	else rules += " g9ORGnd151";
-	if (props.isDisabled) rules += " _nd151";
-	else rules += " _neYWWze151";
-	if (props.isDisabled) rules += " ru151";
-	else rules += " ri151";
-	rules += " Yd151";
-	rules += " Xb151";
-	rules += " _2b151";
+	if (props.isFocusVisible) rules += " _Lf17";
+	else rules += " _Le17";
+	rules += " Or2Mazb17";
+	rules += " Olc17";
+	rules += " _Mc17";
+	rules += " _Kd17";
+	rules += " oQvqurc17";
+	rules += " nQvqurc17";
+	rules += " kQvqurc17";
+	rules += " jQvqurc17";
+	if (props.isDisabled) rules += " gLX7Xt17";
+	else rules += " g9ORGnd17";
+	rules += " -Jvcevd-Nbc1hc17";
+	if (props.isDisabled) rules += " _nd17";
+	else rules += " _nPP9Zse17";
+	rules += " _kb17";
+	rules += " hb17";
+	rules += " mb17";
+	rules += " lb17";
+	rules += " _jf17";
+	if (props.isDisabled) rules += " iA17";
+	else if (props.isSelected) rules += " iQWM1Qc17";
+	else if (props.isHovered) rules += " ivsWZX17";
+	else rules += " irHHOgb17";
+	rules += " se17";
+	rules += " __yM8Mfn17";
+	rules += " _Pc17";
+	rules += " uxe7h417";
+	rules += " -_6BNtrc-c17";
+	rules += " vx17";
+	rules += " xb17";
+	rules += " _xa17";
+	rules += " _Fd17";
+	rules += " _FnuYUweb17";
+	if (props.isDisabled) rules += " p8H6Pad17";
+	rules += " _oa17";
+	rules += " _Nc17";
+	rules += " Pc17";
+	if (props.orientation === "horizontal") rules += " ZAK24ue17";
+	else rules += " Z75oWv17";
+	if (props.orientation === "horizontal") rules += " Fd17";
+	else rules += " F75oWv17";
+	if (props.orientation === "horizontal") rules += " NBzUiud17";
+	else rules += " NQGV3L17";
+	if (props.orientation === "horizontal") rules += " -_5yLdZ-ZILqIYb17";
+	else rules += " -_5yLdZ-Z75oWv17";
+	rules += " L0TTrwb17";
+	if (props.orientation === "horizontal") rules += " MKniM17";
+	else rules += " MQGV3L17";
+	if (props.orientation === "horizontal") rules += " KDvO7ld17";
+	else rules += " K75oWv17";
+	if (props.orientation === "horizontal") rules += " Tf17";
+	else rules += " Th17";
+	if (props.orientation === "horizontal") rules += " Qf17";
+	else rules += " Qh17";
+	if (props.orientation === "horizontal") rules += " Sk17";
+	if (props.orientation === "horizontal") rules += " Rh17";
+	if (props.orientation === "vertical") rules += " C586wNb17";
+	if (props.orientation === "vertical") rules += " EY7ZLHe17";
+	if (props.orientation === "horizontal") rules += " DJSAqje17";
+	if (props.orientation === "vertical") rules += " _cb17";
+	if (props.isDisabled) rules += " ru17";
+	else rules += " ri17";
+	rules += " Yd17";
+	rules += " Xb17";
+	rules += " _2b17";
 	return rules;
 };
-const selectBoxSelectionIndicator = " _Pa151 WJ151 _AI151 _Ob151";
+const selectBoxSelectionIndicator = " _Pa17 WJ17 _AI17 _Ob17";
 const selectBoxCheckboxBox = function anonymous(props) {
 	let rules = " ";
-	if (props.isFocusVisible) rules += " _Lf151";
-	else rules += " _Le151";
-	rules += " O8KaFke151";
-	rules += " Olc151";
-	rules += " _Mc151";
-	rules += " _Kd151";
-	rules += " Zu151";
-	rules += " Ft151";
-	rules += " _va151";
-	rules += " sd151";
-	rules += " eb151";
-	rules += " _Ca151";
-	rules += " _kb151";
-	rules += " hb151";
-	rules += " mb151";
-	rules += " lb151";
-	rules += " _oa151";
-	rules += " _jf151";
-	rules += " oa151";
-	rules += " na151";
-	rules += " ka151";
-	rules += " ja151";
-	rules += " Yd151";
-	rules += " Xb151";
-	rules += " _2b151";
-	rules += " _yb151";
-	if (props.isDisabled) rules += " gkDWoNd151";
-	else if (props.isSelected) rules += " gHKLAu151";
-	else rules += " gX151";
-	if (props.isSelected) rules += " iA151";
-	else if (props.isDisabled) rules += " ifbAdGe151";
-	else rules += " iv151";
+	if (props.isFocusVisible) rules += " _Lf17";
+	else rules += " _Le17";
+	rules += " Or2Mazb17";
+	rules += " Olc17";
+	rules += " _Mc17";
+	rules += " _Kd17";
+	rules += " Zk17";
+	rules += " Fl17";
+	rules += " _va17";
+	rules += " sd17";
+	rules += " eb17";
+	rules += " _Ca17";
+	rules += " _kc17";
+	rules += " hc17";
+	rules += " mc17";
+	rules += " lc17";
+	rules += " _oa17";
+	rules += " _jf17";
+	rules += " od17";
+	rules += " nd17";
+	rules += " kd17";
+	rules += " jd17";
+	rules += " Yd17";
+	rules += " Xb17";
+	rules += " _2b17";
+	rules += " _yb17";
+	if (props.isDisabled) rules += " gLX7Xt17";
+	else if (props.isSelected) {
+		if (props.isPressed) rules += " g7mEcOd17";
+		else if (props.isFocusVisible) rules += " g7mEcOd17";
+		else if (props.isHovered) rules += " g7mEcOd17";
+		else rules += " gwOLUue17";
+	} else rules += " gHPXipd17";
+	if (props.isSelected) rules += " iA17";
+	else if (props.isDisabled) rules += " iSNu3ze17";
+	else rules += " iAv83Hb17";
 	return rules;
 };
-const selectBoxCheckboxIcon = " _Ob151";
+const selectBoxCheckboxIcon = " _Ob17";
 const selectBoxIllustration = function anonymous(props) {
 	let rules = " ";
-	rules += " zTZ8xtd151";
-	rules += " yTZ8xtd151";
-	rules += " BTZ8xtd151";
-	rules += " ATZ8xtd151";
-	rules += " _dc151";
-	rules += " __Ab151";
-	rules += " Nl151";
-	rules += " Mk151";
-	if (props.isDisabled) rules += " -_8sjo0b-pUvnvv151";
-	else if (props.isPressed) rules += " -_8sjo0b-pMwyHo151";
-	else if (props.isFocusVisible) rules += " -_8sjo0b-pMwyHo151";
-	else if (props.isHovered) rules += " -_8sjo0b-pMwyHo151";
-	else rules += " -_8sjo0b-pHKLAu151";
+	rules += " zTZ8xtd17";
+	rules += " yTZ8xtd17";
+	rules += " BTZ8xtd17";
+	rules += " ATZ8xtd17";
+	rules += " _dc17";
+	rules += " __Ab17";
+	rules += " Nl17";
+	rules += " Mk17";
+	if (props.isDisabled) rules += " -_8sjo0b-p8H6Pad17";
+	else if (props.isPressed) rules += " -_8sjo0b-pBJTC6c17";
+	else if (props.isFocusVisible) rules += " -_8sjo0b-pBJTC6c17";
+	else if (props.isHovered) rules += " -_8sjo0b-pBJTC6c17";
+	else rules += " -_8sjo0b-pmiKvLd17";
 	return rules;
 };
 const selectBoxDescription = function anonymous(props) {
 	let rules = " ";
-	rules += " z9u7zPc151";
-	rules += " y9u7zPc151";
-	rules += " B9u7zPc151";
-	rules += " A9u7zPc151";
-	rules += " _dc151";
-	if (props.orientation === "vertical") rules += " sk151";
-	else rules += " sb151";
-	rules += " _Nc151";
-	rules += " Pc151";
-	if (props.orientation === "horizontal") rules += " _Wd151";
-	else rules += " _Wa151";
-	if (props.isDisabled) rules += " pUvnvv151";
-	else if (props.isPressed) rules += " pMwyHo151";
-	else if (props.isFocusVisible) rules += " pMwyHo151";
-	else if (props.isHovered) rules += " pMwyHo151";
-	else rules += " pHKLAu151";
+	rules += " z9u7zPc17";
+	rules += " y9u7zPc17";
+	rules += " B9u7zPc17";
+	rules += " A9u7zPc17";
+	rules += " _dc17";
+	if (props.orientation === "vertical") rules += " sk17";
+	else rules += " sb17";
+	rules += " _Nc17";
+	rules += " Pc17";
+	if (props.orientation === "horizontal") rules += " _Wd17";
+	else rules += " _Wa17";
+	if (props.isDisabled) rules += " p8H6Pad17";
+	else if (props.isPressed) rules += " pBJTC6c17";
+	else if (props.isFocusVisible) rules += " pBJTC6c17";
+	else if (props.isHovered) rules += " pBJTC6c17";
+	else rules += " pmiKvLd17";
 	return rules;
 };
 const selectBoxLabel = function anonymous(props) {
 	let rules = " ";
-	rules += " zv6x9r151";
-	rules += " yv6x9r151";
-	rules += " Bv6x9r151";
-	rules += " Av6x9r151";
-	rules += " _dc151";
-	if (props.orientation === "horizontal") rules += " __Ad151";
-	else rules += " __Ab151";
-	rules += " Za151";
-	rules += " _Nc151";
-	rules += " Pc151";
-	rules += " Na151";
-	if (props.orientation === "horizontal") rules += " _Wd151";
-	else rules += " _Wa151";
-	rules += " _7c151";
-	rules += " _Yb151";
+	rules += " zv6x9r17";
+	rules += " yv6x9r17";
+	rules += " Bv6x9r17";
+	rules += " Av6x9r17";
+	rules += " _dc17";
+	if (props.orientation === "horizontal") rules += " __Ad17";
+	else rules += " __Ab17";
+	rules += " Za17";
+	rules += " _Nc17";
+	rules += " Pc17";
+	rules += " Na17";
+	if (props.orientation === "horizontal") rules += " _Wd17";
+	else rules += " _Wa17";
+	rules += " _7c17";
+	rules += " _Yb17";
 	if (props.orientation === "horizontal") {
-		rules += " xd151";
-		rules += " _xa151";
-		rules += " xX0cczbc151";
-		rules += " _xX0cczba151";
+		rules += " xd17";
+		rules += " _xa17";
+		rules += " xX0cczbc17";
+		rules += " _xX0cczba17";
 	}
-	if (props.isDisabled) rules += " pUvnvv151";
-	else if (props.isPressed) rules += " pMwyHo151";
-	else if (props.isFocusVisible) rules += " pMwyHo151";
-	else if (props.isHovered) rules += " pMwyHo151";
-	else rules += " pHKLAu151";
+	if (props.isDisabled) rules += " p8H6Pad17";
+	else if (props.isPressed) rules += " pBJTC6c17";
+	else if (props.isFocusVisible) rules += " pBJTC6c17";
+	else if (props.isHovered) rules += " pBJTC6c17";
+	else rules += " pmiKvLd17";
 	return rules;
 };
 /**
 * SelectBoxGroup allows users to select one or more options from a list.
 */ function SelectBoxGroup(props) {
 	const providerProps = useProviderProps(props);
+	const [flags] = splitProps(providerProps, [
+		"isQuiet",
+		"isEmphasized",
+		"isDisabled",
+		"isRequired",
+		"isReadOnly",
+		"validationState"
+	]);
 	const contextProps = getSlottedContextProps(useContext(SelectBoxGroupContext), props.slot);
-	const [local, headlessProps] = splitProps(mergeProps(providerProps, contextProps ?? {}, props), [
+	const mergedProps = mergeProps(flags, contextProps ?? {}, props);
+	const [local, headlessProps] = splitProps(mergedProps, [
 		"children",
 		"orientation",
 		"isDisabled",
@@ -222,7 +248,7 @@ const selectBoxLabel = function anonymous(props) {
 	]);
 	const orientation = () => local.orientation ?? "vertical";
 	const selectionMode = () => local.selectionMode === "multiple" ? "multiple" : "single";
-	const [staticItems, setStaticItems] = createSignal([]);
+	const [staticItems, setStaticItems] = createSignal([], { ownedWrite: true });
 	const staticItemMap = /* @__PURE__ */ new Map();
 	const usesStaticChildren = () => headlessProps.items == null;
 	const syncStaticItems = () => setStaticItems(Array.from(staticItemMap.values()));
@@ -266,14 +292,14 @@ const selectBoxLabel = function anonymous(props) {
 		if (!usesStaticChildren()) return null;
 		return children(() => local.children)();
 	};
-	return <SelectBoxContext.Provider value={contextValue}>
-      <StaticSelectBoxCollectionContext.Provider value={usesStaticChildren() ? staticCollectionContext : null}>
+	return <SelectBoxContext value={contextValue}>
+      <StaticSelectBoxCollectionContext value={usesStaticChildren() ? staticCollectionContext : null}>
         {staticRegistrationChildren()}
-      </StaticSelectBoxCollectionContext.Provider>
+      </StaticSelectBoxCollectionContext>
       <ListBox {...headlessProps} ref={(element) => assignGroupRefs(element)} items={collectionItems() ?? []} getKey={getKey()} getTextValue={getTextValue()} getDisabled={getDisabled()} isDisabled={local.isDisabled} selectionMode={selectionMode()} layout="grid" orientation={orientation()} slot={local.slot ?? void 0} class={className} style={mergedUnsafeStyle()} data-orientation={orientation()} data-disabled={local.isDisabled ? "true" : void 0}>
         {(item) => renderItem(item)}
       </ListBox>
-    </SelectBoxContext.Provider>;
+    </SelectBoxContext>;
 }
 function replaceManagedClass(element, dataAttribute, nextClass) {
 	const previousClass = element.getAttribute(dataAttribute);
@@ -326,7 +352,7 @@ function applySlotClasses(root, renderProps, orientation, isDisabled) {
 		"class",
 		"ref"
 	]);
-	createEffect(() => {
+	createTrackedEffect(() => {
 		if (!staticCollection) return;
 		staticCollection.registerItem({
 			id: props.id,
@@ -356,13 +382,13 @@ function applySlotClasses(root, renderProps, orientation, isDisabled) {
 	const getStyle = (renderProps) => pressScale(() => optionElement, local.UNSAFE_style)(renderProps);
 	function SelectBoxContent(renderProps) {
 		const resolvedChildren = children(() => local.children);
-		createEffect(() => applySlotClasses(optionElement, renderProps, orientation(), isDisabled()));
+		createTrackedEffect(() => applySlotClasses(optionElement, renderProps, orientation(), isDisabled()));
 		return <>
         <div class={selectBoxSelectionIndicator} aria-hidden="true">
           <Show when={!renderProps.isDisabled && selectionMode() === "multiple"}>
             <div class={selectBoxCheckboxBox(renderProps)} data-rsp-slot="selection-indicator">
               <Checkmark size="S" class={selectBoxCheckboxIcon} style={{
-			"--iconPrimary": "var(--s2-container-bg, white)",
+			"--iconPrimary": "var(--surface-well-deep)",
 			width: "10px",
 			height: "10px"
 		}} />