@_linked/primitives 1.0.5

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 (191) hide show
  1. package/.changeset/README.md +20 -0
  2. package/.changeset/config.json +14 -0
  3. package/.github/workflows/changeset-check.yml +44 -0
  4. package/.github/workflows/ci.yml +30 -0
  5. package/.github/workflows/publish.yml +42 -0
  6. package/CHANGELOG.md +7 -0
  7. package/lib/cjs/backend.d.ts +0 -0
  8. package/lib/cjs/components/Accordion.d.ts +13 -0
  9. package/lib/cjs/components/Accordion.module.css +101 -0
  10. package/lib/cjs/components/AlertDialog.d.ts +37 -0
  11. package/lib/cjs/components/AlertDialog.module.css +80 -0
  12. package/lib/cjs/components/AspectRatio.d.ts +7 -0
  13. package/lib/cjs/components/AspectRatio.module.css +28 -0
  14. package/lib/cjs/components/Avatar.d.ts +11 -0
  15. package/lib/cjs/components/Avatar.module.css +43 -0
  16. package/lib/cjs/components/Breadcrumb.d.ts +41 -0
  17. package/lib/cjs/components/Breadcrumb.module.css +78 -0
  18. package/lib/cjs/components/Button.d.ts +9 -0
  19. package/lib/cjs/components/Button.module.css +246 -0
  20. package/lib/cjs/components/Checkbox.d.ts +4 -0
  21. package/lib/cjs/components/Checkbox.module.css +43 -0
  22. package/lib/cjs/components/Collapsible.d.ts +11 -0
  23. package/lib/cjs/components/Command.d.ts +167 -0
  24. package/lib/cjs/components/Command.module.css +153 -0
  25. package/lib/cjs/components/ContextMenu.d.ts +51 -0
  26. package/lib/cjs/components/ContextMenu.module.css +238 -0
  27. package/lib/cjs/components/Dialog.d.ts +38 -0
  28. package/lib/cjs/components/Dialog.module.css +109 -0
  29. package/lib/cjs/components/Drawer.d.ts +40 -0
  30. package/lib/cjs/components/Drawer.module.css +87 -0
  31. package/lib/cjs/components/DropdownMenu.d.ts +52 -0
  32. package/lib/cjs/components/DropdownMenu.module.css +244 -0
  33. package/lib/cjs/components/Form.d.ts +23 -0
  34. package/lib/cjs/components/Form.module.css +75 -0
  35. package/lib/cjs/components/Heading.d.ts +7 -0
  36. package/lib/cjs/components/Heading.module.css +83 -0
  37. package/lib/cjs/components/HoverCard.d.ts +15 -0
  38. package/lib/cjs/components/HoverCard.module.css +75 -0
  39. package/lib/cjs/components/IconButton.d.ts +9 -0
  40. package/lib/cjs/components/IconButton.module.css +150 -0
  41. package/lib/cjs/components/Input.d.ts +6 -0
  42. package/lib/cjs/components/Input.module.css +61 -0
  43. package/lib/cjs/components/Label.d.ts +4 -0
  44. package/lib/cjs/components/Label.module.css +7 -0
  45. package/lib/cjs/components/Menubar.d.ts +65 -0
  46. package/lib/cjs/components/Menubar.module.css +128 -0
  47. package/lib/cjs/components/MultiSelect.d.ts +86 -0
  48. package/lib/cjs/components/MultiSelect.module.css +93 -0
  49. package/lib/cjs/components/NavigationMenu.d.ts +21 -0
  50. package/lib/cjs/components/NavigationMenu.module.css +248 -0
  51. package/lib/cjs/components/Popover.d.ts +17 -0
  52. package/lib/cjs/components/Popover.module.css +106 -0
  53. package/lib/cjs/components/Progress.d.ts +9 -0
  54. package/lib/cjs/components/Progress.module.css +23 -0
  55. package/lib/cjs/components/RadioGroup.d.ts +9 -0
  56. package/lib/cjs/components/RadioGroup.module.css +57 -0
  57. package/lib/cjs/components/ScrollArea.d.ts +9 -0
  58. package/lib/cjs/components/ScrollArea.module.css +55 -0
  59. package/lib/cjs/components/Select.d.ts +28 -0
  60. package/lib/cjs/components/Select.module.css +153 -0
  61. package/lib/cjs/components/Separator.d.ts +4 -0
  62. package/lib/cjs/components/Separator.module.css +13 -0
  63. package/lib/cjs/components/Slider.d.ts +13 -0
  64. package/lib/cjs/components/Slider.module.css +43 -0
  65. package/lib/cjs/components/Spinner.d.ts +4 -0
  66. package/lib/cjs/components/Spinner.module.css +21 -0
  67. package/lib/cjs/components/Switch.d.ts +4 -0
  68. package/lib/cjs/components/Switch.module.css +52 -0
  69. package/lib/cjs/components/Tabs.d.ts +13 -0
  70. package/lib/cjs/components/Tabs.module.css +64 -0
  71. package/lib/cjs/components/Text.d.ts +8 -0
  72. package/lib/cjs/components/Text.module.css +24 -0
  73. package/lib/cjs/components/Textarea.d.ts +5 -0
  74. package/lib/cjs/components/Textarea.module.css +34 -0
  75. package/lib/cjs/components/Toast.d.ts +21 -0
  76. package/lib/cjs/components/Toast.module.css +133 -0
  77. package/lib/cjs/components/Toaster.d.ts +2 -0
  78. package/lib/cjs/components/Toggle.d.ts +7 -0
  79. package/lib/cjs/components/Toggle.module.css +32 -0
  80. package/lib/cjs/components/ToggleGroup.d.ts +9 -0
  81. package/lib/cjs/components/ToggleGroup.module.css +61 -0
  82. package/lib/cjs/components/Toolbar.d.ts +17 -0
  83. package/lib/cjs/components/Toolbar.module.css +113 -0
  84. package/lib/cjs/components/Tooltip.d.ts +15 -0
  85. package/lib/cjs/components/Tooltip.module.css +78 -0
  86. package/lib/cjs/components/Typography.d.ts +8 -0
  87. package/lib/cjs/components/Typography.module.css +25 -0
  88. package/lib/cjs/components/VisuallyHidden.d.ts +4 -0
  89. package/lib/cjs/components/helpers/mixins.css +15 -0
  90. package/lib/cjs/data/primitives.json +10 -0
  91. package/lib/cjs/hooks/use-toast.d.ts +44 -0
  92. package/lib/cjs/index.d.ts +45 -0
  93. package/lib/cjs/ontologies/primitives.d.ts +6 -0
  94. package/lib/cjs/package.d.ts +3 -0
  95. package/lib/cjs/package.json +85 -0
  96. package/lib/cjs/theme.css +3 -0
  97. package/lib/cjs/types.d.ts +12 -0
  98. package/lib/esm/backend.d.ts +0 -0
  99. package/lib/esm/components/Accordion.d.ts +13 -0
  100. package/lib/esm/components/Accordion.module.css +101 -0
  101. package/lib/esm/components/AlertDialog.d.ts +37 -0
  102. package/lib/esm/components/AlertDialog.module.css +80 -0
  103. package/lib/esm/components/AspectRatio.d.ts +7 -0
  104. package/lib/esm/components/AspectRatio.module.css +28 -0
  105. package/lib/esm/components/Avatar.d.ts +11 -0
  106. package/lib/esm/components/Avatar.module.css +43 -0
  107. package/lib/esm/components/Breadcrumb.d.ts +41 -0
  108. package/lib/esm/components/Breadcrumb.module.css +78 -0
  109. package/lib/esm/components/Button.d.ts +9 -0
  110. package/lib/esm/components/Button.module.css +246 -0
  111. package/lib/esm/components/Checkbox.d.ts +4 -0
  112. package/lib/esm/components/Checkbox.module.css +43 -0
  113. package/lib/esm/components/Collapsible.d.ts +11 -0
  114. package/lib/esm/components/Command.d.ts +167 -0
  115. package/lib/esm/components/Command.module.css +153 -0
  116. package/lib/esm/components/ContextMenu.d.ts +51 -0
  117. package/lib/esm/components/ContextMenu.module.css +238 -0
  118. package/lib/esm/components/Dialog.d.ts +38 -0
  119. package/lib/esm/components/Dialog.module.css +109 -0
  120. package/lib/esm/components/Drawer.d.ts +40 -0
  121. package/lib/esm/components/Drawer.module.css +87 -0
  122. package/lib/esm/components/DropdownMenu.d.ts +52 -0
  123. package/lib/esm/components/DropdownMenu.module.css +244 -0
  124. package/lib/esm/components/Form.d.ts +23 -0
  125. package/lib/esm/components/Form.module.css +75 -0
  126. package/lib/esm/components/Heading.d.ts +7 -0
  127. package/lib/esm/components/Heading.module.css +83 -0
  128. package/lib/esm/components/HoverCard.d.ts +15 -0
  129. package/lib/esm/components/HoverCard.module.css +75 -0
  130. package/lib/esm/components/IconButton.d.ts +9 -0
  131. package/lib/esm/components/IconButton.module.css +150 -0
  132. package/lib/esm/components/Input.d.ts +6 -0
  133. package/lib/esm/components/Input.module.css +61 -0
  134. package/lib/esm/components/Label.d.ts +4 -0
  135. package/lib/esm/components/Label.module.css +7 -0
  136. package/lib/esm/components/Menubar.d.ts +65 -0
  137. package/lib/esm/components/Menubar.module.css +128 -0
  138. package/lib/esm/components/MultiSelect.d.ts +86 -0
  139. package/lib/esm/components/MultiSelect.module.css +93 -0
  140. package/lib/esm/components/NavigationMenu.d.ts +21 -0
  141. package/lib/esm/components/NavigationMenu.module.css +248 -0
  142. package/lib/esm/components/Popover.d.ts +17 -0
  143. package/lib/esm/components/Popover.module.css +106 -0
  144. package/lib/esm/components/Progress.d.ts +9 -0
  145. package/lib/esm/components/Progress.module.css +23 -0
  146. package/lib/esm/components/RadioGroup.d.ts +9 -0
  147. package/lib/esm/components/RadioGroup.module.css +57 -0
  148. package/lib/esm/components/ScrollArea.d.ts +9 -0
  149. package/lib/esm/components/ScrollArea.module.css +55 -0
  150. package/lib/esm/components/Select.d.ts +28 -0
  151. package/lib/esm/components/Select.module.css +153 -0
  152. package/lib/esm/components/Separator.d.ts +4 -0
  153. package/lib/esm/components/Separator.module.css +13 -0
  154. package/lib/esm/components/Slider.d.ts +13 -0
  155. package/lib/esm/components/Slider.module.css +43 -0
  156. package/lib/esm/components/Spinner.d.ts +4 -0
  157. package/lib/esm/components/Spinner.module.css +21 -0
  158. package/lib/esm/components/Switch.d.ts +4 -0
  159. package/lib/esm/components/Switch.module.css +52 -0
  160. package/lib/esm/components/Tabs.d.ts +13 -0
  161. package/lib/esm/components/Tabs.module.css +64 -0
  162. package/lib/esm/components/Text.d.ts +8 -0
  163. package/lib/esm/components/Text.module.css +24 -0
  164. package/lib/esm/components/Textarea.d.ts +5 -0
  165. package/lib/esm/components/Textarea.module.css +34 -0
  166. package/lib/esm/components/Toast.d.ts +21 -0
  167. package/lib/esm/components/Toast.module.css +133 -0
  168. package/lib/esm/components/Toaster.d.ts +2 -0
  169. package/lib/esm/components/Toggle.d.ts +7 -0
  170. package/lib/esm/components/Toggle.module.css +32 -0
  171. package/lib/esm/components/ToggleGroup.d.ts +9 -0
  172. package/lib/esm/components/ToggleGroup.module.css +61 -0
  173. package/lib/esm/components/Toolbar.d.ts +17 -0
  174. package/lib/esm/components/Toolbar.module.css +113 -0
  175. package/lib/esm/components/Tooltip.d.ts +15 -0
  176. package/lib/esm/components/Tooltip.module.css +78 -0
  177. package/lib/esm/components/Typography.d.ts +8 -0
  178. package/lib/esm/components/Typography.module.css +25 -0
  179. package/lib/esm/components/VisuallyHidden.d.ts +4 -0
  180. package/lib/esm/components/helpers/mixins.css +15 -0
  181. package/lib/esm/data/primitives.json +10 -0
  182. package/lib/esm/hooks/use-toast.d.ts +44 -0
  183. package/lib/esm/index.d.ts +45 -0
  184. package/lib/esm/ontologies/primitives.d.ts +6 -0
  185. package/lib/esm/package.d.ts +3 -0
  186. package/lib/esm/package.json +85 -0
  187. package/lib/esm/theme.css +3 -0
  188. package/lib/esm/types.d.ts +12 -0
  189. package/package.json +103 -0
  190. package/tsconfig-cjs.json +8 -0
  191. package/tsconfig-esm.json +9 -0
