@sikt/sds-toggle 3.0.2 → 4.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/README.md +8 -4
  3. package/dist/index.css +3 -3
  4. package/dist/index.css.map +1 -1
  5. package/dist/index.d.mts +11 -4
  6. package/dist/index.d.ts +11 -4
  7. package/dist/index.js +1 -1
  8. package/dist/index.js.map +1 -1
  9. package/dist/index.mjs +1 -1
  10. package/dist/index.mjs.map +1 -1
  11. package/package.json +16 -12
package/CHANGELOG.md CHANGED
@@ -2,6 +2,30 @@
2
2
 
3
3
  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
4
 
5
+ ## [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)
6
+
7
+ ### Bug Fixes
8
+
9
+ - **deps:** correct deps on @sikt/sds-tokens ([b47f8a4](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/b47f8a4d27e99dcc731036ccf2b7b58a27d88da6))
10
+ - **deps:** peer deps react@19.0.0 ([17352e2](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/17352e291153f79c66a9de317ca42820159aee8a))
11
+ - **deps:** update @sikt/sds-core@4.1.1 & @sikt/sds-icons@2.0.2 ([09e97cf](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/09e97cfe35780cc239ae2b7f55f4e793ec72e479))
12
+ - **deps:** update @sikt/sds-form@3.0.1 ([8edf559](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/8edf55939469d254e70c081c9e5153fc0b45b5f4))
13
+
14
+ ## [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)
15
+
16
+ ### ⚠ BREAKING CHANGES
17
+
18
+ - allow one of label or aria-labelledby for input components
19
+
20
+ ### Features
21
+
22
+ - allow one of label or aria-labelledby for input components ([edcfefb](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/edcfefbda41a4781ea5fbda0f24e7743c1d165e2))
23
+
24
+ ### Bug Fixes
25
+
26
+ - **deps:** change peer deps clsx to ^2.1.0 ([9eb76f1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/9eb76f1207a2ec8d19fda646c9bc26d5922b1839))
27
+ - **deps:** update @sikt/sds-form@3.0.0 ([6859894](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/68598941f873ffede6a5d18936279da5b98e5af2))
28
+
5
29
  ## [3.0.2](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-toggle@3.0.1...@sikt/sds-toggle@3.0.2) (2024-05-24)
6
30
 
7
31
  ### Bug Fixes
package/README.md CHANGED
@@ -3,7 +3,7 @@
3
3
  ## Consume
4
4
 
5
5
  ```sh
6
- npm i -s @sikt/sds-toggle
6
+ npm i -s @sikt/sds-{form,icons,toggle}
7
7
  ```
8
8
 
9
9
  ### React
@@ -12,8 +12,9 @@ npm i -s @sikt/sds-toggle
12
12
 
13
13
  ```js
14
14
  import { ToggleSwitch } from "@sikt/sds-toggle";
15
- import "@sikt/sds-toggle/dist/index.css";
15
+ import "@sikt/sds-form/dist/index.css";
16
16
  import "@sikt/sds-icons/dist/index.css";
17
+ import "@sikt/sds-toggle/dist/index.css";
17
18
 
18
19
  <ToggleSwitch label="Label" />;
19
20
  ```
@@ -22,8 +23,9 @@ import "@sikt/sds-icons/dist/index.css";
22
23
 
23
24
  ```js
24
25
  import { ToggleButton } from "@sikt/sds-toggle";
25
- import "@sikt/sds-toggle/dist/index.css";
26
+ import "@sikt/sds-form/dist/index.css";
26
27
  import "@sikt/sds-icons/dist/index.css";
28
+ import "@sikt/sds-toggle/dist/index.css";
27
29
 
28
30
  <ToggleButton label="Label" checked={false} onClick={() => {}} />;
29
31
  ```
@@ -32,8 +34,9 @@ import "@sikt/sds-icons/dist/index.css";
32
34
 
33
35
  ```js
34
36
  import { ToggleSegment } from "@sikt/sds-toggle";
35
- import "@sikt/sds-toggle/dist/index.css";
37
+ import "@sikt/sds-form/dist/index.css";
36
38
  import "@sikt/sds-icons/dist/index.css";
39
+ import "@sikt/sds-toggle/dist/index.css";
37
40
 
38
41
  <ToggleSegment legend="Legend">
39
42
  <ToggleSegmentOption label="Label 1" value="1" checked onChange={() => {}} />
@@ -46,6 +49,7 @@ import "@sikt/sds-icons/dist/index.css";
46
49
  Import stylesheet:
47
50
 
48
51
  ```css
52
+ @import url("@sikt/sds-form");
49
53
  @import url("@sikt/sds-toggle");
