@classic-homes/theme-react 0.1.49 → 0.1.51
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/index.css +141 -0
- package/dist/index.d.mts +118 -4
- package/dist/index.d.ts +118 -4
- package/dist/index.js +911 -21
- package/dist/index.mjs +927 -20
- package/package.json +5 -3
package/dist/index.css
ADDED
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
/* src/styles/data-panel.css */
|
|
2
|
+
.resize-handle {
|
|
3
|
+
position: absolute;
|
|
4
|
+
z-index: 10;
|
|
5
|
+
touch-action: none;
|
|
6
|
+
background: transparent;
|
|
7
|
+
}
|
|
8
|
+
.resize-handle--horizontal {
|
|
9
|
+
left: 14px;
|
|
10
|
+
right: 14px;
|
|
11
|
+
height: 8px;
|
|
12
|
+
cursor: ns-resize;
|
|
13
|
+
}
|
|
14
|
+
.resize-handle--horizontal::after {
|
|
15
|
+
content: "";
|
|
16
|
+
position: absolute;
|
|
17
|
+
left: 0;
|
|
18
|
+
right: 0;
|
|
19
|
+
height: 2px;
|
|
20
|
+
background: transparent;
|
|
21
|
+
transition: background-color 0.15s ease;
|
|
22
|
+
}
|
|
23
|
+
.resize-handle--top {
|
|
24
|
+
top: 2px;
|
|
25
|
+
}
|
|
26
|
+
.resize-handle--top::after {
|
|
27
|
+
top: 0;
|
|
28
|
+
}
|
|
29
|
+
.resize-handle--bottom {
|
|
30
|
+
bottom: 2px;
|
|
31
|
+
}
|
|
32
|
+
.resize-handle--bottom::after {
|
|
33
|
+
bottom: 0;
|
|
34
|
+
}
|
|
35
|
+
.resize-handle--vertical {
|
|
36
|
+
top: 14px;
|
|
37
|
+
bottom: 14px;
|
|
38
|
+
width: 8px;
|
|
39
|
+
cursor: ew-resize;
|
|
40
|
+
}
|
|
41
|
+
.resize-handle--vertical::after {
|
|
42
|
+
content: "";
|
|
43
|
+
position: absolute;
|
|
44
|
+
top: 0;
|
|
45
|
+
bottom: 0;
|
|
46
|
+
width: 2px;
|
|
47
|
+
background: transparent;
|
|
48
|
+
transition: background-color 0.15s ease;
|
|
49
|
+
}
|
|
50
|
+
.resize-handle--left {
|
|
51
|
+
left: 2px;
|
|
52
|
+
}
|
|
53
|
+
.resize-handle--left::after {
|
|
54
|
+
left: 0;
|
|
55
|
+
}
|
|
56
|
+
.resize-handle--right {
|
|
57
|
+
right: 2px;
|
|
58
|
+
}
|
|
59
|
+
.resize-handle--right::after {
|
|
60
|
+
right: 0;
|
|
61
|
+
}
|
|
62
|
+
.resize-handle--horizontal:hover::after,
|
|
63
|
+
.resize-handle--vertical:hover::after {
|
|
64
|
+
background: hsl(var(--border));
|
|
65
|
+
}
|
|
66
|
+
.resize-handle--corner {
|
|
67
|
+
width: 20px;
|
|
68
|
+
height: 20px;
|
|
69
|
+
background: transparent;
|
|
70
|
+
}
|
|
71
|
+
.resize-handle--corner::after {
|
|
72
|
+
content: "";
|
|
73
|
+
position: absolute;
|
|
74
|
+
width: 10px;
|
|
75
|
+
height: 10px;
|
|
76
|
+
border: 2px solid transparent !important;
|
|
77
|
+
transition:
|
|
78
|
+
border-top-color 0.15s ease,
|
|
79
|
+
border-right-color 0.15s ease,
|
|
80
|
+
border-bottom-color 0.15s ease,
|
|
81
|
+
border-left-color 0.15s ease;
|
|
82
|
+
}
|
|
83
|
+
.resize-handle--top-left {
|
|
84
|
+
top: 2px;
|
|
85
|
+
left: 2px;
|
|
86
|
+
cursor: nwse-resize;
|
|
87
|
+
}
|
|
88
|
+
.resize-handle--top-left::after {
|
|
89
|
+
top: 0;
|
|
90
|
+
left: 0;
|
|
91
|
+
border-top-left-radius: 8px;
|
|
92
|
+
}
|
|
93
|
+
.resize-handle--top-left:hover::after {
|
|
94
|
+
border-top-color: hsl(var(--border)) !important;
|
|
95
|
+
border-left-color: hsl(var(--border)) !important;
|
|
96
|
+
}
|
|
97
|
+
.resize-handle--top-right {
|
|
98
|
+
top: 2px;
|
|
99
|
+
right: 2px;
|
|
100
|
+
cursor: nesw-resize;
|
|
101
|
+
}
|
|
102
|
+
.resize-handle--top-right::after {
|
|
103
|
+
top: 0;
|
|
104
|
+
right: 0;
|
|
105
|
+
border-top-right-radius: 8px;
|
|
106
|
+
}
|
|
107
|
+
.resize-handle--top-right:hover::after {
|
|
108
|
+
border-top-color: hsl(var(--border)) !important;
|
|
109
|
+
border-right-color: hsl(var(--border)) !important;
|
|
110
|
+
}
|
|
111
|
+
.resize-handle--bottom-left {
|
|
112
|
+
bottom: 2px;
|
|
113
|
+
left: 2px;
|
|
114
|
+
cursor: nesw-resize;
|
|
115
|
+
}
|
|
116
|
+
.resize-handle--bottom-left::after {
|
|
117
|
+
bottom: 0;
|
|
118
|
+
left: 0;
|
|
119
|
+
border-bottom-left-radius: 8px;
|
|
120
|
+
}
|
|
121
|
+
.resize-handle--bottom-left:hover::after {
|
|
122
|
+
border-bottom-color: hsl(var(--border)) !important;
|
|
123
|
+
border-left-color: hsl(var(--border)) !important;
|
|
124
|
+
}
|
|
125
|
+
.resize-handle--bottom-right {
|
|
126
|
+
bottom: 2px;
|
|
127
|
+
right: 2px;
|
|
128
|
+
cursor: nwse-resize;
|
|
129
|
+
}
|
|
130
|
+
.resize-handle--bottom-right::after {
|
|
131
|
+
bottom: 0;
|
|
132
|
+
right: 0;
|
|
133
|
+
border-bottom-right-radius: 8px;
|
|
134
|
+
}
|
|
135
|
+
.resize-handle--bottom-right:hover::after {
|
|
136
|
+
border-bottom-color: hsl(var(--border)) !important;
|
|
137
|
+
border-right-color: hsl(var(--border)) !important;
|
|
138
|
+
}
|
|
139
|
+
.data-panel--pulling {
|
|
140
|
+
transition: transform 0.05s ease-out, box-shadow 0.15s ease-out;
|
|
141
|
+
}
|
package/dist/index.d.mts
CHANGED
|
@@ -2,11 +2,13 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { VariantProps } from 'class-variance-authority';
|
|
4
4
|
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
5
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
6
5
|
import * as SeparatorPrimitive from '@radix-ui/react-separator';
|
|
7
6
|
import * as SwitchPrimitives from '@radix-ui/react-switch';
|
|
8
7
|
import * as AvatarPrimitive from '@radix-ui/react-avatar';
|
|
8
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
9
9
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
10
|
+
import { PanelMode, PanelEdge, DataPanelAction, PanelConstraints, Position, Size } from '@classic-homes/data-panel-core';
|
|
11
|
+
export { DataPanelAction, DataPanelState, PanelConstraints, PanelEdge, PanelMode, Position, Size } from '@classic-homes/data-panel-core';
|
|
10
12
|
import { ClassValue } from 'clsx';
|
|
11
13
|
|
|
12
14
|
declare const buttonVariants: (props?: ({
|
|
@@ -20,7 +22,7 @@ declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAtt
|
|
|
20
22
|
|
|
21
23
|
declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
22
24
|
declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
23
|
-
declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<
|
|
25
|
+
declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
|
|
24
26
|
declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
|
|
25
27
|
declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
26
28
|
declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -36,7 +38,7 @@ declare const badgeVariants: (props?: ({
|
|
|
36
38
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
37
39
|
interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
|
|
38
40
|
}
|
|
39
|
-
declare
|
|
41
|
+
declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
|
|
40
42
|
|
|
41
43
|
declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
42
44
|
|
|
@@ -101,10 +103,122 @@ interface PageHeaderProps extends React.HTMLAttributes<HTMLElement>, VariantProp
|
|
|
101
103
|
}
|
|
102
104
|
declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLElement>>;
|
|
103
105
|
|
|
106
|
+
interface DataPanelProps {
|
|
107
|
+
/** Panel visibility */
|
|
108
|
+
open?: boolean;
|
|
109
|
+
/** Callback when open state changes */
|
|
110
|
+
onOpenChange?: (open: boolean) => void;
|
|
111
|
+
/** Panel mode - pinned to edge or detached floating */
|
|
112
|
+
mode?: PanelMode;
|
|
113
|
+
/** Callback when mode changes */
|
|
114
|
+
onModeChange?: (mode: PanelMode) => void;
|
|
115
|
+
/** Edge to pin panel to (when mode is 'pinned') */
|
|
116
|
+
edge?: PanelEdge;
|
|
117
|
+
/** Callback when edge changes */
|
|
118
|
+
onEdgeChange?: (edge: PanelEdge) => void;
|
|
119
|
+
/** Whether panel is expanded or collapsed */
|
|
120
|
+
expanded?: boolean;
|
|
121
|
+
/** Callback when expanded state changes */
|
|
122
|
+
onExpandedChange?: (expanded: boolean) => void;
|
|
123
|
+
/** Panel title */
|
|
124
|
+
title?: string;
|
|
125
|
+
/** Panel subtitle */
|
|
126
|
+
subtitle?: string;
|
|
127
|
+
/** Content inside the panel */
|
|
128
|
+
children: React.ReactNode;
|
|
129
|
+
/** Footer action buttons */
|
|
130
|
+
actions?: DataPanelAction[];
|
|
131
|
+
/** Size constraints */
|
|
132
|
+
constraints?: PanelConstraints;
|
|
133
|
+
/** Disable close button */
|
|
134
|
+
disableClose?: boolean;
|
|
135
|
+
/** Disable resize functionality */
|
|
136
|
+
disableResize?: boolean;
|
|
137
|
+
/** Disable drag functionality (detached mode) */
|
|
138
|
+
disableDrag?: boolean;
|
|
139
|
+
/** Disable mode switching */
|
|
140
|
+
disableModeSwitch?: boolean;
|
|
141
|
+
/** localStorage key for state persistence */
|
|
142
|
+
persistKey?: string;
|
|
143
|
+
/** Distance in pixels for edge snap detection */
|
|
144
|
+
snapThreshold?: number;
|
|
145
|
+
/** Distance in pixels to drag before detaching from pinned mode (0 to disable) */
|
|
146
|
+
detachThreshold?: number;
|
|
147
|
+
/** Custom header content (replaces title/subtitle) */
|
|
148
|
+
headerContent?: React.ReactNode;
|
|
149
|
+
/** Custom header actions */
|
|
150
|
+
headerActions?: React.ReactNode;
|
|
151
|
+
/** Custom footer content */
|
|
152
|
+
footerContent?: React.ReactNode;
|
|
153
|
+
/** Custom footer actions */
|
|
154
|
+
footerActions?: React.ReactNode;
|
|
155
|
+
/** Additional class */
|
|
156
|
+
className?: string;
|
|
157
|
+
}
|
|
158
|
+
interface UseDataPanelOptions {
|
|
159
|
+
persistKey?: string;
|
|
160
|
+
initialMode?: PanelMode;
|
|
161
|
+
initialEdge?: PanelEdge;
|
|
162
|
+
initialExpanded?: boolean;
|
|
163
|
+
constraints?: PanelConstraints;
|
|
164
|
+
}
|
|
165
|
+
declare function useDataPanel(options?: UseDataPanelOptions): {
|
|
166
|
+
mode: PanelMode;
|
|
167
|
+
setMode: (newMode: PanelMode) => void;
|
|
168
|
+
edge: PanelEdge;
|
|
169
|
+
setEdge: React.Dispatch<React.SetStateAction<PanelEdge>>;
|
|
170
|
+
isExpanded: boolean;
|
|
171
|
+
setIsExpanded: React.Dispatch<React.SetStateAction<boolean>>;
|
|
172
|
+
detachedPosition: Position;
|
|
173
|
+
setDetachedPosition: (position: Position) => void;
|
|
174
|
+
detachedSize: Size;
|
|
175
|
+
setDetachedSize: (size: Size) => void;
|
|
176
|
+
pinnedSize: number;
|
|
177
|
+
setPinnedSize: (size: number) => void;
|
|
178
|
+
};
|
|
179
|
+
interface DataPanelHeaderProps {
|
|
180
|
+
title?: string;
|
|
181
|
+
subtitle?: string;
|
|
182
|
+
mode: PanelMode;
|
|
183
|
+
edge: PanelEdge;
|
|
184
|
+
isExpanded: boolean;
|
|
185
|
+
onModeChange?: (mode: PanelMode) => void;
|
|
186
|
+
onEdgeChange?: (edge: PanelEdge) => void;
|
|
187
|
+
onExpandedChange?: (expanded: boolean) => void;
|
|
188
|
+
onClose?: () => void;
|
|
189
|
+
disableClose?: boolean;
|
|
190
|
+
disableModeSwitch?: boolean;
|
|
191
|
+
headerContent?: React.ReactNode;
|
|
192
|
+
headerActions?: React.ReactNode;
|
|
193
|
+
className?: string;
|
|
194
|
+
draggable?: boolean;
|
|
195
|
+
}
|
|
196
|
+
declare const DataPanelHeader: React.ForwardRefExoticComponent<DataPanelHeaderProps & React.RefAttributes<HTMLDivElement>>;
|
|
197
|
+
interface DataPanelContentProps {
|
|
198
|
+
children: React.ReactNode;
|
|
199
|
+
className?: string;
|
|
200
|
+
}
|
|
201
|
+
declare const DataPanelContent: React.ForwardRefExoticComponent<DataPanelContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
202
|
+
interface DataPanelFooterProps {
|
|
203
|
+
actions?: DataPanelAction[];
|
|
204
|
+
footerContent?: React.ReactNode;
|
|
205
|
+
footerActions?: React.ReactNode;
|
|
206
|
+
className?: string;
|
|
207
|
+
}
|
|
208
|
+
declare const DataPanelFooter: React.ForwardRefExoticComponent<DataPanelFooterProps & React.RefAttributes<HTMLDivElement>>;
|
|
209
|
+
interface DataPanelTabProps {
|
|
210
|
+
title?: string;
|
|
211
|
+
edge: PanelEdge;
|
|
212
|
+
onClick?: () => void;
|
|
213
|
+
className?: string;
|
|
214
|
+
}
|
|
215
|
+
declare const DataPanelTab: React.ForwardRefExoticComponent<DataPanelTabProps & React.RefAttributes<HTMLButtonElement>>;
|
|
216
|
+
declare const DataPanel: React.ForwardRefExoticComponent<DataPanelProps & React.RefAttributes<HTMLDivElement>>;
|
|
217
|
+
|
|
104
218
|
/**
|
|
105
219
|
* Utility function to merge Tailwind CSS classes
|
|
106
220
|
* Uses clsx for conditional classes and tailwind-merge to handle conflicts
|
|
107
221
|
*/
|
|
108
222
|
declare function cn(...inputs: ClassValue[]): string;
|
|
109
223
|
|
|
110
|
-
export { Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Input, type InputProps, Label, PageHeader, type PageHeaderProps, Separator, Switch, type SwitchProps, badgeVariants, buttonVariants, cn, pageHeaderActionsVariants, pageHeaderContainerVariants, pageHeaderSubtitleVariants, pageHeaderTitleVariants };
|
|
224
|
+
export { Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, DataPanel, DataPanelContent, type DataPanelContentProps, DataPanelFooter, type DataPanelFooterProps, DataPanelHeader, type DataPanelProps, DataPanelTab, type DataPanelTabProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Input, type InputProps, Label, PageHeader, type PageHeaderProps, Separator, Switch, type SwitchProps, badgeVariants, buttonVariants, cn, pageHeaderActionsVariants, pageHeaderContainerVariants, pageHeaderSubtitleVariants, pageHeaderTitleVariants, useDataPanel };
|
package/dist/index.d.ts
CHANGED
|
@@ -2,11 +2,13 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { VariantProps } from 'class-variance-authority';
|
|
4
4
|
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
5
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
6
5
|
import * as SeparatorPrimitive from '@radix-ui/react-separator';
|
|
7
6
|
import * as SwitchPrimitives from '@radix-ui/react-switch';
|
|
8
7
|
import * as AvatarPrimitive from '@radix-ui/react-avatar';
|
|
8
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
9
9
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
10
|
+
import { PanelMode, PanelEdge, DataPanelAction, PanelConstraints, Position, Size } from '@classic-homes/data-panel-core';
|
|
11
|
+
export { DataPanelAction, DataPanelState, PanelConstraints, PanelEdge, PanelMode, Position, Size } from '@classic-homes/data-panel-core';
|
|
10
12
|
import { ClassValue } from 'clsx';
|
|
11
13
|
|
|
12
14
|
declare const buttonVariants: (props?: ({
|
|
@@ -20,7 +22,7 @@ declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAtt
|
|
|
20
22
|
|
|
21
23
|
declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
22
24
|
declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
23
|
-
declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<
|
|
25
|
+
declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
|
|
24
26
|
declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
|
|
25
27
|
declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
26
28
|
declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -36,7 +38,7 @@ declare const badgeVariants: (props?: ({
|
|
|
36
38
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
37
39
|
interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
|
|
38
40
|
}
|
|
39
|
-
declare
|
|
41
|
+
declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
|
|
40
42
|
|
|
41
43
|
declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
42
44
|
|
|
@@ -101,10 +103,122 @@ interface PageHeaderProps extends React.HTMLAttributes<HTMLElement>, VariantProp
|
|
|
101
103
|
}
|
|
102
104
|
declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLElement>>;
|
|
103
105
|
|
|
106
|
+
interface DataPanelProps {
|
|
107
|
+
/** Panel visibility */
|
|
108
|
+
open?: boolean;
|
|
109
|
+
/** Callback when open state changes */
|
|
110
|
+
onOpenChange?: (open: boolean) => void;
|
|
111
|
+
/** Panel mode - pinned to edge or detached floating */
|
|
112
|
+
mode?: PanelMode;
|
|
113
|
+
/** Callback when mode changes */
|
|
114
|
+
onModeChange?: (mode: PanelMode) => void;
|
|
115
|
+
/** Edge to pin panel to (when mode is 'pinned') */
|
|
116
|
+
edge?: PanelEdge;
|
|
117
|
+
/** Callback when edge changes */
|
|
118
|
+
onEdgeChange?: (edge: PanelEdge) => void;
|
|
119
|
+
/** Whether panel is expanded or collapsed */
|
|
120
|
+
expanded?: boolean;
|
|
121
|
+
/** Callback when expanded state changes */
|
|
122
|
+
onExpandedChange?: (expanded: boolean) => void;
|
|
123
|
+
/** Panel title */
|
|
124
|
+
title?: string;
|
|
125
|
+
/** Panel subtitle */
|
|
126
|
+
subtitle?: string;
|
|
127
|
+
/** Content inside the panel */
|
|
128
|
+
children: React.ReactNode;
|
|
129
|
+
/** Footer action buttons */
|
|
130
|
+
actions?: DataPanelAction[];
|
|
131
|
+
/** Size constraints */
|
|
132
|
+
constraints?: PanelConstraints;
|
|
133
|
+
/** Disable close button */
|
|
134
|
+
disableClose?: boolean;
|
|
135
|
+
/** Disable resize functionality */
|
|
136
|
+
disableResize?: boolean;
|
|
137
|
+
/** Disable drag functionality (detached mode) */
|
|
138
|
+
disableDrag?: boolean;
|
|
139
|
+
/** Disable mode switching */
|
|
140
|
+
disableModeSwitch?: boolean;
|
|
141
|
+
/** localStorage key for state persistence */
|
|
142
|
+
persistKey?: string;
|
|
143
|
+
/** Distance in pixels for edge snap detection */
|
|
144
|
+
snapThreshold?: number;
|
|
145
|
+
/** Distance in pixels to drag before detaching from pinned mode (0 to disable) */
|
|
146
|
+
detachThreshold?: number;
|
|
147
|
+
/** Custom header content (replaces title/subtitle) */
|
|
148
|
+
headerContent?: React.ReactNode;
|
|
149
|
+
/** Custom header actions */
|
|
150
|
+
headerActions?: React.ReactNode;
|
|
151
|
+
/** Custom footer content */
|
|
152
|
+
footerContent?: React.ReactNode;
|
|
153
|
+
/** Custom footer actions */
|
|
154
|
+
footerActions?: React.ReactNode;
|
|
155
|
+
/** Additional class */
|
|
156
|
+
className?: string;
|
|
157
|
+
}
|
|
158
|
+
interface UseDataPanelOptions {
|
|
159
|
+
persistKey?: string;
|
|
160
|
+
initialMode?: PanelMode;
|
|
161
|
+
initialEdge?: PanelEdge;
|
|
162
|
+
initialExpanded?: boolean;
|
|
163
|
+
constraints?: PanelConstraints;
|
|
164
|
+
}
|
|
165
|
+
declare function useDataPanel(options?: UseDataPanelOptions): {
|
|
166
|
+
mode: PanelMode;
|
|
167
|
+
setMode: (newMode: PanelMode) => void;
|
|
168
|
+
edge: PanelEdge;
|
|
169
|
+
setEdge: React.Dispatch<React.SetStateAction<PanelEdge>>;
|
|
170
|
+
isExpanded: boolean;
|
|
171
|
+
setIsExpanded: React.Dispatch<React.SetStateAction<boolean>>;
|
|
172
|
+
detachedPosition: Position;
|
|
173
|
+
setDetachedPosition: (position: Position) => void;
|
|
174
|
+
detachedSize: Size;
|
|
175
|
+
setDetachedSize: (size: Size) => void;
|
|
176
|
+
pinnedSize: number;
|
|
177
|
+
setPinnedSize: (size: number) => void;
|
|
178
|
+
};
|
|
179
|
+
interface DataPanelHeaderProps {
|
|
180
|
+
title?: string;
|
|
181
|
+
subtitle?: string;
|
|
182
|
+
mode: PanelMode;
|
|
183
|
+
edge: PanelEdge;
|
|
184
|
+
isExpanded: boolean;
|
|
185
|
+
onModeChange?: (mode: PanelMode) => void;
|
|
186
|
+
onEdgeChange?: (edge: PanelEdge) => void;
|
|
187
|
+
onExpandedChange?: (expanded: boolean) => void;
|
|
188
|
+
onClose?: () => void;
|
|
189
|
+
disableClose?: boolean;
|
|
190
|
+
disableModeSwitch?: boolean;
|
|
191
|
+
headerContent?: React.ReactNode;
|
|
192
|
+
headerActions?: React.ReactNode;
|
|
193
|
+
className?: string;
|
|
194
|
+
draggable?: boolean;
|
|
195
|
+
}
|
|
196
|
+
declare const DataPanelHeader: React.ForwardRefExoticComponent<DataPanelHeaderProps & React.RefAttributes<HTMLDivElement>>;
|
|
197
|
+
interface DataPanelContentProps {
|
|
198
|
+
children: React.ReactNode;
|
|
199
|
+
className?: string;
|
|
200
|
+
}
|
|
201
|
+
declare const DataPanelContent: React.ForwardRefExoticComponent<DataPanelContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
202
|
+
interface DataPanelFooterProps {
|
|
203
|
+
actions?: DataPanelAction[];
|
|
204
|
+
footerContent?: React.ReactNode;
|
|
205
|
+
footerActions?: React.ReactNode;
|
|
206
|
+
className?: string;
|
|
207
|
+
}
|
|
208
|
+
declare const DataPanelFooter: React.ForwardRefExoticComponent<DataPanelFooterProps & React.RefAttributes<HTMLDivElement>>;
|
|
209
|
+
interface DataPanelTabProps {
|
|
210
|
+
title?: string;
|
|
211
|
+
edge: PanelEdge;
|
|
212
|
+
onClick?: () => void;
|
|
213
|
+
className?: string;
|
|
214
|
+
}
|
|
215
|
+
declare const DataPanelTab: React.ForwardRefExoticComponent<DataPanelTabProps & React.RefAttributes<HTMLButtonElement>>;
|
|
216
|
+
declare const DataPanel: React.ForwardRefExoticComponent<DataPanelProps & React.RefAttributes<HTMLDivElement>>;
|
|
217
|
+
|
|
104
218
|
/**
|
|
105
219
|
* Utility function to merge Tailwind CSS classes
|
|
106
220
|
* Uses clsx for conditional classes and tailwind-merge to handle conflicts
|
|
107
221
|
*/
|
|
108
222
|
declare function cn(...inputs: ClassValue[]): string;
|
|
109
223
|
|
|
110
|
-
export { Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Input, type InputProps, Label, PageHeader, type PageHeaderProps, Separator, Switch, type SwitchProps, badgeVariants, buttonVariants, cn, pageHeaderActionsVariants, pageHeaderContainerVariants, pageHeaderSubtitleVariants, pageHeaderTitleVariants };
|
|
224
|
+
export { Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, DataPanel, DataPanelContent, type DataPanelContentProps, DataPanelFooter, type DataPanelFooterProps, DataPanelHeader, type DataPanelProps, DataPanelTab, type DataPanelTabProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Input, type InputProps, Label, PageHeader, type PageHeaderProps, Separator, Switch, type SwitchProps, badgeVariants, buttonVariants, cn, pageHeaderActionsVariants, pageHeaderContainerVariants, pageHeaderSubtitleVariants, pageHeaderTitleVariants, useDataPanel };
|