@_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.
- package/.changeset/README.md +20 -0
- package/.changeset/config.json +14 -0
- package/.github/workflows/changeset-check.yml +44 -0
- package/.github/workflows/ci.yml +30 -0
- package/.github/workflows/publish.yml +42 -0
- package/CHANGELOG.md +7 -0
- package/lib/cjs/backend.d.ts +0 -0
- package/lib/cjs/components/Accordion.d.ts +13 -0
- package/lib/cjs/components/Accordion.module.css +101 -0
- package/lib/cjs/components/AlertDialog.d.ts +37 -0
- package/lib/cjs/components/AlertDialog.module.css +80 -0
- package/lib/cjs/components/AspectRatio.d.ts +7 -0
- package/lib/cjs/components/AspectRatio.module.css +28 -0
- package/lib/cjs/components/Avatar.d.ts +11 -0
- package/lib/cjs/components/Avatar.module.css +43 -0
- package/lib/cjs/components/Breadcrumb.d.ts +41 -0
- package/lib/cjs/components/Breadcrumb.module.css +78 -0
- package/lib/cjs/components/Button.d.ts +9 -0
- package/lib/cjs/components/Button.module.css +246 -0
- package/lib/cjs/components/Checkbox.d.ts +4 -0
- package/lib/cjs/components/Checkbox.module.css +43 -0
- package/lib/cjs/components/Collapsible.d.ts +11 -0
- package/lib/cjs/components/Command.d.ts +167 -0
- package/lib/cjs/components/Command.module.css +153 -0
- package/lib/cjs/components/ContextMenu.d.ts +51 -0
- package/lib/cjs/components/ContextMenu.module.css +238 -0
- package/lib/cjs/components/Dialog.d.ts +38 -0
- package/lib/cjs/components/Dialog.module.css +109 -0
- package/lib/cjs/components/Drawer.d.ts +40 -0
- package/lib/cjs/components/Drawer.module.css +87 -0
- package/lib/cjs/components/DropdownMenu.d.ts +52 -0
- package/lib/cjs/components/DropdownMenu.module.css +244 -0
- package/lib/cjs/components/Form.d.ts +23 -0
- package/lib/cjs/components/Form.module.css +75 -0
- package/lib/cjs/components/Heading.d.ts +7 -0
- package/lib/cjs/components/Heading.module.css +83 -0
- package/lib/cjs/components/HoverCard.d.ts +15 -0
- package/lib/cjs/components/HoverCard.module.css +75 -0
- package/lib/cjs/components/IconButton.d.ts +9 -0
- package/lib/cjs/components/IconButton.module.css +150 -0
- package/lib/cjs/components/Input.d.ts +6 -0
- package/lib/cjs/components/Input.module.css +61 -0
- package/lib/cjs/components/Label.d.ts +4 -0
- package/lib/cjs/components/Label.module.css +7 -0
- package/lib/cjs/components/Menubar.d.ts +65 -0
- package/lib/cjs/components/Menubar.module.css +128 -0
- package/lib/cjs/components/MultiSelect.d.ts +86 -0
- package/lib/cjs/components/MultiSelect.module.css +93 -0
- package/lib/cjs/components/NavigationMenu.d.ts +21 -0
- package/lib/cjs/components/NavigationMenu.module.css +248 -0
- package/lib/cjs/components/Popover.d.ts +17 -0
- package/lib/cjs/components/Popover.module.css +106 -0
- package/lib/cjs/components/Progress.d.ts +9 -0
- package/lib/cjs/components/Progress.module.css +23 -0
- package/lib/cjs/components/RadioGroup.d.ts +9 -0
- package/lib/cjs/components/RadioGroup.module.css +57 -0
- package/lib/cjs/components/ScrollArea.d.ts +9 -0
- package/lib/cjs/components/ScrollArea.module.css +55 -0
- package/lib/cjs/components/Select.d.ts +28 -0
- package/lib/cjs/components/Select.module.css +153 -0
- package/lib/cjs/components/Separator.d.ts +4 -0
- package/lib/cjs/components/Separator.module.css +13 -0
- package/lib/cjs/components/Slider.d.ts +13 -0
- package/lib/cjs/components/Slider.module.css +43 -0
- package/lib/cjs/components/Spinner.d.ts +4 -0
- package/lib/cjs/components/Spinner.module.css +21 -0
- package/lib/cjs/components/Switch.d.ts +4 -0
- package/lib/cjs/components/Switch.module.css +52 -0
- package/lib/cjs/components/Tabs.d.ts +13 -0
- package/lib/cjs/components/Tabs.module.css +64 -0
- package/lib/cjs/components/Text.d.ts +8 -0
- package/lib/cjs/components/Text.module.css +24 -0
- package/lib/cjs/components/Textarea.d.ts +5 -0
- package/lib/cjs/components/Textarea.module.css +34 -0
- package/lib/cjs/components/Toast.d.ts +21 -0
- package/lib/cjs/components/Toast.module.css +133 -0
- package/lib/cjs/components/Toaster.d.ts +2 -0
- package/lib/cjs/components/Toggle.d.ts +7 -0
- package/lib/cjs/components/Toggle.module.css +32 -0
- package/lib/cjs/components/ToggleGroup.d.ts +9 -0
- package/lib/cjs/components/ToggleGroup.module.css +61 -0
- package/lib/cjs/components/Toolbar.d.ts +17 -0
- package/lib/cjs/components/Toolbar.module.css +113 -0
- package/lib/cjs/components/Tooltip.d.ts +15 -0
- package/lib/cjs/components/Tooltip.module.css +78 -0
- package/lib/cjs/components/Typography.d.ts +8 -0
- package/lib/cjs/components/Typography.module.css +25 -0
- package/lib/cjs/components/VisuallyHidden.d.ts +4 -0
- package/lib/cjs/components/helpers/mixins.css +15 -0
- package/lib/cjs/data/primitives.json +10 -0
- package/lib/cjs/hooks/use-toast.d.ts +44 -0
- package/lib/cjs/index.d.ts +45 -0
- package/lib/cjs/ontologies/primitives.d.ts +6 -0
- package/lib/cjs/package.d.ts +3 -0
- package/lib/cjs/package.json +85 -0
- package/lib/cjs/theme.css +3 -0
- package/lib/cjs/types.d.ts +12 -0
- package/lib/esm/backend.d.ts +0 -0
- package/lib/esm/components/Accordion.d.ts +13 -0
- package/lib/esm/components/Accordion.module.css +101 -0
- package/lib/esm/components/AlertDialog.d.ts +37 -0
- package/lib/esm/components/AlertDialog.module.css +80 -0
- package/lib/esm/components/AspectRatio.d.ts +7 -0
- package/lib/esm/components/AspectRatio.module.css +28 -0
- package/lib/esm/components/Avatar.d.ts +11 -0
- package/lib/esm/components/Avatar.module.css +43 -0
- package/lib/esm/components/Breadcrumb.d.ts +41 -0
- package/lib/esm/components/Breadcrumb.module.css +78 -0
- package/lib/esm/components/Button.d.ts +9 -0
- package/lib/esm/components/Button.module.css +246 -0
- package/lib/esm/components/Checkbox.d.ts +4 -0
- package/lib/esm/components/Checkbox.module.css +43 -0
- package/lib/esm/components/Collapsible.d.ts +11 -0
- package/lib/esm/components/Command.d.ts +167 -0
- package/lib/esm/components/Command.module.css +153 -0
- package/lib/esm/components/ContextMenu.d.ts +51 -0
- package/lib/esm/components/ContextMenu.module.css +238 -0
- package/lib/esm/components/Dialog.d.ts +38 -0
- package/lib/esm/components/Dialog.module.css +109 -0
- package/lib/esm/components/Drawer.d.ts +40 -0
- package/lib/esm/components/Drawer.module.css +87 -0
- package/lib/esm/components/DropdownMenu.d.ts +52 -0
- package/lib/esm/components/DropdownMenu.module.css +244 -0
- package/lib/esm/components/Form.d.ts +23 -0
- package/lib/esm/components/Form.module.css +75 -0
- package/lib/esm/components/Heading.d.ts +7 -0
- package/lib/esm/components/Heading.module.css +83 -0
- package/lib/esm/components/HoverCard.d.ts +15 -0
- package/lib/esm/components/HoverCard.module.css +75 -0
- package/lib/esm/components/IconButton.d.ts +9 -0
- package/lib/esm/components/IconButton.module.css +150 -0
- package/lib/esm/components/Input.d.ts +6 -0
- package/lib/esm/components/Input.module.css +61 -0
- package/lib/esm/components/Label.d.ts +4 -0
- package/lib/esm/components/Label.module.css +7 -0
- package/lib/esm/components/Menubar.d.ts +65 -0
- package/lib/esm/components/Menubar.module.css +128 -0
- package/lib/esm/components/MultiSelect.d.ts +86 -0
- package/lib/esm/components/MultiSelect.module.css +93 -0
- package/lib/esm/components/NavigationMenu.d.ts +21 -0
- package/lib/esm/components/NavigationMenu.module.css +248 -0
- package/lib/esm/components/Popover.d.ts +17 -0
- package/lib/esm/components/Popover.module.css +106 -0
- package/lib/esm/components/Progress.d.ts +9 -0
- package/lib/esm/components/Progress.module.css +23 -0
- package/lib/esm/components/RadioGroup.d.ts +9 -0
- package/lib/esm/components/RadioGroup.module.css +57 -0
- package/lib/esm/components/ScrollArea.d.ts +9 -0
- package/lib/esm/components/ScrollArea.module.css +55 -0
- package/lib/esm/components/Select.d.ts +28 -0
- package/lib/esm/components/Select.module.css +153 -0
- package/lib/esm/components/Separator.d.ts +4 -0
- package/lib/esm/components/Separator.module.css +13 -0
- package/lib/esm/components/Slider.d.ts +13 -0
- package/lib/esm/components/Slider.module.css +43 -0
- package/lib/esm/components/Spinner.d.ts +4 -0
- package/lib/esm/components/Spinner.module.css +21 -0
- package/lib/esm/components/Switch.d.ts +4 -0
- package/lib/esm/components/Switch.module.css +52 -0
- package/lib/esm/components/Tabs.d.ts +13 -0
- package/lib/esm/components/Tabs.module.css +64 -0
- package/lib/esm/components/Text.d.ts +8 -0
- package/lib/esm/components/Text.module.css +24 -0
- package/lib/esm/components/Textarea.d.ts +5 -0
- package/lib/esm/components/Textarea.module.css +34 -0
- package/lib/esm/components/Toast.d.ts +21 -0
- package/lib/esm/components/Toast.module.css +133 -0
- package/lib/esm/components/Toaster.d.ts +2 -0
- package/lib/esm/components/Toggle.d.ts +7 -0
- package/lib/esm/components/Toggle.module.css +32 -0
- package/lib/esm/components/ToggleGroup.d.ts +9 -0
- package/lib/esm/components/ToggleGroup.module.css +61 -0
- package/lib/esm/components/Toolbar.d.ts +17 -0
- package/lib/esm/components/Toolbar.module.css +113 -0
- package/lib/esm/components/Tooltip.d.ts +15 -0
- package/lib/esm/components/Tooltip.module.css +78 -0
- package/lib/esm/components/Typography.d.ts +8 -0
- package/lib/esm/components/Typography.module.css +25 -0
- package/lib/esm/components/VisuallyHidden.d.ts +4 -0
- package/lib/esm/components/helpers/mixins.css +15 -0
- package/lib/esm/data/primitives.json +10 -0
- package/lib/esm/hooks/use-toast.d.ts +44 -0
- package/lib/esm/index.d.ts +45 -0
- package/lib/esm/ontologies/primitives.d.ts +6 -0
- package/lib/esm/package.d.ts +3 -0
- package/lib/esm/package.json +85 -0
- package/lib/esm/theme.css +3 -0
- package/lib/esm/types.d.ts +12 -0
- package/package.json +103 -0
- package/tsconfig-cjs.json +8 -0
- 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,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 };
|