@primer/react 37.32.0-rc.f8e94f384 → 38.0.0-rc.09f015db1

package/dist/ScrollableRegion/ScrollableRegion.js

@@ -0,0 +1,82 @@
+import { c } from 'react-compiler-runtime';
+import React from 'react';
+import { clsx } from 'clsx';
+import { useOverflow } from '../hooks/useOverflow.js';
+import classes from './ScrollableRegion.module.css.js';
+import { jsx } from 'react/jsx-runtime';
+
+function ScrollableRegion(t0) {
+  const $ = c(17);
+  let children;
+  let className;
+  let label;
+  let labelledby;
+  let rest;
+  if ($[0] !== t0) {
+    ({
+      "aria-label": label,
+      "aria-labelledby": labelledby,
+      children,
+      className,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = label;
+    $[4] = labelledby;
+    $[5] = rest;
+  } else {
+    children = $[1];
+    className = $[2];
+    label = $[3];
+    labelledby = $[4];
+    rest = $[5];
+  }
+  const ref = React.useRef(null);
+  const hasOverflow = useOverflow(ref);
+  let t1;
+  if ($[6] !== hasOverflow || $[7] !== label || $[8] !== labelledby) {
+    t1 = hasOverflow ? {
+      "aria-label": label,
+      "aria-labelledby": labelledby,
+      role: "region",
+      tabIndex: 0
+    } : {};
+    $[6] = hasOverflow;
+    $[7] = label;
+    $[8] = labelledby;
+    $[9] = t1;
+  } else {
+    t1 = $[9];
+  }
+  const regionProps = t1;
+  let t2;
+  if ($[10] !== className) {
+    t2 = clsx(classes.ScrollableRegion, className);
+    $[10] = className;
+    $[11] = t2;
+  } else {
+    t2 = $[11];
+  }
+  let t3;
+  if ($[12] !== children || $[13] !== regionProps || $[14] !== rest || $[15] !== t2) {
+    t3 = /*#__PURE__*/jsx("div", {
+      ...rest,
+      ...regionProps,
+      ref: ref,
+      className: t2,
+      children: children
+    });
+    $[12] = children;
+    $[13] = regionProps;
+    $[14] = rest;
+    $[15] = t2;
+    $[16] = t3;
+  } else {
+    t3 = $[16];
+  }
+  return t3;
+}
+
+export { ScrollableRegion };

package/dist/ScrollableRegion/ScrollableRegion.module.css.js

@@ -0,0 +1,5 @@
+import './ScrollableRegion-c1018dbe.css';
+
+var classes = {"ScrollableRegion":"prc-ScrollableRegion-ScrollableRegion-3VVm3"};
+
+export { classes as default };

package/dist/SegmentedControl/SegmentedControl-7f79ab74.css

@@ -0,0 +1,2 @@
+.prc-SegmentedControl-SegmentedControl-e7570{background-color:var(--controlTrack-bgColor-rest,var(--color-switch-track-bg));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}.prc-SegmentedControl-SegmentedControl-e7570:where([data-full-width]){display:flex;width:100%}.prc-SegmentedControl-SegmentedControl-e7570:where([data-size=small]){font-size:var(--text-body-size-small,.75rem);height:28px}.prc-SegmentedControl-Item-7Aq6h{display:block;flex-grow:1;margin-bottom:-1px;margin-top:-1px;position:relative}.prc-SegmentedControl-Item-7Aq6h:not(:last-child){margin-right:1px}.prc-SegmentedControl-Item-7Aq6h:not(:last-child):after{background-color:var(--borderColor-default,var(--color-border-default));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-7Aq6h:not(:last-child):has(+[data-selected]):after,.prc-SegmentedControl-Item-7Aq6h:not(:last-child):where([data-selected]):after{background-color:transparent}.prc-SegmentedControl-Item-7Aq6h:focus-within:has(:focus-visible){background-color:transparent}.prc-SegmentedControl-Item-7Aq6h:first-child{margin-left:-1px}.prc-SegmentedControl-Item-7Aq6h:last-child{margin-right:-1px}.prc-SegmentedControl-Item-7Aq6h .prc-SegmentedControl-Counter--H-pM{align-items:center;display:flex;margin-inline-start:var(--base-size-8,.5rem)}.prc-SegmentedControl-Button-ojWXD{--segmented-control-button-inner-padding:12px;--segmented-control-button-bg-inset:4px;--segmented-control-outer-radius:var(--borderRadius-medium,0.375rem);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-ojWXD svg{fill:var(--fgColor-muted,var(--color-fg-muted));color:var(--fgColor-muted,var(--color-fg-muted))}.prc-SegmentedControl-Button-ojWXD:focus:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,var(--color-accent-fg));outline-offset:-1px}.prc-SegmentedControl-Button-ojWXD:focus:not(:disabled):not(:focus-visible){outline:1px solid transparent}.prc-SegmentedControl-Button-ojWXD:focus-visible:not(:disabled){box-shadow:none;outline:var(--base-size-2,.125rem) solid var(--fgColor-accent,var(--color-accent-fg));outline-offset:-1px}.prc-SegmentedControl-Button-ojWXD:focus:focus-visible:not(:last-child):after{width:0}@media (pointer:coarse){.prc-SegmentedControl-Button-ojWXD:before{content:"";left:0;min-height:44px;position:absolute;right:0;top:50%;transform:translateY(-50%)}}.prc-SegmentedControl-IconButton-O80Eh{width:32px}.prc-SegmentedControl-SegmentedControl-e7570:where([data-full-width]) .prc-SegmentedControl-IconButton-O80Eh{width:100%}.prc-SegmentedControl-Content-gnQ4n{align-items:center;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))}.prc-SegmentedControl-Button-ojWXD[aria-current=true]{font-weight:var(--base-text-weight-semibold,600);padding:0}.prc-SegmentedControl-Button-ojWXD[aria-current=true] .prc-SegmentedControl-Content-gnQ4n{background-color:var(--controlKnob-bgColor-rest,var(--color-switch-knob-bg));border-color:var(--controlKnob-borderColor-rest,var(--color-switch-knob-border));border-radius:var(--segmented-control-outer-radius);padding-left:var(--segmented-control-button-inner-padding);padding-right:var(--segmented-control-button-inner-padding)}.prc-SegmentedControl-Button-ojWXD:not([aria-current=true]):hover .prc-SegmentedControl-Content-gnQ4n{background-color:var(--controlTrack-bgColor-hover,var(--color-switch-track-hover-bg))}.prc-SegmentedControl-Button-ojWXD:not([aria-current=true]):active .prc-SegmentedControl-Content-gnQ4n{background-color:var(--controlTrack-bgColor-active,var(--color-switch-track-active-bg))}.prc-SegmentedControl-Text-c5gSh: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-dAHA8{margin-right:var(--base-size-4,.25rem)}
+/*# sourceMappingURL=SegmentedControl-7f79ab74.css.map */

