@transferwise/components 46.45.0 → 46.46.1

package/build/radioGroup/RadioGroup.mjs

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+import Radio from '../radio/Radio.mjs';
+import { useInputAttributes } from '../inputs/contexts.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+function RadioGroup({
+  name,
+  radios,
+  selectedValue: controlledValue,
+  onChange
+}) {
+  const inputAttributes = useInputAttributes({
+    nonLabelable: true
+  });
+  const [uncontrolledValue, setUncontrolledValue] = useState(controlledValue);
+  return radios.length > 0 ? /*#__PURE__*/jsx("div", {
+    role: "radiogroup",
+    ...inputAttributes,
+    children: radios.map(({
+      value = '',
+      ...restProps
+    }, index) => /*#__PURE__*/jsx(Radio
+    // eslint-disable-next-line react/no-array-index-key
+    , {
+      ...restProps,
+      name: name,
+      value: value,
+      checked: value === uncontrolledValue,
+      onChange: nextValue => {
+        setUncontrolledValue(nextValue);
+        onChange(nextValue);
+      }
+    }, index))
+  }) : null;
+}
+
+export { RadioGroup as default };
+//# sourceMappingURL=RadioGroup.mjs.map

package/build/radioGroup/RadioGroup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.mjs","sources":["../../src/radioGroup/RadioGroup.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport Radio from '../radio';\nimport { RadioProps } from '../radio/Radio';\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type RadioGroupRadio<T extends string | number = string> = Omit<\n  RadioProps<T>,\n  'name' | 'checked' | 'onChange' | 'className'\n>;\n\nexport interface RadioGroupProps<T extends string | number = string> {\n  name: string;\n  radios: readonly RadioGroupRadio<T>[];\n  selectedValue?: T; // TODO: `NoInfer<T>` from TypeScript 5.4\n  onChange: NonNullable<RadioProps<T>['onChange']>;\n}\n\nexport default function RadioGroup<T extends string | number = never>({\n  name,\n  radios,\n  selectedValue: controlledValue,\n  onChange,\n}: RadioGroupProps<T>) {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n  const [uncontrolledValue, setUncontrolledValue] = useState(controlledValue);\n\n  return radios.length > 0 ? (\n    <div role=\"radiogroup\" {...inputAttributes}>\n      {radios.map(({ value = '' as T, ...restProps }, index) => (\n        <Radio\n          // eslint-disable-next-line react/no-array-index-key\n          key={index}\n          {...restProps}\n          name={name}\n          value={value}\n          checked={value === uncontrolledValue}\n          onChange={(nextValue) => {\n            setUncontrolledValue(nextValue);\n            onChange(nextValue);\n          }}\n        />\n      ))}\n    </div>\n  ) : null;\n}\n"],"names":["RadioGroup","name","radios","selectedValue","controlledValue","onChange","inputAttributes","useInputAttributes","nonLabelable","uncontrolledValue","setUncontrolledValue","useState","length","_jsx","role","children","map","value","restProps","index","Radio","checked","nextValue"],"mappings":";;;;;AAkBwB,SAAAA,UAAUA,CAAoC;EACpEC,IAAI;EACJC,MAAM;AACNC,EAAAA,aAAa,EAAEC,eAAe;AAC9BC,EAAAA,QAAAA;AACmB,CAAA,EAAA;EACnB,MAAMC,eAAe,GAAGC,kBAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE,IAAA;AAAM,GAAA,CAAC,CAAA;EAElE,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGC,QAAQ,CAACP,eAAe,CAAC,CAAA;AAE3E,EAAA,OAAOF,MAAM,CAACU,MAAM,GAAG,CAAC,gBACtBC,GAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,IAAI,EAAC,YAAY;AAAA,IAAA,GAAKR,eAAe;AAAAS,IAAAA,QAAA,EACvCb,MAAM,CAACc,GAAG,CAAC,CAAC;AAAEC,MAAAA,KAAK,GAAG,EAAO;MAAE,GAAGC,SAAAA;AAAS,KAAE,EAAEC,KAAK,kBACnDN,GAAA,CAACO,KAAAA;AACC;AAAA,MAAA;AAAA,MAAA,GAEIF,SAAS;AACbjB,MAAAA,IAAI,EAAEA,IAAK;AACXgB,MAAAA,KAAK,EAAEA,KAAM;MACbI,OAAO,EAAEJ,KAAK,KAAKR,iBAAkB;MACrCJ,QAAQ,EAAGiB,SAAS,IAAI;QACtBZ,oBAAoB,CAACY,SAAS,CAAC,CAAA;QAC/BjB,QAAQ,CAACiB,SAAS,CAAC,CAAA;AACrB,OAAA;AAAE,KAAA,EARGH,KAQH,CAEL,CAAA;GACE,CAAC,GACJ,IAAI,CAAA;AACV;;;;"}

package/build/radioOption/RadioOption.js

@@ -0,0 +1,46 @@
+'use strict';
+
+var Option = require('../common/Option/Option.js');
+var RadioButton = require('../common/RadioButton/RadioButton.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function RadioOption({
+  'aria-label': ariaLabel,
+  media,
+  title,
+  content,
+  id,
+  name,
+  checked,
+  onChange,
+  complex,
+  disabled,
+  value = '',
+  showMediaCircle,
+  showMediaAtAllSizes,
+  isContainerAligned
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(Option, {
+    "aria-label": ariaLabel,
+    media: media,
+    title: title,
+    content: content,
+    name: name,
+    complex: complex,
+    disabled: disabled,
+    showMediaCircle: showMediaCircle,
+    showMediaAtAllSizes: showMediaAtAllSizes,
+    isContainerAligned: isContainerAligned,
+    button: /*#__PURE__*/jsxRuntime.jsx(RadioButton, {
+      id: id,
+      name: name,
+      checked: checked,
+      disabled: disabled,
+      value: value,
+      onChange: onChange
+    })
+  });
+}
+
+module.exports = RadioOption;
+//# sourceMappingURL=RadioOption.js.map

package/build/radioOption/RadioOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioOption.js","sources":["../../src/radioOption/RadioOption.tsx"],"sourcesContent":["import Option from '../common/Option';\nimport RadioButton from '../common/RadioButton';\nimport { RadioButtonProps } from '../common/RadioButton/RadioButton';\n\nexport interface RadioOptionProps<T extends string | number = string>\n  extends Required<Pick<RadioButtonProps<T>, 'id' | 'name' | 'onChange'>>,\n    Omit<RadioButtonProps<T>, 'readOnly' | 'id' | 'name' | 'onChange'> {\n  'aria-label'?: string;\n  media?: React.ReactNode;\n  title: React.ReactNode;\n  content?: React.ReactNode;\n  complex?: boolean;\n  showMediaCircle?: boolean;\n  showMediaAtAllSizes?: boolean;\n  isContainerAligned?: boolean;\n}\n\nfunction RadioOption<T extends string | number = ''>({\n  'aria-label': ariaLabel,\n  media,\n  title,\n  content,\n  id,\n  name,\n  checked,\n  onChange,\n  complex,\n  disabled,\n  value = '' as T,\n  showMediaCircle,\n  showMediaAtAllSizes,\n  isContainerAligned,\n}: RadioOptionProps<T>) {\n  return (\n    <Option\n      aria-label={ariaLabel}\n      media={media}\n      title={title}\n      content={content}\n      name={name}\n      complex={complex}\n      disabled={disabled}\n      showMediaCircle={showMediaCircle}\n      showMediaAtAllSizes={showMediaAtAllSizes}\n      isContainerAligned={isContainerAligned}\n      button={\n        <RadioButton\n          id={id}\n          name={name}\n          checked={checked}\n          disabled={disabled}\n          value={value}\n          onChange={onChange}\n        />\n      }\n    />\n  );\n}\n\nexport default RadioOption;\n"],"names":["RadioOption","ariaLabel","media","title","content","id","name","checked","onChange","complex","disabled","value","showMediaCircle","showMediaAtAllSizes","isContainerAligned","_jsx","Option","button","RadioButton"],"mappings":";;;;;;AAiBA,SAASA,WAAWA,CAAiC;AACnD,EAAA,YAAY,EAAEC,SAAS;EACvBC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,EAAE;EACFC,IAAI;EACJC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,QAAQ;AACRC,EAAAA,KAAK,GAAG,EAAO;EACfC,eAAe;EACfC,mBAAmB;AACnBC,EAAAA,kBAAAA;AACoB,CAAA,EAAA;EACpB,oBACEC,cAAA,CAACC,MAAM,EAAA;AACL,IAAA,YAAA,EAAYf,SAAU;AACtBC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,OAAO,EAAEA,OAAQ;AACjBE,IAAAA,IAAI,EAAEA,IAAK;AACXG,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBE,IAAAA,eAAe,EAAEA,eAAgB;AACjCC,IAAAA,mBAAmB,EAAEA,mBAAoB;AACzCC,IAAAA,kBAAkB,EAAEA,kBAAmB;IACvCG,MAAM,eACJF,cAAA,CAACG,WAAW,EAAA;AACVb,MAAAA,EAAE,EAAEA,EAAG;AACPC,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,OAAO,EAAEA,OAAQ;AACjBG,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,KAAK,EAAEA,KAAM;AACbH,MAAAA,QAAQ,EAAEA,QAAAA;KAEd,CAAA;AAAC,GACD,CAAA,CAAA;AAEN;;;;"}

package/build/radioOption/RadioOption.mjs

@@ -0,0 +1,44 @@
+import Option from '../common/Option/Option.mjs';
+import RadioButton from '../common/RadioButton/RadioButton.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+function RadioOption({
+  'aria-label': ariaLabel,
+  media,
+  title,
+  content,
+  id,
+  name,
+  checked,
+  onChange,
+  complex,
+  disabled,
+  value = '',
+  showMediaCircle,
+  showMediaAtAllSizes,
+  isContainerAligned
+}) {
+  return /*#__PURE__*/jsx(Option, {
+    "aria-label": ariaLabel,
+    media: media,
+    title: title,
+    content: content,
+    name: name,
+    complex: complex,
+    disabled: disabled,
+    showMediaCircle: showMediaCircle,
+    showMediaAtAllSizes: showMediaAtAllSizes,
+    isContainerAligned: isContainerAligned,
+    button: /*#__PURE__*/jsx(RadioButton, {
+      id: id,
+      name: name,
+      checked: checked,
+      disabled: disabled,
+      value: value,
+      onChange: onChange
+    })
+  });
+}
+
+export { RadioOption as default };
+//# sourceMappingURL=RadioOption.mjs.map

