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

package/dist/searchfield/index.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"index.jsx","names":[],"sources":["../../src/searchfield/index.tsx"],"sourcesContent":["// @ts-nocheck\nimport {\n  type JSX,\n  createContext,\n  createSignal,\n  createUniqueId,\n  mergeProps,\n  splitProps,\n  Show,\n  useContext,\n} from \"solid-js\";\nimport {\n  SearchField as HeadlessSearchField,\n  SearchFieldLabel as HeadlessSearchFieldLabel,\n  SearchFieldInput as HeadlessSearchFieldInput,\n  SearchFieldClearButton as HeadlessSearchFieldClearButton,\n  SearchFieldContext as HeadlessSearchFieldContext,\n  type SearchFieldProps as HeadlessSearchFieldProps,\n  type SearchFieldRenderProps,\n  type SearchFieldClearButtonRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport type { StyleString } from \"../style\";\nimport { baseColor, focusRing, fontRelative, style } from \"../style\" with { type: \"macro\" };\nimport { css } from \"../style/style-macro\" with { type: \"macro\" };\nimport { mergeStyles } from \"../style/runtime\";\nimport {\n  control,\n  controlFont,\n  controlSize,\n  field,\n  fieldInput,\n  fieldLabel,\n  getAllowedOverrides,\n} from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport { CenterBaseline } from \"../icon/center-baseline\";\nimport { FieldPrefix, PrefixInputProvider } from \"../field/prefix\";\nimport { FieldSuffix } from \"../field/suffix\";\nimport AlertTriangleIcon from \"../icon/s2wf-icons/AlertTriangleIcon\";\nimport SearchIcon from \"../icon/s2wf-icons/SearchIcon\";\nimport CrossIcon from \"../icon/ui-icons/Cross\";\nimport AsteriskIcon from \"../icon/ui-icons/Asterisk\";\nimport { useProviderProps } from \"../provider\";\nimport { useFormProps, useIsInForm } from \"../form\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n  type SpectrumContextValue,\n} from \"../button/spectrum-context\";\n\nexport type SearchFieldSize = \"S\" | \"M\" | \"L\" | \"XL\" | \"sm\" | \"md\" | \"lg\";\ntype S2SearchFieldSize = \"S\" | \"M\" | \"L\" | \"XL\";\nexport type SearchFieldVariant = \"outline\" | \"filled\";\nexport type SearchFieldLabelPosition = \"top\" | \"side\";\nexport type SearchFieldLabelAlign = \"start\" | \"end\";\nexport type SearchFieldNecessityIndicator = \"icon\" | \"label\";\n\nexport interface SearchFieldProps extends Omit<\n  HeadlessSearchFieldProps,\n  \"class\" | \"style\" | \"children\" | \"label\" | \"slot\" | \"ref\"\n> {\n  /** The size of the search field. */\n  size?: SearchFieldSize;\n  /** Legacy visual variant. S2 SearchFields do not expose visual variants. */\n  variant?: SearchFieldVariant;\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  /** Label text for the input. */\n  label?: JSX.Element;\n  /** Description text shown below the input. */\n  description?: JSX.Element;\n  /** Error message shown when invalid. */\n  errorMessage?: JSX.Element;\n  /** Position of the label relative to the input. */\n  labelPosition?: SearchFieldLabelPosition;\n  /** Text alignment for side labels. */\n  labelAlign?: SearchFieldLabelAlign;\n  /** Whether required fields show an icon or text label. */\n  necessityIndicator?: SearchFieldNecessityIndicator;\n  /** A contextual help element to place next to the label. */\n  contextualHelp?: JSX.Element;\n  /**\n   * An icon or text rendered before the input in place of the built-in search\n   * magnifier, e.g. the register's `/` slash-command glyph.\n   */\n  prefix?: JSX.Element;\n  /** An icon or text rendered after the input, e.g. a key hint. */\n  suffix?: JSX.Element;\n  /** Slot name when used in a Spectrum context. */\n  slot?: string | null;\n  /** Ref for the search field root element. */\n  ref?: RefLike<HTMLDivElement>;\n}\n\ninterface SearchFieldStyleProps extends SearchFieldRenderProps {\n  size?: S2SearchFieldSize;\n  labelPosition?: SearchFieldLabelPosition;\n  labelAlign?: SearchFieldLabelAlign;\n  isFocusWithin?: boolean;\n  isStaticColor?: boolean;\n  isInForm?: boolean;\n  isQuiet?: boolean;\n}\n\ninterface ClearButtonStyleProps extends SearchFieldClearButtonRenderProps {\n  size?: S2SearchFieldSize;\n  isFocusVisible?: boolean;\n  isStaticColor?: boolean;\n}\n\nexport const SearchFieldContext = createContext<SpectrumContextValue<SearchFieldProps>>(null);\n\nconst hideNativeSearchCancelButton = css(\n  \"&::-webkit-search-cancel-button { display: none }\",\n) as StyleString;\n\nconst searchFieldRoot = style<SearchFieldStyleProps>(\n  {\n    ...field(),\n    \"--iconMargin\": {\n      type: \"marginTop\",\n      value: fontRelative(-2),\n    },\n    color: {\n      default: baseColor(\"neutral\"),\n      isDisabled: {\n        default: \"disabled\",\n        forcedColors: \"GrayText\",\n      },\n    },\n  },\n  getAllowedOverrides(),\n);\n\nconst searchFieldLabelWrapper = style<SearchFieldStyleProps>({\n  gridArea: \"label\",\n  display: \"inline\",\n  textAlign: {\n    labelAlign: {\n      start: \"start\",\n      end: \"end\",\n    },\n  },\n  paddingBottom: {\n    labelPosition: {\n      top: \"--field-gap\",\n    },\n  },\n  contain: {\n    labelPosition: {\n      top: \"inline-size\",\n    },\n    isQuiet: \"none\",\n  },\n});\n\nconst searchFieldLabel = style<SearchFieldStyleProps>({\n  ...fieldLabel(),\n});\n\nconst searchFieldGroup = style<SearchFieldStyleProps>({\n  ...focusRing(),\n  ...control({ shape: \"default\", register: \"matte\" }),\n  ...fieldInput(),\n  /* No borderRadius here on purpose. `control({ register: \"matte\" })` above already\n   * sets `borderRadius: \"default\"` (8px) via its non-pill branch, and `fieldInput()`\n   * emits no radius, so the spread survives. The `full` that used to sit here made\n   * SearchField the only matte field drawn as a pill — textfield/index.tsx,\n   * textfield/TextArea.tsx and numberfield/index.tsx all spread the same\n   * `control({ shape: \"default\", register: \"matte\" })` and declare no radius of their\n   * own. The `full` on `clearButton` below is a different object and stays: that one\n   * is a round icon button. */\n  transition: \"default\",\n  borderColor: {\n    default: \"well-border\",\n    forcedColors: \"ButtonBorder\",\n    isInvalid: {\n      default: baseColor(\"negative\"),\n      forcedColors: \"Mark\",\n    },\n    isFocusWithin: {\n      default: \"gray-900\",\n      isInvalid: \"negative-1000\",\n      forcedColors: \"Highlight\",\n    },\n    isDisabled: {\n      default: \"disabled\",\n      forcedColors: \"GrayText\",\n    },\n  },\n  backgroundColor: {\n    default: \"well\",\n    forcedColors: \"Field\",\n  },\n  color: {\n    default: baseColor(\"neutral\"),\n    forcedColors: \"ButtonText\",\n    isDisabled: {\n      default: \"disabled\",\n      forcedColors: \"GrayText\",\n    },\n  },\n  cursor: {\n    default: \"text\",\n    isDisabled: \"default\",\n  },\n});\n\n/* End side only. `control({ register: \"matte\" })` already sets `paddingX:\n * \"edge-to-text\"`, so dropping the old `paddingStart: \"pill\"` lets the start inset\n * fall back in line with the other matte fields; zeroing just the end keeps the\n * clear button flush with the well edge. That is the same shape NumberField gives\n * its stepper — numberfield/index.tsx spells `paddingStart: \"edge-to-text\"` with\n * `paddingEnd` defaulting to 0. */\nconst searchFieldGroupEndPadding = style({\n  paddingEnd: 0,\n});\n\nconst searchIconWrapper = style({\n  flexShrink: 0,\n  marginEnd: \"text-to-visual\",\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n});\n\nconst searchIcon = style<SearchFieldStyleProps>({\n  size: fontRelative(20),\n  marginStart: \"--iconMargin\",\n});\n\nconst searchFieldInput = style({\n  padding: 0,\n  backgroundColor: \"transparent\",\n  color: {\n    default: \"inherit\",\n    \"::placeholder\": {\n      default: \"gray-600\",\n      forcedColors: \"GrayText\",\n    },\n  },\n  fontFamily: \"inherit\",\n  fontSize: \"inherit\",\n  fontWeight: \"inherit\",\n  flexGrow: 1,\n  flexShrink: 1,\n  minWidth: 0,\n  width: \"full\",\n  outlineStyle: \"none\",\n  borderStyle: \"none\",\n  truncate: true,\n});\n\nconst clearButton = style<ClearButtonStyleProps>({\n  ...focusRing(),\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  height: \"full\",\n  width: controlSize(),\n  flexShrink: 0,\n  borderRadius: \"full\",\n  borderStyle: \"none\",\n  backgroundColor: \"transparent\",\n  boxSizing: \"border-box\",\n  padding: 0,\n  outlineOffset: -4,\n  outlineColor: {\n    default: focusRing().outlineColor,\n    isStaticColor: \"white\",\n  },\n  color: \"inherit\",\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n});\n\nconst helpTextStyles = style<SearchFieldStyleProps>({\n  gridArea: \"helptext\",\n  display: \"flex\",\n  alignItems: \"baseline\",\n  gap: \"text-to-visual\",\n  font: controlFont(),\n  color: {\n    default: \"neutral-subdued\",\n    isInvalid: {\n      default: \"negative\",\n      forcedColors: \"Mark\",\n    },\n    isDisabled: {\n      default: \"disabled\",\n      forcedColors: \"GrayText\",\n    },\n  },\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n  contain: \"inline-size\",\n  paddingTop: \"--field-gap\",\n  cursor: {\n    default: \"text\",\n    isDisabled: \"default\",\n  },\n});\n\nconst fieldErrorIcon = style({\n  size: fontRelative(20),\n  marginStart: \"text-to-visual\",\n  marginEnd: fontRelative(-2),\n  flexShrink: 0,\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: {\n      default: \"negative\",\n      forcedColors: \"Mark\",\n    },\n  },\n});\n\nconst requiredIcon = style({\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n});\n\nconst noWrap = style({\n  whiteSpace: \"nowrap\",\n});\n\n// Byte-faithful to upstream Field.tsx HelpText: the description renders a RAC\n// `<Text slot=\"description\">` (a `<span>`), NOT a `<p>` (whose UA `margin` the\n// port previously had to zero out in `helpTextStyles`). The `slot` mirrors RAC's\n// Text; the id/aria wiring is read from the headless SearchField context.\nfunction SearchFieldDescription(props: {\n  class?: string;\n  children?: JSX.Element;\n}): JSX.Element | null {\n  const context = useContext(HeadlessSearchFieldContext);\n  if (!context?.descriptionProps) return null;\n  const descriptionProps = () => {\n    const { ref: _ref, ...rest } = context.descriptionProps as Record<string, unknown>;\n    return rest;\n  };\n  return (\n    <span {...descriptionProps()} slot=\"description\" class={props.class}>\n      {props.children}\n    </span>\n  );\n}\n\n// Upstream renders the invalid message through a RAC `<FieldError>`, which is a\n// `<Text slot=\"errorMessage\">` (a `<span>`), not a `<p>`.\nfunction SearchFieldError(props: { class?: string; children?: JSX.Element }): JSX.Element | null {\n  const context = useContext(HeadlessSearchFieldContext);\n  if (!context?.errorMessageProps) return null;\n  const errorMessageProps = () => {\n    const { ref: _ref, ...rest } = context.errorMessageProps as Record<string, unknown>;\n    return rest;\n  };\n  return (\n    <span {...errorMessageProps()} slot=\"errorMessage\" class={props.class}>\n      {props.children}\n    </span>\n  );\n}\n\nfunction normalizeSearchFieldSize(size: SearchFieldSize | undefined): S2SearchFieldSize {\n  switch (size) {\n    case \"sm\":\n      return \"S\";\n    case \"md\":\n      return \"M\";\n    case \"lg\":\n      return \"L\";\n    case \"S\":\n    case \"M\":\n    case \"L\":\n    case \"XL\":\n      return size;\n    default:\n      return \"M\";\n  }\n}\n\nfunction focusFieldInput(event: Event & { currentTarget: HTMLDivElement }) {\n  const target = event.target as Element | null;\n\n  if (target?.closest(\"button,input,textarea,[role='button']\")) {\n    return;\n  }\n\n  event.preventDefault();\n  event.currentTarget.querySelector<HTMLElement>(\"input, textarea\")?.focus();\n}\n\nfunction requiredIconStyle(size: S2SearchFieldSize): JSX.CSSProperties {\n  const pixelSize = size === \"L\" || size === \"XL\" ? 10 : 8;\n  return {\n    width: `${pixelSize}px`,\n    height: `${pixelSize}px`,\n  };\n}\n\nfunction clearIconStyle(size: S2SearchFieldSize): JSX.CSSProperties {\n  const pixelSize = size === \"XL\" ? 12 : size === \"L\" ? 10 : 8;\n  return {\n    width: `${pixelSize}px`,\n    height: `${pixelSize}px`,\n  };\n}\n\nexport function SearchField(props: SearchFieldProps): JSX.Element {\n  const isInForm = useIsInForm();\n  const providerProps = useProviderProps(useFormProps(props));\n  const contextProps = getSlottedContextProps(useContext(SearchFieldContext), props.slot);\n  const defaultProps: Partial<SearchFieldProps> = {\n    labelPosition: \"top\",\n    labelAlign: \"start\",\n    necessityIndicator: \"icon\",\n  };\n  const mergedProps = mergeProps(defaultProps, providerProps, contextProps ?? {}, props);\n  const [local, headlessProps] = splitProps(mergedProps, [\n    \"size\",\n    \"variant\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"label\",\n    \"description\",\n    \"errorMessage\",\n    \"labelPosition\",\n    \"labelAlign\",\n    \"necessityIndicator\",\n    \"contextualHelp\",\n    \"prefix\",\n    \"suffix\",\n    \"slot\",\n    \"ref\",\n  ]);\n  const [isFocusWithin, setIsFocusWithin] = createSignal(false);\n\n  const prefixId = createUniqueId();\n  const suffixId = createUniqueId();\n  // Space-separated adornment ids appended to the input's `aria-labelledby`,\n  // visual order (prefix before suffix). Read live by PrefixInputProvider.\n  const adornmentIds = () =>\n    [local.prefix ? prefixId : null, local.suffix ? suffixId : null].filter(Boolean).join(\" \");\n\n  const size = () => normalizeSearchFieldSize(local.size);\n  const labelPosition = () => local.labelPosition ?? \"top\";\n  const labelAlign = () => local.labelAlign ?? \"start\";\n  const necessityIndicator = () => local.necessityIndicator ?? \"icon\";\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const assignRootRef = mergeContextRefs(\n    (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,\n    props.ref,\n  );\n\n  // Upstream S2 SearchField.tsx invokes the root `style()(...)` with ONLY\n  // `{size, labelPosition, isInForm}` (lines 117-124) — it does NOT pass\n  // `isDisabled`, so the root's `color.isDisabled: 'disabled'` branch never\n  // activates and the root stays `baseColor('neutral')` even when disabled.\n  // (The render-prop `isDisabled` is threaded DOWN to FieldLabel/FieldGroup,\n  // not back into the root's own style call.) Spreading `...renderProps` here\n  // would light up that branch and diverge the root color (D1). Keep parity:\n  // pass only the same three style props upstream does. `renderProps` stays a\n  // param so the signature matches AriaSearchField's className callback shape.\n  const rootClassName = (_renderProps: SearchFieldRenderProps) =>\n    [\n      contextProps?.UNSAFE_className,\n      props.UNSAFE_className,\n      props.class,\n      searchFieldRoot(\n        {\n          size: size(),\n          labelPosition: labelPosition(),\n          isInForm,\n        },\n        mergedStyles(),\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  const labelWrapperClass = () =>\n    searchFieldLabelWrapper({\n      size: size(),\n      labelPosition: labelPosition(),\n      labelAlign: labelAlign(),\n    });\n\n  const labelClass = (renderProps: SearchFieldRenderProps) =>\n    searchFieldLabel({\n      ...renderProps,\n      size: size(),\n      labelPosition: labelPosition(),\n      isStaticColor: false,\n    });\n\n  const groupClass = (renderProps: SearchFieldRenderProps) =>\n    mergeStyles(\n      searchFieldGroup({\n        ...renderProps,\n        size: size(),\n        isFocusWithin: isFocusWithin(),\n      }),\n      searchFieldGroupEndPadding,\n    );\n\n  const inputClass = () => [searchFieldInput, hideNativeSearchCancelButton].join(\" \");\n\n  const clearButtonClass = (renderProps: SearchFieldClearButtonRenderProps) =>\n    clearButton({\n      ...renderProps,\n      size: size(),\n      isStaticColor: false,\n    });\n\n  const helpClass = (renderProps: SearchFieldRenderProps, isInvalid: boolean) =>\n    helpTextStyles({\n      ...renderProps,\n      size: size(),\n      isInvalid,\n    });\n\n  return (\n    <HeadlessSearchField\n      {...headlessProps}\n      label={local.label}\n      description={local.description}\n      errorMessage={local.errorMessage}\n      ref={(element) => assignRootRef(element)}\n      slot={local.slot ?? undefined}\n      class={rootClassName}\n      style={mergedUnsafeStyle()}\n      data-size={size()}\n      children={(renderProps: SearchFieldRenderProps) => (\n        <>\n          <Show when={local.label}>\n            <div class={labelWrapperClass()}>\n              <HeadlessSearchFieldLabel class={labelClass(renderProps)}>\n                {local.label}\n                <Show when={renderProps.isRequired || necessityIndicator() === \"label\"}>\n                  <span class={noWrap}>\n                    &nbsp;\n                    <Show\n                      when={necessityIndicator() === \"icon\"}\n                      fallback={\n                        <span aria-hidden={renderProps.isRequired ? true : undefined}>\n                          {renderProps.isRequired ? \"(required)\" : \"(optional)\"}\n                        </span>\n                      }\n                    >\n                      <AsteriskIcon\n                        size={size() === \"S\" ? \"M\" : size()}\n                        styles={requiredIcon}\n                        style={requiredIconStyle(size())}\n                        aria-hidden=\"true\"\n                      />\n                    </Show>\n                  </span>\n                </Show>\n              </HeadlessSearchFieldLabel>\n              <Show when={local.contextualHelp}>\n                <span data-slot=\"contextualHelp\">{local.contextualHelp}</span>\n              </Show>\n            </div>\n          </Show>\n\n          <div\n            // Mirrors S2's FieldGroup, which renders RAC <Group> as the field\n            // shell around the icon, input, and clear button. This group IS\n            // role=\"group\" (unlike TextField's, which is role=\"presentation\"):\n            // RAC's SearchField seeds GroupContext with only {isInvalid,\n            // isDisabled} — NO role — (react-aria-components SearchField.mjs), so\n            // the inner <Group> falls back to its default role ?? 'group'.\n            // Verified against the rendered React AX tree (D6). The group is\n            // intentionally unnamed — the searchbox itself carries the label.\n            role=\"group\"\n            class={groupClass(renderProps)}\n            onPointerDown={(event) => {\n              if (event.pointerType === \"mouse\") {\n                focusFieldInput(event);\n              }\n            }}\n            onTouchEnd={focusFieldInput}\n            onFocusIn={() => setIsFocusWithin(true)}\n            onFocusOut={(event) => {\n              if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {\n                setIsFocusWithin(false);\n              }\n            }}\n            data-focused={isFocusWithin() ? \"true\" : undefined}\n            data-disabled={renderProps.isDisabled ? \"true\" : undefined}\n            data-invalid={renderProps.isInvalid ? \"true\" : undefined}\n          >\n            <Show\n              when={local.prefix}\n              fallback={\n                <CenterBaseline slot=\"icon\" styles={searchIconWrapper}>\n                  <SearchIcon styles={searchIcon} />\n                </CenterBaseline>\n              }\n            >\n              <FieldPrefix id={prefixId}>{local.prefix}</FieldPrefix>\n            </Show>\n            <Show\n              when={local.prefix || local.suffix}\n              fallback={<HeadlessSearchFieldInput class={inputClass()} />}\n            >\n              <PrefixInputProvider context={HeadlessSearchFieldContext} prefixId={adornmentIds()}>\n                <HeadlessSearchFieldInput class={inputClass()} />\n              </PrefixInputProvider>\n            </Show>\n            <Show when={local.suffix}>\n              <FieldSuffix id={suffixId}>{local.suffix}</FieldSuffix>\n            </Show>\n            <Show when={!renderProps.isReadOnly}>\n              <HeadlessSearchFieldClearButton class={clearButtonClass}>\n                <CrossIcon size={size()} style={clearIconStyle(size())} />\n              </HeadlessSearchFieldClearButton>\n            </Show>\n          </div>\n\n          <Show when={local.description && !renderProps.isInvalid}>\n            <SearchFieldDescription class={helpClass(renderProps, false)}>\n              {local.description}\n            </SearchFieldDescription>\n          </Show>\n\n          <Show when={local.errorMessage && renderProps.isInvalid}>\n            <SearchFieldError class={helpClass(renderProps, true)}>\n              <CenterBaseline>\n                <AlertTriangleIcon aria-hidden=\"true\" styles={fieldErrorIcon} />\n              </CenterBaseline>\n              <span>{local.errorMessage}</span>\n            </SearchFieldError>\n          </Show>\n        </>\n      )}\n    />\n  );\n}\n\nexport type { SearchFieldState } from \"@proyecto-viviana/solid-stately\";\n"],"mappings":"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"}
+{"version":3,"file":"index.jsx","names":[],"sources":["../../src/searchfield/index.tsx"],"sourcesContent":["// @ts-nocheck\n\n/*\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/SearchField.tsx\n\n// Port of packages/@react-spectrum/s2/src/SearchField.tsx.\n\nimport { children, createContext, createSignal, createUniqueId, Show, useContext } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n  SearchField as HeadlessSearchField,\n  SearchFieldLabel as HeadlessSearchFieldLabel,\n  SearchFieldInput as HeadlessSearchFieldInput,\n  SearchFieldClearButton as HeadlessSearchFieldClearButton,\n  SearchFieldContext as HeadlessSearchFieldContext,\n  type SearchFieldProps as HeadlessSearchFieldProps,\n  type SearchFieldRenderProps,\n  type SearchFieldClearButtonRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport type { StyleString } from \"../style\";\nimport { baseColor, focusRing, fontRelative, style } from \"../style\" with { type: \"macro\" };\nimport { css } from \"../style/style-macro\" with { type: \"macro\" };\nimport { mergeStyles } from \"../style/runtime\";\nimport {\n  control,\n  controlSize,\n  field,\n  fieldInput,\n  fieldLabel,\n  getAllowedOverrides,\n} from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport { CenterBaseline } from \"../icon/center-baseline\";\nimport { FieldPrefix, PrefixInputProvider } from \"../field/prefix\";\nimport { FieldSuffix } from \"../field/suffix\";\nimport { Keyboard } from \"../text/Keyboard\";\nimport CrossIcon from \"../icon/ui-icons/Cross\";\nimport AsteriskIcon from \"../icon/ui-icons/Asterisk\";\nimport { mergeProps, createStringFormatter } from \"@proyecto-viviana/solidaria\";\nimport { s2IntlStrings } from \"../intl\";\nimport { useProviderProps } from \"../provider\";\nimport { useFormProps, useIsInForm } from \"../form\";\nimport { HelpText } from \"../form/HelpText\";\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 SearchFieldSize = \"S\" | \"M\" | \"L\" | \"XL\" | \"sm\" | \"md\" | \"lg\";\ntype S2SearchFieldSize = \"S\" | \"M\" | \"L\" | \"XL\";\nexport type SearchFieldVariant = \"outline\" | \"filled\";\nexport type SearchFieldLabelPosition = \"top\" | \"side\";\nexport type SearchFieldLabelAlign = \"start\" | \"end\";\nexport type SearchFieldNecessityIndicator = \"icon\" | \"label\";\n\nexport interface SearchFieldProps extends Omit<\n  HeadlessSearchFieldProps,\n  \"class\" | \"style\" | \"children\" | \"label\" | \"slot\" | \"ref\"\n> {\n  /** The size of the search field. */\n  size?: SearchFieldSize;\n  /** Legacy visual variant. S2 SearchFields do not expose visual variants. */\n  variant?: SearchFieldVariant;\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  /** Label text for the input. */\n  label?: JSX.Element;\n  /** Description text shown below the input. */\n  description?: JSX.Element;\n  /** Error message shown when invalid. */\n  errorMessage?: JSX.Element;\n  /** Position of the label relative to the input. */\n  labelPosition?: SearchFieldLabelPosition;\n  /** Text alignment for side labels. */\n  labelAlign?: SearchFieldLabelAlign;\n  /** Whether required fields show an icon or text label. */\n  necessityIndicator?: SearchFieldNecessityIndicator;\n  /** A contextual help element to place next to the label. */\n  contextualHelp?: JSX.Element;\n  /**\n   * An icon or text rendered before the input in place of the built-in search\n   * magnifier, e.g. the register's `/` slash-command glyph.\n   */\n  prefix?: JSX.Element;\n  /** An icon or text rendered after the input, e.g. a key hint. */\n  suffix?: JSX.Element;\n  /**\n   * A keyboard shortcut hint drawn as a key chip at the end of the field, e.g. `\"⌘K\"`.\n   *\n   * Local addition — no S2 counterpart. The register parks the shortcut that focuses\n   * the field INSIDE the well (TerminalGlassLab.tsx:157), where a sibling element cannot\n   * reach; S2 has no slot for it.\n   *\n   * Deliberately NOT routed through `suffix`. A suffix is part of the field's accessible\n   * name — its id is appended to the input's `aria-labelledby`, which is right for a\n   * unit (\"kg\") and wrong for a shortcut: a screen-reader user would hear\n   * \"Search lessons ⌘K\" as the field's name. The chip is `aria-hidden` decoration; the\n   * shortcut itself is announced only if the app describes it (`aria-describedby`).\n   */\n  shortcut?: string;\n  /** Slot name when used in a Spectrum context. */\n  slot?: string | null;\n  /** Ref for the search field root element. */\n  ref?: RefLike<HTMLDivElement>;\n}\n\ninterface SearchFieldStyleProps extends SearchFieldRenderProps {\n  size?: S2SearchFieldSize;\n  labelPosition?: SearchFieldLabelPosition;\n  labelAlign?: SearchFieldLabelAlign;\n  isFocusWithin?: boolean;\n  isStaticColor?: boolean;\n  isInForm?: boolean;\n  isQuiet?: boolean;\n}\n\ninterface ClearButtonStyleProps extends SearchFieldClearButtonRenderProps {\n  size?: S2SearchFieldSize;\n  isFocusVisible?: boolean;\n  isStaticColor?: boolean;\n}\n\nexport const SearchFieldContext = createContext<SpectrumContextValue<SearchFieldProps>>(null);\n\nconst hideNativeSearchCancelButton = css(\n  \"&::-webkit-search-cancel-button { display: none }\",\n) as StyleString;\n\nconst searchFieldRoot = style<SearchFieldStyleProps>(\n  {\n    ...field(),\n    \"--iconMargin\": {\n      type: \"marginTop\",\n      value: fontRelative(-2),\n    },\n    color: {\n      default: baseColor(\"neutral\"),\n      isDisabled: {\n        default: \"disabled\",\n        forcedColors: \"GrayText\",\n      },\n    },\n  },\n  getAllowedOverrides(),\n);\n\nconst searchFieldLabelWrapper = style<SearchFieldStyleProps>({\n  gridArea: \"label\",\n  display: \"inline\",\n  textAlign: {\n    labelAlign: {\n      start: \"start\",\n      end: \"end\",\n    },\n  },\n  paddingBottom: {\n    labelPosition: {\n      top: \"--field-gap\",\n    },\n  },\n  contain: {\n    labelPosition: {\n      top: \"inline-size\",\n    },\n    isQuiet: \"none\",\n  },\n});\n\nconst searchFieldLabel = style<SearchFieldStyleProps>({\n  ...fieldLabel(),\n});\n\nconst searchFieldGroup = style<SearchFieldStyleProps>({\n  ...focusRing(),\n  ...control({ shape: \"default\", register: \"matte\" }),\n  ...fieldInput(),\n  /* No borderRadius here on purpose. `control({ register: \"matte\" })` above already\n   * sets `borderRadius: \"default\"` (8px) via its non-pill branch, and `fieldInput()`\n   * emits no radius, so the spread survives. The `full` that used to sit here made\n   * SearchField the only matte field drawn as a pill — textfield/index.tsx,\n   * textfield/TextArea.tsx and numberfield/index.tsx all spread the same\n   * `control({ shape: \"default\", register: \"matte\" })` and declare no radius of their\n   * own. The `full` on `clearButton` below is a different object and stays: that one\n   * is a round icon button. */\n  transition: \"default\",\n  borderColor: {\n    default: \"well-border\",\n    forcedColors: \"ButtonBorder\",\n    isInvalid: {\n      default: baseColor(\"negative\"),\n      forcedColors: \"Mark\",\n    },\n    isFocusWithin: {\n      /* Viviana UI v2 (Glasselated): cyan/blue is the register's STRUCTURE colour, so a\n       * focused well rims in `--border-focus` instead of S2's near-black `gray-900`.\n       * Recolour only — the ring, its width and every other state stay as they were. */\n      default: \"[var(--border-focus)]\",\n      isInvalid: \"negative-1000\",\n      forcedColors: \"Highlight\",\n    },\n    isDisabled: {\n      default: \"disabled\",\n      forcedColors: \"GrayText\",\n    },\n  },\n  backgroundColor: {\n    default: \"well\",\n    forcedColors: \"Field\",\n  },\n  color: {\n    default: baseColor(\"neutral\"),\n    forcedColors: \"ButtonText\",\n    isDisabled: {\n      default: \"disabled\",\n      forcedColors: \"GrayText\",\n    },\n  },\n  cursor: {\n    default: \"text\",\n    isDisabled: \"default\",\n  },\n});\n\n/* End side only. `control({ register: \"matte\" })` already sets `paddingX:\n * \"edge-to-text\"`, so dropping the old `paddingStart: \"pill\"` lets the start inset\n * fall back in line with the other matte fields; zeroing just the end keeps the\n * clear button flush with the well edge. That is the same shape NumberField gives\n * its stepper — numberfield/index.tsx spells `paddingStart: \"edge-to-text\"` with\n * `paddingEnd` defaulting to 0. */\nconst searchFieldGroupEndPadding = style({\n  paddingEnd: 0,\n});\n\n/* Viviana UI v2 (Glasselated): the register's search well opens with a `/` slash-command\n * prompt in `--terminal-prompt`, not with a magnifier (TerminalGlassLab.tsx:157). The\n * glyph is the register's whole search affordance — the same `/` that focuses the field —\n * so it is the BUILT-IN adornment here rather than something every call site re-passes\n * through `prefix`. Apps that want the Spectrum magnifier back still pass it as `prefix`;\n * either way the adornment is decorative and stays out of the accessible name. */\nconst searchPromptWrapper = style({\n  flexShrink: 0,\n  marginEnd: \"text-to-visual\",\n  color: \"[var(--terminal-prompt)]\",\n});\n\n/* The shortcut chip is pushed to the end of the well by `margin-inline-start: auto`,\n * exactly as the register draws it (TerminalGlassLab.tsx:157 `margin-left: auto`), so it\n * stays flush against the clear button however wide the input grows. */\nconst shortcutChip = style({\n  display: \"flex\",\n  marginStart: \"auto\",\n  flexShrink: 0,\n});\n\nconst searchFieldInput = style({\n  padding: 0,\n  backgroundColor: \"transparent\",\n  color: {\n    default: \"inherit\",\n    \"::placeholder\": {\n      /* Register dim ink: placeholder copy is the well's quietest text. */\n      default: \"[var(--terminal-dim)]\",\n      forcedColors: \"GrayText\",\n    },\n  },\n  fontFamily: \"inherit\",\n  fontSize: \"inherit\",\n  fontWeight: \"inherit\",\n  flexGrow: 1,\n  flexShrink: 1,\n  minWidth: 0,\n  width: \"full\",\n  outlineStyle: \"none\",\n  borderStyle: \"none\",\n  truncate: true,\n});\n\nconst clearButton = style<ClearButtonStyleProps>({\n  ...focusRing(),\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  height: \"full\",\n  width: controlSize(),\n  flexShrink: 0,\n  borderRadius: \"full\",\n  borderStyle: \"none\",\n  backgroundColor: \"transparent\",\n  boxSizing: \"border-box\",\n  padding: 0,\n  outlineOffset: -4,\n  outlineColor: {\n    default: focusRing().outlineColor,\n    isStaticColor: \"white\",\n  },\n  color: \"inherit\",\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n});\n\nconst requiredIcon = style({\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n});\n\nconst noWrap = style({\n  whiteSpace: \"nowrap\",\n});\n\nfunction normalizeSearchFieldSize(size: SearchFieldSize | undefined): S2SearchFieldSize {\n  switch (size) {\n    case \"sm\":\n      return \"S\";\n    case \"md\":\n      return \"M\";\n    case \"lg\":\n      return \"L\";\n    case \"S\":\n    case \"M\":\n    case \"L\":\n    case \"XL\":\n      return size;\n    default:\n      return \"M\";\n  }\n}\n\nfunction focusFieldInput(event: Event & { currentTarget: HTMLDivElement }) {\n  const target = event.target as Element | null;\n\n  if (target?.closest(\"button,input,textarea,[role='button']\")) {\n    return;\n  }\n\n  event.preventDefault();\n  event.currentTarget.querySelector<HTMLElement>(\"input, textarea\")?.focus();\n}\n\nfunction requiredIconStyle(size: S2SearchFieldSize): JSX.CSSProperties {\n  const pixelSize = size === \"L\" || size === \"XL\" ? 10 : 8;\n  return {\n    width: `${pixelSize}px`,\n    height: `${pixelSize}px`,\n  };\n}\n\nfunction clearIconStyle(size: S2SearchFieldSize): JSX.CSSProperties {\n  const pixelSize = size === \"XL\" ? 12 : size === \"L\" ? 10 : 8;\n  return {\n    width: `${pixelSize}px`,\n    height: `${pixelSize}px`,\n  };\n}\n\nexport function SearchField(props: SearchFieldProps): JSX.Element {\n  const isInForm = useIsInForm();\n  const providerProps = useProviderProps(useFormProps(props));\n  const [flags] = splitProps(providerProps, [\n    \"isQuiet\",\n    \"isEmphasized\",\n    \"isDisabled\",\n    \"isRequired\",\n    \"isReadOnly\",\n    \"validationState\",\n  ]);\n  const contextProps = getSlottedContextProps(useContext(SearchFieldContext), props.slot);\n  const defaultProps: Partial<SearchFieldProps> = {\n    labelPosition: \"top\",\n    labelAlign: \"start\",\n    necessityIndicator: \"icon\",\n  };\n  const mergedProps = mergeProps(defaultProps, flags, contextProps ?? {}, props);\n  const [local, headlessProps] = splitProps(mergedProps, [\n    \"size\",\n    \"variant\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"label\",\n    \"description\",\n    \"errorMessage\",\n    \"labelPosition\",\n    \"labelAlign\",\n    \"necessityIndicator\",\n    \"contextualHelp\",\n    \"prefix\",\n    \"suffix\",\n    \"shortcut\",\n    \"slot\",\n    \"ref\",\n  ]);\n  const [isFocusWithin, setIsFocusWithin] = createSignal(false);\n\n  const prefixId = createUniqueId();\n  const suffixId = createUniqueId();\n  // Resolved once, under this owner: see the same block in textfield/index.tsx.\n  // `adornmentIds` is re-read from inside the input's ownerless ref callback, so\n  // a raw `local.prefix`/`local.suffix` read there re-runs a component-valued\n  // adornment with no owner and throws (#545).\n  const prefixNode = children(() => local.prefix);\n  const suffixNode = children(() => local.suffix);\n  // Space-separated adornment ids appended to the input's `aria-labelledby`,\n  // visual order (prefix before suffix). Read live by PrefixInputProvider.\n  const adornmentIds = () =>\n    [prefixNode() ? prefixId : null, suffixNode() ? suffixId : null].filter(Boolean).join(\" \");\n\n  const size = () => normalizeSearchFieldSize(local.size);\n  const labelPosition = () => local.labelPosition ?? \"top\";\n  const labelAlign = () => local.labelAlign ?? \"start\";\n  const necessityIndicator = () => local.necessityIndicator ?? \"icon\";\n  const stringFormatter = createStringFormatter(s2IntlStrings, \"@react-spectrum/s2\");\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const assignRootRef = mergeContextRefs(\n    (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,\n    props.ref,\n  );\n\n  // Upstream S2 SearchField.tsx invokes the root `style()(...)` with ONLY\n  // `{size, labelPosition, isInForm}` (lines 117-124) — it does NOT pass\n  // `isDisabled`, so the root's `color.isDisabled: 'disabled'` branch never\n  // activates and the root stays `baseColor('neutral')` even when disabled.\n  // (The render-prop `isDisabled` is threaded DOWN to FieldLabel/FieldGroup,\n  // not back into the root's own style call.) Spreading `...renderProps` here\n  // would light up that branch and diverge the root color (D1). Keep parity:\n  // pass only the same three style props upstream does. `renderProps` stays a\n  // param so the signature matches AriaSearchField's className callback shape.\n  const rootClassName = (_renderProps: SearchFieldRenderProps) =>\n    [\n      contextProps?.UNSAFE_className,\n      props.UNSAFE_className,\n      props.class,\n      searchFieldRoot(\n        {\n          size: size(),\n          labelPosition: labelPosition(),\n          isInForm,\n        },\n        mergedStyles(),\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  const labelWrapperClass = () =>\n    searchFieldLabelWrapper({\n      size: size(),\n      labelPosition: labelPosition(),\n      labelAlign: labelAlign(),\n    });\n\n  const labelClass = (renderProps: SearchFieldRenderProps) =>\n    searchFieldLabel({\n      ...renderProps,\n      size: size(),\n      labelPosition: labelPosition(),\n      isStaticColor: false,\n    });\n\n  const groupClass = (renderProps: SearchFieldRenderProps) =>\n    mergeStyles(\n      searchFieldGroup({\n        ...renderProps,\n        size: size(),\n        isFocusWithin: isFocusWithin(),\n      }),\n      searchFieldGroupEndPadding,\n    );\n\n  const inputClass = () => [searchFieldInput, hideNativeSearchCancelButton].join(\" \");\n\n  const clearButtonClass = (renderProps: SearchFieldClearButtonRenderProps) =>\n    clearButton({\n      ...renderProps,\n      size: size(),\n      isStaticColor: false,\n    });\n\n  return (\n    <HeadlessSearchField\n      {...headlessProps}\n      label={local.label}\n      description={local.description}\n      errorMessage={local.errorMessage}\n      ref={(element) => assignRootRef(element)}\n      slot={local.slot ?? undefined}\n      class={rootClassName}\n      style={mergedUnsafeStyle()}\n      data-size={size()}\n      children={(renderProps: SearchFieldRenderProps) => (\n        <>\n          <Show when={local.label}>\n            <div class={labelWrapperClass()}>\n              <HeadlessSearchFieldLabel class={labelClass(renderProps)}>\n                {local.label}\n                <Show when={renderProps.isRequired || necessityIndicator() === \"label\"}>\n                  <span class={noWrap}>\n                    &nbsp;\n                    <Show\n                      when={necessityIndicator() === \"icon\"}\n                      fallback={\n                        <span aria-hidden={renderProps.isRequired ? true : undefined}>\n                          {stringFormatter().format(\n                            renderProps.isRequired ? \"label.(required)\" : \"label.(optional)\",\n                          )}\n                        </span>\n                      }\n                    >\n                      <AsteriskIcon\n                        size={size() === \"S\" ? \"M\" : size()}\n                        styles={requiredIcon}\n                        style={requiredIconStyle(size())}\n                        aria-hidden=\"true\"\n                      />\n                    </Show>\n                  </span>\n                </Show>\n              </HeadlessSearchFieldLabel>\n              <Show when={local.contextualHelp}>\n                <span data-slot=\"contextualHelp\">{local.contextualHelp}</span>\n              </Show>\n            </div>\n          </Show>\n\n          <div\n            // Mirrors S2's FieldGroup, which renders RAC <Group> as the field\n            // shell around the icon, input, and clear button. This group IS\n            // role=\"group\" (unlike TextField's, which is role=\"presentation\"):\n            // RAC's SearchField seeds GroupContext with only {isInvalid,\n            // isDisabled} — NO role — (react-aria-components SearchField.mjs), so\n            // the inner <Group> falls back to its default role ?? 'group'.\n            // Verified against the rendered React AX tree (D6). The group is\n            // intentionally unnamed — the searchbox itself carries the label.\n            role=\"group\"\n            class={groupClass(renderProps)}\n            onPointerDown={(event) => {\n              if (event.pointerType === \"mouse\") {\n                focusFieldInput(event);\n              }\n            }}\n            onTouchEnd={focusFieldInput}\n            onFocusIn={() => setIsFocusWithin(true)}\n            onFocusOut={(event) => {\n              if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {\n                setIsFocusWithin(false);\n              }\n            }}\n            data-focused={isFocusWithin() ? \"true\" : undefined}\n            data-disabled={renderProps.isDisabled ? \"true\" : undefined}\n            data-invalid={renderProps.isInvalid ? \"true\" : undefined}\n          >\n            <Show\n              when={prefixNode()}\n              fallback={\n                <CenterBaseline slot=\"icon\" styles={searchPromptWrapper}>\n                  <span aria-hidden=\"true\">/</span>\n                </CenterBaseline>\n              }\n            >\n              <FieldPrefix id={prefixId}>{prefixNode()}</FieldPrefix>\n            </Show>\n            <Show\n              when={prefixNode() || suffixNode()}\n              fallback={<HeadlessSearchFieldInput class={inputClass()} />}\n            >\n              <PrefixInputProvider context={HeadlessSearchFieldContext} prefixId={adornmentIds()}>\n                <HeadlessSearchFieldInput class={inputClass()} />\n              </PrefixInputProvider>\n            </Show>\n            <Show when={suffixNode()}>\n              <FieldSuffix id={suffixId}>{suffixNode()}</FieldSuffix>\n            </Show>\n            <Show when={local.shortcut}>\n              {/* Decoration, not name: see `shortcut` on SearchFieldProps. It carries no\n                  id and is never joined into `adornmentIds`, so the searchbox keeps the\n                  name its label gave it. */}\n              <span aria-hidden=\"true\" class={shortcutChip}>\n                <Keyboard>{local.shortcut}</Keyboard>\n              </span>\n            </Show>\n            <Show when={!renderProps.isReadOnly}>\n              <HeadlessSearchFieldClearButton class={clearButtonClass}>\n                <CrossIcon size={size()} style={clearIconStyle(size())} />\n              </HeadlessSearchFieldClearButton>\n            </Show>\n          </div>\n\n          <HelpText\n            size={size()}\n            isDisabled={renderProps.isDisabled}\n            isInvalid={renderProps.isInvalid}\n            description={local.description}\n          >\n            {local.errorMessage}\n          </HelpText>\n        </>\n      )}\n    />\n  );\n}\n\nexport type { SearchFieldState } from \"@proyecto-viviana/solid-stately\";\n"],"mappings":"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"}