@@ -0,0 +1,61 @@
1
+ @import './helpers/mixins.css';
2
+
3
+ .Root {
4
+ font-family: var(--input-font-family, var(--field-font-family));
5
+ display: flex;
6
+ color: var(--input-text, var(--field-text));
7
+ padding: 0px var(--input-padding-x, var(--field-padding-x));
8
+ border-radius: var(--input-radius, var(--field-radius));
9
+ font-size: var(--input-font-size, var(--field-font-size));
10
+ box-shadow: var(--input-shadow, var(--field-shadow));
11
+ font-weight: var(--input-font-weight, var(--field-font-weight));
12
+ line-height: var(--input-line-height, var(--field-line-height));
13
+ background-color: var(--input-bg, var(--field-bg));
14
+ transition: var(--transition-normal);
15
+ border: 1px solid var(--input-border, var(--field-border));
16
+
17
+ &::placeholder {
18
+ color: var(--input-text-placeholder, var(--field-text-placeholder));
19
+ }
20
+
21
+ &:hover {
22
+ background-color: var(--input-bg-hover, var(--field-bg-hover));
23
+ border-color: var(--input-border-hover, var(--field-border-hover));
24
+ }
25
+
26
+ &:focus-visible {
27
+ @mixin focus;
28
+ background-color: var(--input-bg-focus, var(--field-bg-focus));
29
+ border-color: var(--input-border-focus, var(--field-border-focus));
30
+ }
31
+
32
+ &:disabled {
33
+ @mixin disabled;
34
+ }
35
+
36
+ &[type='file'] {
37
+ appearance: none;
38
+ border: 0;
39
+ }
40
+
41
+ &.small {
42
+ height: var(--input-height-sm, var(--field-height-sm));
43
+ font-size: var(
44
+ --input-font-size-sm,
45
+ var(--field-font-size-sm, var(--field-font-size))
46
+ );
47
+ }
48
+
49
+ &.medium {
50
+ height: var(--input-height-md, var(--field-height-md));
51
+ font-size: var(--input-font-size, var(--field-font-size));
52
+ }
53
+
54
+ &.large {
55
+ height: var(--input-height-lg, var(--field-height-lg));
56
+ font-size: var(
57
+ --input-font-size-lg,
58
+ var(--field-font-size-lg, var(--field-font-size))
59
+ );
60
+ }
61
+ }
@@ -0,0 +1,4 @@
1
+ import * as React from 'react';
2
+ import * as LabelPrimitive from '@radix-ui/react-label';
3
+ declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
4
+ export { Label };
@@ -0,0 +1,7 @@
1
+ @import './helpers/mixins.css';
2
+
3
+ .Root {
4
+ font-size: var(--label-font-size, var(--typography-font-size));
5
+ font-weight: var(--label-font-weight, var(--typography-font-weight));
6
+ color: var(--label-color, var(--typography-color));
7
+ }
@@ -0,0 +1,65 @@
1
+ import * as React from 'react';
2
+ import * as MenubarPrimitive from '@radix-ui/react-menubar';
3
+ declare const Menu: {
4
+ (props: MenubarPrimitive.MenubarMenuProps & {
5
+ __scopeMenubar?: import("@radix-ui/react-context").Scope;
6
+ }): import("react/jsx-runtime").JSX.Element;
7
+ displayName: string;
8
+ };
9
+ declare const Group: React.ForwardRefExoticComponent<MenubarPrimitive.MenubarGroupProps & React.RefAttributes<HTMLDivElement>>;
10
+ declare const Sub: React.FC<MenubarPrimitive.MenubarSubProps>;
11
+ declare const RadioGroup: React.ForwardRefExoticComponent<MenubarPrimitive.MenubarRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
12
+ declare const Root: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
13
+ declare const Trigger: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
14
+ declare const SubContent: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
15
+ declare const Separator: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
16
+ declare const Arrow: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarArrowProps & React.RefAttributes<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
17
+ declare const SubTrigger: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
18
+ inset?: boolean;
19
+ } & React.RefAttributes<HTMLDivElement>>;
20
+ declare const Content: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
21
+ declare const Item: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
22
+ inset?: boolean;
23
+ } & React.RefAttributes<HTMLDivElement>>;
24
+ declare const CheckboxItem: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
25
+ declare const RadioItem: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
26
+ declare const Label: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
27
+ inset?: boolean;
28
+ } & React.RefAttributes<HTMLDivElement>>;
29
+ declare const Shortcut: {
30
+ ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
31
+ displayname: string;
32
+ };
33
+ export declare const Menubar: {
34
+ Root: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
35
+ Trigger: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
36
+ Content: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
37
+ Item: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
38
+ inset?: boolean;
39
+ } & React.RefAttributes<HTMLDivElement>>;
40
+ CheckboxItem: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
41
+ RadioItem: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
42
+ Label: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
43
+ inset?: boolean;
44
+ } & React.RefAttributes<HTMLDivElement>>;
45
+ Separator: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
46
+ SubTrigger: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
47
+ inset?: boolean;
48
+ } & React.RefAttributes<HTMLDivElement>>;
49
+ SubContent: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
50
+ Arrow: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarArrowProps & React.RefAttributes<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
51
+ Menu: {
52
+ (props: MenubarPrimitive.MenubarMenuProps & {
53
+ __scopeMenubar?: import("@radix-ui/react-context").Scope;
54
+ }): import("react/jsx-runtime").JSX.Element;
55
+ displayName: string;
56
+ };
57
+ Group: React.ForwardRefExoticComponent<MenubarPrimitive.MenubarGroupProps & React.RefAttributes<HTMLDivElement>>;
58
+ Sub: React.FC<MenubarPrimitive.MenubarSubProps>;
59
+ RadioGroup: React.ForwardRefExoticComponent<MenubarPrimitive.MenubarRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
60
+ Shortcut: {
61
+ ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
62
+ displayname: string;
63
+ };
64
+ };
65
+ export { Root, Trigger, Content, Item, CheckboxItem, RadioItem, Label, Separator, SubTrigger, SubContent, Arrow, Menu, Group, Sub, RadioGroup, Shortcut, };
@@ -0,0 +1,128 @@
1
+ @theme static {
2
+ --spacing: 0.25rem;
3
+ }
4
+ @import './helpers/mixins.css';
5
+ .Root {
6
+ display: flex;
7
+ background-color: var(--menubar-bg, var(--popover-bg));
8
+ padding: var(--menubar-padding, --spacing(1));
9
+ border-radius: var(--menubar-radius, var(--popover-radius));
10
+ box-shadow: var(--menubar-shadow, var(--popover-shadow));
11
+ }
12
+
13
+ .Trigger {
14
+ padding: var(--menubar-trigger-padding-y, --spacing(2))
15
+ var(--menubar-trigger-padding-x, --spacing(3));
16
+ outline: none;
17
+ user-select: none;
18
+ font-weight: var(
19
+ --menubar-trigger-font-weight,
20
+ var(--typography-font-weight)
21
+ );
22
+ line-height: var(
23
+ --menubar-trigger-line-height,
24
+ var(--typography-line-height-none)
25
+ );
26
+ border-radius: var(--menubar-trigger-radius, var(--popover-radius));
27
+ color: var(--menubar-text, var(--popover-text));
28
+ font-size: var(--menubar-trigger-font-size, var(--text-sm));
29
+ display: flex;
30
+ align-items: center;
31
+ justify-content: space-between;
32
+ gap: var(--menubar-trigger-gap, --spacing(0.5));
33
+ height: var(
34
+ --menubar-trigger-height,
35
+ var(--menubar-item-height, --spacing(8))
36
+ );
37
+
38
+ &[data-highlighted],
39
+ &[data-state='open'] {
40
+ background-color: var(--menubar-bg-active, var(--bg-active));
41
+ }
42
+ }
43
+
44
+ .Content,
45
+ .SubContent {
46
+ min-width: var(--menubar-content-min-width, 14rem);
47
+ background-color: var(--menubar-content-bg, var(--popover-bg));
48
+ border-radius: var(--menubar-content-radius, var(--popover-radius));
49
+ padding: var(--menubar-content-padding, var(--menubar-padding, --spacing(1)));
50
+ box-shadow: var(--menubar-content-shadow, var(--popover-shadow));
51
+ animation-duration: var(--transition-duration-normal);
52
+ animation-timing-function: var(--transition-easing);
53
+ will-change: transform, opacity;
54
+ }
55
+
56
+ .Item,
57
+ .SubTrigger,
58
+ .CheckboxItem,
59
+ .RadioItem {
60
+ all: unset;
61
+ font-family: var(--typography-font-family);
62
+ font-size: var(--menubar-item-font-size, var(--text-sm));
63
+ line-height: var(
64
+ --menubar-item-line-height,
65
+ var(--typography-line-height-none)
66
+ );
67
+ color: var(--menubar-item-text, var(--popover-text));
68
+ border-radius: var(--menubar-item-radius, var(--popover-radius));
69
+ display: flex;
70
+ align-items: center;
71
+ height: var(--menubar-item-height, --spacing(8));
72
+ padding: 0 var(--menubar-item-padding-x, --spacing(2.5));
73
+ position: relative;
74
+ user-select: none;
75
+
76
+ &[data-highlighted] {
77
+ background-color: var(--menubar-item-bg-active, var(--bg-active));
78
+ color: var(--menubar-item-text-active, var(--popover-text));
79
+ }
80
+
81
+ &[data-disabled] {
82
+ @mixin disabled;
83
+ }
84
+
85
+ &.Inset {
86
+ padding-left: var(--menubar-item-inset-padding, --spacing(6));
87
+ }
88
+ }
89
+
90
+ .CheckboxItem,
91
+ .RadioItem {
92
+ padding-left: var(--menubar-item-inset-padding, --spacing(6));
93
+ }
94
+
95
+ .Item[data-state='open'],
96
+ .SubTrigger[data-state='open'] {
97
+ background-color: var(--menubar-item-bg-active, var(--bg-active));
98
+ color: var(--menubar-item-text-active, var(--popover-text));
99
+ }
100
+
101
+ .ItemIndicator {
102
+ position: absolute;
103
+ left: 0;
104
+ width: var(--menubar-indicator-width, --spacing(5));
105
+ display: inline-flex;
106
+ align-items: center;
107
+ justify-content: center;
108
+ }
109
+
110
+ .Separator {
111
+ height: 1px;
112
+ background-color: var(--menubar-separator, var(--border-default));
113
+ margin: var(--menubar-separator-spacing, --spacing(1.5));
114
+ }
115
+
116
+ .RightSlot {
117
+ margin-left: auto;
118
+ padding-left: var(--menubar-right-slot-padding, --spacing(5));
119
+ color: var(--menubar-right-slot-text, var(--popover-text));
120
+ }
121
+
122
+ .Label {
123
+ font-weight: var(--heading-font-weight);
124
+ }
125
+
126
+ .Arrow {
127
+ fill: currentColor;
128
+ }
@@ -0,0 +1,86 @@
1
+ import React from 'react';
2
+ import { Command as CommandPrimitive } from 'cmdk';
3
+ type MultiSelectorProps = {
4
+ values: string[];
5
+ onValuesChange: (value: string[]) => void;
6
+ loop?: boolean;
7
+ } & React.ComponentPropsWithoutRef<typeof CommandPrimitive>;
8
+ declare const Root: {
9
+ ({ values: value, onValuesChange: onValueChange, loop, className, children, dir, ...props }: MultiSelectorProps): React.JSX.Element;
10
+ displayName: string;
11
+ };
12
+ declare const Trigger: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
13
+ declare const Input: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
14
+ ref?: React.Ref<HTMLInputElement>;
15
+ } & {
16
+ asChild?: boolean;
17
+ }, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
18
+ value?: string;
19
+ onValueChange?: (search: string) => void;
20
+ } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
21
+ declare const Content: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
22
+ declare const List: React.ForwardRefExoticComponent<Omit<{
23
+ children?: React.ReactNode;
24
+ } & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
25
+ ref?: React.Ref<HTMLDivElement>;
26
+ } & {
27
+ asChild?: boolean;
28
+ }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
29
+ label?: string;
30
+ } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
31
+ declare const Item: React.ForwardRefExoticComponent<{
32
+ value: string;
33
+ } & Omit<{
34
+ children?: React.ReactNode;
35
+ } & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
36
+ ref?: React.Ref<HTMLDivElement>;
37
+ } & {
38
+ asChild?: boolean;
39
+ }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
40
+ disabled?: boolean;
41
+ onSelect?: (value: string) => void;
42
+ value?: string;
43
+ keywords?: string[];
44
+ forceMount?: boolean;
45
+ } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
46
+ export declare const MultiSelect: {
47
+ Root: {
48
+ ({ values: value, onValuesChange: onValueChange, loop, className, children, dir, ...props }: MultiSelectorProps): React.JSX.Element;
49
+ displayName: string;
50
+ };
51
+ Trigger: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
52
+ Input: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
53
+ ref?: React.Ref<HTMLInputElement>;
54
+ } & {
55
+ asChild?: boolean;
56
+ }, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
57
+ value?: string;
58
+ onValueChange?: (search: string) => void;
59
+ } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
60
+ Content: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
61
+ List: React.ForwardRefExoticComponent<Omit<{
62
+ children?: React.ReactNode;
63
+ } & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
64
+ ref?: React.Ref<HTMLDivElement>;
65
+ } & {
66
+ asChild?: boolean;
67
+ }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
68
+ label?: string;
69
+ } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
70
+ Item: React.ForwardRefExoticComponent<{
71
+ value: string;
72
+ } & Omit<{
73
+ children?: React.ReactNode;
74
+ } & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
75
+ ref?: React.Ref<HTMLDivElement>;
76
+ } & {
77
+ asChild?: boolean;
78
+ }, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
79
+ disabled?: boolean;
80
+ onSelect?: (value: string) => void;
81
+ value?: string;
82
+ keywords?: string[];
83
+ forceMount?: boolean;
84
+ } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
85
+ };
86
+ export { Root, Trigger, Input, Content, List, Item };
@@ -0,0 +1,93 @@
1
+ @import './helpers/mixins.css';
2
+ @import '@_linked/css/package.css';
3
+
4
+ .Root {
5
+ display: flex;
6
+ flex-wrap: wrap;
7
+ gap: var(--multiselect-gap, --spacing(1));
8
+ padding: var(--multiselect-padding, --spacing(2));
9
+ border-color: var(--multiselect-border, var(--selector-border));
10
+ border-radius: var(--multiselect-radius, var(--selector-radius));
11
+
12
+ .button {
13
+ display: flex;
14
+ align-items: center;
15
+ gap: var(--multiselect-button-gap, --spacing(1));
16
+ height: var(--multiselect-button-height, 35px);
17
+ background-color: var(--multiselect-selected-bg, var(--control-accent));
18
+ color: var(--multiselect-selected-text, var(--control-text-contrast));
19
+ border-radius: var(--multiselect-selected-radius, var(--selector-radius));
20
+ padding: var(--multiselect-selected-padding-y, --spacing(1))
21
+ var(--multiselect-selected-padding-x, --spacing(2));
22
+ font-size: var(
23
+ --multiselect-selected-font-size,
24
+ var(--typography-small-size)
25
+ );
26
+ border: 1px solid var(--multiselect-selected-border, var(--control-accent));
27
+ }
28
+ }
29
+
30
+ .Command {
31
+ display: flex;
32
+ overflow: visible;
33
+ background-color: transparent;
34
+ flex-direction: column;
35
+ }
36
+
37
+ .isActive {
38
+ caret-color: transparent;
39
+ }
40
+
41
+ .Content {
42
+ position: relative;
43
+ }
44
+
45
+ .input {
46
+ margin-left: var(--multiselect-input-margin-left, --spacing(2));
47
+ padding: var(--multiselect-input-padding-y, --spacing(1))
48
+ var(--multiselect-input-padding-x, --spacing(2));
49
+ outline: none;
50
+ flex: 1 1 0%;
51
+ border: 0 solid transparent;
52
+ min-height: var(--multiselect-input-min-height, var(--field-height-sm));
53
+ }
54
+
55
+ .list {
56
+ display: flex;
57
+ flex-direction: column;
58
+ gap: var(--multiselect-list-gap, --spacing(1));
59
+ border-radius: var(--multiselect-list-radius, var(--selector-radius));
60
+ }
61
+
62
+ .Item {
63
+ border-radius: var(--multiselect-item-radius, var(--selector-radius));
64
+ transition: var(--transition-fast);
65
+ display: flex;
66
+ justify-content: space-between;
67
+
68
+ &:hover {
69
+ cursor: pointer;
70
+ }
71
+ }
72
+
73
+ .isIncluded {
74
+ opacity: 0.5;
75
+ cursor: default;
76
+ }
77
+
78
+ .isDisabled {
79
+ opacity: 0.5;
80
+ cursor: not-allowed;
81
+ }
82
+
83
+ .option {
84
+ font-size: var(--multiselect-option-font-size, var(--typography-small-size));
85
+ line-height: var(
86
+ --multiselect-option-line-height,
87
+ var(--typography-line-height-none)
88
+ );
89
+ }
90
+
91
+ .emptyResult {
92
+ color: var(--text-auxiliary);
93
+ }
@@ -0,0 +1,21 @@
1
+ import * as React from 'react';
2
+ import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
3
+ declare const List: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuListProps & React.RefAttributes<HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
4
+ declare const Link: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
5
+ declare const Item: React.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuItemProps & React.RefAttributes<HTMLLIElement>>;
6
+ declare const Trigger: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
7
+ declare const Content: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
8
+ declare const Viewport: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuViewportProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
9
+ declare const Indicator: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuIndicatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
10
+ declare const Root: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
11
+ export declare const NavigationMenu: {
12
+ Root: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
13
+ Trigger: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
14
+ Content: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
15
+ List: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuListProps & React.RefAttributes<HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
16
+ Item: React.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuItemProps & React.RefAttributes<HTMLLIElement>>;
17
+ Link: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
18
+ Indicator: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuIndicatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
19
+ Viewport: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuViewportProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
20
+ };
21
+ export { Root, Trigger, Content, List, Item, Link, Indicator, Viewport };