@ntbjs/react-components 2.0.14 → 3.0.0-rc.2

package/build/inputs/Radio/Radio.js

@@ -1,15 +1,14 @@
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useMemo } from 'react';
 import { nanoid } from 'nanoid';
-import PropTypes from 'prop-types';
 import { Radio as Radio$1, RadioLabel } from './Radio.styled.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 const Radio = React__default.forwardRef(function Radio({
   name,
   value,
   checked,
   defaultChecked,
-  disabled,
+  disabled = false,
   readOnly,
   label,
   className,
@@ -28,42 +27,30 @@ const Radio = React__default.forwardRef(function Radio({
       onChange(e);
     }
   };
-  return React__default.createElement(Radio$1, {
+  return jsxs(Radio$1, {
     htmlFor: uniqueId,
     disabled: disabled,
     readOnly: readOnly,
     $isChecked: checked,
     className: className,
-    style: style
-  }, React__default.createElement("input", _extends({
-    ref: forwardedRef,
-    type: "radio",
-    name: name,
-    value: value,
-    checked: checked,
-    defaultChecked: defaultChecked,
-    disabled: disabled,
-    id: uniqueId,
-    onChange: handleChange,
-    onBlur: onBlur
-  }, rest)), React__default.createElement(RadioLabel, null, label));
+    style: style,
+    children: [jsx("input", {
+      ref: forwardedRef,
+      type: "radio",
+      name: name,
+      value: value,
+      checked: checked,
+      defaultChecked: defaultChecked,
+      disabled: disabled,
+      id: uniqueId,
+      onChange: handleChange,
+      onBlur: onBlur,
+      ...rest
+    }), jsx(RadioLabel, {
+      children: label
+    })]
+  });
 });
-Radio.propTypes = process.env.NODE_ENV !== "production" ? {
-  label: PropTypes.any,
-  name: PropTypes.string.isRequired,
-  value: PropTypes.any.isRequired,
-  checked: PropTypes.bool,
-  defaultChecked: PropTypes.bool,
-  disabled: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  className: PropTypes.string,
-  style: PropTypes.object,
-  onChange: PropTypes.func,
-  onBlur: PropTypes.func
-} : {};
-Radio.defaultProps = {
-  disabled: false
-};
 
 export { Radio as default };
 //# sourceMappingURL=Radio.js.map

