@tomny-dev/uzi 0.6.0 → 0.6.3-pr.74.205.1.8406fef

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 (28) hide show
  1. package/README.md +1 -1
  2. package/dist/components/multi-select/MultiSelect.d.ts +7 -0
  3. package/dist/components/multi-select/MultiSelect.d.ts.map +1 -1
  4. package/dist/components/multi-select/MultiSelect.test.d.ts +2 -0
  5. package/dist/components/multi-select/MultiSelect.test.d.ts.map +1 -0
  6. package/dist/components/page-container/PageContainer.d.ts +2 -1
  7. package/dist/components/page-container/PageContainer.d.ts.map +1 -1
  8. package/dist/index26.js +7 -1
  9. package/dist/index26.js.map +1 -1
  10. package/dist/index27.cjs +9 -0
  11. package/dist/index27.cjs.map +1 -1
  12. package/dist/index27.js +64 -35
  13. package/dist/index27.js.map +1 -1
  14. package/dist/index28.cjs +64 -35
  15. package/dist/index28.cjs.map +1 -1
  16. package/dist/index34.js +1 -2
  17. package/dist/index34.js.map +1 -1
  18. package/dist/index35.cjs +1 -2
  19. package/dist/index35.cjs.map +1 -1
  20. package/dist/index43.js.map +1 -1
  21. package/dist/index44.cjs.map +1 -1
  22. package/dist/index44.js.map +1 -1
  23. package/dist/index45.cjs.map +1 -1
  24. package/dist/index8.js.map +1 -1
  25. package/dist/index9.cjs.map +1 -1
  26. package/dist/style.css +46 -6
  27. package/dist/theme/ThemeProvider.d.ts.map +1 -1
  28. package/package.json +1 -1
package/README.md CHANGED
@@ -143,7 +143,7 @@ In practice, `uzi` should spend its complexity budget on reusable app scaffoldin
143
143
  | `AppShell` | Responsive layout with collapsible sidebar |
144
144
  | `SidebarNav` | Sidebar navigation list |
145
145
  | `TopBar` | Composable header shell for brand, nav triggers, and actions |
146
- | `PageContainer` | Centered responsive page-width container with configurable max width |
146
+ | `PageContainer` | Centered responsive page wrapper with standard horizontal and vertical gutters |
147
147
  | `PageHeader` | Page title, eyebrow, description, and action composition |
148
148
  | `SectionHeader` | Reusable section title, description, and actions |
149
149
  | `EmptyState` | Empty-result/resource state with visual and action slots |
