@nattstack/ui 0.0.97 → 0.0.98

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 (49) hide show
  1. package/dist/components/combobox/combobox-content.js +3 -3
  2. package/dist/components/combobox/combobox-group-label.js +2 -2
  3. package/dist/components/combobox/combobox-group.js +2 -2
  4. package/dist/components/combobox/combobox-item.js +4 -4
  5. package/dist/components/combobox/combobox-list.js +2 -2
  6. package/dist/components/combobox/combobox-search.css +1 -1
  7. package/dist/components/combobox/combobox-separator.js +2 -2
  8. package/dist/components/combobox/combobox-trigger.js +9 -9
  9. package/dist/components/picker/picker-group.css +14 -0
  10. package/dist/components/picker/picker-group.module.js +8 -0
  11. package/dist/components/{select/select-item.css → picker/picker-item.css} +5 -5
  12. package/dist/components/picker/picker-item.module.js +9 -0
  13. package/dist/components/{combobox/combobox-list.css → picker/picker-list.css} +2 -3
  14. package/dist/components/picker/picker-list.module.js +5 -0
  15. package/dist/components/{combobox/combobox-content.css → picker/picker-popup.css} +8 -8
  16. package/dist/components/picker/picker-popup.module.js +8 -0
  17. package/dist/components/{select/select-separator.css → picker/picker-separator.css} +1 -1
  18. package/dist/components/picker/picker-separator.module.js +5 -0
  19. package/dist/components/{select/select-trigger.css → picker/picker-trigger.css} +13 -13
  20. package/dist/components/picker/picker-trigger.module.js +14 -0
  21. package/dist/components/select/select-content.js +9 -4
  22. package/dist/components/select/select-group-label.js +2 -2
  23. package/dist/components/select/select-group.js +2 -2
  24. package/dist/components/select/select-item.js +4 -4
  25. package/dist/components/select/select-separator.js +2 -2
  26. package/dist/components/select/select-trigger.js +9 -9
  27. package/dist/components/select/select-value.js +5 -2
  28. package/package.json +1 -1
  29. package/dist/components/combobox/combobox-content.module.js +0 -8
  30. package/dist/components/combobox/combobox-group-label.css +0 -8
  31. package/dist/components/combobox/combobox-group-label.module.js +0 -5
  32. package/dist/components/combobox/combobox-group.css +0 -7
  33. package/dist/components/combobox/combobox-group.module.js +0 -5
  34. package/dist/components/combobox/combobox-item.css +0 -43
  35. package/dist/components/combobox/combobox-item.module.js +0 -9
  36. package/dist/components/combobox/combobox-list.module.js +0 -5
  37. package/dist/components/combobox/combobox-separator.css +0 -8
  38. package/dist/components/combobox/combobox-separator.module.js +0 -5
  39. package/dist/components/combobox/combobox-trigger.css +0 -80
  40. package/dist/components/combobox/combobox-trigger.module.js +0 -14
  41. package/dist/components/select/select-content.css +0 -60
  42. package/dist/components/select/select-content.module.js +0 -8
  43. package/dist/components/select/select-group-label.css +0 -8
  44. package/dist/components/select/select-group-label.module.js +0 -5
  45. package/dist/components/select/select-group.css +0 -7
  46. package/dist/components/select/select-group.module.js +0 -5
  47. package/dist/components/select/select-item.module.js +0 -9
  48. package/dist/components/select/select-separator.module.js +0 -5
  49. package/dist/components/select/select-trigger.module.js +0 -14
package/dist/components/combobox/combobox-content.js CHANGED
@@ -1,4 +1,4 @@
1
- import combobox_content_module_default from "./combobox-content.module.js";
1
+ import picker_popup_module_default from "../picker/picker-popup.module.js";
2
2
  import { cva } from "class-variance-authority";
3
3
  import { jsx } from "react/jsx-runtime";
4
4
  import { Combobox } from "@base-ui/react";
@@ -14,7 +14,7 @@ function ComboboxContent(props) {
14
14
  alignOffset,
15
15
  anchor,
16
16
  arrowPadding,
17
- className: combobox_content_module_default.positioner,
17
+ className: picker_popup_module_default.positioner,
18
18
  collisionAvoidance,
19
19
  collisionBoundary,
20
20
  collisionPadding,
@@ -33,6 +33,6 @@ function ComboboxContent(props) {
33
33
  })
34
34
  });
35
35
  }
36
- const comboboxContentVariants = cva(combobox_content_module_default.base);
36
+ const comboboxContentVariants = cva(picker_popup_module_default.base);
37
37
  //#endregion
38
38
  export { ComboboxContent, comboboxContentVariants };
package/dist/components/combobox/combobox-group-label.js CHANGED
@@ -1,4 +1,4 @@
1
- import combobox_group_label_module_default from "./combobox-group-label.module.js";
1
+ import picker_group_module_default from "../picker/picker-group.module.js";
2
2
  import { cva } from "class-variance-authority";
3
3
  import { jsx } from "react/jsx-runtime";
4
4
  import { Combobox } from "@base-ui/react";
@@ -12,6 +12,6 @@ function ComboboxGroupLabel(props) {
12
12
  ...rest
13
13
  });
14
14
  }
15
- const comboboxGroupLabelVariants = cva(combobox_group_label_module_default.base);
15
+ const comboboxGroupLabelVariants = cva(picker_group_module_default.label);
16
16
  //#endregion
17
17
  export { ComboboxGroupLabel, comboboxGroupLabelVariants };
package/dist/components/combobox/combobox-group.js CHANGED
@@ -1,4 +1,4 @@
1
- import combobox_group_module_default from "./combobox-group.module.js";
1
+ import picker_group_module_default from "../picker/picker-group.module.js";
2
2
  import { cva } from "class-variance-authority";
3
3
  import { jsx } from "react/jsx-runtime";
4
4
  import { Combobox } from "@base-ui/react";
@@ -12,6 +12,6 @@ function ComboboxGroup(props) {
12
12
  ...rest
13
13
  });
14
14
  }
15
- const comboboxGroupVariants = cva(combobox_group_module_default.base);
15
+ const comboboxGroupVariants = cva(picker_group_module_default.base);
16
16
  //#endregion