package/build/inputs/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../../src/components/inputs/Radio/Radio.js"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { nanoid } from 'nanoid';\nimport PropTypes from 'prop-types';\n\nimport * as S from './Radio.styled';\n\n/**\n * Radio buttons allow the user to select one option from a set.\n *\n * Use radio buttons when the user needs to see all available options. If available options can be\n * collapsed, consider using a dropdown menu because it uses less space.\n *\n * Radio buttons should have the most commonly used option selected by default.\n *\n * ### Import\n *\n * ``` js\n * import { Radio } from '@ntbjs/react-components/inputs'\n * // or\n * import Radio from '@ntbjs/react-components/inputs/Radio'\n * ```\n */\nconst Radio = React.forwardRef(function Radio(\n  {\n    name,\n    value,\n    checked,\n    defaultChecked,\n    disabled,\n    readOnly,\n    label,\n    className,\n    style,\n    onChange,\n    onBlur,\n    ...rest\n  },\n  forwardedRef\n) {\n  const uniqueId = useMemo(() => nanoid(), []);\n\n  const handleChange = e => {\n    // Prevent onChange when readOnly\n    if (readOnly) {\n      e.preventDefault();\n      return;\n    }\n    if (onChange) {\n      onChange(e);\n    }\n  };\n\n  return (\n    <S.Radio\n      htmlFor={uniqueId}\n      disabled={disabled}\n      readOnly={readOnly}\n      $isChecked={checked}\n      className={className}\n      style={style}\n    >\n      <input\n        ref={forwardedRef}\n        type=\"radio\"\n        name={name}\n        value={value}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        id={uniqueId}\n        onChange={handleChange}\n        onBlur={onBlur}\n        {...rest}\n      />\n      <S.RadioLabel>{label}</S.RadioLabel>\n    </S.Radio>\n  );\n});\n\nRadio.propTypes = {\n  /**\n   * Text displayed by the radio button\n   */\n  label: PropTypes.any,\n\n  /**\n   * Name of the radio button (used when sending form data)\n   */\n  name: PropTypes.string.isRequired,\n\n  /**\n   * Value to be sent when the given radio button is selected\n   */\n  value: PropTypes.any.isRequired,\n\n  /**\n   * Whether the radio button is checked\n   */\n  checked: PropTypes.bool,\n\n  /**\n   * Whether the radio button is checked by default. The most commonly used option should have this set to `true`.\n   */\n  defaultChecked: PropTypes.bool,\n\n  /**\n   * Whether the radio button is disabled\n   */\n  disabled: PropTypes.bool,\n\n  /**\n   * Display the radio button as read-only\n   */\n  readOnly: PropTypes.bool,\n\n  /**\n   * Custom class names for the HTML element\n   */\n  className: PropTypes.string,\n\n  /**\n   * Custom inline CSS styling\n   */\n  style: PropTypes.object,\n\n  /**\n   * Optional callback function for the `onChange` event\n   */\n  onChange: PropTypes.func,\n\n  /**\n   * Optional callback function for the `onBlur` event\n   */\n  onBlur: PropTypes.func\n};\n\nRadio.defaultProps = {\n  disabled: false\n};\n\nexport default Radio;\n"],"names":["Radio","React","forwardRef","name","value","checked","defaultChecked","disabled","readOnly","label","className","style","onChange","onBlur","rest","forwardedRef","uniqueId","useMemo","nanoid","handleChange","e","preventDefault","createElement","S","htmlFor","$isChecked","_extends","ref","type","id","propTypes","process","env","NODE_ENV","PropTypes","any","string","isRequired","bool","object","func","defaultProps"],"mappings":";;;;;;AAuBMA,MAAAA,KAAK,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,KAAKA,CAC3C;EACEG,IAAI;EACJC,KAAK;EACLC,OAAO;EACPC,cAAc;EACdC,QAAQ;EACRC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,KAAK;EACLC,QAAQ;EACRC,MAAM;EACN,GAAGC,IAAAA;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,QAAQ,GAAGC,OAAO,CAAC,MAAMC,MAAM,EAAE,EAAE,EAAE,CAAC,CAAA;EAE5C,MAAMC,YAAY,GAAGC,CAAC,IAAI;AAExB,IAAA,IAAIZ,QAAQ,EAAE;MACZY,CAAC,CAACC,cAAc,EAAE,CAAA;AAClB,MAAA,OAAA;AACF,KAAA;AACA,IAAA,IAAIT,QAAQ,EAAE;MACZA,QAAQ,CAACQ,CAAC,CAAC,CAAA;AACb,KAAA;GACD,CAAA;AAED,EAAA,OACEnB,cAAA,CAAAqB,aAAA,CAACC,OAAO,EAAA;AACNC,IAAAA,OAAO,EAAER,QAAS;AAClBT,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBiB,IAAAA,UAAU,EAAEpB,OAAQ;AACpBK,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,KAAK,EAAEA,KAAAA;AAAM,GAAA,EAEbV,cAAA,CAAAqB,aAAA,CAAA,OAAA,EAAAI,QAAA,CAAA;AACEC,IAAAA,GAAG,EAAEZ,YAAa;AAClBa,IAAAA,IAAI,EAAC,OAAO;AACZzB,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,cAAc,EAAEA,cAAe;AAC/BC,IAAAA,QAAQ,EAAEA,QAAS;AACnBsB,IAAAA,EAAE,EAAEb,QAAS;AACbJ,IAAAA,QAAQ,EAAEO,YAAa;AACvBN,IAAAA,MAAM,EAAEA,MAAAA;AAAO,GAAA,EACXC,IAAI,CACT,CAAC,EACFb,cAAA,CAAAqB,aAAA,CAACC,UAAY,EAAEd,IAAAA,EAAAA,KAAoB,CAC5B,CAAC,CAAA;AAEd,CAAC,EAAC;AAEFT,KAAK,CAAC8B,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;EAIhBxB,KAAK,EAAEyB,SAAS,CAACC,GAAG;AAKpBhC,EAAAA,IAAI,EAAE+B,SAAS,CAACE,MAAM,CAACC,UAAU;AAKjCjC,EAAAA,KAAK,EAAE8B,SAAS,CAACC,GAAG,CAACE,UAAU;EAK/BhC,OAAO,EAAE6B,SAAS,CAACI,IAAI;EAKvBhC,cAAc,EAAE4B,SAAS,CAACI,IAAI;EAK9B/B,QAAQ,EAAE2B,SAAS,CAACI,IAAI;EAKxB9B,QAAQ,EAAE0B,SAAS,CAACI,IAAI;EAKxB5B,SAAS,EAAEwB,SAAS,CAACE,MAAM;EAK3BzB,KAAK,EAAEuB,SAAS,CAACK,MAAM;EAKvB3B,QAAQ,EAAEsB,SAAS,CAACM,IAAI;EAKxB3B,MAAM,EAAEqB,SAAS,CAACM,IAAAA;AACpB,CAAC,GAAA,EAAA,CAAA;AAEDxC,KAAK,CAACyC,YAAY,GAAG;AACnBlC,EAAAA,QAAQ,EAAE,KAAA;AACZ,CAAC;;;;"}
+{"version":3,"file":"Radio.js","sources":["../../../src/components/inputs/Radio/Radio.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { nanoid } from 'nanoid';\n\nimport * as S from './Radio.styled';\n\ntype RadioOwnProps = {\n  /**\n   * Text displayed by the radio button\n   */\n  label?: any;\n  /**\n   * Name of the radio button (used when sending form data)\n   */\n  name: string;\n  /**\n   * Value to be sent when the given radio button is selected\n   */\n  value: any;\n  /**\n   * Whether the radio button is checked\n   */\n  checked?: boolean;\n  /**\n   * Whether the radio button is checked by default. The most commonly used option should have this set to `true`.\n   */\n  defaultChecked?: boolean;\n  /**\n   * Whether the radio button is disabled\n   */\n  disabled?: boolean;\n  /**\n   * Display the radio button as read-only\n   */\n  readOnly?: boolean;\n  /**\n   * Custom class names for the HTML element\n   */\n  className?: string;\n  /**\n   * Custom inline CSS styling\n   */\n  style?: any;\n  /**\n   * Optional callback function for the `onChange` event\n   */\n  onChange?: (...args: any[]) => any;\n  /**\n   * Optional callback function for the `onBlur` event\n   */\n  onBlur?: (...args: any[]) => any;\n};\n\n// Rest spreads onto input; use Omit+intersection to widen, not narrow, colliding props.\ntype Props = Omit<React.ComponentPropsWithoutRef<'input'>, keyof RadioOwnProps> & RadioOwnProps;\n\n/**\n * Radio buttons allow the user to select one option from a set.\n *\n * Use radio buttons when the user needs to see all available options. If available options can be\n * collapsed, consider using a dropdown menu because it uses less space.\n *\n * Radio buttons should have the most commonly used option selected by default.\n *\n * ### Import\n *\n * ``` js\n * import { Radio } from '@ntbjs/react-components/inputs'\n * // or\n * import Radio from '@ntbjs/react-components/inputs/Radio'\n * ```\n */\nconst Radio = React.forwardRef<any, Props>(function Radio(\n  {\n    name,\n    value,\n    checked,\n    defaultChecked,\n    disabled = false,\n    readOnly,\n    label,\n    className,\n    style,\n    onChange,\n    onBlur,\n    ...rest\n  },\n  forwardedRef\n) {\n  const uniqueId = useMemo(() => nanoid(), []);\n\n  const handleChange = e => {\n    // Prevent onChange when readOnly\n    if (readOnly) {\n      e.preventDefault();\n      return;\n    }\n    if (onChange) {\n      onChange(e);\n    }\n  };\n\n  return (\n    <S.Radio\n      htmlFor={uniqueId}\n      disabled={disabled}\n      readOnly={readOnly}\n      $isChecked={checked}\n      className={className}\n      style={style}\n    >\n      <input\n        ref={forwardedRef}\n        type=\"radio\"\n        name={name}\n        value={value}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        id={uniqueId}\n        onChange={handleChange}\n        onBlur={onBlur}\n        {...rest}\n      />\n      <S.RadioLabel>{label}</S.RadioLabel>\n    </S.Radio>\n  );\n});\n\nexport default Radio;\n"],"names":["Radio","React","forwardRef","name","value","checked","defaultChecked","disabled","readOnly","label","className","style","onChange","onBlur","rest","forwardedRef","uniqueId","useMemo","nanoid","handleChange","e","preventDefault","_jsxs","S","htmlFor","$isChecked","children","_jsx","ref","type","id"],"mappings":";;;;;AAwEA,MAAMA,KAAK,GAAGC,cAAK,CAACC,UAAU,CAAa,SAASF,KAAKA,CACvD;EACEG,IAAI;EACJC,KAAK;EACLC,OAAO;EACPC,cAAc;AACdC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,KAAK;EACLC,QAAQ;EACRC,MAAM;EACN,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;EACA,MAAMC,QAAQ,GAAGC,OAAO,CAAC,MAAMC,MAAM,EAAE,EAAE,EAAE,CAAC;EAE5C,MAAMC,YAAY,GAAGC,CAAC,IAAI;AAExB,IAAA,IAAIZ,QAAQ,EAAE;MACZY,CAAC,CAACC,cAAc,EAAE;AAClB,MAAA;AACF,IAAA;AACA,IAAA,IAAIT,QAAQ,EAAE;MACZA,QAAQ,CAACQ,CAAC,CAAC;AACb,IAAA;EACF,CAAC;AAED,EAAA,OACEE,IAAA,CAACC,OAAO,EAAA;AACNC,IAAAA,OAAO,EAAER,QAAS;AAClBT,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBiB,IAAAA,UAAU,EAAEpB,OAAQ;AACpBK,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,KAAK,EAAEA,KAAM;AAAAe,IAAAA,QAAA,GAEbC,GAAA,CAAA,OAAA,EAAA;AACEC,MAAAA,GAAG,EAAEb,YAAa;AAClBc,MAAAA,IAAI,EAAC,OAAO;AACZ1B,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,OAAO,EAAEA,OAAQ;AACjBC,MAAAA,cAAc,EAAEA,cAAe;AAC/BC,MAAAA,QAAQ,EAAEA,QAAS;AACnBuB,MAAAA,EAAE,EAAEd,QAAS;AACbJ,MAAAA,QAAQ,EAAEO,YAAa;AACvBN,MAAAA,MAAM,EAAEA,MAAO;MAAA,GACXC;AAAI,KACT,CAAC,EACFa,GAAA,CAACJ,UAAY,EAAA;AAAAG,MAAAA,QAAA,EAAEjB;AAAK,KAAe,CAAC;AAAA,GAC7B,CAAC;AAEd,CAAC;;;;"}

package/build/inputs/Radio/Radio.styled.js

@@ -2,103 +2,22 @@ import { math } from 'polished';
 import styled, { css } from 'styled-components';
 import { applyDefaultTheme } from '../../utils/defaultTheme.js';
 
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
 const radioSize = '18px';