package/dist/segmentedcontrol/index.d.ts

@@ -1,4 +1,4 @@
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { type ToggleButtonProps as HeadlessToggleButtonProps, type ToggleButtonGroupProps as HeadlessToggleButtonGroupProps } from "@proyecto-viviana/solidaria-components";
 import type { Key } from "@proyecto-viviana/solid-stately";
 import type { StyleString } from "../style";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/segmentedcontrol/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,GAAG,EAKT,MAAM,UAAU,CAAC;AAClB,OAAO,EAML,KAAK,iBAAiB,IAAI,yBAAyB,EACnD,KAAK,sBAAsB,IAAI,8BAA8B,EAE9D,MAAM,wCAAwC,CAAC;AAChD,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAO5C,OAAO,EAKL,KAAK,OAAO,EACZ,KAAK,oBAAoB,EAC1B,MAAM,4BAA4B,CAAC;AAEpC,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,8BAA8B,EAC5B,UAAU,GACV,OAAO,GACP,OAAO,GACP,eAAe,GACf,cAAc,GACd,qBAAqB,GACrB,mBAAmB,GACnB,aAAa,GACb,MAAM,GACN,KAAK,CACR;IACC,uDAAuD;IACvD,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,mEAAmE;IACnE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC;IACzB,6CAA6C;IAC7C,kBAAkB,CAAC,EAAE,GAAG,CAAC;IACzB,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,IAAI,CAAC;IACtC,0CAA0C;IAC1C,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2DAA2D;IAC3D,YAAY,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IACjC,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,iDAAiD;IACjD,GAAG,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAC/B;AAED,MAAM,WAAW,yBAA0B,SAAQ,IAAI,CACrD,yBAAyB,EACzB,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,YAAY,GAAG,iBAAiB,GAAG,UAAU,CAC/E;IACC,0FAA0F;IAC1F,EAAE,EAAE,GAAG,CAAC;IACR,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2DAA2D;IAC3D,YAAY,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IACjC,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,uBAAuB,yEAC8B,CAAC;AAwHnE;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,GAAG,CAAC,OAAO,CAwE1E;AA+BD;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,GAAG,GAAG,CAAC,OAAO,CAyFlF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/segmentedcontrol/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAML,KAAK,iBAAiB,IAAI,yBAAyB,EACnD,KAAK,sBAAsB,IAAI,8BAA8B,EAE9D,MAAM,wCAAwC,CAAC;AAChD,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAS5C,OAAO,EAKL,KAAK,OAAO,EACZ,KAAK,oBAAoB,EAC1B,MAAM,4BAA4B,CAAC;AAEpC,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,8BAA8B,EAC5B,UAAU,GACV,OAAO,GACP,OAAO,GACP,eAAe,GACf,cAAc,GACd,qBAAqB,GACrB,mBAAmB,GACnB,aAAa,GACb,MAAM,GACN,KAAK,CACR;IACC,uDAAuD;IACvD,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,mEAAmE;IACnE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC;IACzB,6CAA6C;IAC7C,kBAAkB,CAAC,EAAE,GAAG,CAAC;IACzB,yDAAyD;IACzD,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,IAAI,CAAC;IACtC,0CAA0C;IAC1C,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2DAA2D;IAC3D,YAAY,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IACjC,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,iDAAiD;IACjD,GAAG,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAC/B;AAED,MAAM,WAAW,yBAA0B,SAAQ,IAAI,CACrD,yBAAyB,EACzB,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,YAAY,GAAG,iBAAiB,GAAG,UAAU,CAC/E;IACC,0FAA0F;IAC1F,EAAE,EAAE,GAAG,CAAC;IACR,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2DAA2D;IAC3D,YAAY,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IACjC,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,uBAAuB,yEAC8B,CAAC;AAuKnE;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,GAAG,CAAC,OAAO,CAgF1E;AA+BD;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,GAAG,GAAG,CAAC,OAAO,CAgGlF"}

