@primer/react 38.38.0-rc.69771f80e → 38.38.0-rc.775c5b6cb

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/CHANGELOG.md +0 -2
  2. package/dist/SegmentedControl/SegmentedControl-4ef72733.css +2 -0
  3. package/dist/SegmentedControl/SegmentedControl-4ef72733.css.map +1 -0
  4. package/dist/SegmentedControl/SegmentedControl.d.ts +1 -5
  5. package/dist/SegmentedControl/SegmentedControl.js +165 -202
  6. package/dist/SegmentedControl/SegmentedControl.module.css.js +4 -8
  7. package/dist/SegmentedControl/index.d.ts +1 -3
  8. package/dist/index.d.ts +1 -3
  9. package/generated/components.json +2 -57
  10. package/package.json +1 -1
  11. package/dist/SegmentedControl/SegmentedControl-e68d4197.css +0 -2
  12. package/dist/SegmentedControl/SegmentedControl-e68d4197.css.map +0 -1
  13. package/dist/SegmentedControl/SegmentedControlAction.d.ts +0 -12
  14. package/dist/SegmentedControl/SegmentedControlAction.js +0 -111
  15. package/dist/SegmentedControl/SegmentedControlActionContext.js +0 -5
  16. package/dist/SegmentedControl/SegmentedControlDivider.d.ts +0 -9
  17. package/dist/SegmentedControl/SegmentedControlDivider.js +0 -24
package/CHANGELOG.md CHANGED
@@ -6,8 +6,6 @@
6
6
 
