refactor(styled-react): update how we re-export components

.changeset/chubby-colts-nail.md

@@ -0,0 +1,5 @@
+---
+'@primer/styled-react': patch
+---
+
+Refactor ToggleSwitch export type to match original type from @primer/react

.changeset/great-hats-serve.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add ProgressBarItemProps and ProgressBarItemProps type exports to @primer/react

.changeset/metal-cups-peel.md

@@ -0,0 +1,5 @@
+---
+'@primer/styled-react': patch
+---
+
+Remove several components that have no sx usage

.changeset/nine-cobras-talk.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add ToggleSwitchProps type to package exports

eslint.config.mjs

@@ -42,6 +42,7 @@ const config = defineConfig([
     'contributor-docs/adrs/*',
     'examples/codesandbox/**/*',
     'packages/react/src/utils/polymorphic.ts',
+    'packages/styled-react/src/polymorphic.d.ts',
     '**/storybook-static',
     '**/CHANGELOG.md',
     '**/node_modules/**/*',
@@ -376,6 +377,22 @@ const config = defineConfig([
       '@typescript-eslint/triple-slash-reference': 'off',
     },
   },
+
+  // packages/styled-react overrides
+  {
+    files: ['packages/styled-react/**/*.{ts,tsx}'],
+    rules: {
+      'primer-react/no-unnecessary-components': 'off',
+    },
+  },
+  {
+    files: ['packages/styled-react/**/*.test.{ts,tsx}'],
+    rules: {
+      'github/a11y-aria-label-is-well-formatted': 'off',
+      'github/a11y-svg-has-accessible-name': 'off',
+      'primer-react/direct-slot-children': 'off',
+    },
+  },
 ])
 
 export default tseslint.config(config)

packages/react/src/ProgressBar/ProgressBar.tsx

@@ -16,13 +16,13 @@ type StyledProgressContainerProps = {
   animated?: boolean
 } & SxProp
 
