@nadicodeai/ui 0.4.0 → 0.5.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/AGENTS.md +2 -1
- package/README.md +4 -2
- package/dist/components/accordion.d.ts +5 -6
- package/dist/components/accordion.d.ts.map +1 -1
- package/dist/components/accordion.js +7 -8
- package/dist/components/agent-message.js +1 -1
- package/dist/components/agent-tool-approval.d.ts.map +1 -1
- package/dist/components/agent-tool-approval.js +9 -6
- package/dist/components/ai-elements/artifact.js +1 -1
- package/dist/components/ai-elements/attachments.d.ts +1 -1
- package/dist/components/ai-elements/attachments.d.ts.map +1 -1
- package/dist/components/ai-elements/attachments.js +2 -2
- package/dist/components/ai-elements/audio-player.d.ts.map +1 -1
- package/dist/components/ai-elements/audio-player.js +8 -8
- package/dist/components/ai-elements/chain-of-thought.js +2 -2
- package/dist/components/ai-elements/checkpoint.d.ts +1 -1
- package/dist/components/ai-elements/checkpoint.d.ts.map +1 -1
- package/dist/components/ai-elements/checkpoint.js +1 -1
- package/dist/components/ai-elements/commit.d.ts.map +1 -1
- package/dist/components/ai-elements/commit.js +1 -1
- package/dist/components/ai-elements/context.d.ts +4 -4
- package/dist/components/ai-elements/context.d.ts.map +1 -1
- package/dist/components/ai-elements/context.js +4 -3
- package/dist/components/ai-elements/file-tree.d.ts.map +1 -1
- package/dist/components/ai-elements/file-tree.js +1 -1
- package/dist/components/ai-elements/inline-citation.d.ts.map +1 -1
- package/dist/components/ai-elements/inline-citation.js +2 -2
- package/dist/components/ai-elements/message.js +1 -1
- package/dist/components/ai-elements/mic-selector.d.ts.map +1 -1
- package/dist/components/ai-elements/mic-selector.js +2 -2
- package/dist/components/ai-elements/model-selector.d.ts +1 -1
- package/dist/components/ai-elements/model-selector.d.ts.map +1 -1
- package/dist/components/ai-elements/model-selector.js +1 -1
- package/dist/components/ai-elements/open-in-chat.d.ts.map +1 -1
- package/dist/components/ai-elements/open-in-chat.js +8 -5
- package/dist/components/ai-elements/plan.d.ts +3 -2
- package/dist/components/ai-elements/plan.d.ts.map +1 -1
- package/dist/components/ai-elements/plan.js +3 -3
- package/dist/components/ai-elements/prompt-input.d.ts +2 -2
- package/dist/components/ai-elements/prompt-input.d.ts.map +1 -1
- package/dist/components/ai-elements/prompt-input.js +12 -12
- package/dist/components/ai-elements/queue.d.ts.map +1 -1
- package/dist/components/ai-elements/queue.js +2 -2
- package/dist/components/ai-elements/reasoning.js +2 -2
- package/dist/components/ai-elements/sandbox.js +3 -3
- package/dist/components/ai-elements/schema-display.js +4 -4
- package/dist/components/ai-elements/sources.js +1 -1
- package/dist/components/ai-elements/stack-trace.d.ts.map +1 -1
- package/dist/components/ai-elements/stack-trace.js +3 -3
- package/dist/components/ai-elements/task.d.ts.map +1 -1
- package/dist/components/ai-elements/task.js +3 -3
- package/dist/components/ai-elements/test-results.js +1 -1
- package/dist/components/ai-elements/tool.js +2 -2
- package/dist/components/ai-elements/transcription.js +1 -1
- package/dist/components/ai-elements/voice-selector.d.ts +3 -2
- package/dist/components/ai-elements/voice-selector.d.ts.map +1 -1
- package/dist/components/ai-elements/voice-selector.js +2 -2
- package/dist/components/ai-elements/web-preview.d.ts.map +1 -1
- package/dist/components/ai-elements/web-preview.js +2 -2
- package/dist/components/alert-dialog.d.ts +9 -9
- package/dist/components/alert-dialog.d.ts.map +1 -1
- package/dist/components/alert-dialog.js +14 -12
- package/dist/components/alert.d.ts +2 -1
- package/dist/components/alert.d.ts.map +1 -1
- package/dist/components/alert.js +8 -5
- package/dist/components/aspect-ratio.d.ts +3 -2
- package/dist/components/aspect-ratio.d.ts.map +1 -1
- package/dist/components/aspect-ratio.js +6 -4
- package/dist/components/avatar.d.ts +5 -5
- package/dist/components/avatar.d.ts.map +1 -1
- package/dist/components/avatar.js +5 -6
- package/dist/components/badge.d.ts +2 -4
- package/dist/components/badge.d.ts.map +1 -1
- package/dist/components/badge.js +21 -13
- package/dist/components/breadcrumb.d.ts +3 -4
- package/dist/components/breadcrumb.d.ts.map +1 -1
- package/dist/components/breadcrumb.js +20 -12
- package/dist/components/button-group.d.ts +2 -3
- package/dist/components/button-group.d.ts.map +1 -1
- package/dist/components/button-group.js +17 -9
- package/dist/components/button.d.ts +2 -4
- package/dist/components/button.d.ts.map +1 -1
- package/dist/components/button.js +17 -19
- package/dist/components/calendar.d.ts +5 -3
- package/dist/components/calendar.d.ts.map +1 -1
- package/dist/components/calendar.js +17 -17
- package/dist/components/card.d.ts +3 -1
- package/dist/components/card.d.ts.map +1 -1
- package/dist/components/card.js +6 -6
- package/dist/components/carousel.d.ts +10 -1
- package/dist/components/carousel.d.ts.map +1 -1
- package/dist/components/carousel.js +10 -10
- package/dist/components/chart.d.ts.map +1 -1
- package/dist/components/chart.js +2 -3
- package/dist/components/checkbox.d.ts +2 -3
- package/dist/components/checkbox.d.ts.map +1 -1
- package/dist/components/checkbox.js +3 -3
- package/dist/components/collapsible.d.ts +4 -4
- package/dist/components/collapsible.d.ts.map +1 -1
- package/dist/components/collapsible.js +3 -4
- package/dist/components/combobox.d.ts +1 -1
- package/dist/components/combobox.d.ts.map +1 -1
- package/dist/components/combobox.js +10 -11
- package/dist/components/command.d.ts +4 -3
- package/dist/components/command.d.ts.map +1 -1
- package/dist/components/command.js +13 -12
- package/dist/components/context-menu.d.ts +19 -15
- package/dist/components/context-menu.d.ts.map +1 -1
- package/dist/components/context-menu.js +26 -26
- package/dist/components/dialog.d.ts +9 -9
- package/dist/components/dialog.d.ts.map +1 -1
- package/dist/components/dialog.js +8 -9
- package/dist/components/direction.d.ts +1 -7
- package/dist/components/direction.d.ts.map +1 -1
- package/dist/components/direction.js +1 -8
- package/dist/components/drawer.d.ts +13 -10
- package/dist/components/drawer.d.ts.map +1 -1
- package/dist/components/drawer.js +51 -10
- package/dist/components/dropdown-menu.d.ts +20 -16
- package/dist/components/dropdown-menu.d.ts.map +1 -1
- package/dist/components/dropdown-menu.js +28 -29
- package/dist/components/empty.d.ts.map +1 -1
- package/dist/components/empty.js +5 -5
- package/dist/components/field.d.ts.map +1 -1
- package/dist/components/field.js +11 -19
- package/dist/components/form.d.ts +4 -4
- package/dist/components/form.d.ts.map +1 -1
- package/dist/components/form.js +17 -5
- package/dist/components/hover-card.d.ts +4 -5
- package/dist/components/hover-card.d.ts.map +1 -1
- package/dist/components/hover-card.js +5 -5
- package/dist/components/input-group.d.ts +3 -1
- package/dist/components/input-group.d.ts.map +1 -1
- package/dist/components/input-group.js +10 -16
- package/dist/components/input-otp.d.ts.map +1 -1
- package/dist/components/input-otp.js +5 -5
- package/dist/components/input.d.ts.map +1 -1
- package/dist/components/input.js +2 -1
- package/dist/components/item.d.ts +3 -4
- package/dist/components/item.d.ts.map +1 -1
- package/dist/components/item.js +29 -18
- package/dist/components/kbd.d.ts.map +1 -1
- package/dist/components/kbd.js +1 -1
- package/dist/components/label.d.ts +1 -2
- package/dist/components/label.d.ts.map +1 -1
- package/dist/components/label.js +1 -2
- package/dist/components/menubar.d.ts +21 -18
- package/dist/components/menubar.d.ts.map +1 -1
- package/dist/components/menubar.js +28 -23
- package/dist/components/native-select.d.ts +3 -2
- package/dist/components/native-select.d.ts.map +1 -1
- package/dist/components/native-select.js +2 -2
- package/dist/components/navigation-menu.d.ts +10 -13
- package/dist/components/navigation-menu.d.ts.map +1 -1
- package/dist/components/navigation-menu.js +13 -14
- package/dist/components/pagination.d.ts +8 -4
- package/dist/components/pagination.d.ts.map +1 -1
- package/dist/components/pagination.js +10 -13
- package/dist/components/popover.d.ts +7 -8
- package/dist/components/popover.d.ts.map +1 -1
- package/dist/components/popover.js +7 -11
- package/dist/components/progress.d.ts +7 -4
- package/dist/components/progress.d.ts.map +1 -1
- package/dist/components/progress.js +17 -5
- package/dist/components/radio-group.d.ts +4 -4
- package/dist/components/radio-group.d.ts.map +1 -1
- package/dist/components/radio-group.js +4 -5
- package/dist/components/resizable.d.ts.map +1 -1
- package/dist/components/resizable.js +2 -2
- package/dist/components/scroll-area.d.ts +3 -3
- package/dist/components/scroll-area.d.ts.map +1 -1
- package/dist/components/scroll-area.js +2 -5
- package/dist/components/select.d.ts +11 -11
- package/dist/components/select.d.ts.map +1 -1
- package/dist/components/select.js +14 -18
- package/dist/components/separator.d.ts +2 -3
- package/dist/components/separator.d.ts.map +1 -1
- package/dist/components/separator.js +3 -4
- package/dist/components/sheet.d.ts +7 -7
- package/dist/components/sheet.d.ts.map +1 -1
- package/dist/components/sheet.js +7 -10
- package/dist/components/sidebar.d.ts +9 -15
- package/dist/components/sidebar.d.ts.map +1 -1
- package/dist/components/sidebar.js +85 -41
- package/dist/components/skeleton.js +1 -1
- package/dist/components/slider.d.ts +2 -3
- package/dist/components/slider.d.ts.map +1 -1
- package/dist/components/slider.js +4 -6
- package/dist/components/sonner.d.ts +1 -1
- package/dist/components/sonner.d.ts.map +1 -1
- package/dist/components/sonner.js +15 -9
- package/dist/components/spinner.d.ts.map +1 -1
- package/dist/components/spinner.js +2 -2
- package/dist/components/switch.d.ts +3 -4
- package/dist/components/switch.d.ts.map +1 -1
- package/dist/components/switch.js +2 -3
- package/dist/components/table.js +2 -2
- package/dist/components/tabs.d.ts +5 -6
- package/dist/components/tabs.d.ts.map +1 -1
- package/dist/components/tabs.js +5 -6
- package/dist/components/textarea.js +1 -1
- package/dist/components/theme-mode-switcher.js +4 -3
- package/dist/components/toggle-group.d.ts +5 -3
- package/dist/components/toggle-group.d.ts.map +1 -1
- package/dist/components/toggle-group.js +12 -7
- package/dist/components/toggle.d.ts +2 -3
- package/dist/components/toggle.d.ts.map +1 -1
- package/dist/components/toggle.js +8 -8
- package/dist/components/tooltip.d.ts +5 -6
- package/dist/components/tooltip.d.ts.map +1 -1
- package/dist/components/tooltip.js +5 -6
- package/dist/hooks/use-controllable-state.d.ts +9 -0
- package/dist/hooks/use-controllable-state.d.ts.map +1 -0
- package/dist/hooks/use-controllable-state.js +25 -0
- package/dist/hooks/use-mobile.d.ts.map +1 -1
- package/dist/hooks/use-mobile.js +0 -1
- package/docs/agents/nadicodeai-ui.md +1 -1
- package/docs/migration/base-ui-migration.md +73 -0
- package/llms.txt +2 -2
- package/package.json +4 -6
|
@@ -1,13 +1,10 @@
|
|
|
1
|
-
"use client";
|
|
2
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { ScrollArea as ScrollAreaPrimitive } from "
|
|
2
|
+
import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
|
|
4
3
|
import { cn } from "../lib/utils.js";
|
|
5
4
|
function ScrollArea({ className, children, ...props }) {
|
|
6
5
|
return (_jsxs(ScrollAreaPrimitive.Root, { "data-slot": "scroll-area", className: cn("relative", className), ...props, children: [_jsx(ScrollAreaPrimitive.Viewport, { "data-slot": "scroll-area-viewport", className: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1", children: children }), _jsx(ScrollBar, {}), _jsx(ScrollAreaPrimitive.Corner, {})] }));
|
|
7
6
|
}
|
|
8
7
|
function ScrollBar({ className, orientation = "vertical", ...props }) {
|
|
9
|
-
return (_jsx(ScrollAreaPrimitive.
|
|
10
|
-
"h-full w-2.5 border-l border-l-transparent", orientation === "horizontal" &&
|
|
11
|
-
"h-2.5 flex-col border-t border-t-transparent", className), ...props, children: _jsx(ScrollAreaPrimitive.ScrollAreaThumb, { "data-slot": "scroll-area-thumb", className: "relative flex-1 rounded-full bg-border" }) }));
|
|
8
|
+
return (_jsx(ScrollAreaPrimitive.Scrollbar, { "data-slot": "scroll-area-scrollbar", "data-orientation": orientation, orientation: orientation, className: cn("flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent", className), ...props, children: _jsx(ScrollAreaPrimitive.Thumb, { "data-slot": "scroll-area-thumb", className: "relative flex-1 rounded-full bg-border" }) }));
|
|
12
9
|
}
|
|
13
10
|
export { ScrollArea, ScrollBar };
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { Select as SelectPrimitive } from "
|
|
3
|
-
declare
|
|
4
|
-
declare function SelectGroup({ ...props }:
|
|
5
|
-
declare function SelectValue({ ...props }:
|
|
6
|
-
declare function SelectTrigger({ className, size, children, ...props }:
|
|
2
|
+
import { Select as SelectPrimitive } from "@base-ui/react/select";
|
|
3
|
+
declare const Select: typeof SelectPrimitive.Root;
|
|
4
|
+
declare function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props): React.JSX.Element;
|
|
5
|
+
declare function SelectValue({ className, ...props }: SelectPrimitive.Value.Props): React.JSX.Element;
|
|
6
|
+
declare function SelectTrigger({ className, size, children, ...props }: SelectPrimitive.Trigger.Props & {
|
|
7
7
|
size?: "sm" | "default";
|
|
8
8
|
}): React.JSX.Element;
|
|
9
|
-
declare function SelectContent({ className, children,
|
|
10
|
-
declare function SelectLabel({ className, ...props }:
|
|
11
|
-
declare function SelectItem({ className, children, ...props }:
|
|
12
|
-
declare function SelectSeparator({ className, ...props }:
|
|
13
|
-
declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.
|
|
14
|
-
declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.
|
|
9
|
+
declare function SelectContent({ className, children, side, sideOffset, align, alignOffset, alignItemWithTrigger, ...props }: SelectPrimitive.Popup.Props & Pick<SelectPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger">): React.JSX.Element;
|
|
10
|
+
declare function SelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props): React.JSX.Element;
|
|
11
|
+
declare function SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props): React.JSX.Element;
|
|
12
|
+
declare function SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props): React.JSX.Element;
|
|
13
|
+
declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>): React.JSX.Element;
|
|
14
|
+
declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>): React.JSX.Element;
|
|
15
15
|
export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };
|
|
16
16
|
//# sourceMappingURL=select.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/components/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/components/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAKjE,QAAA,MAAM,MAAM,6BAAuB,CAAA;AAEnC,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,qBAQxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,qBAQxE;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,IAAgB,EAChB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,OAAO,CAAC,KAAK,GAAG;IACjC,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;CACxB,qBAmBA;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,IAAe,EACf,UAAc,EACd,KAAgB,EAChB,WAAe,EACf,oBAA2B,EAC3B,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,GAC5B,IAAI,CACF,eAAe,CAAC,UAAU,CAAC,KAAK,EAChC,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,GAAG,sBAAsB,CACzE,qBAwBF;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,UAAU,CAAC,KAAK,qBAQlC;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,qBAsB5B;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,SAAS,CAAC,KAAK,qBAQjC;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,aAAa,CAAC,qBAc5D;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,eAAe,CAAC,qBAc9D;AAED,OAAO,EACL,MAAM,EACN,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,WAAW,GACZ,CAAA"}
|
|
@@ -1,38 +1,34 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import {
|
|
4
|
-
import { Select as SelectPrimitive } from "radix-ui";
|
|
3
|
+
import { Select as SelectPrimitive } from "@base-ui/react/select";
|
|
5
4
|
import { cn } from "../lib/utils.js";
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react";
|
|
6
|
+
const Select = SelectPrimitive.Root;
|
|
7
|
+
function SelectGroup({ className, ...props }) {
|
|
8
|
+
return (_jsx(SelectPrimitive.Group, { "data-slot": "select-group", className: cn("scroll-my-1 p-1", className), ...props }));
|
|
8
9
|
}
|
|
9
|
-
function
|
|
10
|
-
return _jsx(SelectPrimitive.
|
|
11
|
-
}
|
|
12
|
-
function SelectValue({ ...props }) {
|
|
13
|
-
return _jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
|
|
10
|
+
function SelectValue({ className, ...props }) {
|
|
11
|
+
return (_jsx(SelectPrimitive.Value, { "data-slot": "select-value", className: cn("flex flex-1 text-left", className), ...props }));
|
|
14
12
|
}
|
|
15
13
|
function SelectTrigger({ className, size = "default", children, ...props }) {
|
|
16
|
-
return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("flex w-fit items-center justify-between gap-
|
|
14
|
+
return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { render: _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" }) })] }));
|
|
17
15
|
}
|
|
18
|
-
function SelectContent({ className, children,
|
|
19
|
-
return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.
|
|
20
|
-
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, align: align, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn("p-1", position === "popper" &&
|
|
21
|
-
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"), children: children }), _jsx(SelectScrollDownButton, {})] }) }));
|
|
16
|
+
function SelectContent({ className, children, side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, alignItemWithTrigger = true, ...props }) {
|
|
17
|
+
return (_jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, alignItemWithTrigger: alignItemWithTrigger, className: "isolate z-50", children: _jsxs(SelectPrimitive.Popup, { "data-slot": "select-content", "data-align-trigger": alignItemWithTrigger, className: cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-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, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.List, { children: children }), _jsx(SelectScrollDownButton, {})] }) }) }));
|
|
22
18
|
}
|
|
23
19
|
function SelectLabel({ className, ...props }) {
|
|
24
|
-
return (_jsx(SelectPrimitive.
|
|
20
|
+
return (_jsx(SelectPrimitive.GroupLabel, { "data-slot": "select-label", className: cn("px-1.5 py-1 text-xs text-muted-foreground", className), ...props }));
|
|
25
21
|
}
|
|
26
22
|
function SelectItem({ className, children, ...props }) {
|
|
27
|
-
return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("relative flex w-full cursor-default items-center gap-
|
|
23
|
+
return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**: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 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), ...props, children: [_jsx(SelectPrimitive.ItemText, { className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap", children: children }), _jsx(SelectPrimitive.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" }) })] }));
|
|
28
24
|
}
|
|
29
25
|
function SelectSeparator({ className, ...props }) {
|
|
30
26
|
return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn("pointer-events-none -mx-1 my-1 h-px bg-border", className), ...props }));
|
|
31
27
|
}
|
|
32
28
|
function SelectScrollUpButton({ className, ...props }) {
|
|
33
|
-
return (_jsx(SelectPrimitive.
|
|
29
|
+
return (_jsx(SelectPrimitive.ScrollUpArrow, { "data-slot": "select-scroll-up-button", className: cn("top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: _jsx(ChevronUpIcon, {}) }));
|
|
34
30
|
}
|
|
35
31
|
function SelectScrollDownButton({ className, ...props }) {
|
|
36
|
-
return (_jsx(SelectPrimitive.
|
|
32
|
+
return (_jsx(SelectPrimitive.ScrollDownArrow, { "data-slot": "select-scroll-down-button", className: cn("bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: _jsx(ChevronDownIcon, {}) }));
|
|
37
33
|
}
|
|
38
34
|
export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): React.JSX.Element;
|
|
1
|
+
import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
|
|
2
|
+
declare function Separator({ className, orientation, ...props }: SeparatorPrimitive.Props): import("react").JSX.Element;
|
|
4
3
|
export { Separator };
|
|
5
4
|
//# sourceMappingURL=separator.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../src/components/separator.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../src/components/separator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAA;AAI1E,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,WAA0B,EAC1B,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,KAAK,+BAY1B;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
"use client";
|
|
2
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { Separator as SeparatorPrimitive } from "
|
|
2
|
+
import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
|
|
4
3
|
import { cn } from "../lib/utils.js";
|
|
5
|
-
function Separator({ className, orientation = "horizontal",
|
|
6
|
-
return (_jsx(SeparatorPrimitive
|
|
4
|
+
function Separator({ className, orientation = "horizontal", ...props }) {
|
|
5
|
+
return (_jsx(SeparatorPrimitive, { "data-slot": "separator", orientation: orientation, className: cn("shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch", className), ...props }));
|
|
7
6
|
}
|
|
8
7
|
export { Separator };
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { Dialog as SheetPrimitive } from "
|
|
3
|
-
declare function Sheet({ ...props }:
|
|
4
|
-
declare function SheetTrigger({ ...props }:
|
|
5
|
-
declare function SheetClose({ ...props }:
|
|
6
|
-
declare function SheetContent({ className, children, side, showCloseButton, ...props }:
|
|
2
|
+
import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
|
|
3
|
+
declare function Sheet({ ...props }: SheetPrimitive.Root.Props): React.JSX.Element;
|
|
4
|
+
declare function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props): React.JSX.Element;
|
|
5
|
+
declare function SheetClose({ ...props }: SheetPrimitive.Close.Props): React.JSX.Element;
|
|
6
|
+
declare function SheetContent({ className, children, side, showCloseButton, ...props }: SheetPrimitive.Popup.Props & {
|
|
7
7
|
side?: "top" | "right" | "bottom" | "left";
|
|
8
8
|
showCloseButton?: boolean;
|
|
9
9
|
}): React.JSX.Element;
|
|
10
10
|
declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
11
11
|
declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
12
|
-
declare function SheetTitle({ className, ...props }:
|
|
13
|
-
declare function SheetDescription({ className, ...props }:
|
|
12
|
+
declare function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props): React.JSX.Element;
|
|
13
|
+
declare function SheetDescription({ className, ...props }: SheetPrimitive.Description.Props): React.JSX.Element;
|
|
14
14
|
export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };
|
|
15
15
|
//# sourceMappingURL=sheet.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../src/components/sheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../src/components/sheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAMhE,iBAAS,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,qBAErD;AAED,iBAAS,YAAY,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,OAAO,CAAC,KAAK,qBAE/D;AAED,iBAAS,UAAU,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,KAAK,qBAE3D;AAmBD,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,QAAQ,EACR,IAAc,EACd,eAAsB,EACtB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,KAAK,GAAG;IAC9B,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,qBAiCA;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQxE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,KAAK,qBAWtE;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,WAAW,CAAC,KAAK,qBAQlC;AAED,OAAO,EACL,KAAK,EACL,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAU,EACV,gBAAgB,GACjB,CAAA"}
|
package/dist/components/sheet.js
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import {
|
|
4
|
-
import { Dialog as SheetPrimitive } from "radix-ui";
|
|
3
|
+
import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
|
|
5
4
|
import { cn } from "../lib/utils.js";
|
|
5
|
+
import { Button } from "./button.js";
|
|
6
|
+
import { XIcon } from "lucide-react";
|
|
6
7
|
function Sheet({ ...props }) {
|
|
7
8
|
return _jsx(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
|
|
8
9
|
}
|
|
@@ -16,23 +17,19 @@ function SheetPortal({ ...props }) {
|
|
|
16
17
|
return _jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
|
|
17
18
|
}
|
|
18
19
|
function SheetOverlay({ className, ...props }) {
|
|
19
|
-
return (_jsx(SheetPrimitive.
|
|
20
|
+
return (_jsx(SheetPrimitive.Backdrop, { "data-slot": "sheet-overlay", className: cn("fixed inset-0 z-50 bg-foreground/50 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs", className), ...props }));
|
|
20
21
|
}
|
|
21
22
|
function SheetContent({ className, children, side = "right", showCloseButton = true, ...props }) {
|
|
22
|
-
return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.
|
|
23
|
-
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm", side === "left" &&
|
|
24
|
-
"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm", side === "top" &&
|
|
25
|
-
"inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top", side === "bottom" &&
|
|
26
|
-
"inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom", className), ...props, children: [children, showCloseButton && (_jsxs(SheetPrimitive.Close, { className: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary", children: [_jsx(XIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
|
|
23
|
+
return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Popup, { "data-slot": "sheet-content", "data-side": side, className: cn("fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm", className), ...props, children: [children, showCloseButton && (_jsxs(SheetPrimitive.Close, { "data-slot": "sheet-close", render: _jsx(Button, { variant: "ghost", className: "absolute top-3 right-3", size: "icon-sm" }), children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
|
|
27
24
|
}
|
|
28
25
|
function SheetHeader({ className, ...props }) {
|
|
29
|
-
return (_jsx("div", { "data-slot": "sheet-header", className: cn("flex flex-col gap-
|
|
26
|
+
return (_jsx("div", { "data-slot": "sheet-header", className: cn("flex flex-col gap-0.5 p-4", className), ...props }));
|
|
30
27
|
}
|
|
31
28
|
function SheetFooter({ className, ...props }) {
|
|
32
29
|
return (_jsx("div", { "data-slot": "sheet-footer", className: cn("mt-auto flex flex-col gap-2 p-4", className), ...props }));
|
|
33
30
|
}
|
|
34
31
|
function SheetTitle({ className, ...props }) {
|
|
35
|
-
return (_jsx(SheetPrimitive.Title, { "data-slot": "sheet-title", className: cn("font-
|
|
32
|
+
return (_jsx(SheetPrimitive.Title, { "data-slot": "sheet-title", className: cn("text-base font-medium text-foreground", className), ...props }));
|
|
36
33
|
}
|
|
37
34
|
function SheetDescription({ className, ...props }) {
|
|
38
35
|
return (_jsx(SheetPrimitive.Description, { "data-slot": "sheet-description", className: cn("text-sm text-muted-foreground", className), ...props }));
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import { useRender } from "@base-ui/react/use-render";
|
|
2
3
|
import { type VariantProps } from "class-variance-authority";
|
|
3
4
|
import { Button } from "./button";
|
|
4
5
|
import { Input } from "./input";
|
|
@@ -19,7 +20,7 @@ declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: se
|
|
|
19
20
|
open?: boolean;
|
|
20
21
|
onOpenChange?: (open: boolean) => void;
|
|
21
22
|
}): React.JSX.Element;
|
|
22
|
-
declare function Sidebar({ side, variant, collapsible, className, children, ...props }: React.ComponentProps<"div"> & {
|
|
23
|
+
declare function Sidebar({ side, variant, collapsible, className, children, dir, ...props }: React.ComponentProps<"div"> & {
|
|
23
24
|
side?: "left" | "right";
|
|
24
25
|
variant?: "sidebar" | "floating" | "inset";
|
|
25
26
|
collapsible?: "offcanvas" | "icon" | "none";
|
|
@@ -33,12 +34,8 @@ declare function SidebarFooter({ className, ...props }: React.ComponentProps<"di
|
|
|
33
34
|
declare function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
|
|
34
35
|
declare function SidebarContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
35
36
|
declare function SidebarGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
36
|
-
declare function SidebarGroupLabel({ className,
|
|
37
|
-
|
|
38
|
-
}): React.JSX.Element;
|
|
39
|
-
declare function SidebarGroupAction({ className, asChild, ...props }: React.ComponentProps<"button"> & {
|
|
40
|
-
asChild?: boolean;
|
|
41
|
-
}): React.JSX.Element;
|
|
37
|
+
declare function SidebarGroupLabel({ className, render, ...props }: useRender.ComponentProps<"div"> & React.ComponentProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
|
|
38
|
+
declare function SidebarGroupAction({ className, render, ...props }: useRender.ComponentProps<"button"> & React.ComponentProps<"button">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
|
|
42
39
|
declare function SidebarGroupContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
43
40
|
declare function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
|
|
44
41
|
declare function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
|
|
@@ -46,25 +43,22 @@ declare const sidebarMenuButtonVariants: (props?: ({
|
|
|
46
43
|
variant?: "default" | "outline" | null | undefined;
|
|
47
44
|
size?: "default" | "sm" | "lg" | null | undefined;
|
|
48
45
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
49
|
-
declare function SidebarMenuButton({
|
|
50
|
-
asChild?: boolean;
|
|
46
|
+
declare function SidebarMenuButton({ render, isActive, variant, size, tooltip, className, ...props }: useRender.ComponentProps<"button"> & React.ComponentProps<"button"> & {
|
|
51
47
|
isActive?: boolean;
|
|
52
48
|
tooltip?: string | React.ComponentProps<typeof TooltipContent>;
|
|
53
49
|
} & VariantProps<typeof sidebarMenuButtonVariants>): React.JSX.Element;
|
|
54
|
-
declare function SidebarMenuAction({ className,
|
|
55
|
-
asChild?: boolean;
|
|
50
|
+
declare function SidebarMenuAction({ className, render, showOnHover, ...props }: useRender.ComponentProps<"button"> & React.ComponentProps<"button"> & {
|
|
56
51
|
showOnHover?: boolean;
|
|
57
|
-
}): React.
|
|
52
|
+
}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
|
|
58
53
|
declare function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
59
54
|
declare function SidebarMenuSkeleton({ className, showIcon, ...props }: React.ComponentProps<"div"> & {
|
|
60
55
|
showIcon?: boolean;
|
|
61
56
|
}): React.JSX.Element;
|
|
62
57
|
declare function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
|
|
63
58
|
declare function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
|
|
64
|
-
declare function SidebarMenuSubButton({
|
|
65
|
-
asChild?: boolean;
|
|
59
|
+
declare function SidebarMenuSubButton({ render, size, isActive, className, ...props }: useRender.ComponentProps<"a"> & React.ComponentProps<"a"> & {
|
|
66
60
|
size?: "sm" | "md";
|
|
67
61
|
isActive?: boolean;
|
|
68
|
-
}): React.
|
|
62
|
+
}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
|
|
69
63
|
export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, };
|
|
70
64
|
//# sourceMappingURL=sidebar.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../src/components/sidebar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../src/components/sidebar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import * as React from "react";
|
|
4
|
+
import { mergeProps } from "@base-ui/react/merge-props";
|
|
5
|
+
import { useRender } from "@base-ui/react/use-render";
|
|
4
6
|
import { cva } from "class-variance-authority";
|
|
5
|
-
import { PanelLeftIcon } from "lucide-react";
|
|
6
|
-
import { Slot } from "radix-ui";
|
|
7
7
|
import { useIsMobile } from "../hooks/use-mobile.js";
|
|
8
8
|
import { cn } from "../lib/utils.js";
|
|
9
9
|
import { Button } from "./button.js";
|
|
@@ -12,6 +12,7 @@ import { Separator } from "./separator.js";
|
|
|
12
12
|
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from "./sheet.js";
|
|
13
13
|
import { Skeleton } from "./skeleton.js";
|
|
14
14
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./tooltip.js";
|
|
15
|
+
import { PanelLeftIcon } from "lucide-react";
|
|
15
16
|
const SIDEBAR_COOKIE_NAME = "sidebar_state";
|
|
16
17
|
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
|
|
17
18
|
const SIDEBAR_WIDTH = "16rem";
|
|
@@ -72,45 +73,43 @@ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: set
|
|
|
72
73
|
setOpenMobile,
|
|
73
74
|
toggleSidebar,
|
|
74
75
|
}), [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]);
|
|
75
|
-
return (_jsx(SidebarContext.Provider, { value: contextValue, children: _jsx(TooltipProvider, {
|
|
76
|
+
return (_jsx(SidebarContext.Provider, { value: contextValue, children: _jsx(TooltipProvider, { delay: 0, children: _jsx("div", { "data-slot": "sidebar-wrapper", style: {
|
|
76
77
|
"--sidebar-width": SIDEBAR_WIDTH,
|
|
77
78
|
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
|
|
78
79
|
...style,
|
|
79
80
|
}, className: cn("group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar", className), ...props, children: children }) }) }));
|
|
80
81
|
}
|
|
81
|
-
function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }) {
|
|
82
|
+
function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, dir, ...props }) {
|
|
82
83
|
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
|
|
83
84
|
if (collapsible === "none") {
|
|
84
85
|
return (_jsx("div", { "data-slot": "sidebar", className: cn("flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground", className), ...props, children: children }));
|
|
85
86
|
}
|
|
86
87
|
if (isMobile) {
|
|
87
|
-
return (_jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: _jsxs(SheetContent, { "data-sidebar": "sidebar", "data-slot": "sidebar", "data-mobile": "true", className: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden", style: {
|
|
88
|
+
return (_jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: _jsxs(SheetContent, { dir: dir, "data-sidebar": "sidebar", "data-slot": "sidebar", "data-mobile": "true", className: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden", style: {
|
|
88
89
|
"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
|
|
89
90
|
}, side: side, children: [_jsxs(SheetHeader, { className: "sr-only", children: [_jsx(SheetTitle, { children: "Sidebar" }), _jsx(SheetDescription, { children: "Displays the mobile sidebar." })] }), _jsx("div", { className: "flex h-full w-full flex-col", children: children })] }) }));
|
|
90
91
|
}
|
|
91
92
|
return (_jsxs("div", { className: "group peer hidden text-sidebar-foreground md:block", "data-state": state, "data-collapsible": state === "collapsed" ? collapsible : "", "data-variant": variant, "data-side": side, "data-slot": "sidebar", children: [_jsx("div", { "data-slot": "sidebar-gap", className: cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", variant === "floating" || variant === "inset"
|
|
92
93
|
? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
|
|
93
|
-
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)") }), _jsx("div", { "data-slot": "sidebar-container", className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
|
|
94
|
-
? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
|
|
95
|
-
: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
|
|
94
|
+
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)") }), _jsx("div", { "data-slot": "sidebar-container", "data-side": side, className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
|
|
96
95
|
// Adjust the padding for floating and inset variants.
|
|
97
96
|
variant === "floating" || variant === "inset"
|
|
98
97
|
? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
|
|
99
|
-
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l", className), ...props, children: _jsx("div", { "data-sidebar": "sidebar", "data-slot": "sidebar-inner", className: "flex
|
|
98
|
+
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l", className), ...props, children: _jsx("div", { "data-sidebar": "sidebar", "data-slot": "sidebar-inner", className: "flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border", children: children }) })] }));
|
|
100
99
|
}
|
|
101
100
|
function SidebarTrigger({ className, onClick, ...props }) {
|
|
102
101
|
const { toggleSidebar } = useSidebar();
|
|
103
|
-
return (_jsxs(Button, { "data-sidebar": "trigger", "data-slot": "sidebar-trigger", variant: "ghost", size: "icon", className: cn(
|
|
102
|
+
return (_jsxs(Button, { "data-sidebar": "trigger", "data-slot": "sidebar-trigger", variant: "ghost", size: "icon-sm", className: cn(className), onClick: (event) => {
|
|
104
103
|
onClick?.(event);
|
|
105
104
|
toggleSidebar();
|
|
106
105
|
}, ...props, children: [_jsx(PanelLeftIcon, {}), _jsx("span", { className: "sr-only", children: "Toggle Sidebar" })] }));
|
|
107
106
|
}
|
|
108
107
|
function SidebarRail({ className, ...props }) {
|
|
109
108
|
const { toggleSidebar } = useSidebar();
|
|
110
|
-
return (_jsx("button", { "data-sidebar": "rail", "data-slot": "sidebar-rail", "aria-label": "Toggle Sidebar", tabIndex: -1, onClick: toggleSidebar, title: "Toggle Sidebar", className: cn("absolute inset-y-0 z-20 hidden w-4
|
|
109
|
+
return (_jsx("button", { "data-sidebar": "rail", "data-slot": "sidebar-rail", "aria-label": "Toggle Sidebar", tabIndex: -1, onClick: toggleSidebar, title: "Toggle Sidebar", className: cn("absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className), ...props }));
|
|
111
110
|
}
|
|
112
111
|
function SidebarInset({ className, ...props }) {
|
|
113
|
-
return (_jsx("main", { "data-slot": "sidebar-inset", className: cn("relative flex w-full flex-1 flex-col bg-background
|
|
112
|
+
return (_jsx("main", { "data-slot": "sidebar-inset", className: cn("relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2", className), ...props }));
|
|
114
113
|
}
|
|
115
114
|
function SidebarInput({ className, ...props }) {
|
|
116
115
|
return (_jsx(Input, { "data-slot": "sidebar-input", "data-sidebar": "input", className: cn("h-8 w-full bg-background shadow-none", className), ...props }));
|
|
@@ -125,31 +124,47 @@ function SidebarSeparator({ className, ...props }) {
|
|
|
125
124
|
return (_jsx(Separator, { "data-slot": "sidebar-separator", "data-sidebar": "separator", className: cn("mx-2 w-auto bg-sidebar-border", className), ...props }));
|
|
126
125
|
}
|
|
127
126
|
function SidebarContent({ className, ...props }) {
|
|
128
|
-
return (_jsx("div", { "data-slot": "sidebar-content", "data-sidebar": "content", className: cn("flex min-h-0 flex-1 flex-col gap-
|
|
127
|
+
return (_jsx("div", { "data-slot": "sidebar-content", "data-sidebar": "content", className: cn("no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden", className), ...props }));
|
|
129
128
|
}
|
|
130
129
|
function SidebarGroup({ className, ...props }) {
|
|
131
130
|
return (_jsx("div", { "data-slot": "sidebar-group", "data-sidebar": "group", className: cn("relative flex w-full min-w-0 flex-col p-2", className), ...props }));
|
|
132
131
|
}
|
|
133
|
-
function SidebarGroupLabel({ className,
|
|
134
|
-
|
|
135
|
-
|
|
132
|
+
function SidebarGroupLabel({ className, render, ...props }) {
|
|
133
|
+
return useRender({
|
|
134
|
+
defaultTagName: "div",
|
|
135
|
+
props: mergeProps({
|
|
136
|
+
className: cn("flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", className),
|
|
137
|
+
}, props),
|
|
138
|
+
render,
|
|
139
|
+
state: {
|
|
140
|
+
slot: "sidebar-group-label",
|
|
141
|
+
sidebar: "group-label",
|
|
142
|
+
},
|
|
143
|
+
});
|
|
136
144
|
}
|
|
137
|
-
function SidebarGroupAction({ className,
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
145
|
+
function SidebarGroupAction({ className, render, ...props }) {
|
|
146
|
+
return useRender({
|
|
147
|
+
defaultTagName: "button",
|
|
148
|
+
props: mergeProps({
|
|
149
|
+
className: cn("absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", className),
|
|
150
|
+
}, props),
|
|
151
|
+
render,
|
|
152
|
+
state: {
|
|
153
|
+
slot: "sidebar-group-action",
|
|
154
|
+
sidebar: "group-action",
|
|
155
|
+
},
|
|
156
|
+
});
|
|
142
157
|
}
|
|
143
158
|
function SidebarGroupContent({ className, ...props }) {
|
|
144
159
|
return (_jsx("div", { "data-slot": "sidebar-group-content", "data-sidebar": "group-content", className: cn("w-full text-sm", className), ...props }));
|
|
145
160
|
}
|
|
146
161
|
function SidebarMenu({ className, ...props }) {
|
|
147
|
-
return (_jsx("ul", { "data-slot": "sidebar-menu", "data-sidebar": "menu", className: cn("flex w-full min-w-0 flex-col gap-
|
|
162
|
+
return (_jsx("ul", { "data-slot": "sidebar-menu", "data-sidebar": "menu", className: cn("flex w-full min-w-0 flex-col gap-0", className), ...props }));
|
|
148
163
|
}
|
|
149
164
|
function SidebarMenuItem({ className, ...props }) {
|
|
150
165
|
return (_jsx("li", { "data-slot": "sidebar-menu-item", "data-sidebar": "menu-item", className: cn("group/menu-item relative", className), ...props }));
|
|
151
166
|
}
|
|
152
|
-
const sidebarMenuButtonVariants = cva("peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-
|
|
167
|
+
const sidebarMenuButtonVariants = cva("peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate", {
|
|
153
168
|
variants: {
|
|
154
169
|
variant: {
|
|
155
170
|
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
|
@@ -166,47 +181,76 @@ const sidebarMenuButtonVariants = cva("peer/menu-button flex w-full items-center
|
|
|
166
181
|
size: "default",
|
|
167
182
|
},
|
|
168
183
|
});
|
|
169
|
-
function SidebarMenuButton({
|
|
170
|
-
const Comp = asChild ? Slot.Root : "button";
|
|
184
|
+
function SidebarMenuButton({ render, isActive = false, variant = "default", size = "default", tooltip, className, ...props }) {
|
|
171
185
|
const { isMobile, state } = useSidebar();
|
|
172
|
-
const
|
|
186
|
+
const comp = useRender({
|
|
187
|
+
defaultTagName: "button",
|
|
188
|
+
props: mergeProps({
|
|
189
|
+
className: cn(sidebarMenuButtonVariants({ variant, size }), className),
|
|
190
|
+
}, props),
|
|
191
|
+
render: !tooltip ? render : _jsx(TooltipTrigger, { render: render }),
|
|
192
|
+
state: {
|
|
193
|
+
slot: "sidebar-menu-button",
|
|
194
|
+
sidebar: "menu-button",
|
|
195
|
+
size,
|
|
196
|
+
active: isActive,
|
|
197
|
+
},
|
|
198
|
+
});
|
|
173
199
|
if (!tooltip) {
|
|
174
|
-
return
|
|
200
|
+
return comp;
|
|
175
201
|
}
|
|
176
202
|
if (typeof tooltip === "string") {
|
|
177
203
|
tooltip = {
|
|
178
204
|
children: tooltip,
|
|
179
205
|
};
|
|
180
206
|
}
|
|
181
|
-
return (_jsxs(Tooltip, { children: [
|
|
207
|
+
return (_jsxs(Tooltip, { children: [comp, _jsx(TooltipContent, { side: "right", align: "center", hidden: state !== "collapsed" || isMobile, ...tooltip })] }));
|
|
182
208
|
}
|
|
183
|
-
function SidebarMenuAction({ className,
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
209
|
+
function SidebarMenuAction({ className, render, showOnHover = false, ...props }) {
|
|
210
|
+
return useRender({
|
|
211
|
+
defaultTagName: "button",
|
|
212
|
+
props: mergeProps({
|
|
213
|
+
className: cn("absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", showOnHover &&
|
|
214
|
+
"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0", className),
|
|
215
|
+
}, props),
|
|
216
|
+
render,
|
|
217
|
+
state: {
|
|
218
|
+
slot: "sidebar-menu-action",
|
|
219
|
+
sidebar: "menu-action",
|
|
220
|
+
},
|
|
221
|
+
});
|
|
189
222
|
}
|
|
190
223
|
function SidebarMenuBadge({ className, ...props }) {
|
|
191
|
-
return (_jsx("div", { "data-slot": "sidebar-menu-badge", "data-sidebar": "menu-badge", className: cn("pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none
|
|
224
|
+
return (_jsx("div", { "data-slot": "sidebar-menu-badge", "data-sidebar": "menu-badge", className: cn("pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground", className), ...props }));
|
|
192
225
|
}
|
|
193
226
|
function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
|
|
194
227
|
// Random width between 50 to 90%.
|
|
195
|
-
const width = React.
|
|
228
|
+
const [width] = React.useState(() => {
|
|
196
229
|
return `${Math.floor(Math.random() * 40) + 50}%`;
|
|
197
|
-
}
|
|
230
|
+
});
|
|
198
231
|
return (_jsxs("div", { "data-slot": "sidebar-menu-skeleton", "data-sidebar": "menu-skeleton", className: cn("flex h-8 items-center gap-2 rounded-md px-2", className), ...props, children: [showIcon && (_jsx(Skeleton, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" })), _jsx(Skeleton, { className: "h-4 max-w-(--skeleton-width) flex-1", "data-sidebar": "menu-skeleton-text", style: {
|
|
199
232
|
"--skeleton-width": width,
|
|
200
233
|
} })] }));
|
|
201
234
|
}
|
|
202
235
|
function SidebarMenuSub({ className, ...props }) {
|
|
203
|
-
return (_jsx("ul", { "data-slot": "sidebar-menu-sub", "data-sidebar": "menu-sub", className: cn("mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5
|
|
236
|
+
return (_jsx("ul", { "data-slot": "sidebar-menu-sub", "data-sidebar": "menu-sub", className: cn("mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden", className), ...props }));
|
|
204
237
|
}
|
|
205
238
|
function SidebarMenuSubItem({ className, ...props }) {
|
|
206
239
|
return (_jsx("li", { "data-slot": "sidebar-menu-sub-item", "data-sidebar": "menu-sub-item", className: cn("group/menu-sub-item relative", className), ...props }));
|
|
207
240
|
}
|
|
208
|
-
function SidebarMenuSubButton({
|
|
209
|
-
|
|
210
|
-
|
|
241
|
+
function SidebarMenuSubButton({ render, size = "md", isActive = false, className, ...props }) {
|
|
242
|
+
return useRender({
|
|
243
|
+
defaultTagName: "a",
|
|
244
|
+
props: mergeProps({
|
|
245
|
+
className: cn("flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground", className),
|
|
246
|
+
}, props),
|
|
247
|
+
render,
|
|
248
|
+
state: {
|
|
249
|
+
slot: "sidebar-menu-sub-button",
|
|
250
|
+
sidebar: "menu-sub-button",
|
|
251
|
+
size,
|
|
252
|
+
active: isActive,
|
|
253
|
+
},
|
|
254
|
+
});
|
|
211
255
|
}
|
|
212
256
|
export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, };
|