@sikt/sds-toggle 4.0.0 → 4.0.1

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [4.0.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-toggle@4.0.0...@sikt/sds-toggle@4.0.1) (2024-11-20)
+
+### Bug Fixes
+
+- **deps:** correct deps on @sikt/sds-tokens ([b47f8a4](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/b47f8a4d27e99dcc731036ccf2b7b58a27d88da6))
+- **deps:** peer deps react@19.0.0 ([17352e2](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/17352e291153f79c66a9de317ca42820159aee8a))
+- **deps:** update @sikt/sds-core@4.1.1 & @sikt/sds-icons@2.0.2 ([09e97cf](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/09e97cfe35780cc239ae2b7f55f4e793ec72e479))
+- **deps:** update @sikt/sds-form@3.0.1 ([8edf559](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/8edf55939469d254e70c081c9e5153fc0b45b5f4))
+
 ## [4.0.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-toggle@3.0.2...@sikt/sds-toggle@4.0.0) (2024-09-23)
 
 ### ⚠ BREAKING CHANGES

package/README.md

@@ -3,7 +3,7 @@
 ## Consume
 
 ```sh
-npm i -s @sikt/sds-toggle
+npm i -s @sikt/sds-{form,icons,toggle}
 ```
 
 ### React
@@ -12,8 +12,9 @@ npm i -s @sikt/sds-toggle
 
 ```js
 import { ToggleSwitch } from "@sikt/sds-toggle";
-import "@sikt/sds-toggle/dist/index.css";
+import "@sikt/sds-form/dist/index.css";
 import "@sikt/sds-icons/dist/index.css";
+import "@sikt/sds-toggle/dist/index.css";
 
 <ToggleSwitch label="Label" />;
 ```
@@ -22,8 +23,9 @@ import "@sikt/sds-icons/dist/index.css";
 
 ```js
 import { ToggleButton } from "@sikt/sds-toggle";
-import "@sikt/sds-toggle/dist/index.css";
+import "@sikt/sds-form/dist/index.css";
 import "@sikt/sds-icons/dist/index.css";
+import "@sikt/sds-toggle/dist/index.css";
 
 <ToggleButton label="Label" checked={false} onClick={() => {}} />;
 ```
@@ -32,8 +34,9 @@ import "@sikt/sds-icons/dist/index.css";
 
 ```js
 import { ToggleSegment } from "@sikt/sds-toggle";
-import "@sikt/sds-toggle/dist/index.css";
+import "@sikt/sds-form/dist/index.css";
 import "@sikt/sds-icons/dist/index.css";
+import "@sikt/sds-toggle/dist/index.css";
 
 <ToggleSegment legend="Legend">
   <ToggleSegmentOption label="Label 1" value="1" checked onChange={() => {}} />
@@ -46,6 +49,7 @@ import "@sikt/sds-icons/dist/index.css";
 Import stylesheet:
 
 ```css