package/dist/components/multi-select/MultiSelect.d.ts CHANGED
@@ -11,6 +11,13 @@ export type MultiSelectProps = {
11
11
  placeholder?: string;
12
12
  fullWidth?: boolean;
13
13
  maxVisibleValues?: number;
14
+ /** Formats the closed trigger text from the selected options, including an empty selection. */
15
+ formatValue?: (selected: MultiSelectOption[]) => string;
16
+ /** Shows Select all and Clear all actions. Bulk actions modify enabled options only. */
17
+ bulkActions?: boolean;
18
+ selectAllLabel?: string;
19
+ /** Label for clearing all enabled selections. Disabled selected options remain selected. */
20
+ clearAllLabel?: string;
14
21
  className?: string;
15
22
  disabled?: boolean;
16
23
  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;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,+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,4FAmNvB,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/components/page-container/PageContainer.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  import type { HTMLAttributes } from "react";
2
2
  export type PageContainerWidth = "sm" | "md" | "lg" | "xl" | "full";
3
+ /** Standard page container with responsive horizontal and vertical gutters. */
3
4
  export type PageContainerProps = HTMLAttributes<HTMLDivElement> & {
4
5
  /** Maximum content width. Defaults to `lg`. */
5
6
  maxWidth?: PageContainerWidth;
6
- /** Removes the responsive horizontal gutters. */
7
+ /** Removes only the responsive horizontal gutters; standard vertical page spacing remains. */
7
8
  bleed?: boolean;
8
9
  };
9
10
  export declare function PageContainer({ maxWidth, bleed, className, children, ...rest }: PageContainerProps): import("react/jsx-runtime").JSX.Element;
package/dist/components/page-container/PageContainer.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PageContainer.d.ts","sourceRoot":"","sources":["../../../src/components/page-container/PageContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAEpE,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAChE,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,iDAAiD;IACjD,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAUF,wBAAgB,aAAa,CAAC,EAC5B,QAAe,EACf,KAAa,EACb,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,kBAAkB,2CASpB"}
1
+ {"version":3,"file":"PageContainer.d.ts","sourceRoot":"","sources":["../../../src/components/page-container/PageContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAEpE,+EAA+E;AAC/E,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAChE,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,8FAA8F;IAC9F,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAUF,wBAAgB,aAAa,CAAC,EAC5B,QAAe,EACf,KAAa,EACb,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,kBAAkB,2CASpB"}
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,7 +43,10 @@ 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
52
  }) : /* @__PURE__ */ jsxs(Fragment, { children: [visibleOptions.map((option) => /* @__PURE__ */ jsx("span", {
@@ -73,44 +81,65 @@ var MultiSelect = React.forwardRef(({ options, value, onChange, placeholder = "S
73
81
  name,
74
82
  value: entry
75
83
  }, entry)) : null,
76
- /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Content, {
84
+ /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsxs(DropdownMenuPrimitive.Content, {
77
85
  className: multi_select_module_default.menu,
78
86
  sideOffset: 4,
79
87
  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"
88
+ children: [
89
+ bulkActions && enabledValues.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, {
90
+ className: multi_select_module_default.bulkAction,
91
+ disabled: allEnabledSelected,
92
+ onSelect: (event) => {
93
+ event.preventDefault();
94
+ onChange(Array.from(/* @__PURE__ */ new Set([...value, ...enabledValues])));
95
+ },
96
+ children: selectAllLabel
97
+ }), /* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, {
98
+ className: multi_select_module_default.bulkAction,
99
+ disabled: !enabledValues.some((entry) => selectedSet.has(entry)),
100
+ onSelect: (event) => {
101
+ event.preventDefault();
102
+ const enabledSet = new Set(enabledValues);
103
+ onChange(value.filter((entry) => !enabledSet.has(entry)));
104
+ },
105
+ children: resolvedClearAllLabel
106
+ })] }) : null,
107
+ bulkActions && enabledValues.length > 0 && options.length > 0 ? /* @__PURE__ */ jsx(DropdownMenuPrimitive.Separator, { className: multi_select_module_default.separator }) : null,
108
+ options.map((option) => {
109
+ const selected = selectedSet.has(option.value);
110
+ return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.CheckboxItem, {
111
+ className: cx(multi_select_module_default.option, selected && multi_select_module_default.optionSelected, option.disabled && multi_select_module_default.optionDisabled),
112
+ checked: selected,
113
+ disabled: option.disabled,
114
+ onCheckedChange: () => toggleValue(option.value),
115
+ onSelect: (event) => event.preventDefault(),
116
+ children: [/* @__PURE__ */ jsx("span", {
117
+ className: cx(multi_select_module_default.indicator, selected && multi_select_module_default.indicatorSelected, option.disabled && multi_select_module_default.indicatorDisabled),
118
+ "aria-hidden": "true",
119
+ children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, {
120
+ forceMount: true,
121
+ children: /* @__PURE__ */ jsx("svg", {
122
+ viewBox: "0 0 16 16",
123
+ width: "16",
124
+ height: "16",
125
+ fill: "none",
126
+ xmlns: "http://www.w3.org/2000/svg",
127
+ children: /* @__PURE__ */ jsx("path", {
128
+ d: "M3.5 8.5 6.5 11.5 12.5 4.5",
129
+ stroke: "currentColor",
130
+ strokeWidth: "1.8",
131
+ strokeLinecap: "round",
132
+ strokeLinejoin: "round"
133
+ })
105
134
  })
106
135
  })
107
- })
108
- }), /* @__PURE__ */ jsx("span", {
109
- className: multi_select_module_default.optionLabel,
110
- children: option.label
111
- })]
112
- }, option.value);
113
- })
136
+ }), /* @__PURE__ */ jsx("span", {
137
+ className: multi_select_module_default.optionLabel,
138
+ children: option.label
139
+ })]
140
+ }, option.value);
141
+ })
142
+ ]
114
143
  }) })
115
144
  ]
