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

package/dist/selectboxgroup/index.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"index.jsx","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.jsx","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/separator/index.d.ts

@@ -1,4 +1,4 @@
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { type SeparatorProps as HeadlessSeparatorProps } from "@proyecto-viviana/solidaria-components";
 /**
  * The rule's colour weight.

package/dist/separator/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/separator/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAc,MAAM,UAAU,CAAC;AAChD,OAAO,EAEL,KAAK,cAAc,IAAI,sBAAsB,EAC9C,MAAM,wCAAwC,CAAC;AAGhD;;;;;;;;;;GAUG;AACH,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAC/D,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAG/C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,sBAAsB,EAAE,OAAO,GAAG,OAAO,CAAC;IACrF;4DACwD;IACxD,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,yDAAyD;IACzD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6CD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAmB5D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/separator/index.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAEL,KAAK,cAAc,IAAI,sBAAsB,EAC9C,MAAM,wCAAwC,CAAC;AAIhD;;;;;;;;;;GAUG;AACH,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAC/D,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAG/C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,sBAAsB,EAAE,OAAO,GAAG,OAAO,CAAC;IACrF;4DACwD;IACxD,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,yDAAyD;IACzD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6CD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAmB5D"}

package/dist/separator/index.js

@@ -1,27 +1,42 @@
-import { createComponent, mergeProps } from "solid-js/web";
-import { splitProps } from "solid-js";
+/*
+* Copyright 2024 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Divider.tsx
+import { createComponent, mergeProps } from "@solidjs/web";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { Separator as Separator$1 } from "@proyecto-viviana/solidaria-components";
 //#region src/separator/index.tsx
 const separatorStyles = function anonymous(props) {
 	let rules = " ";
-	if (props.variant === "strong") rules += " gvsWZX151";
-	else if (props.variant === "subtle") rules += " grHHOgb151";
-	else if (props.variant === "default") rules += " gvsWZX151";
-	rules += " _je151";
-	rules += " Jy151";
-	rules += " Gy151";
-	rules += " Iy151";
-	rules += " Hy151";
-	rules += " _va151";
-	if (props.orientation === "vertical") rules += " _df151";
-	if (props.orientation === "vertical") if (props.size === "lg") rules += " ZT4Nfn151";
-	else if (props.size === "sm") rules += " ZceNfn151";
-	else rules += " ZLvNfn151";
-	else if (props.orientation === "horizontal") rules += " Za151";
-	if (props.orientation === "vertical") rules += " Fb151";
-	else if (props.orientation === "horizontal") if (props.size === "lg") rules += " FT4Nfn151";
-	else if (props.size === "sm") rules += " FceNfn151";
-	else rules += " FLvNfn151";
+	if (props.variant === "strong") rules += " gvsWZX17";
+	else if (props.variant === "subtle") rules += " grHHOgb17";
+	else if (props.variant === "default") rules += " gvsWZX17";
+	rules += " _je17";
+	rules += " Jy17";
+	rules += " Gy17";
+	rules += " Iy17";
+	rules += " Hy17";
+	rules += " _va17";
+	if (props.orientation === "vertical") rules += " _df17";
+	if (props.orientation === "vertical") {
+		if (props.size === "lg") rules += " ZT4Nfn17";
+		else if (props.size === "sm") rules += " ZceNfn17";
+		else rules += " ZLvNfn17";
+	} else if (props.orientation === "horizontal") rules += " Za17";
+	if (props.orientation === "vertical") rules += " Fb17";
+	else if (props.orientation === "horizontal") {
+		if (props.size === "lg") rules += " FT4Nfn17";
+		else if (props.size === "sm") rules += " FceNfn17";
+		else rules += " FLvNfn17";
+	}
 	return rules;
 };
 /**
@@ -43,8 +58,7 @@ const separatorStyles = function anonymous(props) {
 * <Separator variant="subtle" />
 * <Separator size="lg" />
 * ```
-*/
-function Separator(props) {
+*/ function Separator(props) {
 	const [local, headlessProps] = splitProps(props, [
 		"orientation",
 		"variant",
@@ -58,7 +72,7 @@ function Separator(props) {
 		get orientation() {
 			return orientation();
 		},
-		get ["class"]() {
+		get "class"() {
 			return [separatorStyles({
 				variant: variant(),
 				size: size(),

package/dist/separator/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/separator/index.tsx"],"sourcesContent":["import { type JSX, splitProps } from \"solid-js\";\nimport {\n  Separator as HeadlessSeparator,\n  type SeparatorProps as HeadlessSeparatorProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport { style } from \"../style\" with { type: \"macro\" };\n\n/**\n * The rule's colour weight.\n *\n * NOTE: the design register publishes exactly two neutral rule weights\n * (`--border-subtle` and `--border-default`), so this three-member union no\n * longer maps onto three distinct colours: `strong` is currently an alias for\n * `default` and renders identically to it at every size. It is kept so existing\n * call sites keep compiling; prefer `size` to make a rule read heavier. Giving\n * `strong` its own colour again requires a third rule weight in the app's token\n * layer, which is an owner decision rather than a library one.\n */\nexport type SeparatorVariant = \"default\" | \"subtle\" | \"strong\";\nexport type SeparatorSize = \"sm\" | \"md\" | \"lg\";\ntype SeparatorOrientation = \"horizontal\" | \"vertical\";\n\nexport interface SeparatorProps extends Omit<HeadlessSeparatorProps, \"class\" | \"style\"> {\n  /** The visual style variant. Note that `strong` currently renders as `default`\n   * — see {@link SeparatorVariant}. @default 'default' */\n  variant?: SeparatorVariant;\n  /** The size/thickness of the separator. @default 'md' */\n  size?: SeparatorSize;\n  /** Additional CSS class name. */\n  class?: string;\n}\n\n// A rule drawn as a filled bar, mirroring Divider's S2 approach (a solid\n// `backgroundColor` plus an explicit px thickness rather than a CSS border).\n// Sizes sm/md/lg map to 1/2/4px — the same steps as Divider's S/M/L — and the\n// variants pick one of the register's neutral rule tokens. Routed through the\n// `style()` macro so the CSS ships in the package bundle for installed\n// consumers; the values are baked at build time, so this needs a rebuild of\n// viviana-ui before any of it reaches a browser.\nconst separatorStyles = style<{\n  variant: SeparatorVariant;\n  size: SeparatorSize;\n  orientation: SeparatorOrientation;\n}>({\n  /* The register's two rule weights, reached as a fill because this component paints\n     its rule rather than bordering it. See the `backgroundColor` map in\n     style/spectrum-theme.ts, which publishes exactly `border-subtle` and\n     `border-default` and states there is deliberately no third weight.\n     `strong` therefore resolves to the same rule as `default` — see the note on\n     SeparatorVariant above. */\n  backgroundColor: {\n    variant: {\n      default: \"border-default\",\n      subtle: \"border-subtle\",\n      strong: \"border-default\",\n    },\n  },\n  borderStyle: \"none\",\n  margin: 0,\n  flexShrink: 0,\n  alignSelf: { orientation: { vertical: \"stretch\" } },\n  width: {\n    orientation: {\n      horizontal: \"full\",\n      vertical: { default: \"[2px]\", size: { sm: \"[1px]\", lg: \"[4px]\" } },\n    },\n  },\n  height: {\n    orientation: {\n      horizontal: { default: \"[2px]\", size: { sm: \"[1px]\", lg: \"[4px]\" } },\n      vertical: \"full\",\n    },\n  },\n});\n\n/**\n * A separator is a visual divider between two groups of content,\n * e.g. groups of menu items or sections of a page.\n *\n * @example\n * ```tsx\n * <Separator />\n *\n * // Vertical separator\n * <div class=\"flex items-center gap-4\">\n *   <span>Item 1</span>\n *   <Separator orientation=\"vertical\" />\n *   <span>Item 2</span>\n * </div>\n *\n * // A lighter rule, or a heavier one\n * <Separator variant=\"subtle\" />\n * <Separator size=\"lg\" />\n * ```\n */\nexport function Separator(props: SeparatorProps): JSX.Element {\n  const [local, headlessProps] = splitProps(props, [\"orientation\", \"variant\", \"size\", \"class\"]);\n\n  const orientation = () => local.orientation ?? \"horizontal\";\n  const variant = () => local.variant ?? \"default\";\n  const size = () => local.size ?? \"md\";\n\n  return (\n    <HeadlessSeparator\n      {...headlessProps}\n      orientation={orientation()}\n      class={[\n        separatorStyles({ variant: variant(), size: size(), orientation: orientation() }),\n        local.class,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n    />\n  );\n}\n"],"mappings":";;;;AAuCA,MAAM,kBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDN,SAAgB,UAAU,OAA4B;CACpD,MAAM,CAAC,OAAO,iBAAiB,WAAW,OAAO;EAAC;EAAe;EAAW;EAAQ;CAAA,CAAQ;CAE5F,MAAM,oBAAoB,MAAM,eAAe;CAC/C,MAAM,gBAAgB,MAAM,WAAW;CACvC,MAAM,aAAa,MAAM,QAAQ;CAEjC,OAAA,gBACG,aAAA,WACK,eAAa;EAAA,IACjB,cAAA;GAAA,OAAa,YAAA;EAAA;EAAA,KAAA,WAAA;GAAA,OACN,CACL,gBAAgB;IAAE,SAAS,QAAA;IAAW,MAAM,KAAA;IAAQ,aAAa,YAAA;GAAc,CAAA,GAC/E,MAAM,KAAK,EAEV,OAAO,OAAA,EACP,KAAK,GAAA;EAAA;CAAA,CAAA,CAAA;AAGd"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/separator/index.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-spectrum/s2/src/Divider.tsx\n\n// Port of packages/@react-spectrum/s2/src/Divider.tsx.\n\nimport type { JSX } from \"@solidjs/web\";\nimport {\n  Separator as HeadlessSeparator,\n  type SeparatorProps as HeadlessSeparatorProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\n/**\n * The rule's colour weight.\n *\n * NOTE: the design register publishes exactly two neutral rule weights\n * (`--border-subtle` and `--border-default`), so this three-member union no\n * longer maps onto three distinct colours: `strong` is currently an alias for\n * `default` and renders identically to it at every size. It is kept so existing\n * call sites keep compiling; prefer `size` to make a rule read heavier. Giving\n * `strong` its own colour again requires a third rule weight in the app's token\n * layer, which is an owner decision rather than a library one.\n */\nexport type SeparatorVariant = \"default\" | \"subtle\" | \"strong\";\nexport type SeparatorSize = \"sm\" | \"md\" | \"lg\";\ntype SeparatorOrientation = \"horizontal\" | \"vertical\";\n\nexport interface SeparatorProps extends Omit<HeadlessSeparatorProps, \"class\" | \"style\"> {\n  /** The visual style variant. Note that `strong` currently renders as `default`\n   * — see {@link SeparatorVariant}. @default 'default' */\n  variant?: SeparatorVariant;\n  /** The size/thickness of the separator. @default 'md' */\n  size?: SeparatorSize;\n  /** Additional CSS class name. */\n  class?: string;\n}\n\n// A rule drawn as a filled bar, mirroring Divider's S2 approach (a solid\n// `backgroundColor` plus an explicit px thickness rather than a CSS border).\n// Sizes sm/md/lg map to 1/2/4px — the same steps as Divider's S/M/L — and the\n// variants pick one of the register's neutral rule tokens. Routed through the\n// `style()` macro so the CSS ships in the package bundle for installed\n// consumers; the values are baked at build time, so this needs a rebuild of\n// viviana-ui before any of it reaches a browser.\nconst separatorStyles = style<{\n  variant: SeparatorVariant;\n  size: SeparatorSize;\n  orientation: SeparatorOrientation;\n}>({\n  /* The register's two rule weights, reached as a fill because this component paints\n     its rule rather than bordering it. See the `backgroundColor` map in\n     style/spectrum-theme.ts, which publishes exactly `border-subtle` and\n     `border-default` and states there is deliberately no third weight.\n     `strong` therefore resolves to the same rule as `default` — see the note on\n     SeparatorVariant above. */\n  backgroundColor: {\n    variant: {\n      default: \"border-default\",\n      subtle: \"border-subtle\",\n      strong: \"border-default\",\n    },\n  },\n  borderStyle: \"none\",\n  margin: 0,\n  flexShrink: 0,\n  alignSelf: { orientation: { vertical: \"stretch\" } },\n  width: {\n    orientation: {\n      horizontal: \"full\",\n      vertical: { default: \"[2px]\", size: { sm: \"[1px]\", lg: \"[4px]\" } },\n    },\n  },\n  height: {\n    orientation: {\n      horizontal: { default: \"[2px]\", size: { sm: \"[1px]\", lg: \"[4px]\" } },\n      vertical: \"full\",\n    },\n  },\n});\n\n/**\n * A separator is a visual divider between two groups of content,\n * e.g. groups of menu items or sections of a page.\n *\n * @example\n * ```tsx\n * <Separator />\n *\n * // Vertical separator\n * <div class=\"flex items-center gap-4\">\n *   <span>Item 1</span>\n *   <Separator orientation=\"vertical\" />\n *   <span>Item 2</span>\n * </div>\n *\n * // A lighter rule, or a heavier one\n * <Separator variant=\"subtle\" />\n * <Separator size=\"lg\" />\n * ```\n */\nexport function Separator(props: SeparatorProps): JSX.Element {\n  const [local, headlessProps] = splitProps(props, [\"orientation\", \"variant\", \"size\", \"class\"]);\n\n  const orientation = () => local.orientation ?? \"horizontal\";\n  const variant = () => local.variant ?? \"default\";\n  const size = () => local.size ?? \"md\";\n\n  return (\n    <HeadlessSeparator\n      {...headlessProps}\n      orientation={orientation()}\n      class={[\n        separatorStyles({ variant: variant(), size: size(), orientation: orientation() }),\n        local.class,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAwDA,MAAM,kBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDN,SAAgB,UAAU,OAA4B;CACpD,MAAM,CAAC,OAAO,iBAAiB,WAAW,OAAO;EAAC;EAAe;EAAW;EAAQ;CAAQ,CAAA;CAE5F,MAAM,oBAAoB,MAAM,eAAe;CAC/C,MAAM,gBAAgB,MAAM,WAAW;CACvC,MAAM,aAAa,MAAM,QAAQ;CAEjC,OAAO,gBAAA,aAAA,WAEC,eAFD;EAGH,IAAA,cAAA;GAAa,OAAA,YAAA;EAAA;EACb,IAAA,UAAA;GAAO,OAAA,CACL,gBAAgB;IAAE,SAAS,QAAA;IAAW,MAAM,KAAA;IAAQ,aAAa,YAAA;GAAc,CAAA,GAC/E,MAAM,KACP,CAAA,CACE,OAAO,OAAA,CAAA,CACP,KAAK,GAAA;EAAA;CAAA,CAAA,CAAA;AAGd"}

package/dist/separator/index.jsx

@@ -1,26 +1,41 @@
-import { splitProps } from "solid-js";
+/*
+* Copyright 2024 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Divider.tsx
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { Separator as Separator$1 } from "@proyecto-viviana/solidaria-components";
 //#region src/separator/index.tsx
 const separatorStyles = function anonymous(props) {
 	let rules = " ";
-	if (props.variant === "strong") rules += " gvsWZX151";
-	else if (props.variant === "subtle") rules += " grHHOgb151";
-	else if (props.variant === "default") rules += " gvsWZX151";
-	rules += " _je151";
-	rules += " Jy151";
-	rules += " Gy151";
-	rules += " Iy151";
-	rules += " Hy151";
-	rules += " _va151";
-	if (props.orientation === "vertical") rules += " _df151";
-	if (props.orientation === "vertical") if (props.size === "lg") rules += " ZT4Nfn151";
-	else if (props.size === "sm") rules += " ZceNfn151";
-	else rules += " ZLvNfn151";
-	else if (props.orientation === "horizontal") rules += " Za151";
-	if (props.orientation === "vertical") rules += " Fb151";
-	else if (props.orientation === "horizontal") if (props.size === "lg") rules += " FT4Nfn151";
-	else if (props.size === "sm") rules += " FceNfn151";
-	else rules += " FLvNfn151";
+	if (props.variant === "strong") rules += " gvsWZX17";
+	else if (props.variant === "subtle") rules += " grHHOgb17";
+	else if (props.variant === "default") rules += " gvsWZX17";
+	rules += " _je17";
+	rules += " Jy17";
+	rules += " Gy17";
+	rules += " Iy17";
+	rules += " Hy17";
+	rules += " _va17";
+	if (props.orientation === "vertical") rules += " _df17";
+	if (props.orientation === "vertical") {
+		if (props.size === "lg") rules += " ZT4Nfn17";
+		else if (props.size === "sm") rules += " ZceNfn17";
+		else rules += " ZLvNfn17";
+	} else if (props.orientation === "horizontal") rules += " Za17";
+	if (props.orientation === "vertical") rules += " Fb17";
+	else if (props.orientation === "horizontal") {
+		if (props.size === "lg") rules += " FT4Nfn17";
+		else if (props.size === "sm") rules += " FceNfn17";
+		else rules += " FLvNfn17";
+	}
 	return rules;
 };
 /**

package/dist/separator/index.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"index.jsx","names":[],"sources":["../../src/separator/index.tsx"],"sourcesContent":["import { type JSX, splitProps } from \"solid-js\";\nimport {\n  Separator as HeadlessSeparator,\n  type SeparatorProps as HeadlessSeparatorProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport { style } from \"../style\" with { type: \"macro\" };\n\n/**\n * The rule's colour weight.\n *\n * NOTE: the design register publishes exactly two neutral rule weights\n * (`--border-subtle` and `--border-default`), so this three-member union no\n * longer maps onto three distinct colours: `strong` is currently an alias for\n * `default` and renders identically to it at every size. It is kept so existing\n * call sites keep compiling; prefer `size` to make a rule read heavier. Giving\n * `strong` its own colour again requires a third rule weight in the app's token\n * layer, which is an owner decision rather than a library one.\n */\nexport type SeparatorVariant = \"default\" | \"subtle\" | \"strong\";\nexport type SeparatorSize = \"sm\" | \"md\" | \"lg\";\ntype SeparatorOrientation = \"horizontal\" | \"vertical\";\n\nexport interface SeparatorProps extends Omit<HeadlessSeparatorProps, \"class\" | \"style\"> {\n  /** The visual style variant. Note that `strong` currently renders as `default`\n   * — see {@link SeparatorVariant}. @default 'default' */\n  variant?: SeparatorVariant;\n  /** The size/thickness of the separator. @default 'md' */\n  size?: SeparatorSize;\n  /** Additional CSS class name. */\n  class?: string;\n}\n\n// A rule drawn as a filled bar, mirroring Divider's S2 approach (a solid\n// `backgroundColor` plus an explicit px thickness rather than a CSS border).\n// Sizes sm/md/lg map to 1/2/4px — the same steps as Divider's S/M/L — and the\n// variants pick one of the register's neutral rule tokens. Routed through the\n// `style()` macro so the CSS ships in the package bundle for installed\n// consumers; the values are baked at build time, so this needs a rebuild of\n// viviana-ui before any of it reaches a browser.\nconst separatorStyles = style<{\n  variant: SeparatorVariant;\n  size: SeparatorSize;\n  orientation: SeparatorOrientation;\n}>({\n  /* The register's two rule weights, reached as a fill because this component paints\n     its rule rather than bordering it. See the `backgroundColor` map in\n     style/spectrum-theme.ts, which publishes exactly `border-subtle` and\n     `border-default` and states there is deliberately no third weight.\n     `strong` therefore resolves to the same rule as `default` — see the note on\n     SeparatorVariant above. */\n  backgroundColor: {\n    variant: {\n      default: \"border-default\",\n      subtle: \"border-subtle\",\n      strong: \"border-default\",\n    },\n  },\n  borderStyle: \"none\",\n  margin: 0,\n  flexShrink: 0,\n  alignSelf: { orientation: { vertical: \"stretch\" } },\n  width: {\n    orientation: {\n      horizontal: \"full\",\n      vertical: { default: \"[2px]\", size: { sm: \"[1px]\", lg: \"[4px]\" } },\n    },\n  },\n  height: {\n    orientation: {\n      horizontal: { default: \"[2px]\", size: { sm: \"[1px]\", lg: \"[4px]\" } },\n      vertical: \"full\",\n    },\n  },\n});\n\n/**\n * A separator is a visual divider between two groups of content,\n * e.g. groups of menu items or sections of a page.\n *\n * @example\n * ```tsx\n * <Separator />\n *\n * // Vertical separator\n * <div class=\"flex items-center gap-4\">\n *   <span>Item 1</span>\n *   <Separator orientation=\"vertical\" />\n *   <span>Item 2</span>\n * </div>\n *\n * // A lighter rule, or a heavier one\n * <Separator variant=\"subtle\" />\n * <Separator size=\"lg\" />\n * ```\n */\nexport function Separator(props: SeparatorProps): JSX.Element {\n  const [local, headlessProps] = splitProps(props, [\"orientation\", \"variant\", \"size\", \"class\"]);\n\n  const orientation = () => local.orientation ?? \"horizontal\";\n  const variant = () => local.variant ?? \"default\";\n  const size = () => local.size ?? \"md\";\n\n  return (\n    <HeadlessSeparator\n      {...headlessProps}\n      orientation={orientation()}\n      class={[\n        separatorStyles({ variant: variant(), size: size(), orientation: orientation() }),\n        local.class,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n    />\n  );\n}\n"],"mappings":";;;AA4BA,MAAM,kBAAe,SAAY,UAAC,OAAA;CAChC,IAAM,QAAQ;CAChB,IAAA,MAAA,YAAA,UAAA,SAAA;MAEU,IAAK,MAAM,YAAY,UAC7B,SAAA;MACO,IAAI,MAAM,YAAY,WAC9B,SAAc;CAEd,SAAU;CACV,SAAU;CACb,SAAM;CACJ,SAAS;CACT,SAAM;CACN,SAAW;CACV,IAAA,MAAA,gBAAA,YACK,SAAS;CAEb,IAAC,MAAM,gBAAmB,YACxB,IAAM,MAAC,SAAa,MACd,SAAE;MACT,IAAA,MAAiB,SAAQ,MAC5B,SAAiB;MAEb,SAAU;MAEV,IAAS,MAAM,gBAAS,cACzB,SAAA;CAEH,IAAA,MAAY,gBAAO,YACb,SAAG;MACT,IAAa,MAAA,gBAAA,cACb,IAAU,MAAG,SAAY,MAClB,SAAA;MACM,IAAE,MAAA,SAAA,MACX,SAAa;MAEd,SAAA;CAGD,OAAA;AACJ;;;;;;;;;;;;;;;;;;;;GAoBC,SAAA,UAAA,OAAA;CACG,MAAI,CAAA,OAAQ,iBAAmB,WAAA,OAAA;EAC/B;EACA;EACC;EACH;CACF,CAAA;CACE,MAAO,oBAAO,MAAiB,eAAgB;;CAE/C,MAAM,aAAa,MAAM,QAAO;CAChC,OAAM,CAAA,gBAAsB,eAAoB,aAAA,YAAA,GAAA,OAAA,CAC1C,gBAAa;;EAEZ,MAAA,KAAA;EACJ,aAAA,YAAA;CACG,CAAC,GACH,MAAA,KACF,EAAE,OAAO,OAAA,EAAA,KAAA,GAAA;AACb"}
+{"version":3,"file":"index.jsx","names":[],"sources":["../../src/separator/index.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-spectrum/s2/src/Divider.tsx\n\n// Port of packages/@react-spectrum/s2/src/Divider.tsx.\n\nimport type { JSX } from \"@solidjs/web\";\nimport {\n  Separator as HeadlessSeparator,\n  type SeparatorProps as HeadlessSeparatorProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\n/**\n * The rule's colour weight.\n *\n * NOTE: the design register publishes exactly two neutral rule weights\n * (`--border-subtle` and `--border-default`), so this three-member union no\n * longer maps onto three distinct colours: `strong` is currently an alias for\n * `default` and renders identically to it at every size. It is kept so existing\n * call sites keep compiling; prefer `size` to make a rule read heavier. Giving\n * `strong` its own colour again requires a third rule weight in the app's token\n * layer, which is an owner decision rather than a library one.\n */\nexport type SeparatorVariant = \"default\" | \"subtle\" | \"strong\";\nexport type SeparatorSize = \"sm\" | \"md\" | \"lg\";\ntype SeparatorOrientation = \"horizontal\" | \"vertical\";\n\nexport interface SeparatorProps extends Omit<HeadlessSeparatorProps, \"class\" | \"style\"> {\n  /** The visual style variant. Note that `strong` currently renders as `default`\n   * — see {@link SeparatorVariant}. @default 'default' */\n  variant?: SeparatorVariant;\n  /** The size/thickness of the separator. @default 'md' */\n  size?: SeparatorSize;\n  /** Additional CSS class name. */\n  class?: string;\n}\n\n// A rule drawn as a filled bar, mirroring Divider's S2 approach (a solid\n// `backgroundColor` plus an explicit px thickness rather than a CSS border).\n// Sizes sm/md/lg map to 1/2/4px — the same steps as Divider's S/M/L — and the\n// variants pick one of the register's neutral rule tokens. Routed through the\n// `style()` macro so the CSS ships in the package bundle for installed\n// consumers; the values are baked at build time, so this needs a rebuild of\n// viviana-ui before any of it reaches a browser.\nconst separatorStyles = style<{\n  variant: SeparatorVariant;\n  size: SeparatorSize;\n  orientation: SeparatorOrientation;\n}>({\n  /* The register's two rule weights, reached as a fill because this component paints\n     its rule rather than bordering it. See the `backgroundColor` map in\n     style/spectrum-theme.ts, which publishes exactly `border-subtle` and\n     `border-default` and states there is deliberately no third weight.\n     `strong` therefore resolves to the same rule as `default` — see the note on\n     SeparatorVariant above. */\n  backgroundColor: {\n    variant: {\n      default: \"border-default\",\n      subtle: \"border-subtle\",\n      strong: \"border-default\",\n    },\n  },\n  borderStyle: \"none\",\n  margin: 0,\n  flexShrink: 0,\n  alignSelf: { orientation: { vertical: \"stretch\" } },\n  width: {\n    orientation: {\n      horizontal: \"full\",\n      vertical: { default: \"[2px]\", size: { sm: \"[1px]\", lg: \"[4px]\" } },\n    },\n  },\n  height: {\n    orientation: {\n      horizontal: { default: \"[2px]\", size: { sm: \"[1px]\", lg: \"[4px]\" } },\n      vertical: \"full\",\n    },\n  },\n});\n\n/**\n * A separator is a visual divider between two groups of content,\n * e.g. groups of menu items or sections of a page.\n *\n * @example\n * ```tsx\n * <Separator />\n *\n * // Vertical separator\n * <div class=\"flex items-center gap-4\">\n *   <span>Item 1</span>\n *   <Separator orientation=\"vertical\" />\n *   <span>Item 2</span>\n * </div>\n *\n * // A lighter rule, or a heavier one\n * <Separator variant=\"subtle\" />\n * <Separator size=\"lg\" />\n * ```\n */\nexport function Separator(props: SeparatorProps): JSX.Element {\n  const [local, headlessProps] = splitProps(props, [\"orientation\", \"variant\", \"size\", \"class\"]);\n\n  const orientation = () => local.orientation ?? \"horizontal\";\n  const variant = () => local.variant ?? \"default\";\n  const size = () => local.size ?? \"md\";\n\n  return (\n    <HeadlessSeparator\n      {...headlessProps}\n      orientation={orientation()}\n      class={[\n        separatorStyles({ variant: variant(), size: size(), orientation: orientation() }),\n        local.class,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAwDA,MAAM,kBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDN,SAAgB,UAAU,OAA4B;CACpD,MAAM,CAAC,OAAO,iBAAiB,WAAW,OAAO;EAAC;EAAe;EAAW;EAAQ;CAAQ,CAAA;CAE5F,MAAM,oBAAoB,MAAM,eAAe;CAC/C,MAAM,gBAAgB,MAAM,WAAW;CACvC,MAAM,aAAa,MAAM,QAAQ;CAEjC,OAAO,CACJ,gBACK,eACJ,aAAa,YAAA,GACb,OAAO,CACL,gBAAgB;EAAE,SAAS,QAAA;EAAW,MAAM,KAAA;EAAQ,aAAa,YAAA;CAAc,CAAA,GAC/E,MAAM,KACP,CAAA,CACE,OAAO,OAAA,CAAA,CACP,KAAK,GAAA;AAGd"}

package/dist/shared-element/index.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { type SharedElementProps as HeadlessSharedElementProps, type SharedElementTransitionProps as HeadlessSharedElementTransitionProps } from "@proyecto-viviana/solidaria-components";
 export interface SharedElementProps extends Omit<HeadlessSharedElementProps, "class" | "style"> {
     class?: string;

package/dist/shared-element/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/shared-element/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AACpC,OAAO,EAGL,KAAK,kBAAkB,IAAI,0BAA0B,EAErD,KAAK,4BAA4B,IAAI,oCAAoC,EAC1E,MAAM,wCAAwC,CAAC;AAKhD,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,0BAA0B,EAAE,OAAO,GAAG,OAAO,CAAC;IAC7F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;CAC3B;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAKpE;AAED,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,oCAAoC,GAAG,GAAG,CAAC,OAAO,CAEhG;AAED,MAAM,MAAM,4BAA4B,GAAG,oCAAoC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/shared-element/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAGL,KAAK,kBAAkB,IAAI,0BAA0B,EAErD,KAAK,4BAA4B,IAAI,oCAAoC,EAC1E,MAAM,wCAAwC,CAAC;AAKhD,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,0BAA0B,EAAE,OAAO,GAAG,OAAO,CAAC;IAC7F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;CAC3B;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAKpE;AAED,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,oCAAoC,GAAG,GAAG,CAAC,OAAO,CAEhG;AAED,MAAM,MAAM,4BAA4B,GAAG,oCAAoC,CAAC"}

package/dist/skeleton/index.d.ts

@@ -1,4 +1,5 @@
-import { type Accessor, type JSX } from "solid-js";
+import type { Accessor } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { StyleString } from "../style";
 export type SkeletonContextValue = boolean | null | Accessor<boolean | null | undefined>;
 export interface SkeletonProps {

package/dist/skeleton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/skeleton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,QAAQ,EACb,KAAK,GAAG,EAET,MAAM,UAAU,CAAC;AAGlB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAK5C,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,IAAI,GAAG,QAAQ,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;AAEzF,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,eAAe,kDAA4C,CAAC;AAMzE,wBAAgB,gBAAgB,IAAI,QAAQ,CAAC,OAAO,CAAC,CAGpD;AAED,wBAAgB,aAAa,IAAI,QAAQ,CAAC,OAAO,CAAC,CAEjD;AAED,eAAO,MAAM,YAAY,QAWxB,CAAC;AAYF,KAAK,aAAa,CAAC,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;AAyBxC,wBAAgB,mBAAmB,CACjC,WAAW,EAAE,aAAa,CAAC,OAAO,CAAC,GAClC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CA4BnC;AAED,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,GAC9B,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAiBnC;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAI1D;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAe1E;AAED,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAC/B,WAAW,EAAE,QAAQ,CAAC,GAAG,CAAC,aAAa,GAAG,SAAS,CAAC,GACnD,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC,CAalE;AAED,wBAAgB,eAAe,CAAC,MAAM,EAAE,aAAa,CAAC,WAAW,GAAG,SAAS,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAIhG;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE;IAAE,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CA2B7E;AAID,eAAO,MAAM,kBAAkB,6CAU7B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/skeleton/index.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAIxC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAK5C,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,IAAI,GAAG,QAAQ,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;AAEzF,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,eAAe,kDAA4C,CAAC;AAMzE,wBAAgB,gBAAgB,IAAI,QAAQ,CAAC,OAAO,CAAC,CAGpD;AAED,wBAAgB,aAAa,IAAI,QAAQ,CAAC,OAAO,CAAC,CAEjD;AAUD,eAAO,MAAM,YAAY,QA2BxB,CAAC;AAYF,KAAK,aAAa,CAAC,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;AA6BxC,wBAAgB,mBAAmB,CACjC,WAAW,EAAE,aAAa,CAAC,OAAO,CAAC,GAClC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAkCnC;AAED,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,GAC9B,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAsBnC;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAI1D;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAe1E;AAED,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAC/B,WAAW,EAAE,QAAQ,CAAC,GAAG,CAAC,aAAa,GAAG,SAAS,CAAC,GACnD,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC,CAalE;AAED,wBAAgB,eAAe,CAAC,MAAM,EAAE,aAAa,CAAC,WAAW,GAAG,SAAS,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAIhG;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE;IAAE,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CA2B7E;AAID,eAAO,MAAM,kBAAkB,6CAU7B,CAAC"}

package/dist/skeleton/index.js

@@ -1,9 +1,23 @@
+/*
+* Copyright 2024 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Skeleton.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/SkeletonCollection.tsx
 import { mergeStyles } from "../style/runtime.js";
-import { createComponent, getNextElement, insert, memo, template, use } from "solid-js/web";
+import { createComponent, getNextElement, insert, memo, ref, scope, template } from "@solidjs/web";
 import { createContext, createEffect, createMemo, createSignal, onCleanup, useContext } from "solid-js";
 import { createLeafComponent } from "@proyecto-viviana/solidaria-components";
 //#region src/skeleton/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<span class="_8QL4Vd pw151 _ma151 oa151 na151 ka151 ja151">`), _tmpl$2 = /*#__PURE__*/ template(`<span class=_8QL4Vd>`);
+var _tmpl$ = /* @__PURE__ */ template(`<span class="jXgWEe pw17 _ma17 oa17 na17 ka17 ja17">`);
+var _tmpl$2 = /* @__PURE__ */ template(`<span class=jXgWEe>`);
 const SkeletonContext = createContext(null);
 function readSkeletonContext(value) {
 	return typeof value === "function" ? value() : value;
@@ -15,8 +29,8 @@ function createIsSkeleton() {
 function useIsSkeleton() {
 	return createIsSkeleton();
 }
-const loadingStyle = "_8QL4Vd";
-const skeletonIconStyles = " oa151 na151 ka151 ja151";
+const loadingStyle = "jXgWEe";
+const skeletonIconStyles = " oa17 na17 ka17 ja17";
 function access(value) {
 	return typeof value === "function" ? value() : value;
 }
@@ -35,8 +49,11 @@ function useLoadingAnimation(isAnimating) {
 	const [element, setElement] = createSignal(null);
 	let animation;
 	createEffect(() => {
-		const target = element();
-		const shouldAnimate = access(isAnimating) && !reduceMotion();
+		return {
+			target: element(),
+			shouldAnimate: access(isAnimating) && !reduceMotion()
+		};
+	}, ({ target, shouldAnimate }) => {
 		if (target && shouldAnimate && !animation && typeof target.animate === "function") {
 			animation = target.animate([{ backgroundPosition: "100%" }, { backgroundPosition: "0%" }], {
 				duration: 2e3,
@@ -44,7 +61,9 @@ function useLoadingAnimation(isAnimating) {
 				easing: "ease-in-out"
 			});
 			animation.startTime = 0;
-		} else if ((!target || !shouldAnimate) && animation) {
+			return;
+		}
+		if ((!target || !shouldAnimate) && animation) {
 			animation.cancel();
 			animation = void 0;
 		}
@@ -58,16 +77,20 @@ function useLoadingAnimation(isAnimating) {
 function useInertAttribute(isInert) {
 	const [element, setElement] = createSignal(null);
 	createEffect(() => {
-		const target = element();
+		return {
+			target: element(),
+			inert: access(isInert)
+		};
+	}, ({ target, inert }) => {
 		if (!target) return;
-		if (access(isInert)) target.setAttribute("inert", "true");
+		if (inert) target.setAttribute("inert", "true");
 		else target.removeAttribute("inert");
 	});
 	return setElement;
 }
 function Skeleton(props) {
 	const isLoading = createMemo(() => props.isLoading);
-	return createComponent(SkeletonContext.Provider, {
+	return createComponent(SkeletonContext, {
 		value: isLoading,
 		get children() {
 			return props.children;
@@ -77,15 +100,17 @@ function Skeleton(props) {
 function SkeletonText(props) {
 	const loadingAnimationRef = useLoadingAnimation(true);
 	const inertRef = useInertAttribute(true);
-	return (() => {
-		var _el$ = getNextElement(_tmpl$);
-		use((element) => {
+	var _el$ = getNextElement(_tmpl$);
+	ref(() => {
+		return (element) => {
 			loadingAnimationRef(element);
 			inertRef(element);
-		}, _el$);
-		insert(_el$, () => props.children);
-		return _el$;
-	})();
+		};
+	}, _el$);
+	insert(_el$, scope(() => {
+		return props.children;
+	}));
+	return _el$;
 }
 function useSkeletonText(children, unsafeStyle) {
 	const isSkeleton = createIsSkeleton();
@@ -106,16 +131,22 @@ function SkeletonWrapper(props) {
 	const animationRef = useLoadingAnimation(() => isLoading() || false);
 	const inertRef = useInertAttribute(() => isLoading() || false);
 	if (isLoading() == null) return props.children;
-	return createComponent(SkeletonContext.Provider, {
+	return createComponent(SkeletonContext, {
 		value: null,
 		get children() {
-			return memo(() => !!isLoading())() ? (() => {
+			return memo(() => {
+				return !!isLoading();
+			})() ? (() => {
 				var _el$2 = getNextElement(_tmpl$2);
-				use((element) => {
-					animationRef(element);
-					inertRef(element);
+				ref(() => {
+					return (element) => {
+						animationRef(element);
+						inertRef(element);
+					};
 				}, _el$2);
-				insert(_el$2, () => props.children);
+				insert(_el$2, scope(() => {
+					return props.children;
+				}));
 				return _el$2;
 			})() : props.children;
 		}

package/dist/skeleton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/skeleton/index.tsx"],"sourcesContent":["import {\n  createContext,\n  createEffect,\n  createMemo,\n  createSignal,\n  onCleanup,\n  type Accessor,\n  type JSX,\n  useContext,\n} from \"solid-js\";\nimport { createLeafComponent } from \"@proyecto-viviana/solidaria-components\";\nimport { css } from \"../style/style-macro\" with { type: \"macro\" };\nimport type { StyleString } from \"../style\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport { color } from \"../style/spectrum-theme\" with { type: \"macro\" };\nimport { mergeStyles } from \"../style/runtime\";\n\nexport type SkeletonContextValue = boolean | null | Accessor<boolean | null | undefined>;\n\nexport interface SkeletonProps {\n  children: JSX.Element;\n  isLoading: boolean;\n}\n\nexport interface SkeletonCollectionProps {\n  children: () => JSX.Element;\n}\n\nexport const SkeletonContext = createContext<SkeletonContextValue>(null);\n\nfunction readSkeletonContext(value: SkeletonContextValue): boolean | null | undefined {\n  return typeof value === \"function\" ? value() : value;\n}\n\nexport function createIsSkeleton(): Accessor<boolean> {\n  const context = useContext(SkeletonContext);\n  return () => readSkeletonContext(context) || false;\n}\n\nexport function useIsSkeleton(): Accessor<boolean> {\n  return createIsSkeleton();\n}\n\nexport const loadingStyle = css(\n  `\n  background-image: linear-gradient(to right, ${color(\"gray-100\")} 33%, light-dark(${color(\n    \"gray-25\",\n  )}, ${color(\"gray-300\")}), ${color(\"gray-100\")} 66%);\n  background-size: 300%;\n  * {\n    visibility: hidden;\n  }\n`,\n  \"L\",\n);\n\nconst skeletonTextStyles = style({\n  color: \"transparent\",\n  boxDecorationBreak: \"clone\",\n  borderRadius: \"sm\",\n});\n\nconst skeletonIconStyles = style({\n  borderRadius: \"sm\",\n});\n\ntype MaybeAccessor<T> = T | Accessor<T>;\n\nfunction access<T>(value: MaybeAccessor<T>): T {\n  return typeof value === \"function\" ? (value as Accessor<T>)() : value;\n}\n\nfunction createPrefersReducedMotion(): Accessor<boolean> {\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") {\n    return () => false;\n  }\n\n  const mediaQuery = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n  if (!mediaQuery) {\n    return () => false;\n  }\n\n  const [matches, setMatches] = createSignal(mediaQuery.matches);\n  const handleChange = (event: MediaQueryListEvent) => setMatches(event.matches);\n\n  mediaQuery.addEventListener?.(\"change\", handleChange);\n  onCleanup(() => mediaQuery.removeEventListener?.(\"change\", handleChange));\n\n  return matches;\n}\n\nexport function useLoadingAnimation(\n  isAnimating: MaybeAccessor<boolean>,\n): (element: Element | null) => void {\n  const reduceMotion = createPrefersReducedMotion();\n  const [element, setElement] = createSignal<Element | null>(null);\n  let animation: Animation | undefined;\n\n  createEffect(() => {\n    const target = element();\n    const shouldAnimate = access(isAnimating) && !reduceMotion();\n\n    if (target && shouldAnimate && !animation && typeof target.animate === \"function\") {\n      animation = target.animate([{ backgroundPosition: \"100%\" }, { backgroundPosition: \"0%\" }], {\n        duration: 2000,\n        iterations: Infinity,\n        easing: \"ease-in-out\",\n      });\n      animation.startTime = 0;\n    } else if ((!target || !shouldAnimate) && animation) {\n      animation.cancel();\n      animation = undefined;\n    }\n  });\n\n  onCleanup(() => {\n    animation?.cancel();\n    animation = undefined;\n  });\n\n  return setElement;\n}\n\nexport function useInertAttribute(\n  isInert: MaybeAccessor<boolean>,\n): (element: Element | null) => void {\n  const [element, setElement] = createSignal<Element | null>(null);\n\n  createEffect(() => {\n    const target = element();\n    if (!target) {\n      return;\n    }\n\n    if (access(isInert)) {\n      target.setAttribute(\"inert\", \"true\");\n    } else {\n      target.removeAttribute(\"inert\");\n    }\n  });\n\n  return setElement;\n}\n\nexport function Skeleton(props: SkeletonProps): JSX.Element {\n  const isLoading = createMemo(() => props.isLoading);\n\n  return <SkeletonContext.Provider value={isLoading}>{props.children}</SkeletonContext.Provider>;\n}\n\nexport function SkeletonText(props: { children: JSX.Element }): JSX.Element {\n  const loadingAnimationRef = useLoadingAnimation(true);\n  const inertRef = useInertAttribute(true);\n\n  return (\n    <span\n      ref={(element) => {\n        loadingAnimationRef(element);\n        inertRef(element);\n      }}\n      class={`${loadingStyle} ${skeletonTextStyles}`}\n    >\n      {props.children}\n    </span>\n  );\n}\n\nexport function useSkeletonText(\n  children: Accessor<JSX.Element>,\n  unsafeStyle: Accessor<JSX.CSSProperties | undefined>,\n): [Accessor<JSX.Element>, Accessor<JSX.CSSProperties | undefined>] {\n  const isSkeleton = createIsSkeleton();\n\n  return [\n    () => (isSkeleton() ? <SkeletonText>{children()}</SkeletonText> : children()),\n    () =>\n      isSkeleton()\n        ? {\n            ...unsafeStyle(),\n            \"-webkit-text-fill-color\": \"transparent\",\n          }\n        : unsafeStyle(),\n  ];\n}\n\nexport function useSkeletonIcon(styles: MaybeAccessor<StyleString | undefined>): Accessor<string> {\n  const isSkeleton = createIsSkeleton();\n  return () =>\n    mergeStyles(isSkeleton() ? skeletonIconStyles : undefined, access(styles) ?? undefined);\n}\n\nexport function SkeletonWrapper(props: { children: JSX.Element }): JSX.Element {\n  const context = useContext(SkeletonContext);\n  const isLoading = () => readSkeletonContext(context);\n  const animationRef = useLoadingAnimation(() => isLoading() || false);\n  const inertRef = useInertAttribute(() => isLoading() || false);\n\n  if (isLoading() == null) {\n    return props.children;\n  }\n\n  return (\n    <SkeletonContext.Provider value={null}>\n      {isLoading() ? (\n        <span\n          ref={(element) => {\n            animationRef(element);\n            inertRef(element);\n          }}\n          class={loadingStyle}\n        >\n          {props.children}\n        </span>\n      ) : (\n        props.children\n      )}\n    </SkeletonContext.Provider>\n  );\n}\n\nconst skeletonCollectionCache = new WeakMap<object, JSX.Element>();\n\nexport const SkeletonCollection = createLeafComponent<SkeletonCollectionProps>((props, node) => {\n  const cacheKey = node ?? props;\n  let cached = skeletonCollectionCache.get(cacheKey as object);\n\n  if (!cached) {\n    cached = <Skeleton isLoading>{props.children()}</Skeleton>;\n    skeletonCollectionCache.set(cacheKey as object, cached);\n  }\n\n  return cached;\n});\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/skeleton/index.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-spectrum/s2/src/Skeleton.tsx\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/SkeletonCollection.tsx\n\n// Port of packages/@react-spectrum/s2/src/Skeleton.tsx.\n// Port of packages/@react-spectrum/s2/src/SkeletonCollection.tsx.\nimport {\n  createContext,\n  createEffect,\n  createMemo,\n  createSignal,\n  onCleanup,\n  useContext,\n} from \"solid-js\";\nimport type { Accessor } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { createLeafComponent } from \"@proyecto-viviana/solidaria-components\";\nimport { css } from \"../style/style-macro\" with { type: \"macro\" };\nimport { skSweep } from \"../style/motion\" with { type: \"macro\" };\nimport type { StyleString } from \"../style\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport { color } from \"../style/spectrum-theme\" with { type: \"macro\" };\nimport { mergeStyles } from \"../style/runtime\";\n\nexport type SkeletonContextValue = boolean | null | Accessor<boolean | null | undefined>;\n\nexport interface SkeletonProps {\n  children: JSX.Element;\n  isLoading: boolean;\n}\n\nexport interface SkeletonCollectionProps {\n  children: () => JSX.Element;\n}\n\nexport const SkeletonContext = createContext<SkeletonContextValue>(null);\n\nfunction readSkeletonContext(value: SkeletonContextValue): boolean | null | undefined {\n  return typeof value === \"function\" ? value() : value;\n}\n\nexport function createIsSkeleton(): Accessor<boolean> {\n  const context = useContext(SkeletonContext);\n  return () => readSkeletonContext(context) || false;\n}\n\nexport function useIsSkeleton(): Accessor<boolean> {\n  return createIsSkeleton();\n}\n\n/* The register's loading state is a \"dither shimmer\", not a grey gradient sweep:\n * a diagonal light band crossing the block, seen only through an 8px Bayer mask,\n * so it reads as pixels lighting up in the same grammar as the theme wipe. Port\n * of the handoff's `.sk` (glasselated.css). The sheen colour is a token because\n * it has to invert per scheme; the sweep is a CSS animation on the pseudo-element\n * (a pseudo cannot be reached by the Web Animations calls this module exposes),\n * gated by the reduced-motion media condition rather than a runtime check so a\n * server render and its hydration agree. */\nexport const loadingStyle = css(\n  `\n  position: relative;\n  overflow: hidden;\n  background: var(--surface-inset);\n  * {\n    visibility: hidden;\n  }\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    background: linear-gradient(100deg, transparent 34%, var(--sk-sheen) 50%, transparent 66%);\n    background-size: 240% 100%;\n    animation: ${skSweep()} 1.5s linear infinite;\n    mask-image: url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='8'%3E%3Cg%20fill='%23fff'%3E%3Crect%20width='4'%20height='4'/%3E%3Crect%20x='4'%20y='4'%20width='4'%20height='4'%20fill-opacity='0.85'/%3E%3Crect%20x='4'%20width='4'%20height='4'%20fill-opacity='0.35'/%3E%3Crect%20y='4'%20width='4'%20height='4'%20fill-opacity='0.55'/%3E%3C/g%3E%3C/svg%3E\");\n    mask-size: 8px 8px;\n    mask-repeat: repeat;\n  }\n  @media (prefers-reduced-motion: reduce) {\n    &::after {\n      animation: none;\n    }\n  }\n`,\n  \"L\",\n);\n\nconst skeletonTextStyles = style({\n  color: \"transparent\",\n  boxDecorationBreak: \"clone\",\n  borderRadius: \"sm\",\n});\n\nconst skeletonIconStyles = style({\n  borderRadius: \"sm\",\n});\n\ntype MaybeAccessor<T> = T | Accessor<T>;\n\nfunction access<T>(value: MaybeAccessor<T>): T {\n  return typeof value === \"function\" ? (value as Accessor<T>)() : value;\n}\n\nfunction createPrefersReducedMotion(): Accessor<boolean> {\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") {\n    return () => false;\n  }\n\n  const mediaQuery = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n  if (!mediaQuery) {\n    return () => false;\n  }\n\n  const [matches, setMatches] = createSignal(mediaQuery.matches);\n  const handleChange = (event: MediaQueryListEvent) => setMatches(event.matches);\n\n  mediaQuery.addEventListener?.(\"change\", handleChange);\n  onCleanup(() => mediaQuery.removeEventListener?.(\"change\", handleChange));\n\n  return matches;\n}\n\n/* Kept for the components that already hold this ref (Image, Icon) and for any\n * consumer animating its own gradient. The skeleton's own shimmer moved into\n * `loadingStyle`'s pseudo-element when the register re-valued it, and a pseudo\n * cannot be driven from here. */\nexport function useLoadingAnimation(\n  isAnimating: MaybeAccessor<boolean>,\n): (element: Element | null) => void {\n  const reduceMotion = createPrefersReducedMotion();\n  const [element, setElement] = createSignal<Element | null>(null);\n  let animation: Animation | undefined;\n\n  createEffect(\n    () => {\n      const target = element();\n      const shouldAnimate = access(isAnimating) && !reduceMotion();\n      return { target, shouldAnimate };\n    },\n    ({ target, shouldAnimate }) => {\n      if (target && shouldAnimate && !animation && typeof target.animate === \"function\") {\n        animation = target.animate([{ backgroundPosition: \"100%\" }, { backgroundPosition: \"0%\" }], {\n          duration: 2000,\n          iterations: Infinity,\n          easing: \"ease-in-out\",\n        });\n        animation.startTime = 0;\n        return;\n      }\n      if ((!target || !shouldAnimate) && animation) {\n        animation.cancel();\n        animation = undefined;\n      }\n    },\n  );\n\n  onCleanup(() => {\n    animation?.cancel();\n    animation = undefined;\n  });\n\n  return setElement;\n}\n\nexport function useInertAttribute(\n  isInert: MaybeAccessor<boolean>,\n): (element: Element | null) => void {\n  const [element, setElement] = createSignal<Element | null>(null);\n\n  createEffect(\n    () => {\n      const target = element();\n      const inert = access(isInert);\n      return { target, inert };\n    },\n    ({ target, inert }) => {\n      if (!target) {\n        return;\n      }\n      if (inert) {\n        target.setAttribute(\"inert\", \"true\");\n      } else {\n        target.removeAttribute(\"inert\");\n      }\n    },\n  );\n\n  return setElement;\n}\n\nexport function Skeleton(props: SkeletonProps): JSX.Element {\n  const isLoading = createMemo(() => props.isLoading);\n\n  return <SkeletonContext value={isLoading}>{props.children}</SkeletonContext>;\n}\n\nexport function SkeletonText(props: { children: JSX.Element }): JSX.Element {\n  const loadingAnimationRef = useLoadingAnimation(true);\n  const inertRef = useInertAttribute(true);\n\n  return (\n    <span\n      ref={(element) => {\n        loadingAnimationRef(element);\n        inertRef(element);\n      }}\n      class={`${loadingStyle} ${skeletonTextStyles}`}\n    >\n      {props.children}\n    </span>\n  );\n}\n\nexport function useSkeletonText(\n  children: Accessor<JSX.Element>,\n  unsafeStyle: Accessor<JSX.CSSProperties | undefined>,\n): [Accessor<JSX.Element>, Accessor<JSX.CSSProperties | undefined>] {\n  const isSkeleton = createIsSkeleton();\n\n  return [\n    () => (isSkeleton() ? <SkeletonText>{children()}</SkeletonText> : children()),\n    () =>\n      isSkeleton()\n        ? {\n            ...unsafeStyle(),\n            \"-webkit-text-fill-color\": \"transparent\",\n          }\n        : unsafeStyle(),\n  ];\n}\n\nexport function useSkeletonIcon(styles: MaybeAccessor<StyleString | undefined>): Accessor<string> {\n  const isSkeleton = createIsSkeleton();\n  return () =>\n    mergeStyles(isSkeleton() ? skeletonIconStyles : undefined, access(styles) ?? undefined);\n}\n\nexport function SkeletonWrapper(props: { children: JSX.Element }): JSX.Element {\n  const context = useContext(SkeletonContext);\n  const isLoading = () => readSkeletonContext(context);\n  const animationRef = useLoadingAnimation(() => isLoading() || false);\n  const inertRef = useInertAttribute(() => isLoading() || false);\n\n  if (isLoading() == null) {\n    return props.children;\n  }\n\n  return (\n    <SkeletonContext value={null}>\n      {isLoading() ? (\n        <span\n          ref={(element) => {\n            animationRef(element);\n            inertRef(element);\n          }}\n          class={loadingStyle}\n        >\n          {props.children}\n        </span>\n      ) : (\n        props.children\n      )}\n    </SkeletonContext>\n  );\n}\n\nconst skeletonCollectionCache = new WeakMap<object, JSX.Element>();\n\nexport const SkeletonCollection = createLeafComponent<SkeletonCollectionProps>((props, node) => {\n  const cacheKey = node ?? props;\n  let cached = skeletonCollectionCache.get(cacheKey as object);\n\n  if (!cached) {\n    cached = <Skeleton isLoading>{props.children()}</Skeleton>;\n    skeletonCollectionCache.set(cacheKey as object, cached);\n  }\n\n  return cached;\n});\n"],"mappings":"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"}