@sproutsocial/seeds-react-segmented-control 1.0.13 → 1.1.0

package/.turbo/turbo-build.log

@@ -3,19 +3,19 @@ $ tsup --dts
 CLI Building entry: src/index.ts
 CLI Using tsconfig: tsconfig.json
 CLI tsup v8.5.0
-CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-segmented-control/tsup.config.ts
+CLI Using tsup config: /home/runner/_work/seeds/seeds/seeds-react/seeds-react-segmented-control/tsup.config.ts
 CLI Target: es2022
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-ESM dist/esm/index.js     4.47 KB
-ESM dist/esm/index.js.map 8.81 KB
-ESM ⚡️ Build success in 218ms
-CJS dist/index.js     6.73 KB
-CJS dist/index.js.map 8.90 KB
-CJS ⚡️ Build success in 254ms
+CJS dist/index.js     7.20 KB
+CJS dist/index.js.map 10.49 KB
+CJS ⚡️ Build success in 15ms
+ESM dist/esm/index.js     5.04 KB
+ESM dist/esm/index.js.map 10.41 KB
+ESM ⚡️ Build success in 14ms
 DTS Build start
-DTS ⚡️ Build success in 30853ms
-DTS dist/index.d.ts  1.47 KB
-DTS dist/index.d.mts 1.47 KB
-Done in 38.59s.
+DTS ⚡️ Build success in 4008ms
+DTS dist/index.d.ts  1.66 KB
+DTS dist/index.d.mts 1.66 KB
+Done in 5.48s.

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @sproutsocial/seeds-react-segmented-control
 
+## 1.1.0
+
+### Minor Changes
+
+- 1f356b4: Correct SegmentedControll accessibility, switch to radix, introduce simpler onValueChange callback
+
+## 1.0.15
+
+### Patch Changes
+
+- Updated dependencies [17d4f12]
+  - @sproutsocial/seeds-react-theme@3.6.0
+  - @sproutsocial/seeds-react-box@1.1.14
+  - @sproutsocial/seeds-react-mixins@4.3.1
+
+## 1.0.14
+
+### Patch Changes
+
+- Updated dependencies [5bb63e1]
+  - @sproutsocial/seeds-react-mixins@4.3.0
+
 ## 1.0.13
 
 ### Patch Changes

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 // src/SegmentedControl.tsx
 import * as React from "react";
-import { useState, useContext } from "react";
-import Box2 from "@sproutsocial/seeds-react-box";
+import { useState } from "react";
+import * as ToggleGroup from "@radix-ui/react-toggle-group";
 
 // src/styles.ts
 import styled, { css } from "styled-components";
@@ -11,18 +11,42 @@ import {
   disabled
 } from "@sproutsocial/seeds-react-mixins";
 import Box from "@sproutsocial/seeds-react-box";