package/dist/segmentedcontrol/index.js

@@ -1,120 +1,142 @@
+/*
+* 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/SegmentedControl.tsx
 import { mergeStyles } from "../style/runtime.js";
-import { useProviderProps } from "../provider/index.js";
+import { a as useProviderProps } from "../_chunk/provider.js";
 import { a as mergeContextUnsafeStyle, i as mergeContextStyles, n as getSlottedContextProps, r as mergeContextRefs } from "../_chunk/spectrum-context.js";
 import { centerBaseline } from "../icon/center-baseline.js";
 import { t as IconContext } from "../_chunk/spectrum-icon.js";
 /* empty css                                                                               */
-import { createComponent, getNextElement, insert, memo, mergeProps, template } from "solid-js/web";
-import { children, createContext, mergeProps as mergeProps$1, onMount, splitProps, useContext } from "solid-js";
+import { className, createComponent, effect, getNextElement, insert, memo, mergeProps, readShallow, scope, template } from "@solidjs/web";
+import { children, createContext, onSettled, useContext } from "solid-js";
+import { mergeProps as mergeProps$1, splitProps } from "@proyecto-viviana/solidaria/utils";
 import { SelectionIndicator, SharedElementTransition, ToggleButton, ToggleButtonGroup, useToggleButtonGroupStateContext } from "@proyecto-viviana/solidaria-components";
 //#region src/segmentedcontrol/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<span class=" _Pc151 _9c151 sd151 Uc151 Usd151 qc151 qsd151 eb151 Na151 Yd151 Xb151 _2b151">`), _tmpl$2 = /*#__PURE__*/ template(`<span class=" _Jb151 _Nc151 Pc151 _Yb151 _7c151"data-rsp-slot=text>`);
