@tomny-dev/uzi 0.6.1 → 0.6.3-pr.74.206.1.f2cf89a

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 (21) hide show
  1. package/dist/components/multi-select/MultiSelect.d.ts +9 -0
  2. package/dist/components/multi-select/MultiSelect.d.ts.map +1 -1
  3. package/dist/components/multi-select/MultiSelect.test.d.ts +2 -0
  4. package/dist/components/multi-select/MultiSelect.test.d.ts.map +1 -0
  5. package/dist/index26.js +7 -1
  6. package/dist/index26.js.map +1 -1
  7. package/dist/index27.cjs +9 -0
  8. package/dist/index27.cjs.map +1 -1
  9. package/dist/index27.js +74 -37
  10. package/dist/index27.js.map +1 -1
  11. package/dist/index28.cjs +74 -37
  12. package/dist/index28.cjs.map +1 -1
  13. package/dist/index34.js +1 -2
  14. package/dist/index34.js.map +1 -1
  15. package/dist/index35.cjs +1 -2
  16. package/dist/index35.cjs.map +1 -1
  17. package/dist/index8.js.map +1 -1
  18. package/dist/index9.cjs.map +1 -1
  19. package/dist/style.css +45 -6
  20. package/dist/theme/ThemeProvider.d.ts.map +1 -1
  21. package/package.json +1 -1
package/dist/components/multi-select/MultiSelect.d.ts CHANGED
@@ -3,6 +3,8 @@ export type MultiSelectOption = {
3
3
  label: string;
4
4
  value: string;
5
5
  disabled?: boolean;
6
+ /** Optional decorative leading visual. The label remains the accessible option name. */
7
+ icon?: React.ReactNode;
6
8
  };