-import Text from "@sproutsocial/seeds-react-text";
+import Button from "@sproutsocial/seeds-react-button";
 var SegmentedControlContainer = styled(Box)`
   border: 1px solid
     ${(props) => props.theme.colors.button.secondary.border.base};
   border-radius: ${(props) => props.theme.radii.outer};
   padding: ${(props) => props.theme.space[100]};
+  display: flex;
 
-  legend {
-    ${visuallyHidden}
+  ${(props) => props.disabled && disabled}
+`;
+var ToggleButton = styled(Button)`
+  /* To match the height of buttons... 350 padding - 2px top and bottom padding of the parent - 1px border on top and bottom */
+  padding: calc(${(props) => props.theme.space[350]} - 6px);
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  border: 0;
+
+  & + & {
+    margin-left: ${(props) => props.theme.space[100]};
   }
 
-  ${(props) => props.disabled && disabled}
+  &:hover {
+    background-color: ${(props) => props.theme.colors.listItem.background.hover};
+  }
+
+  &[data-state="on"] {
+    color: ${(props) => props.theme.colors.text.inverse};
+    background-color: ${(props) => props.theme.colors.listItem.background.selected};
+
+    &:hover {
+      background-color: ${(props) => props.theme.colors.listItem.background.selected};
+    }
+  }
 `;
 var SegmentedControlItemContainer = styled(Box)`
   flex: 1 1 auto;
@@ -43,7 +67,7 @@ var SegmentedControlItemContainer = styled(Box)`
 
   ${(props) => props.disabled && disabled}
 `;
-var SegmentedControlLabel = styled(Text)`
+var SegmentedControlLabel = styled(Button)`
   flex: 1 1 auto;
   display: flex;
   align-items: center;
@@ -79,9 +103,8 @@ var SegmentedControlLabel = styled(Text)`
 `;
 
 // src/SegmentedControl.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 var nameCounter = 0;
-var idCounter = 0;
 var SegmentedControlContext = React.createContext(null);
 var SegmentedControlItem = ({
   value,
@@ -89,36 +112,22 @@ var SegmentedControlItem = ({
   disabled: disabled2,
   ...rest
 }) => {
-  const context = useContext(SegmentedControlContext);
-  if (!context) {
-    return null;
-  }
-  const { name, selectedValue, onChange } = context;
-  const [id] = useState(`${name}-${idCounter++}`);
-  const isChecked = value === selectedValue;
-  return /* @__PURE__ */ jsxs(
-    SegmentedControlItemContainer,
+  return /* @__PURE__ */ jsx(
+    ToggleGroup.Item,
     {
-      "data-segmentedcontrol-isactive": isChecked,
-      "data-qa-segmentedcontrol-item": value,
-      "data-qa-segmentedcontrol-ischecked": isChecked === true,
+      value,
+      "aria-label": "Left aligned",
       disabled: disabled2,
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "radio",
-            id,
-            name,
-            value,
-            checked: isChecked,
-            onChange,
-            disabled: disabled2
-          }
-        ),
-        /* @__PURE__ */ jsx(SegmentedControlLabel, { as: "label", htmlFor: id, isActive: isChecked, children })
-      ]
+      asChild: true,
+      children: /* @__PURE__ */ jsx(
+        ToggleButton,
+        {
+          "data-qa-segmentedcontrol-item": value,
+          disabled: disabled2,
+          ...rest,
+          children
+        }
+      )
     }
   );
 };
@@ -126,29 +135,40 @@ var SegmentedControl = ({
   selectedValue,
   label,
   onChange,
+  onValueChange,
   children,
+  disabled: disabled2,
   ...rest
 }) => {
   const [name] = useState(`Racine-segmented-control-${nameCounter++}`);
   return /* @__PURE__ */ jsx(
-    SegmentedControlContext.Provider,
+    ToggleGroup.Root,
     {
-      value: {
-        name,
-        selectedValue,
-        onChange
+      className: "inline-flex space-x-px rounded bg-mauve6 shadow-[0_2px_10px] shadow-blackA4",
+      type: "single",
+      value: selectedValue,
+      "aria-label": label,
+      disabled: disabled2,
+      onValueChange: (e) => {
+        onValueChange?.(e);
+        const mockEvent = new Event("change", {
+          bubbles: true
+        });
+        Object.defineProperty(mockEvent, "target", { value: { value: e } });
+        Object.defineProperty(mockEvent, "currentTarget", {
+          value: { value: e }
+        });
+        onChange?.(mockEvent);
       },
-      children: /* @__PURE__ */ jsxs(
+      asChild: true,
+      children: /* @__PURE__ */ jsx(
         SegmentedControlContainer,
         {
-          forwardedAs: "fieldset",
           "data-qa-segmentedcontrol": label,
           "data-qa-segmentedcontrol-value": selectedValue,
+          disabled: disabled2,
           ...rest,
-          children: [
-            /* @__PURE__ */ jsx("legend", { children: label }),
-            /* @__PURE__ */ jsx(Box2, { display: "flex", children })
-          ]
+          children
         }
       )
     }

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/SegmentedControl.tsx","../../src/styles.ts","../../src/SegmentedControlTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useState, useContext } from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport {\n  SegmentedControlContainer,\n  SegmentedControlItemContainer,\n  SegmentedControlLabel,\n} from \"./styles\";\nimport type {\n  TypeSegmentedControlProps,\n  TypeSegmentedControlItemProps,\n} from \"./SegmentedControlTypes\";\n\nlet nameCounter = 0;\nlet idCounter = 0;\n\ninterface TypeSegmentedControlContext {\n  name: string;\n  selectedValue: string;\n  onChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;\n}\n\nconst SegmentedControlContext = React.createContext<\n  TypeSegmentedControlContext | null | undefined\n>(null);\n\nconst SegmentedControlItem = ({\n  value,\n  children,\n  disabled,\n  ...rest\n}: TypeSegmentedControlItemProps) => {\n  const context = useContext(SegmentedControlContext);\n\n  if (!context) {\n    return null;\n  }\n\n  const { name, selectedValue, onChange } = context;\n\n  /* eslint-disable-next-line */\n  const [id] = useState(`${name}-${idCounter++}`);\n  const isChecked = value === selectedValue;\n\n  return (\n    <SegmentedControlItemContainer\n      data-segmentedcontrol-isactive={isChecked}\n      data-qa-segmentedcontrol-item={value}\n      data-qa-segmentedcontrol-ischecked={isChecked === true}\n      disabled={disabled}\n      {...rest}\n    >\n      <input\n        type=\"radio\"\n        id={id}\n        name={name}\n        value={value}\n        checked={isChecked}\n        onChange={onChange}\n        disabled={disabled}\n      />\n      <SegmentedControlLabel as=\"label\" htmlFor={id} isActive={isChecked}>\n        {children}\n      </SegmentedControlLabel>\n    </SegmentedControlItemContainer>\n  );\n};\n\nconst SegmentedControl = ({\n  selectedValue,\n  label,\n  onChange,\n  children,\n  ...rest\n}: TypeSegmentedControlProps) => {\n  const [name] = useState(`Racine-segmented-control-${nameCounter++}`);\n  return (\n    <SegmentedControlContext.Provider\n      value={{\n        name,\n        selectedValue,\n        onChange,\n      }}\n    >\n      <SegmentedControlContainer\n        forwardedAs=\"fieldset\"\n        data-qa-segmentedcontrol={label}\n        data-qa-segmentedcontrol-value={selectedValue}\n        {...rest}\n      >\n        <legend>{label}</legend>\n\n        <Box display=\"flex\">{children}</Box>\n      </SegmentedControlContainer>\n    </SegmentedControlContext.Provider>\n  );\n};\n\nSegmentedControlItem.displayName = \"SegmentedControl.Item\";\nSegmentedControl.Item = SegmentedControlItem;\n\nexport default SegmentedControl;\n","import styled, { css } from \"styled-components\";\nimport {\n  visuallyHidden,\n  focusRing,\n  disabled,\n} from \"@sproutsocial/seeds-react-mixins\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type {\n  TypeSegmentedControlProps,\n  TypeSegmentedControlItemProps,\n} from \"./SegmentedControlTypes\";\n\nexport const SegmentedControlContainer = styled(Box)<\n  Pick<TypeSegmentedControlProps, \"disabled\">\n>`\n  border: 1px solid\n    ${(props) => props.theme.colors.button.secondary.border.base};\n  border-radius: ${(props) => props.theme.radii.outer};\n  padding: ${(props) => props.theme.space[100]};\n\n  legend {\n    ${visuallyHidden}\n  }\n\n  ${(props) => props.disabled && disabled}\n`;\n\nexport const SegmentedControlItemContainer = styled(Box)<\n  Pick<TypeSegmentedControlItemProps, \"disabled\">\n>`\n  flex: 1 1 auto;\n  display: flex;\n  cursor: pointer;\n\n  & + & {\n    margin-left: ${(props) => props.theme.space[100]};\n  }\n\n  &:focus-within label {\n    ${focusRing}\n  }\n\n  input {\n    ${visuallyHidden}\n  }\n\n  ${(props) => props.disabled && disabled}\n`;\n\ninterface TypeSegmentedControlState {\n  isActive: boolean;\n}\n\nexport const SegmentedControlLabel = styled(Text)<TypeSegmentedControlState>`\n  flex: 1 1 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: ${(props) => props.theme.colors.text.body};\n  cursor: pointer;\n  font-size: ${(props) => props.theme.typography[200].fontSize};\n  /**\n\t* Matches default line height of Icon. Also matches the overall height of\n\t* Input, Select, and Button.\n\t*/\n  line-height: 16px;\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n\n  border-radius: ${(props) => props.theme.radii.inner};\n  /* To match the height of buttons... 350 padding - 2px top and bottom padding of the parent - 1px border on top and bottom */\n  padding: calc(${(props) => props.theme.space[350]} - 6px);\n  transition: all ${(props) => props.theme.duration.fast};\n\n  &:hover {\n    background-color: ${(props) =>\n      props.theme.colors.listItem.background.hover};\n  }\n\n  ${(props) =>\n    props.isActive &&\n    css`\n      color: ${(props) => props.theme.colors.text.inverse};\n      background-color: ${(props) =>\n        props.theme.colors.listItem.background.selected};\n\n      &:hover {\n        background-color: ${(props) =>\n          props.theme.colors.listItem.background.selected};\n      }\n    `}\n`;\n","import type { TypeContainerProps } from \"@sproutsocial/seeds-react-box\";\nimport * as React from \"react\";\n\nexport interface TypeSegmentedControlItemProps {\n  /** The value of this item. Should be unique among sibling items. */\n  value: string;\n  children: React.ReactNode;\n  /** Disables user action and applies a disabled style on the component */\n  disabled?: boolean;\n}\n\nexport interface TypeSegmentedControlProps extends TypeContainerProps {\n  /** The value of the currently selected item. Should match the value prop of one of the child items */\n  selectedValue: string;\n\n  /** The title of the segmented control, used for accessibility purposes  */\n  label: string;\n\n  /** Called when the user selects a new item. You can access the value of the newly selected item using \"event.target.value\" */\n  onChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;\n\n  /** Disables user action and applies a disabled style on the component */\n  disabled?: boolean;\n  children: React.ReactNode;\n}\n","import SegmentedControl from \"./SegmentedControl\";\n\nexport default SegmentedControl;\nexport { SegmentedControl };\nexport * from \"./SegmentedControlTypes\";\n"],"mappings":"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","names":["Box","props","disabled","Box"]}
+{"version":3,"sources":["../../src/SegmentedControl.tsx","../../src/styles.ts","../../src/SegmentedControlTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useState } from \"react\";\nimport * as ToggleGroup from \"@radix-ui/react-toggle-group\";\nimport { SegmentedControlContainer, ToggleButton } from \"./styles\";\nimport type {\n  TypeSegmentedControlProps,\n  TypeSegmentedControlItemProps,\n} from \"./SegmentedControlTypes\";\n\nlet nameCounter = 0;\nlet idCounter = 0;\n\ninterface TypeSegmentedControlContext {\n  name: string;\n  selectedValue: string;\n  onChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;\n}\n\nconst SegmentedControlContext = React.createContext<\n  TypeSegmentedControlContext | null | undefined\n>(null);\n\nconst SegmentedControlItem = ({\n  value,\n  children,\n  disabled,\n  ...rest\n}: TypeSegmentedControlItemProps) => {\n  return (\n    <ToggleGroup.Item\n      value={value}\n      aria-label=\"Left aligned\"\n      disabled={disabled}\n      asChild\n    >\n      <ToggleButton\n        // TODO: Discuss dropping these\n        // We'd need to keep context, which seems unnecessary now\n        // data-segmentedcontrol-isactive={isChecked}\n        data-qa-segmentedcontrol-item={value}\n        // data-qa-segmentedcontrol-ischecked={isChecked === true}\n        disabled={disabled}\n        {...rest}\n      >\n        {children}\n      </ToggleButton>\n    </ToggleGroup.Item>\n  );\n};\n\nconst SegmentedControl = ({\n  selectedValue,\n  label,\n  onChange,\n  onValueChange,\n  children,\n  disabled,\n  ...rest\n}: TypeSegmentedControlProps) => {\n  const [name] = useState(`Racine-segmented-control-${nameCounter++}`);\n  return (\n    <ToggleGroup.Root\n      className=\"inline-flex space-x-px rounded bg-mauve6 shadow-[0_2px_10px] shadow-blackA4\"\n      type=\"single\"\n      value={selectedValue}\n      aria-label={label}\n      disabled={disabled}\n      onValueChange={(e) => {\n        onValueChange?.(e);\n        // Create a mock event to pass to onChange for backwards compatibility.\n        // We want to move towards onValueChange, but onChange is used by consumers currently so we need to support both for now.\n        const mockEvent = new Event(\"change\", {\n          bubbles: true,\n        }) as unknown as React.SyntheticEvent<HTMLInputElement>;\n        Object.defineProperty(mockEvent, \"target\", { value: { value: e } });\n        Object.defineProperty(mockEvent, \"currentTarget\", {\n          value: { value: e },\n        });\n        onChange?.(mockEvent);\n      }}\n      asChild\n    >\n      <SegmentedControlContainer\n        data-qa-segmentedcontrol={label}\n        data-qa-segmentedcontrol-value={selectedValue}\n        disabled={disabled}\n        {...rest}\n      >\n        {children}\n      </SegmentedControlContainer>\n    </ToggleGroup.Root>\n  );\n};\n\nSegmentedControlItem.displayName = \"SegmentedControl.Item\";\nSegmentedControl.Item = SegmentedControlItem;\n\nexport default SegmentedControl;\n","import styled, { css } from \"styled-components\";\nimport {\n  visuallyHidden,\n  focusRing,\n  disabled,\n} from \"@sproutsocial/seeds-react-mixins\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport type {\n  TypeSegmentedControlProps,\n  TypeSegmentedControlItemProps,\n} from \"./SegmentedControlTypes\";\n\nexport const SegmentedControlContainer = styled(Box)<\n  Pick<TypeSegmentedControlProps, \"disabled\">\n>`\n  border: 1px solid\n    ${(props) => props.theme.colors.button.secondary.border.base};\n  border-radius: ${(props) => props.theme.radii.outer};\n  padding: ${(props) => props.theme.space[100]};\n  display: flex;\n\n  ${(props) => props.disabled && disabled}\n`;\n\nexport const ToggleButton = styled(Button)`\n  /* To match the height of buttons... 350 padding - 2px top and bottom padding of the parent - 1px border on top and bottom */\n  padding: calc(${(props) => props.theme.space[350]} - 6px);\n  flex: 1 1 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  border: 0;\n\n  & + & {\n    margin-left: ${(props) => props.theme.space[100]};\n  }\n\n  &:hover {\n    background-color: ${(props) =>\n      props.theme.colors.listItem.background.hover};\n  }\n\n  &[data-state=\"on\"] {\n    color: ${(props) => props.theme.colors.text.inverse};\n    background-color: ${(props) =>\n      props.theme.colors.listItem.background.selected};\n\n    &:hover {\n      background-color: ${(props) =>\n        props.theme.colors.listItem.background.selected};\n    }\n  }\n`;\n\nexport const SegmentedControlItemContainer = styled(Box)<\n  Pick<TypeSegmentedControlItemProps, \"disabled\">\n>`\n  flex: 1 1 auto;\n  display: flex;\n  cursor: pointer;\n\n  & + & {\n    margin-left: ${(props) => props.theme.space[100]};\n  }\n\n  &:focus-within label {\n    ${focusRing}\n  }\n\n  input {\n    ${visuallyHidden}\n  }\n\n  ${(props) => props.disabled && disabled}\n`;\n\ninterface TypeSegmentedControlState {\n  isActive: boolean;\n}\n\nexport const SegmentedControlLabel = styled(Button)<TypeSegmentedControlState>`\n  flex: 1 1 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: ${(props) => props.theme.colors.text.body};\n  cursor: pointer;\n  font-size: ${(props) => props.theme.typography[200].fontSize};\n  /**\n\t* Matches default line height of Icon. Also matches the overall height of\n\t* Input, Select, and Button.\n\t*/\n  line-height: 16px;\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n\n  border-radius: ${(props) => props.theme.radii.inner};\n  /* To match the height of buttons... 350 padding - 2px top and bottom padding of the parent - 1px border on top and bottom */\n  padding: calc(${(props) => props.theme.space[350]} - 6px);\n  transition: all ${(props) => props.theme.duration.fast};\n\n  &:hover {\n    background-color: ${(props) =>\n      props.theme.colors.listItem.background.hover};\n  }\n\n  ${(props) =>\n    props.isActive &&\n    css`\n      color: ${(props) => props.theme.colors.text.inverse};\n      background-color: ${(props) =>\n        props.theme.colors.listItem.background.selected};\n\n      &:hover {\n        background-color: ${(props) =>\n          props.theme.colors.listItem.background.selected};\n      }\n    `}\n`;\n","import type { TypeContainerProps } from \"@sproutsocial/seeds-react-box\";\nimport * as React from \"react\";\n\nexport interface TypeSegmentedControlItemProps {\n  /** The value of this item. Should be unique among sibling items. */\n  value: string;\n  children: React.ReactNode;\n  /** Disables user action and applies a disabled style on the component */\n  disabled?: boolean;\n}\n\nexport interface TypeSegmentedControlProps extends TypeContainerProps {\n  /** The value of the currently selected item. Should match the value prop of one of the child items */\n  selectedValue: string;\n\n  /** The title of the segmented control, used for accessibility purposes  */\n  label: string;\n\n  /** Called when the user selects a new item. You can access the value of the newly selected item using \"event.target.value\" */\n  onChange?: (e: React.SyntheticEvent<HTMLInputElement>) => void;\n\n  /** Called when the user selects a new item. You can access the value of the newly selected item using \"event.target.value\" */\n  onValueChange?: (value: string) => void;\n\n  /** Disables user action and applies a disabled style on the component */\n  disabled?: boolean;\n  children: React.ReactNode;\n}\n","import SegmentedControl from \"./SegmentedControl\";\n\nexport default SegmentedControl;\nexport { SegmentedControl };\nexport * from \"./SegmentedControlTypes\";\n"],"mappings":";AAAA,YAAY,WAAW;AACvB,SAAS,gBAAgB;AACzB,YAAY,iBAAiB;;;ACF7B,OAAO,UAAU,WAAW;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAO,SAAS;AAChB,OAAO,YAAY;AAMZ,IAAM,4BAA4B,OAAO,GAAG;AAAA;AAAA,MAI7C,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,UAAU,OAAO,IAAI;AAAA,mBAC7C,CAAC,UAAU,MAAM,MAAM,MAAM,KAAK;AAAA,aACxC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA,IAG1C,CAAC,UAAU,MAAM,YAAY,QAAQ;AAAA;AAGlC,IAAM,eAAe,OAAO,MAAM;AAAA;AAAA,kBAEvB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAShC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,wBAI5B,CAAC,UACnB,MAAM,MAAM,OAAO,SAAS,WAAW,KAAK;AAAA;AAAA;AAAA;AAAA,aAIrC,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,OAAO;AAAA,wBAC/B,CAAC,UACnB,MAAM,MAAM,OAAO,SAAS,WAAW,QAAQ;AAAA;AAAA;AAAA,0BAG3B,CAAC,UACnB,MAAM,MAAM,OAAO,SAAS,WAAW,QAAQ;AAAA;AAAA;AAAA;AAKhD,IAAM,gCAAgC,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQpC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,MAI9C,SAAS;AAAA;AAAA;AAAA;AAAA,MAIT,cAAc;AAAA;AAAA;AAAA,IAGhB,CAAC,UAAU,MAAM,YAAY,QAAQ;AAAA;AAOlC,IAAM,wBAAwB,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMvC,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA,eAEnC,CAAC,UAAU,MAAM,MAAM,WAAW,GAAG,EAAE,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAM7C,CAAC,UAAU,MAAM,MAAM,YAAY,QAAQ;AAAA;AAAA,mBAEzC,CAAC,UAAU,MAAM,MAAM,MAAM,KAAK;AAAA;AAAA,kBAEnC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,oBAC/B,CAAC,UAAU,MAAM,MAAM,SAAS,IAAI;AAAA;AAAA;AAAA,wBAGhC,CAAC,UACnB,MAAM,MAAM,OAAO,SAAS,WAAW,KAAK;AAAA;AAAA;AAAA,IAG9C,CAAC,UACD,MAAM,YACN;AAAA,eACW,CAACA,WAAUA,OAAM,MAAM,OAAO,KAAK,OAAO;AAAA,0BAC/B,CAACA,WACnBA,OAAM,MAAM,OAAO,SAAS,WAAW,QAAQ;AAAA;AAAA;AAAA,4BAG3B,CAACA,WACnBA,OAAM,MAAM,OAAO,SAAS,WAAW,QAAQ;AAAA;AAAA,KAEpD;AAAA;;;ADpFC;AA1BN,IAAI,cAAc;AASlB,IAAM,0BAAgC,oBAEpC,IAAI;AAEN,IAAM,uBAAuB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,UAAAC;AAAA,EACA,GAAG;AACL,MAAqC;AACnC,SACE;AAAA,IAAa;AAAA,IAAZ;AAAA,MACC;AAAA,MACA,cAAW;AAAA,MACX,UAAUA;AAAA,MACV,SAAO;AAAA,MAEP;AAAA,QAAC;AAAA;AAAA,UAIC,iCAA+B;AAAA,UAE/B,UAAUA;AAAA,UACT,GAAG;AAAA,UAEH;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAEA,IAAM,mBAAmB,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAAA;AAAA,EACA,GAAG;AACL,MAAiC;AAC/B,QAAM,CAAC,IAAI,IAAI,SAAS,4BAA4B,aAAa,EAAE;AACnE,SACE;AAAA,IAAa;AAAA,IAAZ;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL,OAAO;AAAA,MACP,cAAY;AAAA,MACZ,UAAUA;AAAA,MACV,eAAe,CAAC,MAAM;AACpB,wBAAgB,CAAC;AAGjB,cAAM,YAAY,IAAI,MAAM,UAAU;AAAA,UACpC,SAAS;AAAA,QACX,CAAC;AACD,eAAO,eAAe,WAAW,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,CAAC;AAClE,eAAO,eAAe,WAAW,iBAAiB;AAAA,UAChD,OAAO,EAAE,OAAO,EAAE;AAAA,QACpB,CAAC;AACD,mBAAW,SAAS;AAAA,MACtB;AAAA,MACA,SAAO;AAAA,MAEP;AAAA,QAAC;AAAA;AAAA,UACC,4BAA0B;AAAA,UAC1B,kCAAgC;AAAA,UAChC,UAAUA;AAAA,UACT,GAAG;AAAA,UAEH;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAEA,qBAAqB,cAAc;AACnC,iBAAiB,OAAO;AAExB,IAAO,2BAAQ;;;AEhGf,OAAuB;;;ACCvB,IAAO,gBAAQ;","names":["props","disabled"]}