+var _tmpl$ = /* @__PURE__ */ template(`<span>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<span class=" _Jb17 _Nc17 Pc17 _Yb17 _7c17"data-rsp-slot=text>`);
 const SegmentedControlContext = createContext(null);
 const InternalSegmentedControlContext = createContext({});
-const segmentedControl = " sd151 Ub151 qb151 ZJ151";
+const segmentedControl = " sd17 Ul17 ql17 Sp17 Rp17 ZJ17";
 const segmentedControlItem = function anonymous(props) {
 	let rules = " ";
-	if (props.isFocusVisible) rules += " _Lf151";
-	else rules += " _Le151";
-	rules += " O8KaFke151";
-	rules += " Olc151";
-	rules += " _Mc151";
-	rules += " _Kd151";
-	rules += " uxe7h4151";
+	if (props.isFocusVisible) rules += " _Lf17";
+	else rules += " _Le17";
+	rules += " Or2Mazb17";
+	rules += " Olc17";
+	rules += " _Mc17";
+	rules += " _Kd17";
+	rules += " uxe7h417";
 	if (props.size === "XL") {
-		rules += " -_6BNtrc-e151";
-		rules += " vx151";
+		rules += " -_6BNtrc-c17";
+		rules += " vx17";
 	} else if (props.size === "L") {
-		rules += " -_6BNtrc-d151";
-		rules += " vx151";
+		rules += " -_6BNtrc-b17";
+		rules += " vx17";
 	} else if (props.size === "S") {
-		rules += " -_6BNtrc-b151";
-		rules += " vx151";
+		rules += " -_6BNtrc-a17";
+		rules += " vx17";
 	} else if (props.size === "XS") {
-		rules += " -_6BNtrc-a151";
-		rules += " vx151";
+		rules += " -_6BNtrc-a17";
+		rules += " vx17";
 	} else {
-		rules += " -_6BNtrc-c151";
-		rules += " vx151";
+		rules += " -_6BNtrc-a17";
+		rules += " vx17";
 	}
-	rules += " xb151";
-	rules += " _xa151";
+	rules += " xd17";
+	rules += " _xa17";
+	rules += " xX0cczbc17";
+	rules += " _xX0cczba17";
 	if (props.size === "XL") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "L") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "S") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else if (props.size === "XS") {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	} else {
-		rules += " _Fd151";
-		rules += " _FnuYUweb151";
+		rules += " _Fd17";
+		rules += " _FnuYUweb17";
 	}
