@primer/react 38.0.0-rc.2 → 38.0.0-rc.3

package/{lib-esm → dist}/Popover/Popover.js

@@ -2,7 +2,6 @@ import { c } from 'react-compiler-runtime';
 import { clsx } from 'clsx';
 import classes from './Popover.module.css.js';
 import React from 'react';
-import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
 import { jsx } from 'react/jsx-runtime';
 
 const Popover = /*#__PURE__*/React.forwardRef(function Popover(t0, forwardRef) {
@@ -46,7 +45,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(t0, forwardRef) {
   }
   let t5;
   if ($[8] !== caret || $[9] !== forwardRef || $[10] !== props || $[11] !== t2 || $[12] !== t3 || $[13] !== t4) {
-    t5 = /*#__PURE__*/jsx(BoxWithFallback, {
+    t5 = /*#__PURE__*/jsx("div", {
       ...props,
       ref: forwardRef,
       "data-open": t2,
@@ -68,18 +67,16 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(t0, forwardRef) {
 });
 Popover.displayName = 'Popover';
 const PopoverContent = t0 => {
-  const $ = c(14);
+  const $ = c(12);
   let className;
   let props;
   let t1;
   let t2;
-  let t3;
   if ($[0] !== t0) {
     ({
       className,
       width: t1,
       height: t2,
-      overflow: t3,
       ...props
     } = t0);
     $[0] = t0;
@@ -87,44 +84,39 @@ const PopoverContent = t0 => {
     $[2] = props;
     $[3] = t1;
     $[4] = t2;
-    $[5] = t3;
   } else {
     className = $[1];
     props = $[2];
     t1 = $[3];
     t2 = $[4];
-    t3 = $[5];
   }
   const width = t1 === undefined ? "small" : t1;
   const height = t2 === undefined ? "fit-content" : t2;
-  const overflow = t3 === undefined ? "auto" : t3;
-  let t4;
-  if ($[6] !== className) {
-    t4 = clsx(className, classes.PopoverContent);
-    $[6] = className;
-    $[7] = t4;
+  let t3;
+  if ($[5] !== className) {
+    t3 = clsx(className, classes.PopoverContent);
+    $[5] = className;
+    $[6] = t3;
   } else {
-    t4 = $[7];
+    t3 = $[6];
   }
-  let t5;
-  if ($[8] !== height || $[9] !== overflow || $[10] !== props || $[11] !== t4 || $[12] !== width) {
-    t5 = /*#__PURE__*/jsx(BoxWithFallback, {
+  let t4;
+  if ($[7] !== height || $[8] !== props || $[9] !== t3 || $[10] !== width) {
+    t4 = /*#__PURE__*/jsx("div", {
       "data-width": width,
       "data-height": height,
-      "data-overflow": overflow,
-      className: t4,
+      className: t3,
       ...props
     });
-    $[8] = height;
-    $[9] = overflow;
-    $[10] = props;
+    $[7] = height;
+    $[8] = props;
+    $[9] = t3;
+    $[10] = width;
     $[11] = t4;
-    $[12] = width;
-    $[13] = t5;
   } else {
-    t5 = $[13];
+    t4 = $[11];
   }
-  return t5;
+  return t4;
 };
 PopoverContent.displayName = 'Popover.Content';
 var Popover$1 = Object.assign(Popover, {

package/{lib-esm → dist}/Popover/Popover.module.css.js

@@ -1,4 +1,4 @@
-import './Popover-b609f443.css';
+import './Popover-3ba3b962.css';
 
 var classes = {"Popover":"prc-Popover-Popover-v1ShS","PopoverContent":"prc-Popover-PopoverContent-nMzFS"};
 

package/{lib-esm → dist}/Portal/Portal.d.ts

@@ -6,6 +6,13 @@ import React from 'react';
  * If name is not specified, registers the default portal root.
  */
 export declare function registerPortalRoot(root: Element, name?: string): void;
+/**
+ * Provides the ability for component trees to override the portal root container for a sub-set of the experience.
+ * The portal will prioritize the context value unless overridden by their own `containerName` prop, and fallback to the default root if neither are specified
+ */
+export declare const PortalContext: React.Context<{
+    portalContainerName?: string;
+}>;
 export interface PortalProps {
     /**
      * Called when this portal is added to the DOM

package/dist/Portal/Portal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.d.ts","sourceRoot":"","sources":["../../src/Portal/Portal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AASvC;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,SAAgC,GAAG,IAAI,CAE5F;AA4BD;;;GAGG;AACH,eAAO,MAAM,aAAa;0BACF,MAAM;EACxB,CAAA;AAEN,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAEpB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CA2CjE,CAAA"}

package/{lib-esm → dist}/Portal/Portal.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { createPortal } from 'react-dom';
 import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
 
@@ -40,6 +40,12 @@ function ensureDefaultPortal() {
     registerPortalRoot(defaultPortalContainer);
   }
 }
+
+/**
+ * Provides the ability for component trees to override the portal root container for a sub-set of the experience.
+ * The portal will prioritize the context value unless overridden by their own `containerName` prop, and fallback to the default root if neither are specified
+ */
+const PortalContext = /*#__PURE__*/React.createContext({});
 /**
  * Creates a React Portal, placing all children in a separate physical DOM root node.
  * @see https://reactjs.org/docs/portals.html
@@ -49,6 +55,9 @@ const Portal = ({
   onMount,
   containerName: _containerName
 }) => {
+  const {
+    portalContainerName
+  } = useContext(PortalContext);
   const elementRef = React.useRef(null);
   if (!elementRef.current) {
     const div = document.createElement('div');
@@ -61,14 +70,14 @@ const Portal = ({
   }
   const element = elementRef.current;
   useIsomorphicLayoutEffect(() => {
-    let containerName = _containerName;
+    let containerName = _containerName !== null && _containerName !== void 0 ? _containerName : portalContainerName;
     if (containerName === undefined) {
       containerName = DEFAULT_PORTAL_CONTAINER_NAME;
       ensureDefaultPortal();
     }
     const parentElement = portalRootRegistry[containerName];
     if (!parentElement) {
-      throw new Error(`Portal container '${_containerName}' is not yet registered. Container must be registered with registerPortal before use.`);
+      throw new Error(`Portal container '${containerName}' is not yet registered. Container must be registered with registerPortalRoot before use.`);
     }
     parentElement.appendChild(element);
     onMount === null || onMount === void 0 ? void 0 : onMount();
@@ -77,8 +86,8 @@ const Portal = ({
     };
     // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [element]);
+  }, [element, _containerName, portalContainerName]);
   return /*#__PURE__*/createPortal(children, element);
 };
 
-export { Portal, registerPortalRoot };
+export { Portal, PortalContext, registerPortalRoot };

package/dist/Portal/index.d.ts

@@ -0,0 +1,7 @@
+import type { PortalProps } from './Portal';
+import { Portal, registerPortalRoot, PortalContext } from './Portal';
+export default Portal;
+export { registerPortalRoot };
+export type { PortalProps };
+export { PortalContext };
+//# sourceMappingURL=index.d.ts.map

package/{lib → dist}/Portal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Portal/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,UAAU,CAAA;AACzC,OAAO,EAAC,MAAM,EAAE,kBAAkB,EAAC,MAAM,UAAU,CAAA;AAEnD,eAAe,MAAM,CAAA;AACrB,OAAO,EAAC,kBAAkB,EAAC,CAAA;AAC3B,YAAY,EAAC,WAAW,EAAC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Portal/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,UAAU,CAAA;AACzC,OAAO,EAAC,MAAM,EAAE,kBAAkB,EAAE,aAAa,EAAC,MAAM,UAAU,CAAA;AAElE,eAAe,MAAM,CAAA;AACrB,OAAO,EAAC,kBAAkB,EAAC,CAAA;AAC3B,YAAY,EAAC,WAAW,EAAC,CAAA;AACzB,OAAO,EAAC,aAAa,EAAC,CAAA"}

package/{lib-esm → dist}/Portal/index.js

@@ -1,5 +1,5 @@
 import { Portal } from './Portal.js';
-export { registerPortalRoot } from './Portal.js';
+export { PortalContext, registerPortalRoot } from './Portal.js';
 
 
 

package/dist/ProgressBar/ProgressBar-181186d4.css

@@ -0,0 +1,2 @@
+@keyframes prc-ProgressBar-shimmer-i1RxN{0%{mask-position:200%}to{mask-position:0}}.prc-ProgressBar-ProgressBarItem-stL6O{--progress-width: ;--progress-bg: ;background-color:var(--progress-bg);width:var(--progress-width)}@media (prefers-reduced-motion:no-preference){.prc-ProgressBar-ProgressBarItem-stL6O[data-animated=true]{animation-duration:1s;animation-iteration-count:infinite;animation-name:prc-ProgressBar-shimmer-i1RxN;mask-image:linear-gradient(75deg,#000 30%,rgba(0,0,0,.65) 80%);mask-size:200%}}.prc-ProgressBar-ProgressBarContainer-E-z8S{background-color:var(--progressBar-track-bgColor);border-radius:var(--borderRadius-small,.1875rem);display:flex;gap:2px;outline:solid 1px var(--progressBar-track-borderColor);outline-offset:-1px;overflow:hidden}.prc-ProgressBar-ProgressBarContainer-E-z8S:where([data-progress-display=inline]){display:inline-flex}.prc-ProgressBar-ProgressBarContainer-E-z8S:where([data-progress-bar-size=default]){height:8px}.prc-ProgressBar-ProgressBarContainer-E-z8S:where([data-progress-bar-size=small]){height:5px}.prc-ProgressBar-ProgressBarContainer-E-z8S:where([data-progress-bar-size=large]){height:10px}
+/*# sourceMappingURL=ProgressBar-181186d4.css.map */

package/dist/ProgressBar/ProgressBar-181186d4.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ProgressBar/ProgressBar.module.css"],"names":[],"mappings":"AAAA,yCACE,GACE,kBACF,CAEA,GACE,eACF,CACF,CAEA,uCAEE,kBAAkB,CAClB,eAAe,CAIf,mCAAoC,CAFpC,2BAaF,CATE,8CACE,2DAIE,qBAAsB,CACtB,kCAAmC,CAFnC,4CAAuB,CAFvB,8DAAqE,CACrE,cAIF,CACF,CAGF,4CAIE,iDAAkD,CAClD,gDAAwC,CAJxC,YAAa,CAKb,OAAQ,CACR,sDAAuD,CACvD,mBAAoB,CANpB,eAuBF,CAfE,kFACE,mBACF,CAEA,oFACE,UACF,CAEA,kFACE,UACF,CAEA,kFACE,WACF","file":"ProgressBar-181186d4.css","sourcesContent":["@keyframes shimmer {\n  from {\n    mask-position: 200%;\n  }\n\n  to {\n    mask-position: 0%;\n  }\n}\n\n.ProgressBarItem {\n  /* these are passed from the component */\n  --progress-width: ;\n  --progress-bg: ;\n\n  width: var(--progress-width);\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--progress-bg);\n\n  @media (prefers-reduced-motion: no-preference) {\n    &[data-animated='true'] {\n      mask-image: linear-gradient(75deg, #000 30%, rgba(0, 0, 0, 0.65) 80%);\n      mask-size: 200%;\n      animation-name: shimmer;\n      animation-duration: 1s;\n      animation-iteration-count: infinite;\n    }\n  }\n}\n\n.ProgressBarContainer {\n  display: flex;\n  overflow: hidden;\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--progressBar-track-bgColor);\n  border-radius: var(--borderRadius-small);\n  gap: 2px;\n  outline: solid 1px var(--progressBar-track-borderColor);\n  outline-offset: -1px;\n\n  &:where([data-progress-display='inline']) {\n    display: inline-flex;\n  }\n\n  &:where([data-progress-bar-size='default']) {\n    height: 8px;\n  }\n\n  &:where([data-progress-bar-size='small']) {\n    height: 5px;\n  }\n\n  &:where([data-progress-bar-size='large']) {\n    height: 10px;\n  }\n}\n"]}

package/{lib-esm → dist}/ProgressBar/ProgressBar.module.css.js

@@ -1,4 +1,4 @@
-import './ProgressBar-36f689cb.css';
+import './ProgressBar-181186d4.css';
 
 var classes = {"ProgressBarItem":"prc-ProgressBar-ProgressBarItem-stL6O","ProgressBarContainer":"prc-ProgressBar-ProgressBarContainer-E-z8S"};
 

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/{lib-esm → dist}/SegmentedControl/SegmentedControl.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
 import type { SegmentedControlButtonProps } from './SegmentedControlButton';
 import type { SegmentedControlIconButtonProps } from './SegmentedControlIconButton';
-import type { SxProp } from '../sx';
 import type { ResponsiveValue } from '../hooks/useResponsiveValue';
 import type { WidthOnlyViewportRangeKeys } from '../utils/types/ViewportRangeKeys';
-type SegmentedControlProps = {
+export type SegmentedControlProps = {
     'aria-label'?: string;
     'aria-labelledby'?: string;
     'aria-describedby'?: string;
@@ -17,10 +16,9 @@ type SegmentedControlProps = {
     /** Configure alternative ways to render the control when it gets rendered in tight spaces */
     variant?: 'default' | Partial<Record<WidthOnlyViewportRangeKeys, 'hideLabels' | 'dropdown' | 'default'>>;
     className?: string;
-} & SxProp;
+};
 export declare const SegmentedControl: React.FC<React.PropsWithChildren<SegmentedControlProps>> & {
     Button: React.FC<React.PropsWithChildren<SegmentedControlButtonProps>>;
     IconButton: React.FC<React.PropsWithChildren<SegmentedControlIconButtonProps>>;
 };
-export {};
 //# 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;AAKjF,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,6BAA6B,CAAA;AAEhE,OAAO,KAAK,EAAC,0BAA0B,EAAC,MAAM,kCAAkC,CAAA;AAKhF,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;AAiMD,eAAO,MAAM,gBAAgB;;;CAG3B,CAAA"}

package/{lib-esm → dist}/SegmentedControl/SegmentedControl.js

@@ -8,12 +8,11 @@ import { useResponsiveValue } from '../hooks/useResponsiveValue.js';
 import { isElement } from 'react-is';
 import classes from './SegmentedControl.module.css.js';
 import { clsx } from 'clsx';
-import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { ActionMenu } from '../ActionMenu/ActionMenu.js';
 
 const Root = t0 => {
-  const $ = c(30);
+  const $ = c(28);
   let ariaLabel;
   let ariaLabelledby;
   let children;
@@ -22,7 +21,6 @@ const Root = t0 => {
   let onChange;
   let rest;
   let size;
-  let sxProp;
   let t1;
   if ($[0] !== t0) {
     ({
@@ -32,7 +30,6 @@ const Root = t0 => {
       fullWidth,
       onChange,
       size,
-      sx: sxProp,
       variant: t1,
       className,
       ...rest
@@ -46,8 +43,7 @@ const Root = t0 => {
     $[6] = onChange;
     $[7] = rest;
     $[8] = size;
-    $[9] = sxProp;
-    $[10] = t1;
+    $[9] = t1;
   } else {
     ariaLabel = $[1];
     ariaLabelledby = $[2];
@@ -57,8 +53,7 @@ const Root = t0 => {
     onChange = $[6];
     rest = $[7];
     size = $[8];
-    sxProp = $[9];
-    t1 = $[10];
+    t1 = $[9];
   }
   const variant = t1 === undefined ? "default" : t1;
   const segmentedControlContainerRef = useRef(null);
@@ -66,32 +61,32 @@ const Root = t0 => {
     theme
   } = useTheme();
   let t2;
-  if ($[11] !== children || $[12] !== onChange) {
+  if ($[10] !== children || $[11] !== onChange) {
     t2 = onChange === undefined || React.Children.toArray(children).some(_temp);
-    $[11] = children;
-    $[12] = onChange;
-    $[13] = t2;
+    $[10] = children;
+    $[11] = onChange;
+    $[12] = t2;
   } else {
-    t2 = $[13];
+    t2 = $[12];
   }
   const isUncontrolled = t2;
   const responsiveVariant = useResponsiveValue(variant, "default");
   const isFullWidth = useResponsiveValue(fullWidth, false);
   let t3;
-  if ($[14] !== children) {
+  if ($[13] !== children) {
     const selectedSegments = React.Children.toArray(children).map(_temp2);
     const hasSelectedButton = selectedSegments.some(_temp3);
     t3 = hasSelectedButton ? selectedSegments.indexOf(true) : 0;
-    $[14] = children;
-    $[15] = t3;
+    $[13] = children;
+    $[14] = t3;
   } else {
-    t3 = $[15];
+    t3 = $[14];
   }
   const selectedIndexExternal = t3;
   const [selectedIndexInternalState, setSelectedIndexInternalState] = useState(selectedIndexExternal);
   const selectedIndex = isUncontrolled ? selectedIndexInternalState : selectedIndexExternal;
   let t4;
-  if ($[16] !== ariaLabel || $[17] !== ariaLabelledby || $[18] !== children || $[19] !== className || $[20] !== isFullWidth || $[21] !== isUncontrolled || $[22] !== onChange || $[23] !== responsiveVariant || $[24] !== rest || $[25] !== selectedIndex || $[26] !== size || $[27] !== sxProp || $[28] !== (theme === null || theme === void 0 ? void 0 : theme.colors)) {
+  if ($[15] !== ariaLabel || $[16] !== ariaLabelledby || $[17] !== children || $[18] !== className || $[19] !== isFullWidth || $[20] !== isUncontrolled || $[21] !== onChange || $[22] !== responsiveVariant || $[23] !== rest || $[24] !== selectedIndex || $[25] !== size || $[26] !== (theme === null || theme === void 0 ? void 0 : theme.colors)) {
     const selectedChild = /*#__PURE__*/React.isValidElement(React.Children.toArray(children)[selectedIndex]) ? React.Children.toArray(children)[selectedIndex] : undefined;
     const getChildIcon = _temp4;
     const getChildText = _temp5;
@@ -126,9 +121,7 @@ const Root = t0 => {
           })
         })]
       })
-    }) : /*#__PURE__*/jsx(BoxWithFallback, {
-      as: "ul",
-      sx: sxProp,
+    }) : /*#__PURE__*/jsx("ul", {
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledby,
       ref: segmentedControlContainerRef,
@@ -153,8 +146,7 @@ const Root = t0 => {
           style: {
             "--separator-color": index_0 === selectedIndex || index_0 === selectedIndex - 1 ? "transparent" : theme === null || theme === void 0 ? void 0 : theme.colors.border.default,
             ...child_2.props.style
-          },
-          sx: child_2.props.sx
+          }
         };
         if (responsiveVariant === "hideLabels" && /*#__PURE__*/React.isValidElement(child_2) && child_2.type === SegmentedControlButton) {
           const {
@@ -163,21 +155,14 @@ const Root = t0 => {
             children: childPropsChildren,
             ...restChildProps
           } = child_2.props;
-          const {
-            sx: sharedSxProp,
-            ...restSharedChildProps
-          } = sharedChildProps;
           if (!leadingIcon) {
             console.warn("A `leadingIcon` prop is required when hiding visible labels");
           } else {
             return /*#__PURE__*/jsx(SegmentedControlIconButton, {
               "aria-label": childAriaLabel || childPropsChildren,
               icon: leadingIcon,
-              sx: {
-                ...sharedSxProp,
-                width: !isFullWidth ? "32px" : "100%"
-              },
-              ...restSharedChildProps,
+              className: classes.IconButton,
+              ...sharedChildProps,
               ...restChildProps
             });
           }
@@ -185,22 +170,21 @@ const Root = t0 => {
         return /*#__PURE__*/React.cloneElement(child_2, sharedChildProps);
       })
     });
-    $[16] = ariaLabel;
-    $[17] = ariaLabelledby;
-    $[18] = children;
-    $[19] = className;
-    $[20] = isFullWidth;
-    $[21] = isUncontrolled;
-    $[22] = onChange;
-    $[23] = responsiveVariant;
-    $[24] = rest;
-    $[25] = selectedIndex;
-    $[26] = size;
-    $[27] = sxProp;
-    $[28] = theme === null || theme === void 0 ? void 0 : theme.colors;
-    $[29] = t4;
+    $[15] = ariaLabel;
+    $[16] = ariaLabelledby;
+    $[17] = children;
+    $[18] = className;
+    $[19] = isFullWidth;
+    $[20] = isUncontrolled;
+    $[21] = onChange;
+    $[22] = responsiveVariant;
+    $[23] = rest;
+    $[24] = selectedIndex;
+    $[25] = size;
+    $[26] = theme === null || theme === void 0 ? void 0 : theme.colors;
+    $[27] = t4;
   } else {
-    t4 = $[29];
+    t4 = $[27];
   }
   return t4;
 };

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/{lib-esm → dist}/SegmentedControl/SegmentedControlButton.d.ts

@@ -1,7 +1,6 @@
 import type { ButtonHTMLAttributes } from 'react';
 import type React from 'react';
 import type { IconProps } from '@primer/octicons-react';
-import type { SxProp } from '../sx';
 export type SegmentedControlButtonProps = {
     /** The visible label rendered in the button */
     children: string;
@@ -11,7 +10,9 @@ export type SegmentedControlButtonProps = {
     defaultSelected?: boolean;
     /** The leading icon comes before item label */
     leadingIcon?: React.FunctionComponent<React.PropsWithChildren<IconProps>> | React.ReactElement;
-} & SxProp & ButtonHTMLAttributes<HTMLButtonElement | HTMLLIElement>;
+    /** Optional counter to display on the right side of the button */
+    count?: number | string;
+} & ButtonHTMLAttributes<HTMLButtonElement | HTMLLIElement>;
 declare const SegmentedControlButton: React.FC<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;AAOrD,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,+CAA+C;IAC/C,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,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,2BAA2B,CAAC,CA6B1F,CAAA;AAED,eAAe,sBAAsB,CAAA"}

package/{lib-esm → dist}/SegmentedControl/SegmentedControlButton.js

@@ -2,47 +2,47 @@ import { c } from 'react-compiler-runtime';
 import { isElement } from 'react-is';
 import classes from './SegmentedControl.module.css.js';
 import { clsx } from 'clsx';
-import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import CounterLabel from '../CounterLabel/CounterLabel.js';
 
 const SegmentedControlButton = t0 => {
-  const $ = c(28);
+  const $ = c(30);
   let LeadingIcon;
   let children;
   let className;
+  let count;
   let rest;
   let selected;
-  let sxProp;
   if ($[0] !== t0) {
     const {
       children: t1,
       leadingIcon: t2,
       selected: t3,
-      sx: t4,
-      className: t5,
+      className: t4,
       defaultSelected: _defaultSelected,
+      count: t5,
       ...t6
     } = t0;
     children = t1;
     LeadingIcon = t2;
     selected = t3;
-    sxProp = t4;
-    className = t5;
+    className = t4;
+    count = t5;
     rest = t6;
     $[0] = t0;
     $[1] = LeadingIcon;
     $[2] = children;
     $[3] = className;
-    $[4] = rest;
-    $[5] = selected;
-    $[6] = sxProp;
+    $[4] = count;
+    $[5] = rest;
+    $[6] = selected;
   } else {
     LeadingIcon = $[1];
     children = $[2];
     className = $[3];
-    rest = $[4];
-    selected = $[5];
-    sxProp = $[6];
+    count = $[4];
+    rest = $[5];
+    selected = $[6];
   }
   let t1;
   if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
@@ -98,52 +98,62 @@ const SegmentedControlButton = t0 => {
     t7 = $[15];
   }
   let t8;
-  if ($[16] !== t5 || $[17] !== t7) {
-    t8 = /*#__PURE__*/jsxs("span", {
-      className: t4,
-      children: [t5, t7]
+  if ($[16] !== count) {
+    t8 = count !== undefined && /*#__PURE__*/jsx("span", {
+      className: classes.Counter,
+      children: /*#__PURE__*/jsx(CounterLabel, {
+        children: count
+      })
     });
-    $[16] = t5;
-    $[17] = t7;
-    $[18] = t8;
+    $[16] = count;
+    $[17] = t8;
   } else {
-    t8 = $[18];
+    t8 = $[17];
   }
   let t9;
-  if ($[19] !== rest || $[20] !== selected || $[21] !== t3 || $[22] !== t8) {
-    t9 = /*#__PURE__*/jsx(BoxWithFallback, {
-      as: "button",
+  if ($[18] !== t5 || $[19] !== t7 || $[20] !== t8) {
+    t9 = /*#__PURE__*/jsxs("span", {
+      className: t4,
+      children: [t5, t7, t8]
+    });
+    $[18] = t5;
+    $[19] = t7;
+    $[20] = t8;
+    $[21] = t9;
+  } else {
+    t9 = $[21];
+  }
+  let t10;
+  if ($[22] !== rest || $[23] !== selected || $[24] !== t3 || $[25] !== t9) {
+    t10 = /*#__PURE__*/jsx("button", {
       "aria-current": selected,
       className: t3,
       type: "button",
       ...rest,
-      children: t8
+      children: t9
     });
-    $[19] = rest;
-    $[20] = selected;
-    $[21] = t3;
-    $[22] = t8;
-    $[23] = t9;
+    $[22] = rest;
+    $[23] = selected;
+    $[24] = t3;
+    $[25] = t9;
+    $[26] = t10;
   } else {
-    t9 = $[23];
+    t10 = $[26];
   }
-  let t10;
-  if ($[24] !== sxProp || $[25] !== t2 || $[26] !== t9) {
-    t10 = /*#__PURE__*/jsx(BoxWithFallback, {
-      as: "li",
-      sx: sxProp,
+  let t11;
+  if ($[27] !== t10 || $[28] !== t2) {
+    t11 = /*#__PURE__*/jsx("li", {
       className: t1,
       "data-selected": t2,
-      children: t9
+      children: t10
     });
-    $[24] = sxProp;
-    $[25] = t2;
-    $[26] = t9;
     $[27] = t10;
+    $[28] = t2;
+    $[29] = t11;
   } else {
-    t10 = $[27];
+    t11 = $[29];
   }
-  return t10;
+  return t11;
 };
 
 export { SegmentedControlButton as default };