ppij-design-system 0.0.0-stage → 0.2.0

package/dist/banners.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Promo banner data contract, ported from ppij-identity-sso
+ * web/src/lib/banners.ts. The build-time validator (validateBanners /
+ * loadPromoBanners) stays in the app; the browser-side selection
+ * (activeBanners, jstToday) ships here so consumers render exactly
+ * what the portal renders.
+ */
+export interface PromoBanner {
+    id: string;
+    /** Public paths: desktop 970 x 250 (shown from 768 px), mobile 320 x 100. Both shipped at 2x. */
+    image: {
+        desktop: string;
+        mobile: string;
+    };
+    alt: {
+        id: string;
+        en: string;
+    };
+    href: string;
+    /** JST calendar dates, YYYY-MM-DD. Both optional. */
+    start?: string;
+    end?: string;
+    order: number;
+    /** false keeps an entry in the file but out of the site (placeholders until the real link and dates are known). */
+    active?: boolean;
+}
+export declare const MAX_ACTIVE = 5;
+/** Entries active on `today`, in `order`, at most MAX_ACTIVE. Used in the browser, so an expired promotion drops out without a deploy. */
+export declare function activeBanners(all: PromoBanner[], today: string): PromoBanner[];
+/** Today's JST calendar date, YYYY-MM-DD. */
+export declare function jstToday(now?: Date): string;

package/dist/banners.js

@@ -0,0 +1,18 @@
+export const MAX_ACTIVE = 5;
+function isActive(b) {
+    return b.active !== false;
+}
+function coversDay(b, day) {
+    return (!b.start || b.start <= day) && (!b.end || day <= b.end);
+}
+/** Entries active on `today`, in `order`, at most MAX_ACTIVE. Used in the browser, so an expired promotion drops out without a deploy. */
+export function activeBanners(all, today) {
+    return all
+        .filter((b) => isActive(b) && coversDay(b, today))
+        .sort((a, b) => a.order - b.order)
+        .slice(0, MAX_ACTIVE);
+}
+/** Today's JST calendar date, YYYY-MM-DD. */
+export function jstToday(now = new Date()) {
+    return new Date(now.getTime() + 9 * 3_600_000).toISOString().slice(0, 10);
+}

package/dist/card-themes.d.ts

@@ -0,0 +1,14 @@
+/** Decorative catalog; membership state and affiliation never derive from these IDs. */
+export interface CardTheme {
+    id: string;
+    group: "korda" | "nusantara" | "seasons" | "ppij";
+    labelId: string;
+    labelEn: string;
+    base: string;
+    asset: string;
+    width: number;
+    height: number;
+    viewBox: string;
+}
+export declare const cardThemes: readonly CardTheme[];
+export declare function resolveCardTheme(korda: string | null | undefined, saved: string | null): CardTheme;

package/dist/card-themes.js