package/dist/index.d.mts

@@ -15,16 +15,18 @@ interface TypeSegmentedControlProps extends TypeContainerProps {
     /** The title of the segmented control, used for accessibility purposes  */
     label: string;
     /** Called when the user selects a new item. You can access the value of the newly selected item using "event.target.value" */
-    onChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;
+    onChange?: (e: React.SyntheticEvent<HTMLInputElement>) => void;
+    /** Called when the user selects a new item. You can access the value of the newly selected item using "event.target.value" */
+    onValueChange?: (value: string) => void;
     /** Disables user action and applies a disabled style on the component */
     disabled?: boolean;
     children: React.ReactNode;
 }
 
 declare const SegmentedControl: {
-    ({ selectedValue, label, onChange, children, ...rest }: TypeSegmentedControlProps): react_jsx_runtime.JSX.Element;
+    ({ selectedValue, label, onChange, onValueChange, children, disabled, ...rest }: TypeSegmentedControlProps): react_jsx_runtime.JSX.Element;
     Item: {
-        ({ value, children, disabled, ...rest }: TypeSegmentedControlItemProps): react_jsx_runtime.JSX.Element | null;
+        ({ value, children, disabled, ...rest }: TypeSegmentedControlItemProps): react_jsx_runtime.JSX.Element;
         displayName: string;
     };
 };

