ppij-design-system 0.0.0-stage → 0.2.0

package/dist/components/top-bar.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+/**
+ * Top navigation bar pattern for the public site and the portal.
+ * Brand left, section links in the middle, quiet actions right.
+ * The language switch stays a quiet text action, never boxed codes.
+ * On narrow screens the links hide and the caller provides a menu
+ * through the actions slot.
+ */
+export function TopBar({ brand, brandHref = "/", links = [], actions, className }) {
+    return (_jsx("header", { "data-slot": "top-bar", className: cn("w-full border-b border-brand-border bg-white", className), children: _jsxs("div", { className: "mx-auto flex h-14 max-w-6xl items-center gap-4 px-4 sm:px-6", children: [_jsx("a", { href: brandHref, className: "flex shrink-0 items-center gap-2 text-brand-ink no-underline", children: brand }), links.length > 0 ? (_jsx("nav", { "aria-label": "Utama", className: "ml-2 hidden items-center gap-1 md:flex", children: links.map((link) => (_jsx("a", { href: link.href, "aria-current": link.current ? "page" : undefined, className: cn("rounded-md px-3 py-2 text-sm no-underline", link.current
+                            ? "font-semibold text-brand-red"
+                            : "text-brand-ink hover:bg-brand-bg hover:text-brand-red"), children: link.label }, link.label + link.href))) })) : null, actions ? _jsx("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: actions }) : null] }) }));
+}

package/dist/components/type-ahead.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+export interface TypeAheadProps {
+    /** Current text in the field; the chosen option once picked. */
+    value: string;
+    onChange: (value: string) => void;
+    /** Called when the person picks a suggestion. */
+    onSelect?: (value: string) => void;
+    /** Suggestion source; filtered by the current text inside the component. */
+    options: string[];
+    placeholder?: string;
+    id?: string;
+    className?: string;
+}
+/**
+ * A text field with suggestions: the person types, matching options
+ * appear under the field, and picking one fills the field. Free text
+ * stays allowed; the page decides whether the value must come from the
+ * list. Used for institutions, majors, and cities in the wizard.
+ */
+export declare function TypeAhead({ value, onChange, onSelect, options, placeholder, id, className }: TypeAheadProps): React.JSX.Element;

package/dist/components/type-ahead.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { IconChevronDown } from "@tabler/icons-react";
+import { cn } from "../lib/utils";
+import { Input } from "./input";
+/**
+ * A text field with suggestions: the person types, matching options
+ * appear under the field, and picking one fills the field. Free text
+ * stays allowed; the page decides whether the value must come from the
+ * list. Used for institutions, majors, and cities in the wizard.
+ */
+export function TypeAhead({ value, onChange, onSelect, options, placeholder, id, className }) {
+    const [open, setOpen] = React.useState(false);
+    const matches = options.filter((option) => option.toLowerCase().includes(value.toLowerCase()) && option !== value).slice(0, 8);
+    const showList = open && value.trim() !== "" && matches.length > 0;
+    return (_jsxs("div", { className: cn("relative", className), children: [_jsx(Input, { id: id, value: value, placeholder: placeholder, autoComplete: "off", onChange: (event) => { onChange(event.target.value); setOpen(true); }, onFocus: () => setOpen(true), onBlur: () => setTimeout(() => setOpen(false), 120), className: "pr-9" }), _jsx(IconChevronDown, { className: "pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2 text-muted-foreground" }), showList && (_jsx("ul", { className: "absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md border bg-popover p-1 shadow-md", role: "listbox", "aria-label": "Saran", children: matches.map((option) => (_jsx("li", { children: _jsx("button", { type: "button", role: "option", "aria-selected": "false", className: "w-full rounded-sm px-2 py-1.5 text-left text-sm outline-none hover:bg-accent focus-visible:bg-accent", onMouseDown: (event) => {
+                            event.preventDefault();
+                            onChange(option);
+                            onSelect?.(option);
+                            setOpen(false);
+                        }, children: option }) }, option))) }))] }));
+}

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

@@ -0,0 +1,26 @@
+import * as React from "react";
+export interface UnitCardProps {
+    /** Unit name, for example "Okayama". */
+    name: string;
+    /** Unit kind shown as a quiet badge, for example "Komsat" or "Wilayah". */
+    kind: string;
+    /** Number of members in the unit. */
+    memberCount: number;
+    /** Name of the person who leads the unit. */
+    leadName?: string;
+    /** Status label, for example "Aktif". */
+    statusLabel: string;
+    /** Status badge tone. */
+    statusVariant?: "default" | "success" | "warning" | "secondary";
+    /** Where the card leads. When set, the whole card is a link. */
+    href?: string;
+    /** Extra actions rendered at the card foot, for example an Edit button. */
+    actions?: React.ReactNode;
+    className?: string;
+}
+/**
+ * One organisational unit (komsat, wilayah) as a card: identity first,
+ * member count and lead as quiet facts, status as a badge beside the
+ * name. Presentation only; membership and permissions stay in the app.
+ */
+export declare function UnitCard({ name, kind, memberCount, leadName, statusLabel, statusVariant, href, actions, className, }: UnitCardProps): React.JSX.Element;

package/dist/components/unit-card.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { IconUsers, IconChevronRight } from "@tabler/icons-react";
+import { cn } from "../lib/utils";
+import { Card } from "./card";
+import { Badge } from "./badge";
+/**
+ * One organisational unit (komsat, wilayah) as a card: identity first,
+ * member count and lead as quiet facts, status as a badge beside the
+ * name. Presentation only; membership and permissions stay in the app.
+ */
+export function UnitCard({ name, kind, memberCount, leadName, statusLabel, statusVariant = "success", href, actions, className, }) {
+    const body = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "grid gap-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "text-base font-semibold text-brand-ink", children: name }), _jsx(Badge, { variant: "secondary", children: kind })] }), _jsx("span", { className: "text-sm text-muted-foreground", children: leadName ? "Ketua: " + leadName : "Belum ada ketua" })] }), _jsx(Badge, { variant: statusVariant, children: statusLabel })] }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("span", { className: "inline-flex items-center gap-1.5 text-sm text-muted-foreground", children: [_jsx(IconUsers, { className: "size-4" }), memberCount, " anggota"] }), href ? (_jsx(IconChevronRight, { className: "size-4 text-muted-foreground" })) : (actions)] })] }));
+    const classes = cn("grid gap-4 p-5", className);
+    if (href) {
+        return (_jsx(Card, { className: cn(classes, "transition-colors hover:border-brand-red/40"), children: _jsx("a", { href: href, className: "grid gap-4 no-underline outline-none focus-visible:ring-2 focus-visible:ring-ring", children: body }) }));
+    }
+    return _jsx(Card, { className: classes, children: body });
+}

package/dist/components/view-toggle.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+export interface ViewToggleOption {
+    label: string;
+    href: string;
+    current?: boolean;
+}
+export interface ViewToggleProps {
+    options: ViewToggleOption[];
+    ariaLabel: string;
+    className?: string;
+}
+/**
+ * Segmented toggle, generalized from the portal ViewSwitch: a quiet
+ * grey track holds the segments; the current side is a white segment
+ * with ink text and a small shadow, the other side is muted text.
+ * Red is reserved for primary actions and focus, never for navigation
+ * state. Navigation arrives as props (labels and hrefs); role and
+ * visibility rules stay in the application.
+ */
+export declare function ViewToggle({ options, ariaLabel, className }: ViewToggleProps): React.JSX.Element;

package/dist/components/view-toggle.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+/**
+ * Segmented toggle, generalized from the portal ViewSwitch: a quiet
+ * grey track holds the segments; the current side is a white segment
+ * with ink text and a small shadow, the other side is muted text.
+ * Red is reserved for primary actions and focus, never for navigation
+ * state. Navigation arrives as props (labels and hrefs); role and
+ * visibility rules stay in the application.
+ */
+export function ViewToggle({ options, ariaLabel, className }) {
+    return (_jsx("div", { className: className, children: _jsx("div", { role: "group", "aria-label": ariaLabel, className: "inline-flex items-center gap-1 rounded-full bg-secondary p-1", children: options.map((option) => (_jsx("a", { href: option.href, "aria-current": option.current ? "page" : undefined, className: cn("flex h-10 min-w-24 items-center justify-center rounded-full px-4 text-sm no-underline focus-visible:outline-2 focus-visible:outline-brand-red", option.current
+                    ? "bg-card font-semibold text-brand-ink shadow-sm"
+                    : "text-muted-foreground hover:text-brand-ink"), children: option.label }, option.label + option.href))) }) }));
+}

package/dist/components/wizard-footer.d.ts

@@ -0,0 +1,24 @@
+export interface WizardFooterProps {
+    onBack: () => void;
+    onContinue: () => void;
+    backLabel?: string;
+    continueLabel?: string;
+    backDisabled?: boolean;
+    continueDisabled?: boolean;
+    /** While continuing submits: spinner plus loadingLabel inside the primary button. */
+    continueLoading?: boolean;
+    loadingLabel?: string;
+    /** The final submit carries no arrow. */
+    showArrow?: boolean;
+    className?: string;
+}
+/**
+ * The wizard's fixed bottom navigation bar, extracted from
+ * Wizard.tsx: two equal buttons (Kembali outline, Lanjut primary)
+ * in a white bar pinned to the viewport bottom. Named exception to
+ * the default button size: a fixed navigation bar is a navigation
+ * target, so its buttons are field height (44px) and text-base,
+ * like the portal bottom nav. The loading state follows the rule:
+ * spinner inside the primary button.
+ */
+export declare function WizardFooter({ onBack, onContinue, backLabel, continueLabel, backDisabled, continueDisabled, continueLoading, loadingLabel, showArrow, className, }: WizardFooterProps): import("react").JSX.Element;

package/dist/components/wizard-footer.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { IconArrowLeft, IconArrowRight } from "@tabler/icons-react";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+import { Spinner } from "./spinner";
+/**
+ * The wizard's fixed bottom navigation bar, extracted from
+ * Wizard.tsx: two equal buttons (Kembali outline, Lanjut primary)
+ * in a white bar pinned to the viewport bottom. Named exception to
+ * the default button size: a fixed navigation bar is a navigation
+ * target, so its buttons are field height (44px) and text-base,
+ * like the portal bottom nav. The loading state follows the rule:
+ * spinner inside the primary button.
+ */
+export function WizardFooter({ onBack, onContinue, backLabel = "Kembali", continueLabel = "Lanjut", backDisabled = false, continueDisabled = false, continueLoading = false, loadingLabel = "Mengirim…", showArrow = true, className, }) {
+    return (_jsx("div", { className: cn("fixed inset-x-0 bottom-0 z-30 border-t border-border bg-card", className), children: _jsxs("div", { className: "mx-auto flex max-w-2xl gap-3 px-4 py-3", children: [_jsxs(Button, { type: "button", variant: "outline", onClick: onBack, disabled: backDisabled, className: "min-h-11 flex-1 text-base font-semibold", children: [_jsx(IconArrowLeft, { size: 18, "aria-hidden": "true" }), backLabel] }), _jsx(Button, { type: "submit", onClick: onContinue, disabled: continueDisabled || continueLoading, "aria-busy": continueLoading, className: "min-h-11 flex-1 text-base font-semibold", children: continueLoading ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "sm", decorative: true }), _jsx("span", { children: loadingLabel })] })) : (_jsxs(_Fragment, { children: [continueLabel, showArrow && _jsx(IconArrowRight, { size: 18, "aria-hidden": "true" })] })) })] }) }));
+}

package/dist/components/wizard-header.d.ts

@@ -0,0 +1,29 @@
+import { type SavingStatus } from "./saving-indicator";
+export interface WizardLanguage {
+    label: string;
+    current?: boolean;
+}
+export interface WizardHeaderProps {
+    /** Counter text, for example "Langkah 3 dari 7". */
+    stepText: string;
+    /** Step title shown after the counter on sm and wider. */
+    title: string;
+    current: number;
+    total: number;
+    progressLabel: string;
+    savingStatus: SavingStatus;
+    locale?: "id" | "en";
+    languages: WizardLanguage[];
+    languageLabel?: string;
+    onLanguageSelect?: (language: WizardLanguage) => void;
+    className?: string;
+}
+/**
+ * The wizard's sticky sub-header (WIZ106-09), extracted from
+ * Wizard.tsx: step counter with the step title, the draft
+ * SavingIndicator and the language menu on the right, and the
+ * segmented progress below. It sits under the portal header inside
+ * the shell content; the consumer supplies the horizontal bleed
+ * (for example -mx-4) its layout needs.
+ */
+export declare function WizardHeader({ stepText, title, current, total, progressLabel, savingStatus, locale, languages, languageLabel, onLanguageSelect, className, }: WizardHeaderProps): import("react").JSX.Element;

package/dist/components/wizard-header.js

@@ -0,0 +1,18 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { IconCheck, IconLanguage } from "@tabler/icons-react";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "./dropdown-menu";
+import { SavingIndicator } from "./saving-indicator";
+import { SegmentedProgress } from "./segmented-progress";
+/**
+ * The wizard's sticky sub-header (WIZ106-09), extracted from
+ * Wizard.tsx: step counter with the step title, the draft
+ * SavingIndicator and the language menu on the right, and the
+ * segmented progress below. It sits under the portal header inside
+ * the shell content; the consumer supplies the horizontal bleed
+ * (for example -mx-4) its layout needs.
+ */
+export function WizardHeader({ stepText, title, current, total, progressLabel, savingStatus, locale = "id", languages, languageLabel = "Pilih bahasa", onLanguageSelect, className, }) {
+    return (_jsxs("div", { className: cn("sticky top-0 z-40 border-b border-border bg-card px-4 py-3", className), children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("p", { className: "min-w-0 text-sm leading-5 font-medium text-brand-ink", "aria-live": "polite", children: [stepText, _jsxs("span", { className: "hidden sm:inline", children: [" \u2014 ", title] })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [_jsx(SavingIndicator, { status: savingStatus, locale: locale }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": languageLabel, children: _jsx(IconLanguage, {}) }) }), _jsx(DropdownMenuContent, { align: "end", children: languages.map((language) => (_jsxs(DropdownMenuItem, { onSelect: () => onLanguageSelect?.(language), children: [_jsx("span", { className: "flex-1", children: language.label }), language.current && _jsx(IconCheck, { className: "size-4 text-brand-red", "aria-hidden": "true" })] }, language.label))) })] })] })] }), _jsx(SegmentedProgress, { current: current, total: total, label: progressLabel, className: "mt-3" })] }));
+}

package/dist/hooks/use-mobile.d.ts

@@ -0,0 +1 @@
+export declare function useIsMobile(): boolean;

package/dist/hooks/use-mobile.js

@@ -0,0 +1,11 @@
+import * as React from "react";
+const MOBILE_BREAKPOINT = 768;
+const MOBILE_QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`;
+function subscribeMobile(onChange) {
+    const mql = window.matchMedia(MOBILE_QUERY);
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+}
+export function useIsMobile() {
+    return React.useSyncExternalStore(subscribeMobile, () => window.matchMedia(MOBILE_QUERY).matches, () => false);
+}

package/dist/index.d.ts

@@ -0,0 +1,70 @@
+export { cn } from "./lib/utils";
+export { Button, buttonVariants } from "./components/button";
+export { Badge, badgeVariants } from "./components/badge";
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, } from "./components/card";
+export { Input } from "./components/input";
+export { Label } from "./components/label";
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } from "./components/select";
+export { Separator } from "./components/separator";
+export { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount, } from "./components/avatar";
+export { Spinner } from "./components/spinner";
+export { Skeleton } from "./components/skeleton";
+export { Alert, AlertTitle, AlertDescription } from "./components/alert";
+export { SavingIndicator, type SavingStatus, type SavingIndicatorProps } from "./components/saving-indicator";
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./components/tooltip";
+export { ScrollArea, ScrollBar } from "./components/scroll-area";
+export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, } from "./components/drawer";
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, } from "./components/sheet";
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, } from "./components/dropdown-menu";
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants } from "./components/tabs";
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, } from "./components/table";
+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";
+export { AdminDrawer, useIsDesktop, type AdminDrawerProps, type Locale } from "./components/admin-drawer";
+export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia } from "./components/empty";
+export { FormPanel } from "./components/form-panel";
+export { MemberCard, MemberCardBack, type MemberCardProps, type MemberCardBackProps, type MemberCardTheme } from "./components/member-card";
+export { PageHeader, type PageHeaderProps } from "./components/page-header";
+export { DataTable, type DataTableProps } from "./components/data-table";
+export { TopBar, type TopBarProps, type TopBarLink } from "./components/top-bar";
+export { ViewToggle, type ViewToggleProps, type ViewToggleOption } from "./components/view-toggle";
+export { BottomBar, type BottomBarProps, type BottomBarItem } from "./components/bottom-bar";
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } from "./components/dialog";
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, } from "./components/alert-dialog";
+export { Toaster } from "./components/sonner";
+export { SearchFilter, type SearchFilterProps, type ActiveFilter } from "./components/search-filter";
+export { UnitCard, type UnitCardProps } from "./components/unit-card";
+export { StatCard, type StatCardProps } from "./components/stat-card";
+export { Checkbox } from "./components/checkbox";
+export { RadioGroup, RadioGroupItem } from "./components/radio-group";
+export { Switch } from "./components/switch";
+export { Textarea } from "./components/textarea";
+export { Stepper, type StepperProps, type StepperStep } from "./components/stepper";
+export { FileUpload, type FileUploadProps, type FileUploadStatus } from "./components/file-upload";
+export { Progress } from "./components/progress";
+export { Timeline, type TimelineProps, type TimelineItem } from "./components/timeline";
+export { AccountMenu, type AccountMenuProps, type AccountMenuItem } from "./components/account-menu";
+export { TypeAhead, type TypeAheadProps } from "./components/type-ahead";
+export { TagInput, type TagInputProps } from "./components/tag-input";
+export { PortalShell, type PortalShellProps, type PortalNavItem, type PortalLanguage } from "./components/portal-shell";
+export { StatusCard, type StatusCardProps, type StatusCardTone } from "./components/status-card";
+export { ServiceTiles, type ServiceTilesProps, type ServiceTile, type ServiceTileGroup } from "./components/service-tiles";
+export { MemberCardBlock, hasBarcode, type MemberCardBlockProps, type MemberCardState, type CardThemePreference } from "./components/member-card-block";
+export { PhoneField, PHONE_COUNTRY_CODES, type PhoneFieldProps } from "./components/phone-field";
+export { SegmentedProgress, type SegmentedProgressProps } from "./components/segmented-progress";
+export { WizardHeader, type WizardHeaderProps, type WizardLanguage } from "./components/wizard-header";
+export { PillRadio, pillRadioClass, type PillRadioProps, type PillRadioOption } from "./components/pill-radio";
+export { MonthPicker, type MonthPickerProps } from "./components/month-picker";
+export { PostcodeField, type PostcodeFieldProps, type PostcodeCandidate } from "./components/postcode-field";
+export { FundingPicker, type FundingPickerProps } from "./components/funding-picker";
+export { CardUpload, type CardUploadProps, type CardSide, type CardSideState } from "./components/card-upload";
+export { SuggestionSheet, type SuggestionSheetProps, type SuggestKind } from "./components/suggestion-sheet";
+export { SubmitOverlay, type SubmitOverlayProps } from "./components/submit-overlay";
+export { ReviewPanel, type ReviewPanelProps } from "./components/review-panel";
+export { WizardFooter, type WizardFooterProps } from "./components/wizard-footer";
+export { BannerCarousel, type BannerCarouselProps } from "./components/banner-carousel";
+export { OfflineBanner, type OfflineBannerProps } from "./components/offline-banner";
+export { TodoStrip, type TodoStripProps } from "./components/todo-strip";
+export { InvitationCard, type InvitationCardProps } from "./components/invitation-card";
+export { cardThemes, resolveCardTheme, type CardTheme } from "./card-themes";
+export { activeBanners, jstToday, MAX_ACTIVE, type PromoBanner } from "./banners";
+export { EditablePanel, type EditablePanelProps } from "./components/editable-panel";

package/dist/index.js

@@ -0,0 +1,70 @@
+export { cn } from "./lib/utils";
+export { Button, buttonVariants } from "./components/button";
+export { Badge, badgeVariants } from "./components/badge";
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, } from "./components/card";
+export { Input } from "./components/input";
+export { Label } from "./components/label";
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } from "./components/select";
+export { Separator } from "./components/separator";
+export { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount, } from "./components/avatar";
+export { Spinner } from "./components/spinner";
+export { Skeleton } from "./components/skeleton";
+export { Alert, AlertTitle, AlertDescription } from "./components/alert";
+export { SavingIndicator } from "./components/saving-indicator";
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./components/tooltip";
+export { ScrollArea, ScrollBar } from "./components/scroll-area";
+export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, } from "./components/drawer";
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, } from "./components/sheet";
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, } from "./components/dropdown-menu";
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants } from "./components/tabs";
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, } from "./components/table";
+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";
+export { AdminDrawer, useIsDesktop } from "./components/admin-drawer";
+export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia } from "./components/empty";
+export { FormPanel } from "./components/form-panel";
+export { MemberCard, MemberCardBack } from "./components/member-card";
+export { PageHeader } from "./components/page-header";
+export { DataTable } from "./components/data-table";
+export { TopBar } from "./components/top-bar";
+export { ViewToggle } from "./components/view-toggle";
+export { BottomBar } from "./components/bottom-bar";
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } from "./components/dialog";
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, } from "./components/alert-dialog";
+export { Toaster } from "./components/sonner";
+export { SearchFilter } from "./components/search-filter";
+export { UnitCard } from "./components/unit-card";
+export { StatCard } from "./components/stat-card";
+export { Checkbox } from "./components/checkbox";
+export { RadioGroup, RadioGroupItem } from "./components/radio-group";
+export { Switch } from "./components/switch";
+export { Textarea } from "./components/textarea";
+export { Stepper } from "./components/stepper";
+export { FileUpload } from "./components/file-upload";
+export { Progress } from "./components/progress";
+export { Timeline } from "./components/timeline";
+export { AccountMenu } from "./components/account-menu";
+export { TypeAhead } from "./components/type-ahead";
+export { TagInput } from "./components/tag-input";
+export { PortalShell } from "./components/portal-shell";
+export { StatusCard } from "./components/status-card";
+export { ServiceTiles } from "./components/service-tiles";
+export { MemberCardBlock, hasBarcode } from "./components/member-card-block";
+export { PhoneField, PHONE_COUNTRY_CODES } from "./components/phone-field";
+export { SegmentedProgress } from "./components/segmented-progress";
+export { WizardHeader } from "./components/wizard-header";
+export { PillRadio, pillRadioClass } from "./components/pill-radio";
+export { MonthPicker } from "./components/month-picker";
+export { PostcodeField } from "./components/postcode-field";
+export { FundingPicker } from "./components/funding-picker";
+export { CardUpload } from "./components/card-upload";
+export { SuggestionSheet } from "./components/suggestion-sheet";
+export { SubmitOverlay } from "./components/submit-overlay";
+export { ReviewPanel } from "./components/review-panel";
+export { WizardFooter } from "./components/wizard-footer";
+export { BannerCarousel } from "./components/banner-carousel";
+export { OfflineBanner } from "./components/offline-banner";
+export { TodoStrip } from "./components/todo-strip";
+export { InvitationCard } from "./components/invitation-card";
+export { cardThemes, resolveCardTheme } from "./card-themes";
+export { activeBanners, jstToday, MAX_ACTIVE } from "./banners";
+export { EditablePanel } from "./components/editable-panel";

package/dist/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/lib/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/sample-banners.d.ts

@@ -0,0 +1,8 @@
+import type { PromoBanner } from "./banners";
+/**
+ * The real banners.json entries from ppij-identity-sso (October
+ * 2026) with the real artwork from brand/banners, for stories and
+ * prototypes. Dates are JST; expired entries drop out by
+ * themselves in BannerCarousel.
+ */
+export declare const SAMPLE_BANNERS: PromoBanner[];

package/dist/sample-banners.js

@@ -0,0 +1,28 @@
+// @ts-expect-error Static banner artwork; the portal serves its own copies from /banners.
+import b1d from "../../../brand/banners/banner_1.jpg";
+// @ts-expect-error Static banner artwork; the portal serves its own copies from /banners.
+import b1m from "../../../brand/banners/banner_1_mobile.jpg";
+// @ts-expect-error Static banner artwork; the portal serves its own copies from /banners.
+import b2d from "../../../brand/banners/banner_2.jpg";
+// @ts-expect-error Static banner artwork; the portal serves its own copies from /banners.
+import b2m from "../../../brand/banners/banner_2_mobile.jpg";
+// @ts-expect-error Static banner artwork; the portal serves its own copies from /banners.
+import b3d from "../../../brand/banners/banner_3.jpg";
+// @ts-expect-error Static banner artwork; the portal serves its own copies from /banners.
+import b3m from "../../../brand/banners/banner_3_mobile.jpg";
+// @ts-expect-error Static banner artwork; the portal serves its own copies from /banners.
+import b4d from "../../../brand/banners/banner_4.jpg";
+// @ts-expect-error Static banner artwork; the portal serves its own copies from /banners.
+import b4m from "../../../brand/banners/banner_4_mobile.jpg";
+/**
+ * The real banners.json entries from ppij-identity-sso (October
+ * 2026) with the real artwork from brand/banners, for stories and
+ * prototypes. Dates are JST; expired entries drop out by
+ * themselves in BannerCarousel.
+ */
+export const SAMPLE_BANNERS = [
+    { id: "banner_4", image: { desktop: b4d, mobile: b4m }, alt: { id: "Webinar gratis Communication Survival Skills 2027 bersama John Robert Powers, Sabtu 31 Oktober 2026 pukul 14.00 WIB via Zoom. Daftar sekarang.", en: "Free Communication Survival Skills 2027 webinar with John Robert Powers, Saturday 31 October 2026, 14.00 WIB on Zoom. Register now." }, href: "https://bit.ly/CSSSeminar2026", start: "2026-10-24", end: "2026-11-01", order: 1 },
+    { id: "banner_1", image: { desktop: b1d, mobile: b1m }, alt: { id: "Diskon 10% di Toko Indonesia Tokyo untuk anggota PPI Jepang", en: "10% off at Toko Indonesia Tokyo for PPI Japan members" }, href: "https://ppijepang.org", start: "2026-10-20", end: "2026-12-31", order: 2 },
+    { id: "banner_2", image: { desktop: b2d, mobile: b2m }, alt: { id: "Gratis ongkir kirim paket ke Indonesia untuk anggota aktif", en: "Free shipping to Indonesia for active members" }, href: "https://ppijepang.org", start: "2026-10-20", end: "2026-12-31", order: 3 },
+    { id: "banner_3", image: { desktop: b3d, mobile: b3m }, alt: { id: "Ski & Snowboard bareng PPI Okayama musim dingin ini. Daftar sekarang.", en: "Join the PPI Okayama Winter Ski and Snowboard trip. Register now." }, href: "https://ppijepang.org", start: "2026-10-21", order: 4 },
+];

package/dist/tokens.css

@@ -0,0 +1,119 @@
+@import "tailwindcss";
+
+/*
+ * GENERATED from tokens/tokens.json by scripts/generate-tokens.mjs.
+ * Do not edit by hand. PPIJ design tokens: brand primitives in :root,
+ * the shadcn semantic layer mapped to them, Tailwind v4 theme names.
+ */
+:root {
+  --brand-red: #c8102e;
+  --brand-ink: #1c1f23;
+  --brand-muted: #5b6168;
+  --brand-border: #e3e5e8;
+  --brand-bg: #f6f6f4;
+  --status-green: #15803d;
+  --status-amber: #b45309;
+  --status-blue: #1d4ed8;
+
+  --background: var(--brand-bg);
+  --foreground: var(--brand-ink);
+  --card: #ffffff;
+  --card-foreground: var(--brand-ink);
+  --popover: #ffffff;
+  --popover-foreground: var(--brand-ink);
+  --primary: var(--brand-red);
+  --primary-foreground: #ffffff;
+  --secondary: #eceef0;
+  --secondary-foreground: var(--brand-ink);
+  --muted: #eceef0;
+  --muted-foreground: var(--brand-muted);
+  --accent: #eceef0;
+  --accent-foreground: var(--brand-ink);
+  --destructive: var(--brand-red);
+  --border: var(--brand-border);
+  --input: var(--brand-border);
+  --ring: var(--brand-red);
+  --sidebar: #ffffff;
+  --sidebar-foreground: var(--brand-ink);
+  --sidebar-primary: var(--brand-red);
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #eceef0;
+  --sidebar-accent-foreground: var(--brand-ink);
+  --sidebar-border: var(--brand-border);
+  --sidebar-ring: var(--brand-red);
+  --success: var(--status-green);
+  --success-foreground: #ffffff;
+  --warning: var(--status-amber);
+  --warning-foreground: #ffffff;
+  --info: var(--status-blue);
+  --info-foreground: #ffffff;
+  --radius: 0.625rem;
+}
+
+@theme inline {
+  --font-sans: "Plus Jakarta Sans", "Noto Sans JP", system-ui, sans-serif;
+
+  --color-brand-red: var(--brand-red);
+  --color-brand-ink: var(--brand-ink);
+  --color-brand-muted: var(--brand-muted);
+  --color-brand-border: var(--brand-border);
+  --color-brand-bg: var(--brand-bg);
+  --color-status-green: var(--status-green);
+  --color-status-amber: var(--status-amber);
+  --color-status-blue: var(--status-blue);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+@layer base {
+  * {
+    border-color: var(--border);
+  }
+
+  html {
+    -webkit-text-size-adjust: 100%;
+  }
+
+  body {
+    margin: 0;
+    background-color: var(--brand-bg);
+    color: var(--brand-ink);
+    font-family: var(--font-sans);
+    line-height: 1.6;
+  }
+}

package/dist/tokens.json

@@ -0,0 +1,50 @@
+{
+  "primitive": {
+    "brand-red": "#c8102e",
+    "brand-ink": "#1c1f23",
+    "brand-muted": "#5b6168",
+    "brand-border": "#e3e5e8",
+    "brand-bg": "#f6f6f4",
+    "white": "#ffffff",
+    "secondary-surface": "#eceef0",
+    "radius": "0.625rem",
+    "font-sans": "\"Plus Jakarta Sans\", \"Noto Sans JP\", system-ui, sans-serif",
+    "status-green": "#15803d",
+    "status-amber": "#b45309",
+    "status-blue": "#1d4ed8"
+  },
+  "semantic": {
+    "background": "var(--brand-bg)",
+    "foreground": "var(--brand-ink)",
+    "card": "#ffffff",
+    "card-foreground": "var(--brand-ink)",
+    "popover": "#ffffff",
+    "popover-foreground": "var(--brand-ink)",
+    "primary": "var(--brand-red)",
+    "primary-foreground": "#ffffff",
+    "secondary": "#eceef0",
+    "secondary-foreground": "var(--brand-ink)",
+    "muted": "#eceef0",
+    "muted-foreground": "var(--brand-muted)",
+    "accent": "#eceef0",
+    "accent-foreground": "var(--brand-ink)",
+    "destructive": "var(--brand-red)",
+    "border": "var(--brand-border)",
+    "input": "var(--brand-border)",
+    "ring": "var(--brand-red)",
+    "sidebar": "#ffffff",
+    "sidebar-foreground": "var(--brand-ink)",
+    "sidebar-primary": "var(--brand-red)",
+    "sidebar-primary-foreground": "#ffffff",
+    "sidebar-accent": "#eceef0",
+    "sidebar-accent-foreground": "var(--brand-ink)",
+    "sidebar-border": "var(--brand-border)",
+    "sidebar-ring": "var(--brand-red)",
+    "success": "var(--status-green)",
+    "success-foreground": "#ffffff",
+    "warning": "var(--status-amber)",
+    "warning-foreground": "#ffffff",
+    "info": "var(--status-blue)",
+    "info-foreground": "#ffffff"
+  }
+}