@@ -0,0 +1,325 @@
+export const cardThemes = [
+    {
+        "id": "korda-hokkaido",
+        "group": "korda",
+        "labelId": "Hokkaido",
+        "labelEn": "Hokkaido",
+        "base": "#FAFAFA",
+        "asset": "/card-themes/korda-hokkaido.png",
+        "width": 1581,
+        "height": 995,
+        "viewBox": "790.5 139.3 774.7 646.8"
+    },
+    {
+        "id": "korda-tohoku",
+        "group": "korda",
+        "labelId": "Tohoku",
+        "labelEn": "Tohoku",
+        "base": "#FAFAFA",
+        "asset": "/card-themes/korda-tohoku.png",
+        "width": 1579,
+        "height": 996,
+        "viewBox": "789.5 139.4 773.7 647.4"
+    },
+    {
+        "id": "korda-kanto",
+        "group": "korda",
+        "labelId": "Kanto",
+        "labelEn": "Kanto",
+        "base": "#FAFAFA",
+        "asset": "/card-themes/korda-kanto.png",
+        "width": 1580,
+        "height": 995,
+        "viewBox": "790.0 139.3 774.2 646.8"
+    },
+    {
+        "id": "korda-hokuriku",
+        "group": "korda",
+        "labelId": "Hokuriku",
+        "labelEn": "Hokuriku",
+        "base": "#FAFAFA",
+        "asset": "/card-themes/korda-hokuriku.png",
+        "width": 1579,
+        "height": 996,
+        "viewBox": "789.5 139.4 773.7 647.4"
+    },
+    {
+        "id": "korda-chubu",
+        "group": "korda",
+        "labelId": "Chubu",
+        "labelEn": "Chubu",
+        "base": "#FAFAFA",
+        "asset": "/card-themes/korda-chubu.png",
+        "width": 1579,
+        "height": 996,
+        "viewBox": "789.5 139.4 773.7 647.4"
+    },
+    {
+        "id": "korda-kansai",
+        "group": "korda",
+        "labelId": "Kansai",
+        "labelEn": "Kansai",
+        "base": "#FAFAFA",
+        "asset": "/card-themes/korda-kansai.png",
+        "width": 1580,
+        "height": 996,
+        "viewBox": "790.0 139.4 774.2 647.4"
+    },
+    {
+        "id": "korda-shikoku",
+        "group": "korda",
+        "labelId": "Shikoku",
+        "labelEn": "Shikoku",
+        "base": "#FAFAFA",
+        "asset": "/card-themes/korda-shikoku.png",
+        "width": 1579,
+        "height": 996,
+        "viewBox": "789.5 139.4 773.7 647.4"
+    },
+    {
+        "id": "korda-chugoku",
+        "group": "korda",
+        "labelId": "Chugoku",
+        "labelEn": "Chugoku",
+        "base": "#FAFAFA",
+        "asset": "/card-themes/korda-chugoku.png",
+        "width": 1580,
+        "height": 995,
+        "viewBox": "790.0 139.3 774.2 646.8"
+    },
+    {
+        "id": "korda-kitakyushu-okinawa",
+        "group": "korda",
+        "labelId": "Kitakyushu–Okinawa",
+        "labelEn": "Kitakyushu–Okinawa",
+        "base": "#FAFAFA",
+        "asset": "/card-themes/korda-kitakyushu-okinawa.png",
+        "width": 1579,
+        "height": 996,
+        "viewBox": "789.5 139.4 773.7 647.4"
+    },
+    {
+        "id": "nusantara-sumatera-barat-rumah-gadang",
+        "group": "nusantara",
+        "labelId": "Sumatera Barat · Rumah Gadang",
+        "labelEn": "Sumatera Barat · Rumah Gadang",
+        "base": "#F3F7FC",
+        "asset": "/card-themes/nusantara-sumatera-barat-rumah-gadang.png",
+        "width": 1579,
+        "height": 996,
+        "viewBox": "789.5 139.4 773.7 647.4"
+    },
+    {
+        "id": "nusantara-sumatera-utara-rumah-bolon",
+        "group": "nusantara",
+        "labelId": "Sumatera Utara · Rumah Bolon",
+        "labelEn": "Sumatera Utara · Rumah Bolon",
+        "base": "#F3F7F1",
+        "asset": "/card-themes/nusantara-sumatera-utara-rumah-bolon.png",
+        "width": 1580,
+        "height": 996,
+        "viewBox": "790.0 139.4 774.2 647.4"
+    },
+    {
+        "id": "nusantara-jakarta-monas",
+        "group": "nusantara",
+        "labelId": "Jakarta · Monas",
+        "labelEn": "Jakarta · Monas",
+        "base": "#F3F7FC",
+        "asset": "/card-themes/nusantara-jakarta-monas.png",
+        "width": 1580,
+        "height": 996,
+        "viewBox": "790.0 139.4 774.2 647.4"
+    },
+    {
+        "id": "nusantara-jawa-barat-angklung",
+        "group": "nusantara",
+        "labelId": "Jawa Barat · Angklung",
+        "labelEn": "Jawa Barat · Angklung",
+        "base": "#F3F7F1",
+        "asset": "/card-themes/nusantara-jawa-barat-angklung.png",
+        "width": 1579,
+        "height": 996,
+        "viewBox": "789.5 139.4 773.7 647.4"
+    },
+    {
+        "id": "nusantara-jawa-tengah-borobudur",
+        "group": "nusantara",
+        "labelId": "Jawa Tengah · Borobudur",
+        "labelEn": "Jawa Tengah · Borobudur",
+        "base": "#FBF6ED",
+        "asset": "/card-themes/nusantara-jawa-tengah-borobudur.png",
+        "width": 1580,
+        "height": 996,
+        "viewBox": "790.0 139.4 774.2 647.4"
+    },
+    {
+        "id": "nusantara-yogyakarta-tugu",
+        "group": "nusantara",
+        "labelId": "Yogyakarta · Tugu",
+        "labelEn": "Yogyakarta · Tugu",
+        "base": "#F3F7FC",
+        "asset": "/card-themes/nusantara-yogyakarta-tugu.png",
+        "width": 1580,
+        "height": 996,
+        "viewBox": "790.0 139.4 774.2 647.4"
+    },
+    {
+        "id": "nusantara-jawa-timur-tugu-pahlawan",
+        "group": "nusantara",
+        "labelId": "Jawa Timur · Tugu Pahlawan",
+        "labelEn": "Jawa Timur · Tugu Pahlawan",
+        "base": "#FBF6ED",
+        "asset": "/card-themes/nusantara-jawa-timur-tugu-pahlawan.png",
+        "width": 1580,
+        "height": 995,
+        "viewBox": "790.0 139.3 774.2 646.8"
+    },
+    {
+        "id": "nusantara-bali-ulun-danu",
+        "group": "nusantara",
+        "labelId": "Bali · Ulun Danu Beratan",
+        "labelEn": "Bali · Ulun Danu Beratan",
+        "base": "#F3F7FC",
+        "asset": "/card-themes/nusantara-bali-ulun-danu.png",
+        "width": 1579,
+        "height": 996,
+        "viewBox": "789.5 139.4 773.7 647.4"
+    },
+    {
+        "id": "nusantara-ntb-lumbung",
+        "group": "nusantara",
+        "labelId": "NTB · Lumbung Sasak",
+        "labelEn": "NTB · Lumbung Sasak",
+        "base": "#F3F7F1",
+        "asset": "/card-themes/nusantara-ntb-lumbung.png",
+        "width": 1580,
+        "height": 996,
+        "viewBox": "790.0 139.4 774.2 647.4"
+    },
+    {
+        "id": "nusantara-ntt-sumba-house",
+        "group": "nusantara",
+        "labelId": "NTT · Rumah Sumba",
+        "labelEn": "NTT · Rumah Sumba",
+        "base": "#FBF6ED",
+        "asset": "/card-themes/nusantara-ntt-sumba-house.png",
+        "width": 1579,
+        "height": 996,
+        "viewBox": "789.5 139.4 773.7 647.4"
+    },
+    {
+        "id": "nusantara-kalimantan-tengah-betang",
+        "group": "nusantara",
+        "labelId": "Kalimantan Tengah · Huma Betang",
+        "labelEn": "Kalimantan Tengah · Huma Betang",
+        "base": "#F3F7F1",
+        "asset": "/card-themes/nusantara-kalimantan-tengah-betang.png",
+        "width": 1579,
+        "height": 996,
+        "viewBox": "789.5 139.4 773.7 647.4"
+    },
+    {
+        "id": "nusantara-sulawesi-selatan-tongkonan",
+        "group": "nusantara",
+        "labelId": "Sulawesi Selatan · Tongkonan",
+        "labelEn": "Sulawesi Selatan · Tongkonan",
+        "base": "#FBF6ED",
+        "asset": "/card-themes/nusantara-sulawesi-selatan-tongkonan.png",
+        "width": 1579,
+        "height": 996,
+        "viewBox": "789.5 139.4 773.7 647.4"
+    },
+    {
+        "id": "nusantara-maluku-baileo",
+        "group": "nusantara",
+        "labelId": "Maluku · Baileo",
+        "labelEn": "Maluku · Baileo",
+        "base": "#F3F7FC",
+        "asset": "/card-themes/nusantara-maluku-baileo.png",
+        "width": 1580,
+        "height": 996,
+        "viewBox": "790.0 139.4 774.2 647.4"
+    },
+    {
+        "id": "nusantara-papua-pegunungan-honai",
+        "group": "nusantara",
+        "labelId": "Papua Pegunungan · Honai",
+        "labelEn": "Papua Pegunungan · Honai",
+        "base": "#F3F7F1",
+        "asset": "/card-themes/nusantara-papua-pegunungan-honai.png",
+        "width": 1579,
+        "height": 996,
+        "viewBox": "789.5 139.4 773.7 647.4"
+    },
+    {
+        "id": "ppij-national",
+        "group": "ppij",
+        "labelId": "PPI Jepang",
+        "labelEn": "PPI Japan",
+        "base": "#FAFAFA",
+        "asset": "/card-themes/ppij-national.svg",
+        "width": 1000,
+        "height": 1000,
+        "viewBox": "0 0 1000 1000"
+    },
+    {
+        "id": "season-spring",
+        "group": "seasons",
+        "labelId": "Musim semi · Sakura",
+        "labelEn": "Spring · Sakura",
+        "base": "#F3F7FC",
+        "asset": "/card-themes/season-spring.png",
+        "width": 1580,
+        "height": 996,
+        "viewBox": "790.0 139.4 774.2 647.4"
+    },
+    {
+        "id": "season-summer",
+        "group": "seasons",
+        "labelId": "Musim panas · Matsuri",
+        "labelEn": "Summer · Matsuri",
+        "base": "#F3F7F1",
+        "asset": "/card-themes/season-summer.png",
+        "width": 1579,
+        "height": 996,
+        "viewBox": "789.5 139.4 773.7 647.4"
+    },
+    {
+        "id": "season-autumn",
+        "group": "seasons",
+        "labelId": "Musim gugur · Momiji",
+        "labelEn": "Autumn · Momiji",
+        "base": "#FBF6ED",
+        "asset": "/card-themes/season-autumn.png",
+        "width": 1579,
+        "height": 996,
+        "viewBox": "789.5 139.4 773.7 647.4"
+    },
+    {
+        "id": "season-winter",
+        "group": "seasons",
+        "labelId": "Musim dingin · Salju",
+        "labelEn": "Winter · Snow",
+        "base": "#F3F7FC",
+        "asset": "/card-themes/season-winter.svg",
+        "width": 1000,
+        "height": 1000,
+        "viewBox": "0 0 1000 1000"
+    }
+];
+const byId = new Map(cardThemes.map(theme => [theme.id, theme]));
+// The theme id for Kyushu-Okinawa keeps the catalogue's older "kitakyushu" spelling.
+const kordaThemeAliases = { "kyushu-okinawa": "kitakyushu-okinawa" };
+// The saved value comes from the member preference API (server-side, per member_id), so it
+// loads on every device. An id the current catalogue no longer publishes falls back to the
+// korda default — catalogue changes never strand a stored preference.
+export function resolveCardTheme(korda, saved) {
+    // /v1/me carries the korda unit's display name as the seed spells it ("PPI Kanto"; one slug
+    // is "korda-hokkaido"), so the lookup drops those prefixes before matching the catalogue.
+    // A body without membership.korda (older payloads, test stubs) falls back to the national
+    // theme; the decorative card must never crash the home page.
+    const bare = (korda ?? "").trim().toLowerCase().replace(/[–—]/g, "-").replace(/\s+/g, "-").replace(/^(?:ppi-)?(?:korda-)?/, "");
+    const slug = kordaThemeAliases[bare] ?? bare;
+    return (saved && byId.get(saved)) || byId.get(`korda-${slug}`) || byId.get("ppij-national");
+}

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

