@lotte-innovate/ui-component-test 0.1.17 → 0.1.19
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +71 -71
- package/dist/globals.css +4 -4
- package/dist/lib/components/Accordion/index.d.ts +10 -4
- package/dist/lib/components/Accordion/index.js +17 -11
- package/dist/lib/components/AlertDialog/AlertDialogAction.js +4 -2
- package/dist/lib/components/AlertDialog/AlertDialogCancel.js +9 -5
- package/dist/lib/components/AlertDialog/AlertDialogContent.js +4 -2
- package/dist/lib/components/AlertDialog/AlertDialogDescription.js +4 -2
- package/dist/lib/components/AlertDialog/AlertDialogRoot.d.ts +16 -0
- package/dist/lib/components/AlertDialog/AlertDialogRoot.js +46 -0
- package/dist/lib/components/AlertDialog/AlertDialogTitle.js +4 -2
- package/dist/lib/components/AlertDialog/AlertDialogTrigger.js +2 -2
- package/dist/lib/components/AlertDialog/index.d.ts +10 -19
- package/dist/lib/components/AlertDialog/index.js +15 -35
- package/dist/lib/components/Avatar/index.d.ts +3 -0
- package/dist/lib/components/Avatar/index.js +3 -2
- package/dist/lib/components/BarChart/index.d.ts +5 -3
- package/dist/lib/components/BarChart/index.js +12 -1
- package/dist/lib/components/BubbleChart/index.d.ts +3 -0
- package/dist/lib/components/Callout/CalloutIcon.js +3 -3
- package/dist/lib/components/Callout/CalloutRoot.d.ts +18 -0
- package/dist/lib/components/Callout/CalloutRoot.js +72 -0
- package/dist/lib/components/Callout/CalloutText.js +2 -2
- package/dist/lib/components/Callout/index.d.ts +6 -19
- package/dist/lib/components/Callout/index.js +7 -73
- package/dist/lib/components/CheckboxGroup/CheckboxGroupItem.js +2 -2
- package/dist/lib/components/CheckboxGroup/CheckboxGroupRoot.d.ts +16 -0
- package/dist/lib/components/CheckboxGroup/CheckboxGroupRoot.js +34 -0
- package/dist/lib/components/CheckboxGroup/index.d.ts +5 -16
- package/dist/lib/components/CheckboxGroup/index.js +3 -34
- package/dist/lib/components/ContextMenu/ContextMenuCheckboxItem.d.ts +1 -1
- package/dist/lib/components/ContextMenu/ContextMenuCheckboxItem.js +4 -2
- package/dist/lib/components/ContextMenu/ContextMenuContent.js +2 -2
- package/dist/lib/components/ContextMenu/ContextMenuGroup.d.ts +1 -1
- package/dist/lib/components/ContextMenu/ContextMenuGroup.js +1 -1
- package/dist/lib/components/ContextMenu/ContextMenuItem.js +2 -2
- package/dist/lib/components/ContextMenu/ContextMenuItemIndicator.js +2 -2
- package/dist/lib/components/ContextMenu/ContextMenuLabel.js +2 -2
- package/dist/lib/components/ContextMenu/ContextMenuRadioGroup.js +1 -1
- package/dist/lib/components/ContextMenu/ContextMenuRadioItem.d.ts +1 -1
- package/dist/lib/components/ContextMenu/ContextMenuRadioItem.js +5 -2
- package/dist/lib/components/ContextMenu/ContextMenuRoot.d.ts +13 -0
- package/dist/lib/components/ContextMenu/ContextMenuRoot.js +42 -0
- package/dist/lib/components/ContextMenu/ContextMenuSeparator.js +1 -1
- package/dist/lib/components/ContextMenu/ContextMenuSubContent.js +4 -3
- package/dist/lib/components/ContextMenu/ContextMenuSubTrigger.js +2 -2
- package/dist/lib/components/ContextMenu/ContextMenuTrigger.d.ts +1 -1
- package/dist/lib/components/ContextMenu/ContextMenuTrigger.js +2 -2
- package/dist/lib/components/ContextMenu/index.d.ts +16 -24
- package/dist/lib/components/ContextMenu/index.js +27 -52
- package/dist/lib/components/DataList/DataListItem.js +2 -2
- package/dist/lib/components/DataList/DataListLabel.js +2 -2
- package/dist/lib/components/DataList/DataListRoot.d.ts +14 -0
- package/dist/lib/components/DataList/DataListRoot.js +54 -0
- package/dist/lib/components/DataList/DataListValue.js +2 -2
- package/dist/lib/components/DataList/index.d.ts +7 -16
- package/dist/lib/components/DataList/index.js +5 -56
- package/dist/lib/components/Dialog/DialogAction.d.ts +0 -2
- package/dist/lib/components/Dialog/DialogAction.js +7 -5
- package/dist/lib/components/Dialog/DialogCancel.js +5 -3
- package/dist/lib/components/Dialog/DialogContent.js +5 -3
- package/dist/lib/components/Dialog/DialogDescription.js +5 -3
- package/dist/lib/components/Dialog/DialogRoot.d.ts +12 -0
- package/dist/lib/components/Dialog/DialogRoot.js +37 -0
- package/dist/lib/components/Dialog/DialogSlot.js +5 -3
- package/dist/lib/components/Dialog/DialogTitle.js +5 -3
- package/dist/lib/components/Dialog/DialogTrigger.js +1 -1
- package/dist/lib/components/Dialog/index.d.ts +11 -17
- package/dist/lib/components/Dialog/index.js +17 -36
- package/dist/lib/components/DoughnutChart/index.js +9 -18
- package/dist/lib/components/DropdownMenu/DropdonMenuRadioGroup.d.ts +0 -5
- package/dist/lib/components/DropdownMenu/DropdonMenuRadioGroup.js +3 -4
- package/dist/lib/components/DropdownMenu/DropdonMenuSubContent.js +5 -3
- package/dist/lib/components/DropdownMenu/DropdownMenuCheckboxItem.d.ts +1 -1
- package/dist/lib/components/DropdownMenu/DropdownMenuCheckboxItem.js +7 -4
- package/dist/lib/components/DropdownMenu/DropdownMenuContent.js +5 -3
- package/dist/lib/components/DropdownMenu/DropdownMenuItem.d.ts +2 -0
- package/dist/lib/components/DropdownMenu/DropdownMenuItem.js +5 -3
- package/dist/lib/components/DropdownMenu/DropdownMenuItemIndicator.js +5 -3
- package/dist/lib/components/DropdownMenu/DropdownMenuLable.d.ts +0 -1
- package/dist/lib/components/DropdownMenu/DropdownMenuLable.js +5 -6
- package/dist/lib/components/DropdownMenu/DropdownMenuRadioItem.d.ts +4 -2
- package/dist/lib/components/DropdownMenu/DropdownMenuRadioItem.js +8 -6
- package/dist/lib/components/DropdownMenu/DropdownMenuRoot.d.ts +12 -0
- package/dist/lib/components/DropdownMenu/DropdownMenuRoot.js +38 -0
- package/dist/lib/components/DropdownMenu/DropdownMenuSeparator.js +1 -1
- package/dist/lib/components/DropdownMenu/DropdownMenuSub.js +1 -1
- package/dist/lib/components/DropdownMenu/DropdownMenuSubTrigger.js +5 -3
- package/dist/lib/components/DropdownMenu/DropdownMenuTrigger.d.ts +2 -1
- package/dist/lib/components/DropdownMenu/DropdownMenuTrigger.js +5 -3
- package/dist/lib/components/DropdownMenu/index.d.ts +16 -22
- package/dist/lib/components/DropdownMenu/index.js +27 -41
- package/dist/lib/components/HoverCard/HoverCardContent.js +5 -3
- package/dist/lib/components/HoverCard/HoverCardRoot.d.ts +8 -0
- package/dist/lib/components/HoverCard/HoverCardRoot.js +38 -0
- package/dist/lib/components/HoverCard/HoverCardTrigger.js +1 -1
- package/dist/lib/components/HoverCard/index.d.ts +6 -9
- package/dist/lib/components/HoverCard/index.js +7 -31
- package/dist/lib/components/LineChart/index.d.ts +87 -0
- package/dist/lib/components/LineChart/index.js +58 -0
- package/dist/lib/components/Menubar/MenubarCheckboxItem.js +2 -2
- package/dist/lib/components/Menubar/MenubarContent.js +2 -2
- package/dist/lib/components/Menubar/MenubarItem.js +2 -2
- package/dist/lib/components/Menubar/MenubarItemIndicator.js +2 -2
- package/dist/lib/components/Menubar/MenubarMenu.js +1 -1
- package/dist/lib/components/Menubar/MenubarRadioGroup.js +1 -1
- package/dist/lib/components/Menubar/MenubarRadioItem.js +2 -2
- package/dist/lib/components/Menubar/MenubarRoot.d.ts +19 -0
- package/dist/lib/components/Menubar/MenubarRoot.js +61 -0
- package/dist/lib/components/Menubar/MenubarSeparator.js +1 -1
- package/dist/lib/components/Menubar/MenubarSub.js +1 -1
- package/dist/lib/components/Menubar/MenubarSubContent.js +2 -2
- package/dist/lib/components/Menubar/MenubarSubTrigger.js +2 -2
- package/dist/lib/components/Menubar/MenubarTrigger.js +2 -2
- package/dist/lib/components/Menubar/index.d.ts +16 -30
- package/dist/lib/components/Menubar/index.js +27 -71
- package/dist/lib/components/NavigationMenu/NavigationMenuContent.js +2 -2
- package/dist/lib/components/NavigationMenu/NavigationMenuIndicator.js +1 -1
- package/dist/lib/components/NavigationMenu/NavigationMenuItem.js +1 -1
- package/dist/lib/components/NavigationMenu/NavigationMenuLink.js +2 -2
- package/dist/lib/components/NavigationMenu/NavigationMenuList.js +2 -2
- package/dist/lib/components/NavigationMenu/NavigationMenuRoot.d.ts +14 -0
- package/dist/lib/components/NavigationMenu/NavigationMenuRoot.js +43 -0
- package/dist/lib/components/NavigationMenu/NavigationMenuTrigger.js +2 -2
- package/dist/lib/components/NavigationMenu/NavigationMenuViewport.js +2 -2
- package/dist/lib/components/NavigationMenu/index.d.ts +11 -20
- package/dist/lib/components/NavigationMenu/index.js +9 -49
- package/dist/lib/components/PieChart/index.js +9 -18
- package/dist/lib/components/Popover/PopoverClose.js +5 -3
- package/dist/lib/components/Popover/PopoverContent.js +5 -3
- package/dist/lib/components/Popover/PopoverRoot.d.ts +9 -0
- package/dist/lib/components/Popover/PopoverRoot.js +36 -0
- package/dist/lib/components/Popover/PopoverTrigger.js +1 -1
- package/dist/lib/components/Popover/index.d.ts +7 -11
- package/dist/lib/components/Popover/index.js +9 -32
- package/dist/lib/components/RadioCards/RadioCardsItem.js +5 -3
- package/dist/lib/components/RadioCards/RadioCardsRoot.d.ts +14 -0
- package/dist/lib/components/RadioCards/RadioCardsRoot.js +46 -0
- package/dist/lib/components/RadioCards/index.d.ts +5 -13
- package/dist/lib/components/RadioCards/index.js +5 -41
- package/dist/lib/components/RadioGroup/RadioGroupItem.js +5 -3
- package/dist/lib/components/RadioGroup/RadioGroupRoot.d.ts +16 -0
- package/dist/lib/components/RadioGroup/RadioGroupRoot.js +53 -0
- package/dist/lib/components/RadioGroup/index.d.ts +5 -15
- package/dist/lib/components/RadioGroup/index.js +5 -49
- package/dist/lib/components/SegmentedControl/SegmentedControlItem.js +1 -1
- package/dist/lib/components/SegmentedControl/SegmentedControlRoot.d.ts +14 -0
- package/dist/lib/components/SegmentedControl/SegmentedControlRoot.js +47 -0
- package/dist/lib/components/SegmentedControl/index.d.ts +5 -14
- package/dist/lib/components/SegmentedControl/index.js +5 -46
- package/dist/lib/components/Select/index.d.ts +16 -7
- package/dist/lib/components/Select/index.js +23 -14
- package/dist/lib/components/TabNav/index.d.ts +6 -2
- package/dist/lib/components/TabNav/index.js +9 -5
- package/dist/lib/components/Table/index.d.ts +16 -7
- package/dist/lib/components/Table/index.js +23 -14
- package/dist/lib/components/Tabs/index.d.ts +10 -4
- package/dist/lib/components/Tabs/index.js +15 -9
- package/dist/lib/components/TextField/index.d.ts +6 -2
- package/dist/lib/components/TextField/index.js +8 -4
- package/dist/lib/components/Toast/ToastActionButton.js +2 -2
- package/dist/lib/components/Toast/ToastDescription.js +2 -2
- package/dist/lib/components/Toast/ToastRoot.d.ts +27 -0
- package/dist/lib/components/Toast/ToastRoot.js +90 -0
- package/dist/lib/components/Toast/ToastTitle.js +2 -2
- package/dist/lib/components/Toast/index.d.ts +7 -29
- package/dist/lib/components/Toast/index.js +9 -92
- package/dist/lib/components/ToggleGroup/{toggleGroupItem.js → ToggleGroupItem.js} +6 -4
- package/dist/lib/components/ToggleGroup/ToggleGroupRoot.d.ts +18 -0
- package/dist/lib/components/ToggleGroup/ToggleGroupRoot.js +47 -0
- package/dist/lib/components/ToggleGroup/index.d.ts +5 -19
- package/dist/lib/components/ToggleGroup/index.js +5 -41
- package/dist/lib/components/Tooltip/index.d.ts +3 -3
- package/dist/lib/components/Tooltip/index.js +3 -2
- package/dist/lib/components/index.d.ts +1 -0
- package/dist/lib/components/index.js +1 -0
- package/dist/lib/constants.d.ts +0 -9
- package/dist/lib/constants.js +0 -7
- package/package.json +131 -132
- /package/dist/lib/components/ToggleGroup/{toggleGroupItem.d.ts → ToggleGroupItem.d.ts} +0 -0
@@ -0,0 +1,87 @@
|
|
1
|
+
import { VariantProps } from 'class-variance-authority';
|
2
|
+
import { PointStyle } from '../../../lib/types';
|
3
|
+
export interface BorderRadius {
|
4
|
+
topLeft: number;
|
5
|
+
topRight: number;
|
6
|
+
bottomLeft: number;
|
7
|
+
bottomRight: number;
|
8
|
+
}
|
9
|
+
export interface LineChartProps extends VariantProps<typeof lineChartVariants> {
|
10
|
+
labels?: string[];
|
11
|
+
isColorMixed?: boolean;
|
12
|
+
appearance?: 'solid' | 'soft';
|
13
|
+
title?: {
|
14
|
+
text?: string | string[];
|
15
|
+
display?: boolean;
|
16
|
+
position?: 'top' | 'right' | 'bottom' | 'left';
|
17
|
+
align?: 'start' | 'center' | 'end';
|
18
|
+
font?: {
|
19
|
+
size?: number;
|
20
|
+
weight?: 'normal' | 'bold' | 'lighter' | 'bolder' | number;
|
21
|
+
lineHeight?: number;
|
22
|
+
};
|
23
|
+
};
|
24
|
+
legend?: {
|
25
|
+
display?: boolean;
|
26
|
+
align?: 'start' | 'center' | 'end';
|
27
|
+
position?: 'top' | 'right' | 'bottom' | 'left';
|
28
|
+
maxHeight?: number;
|
29
|
+
maxWidth?: number;
|
30
|
+
fullSize?: boolean;
|
31
|
+
reverse?: boolean;
|
32
|
+
labels?: {
|
33
|
+
boxWidth?: number;
|
34
|
+
boxHeight?: number;
|
35
|
+
padding?: number;
|
36
|
+
textAlign?: 'left' | 'right' | 'center';
|
37
|
+
color?: string;
|
38
|
+
usePointStyle?: boolean;
|
39
|
+
pointStyleWidth?: number;
|
40
|
+
useBorderRadius?: boolean;
|
41
|
+
borderRadius?: number;
|
42
|
+
};
|
43
|
+
rtl?: boolean;
|
44
|
+
textDirection?: 'rtl' | 'ltr';
|
45
|
+
title?: {
|
46
|
+
color?: string;
|
47
|
+
display?: boolean;
|
48
|
+
padding?: number;
|
49
|
+
text?: string;
|
50
|
+
};
|
51
|
+
};
|
52
|
+
datasets: {
|
53
|
+
label: string;
|
54
|
+
data: any;
|
55
|
+
backgroundColor?: string | string[];
|
56
|
+
borderColor?: string | string[];
|
57
|
+
borderWidth?: number;
|
58
|
+
hoverBackgroundColor?: string;
|
59
|
+
hoverBorderColor?: string;
|
60
|
+
hoverBorderWidth?: number;
|
61
|
+
pointStyle?: PointStyle;
|
62
|
+
barThickness?: number;
|
63
|
+
barPercentage?: number;
|
64
|
+
}[];
|
65
|
+
scales?: {
|
66
|
+
x?: {
|
67
|
+
min?: number;
|
68
|
+
max?: number;
|
69
|
+
};
|
70
|
+
y?: {
|
71
|
+
min?: number;
|
72
|
+
max?: number;
|
73
|
+
};
|
74
|
+
};
|
75
|
+
indexAxis?: 'x' | 'y';
|
76
|
+
className?: string;
|
77
|
+
width?: string | number;
|
78
|
+
height?: string | number;
|
79
|
+
}
|
80
|
+
declare const lineChartVariants: (props?: ({
|
81
|
+
scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
|
82
|
+
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
83
|
+
export declare const LineChart: {
|
84
|
+
({ className, title, datasets, labels, scaling, legend, width, height, indexAxis, appearance, scales, isColorMixed, ...props }: LineChartProps): import("react/jsx-runtime").JSX.Element;
|
85
|
+
displayName: string;
|
86
|
+
};
|
87
|
+
export {};
|
@@ -0,0 +1,58 @@
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
2
|
+
__assign = Object.assign || function(t) {
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
+
s = arguments[i];
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
+
t[p] = s[p];
|
7
|
+
}
|
8
|
+
return t;
|
9
|
+
};
|
10
|
+
return __assign.apply(this, arguments);
|
11
|
+
};
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
13
|
+
var t = {};
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
15
|
+
t[p] = s[p];
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
19
|
+
t[p[i]] = s[p[i]];
|
20
|
+
}
|
21
|
+
return t;
|
22
|
+
};
|
23
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
24
|
+
import { Line } from 'react-chartjs-2';
|
25
|
+
import { Chart as ChartJS, CategoryScale, LinearScale, Tooltip, Legend, LineElement, PointElement, } from 'chart.js/auto';
|
26
|
+
import { scalingVariants } from '../../../lib/constants';
|
27
|
+
import { cva } from 'class-variance-authority';
|
28
|
+
import { cn } from '../../../lib/utils/utils';
|
29
|
+
import { chartAlphaColorList, chartColorList } from '../../../lib/color/constants';
|
30
|
+
ChartJS.register(CategoryScale, LinearScale, LineElement, PointElement, Tooltip, Legend);
|
31
|
+
var lineChartVariants = cva('', {
|
32
|
+
variants: {
|
33
|
+
scaling: __assign({}, scalingVariants),
|
34
|
+
},
|
35
|
+
defaultVariants: {
|
36
|
+
scaling: '100%',
|
37
|
+
},
|
38
|
+
});
|
39
|
+
export var LineChart = function (_a) {
|
40
|
+
var className = _a.className, title = _a.title, datasets = _a.datasets, labels = _a.labels, scaling = _a.scaling, legend = _a.legend, width = _a.width, height = _a.height, indexAxis = _a.indexAxis, _b = _a.appearance, appearance = _b === void 0 ? 'solid' : _b, scales = _a.scales, _c = _a.isColorMixed, isColorMixed = _c === void 0 ? true : _c, props = __rest(_a, ["className", "title", "datasets", "labels", "scaling", "legend", "width", "height", "indexAxis", "appearance", "scales", "isColorMixed"]);
|
41
|
+
var colorset = isColorMixed ? chartColorList.mixed : chartColorList.sorting;
|
42
|
+
var colorAlphaset = isColorMixed ? chartAlphaColorList.mixed : chartAlphaColorList.sorting;
|
43
|
+
datasets.forEach(function (dataset, index) {
|
44
|
+
var _a, _b;
|
45
|
+
datasets[index] = __assign(__assign({}, dataset), { borderColor: (_a = dataset.borderColor) !== null && _a !== void 0 ? _a : colorset[index % colorset.length], backgroundColor: ((_b = dataset.backgroundColor) !== null && _b !== void 0 ? _b : appearance == 'solid')
|
46
|
+
? colorset[index % colorset.length]
|
47
|
+
: colorAlphaset[index % colorset.length] });
|
48
|
+
});
|
49
|
+
return (_jsx(Line, __assign({ data: { labels: labels, datasets: datasets }, options: {
|
50
|
+
plugins: {
|
51
|
+
title: title,
|
52
|
+
legend: legend,
|
53
|
+
},
|
54
|
+
indexAxis: indexAxis,
|
55
|
+
scales: scales,
|
56
|
+
}, className: cn(lineChartVariants({ scaling: scaling }), className), width: width, height: height }, props)));
|
57
|
+
};
|
58
|
+
LineChart.displayName = 'LineChart';
|
@@ -28,11 +28,11 @@ import { cn } from '../../../lib/utils/utils';
|
|
28
28
|
import { menubarItemVariants } from './MenubarItem';
|
29
29
|
import { MenubarItemIndicator } from './MenubarItemIndicator';
|
30
30
|
import { menuItemAppearanceStyle } from '../../../lib/constants';
|
31
|
-
import { useMenubarContext } from '
|
31
|
+
import { useMenubarContext } from './MenubarRoot';
|
32
32
|
export var MenubarCheckboxItem = forwardRef(function (_a, ref) {
|
33
33
|
var children = _a.children, className = _a.className, checked = _a.checked, props = __rest(_a, ["children", "className", "checked"]);
|
34
34
|
var _b = useMenubarContext(), radius = _b.radius, scaling = _b.scaling, size = _b.size, _c = _b.color, color = _c === void 0 ? 'red' : _c, _d = _b.itemAppearance, itemAppearance = _d === void 0 ? 'solid' : _d;
|
35
35
|
var itemClassName = cn(menubarItemVariants({ radius: radius, scaling: scaling, size: size }), 'pl-7', menuItemAppearanceStyle(itemAppearance, color), className);
|
36
36
|
return (_jsxs(MenubarPrimitive.CheckboxItem, __assign({ ref: ref, className: itemClassName }, props, { children: [_jsx(MenubarItemIndicator, { forceMount: true, radius: 'medium', size: size, children: checked && _jsx(CheckIcon, {}) }), children] })));
|
37
37
|
});
|
38
|
-
MenubarCheckboxItem.displayName = '
|
38
|
+
MenubarCheckboxItem.displayName = 'Menubar.CheckboxItem';
|
@@ -26,7 +26,7 @@ import * as MenubarPrimitive from '@radix-ui/react-menubar';
|
|
26
26
|
import { cva } from 'class-variance-authority';
|
27
27
|
import { cn } from '../../../lib/utils/utils';
|
28
28
|
import { scalingVariants } from '../../../lib/constants';
|
29
|
-
import { useMenubarContext } from '
|
29
|
+
import { useMenubarContext } from './MenubarRoot';
|
30
30
|
export var menubarContentVariants = cva("p-[5px] w-fit bg-white dark:bg-slateDark-1 will-change-[transform,opacity]\n shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] \n [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)]", {
|
31
31
|
variants: {
|
32
32
|
radius: {
|
@@ -57,4 +57,4 @@ export var MenubarContent = forwardRef(function (_a, ref) {
|
|
57
57
|
scaling: scaling,
|
58
58
|
}), className), align: "start", sideOffset: 5, alignOffset: -3 }, props, { children: children })) }));
|
59
59
|
});
|
60
|
-
MenubarContent.displayName = '
|
60
|
+
MenubarContent.displayName = 'Menubar.Content';
|
@@ -26,7 +26,7 @@ import * as MenubarPrimitive from '@radix-ui/react-menubar';
|
|
26
26
|
import { cva } from 'class-variance-authority';
|
27
27
|
import { cn } from '../../../lib/utils/utils';
|
28
28
|
import { blackText, menuItemAppearanceStyle, radiusVariants, scalingVariants } from '../../../lib/constants';
|
29
|
-
import { useMenubarContext } from '
|
29
|
+
import { useMenubarContext } from './MenubarRoot';
|
30
30
|
export var menubarItemVariants = cva("flex group relative leading-none select-none outline-none items-center justify-between font-normal\n data-[disabled]:text-slate-8 data-[disabled]:cursor-not-allowed text-slate-12 dark:text-slateDark-12\n data-[disabled]:hover:bg-transparent dark:data-[disabled]:text-slateDark-8 data-[disabled]:dark:hover:bg-transparent", {
|
31
31
|
variants: {
|
32
32
|
radius: __assign({}, radiusVariants['menu-item']),
|
@@ -51,4 +51,4 @@ export var MenubarItem = forwardRef(function (_a, ref) {
|
|
51
51
|
: '');
|
52
52
|
return (_jsxs(MenubarPrimitive.Item, __assign({ ref: ref, className: itemClassName }, props, { children: [children, shortcut && _jsx("span", { className: shortcutClassName, children: shortcut })] })));
|
53
53
|
});
|
54
|
-
MenubarItem.displayName = '
|
54
|
+
MenubarItem.displayName = 'Menubar.Item';
|
@@ -26,7 +26,7 @@ import * as MenubarPrimitive from '@radix-ui/react-menubar';
|
|
26
26
|
import { cn } from '../../../lib/utils/utils';
|
27
27
|
import { cva } from 'class-variance-authority';
|
28
28
|
import { radiusVariants } from '../../../lib/constants';
|
29
|
-
import { useMenubarContext } from '
|
29
|
+
import { useMenubarContext } from './MenubarRoot';
|
30
30
|
export var menubarItemIndicatorVariants = cva("absolute left-0 inline-flex items-center justify-center ml-1 border", {
|
31
31
|
variants: {
|
32
32
|
radius: __assign({}, radiusVariants['base']),
|
@@ -46,4 +46,4 @@ export var MenubarItemIndicator = forwardRef(function (_a, ref) {
|
|
46
46
|
var indicatorClassName = cn(menubarItemIndicatorVariants({ size: size, radius: radius }), className);
|
47
47
|
return (_jsx(MenubarPrimitive.ItemIndicator, __assign({ ref: ref, className: indicatorClassName }, props, { children: children })));
|
48
48
|
});
|
49
|
-
MenubarItemIndicator.displayName = '
|
49
|
+
MenubarItemIndicator.displayName = 'Menubar.ItemIndicator';
|
@@ -27,4 +27,4 @@ export var MenubarMenu = forwardRef(function (_a, ref) {
|
|
27
27
|
var children = _a.children, props = __rest(_a, ["children"]);
|
28
28
|
return _jsx(MenubarPrimitive.Menu, __assign({}, props, { children: children }));
|
29
29
|
});
|
30
|
-
MenubarMenu.displayName = '
|
30
|
+
MenubarMenu.displayName = 'Menubar.Menu';
|
@@ -28,4 +28,4 @@ export var MenubarRadioGroup = forwardRef(function (_a, ref) {
|
|
28
28
|
var children = _a.children, className = _a.className, value = _a.value, props = __rest(_a, ["children", "className", "value"]);
|
29
29
|
return (_jsx(MenubarPrimitive.RadioGroup, __assign({ ref: ref, className: className }, props, { children: _jsx(RadioContext.Provider, { value: { selectedValue: value !== null && value !== void 0 ? value : '' }, children: children }) })));
|
30
30
|
});
|
31
|
-
MenubarRadioGroup.displayName = '
|
31
|
+
MenubarRadioGroup.displayName = 'Menubar.RadioGroup';
|
@@ -29,7 +29,7 @@ import { menuItemAppearanceStyle } from '../../../lib/constants';
|
|
29
29
|
import { menubarItemVariants } from './MenubarItem';
|
30
30
|
import { MenubarItemIndicator } from './MenubarItemIndicator';
|
31
31
|
import { RadioContext } from './MenubarRadioGroup';
|
32
|
-
import { useMenubarContext } from '
|
32
|
+
import { useMenubarContext } from './MenubarRoot';
|
33
33
|
export var MenubarRadioItem = forwardRef(function (_a, ref) {
|
34
34
|
var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
|
35
35
|
var _b = useMenubarContext(), radius = _b.radius, scaling = _b.scaling, size = _b.size, _c = _b.color, color = _c === void 0 ? 'red' : _c, _d = _b.itemAppearance, itemAppearance = _d === void 0 ? 'solid' : _d;
|
@@ -37,4 +37,4 @@ export var MenubarRadioItem = forwardRef(function (_a, ref) {
|
|
37
37
|
var radioGroup = useContext(RadioContext);
|
38
38
|
return (_jsxs(MenubarPrimitive.RadioItem, __assign({ ref: ref, className: itemClassName }, props, { children: [_jsx(MenubarItemIndicator, { forceMount: true, radius: 'full', size: size, children: radioGroup.selectedValue === props.value && _jsx(DotFilledIcon, {}) }), children] })));
|
39
39
|
});
|
40
|
-
MenubarRadioItem.displayName = '
|
40
|
+
MenubarRadioItem.displayName = 'Menubar.RadioItem';
|
@@ -0,0 +1,19 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import * as MenubarPrimitive from '@radix-ui/react-menubar';
|
3
|
+
import { VariantProps } from 'class-variance-authority';
|
4
|
+
import { IColor } from '../../../lib/types';
|
5
|
+
import { menubarTriggerVariants } from './MenubarTrigger';
|
6
|
+
import { menubarItemVariants } from './MenubarItem';
|
7
|
+
export interface MenubarProps extends VariantProps<typeof menubarVariants>, VariantProps<typeof menubarTriggerVariants>, VariantProps<typeof menubarItemVariants> {
|
8
|
+
appearance?: 'ghost' | 'solid';
|
9
|
+
itemAppearance?: 'ghost' | 'solid';
|
10
|
+
color?: IColor;
|
11
|
+
}
|
12
|
+
export declare const menubarVariants: (props?: ({
|
13
|
+
radius?: "small" | "none" | "medium" | "large" | "full" | null | undefined;
|
14
|
+
size?: "small" | "medium" | null | undefined;
|
15
|
+
scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
|
16
|
+
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
17
|
+
export declare const useMenubarContext: () => MenubarProps;
|
18
|
+
export declare const MenubarRoot: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarProps & React.RefAttributes<HTMLDivElement>, "ref"> & MenubarProps & React.RefAttributes<HTMLDivElement>>;
|
19
|
+
export default MenubarRoot;
|
@@ -0,0 +1,61 @@
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
2
|
+
__assign = Object.assign || function(t) {
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
+
s = arguments[i];
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
+
t[p] = s[p];
|
7
|
+
}
|
8
|
+
return t;
|
9
|
+
};
|
10
|
+
return __assign.apply(this, arguments);
|
11
|
+
};
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
13
|
+
var t = {};
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
15
|
+
t[p] = s[p];
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
19
|
+
t[p[i]] = s[p[i]];
|
20
|
+
}
|
21
|
+
return t;
|
22
|
+
};
|
23
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
24
|
+
import { createContext, forwardRef, useContext, useMemo, } from 'react';
|
25
|
+
import * as MenubarPrimitive from '@radix-ui/react-menubar';
|
26
|
+
import { cva } from 'class-variance-authority';
|
27
|
+
import { cn } from '../../../lib/utils/utils';
|
28
|
+
import { radiusVariants, scalingVariants } from '../../../lib/constants';
|
29
|
+
export var menubarVariants = cva('flex p-1 shadow bg-white dark:bg-slateDark-1', {
|
30
|
+
variants: {
|
31
|
+
radius: __assign({}, radiusVariants['base']),
|
32
|
+
size: {
|
33
|
+
small: 'text-xs',
|
34
|
+
medium: 'text-sm',
|
35
|
+
},
|
36
|
+
scaling: __assign({}, scalingVariants),
|
37
|
+
},
|
38
|
+
defaultVariants: {
|
39
|
+
radius: 'small',
|
40
|
+
size: 'medium',
|
41
|
+
},
|
42
|
+
});
|
43
|
+
var MenubarContext = createContext({
|
44
|
+
radius: 'medium',
|
45
|
+
scaling: '100%',
|
46
|
+
size: 'medium',
|
47
|
+
color: 'red',
|
48
|
+
appearance: 'ghost',
|
49
|
+
itemAppearance: 'solid',
|
50
|
+
});
|
51
|
+
export var useMenubarContext = function () {
|
52
|
+
return useContext(MenubarContext);
|
53
|
+
};
|
54
|
+
export var MenubarRoot = forwardRef(function (_a, ref) {
|
55
|
+
var children = _a.children, className = _a.className, radius = _a.radius, scaling = _a.scaling, size = _a.size, _b = _a.color, color = _b === void 0 ? 'red' : _b, _c = _a.appearance, appearance = _c === void 0 ? 'ghost' : _c, _d = _a.itemAppearance, itemAppearance = _d === void 0 ? 'solid' : _d, props = __rest(_a, ["children", "className", "radius", "scaling", "size", "color", "appearance", "itemAppearance"]);
|
56
|
+
var contextValue = useMemo(function () { return ({ radius: radius, size: size, scaling: scaling, color: color, appearance: appearance, itemAppearance: itemAppearance }); }, [radius, size, scaling, color, appearance, itemAppearance]);
|
57
|
+
var menuClassName = cn(menubarVariants({ radius: radius, scaling: scaling, size: size }), appearance === 'solid' && "bg-".concat(color, "-9 dark:bg-$").concat(color, "Dark-9"), 'w-fit', className);
|
58
|
+
return (_jsx(MenubarContext.Provider, { value: contextValue, children: _jsx(MenubarPrimitive.Root, __assign({ ref: ref, className: menuClassName }, props, { children: children })) }));
|
59
|
+
});
|
60
|
+
MenubarRoot.displayName = 'Menubar.Root';
|
61
|
+
export default MenubarRoot;
|
@@ -28,4 +28,4 @@ export var MenubarSeparator = forwardRef(function (_a, ref) {
|
|
28
28
|
var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
|
29
29
|
return (_jsx(MenubarPrimitive.Separator, __assign({ ref: ref, className: cn('h-[1px] m-[5px] bg-slate-6 dark:bg-slateDark-6', className) }, props, { children: children })));
|
30
30
|
});
|
31
|
-
MenubarSeparator.displayName = '
|
31
|
+
MenubarSeparator.displayName = 'Menubar.Separator';
|
@@ -27,4 +27,4 @@ export var MenubarSub = forwardRef(function (_a, ref) {
|
|
27
27
|
var children = _a.children, props = __rest(_a, ["children"]);
|
28
28
|
return _jsx(MenubarPrimitive.Sub, __assign({}, props, { children: children }));
|
29
29
|
});
|
30
|
-
MenubarSub.displayName = '
|
30
|
+
MenubarSub.displayName = 'Menubar.Sub';
|
@@ -26,7 +26,7 @@ import * as MenubarPrimitive from '@radix-ui/react-menubar';
|
|
26
26
|
import { cva } from 'class-variance-authority';
|
27
27
|
import { cn } from '../../../lib/utils/utils';
|
28
28
|
import { radiusVariants } from '../../../lib/constants';
|
29
|
-
import { useMenubarContext } from '
|
29
|
+
import { useMenubarContext } from './MenubarRoot';
|
30
30
|
export var menubarSubContentVariants = cva("p-[5px] w-fit bg-white dark:bg-slateDark-1 will-change-[transform,opacity]\n shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] \n [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)]", {
|
31
31
|
variants: {
|
32
32
|
radius: __assign({}, radiusVariants['extra-large']),
|
@@ -48,4 +48,4 @@ export var MenubarSubContent = forwardRef(function (_a, ref) {
|
|
48
48
|
size: size,
|
49
49
|
}), className), alignOffset: -5 }, props, { children: children })));
|
50
50
|
});
|
51
|
-
MenubarSubContent.displayName = '
|
51
|
+
MenubarSubContent.displayName = 'Menubar.SubContent';
|
@@ -27,7 +27,7 @@ import { ChevronRightIcon } from '@radix-ui/react-icons';
|
|
27
27
|
import { cn } from '../../../lib/utils/utils';
|
28
28
|
import { blackText, menuItemAppearanceStyle } from '../../../lib/constants';
|
29
29
|
import { menubarItemVariants } from './MenubarItem';
|
30
|
-
import { useMenubarContext } from '
|
30
|
+
import { useMenubarContext } from './MenubarRoot';
|
31
31
|
export var MenubarSubTrigger = forwardRef(function (_a, ref) {
|
32
32
|
var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
|
33
33
|
var _b = useMenubarContext(), scaling = _b.scaling, size = _b.size, radius = _b.radius, _c = _b.color, color = _c === void 0 ? 'red' : _c, _d = _b.itemAppearance, itemAppearance = _d === void 0 ? 'solid' : _d;
|
@@ -38,4 +38,4 @@ export var MenubarSubTrigger = forwardRef(function (_a, ref) {
|
|
38
38
|
}
|
39
39
|
return (_jsxs(MenubarPrimitive.SubTrigger, __assign({ ref: ref, className: triggerClassName }, props, { children: [children, _jsx("div", { className: iconClassName, children: _jsx(ChevronRightIcon, {}) })] })));
|
40
40
|
});
|
41
|
-
MenubarSubTrigger.displayName = '
|
41
|
+
MenubarSubTrigger.displayName = 'Menubar.SubTrigger';
|
@@ -26,7 +26,7 @@ import * as MenubarPrimitive from '@radix-ui/react-menubar';
|
|
26
26
|
import { cva } from 'class-variance-authority';
|
27
27
|
import { cn } from '../../../lib/utils/utils';
|
28
28
|
import { appearanceStyle, scalingVariants } from '../../../lib/constants';
|
29
|
-
import { useMenubarContext } from '
|
29
|
+
import { useMenubarContext } from './MenubarRoot';
|
30
30
|
export var menubarTriggerVariants = cva("flex items-center justify-between gap-[2px] outline-none select-none leading-none py-1 px-3 font-medium", {
|
31
31
|
variants: {
|
32
32
|
size: {
|
@@ -54,4 +54,4 @@ export var MenubarTrigger = forwardRef(function (_a, ref) {
|
|
54
54
|
var triggerClassName = cn(menubarTriggerVariants({ scaling: scaling, size: size, radius: radius }), appearanceStyle(appearance, color), className);
|
55
55
|
return (_jsx(MenubarPrimitive.Trigger, __assign({ ref: ref, className: triggerClassName }, props, { children: children })));
|
56
56
|
});
|
57
|
-
MenubarTrigger.displayName = '
|
57
|
+
MenubarTrigger.displayName = 'Menubar.Trigger';
|
@@ -1,31 +1,17 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
import
|
4
|
-
import
|
5
|
-
import
|
6
|
-
import
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
export * from './MenubarRadioGroup';
|
18
|
-
export * from './MenubarRadioItem';
|
19
|
-
export interface MenubarProps extends VariantProps<typeof menubarVariants>, VariantProps<typeof menubarTriggerVariants>, VariantProps<typeof menubarItemVariants> {
|
20
|
-
appearance?: 'ghost' | 'solid';
|
21
|
-
itemAppearance?: 'ghost' | 'solid';
|
22
|
-
color?: IColor;
|
23
|
-
}
|
24
|
-
export declare const menubarVariants: (props?: ({
|
25
|
-
radius?: "small" | "none" | "medium" | "large" | "full" | null | undefined;
|
26
|
-
size?: "small" | "medium" | null | undefined;
|
27
|
-
scaling?: "90%" | "95%" | "100%" | "105%" | "110%" | null | undefined;
|
28
|
-
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
29
|
-
export declare const useMenubarContext: () => MenubarProps;
|
30
|
-
export declare const Menubar: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarProps & React.RefAttributes<HTMLDivElement>, "ref"> & MenubarProps & React.RefAttributes<HTMLDivElement>>;
|
1
|
+
/// <reference types="react" />
|
2
|
+
declare const Menubar: {
|
3
|
+
Root: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-menubar").MenubarProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("./MenubarRoot").MenubarProps & import("react").RefAttributes<HTMLDivElement>>;
|
4
|
+
Menu: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<never>>;
|
5
|
+
Trigger: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-menubar").MenubarTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("./MenubarTrigger").MenubarTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
|
6
|
+
Content: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-menubar").MenubarContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("./MenubarContent").MenubarContentProps & import("react").RefAttributes<HTMLDivElement>>;
|
7
|
+
Item: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-menubar").MenubarItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("./MenubarItem").MenubarItemProps & import("react").RefAttributes<HTMLDivElement>>;
|
8
|
+
Separator: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-menubar").MenubarSeparatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
9
|
+
Sub: import("react").ForwardRefExoticComponent<import("@radix-ui/react-menubar").MenubarSubProps & import("react").RefAttributes<never>>;
|
10
|
+
SubTrigger: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-menubar").MenubarSubTriggerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("./MenubarItem").MenubarItemProps & import("react").RefAttributes<HTMLDivElement>>;
|
11
|
+
SubContent: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-menubar").MenubarSubContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("./MenubarSubContent").MenubarSubContentProps & import("react").RefAttributes<HTMLDivElement>>;
|
12
|
+
CheckboxItem: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-menubar").MenubarCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("./MenubarItem").MenubarItemProps & import("react").RefAttributes<HTMLDivElement>>;
|
13
|
+
ItemIndicator: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-menubar").MenubarItemIndicatorProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("./MenubarItemIndicator").MenubarItemIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
|
14
|
+
RadioGroup: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-menubar").MenubarRadioGroupProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
15
|
+
RadioItem: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-menubar").MenubarRadioItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("./MenubarItem").MenubarItemProps & import("react").RefAttributes<HTMLDivElement>>;
|
16
|
+
};
|
31
17
|
export default Menubar;
|
@@ -1,73 +1,29 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
1
|
+
import { MenubarRoot as Root } from './MenubarRoot';
|
2
|
+
import { MenubarMenu as Menu } from './MenubarMenu';
|
3
|
+
import { MenubarTrigger as Trigger } from './MenubarTrigger';
|
4
|
+
import { MenubarContent as Content } from './MenubarContent';
|
5
|
+
import { MenubarItem as Item } from './MenubarItem';
|
6
|
+
import { MenubarSeparator as Separator } from './MenubarSeparator';
|
7
|
+
import { MenubarSub as Sub } from './MenubarSub';
|
8
|
+
import { MenubarSubTrigger as SubTrigger } from './MenubarSubTrigger';
|
9
|
+
import { MenubarSubContent as SubContent } from './MenubarSubContent';
|
10
|
+
import { MenubarCheckboxItem as CheckboxItem } from './MenubarCheckboxItem';
|
11
|
+
import { MenubarItemIndicator as ItemIndicator } from './MenubarItemIndicator';
|
12
|
+
import { MenubarRadioGroup as RadioGroup } from './MenubarRadioGroup';
|
13
|
+
import { MenubarRadioItem as RadioItem } from './MenubarRadioItem';
|
14
|
+
var Menubar = {
|
15
|
+
Root: Root,
|
16
|
+
Menu: Menu,
|
17
|
+
Trigger: Trigger,
|
18
|
+
Content: Content,
|
19
|
+
Item: Item,
|
20
|
+
Separator: Separator,
|
21
|
+
Sub: Sub,
|
22
|
+
SubTrigger: SubTrigger,
|
23
|
+
SubContent: SubContent,
|
24
|
+
CheckboxItem: CheckboxItem,
|
25
|
+
ItemIndicator: ItemIndicator,
|
26
|
+
RadioGroup: RadioGroup,
|
27
|
+
RadioItem: RadioItem,
|
11
28
|
};
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
13
|
-
var t = {};
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
15
|
-
t[p] = s[p];
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
19
|
-
t[p[i]] = s[p[i]];
|
20
|
-
}
|
21
|
-
return t;
|
22
|
-
};
|
23
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
24
|
-
import { createContext, forwardRef, useContext, } from 'react';
|
25
|
-
import * as MenubarPrimitive from '@radix-ui/react-menubar';
|
26
|
-
import { cva } from 'class-variance-authority';
|
27
|
-
import { cn } from '../../../lib/utils/utils';
|
28
|
-
import { radiusVariants, scalingVariants } from '../../../lib/constants';
|
29
|
-
export * from './MenubarMenu';
|
30
|
-
export * from './MenubarTrigger';
|
31
|
-
export * from './MenubarContent';
|
32
|
-
export * from './MenubarItem';
|
33
|
-
export * from './MenubarSeparator';
|
34
|
-
export * from './MenubarSub';
|
35
|
-
export * from './MenubarSubTrigger';
|
36
|
-
export * from './MenubarSubContent';
|
37
|
-
export * from './MenubarCheckboxItem';
|
38
|
-
export * from './MenubarItemIndicator';
|
39
|
-
export * from './MenubarRadioGroup';
|
40
|
-
export * from './MenubarRadioItem';
|
41
|
-
export var menubarVariants = cva('flex p-1 shadow bg-white dark:bg-slateDark-1', {
|
42
|
-
variants: {
|
43
|
-
radius: __assign({}, radiusVariants['base']),
|
44
|
-
size: {
|
45
|
-
small: 'text-xs',
|
46
|
-
medium: 'text-sm',
|
47
|
-
},
|
48
|
-
scaling: __assign({}, scalingVariants),
|
49
|
-
},
|
50
|
-
defaultVariants: {
|
51
|
-
radius: 'small',
|
52
|
-
size: 'medium',
|
53
|
-
},
|
54
|
-
});
|
55
|
-
var MenubarContext = createContext({
|
56
|
-
radius: 'medium',
|
57
|
-
scaling: '100%',
|
58
|
-
size: 'medium',
|
59
|
-
color: 'red',
|
60
|
-
appearance: 'ghost',
|
61
|
-
itemAppearance: 'solid',
|
62
|
-
});
|
63
|
-
export var useMenubarContext = function () {
|
64
|
-
return useContext(MenubarContext);
|
65
|
-
};
|
66
|
-
export var Menubar = forwardRef(function (_a, ref) {
|
67
|
-
var children = _a.children, className = _a.className, radius = _a.radius, scaling = _a.scaling, size = _a.size, _b = _a.color, color = _b === void 0 ? 'red' : _b, _c = _a.appearance, appearance = _c === void 0 ? 'ghost' : _c, _d = _a.itemAppearance, itemAppearance = _d === void 0 ? 'solid' : _d, props = __rest(_a, ["children", "className", "radius", "scaling", "size", "color", "appearance", "itemAppearance"]);
|
68
|
-
var contextValue = { radius: radius, size: size, scaling: scaling, color: color, appearance: appearance, itemAppearance: itemAppearance };
|
69
|
-
var menuClassName = cn(menubarVariants({ radius: radius, scaling: scaling, size: size }), appearance === 'solid' && "bg-".concat(color, "-9 dark:bg-$").concat(color, "Dark-9"), 'w-fit', className);
|
70
|
-
return (_jsx(MenubarContext.Provider, { value: contextValue, children: _jsx(MenubarPrimitive.Root, __assign({ ref: ref, className: menuClassName }, props, { children: children })) }));
|
71
|
-
});
|
72
|
-
Menubar.displayName = 'Menubar';
|
73
29
|
export default Menubar;
|
@@ -26,7 +26,7 @@ import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
|
|
26
26
|
import { cn } from '../../../lib/utils/utils';
|
27
27
|
import { cva } from 'class-variance-authority';
|
28
28
|
import { radiusVariants } from '../../../lib/constants';
|
29
|
-
import { useNavigationMenuContext } from '
|
29
|
+
import { useNavigationMenuContext } from './NavigationMenuRoot';
|
30
30
|
export var navigationMenuContentVariants = cva("text-slate-12 dark:text-slateDark-12 bg-white dark:bg-slateDark-1 p-2", {
|
31
31
|
variants: {
|
32
32
|
radius: __assign({}, radiusVariants['extra-large']),
|
@@ -45,4 +45,4 @@ export var NavigationMenuContent = forwardRef(function (_a, ref) {
|
|
45
45
|
var _b = useNavigationMenuContext(), radius = _b.radius, size = _b.size;
|
46
46
|
return (_jsx(NavigationMenuPrimitive.Content, __assign({ ref: ref, className: cn("absolute top-0 left-0 w-full sm:w-auto\n data-[motion=from-start]:animate-enterFromLeft \n data-[motion=from-end]:animate-enterFromRight \n data-[motion=to-start]:animate-exitToLeft \n data-[motion=to-end]:animate-exitToRight", navigationMenuContentVariants({ radius: radius, size: size }), className) }, props, { children: children })));
|
47
47
|
});
|
48
|
-
NavigationMenuContent.displayName = '
|
48
|
+
NavigationMenuContent.displayName = 'NavigationMenu.Content';
|
@@ -28,4 +28,4 @@ export var NavigationMenuIndicator = forwardRef(function (_a, ref) {
|
|
28
28
|
var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
|
29
29
|
return (_jsxs(NavigationMenuPrimitive.Indicator, __assign({ ref: ref, className: "flex z-[1] top-full h-[10px] items-end justify-center overflow-hidden\n data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut \n transition-[width,transform_250ms_ease]" }, props, { children: [_jsx("div", { className: cn("relative top-[70%] h-[10px] w-[10px] rotate-[45deg] rounded-tl-[2px] \n bg-white dark:bg-slateDark-2 shadow-slate-4 shadow dark:shadow-slateDark-4", className) }), children] })));
|
30
30
|
});
|
31
|
-
NavigationMenuIndicator.displayName = '
|
31
|
+
NavigationMenuIndicator.displayName = 'NavigationMenu.Indicator';
|
@@ -27,4 +27,4 @@ export var NavigationMenuItem = forwardRef(function (_a, ref) {
|
|
27
27
|
var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
|
28
28
|
return (_jsx(NavigationMenuPrimitive.Item, __assign({ ref: ref, className: className }, props, { children: children })));
|
29
29
|
});
|
30
|
-
NavigationMenuItem.displayName = '
|
30
|
+
NavigationMenuItem.displayName = 'NavigationMenu.Item';
|
@@ -26,7 +26,7 @@ import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
|
|
26
26
|
import { cn } from '../../../lib/utils/utils';
|
27
27
|
import { cva } from 'class-variance-authority';
|
28
28
|
import { appearanceStyle, radiusVariants, scalingVariants } from '../../../lib/constants';
|
29
|
-
import { useNavigationMenuContext } from '
|
29
|
+
import { useNavigationMenuContext } from './NavigationMenuRoot';
|
30
30
|
export var navigationMenuLinkVariants = cva("block select-none leading-none outline-none py-1 px-3 cursor-alias hover:underline font-medium", {
|
31
31
|
variants: {
|
32
32
|
size: {
|
@@ -48,4 +48,4 @@ export var NavigationMenuLink = forwardRef(function (_a, ref) {
|
|
48
48
|
var linkClassName = cn(navigationMenuLinkVariants({ scaling: scaling, size: size, radius: radius }), appearanceStyle(appearance, color), className);
|
49
49
|
return (_jsx(NavigationMenuPrimitive.Link, __assign({ ref: ref, href: href, title: href, className: linkClassName }, props, { children: children })));
|
50
50
|
});
|
51
|
-
NavigationMenuLink.displayName = '
|
51
|
+
NavigationMenuLink.displayName = 'NavigationMenu.Link';
|
@@ -27,7 +27,7 @@ import { cn } from '../../../lib/utils/utils';
|
|
27
27
|
import { cva } from 'class-variance-authority';
|
28
28
|
import { appearanceStyle, radiusVariants, scalingVariants } from '../../../lib/constants';
|
29
29
|
import { NavigationMenuIndicator } from './NavigationMenuIndicator';
|
30
|
-
import { useNavigationMenuContext } from '
|
30
|
+
import { useNavigationMenuContext } from './NavigationMenuRoot';
|
31
31
|
export var navigationMenuListVariants = cva('flex items-center p-1 space-x-1 shadow-slate-4 shadow dark:shadow-slateDark-4 bg-white dark:bg-slateDark-1', {
|
32
32
|
variants: {
|
33
33
|
radius: __assign({}, radiusVariants['base']),
|
@@ -44,4 +44,4 @@ export var NavigationMenuList = forwardRef(function (_a, ref) {
|
|
44
44
|
var navigationMenuListClassName = cn(navigationMenuListVariants({ scaling: scaling, radius: radius }), appearanceStyle(appearance, color, false), 'border-none', appearance === 'ghost' && 'bg-white', className);
|
45
45
|
return (_jsxs(NavigationMenuPrimitive.List, __assign({ ref: ref, className: navigationMenuListClassName }, props, { children: [children, isShowIndicator && _jsx(NavigationMenuIndicator, {})] })));
|
46
46
|
});
|
47
|
-
NavigationMenuList.displayName = '
|
47
|
+
NavigationMenuList.displayName = 'NavigationMenu.List';
|
@@ -0,0 +1,14 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
|
3
|
+
import { VariantProps } from 'class-variance-authority';
|
4
|
+
import { navigationMenuListVariants } from './NavigationMenuList';
|
5
|
+
import { navigationMenuTriggerVariants } from './NavigationMenuTrigger';
|
6
|
+
import { navigationMenuLinkVariants } from './NavigationMenuLink';
|
7
|
+
import { IColor } from '../../../lib/types';
|
8
|
+
export interface NavigationMenuProps extends VariantProps<typeof navigationMenuListVariants>, VariantProps<typeof navigationMenuTriggerVariants>, VariantProps<typeof navigationMenuLinkVariants> {
|
9
|
+
appearance?: 'ghost' | 'solid';
|
10
|
+
color?: IColor;
|
11
|
+
}
|
12
|
+
export declare const useNavigationMenuContext: () => NavigationMenuProps;
|
13
|
+
export declare const NavigationMenuRoot: React.ForwardRefExoticComponent<Omit<NavigationMenuPrimitive.NavigationMenuProps & React.RefAttributes<HTMLElement>, "ref"> & NavigationMenuProps & React.RefAttributes<HTMLElement>>;
|
14
|
+
export default NavigationMenuRoot;
|