@classic-homes/theme-react 0.1.50 → 0.1.52
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 +134 -7
- package/dist/index.d.ts +134 -7
- package/dist/index.js +1007 -46
- package/dist/index.mjs +1022 -45
- package/package.json +3 -2
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
|
@@ -3,10 +3,11 @@ import * as React from 'react';
|
|
|
3
3
|
import { VariantProps } from 'class-variance-authority';
|
|
4
4
|
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
5
5
|
import * as SeparatorPrimitive from '@radix-ui/react-separator';
|
|
6
|
-
import * as SwitchPrimitives from '@radix-ui/react-switch';
|
|
7
6
|
import * as AvatarPrimitive from '@radix-ui/react-avatar';
|
|
8
7
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
9
8
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
9
|
+
import { PanelMode, PanelEdge, DataPanelAction, PanelConstraints, Position, Size } from '@classic-homes/data-panel-core';
|
|
10
|
+
export { DataPanelAction, DataPanelState, PanelConstraints, PanelEdge, PanelMode, Position, Size } from '@classic-homes/data-panel-core';
|
|
10
11
|
import { ClassValue } from 'clsx';
|
|
11
12
|
|
|
12
13
|
declare const buttonVariants: (props?: ({
|
|
@@ -29,6 +30,14 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
|
29
30
|
}
|
|
30
31
|
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
|
|
31
32
|
|
|
33
|
+
interface PasswordInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
|
|
34
|
+
/** Label for the toggle button when password is hidden */
|
|
35
|
+
showLabel?: string;
|
|
36
|
+
/** Label for the toggle button when password is visible */
|
|
37
|
+
hideLabel?: string;
|
|
38
|
+
}
|
|
39
|
+
declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
40
|
+
|
|
32
41
|
declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: class_variance_authority_types.ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
|
|
33
42
|
|
|
34
43
|
declare const badgeVariants: (props?: ({
|
|
@@ -40,7 +49,13 @@ declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttri
|
|
|
40
49
|
|
|
41
50
|
declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
42
51
|
|
|
43
|
-
interface SwitchProps extends React.ComponentPropsWithoutRef<
|
|
52
|
+
interface SwitchProps extends React.ComponentPropsWithoutRef<'button'> {
|
|
53
|
+
/** Whether the switch is checked (controlled) */
|
|
54
|
+
checked?: boolean;
|
|
55
|
+
/** Default checked state (uncontrolled) */
|
|
56
|
+
defaultChecked?: boolean;
|
|
57
|
+
/** Callback when checked state changes */
|
|
58
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
44
59
|
/** Size variant for the switch */
|
|
45
60
|
size?: 'default' | 'sm';
|
|
46
61
|
}
|
|
@@ -54,8 +69,8 @@ declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
|
|
|
54
69
|
declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
55
70
|
declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
|
|
56
71
|
declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
|
|
57
|
-
declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<
|
|
58
|
-
declare const DialogContent: React.ForwardRefExoticComponent<Omit<
|
|
72
|
+
declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
|
|
73
|
+
declare const DialogContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
59
74
|
declare const DialogHeader: {
|
|
60
75
|
({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
61
76
|
displayName: string;
|
|
@@ -64,8 +79,8 @@ declare const DialogFooter: {
|
|
|
64
79
|
({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
65
80
|
displayName: string;
|
|
66
81
|
};
|
|
67
|
-
declare const DialogTitle: React.ForwardRefExoticComponent<Omit<
|
|
68
|
-
declare const DialogDescription: React.ForwardRefExoticComponent<Omit<
|
|
82
|
+
declare const DialogTitle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
|
|
83
|
+
declare const DialogDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
|
|
69
84
|
|
|
70
85
|
/**
|
|
71
86
|
* PageHeader - Hero/page header component
|
|
@@ -101,10 +116,122 @@ interface PageHeaderProps extends React.HTMLAttributes<HTMLElement>, VariantProp
|
|
|
101
116
|
}
|
|
102
117
|
declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLElement>>;
|
|
103
118
|
|
|
119
|
+
interface DataPanelProps {
|
|
120
|
+
/** Panel visibility */
|
|
121
|
+
open?: boolean;
|
|
122
|
+
/** Callback when open state changes */
|
|
123
|
+
onOpenChange?: (open: boolean) => void;
|
|
124
|
+
/** Panel mode - pinned to edge or detached floating */
|
|
125
|
+
mode?: PanelMode;
|
|
126
|
+
/** Callback when mode changes */
|
|
127
|
+
onModeChange?: (mode: PanelMode) => void;
|
|
128
|
+
/** Edge to pin panel to (when mode is 'pinned') */
|
|
129
|
+
edge?: PanelEdge;
|
|
130
|
+
/** Callback when edge changes */
|
|
131
|
+
onEdgeChange?: (edge: PanelEdge) => void;
|
|
132
|
+
/** Whether panel is expanded or collapsed */
|
|
133
|
+
expanded?: boolean;
|
|
134
|
+
/** Callback when expanded state changes */
|
|
135
|
+
onExpandedChange?: (expanded: boolean) => void;
|
|
136
|
+
/** Panel title */
|
|
137
|
+
title?: string;
|
|
138
|
+
/** Panel subtitle */
|
|
139
|
+
subtitle?: string;
|
|
140
|
+
/** Content inside the panel */
|
|
141
|
+
children: React.ReactNode;
|
|
142
|
+
/** Footer action buttons */
|
|
143
|
+
actions?: DataPanelAction[];
|
|
144
|
+
/** Size constraints */
|
|
145
|
+
constraints?: PanelConstraints;
|
|
146
|
+
/** Disable close button */
|
|
147
|
+
disableClose?: boolean;
|
|
148
|
+
/** Disable resize functionality */
|
|
149
|
+
disableResize?: boolean;
|
|
150
|
+
/** Disable drag functionality (detached mode) */
|
|
151
|
+
disableDrag?: boolean;
|
|
152
|
+
/** Disable mode switching */
|
|
153
|
+
disableModeSwitch?: boolean;
|
|
154
|
+
/** localStorage key for state persistence */
|
|
155
|
+
persistKey?: string;
|
|
156
|
+
/** Distance in pixels for edge snap detection */
|
|
157
|
+
snapThreshold?: number;
|
|
158
|
+
/** Distance in pixels to drag before detaching from pinned mode (0 to disable) */
|
|
159
|
+
detachThreshold?: number;
|
|
160
|
+
/** Custom header content (replaces title/subtitle) */
|
|
161
|
+
headerContent?: React.ReactNode;
|
|
162
|
+
/** Custom header actions */
|
|
163
|
+
headerActions?: React.ReactNode;
|
|
164
|
+
/** Custom footer content */
|
|
165
|
+
footerContent?: React.ReactNode;
|
|
166
|
+
/** Custom footer actions */
|
|
167
|
+
footerActions?: React.ReactNode;
|
|
168
|
+
/** Additional class */
|
|
169
|
+
className?: string;
|
|
170
|
+
}
|
|
171
|
+
interface UseDataPanelOptions {
|
|
172
|
+
persistKey?: string;
|
|
173
|
+
initialMode?: PanelMode;
|
|
174
|
+
initialEdge?: PanelEdge;
|
|
175
|
+
initialExpanded?: boolean;
|
|
176
|
+
constraints?: PanelConstraints;
|
|
177
|
+
}
|
|
178
|
+
declare function useDataPanel(options?: UseDataPanelOptions): {
|
|
179
|
+
mode: PanelMode;
|
|
180
|
+
setMode: (newMode: PanelMode) => void;
|
|
181
|
+
edge: PanelEdge;
|
|
182
|
+
setEdge: React.Dispatch<React.SetStateAction<PanelEdge>>;
|
|
183
|
+
isExpanded: boolean;
|
|
184
|
+
setIsExpanded: React.Dispatch<React.SetStateAction<boolean>>;
|
|
185
|
+
detachedPosition: Position;
|
|
186
|
+
setDetachedPosition: (position: Position) => void;
|
|
187
|
+
detachedSize: Size;
|
|
188
|
+
setDetachedSize: (size: Size) => void;
|
|
189
|
+
pinnedSize: number;
|
|
190
|
+
setPinnedSize: (size: number) => void;
|
|
191
|
+
};
|
|
192
|
+
interface DataPanelHeaderProps {
|
|
193
|
+
title?: string;
|
|
194
|
+
subtitle?: string;
|
|
195
|
+
mode: PanelMode;
|
|
196
|
+
edge: PanelEdge;
|
|
197
|
+
isExpanded: boolean;
|
|
198
|
+
onModeChange?: (mode: PanelMode) => void;
|
|
199
|
+
onEdgeChange?: (edge: PanelEdge) => void;
|
|
200
|
+
onExpandedChange?: (expanded: boolean) => void;
|
|
201
|
+
onClose?: () => void;
|
|
202
|
+
disableClose?: boolean;
|
|
203
|
+
disableModeSwitch?: boolean;
|
|
204
|
+
headerContent?: React.ReactNode;
|
|
205
|
+
headerActions?: React.ReactNode;
|
|
206
|
+
className?: string;
|
|
207
|
+
draggable?: boolean;
|
|
208
|
+
}
|
|
209
|
+
declare const DataPanelHeader: React.ForwardRefExoticComponent<DataPanelHeaderProps & React.RefAttributes<HTMLDivElement>>;
|
|
210
|
+
interface DataPanelContentProps {
|
|
211
|
+
children: React.ReactNode;
|
|
212
|
+
className?: string;
|
|
213
|
+
}
|
|
214
|
+
declare const DataPanelContent: React.ForwardRefExoticComponent<DataPanelContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
215
|
+
interface DataPanelFooterProps {
|
|
216
|
+
actions?: DataPanelAction[];
|
|
217
|
+
footerContent?: React.ReactNode;
|
|
218
|
+
footerActions?: React.ReactNode;
|
|
219
|
+
className?: string;
|
|
220
|
+
}
|
|
221
|
+
declare const DataPanelFooter: React.ForwardRefExoticComponent<DataPanelFooterProps & React.RefAttributes<HTMLDivElement>>;
|
|
222
|
+
interface DataPanelTabProps {
|
|
223
|
+
title?: string;
|
|
224
|
+
edge: PanelEdge;
|
|
225
|
+
onClick?: () => void;
|
|
226
|
+
className?: string;
|
|
227
|
+
}
|
|
228
|
+
declare const DataPanelTab: React.ForwardRefExoticComponent<DataPanelTabProps & React.RefAttributes<HTMLButtonElement>>;
|
|
229
|
+
declare const DataPanel: React.ForwardRefExoticComponent<DataPanelProps & React.RefAttributes<HTMLDivElement>>;
|
|
230
|
+
|
|
104
231
|
/**
|
|
105
232
|
* Utility function to merge Tailwind CSS classes
|
|
106
233
|
* Uses clsx for conditional classes and tailwind-merge to handle conflicts
|
|
107
234
|
*/
|
|
108
235
|
declare function cn(...inputs: ClassValue[]): string;
|
|
109
236
|
|
|
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 };
|
|
237
|
+
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, PasswordInput, type PasswordInputProps, Separator, Switch, type SwitchProps, badgeVariants, buttonVariants, cn, pageHeaderActionsVariants, pageHeaderContainerVariants, pageHeaderSubtitleVariants, pageHeaderTitleVariants, useDataPanel };
|
package/dist/index.d.ts
CHANGED
|
@@ -3,10 +3,11 @@ import * as React from 'react';
|
|
|
3
3
|
import { VariantProps } from 'class-variance-authority';
|
|
4
4
|
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
5
5
|
import * as SeparatorPrimitive from '@radix-ui/react-separator';
|
|
6
|
-
import * as SwitchPrimitives from '@radix-ui/react-switch';
|
|
7
6
|
import * as AvatarPrimitive from '@radix-ui/react-avatar';
|
|
8
7
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
9
8
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
9
|
+
import { PanelMode, PanelEdge, DataPanelAction, PanelConstraints, Position, Size } from '@classic-homes/data-panel-core';
|
|
10
|
+
export { DataPanelAction, DataPanelState, PanelConstraints, PanelEdge, PanelMode, Position, Size } from '@classic-homes/data-panel-core';
|
|
10
11
|
import { ClassValue } from 'clsx';
|
|
11
12
|
|
|
12
13
|
declare const buttonVariants: (props?: ({
|
|
@@ -29,6 +30,14 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
|
29
30
|
}
|
|
30
31
|
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
|
|
31
32
|
|
|
33
|
+
interface PasswordInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
|
|
34
|
+
/** Label for the toggle button when password is hidden */
|
|
35
|
+
showLabel?: string;
|
|
36
|
+
/** Label for the toggle button when password is visible */
|
|
37
|
+
hideLabel?: string;
|
|
38
|
+
}
|
|
39
|
+
declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
40
|
+
|
|
32
41
|
declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: class_variance_authority_types.ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
|
|
33
42
|
|
|
34
43
|
declare const badgeVariants: (props?: ({
|
|
@@ -40,7 +49,13 @@ declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttri
|
|
|
40
49
|
|
|
41
50
|
declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
42
51
|
|
|
43
|
-
interface SwitchProps extends React.ComponentPropsWithoutRef<
|
|
52
|
+
interface SwitchProps extends React.ComponentPropsWithoutRef<'button'> {
|
|
53
|
+
/** Whether the switch is checked (controlled) */
|
|
54
|
+
checked?: boolean;
|
|
55
|
+
/** Default checked state (uncontrolled) */
|
|
56
|
+
defaultChecked?: boolean;
|
|
57
|
+
/** Callback when checked state changes */
|
|
58
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
44
59
|
/** Size variant for the switch */
|
|
45
60
|
size?: 'default' | 'sm';
|
|
46
61
|
}
|
|
@@ -54,8 +69,8 @@ declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
|
|
|
54
69
|
declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
55
70
|
declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
|
|
56
71
|
declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
|
|
57
|
-
declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<
|
|
58
|
-
declare const DialogContent: React.ForwardRefExoticComponent<Omit<
|
|
72
|
+
declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
|
|
73
|
+
declare const DialogContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
59
74
|
declare const DialogHeader: {
|
|
60
75
|
({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
61
76
|
displayName: string;
|
|
@@ -64,8 +79,8 @@ declare const DialogFooter: {
|
|
|
64
79
|
({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
65
80
|
displayName: string;
|
|
66
81
|
};
|
|
67
|
-
declare const DialogTitle: React.ForwardRefExoticComponent<Omit<
|
|
68
|
-
declare const DialogDescription: React.ForwardRefExoticComponent<Omit<
|
|
82
|
+
declare const DialogTitle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
|
|
83
|
+
declare const DialogDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
|
|
69
84
|
|
|
70
85
|
/**
|
|
71
86
|
* PageHeader - Hero/page header component
|
|
@@ -101,10 +116,122 @@ interface PageHeaderProps extends React.HTMLAttributes<HTMLElement>, VariantProp
|
|
|
101
116
|
}
|
|
102
117
|
declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLElement>>;
|
|
103
118
|
|
|
119
|
+
interface DataPanelProps {
|
|
120
|
+
/** Panel visibility */
|
|
121
|
+
open?: boolean;
|
|
122
|
+
/** Callback when open state changes */
|
|
123
|
+
onOpenChange?: (open: boolean) => void;
|
|
124
|
+
/** Panel mode - pinned to edge or detached floating */
|
|
125
|
+
mode?: PanelMode;
|
|
126
|
+
/** Callback when mode changes */
|
|
127
|
+
onModeChange?: (mode: PanelMode) => void;
|
|
128
|
+
/** Edge to pin panel to (when mode is 'pinned') */
|
|
129
|
+
edge?: PanelEdge;
|
|
130
|
+
/** Callback when edge changes */
|
|
131
|
+
onEdgeChange?: (edge: PanelEdge) => void;
|
|
132
|
+
/** Whether panel is expanded or collapsed */
|
|
133
|
+
expanded?: boolean;
|
|
134
|
+
/** Callback when expanded state changes */
|
|
135
|
+
onExpandedChange?: (expanded: boolean) => void;
|
|
136
|
+
/** Panel title */
|
|
137
|
+
title?: string;
|
|
138
|
+
/** Panel subtitle */
|
|
139
|
+
subtitle?: string;
|
|
140
|
+
/** Content inside the panel */
|
|
141
|
+
children: React.ReactNode;
|
|
142
|
+
/** Footer action buttons */
|
|
143
|
+
actions?: DataPanelAction[];
|
|
144
|
+
/** Size constraints */
|
|
145
|
+
constraints?: PanelConstraints;
|
|
146
|
+
/** Disable close button */
|
|
147
|
+
disableClose?: boolean;
|
|
148
|
+
/** Disable resize functionality */
|
|
149
|
+
disableResize?: boolean;
|
|
150
|
+
/** Disable drag functionality (detached mode) */
|
|
151
|
+
disableDrag?: boolean;
|
|
152
|
+
/** Disable mode switching */
|
|
153
|
+
disableModeSwitch?: boolean;
|
|
154
|
+
/** localStorage key for state persistence */
|
|
155
|
+
persistKey?: string;
|
|
156
|
+
/** Distance in pixels for edge snap detection */
|
|
157
|
+
snapThreshold?: number;
|
|
158
|
+
/** Distance in pixels to drag before detaching from pinned mode (0 to disable) */
|
|
159
|
+
detachThreshold?: number;
|
|
160
|
+
/** Custom header content (replaces title/subtitle) */
|
|
161
|
+
headerContent?: React.ReactNode;
|
|
162
|
+
/** Custom header actions */
|
|
163
|
+
headerActions?: React.ReactNode;
|
|
164
|
+
/** Custom footer content */
|
|
165
|
+
footerContent?: React.ReactNode;
|
|
166
|
+
/** Custom footer actions */
|
|
167
|
+
footerActions?: React.ReactNode;
|
|
168
|
+
/** Additional class */
|
|
169
|
+
className?: string;
|
|
170
|
+
}
|
|
171
|
+
interface UseDataPanelOptions {
|
|
172
|
+
persistKey?: string;
|
|
173
|
+
initialMode?: PanelMode;
|
|
174
|
+
initialEdge?: PanelEdge;
|
|
175
|
+
initialExpanded?: boolean;
|
|
176
|
+
constraints?: PanelConstraints;
|
|
177
|
+
}
|
|
178
|
+
declare function useDataPanel(options?: UseDataPanelOptions): {
|
|
179
|
+
mode: PanelMode;
|
|
180
|
+
setMode: (newMode: PanelMode) => void;
|
|
181
|
+
edge: PanelEdge;
|
|
182
|
+
setEdge: React.Dispatch<React.SetStateAction<PanelEdge>>;
|
|
183
|
+
isExpanded: boolean;
|
|
184
|
+
setIsExpanded: React.Dispatch<React.SetStateAction<boolean>>;
|
|
185
|
+
detachedPosition: Position;
|
|
186
|
+
setDetachedPosition: (position: Position) => void;
|
|
187
|
+
detachedSize: Size;
|
|
188
|
+
setDetachedSize: (size: Size) => void;
|
|
189
|
+
pinnedSize: number;
|
|
190
|
+
setPinnedSize: (size: number) => void;
|
|
191
|
+
};
|
|
192
|
+
interface DataPanelHeaderProps {
|
|
193
|
+
title?: string;
|
|
194
|
+
subtitle?: string;
|
|
195
|
+
mode: PanelMode;
|
|
196
|
+
edge: PanelEdge;
|
|
197
|
+
isExpanded: boolean;
|
|
198
|
+
onModeChange?: (mode: PanelMode) => void;
|
|
199
|
+
onEdgeChange?: (edge: PanelEdge) => void;
|
|
200
|
+
onExpandedChange?: (expanded: boolean) => void;
|
|
201
|
+
onClose?: () => void;
|
|
202
|
+
disableClose?: boolean;
|
|
203
|
+
disableModeSwitch?: boolean;
|
|
204
|
+
headerContent?: React.ReactNode;
|
|
205
|
+
headerActions?: React.ReactNode;
|
|
206
|
+
className?: string;
|
|
207
|
+
draggable?: boolean;
|
|
208
|
+
}
|
|
209
|
+
declare const DataPanelHeader: React.ForwardRefExoticComponent<DataPanelHeaderProps & React.RefAttributes<HTMLDivElement>>;
|
|
210
|
+
interface DataPanelContentProps {
|
|
211
|
+
children: React.ReactNode;
|
|
212
|
+
className?: string;
|
|
213
|
+
}
|
|
214
|
+
declare const DataPanelContent: React.ForwardRefExoticComponent<DataPanelContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
215
|
+
interface DataPanelFooterProps {
|
|
216
|
+
actions?: DataPanelAction[];
|
|
217
|
+
footerContent?: React.ReactNode;
|
|
218
|
+
footerActions?: React.ReactNode;
|
|
219
|
+
className?: string;
|
|
220
|
+
}
|
|
221
|
+
declare const DataPanelFooter: React.ForwardRefExoticComponent<DataPanelFooterProps & React.RefAttributes<HTMLDivElement>>;
|
|
222
|
+
interface DataPanelTabProps {
|
|
223
|
+
title?: string;
|
|
224
|
+
edge: PanelEdge;
|
|
225
|
+
onClick?: () => void;
|
|
226
|
+
className?: string;
|
|
227
|
+
}
|
|
228
|
+
declare const DataPanelTab: React.ForwardRefExoticComponent<DataPanelTabProps & React.RefAttributes<HTMLButtonElement>>;
|
|
229
|
+
declare const DataPanel: React.ForwardRefExoticComponent<DataPanelProps & React.RefAttributes<HTMLDivElement>>;
|
|
230
|
+
|
|
104
231
|
/**
|
|
105
232
|
* Utility function to merge Tailwind CSS classes
|
|
106
233
|
* Uses clsx for conditional classes and tailwind-merge to handle conflicts
|
|
107
234
|
*/
|
|
108
235
|
declare function cn(...inputs: ClassValue[]): string;
|
|
109
236
|
|
|
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 };
|
|
237
|
+
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, PasswordInput, type PasswordInputProps, Separator, Switch, type SwitchProps, badgeVariants, buttonVariants, cn, pageHeaderActionsVariants, pageHeaderContainerVariants, pageHeaderSubtitleVariants, pageHeaderTitleVariants, useDataPanel };
|