-	if (props.isDisabled) rules += " pUvnvv151";
-	else if (props.isSelected) if (props.isPressed) rules += " pOzYCcc151";
-	else if (props.isFocusVisible) rules += " pOzYCcc151";
-	else if (props.isHovered) rules += " pOzYCcc151";
-	else rules += " p5dxOg151";
-	else if (props.isPressed) rules += " pQKeKoe151";
-	else if (props.isFocusVisible) rules += " pQKeKoe151";
-	else if (props.isHovered) rules += " pQKeKoe151";
-	else rules += " pUUi0Fe151";
-	rules += " sd151";
-	rules += " eb151";
-	rules += " _oa151";
-	rules += " Sv151";
-	rules += " SnpkAwdd151";
-	rules += " Rv151";
-	rules += " RnpkAwdd151";
-	if (props.size === "XL") rules += " Nl151";
-	else if (props.size === "L") rules += " Nj151";
-	else if (props.size === "S") rules += " Nf151";
-	else if (props.size === "XS") rules += " Ne151";
-	else rules += " Nk151";
-	rules += " osmOfn151";
-	rules += " nsmOfn151";
-	rules += " ksmOfn151";
-	rules += " jsmOfn151";
-	rules += " qc151";
-	rules += " qsd151";
-	rules += " -Qg41Lb-IAxCW0c151";
-	rules += " -Qg41Lb-npkAwdIy151";
-	rules += " FRuFGYc151";
-	rules += " _Ca151";
-	rules += " _Pc151";
-	rules += " _je151";
-	rules += " g9151";
-	if (props.isDisabled) rules += " ru151";
-	else rules += " ri151";
-	if (props.isJustified) rules += " _ub151";
-	if (props.isJustified) rules += " _sb151";
-	rules += " _va151";
-	rules += " _7c151";
-	rules += " _4c151";
-	rules += " _yb151";
-	if (props.isSelected) rules += " _9b151";
-	else rules += " _9c151";
-	rules += " -_8sjo0b-t5ZbAob151";
-	if (props.size === "XL") rules += " -F_-Fz151";
-	else if (props.size === "L") rules += " -F_-Fv151";
-	else if (props.size === "S") rules += " -F_-Fp151";
-	else if (props.size === "XS") rules += " -F_-Fn151";
-	else rules += " -F_-Fx151";
+	if (props.isDisabled) rules += " p8H6Pad17";
+	else if (props.isSelected) rules += " p9ck5ue17";
+	else if (props.isPressed) rules += " pX85CBd17";
+	else if (props.isFocusVisible) rules += " pX85CBd17";
+	else if (props.isHovered) rules += " pX85CBd17";
+	else rules += " pLw1gcc17";
+	rules += " sd17";
+	rules += " eb17";
+	rules += " _oa17";
+	rules += " Sd17";
+	rules += " Rd17";
+	if (props.size === "XL") rules += " Nl17";
+	else if (props.size === "L") rules += " Nj17";
+	else if (props.size === "S") rules += " Nf17";
+	else if (props.size === "XS") rules += " Ne17";
+	else rules += " Nk17";
+	rules += " osmOfn17";
+	rules += " nsmOfn17";
+	rules += " ksmOfn17";
+	rules += " jsmOfn17";
+	rules += " qc17";
+	rules += " qsd17";
+	rules += " -Qg41Lb-IAxCW0c17";
+	rules += " -Qg41Lb-npkAwdIy17";
+	if (props.size === "XL") rules += " Fz17";
+	else if (props.size === "L") rules += " Fv17";
+	else if (props.size === "S") rules += " Fp17";
+	else if (props.size === "XS") rules += " Fn17";
+	else rules += " Fx17";
+	rules += " _Ca17";
+	rules += " _Pc17";
+	rules += " _je17";
+	rules += " g917";
+	rules += " T1DOfn17";
+	rules += " Q1DOfn17";
+	if (props.isDisabled) rules += " ru17";
+	else rules += " ri17";
+	if (props.isJustified) rules += " _ub17";
+	if (props.isJustified) rules += " _sb17";
+	rules += " _va17";
+	rules += " _7c17";
+	rules += " _4c17";
+	rules += " _yb17";
+	if (props.isSelected) rules += " _9b17";
+	else rules += " _9c17";
+	rules += " -_8sjo0b-t5ZbAob17";
 	return rules;
 };