@@ -0,0 +1,24 @@
+import * as React from "react";
+export interface AccountMenuItem {
+    label: string;
+    href: string;
+    icon?: React.ReactNode;
+}
+export interface AccountMenuProps {
+    /** The signed-in person's name. */
+    name: string;
+    /** One quiet line under the name, for example the komsat. */
+    detail?: string;
+    /** Initials for the avatar fallback. */
+    initials: string;
+    items: AccountMenuItem[];
+    signOutLabel?: string;
+    onSignOut?: () => void;
+    className?: string;
+}
+/**
+ * The profile navbar piece: avatar and name in the top bar, opening the
+ * one account menu (profile, account, sign out). Logout lives here and
+ * nowhere else, matching the portal shell rule.
+ */
+export declare function AccountMenu({ name, detail, initials, items, signOutLabel, onSignOut, className }: AccountMenuProps): React.JSX.Element;

package/dist/components/account-menu.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconChevronDown, IconLogout } from "@tabler/icons-react";
+import { cn } from "../lib/utils";
+import { Avatar, AvatarFallback } from "./avatar";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "./dropdown-menu";
+/**
+ * The profile navbar piece: avatar and name in the top bar, opening the
+ * one account menu (profile, account, sign out). Logout lives here and
+ * nowhere else, matching the portal shell rule.
+ */
+export function AccountMenu({ name, detail, initials, items, signOutLabel = "Keluar", onSignOut, className }) {
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: cn("flex items-center gap-2 rounded-full py-1 pr-2 pl-1 outline-none transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring", className), "aria-label": "Menu akun " + name, children: [_jsx(Avatar, { className: "size-8", children: _jsx(AvatarFallback, { children: initials }) }), _jsxs("span", { className: "hidden text-left leading-tight md:grid", children: [_jsx("span", { className: "max-w-44 truncate text-sm font-semibold text-brand-ink", children: name }), detail && _jsx("span", { className: "max-w-44 truncate text-xs text-muted-foreground", children: detail })] }), _jsx(IconChevronDown, { className: "size-4 text-muted-foreground" })] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [_jsx(DropdownMenuLabel, { children: _jsxs("span", { className: "grid", children: [_jsx("span", { className: "truncate", children: name }), detail && _jsx("span", { className: "truncate text-xs font-normal text-muted-foreground", children: detail })] }) }), _jsx(DropdownMenuSeparator, {}), items.map((item) => (_jsx(DropdownMenuItem, { asChild: true, children: _jsxs("a", { href: item.href, children: [item.icon, item.label] }) }, item.label))), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onSelect: () => onSignOut?.(), variant: "destructive", children: [_jsx(IconLogout, {}), signOutLabel] })] })] }));
+}