-const RadioLabel = styled.div.attrs(applyDefaultTheme)`
-  padding-left: ${math(`${radioSize} + 10px`)};
-  font-weight: 400;
-  font-size: 0.875rem;
-  pointer-events: none;
-
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'))};
-`;
-const Radio = styled.label.attrs(applyDefaultTheme)`
-  display: block;
-  position: relative;
-  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
-  line-height: ${radioSize};
-  user-select: none;
-
-  input[type='radio'] {
-    position: absolute;
-    opacity: 0;
-    width: ${radioSize};
-    height: ${radioSize};
-    margin: 0;
-    cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
-    z-index: 1;
-  }
-
-  &::before {
-    content: '';
-    position: absolute;
-    border: 2px solid ${props => props.theme.getColor('gray-300')};
-    width: ${radioSize};
-    height: ${radioSize};
-    top: 0;
-    left: 0;
-    border-radius: 50%;
-    transition: all 200ms;
-    box-sizing: border-box;
-    pointer-events: none;
-
-    /* Apply checked styling based on $isChecked prop */
-    ${props => props.$isChecked && css`
-        border-color: ${props.theme.getColor('emerald-500')};
-      `}
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    width: 8px;
-    height: 8px;
-    top: 5px;
-    left: 5px;
-    border-radius: 50%;
-    background: transparent;
-    transform: scale(0);
-    transition: all 200ms;
-    pointer-events: none;
-
-    /* Apply checked styling based on $isChecked prop */
-    ${props => props.$isChecked && css`
-        background: ${props.theme.getColor('emerald-500')};
-        transform: scale(1);
-      `}
-  }
-
-  /* Fallback: :has() selector for browsers that support it */
-  &:has(input[type='radio']:checked) {
-    &::before {
-      border-color: ${props => props.theme.getColor('emerald-500')};
-    }
-
-    &::after {
-      background: ${props => props.theme.getColor('emerald-500')};
-      transform: scale(1);
-    }
-  }
-
-  input[type='radio']:checked + ${RadioLabel} {
-    opacity: 1;
-  }
-
-  ${props => props.readOnly && css`
-      opacity: 0.5;
-      pointer-events: none;
-      user-select: text;
-    `}
-
-  ${props => props.disabled && css`
-      opacity: 0.5;
-      cursor: not-allowed;
-      user-select: text;
-
-      input[type='radio'] {
-        cursor: not-allowed;
-      }
-    `}
-`;
+const RadioLabel = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "Radiostyled__RadioLabel",
+  componentId: "sc-1ikso9o-0"
+})(["padding-left:", ";font-weight:400;font-size:0.875rem;pointer-events:none;", ";"], math(`${radioSize} + 10px`), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600')));
+const Radio = styled.label.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "Radiostyled__Radio",
+  componentId: "sc-1ikso9o-1"
+})(["display:block;position:relative;cursor:", ";line-height:", ";user-select:none;input[type='radio']{position:absolute;opacity:0;width:", ";height:", ";margin:0;cursor:", ";z-index:1;}&::before{content:'';position:absolute;border:2px solid ", ";width:", ";height:", ";top:0;left:0;border-radius:50%;transition:all 200ms;box-sizing:border-box;pointer-events:none;", "}&::after{content:'';position:absolute;width:8px;height:8px;top:5px;left:5px;border-radius:50%;background:transparent;transform:scale(0);transition:all 200ms;pointer-events:none;", "}&:has(input[type='radio']:checked){&::before{border-color:", ";}&::after{background:", ";transform:scale(1);}}input[type='radio']:checked + ", "{opacity:1;}", " ", ""], props => props.disabled ? 'not-allowed' : 'pointer', radioSize, radioSize, radioSize, props => props.disabled ? 'not-allowed' : 'pointer', props => props.theme.getColor('gray-300'), radioSize, radioSize, props => props.$isChecked && css(["border-color:", ";"], props.theme.getColor('emerald-500')), props => props.$isChecked && css(["background:", ";transform:scale(1);"], props.theme.getColor('emerald-500')), props => props.theme.getColor('emerald-500'), props => props.theme.getColor('emerald-500'), RadioLabel, props => props.readOnly && css(["opacity:0.5;pointer-events:none;user-select:text;"]), props => props.disabled && css(["opacity:0.5;cursor:not-allowed;user-select:text;input[type='radio']{cursor:not-allowed;}"]));
 
 export { Radio, RadioLabel };
 //# sourceMappingURL=Radio.styled.js.map