package/dist/index.d.ts

@@ -15,16 +15,18 @@ interface TypeSegmentedControlProps extends TypeContainerProps {
     /** The title of the segmented control, used for accessibility purposes  */
     label: string;
     /** Called when the user selects a new item. You can access the value of the newly selected item using "event.target.value" */
-    onChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;
+    onChange?: (e: React.SyntheticEvent<HTMLInputElement>) => void;
+    /** Called when the user selects a new item. You can access the value of the newly selected item using "event.target.value" */
+    onValueChange?: (value: string) => void;
     /** Disables user action and applies a disabled style on the component */
     disabled?: boolean;
     children: React.ReactNode;
 }
 
 declare const SegmentedControl: {
-    ({ selectedValue, label, onChange, children, ...rest }: TypeSegmentedControlProps): react_jsx_runtime.JSX.Element;
+    ({ selectedValue, label, onChange, onValueChange, children, disabled, ...rest }: TypeSegmentedControlProps): react_jsx_runtime.JSX.Element;
     Item: {
-        ({ value, children, disabled, ...rest }: TypeSegmentedControlItemProps): react_jsx_runtime.JSX.Element | null;
+        ({ value, children, disabled, ...rest }: TypeSegmentedControlItemProps): react_jsx_runtime.JSX.Element;
         displayName: string;
     };
 };

package/dist/index.js

@@ -38,24 +38,48 @@ module.exports = __toCommonJS(index_exports);
 // src/SegmentedControl.tsx
 var React = __toESM(require("react"));
 var import_react = require("react");
-var import_seeds_react_box2 = __toESM(require("@sproutsocial/seeds-react-box"));
+var ToggleGroup = __toESM(require("@radix-ui/react-toggle-group"));
 
 // src/styles.ts
 var import_styled_components = __toESM(require("styled-components"));
 var import_seeds_react_mixins = require("@sproutsocial/seeds-react-mixins");
 var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
-var import_seeds_react_text = __toESM(require("@sproutsocial/seeds-react-text"));
+var import_seeds_react_button = __toESM(require("@sproutsocial/seeds-react-button"));
 var SegmentedControlContainer = (0, import_styled_components.default)(import_seeds_react_box.default)`
   border: 1px solid
     ${(props) => props.theme.colors.button.secondary.border.base};
   border-radius: ${(props) => props.theme.radii.outer};
   padding: ${(props) => props.theme.space[100]};
+  display: flex;
 
-  legend {
-    ${import_seeds_react_mixins.visuallyHidden}
+  ${(props) => props.disabled && import_seeds_react_mixins.disabled}
+`;
+var ToggleButton = (0, import_styled_components.default)(import_seeds_react_button.default)`
+  /* To match the height of buttons... 350 padding - 2px top and bottom padding of the parent - 1px border on top and bottom */
+  padding: calc(${(props) => props.theme.space[350]} - 6px);
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  border: 0;
+
+  & + & {
+    margin-left: ${(props) => props.theme.space[100]};
   }
 
-  ${(props) => props.disabled && import_seeds_react_mixins.disabled}
+  &:hover {
+    background-color: ${(props) => props.theme.colors.listItem.background.hover};
+  }
+
+  &[data-state="on"] {
+    color: ${(props) => props.theme.colors.text.inverse};
+    background-color: ${(props) => props.theme.colors.listItem.background.selected};
+
+    &:hover {
+      background-color: ${(props) => props.theme.colors.listItem.background.selected};
+    }
+  }
 `;
 var SegmentedControlItemContainer = (0, import_styled_components.default)(import_seeds_react_box.default)`
   flex: 1 1 auto;
@@ -76,7 +100,7 @@ var SegmentedControlItemContainer = (0, import_styled_components.default)(import
 
   ${(props) => props.disabled && import_seeds_react_mixins.disabled}
 `;
-var SegmentedControlLabel = (0, import_styled_components.default)(import_seeds_react_text.default)`
+var SegmentedControlLabel = (0, import_styled_components.default)(import_seeds_react_button.default)`
   flex: 1 1 auto;
   display: flex;
   align-items: center;
