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

package/dist/_chunk/s2-action-button-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"s2-action-button-styles.js","names":[],"sources":["../../src/button/group-context.ts","../../src/button/s2-action-button-styles.ts"],"sourcesContent":["import { createContext, useContext, type JSX } from \"solid-js\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport type { StyleString } from \"../style\";\nimport type { ButtonSize, StaticColor } from \"./types\";\nimport type { RefLike, SpectrumContextValue } from \"./spectrum-context\";\n\nexport type ActionButtonSize = \"XS\" | \"S\" | \"M\" | \"L\" | \"XL\";\nexport type ActionButtonDensity = \"regular\" | \"compact\";\nexport type ActionButtonOrientation = \"horizontal\" | \"vertical\";\nexport type ButtonGroupAlign = \"start\" | \"end\" | \"center\";\n\nexport interface ButtonGroupContextValue {\n  children?: JSX.Element;\n  orientation?: ActionButtonOrientation;\n  align?: ButtonGroupAlign;\n  size?: ButtonSize;\n  isDisabled?: boolean;\n  isHidden?: boolean;\n  styles?: StyleString;\n  UNSAFE_className?: string;\n  UNSAFE_style?: JSX.CSSProperties;\n  ref?: RefLike<HTMLDivElement>;\n  slot?: string;\n}\n\nexport interface ActionButtonGroupContextValue {\n  children?: JSX.Element;\n  size?: ActionButtonSize;\n  density?: ActionButtonDensity;\n  orientation?: ActionButtonOrientation;\n  isQuiet?: boolean;\n  isJustified?: boolean;\n  isEmphasized?: boolean;\n  staticColor?: StaticColor;\n  isDisabled?: boolean;\n  styles?: StyleString;\n  UNSAFE_className?: string;\n  UNSAFE_style?: JSX.CSSProperties;\n  ref?: RefLike<HTMLDivElement>;\n  slot?: string;\n}\n\nexport interface ToggleButtonGroupContextValue extends ActionButtonGroupContextValue {\n  selectionMode?: \"single\" | \"multiple\";\n  disallowEmptySelection?: boolean;\n  selectedKeys?: Iterable<Key>;\n  defaultSelectedKeys?: Iterable<Key>;\n  disabledKeys?: Iterable<Key>;\n  onSelectionChange?: (keys: Set<Key>) => void;\n}\n\nexport const ButtonGroupContext =\n  createContext<SpectrumContextValue<ButtonGroupContextValue>>(null);\nexport const ActionButtonGroupContext =\n  createContext<SpectrumContextValue<ActionButtonGroupContextValue>>(null);\nexport const ToggleButtonGroupContext =\n  createContext<SpectrumContextValue<ToggleButtonGroupContextValue>>(null);\n\nexport function useButtonGroupContext(): SpectrumContextValue<ButtonGroupContextValue> {\n  return useContext(ButtonGroupContext);\n}\n\nexport function useActionButtonGroupContext(): SpectrumContextValue<ActionButtonGroupContextValue> {\n  return useContext(ActionButtonGroupContext);\n}\n\nexport function useToggleButtonGroupContext(): SpectrumContextValue<ToggleButtonGroupContextValue> {\n  return useContext(ToggleButtonGroupContext);\n}\n","// @ts-nocheck\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\nimport {\n  baseColor,\n  focusRing,\n  fontRelative,\n  lightDark,\n  style,\n} from \"../style\" with { type: \"macro\" };\nimport {\n  control,\n  getAllowedOverrides,\n  staticColor,\n} from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport type {\n  ActionButtonDensity,\n  ActionButtonOrientation,\n  ActionButtonSize,\n} from \"./group-context\";\nimport type { StaticColor } from \"./types\";\n\nexport interface S2ActionButtonRenderState {\n  isHovered?: boolean;\n  isPressed?: boolean;\n  isFocused?: boolean;\n  isFocusVisible?: boolean;\n  isDisabled?: boolean;\n  isPending?: boolean;\n  isSelected?: boolean;\n}\n\nexport interface S2ActionButtonStyleProps extends S2ActionButtonRenderState {\n  size: ActionButtonSize;\n  staticColor?: StaticColor;\n  isStaticColor: boolean;\n  isQuiet?: boolean;\n  isEmphasized?: boolean;\n  density?: ActionButtonDensity;\n  orientation?: ActionButtonOrientation;\n  isJustified?: boolean;\n  isInGroup: boolean;\n}\n\nconst iconOnly =\n  \":has([slot=icon], [data-slot=icon], [slot=avatar]):not(:has([data-rsp-slot=text]))\";\nconst avatarOnly =\n  \":has([slot=avatar]):not(:has([slot=icon], [data-slot=icon], [data-rsp-slot=text]))\";\nconst textOnly =\n  \":has([data-rsp-slot=text]):not(:has([slot=icon], [data-slot=icon], [slot=avatar]))\";\nconst controlStyle = control({ shape: \"default\", icon: true });\n/* An ActionButton at rest is the register's SECONDARY button, and the register has a\n * token for exactly that: the handoff draws its neutral button as `--btn-secondary-bg`\n * inside `--border-subtle` (TerminalGlassLab.tsx:236-238), and s2-button-styles.ts:177\n * already spends `btn-secondary` on Button's secondary variant. ActionButton was the\n * one control still filling itself from the ramp instead, at `gray-100` — opaque on\n * both columns (#e5eaf1 / #43474d), where the token resolves to an opaque light value\n * but the raised glass surface in dark. Three elements, and the two buttons sat side by\n * side in the gallery wearing different fills for the same role. */\nconst defaultActionButtonBackground = {\n  default: {\n    default: \"btn-secondary\",\n    isQuiet: \"transparent\",\n  },\n  isHovered: \"surface-hover\",\n  isPressed: \"surface-hover\",\n  isFocusVisible: \"surface-hover\",\n};\nconst staticActionButtonBackground = {\n  default: {\n    default: \"transparent-overlay-100\",\n    isQuiet: \"transparent\",\n  },\n  isHovered: \"transparent-overlay-200\",\n  isPressed: \"transparent-overlay-200\",\n  isFocusVisible: \"transparent-overlay-200\",\n};\n\nexport const s2ActionButton = style<S2ActionButtonStyleProps>(\n  {\n    ...focusRing(),\n    ...staticColor(),\n    ...controlStyle,\n    display: \"grid\",\n    justifyContent: \"center\",\n    flexShrink: {\n      default: 1,\n      isInGroup: 0,\n    },\n    flexGrow: {\n      isJustified: 1,\n    },\n    flexBasis: {\n      isJustified: 0,\n    },\n    /* Spectrum set action buttons a step heavier than regular buttons so they read\n     * as chrome. The Glasselated register doesn't use weight for that — it has one\n     * control weight (`--type-button` is 400) and separates chrome from action with\n     * fill and rim instead. Left at `control()`'s normal, so an ActionButton beside\n     * a Button no longer looks like a different typeface. */\n    width: \"fit\",\n    userSelect: \"none\",\n    transition: \"default\",\n    forcedColorAdjust: \"none\",\n    position: \"relative\",\n    gridTemplateAreas: {\n      default: [\"icon text\"],\n      [iconOnly]: [\"icon\"],\n      [textOnly]: [\"text\"],\n    },\n    gridTemplateColumns: {\n      default: [\"auto\", \"auto\"],\n      [iconOnly]: [\"auto\"],\n      [textOnly]: [\"auto\"],\n    },\n    backgroundColor: {\n      default: defaultActionButtonBackground,\n      isSelected: {\n        default: baseColor(\"neutral\"),\n        isEmphasized: {\n          default: lightDark(\"accent-900\", \"accent-700\"),\n          isHovered: lightDark(\"accent-1000\", \"accent-800\"),\n          isPressed: lightDark(\"accent-1000\", \"accent-800\"),\n          isFocusVisible: lightDark(\"accent-1000\", \"accent-800\"),\n        },\n        isDisabled: {\n          default: \"gray-100\",\n          isQuiet: \"transparent\",\n        },\n      },\n      forcedColors: {\n        default: \"ButtonFace\",\n        isSelected: {\n          default: \"Highlight\",\n          isDisabled: \"ButtonFace\",\n        },\n      },\n    },\n    color: {\n      default: baseColor(\"neutral\"),\n      isSelected: {\n        default: \"gray-25\",\n        isEmphasized: \"white\",\n      },\n      isDisabled: \"disabled\",\n      forcedColors: {\n        default: \"ButtonText\",\n        isSelected: \"HighlightText\",\n        isDisabled: {\n          default: \"GrayText\",\n        },\n      },\n    },\n    \"--iconPrimary\": {\n      type: \"fill\",\n      value: \"currentColor\",\n    },\n    outlineColor: {\n      default: \"focus-ring\",\n      forcedColors: \"Highlight\",\n    },\n    /* Chrome buttons wear the register's 1px edge like every other button the handoff\n     * draws — including the ones with no fill at all. This said `borderStyle: \"none\"`,\n     * and since `control()` at the `glass` register emits no border keys either, Action,\n     * Quiet, Toggle and ActionMenu all rendered at `border-width: 0px`.\n     *\n     * Quiet keeps a 1px *transparent* edge rather than no edge at all, so toggling\n     * `isQuiet` does not shift the control's content box by a pixel. A selected quiet\n     * button is filled — `isSelected` in the `backgroundColor` map above declares no\n     * `isQuiet` branch, so it overrides the transparent resting fill — and its edge\n     * tracks that fill here for the same reason.\n     *\n     * `control()` sets `boxSizing: \"border-box\"`, so the size ramp is unchanged; only\n     * the content box narrows by 2px. The per-corner `borderTop*Radius` keys below set\n     * different CSS properties than the `borderRadius` arriving from `controlStyle`,\n     * so nothing here collides with them. */\n    borderStyle: \"solid\",\n    borderWidth: 1,\n    borderColor: {\n      default: {\n        default: \"border-subtle\",\n        isQuiet: \"transparent\",\n      },\n      /* Mirrors the `backgroundColor` map's `isSelected` branch stop for stop, which is\n       * the handoff's idiom for a filled control: the edge is drawn in the fill colour.\n       *\n       * `gray-800`, not `baseColor(\"neutral\")`, for the non-emphasized stop: the\n       * `borderColor` map in style/spectrum-theme.ts is `{...baseColors, negative,\n       * disabled, border-subtle, border-default, well-border}` and carries no `neutral`\n       * entry, so the macro would throw `Invalid color neutral` at build time — a crash\n       * this file's `@ts-nocheck` would not have caught. The Spectrum token `neutral`\n       * resolves to `{gray-800}`, so this is the same colour by a name the property\n       * accepts, and it is the same substitution `s2Button` already makes for its\n       * `primary` variant, whose fill is likewise `baseColor(\"neutral\")`. */\n      isSelected: {\n        default: baseColor(\"gray-800\"),\n        isEmphasized: {\n          default: lightDark(\"accent-900\", \"accent-700\"),\n          isHovered: lightDark(\"accent-1000\", \"accent-800\"),\n          isPressed: lightDark(\"accent-1000\", \"accent-800\"),\n          isFocusVisible: lightDark(\"accent-1000\", \"accent-800\"),\n        },\n      },\n      isDisabled: {\n        default: \"disabled\",\n        isQuiet: \"transparent\",\n      },\n      forcedColors: {\n        default: \"ButtonBorder\",\n        isSelected: \"Highlight\",\n        isDisabled: \"GrayText\",\n      },\n    },\n    borderTopStartRadius: {\n      default: controlStyle.borderRadius,\n      density: {\n        compact: {\n          default: \"none\",\n          \":first-child\": controlStyle.borderRadius,\n        },\n      },\n    },\n    borderTopEndRadius: {\n      default: controlStyle.borderRadius,\n      density: {\n        compact: {\n          default: \"none\",\n          orientation: {\n            horizontal: {\n              \":last-child\": controlStyle.borderRadius,\n            },\n            vertical: {\n              \":first-child\": controlStyle.borderRadius,\n            },\n          },\n        },\n      },\n    },\n    borderBottomStartRadius: {\n      default: controlStyle.borderRadius,\n      density: {\n        compact: {\n          default: \"none\",\n          orientation: {\n            horizontal: {\n              \":first-child\": controlStyle.borderRadius,\n            },\n            vertical: {\n              \":last-child\": controlStyle.borderRadius,\n            },\n          },\n        },\n      },\n    },\n    borderBottomEndRadius: {\n      default: controlStyle.borderRadius,\n      density: {\n        compact: {\n          default: \"none\",\n          \":last-child\": controlStyle.borderRadius,\n        },\n      },\n    },\n    zIndex: {\n      isFocusVisible: 2,\n    },\n    disableTapHighlight: true,\n    \"--badgeTop\": {\n      type: \"top\",\n      value: {\n        default: \"calc(self(height)/2 - var(--iconWidth)/2)\",\n        [textOnly]: 0,\n      },\n    },\n    \"--iconWidth\": {\n      type: \"width\",\n      value: fontRelative(20),\n    },\n    \"--badgePosition\": {\n      type: \"width\",\n      value: {\n        default: \"--iconWidth\",\n        [textOnly]: \"full\",\n      },\n    },\n    paddingX: {\n      default: controlStyle.paddingX,\n      [avatarOnly]: 0,\n    },\n    \"--iconMargin\": {\n      type: \"marginStart\",\n      value: {\n        default: fontRelative(-2),\n        [iconOnly]: 0,\n        [avatarOnly]: 0,\n      },\n    },\n  },\n  getAllowedOverrides(),\n);\n\nexport const s2ActionButtonStaticColor = style<S2ActionButtonStyleProps>(\n  {\n    /* `s2ActionButton` now draws its edge in `--border-subtle`, a token meant for glass\n     * surfaces — over an arbitrary static-colour backdrop that reads as a stray hairline.\n     * Static colour re-points the edge at the transparent-overlay ramp, exactly as it\n     * already does for fill, ink and focus ring below, and as `s2Button` does for its\n     * own `isStaticColor` border. This class is merged ON TOP of `s2ActionButton` (both\n     * ActionButton and ToggleButton merge this class after the base one via mergeStyles),\n     * so it overrides per property rather than replacing the whole rule — which is also\n     * why `forcedColors` is restated here, as the sibling `backgroundColor`, `color` and\n     * `outlineColor` maps below all do. Omitting it would drop the base's HCM edge.\n     *\n     * `borderWidth`/`borderStyle` are deliberately NOT restated: they are unconditional\n     * on the base class, so the geometry is already right and only the colour differs. */\n    borderColor: {\n      default: {\n        default: baseColor(\"transparent-overlay-300\"),\n        isQuiet: \"transparent\",\n      },\n      isSelected: baseColor(\"transparent-overlay-800\"),\n      isDisabled: {\n        default: \"transparent-overlay-300\",\n        isQuiet: \"transparent\",\n      },\n      forcedColors: {\n        default: \"ButtonBorder\",\n        isSelected: \"Highlight\",\n        isDisabled: \"GrayText\",\n      },\n    },\n    backgroundColor: {\n      default: staticActionButtonBackground,\n      isSelected: {\n        default: baseColor(\"transparent-overlay-800\"),\n        isDisabled: {\n          default: \"transparent-overlay-100\",\n          isQuiet: \"transparent\",\n        },\n      },\n      forcedColors: {\n        default: \"ButtonFace\",\n        isSelected: {\n          default: \"Highlight\",\n          isDisabled: \"ButtonFace\",\n        },\n      },\n    },\n    color: {\n      default: \"transparent-overlay-1000\",\n      isSelected: \"auto\",\n      isDisabled: \"transparent-overlay-400\",\n      forcedColors: {\n        default: \"ButtonText\",\n        isSelected: \"HighlightText\",\n        isDisabled: {\n          default: \"GrayText\",\n        },\n      },\n    },\n    outlineColor: {\n      default: \"transparent-overlay-1000\",\n      forcedColors: \"Highlight\",\n    },\n  },\n  getAllowedOverrides(),\n);\n\nexport const s2ActionButtonText = style<{ isProgressVisible?: boolean }>({\n  gridArea: \"text\",\n  truncate: true,\n  visibility: {\n    isProgressVisible: \"hidden\",\n  },\n});\n\nexport const s2ToggleButtonText = style({\n  paddingY: \"--labelPadding\",\n  order: 1,\n  truncate: true,\n});\n\nexport const s2ActionButtonPendingIndicator = style<{ isProgressVisible?: boolean }>({\n  position: \"absolute\",\n  top: \"50%\",\n  left: \"50%\",\n  transform: \"translate(-50%, -50%)\",\n  visibility: {\n    default: \"hidden\",\n    isProgressVisible: \"visible\",\n  },\n});\n\nexport const s2ActionButtonProgressCircle = style<{ size: ActionButtonSize }>({\n  size: {\n    size: {\n      XS: 12,\n      S: 14,\n      M: 18,\n      L: 20,\n      XL: 24,\n    },\n  },\n});\n\nexport const s2ActionButtonGroup = style(\n  {\n    display: \"flex\",\n    flexDirection: {\n      orientation: {\n        horizontal: \"row\",\n        vertical: \"column\",\n      },\n    },\n    gap: {\n      density: {\n        compact: 2,\n        regular: {\n          size: {\n            XS: 4,\n            S: 4,\n            M: 8,\n            L: 8,\n            XL: 8,\n          },\n        },\n      },\n    },\n  },\n  getAllowedOverrides({ height: true }),\n);\n\nexport const s2ButtonGroup = style(\n  {\n    display: \"inline-flex\",\n    position: \"relative\",\n    // Cap the group at its container's width so an inline-flex row can actually\n    // overflow: without this the group grows to fit its buttons and the\n    // overflow→vertical switch in ButtonGroup never fires. Mirrors upstream's\n    // `maxWidth: 'full'`.\n    maxWidth: \"full\",\n    gap: {\n      size: {\n        S: 8,\n        M: 12,\n        L: 12,\n        XL: 12,\n      },\n    },\n    flexDirection: {\n      default: \"row\",\n      orientation: {\n        vertical: \"column\",\n      },\n    },\n    alignItems: {\n      default: \"center\",\n      orientation: {\n        vertical: {\n          default: \"start\",\n          align: {\n            end: \"end\",\n            center: \"center\",\n          },\n        },\n      },\n    },\n    justifyContent: {\n      orientation: {\n        vertical: {\n          default: \"start\",\n          align: {\n            end: \"end\",\n            center: \"center\",\n          },\n        },\n      },\n    },\n  },\n  getAllowedOverrides(),\n);\n"],"mappings":";;;AAmDA,MAAa,qBACX,cAA6D,IAAI;AACnE,MAAa,2BACX,cAAmE,IAAI;AACzE,MAAa,2BACX,cAAmE,IAAI;AAEzE,SAAgB,wBAAuE;CACrF,OAAO,WAAW,kBAAkB;AACtC;AAEA,SAAgB,8BAAmF;CACjG,OAAO,WAAW,wBAAwB;AAC5C;AAEA,SAAgB,8BAAmF;CACjG,OAAO,WAAW,wBAAwB;AAC5C;;;ACoBA,MAAa,iBAAA,SAAA,UAAA,OAAA,WAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+Nb,MAAa,4BAAA,SAAA,UAAA,OAAA,WAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEb,MAAa,qBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;AAQb,MAAa,qBAAA;AAMb,MAAa,iCAAA,SAAA,UAAA,OAAA;;;;;;;;;;AAuBb,MAAa,sBAAA,SAAA,UAAA,OAAA,WAAA;;;;;;;;;;;;;;;;;;;;;;AA2Bb,MAAa,gBAAA,SAAA,UAAA,OAAA,WAAA"}
+{"version":3,"file":"s2-action-button-styles.js","names":[],"sources":["../../src/button/group-context.ts","../../src/button/s2-action-button-styles.ts"],"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/ActionButtonGroup.tsx\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ButtonGroup.tsx\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ToggleButtonGroup.tsx\n\n// Port of packages/@react-spectrum/s2/src/ActionButtonGroup.tsx.\n// Port of packages/@react-spectrum/s2/src/ButtonGroup.tsx.\n// Port of packages/@react-spectrum/s2/src/ToggleButtonGroup.tsx.\nimport { createContext, useContext } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport type { StyleString } from \"../style\";\nimport type { ButtonSize, StaticColor } from \"./types\";\nimport type { RefLike, SpectrumContextValue } from \"./spectrum-context\";\n\nexport type ActionButtonSize = \"XS\" | \"S\" | \"M\" | \"L\" | \"XL\";\nexport type ActionButtonDensity = \"regular\" | \"compact\";\nexport type ActionButtonOrientation = \"horizontal\" | \"vertical\";\nexport type ButtonGroupAlign = \"start\" | \"end\" | \"center\";\n\nexport interface ButtonGroupContextValue {\n  children?: JSX.Element;\n  orientation?: ActionButtonOrientation;\n  align?: ButtonGroupAlign;\n  size?: ButtonSize;\n  isDisabled?: boolean;\n  isHidden?: boolean;\n  styles?: StyleString;\n  UNSAFE_className?: string;\n  UNSAFE_style?: JSX.CSSProperties;\n  ref?: RefLike<HTMLDivElement>;\n  slot?: string;\n}\n\nexport interface ActionButtonGroupContextValue {\n  children?: JSX.Element;\n  size?: ActionButtonSize;\n  density?: ActionButtonDensity;\n  orientation?: ActionButtonOrientation;\n  isQuiet?: boolean;\n  isJustified?: boolean;\n  isEmphasized?: boolean;\n  staticColor?: StaticColor;\n  isDisabled?: boolean;\n  styles?: StyleString;\n  UNSAFE_className?: string;\n  UNSAFE_style?: JSX.CSSProperties;\n  ref?: RefLike<HTMLDivElement>;\n  slot?: string;\n}\n\nexport interface ToggleButtonGroupContextValue extends ActionButtonGroupContextValue {\n  selectionMode?: \"single\" | \"multiple\";\n  disallowEmptySelection?: boolean;\n  selectedKeys?: Iterable<Key>;\n  defaultSelectedKeys?: Iterable<Key>;\n  disabledKeys?: Iterable<Key>;\n  onSelectionChange?: (keys: Set<Key>) => void;\n}\n\nexport const ButtonGroupContext =\n  createContext<SpectrumContextValue<ButtonGroupContextValue>>(null);\nexport const ActionButtonGroupContext =\n  createContext<SpectrumContextValue<ActionButtonGroupContextValue>>(null);\nexport const ToggleButtonGroupContext =\n  createContext<SpectrumContextValue<ToggleButtonGroupContextValue>>(null);\n\nexport function useButtonGroupContext(): SpectrumContextValue<ButtonGroupContextValue> {\n  return useContext(ButtonGroupContext);\n}\n\nexport function useActionButtonGroupContext(): SpectrumContextValue<ActionButtonGroupContextValue> {\n  return useContext(ActionButtonGroupContext);\n}\n\nexport function useToggleButtonGroupContext(): SpectrumContextValue<ToggleButtonGroupContextValue> {\n  return useContext(ToggleButtonGroupContext);\n}\n","// @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/ActionButton.tsx\n\nimport {\n  baseColor,\n  focusRing,\n  fontRelative,\n  lightDark,\n  style,\n} from \"../style\" with { type: \"macro\" };\nimport {\n  control,\n  controlSize,\n  getAllowedOverrides,\n  staticColor,\n} from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport type {\n  ActionButtonDensity,\n  ActionButtonOrientation,\n  ActionButtonSize,\n} from \"./group-context\";\nimport type { StaticColor } from \"./types\";\n\nexport interface S2ActionButtonRenderState {\n  isHovered?: boolean;\n  isPressed?: boolean;\n  isFocused?: boolean;\n  isFocusVisible?: boolean;\n  isDisabled?: boolean;\n  isPending?: boolean;\n  isSelected?: boolean;\n}\n\nexport interface S2ActionButtonStyleProps extends S2ActionButtonRenderState {\n  size: ActionButtonSize;\n  staticColor?: StaticColor;\n  isStaticColor: boolean;\n  isQuiet?: boolean;\n  isEmphasized?: boolean;\n  density?: ActionButtonDensity;\n  orientation?: ActionButtonOrientation;\n  isJustified?: boolean;\n  isInGroup: boolean;\n}\n\nconst iconOnly =\n  \":has([slot=icon], [data-slot=icon], [slot=avatar]):not(:has([data-rsp-slot=text]))\";\nconst avatarOnly =\n  \":has([slot=avatar]):not(:has([slot=icon], [data-slot=icon], [data-rsp-slot=text]))\";\nconst textOnly =\n  \":has([data-rsp-slot=text]):not(:has([slot=icon], [data-slot=icon], [slot=avatar]))\";\nconst controlStyle = control({ shape: \"default\", icon: true });\n/* An ActionButton at rest is the register's SECONDARY button, and the register has a\n * token for exactly that: the handoff draws its neutral button as `--btn-secondary-bg`\n * inside `--border-subtle` (TerminalGlassLab.tsx:236-238), and s2-button-styles.ts:177\n * already spends `btn-secondary` on Button's secondary variant. ActionButton was the\n * one control still filling itself from the ramp instead, at `gray-100` — opaque on\n * both columns (#e5eaf1 / #43474d), where the token resolves to an opaque light value\n * but the raised glass surface in dark. Three elements, and the two buttons sat side by\n * side in the gallery wearing different fills for the same role. */\nconst defaultActionButtonBackground = {\n  default: {\n    default: \"btn-secondary\",\n    isQuiet: \"transparent\",\n  },\n  isHovered: \"surface-hover\",\n  isPressed: \"surface-hover\",\n  isFocusVisible: \"surface-hover\",\n};\nconst staticActionButtonBackground = {\n  default: {\n    default: \"transparent-overlay-100\",\n    isQuiet: \"transparent\",\n  },\n  isHovered: \"transparent-overlay-200\",\n  isPressed: \"transparent-overlay-200\",\n  isFocusVisible: \"transparent-overlay-200\",\n};\n\nexport const s2ActionButton = style<S2ActionButtonStyleProps>(\n  {\n    ...focusRing(),\n    ...staticColor(),\n    ...controlStyle,\n    display: \"grid\",\n    justifyContent: \"center\",\n    flexShrink: {\n      default: 1,\n      isInGroup: 0,\n    },\n    flexGrow: {\n      isJustified: 1,\n    },\n    flexBasis: {\n      isJustified: 0,\n    },\n    /* Spectrum set action buttons a step heavier than regular buttons so they read\n     * as chrome. The Glasselated register doesn't use weight for that — it has one\n     * control weight (`--type-button` is 400) and separates chrome from action with\n     * fill and rim instead. Left at `control()`'s normal, so an ActionButton beside\n     * a Button no longer looks like a different typeface. */\n    /* A circle needs a square box: `width: fit` around a zero-padding icon-only button\n     * is barely wider than the glyph, which would render the `pill` radius above as a\n     * lozenge. Matching the control's own height ramp makes it square at every rung\n     * without pinning a px value the ramp would then contradict. */\n    minWidth: {\n      [iconOnly]: controlSize(),\n    },\n    width: {\n      default: \"fit\",\n      isInGroup: {\n        orientation: {\n          vertical: \"100%\",\n        },\n      },\n    },\n    userSelect: \"none\",\n    transition: {\n      default: \"default\",\n      \"@media (prefers-reduced-motion: reduce)\": \"none\",\n    },\n    forcedColorAdjust: \"none\",\n    position: \"relative\",\n    gridTemplateAreas: {\n      default: [\"icon text\"],\n      [iconOnly]: [\"icon\"],\n      [textOnly]: [\"text\"],\n    },\n    gridTemplateColumns: {\n      default: [\"auto\", \"auto\"],\n      [iconOnly]: [\"auto\"],\n      [textOnly]: [\"auto\"],\n    },\n    backgroundColor: {\n      default: defaultActionButtonBackground,\n      isSelected: {\n        default: baseColor(\"neutral\"),\n        isEmphasized: {\n          default: \"interactive-fill\",\n          isHovered: lightDark(\"accent-1000\", \"accent-600\"),\n          isPressed: lightDark(\"accent-1000\", \"accent-600\"),\n          isFocusVisible: lightDark(\"accent-1000\", \"accent-600\"),\n        },\n        isDisabled: {\n          default: \"gray-100\",\n          isQuiet: \"transparent\",\n        },\n      },\n      forcedColors: {\n        default: \"ButtonFace\",\n        isSelected: {\n          default: \"Highlight\",\n          isDisabled: \"ButtonFace\",\n        },\n      },\n    },\n    color: {\n      default: baseColor(\"neutral\"),\n      isSelected: {\n        default: \"gray-25\",\n        isEmphasized: \"white\",\n      },\n      isDisabled: \"disabled\",\n      forcedColors: {\n        default: \"ButtonText\",\n        isSelected: \"HighlightText\",\n        isDisabled: {\n          default: \"GrayText\",\n        },\n      },\n    },\n    \"--iconPrimary\": {\n      type: \"fill\",\n      value: \"currentColor\",\n    },\n    outlineColor: {\n      default: \"focus-ring\",\n      forcedColors: \"Highlight\",\n    },\n    /* Chrome buttons wear the register's 1px edge like every other button the handoff\n     * draws — including the ones with no fill at all. This said `borderStyle: \"none\"`,\n     * and since `control()` at the `glass` register emits no border keys either, Action,\n     * Quiet, Toggle and ActionMenu all rendered at `border-width: 0px`.\n     *\n     * Quiet keeps a 1px *transparent* edge rather than no edge at all, so toggling\n     * `isQuiet` does not shift the control's content box by a pixel. A selected quiet\n     * button is filled — `isSelected` in the `backgroundColor` map above declares no\n     * `isQuiet` branch, so it overrides the transparent resting fill — and its edge\n     * tracks that fill here for the same reason.\n     *\n     * `control()` sets `boxSizing: \"border-box\"`, so the size ramp is unchanged; only\n     * the content box narrows by 2px. The per-corner `borderTop*Radius` keys below set\n     * different CSS properties than the `borderRadius` arriving from `controlStyle`,\n     * so nothing here collides with them. */\n    borderStyle: \"solid\",\n    borderWidth: 1,\n    borderColor: {\n      default: {\n        default: \"border-subtle\",\n        isQuiet: \"transparent\",\n      },\n      /* Mirrors the `backgroundColor` map's `isSelected` branch stop for stop, which is\n       * the handoff's idiom for a filled control: the edge is drawn in the fill colour.\n       *\n       * `gray-800`, not `baseColor(\"neutral\")`, for the non-emphasized stop: the\n       * `borderColor` map in style/spectrum-theme.ts is `{...baseColors, negative,\n       * disabled, border-subtle, border-default, well-border}` and carries no `neutral`\n       * entry, so the macro would throw `Invalid color neutral` at build time — a crash\n       * this file's `@ts-nocheck` would not have caught. The Spectrum token `neutral`\n       * resolves to `{gray-800}`, so this is the same colour by a name the property\n       * accepts, and it is the same substitution `s2Button` already makes for its\n       * `primary` variant, whose fill is likewise `baseColor(\"neutral\")`. */\n      isSelected: {\n        default: baseColor(\"gray-800\"),\n        isEmphasized: {\n          default: \"interactive-fill\",\n          isHovered: lightDark(\"accent-1000\", \"accent-600\"),\n          isPressed: lightDark(\"accent-1000\", \"accent-600\"),\n          isFocusVisible: lightDark(\"accent-1000\", \"accent-600\"),\n        },\n      },\n      isDisabled: {\n        default: \"disabled\",\n        isQuiet: \"transparent\",\n      },\n      forcedColors: {\n        default: \"ButtonBorder\",\n        isSelected: \"Highlight\",\n        isDisabled: \"GrayText\",\n      },\n    },\n    borderTopStartRadius: {\n      default: controlStyle.borderRadius,\n      /* The icon rail is round. The register draws a standalone icon-only chrome button\n       * as a circle (TerminalGlassLab.tsx §01 icon rail, 40x40 `border-radius: 999px`),\n       * and only that shape — a labelled ActionButton keeps the 5px control corner.\n       * `pill` is `height/2`, so paired with the square `minWidth` below it resolves to\n       * a true circle at every rung of the size ramp; the rail's 40x40 is `size=\"L\"`.\n       *\n       * Declared BEFORE `density` on purpose: a compact GROUP flattens its inner corners\n       * so the buttons read as one strip, and that has to keep winning over the circle. */\n      [iconOnly]: \"pill\",\n      density: {\n        compact: {\n          default: \"none\",\n          \":first-child\": controlStyle.borderRadius,\n        },\n      },\n    },\n    borderTopEndRadius: {\n      default: controlStyle.borderRadius,\n      /* The icon rail is round. The register draws a standalone icon-only chrome button\n       * as a circle (TerminalGlassLab.tsx §01 icon rail, 40x40 `border-radius: 999px`),\n       * and only that shape — a labelled ActionButton keeps the 5px control corner.\n       * `pill` is `height/2`, so paired with the square `minWidth` below it resolves to\n       * a true circle at every rung of the size ramp; the rail's 40x40 is `size=\"L\"`.\n       *\n       * Declared BEFORE `density` on purpose: a compact GROUP flattens its inner corners\n       * so the buttons read as one strip, and that has to keep winning over the circle. */\n      [iconOnly]: \"pill\",\n      density: {\n        compact: {\n          default: \"none\",\n          orientation: {\n            horizontal: {\n              \":last-child\": controlStyle.borderRadius,\n            },\n            vertical: {\n              \":first-child\": controlStyle.borderRadius,\n            },\n          },\n        },\n      },\n    },\n    borderBottomStartRadius: {\n      default: controlStyle.borderRadius,\n      /* The icon rail is round. The register draws a standalone icon-only chrome button\n       * as a circle (TerminalGlassLab.tsx §01 icon rail, 40x40 `border-radius: 999px`),\n       * and only that shape — a labelled ActionButton keeps the 5px control corner.\n       * `pill` is `height/2`, so paired with the square `minWidth` below it resolves to\n       * a true circle at every rung of the size ramp; the rail's 40x40 is `size=\"L\"`.\n       *\n       * Declared BEFORE `density` on purpose: a compact GROUP flattens its inner corners\n       * so the buttons read as one strip, and that has to keep winning over the circle. */\n      [iconOnly]: \"pill\",\n      density: {\n        compact: {\n          default: \"none\",\n          orientation: {\n            horizontal: {\n              \":first-child\": controlStyle.borderRadius,\n            },\n            vertical: {\n              \":last-child\": controlStyle.borderRadius,\n            },\n          },\n        },\n      },\n    },\n    borderBottomEndRadius: {\n      default: controlStyle.borderRadius,\n      /* The icon rail is round. The register draws a standalone icon-only chrome button\n       * as a circle (TerminalGlassLab.tsx §01 icon rail, 40x40 `border-radius: 999px`),\n       * and only that shape — a labelled ActionButton keeps the 5px control corner.\n       * `pill` is `height/2`, so paired with the square `minWidth` below it resolves to\n       * a true circle at every rung of the size ramp; the rail's 40x40 is `size=\"L\"`.\n       *\n       * Declared BEFORE `density` on purpose: a compact GROUP flattens its inner corners\n       * so the buttons read as one strip, and that has to keep winning over the circle. */\n      [iconOnly]: \"pill\",\n      density: {\n        compact: {\n          default: \"none\",\n          \":last-child\": controlStyle.borderRadius,\n        },\n      },\n    },\n    zIndex: {\n      isFocusVisible: 2,\n    },\n    disableTapHighlight: true,\n    \"--badgeTop\": {\n      type: \"top\",\n      value: {\n        default: \"calc(self(height)/2 - var(--iconWidth)/2)\",\n        [textOnly]: 0,\n      },\n    },\n    \"--iconWidth\": {\n      type: \"width\",\n      value: \"1lh\",\n    },\n    \"--badgePosition\": {\n      type: \"width\",\n      value: {\n        default: \"--iconWidth\",\n        [textOnly]: \"full\",\n      },\n    },\n    paddingX: {\n      default: controlStyle.paddingX,\n      [avatarOnly]: 0,\n    },\n    \"--iconMargin\": {\n      type: \"marginStart\",\n      value: {\n        default: fontRelative(-2),\n        [iconOnly]: 0,\n        [avatarOnly]: 0,\n      },\n    },\n  },\n  getAllowedOverrides(),\n);\n\nexport const s2ActionButtonStaticColor = style<S2ActionButtonStyleProps>(\n  {\n    /* `s2ActionButton` now draws its edge in `--border-subtle`, a token meant for glass\n     * surfaces — over an arbitrary static-colour backdrop that reads as a stray hairline.\n     * Static colour re-points the edge at the transparent-overlay ramp, exactly as it\n     * already does for fill, ink and focus ring below, and as `s2Button` does for its\n     * own `isStaticColor` border. This class is merged ON TOP of `s2ActionButton` (both\n     * ActionButton and ToggleButton merge this class after the base one via mergeStyles),\n     * so it overrides per property rather than replacing the whole rule — which is also\n     * why `forcedColors` is restated here, as the sibling `backgroundColor`, `color` and\n     * `outlineColor` maps below all do. Omitting it would drop the base's HCM edge.\n     *\n     * `borderWidth`/`borderStyle` are deliberately NOT restated: they are unconditional\n     * on the base class, so the geometry is already right and only the colour differs. */\n    borderColor: {\n      default: {\n        default: baseColor(\"transparent-overlay-300\"),\n        isQuiet: \"transparent\",\n      },\n      isSelected: baseColor(\"transparent-overlay-800\"),\n      isDisabled: {\n        default: \"transparent-overlay-300\",\n        isQuiet: \"transparent\",\n      },\n      forcedColors: {\n        default: \"ButtonBorder\",\n        isSelected: \"Highlight\",\n        isDisabled: \"GrayText\",\n      },\n    },\n    backgroundColor: {\n      default: staticActionButtonBackground,\n      isSelected: {\n        default: baseColor(\"transparent-overlay-800\"),\n        isDisabled: {\n          default: \"transparent-overlay-100\",\n          isQuiet: \"transparent\",\n        },\n      },\n      forcedColors: {\n        default: \"ButtonFace\",\n        isSelected: {\n          default: \"Highlight\",\n          isDisabled: \"ButtonFace\",\n        },\n      },\n    },\n    color: {\n      default: \"transparent-overlay-1000\",\n      isSelected: \"auto\",\n      isDisabled: \"transparent-overlay-400\",\n      forcedColors: {\n        default: \"ButtonText\",\n        isSelected: \"HighlightText\",\n        isDisabled: {\n          default: \"GrayText\",\n        },\n      },\n    },\n    outlineColor: {\n      default: \"transparent-overlay-1000\",\n      forcedColors: \"Highlight\",\n    },\n  },\n  getAllowedOverrides(),\n);\n\nexport const s2ActionButtonText = style<{ isProgressVisible?: boolean }>({\n  gridArea: \"text\",\n  truncate: true,\n  visibility: {\n    isProgressVisible: \"hidden\",\n  },\n});\n\nexport const s2ToggleButtonText = style({\n  paddingY: \"--labelPadding\",\n  order: 1,\n  truncate: true,\n});\n\nexport const s2ActionButtonPendingIndicator = style<{ isProgressVisible?: boolean }>({\n  position: \"absolute\",\n  top: \"50%\",\n  left: \"50%\",\n  transform: \"translate(-50%, -50%)\",\n  visibility: {\n    default: \"hidden\",\n    isProgressVisible: \"visible\",\n  },\n});\n\nexport const s2ActionButtonProgressCircle = style({\n  size: \"1lh\",\n});\n\nexport const s2ActionButtonGroup = style(\n  {\n    display: \"flex\",\n    flexDirection: {\n      orientation: {\n        horizontal: \"row\",\n        vertical: \"column\",\n      },\n    },\n    gap: {\n      density: {\n        compact: 2,\n        regular: {\n          size: {\n            XS: 4,\n            S: 4,\n            M: 8,\n            L: 8,\n            XL: 8,\n          },\n        },\n      },\n    },\n  },\n  getAllowedOverrides({ height: true }),\n);\n\nexport const s2ButtonGroup = style(\n  {\n    display: \"inline-flex\",\n    position: \"relative\",\n    // Cap the group at its container's width so an inline-flex row can actually\n    // overflow: without this the group grows to fit its buttons and the\n    // overflow→vertical switch in ButtonGroup never fires. Mirrors upstream's\n    // `maxWidth: 'full'`.\n    maxWidth: \"full\",\n    gap: {\n      size: {\n        S: 8,\n        M: 12,\n        L: 12,\n        XL: 12,\n      },\n    },\n    flexDirection: {\n      default: \"row\",\n      orientation: {\n        vertical: \"column\",\n      },\n    },\n    alignItems: {\n      default: \"center\",\n      orientation: {\n        vertical: {\n          default: \"start\",\n          align: {\n            end: \"end\",\n            center: \"center\",\n          },\n        },\n      },\n    },\n    justifyContent: {\n      orientation: {\n        vertical: {\n          default: \"start\",\n          align: {\n            end: \"end\",\n            center: \"center\",\n          },\n        },\n      },\n    },\n  },\n  getAllowedOverrides(),\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEA,MAAa,qBACX,cAA6D,IAAI;AACnE,MAAa,2BACX,cAAmE,IAAI;AACzE,MAAa,2BACX,cAAmE,IAAI;AAEzE,SAAgB,wBAAuE;CACrF,OAAO,WAAW,kBAAkB;AACtC;AAEA,SAAgB,8BAAmF;CACjG,OAAO,WAAW,wBAAwB;AAC5C;AAEA,SAAgB,8BAAmF;CACjG,OAAO,WAAW,wBAAwB;AAC5C;;;ACIA,MAAa,iBAAA,SAAA,UAAA,OAAA,WAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkRX;AAEF,MAAa,4BAAA,SAAA,UAAA,OAAA,WAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEX;AAEF,MAAa,qBAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;AAMV;AAEH,MAAa,qBAAA;AAMb,MAAa,iCAAA,SAAA,UAAA,OAAA;;;;;;;;;AASV;AAMH,MAAa,sBAAA,SAAA,UAAA,OAAA,WAAA;;;;;;;;;;;;;;;;;;;;;AAyBX;AAEF,MAAa,gBAAA,SAAA,UAAA,OAAA,WAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDX"}