@ciridae/ui 0.2.5 → 0.3.2
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/dist/components/ui/app-shell-page.js +1 -1
- package/dist/components/ui/app-shell.js +1 -1
- package/dist/components/ui/button-group.js +1 -1
- package/dist/components/ui/card.js +1 -1
- package/dist/components/ui/ciridae-ui-provider.d.ts +8 -0
- package/dist/components/ui/ciridae-ui-provider.js +14 -0
- package/dist/components/ui/color-theme.d.ts +1 -0
- package/dist/components/ui/color-theme.js +1 -0
- package/dist/components/ui/combobox.js +2 -2
- package/dist/components/ui/command.js +1 -1
- package/dist/components/ui/context-menu.js +2 -2
- package/dist/components/ui/data-table-grid.js +1 -1
- package/dist/components/ui/data-table.js +1 -1
- package/dist/components/ui/dropdown-menu.js +2 -2
- package/dist/components/ui/input-group.js +1 -1
- package/dist/components/ui/item.d.ts +1 -1
- package/dist/components/ui/menubar.js +2 -2
- package/dist/components/ui/page-header.js +1 -1
- package/dist/components/ui/registry-docs-api.js +1 -1
- package/dist/components/ui/registry-docs-showcase.js +1 -1
- package/dist/components/ui/select.js +1 -1
- package/dist/components/ui/sidebar/group.js +2 -2
- package/dist/components/ui/sidebar/menu.js +3 -3
- package/dist/components/ui/sidebar-account-menu-theme.js +2 -2
- package/dist/components/ui/sidebar-account-menu.js +3 -3
- package/dist/styled-system/styles.css +393 -61
- package/dist/styles.css +2 -0
- package/package.json +7 -260
- package/dist/components/agentic/agent-card.d.ts +0 -28
- package/dist/components/agentic/agent-card.js +0 -27
- package/dist/components/agentic/agent-composer.d.ts +0 -44
- package/dist/components/agentic/agent-composer.js +0 -104
- package/dist/components/agentic/agent-context.d.ts +0 -28
- package/dist/components/agentic/agent-context.js +0 -102
- package/dist/components/agentic/agent-plan.d.ts +0 -27
- package/dist/components/agentic/agent-plan.js +0 -43
- package/dist/components/agentic/agent-queue.d.ts +0 -46
- package/dist/components/agentic/agent-queue.js +0 -53
- package/dist/components/agentic/agent-task.d.ts +0 -16
- package/dist/components/agentic/agent-task.js +0 -20
- package/dist/components/agentic/approval-request.d.ts +0 -24
- package/dist/components/agentic/approval-request.js +0 -57
- package/dist/components/agentic/artifact.d.ts +0 -24
- package/dist/components/agentic/artifact.js +0 -72
- package/dist/components/agentic/attachments.d.ts +0 -124
- package/dist/components/agentic/attachments.js +0 -595
- package/dist/components/agentic/audio-player.d.ts +0 -16
- package/dist/components/agentic/audio-player.js +0 -21
- package/dist/components/agentic/canvas.d.ts +0 -10
- package/dist/components/agentic/canvas.js +0 -22
- package/dist/components/agentic/clipboard.d.ts +0 -2
- package/dist/components/agentic/clipboard.js +0 -12
- package/dist/components/agentic/code-block.d.ts +0 -43
- package/dist/components/agentic/code-block.js +0 -92
- package/dist/components/agentic/commit.d.ts +0 -57
- package/dist/components/agentic/commit.js +0 -85
- package/dist/components/agentic/connection.d.ts +0 -3
- package/dist/components/agentic/connection.js +0 -8
- package/dist/components/agentic/controls.d.ts +0 -6
- package/dist/components/agentic/controls.js +0 -7
- package/dist/components/agentic/conversation.d.ts +0 -25
- package/dist/components/agentic/conversation.js +0 -56
- package/dist/components/agentic/edge.d.ts +0 -8
- package/dist/components/agentic/edge.js +0 -65
- package/dist/components/agentic/effort-selector.d.ts +0 -43
- package/dist/components/agentic/effort-selector.js +0 -47
- package/dist/components/agentic/environment-variables.d.ts +0 -32
- package/dist/components/agentic/environment-variables.js +0 -66
- package/dist/components/agentic/file-tree.d.ts +0 -24
- package/dist/components/agentic/file-tree.js +0 -56
- package/dist/components/agentic/image.d.ts +0 -9
- package/dist/components/agentic/image.js +0 -11
- package/dist/components/agentic/inline-citation.d.ts +0 -40
- package/dist/components/agentic/inline-citation.js +0 -111
- package/dist/components/agentic/jsx-preview.d.ts +0 -19
- package/dist/components/agentic/jsx-preview.js +0 -34
- package/dist/components/agentic/message-branch.d.ts +0 -20
- package/dist/components/agentic/message-branch.js +0 -83
- package/dist/components/agentic/message-response.css +0 -265
- package/dist/components/agentic/message-response.css.d.ts +0 -2
- package/dist/components/agentic/message.d.ts +0 -27
- package/dist/components/agentic/message.js +0 -57
- package/dist/components/agentic/mic-selector.d.ts +0 -58
- package/dist/components/agentic/mic-selector.js +0 -173
- package/dist/components/agentic/model-selector.d.ts +0 -39
- package/dist/components/agentic/model-selector.js +0 -47
- package/dist/components/agentic/node.d.ts +0 -26
- package/dist/components/agentic/node.js +0 -29
- package/dist/components/agentic/open-in-chat.d.ts +0 -9
- package/dist/components/agentic/open-in-chat.js +0 -8
- package/dist/components/agentic/package-info.d.ts +0 -30
- package/dist/components/agentic/package-info.js +0 -44
- package/dist/components/agentic/panel.d.ts +0 -6
- package/dist/components/agentic/panel.js +0 -7
- package/dist/components/agentic/persona.d.ts +0 -16
- package/dist/components/agentic/persona.js +0 -116
- package/dist/components/agentic/prompt-input-action-menu.d.ts +0 -16
- package/dist/components/agentic/prompt-input-action-menu.js +0 -22
- package/dist/components/agentic/prompt-input-command.d.ts +0 -18
- package/dist/components/agentic/prompt-input-command.js +0 -25
- package/dist/components/agentic/prompt-input-hover-card.d.ts +0 -10
- package/dist/components/agentic/prompt-input-hover-card.js +0 -13
- package/dist/components/agentic/prompt-input-select.d.ts +0 -14
- package/dist/components/agentic/prompt-input-select.js +0 -19
- package/dist/components/agentic/prompt-input-tabs.d.ts +0 -17
- package/dist/components/agentic/prompt-input-tabs.js +0 -45
- package/dist/components/agentic/prompt-input.d.ts +0 -79
- package/dist/components/agentic/prompt-input.js +0 -206
- package/dist/components/agentic/reasoning.d.ts +0 -21
- package/dist/components/agentic/reasoning.js +0 -106
- package/dist/components/agentic/run-checkpoint.d.ts +0 -13
- package/dist/components/agentic/run-checkpoint.js +0 -19
- package/dist/components/agentic/run-trace.d.ts +0 -30
- package/dist/components/agentic/run-trace.js +0 -56
- package/dist/components/agentic/sandbox.d.ts +0 -24
- package/dist/components/agentic/sandbox.js +0 -33
- package/dist/components/agentic/schema-display.d.ts +0 -39
- package/dist/components/agentic/schema-display.js +0 -56
- package/dist/components/agentic/shimmer.d.ts +0 -11
- package/dist/components/agentic/shimmer.js +0 -16
- package/dist/components/agentic/snippet.d.ts +0 -18
- package/dist/components/agentic/snippet.js +0 -35
- package/dist/components/agentic/sources.d.ts +0 -16
- package/dist/components/agentic/sources.js +0 -17
- package/dist/components/agentic/speech-input.d.ts +0 -24
- package/dist/components/agentic/speech-input.js +0 -30
- package/dist/components/agentic/stack-trace.d.ts +0 -27
- package/dist/components/agentic/stack-trace.js +0 -76
- package/dist/components/agentic/suggestion.d.ts +0 -12
- package/dist/components/agentic/suggestion.js +0 -15
- package/dist/components/agentic/terminal.d.ts +0 -24
- package/dist/components/agentic/terminal.js +0 -47
- package/dist/components/agentic/test-results.d.ts +0 -51
- package/dist/components/agentic/test-results.js +0 -83
- package/dist/components/agentic/theme.d.ts +0 -5
- package/dist/components/agentic/theme.js +0 -31
- package/dist/components/agentic/tool.d.ts +0 -25
- package/dist/components/agentic/tool.js +0 -73
- package/dist/components/agentic/toolbar.d.ts +0 -6
- package/dist/components/agentic/toolbar.js +0 -7
- package/dist/components/agentic/transcription.d.ts +0 -20
- package/dist/components/agentic/transcription.js +0 -32
- package/dist/components/agentic/types.d.ts +0 -172
- package/dist/components/agentic/types.js +0 -1
- package/dist/components/agentic/use-controllable-state.d.ts +0 -6
- package/dist/components/agentic/use-controllable-state.js +0 -13
- package/dist/components/agentic/voice-selector.d.ts +0 -69
- package/dist/components/agentic/voice-selector.js +0 -122
- package/dist/components/agentic/web-preview.d.ts +0 -25
- package/dist/components/agentic/web-preview.js +0 -33
|
@@ -9,7 +9,7 @@ function AppShellPageHeader({ actions, className, description, title, ...props }
|
|
|
9
9
|
return (_jsx(PageHeader, { className: className, ...props, children: _jsxs(PageHeaderMain, { className: "relative pl-14 md:pl-6 lg:pl-8", children: [_jsx(SidebarTrigger, { className: "absolute top-1/2 left-4 -translate-y-1/2 md:hidden" }), _jsxs(PageHeaderContent, { children: [_jsx(PageHeaderTitle, { children: title }), description ? _jsx(PageHeaderDescription, { children: description }) : null] }), actions ? _jsx(PageHeaderActions, { children: actions }) : null] }) }));
|
|
10
10
|
}
|
|
11
11
|
function AppShellWelcome({ brand, children, className, description, title, ...props }) {
|
|
12
|
-
return (_jsx("div", { "data-slot": "app-shell-welcome", className: cn("flex min-h-0 flex-1 items-center justify-center p-6", className), ...props, children: _jsxs("div", { className: "flex max-w-md flex-col items-center gap-4 text-center", children: [brand ? _jsx(AppShellWelcomeBrand, { brand: brand }) : null, _jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("h2", { className: "text-2xl
|
|
12
|
+
return (_jsx("div", { "data-slot": "app-shell-welcome", className: cn("flex min-h-0 flex-1 items-center justify-center p-6", className), ...props, children: _jsxs("div", { className: "flex max-w-md flex-col items-center gap-4 text-center", children: [brand ? _jsx(AppShellWelcomeBrand, { brand: brand }) : null, _jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("h2", { className: "font-heading text-2xl tracking-normal", children: title }), description ? (_jsx("div", { className: "text-sm text-muted-foreground [&>a]:font-medium [&>a]:text-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-foreground/72", children: description })) : null] }), children] }) }));
|
|
13
13
|
}
|
|
14
14
|
function AppShellWelcomeBrand({ brand }) {
|
|
15
15
|
return (_jsxs(_Fragment, { children: [_jsx("img", { alt: brand.name, className: "h-24 w-auto dark:hidden", src: brand.iconLight }), brand.iconDark ? (_jsx("img", { alt: brand.name, className: "hidden h-24 w-auto dark:block", src: brand.iconDark })) : null] }));
|
|
@@ -24,7 +24,7 @@ function AppShellExpandedBrand({ brand }) {
|
|
|
24
24
|
}
|
|
25
25
|
function AppShellWordmark({ brand }) {
|
|
26
26
|
if (!brand.wordmarkLight) {
|
|
27
|
-
return (_jsx("span", { className: "truncate text-sm
|
|
27
|
+
return (_jsx("span", { className: "font-control truncate text-sm text-sidebar-foreground", children: brand.name }));
|
|
28
28
|
}
|
|
29
29
|
return (_jsx(AppShellThemedImage, { alt: brand.name, className: "h-3.5 w-auto max-w-[9.5rem]", darkSrc: brand.wordmarkDark, lightSrc: brand.wordmarkLight }));
|
|
30
30
|
}
|
|
@@ -11,6 +11,6 @@ function ButtonGroupText({ className, asChild = false, ...props }) {
|
|
|
11
11
|
return (_jsx(Comp, { className: cn("flex items-center gap-2 rounded-md border bg-muted px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className), ...props }));
|
|
12
12
|
}
|
|
13
13
|
function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
|
|
14
|
-
return (_jsx(Separator, { "data-slot": "button-group-separator", orientation: orientation, className: cn("relative m-0 self-stretch bg-input data-[orientation=horizontal]:-mt-px data-[orientation=vertical]
|
|
14
|
+
return (_jsx(Separator, { "data-slot": "button-group-separator", orientation: orientation, className: cn("relative m-0 self-stretch bg-input data-[orientation=horizontal]:-mt-px data-[orientation=vertical]:-ml-px data-[orientation=vertical]:h-auto", className), ...props }));
|
|
15
15
|
}
|
|
16
16
|
export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText };
|
|
@@ -8,7 +8,7 @@ function Card({ className, variant = "surface", ...props }) {
|
|
|
8
8
|
return (_jsx("div", { "data-slot": "card", "data-variant": variant, className: cn("group/card flex flex-col gap-(--panel-gap)", cardVariants[variant], className), ...props }));
|
|
9
9
|
}
|
|
10
10
|
function CardHeader({ className, ...props }) {
|
|
11
|
-
return (_jsx("div", { "data-slot": "card-header", className: cn("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2
|
|
11
|
+
return (_jsx("div", { "data-slot": "card-header", className: cn("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 group-data-[variant=surface]/card:px-(--panel-padding) has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-(--panel-padding)", className), ...props }));
|
|
12
12
|
}
|
|
13
13
|
function CardTitle({ className, ...props }) {
|
|
14
14
|
return (_jsx("div", { "data-slot": "card-title", className: cn("leading-none font-medium", className), ...props }));
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { type ReactNode } from "react";
|
|
2
|
+
import { type ThemeProviderProps } from "@ciridae/ui/color-theme";
|
|
3
|
+
export type CiridaeUiProviderProps = {
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
agentation?: boolean;
|
|
6
|
+
} & Pick<ThemeProviderProps, "defaultMode">;
|
|
7
|
+
declare function CiridaeUiProvider({ agentation, children, defaultMode }: CiridaeUiProviderProps): import("react").JSX.Element;
|
|
8
|
+
export { CiridaeUiProvider };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { lazy, Suspense } from "react";
|
|
3
|
+
import { ThemeProvider, useTheme } from "@ciridae/ui/color-theme";
|
|
4
|
+
import { Toaster } from "@ciridae/ui/sonner";
|
|
5
|
+
import { TooltipProvider } from "@ciridae/ui/tooltip";
|
|
6
|
+
const LazyAgentation = lazy(() => import("agentation").then((module) => ({ default: module.Agentation })));
|
|
7
|
+
function CiridaeUiToaster() {
|
|
8
|
+
const { mode } = useTheme();
|
|
9
|
+
return _jsx(Toaster, { richColors: true, closeButton: true, theme: mode });
|
|
10
|
+
}
|
|
11
|
+
function CiridaeUiProvider({ agentation = false, children, defaultMode }) {
|
|
12
|
+
return (_jsx(ThemeProvider, { defaultMode: defaultMode, children: _jsxs(TooltipProvider, { children: [children, _jsx(CiridaeUiToaster, {}), agentation ? (_jsx(Suspense, { fallback: null, children: _jsx(LazyAgentation, {}) })) : null] }) }));
|
|
13
|
+
}
|
|
14
|
+
export { CiridaeUiProvider };
|
|
@@ -2,3 +2,4 @@ import * as React from "react";
|
|
|
2
2
|
import { type ResolvedTheme, type ThemeMode, type ThemeProviderProps } from "./color-theme-context";
|
|
3
3
|
declare function ThemeProvider({ children, defaultMode, storageKey, }: ThemeProviderProps): React.JSX.Element;
|
|
4
4
|
export { ThemeProvider, type ResolvedTheme, type ThemeMode, type ThemeProviderProps };
|
|
5
|
+
export { useTheme } from "./use-color-theme";
|
|
@@ -19,7 +19,7 @@ function ComboboxInput({ className, children, disabled = false, showTrigger = tr
|
|
|
19
19
|
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", asChild: true, "data-slot": "input-group-button", className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent", disabled: disabled, children: _jsx(ComboboxTrigger, {}) })), showClear && _jsx(ComboboxClear, { disabled: disabled })] }), children] }));
|
|
20
20
|
}
|
|
21
21
|
function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, ...props }) {
|
|
22
|
-
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-96 w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-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-(--control-height-sm) *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none
|
|
22
|
+
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-96 w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-closed:animate-out data-closed:fade-out-0 data-open:animate-in data-open:fade-in-0 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-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-(--control-height-sm) *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none", className), ...props }) }) }));
|
|
23
23
|
}
|
|
24
24
|
function ComboboxList({ className, ...props }) {
|
|
25
25
|
return (_jsx(ComboboxPrimitive.List, { "data-slot": "combobox-list", className: cn("max-h-[min(calc(--spacing(96)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0", className), ...props }));
|
|
@@ -31,7 +31,7 @@ function ComboboxGroup({ className, ...props }) {
|
|
|
31
31
|
return _jsx(ComboboxPrimitive.Group, { "data-slot": "combobox-group", className: cn(className), ...props });
|
|
32
32
|
}
|
|
33
33
|
function ComboboxLabel({ className, ...props }) {
|
|
34
|
-
return (_jsx(ComboboxPrimitive.GroupLabel, { "data-slot": "combobox-label", className: cn("px-(--menu-item-padding-x) py-1 text-
|
|
34
|
+
return (_jsx(ComboboxPrimitive.GroupLabel, { "data-slot": "combobox-label", className: cn("text-meta px-(--menu-item-padding-x) py-1 text-muted-foreground pointer-coarse:px-3 pointer-coarse:py-2 pointer-coarse:text-sm", className), ...props }));
|
|
35
35
|
}
|
|
36
36
|
function ComboboxCollection({ ...props }) {
|
|
37
37
|
return _jsx(ComboboxPrimitive.Collection, { "data-slot": "combobox-collection", ...props });
|
|
@@ -33,6 +33,6 @@ function CommandItem({ className, ...props }) {
|
|
|
33
33
|
return (_jsx(CommandPrimitive.Item, { "data-slot": "command-item", className: cn("relative flex min-h-(--menu-item-height) cursor-default items-center gap-(--control-gap) rounded-sm px-(--menu-item-padding-x) py-1 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className), ...props }));
|
|
34
34
|
}
|
|
35
35
|
function CommandShortcut({ className, ...props }) {
|
|
36
|
-
return (_jsx("span", { "data-slot": "command-shortcut", className: cn("ml-auto
|
|
36
|
+
return (_jsx("span", { "data-slot": "command-shortcut", className: cn("text-meta ml-auto font-mono text-muted-foreground", className), ...props }));
|
|
37
37
|
}
|
|
38
38
|
export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };
|
|
@@ -52,12 +52,12 @@ function ContextMenuRadioItem({ className, children, ...props }) {
|
|
|
52
52
|
return (_jsxs(ContextMenuPrimitive.RadioItem, { "data-slot": "context-menu-radio-item", className: cn("relative flex min-h-(--menu-item-height) cursor-default items-center gap-(--control-gap) rounded-sm py-1 pr-(--menu-item-padding-x) pl-8 text-sm outline-hidden select-none focus:bg-accent 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", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(ContextMenuPrimitive.ItemIndicator, { children: _jsx(CircleIcon, { className: "size-2 fill-current" }) }) }), children] }));
|
|
53
53
|
}
|
|
54
54
|
function ContextMenuLabel({ className, inset, ...props }) {
|
|
55
|
-
return (_jsx(ContextMenuPrimitive.Label, { "data-slot": "context-menu-label", "data-inset": inset, className: cn("px-(--menu-item-padding-x) py-1 text-
|
|
55
|
+
return (_jsx(ContextMenuPrimitive.Label, { "data-slot": "context-menu-label", "data-inset": inset, className: cn("text-meta px-(--menu-item-padding-x) py-1 text-muted-foreground data-[inset]:pl-8", className), ...props }));
|
|
56
56
|
}
|
|
57
57
|
function ContextMenuSeparator({ className, ...props }) {
|
|
58
58
|
return (_jsx(ContextMenuPrimitive.Separator, { "data-slot": "context-menu-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
|
|
59
59
|
}
|
|
60
60
|
function ContextMenuShortcut({ className, ...props }) {
|
|
61
|
-
return (_jsx("span", { "data-slot": "context-menu-shortcut", className: cn("ml-auto
|
|
61
|
+
return (_jsx("span", { "data-slot": "context-menu-shortcut", className: cn("text-meta ml-auto font-mono text-muted-foreground", className), ...props }));
|
|
62
62
|
}
|
|
63
63
|
export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuPortalContainerProvider, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, };
|
|
@@ -15,6 +15,6 @@ function DataTableHeaderCell({ header }) {
|
|
|
15
15
|
const Icon = sorted === "asc" ? ArrowUpIcon : sorted === "desc" ? ArrowDownIcon : ArrowUpDownIcon;
|
|
16
16
|
if (!header.column.getCanSort())
|
|
17
17
|
return flexRender(header.column.columnDef.header, header.getContext());
|
|
18
|
-
return (_jsxs(Button, { "aria-pressed": Boolean(sorted), className: "-ml-2 h-auto px-2 py-0 text-
|
|
18
|
+
return (_jsxs(Button, { "aria-pressed": Boolean(sorted), className: "text-meta -ml-2 h-auto px-2 py-0 text-muted-foreground hover:bg-transparent hover:text-foreground", onClick: header.column.getToggleSortingHandler(), size: "sm", type: "button", variant: "ghost", children: [_jsx("span", { children: flexRender(header.column.columnDef.header, header.getContext()) }), _jsx(Icon, {})] }));
|
|
19
19
|
}
|
|
20
20
|
export { DataTableGrid };
|
|
@@ -22,6 +22,6 @@ function DataTableSkeleton({ className, ...props }) {
|
|
|
22
22
|
}
|
|
23
23
|
function SortableTableHead({ active = false, children, className, direction = "asc", onSort, align = "left", ...props }) {
|
|
24
24
|
const Icon = active ? (direction === "asc" ? ArrowUpIcon : ArrowDownIcon) : ArrowUpDownIcon;
|
|
25
|
-
return (_jsx(TableHead, { "aria-sort": active ? (direction === "asc" ? "ascending" : "descending") : "none", className: cn(align === "right" && "text-right", className), ...props, children: _jsxs(Button, { "aria-pressed": active, className: cn("h-auto px-0 py-0 text-
|
|
25
|
+
return (_jsx(TableHead, { "aria-sort": active ? (direction === "asc" ? "ascending" : "descending") : "none", className: cn(align === "right" && "text-right", className), ...props, children: _jsxs(Button, { "aria-pressed": active, className: cn("text-meta h-auto px-0 py-0 text-muted-foreground hover:bg-transparent hover:text-foreground", align === "right" ? "ml-auto justify-end" : "justify-start"), onClick: onSort, size: "sm", type: "button", variant: "ghost", children: [_jsx("span", { children: children }), _jsx(Icon, {})] }) }));
|
|
26
26
|
}
|
|
27
27
|
export { DataTable, DataTableToolbar, DataTableContent, DataTableEmpty, DataTableSkeleton, TanStackDataTable, SortableTableHead, };
|
|
@@ -43,13 +43,13 @@ function DropdownMenuRadioItem({ className, children, ...props }) {
|
|
|
43
43
|
return (_jsxs(DropdownMenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", className: cn("relative flex min-h-(--menu-item-height) cursor-default items-center gap-(--control-gap) rounded-sm py-1 pr-(--menu-item-padding-x) pl-8 text-sm outline-hidden select-none focus:bg-accent 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", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CircleIcon, { className: "size-2 fill-current" }) }) }), children] }));
|
|
44
44
|
}
|
|
45
45
|
function DropdownMenuLabel({ className, inset, ...props }) {
|
|
46
|
-
return (_jsx(DropdownMenuPrimitive.Label, { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn("px-(--menu-item-padding-x) py-1 text-
|
|
46
|
+
return (_jsx(DropdownMenuPrimitive.Label, { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn("text-meta px-(--menu-item-padding-x) py-1 text-muted-foreground data-[inset]:pl-8", className), ...props }));
|
|
47
47
|
}
|
|
48
48
|
function DropdownMenuSeparator({ className, ...props }) {
|
|
49
49
|
return (_jsx(DropdownMenuPrimitive.Separator, { "data-slot": "dropdown-menu-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
|
|
50
50
|
}
|
|
51
51
|
function DropdownMenuShortcut({ className, ...props }) {
|
|
52
|
-
return (_jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn("ml-auto
|
|
52
|
+
return (_jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn("text-meta ml-auto font-mono text-muted-foreground", className), ...props }));
|
|
53
53
|
}
|
|
54
54
|
function DropdownMenuSub({ ...props }) {
|
|
55
55
|
return _jsx(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
|
|
@@ -57,6 +57,6 @@ function InputGroupInput({ className, ...props }) {
|
|
|
57
57
|
return (_jsx(Input, { "data-slot": "input-group-control", className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent", className), ...props }));
|
|
58
58
|
}
|
|
59
59
|
function InputGroupTextarea({ className, ...props }) {
|
|
60
|
-
return (_jsx(Textarea, { "data-slot": "input-group-control", className: cn("flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent", className), ...props }));
|
|
60
|
+
return (_jsx(Textarea, { "data-slot": "input-group-control", className: cn("field-sizing-fixed! w-full! min-w-0 flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent", className), ...props }));
|
|
61
61
|
}
|
|
62
62
|
export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };
|
|
@@ -11,7 +11,7 @@ declare function Item({ className, variant, size, asChild, ...props }: React.Com
|
|
|
11
11
|
asChild?: boolean;
|
|
12
12
|
}): React.JSX.Element;
|
|
13
13
|
declare const itemMediaVariants: (props?: ({
|
|
14
|
-
variant?: "
|
|
14
|
+
variant?: "default" | "icon" | "image" | null | undefined;
|
|
15
15
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
16
16
|
declare function ItemMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>): React.JSX.Element;
|
|
17
17
|
declare function ItemContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
@@ -43,13 +43,13 @@ function MenubarRadioItem({ className, children, ...props }) {
|
|
|
43
43
|
return (_jsxs(MenubarPrimitive.RadioItem, { "data-slot": "menubar-radio-item", className: cn("relative flex min-h-(--menu-item-height) cursor-default items-center gap-(--control-gap) rounded-xs py-1 pr-(--menu-item-padding-x) pl-8 text-sm outline-hidden select-none focus:bg-accent 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", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(MenubarPrimitive.ItemIndicator, { children: _jsx(CircleIcon, { className: "size-2 fill-current" }) }) }), children] }));
|
|
44
44
|
}
|
|
45
45
|
function MenubarLabel({ className, inset, ...props }) {
|
|
46
|
-
return (_jsx(MenubarPrimitive.Label, { "data-slot": "menubar-label", "data-inset": inset, className: cn("px-(--menu-item-padding-x) py-1 text-
|
|
46
|
+
return (_jsx(MenubarPrimitive.Label, { "data-slot": "menubar-label", "data-inset": inset, className: cn("text-meta px-(--menu-item-padding-x) py-1 text-muted-foreground data-[inset]:pl-8", className), ...props }));
|
|
47
47
|
}
|
|
48
48
|
function MenubarSeparator({ className, ...props }) {
|
|
49
49
|
return (_jsx(MenubarPrimitive.Separator, { "data-slot": "menubar-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
|
|
50
50
|
}
|
|
51
51
|
function MenubarShortcut({ className, ...props }) {
|
|
52
|
-
return (_jsx("span", { "data-slot": "menubar-shortcut", className: cn("ml-auto
|
|
52
|
+
return (_jsx("span", { "data-slot": "menubar-shortcut", className: cn("text-meta ml-auto font-mono text-muted-foreground", className), ...props }));
|
|
53
53
|
}
|
|
54
54
|
function MenubarSub({ ...props }) {
|
|
55
55
|
return _jsx(MenubarPrimitive.Sub, { "data-slot": "menubar-sub", ...props });
|
|
@@ -9,7 +9,7 @@ function PageHeaderMain({ className, ...props }) {
|
|
|
9
9
|
return (_jsx("div", { "data-slot": "page-header-main", className: cn("flex flex-col gap-3 px-4 py-3 md:flex-row md:items-center md:justify-between md:px-6 lg:px-8", className), ...props }));
|
|
10
10
|
}
|
|
11
11
|
function PageHeaderContent({ className, ...props }) {
|
|
12
|
-
return (_jsx("div", { "data-slot": "page-header-content", className: cn("flex
|
|
12
|
+
return (_jsx("div", { "data-slot": "page-header-content", className: cn("flex max-w-3xl min-w-0 flex-col gap-1", className), ...props }));
|
|
13
13
|
}
|
|
14
14
|
function PageHeaderBackButton({ asChild = false, children, className, ...props }) {
|
|
15
15
|
if (asChild) {
|
|
@@ -4,6 +4,6 @@ function RegistryDocsApiTable({ props }) {
|
|
|
4
4
|
return (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Prop" }), _jsx(TableHead, { children: "Type" }), _jsx(TableHead, { children: "Default" }), _jsx(TableHead, { children: "Description" })] }) }), _jsx(TableBody, { children: props.map((prop) => (_jsx(RegistryDocsApiTableRow, { prop: prop }, prop.name))) })] }));
|
|
5
5
|
}
|
|
6
6
|
function RegistryDocsApiTableRow({ prop }) {
|
|
7
|
-
return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx("code", { className: "font-mono text-xs", children: prop.name }) }), _jsx(TableCell, { className: "max-w-72", children: _jsx("code", { className: "font-mono text-xs text-muted-foreground
|
|
7
|
+
return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx("code", { className: "font-mono text-xs", children: prop.name }) }), _jsx(TableCell, { className: "max-w-72", children: _jsx("code", { className: "font-mono text-xs whitespace-normal text-muted-foreground", children: prop.type }) }), _jsx(TableCell, { children: prop.defaultValue ? (_jsx("code", { className: "font-mono text-xs text-muted-foreground", children: prop.defaultValue })) : (_jsx("span", { className: "text-muted-foreground", children: "None" })) }), _jsx(TableCell, { className: "whitespace-normal text-muted-foreground", children: prop.description })] }));
|
|
8
8
|
}
|
|
9
9
|
export { RegistryDocsApiTable };
|
|
@@ -10,7 +10,7 @@ function RegistryDocsShowcase({ className, code, codeLabel = "preview.tsx", defa
|
|
|
10
10
|
return (_jsxs("div", { "data-slot": "registry-docs-showcase", className: cn("min-w-0 overflow-hidden rounded-xl border bg-card text-card-foreground shadow-xs", className), ...props, children: [_jsx(RegistryDocsShowcasePreview, { previewMode: previewMode, children: preview }), _jsx(RegistryDocsShowcaseCode, { code: code, codeId: codeId, codeLabel: codeLabel, expanded: expanded, onExpandedChange: setExpanded })] }));
|
|
11
11
|
}
|
|
12
12
|
function RegistryDocsShowcasePreview({ children, previewMode, }) {
|
|
13
|
-
return (_jsx("div", { "data-slot": "registry-docs-showcase-preview", "data-preview-mode": previewMode, className: "flex min-h-[28rem] items-center justify-center overflow-auto bg-background p-(--panel-padding) data-[preview-mode=canvas]:min-h-[34rem] data-[preview-mode=canvas]:items-stretch data-[preview-mode=canvas]:justify-stretch data-[preview-mode=canvas]:p-2 data-[preview-mode=page]:min-h-[36rem] data-[preview-mode=page]:items-start data-[preview-mode=page]:p-0 md:data-[preview-mode=canvas]:min-h-[42rem] md:data-[preview-mode=canvas]:p-3", children: _jsx("div", { className: "flex min-w-0
|
|
13
|
+
return (_jsx("div", { "data-slot": "registry-docs-showcase-preview", "data-preview-mode": previewMode, className: "flex min-h-[28rem] items-center justify-center overflow-auto bg-background p-(--panel-padding) data-[preview-mode=canvas]:min-h-[34rem] data-[preview-mode=canvas]:items-stretch data-[preview-mode=canvas]:justify-stretch data-[preview-mode=canvas]:p-2 data-[preview-mode=page]:min-h-[36rem] data-[preview-mode=page]:items-start data-[preview-mode=page]:p-0 md:data-[preview-mode=canvas]:min-h-[42rem] md:data-[preview-mode=canvas]:p-3", children: _jsx("div", { className: "flex w-full min-w-0 items-center justify-center data-[preview-mode=canvas]:min-h-full data-[preview-mode=canvas]:items-stretch data-[preview-mode=canvas]:justify-stretch data-[preview-mode=page]:min-h-full data-[preview-mode=page]:items-stretch", "data-preview-mode": previewMode, children: children }) }));
|
|
14
14
|
}
|
|
15
15
|
function RegistryDocsShowcaseCode({ code, codeId, codeLabel, expanded, onExpandedChange, }) {
|
|
16
16
|
return (_jsxs("div", { "data-slot": "registry-docs-showcase-code", className: "relative border-t bg-muted/20", children: [_jsx(RegistryDocsShowcaseToggle, { codeId: codeId, expanded: expanded, onExpandedChange: onExpandedChange }), _jsxs("div", { id: codeId, "aria-label": codeLabel, className: cn("relative", expanded ? "max-h-[42rem] overflow-auto" : "max-h-44 overflow-hidden"), children: [_jsxs("div", { className: "mx-auto w-full max-w-5xl", children: [expanded ? _jsx(RegistryDocsShowcaseCopyButton, { code: code }) : null, _jsx(RegistryDocsCodeSnippet, { code: code, className: cn("text-sm [&_.shiki]:text-sm", expanded ? "px-6 pt-8 pb-8 md:px-8" : "p-7 pb-16 opacity-80") })] }), expanded ? null : _jsx(RegistryDocsShowcaseFade, {})] })] }));
|
|
@@ -21,7 +21,7 @@ function SelectContent({ className, children, position = "item-aligned", align =
|
|
|
21
21
|
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"), children: children }), _jsx(SelectScrollDownButton, {})] }) }));
|
|
22
22
|
}
|
|
23
23
|
function SelectLabel({ className, ...props }) {
|
|
24
|
-
return (_jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn("px-(--menu-item-padding-x) py-1 text-
|
|
24
|
+
return (_jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn("text-meta px-(--menu-item-padding-x) py-1 text-muted-foreground", className), ...props }));
|
|
25
25
|
}
|
|
26
26
|
function SelectItem({ className, children, ...props }) {
|
|
27
27
|
return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("relative flex min-h-(--menu-item-height) w-full cursor-default items-center gap-(--control-gap) rounded-sm py-1 pr-8 pl-(--menu-item-padding-x) text-sm outline-hidden select-none focus:bg-accent 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 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-(--control-gap)", className), ...props, children: [_jsx("span", { "data-slot": "select-item-indicator", className: "absolute right-2 flex size-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "size-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] }));
|
|
@@ -6,11 +6,11 @@ function SidebarGroup({ className, ...props }) {
|
|
|
6
6
|
}
|
|
7
7
|
function SidebarGroupLabel({ className, asChild = false, ...props }) {
|
|
8
8
|
const Comp = asChild ? Slot.Root : "div";
|
|
9
|
-
return (_jsx(Comp, { "data-slot": "sidebar-group-label", "data-sidebar": "group-label", className: cn("flex h-(--sidebar-item-height-sm) shrink-0 items-center rounded-[var(--sidebar-item-radius)] px-(--sidebar-item-padding-x) text-
|
|
9
|
+
return (_jsx(Comp, { "data-slot": "sidebar-group-label", "data-sidebar": "group-label", className: cn("text-meta flex h-(--sidebar-item-height-sm) shrink-0 items-center rounded-[var(--sidebar-item-radius)] px-(--sidebar-item-padding-x) text-sidebar-foreground/45 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-[var(--focus-ring-width)] [&>svg]:size-(--sidebar-icon-size) [&>svg]:shrink-0", "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0", className), ...props }));
|
|
10
10
|
}
|
|
11
11
|
function SidebarGroupAction({ className, asChild = false, ...props }) {
|
|
12
12
|
const Comp = asChild ? Slot.Root : "button";
|
|
13
|
-
return (_jsx(Comp, { "data-slot": "sidebar-group-action", "data-sidebar": "group-action", className: cn("absolute top-(--sidebar-group-padding) right-(--sidebar-group-padding) flex size-(--sidebar-item-height-sm) items-center justify-center rounded-[var(--sidebar-item-radius)] p-0 text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-[var(--focus-ring-width)]
|
|
13
|
+
return (_jsx(Comp, { "data-slot": "sidebar-group-action", "data-sidebar": "group-action", className: cn("absolute top-(--sidebar-group-padding) right-(--sidebar-group-padding) flex size-(--sidebar-item-height-sm) items-center justify-center rounded-[var(--sidebar-item-radius)] p-0 text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-colors after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-[var(--focus-ring-width)] md:after:hidden [&>svg]:size-(--sidebar-icon-size) [&>svg]:shrink-0", "group-data-[collapsible=icon]:hidden", className), ...props }));
|
|
14
14
|
}
|
|
15
15
|
function SidebarGroupContent({ className, ...props }) {
|
|
16
16
|
return (_jsx("div", { "data-slot": "sidebar-group-content", "data-sidebar": "group-content", className: cn("w-full text-sm", className), ...props }));
|
|
@@ -40,11 +40,11 @@ function SidebarMenuButton({ asChild = false, isActive = false, variant = "defau
|
|
|
40
40
|
}
|
|
41
41
|
function SidebarMenuAction({ className, asChild = false, showOnHover = false, ...props }) {
|
|
42
42
|
const Comp = asChild ? Slot.Root : "button";
|
|
43
|
-
return (_jsx(Comp, { "data-slot": "sidebar-menu-action", "data-sidebar": "menu-action", className: cn("absolute top-0.5 right-0.5 flex size-(--sidebar-item-height-sm) items-center justify-center rounded-[var(--sidebar-item-radius)] p-0 text-sidebar-foreground/60 ring-sidebar-ring outline-hidden transition-colors peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-[var(--focus-ring-width)]
|
|
43
|
+
return (_jsx(Comp, { "data-slot": "sidebar-menu-action", "data-sidebar": "menu-action", className: cn("absolute top-0.5 right-0.5 flex size-(--sidebar-item-height-sm) items-center justify-center rounded-[var(--sidebar-item-radius)] p-0 text-sidebar-foreground/60 ring-sidebar-ring outline-hidden transition-colors peer-hover/menu-button:text-sidebar-accent-foreground after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-[var(--focus-ring-width)] md:after:hidden [&>svg]:size-(--sidebar-icon-size) [&>svg]:shrink-0", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1", "peer-data-[size=lg]/menu-button:top-2.5", "group-data-[collapsible=icon]:hidden", showOnHover &&
|
|
44
44
|
"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground data-[state=open]:opacity-100 md:opacity-0", className), ...props }));
|
|
45
45
|
}
|
|
46
46
|
function SidebarMenuBadge({ className, ...props }) {
|
|
47
|
-
return (_jsx("div", { "data-slot": "sidebar-menu-badge", "data-sidebar": "menu-badge", className: cn("pointer-events-none absolute right-1 flex h-(--sidebar-item-height-sm) min-w-(--sidebar-item-height-sm) items-center justify-center rounded-[var(--badge-radius)] px-(--badge-padding-x) text-
|
|
47
|
+
return (_jsx("div", { "data-slot": "sidebar-menu-badge", "data-sidebar": "menu-badge", className: cn("text-meta pointer-events-none absolute right-1 flex h-(--sidebar-item-height-sm) min-w-(--sidebar-item-height-sm) items-center justify-center rounded-[var(--badge-radius)] px-(--badge-padding-x) text-sidebar-foreground/60 tabular-nums select-none", "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1", "peer-data-[size=lg]/menu-button:top-2.5", "group-data-[collapsible=icon]:hidden", className), ...props }));
|
|
48
48
|
}
|
|
49
49
|
function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
|
|
50
50
|
const width = React.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
|
|
@@ -59,6 +59,6 @@ function SidebarMenuSubItem({ className, ...props }) {
|
|
|
59
59
|
}
|
|
60
60
|
function SidebarMenuSubButton({ asChild = false, size = "md", isActive = false, className, ...props }) {
|
|
61
61
|
const Comp = asChild ? Slot.Root : "a";
|
|
62
|
-
return (_jsx(Comp, { "data-slot": "sidebar-menu-sub-button", "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn("relative flex h-(--sidebar-sub-item-height) min-w-0 items-center gap-(--control-gap) overflow-hidden rounded-[var(--sidebar-item-radius)] px-(--sidebar-item-padding-x) text-sidebar-foreground/65 ring-sidebar-ring outline-hidden transition-[color,background-color,box-shadow] hover:bg-sidebar-accent/70 hover:text-sidebar-accent-foreground
|
|
62
|
+
return (_jsx(Comp, { "data-slot": "sidebar-menu-sub-button", "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn("relative flex h-(--sidebar-sub-item-height) min-w-0 items-center gap-(--control-gap) overflow-hidden rounded-[var(--sidebar-item-radius)] px-(--sidebar-item-padding-x) text-sidebar-foreground/65 ring-sidebar-ring outline-hidden transition-[color,background-color,box-shadow] hover:bg-sidebar-accent/70 hover:text-sidebar-accent-foreground focus-visible:ring-[var(--focus-ring-width)] 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-[active=true]:bg-transparent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[active=true]:shadow-none [&>span:last-child]:truncate [&>svg]:size-(--sidebar-icon-size) [&>svg]:shrink-0 [&>svg]:text-sidebar-foreground/45 hover:[&>svg]:text-sidebar-accent-foreground data-[active=true]:[&>svg]:text-sidebar-accent-foreground", size === "sm" && "text-xs", size === "md" && "text-sm", "group-data-[collapsible=icon]:hidden", className), ...props }));
|
|
63
63
|
}
|
|
64
64
|
export { SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, };
|
|
@@ -9,11 +9,11 @@ function AccountThemeSection({ mode, onModeChange, }) {
|
|
|
9
9
|
return (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsx(AccountThemeControls, { mode: mode, onModeChange: onModeChange })] }));
|
|
10
10
|
}
|
|
11
11
|
function AccountThemeControls({ mode, onModeChange, }) {
|
|
12
|
-
return (_jsxs("div", { className: "px-(--menu-item-padding-x) py-1", children: [_jsx("div", { className: "mb-1 text-xs
|
|
12
|
+
return (_jsxs("div", { className: "px-(--menu-item-padding-x) py-1", children: [_jsx("div", { className: "font-control mb-1 text-xs text-muted-foreground", children: "Theme" }), _jsx("div", { className: "grid grid-cols-3 gap-0.5 rounded-[var(--sidebar-item-radius)] border border-border/70 bg-transparent p-0.5", children: sidebarAccountThemeModes.map((themeMode) => (_jsx(ThemeModeButton, { active: mode === themeMode, mode: themeMode, onModeChange: onModeChange }, themeMode))) })] }));
|
|
13
13
|
}
|
|
14
14
|
function ThemeModeButton({ active, mode, onModeChange, }) {
|
|
15
15
|
const label = getThemeModeLabel(mode);
|
|
16
|
-
return (_jsxs("button", { "aria-pressed": active, className: cn("flex h-(--sidebar-item-height-sm) items-center justify-center gap-1 rounded-sm px-2 text-xs
|
|
16
|
+
return (_jsxs("button", { "aria-pressed": active, className: cn("font-control flex h-(--sidebar-item-height-sm) items-center justify-center gap-1 rounded-sm px-2 text-xs text-muted-foreground outline-hidden transition-[color,background-color,box-shadow]", "hover:bg-background hover:text-foreground focus-visible:ring-[var(--focus-ring-width)] focus-visible:ring-ring", active && "bg-muted text-foreground shadow-none"), onClick: () => onModeChange(mode), type: "button", children: [_jsx(ThemeModeIcon, { mode: mode }), _jsx("span", { children: label })] }));
|
|
17
17
|
}
|
|
18
18
|
function ThemeModeIcon({ mode }) {
|
|
19
19
|
if (mode === "light")
|
|
@@ -22,13 +22,13 @@ function AccountMenuTrigger({ accountMark, detail, imageUrl, label, }) {
|
|
|
22
22
|
return (_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { "aria-label": `Open account menu for ${label}`, className: cn("h-auto min-h-(--control-height) py-1", "text-sidebar-foreground/78 hover:text-sidebar-accent-foreground", "data-[state=open]:bg-sidebar-accent/45 data-[state=open]:text-sidebar-accent-foreground", "group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-0!"), tooltip: label, children: [_jsx(AccountAvatar, { accountMark: accountMark, imageUrl: imageUrl }), _jsx(AccountTriggerText, { detail: detail, label: label }), _jsx(ChevronUpIcon, { className: "ml-auto size-3.5 text-sidebar-foreground/42 group-data-[collapsible=icon]:hidden" })] }) }));
|
|
23
23
|
}
|
|
24
24
|
function AccountTriggerText({ detail, label }) {
|
|
25
|
-
return (_jsxs("span", { className: "grid min-w-0 flex-1 gap-0.5 text-left group-data-[collapsible=icon]:hidden", children: [_jsx("span", { className: "truncate text-sm leading-4
|
|
25
|
+
return (_jsxs("span", { className: "grid min-w-0 flex-1 gap-0.5 text-left group-data-[collapsible=icon]:hidden", children: [_jsx("span", { className: "font-control truncate text-sm leading-4", children: label }), _jsx("span", { className: "truncate text-xs leading-3 text-sidebar-foreground/46", children: detail })] }));
|
|
26
26
|
}
|
|
27
27
|
function AccountMenuLabel({ accountMark, detail, imageUrl, label, }) {
|
|
28
|
-
return (_jsx(DropdownMenuLabel, { className: "p-0
|
|
28
|
+
return (_jsx(DropdownMenuLabel, { className: "p-0 tracking-normal text-popover-foreground normal-case", children: _jsxs("div", { className: "flex min-w-0 items-center gap-(--control-gap) px-(--menu-item-padding-x) py-0.5", children: [_jsx(AccountAvatar, { accountMark: accountMark, imageUrl: imageUrl }), _jsx(AccountMenuLabelText, { detail: detail, label: label })] }) }));
|
|
29
29
|
}
|
|
30
30
|
function AccountMenuLabelText({ detail, label }) {
|
|
31
|
-
return (_jsxs("span", { className: "grid min-w-0 flex-1 gap-0.5 text-left", children: [_jsx("span", { className: "truncate text-sm leading-4
|
|
31
|
+
return (_jsxs("span", { className: "grid min-w-0 flex-1 gap-0.5 text-left", children: [_jsx("span", { className: "font-control truncate text-sm leading-4", children: label }), _jsx("span", { className: "truncate text-xs leading-3 text-muted-foreground", children: detail })] }));
|
|
32
32
|
}
|
|
33
33
|
function AccountSignOutItem({ isSigningOut, onSignOut, }) {
|
|
34
34
|
return (_jsxs(DropdownMenuItem, { className: "min-h-(--sidebar-item-height)", disabled: !onSignOut || isSigningOut, onSelect: () => onSignOut?.(), children: [isSigningOut ? _jsx(Spinner, { "aria-hidden": "true" }) : _jsx(LogOutIcon, {}), _jsx("span", { children: "Sign out" })] }));
|