package/build/inputs/Radio/Radio.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.styled.js","sources":["../../../src/components/inputs/Radio/Radio.styled.js"],"sourcesContent":["import { math } from 'polished';\nimport styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nconst radioSize = '18px';\n\nexport const RadioLabel = styled.div.attrs(applyDefaultTheme)`\n  padding-left: ${math(`${radioSize} + 10px`)};\n  font-weight: 400;\n  font-size: 0.875rem;\n  pointer-events: none;\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-300'),\n      props.theme.getColor('gray-600')\n    )};\n`;\n\nexport const Radio = styled.label.attrs(applyDefaultTheme)`\n  display: block;\n  position: relative;\n  cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};\n  line-height: ${radioSize};\n  user-select: none;\n\n  input[type='radio'] {\n    position: absolute;\n    opacity: 0;\n    width: ${radioSize};\n    height: ${radioSize};\n    margin: 0;\n    cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};\n    z-index: 1;\n  }\n\n  &::before {\n    content: '';\n    position: absolute;\n    border: 2px solid ${props => props.theme.getColor('gray-300')};\n    width: ${radioSize};\n    height: ${radioSize};\n    top: 0;\n    left: 0;\n    border-radius: 50%;\n    transition: all 200ms;\n    box-sizing: border-box;\n    pointer-events: none;\n\n    /* Apply checked styling based on $isChecked prop */\n    ${props =>\n      props.$isChecked &&\n      css`\n        border-color: ${props.theme.getColor('emerald-500')};\n      `}\n  }\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    top: 5px;\n    left: 5px;\n    border-radius: 50%;\n    background: transparent;\n    transform: scale(0);\n    transition: all 200ms;\n    pointer-events: none;\n\n    /* Apply checked styling based on $isChecked prop */\n    ${props =>\n      props.$isChecked &&\n      css`\n        background: ${props.theme.getColor('emerald-500')};\n        transform: scale(1);\n      `}\n  }\n\n  /* Fallback: :has() selector for browsers that support it */\n  &:has(input[type='radio']:checked) {\n    &::before {\n      border-color: ${props => props.theme.getColor('emerald-500')};\n    }\n\n    &::after {\n      background: ${props => props.theme.getColor('emerald-500')};\n      transform: scale(1);\n    }\n  }\n\n  input[type='radio']:checked + ${RadioLabel} {\n    opacity: 1;\n  }\n\n  ${props =>\n    props.readOnly &&\n    css`\n      opacity: 0.5;\n      pointer-events: none;\n      user-select: text;\n    `}\n\n  ${props =>\n    props.disabled &&\n    css`\n      opacity: 0.5;\n      cursor: not-allowed;\n      user-select: text;\n\n      input[type='radio'] {\n        cursor: not-allowed;\n      }\n    `}\n`;\n"],"names":["radioSize","RadioLabel","styled","div","attrs","applyDefaultTheme","math","props","theme","themeProp","getColor","Radio","label","disabled","$isChecked","css","readOnly"],"mappings":";;;;AAIA,MAAMA,SAAS,GAAG,MAAM,CAAA;AAEjB,MAAMC,UAAU,GAAGC,MAAM,CAACC,GAAG,CAACC,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC7D,gBAAA,EAAkBC,IAAI,CAAC,CAAGN,EAAAA,SAAS,SAAS,CAAC,CAAA;AAC7C;AACA;AACA;AACA;AACA,EAAIO,EAAAA,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,OAAO,EACPF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACL,EAAC;AAEM,MAAMC,KAAK,GAAGT,MAAM,CAACU,KAAK,CAACR,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC1D;AACA;AACA,UAAYE,EAAAA,KAAK,IAAKA,KAAK,CAACM,QAAQ,GAAG,aAAa,GAAG,SAAU,CAAA;AACjE,eAAA,EAAiBb,SAAS,CAAA;AAC1B;AACA;AACA;AACA;AACA;AACA,WAAA,EAAaA,SAAS,CAAA;AACtB,YAAA,EAAcA,SAAS,CAAA;AACvB;AACA,YAAcO,EAAAA,KAAK,IAAKA,KAAK,CAACM,QAAQ,GAAG,aAAa,GAAG,SAAU,CAAA;AACnE;AACA;AACA;AACA;AACA;AACA;AACA,sBAAwBN,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,CAAA;AACjE,WAAA,EAAaV,SAAS,CAAA;AACtB,YAAA,EAAcA,SAAS,CAAA;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAA,EAAMO,KAAK,IACLA,KAAK,CAACO,UAAU,IAChBC,GAAG,CAAA;AACT,sBAAA,EAAwBR,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,aAAa,CAAC,CAAA;AAC3D,MAAO,CAAA,CAAA;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAA,EAAMH,KAAK,IACLA,KAAK,CAACO,UAAU,IAChBC,GAAG,CAAA;AACT,oBAAA,EAAsBR,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,aAAa,CAAC,CAAA;AACzD;AACA,MAAO,CAAA,CAAA;AACP;AACA;AACA;AACA;AACA;AACA,oBAAsBH,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,aAAa,CAAC,CAAA;AAClE;AACA;AACA;AACA,kBAAoBH,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,aAAa,CAAC,CAAA;AAChE;AACA;AACA;AACA;AACA,gCAAA,EAAkCT,UAAU,CAAA;AAC5C;AACA;AACA;AACA,EAAA,EAAIM,KAAK,IACLA,KAAK,CAACS,QAAQ,IACdD,GAAG,CAAA;AACP;AACA;AACA;AACA,IAAK,CAAA,CAAA;AACL;AACA,EAAA,EAAIR,KAAK,IACLA,KAAK,CAACM,QAAQ,IACdE,GAAG,CAAA;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAK,CAAA,CAAA;AACL;;;;"}
+{"version":3,"file":"Radio.styled.js","sources":["../../../src/components/inputs/Radio/Radio.styled.ts"],"sourcesContent":["import { math } from 'polished';\nimport styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\n// Single-argument only — styled-components v5.1+ and v6 disagree on the second parameter.\nconst shouldForwardProp = (prop: string): boolean => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nconst radioSize = '18px';\n\nexport const RadioLabel = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  padding-left: ${math(`${radioSize} + 10px`)};\n  font-weight: 400;\n  font-size: 0.875rem;\n  pointer-events: none;\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-300'),\n      props.theme.getColor('gray-600')\n    )};\n`;\n\n/*\n * Defect: disabled/readOnly leak to <label> DOM and are TS2339 errors; $isChecked is live in pseudo blocks.\n */\ninterface RadioStyleProps {\n  /** `checked` — passed through as the checked-state affordance. */\n  $isChecked?: boolean;\n  /** `disabled` — leaks to DOM. */\n  disabled?: boolean;\n  /** `readOnly` — leaks to DOM. */\n  readOnly?: boolean;\n}\n\nexport const Radio = styled.label\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<RadioStyleProps>(applyDefaultTheme)`\n  display: block;\n  position: relative;\n  cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};\n  line-height: ${radioSize};\n  user-select: none;\n\n  input[type='radio'] {\n    position: absolute;\n    opacity: 0;\n    width: ${radioSize};\n    height: ${radioSize};\n    margin: 0;\n    cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};\n    z-index: 1;\n  }\n\n  &::before {\n    content: '';\n    position: absolute;\n    border: 2px solid ${props => props.theme.getColor('gray-300')};\n    width: ${radioSize};\n    height: ${radioSize};\n    top: 0;\n    left: 0;\n    border-radius: 50%;\n    transition: all 200ms;\n    box-sizing: border-box;\n    pointer-events: none;\n\n    /* Apply checked styling based on $isChecked prop */\n    ${props =>\n      props.$isChecked &&\n      css`\n        border-color: ${props.theme.getColor('emerald-500')};\n      `}\n  }\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    top: 5px;\n    left: 5px;\n    border-radius: 50%;\n    background: transparent;\n    transform: scale(0);\n    transition: all 200ms;\n    pointer-events: none;\n\n    /* Apply checked styling based on $isChecked prop */\n    ${props =>\n      props.$isChecked &&\n      css`\n        background: ${props.theme.getColor('emerald-500')};\n        transform: scale(1);\n      `}\n  }\n\n  /* Fallback: :has() selector for browsers that support it */\n  &:has(input[type='radio']:checked) {\n    &::before {\n      border-color: ${props => props.theme.getColor('emerald-500')};\n    }\n\n    &::after {\n      background: ${props => props.theme.getColor('emerald-500')};\n      transform: scale(1);\n    }\n  }\n\n  input[type='radio']:checked + ${RadioLabel} {\n    opacity: 1;\n  }\n\n  ${props =>\n    props.readOnly &&\n    css`\n      opacity: 0.5;\n      pointer-events: none;\n      user-select: text;\n    `}\n\n  ${props =>\n    props.disabled &&\n    css`\n      opacity: 0.5;\n      cursor: not-allowed;\n      user-select: text;\n\n      input[type='radio'] {\n        cursor: not-allowed;\n      }\n    `}\n`;\n"],"names":["shouldForwardProp","prop","startsWith","radioSize","RadioLabel","styled","div","withConfig","attrs","applyDefaultTheme","displayName","componentId","math","props","theme","themeProp","getColor","Radio","label","disabled","$isChecked","css","readOnly"],"mappings":";;;;AAKA,MAAMA,iBAAiB,GAAIC,IAAY,IAAc;EACnD,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC;AAClD,CAAC;AAED,MAAMC,SAAS,GAAG,MAAM;AAEjB,MAAMC,UAAU,GAAGC,MAAM,CAACC,GAAG,CACjCC,UAAU,CAAC;AACVP,EAAAA;AACF,CAAC,CAAC,CACDQ,KAAK,CAACC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,yBAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,eAAA,EAAA,0DAAA,EAAA,GAAA,CAAA,EACTC,IAAI,CAAC,CAAA,EAAGT,SAAS,SAAS,CAAC,EAKzCU,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,OAAO,EACPF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC;AAeE,MAAMC,KAAK,GAAGZ,MAAM,CAACa,KAAK,CAC9BX,UAAU,CAAC;AACVP,EAAAA;AACF,CAAC,CAAC,CACDQ,KAAK,CAAkBC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,oBAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,yCAAA,EAAA,eAAA,EAAA,0EAAA,EAAA,UAAA,EAAA,mBAAA,EAAA,sEAAA,EAAA,SAAA,EAAA,UAAA,EAAA,iGAAA,EAAA,oLAAA,EAAA,6DAAA,EAAA,wBAAA,EAAA,sDAAA,EAAA,cAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EAGhCE,KAAK,IAAKA,KAAK,CAACM,QAAQ,GAAG,aAAa,GAAG,SAAU,EAChDhB,SAAS,EAMbA,SAAS,EACRA,SAAS,EAETU,KAAK,IAAKA,KAAK,CAACM,QAAQ,GAAG,aAAa,GAAG,SAAU,EAO3CN,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EACpDb,SAAS,EACRA,SAAS,EASjBU,KAAK,IACLA,KAAK,CAACO,UAAU,IAChBC,GAAG,CAAA,CAAA,eAAA,EAAA,GAAA,CAAA,EACeR,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,aAAa,CAAC,CACpD,EAiBDH,KAAK,IACLA,KAAK,CAACO,UAAU,IAChBC,GAAG,CAAA,CAAA,aAAA,EAAA,sBAAA,CAAA,EACaR,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,aAAa,CAAC,CAElD,EAMeH,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,aAAa,CAAC,EAI9CH,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,aAAa,CAAC,EAK9BZ,UAAU,EAIxCS,KAAK,IACLA,KAAK,CAACS,QAAQ,IACdD,GAAG,CAAA,CAAA,mDAAA,CAAA,CAIF,EAEDR,KAAK,IACLA,KAAK,CAACM,QAAQ,IACdE,GAAG,CAAA,CAAA,0FAAA,CAAA,CAQF;;;;"}

package/build/inputs/Switch/Switch.js