-export type ProgressBarItems = React.HTMLAttributes<HTMLSpanElement> & {
+export type ProgressBarItemProps = React.HTMLAttributes<HTMLSpanElement> & {
   'aria-label'?: string
   className?: string
 } & ProgressProp &
   SxProp
 
-export const Item = forwardRef<HTMLSpanElement, ProgressBarItems>(
+export const Item = forwardRef<HTMLSpanElement, ProgressBarItemProps>(
   (
     {
       progress,

packages/react/src/ProgressBar/index.ts

@@ -1,6 +1,6 @@
 import {ProgressBar as Bar, Item} from './ProgressBar'
 
-export type {ProgressBarProps} from './ProgressBar'
+export type {ProgressBarProps, ProgressBarItemProps} from './ProgressBar'
 
 /**
  * Collection of ProgressBar related components.

packages/react/src/ToggleSwitch/ToggleSwitch.tsx

@@ -72,135 +72,133 @@ const LineIcon: React.FC<React.PropsWithChildren<InnerIconProps>> = ({size}) =>
   </svg>
 )
 
-const ToggleSwitch = React.forwardRef<HTMLButtonElement, React.PropsWithChildren<ToggleSwitchProps>>(
-  function ToggleSwitch(props, ref) {
-    const {
-      'aria-labelledby': ariaLabelledby,
-      'aria-describedby': ariaDescribedby,
-      defaultChecked,
-      disabled,
-      loading,
-      checked,
-      onChange,
-      onClick,
-      buttonType = 'button',
-      size = 'medium',
-      statusLabelPosition = 'start',
-      loadingLabelDelay = 2000,
-      loadingLabel = 'Loading',
-      className,
-      ...rest
-    } = props
-    const isControlled = typeof checked !== 'undefined'
-    const [isOn, setIsOn] = useProvidedStateOrCreate<boolean>(checked, onChange, Boolean(defaultChecked))
-    const acceptsInteraction = !disabled && !loading
-
-    const [isLoadingLabelVisible, setIsLoadingLabelVisible] = React.useState(false)
-    const loadingLabelId = useId('loadingLabel')
-
-    const {safeSetTimeout} = useSafeTimeout()
-
-    const handleToggleClick: MouseEventHandler = useCallback(
-      e => {
-        if (disabled || loading) return
-
-        if (!isControlled) {
-          setIsOn(!isOn)
-        }
-        onClick && onClick(e)
-      },
-      [disabled, isControlled, loading, onClick, setIsOn, isOn],
-    )
-
-    useEffect(() => {
-      if (onChange && isControlled && !disabled) {
-        onChange(Boolean(checked))
+const ToggleSwitch = React.forwardRef<HTMLButtonElement, ToggleSwitchProps>(function ToggleSwitch(props, ref) {
+  const {
+    'aria-labelledby': ariaLabelledby,
+    'aria-describedby': ariaDescribedby,
+    defaultChecked,
+    disabled,
+    loading,
+    checked,
+    onChange,
+    onClick,
+    buttonType = 'button',
+    size = 'medium',
+    statusLabelPosition = 'start',
+    loadingLabelDelay = 2000,
+    loadingLabel = 'Loading',
+    className,
+    ...rest
+  } = props
+  const isControlled = typeof checked !== 'undefined'
+  const [isOn, setIsOn] = useProvidedStateOrCreate<boolean>(checked, onChange, Boolean(defaultChecked))
+  const acceptsInteraction = !disabled && !loading
+
+  const [isLoadingLabelVisible, setIsLoadingLabelVisible] = React.useState(false)
+  const loadingLabelId = useId('loadingLabel')
+
+  const {safeSetTimeout} = useSafeTimeout()
+
+  const handleToggleClick: MouseEventHandler = useCallback(
+    e => {
+      if (disabled || loading) return
+
+      if (!isControlled) {
+        setIsOn(!isOn)
       }
-    }, [onChange, checked, isControlled, disabled])
-
-    useEffect(() => {
-      if (!loading && isLoadingLabelVisible) {
-        setIsLoadingLabelVisible(false)
-      } else if (loading && !isLoadingLabelVisible) {
-        safeSetTimeout(() => {
-          setIsLoadingLabelVisible(true)
-        }, loadingLabelDelay)
-      }
-    }, [loading, isLoadingLabelVisible, loadingLabelDelay, safeSetTimeout])
-
-    let switchButtonDescribedBy = loadingLabelId
-    if (ariaDescribedby) switchButtonDescribedBy = `${switchButtonDescribedBy} ${ariaDescribedby}`
-
-    return (
-      <div className={clsx(classes.ToggleSwitch, className)} data-status-label-position={statusLabelPosition} {...rest}>
-        <VisuallyHidden>
-          <AriaStatus announceOnShow id={loadingLabelId}>
-            {isLoadingLabelVisible && loadingLabel}
-          </AriaStatus>
-        </VisuallyHidden>
-
-        {loading ? (
-          <div className={classes.LoadingSpinner} data-status-label-position={statusLabelPosition}>
-            <Spinner size="small" srText={null} />
-          </div>
-        ) : null}
-
-        <span
-          className={classes.StatusText}
-          data-size={size}
-          data-disabled={!acceptsInteraction}
-          aria-hidden="true"
-          onClick={handleToggleClick}
-        >
-          <span className={classes.StatusTextItem} data-hidden={!isOn}>
-            On
-          </span>
-          <span className={classes.StatusTextItem} data-hidden={isOn}>
-            Off
-          </span>
+      onClick && onClick(e)
+    },
+    [disabled, isControlled, loading, onClick, setIsOn, isOn],
+  )
+
+  useEffect(() => {
+    if (onChange && isControlled && !disabled) {
+      onChange(Boolean(checked))
+    }
+  }, [onChange, checked, isControlled, disabled])
+
+  useEffect(() => {
+    if (!loading && isLoadingLabelVisible) {
+      setIsLoadingLabelVisible(false)
+    } else if (loading && !isLoadingLabelVisible) {
+      safeSetTimeout(() => {
+        setIsLoadingLabelVisible(true)
+      }, loadingLabelDelay)
+    }
+  }, [loading, isLoadingLabelVisible, loadingLabelDelay, safeSetTimeout])
+
+  let switchButtonDescribedBy = loadingLabelId
+  if (ariaDescribedby) switchButtonDescribedBy = `${switchButtonDescribedBy} ${ariaDescribedby}`
+
+  return (
+    <div className={clsx(classes.ToggleSwitch, className)} data-status-label-position={statusLabelPosition} {...rest}>
+      <VisuallyHidden>
+        <AriaStatus announceOnShow id={loadingLabelId}>
+          {isLoadingLabelVisible && loadingLabel}
+        </AriaStatus>
+      </VisuallyHidden>
+
+      {loading ? (
+        <div className={classes.LoadingSpinner} data-status-label-position={statusLabelPosition}>
+          <Spinner size="small" srText={null} />
+        </div>
+      ) : null}
+
+      <span
+        className={classes.StatusText}
+        data-size={size}
+        data-disabled={!acceptsInteraction}
+        aria-hidden="true"
+        onClick={handleToggleClick}
+      >
+        <span className={classes.StatusTextItem} data-hidden={!isOn}>
+          On
         </span>
-
-        <button
-          ref={ref}
-          // eslint-disable-next-line react/button-has-type
-          type={buttonType}
-          className={classes.SwitchButton}
-          data-size={size}
-          data-checked={isOn}
-          data-disabled={!acceptsInteraction}
-          onClick={handleToggleClick}
-          aria-labelledby={ariaLabelledby}
-          aria-describedby={isLoadingLabelVisible || ariaDescribedby ? switchButtonDescribedBy : undefined}
-          aria-pressed={isOn}
-          aria-disabled={!acceptsInteraction}
-        >
-          <div className={classes.SwitchButtonContent} aria-hidden="true">
-            <div
-              className={`${classes.IconContainer} ${classes.LineIconContainer}`}
-              data-checked={isOn}
-              data-disabled={!acceptsInteraction}
-            >
-              <LineIcon size={size} />
-            </div>
-            <div
-              className={`${classes.IconContainer} ${classes.CircleIconContainer}`}
-              data-checked={isOn}
-              data-disabled={!acceptsInteraction}
-            >
-              <CircleIcon size={size} />
-            </div>
+        <span className={classes.StatusTextItem} data-hidden={isOn}>
+          Off
+        </span>
+      </span>
+
+      <button
+        ref={ref}
+        // eslint-disable-next-line react/button-has-type
+        type={buttonType}
+        className={classes.SwitchButton}
+        data-size={size}
+        data-checked={isOn}
+        data-disabled={!acceptsInteraction}
+        onClick={handleToggleClick}
+        aria-labelledby={ariaLabelledby}
+        aria-describedby={isLoadingLabelVisible || ariaDescribedby ? switchButtonDescribedBy : undefined}
+        aria-pressed={isOn}
+        aria-disabled={!acceptsInteraction}
+      >
+        <div className={classes.SwitchButtonContent} aria-hidden="true">
+          <div
+            className={`${classes.IconContainer} ${classes.LineIconContainer}`}
+            data-checked={isOn}
+            data-disabled={!acceptsInteraction}
+          >
+            <LineIcon size={size} />
           </div>
           <div
-            className={classes.ToggleKnob}
+            className={`${classes.IconContainer} ${classes.CircleIconContainer}`}
             data-checked={isOn}
             data-disabled={!acceptsInteraction}
-            aria-hidden="true"
-          />
-        </button>
-      </div>
-    )
-  },
-)
+          >
+            <CircleIcon size={size} />
+          </div>
+        </div>
+        <div
+          className={classes.ToggleKnob}
+          data-checked={isOn}
+          data-disabled={!acceptsInteraction}
+          aria-hidden="true"
+        />
+      </button>
+    </div>
+  )
+})
 
 if (__DEV__) {
   ToggleSwitch.displayName = 'ToggleSwitch'

packages/react/src/__tests__/__snapshots__/exports.test.ts.snap

@@ -118,6 +118,7 @@ exports[`@primer/react > should not update exports without a semver change 1`] =
   "Portal",
   "type PortalProps",
   "ProgressBar",
+  "type ProgressBarItemProps",
   "type ProgressBarProps",
   "Radio",
   "RadioGroup",
@@ -177,6 +178,7 @@ exports[`@primer/react > should not update exports without a semver change 1`] =
   "type TimelineItemsProps",
   "type TimelineProps",
   "ToggleSwitch",
+  "type ToggleSwitchProps",
   "Token",
   "type TokenProps",
   "Tooltip",

packages/react/src/index.ts

@@ -127,7 +127,7 @@ export type {PopoverProps, PopoverContentProps} from './Popover'
 export {default as Portal, registerPortalRoot} from './Portal'
 export type {PortalProps} from './Portal'
 export {ProgressBar} from './ProgressBar'
-export type {ProgressBarProps} from './ProgressBar'
+export type {ProgressBarProps, ProgressBarItemProps} from './ProgressBar'
 export {default as RadioGroup} from './RadioGroup'
 export type {RelativeTimeProps} from './RelativeTime'
 export {default as RelativeTime} from './RelativeTime'
@@ -151,6 +151,7 @@ export type {StateLabelProps} from './StateLabel'
 export {default as SubNav} from './SubNav'
 export type {SubNavProps, SubNavLinkProps, SubNavLinksProps} from './SubNav'
 export {default as ToggleSwitch} from './ToggleSwitch'
+export type {ToggleSwitchProps} from './ToggleSwitch'
 export {default as TextInput} from './TextInput'
 export type {TextInputProps} from './TextInput'
 export {default as TextInputWithTokens} from './TextInputWithTokens'