package/dist/components/admin-drawer.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+/** Screens at or above this width open the drawer from the right; narrower screens from the bottom. */
+export type Locale = "id" | "en";
+/** One matchMedia subscription; the only viewport check in the admin drawer. Server render assumes a phone. */
+export declare function useIsDesktop(): boolean;
+export type AdminDrawerProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Accessible name of the dialog; shown in the fixed header. */
+    title: string;
+    description?: string;
+    locale: Locale;
+    /** Overrides the built-in close label for this locale. */
+    closeLabel?: string;
+    /** Overrides the built-in back label for this locale. */
+    backLabel?: string;
+    /** Two-step body: 1 is the first step (default), 2 is the confirmation step. */
+    step?: 1 | 2;
+    /** Shown as the "Kembali" button when step is 2. Going back never submits. */
+    onBack?: () => void;
+    /** Scrolling body of the current step. */
+    children: React.ReactNode;
+    /** Sticky footer actions of the current step. */
+    footer?: React.ReactNode;
+    /** Overrides Radix's focus return on close; the caller decides which control gets focus back. */
+    onCloseAutoFocus?: (event: Event) => void;
+    className?: string;
+};
+/**
+ * Admin form or detail in a drawer: right from 900 px, bottom below.
+ * Escape, the backdrop and the close button dismiss it without submitting; Radix returns
+ * focus to the element that was focused before the drawer opened.
+ */
+export declare function AdminDrawer({ open, onOpenChange, title, description, locale, closeLabel, backLabel, step, onBack, children, footer, onCloseAutoFocus, className, }: AdminDrawerProps): React.JSX.Element;

