ppij-design-system 0.0.0-stage → 0.2.0

package/dist/components/badge.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils";
+import { Slot } from "radix-ui";
+const badgeVariants = cva("inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+            secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+            destructive: "bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
+            success: "bg-success text-success-foreground [a&]:hover:bg-success/90",
+            warning: "bg-warning text-warning-foreground [a&]:hover:bg-warning/90",
+            info: "bg-info text-info-foreground [a&]:hover:bg-info/90",
+            outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+            ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+            link: "text-primary underline-offset-4 [a&]:hover:underline",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function Badge({ className, variant = "default", asChild = false, ...props }) {
+    const Comp = asChild ? Slot.Root : "span";
+    return (_jsx(Comp, { "data-slot": "badge", "data-variant": variant, className: cn(badgeVariants({ variant }), className), ...props }));
+}
+export { Badge, badgeVariants };

package/dist/components/banner-carousel.d.ts

@@ -0,0 +1,14 @@
+import { type PromoBanner } from "../banners";
+export interface BannerCarouselProps {
+    banners: PromoBanner[];
+    locale?: "id" | "en";
+}
+/**
+ * Rolling promo banner. The 970 x 250 image shows from 768 px wide,
+ * the 320 x 100 image below. Rotates every 6 s; pauses on hover,
+ * focus, touch and the pause button; never rotates under reduced
+ * motion. One banner shows no controls; no active banner renders
+ * nothing. Entries are filtered by JST date in the browser, so an
+ * expired promotion drops out without a deploy.
+ */
+export declare function BannerCarousel({ banners, locale }: BannerCarouselProps): import("react").JSX.Element | null;

package/dist/components/banner-carousel.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { IconChevronLeft, IconChevronRight, IconPlayerPause, IconPlayerPlay } from "@tabler/icons-react";
+import { activeBanners, jstToday } from "../banners";
+// Promo banner, ported exactly from ppij-identity-sso
+// portal/BannerCarousel.tsx (portal-promo-banner,
+// revamp-portal-branding 1.2). Image slides follow the banners.json
+// contract in ../banners.ts.
+const INTERVAL_MS = 6000;
+const SWIPE_PX = 40;
+const LABELS = {
+    id: {
+        label: "Pengumuman",
+        prev: "Pengumuman sebelumnya",
+        next: "Pengumuman berikutnya",
+        goto: "Tampilkan pengumuman {n}",
+        pause: "Jeda",
+        play: "Putar",
+        slide: "{n} dari {total}",
+    },
+    en: {
+        label: "Announcements",
+        prev: "Previous announcement",
+        next: "Next announcement",
+        goto: "Show announcement {n}",
+        pause: "Pause",
+        play: "Play",
+        slide: "{n} of {total}",
+    },
+};
+function useReducedMotion() {
+    const [reduced, setReduced] = useState(() => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches);
+    useEffect(() => {
+        const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+        const onChange = () => setReduced(mq.matches);
+        mq.addEventListener("change", onChange);
+        return () => mq.removeEventListener("change", onChange);
+    }, []);
+    return reduced;
+}
+/**
+ * Rolling promo banner. The 970 x 250 image shows from 768 px wide,
+ * the 320 x 100 image below. Rotates every 6 s; pauses on hover,
+ * focus, touch and the pause button; never rotates under reduced
+ * motion. One banner shows no controls; no active banner renders
+ * nothing. Entries are filtered by JST date in the browser, so an
+ * expired promotion drops out without a deploy.
+ */
+export function BannerCarousel({ banners, locale = "id" }) {
+    const slides = useMemo(() => activeBanners(banners, jstToday()), [banners]);
+    const [index, setIndex] = useState(0);
+    const [hovered, setHovered] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const [touching, setTouching] = useState(false);
+    const [manualPause, setManualPause] = useState(false);
+    const reduceMotion = useReducedMotion();
+    const touchX = useRef(null);
+    const count = slides.length;
+    const paused = manualPause || hovered || focused || touching || reduceMotion;
+    const current = Math.min(index, Math.max(count - 1, 0));
+    useEffect(() => {
+        if (paused || count < 2)
+            return;
+        const id = window.setInterval(() => setIndex((i) => (i + 1) % count), INTERVAL_MS);
+        return () => window.clearInterval(id);
+    }, [paused, count]);
+    if (count === 0)
+        return null;
+    const go = (next) => setIndex((next + count) % count);
+    const label = LABELS[locale].label;
+    const altOf = (b) => (locale === "en" ? b.alt.en : b.alt.id);
+    return (_jsxs("section", { "aria-roledescription": "carousel", "aria-label": label, className: "group relative aspect-[32/10] overflow-hidden rounded-xl bg-brand-ink md:aspect-[97/25]", onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), onFocus: () => setFocused(true), onBlur: (e) => {
+            if (!e.currentTarget.contains(e.relatedTarget))
+                setFocused(false);
+        }, onTouchStart: (e) => {
+            touchX.current = e.touches[0].clientX;
+            setTouching(true);
+        }, onTouchEnd: (e) => {
+            setTouching(false);
+            if (touchX.current == null)
+                return;
+            const dx = e.changedTouches[0].clientX - touchX.current;
+            touchX.current = null;
+            if (Math.abs(dx) > SWIPE_PX)
+                go(current + (dx < 0 ? 1 : -1));
+        }, children: [_jsx("div", { className: "absolute inset-0", "aria-live": paused ? "polite" : "off", children: slides.map((b, k) => {
+                    const shown = k === current;
+                    return (_jsx("div", { role: "group", "aria-roledescription": "slide", "aria-label": LABELS[locale].slide.replace("{n}", String(k + 1)).replace("{total}", String(count)), "aria-hidden": !shown, inert: !shown, className: `absolute inset-0 transition-opacity duration-500 motion-reduce:transition-none ${shown ? "opacity-100" : "pointer-events-none opacity-0"}`, children: _jsx("a", { href: b.href, target: b.href.startsWith("https://") ? "_blank" : undefined, rel: b.href.startsWith("https://") ? "noopener noreferrer" : undefined, className: "block h-full w-full focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-white", children: _jsxs("picture", { className: "block h-full w-full", children: [_jsx("source", { media: "(min-width: 768px)", srcSet: b.image.desktop, width: 970, height: 250 }), _jsx("img", { src: b.image.mobile, alt: altOf(b), width: 320, height: 100, loading: k === 0 ? "eager" : "lazy", className: "block h-full w-full object-cover" })] }) }) }, b.id));
+                }) }), count > 1 ? (_jsxs(_Fragment, { children: [_jsxs("div", { role: "group", "aria-label": label, className: "absolute right-1.5 bottom-1 flex items-center rounded-full bg-brand-ink/60 px-1", children: [_jsx("button", { type: "button", "aria-label": manualPause ? LABELS[locale].play : LABELS[locale].pause, "aria-pressed": manualPause, onClick: () => setManualPause((v) => !v), className: "flex size-7 items-center justify-center rounded-full text-white focus-visible:outline-2 focus-visible:outline-white", children: manualPause ? _jsx(IconPlayerPlay, { className: "size-3.5", "aria-hidden": "true" }) : _jsx(IconPlayerPause, { className: "size-3.5", "aria-hidden": "true" }) }), slides.map((b, k) => (_jsx("button", { type: "button", "aria-label": LABELS[locale].goto.replace("{n}", String(k + 1)), "aria-current": k === current ? "true" : undefined, onClick: () => go(k), className: "flex size-7 items-center justify-center rounded-full focus-visible:outline-2 focus-visible:outline-white", children: _jsx("span", { className: `block size-1.5 rounded-full ${k === current ? "bg-white" : "bg-white/55"}` }) }, b.id)))] }), _jsx("button", { type: "button", "aria-label": LABELS[locale].prev, onClick: () => go(current - 1), className: "absolute top-1/2 left-2 hidden size-10 -translate-y-1/2 items-center justify-center rounded-full bg-brand-ink/55 text-white opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-white md:flex", children: _jsx(IconChevronLeft, { className: "size-5", "aria-hidden": "true" }) }), _jsx("button", { type: "button", "aria-label": LABELS[locale].next, onClick: () => go(current + 1), className: "absolute top-1/2 right-2 hidden size-10 -translate-y-1/2 items-center justify-center rounded-full bg-brand-ink/55 text-white opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-white md:flex", children: _jsx(IconChevronRight, { className: "size-5", "aria-hidden": "true" }) })] })) : null] }));
+}