17
17
  export { ComboboxGroup, comboboxGroupVariants };
package/dist/components/combobox/combobox-item.js CHANGED
@@ -1,4 +1,4 @@
1
- import combobox_item_module_default from "./combobox-item.module.js";
1
+ import picker_item_module_default from "../picker/picker-item.module.js";
2
2
  import { cva } from "class-variance-authority";
3
3
  import { jsx, jsxs } from "react/jsx-runtime";
4
4
  import { Combobox } from "@base-ui/react";
@@ -12,11 +12,11 @@ function ComboboxItem(props) {
12
12
  disabled: isDisabled,
13
13
  ...rest,
14
14
  children: [/* @__PURE__ */ jsx("span", {
15
- className: combobox_item_module_default.label,
15
+ className: picker_item_module_default.label,
16
16
  "data-slot": "combobox-item-text",
17
17
  children
18
18
  }), /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
19
- className: combobox_item_module_default.indicator,
19
+ className: picker_item_module_default.indicator,
20
20
  "data-slot": "combobox-item-indicator",
21
21
  children: /* @__PURE__ */ jsx("svg", {
22
22
  height: "14px",
@@ -37,6 +37,6 @@ function ComboboxItem(props) {
37
37
  })]
38
38
  });
39
39
  }
40
- const comboboxItemVariants = cva(combobox_item_module_default.base);
40
+ const comboboxItemVariants = cva(picker_item_module_default.base);
41
41
  //#endregion
42
42
  export { ComboboxItem, comboboxItemVariants };
package/dist/components/combobox/combobox-list.js CHANGED
@@ -1,4 +1,4 @@
1
- import combobox_list_module_default from "./combobox-list.module.js";
1
+ import picker_list_module_default from "../picker/picker-list.module.js";
2
2
  import { cva } from "class-variance-authority";
3
3
  import { jsx } from "react/jsx-runtime";
4
4
  import { Combobox } from "@base-ui/react";
@@ -12,6 +12,6 @@ function ComboboxList(props) {
12
12
  ...rest
13
13
  });
14
14
  }
15
- const comboboxListVariants = cva(combobox_list_module_default.base);
15
+ const comboboxListVariants = cva(picker_list_module_default.base);
16
16
  //#endregion
17
17
  export { ComboboxList, comboboxListVariants };
package/dist/components/combobox/combobox-search.css CHANGED
@@ -1,7 +1,7 @@
1
1
  @layer components {
2
2
  .combobox-search-module_base_6egFqa {
3
- box-shadow: inset 0 -1px 0 var(--color-border);
4
3
  background-color: var(--color-bg-shell-inner);
4
+ box-shadow: inset 0 -1px 0 var(--color-border);
5
5
  flex-shrink: 0;
6
6
  align-items: center;
7
7
  column-gap: 8px;
package/dist/components/combobox/combobox-separator.js CHANGED
@@ -1,4 +1,4 @@
1
- import combobox_separator_module_default from "./combobox-separator.module.js";
1
+ import picker_separator_module_default from "../picker/picker-separator.module.js";
2
2
  import { cva } from "class-variance-authority";
3
3
  import { jsx } from "react/jsx-runtime";
4
4
  import { Combobox } from "@base-ui/react";
@@ -12,6 +12,6 @@ function ComboboxSeparator(props) {
12
12
  ...rest
13
13
  });
14
14
  }
15
- const comboboxSeparatorVariants = cva(combobox_separator_module_default.base);
15
+ const comboboxSeparatorVariants = cva(picker_separator_module_default.base);
16
16
  //#endregion
17
17
  export { ComboboxSeparator, comboboxSeparatorVariants };
package/dist/components/combobox/combobox-trigger.js CHANGED
@@ -1,4 +1,4 @@
1
- import combobox_trigger_module_default from "./combobox-trigger.module.js";
1
+ import picker_trigger_module_default from "../picker/picker-trigger.module.js";
2
2
  import { cva } from "class-variance-authority";
3
3
  import { jsx, jsxs } from "react/jsx-runtime";
4
4
  import { Combobox } from "@base-ui/react";
