@workday/canvas-kit-react 15.0.0-alpha.1326-next.0 → 15.0.1

package/popup/lib/hooks/usePopupModel.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import {createModelHook} from '@workday/canvas-kit-react/common';
 
+import {createModelHook} from '@workday/canvas-kit-react/common';
 import {useDisclosureModel} from '@workday/canvas-kit-react/disclosure';
+
 import {Placement} from '../Popper';
 
 // eslint-disable-next-line no-empty-function

package/popup/lib/hooks/usePopupPopper.ts

@@ -1,7 +1,9 @@
-import {createElemPropsHook, useForkRef} from '@workday/canvas-kit-react/common';
-import {usePopupModel} from './usePopupModel';
 import React from 'react';
+
+import {createElemPropsHook, useForkRef} from '@workday/canvas-kit-react/common';
+
 import {Placement} from '../Popper';
+import {usePopupModel} from './usePopupModel';
 
 /**
  * Adds the necessary props to a {@link Popper} component. Used by the

package/popup/lib/hooks/usePopupStack.ts

@@ -1,7 +1,8 @@
+import {Theme, ThemeContext} from '@emotion/react';
 import React from 'react';
 
 import {PopupStack} from '@workday/canvas-kit-popup-stack';
-import {useLocalRef, isElementRTL} from '@workday/canvas-kit-react/common';
+import {isElementRTL, useCanvasThemeToCssVars, useLocalRef} from '@workday/canvas-kit-react/common';
 
 /**
  * **Note:** If you're using {@link Popper}, you do not need to use this hook directly.
@@ -51,6 +52,8 @@ export const usePopupStack = <E extends HTMLElement>(
 ): React.RefObject<HTMLElement> => {
   const {elementRef, localRef} = useLocalRef(ref);
 
+  const theme = React.useContext(ThemeContext as React.Context<Theme>);
+  const {style} = useCanvasThemeToCssVars(theme, {});
   const firstLoadRef = React.useRef(true); // React 19 can call a useState more than once, so we need to track if we've already created a container
 
   // useState function input ensures we only create a container once.
@@ -63,6 +66,28 @@ export const usePopupStack = <E extends HTMLElement>(
     }
     return localRef.current;
   });
+
+  // Forward only theme overrides (style) to the popup container when a theme was provided via
+  // CanvasProvider theme prop. We do NOT apply defaultBranding (className) so we don't create a
+  // cascade barrier—only the CSS variables the consumer overrode are set. This effect runs
+  // before PopupStack.add below so the container has the theme before it's shown (avoids blue→magenta flash).
+  React.useLayoutEffect(() => {
+    const element = localRef.current;
+    if (!element) {
+      return undefined;
+    }
+    const styleKeys = Object.keys(style);
+    if (styleKeys.length === 0) {
+      return undefined;
+    }
+    for (const key of styleKeys) {
+      // @ts-ignore - token keys are CSS custom property names
+      element.style.setProperty(key, style[key]);
+    }
+    // No cleanup: leave theme on container so reopening doesn't flash
+    return undefined;
+  }, [localRef, style]);
+
   // We useLayoutEffect to ensure proper timing of registration of the element to the popup stack.
   // Without this, the timing is unpredictable when mixed with other frameworks. Other frameworks
   // should also register as soon as the element is available
@@ -86,11 +111,23 @@ export const usePopupStack = <E extends HTMLElement>(
   }, [localRef, target, popupRef]);
 
   // The direction will properly follow the theme via React context, but portals lose the `dir`
-  // hierarchy, so we'll add it back here.
+  // hierarchy, so we'll add it back here. When there's no target (e.g. consumer doesn't use
+  // Popup.Target), find the nearest element with a `dir` attribute: start from the focused element
+  // (the trigger) or body, then use closest('[dir]'). Prefer reading getAttribute('dir') when
+  // present to avoid getComputedStyle.
   React.useLayoutEffect(() => {
     const targetEl = target ? ('current' in target ? target.current : target) : undefined;
-    if (targetEl) {
-      const isRTL = isElementRTL(targetEl);
+    let elementToCheck: Element | undefined = targetEl ?? undefined;
+    if (elementToCheck == null && typeof document !== 'undefined') {
+      const active = document.activeElement;
+      const container = localRef.current;
+      const start = active && container && !container.contains(active) ? active : document.body;
+      elementToCheck = start.closest('[dir]') ?? document.documentElement;
+    }
+    if (elementToCheck) {
+      const explicitDir = elementToCheck.getAttribute('dir');
+      const isRTL =
+        explicitDir != null ? explicitDir.toLowerCase() === 'rtl' : isElementRTL(elementToCheck);
       if (isRTL) {
         localRef.current?.setAttribute('dir', 'rtl');
       } else {

package/popup/lib/hooks/usePopupTarget.ts

@@ -1,4 +1,5 @@
 import {createElemPropsHook, useForkRef} from '@workday/canvas-kit-react/common';
+
 import {usePopupModel} from './usePopupModel';
 
 /**

package/popup/lib/hooks/usePopupTargetContext.ts

@@ -1,4 +1,5 @@
 import {createElemPropsHook, useForkRef} from '@workday/canvas-kit-react/common';
+
 import {usePopupModel} from './usePopupModel';
 
 /**

package/popup/lib/hooks/useReturnFocus.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
+import {PopupStack} from '@workday/canvas-kit-popup-stack';
 import {changeFocus, createElemPropsHook, isMouseFocusable} from '@workday/canvas-kit-react/common';
 
 import {usePopupModel} from './usePopupModel';
-import {PopupStack} from '@workday/canvas-kit-popup-stack';
 
 function getScrollParent(element: HTMLElement): HTMLElement {
   if (element === document.body || !element.parentElement) {

package/radio/lib/Radio.tsx

@@ -1,16 +1,17 @@
 import * as React from 'react';
+
 import {
-  createComponent,
   StyledType,
+  Themeable,
+  createComponent,
   focusRing,
   mouseFocusBehavior,
   styled,
-  Themeable,
   useUniqueId,
 } from '@workday/canvas-kit-react/common';
-import {borderRadius, colors, inputColors, space} from '@workday/canvas-kit-react/tokens';
 import {LabelText} from '@workday/canvas-kit-react/text';
-import {px2rem} from '@workday/canvas-kit-styling';
+import {borderRadius, colors, inputColors, space} from '@workday/canvas-kit-react/tokens';
+import {maybeWrapCSSVariables, px2rem} from '@workday/canvas-kit-styling';
 
 /**
  * @deprecated ⚠️ `RadioProps` in Main has been deprecated and will be removed in a future major version. Please use [`Radio` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-radio--docs) instead.
@@ -137,19 +138,19 @@ const RadioInput = styled('input')<RadioProps & StyledType>(
       backgroundColor: checked
         ? variant === 'inverse'
           ? colors.frenchVanilla100
-          : themePrimary.main
+          : maybeWrapCSSVariables(themePrimary.main)
         : disabled
-        ? inputColors.disabled.background
-        : 'white',
+          ? inputColors.disabled.background
+          : 'white',
       borderColor: checked
         ? variant === 'inverse'
           ? colors.soap300
-          : themePrimary.main
+          : maybeWrapCSSVariables(themePrimary.main)
         : disabled
-        ? inputColors.disabled.border
-        : variant === 'inverse'
-        ? colors.soap300
-        : inputColors.hoverBorder,
+          ? inputColors.disabled.border
+          : variant === 'inverse'
+            ? colors.soap300
+            : inputColors.hoverBorder,
       borderWidth: '1px',
     },
     '&:focus, &focus:hover': {
@@ -174,7 +175,8 @@ const RadioInput = styled('input')<RadioProps & StyledType>(
         innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
         outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
       }),
-      borderColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main,
+      borderColor:
+        variant === 'inverse' ? colors.frenchVanilla100 : maybeWrapCSSVariables(themePrimary.main),
       borderWidth: '2px',
     },
     ...mouseFocusBehavior({
@@ -187,17 +189,17 @@ const RadioInput = styled('input')<RadioProps & StyledType>(
         borderColor: checked
           ? variant === 'inverse'
             ? colors.soap300
-            : themePrimary.main
+            : maybeWrapCSSVariables(themePrimary.main)
           : inputColors.border,
       },
       '&:focus:hover ~ div:first-of-type, &:focus:active ~ div:first-of-type': {
         borderColor: checked
           ? variant === 'inverse'
             ? colors.soap300
-            : themePrimary.main
+            : maybeWrapCSSVariables(themePrimary.main)
           : variant === 'inverse'
-          ? colors.soap300
-          : inputColors.hoverBorder,
+            ? colors.soap300
+            : inputColors.hoverBorder,
       },
     }),
   })
@@ -233,19 +235,19 @@ const RadioBackground = styled('div')<RadioProps>(
     borderColor: checked
       ? variant === 'inverse'
         ? colors.soap300
-        : themePrimary.main
+        : maybeWrapCSSVariables(themePrimary.main)
       : disabled
-      ? colors.licorice100
-      : variant === 'inverse'
-      ? colors.soap300
-      : inputColors.border,
+        ? colors.licorice100
+        : variant === 'inverse'
+          ? colors.soap300
+          : inputColors.border,
     backgroundColor: checked
       ? variant === 'inverse'
         ? colors.frenchVanilla100
-        : themePrimary.main
+        : maybeWrapCSSVariables(themePrimary.main)
       : disabled
-      ? inputColors.disabled.background
-      : 'white',
+        ? inputColors.disabled.background
+        : 'white',
     opacity: disabled && variant === 'inverse' ? '.4' : '1',
   })
 );
@@ -263,8 +265,8 @@ const RadioCheck = styled('div')<Pick<RadioProps, 'checked' | 'variant'>>(
   ({theme, variant}) => ({
     backgroundColor:
       variant === 'inverse'
-        ? theme.canvas.palette.primary.main
-        : theme.canvas.palette.primary.contrast,
+        ? maybeWrapCSSVariables(theme.canvas.palette.primary.main)
+        : maybeWrapCSSVariables(theme.canvas.palette.primary.contrast),
   }),
   ({checked}) => ({
     opacity: checked ? 1 : 0,

package/radio/lib/RadioGroup.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react';
-import {Radio, RadioProps} from './Radio';
-import {borderRadius, space} from '@workday/canvas-kit-react/tokens';
+
 import {
   ErrorType,
   GrowthBehavior,
+  Themeable,
   getErrorColors,
   styled,
-  Themeable,
 } from '@workday/canvas-kit-react/common';
+import {borderRadius, space} from '@workday/canvas-kit-react/tokens';
+
+import {Radio, RadioProps} from './Radio';
 
 /**
  * @deprecated ⚠️ `RadioGroupProps` in Main has been deprecated and will be removed in a future major version. Please use [`Radio` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-radio--docs) instead.

package/segmented-control/index.ts

@@ -1 +1,4 @@
 export * from './lib/SegmentedControl';
+export * from './lib/hooks/useSegmentedControlModel';
+export * from './lib/hooks/useSegmentedControlItem';
+export * from './lib/SegmentedControlList';

package/segmented-control/lib/SegmentedControl.tsx

@@ -1,86 +1,58 @@
-import * as React from 'react';
+import React from 'react';
 
-import {createComponent} from '@workday/canvas-kit-react/common';
-import {SegmentedControlButton, SegmentedControlButtonProps} from './SegmentedControlButton';
+import {createContainer} from '@workday/canvas-kit-react/common';
 
-/**
- * @deprecated ⚠️ `SegmentedControlProps` in Main has been deprecated and will be removed in a future major version. Please use [`SegmentedControl` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-segmented-control--docs) instead.
- */
-export interface SegmentedControlProps {
-  /**
-   * The Button children of the SegmentedControl (must be at least two).
-   * TODO: Add support for text children
-   */
-  children: React.ReactElement<SegmentedControlButtonProps>[];
+import {SegmentedControlItem} from './SegmentedControlItem';
+import {SegmentedControlList} from './SegmentedControlList';
+import {useSegmentedControlModel} from './hooks/useSegmentedControlModel';
 
-  /**
-   * The value or index of the Button that the SegmentedControl should be toggled on to.
-   * If a string is provided, the Button with the corresponding value will be selected.
-   * If a number is provided, the Button with the corresponding index will be selected.
-   * @default 0
-   */
-  value?: string | number;
-
-  /**
-   * The function called when a button in the SegmentedControl is toggled.
-   * If the selected button has a value, that value will be passed to the callback function;
-   * otherwise, the index of the button will be passed.
-   */
-  onChange?: (value: string | number) => void;
+export interface SegmentedControlProps {
+  children: React.ReactNode;
 }
 
-const onButtonClick = (
-  existingOnClick: ((e: React.MouseEvent<HTMLButtonElement>) => void) | undefined,
-  onChange: ((value: string | number) => void) | undefined,
-  index: number,
-  event: React.MouseEvent<HTMLButtonElement>
-): void => {
-  if (existingOnClick) {
-    existingOnClick(event);
-  }
-
-  const target = event.currentTarget;
-  if (target && onChange) {
-    if (target.value) {
-      onChange(target.value);
-    } else {
-      onChange(index);
-    }
-  }
-};
-
 /**
- * @deprecated ⚠️ `SegmentedControl` in Main has been deprecated and will be removed in a future major version. Please use [`SegmentedControl` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-segmented-control--docs) instead.
+ * `SegmentedControl` is a container component that is responsible for creating a
+ * {@link SegmentedControlModel} and sharing it with its subcomponents using React context. It does
+ * not represent a real element.
+ *
+ * ```tsx
+ * <SegmentedControl items={[]}>{Child components}</SegmentedControl>
+ * ```
+ *
+ * Alternatively, you may pass in a model using the [hoisted model
+ * pattern](/getting-started/for-developers/resources/compound-components/#configuring-a-model).
+ *
+ * ```tsx
+ * const model = useSegmentedControlModel({
+ *   items: [],
+ * });
+ *
+ * <SegmentedControl model={model}>{Child components}</SegmentedControl>
+ * ```
  */
-export const SegmentedControl = createComponent('div')({
+export const SegmentedControl = createContainer()({
   displayName: 'SegmentedControl',
-  Component: ({value = 0, children, onChange, ...elemProps}: SegmentedControlProps, ref) => {
-    return (
-      <div {...elemProps}>
-        {React.Children.map(
-          children,
-          (
-            child: React.ReactElement<
-              SegmentedControlButtonProps & {
-                onClick?: React.MouseEventHandler<HTMLButtonElement>;
-              } & React.HTMLAttributes<HTMLButtonElement> // segmented control button will have correct props
-            >,
-            index: number
-          ) => {
-            if (typeof child.type === typeof SegmentedControlButton) {
-              return React.cloneElement(child, {
-                toggled: typeof value === 'number' ? index === value : child.props.value === value,
-                onClick: onButtonClick.bind(undefined, child.props.onClick, onChange, index),
-              });
-            }
-
-            return child;
-          }
-        )}
-      </div>
-    );
-  },
+  modelHook: useSegmentedControlModel,
   subComponents: {
-    Button: SegmentedControlButton,
+    /**
+     * `SegmentedControl.List` renders {@link Grid} under the hood. It is a container for
+     * {@link SegmentedControlItem SegmentedControl.Item} subcomponents.
+     *
+     * ```tsx
+     * <SegmentedControl.List>{SegmentedControl.Items}</SegmentedControl.List>
+     * ```
+     */
+    List: SegmentedControlList,
+    /**
+     * `SegmentedControl.Item` is a `button` element built on `BaseButton`. `SegmentedControl.Item`
+     * has a `data-id` prop to handle `onSelect` properly.
+     *
+     * ```tsx
+     * <SegmentedControl.Item data-id="table">Table</SegmentedControl.Item>
+     * ```
+     */
+    Item: SegmentedControlItem,
   },
+})<SegmentedControlProps>(({children}) => {
+  return <>{children}</>;
 });

package/segmented-control/lib/SegmentedControlItem.tsx

@@ -0,0 +1,248 @@
+import * as React from 'react';
+
+import {BaseButton, ButtonContainerProps, buttonStencil} from '@workday/canvas-kit-react/button';
+import {createSubcomponent} from '@workday/canvas-kit-react/common';
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {Text} from '@workday/canvas-kit-react/text';
+import {Tooltip, TooltipProps} from '@workday/canvas-kit-react/tooltip';
+import {colorSpace, createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+import {CanvasSystemIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
+
+import {useSegmentedControlItem} from './hooks/useSegmentedControlItem';
+import {useSegmentedControlModel} from './hooks/useSegmentedControlModel';
+
+export interface ItemProps extends ButtonContainerProps {
+  /**
+   * Optionally pass index to the item. This should be done if `SegmentedControl.Item` components were created
+   * via a `[Array::map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)` function. This index will ensure keyboard navigation works even if items are
+   * inserted out of order.
+   */
+  index?: number;
+  /**
+   * The contents of the item. This is text used as the accessible name of the button for screen readers.
+   */
+  children?: React.ReactNode;
+  /**
+   * The identifier of the item. This identifier will be used in change events and for `initialTab`.
+   * If this property is not provided, it will default to a string representation
+   * of the the zero-based index of the item when it was initialized.
+   */
+  'data-id'?: string;
+  /**
+   * Optional id. If not set, it will inherit the ID passed to the `SegmentedControl` component and append the
+   * index at the end. Only set this for advanced cases.
+   */
+  id?: string;
+  /**
+   * Part of the ARIA specification for buttons. Lets screen readers know which button is active. This
+   * should either be `true` or `false`. This is automatically set by the
+   * component and should only be used in advanced cases.
+   */
+  'aria-pressed'?: boolean;
+  /**
+   * The icon of the button.
+   */
+  icon?: CanvasSystemIcon;
+  /**
+   * Tooltip Props
+   */
+  tooltipProps?: Omit<TooltipProps, 'children'>;
+}
+
+export const segmentedControlItemStencil = createStencil({
+  extends: buttonStencil,
+  base: {
+    fontFamily: system.fontFamily.default,
+    fontSize: system.legacy.fontSize.subtext.lg,
+    lineHeight: system.legacy.lineHeight.subtext.lg,
+    letterSpacing: system.legacy.letterSpacing.subtext.lg,
+    fontWeight: system.fontWeight.bold,
+    textAlign: 'start',
+    paddingInline: 0,
+    gap: system.legacy.gap.xs,
+
+    [buttonStencil.vars.borderRadius]: system.legacy.shape.md,
+    [buttonStencil.vars.label]: system.color.fg.muted.default,
+    [systemIconStencil.vars.color]: system.color.fg.muted.default,
+
+    '&:hover, &.hover': {
+      [buttonStencil.vars.background]: colorSpace.darken({
+        color: system.legacy.color.surface.alt.strong,
+        fallback: system.color.bg.alt.strong,
+        mixinColor: system.legacy.color.surface.overlay.mixin,
+        mixinValue: system.legacy.opacity.surface.hover,
+      }),
+      [buttonStencil.vars.label]: system.color.fg.strong,
+      [systemIconStencil.vars.color]: system.color.fg.strong,
+    },
+
+    '&:active, &.active': {
+      [buttonStencil.vars.background]: colorSpace.darken({
+        color: system.legacy.color.surface.alt.strong,
+        fallback: system.color.bg.alt.strong,
+        mixinColor: system.legacy.color.surface.overlay.mixin,
+        mixinValue: system.legacy.opacity.surface.pressed,
+      }),
+      [buttonStencil.vars.label]: system.color.fg.strong,
+      [systemIconStencil.vars.color]: system.color.fg.strong,
+    },
+
+    '&:focus-visible, &.focus': {
+      [buttonStencil.vars.label]: system.color.fg.muted.strong,
+      [systemIconStencil.vars.color]: system.color.fg.muted.strong,
+    },
+
+    '&:disabled, &.disabled': {
+      [buttonStencil.vars.opacity]: system.opacity.disabled,
+      [buttonStencil.vars.background]: system.legacy.color.surface.transparent,
+      [buttonStencil.vars.label]: system.color.fg.muted.default,
+      [systemIconStencil.vars.color]: system.color.fg.muted.default,
+    },
+
+    "&[aria-pressed='true']": {
+      [buttonStencil.vars.background]: system.legacy.color.surface.default,
+      [buttonStencil.vars.border]: system.color.border.input.default,
+      [systemIconStencil.vars.color]: system.color.fg.strong,
+      [buttonStencil.vars.label]: system.color.fg.strong,
+
+      '&:hover, &.hover': {
+        [systemIconStencil.vars.color]: system.color.fg.strong,
+        [buttonStencil.vars.label]: system.color.fg.strong,
+      },
+
+      '&:disabled, &.disabled': {
+        [buttonStencil.vars.opacity]: system.opacity.disabled,
+      },
+    },
+    ':dir(rtl)': {
+      svg: {
+        transform: 'scaleX(-1)',
+      },
+    },
+  },
+  modifiers: {
+    size: {
+      large: {
+        height: system.legacy.size.md,
+        gap: system.legacy.gap.sm,
+      },
+      medium: {
+        height: system.legacy.size.sm,
+      },
+      small: {
+        fontFamily: system.fontFamily.default,
+        fontSize: system.legacy.fontSize.subtext.md,
+        lineHeight: system.legacy.lineHeight.subtext.md,
+        letterSpacing: system.legacy.letterSpacing.subtext.md,
+        fontWeight: system.fontWeight.bold,
+        height: system.legacy.size.xs,
+      },
+    },
+    variant: {
+      iconOnly: {},
+      textOnly: {},
+      iconWithText: {},
+    },
+  },
+  compound: [
+    {
+      modifiers: {size: 'large', variant: 'iconOnly'},
+      styles: {
+        minWidth: system.legacy.size.md,
+      },
+    },
+    {
+      modifiers: {size: 'large', variant: 'iconWithText'},
+      styles: {
+        paddingInline: `${system.legacy.padding.lg} ${system.legacy.padding.xl}`,
+      },
+    },
+    {
+      modifiers: {size: 'large', variant: 'textOnly'},
+      styles: {
+        paddingInline: system.legacy.padding.xl,
+      },
+    },
+    {
+      modifiers: {size: 'medium', variant: 'iconOnly'},
+      styles: {
+        minWidth: system.legacy.size.sm,
+      },
+    },
+    {
+      modifiers: {size: 'medium', variant: 'iconWithText'},
+      styles: {
+        paddingInline: `${system.legacy.padding.md} ${system.legacy.padding.lg}`,
+      },
+    },
+    {
+      modifiers: {size: 'medium', variant: 'textOnly'},
+      styles: {
+        paddingInline: system.legacy.padding.lg,
+      },
+    },
+    {
+      modifiers: {size: 'small', variant: 'iconOnly'},
+      styles: {
+        minWidth: system.legacy.size.xs,
+      },
+    },
+    {
+      modifiers: {size: 'small', variant: 'iconWithText'},
+      styles: {
+        paddingInline: `${system.legacy.padding.xs} ${system.legacy.padding.sm}`,
+      },
+    },
+    {
+      modifiers: {size: 'small', variant: 'textOnly'},
+      styles: {
+        paddingInline: system.legacy.padding.sm,
+      },
+    },
+  ],
+});
+
+type ContainerProps = {
+  tooltipProps?: Omit<TooltipProps, 'children'>;
+  children: React.ReactElement;
+};
+
+const Container = ({tooltipProps, children}: ContainerProps) => {
+  return tooltipProps ? (
+    <Tooltip {...tooltipProps}>{children}</Tooltip>
+  ) : (
+    <React.Fragment>{children}</React.Fragment>
+  );
+};
+
+const getVariant = (icon: CanvasSystemIcon | undefined, children: React.ReactNode) => {
+  if (icon && children) {
+    return 'iconWithText';
+  } else if (!icon && children) {
+    return 'textOnly';
+  } else {
+    return 'iconOnly';
+  }
+};
+
+export const SegmentedControlItem = createSubcomponent('button')({
+  displayName: 'SegmentedControl.Item',
+  modelHook: useSegmentedControlModel,
+  elemPropsHook: useSegmentedControlItem,
+})<ItemProps>(({children, icon, tooltipProps, ...elemProps}, Element, {state: {size}}) => {
+  const variant = getVariant(icon, children);
+  const iconSize = size === 'small' ? 'extraSmall' : 'small';
+
+  return (
+    <Container tooltipProps={tooltipProps}>
+      <BaseButton
+        as={Element}
+        {...handleCsProp(elemProps, segmentedControlItemStencil({size, variant}))}
+      >
+        {icon && <BaseButton.Icon icon={icon} size={iconSize} />}
+        {children && <Text>{children}</Text>}
+      </BaseButton>
+    </Container>
+  );
+});