@sproutsocial/seeds-react-segmented-control 1.1.24 → 1.1.26

package/dist/esm/index.js

@@ -1,7 +1,10 @@
 // src/SegmentedControl.tsx
-import * as React from "react";
-import { useState } from "react";
-import * as ToggleGroup from "@radix-ui/react-toggle-group";
+import * as React3 from "react";
+
+// src/SegmentedControlHybrid.tsx
+import * as React2 from "react";
+import * as ToggleGroup2 from "@radix-ui/react-toggle-group";
+import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
 
 // src/styles.ts
 import styled, { css } from "styled-components";
@@ -102,71 +105,163 @@ var SegmentedControlLabel = styled(Button)`
     `}
 `;
 
-// src/SegmentedControl.tsx
+// src/SegmentedControlTailwind.tsx
+import * as React from "react";
+import * as ToggleGroup from "@radix-ui/react-toggle-group";
 import { jsx } from "react/jsx-runtime";
-var nameCounter = 0;
-var SegmentedControlContext = React.createContext(null);
+var SegmentedControlVariantContext = React.createContext("tailwind");
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+function createChangeHandler(onChange, onValueChange) {
+  return (e) => {
+    if (!e) return;
+    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);
+  };
+}
 var SegmentedControlItem = ({
   value,
   children,
   disabled: disabled2,
   ...rest
 }) => {
+  const variant = React.useContext(SegmentedControlVariantContext);
+  if (variant === "styled") {
+    return /* @__PURE__ */ jsx(ToggleGroup.Item, { value, disabled: disabled2, asChild: true, children: /* @__PURE__ */ jsx(
+      ToggleButton,
+      {
+        "data-qa-segmentedcontrol-item": value,
+        disabled: disabled2,
+        ...rest,
+        children
+      }
+    ) });
+  }
+  const Toggle = "button";
   return /* @__PURE__ */ jsx(ToggleGroup.Item, { value, disabled: disabled2, asChild: true, children: /* @__PURE__ */ jsx(
-    ToggleButton,
+    Toggle,
     {
+      type: "button",
       "data-qa-segmentedcontrol-item": value,
       disabled: disabled2,
       ...rest,
+      className: "seeds-segmented-control-item",
       children
     }
   ) });
 };
-var SegmentedControl = ({
-  selectedValue,
-  label,
-  onChange,
-  onValueChange,
-  children,
-  disabled: disabled2,
-  ...rest
-}) => {
-  const [name] = useState(`Racine-segmented-control-${nameCounter++}`);
-  return /* @__PURE__ */ jsx(
-    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: disabled2,
-      onValueChange: (e) => {
-        if (!e) return;
-        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);
-      },
-      asChild: true,
-      children: /* @__PURE__ */ jsx(
-        SegmentedControlContainer,
-        {
-          "data-qa-segmentedcontrol": label,
-          "data-qa-segmentedcontrol-value": selectedValue,
-          disabled: disabled2,
-          ...rest,
-          children
-        }
-      )
-    }
-  );
-};
 SegmentedControlItem.displayName = "SegmentedControl.Item";
+var SegmentedControlTailwind = React.forwardRef(
+  ({
+    selectedValue,
+    label,
+    onChange,
+    onValueChange,
+    children,
+    disabled: disabled2 = false,
+    className,
+    ...rest
+  }, ref) => {
+    const Container = "div";
+    return /* @__PURE__ */ jsx(
+      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: disabled2,
+        onValueChange: createChangeHandler(onChange, onValueChange),
+        asChild: true,
+        children: /* @__PURE__ */ jsx(
+          Container,
+          {
+            ref,
+            "data-qa-segmentedcontrol": label,
+            "data-qa-segmentedcontrol-value": selectedValue,
+            ...rest,
+            className: cn(
+              "seeds-segmented-control",
+              { "seeds-segmented-control-disabled": disabled2 },
+              className
+            ),
+            children
+          }
+        )
+      }
+    );
+  }
+);
+SegmentedControlTailwind.displayName = "SegmentedControlTailwind";
+
+// src/SegmentedControlHybrid.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var SegmentedControlHybrid = React2.forwardRef((props, ref) => {
+  const {
+    selectedValue,
+    label,
+    onChange,
+    onValueChange,
+    children,
+    disabled: disabled2,
+    ...rest
+  } = props;
+  if (hasStyledProps(rest)) {
+    return /* @__PURE__ */ jsx2(SegmentedControlVariantContext.Provider, { value: "styled", children: /* @__PURE__ */ jsx2(
+      ToggleGroup2.Root,
+      {
+        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: createChangeHandler(onChange, onValueChange),
+        asChild: true,
+        children: /* @__PURE__ */ jsx2(
+          SegmentedControlContainer,
+          {
+            ref,
+            "data-qa-segmentedcontrol": label,
+            "data-qa-segmentedcontrol-value": selectedValue,
+            disabled: disabled2,
+            ...rest,
+            children
+          }
+        )
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx2(SegmentedControlTailwind, { ...props, ref });
+});
+SegmentedControlHybrid.displayName = "SegmentedControl";
+SegmentedControlHybrid.Item = SegmentedControlItem;
+var SegmentedControlHybrid_default = SegmentedControlHybrid;
+
+// src/SegmentedControl.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var SegmentedControl = React3.forwardRef((props, ref) => /* @__PURE__ */ jsx3(SegmentedControlHybrid_default, { ...props, ref }));
+SegmentedControl.displayName = "SegmentedControl";
 SegmentedControl.Item = SegmentedControlItem;
 var SegmentedControl_default = SegmentedControl;
 

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 } 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 value={value} disabled={disabled} asChild>\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        // Radix allows deselecting a value by clicking on it when it's already selected,\n        // but we don't want to allow that behavior in our SegmentedControl.\n        if (!e) return;\n\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":"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","names":["props","disabled"]}
+{"version":3,"sources":["../../src/SegmentedControl.tsx","../../src/SegmentedControlHybrid.tsx","../../src/styles.ts","../../src/SegmentedControlTailwind.tsx","../../src/SegmentedControlTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport type { TypeSegmentedControlProps } from \"./SegmentedControlTypes\";\nimport SegmentedControlHybrid from \"./SegmentedControlHybrid\";\nimport { SegmentedControlItem } from \"./SegmentedControlTailwind\";\n\ntype TypeSegmentedControlComponent = React.ForwardRefExoticComponent<\n  TypeSegmentedControlProps & React.RefAttributes<HTMLDivElement>\n> & {\n  Item: typeof SegmentedControlItem;\n};\n\n/**\n * SegmentedControl routes between the Tailwind/CSS-class implementation\n * (preferred) and the legacy styled-components implementation via the hybrid\n * component. This entry file keeps a real component definition (mirroring\n * Button.tsx) so react-docgen's `generate:props-docs` step can discover it and\n * emit prop docs from TypeSegmentedControlProps. styles.ts is left untouched\n * for the styled path.\n */\nconst SegmentedControl = React.forwardRef<\n  HTMLDivElement,\n  TypeSegmentedControlProps\n>((props, ref) => (\n  <SegmentedControlHybrid {...props} ref={ref} />\n)) as TypeSegmentedControlComponent;\n\nSegmentedControl.displayName = \"SegmentedControl\";\nSegmentedControl.Item = SegmentedControlItem;\n\nexport default SegmentedControl;\n","/**\n * Hybrid SegmentedControl Component\n * Automatically chooses between Tailwind and styled-components based on props.\n * Consumers using Box system props (flex, mr, ml, height, ...) or a\n * styled(SegmentedControl) extension keep the styled-components implementation;\n * everyone else gets the faster Tailwind path.\n */\n\nimport * as React from \"react\";\nimport * as ToggleGroup from \"@radix-ui/react-toggle-group\";\nimport { hasStyledProps } from \"@sproutsocial/seeds-react-system-props\";\nimport { SegmentedControlContainer } from \"./styles\";\nimport {\n  SegmentedControlTailwind,\n  SegmentedControlItem,\n  SegmentedControlVariantContext,\n  createChangeHandler,\n} from \"./SegmentedControlTailwind\";\nimport type { TypeSegmentedControlProps } from \"./SegmentedControlTypes\";\n\ntype TypeSegmentedControlComponent = React.ForwardRefExoticComponent<\n  TypeSegmentedControlProps & React.RefAttributes<HTMLDivElement>\n> & {\n  Item: typeof SegmentedControlItem;\n};\n\nconst SegmentedControlHybrid = React.forwardRef<\n  HTMLDivElement,\n  TypeSegmentedControlProps\n>((props, ref) => {\n  const {\n    selectedValue,\n    label,\n    onChange,\n    onValueChange,\n    children,\n    disabled,\n    ...rest\n  } = props;\n\n  if (hasStyledProps(rest)) {\n    // Styled-components path: preserves Box system props and\n    // styled(SegmentedControl) extensions. Mirrors the original\n    // SegmentedControl.tsx body, sharing the change handler with the\n    // Tailwind path. The variant provider (outside ToggleGroup.Root so it does\n    // not interfere with the asChild prop-merge onto SegmentedControlContainer)\n    // makes each child `.Item` render the styled `ToggleButton`, restoring the\n    // styled-components item styling that consumers on this path rely on.\n    return (\n      <SegmentedControlVariantContext.Provider value=\"styled\">\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={createChangeHandler(onChange, onValueChange)}\n          asChild\n        >\n          <SegmentedControlContainer\n            ref={ref}\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      </SegmentedControlVariantContext.Provider>\n    );\n  }\n\n  // Tailwind path (preferred - better performance)\n  return <SegmentedControlTailwind {...props} ref={ref} />;\n}) as TypeSegmentedControlComponent;\n\nSegmentedControlHybrid.displayName = \"SegmentedControl\";\nSegmentedControlHybrid.Item = SegmentedControlItem;\n\nexport default SegmentedControlHybrid;\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","/**\n * Tailwind CSS implementation of SegmentedControl component\n * Uses Seeds segmented-control CSS classes from segmented-control.css\n */\n\nimport * as React from \"react\";\nimport * as ToggleGroup from \"@radix-ui/react-toggle-group\";\nimport { ToggleButton } from \"./styles\";\nimport type {\n  TypeSegmentedControlProps,\n  TypeSegmentedControlItemProps,\n} from \"./SegmentedControlTypes\";\n\n/**\n * Identifies which rendering path the surrounding SegmentedControl took so the\n * compound `.Item` can match it. The styled-components path renders the legacy\n * styled `ToggleButton` (styled at runtime, no CSS-file dependency); the\n * Tailwind path renders the pure CSS-class button. The Hybrid Root provides\n * \"styled\" on its styled branch; the default is \"tailwind\".\n */\ntype SegmentedControlVariant = \"tailwind\" | \"styled\";\nexport const SegmentedControlVariantContext =\n  React.createContext<SegmentedControlVariant>(\"tailwind\");\n\n// Utility for merging class names properly\nfunction cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n\n/**\n * Builds the Radix `onValueChange` handler shared by both the Tailwind and the\n * styled-components paths. Preserves the deselect guard and the synthetic\n * `change` event used for `onChange` backwards compatibility.\n */\nexport function createChangeHandler(\n  onChange?: (e: React.SyntheticEvent<HTMLInputElement>) => void,\n  onValueChange?: (value: string) => void\n) {\n  return (e: string) => {\n    // Radix allows deselecting a value by clicking on it when it's already selected,\n    // but we don't want to allow that behavior in our SegmentedControl.\n    if (!e) return;\n\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\n    // 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}\n\n/**\n * Compound item routed to match the surrounding container's path.\n *\n * On the styled-components path it renders the legacy styled `ToggleButton`\n * (styled at runtime by styled-components, with no dependency on the component\n * CSS file) — this preserves backward compatibility for consumers routed to\n * the styled branch via a Box system prop or a `styled(SegmentedControl)`\n * extension. On the Tailwind path it renders the pure CSS-class button. The\n * host element is typed as `any` so Radix's `asChild`-injected props\n * (data-state, role, keyboard handlers, onClick) and any forwarded props\n * spread cleanly — mirrors ButtonTailwind's `Component as any` pattern.\n */\nexport const SegmentedControlItem = ({\n  value,\n  children,\n  disabled,\n  ...rest\n}: TypeSegmentedControlItemProps) => {\n  const variant = React.useContext(SegmentedControlVariantContext);\n\n  if (variant === \"styled\") {\n    // `Button` sets its own `type`, so we do not pass `type` here.\n    return (\n      <ToggleGroup.Item value={value} disabled={disabled} asChild>\n        <ToggleButton\n          data-qa-segmentedcontrol-item={value}\n          disabled={disabled}\n          {...rest}\n        >\n          {children}\n        </ToggleButton>\n      </ToggleGroup.Item>\n    );\n  }\n\n  const Toggle = \"button\" as any;\n\n  return (\n    <ToggleGroup.Item value={value} disabled={disabled} asChild>\n      <Toggle\n        type=\"button\"\n        data-qa-segmentedcontrol-item={value}\n        disabled={disabled}\n        {...rest}\n        className=\"seeds-segmented-control-item\"\n      >\n        {children}\n      </Toggle>\n    </ToggleGroup.Item>\n  );\n};\n\nSegmentedControlItem.displayName = \"SegmentedControl.Item\";\n\nexport const SegmentedControlTailwind = React.forwardRef<\n  HTMLDivElement,\n  TypeSegmentedControlProps\n>(\n  (\n    {\n      selectedValue,\n      label,\n      onChange,\n      onValueChange,\n      children,\n      disabled = false,\n      className,\n      ...rest\n    }: TypeSegmentedControlProps,\n    ref: React.Ref<HTMLDivElement>\n  ) => {\n    // Plain <div> container, typed as `any` so the `asChild`-merged className\n    // and any forwarded props spread cleanly — mirrors ButtonTailwind.\n    const Container = \"div\" as any;\n\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={createChangeHandler(onChange, onValueChange)}\n        asChild\n      >\n        <Container\n          ref={ref}\n          data-qa-segmentedcontrol={label}\n          data-qa-segmentedcontrol-value={selectedValue}\n          {...rest}\n          // className is set last (after {...rest}) and merges any incoming\n          // className — Radix Slot merges the Root's className onto this child,\n          // and a consumer-provided className must be preserved too.\n          className={cn(\n            \"seeds-segmented-control\",\n            { \"seeds-segmented-control-disabled\": disabled },\n            className\n          )}\n        >\n          {children}\n        </Container>\n      </ToggleGroup.Root>\n    );\n  }\n);\n\nSegmentedControlTailwind.displayName = \"SegmentedControlTailwind\";\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":"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","names":["React","React","ToggleGroup","props","disabled","jsx","disabled","jsx"]}

package/dist/index.d.mts

@@ -1,6 +1,6 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { TypeContainerProps } from '@sproutsocial/seeds-react-box';
 import * as React from 'react';
+import { TypeContainerProps } from '@sproutsocial/seeds-react-box';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface TypeSegmentedControlItemProps {
     /** The value of this item. Should be unique among sibling items. */
@@ -23,12 +23,34 @@ interface TypeSegmentedControlProps extends TypeContainerProps {
     children: React.ReactNode;
 }
 
-declare const SegmentedControl: {
-    ({ selectedValue, label, onChange, onValueChange, children, disabled, ...rest }: TypeSegmentedControlProps): react_jsx_runtime.JSX.Element;
-    Item: {
-        ({ value, children, disabled, ...rest }: TypeSegmentedControlItemProps): react_jsx_runtime.JSX.Element;
-        displayName: string;
-    };
+/**
+ * Compound item routed to match the surrounding container's path.
+ *
+ * On the styled-components path it renders the legacy styled `ToggleButton`
+ * (styled at runtime by styled-components, with no dependency on the component
+ * CSS file) — this preserves backward compatibility for consumers routed to
+ * the styled branch via a Box system prop or a `styled(SegmentedControl)`
+ * extension. On the Tailwind path it renders the pure CSS-class button. The
+ * host element is typed as `any` so Radix's `asChild`-injected props
+ * (data-state, role, keyboard handlers, onClick) and any forwarded props
+ * spread cleanly — mirrors ButtonTailwind's `Component as any` pattern.
+ */
+declare const SegmentedControlItem: {
+    ({ value, children, disabled, ...rest }: TypeSegmentedControlItemProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type TypeSegmentedControlComponent = React.ForwardRefExoticComponent<TypeSegmentedControlProps & React.RefAttributes<HTMLDivElement>> & {
+    Item: typeof SegmentedControlItem;
 };
+/**
+ * SegmentedControl routes between the Tailwind/CSS-class implementation
+ * (preferred) and the legacy styled-components implementation via the hybrid
+ * component. This entry file keeps a real component definition (mirroring
+ * Button.tsx) so react-docgen's `generate:props-docs` step can discover it and
+ * emit prop docs from TypeSegmentedControlProps. styles.ts is left untouched
+ * for the styled path.
+ */
+declare const SegmentedControl: TypeSegmentedControlComponent;
 
 export { SegmentedControl, type TypeSegmentedControlItemProps, type TypeSegmentedControlProps, SegmentedControl as default };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { TypeContainerProps } from '@sproutsocial/seeds-react-box';
 import * as React from 'react';
+import { TypeContainerProps } from '@sproutsocial/seeds-react-box';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface TypeSegmentedControlItemProps {
     /** The value of this item. Should be unique among sibling items. */
@@ -23,12 +23,34 @@ interface TypeSegmentedControlProps extends TypeContainerProps {
     children: React.ReactNode;
 }
 
-declare const SegmentedControl: {
-    ({ selectedValue, label, onChange, onValueChange, children, disabled, ...rest }: TypeSegmentedControlProps): react_jsx_runtime.JSX.Element;
-    Item: {
-        ({ value, children, disabled, ...rest }: TypeSegmentedControlItemProps): react_jsx_runtime.JSX.Element;
-        displayName: string;
-    };
+/**
+ * Compound item routed to match the surrounding container's path.
+ *
+ * On the styled-components path it renders the legacy styled `ToggleButton`
+ * (styled at runtime by styled-components, with no dependency on the component
+ * CSS file) — this preserves backward compatibility for consumers routed to
+ * the styled branch via a Box system prop or a `styled(SegmentedControl)`
+ * extension. On the Tailwind path it renders the pure CSS-class button. The
+ * host element is typed as `any` so Radix's `asChild`-injected props
+ * (data-state, role, keyboard handlers, onClick) and any forwarded props
+ * spread cleanly — mirrors ButtonTailwind's `Component as any` pattern.
+ */
+declare const SegmentedControlItem: {
+    ({ value, children, disabled, ...rest }: TypeSegmentedControlItemProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type TypeSegmentedControlComponent = React.ForwardRefExoticComponent<TypeSegmentedControlProps & React.RefAttributes<HTMLDivElement>> & {
+    Item: typeof SegmentedControlItem;
 };
+/**
+ * SegmentedControl routes between the Tailwind/CSS-class implementation
+ * (preferred) and the legacy styled-components implementation via the hybrid
+ * component. This entry file keeps a real component definition (mirroring
+ * Button.tsx) so react-docgen's `generate:props-docs` step can discover it and
+ * emit prop docs from TypeSegmentedControlProps. styles.ts is left untouched
+ * for the styled path.
+ */
+declare const SegmentedControl: TypeSegmentedControlComponent;
 
 export { SegmentedControl, type TypeSegmentedControlItemProps, type TypeSegmentedControlProps, SegmentedControl as default };

package/dist/index.js

@@ -36,9 +36,12 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/SegmentedControl.tsx
-var React = __toESM(require("react"));
-var import_react = require("react");
-var ToggleGroup = __toESM(require("@radix-ui/react-toggle-group"));
+var React3 = __toESM(require("react"));
+
+// src/SegmentedControlHybrid.tsx
+var React2 = __toESM(require("react"));
+var ToggleGroup2 = __toESM(require("@radix-ui/react-toggle-group"));
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
 
 // src/styles.ts
 var import_styled_components = __toESM(require("styled-components"));
@@ -135,76 +138,168 @@ var SegmentedControlLabel = (0, import_styled_components.default)(import_seeds_r
     `}
 `;
 
-// src/SegmentedControl.tsx
+// src/SegmentedControlTailwind.tsx
+var React = __toESM(require("react"));
+var ToggleGroup = __toESM(require("@radix-ui/react-toggle-group"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var nameCounter = 0;
-var SegmentedControlContext = React.createContext(null);
+var SegmentedControlVariantContext = React.createContext("tailwind");
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+function createChangeHandler(onChange, onValueChange) {
+  return (e) => {
+    if (!e) return;
+    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);
+  };
+}
 var SegmentedControlItem = ({
   value,
   children,
   disabled: disabled2,
   ...rest
 }) => {
+  const variant = React.useContext(SegmentedControlVariantContext);
+  if (variant === "styled") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroup.Item, { value, disabled: disabled2, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ToggleButton,
+      {
+        "data-qa-segmentedcontrol-item": value,
+        disabled: disabled2,
+        ...rest,
+        children
+      }
+    ) });
+  }
+  const Toggle = "button";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroup.Item, { value, disabled: disabled2, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    ToggleButton,
+    Toggle,
     {
+      type: "button",
       "data-qa-segmentedcontrol-item": value,
       disabled: disabled2,
       ...rest,
+      className: "seeds-segmented-control-item",
       children
     }
   ) });
 };
-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)(
-    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: disabled2,
-      onValueChange: (e) => {
-        if (!e) return;
-        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);
-      },
-      asChild: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        SegmentedControlContainer,
-        {
-          "data-qa-segmentedcontrol": label,
-          "data-qa-segmentedcontrol-value": selectedValue,
-          disabled: disabled2,
-          ...rest,
-          children
-        }
-      )
-    }
-  );
-};
 SegmentedControlItem.displayName = "SegmentedControl.Item";
+var SegmentedControlTailwind = React.forwardRef(
+  ({
+    selectedValue,
+    label,
+    onChange,
+    onValueChange,
+    children,
+    disabled: disabled2 = false,
+    className,
+    ...rest
+  }, ref) => {
+    const Container = "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      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: disabled2,
+        onValueChange: createChangeHandler(onChange, onValueChange),
+        asChild: true,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Container,
+          {
+            ref,
+            "data-qa-segmentedcontrol": label,
+            "data-qa-segmentedcontrol-value": selectedValue,
+            ...rest,
+            className: cn(
+              "seeds-segmented-control",
+              { "seeds-segmented-control-disabled": disabled2 },
+              className
+            ),
+            children
+          }
+        )
+      }
+    );
+  }
+);
+SegmentedControlTailwind.displayName = "SegmentedControlTailwind";
+
+// src/SegmentedControlHybrid.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var SegmentedControlHybrid = React2.forwardRef((props, ref) => {
+  const {
+    selectedValue,
+    label,
+    onChange,
+    onValueChange,
+    children,
+    disabled: disabled2,
+    ...rest
+  } = props;
+  if ((0, import_seeds_react_system_props.hasStyledProps)(rest)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SegmentedControlVariantContext.Provider, { value: "styled", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      ToggleGroup2.Root,
+      {
+        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: createChangeHandler(onChange, onValueChange),
+        asChild: true,
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          SegmentedControlContainer,
+          {
+            ref,
+            "data-qa-segmentedcontrol": label,
+            "data-qa-segmentedcontrol-value": selectedValue,
+            disabled: disabled2,
+            ...rest,
+            children
+          }
+        )
+      }
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SegmentedControlTailwind, { ...props, ref });
+});
+SegmentedControlHybrid.displayName = "SegmentedControl";
+SegmentedControlHybrid.Item = SegmentedControlItem;
+var SegmentedControlHybrid_default = SegmentedControlHybrid;
+
+// src/SegmentedControl.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var SegmentedControl = React3.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SegmentedControlHybrid_default, { ...props, ref }));
+SegmentedControl.displayName = "SegmentedControl";
 SegmentedControl.Item = SegmentedControlItem;
 var SegmentedControl_default = SegmentedControl;
 
 // src/SegmentedControlTypes.ts
-var React2 = require("react");
+var React4 = require("react");
 
 // src/index.ts
 var index_default = SegmentedControl_default;