7
9
  export type MultiSelectProps = {
8
10
  options: MultiSelectOption[];
@@ -11,6 +13,13 @@ export type MultiSelectProps = {
11
13
  placeholder?: string;
12
14
  fullWidth?: boolean;
13
15
  maxVisibleValues?: number;
16
+ /** Formats the closed trigger text from the selected options, including an empty selection. */
17
+ formatValue?: (selected: MultiSelectOption[]) => string;
18
+ /** Shows Select all and Clear all actions. Bulk actions modify enabled options only. */
19
+ bulkActions?: boolean;
20
+ selectAllLabel?: string;
21
+ /** Label for clearing all enabled selections. Disabled selected options remain selected. */
22
+ clearAllLabel?: string;
14
23
  className?: string;
15
24
  disabled?: boolean;
16
25
  name?: string;
package/dist/components/multi-select/MultiSelect.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/multi-select/MultiSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,WAAW,4FAuKvB,CAAC"}
1
+ {"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../src/components/multi-select/MultiSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wFAAwF;IACxF,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,+FAA+F;IAC/F,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,iBAAiB,EAAE,KAAK,MAAM,CAAC;IACxD,wFAAwF;IACxF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,4FAA4F;IAC5F,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,WAAW,4FAuNvB,CAAC"}
package/dist/components/multi-select/MultiSelect.test.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=MultiSelect.test.d.ts.map
package/dist/components/multi-select/MultiSelect.test.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MultiSelect.test.d.ts","sourceRoot":"","sources":["../../../src/components/multi-select/MultiSelect.test.tsx"],"names":[],"mappings":""}
package/dist/index26.js CHANGED
@@ -4,11 +4,14 @@ var wrapperFullWidth = "uzi-multi-select-module__wrapperFullWidth__eH8pf";
4
4
  var trigger = "uzi-multi-select-module__trigger__r3816";
5
5
  var value = "uzi-multi-select-module__value__PuUmG";
6
6
  var placeholder = "uzi-multi-select-module__placeholder__dJIU-";
7
+ var summary = "uzi-multi-select-module__summary__tu-Me";
7
8
  var chip = "uzi-multi-select-module__chip__46Ms-";
8
9
  var chipSummary = "uzi-multi-select-module__chipSummary__zLwi8";
9
10
  var chevron = "uzi-multi-select-module__chevron__SWK5l";
10
11
  var menu = "uzi-multi-select-module__menu__q8auA";
11
12
  var menuFadeIn = "uzi-multi-select-module__menuFadeIn__Plo7-";
13
+ var bulkAction = "uzi-multi-select-module__bulkAction__CTqPY";
14
+ var separator = "uzi-multi-select-module__separator__UOVk4";
12
15
  var option = "uzi-multi-select-module__option__-Ioqk";
13
16
  var optionDisabled = "uzi-multi-select-module__optionDisabled__qtCi8";
14
17
  var optionSelected = "uzi-multi-select-module__optionSelected__74IO8";
@@ -22,11 +25,14 @@ var multi_select_module_default = {
22
25
  trigger,
23
26
  value,
24
27
  placeholder,
28
+ summary,
25
29
  chip,
26
30
  chipSummary,
27
31
  chevron,
28
32
  menu,
29
33
  menuFadeIn,
34
+ bulkAction,
35
+ separator,
30
36
  option,
31
37
  optionDisabled,
32
38
  optionSelected,
@@ -36,6 +42,6 @@ var multi_select_module_default = {
36
42
  indicatorDisabled
37
43
  };
38
44
  //#endregion
39
- export { chevron, chip, chipSummary, multi_select_module_default as default, indicator, indicatorDisabled, indicatorSelected, menu, menuFadeIn, option, optionDisabled, optionLabel, optionSelected, placeholder, trigger, value, wrapper, wrapperFullWidth };
45
+ export { bulkAction, chevron, chip, chipSummary, multi_select_module_default as default, indicator, indicatorDisabled, indicatorSelected, menu, menuFadeIn, option, optionDisabled, optionLabel, optionSelected, placeholder, separator, summary, trigger, value, wrapper, wrapperFullWidth };
40
46
 
41
47
  //# sourceMappingURL=index26.js.map
package/dist/index26.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index26.js","names":[],"sources":["../src/components/multi-select/multi-select.module.css"],"sourcesContent":[".wrapper {\n position: relative;\n display: inline-flex;\n min-width: 0;\n max-width: 100%;\n}\n\n.wrapperFullWidth {\n width: 100%;\n}\n\n.trigger {\n width: 100%;\n min-width: 0;\n min-height: var(--uzi-control-min-height);\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.625rem;\n border-radius: var(--uzi-control-radius);\n border: 1px solid var(--ts-dropdown-border, var(--border));\n background: var(--ts-dropdown-bg, var(--panel));\n color: var(--ts-dropdown-text, var(--foreground));\n padding:\n var(--uzi-control-padding-y)\n var(--uzi-control-padding-x-compact)\n var(--uzi-control-padding-y)\n var(--uzi-control-padding-x);\n font-size: var(--uzi-control-font-size);\n line-height: var(--uzi-control-line-height);\n font-family: inherit;\n box-shadow: var(--uzi-control-shadow);\n transition:\n border-color 0.15s ease,\n background 0.15s ease,\n color 0.15s ease,\n box-shadow 0.15s ease;\n cursor: pointer;\n text-align: left;\n}\n\n.trigger:hover:not(:disabled) {\n border-color: var(--ts-dropdown-accent, var(--accent));\n box-shadow: var(--uzi-control-shadow-hover);\n}\n\n.trigger:focus-visible,\n.trigger[data-state=\"open\"] {\n border-color: var(--ts-dropdown-accent, var(--primary));\n outline: var(--focus-ring);\n outline-offset: var(--focus-ring-offset);\n box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent);\n}\n\n.trigger:disabled {\n cursor: not-allowed;\n opacity: 0.6;\n box-shadow: none;\n}\n\n.value {\n min-width: 0;\n display: flex;\n flex: 1;\n flex-wrap: wrap;\n gap: 0.375rem;\n align-items: center;\n}\n\n.placeholder {\n color: var(--muted-foreground);\n}\n\n.chip {\n display: inline-flex;\n align-items: center;\n max-width: 100%;\n padding: 2px 8px;\n border-radius: 999px;\n border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent);\n background: color-mix(in srgb, var(--primary) 10%, transparent);\n color: var(--ts-dropdown-text, var(--foreground));\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 1.2;\n white-space: nowrap;\n}\n\n.chipSummary {\n color: var(--primary);\n}\n\n.chevron {\n width: 10px;\n height: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--muted-foreground);\n flex-shrink: 0;\n transition: transform 0.15s ease, color 0.15s ease;\n}\n\n.trigger:hover:not(:disabled) .chevron,\n.trigger[data-state=\"open\"] .chevron {\n color: var(--ts-dropdown-text, var(--foreground));\n}\n\n.trigger[data-state=\"open\"] .chevron {\n transform: rotate(180deg);\n}\n\n.menu {\n position: absolute;\n top: calc(100% + 6px);\n left: 0;\n z-index: var(--uzi-popover-z-index, 1100);\n min-width: 100%;\n max-height: 16rem;\n overflow-y: auto;\n border: 1px solid var(--ts-menu-border, var(--border));\n border-radius: var(--uzi-menu-radius);\n background: var(--ts-menu-bg, var(--popover));\n color: var(--ts-menu-fg, var(--popover-foreground));\n padding: var(--uzi-menu-padding);\n box-shadow: var(--uzi-menu-shadow);\n animation: menuFadeIn 140ms ease;\n}\n\n.option {\n width: 100%;\n display: flex;\n align-items: center;\n gap: var(--uzi-menu-item-gap);\n border: none;\n border-radius: var(--uzi-menu-item-radius);\n background: transparent;\n color: inherit;\n padding: var(--uzi-menu-item-padding-y) var(--uzi-menu-item-padding-x);\n font: inherit;\n cursor: pointer;\n text-align: left;\n transition: background 0.12s ease, color 0.12s ease;\n}\n\n.option:hover:not(:disabled),\n.option:focus-visible,\n.option[data-highlighted] {\n background: var(--ts-menu-hover-bg, var(--accent));\n color: var(--ts-menu-hover-fg, var(--accent-foreground));\n outline: none;\n}\n\n.optionDisabled,\n.option[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.optionSelected .optionLabel {\n color: var(--primary);\n}\n\n.indicator {\n width: 1rem;\n height: 1rem;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border-radius: 0.3125rem;\n border: 1px solid var(--border);\n color: transparent;\n background: transparent;\n transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;\n}\n\n.indicatorSelected {\n border-color: color-mix(in srgb, var(--primary) 55%, transparent);\n background: color-mix(in srgb, var(--primary) 12%, transparent);\n color: var(--primary);\n}\n\n.indicatorDisabled {\n opacity: 0.65;\n}\n\n.optionLabel {\n min-width: 0;\n flex: 1;\n}\n\n@keyframes menuFadeIn {\n from {\n opacity: 0;\n transform: translateY(-4px) scale(0.98);\n }\n\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n"],"mappings":""}
1
+ {"version":3,"file":"index26.js","names":[],"sources":["../src/components/multi-select/multi-select.module.css"],"sourcesContent":[".wrapper {\n position: relative;\n display: inline-flex;\n min-width: 0;\n max-width: 100%;\n}\n\n.wrapperFullWidth {\n width: 100%;\n}\n\n.trigger {\n width: 100%;\n min-width: 0;\n min-height: var(--uzi-control-min-height);\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.625rem;\n border-radius: var(--uzi-control-radius);\n border: 1px solid var(--ts-dropdown-border, var(--border));\n background: var(--ts-dropdown-bg, var(--panel));\n color: var(--ts-dropdown-text, var(--foreground));\n padding:\n var(--uzi-control-padding-y)\n var(--uzi-control-padding-x-compact)\n var(--uzi-control-padding-y)\n var(--uzi-control-padding-x);\n font-size: var(--uzi-control-font-size);\n line-height: var(--uzi-control-line-height);\n font-family: inherit;\n box-shadow: var(--uzi-control-shadow);\n transition:\n border-color 0.15s ease,\n background 0.15s ease,\n color 0.15s ease,\n box-shadow 0.15s ease;\n cursor: pointer;\n text-align: left;\n}\n\n.trigger:hover:not(:disabled) {\n border-color: var(--ts-dropdown-accent, var(--accent));\n box-shadow: var(--uzi-control-shadow-hover);\n}\n\n.trigger:focus-visible,\n.trigger[data-state=\"open\"] {\n border-color: var(--ts-dropdown-accent, var(--primary));\n outline: var(--focus-ring);\n outline-offset: var(--focus-ring-offset);\n box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent);\n}\n\n.trigger:disabled {\n cursor: not-allowed;\n opacity: 0.6;\n box-shadow: none;\n}\n\n.value {\n min-width: 0;\n display: flex;\n flex: 1;\n flex-wrap: wrap;\n gap: 0.375rem;\n align-items: center;\n}\n\n.placeholder {\n color: var(--muted-foreground);\n}\n\n.summary {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-weight: 500;\n}\n\n.chip {\n display: inline-flex;\n align-items: center;\n max-width: 100%;\n padding: 2px 8px;\n border-radius: 999px;\n border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent);\n background: color-mix(in srgb, var(--primary) 10%, transparent);\n color: var(--ts-dropdown-text, var(--foreground));\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 1.2;\n white-space: nowrap;\n}\n\n.chipSummary {\n color: var(--primary);\n}\n\n.chevron {\n width: 10px;\n height: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--muted-foreground);\n flex-shrink: 0;\n transition: transform 0.15s ease, color 0.15s ease;\n}\n\n.trigger:hover:not(:disabled) .chevron,\n.trigger[data-state=\"open\"] .chevron {\n color: var(--ts-dropdown-text, var(--foreground));\n}\n\n.trigger[data-state=\"open\"] .chevron {\n transform: rotate(180deg);\n}\n\n.menu {\n position: absolute;\n top: calc(100% + 6px);\n left: 0;\n z-index: var(--uzi-popover-z-index, 1100);\n min-width: 100%;\n max-height: 16rem;\n overflow-y: auto;\n border: 1px solid var(--ts-menu-border, var(--border));\n border-radius: var(--uzi-menu-radius);\n background: var(--ts-menu-bg, var(--popover));\n color: var(--ts-menu-fg, var(--popover-foreground));\n padding: var(--uzi-menu-padding);\n box-shadow: var(--uzi-menu-shadow);\n animation: menuFadeIn 140ms ease;\n}\n\n.bulkAction {\n width: 100%;\n display: flex;\n align-items: center;\n border: none;\n border-radius: var(--uzi-menu-item-radius);\n background: transparent;\n color: inherit;\n padding: var(--uzi-menu-item-padding-y) var(--uzi-menu-item-padding-x);\n font: inherit;\n font-weight: 600;\n cursor: pointer;\n outline: none;\n}\n\n.bulkAction[data-highlighted] {\n background: var(--ts-menu-hover-bg, var(--accent));\n color: var(--ts-menu-hover-fg, var(--accent-foreground));\n}\n\n.bulkAction[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.separator {\n height: 1px;\n margin: var(--uzi-menu-padding) 0;\n background: var(--ts-menu-border, var(--border));\n}\n\n.option {\n width: 100%;\n display: flex;\n align-items: center;\n gap: var(--uzi-menu-item-gap);\n border: none;\n border-radius: var(--uzi-menu-item-radius);\n background: transparent;\n color: inherit;\n padding: var(--uzi-menu-item-padding-y) var(--uzi-menu-item-padding-x);\n font: inherit;\n cursor: pointer;\n text-align: left;\n transition: background 0.12s ease, color 0.12s ease;\n}\n\n.option:hover:not(:disabled),\n.option:focus-visible,\n.option[data-highlighted] {\n background: var(--ts-menu-hover-bg, var(--accent));\n color: var(--ts-menu-hover-fg, var(--accent-foreground));\n outline: none;\n}\n\n.optionDisabled,\n.option[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.optionSelected .optionLabel {\n color: var(--primary);\n}\n\n.indicator {\n width: 1rem;\n height: 1rem;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border-radius: 0.3125rem;\n border: 1px solid var(--border);\n color: transparent;\n background: transparent;\n transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;\n}\n\n.indicatorSelected {\n border-color: color-mix(in srgb, var(--primary) 55%, transparent);\n background: color-mix(in srgb, var(--primary) 12%, transparent);\n color: var(--primary);\n}\n\n.indicatorDisabled {\n opacity: 0.65;\n}\n\n.optionLabel {\n min-width: 0;\n flex: 1;\n}\n\n@keyframes menuFadeIn {\n from {\n opacity: 0;\n transform: translateY(-4px) scale(0.98);\n }\n\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n"],"mappings":""}
package/dist/index27.cjs CHANGED
@@ -4,11 +4,14 @@ var wrapperFullWidth = "uzi-multi-select-module__wrapperFullWidth__eH8pf";
4
4
  var trigger = "uzi-multi-select-module__trigger__r3816";
5
5
  var value = "uzi-multi-select-module__value__PuUmG";
6
6
  var placeholder = "uzi-multi-select-module__placeholder__dJIU-";
7
+ var summary = "uzi-multi-select-module__summary__tu-Me";
7
8
  var chip = "uzi-multi-select-module__chip__46Ms-";
8
9
  var chipSummary = "uzi-multi-select-module__chipSummary__zLwi8";
9
10
  var chevron = "uzi-multi-select-module__chevron__SWK5l";
10
11
  var menu = "uzi-multi-select-module__menu__q8auA";
11
12
  var menuFadeIn = "uzi-multi-select-module__menuFadeIn__Plo7-";
13
+ var bulkAction = "uzi-multi-select-module__bulkAction__CTqPY";
14
+ var separator = "uzi-multi-select-module__separator__UOVk4";
12
15
  var option = "uzi-multi-select-module__option__-Ioqk";
13
16
  var optionDisabled = "uzi-multi-select-module__optionDisabled__qtCi8";
14
17
  var optionSelected = "uzi-multi-select-module__optionSelected__74IO8";
@@ -22,11 +25,14 @@ var multi_select_module_default = {
22
25
  trigger,
23
26
  value,
24
27
  placeholder,
28
+ summary,
25
29
  chip,
26
30
  chipSummary,
27
31
  chevron,
28
32
  menu,
29
33
  menuFadeIn,
34
+ bulkAction,
35
+ separator,
30
36
  option,
31
37
  optionDisabled,
32
38
  optionSelected,
@@ -36,6 +42,7 @@ var multi_select_module_default = {
36
42
  indicatorDisabled
37
43
  };
38
44
  //#endregion
45
+ exports.bulkAction = bulkAction;
39
46
  exports.chevron = chevron;
40
47
  exports.chip = chip;
41
48
  exports.chipSummary = chipSummary;
@@ -50,6 +57,8 @@ exports.optionDisabled = optionDisabled;
50
57
  exports.optionLabel = optionLabel;
51
58
  exports.optionSelected = optionSelected;
52
59
  exports.placeholder = placeholder;
60
+ exports.separator = separator;
61
+ exports.summary = summary;
53
62
  exports.trigger = trigger;
54
63
  exports.value = value;
55
64
  exports.wrapper = wrapper;
package/dist/index27.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index27.cjs","names":[],"sources":["../src/components/multi-select/multi-select.module.css"],"sourcesContent":[".wrapper {\n position: relative;\n display: inline-flex;\n min-width: 0;\n max-width: 100%;\n}\n\n.wrapperFullWidth {\n width: 100%;\n}\n\n.trigger {\n width: 100%;\n min-width: 0;\n min-height: var(--uzi-control-min-height);\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.625rem;\n border-radius: var(--uzi-control-radius);\n border: 1px solid var(--ts-dropdown-border, var(--border));\n background: var(--ts-dropdown-bg, var(--panel));\n color: var(--ts-dropdown-text, var(--foreground));\n padding:\n var(--uzi-control-padding-y)\n var(--uzi-control-padding-x-compact)\n var(--uzi-control-padding-y)\n var(--uzi-control-padding-x);\n font-size: var(--uzi-control-font-size);\n line-height: var(--uzi-control-line-height);\n font-family: inherit;\n box-shadow: var(--uzi-control-shadow);\n transition:\n border-color 0.15s ease,\n background 0.15s ease,\n color 0.15s ease,\n box-shadow 0.15s ease;\n cursor: pointer;\n text-align: left;\n}\n\n.trigger:hover:not(:disabled) {\n border-color: var(--ts-dropdown-accent, var(--accent));\n box-shadow: var(--uzi-control-shadow-hover);\n}\n\n.trigger:focus-visible,\n.trigger[data-state=\"open\"] {\n border-color: var(--ts-dropdown-accent, var(--primary));\n outline: var(--focus-ring);\n outline-offset: var(--focus-ring-offset);\n box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent);\n}\n\n.trigger:disabled {\n cursor: not-allowed;\n opacity: 0.6;\n box-shadow: none;\n}\n\n.value {\n min-width: 0;\n display: flex;\n flex: 1;\n flex-wrap: wrap;\n gap: 0.375rem;\n align-items: center;\n}\n\n.placeholder {\n color: var(--muted-foreground);\n}\n\n.chip {\n display: inline-flex;\n align-items: center;\n max-width: 100%;\n padding: 2px 8px;\n border-radius: 999px;\n border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent);\n background: color-mix(in srgb, var(--primary) 10%, transparent);\n color: var(--ts-dropdown-text, var(--foreground));\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 1.2;\n white-space: nowrap;\n}\n\n.chipSummary {\n color: var(--primary);\n}\n\n.chevron {\n width: 10px;\n height: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--muted-foreground);\n flex-shrink: 0;\n transition: transform 0.15s ease, color 0.15s ease;\n}\n\n.trigger:hover:not(:disabled) .chevron,\n.trigger[data-state=\"open\"] .chevron {\n color: var(--ts-dropdown-text, var(--foreground));\n}\n\n.trigger[data-state=\"open\"] .chevron {\n transform: rotate(180deg);\n}\n\n.menu {\n position: absolute;\n top: calc(100% + 6px);\n left: 0;\n z-index: var(--uzi-popover-z-index, 1100);\n min-width: 100%;\n max-height: 16rem;\n overflow-y: auto;\n border: 1px solid var(--ts-menu-border, var(--border));\n border-radius: var(--uzi-menu-radius);\n background: var(--ts-menu-bg, var(--popover));\n color: var(--ts-menu-fg, var(--popover-foreground));\n padding: var(--uzi-menu-padding);\n box-shadow: var(--uzi-menu-shadow);\n animation: menuFadeIn 140ms ease;\n}\n\n.option {\n width: 100%;\n display: flex;\n align-items: center;\n gap: var(--uzi-menu-item-gap);\n border: none;\n border-radius: var(--uzi-menu-item-radius);\n background: transparent;\n color: inherit;\n padding: var(--uzi-menu-item-padding-y) var(--uzi-menu-item-padding-x);\n font: inherit;\n cursor: pointer;\n text-align: left;\n transition: background 0.12s ease, color 0.12s ease;\n}\n\n.option:hover:not(:disabled),\n.option:focus-visible,\n.option[data-highlighted] {\n background: var(--ts-menu-hover-bg, var(--accent));\n color: var(--ts-menu-hover-fg, var(--accent-foreground));\n outline: none;\n}\n\n.optionDisabled,\n.option[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.optionSelected .optionLabel {\n color: var(--primary);\n}\n\n.indicator {\n width: 1rem;\n height: 1rem;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border-radius: 0.3125rem;\n border: 1px solid var(--border);\n color: transparent;\n background: transparent;\n transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;\n}\n\n.indicatorSelected {\n border-color: color-mix(in srgb, var(--primary) 55%, transparent);\n background: color-mix(in srgb, var(--primary) 12%, transparent);\n color: var(--primary);\n}\n\n.indicatorDisabled {\n opacity: 0.65;\n}\n\n.optionLabel {\n min-width: 0;\n flex: 1;\n}\n\n@keyframes menuFadeIn {\n from {\n opacity: 0;\n transform: translateY(-4px) scale(0.98);\n }\n\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n"],"mappings":""}
1
+ {"version":3,"file":"index27.cjs","names":[],"sources":["../src/components/multi-select/multi-select.module.css"],"sourcesContent":[".wrapper {\n position: relative;\n display: inline-flex;\n min-width: 0;\n max-width: 100%;\n}\n\n.wrapperFullWidth {\n width: 100%;\n}\n\n.trigger {\n width: 100%;\n min-width: 0;\n min-height: var(--uzi-control-min-height);\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.625rem;\n border-radius: var(--uzi-control-radius);\n border: 1px solid var(--ts-dropdown-border, var(--border));\n background: var(--ts-dropdown-bg, var(--panel));\n color: var(--ts-dropdown-text, var(--foreground));\n padding:\n var(--uzi-control-padding-y)\n var(--uzi-control-padding-x-compact)\n var(--uzi-control-padding-y)\n var(--uzi-control-padding-x);\n font-size: var(--uzi-control-font-size);\n line-height: var(--uzi-control-line-height);\n font-family: inherit;\n box-shadow: var(--uzi-control-shadow);\n transition:\n border-color 0.15s ease,\n background 0.15s ease,\n color 0.15s ease,\n box-shadow 0.15s ease;\n cursor: pointer;\n text-align: left;\n}\n\n.trigger:hover:not(:disabled) {\n border-color: var(--ts-dropdown-accent, var(--accent));\n box-shadow: var(--uzi-control-shadow-hover);\n}\n\n.trigger:focus-visible,\n.trigger[data-state=\"open\"] {\n border-color: var(--ts-dropdown-accent, var(--primary));\n outline: var(--focus-ring);\n outline-offset: var(--focus-ring-offset);\n box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent);\n}\n\n.trigger:disabled {\n cursor: not-allowed;\n opacity: 0.6;\n box-shadow: none;\n}\n\n.value {\n min-width: 0;\n display: flex;\n flex: 1;\n flex-wrap: wrap;\n gap: 0.375rem;\n align-items: center;\n}\n\n.placeholder {\n color: var(--muted-foreground);\n}\n\n.summary {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-weight: 500;\n}\n\n.chip {\n display: inline-flex;\n align-items: center;\n max-width: 100%;\n padding: 2px 8px;\n border-radius: 999px;\n border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent);\n background: color-mix(in srgb, var(--primary) 10%, transparent);\n color: var(--ts-dropdown-text, var(--foreground));\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 1.2;\n white-space: nowrap;\n}\n\n.chipSummary {\n color: var(--primary);\n}\n\n.chevron {\n width: 10px;\n height: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--muted-foreground);\n flex-shrink: 0;\n transition: transform 0.15s ease, color 0.15s ease;\n}\n\n.trigger:hover:not(:disabled) .chevron,\n.trigger[data-state=\"open\"] .chevron {\n color: var(--ts-dropdown-text, var(--foreground));\n}\n\n.trigger[data-state=\"open\"] .chevron {\n transform: rotate(180deg);\n}\n\n.menu {\n position: absolute;\n top: calc(100% + 6px);\n left: 0;\n z-index: var(--uzi-popover-z-index, 1100);\n min-width: 100%;\n max-height: 16rem;\n overflow-y: auto;\n border: 1px solid var(--ts-menu-border, var(--border));\n border-radius: var(--uzi-menu-radius);\n background: var(--ts-menu-bg, var(--popover));\n color: var(--ts-menu-fg, var(--popover-foreground));\n padding: var(--uzi-menu-padding);\n box-shadow: var(--uzi-menu-shadow);\n animation: menuFadeIn 140ms ease;\n}\n\n.bulkAction {\n width: 100%;\n display: flex;\n align-items: center;\n border: none;\n border-radius: var(--uzi-menu-item-radius);\n background: transparent;\n color: inherit;\n padding: var(--uzi-menu-item-padding-y) var(--uzi-menu-item-padding-x);\n font: inherit;\n font-weight: 600;\n cursor: pointer;\n outline: none;\n}\n\n.bulkAction[data-highlighted] {\n background: var(--ts-menu-hover-bg, var(--accent));\n color: var(--ts-menu-hover-fg, var(--accent-foreground));\n}\n\n.bulkAction[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.separator {\n height: 1px;\n margin: var(--uzi-menu-padding) 0;\n background: var(--ts-menu-border, var(--border));\n}\n\n.option {\n width: 100%;\n display: flex;\n align-items: center;\n gap: var(--uzi-menu-item-gap);\n border: none;\n border-radius: var(--uzi-menu-item-radius);\n background: transparent;\n color: inherit;\n padding: var(--uzi-menu-item-padding-y) var(--uzi-menu-item-padding-x);\n font: inherit;\n cursor: pointer;\n text-align: left;\n transition: background 0.12s ease, color 0.12s ease;\n}\n\n.option:hover:not(:disabled),\n.option:focus-visible,\n.option[data-highlighted] {\n background: var(--ts-menu-hover-bg, var(--accent));\n color: var(--ts-menu-hover-fg, var(--accent-foreground));\n outline: none;\n}\n\n.optionDisabled,\n.option[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.optionSelected .optionLabel {\n color: var(--primary);\n}\n\n.indicator {\n width: 1rem;\n height: 1rem;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border-radius: 0.3125rem;\n border: 1px solid var(--border);\n color: transparent;\n background: transparent;\n transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;\n}\n\n.indicatorSelected {\n border-color: color-mix(in srgb, var(--primary) 55%, transparent);\n background: color-mix(in srgb, var(--primary) 12%, transparent);\n color: var(--primary);\n}\n\n.indicatorDisabled {\n opacity: 0.65;\n}\n\n.optionLabel {\n min-width: 0;\n flex: 1;\n}\n\n@keyframes menuFadeIn {\n from {\n opacity: 0;\n transform: translateY(-4px) scale(0.98);\n }\n\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n"],"mappings":""}
package/dist/index27.js CHANGED
@@ -5,9 +5,14 @@ import * as React from "react";
5
5
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
6
6
  import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
7
7
  //#region src/components/multi-select/MultiSelect.tsx
8
- var MultiSelect = React.forwardRef(({ options, value, onChange, placeholder = "Select options", fullWidth = true, maxVisibleValues = 2, className, disabled = false, name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }, ref) => {
8
+ var MultiSelect = React.forwardRef(({ options, value, onChange, placeholder = "Select options", fullWidth = true, maxVisibleValues = 2, formatValue, bulkActions = false, selectAllLabel = "Select all", clearAllLabel, className, disabled = false, name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }, ref) => {
9
9
  const selectedSet = React.useMemo(() => new Set(value), [value]);
10
10
  const selectedOptions = React.useMemo(() => options.filter((opt) => selectedSet.has(opt.value)), [options, selectedSet]);
11
+ const enabledValues = React.useMemo(() => options.filter((option) => !option.disabled).map((option) => option.value), [options]);
12
+ const allEnabledSelected = enabledValues.length > 0 && enabledValues.every((entry) => selectedSet.has(entry));
13
+ const hasDisabledOptions = options.some((option) => option.disabled);
14
+ const resolvedClearAllLabel = clearAllLabel ?? (hasDisabledOptions ? "Clear enabled" : "Clear all");
15
+ const formattedValue = React.useMemo(() => formatValue?.(selectedOptions), [formatValue, selectedOptions]);
11
16
  const toggleValue = React.useCallback((nextValue) => {
12
17
  if (selectedSet.has(nextValue)) {
13
18
  onChange(value.filter((entry) => entry !== nextValue));
@@ -38,12 +43,19 @@ var MultiSelect = React.forwardRef(({ options, value, onChange, placeholder = "S
38
43
  disabled,
39
44
  children: [/* @__PURE__ */ jsx("span", {
40
45
  className: multi_select_module_default.value,
41
- children: selectedOptions.length === 0 ? /* @__PURE__ */ jsx("span", {
46
+ children: formatValue ? /* @__PURE__ */ jsx("span", {
47
+ className: multi_select_module_default.summary,
48
+ children: formattedValue
49
+ }) : selectedOptions.length === 0 ? /* @__PURE__ */ jsx("span", {
42
50
  className: multi_select_module_default.placeholder,
43
51
  children: placeholder
44
- }) : /* @__PURE__ */ jsxs(Fragment, { children: [visibleOptions.map((option) => /* @__PURE__ */ jsx("span", {
52
+ }) : /* @__PURE__ */ jsxs(Fragment, { children: [visibleOptions.map((option) => /* @__PURE__ */ jsxs("span", {
45
53
  className: multi_select_module_default.chip,
46
- children: option.label
54
+ children: [option.icon ? /* @__PURE__ */ jsx("span", {
55
+ className: multi_select_module_default.optionIcon,
56
+ "aria-hidden": "true",
57
+ children: option.icon
58
+ }) : null, option.label]
47
59
  }, option.value)), overflowCount > 0 ? /* @__PURE__ */ jsxs("span", {
48
60
  className: cx(multi_select_module_default.chip, multi_select_module_default.chipSummary),
49
61
  children: ["+", overflowCount]
@@ -73,44 +85,69 @@ var MultiSelect = React.forwardRef(({ options, value, onChange, placeholder = "S
73
85
  name,
74
86
  value: entry
75
87
  }, entry)) : null,
76
- /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Content, {
88
+ /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsxs(DropdownMenuPrimitive.Content, {
77
89
  className: multi_select_module_default.menu,
78
90
  sideOffset: 4,
79
91
  align: "start",
80
- children: options.map((option) => {
81
- const selected = selectedSet.has(option.value);
82
- return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.CheckboxItem, {
83
- className: cx(multi_select_module_default.option, selected && multi_select_module_default.optionSelected, option.disabled && multi_select_module_default.optionDisabled),
84
- checked: selected,
85
- disabled: option.disabled,
86
- onCheckedChange: () => toggleValue(option.value),
87
- onSelect: (event) => event.preventDefault(),
88
- children: [/* @__PURE__ */ jsx("span", {
89
- className: cx(multi_select_module_default.indicator, selected && multi_select_module_default.indicatorSelected, option.disabled && multi_select_module_default.indicatorDisabled),
90
- "aria-hidden": "true",
91
- children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, {
92
- forceMount: true,
93
- children: /* @__PURE__ */ jsx("svg", {
94
- viewBox: "0 0 16 16",
95
- width: "16",
96
- height: "16",
97
- fill: "none",
98
- xmlns: "http://www.w3.org/2000/svg",
99
- children: /* @__PURE__ */ jsx("path", {
100
- d: "M3.5 8.5 6.5 11.5 12.5 4.5",
101
- stroke: "currentColor",
102
- strokeWidth: "1.8",
103
- strokeLinecap: "round",
104
- strokeLinejoin: "round"
92
+ children: [
93
+ bulkActions && enabledValues.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, {
94
+ className: multi_select_module_default.bulkAction,
95
+ disabled: allEnabledSelected,
96
+ onSelect: (event) => {
97
+ event.preventDefault();
98
+ onChange(Array.from(/* @__PURE__ */ new Set([...value, ...enabledValues])));
99
+ },
100
+ children: selectAllLabel
101
+ }), /* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, {
102
+ className: multi_select_module_default.bulkAction,
103
+ disabled: !enabledValues.some((entry) => selectedSet.has(entry)),
104
+ onSelect: (event) => {
105
+ event.preventDefault();
106
+ const enabledSet = new Set(enabledValues);
107
+ onChange(value.filter((entry) => !enabledSet.has(entry)));
108
+ },
109
+ children: resolvedClearAllLabel
110
+ })] }) : null,
111
+ bulkActions && enabledValues.length > 0 && options.length > 0 ? /* @__PURE__ */ jsx(DropdownMenuPrimitive.Separator, { className: multi_select_module_default.separator }) : null,
112
+ options.map((option) => {
113
+ const selected = selectedSet.has(option.value);
114
+ return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.CheckboxItem, {
115
+ className: cx(multi_select_module_default.option, selected && multi_select_module_default.optionSelected, option.disabled && multi_select_module_default.optionDisabled),
116
+ checked: selected,
117
+ disabled: option.disabled,
118
+ onCheckedChange: () => toggleValue(option.value),
119
+ onSelect: (event) => event.preventDefault(),
120
+ children: [/* @__PURE__ */ jsx("span", {
121
+ className: cx(multi_select_module_default.indicator, selected && multi_select_module_default.indicatorSelected, option.disabled && multi_select_module_default.indicatorDisabled),
122
+ "aria-hidden": "true",
123
+ children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, {
124
+ forceMount: true,
125
+ children: /* @__PURE__ */ jsx("svg", {
126
+ viewBox: "0 0 16 16",
127
+ width: "16",
128
+ height: "16",
129
+ fill: "none",
130
+ xmlns: "http://www.w3.org/2000/svg",
131
+ children: /* @__PURE__ */ jsx("path", {
132
+ d: "M3.5 8.5 6.5 11.5 12.5 4.5",
133
+ stroke: "currentColor",
134
+ strokeWidth: "1.8",
135
+ strokeLinecap: "round",
136
+ strokeLinejoin: "round"
137
+ })
105
138
  })
106
139
  })
107
- })
108
- }), /* @__PURE__ */ jsx("span", {
109
- className: multi_select_module_default.optionLabel,
110
- children: option.label
111
- })]
112
- }, option.value);
113
- })
140
+ }), /* @__PURE__ */ jsxs("span", {
141
+ className: multi_select_module_default.optionLabel,
142
+ children: [option.icon ? /* @__PURE__ */ jsx("span", {
143
+ className: multi_select_module_default.optionIcon,
144
+ "aria-hidden": "true",
145
+ children: option.icon
146
+ }) : null, option.label]
147
+ })]
148
+ }, option.value);
149
+ })
150
+ ]
114
151
  }) })
115
152
  ]
116
153
  })
package/dist/index27.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index27.js","names":[],"sources":["../src/components/multi-select/MultiSelect.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./multi-select.module.css\";\n\nexport type MultiSelectOption = {\n label: string;\n value: string;\n disabled?: boolean;\n};\n\nexport type MultiSelectProps = {\n options: MultiSelectOption[];\n value: string[];\n onChange: (value: string[]) => void;\n placeholder?: string;\n fullWidth?: boolean;\n maxVisibleValues?: number;\n className?: string;\n disabled?: boolean;\n name?: string;\n \"aria-label\"?: string;\n \"aria-labelledby\"?: string;\n};\n\nexport const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(\n (\n {\n options,\n value,\n onChange,\n placeholder = \"Select options\",\n fullWidth = true,\n maxVisibleValues = 2,\n className,\n disabled = false,\n name,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n },\n ref,\n ) => {\n const selectedSet = React.useMemo(() => new Set(value), [value]);\n const selectedOptions = React.useMemo(\n () => options.filter((opt) => selectedSet.has(opt.value)),\n [options, selectedSet],\n );\n\n const toggleValue = React.useCallback(\n (nextValue: string) => {\n if (selectedSet.has(nextValue)) {\n onChange(value.filter((entry) => entry !== nextValue));\n return;\n }\n\n onChange([...value, nextValue]);\n },\n [onChange, selectedSet, value],\n );\n\n const visibleCount = Math.max(1, maxVisibleValues);\n const visibleOptions = selectedOptions.slice(0, visibleCount);\n const overflowCount = Math.max(\n 0,\n selectedOptions.length - visibleOptions.length,\n );\n\n return (\n <DropdownMenuPrimitive.Root modal={false}>\n <div\n className={cx(\n styles.wrapper,\n fullWidth && styles.wrapperFullWidth,\n className,\n )}\n >\n <DropdownMenuPrimitive.Trigger asChild>\n <button\n ref={ref}\n type=\"button\"\n className={styles.trigger}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n disabled={disabled}\n >\n <span className={styles.value}>\n {selectedOptions.length === 0 ? (\n <span className={styles.placeholder}>{placeholder}</span>\n ) : (\n <>\n {visibleOptions.map((option) => (\n <span key={option.value} className={styles.chip}>\n {option.label}\n </span>\n ))}\n {overflowCount > 0 ? (\n <span\n className={cx(\n styles.chip,\n styles.chipSummary,\n )}\n >\n +{overflowCount}\n </span>\n ) : null}\n </>\n )}\n </span>\n <span className={styles.chevron} aria-hidden=\"true\">\n <svg\n viewBox=\"0 0 10 10\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"10\"\n height=\"10\"\n >\n <path\n d=\"M2 3.5L5 6.5L8 3.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n </span>\n </button>\n </DropdownMenuPrimitive.Trigger>\n\n {name\n ? value.map((entry) => (\n <input key={entry} type=\"hidden\" name={name} value={entry} />\n ))\n : null}\n\n <DropdownMenuPrimitive.Portal>\n <DropdownMenuPrimitive.Content\n className={styles.menu}\n sideOffset={4}\n align=\"start\"\n >\n {options.map((option) => {\n const selected = selectedSet.has(option.value);\n\n return (\n <DropdownMenuPrimitive.CheckboxItem\n key={option.value}\n className={cx(\n styles.option,\n selected && styles.optionSelected,\n option.disabled && styles.optionDisabled,\n )}\n checked={selected}\n disabled={option.disabled}\n onCheckedChange={() => toggleValue(option.value)}\n onSelect={(event) => event.preventDefault()}\n >\n <span\n className={cx(\n styles.indicator,\n selected && styles.indicatorSelected,\n option.disabled && styles.indicatorDisabled,\n )}\n aria-hidden=\"true\"\n >\n <DropdownMenuPrimitive.ItemIndicator forceMount>\n <svg\n viewBox=\"0 0 16 16\"\n width=\"16\"\n height=\"16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3.5 8.5 6.5 11.5 12.5 4.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.8\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n <span className={styles.optionLabel}>{option.label}</span>\n </DropdownMenuPrimitive.CheckboxItem>\n );\n })}\n </DropdownMenuPrimitive.Content>\n </DropdownMenuPrimitive.Portal>\n </div>\n </DropdownMenuPrimitive.Root>\n );\n },\n);\n\nMultiSelect.displayName = \"MultiSelect\";\n"],"mappings":"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"}
1
+ {"version":3,"file":"index27.js","names":[],"sources":["../src/components/multi-select/MultiSelect.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./multi-select.module.css\";\n\nexport type MultiSelectOption = {\n label: string;\n value: string;\n disabled?: boolean;\n /** Optional decorative leading visual. The label remains the accessible option name. */\n icon?: React.ReactNode;\n};\n\nexport type MultiSelectProps = {\n options: MultiSelectOption[];\n value: string[];\n onChange: (value: string[]) => void;\n placeholder?: string;\n fullWidth?: boolean;\n maxVisibleValues?: number;\n /** Formats the closed trigger text from the selected options, including an empty selection. */\n formatValue?: (selected: MultiSelectOption[]) => string;\n /** Shows Select all and Clear all actions. Bulk actions modify enabled options only. */\n bulkActions?: boolean;\n selectAllLabel?: string;\n /** Label for clearing all enabled selections. Disabled selected options remain selected. */\n clearAllLabel?: string;\n className?: string;\n disabled?: boolean;\n name?: string;\n \"aria-label\"?: string;\n \"aria-labelledby\"?: string;\n};\n\nexport const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(\n (\n {\n options,\n value,\n onChange,\n placeholder = \"Select options\",\n fullWidth = true,\n maxVisibleValues = 2,\n formatValue,\n bulkActions = false,\n selectAllLabel = \"Select all\",\n clearAllLabel,\n className,\n disabled = false,\n name,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n },\n ref,\n ) => {\n const selectedSet = React.useMemo(() => new Set(value), [value]);\n const selectedOptions = React.useMemo(\n () => options.filter((opt) => selectedSet.has(opt.value)),\n [options, selectedSet],\n );\n\n const enabledValues = React.useMemo(\n () => options.filter((option) => !option.disabled).map((option) => option.value),\n [options],\n );\n const allEnabledSelected =\n enabledValues.length > 0 && enabledValues.every((entry) => selectedSet.has(entry));\n const hasDisabledOptions = options.some((option) => option.disabled);\n const resolvedClearAllLabel =\n clearAllLabel ?? (hasDisabledOptions ? \"Clear enabled\" : \"Clear all\");\n\n const formattedValue = React.useMemo(\n () => formatValue?.(selectedOptions),\n [formatValue, selectedOptions],\n );\n\n const toggleValue = React.useCallback(\n (nextValue: string) => {\n if (selectedSet.has(nextValue)) {\n onChange(value.filter((entry) => entry !== nextValue));\n return;\n }\n\n onChange([...value, nextValue]);\n },\n [onChange, selectedSet, value],\n );\n\n const visibleCount = Math.max(1, maxVisibleValues);\n const visibleOptions = selectedOptions.slice(0, visibleCount);\n const overflowCount = Math.max(\n 0,\n selectedOptions.length - visibleOptions.length,\n );\n\n return (\n <DropdownMenuPrimitive.Root modal={false}>\n <div\n className={cx(\n styles.wrapper,\n fullWidth && styles.wrapperFullWidth,\n className,\n )}\n >\n <DropdownMenuPrimitive.Trigger asChild>\n <button\n ref={ref}\n type=\"button\"\n className={styles.trigger}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n disabled={disabled}\n >\n <span className={styles.value}>\n {formatValue ? (\n <span className={styles.summary}>{formattedValue}</span>\n ) : selectedOptions.length === 0 ? (\n <span className={styles.placeholder}>{placeholder}</span>\n ) : (\n <>\n {visibleOptions.map((option) => (\n <span key={option.value} className={styles.chip}>\n {option.icon ? <span className={styles.optionIcon} aria-hidden=\"true\">{option.icon}</span> : null}\n {option.label}\n </span>\n ))}\n {overflowCount > 0 ? (\n <span className={cx(styles.chip, styles.chipSummary)}>\n +{overflowCount}\n </span>\n ) : null}\n </>\n )}\n </span>\n <span className={styles.chevron} aria-hidden=\"true\">\n <svg\n viewBox=\"0 0 10 10\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"10\"\n height=\"10\"\n >\n <path\n d=\"M2 3.5L5 6.5L8 3.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n </span>\n </button>\n </DropdownMenuPrimitive.Trigger>\n\n {name\n ? value.map((entry) => (\n <input key={entry} type=\"hidden\" name={name} value={entry} />\n ))\n : null}\n\n <DropdownMenuPrimitive.Portal>\n <DropdownMenuPrimitive.Content\n className={styles.menu}\n sideOffset={4}\n align=\"start\"\n >\n {bulkActions && enabledValues.length > 0 ? (\n <>\n <DropdownMenuPrimitive.Item\n className={styles.bulkAction}\n disabled={allEnabledSelected}\n onSelect={(event) => {\n event.preventDefault();\n onChange(Array.from(new Set([...value, ...enabledValues])));\n }}\n >\n {selectAllLabel}\n </DropdownMenuPrimitive.Item>\n <DropdownMenuPrimitive.Item\n className={styles.bulkAction}\n disabled={!enabledValues.some((entry) => selectedSet.has(entry))}\n onSelect={(event) => {\n event.preventDefault();\n const enabledSet = new Set(enabledValues);\n onChange(value.filter((entry) => !enabledSet.has(entry)));\n }}\n >\n {resolvedClearAllLabel}\n </DropdownMenuPrimitive.Item>\n </>\n ) : null}\n {bulkActions && enabledValues.length > 0 && options.length > 0 ? (\n <DropdownMenuPrimitive.Separator className={styles.separator} />\n ) : null}\n {options.map((option) => {\n const selected = selectedSet.has(option.value);\n\n return (\n <DropdownMenuPrimitive.CheckboxItem\n key={option.value}\n className={cx(\n styles.option,\n selected && styles.optionSelected,\n option.disabled && styles.optionDisabled,\n )}\n checked={selected}\n disabled={option.disabled}\n onCheckedChange={() => toggleValue(option.value)}\n onSelect={(event) => event.preventDefault()}\n >\n <span\n className={cx(\n styles.indicator,\n selected && styles.indicatorSelected,\n option.disabled && styles.indicatorDisabled,\n )}\n aria-hidden=\"true\"\n >\n <DropdownMenuPrimitive.ItemIndicator forceMount>\n <svg\n viewBox=\"0 0 16 16\"\n width=\"16\"\n height=\"16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3.5 8.5 6.5 11.5 12.5 4.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.8\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n <span className={styles.optionLabel}>\n {option.icon ? <span className={styles.optionIcon} aria-hidden=\"true\">{option.icon}</span> : null}\n {option.label}\n </span>\n </DropdownMenuPrimitive.CheckboxItem>\n );\n })}\n </DropdownMenuPrimitive.Content>\n </DropdownMenuPrimitive.Portal>\n </div>\n </DropdownMenuPrimitive.Root>\n );\n },\n);\n\nMultiSelect.displayName = \"MultiSelect\";\n"],"mappings":"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"}
package/dist/index28.cjs CHANGED
@@ -8,9 +8,14 @@ let react_jsx_runtime = require("react/jsx-runtime");
8
8
  let _radix_ui_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
9
9
  _radix_ui_react_dropdown_menu = require_runtime.__toESM(_radix_ui_react_dropdown_menu, 1);
10
10
  //#region src/components/multi-select/MultiSelect.tsx
11
- var MultiSelect = react.forwardRef(({ options, value, onChange, placeholder = "Select options", fullWidth = true, maxVisibleValues = 2, className, disabled = false, name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }, ref) => {
11
+ var MultiSelect = react.forwardRef(({ options, value, onChange, placeholder = "Select options", fullWidth = true, maxVisibleValues = 2, formatValue, bulkActions = false, selectAllLabel = "Select all", clearAllLabel, className, disabled = false, name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }, ref) => {
12
12
  const selectedSet = react.useMemo(() => new Set(value), [value]);
13
13
  const selectedOptions = react.useMemo(() => options.filter((opt) => selectedSet.has(opt.value)), [options, selectedSet]);
14
+ const enabledValues = react.useMemo(() => options.filter((option) => !option.disabled).map((option) => option.value), [options]);
15
+ const allEnabledSelected = enabledValues.length > 0 && enabledValues.every((entry) => selectedSet.has(entry));
16
+ const hasDisabledOptions = options.some((option) => option.disabled);
17
+ const resolvedClearAllLabel = clearAllLabel ?? (hasDisabledOptions ? "Clear enabled" : "Clear all");
18
+ const formattedValue = react.useMemo(() => formatValue?.(selectedOptions), [formatValue, selectedOptions]);
14
19
  const toggleValue = react.useCallback((nextValue) => {
15
20
  if (selectedSet.has(nextValue)) {
16
21
  onChange(value.filter((entry) => entry !== nextValue));
@@ -41,12 +46,19 @@ var MultiSelect = react.forwardRef(({ options, value, onChange, placeholder = "S
41
46
  disabled,
42
47
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
43
48
  className: require_multi_select_module.default.value,
44
- children: selectedOptions.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
49
+ children: formatValue ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
50
+ className: require_multi_select_module.default.summary,
51
+ children: formattedValue
52
+ }) : selectedOptions.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
45
53
  className: require_multi_select_module.default.placeholder,
46
54
  children: placeholder
47
- }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [visibleOptions.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
55
+ }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [visibleOptions.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
48
56
  className: require_multi_select_module.default.chip,
49
- children: option.label
57
+ children: [option.icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
58
+ className: require_multi_select_module.default.optionIcon,
59
+ "aria-hidden": "true",
60
+ children: option.icon
61
+ }) : null, option.label]
50
62
  }, option.value)), overflowCount > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
51
63
  className: require_cx.cx(require_multi_select_module.default.chip, require_multi_select_module.default.chipSummary),
52
64
  children: ["+", overflowCount]
@@ -76,44 +88,69 @@ var MultiSelect = react.forwardRef(({ options, value, onChange, placeholder = "S
76
88
  name,
77
89
  value: entry
78
90
  }, entry)) : null,
79
- /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Content, {
91
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dropdown_menu.Content, {
80
92
  className: require_multi_select_module.default.menu,
81
93
  sideOffset: 4,
82
94
  align: "start",
83
- children: options.map((option) => {
84
- const selected = selectedSet.has(option.value);
85
- return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dropdown_menu.CheckboxItem, {
86
- className: require_cx.cx(require_multi_select_module.default.option, selected && require_multi_select_module.default.optionSelected, option.disabled && require_multi_select_module.default.optionDisabled),
87
- checked: selected,
88
- disabled: option.disabled,
89
- onCheckedChange: () => toggleValue(option.value),
90
- onSelect: (event) => event.preventDefault(),
91
- children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
92
- className: require_cx.cx(require_multi_select_module.default.indicator, selected && require_multi_select_module.default.indicatorSelected, option.disabled && require_multi_select_module.default.indicatorDisabled),
93
- "aria-hidden": "true",
94
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.ItemIndicator, {
95
- forceMount: true,
96
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
97
- viewBox: "0 0 16 16",
98
- width: "16",
99
- height: "16",
100
- fill: "none",
101
- xmlns: "http://www.w3.org/2000/svg",
102
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
103
- d: "M3.5 8.5 6.5 11.5 12.5 4.5",
104
- stroke: "currentColor",
105
- strokeWidth: "1.8",
106
- strokeLinecap: "round",
107
- strokeLinejoin: "round"
95
+ children: [
96
+ bulkActions && enabledValues.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Item, {
97
+ className: require_multi_select_module.default.bulkAction,
98
+ disabled: allEnabledSelected,
99
+ onSelect: (event) => {
100
+ event.preventDefault();
101
+ onChange(Array.from(/* @__PURE__ */ new Set([...value, ...enabledValues])));
102
+ },
103
+ children: selectAllLabel
104
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Item, {
105
+ className: require_multi_select_module.default.bulkAction,
106
+ disabled: !enabledValues.some((entry) => selectedSet.has(entry)),
107
+ onSelect: (event) => {
108
+ event.preventDefault();
109
+ const enabledSet = new Set(enabledValues);
110
+ onChange(value.filter((entry) => !enabledSet.has(entry)));
111
+ },
112
+ children: resolvedClearAllLabel
113
+ })] }) : null,
114
+ bulkActions && enabledValues.length > 0 && options.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Separator, { className: require_multi_select_module.default.separator }) : null,
115
+ options.map((option) => {
116
+ const selected = selectedSet.has(option.value);
117
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dropdown_menu.CheckboxItem, {
118
+ className: require_cx.cx(require_multi_select_module.default.option, selected && require_multi_select_module.default.optionSelected, option.disabled && require_multi_select_module.default.optionDisabled),
119
+ checked: selected,
120
+ disabled: option.disabled,
121
+ onCheckedChange: () => toggleValue(option.value),
122
+ onSelect: (event) => event.preventDefault(),
123
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
124
+ className: require_cx.cx(require_multi_select_module.default.indicator, selected && require_multi_select_module.default.indicatorSelected, option.disabled && require_multi_select_module.default.indicatorDisabled),
125
+ "aria-hidden": "true",
126
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.ItemIndicator, {
127
+ forceMount: true,
128
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
129
+ viewBox: "0 0 16 16",
130
+ width: "16",
131
+ height: "16",
132
+ fill: "none",
133
+ xmlns: "http://www.w3.org/2000/svg",
134
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
135
+ d: "M3.5 8.5 6.5 11.5 12.5 4.5",
136
+ stroke: "currentColor",
137
+ strokeWidth: "1.8",
138
+ strokeLinecap: "round",
139
+ strokeLinejoin: "round"
140
+ })
108
141
  })
109
142
  })
110
- })
111
- }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
112
- className: require_multi_select_module.default.optionLabel,
113
- children: option.label
114
- })]
115
- }, option.value);
116
- })
143
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
144
+ className: require_multi_select_module.default.optionLabel,
145
+ children: [option.icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
146
+ className: require_multi_select_module.default.optionIcon,
147
+ "aria-hidden": "true",
148
+ children: option.icon
149
+ }) : null, option.label]
150
+ })]
151
+ }, option.value);
152
+ })
153
+ ]
117
154
  }) })