116
145
  })
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":";;;;;;;AA2BA,IAAa,cAAc,MAAM,YAE7B,EACE,SACA,OACA,UACA,cAAc,kBACd,YAAY,MACZ,mBAAmB,GACnB,WACA,WAAW,OACX,MACA,cAAc,WACd,mBAAmB,kBAErB,QACG;CACH,MAAM,cAAc,MAAM,cAAc,IAAI,IAAI,KAAK,GAAG,CAAC,KAAK,CAAC;CAC/D,MAAM,kBAAkB,MAAM,cACtB,QAAQ,QAAQ,QAAQ,YAAY,IAAI,IAAI,KAAK,CAAC,GACxD,CAAC,SAAS,WAAW,CACvB;CAEA,MAAM,cAAc,MAAM,aACvB,cAAsB;EACrB,IAAI,YAAY,IAAI,SAAS,GAAG;GAC9B,SAAS,MAAM,QAAQ,UAAU,UAAU,SAAS,CAAC;GACrD;EACF;EAEA,SAAS,CAAC,GAAG,OAAO,SAAS,CAAC;CAChC,GACA;EAAC;EAAU;EAAa;CAAK,CAC/B;CAEA,MAAM,eAAe,KAAK,IAAI,GAAG,gBAAgB;CACjD,MAAM,iBAAiB,gBAAgB,MAAM,GAAG,YAAY;CAC5D,MAAM,gBAAgB,KAAK,IACzB,GACA,gBAAgB,SAAS,eAAe,MAC1C;CAEA,OACE,oBAAC,sBAAsB,MAAvB;EAA4B,OAAO;YACjC,qBAAC,OAAD;GACE,WAAW,GACT,4BAAO,SACP,aAAa,4BAAO,kBACpB,SACF;aALF;IAOE,oBAAC,sBAAsB,SAAvB;KAA+B,SAAA;eAC7B,qBAAC,UAAD;MACO;MACL,MAAK;MACL,WAAW,4BAAO;MAClB,cAAY;MACZ,mBAAiB;MACP;gBANZ,CAQE,oBAAC,QAAD;OAAM,WAAW,4BAAO;iBACrB,gBAAgB,WAAW,IAC1B,oBAAC,QAAD;QAAM,WAAW,4BAAO;kBAAc;OAAkB,CAAA,IAExD,qBAAA,UAAA,EAAA,UAAA,CACG,eAAe,KAAK,WACnB,oBAAC,QAAD;QAAyB,WAAW,4BAAO;kBACxC,OAAO;OACJ,GAFK,OAAO,KAEZ,CACP,GACA,gBAAgB,IACf,qBAAC,QAAD;QACE,WAAW,GACT,4BAAO,MACP,4BAAO,WACT;kBAJF,CAKC,KACG,aACE;YACJ,IACJ,EAAA,CAAA;MAEA,CAAA,GACN,oBAAC,QAAD;OAAM,WAAW,4BAAO;OAAS,eAAY;iBAC3C,oBAAC,OAAD;QACE,SAAQ;QACR,MAAK;QACL,OAAM;QACN,OAAM;QACN,QAAO;kBAEP,oBAAC,QAAD;SACE,GAAE;SACF,QAAO;SACP,aAAY;SACZ,eAAc;SACd,gBAAe;QAChB,CAAA;OACE,CAAA;MACD,CAAA,CACA;;IACqB,CAAA;IAE9B,OACG,MAAM,KAAK,UACT,oBAAC,SAAD;KAAmB,MAAK;KAAe;KAAM,OAAO;IAAQ,GAAhD,KAAgD,CAC7D,IACD;IAEJ,oBAAC,sBAAsB,QAAvB,EAAA,UACE,oBAAC,sBAAsB,SAAvB;KACE,WAAW,4BAAO;KAClB,YAAY;KACZ,OAAM;eAEL,QAAQ,KAAK,WAAW;MACvB,MAAM,WAAW,YAAY,IAAI,OAAO,KAAK;MAE7C,OACE,qBAAC,sBAAsB,cAAvB;OAEE,WAAW,GACT,4BAAO,QACP,YAAY,4BAAO,gBACnB,OAAO,YAAY,4BAAO,cAC5B;OACA,SAAS;OACT,UAAU,OAAO;OACjB,uBAAuB,YAAY,OAAO,KAAK;OAC/C,WAAW,UAAU,MAAM,eAAe;iBAV5C,CAYE,oBAAC,QAAD;QACE,WAAW,GACT,4BAAO,WACP,YAAY,4BAAO,mBACnB,OAAO,YAAY,4BAAO,iBAC5B;QACA,eAAY;kBAEZ,oBAAC,sBAAsB,eAAvB;SAAqC,YAAA;mBACnC,oBAAC,OAAD;UACE,SAAQ;UACR,OAAM;UACN,QAAO;UACP,MAAK;UACL,OAAM;oBAEN,oBAAC,QAAD;WACE,GAAE;WACF,QAAO;WACP,aAAY;WACZ,eAAc;WACd,gBAAe;UAChB,CAAA;SACE,CAAA;QAC8B,CAAA;OACjC,CAAA,GACN,oBAAC,QAAD;QAAM,WAAW,4BAAO;kBAAc,OAAO;OAAY,CAAA,CACvB;SAtC7B,OAAO,KAsCsB;KAExC,CAAC;IAC4B,CAAA,EACH,CAAA;GAC3B;;CACqB,CAAA;AAEhC,CACF;AAEA,YAAY,cAAc"}
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 /** 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.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}>{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":";;;;;;;AAkCA,IAAa,cAAc,MAAM,YAE7B,EACE,SACA,OACA,UACA,cAAc,kBACd,YAAY,MACZ,mBAAmB,GACnB,aACA,cAAc,OACd,iBAAiB,cACjB,eACA,WACA,WAAW,OACX,MACA,cAAc,WACd,mBAAmB,kBAErB,QACG;CACH,MAAM,cAAc,MAAM,cAAc,IAAI,IAAI,KAAK,GAAG,CAAC,KAAK,CAAC;CAC/D,MAAM,kBAAkB,MAAM,cACtB,QAAQ,QAAQ,QAAQ,YAAY,IAAI,IAAI,KAAK,CAAC,GACxD,CAAC,SAAS,WAAW,CACvB;CAEA,MAAM,gBAAgB,MAAM,cACpB,QAAQ,QAAQ,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC,KAAK,WAAW,OAAO,KAAK,GAC/E,CAAC,OAAO,CACV;CACA,MAAM,qBACJ,cAAc,SAAS,KAAK,cAAc,OAAO,UAAU,YAAY,IAAI,KAAK,CAAC;CACnF,MAAM,qBAAqB,QAAQ,MAAM,WAAW,OAAO,QAAQ;CACnE,MAAM,wBACJ,kBAAkB,qBAAqB,kBAAkB;CAE3D,MAAM,iBAAiB,MAAM,cACrB,cAAc,eAAe,GACnC,CAAC,aAAa,eAAe,CAC/B;CAEA,MAAM,cAAc,MAAM,aACvB,cAAsB;EACrB,IAAI,YAAY,IAAI,SAAS,GAAG;GAC9B,SAAS,MAAM,QAAQ,UAAU,UAAU,SAAS,CAAC;GACrD;EACF;EAEA,SAAS,CAAC,GAAG,OAAO,SAAS,CAAC;CAChC,GACA;EAAC;EAAU;EAAa;CAAK,CAC/B;CAEA,MAAM,eAAe,KAAK,IAAI,GAAG,gBAAgB;CACjD,MAAM,iBAAiB,gBAAgB,MAAM,GAAG,YAAY;CAC5D,MAAM,gBAAgB,KAAK,IACzB,GACA,gBAAgB,SAAS,eAAe,MAC1C;CAEA,OACE,oBAAC,sBAAsB,MAAvB;EAA4B,OAAO;YACjC,qBAAC,OAAD;GACE,WAAW,GACT,4BAAO,SACP,aAAa,4BAAO,kBACpB,SACF;aALF;IAOE,oBAAC,sBAAsB,SAAvB;KAA+B,SAAA;eAC7B,qBAAC,UAAD;MACO;MACL,MAAK;MACL,WAAW,4BAAO;MAClB,cAAY;MACZ,mBAAiB;MACP;gBANZ,CAQE,oBAAC,QAAD;OAAM,WAAW,4BAAO;iBACrB,cACC,oBAAC,QAAD;QAAM,WAAW,4BAAO;kBAAU;OAAqB,CAAA,IACrD,gBAAgB,WAAW,IAC7B,oBAAC,QAAD;QAAM,WAAW,4BAAO;kBAAc;OAAkB,CAAA,IAExD,qBAAA,UAAA,EAAA,UAAA,CACG,eAAe,KAAK,WACnB,oBAAC,QAAD;QAAyB,WAAW,4BAAO;kBACxC,OAAO;OACJ,GAFK,OAAO,KAEZ,CACP,GACA,gBAAgB,IACf,qBAAC,QAAD;QAAM,WAAW,GAAG,4BAAO,MAAM,4BAAO,WAAW;kBAAnD,CAAsD,KAClD,aACE;YACJ,IACJ,EAAA,CAAA;MAEA,CAAA,GACN,oBAAC,QAAD;OAAM,WAAW,4BAAO;OAAS,eAAY;iBAC3C,oBAAC,OAAD;QACE,SAAQ;QACR,MAAK;QACL,OAAM;QACN,OAAM;QACN,QAAO;kBAEP,oBAAC,QAAD;SACE,GAAE;SACF,QAAO;SACP,aAAY;SACZ,eAAc;SACd,gBAAe;QAChB,CAAA;OACE,CAAA;MACD,CAAA,CACA;;IACqB,CAAA;IAE9B,OACG,MAAM,KAAK,UACT,oBAAC,SAAD;KAAmB,MAAK;KAAe;KAAM,OAAO;IAAQ,GAAhD,KAAgD,CAC7D,IACD;IAEJ,oBAAC,sBAAsB,QAAvB,EAAA,UACE,qBAAC,sBAAsB,SAAvB;KACE,WAAW,4BAAO;KAClB,YAAY;KACZ,OAAM;eAHR;MAKG,eAAe,cAAc,SAAS,IACrC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,sBAAsB,MAAvB;OACE,WAAW,4BAAO;OAClB,UAAU;OACV,WAAW,UAAU;QACnB,MAAM,eAAe;QACrB,SAAS,MAAM,qBAAK,IAAI,IAAI,CAAC,GAAG,OAAO,GAAG,aAAa,CAAC,CAAC,CAAC;OAC5D;iBAEC;MACyB,CAAA,GAC5B,oBAAC,sBAAsB,MAAvB;OACE,WAAW,4BAAO;OAClB,UAAU,CAAC,cAAc,MAAM,UAAU,YAAY,IAAI,KAAK,CAAC;OAC/D,WAAW,UAAU;QACnB,MAAM,eAAe;QACrB,MAAM,aAAa,IAAI,IAAI,aAAa;QACxC,SAAS,MAAM,QAAQ,UAAU,CAAC,WAAW,IAAI,KAAK,CAAC,CAAC;OAC1D;iBAEC;MACyB,CAAA,CAC5B,EAAA,CAAA,IACA;MACH,eAAe,cAAc,SAAS,KAAK,QAAQ,SAAS,IAC3D,oBAAC,sBAAsB,WAAvB,EAAiC,WAAW,4BAAO,UAAY,CAAA,IAC7D;MACH,QAAQ,KAAK,WAAW;OACvB,MAAM,WAAW,YAAY,IAAI,OAAO,KAAK;OAE7C,OACE,qBAAC,sBAAsB,cAAvB;QAEE,WAAW,GACT,4BAAO,QACP,YAAY,4BAAO,gBACnB,OAAO,YAAY,4BAAO,cAC5B;QACA,SAAS;QACT,UAAU,OAAO;QACjB,uBAAuB,YAAY,OAAO,KAAK;QAC/C,WAAW,UAAU,MAAM,eAAe;kBAV5C,CAYE,oBAAC,QAAD;SACE,WAAW,GACT,4BAAO,WACP,YAAY,4BAAO,mBACnB,OAAO,YAAY,4BAAO,iBAC5B;SACA,eAAY;mBAEZ,oBAAC,sBAAsB,eAAvB;UAAqC,YAAA;oBACnC,oBAAC,OAAD;WACE,SAAQ;WACR,OAAM;WACN,QAAO;WACP,MAAK;WACL,OAAM;qBAEN,oBAAC,QAAD;YACE,GAAE;YACF,QAAO;YACP,aAAY;YACZ,eAAc;YACd,gBAAe;WAChB,CAAA;UACE,CAAA;SAC8B,CAAA;QACjC,CAAA,GACN,oBAAC,QAAD;SAAM,WAAW,4BAAO;mBAAc,OAAO;QAAY,CAAA,CACvB;UAtC7B,OAAO,KAsCsB;MAExC,CAAC;KAC4B;OACH,CAAA;GAC3B;;CACqB,CAAA;AAEhC,CACF;AAEA,YAAY,cAAc"}
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,7 +46,10 @@ 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
55
  }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [visibleOptions.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -76,44 +84,65 @@ var MultiSelect = react.forwardRef(({ options, value, onChange, placeholder = "S
76
84
  name,
77
85
  value: entry
78
86
  }, 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, {
87
+ /* @__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
88
  className: require_multi_select_module.default.menu,
81
89
  sideOffset: 4,
82
90
  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"
91
+ children: [
92
+ 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, {
93
+ className: require_multi_select_module.default.bulkAction,
94
+ disabled: allEnabledSelected,
95
+ onSelect: (event) => {
96
+ event.preventDefault();
97
+ onChange(Array.from(/* @__PURE__ */ new Set([...value, ...enabledValues])));
98
+ },
99
+ children: selectAllLabel
100
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Item, {
101
+ className: require_multi_select_module.default.bulkAction,
102
+ disabled: !enabledValues.some((entry) => selectedSet.has(entry)),
103
+ onSelect: (event) => {
104
+ event.preventDefault();
105
+ const enabledSet = new Set(enabledValues);
106
+ onChange(value.filter((entry) => !enabledSet.has(entry)));
107
+ },
108
+ children: resolvedClearAllLabel
109
+ })] }) : null,
110
+ 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,
111
+ options.map((option) => {
112
+ const selected = selectedSet.has(option.value);
113
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dropdown_menu.CheckboxItem, {
114
+ 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),
115
+ checked: selected,
116
+ disabled: option.disabled,
117
+ onCheckedChange: () => toggleValue(option.value),
118
+ onSelect: (event) => event.preventDefault(),
119
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
120
+ 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),
121
+ "aria-hidden": "true",
122
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.ItemIndicator, {
123
+ forceMount: true,
124
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
125
+ viewBox: "0 0 16 16",
126
+ width: "16",
127
+ height: "16",
128
+ fill: "none",
129
+ xmlns: "http://www.w3.org/2000/svg",
130
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
131
+ d: "M3.5 8.5 6.5 11.5 12.5 4.5",
132
+ stroke: "currentColor",
133
+ strokeWidth: "1.8",
134
+ strokeLinecap: "round",
135
+ strokeLinejoin: "round"
136
+ })
108
137
  })