@@ -15,7 +15,7 @@ function ComboboxTrigger(props) {
15
15
  "data-slot": "combobox-trigger",
16
16
  ...rest,
17
17
  children: [children, /* @__PURE__ */ jsx(Combobox.Icon, {
18
- className: combobox_trigger_module_default.icon,
18
+ className: picker_trigger_module_default.icon,
19
19
  "data-slot": "combobox-icon",
20
20
  children: /* @__PURE__ */ jsx("svg", {
21
21
  height: "14",
@@ -34,14 +34,14 @@ function ComboboxTrigger(props) {
34
34
  })]
35
35
  });
36
36
  }
37
- const comboboxTriggerVariants = cva(combobox_trigger_module_default.base, { variants: {
38
- isRounded: { true: combobox_trigger_module_default.rounded_full },
37
+ const comboboxTriggerVariants = cva(picker_trigger_module_default.base, { variants: {
38
+ isRounded: { true: picker_trigger_module_default.rounded_full },
39
39
  size: {
40
- 32: combobox_trigger_module_default.size_32,
41
- 36: combobox_trigger_module_default.size_36,
42
- 40: combobox_trigger_module_default.size_40,
43
- 44: combobox_trigger_module_default.size_44,
44
- 48: combobox_trigger_module_default.size_48
40
+ 32: picker_trigger_module_default.size_32,
41
+ 36: picker_trigger_module_default.size_36,
42
+ 40: picker_trigger_module_default.size_40,
43
+ 44: picker_trigger_module_default.size_44,
44
+ 48: picker_trigger_module_default.size_48
45
45
  }
46
46
  } });
47
47
  //#endregion
package/dist/components/picker/picker-group.css ADDED
@@ -0,0 +1,14 @@
1
+ @layer components {
2
+ .picker-group-module_base_7MpjwG {
3
+ flex-direction: column;
4
+ row-gap: 2px;
5
+ display: flex;
6
+ }
7
+
8
+ .picker-group-module_label_7MpjwG {
9
+ color: var(--color-text-secondary);
10
+ padding: 6px 12px 4px;
11
+ font-size: 12px;
12
+ font-weight: 450;
13
+ }
14
+ }
package/dist/components/picker/picker-group.module.js ADDED
@@ -0,0 +1,8 @@
1
+ import './picker-group.css';
2
+ //#region src/components/picker/picker-group.module.css
3
+ var picker_group_module_default = {
4
+ "base": "picker-group-module_base_7MpjwG",
5
+ "label": "picker-group-module_label_7MpjwG"
6
+ };
7
+ //#endregion
8
+ export { picker_group_module_default as default };
package/dist/components/{select/select-item.css → picker/picker-item.css} RENAMED
@@ -1,5 +1,5 @@
1
1
  @layer components {
2
- .select-item-module_base_YQBXPq {
2
+ .picker-item-module_base__oYUvq {
3
3
  cursor: pointer;
4
4
  user-select: none;
5
5
  border-radius: 8px;
@@ -12,16 +12,16 @@
12
12
  display: flex;
13
13
  }
14
14
 
15
- .select-item-module_base_YQBXPq[data-disabled] {
15
+ .picker-item-module_base__oYUvq[data-disabled] {
16
16
  cursor: not-allowed;
17
17
  opacity: .5;
18
18
  }
19
19
 
20
- .select-item-module_base_YQBXPq[data-highlighted] {
20
+ .picker-item-module_base__oYUvq[data-highlighted] {
21
21
  background-color: var(--color-gray-3);
22
22
  }
23
23
 
24
- .select-item-module_label_YQBXPq {
24
+ .picker-item-module_label__oYUvq {
25
25
  color: var(--color-text-primary);
26
26
  text-overflow: ellipsis;
27
27
  white-space: nowrap;
@@ -30,7 +30,7 @@
30
30
  overflow-x: hidden;
31
31
  }
32
32
 
33
- .select-item-module_indicator_YQBXPq {
33
+ .picker-item-module_indicator__oYUvq {
34
34
  color: var(--color-primary-9);
35
35
  flex-shrink: 0;
36
36
  justify-content: center;
package/dist/components/picker/picker-item.module.js ADDED
@@ -0,0 +1,9 @@
1
+ import './picker-item.css';
2
+ //#region src/components/picker/picker-item.module.css
3
+ var picker_item_module_default = {
4
+ "base": "picker-item-module_base__oYUvq",
5
+ "indicator": "picker-item-module_indicator__oYUvq",
6
+ "label": "picker-item-module_label__oYUvq"
7
+ };
8
+ //#endregion
9
+ export { picker_item_module_default as default };
package/dist/components/{combobox/combobox-list.css → picker/picker-list.css} RENAMED
@@ -1,16 +1,15 @@
1
1
  @layer components {
2
- .combobox-list-module_base_3WsM4q {
2
+ .picker-list-module_base_DdtSga {
3
3
  overscroll-behavior: contain;
4
4
  flex-direction: column;
5
5
  row-gap: 2px;
6
- min-height: 0;
7
6
  padding: 4px;
8
7
  scroll-padding: 4px;
9
8
  display: flex;
10
9
  overflow-y: auto;
11
10
  }
12
11
 
13
- .combobox-list-module_base_3WsM4q[data-empty] {
12
+ .picker-list-module_base_DdtSga[data-empty] {
14
13
  display: none;
15
14
  }
16
15
  }
package/dist/components/picker/picker-list.module.js ADDED
@@ -0,0 +1,5 @@
1
+ import './picker-list.css';
2
+ //#region src/components/picker/picker-list.module.css
3
+ var picker_list_module_default = { "base": "picker-list-module_base_DdtSga" };
4
+ //#endregion
5
+ export { picker_list_module_default as default };
package/dist/components/{combobox/combobox-content.css → picker/picker-popup.css} RENAMED
@@ -1,10 +1,10 @@
1
1
  @layer components {
2
- .combobox-content-module_positioner_p8XryW {
2
+ .picker-popup-module_positioner_8AoJsa {
3
3
  isolation: isolate;
4
4
  z-index: 50;
5
5
  }
6
6
 
7
- .combobox-content-module_base_p8XryW {
7
+ .picker-popup-module_base_8AoJsa {
8
8
  background-color: var(--color-bg-shell-inner);
9
9
  border-color: var(--color-border);
10
10
  color: var(--color-text-primary);
@@ -29,28 +29,28 @@
29
29
  box-shadow: 0 .5px oklab(0% none none / .03), 0 36px 15px -4px oklab(0% none none / .01), 0 20px 12px -3px oklab(0% none none / .03), 0 9px 9px -2px oklab(0% none none / .04), 0 2px 5px -1px oklab(0% none none / .05);
30
30
  }
31
31
 
32
- .combobox-content-module_base_p8XryW:focus-visible {
32
+ .picker-popup-module_base_8AoJsa:focus-visible {
33
33
  outline-width: 2px;
34
34
  }
35
35
 
36
- .combobox-content-module_base_p8XryW[data-ending-style], .combobox-content-module_base_p8XryW[data-starting-style] {
36
+ .picker-popup-module_base_8AoJsa[data-ending-style], .picker-popup-module_base_8AoJsa[data-starting-style] {
37
37
  opacity: 0;
38
38
  transform: scale(.975);
39
39
  }
40
40
 
41
- .combobox-content-module_base_p8XryW[data-side="top"][data-ending-style], .combobox-content-module_base_p8XryW[data-side="top"][data-starting-style] {
41
+ .picker-popup-module_base_8AoJsa[data-side="top"][data-ending-style], .picker-popup-module_base_8AoJsa[data-side="top"][data-starting-style] {
42
42
  transform: scale(.975) translateY(4px);
43
43
  }
44
44
 
45
- .combobox-content-module_base_p8XryW[data-side="bottom"][data-ending-style], .combobox-content-module_base_p8XryW[data-side="bottom"][data-starting-style] {
45
+ .picker-popup-module_base_8AoJsa[data-side="bottom"][data-ending-style], .picker-popup-module_base_8AoJsa[data-side="bottom"][data-starting-style] {
46
46
  transform: scale(.975) translateY(-4px);
47
47
  }
48
48
 
49
- .combobox-content-module_base_p8XryW[data-side="left"][data-ending-style], .combobox-content-module_base_p8XryW[data-side="left"][data-starting-style], .combobox-content-module_base_p8XryW[data-side="inline-start"][data-ending-style], .combobox-content-module_base_p8XryW[data-side="inline-start"][data-starting-style] {
49
+ .picker-popup-module_base_8AoJsa[data-side="left"][data-ending-style], .picker-popup-module_base_8AoJsa[data-side="left"][data-starting-style], .picker-popup-module_base_8AoJsa[data-side="inline-start"][data-ending-style], .picker-popup-module_base_8AoJsa[data-side="inline-start"][data-starting-style] {
50
50
  transform: scale(.975) translateX(4px);
51
51
  }
52
52
 
53
- .combobox-content-module_base_p8XryW[data-side="right"][data-ending-style], .combobox-content-module_base_p8XryW[data-side="right"][data-starting-style], .combobox-content-module_base_p8XryW[data-side="inline-end"][data-ending-style], .combobox-content-module_base_p8XryW[data-side="inline-end"][data-starting-style] {
53
+ .picker-popup-module_base_8AoJsa[data-side="right"][data-ending-style], .picker-popup-module_base_8AoJsa[data-side="right"][data-starting-style], .picker-popup-module_base_8AoJsa[data-side="inline-end"][data-ending-style], .picker-popup-module_base_8AoJsa[data-side="inline-end"][data-starting-style] {
54
54
  transform: scale(.975) translateX(-4px);
55
55
  }
56
56
  }
package/dist/components/picker/picker-popup.module.js ADDED
@@ -0,0 +1,8 @@
1
+ import './picker-popup.css';
2
+ //#region src/components/picker/picker-popup.module.css
3
+ var picker_popup_module_default = {
4
+ "base": "picker-popup-module_base_8AoJsa",
5
+ "positioner": "picker-popup-module_positioner_8AoJsa"
6
+ };
7
+ //#endregion
8
+ export { picker_popup_module_default as default };
package/dist/components/{select/select-separator.css → picker/picker-separator.css} RENAMED
@@ -1,5 +1,5 @@
1
1
  @layer components {
2
- .select-separator-module_base_6poQtG {
2
+ .picker-separator-module_base_OgPvTq {
3
3
  background-color: var(--color-border);
4
4
  flex-shrink: 0;
5
5
  height: 1px;
package/dist/components/picker/picker-separator.module.js ADDED
@@ -0,0 +1,5 @@
1
+ import './picker-separator.css';
2
+ //#region src/components/picker/picker-separator.module.css
3
+ var picker_separator_module_default = { "base": "picker-separator-module_base_OgPvTq" };
4
+ //#endregion
5
+ export { picker_separator_module_default as default };
package/dist/components/{select/select-trigger.css → picker/picker-trigger.css} RENAMED
@@ -1,5 +1,5 @@
1
1
  @layer components {
2
- .select-trigger-module_base_eqPLgq {
2
+ .picker-trigger-module_base_81JCzq {
3
3
  background-color: var(--color-bg-shell-inner);
4
4
  box-shadow: inset 0 0 0 1px var(--color-border);
5
5
  cursor: pointer;
@@ -16,54 +16,54 @@
16
16
  overflow: hidden;
17
17
  }
18
18
 
19
- .select-trigger-module_base_eqPLgq:disabled {
19
+ .picker-trigger-module_base_81JCzq:disabled {
20
20
  cursor: not-allowed;
21
21
  opacity: .5;
22
22
  background-color: var(--color-gray-3);
23
23
  }
24
24
 
25
- .select-trigger-module_base_eqPLgq:focus-visible {
25
+ .picker-trigger-module_base_81JCzq:focus-visible {
26
26
  outline-color: var(--color-primary);
27
27
  }
28
28
 
29
- .select-trigger-module_base_eqPLgq:hover:not(:disabled) {
29
+ .picker-trigger-module_base_81JCzq:hover:not(:disabled) {
30
30
  box-shadow: inset 0 0 0 1px var(--color-gray-6);
31
31
  }
32
32
 
33
- .select-trigger-module_base_eqPLgq[data-popup-open] {
33
+ .picker-trigger-module_base_81JCzq[data-popup-open] {
34
34
  background-color: var(--color-gray-3);
35
35
  }
36
36
 
37
- .select-trigger-module_size_32_eqPLgq {
37
+ .picker-trigger-module_size_32_81JCzq {
38
38
  border-radius: 8px;
39
39
  height: 32px;
40
40
  }
41
41
 
42
- .select-trigger-module_size_36_eqPLgq {
42
+ .picker-trigger-module_size_36_81JCzq {
43
43
  border-radius: 9px;
44
44
  height: 36px;
45
45
  }
46
46
 
47
- .select-trigger-module_size_40_eqPLgq {
47
+ .picker-trigger-module_size_40_81JCzq {
48
48
  border-radius: 10px;
49
49
  height: 40px;
50
50
  }
51
51
 
52
- .select-trigger-module_size_44_eqPLgq {
52
+ .picker-trigger-module_size_44_81JCzq {
53
53
  border-radius: 11px;
54
54
  height: 44px;
55
55
  }
56
56
 
57
- .select-trigger-module_size_48_eqPLgq {
57
+ .picker-trigger-module_size_48_81JCzq {
58
58
  border-radius: 12px;
59
59
  height: 48px;
60
60
  }
61
61
 
62
- .select-trigger-module_rounded_full_eqPLgq {
62
+ .picker-trigger-module_rounded_full_81JCzq {
63
63
  border-radius: 9999px;
64
64
  }
65
65
 
66
- .select-trigger-module_icon_eqPLgq {
66
+ .picker-trigger-module_icon_81JCzq {
67
67
  justify-content: center;
68
68
  align-items: center;
69
69
  width: 16px;
@@ -74,7 +74,7 @@
74
74
  display: flex;
75
75
  }
76
76
 
77
- .select-trigger-module_base_eqPLgq[data-popup-open] .select-trigger-module_icon_eqPLgq {
77
+ .picker-trigger-module_base_81JCzq[data-popup-open] .picker-trigger-module_icon_81JCzq {
78
78
  rotate: 180deg;
79
79
  }
80
80
  }
package/dist/components/picker/picker-trigger.module.js ADDED
@@ -0,0 +1,14 @@
1
+ import './picker-trigger.css';
2
+ //#region src/components/picker/picker-trigger.module.css
3
+ var picker_trigger_module_default = {
4
+ "base": "picker-trigger-module_base_81JCzq",
5
+ "icon": "picker-trigger-module_icon_81JCzq",
6
+ "rounded_full": "picker-trigger-module_rounded_full_81JCzq",
7
+ "size_32": "picker-trigger-module_size_32_81JCzq",
8
+ "size_36": "picker-trigger-module_size_36_81JCzq",
9
+ "size_40": "picker-trigger-module_size_40_81JCzq",
10
+ "size_44": "picker-trigger-module_size_44_81JCzq",
11
+ "size_48": "picker-trigger-module_size_48_81JCzq"
12
+ };
13
+ //#endregion
14
+ export { picker_trigger_module_default as default };
package/dist/components/select/select-content.js CHANGED
@@ -1,4 +1,5 @@
1
- import select_content_module_default from "./select-content.module.js";
1
+ import picker_popup_module_default from "../picker/picker-popup.module.js";
2
+ import picker_list_module_default from "../picker/picker-list.module.js";
2
3
  import { cva } from "class-variance-authority";
3
4
  import { jsx } from "react/jsx-runtime";
4
5
  import { Select } from "@base-ui/react";
@@ -15,7 +16,7 @@ function SelectContent(props) {
15
16
  alignOffset,
16
17
  anchor,
17
18
  arrowPadding,
18
- className: select_content_module_default.positioner,
19
+ className: picker_popup_module_default.positioner,
19
20
  collisionAvoidance,
20
21
  collisionBoundary,
21
22
  collisionPadding,
@@ -29,11 +30,15 @@ function SelectContent(props) {
29
30
  className: combinedClassName,
30
31
  "data-slot": "select-content",
31
32
  ...rest,
32
- children
33
+ children: /* @__PURE__ */ jsx(Select.List, {
34
+ className: picker_list_module_default.base,
35
+ "data-slot": "select-list",
36
+ children
37
+ })
33
38
  })
34
39
  })
35
40
  });
36
41
  }
37
- const selectContentVariants = cva(select_content_module_default.base);
42
+ const selectContentVariants = cva(picker_popup_module_default.base);
38
43
  //#endregion
39
44
  export { SelectContent, selectContentVariants };
package/dist/components/select/select-group-label.js CHANGED
@@ -1,4 +1,4 @@
1
- import select_group_label_module_default from "./select-group-label.module.js";
1
+ import picker_group_module_default from "../picker/picker-group.module.js";
2
2
  import { cva } from "class-variance-authority";
3
3
  import { jsx } from "react/jsx-runtime";
4
4
  import { Select } from "@base-ui/react";
@@ -12,6 +12,6 @@ function SelectGroupLabel(props) {
12
12
  ...rest
13
13
  });
14
14
  }
15
- const selectGroupLabelVariants = cva(select_group_label_module_default.base);
15
+ const selectGroupLabelVariants = cva(picker_group_module_default.label);
16
16
  //#endregion
17
17
  export { SelectGroupLabel, selectGroupLabelVariants };
package/dist/components/select/select-group.js CHANGED
@@ -1,4 +1,4 @@
1
- import select_group_module_default from "./select-group.module.js";
1
+ import picker_group_module_default from "../picker/picker-group.module.js";
2
2
  import { cva } from "class-variance-authority";
3
3
  import { jsx } from "react/jsx-runtime";
4
4
  import { Select } from "@base-ui/react";
@@ -12,6 +12,6 @@ function SelectGroup(props) {
12
12
  ...rest
13
13
  });
14
14
  }
15
- const selectGroupVariants = cva(select_group_module_default.base);
15
+ const selectGroupVariants = cva(picker_group_module_default.base);
16
16
  //#endregion
17
17
  export { SelectGroup, selectGroupVariants };
package/dist/components/select/select-item.js CHANGED
@@ -1,4 +1,4 @@
1
- import select_item_module_default from "./select-item.module.js";
1
+ import picker_item_module_default from "../picker/picker-item.module.js";
2
2
  import { cva } from "class-variance-authority";
3
3
  import { jsx, jsxs } from "react/jsx-runtime";
4
4
  import { Select } from "@base-ui/react";
@@ -12,11 +12,11 @@ function SelectItem(props) {
12
12
  disabled: isDisabled,
13
13
  ...rest,
14
14
  children: [/* @__PURE__ */ jsx(Select.ItemText, {
15
- className: select_item_module_default.label,
15
+ className: picker_item_module_default.label,
16
16
  "data-slot": "select-item-text",
17
17
  children
18
18
  }), /* @__PURE__ */ jsx(Select.ItemIndicator, {
19
- className: select_item_module_default.indicator,
19
+ className: picker_item_module_default.indicator,
20
20
  "data-slot": "select-item-indicator",
21
21
  children: /* @__PURE__ */ jsx("svg", {
22
22
  height: "14px",
@@ -37,6 +37,6 @@ function SelectItem(props) {
37
37
  })]
38
38
  });
39
39
  }
40
- const selectItemVariants = cva(select_item_module_default.base);
40
+ const selectItemVariants = cva(picker_item_module_default.base);
41
41
  //#endregion
42
42
  export { SelectItem, selectItemVariants };
package/dist/components/select/select-separator.js CHANGED
@@ -1,4 +1,4 @@
1
- import select_separator_module_default from "./select-separator.module.js";
1
+ import picker_separator_module_default from "../picker/picker-separator.module.js";
2
2
  import { cva } from "class-variance-authority";
3
3
  import { jsx } from "react/jsx-runtime";
4
4
  import { Select } from "@base-ui/react";
@@ -12,6 +12,6 @@ function SelectSeparator(props) {
12
12
  ...rest
13
13
  });
14
14
  }
15
- const selectSeparatorVariants = cva(select_separator_module_default.base);
15
+ const selectSeparatorVariants = cva(picker_separator_module_default.base);
16
16
  //#endregion
17
17
  export { SelectSeparator, selectSeparatorVariants };
package/dist/components/select/select-trigger.js CHANGED
@@ -1,4 +1,4 @@
1
- import select_trigger_module_default from "./select-trigger.module.js";
1
+ import picker_trigger_module_default from "../picker/picker-trigger.module.js";
2
2
  import { cva } from "class-variance-authority";
3
3
  import { jsx, jsxs } from "react/jsx-runtime";
4
4
  import { Select } from "@base-ui/react";
@@ -15,7 +15,7 @@ function SelectTrigger(props) {
15
15
  "data-slot": "select-trigger",
16
16
  ...rest,
17
17
  children: [children, /* @__PURE__ */ jsx(Select.Icon, {
18
- className: select_trigger_module_default.icon,
18
+ className: picker_trigger_module_default.icon,
19
19
  "data-slot": "select-icon",
20
20
  children: /* @__PURE__ */ jsx("svg", {
21
21
  height: "14",
@@ -34,14 +34,14 @@ function SelectTrigger(props) {
34
34
  })]
35
35
  });
36
36
  }
37
- const selectTriggerVariants = cva(select_trigger_module_default.base, { variants: {
38
- isRounded: { true: select_trigger_module_default.rounded_full },
37
+ const selectTriggerVariants = cva(picker_trigger_module_default.base, { variants: {
38
+ isRounded: { true: picker_trigger_module_default.rounded_full },
39
39
  size: {
40
- 32: select_trigger_module_default.size_32,
41
- 36: select_trigger_module_default.size_36,
42
- 40: select_trigger_module_default.size_40,
43
- 44: select_trigger_module_default.size_44,
44
- 48: select_trigger_module_default.size_48
40
+ 32: picker_trigger_module_default.size_32,
41
+ 36: picker_trigger_module_default.size_36,
42
+ 40: picker_trigger_module_default.size_40,
43
+ 44: picker_trigger_module_default.size_44,
44
+ 48: picker_trigger_module_default.size_48
45
45
  }
46
46
  } });
47
47
  //#endregion
package/dist/components/select/select-value.js CHANGED
@@ -4,13 +4,16 @@ import { jsx } from "react/jsx-runtime";
4
4
  import { Select } from "@base-ui/react";
5
5
  //#region src/components/select/select-value.tsx
6
6
  function SelectValue(props) {
7
- const { className: customClassName = "", render = /* @__PURE__ */ jsx("div", {}), ...rest } = props;
7
+ const { children = void 0, className: customClassName = "", placeholder = void 0, render = /* @__PURE__ */ jsx("div", {}), ...rest } = props;
8
8
  const combinedClassName = selectValueVariants({ className: customClassName });
9
+ const resolvedChildren = typeof children === "function" ? (selectedValue) => (selectedValue ?? void 0) === void 0 ? placeholder : children(selectedValue) : children;
9
10
  return /* @__PURE__ */ jsx(Select.Value, {
10
11
  className: combinedClassName,
11
12
  "data-slot": "select-value",
13
+ placeholder,
12
14
  render,
13
- ...rest
15
+ ...rest,
16
+ children: resolvedChildren
14
17
  });
15
18
  }
16
19
  const selectValueVariants = cva(select_value_module_default.base);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nattstack/ui",
3
- "version": "0.0.97",
3
+ "version": "0.0.98",
4
4
  "description": "A collection of reusable React components built with Base UI, TypeScript, and CSS Modules",
5
5
  "keywords": [
6
6
  "base-ui",
package/dist/components/combobox/combobox-content.module.js DELETED
@@ -1,8 +0,0 @@
1
- import './combobox-content.css';
2
- //#region src/components/combobox/combobox-content.module.css
3
- var combobox_content_module_default = {
4
- "base": "combobox-content-module_base_p8XryW",
5
- "positioner": "combobox-content-module_positioner_p8XryW"
6
- };
7
- //#endregion
8
- export { combobox_content_module_default as default };
package/dist/components/combobox/combobox-group-label.css DELETED
@@ -1,8 +0,0 @@
1
- @layer components {
2
- .combobox-group-label-module_base_h2CKxG {
3
- color: var(--color-text-secondary);
4
- padding: 6px 12px 4px;
5
- font-size: 12px;
6
- font-weight: 450;
7
- }
8
- }
package/dist/components/combobox/combobox-group-label.module.js DELETED
@@ -1,5 +0,0 @@
1
- import './combobox-group-label.css';
2
- //#region src/components/combobox/combobox-group-label.module.css
3
- var combobox_group_label_module_default = { "base": "combobox-group-label-module_base_h2CKxG" };
4
- //#endregion
5
- export { combobox_group_label_module_default as default };
package/dist/components/combobox/combobox-group.css DELETED
@@ -1,7 +0,0 @@
1
- @layer components {
2
- .combobox-group-module_base_iUnR9q {
3
- flex-direction: column;
4
- row-gap: 2px;
5
- display: flex;
6
- }
7
- }
package/dist/components/combobox/combobox-group.module.js DELETED
@@ -1,5 +0,0 @@
1
- import './combobox-group.css';
2
- //#region src/components/combobox/combobox-group.module.css
3
- var combobox_group_module_default = { "base": "combobox-group-module_base_iUnR9q" };
4
- //#endregion
5
- export { combobox_group_module_default as default };
package/dist/components/combobox/combobox-item.css DELETED
@@ -1,43 +0,0 @@
1
- @layer components {
2
- .combobox-item-module_base_0uz3mW {
3
- cursor: pointer;
4
- user-select: none;
5
- border-radius: 8px;
6
- outline: none;
7
- flex-shrink: 0;
8
- align-items: center;
9
- column-gap: 8px;
10
- height: 36px;
11
- padding: 0 12px;
12
- display: flex;
13
- }
14
-
15
- .combobox-item-module_base_0uz3mW[data-disabled] {
16
- cursor: not-allowed;
17
- opacity: .5;
18
- }
19
-
20
- .combobox-item-module_base_0uz3mW[data-highlighted] {
21
- background-color: var(--color-gray-3);
22
- }
23
-
24
- .combobox-item-module_label_0uz3mW {
25
- color: var(--color-text-primary);
26
- text-overflow: ellipsis;
27
- white-space: nowrap;
28
- font-size: 14px;
29
- font-weight: 450;
30
- overflow-x: hidden;
31
- }
32
-
33
- .combobox-item-module_indicator_0uz3mW {
34
- color: var(--color-primary-9);
35
- flex-shrink: 0;
36
- justify-content: center;
37
- align-items: center;
38
- width: 16px;
39
- height: 16px;
40
- margin-left: auto;
41
- display: flex;
42
- }
43
- }
package/dist/components/combobox/combobox-item.module.js DELETED
@@ -1,9 +0,0 @@
1
- import './combobox-item.css';
2
- //#region src/components/combobox/combobox-item.module.css
3
- var combobox_item_module_default = {
4
- "base": "combobox-item-module_base_0uz3mW",
5
- "indicator": "combobox-item-module_indicator_0uz3mW",
6
- "label": "combobox-item-module_label_0uz3mW"
7
- };
8
- //#endregion
9
- export { combobox_item_module_default as default };
package/dist/components/combobox/combobox-list.module.js DELETED
@@ -1,5 +0,0 @@
1
- import './combobox-list.css';
2
- //#region src/components/combobox/combobox-list.module.css
3
- var combobox_list_module_default = { "base": "combobox-list-module_base_3WsM4q" };
4
- //#endregion
5
- export { combobox_list_module_default as default };
package/dist/components/combobox/combobox-separator.css DELETED
@@ -1,8 +0,0 @@
1
- @layer components {
2
- .combobox-separator-module_base_a3wZxW {
3
- background-color: var(--color-border);
4
- flex-shrink: 0;
5
- height: 1px;
6
- margin: 4px 8px;
7
- }
8
- }
package/dist/components/combobox/combobox-separator.module.js DELETED
@@ -1,5 +0,0 @@
1
- import './combobox-separator.css';
2
- //#region src/components/combobox/combobox-separator.module.css
3
- var combobox_separator_module_default = { "base": "combobox-separator-module_base_a3wZxW" };
4
- //#endregion
5
- export { combobox_separator_module_default as default };
package/dist/components/combobox/combobox-trigger.css DELETED
@@ -1,80 +0,0 @@
1
- @layer components {
2
- .combobox-trigger-module_base_OcOZOW {
3
- background-color: var(--color-bg-shell-inner);
4
- box-shadow: inset 0 0 0 1px var(--color-border);
5
- cursor: pointer;
6
- outline-offset: 2px;
7
- outline: 2px solid #0000;
8
- flex-shrink: 0;
9
- align-items: center;
10
- column-gap: 8px;
11
- width: stretch;
12
- padding: 0 16px;
13
- transition-property: background-color, box-shadow;
14
- transition-duration: .15s;
15
- display: inline-flex;
16
- overflow: hidden;
17
- }
18
-
19
- .combobox-trigger-module_base_OcOZOW:disabled {
20
- cursor: not-allowed;
21
- opacity: .5;
22
- background-color: var(--color-gray-3);
23
- }
24
-
25
- .combobox-trigger-module_base_OcOZOW:focus-visible {
26
- outline-color: var(--color-primary);
27
- }
28
-
29
- .combobox-trigger-module_base_OcOZOW:hover:not(:disabled) {
30
- box-shadow: inset 0 0 0 1px var(--color-gray-6);
31
- }
32
-
33
- .combobox-trigger-module_base_OcOZOW[data-popup-open] {
34
- background-color: var(--color-gray-3);
35
- }
36
-
37
- .combobox-trigger-module_size_32_OcOZOW {
38
- border-radius: 8px;
39
- height: 32px;
40
- }
41
-
42
- .combobox-trigger-module_size_36_OcOZOW {
43
- border-radius: 9px;
44
- height: 36px;
45
- }
46
-
47
- .combobox-trigger-module_size_40_OcOZOW {
48
- border-radius: 10px;
49
- height: 40px;
50
- }
51
-
52
- .combobox-trigger-module_size_44_OcOZOW {
53
- border-radius: 11px;
54
- height: 44px;
55
- }
56
-
57
- .combobox-trigger-module_size_48_OcOZOW {
58
- border-radius: 12px;
59
- height: 48px;
60
- }
61
-
62
- .combobox-trigger-module_rounded_full_OcOZOW {
63
- border-radius: 9999px;
64
- }
65
-
66
- .combobox-trigger-module_icon_OcOZOW {
67
- justify-content: center;
68
- align-items: center;
69
- width: 16px;
70
- height: 16px;
71
- margin-left: auto;
72
- transition-property: rotate;
73
- transition-duration: .15s;
74
- display: flex;
75
- }
76
-
77
- .combobox-trigger-module_base_OcOZOW[data-popup-open] .combobox-trigger-module_icon_OcOZOW {
78
- rotate: 180deg;
79
- }
80
- }
package/dist/components/combobox/combobox-trigger.module.js DELETED
@@ -1,14 +0,0 @@
1
- import './combobox-trigger.css';
2
- //#region src/components/combobox/combobox-trigger.module.css
3
- var combobox_trigger_module_default = {
4
- "base": "combobox-trigger-module_base_OcOZOW",
5
- "icon": "combobox-trigger-module_icon_OcOZOW",
6
- "rounded_full": "combobox-trigger-module_rounded_full_OcOZOW",
7
- "size_32": "combobox-trigger-module_size_32_OcOZOW",
8
- "size_36": "combobox-trigger-module_size_36_OcOZOW",
9
- "size_40": "combobox-trigger-module_size_40_OcOZOW",
10
- "size_44": "combobox-trigger-module_size_44_OcOZOW",
11
- "size_48": "combobox-trigger-module_size_48_OcOZOW"
12
- };
13
- //#endregion
14
- export { combobox_trigger_module_default as default };
package/dist/components/select/select-content.css DELETED
@@ -1,60 +0,0 @@
1
- @layer components {
2
- .select-content-module_positioner_T-MXlW {
3
- isolation: isolate;
4
- z-index: 50;
5
- }
6
-
7
- .select-content-module_base_T-MXlW {
8
- background-color: var(--color-bg-shell-inner);
9
- box-shadow: 0 0 0 1px var(--color-border) inset,
10
- 0 .5px 0 oklab(0% none none / .03),
11
- 0 36px 15px -4px oklab(0% none none / .01),
12
- 0 20px 12px -3px oklab(0% none none / .03),
13
- 0 9px 9px -2px oklab(0% none none / .04),
14
- 0 2px 5px -1px oklab(0% none none / .05);
15
- color: var(--color-text-primary);
16
- max-height: min(var(--available-height), 480px);
17
- max-width: var(--available-width);
18
- min-width: max(var(--anchor-width), 240px);
19
- outline-color: var(--color-primary-9);
20
- outline-offset: -2px;
21
- transform-origin: var(--transform-origin);
22
- width: var(--anchor-width);
23
- will-change: opacity, transform;
24
- border-radius: 12px;
25
- outline-width: 0;
26
- outline-style: solid;
27
- flex-direction: column;
28
- row-gap: 2px;
29
- padding: 4px;
30
- transition-property: opacity, transform;
31
- transition-duration: .15s;
32
- display: flex;
33
- overflow: auto;
34
- }
35
-
36
- .select-content-module_base_T-MXlW:focus-visible {
37
- outline-width: 2px;
38
- }
39
-
40
- .select-content-module_base_T-MXlW[data-ending-style], .select-content-module_base_T-MXlW[data-starting-style] {
41
- opacity: 0;
42
- transform: scale(.975);
43
- }
44
-
45
- .select-content-module_base_T-MXlW[data-side="top"][data-ending-style], .select-content-module_base_T-MXlW[data-side="top"][data-starting-style] {
46
- transform: scale(.975) translateY(4px);
47
- }
48
-
49
- .select-content-module_base_T-MXlW[data-side="bottom"][data-ending-style], .select-content-module_base_T-MXlW[data-side="bottom"][data-starting-style] {
50
- transform: scale(.975) translateY(-4px);
51
- }
52
-
53
- .select-content-module_base_T-MXlW[data-side="left"][data-ending-style], .select-content-module_base_T-MXlW[data-side="left"][data-starting-style], .select-content-module_base_T-MXlW[data-side="inline-start"][data-ending-style], .select-content-module_base_T-MXlW[data-side="inline-start"][data-starting-style] {
54
- transform: scale(.975) translateX(4px);
55
- }
56
-
57
- .select-content-module_base_T-MXlW[data-side="right"][data-ending-style], .select-content-module_base_T-MXlW[data-side="right"][data-starting-style], .select-content-module_base_T-MXlW[data-side="inline-end"][data-ending-style], .select-content-module_base_T-MXlW[data-side="inline-end"][data-starting-style] {
58
- transform: scale(.975) translateX(-4px);
59
- }
60
- }
package/dist/components/select/select-content.module.js DELETED
@@ -1,8 +0,0 @@
1
- import './select-content.css';
2
- //#region src/components/select/select-content.module.css
3
- var select_content_module_default = {
4
- "base": "select-content-module_base_T-MXlW",
5
- "positioner": "select-content-module_positioner_T-MXlW"
6
- };
7
- //#endregion
8
- export { select_content_module_default as default };
package/dist/components/select/select-group-label.css DELETED
@@ -1,8 +0,0 @@
1
- @layer components {
2
- .select-group-label-module_base_SHogxq {
3
- color: var(--color-text-secondary);
4
- padding: 6px 12px 4px;
5
- font-size: 12px;
6
- font-weight: 450;
7
- }
8
- }
package/dist/components/select/select-group-label.module.js DELETED
@@ -1,5 +0,0 @@
1
- import './select-group-label.css';
2
- //#region src/components/select/select-group-label.module.css
3
- var select_group_label_module_default = { "base": "select-group-label-module_base_SHogxq" };
4
- //#endregion
5
- export { select_group_label_module_default as default };
package/dist/components/select/select-group.css DELETED
@@ -1,7 +0,0 @@
1
- @layer components {
2
- .select-group-module_base_1Igl6W {
3
- flex-direction: column;
4
- row-gap: 2px;
5
- display: flex;
6
- }
7
- }
package/dist/components/select/select-group.module.js DELETED
@@ -1,5 +0,0 @@
1
- import './select-group.css';
2
- //#region src/components/select/select-group.module.css
3
- var select_group_module_default = { "base": "select-group-module_base_1Igl6W" };
4
- //#endregion
5
- export { select_group_module_default as default };
package/dist/components/select/select-item.module.js DELETED
@@ -1,9 +0,0 @@
1
- import './select-item.css';
2
- //#region src/components/select/select-item.module.css
3
- var select_item_module_default = {
4
- "base": "select-item-module_base_YQBXPq",
5
- "indicator": "select-item-module_indicator_YQBXPq",
6
- "label": "select-item-module_label_YQBXPq"
7
- };
8
- //#endregion
9
- export { select_item_module_default as default };
package/dist/components/select/select-separator.module.js DELETED
@@ -1,5 +0,0 @@
1
- import './select-separator.css';
2
- //#region src/components/select/select-separator.module.css
3
- var select_separator_module_default = { "base": "select-separator-module_base_6poQtG" };
4
- //#endregion
5
- export { select_separator_module_default as default };
package/dist/components/select/select-trigger.module.js DELETED
@@ -1,14 +0,0 @@
1
- import './select-trigger.css';
2
- //#region src/components/select/select-trigger.module.css
3
- var select_trigger_module_default = {
4
- "base": "select-trigger-module_base_eqPLgq",
5
- "icon": "select-trigger-module_icon_eqPLgq",
6
- "rounded_full": "select-trigger-module_rounded_full_eqPLgq",
7
- "size_32": "select-trigger-module_size_32_eqPLgq",
8
- "size_36": "select-trigger-module_size_36_eqPLgq",
9
- "size_40": "select-trigger-module_size_40_eqPLgq",
10
- "size_44": "select-trigger-module_size_44_eqPLgq",
11
- "size_48": "select-trigger-module_size_48_eqPLgq"
12
- };
13
- //#endregion
14
- export { select_trigger_module_default as default };