118
155
  ]
119
156
  })
package/dist/index28.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index28.cjs","names":[],"sources":["../src/components/multi-select/MultiSelect.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./multi-select.module.css\";\n\nexport type MultiSelectOption = {\n label: string;\n value: string;\n disabled?: boolean;\n};\n\nexport type MultiSelectProps = {\n options: MultiSelectOption[];\n value: string[];\n onChange: (value: string[]) => void;\n placeholder?: string;\n fullWidth?: boolean;\n maxVisibleValues?: number;\n className?: string;\n disabled?: boolean;\n name?: string;\n \"aria-label\"?: string;\n \"aria-labelledby\"?: string;\n};\n\nexport const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(\n (\n {\n options,\n value,\n onChange,\n placeholder = \"Select options\",\n fullWidth = true,\n maxVisibleValues = 2,\n className,\n disabled = false,\n name,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n },\n ref,\n ) => {\n const selectedSet = React.useMemo(() => new Set(value), [value]);\n const selectedOptions = React.useMemo(\n () => options.filter((opt) => selectedSet.has(opt.value)),\n [options, selectedSet],\n );\n\n const toggleValue = React.useCallback(\n (nextValue: string) => {\n if (selectedSet.has(nextValue)) {\n onChange(value.filter((entry) => entry !== nextValue));\n return;\n }\n\n onChange([...value, nextValue]);\n },\n [onChange, selectedSet, value],\n );\n\n const visibleCount = Math.max(1, maxVisibleValues);\n const visibleOptions = selectedOptions.slice(0, visibleCount);\n const overflowCount = Math.max(\n 0,\n selectedOptions.length - visibleOptions.length,\n );\n\n return (\n <DropdownMenuPrimitive.Root modal={false}>\n <div\n className={cx(\n styles.wrapper,\n fullWidth && styles.wrapperFullWidth,\n className,\n )}\n >\n <DropdownMenuPrimitive.Trigger asChild>\n <button\n ref={ref}\n type=\"button\"\n className={styles.trigger}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n disabled={disabled}\n >\n <span className={styles.value}>\n {selectedOptions.length === 0 ? (\n <span className={styles.placeholder}>{placeholder}</span>\n ) : (\n <>\n {visibleOptions.map((option) => (\n <span key={option.value} className={styles.chip}>\n {option.label}\n </span>\n ))}\n {overflowCount > 0 ? (\n <span\n className={cx(\n styles.chip,\n styles.chipSummary,\n )}\n >\n +{overflowCount}\n </span>\n ) : null}\n </>\n )}\n </span>\n <span className={styles.chevron} aria-hidden=\"true\">\n <svg\n viewBox=\"0 0 10 10\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"10\"\n height=\"10\"\n >\n <path\n d=\"M2 3.5L5 6.5L8 3.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n </span>\n </button>\n </DropdownMenuPrimitive.Trigger>\n\n {name\n ? value.map((entry) => (\n <input key={entry} type=\"hidden\" name={name} value={entry} />\n ))\n : null}\n\n <DropdownMenuPrimitive.Portal>\n <DropdownMenuPrimitive.Content\n className={styles.menu}\n sideOffset={4}\n align=\"start\"\n >\n {options.map((option) => {\n const selected = selectedSet.has(option.value);\n\n return (\n <DropdownMenuPrimitive.CheckboxItem\n key={option.value}\n className={cx(\n styles.option,\n selected && styles.optionSelected,\n option.disabled && styles.optionDisabled,\n )}\n checked={selected}\n disabled={option.disabled}\n onCheckedChange={() => toggleValue(option.value)}\n onSelect={(event) => event.preventDefault()}\n >\n <span\n className={cx(\n styles.indicator,\n selected && styles.indicatorSelected,\n option.disabled && styles.indicatorDisabled,\n )}\n aria-hidden=\"true\"\n >\n <DropdownMenuPrimitive.ItemIndicator forceMount>\n <svg\n viewBox=\"0 0 16 16\"\n width=\"16\"\n height=\"16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3.5 8.5 6.5 11.5 12.5 4.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.8\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n <span className={styles.optionLabel}>{option.label}</span>\n </DropdownMenuPrimitive.CheckboxItem>\n );\n })}\n </DropdownMenuPrimitive.Content>\n </DropdownMenuPrimitive.Portal>\n </div>\n </DropdownMenuPrimitive.Root>\n );\n },\n);\n\nMultiSelect.displayName = \"MultiSelect\";\n"],"mappings":"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"}
1
+ {"version":3,"file":"index28.cjs","names":[],"sources":["../src/components/multi-select/MultiSelect.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./multi-select.module.css\";\n\nexport type MultiSelectOption = {\n label: string;\n value: string;\n disabled?: boolean;\n /** Optional decorative leading visual. The label remains the accessible option name. */\n icon?: React.ReactNode;\n};\n\nexport type MultiSelectProps = {\n options: MultiSelectOption[];\n value: string[];\n onChange: (value: string[]) => void;\n placeholder?: string;\n fullWidth?: boolean;\n maxVisibleValues?: number;\n /** Formats the closed trigger text from the selected options, including an empty selection. */\n formatValue?: (selected: MultiSelectOption[]) => string;\n /** Shows Select all and Clear all actions. Bulk actions modify enabled options only. */\n bulkActions?: boolean;\n selectAllLabel?: string;\n /** Label for clearing all enabled selections. Disabled selected options remain selected. */\n clearAllLabel?: string;\n className?: string;\n disabled?: boolean;\n name?: string;\n \"aria-label\"?: string;\n \"aria-labelledby\"?: string;\n};\n\nexport const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(\n (\n {\n options,\n value,\n onChange,\n placeholder = \"Select options\",\n fullWidth = true,\n maxVisibleValues = 2,\n formatValue,\n bulkActions = false,\n selectAllLabel = \"Select all\",\n clearAllLabel,\n className,\n disabled = false,\n name,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n },\n ref,\n ) => {\n const selectedSet = React.useMemo(() => new Set(value), [value]);\n const selectedOptions = React.useMemo(\n () => options.filter((opt) => selectedSet.has(opt.value)),\n [options, selectedSet],\n );\n\n const enabledValues = React.useMemo(\n () => options.filter((option) => !option.disabled).map((option) => option.value),\n [options],\n );\n const allEnabledSelected =\n enabledValues.length > 0 && enabledValues.every((entry) => selectedSet.has(entry));\n const hasDisabledOptions = options.some((option) => option.disabled);\n const resolvedClearAllLabel =\n clearAllLabel ?? (hasDisabledOptions ? \"Clear enabled\" : \"Clear all\");\n\n const formattedValue = React.useMemo(\n () => formatValue?.(selectedOptions),\n [formatValue, selectedOptions],\n );\n\n const toggleValue = React.useCallback(\n (nextValue: string) => {\n if (selectedSet.has(nextValue)) {\n onChange(value.filter((entry) => entry !== nextValue));\n return;\n }\n\n onChange([...value, nextValue]);\n },\n [onChange, selectedSet, value],\n );\n\n const visibleCount = Math.max(1, maxVisibleValues);\n const visibleOptions = selectedOptions.slice(0, visibleCount);\n const overflowCount = Math.max(\n 0,\n selectedOptions.length - visibleOptions.length,\n );\n\n return (\n <DropdownMenuPrimitive.Root modal={false}>\n <div\n className={cx(\n styles.wrapper,\n fullWidth && styles.wrapperFullWidth,\n className,\n )}\n >\n <DropdownMenuPrimitive.Trigger asChild>\n <button\n ref={ref}\n type=\"button\"\n className={styles.trigger}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n disabled={disabled}\n >\n <span className={styles.value}>\n {formatValue ? (\n <span className={styles.summary}>{formattedValue}</span>\n ) : selectedOptions.length === 0 ? (\n <span className={styles.placeholder}>{placeholder}</span>\n ) : (\n <>\n {visibleOptions.map((option) => (\n <span key={option.value} className={styles.chip}>\n {option.icon ? <span className={styles.optionIcon} aria-hidden=\"true\">{option.icon}</span> : null}\n {option.label}\n </span>\n ))}\n {overflowCount > 0 ? (\n <span className={cx(styles.chip, styles.chipSummary)}>\n +{overflowCount}\n </span>\n ) : null}\n </>\n )}\n </span>\n <span className={styles.chevron} aria-hidden=\"true\">\n <svg\n viewBox=\"0 0 10 10\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"10\"\n height=\"10\"\n >\n <path\n d=\"M2 3.5L5 6.5L8 3.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n </span>\n </button>\n </DropdownMenuPrimitive.Trigger>\n\n {name\n ? value.map((entry) => (\n <input key={entry} type=\"hidden\" name={name} value={entry} />\n ))\n : null}\n\n <DropdownMenuPrimitive.Portal>\n <DropdownMenuPrimitive.Content\n className={styles.menu}\n sideOffset={4}\n align=\"start\"\n >\n {bulkActions && enabledValues.length > 0 ? (\n <>\n <DropdownMenuPrimitive.Item\n className={styles.bulkAction}\n disabled={allEnabledSelected}\n onSelect={(event) => {\n event.preventDefault();\n onChange(Array.from(new Set([...value, ...enabledValues])));\n }}\n >\n {selectAllLabel}\n </DropdownMenuPrimitive.Item>\n <DropdownMenuPrimitive.Item\n className={styles.bulkAction}\n disabled={!enabledValues.some((entry) => selectedSet.has(entry))}\n onSelect={(event) => {\n event.preventDefault();\n const enabledSet = new Set(enabledValues);\n onChange(value.filter((entry) => !enabledSet.has(entry)));\n }}\n >\n {resolvedClearAllLabel}\n </DropdownMenuPrimitive.Item>\n </>\n ) : null}\n {bulkActions && enabledValues.length > 0 && options.length > 0 ? (\n <DropdownMenuPrimitive.Separator className={styles.separator} />\n ) : null}\n {options.map((option) => {\n const selected = selectedSet.has(option.value);\n\n return (\n <DropdownMenuPrimitive.CheckboxItem\n key={option.value}\n className={cx(\n styles.option,\n selected && styles.optionSelected,\n option.disabled && styles.optionDisabled,\n )}\n checked={selected}\n disabled={option.disabled}\n onCheckedChange={() => toggleValue(option.value)}\n onSelect={(event) => event.preventDefault()}\n >\n <span\n className={cx(\n styles.indicator,\n selected && styles.indicatorSelected,\n option.disabled && styles.indicatorDisabled,\n )}\n aria-hidden=\"true\"\n >\n <DropdownMenuPrimitive.ItemIndicator forceMount>\n <svg\n viewBox=\"0 0 16 16\"\n width=\"16\"\n height=\"16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3.5 8.5 6.5 11.5 12.5 4.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.8\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n <span className={styles.optionLabel}>\n {option.icon ? <span className={styles.optionIcon} aria-hidden=\"true\">{option.icon}</span> : null}\n {option.label}\n </span>\n </DropdownMenuPrimitive.CheckboxItem>\n );\n })}\n </DropdownMenuPrimitive.Content>\n </DropdownMenuPrimitive.Portal>\n </div>\n </DropdownMenuPrimitive.Root>\n );\n },\n);\n\nMultiSelect.displayName = \"MultiSelect\";\n"],"mappings":"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"}
package/dist/index34.js CHANGED
@@ -16,13 +16,12 @@ function isAccent(value) {
16
16
  return UZI_ACCENTS.includes(value);
17
17
  }