@@ -1,15 +1,15 @@
 import React__default, { useState } from 'react';
 import { nanoid } from 'nanoid';
-import PropTypes from 'prop-types';
 import { Switch as Switch$1, SwitchLabel, SwitchIndicator, SwitchIndicatorButton, SwitchIndicatorLabelText, Description } from './Switch.styled.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 const Switch = React__default.forwardRef(function Switch({
   name,
   checked,
   defaultChecked,
   label,
-  disabled,
-  readOnly,
+  disabled = false,
+  readOnly = false,
   description,
   spaciousDescription,
   className,
@@ -18,47 +18,35 @@ const Switch = React__default.forwardRef(function Switch({
   onBlur
 }, forwardedRef) {
   const [uniqueId] = useState(nanoid());
-  return React__default.createElement(Switch$1, {
+  return jsxs(Switch$1, {
     disabled: disabled,
     readOnly: readOnly,
     className: className,
-    style: style
-  }, React__default.createElement(SwitchLabel, {
-    htmlFor: uniqueId
-  }, React__default.createElement("input", {
-    ref: forwardedRef,
-    checked: checked,
-    defaultChecked: defaultChecked,
-    disabled: disabled,
-    readOnly: readOnly,
-    id: uniqueId,
-    name: name,
-    type: "checkbox",
-    onBlur: onBlur,
-    onChange: onChange
-  }), React__default.createElement(SwitchIndicator, null, React__default.createElement(SwitchIndicatorButton, null)), typeof label === 'string' && label.length > 0 && React__default.createElement(SwitchIndicatorLabelText, null, label)), typeof description === 'string' && description.length > 0 && React__default.createElement(Description, {
-    $spaciousdescription: spaciousDescription
-  }, description));
+    style: style,
+    children: [jsxs(SwitchLabel, {
+      htmlFor: uniqueId,
+      children: [jsx("input", {
+        ref: forwardedRef,
+        checked: checked,
+        defaultChecked: defaultChecked,
+        disabled: disabled,
+        readOnly: readOnly,
+        id: uniqueId,
+        name: name,
+        type: "checkbox",
+        onBlur: onBlur,
+        onChange: onChange
+      }), jsx(SwitchIndicator, {
+        children: jsx(SwitchIndicatorButton, {})
+      }), typeof label === 'string' && label.length > 0 && jsx(SwitchIndicatorLabelText, {
+        children: label
+      })]
+    }), typeof description === 'string' && description.length > 0 && jsx(Description, {
+      $spaciousdescription: spaciousDescription,
+      children: description
+    })]
+  });
 });
-Switch.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: PropTypes.any,
-  name: PropTypes.string.isRequired,
-  checked: PropTypes.bool,
-  defaultChecked: PropTypes.bool,
-  label: PropTypes.string,
-  disabled: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  description: PropTypes.string,
-  spaciousDescription: PropTypes.bool,
-  className: PropTypes.string,
-  style: PropTypes.object,
-  onChange: PropTypes.func,
-  onBlur: PropTypes.func
-} : {};
-Switch.defaultProps = {
-  disabled: false,
-  readOnly: false
-};
 
 export { Switch as default };
 //# sourceMappingURL=Switch.js.map

