@stevederico/skateboard-ui 4.6.0 → 4.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/README.md +143 -1100
- package/dist/App.d.ts +2 -0
- package/dist/App.js +3 -1
- package/dist/ui/command.js +1 -1
- package/dist/ui/context-menu.js +2 -2
- package/dist/ui/dropdown-menu.js +2 -2
- package/dist/ui/hover-card.js +1 -1
- package/dist/ui/menubar.js +2 -2
- package/dist/ui/popover.js +1 -1
- package/dist/ui/select.js +1 -1
- package/package.json +1 -1
package/dist/App.d.ts
CHANGED
|
@@ -14,6 +14,7 @@ export interface AppOverrides {
|
|
|
14
14
|
signUp?: ComponentType<any>;
|
|
15
15
|
signOut?: ComponentType<any>;
|
|
16
16
|
notFound?: ComponentType<any>;
|
|
17
|
+
authOverlay?: ComponentType<any>;
|
|
17
18
|
}
|
|
18
19
|
/** Configuration accepted by createSkateboardApp. */
|
|
19
20
|
export interface CreateSkateboardAppConfig {
|
|
@@ -46,6 +47,7 @@ export interface CreateSkateboardAppConfig {
|
|
|
46
47
|
* @param {React.ComponentType} [config.overrides.signUp] - Replace SignUpView
|
|
47
48
|
* @param {React.ComponentType} [config.overrides.signOut] - Replace SignOutView
|
|
48
49
|
* @param {React.ComponentType} [config.overrides.notFound] - Replace NotFound
|
|
50
|
+
* @param {React.ComponentType} [config.overrides.authOverlay] - Replace AuthOverlay
|
|
49
51
|
*
|
|
50
52
|
* @example
|
|
51
53
|
* import { createSkateboardApp } from '@stevederico/skateboard-ui/App';
|
package/dist/App.js
CHANGED
|
@@ -77,6 +77,7 @@ function App({ constants, appRoutes, defaultRoute, landingPage, overrides = {} }
|
|
|
77
77
|
* @param {React.ComponentType} [config.overrides.signUp] - Replace SignUpView
|
|
78
78
|
* @param {React.ComponentType} [config.overrides.signOut] - Replace SignOutView
|
|
79
79
|
* @param {React.ComponentType} [config.overrides.notFound] - Replace NotFound
|
|
80
|
+
* @param {React.ComponentType} [config.overrides.authOverlay] - Replace AuthOverlay
|
|
80
81
|
*
|
|
81
82
|
* @example
|
|
82
83
|
* import { createSkateboardApp } from '@stevederico/skateboard-ui/App';
|
|
@@ -112,5 +113,6 @@ export function createSkateboardApp({ constants, appRoutes, defaultRoute = appRo
|
|
|
112
113
|
document.documentElement.classList.toggle('dark', isDark);
|
|
113
114
|
const container = document.getElementById('root');
|
|
114
115
|
const root = createRoot(container);
|
|
115
|
-
|
|
116
|
+
const AuthOverlayComponent = overrides?.authOverlay || AuthOverlay;
|
|
117
|
+
root.render(_jsx(ErrorBoundary, { children: _jsx(ThemeProvider, { attribute: "class", defaultTheme: "system", enableSystem: true, children: _jsx(ContextProvider, { constants: constants, children: Wrapper ? (_jsx(Wrapper, { children: _jsxs(Router, { children: [_jsx(AuthOverlayComponent, {}), _jsx(App, { constants: constants, appRoutes: appRoutes, defaultRoute: defaultRoute, landingPage: landingPage, overrides: overrides })] }) })) : (_jsxs(Router, { children: [_jsx(AuthOverlayComponent, {}), _jsx(App, { constants: constants, appRoutes: appRoutes, defaultRoute: defaultRoute, landingPage: landingPage, overrides: overrides })] })) }) }) }));
|
|
116
118
|
}
|
package/dist/ui/command.js
CHANGED
|
@@ -9,7 +9,7 @@ function Command({ className, ...props }) {
|
|
|
9
9
|
return (_jsx(CommandPrimitive, { "data-slot": "command", className: cn("bg-popover text-popover-foreground rounded-xl! p-1 flex size-full flex-col overflow-hidden", className), ...props }));
|
|
10
10
|
}
|
|
11
11
|
function CommandDialog({ title = "Command Palette", description = "Search for a command to run...", children, className, showCloseButton = false, ...props }) {
|
|
12
|
-
return (_jsxs(Dialog, { ...props, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsx(DialogContent, { className: cn("rounded-xl!
|
|
12
|
+
return (_jsxs(Dialog, { ...props, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsx(DialogContent, { className: cn("rounded-xl! self-start justify-self-center mt-[33vh] overflow-hidden p-0", className), showCloseButton: showCloseButton, children: children })] }));
|
|
13
13
|
}
|
|
14
14
|
function CommandInput({ className, ...props }) {
|
|
15
15
|
return (_jsx("div", { "data-slot": "command-input-wrapper", className: "p-1 pb-0", children: _jsxs(InputGroup, { className: "bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!", children: [_jsx(CommandPrimitive.Input, { "data-slot": "command-input", className: cn("w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className), ...props }), _jsx(InputGroupAddon, { children: _jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }) })] }) }));
|
package/dist/ui/context-menu.js
CHANGED
|
@@ -213,7 +213,7 @@ function ContextMenuContent({ className, children, onKeyDown, ...props }) {
|
|
|
213
213
|
match.focus();
|
|
214
214
|
}
|
|
215
215
|
}
|
|
216
|
-
}, className: cn("z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10
|
|
216
|
+
}, className: cn("z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 transition-none outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: children }) }));
|
|
217
217
|
}
|
|
218
218
|
function ContextMenuGroup({ className, ...props }) {
|
|
219
219
|
return _jsx("div", { role: "group", "data-slot": "context-menu-group", className: className, ...props });
|
|
@@ -387,6 +387,6 @@ function ContextMenuSubContent({ className, children, onKeyDown, ...props }) {
|
|
|
387
387
|
match.focus();
|
|
388
388
|
}
|
|
389
389
|
}
|
|
390
|
-
}, className: cn("z-50 min-w-[96px] origin-(--transform-origin) overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10
|
|
390
|
+
}, className: cn("z-50 min-w-[96px] origin-(--transform-origin) overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 transition-none data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: children }) }));
|
|
391
391
|
}
|
|
392
392
|
export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, };
|
package/dist/ui/dropdown-menu.js
CHANGED
|
@@ -186,7 +186,7 @@ function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom"
|
|
|
186
186
|
match.focus();
|
|
187
187
|
}
|
|
188
188
|
}
|
|
189
|
-
}, className: cn("z-50 max-h-(--available-height) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10
|
|
189
|
+
}, className: cn("z-50 max-h-(--available-height) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 transition-none outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: children }) }));
|
|
190
190
|
}
|
|
191
191
|
function DropdownMenuGroup({ className, ...props }) {
|
|
192
192
|
return _jsx("div", { role: "group", "data-slot": "dropdown-menu-group", className: className, ...props });
|
|
@@ -372,6 +372,6 @@ function DropdownMenuSubContent({ className, children, onKeyDown, ...props }) {
|
|
|
372
372
|
match.focus();
|
|
373
373
|
}
|
|
374
374
|
}
|
|
375
|
-
}, className: cn("z-50 min-w-[96px] origin-(--transform-origin) overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10
|
|
375
|
+
}, className: cn("z-50 min-w-[96px] origin-(--transform-origin) overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 transition-none data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: children }) }));
|
|
376
376
|
}
|
|
377
377
|
export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };
|
package/dist/ui/hover-card.js
CHANGED
|
@@ -114,6 +114,6 @@ function HoverCardContent({ className, style, ref, side = "bottom", sideOffset =
|
|
|
114
114
|
}, onMouseLeave: (e) => {
|
|
115
115
|
onMouseLeave?.(e);
|
|
116
116
|
scheduleClose();
|
|
117
|
-
}, className: cn("isolate z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden
|
|
117
|
+
}, className: cn("isolate z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden transition-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props }) }));
|
|
118
118
|
}
|
|
119
119
|
export { HoverCard, HoverCardTrigger, HoverCardContent };
|
package/dist/ui/menubar.js
CHANGED
|
@@ -252,7 +252,7 @@ function MenubarContent({ align = "start", alignOffset = -4, side = "bottom", si
|
|
|
252
252
|
match.focus();
|
|
253
253
|
}
|
|
254
254
|
}
|
|
255
|
-
}, className: cn("z-50 min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10
|
|
255
|
+
}, className: cn("z-50 min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 transition-none outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: children }) }));
|
|
256
256
|
}
|
|
257
257
|
function MenubarLabel({ className, inset, ...props }) {
|
|
258
258
|
return (_jsx("div", { "data-slot": "menubar-label", "data-inset": inset ? "" : undefined, className: cn("px-2 py-1.5 text-sm font-medium data-inset:pl-8", className), ...props }));
|
|
@@ -413,6 +413,6 @@ function MenubarSubContent({ className, children, onKeyDown, ...props }) {
|
|
|
413
413
|
active.click();
|
|
414
414
|
}
|
|
415
415
|
}
|
|
416
|
-
}, className: cn("z-50 min-w-32 origin-(--transform-origin) overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10
|
|
416
|
+
}, className: cn("z-50 min-w-32 origin-(--transform-origin) overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 transition-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: children }) }));
|
|
417
417
|
}
|
|
418
418
|
export { Menubar, MenubarPortal, MenubarMenu, MenubarTrigger, MenubarContent, MenubarGroup, MenubarSeparator, MenubarLabel, MenubarItem, MenubarShortcut, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubTrigger, MenubarSubContent, };
|
package/dist/ui/popover.js
CHANGED
|
@@ -125,7 +125,7 @@ function PopoverContent({ className, style, ref, align = "center", alignOffset =
|
|
|
125
125
|
top: pos?.y ?? 0,
|
|
126
126
|
visibility: pos ? "visible" : "hidden",
|
|
127
127
|
["--transform-origin"]: pos?.transformOrigin ?? "center",
|
|
128
|
-
}, className: cn("isolate z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-md bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden
|
|
128
|
+
}, className: cn("isolate z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-md bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden transition-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props }) }));
|
|
129
129
|
}
|
|
130
130
|
function PopoverHeader({ className, ...props }) {
|
|
131
131
|
return (_jsx("div", { "data-slot": "popover-header", className: cn("flex flex-col gap-1 text-sm", className), ...props }));
|
package/dist/ui/select.js
CHANGED
|
@@ -207,7 +207,7 @@ function SelectContent({ className, children, side = "bottom", sideOffset = 4, a
|
|
|
207
207
|
match.focus();
|
|
208
208
|
}
|
|
209
209
|
}
|
|
210
|
-
}, className: cn("relative isolate z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10
|
|
210
|
+
}, className: cn("relative isolate z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 transition-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: children }) }));
|
|
211
211
|
}
|
|
212
212
|
function SelectLabel({ className, ...props }) {
|
|
213
213
|
return (_jsx("div", { "data-slot": "select-label", className: cn("px-2 py-1.5 text-xs text-muted-foreground", className), ...props }));
|