package/dist/components/bottom-bar.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+export interface BottomBarItem {
+    label: string;
+    href: string;
+    icon: React.ReactNode;
+    current?: boolean;
+    /** Live count shown as a small badge; zero or undefined shows nothing. */
+    badge?: number;
+}
+export interface BottomBarProps {
+    items: BottomBarItem[];
+    ariaLabel?: string;
+    className?: string;
+}
+/**
+ * Phone bottom navigation for the portal and admin on small screens.
+ * The sidebar pattern covers desktop and tablet; below that, the four
+ * or five destinations a member reaches daily live here, thumb close.
+ * The bar itself is a plain nav element: the application shell pins it
+ * to the bottom of the viewport and pads page content clear of it.
+ */
+export declare function BottomBar({ items, ariaLabel, className }: BottomBarProps): React.JSX.Element;

package/dist/components/bottom-bar.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+/**
+ * Phone bottom navigation for the portal and admin on small screens.
+ * The sidebar pattern covers desktop and tablet; below that, the four
+ * or five destinations a member reaches daily live here, thumb close.
+ * The bar itself is a plain nav element: the application shell pins it
+ * to the bottom of the viewport and pads page content clear of it.
+ */
+export function BottomBar({ items, ariaLabel = "Navigasi utama", className }) {
+    return (_jsx("nav", { "data-slot": "bottom-bar", "aria-label": ariaLabel, className: cn("w-full border-t border-brand-border bg-white pb-[env(safe-area-inset-bottom)]", className), children: _jsx("div", { className: "grid", style: { gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))` }, children: items.map((item) => (_jsxs("a", { href: item.href, "aria-current": item.current ? "page" : undefined, className: cn("relative flex min-h-14 flex-col items-center justify-center gap-0.5 px-1 text-[11px] no-underline", item.current ? "font-semibold text-brand-red" : "text-brand-muted hover:text-brand-ink"), children: [_jsxs("span", { className: "relative", children: [item.icon, item.badge ? (_jsx("span", { className: "absolute -top-1.5 -right-2.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-brand-red px-1 text-[9px] font-bold text-white", children: item.badge })) : null] }), _jsx("span", { className: "max-w-full truncate", children: item.label })] }, item.label + item.href))) }) }));
+}

package/dist/components/button.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "success" | "warning" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+export { Button, buttonVariants };

package/dist/components/button.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils";
+import { Slot } from "radix-ui";
+const buttonVariants = cva("inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground hover:bg-primary/90",
+            destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+            outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+            secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+            ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+            link: "text-primary underline-offset-4 hover:underline",
+            success: "bg-success text-success-foreground hover:bg-success/90 focus-visible:ring-success/20",
+            warning: "bg-warning text-warning-foreground hover:bg-warning/90 focus-visible:ring-warning/20",
+        },
+        size: {
+            default: "h-9 px-4 py-2 has-[>svg]:px-3",
+            xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+            sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+            lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+            icon: "size-9",
+            "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+            "icon-sm": "size-8",
+            "icon-lg": "size-10",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+function Button({ className, variant = "default", size = "default", asChild = false, ...props }) {
+    const Comp = asChild ? Slot.Root : "button";
+    return (_jsx(Comp, { "data-slot": "button", "data-variant": variant, "data-size": size, className: cn(buttonVariants({ variant, size, className })), ...props }));
+}
+export { Button, buttonVariants };

package/dist/components/card-upload.d.ts

@@ -0,0 +1,30 @@
+export type CardSideState = "empty" | "processing" | "uploading" | "failed" | "saved";
+export interface CardSide {
+    label: string;
+    optional?: boolean;
+    state: CardSideState;
+    /** Image preview URL when saved (or a PDF file name with isPdf). */
+    previewSrc?: string;
+    fileName?: string;
+    isPdf?: boolean;
+    error?: string;
+    onCapture?: () => void;
+    onPick?: () => void;
+    onRetry?: () => void;
+    onRemove?: () => void;
+}
+export interface CardUploadProps {
+    front: CardSide;
+    back?: CardSide;
+    /** Privacy line under the slots, with the shield icon. */
+    note?: string;
+    className?: string;
+}
+/**
+ * Student card capture, extracted from the wizard CardStep: two
+ * sides (front required, back optional), each with its own state
+ * (empty, processing, uploading, failed, saved with preview). The
+ * image preparation and the upload stay in the application; this
+ * is the presentation of both slots and their states.
+ */
+export declare function CardUpload({ front, back, note, className }: CardUploadProps): import("react").JSX.Element;

package/dist/components/card-upload.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconCamera, IconCheck, IconFileTypePdf, IconPhoto, IconRefresh, IconShieldCheck, IconTrash } from "@tabler/icons-react";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+import { Spinner } from "./spinner";
+function SideSlot({ side }) {
+    const busy = side.state === "processing" || side.state === "uploading";
+    return (_jsxs("section", { "aria-label": side.label, className: "flex flex-col gap-2", children: [_jsxs("h3", { className: "text-base font-semibold text-brand-ink", children: [side.label, " ", side.optional ? _jsx("span", { className: "font-normal text-brand-muted", children: "(opsional)" }) : null] }), side.state === "empty" && (_jsxs("div", { className: "grid gap-3 rounded-md border border-dashed border-brand-border bg-card p-4", children: [_jsx("p", { className: "text-sm text-brand-muted", children: "Belum ada foto untuk sisi ini." }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [side.onCapture && (_jsxs(Button, { type: "button", variant: "outline", onClick: side.onCapture, children: [_jsx(IconCamera, { className: "size-4", "aria-hidden": "true" }), "Ambil foto"] })), side.onPick && (_jsxs(Button, { type: "button", variant: "outline", onClick: side.onPick, children: [_jsx(IconPhoto, { className: "size-4", "aria-hidden": "true" }), "Pilih berkas"] }))] })] })), busy && (_jsxs("div", { className: "flex h-48 items-center justify-center gap-2 rounded-md border border-brand-border bg-card text-sm font-medium text-brand-ink", role: "status", children: [_jsx(Spinner, { size: "sm", decorative: true }), side.state === "processing" ? "Memproses foto..." : "Mengunggah..."] })), side.state === "saved" && (_jsxs("div", { className: "flex flex-col gap-2", children: [side.isPdf ? (_jsxs("div", { className: "flex h-48 items-center justify-center gap-3 rounded-md border border-brand-border bg-card p-4 text-sm font-medium text-brand-ink", children: [_jsx(IconFileTypePdf, { className: "size-6 text-brand-red", "aria-hidden": "true" }), side.fileName ?? "dokumen.pdf"] })) : (_jsx("img", { src: side.previewSrc, alt: `Pratinjau ${side.label.toLowerCase()}`, className: "h-48 w-full rounded-md border border-brand-border object-cover" })), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs("span", { className: "flex items-center gap-1.5 text-sm font-medium text-success", children: [_jsx(IconCheck, { className: "size-4", "aria-hidden": "true" }), "Tersimpan"] }), _jsx("span", { className: "flex-1" }), side.onRemove && (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: side.onRemove, children: [_jsx(IconTrash, { className: "size-4", "aria-hidden": "true" }), "Hapus"] }))] })] })), side.state === "failed" && (_jsxs("div", { className: "grid gap-2 rounded-md border border-destructive/50 bg-card p-4", children: [_jsx("p", { role: "alert", className: "text-sm text-destructive", children: side.error ?? "Unggahan gagal. Periksa koneksi lalu coba lagi." }), _jsx("div", { children: side.onRetry && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: side.onRetry, children: [_jsx(IconRefresh, { className: "size-4", "aria-hidden": "true" }), "Coba lagi"] })) })] }))] }));
+}
+/**
+ * Student card capture, extracted from the wizard CardStep: two
+ * sides (front required, back optional), each with its own state
+ * (empty, processing, uploading, failed, saved with preview). The
+ * image preparation and the upload stay in the application; this
+ * is the presentation of both slots and their states.
+ */
+export function CardUpload({ front, back, note, className }) {
+    return (_jsxs("div", { className: cn("grid gap-6", className), children: [_jsx(SideSlot, { side: front }), back && _jsx(SideSlot, { side: back }), note && (_jsxs("p", { className: "flex items-start gap-2 text-sm text-brand-muted", children: [_jsx(IconShieldCheck, { className: "mt-0.5 size-4 shrink-0 text-brand-red", "aria-hidden": "true" }), note] }))] }));
+}

package/dist/components/card.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+declare function Card({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

package/dist/components/card.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+function Card({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card", className: cn("flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm", className), ...props }));
+}
+function CardHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-header", className: cn("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", className), ...props }));
+}
+function CardTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-title", className: cn("leading-snug font-semibold", className), ...props }));
+}
+function CardDescription({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-description", className: cn("text-sm text-muted-foreground", className), ...props }));
+}
+function CardAction({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-action", className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className), ...props }));
+}
+function CardContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-content", className: cn("px-6", className), ...props }));
+}
+function CardFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-footer", className: cn("flex items-center px-6 [.border-t]:pt-6", className), ...props }));
+}
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

package/dist/components/checkbox.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+declare function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>): React.JSX.Element;
+export { Checkbox };

package/dist/components/checkbox.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import { IconCheck } from "@tabler/icons-react";
+import { cn } from "../lib/utils";
+function Checkbox({ className, ...props }) {
+    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("peer size-4 shrink-0 rounded-[4px] border border-input bg-card shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none", children: _jsx(IconCheck, { className: "size-3.5" }) }) }));
+}
+export { Checkbox };

package/dist/components/data-table.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+export interface DataTableProps {
+    searchValue?: string;
+    onSearchChange?: (value: string) => void;
+    searchPlaceholder?: string;
+    actions?: React.ReactNode;
+    children: React.ReactNode;
+    footerText?: string;
+    /** Current page, shown only when pagination has an available direction. */
+    pageLabel?: string;
+    onPrevious?: () => void;
+    onNext?: () => void;
+    previousDisabled?: boolean;
+    nextDisabled?: boolean;
+    previousLabel?: string;
+    nextLabel?: string;
+    className?: string;
+}
+/**
+ * Presentation shell for admin data tables: a search and actions
+ * toolbar, the table itself as children, and a compact footer.
+ * Pagination is omitted when no direction can be used; a one-page table
+ * shows its result count without inert controls.
+ * Fetching, sorting state, and row logic stay in the application.
+ */
+export declare function DataTable({ searchValue, onSearchChange, searchPlaceholder, actions, children, footerText, pageLabel, onPrevious, onNext, previousDisabled, nextDisabled, previousLabel, nextLabel, className, }: DataTableProps): React.JSX.Element;

package/dist/components/data-table.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconSearch, IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+import { Input } from "./input";
+/**
+ * Presentation shell for admin data tables: a search and actions
+ * toolbar, the table itself as children, and a compact footer.
+ * Pagination is omitted when no direction can be used; a one-page table
+ * shows its result count without inert controls.
+ * Fetching, sorting state, and row logic stay in the application.
+ */
+export function DataTable({ searchValue, onSearchChange, searchPlaceholder = "Cari...", actions, children, footerText, pageLabel, onPrevious, onNext, previousDisabled, nextDisabled, previousLabel = "Sebelumnya", nextLabel = "Berikutnya", className, }) {
+    const hasPagination = (onPrevious !== undefined || onNext !== undefined) && !(previousDisabled && nextDisabled);
+    const hasFooter = Boolean(footerText) || hasPagination;
+    return (_jsxs("div", { className: cn("overflow-hidden rounded-xl border border-brand-border bg-card", className), children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b border-brand-border p-3", children: [onSearchChange ? (_jsxs("div", { className: "relative min-w-0 flex-1 sm:max-w-xs", children: [_jsx(IconSearch, { size: 16, className: "pointer-events-none absolute top-1/2 left-2.5 -translate-y-1/2 text-brand-muted" }), _jsx(Input, { value: searchValue ?? "", onChange: (e) => onSearchChange(e.target.value), placeholder: searchPlaceholder, className: "pl-8", "aria-label": searchPlaceholder })] })) : null, actions ? _jsx("div", { className: "ml-auto flex flex-wrap items-center gap-2", children: actions }) : null] }), _jsx("div", { className: "overflow-x-auto", children: children }), hasFooter ? (_jsxs("div", { className: "flex min-h-10 flex-wrap items-center justify-between gap-2 border-t border-brand-border px-3 py-1.5", children: [footerText ? _jsx("p", { className: "text-xs text-brand-muted", children: footerText }) : null, hasPagination ? (_jsxs("nav", { "aria-label": "Halaman tabel", className: "ml-auto flex items-center gap-1", children: [pageLabel ? _jsx("span", { className: cn("mr-1 text-xs text-brand-muted", footerText && "sr-only sm:not-sr-only"), children: pageLabel }) : null, _jsx(Button, { size: "icon-sm", className: "size-11 sm:size-8", variant: "outline", onClick: onPrevious, disabled: previousDisabled || !onPrevious, "aria-label": previousLabel, title: previousLabel, children: _jsx(IconChevronLeft, { size: 16 }) }), _jsx(Button, { size: "icon-sm", className: "size-11 sm:size-8", variant: "outline", onClick: onNext, disabled: nextDisabled || !onNext, "aria-label": nextLabel, title: nextLabel, children: _jsx(IconChevronRight, { size: 16 }) })] })) : null] })) : null] }));
+}

package/dist/components/dialog.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element;
+declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): React.JSX.Element;
+declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element;
+declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element;
+declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): React.JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+}): React.JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DialogFooter({ className, showCloseButton, children, ...props }: React.ComponentProps<"div"> & {
+    showCloseButton?: boolean;
+}): React.JSX.Element;
+declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): React.JSX.Element;
+declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): React.JSX.Element;
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/components/dialog.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog as DialogPrimitive } from "radix-ui";
+import { IconX } from "@tabler/icons-react";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+function Dialog({ ...props }) {
+    return _jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogTrigger({ ...props }) {
+    return _jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({ ...props }) {
+    return _jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({ ...props }) {
+    return _jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Overlay, { "data-slot": "dialog-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 }));
+}
+function DialogContent({ className, children, showCloseButton = true, ...props }) {
+    return (_jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", className: cn("fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg", className), ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", className: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity outline-none hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", children: [_jsx(IconX, {}), _jsx("span", { className: "sr-only", children: "Tutup" })] }))] })] }));
+}
+function DialogHeader({ className, ...props }) {
+    return _jsx("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-2 text-center sm:text-left", className), ...props });
+}
+function DialogFooter({ className, showCloseButton = false, children, ...props }) {
+    return (_jsxs("div", { "data-slot": "dialog-footer", className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props, children: [children, showCloseButton && (_jsx(DialogPrimitive.Close, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Tutup" }) }))] }));
+}
+function DialogTitle({ className, ...props }) {
+    return _jsx(DialogPrimitive.Title, { "data-slot": "dialog-title", className: cn("text-lg leading-none font-semibold", className), ...props });
+}
+function DialogDescription({ className, ...props }) {
+    return _jsx(DialogPrimitive.Description, { "data-slot": "dialog-description", className: cn("text-sm text-muted-foreground", className), ...props });
+}
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/components/drawer.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+declare function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>): React.JSX.Element;
+declare function DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>): React.JSX.Element;
+declare function DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>): React.JSX.Element;
+declare function DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>): React.JSX.Element;
+declare function DrawerOverlay({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Overlay>): React.JSX.Element;
+declare function DrawerContent({ className, children, ...props }: React.ComponentProps<typeof DrawerPrimitive.Content>): React.JSX.Element;
+declare function DrawerHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DrawerFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>): React.JSX.Element;
+declare function DrawerDescription({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Description>): React.JSX.Element;
+export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };

package/dist/components/drawer.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+import { Drawer as DrawerPrimitive } from "vaul";
+function Drawer({ ...props }) {
+    return _jsx(DrawerPrimitive.Root, { "data-slot": "drawer", ...props });
+}
+function DrawerTrigger({ ...props }) {
+    return _jsx(DrawerPrimitive.Trigger, { "data-slot": "drawer-trigger", ...props });
+}
+function DrawerPortal({ ...props }) {
+    return _jsx(DrawerPrimitive.Portal, { "data-slot": "drawer-portal", ...props });
+}
+function DrawerClose({ ...props }) {
+    return _jsx(DrawerPrimitive.Close, { "data-slot": "drawer-close", ...props });
+}
+function DrawerOverlay({ className, ...props }) {
+    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 }));
+}
+function DrawerContent({ className, children, ...props }) {
+    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-background", "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] })] }));
+}
+function DrawerHeader({ className, ...props }) {
+    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 }));
+}
+function DrawerFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "drawer-footer", className: cn("mt-auto flex flex-col gap-2 p-4", className), ...props }));
+}
+function DrawerTitle({ className, ...props }) {
+    return (_jsx(DrawerPrimitive.Title, { "data-slot": "drawer-title", className: cn("font-semibold text-foreground", className), ...props }));
+}
+function DrawerDescription({ className, ...props }) {
+    return (_jsx(DrawerPrimitive.Description, { "data-slot": "drawer-description", className: cn("text-sm text-muted-foreground", className), ...props }));
+}
+export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };

package/dist/components/dropdown-menu.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): React.JSX.Element;
+declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): React.JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): React.JSX.Element;
+declare function DropdownMenuContent({ className, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): React.JSX.Element;
+declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): React.JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}): React.JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): React.JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): React.JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): React.JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): React.JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>): React.JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): React.JSX.Element;
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

package/dist/components/dropdown-menu.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+import { IconCheck, IconChevronRight, IconCircleFilled } from "@tabler/icons-react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+function DropdownMenu({ ...props }) {
+    return _jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuPortal({ ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props }));
+}
+function DropdownMenuTrigger({ ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props }));
+}
+function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { "data-slot": "dropdown-menu-content", sideOffset: sideOffset, className: cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className), ...props }) }));
+}
+function DropdownMenuGroup({ ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props }));
+}
+function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn("relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!", className), ...props }));
+}
+function DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
+    return (_jsxs(DropdownMenuPrimitive.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", className: cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(IconCheck, { className: "size-4" }) }) }), children] }));
+}
+function DropdownMenuRadioGroup({ ...props }) {
+    return (_jsx(DropdownMenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props }));
+}
+function DropdownMenuRadioItem({ className, children, ...props }) {
+    return (_jsxs(DropdownMenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", className: cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(IconCircleFilled, { className: "size-2 fill-current" }) }) }), children] }));
+}
+function DropdownMenuLabel({ className, inset, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Label, { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className), ...props }));
+}
+function DropdownMenuSeparator({ className, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Separator, { "data-slot": "dropdown-menu-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
+}
+function DropdownMenuShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className), ...props }));
+}
+function DropdownMenuSub({ ...props }) {
+    return _jsx(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+    return (_jsxs(DropdownMenuPrimitive.SubTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn("flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className), ...props, children: [children, _jsx(IconChevronRight, { className: "ml-auto size-4" })] }));
+}
+function DropdownMenuSubContent({ className, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.SubContent, { "data-slot": "dropdown-menu-sub-content", className: cn("z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className), ...props }));
+}
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

package/dist/components/editable-panel.d.ts

@@ -0,0 +1,25 @@
+export interface EditablePanelProps {
+    title: string;
+    /** One line on how this panel behaves: what updates directly, or what is reviewed. */
+    description?: string;
+    /** A change proposal for this panel is waiting for review: shows the pending badge. */
+    pending?: boolean;
+    pendingLabel?: string;
+    onEdit: () => void;
+    editLabel?: string;
+    /** A pending-proposal block (for example an Alert listing the proposed values), shown under the read values. */
+    proposal?: React.ReactNode;
+    /** The read view: committed values as text. */
+    children: React.ReactNode;
+}
+/**
+ * The standard editable surface of the portal: a read-first panel.
+ * The panel only ever reads: title, one behaviour line, committed
+ * values as text, and an Edit action. Editing itself happens in
+ * the AdminDrawer (a right drawer on desktop, a bottom sheet on
+ * the phone), one panel at a time; the page owns the drawer.
+ * Reviewed changes leave a proposal block inside the panel with a
+ * Menunggu badge while the current values stay in effect. This is
+ * the profile pattern; every editable surface follows it.
+ */
+export declare function EditablePanel({ title, description, pending, pendingLabel, onEdit, editLabel, proposal, children }: EditablePanelProps): import("react").JSX.Element;