18
18
  function getSystemTheme() {
19
- if (typeof window === "undefined") return "light";
20
19
  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
21
20
  }
22
21
  function ThemeProvider({ children, theme, defaultTheme = "system", accent, defaultAccent = "blue", onThemeChange, onAccentChange, storageKey = THEME_STORAGE_KEY, accentStorageKey = ACCENT_STORAGE_KEY, disableStorage = false, toastConfig }) {
23
22
  const [internalTheme, setInternalTheme] = useState(defaultTheme);
24
23
  const [internalAccent, setInternalAccent] = useState(defaultAccent);
25
- const [systemTheme, setSystemTheme] = useState("light");
24
+ const [systemTheme, setSystemTheme] = useState("dark");
26
25
  useEffect(() => {
27
26
  setSystemTheme(getSystemTheme());
28
27
  if (!disableStorage) {
package/dist/index34.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index34.js","names":[],"sources":["../src/theme/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n createContext,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n type ReactNode,\n} from \"react\";\nimport { UZI_THEMES, UZI_ACCENTS, THEME_STORAGE_KEY as DEFAULT_THEME_KEY, ACCENT_STORAGE_KEY as DEFAULT_ACCENT_KEY } from \"./constants\";\nimport { ToastProvider } from \"../components/toast/ToastContext\";\nimport type { ToastConfig } from \"../components/toast/types\";\n\nexport type UziTheme = typeof UZI_THEMES[number];\nexport type UziResolvedTheme = \"light\" | \"dark\";\nexport type UziAccent = typeof UZI_ACCENTS[number];\n\ntype ThemeContextValue = {\n theme: UziTheme;\n resolvedTheme: UziResolvedTheme;\n accent: UziAccent;\n setTheme: (theme: UziTheme) => void;\n setAccent: (accent: UziAccent) => void;\n toggleTheme: () => void;\n};\n\ntype ThemeProviderProps = {\n children: ReactNode;\n theme?: UziTheme;\n defaultTheme?: UziTheme;\n accent?: UziAccent;\n defaultAccent?: UziAccent;\n onThemeChange?: (theme: UziTheme) => void;\n onAccentChange?: (accent: UziAccent) => void;\n storageKey?: string;\n accentStorageKey?: string;\n disableStorage?: boolean;\n toastConfig?: ToastConfig;\n};\n\nconst THEME_STORAGE_KEY = DEFAULT_THEME_KEY;\nconst ACCENT_STORAGE_KEY = DEFAULT_ACCENT_KEY;\nconst THEME_ATTRIBUTE = \"data-uzi-theme\";\nconst ACCENT_ATTRIBUTE = \"data-uzi-accent\";\n\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined);\n\nfunction isTheme(value: string | null): value is UziTheme {\n return UZI_THEMES.includes(value as UziTheme);\n}\n\nfunction isAccent(value: string | null): value is UziAccent {\n return UZI_ACCENTS.includes(value as UziAccent);\n}\n\nfunction getSystemTheme(): UziResolvedTheme {\n if (typeof window === \"undefined\") return \"light\";\n return window.matchMedia(\"(prefers-color-scheme: dark)\").matches ? \"dark\" : \"light\";\n}\n\nexport function ThemeProvider({\n children,\n theme,\n defaultTheme = \"system\",\n accent,\n defaultAccent = \"blue\",\n onThemeChange,\n onAccentChange,\n storageKey = THEME_STORAGE_KEY,\n accentStorageKey = ACCENT_STORAGE_KEY,\n disableStorage = false,\n toastConfig,\n}: ThemeProviderProps) {\n const [internalTheme, setInternalTheme] = useState<UziTheme>(defaultTheme);\n const [internalAccent, setInternalAccent] = useState<UziAccent>(defaultAccent);\n const [systemTheme, setSystemTheme] = useState<UziResolvedTheme>(\"light\");\n\n useEffect(() => {\n setSystemTheme(getSystemTheme());\n if (!disableStorage) {\n const storedTheme = window.localStorage.getItem(storageKey);\n if (isTheme(storedTheme)) setInternalTheme(storedTheme);\n const storedAccent = window.localStorage.getItem(accentStorageKey);\n if (isAccent(storedAccent)) setInternalAccent(storedAccent);\n }\n }, [disableStorage, storageKey, accentStorageKey]);\n\n const isThemeControlled = theme !== undefined;\n const isAccentControlled = accent !== undefined;\n\n const currentTheme = isThemeControlled ? theme : internalTheme;\n const currentAccent = isAccentControlled ? accent : internalAccent;\n const resolvedTheme = currentTheme === \"system\" ? systemTheme : currentTheme;\n\n useEffect(() => {\n if (typeof window === \"undefined\") return;\n\n const mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n const handleChange = () => setSystemTheme(mediaQuery.matches ? \"dark\" : \"light\");\n\n handleChange();\n mediaQuery.addEventListener(\"change\", handleChange);\n return () => mediaQuery.removeEventListener(\"change\", handleChange);\n }, []);\n\n useEffect(() => {\n if (typeof document === \"undefined\") return;\n const root = document.documentElement;\n root.setAttribute(THEME_ATTRIBUTE, resolvedTheme);\n root.setAttribute(ACCENT_ATTRIBUTE, currentAccent);\n root.style.colorScheme = resolvedTheme;\n root.classList.toggle(\"dark\", resolvedTheme === \"dark\");\n }, [currentAccent, resolvedTheme]);\n\n const setTheme = useCallback(\n (nextTheme: UziTheme) => {\n if (!isThemeControlled) setInternalTheme(nextTheme);\n if (!disableStorage && typeof window !== \"undefined\") {\n window.localStorage.setItem(storageKey, nextTheme);\n }\n onThemeChange?.(nextTheme);\n },\n [disableStorage, isThemeControlled, onThemeChange, storageKey],\n );\n\n const setAccent = useCallback(\n (nextAccent: UziAccent) => {\n if (!isAccentControlled) setInternalAccent(nextAccent);\n if (!disableStorage && typeof window !== \"undefined\") {\n window.localStorage.setItem(accentStorageKey, nextAccent);\n }\n onAccentChange?.(nextAccent);\n },\n [accentStorageKey, disableStorage, isAccentControlled, onAccentChange],\n );\n\n const toggleTheme = useCallback(() => {\n setTheme(resolvedTheme === \"dark\" ? \"light\" : \"dark\");\n }, [resolvedTheme, setTheme]);\n\n const value = useMemo<ThemeContextValue>(\n () => ({\n theme: currentTheme,\n resolvedTheme,\n accent: currentAccent,\n setTheme,\n setAccent,\n toggleTheme,\n }),\n [currentAccent, currentTheme, resolvedTheme, setAccent, setTheme, toggleTheme],\n );\n\n return (\n <ThemeContext.Provider value={value}>\n <ToastProvider config={toastConfig}>{children}</ToastProvider>\n </ThemeContext.Provider>\n );\n}\n\nexport function useTheme() {\n const context = useContext(ThemeContext);\n if (!context) throw new Error(\"useTheme must be used within a ThemeProvider\");\n return context;\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"index34.js","names":[],"sources":["../src/theme/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n createContext,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n type ReactNode,\n} from \"react\";\nimport { UZI_THEMES, UZI_ACCENTS, THEME_STORAGE_KEY as DEFAULT_THEME_KEY, ACCENT_STORAGE_KEY as DEFAULT_ACCENT_KEY } from \"./constants\";\nimport { ToastProvider } from \"../components/toast/ToastContext\";\nimport type { ToastConfig } from \"../components/toast/types\";\n\nexport type UziTheme = typeof UZI_THEMES[number];\nexport type UziResolvedTheme = \"light\" | \"dark\";\nexport type UziAccent = typeof UZI_ACCENTS[number];\n\ntype ThemeContextValue = {\n theme: UziTheme;\n resolvedTheme: UziResolvedTheme;\n accent: UziAccent;\n setTheme: (theme: UziTheme) => void;\n setAccent: (accent: UziAccent) => void;\n toggleTheme: () => void;\n};\n\ntype ThemeProviderProps = {\n children: ReactNode;\n theme?: UziTheme;\n defaultTheme?: UziTheme;\n accent?: UziAccent;\n defaultAccent?: UziAccent;\n onThemeChange?: (theme: UziTheme) => void;\n onAccentChange?: (accent: UziAccent) => void;\n storageKey?: string;\n accentStorageKey?: string;\n disableStorage?: boolean;\n toastConfig?: ToastConfig;\n};\n\nconst THEME_STORAGE_KEY = DEFAULT_THEME_KEY;\nconst ACCENT_STORAGE_KEY = DEFAULT_ACCENT_KEY;\nconst THEME_ATTRIBUTE = \"data-uzi-theme\";\nconst ACCENT_ATTRIBUTE = \"data-uzi-accent\";\n\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined);\n\nfunction isTheme(value: string | null): value is UziTheme {\n return UZI_THEMES.includes(value as UziTheme);\n}\n\nfunction isAccent(value: string | null): value is UziAccent {\n return UZI_ACCENTS.includes(value as UziAccent);\n}\n\nfunction getSystemTheme(): UziResolvedTheme {\n return window.matchMedia(\"(prefers-color-scheme: dark)\").matches ? \"dark\" : \"light\";\n}\n\nexport function ThemeProvider({\n children,\n theme,\n defaultTheme = \"system\",\n accent,\n defaultAccent = \"blue\",\n onThemeChange,\n onAccentChange,\n storageKey = THEME_STORAGE_KEY,\n accentStorageKey = ACCENT_STORAGE_KEY,\n disableStorage = false,\n toastConfig,\n}: ThemeProviderProps) {\n const [internalTheme, setInternalTheme] = useState<UziTheme>(defaultTheme);\n const [internalAccent, setInternalAccent] = useState<UziAccent>(defaultAccent);\n const [systemTheme, setSystemTheme] = useState<UziResolvedTheme>(\"dark\");\n\n useEffect(() => {\n setSystemTheme(getSystemTheme());\n if (!disableStorage) {\n const storedTheme = window.localStorage.getItem(storageKey);\n if (isTheme(storedTheme)) setInternalTheme(storedTheme);\n const storedAccent = window.localStorage.getItem(accentStorageKey);\n if (isAccent(storedAccent)) setInternalAccent(storedAccent);\n }\n }, [disableStorage, storageKey, accentStorageKey]);\n\n const isThemeControlled = theme !== undefined;\n const isAccentControlled = accent !== undefined;\n\n const currentTheme = isThemeControlled ? theme : internalTheme;\n const currentAccent = isAccentControlled ? accent : internalAccent;\n const resolvedTheme = currentTheme === \"system\" ? systemTheme : currentTheme;\n\n useEffect(() => {\n if (typeof window === \"undefined\") return;\n\n const mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n const handleChange = () => setSystemTheme(mediaQuery.matches ? \"dark\" : \"light\");\n\n handleChange();\n mediaQuery.addEventListener(\"change\", handleChange);\n return () => mediaQuery.removeEventListener(\"change\", handleChange);\n }, []);\n\n useEffect(() => {\n if (typeof document === \"undefined\") return;\n const root = document.documentElement;\n root.setAttribute(THEME_ATTRIBUTE, resolvedTheme);\n root.setAttribute(ACCENT_ATTRIBUTE, currentAccent);\n root.style.colorScheme = resolvedTheme;\n root.classList.toggle(\"dark\", resolvedTheme === \"dark\");\n }, [currentAccent, resolvedTheme]);\n\n const setTheme = useCallback(\n (nextTheme: UziTheme) => {\n if (!isThemeControlled) setInternalTheme(nextTheme);\n if (!disableStorage && typeof window !== \"undefined\") {\n window.localStorage.setItem(storageKey, nextTheme);\n }\n onThemeChange?.(nextTheme);\n },\n [disableStorage, isThemeControlled, onThemeChange, storageKey],\n );\n\n const setAccent = useCallback(\n (nextAccent: UziAccent) => {\n if (!isAccentControlled) setInternalAccent(nextAccent);\n if (!disableStorage && typeof window !== \"undefined\") {\n window.localStorage.setItem(accentStorageKey, nextAccent);\n }\n onAccentChange?.(nextAccent);\n },\n [accentStorageKey, disableStorage, isAccentControlled, onAccentChange],\n );\n\n const toggleTheme = useCallback(() => {\n setTheme(resolvedTheme === \"dark\" ? \"light\" : \"dark\");\n }, [resolvedTheme, setTheme]);\n\n const value = useMemo<ThemeContextValue>(\n () => ({\n theme: currentTheme,\n resolvedTheme,\n accent: currentAccent,\n setTheme,\n setAccent,\n toggleTheme,\n }),\n [currentAccent, currentTheme, resolvedTheme, setAccent, setTheme, toggleTheme],\n );\n\n return (\n <ThemeContext.Provider value={value}>\n <ToastProvider config={toastConfig}>{children}</ToastProvider>\n </ThemeContext.Provider>\n );\n}\n\nexport function useTheme() {\n const context = useContext(ThemeContext);\n if (!context) throw new Error(\"useTheme must be used within a ThemeProvider\");\n return context;\n}\n"],"mappings":"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"}
package/dist/index35.cjs CHANGED
@@ -16,13 +16,12 @@ function isAccent(value) {
16
16
  return require_constants.UZI_ACCENTS.includes(value);
17
17
  }
