@nattstack/ui 0.0.85 → 0.0.86

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 (169) hide show
  1. package/dist/components/button/button-spinner.css +97 -0
  2. package/dist/components/button/button-spinner.js +14 -0
  3. package/dist/components/button/button-spinner.module.js +8 -0
  4. package/dist/components/button/button.css +191 -0
  5. package/dist/components/button/button.d.ts +25 -0
  6. package/dist/components/button/button.js +54 -0
  7. package/dist/components/button/button.module.js +21 -0
  8. package/dist/components/button-link/button-link.d.ts +18 -0
  9. package/dist/components/button-link/button-link.js +23 -0
  10. package/dist/components/checkbox/checkbox-icon.js +22 -0
  11. package/dist/components/checkbox/checkbox.css +55 -0
  12. package/dist/components/checkbox/checkbox.d.ts +8 -0
  13. package/dist/components/checkbox/checkbox.js +21 -0
  14. package/dist/components/checkbox/checkbox.module.js +9 -0
  15. package/dist/components/column/column.css +6 -0
  16. package/dist/components/column/column.d.ts +16 -0
  17. package/dist/components/column/column.js +23 -0
  18. package/dist/components/column/column.module.js +5 -0
  19. package/dist/components/dialog-responsive/dialog-responsive-backdrop.css +28 -0
  20. package/dist/components/dialog-responsive/dialog-responsive-backdrop.js +17 -0
  21. package/dist/components/dialog-responsive/dialog-responsive-backdrop.module.js +5 -0
  22. package/dist/components/dialog-responsive/dialog-responsive-bar.css +16 -0
  23. package/dist/components/dialog-responsive/dialog-responsive-bar.js +15 -0
  24. package/dist/components/dialog-responsive/dialog-responsive-bar.module.js +5 -0
  25. package/dist/components/dialog-responsive/dialog-responsive-popup.css +56 -0
  26. package/dist/components/dialog-responsive/dialog-responsive-popup.d.ts +8 -0
  27. package/dist/components/dialog-responsive/dialog-responsive-popup.js +22 -0
  28. package/dist/components/dialog-responsive/dialog-responsive-popup.module.js +5 -0
  29. package/dist/components/dialog-responsive/dialog-responsive-portal.css +7 -0
  30. package/dist/components/dialog-responsive/dialog-responsive-portal.js +17 -0
  31. package/dist/components/dialog-responsive/dialog-responsive-portal.module.js +5 -0
  32. package/dist/components/dialog-responsive/dialog-responsive-trigger.d.ts +7 -0
  33. package/dist/components/dialog-responsive/dialog-responsive-trigger.js +12 -0
  34. package/dist/components/dialog-responsive/dialog-responsive-viewport.css +18 -0
  35. package/dist/components/dialog-responsive/dialog-responsive-viewport.js +17 -0
  36. package/dist/components/dialog-responsive/dialog-responsive-viewport.module.js +5 -0
  37. package/dist/components/dialog-responsive/dialog-responsive.d.ts +10 -0
  38. package/dist/components/dialog-responsive/dialog-responsive.js +15 -0
  39. package/dist/components/icon-button/icon-button.css +25 -0
  40. package/dist/components/icon-button/icon-button.d.ts +12 -0
  41. package/dist/components/icon-button/icon-button.js +34 -0
  42. package/dist/components/icon-button/icon-button.module.js +12 -0
  43. package/dist/components/index.d.ts +46 -359
  44. package/dist/components/index.js +46 -1034
  45. package/dist/components/input/input.css +84 -0
  46. package/dist/components/input/input.d.ts +22 -0
  47. package/dist/components/input/input.js +44 -0
  48. package/dist/components/input/input.module.js +14 -0
  49. package/dist/components/label/label.css +7 -0
  50. package/dist/components/label/label.d.ts +7 -0
  51. package/dist/components/label/label.js +16 -0
  52. package/dist/components/label/label.module.js +5 -0
  53. package/dist/components/menu/menu-checkbox-item.d.ts +14 -0
  54. package/dist/components/menu/menu-checkbox-item.js +44 -0
  55. package/dist/components/menu/menu-class-names.d.ts +23 -0
  56. package/dist/components/menu/menu-class-names.js +24 -0
  57. package/dist/components/menu/menu-content.d.ts +11 -0
  58. package/dist/components/menu/menu-content.js +38 -0
  59. package/dist/components/menu/menu-group-label.d.ts +9 -0
  60. package/dist/components/menu/menu-group-label.js +16 -0
  61. package/dist/components/menu/menu-group.d.ts +9 -0
  62. package/dist/components/menu/menu-group.js +16 -0
  63. package/dist/components/menu/menu-item.d.ts +10 -0
  64. package/dist/components/menu/menu-item.js +18 -0
  65. package/dist/components/menu/menu-link-item.d.ts +7 -0
  66. package/dist/components/menu/menu-link-item.js +13 -0
  67. package/dist/components/menu/menu-radio-group.d.ts +10 -0
  68. package/dist/components/menu/menu-radio-group.js +17 -0
  69. package/dist/components/menu/menu-radio-item.d.ts +12 -0
  70. package/dist/components/menu/menu-radio-item.js +43 -0
  71. package/dist/components/menu/menu-separator.d.ts +9 -0
  72. package/dist/components/menu/menu-separator.js +16 -0
  73. package/dist/components/menu/menu-submenu-trigger.d.ts +7 -0
  74. package/dist/components/menu/menu-submenu-trigger.js +13 -0
  75. package/dist/components/menu/menu-submenu.d.ts +11 -0
  76. package/dist/components/menu/menu-submenu.js +15 -0
  77. package/dist/components/menu/menu-trigger.d.ts +7 -0
  78. package/dist/components/menu/menu-trigger.js +12 -0
  79. package/dist/components/menu/menu-viewport.d.ts +9 -0
  80. package/dist/components/menu/menu-viewport.js +16 -0
  81. package/dist/components/menu/menu.css +209 -0
  82. package/dist/components/menu/menu.d.ts +12 -0
  83. package/dist/components/menu/menu.js +16 -0
  84. package/dist/components/menu/menu.module.js +24 -0
  85. package/dist/components/otp-field/otp-field-input.css +33 -0
  86. package/dist/components/otp-field/otp-field-input.d.ts +8 -0
  87. package/dist/components/otp-field/otp-field-input.js +16 -0
  88. package/dist/components/otp-field/otp-field-input.module.js +5 -0
  89. package/dist/components/otp-field/otp-field.css +13 -0
  90. package/dist/components/otp-field/otp-field.d.ts +13 -0
  91. package/dist/components/otp-field/otp-field.js +27 -0
  92. package/dist/components/otp-field/otp-field.module.js +8 -0
  93. package/dist/components/row/row.css +6 -0
  94. package/dist/components/row/row.d.ts +16 -0
  95. package/dist/components/row/row.js +23 -0
  96. package/dist/components/row/row.module.js +5 -0
  97. package/dist/components/spacer/spacer.css +5 -0
  98. package/dist/components/spacer/spacer.d.ts +10 -0
  99. package/dist/components/spacer/spacer.js +19 -0
  100. package/dist/components/spacer/spacer.module.js +5 -0
  101. package/dist/components/switch/switch.css +54 -0
  102. package/dist/components/switch/switch.d.ts +19 -0
  103. package/dist/components/switch/switch.js +31 -0
  104. package/dist/components/switch/switch.module.js +10 -0
  105. package/dist/components/tabs/tabs-panel.css +14 -0
  106. package/dist/components/tabs/tabs-panel.d.ts +8 -0
  107. package/dist/components/tabs/tabs-panel.js +17 -0
  108. package/dist/components/tabs/tabs-panel.module.js +5 -0
  109. package/dist/components/tabs/tabs.css +6 -0
  110. package/dist/components/tabs/tabs.d.ts +8 -0
  111. package/dist/components/tabs/tabs.js +17 -0
  112. package/dist/components/tabs/tabs.module.js +5 -0
  113. package/dist/components/tabs-pill/tabs-pill-indicator.css +14 -0
  114. package/dist/components/tabs-pill/tabs-pill-indicator.js +18 -0
  115. package/dist/components/tabs-pill/tabs-pill-indicator.module.js +5 -0
  116. package/dist/components/tabs-pill/tabs-pill-list.css +9 -0
  117. package/dist/components/tabs-pill/tabs-pill-list.d.ts +8 -0
  118. package/dist/components/tabs-pill/tabs-pill-list.js +19 -0
  119. package/dist/components/tabs-pill/tabs-pill-list.module.js +5 -0
  120. package/dist/components/tabs-pill/tabs-pill-tab.css +66 -0
  121. package/dist/components/tabs-pill/tabs-pill-tab.d.ts +10 -0
  122. package/dist/components/tabs-pill/tabs-pill-tab.js +21 -0
  123. package/dist/components/tabs-pill/tabs-pill-tab.module.js +9 -0
  124. package/dist/components/tabs-segmented/tabs-segmented-indicator.css +14 -0
  125. package/dist/components/tabs-segmented/tabs-segmented-indicator.js +18 -0
  126. package/dist/components/tabs-segmented/tabs-segmented-indicator.module.js +5 -0
  127. package/dist/components/tabs-segmented/tabs-segmented-list.css +13 -0
  128. package/dist/components/tabs-segmented/tabs-segmented-list.d.ts +8 -0
  129. package/dist/components/tabs-segmented/tabs-segmented-list.js +19 -0
  130. package/dist/components/tabs-segmented/tabs-segmented-list.module.js +5 -0
  131. package/dist/components/tabs-segmented/tabs-segmented-tab.css +37 -0
  132. package/dist/components/tabs-segmented/tabs-segmented-tab.d.ts +10 -0
  133. package/dist/components/tabs-segmented/tabs-segmented-tab.js +18 -0
  134. package/dist/components/tabs-segmented/tabs-segmented-tab.module.js +5 -0
  135. package/dist/components/tabs-underline/tabs-underline-indicator.css +12 -0
  136. package/dist/components/tabs-underline/tabs-underline-indicator.js +18 -0
  137. package/dist/components/tabs-underline/tabs-underline-indicator.module.js +5 -0
  138. package/dist/components/tabs-underline/tabs-underline-list.css +10 -0
  139. package/dist/components/tabs-underline/tabs-underline-list.d.ts +8 -0
  140. package/dist/components/tabs-underline/tabs-underline-list.js +19 -0
  141. package/dist/components/tabs-underline/tabs-underline-list.module.js +5 -0
  142. package/dist/components/tabs-underline/tabs-underline-tab.css +36 -0
  143. package/dist/components/tabs-underline/tabs-underline-tab.d.ts +10 -0
  144. package/dist/components/tabs-underline/tabs-underline-tab.js +18 -0
  145. package/dist/components/tabs-underline/tabs-underline-tab.module.js +5 -0
  146. package/dist/components/textarea/textarea.css +9 -0
  147. package/dist/components/textarea/textarea.d.ts +17 -0
  148. package/dist/components/textarea/textarea.js +31 -0
  149. package/dist/components/textarea/textarea.module.js +5 -0
  150. package/dist/components/toggle-group/toggle-group-item.css +47 -0
  151. package/dist/components/toggle-group/toggle-group-item.d.ts +11 -0
  152. package/dist/components/toggle-group/toggle-group-item.js +18 -0
  153. package/dist/components/toggle-group/toggle-group-item.module.js +5 -0
  154. package/dist/components/toggle-group/toggle-group.css +7 -0
  155. package/dist/components/toggle-group/toggle-group.d.ts +12 -0
  156. package/dist/components/toggle-group/toggle-group.js +19 -0
  157. package/dist/components/toggle-group/toggle-group.module.js +5 -0
  158. package/dist/components/tooltip/tooltip-popup.css +32 -0
  159. package/dist/components/tooltip/tooltip-popup.d.ts +8 -0
  160. package/dist/components/tooltip/tooltip-popup.js +25 -0
  161. package/dist/components/tooltip/tooltip-popup.module.js +8 -0
  162. package/dist/components/tooltip/tooltip-provider.d.ts +7 -0
  163. package/dist/components/tooltip/tooltip-provider.js +12 -0
  164. package/dist/components/tooltip/tooltip-trigger.d.ts +7 -0
  165. package/dist/components/tooltip/tooltip-trigger.js +12 -0
  166. package/dist/components/tooltip/tooltip.d.ts +10 -0
  167. package/dist/components/tooltip/tooltip.js +14 -0
  168. package/package.json +6 -3
  169. package/dist/components/style.css +0 -1182