package/dist/components/admin-drawer.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { IconX } from "@tabler/icons-react";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, } from "./drawer";
+const labels = {
+    id: { close: "Tutup", back: "Kembali" },
+    en: { close: "Close", back: "Back" },
+};
+const DESKTOP_QUERY = "(min-width: 900px)";
+function subscribeDesktop(onChange) {
+    const media = window.matchMedia(DESKTOP_QUERY);
+    media.addEventListener("change", onChange);
+    return () => media.removeEventListener("change", onChange);
+}
+/** One matchMedia subscription; the only viewport check in the admin drawer. Server render assumes a phone. */
+export function useIsDesktop() {
+    return React.useSyncExternalStore(subscribeDesktop, () => window.matchMedia(DESKTOP_QUERY).matches, () => false);
+}
+/**
+ * Admin form or detail in a drawer: right from 900 px, bottom below.
+ * Escape, the backdrop and the close button dismiss it without submitting; Radix returns
+ * focus to the element that was focused before the drawer opened.
+ */
+export function AdminDrawer({ open, onOpenChange, title, description, locale, closeLabel, backLabel, step = 1, onBack, children, footer, onCloseAutoFocus, className, }) {
+    const isDesktop = useIsDesktop();
+    const showBack = step === 2 && onBack !== undefined;
+    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]", "data-[vaul-drawer-direction=right]:w-[440px] data-[vaul-drawer-direction=right]:sm:max-w-[440px]", className), children: [_jsxs(DrawerHeader, { "data-vaul-no-drag": "", className: "shrink-0 flex-row items-start justify-between gap-3 border-b border-border p-4 text-left", children: [_jsxs("div", { className: "min-w-0", children: [_jsx(DrawerTitle, { className: "text-base leading-6", children: title }), description ? _jsx(DrawerDescription, { children: description }) : null] }), _jsx(DrawerClose, { asChild: true, children: _jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": (closeLabel ?? labels[locale].close), className: "shrink-0", children: _jsx(IconX, { className: "size-4" }) }) })] }), _jsx("div", { "data-admin-drawer-body": "", className: "min-h-0 flex-1 overflow-y-auto p-4", children: children }), showBack || footer ? (_jsxs(DrawerFooter, { "data-vaul-no-drag": "", "data-admin-drawer-footer": "", className: "shrink-0 flex-row flex-wrap items-center justify-end gap-2 border-t border-border bg-card p-4", children: [showBack ? (_jsx(Button, { type: "button", variant: "outline", onClick: onBack, className: "mr-auto", children: (backLabel ?? labels[locale].back) })) : null, footer] })) : null] }) }));
+}