7
7
  - [#8300](https://github.com/primer/react/pull/8300) [`3a32d6f`](https://github.com/primer/react/commit/3a32d6ff015b11dd2ac9bf299f8f558bb1e46ef5) Thanks [@joshblack](https://github.com/joshblack)! - Promote AriaStatus and AriaAlert from experimental to stable
8
8
 
9
- - [#8325](https://github.com/primer/react/pull/8325) [`4266cab`](https://github.com/primer/react/commit/4266cab4cb9e744f70cc13a8904c3b29a6499284) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - SegmentedControl: Add a subtle visual variant with group dividers and an optional trailing action child.
10
-
11
9
  ### Patch Changes
12
10
 
13
11
  - [#8343](https://github.com/primer/react/pull/8343) [`7034e1f`](https://github.com/primer/react/commit/7034e1fbb754883b29a05fdf75eea8704359e7bb) Thanks [@llastflowers](https://github.com/llastflowers)! - Don't focus Autocomplete menu items while menu is closed: fix SR announcement bug and menu item skipping bug
package/dist/SegmentedControl/SegmentedControl-4ef72733.css ADDED
@@ -0,0 +1,2 @@
1
+ .prc-SegmentedControl-SegmentedControl-lqIXp{--segmented-control-icon-width:32px;--segmented-control-outer-radius:var(--borderRadius-medium,0.375rem);background-color:var(--controlTrack-bgColor-rest,#e6eaef);border:var(--borderWidth-thin,.0625rem) solid var(--controlTrack-borderColor-rest,transparent);border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;font-size:var(--text-body-size-medium,.875rem);height:32px;margin:0;padding:0;position:relative}@supports (anchor-name:--value){.prc-SegmentedControl-SegmentedControl-lqIXp:before{position-anchor:--segmented-control-current-item;background-color:var(--controlKnob-bgColor-rest,#fff);border:var(--borderWidth-thin,.0625rem) solid var(--controlKnob-borderColor-rest,#d1d9e0);border-radius:var(--segmented-control-outer-radius);content:"";inset:anchor(top) anchor(right) anchor(bottom) anchor(left);position:absolute}@media (prefers-reduced-motion:no-preference){.prc-SegmentedControl-SegmentedControl-lqIXp:before{transition:inset var(--base-duration-200,[ object Object ]) var(--base-easing-easeInOut,.6,0,.2,1)}}}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-narrow=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-narrow=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}@media (min-width:48rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}@media (min-width:87.5rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-wide=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=true]:not([data-full-width-wide=true]),.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-wide=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-narrow=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-narrow=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}}@media (min-width:48rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-regular=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-regular=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}}@media (min-width:87.5rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-wide=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-wide=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-size=small]){font-size:var(--text-body-size-small,.75rem);height:28px}.prc-SegmentedControl-DropdownContainer-ZaPMn{display:none}.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant=dropdown]{display:block}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-narrow=dropdown]{display:block}}@media (min-width:48rem){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-regular=dropdown]{display:block}}@media (min-width:87.5rem){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-wide=dropdown]{display:block}}.prc-SegmentedControl-Item-tSCQh{display:block;flex-grow:1;margin-bottom:-1px;margin-top:-1px;position:relative}.prc-SegmentedControl-Item-tSCQh:not(:last-child){margin-right:1px}.prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:var(--borderColor-default,#d1d9e0);bottom:var(--base-size-8,.5rem);content:"";position:absolute;right:calc(var(--base-size-2,.125rem)*-1);top:var(--base-size-8,.5rem);width:1px}.prc-SegmentedControl-Item-tSCQh:not(:last-child):has(+[data-selected]):after,.prc-SegmentedControl-Item-tSCQh:not(:last-child):where([data-selected]):after{background-color:transparent}.prc-SegmentedControl-Item-tSCQh:first-child{margin-left:-1px}.prc-SegmentedControl-Item-tSCQh:last-child{margin-right:-1px}.prc-SegmentedControl-Item-tSCQh .prc-SegmentedControl-Counter-GmZOI{align-items:center;display:flex;margin-inline-start:var(--base-size-8,.5rem)}.prc-SegmentedControl-Button-E48xz{--segmented-control-button-inner-padding:12px;--segmented-control-button-bg-inset:4px;background-color:transparent;border-color:transparent;border-radius:var(--segmented-control-outer-radius);border-width:0;color:currentColor;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:var(--base-text-weight-normal,400);height:100%;padding:var(--segmented-control-button-bg-inset);width:100%}.prc-SegmentedControl-Button-E48xz svg{fill:var(--fgColor-muted,#59636e);color:var(--fgColor-muted,#59636e)}.prc-SegmentedControl-Button-E48xz:focus:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,#0969da);outline-offset:-1px}.prc-SegmentedControl-Button-E48xz:focus:not(:disabled):not(:focus-visible){outline:1px solid transparent}.prc-SegmentedControl-Button-E48xz:focus-visible:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,#0969da);outline-offset:-1px}.prc-SegmentedControl-Button-E48xz:focus:focus-visible:not(:last-child):after{width:0}.prc-SegmentedControl-Button-E48xz[aria-disabled=true]:not([aria-pressed=true]){background-color:transparent;color:var(--fgColor-disabled,#818b98);cursor:not-allowed}.prc-SegmentedControl-Button-E48xz[aria-disabled=true]:not([aria-pressed=true]) svg{fill:var(--fgColor-disabled,#818b98);color:var(--fgColor-disabled,#818b98)}@media (pointer:coarse){.prc-SegmentedControl-Button-E48xz:before{content:"";left:0;min-height:44px;position:absolute;right:0;top:50%;transform:translateY(-50%)}}.prc-SegmentedControl-IconButton-tlzDE{width:var(--segmented-control-icon-width,32px)}.prc-SegmentedControl-Content-1COlk{align-items:center;background-color:transparent;border-color:transparent;border-radius:calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset)/2);border-style:solid;border-width:var(--borderWidth-thin,.0625rem);display:flex;height:100%;justify-content:center;padding-left:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));padding-right:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));transition:background-color var(--base-duration-200,[ object Object ]) var(--base-easing-easeInOut,.6,0,.2,1)}.prc-SegmentedControl-Button-E48xz[aria-pressed=true]{font-weight:var(--base-text-weight-semibold,600);padding:0}.prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{padding-left:var(--segmented-control-button-inner-padding);padding-right:var(--segmented-control-button-inner-padding);anchor-name:--segmented-control-current-item}@supports not (anchor-name:--value){.prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--controlKnob-bgColor-rest,#fff);border-color:var(--controlKnob-borderColor-rest,#d1d9e0);border-radius:var(--segmented-control-outer-radius)}}.prc-SegmentedControl-Button-E48xz:not([aria-pressed=true],[aria-disabled=true]):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--controlTrack-bgColor-hover,#e0e6eb)}.prc-SegmentedControl-Button-E48xz:not([aria-pressed=true],[aria-disabled=true]):active .prc-SegmentedControl-Content-1COlk{background-color:var(--controlTrack-bgColor-active,#dae0e7)}.prc-SegmentedControl-Text-7S2y2:after{content:attr(data-text);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none;visibility:hidden}.prc-SegmentedControl-LeadingIcon-74n5s{margin-right:var(--base-size-4,.25rem)}
2
+ /*# sourceMappingURL=SegmentedControl-4ef72733.css.map */
package/dist/SegmentedControl/SegmentedControl-4ef72733.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/SegmentedControl/SegmentedControl.module.css.js"],"names":[],"mappings":"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","file":"SegmentedControl-4ef72733.css","sourcesContent":[".SegmentedControl {\n /* TODO: use primitive `control.medium.size` when it is available instead of '32px' */\n --segmented-control-icon-width: 32px;\n --segmented-control-outer-radius: var(--borderRadius-medium);\n\n display: inline-flex;\n\n /* TODO: use primitive `control.{small|medium}.size` when it is available */\n height: 32px;\n padding: 0;\n margin: 0;\n font-size: var(--text-body-size-medium);\n background-color: var(--controlTrack-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest, transparent);\n border-radius: var(--borderRadius-medium);\n position: relative;\n\n @supports (anchor-name: --value) {\n &::before {\n position-anchor: --segmented-control-current-item;\n content: '';\n position: absolute;\n inset: anchor(top) anchor(right) anchor(bottom) anchor(left);\n background-color: var(--controlKnob-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlKnob-borderColor-rest);\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n\n @media (prefers-reduced-motion: no-preference) {\n transition: inset var(--base-duration-200) var(--base-easing-easeInOut);\n }\n }\n }\n\n /* Responsive full-width */\n &[data-full-width='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n\n @media (--viewportRange-narrow) {\n &[data-full-width-narrow='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-narrow='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-full-width-regular='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-regular='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-full-width-wide='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-wide='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n\n &[data-full-width-regular='true']:not([data-full-width-wide='true']) {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n /* Hide when dropdown variant is active */\n &[data-variant='dropdown'] {\n display: none;\n }\n\n /* Handle hideLabels variant - hide button text */\n &[data-variant='hideLabels'] .Text {\n display: none;\n }\n\n @media (--viewportRange-narrow) {\n &[data-variant-narrow='dropdown'] {\n display: none;\n }\n\n &[data-variant-narrow='hideLabels'] .Text {\n display: none;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-variant-regular='dropdown'] {\n display: none;\n }\n\n &[data-variant-regular='hideLabels'] .Text {\n display: none;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-variant-wide='dropdown'] {\n display: none;\n }\n\n &[data-variant-wide='hideLabels'] .Text {\n display: none;\n }\n }\n\n &:where([data-size='small']) {\n /* TODO: use primitive `control.{small|medium}.size` when it is available */\n height: 28px;\n font-size: var(--text-body-size-small);\n }\n}\n\n.DropdownContainer {\n display: none;\n\n /* Show when dropdown variant is active */\n &[data-variant='dropdown'] {\n display: block;\n }\n\n @media (--viewportRange-narrow) {\n &[data-variant-narrow='dropdown'] {\n display: block;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-variant-regular='dropdown'] {\n display: block;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-variant-wide='dropdown'] {\n display: block;\n }\n }\n}\n\n.Item {\n position: relative;\n display: block;\n /* stylelint-disable-next-line primer/spacing */\n margin-top: -1px;\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: -1px;\n flex-grow: 1;\n\n &:not(:last-child) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: 1px;\n\n &::after {\n position: absolute;\n top: var(--base-size-8);\n right: calc(-1 * var(--base-size-2));\n bottom: var(--base-size-8);\n width: 1px;\n content: '';\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- scoped to CSS Module, audited (github/github-ui#17224) */\n &:has(+ [data-selected])::after,\n &:where([data-selected])::after {\n background-color: transparent;\n }\n }\n\n &:first-child {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: -1px;\n }\n\n &:last-child {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: -1px;\n }\n\n .Counter {\n margin-inline-start: var(--base-size-8);\n display: flex;\n align-items: center;\n }\n}\n\n.Button {\n /* TODO: use primitive `primer.control.medium.paddingInline.normal` when it is available */\n --segmented-control-button-inner-padding: 12px;\n --segmented-control-button-bg-inset: 4px;\n\n width: 100%;\n height: 100%;\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--segmented-control-button-bg-inset);\n font-family: inherit;\n font-size: inherit;\n font-weight: var(--base-text-weight-normal);\n color: currentColor;\n cursor: pointer;\n background-color: transparent;\n border-color: transparent;\n border-width: 0;\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n\n & svg {\n fill: var(--fgColor-muted);\n color: var(--fgColor-muted);\n }\n\n /* fallback :focus state */\n &:focus:not(:disabled) {\n outline: var(--base-size-2) solid var(--fgColor-accent);\n outline-offset: -1px;\n box-shadow: none;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n }\n }\n\n /* default focus state */\n &:focus-visible:not(:disabled) {\n outline: var(--base-size-2) solid var(--fgColor-accent);\n outline-offset: -1px;\n box-shadow: none;\n }\n\n /* stylelint-disable-next-line selector-max-specificity */\n &:focus:focus-visible:not(:last-child)::after {\n /* fixes an issue where the focus outline shows over the pseudo-element */\n width: 0;\n }\n\n &[aria-disabled='true']:not([aria-pressed='true']) {\n cursor: not-allowed;\n color: var(--fgColor-disabled);\n background-color: transparent;\n\n & svg {\n fill: var(--fgColor-disabled);\n color: var(--fgColor-disabled);\n }\n }\n\n @media (pointer: coarse) {\n &::before {\n position: absolute;\n top: 50%;\n right: 0;\n left: 0;\n min-height: 44px;\n content: '';\n transform: translateY(-50%);\n }\n }\n}\n\n.IconButton {\n width: var(--segmented-control-icon-width, 32px);\n}\n\n.Content {\n display: flex;\n height: 100%;\n /* stylelint-disable-next-line primer/spacing */\n padding-right: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n /* stylelint-disable-next-line primer/spacing */\n padding-left: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n border-color: transparent;\n border-style: solid;\n border-width: var(--borderWidth-thin);\n background-color: transparent;\n transition: background-color var(--base-duration-200) var(--base-easing-easeInOut);\n\n /*\n innerRadius = outerRadius - distance/2\n https://stackoverflow.com/questions/2932146/math-problem-determine-the-corner-radius-of-an-inner-border-based-on-outer-corn\n */\n /* stylelint-disable-next-line primer/borders */\n border-radius: calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset) / 2);\n align-items: center;\n justify-content: center;\n}\n\n.Button[aria-pressed='true'] {\n padding: 0;\n font-weight: var(--base-text-weight-semibold);\n\n .Content {\n /* stylelint-disable-next-line primer/spacing */\n padding-right: var(--segmented-control-button-inner-padding);\n /* stylelint-disable-next-line primer/spacing */\n padding-left: var(--segmented-control-button-inner-padding);\n anchor-name: --segmented-control-current-item;\n\n @supports not (anchor-name: --value) {\n background-color: var(--controlKnob-bgColor-rest);\n border-color: var(--controlKnob-borderColor-rest);\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n }\n }\n}\n\n.Button:not([aria-pressed='true'], [aria-disabled='true']) {\n &:hover .Content {\n background-color: var(--controlTrack-bgColor-hover);\n }\n\n &:active .Content {\n background-color: var(--controlTrack-bgColor-active);\n }\n}\n\n.Text::after {\n display: block;\n height: 0;\n overflow: hidden;\n font-weight: var(--base-text-weight-semibold);\n pointer-events: none;\n visibility: hidden;\n content: attr(data-text);\n user-select: none;\n}\n\n.LeadingIcon {\n margin-right: var(--base-size-4);\n}\n"]}
package/dist/SegmentedControl/SegmentedControl.d.ts CHANGED
@@ -1,7 +1,5 @@
1
1
  import { FCWithSlotMarker } from "../utils/types/Slots.js";
2
2
  import { ResponsiveValue } from "../hooks/useResponsiveValue.js";
3
- import { SegmentedControlDividerProps } from "./SegmentedControlDivider.js";
4
- import { SegmentedControlActionProps } from "./SegmentedControlAction.js";
5
3
  import { SegmentedControlButtonProps } from "./SegmentedControlButton.js";
6
4
  import { SegmentedControlIconButtonProps } from "./SegmentedControlIconButton.js";
7
5
  import { WidthOnlyViewportRangeKeys } from "../utils/types/ViewportRangeKeys.js";
@@ -15,14 +13,12 @@ type SegmentedControlProps = {
15
13
  fullWidth?: boolean | ResponsiveValue<boolean>; /** The handler that gets called when a segment is selected */
16
14
  onChange?: (selectedIndex: number) => void; /** The size of the buttons */
17
15
  size?: 'small' | 'medium'; /** Configure alternative ways to render the control when it gets rendered in tight spaces */
18
- variant?: 'default' | 'subtle' | Partial<Record<WidthOnlyViewportRangeKeys, 'hideLabels' | 'dropdown' | 'default' | 'subtle'>>;
16
+ variant?: 'default' | Partial<Record<WidthOnlyViewportRangeKeys, 'hideLabels' | 'dropdown' | 'default'>>;
19
17
  className?: string;
20
18
  };
21
19
  declare const SegmentedControl: React.FC<React.PropsWithChildren<SegmentedControlProps>> & {
22
20
  Button: FCWithSlotMarker<React.PropsWithChildren<SegmentedControlButtonProps>>;
23
21
  IconButton: FCWithSlotMarker<React.PropsWithChildren<SegmentedControlIconButtonProps>>;
24
- Divider: FCWithSlotMarker<SegmentedControlDividerProps>;
25
- Action: FCWithSlotMarker<SegmentedControlActionProps>;
26
22
  };
27
23
  //#endregion
28
24
  export { SegmentedControl, SegmentedControlProps };
package/dist/SegmentedControl/SegmentedControl.js CHANGED
@@ -1,23 +1,18 @@
1
- import useIsomorphicLayoutEffect from "../utils/useIsomorphicLayoutEffect.js";
2
1
  import { isSlot } from "../utils/is-slot.js";
3
- import { useSlots } from "../hooks/useSlots.js";
4
2
  import { getResponsiveAttributes } from "../internal/utils/getResponsiveAttributes.js";
5
3
  import { ActionList } from "../ActionList/index.js";
6
4
  import { ActionMenu } from "../ActionMenu/ActionMenu.js";
7
5
  import SegmentedControl_module_css_default from "./SegmentedControl.module.css.js";
8
6
  import SegmentedControlButton from "./SegmentedControlButton.js";
9
7
  import { SegmentedControlIconButton } from "./SegmentedControlIconButton.js";
10
- import { SegmentedControlActionContext } from "./SegmentedControlActionContext.js";
11
- import SegmentedControlAction from "./SegmentedControlAction.js";
12
- import SegmentedControlDivider from "./SegmentedControlDivider.js";
13
8
  import { c } from "react-compiler-runtime";
14
9
  import React, { useRef, useState } from "react";
15
- import { jsx, jsxs } from "react/jsx-runtime";
10
+ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
16
11
  import { clsx } from "clsx";
17
12
  import { isElement } from "react-is";
18
13
  //#region src/SegmentedControl/SegmentedControl.tsx
19
14
  const Root = (t0) => {
20
- const $ = c(39);
15
+ const $ = c(54);
21
16
  let ariaLabel;
22
17
  let ariaLabelledby;
23
18
  let children;
@@ -53,239 +48,207 @@ const Root = (t0) => {
53
48
  const variant = t1 === void 0 ? "default" : t1;
54
49
  const segmentedControlContainerRef = useRef(null);
55
50
  let t2;
56
- if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
57
- t2 = { action: SegmentedControlAction };
58
- $[10] = t2;
59
- } else t2 = $[10];
60
- const [slots, segmentChildren] = useSlots(children, t2);
61
- const actionChild = slots.action;
62
- const segments = segmentChildren.filter(_temp);
63
- const segmentIndices = new Map(segments.map(_temp2));
64
- const segmentCount = segments.length;
65
- const previousSegmentCount = useRef(segmentCount);
66
- useIsomorphicLayoutEffect(() => {
67
- if (previousSegmentCount.current === segmentCount) return;
68
- const segmentedControl = segmentedControlContainerRef.current;
69
- segmentedControl === null || segmentedControl === void 0 || segmentedControl.setAttribute("data-disable-knob-transition", "");
70
- previousSegmentCount.current = segmentCount;
71
- const animationFrame = requestAnimationFrame(() => {
72
- segmentedControl === null || segmentedControl === void 0 || segmentedControl.removeAttribute("data-disable-knob-transition");
73
- });
74
- return () => cancelAnimationFrame(animationFrame);
75
- }, [segmentCount]);
76
- const isUncontrolled = onChange === void 0 || segments.some(_temp3);
77
- const selectedSegments = segments.map(_temp4);
78
- const selectedIndexExternal = selectedSegments.some(_temp5) ? selectedSegments.indexOf(true) : 0;
51
+ if ($[10] !== children || $[11] !== onChange) {
52
+ t2 = onChange === void 0 || React.Children.toArray(children).some(_temp);
53
+ $[10] = children;
54
+ $[11] = onChange;
55
+ $[12] = t2;
56
+ } else t2 = $[12];
57
+ const isUncontrolled = t2;
58
+ let t3;
59
+ if ($[13] !== children) {
60
+ const selectedSegments = React.Children.toArray(children).map(_temp2);
61
+ t3 = selectedSegments.some(_temp3) ? selectedSegments.indexOf(true) : 0;
62
+ $[13] = children;
63
+ $[14] = t3;
64
+ } else t3 = $[14];
65
+ const selectedIndexExternal = t3;
79
66
  const [selectedIndexInternalState, setSelectedIndexInternalState] = useState(selectedIndexExternal);
80
67
  const selectedIndex = isUncontrolled ? selectedIndexInternalState : selectedIndexExternal;
81
- const selectedChild = /*#__PURE__*/ React.isValidElement(segments[selectedIndex]) ? segments[selectedIndex] : void 0;
82
- const getChildIcon = _temp6;
83
- const getChildText = _temp7;
84
- if (!ariaLabel && !ariaLabelledby) console.warn("Use the `aria-label` or `aria-labelledby` prop to provide an accessible label for assistive technologies");
85
- const responsiveVariant = typeof variant === "object" ? variant : void 0;
86
- let t3;
87
- if ($[11] !== responsiveVariant) {
88
- t3 = responsiveVariant ? Object.values(responsiveVariant).includes("dropdown") : false;
89
- $[11] = responsiveVariant;
90
- $[12] = t3;
91
- } else t3 = $[12];
92
- const hasDropdownVariant = t3;
93
- const dropdownContent = hasDropdownVariant && /*#__PURE__*/ jsx("div", {
94
- className: SegmentedControl_module_css_default.DropdownContainer,
95
- ...getResponsiveAttributes("variant", variant),
96
- children: /*#__PURE__*/ jsxs(ActionMenu, { children: [/*#__PURE__*/ jsx(ActionMenu.Button, {
97
- "aria-label": ariaLabel && `${getChildText(selectedChild)}, ${ariaLabel}`,
98
- leadingVisual: getChildIcon(selectedChild),
99
- children: getChildText(selectedChild)
100
- }), /*#__PURE__*/ jsx(ActionMenu.Overlay, {
101
- "aria-labelledby": ariaLabelledby,
102
- children: /*#__PURE__*/ jsxs(ActionList, {
103
- selectionVariant: "single",
104
- children: [segmentChildren.map((child_2, index_0) => {
105
- var _segmentIndices$get;
106
- if (/*#__PURE__*/ React.isValidElement(child_2) && isSlot(child_2, SegmentedControlDivider)) {
107
- var _child_2$key;
108
- return /*#__PURE__*/ jsx(ActionList.Divider, {
109
- className: child_2.props.className,
110
- style: child_2.props.style
111
- }, (_child_2$key = child_2.key) !== null && _child_2$key !== void 0 ? _child_2$key : `segmented-control-divider-${index_0}`);
112
- }
113
- const ChildIcon = getChildIcon(child_2);
114
- if (!/*#__PURE__*/ React.isValidElement(child_2)) return null;
115
- const segmentIndex = (_segmentIndices$get = segmentIndices.get(child_2)) !== null && _segmentIndices$get !== void 0 ? _segmentIndices$get : -1;
116
- return /*#__PURE__*/ jsxs(ActionList.Item, {
117
- selected: segmentIndex === selectedIndex,
118
- onSelect: (event) => {
119
- isUncontrolled && setSelectedIndexInternalState(segmentIndex);
120
- onChange && onChange(segmentIndex);
121
- child_2.props.onClick && child_2.props.onClick(event);
122
- },
123
- children: [
124
- ChildIcon,
125
- " ",
126
- getChildText(child_2)
127
- ]
128
- }, `segmented-control-action-btn-${index_0}`);
129
- }), actionChild && /*#__PURE__*/ jsx(SegmentedControlActionContext.Provider, {
130
- value: "menu",
131
- children: actionChild
132
- })]
133
- })
134
- })] })
135
- });
68
+ let hasDropdownVariant;
136
69
  let t4;
137
- if ($[13] !== className) {
138
- t4 = clsx(SegmentedControl_module_css_default.SegmentedControl, className);
139
- $[13] = className;
140
- $[14] = t4;
141
- } else t4 = $[14];
70
+ if ($[15] !== ariaLabel || $[16] !== ariaLabelledby || $[17] !== children || $[18] !== isUncontrolled || $[19] !== onChange || $[20] !== selectedIndex || $[21] !== variant) {
71
+ const selectedChild = /*#__PURE__*/ React.isValidElement(React.Children.toArray(children)[selectedIndex]) ? React.Children.toArray(children)[selectedIndex] : void 0;
72
+ const getChildIcon = _temp4;
73
+ const getChildText = _temp5;
74
+ if (!ariaLabel && !ariaLabelledby) console.warn("Use the `aria-label` or `aria-labelledby` prop to provide an accessible label for assistive technologies");
75
+ const responsiveVariant = typeof variant === "object" ? variant : void 0;
76
+ let t5;
77
+ if ($[24] !== responsiveVariant) {
78
+ t5 = responsiveVariant ? Object.values(responsiveVariant).includes("dropdown") : false;
79
+ $[24] = responsiveVariant;
80
+ $[25] = t5;
81
+ } else t5 = $[25];
82
+ hasDropdownVariant = t5;
83
+ t4 = hasDropdownVariant && /*#__PURE__*/ jsx("div", {
84
+ className: SegmentedControl_module_css_default.DropdownContainer,
85
+ ...getResponsiveAttributes("variant", variant),
86
+ children: /*#__PURE__*/ jsxs(ActionMenu, { children: [/*#__PURE__*/ jsx(ActionMenu.Button, {
87
+ "aria-label": ariaLabel && `${getChildText(selectedChild)}, ${ariaLabel}`,
88
+ leadingVisual: getChildIcon(selectedChild),
89
+ children: getChildText(selectedChild)
90
+ }), /*#__PURE__*/ jsx(ActionMenu.Overlay, {
91
+ "aria-labelledby": ariaLabelledby,
92
+ children: /*#__PURE__*/ jsx(ActionList, {
93
+ selectionVariant: "single",
94
+ children: React.Children.map(children, (child_1, index) => {
95
+ const ChildIcon = getChildIcon(child_1);
96
+ if (!/*#__PURE__*/ React.isValidElement(child_1)) return null;
97
+ return /*#__PURE__*/ jsxs(ActionList.Item, {
98
+ selected: index === selectedIndex,
99
+ onSelect: (event) => {
100
+ isUncontrolled && setSelectedIndexInternalState(index);
101
+ onChange && onChange(index);
102
+ child_1.props.onClick && child_1.props.onClick(event);
103
+ },
104
+ children: [
105
+ ChildIcon,
106
+ " ",
107
+ getChildText(child_1)
108
+ ]
109
+ }, `segmented-control-action-btn-${index}`);
110
+ })
111
+ })
112
+ })] })
113
+ });
114
+ $[15] = ariaLabel;
115
+ $[16] = ariaLabelledby;
116
+ $[17] = children;
117
+ $[18] = isUncontrolled;
118
+ $[19] = onChange;
119
+ $[20] = selectedIndex;
120
+ $[21] = variant;
121
+ $[22] = hasDropdownVariant;
122
+ $[23] = t4;
123
+ } else {
124
+ hasDropdownVariant = $[22];
125
+ t4 = $[23];
126
+ }
127
+ const dropdownContent = t4;
142
128
  let t5;
143
- if ($[15] !== fullWidth) {
144
- t5 = getResponsiveAttributes("full-width", fullWidth);
145
- $[15] = fullWidth;
146
- $[16] = t5;
147
- } else t5 = $[16];
129
+ if ($[26] !== className) {
130
+ t5 = clsx(SegmentedControl_module_css_default.SegmentedControl, className);
131
+ $[26] = className;
132
+ $[27] = t5;
133
+ } else t5 = $[27];
148
134
  let t6;
149
- if ($[17] !== variant) {
150
- t6 = getResponsiveAttributes("variant", variant);
151
- $[17] = variant;
152
- $[18] = t6;
153
- } else t6 = $[18];
154
- const t7 = "SegmentedControl";
155
- const t8 = segmentChildren.map((child_3, index_1) => {
156
- var _segmentIndices$get2, _child_3$key2;
157
- if (/*#__PURE__*/ React.isValidElement(child_3) && isSlot(child_3, SegmentedControlDivider)) {
158
- var _child_3$key;
159
- return /*#__PURE__*/ React.cloneElement(child_3, { key: (_child_3$key = child_3.key) !== null && _child_3$key !== void 0 ? _child_3$key : `segmented-control-divider-${index_1}` });
160
- }
161
- if (!/*#__PURE__*/ React.isValidElement(child_3)) return null;
162
- const segmentIndex_0 = (_segmentIndices$get2 = segmentIndices.get(child_3)) !== null && _segmentIndices$get2 !== void 0 ? _segmentIndices$get2 : -1;
163
- const sharedChildProps = {
164
- onClick: onChange ? (event_0) => {
165
- if (!(child_3.props.disabled === true || child_3.props["aria-disabled"] === "true" || child_3.props["aria-disabled"] === true)) {
166
- onChange(segmentIndex_0);
167
- isUncontrolled && setSelectedIndexInternalState(segmentIndex_0);
168
- child_3.props.onClick && child_3.props.onClick(event_0);
169
- }
170
- } : (event_1) => {
171
- if (!(child_3.props.disabled === true || child_3.props["aria-disabled"] === "true" || child_3.props["aria-disabled"] === true)) {
172
- child_3.props.onClick && child_3.props.onClick(event_1);
173
- isUncontrolled && setSelectedIndexInternalState(segmentIndex_0);
174
- }
175
- },
176
- selected: segmentIndex_0 === selectedIndex,
177
- style: {
178
- "--separator-color": segmentIndex_0 === selectedIndex || segmentIndex_0 === selectedIndex - 1 ? "transparent" : "var(--borderColor-default)",
179
- ...child_3.props.style
180
- }
181
- };
182
- return /*#__PURE__*/ React.cloneElement(child_3, {
183
- key: (_child_3$key2 = child_3.key) !== null && _child_3$key2 !== void 0 ? _child_3$key2 : `segmented-control-item-${index_1}`,
184
- ...sharedChildProps
185
- });
186
- });
135
+ if ($[28] !== fullWidth) {
136
+ t6 = getResponsiveAttributes("full-width", fullWidth);
137
+ $[28] = fullWidth;
138
+ $[29] = t6;
139
+ } else t6 = $[29];
140
+ let t7;
141
+ if ($[30] !== variant) {
142
+ t7 = getResponsiveAttributes("variant", variant);
143
+ $[30] = variant;
144
+ $[31] = t7;
145
+ } else t7 = $[31];
146
+ let t8;
147
+ if ($[32] !== children || $[33] !== isUncontrolled || $[34] !== onChange || $[35] !== selectedIndex) {
148
+ let t9;
149
+ if ($[37] !== isUncontrolled || $[38] !== onChange || $[39] !== selectedIndex) {
150
+ t9 = (child_2, index_0) => {
151
+ if (!/*#__PURE__*/ React.isValidElement(child_2)) return null;
152
+ const sharedChildProps = {
153
+ onClick: onChange ? (event_0) => {
154
+ if (!(child_2.props.disabled === true || child_2.props["aria-disabled"] === "true" || child_2.props["aria-disabled"] === true)) {
155
+ onChange(index_0);
156
+ isUncontrolled && setSelectedIndexInternalState(index_0);
157
+ child_2.props.onClick && child_2.props.onClick(event_0);
158
+ }
159
+ } : (event_1) => {
160
+ if (!(child_2.props.disabled === true || child_2.props["aria-disabled"] === "true" || child_2.props["aria-disabled"] === true)) {
161
+ child_2.props.onClick && child_2.props.onClick(event_1);
162
+ isUncontrolled && setSelectedIndexInternalState(index_0);
163
+ }
164
+ },
165
+ selected: index_0 === selectedIndex,
166
+ style: {
167
+ "--separator-color": index_0 === selectedIndex || index_0 === selectedIndex - 1 ? "transparent" : "var(--borderColor-default)",
168
+ ...child_2.props.style
169
+ }
170
+ };
171
+ return /*#__PURE__*/ React.cloneElement(child_2, sharedChildProps);
172
+ };
173
+ $[37] = isUncontrolled;
174
+ $[38] = onChange;
175
+ $[39] = selectedIndex;
176
+ $[40] = t9;
177
+ } else t9 = $[40];
178
+ t8 = React.Children.map(children, t9);
179
+ $[32] = children;
180
+ $[33] = isUncontrolled;
181
+ $[34] = onChange;
182
+ $[35] = selectedIndex;
183
+ $[36] = t8;
184
+ } else t8 = $[36];
187
185
  let t9;
188
- if ($[19] !== ariaLabel || $[20] !== ariaLabelledby || $[21] !== rest || $[22] !== size || $[23] !== t4 || $[24] !== t5 || $[25] !== t6 || $[26] !== t8) {
186
+ if ($[41] !== ariaLabel || $[42] !== ariaLabelledby || $[43] !== rest || $[44] !== size || $[45] !== t5 || $[46] !== t6 || $[47] !== t7 || $[48] !== t8) {
189
187
  t9 = /*#__PURE__*/ jsx("ul", {
190
188
  "aria-label": ariaLabel,
191
189
  "aria-labelledby": ariaLabelledby,
192
190
  ref: segmentedControlContainerRef,
193
- className: t4,
194
- ...t5,
191
+ className: t5,
195
192
  ...t6,
193
+ ...t7,
196
194
  "data-size": size,
197
195
  ...rest,
198
- "data-component": t7,
196
+ "data-component": "SegmentedControl",
199
197
  children: t8
200
198
  });
201
- $[19] = ariaLabel;
202
- $[20] = ariaLabelledby;
203
- $[21] = rest;
204
- $[22] = size;
205
- $[23] = t4;
206
- $[24] = t5;
207
- $[25] = t6;
208
- $[26] = t8;
209
- $[27] = t9;
210
- } else t9 = $[27];
199
+ $[41] = ariaLabel;
200
+ $[42] = ariaLabelledby;
201
+ $[43] = rest;
202
+ $[44] = size;
203
+ $[45] = t5;
204
+ $[46] = t6;
205
+ $[47] = t7;
206
+ $[48] = t8;
207
+ $[49] = t9;
208
+ } else t9 = $[49];
211
209
  const segmentedControlContent = t9;
212
210
  let t10;
213
- if ($[28] !== actionChild || $[29] !== variant) {
214
- t10 = actionChild && /*#__PURE__*/ jsx("div", {
215
- className: SegmentedControl_module_css_default.InlineAction,
216
- ...getResponsiveAttributes("variant", variant),
217
- children: /*#__PURE__*/ jsx(SegmentedControlActionContext.Provider, {
218
- value: "inline",
219
- children: actionChild
220
- })
221
- });
222
- $[28] = actionChild;
223
- $[29] = variant;
224
- $[30] = t10;
225
- } else t10 = $[30];
226
- const inlineActionContent = t10;
227
- let t11;
228
- if ($[31] !== actionChild || $[32] !== dropdownContent || $[33] !== fullWidth || $[34] !== hasDropdownVariant || $[35] !== inlineActionContent || $[36] !== segmentedControlContent || $[37] !== size) {
229
- t11 = hasDropdownVariant || actionChild ? /*#__PURE__*/ jsxs("div", {
230
- className: SegmentedControl_module_css_default.DropdownGroup,
231
- "data-size": size,
232
- ...getResponsiveAttributes("full-width", fullWidth),
233
- children: [
234
- dropdownContent,
235
- segmentedControlContent,
236
- inlineActionContent
237
- ]
238
- }) : segmentedControlContent;
239
- $[31] = actionChild;
240
- $[32] = dropdownContent;
241
- $[33] = fullWidth;
242
- $[34] = hasDropdownVariant;
243
- $[35] = inlineActionContent;
244
- $[36] = segmentedControlContent;
245
- $[37] = size;
246
- $[38] = t11;
247
- } else t11 = $[38];
248
- return t11;
211
+ if ($[50] !== dropdownContent || $[51] !== hasDropdownVariant || $[52] !== segmentedControlContent) {
212
+ t10 = hasDropdownVariant ? /*#__PURE__*/ jsxs(Fragment$1, { children: [dropdownContent, segmentedControlContent] }) : segmentedControlContent;
213
+ $[50] = dropdownContent;
214
+ $[51] = hasDropdownVariant;
215
+ $[52] = segmentedControlContent;
216
+ $[53] = t10;
217
+ } else t10 = $[53];
218
+ return t10;
249
219
  };
250
220
  Root.displayName = "SegmentedControl";
251
221
  const SegmentedControl = Object.assign(Root, {
252
222
  Button: SegmentedControlButton,
253
- IconButton: SegmentedControlIconButton,
254
- Divider: SegmentedControlDivider,
255
- Action: SegmentedControlAction
223
+ IconButton: SegmentedControlIconButton
256
224
  });
257
225
  function _temp(child) {
258
- return /*#__PURE__*/ React.isValidElement(child) && !isSlot(child, SegmentedControlDivider);
259
- }
260
- function _temp2(segment, index) {
261
- return [segment, index];
226
+ return /*#__PURE__*/ React.isValidElement(child) && child.props.defaultSelected !== void 0;
262
227
  }
263
- function _temp3(child_0) {
264
- return /*#__PURE__*/ React.isValidElement(child_0) && child_0.props.defaultSelected !== void 0;
228
+ function _temp2(child_0) {
229
+ return /*#__PURE__*/ React.isValidElement(child_0) && (child_0.props.defaultSelected || child_0.props.selected);
265
230
  }
266
- function _temp4(child_1) {
267
- return /*#__PURE__*/ React.isValidElement(child_1) && (child_1.props.defaultSelected || child_1.props.selected);
268
- }
269
- function _temp5(isSelected) {
231
+ function _temp3(isSelected) {
270
232
  return isSelected;
271
233
  }
272
- function _temp6(childArg) {
234
+ function _temp4(childArg) {
273
235
  if (/*#__PURE__*/ React.isValidElement(childArg) && (childArg.type === SegmentedControlButton || isSlot(childArg, SegmentedControlButton))) {
274
236
  var _childArg$props$leadi;
275
237
  const leadingVisual = (_childArg$props$leadi = childArg.props.leadingVisual) !== null && _childArg$props$leadi !== void 0 ? _childArg$props$leadi : childArg.props.leadingIcon;
276
238
  if (leadingVisual) {
277
239
  if (isElement(leadingVisual)) return leadingVisual;
278
- return /*#__PURE__*/ jsx(leadingVisual, {});
240
+ else return /*#__PURE__*/ jsx(leadingVisual, {});
279
241
  }
280
242
  }
281
243
  if (/*#__PURE__*/ React.isValidElement(childArg) && (childArg.type === SegmentedControlIconButton || isSlot(childArg, SegmentedControlIconButton))) {
282
- if (isElement(childArg.props.icon)) return childArg.props.icon;
283
- const Icon = childArg.props.icon;
284
- return /*#__PURE__*/ jsx(Icon, {});
244
+ if (isElement(childArg.props.icon)) {} else {
245
+ const Icon = childArg.props.icon;
246
+ return /*#__PURE__*/ jsx(Icon, {});
247
+ }
285
248
  }
286
249
  return null;
287
250
  }
288
- function _temp7(childArg_0) {
251
+ function _temp5(childArg_0) {
289
252
  if (/*#__PURE__*/ React.isValidElement(childArg_0) && (childArg_0.type === SegmentedControlButton || isSlot(childArg_0, SegmentedControlButton))) return childArg_0.props.children;
290
253
  return /*#__PURE__*/ React.isValidElement(childArg_0) ? childArg_0.props["aria-label"] : null;
291
254
  }
package/dist/SegmentedControl/SegmentedControl.module.css.js CHANGED
@@ -1,18 +1,14 @@
1
- import "./SegmentedControl-e68d4197.css";
1
+ import "./SegmentedControl-4ef72733.css";
2
2
  //#region src/SegmentedControl/SegmentedControl.module.css.js
3
3
  var SegmentedControl_module_css_default = {
4
4
  "SegmentedControl": "prc-SegmentedControl-SegmentedControl-lqIXp",
5
- "Item": "prc-SegmentedControl-Item-tSCQh",
6
- "Button": "prc-SegmentedControl-Button-E48xz",
7
- "Content": "prc-SegmentedControl-Content-1COlk",
8
5
  "Text": "prc-SegmentedControl-Text-7S2y2",
9
- "DropdownGroup": "prc-SegmentedControl-DropdownGroup-9SmpX",
10
- "InlineAction": "prc-SegmentedControl-InlineAction-4qmw0",
11
6
  "DropdownContainer": "prc-SegmentedControl-DropdownContainer-ZaPMn",
7
+ "Item": "prc-SegmentedControl-Item-tSCQh",
12
8
  "Counter": "prc-SegmentedControl-Counter-GmZOI",
13
- "ActionItem": "prc-SegmentedControl-ActionItem-2V1ou",
14
- "ActionButton": "prc-SegmentedControl-ActionButton-Q5fnw",
9
+ "Button": "prc-SegmentedControl-Button-E48xz",
15
10
  "IconButton": "prc-SegmentedControl-IconButton-tlzDE",
11
+ "Content": "prc-SegmentedControl-Content-1COlk",
16
12
  "LeadingIcon": "prc-SegmentedControl-LeadingIcon-74n5s"
17
13
  };
18
14
  //#endregion
package/dist/SegmentedControl/index.d.ts CHANGED
@@ -1,6 +1,4 @@
1
- import { SegmentedControlDividerProps } from "./SegmentedControlDivider.js";
2
- import { SegmentedControlActionProps } from "./SegmentedControlAction.js";
3
1
  import { SegmentedControlButtonProps } from "./SegmentedControlButton.js";
4
2
  import { SegmentedControlIconButtonProps } from "./SegmentedControlIconButton.js";
5
3
  import { SegmentedControl, SegmentedControlProps } from "./SegmentedControl.js";
6
- export { SegmentedControl, type SegmentedControlActionProps, type SegmentedControlButtonProps, type SegmentedControlDividerProps, type SegmentedControlIconButtonProps, SegmentedControlProps };
4
+ export { SegmentedControl, type SegmentedControlButtonProps, type SegmentedControlIconButtonProps, SegmentedControlProps };
package/dist/index.d.ts CHANGED
@@ -88,8 +88,6 @@ import { ProgressBarItemProps, ProgressBarProps } from "./ProgressBar/ProgressBa
88
88
  import { ProgressBar } from "./ProgressBar/index.js";
89
89
  import _default$10, { RadioGroupProps } from "./RadioGroup/RadioGroup.js";
90
90
  import RelativeTime, { RelativeTimeProps } from "./RelativeTime/RelativeTime.js";
91
- import { SegmentedControlDividerProps } from "./SegmentedControl/SegmentedControlDivider.js";
92
- import { SegmentedControlActionProps } from "./SegmentedControl/SegmentedControlAction.js";
93
91
  import { SegmentedControlButtonProps } from "./SegmentedControl/SegmentedControlButton.js";
94
92
  import { SegmentedControlIconButtonProps } from "./SegmentedControl/SegmentedControlIconButton.js";
95
93
  import { SegmentedControl, SegmentedControlProps } from "./SegmentedControl/SegmentedControl.js";
@@ -123,4 +121,4 @@ import { ActionsProps, ChildrenPropTypes, PageHeader, PageHeaderProps, TitleArea
123
121
  import { SkeletonBox, SkeletonBoxProps } from "./Skeleton/SkeletonBox.js";
124
122
  import { ActionMenu, ActionMenuAnchorProps, ActionMenuButtonProps, ActionMenuProps } from "./ActionMenu/ActionMenu.js";
125
123
  import Overlay, { OverlayProps } from "./Overlay/Overlay.js";
126
- export { ActionBar, type ActionBarProps, ActionList, type ActionListDescriptionProps, type ActionListDividerProps, type ActionListGroupHeadingProps, type ActionListGroupHeadingTrailingActionProps, type ActionListGroupProps, type ActionListItemProps, type ActionListLeadingVisualProps, type ActionListLinkItemProps, type ActionListProps, type ActionListTrailingActionProps, type ActionListTrailingVisualProps, ActionMenu, type ActionMenuAnchorProps, type ActionMenuButtonProps, type ActionMenuProps, AnchoredOverlay, type AnchoredOverlayProps, type AnchoredPositionHookSettings, AriaAlert, type AriaAlertProps, AriaStatus, type AriaStatusProps, _default as Autocomplete, type AutocompleteInputProps, type AutocompleteMenuProps, type AutocompleteOverlayProps, Avatar, type AvatarProps, AvatarStack, type AvatarStackProps, Banner, type BannerProps, BaseStyles, type BaseStylesProps, _default$1 as BranchName, type BranchNameProps, Breadcrumb, type BreadcrumbItemProps, type BreadcrumbProps, _default$2 as Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsProps, ButtonComponent as Button, ButtonBase, type ButtonBaseProps, ButtonGroup, type ButtonGroupProps, type ButtonProps, _default$3 as Checkbox, _default$4 as CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, _default$5 as CircleBadge, type CircleBadgeIconProps, type CircleBadgeProps, ConfirmationDialog, type ConfirmationDialogProps, CounterLabel, type CounterLabelProps, type CustomWidthOptions, Details, type DetailsProps, Dialog, type DialogButtonProps, type DialogHeaderProps, type DialogHeight, type DialogProps, type DialogWidth, DragHandle, type DragHandleProps, type FCWithSlotMarker, Flash, type FlashProps, FocusKeys, type FocusTrapHookSettings, type FocusZoneHookSettings, _default$6 as FormControl, type FormControlCaptionProps, type Props as FormControlLabelProps, type FormControlProps, type FormControlValidationProps, _default$7 as Header, type HeaderItemProps, type HeaderLinkProps, type HeaderProps, Heading, type HeadingProps, IconButton, type IconButtonProps, IssueLabelToken, type IssueLabelTokenProps, Label, type LabelColorOptions, LabelGroup, type LabelGroupProps, type LabelProps, Link, LinkButton, type LinkButtonProps, type LinkProps, NavList, type NavListDividerProps, type NavListGroupHeadingProps, type NavListGroupProps, type NavListItemProps, type NavListLeadingVisualProps, type NavListProps, type NavListSubNavProps, type NavListTrailingVisualProps, Overlay, type OverlayProps, PageHeader, type ActionsProps as PageHeaderActionsProps, type ChildrenPropTypes as PageHeaderChildrenPropTypes, type PageHeaderProps, type TitleAreaProps as PageHeaderTitleAreaProps, type TitleProps as PageHeaderTitleProps, PageLayout, type PageLayoutContentProps, type PageLayoutFooterProps, type PageLayoutHeaderProps, type PageLayoutPaneProps, type PageLayoutProps, Pagination, type PaginationProps, type PaneWidth, type PaneWidthValue, _default$8 as Popover, type PopoverContentProps, type PopoverProps, Portal, PortalContext, type PortalProps, ProgressBar, type ProgressBarItemProps, type ProgressBarProps, _default$9 as Radio, _default$10 as RadioGroup, type RadioGroupProps, type RadioProps, RelativeTime, type RelativeTimeProps, type ResponsiveValue, SegmentedControl, type SegmentedControlActionProps, type SegmentedControlButtonProps, type SegmentedControlDividerProps, type SegmentedControlIconButtonProps, type SegmentedControlProps, _default$11 as Select, SelectPanel, type GroupedListProps as SelectPanelGroupedListProps, type ItemInput as SelectPanelItemInput, type FilteredActionListItemProps as SelectPanelItemProps, type SelectPanelProps, type SelectProps, _default$12 as SideNav, type SideNavLinkProps, type SideNavProps, SkeletonBox, type SkeletonBoxProps, type SlotMarker, Spinner, type SpinnerProps, SplitPageLayout, type SplitPageLayoutContentProps, type SplitPageLayoutFooterProps, type SplitPageLayoutHeaderProps, type SplitPageLayoutPaneProps, type SplitPageLayoutProps, Stack, type StackItemProps, type StackProps, StateLabel, type StateLabelProps, _default$13 as SubNav, type SubNavLinkProps, type SubNavLinksProps, type SubNavProps, _default$14 as Text, _default$15 as TextInput, type TextInputActionProps, type TextInputProps, _default$16 as TextInputWithTokens, type TextInputWithTokensProps, type TextProps, _default$17 as Textarea, type TextareaProps, type ThemeColorPaths, ThemeProvider, type ThemeProviderProps, type ThemeShadowPaths, _default$18 as Timeline, type TimelineActionsProps, type TimelineAvatarProps, type TimelineBadgeProps, type TimelineBadgeVariant, type TimelineBodyProps, type TimelineBreakProps, type TimelineItemProps, type TimelineItemsProps, type TimelineProps, ToggleSwitch, type ToggleSwitchProps, Token, type TokenProps, Tooltip, type TooltipProps, type TouchOrMouseEvent, TreeView, type TreeViewErrorDialogProps, type TreeViewItemProps, type TreeViewProps, type TreeViewSubTreeProps, type TreeViewVisualProps, Truncate, type TruncateProps, UnderlineNav, type UnderlineNavItemProps, type UnderlineNavProps, type UsePaneWidthOptions, type UsePaneWidthResult, VisuallyHidden, type VisuallyHiddenProps, type WithSlotMarker, asSlot, createComponent, defaultPaneWidth, isSlot, registerPortalRoot, theme, useAnchoredPosition, useColorSchemeVar, useConfirm, useDetails, useFocusTrap, useFocusZone, useFormControlForwardedProps, useId, useIsomorphicLayoutEffect, useMergedRefs, useOnEscapePress, useOnOutsideClick, useOpenAndCloseFocus, useOverlay, usePaneWidth, useProvidedRefOrCreate, useRefObjectAsForwardedRef, useResizeObserver, useResponsiveValue, useRovingTabIndex, useSafeTimeout, useSlots, useSyncedState, useTheme };
124
+ export { ActionBar, type ActionBarProps, ActionList, type ActionListDescriptionProps, type ActionListDividerProps, type ActionListGroupHeadingProps, type ActionListGroupHeadingTrailingActionProps, type ActionListGroupProps, type ActionListItemProps, type ActionListLeadingVisualProps, type ActionListLinkItemProps, type ActionListProps, type ActionListTrailingActionProps, type ActionListTrailingVisualProps, ActionMenu, type ActionMenuAnchorProps, type ActionMenuButtonProps, type ActionMenuProps, AnchoredOverlay, type AnchoredOverlayProps, type AnchoredPositionHookSettings, AriaAlert, type AriaAlertProps, AriaStatus, type AriaStatusProps, _default as Autocomplete, type AutocompleteInputProps, type AutocompleteMenuProps, type AutocompleteOverlayProps, Avatar, type AvatarProps, AvatarStack, type AvatarStackProps, Banner, type BannerProps, BaseStyles, type BaseStylesProps, _default$1 as BranchName, type BranchNameProps, Breadcrumb, type BreadcrumbItemProps, type BreadcrumbProps, _default$2 as Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsProps, ButtonComponent as Button, ButtonBase, type ButtonBaseProps, ButtonGroup, type ButtonGroupProps, type ButtonProps, _default$3 as Checkbox, _default$4 as CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, _default$5 as CircleBadge, type CircleBadgeIconProps, type CircleBadgeProps, ConfirmationDialog, type ConfirmationDialogProps, CounterLabel, type CounterLabelProps, type CustomWidthOptions, Details, type DetailsProps, Dialog, type DialogButtonProps, type DialogHeaderProps, type DialogHeight, type DialogProps, type DialogWidth, DragHandle, type DragHandleProps, type FCWithSlotMarker, Flash, type FlashProps, FocusKeys, type FocusTrapHookSettings, type FocusZoneHookSettings, _default$6 as FormControl, type FormControlCaptionProps, type Props as FormControlLabelProps, type FormControlProps, type FormControlValidationProps, _default$7 as Header, type HeaderItemProps, type HeaderLinkProps, type HeaderProps, Heading, type HeadingProps, IconButton, type IconButtonProps, IssueLabelToken, type IssueLabelTokenProps, Label, type LabelColorOptions, LabelGroup, type LabelGroupProps, type LabelProps, Link, LinkButton, type LinkButtonProps, type LinkProps, NavList, type NavListDividerProps, type NavListGroupHeadingProps, type NavListGroupProps, type NavListItemProps, type NavListLeadingVisualProps, type NavListProps, type NavListSubNavProps, type NavListTrailingVisualProps, Overlay, type OverlayProps, PageHeader, type ActionsProps as PageHeaderActionsProps, type ChildrenPropTypes as PageHeaderChildrenPropTypes, type PageHeaderProps, type TitleAreaProps as PageHeaderTitleAreaProps, type TitleProps as PageHeaderTitleProps, PageLayout, type PageLayoutContentProps, type PageLayoutFooterProps, type PageLayoutHeaderProps, type PageLayoutPaneProps, type PageLayoutProps, Pagination, type PaginationProps, type PaneWidth, type PaneWidthValue, _default$8 as Popover, type PopoverContentProps, type PopoverProps, Portal, PortalContext, type PortalProps, ProgressBar, type ProgressBarItemProps, type ProgressBarProps, _default$9 as Radio, _default$10 as RadioGroup, type RadioGroupProps, type RadioProps, RelativeTime, type RelativeTimeProps, type ResponsiveValue, SegmentedControl, type SegmentedControlButtonProps, type SegmentedControlIconButtonProps, type SegmentedControlProps, _default$11 as Select, SelectPanel, type GroupedListProps as SelectPanelGroupedListProps, type ItemInput as SelectPanelItemInput, type FilteredActionListItemProps as SelectPanelItemProps, type SelectPanelProps, type SelectProps, _default$12 as SideNav, type SideNavLinkProps, type SideNavProps, SkeletonBox, type SkeletonBoxProps, type SlotMarker, Spinner, type SpinnerProps, SplitPageLayout, type SplitPageLayoutContentProps, type SplitPageLayoutFooterProps, type SplitPageLayoutHeaderProps, type SplitPageLayoutPaneProps, type SplitPageLayoutProps, Stack, type StackItemProps, type StackProps, StateLabel, type StateLabelProps, _default$13 as SubNav, type SubNavLinkProps, type SubNavLinksProps, type SubNavProps, _default$14 as Text, _default$15 as TextInput, type TextInputActionProps, type TextInputProps, _default$16 as TextInputWithTokens, type TextInputWithTokensProps, type TextProps, _default$17 as Textarea, type TextareaProps, type ThemeColorPaths, ThemeProvider, type ThemeProviderProps, type ThemeShadowPaths, _default$18 as Timeline, type TimelineActionsProps, type TimelineAvatarProps, type TimelineBadgeProps, type TimelineBadgeVariant, type TimelineBodyProps, type TimelineBreakProps, type TimelineItemProps, type TimelineItemsProps, type TimelineProps, ToggleSwitch, type ToggleSwitchProps, Token, type TokenProps, Tooltip, type TooltipProps, type TouchOrMouseEvent, TreeView, type TreeViewErrorDialogProps, type TreeViewItemProps, type TreeViewProps, type TreeViewSubTreeProps, type TreeViewVisualProps, Truncate, type TruncateProps, UnderlineNav, type UnderlineNavItemProps, type UnderlineNavProps, type UsePaneWidthOptions, type UsePaneWidthResult, VisuallyHidden, type VisuallyHiddenProps, type WithSlotMarker, asSlot, createComponent, defaultPaneWidth, isSlot, registerPortalRoot, theme, useAnchoredPosition, useColorSchemeVar, useConfirm, useDetails, useFocusTrap, useFocusZone, useFormControlForwardedProps, useId, useIsomorphicLayoutEffect, useMergedRefs, useOnEscapePress, useOnOutsideClick, useOpenAndCloseFocus, useOverlay, usePaneWidth, useProvidedRefOrCreate, useRefObjectAsForwardedRef, useResizeObserver, useResponsiveValue, useRovingTabIndex, useSafeTimeout, useSlots, useSyncedState, useTheme };
package/generated/components.json CHANGED
@@ -6198,10 +6198,6 @@
6198
6198
  "id": "components-segmentedcontrol-features--variant-narrow-action-menu",
6199
6199
  "code": "() => (\n <SegmentedControl\n aria-label=\"File view\"\n variant={{\n narrow: 'dropdown',\n regular: 'default',\n wide: 'default',\n }}\n >\n <SegmentedControl.Button\n defaultSelected\n aria-label={'Preview'}\n leadingVisual={EyeIcon}\n >\n Preview\n </SegmentedControl.Button>\n <SegmentedControl.Button aria-label={'Raw'} leadingVisual={FileCodeIcon}>\n Raw\n </SegmentedControl.Button>\n <SegmentedControl.Button aria-label={'Blame'} leadingVisual={PeopleIcon}>\n Blame\n </SegmentedControl.Button>\n </SegmentedControl>\n)"
6200
6200
  },
6201
- {
6202
- "id": "components-segmentedcontrol-features--variant-narrow-action-menu-with-action",
6203
- "code": "() => {\n const initialViews = [\n {\n id: 'all',\n label: 'All',\n },\n {\n id: 'active',\n label: 'Active',\n },\n {\n id: 'review-requests',\n label: 'Review requests',\n },\n {\n id: 'done',\n label: 'Done',\n },\n ]\n const [views, setViews] = useState(initialViews)\n const [selectedViewId, setSelectedViewId] = useState(initialViews[0].id)\n const handleAddView = () => {\n setViews((currentViews) => {\n const viewNumber = currentViews.length - 3\n return [\n ...currentViews,\n {\n id: `new-view-${viewNumber}`,\n label: `New view ${viewNumber}`,\n },\n ]\n })\n }\n const handleChange = (index: number) => {\n const nextSelectedViewId = views.at(index)?.id\n if (nextSelectedViewId) setSelectedViewId(nextSelectedViewId)\n }\n const handleReset = () => {\n setViews(initialViews)\n setSelectedViewId(initialViews[0].id)\n }\n return (\n <>\n <SegmentedControl\n aria-label=\"View\"\n onChange={handleChange}\n variant={{\n narrow: 'dropdown',\n regular: 'subtle',\n wide: 'subtle',\n }}\n >\n {views.flatMap((view) => [\n ...(view.label === 'Active'\n ? [<SegmentedControl.Divider key={`${view.label}-divider`} />]\n : []),\n <SegmentedControl.Button\n key={view.id}\n selected={view.id === selectedViewId}\n >\n {view.label}\n </SegmentedControl.Button>,\n ])}\n <SegmentedControl.Action\n label=\"Add view\"\n icon={PlusIcon}\n onClick={handleAddView}\n />\n </SegmentedControl>\n <Button\n className={classes.ResetButton}\n size=\"small\"\n onClick={handleReset}\n >\n Reset views\n </Button>\n </>\n )\n}"
6204
- },
6205
6201
  {
6206
6202
  "id": "components-segmentedcontrol-features--fullwidth-narrow",
6207
6203
  "code": "() => (\n <SegmentedControl\n aria-label=\"File view\"\n fullWidth={{\n narrow: true,\n regular: false,\n wide: false,\n }}\n >\n <SegmentedControl.Button\n defaultSelected\n aria-label={'Preview'}\n leadingVisual={EyeIcon}\n >\n Preview\n </SegmentedControl.Button>\n <SegmentedControl.Button aria-label={'Raw'} leadingVisual={FileCodeIcon}>\n Raw\n </SegmentedControl.Button>\n <SegmentedControl.Button aria-label={'Blame'} leadingVisual={PeopleIcon}>\n Blame\n </SegmentedControl.Button>\n </SegmentedControl>\n)"
@@ -6221,10 +6217,6 @@
6221
6217
  {
6222
6218
  "id": "components-segmentedcontrol-features--associated-with-a-label-and-caption",
6223
6219
  "code": "() => (\n <div className={classes.LabelAndCaptionContainer}>\n <div className={classes.LabelAndCaption}>\n <Text\n className={classes.TextLargeBold}\n id=\"scLabel-vert\"\n style={{\n display: 'block',\n }}\n >\n File view\n </Text>\n <Text\n className={classes.TextMediumSubtle}\n id=\"scCaption-vert\"\n style={{\n display: 'block',\n }}\n >\n Change the way the file is viewed\n </Text>\n </div>\n <SegmentedControl\n aria-labelledby=\"scLabel-vert\"\n aria-describedby=\"scCaption-vert\"\n >\n <SegmentedControl.Button defaultSelected>Preview</SegmentedControl.Button>\n <SegmentedControl.Button>Raw</SegmentedControl.Button>\n <SegmentedControl.Button>Blame</SegmentedControl.Button>\n </SegmentedControl>\n </div>\n)"
6224
- },
6225
- {
6226
- "id": "components-segmentedcontrol-features--variant-subtle",
6227
- "code": "() => (\n <SegmentedControl aria-label=\"View\" variant=\"subtle\">\n <SegmentedControl.Button defaultSelected count={5}>\n All\n </SegmentedControl.Button>\n <SegmentedControl.Divider />\n <SegmentedControl.Button count={3}>Active</SegmentedControl.Button>\n <SegmentedControl.Button count={10}>\n Review requests\n </SegmentedControl.Button>\n <SegmentedControl.Divider />\n <SegmentedControl.Button count={2}>Done</SegmentedControl.Button>\n </SegmentedControl>\n)"
6228
6220
  }
6229
6221
  ],
6230
6222
  "importPath": "@primer/react",
@@ -6261,9 +6253,9 @@
6261
6253
  },
6262
6254
  {
6263
6255
  "name": "variant",
6264
- "type": "| 'default' | 'subtle' | { narrow?: 'hideLabels' | 'dropdown' | 'default' | 'subtle' regular?: 'hideLabels' | 'dropdown' | 'default' | 'subtle' wide?: 'hideLabels' | 'dropdown' | 'default' | 'subtle' }",
6256
+ "type": "| 'default' | { narrow?: 'hideLabels' | 'dropdown' | 'default' regular?: 'hideLabels' | 'dropdown' | 'default' wide?: 'hideLabels' | 'dropdown' | 'default' }",
6265
6257
  "defaultValue": "'default'",
6266
- "description": "Configure the control's visual treatment or responsive behavior in tight spaces."
6258
+ "description": "Configure alternative ways to render the control when it gets rendered in tight spaces"
6267
6259
  },
6268
6260
  {
6269
6261
  "name": "size",
@@ -6369,53 +6361,6 @@
6369
6361
  "defaultValue": ""
6370
6362
  }
6371
6363
  ]
6372
- },
6373
- {
6374
- "name": "SegmentedControl.Divider",
6375
- "props": [
6376
- {
6377
- "name": "className",
6378
- "type": "string",
6379
- "required": false
6380
- },
6381
- {
6382
- "name": "style",
6383
- "type": "React.CSSProperties",
6384
- "required": false
6385
- }
6386
- ]
6387
- },
6388
- {
6389
- "name": "SegmentedControl.Action",
6390
- "props": [
6391
- {
6392
- "name": "label",
6393
- "type": "string",
6394
- "required": true,
6395
- "description": "Accessible label for the action icon button."
6396
- },
6397
- {
6398
- "name": "icon",
6399
- "type": "Component",
6400
- "required": true,
6401
- "description": "The icon rendered by the action button."
6402
- },
6403
- {
6404
- "name": "onClick",
6405
- "type": "() => void",
6406
- "description": "The handler that gets called when the action button is clicked."
6407
- },
6408
- {
6409
- "name": "disabled",
6410
- "type": "boolean",
6411
- "description": "Whether the action is disabled."
6412
- },
6413
- {
6414
- "name": "loading",
6415
- "type": "boolean",
6416
- "description": "Whether the action is in a loading state."
6417
- }
6418
- ]
6419
6364
  }
6420
6365
  ]
6421
6366
  },
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@primer/react",
3
3
  "type": "module",
4
- "version": "38.38.0-rc.69771f80e",
4
+ "version": "38.38.0-rc.775c5b6cb",
5
5
  "description": "An implementation of GitHub's Primer Design System using React",
6
6
  "main": "./dist/index.js",
7
7
  "module": "./dist/index.js",
package/dist/SegmentedControl/SegmentedControl-e68d4197.css DELETED
@@ -1,2 +0,0 @@
1
- .prc-SegmentedControl-SegmentedControl-lqIXp{--segmented-control-icon-width:32px;--segmented-control-outer-radius:var(--borderRadius-medium,0.375rem);background-color:var(--controlTrack-bgColor-rest,#e6eaef);border:var(--borderWidth-thin,.0625rem) solid var(--controlTrack-borderColor-rest,transparent);border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;font-size:var(--text-body-size-medium,.875rem);height:32px;margin:0;padding:0;position:relative}@supports (anchor-name:--value){.prc-SegmentedControl-SegmentedControl-lqIXp:before{position-anchor:--segmented-control-current-item;background-color:var(--controlKnob-bgColor-rest,#fff);border:var(--borderWidth-thin,.0625rem) solid var(--controlKnob-borderColor-rest,#d1d9e0);border-radius:var(--segmented-control-outer-radius);content:"";inset:anchor(top) anchor(right) anchor(bottom) anchor(left);position:absolute}@media (prefers-reduced-motion:no-preference){.prc-SegmentedControl-SegmentedControl-lqIXp:before{transition:inset var(--base-duration-200,[ object Object ]) var(--base-easing-easeInOut,.6,0,.2,1)}}.prc-SegmentedControl-SegmentedControl-lqIXp[data-disable-knob-transition]:before{transition:none}}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}.prc-SegmentedControl-SegmentedControl-lqIXp>[data-component="SegmentedControl.Divider"]{align-self:stretch;background-color:var(--borderColor-default,#d1d9e0);display:none;list-style:none;margin-block:var(--base-size-8,.5rem);margin-inline-end:calc(var(--base-size-8,.5rem) - 1px);margin-inline-start:var(--base-size-8,.5rem);width:1px}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-narrow=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-narrow=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}@media (min-width:48rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}@media (min-width:87.5rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-wide=true]{display:flex;width:100%;--segmented-control-icon-width:100%}.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-regular=true]:not([data-full-width-wide=true]),.prc-SegmentedControl-SegmentedControl-lqIXp[data-full-width-wide=false]{display:inline-flex;width:auto;--segmented-control-icon-width:32px}}.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant=dropdown]{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]){--segmented-control-outer-radius:var(--borderRadius-large,0.75rem);--segmented-control-button-bg-inset:0px;background-color:transparent;border:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]):before{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:transparent}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle])>[data-component="SegmentedControl.Divider"]{display:block}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz{border:0;border-radius:var(--borderRadius-large,.75rem);color:var(--fgColor-muted,#59636e);padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz .prc-SegmentedControl-Content-1COlk{border:0;padding-inline:var(--base-size-12,.75rem)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true]{color:var(--fgColor-default,#1f2328)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}@supports (color:color-mix(in lch,red,blue)){.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:color-mix(in srgb,var(--bgColor-muted,#f6f8fa) 50%,transparent)}}.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-narrow=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-narrow=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]){--segmented-control-outer-radius:var(--borderRadius-large,0.75rem);--segmented-control-button-bg-inset:0px;background-color:transparent;border:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]):before{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:transparent}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle])>[data-component="SegmentedControl.Divider"]{display:block}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz{border:0;border-radius:var(--borderRadius-large,.75rem);color:var(--fgColor-muted,#59636e);padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz .prc-SegmentedControl-Content-1COlk{border:0;padding-inline:var(--base-size-12,.75rem)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true]{color:var(--fgColor-default,#1f2328)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}@supports (color:color-mix(in lch,red,blue)){.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-narrow=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:color-mix(in srgb,var(--bgColor-muted,#f6f8fa) 50%,transparent)}}}@media (min-width:48rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-regular=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-regular=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]){--segmented-control-outer-radius:var(--borderRadius-large,0.75rem);--segmented-control-button-bg-inset:0px;background-color:transparent;border:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):before{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:transparent}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle])>[data-component="SegmentedControl.Divider"]{display:block}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz{border:0;border-radius:var(--borderRadius-large,.75rem);color:var(--fgColor-muted,#59636e);padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz .prc-SegmentedControl-Content-1COlk{border:0;padding-inline:var(--base-size-12,.75rem)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true]{color:var(--fgColor-default,#1f2328)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}@supports (color:color-mix(in lch,red,blue)){.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:color-mix(in srgb,var(--bgColor-muted,#f6f8fa) 50%,transparent)}}}@media (min-width:87.5rem){.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-wide=dropdown],.prc-SegmentedControl-SegmentedControl-lqIXp[data-variant-wide=hideLabels] .prc-SegmentedControl-Text-7S2y2{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]){--segmented-control-outer-radius:var(--borderRadius-large,0.75rem);--segmented-control-button-bg-inset:0px;background-color:transparent;border:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]):before{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:transparent}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle])>[data-component="SegmentedControl.Divider"]{display:block}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz{border:0;border-radius:var(--borderRadius-large,.75rem);color:var(--fgColor-muted,#59636e);padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz .prc-SegmentedControl-Content-1COlk{border:0;padding-inline:var(--base-size-12,.75rem)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true]{color:var(--fgColor-default,#1f2328)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--bgColor-muted,#f6f8fa)}@supports (color:color-mix(in lch,red,blue)){.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:color-mix(in srgb,var(--bgColor-muted,#f6f8fa) 50%,transparent)}}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]){--segmented-control-outer-radius:var(--borderRadius-medium,0.375rem);--segmented-control-button-bg-inset:4px;background-color:var(--controlTrack-bgColor-rest,#e6eaef);border:var(--borderWidth-thin,.0625rem) solid var(--controlTrack-borderColor-rest,transparent)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]):before{display:block}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:var(--borderColor-default,#d1d9e0)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle])>[data-component="SegmentedControl.Divider"]{display:none}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz{border-radius:var(--segmented-control-outer-radius);color:currentColor;padding:var(--segmented-control-button-bg-inset)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz .prc-SegmentedControl-Content-1COlk{border:var(--borderWidth-thin,.0625rem) solid transparent;padding-inline:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset))}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true]{color:currentColor;padding:0}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:transparent;padding-inline:var(--segmented-control-button-inner-padding)}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-variant-regular=subtle]):not([data-variant-wide=subtle]) .prc-SegmentedControl-Button-E48xz:where(:not([aria-pressed=true],[aria-disabled=true])):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--controlTrack-bgColor-hover,#e0e6eb)}}.prc-SegmentedControl-SegmentedControl-lqIXp:where([data-size=small]){font-size:var(--text-body-size-small,.75rem);height:28px}.prc-SegmentedControl-DropdownGroup-9SmpX{--segmented-control-action-size:32px;--segmented-control-list-flex:0 1 auto;align-items:center;display:inline-flex;gap:var(--base-size-4,.25rem)}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width=true]{width:100%;--segmented-control-list-flex:1 1 auto}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width=false]{width:auto}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-narrow=true]{width:100%;--segmented-control-list-flex:1 1 auto}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-narrow=false]{width:auto}}@media (min-width:48rem){.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-regular=true]{width:100%;--segmented-control-list-flex:1 1 auto}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-regular=false]{width:auto}}@media (min-width:87.5rem){.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-wide=true]{width:100%;--segmented-control-list-flex:1 1 auto}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-wide=false]{width:auto}.prc-SegmentedControl-DropdownGroup-9SmpX[data-full-width-regular=true]:not([data-full-width-wide=true]){width:auto;--segmented-control-list-flex:0 1 auto}}.prc-SegmentedControl-DropdownGroup-9SmpX[data-size=small]{--segmented-control-action-size:28px}.prc-SegmentedControl-DropdownGroup-9SmpX>.prc-SegmentedControl-SegmentedControl-lqIXp{flex:var(--segmented-control-list-flex);min-width:0}.prc-SegmentedControl-InlineAction-4qmw0{display:flex}.prc-SegmentedControl-InlineAction-4qmw0[data-variant=dropdown]{display:none}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-InlineAction-4qmw0[data-variant-narrow=dropdown]{display:none}}@media (min-width:48rem){.prc-SegmentedControl-InlineAction-4qmw0[data-variant-regular=dropdown]{display:none}}@media (min-width:87.5rem){.prc-SegmentedControl-InlineAction-4qmw0[data-variant-wide=dropdown]{display:none}}.prc-SegmentedControl-DropdownContainer-ZaPMn{display:none}.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant=dropdown]{display:block}@media (max-width:calc(48rem - 0.02px)){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-narrow=dropdown]{display:block}}@media (min-width:48rem){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-regular=dropdown]{display:block}}@media (min-width:87.5rem){.prc-SegmentedControl-DropdownContainer-ZaPMn[data-variant-wide=dropdown]{display:block}}.prc-SegmentedControl-Item-tSCQh{display:block;flex-grow:1;margin-bottom:-1px;margin-top:-1px;position:relative}.prc-SegmentedControl-Item-tSCQh:not(:last-child){margin-right:1px}.prc-SegmentedControl-Item-tSCQh:not(:last-child):after{background-color:var(--borderColor-default,#d1d9e0);bottom:var(--base-size-8,.5rem);content:"";position:absolute;right:calc(var(--base-size-2,.125rem)*-1);top:var(--base-size-8,.5rem);width:1px}.prc-SegmentedControl-Item-tSCQh:not(:last-child):has(+:where([data-component="SegmentedControl.Divider"])+:where([data-selected])):after,.prc-SegmentedControl-Item-tSCQh:not(:last-child):has(+[data-selected]):after,.prc-SegmentedControl-Item-tSCQh:not(:last-child):where([data-selected]):after{background-color:transparent}.prc-SegmentedControl-Item-tSCQh:first-child{margin-left:-1px}.prc-SegmentedControl-Item-tSCQh:last-child{margin-right:-1px}.prc-SegmentedControl-Item-tSCQh .prc-SegmentedControl-Counter-GmZOI{margin-inline-start:var(--base-size-8,.5rem)}.prc-SegmentedControl-ActionItem-2V1ou,.prc-SegmentedControl-Item-tSCQh .prc-SegmentedControl-Counter-GmZOI{align-items:center;display:flex}.prc-SegmentedControl-ActionItem-2V1ou{margin-inline-start:0}.prc-SegmentedControl-ActionButton-Q5fnw{height:var(--segmented-control-action-size);padding:0;width:var(--segmented-control-action-size)}.prc-SegmentedControl-Button-E48xz{--segmented-control-button-inner-padding:12px;--segmented-control-button-bg-inset:4px;background-color:transparent;border-color:transparent;border-radius:var(--segmented-control-outer-radius);border-width:0;color:currentColor;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:var(--base-text-weight-normal,400);height:100%;padding:var(--segmented-control-button-bg-inset);width:100%}.prc-SegmentedControl-Button-E48xz svg{fill:var(--fgColor-muted,#59636e);color:var(--fgColor-muted,#59636e)}.prc-SegmentedControl-Button-E48xz:focus:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,#0969da);outline-offset:-1px}.prc-SegmentedControl-Button-E48xz:focus:not(:disabled):not(:focus-visible){outline:1px solid transparent}.prc-SegmentedControl-Button-E48xz:focus-visible:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,#0969da);outline-offset:-1px}.prc-SegmentedControl-Button-E48xz:focus:focus-visible:not(:last-child):after{width:0}.prc-SegmentedControl-Button-E48xz[aria-disabled=true]:not([aria-pressed=true]){background-color:transparent;color:var(--fgColor-disabled,#818b98);cursor:not-allowed}.prc-SegmentedControl-Button-E48xz[aria-disabled=true]:not([aria-pressed=true]) svg{fill:var(--fgColor-disabled,#818b98);color:var(--fgColor-disabled,#818b98)}@media (pointer:coarse){.prc-SegmentedControl-Button-E48xz:before{content:"";left:0;min-height:44px;position:absolute;right:0;top:50%;transform:translateY(-50%)}}.prc-SegmentedControl-IconButton-tlzDE{width:var(--segmented-control-icon-width,32px)}.prc-SegmentedControl-Content-1COlk{align-items:center;background-color:transparent;border-color:transparent;border-radius:calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset)/2);border-style:solid;border-width:var(--borderWidth-thin,.0625rem);display:flex;height:100%;justify-content:center;padding-left:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));padding-right:calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));transition:background-color var(--base-duration-200,[ object Object ]) var(--base-easing-easeInOut,.6,0,.2,1)}.prc-SegmentedControl-Button-E48xz[aria-pressed=true]{font-weight:var(--base-text-weight-semibold,600);padding:0}.prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{padding-left:var(--segmented-control-button-inner-padding);padding-right:var(--segmented-control-button-inner-padding);anchor-name:--segmented-control-current-item}@supports not (anchor-name:--value){.prc-SegmentedControl-Button-E48xz[aria-pressed=true] .prc-SegmentedControl-Content-1COlk{background-color:var(--controlKnob-bgColor-rest,#fff);border-color:var(--controlKnob-borderColor-rest,#d1d9e0);border-radius:var(--segmented-control-outer-radius)}}.prc-SegmentedControl-Button-E48xz:not([aria-pressed=true],[aria-disabled=true]):hover .prc-SegmentedControl-Content-1COlk{background-color:var(--controlTrack-bgColor-hover,#e0e6eb)}.prc-SegmentedControl-Button-E48xz:not([aria-pressed=true],[aria-disabled=true]):active .prc-SegmentedControl-Content-1COlk{background-color:var(--controlTrack-bgColor-active,#dae0e7)}.prc-SegmentedControl-Text-7S2y2:after{content:attr(data-text);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none;visibility:hidden}.prc-SegmentedControl-LeadingIcon-74n5s{margin-right:var(--base-size-4,.25rem)}
2
- /*# sourceMappingURL=SegmentedControl-e68d4197.css.map */
package/dist/SegmentedControl/SegmentedControl-e68d4197.css.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/SegmentedControl/SegmentedControl.module.css.js"],"names":[],"mappings":"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","file":"SegmentedControl-e68d4197.css","sourcesContent":["@define-mixin subtleVariant {\n --segmented-control-outer-radius: var(--borderRadius-large);\n --segmented-control-button-bg-inset: 0px;\n\n background-color: transparent;\n border: 0;\n\n /* stylelint-disable-next-line nesting-selector-no-missing-scoping-root */\n &::before {\n display: none;\n }\n\n .Item:not(:last-child)::after {\n background-color: transparent;\n }\n\n > [data-component='SegmentedControl.Divider'] {\n display: block;\n }\n\n .Button {\n padding: 0;\n color: var(--fgColor-muted);\n border: 0;\n border-radius: var(--borderRadius-large);\n\n .Content {\n padding-inline: var(--base-size-12);\n border: 0;\n }\n }\n\n .Button[aria-pressed='true'] {\n color: var(--fgColor-default);\n\n .Content {\n background-color: var(--bgColor-muted);\n }\n }\n\n .Button:where(:not([aria-pressed='true'], [aria-disabled='true'])):hover .Content {\n background-color: var(--bgColor-muted);\n background-color: color-mix(in srgb, var(--bgColor-muted) 50%, transparent);\n }\n}\n\n@define-mixin defaultVariant {\n --segmented-control-outer-radius: var(--borderRadius-medium);\n --segmented-control-button-bg-inset: 4px;\n\n background-color: var(--controlTrack-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest, transparent);\n\n /* stylelint-disable-next-line nesting-selector-no-missing-scoping-root */\n &::before {\n display: block;\n }\n\n .Item:not(:last-child)::after {\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n > [data-component='SegmentedControl.Divider'] {\n display: none;\n }\n\n .Button {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--segmented-control-button-bg-inset);\n color: currentColor;\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n\n .Content {\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n border: var(--borderWidth-thin) solid transparent;\n }\n }\n\n .Button[aria-pressed='true'] {\n padding: 0;\n color: currentColor;\n\n .Content {\n /* stylelint-disable-next-line primer/spacing */\n padding-inline: var(--segmented-control-button-inner-padding);\n background-color: transparent;\n }\n }\n\n .Button:where(:not([aria-pressed='true'], [aria-disabled='true'])):hover .Content {\n background-color: var(--controlTrack-bgColor-hover);\n }\n}\n\n.SegmentedControl {\n /* TODO: use primitive `control.medium.size` when it is available instead of '32px' */\n --segmented-control-icon-width: 32px;\n --segmented-control-outer-radius: var(--borderRadius-medium);\n\n display: inline-flex;\n\n /* TODO: use primitive `control.{small|medium}.size` when it is available */\n height: 32px;\n padding: 0;\n margin: 0;\n font-size: var(--text-body-size-medium);\n background-color: var(--controlTrack-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest, transparent);\n border-radius: var(--borderRadius-medium);\n position: relative;\n\n @supports (anchor-name: --value) {\n &::before {\n position-anchor: --segmented-control-current-item;\n content: '';\n position: absolute;\n inset: anchor(top) anchor(right) anchor(bottom) anchor(left);\n background-color: var(--controlKnob-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlKnob-borderColor-rest);\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n\n @media (prefers-reduced-motion: no-preference) {\n transition: inset var(--base-duration-200) var(--base-easing-easeInOut);\n }\n }\n\n &[data-disable-knob-transition]::before {\n transition: none;\n }\n }\n\n /* Responsive full-width */\n &[data-full-width='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n\n > [data-component='SegmentedControl.Divider'] {\n display: none;\n align-self: stretch;\n width: 1px;\n margin-block: var(--base-size-8);\n margin-inline-start: var(--base-size-8);\n /* stylelint-disable-next-line primer/spacing -- preserve the previous divider's 16px layout footprint */\n margin-inline-end: calc(var(--base-size-8) - 1px);\n list-style: none;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n @media (--viewportRange-narrow) {\n &[data-full-width-narrow='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-narrow='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-full-width-regular='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-regular='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-full-width-wide='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-wide='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n\n &[data-full-width-regular='true']:not([data-full-width-wide='true']) {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n /* Hide when dropdown variant is active */\n &[data-variant='dropdown'] {\n display: none;\n }\n\n &:where([data-variant='subtle']) {\n @mixin subtleVariant;\n }\n\n /* Handle hideLabels variant - hide button text */\n &[data-variant='hideLabels'] .Text {\n display: none;\n }\n\n @media (--viewportRange-narrow) {\n &[data-variant-narrow='dropdown'] {\n display: none;\n }\n\n &[data-variant-narrow='hideLabels'] .Text {\n display: none;\n }\n\n &:where([data-variant-narrow='subtle']) {\n @mixin subtleVariant;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-variant-regular='dropdown'] {\n display: none;\n }\n\n &[data-variant-regular='hideLabels'] .Text {\n display: none;\n }\n\n &:where([data-variant-regular='subtle']) {\n @mixin subtleVariant;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-variant-wide='dropdown'] {\n display: none;\n }\n\n &[data-variant-wide='hideLabels'] .Text {\n display: none;\n }\n\n &:where([data-variant-wide='subtle']) {\n @mixin subtleVariant;\n }\n\n &:where([data-variant-regular='subtle']):not([data-variant-wide='subtle']) {\n @mixin defaultVariant;\n }\n }\n\n &:where([data-size='small']) {\n /* TODO: use primitive `control.{small|medium}.size` when it is available */\n height: 28px;\n font-size: var(--text-body-size-small);\n }\n}\n\n.DropdownGroup {\n --segmented-control-action-size: 32px;\n --segmented-control-list-flex: 0 1 auto;\n\n display: inline-flex;\n align-items: center;\n gap: var(--base-size-4);\n\n &[data-full-width='true'] {\n width: 100%;\n\n --segmented-control-list-flex: 1 1 auto;\n }\n\n &[data-full-width='false'] {\n width: auto;\n }\n\n @media (--viewportRange-narrow) {\n &[data-full-width-narrow='true'] {\n width: 100%;\n\n --segmented-control-list-flex: 1 1 auto;\n }\n\n &[data-full-width-narrow='false'] {\n width: auto;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-full-width-regular='true'] {\n width: 100%;\n\n --segmented-control-list-flex: 1 1 auto;\n }\n\n &[data-full-width-regular='false'] {\n width: auto;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-full-width-wide='true'] {\n width: 100%;\n\n --segmented-control-list-flex: 1 1 auto;\n }\n\n &[data-full-width-wide='false'] {\n width: auto;\n }\n\n &[data-full-width-regular='true']:not([data-full-width-wide='true']) {\n width: auto;\n\n --segmented-control-list-flex: 0 1 auto;\n }\n }\n\n &[data-size='small'] {\n --segmented-control-action-size: 28px;\n }\n\n > .SegmentedControl {\n min-width: 0;\n flex: var(--segmented-control-list-flex);\n }\n}\n\n.InlineAction {\n display: flex;\n\n &[data-variant='dropdown'] {\n display: none;\n }\n\n @media (--viewportRange-narrow) {\n &[data-variant-narrow='dropdown'] {\n display: none;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-variant-regular='dropdown'] {\n display: none;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-variant-wide='dropdown'] {\n display: none;\n }\n }\n}\n\n.DropdownContainer {\n display: none;\n\n /* Show when dropdown variant is active */\n &[data-variant='dropdown'] {\n display: block;\n }\n\n @media (--viewportRange-narrow) {\n &[data-variant-narrow='dropdown'] {\n display: block;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-variant-regular='dropdown'] {\n display: block;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-variant-wide='dropdown'] {\n display: block;\n }\n }\n}\n\n.Item {\n position: relative;\n display: block;\n /* stylelint-disable-next-line primer/spacing */\n margin-top: -1px;\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: -1px;\n flex-grow: 1;\n\n &:not(:last-child) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: 1px;\n\n &::after {\n position: absolute;\n top: var(--base-size-8);\n right: calc(-1 * var(--base-size-2));\n bottom: var(--base-size-8);\n width: 1px;\n content: '';\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- scoped to CSS Module, audited (github/github-ui#17224) */\n &:has(+ [data-selected])::after,\n /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- account for a hidden divider in the default variant */\n &:has(+ :where([data-component='SegmentedControl.Divider']) + :where([data-selected]))::after,\n &:where([data-selected])::after {\n background-color: transparent;\n }\n }\n\n &:first-child {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: -1px;\n }\n\n &:last-child {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: -1px;\n }\n\n .Counter {\n margin-inline-start: var(--base-size-8);\n display: flex;\n align-items: center;\n }\n}\n\n.ActionItem {\n display: flex;\n align-items: center;\n margin-inline-start: 0;\n}\n\n.ActionButton {\n width: var(--segmented-control-action-size);\n height: var(--segmented-control-action-size);\n padding: 0;\n}\n\n.Button {\n /* TODO: use primitive `primer.control.medium.paddingInline.normal` when it is available */\n --segmented-control-button-inner-padding: 12px;\n --segmented-control-button-bg-inset: 4px;\n\n width: 100%;\n height: 100%;\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--segmented-control-button-bg-inset);\n font-family: inherit;\n font-size: inherit;\n font-weight: var(--base-text-weight-normal);\n color: currentColor;\n cursor: pointer;\n background-color: transparent;\n border-color: transparent;\n border-width: 0;\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n\n & svg {\n fill: var(--fgColor-muted);\n color: var(--fgColor-muted);\n }\n\n /* fallback :focus state */\n &:focus:not(:disabled) {\n outline: var(--base-size-2) solid var(--fgColor-accent);\n outline-offset: -1px;\n box-shadow: none;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n }\n }\n\n /* default focus state */\n &:focus-visible:not(:disabled) {\n outline: var(--base-size-2) solid var(--fgColor-accent);\n outline-offset: -1px;\n box-shadow: none;\n }\n\n /* stylelint-disable-next-line selector-max-specificity */\n &:focus:focus-visible:not(:last-child)::after {\n /* fixes an issue where the focus outline shows over the pseudo-element */\n width: 0;\n }\n\n &[aria-disabled='true']:not([aria-pressed='true']) {\n cursor: not-allowed;\n color: var(--fgColor-disabled);\n background-color: transparent;\n\n & svg {\n fill: var(--fgColor-disabled);\n color: var(--fgColor-disabled);\n }\n }\n\n @media (pointer: coarse) {\n &::before {\n position: absolute;\n top: 50%;\n right: 0;\n left: 0;\n min-height: 44px;\n content: '';\n transform: translateY(-50%);\n }\n }\n}\n\n.IconButton {\n width: var(--segmented-control-icon-width, 32px);\n}\n\n.Content {\n display: flex;\n height: 100%;\n /* stylelint-disable-next-line primer/spacing */\n padding-right: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n /* stylelint-disable-next-line primer/spacing */\n padding-left: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n border-color: transparent;\n border-style: solid;\n border-width: var(--borderWidth-thin);\n background-color: transparent;\n transition: background-color var(--base-duration-200) var(--base-easing-easeInOut);\n\n /*\n innerRadius = outerRadius - distance/2\n https://stackoverflow.com/questions/2932146/math-problem-determine-the-corner-radius-of-an-inner-border-based-on-outer-corn\n */\n /* stylelint-disable-next-line primer/borders */\n border-radius: calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset) / 2);\n align-items: center;\n justify-content: center;\n}\n\n.Button[aria-pressed='true'] {\n padding: 0;\n font-weight: var(--base-text-weight-semibold);\n\n .Content {\n /* stylelint-disable-next-line primer/spacing */\n padding-right: var(--segmented-control-button-inner-padding);\n /* stylelint-disable-next-line primer/spacing */\n padding-left: var(--segmented-control-button-inner-padding);\n anchor-name: --segmented-control-current-item;\n\n @supports not (anchor-name: --value) {\n background-color: var(--controlKnob-bgColor-rest);\n border-color: var(--controlKnob-borderColor-rest);\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n }\n }\n}\n\n.Button:not([aria-pressed='true'], [aria-disabled='true']) {\n &:hover .Content {\n background-color: var(--controlTrack-bgColor-hover);\n }\n\n &:active .Content {\n background-color: var(--controlTrack-bgColor-active);\n }\n}\n\n.Text::after {\n display: block;\n height: 0;\n overflow: hidden;\n font-weight: var(--base-text-weight-semibold);\n pointer-events: none;\n visibility: hidden;\n content: attr(data-text);\n user-select: none;\n}\n\n.LeadingIcon {\n margin-right: var(--base-size-4);\n}\n"]}
package/dist/SegmentedControl/SegmentedControlAction.d.ts DELETED
@@ -1,12 +0,0 @@
1
- import { ElementType } from "react";
2
-
3
- //#region src/SegmentedControl/SegmentedControlAction.d.ts
4
- interface SegmentedControlActionProps {
5
- label: string;
6
- icon: ElementType;
7
- onClick?: () => void;
8
- disabled?: boolean;
9
- loading?: boolean;
10
- }
11
- //#endregion
12
- export { SegmentedControlActionProps };
package/dist/SegmentedControl/SegmentedControlAction.js DELETED
@@ -1,111 +0,0 @@
1
- import { IconButton } from "../Button/IconButton.js";
2
- import { ActionList } from "../ActionList/index.js";
3
- import SegmentedControl_module_css_default from "./SegmentedControl.module.css.js";
4
- import { SegmentedControlActionContext } from "./SegmentedControlActionContext.js";
5
- import { c } from "react-compiler-runtime";
6
- import { useContext } from "react";
7
- import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
8
- //#region src/SegmentedControl/SegmentedControlAction.tsx
9
- const SegmentedControlMenuAction = (t0) => {
10
- const $ = c(6);
11
- let children;
12
- let props;
13
- if ($[0] !== t0) {
14
- ({children, ...props} = t0);
15
- $[0] = t0;
16
- $[1] = children;
17
- $[2] = props;
18
- } else {
19
- children = $[1];
20
- props = $[2];
21
- }
22
- let t1;
23
- if ($[3] !== children || $[4] !== props) {
24
- t1 = /*#__PURE__*/ jsx("div", {
25
- ...props,
26
- "data-component": "SegmentedControl.Action",
27
- children
28
- });
29
- $[3] = children;
30
- $[4] = props;
31
- $[5] = t1;
32
- } else t1 = $[5];
33
- return t1;
34
- };
35
- const SegmentedControlAction = (props) => {
36
- const $ = c(19);
37
- const { disabled, icon: Icon, label, loading, onClick } = props;
38
- if (useContext(SegmentedControlActionContext) === "menu") {
39
- let t0;
40
- if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
41
- t0 = /*#__PURE__*/ jsx(ActionList.Divider, {});
42
- $[0] = t0;
43
- } else t0 = $[0];
44
- let t1;
45
- if ($[1] !== onClick) {
46
- t1 = (event) => {
47
- event.preventDefault();
48
- onClick === null || onClick === void 0 || onClick();
49
- };
50
- $[1] = onClick;
51
- $[2] = t1;
52
- } else t1 = $[2];
53
- let t2;
54
- if ($[3] !== Icon) {
55
- t2 = /*#__PURE__*/ jsx(ActionList.LeadingVisual, { children: /*#__PURE__*/ jsx(Icon, {}) });
56
- $[3] = Icon;
57
- $[4] = t2;
58
- } else t2 = $[4];
59
- let t3;
60
- if ($[5] !== disabled || $[6] !== label || $[7] !== loading || $[8] !== t1 || $[9] !== t2) {
61
- t3 = /*#__PURE__*/ jsxs(Fragment$1, { children: [t0, /*#__PURE__*/ jsxs(ActionList.Item, {
62
- role: "menuitem",
63
- disabled,
64
- loading,
65
- _PrivateItemWrapper: SegmentedControlMenuAction,
66
- onSelect: t1,
67
- children: [t2, label]
68
- })] });
69
- $[5] = disabled;
70
- $[6] = label;
71
- $[7] = loading;
72
- $[8] = t1;
73
- $[9] = t2;
74
- $[10] = t3;
75
- } else t3 = $[10];
76
- return t3;
77
- }
78
- let t0;
79
- if ($[11] !== onClick) {
80
- t0 = () => onClick === null || onClick === void 0 ? void 0 : onClick();
81
- $[11] = onClick;
82
- $[12] = t0;
83
- } else t0 = $[12];
84
- let t1;
85
- if ($[13] !== Icon || $[14] !== disabled || $[15] !== label || $[16] !== loading || $[17] !== t0) {
86
- t1 = /*#__PURE__*/ jsx("div", {
87
- className: SegmentedControl_module_css_default.ActionItem,
88
- "data-component": "SegmentedControl.Action",
89
- children: /*#__PURE__*/ jsx(IconButton, {
90
- "aria-label": label,
91
- className: SegmentedControl_module_css_default.ActionButton,
92
- disabled,
93
- icon: Icon,
94
- loading,
95
- onClick: t0,
96
- variant: "invisible"
97
- })
98
- });
99
- $[13] = Icon;
100
- $[14] = disabled;
101
- $[15] = label;
102
- $[16] = loading;
103
- $[17] = t0;
104
- $[18] = t1;
105
- } else t1 = $[18];
106
- return t1;
107
- };
108
- SegmentedControlAction.displayName = "SegmentedControl.Action";
109
- SegmentedControlAction.__SLOT__ = Symbol("SegmentedControl.Action");
110
- //#endregion
111
- export { SegmentedControlAction as default };
package/dist/SegmentedControl/SegmentedControlActionContext.js DELETED
@@ -1,5 +0,0 @@
1
- import { createContext } from "react";
2
- //#region src/SegmentedControl/SegmentedControlActionContext.ts
3
- const SegmentedControlActionContext = /*#__PURE__*/ createContext("inline");
4
- //#endregion
5
- export { SegmentedControlActionContext };
package/dist/SegmentedControl/SegmentedControlDivider.d.ts DELETED
@@ -1,9 +0,0 @@
1
- import React from "react";
2
-
3
- //#region src/SegmentedControl/SegmentedControlDivider.d.ts
4
- type SegmentedControlDividerProps = {
5
- className?: string;
6
- style?: React.CSSProperties;
7
- };
8
- //#endregion
9
- export { SegmentedControlDividerProps };
package/dist/SegmentedControl/SegmentedControlDivider.js DELETED
@@ -1,24 +0,0 @@
1
- import { c } from "react-compiler-runtime";
2
- import { jsx } from "react/jsx-runtime";
3
- //#region src/SegmentedControl/SegmentedControlDivider.tsx
4
- const SegmentedControlDivider = (t0) => {
5
- const $ = c(3);
6
- const { className, style } = t0;
7
- let t1;
8
- if ($[0] !== className || $[1] !== style) {
9
- t1 = /*#__PURE__*/ jsx("li", {
10
- "aria-hidden": "true",
11
- className,
12
- "data-component": "SegmentedControl.Divider",
13
- style
14
- });
15
- $[0] = className;
16
- $[1] = style;
17
- $[2] = t1;
18
- } else t1 = $[2];
19
- return t1;
20
- };
21
- SegmentedControlDivider.displayName = "SegmentedControl.Divider";
22
- SegmentedControlDivider.__SLOT__ = Symbol("SegmentedControl.Divider");
23
- //#endregion
24
- export { SegmentedControlDivider as default };