109
138
  })
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
- })
139
+ }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
140
+ className: require_multi_select_module.default.optionLabel,
141
+ children: option.label
142
+ })]
143
+ }, option.value);
144
+ })
145
+ ]
117
146
  }) })
118
147
  ]
119
148
  })
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};\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.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}>{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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"}
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/index43.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index43.js","names":[],"sources":["../src/components/page-container/page-container.module.css"],"sourcesContent":[".container {\n width: 100%;\n margin-inline: auto;\n padding-inline: var(--uzi-page-gutter, clamp(1rem, 3vw, 2rem));\n}\n\n.width-sm { max-width: 48rem; }\n.width-md { max-width: 64rem; }\n.width-lg { max-width: 75rem; }\n.width-xl { max-width: 90rem; }\n.width-full { max-width: none; }\n\n.bleed {\n padding-inline: 0;\n}\n"],"mappings":""}
1
+ {"version":3,"file":"index43.js","names":[],"sources":["../src/components/page-container/page-container.module.css"],"sourcesContent":[".container {\n width: 100%;\n margin-inline: auto;\n padding-inline: var(--uzi-page-gutter, clamp(1rem, 3vw, 2rem));\n padding-block: var(--uzi-page-padding-block, clamp(1.5rem, 3vw, 2rem));\n}\n\n.width-sm { max-width: 48rem; }\n.width-md { max-width: 64rem; }\n.width-lg { max-width: 75rem; }\n.width-xl { max-width: 90rem; }\n.width-full { max-width: none; }\n\n.bleed {\n padding-inline: 0;\n}\n"],"mappings":""}
package/dist/index44.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index44.cjs","names":[],"sources":["../src/components/page-container/page-container.module.css"],"sourcesContent":[".container {\n width: 100%;\n margin-inline: auto;\n padding-inline: var(--uzi-page-gutter, clamp(1rem, 3vw, 2rem));\n}\n\n.width-sm { max-width: 48rem; }\n.width-md { max-width: 64rem; }\n.width-lg { max-width: 75rem; }\n.width-xl { max-width: 90rem; }\n.width-full { max-width: none; }\n\n.bleed {\n padding-inline: 0;\n}\n"],"mappings":""}
1
+ {"version":3,"file":"index44.cjs","names":[],"sources":["../src/components/page-container/page-container.module.css"],"sourcesContent":[".container {\n width: 100%;\n margin-inline: auto;\n padding-inline: var(--uzi-page-gutter, clamp(1rem, 3vw, 2rem));\n padding-block: var(--uzi-page-padding-block, clamp(1.5rem, 3vw, 2rem));\n}\n\n.width-sm { max-width: 48rem; }\n.width-md { max-width: 64rem; }\n.width-lg { max-width: 75rem; }\n.width-xl { max-width: 90rem; }\n.width-full { max-width: none; }\n\n.bleed {\n padding-inline: 0;\n}\n"],"mappings":""}
package/dist/index44.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index44.js","names":[],"sources":["../src/components/page-container/PageContainer.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./page-container.module.css\";\n\nexport type PageContainerWidth = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n\nexport type PageContainerProps = HTMLAttributes<HTMLDivElement> & {\n /** Maximum content width. Defaults to `lg`. */\n maxWidth?: PageContainerWidth;\n /** Removes the responsive horizontal gutters. */\n bleed?: boolean;\n};\n\nconst WIDTH_CLASS: Record<PageContainerWidth, string> = {\n sm: \"width-sm\",\n md: \"width-md\",\n lg: \"width-lg\",\n xl: \"width-xl\",\n full: \"width-full\",\n};\n\nexport function PageContainer({\n maxWidth = \"lg\",\n bleed = false,\n className,\n children,\n ...rest\n}: PageContainerProps) {\n return (\n <div\n className={cx(styles.container, styles[WIDTH_CLASS[maxWidth]], bleed && styles.bleed, className)}\n {...rest}\n >\n {children}\n </div>\n );\n}\n"],"mappings":";;;;AAaA,IAAM,cAAkD;CACtD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM;AACR;AAEA,SAAgB,cAAc,EAC5B,WAAW,MACX,QAAQ,OACR,WACA,UACA,GAAG,QACkB;CACrB,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,8BAAO,WAAW,8BAAO,YAAY,YAAY,SAAS,8BAAO,OAAO,SAAS;EAC/F,GAAI;EAEH;CACE,CAAA;AAET"}
1
+ {"version":3,"file":"index44.js","names":[],"sources":["../src/components/page-container/PageContainer.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./page-container.module.css\";\n\nexport type PageContainerWidth = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n\n/** Standard page container with responsive horizontal and vertical gutters. */\nexport type PageContainerProps = HTMLAttributes<HTMLDivElement> & {\n /** Maximum content width. Defaults to `lg`. */\n maxWidth?: PageContainerWidth;\n /** Removes only the responsive horizontal gutters; standard vertical page spacing remains. */\n bleed?: boolean;\n};\n\nconst WIDTH_CLASS: Record<PageContainerWidth, string> = {\n sm: \"width-sm\",\n md: \"width-md\",\n lg: \"width-lg\",\n xl: \"width-xl\",\n full: \"width-full\",\n};\n\nexport function PageContainer({\n maxWidth = \"lg\",\n bleed = false,\n className,\n children,\n ...rest\n}: PageContainerProps) {\n return (\n <div\n className={cx(styles.container, styles[WIDTH_CLASS[maxWidth]], bleed && styles.bleed, className)}\n {...rest}\n >\n {children}\n </div>\n );\n}\n"],"mappings":";;;;AAcA,IAAM,cAAkD;CACtD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM;AACR;AAEA,SAAgB,cAAc,EAC5B,WAAW,MACX,QAAQ,OACR,WACA,UACA,GAAG,QACkB;CACrB,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,8BAAO,WAAW,8BAAO,YAAY,YAAY,SAAS,8BAAO,OAAO,SAAS;EAC/F,GAAI;EAEH;CACE,CAAA;AAET"}
package/dist/index45.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index45.cjs","names":[],"sources":["../src/components/page-container/PageContainer.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./page-container.module.css\";\n\nexport type PageContainerWidth = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n\nexport type PageContainerProps = HTMLAttributes<HTMLDivElement> & {\n /** Maximum content width. Defaults to `lg`. */\n maxWidth?: PageContainerWidth;\n /** Removes the responsive horizontal gutters. */\n bleed?: boolean;\n};\n\nconst WIDTH_CLASS: Record<PageContainerWidth, string> = {\n sm: \"width-sm\",\n md: \"width-md\",\n lg: \"width-lg\",\n xl: \"width-xl\",\n full: \"width-full\",\n};\n\nexport function PageContainer({\n maxWidth = \"lg\",\n bleed = false,\n className,\n children,\n ...rest\n}: PageContainerProps) {\n return (\n <div\n className={cx(styles.container, styles[WIDTH_CLASS[maxWidth]], bleed && styles.bleed, className)}\n {...rest}\n >\n {children}\n </div>\n );\n}\n"],"mappings":";;;;AAaA,IAAM,cAAkD;CACtD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM;AACR;AAEA,SAAgB,cAAc,EAC5B,WAAW,MACX,QAAQ,OACR,WACA,UACA,GAAG,QACkB;CACrB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,WAAW,WAAA,GAAG,8BAAA,QAAO,WAAW,8BAAA,QAAO,YAAY,YAAY,SAAS,8BAAA,QAAO,OAAO,SAAS;EAC/F,GAAI;EAEH;CACE,CAAA;AAET"}
1
+ {"version":3,"file":"index45.cjs","names":[],"sources":["../src/components/page-container/PageContainer.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./page-container.module.css\";\n\nexport type PageContainerWidth = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n\n/** Standard page container with responsive horizontal and vertical gutters. */\nexport type PageContainerProps = HTMLAttributes<HTMLDivElement> & {\n /** Maximum content width. Defaults to `lg`. */\n maxWidth?: PageContainerWidth;\n /** Removes only the responsive horizontal gutters; standard vertical page spacing remains. */\n bleed?: boolean;\n};\n\nconst WIDTH_CLASS: Record<PageContainerWidth, string> = {\n sm: \"width-sm\",\n md: \"width-md\",\n lg: \"width-lg\",\n xl: \"width-xl\",\n full: \"width-full\",\n};\n\nexport function PageContainer({\n maxWidth = \"lg\",\n bleed = false,\n className,\n children,\n ...rest\n}: PageContainerProps) {\n return (\n <div\n className={cx(styles.container, styles[WIDTH_CLASS[maxWidth]], bleed && styles.bleed, className)}\n {...rest}\n >\n {children}\n </div>\n );\n}\n"],"mappings":";;;;AAcA,IAAM,cAAkD;CACtD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM;AACR;AAEA,SAAgB,cAAc,EAC5B,WAAW,MACX,QAAQ,OACR,WACA,UACA,GAAG,QACkB;CACrB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,WAAW,WAAA,GAAG,8BAAA,QAAO,WAAW,8BAAA,QAAO,YAAY,YAAY,SAAS,8BAAA,QAAO,OAAO,SAAS;EAC/F,GAAI;EAEH;CACE,CAAA;AAET"}
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;
@@ -2059,6 +2098,7 @@ button.uzi-sidebar-nav-module__item__uMHkJ {
2059
2098
  width: 100%;
2060
2099
  margin-inline: auto;
2061
2100
  padding-inline: var(--uzi-page-gutter, clamp(1rem, 3vw, 2rem));
2101
+ padding-block: var(--uzi-page-padding-block, clamp(1.5rem, 3vw, 2rem));
2062
2102
  }
2063
2103
 
2064
2104
  .uzi-page-container-module__width-sm__8Mpln { max-width: 48rem; }
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.0",
3
+ "version": "0.6.3-pr.74.205.1.8406fef",
4
4
  "description": "Rapid-fire React UI components. Ship faster, build more.",
5
5
  "type": "module",
6
6
  "repository": {