package/build/inputs/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../../src/components/inputs/Switch/Switch.js"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { nanoid } from 'nanoid';\nimport PropTypes from 'prop-types';\n\nimport * as S from './Switch.styled';\n\n/**\n * The Switch allows the user to toggle an option.\n *\n * ### Import\n *\n * ``` js\n * import { Switch } from '@ntbjs/react-components/inputs'\n * // or\n * import Switch from '@ntbjs/react-components/inputs/Switch'\n * ```\n */\nconst Switch = React.forwardRef(function Switch(\n  {\n    name,\n    checked,\n    defaultChecked,\n    label,\n    disabled,\n    readOnly,\n    description,\n    spaciousDescription,\n    className,\n    style,\n    onChange,\n    onBlur\n  },\n  forwardedRef\n) {\n  const [uniqueId] = useState(nanoid());\n\n  return (\n    <S.Switch disabled={disabled} readOnly={readOnly} className={className} style={style}>\n      <S.SwitchLabel htmlFor={uniqueId}>\n        <input\n          ref={forwardedRef}\n          checked={checked}\n          defaultChecked={defaultChecked}\n          disabled={disabled}\n          readOnly={readOnly}\n          id={uniqueId}\n          name={name}\n          type=\"checkbox\"\n          onBlur={onBlur}\n          onChange={onChange}\n        />\n        <S.SwitchIndicator>\n          <S.SwitchIndicatorButton />\n        </S.SwitchIndicator>\n        {typeof label === 'string' && label.length > 0 && (\n          <S.SwitchIndicatorLabelText>{label}</S.SwitchIndicatorLabelText>\n        )}\n      </S.SwitchLabel>\n      {typeof description === 'string' && description.length > 0 && (\n        <S.Description $spaciousdescription={spaciousDescription}>{description}</S.Description>\n      )}\n    </S.Switch>\n  );\n});\n\nSwitch.propTypes = {\n  children: PropTypes.any,\n  name: PropTypes.string.isRequired,\n\n  /**\n   * Whether the switch is toggled on or off\n   */\n  checked: PropTypes.bool,\n\n  /**\n   * Whether the switch is toggled on by default\n   */\n  defaultChecked: PropTypes.bool,\n\n  /**\n   * Text displayed next to the switch\n   */\n  label: PropTypes.string,\n\n  /**\n   * Whether the switch is toggled on\n   */\n  disabled: PropTypes.bool,\n\n  /**\n   * Whether the switch is displayed as read-only\n   */\n  readOnly: PropTypes.bool,\n\n  /**\n   * Text displayed underneath the switch\n   */\n  description: PropTypes.string,\n\n  /**\n   * Whether there should be extra `margin` added between the switch and the description\n   */\n  spaciousDescription: PropTypes.bool,\n\n  /**\n   * Add extra classes to the HTML element\n   */\n  className: PropTypes.string,\n\n  /**\n   * Custom CSS styling\n   */\n  style: PropTypes.object,\n\n  /**\n   * Optional callback function for the `onChange` event\n   */\n  onChange: PropTypes.func,\n\n  /**\n   * Optional callback function for the `onBlur` event\n   */\n  onBlur: PropTypes.func\n};\n\nSwitch.defaultProps = {\n  disabled: false,\n  readOnly: false\n};\n\nexport default Switch;\n"],"names":["Switch","React","forwardRef","name","checked","defaultChecked","label","disabled","readOnly","description","spaciousDescription","className","style","onChange","onBlur","forwardedRef","uniqueId","useState","nanoid","createElement","S","htmlFor","ref","id","type","length","$spaciousdescription","propTypes","process","env","NODE_ENV","children","PropTypes","any","string","isRequired","bool","object","func","defaultProps"],"mappings":";;;;;AAkBMA,MAAAA,MAAM,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,MAAMA,CAC7C;EACEG,IAAI;EACJC,OAAO;EACPC,cAAc;EACdC,KAAK;EACLC,QAAQ;EACRC,QAAQ;EACRC,WAAW;EACXC,mBAAmB;EACnBC,SAAS;EACTC,KAAK;EACLC,QAAQ;AACRC,EAAAA,MAAAA;AACF,CAAC,EACDC,YAAY,EACZ;EACA,MAAM,CAACC,QAAQ,CAAC,GAAGC,QAAQ,CAACC,MAAM,EAAE,CAAC,CAAA;AAErC,EAAA,OACEjB,cAAA,CAAAkB,aAAA,CAACC,QAAQ,EAAA;AAACb,IAAAA,QAAQ,EAAEA,QAAS;AAACC,IAAAA,QAAQ,EAAEA,QAAS;AAACG,IAAAA,SAAS,EAAEA,SAAU;AAACC,IAAAA,KAAK,EAAEA,KAAAA;AAAM,GAAA,EACnFX,cAAA,CAAAkB,aAAA,CAACC,WAAa,EAAA;AAACC,IAAAA,OAAO,EAAEL,QAAAA;GACtBf,EAAAA,cAAA,CAAAkB,aAAA,CAAA,OAAA,EAAA;AACEG,IAAAA,GAAG,EAAEP,YAAa;AAClBX,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,cAAc,EAAEA,cAAe;AAC/BE,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBe,IAAAA,EAAE,EAAEP,QAAS;AACbb,IAAAA,IAAI,EAAEA,IAAK;AACXqB,IAAAA,IAAI,EAAC,UAAU;AACfV,IAAAA,MAAM,EAAEA,MAAO;AACfD,IAAAA,QAAQ,EAAEA,QAAAA;AAAS,GACpB,CAAC,EACFZ,cAAA,CAAAkB,aAAA,CAACC,eAAiB,EAAA,IAAA,EAChBnB,cAAA,CAAAkB,aAAA,CAACC,qBAAuB,EAAA,IAAE,CACT,CAAC,EACnB,OAAOd,KAAK,KAAK,QAAQ,IAAIA,KAAK,CAACmB,MAAM,GAAG,CAAC,IAC5CxB,cAAA,CAAAkB,aAAA,CAACC,wBAA0B,EAAA,IAAA,EAAEd,KAAkC,CAEpD,CAAC,EACf,OAAOG,WAAW,KAAK,QAAQ,IAAIA,WAAW,CAACgB,MAAM,GAAG,CAAC,IACxDxB,cAAA,CAAAkB,aAAA,CAACC,WAAa,EAAA;AAACM,IAAAA,oBAAoB,EAAEhB,mBAAAA;GAAsBD,EAAAA,WAA2B,CAEhF,CAAC,CAAA;AAEf,CAAC,EAAC;AAEFT,MAAM,CAAC2B,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;EACjBC,QAAQ,EAAEC,SAAS,CAACC,GAAG;AACvB9B,EAAAA,IAAI,EAAE6B,SAAS,CAACE,MAAM,CAACC,UAAU;EAKjC/B,OAAO,EAAE4B,SAAS,CAACI,IAAI;EAKvB/B,cAAc,EAAE2B,SAAS,CAACI,IAAI;EAK9B9B,KAAK,EAAE0B,SAAS,CAACE,MAAM;EAKvB3B,QAAQ,EAAEyB,SAAS,CAACI,IAAI;EAKxB5B,QAAQ,EAAEwB,SAAS,CAACI,IAAI;EAKxB3B,WAAW,EAAEuB,SAAS,CAACE,MAAM;EAK7BxB,mBAAmB,EAAEsB,SAAS,CAACI,IAAI;EAKnCzB,SAAS,EAAEqB,SAAS,CAACE,MAAM;EAK3BtB,KAAK,EAAEoB,SAAS,CAACK,MAAM;EAKvBxB,QAAQ,EAAEmB,SAAS,CAACM,IAAI;EAKxBxB,MAAM,EAAEkB,SAAS,CAACM,IAAAA;AACpB,CAAC,GAAA,EAAA,CAAA;AAEDtC,MAAM,CAACuC,YAAY,GAAG;AACpBhC,EAAAA,QAAQ,EAAE,KAAK;AACfC,EAAAA,QAAQ,EAAE,KAAA;AACZ,CAAC;;;;"}
+{"version":3,"file":"Switch.js","sources":["../../../src/components/inputs/Switch/Switch.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { nanoid } from 'nanoid';\n\nimport * as S from './Switch.styled';\n\ntype Props = {\n  children?: any;\n  name: string;\n  /**\n   * Whether the switch is toggled on or off\n   */\n  checked?: boolean;\n  /**\n   * Whether the switch is toggled on by default\n   */\n  defaultChecked?: boolean;\n  /**\n   * Text displayed next to the switch\n   */\n  label?: string;\n  /**\n   * Whether the switch is toggled on\n   */\n  disabled?: boolean;\n  /**\n   * Whether the switch is displayed as read-only\n   */\n  readOnly?: boolean;\n  /**\n   * Text displayed underneath the switch\n   */\n  description?: string;\n  /**\n   * Whether there should be extra `margin` added between the switch and the description\n   */\n  spaciousDescription?: boolean;\n  /**\n   * Add extra classes to the HTML element\n   */\n  className?: string;\n  /**\n   * Custom CSS styling\n   */\n  style?: any;\n  /**\n   * Optional callback function for the `onChange` event\n   */\n  onChange?: (...args: any[]) => any;\n  /**\n   * Optional callback function for the `onBlur` event\n   */\n  onBlur?: (...args: any[]) => any;\n};\n\n/**\n * The Switch allows the user to toggle an option.\n *\n * ### Import\n *\n * ``` js\n * import { Switch } from '@ntbjs/react-components/inputs'\n * // or\n * import Switch from '@ntbjs/react-components/inputs/Switch'\n * ```\n */\nconst Switch = React.forwardRef<any, Props>(function Switch(\n  {\n    name,\n    checked,\n    defaultChecked,\n    label,\n    disabled = false,\n    readOnly = false,\n    description,\n    spaciousDescription,\n    className,\n    style,\n    onChange,\n    onBlur\n  },\n  forwardedRef\n) {\n  const [uniqueId] = useState(nanoid());\n\n  return (\n    <S.Switch disabled={disabled} readOnly={readOnly} className={className} style={style}>\n      <S.SwitchLabel htmlFor={uniqueId}>\n        <input\n          ref={forwardedRef}\n          checked={checked}\n          defaultChecked={defaultChecked}\n          disabled={disabled}\n          readOnly={readOnly}\n          id={uniqueId}\n          name={name}\n          type=\"checkbox\"\n          onBlur={onBlur}\n          onChange={onChange}\n        />\n        <S.SwitchIndicator>\n          <S.SwitchIndicatorButton />\n        </S.SwitchIndicator>\n        {typeof label === 'string' && label.length > 0 && (\n          <S.SwitchIndicatorLabelText>{label}</S.SwitchIndicatorLabelText>\n        )}\n      </S.SwitchLabel>\n      {typeof description === 'string' && description.length > 0 && (\n        <S.Description $spaciousdescription={spaciousDescription}>{description}</S.Description>\n      )}\n    </S.Switch>\n  );\n});\n\nexport default Switch;\n"],"names":["Switch","React","forwardRef","name","checked","defaultChecked","label","disabled","readOnly","description","spaciousDescription","className","style","onChange","onBlur","forwardedRef","uniqueId","useState","nanoid","_jsxs","S","children","htmlFor","_jsx","ref","id","type","length","$spaciousdescription"],"mappings":";;;;;AAkEA,MAAMA,MAAM,GAAGC,cAAK,CAACC,UAAU,CAAa,SAASF,MAAMA,CACzD;EACEG,IAAI;EACJC,OAAO;EACPC,cAAc;EACdC,KAAK;AACLC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,WAAW;EACXC,mBAAmB;EACnBC,SAAS;EACTC,KAAK;EACLC,QAAQ;AACRC,EAAAA;AACF,CAAC,EACDC,YAAY,EACZ;EACA,MAAM,CAACC,QAAQ,CAAC,GAAGC,QAAQ,CAACC,MAAM,EAAE,CAAC;AAErC,EAAA,OACEC,IAAA,CAACC,QAAQ,EAAA;AAACb,IAAAA,QAAQ,EAAEA,QAAS;AAACC,IAAAA,QAAQ,EAAEA,QAAS;AAACG,IAAAA,SAAS,EAAEA,SAAU;AAACC,IAAAA,KAAK,EAAEA,KAAM;AAAAS,IAAAA,QAAA,EAAA,CACnFF,IAAA,CAACC,WAAa,EAAA;AAACE,MAAAA,OAAO,EAAEN,QAAS;AAAAK,MAAAA,QAAA,GAC/BE,GAAA,CAAA,OAAA,EAAA;AACEC,QAAAA,GAAG,EAAET,YAAa;AAClBX,QAAAA,OAAO,EAAEA,OAAQ;AACjBC,QAAAA,cAAc,EAAEA,cAAe;AAC/BE,QAAAA,QAAQ,EAAEA,QAAS;AACnBC,QAAAA,QAAQ,EAAEA,QAAS;AACnBiB,QAAAA,EAAE,EAAET,QAAS;AACbb,QAAAA,IAAI,EAAEA,IAAK;AACXuB,QAAAA,IAAI,EAAC,UAAU;AACfZ,QAAAA,MAAM,EAAEA,MAAO;AACfD,QAAAA,QAAQ,EAAEA;AAAS,OACpB,CAAC,EACFU,GAAA,CAACH,eAAiB,EAAA;AAAAC,QAAAA,QAAA,EAChBE,GAAA,CAACH,qBAAuB,EAAA,EAAE;AAAC,OACV,CAAC,EACnB,OAAOd,KAAK,KAAK,QAAQ,IAAIA,KAAK,CAACqB,MAAM,GAAG,CAAC,IAC5CJ,GAAA,CAACH,wBAA0B,EAAA;AAAAC,QAAAA,QAAA,EAAEf;AAAK,OAA6B,CAChE;AAAA,KACY,CAAC,EACf,OAAOG,WAAW,KAAK,QAAQ,IAAIA,WAAW,CAACkB,MAAM,GAAG,CAAC,IACxDJ,GAAA,CAACH,WAAa,EAAA;AAACQ,MAAAA,oBAAoB,EAAElB,mBAAoB;AAAAW,MAAAA,QAAA,EAAEZ;AAAW,KAAgB,CACvF;AAAA,GACO,CAAC;AAEf,CAAC;;;;"}

