@proyecto-viviana/ui 0.4.1 → 0.6.0

package/dist/searchfield/index.jsx.map

@@ -0,0 +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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"}

package/dist/segmentedcontrol/index.d.ts

@@ -0,0 +1,53 @@
+import { type JSX } from "solid-js";
+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";
+import { type RefLike, type SpectrumContextValue } from "../button/spectrum-context";
+export interface SegmentedControlProps extends Omit<HeadlessToggleButtonGroupProps, "children" | "class" | "style" | "selectionMode" | "selectedKeys" | "defaultSelectedKeys" | "onSelectionChange" | "orientation" | "slot" | "ref"> {
+    /** The content to display in the segmented control. */
+    children?: JSX.Element;
+    /** Whether the items should divide the container width equally. */
+    isJustified?: boolean;
+    /** The id of the currently selected item. */
+    selectedKey?: Key | null;
+    /** The id of the initially selected item. */
+    defaultSelectedKey?: Key;
+    /** Handler that is called when the selection changes. */
+    onSelectionChange?: (id: Key) => void;
+    /** Spectrum-defined generated classes. */
+    styles?: StyleString;
+    /** Additional CSS class name. Use only as a last resort. */
+    UNSAFE_className?: string;
+    /** Additional inline styles. Use only as a last resort. */
+    UNSAFE_style?: JSX.CSSProperties;
+    /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */
+    class?: string;
+    /** Slot name when used in a Spectrum context. */
+    slot?: string | null;
+    /** Ref for the underlying radiogroup element. */
+    ref?: RefLike<HTMLDivElement>;
+}
+export interface SegmentedControlItemProps extends Omit<HeadlessToggleButtonProps, "children" | "class" | "style" | "isSelected" | "defaultSelected" | "onChange"> {
+    /** The id of the item, matching the value used in SegmentedControl's selectedKey prop. */
+    id: Key;
+    /** The content to display in the segmented control item. */
+    children?: JSX.Element;
+    /** Spectrum-defined generated classes. */
+    styles?: StyleString;
+    /** Additional CSS class name. Use only as a last resort. */
+    UNSAFE_className?: string;
+    /** Additional inline styles. Use only as a last resort. */
+    UNSAFE_style?: JSX.CSSProperties;
+    /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */
+    class?: string;
+}
+export declare const SegmentedControlContext: import("solid-js").Context<SpectrumContextValue<SegmentedControlProps>>;
+/**
+ * A SegmentedControl is a mutually exclusive group of buttons used for view switching.
+ */
+export declare function SegmentedControl(props: SegmentedControlProps): JSX.Element;
+/**
+ * A SegmentedControlItem represents an option within a SegmentedControl.
+ */
+export declare function SegmentedControlItem(props: SegmentedControlItemProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/dist/segmentedcontrol/index.js

@@ -0,0 +1,290 @@
+import { mergeStyles } from "../style/runtime.js";
+import { useProviderProps } from "../provider/index.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 { 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>`);
+const SegmentedControlContext = createContext(null);
+const InternalSegmentedControlContext = createContext({});
+const segmentedControl = " sd151 Ub151 qb151 ZJ151";
+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.size === "XL") {
+		rules += " -_6BNtrc-e151";
+		rules += " vx151";
+	} else if (props.size === "L") {
+		rules += " -_6BNtrc-d151";
+		rules += " vx151";
+	} else if (props.size === "S") {
+		rules += " -_6BNtrc-b151";
+		rules += " vx151";
+	} else if (props.size === "XS") {
+		rules += " -_6BNtrc-a151";
+		rules += " vx151";
+	} else {
+		rules += " -_6BNtrc-c151";
+		rules += " vx151";
+	}
+	rules += " xb151";
+	rules += " _xa151";
+	if (props.size === "XL") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "L") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "S") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else if (props.size === "XS") {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	} else {
+		rules += " _Fd151";
+		rules += " _FnuYUweb151";
+	}
+	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";
+	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";
+/**
+* A SegmentedControl is a mutually exclusive group of buttons used for view switching.
+*/
+function SegmentedControl(props) {
+	const providerProps = useProviderProps(props);
+	const contextProps = getSlottedContextProps(useContext(SegmentedControlContext), props.slot);
+	const [local, headlessProps] = splitProps(mergeProps$1(providerProps, contextProps ?? {}, props), [
+		"children",
+		"isJustified",
+		"selectedKey",
+		"defaultSelectedKey",
+		"onSelectionChange",
+		"styles",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"class",
+		"slot",
+		"ref"
+	]);
+	const selectedKeys = () => local.selectedKey != null ? [local.selectedKey] : void 0;
+	const defaultSelectedKeys = () => local.defaultSelectedKey != null ? [local.defaultSelectedKey] : void 0;
+	const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);
+	const mergedUnsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);
+	const assignRef = mergeContextRefs(contextProps?.ref, props.ref);
+	const className = () => [
+		contextProps?.UNSAFE_className,
+		props.UNSAFE_className,
+		props.class,
+		mergeStyles(segmentedControl.toString(), mergedStyles())
+	].filter(Boolean).join(" ");
+	return createComponent(ToggleButtonGroup, mergeProps(headlessProps, {
+		selectionMode: "single",
+		disallowEmptySelection: true,
+		orientation: "horizontal",
+		get selectedKeys() {
+			return selectedKeys();
+		},
+		get defaultSelectedKeys() {
+			return defaultSelectedKeys();
+		},
+		onSelectionChange: (keys) => {
+			const firstKey = keys.values().next().value;
+			if (firstKey != null) local.onSelectionChange?.(firstKey);
+		},
+		ref: (element) => assignRef(element),
+		get slot() {
+			return local.slot ?? void 0;
+		},
+		get ["class"]() {
+			return className();
+		},
+		get style() {
+			return mergedUnsafeStyle();
+		},
+		get ["data-justified"]() {
+			return local.isJustified ? "true" : void 0;
+		},
+		get ["data-disabled"]() {
+			return headlessProps.isDisabled ? "true" : void 0;
+		},
+		children: () => createComponent(SharedElementTransition, { get children() {
+			return createComponent(DefaultSelectionTracker, {
+				get defaultSelectedKey() {
+					return local.defaultSelectedKey;
+				},
+				get selectedKey() {
+					return local.selectedKey;
+				},
+				get isJustified() {
+					return local.isJustified;
+				},
+				get children() {
+					return local.children;
+				}
+			});
+		} })
+	}));
+}
+function DefaultSelectionTracker(props) {
+	const state = useToggleButtonGroupStateContext();
+	let isRegistered = props.defaultSelectedKey != null || props.selectedKey != null;
+	return createComponent(InternalSegmentedControlContext.Provider, {
+		value: {
+			register(id) {
+				if (!state || isRegistered) return;
+				isRegistered = true;
+				state.toggleKey(id);
+			},
+			get isJustified() {
+				return props.isJustified;
+			}
+		},
+		get children() {
+			return props.children;
+		}
+	});
+}
+/**
+* A SegmentedControlItem represents an option within a SegmentedControl.
+*/
+function SegmentedControlItem(props) {
+	const context = useContext(InternalSegmentedControlContext);
+	const [local, headlessProps] = splitProps(props, [
+		"children",
+		"styles",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"class",
+		"id"
+	]);
+	let buttonElement;
+	onMount(() => context.register?.(local.id));
+	const getClassName = (renderProps) => [
+		local.UNSAFE_className,
+		local.class,
+		mergeStyles(segmentedControlItem({
+			...renderProps,
+			isJustified: context.isJustified
+		}), local.styles)
+	].filter(Boolean).join(" ");
+	const getStyle = (renderProps) => {
+		const style = { ...local.UNSAFE_style ?? {} };
+		const styleRecord = style;
+		styleRecord["will-change"] = `${styleRecord["will-change"] ?? ""} transform`.trim();
+		if (renderProps.isPressed && buttonElement) {
+			const { width, height } = buttonElement.getBoundingClientRect();
+			const perspective = Math.max(height, width / 3, 24);
+			style.transform = `${style.transform ?? ""} perspective(${perspective}px) translate3d(0, 0, -2px)`.trim();
+		}
+		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: " ZuUmpre151 FuUmpre151 _va151"
+		};
+		return [createComponent(SelectionIndicator, {
+			get isSelected() {
+				return renderProps.isSelected;
+			},
+			"class": selectionIndicator
+		}), createComponent(IconContext.Provider, {
+			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(ToggleButton, mergeProps(headlessProps, {
+		get id() {
+			return local.id;
+		},
+		ref: (element) => {
+			buttonElement = element;
+		},
+		"class": getClassName,
+		style: getStyle,
+		"data-segmented-control-item": "",
+		children: (renderProps) => createComponent(SegmentContent, renderProps)
+	}));
+}
+//#endregion
+export { SegmentedControl, SegmentedControlContext, SegmentedControlItem };
+
+//# sourceMappingURL=index.js.map

package/dist/segmentedcontrol/index.js.map

@@ -0,0 +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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"}