package/build/radioOption/RadioOption.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioOption.mjs","sources":["../../src/radioOption/RadioOption.tsx"],"sourcesContent":["import Option from '../common/Option';\nimport RadioButton from '../common/RadioButton';\nimport { RadioButtonProps } from '../common/RadioButton/RadioButton';\n\nexport interface RadioOptionProps<T extends string | number = string>\n  extends Required<Pick<RadioButtonProps<T>, 'id' | 'name' | 'onChange'>>,\n    Omit<RadioButtonProps<T>, 'readOnly' | 'id' | 'name' | 'onChange'> {\n  'aria-label'?: string;\n  media?: React.ReactNode;\n  title: React.ReactNode;\n  content?: React.ReactNode;\n  complex?: boolean;\n  showMediaCircle?: boolean;\n  showMediaAtAllSizes?: boolean;\n  isContainerAligned?: boolean;\n}\n\nfunction RadioOption<T extends string | number = ''>({\n  'aria-label': ariaLabel,\n  media,\n  title,\n  content,\n  id,\n  name,\n  checked,\n  onChange,\n  complex,\n  disabled,\n  value = '' as T,\n  showMediaCircle,\n  showMediaAtAllSizes,\n  isContainerAligned,\n}: RadioOptionProps<T>) {\n  return (\n    <Option\n      aria-label={ariaLabel}\n      media={media}\n      title={title}\n      content={content}\n      name={name}\n      complex={complex}\n      disabled={disabled}\n      showMediaCircle={showMediaCircle}\n      showMediaAtAllSizes={showMediaAtAllSizes}\n      isContainerAligned={isContainerAligned}\n      button={\n        <RadioButton\n          id={id}\n          name={name}\n          checked={checked}\n          disabled={disabled}\n          value={value}\n          onChange={onChange}\n        />\n      }\n    />\n  );\n}\n\nexport default RadioOption;\n"],"names":["RadioOption","ariaLabel","media","title","content","id","name","checked","onChange","complex","disabled","value","showMediaCircle","showMediaAtAllSizes","isContainerAligned","_jsx","Option","button","RadioButton"],"mappings":";;;;AAiBA,SAASA,WAAWA,CAAiC;AACnD,EAAA,YAAY,EAAEC,SAAS;EACvBC,KAAK;EACLC,KAAK;EACLC,OAAO;EACPC,EAAE;EACFC,IAAI;EACJC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,QAAQ;AACRC,EAAAA,KAAK,GAAG,EAAO;EACfC,eAAe;EACfC,mBAAmB;AACnBC,EAAAA,kBAAAA;AACoB,CAAA,EAAA;EACpB,oBACEC,GAAA,CAACC,MAAM,EAAA;AACL,IAAA,YAAA,EAAYf,SAAU;AACtBC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,OAAO,EAAEA,OAAQ;AACjBE,IAAAA,IAAI,EAAEA,IAAK;AACXG,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBE,IAAAA,eAAe,EAAEA,eAAgB;AACjCC,IAAAA,mBAAmB,EAAEA,mBAAoB;AACzCC,IAAAA,kBAAkB,EAAEA,kBAAmB;IACvCG,MAAM,eACJF,GAAA,CAACG,WAAW,EAAA;AACVb,MAAAA,EAAE,EAAEA,EAAG;AACPC,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,OAAO,EAAEA,OAAQ;AACjBG,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,KAAK,EAAEA,KAAM;AACbH,MAAAA,QAAQ,EAAEA,QAAAA;KAEd,CAAA;AAAC,GACD,CAAA,CAAA;AAEN;;;;"}

