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

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 } 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"],"mappings":"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","names":["styled","Box","Button","props","disabled","React"]}
+{"version":3,"sources":["../src/index.ts","../src/SegmentedControl.tsx","../src/SegmentedControlHybrid.tsx","../src/styles.ts","../src/SegmentedControlTailwind.tsx","../src/SegmentedControlTypes.ts"],"sourcesContent":["import SegmentedControl from \"./SegmentedControl\";\n\nexport default SegmentedControl;\nexport { SegmentedControl };\nexport * from \"./SegmentedControlTypes\";\n","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"],"mappings":"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","names":["React","React","ToggleGroup","styled","Box","Button","props","disabled","import_jsx_runtime","disabled","import_jsx_runtime","React"]}

package/dist/segmented-control.css

@@ -0,0 +1,80 @@
+/**
+ * Seeds SegmentedControl component classes
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support. Dark mode works
+ * automatically because the variables below are redefined under
+ * [data-theme="dark"] in theme-all.css.
+ *
+ * Usage:
+ *   <div class="seeds-segmented-control">
+ *     <button class="seeds-segmented-control-item" data-state="on">One</button>
+ *     <button class="seeds-segmented-control-item" data-state="off">Two</button>
+ *   </div>
+ */
+
+/* Rules live in the Tailwind `components` cascade layer so that consumer
+   utility classes (which Tailwind v4 emits in the later `utilities` layer, or
+   unlayered) can override the component's own styles. Without this layer the
+   unlayered component rules would always win the cascade and classes like
+   `p-300`, `mx-200`, or `inline-flex` could not override them. */
+@layer components {
+  .seeds-segmented-control {
+    display: flex;
+    border: 1px solid var(--color-button-secondary-border-base);
+    border-radius: var(--radius-outer);
+    padding: var(--space-100);
+    font-family: var(--font-family);
+  }
+
+  .seeds-segmented-control-disabled {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+
+  .seeds-segmented-control-item {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    border: 0;
+    cursor: pointer;
+    color: var(--color-text-body);
+    background: transparent;
+    font-size: var(--font-size-200);
+    font-weight: var(--font-weight-semibold);
+    /* Matches default line height of Icon. Also matches the overall height of
+       Input, Select, and Button. */
+    line-height: 16px;
+    border-radius: var(--radius-inner);
+    /* To match the height of buttons... 350 padding - 2px top and bottom padding
+       of the parent - 1px border on top and bottom */
+    padding: calc(var(--space-350) - 6px);
+    transition: all var(--duration-fast);
+  }
+
+  .seeds-segmented-control-item + .seeds-segmented-control-item {
+    margin-left: var(--space-100);
+  }
+
+  .seeds-segmented-control-item:hover {
+    background-color: var(--color-listItem-bg-hover);
+  }
+
+  .seeds-segmented-control-item[data-state="on"] {
+    color: var(--color-text-inverse);
+    background-color: var(--color-listItem-bg-selected);
+  }
+
+  .seeds-segmented-control-item[data-state="on"]:hover {
+    background-color: var(--color-listItem-bg-selected);
+  }
+
+  .seeds-segmented-control-item:disabled,
+  .seeds-segmented-control-item[data-disabled] {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+}

package/package.json

@@ -1,15 +1,26 @@
 {
   "name": "@sproutsocial/seeds-react-segmented-control",
-  "version": "1.1.24",
+  "version": "1.1.26",
   "description": "Seeds React SegmentedControl",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./dist/segmented-control.css": "./dist/segmented-control.css"
+  },
   "scripts": {
-    "build": "tsup --dts",
-    "build:debug": "tsup --dts --metafile",
+    "build": "tsup --dts && cp src/segmented-control.css dist/segmented-control.css",
+    "build:debug": "tsup --dts --metafile && cp src/segmented-control.css dist/segmented-control.css",
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",
     "clean:modules": "rm -rf node_modules",
@@ -19,12 +30,12 @@
   },
   "dependencies": {
     "@radix-ui/react-toggle-group": "^1.0.0",
-    "@sproutsocial/seeds-react-theme": "^4.2.0",
-    "@sproutsocial/seeds-react-system-props": "^3.1.1",
-    "@sproutsocial/seeds-react-box": "^1.1.23",
-    "@sproutsocial/seeds-react-button": "^2.2.3",
-    "@sproutsocial/seeds-react-text": "^1.5.0",
-    "@sproutsocial/seeds-react-mixins": "^4.3.9"
+    "@sproutsocial/seeds-react-theme": "^4.2.1",
+    "@sproutsocial/seeds-react-system-props": "^3.1.2",
+    "@sproutsocial/seeds-react-box": "^1.1.25",
+    "@sproutsocial/seeds-react-button": "^2.2.5",
+    "@sproutsocial/seeds-react-text": "^1.5.1",
+    "@sproutsocial/seeds-react-mixins": "^4.3.10"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",

package/.eslintignore

@@ -1,6 +0,0 @@
-# Node modules
-node_modules/
-
-# Build output
-dist/
-coverage/

package/.eslintrc.js

@@ -1,4 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ["eslint-config-seeds/racine"],
-};

package/.turbo/turbo-build.log

@@ -1,21 +0,0 @@
-yarn run v1.22.22
-$ 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 Target: es2022
-CLI Cleaning output folder
-CJS Build start
-ESM Build start
-CJS dist/index.js     7.11 KB
-CJS dist/index.js.map 10.59 KB
-CJS ⚡️ Build success in 12ms
-ESM dist/esm/index.js     4.96 KB
-ESM dist/esm/index.js.map 10.51 KB
-ESM ⚡️ Build success in 12ms
-DTS Build start
-DTS ⚡️ Build success in 4325ms
-DTS dist/index.d.ts  1.66 KB
-DTS dist/index.d.mts 1.66 KB
-Done in 6.10s.

package/CHANGELOG.md

@@ -1,339 +0,0 @@
-# @sproutsocial/seeds-react-segmented-control
-
-## 1.1.24
-
-### Patch Changes
-
-- Updated dependencies [85f9728]
-- Updated dependencies [fa7d859]
-  - @sproutsocial/seeds-react-theme@4.2.0
-  - @sproutsocial/seeds-react-box@1.1.23
-  - @sproutsocial/seeds-react-mixins@4.3.9
-  - @sproutsocial/seeds-react-button@2.2.3
-
-## 1.1.23
-
-### Patch Changes
-
-- Updated dependencies [65b5879]
-  - @sproutsocial/seeds-react-text@1.5.0
-
-## 1.1.22
-
-### Patch Changes
-
-- Updated dependencies [a13a571]
-  - @sproutsocial/seeds-react-theme@4.1.1
-  - @sproutsocial/seeds-react-box@1.1.22
-  - @sproutsocial/seeds-react-mixins@4.3.8
-  - @sproutsocial/seeds-react-button@2.2.2
-
-## 1.1.21
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-button@2.2.1
-
-## 1.1.20
-
-### Patch Changes
-
-- Updated dependencies [edc1819]
-  - @sproutsocial/seeds-react-text@1.4.3
-
-## 1.1.19
-
-### Patch Changes
-
-- Updated dependencies [456a20f]
-- Updated dependencies [5892f44]
-  - @sproutsocial/seeds-react-button@2.2.0
-  - @sproutsocial/seeds-react-system-props@3.1.1
-  - @sproutsocial/seeds-react-box@1.1.21
-  - @sproutsocial/seeds-react-text@1.4.2
-
-## 1.1.18
-
-### Patch Changes
-
-- Updated dependencies [5114a32]
-- Updated dependencies [a0fe3d3]
-  - @sproutsocial/seeds-react-theme@4.1.0
-  - @sproutsocial/seeds-react-button@2.1.3
-  - @sproutsocial/seeds-react-box@1.1.20
-  - @sproutsocial/seeds-react-mixins@4.3.7
-
-## 1.1.17
-
-### Patch Changes
-
-- Updated dependencies [cb27f07]
-  - @sproutsocial/seeds-react-button@2.1.2
-
-## 1.1.16
-
-### Patch Changes
-
-- Updated dependencies [40d2dfe]
-  - @sproutsocial/seeds-react-button@2.1.1
-
-## 1.1.15
-
-### Patch Changes
-
-- Updated dependencies [132ef9d]
-- Updated dependencies [132ef9d]
-- Updated dependencies [132ef9d]
-  - @sproutsocial/seeds-react-button@2.1.0
-  - @sproutsocial/seeds-react-theme@4.0.0
-  - @sproutsocial/seeds-react-system-props@3.1.0
-  - @sproutsocial/seeds-react-box@1.1.19
-  - @sproutsocial/seeds-react-mixins@4.3.6
-  - @sproutsocial/seeds-react-text@1.4.1
-
-## 1.1.14
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-button@2.0.8
-
-## 1.1.13
-
-### Patch Changes
-
-- Updated dependencies [47c62b3]
-  - @sproutsocial/seeds-react-theme@3.7.1
-  - @sproutsocial/seeds-react-box@1.1.18
-  - @sproutsocial/seeds-react-mixins@4.3.5
-  - @sproutsocial/seeds-react-button@2.0.7
-
-## 1.1.12
-
-### Patch Changes
-
-- Updated dependencies [06da9c2]
-  - @sproutsocial/seeds-react-theme@3.7.0
-  - @sproutsocial/seeds-react-box@1.1.17
-  - @sproutsocial/seeds-react-mixins@4.3.4
-  - @sproutsocial/seeds-react-button@2.0.6
-
-## 1.1.11
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-button@2.0.5
-
-## 1.1.10
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-button@2.0.4
-
-## 1.1.9
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-button@2.0.3
-
-## 1.1.8
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-button@2.0.2
-
-## 1.1.7
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-button@2.0.1
-
-## 1.1.6
-
-### Patch Changes
-
-- Updated dependencies [4ba8720]
-- Updated dependencies [df9d751]
-  - @sproutsocial/seeds-react-theme@3.6.2
-  - @sproutsocial/seeds-react-button@2.0.0
-  - @sproutsocial/seeds-react-mixins@4.3.3
-  - @sproutsocial/seeds-react-box@1.1.16
-
-## 1.1.5
-
-### Patch Changes
-
-- Updated dependencies [1f9a473]
-  - @sproutsocial/seeds-react-theme@3.6.1
-  - @sproutsocial/seeds-react-box@1.1.15
-  - @sproutsocial/seeds-react-mixins@4.3.2
-  - @sproutsocial/seeds-react-button@1.4.3
-
-## 1.1.4
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-button@1.4.2
-
-## 1.1.3
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-button@1.4.1
-
-## 1.1.2
-
-### Patch Changes
-
-- 9280f81: Remove unintentional label
-
-## 1.1.1
-
-### Patch Changes
-
-- 598356f: Correct SegmentedControl to always have a value
-
-## 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
-
-- Updated dependencies [118e300]
-  - @sproutsocial/seeds-react-theme@3.5.1
-  - @sproutsocial/seeds-react-box@1.1.13
-  - @sproutsocial/seeds-react-mixins@4.2.5
-
-## 1.0.12
-
-### Patch Changes
-
-- Updated dependencies [db6ce39]
-- Updated dependencies [20bb01b]
-  - @sproutsocial/seeds-react-theme@3.5.0
-  - @sproutsocial/seeds-react-box@1.1.12
-  - @sproutsocial/seeds-react-mixins@4.2.4
-
-## 1.0.11
-
-### Patch Changes
-
-- Updated dependencies [29ced53]
-  - @sproutsocial/seeds-react-text@1.4.0
-
-## 1.0.10
-
-### Patch Changes
-
-- Updated dependencies [7716e16]
-  - @sproutsocial/seeds-react-theme@3.4.0
-  - @sproutsocial/seeds-react-box@1.1.11
-  - @sproutsocial/seeds-react-mixins@4.2.3
-
-## 1.0.9
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-theme@3.3.2
-- @sproutsocial/seeds-react-box@1.1.10
-- @sproutsocial/seeds-react-mixins@4.2.2
-
-## 1.0.8
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-theme@3.3.1
-- @sproutsocial/seeds-react-box@1.1.9
-- @sproutsocial/seeds-react-mixins@4.2.1
-
-## 1.0.7
-
-### Patch Changes
-
-- Updated dependencies [750d1ea]
-  - @sproutsocial/seeds-react-mixins@4.2.0
-  - @sproutsocial/seeds-react-theme@3.3.0
-  - @sproutsocial/seeds-react-box@1.1.8
-
-## 1.0.6
-
-### Patch Changes
-
-- Updated dependencies [fa7579a]
-  - @sproutsocial/seeds-react-theme@3.2.1
-  - @sproutsocial/seeds-react-box@1.1.7
-  - @sproutsocial/seeds-react-mixins@4.1.6
-
-## 1.0.5
-
-### Patch Changes
-
-- Updated dependencies [8f6ba8d]
-  - @sproutsocial/seeds-react-theme@3.2.0
-  - @sproutsocial/seeds-react-box@1.1.6
-  - @sproutsocial/seeds-react-mixins@4.1.5
-
-## 1.0.4
-
-### Patch Changes
-
-- Updated dependencies [b1c3b44]
-  - @sproutsocial/seeds-react-theme@3.1.1
-  - @sproutsocial/seeds-react-box@1.1.5
-  - @sproutsocial/seeds-react-mixins@4.1.4
-
-## 1.0.3
-
-### Patch Changes
-
-- Updated dependencies [47580c4]
-  - @sproutsocial/seeds-react-theme@3.1.0
-  - @sproutsocial/seeds-react-box@1.1.4
-  - @sproutsocial/seeds-react-mixins@4.1.3
-
-## 1.0.2
-
-### Patch Changes
-
-- Updated dependencies [22e1111]
-  - @sproutsocial/seeds-react-text@1.3.2
-  - @sproutsocial/seeds-react-theme@3.0.1
-  - @sproutsocial/seeds-react-box@1.1.3
-  - @sproutsocial/seeds-react-mixins@4.1.2
-
-## 1.0.1
-
-### Patch Changes
-
-- 9fd8bac: Update dependencies to use semantic package version instead of wildcards
-- Updated dependencies [9fd8bac]
-  - @sproutsocial/seeds-react-system-props@3.0.2
-  - @sproutsocial/seeds-react-mixins@4.1.1
-  - @sproutsocial/seeds-react-theme@2.2.1
-  - @sproutsocial/seeds-react-text@1.3.1
-  - @sproutsocial/seeds-react-box@1.1.2
-
-## 1.0.0
-
-### Major Changes
-
-- d480e33: Migrated SegmentedControl to its own seeds-react-segmented-control

package/jest.config.js

@@ -1,9 +0,0 @@
-const baseConfig = require("@sproutsocial/seeds-testing");
-
-/** * @type {import('jest').Config} */
-const config = {
-  ...baseConfig,
-  displayName: "seeds-react-segmented-control",
-};
-
-module.exports = config;

package/src/SegmentedControl.stories.tsx

@@ -1,76 +0,0 @@
-import React, { useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import Box from "@sproutsocial/seeds-react-box";
-import Button from "@sproutsocial/seeds-react-button";
-import SegmentedControl from "./SegmentedControl";
-
-const meta: Meta<typeof SegmentedControl> = {
-  title: "Components/SegmentedControl",
-  component: SegmentedControl,
-};
-export default meta;
-
-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) => {
-        console.log(e);
-        setValue((e.target as HTMLInputElement).value);
-      }}
-      {...props}
-    >
-      <SegmentedControl.Item value="1">Test 1</SegmentedControl.Item>
-      <SegmentedControl.Item value="2">Test 2</SegmentedControl.Item>
-      <SegmentedControl.Item value="3">Test 3</SegmentedControl.Item>
-    </SegmentedControl>
-  );
-};
-
-export const Default: Story = {
-  render: () => (
-    <Box width={1 / 3} display="flex" alignItems="center" minWidth="25%">
-      <StatefulSegmentedControl flex="1" mr={300} />
-      <Button appearance="secondary">Some button</Button>
-    </Box>
-  ),
-};
-
-export const Disabled: Story = {
-  render: () => (
-    <Box width={1 / 3} display="flex" alignItems="center" minWidth="25%">
-      <StatefulSegmentedControl flex="1" mr={300} disabled={true} />
-      <Button appearance="secondary">Some button</Button>
-    </Box>
-  ),
-};
-
-export const DisabledItem: Story = {
-  render: () => {
-    const [value, setValue] = useState("1");
-    return (
-      <Box width={1 / 3} display="flex" alignItems="center" minWidth="25%">
-        <SegmentedControl
-          selectedValue={value}
-          label="Segmented control component"
-          onValueChange={setValue}
-          flex="1"
-        >
-          <SegmentedControl.Item value="1">Test 1</SegmentedControl.Item>
-          <SegmentedControl.Item value="2" disabled={true}>
-            Test 2
-          </SegmentedControl.Item>
-          <SegmentedControl.Item value="3">Test 3</SegmentedControl.Item>
-          <SegmentedControl.Item value="4">Test 4</SegmentedControl.Item>
-          <SegmentedControl.Item value="5">Test 5</SegmentedControl.Item>
-        </SegmentedControl>
-      </Box>
-    );
-  },
-};