18
18
  function getSystemTheme() {
19
- if (typeof window === "undefined") return "light";
20
19
  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
21
20
  }
22
21
  function ThemeProvider({ children, theme, defaultTheme = "system", accent, defaultAccent = "blue", onThemeChange, onAccentChange, storageKey = THEME_STORAGE_KEY, accentStorageKey = ACCENT_STORAGE_KEY, disableStorage = false, toastConfig }) {
23
22
  const [internalTheme, setInternalTheme] = (0, react.useState)(defaultTheme);
24
23
  const [internalAccent, setInternalAccent] = (0, react.useState)(defaultAccent);
25
- const [systemTheme, setSystemTheme] = (0, react.useState)("light");
24
+ const [systemTheme, setSystemTheme] = (0, react.useState)("dark");
26
25
  (0, react.useEffect)(() => {
27
26
  setSystemTheme(getSystemTheme());
28
27
  if (!disableStorage) {
package/dist/index35.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index35.cjs","names":[],"sources":["../src/theme/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n createContext,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n type ReactNode,\n} from \"react\";\nimport { UZI_THEMES, UZI_ACCENTS, THEME_STORAGE_KEY as DEFAULT_THEME_KEY, ACCENT_STORAGE_KEY as DEFAULT_ACCENT_KEY } from \"./constants\";\nimport { ToastProvider } from \"../components/toast/ToastContext\";\nimport type { ToastConfig } from \"../components/toast/types\";\n\nexport type UziTheme = typeof UZI_THEMES[number];\nexport type UziResolvedTheme = \"light\" | \"dark\";\nexport type UziAccent = typeof UZI_ACCENTS[number];\n\ntype ThemeContextValue = {\n theme: UziTheme;\n resolvedTheme: UziResolvedTheme;\n accent: UziAccent;\n setTheme: (theme: UziTheme) => void;\n setAccent: (accent: UziAccent) => void;\n toggleTheme: () => void;\n};\n\ntype ThemeProviderProps = {\n children: ReactNode;\n theme?: UziTheme;\n defaultTheme?: UziTheme;\n accent?: UziAccent;\n defaultAccent?: UziAccent;\n onThemeChange?: (theme: UziTheme) => void;\n onAccentChange?: (accent: UziAccent) => void;\n storageKey?: string;\n accentStorageKey?: string;\n disableStorage?: boolean;\n toastConfig?: ToastConfig;\n};\n\nconst THEME_STORAGE_KEY = DEFAULT_THEME_KEY;\nconst ACCENT_STORAGE_KEY = DEFAULT_ACCENT_KEY;\nconst THEME_ATTRIBUTE = \"data-uzi-theme\";\nconst ACCENT_ATTRIBUTE = \"data-uzi-accent\";\n\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined);\n\nfunction isTheme(value: string | null): value is UziTheme {\n return UZI_THEMES.includes(value as UziTheme);\n}\n\nfunction isAccent(value: string | null): value is UziAccent {\n return UZI_ACCENTS.includes(value as UziAccent);\n}\n\nfunction getSystemTheme(): UziResolvedTheme {\n if (typeof window === \"undefined\") return \"light\";\n return window.matchMedia(\"(prefers-color-scheme: dark)\").matches ? \"dark\" : \"light\";\n}\n\nexport function ThemeProvider({\n children,\n theme,\n defaultTheme = \"system\",\n accent,\n defaultAccent = \"blue\",\n onThemeChange,\n onAccentChange,\n storageKey = THEME_STORAGE_KEY,\n accentStorageKey = ACCENT_STORAGE_KEY,\n disableStorage = false,\n toastConfig,\n}: ThemeProviderProps) {\n const [internalTheme, setInternalTheme] = useState<UziTheme>(defaultTheme);\n const [internalAccent, setInternalAccent] = useState<UziAccent>(defaultAccent);\n const [systemTheme, setSystemTheme] = useState<UziResolvedTheme>(\"light\");\n\n useEffect(() => {\n setSystemTheme(getSystemTheme());\n if (!disableStorage) {\n const storedTheme = window.localStorage.getItem(storageKey);\n if (isTheme(storedTheme)) setInternalTheme(storedTheme);\n const storedAccent = window.localStorage.getItem(accentStorageKey);\n if (isAccent(storedAccent)) setInternalAccent(storedAccent);\n }\n }, [disableStorage, storageKey, accentStorageKey]);\n\n const isThemeControlled = theme !== undefined;\n const isAccentControlled = accent !== undefined;\n\n const currentTheme = isThemeControlled ? theme : internalTheme;\n const currentAccent = isAccentControlled ? accent : internalAccent;\n const resolvedTheme = currentTheme === \"system\" ? systemTheme : currentTheme;\n\n useEffect(() => {\n if (typeof window === \"undefined\") return;\n\n const mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n const handleChange = () => setSystemTheme(mediaQuery.matches ? \"dark\" : \"light\");\n\n handleChange();\n mediaQuery.addEventListener(\"change\", handleChange);\n return () => mediaQuery.removeEventListener(\"change\", handleChange);\n }, []);\n\n useEffect(() => {\n if (typeof document === \"undefined\") return;\n const root = document.documentElement;\n root.setAttribute(THEME_ATTRIBUTE, resolvedTheme);\n root.setAttribute(ACCENT_ATTRIBUTE, currentAccent);\n root.style.colorScheme = resolvedTheme;\n root.classList.toggle(\"dark\", resolvedTheme === \"dark\");\n }, [currentAccent, resolvedTheme]);\n\n const setTheme = useCallback(\n (nextTheme: UziTheme) => {\n if (!isThemeControlled) setInternalTheme(nextTheme);\n if (!disableStorage && typeof window !== \"undefined\") {\n window.localStorage.setItem(storageKey, nextTheme);\n }\n onThemeChange?.(nextTheme);\n },\n [disableStorage, isThemeControlled, onThemeChange, storageKey],\n );\n\n const setAccent = useCallback(\n (nextAccent: UziAccent) => {\n if (!isAccentControlled) setInternalAccent(nextAccent);\n if (!disableStorage && typeof window !== \"undefined\") {\n window.localStorage.setItem(accentStorageKey, nextAccent);\n }\n onAccentChange?.(nextAccent);\n },\n [accentStorageKey, disableStorage, isAccentControlled, onAccentChange],\n );\n\n const toggleTheme = useCallback(() => {\n setTheme(resolvedTheme === \"dark\" ? \"light\" : \"dark\");\n }, [resolvedTheme, setTheme]);\n\n const value = useMemo<ThemeContextValue>(\n () => ({\n theme: currentTheme,\n resolvedTheme,\n accent: currentAccent,\n setTheme,\n setAccent,\n toggleTheme,\n }),\n [currentAccent, currentTheme, resolvedTheme, setAccent, setTheme, toggleTheme],\n );\n\n return (\n <ThemeContext.Provider value={value}>\n <ToastProvider config={toastConfig}>{children}</ToastProvider>\n </ThemeContext.Provider>\n );\n}\n\nexport function useTheme() {\n const context = useContext(ThemeContext);\n if (!context) throw new Error(\"useTheme must be used within a ThemeProvider\");\n return context;\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"index35.cjs","names":[],"sources":["../src/theme/ThemeProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n createContext,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n type ReactNode,\n} from \"react\";\nimport { UZI_THEMES, UZI_ACCENTS, THEME_STORAGE_KEY as DEFAULT_THEME_KEY, ACCENT_STORAGE_KEY as DEFAULT_ACCENT_KEY } from \"./constants\";\nimport { ToastProvider } from \"../components/toast/ToastContext\";\nimport type { ToastConfig } from \"../components/toast/types\";\n\nexport type UziTheme = typeof UZI_THEMES[number];\nexport type UziResolvedTheme = \"light\" | \"dark\";\nexport type UziAccent = typeof UZI_ACCENTS[number];\n\ntype ThemeContextValue = {\n theme: UziTheme;\n resolvedTheme: UziResolvedTheme;\n accent: UziAccent;\n setTheme: (theme: UziTheme) => void;\n setAccent: (accent: UziAccent) => void;\n toggleTheme: () => void;\n};\n\ntype ThemeProviderProps = {\n children: ReactNode;\n theme?: UziTheme;\n defaultTheme?: UziTheme;\n accent?: UziAccent;\n defaultAccent?: UziAccent;\n onThemeChange?: (theme: UziTheme) => void;\n onAccentChange?: (accent: UziAccent) => void;\n storageKey?: string;\n accentStorageKey?: string;\n disableStorage?: boolean;\n toastConfig?: ToastConfig;\n};\n\nconst THEME_STORAGE_KEY = DEFAULT_THEME_KEY;\nconst ACCENT_STORAGE_KEY = DEFAULT_ACCENT_KEY;\nconst THEME_ATTRIBUTE = \"data-uzi-theme\";\nconst ACCENT_ATTRIBUTE = \"data-uzi-accent\";\n\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined);\n\nfunction isTheme(value: string | null): value is UziTheme {\n return UZI_THEMES.includes(value as UziTheme);\n}\n\nfunction isAccent(value: string | null): value is UziAccent {\n return UZI_ACCENTS.includes(value as UziAccent);\n}\n\nfunction getSystemTheme(): UziResolvedTheme {\n return window.matchMedia(\"(prefers-color-scheme: dark)\").matches ? \"dark\" : \"light\";\n}\n\nexport function ThemeProvider({\n children,\n theme,\n defaultTheme = \"system\",\n accent,\n defaultAccent = \"blue\",\n onThemeChange,\n onAccentChange,\n storageKey = THEME_STORAGE_KEY,\n accentStorageKey = ACCENT_STORAGE_KEY,\n disableStorage = false,\n toastConfig,\n}: ThemeProviderProps) {\n const [internalTheme, setInternalTheme] = useState<UziTheme>(defaultTheme);\n const [internalAccent, setInternalAccent] = useState<UziAccent>(defaultAccent);\n const [systemTheme, setSystemTheme] = useState<UziResolvedTheme>(\"dark\");\n\n useEffect(() => {\n setSystemTheme(getSystemTheme());\n if (!disableStorage) {\n const storedTheme = window.localStorage.getItem(storageKey);\n if (isTheme(storedTheme)) setInternalTheme(storedTheme);\n const storedAccent = window.localStorage.getItem(accentStorageKey);\n if (isAccent(storedAccent)) setInternalAccent(storedAccent);\n }\n }, [disableStorage, storageKey, accentStorageKey]);\n\n const isThemeControlled = theme !== undefined;\n const isAccentControlled = accent !== undefined;\n\n const currentTheme = isThemeControlled ? theme : internalTheme;\n const currentAccent = isAccentControlled ? accent : internalAccent;\n const resolvedTheme = currentTheme === \"system\" ? systemTheme : currentTheme;\n\n useEffect(() => {\n if (typeof window === \"undefined\") return;\n\n const mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n const handleChange = () => setSystemTheme(mediaQuery.matches ? \"dark\" : \"light\");\n\n handleChange();\n mediaQuery.addEventListener(\"change\", handleChange);\n return () => mediaQuery.removeEventListener(\"change\", handleChange);\n }, []);\n\n useEffect(() => {\n if (typeof document === \"undefined\") return;\n const root = document.documentElement;\n root.setAttribute(THEME_ATTRIBUTE, resolvedTheme);\n root.setAttribute(ACCENT_ATTRIBUTE, currentAccent);\n root.style.colorScheme = resolvedTheme;\n root.classList.toggle(\"dark\", resolvedTheme === \"dark\");\n }, [currentAccent, resolvedTheme]);\n\n const setTheme = useCallback(\n (nextTheme: UziTheme) => {\n if (!isThemeControlled) setInternalTheme(nextTheme);\n if (!disableStorage && typeof window !== \"undefined\") {\n window.localStorage.setItem(storageKey, nextTheme);\n }\n onThemeChange?.(nextTheme);\n },\n [disableStorage, isThemeControlled, onThemeChange, storageKey],\n );\n\n const setAccent = useCallback(\n (nextAccent: UziAccent) => {\n if (!isAccentControlled) setInternalAccent(nextAccent);\n if (!disableStorage && typeof window !== \"undefined\") {\n window.localStorage.setItem(accentStorageKey, nextAccent);\n }\n onAccentChange?.(nextAccent);\n },\n [accentStorageKey, disableStorage, isAccentControlled, onAccentChange],\n );\n\n const toggleTheme = useCallback(() => {\n setTheme(resolvedTheme === \"dark\" ? \"light\" : \"dark\");\n }, [resolvedTheme, setTheme]);\n\n const value = useMemo<ThemeContextValue>(\n () => ({\n theme: currentTheme,\n resolvedTheme,\n accent: currentAccent,\n setTheme,\n setAccent,\n toggleTheme,\n }),\n [currentAccent, currentTheme, resolvedTheme, setAccent, setTheme, toggleTheme],\n );\n\n return (\n <ThemeContext.Provider value={value}>\n <ToastProvider config={toastConfig}>{children}</ToastProvider>\n </ThemeContext.Provider>\n );\n}\n\nexport function useTheme() {\n const context = useContext(ThemeContext);\n if (!context) throw new Error(\"useTheme must be used within a ThemeProvider\");\n return context;\n}\n"],"mappings":"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"}
package/dist/index8.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index8.js","names":[],"sources":["../src/components/card/card.module.css"],"sourcesContent":[".card {\n position: relative;\n overflow: visible;\n border-radius: var(--ts-card-radius, var(--uzi-radius-lg, 12px));\n border: 1px solid var(--ts-card-border, var(--uzi-border-subtle, var(--border)));\n background: var(--ts-card-bg, var(--uzi-surface-1, var(--panel)));\n color: var(--ts-card-fg, var(--uzi-text-primary, var(--foreground)));\n box-shadow: var(--ts-card-shadow, var(--uzi-shadow-none, none));\n padding: var(--ts-card-padding, 16px);\n transition:\n transform 140ms ease,\n box-shadow 140ms ease,\n border-color 140ms ease,\n background-color 140ms ease;\n}\n\n.tone-default {\n --ts-card-bg: var(--uzi-surface-1, var(--panel));\n --ts-card-border: var(--uzi-border-subtle, var(--border));\n --ts-card-shadow: var(--uzi-shadow-none, none);\n}\n\n.tone-muted {\n --ts-card-bg: var(--uzi-surface-2, var(--muted));\n --ts-card-border: var(--uzi-border-subtle, var(--border));\n --ts-card-shadow: var(--uzi-shadow-none, none);\n}\n\n.tone-contrast {\n --ts-card-bg: var(--ts-card-contrast-bg, color-mix(in srgb, var(--background) 60%, black));\n --ts-card-border: var(--uzi-border-default, var(--border));\n --ts-card-shadow: var(--uzi-shadow-lg, 0 18px 50px rgba(0, 0, 0, 0.32));\n}\n\n.interactive {\n cursor: default;\n}\n\n.interactive:hover {\n transform: translateY(-1px);\n box-shadow: var(--uzi-shadow-sm, 0 4px 12px rgba(0, 0, 0, 0.12));\n border-color: var(--ts-card-hover-border, var(--uzi-border-accent, color-mix(in srgb, var(--primary) 40%, transparent)));\n}\n\n.interactive:focus-within {\n outline: var(--focus-ring);\n outline-offset: var(--focus-ring-offset);\n}\n\n.padding-none { --ts-card-padding: 0; }\n.padding-sm { --ts-card-padding: 10px; }\n.padding-md { --ts-card-padding: 16px; }\n.padding-lg { --ts-card-padding: 20px; }\n"],"mappings":""}
1
+ {"version":3,"file":"index8.js","names":[],"sources":["../src/components/card/card.module.css"],"sourcesContent":[".card {\n position: relative;\n overflow: visible;\n border-radius: var(--ts-card-radius, var(--uzi-radius-lg, 12px));\n border: 1px solid var(--ts-card-border, var(--uzi-border-subtle, var(--border)));\n background: var(--ts-card-bg, var(--uzi-surface-1, var(--panel)));\n color: var(--ts-card-fg, var(--uzi-text-primary, var(--foreground)));\n box-shadow: var(--ts-card-shadow, var(--uzi-shadow-none, none));\n padding: var(--ts-card-padding, 16px);\n transition:\n transform 140ms ease,\n box-shadow 140ms ease,\n border-color 140ms ease,\n background-color 140ms ease;\n}\n\n.tone-default {\n --ts-card-bg: var(--uzi-surface-1, var(--panel));\n --ts-card-border: var(--uzi-border-subtle, var(--border));\n --ts-card-shadow: var(--uzi-shadow-none, none);\n}\n\n.tone-muted {\n --ts-card-bg: var(--uzi-surface-2, var(--muted));\n --ts-card-border: var(--uzi-border-subtle, var(--border));\n --ts-card-shadow: var(--uzi-shadow-none, none);\n}\n\n.tone-contrast {\n --ts-card-bg: var(--ts-card-contrast-bg, var(--uzi-surface-2, var(--muted)));\n --ts-card-border: var(--uzi-border-default, var(--border));\n --ts-card-shadow: var(--uzi-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.08));\n}\n\n.interactive {\n cursor: default;\n}\n\n.interactive:hover {\n transform: translateY(-1px);\n box-shadow: var(--uzi-shadow-sm, 0 4px 12px rgba(0, 0, 0, 0.12));\n border-color: var(--ts-card-hover-border, var(--uzi-border-accent, color-mix(in srgb, var(--primary) 40%, transparent)));\n}\n\n.interactive:focus-within {\n outline: var(--focus-ring);\n outline-offset: var(--focus-ring-offset);\n}\n\n.padding-none { --ts-card-padding: 0; }\n.padding-sm { --ts-card-padding: 10px; }\n.padding-md { --ts-card-padding: 16px; }\n.padding-lg { --ts-card-padding: 20px; }\n"],"mappings":""}
package/dist/index9.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index9.cjs","names":[],"sources":["../src/components/card/card.module.css"],"sourcesContent":[".card {\n position: relative;\n overflow: visible;\n border-radius: var(--ts-card-radius, var(--uzi-radius-lg, 12px));\n border: 1px solid var(--ts-card-border, var(--uzi-border-subtle, var(--border)));\n background: var(--ts-card-bg, var(--uzi-surface-1, var(--panel)));\n color: var(--ts-card-fg, var(--uzi-text-primary, var(--foreground)));\n box-shadow: var(--ts-card-shadow, var(--uzi-shadow-none, none));\n padding: var(--ts-card-padding, 16px);\n transition:\n transform 140ms ease,\n box-shadow 140ms ease,\n border-color 140ms ease,\n background-color 140ms ease;\n}\n\n.tone-default {\n --ts-card-bg: var(--uzi-surface-1, var(--panel));\n --ts-card-border: var(--uzi-border-subtle, var(--border));\n --ts-card-shadow: var(--uzi-shadow-none, none);\n}\n\n.tone-muted {\n --ts-card-bg: var(--uzi-surface-2, var(--muted));\n --ts-card-border: var(--uzi-border-subtle, var(--border));\n --ts-card-shadow: var(--uzi-shadow-none, none);\n}\n\n.tone-contrast {\n --ts-card-bg: var(--ts-card-contrast-bg, color-mix(in srgb, var(--background) 60%, black));\n --ts-card-border: var(--uzi-border-default, var(--border));\n --ts-card-shadow: var(--uzi-shadow-lg, 0 18px 50px rgba(0, 0, 0, 0.32));\n}\n\n.interactive {\n cursor: default;\n}\n\n.interactive:hover {\n transform: translateY(-1px);\n box-shadow: var(--uzi-shadow-sm, 0 4px 12px rgba(0, 0, 0, 0.12));\n border-color: var(--ts-card-hover-border, var(--uzi-border-accent, color-mix(in srgb, var(--primary) 40%, transparent)));\n}\n\n.interactive:focus-within {\n outline: var(--focus-ring);\n outline-offset: var(--focus-ring-offset);\n}\n\n.padding-none { --ts-card-padding: 0; }\n.padding-sm { --ts-card-padding: 10px; }\n.padding-md { --ts-card-padding: 16px; }\n.padding-lg { --ts-card-padding: 20px; }\n"],"mappings":""}
1
+ {"version":3,"file":"index9.cjs","names":[],"sources":["../src/components/card/card.module.css"],"sourcesContent":[".card {\n position: relative;\n overflow: visible;\n border-radius: var(--ts-card-radius, var(--uzi-radius-lg, 12px));\n border: 1px solid var(--ts-card-border, var(--uzi-border-subtle, var(--border)));\n background: var(--ts-card-bg, var(--uzi-surface-1, var(--panel)));\n color: var(--ts-card-fg, var(--uzi-text-primary, var(--foreground)));\n box-shadow: var(--ts-card-shadow, var(--uzi-shadow-none, none));\n padding: var(--ts-card-padding, 16px);\n transition:\n transform 140ms ease,\n box-shadow 140ms ease,\n border-color 140ms ease,\n background-color 140ms ease;\n}\n\n.tone-default {\n --ts-card-bg: var(--uzi-surface-1, var(--panel));\n --ts-card-border: var(--uzi-border-subtle, var(--border));\n --ts-card-shadow: var(--uzi-shadow-none, none);\n}\n\n.tone-muted {\n --ts-card-bg: var(--uzi-surface-2, var(--muted));\n --ts-card-border: var(--uzi-border-subtle, var(--border));\n --ts-card-shadow: var(--uzi-shadow-none, none);\n}\n\n.tone-contrast {\n --ts-card-bg: var(--ts-card-contrast-bg, var(--uzi-surface-2, var(--muted)));\n --ts-card-border: var(--uzi-border-default, var(--border));\n --ts-card-shadow: var(--uzi-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.08));\n}\n\n.interactive {\n cursor: default;\n}\n\n.interactive:hover {\n transform: translateY(-1px);\n box-shadow: var(--uzi-shadow-sm, 0 4px 12px rgba(0, 0, 0, 0.12));\n border-color: var(--ts-card-hover-border, var(--uzi-border-accent, color-mix(in srgb, var(--primary) 40%, transparent)));\n}\n\n.interactive:focus-within {\n outline: var(--focus-ring);\n outline-offset: var(--focus-ring-offset);\n}\n\n.padding-none { --ts-card-padding: 0; }\n.padding-sm { --ts-card-padding: 10px; }\n.padding-md { --ts-card-padding: 16px; }\n.padding-lg { --ts-card-padding: 20px; }\n"],"mappings":""}
package/dist/style.css CHANGED
@@ -67,7 +67,6 @@ body {
67
67
  --uzi-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.18);