@@ -114,7 +138,6 @@ var SegmentedControlLabel = (0, import_styled_components.default)(import_seeds_r
 // src/SegmentedControl.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var nameCounter = 0;
-var idCounter = 0;
 var SegmentedControlContext = React.createContext(null);
 var SegmentedControlItem = ({
   value,
@@ -122,36 +145,22 @@ var SegmentedControlItem = ({
   disabled: disabled2,
   ...rest
 }) => {
-  const context = (0, import_react.useContext)(SegmentedControlContext);
-  if (!context) {
-    return null;
-  }
-  const { name, selectedValue, onChange } = context;
-  const [id] = (0, import_react.useState)(`${name}-${idCounter++}`);
-  const isChecked = value === selectedValue;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    SegmentedControlItemContainer,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    ToggleGroup.Item,
     {
-      "data-segmentedcontrol-isactive": isChecked,
-      "data-qa-segmentedcontrol-item": value,
-      "data-qa-segmentedcontrol-ischecked": isChecked === true,
+      value,
+      "aria-label": "Left aligned",
       disabled: disabled2,
-      ...rest,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "input",
-          {
-            type: "radio",
-            id,
-            name,
-            value,
-            checked: isChecked,
-            onChange,
-            disabled: disabled2
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SegmentedControlLabel, { as: "label", htmlFor: id, isActive: isChecked, children })
-      ]
+      asChild: true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        ToggleButton,
+        {
+          "data-qa-segmentedcontrol-item": value,
+          disabled: disabled2,
+          ...rest,
+          children
+        }
+      )
     }
   );
 };