package/dist/SegmentedControl/SegmentedControl-7f79ab74.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SegmentedControl/SegmentedControl.module.css"],"names":[],"mappings":"AAAA,6CAQE,8EAAkD,CAClD,8FAAuF,CACvF,gDAAyC,CATzC,mBAAoB,CAMpB,8CAAuC,CAHvC,WAAY,CAEZ,QAAS,CADT,SAiBF,CAVE,sEACE,YAAa,CACb,UACF,CAEA,sEAGE,4CAAsC,CADtC,WAEF,CAGF,iCAEE,aAAc,CAKd,WAAY,CADZ,kBAAmB,CAFnB,eAAgB,CAHhB,iBAgDF,CAxCE,kDAEE,gBAiBF,CAfE,wDAQE,uEAA4C,CAJ5C,+BAA0B,CAE1B,UAAW,CALX,iBAAkB,CAElB,yCAAoC,CADpC,4BAAuB,CAGvB,SAIF,CAEA,6JAEE,4BACF,CAGF,kEACE,4BACF,CAEA,6CAEE,gBACF,CAEA,4CAEE,iBACF,CAEA,qEAGE,kBAAmB,CADnB,YAAa,CADb,4CAGF,CAGF,mCAEE,6CAA8C,CAC9C,uCAAwC,CACxC,oEAA4D,CAW5D,4BAA6B,CAC7B,wBAAyB,CAGzB,mDAAoD,CAFpD,cAAe,CAJf,kBAAmB,CACnB,cAAe,CAJf,mBAAoB,CACpB,iBAAkB,CAClB,8CAA2C,CAL3C,WAAY,CAEZ,gDAAiD,CAHjD,UAwDF,CAzCE,uCACE,+CAA0B,CAC1B,gDACF,CAGA,wDAGE,eAAgB,CAFhB,qFAAuD,CACvD,mBAOF,CAHE,4EACE,6BACF,CAIF,gEAGE,eAAgB,CAFhB,qFAAuD,CACvD,mBAEF,CAGA,8EAEE,OACF,CAEA,wBACE,0CAME,UAAW,CAFX,MAAO,CACP,eAAgB,CAJhB,iBAAkB,CAElB,OAAQ,CADR,OAAQ,CAKR,0BACF,CACF,CAGF,uCAEE,UAKF,CAHE,6GACE,UACF,CAGF,oCAiBE,kBAAmB,CAVnB,wBAAyB,CASzB,sGAAyG,CARzG,kBAAmB,CACnB,6CAAqC,CARrC,YAAa,CACb,WAAY,CAgBZ,sBAAuB,CAZvB,2GAA4G,CAF5G,4GAeF,CAEA,sDAEE,gDAA6C,CAD7C,SAaF,CAVE,0FAKE,4EAAiD,CACjD,gFAAiD,CAEjD,mDAAoD,CAJpD,0DAA2D,CAF3D,2DAOF,CAIA,sGACE,qFACF,CAEA,uGACE,uFACF,CAGF,uCAOE,uBAAwB,CANxB,aAAc,CAGd,gDAA6C,CAF7C,QAAS,CACT,eAAgB,CAEhB,mBAAoB,CAGpB,wBAAiB,CAAjB,gBAAiB,CAFjB,iBAGF,CAEA,wCACE,sCACF","file":"SegmentedControl-7f79ab74.css","sourcesContent":[".SegmentedControl {\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\n  &:where([data-full-width]) {\n    display: flex;\n    width: 100%;\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.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    &:has(+ [data-selected])::after,\n    &:where([data-selected])::after {\n      background-color: transparent;\n    }\n  }\n\n  &:focus-within:has(:focus-visible) {\n    background-color: transparent;\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  --segmented-control-outer-radius: var(--borderRadius-medium);\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  @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  /* TODO: use primitive `control.medium.size` when it is available instead of '32px' */\n  width: 32px;\n\n  .SegmentedControl:where([data-full-width]) & {\n    width: 100%;\n  }\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\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-current='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    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.Button:not([aria-current='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

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { SegmentedControlButtonProps } from './SegmentedControlButton';
+import type { SegmentedControlIconButtonProps } from './SegmentedControlIconButton';
+import type { ResponsiveValue } from '../hooks/useResponsiveValue';
+import type { WidthOnlyViewportRangeKeys } from '../utils/types/ViewportRangeKeys';
+export type SegmentedControlProps = {
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    /** Whether the control fills the width of its parent */
+    fullWidth?: boolean | ResponsiveValue<boolean>;
+    /** The handler that gets called when a segment is selected */
+    onChange?: (selectedIndex: number) => void;
+    /** The size of the buttons */
+    size?: 'small' | 'medium';
+    /** Configure alternative ways to render the control when it gets rendered in tight spaces */
+    variant?: 'default' | Partial<Record<WidthOnlyViewportRangeKeys, 'hideLabels' | 'dropdown' | 'default'>>;
+    className?: string;
+};
+export declare const SegmentedControl: React.FC<React.PropsWithChildren<SegmentedControlProps>> & {
+    __SLOT__: symbol;
+    Button: import("../utils/types").FCWithSlotMarker<React.PropsWithChildren<SegmentedControlButtonProps>>;
+    IconButton: import("../utils/types").FCWithSlotMarker<React.PropsWithChildren<SegmentedControlIconButtonProps>>;
+};
+//# sourceMappingURL=SegmentedControl.d.ts.map

package/dist/SegmentedControl/SegmentedControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAC7C,OAAO,KAAK,EAAC,2BAA2B,EAAC,MAAM,0BAA0B,CAAA;AAEzE,OAAO,KAAK,EAAC,+BAA+B,EAAC,MAAM,8BAA8B,CAAA;AAIjF,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,6BAA6B,CAAA;AAEhE,OAAO,KAAK,EAAC,0BAA0B,EAAC,MAAM,kCAAkC,CAAA;AAMhF,MAAM,MAAM,qBAAqB,GAAG;IAClC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC,OAAO,CAAC,CAAA;IAC9C,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,8BAA8B;IAC9B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACzB,6FAA6F;IAC7F,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC,MAAM,CAAC,0BAA0B,EAAE,YAAY,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC,CAAA;IACxG,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAyMD,eAAO,MAAM,gBAAgB;;;;CAI3B,CAAA"}

package/dist/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,232 @@
+import { c } from 'react-compiler-runtime';
+import React, { useRef, useState } from 'react';
+import SegmentedControlButton from './SegmentedControlButton.js';
+import { SegmentedControlIconButton } from './SegmentedControlIconButton.js';
+import { ActionList } from '../ActionList/index.js';
+import { useResponsiveValue } from '../hooks/useResponsiveValue.js';
+import { isElement } from 'react-is';
+import classes from './SegmentedControl.module.css.js';
+import { clsx } from 'clsx';
+import { isSlot } from '../utils/is-slot.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { ActionMenu } from '../ActionMenu/ActionMenu.js';
+
+const Root = t0 => {
+  const $ = c(27);
+  let ariaLabel;
+  let ariaLabelledby;
+  let children;
+  let className;
+  let fullWidth;
+  let onChange;
+  let rest;
+  let size;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      children,
+      fullWidth,
+      onChange,
+      size,
+      variant: t1,
+      className,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = ariaLabel;
+    $[2] = ariaLabelledby;
+    $[3] = children;
+    $[4] = className;
+    $[5] = fullWidth;
+    $[6] = onChange;
+    $[7] = rest;
+    $[8] = size;
+    $[9] = t1;
+  } else {
+    ariaLabel = $[1];
+    ariaLabelledby = $[2];
+    children = $[3];
+    className = $[4];
+    fullWidth = $[5];
+    onChange = $[6];
+    rest = $[7];
+    size = $[8];
+    t1 = $[9];
+  }
+  const variant = t1 === undefined ? "default" : t1;
+  const segmentedControlContainerRef = useRef(null);
+  let t2;
+  if ($[10] !== children || $[11] !== onChange) {
+    t2 = onChange === undefined || React.Children.toArray(children).some(_temp);
+    $[10] = children;
+    $[11] = onChange;
+    $[12] = t2;
+  } else {
+    t2 = $[12];
+  }
+  const isUncontrolled = t2;
+  const responsiveVariant = useResponsiveValue(variant, "default");
+  const isFullWidth = useResponsiveValue(fullWidth, false);
+  let t3;
+  if ($[13] !== children) {
+    const selectedSegments = React.Children.toArray(children).map(_temp2);
+    const hasSelectedButton = selectedSegments.some(_temp3);
+    t3 = hasSelectedButton ? selectedSegments.indexOf(true) : 0;
+    $[13] = children;
+    $[14] = t3;
+  } else {
+    t3 = $[14];
+  }
+  const selectedIndexExternal = t3;
+  const [selectedIndexInternalState, setSelectedIndexInternalState] = useState(selectedIndexExternal);
+  const selectedIndex = isUncontrolled ? selectedIndexInternalState : selectedIndexExternal;
+  let t4;
+  if ($[15] !== ariaLabel || $[16] !== ariaLabelledby || $[17] !== children || $[18] !== className || $[19] !== isFullWidth || $[20] !== isUncontrolled || $[21] !== onChange || $[22] !== responsiveVariant || $[23] !== rest || $[24] !== selectedIndex || $[25] !== size) {
+    const selectedChild = /*#__PURE__*/React.isValidElement(React.Children.toArray(children)[selectedIndex]) ? React.Children.toArray(children)[selectedIndex] : undefined;
+    const getChildIcon = _temp4;
+    const getChildText = _temp5;
+    if (!ariaLabel && !ariaLabelledby) {
+      console.warn("Use the `aria-label` or `aria-labelledby` prop to provide an accessible label for assistive technologies");
+    }
+    t4 = responsiveVariant === "dropdown" ? /*#__PURE__*/jsx(Fragment, {
+      children: /*#__PURE__*/jsxs(ActionMenu, {
+        children: [/*#__PURE__*/jsx(ActionMenu.Button, {
+          "aria-label": ariaLabel && `${getChildText(selectedChild)}, ${ariaLabel}`,
+          leadingVisual: getChildIcon(selectedChild),
+          children: getChildText(selectedChild)
+        }), /*#__PURE__*/jsx(ActionMenu.Overlay, {
+          "aria-labelledby": ariaLabelledby,
+          children: /*#__PURE__*/jsx(ActionList, {
+            selectionVariant: "single",
+            children: React.Children.map(children, (child_1, index) => {
+              const ChildIcon = getChildIcon(child_1);
+              if (! /*#__PURE__*/React.isValidElement(child_1)) {
+                return null;
+              }
+              return /*#__PURE__*/jsxs(ActionList.Item, {
+                selected: index === selectedIndex,
+                onSelect: event => {
+                  isUncontrolled && setSelectedIndexInternalState(index);
+                  onChange && onChange(index);
+                  child_1.props.onClick && child_1.props.onClick(event);
+                },
+                children: [ChildIcon, " ", getChildText(child_1)]
+              }, `segmented-control-action-btn-${index}`);
+            })
+          })
+        })]
+      })
+    }) : /*#__PURE__*/jsx("ul", {
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      ref: segmentedControlContainerRef,
+      className: clsx(classes.SegmentedControl, className),
+      "data-full-width": isFullWidth || undefined,
+      "data-size": size,
+      ...rest,
+      children: React.Children.map(children, (child_2, index_0) => {
+        if (! /*#__PURE__*/React.isValidElement(child_2)) {
+          return null;
+        }
+        const sharedChildProps = {
+          onClick: onChange ? event_0 => {
+            onChange(index_0);
+            isUncontrolled && setSelectedIndexInternalState(index_0);
+            child_2.props.onClick && child_2.props.onClick(event_0);
+          } : event_1 => {
+            child_2.props.onClick && child_2.props.onClick(event_1);
+            isUncontrolled && setSelectedIndexInternalState(index_0);
+          },
+          selected: index_0 === selectedIndex,
+          style: {
+            "--separator-color": index_0 === selectedIndex || index_0 === selectedIndex - 1 ? "transparent" : "var(--borderColor-default)",
+            ...child_2.props.style
+          }
+        };
+        if (responsiveVariant === "hideLabels" && /*#__PURE__*/React.isValidElement(child_2) && (child_2.type === SegmentedControlButton || isSlot(child_2, SegmentedControlButton))) {
+          const {
+            "aria-label": childAriaLabel,
+            leadingVisual: leadingVisual_0,
+            leadingIcon,
+            children: childPropsChildren,
+            ...restChildProps
+          } = child_2.props;
+          const visual = leadingVisual_0 !== null && leadingVisual_0 !== void 0 ? leadingVisual_0 : leadingIcon;
+          if (!visual) {
+            console.warn("A `leadingVisual` or `leadingIcon` prop is required when hiding visible labels");
+          } else {
+            return /*#__PURE__*/jsx(SegmentedControlIconButton, {
+              "aria-label": childAriaLabel || childPropsChildren,
+              icon: visual,
+              className: classes.IconButton,
+              ...sharedChildProps,
+              ...restChildProps
+            });
+          }
+        }
+        return /*#__PURE__*/React.cloneElement(child_2, sharedChildProps);
+      })
+    });
+    $[15] = ariaLabel;
+    $[16] = ariaLabelledby;
+    $[17] = children;
+    $[18] = className;
+    $[19] = isFullWidth;
+    $[20] = isUncontrolled;
+    $[21] = onChange;
+    $[22] = responsiveVariant;
+    $[23] = rest;
+    $[24] = selectedIndex;
+    $[25] = size;
+    $[26] = t4;
+  } else {
+    t4 = $[26];
+  }
+  return t4;
+};
+Root.displayName = 'SegmentedControl';
+const SegmentedControl = Object.assign(Root, {
+  __SLOT__: Symbol('SegmentedControl'),
+  Button: SegmentedControlButton,
+  IconButton: SegmentedControlIconButton
+});
+function _temp(child) {
+  return /*#__PURE__*/React.isValidElement(child) && child.props.defaultSelected !== undefined;
+}
+function _temp2(child_0) {
+  return /*#__PURE__*/React.isValidElement(child_0) && (child_0.props.defaultSelected || child_0.props.selected);
+}
+function _temp3(isSelected) {
+  return isSelected;
+}
+function _temp4(childArg) {
+  if (/*#__PURE__*/React.isValidElement(childArg) && (childArg.type === SegmentedControlButton || isSlot(childArg, SegmentedControlButton))) {
+    var _childArg$props$leadi;
+    const leadingVisual = (_childArg$props$leadi = childArg.props.leadingVisual) !== null && _childArg$props$leadi !== void 0 ? _childArg$props$leadi : childArg.props.leadingIcon;
+    if (leadingVisual) {
+      if (isElement(leadingVisual)) {
+        return leadingVisual;
+      } else {
+        const LeadingVisual = leadingVisual;
+        return /*#__PURE__*/jsx(LeadingVisual, {});
+      }
+    }
+  }
+  if (/*#__PURE__*/React.isValidElement(childArg) && (childArg.type === SegmentedControlIconButton || isSlot(childArg, SegmentedControlIconButton))) {
+    if (isElement(childArg.props.icon)) ; else {
+      const Icon = childArg.props.icon;
+      return /*#__PURE__*/jsx(Icon, {});
+    }
+  }
+  return null;
+}
+function _temp5(childArg_0) {
+  if (/*#__PURE__*/React.isValidElement(childArg_0) && (childArg_0.type === SegmentedControlButton || isSlot(childArg_0, SegmentedControlButton))) {
+    return childArg_0.props.children;
+  }
+  return /*#__PURE__*/React.isValidElement(childArg_0) ? childArg_0.props["aria-label"] : null;
+}
+
+export { SegmentedControl };

package/dist/SegmentedControl/SegmentedControl.module.css.js

@@ -0,0 +1,5 @@
+import './SegmentedControl-7f79ab74.css';
+
+var classes = {"SegmentedControl":"prc-SegmentedControl-SegmentedControl-e7570","Item":"prc-SegmentedControl-Item-7Aq6h","Counter":"prc-SegmentedControl-Counter--H-pM","Button":"prc-SegmentedControl-Button-ojWXD","IconButton":"prc-SegmentedControl-IconButton-O80Eh","Content":"prc-SegmentedControl-Content-gnQ4n","Text":"prc-SegmentedControl-Text-c5gSh","LeadingIcon":"prc-SegmentedControl-LeadingIcon-dAHA8"};
+
+export { classes as default };

package/dist/SegmentedControl/SegmentedControlButton.d.ts

@@ -0,0 +1,21 @@
+import type { ButtonHTMLAttributes } from 'react';
+import type React from 'react';
+import type { IconProps } from '@primer/octicons-react';
+import type { FCWithSlotMarker } from '../utils/types';
+export type SegmentedControlButtonProps = {
+    /** The visible label rendered in the button */
+    children: string;
+    /** Whether the segment is selected. This is used for controlled `SegmentedControls`, and needs to be updated using the `onChange` handler on `SegmentedControl`. */
+    selected?: boolean;
+    /** Whether the segment is selected. This is used for uncontrolled `SegmentedControls` to pick one `SegmentedControlButton` that is selected on the initial render. */
+    defaultSelected?: boolean;
+    /** The leading visual comes before item label */
+    leadingVisual?: React.FunctionComponent<React.PropsWithChildren<IconProps>> | React.ReactElement;
+    /** @deprecated Use `leadingVisual` instead. The leading icon comes before item label */
+    leadingIcon?: React.FunctionComponent<React.PropsWithChildren<IconProps>> | React.ReactElement;
+    /** Optional counter to display on the right side of the button */
+    count?: number | string;
+} & ButtonHTMLAttributes<HTMLButtonElement | HTMLLIElement>;
+declare const SegmentedControlButton: FCWithSlotMarker<React.PropsWithChildren<SegmentedControlButtonProps>>;
+export default SegmentedControlButton;
+//# sourceMappingURL=SegmentedControlButton.d.ts.map

package/dist/SegmentedControl/SegmentedControlButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControlButton.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControlButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,OAAO,CAAA;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAMrD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,gBAAgB,CAAA;AAEpD,MAAM,MAAM,2BAA2B,GAAG;IACxC,+CAA+C;IAC/C,QAAQ,EAAE,MAAM,CAAA;IAChB,oKAAoK;IACpK,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sKAAsK;IACtK,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,iDAAiD;IACjD,aAAa,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAA;IAChG,wFAAwF;IACxF,WAAW,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAA;IAC9F,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB,GAAG,oBAAoB,CAAC,iBAAiB,GAAG,aAAa,CAAC,CAAA;AAE3D,QAAA,MAAM,sBAAsB,EAAE,gBAAgB,CAAC,KAAK,CAAC,iBAAiB,CAAC,2BAA2B,CAAC,CAiClG,CAAA;AAED,eAAe,sBAAsB,CAAA"}

package/dist/SegmentedControl/SegmentedControlButton.js

@@ -0,0 +1,167 @@
+import { c } from 'react-compiler-runtime';
+import { isElement } from 'react-is';
+import classes from './SegmentedControl.module.css.js';
+import { clsx } from 'clsx';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import CounterLabel from '../CounterLabel/CounterLabel.js';
+
+const SegmentedControlButton = t0 => {
+  var _leadingVisual;
+  const $ = c(31);
+  let children;
+  let className;
+  let count;
+  let leadingIcon;
+  let leadingVisual;
+  let rest;
+  let selected;
+  if ($[0] !== t0) {
+    const {
+      children: t1,
+      leadingVisual: t2,
+      leadingIcon: t3,
+      selected: t4,
+      className: t5,
+      defaultSelected: _defaultSelected,
+      count: t6,
+      ...t7
+    } = t0;
+    children = t1;
+    leadingVisual = t2;
+    leadingIcon = t3;
+    selected = t4;
+    className = t5;
+    count = t6;
+    rest = t7;
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = count;
+    $[4] = leadingIcon;
+    $[5] = leadingVisual;
+    $[6] = rest;
+    $[7] = selected;
+  } else {
+    children = $[1];
+    className = $[2];
+    count = $[3];
+    leadingIcon = $[4];
+    leadingVisual = $[5];
+    rest = $[6];
+    selected = $[7];
+  }
+  const LeadingVisual = (_leadingVisual = leadingVisual) !== null && _leadingVisual !== void 0 ? _leadingVisual : leadingIcon;
+  let t1;
+  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = clsx(classes.Item);
+    $[8] = t1;
+  } else {
+    t1 = $[8];
+  }
+  const t2 = selected ? "" : undefined;
+  let t3;
+  if ($[9] !== className) {
+    t3 = clsx(classes.Button, className);
+    $[9] = className;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  let t4;
+  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = clsx(classes.Content, "segmentedControl-content");
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  let t5;
+  if ($[12] !== LeadingVisual) {
+    t5 = LeadingVisual && /*#__PURE__*/jsx("div", {
+      className: classes.LeadingIcon,
+      children: isElement(LeadingVisual) ? LeadingVisual : /*#__PURE__*/jsx(LeadingVisual, {})
+    });
+    $[12] = LeadingVisual;
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  let t6;
+  if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = clsx(classes.Text, "segmentedControl-text");
+    $[14] = t6;
+  } else {
+    t6 = $[14];
+  }
+  let t7;
+  if ($[15] !== children) {
+    t7 = /*#__PURE__*/jsx("div", {
+      className: t6,
+      "data-text": children,
+      children: children
+    });
+    $[15] = children;
+    $[16] = t7;
+  } else {
+    t7 = $[16];
+  }
+  let t8;
+  if ($[17] !== count) {
+    t8 = count !== undefined && /*#__PURE__*/jsx("span", {
+      className: classes.Counter,
+      children: /*#__PURE__*/jsx(CounterLabel, {
+        children: count
+      })
+    });
+    $[17] = count;
+    $[18] = t8;
+  } else {
+    t8 = $[18];
+  }
+  let t9;
+  if ($[19] !== t5 || $[20] !== t7 || $[21] !== t8) {
+    t9 = /*#__PURE__*/jsxs("span", {
+      className: t4,
+      children: [t5, t7, t8]
+    });
+    $[19] = t5;
+    $[20] = t7;
+    $[21] = t8;
+    $[22] = t9;
+  } else {
+    t9 = $[22];
+  }
+  let t10;
+  if ($[23] !== rest || $[24] !== selected || $[25] !== t3 || $[26] !== t9) {
+    t10 = /*#__PURE__*/jsx("button", {
+      "aria-current": selected,
+      className: t3,
+      type: "button",
+      ...rest,
+      children: t9
+    });
+    $[23] = rest;
+    $[24] = selected;
+    $[25] = t3;
+    $[26] = t9;
+    $[27] = t10;
+  } else {
+    t10 = $[27];
+  }
+  let t11;
+  if ($[28] !== t10 || $[29] !== t2) {
+    t11 = /*#__PURE__*/jsx("li", {
+      className: t1,
+      "data-selected": t2,
+      children: t10
+    });
+    $[28] = t10;
+    $[29] = t2;
+    $[30] = t11;
+  } else {
+    t11 = $[30];
+  }
+  return t11;
+};
+SegmentedControlButton.__SLOT__ = Symbol('SegmentedControl.Button');
+
+export { SegmentedControlButton as default };

package/dist/SegmentedControl/SegmentedControlIconButton.d.ts

@@ -0,0 +1,21 @@
+import type { ButtonHTMLAttributes } from 'react';
+import type React from 'react';
+import type { IconProps } from '@primer/octicons-react';
+import type { TooltipDirection } from '../TooltipV2';
+import type { FCWithSlotMarker } from '../utils/types';
+export type SegmentedControlIconButtonProps = {
+    'aria-label': string;
+    /** The icon that represents the segmented control item */
+    icon: React.FunctionComponent<React.PropsWithChildren<IconProps>> | React.ReactElement;
+    /** Whether the segment is selected. This is used for controlled SegmentedControls, and needs to be updated using the onChange handler on SegmentedControl. */
+    selected?: boolean;
+    /** Whether the segment is selected. This is used for uncontrolled SegmentedControls to pick one SegmentedControlButton that is selected on the initial render. */
+    defaultSelected?: boolean;
+    /** Supplementary description that renders inside tooltip in place of the label.*/
+    description?: string;
+    /** The direction for the tooltip.*/
+    tooltipDirection?: TooltipDirection;
+} & ButtonHTMLAttributes<HTMLButtonElement | HTMLLIElement>;
+export declare const SegmentedControlIconButton: FCWithSlotMarker<React.PropsWithChildren<SegmentedControlIconButtonProps>>;
+export default SegmentedControlIconButton;
+//# sourceMappingURL=SegmentedControlIconButton.d.ts.map

package/dist/SegmentedControl/SegmentedControlIconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControlIconButton.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControlIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,OAAO,CAAA;AAC/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAGrD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAA;AAIlD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,gBAAgB,CAAA;AAEpD,MAAM,MAAM,+BAA+B,GAAG;IAC5C,YAAY,EAAE,MAAM,CAAA;IACpB,0DAA0D;IAC1D,IAAI,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAA;IACtF,8JAA8J;IAC9J,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kKAAkK;IAClK,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,kFAAkF;IAClF,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oCAAoC;IACpC,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;CACpC,GAAG,oBAAoB,CAAC,iBAAiB,GAAG,aAAa,CAAC,CAAA;AAE3D,eAAO,MAAM,0BAA0B,EAAE,gBAAgB,CAAC,KAAK,CAAC,iBAAiB,CAAC,+BAA+B,CAAC,CAiDjH,CAAA;AAID,eAAe,0BAA0B,CAAA"}