68
68
  }
69
69
 
70
- :root,
71
70
  :root[data-uzi-theme="light"],
72
71
  [data-uzi-theme="light"] {
73
72
  color-scheme: light;
@@ -106,6 +105,7 @@ body {
106
105
  --surface-topbar: color-mix(in srgb, var(--uzi-surface-canvas) 85%, transparent);
107
106
  }
108
107
 
108
+ :root,
109
109
  :root[data-uzi-theme="dark"],
110
110
  [data-uzi-theme="dark"] {
111
111
  color-scheme: dark;
@@ -134,9 +134,9 @@ body {
134
134
  --panel: #111827;
135
135
  --text: #e2e8f0;
136
136
  --uzi-surface-canvas: var(--background);
137
- --uzi-surface-1: var(--panel);
138
- --uzi-surface-2: #152036;
139
- --uzi-surface-raised: color-mix(in srgb, var(--panel) 88%, white);
137
+ --uzi-surface-1: color-mix(in srgb, var(--panel) 88%, white);
138
+ --uzi-surface-2: color-mix(in srgb, var(--secondary) 88%, white);
139
+ --uzi-surface-raised: color-mix(in srgb, var(--panel) 78%, white);
140
140
  --uzi-surface-selected: color-mix(in srgb, var(--primary) 12%, var(--panel));
141
141
  --uzi-text-primary: var(--foreground);
142
142
  --uzi-text-secondary: color-mix(in srgb, var(--foreground) 72%, var(--muted-foreground));
@@ -410,9 +410,9 @@ body {
410
410
  }
411
411
 
412
412
  .uzi-card-module__tone-contrast__JpFxL {
413
- --ts-card-bg: var(--ts-card-contrast-bg, color-mix(in srgb, var(--background) 60%, black));
413
+ --ts-card-bg: var(--ts-card-contrast-bg, var(--uzi-surface-2, var(--muted)));
414
414
  --ts-card-border: var(--uzi-border-default, var(--border));
415
- --ts-card-shadow: var(--uzi-shadow-lg, 0 18px 50px rgba(0, 0, 0, 0.32));
415
+ --ts-card-shadow: var(--uzi-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.08));
416
416
  }
417
417
 
418
418
  .uzi-card-module__interactive__zlPML {
@@ -1089,6 +1089,14 @@ body {
1089
1089
  color: var(--muted-foreground);
1090
1090
  }
1091
1091
 
1092
+ .uzi-multi-select-module__summary__tu-Me {
1093
+ min-width: 0;
1094
+ overflow: hidden;
1095
+ text-overflow: ellipsis;
1096
+ white-space: nowrap;
1097
+ font-weight: 500;
1098
+ }
1099
+
1092
1100
  .uzi-multi-select-module__chip__46Ms- {
1093
1101
  display: inline-flex;
1094
1102
  align-items: center;
@@ -1145,6 +1153,37 @@ body {
1145
1153
  animation: uzi-multi-select-module__menuFadeIn__Plo7- 140ms ease;
1146
1154
  }
1147
1155
 
1156
+ .uzi-multi-select-module__bulkAction__CTqPY {
1157
+ width: 100%;
1158
+ display: flex;
1159
+ align-items: center;
1160
+ border: none;
1161
+ border-radius: var(--uzi-menu-item-radius);
1162
+ background: transparent;
1163
+ color: inherit;
1164
+ padding: var(--uzi-menu-item-padding-y) var(--uzi-menu-item-padding-x);
1165
+ font: inherit;
1166
+ font-weight: 600;
1167
+ cursor: pointer;
1168
+ outline: none;
1169
+ }
1170
+
1171
+ .uzi-multi-select-module__bulkAction__CTqPY[data-highlighted] {
1172
+ background: var(--ts-menu-hover-bg, var(--accent));
1173
+ color: var(--ts-menu-hover-fg, var(--accent-foreground));
1174
+ }
1175
+
1176
+ .uzi-multi-select-module__bulkAction__CTqPY[data-disabled] {
1177
+ opacity: 0.5;
1178
+ cursor: not-allowed;
1179
+ }
1180
+
1181
+ .uzi-multi-select-module__separator__UOVk4 {
1182
+ height: 1px;
1183
+ margin: var(--uzi-menu-padding) 0;
1184
+ background: var(--ts-menu-border, var(--border));
1185
+ }
1186
+
1148
1187
  .uzi-multi-select-module__option__-Ioqk {
1149
1188
  width: 100%;
1150
1189
  display: flex;
package/dist/theme/ThemeProvider.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,UAAU,EAAE,WAAW,EAAoF,MAAM,aAAa,CAAC;AAExI,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAE7D,MAAM,MAAM,QAAQ,GAAG,OAAO,UAAU,CAAC,MAAM,CAAC,CAAC;AACjD,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,MAAM,CAAC;AAChD,MAAM,MAAM,SAAS,GAAG,OAAO,WAAW,CAAC,MAAM,CAAC,CAAC;AAEnD,KAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,QAAQ,CAAC;IAChB,aAAa,EAAE,gBAAgB,CAAC;IAChC,MAAM,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpC,SAAS,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC1C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC;AAsBF,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,YAAuB,EACvB,MAAM,EACN,aAAsB,EACtB,aAAa,EACb,cAAc,EACd,UAA8B,EAC9B,gBAAqC,EACrC,cAAsB,EACtB,WAAW,GACZ,EAAE,kBAAkB,2CAqFpB;AAED,wBAAgB,QAAQ,sBAIvB"}
1
+ {"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,UAAU,EAAE,WAAW,EAAoF,MAAM,aAAa,CAAC;AAExI,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAE7D,MAAM,MAAM,QAAQ,GAAG,OAAO,UAAU,CAAC,MAAM,CAAC,CAAC;AACjD,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,MAAM,CAAC;AAChD,MAAM,MAAM,SAAS,GAAG,OAAO,WAAW,CAAC,MAAM,CAAC,CAAC;AAEnD,KAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,QAAQ,CAAC;IAChB,aAAa,EAAE,gBAAgB,CAAC;IAChC,MAAM,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpC,SAAS,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC1C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC;AAqBF,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,YAAuB,EACvB,MAAM,EACN,aAAsB,EACtB,aAAa,EACb,cAAc,EACd,UAA8B,EAC9B,gBAAqC,EACrC,cAAsB,EACtB,WAAW,GACZ,EAAE,kBAAkB,2CAqFpB;AAED,wBAAgB,QAAQ,sBAIvB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tomny-dev/uzi",
3
- "version": "0.6.1",
3
+ "version": "0.6.3-pr.74.206.1.f2cf89a",
4
4
  "description": "Rapid-fire React UI components. Ship faster, build more.",
5
5
  "type": "module",
6
6
  "repository": {