package/build/section/Section.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var classNames = require('classnames');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+const Section = ({
+  children,
+  className,
+  withHorizontalPadding = false
+}) => {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: classNames__default.default('np-section', className, {
+      'np-section--with-horizontal-padding': withHorizontalPadding
+    }),
+    children: children
+  });
+};
+
+module.exports = Section;
+//# sourceMappingURL=Section.js.map

package/build/section/Section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.js","sources":["../../src/section/Section.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { PropsWithChildren } from 'react';\n\nimport { CommonProps } from '../common';\n\ntype SectionProps = PropsWithChildren<\n  CommonProps & {\n    withHorizontalPadding?: boolean;\n  }\n>;\n\n/**\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Section\n *\n */\nconst Section = ({ children, className, withHorizontalPadding = false }: SectionProps) => {\n  return (\n    <div\n      className={classNames('np-section', className, {\n        'np-section--with-horizontal-padding': withHorizontalPadding,\n      })}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default Section;\n"],"names":["Section","children","className","withHorizontalPadding","_jsx","classNames"],"mappings":";;;;;;;;;AAgBMA,MAAAA,OAAO,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,SAAS;AAAEC,EAAAA,qBAAqB,GAAG,KAAA;AAAK,CAAgB,KAAI;AACvF,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AACEF,IAAAA,SAAS,EAAEG,2BAAU,CAAC,YAAY,EAAEH,SAAS,EAAE;AAC7C,MAAA,qCAAqC,EAAEC,qBAAAA;AACxC,KAAA,CAAE;AAAAF,IAAAA,QAAA,EAEFA,QAAAA;AAAQ,GACN,CAAC,CAAA;AAEV;;;;"}

package/build/section/Section.mjs

@@ -0,0 +1,18 @@
+import classNames from 'classnames';
+import { jsx } from 'react/jsx-runtime';
+
+const Section = ({
+  children,
+  className,
+  withHorizontalPadding = false
+}) => {
+  return /*#__PURE__*/jsx("div", {
+    className: classNames('np-section', className, {
+      'np-section--with-horizontal-padding': withHorizontalPadding
+    }),
+    children: children
+  });
+};
+
+export { Section as default };
+//# sourceMappingURL=Section.mjs.map

package/build/section/Section.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.mjs","sources":["../../src/section/Section.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { PropsWithChildren } from 'react';\n\nimport { CommonProps } from '../common';\n\ntype SectionProps = PropsWithChildren<\n  CommonProps & {\n    withHorizontalPadding?: boolean;\n  }\n>;\n\n/**\n *\n * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Section\n *\n */\nconst Section = ({ children, className, withHorizontalPadding = false }: SectionProps) => {\n  return (\n    <div\n      className={classNames('np-section', className, {\n        'np-section--with-horizontal-padding': withHorizontalPadding,\n      })}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default Section;\n"],"names":["Section","children","className","withHorizontalPadding","_jsx","classNames"],"mappings":";;;AAgBMA,MAAAA,OAAO,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,SAAS;AAAEC,EAAAA,qBAAqB,GAAG,KAAA;AAAK,CAAgB,KAAI;AACvF,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;AACEF,IAAAA,SAAS,EAAEG,UAAU,CAAC,YAAY,EAAEH,SAAS,EAAE;AAC7C,MAAA,qCAAqC,EAAEC,qBAAAA;AACxC,KAAA,CAAE;AAAAF,IAAAA,QAAA,EAEFA,QAAAA;AAAQ,GACN,CAAC,CAAA;AAEV;;;;"}

package/build/segmentedControl/SegmentedControl.js

@@ -0,0 +1,115 @@
+'use strict';
+
+var classNames = require('classnames');
+var React = require('react');
+var Body = require('../body/Body.js');
+var jsxRuntime = require('react/jsx-runtime');
+var typography = require('../common/propsValues/typography.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+const SegmentedControl = ({
+  name,
+  value,
+  mode = 'input',
+  segments,
+  onChange
+}) => {
+  const [animate, setAnimate] = React.useState(false);
+  const segmentsRef = React.useRef(null);
+  if (segments.length > 3) {
+    throw new Error('SegmentedControl only supports up to 3 segments. Please refer to: https://wise.design/components/segmented-control');
+  }
+  const segmentsWithRefs = segments.map(segment => ({
+    ...segment,
+    ref: /*#__PURE__*/React.createRef()
+  }));
+  const updateSegmentPosition = () => {
+    const selectedSegmentRef = segmentsWithRefs.find(segment => segment.value === value)?.ref;
+    // We grab the active segments style object from the ref
+    // and set the css variables to the selected segments width and x position.
+    // This is so we can animate the highlight to the selected segment
+    if (selectedSegmentRef?.current && segmentsRef.current) {
+      const {
+        style
+      } = segmentsRef.current;
+      style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);
+      style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);
+    }
+  };
+  React.useEffect(() => {
+    setAnimate(true);
+    updateSegmentPosition();
+    const handleWindowSizeChange = () => {
+      setAnimate(false);
+      updateSegmentPosition();
+    };
+    window.addEventListener('resize', handleWindowSizeChange);
+    return () => {
+      window.removeEventListener('resize', handleWindowSizeChange);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [segmentsWithRefs, value]);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    ref: segmentsRef,
+    "data-testid": "segmented-control",
+    className: classNames__default.default('segmented-control', {
+      'segmented-control--input': mode === 'input'
+    }),
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: classNames__default.default('segmented-control__segments', {
+        'segmented-control__segments--no-animate': !animate
+      }),
+      role: mode !== 'input' ? 'tablist' : undefined,
+      children: segmentsWithRefs.map(segment => {
+        const onSelect = () => {
+          setAnimate(true);
+          onChange(segment.value);
+        };
+        return mode === 'input' ? /*#__PURE__*/jsxRuntime.jsxs("label", {
+          ref: segment.ref,
+          htmlFor: segment.id,
+          className: classNames__default.default('segmented-control__segment', {
+            'segmented-control__selected-segment': value === segment.value
+          }),
+          children: [/*#__PURE__*/jsxRuntime.jsx("input", {
+            type: "radio",
+            className: "segmented-control__radio-input",
+            id: segment.id,
+            name: name,
+            value: segment.value,
+            checked: value === segment.value,
+            onChange: onSelect
+          }), /*#__PURE__*/jsxRuntime.jsx(Body, {
+            className: "segmented-control__text",
+            as: "span",
+            type: value === segment.value ? typography.Typography.BODY_DEFAULT_BOLD : typography.Typography.BODY_DEFAULT,
+            children: segment.label
+          })]
+        }, segment.id) : /*#__PURE__*/jsxRuntime.jsx("button", {
+          ref: segment.ref,
+          type: "button",
+          role: "tab",
+          id: segment.id,
+          "aria-controls": segment.controls,
+          "aria-selected": value === segment.value,
+          className: classNames__default.default('segmented-control__segment', 'segmented-control__button', {
+            'segmented-control__selected-segment': value === segment.value
+          }),
+          onClick: onSelect,
+          children: /*#__PURE__*/jsxRuntime.jsx(Body, {
+            as: "span",
+            className: "segmented-control__text",
+            type: value === segment.value ? typography.Typography.BODY_DEFAULT_BOLD : typography.Typography.BODY_DEFAULT,
+            children: segment.label
+          })
+        }, segment.id);
+      })
+    })
+  });
+};
+
+module.exports = SegmentedControl;
+//# sourceMappingURL=SegmentedControl.js.map