@@ -159,29 +168,40 @@ var SegmentedControl = ({
   selectedValue,
   label,
   onChange,
+  onValueChange,
   children,
+  disabled: disabled2,
   ...rest
 }) => {
   const [name] = (0, import_react.useState)(`Racine-segmented-control-${nameCounter++}`);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    SegmentedControlContext.Provider,
+    ToggleGroup.Root,
     {
-      value: {
-        name,
-        selectedValue,
-        onChange
+      className: "inline-flex space-x-px rounded bg-mauve6 shadow-[0_2px_10px] shadow-blackA4",
+      type: "single",
+      value: selectedValue,
+      "aria-label": label,
+      disabled: disabled2,
+      onValueChange: (e) => {
+        onValueChange?.(e);
+        const mockEvent = new Event("change", {
+          bubbles: true
+        });
+        Object.defineProperty(mockEvent, "target", { value: { value: e } });
+        Object.defineProperty(mockEvent, "currentTarget", {
+          value: { value: e }
+        });
+        onChange?.(mockEvent);
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      asChild: true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         SegmentedControlContainer,
         {
-          forwardedAs: "fieldset",
           "data-qa-segmentedcontrol": label,
           "data-qa-segmentedcontrol-value": selectedValue,
+          disabled: disabled2,
           ...rest,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("legend", { children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_box2.default, { display: "flex", children })
-          ]
+          children
         }
       )
     }

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/SegmentedControl.tsx","../src/styles.ts","../src/SegmentedControlTypes.ts"],"sourcesContent":["import SegmentedControl from \"./SegmentedControl\";\n\nexport default SegmentedControl;\nexport { SegmentedControl };\nexport * from \"./SegmentedControlTypes\";\n","import * as React from \"react\";\nimport { useState, useContext } from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport {\n  SegmentedControlContainer,\n  SegmentedControlItemContainer,\n  SegmentedControlLabel,\n} from \"./styles\";\nimport type {\n  TypeSegmentedControlProps,\n  TypeSegmentedControlItemProps,\n} from \"./SegmentedControlTypes\";\n\nlet nameCounter = 0;\nlet idCounter = 0;\n\ninterface TypeSegmentedControlContext {\n  name: string;\n  selectedValue: string;\n  onChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;\n}\n\nconst SegmentedControlContext = React.createContext<\n  TypeSegmentedControlContext | null | undefined\n>(null);\n\nconst SegmentedControlItem = ({\n  value,\n  children,\n  disabled,\n  ...rest\n}: TypeSegmentedControlItemProps) => {\n  const context = useContext(SegmentedControlContext);\n\n  if (!context) {\n    return null;\n  }\n\n  const { name, selectedValue, onChange } = context;\n\n  /* eslint-disable-next-line */\n  const [id] = useState(`${name}-${idCounter++}`);\n  const isChecked = value === selectedValue;\n\n  return (\n    <SegmentedControlItemContainer\n      data-segmentedcontrol-isactive={isChecked}\n      data-qa-segmentedcontrol-item={value}\n      data-qa-segmentedcontrol-ischecked={isChecked === true}\n      disabled={disabled}\n      {...rest}\n    >\n      <input\n        type=\"radio\"\n        id={id}\n        name={name}\n        value={value}\n        checked={isChecked}\n        onChange={onChange}\n        disabled={disabled}\n      />\n      <SegmentedControlLabel as=\"label\" htmlFor={id} isActive={isChecked}>\n        {children}\n      </SegmentedControlLabel>\n    </SegmentedControlItemContainer>\n  );\n};\n\nconst SegmentedControl = ({\n  selectedValue,\n  label,\n  onChange,\n  children,\n  ...rest\n}: TypeSegmentedControlProps) => {\n  const [name] = useState(`Racine-segmented-control-${nameCounter++}`);\n  return (\n    <SegmentedControlContext.Provider\n      value={{\n        name,\n        selectedValue,\n        onChange,\n      }}\n    >\n      <SegmentedControlContainer\n        forwardedAs=\"fieldset\"\n        data-qa-segmentedcontrol={label}\n        data-qa-segmentedcontrol-value={selectedValue}\n        {...rest}\n      >\n        <legend>{label}</legend>\n\n        <Box display=\"flex\">{children}</Box>\n      </SegmentedControlContainer>\n    </SegmentedControlContext.Provider>\n  );\n};\n\nSegmentedControlItem.displayName = \"SegmentedControl.Item\";\nSegmentedControl.Item = SegmentedControlItem;\n\nexport default SegmentedControl;\n","import styled, { css } from \"styled-components\";\nimport {\n  visuallyHidden,\n  focusRing,\n  disabled,\n} from \"@sproutsocial/seeds-react-mixins\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type {\n  TypeSegmentedControlProps,\n  TypeSegmentedControlItemProps,\n} from \"./SegmentedControlTypes\";\n\nexport const SegmentedControlContainer = styled(Box)<\n  Pick<TypeSegmentedControlProps, \"disabled\">\n>`\n  border: 1px solid\n    ${(props) => props.theme.colors.button.secondary.border.base};\n  border-radius: ${(props) => props.theme.radii.outer};\n  padding: ${(props) => props.theme.space[100]};\n\n  legend {\n    ${visuallyHidden}\n  }\n\n  ${(props) => props.disabled && disabled}\n`;\n\nexport const SegmentedControlItemContainer = styled(Box)<\n  Pick<TypeSegmentedControlItemProps, \"disabled\">\n>`\n  flex: 1 1 auto;\n  display: flex;\n  cursor: pointer;\n\n  & + & {\n    margin-left: ${(props) => props.theme.space[100]};\n  }\n\n  &:focus-within label {\n    ${focusRing}\n  }\n\n  input {\n    ${visuallyHidden}\n  }\n\n  ${(props) => props.disabled && disabled}\n`;\n\ninterface TypeSegmentedControlState {\n  isActive: boolean;\n}\n\nexport const SegmentedControlLabel = styled(Text)<TypeSegmentedControlState>`\n  flex: 1 1 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: ${(props) => props.theme.colors.text.body};\n  cursor: pointer;\n  font-size: ${(props) => props.theme.typography[200].fontSize};\n  /**\n\t* Matches default line height of Icon. Also matches the overall height of\n\t* Input, Select, and Button.\n\t*/\n  line-height: 16px;\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n\n  border-radius: ${(props) => props.theme.radii.inner};\n  /* To match the height of buttons... 350 padding - 2px top and bottom padding of the parent - 1px border on top and bottom */\n  padding: calc(${(props) => props.theme.space[350]} - 6px);\n  transition: all ${(props) => props.theme.duration.fast};\n\n  &:hover {\n    background-color: ${(props) =>\n      props.theme.colors.listItem.background.hover};\n  }\n\n  ${(props) =>\n    props.isActive &&\n    css`\n      color: ${(props) => props.theme.colors.text.inverse};\n      background-color: ${(props) =>\n        props.theme.colors.listItem.background.selected};\n\n      &:hover {\n        background-color: ${(props) =>\n          props.theme.colors.listItem.background.selected};\n      }\n    `}\n`;\n","import type { TypeContainerProps } from \"@sproutsocial/seeds-react-box\";\nimport * as React from \"react\";\n\nexport interface TypeSegmentedControlItemProps {\n  /** The value of this item. Should be unique among sibling items. */\n  value: string;\n  children: React.ReactNode;\n  /** Disables user action and applies a disabled style on the component */\n  disabled?: boolean;\n}\n\nexport interface TypeSegmentedControlProps extends TypeContainerProps {\n  /** The value of the currently selected item. Should match the value prop of one of the child items */\n  selectedValue: string;\n\n  /** The title of the segmented control, used for accessibility purposes  */\n  label: string;\n\n  /** Called when the user selects a new item. You can access the value of the newly selected item using \"event.target.value\" */\n  onChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;\n\n  /** Disables user action and applies a disabled style on the component */\n  disabled?: boolean;\n  children: React.ReactNode;\n}\n"],"mappings":"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","names":["import_seeds_react_box","styled","Box","Text","props","disabled","Box","React"]}
+{"version":3,"sources":["../src/index.ts","../src/SegmentedControl.tsx","../src/styles.ts","../src/SegmentedControlTypes.ts"],"sourcesContent":["import SegmentedControl from \"./SegmentedControl\";\n\nexport default SegmentedControl;\nexport { SegmentedControl };\nexport * from \"./SegmentedControlTypes\";\n","import * as React from \"react\";\nimport { useState } from \"react\";\nimport * as ToggleGroup from \"@radix-ui/react-toggle-group\";\nimport { SegmentedControlContainer, ToggleButton } from \"./styles\";\nimport type {\n  TypeSegmentedControlProps,\n  TypeSegmentedControlItemProps,\n} from \"./SegmentedControlTypes\";\n\nlet nameCounter = 0;\nlet idCounter = 0;\n\ninterface TypeSegmentedControlContext {\n  name: string;\n  selectedValue: string;\n  onChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;\n}\n\nconst SegmentedControlContext = React.createContext<\n  TypeSegmentedControlContext | null | undefined\n>(null);\n\nconst SegmentedControlItem = ({\n  value,\n  children,\n  disabled,\n  ...rest\n}: TypeSegmentedControlItemProps) => {\n  return (\n    <ToggleGroup.Item\n      value={value}\n      aria-label=\"Left aligned\"\n      disabled={disabled}\n      asChild\n    >\n      <ToggleButton\n        // TODO: Discuss dropping these\n        // We'd need to keep context, which seems unnecessary now\n        // data-segmentedcontrol-isactive={isChecked}\n        data-qa-segmentedcontrol-item={value}\n        // data-qa-segmentedcontrol-ischecked={isChecked === true}\n        disabled={disabled}\n        {...rest}\n      >\n        {children}\n      </ToggleButton>\n    </ToggleGroup.Item>\n  );\n};\n\nconst SegmentedControl = ({\n  selectedValue,\n  label,\n  onChange,\n  onValueChange,\n  children,\n  disabled,\n  ...rest\n}: TypeSegmentedControlProps) => {\n  const [name] = useState(`Racine-segmented-control-${nameCounter++}`);\n  return (\n    <ToggleGroup.Root\n      className=\"inline-flex space-x-px rounded bg-mauve6 shadow-[0_2px_10px] shadow-blackA4\"\n      type=\"single\"\n      value={selectedValue}\n      aria-label={label}\n      disabled={disabled}\n      onValueChange={(e) => {\n        onValueChange?.(e);\n        // Create a mock event to pass to onChange for backwards compatibility.\n        // We want to move towards onValueChange, but onChange is used by consumers currently so we need to support both for now.\n        const mockEvent = new Event(\"change\", {\n          bubbles: true,\n        }) as unknown as React.SyntheticEvent<HTMLInputElement>;\n        Object.defineProperty(mockEvent, \"target\", { value: { value: e } });\n        Object.defineProperty(mockEvent, \"currentTarget\", {\n          value: { value: e },\n        });\n        onChange?.(mockEvent);\n      }}\n      asChild\n    >\n      <SegmentedControlContainer\n        data-qa-segmentedcontrol={label}\n        data-qa-segmentedcontrol-value={selectedValue}\n        disabled={disabled}\n        {...rest}\n      >\n        {children}\n      </SegmentedControlContainer>\n    </ToggleGroup.Root>\n  );\n};\n\nSegmentedControlItem.displayName = \"SegmentedControl.Item\";\nSegmentedControl.Item = SegmentedControlItem;\n\nexport default SegmentedControl;\n","import styled, { css } from \"styled-components\";\nimport {\n  visuallyHidden,\n  focusRing,\n  disabled,\n} from \"@sproutsocial/seeds-react-mixins\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport type {\n  TypeSegmentedControlProps,\n  TypeSegmentedControlItemProps,\n} from \"./SegmentedControlTypes\";\n\nexport const SegmentedControlContainer = styled(Box)<\n  Pick<TypeSegmentedControlProps, \"disabled\">\n>`\n  border: 1px solid\n    ${(props) => props.theme.colors.button.secondary.border.base};\n  border-radius: ${(props) => props.theme.radii.outer};\n  padding: ${(props) => props.theme.space[100]};\n  display: flex;\n\n  ${(props) => props.disabled && disabled}\n`;\n\nexport const ToggleButton = styled(Button)`\n  /* To match the height of buttons... 350 padding - 2px top and bottom padding of the parent - 1px border on top and bottom */\n  padding: calc(${(props) => props.theme.space[350]} - 6px);\n  flex: 1 1 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  border: 0;\n\n  & + & {\n    margin-left: ${(props) => props.theme.space[100]};\n  }\n\n  &:hover {\n    background-color: ${(props) =>\n      props.theme.colors.listItem.background.hover};\n  }\n\n  &[data-state=\"on\"] {\n    color: ${(props) => props.theme.colors.text.inverse};\n    background-color: ${(props) =>\n      props.theme.colors.listItem.background.selected};\n\n    &:hover {\n      background-color: ${(props) =>\n        props.theme.colors.listItem.background.selected};\n    }\n  }\n`;\n\nexport const SegmentedControlItemContainer = styled(Box)<\n  Pick<TypeSegmentedControlItemProps, \"disabled\">\n>`\n  flex: 1 1 auto;\n  display: flex;\n  cursor: pointer;\n\n  & + & {\n    margin-left: ${(props) => props.theme.space[100]};\n  }\n\n  &:focus-within label {\n    ${focusRing}\n  }\n\n  input {\n    ${visuallyHidden}\n  }\n\n  ${(props) => props.disabled && disabled}\n`;\n\ninterface TypeSegmentedControlState {\n  isActive: boolean;\n}\n\nexport const SegmentedControlLabel = styled(Button)<TypeSegmentedControlState>`\n  flex: 1 1 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: ${(props) => props.theme.colors.text.body};\n  cursor: pointer;\n  font-size: ${(props) => props.theme.typography[200].fontSize};\n  /**\n\t* Matches default line height of Icon. Also matches the overall height of\n\t* Input, Select, and Button.\n\t*/\n  line-height: 16px;\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n\n  border-radius: ${(props) => props.theme.radii.inner};\n  /* To match the height of buttons... 350 padding - 2px top and bottom padding of the parent - 1px border on top and bottom */\n  padding: calc(${(props) => props.theme.space[350]} - 6px);\n  transition: all ${(props) => props.theme.duration.fast};\n\n  &:hover {\n    background-color: ${(props) =>\n      props.theme.colors.listItem.background.hover};\n  }\n\n  ${(props) =>\n    props.isActive &&\n    css`\n      color: ${(props) => props.theme.colors.text.inverse};\n      background-color: ${(props) =>\n        props.theme.colors.listItem.background.selected};\n\n      &:hover {\n        background-color: ${(props) =>\n          props.theme.colors.listItem.background.selected};\n      }\n    `}\n`;\n","import type { TypeContainerProps } from \"@sproutsocial/seeds-react-box\";\nimport * as React from \"react\";\n\nexport interface TypeSegmentedControlItemProps {\n  /** The value of this item. Should be unique among sibling items. */\n  value: string;\n  children: React.ReactNode;\n  /** Disables user action and applies a disabled style on the component */\n  disabled?: boolean;\n}\n\nexport interface TypeSegmentedControlProps extends TypeContainerProps {\n  /** The value of the currently selected item. Should match the value prop of one of the child items */\n  selectedValue: string;\n\n  /** The title of the segmented control, used for accessibility purposes  */\n  label: string;\n\n  /** Called when the user selects a new item. You can access the value of the newly selected item using \"event.target.value\" */\n  onChange?: (e: React.SyntheticEvent<HTMLInputElement>) => void;\n\n  /** Called when the user selects a new item. You can access the value of the newly selected item using \"event.target.value\" */\n  onValueChange?: (value: string) => void;\n\n  /** Disables user action and applies a disabled style on the component */\n  disabled?: boolean;\n  children: React.ReactNode;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,mBAAyB;AACzB,kBAA6B;;;ACF7B,+BAA4B;AAC5B,gCAIO;AACP,6BAAgB;AAChB,gCAAmB;AAMZ,IAAM,gCAA4B,yBAAAA,SAAO,uBAAAC,OAAG;AAAA;AAAA,MAI7C,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,UAAU,OAAO,IAAI;AAAA,mBAC7C,CAAC,UAAU,MAAM,MAAM,MAAM,KAAK;AAAA,aACxC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA,IAG1C,CAAC,UAAU,MAAM,YAAY,kCAAQ;AAAA;AAGlC,IAAM,mBAAe,yBAAAD,SAAO,0BAAAE,OAAM;AAAA;AAAA,kBAEvB,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAShC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,wBAI5B,CAAC,UACnB,MAAM,MAAM,OAAO,SAAS,WAAW,KAAK;AAAA;AAAA;AAAA;AAAA,aAIrC,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,OAAO;AAAA,wBAC/B,CAAC,UACnB,MAAM,MAAM,OAAO,SAAS,WAAW,QAAQ;AAAA;AAAA;AAAA,0BAG3B,CAAC,UACnB,MAAM,MAAM,OAAO,SAAS,WAAW,QAAQ;AAAA;AAAA;AAAA;AAKhD,IAAM,oCAAgC,yBAAAF,SAAO,uBAAAC,OAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQpC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,MAI9C,mCAAS;AAAA;AAAA;AAAA;AAAA,MAIT,wCAAc;AAAA;AAAA;AAAA,IAGhB,CAAC,UAAU,MAAM,YAAY,kCAAQ;AAAA;AAOlC,IAAM,4BAAwB,yBAAAD,SAAO,0BAAAE,OAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMvC,CAAC,UAAU,MAAM,MAAM,OAAO,KAAK,IAAI;AAAA;AAAA,eAEnC,CAAC,UAAU,MAAM,MAAM,WAAW,GAAG,EAAE,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAM7C,CAAC,UAAU,MAAM,MAAM,YAAY,QAAQ;AAAA;AAAA,mBAEzC,CAAC,UAAU,MAAM,MAAM,MAAM,KAAK;AAAA;AAAA,kBAEnC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA,oBAC/B,CAAC,UAAU,MAAM,MAAM,SAAS,IAAI;AAAA;AAAA;AAAA,wBAGhC,CAAC,UACnB,MAAM,MAAM,OAAO,SAAS,WAAW,KAAK;AAAA;AAAA;AAAA,IAG9C,CAAC,UACD,MAAM,YACN;AAAA,eACW,CAACC,WAAUA,OAAM,MAAM,OAAO,KAAK,OAAO;AAAA,0BAC/B,CAACA,WACnBA,OAAM,MAAM,OAAO,SAAS,WAAW,QAAQ;AAAA;AAAA;AAAA,4BAG3B,CAACA,WACnBA,OAAM,MAAM,OAAO,SAAS,WAAW,QAAQ;AAAA;AAAA,KAEpD;AAAA;;;ADpFC;AA1BN,IAAI,cAAc;AASlB,IAAM,0BAAgC,oBAEpC,IAAI;AAEN,IAAM,uBAAuB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,UAAAC;AAAA,EACA,GAAG;AACL,MAAqC;AACnC,SACE;AAAA,IAAa;AAAA,IAAZ;AAAA,MACC;AAAA,MACA,cAAW;AAAA,MACX,UAAUA;AAAA,MACV,SAAO;AAAA,MAEP;AAAA,QAAC;AAAA;AAAA,UAIC,iCAA+B;AAAA,UAE/B,UAAUA;AAAA,UACT,GAAG;AAAA,UAEH;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAEA,IAAM,mBAAmB,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAAA;AAAA,EACA,GAAG;AACL,MAAiC;AAC/B,QAAM,CAAC,IAAI,QAAI,uBAAS,4BAA4B,aAAa,EAAE;AACnE,SACE;AAAA,IAAa;AAAA,IAAZ;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL,OAAO;AAAA,MACP,cAAY;AAAA,MACZ,UAAUA;AAAA,MACV,eAAe,CAAC,MAAM;AACpB,wBAAgB,CAAC;AAGjB,cAAM,YAAY,IAAI,MAAM,UAAU;AAAA,UACpC,SAAS;AAAA,QACX,CAAC;AACD,eAAO,eAAe,WAAW,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,CAAC;AAClE,eAAO,eAAe,WAAW,iBAAiB;AAAA,UAChD,OAAO,EAAE,OAAO,EAAE;AAAA,QACpB,CAAC;AACD,mBAAW,SAAS;AAAA,MACtB;AAAA,MACA,SAAO;AAAA,MAEP;AAAA,QAAC;AAAA;AAAA,UACC,4BAA0B;AAAA,UAC1B,kCAAgC;AAAA,UAChC,UAAUA;AAAA,UACT,GAAG;AAAA,UAEH;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAEA,qBAAqB,cAAc;AACnC,iBAAiB,OAAO;AAExB,IAAO,2BAAQ;;;AEhGf,IAAAC,SAAuB;;;AHCvB,IAAO,gBAAQ;","names":["styled","Box","Button","props","disabled","React"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-segmented-control",
-  "version": "1.0.13",
+  "version": "1.1.0",
   "description": "Seeds React SegmentedControl",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -18,11 +18,13 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-theme": "^3.5.1",
+    "@radix-ui/react-toggle-group": "^1.0.0",
+    "@sproutsocial/seeds-react-theme": "^3.6.0",
     "@sproutsocial/seeds-react-system-props": "^3.0.1",
-    "@sproutsocial/seeds-react-box": "^1.1.13",
+    "@sproutsocial/seeds-react-box": "^1.1.14",
+    "@sproutsocial/seeds-react-button": "^1.3.20",
     "@sproutsocial/seeds-react-text": "^1.4.0",
-    "@sproutsocial/seeds-react-mixins": "^4.2.5"
+    "@sproutsocial/seeds-react-mixins": "^4.3.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",

package/src/SegmentedControl.stories.tsx

@@ -15,11 +15,15 @@ type Story = StoryObj<typeof SegmentedControl>;
 // @ts-ignore IDK what props should be
 const StatefulSegmentedControl = (props) => {
   const [value, setValue] = useState("1");
+
   return (
     <SegmentedControl
       selectedValue={value}
       label="Segmented control component"
-      onChange={(e) => setValue((e.target as HTMLInputElement).value)}
+      onChange={(e) => {
+        console.log(e);
+        setValue((e.target as HTMLInputElement).value);
+      }}
       {...props}
     >
       <SegmentedControl.Item value="1">Test 1</SegmentedControl.Item>
@@ -55,7 +59,7 @@ export const DisabledItem: Story = {
         <SegmentedControl
           selectedValue={value}
           label="Segmented control component"
-          onChange={(e) => setValue((e.target as HTMLInputElement).value)}
+          onValueChange={setValue}
           flex="1"
         >
           <SegmentedControl.Item value="1">Test 1</SegmentedControl.Item>

package/src/SegmentedControl.tsx

@@ -1,11 +1,7 @@
 import * as React from "react";
-import { useState, useContext } from "react";
-import Box from "@sproutsocial/seeds-react-box";
-import {
-  SegmentedControlContainer,
-  SegmentedControlItemContainer,
-  SegmentedControlLabel,
-} from "./styles";
+import { useState } from "react";
+import * as ToggleGroup from "@radix-ui/react-toggle-group";
+import { SegmentedControlContainer, ToggleButton } from "./styles";
 import type {
   TypeSegmentedControlProps,
   TypeSegmentedControlItemProps,
@@ -30,39 +26,25 @@ const SegmentedControlItem = ({
   disabled,
   ...rest
 }: TypeSegmentedControlItemProps) => {
-  const context = useContext(SegmentedControlContext);
-
-  if (!context) {
-    return null;
-  }
-
-  const { name, selectedValue, onChange } = context;
-
-  /* eslint-disable-next-line */
-  const [id] = useState(`${name}-${idCounter++}`);
-  const isChecked = value === selectedValue;
-
   return (
-    <SegmentedControlItemContainer
-      data-segmentedcontrol-isactive={isChecked}
-      data-qa-segmentedcontrol-item={value}
-      data-qa-segmentedcontrol-ischecked={isChecked === true}
+    <ToggleGroup.Item
+      value={value}
+      aria-label="Left aligned"
       disabled={disabled}
-      {...rest}
+      asChild
     >
-      <input
-        type="radio"
-        id={id}
-        name={name}
-        value={value}
-        checked={isChecked}
-        onChange={onChange}
+      <ToggleButton
+        // TODO: Discuss dropping these
+        // We'd need to keep context, which seems unnecessary now
+        // data-segmentedcontrol-isactive={isChecked}
+        data-qa-segmentedcontrol-item={value}
+        // data-qa-segmentedcontrol-ischecked={isChecked === true}
         disabled={disabled}
-      />
-      <SegmentedControlLabel as="label" htmlFor={id} isActive={isChecked}>
+        {...rest}
+      >
         {children}
-      </SegmentedControlLabel>
-    </SegmentedControlItemContainer>
+      </ToggleButton>
+    </ToggleGroup.Item>
   );
 };
 
@@ -70,29 +52,43 @@ const SegmentedControl = ({
   selectedValue,
   label,
   onChange,
+  onValueChange,
   children,
+  disabled,
   ...rest
 }: TypeSegmentedControlProps) => {
   const [name] = useState(`Racine-segmented-control-${nameCounter++}`);
   return (
-    <SegmentedControlContext.Provider
-      value={{
-        name,
-        selectedValue,
-        onChange,
+    <ToggleGroup.Root
+      className="inline-flex space-x-px rounded bg-mauve6 shadow-[0_2px_10px] shadow-blackA4"
+      type="single"
+      value={selectedValue}
+      aria-label={label}
+      disabled={disabled}
+      onValueChange={(e) => {
+        onValueChange?.(e);
+        // Create a mock event to pass to onChange for backwards compatibility.
+        // We want to move towards onValueChange, but onChange is used by consumers currently so we need to support both for now.
+        const mockEvent = new Event("change", {
+          bubbles: true,
+        }) as unknown as React.SyntheticEvent<HTMLInputElement>;
+        Object.defineProperty(mockEvent, "target", { value: { value: e } });
+        Object.defineProperty(mockEvent, "currentTarget", {
+          value: { value: e },
+        });
+        onChange?.(mockEvent);
       }}
+      asChild
     >
       <SegmentedControlContainer
-        forwardedAs="fieldset"
         data-qa-segmentedcontrol={label}
         data-qa-segmentedcontrol-value={selectedValue}
+        disabled={disabled}
         {...rest}
       >
-        <legend>{label}</legend>
-
-        <Box display="flex">{children}</Box>
+        {children}
       </SegmentedControlContainer>
-    </SegmentedControlContext.Provider>
+    </ToggleGroup.Root>
   );
 };
 

package/src/SegmentedControlTypes.ts

@@ -17,7 +17,10 @@ export interface TypeSegmentedControlProps extends TypeContainerProps {
   label: string;
 
   /** Called when the user selects a new item. You can access the value of the newly selected item using "event.target.value" */
-  onChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;
+  onChange?: (e: React.SyntheticEvent<HTMLInputElement>) => void;
+
+  /** Called when the user selects a new item. You can access the value of the newly selected item using "event.target.value" */
+  onValueChange?: (value: string) => void;
 
   /** Disables user action and applies a disabled style on the component */
   disabled?: boolean;

package/src/__tests__/SegmentedControl.test.tsx

@@ -32,53 +32,26 @@ describe("SegmentedControl", () => {
     const item2 = screen.getByText("Test 2");
     const item3 = screen.getByText("Test 3");
 
-    expect(item1?.parentNode).toHaveAttribute(
-      "data-segmentedcontrol-isactive",
-      "true"
-    );
+    expect(item1).toHaveAttribute("data-state", "on");
 
-    expect(item2?.parentNode).toHaveAttribute(
-      "data-segmentedcontrol-isactive",
-      "false"
-    );
+    expect(item2).toHaveAttribute("data-state", "off");
 
-    expect(item3?.parentNode).toHaveAttribute(
-      "data-segmentedcontrol-isactive",
-      "false"
-    );
+    expect(item3).toHaveAttribute("data-state", "off");
 
     fireEvent.click(item3);
 
-    expect(item1?.parentNode).toHaveAttribute(
-      "data-segmentedcontrol-isactive",
-      "false"
-    );
+    expect(item1).toHaveAttribute("data-state", "off");
 
-    expect(item2?.parentNode).toHaveAttribute(
-      "data-segmentedcontrol-isactive",
-      "false"
-    );
+    expect(item2).toHaveAttribute("data-state", "off");
 
-    expect(item3?.parentNode).toHaveAttribute(
-      "data-segmentedcontrol-isactive",
-      "true"
-    );
+    expect(item3).toHaveAttribute("data-state", "on");
 
     fireEvent.click(item2);
 
-    expect(item1?.parentNode).toHaveAttribute(
-      "data-segmentedcontrol-isactive",
-      "false"
-    );
+    expect(item1).toHaveAttribute("data-state", "off");
 
-    expect(item2?.parentNode).toHaveAttribute(
-      "data-segmentedcontrol-isactive",
-      "true"
-    );
+    expect(item2).toHaveAttribute("data-state", "on");
 
-    expect(item3?.parentNode).toHaveAttribute(
-      "data-segmentedcontrol-isactive",
-      "false"
-    );
+    expect(item3).toHaveAttribute("data-state", "off");
   });
 });

package/src/styles.ts

@@ -5,7 +5,7 @@ import {
   disabled,
 } from "@sproutsocial/seeds-react-mixins";
 import Box from "@sproutsocial/seeds-react-box";
-import Text from "@sproutsocial/seeds-react-text";
+import Button from "@sproutsocial/seeds-react-button";
 import type {
   TypeSegmentedControlProps,
   TypeSegmentedControlItemProps,
@@ -18,12 +18,40 @@ export const SegmentedControlContainer = styled(Box)<
     ${(props) => props.theme.colors.button.secondary.border.base};
   border-radius: ${(props) => props.theme.radii.outer};
   padding: ${(props) => props.theme.space[100]};
+  display: flex;
 
-  legend {
-    ${visuallyHidden}
+  ${(props) => props.disabled && disabled}
+`;
+
+export const ToggleButton = styled(Button)`
+  /* To match the height of buttons... 350 padding - 2px top and bottom padding of the parent - 1px border on top and bottom */
+  padding: calc(${(props) => props.theme.space[350]} - 6px);
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  border: 0;
+
+  & + & {
+    margin-left: ${(props) => props.theme.space[100]};
   }
 
-  ${(props) => props.disabled && disabled}
+  &:hover {
+    background-color: ${(props) =>
+      props.theme.colors.listItem.background.hover};
+  }
+
+  &[data-state="on"] {
+    color: ${(props) => props.theme.colors.text.inverse};
+    background-color: ${(props) =>
+      props.theme.colors.listItem.background.selected};
+
+    &:hover {
+      background-color: ${(props) =>
+        props.theme.colors.listItem.background.selected};
+    }
+  }
 `;
 
 export const SegmentedControlItemContainer = styled(Box)<
@@ -52,7 +80,7 @@ interface TypeSegmentedControlState {
   isActive: boolean;
 }
 
-export const SegmentedControlLabel = styled(Text)<TypeSegmentedControlState>`
+export const SegmentedControlLabel = styled(Button)<TypeSegmentedControlState>`
   flex: 1 1 auto;
   display: flex;
   align-items: center;