50
54
  ```
51
55
 
package/dist/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* toggle-switch.pcss */
1
+ /* src/toggle-switch.pcss */
2
2
  .sds-toggle-switch {
3
3
  --toggle-transition-duration: var(--sds-effect-animation-duration-medium);
4
4
  --toggle-track-width: var(--sds-base-size-l);
@@ -123,7 +123,7 @@
123
123
  --toggle-thumb-background-color: var(--sds-color-text-on-strong);
124
124
  }
125
125
 
126
- /* toggle-button.pcss */
126
+ /* src/toggle-button.pcss */
127
127
  .sds-toggle-button {
128
128
  --toggle-button-background-color: inherit;
129
129
  --toggle-button-border-color: var( --sds-color-interaction-primary-strong-default );
@@ -194,7 +194,7 @@
194
194
  --toggle-button-background-color: var( --sds-color-interaction-primary-strong-highlight );
195
195
  }
196
196
 
197
- /* toggle-segment.pcss */
197
+ /* src/toggle-segment.pcss */
198
198
  .sds-toggle-segment__fieldset {
199
199
  display: flex;
200
200
  align-items: center;
package/dist/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../toggle-switch.pcss","../toggle-button.pcss","../toggle-segment.pcss"],"sourcesContent":[".sds-toggle-switch {\n --toggle-transition-duration: var(--sds-effect-animation-duration-medium);\n --toggle-track-width: var(--sds-base-size-l);\n --toggle-thumb-size: var(--sds-base-size-s1);\n --toggle-border-width: var(--sds-space-border-weight-regular);\n --toggle-padding: var(--sds-space-padding-minimal);\n --toggle-thumb-offset: var(--toggle-padding);\n --toggle-track-background-color: var(--sds-color-layout-background-default);\n --toggle-track-border-color: var(\n --sds-color-interaction-neutral-strong-default\n );\n --toggle-thumb-background-color: var(\n --sds-color-interaction-neutral-strong-default\n );\n --toggle-thumb-color: var(--sds-color-text-on-strong);\n --toggle-thumb-position: 0;\n}\n\n .sds-toggle-switch__label {\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n gap: var(--sds-space-padding-small);\n }\n\n .sds-toggle-switch:hover {\n --toggle-track-border-color: var(\n --sds-color-interaction-neutral-strong-highlight\n );\n --toggle-thumb-background-color: var(\n --sds-color-interaction-neutral-strong-highlight\n );\n }\n\n .sds-toggle-switch:active {\n --toggle-track-border-color: var(\n --sds-color-interaction-neutral-strong-pressed\n );\n --toggle-thumb-background-color: var(\n --sds-color-interaction-neutral-strong-pressed\n );\n }\n\n .sds-toggle-switch--checked {\n --toggle-track-background-color: var(\n --sds-color-interaction-primary-strong-default\n );\n --toggle-track-border-color: var(--toggle-track-background-color);\n --toggle-thumb-background-color: var(--sds-color-layout-background-default);\n --toggle-thumb-color: var(--sds-color-text-primary);\n --toggle-thumb-position: calc(\n var(--toggle-track-width) - var(--toggle-thumb-size) - 2 *\n var(--toggle-thumb-offset)\n );\n }\n\n .sds-toggle-switch--checked:hover,\n .sds-toggle-switch--checked:active {\n --toggle-thumb-background-color: var(\n --sds-color-layout-background-default\n );\n }\n\n .sds-toggle-switch--checked:hover {\n --toggle-track-background-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n --toggle-track-border-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n }\n\n .sds-toggle-switch--checked:active {\n --toggle-track-background-color: var(\n --sds-color-interaction-primary-strong-pressed\n );\n --toggle-track-border-color: var(\n --sds-color-interaction-primary-strong-pressed\n );\n }\n\n .sds-toggle-switch__inner {\n align-items: center;\n display: inline-flex;\n padding: calc(var(--sds-space-padding-small) - var(--toggle-border-width)) 0;\n position: relative;\n }\n\n .sds-toggle-switch__label-text {\n align-items: center;\n color: var(--sds-color-text-primary);\n display: flex;\n font-size: var(--sds-typography-body-fontsize-regular);\n font-weight: var(--sds-typography-weight-regular);\n line-height: var(--sds-typography-body-lineheight-regular);\n padding: var(--sds-space-padding-tiny);\n }\n\n .sds-toggle-switch__track {\n -webkit-appearance: none;\n appearance: none;\n cursor: pointer;\n background-color: var(--toggle-track-background-color);\n border: var(--toggle-border-width) solid var(--toggle-track-border-color);\n border-radius: var(--toggle-thumb-size);\n height: calc(\n var(--toggle-thumb-size) + calc(2 * var(--toggle-thumb-offset))\n );\n width: var(--toggle-track-width);\n padding: var(--toggle-padding);\n transition:\n background-color var(--toggle-transition-duration),\n border-color var(--toggle-transition-duration);\n }\n\n .sds-toggle-switch__track:focus-visible {\n outline: var(--sds-focus-outline);\n outline-offset: 0;\n }\n\n .sds-toggle-switch__thumb {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n left: var(--toggle-thumb-offset);\n height: var(--toggle-thumb-size);\n width: var(--toggle-thumb-size);\n border-radius: var(--sds-space-border-radius-full);\n transition: all var(--toggle-transition-duration);\n background-color: var(--toggle-thumb-background-color);\n transform: translateX(var(--toggle-thumb-position));\n padding: var(--sds-space-border-weight-regular);\n }\n\n .sds-toggle-switch__thumb > * {\n transition: all var(--toggle-transition-duration);\n color: var(--toggle-thumb-color);\n font-size: var(--sds-base-size-s);\n }\n\n .sds-toggle-switch--error,\n .sds-toggle-switch--error.sds-toggle-switch--checked {\n --toggle-track-border-color: var(\n --sds-color-interaction-danger-strong-default\n );\n --toggle-thumb-background-color: var(\n --sds-color-interaction-danger-strong-default\n );\n }\n\n .sds-toggle-switch--error:hover, .sds-toggle-switch--error.sds-toggle-switch--checked:hover {\n --toggle-track-border-color: var(\n --sds-color-interaction-danger-strong-highlight\n );\n --toggle-thumb-background-color: var(\n --sds-color-interaction-danger-strong-highlight\n );\n }\n\n .sds-toggle-switch--error:active, .sds-toggle-switch--error.sds-toggle-switch--checked:active {\n --toggle-track-border-color: var(\n --sds-color-interaction-danger-strong-pressed\n );\n --toggle-thumb-background-color: var(\n --sds-color-interaction-danger-strong-pressed\n );\n }\n\n /* stylelint-disable-next-line no-descending-specificity */\n\n .sds-toggle-switch--error.sds-toggle-switch--checked {\n --toggle-track-background-color: var(\n --sds-color-interaction-danger-strong-default\n );\n --toggle-thumb-background-color: var(--sds-color-text-on-strong);\n }\n\n .sds-toggle-switch--error.sds-toggle-switch--checked:hover {\n --toggle-track-background-color: var(\n --sds-color-interaction-danger-strong-highlight\n );\n --toggle-thumb-background-color: var(--sds-color-text-on-strong);\n }\n\n .sds-toggle-switch--error.sds-toggle-switch--checked:active {\n --toggle-track-background-color: var(\n --sds-color-interaction-danger-strong-pressed\n );\n --toggle-thumb-background-color: var(--sds-color-text-on-strong);\n }\n",".sds-toggle-button {\n --toggle-button-background-color: inherit;\n --toggle-button-border-color: var(\n --sds-color-interaction-primary-strong-default\n );\n --toggle-button-color: var(--sds-color-text-primary);\n --toggle-button-outline: none;\n\n display: inline-block;\n}\n\n .sds-toggle-button__label {\n align-items: center;\n background-color: var(--toggle-button-background-color);\n border: var(--sds-space-border-weight-regular) solid\n var(--toggle-button-border-color);\n border-radius: var(--sds-space-border-radius-full);\n color: var(--toggle-button-color);\n cursor: pointer;\n display: flex;\n gap: var(--sds-space-gap-small);\n font-size: var(--sds-typography-body-fontsize-regular);\n font-weight: var(--sds-typography-weight-regular);\n line-height: var(--sds-typography-body-lineheight-regular);\n padding: calc(\n var(--sds-space-padding-small) - var(--sds-space-border-weight-regular)\n );\n outline: var(--toggle-button-outline);\n outline-offset: 0;\n -webkit-user-select: none;\n user-select: none;\n }\n\n .sds-toggle-button__label-text {\n padding: 0 var(--sds-space-padding-tiny);\n }\n\n .sds-toggle-button__label:hover {\n --toggle-button-border-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n }\n\n .sds-toggle-button__label:active {\n --toggle-button-border-color: var(\n --sds-color-interaction-primary-strong-pressed\n );\n }\n\n .sds-toggle-button__label--checked {\n --toggle-button-background-color: var(\n --sds-color-interaction-primary-strong-default\n );\n --toggle-button-border-color: var(--toggle-button-background-color);\n --toggle-button-color: var(--sds-color-text-on-strong);\n }\n\n .sds-toggle-button__label--checked:hover {\n --toggle-button-background-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n }\n\n .sds-toggle-button__label--checked:active {\n --toggle-button-background-color: var(\n --sds-color-interaction-primary-strong-pressed\n );\n }\n\n .sds-toggle-button__label--checked:focus {\n --toggle-button-outline: var(--sds-focus-outline);\n }\n\n .sds-toggle-button__icon {\n height: var(--sds-base-size-m);\n width: var(--sds-base-size-m);\n transform: rotateY(0deg) rotate(0deg);\n transition: transform 0.3s ease;\n }\n\n .sds-toggle-button__icon--checked {\n transform: rotateY(0deg) rotate(-45deg);\n }\n\n .sds-toggle-button__input {\n cursor: pointer;\n position: absolute;\n opacity: 0;\n }\n\n .sds-toggle-button__input:focus-visible + .sds-toggle-button__label {\n --toggle-button-border-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n --toggle-button-outline: var(--sds-focus-outline);\n }\n\n .sds-toggle-button__input:focus-visible + .sds-toggle-button__label--checked {\n --toggle-button-background-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n }\n",".sds-toggle-segment__fieldset {\n display: flex;\n align-items: center;\n }\n\n .sds-toggle-segment__fieldset .sds-form-fieldset__legend {\n float: left;\n }\n .sds-toggle-segment__group {\n border-radius: var(--sds-space-border-radius-small);\n display: inline-grid;\n grid-auto-flow: column;\n outline: var(--sds-space-border-weight-regular) solid\n var(--sds-color-interaction-primary-strong-default);\n outline-offset: calc(var(--sds-space-border-weight-regular) * -1);\n }\n .sds-toggle-segment--fixed .sds-toggle-segment__group {\n grid-auto-columns: 1fr;\n }\n .sds-toggle-segment__option {\n align-items: center;\n border-radius: var(--sds-space-border-radius-small);\n display: flex;\n justify-content: center;\n }\n .sds-toggle-segment__option:hover {\n background: var(--sds-color-interaction-primary-transparent-highlight);\n }\n .sds-toggle-segment__option:active {\n background: var(--sds-color-interaction-primary-transparent-pressed);\n }\n .sds-toggle-segment__option--checked {\n background-color: var(--sds-color-interaction-primary-strong-default);\n color: var(--sds-color-text-on-strong);\n }\n .sds-toggle-segment__option--checked:hover {\n background-color: var(--sds-color-interaction-primary-strong-highlight);\n }\n .sds-toggle-segment__option--checked:active {\n background-color: var(--sds-color-interaction-primary-strong-pressed);\n }\n .sds-toggle-segment__option:has(:focus-visible) {\n outline: var(--sds-focus-outline);\n }\n .sds-toggle-segment__label {\n border-radius: var(--sds-space-border-radius-small);\n cursor: pointer;\n font-size: var(--sds-typography-body-fontsize-small);\n font-weight: var(--sds-typography-weight-regular);\n line-height: var(--sds-typography-body-lineheight-small);\n min-width: 44px;\n padding: var(--sds-space-padding-small);\n position: relative;\n text-align: center;\n width: 100%;\n }\n .sds-toggle-segment__input {\n opacity: 0;\n position: absolute;\n pointer-events: none;\n }\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../src/toggle-switch.pcss","../src/toggle-button.pcss","../src/toggle-segment.pcss"],"sourcesContent":[".sds-toggle-switch {\n --toggle-transition-duration: var(--sds-effect-animation-duration-medium);\n --toggle-track-width: var(--sds-base-size-l);\n --toggle-thumb-size: var(--sds-base-size-s1);\n --toggle-border-width: var(--sds-space-border-weight-regular);\n --toggle-padding: var(--sds-space-padding-minimal);\n --toggle-thumb-offset: var(--toggle-padding);\n --toggle-track-background-color: var(--sds-color-layout-background-default);\n --toggle-track-border-color: var(\n --sds-color-interaction-neutral-strong-default\n );\n --toggle-thumb-background-color: var(\n --sds-color-interaction-neutral-strong-default\n );\n --toggle-thumb-color: var(--sds-color-text-on-strong);\n --toggle-thumb-position: 0;\n}\n\n .sds-toggle-switch__label {\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n gap: var(--sds-space-padding-small);\n }\n\n .sds-toggle-switch:hover {\n --toggle-track-border-color: var(\n --sds-color-interaction-neutral-strong-highlight\n );\n --toggle-thumb-background-color: var(\n --sds-color-interaction-neutral-strong-highlight\n );\n }\n\n .sds-toggle-switch:active {\n --toggle-track-border-color: var(\n --sds-color-interaction-neutral-strong-pressed\n );\n --toggle-thumb-background-color: var(\n --sds-color-interaction-neutral-strong-pressed\n );\n }\n\n .sds-toggle-switch--checked {\n --toggle-track-background-color: var(\n --sds-color-interaction-primary-strong-default\n );\n --toggle-track-border-color: var(--toggle-track-background-color);\n --toggle-thumb-background-color: var(--sds-color-layout-background-default);\n --toggle-thumb-color: var(--sds-color-text-primary);\n --toggle-thumb-position: calc(\n var(--toggle-track-width) - var(--toggle-thumb-size) - 2 *\n var(--toggle-thumb-offset)\n );\n }\n\n .sds-toggle-switch--checked:hover,\n .sds-toggle-switch--checked:active {\n --toggle-thumb-background-color: var(\n --sds-color-layout-background-default\n );\n }\n\n .sds-toggle-switch--checked:hover {\n --toggle-track-background-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n --toggle-track-border-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n }\n\n .sds-toggle-switch--checked:active {\n --toggle-track-background-color: var(\n --sds-color-interaction-primary-strong-pressed\n );\n --toggle-track-border-color: var(\n --sds-color-interaction-primary-strong-pressed\n );\n }\n\n .sds-toggle-switch__inner {\n align-items: center;\n display: inline-flex;\n padding: calc(var(--sds-space-padding-small) - var(--toggle-border-width)) 0;\n position: relative;\n }\n\n .sds-toggle-switch__label-text {\n align-items: center;\n color: var(--sds-color-text-primary);\n display: flex;\n font-size: var(--sds-typography-body-fontsize-regular);\n font-weight: var(--sds-typography-weight-regular);\n line-height: var(--sds-typography-body-lineheight-regular);\n padding: var(--sds-space-padding-tiny);\n }\n\n .sds-toggle-switch__track {\n -webkit-appearance: none;\n appearance: none;\n cursor: pointer;\n background-color: var(--toggle-track-background-color);\n border: var(--toggle-border-width) solid var(--toggle-track-border-color);\n border-radius: var(--toggle-thumb-size);\n height: calc(\n var(--toggle-thumb-size) + calc(2 * var(--toggle-thumb-offset))\n );\n width: var(--toggle-track-width);\n padding: var(--toggle-padding);\n transition:\n background-color var(--toggle-transition-duration),\n border-color var(--toggle-transition-duration);\n }\n\n .sds-toggle-switch__track:focus-visible {\n outline: var(--sds-focus-outline);\n outline-offset: 0;\n }\n\n .sds-toggle-switch__thumb {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n left: var(--toggle-thumb-offset);\n height: var(--toggle-thumb-size);\n width: var(--toggle-thumb-size);\n border-radius: var(--sds-space-border-radius-full);\n transition: all var(--toggle-transition-duration);\n background-color: var(--toggle-thumb-background-color);\n transform: translateX(var(--toggle-thumb-position));\n padding: var(--sds-space-border-weight-regular);\n }\n\n .sds-toggle-switch__thumb > * {\n transition: all var(--toggle-transition-duration);\n color: var(--toggle-thumb-color);\n font-size: var(--sds-base-size-s);\n }\n\n .sds-toggle-switch--error,\n .sds-toggle-switch--error.sds-toggle-switch--checked {\n --toggle-track-border-color: var(\n --sds-color-interaction-danger-strong-default\n );\n --toggle-thumb-background-color: var(\n --sds-color-interaction-danger-strong-default\n );\n }\n\n .sds-toggle-switch--error:hover, .sds-toggle-switch--error.sds-toggle-switch--checked:hover {\n --toggle-track-border-color: var(\n --sds-color-interaction-danger-strong-highlight\n );\n --toggle-thumb-background-color: var(\n --sds-color-interaction-danger-strong-highlight\n );\n }\n\n .sds-toggle-switch--error:active, .sds-toggle-switch--error.sds-toggle-switch--checked:active {\n --toggle-track-border-color: var(\n --sds-color-interaction-danger-strong-pressed\n );\n --toggle-thumb-background-color: var(\n --sds-color-interaction-danger-strong-pressed\n );\n }\n\n /* stylelint-disable-next-line no-descending-specificity */\n\n .sds-toggle-switch--error.sds-toggle-switch--checked {\n --toggle-track-background-color: var(\n --sds-color-interaction-danger-strong-default\n );\n --toggle-thumb-background-color: var(--sds-color-text-on-strong);\n }\n\n .sds-toggle-switch--error.sds-toggle-switch--checked:hover {\n --toggle-track-background-color: var(\n --sds-color-interaction-danger-strong-highlight\n );\n --toggle-thumb-background-color: var(--sds-color-text-on-strong);\n }\n\n .sds-toggle-switch--error.sds-toggle-switch--checked:active {\n --toggle-track-background-color: var(\n --sds-color-interaction-danger-strong-pressed\n );\n --toggle-thumb-background-color: var(--sds-color-text-on-strong);\n }\n",".sds-toggle-button {\n --toggle-button-background-color: inherit;\n --toggle-button-border-color: var(\n --sds-color-interaction-primary-strong-default\n );\n --toggle-button-color: var(--sds-color-text-primary);\n --toggle-button-outline: none;\n\n display: inline-block;\n}\n\n .sds-toggle-button__label {\n align-items: center;\n background-color: var(--toggle-button-background-color);\n border: var(--sds-space-border-weight-regular) solid\n var(--toggle-button-border-color);\n border-radius: var(--sds-space-border-radius-full);\n color: var(--toggle-button-color);\n cursor: pointer;\n display: flex;\n gap: var(--sds-space-gap-small);\n font-size: var(--sds-typography-body-fontsize-regular);\n font-weight: var(--sds-typography-weight-regular);\n line-height: var(--sds-typography-body-lineheight-regular);\n padding: calc(\n var(--sds-space-padding-small) - var(--sds-space-border-weight-regular)\n );\n outline: var(--toggle-button-outline);\n outline-offset: 0;\n -webkit-user-select: none;\n user-select: none;\n }\n\n .sds-toggle-button__label-text {\n padding: 0 var(--sds-space-padding-tiny);\n }\n\n .sds-toggle-button__label:hover {\n --toggle-button-border-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n }\n\n .sds-toggle-button__label:active {\n --toggle-button-border-color: var(\n --sds-color-interaction-primary-strong-pressed\n );\n }\n\n .sds-toggle-button__label--checked {\n --toggle-button-background-color: var(\n --sds-color-interaction-primary-strong-default\n );\n --toggle-button-border-color: var(--toggle-button-background-color);\n --toggle-button-color: var(--sds-color-text-on-strong);\n }\n\n .sds-toggle-button__label--checked:hover {\n --toggle-button-background-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n }\n\n .sds-toggle-button__label--checked:active {\n --toggle-button-background-color: var(\n --sds-color-interaction-primary-strong-pressed\n );\n }\n\n .sds-toggle-button__label--checked:focus {\n --toggle-button-outline: var(--sds-focus-outline);\n }\n\n .sds-toggle-button__icon {\n height: var(--sds-base-size-m);\n width: var(--sds-base-size-m);\n transform: rotateY(0deg) rotate(0deg);\n transition: transform 0.3s ease;\n }\n\n .sds-toggle-button__icon--checked {\n transform: rotateY(0deg) rotate(-45deg);\n }\n\n .sds-toggle-button__input {\n cursor: pointer;\n position: absolute;\n opacity: 0;\n }\n\n .sds-toggle-button__input:focus-visible + .sds-toggle-button__label {\n --toggle-button-border-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n --toggle-button-outline: var(--sds-focus-outline);\n }\n\n .sds-toggle-button__input:focus-visible + .sds-toggle-button__label--checked {\n --toggle-button-background-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n }\n",".sds-toggle-segment__fieldset {\n display: flex;\n align-items: center;\n }\n\n .sds-toggle-segment__fieldset .sds-form-fieldset__legend {\n float: left;\n }\n .sds-toggle-segment__group {\n border-radius: var(--sds-space-border-radius-small);\n display: inline-grid;\n grid-auto-flow: column;\n outline: var(--sds-space-border-weight-regular) solid\n var(--sds-color-interaction-primary-strong-default);\n outline-offset: calc(var(--sds-space-border-weight-regular) * -1);\n }\n .sds-toggle-segment--fixed .sds-toggle-segment__group {\n grid-auto-columns: 1fr;\n }\n .sds-toggle-segment__option {\n align-items: center;\n border-radius: var(--sds-space-border-radius-small);\n display: flex;\n justify-content: center;\n }\n .sds-toggle-segment__option:hover {\n background: var(--sds-color-interaction-primary-transparent-highlight);\n }\n .sds-toggle-segment__option:active {\n background: var(--sds-color-interaction-primary-transparent-pressed);\n }\n .sds-toggle-segment__option--checked {\n background-color: var(--sds-color-interaction-primary-strong-default);\n color: var(--sds-color-text-on-strong);\n }\n .sds-toggle-segment__option--checked:hover {\n background-color: var(--sds-color-interaction-primary-strong-highlight);\n }\n .sds-toggle-segment__option--checked:active {\n background-color: var(--sds-color-interaction-primary-strong-pressed);\n }\n .sds-toggle-segment__option:has(:focus-visible) {\n outline: var(--sds-focus-outline);\n }\n .sds-toggle-segment__label {\n border-radius: var(--sds-space-border-radius-small);\n cursor: pointer;\n font-size: var(--sds-typography-body-fontsize-small);\n font-weight: var(--sds-typography-weight-regular);\n line-height: var(--sds-typography-body-lineheight-small);\n min-width: 44px;\n padding: var(--sds-space-padding-small);\n position: relative;\n text-align: center;\n width: 100%;\n }\n .sds-toggle-segment__input {\n opacity: 0;\n position: absolute;\n pointer-events: none;\n }\n"],"mappings":"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","names":[]}
package/dist/index.d.mts CHANGED
@@ -1,16 +1,23 @@
1
1
  import * as react from 'react';
2
- import { ReactNode, ChangeEventHandler, InputHTMLAttributes, ChangeEvent } from 'react';
2
+ import { ReactNode, InputHTMLAttributes, ChangeEventHandler, ChangeEvent } from 'react';
3
3
  import { FieldsetProps } from '@sikt/sds-form';
4
4
 
5
- interface ToggleSwitchProps {
5
+ interface ToggleSwitchBaseProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "aria-label" | "aria-labelledby"> {
6
6
  checked?: boolean;
7
- label: ReactNode;
8
- labelFirst?: boolean;
9
7
  showIcons?: boolean;
10
8
  error?: boolean;
11
9
  onChange?: ChangeEventHandler<HTMLInputElement>;
12
10
  className?: string;
13
11
  }
12
+ type ToggleSwitchProps = ToggleSwitchBaseProps & ({
13
+ label: NonNullable<ReactNode>;
14
+ labelFirst?: boolean;
15
+ "aria-labelledby"?: never;
16
+ } | {
17
+ label?: never;
18
+ labelFirst?: never;
19
+ "aria-labelledby": string;
20
+ });
14
21
  declare const ToggleSwitch: react.ForwardRefExoticComponent<ToggleSwitchProps & react.RefAttributes<HTMLInputElement>>;
15
22
 
16
23
  interface ToggleButtonProps {
package/dist/index.d.ts CHANGED
@@ -1,16 +1,23 @@
1
1
  import * as react from 'react';
2
- import { ReactNode, ChangeEventHandler, InputHTMLAttributes, ChangeEvent } from 'react';
2
+ import { ReactNode, InputHTMLAttributes, ChangeEventHandler, ChangeEvent } from 'react';
3
3
  import { FieldsetProps } from '@sikt/sds-form';
4
4
 
5
- interface ToggleSwitchProps {
5
+ interface ToggleSwitchBaseProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "aria-label" | "aria-labelledby"> {
6
6
  checked?: boolean;
7
- label: ReactNode;
8
- labelFirst?: boolean;
9
7
  showIcons?: boolean;
10
8
  error?: boolean;
11
9
  onChange?: ChangeEventHandler<HTMLInputElement>;
12
10
  className?: string;
13
11
  }
12
+ type ToggleSwitchProps = ToggleSwitchBaseProps & ({
13
+ label: NonNullable<ReactNode>;
14
+ labelFirst?: boolean;
15
+ "aria-labelledby"?: never;
16
+ } | {
17
+ label?: never;
18
+ labelFirst?: never;
19
+ "aria-labelledby": string;
20
+ });
14
21
  declare const ToggleSwitch: react.ForwardRefExoticComponent<ToggleSwitchProps & react.RefAttributes<HTMLInputElement>>;
15
22
 
16
23
  interface ToggleButtonProps {
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- "use strict";var e=require("react"),s=require("clsx"),l=require("@sikt/sds-icons"),t=require("react/jsx-runtime"),a=require("@sikt/sds-form");function c(e){return e&&e.__esModule?e:{default:e}}var d=c(s),o=e.forwardRef((({checked:s=!1,label:a,labelFirst:c=!1,showIcons:o=!0,error:n=!1,onChange:g,className:r,...i},h)=>{const u=e.useId(),m=t.jsx("div",{className:"sds-toggle-switch__label-text",children:a});return t.jsx("div",{className:d.default("sds-toggle-switch",s&&"sds-toggle-switch--checked",n&&"sds-toggle-switch--error",r),"data-testid":"sds-toggle-switch",children:t.jsxs("label",{className:"sds-toggle-switch__label",htmlFor:u,children:[c&&m,t.jsxs("div",{className:"sds-toggle-switch__inner",children:[t.jsx("input",{ref:h,id:u,type:"checkbox",role:"switch",className:"sds-toggle-switch__track",checked:s,"aria-invalid":n,onChange:g,readOnly:!g,...i}),t.jsxs("div",{className:"sds-toggle-switch__thumb",children:[o&&s&&t.jsx(l.CheckIcon,{}),o&&!s&&t.jsx(l.XIcon,{})]})]}),!c&&m]})})}));o.displayName="ToggleSwitch";var n=e.forwardRef((({checked:s,label:a,showIcons:c=!0,onChange:o,className:n,...g},r)=>{const i=e.useId();return t.jsxs("div",{className:d.default("sds-toggle-button",n),...g,children:[t.jsx("input",{ref:r,type:"checkbox",className:"sds-toggle-button__input",onChange:o,readOnly:!o,checked:s,"aria-checked":s,id:i}),t.jsxs("label",{className:d.default("sds-toggle-button__label",s&&"sds-toggle-button__label--checked"),htmlFor:i,children:[t.jsx("div",{className:"sds-toggle-button__label-text",children:a}),c&&t.jsx(l.PlusCircleIcon,{className:d.default("sds-toggle-button__icon",s&&"sds-toggle-button__icon--checked")})]})]})}));n.displayName="ToggleButton";var g=e.forwardRef((({children:e,variant:s="default",className:l,...c},o)=>t.jsx("div",{className:d.default("sds-toggle-segment","default"!==s&&"sds-toggle-segment--".concat(s),l),children:t.jsx(a.Fieldset,{className:"sds-toggle-segment__fieldset",...c,ref:o,children:t.jsx("div",{className:"sds-toggle-segment__group",children:e})})})));g.displayName="ToggleSegment";var r=e.forwardRef((({value:s,label:l,checked:c,onChange:o,className:n,...g},r)=>{var i,h;const{name:u}=null!=(i=a.useFieldset())?i:{},m=e.useId(),_=null!=(h=g.id)?h:m;return t.jsxs("div",{className:d.default("sds-toggle-segment__option",c&&"sds-toggle-segment__option--checked",n),children:[t.jsx("input",{id:_,name:u,ref:r,type:"radio",onChange:o,className:"sds-toggle-segment__input",value:s,checked:c,...g}),t.jsx("label",{className:"sds-toggle-segment__label",htmlFor:_,children:l})]})}));r.displayName="ToggleSegmentOption",exports.ToggleButton=n,exports.ToggleSegment=g,exports.ToggleSegmentOption=r,exports.ToggleSwitch=o;//# sourceMappingURL=index.js.map
1
+ "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 CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../ToggleSwitch.tsx","../ToggleButton.tsx","../ToggleSegment.tsx","../ToggleSegmentOption.tsx"],"names":["forwardRef","useId","clsx","jsx","jsxs"],"mappings":"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","sourcesContent":["import { ReactNode, ChangeEventHandler, useId, forwardRef } from \"react\";\nimport clsx from \"clsx\";\nimport { CheckIcon, XIcon } from \"@sikt/sds-icons\";\nimport \"./toggle-switch.pcss\";\n\nexport interface ToggleSwitchProps {\n checked?: boolean;\n label: ReactNode;\n labelFirst?: boolean;\n showIcons?: boolean;\n error?: boolean;\n onChange?: ChangeEventHandler<HTMLInputElement>;\n className?: string;\n}\n\nexport const ToggleSwitch = forwardRef<HTMLInputElement, ToggleSwitchProps>(\n (\n {\n checked = false,\n label,\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\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 className=\"sds-toggle-switch__label\" htmlFor={id}>\n {labelFirst && labelElement}\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 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 {!labelFirst && labelElement}\n </label>\n </div>\n );\n },\n);\nToggleSwitch.displayName = \"ToggleSwitch\";\n","import { ChangeEventHandler, forwardRef, ReactNode, useId } from \"react\";\nimport clsx from \"clsx\";\nimport { PlusCircleIcon } from \"@sikt/sds-icons\";\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 { ReactNode, forwardRef } from \"react\";\nimport { Fieldset, FieldsetProps } from \"@sikt/sds-form\";\nimport clsx from \"clsx\";\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 <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 {\n ChangeEvent,\n InputHTMLAttributes,\n ReactNode,\n forwardRef,\n useId,\n} from \"react\";\nimport \"./toggle-segment.pcss\";\nimport clsx from \"clsx\";\nimport { useFieldset } from \"@sikt/sds-form\";\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"]}
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","_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 CHANGED
@@ -1 +1 @@
1
- import{forwardRef as e,useId as s}from"react";import l from"clsx";import{CheckIcon as t,XIcon as a,PlusCircleIcon as c}from"@sikt/sds-icons";import{jsx as o,jsxs as d}from"react/jsx-runtime";import{Fieldset as n,useFieldset as g}from"@sikt/sds-form";var i=e((({checked:e=!1,label:c,labelFirst:n=!1,showIcons:g=!0,error:i=!1,onChange:r,className:m,...h},_)=>{const u=s(),N=o("div",{className:"sds-toggle-switch__label-text",children:c});return o("div",{className:l("sds-toggle-switch",e&&"sds-toggle-switch--checked",i&&"sds-toggle-switch--error",m),"data-testid":"sds-toggle-switch",children:d("label",{className:"sds-toggle-switch__label",htmlFor:u,children:[n&&N,d("div",{className:"sds-toggle-switch__inner",children:[o("input",{ref:_,id:u,type:"checkbox",role:"switch",className:"sds-toggle-switch__track",checked:e,"aria-invalid":i,onChange:r,readOnly:!r,...h}),d("div",{className:"sds-toggle-switch__thumb",children:[g&&e&&o(t,{}),g&&!e&&o(a,{})]})]}),!n&&N]})})}));i.displayName="ToggleSwitch";var r=e((({checked:e,label:t,showIcons:a=!0,onChange:n,className:g,...i},r)=>{const m=s();return d("div",{className:l("sds-toggle-button",g),...i,children:[o("input",{ref:r,type:"checkbox",className:"sds-toggle-button__input",onChange:n,readOnly:!n,checked:e,"aria-checked":e,id:m}),d("label",{className:l("sds-toggle-button__label",e&&"sds-toggle-button__label--checked"),htmlFor:m,children:[o("div",{className:"sds-toggle-button__label-text",children:t}),a&&o(c,{className:l("sds-toggle-button__icon",e&&"sds-toggle-button__icon--checked")})]})]})}));r.displayName="ToggleButton";var m=e((({children:e,variant:s="default",className:t,...a},c)=>o("div",{className:l("sds-toggle-segment","default"!==s&&"sds-toggle-segment--".concat(s),t),children:o(n,{className:"sds-toggle-segment__fieldset",...a,ref:c,children:o("div",{className:"sds-toggle-segment__group",children:e})})})));m.displayName="ToggleSegment";var h=e((({value:e,label:t,checked:a,onChange:c,className:n,...i},r)=>{var m,h;const{name:_}=null!=(m=g())?m:{},u=s(),N=null!=(h=i.id)?h:u;return d("div",{className:l("sds-toggle-segment__option",a&&"sds-toggle-segment__option--checked",n),children:[o("input",{id:N,name:_,ref:r,type:"radio",onChange:c,className:"sds-toggle-segment__input",value:e,checked:a,...i}),o("label",{className:"sds-toggle-segment__label",htmlFor:N,children:t})]})}));h.displayName="ToggleSegmentOption";export{r as ToggleButton,m as ToggleSegment,h as ToggleSegmentOption,i as ToggleSwitch};//# sourceMappingURL=index.mjs.map
1
+ 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 CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../ToggleSwitch.tsx","../ToggleButton.tsx","../ToggleSegment.tsx","../ToggleSegmentOption.tsx"],"names":["forwardRef","useId","clsx","jsx","jsxs"],"mappings":"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","sourcesContent":["import { ReactNode, ChangeEventHandler, useId, forwardRef } from \"react\";\nimport clsx from \"clsx\";\nimport { CheckIcon, XIcon } from \"@sikt/sds-icons\";\nimport \"./toggle-switch.pcss\";\n\nexport interface ToggleSwitchProps {\n checked?: boolean;\n label: ReactNode;\n labelFirst?: boolean;\n showIcons?: boolean;\n error?: boolean;\n onChange?: ChangeEventHandler<HTMLInputElement>;\n className?: string;\n}\n\nexport const ToggleSwitch = forwardRef<HTMLInputElement, ToggleSwitchProps>(\n (\n {\n checked = false,\n label,\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\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 className=\"sds-toggle-switch__label\" htmlFor={id}>\n {labelFirst && labelElement}\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 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 {!labelFirst && labelElement}\n </label>\n </div>\n );\n },\n);\nToggleSwitch.displayName = \"ToggleSwitch\";\n","import { ChangeEventHandler, forwardRef, ReactNode, useId } from \"react\";\nimport clsx from \"clsx\";\nimport { PlusCircleIcon } from \"@sikt/sds-icons\";\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 { ReactNode, forwardRef } from \"react\";\nimport { Fieldset, FieldsetProps } from \"@sikt/sds-form\";\nimport clsx from \"clsx\";\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 <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 {\n ChangeEvent,\n InputHTMLAttributes,\n ReactNode,\n forwardRef,\n useId,\n} from \"react\";\nimport \"./toggle-segment.pcss\";\nimport clsx from \"clsx\";\nimport { useFieldset } from \"@sikt/sds-form\";\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"]}
1
+ {"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 CHANGED
@@ -1,12 +1,18 @@
1
1
  {
2
2
  "name": "@sikt/sds-toggle",
3
- "version": "3.0.2",
3
+ "version": "4.0.1",
4
4
  "license": "UNLICENSED",
5
+ "homepage": "https://designsystem.sikt.no/",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "git+https://gitlab.sikt.no/designsystem/sds-komponentbibliotek.git"
9
+ },
5
10
  "type": "commonjs",
6
11
  "main": "dist/index.js",
7
12
  "module": "dist/index.mjs",
8
13
  "exports": {
9
14
  ".": {
15
+ "style": "./dist/index.css",
10
16
  "import": {
11
17
  "types": "./dist/index.d.mts",
12
18
  "default": "./dist/index.mjs"
@@ -14,8 +20,7 @@
14
20
  "require": {
15
21
  "types": "./dist/index.d.ts",
16
22
  "default": "./dist/index.js"
17
- },
18
- "style": "./dist/index.css"
23
+ }
19
24
  },
20
25
  "./dist/*": "./dist/*"
21
26
  },
@@ -30,16 +35,15 @@
30
35
  "build": "tsup"
31
36
  },
32
37
  "dependencies": {
33
- "@sikt/sds-core": "^3.0.2",
34
- "@sikt/sds-form": "^2.1.0",
35
- "@sikt/sds-icons": "^2.0.1",
36
- "@sikt/sds-tokens": "^1.0.1"
38
+ "@sikt/sds-core": "^4.1.1",
39
+ "@sikt/sds-form": "^3.0.1",
40
+ "@sikt/sds-icons": "^2.0.2"
37
41
  },
38
42
  "peerDependencies": {
39
- "@types/react": "^18.0.0",
40
- "@types/react-dom": "^18.0.0",
41
- "clsx": "^1.0.0 || ^2.0.0",
42
- "react": "^18.0.0",
43
- "react-dom": "^18.0.0"
43
+ "@types/react": "^18.0.0 || ^19.0.0",
44
+ "@types/react-dom": "^18.0.0 || ^19.0.0",
45
+ "clsx": "^2.1.0",
46
+ "react": "^18.0.0 || ^19.0.0",
47
+ "react-dom": "^18.0.0 || ^19.0.0"
44
48
  }
45
49
  }