+@import url("@sikt/sds-form");
 @import url("@sikt/sds-toggle");
 ```
 

package/dist/index.js

@@ -1 +1 @@
-"use strict";var e=require("@sikt/sds-icons"),s=require("clsx/lite"),l=require("react"),t=require("react/jsx-runtime"),a=require("@sikt/sds-form"),c=l.forwardRef((({checked:a=!1,label:c,"aria-labelledby":d,labelFirst:o=!1,showIcons:g=!0,error:n=!1,onChange:i,className:r,...h},m)=>{const u=l.useId(),x=t.jsx("div",{className:"sds-toggle-switch__label-text",children:c}),_=t.jsxs("div",{className:"sds-toggle-switch__inner",children:[t.jsx("input",{ref:m,id:u,type:"checkbox",role:"switch",className:"sds-toggle-switch__track","aria-labelledby":d,checked:a,"aria-invalid":n,onChange:i,readOnly:!i,...h}),t.jsxs("div",{className:"sds-toggle-switch__thumb",children:[g&&a&&t.jsx(e.CheckIcon,{}),g&&!a&&t.jsx(e.XIcon,{})]})]});return t.jsx("div",{className:s.clsx("sds-toggle-switch",a&&"sds-toggle-switch--checked",n&&"sds-toggle-switch--error",r),"data-testid":"sds-toggle-switch",children:void 0!==c?t.jsxs("label",{className:"sds-toggle-switch__label",htmlFor:u,children:[o&&x,_,!o&&x]}):_})}));c.displayName="ToggleSwitch";var d=l.forwardRef((({checked:a,label:c,showIcons:d=!0,onChange:o,className:g,...n},i)=>{const r=l.useId();return t.jsxs("div",{className:s.clsx("sds-toggle-button",g),...n,children:[t.jsx("input",{ref:i,type:"checkbox",className:"sds-toggle-button__input",onChange:o,readOnly:!o,checked:a,"aria-checked":a,id:r}),t.jsxs("label",{className:s.clsx("sds-toggle-button__label",a&&"sds-toggle-button__label--checked"),htmlFor:r,children:[t.jsx("div",{className:"sds-toggle-button__label-text",children:c}),d&&t.jsx(e.PlusCircleIcon,{className:s.clsx("sds-toggle-button__icon",a&&"sds-toggle-button__icon--checked")})]})]})}));d.displayName="ToggleButton";var o=l.forwardRef((({children:e,variant:l="default",className:c,...d},o)=>t.jsx("div",{className:s.clsx("sds-toggle-segment","default"!==l&&"sds-toggle-segment--".concat(l),c),children:t.jsx(a.Fieldset,{className:"sds-toggle-segment__fieldset",...d,ref:o,children:t.jsx("div",{className:"sds-toggle-segment__group",children:e})})})));o.displayName="ToggleSegment";var g=l.forwardRef((({value:e,label:c,checked:d,onChange:o,className:g,...n},i)=>{var r,h;const{name:m}=null!=(r=a.useFieldset())?r:{},u=l.useId(),x=null!=(h=n.id)?h:u;return t.jsxs("div",{className:s.clsx("sds-toggle-segment__option",d&&"sds-toggle-segment__option--checked",g),children:[t.jsx("input",{id:x,name:m,ref:i,type:"radio",onChange:o,className:"sds-toggle-segment__input",value:e,checked:d,...n}),t.jsx("label",{className:"sds-toggle-segment__label",htmlFor:x,children:c})]})}));g.displayName="ToggleSegmentOption",exports.ToggleButton=d,exports.ToggleSegment=o,exports.ToggleSegmentOption=g,exports.ToggleSwitch=c;//# sourceMappingURL=index.js.map
+"use strict";var e=require("@sikt/sds-icons"),s=require("clsx/lite"),l=require("react"),a=require("react/jsx-runtime"),t=require("@sikt/sds-form"),c=Object.defineProperty,r=Object.defineProperties,o=Object.getOwnPropertyDescriptors,n=Object.getOwnPropertySymbols,d=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable,g=(e,s,l)=>s in e?c(e,s,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[s]=l,h=(e,s)=>{for(var l in s||(s={}))d.call(s,l)&&g(e,l,s[l]);if(n)for(var l of n(s))i.call(s,l)&&g(e,l,s[l]);return e},m=(e,s)=>r(e,o(s)),u=(e,s)=>{var l={};for(var a in e)d.call(e,a)&&s.indexOf(a)<0&&(l[a]=e[a]);if(null!=e&&n)for(var a of n(e))s.indexOf(a)<0&&i.call(e,a)&&(l[a]=e[a]);return l},b=l.forwardRef(((t,c)=>{var r=t,{checked:o=!1,label:n,"aria-labelledby":d,labelFirst:i=!1,showIcons:g=!0,error:m=!1,onChange:b,className:x}=r,_=u(r,["checked","label","aria-labelledby","labelFirst","showIcons","error","onChange","className"]);const p=l.useId(),v=a.jsx("div",{className:"sds-toggle-switch__label-text",children:n}),f=a.jsxs("div",{className:"sds-toggle-switch__inner",children:[a.jsx("input",h({ref:c,id:p,type:"checkbox",role:"switch",className:"sds-toggle-switch__track","aria-labelledby":d,checked:o,"aria-invalid":m,onChange:b,readOnly:!b},_)),a.jsxs("div",{className:"sds-toggle-switch__thumb",children:[g&&o&&a.jsx(e.CheckIcon,{}),g&&!o&&a.jsx(e.XIcon,{})]})]});return a.jsx("div",{className:s.clsx("sds-toggle-switch",o&&"sds-toggle-switch--checked",m&&"sds-toggle-switch--error",x),"data-testid":"sds-toggle-switch",children:void 0!==n?a.jsxs("label",{className:"sds-toggle-switch__label",htmlFor:p,children:[i&&v,f,!i&&v]}):f})}));b.displayName="ToggleSwitch";var x=l.forwardRef(((t,c)=>{var r=t,{checked:o,label:n,showIcons:d=!0,onChange:i,className:g}=r,b=u(r,["checked","label","showIcons","onChange","className"]);const x=l.useId();return a.jsxs("div",m(h({className:s.clsx("sds-toggle-button",g)},b),{children:[a.jsx("input",{ref:c,type:"checkbox",className:"sds-toggle-button__input",onChange:i,readOnly:!i,checked:o,"aria-checked":o,id:x}),a.jsxs("label",{className:s.clsx("sds-toggle-button__label",o&&"sds-toggle-button__label--checked"),htmlFor:x,children:[a.jsx("div",{className:"sds-toggle-button__label-text",children:n}),d&&a.jsx(e.PlusCircleIcon,{className:s.clsx("sds-toggle-button__icon",o&&"sds-toggle-button__icon--checked")})]})]}))}));x.displayName="ToggleButton";var _=l.forwardRef(((e,l)=>{var c=e,{children:r,variant:o="default",className:n}=c,d=u(c,["children","variant","className"]);return a.jsx("div",{className:s.clsx("sds-toggle-segment","default"!==o&&"sds-toggle-segment--".concat(o),n),children:a.jsx(t.Fieldset,m(h({className:"sds-toggle-segment__fieldset"},d),{ref:l,children:a.jsx("div",{className:"sds-toggle-segment__group",children:r})}))})}));_.displayName="ToggleSegment";var p=l.forwardRef(((e,c)=>{var r,o,n=e,{value:d,label:i,checked:g,onChange:m,className:b}=n,x=u(n,["value","label","checked","onChange","className"]);const{name:_}=null!=(r=t.useFieldset())?r:{},p=l.useId(),v=null!=(o=x.id)?o:p;return a.jsxs("div",{className:s.clsx("sds-toggle-segment__option",g&&"sds-toggle-segment__option--checked",b),children:[a.jsx("input",h({id:v,name:_,ref:c,type:"radio",onChange:m,className:"sds-toggle-segment__input",value:d,checked:g},x)),a.jsx("label",{className:"sds-toggle-segment__label",htmlFor:v,children:i})]})}));p.displayName="ToggleSegmentOption",exports.ToggleButton=x,exports.ToggleSegment=_,exports.ToggleSegmentOption=p,exports.ToggleSwitch=b;//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/ToggleSwitch.tsx","../src/ToggleButton.tsx","../src/ToggleSegment.tsx","../src/ToggleSegmentOption.tsx"],"names":["forwardRef","useId","jsx","jsxs","CheckIcon","XIcon","clsx","PlusCircleIcon","Fieldset","useFieldset"],"mappings":"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","file":"index.js","sourcesContent":["import { CheckIcon, XIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  ChangeEventHandler,\n  InputHTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useId,\n} from \"react\";\nimport \"./toggle-switch.pcss\";\n\ninterface ToggleSwitchBaseProps\n  extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    \"onChange\" | \"aria-label\" | \"aria-labelledby\"\n  > {\n  checked?: boolean;\n  showIcons?: boolean;\n  error?: boolean;\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  className?: string;\n}\n\nexport type ToggleSwitchProps = ToggleSwitchBaseProps &\n  (\n    | {\n        label: NonNullable<ReactNode>;\n        labelFirst?: boolean;\n        \"aria-labelledby\"?: never;\n      }\n    | {\n        label?: never;\n        labelFirst?: never;\n        \"aria-labelledby\": string;\n      }\n  );\n\nexport const ToggleSwitch = forwardRef<HTMLInputElement, ToggleSwitchProps>(\n  (\n    {\n      checked = false,\n      label,\n      \"aria-labelledby\": ariaLabelledby,\n      labelFirst = false,\n      showIcons = true,\n      error = false,\n      onChange,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const id = useId();\n    const labelElement = (\n      <div className=\"sds-toggle-switch__label-text\">{label}</div>\n    );\n    const input = (\n      <div className=\"sds-toggle-switch__inner\">\n        <input\n          ref={ref}\n          id={id}\n          type=\"checkbox\"\n          role=\"switch\"\n          className=\"sds-toggle-switch__track\"\n          aria-labelledby={ariaLabelledby}\n          checked={checked}\n          aria-invalid={error}\n          onChange={onChange}\n          readOnly={!onChange}\n          {...rest}\n        />\n        <div className=\"sds-toggle-switch__thumb\">\n          {showIcons && checked && <CheckIcon />}\n          {showIcons && !checked && <XIcon />}\n        </div>\n      </div>\n    );\n\n    return (\n      <div\n        className={clsx(\n          \"sds-toggle-switch\",\n          checked && \"sds-toggle-switch--checked\",\n          error && \"sds-toggle-switch--error\",\n          className,\n        )}\n        data-testid=\"sds-toggle-switch\"\n      >\n        {label !== undefined ? (\n          <label className=\"sds-toggle-switch__label\" htmlFor={id}>\n            {labelFirst && labelElement}\n            {input}\n            {!labelFirst && labelElement}\n          </label>\n        ) : (\n          input\n        )}\n      </div>\n    );\n  },\n);\nToggleSwitch.displayName = \"ToggleSwitch\";\n","import { PlusCircleIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport { ChangeEventHandler, ReactNode, forwardRef, useId } from \"react\";\nimport \"./toggle-button.pcss\";\n\nexport interface ToggleButtonProps {\n  checked?: boolean;\n  label: ReactNode;\n  showIcons?: boolean;\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  className?: string;\n}\n\nexport const ToggleButton = forwardRef<HTMLInputElement, ToggleButtonProps>(\n  ({ checked, label, showIcons = true, onChange, className, ...rest }, ref) => {\n    const toggleButtonId = useId();\n    return (\n      <div className={clsx(\"sds-toggle-button\", className)} {...rest}>\n        <input\n          ref={ref}\n          type=\"checkbox\"\n          className=\"sds-toggle-button__input\"\n          onChange={onChange}\n          readOnly={!onChange}\n          checked={checked}\n          aria-checked={checked}\n          id={toggleButtonId}\n        />\n        <label\n          className={clsx(\n            \"sds-toggle-button__label\",\n            checked && \"sds-toggle-button__label--checked\",\n          )}\n          htmlFor={toggleButtonId}\n        >\n          <div className=\"sds-toggle-button__label-text\">{label}</div>\n          {showIcons && (\n            <PlusCircleIcon\n              className={clsx(\n                \"sds-toggle-button__icon\",\n                checked && \"sds-toggle-button__icon--checked\",\n              )}\n            />\n          )}\n        </label>\n      </div>\n    );\n  },\n);\nToggleButton.displayName = \"ToggleButton\";\n","import { Fieldset, FieldsetProps } from \"@sikt/sds-form\";\nimport { clsx } from \"clsx/lite\";\nimport { ReactNode, forwardRef } from \"react\";\nimport \"./toggle-segment.pcss\";\n\nexport interface ToggleSegmentProps extends Omit<FieldsetProps, \"onChange\"> {\n  children: ReactNode;\n  variant?: \"default\" | \"fixed\";\n}\n\nexport const ToggleSegment = forwardRef<\n  HTMLFieldSetElement,\n  ToggleSegmentProps\n>(({ children, variant = \"default\", className, ...rest }, ref) => {\n  return (\n    <div\n      className={clsx(\n        \"sds-toggle-segment\",\n        variant !== \"default\" && `sds-toggle-segment--${variant}`,\n        className,\n      )}\n    >\n      {/* @ts-expect-error TypeScript is struggling, but this is correct */}\n      <Fieldset className=\"sds-toggle-segment__fieldset\" {...rest} ref={ref}>\n        <div className=\"sds-toggle-segment__group\">{children}</div>\n      </Fieldset>\n    </div>\n  );\n});\nToggleSegment.displayName = \"ToggleSegment\";\n","import \"./toggle-segment.pcss\";\nimport { useFieldset } from \"@sikt/sds-form\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  ChangeEvent,\n  InputHTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useId,\n} from \"react\";\n\nexport interface ToggleSegmentOptionProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\"> {\n  value: string | number;\n  label: ReactNode;\n  checked?: boolean;\n  onChange: (event: ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const ToggleSegmentOption = forwardRef<\n  HTMLInputElement,\n  ToggleSegmentOptionProps\n>(({ value, label, checked, onChange, className, ...rest }, ref) => {\n  const { name } = useFieldset() ?? {};\n  const generatedId = useId();\n  const htmlForId = rest.id ?? generatedId;\n\n  return (\n    <div\n      className={clsx(\n        \"sds-toggle-segment__option\",\n        checked && \"sds-toggle-segment__option--checked\",\n        className,\n      )}\n    >\n      <input\n        id={htmlForId}\n        name={name}\n        ref={ref}\n        type=\"radio\"\n        onChange={onChange}\n        className=\"sds-toggle-segment__input\"\n        value={value}\n        checked={checked}\n        {...rest}\n      />\n      <label className=\"sds-toggle-segment__label\" htmlFor={htmlForId}>\n        {label}\n      </label>\n    </div>\n  );\n});\nToggleSegmentOption.displayName = \"ToggleSegmentOption\";\n\nexport default ToggleSegmentOption;\n"]}
+{"version":3,"sources":["../src/ToggleSwitch.tsx","../src/ToggleButton.tsx","../src/ToggleSegment.tsx","../src/ToggleSegmentOption.tsx"],"names":["forwardRef","useId","jsx","jsxs","CheckIcon","XIcon","clsx","PlusCircleIcon","Fieldset","_a","_b","useFieldset"],"mappings":"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","file":"index.js","sourcesContent":["import { CheckIcon, XIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  ChangeEventHandler,\n  InputHTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useId,\n} from \"react\";\nimport \"./toggle-switch.pcss\";\n\ninterface ToggleSwitchBaseProps\n  extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    \"onChange\" | \"aria-label\" | \"aria-labelledby\"\n  > {\n  checked?: boolean;\n  showIcons?: boolean;\n  error?: boolean;\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  className?: string;\n}\n\nexport type ToggleSwitchProps = ToggleSwitchBaseProps &\n  (\n    | {\n        label: NonNullable<ReactNode>;\n        labelFirst?: boolean;\n        \"aria-labelledby\"?: never;\n      }\n    | {\n        label?: never;\n        labelFirst?: never;\n        \"aria-labelledby\": string;\n      }\n  );\n\nexport const ToggleSwitch = forwardRef<HTMLInputElement, ToggleSwitchProps>(\n  (\n    {\n      checked = false,\n      label,\n      \"aria-labelledby\": ariaLabelledby,\n      labelFirst = false,\n      showIcons = true,\n      error = false,\n      onChange,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const id = useId();\n    const labelElement = (\n      <div className=\"sds-toggle-switch__label-text\">{label}</div>\n    );\n    const input = (\n      <div className=\"sds-toggle-switch__inner\">\n        <input\n          ref={ref}\n          id={id}\n          type=\"checkbox\"\n          role=\"switch\"\n          className=\"sds-toggle-switch__track\"\n          aria-labelledby={ariaLabelledby}\n          checked={checked}\n          aria-invalid={error}\n          onChange={onChange}\n          readOnly={!onChange}\n          {...rest}\n        />\n        <div className=\"sds-toggle-switch__thumb\">\n          {showIcons && checked && <CheckIcon />}\n          {showIcons && !checked && <XIcon />}\n        </div>\n      </div>\n    );\n\n    return (\n      <div\n        className={clsx(\n          \"sds-toggle-switch\",\n          checked && \"sds-toggle-switch--checked\",\n          error && \"sds-toggle-switch--error\",\n          className,\n        )}\n        data-testid=\"sds-toggle-switch\"\n      >\n        {label !== undefined ? (\n          <label className=\"sds-toggle-switch__label\" htmlFor={id}>\n            {labelFirst && labelElement}\n            {input}\n            {!labelFirst && labelElement}\n          </label>\n        ) : (\n          input\n        )}\n      </div>\n    );\n  },\n);\nToggleSwitch.displayName = \"ToggleSwitch\";\n","import { PlusCircleIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport { ChangeEventHandler, ReactNode, forwardRef, useId } from \"react\";\nimport \"./toggle-button.pcss\";\n\nexport interface ToggleButtonProps {\n  checked?: boolean;\n  label: ReactNode;\n  showIcons?: boolean;\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  className?: string;\n}\n\nexport const ToggleButton = forwardRef<HTMLInputElement, ToggleButtonProps>(\n  ({ checked, label, showIcons = true, onChange, className, ...rest }, ref) => {\n    const toggleButtonId = useId();\n    return (\n      <div className={clsx(\"sds-toggle-button\", className)} {...rest}>\n        <input\n          ref={ref}\n          type=\"checkbox\"\n          className=\"sds-toggle-button__input\"\n          onChange={onChange}\n          readOnly={!onChange}\n          checked={checked}\n          aria-checked={checked}\n          id={toggleButtonId}\n        />\n        <label\n          className={clsx(\n            \"sds-toggle-button__label\",\n            checked && \"sds-toggle-button__label--checked\",\n          )}\n          htmlFor={toggleButtonId}\n        >\n          <div className=\"sds-toggle-button__label-text\">{label}</div>\n          {showIcons && (\n            <PlusCircleIcon\n              className={clsx(\n                \"sds-toggle-button__icon\",\n                checked && \"sds-toggle-button__icon--checked\",\n              )}\n            />\n          )}\n        </label>\n      </div>\n    );\n  },\n);\nToggleButton.displayName = \"ToggleButton\";\n","import { Fieldset, FieldsetProps } from \"@sikt/sds-form\";\nimport { clsx } from \"clsx/lite\";\nimport { ReactNode, forwardRef } from \"react\";\nimport \"./toggle-segment.pcss\";\n\nexport interface ToggleSegmentProps extends Omit<FieldsetProps, \"onChange\"> {\n  children: ReactNode;\n  variant?: \"default\" | \"fixed\";\n}\n\nexport const ToggleSegment = forwardRef<\n  HTMLFieldSetElement,\n  ToggleSegmentProps\n>(({ children, variant = \"default\", className, ...rest }, ref) => {\n  return (\n    <div\n      className={clsx(\n        \"sds-toggle-segment\",\n        variant !== \"default\" && `sds-toggle-segment--${variant}`,\n        className,\n      )}\n    >\n      {/* @ts-expect-error TypeScript is struggling, but this is correct */}\n      <Fieldset className=\"sds-toggle-segment__fieldset\" {...rest} ref={ref}>\n        <div className=\"sds-toggle-segment__group\">{children}</div>\n      </Fieldset>\n    </div>\n  );\n});\nToggleSegment.displayName = \"ToggleSegment\";\n","import \"./toggle-segment.pcss\";\nimport { useFieldset } from \"@sikt/sds-form\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  ChangeEvent,\n  InputHTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useId,\n} from \"react\";\n\nexport interface ToggleSegmentOptionProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\"> {\n  value: string | number;\n  label: ReactNode;\n  checked?: boolean;\n  onChange: (event: ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const ToggleSegmentOption = forwardRef<\n  HTMLInputElement,\n  ToggleSegmentOptionProps\n>(({ value, label, checked, onChange, className, ...rest }, ref) => {\n  const { name } = useFieldset() ?? {};\n  const generatedId = useId();\n  const htmlForId = rest.id ?? generatedId;\n\n  return (\n    <div\n      className={clsx(\n        \"sds-toggle-segment__option\",\n        checked && \"sds-toggle-segment__option--checked\",\n        className,\n      )}\n    >\n      <input\n        id={htmlForId}\n        name={name}\n        ref={ref}\n        type=\"radio\"\n        onChange={onChange}\n        className=\"sds-toggle-segment__input\"\n        value={value}\n        checked={checked}\n        {...rest}\n      />\n      <label className=\"sds-toggle-segment__label\" htmlFor={htmlForId}>\n        {label}\n      </label>\n    </div>\n  );\n});\nToggleSegmentOption.displayName = \"ToggleSegmentOption\";\n\nexport default ToggleSegmentOption;\n"]}

package/dist/index.mjs

@@ -1 +1 @@
-import{CheckIcon as e,XIcon as s,PlusCircleIcon as l}from"@sikt/sds-icons";import{clsx as t}from"clsx/lite";import{forwardRef as a,useId as c}from"react";import{jsxs as o,jsx as d}from"react/jsx-runtime";import{Fieldset as i,useFieldset as n}from"@sikt/sds-form";var g=a((({checked:l=!1,label:a,"aria-labelledby":i,labelFirst:n=!1,showIcons:g=!0,error:r=!1,onChange:m,className:h,..._},b)=>{const u=c(),N=d("div",{className:"sds-toggle-switch__label-text",children:a}),p=o("div",{className:"sds-toggle-switch__inner",children:[d("input",{ref:b,id:u,type:"checkbox",role:"switch",className:"sds-toggle-switch__track","aria-labelledby":i,checked:l,"aria-invalid":r,onChange:m,readOnly:!m,..._}),o("div",{className:"sds-toggle-switch__thumb",children:[g&&l&&d(e,{}),g&&!l&&d(s,{})]})]});return d("div",{className:t("sds-toggle-switch",l&&"sds-toggle-switch--checked",r&&"sds-toggle-switch--error",h),"data-testid":"sds-toggle-switch",children:void 0!==a?o("label",{className:"sds-toggle-switch__label",htmlFor:u,children:[n&&N,p,!n&&N]}):p})}));g.displayName="ToggleSwitch";var r=a((({checked:e,label:s,showIcons:a=!0,onChange:i,className:n,...g},r)=>{const m=c();return o("div",{className:t("sds-toggle-button",n),...g,children:[d("input",{ref:r,type:"checkbox",className:"sds-toggle-button__input",onChange:i,readOnly:!i,checked:e,"aria-checked":e,id:m}),o("label",{className:t("sds-toggle-button__label",e&&"sds-toggle-button__label--checked"),htmlFor:m,children:[d("div",{className:"sds-toggle-button__label-text",children:s}),a&&d(l,{className:t("sds-toggle-button__icon",e&&"sds-toggle-button__icon--checked")})]})]})}));r.displayName="ToggleButton";var m=a((({children:e,variant:s="default",className:l,...a},c)=>d("div",{className:t("sds-toggle-segment","default"!==s&&"sds-toggle-segment--".concat(s),l),children:d(i,{className:"sds-toggle-segment__fieldset",...a,ref:c,children:d("div",{className:"sds-toggle-segment__group",children:e})})})));m.displayName="ToggleSegment";var h=a((({value:e,label:s,checked:l,onChange:a,className:i,...g},r)=>{var m,h;const{name:_}=null!=(m=n())?m:{},b=c(),u=null!=(h=g.id)?h:b;return o("div",{className:t("sds-toggle-segment__option",l&&"sds-toggle-segment__option--checked",i),children:[d("input",{id:u,name:_,ref:r,type:"radio",onChange:a,className:"sds-toggle-segment__input",value:e,checked:l,...g}),d("label",{className:"sds-toggle-segment__label",htmlFor:u,children:s})]})}));h.displayName="ToggleSegmentOption";export{r as ToggleButton,m as ToggleSegment,h as ToggleSegmentOption,g as ToggleSwitch};//# sourceMappingURL=index.mjs.map
+import{CheckIcon as e,XIcon as l,PlusCircleIcon as s}from"@sikt/sds-icons";import{clsx as a}from"clsx/lite";import{forwardRef as t,useId as c}from"react";import{jsxs as r,jsx as o}from"react/jsx-runtime";import{Fieldset as n,useFieldset as i}from"@sikt/sds-form";var d=Object.defineProperty,g=Object.defineProperties,h=Object.getOwnPropertyDescriptors,m=Object.getOwnPropertySymbols,b=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable,u=(e,l,s)=>l in e?d(e,l,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[l]=s,_=(e,l)=>{for(var s in l||(l={}))b.call(l,s)&&u(e,s,l[s]);if(m)for(var s of m(l))p.call(l,s)&&u(e,s,l[s]);return e},v=(e,l)=>g(e,h(l)),N=(e,l)=>{var s={};for(var a in e)b.call(e,a)&&l.indexOf(a)<0&&(s[a]=e[a]);if(null!=e&&m)for(var a of m(e))l.indexOf(a)<0&&p.call(e,a)&&(s[a]=e[a]);return s},f=t(((s,t)=>{var n=s,{checked:i=!1,label:d,"aria-labelledby":g,labelFirst:h=!1,showIcons:m=!0,error:b=!1,onChange:p,className:u}=n,v=N(n,["checked","label","aria-labelledby","labelFirst","showIcons","error","onChange","className"]);const f=c(),y=o("div",{className:"sds-toggle-switch__label-text",children:d}),k=r("div",{className:"sds-toggle-switch__inner",children:[o("input",_({ref:t,id:f,type:"checkbox",role:"switch",className:"sds-toggle-switch__track","aria-labelledby":g,checked:i,"aria-invalid":b,onChange:p,readOnly:!p},v)),r("div",{className:"sds-toggle-switch__thumb",children:[m&&i&&o(e,{}),m&&!i&&o(l,{})]})]});return o("div",{className:a("sds-toggle-switch",i&&"sds-toggle-switch--checked",b&&"sds-toggle-switch--error",u),"data-testid":"sds-toggle-switch",children:void 0!==d?r("label",{className:"sds-toggle-switch__label",htmlFor:f,children:[h&&y,k,!h&&y]}):k})}));f.displayName="ToggleSwitch";var y=t(((e,l)=>{var t=e,{checked:n,label:i,showIcons:d=!0,onChange:g,className:h}=t,m=N(t,["checked","label","showIcons","onChange","className"]);const b=c();return r("div",v(_({className:a("sds-toggle-button",h)},m),{children:[o("input",{ref:l,type:"checkbox",className:"sds-toggle-button__input",onChange:g,readOnly:!g,checked:n,"aria-checked":n,id:b}),r("label",{className:a("sds-toggle-button__label",n&&"sds-toggle-button__label--checked"),htmlFor:b,children:[o("div",{className:"sds-toggle-button__label-text",children:i}),d&&o(s,{className:a("sds-toggle-button__icon",n&&"sds-toggle-button__icon--checked")})]})]}))}));y.displayName="ToggleButton";var k=t(((e,l)=>{var s=e,{children:t,variant:c="default",className:r}=s,i=N(s,["children","variant","className"]);return o("div",{className:a("sds-toggle-segment","default"!==c&&"sds-toggle-segment--".concat(c),r),children:o(n,v(_({className:"sds-toggle-segment__fieldset"},i),{ref:l,children:o("div",{className:"sds-toggle-segment__group",children:t})}))})}));k.displayName="ToggleSegment";var w=t(((e,l)=>{var s,t,n=e,{value:d,label:g,checked:h,onChange:m,className:b}=n,p=N(n,["value","label","checked","onChange","className"]);const{name:u}=null!=(s=i())?s:{},v=c(),f=null!=(t=p.id)?t:v;return r("div",{className:a("sds-toggle-segment__option",h&&"sds-toggle-segment__option--checked",b),children:[o("input",_({id:f,name:u,ref:l,type:"radio",onChange:m,className:"sds-toggle-segment__input",value:d,checked:h},p)),o("label",{className:"sds-toggle-segment__label",htmlFor:f,children:g})]})}));w.displayName="ToggleSegmentOption";export{y as ToggleButton,k as ToggleSegment,w as ToggleSegmentOption,f as ToggleSwitch};//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/ToggleSwitch.tsx","../src/ToggleButton.tsx","../src/ToggleSegment.tsx","../src/ToggleSegmentOption.tsx"],"names":["forwardRef","useId","jsxs","clsx","jsx"],"mappings":";;;;;;;AAqCO,IAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,CACE;AAAA,IACE,OAAU,GAAA,KAAA;AAAA,IACV,KAAA;AAAA,IACA,iBAAmB,EAAA,cAAA;AAAA,IACnB,UAAa,GAAA,KAAA;AAAA,IACb,SAAY,GAAA,IAAA;AAAA,IACZ,KAAQ,GAAA,KAAA;AAAA,IACR,QAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,KAAK,KAAM,EAAA,CAAA;AACjB,IAAA,MAAM,YACJ,mBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,iCAAiC,QAAM,EAAA,KAAA,EAAA,CAAA,CAAA;AAExD,IAAA,MAAM,KACJ,mBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,0BACb,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,GAAA;AAAA,UACA,EAAA;AAAA,UACA,IAAK,EAAA,UAAA;AAAA,UACL,IAAK,EAAA,QAAA;AAAA,UACL,SAAU,EAAA,0BAAA;AAAA,UACV,iBAAiB,EAAA,cAAA;AAAA,UACjB,OAAA;AAAA,UACA,cAAc,EAAA,KAAA;AAAA,UACd,QAAA;AAAA,UACA,UAAU,CAAC,QAAA;AAAA,UACV,GAAG,IAAA;AAAA,SAAA;AAAA,OACN;AAAA,sBACA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,0BACZ,EAAA,QAAA,EAAA;AAAA,QAAa,SAAA,IAAA,OAAA,wBAAY,SAAU,EAAA,EAAA,CAAA;AAAA,QACnC,SAAa,IAAA,CAAC,OAAW,oBAAA,GAAA,CAAC,KAAM,EAAA,EAAA,CAAA;AAAA,OACnC,EAAA,CAAA;AAAA,KACF,EAAA,CAAA,CAAA;AAGF,IACE,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,UACT,mBAAA;AAAA,UACA,OAAW,IAAA,4BAAA;AAAA,UACX,KAAS,IAAA,0BAAA;AAAA,UACT,SAAA;AAAA,SACF;AAAA,QACA,aAAY,EAAA,mBAAA;AAAA,QAEX,oBAAU,KACT,CAAA,mBAAA,IAAA,CAAC,WAAM,SAAU,EAAA,0BAAA,EAA2B,SAAS,EAClD,EAAA,QAAA,EAAA;AAAA,UAAc,UAAA,IAAA,YAAA;AAAA,UACd,KAAA;AAAA,UACA,CAAC,UAAc,IAAA,YAAA;AAAA,SAAA,EAClB,CAEA,GAAA,KAAA;AAAA,OAAA;AAAA,KAEJ,CAAA;AAAA,GAEJ;AACF,EAAA;AACA,YAAA,CAAa,WAAc,GAAA,cAAA,CAAA;ACxFpB,IAAM,YAAeA,GAAAA,UAAAA;AAAA,EAC1B,CAAC,EAAE,OAAA,EAAS,KAAO,EAAA,SAAA,GAAY,IAAM,EAAA,QAAA,EAAU,SAAW,EAAA,GAAG,IAAK,EAAA,EAAG,GAAQ,KAAA;AAC3E,IAAA,MAAM,iBAAiBC,KAAM,EAAA,CAAA;AAC7B,IACE,uBAAAC,KAAC,KAAI,EAAA,EAAA,SAAA,EAAWC,KAAK,mBAAqB,EAAA,SAAS,CAAI,EAAA,GAAG,IACxD,EAAA,QAAA,EAAA;AAAA,sBAAAC,GAAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,GAAA;AAAA,UACA,IAAK,EAAA,UAAA;AAAA,UACL,SAAU,EAAA,0BAAA;AAAA,UACV,QAAA;AAAA,UACA,UAAU,CAAC,QAAA;AAAA,UACX,OAAA;AAAA,UACA,cAAc,EAAA,OAAA;AAAA,UACd,EAAI,EAAA,cAAA;AAAA,SAAA;AAAA,OACN;AAAA,sBACAF,IAAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,SAAWC,EAAAA,IAAAA;AAAA,YACT,0BAAA;AAAA,YACA,OAAW,IAAA,mCAAA;AAAA,WACb;AAAA,UACA,OAAS,EAAA,cAAA;AAAA,UAET,QAAA,EAAA;AAAA,4BAAAC,GAAC,CAAA,KAAA,EAAA,EAAI,SAAU,EAAA,+BAAA,EAAiC,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,YACrD,6BACCA,GAAAA;AAAA,cAAC,cAAA;AAAA,cAAA;AAAA,gBACC,SAAWD,EAAAA,IAAAA;AAAA,kBACT,yBAAA;AAAA,kBACA,OAAW,IAAA,kCAAA;AAAA,iBACb;AAAA,eAAA;AAAA,aACF;AAAA,WAAA;AAAA,SAAA;AAAA,OAEJ;AAAA,KACF,EAAA,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AACA,YAAA,CAAa,WAAc,GAAA,cAAA,CAAA;ACvCd,IAAA,aAAA,GAAgBH,UAG3B,CAAA,CAAC,EAAE,QAAA,EAAU,OAAU,GAAA,SAAA,EAAW,SAAW,EAAA,GAAG,IAAK,EAAA,EAAG,GAAQ,KAAA;AAChE,EAAA,uBACEI,GAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAWD,EAAAA,IAAAA;AAAA,QACT,oBAAA;AAAA,QACA,OAAA,KAAY,aAAa,sBAAuB,CAAA,MAAA,CAAA,OAAA,CAAA;AAAA,QAChD,SAAA;AAAA,OACF;AAAA,MAGA,QAAAC,kBAAAA,GAAAA,CAAC,QAAS,EAAA,EAAA,SAAA,EAAU,gCAAgC,GAAG,IAAA,EAAM,GAC3D,EAAA,QAAA,kBAAAA,GAAC,CAAA,KAAA,EAAA,EAAI,SAAU,EAAA,2BAAA,EAA6B,UAAS,CACvD,EAAA,CAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,CAAC,EAAA;AACD,aAAA,CAAc,WAAc,GAAA,eAAA,CAAA;ACVrB,IAAM,mBAAsBJ,GAAAA,UAAAA,CAGjC,CAAC,EAAE,KAAO,EAAA,KAAA,EAAO,OAAS,EAAA,QAAA,EAAU,SAAW,EAAA,GAAG,IAAK,EAAA,EAAG,GAAQ,KAAA;AAtBpE,EAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAuBE,EAAA,MAAM,EAAE,IAAK,EAAA,GAAA,CAAI,EAAY,GAAA,WAAA,EAAA,KAAZ,YAAiB,EAAC,CAAA;AACnC,EAAA,MAAM,cAAcC,KAAM,EAAA,CAAA;AAC1B,EAAM,MAAA,SAAA,GAAA,CAAY,EAAK,GAAA,IAAA,CAAA,EAAA,KAAL,IAAW,GAAA,EAAA,GAAA,WAAA,CAAA;AAE7B,EAAA,uBACEC,IAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAWC,EAAAA,IAAAA;AAAA,QACT,4BAAA;AAAA,QACA,OAAW,IAAA,qCAAA;AAAA,QACX,SAAA;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAC,GAAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,EAAI,EAAA,SAAA;AAAA,YACJ,IAAA;AAAA,YACA,GAAA;AAAA,YACA,IAAK,EAAA,OAAA;AAAA,YACL,QAAA;AAAA,YACA,SAAU,EAAA,2BAAA;AAAA,YACV,KAAA;AAAA,YACA,OAAA;AAAA,YACC,GAAG,IAAA;AAAA,WAAA;AAAA,SACN;AAAA,wBACAA,GAAC,CAAA,OAAA,EAAA,EAAM,WAAU,2BAA4B,EAAA,OAAA,EAAS,WACnD,QACH,EAAA,KAAA,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,CAAC,EAAA;AACD,mBAAA,CAAoB,WAAc,GAAA,qBAAA","file":"index.mjs","sourcesContent":["import { CheckIcon, XIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  ChangeEventHandler,\n  InputHTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useId,\n} from \"react\";\nimport \"./toggle-switch.pcss\";\n\ninterface ToggleSwitchBaseProps\n  extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    \"onChange\" | \"aria-label\" | \"aria-labelledby\"\n  > {\n  checked?: boolean;\n  showIcons?: boolean;\n  error?: boolean;\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  className?: string;\n}\n\nexport type ToggleSwitchProps = ToggleSwitchBaseProps &\n  (\n    | {\n        label: NonNullable<ReactNode>;\n        labelFirst?: boolean;\n        \"aria-labelledby\"?: never;\n      }\n    | {\n        label?: never;\n        labelFirst?: never;\n        \"aria-labelledby\": string;\n      }\n  );\n\nexport const ToggleSwitch = forwardRef<HTMLInputElement, ToggleSwitchProps>(\n  (\n    {\n      checked = false,\n      label,\n      \"aria-labelledby\": ariaLabelledby,\n      labelFirst = false,\n      showIcons = true,\n      error = false,\n      onChange,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const id = useId();\n    const labelElement = (\n      <div className=\"sds-toggle-switch__label-text\">{label}</div>\n    );\n    const input = (\n      <div className=\"sds-toggle-switch__inner\">\n        <input\n          ref={ref}\n          id={id}\n          type=\"checkbox\"\n          role=\"switch\"\n          className=\"sds-toggle-switch__track\"\n          aria-labelledby={ariaLabelledby}\n          checked={checked}\n          aria-invalid={error}\n          onChange={onChange}\n          readOnly={!onChange}\n          {...rest}\n        />\n        <div className=\"sds-toggle-switch__thumb\">\n          {showIcons && checked && <CheckIcon />}\n          {showIcons && !checked && <XIcon />}\n        </div>\n      </div>\n    );\n\n    return (\n      <div\n        className={clsx(\n          \"sds-toggle-switch\",\n          checked && \"sds-toggle-switch--checked\",\n          error && \"sds-toggle-switch--error\",\n          className,\n        )}\n        data-testid=\"sds-toggle-switch\"\n      >\n        {label !== undefined ? (\n          <label className=\"sds-toggle-switch__label\" htmlFor={id}>\n            {labelFirst && labelElement}\n            {input}\n            {!labelFirst && labelElement}\n          </label>\n        ) : (\n          input\n        )}\n      </div>\n    );\n  },\n);\nToggleSwitch.displayName = \"ToggleSwitch\";\n","import { PlusCircleIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport { ChangeEventHandler, ReactNode, forwardRef, useId } from \"react\";\nimport \"./toggle-button.pcss\";\n\nexport interface ToggleButtonProps {\n  checked?: boolean;\n  label: ReactNode;\n  showIcons?: boolean;\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  className?: string;\n}\n\nexport const ToggleButton = forwardRef<HTMLInputElement, ToggleButtonProps>(\n  ({ checked, label, showIcons = true, onChange, className, ...rest }, ref) => {\n    const toggleButtonId = useId();\n    return (\n      <div className={clsx(\"sds-toggle-button\", className)} {...rest}>\n        <input\n          ref={ref}\n          type=\"checkbox\"\n          className=\"sds-toggle-button__input\"\n          onChange={onChange}\n          readOnly={!onChange}\n          checked={checked}\n          aria-checked={checked}\n          id={toggleButtonId}\n        />\n        <label\n          className={clsx(\n            \"sds-toggle-button__label\",\n            checked && \"sds-toggle-button__label--checked\",\n          )}\n          htmlFor={toggleButtonId}\n        >\n          <div className=\"sds-toggle-button__label-text\">{label}</div>\n          {showIcons && (\n            <PlusCircleIcon\n              className={clsx(\n                \"sds-toggle-button__icon\",\n                checked && \"sds-toggle-button__icon--checked\",\n              )}\n            />\n          )}\n        </label>\n      </div>\n    );\n  },\n);\nToggleButton.displayName = \"ToggleButton\";\n","import { Fieldset, FieldsetProps } from \"@sikt/sds-form\";\nimport { clsx } from \"clsx/lite\";\nimport { ReactNode, forwardRef } from \"react\";\nimport \"./toggle-segment.pcss\";\n\nexport interface ToggleSegmentProps extends Omit<FieldsetProps, \"onChange\"> {\n  children: ReactNode;\n  variant?: \"default\" | \"fixed\";\n}\n\nexport const ToggleSegment = forwardRef<\n  HTMLFieldSetElement,\n  ToggleSegmentProps\n>(({ children, variant = \"default\", className, ...rest }, ref) => {\n  return (\n    <div\n      className={clsx(\n        \"sds-toggle-segment\",\n        variant !== \"default\" && `sds-toggle-segment--${variant}`,\n        className,\n      )}\n    >\n      {/* @ts-expect-error TypeScript is struggling, but this is correct */}\n      <Fieldset className=\"sds-toggle-segment__fieldset\" {...rest} ref={ref}>\n        <div className=\"sds-toggle-segment__group\">{children}</div>\n      </Fieldset>\n    </div>\n  );\n});\nToggleSegment.displayName = \"ToggleSegment\";\n","import \"./toggle-segment.pcss\";\nimport { useFieldset } from \"@sikt/sds-form\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  ChangeEvent,\n  InputHTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useId,\n} from \"react\";\n\nexport interface ToggleSegmentOptionProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\"> {\n  value: string | number;\n  label: ReactNode;\n  checked?: boolean;\n  onChange: (event: ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const ToggleSegmentOption = forwardRef<\n  HTMLInputElement,\n  ToggleSegmentOptionProps\n>(({ value, label, checked, onChange, className, ...rest }, ref) => {\n  const { name } = useFieldset() ?? {};\n  const generatedId = useId();\n  const htmlForId = rest.id ?? generatedId;\n\n  return (\n    <div\n      className={clsx(\n        \"sds-toggle-segment__option\",\n        checked && \"sds-toggle-segment__option--checked\",\n        className,\n      )}\n    >\n      <input\n        id={htmlForId}\n        name={name}\n        ref={ref}\n        type=\"radio\"\n        onChange={onChange}\n        className=\"sds-toggle-segment__input\"\n        value={value}\n        checked={checked}\n        {...rest}\n      />\n      <label className=\"sds-toggle-segment__label\" htmlFor={htmlForId}>\n        {label}\n      </label>\n    </div>\n  );\n});\nToggleSegmentOption.displayName = \"ToggleSegmentOption\";\n\nexport default ToggleSegmentOption;\n"]}
+{"version":3,"sources":["../src/ToggleSwitch.tsx","../src/ToggleButton.tsx","../src/ToggleSegment.tsx","../src/ToggleSegmentOption.tsx"],"names":["forwardRef","useId","jsxs","clsx","jsx","_a","_b"],"mappings":"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","file":"index.mjs","sourcesContent":["import { CheckIcon, XIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  ChangeEventHandler,\n  InputHTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useId,\n} from \"react\";\nimport \"./toggle-switch.pcss\";\n\ninterface ToggleSwitchBaseProps\n  extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    \"onChange\" | \"aria-label\" | \"aria-labelledby\"\n  > {\n  checked?: boolean;\n  showIcons?: boolean;\n  error?: boolean;\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  className?: string;\n}\n\nexport type ToggleSwitchProps = ToggleSwitchBaseProps &\n  (\n    | {\n        label: NonNullable<ReactNode>;\n        labelFirst?: boolean;\n        \"aria-labelledby\"?: never;\n      }\n    | {\n        label?: never;\n        labelFirst?: never;\n        \"aria-labelledby\": string;\n      }\n  );\n\nexport const ToggleSwitch = forwardRef<HTMLInputElement, ToggleSwitchProps>(\n  (\n    {\n      checked = false,\n      label,\n      \"aria-labelledby\": ariaLabelledby,\n      labelFirst = false,\n      showIcons = true,\n      error = false,\n      onChange,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const id = useId();\n    const labelElement = (\n      <div className=\"sds-toggle-switch__label-text\">{label}</div>\n    );\n    const input = (\n      <div className=\"sds-toggle-switch__inner\">\n        <input\n          ref={ref}\n          id={id}\n          type=\"checkbox\"\n          role=\"switch\"\n          className=\"sds-toggle-switch__track\"\n          aria-labelledby={ariaLabelledby}\n          checked={checked}\n          aria-invalid={error}\n          onChange={onChange}\n          readOnly={!onChange}\n          {...rest}\n        />\n        <div className=\"sds-toggle-switch__thumb\">\n          {showIcons && checked && <CheckIcon />}\n          {showIcons && !checked && <XIcon />}\n        </div>\n      </div>\n    );\n\n    return (\n      <div\n        className={clsx(\n          \"sds-toggle-switch\",\n          checked && \"sds-toggle-switch--checked\",\n          error && \"sds-toggle-switch--error\",\n          className,\n        )}\n        data-testid=\"sds-toggle-switch\"\n      >\n        {label !== undefined ? (\n          <label className=\"sds-toggle-switch__label\" htmlFor={id}>\n            {labelFirst && labelElement}\n            {input}\n            {!labelFirst && labelElement}\n          </label>\n        ) : (\n          input\n        )}\n      </div>\n    );\n  },\n);\nToggleSwitch.displayName = \"ToggleSwitch\";\n","import { PlusCircleIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport { ChangeEventHandler, ReactNode, forwardRef, useId } from \"react\";\nimport \"./toggle-button.pcss\";\n\nexport interface ToggleButtonProps {\n  checked?: boolean;\n  label: ReactNode;\n  showIcons?: boolean;\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  className?: string;\n}\n\nexport const ToggleButton = forwardRef<HTMLInputElement, ToggleButtonProps>(\n  ({ checked, label, showIcons = true, onChange, className, ...rest }, ref) => {\n    const toggleButtonId = useId();\n    return (\n      <div className={clsx(\"sds-toggle-button\", className)} {...rest}>\n        <input\n          ref={ref}\n          type=\"checkbox\"\n          className=\"sds-toggle-button__input\"\n          onChange={onChange}\n          readOnly={!onChange}\n          checked={checked}\n          aria-checked={checked}\n          id={toggleButtonId}\n        />\n        <label\n          className={clsx(\n            \"sds-toggle-button__label\",\n            checked && \"sds-toggle-button__label--checked\",\n          )}\n          htmlFor={toggleButtonId}\n        >\n          <div className=\"sds-toggle-button__label-text\">{label}</div>\n          {showIcons && (\n            <PlusCircleIcon\n              className={clsx(\n                \"sds-toggle-button__icon\",\n                checked && \"sds-toggle-button__icon--checked\",\n              )}\n            />\n          )}\n        </label>\n      </div>\n    );\n  },\n);\nToggleButton.displayName = \"ToggleButton\";\n","import { Fieldset, FieldsetProps } from \"@sikt/sds-form\";\nimport { clsx } from \"clsx/lite\";\nimport { ReactNode, forwardRef } from \"react\";\nimport \"./toggle-segment.pcss\";\n\nexport interface ToggleSegmentProps extends Omit<FieldsetProps, \"onChange\"> {\n  children: ReactNode;\n  variant?: \"default\" | \"fixed\";\n}\n\nexport const ToggleSegment = forwardRef<\n  HTMLFieldSetElement,\n  ToggleSegmentProps\n>(({ children, variant = \"default\", className, ...rest }, ref) => {\n  return (\n    <div\n      className={clsx(\n        \"sds-toggle-segment\",\n        variant !== \"default\" && `sds-toggle-segment--${variant}`,\n        className,\n      )}\n    >\n      {/* @ts-expect-error TypeScript is struggling, but this is correct */}\n      <Fieldset className=\"sds-toggle-segment__fieldset\" {...rest} ref={ref}>\n        <div className=\"sds-toggle-segment__group\">{children}</div>\n      </Fieldset>\n    </div>\n  );\n});\nToggleSegment.displayName = \"ToggleSegment\";\n","import \"./toggle-segment.pcss\";\nimport { useFieldset } from \"@sikt/sds-form\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  ChangeEvent,\n  InputHTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useId,\n} from \"react\";\n\nexport interface ToggleSegmentOptionProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\"> {\n  value: string | number;\n  label: ReactNode;\n  checked?: boolean;\n  onChange: (event: ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const ToggleSegmentOption = forwardRef<\n  HTMLInputElement,\n  ToggleSegmentOptionProps\n>(({ value, label, checked, onChange, className, ...rest }, ref) => {\n  const { name } = useFieldset() ?? {};\n  const generatedId = useId();\n  const htmlForId = rest.id ?? generatedId;\n\n  return (\n    <div\n      className={clsx(\n        \"sds-toggle-segment__option\",\n        checked && \"sds-toggle-segment__option--checked\",\n        className,\n      )}\n    >\n      <input\n        id={htmlForId}\n        name={name}\n        ref={ref}\n        type=\"radio\"\n        onChange={onChange}\n        className=\"sds-toggle-segment__input\"\n        value={value}\n        checked={checked}\n        {...rest}\n      />\n      <label className=\"sds-toggle-segment__label\" htmlFor={htmlForId}>\n        {label}\n      </label>\n    </div>\n  );\n});\nToggleSegmentOption.displayName = \"ToggleSegmentOption\";\n\nexport default ToggleSegmentOption;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikt/sds-toggle",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "license": "UNLICENSED",
   "homepage": "https://designsystem.sikt.no/",
   "repository": {
@@ -12,6 +12,7 @@
   "module": "dist/index.mjs",
   "exports": {
     ".": {
+      "style": "./dist/index.css",
       "import": {
         "types": "./dist/index.d.mts",
         "default": "./dist/index.mjs"
@@ -19,8 +20,7 @@
       "require": {
         "types": "./dist/index.d.ts",
         "default": "./dist/index.js"
-      },
-      "style": "./dist/index.css"
+      }
     },
     "./dist/*": "./dist/*"
   },
@@ -35,16 +35,15 @@
     "build": "tsup"
   },
   "dependencies": {
-    "@sikt/sds-core": "^3.0.2",
-    "@sikt/sds-form": "^3.0.0",
-    "@sikt/sds-icons": "^2.0.1",
-    "@sikt/sds-tokens": "^1.0.1"
+    "@sikt/sds-core": "^4.1.1",
+    "@sikt/sds-form": "^3.0.1",
+    "@sikt/sds-icons": "^2.0.2"
   },
   "peerDependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "^18.0.0 || ^19.0.0",
+    "@types/react-dom": "^18.0.0 || ^19.0.0",
     "clsx": "^2.1.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   }
 }