@mednet/ui 0.0.0-stage → 1.0.0
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/LICENSE +21 -0
- package/README.md +46 -2
- package/THIRD_PARTY_NOTICES.md +27 -0
- package/dist/brand/logo/logo-horizontal.d.ts +6 -0
- package/dist/brand/logo/logo-horizontal.js +7 -0
- package/dist/brand/logo/logo-mark.d.ts +6 -0
- package/dist/brand/logo/logo-mark.js +7 -0
- package/dist/brand/logo/logo-vertical.d.ts +6 -0
- package/dist/brand/logo/logo-vertical.js +7 -0
- package/dist/brand/logo.d.ts +18 -0
- package/dist/brand/logo.js +12 -0
- package/dist/brand/site-footer.d.ts +24 -0
- package/dist/brand/site-footer.js +15 -0
- package/dist/brand/site-header.d.ts +11 -0
- package/dist/brand/site-header.js +7 -0
- package/dist/components/accordion.d.ts +6 -0
- package/dist/components/accordion.js +17 -0
- package/dist/components/alert-dialog.d.ts +18 -0
- package/dist/components/alert-dialog.js +42 -0
- package/dist/components/alert.d.ts +10 -0
- package/dist/components/alert.js +27 -0
- package/dist/components/aspect-ratio.d.ts +4 -0
- package/dist/components/aspect-ratio.js +8 -0
- package/dist/components/attachment.d.ts +23 -0
- package/dist/components/attachment.js +68 -0
- package/dist/components/avatar.d.ts +11 -0
- package/dist/components/avatar.js +23 -0
- package/dist/components/badge.d.ts +7 -0
- package/dist/components/badge.js +33 -0
- package/dist/components/breadcrumb.d.ts +10 -0
- package/dist/components/breadcrumb.js +36 -0
- package/dist/components/bubble.d.ts +16 -0
- package/dist/components/bubble.js +59 -0
- package/dist/components/button-group.d.ts +10 -0
- package/dist/components/button-group.js +36 -0
- package/dist/components/button.d.ts +8 -0
- package/dist/components/button.js +34 -0
- package/dist/components/calendar.d.ts +10 -0
- package/dist/components/calendar.js +76 -0
- package/dist/components/card.d.ts +11 -0
- package/dist/components/card.js +24 -0
- package/dist/components/carousel.d.ts +28 -0
- package/dist/components/carousel.js +91 -0
- package/dist/components/chart.d.ts +44 -0
- package/dist/components/chart.js +132 -0
- package/dist/components/checkbox.d.ts +3 -0
- package/dist/components/checkbox.js +9 -0
- package/dist/components/collapsible.d.ts +5 -0
- package/dist/components/collapsible.js +13 -0
- package/dist/components/combobox.d.ts +24 -0
- package/dist/components/combobox.js +58 -0
- package/dist/components/command.d.ts +19 -0
- package/dist/components/command.js +35 -0
- package/dist/components/context-menu.d.ts +29 -0
- package/dist/components/context-menu.js +51 -0
- package/dist/components/dialog.d.ts +17 -0
- package/dist/components/dialog.js +37 -0
- package/dist/components/direction.d.ts +1 -0
- package/dist/components/direction.js +2 -0
- package/dist/components/drawer.d.ts +16 -0
- package/dist/components/drawer.js +75 -0
- package/dist/components/dropdown-menu.d.ts +29 -0
- package/dist/components/dropdown-menu.js +51 -0
- package/dist/components/empty.d.ts +11 -0
- package/dist/components/empty.js +33 -0
- package/dist/components/field.d.ts +24 -0
- package/dist/components/field.js +68 -0
- package/dist/components/hover-card.d.ts +5 -0
- package/dist/components/hover-card.js +14 -0
- package/dist/components/input-group.d.ts +18 -0
- package/dist/components/input-group.js +57 -0
- package/dist/components/input-otp.d.ts +11 -0
- package/dist/components/input-otp.js +21 -0
- package/dist/components/input.d.ts +3 -0
- package/dist/components/input.js +7 -0
- package/dist/components/item.d.ts +22 -0
- package/dist/components/item.js +78 -0
- package/dist/components/kbd.d.ts +3 -0
- package/dist/components/kbd.js +9 -0
- package/dist/components/label.d.ts +3 -0
- package/dist/components/label.js +7 -0
- package/dist/components/marker.d.ts +10 -0
- package/dist/components/marker.js +34 -0
- package/dist/components/menubar.d.ts +29 -0
- package/dist/components/menubar.js +56 -0
- package/dist/components/message-scroller.d.ts +10 -0
- package/dist/components/message-scroller.js +25 -0
- package/dist/components/message.d.ts +10 -0
- package/dist/components/message.js +21 -0
- package/dist/components/native-select.d.ts +8 -0
- package/dist/components/native-select.js +13 -0
- package/dist/components/navigation-menu.d.ts +11 -0
- package/dist/components/navigation-menu.js +31 -0
- package/dist/components/pagination.d.ts +17 -0
- package/dist/components/pagination.js +26 -0
- package/dist/components/popover.d.ts +9 -0
- package/dist/components/popover.js +23 -0
- package/dist/components/progress.d.ts +7 -0
- package/dist/components/progress.js +20 -0
- package/dist/components/questionnaire.d.ts +19 -0
- package/dist/components/questionnaire.js +52 -0
- package/dist/components/radio-group.d.ts +5 -0
- package/dist/components/radio-group.js +12 -0
- package/dist/components/resizable.d.ts +7 -0
- package/dist/components/resizable.js +14 -0
- package/dist/components/scroll-area.d.ts +5 -0
- package/dist/components/scroll-area.js +11 -0
- package/dist/components/select.d.ts +15 -0
- package/dist/components/select.js +34 -0
- package/dist/components/separator.d.ts +3 -0
- package/dist/components/separator.js +8 -0
- package/dist/components/sheet.d.ts +14 -0
- package/dist/components/sheet.js +37 -0
- package/dist/components/sidebar.d.ts +63 -0
- package/dist/components/sidebar.js +256 -0
- package/dist/components/skeleton.d.ts +2 -0
- package/dist/components/skeleton.js +6 -0
- package/dist/components/slider.d.ts +3 -0
- package/dist/components/slider.js +12 -0
- package/dist/components/spinner.d.ts +2 -0
- package/dist/components/spinner.js +7 -0
- package/dist/components/switch.d.ts +5 -0
- package/dist/components/switch.js +8 -0
- package/dist/components/table.d.ts +10 -0
- package/dist/components/table.js +28 -0
- package/dist/components/tabs.d.ts +10 -0
- package/dist/components/tabs.js +29 -0
- package/dist/components/textarea.d.ts +3 -0
- package/dist/components/textarea.js +6 -0
- package/dist/components/toast.d.ts +16 -0
- package/dist/components/toast.js +66 -0
- package/dist/components/toggle-group.d.ts +11 -0
- package/dist/components/toggle-group.js +24 -0
- package/dist/components/toggle.d.ts +8 -0
- package/dist/components/toggle.js +26 -0
- package/dist/components/tooltip.d.ts +6 -0
- package/dist/components/tooltip.js +17 -0
- package/dist/hooks/use-mobile.d.ts +1 -0
- package/dist/hooks/use-mobile.js +15 -0
- package/dist/index.d.ts +67 -0
- package/dist/index.js +69 -0
- package/dist/layouts/app-shell.d.ts +19 -0
- package/dist/layouts/app-shell.js +9 -0
- package/dist/layouts/public-layout.d.ts +14 -0
- package/dist/layouts/public-layout.js +8 -0
- package/dist/layouts/skip-link.d.ts +2 -0
- package/dist/layouts/skip-link.js +5 -0
- package/dist/lib/utils.d.ts +2 -0
- package/dist/lib/utils.js +7 -0
- package/llms.md +521 -0
- package/package.json +128 -3
- package/postcss.cjs +163 -0
- package/src/brand.css +69 -0
- package/src/shadcn-tailwind.css +638 -0
- package/src/styles.css +48 -0
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import { cn } from "#lib/utils";
|
|
5
|
+
import * as RechartsPrimitive from "recharts";
|
|
6
|
+
// Format: { THEME_NAME: CSS_SELECTOR }
|
|
7
|
+
const THEMES = { light: "", dark: ".dark" };
|
|
8
|
+
const INITIAL_DIMENSION = { width: 320, height: 200 };
|
|
9
|
+
const ChartContext = React.createContext(null);
|
|
10
|
+
function useChart() {
|
|
11
|
+
const context = React.useContext(ChartContext);
|
|
12
|
+
if (!context) {
|
|
13
|
+
throw new Error("useChart must be used within a <ChartContainer />");
|
|
14
|
+
}
|
|
15
|
+
return context;
|
|
16
|
+
}
|
|
17
|
+
function ChartContainer({ id, className, children, config, initialDimension = INITIAL_DIMENSION, ...props }) {
|
|
18
|
+
const uniqueId = React.useId();
|
|
19
|
+
const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
|
|
20
|
+
return (_jsx(ChartContext.Provider, { value: { config }, children: _jsxs("div", { "data-slot": "chart", "data-chart": chartId, className: cn("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className), ...props, children: [_jsx(ChartStyle, { id: chartId, config: config }), _jsx(RechartsPrimitive.ResponsiveContainer, { initialDimension: initialDimension, children: children })] }) }));
|
|
21
|
+
}
|
|
22
|
+
const ChartStyle = ({ id, config }) => {
|
|
23
|
+
const colorConfig = Object.entries(config).filter(([, config]) => config.theme ?? config.color);
|
|
24
|
+
if (!colorConfig.length) {
|
|
25
|
+
return null;
|
|
26
|
+
}
|
|
27
|
+
return (_jsx("style", { dangerouslySetInnerHTML: {
|
|
28
|
+
__html: Object.entries(THEMES)
|
|
29
|
+
.map(([theme, prefix]) => `
|
|
30
|
+
${prefix} [data-chart=${id}] {
|
|
31
|
+
${colorConfig
|
|
32
|
+
.map(([key, itemConfig]) => {
|
|
33
|
+
const color = itemConfig.theme?.[theme] ??
|
|
34
|
+
itemConfig.color;
|
|
35
|
+
return color ? ` --color-${key}: ${color};` : null;
|
|
36
|
+
})
|
|
37
|
+
.join("\n")}
|
|
38
|
+
}
|
|
39
|
+
`)
|
|
40
|
+
.join("\n"),
|
|
41
|
+
} }));
|
|
42
|
+
};
|
|
43
|
+
const ChartTooltip = RechartsPrimitive.Tooltip;
|
|
44
|
+
function ChartTooltipContent({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }) {
|
|
45
|
+
const { config } = useChart();
|
|
46
|
+
const tooltipLabel = React.useMemo(() => {
|
|
47
|
+
if (hideLabel || !payload?.length) {
|
|
48
|
+
return null;
|
|
49
|
+
}
|
|
50
|
+
const [item] = payload;
|
|
51
|
+
const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`;
|
|
52
|
+
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
|
53
|
+
const value = !labelKey && typeof label === "string"
|
|
54
|
+
? (config[label]?.label ?? label)
|
|
55
|
+
: itemConfig?.label;
|
|
56
|
+
if (labelFormatter) {
|
|
57
|
+
return (_jsx("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) }));
|
|
58
|
+
}
|
|
59
|
+
if (!value) {
|
|
60
|
+
return null;
|
|
61
|
+
}
|
|
62
|
+
return _jsx("div", { className: cn("font-medium", labelClassName), children: value });
|
|
63
|
+
}, [
|
|
64
|
+
label,
|
|
65
|
+
labelFormatter,
|
|
66
|
+
payload,
|
|
67
|
+
hideLabel,
|
|
68
|
+
labelClassName,
|
|
69
|
+
config,
|
|
70
|
+
labelKey,
|
|
71
|
+
]);
|
|
72
|
+
if (!active || !payload?.length) {
|
|
73
|
+
return null;
|
|
74
|
+
}
|
|
75
|
+
const nestLabel = payload.length === 1 && indicator !== "dot";
|
|
76
|
+
return (_jsxs("div", { className: cn("grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", className), children: [!nestLabel ? tooltipLabel : null, _jsx("div", { className: "grid gap-1.5", children: payload
|
|
77
|
+
.filter((item) => item.type !== "none")
|
|
78
|
+
.map((item, index) => {
|
|
79
|
+
const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
|
|
80
|
+
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
|
81
|
+
const indicatorColor = color ?? item.payload?.fill ?? item.color;
|
|
82
|
+
return (_jsx("div", { className: cn("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center"), children: formatter && item?.value !== undefined && item.name ? (formatter(item.value, item.name, item, index, item.payload)) : (_jsxs(_Fragment, { children: [itemConfig?.icon ? (_jsx(itemConfig.icon, {})) : (!hideIndicator && (_jsx("div", { className: cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
|
|
83
|
+
"h-2.5 w-2.5": indicator === "dot",
|
|
84
|
+
"w-1": indicator === "line",
|
|
85
|
+
"w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
|
|
86
|
+
"my-0.5": nestLabel && indicator === "dashed",
|
|
87
|
+
}), style: {
|
|
88
|
+
"--color-bg": indicatorColor,
|
|
89
|
+
"--color-border": indicatorColor,
|
|
90
|
+
} }))), _jsxs("div", { className: cn("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center"), children: [_jsxs("div", { className: "grid gap-1.5", children: [nestLabel ? tooltipLabel : null, _jsx("span", { className: "text-muted-foreground", children: itemConfig?.label ?? item.name })] }), item.value != null && (_jsx("span", { className: "font-mono font-medium text-foreground tabular-nums", children: typeof item.value === "number"
|
|
91
|
+
? item.value.toLocaleString()
|
|
92
|
+
: String(item.value) }))] })] })) }, index));
|
|
93
|
+
}) })] }));
|
|
94
|
+
}
|
|
95
|
+
const ChartLegend = RechartsPrimitive.Legend;
|
|
96
|
+
function ChartLegendContent({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey, }) {
|
|
97
|
+
const { config } = useChart();
|
|
98
|
+
if (!payload?.length) {
|
|
99
|
+
return null;
|
|
100
|
+
}
|
|
101
|
+
return (_jsx("div", { className: cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className), children: payload
|
|
102
|
+
.filter((item) => item.type !== "none")
|
|
103
|
+
.map((item, index) => {
|
|
104
|
+
const key = `${nameKey ?? item.dataKey ?? "value"}`;
|
|
105
|
+
const itemConfig = getPayloadConfigFromPayload(config, item, key);
|
|
106
|
+
return (_jsxs("div", { className: cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"), children: [itemConfig?.icon && !hideIcon ? (_jsx(itemConfig.icon, {})) : (_jsx("div", { className: "h-2 w-2 shrink-0 rounded-[2px]", style: {
|
|
107
|
+
backgroundColor: item.color,
|
|
108
|
+
} })), itemConfig?.label] }, index));
|
|
109
|
+
}) }));
|
|
110
|
+
}
|
|
111
|
+
function getPayloadConfigFromPayload(config, payload, key) {
|
|
112
|
+
if (typeof payload !== "object" || payload === null) {
|
|
113
|
+
return undefined;
|
|
114
|
+
}
|
|
115
|
+
const payloadPayload = "payload" in payload &&
|
|
116
|
+
typeof payload.payload === "object" &&
|
|
117
|
+
payload.payload !== null
|
|
118
|
+
? payload.payload
|
|
119
|
+
: undefined;
|
|
120
|
+
let configLabelKey = key;
|
|
121
|
+
if (key in payload &&
|
|
122
|
+
typeof payload[key] === "string") {
|
|
123
|
+
configLabelKey = payload[key];
|
|
124
|
+
}
|
|
125
|
+
else if (payloadPayload &&
|
|
126
|
+
key in payloadPayload &&
|
|
127
|
+
typeof payloadPayload[key] === "string") {
|
|
128
|
+
configLabelKey = payloadPayload[key];
|
|
129
|
+
}
|
|
130
|
+
return configLabelKey in config ? config[configLabelKey] : config[key];
|
|
131
|
+
}
|
|
132
|
+
export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
|
|
4
|
+
import { cn } from "#lib/utils";
|
|
5
|
+
import { CheckIcon } from "lucide-react";
|
|
6
|
+
function Checkbox({ className, ...props }) {
|
|
7
|
+
return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-[6px] border border-input transition-shadow outline-none group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none [&>svg]:size-3.5", children: _jsx(CheckIcon, {}) }) }));
|
|
8
|
+
}
|
|
9
|
+
export { Checkbox };
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";
|
|
2
|
+
declare function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props): import("react").JSX.Element;
|
|
3
|
+
declare function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props): import("react").JSX.Element;
|
|
4
|
+
declare function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props): import("react").JSX.Element;
|
|
5
|
+
export { Collapsible, CollapsibleTrigger, CollapsibleContent };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";
|
|
4
|
+
function Collapsible({ ...props }) {
|
|
5
|
+
return _jsx(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
|
|
6
|
+
}
|
|
7
|
+
function CollapsibleTrigger({ ...props }) {
|
|
8
|
+
return (_jsx(CollapsiblePrimitive.Trigger, { "data-slot": "collapsible-trigger", ...props }));
|
|
9
|
+
}
|
|
10
|
+
function CollapsibleContent({ ...props }) {
|
|
11
|
+
return (_jsx(CollapsiblePrimitive.Panel, { "data-slot": "collapsible-content", ...props }));
|
|
12
|
+
}
|
|
13
|
+
export { Collapsible, CollapsibleTrigger, CollapsibleContent };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Combobox as ComboboxPrimitive } from "@base-ui/react";
|
|
3
|
+
declare const Combobox: typeof ComboboxPrimitive.Root;
|
|
4
|
+
declare function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props): React.JSX.Element;
|
|
5
|
+
declare function ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Trigger.Props): React.JSX.Element;
|
|
6
|
+
declare function ComboboxInput({ className, children, disabled, showTrigger, showClear, ...props }: ComboboxPrimitive.Input.Props & {
|
|
7
|
+
showTrigger?: boolean;
|
|
8
|
+
showClear?: boolean;
|
|
9
|
+
}): React.JSX.Element;
|
|
10
|
+
declare function ComboboxContent({ className, side, sideOffset, align, alignOffset, anchor, ...props }: ComboboxPrimitive.Popup.Props & Pick<ComboboxPrimitive.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor">): React.JSX.Element;
|
|
11
|
+
declare function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props): React.JSX.Element;
|
|
12
|
+
declare function ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props): React.JSX.Element;
|
|
13
|
+
declare function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props): React.JSX.Element;
|
|
14
|
+
declare function ComboboxLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props): React.JSX.Element;
|
|
15
|
+
declare function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props): React.JSX.Element;
|
|
16
|
+
declare function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props): React.JSX.Element;
|
|
17
|
+
declare function ComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.Props): React.JSX.Element;
|
|
18
|
+
declare function ComboboxChips({ className, ...props }: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> & ComboboxPrimitive.Chips.Props): React.JSX.Element;
|
|
19
|
+
declare function ComboboxChip({ className, children, showRemove, ...props }: ComboboxPrimitive.Chip.Props & {
|
|
20
|
+
showRemove?: boolean;
|
|
21
|
+
}): React.JSX.Element;
|
|
22
|
+
declare function ComboboxChipsInput({ className, ...props }: ComboboxPrimitive.Input.Props): React.JSX.Element;
|
|
23
|
+
declare function useComboboxAnchor(): React.RefObject<HTMLDivElement | null>;
|
|
24
|
+
export { Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxGroup, ComboboxLabel, ComboboxCollection, ComboboxEmpty, ComboboxSeparator, ComboboxChips, ComboboxChip, ComboboxChipsInput, ComboboxTrigger, ComboboxValue, useComboboxAnchor, };
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import { Combobox as ComboboxPrimitive } from "@base-ui/react";
|
|
5
|
+
import { cn } from "#lib/utils";
|
|
6
|
+
import { Button } from "#components/button";
|
|
7
|
+
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from "#components/input-group";
|
|
8
|
+
import { ChevronDownIcon, XIcon, CheckIcon } from "lucide-react";
|
|
9
|
+
const Combobox = ComboboxPrimitive.Root;
|
|
10
|
+
function ComboboxValue({ ...props }) {
|
|
11
|
+
return _jsx(ComboboxPrimitive.Value, { "data-slot": "combobox-value", ...props });
|
|
12
|
+
}
|
|
13
|
+
function ComboboxTrigger({ className, children, ...props }) {
|
|
14
|
+
return (_jsxs(ComboboxPrimitive.Trigger, { "data-slot": "combobox-trigger", className: cn("[&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" })] }));
|
|
15
|
+
}
|
|
16
|
+
function ComboboxClear({ className, ...props }) {
|
|
17
|
+
return (_jsx(ComboboxPrimitive.Clear, { "data-slot": "combobox-clear", render: _jsx(InputGroupButton, { variant: "ghost", size: "icon-xs" }), className: cn(className), ...props, children: _jsx(XIcon, { className: "pointer-events-none" }) }));
|
|
18
|
+
}
|
|
19
|
+
function ComboboxInput({ className, children, disabled = false, showTrigger = true, showClear = false, ...props }) {
|
|
20
|
+
return (_jsxs(InputGroup, { className: cn("w-auto", className), children: [_jsx(ComboboxPrimitive.Input, { render: _jsx(InputGroupInput, { disabled: disabled }), ...props }), _jsxs(InputGroupAddon, { align: "inline-end", children: [showTrigger && (_jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", render: _jsx(ComboboxTrigger, {}), "data-slot": "input-group-button", className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent", disabled: disabled })), showClear && _jsx(ComboboxClear, { disabled: disabled })] }), children] }));
|
|
21
|
+
}
|
|
22
|
+
function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, ...props }) {
|
|
23
|
+
return (_jsx(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, className: "isolate z-50", children: _jsx(ComboboxPrimitive.Popup, { "data-slot": "combobox-content", "data-chips": !!anchor, className: cn("group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-2xl bg-popover text-popover-foreground shadow-2xl ring-1 ring-foreground/5 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-9 *:data-[slot=input-group]:border-none *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props }) }) }));
|
|
24
|
+
}
|
|
25
|
+
function ComboboxList({ className, ...props }) {
|
|
26
|
+
return (_jsx(ComboboxPrimitive.List, { "data-slot": "combobox-list", className: cn("no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0", className), ...props }));
|
|
27
|
+
}
|
|
28
|
+
function ComboboxItem({ className, children, ...props }) {
|
|
29
|
+
return (_jsxs(ComboboxPrimitive.Item, { "data-slot": "combobox-item", className: cn("relative flex w-full cursor-default items-center gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(ComboboxPrimitive.ItemIndicator, { render: _jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }), children: _jsx(CheckIcon, { className: "pointer-events-none" }) })] }));
|
|
30
|
+
}
|
|
31
|
+
function ComboboxGroup({ className, ...props }) {
|
|
32
|
+
return (_jsx(ComboboxPrimitive.Group, { "data-slot": "combobox-group", className: cn(className), ...props }));
|
|
33
|
+
}
|
|
34
|
+
function ComboboxLabel({ className, ...props }) {
|
|
35
|
+
return (_jsx(ComboboxPrimitive.GroupLabel, { "data-slot": "combobox-label", className: cn("px-3.5 py-2.5 text-xs text-muted-foreground", className), ...props }));
|
|
36
|
+
}
|
|
37
|
+
function ComboboxCollection({ ...props }) {
|
|
38
|
+
return (_jsx(ComboboxPrimitive.Collection, { "data-slot": "combobox-collection", ...props }));
|
|
39
|
+
}
|
|
40
|
+
function ComboboxEmpty({ className, ...props }) {
|
|
41
|
+
return (_jsx(ComboboxPrimitive.Empty, { "data-slot": "combobox-empty", className: cn("hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex", className), ...props }));
|
|
42
|
+
}
|
|
43
|
+
function ComboboxSeparator({ className, ...props }) {
|
|
44
|
+
return (_jsx(ComboboxPrimitive.Separator, { "data-slot": "combobox-separator", className: cn("-mx-1 my-1 h-px bg-border/50", className), ...props }));
|
|
45
|
+
}
|
|
46
|
+
function ComboboxChips({ className, ...props }) {
|
|
47
|
+
return (_jsx(ComboboxPrimitive.Chips, { "data-slot": "combobox-chips", className: cn("flex min-h-9 flex-wrap items-center gap-1.5 rounded-4xl border border-input bg-input/30 bg-clip-padding px-2.5 py-1.5 text-sm transition-colors focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-[3px] has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1.5 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40", className), ...props }));
|
|
48
|
+
}
|
|
49
|
+
function ComboboxChip({ className, children, showRemove = true, ...props }) {
|
|
50
|
+
return (_jsxs(ComboboxPrimitive.Chip, { "data-slot": "combobox-chip", className: cn("flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-4xl bg-muted-foreground/10 px-2 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0", className), ...props, children: [children, showRemove && (_jsx(ComboboxPrimitive.ChipRemove, { render: _jsx(Button, { variant: "ghost", size: "icon-xs" }), className: "-ml-1 opacity-50 hover:opacity-100", "data-slot": "combobox-chip-remove", children: _jsx(XIcon, { className: "pointer-events-none" }) }))] }));
|
|
51
|
+
}
|
|
52
|
+
function ComboboxChipsInput({ className, ...props }) {
|
|
53
|
+
return (_jsx(ComboboxPrimitive.Input, { "data-slot": "combobox-chip-input", className: cn("min-w-16 flex-1 outline-none", className), ...props }));
|
|
54
|
+
}
|
|
55
|
+
function useComboboxAnchor() {
|
|
56
|
+
return React.useRef(null);
|
|
57
|
+
}
|
|
58
|
+
export { Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxGroup, ComboboxLabel, ComboboxCollection, ComboboxEmpty, ComboboxSeparator, ComboboxChips, ComboboxChip, ComboboxChipsInput, ComboboxTrigger, ComboboxValue, useComboboxAnchor, };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Command as CommandPrimitive } from "cmdk";
|
|
3
|
+
import { Dialog } from "#components/dialog";
|
|
4
|
+
declare function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>): React.JSX.Element;
|
|
5
|
+
declare function CommandDialog({ title, description, children, className, showCloseButton, ...props }: Omit<React.ComponentProps<typeof Dialog>, "children"> & {
|
|
6
|
+
title?: string;
|
|
7
|
+
description?: string;
|
|
8
|
+
className?: string;
|
|
9
|
+
showCloseButton?: boolean;
|
|
10
|
+
children: React.ReactNode;
|
|
11
|
+
}): React.JSX.Element;
|
|
12
|
+
declare function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>): React.JSX.Element;
|
|
13
|
+
declare function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>): React.JSX.Element;
|
|
14
|
+
declare function CommandEmpty({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>): React.JSX.Element;
|
|
15
|
+
declare function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>): React.JSX.Element;
|
|
16
|
+
declare function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>): React.JSX.Element;
|
|
17
|
+
declare function CommandItem({ className, children, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>): React.JSX.Element;
|
|
18
|
+
declare function CommandShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
|
|
19
|
+
export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Command as CommandPrimitive } from "cmdk";
|
|
4
|
+
import { cn } from "#lib/utils";
|
|
5
|
+
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "#components/dialog";
|
|
6
|
+
import { InputGroup, InputGroupAddon, } from "#components/input-group";
|
|
7
|
+
import { SearchIcon, CheckIcon } from "lucide-react";
|
|
8
|
+
function Command({ className, ...props }) {
|
|
9
|
+
return (_jsx(CommandPrimitive, { "data-slot": "command", className: cn("flex size-full flex-col overflow-hidden rounded-4xl bg-popover p-1 text-popover-foreground", className), ...props }));
|
|
10
|
+
}
|
|
11
|
+
function CommandDialog({ title = "Команды", description = "Найдите команду", children, className, showCloseButton = false, ...props }) {
|
|
12
|
+
return (_jsxs(Dialog, { ...props, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsx(DialogContent, { className: cn("top-1/3 translate-y-0 overflow-hidden rounded-4xl! p-0", className), showCloseButton: showCloseButton, children: children })] }));
|
|
13
|
+
}
|
|
14
|
+
function CommandInput({ className, ...props }) {
|
|
15
|
+
return (_jsx("div", { "data-slot": "command-input-wrapper", className: "p-1 pb-0", children: _jsxs(InputGroup, { className: "h-9 bg-input/30", children: [_jsx(CommandPrimitive.Input, { "data-slot": "command-input", className: cn("w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className), ...props }), _jsx(InputGroupAddon, { children: _jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }) })] }) }));
|
|
16
|
+
}
|
|
17
|
+
function CommandList({ className, ...props }) {
|
|
18
|
+
return (_jsx(CommandPrimitive.List, { "data-slot": "command-list", className: cn("no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none", className), ...props }));
|
|
19
|
+
}
|
|
20
|
+
function CommandEmpty({ className, ...props }) {
|
|
21
|
+
return (_jsx(CommandPrimitive.Empty, { "data-slot": "command-empty", className: cn("py-6 text-center text-sm", className), ...props }));
|
|
22
|
+
}
|
|
23
|
+
function CommandGroup({ className, ...props }) {
|
|
24
|
+
return (_jsx(CommandPrimitive.Group, { "data-slot": "command-group", className: cn("overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-3 **:[[cmdk-group-heading]]:py-2 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground", className), ...props }));
|
|
25
|
+
}
|
|
26
|
+
function CommandSeparator({ className, ...props }) {
|
|
27
|
+
return (_jsx(CommandPrimitive.Separator, { "data-slot": "command-separator", className: cn("my-1 h-px bg-border/50", className), ...props }));
|
|
28
|
+
}
|
|
29
|
+
function CommandItem({ className, children, ...props }) {
|
|
30
|
+
return (_jsxs(CommandPrimitive.Item, { "data-slot": "command-item", className: cn("group/command-item relative flex cursor-default items-center gap-2 rounded-lg px-3 py-2 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-2xl data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground", className), ...props, children: [children, _jsx(CheckIcon, { className: "ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" })] }));
|
|
31
|
+
}
|
|
32
|
+
function CommandShortcut({ className, ...props }) {
|
|
33
|
+
return (_jsx("span", { "data-slot": "command-shortcut", className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground", className), ...props }));
|
|
34
|
+
}
|
|
35
|
+
export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu";
|
|
3
|
+
declare function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props): React.JSX.Element;
|
|
4
|
+
declare function ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props): React.JSX.Element;
|
|
5
|
+
declare function ContextMenuTrigger({ className, ...props }: ContextMenuPrimitive.Trigger.Props): React.JSX.Element;
|
|
6
|
+
declare function ContextMenuContent({ className, align, alignOffset, side, sideOffset, ...props }: ContextMenuPrimitive.Popup.Props & Pick<ContextMenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): React.JSX.Element;
|
|
7
|
+
declare function ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props): React.JSX.Element;
|
|
8
|
+
declare function ContextMenuLabel({ className, inset, ...props }: ContextMenuPrimitive.GroupLabel.Props & {
|
|
9
|
+
inset?: boolean;
|
|
10
|
+
}): React.JSX.Element;
|
|
11
|
+
declare function ContextMenuItem({ className, inset, variant, ...props }: ContextMenuPrimitive.Item.Props & {
|
|
12
|
+
inset?: boolean;
|
|
13
|
+
variant?: "default" | "destructive";
|
|
14
|
+
}): React.JSX.Element;
|
|
15
|
+
declare function ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props): React.JSX.Element;
|
|
16
|
+
declare function ContextMenuSubTrigger({ className, inset, children, ...props }: ContextMenuPrimitive.SubmenuTrigger.Props & {
|
|
17
|
+
inset?: boolean;
|
|
18
|
+
}): React.JSX.Element;
|
|
19
|
+
declare function ContextMenuSubContent({ ...props }: React.ComponentProps<typeof ContextMenuContent>): React.JSX.Element;
|
|
20
|
+
declare function ContextMenuCheckboxItem({ className, children, checked, inset, ...props }: ContextMenuPrimitive.CheckboxItem.Props & {
|
|
21
|
+
inset?: boolean;
|
|
22
|
+
}): React.JSX.Element;
|
|
23
|
+
declare function ContextMenuRadioGroup({ ...props }: ContextMenuPrimitive.RadioGroup.Props): React.JSX.Element;
|
|
24
|
+
declare function ContextMenuRadioItem({ className, children, inset, ...props }: ContextMenuPrimitive.RadioItem.Props & {
|
|
25
|
+
inset?: boolean;
|
|
26
|
+
}): React.JSX.Element;
|
|
27
|
+
declare function ContextMenuSeparator({ className, ...props }: ContextMenuPrimitive.Separator.Props): React.JSX.Element;
|
|
28
|
+
declare function ContextMenuShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
|
|
29
|
+
export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, };
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu";
|
|
4
|
+
import { cn } from "#lib/utils";
|
|
5
|
+
import { ChevronRightIcon, CheckIcon } from "lucide-react";
|
|
6
|
+
function ContextMenu({ ...props }) {
|
|
7
|
+
return _jsx(ContextMenuPrimitive.Root, { "data-slot": "context-menu", ...props });
|
|
8
|
+
}
|
|
9
|
+
function ContextMenuPortal({ ...props }) {
|
|
10
|
+
return (_jsx(ContextMenuPrimitive.Portal, { "data-slot": "context-menu-portal", ...props }));
|
|
11
|
+
}
|
|
12
|
+
function ContextMenuTrigger({ className, ...props }) {
|
|
13
|
+
return (_jsx(ContextMenuPrimitive.Trigger, { "data-slot": "context-menu-trigger", className: cn("select-none", className), ...props }));
|
|
14
|
+
}
|
|
15
|
+
function ContextMenuContent({ className, align = "start", alignOffset = 4, side = "right", sideOffset = 0, ...props }) {
|
|
16
|
+
return (_jsx(ContextMenuPrimitive.Portal, { children: _jsx(ContextMenuPrimitive.Positioner, { className: "isolate z-50 outline-none", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, children: _jsx(ContextMenuPrimitive.Popup, { "data-slot": "context-menu-content", className: cn("z-50 max-h-(--available-height) min-w-48 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl bg-popover p-1 text-popover-foreground shadow-2xl ring-1 ring-foreground/5 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props }) }) }));
|
|
17
|
+
}
|
|
18
|
+
function ContextMenuGroup({ ...props }) {
|
|
19
|
+
return (_jsx(ContextMenuPrimitive.Group, { "data-slot": "context-menu-group", ...props }));
|
|
20
|
+
}
|
|
21
|
+
function ContextMenuLabel({ className, inset, ...props }) {
|
|
22
|
+
return (_jsx(ContextMenuPrimitive.GroupLabel, { "data-slot": "context-menu-label", "data-inset": inset, className: cn("px-3 py-2.5 text-xs text-muted-foreground data-inset:pl-9.5", className), ...props }));
|
|
23
|
+
}
|
|
24
|
+
function ContextMenuItem({ className, inset, variant = "default", ...props }) {
|
|
25
|
+
return (_jsx(ContextMenuPrimitive.Item, { "data-slot": "context-menu-item", "data-inset": inset, "data-variant": variant, className: cn("group/context-menu-item relative flex cursor-default items-center gap-2.5 rounded-xl px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive", className), ...props }));
|
|
26
|
+
}
|
|
27
|
+
function ContextMenuSub({ ...props }) {
|
|
28
|
+
return (_jsx(ContextMenuPrimitive.SubmenuRoot, { "data-slot": "context-menu-sub", ...props }));
|
|
29
|
+
}
|
|
30
|
+
function ContextMenuSubTrigger({ className, inset, children, ...props }) {
|
|
31
|
+
return (_jsxs(ContextMenuPrimitive.SubmenuTrigger, { "data-slot": "context-menu-sub-trigger", "data-inset": inset, className: cn("flex cursor-default items-center rounded-xl px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto" })] }));
|
|
32
|
+
}
|
|
33
|
+
function ContextMenuSubContent({ ...props }) {
|
|
34
|
+
return (_jsx(ContextMenuContent, { "data-slot": "context-menu-sub-content", className: "shadow-lg", side: "right", ...props }));
|
|
35
|
+
}
|
|
36
|
+
function ContextMenuCheckboxItem({ className, children, checked, inset, ...props }) {
|
|
37
|
+
return (_jsxs(ContextMenuPrimitive.CheckboxItem, { "data-slot": "context-menu-checkbox-item", "data-inset": inset, className: cn("relative flex cursor-default items-center gap-2 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2", children: _jsx(ContextMenuPrimitive.CheckboxItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
|
|
38
|
+
}
|
|
39
|
+
function ContextMenuRadioGroup({ ...props }) {
|
|
40
|
+
return (_jsx(ContextMenuPrimitive.RadioGroup, { "data-slot": "context-menu-radio-group", ...props }));
|
|
41
|
+
}
|
|
42
|
+
function ContextMenuRadioItem({ className, children, inset, ...props }) {
|
|
43
|
+
return (_jsxs(ContextMenuPrimitive.RadioItem, { "data-slot": "context-menu-radio-item", "data-inset": inset, className: cn("relative flex cursor-default items-center gap-2 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2", children: _jsx(ContextMenuPrimitive.RadioItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
|
|
44
|
+
}
|
|
45
|
+
function ContextMenuSeparator({ className, ...props }) {
|
|
46
|
+
return (_jsx(ContextMenuPrimitive.Separator, { "data-slot": "context-menu-separator", className: cn("-mx-1 my-1 h-px bg-border/50", className), ...props }));
|
|
47
|
+
}
|
|
48
|
+
function ContextMenuShortcut({ className, ...props }) {
|
|
49
|
+
return (_jsx("span", { "data-slot": "context-menu-shortcut", className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground", className), ...props }));
|
|
50
|
+
}
|
|
51
|
+
export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
|
|
3
|
+
declare function Dialog({ ...props }: DialogPrimitive.Root.Props): React.JSX.Element;
|
|
4
|
+
declare function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props): React.JSX.Element;
|
|
5
|
+
declare function DialogPortal({ ...props }: DialogPrimitive.Portal.Props): React.JSX.Element;
|
|
6
|
+
declare function DialogClose({ ...props }: DialogPrimitive.Close.Props): React.JSX.Element;
|
|
7
|
+
declare function DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props): React.JSX.Element;
|
|
8
|
+
declare function DialogContent({ className, children, showCloseButton, ...props }: DialogPrimitive.Popup.Props & {
|
|
9
|
+
showCloseButton?: boolean;
|
|
10
|
+
}): React.JSX.Element;
|
|
11
|
+
declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
12
|
+
declare function DialogFooter({ className, showCloseButton, children, ...props }: React.ComponentProps<"div"> & {
|
|
13
|
+
showCloseButton?: boolean;
|
|
14
|
+
}): React.JSX.Element;
|
|
15
|
+
declare function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props): React.JSX.Element;
|
|
16
|
+
declare function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props): React.JSX.Element;
|
|
17
|
+
export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
|
|
4
|
+
import { cn } from "#lib/utils";
|
|
5
|
+
import { Button } from "#components/button";
|
|
6
|
+
import { XIcon } from "lucide-react";
|
|
7
|
+
function Dialog({ ...props }) {
|
|
8
|
+
return _jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
|
|
9
|
+
}
|
|
10
|
+
function DialogTrigger({ ...props }) {
|
|
11
|
+
return _jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
|
|
12
|
+
}
|
|
13
|
+
function DialogPortal({ ...props }) {
|
|
14
|
+
return _jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
|
|
15
|
+
}
|
|
16
|
+
function DialogClose({ ...props }) {
|
|
17
|
+
return _jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
|
|
18
|
+
}
|
|
19
|
+
function DialogOverlay({ className, ...props }) {
|
|
20
|
+
return (_jsx(DialogPrimitive.Backdrop, { "data-slot": "dialog-overlay", className: cn("fixed inset-0 isolate z-50 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className), ...props }));
|
|
21
|
+
}
|
|
22
|
+
function DialogContent({ className, children, showCloseButton = true, ...props }) {
|
|
23
|
+
return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Popup, { "data-slot": "dialog-content", className: cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-4xl bg-popover p-6 text-sm text-popover-foreground ring-1 ring-foreground/5 duration-100 outline-none sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", render: _jsx(Button, { variant: "ghost", className: "absolute top-4 right-4", size: "icon-sm" }), children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C" })] }))] })] }));
|
|
24
|
+
}
|
|
25
|
+
function DialogHeader({ className, ...props }) {
|
|
26
|
+
return (_jsx("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-2", className), ...props }));
|
|
27
|
+
}
|
|
28
|
+
function DialogFooter({ className, showCloseButton = false, children, ...props }) {
|
|
29
|
+
return (_jsxs("div", { "data-slot": "dialog-footer", className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props, children: [children, showCloseButton && (_jsx(DialogPrimitive.Close, { render: _jsx(Button, { variant: "outline" }), children: "Close" }))] }));
|
|
30
|
+
}
|
|
31
|
+
function DialogTitle({ className, ...props }) {
|
|
32
|
+
return (_jsx(DialogPrimitive.Title, { "data-slot": "dialog-title", className: cn("text-base leading-none font-medium", className), ...props }));
|
|
33
|
+
}
|
|
34
|
+
function DialogDescription({ className, ...props }) {
|
|
35
|
+
return (_jsx(DialogPrimitive.Description, { "data-slot": "dialog-description", className: cn("text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className), ...props }));
|
|
36
|
+
}
|
|
37
|
+
export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { DirectionProvider, useDirection, } from "@base-ui/react/direction-provider";
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
|
|
3
|
+
declare function Drawer({ modal, showSwipeHandle, snapPoints, swipeDirection, ...props }: DrawerPrimitive.Root.Props & {
|
|
4
|
+
showSwipeHandle?: boolean;
|
|
5
|
+
}): React.JSX.Element;
|
|
6
|
+
declare function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props): React.JSX.Element;
|
|
7
|
+
declare function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props): React.JSX.Element;
|
|
8
|
+
declare function DrawerClose({ ...props }: DrawerPrimitive.Close.Props): React.JSX.Element;
|
|
9
|
+
declare function DrawerOverlay({ className, ...props }: DrawerPrimitive.Backdrop.Props): React.JSX.Element;
|
|
10
|
+
declare function DrawerSwipeHandle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
11
|
+
declare function DrawerContent({ className, children, ...props }: DrawerPrimitive.Popup.Props): React.JSX.Element;
|
|
12
|
+
declare function DrawerHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
13
|
+
declare function DrawerFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
14
|
+
declare function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props): React.JSX.Element;
|
|
15
|
+
declare function DrawerDescription({ className, ...props }: DrawerPrimitive.Description.Props): React.JSX.Element;
|
|
16
|
+
export { Drawer, DrawerPortal, DrawerOverlay, DrawerSwipeHandle, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
|
|
5
|
+
import { cn } from "#lib/utils";
|
|
6
|
+
const DrawerContext = React.createContext(null);
|
|
7
|
+
function useDrawer() {
|
|
8
|
+
const context = React.useContext(DrawerContext);
|
|
9
|
+
if (!context) {
|
|
10
|
+
throw new Error("useDrawer must be used within a Drawer.");
|
|
11
|
+
}
|
|
12
|
+
return context;
|
|
13
|
+
}
|
|
14
|
+
function Drawer({ modal = true, showSwipeHandle = false, snapPoints, swipeDirection = "down", ...props }) {
|
|
15
|
+
const hasSnapPoints = snapPoints != null && snapPoints.length > 0;
|
|
16
|
+
const contextValue = React.useMemo(() => ({ hasSnapPoints, modal, showSwipeHandle, swipeDirection }), [hasSnapPoints, modal, showSwipeHandle, swipeDirection]);
|
|
17
|
+
return (_jsx(DrawerContext.Provider, { value: contextValue, children: _jsx(DrawerPrimitive.Root, { "data-slot": "drawer", modal: modal, snapPoints: snapPoints, swipeDirection: swipeDirection, ...props }) }));
|
|
18
|
+
}
|
|
19
|
+
function DrawerTrigger({ ...props }) {
|
|
20
|
+
return _jsx(DrawerPrimitive.Trigger, { "data-slot": "drawer-trigger", ...props });
|
|
21
|
+
}
|
|
22
|
+
function DrawerPortal({ ...props }) {
|
|
23
|
+
return _jsx(DrawerPrimitive.Portal, { "data-slot": "drawer-portal", ...props });
|
|
24
|
+
}
|
|
25
|
+
function DrawerClose({ ...props }) {
|
|
26
|
+
return _jsx(DrawerPrimitive.Close, { "data-slot": "drawer-close", ...props });
|
|
27
|
+
}
|
|
28
|
+
function DrawerOverlay({ className, ...props }) {
|
|
29
|
+
return (_jsx(DrawerPrimitive.Backdrop, { "data-slot": "drawer-overlay", className: cn("fixed inset-0 z-50 min-h-dvh bg-black/80 opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-snap-points:[--drawer-overlay-min-opacity:0.5] data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs supports-[-webkit-touch-callout:none]:absolute", className), ...props }));
|
|
30
|
+
}
|
|
31
|
+
function DrawerSwipeHandle({ className, ...props }) {
|
|
32
|
+
return (_jsx("div", { "data-slot": "drawer-swipe-handle", "aria-hidden": "true", className: cn("relative z-10 flex shrink-0 cursor-grab transition-opacity duration-200 group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-[swipe-axis=x]/drawer-popup:h-full group-data-[swipe-axis=x]/drawer-popup:w-3 group-data-[swipe-axis=x]/drawer-popup:items-center group-data-[swipe-axis=y]/drawer-popup:h-3 group-data-[swipe-axis=y]/drawer-popup:w-full group-data-[swipe-axis=y]/drawer-popup:justify-center group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:justify-end group-data-[swipe-direction=up]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:items-start after:block after:shrink-0 after:rounded-full after:bg-muted group-data-[swipe-axis=x]/drawer-popup:after:h-[100px] group-data-[swipe-axis=x]/drawer-popup:after:w-1.5 group-data-[swipe-axis=y]/drawer-popup:after:h-1.5 group-data-[swipe-axis=y]/drawer-popup:after:w-[100px] active:cursor-grabbing", className), ...props }));
|
|
33
|
+
}
|
|
34
|
+
function DrawerContent({ className, children, ...props }) {
|
|
35
|
+
const { hasSnapPoints, modal, showSwipeHandle, swipeDirection } = useDrawer();
|
|
36
|
+
const swipeAxis = swipeDirection === "down" || swipeDirection === "up" ? "y" : "x";
|
|
37
|
+
return (_jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [modal === true && (_jsx(DrawerOverlay, { "data-snap-points": hasSnapPoints ? "" : undefined })), _jsx(DrawerPrimitive.Viewport, { "data-slot": "drawer-viewport", "data-modal": modal, className: "pointer-events-none fixed inset-0 z-50 select-none data-[modal=true]:pointer-events-auto", children: _jsxs(DrawerPrimitive.Popup, { "data-slot": "drawer-popup", "data-swipe-axis": swipeAxis, "data-snap-points": hasSnapPoints ? "" : undefined, className: cn(
|
|
38
|
+
// Base.
|
|
39
|
+
"group/drawer-popup pointer-events-auto fixed z-50 m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col rounded-4xl border border-popover bg-popover text-sm text-popover-foreground transition-[transform,height,opacity,filter] duration-450 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none [--drawer-bleed-background:transparent] [--drawer-inset:--spacing(2)] [interpolate-size:allow-keywords] dark:border-border",
|
|
40
|
+
// Nested.
|
|
41
|
+
"data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95",
|
|
42
|
+
// Bleed.
|
|
43
|
+
"after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=x]:after:inset-y-0 data-[swipe-axis=x]:after:w-(--bleed) data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=y]:after:h-(--bleed) data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:right-full data-[swipe-direction=right]:after:left-full data-[swipe-direction=up]:after:bottom-full",
|
|
44
|
+
// Sizing.
|
|
45
|
+
"[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]",
|
|
46
|
+
// Stack.
|
|
47
|
+
"[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-step:0.05]",
|
|
48
|
+
// Transitions.
|
|
49
|
+
"data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]",
|
|
50
|
+
// Axis: y.
|
|
51
|
+
"data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)",
|
|
52
|
+
// Axis: x.
|
|
53
|
+
"data-[swipe-axis=x]:inset-y-0 data-[swipe-axis=x]:flex-row",
|
|
54
|
+
// Direction: down.
|
|
55
|
+
"data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:origin-bottom data-[swipe-direction=down]:[--closed-transform:translate3d(0,calc(100%+var(--drawer-inset,0px)+2px),0)] data-[swipe-direction=down]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--stack-shrink)*var(--stack-height)))]",
|
|
56
|
+
// Direction: up.
|
|
57
|
+
"data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:[--closed-transform:translate3d(0,calc(-100%-var(--drawer-inset,0px)-2px),0)] data-[swipe-direction=up]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--stack-shrink)*var(--stack-height)))]",
|
|
58
|
+
// Direction: left.
|
|
59
|
+
"data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-var(--drawer-inset,0px)-2px),0,0)] data-[swipe-direction=left]:[--translate-x:calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)+(var(--stack-shrink)*100%))]",
|
|
60
|
+
// Direction: right.
|
|
61
|
+
"data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+var(--drawer-inset,0px)+2px),0,0)] data-[swipe-direction=right]:[--translate-x:calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)-(var(--stack-shrink)*100%))]", className), ...props, children: [showSwipeHandle && _jsx(DrawerSwipeHandle, {}), _jsx(DrawerPrimitive.Content, { "data-slot": "drawer-content", className: cn("flex min-h-0 flex-1 flex-col overflow-hidden overscroll-contain rounded-[inherit] transition-opacity duration-300 ease-[cubic-bezier(0.45,1.005,0,1.005)] select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none"), children: children })] }) })] }));
|
|
62
|
+
}
|
|
63
|
+
function DrawerHeader({ className, ...props }) {
|
|
64
|
+
return (_jsx("div", { "data-slot": "drawer-header", className: cn("flex shrink-0 flex-col gap-0.5 p-4 pb-0 group-data-[swipe-axis=y]/drawer-popup:text-center md:gap-1.5 md:text-left", className), ...props }));
|
|
65
|
+
}
|
|
66
|
+
function DrawerFooter({ className, ...props }) {
|
|
67
|
+
return (_jsx("div", { "data-slot": "drawer-footer", className: cn("mt-auto flex shrink-0 flex-col gap-2 p-4 pt-0", className), ...props }));
|
|
68
|
+
}
|
|
69
|
+
function DrawerTitle({ className, ...props }) {
|
|
70
|
+
return (_jsx(DrawerPrimitive.Title, { "data-slot": "drawer-title", className: cn("text-base font-medium text-foreground", className), ...props }));
|
|
71
|
+
}
|
|
72
|
+
function DrawerDescription({ className, ...props }) {
|
|
73
|
+
return (_jsx(DrawerPrimitive.Description, { "data-slot": "drawer-description", className: cn("text-sm text-balance text-muted-foreground", className), ...props }));
|
|
74
|
+
}
|
|
75
|
+
export { Drawer, DrawerPortal, DrawerOverlay, DrawerSwipeHandle, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Menu as MenuPrimitive } from "@base-ui/react/menu";
|
|
3
|
+
declare function DropdownMenu({ ...props }: MenuPrimitive.Root.Props): React.JSX.Element;
|
|
4
|
+
declare function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props): React.JSX.Element;
|
|
5
|
+
declare function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props): React.JSX.Element;
|
|
6
|
+
declare function DropdownMenuContent({ align, alignOffset, side, sideOffset, className, ...props }: MenuPrimitive.Popup.Props & Pick<MenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): React.JSX.Element;
|
|
7
|
+
declare function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props): React.JSX.Element;
|
|
8
|
+
declare function DropdownMenuLabel({ className, inset, ...props }: MenuPrimitive.GroupLabel.Props & {
|
|
9
|
+
inset?: boolean;
|
|
10
|
+
}): React.JSX.Element;
|
|
11
|
+
declare function DropdownMenuItem({ className, inset, variant, ...props }: MenuPrimitive.Item.Props & {
|
|
12
|
+
inset?: boolean;
|
|
13
|
+
variant?: "default" | "destructive";
|
|
14
|
+
}): React.JSX.Element;
|
|
15
|
+
declare function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props): React.JSX.Element;
|
|
16
|
+
declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: MenuPrimitive.SubmenuTrigger.Props & {
|
|
17
|
+
inset?: boolean;
|
|
18
|
+
}): React.JSX.Element;
|
|
19
|
+
declare function DropdownMenuSubContent({ align, alignOffset, side, sideOffset, className, ...props }: React.ComponentProps<typeof DropdownMenuContent>): React.JSX.Element;
|
|
20
|
+
declare function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }: MenuPrimitive.CheckboxItem.Props & {
|
|
21
|
+
inset?: boolean;
|
|
22
|
+
}): React.JSX.Element;
|
|
23
|
+
declare function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props): React.JSX.Element;
|
|
24
|
+
declare function DropdownMenuRadioItem({ className, children, inset, ...props }: MenuPrimitive.RadioItem.Props & {
|
|
25
|
+
inset?: boolean;
|
|
26
|
+
}): React.JSX.Element;
|
|
27
|
+
declare function DropdownMenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props): React.JSX.Element;
|
|
28
|
+
declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
|
|
29
|
+
export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };
|