@sproutsocial/seeds-react-segmented-control 1.0.0 → 1.0.1

package/.turbo/turbo-build.log

@@ -8,14 +8,14 @@ CLI Target: es2022
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     6.72 KB
+CJS dist/index.js     6.73 KB
 CJS dist/index.js.map 8.90 KB
-CJS ⚡️ Build success in 129ms
+CJS ⚡️ Build success in 232ms
 ESM dist/esm/index.js     4.47 KB
 ESM dist/esm/index.js.map 8.81 KB
-ESM ⚡️ Build success in 134ms
+ESM ⚡️ Build success in 236ms
 DTS Build start
-DTS ⚡️ Build success in 23224ms
+DTS ⚡️ Build success in 31261ms
 DTS dist/index.d.ts  1.47 KB
 DTS dist/index.d.mts 1.47 KB
-Done in 30.91s.
+Done in 39.72s.

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @sproutsocial/seeds-react-segmented-control
 
+## 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

package/dist/esm/index.js

@@ -162,9 +162,9 @@ var SegmentedControl_default = SegmentedControl;
 import "react";
 
 // src/index.ts
-var src_default = SegmentedControl_default;
+var index_default = SegmentedControl_default;
 export {
   SegmentedControl_default as SegmentedControl,
-  src_default as default
+  index_default as default
 };
 //# sourceMappingURL=index.js.map

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, 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"]}

package/dist/index.js

@@ -28,12 +28,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   SegmentedControl: () => SegmentedControl_default,
-  default: () => src_default
+  default: () => index_default
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/SegmentedControl.tsx
 var React = __toESM(require("react"));
@@ -195,7 +195,7 @@ var SegmentedControl_default = SegmentedControl;
 var React2 = require("react");
 
 // src/index.ts
-var src_default = SegmentedControl_default;
+var index_default = SegmentedControl_default;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   SegmentedControl

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, 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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-segmented-control",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Seeds React SegmentedControl",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -18,11 +18,11 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-theme": "*",
-    "@sproutsocial/seeds-react-system-props": "*",
-    "@sproutsocial/seeds-react-box": "*",
-    "@sproutsocial/seeds-react-text": "*",
-    "@sproutsocial/seeds-react-mixins": "*"
+    "@sproutsocial/seeds-react-theme": "^2.2.0",
+    "@sproutsocial/seeds-react-system-props": "^3.0.1",
+    "@sproutsocial/seeds-react-box": "^1.1.1",
+    "@sproutsocial/seeds-react-text": "^1.3.0",
+    "@sproutsocial/seeds-react-mixins": "^4.1.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",