ppij-design-system 0.2.0 → 0.3.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.
|
@@ -3,6 +3,8 @@ import * as React from "react";
|
|
|
3
3
|
export type Locale = "id" | "en";
|
|
4
4
|
/** One matchMedia subscription; the only viewport check in the admin drawer. Server render assumes a phone. */
|
|
5
5
|
export declare function useIsDesktop(): boolean;
|
|
6
|
+
/** Width of the right-hand drawer from 900 px: sm 380, md 440 (default), lg 560, each capped to the viewport. Phones always get a full-width bottom sheet. */
|
|
7
|
+
export type AdminDrawerSize = "sm" | "md" | "lg";
|
|
6
8
|
export type AdminDrawerProps = {
|
|
7
9
|
open: boolean;
|
|
8
10
|
onOpenChange: (open: boolean) => void;
|
|
@@ -14,6 +16,8 @@ export type AdminDrawerProps = {
|
|
|
14
16
|
closeLabel?: string;
|
|
15
17
|
/** Overrides the built-in back label for this locale. */
|
|
16
18
|
backLabel?: string;
|
|
19
|
+
/** Compact density uses a 13px body, 14px title, and 12px padding. */
|
|
20
|
+
density?: "compact" | "default";
|
|
17
21
|
/** Two-step body: 1 is the first step (default), 2 is the confirmation step. */
|
|
18
22
|
step?: 1 | 2;
|
|
19
23
|
/** Shown as the "Kembali" button when step is 2. Going back never submits. */
|
|
@@ -24,6 +28,8 @@ export type AdminDrawerProps = {
|
|
|
24
28
|
footer?: React.ReactNode;
|
|
25
29
|
/** Overrides Radix's focus return on close; the caller decides which control gets focus back. */
|
|
26
30
|
onCloseAutoFocus?: (event: Event) => void;
|
|
31
|
+
/** Desktop width. Defaults to "md" (440 px), the previous fixed width. */
|
|
32
|
+
size?: AdminDrawerSize;
|
|
27
33
|
className?: string;
|
|
28
34
|
};
|
|
29
35
|
/**
|
|
@@ -31,4 +37,4 @@ export type AdminDrawerProps = {
|
|
|
31
37
|
* Escape, the backdrop and the close button dismiss it without submitting; Radix returns
|
|
32
38
|
* focus to the element that was focused before the drawer opened.
|
|
33
39
|
*/
|
|
34
|
-
export declare function AdminDrawer({ open, onOpenChange, title, description, locale, closeLabel, backLabel, step, onBack, children, footer, onCloseAutoFocus, className, }: AdminDrawerProps): React.JSX.Element;
|
|
40
|
+
export declare function AdminDrawer({ open, onOpenChange, title, description, locale, closeLabel, backLabel, density, step, onBack, children, footer, onCloseAutoFocus, size, className, }: AdminDrawerProps): React.JSX.Element;
|
|
@@ -18,13 +18,18 @@ function subscribeDesktop(onChange) {
|
|
|
18
18
|
export function useIsDesktop() {
|
|
19
19
|
return React.useSyncExternalStore(subscribeDesktop, () => window.matchMedia(DESKTOP_QUERY).matches, () => false);
|
|
20
20
|
}
|
|
21
|
+
const sizeClass = {
|
|
22
|
+
sm: "data-[vaul-drawer-direction=right]:w-[380px] data-[vaul-drawer-direction=right]:sm:max-w-[min(380px,calc(100vw-48px))]",
|
|
23
|
+
md: "data-[vaul-drawer-direction=right]:w-[440px] data-[vaul-drawer-direction=right]:sm:max-w-[min(440px,calc(100vw-48px))]",
|
|
24
|
+
lg: "data-[vaul-drawer-direction=right]:w-[560px] data-[vaul-drawer-direction=right]:sm:max-w-[min(560px,calc(100vw-48px))]",
|
|
25
|
+
};
|
|
21
26
|
/**
|
|
22
27
|
* Admin form or detail in a drawer: right from 900 px, bottom below.
|
|
23
28
|
* Escape, the backdrop and the close button dismiss it without submitting; Radix returns
|
|
24
29
|
* focus to the element that was focused before the drawer opened.
|
|
25
30
|
*/
|
|
26
|
-
export function AdminDrawer({ open, onOpenChange, title, description, locale, closeLabel, backLabel, step = 1, onBack, children, footer, onCloseAutoFocus, className, }) {
|
|
31
|
+
export function AdminDrawer({ open, onOpenChange, title, description, locale, closeLabel, backLabel, density = "default", step = 1, onBack, children, footer, onCloseAutoFocus, size = "md", className, }) {
|
|
27
32
|
const isDesktop = useIsDesktop();
|
|
28
33
|
const showBack = step === 2 && onBack !== undefined;
|
|
29
|
-
return (_jsx(Drawer, { open: open, onOpenChange: onOpenChange, direction: isDesktop ? "right" : "bottom", children: _jsxs(DrawerContent, { "data-admin-drawer": "", onCloseAutoFocus: onCloseAutoFocus, "data-step": step, className: cn("min-h-0 gap-0 p-0 text-foreground", "data-[vaul-drawer-direction=bottom]:max-h-[85vh]",
|
|
34
|
+
return (_jsx(Drawer, { open: open, onOpenChange: onOpenChange, direction: isDesktop ? "right" : "bottom", children: _jsxs(DrawerContent, { "data-admin-drawer": "", "data-size": size, onCloseAutoFocus: onCloseAutoFocus, "data-step": step, "data-density": density, className: cn("min-h-0 gap-0 p-0 text-foreground", "data-[vaul-drawer-direction=bottom]:max-h-[85vh]", sizeClass[size], density === "compact" && "text-[13px] leading-5", className), children: [_jsxs(DrawerHeader, { "data-vaul-no-drag": "", className: cn("shrink-0 flex-row items-start justify-between gap-3 border-b border-border p-4 text-left", density === "compact" && "p-3"), children: [_jsxs("div", { className: "min-w-0", children: [_jsx(DrawerTitle, { className: density === "compact" ? "text-sm leading-5" : "text-base leading-6", children: title }), description ? _jsx(DrawerDescription, { className: cn("break-words", density === "compact" && "text-xs leading-5"), children: description }) : null] }), _jsx(DrawerClose, { asChild: true, children: _jsx(Button, { type: "button", variant: "ghost", size: density === "compact" && isDesktop ? "icon-sm" : "icon", "aria-label": (closeLabel ?? labels[locale].close), className: "shrink-0", children: _jsx(IconX, { className: "size-4" }) }) })] }), _jsx("div", { "data-admin-drawer-body": "", className: cn("min-h-0 flex-1 overflow-y-auto p-4", density === "compact" && "p-3"), children: children }), showBack || footer ? (_jsxs(DrawerFooter, { "data-vaul-no-drag": "", "data-admin-drawer-footer": "", className: cn("shrink-0 flex-row flex-wrap items-center justify-end gap-2 border-t border-border bg-card p-4", density === "compact" && "p-3"), children: [showBack ? (_jsx(Button, { type: "button", variant: "outline", size: density === "compact" ? "sm" : "default", onClick: onBack, className: "mr-auto", children: (backLabel ?? labels[locale].back) })) : null, footer] })) : null] }) }));
|
|
30
35
|
}
|
|
@@ -17,7 +17,7 @@ function DrawerOverlay({ className, ...props }) {
|
|
|
17
17
|
return (_jsx(DrawerPrimitive.Overlay, { "data-slot": "drawer-overlay", className: cn("fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0", className), ...props }));
|
|
18
18
|
}
|
|
19
19
|
function DrawerContent({ className, children, ...props }) {
|
|
20
|
-
return (_jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [_jsx(DrawerOverlay, {}), _jsxs(DrawerPrimitive.Content, { "data-slot": "drawer-content", className: cn("group/drawer-content fixed z-50 flex h-auto flex-col bg-
|
|
20
|
+
return (_jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [_jsx(DrawerOverlay, {}), _jsxs(DrawerPrimitive.Content, { "data-slot": "drawer-content", className: cn("group/drawer-content fixed z-50 flex h-auto flex-col bg-card", "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b", "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t", "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm", "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm", className), ...props, children: [_jsx("div", { className: "mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }), children] })] }));
|
|
21
21
|
}
|
|
22
22
|
function DrawerHeader({ className, ...props }) {
|
|
23
23
|
return (_jsx("div", { "data-slot": "drawer-header", className: cn("flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left", className), ...props }));
|
package/dist/index.d.ts
CHANGED
|
@@ -19,7 +19,7 @@ export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuCont
|
|
|
19
19
|
export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants } from "./components/tabs";
|
|
20
20
|
export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, } from "./components/table";
|
|
21
21
|
export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, } from "./components/sidebar";
|
|
22
|
-
export { AdminDrawer, useIsDesktop, type AdminDrawerProps, type Locale } from "./components/admin-drawer";
|
|
22
|
+
export { AdminDrawer, useIsDesktop, type AdminDrawerProps, type AdminDrawerSize, type Locale } from "./components/admin-drawer";
|
|
23
23
|
export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia } from "./components/empty";
|
|
24
24
|
export { FormPanel } from "./components/form-panel";
|
|
25
25
|
export { MemberCard, MemberCardBack, type MemberCardProps, type MemberCardBackProps, type MemberCardTheme } from "./components/member-card";
|