@delightui/components 0.1.65 → 0.1.66

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 (12) hide show
  1. package/dist/cjs/components/atoms/Checkbox/Checkbox.d.ts +1 -1
  2. package/dist/cjs/components/atoms/Checkbox/Checkbox.types.d.ts +1 -1
  3. package/dist/cjs/components/atoms/RadioButton/RadioButton.d.ts +1 -1
  4. package/dist/cjs/components/atoms/RadioButton/RadioButton.types.d.ts +1 -1
  5. package/dist/cjs/library.css +110 -12
  6. package/dist/esm/components/atoms/Checkbox/Checkbox.d.ts +1 -1
  7. package/dist/esm/components/atoms/Checkbox/Checkbox.types.d.ts +1 -1
  8. package/dist/esm/components/atoms/RadioButton/RadioButton.d.ts +1 -1
  9. package/dist/esm/components/atoms/RadioButton/RadioButton.types.d.ts +1 -1
  10. package/dist/esm/library.css +110 -12
  11. package/dist/index.d.ts +4 -4
  12. package/package.json +1 -1
package/dist/cjs/components/atoms/Checkbox/Checkbox.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- declare const Checkbox: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "checked" | "value" | "type"> & {
2
+ declare const Checkbox: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "checked" | "value" | "type" | "size"> & {
3
3
  children?: React.ReactNode;
4
4
  size?: import("./Checkbox.types").CheckboxSizeEnum;
5
5
  checked?: boolean;
package/dist/cjs/components/atoms/Checkbox/Checkbox.types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { InputHTMLAttributes } from 'react';
2
2
  export type CheckboxSizeEnum = 'Small' | 'Medium' | 'Large';
3
3
  export type CheckboxLabelAlignmentEnum = 'Left' | 'Right';
4
- export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'value'> & {
4
+ export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'value' | 'size'> & {
5
5
  /**
6
6
  * The label of the checkbox.
7
7
  */
package/dist/cjs/components/atoms/RadioButton/RadioButton.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- declare const RadioButton: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "checked" | "value" | "type"> & {
2
+ declare const RadioButton: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "checked" | "value" | "type" | "size"> & {
3
3
  children?: React.ReactNode;
4
4
  size?: import("./RadioButton.types").RadioButtonSizeEnum;
5
5
  checked?: boolean;
package/dist/cjs/components/atoms/RadioButton/RadioButton.types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { InputHTMLAttributes } from 'react';
2
2
  export type RadioButtonSizeEnum = 'Small' | 'Medium' | 'Large';
3
3
  export type RadioButtonLabelAlignmentEnum = 'Left' | 'Right';
4
- export type RadioButtonProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'value'> & {
4
+ export type RadioButtonProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'value' | 'size'> & {
5
5
  /**
6
6
  * The label of the radio button.
7
7
  */
package/dist/cjs/library.css CHANGED
@@ -557,9 +557,27 @@
557
557
  display: inline-flex;
558
558
  align-items: center;
559
559
  gap: var(--toggle-row-gap) var(--toggle-column-gap);
560
+ color: var(--toggle-color);
560
561
  height: var(--toggle-height);
562
+ min-height: var(--toggle-min-height);
563
+ max-height: var(--toggle-max-height);
561
564
  width: var(--toggle-width);
562
- color: var(--toggle-color);
565
+ min-width: var(--toggle-min-width);
566
+ max-width: var(--toggle-max-width);
567
+ padding-top: var(--toggle-padding-top);
568
+ padding-left: var(--toggle-padding-left);
569
+ padding-bottom: var(--toggle-padding-bottom);
570
+ padding-right: var(--toggle-padding-right);
571
+ border-bottom-width: var(--toggle-border-bottom-width);
572
+ border-left-width: var(--toggle-border-left-width);
573
+ border-right-width: var(--toggle-border-right-width);
574
+ border-top-width: var(--toggle-border-top-width);
575
+ border-style: var(--toggle-border-style);
576
+ border-color: var(--toggle-border-color);
577
+ border-top-left-radius: var(--toggle-border-top-left-radius);
578
+ border-top-right-radius: var(--toggle-border-top-right-radius);
579
+ border-bottom-right-radius: var(--toggle-border-bottom-right-radius);
580
+ border-bottom-left-radius: var(--toggle-border-bottom-left-radius);
563
581
  }
564
582
  .Toggle-module_toggle__gOwa0 .Toggle-module_input__aAn85 {
565
583
  position: absolute;
@@ -4011,7 +4029,7 @@ span.flatpickr-weekday {
4011
4029
  letter-spacing: var(--table-letter-spacing);
4012
4030
  line-height: var(--table-line-height);
4013
4031
  table-layout: auto;
4014
- border-collapse: collapse;
4032
+ border-collapse: separate;
4015
4033
  display: table;
4016
4034
  overflow: auto;
4017
4035
  }
@@ -18074,45 +18092,77 @@ span.flatpickr-weekday {
18074
18092
  }
18075
18093
  [data-theme='dark'] [component-variant="toggle-unselected"], [data-theme='light'] [component-variant="toggle-unselected"] {
18076
18094
  --toggle-width: 100%;
18095
+ --toggle-color: var(--text-primary);
18096
+ --toggle-border-top-left-radius: var(--corner-radius-extra-small);
18097
+ --toggle-border-top-right-radius: var(--corner-radius-extra-small);
18098
+ --toggle-border-bottom-left-radius: var(--corner-radius-extra-small);
18099
+ --toggle-border-bottom-right-radius: var(--corner-radius-extra-small);
18100
+ --toggle-padding-left: var(--spacing-space-3);
18101
+ --toggle-padding-right: var(--spacing-space-3);
18102
+ --toggle-padding-top: var(--spacing-space-3);
18103
+ --toggle-padding-bottom: var(--spacing-space-3);
18077
18104
  --toggle-row-gap: var(--spacing-space-5);
18078
18105
  --toggle-column-gap: var(--spacing-space-5);
18079
18106
  --toggle-font-family: var(--font-family-body);
18080
18107
  --toggle-font-size: var(--font-size-body-small);
18081
18108
  --toggle-font-weight: var(--font-weight-regular);
18082
- --toggle-color: var(--text-primary);
18083
18109
  --toggle-line-height: var(--line-height-body-small);
18084
18110
  --toggle-paragraph-spacing: 0px;
18085
18111
  --toggle-paragraph-indent: 0px
18086
18112
  }
18087
18113
  [data-theme='dark'] [component-variant="toggle-unselected"]:hover:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="toggle-unselected"]:hover:not(:disabled):not([disabled]) {
18114
+ --toggle-color: var(--text-primary);
18115
+ --toggle-border-top-left-radius: var(--corner-radius-extra-small);
18116
+ --toggle-border-top-right-radius: var(--corner-radius-extra-small);
18117
+ --toggle-border-bottom-left-radius: var(--corner-radius-extra-small);
18118
+ --toggle-border-bottom-right-radius: var(--corner-radius-extra-small);
18119
+ --toggle-padding-left: var(--spacing-space-3);
18120
+ --toggle-padding-right: var(--spacing-space-3);
18121
+ --toggle-padding-top: var(--spacing-space-3);
18122
+ --toggle-padding-bottom: var(--spacing-space-3);
18088
18123
  --toggle-row-gap: var(--spacing-space-5);
18089
18124
  --toggle-column-gap: var(--spacing-space-5);
18090
18125
  --toggle-font-family: var(--font-family-body);
18091
18126
  --toggle-font-size: var(--font-size-body-small);
18092
18127
  --toggle-font-weight: var(--font-weight-regular);
18093
- --toggle-color: var(--text-primary);
18094
18128
  --toggle-line-height: var(--line-height-body-small);
18095
18129
  --toggle-paragraph-spacing: 0px;
18096
18130
  --toggle-paragraph-indent: 0px
18097
18131
  }
18098
18132
  [data-theme='dark'] [component-variant="toggle-unselected"][active]:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="toggle-unselected"][active]:not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="toggle-unselected"]:active:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="toggle-unselected"]:active:not(:disabled):not([disabled]) {
18133
+ --toggle-color: var(--text-primary);
18134
+ --toggle-border-top-left-radius: var(--corner-radius-extra-small);
18135
+ --toggle-border-top-right-radius: var(--corner-radius-extra-small);
18136
+ --toggle-border-bottom-left-radius: var(--corner-radius-extra-small);
18137
+ --toggle-border-bottom-right-radius: var(--corner-radius-extra-small);
18138
+ --toggle-padding-left: var(--spacing-space-3);
18139
+ --toggle-padding-right: var(--spacing-space-3);
18140
+ --toggle-padding-top: var(--spacing-space-3);
18141
+ --toggle-padding-bottom: var(--spacing-space-3);
18099
18142
  --toggle-row-gap: var(--spacing-space-5);
18100
18143
  --toggle-column-gap: var(--spacing-space-5);
18101
18144
  --toggle-font-family: var(--font-family-body);
18102
18145
  --toggle-font-size: var(--font-size-body-small);
18103
18146
  --toggle-font-weight: var(--font-weight-regular);
18104
- --toggle-color: var(--text-primary);
18105
18147
  --toggle-line-height: var(--line-height-body-small);
18106
18148
  --toggle-paragraph-spacing: 0px;
18107
18149
  --toggle-paragraph-indent: 0px
18108
18150
  }
18109
18151
  [data-theme='dark'] [component-variant="toggle-unselected"]:has(:focus-visible):not(:disabled):not([disabled]), [data-theme='light'] [component-variant="toggle-unselected"]:has(:focus-visible):not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="toggle-unselected"]:focus-visible:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="toggle-unselected"]:focus-visible:not(:disabled):not([disabled]) {
18152
+ --toggle-color: var(--text-primary);
18153
+ --toggle-border-top-left-radius: var(--corner-radius-extra-small);
18154
+ --toggle-border-top-right-radius: var(--corner-radius-extra-small);
18155
+ --toggle-border-bottom-left-radius: var(--corner-radius-extra-small);
18156
+ --toggle-border-bottom-right-radius: var(--corner-radius-extra-small);
18157
+ --toggle-padding-left: var(--spacing-space-3);
18158
+ --toggle-padding-right: var(--spacing-space-3);
18159
+ --toggle-padding-top: var(--spacing-space-3);
18160
+ --toggle-padding-bottom: var(--spacing-space-3);
18110
18161
  --toggle-row-gap: var(--spacing-space-5);
18111
18162
  --toggle-column-gap: var(--spacing-space-5);
18112
18163
  --toggle-font-family: var(--font-family-body);
18113
18164
  --toggle-font-size: var(--font-size-body-small);
18114
18165
  --toggle-font-weight: var(--font-weight-regular);
18115
- --toggle-color: var(--text-primary);
18116
18166
  --toggle-line-height: var(--line-height-body-small);
18117
18167
  --toggle-paragraph-spacing: 0px;
18118
18168
  --toggle-paragraph-indent: 0px
@@ -18121,57 +18171,97 @@ span.flatpickr-weekday {
18121
18171
  [data-theme='light'] [component-variant="toggle-unselected"][disabled],
18122
18172
  [data-theme='dark'] [component-variant="toggle-unselected"]:disabled,
18123
18173
  [data-theme='light'] [component-variant="toggle-unselected"]:disabled {
18174
+ --toggle-color: var(--text-primary);
18175
+ --toggle-border-top-left-radius: var(--corner-radius-extra-small);
18176
+ --toggle-border-top-right-radius: var(--corner-radius-extra-small);
18177
+ --toggle-border-bottom-left-radius: var(--corner-radius-extra-small);
18178
+ --toggle-border-bottom-right-radius: var(--corner-radius-extra-small);
18179
+ --toggle-padding-left: var(--spacing-space-3);
18180
+ --toggle-padding-right: var(--spacing-space-3);
18181
+ --toggle-padding-top: var(--spacing-space-3);
18182
+ --toggle-padding-bottom: var(--spacing-space-3);
18124
18183
  --toggle-row-gap: var(--spacing-space-5);
18125
18184
  --toggle-column-gap: var(--spacing-space-5);
18126
18185
  --toggle-font-family: var(--font-family-body);
18127
18186
  --toggle-font-size: var(--font-size-body-small);
18128
18187
  --toggle-font-weight: var(--font-weight-regular);
18129
- --toggle-color: var(--text-primary);
18130
18188
  --toggle-line-height: var(--line-height-body-small);
18131
18189
  --toggle-paragraph-spacing: 0px;
18132
18190
  --toggle-paragraph-indent: 0px
18133
18191
  }
18134
18192
  [data-theme='dark'] [component-variant="toggle-selected"], [data-theme='light'] [component-variant="toggle-selected"] {
18135
18193
  --toggle-width: 100%;
18194
+ --toggle-color: var(--text-primary);
18195
+ --toggle-border-top-left-radius: var(--corner-radius-extra-small);
18196
+ --toggle-border-top-right-radius: var(--corner-radius-extra-small);
18197
+ --toggle-border-bottom-left-radius: var(--corner-radius-extra-small);
18198
+ --toggle-border-bottom-right-radius: var(--corner-radius-extra-small);
18199
+ --toggle-padding-left: var(--spacing-space-3);
18200
+ --toggle-padding-right: var(--spacing-space-3);
18201
+ --toggle-padding-top: var(--spacing-space-3);
18202
+ --toggle-padding-bottom: var(--spacing-space-3);
18136
18203
  --toggle-row-gap: var(--spacing-space-5);
18137
18204
  --toggle-column-gap: var(--spacing-space-5);
18138
18205
  --toggle-font-family: var(--font-family-body);
18139
18206
  --toggle-font-size: var(--font-size-body-small);
18140
18207
  --toggle-font-weight: var(--font-weight-regular);
18141
- --toggle-color: var(--text-primary);
18142
18208
  --toggle-line-height: var(--line-height-body-small);
18143
18209
  --toggle-paragraph-spacing: 0px;
18144
18210
  --toggle-paragraph-indent: 0px
18145
18211
  }
18146
18212
  [data-theme='dark'] [component-variant="toggle-selected"]:hover:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="toggle-selected"]:hover:not(:disabled):not([disabled]) {
18213
+ --toggle-color: var(--text-primary);
18214
+ --toggle-border-top-left-radius: var(--corner-radius-extra-small);
18215
+ --toggle-border-top-right-radius: var(--corner-radius-extra-small);
18216
+ --toggle-border-bottom-left-radius: var(--corner-radius-extra-small);
18217
+ --toggle-border-bottom-right-radius: var(--corner-radius-extra-small);
18218
+ --toggle-padding-left: var(--spacing-space-3);
18219
+ --toggle-padding-right: var(--spacing-space-3);
18220
+ --toggle-padding-top: var(--spacing-space-3);
18221
+ --toggle-padding-bottom: var(--spacing-space-3);
18147
18222
  --toggle-row-gap: var(--spacing-space-5);
18148
18223
  --toggle-column-gap: var(--spacing-space-5);
18149
18224
  --toggle-font-family: var(--font-family-body);
18150
18225
  --toggle-font-size: var(--font-size-body-small);
18151
18226
  --toggle-font-weight: var(--font-weight-regular);
18152
- --toggle-color: var(--text-primary);
18153
18227
  --toggle-line-height: var(--line-height-body-small);
18154
18228
  --toggle-paragraph-spacing: 0px;
18155
18229
  --toggle-paragraph-indent: 0px
18156
18230
  }
18157
18231
  [data-theme='dark'] [component-variant="toggle-selected"][active]:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="toggle-selected"][active]:not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="toggle-selected"]:active:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="toggle-selected"]:active:not(:disabled):not([disabled]) {
18232
+ --toggle-color: var(--text-primary);
18233
+ --toggle-border-top-left-radius: var(--corner-radius-extra-small);
18234
+ --toggle-border-top-right-radius: var(--corner-radius-extra-small);
18235
+ --toggle-border-bottom-left-radius: var(--corner-radius-extra-small);
18236
+ --toggle-border-bottom-right-radius: var(--corner-radius-extra-small);
18237
+ --toggle-padding-left: var(--spacing-space-3);
18238
+ --toggle-padding-right: var(--spacing-space-3);
18239
+ --toggle-padding-top: var(--spacing-space-3);
18240
+ --toggle-padding-bottom: var(--spacing-space-3);
18158
18241
  --toggle-row-gap: var(--spacing-space-5);
18159
18242
  --toggle-column-gap: var(--spacing-space-5);
18160
18243
  --toggle-font-family: var(--font-family-body);
18161
18244
  --toggle-font-size: var(--font-size-body-small);
18162
18245
  --toggle-font-weight: var(--font-weight-regular);
18163
- --toggle-color: var(--text-primary);
18164
18246
  --toggle-line-height: var(--line-height-body-small);
18165
18247
  --toggle-paragraph-spacing: 0px;
18166
18248
  --toggle-paragraph-indent: 0px
18167
18249
  }
