@adea-ai/ui 0.11.0 → 0.12.1
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/account-drawer.d.ts +1 -1
- package/dist/components/account-drawer.js +12 -12
- package/dist/components/on-screen-controls.js +12 -12
- package/dist/components/scene-settings.d.ts +3 -3
- package/dist/components/scene-settings.js +11 -11
- package/dist/components/theme-provider.d.ts +1 -1
- package/dist/components/theme-provider.js +2 -2
- package/dist/components/theme-toggle.js +8 -8
- package/dist/components/ui/badge.d.ts +3 -3
- package/dist/components/ui/badge.js +15 -15
- package/dist/components/ui/button.d.ts +2 -2
- package/dist/components/ui/button.js +19 -19
- package/dist/components/ui/card.d.ts +1 -1
- package/dist/components/ui/card.js +3 -3
- package/dist/components/ui/dialog.d.ts +4 -4
- package/dist/components/ui/dialog.js +10 -10
- package/dist/components/ui/drawer.d.ts +5 -5
- package/dist/components/ui/drawer.js +26 -26
- package/dist/components/ui/dropdown-menu.d.ts +5 -5
- package/dist/components/ui/dropdown-menu.js +12 -12
- package/dist/components/ui/empty.d.ts +7 -7
- package/dist/components/ui/empty.js +11 -11
- package/dist/components/ui/field.d.ts +12 -12
- package/dist/components/ui/field.js +22 -22
- package/dist/components/ui/input.d.ts +2 -2
- package/dist/components/ui/input.js +3 -3
- package/dist/components/ui/label.d.ts +2 -2
- package/dist/components/ui/label.js +3 -3
- package/dist/components/ui/radio-group.d.ts +2 -2
- package/dist/components/ui/radio-group.js +6 -6
- package/dist/components/ui/separator.d.ts +1 -1
- package/dist/components/ui/separator.js +5 -5
- package/dist/components/ui/skeleton.d.ts +1 -1
- package/dist/components/ui/skeleton.js +2 -2
- package/dist/components/ui/spinner.d.ts +2 -2
- package/dist/components/ui/spinner.js +3 -3
- package/dist/components/ui/switch.d.ts +2 -2
- package/dist/components/ui/switch.js +5 -5
- package/dist/components/ui/tabs.d.ts +2 -2
- package/dist/components/ui/tabs.js +13 -13
- package/dist/components/ui/toggle-group.d.ts +6 -6
- package/dist/components/ui/toggle-group.js +13 -13
- package/dist/components/ui/toggle.d.ts +2 -2
- package/dist/components/ui/toggle.js +11 -11
- package/dist/components/ui/tooltip.d.ts +3 -3
- package/dist/components/ui/tooltip.js +5 -5
- package/dist/components/version-dialog.d.ts +1 -1
- package/dist/components/version-dialog.js +33 -33
- package/dist/components/workspace-brand.js +1 -1
- package/dist/components/workspace-logo.d.ts +1 -1
- package/dist/index.d.ts +19 -19
- package/dist/index.js +19 -19
- package/dist/lib/utils.d.ts +1 -1
- package/dist/lib/utils.js +2 -2
- package/dist/lib/version-notes.js +18 -18
- package/package.json +9 -9
- package/src/components/account-drawer.tsx +27 -27
- package/src/components/on-screen-controls.tsx +45 -45
- package/src/components/scene-settings.tsx +55 -55
- package/src/components/theme-provider.tsx +7 -7
- package/src/components/theme-toggle.tsx +20 -20
- package/src/components/ui/badge.tsx +20 -20
- package/src/components/ui/button.tsx +24 -24
- package/src/components/ui/card.tsx +6 -6
- package/src/components/ui/dialog.tsx +24 -24
- package/src/components/ui/drawer.tsx +55 -55
- package/src/components/ui/dropdown-menu.tsx +39 -39
- package/src/components/ui/empty.tsx +25 -25
- package/src/components/ui/field.tsx +55 -55
- package/src/components/ui/input.tsx +7 -7
- package/src/components/ui/label.tsx +7 -7
- package/src/components/ui/radio-group.tsx +9 -9
- package/src/components/ui/separator.tsx +7 -7
- package/src/components/ui/skeleton.tsx +5 -5
- package/src/components/ui/spinner.tsx +6 -6
- package/src/components/ui/switch.tsx +8 -8
- package/src/components/ui/tabs.tsx +21 -21
- package/src/components/ui/toggle-group.tsx +25 -25
- package/src/components/ui/toggle.tsx +15 -15
- package/src/components/ui/tooltip.tsx +13 -13
- package/src/components/version-dialog.tsx +113 -113
- package/src/components/workspace-brand.tsx +4 -4
- package/src/components/workspace-logo.tsx +2 -2
- package/src/index.tsx +19 -19
- package/src/lib/utils.ts +3 -3
- package/src/lib/version-notes.ts +23 -23
- package/src/styles/conventional-workspace.css +26 -26
- package/src/styles/globals.css +2 -2
- package/src/styles/theme.css +1 -1
- package/src/styles/workspace-shell.css +2 -2
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { createPortal } from
|
|
4
|
-
import { useEffect, useState } from
|
|
5
|
-
import { UserRound } from
|
|
6
|
-
import { Button } from
|
|
7
|
-
import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger, } from
|
|
8
|
-
import { ThemeToggle } from
|
|
9
|
-
export function AccountDrawer({ accountLabel =
|
|
3
|
+
import { createPortal } from 'react-dom';
|
|
4
|
+
import { useEffect, useState } from 'react';
|
|
5
|
+
import { UserRound } from 'lucide-react';
|
|
6
|
+
import { Button } from '#components/ui/button';
|
|
7
|
+
import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger, } from '#components/ui/drawer';
|
|
8
|
+
import { ThemeToggle } from './theme-toggle';
|
|
9
|
+
export function AccountDrawer({ accountLabel = 'Sign in', authenticated = false, busy = false, musicControl, triggerTargetId, onSignIn, onSignOut, }) {
|
|
10
10
|
const [triggerTarget, setTriggerTarget] = useState(null);
|
|
11
11
|
useEffect(() => {
|
|
12
12
|
setTriggerTarget(triggerTargetId ? document.getElementById(triggerTargetId) : null);
|
|
13
13
|
}, [triggerTargetId]);
|
|
14
14
|
const trigger = (_jsxs(DrawerTrigger, { render: _jsx(Button, { variant: "outline", size: "sm", className: "workspace-account-trigger", "aria-label": `Open user menu for ${accountLabel}`, "aria-haspopup": "dialog" }), children: [_jsx(UserRound, { "aria-hidden": "true" }), _jsx("span", { children: accountLabel })] }));
|
|
15
15
|
return (_jsxs(Drawer, { swipeDirection: "right", children: [triggerTarget ? (createPortal(trigger, triggerTarget)) : (_jsx("div", { className: "fixed right-4 top-4 z-40", children: trigger })), _jsxs(DrawerContent, { className: "w-[min(24rem,90vw)]", children: [_jsx(DrawerHeader, { className: "border-b px-5 pb-4 pt-5 text-left", children: _jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary text-primary-foreground", children: _jsx(UserRound, { className: "size-5", "aria-hidden": "true" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx(DrawerTitle, { className: "truncate", children: accountLabel }), _jsx(DrawerDescription, { children: authenticated
|
|
16
|
-
?
|
|
17
|
-
:
|
|
18
|
-
?
|
|
19
|
-
:
|
|
16
|
+
? 'Signed in · workspace saved'
|
|
17
|
+
: 'Guest workspace · sign in anytime' })] })] }), _jsx(ThemeToggle, { className: "shrink-0" })] }) }), _jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto p-5", children: [musicControl ? (_jsxs("section", { className: "grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4 border-t pt-5", "aria-labelledby": "account-music-title", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h2", { id: "account-music-title", className: "text-sm font-semibold", children: "Music" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Control the workspace soundtrack." })] }), _jsx("div", { className: "flex shrink-0 items-center justify-end", children: musicControl })] })) : null, _jsxs("section", { className: "grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4 border-t pt-5", "aria-labelledby": "account-session-title", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h2", { id: "account-session-title", className: "text-sm font-semibold", children: "Account" }), _jsx("p", { className: "text-sm text-muted-foreground", children: authenticated
|
|
18
|
+
? 'Sign out on this device without removing your saved workspace.'
|
|
19
|
+
: 'Sign in or create an account to keep this workspace across devices.' })] }), _jsx(DrawerClose, { render: _jsx(Button, { type: "button", className: "shrink-0", variant: authenticated ? 'outline' : 'default', disabled: busy, onClick: authenticated ? onSignOut : onSignIn }), children: authenticated ? 'Sign out' : 'Sign in' })] })] })] })] }));
|
|
20
20
|
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useCallback, useEffect, useRef } from
|
|
4
|
-
import { ZoomIn, ZoomOut } from
|
|
5
|
-
import { Button } from
|
|
6
|
-
import { cn } from
|
|
3
|
+
import { useCallback, useEffect, useRef } from 'react';
|
|
4
|
+
import { ZoomIn, ZoomOut } from 'lucide-react';
|
|
5
|
+
import { Button } from '#components/ui/button';
|
|
6
|
+
import { cn } from '#lib/utils';
|
|
7
7
|
function sendKeyEvent(type, code) {
|
|
8
8
|
window.dispatchEvent(new KeyboardEvent(type, { bubbles: true, cancelable: true, code, key: code }));
|
|
9
9
|
}
|
|
@@ -15,7 +15,7 @@ function ControlButton({ code, label, children, className }) {
|
|
|
15
15
|
return;
|
|
16
16
|
pressed.current = false;
|
|
17
17
|
pressedPointer.current = null;
|
|
18
|
-
sendKeyEvent(
|
|
18
|
+
sendKeyEvent('keyup', code);
|
|
19
19
|
}, [code]);
|
|
20
20
|
// Self-heal: release the key if the pointerup lands elsewhere (e.g. the
|
|
21
21
|
// scene DOM changes mid-teleport) or the window loses focus. PointerId
|
|
@@ -26,11 +26,11 @@ function ControlButton({ code, label, children, className }) {
|
|
|
26
26
|
release();
|
|
27
27
|
};
|
|
28
28
|
const onBlur = () => release();
|
|
29
|
-
window.addEventListener(
|
|
30
|
-
window.addEventListener(
|
|
29
|
+
window.addEventListener('pointerup', onWindowPointerUp);
|
|
30
|
+
window.addEventListener('blur', onBlur);
|
|
31
31
|
return () => {
|
|
32
|
-
window.removeEventListener(
|
|
33
|
-
window.removeEventListener(
|
|
32
|
+
window.removeEventListener('pointerup', onWindowPointerUp);
|
|
33
|
+
window.removeEventListener('blur', onBlur);
|
|
34
34
|
};
|
|
35
35
|
}, [release]);
|
|
36
36
|
const press = useCallback((event) => {
|
|
@@ -40,9 +40,9 @@ function ControlButton({ code, label, children, className }) {
|
|
|
40
40
|
pressed.current = true;
|
|
41
41
|
pressedPointer.current = event.pointerId;
|
|
42
42
|
event.currentTarget.setPointerCapture(event.pointerId);
|
|
43
|
-
sendKeyEvent(
|
|
43
|
+
sendKeyEvent('keydown', code);
|
|
44
44
|
}, [code]);
|
|
45
|
-
return (_jsx("button", { type: "button", "aria-label": label, className: cn(
|
|
45
|
+
return (_jsx("button", { type: "button", "aria-label": label, className: cn('flex size-14 touch-none select-none items-center justify-center rounded-2xl border border-white/25 bg-slate-950/65 p-2 text-white shadow-lg backdrop-blur-sm transition active:scale-95 [-webkit-touch-callout:none] [-webkit-user-select:none]', className), onContextMenu: (event) => event.preventDefault(), onPointerCancel: release, onPointerDown: press, onPointerLeave: release, onPointerUp: release, children: children }));
|
|
46
46
|
}
|
|
47
47
|
export function OnScreenControls({ onZoomIn, onZoomOut, showMovementControls = true, showJumpControl = true, } = {}) {
|
|
48
48
|
const showZoomControls = Boolean(onZoomIn && onZoomOut);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { type ReactNode } from
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
2
|
export type SceneSettingsProps = {
|
|
3
|
-
cameraViewMode:
|
|
4
|
-
onCameraViewModeChange: (value:
|
|
3
|
+
cameraViewMode: 'perspective' | 'orthographic';
|
|
4
|
+
onCameraViewModeChange: (value: 'perspective' | 'orthographic') => void;
|
|
5
5
|
allowCameraViewModeChange?: boolean;
|
|
6
6
|
/** Standalone character selection and customization menu toggle. */
|
|
7
7
|
characterDesignerEnabled?: boolean;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
-
import { createPortal } from
|
|
4
|
-
import { useEffect, useState } from
|
|
5
|
-
import { Box, Camera, Focus, Grid3X3, UserRoundPen } from
|
|
6
|
-
import { AccountDrawer } from
|
|
7
|
-
import { Button } from
|
|
3
|
+
import { createPortal } from 'react-dom';
|
|
4
|
+
import { useEffect, useState } from 'react';
|
|
5
|
+
import { Box, Camera, Focus, Grid3X3, UserRoundPen } from 'lucide-react';
|
|
6
|
+
import { AccountDrawer } from './account-drawer';
|
|
7
|
+
import { Button } from '#components/ui/button';
|
|
8
8
|
function usePortalTarget(targetId) {
|
|
9
9
|
const [target, setTarget] = useState(null);
|
|
10
10
|
useEffect(() => {
|
|
@@ -21,14 +21,14 @@ export function SceneSettings({ cameraViewMode, onCameraViewModeChange, allowCam
|
|
|
21
21
|
const characterDesignerTarget = usePortalTarget(characterDesignerTargetId);
|
|
22
22
|
const roomDesignerTarget = usePortalTarget(roomDesignerTargetId);
|
|
23
23
|
const sceneEditorTarget = usePortalTarget(sceneEditorTargetId);
|
|
24
|
-
const cameraControl = (_jsxs("div", { className: "workspace-camera-control", role: "group", "aria-label": "Camera view", children: [_jsxs(Button, { type: "button", size: "sm", variant: cameraViewMode ===
|
|
25
|
-
const characterDesignerControl = (_jsxs(Button, { type: "button", variant: characterDesignerEnabled ?
|
|
24
|
+
const cameraControl = (_jsxs("div", { className: "workspace-camera-control", role: "group", "aria-label": "Camera view", children: [_jsxs(Button, { type: "button", size: "sm", variant: cameraViewMode === 'perspective' ? 'default' : 'outline', className: "workspace-camera-button", "aria-label": "Perspective camera", title: "Perspective camera", "aria-pressed": cameraViewMode === 'perspective', onClick: () => onCameraViewModeChange('perspective'), children: [_jsx(Camera, { "aria-hidden": "true" }), "Perspective"] }), _jsxs(Button, { type: "button", size: "sm", variant: cameraViewMode === 'orthographic' ? 'default' : 'outline', className: "workspace-camera-button", "aria-label": "Top-down camera", title: "Top-down camera", "aria-pressed": cameraViewMode === 'orthographic', onClick: () => onCameraViewModeChange('orthographic'), children: [_jsx(Focus, { "aria-hidden": "true" }), "Top-down"] })] }));
|
|
25
|
+
const characterDesignerControl = (_jsxs(Button, { type: "button", variant: characterDesignerEnabled ? 'default' : 'outline', size: "sm", "aria-haspopup": "dialog", "aria-label": characterDesignerEnabled ? 'Close character designer' : 'Open character designer', title: characterDesignerEnabled ? 'Close character designer' : 'Open character designer', "aria-pressed": characterDesignerEnabled, onClick: () => onCharacterDesignerChange?.(!characterDesignerEnabled), children: [_jsx(UserRoundPen, { className: "size-4", "aria-hidden": "true" }), _jsx("span", { className: "workspace-character-designer-label", children: "Character" })] }));
|
|
26
26
|
const roomDesignerControl = (_jsxs(Button, { type: "button", variant: "outline", size: "sm", "aria-haspopup": "dialog", "aria-label": "Open room designer", title: "Open room designer", onClick: onOpenRoomDesigner, children: [_jsx(Grid3X3, { className: "size-4", "aria-hidden": "true" }), _jsx("span", { className: "workspace-room-designer-label", children: "Room designer" })] }));
|
|
27
|
-
const sceneEditorControl = (_jsxs(Button, { type: "button", variant: sceneEditorEnabled ?
|
|
27
|
+
const sceneEditorControl = (_jsxs(Button, { type: "button", variant: sceneEditorEnabled ? 'default' : 'outline', size: "sm", "aria-haspopup": "dialog", "aria-label": sceneEditorEnabled ? 'Close scene editor' : 'Open scene editor', title: sceneEditorEnabled ? 'Close scene editor' : 'Open scene editor', "aria-pressed": sceneEditorEnabled, onClick: () => onSceneEditorChange?.(!sceneEditorEnabled), children: [_jsx(Box, { className: "size-4", "aria-hidden": "true" }), _jsx("span", { className: "workspace-scene-editor-label", children: "Scene editor" })] }));
|
|
28
28
|
return (_jsxs(_Fragment, { children: [showAccountDrawer ? (_jsx(AccountDrawer, { accountLabel: accountLabel, authenticated: accountAuthenticated, busy: accountBusy, musicControl: accountMusicControl, triggerTargetId: accountTargetId, onSignIn: onAccountSignIn, onSignOut: onAccountSignOut })) : null, allowCameraViewModeChange ? renderInTarget(cameraControl, cameraTarget) : null, characterDesignerEnabled != null &&
|
|
29
29
|
!characterDesignerEnabled &&
|
|
30
|
-
onCharacterDesignerChange ? (characterDesignerTarget ? (createPortal(characterDesignerControl, characterDesignerTarget)) : (_jsx("div", { className: "fixed right-4 top-16 z-40", children: characterDesignerControl }))) : null, onOpenRoomDesigner && cameraViewMode ===
|
|
30
|
+
onCharacterDesignerChange ? (characterDesignerTarget ? (createPortal(characterDesignerControl, characterDesignerTarget)) : (_jsx("div", { className: "fixed right-4 top-16 z-40", children: characterDesignerControl }))) : null, onOpenRoomDesigner && cameraViewMode === 'orthographic' ? (roomDesignerTarget ? (createPortal(roomDesignerControl, roomDesignerTarget)) : (_jsx("div", { className: "fixed right-4 top-16 z-40", children: roomDesignerControl }))) : null, sceneEditorEnabled != null &&
|
|
31
31
|
!sceneEditorEnabled &&
|
|
32
32
|
onSceneEditorChange &&
|
|
33
|
-
cameraViewMode ===
|
|
33
|
+
cameraViewMode === 'perspective' ? (sceneEditorTarget ? (createPortal(sceneEditorControl, sceneEditorTarget)) : (_jsx("div", { className: "fixed right-4 top-16 z-40", children: sceneEditorControl }))) : null] }));
|
|
34
34
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { ThemeProvider as NextThemesProvider } from
|
|
3
|
+
import { ThemeProvider as NextThemesProvider } from 'next-themes';
|
|
4
4
|
const CompatibleNextThemesProvider = NextThemesProvider;
|
|
5
5
|
/** Shared theme provider used by each Next app in the workspace. */
|
|
6
6
|
export function ThemeProvider({ children }) {
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useSyncExternalStore } from
|
|
4
|
-
import { Monitor, Moon, Sun } from
|
|
5
|
-
import { useTheme } from
|
|
6
|
-
import { Button } from
|
|
7
|
-
import { cn } from
|
|
3
|
+
import { useSyncExternalStore } from 'react';
|
|
4
|
+
import { Monitor, Moon, Sun } from 'lucide-react';
|
|
5
|
+
import { useTheme } from 'next-themes';
|
|
6
|
+
import { Button } from '#components/ui/button';
|
|
7
|
+
import { cn } from '#lib/utils';
|
|
8
8
|
/**
|
|
9
9
|
* Compact sun/moon theme selector. Wired to the next-themes provider so the
|
|
10
10
|
* choice persists across the app (localStorage) and applies to every scene.
|
|
@@ -15,6 +15,6 @@ export function ThemeToggle({ className }) {
|
|
|
15
15
|
// next-themes resolves the saved/system theme after mount. Use the stable
|
|
16
16
|
// light presentation for both SSR and the first client render so the
|
|
17
17
|
// aria/class attributes cannot mismatch during hydration.
|
|
18
|
-
const selectedTheme = mounted ? theme :
|
|
19
|
-
return (_jsxs("div", { className: cn(
|
|
18
|
+
const selectedTheme = mounted ? theme : 'system';
|
|
19
|
+
return (_jsxs("div", { className: cn('inline-flex items-center gap-1.5 rounded-full border border-input bg-background p-1.5', className), role: "radiogroup", "aria-label": "Theme", children: [_jsx(Button, { type: "button", role: "radio", "aria-checked": selectedTheme === 'system', "aria-label": "System theme", variant: selectedTheme === 'system' ? 'default' : 'ghost', size: "icon-sm", onClick: () => setTheme('system'), className: "rounded-full", children: _jsx(Monitor, { className: "size-4", "aria-hidden": "true" }) }), _jsx(Button, { type: "button", role: "radio", "aria-checked": selectedTheme === 'light', "aria-label": "Light theme", variant: selectedTheme === 'light' ? 'default' : 'ghost', size: "icon-sm", onClick: () => setTheme('light'), className: "rounded-full", children: _jsx(Sun, { className: "size-4", "aria-hidden": "true" }) }), _jsx(Button, { type: "button", role: "radio", "aria-checked": selectedTheme === 'dark', "aria-label": "Dark theme", variant: selectedTheme === 'dark' ? 'default' : 'ghost', size: "icon-sm", onClick: () => setTheme('dark'), className: "rounded-full", children: _jsx(Moon, { className: "size-4", "aria-hidden": "true" }) })] }));
|
|
20
20
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { useRender } from
|
|
2
|
-
import { type VariantProps } from
|
|
1
|
+
import { useRender } from '@base-ui/react/use-render';
|
|
2
|
+
import { type VariantProps } from 'class-variance-authority';
|
|
3
3
|
declare const badgeVariants: (props?: ({
|
|
4
4
|
variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined;
|
|
5
5
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
|
-
declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<
|
|
6
|
+
declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
7
7
|
export { Badge, badgeVariants };
|
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
import { mergeProps } from
|
|
2
|
-
import { useRender } from
|
|
3
|
-
import { cva } from
|
|
4
|
-
import { cn } from
|
|
5
|
-
const badgeVariants = cva(
|
|
1
|
+
import { mergeProps } from '@base-ui/react/merge-props';
|
|
2
|
+
import { useRender } from '@base-ui/react/use-render';
|
|
3
|
+
import { cva } from 'class-variance-authority';
|
|
4
|
+
import { cn } from '#lib/utils';
|
|
5
|
+
const badgeVariants = cva('group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!', {
|
|
6
6
|
variants: {
|
|
7
7
|
variant: {
|
|
8
|
-
default:
|
|
9
|
-
secondary:
|
|
10
|
-
destructive:
|
|
11
|
-
outline:
|
|
12
|
-
ghost:
|
|
13
|
-
link:
|
|
8
|
+
default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
|
|
9
|
+
secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
|
|
10
|
+
destructive: 'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
|
|
11
|
+
outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
|
|
12
|
+
ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
|
|
13
|
+
link: 'text-primary underline-offset-4 hover:underline',
|
|
14
14
|
},
|
|
15
15
|
},
|
|
16
16
|
defaultVariants: {
|
|
17
|
-
variant:
|
|
17
|
+
variant: 'default',
|
|
18
18
|
},
|
|
19
19
|
});
|
|
20
|
-
function Badge({ className, variant =
|
|
20
|
+
function Badge({ className, variant = 'default', render, ...props }) {
|
|
21
21
|
return useRender({
|
|
22
|
-
defaultTagName:
|
|
22
|
+
defaultTagName: 'span',
|
|
23
23
|
props: mergeProps({
|
|
24
24
|
className: cn(badgeVariants({ variant }), className),
|
|
25
25
|
}, props),
|
|
26
26
|
render,
|
|
27
27
|
state: {
|
|
28
|
-
slot:
|
|
28
|
+
slot: 'badge',
|
|
29
29
|
variant,
|
|
30
30
|
},
|
|
31
31
|
});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { Button as ButtonPrimitive } from
|
|
2
|
-
import { type VariantProps } from
|
|
1
|
+
import { Button as ButtonPrimitive } from '@base-ui/react/button';
|
|
2
|
+
import { type VariantProps } from 'class-variance-authority';
|
|
3
3
|
declare const buttonVariants: (props?: ({
|
|
4
4
|
variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "success" | "link" | null | undefined;
|
|
5
5
|
size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
|
|
@@ -1,35 +1,35 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Button as ButtonPrimitive } from
|
|
3
|
-
import { cva } from
|
|
4
|
-
import { cn } from
|
|
2
|
+
import { Button as ButtonPrimitive } from '@base-ui/react/button';
|
|
3
|
+
import { cva } from 'class-variance-authority';
|
|
4
|
+
import { cn } from '#lib/utils';
|
|
5
5
|
const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
|
|
6
6
|
variants: {
|
|
7
7
|
variant: {
|
|
8
|
-
default:
|
|
9
|
-
outline:
|
|
10
|
-
secondary:
|
|
11
|
-
ghost:
|
|
12
|
-
destructive:
|
|
13
|
-
success:
|
|
14
|
-
link:
|
|
8
|
+
default: 'bg-primary text-primary-foreground hover:bg-primary/80',
|
|
9
|
+
outline: 'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
|
|
10
|
+
secondary: 'bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
|
|
11
|
+
ghost: 'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
|
|
12
|
+
destructive: 'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
|
|
13
|
+
success: 'bg-[#1a7f37]/10 text-[#1a7f37] hover:bg-[#1a7f37]/20 focus-visible:border-[#1a7f37]/40 focus-visible:ring-[#1a7f37]/20 dark:bg-[#3fb950]/20 dark:text-[#7ee787] dark:hover:bg-[#3fb950]/30 dark:focus-visible:ring-[#3fb950]/40',
|
|
14
|
+
link: 'text-primary underline-offset-4 hover:underline',
|
|
15
15
|
},
|
|
16
16
|
size: {
|
|
17
|
-
default:
|
|
17
|
+
default: 'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
|
|
18
18
|
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
|
19
19
|
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
|
|
20
|
-
lg:
|
|
21
|
-
icon:
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
20
|
+
lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
|
|
21
|
+
icon: 'size-8',
|
|
22
|
+
'icon-xs': "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
|
|
23
|
+
'icon-sm': 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
|
|
24
|
+
'icon-lg': 'size-9',
|
|
25
25
|
},
|
|
26
26
|
},
|
|
27
27
|
defaultVariants: {
|
|
28
|
-
variant:
|
|
29
|
-
size:
|
|
28
|
+
variant: 'default',
|
|
29
|
+
size: 'default',
|
|
30
30
|
},
|
|
31
31
|
});
|
|
32
|
-
function Button({ className, variant =
|
|
32
|
+
function Button({ className, variant = 'default', size = 'default', ...props }) {
|
|
33
33
|
return (_jsx(ButtonPrimitive, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props }));
|
|
34
34
|
}
|
|
35
35
|
export { Button, buttonVariants };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { HTMLAttributes } from
|
|
1
|
+
import type { HTMLAttributes } from 'react';
|
|
2
2
|
declare function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
|
|
3
3
|
declare function CardContent({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
|
|
4
4
|
export { Card, CardContent };
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { cn } from
|
|
2
|
+
import { cn } from '#lib/utils';
|
|
3
3
|
function Card({ className, ...props }) {
|
|
4
|
-
return (_jsx("div", { "data-slot": "card", className: cn(
|
|
4
|
+
return (_jsx("div", { "data-slot": "card", className: cn('rounded-xl border bg-card text-card-foreground shadow-sm', className), ...props }));
|
|
5
5
|
}
|
|
6
6
|
function CardContent({ className, ...props }) {
|
|
7
|
-
return _jsx("div", { "data-slot": "card-content", className: cn(
|
|
7
|
+
return _jsx("div", { "data-slot": "card-content", className: cn('p-4', className), ...props });
|
|
8
8
|
}
|
|
9
9
|
export { Card, CardContent };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
import { Dialog as DialogPrimitive } from
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
|
|
3
3
|
declare function Dialog({ ...props }: DialogPrimitive.Root.Props): React.JSX.Element;
|
|
4
4
|
declare function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props): React.JSX.Element;
|
|
5
5
|
declare function DialogPortal({ ...props }: DialogPrimitive.Portal.Props): React.JSX.Element;
|
|
@@ -8,8 +8,8 @@ declare function DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop
|
|
|
8
8
|
declare function DialogContent({ className, children, showCloseButton, ...props }: DialogPrimitive.Popup.Props & {
|
|
9
9
|
showCloseButton?: boolean;
|
|
10
10
|
}): React.JSX.Element;
|
|
11
|
-
declare function DialogHeader({ className, ...props }: React.ComponentProps<
|
|
12
|
-
declare function DialogFooter({ className, ...props }: React.ComponentProps<
|
|
11
|
+
declare function DialogHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
|
|
12
|
+
declare function DialogFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
|
|
13
13
|
declare function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props): React.JSX.Element;
|
|
14
14
|
declare function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props): React.JSX.Element;
|
|
15
15
|
export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { Dialog as DialogPrimitive } from
|
|
4
|
-
import { X } from
|
|
5
|
-
import { cn } from
|
|
3
|
+
import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
|
|
4
|
+
import { X } from 'lucide-react';
|
|
5
|
+
import { cn } from '#lib/utils';
|
|
6
6
|
function Dialog({ ...props }) {
|
|
7
7
|
return _jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
|
|
8
8
|
}
|
|
@@ -16,21 +16,21 @@ function DialogClose({ ...props }) {
|
|
|
16
16
|
return _jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
|
|
17
17
|
}
|
|
18
18
|
function DialogOverlay({ className, ...props }) {
|
|
19
|
-
return (_jsx(DialogPrimitive.Backdrop, { "data-slot": "dialog-overlay", className: cn(
|
|
19
|
+
return (_jsx(DialogPrimitive.Backdrop, { "data-slot": "dialog-overlay", className: cn('fixed inset-0 z-[120] bg-slate-950/55 backdrop-blur-[2px] transition-opacity duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0', className), ...props }));
|
|
20
20
|
}
|
|
21
21
|
function DialogContent({ className, children, showCloseButton = true, ...props }) {
|
|
22
|
-
return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsx(DialogPrimitive.Viewport, { "data-slot": "dialog-viewport", className: "fixed inset-0 z-[120] flex items-center justify-center p-4", children: _jsxs(DialogPrimitive.Popup, { "data-slot": "dialog-content", className: cn(
|
|
22
|
+
return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsx(DialogPrimitive.Viewport, { "data-slot": "dialog-viewport", className: "fixed inset-0 z-[120] flex items-center justify-center p-4", children: _jsxs(DialogPrimitive.Popup, { "data-slot": "dialog-content", className: cn('relative grid max-h-[min(44rem,calc(100dvh-2rem))] w-full max-w-2xl gap-0 overflow-hidden rounded-2xl border bg-card text-card-foreground shadow-2xl outline-none transition-[opacity,transform] duration-200 data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0', className), ...props, children: [children, showCloseButton && (_jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", className: "absolute right-4 top-4 inline-flex size-8 items-center justify-center rounded-lg text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50", "aria-label": "Close dialog", children: _jsx(X, { className: "size-4", "aria-hidden": "true" }) }))] }) })] }));
|
|
23
23
|
}
|
|
24
24
|
function DialogHeader({ className, ...props }) {
|
|
25
|
-
return (_jsx("div", { "data-slot": "dialog-header", className: cn(
|
|
25
|
+
return (_jsx("div", { "data-slot": "dialog-header", className: cn('flex flex-col gap-1.5 border-b px-6 py-5 pr-14', className), ...props }));
|
|
26
26
|
}
|
|
27
27
|
function DialogFooter({ className, ...props }) {
|
|
28
|
-
return (_jsx("div", { "data-slot": "dialog-footer", className: cn(
|
|
28
|
+
return (_jsx("div", { "data-slot": "dialog-footer", className: cn('flex flex-col-reverse gap-2 border-t px-6 py-4 sm:flex-row sm:justify-end', className), ...props }));
|
|
29
29
|
}
|
|
30
30
|
function DialogTitle({ className, ...props }) {
|
|
31
|
-
return (_jsx(DialogPrimitive.Title, { "data-slot": "dialog-title", className: cn(
|
|
31
|
+
return (_jsx(DialogPrimitive.Title, { "data-slot": "dialog-title", className: cn('text-base font-semibold tracking-tight', className), ...props }));
|
|
32
32
|
}
|
|
33
33
|
function DialogDescription({ className, ...props }) {
|
|
34
|
-
return (_jsx(DialogPrimitive.Description, { "data-slot": "dialog-description", className: cn(
|
|
34
|
+
return (_jsx(DialogPrimitive.Description, { "data-slot": "dialog-description", className: cn('text-sm leading-5 text-muted-foreground', className), ...props }));
|
|
35
35
|
}
|
|
36
36
|
export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
import { Drawer as DrawerPrimitive } from
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';
|
|
3
3
|
declare function Drawer({ modal, showSwipeHandle, snapPoints, swipeDirection, ...props }: DrawerPrimitive.Root.Props & {
|
|
4
4
|
showSwipeHandle?: boolean;
|
|
5
5
|
}): React.JSX.Element;
|
|
@@ -7,10 +7,10 @@ declare function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props): Rea
|
|
|
7
7
|
declare function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props): React.JSX.Element;
|
|
8
8
|
declare function DrawerClose({ ...props }: DrawerPrimitive.Close.Props): React.JSX.Element;
|
|
9
9
|
declare function DrawerOverlay({ className, ...props }: DrawerPrimitive.Backdrop.Props): React.JSX.Element;
|
|
10
|
-
declare function DrawerSwipeHandle({ className, ...props }: React.ComponentProps<
|
|
10
|
+
declare function DrawerSwipeHandle({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
|
|
11
11
|
declare function DrawerContent({ className, children, ...props }: DrawerPrimitive.Popup.Props): React.JSX.Element;
|
|
12
|
-
declare function DrawerHeader({ className, ...props }: React.ComponentProps<
|
|
13
|
-
declare function DrawerFooter({ className, ...props }: React.ComponentProps<
|
|
12
|
+
declare function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
|
|
13
|
+
declare function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
|
|
14
14
|
declare function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props): React.JSX.Element;
|
|
15
15
|
declare function DrawerDescription({ className, ...props }: DrawerPrimitive.Description.Props): React.JSX.Element;
|
|
16
16
|
export { Drawer, DrawerPortal, DrawerOverlay, DrawerSwipeHandle, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import * as React from
|
|
4
|
-
import { Drawer as DrawerPrimitive } from
|
|
5
|
-
import { cn } from
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';
|
|
5
|
+
import { cn } from '#lib/utils';
|
|
6
6
|
const DrawerContext = React.createContext(null);
|
|
7
7
|
function useDrawer() {
|
|
8
8
|
const context = React.useContext(DrawerContext);
|
|
9
9
|
if (!context) {
|
|
10
|
-
throw new Error(
|
|
10
|
+
throw new Error('useDrawer must be used within a Drawer.');
|
|
11
11
|
}
|
|
12
12
|
return context;
|
|
13
13
|
}
|
|
14
|
-
function Drawer({ modal = true, showSwipeHandle = false, snapPoints, swipeDirection =
|
|
14
|
+
function Drawer({ modal = true, showSwipeHandle = false, snapPoints, swipeDirection = 'down', ...props }) {
|
|
15
15
|
const hasSnapPoints = snapPoints != null && snapPoints.length > 0;
|
|
16
16
|
const contextValue = React.useMemo(() => ({ hasSnapPoints, modal, showSwipeHandle, swipeDirection }), [hasSnapPoints, modal, showSwipeHandle, swipeDirection]);
|
|
17
17
|
return (_jsx(DrawerContext.Provider, { value: contextValue, children: _jsx(DrawerPrimitive.Root, { "data-slot": "drawer", modal: modal, snapPoints: snapPoints, swipeDirection: swipeDirection, ...props }) }));
|
|
@@ -26,50 +26,50 @@ function DrawerClose({ ...props }) {
|
|
|
26
26
|
return _jsx(DrawerPrimitive.Close, { "data-slot": "drawer-close", ...props });
|
|
27
27
|
}
|
|
28
28
|
function DrawerOverlay({ className, ...props }) {
|
|
29
|
-
return (_jsx(DrawerPrimitive.Backdrop, { "data-slot": "drawer-overlay", className: cn(
|
|
29
|
+
return (_jsx(DrawerPrimitive.Backdrop, { "data-slot": "drawer-overlay", className: cn('fixed inset-0 z-[110] min-h-dvh bg-black/10 opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-snap-points:[--drawer-overlay-min-opacity:0.5] data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs supports-[-webkit-touch-callout:none]:absolute', className), ...props }));
|
|
30
30
|
}
|
|
31
31
|
function DrawerSwipeHandle({ className, ...props }) {
|
|
32
|
-
return (_jsx("div", { "data-slot": "drawer-swipe-handle", "aria-hidden": "true", className: cn(
|
|
32
|
+
return (_jsx("div", { "data-slot": "drawer-swipe-handle", "aria-hidden": "true", className: cn('relative z-10 flex shrink-0 cursor-grab transition-opacity duration-200 group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-[swipe-axis=x]/drawer-popup:h-full group-data-[swipe-axis=x]/drawer-popup:w-3 group-data-[swipe-axis=x]/drawer-popup:items-center group-data-[swipe-axis=y]/drawer-popup:h-3 group-data-[swipe-axis=y]/drawer-popup:w-full group-data-[swipe-axis=y]/drawer-popup:justify-center group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:justify-end group-data-[swipe-direction=up]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:items-start after:block after:shrink-0 after:rounded-full after:bg-muted group-data-[swipe-axis=x]/drawer-popup:after:h-24 group-data-[swipe-axis=x]/drawer-popup:after:w-1 group-data-[swipe-axis=y]/drawer-popup:after:h-1 group-data-[swipe-axis=y]/drawer-popup:after:w-24 active:cursor-grabbing', className), ...props }));
|
|
33
33
|
}
|
|
34
34
|
function DrawerContent({ className, children, ...props }) {
|
|
35
35
|
const { hasSnapPoints, modal, showSwipeHandle, swipeDirection } = useDrawer();
|
|
36
|
-
const swipeAxis = swipeDirection ===
|
|
37
|
-
return (_jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [modal === true && _jsx(DrawerOverlay, { "data-snap-points": hasSnapPoints ?
|
|
36
|
+
const swipeAxis = swipeDirection === 'down' || swipeDirection === 'up' ? 'y' : 'x';
|
|
37
|
+
return (_jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [modal === true && _jsx(DrawerOverlay, { "data-snap-points": hasSnapPoints ? '' : undefined }), _jsx(DrawerPrimitive.Viewport, { "data-slot": "drawer-viewport", "data-modal": modal, className: "pointer-events-none fixed inset-0 z-[110] select-none data-[modal=true]:pointer-events-auto", children: _jsxs(DrawerPrimitive.Popup, { "data-slot": "drawer-popup", "data-swipe-axis": swipeAxis, "data-snap-points": hasSnapPoints ? '' : undefined, className: cn(
|
|
38
38
|
// Base.
|
|
39
|
-
|
|
39
|
+
'group/drawer-popup pointer-events-auto fixed z-[110] m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col bg-popover text-sm text-popover-foreground transition-[transform,height,opacity,filter] duration-450 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none [interpolate-size:allow-keywords] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b',
|
|
40
40
|
// Nested.
|
|
41
|
-
|
|
41
|
+
'data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95',
|
|
42
42
|
// Bleed.
|
|
43
|
-
|
|
43
|
+
'after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=x]:after:inset-y-0 data-[swipe-axis=x]:after:w-(--bleed) data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=y]:after:h-(--bleed) data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:right-full data-[swipe-direction=right]:after:left-full data-[swipe-direction=up]:after:bottom-full',
|
|
44
44
|
// Sizing.
|
|
45
|
-
|
|
45
|
+
'[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]',
|
|
46
46
|
// Stack.
|
|
47
|
-
|
|
47
|
+
'[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-step:0.05]',
|
|
48
48
|
// Transitions.
|
|
49
|
-
|
|
49
|
+
'data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]',
|
|
50
50
|
// Axis: y.
|
|
51
|
-
|
|
51
|
+
'data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)',
|
|
52
52
|
// Axis: x.
|
|
53
|
-
|
|
53
|
+
'data-[swipe-axis=x]:inset-y-0 data-[swipe-axis=x]:flex-row',
|
|
54
54
|
// Direction: down.
|
|
55
|
-
|
|
55
|
+
'data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:origin-bottom data-[swipe-direction=down]:[--closed-transform:translate3d(0,calc(100%+var(--drawer-inset,0px)+2px),0)] data-[swipe-direction=down]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--stack-shrink)*var(--stack-height)))]',
|
|
56
56
|
// Direction: up.
|
|
57
|
-
|
|
57
|
+
'data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:[--closed-transform:translate3d(0,calc(-100%-var(--drawer-inset,0px)-2px),0)] data-[swipe-direction=up]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--stack-shrink)*var(--stack-height)))]',
|
|
58
58
|
// Direction: left.
|
|
59
|
-
|
|
59
|
+
'data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-var(--drawer-inset,0px)-2px),0,0)] data-[swipe-direction=left]:[--translate-x:calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)+(var(--stack-shrink)*100%))]',
|
|
60
60
|
// Direction: right.
|
|
61
|
-
|
|
61
|
+
'data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+var(--drawer-inset,0px)+2px),0,0)] data-[swipe-direction=right]:[--translate-x:calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)-(var(--stack-shrink)*100%))]', className), ...props, children: [showSwipeHandle && _jsx(DrawerSwipeHandle, {}), _jsx(DrawerPrimitive.Content, { "data-slot": "drawer-content", className: cn('flex min-h-0 flex-1 flex-col overflow-hidden overscroll-contain rounded-[inherit] transition-opacity duration-300 ease-[cubic-bezier(0.45,1.005,0,1.005)] select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none'), children: children })] }) })] }));
|
|
62
62
|
}
|
|
63
63
|
function DrawerHeader({ className, ...props }) {
|
|
64
|
-
return (_jsx("div", { "data-slot": "drawer-header", className: cn(
|
|
64
|
+
return (_jsx("div", { "data-slot": "drawer-header", className: cn('flex shrink-0 flex-col gap-0.5 p-4 pb-0 group-data-[swipe-axis=y]/drawer-popup:text-center md:gap-0.5 md:text-left', className), ...props }));
|
|
65
65
|
}
|
|
66
66
|
function DrawerFooter({ className, ...props }) {
|
|
67
|
-
return (_jsx("div", { "data-slot": "drawer-footer", className: cn(
|
|
67
|
+
return (_jsx("div", { "data-slot": "drawer-footer", className: cn('mt-auto flex shrink-0 flex-col gap-2 p-4 pt-0', className), ...props }));
|
|
68
68
|
}
|
|
69
69
|
function DrawerTitle({ className, ...props }) {
|
|
70
|
-
return (_jsx(DrawerPrimitive.Title, { "data-slot": "drawer-title", className: cn(
|
|
70
|
+
return (_jsx(DrawerPrimitive.Title, { "data-slot": "drawer-title", className: cn('text-base font-medium text-foreground', className), ...props }));
|
|
71
71
|
}
|
|
72
72
|
function DrawerDescription({ className, ...props }) {
|
|
73
|
-
return (_jsx(DrawerPrimitive.Description, { "data-slot": "drawer-description", className: cn(
|
|
73
|
+
return (_jsx(DrawerPrimitive.Description, { "data-slot": "drawer-description", className: cn('text-sm text-balance text-muted-foreground', className), ...props }));
|
|
74
74
|
}
|
|
75
75
|
export { Drawer, DrawerPortal, DrawerOverlay, DrawerSwipeHandle, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };
|