package/build/inputs/Switch/Switch.styled.js

@@ -8,110 +8,40 @@ const shouldForwardProp = prop => {
 };
 const Switch = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  * {
-    box-sizing: border-box;
-  }
-
-  display: flex;
-  flex-direction: column;
-
-  ${props => props.readOnly && css`
-      opacity: 0.5;
-      > * {
-        pointer-events: none;
-        user-select: text;
-      }
-    `}
-
-  ${props => props.disabled && css`
-      opacity: 0.5;
-      cursor: not-allowed;
-      * {
-        pointer-events: none;
-        user-select: text;
-      }
-    `}
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "Switchstyled__Switch",
+  componentId: "sc-1aq2wh1-0"
+})(["*{box-sizing:border-box;}display:flex;flex-direction:column;", " ", ""], props => props.readOnly && css(["opacity:0.5;> *{pointer-events:none;user-select:text;}"]), props => props.disabled && css(["opacity:0.5;cursor:not-allowed;*{pointer-events:none;user-select:text;}"]));
 const SwitchIndicator = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  display: inline-block;
-  position: relative;
-  ${props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('gray-200'))}
-  height: ${math(`${switchButtonSize} + 2px`)};
-  width: 32px;
-  border-radius: 20px;
-  border: 1px solid;
-  ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-300'))}
-  transition: background 200ms;
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "Switchstyled__SwitchIndicator",
+  componentId: "sc-1aq2wh1-1"
+})(["display:inline-block;position:relative;", " height:", ";width:32px;border-radius:20px;border:1px solid;", " transition:background 200ms;"], props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('gray-200')), math(`${switchButtonSize} + 2px`), props => props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-300')));
 const SwitchIndicatorButton = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  position: absolute;
-  ${props => props.theme.themeProp('background', props.theme.getColor('gray-200'), props.theme.getColor('white'))}
-  height: ${switchButtonSize};
-  width: ${switchButtonSize};
-  border-radius: 50%;
-  box-shadow: ${props => props.theme.getColor('gray-500')} 0 0px 2px 0px;
-  transition: left 200ms;
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "Switchstyled__SwitchIndicatorButton",
+  componentId: "sc-1aq2wh1-2"
+})(["position:absolute;", " height:", ";width:", ";border-radius:50%;box-shadow:", " 0 0px 2px 0px;transition:left 200ms;"], props => props.theme.themeProp('background', props.theme.getColor('gray-200'), props.theme.getColor('white')), switchButtonSize, switchButtonSize, props => props.theme.getColor('gray-500'));
 const SwitchIndicatorLabelText = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  padding-left: 10px;