18168
18250
  [data-theme='dark'] [component-variant="toggle-selected"]:has(:focus-visible):not(:disabled):not([disabled]), [data-theme='light'] [component-variant="toggle-selected"]:has(:focus-visible):not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="toggle-selected"]:focus-visible:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="toggle-selected"]:focus-visible:not(:disabled):not([disabled]) {
18251
+ --toggle-color: var(--text-primary);
18252
+ --toggle-border-top-left-radius: var(--corner-radius-extra-small);
18253
+ --toggle-border-top-right-radius: var(--corner-radius-extra-small);
18254
+ --toggle-border-bottom-left-radius: var(--corner-radius-extra-small);
18255
+ --toggle-border-bottom-right-radius: var(--corner-radius-extra-small);
18256
+ --toggle-padding-left: var(--spacing-space-3);
18257
+ --toggle-padding-right: var(--spacing-space-3);
18258
+ --toggle-padding-top: var(--spacing-space-3);
18259
+ --toggle-padding-bottom: var(--spacing-space-3);
18169
18260
  --toggle-row-gap: var(--spacing-space-5);
18170
18261
  --toggle-column-gap: var(--spacing-space-5);
18171
18262
  --toggle-font-family: var(--font-family-body);
18172
18263
  --toggle-font-size: var(--font-size-body-small);
18173
18264
  --toggle-font-weight: var(--font-weight-regular);
18174
- --toggle-color: var(--text-primary);
18175
18265
  --toggle-line-height: var(--line-height-body-small);
18176
18266
  --toggle-paragraph-spacing: 0px;
18177
18267
  --toggle-paragraph-indent: 0px
@@ -18180,12 +18270,20 @@ span.flatpickr-weekday {
18180
18270
  [data-theme='light'] [component-variant="toggle-selected"][disabled],
18181
18271
  [data-theme='dark'] [component-variant="toggle-selected"]:disabled,
18182
18272
  [data-theme='light'] [component-variant="toggle-selected"]:disabled {
18273
+ --toggle-color: var(--text-primary);
18274
+ --toggle-border-top-left-radius: var(--corner-radius-extra-small);
18275
+ --toggle-border-top-right-radius: var(--corner-radius-extra-small);
18276
+ --toggle-border-bottom-left-radius: var(--corner-radius-extra-small);
18277
+ --toggle-border-bottom-right-radius: var(--corner-radius-extra-small);
18278
+ --toggle-padding-left: var(--spacing-space-3);
18279
+ --toggle-padding-right: var(--spacing-space-3);
18280
+ --toggle-padding-top: var(--spacing-space-3);
18281
+ --toggle-padding-bottom: var(--spacing-space-3);
18183
18282
  --toggle-row-gap: var(--spacing-space-5);
18184
18283
  --toggle-column-gap: var(--spacing-space-5);
18185
18284
  --toggle-font-family: var(--font-family-body);
18186
18285
  --toggle-font-size: var(--font-size-body-small);
18187
18286
  --toggle-font-weight: var(--font-weight-regular);
18188
- --toggle-color: var(--text-primary);
18189
18287
  --toggle-line-height: var(--line-height-body-small);
18190
18288
  --toggle-paragraph-spacing: 0px;
18191
18289
  --toggle-paragraph-indent: 0px
package/dist/esm/components/atoms/Checkbox/Checkbox.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- declare const Checkbox: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "checked" | "value" | "type"> & {
2
+ declare const Checkbox: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "checked" | "value" | "type" | "size"> & {
3
3
  children?: React.ReactNode;
4
4
  size?: import("./Checkbox.types").CheckboxSizeEnum;
5
5
  checked?: boolean;
package/dist/esm/components/atoms/Checkbox/Checkbox.types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { InputHTMLAttributes } from 'react';
2
2
  export type CheckboxSizeEnum = 'Small' | 'Medium' | 'Large';
3
3
  export type CheckboxLabelAlignmentEnum = 'Left' | 'Right';
4
- export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'value'> & {
4
+ export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'value' | 'size'> & {
5
5
  /**
6
6
  * The label of the checkbox.
7
7
  */
package/dist/esm/components/atoms/RadioButton/RadioButton.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- declare const RadioButton: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "checked" | "value" | "type"> & {
2
+ declare const RadioButton: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "checked" | "value" | "type" | "size"> & {
3
3
  children?: React.ReactNode;
4
4
  size?: import("./RadioButton.types").RadioButtonSizeEnum;
5
5
  checked?: boolean;
package/dist/esm/components/atoms/RadioButton/RadioButton.types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { InputHTMLAttributes } from 'react';
2
2
  export type RadioButtonSizeEnum = 'Small' | 'Medium' | 'Large';
3
3
  export type RadioButtonLabelAlignmentEnum = 'Left' | 'Right';
4
- export type RadioButtonProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'value'> & {
4
+ export type RadioButtonProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'value' | 'size'> & {
5
5
  /**
6
6
  * The label of the radio button.
7
7
  */
package/dist/esm/library.css CHANGED
@@ -557,9 +557,27 @@
557
557
  display: inline-flex;
558
558
  align-items: center;
559
559
  gap: var(--toggle-row-gap) var(--toggle-column-gap);
560
+ color: var(--toggle-color);
560
561
  height: var(--toggle-height);
562
+ min-height: var(--toggle-min-height);
563
+ max-height: var(--toggle-max-height);
561
564
  width: var(--toggle-width);
562
- color: var(--toggle-color);
565
+ min-width: var(--toggle-min-width);
566
+ max-width: var(--toggle-max-width);
567
+ padding-top: var(--toggle-padding-top);
568
+ padding-left: var(--toggle-padding-left);
569
+ padding-bottom: var(--toggle-padding-bottom);
570
+ padding-right: var(--toggle-padding-right);
571
+ border-bottom-width: var(--toggle-border-bottom-width);
572
+ border-left-width: var(--toggle-border-left-width);
573
+ border-right-width: var(--toggle-border-right-width);
574
+ border-top-width: var(--toggle-border-top-width);
575
+ border-style: var(--toggle-border-style);
576
+ border-color: var(--toggle-border-color);
577
+ border-top-left-radius: var(--toggle-border-top-left-radius);
578
+ border-top-right-radius: var(--toggle-border-top-right-radius);
579
+ border-bottom-right-radius: var(--toggle-border-bottom-right-radius);
580
+ border-bottom-left-radius: var(--toggle-border-bottom-left-radius);
563
581
  }
564
582
  .Toggle-module_toggle__gOwa0 .Toggle-module_input__aAn85 {
565
583
  position: absolute;
@@ -4011,7 +4029,7 @@ span.flatpickr-weekday {
4011
4029
  letter-spacing: var(--table-letter-spacing);
4012
4030
  line-height: var(--table-line-height);
4013
4031
  table-layout: auto;
4014
- border-collapse: collapse;
4032
+ border-collapse: separate;
4015
4033
  display: table;
4016
4034
  overflow: auto;
4017
4035
  }
@@ -18074,45 +18092,77 @@ span.flatpickr-weekday {
18074
18092
  }
18075
18093
  [data-theme='dark'] [component-variant="toggle-unselected"], [data-theme='light'] [component-variant="toggle-unselected"] {
18076
18094
  --toggle-width: 100%;
18095
+ --toggle-color: var(--text-primary);
18096
+ --toggle-border-top-left-radius: var(--corner-radius-extra-small);
18097
+ --toggle-border-top-right-radius: var(--corner-radius-extra-small);
18098
+ --toggle-border-bottom-left-radius: var(--corner-radius-extra-small);
18099
+ --toggle-border-bottom-right-radius: var(--corner-radius-extra-small);
18100
+ --toggle-padding-left: var(--spacing-space-3);
18101
+ --toggle-padding-right: var(--spacing-space-3);
18102
+ --toggle-padding-top: var(--spacing-space-3);
18103
+ --toggle-padding-bottom: var(--spacing-space-3);
18077
18104
  --toggle-row-gap: var(--spacing-space-5);
18078
18105
  --toggle-column-gap: var(--spacing-space-5);
18079
18106
  --toggle-font-family: var(--font-family-body);
18080
18107
  --toggle-font-size: var(--font-size-body-small);
18081
18108
  --toggle-font-weight: var(--font-weight-regular);
18082
- --toggle-color: var(--text-primary);
18083
18109
  --toggle-line-height: var(--line-height-body-small);
18084
18110
  --toggle-paragraph-spacing: 0px;
18085
18111
  --toggle-paragraph-indent: 0px
18086
18112
  }
18087
18113
  [data-theme='dark'] [component-variant="toggle-unselected"]:hover:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="toggle-unselected"]:hover:not(:disabled):not([disabled]) {
18114
+ --toggle-color: var(--text-primary);
18115
+ --toggle-border-top-left-radius: var(--corner-radius-extra-small);
18116
+ --toggle-border-top-right-radius: var(--corner-radius-extra-small);
18117
+ --toggle-border-bottom-left-radius: var(--corner-radius-extra-small);
18118
+ --toggle-border-bottom-right-radius: var(--corner-radius-extra-small);
18119
+ --toggle-padding-left: var(--spacing-space-3);
18120
+ --toggle-padding-right: var(--spacing-space-3);
18121
+ --toggle-padding-top: var(--spacing-space-3);
18122
+ --toggle-padding-bottom: var(--spacing-space-3);
18088
18123
  --toggle-row-gap: var(--spacing-space-5);
18089
18124
  --toggle-column-gap: var(--spacing-space-5);
18090
18125
  --toggle-font-family: var(--font-family-body);
18091
18126
  --toggle-font-size: var(--font-size-body-small);
18092
18127
  --toggle-font-weight: var(--font-weight-regular);
18093
- --toggle-color: var(--text-primary);
18094
18128
  --toggle-line-height: var(--line-height-body-small);
18095
18129
  --toggle-paragraph-spacing: 0px;
18096
18130
  --toggle-paragraph-indent: 0px
18097
18131
  }
18098
18132
  [data-theme='dark'] [component-variant="toggle-unselected"][active]:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="toggle-unselected"][active]:not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="toggle-unselected"]:active:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="toggle-unselected"]:active:not(:disabled):not([disabled]) {
18133
+ --toggle-color: var(--text-primary);
18134
+ --toggle-border-top-left-radius: var(--corner-radius-extra-small);
18135
+ --toggle-border-top-right-radius: var(--corner-radius-extra-small);
18136
+ --toggle-border-bottom-left-radius: var(--corner-radius-extra-small);
18137
+ --toggle-border-bottom-right-radius: var(--corner-radius-extra-small);
18138
+ --toggle-padding-left: var(--spacing-space-3);
18139
+ --toggle-padding-right: var(--spacing-space-3);
18140
+ --toggle-padding-top: var(--spacing-space-3);
18141
+ --toggle-padding-bottom: var(--spacing-space-3);
18099
18142
  --toggle-row-gap: var(--spacing-space-5);
18100
18143
  --toggle-column-gap: var(--spacing-space-5);
18101
18144
  --toggle-font-family: var(--font-family-body);
18102
18145
  --toggle-font-size: var(--font-size-body-small);
18103
18146
  --toggle-font-weight: var(--font-weight-regular);
18104
- --toggle-color: var(--text-primary);
18105
18147
  --toggle-line-height: var(--line-height-body-small);
18106
18148
  --toggle-paragraph-spacing: 0px;
18107
18149
  --toggle-paragraph-indent: 0px
18108
18150
  }
18109
18151
  [data-theme='dark'] [component-variant="toggle-unselected"]:has(:focus-visible):not(:disabled):not([disabled]), [data-theme='light'] [component-variant="toggle-unselected"]:has(:focus-visible):not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="toggle-unselected"]:focus-visible:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="toggle-unselected"]:focus-visible:not(:disabled):not([disabled]) {
18152
+ --toggle-color: var(--text-primary);
18153
+ --toggle-border-top-left-radius: var(--corner-radius-extra-small);
18154
+ --toggle-border-top-right-radius: var(--corner-radius-extra-small);
18155
+ --toggle-border-bottom-left-radius: var(--corner-radius-extra-small);
18156
+ --toggle-border-bottom-right-radius: var(--corner-radius-extra-small);
18157
+ --toggle-padding-left: var(--spacing-space-3);
18158
+ --toggle-padding-right: var(--spacing-space-3);
18159
+ --toggle-padding-top: var(--spacing-space-3);
18160
+ --toggle-padding-bottom: var(--spacing-space-3);
18110
18161
  --toggle-row-gap: var(--spacing-space-5);
18111
18162
  --toggle-column-gap: var(--spacing-space-5);
18112
18163
  --toggle-font-family: var(--font-family-body);
18113
18164
  --toggle-font-size: var(--font-size-body-small);
18114
18165
  --toggle-font-weight: var(--font-weight-regular);
18115
- --toggle-color: var(--text-primary);
18116
18166
  --toggle-line-height: var(--line-height-body-small);
18117
18167
  --toggle-paragraph-spacing: 0px;
18118
18168
  --toggle-paragraph-indent: 0px
@@ -18121,57 +18171,97 @@ span.flatpickr-weekday {
18121
18171
  [data-theme='light'] [component-variant="toggle-unselected"][disabled],
18122
18172
  [data-theme='dark'] [component-variant="toggle-unselected"]:disabled,
18123
18173
  [data-theme='light'] [component-variant="toggle-unselected"]:disabled {
18174
+ --toggle-color: var(--text-primary);
18175
+ --toggle-border-top-left-radius: var(--corner-radius-extra-small);
18176
+ --toggle-border-top-right-radius: var(--corner-radius-extra-small);
18177
+ --toggle-border-bottom-left-radius: var(--corner-radius-extra-small);
18178
+ --toggle-border-bottom-right-radius: var(--corner-radius-extra-small);
18179
+ --toggle-padding-left: var(--spacing-space-3);
18180
+ --toggle-padding-right: var(--spacing-space-3);
18181
+ --toggle-padding-top: var(--spacing-space-3);
18182
+ --toggle-padding-bottom: var(--spacing-space-3);
18124
18183
  --toggle-row-gap: var(--spacing-space-5);
18125
18184
  --toggle-column-gap: var(--spacing-space-5);
18126
18185
  --toggle-font-family: var(--font-family-body);
18127
18186
  --toggle-font-size: var(--font-size-body-small);
18128
18187
  --toggle-font-weight: var(--font-weight-regular);
18129
- --toggle-color: var(--text-primary);
18130
18188
  --toggle-line-height: var(--line-height-body-small);
18131
18189
  --toggle-paragraph-spacing: 0px;
18132
18190
  --toggle-paragraph-indent: 0px
18133
18191
  }
18134
18192
  [data-theme='dark'] [component-variant="toggle-selected"], [data-theme='light'] [component-variant="toggle-selected"] {
18135
18193
  --toggle-width: 100%;
18194
+ --toggle-color: var(--text-primary);
18195
+ --toggle-border-top-left-radius: var(--corner-radius-extra-small);
18196
+ --toggle-border-top-right-radius: var(--corner-radius-extra-small);
18197
+ --toggle-border-bottom-left-radius: var(--corner-radius-extra-small);
18198
+ --toggle-border-bottom-right-radius: var(--corner-radius-extra-small);
18199
+ --toggle-padding-left: var(--spacing-space-3);
18200
+ --toggle-padding-right: var(--spacing-space-3);
18201
+ --toggle-padding-top: var(--spacing-space-3);
18202
+ --toggle-padding-bottom: var(--spacing-space-3);
18136
18203
  --toggle-row-gap: var(--spacing-space-5);
18137
18204
  --toggle-column-gap: var(--spacing-space-5);
18138
18205
  --toggle-font-family: var(--font-family-body);
18139
18206
  --toggle-font-size: var(--font-size-body-small);
18140
18207
  --toggle-font-weight: var(--font-weight-regular);
18141
- --toggle-color: var(--text-primary);
18142
18208
  --toggle-line-height: var(--line-height-body-small);
18143
18209
  --toggle-paragraph-spacing: 0px;
18144
18210
  --toggle-paragraph-indent: 0px
18145
18211
  }
18146
18212
  [data-theme='dark'] [component-variant="toggle-selected"]:hover:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="toggle-selected"]:hover:not(:disabled):not([disabled]) {
18213
+ --toggle-color: var(--text-primary);
18214
+ --toggle-border-top-left-radius: var(--corner-radius-extra-small);
18215
+ --toggle-border-top-right-radius: var(--corner-radius-extra-small);
18216
+ --toggle-border-bottom-left-radius: var(--corner-radius-extra-small);
18217
+ --toggle-border-bottom-right-radius: var(--corner-radius-extra-small);
18218
+ --toggle-padding-left: var(--spacing-space-3);
18219
+ --toggle-padding-right: var(--spacing-space-3);
18220
+ --toggle-padding-top: var(--spacing-space-3);
18221
+ --toggle-padding-bottom: var(--spacing-space-3);
18147
18222
  --toggle-row-gap: var(--spacing-space-5);
18148
18223
  --toggle-column-gap: var(--spacing-space-5);
18149
18224
  --toggle-font-family: var(--font-family-body);
18150
18225
  --toggle-font-size: var(--font-size-body-small);
18151
18226
  --toggle-font-weight: var(--font-weight-regular);
18152
- --toggle-color: var(--text-primary);
18153
18227
  --toggle-line-height: var(--line-height-body-small);
18154
18228
  --toggle-paragraph-spacing: 0px;
18155
18229
  --toggle-paragraph-indent: 0px
18156
18230
  }
18157
18231
  [data-theme='dark'] [component-variant="toggle-selected"][active]:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="toggle-selected"][active]:not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="toggle-selected"]:active:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="toggle-selected"]:active:not(:disabled):not([disabled]) {
18232
+ --toggle-color: var(--text-primary);
18233
+ --toggle-border-top-left-radius: var(--corner-radius-extra-small);
18234
+ --toggle-border-top-right-radius: var(--corner-radius-extra-small);
18235
+ --toggle-border-bottom-left-radius: var(--corner-radius-extra-small);
18236
+ --toggle-border-bottom-right-radius: var(--corner-radius-extra-small);
18237
+ --toggle-padding-left: var(--spacing-space-3);
18238
+ --toggle-padding-right: var(--spacing-space-3);
18239
+ --toggle-padding-top: var(--spacing-space-3);
18240
+ --toggle-padding-bottom: var(--spacing-space-3);
18158
18241
  --toggle-row-gap: var(--spacing-space-5);
18159
18242
  --toggle-column-gap: var(--spacing-space-5);
18160
18243
  --toggle-font-family: var(--font-family-body);
18161
18244
  --toggle-font-size: var(--font-size-body-small);
18162
18245
  --toggle-font-weight: var(--font-weight-regular);
18163
- --toggle-color: var(--text-primary);
18164
18246
  --toggle-line-height: var(--line-height-body-small);
18165
18247
  --toggle-paragraph-spacing: 0px;
18166
18248
  --toggle-paragraph-indent: 0px
18167
18249
  }
18168
18250
  [data-theme='dark'] [component-variant="toggle-selected"]:has(:focus-visible):not(:disabled):not([disabled]), [data-theme='light'] [component-variant="toggle-selected"]:has(:focus-visible):not(:disabled):not([disabled]), [data-theme='dark'] [component-variant="toggle-selected"]:focus-visible:not(:disabled):not([disabled]), [data-theme='light'] [component-variant="toggle-selected"]:focus-visible:not(:disabled):not([disabled]) {
18251
+ --toggle-color: var(--text-primary);
18252
+ --toggle-border-top-left-radius: var(--corner-radius-extra-small);
18253
+ --toggle-border-top-right-radius: var(--corner-radius-extra-small);
18254
+ --toggle-border-bottom-left-radius: var(--corner-radius-extra-small);
18255
+ --toggle-border-bottom-right-radius: var(--corner-radius-extra-small);
18256
+ --toggle-padding-left: var(--spacing-space-3);
18257
+ --toggle-padding-right: var(--spacing-space-3);
18258
+ --toggle-padding-top: var(--spacing-space-3);
18259
+ --toggle-padding-bottom: var(--spacing-space-3);
18169
18260
  --toggle-row-gap: var(--spacing-space-5);
18170
18261
  --toggle-column-gap: var(--spacing-space-5);
18171
18262
  --toggle-font-family: var(--font-family-body);
18172
18263
  --toggle-font-size: var(--font-size-body-small);
18173
18264
  --toggle-font-weight: var(--font-weight-regular);
18174
- --toggle-color: var(--text-primary);
18175
18265
  --toggle-line-height: var(--line-height-body-small);
18176
18266
  --toggle-paragraph-spacing: 0px;
18177
18267
  --toggle-paragraph-indent: 0px
@@ -18180,12 +18270,20 @@ span.flatpickr-weekday {
18180
18270
  [data-theme='light'] [component-variant="toggle-selected"][disabled],
18181
18271
  [data-theme='dark'] [component-variant="toggle-selected"]:disabled,
18182
18272
  [data-theme='light'] [component-variant="toggle-selected"]:disabled {
18273
+ --toggle-color: var(--text-primary);
18274
+ --toggle-border-top-left-radius: var(--corner-radius-extra-small);
18275
+ --toggle-border-top-right-radius: var(--corner-radius-extra-small);
18276
+ --toggle-border-bottom-left-radius: var(--corner-radius-extra-small);
18277
+ --toggle-border-bottom-right-radius: var(--corner-radius-extra-small);
18278
+ --toggle-padding-left: var(--spacing-space-3);
18279
+ --toggle-padding-right: var(--spacing-space-3);
18280
+ --toggle-padding-top: var(--spacing-space-3);
18281
+ --toggle-padding-bottom: var(--spacing-space-3);
18183
18282
  --toggle-row-gap: var(--spacing-space-5);
18184
18283
  --toggle-column-gap: var(--spacing-space-5);
18185
18284
  --toggle-font-family: var(--font-family-body);
18186
18285
  --toggle-font-size: var(--font-size-body-small);
18187
18286
  --toggle-font-weight: var(--font-weight-regular);
18188
- --toggle-color: var(--text-primary);
18189
18287
  --toggle-line-height: var(--line-height-body-small);
18190
18288
  --toggle-paragraph-spacing: 0px;
18191
18289
  --toggle-paragraph-indent: 0px
package/dist/index.d.ts CHANGED
@@ -680,7 +680,7 @@ declare const Chip: (props: ChipProps) => React__default.JSX.Element;
680
680
 
681
681
  type CheckboxSizeEnum = 'Small' | 'Medium' | 'Large';
682
682
  type CheckboxLabelAlignmentEnum = 'Left' | 'Right';
683
- type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'value'> & {
683
+ type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'value' | 'size'> & {
684
684
  /**
685
685
  * The label of the checkbox.
686
686
  */
@@ -724,7 +724,7 @@ type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'check
724
724
  independent?: boolean;
725
725
  };
726
726
 
727
- declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "checked" | "value" | "type"> & {
727
+ declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "checked" | "value" | "type" | "size"> & {
728
728
  children?: React__default.ReactNode;
729
729
  size?: CheckboxSizeEnum;
730
730
  checked?: boolean;
@@ -822,7 +822,7 @@ declare const Slider: (props: SliderProps) => React__default.JSX.Element;
822
822
 
823
823
  type RadioButtonSizeEnum = 'Small' | 'Medium' | 'Large';
824
824
  type RadioButtonLabelAlignmentEnum = 'Left' | 'Right';
825
- type RadioButtonProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'value'> & {
825
+ type RadioButtonProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'value' | 'size'> & {
826
826
  /**
827
827
  * The label of the radio button.
828
828
  */
@@ -857,7 +857,7 @@ type RadioButtonProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'ch
857
857
  value?: string | number;
858
858
  };
859
859
 
860
- declare const RadioButton: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "checked" | "value" | "type"> & {
860
+ declare const RadioButton: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "checked" | "value" | "type" | "size"> & {
861
861
  children?: React__default.ReactNode;
862
862
  size?: RadioButtonSizeEnum;
863
863
  checked?: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@delightui/components",
3
- "version": "0.1.65",
3
+ "version": "0.1.66",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "start": "vite",