-const selectionIndicator = " _Pa151 Wr151 _Er151 Za151 Fb151 _qg151 Yx6BKnd151 Ydklsgce151 Xc151 _2a151 _oa151 _jf151 _kb151 hb151 mb151 lb151 iA151 ilb151 osmOfn151 nsmOfn151 ksmOfn151 jsmOfn151 g9151 gle151 _Ob151";
+const selectionIndicator = " _Pa17 Wr17 _Er17 Za17 Fb17 _qg17 Yx6BKnd17 Ydklsgce17 Xc17 _2a17 _oa17 _jf17 _kb17 hb17 mb17 lb17 iA17 ilb17 osmOfn17 nsmOfn17 ksmOfn17 jsmOfn17 g917 gle17 _Ob17";
+const selectedBrackets = "mH9qW";
+const itemContent = " _Pc17 _9c17 sd17 Uc17 Usd17 qc17 qsd17 eb17 Na17 Yd17 Xb17 _2b17";
 /**
 * A SegmentedControl is a mutually exclusive group of buttons used for view switching.
-*/
-function SegmentedControl(props) {
+*/ function SegmentedControl(props) {
 	const providerProps = useProviderProps(props);
+	const [flags] = splitProps(providerProps, [
+		"isQuiet",
+		"isEmphasized",
+		"isDisabled",
+		"isRequired",
+		"isReadOnly",
+		"validationState"
+	]);
 	const contextProps = getSlottedContextProps(useContext(SegmentedControlContext), props.slot);
-	const [local, headlessProps] = splitProps(mergeProps$1(providerProps, contextProps ?? {}, props), [
+	const merged = mergeProps$1(flags, contextProps ?? {}, props);
+	const [local, headlessProps] = splitProps(merged, [
 		"children",
 		"isJustified",
 		"selectedKey",
@@ -156,16 +178,16 @@ function SegmentedControl(props) {
 		get slot() {
 			return local.slot ?? void 0;
 		},
-		get ["class"]() {
+		get "class"() {
 			return className();
 		},
 		get style() {
 			return mergedUnsafeStyle();
 		},
-		get ["data-justified"]() {
+		get "data-justified"() {
 			return local.isJustified ? "true" : void 0;
 		},
-		get ["data-disabled"]() {
+		get "data-disabled"() {
 			return headlessProps.isDisabled ? "true" : void 0;
 		},
 		children: () => createComponent(SharedElementTransition, { get children() {
@@ -189,7 +211,7 @@ function SegmentedControl(props) {
 function DefaultSelectionTracker(props) {
 	const state = useToggleButtonGroupStateContext();
 	let isRegistered = props.defaultSelectedKey != null || props.selectedKey != null;
-	return createComponent(InternalSegmentedControlContext.Provider, {
+	return createComponent(InternalSegmentedControlContext, {
 		value: {
 			register(id) {
 				if (!state || isRegistered) return;
@@ -207,8 +229,7 @@ function DefaultSelectionTracker(props) {
 }
 /**
 * A SegmentedControlItem represents an option within a SegmentedControl.
-*/
-function SegmentedControlItem(props) {
+*/ function SegmentedControlItem(props) {
 	const context = useContext(InternalSegmentedControlContext);
 	const [local, headlessProps] = splitProps(props, [
 		"children",
@@ -219,7 +240,7 @@ function SegmentedControlItem(props) {
 		"id"
 	]);
 	let buttonElement;
-	onMount(() => context.register?.(local.id));
+	onSettled(() => context.register?.(local.id));
 	const getClassName = (renderProps) => [
 		local.UNSAFE_className,
 		local.class,
@@ -240,34 +261,46 @@ function SegmentedControlItem(props) {
 		return style;
 	};
 	function SegmentContent(renderProps) {
-		const resolvedChildren = children(() => local.children);
-		const content = () => resolvedChildren();
 		const iconContextValue = {
 			slot: "icon",
 			render: centerBaseline({
 				slot: "icon",
-				styles: " _Ja151 _va151"
+				styles: " _Ja17 _va17"
 			}),
-			styles: " ZuUmpre151 FuUmpre151 _va151"
+			styles: " ZuUmpre17 FuUmpre17 _va17"
 		};
+		function ResolvedContent() {
+			const resolvedChildren = children(() => local.children);
+			const content = () => resolvedChildren();
+			var _el$ = getNextElement(_tmpl$);
+			insert(_el$, scope((() => {
+				var _c$ = memo(() => {
+					return typeof content() === "string";
+				});
+				return () => {
+					return _c$() ? (() => {
+						var _el$2 = getNextElement(_tmpl$2);
+						insert(_el$2, scope(() => {
+							return content();
+						}));
+						return _el$2;
+					})() : content();
+				};
+			})()));
+			effect(() => readShallow(renderProps.isSelected ? `${itemContent} ${selectedBrackets}` : itemContent), (_v$, _$p) => {
+				className(_el$, _v$, _$p);
+			});
+			return _el$;
+		}
 		return [createComponent(SelectionIndicator, {
 			get isSelected() {
 				return renderProps.isSelected;
 			},
-			"class": selectionIndicator
-		}), createComponent(IconContext.Provider, {
+			class: selectionIndicator
+		}), createComponent(IconContext, {
 			value: iconContextValue,
 			get children() {
-				var _el$ = getNextElement(_tmpl$);
-				insert(_el$, (() => {
-					var _c$ = memo(() => typeof content() === "string");
-					return () => _c$() ? (() => {
-						var _el$2 = getNextElement(_tmpl$2);
-						insert(_el$2, content);
-						return _el$2;
-					})() : content();
-				})());
-				return _el$;
+				return createComponent(ResolvedContent, {});
 			}
 		})];
 	}
@@ -278,7 +311,7 @@ function SegmentedControlItem(props) {
 		ref: (element) => {
 			buttonElement = element;
 		},
-		"class": getClassName,
+		class: getClassName,
 		style: getStyle,
 		"data-segmented-control-item": "",
 		children: (renderProps) => createComponent(SegmentContent, renderProps)

package/dist/segmentedcontrol/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/segmentedcontrol/index.tsx"],"sourcesContent":["import {\n  children as resolveChildren,\n  createContext,\n  type JSX,\n  mergeProps,\n  onMount,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport {\n  SelectionIndicator,\n  SharedElementTransition,\n  ToggleButton as HeadlessToggleButton,\n  ToggleButtonGroup as HeadlessToggleButtonGroup,\n  useToggleButtonGroupStateContext,\n  type ToggleButtonProps as HeadlessToggleButtonProps,\n  type ToggleButtonGroupProps as HeadlessToggleButtonGroupProps,\n  type ToggleButtonRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport type { StyleString } from \"../style\";\nimport { baseColor, fontRelative, focusRing, style } from \"../style\" with { type: \"macro\" };\nimport { mergeStyles } from \"../style/runtime\";\nimport { control } from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport { IconContext } from \"../icon/spectrum-icon\";\nimport { centerBaseline } from \"../icon/center-baseline\";\nimport { useProviderProps } from \"../provider\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n  type SpectrumContextValue,\n} from \"../button/spectrum-context\";\n\nexport interface SegmentedControlProps extends Omit<\n  HeadlessToggleButtonGroupProps,\n  | \"children\"\n  | \"class\"\n  | \"style\"\n  | \"selectionMode\"\n  | \"selectedKeys\"\n  | \"defaultSelectedKeys\"\n  | \"onSelectionChange\"\n  | \"orientation\"\n  | \"slot\"\n  | \"ref\"\n> {\n  /** The content to display in the segmented control. */\n  children?: JSX.Element;\n  /** Whether the items should divide the container width equally. */\n  isJustified?: boolean;\n  /** The id of the currently selected item. */\n  selectedKey?: Key | null;\n  /** The id of the initially selected item. */\n  defaultSelectedKey?: Key;\n  /** Handler that is called when the selection changes. */\n  onSelectionChange?: (id: Key) => void;\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 radiogroup element. */\n  ref?: RefLike<HTMLDivElement>;\n}\n\nexport interface SegmentedControlItemProps extends Omit<\n  HeadlessToggleButtonProps,\n  \"children\" | \"class\" | \"style\" | \"isSelected\" | \"defaultSelected\" | \"onChange\"\n> {\n  /** The id of the item, matching the value used in SegmentedControl's selectedKey prop. */\n  id: Key;\n  /** The content to display in the segmented control item. */\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\nexport const SegmentedControlContext =\n  createContext<SpectrumContextValue<SegmentedControlProps>>(null);\n\ninterface InternalSegmentedControlContextValue {\n  register?: (id: Key) => void;\n  isJustified?: boolean;\n}\n\nconst InternalSegmentedControlContext = createContext<InternalSegmentedControlContextValue>({});\n\nconst segmentedControl = style({\n  display: \"flex\",\n  gap: 4,\n  /* No track. The register's segmented control is bare mono labels in a flex row —\n     `day / [week] / month` — with no background, border or radius of their own\n     (TerminalGlassLab.tsx:443-459, SEGMENTS at :21-25). What was here instead was two\n     raw light-dark() literals, rgb(233,233,233) / rgb(44,44,44), which answer to no\n     token in either scheme and so could not follow a theme flip. The radius goes with\n     the fill: with nothing painted there is no corner to round. */\n  width: \"fit\",\n});\n\nconst segmentedControlItem = style<ToggleButtonRenderProps & { isJustified?: boolean }>({\n  ...focusRing(),\n  ...control({ shape: \"default\", icon: true, rim: false }),\n  justifyContent: \"center\",\n  position: \"relative\",\n  borderStyle: \"none\",\n  backgroundColor: \"transparent\",\n  /* With the plate gone, ink is the ONLY selection signal — which is how the register\n     does it: the selected segment is `var(--accent-primary)` and its siblings are\n     `var(--text-tertiary)` (TerminalGlassLab.tsx:21-25). neutral-subdued vs neutral was\n     too small a step to carry selection on its own. `accent` is the semantic ink stop,\n     the same one link/picker/combobox use; it refs accent-color-900, which this library\n     re-points at the brand blue ramp (glasselated-ramps.ts). */\n  color: {\n    default: baseColor(\"neutral-subdued\"),\n    isSelected: baseColor(\"accent\"),\n    isDisabled: \"disabled\",\n  },\n  cursor: {\n    default: \"default\",\n    isDisabled: \"not-allowed\",\n  },\n  flexGrow: {\n    isJustified: 1,\n  },\n  flexBasis: {\n    isJustified: 0,\n  },\n  flexShrink: 0,\n  whiteSpace: \"nowrap\",\n  userSelect: \"none\",\n  forcedColorAdjust: \"none\",\n  zIndex: {\n    default: 1,\n    isSelected: 0,\n  },\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n});\n\n/* No type parameter, and not called as a function below: every condition in this object is\n   static (`forcedColors`), so the macro bakes it to a plain class string rather than to a\n   selector function. Invoking it throws \"selectionIndicator is not a function\" at render.\n   Re-adding a runtime-prop condition here means restoring the call form at the usage site. */\nconst selectionIndicator = style({\n  position: \"absolute\",\n  top: 0,\n  left: 0,\n  width: \"full\",\n  height: \"full\",\n  contain: \"strict\",\n  transition: {\n    default: \"[translate,width]\",\n    \"@media (prefers-reduced-motion: reduce)\": \"none\",\n  },\n  transitionDuration: 200,\n  transitionTimingFunction: \"out\",\n  boxSizing: \"border-box\",\n  /* The indicator paints nothing in either scheme: the register signals selection with\n     ink, not with a bordered plate (TerminalGlassLab.tsx:443-459). The element is kept\n     rather than deleted because it carries the translate/width transition above and,\n     in forced-colors mode, is still the only surface available to mark the selection —\n     that branch is preserved on both maps. Radius drops from `card` (12px, a container\n     value) to `control` (5px), which is what `control()` gives the item itself, so the\n     forced-colors mark traces the segment instead of overshooting it.\n     `isDisabled` is dropped from both maps deliberately: over a transparent resting\n     state a disabled-only border/fill would appear out of nowhere; the disabled label\n     colour on the item above is the surviving signal. */\n  borderStyle: \"solid\",\n  borderWidth: 1,\n  borderColor: {\n    default: \"transparent\",\n    forcedColors: \"ButtonText\",\n  },\n  borderRadius: \"control\",\n  backgroundColor: {\n    default: \"transparent\",\n    forcedColors: \"Highlight\",\n  },\n  pointerEvents: \"none\",\n});\n\nconst itemContent = style({\n  position: \"relative\",\n  zIndex: 1,\n  display: \"flex\",\n  gap: \"text-to-visual\",\n  alignItems: \"center\",\n  minWidth: 0,\n  transition: \"default\",\n});\n\nconst itemText = style({\n  order: 1,\n  truncate: true,\n});\n\n/**\n * A SegmentedControl is a mutually exclusive group of buttons used for view switching.\n */\nexport function SegmentedControl(props: SegmentedControlProps): JSX.Element {\n  const providerProps = useProviderProps(props);\n  const contextProps = getSlottedContextProps(useContext(SegmentedControlContext), props.slot);\n  const merged = mergeProps(providerProps, contextProps ?? {}, props);\n  const [local, headlessProps] = splitProps(merged, [\n    \"children\",\n    \"isJustified\",\n    \"selectedKey\",\n    \"defaultSelectedKey\",\n    \"onSelectionChange\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"slot\",\n    \"ref\",\n  ]);\n\n  const selectedKeys = () => (local.selectedKey != null ? [local.selectedKey] : undefined);\n  const defaultSelectedKeys = () =>\n    local.defaultSelectedKey != null ? [local.defaultSelectedKey] : undefined;\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const assignRef = mergeContextRefs(\n    (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,\n    props.ref,\n  );\n  const className = () =>\n    [\n      contextProps?.UNSAFE_className,\n      props.UNSAFE_className,\n      props.class,\n      mergeStyles(segmentedControl.toString() as StyleString, mergedStyles()),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  return (\n    <HeadlessToggleButtonGroup\n      {...headlessProps}\n      selectionMode=\"single\"\n      disallowEmptySelection\n      orientation=\"horizontal\"\n      selectedKeys={selectedKeys()}\n      defaultSelectedKeys={defaultSelectedKeys()}\n      onSelectionChange={(keys) => {\n        const firstKey = keys.values().next().value;\n        if (firstKey != null) {\n          local.onSelectionChange?.(firstKey);\n        }\n      }}\n      ref={(element) => assignRef(element)}\n      slot={local.slot ?? undefined}\n      class={className()}\n      style={mergedUnsafeStyle()}\n      data-justified={local.isJustified ? \"true\" : undefined}\n      data-disabled={headlessProps.isDisabled ? \"true\" : undefined}\n    >\n      {() => (\n        <SharedElementTransition>\n          <DefaultSelectionTracker\n            defaultSelectedKey={local.defaultSelectedKey}\n            selectedKey={local.selectedKey}\n            isJustified={local.isJustified}\n          >\n            {local.children}\n          </DefaultSelectionTracker>\n        </SharedElementTransition>\n      )}\n    </HeadlessToggleButtonGroup>\n  );\n}\n\nfunction DefaultSelectionTracker(props: {\n  children?: JSX.Element;\n  defaultSelectedKey?: Key;\n  selectedKey?: Key | null;\n  isJustified?: boolean;\n}): JSX.Element {\n  const state = useToggleButtonGroupStateContext();\n  let isRegistered = props.defaultSelectedKey != null || props.selectedKey != null;\n\n  const contextValue: InternalSegmentedControlContextValue = {\n    register(id: Key) {\n      if (!state || isRegistered) {\n        return;\n      }\n      isRegistered = true;\n      state.toggleKey(id);\n    },\n    get isJustified() {\n      return props.isJustified;\n    },\n  };\n\n  return (\n    <InternalSegmentedControlContext.Provider value={contextValue}>\n      {props.children}\n    </InternalSegmentedControlContext.Provider>\n  );\n}\n\n/**\n * A SegmentedControlItem represents an option within a SegmentedControl.\n */\nexport function SegmentedControlItem(props: SegmentedControlItemProps): JSX.Element {\n  const context = useContext(InternalSegmentedControlContext);\n  const [local, headlessProps] = splitProps(props, [\n    \"children\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"id\",\n  ]);\n  let buttonElement: HTMLButtonElement | undefined;\n\n  onMount(() => context.register?.(local.id));\n\n  const getClassName = (renderProps: ToggleButtonRenderProps): string =>\n    [\n      local.UNSAFE_className,\n      local.class,\n      mergeStyles(\n        segmentedControlItem({\n          ...renderProps,\n          isJustified: context.isJustified,\n        }),\n        local.styles,\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  const getStyle = (renderProps: ToggleButtonRenderProps): JSX.CSSProperties => {\n    const style = { ...(local.UNSAFE_style ?? {}) } as JSX.CSSProperties;\n    const styleRecord = style as Record<string, string | number | undefined>;\n    const willChange = styleRecord[\"will-change\"] ?? \"\";\n    styleRecord[\"will-change\"] = `${willChange} transform`.trim();\n\n    if (renderProps.isPressed && buttonElement) {\n      const { width, height } = buttonElement.getBoundingClientRect();\n      const perspective = Math.max(height, width / 3, 24);\n      const transform = style.transform ?? \"\";\n      style.transform = `${transform} perspective(${perspective}px) translate3d(0, 0, -2px)`.trim();\n    }\n\n    return style;\n  };\n\n  function SegmentContent(renderProps: ToggleButtonRenderProps) {\n    const resolvedChildren = resolveChildren(() => local.children);\n    const content = () => resolvedChildren();\n    const iconContextValue = {\n      slot: \"icon\",\n      render: centerBaseline({ slot: \"icon\", styles: style({ order: 0, flexShrink: 0 }) }),\n      styles: style({\n        size: fontRelative(20),\n        flexShrink: 0,\n      }),\n    };\n\n    return (\n      <>\n        <SelectionIndicator isSelected={renderProps.isSelected} class={selectionIndicator} />\n        <IconContext.Provider value={iconContextValue}>\n          <span class={itemContent}>\n            {typeof content() === \"string\" ? (\n              <span class={itemText} data-rsp-slot=\"text\">\n                {content()}\n              </span>\n            ) : (\n              content()\n            )}\n          </span>\n        </IconContext.Provider>\n      </>\n    );\n  }\n\n  return (\n    <HeadlessToggleButton\n      {...headlessProps}\n      id={local.id}\n      ref={(element: HTMLButtonElement) => {\n        buttonElement = element;\n      }}\n      class={getClassName}\n      style={getStyle}\n      data-segmented-control-item=\"\"\n    >\n      {(renderProps) => <SegmentContent {...renderProps} />}\n    </HeadlessToggleButton>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/segmentedcontrol/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/SegmentedControl.tsx\n\n// Port of packages/@react-spectrum/s2/src/SegmentedControl.tsx.\n\nimport { children as resolveChildren, createContext, onSettled, useContext } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { mergeProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n  SelectionIndicator,\n  SharedElementTransition,\n  ToggleButton as HeadlessToggleButton,\n  ToggleButtonGroup as HeadlessToggleButtonGroup,\n  useToggleButtonGroupStateContext,\n  type ToggleButtonProps as HeadlessToggleButtonProps,\n  type ToggleButtonGroupProps as HeadlessToggleButtonGroupProps,\n  type ToggleButtonRenderProps,\n} from \"@proyecto-viviana/solidaria-components\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport type { StyleString } from \"../style\";\nimport { baseColor, fontRelative, focusRing, style } from \"../style\" with { type: \"macro\" };\nimport { mergeStyles } from \"../style/runtime\";\nimport { css } from \"../style/style-macro\" with { type: \"macro\" };\nimport { control, controlFontStep } from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport { IconContext } from \"../icon/spectrum-icon\";\nimport { centerBaseline } from \"../icon/center-baseline\";\nimport { useProviderProps, type ProviderInheritedProps } from \"../provider\";\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 interface SegmentedControlProps extends Omit<\n  HeadlessToggleButtonGroupProps,\n  | \"children\"\n  | \"class\"\n  | \"style\"\n  | \"selectionMode\"\n  | \"selectedKeys\"\n  | \"defaultSelectedKeys\"\n  | \"onSelectionChange\"\n  | \"orientation\"\n  | \"slot\"\n  | \"ref\"\n> {\n  /** The content to display in the segmented control. */\n  children?: JSX.Element;\n  /** Whether the items should divide the container width equally. */\n  isJustified?: boolean;\n  /** The id of the currently selected item. */\n  selectedKey?: Key | null;\n  /** The id of the initially selected item. */\n  defaultSelectedKey?: Key;\n  /** Handler that is called when the selection changes. */\n  onSelectionChange?: (id: Key) => void;\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 radiogroup element. */\n  ref?: RefLike<HTMLDivElement>;\n}\n\nexport interface SegmentedControlItemProps extends Omit<\n  HeadlessToggleButtonProps,\n  \"children\" | \"class\" | \"style\" | \"isSelected\" | \"defaultSelected\" | \"onChange\"\n> {\n  /** The id of the item, matching the value used in SegmentedControl's selectedKey prop. */\n  id: Key;\n  /** The content to display in the segmented control item. */\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\nexport const SegmentedControlContext =\n  createContext<SpectrumContextValue<SegmentedControlProps>>(null);\n\ninterface InternalSegmentedControlContextValue {\n  register?: (id: Key) => void;\n  isJustified?: boolean;\n}\n\nconst InternalSegmentedControlContext = createContext<InternalSegmentedControlContextValue>({});\n\nconst segmentedControl = style({\n  display: \"flex\",\n  /* 16px, not 4. With the plate gone the gap IS the separation between segments —\n     there is no longer a button edge to end one and start the next — and the handoff\n     sets the bare row at `gap: 16px; padding: 0 4px`\n     (\"Terminal Glass Lab.dc.html\":158). At 4px the labels read as one run-on string.\n     The 4px inline padding is kept so the outermost segment's focus ring has somewhere\n     to land instead of being clipped by the group's own box. */\n  gap: 16,\n  paddingX: 4,\n  /* No track. The register's segmented control is bare mono labels in a flex row —\n     `day / [week] / month` — with no background, border or radius of their own\n     (TerminalGlassLab.tsx:443-459, SEGMENTS at :21-25). What was here instead was two\n     raw light-dark() literals, rgb(233,233,233) / rgb(44,44,44), which answer to no\n     token in either scheme and so could not follow a theme flip. The radius goes with\n     the fill: with nothing painted there is no corner to round. */\n  width: \"fit\",\n});\n\nconst segmentedControlItem = style<ToggleButtonRenderProps & { isJustified?: boolean }>({\n  ...focusRing(),\n  ...control({ shape: \"default\", icon: true, rim: false }),\n  justifyContent: \"center\",\n  position: \"relative\",\n  borderStyle: \"none\",\n  backgroundColor: \"transparent\",\n  /* Bare labels, not buttons: `padding: 6px 0` with no horizontal inset at all\n     (\"Terminal Glass Lab.dc.html\":159). `control()` above spreads the button band's\n     `edge-to-text` inline padding, which only made sense while there was a plate to\n     hold the label off its own edge; with the plate gone it just doubles the gap\n     above unevenly. Declared after the spread so it wins. */\n  paddingX: 0,\n  // Absolute, not a spacing rung: the register's 6px is a fixed chrome measure, and\n  // the padding scale has no 6 (it steps 4 -> 8, spectrum-theme.ts:483-502). 4px\n  // crowds the label, 8px opens the row past the drawn height.\n  paddingY: \"[6px]\",\n  /* The segment is a STAMP, not a button: 11.5/700 in mono\n     (\"Terminal Glass Lab.dc.html\":159). `control()` gives the mono family for free but\n     leaves the glass register at the button's size and `normal` weight — the same two\n     values the chip and badge registers already step down and bolden, so this reuses\n     their exact rungs (`controlFontStep(2)` lands size M near 11px) rather than\n     inventing a third band. `fontSize`, not `font`, so only the size moves and the\n     shorthand's family/line-height survive. */\n  fontSize: controlFontStep(2),\n  fontWeight: \"bold\",\n  /* With the plate gone, ink is the ONLY selection signal — which is how the register\n     does it: the selected segment is accent ink and its siblings are secondary ink\n     (TerminalGlassLab.tsx:21-25). The decorative `--accent-primary` is only 2.98:1 on\n     the daylight panel, so text consumes the scheme-specific `--text-link` role instead:\n     it preserves the blue selection signal while meeting AA on every published surface.\n     `viviana-tokens.css` owns the actual register values for both schemes. */\n  color: {\n    default: baseColor(\"neutral-subdued\"),\n    isSelected: \"[var(--text-link)]\",\n    isDisabled: \"disabled\",\n  },\n  cursor: {\n    default: \"default\",\n    isDisabled: \"not-allowed\",\n  },\n  flexGrow: {\n    isJustified: 1,\n  },\n  flexBasis: {\n    isJustified: 0,\n  },\n  flexShrink: 0,\n  whiteSpace: \"nowrap\",\n  userSelect: \"none\",\n  forcedColorAdjust: \"none\",\n  zIndex: {\n    default: 1,\n    isSelected: 0,\n  },\n  \"--iconPrimary\": {\n    type: \"fill\",\n    value: \"currentColor\",\n  },\n});\n\n/* No type parameter, and not called as a function below: every condition in this object is\n   static (`forcedColors`), so the macro bakes it to a plain class string rather than to a\n   selector function. Invoking it throws \"selectionIndicator is not a function\" at render.\n   Re-adding a runtime-prop condition here means restoring the call form at the usage site. */\nconst selectionIndicator = style({\n  position: \"absolute\",\n  top: 0,\n  left: 0,\n  width: \"full\",\n  height: \"full\",\n  contain: \"strict\",\n  transition: {\n    default: \"[translate,width]\",\n    \"@media (prefers-reduced-motion: reduce)\": \"none\",\n  },\n  transitionDuration: 200,\n  transitionTimingFunction: \"out\",\n  boxSizing: \"border-box\",\n  /* The indicator paints nothing in either scheme: the register signals selection with\n     ink, not with a bordered plate (TerminalGlassLab.tsx:443-459). The element is kept\n     rather than deleted because it carries the translate/width transition above and,\n     in forced-colors mode, is still the only surface available to mark the selection —\n     that branch is preserved on both maps. Radius drops from `card` (12px, a container\n     value) to `control` (5px), which is what `control()` gives the item itself, so the\n     forced-colors mark traces the segment instead of overshooting it.\n     `isDisabled` is dropped from both maps deliberately: over a transparent resting\n     state a disabled-only border/fill would appear out of nowhere; the disabled label\n     colour on the item above is the surviving signal. */\n  borderStyle: \"solid\",\n  borderWidth: 1,\n  borderColor: {\n    default: \"transparent\",\n    forcedColors: \"ButtonText\",\n  },\n  borderRadius: \"control\",\n  backgroundColor: {\n    default: \"transparent\",\n    forcedColors: \"Highlight\",\n  },\n  pointerEvents: \"none\",\n});\n\n/* The selected segment is drawn BRACKETED — `day  [week]  month` — with the brackets\n   in the same accent ink as the label (\"Terminal Glass Lab.dc.html\":597, which builds\n   the visible string as `[${label}]`).\n   They are generated content rather than a `label`-mangling render prop for two\n   reasons: the accessible name must stay \"week\", not \"[week]\", so a screen reader\n   never announces punctuation that is purely a selection cue; and the brackets have to\n   survive arbitrary children (an icon + <Text>), which string surgery on the label\n   could not. `css()` and not `style()` because the macro has no pseudo-element\n   condition — the same escape hatch `centerBaselineBefore` uses.\n   Applied to the CONTENT wrapper, so the brackets hug the label and its icon rather\n   than the segment's padded box. */\nconst selectedBrackets = css(`\n  &::before {\n    content: \"[\";\n  }\n\n  &::after {\n    content: \"]\";\n  }\n`) as StyleString;\n\nconst itemContent = style({\n  position: \"relative\",\n  zIndex: 1,\n  display: \"flex\",\n  gap: \"text-to-visual\",\n  alignItems: \"center\",\n  minWidth: 0,\n  transition: \"default\",\n});\n\nconst itemText = style({\n  order: 1,\n  truncate: true,\n});\n\n/**\n * A SegmentedControl is a mutually exclusive group of buttons used for view switching.\n */\nexport function SegmentedControl(props: SegmentedControlProps): JSX.Element {\n  const providerProps = useProviderProps(props) as SegmentedControlProps & ProviderInheritedProps;\n  const [flags] = splitProps(providerProps, [\n    \"isQuiet\",\n    \"isEmphasized\",\n    \"isDisabled\",\n    \"isRequired\",\n    \"isReadOnly\",\n    \"validationState\",\n  ]);\n  const contextProps = getSlottedContextProps(useContext(SegmentedControlContext), props.slot);\n  const merged = mergeProps<SegmentedControlProps>(flags, contextProps ?? {}, props);\n  const [local, headlessProps] = splitProps(merged, [\n    \"children\",\n    \"isJustified\",\n    \"selectedKey\",\n    \"defaultSelectedKey\",\n    \"onSelectionChange\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"slot\",\n    \"ref\",\n  ]);\n\n  const selectedKeys = () => (local.selectedKey != null ? [local.selectedKey] : undefined);\n  const defaultSelectedKeys = () =>\n    local.defaultSelectedKey != null ? [local.defaultSelectedKey] : undefined;\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const assignRef = mergeContextRefs(\n    (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,\n    props.ref,\n  );\n  const className = () =>\n    [\n      contextProps?.UNSAFE_className,\n      props.UNSAFE_className,\n      props.class,\n      mergeStyles(segmentedControl.toString() as StyleString, mergedStyles()),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  return (\n    <HeadlessToggleButtonGroup\n      {...headlessProps}\n      selectionMode=\"single\"\n      disallowEmptySelection\n      orientation=\"horizontal\"\n      selectedKeys={selectedKeys()}\n      defaultSelectedKeys={defaultSelectedKeys()}\n      onSelectionChange={(keys) => {\n        const firstKey = keys.values().next().value;\n        if (firstKey != null) {\n          local.onSelectionChange?.(firstKey);\n        }\n      }}\n      ref={(element) => assignRef(element)}\n      slot={local.slot ?? undefined}\n      class={className()}\n      style={mergedUnsafeStyle()}\n      data-justified={local.isJustified ? \"true\" : undefined}\n      data-disabled={headlessProps.isDisabled ? \"true\" : undefined}\n    >\n      {() => (\n        <SharedElementTransition>\n          <DefaultSelectionTracker\n            defaultSelectedKey={local.defaultSelectedKey}\n            selectedKey={local.selectedKey}\n            isJustified={local.isJustified}\n          >\n            {local.children}\n          </DefaultSelectionTracker>\n        </SharedElementTransition>\n      )}\n    </HeadlessToggleButtonGroup>\n  );\n}\n\nfunction DefaultSelectionTracker(props: {\n  children?: JSX.Element;\n  defaultSelectedKey?: Key;\n  selectedKey?: Key | null;\n  isJustified?: boolean;\n}): JSX.Element {\n  const state = useToggleButtonGroupStateContext();\n  let isRegistered = props.defaultSelectedKey != null || props.selectedKey != null;\n\n  const contextValue: InternalSegmentedControlContextValue = {\n    register(id: Key) {\n      if (!state || isRegistered) {\n        return;\n      }\n      isRegistered = true;\n      state.toggleKey(id);\n    },\n    get isJustified() {\n      return props.isJustified;\n    },\n  };\n\n  return (\n    <InternalSegmentedControlContext value={contextValue}>\n      {props.children}\n    </InternalSegmentedControlContext>\n  );\n}\n\n/**\n * A SegmentedControlItem represents an option within a SegmentedControl.\n */\nexport function SegmentedControlItem(props: SegmentedControlItemProps): JSX.Element {\n  const context = useContext(InternalSegmentedControlContext);\n  const [local, headlessProps] = splitProps(props, [\n    \"children\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"class\",\n    \"id\",\n  ]);\n  let buttonElement: HTMLButtonElement | undefined;\n\n  onSettled(() => context.register?.(local.id));\n\n  const getClassName = (renderProps: ToggleButtonRenderProps): string =>\n    [\n      local.UNSAFE_className,\n      local.class,\n      mergeStyles(\n        segmentedControlItem({\n          ...renderProps,\n          isJustified: context.isJustified,\n        }),\n        local.styles,\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  const getStyle = (renderProps: ToggleButtonRenderProps): JSX.CSSProperties => {\n    const style = { ...(local.UNSAFE_style ?? {}) } as JSX.CSSProperties;\n    const styleRecord = style as Record<string, string | number | undefined>;\n    const willChange = styleRecord[\"will-change\"] ?? \"\";\n    styleRecord[\"will-change\"] = `${willChange} transform`.trim();\n\n    if (renderProps.isPressed && buttonElement) {\n      const { width, height } = buttonElement.getBoundingClientRect();\n      const perspective = Math.max(height, width / 3, 24);\n      const transform = style.transform ?? \"\";\n      style.transform = `${transform} perspective(${perspective}px) translate3d(0, 0, -2px)`.trim();\n    }\n\n    return style;\n  };\n\n  function SegmentContent(renderProps: ToggleButtonRenderProps) {\n    const iconContextValue = {\n      slot: \"icon\",\n      render: centerBaseline({ slot: \"icon\", styles: style({ order: 0, flexShrink: 0 }) }),\n      styles: style({\n        size: fontRelative(20),\n        flexShrink: 0,\n      }),\n    };\n\n    function ResolvedContent() {\n      const resolvedChildren = resolveChildren(() => local.children);\n      const content = () => resolvedChildren();\n\n      return (\n        <span class={renderProps.isSelected ? `${itemContent} ${selectedBrackets}` : itemContent}>\n          {typeof content() === \"string\" ? (\n            <span class={itemText} data-rsp-slot=\"text\">\n              {content()}\n            </span>\n          ) : (\n            content()\n          )}\n        </span>\n      );\n    }\n\n    return (\n      <>\n        <SelectionIndicator isSelected={renderProps.isSelected} class={selectionIndicator} />\n        <IconContext value={iconContextValue}>\n          <ResolvedContent />\n        </IconContext>\n      </>\n    );\n  }\n\n  return (\n    <HeadlessToggleButton\n      {...headlessProps}\n      id={local.id}\n      ref={(element: HTMLButtonElement) => {\n        buttonElement = element;\n      }}\n      class={getClassName}\n      style={getStyle}\n      data-segmented-control-item=\"\"\n    >\n      {(renderProps) => <SegmentContent {...renderProps} />}\n    </HeadlessToggleButton>\n  );\n}\n"],"mappings":"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"}