-  font-weight: 400;
-  font-size: 0.875rem;
-  line-height: 18px;
-
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'))};
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "Switchstyled__SwitchIndicatorLabelText",
+  componentId: "sc-1aq2wh1-3"
+})(["padding-left:10px;font-weight:400;font-size:0.875rem;line-height:18px;", ";"], props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600')));
 const SwitchLabel = styled.label.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  display: inline-flex;
-  margin-right: auto;
-  cursor: pointer;
-
-  input[type='checkbox'] {
-    position: absolute;
-    opacity: 0;
-  }
-
-  &:has(input[type='checkbox']:not(:checked)) {
-    ${SwitchIndicatorButton} {
-      left: 0;
-    }
-  }
-
-  &:has(input[type='checkbox']:checked) {
-    ${SwitchIndicatorButton} {
-      left: calc(100% - ${switchButtonSize});
-    }
-
-    ${SwitchIndicator} {
-      background: ${props => props.theme.getColor('emerald-500')};
-
-      ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-300'), 1)}
-    }
-  }
-
-  &:has(input[type='checkbox']:focus-visible) {
-    ${SwitchIndicatorButton} {
-      ${props => props.theme.themeProp('outline', `8px solid ${rgba(props.theme.getColor('emerald-500'), 0.5)}`, `8px solid ${rgba(props.theme.getColor('emerald-500'), 0.3)}`, 1)}
-    }
-  }
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "Switchstyled__SwitchLabel",
+  componentId: "sc-1aq2wh1-4"
+})(["display:inline-flex;margin-right:auto;cursor:pointer;input[type='checkbox']{position:absolute;opacity:0;}&:has(input[type='checkbox']:not(:checked)){", "{left:0;}}&:has(input[type='checkbox']:checked){", "{left:calc(100% - ", ");}", "{background:", ";", "}}&:has(input[type='checkbox']:focus-visible){", "{", "}}"], SwitchIndicatorButton, SwitchIndicatorButton, switchButtonSize, SwitchIndicator, props => props.theme.getColor('emerald-500'), props => props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-300'), 1), SwitchIndicatorButton, props => props.theme.themeProp('outline', `8px solid ${rgba(props.theme.getColor('emerald-500'), 0.5)}`, `8px solid ${rgba(props.theme.getColor('emerald-500'), 0.3)}`, 1));
 const Description = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  margin: ${props => props.$spaciousdescription ? '16px' : '6px'} 0 0 0;
-  font-size: 0.75rem;
-  line-height: 1.333;
-
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'))};
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "Switchstyled__Description",
+  componentId: "sc-1aq2wh1-5"
+})(["margin:", " 0 0 0;font-size:0.75rem;line-height:1.333;", ";"], props => props.$spaciousdescription ? '16px' : '6px', props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')));
 
 export { Description, Switch, SwitchIndicator, SwitchIndicatorButton, SwitchIndicatorLabelText, SwitchLabel };
 //# sourceMappingURL=Switch.styled.js.map

package/build/inputs/Switch/Switch.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.styled.js","sources":["../../../src/components/inputs/Switch/Switch.styled.js"],"sourcesContent":["import { math, rgba } from 'polished';\nimport styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nconst switchButtonSize = '16px';\n\nconst shouldForwardProp = prop => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const Switch = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  * {\n    box-sizing: border-box;\n  }\n\n  display: flex;\n  flex-direction: column;\n\n  ${props =>\n    props.readOnly &&\n    css`\n      opacity: 0.5;\n      > * {\n        pointer-events: none;\n        user-select: text;\n      }\n    `}\n\n  ${props =>\n    props.disabled &&\n    css`\n      opacity: 0.5;\n      cursor: not-allowed;\n      * {\n        pointer-events: none;\n        user-select: text;\n      }\n    `}\n`;\n\nexport const SwitchIndicator = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: inline-block;\n  position: relative;\n  ${props =>\n    props.theme.themeProp(\n      'background',\n      props.theme.getColor('gray-900'),\n      props.theme.getColor('gray-200')\n    )}\n  height: ${math(`${switchButtonSize} + 2px`)};\n  width: 32px;\n  border-radius: 20px;\n  border: 1px solid;\n  ${props =>\n    props.theme.themeProp(\n      'border-color',\n      props.theme.getColor('gray-500'),\n      props.theme.getColor('gray-300')\n    )}\n  transition: background 200ms;\n`;\n\nexport const SwitchIndicatorButton = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  position: absolute;\n  ${props =>\n    props.theme.themeProp(\n      'background',\n      props.theme.getColor('gray-200'),\n      props.theme.getColor('white')\n    )}\n  height: ${switchButtonSize};\n  width: ${switchButtonSize};\n  border-radius: 50%;\n  box-shadow: ${props => props.theme.getColor('gray-500')} 0 0px 2px 0px;\n  transition: left 200ms;\n`;\n\nexport const SwitchIndicatorLabelText = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  padding-left: 10px;\n  font-weight: 400;\n  font-size: 0.875rem;\n  line-height: 18px;\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-300'),\n      props.theme.getColor('gray-600')\n    )};\n`;\n\nexport const SwitchLabel = styled.label\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: inline-flex;\n  margin-right: auto;\n  cursor: pointer;\n\n  input[type='checkbox'] {\n    position: absolute;\n    opacity: 0;\n  }\n\n  &:has(input[type='checkbox']:not(:checked)) {\n    ${SwitchIndicatorButton} {\n      left: 0;\n    }\n  }\n\n  &:has(input[type='checkbox']:checked) {\n    ${SwitchIndicatorButton} {\n      left: calc(100% - ${switchButtonSize});\n    }\n\n    ${SwitchIndicator} {\n      background: ${props => props.theme.getColor('emerald-500')};\n\n      ${props =>\n        props.theme.themeProp(\n          'border-color',\n          props.theme.getColor('gray-400'),\n          props.theme.getColor('gray-300'),\n          1\n        )}\n    }\n  }\n\n  &:has(input[type='checkbox']:focus-visible) {\n    ${SwitchIndicatorButton} {\n      ${props =>\n        props.theme.themeProp(\n          'outline',\n          `8px solid ${rgba(props.theme.getColor('emerald-500'), 0.5)}`,\n          `8px solid ${rgba(props.theme.getColor('emerald-500'), 0.3)}`,\n          1\n        )}\n    }\n  }\n`;\n\nexport const Description = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  margin: ${props => (props.$spaciousdescription ? '16px' : '6px')} 0 0 0;\n  font-size: 0.75rem;\n  line-height: 1.333;\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-400'),\n      props.theme.getColor('gray-500')\n    )};\n`;\n"],"names":["switchButtonSize","shouldForwardProp","prop","startsWith","Switch","styled","div","withConfig","attrs","applyDefaultTheme","props","readOnly","css","disabled","SwitchIndicator","theme","themeProp","getColor","math","SwitchIndicatorButton","SwitchIndicatorLabelText","SwitchLabel","label","rgba","Description","$spaciousdescription"],"mappings":"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"}
+{"version":3,"file":"Switch.styled.js","sources":["../../../src/components/inputs/Switch/Switch.styled.ts"],"sourcesContent":["import { math, rgba } from 'polished';\nimport styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nconst switchButtonSize = '16px';\n\n// Single-argument only — styled-components v5.1+ and v6 disagree on the second parameter.\nconst shouldForwardProp = (prop: string): boolean => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\n// Defect: disabled/readOnly leak to <div> DOM as non-standard attributes and are TS2339 errors.\ninterface SwitchStyleProps {\n  /** `disabled` — dims and blocks pointer events. Leaks to DOM. */\n  disabled?: boolean;\n  /** `readOnly` — dims and blocks pointer events. Leaks to DOM. */\n  readOnly?: boolean;\n}\n\nexport const Switch = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<SwitchStyleProps>(applyDefaultTheme)`\n  * {\n    box-sizing: border-box;\n  }\n\n  display: flex;\n  flex-direction: column;\n\n  ${props =>\n    props.readOnly &&\n    css`\n      opacity: 0.5;\n      > * {\n        pointer-events: none;\n        user-select: text;\n      }\n    `}\n\n  ${props =>\n    props.disabled &&\n    css`\n      opacity: 0.5;\n      cursor: not-allowed;\n      * {\n        pointer-events: none;\n        user-select: text;\n      }\n    `}\n`;\n\nexport const SwitchIndicator = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: inline-block;\n  position: relative;\n  ${props =>\n    props.theme.themeProp(\n      'background',\n      props.theme.getColor('gray-900'),\n      props.theme.getColor('gray-200')\n    )}\n  height: ${math(`${switchButtonSize} + 2px`)};\n  width: 32px;\n  border-radius: 20px;\n  border: 1px solid;\n  ${props =>\n    props.theme.themeProp(\n      'border-color',\n      props.theme.getColor('gray-500'),\n      props.theme.getColor('gray-300')\n    )}\n  transition: background 200ms;\n`;\n\nexport const SwitchIndicatorButton = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  position: absolute;\n  ${props =>\n    props.theme.themeProp(\n      'background',\n      props.theme.getColor('gray-200'),\n      props.theme.getColor('white')\n    )}\n  height: ${switchButtonSize};\n  width: ${switchButtonSize};\n  border-radius: 50%;\n  box-shadow: ${props => props.theme.getColor('gray-500')} 0 0px 2px 0px;\n  transition: left 200ms;\n`;\n\nexport const SwitchIndicatorLabelText = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  padding-left: 10px;\n  font-weight: 400;\n  font-size: 0.875rem;\n  line-height: 18px;\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-300'),\n      props.theme.getColor('gray-600')\n    )};\n`;\n\nexport const SwitchLabel = styled.label\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  display: inline-flex;\n  margin-right: auto;\n  cursor: pointer;\n\n  input[type='checkbox'] {\n    position: absolute;\n    opacity: 0;\n  }\n\n  &:has(input[type='checkbox']:not(:checked)) {\n    ${SwitchIndicatorButton} {\n      left: 0;\n    }\n  }\n\n  &:has(input[type='checkbox']:checked) {\n    ${SwitchIndicatorButton} {\n      left: calc(100% - ${switchButtonSize});\n    }\n\n    ${SwitchIndicator} {\n      background: ${props => props.theme.getColor('emerald-500')};\n\n      ${props =>\n        props.theme.themeProp(\n          'border-color',\n          props.theme.getColor('gray-400'),\n          props.theme.getColor('gray-300'),\n          1\n        )}\n    }\n  }\n\n  &:has(input[type='checkbox']:focus-visible) {\n    ${SwitchIndicatorButton} {\n      ${props =>\n        props.theme.themeProp(\n          'outline',\n          `8px solid ${rgba(props.theme.getColor('emerald-500'), 0.5)}`,\n          `8px solid ${rgba(props.theme.getColor('emerald-500'), 0.3)}`,\n          1\n        )}\n    }\n  }\n`;\n\nexport const Description = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<{\n    /** `spaciousDescription` — lower-case by convention; renaming would require two-file change. */\n    $spaciousdescription?: boolean;\n  }>(applyDefaultTheme)`\n  margin: ${props => (props.$spaciousdescription ? '16px' : '6px')} 0 0 0;\n  font-size: 0.75rem;\n  line-height: 1.333;\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-400'),\n      props.theme.getColor('gray-500')\n    )};\n`;\n"],"names":["switchButtonSize","shouldForwardProp","prop","startsWith","Switch","styled","div","withConfig","attrs","applyDefaultTheme","displayName","componentId","props","readOnly","css","disabled","SwitchIndicator","theme","themeProp","getColor","math","SwitchIndicatorButton","SwitchIndicatorLabelText","SwitchLabel","label","rgba","Description","$spaciousdescription"],"mappings":"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"}