package/dist/components/alert-dialog.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+declare function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): React.JSX.Element;
+declare function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): React.JSX.Element;
+declare function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): React.JSX.Element;
+declare function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>): React.JSX.Element;
+declare function AlertDialogContent({ className, size, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+    size?: "default" | "sm";
+}): React.JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): React.JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): React.JSX.Element;
+declare function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action>): React.JSX.Element;
+declare function AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>): React.JSX.Element;
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };

package/dist/components/alert-dialog.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+import { cn } from "../lib/utils";
+import { buttonVariants } from "./button";
+function AlertDialog({ ...props }) {
+    return _jsx(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
+}
+function AlertDialogTrigger({ ...props }) {
+    return _jsx(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
+}
+function AlertDialogPortal({ ...props }) {
+    return _jsx(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props });
+}
+function AlertDialogOverlay({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Overlay, { "data-slot": "alert-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 AlertDialogContent({ className, size = "default", ...props }) {
+    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, { "data-slot": "alert-dialog-content", "data-size": size, className: cn("group/alert-dialog-content 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-[size=sm]:max-w-xs 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 })] }));
+}
+function AlertDialogHeader({ className, ...props }) {
+    return _jsx("div", { "data-slot": "alert-dialog-header", className: cn("flex flex-col gap-2 text-center sm:text-left", className), ...props });
+}
+function AlertDialogFooter({ className, ...props }) {
+    return _jsx("div", { "data-slot": "alert-dialog-footer", className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props });
+}
+function AlertDialogTitle({ className, ...props }) {
+    return _jsx(AlertDialogPrimitive.Title, { "data-slot": "alert-dialog-title", className: cn("text-lg font-semibold", className), ...props });
+}
+function AlertDialogDescription({ className, ...props }) {
+    return _jsx(AlertDialogPrimitive.Description, { "data-slot": "alert-dialog-description", className: cn("text-sm text-muted-foreground", className), ...props });
+}
+function AlertDialogAction({ className, ...props }) {
+    return _jsx(AlertDialogPrimitive.Action, { className: cn(buttonVariants(), className), ...props });
+}
+function AlertDialogCancel({ className, ...props }) {
+    return _jsx(AlertDialogPrimitive.Cancel, { className: cn(buttonVariants({ variant: "outline" }), className), ...props });
+}
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };

package/dist/components/alert.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const alertVariants: (props?: ({
+    variant?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): React.JSX.Element;
+declare function AlertTitle({ className, asChild, ...props }: React.ComponentProps<"div"> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Alert, AlertTitle, AlertDescription };

package/dist/components/alert.js

@@ -0,0 +1,29 @@
+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 alertVariants = cva("relative grid w-full grid-cols-[auto_1fr] items-start gap-x-3 gap-y-0.5 rounded-lg border px-4 py-3 text-sm [&>svg]:size-5 [&>svg]:translate-y-0.5 [&>svg]:text-current", {
+    variants: {
+        variant: {
+            default: "bg-card text-card-foreground",
+            success: "border-success/50 bg-card text-card-foreground [&>svg]:text-success",
+            warning: "border-warning/50 bg-card text-card-foreground [&>svg]:text-warning",
+            info: "border-info/50 bg-card text-card-foreground [&>svg]:text-info",
+            destructive: "bg-card text-destructive",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function Alert({ className, variant, ...props }) {
+    return (_jsx("div", { "data-slot": "alert", role: "alert", className: cn(alertVariants({ variant }), className), ...props }));
+}
+function AlertTitle({ className, asChild = false, ...props }) {
+    const Comp = asChild ? Slot.Root : "div";
+    return (_jsx(Comp, { "data-slot": "alert-title", className: cn("col-start-2 min-w-0 font-medium leading-snug", className), ...props }));
+}
+function AlertDescription({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-description", className: cn("col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground", className), ...props }));
+}
+export { Alert, AlertTitle, AlertDescription };

package/dist/components/avatar.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { Avatar as AvatarPrimitive } from "radix-ui";
+declare function Avatar({ className, size, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+    size?: "default" | "sm" | "lg";
+}): React.JSX.Element;
+declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): React.JSX.Element;
+declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): React.JSX.Element;
+declare function AvatarBadge({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function AvatarGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount, };

package/dist/components/avatar.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+import { Avatar as AvatarPrimitive } from "radix-ui";
+function Avatar({ className, size = "default", ...props }) {
+    return (_jsx(AvatarPrimitive.Root, { "data-slot": "avatar", "data-size": size, className: cn("group/avatar relative flex size-8 shrink-0 rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6", className), ...props }));
+}
+function AvatarImage({ className, ...props }) {
+    return (_jsx(AvatarPrimitive.Image, { "data-slot": "avatar-image", className: cn("aspect-square size-full rounded-full object-cover", className), ...props }));
+}
+function AvatarFallback({ className, ...props }) {
+    return (_jsx(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", className: cn("flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs", className), ...props }));
+}
+function AvatarBadge({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "avatar-badge", className: cn("absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className), ...props }));
+}
+function AvatarGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "avatar-group", className: cn("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", className), ...props }));
+}
+function AvatarGroupCount({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "avatar-group-count", className: cn("relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className), ...props }));
+}
+export { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount, };

package/dist/components/badge.d.ts

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