package/build/segmentedControl/SegmentedControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.js","sources":["../../src/segmentedControl/SegmentedControl.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { createRef, useEffect, useRef, useState } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\n\ntype SegmentBase = { id: string; label: string; value: string };\n\ntype Segment = SegmentBase & { controls?: never };\ntype SegmentWithControls = SegmentBase & { controls: string };\n\nexport type Segments = readonly Segment[] | readonly SegmentWithControls[];\n\ntype SegmentedControlPropsBase = {\n  name: string;\n  value: string;\n  mode: 'input' | 'view';\n  onChange: (value: string) => void;\n};\n\ntype SegmentedControlViewProps = {\n  mode: 'view';\n  segments: readonly SegmentWithControls[];\n};\n\ntype SegmentedControlInputProps = {\n  mode: 'input';\n  segments: readonly Segment[];\n};\n\nexport type SegmentedControlProps = SegmentedControlPropsBase &\n  (SegmentedControlViewProps | SegmentedControlInputProps);\n\nconst SegmentedControl = ({\n  name,\n  value,\n  mode = 'input',\n  segments,\n  onChange,\n}: SegmentedControlProps) => {\n  const [animate, setAnimate] = useState(false);\n\n  const segmentsRef = useRef<HTMLDivElement>(null);\n\n  if (segments.length > 3) {\n    throw new Error(\n      'SegmentedControl only supports up to 3 segments. Please refer to: https://wise.design/components/segmented-control',\n    );\n  }\n\n  const segmentsWithRefs = segments.map((segment) => ({\n    ...segment,\n    ref: createRef<HTMLLabelElement | HTMLButtonElement>(),\n  }));\n\n  const updateSegmentPosition = () => {\n    const selectedSegmentRef = segmentsWithRefs.find((segment) => segment.value === value)?.ref;\n\n    // We grab the active segments style object from the ref\n    // and set the css variables to the selected segments width and x position.\n    // This is so we can animate the highlight to the selected segment\n    if (selectedSegmentRef?.current && segmentsRef.current) {\n      const { style } = segmentsRef.current;\n      style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);\n      style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);\n    }\n  };\n\n  useEffect(() => {\n    setAnimate(true);\n    updateSegmentPosition();\n\n    const handleWindowSizeChange = () => {\n      setAnimate(false);\n      updateSegmentPosition();\n    };\n\n    window.addEventListener('resize', handleWindowSizeChange);\n    return () => {\n      window.removeEventListener('resize', handleWindowSizeChange);\n    };\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [segmentsWithRefs, value]);\n\n  return (\n    <div\n      ref={segmentsRef}\n      data-testid=\"segmented-control\"\n      className={classNames('segmented-control', {\n        'segmented-control--input': mode === 'input',\n      })}\n    >\n      <div\n        className={classNames('segmented-control__segments', {\n          'segmented-control__segments--no-animate': !animate,\n        })}\n        role={mode !== 'input' ? 'tablist' : undefined}\n      >\n        {segmentsWithRefs.map((segment) => {\n          const onSelect = () => {\n            setAnimate(true);\n            onChange(segment.value);\n          };\n          return mode === 'input' ? (\n            <label\n              ref={segment.ref as React.MutableRefObject<HTMLLabelElement | null>}\n              key={segment.id}\n              htmlFor={segment.id}\n              className={classNames('segmented-control__segment', {\n                'segmented-control__selected-segment': value === segment.value,\n              })}\n            >\n              <input\n                type=\"radio\"\n                className=\"segmented-control__radio-input\"\n                id={segment.id}\n                name={name}\n                value={segment.value}\n                checked={value === segment.value}\n                onChange={onSelect}\n              />\n              <Body\n                className=\"segmented-control__text\"\n                as=\"span\"\n                type={\n                  value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n                }\n              >\n                {segment.label}\n              </Body>\n            </label>\n          ) : (\n            <button\n              ref={segment.ref as React.MutableRefObject<HTMLButtonElement | null>}\n              key={segment.id}\n              type=\"button\"\n              role=\"tab\"\n              id={segment.id}\n              aria-controls={segment.controls}\n              aria-selected={value === segment.value}\n              className={classNames('segmented-control__segment', 'segmented-control__button', {\n                'segmented-control__selected-segment': value === segment.value,\n              })}\n              onClick={onSelect}\n            >\n              <Body\n                as=\"span\"\n                className=\"segmented-control__text\"\n                type={\n                  value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n                }\n              >\n                {segment.label}\n              </Body>\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default SegmentedControl;\n"],"names":["SegmentedControl","name","value","mode","segments","onChange","animate","setAnimate","useState","segmentsRef","useRef","length","Error","segmentsWithRefs","map","segment","ref","createRef","updateSegmentPosition","selectedSegmentRef","find","current","style","setProperty","offsetWidth","offsetLeft","useEffect","handleWindowSizeChange","window","addEventListener","removeEventListener","_jsx","className","classNames","children","role","undefined","onSelect","_jsxs","htmlFor","id","type","checked","Body","as","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","label","controls","onClick"],"mappings":"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"}

package/build/segmentedControl/SegmentedControl.mjs

@@ -0,0 +1,109 @@
+import classNames from 'classnames';
+import { useState, useRef, createRef, useEffect } from 'react';
+import Body from '../body/Body.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Typography } from '../common/propsValues/typography.mjs';
+
+const SegmentedControl = ({
+  name,
+  value,
+  mode = 'input',
+  segments,
+  onChange
+}) => {
+  const [animate, setAnimate] = useState(false);
+  const segmentsRef = useRef(null);
+  if (segments.length > 3) {
+    throw new Error('SegmentedControl only supports up to 3 segments. Please refer to: https://wise.design/components/segmented-control');
+  }
+  const segmentsWithRefs = segments.map(segment => ({
+    ...segment,
+    ref: /*#__PURE__*/createRef()
+  }));
+  const updateSegmentPosition = () => {
+    const selectedSegmentRef = segmentsWithRefs.find(segment => segment.value === value)?.ref;
+    // We grab the active segments style object from the ref
+    // and set the css variables to the selected segments width and x position.
+    // This is so we can animate the highlight to the selected segment
+    if (selectedSegmentRef?.current && segmentsRef.current) {
+      const {
+        style
+      } = segmentsRef.current;
+      style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);
+      style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);
+    }
+  };
+  useEffect(() => {
+    setAnimate(true);
+    updateSegmentPosition();
+    const handleWindowSizeChange = () => {
+      setAnimate(false);
+      updateSegmentPosition();
+    };
+    window.addEventListener('resize', handleWindowSizeChange);
+    return () => {
+      window.removeEventListener('resize', handleWindowSizeChange);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [segmentsWithRefs, value]);
+  return /*#__PURE__*/jsx("div", {
+    ref: segmentsRef,
+    "data-testid": "segmented-control",
+    className: classNames('segmented-control', {
+      'segmented-control--input': mode === 'input'
+    }),
+    children: /*#__PURE__*/jsx("div", {
+      className: classNames('segmented-control__segments', {
+        'segmented-control__segments--no-animate': !animate
+      }),
+      role: mode !== 'input' ? 'tablist' : undefined,
+      children: segmentsWithRefs.map(segment => {
+        const onSelect = () => {
+          setAnimate(true);
+          onChange(segment.value);
+        };
+        return mode === 'input' ? /*#__PURE__*/jsxs("label", {
+          ref: segment.ref,
+          htmlFor: segment.id,
+          className: classNames('segmented-control__segment', {
+            'segmented-control__selected-segment': value === segment.value
+          }),
+          children: [/*#__PURE__*/jsx("input", {
+            type: "radio",
+            className: "segmented-control__radio-input",
+            id: segment.id,
+            name: name,
+            value: segment.value,
+            checked: value === segment.value,
+            onChange: onSelect
+          }), /*#__PURE__*/jsx(Body, {
+            className: "segmented-control__text",
+            as: "span",
+            type: value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT,
+            children: segment.label
+          })]
+        }, segment.id) : /*#__PURE__*/jsx("button", {
+          ref: segment.ref,
+          type: "button",
+          role: "tab",
+          id: segment.id,
+          "aria-controls": segment.controls,
+          "aria-selected": value === segment.value,
+          className: classNames('segmented-control__segment', 'segmented-control__button', {
+            'segmented-control__selected-segment': value === segment.value
+          }),
+          onClick: onSelect,
+          children: /*#__PURE__*/jsx(Body, {
+            as: "span",
+            className: "segmented-control__text",
+            type: value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT,
+            children: segment.label
+          })
+        }, segment.id);
+      })
+    })
+  });
+};
+
+export { SegmentedControl as default };
+//# sourceMappingURL=SegmentedControl.mjs.map

package/build/segmentedControl/SegmentedControl.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.mjs","sources":["../../src/segmentedControl/SegmentedControl.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { createRef, useEffect, useRef, useState } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\n\ntype SegmentBase = { id: string; label: string; value: string };\n\ntype Segment = SegmentBase & { controls?: never };\ntype SegmentWithControls = SegmentBase & { controls: string };\n\nexport type Segments = readonly Segment[] | readonly SegmentWithControls[];\n\ntype SegmentedControlPropsBase = {\n  name: string;\n  value: string;\n  mode: 'input' | 'view';\n  onChange: (value: string) => void;\n};\n\ntype SegmentedControlViewProps = {\n  mode: 'view';\n  segments: readonly SegmentWithControls[];\n};\n\ntype SegmentedControlInputProps = {\n  mode: 'input';\n  segments: readonly Segment[];\n};\n\nexport type SegmentedControlProps = SegmentedControlPropsBase &\n  (SegmentedControlViewProps | SegmentedControlInputProps);\n\nconst SegmentedControl = ({\n  name,\n  value,\n  mode = 'input',\n  segments,\n  onChange,\n}: SegmentedControlProps) => {\n  const [animate, setAnimate] = useState(false);\n\n  const segmentsRef = useRef<HTMLDivElement>(null);\n\n  if (segments.length > 3) {\n    throw new Error(\n      'SegmentedControl only supports up to 3 segments. Please refer to: https://wise.design/components/segmented-control',\n    );\n  }\n\n  const segmentsWithRefs = segments.map((segment) => ({\n    ...segment,\n    ref: createRef<HTMLLabelElement | HTMLButtonElement>(),\n  }));\n\n  const updateSegmentPosition = () => {\n    const selectedSegmentRef = segmentsWithRefs.find((segment) => segment.value === value)?.ref;\n\n    // We grab the active segments style object from the ref\n    // and set the css variables to the selected segments width and x position.\n    // This is so we can animate the highlight to the selected segment\n    if (selectedSegmentRef?.current && segmentsRef.current) {\n      const { style } = segmentsRef.current;\n      style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);\n      style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);\n    }\n  };\n\n  useEffect(() => {\n    setAnimate(true);\n    updateSegmentPosition();\n\n    const handleWindowSizeChange = () => {\n      setAnimate(false);\n      updateSegmentPosition();\n    };\n\n    window.addEventListener('resize', handleWindowSizeChange);\n    return () => {\n      window.removeEventListener('resize', handleWindowSizeChange);\n    };\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [segmentsWithRefs, value]);\n\n  return (\n    <div\n      ref={segmentsRef}\n      data-testid=\"segmented-control\"\n      className={classNames('segmented-control', {\n        'segmented-control--input': mode === 'input',\n      })}\n    >\n      <div\n        className={classNames('segmented-control__segments', {\n          'segmented-control__segments--no-animate': !animate,\n        })}\n        role={mode !== 'input' ? 'tablist' : undefined}\n      >\n        {segmentsWithRefs.map((segment) => {\n          const onSelect = () => {\n            setAnimate(true);\n            onChange(segment.value);\n          };\n          return mode === 'input' ? (\n            <label\n              ref={segment.ref as React.MutableRefObject<HTMLLabelElement | null>}\n              key={segment.id}\n              htmlFor={segment.id}\n              className={classNames('segmented-control__segment', {\n                'segmented-control__selected-segment': value === segment.value,\n              })}\n            >\n              <input\n                type=\"radio\"\n                className=\"segmented-control__radio-input\"\n                id={segment.id}\n                name={name}\n                value={segment.value}\n                checked={value === segment.value}\n                onChange={onSelect}\n              />\n              <Body\n                className=\"segmented-control__text\"\n                as=\"span\"\n                type={\n                  value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n                }\n              >\n                {segment.label}\n              </Body>\n            </label>\n          ) : (\n            <button\n              ref={segment.ref as React.MutableRefObject<HTMLButtonElement | null>}\n              key={segment.id}\n              type=\"button\"\n              role=\"tab\"\n              id={segment.id}\n              aria-controls={segment.controls}\n              aria-selected={value === segment.value}\n              className={classNames('segmented-control__segment', 'segmented-control__button', {\n                'segmented-control__selected-segment': value === segment.value,\n              })}\n              onClick={onSelect}\n            >\n              <Body\n                as=\"span\"\n                className=\"segmented-control__text\"\n                type={\n                  value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT\n                }\n              >\n                {segment.label}\n              </Body>\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default SegmentedControl;\n"],"names":["SegmentedControl","name","value","mode","segments","onChange","animate","setAnimate","useState","segmentsRef","useRef","length","Error","segmentsWithRefs","map","segment","ref","createRef","updateSegmentPosition","selectedSegmentRef","find","current","style","setProperty","offsetWidth","offsetLeft","useEffect","handleWindowSizeChange","window","addEventListener","removeEventListener","_jsx","className","classNames","children","role","undefined","onSelect","_jsxs","htmlFor","id","type","checked","Body","as","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","label","controls","onClick"],"mappings":"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"}