@@ -0,0 +1,84 @@
1
+ @layer components {
2
+ .input-module_input_o34hyq {
3
+ appearance: none;
4
+ background-color: var(--color-bg-shell-inner);
5
+ box-shadow: 0 0 0 1px var(--color-border) inset;
6
+ color: var(--color-text-primary);
7
+ cursor: text;
8
+ font-family: var(--font-body);
9
+ outline-offset: -2px;
10
+ border-style: none;
11
+ outline: 2px solid #0000;
12
+ width: 100%;
13
+ font-size: 14px;
14
+ font-weight: 400;
15
+ line-height: 1.5;
16
+ text-decoration: none;
17
+ transition-property: box-shadow, opacity;
18
+ transition-duration: .15s;
19
+ }
20
+
21
+ .input-module_input_o34hyq::placeholder {
22
+ color: var(--color-gray-9);
23
+ user-select: none;
24
+ }
25
+
26
+ .input-module_input_o34hyq:disabled {
27
+ cursor: not-allowed;
28
+ opacity: .5;
29
+ }
30
+
31
+ .input-module_input_o34hyq:enabled:active, .input-module_input_o34hyq:enabled:focus, .input-module_input_o34hyq:enabled:hover, .input-module_input_o34hyq:enabled[data-is-active="true"] {
32
+ box-shadow: 0 0 0 1px var(--color-gray-6) inset;
33
+ }
34
+
35
+ .input-module_input_o34hyq[data-is-valid="true"] {
36
+ outline-color: #30a46c;
37
+ }
38
+
39
+ .input-module_input_o34hyq[data-is-invalid="true"] {
40
+ outline-color: #e5484d;
41
+ }
42
+
43
+ .input-module_input_o34hyq:focus-visible {
44
+ outline-color: var(--color-outline);
45
+ }
46
+
47
+ .input-module_input__rounded_base_o34hyq {
48
+ border-radius: 12px;
49
+ }
50
+
51
+ .input-module_input_o34hyq.input-module_input__rounded_full_o34hyq {
52
+ border-radius: 9999px;
53
+ }
54
+
55
+ .input-module_input__size_32_o34hyq {
56
+ border-radius: 8px;
57
+ min-height: 32px;
58
+ padding: 0 8px;
59
+ }
60
+
61
+ .input-module_input__size_36_o34hyq {
62
+ border-radius: 9px;
63
+ min-height: 36px;
64
+ padding: 0 10px;
65
+ }
66
+
67
+ .input-module_input__size_40_o34hyq {
68
+ border-radius: 10px;
69
+ min-height: 40px;
70
+ padding: 0 12px;
71
+ }
72
+
73
+ .input-module_input__size_44_o34hyq {
74
+ border-radius: 11px;
75
+ min-height: 44px;
76
+ padding: 0 14px;
77
+ }
78
+
79
+ .input-module_input__size_48_o34hyq {
80
+ border-radius: 12px;
81
+ min-height: 48px;
82
+ padding: 0 16px;
83
+ }
84
+ }
@@ -0,0 +1,22 @@
1
+ import { VariantProps } from "class-variance-authority";
2
+ import { ComponentProps, JSX } from "react";
3
+ //#region src/components/input/input.d.ts
4
+ interface InputProps extends Omit<ComponentProps<"input">, "aria-pressed" | "autoFocus" | "disabled" | "readOnly" | "required"> {
5
+ isActive?: boolean;
6
+ isAutoFocus?: boolean;
7
+ isDisabled?: boolean;
8
+ isInvalid?: boolean;
9
+ isReadOnly?: boolean;
10
+ isRequired?: boolean;
11
+ isRounded?: boolean;
12
+ isValid?: boolean;
13
+ size?: InputSize;
14
+ }
15
+ type InputSize = NonNullable<VariantProps<typeof inputVariants>["size"]>;
16
+ declare function Input(props: InputProps): JSX.Element;
17
+ declare const inputVariants: (props?: ({
18
+ isRounded?: boolean | null | undefined;
19
+ size?: 32 | 36 | 40 | 44 | 48 | null | undefined;
20
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
21
+ //#endregion
22
+ export { Input, InputProps, inputVariants };
@@ -0,0 +1,44 @@
1
+ import input_module_default from "./input.module.js";
2
+ import { cva } from "class-variance-authority";
3
+ import { jsx } from "react/jsx-runtime";
4
+ //#region src/components/input/input.tsx
5
+ function Input(props) {
6
+ const { className: customClassName = "", isActive = false, isAutoFocus = false, isDisabled = false, isInvalid = void 0, isReadOnly = false, isRequired = false, isRounded = false, isValid = void 0, size = 48, type = "text", ...rest } = props;
7
+ return /* @__PURE__ */ jsx("input", {
8
+ autoFocus: isAutoFocus,
9
+ className: inputVariants({
10
+ className: customClassName,
11
+ isRounded,
12
+ size
13
+ }),
14
+ "data-is-active": isActive,
15
+ "data-is-invalid": isInvalid,
16
+ "data-is-valid": isValid,
17
+ disabled: isDisabled,
18
+ readOnly: isReadOnly,
19
+ required: isRequired,
20
+ type,
21
+ ...rest
22
+ });
23
+ }
24
+ const inputVariants = cva(input_module_default.input, {
25
+ defaultVariants: {
26
+ isRounded: false,
27
+ size: 48
28
+ },
29
+ variants: {
30
+ isRounded: {
31
+ false: input_module_default.input__rounded_base,
32
+ true: input_module_default.input__rounded_full
33
+ },
34
+ size: {
35
+ 32: input_module_default.input__size_32,
36
+ 36: input_module_default.input__size_36,
37
+ 40: input_module_default.input__size_40,
38
+ 44: input_module_default.input__size_44,
39
+ 48: input_module_default.input__size_48
40
+ }
41
+ }
42
+ });
43
+ //#endregion
44
+ export { Input, inputVariants };
@@ -0,0 +1,14 @@
1
+ import './input.css';
2
+ //#region src/components/input/input.module.css
3
+ var input_module_default = {
4
+ "input": "input-module_input_o34hyq",
5
+ "input__rounded_base": "input-module_input__rounded_base_o34hyq",
6
+ "input__rounded_full": "input-module_input__rounded_full_o34hyq",
7
+ "input__size_32": "input-module_input__size_32_o34hyq",
8
+ "input__size_36": "input-module_input__size_36_o34hyq",
9
+ "input__size_40": "input-module_input__size_40_o34hyq",
10
+ "input__size_44": "input-module_input__size_44_o34hyq",
11
+ "input__size_48": "input-module_input__size_48_o34hyq"
12
+ };
13
+ //#endregion
14
+ export { input_module_default as default };
@@ -0,0 +1,7 @@
1
+ @layer components {
2
+ .label-module_label_iQZ4sG {
3
+ color: var(--color-text-secondary);
4
+ width: fit-content;
5
+ font-size: 14px;
6
+ }
7
+ }
@@ -0,0 +1,7 @@
1
+ import { ComponentProps, JSX } from "react";
2
+ //#region src/components/label/label.d.ts
3
+ interface LabelProps extends ComponentProps<"label"> {}
4
+ declare function Label(props: LabelProps): JSX.Element;
5
+ declare const labelVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
6
+ //#endregion
7
+ export { Label, LabelProps, labelVariants };
@@ -0,0 +1,16 @@
1
+ import label_module_default from "./label.module.js";
2
+ import { cva } from "class-variance-authority";
3
+ import { jsx } from "react/jsx-runtime";
4
+ //#region src/components/label/label.tsx
5
+ function Label(props) {
6
+ const { className: customClassName = "", htmlFor = void 0, children = "", ...rest } = props;
7
+ return /* @__PURE__ */ jsx("label", {
8
+ className: labelVariants({ className: customClassName }),
9
+ htmlFor,
10
+ ...rest,
11
+ children
12
+ });
13
+ }
14
+ const labelVariants = cva(label_module_default.label);
15
+ //#endregion
16
+ export { Label, labelVariants };
@@ -0,0 +1,5 @@
1
+ import './label.css';
2
+ //#region src/components/label/label.module.css
3
+ var label_module_default = { "label": "label-module_label_iQZ4sG" };
4
+ //#endregion
5
+ export { label_module_default as default };
@@ -0,0 +1,14 @@
1
+ import { Menu } from "@base-ui/react";
2
+ import { JSX, ReactNode } from "react";
3
+ //#region src/components/menu/menu-checkbox-item.d.ts
4
+ interface MenuCheckboxItemProps extends Omit<Menu.CheckboxItem.Props, "checked" | "className" | "defaultChecked" | "disabled"> {
5
+ className?: string;
6
+ iconEnd?: ReactNode;
7
+ indicator?: ReactNode;
8
+ isChecked?: Menu.CheckboxItem.Props["checked"];
9
+ isDefaultChecked?: Menu.CheckboxItem.Props["defaultChecked"];
10
+ isDisabled?: Menu.CheckboxItem.Props["disabled"];
11
+ }
12
+ declare function MenuCheckboxItem(props: MenuCheckboxItemProps): JSX.Element;
13
+ //#endregion
14
+ export { MenuCheckboxItem, MenuCheckboxItemProps };
@@ -0,0 +1,44 @@
1
+ import { MENU_CLASS_NAME } from "./menu-class-names.js";
2
+ import { cx } from "class-variance-authority";
3
+ import { jsx, jsxs } from "react/jsx-runtime";
4
+ import { Menu } from "@base-ui/react";
5
+ //#region src/components/menu/menu-checkbox-item.tsx
6
+ function MenuCheckboxItem(props) {
7
+ const { children, className: customClassName = "", iconEnd = void 0, indicator = void 0, isChecked = void 0, isDefaultChecked = false, isDisabled = false, ...rest } = props;
8
+ const combinedClassName = cx(MENU_CLASS_NAME.CHECKBOX_ITEM, customClassName);
9
+ const currentIndicator = indicator ?? /* @__PURE__ */ jsx("svg", {
10
+ fill: "none",
11
+ height: "16",
12
+ viewBox: "0 0 16 16",
13
+ width: "16",
14
+ children: /* @__PURE__ */ jsx("path", {
15
+ d: "M3.5 8.5L6.5 11.5L12.5 4.5",
16
+ stroke: "currentColor",
17
+ strokeWidth: "2"
18
+ })
19
+ });
20
+ return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
21
+ checked: isChecked,
22
+ className: combinedClassName,
23
+ "data-slot": "menu-checkbox-item",
24
+ defaultChecked: isDefaultChecked,
25
+ disabled: isDisabled,
26
+ ...rest,
27
+ children: [
28
+ /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, {
29
+ className: MENU_CLASS_NAME.ITEM_INDICATOR,
30
+ children: currentIndicator
31
+ }),
32
+ /* @__PURE__ */ jsx("span", {
33
+ className: MENU_CLASS_NAME.ITEM_LABEL,
34
+ children
35
+ }),
36
+ iconEnd && /* @__PURE__ */ jsx("span", {
37
+ className: MENU_CLASS_NAME.ITEM_ICON,
38
+ children: iconEnd
39
+ })
40
+ ]
41
+ });
42
+ }
43
+ //#endregion
44
+ export { MenuCheckboxItem };
@@ -0,0 +1,23 @@
1
+ //#region src/components/menu/menu-class-names.d.ts
2
+ declare const MENU_CLASS_NAME: {
3
+ readonly ARROW: string;
4
+ readonly ARROW_ICON: string;
5
+ readonly CHECKBOX_ITEM: string;
6
+ readonly CONTENT: string;
7
+ readonly CONTENT_POSITIONER: string;
8
+ readonly GROUP: string;
9
+ readonly GROUP_LABEL: string;
10
+ readonly ITEM: string;
11
+ readonly ITEM_ICON: string;
12
+ readonly ITEM_INDICATOR: string;
13
+ readonly ITEM_LABEL: string;
14
+ readonly LINK_ITEM: string;
15
+ readonly RADIO_GROUP: string;
16
+ readonly RADIO_ITEM: string;
17
+ readonly SEPARATOR: string;
18
+ readonly SUBMENU_TRIGGER: string;
19
+ readonly TRIGGER: string;
20
+ readonly VIEWPORT: string;
21
+ };
22
+ //#endregion
23
+ export { MENU_CLASS_NAME };
@@ -0,0 +1,24 @@
1
+ import menu_module_default from "./menu.module.js";
2
+ //#region src/components/menu/menu-class-names.ts
3
+ const MENU_CLASS_NAME = {
4
+ ARROW: menu_module_default.menu_content_arrow,
5
+ ARROW_ICON: menu_module_default.menu_content_arrow__icon,
6
+ CHECKBOX_ITEM: menu_module_default.menu_checkbox_item,
7
+ CONTENT: menu_module_default.menu_content,
8
+ CONTENT_POSITIONER: menu_module_default.menu_content_positioner,
9
+ GROUP: menu_module_default.menu_group,
10
+ GROUP_LABEL: menu_module_default.menu_group_label,
11
+ ITEM: menu_module_default.menu_item,
12
+ ITEM_ICON: menu_module_default.menu_item__icon,
13
+ ITEM_INDICATOR: menu_module_default.menu_item__indicator,
14
+ ITEM_LABEL: menu_module_default.menu_item__label,
15
+ LINK_ITEM: menu_module_default.menu_link_item,
16
+ RADIO_GROUP: menu_module_default.menu_radio_group,
17
+ RADIO_ITEM: menu_module_default.menu_radio_item,
18
+ SEPARATOR: menu_module_default.menu_separator,
19
+ SUBMENU_TRIGGER: menu_module_default.menu_submenu_trigger,
20
+ TRIGGER: menu_module_default.menu_trigger,
21
+ VIEWPORT: menu_module_default.menu_viewport
22
+ };
23
+ //#endregion
24
+ export { MENU_CLASS_NAME };
@@ -0,0 +1,11 @@
1
+ import { Menu } from "@base-ui/react";
2
+ import { JSX } from "react";
3
+ //#region src/components/menu/menu-content.d.ts
4
+ interface MenuContentProps extends Omit<Menu.Popup.Props, "className">, Pick<Menu.Positioner.Props, "align" | "alignOffset" | "anchor" | "arrowPadding" | "collisionAvoidance" | "collisionBoundary" | "collisionPadding" | "disableAnchorTracking" | "positionMethod" | "side" | "sideOffset" | "sticky"> {
5
+ className?: string;
6
+ container?: Menu.Portal.Props["container"];
7
+ keepMounted?: Menu.Portal.Props["keepMounted"];
8
+ }
9
+ declare function MenuContent(props: MenuContentProps): JSX.Element;
10
+ //#endregion
11
+ export { MenuContent, MenuContentProps };
@@ -0,0 +1,38 @@
1
+ import { MENU_CLASS_NAME } from "./menu-class-names.js";
2
+ import { cx } from "class-variance-authority";
3
+ import { jsx } from "react/jsx-runtime";
4
+ import { Menu } from "@base-ui/react";
5
+ //#region src/components/menu/menu-content.tsx
6
+ function MenuContent(props) {
7
+ const { align = "start", alignOffset = void 0, anchor = void 0, arrowPadding = void 0, children, className: customClassName = "", collisionAvoidance = void 0, collisionBoundary = void 0, collisionPadding = void 0, container = void 0, disableAnchorTracking = void 0, keepMounted = void 0, positionMethod = void 0, side = "bottom", sideOffset = 8, sticky = void 0, ...rest } = props;
8
+ const combinedClassName = cx(MENU_CLASS_NAME.CONTENT, customClassName);
9
+ return /* @__PURE__ */ jsx(Menu.Portal, {
10
+ container,
11
+ "data-slot": "menu-portal",
12
+ keepMounted,
13
+ children: /* @__PURE__ */ jsx(Menu.Positioner, {
14
+ align,
15
+ alignOffset,
16
+ anchor,
17
+ arrowPadding,
18
+ className: MENU_CLASS_NAME.CONTENT_POSITIONER,
19
+ collisionAvoidance,
20
+ collisionBoundary,
21
+ collisionPadding,
22
+ "data-slot": "menu-positioner",
23
+ disableAnchorTracking,
24
+ positionMethod,
25
+ side,
26
+ sideOffset,
27
+ sticky,
28
+ children: /* @__PURE__ */ jsx(Menu.Popup, {
29
+ className: combinedClassName,
30
+ "data-slot": "menu-content",
31
+ ...rest,
32
+ children
33
+ })
34
+ })
35
+ });
36
+ }
37
+ //#endregion
38
+ export { MenuContent };
@@ -0,0 +1,9 @@
1
+ import { Menu } from "@base-ui/react";
2
+ import { JSX } from "react";
3
+ //#region src/components/menu/menu-group-label.d.ts
4
+ interface MenuGroupLabelProps extends Omit<Menu.GroupLabel.Props, "className"> {
5
+ className?: string;
6
+ }
7
+ declare function MenuGroupLabel(props: MenuGroupLabelProps): JSX.Element;
8
+ //#endregion
9
+ export { MenuGroupLabel, MenuGroupLabelProps };
@@ -0,0 +1,16 @@
1
+ import { MENU_CLASS_NAME } from "./menu-class-names.js";
2
+ import { cx } from "class-variance-authority";
3
+ import { jsx } from "react/jsx-runtime";
4
+ import { Menu } from "@base-ui/react";
5
+ //#region src/components/menu/menu-group-label.tsx
6
+ function MenuGroupLabel(props) {
7
+ const { className: customClassName = "", ...rest } = props;
8
+ const combinedClassName = cx(MENU_CLASS_NAME.GROUP_LABEL, customClassName);
9
+ return /* @__PURE__ */ jsx(Menu.GroupLabel, {
10
+ className: combinedClassName,
11
+ "data-slot": "menu-group-label",
12
+ ...rest
13
+ });
14
+ }
15
+ //#endregion
16
+ export { MenuGroupLabel };
@@ -0,0 +1,9 @@
1
+ import { Menu } from "@base-ui/react";
2
+ import { JSX } from "react";
3
+ //#region src/components/menu/menu-group.d.ts
4
+ interface MenuGroupProps extends Omit<Menu.Group.Props, "className"> {
5
+ className?: string;
6
+ }
7
+ declare function MenuGroup(props: MenuGroupProps): JSX.Element;
8
+ //#endregion
9
+ export { MenuGroup, MenuGroupProps };
@@ -0,0 +1,16 @@
1
+ import { MENU_CLASS_NAME } from "./menu-class-names.js";
2
+ import { cx } from "class-variance-authority";
3
+ import { jsx } from "react/jsx-runtime";
4
+ import { Menu } from "@base-ui/react";
5
+ //#region src/components/menu/menu-group.tsx
6
+ function MenuGroup(props) {
7
+ const { className: customClassName = "", ...rest } = props;
8
+ const combinedClassName = cx(MENU_CLASS_NAME.GROUP, customClassName);
9
+ return /* @__PURE__ */ jsx(Menu.Group, {
10
+ className: combinedClassName,
11
+ "data-slot": "menu-group",
12
+ ...rest
13
+ });
14
+ }
15
+ //#endregion
16
+ export { MenuGroup };
@@ -0,0 +1,10 @@
1
+ import { Menu } from "@base-ui/react";
2
+ import { JSX } from "react";
3
+ //#region src/components/menu/menu-item.d.ts
4
+ interface MenuItemProps extends Omit<Menu.Item.Props, "className" | "disabled"> {
5
+ className?: string;
6
+ isDisabled?: Menu.Item.Props["disabled"];
7
+ }
8
+ declare function MenuItem(props: MenuItemProps): JSX.Element;
9
+ //#endregion
10
+ export { MenuItem, MenuItemProps };
@@ -0,0 +1,18 @@
1
+ import { MENU_CLASS_NAME } from "./menu-class-names.js";
2
+ import { cx } from "class-variance-authority";
3
+ import { jsx } from "react/jsx-runtime";
4
+ import { Menu } from "@base-ui/react";
5
+ //#region src/components/menu/menu-item.tsx
6
+ function MenuItem(props) {
7
+ const { children, className: customClassName = "", isDisabled = false, ...rest } = props;
8
+ const combinedClassName = cx(MENU_CLASS_NAME.ITEM, customClassName);
9
+ return /* @__PURE__ */ jsx(Menu.Item, {
10
+ className: combinedClassName,
11
+ "data-slot": "menu-item",
12
+ disabled: isDisabled,
13
+ ...rest,
14
+ children
15
+ });
16
+ }
17
+ //#endregion
18
+ export { MenuItem };
@@ -0,0 +1,7 @@
1
+ import { Menu } from "@base-ui/react";
2
+ import { JSX } from "react";
3
+ //#region src/components/menu/menu-link-item.d.ts
4
+ interface MenuLinkItemProps extends Menu.LinkItem.Props {}
5
+ declare function MenuLinkItem(props: MenuLinkItemProps): JSX.Element;
6
+ //#endregion
7
+ export { MenuLinkItem, MenuLinkItemProps };
@@ -0,0 +1,13 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { Menu } from "@base-ui/react";
3
+ //#region src/components/menu/menu-link-item.tsx
4
+ function MenuLinkItem(props) {
5
+ const { children, ...rest } = props;
6
+ return /* @__PURE__ */ jsx(Menu.LinkItem, {
7
+ "data-slot": "menu-link-item",
8
+ ...rest,
9
+ children
10
+ });
11
+ }
12
+ //#endregion
13
+ export { MenuLinkItem };
@@ -0,0 +1,10 @@
1
+ import { Menu } from "@base-ui/react";
2
+ import { JSX } from "react";
3
+ //#region src/components/menu/menu-radio-group.d.ts
4
+ interface MenuRadioGroupProps extends Omit<Menu.RadioGroup.Props, "className" | "disabled"> {
5
+ className?: string;
6
+ isDisabled?: Menu.RadioGroup.Props["disabled"];
7
+ }
8
+ declare function MenuRadioGroup(props: MenuRadioGroupProps): JSX.Element;
9
+ //#endregion
10
+ export { MenuRadioGroup, MenuRadioGroupProps };
@@ -0,0 +1,17 @@
1
+ import { MENU_CLASS_NAME } from "./menu-class-names.js";
2
+ import { cx } from "class-variance-authority";
3
+ import { jsx } from "react/jsx-runtime";
4
+ import { Menu } from "@base-ui/react";
5
+ //#region src/components/menu/menu-radio-group.tsx
6
+ function MenuRadioGroup(props) {
7
+ const { className: customClassName = "", isDisabled = false, ...rest } = props;
8
+ const combinedClassName = cx(MENU_CLASS_NAME.RADIO_GROUP, customClassName);
9
+ return /* @__PURE__ */ jsx(Menu.RadioGroup, {
10
+ className: combinedClassName,
11
+ "data-slot": "menu-radio-group",
12
+ disabled: isDisabled,
13
+ ...rest
14
+ });
15
+ }
16
+ //#endregion
17
+ export { MenuRadioGroup };
@@ -0,0 +1,12 @@
1
+ import { Menu } from "@base-ui/react";
2
+ import { JSX, ReactNode } from "react";
3
+ //#region src/components/menu/menu-radio-item.d.ts
4
+ interface MenuRadioItemProps extends Omit<Menu.RadioItem.Props, "className" | "disabled"> {
5
+ className?: string;
6
+ iconEnd?: ReactNode;
7
+ indicator?: ReactNode;
8
+ isDisabled?: Menu.RadioItem.Props["disabled"];
9
+ }
10
+ declare function MenuRadioItem(props: MenuRadioItemProps): JSX.Element;
11
+ //#endregion
12
+ export { MenuRadioItem, MenuRadioItemProps };
@@ -0,0 +1,43 @@
1
+ import { MENU_CLASS_NAME } from "./menu-class-names.js";
2
+ import { cx } from "class-variance-authority";
3
+ import { jsx, jsxs } from "react/jsx-runtime";
4
+ import { Menu } from "@base-ui/react";
5
+ //#region src/components/menu/menu-radio-item.tsx
6
+ function MenuRadioItem(props) {
7
+ const { children, className: customClassName = "", iconEnd = void 0, indicator = void 0, isDisabled = false, ...rest } = props;
8
+ const combinedClassName = cx(MENU_CLASS_NAME.RADIO_ITEM, customClassName);
9
+ const currentIndicator = indicator ?? /* @__PURE__ */ jsx("svg", {
10
+ fill: "none",
11
+ height: "16",
12
+ viewBox: "0 0 16 16",
13
+ width: "16",
14
+ children: /* @__PURE__ */ jsx("circle", {
15
+ cx: "8",
16
+ cy: "8",
17
+ fill: "currentColor",
18
+ r: "3"
19
+ })
20
+ });
21
+ return /* @__PURE__ */ jsxs(Menu.RadioItem, {
22
+ className: combinedClassName,
23
+ "data-slot": "menu-radio-item",
24
+ disabled: isDisabled,
25
+ ...rest,
26
+ children: [
27
+ /* @__PURE__ */ jsx(Menu.RadioItemIndicator, {
28
+ className: MENU_CLASS_NAME.ITEM_INDICATOR,
29
+ children: currentIndicator
30
+ }),
31
+ /* @__PURE__ */ jsx("span", {
32
+ className: MENU_CLASS_NAME.ITEM_LABEL,
33
+ children
34
+ }),
35
+ iconEnd && /* @__PURE__ */ jsx("span", {
36
+ className: MENU_CLASS_NAME.ITEM_ICON,
37
+ children: iconEnd
38
+ })
39
+ ]
40
+ });
41
+ }
42
+ //#endregion
43
+ export { MenuRadioItem };
@@ -0,0 +1,9 @@
1
+ import { Menu } from "@base-ui/react";
2
+ import { JSX } from "react";
3
+ //#region src/components/menu/menu-separator.d.ts
4
+ interface MenuSeparatorProps extends Omit<Menu.Separator.Props, "className"> {
5
+ className?: string;
6
+ }
7
+ declare function MenuSeparator(props: MenuSeparatorProps): JSX.Element;
8
+ //#endregion
9
+ export { MenuSeparator, MenuSeparatorProps };
@@ -0,0 +1,16 @@
1
+ import { MENU_CLASS_NAME } from "./menu-class-names.js";
2
+ import { cx } from "class-variance-authority";
3
+ import { jsx } from "react/jsx-runtime";
4
+ import { Menu } from "@base-ui/react";
5
+ //#region src/components/menu/menu-separator.tsx
6
+ function MenuSeparator(props) {
7
+ const { className: customClassName = "", ...rest } = props;
8
+ const combinedClassName = cx(MENU_CLASS_NAME.SEPARATOR, customClassName);
9
+ return /* @__PURE__ */ jsx(Menu.Separator, {
10
+ className: combinedClassName,
11
+ "data-slot": "menu-separator",
12
+ ...rest
13
+ });
14
+ }
15
+ //#endregion
16
+ export { MenuSeparator };
@@ -0,0 +1,7 @@
1
+ import { Menu } from "@base-ui/react";
2
+ import { JSX } from "react";
3
+ //#region src/components/menu/menu-submenu-trigger.d.ts
4
+ interface MenuSubmenuTriggerProps extends Menu.SubmenuTrigger.Props {}
5
+ declare function MenuSubmenuTrigger(props: MenuSubmenuTriggerProps): JSX.Element;
6
+ //#endregion
7
+ export { MenuSubmenuTrigger, MenuSubmenuTriggerProps };
@@ -0,0 +1,13 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { Menu } from "@base-ui/react";
3
+ //#region src/components/menu/menu-submenu-trigger.tsx
4
+ function MenuSubmenuTrigger(props) {
5
+ const { children, ...rest } = props;
6
+ return /* @__PURE__ */ jsx(Menu.SubmenuTrigger, {
7
+ "data-slot": "menu-submenu-trigger",
8
+ ...rest,
9
+ children
10
+ });
11
+ }
12
+ //#endregion
13
+ export { MenuSubmenuTrigger };
@@ -0,0 +1,11 @@
1
+ import { Menu } from "@base-ui/react";
2
+ import { JSX } from "react";
3
+ //#region src/components/menu/menu-submenu.d.ts
4
+ interface MenuSubmenuProps extends Omit<Menu.SubmenuRoot.Props, "disabled" | "onOpenChange" | "open"> {
5
+ isDisabled?: Menu.SubmenuRoot.Props["disabled"];
6
+ isOpen?: Menu.SubmenuRoot.Props["open"];
7
+ onIsOpenChange?: Menu.SubmenuRoot.Props["onOpenChange"];
8
+ }
9
+ declare function MenuSubmenu(props: MenuSubmenuProps): JSX.Element;
10
+ //#endregion
11
+ export { MenuSubmenu, MenuSubmenuProps };
@@ -0,0 +1,15 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { Menu } from "@base-ui/react";
3
+ //#region src/components/menu/menu-submenu.tsx
4
+ function MenuSubmenu(props) {
5
+ const { isDisabled = false, isOpen = void 0, onIsOpenChange = void 0, ...rest } = props;
6
+ return /* @__PURE__ */ jsx(Menu.SubmenuRoot, {
7
+ "data-slot": "menu-submenu",
8
+ disabled: isDisabled,
9
+ onOpenChange: onIsOpenChange,
10
+ open: isOpen,
11
+ ...rest
12
+ });
13
+ }
14
+ //#endregion
15
+ export { MenuSubmenu };