; } export function AlertDialogFooter({ className, ...p }: React.ComponentProps<"div">) { return

; } export function AlertDialogTitle({ className, ...p }: React.ComponentProps) { return ; } export function AlertDialogDescription({ className, ...p }: React.ComponentProps) { return ; } /** Plain Radix Action. Use `asChild` with a Button to pick a colour, or it gets the default primary button style. */ export function AlertDialogAction({ className, asChild, ...p }: React.ComponentProps) { return ; } export function AlertDialogCancel({ className, asChild, ...p }: React.ComponentProps) { return ; } ``` # Aspect Ratio > Keep media at a fixed ratio inside a clay frame. Docs: https://ui.parlemen.dev/docs/aspect-ratio ## Installation ```bash npx shadcn@latest add @parlemen/aspect-ratio ``` ## Usage ```tsx import { AspectRatio } from "@/components/ui/aspect-ratio"; export default function AspectRatioDemo() { return (

16 / 9

{/* eslint-disable-next-line @next/next/no-img-element */} Parlemen mascot

); } ``` ## Source (components/ui/aspect-ratio.tsx) ```tsx "use client"; import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"; export function AspectRatio(props: React.ComponentProps) { return ; } ``` # Avatar > Clay circles with initials, plus a group that fans out. Docs: https://ui.parlemen.dev/docs/avatar ## Installation ```bash npx shadcn@latest add @parlemen/avatar ``` ## Usage ```tsx import { Avatar, AvatarFallback, AvatarGroup, AvatarImage } from "@/components/ui/avatar"; export default function AvatarDemo() { return (

RW AF SK {/* When there is no photo (or it fails to load) the fallback shows initials on a role colour. */} DM PA

BU DE RA NA +8

Hover the committee to fan them out

); } ``` ## Source (components/ui/avatar.tsx) ```tsx "use client"; import * as React from "react"; import * as AvatarPrimitive from "@radix-ui/react-avatar"; import { motion } from "motion/react"; import { springs } from "@/lib/motion"; import { cn } from "@/lib/utils"; type Color = "primary" | "secondary" | "tertiary" | "accent" | "success" | "warning" | "danger" | "info"; const container: Record = { primary: "bg-primary-container text-on-primary-container", secondary: "bg-secondary-container text-on-secondary-container", tertiary: "bg-tertiary-container text-on-tertiary-container", accent: "bg-accent-container text-on-accent-container", success: "bg-success-container text-on-success-container", warning: "bg-warning-container text-on-warning-container", danger: "bg-danger-container text-on-danger-container", info: "bg-info-container text-on-info-container", }; const sizes = { sm: "size-8 text-xs", default: "size-11 text-sm", lg: "size-16 text-lg" } as const; export function Avatar({ className, size = "default", ...p }: React.ComponentProps & { size?: keyof typeof sizes }) { return ( ); } export function AvatarImage({ className, ...p }: React.ComponentProps) { return ; } export function AvatarFallback({ className, color = "primary", ...p }: Omit, "color"> & { color?: Color }) { return ( ); } /** Stacked avatars that fan out on hover. */ export function AvatarGroup({ className, children, ...p }: React.HTMLAttributes) { const [hover, setHover] = React.useState(false); const items = React.Children.toArray(children); return (

setHover(true)} onPointerLeave={() => setHover(false)} {...p} > {items.map((child, i) => ( {child} ))}

); } ``` # Badge > Small pill for status and labels. Docs: https://ui.parlemen.dev/docs/badge ## Installation ```bash npx shadcn@latest add @parlemen/badge ``` ## Usage ```tsx import { CheckCircleIcon, ClockIcon, SparkleIcon, XCircleIcon } from "@phosphor-icons/react/dist/ssr"; import { Badge } from "@/components/ui/badge"; const colors = ["primary", "secondary", "tertiary", "accent", "success", "warning", "danger", "info", "neutral"] as const; export default function BadgeDemo() { return (

Live Pending New Ditolak

{(["solid", "soft"] as const).map((variant) => (

{colors.map((color) => ( {color} ))}

))}

); } ``` ## Source (components/ui/badge.tsx) ```tsx import * as React from "react"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; const colors = ["primary", "secondary", "tertiary", "accent", "success", "warning", "danger", "info", "neutral"] as const; type Color = (typeof colors)[number]; const solid: Record = { primary: "bg-primary text-on-primary", secondary: "bg-secondary text-on-secondary", tertiary: "bg-tertiary text-on-tertiary", accent: "bg-accent text-on-accent", success: "bg-success text-on-success", warning: "bg-warning text-on-warning", danger: "bg-danger text-on-danger", info: "bg-info text-on-info", neutral: "bg-surface text-on-surface", }; const soft: Record = { primary: "bg-primary-container text-on-primary-container", secondary: "bg-secondary-container text-on-secondary-container", tertiary: "bg-tertiary-container text-on-tertiary-container", accent: "bg-accent-container text-on-accent-container", success: "bg-success-container text-on-success-container", warning: "bg-warning-container text-on-warning-container", danger: "bg-danger-container text-on-danger-container", info: "bg-info-container text-on-info-container", neutral: "bg-surface-sunken text-on-surface", }; const badgeVariants = cva("inline-flex items-center gap-1 rounded-full px-3 py-0.5 text-xs font-bold [&_svg]:pointer-events-none [&_svg]:size-3.5 [&_svg]:shrink-0", { variants: { variant: { solid: "shadow-clay-sm", soft: "" }, color: Object.fromEntries(colors.map((c) => [c, ""])) as Record, }, compoundVariants: colors.flatMap((color) => [ { variant: "solid" as const, color, className: solid[color] }, { variant: "soft" as const, color, className: soft[color] }, ]), defaultVariants: { variant: "solid", color: "primary" }, }); export function Badge({ className, variant, color, ...p }: Omit, "color"> & VariantProps) { return ; } export { badgeVariants }; ``` # Brand > Live mascot and rolling wordmark from the company site. Docs: https://ui.parlemen.dev/docs/brand ## Installation ```bash npx shadcn@latest add @parlemen/brand ``` ## Usage ```tsx "use client"; import { BrandMark, LiveLogo, RollWordmark } from "@/components/ui/brand"; export default function BrandDemo() { return (

); } ``` ## Source (components/ui/brand.tsx) ```tsx "use client"; import * as React from "react"; import { motion, useAnimationControls } from "motion/react"; import { springs } from "@/lib/motion"; import { cn } from "@/lib/utils"; /* Ported from the company profile site (web/components/Accents.tsx) so the brand behaves the same everywhere. */ const BODY = "M280.0 46.0C287.4 46.2 311.9 47.1 323.3 48.3C334.8 49.4 340.1 50.8 348.4 52.8C356.8 54.9 365.9 57.8 373.6 60.8C381.2 63.9 386.9 66.5 394.1 71.1C401.3 75.7 410.8 82.9 416.9 88.2C423.0 93.6 426.2 97.5 430.6 103.1C435.0 108.6 439.8 115.6 443.2 121.3C446.6 127.0 448.5 130.6 451.2 137.3C453.8 144.0 457.1 152.7 459.2 161.3C461.2 169.8 463.0 180.5 463.7 188.7C464.5 196.8 464.3 202.7 463.7 210.3C463.1 218.0 462.0 226.3 460.3 234.3C458.6 242.3 456.5 250.3 453.4 258.3C450.4 266.3 446.2 275.0 442.0 282.3C437.8 289.5 433.5 295.6 428.3 301.7C423.2 307.7 416.9 313.8 411.2 318.8C405.5 323.7 400.6 327.3 394.1 331.3C387.6 335.3 379.6 339.5 372.4 342.7C365.2 346.0 358.1 348.4 350.7 350.7C343.3 353.0 335.7 354.9 327.9 356.4C320.1 358.0 315.2 359.3 303.9 359.9C292.7 360.4 270.8 360.2 260.6 359.9C250.3 359.5 245.5 352.4 242.3 357.6C239.1 362.7 242.5 378.7 241.2 390.7C239.8 402.7 236.8 420.3 234.3 429.5C231.8 438.6 228.8 441.7 226.3 445.5C223.9 449.3 222.3 450.2 219.5 452.3C216.6 454.4 214.7 456.1 209.2 458.0C203.7 459.9 193.6 462.4 186.4 463.7C179.2 465.0 177.1 465.8 165.8 466.0C154.6 466.2 128.7 465.4 119.0 464.9C109.3 464.3 112.8 464.3 107.6 462.6C102.5 460.9 92.8 456.9 88.2 454.6C83.7 452.3 82.9 451.4 80.2 448.9C77.6 446.4 74.5 443.6 72.3 439.8C70.0 435.9 67.7 431.2 66.5 426.1C65.4 420.9 65.0 416.2 65.4 408.9C65.8 401.7 66.5 395.6 68.8 382.7C71.1 369.8 77.4 344.1 79.1 331.3C80.8 318.6 79.9 313.8 79.1 306.2C78.3 298.6 78.3 297.3 74.5 285.7C70.7 274.1 60.6 250.5 56.3 236.6C51.9 222.7 49.4 214.5 48.3 202.4C47.1 190.2 48.1 173.8 49.4 163.6C50.8 153.3 54.4 146.1 56.3 140.7C58.2 135.4 58.6 135.4 60.8 131.6C63.1 127.8 64.3 124.0 70.0 117.9C75.7 111.8 86.7 101.2 95.1 95.1C103.4 89.0 111.8 85.4 120.2 81.4C128.6 77.4 136.2 74.3 145.3 71.1C154.4 67.9 164.3 64.8 175.0 62.0C185.6 59.1 195.3 56.5 209.2 54.0C223.1 51.5 246.7 48.3 258.3 47.1C269.9 46.0 275.2 47.3 278.8 47.1C282.4 47.0 272.5 45.8 280.0 46.0Z"; /** The P mascot. Pupils follow the cursor, blinks every few seconds, wiggles on hover. */ export function LiveLogo({ size = 40, className, upsideDown = false, }: { size?: number; className?: string; /** Hanging upside down (e.g. from the footer's cloud edge). Eye tracking is inverted to match. */ upsideDown?: boolean; }) { const pupils = React.useRef(null); const ref = React.useRef(null); const lids = useAnimationControls(); const clip = React.useId().replace(/:/g, ""); React.useEffect(() => { const move = (e: PointerEvent) => { const r = ref.current?.getBoundingClientRect(); if (!r || !pupils.current) return; const flip = upsideDown ? -1 : 1; const dx = flip * (e.clientX - (r.left + r.width / 2)); const dy = flip * (e.clientY - (r.top + r.height / 2)); const d = Math.hypot(dx, dy) || 1; const k = Math.min(1, d / 200); pupils.current.setAttribute("transform", `translate(${(dx / d) * 16 * k} ${(dy / d) * 14 * k})`); }; window.addEventListener("pointermove", move); const t = setInterval(() => lids.start({ scaleY: [0, 1, 0], transition: { duration: 0.22 } }), 3800); return () => { window.removeEventListener("pointermove", move); clearInterval(t); }; }, [lids, upsideDown]); return ( {/* Flip inside the SVG so motion's hover rotation on the element doesn't cancel it. */} ); } const rollColors = ["var(--coral)", "var(--blue)", "var(--lime)", "var(--grape)"]; /** * Letters roll up in a staggered wave on hover and are replaced by brand-colored copies. * Pass `hover` to drive it from a parent (e.g. hovering the whole logo link). */ export function RollWordmark({ text, hover, className }: { text: string; hover?: boolean; className?: string }) { const controlled = hover !== undefined; return ( {text.split("").map((ch, i) => ( {ch} {ch} ))} ); } /** Logo + wordmark lockup. Hovering anywhere on it rolls the wordmark. */ export function BrandMark({ text = "Parlemen UI", size = 36, className }: { text?: string; size?: number; className?: string }) { const [hover, setHover] = React.useState(false); return ( setHover(true)} onPointerLeave={() => setHover(false)} > ); } ``` # Breadcrumb > Shows where you are, with the current page as a soft pill. Docs: https://ui.parlemen.dev/docs/breadcrumb ## Installation ```bash npx shadcn@latest add @parlemen/breadcrumb ``` ## Usage ```tsx import { HouseIcon, FolderIcon } from "@phosphor-icons/react/dist/ssr"; import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from "@/components/ui/breadcrumb"; export default function BreadcrumbDemo() { return ( Parlemen Komisi I RUU Perlindungan Data ); } ``` ## Source (components/ui/breadcrumb.tsx) ```tsx import * as React from "react"; import { Slot } from "@radix-ui/react-slot"; import { CaretRightIcon, DotsThreeIcon } from "@phosphor-icons/react/dist/ssr"; import { cn } from "@/lib/utils"; export function Breadcrumb(p: React.ComponentProps<"nav">) { return

; } export function BreadcrumbList({ className, ...p }: React.ComponentProps<"ol">) { return (

; } export function BreadcrumbLink({ asChild, className, ...p }: React.ComponentProps<"a"> & { asChild?: boolean }) { const Comp = asChild ? Slot : "a"; return ( ); } export function BreadcrumbPage({ className, ...p }: React.ComponentProps<"span">) { return ( ); } export function BreadcrumbSeparator({ children, className, ...p }: React.ComponentProps<"li">) { return (
svg]:size-3.5", className)} {...p}> {children ?? }

{variants.map((variant) => (

{colors.map((color) => ( ))}

))}

, "color">, VariantProps { asChild?: boolean; } /** Clay squish: lifts on hover, flattens and spreads when pressed, springs back. */ const press = { whileHover: { y: -2 }, whileTap: { y: 1, scaleY: 0.9, scaleX: 1.05 }, transition: springs.squish, }; export function Button({ className, variant, color, size, asChild, ...props }: ButtonProps) { const classes = cn(buttonVariants({ variant, color, size }), className); if (asChild) { // Slot cannot take motion props, so links get the same feel from CSS. return ; } const isGhost = variant === "ghost"; return ( )} /> ); } export { buttonVariants }; ``` # Calendar > Round clay days for picking a date or a range. Docs: https://ui.parlemen.dev/docs/calendar ## Installation ```bash npx shadcn@latest add @parlemen/calendar ``` ## Usage ```tsx "use client"; import * as React from "react"; import { addDays } from "date-fns"; import type { DateRange } from "react-day-picker"; import { CalendarDotsIcon } from "@phosphor-icons/react"; import { Calendar } from "@/components/ui/calendar"; export default function CalendarDemo() { const [date, setDate] = React.useState(() => new Date()); const [range, setRange] = React.useState(() => ({ from: new Date(), to: addDays(new Date(), 4) })); return (

Session calendar

Plenary on {date ? date.toLocaleDateString("en-GB", { dateStyle: "medium" }) : "no date"}

Recess week (Sundays are off-limits)

); } ``` ## Source (components/ui/calendar.tsx) ```tsx "use client"; import * as React from "react"; import { DayPicker, type DayButtonProps, type ChevronProps } from "react-day-picker"; import { motion } from "motion/react"; import { CaretDownIcon, CaretLeftIcon, CaretRightIcon, CaretUpIcon } from "@phosphor-icons/react"; import { springs } from "@/lib/motion"; import { cn } from "@/lib/utils"; export type CalendarProps = React.ComponentProps; const navButton = "inline-grid size-9 cursor-pointer place-items-center rounded-full bg-surface text-on-surface shadow-clay-sm transition-[box-shadow,translate] hover:-translate-y-0.5 active:translate-y-0 active:shadow-clay-pressed focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-40"; function CalendarChevron({ orientation, className }: ChevronProps) { const Icon = { left: CaretLeftIcon, right: CaretRightIcon, up: CaretUpIcon, down: CaretDownIcon }[orientation ?? "left"]; return ; } /** Round day. Selected days pop into a raised primary pill, range middles sink into primary-container. */ function CalendarDayButton({ day, modifiers, className, ...props }: DayButtonProps) { const ref = React.useRef(null); React.useEffect(() => { if (modifiers.focused) ref.current?.focus(); }, [modifiers.focused]); const solo = modifiers.selected && !modifiers.range_middle; return ( )} /> ); } export function Calendar({ className, classNames, showOutsideDays = true, components, ...props }: CalendarProps) { return ( ); } export { CalendarDayButton }; ``` # Callout > Article asides with an icon badge and a curved rail, for notes, warnings and live examples. Docs: https://ui.parlemen.dev/docs/callout ## Installation ```bash npx shadcn@latest add @parlemen/callout ``` ## Usage ```tsx "use client"; import * as React from "react"; import { motion, useMotionValue, useTransform, type MotionValue } from "motion/react"; import { ArrowCounterClockwiseIcon, PlayIcon } from "@phosphor-icons/react"; import { Button } from "@/components/ui/button"; import { Callout, CalloutDemo } from "@/components/ui/callout"; /* ---------- The live "out of sync" race from the reference ---------- */ const DURATION = 2000; /** Blocks the main thread for `ms`, to simulate a busy page. */ function busy(ms: number) { const end = performance.now() + ms; while (performance.now() < end) { /* spin */ } } function Lane({ label, children }: { label: string; children: (distance: number) => React.ReactNode }) { const { ref, distance } = useTrack(); return (

{label}

{children(distance)}

); } const ballClass = "absolute left-1 top-1 size-6 rounded-full bg-warning shadow-clay-sm"; /** Measures its track so every ball travels the same pixel distance. */ function useTrack() { const ref = React.useRef(null); const [w, setW] = React.useState(0); React.useLayoutEffect(() => { const el = ref.current; if (!el) return; const ro = new ResizeObserver(() => setW(el.clientWidth)); ro.observe(el); return () => ro.disconnect(); }, []); // Track inner width minus the ball (1.5rem) and its 0.25rem inset on both sides. return { ref, distance: Math.max(0, w - 32) }; } function LoopBall({ progress, distance }: { progress: MotionValue; distance: number }) { const x = useTransform(progress, (p) => p * distance); return ; } function Race() { const [run, setRun] = React.useState(0); // Time-based loop: always derives position from elapsed time, so it snaps back into sync. const loopP = useMotionValue(0); // Frame-stepped loop: advances a fixed amount per frame, so a frozen thread makes it fall behind. const stepP = useMotionValue(0); React.useEffect(() => { if (!run) return; const start = performance.now(); let raf = 0; let stepped = 0; let frames = 0; // Block the thread twice mid-run to show the difference. const t1 = setTimeout(() => busy(450), 500); const t2 = setTimeout(() => busy(450), 1150); const tick = (now: number) => { const t = Math.min(1, (now - start) / DURATION); loopP.set(t); frames++; stepped = Math.min(1, stepped + 1 / (DURATION / 16.7)); stepP.set(stepped); if (t < 1 || stepped < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => { cancelAnimationFrame(raf); clearTimeout(t1); clearTimeout(t2); void frames; }; }, [run, loopP, stepP]); // CSS keyframes run on the compositor and keep going even while JS is blocked. const cssStyle = run ? ({ animation: `callout-race ${DURATION}ms linear forwards` } as React.CSSProperties) : undefined; return (

{(d) => } {(d) => } {(d) => }

); } /* ---------- Demo ---------- */ export default function CalloutDemoPage() { return (

When the main thread gets busy, a requestAnimationFrame loop freezes. If it computes position from elapsed time, it snaps back into place and stays in sync with the CSS keyframes.

A loop that moves a fixed amount per frame does not. When the thread frees up, it carries on from where it stalled:

In general, animations should stay in sync. If something is meant to take 500ms, it should be done after 500ms, smooth or not.

Animation libraries have to be downloaded and parsed before they run. Motion is not tiny, and that matters most for things that animate in the first second of a visit.

Most motion here responds to the user, who rarely acts that fast. Scroll-driven effects are the exception.

Respect prefers-reduced-motion. Parlemen's Providers already set MotionConfig reducedMotion="user".

All 56 components are in the registry.

Button's old variant="blue" is gone. Use color="secondary".

Rapat paripurna, tapi santai.

Parlemen house motto

); } ``` ## Source (components/ui/callout.tsx) ```tsx "use client"; import * as React from "react"; import { motion } from "motion/react"; import { cva, type VariantProps } from "class-variance-authority"; import { CheckCircleIcon, InfoIcon, LightbulbIcon, NotePencilIcon, QuotesIcon, WarningIcon, WarningOctagonIcon, type Icon, } from "@phosphor-icons/react"; import { springs } from "@/lib/motion"; import { cn } from "@/lib/utils"; /* * Callout, after Josh W. Comeau's asides: an icon badge perched on the top-left corner, with a rail that * curves out of the badge and runs down the left edge of the panel. Rebuilt with Parlemen roles and clay. * * Anatomy (all positioned against the panel): * badge round clay disc with the icon, centred on the panel's top-left corner * curve SVG path from the bottom of the badge bending into the rail (stroke = role colour) * rail the vertical bar down the left edge, same colour */ type Tone = "info" | "warning" | "success" | "danger" | "tip" | "note" | "quote"; const tones: Record = { info: { icon: InfoIcon, rail: "var(--info)", panel: "bg-info-container/45", badge: "bg-info text-on-info", title: "text-on-info-container" }, warning: { icon: WarningIcon, rail: "var(--warning)", panel: "bg-warning-container/55", badge: "bg-warning text-on-warning", title: "text-on-warning-container" }, success: { icon: CheckCircleIcon, rail: "var(--success)", panel: "bg-success-container/50", badge: "bg-success text-on-success", title: "text-on-success-container" }, danger: { icon: WarningOctagonIcon, rail: "var(--danger)", panel: "bg-danger-container/50", badge: "bg-danger text-on-danger", title: "text-on-danger-container" }, tip: { icon: LightbulbIcon, rail: "var(--tertiary)", panel: "bg-tertiary-container/45", badge: "bg-tertiary text-on-tertiary", title: "text-on-tertiary-container" }, note: { icon: NotePencilIcon, rail: "var(--primary)", panel: "bg-primary-container/45", badge: "bg-primary text-on-primary", title: "text-on-primary-container" }, quote: { icon: QuotesIcon, rail: "var(--on-surface-muted)", panel: "bg-surface", badge: "bg-surface-inverse text-on-surface-inverse", title: "text-on-surface" }, }; const calloutVariants = cva("relative", { variants: { tone: Object.fromEntries(Object.keys(tones).map((t) => [t, ""])) as Record, }, defaultVariants: { tone: "info" }, }); type CalloutProps = Omit, "title"> & VariantProps & { title?: React.ReactNode; /** Override the tone's icon. Pass `null` to hide the badge and rail curve. */ icon?: Icon | null; }; const BADGE = 44; // px, badge diameter const RAIL = 4; // px, rail thickness export function Callout({ tone = "info", title, icon, className, children, ...p }: CalloutProps) { const t = tones[tone ?? "info"]; const Ico = icon === null ? null : (icon ?? t.icon); const titleId = React.useId(); return ( )} > {/* Panel */}

{title && (

{title}

)}

{children}

{Ico && ( <> {/* Rail: runs down the left edge below the curve. Draws in on reveal. */} {/* Curve: leaves the bottom of the badge and bends into the rail, like a hook. */} {/* Badge: sits on the corner, ringed by the page colour so it reads as cut out of the panel. */} )} ); } /** A framed live example inside a callout, like the bouncing-ball demo in the reference. */ export function CalloutDemo({ className, ...p }: React.HTMLAttributes) { return

; } export { calloutVariants }; export type { Tone as CalloutTone }; ``` # Card > A soft raised surface for grouping content. Docs: https://ui.parlemen.dev/docs/card ## Installation ```bash npx shadcn@latest add @parlemen/card ``` ## Usage ```tsx import { ArrowRightIcon, ChartLineUpIcon, EnvelopeSimpleIcon, PaperPlaneTiltIcon } from "@phosphor-icons/react/dist/ssr"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; export default function CardDemo() { return (

Join the waitlist We will ping you when it ships.

Kehadiran sidang 92%

); } ``` ## Source (components/ui/card.tsx) ```tsx import * as React from "react"; import { cn } from "@/lib/utils"; export function Card({ className, ...p }: React.HTMLAttributes) { return

; } export function CardHeader({ className, ...p }: React.HTMLAttributes) { return

; } export function CardTitle({ className, ...p }: React.HTMLAttributes) { return

; } export function CardDescription({ className, ...p }: React.HTMLAttributes) { return
; } export function CardContent({ className, ...p }: React.HTMLAttributes) { return
; } export function CardFooter({ className, ...p }: React.HTMLAttributes) { return
; } ``` # Carousel > Swipeable slides with clay arrows and a sliding dot pill. Docs: https://ui.parlemen.dev/docs/carousel ## Installation ```bash npx shadcn@latest add @parlemen/carousel ``` ## Usage ```tsx "use client"; import * as React from "react"; import Image from "next/image"; import { ArrowUpRightIcon } from "@phosphor-icons/react"; import { motion } from "motion/react"; import { Badge } from "@/components/ui/badge"; import { Carousel, CarouselContent, CarouselDots, CarouselItem, CarouselNext, CarouselPrevious, useCarousel } from "@/components/ui/carousel"; import { springs } from "@/lib/motion"; /* Real work from the Parlemen company site (web/public/assets), copied into public/showcase. */ const products = [ { img: "/showcase/prod-kerb.webp", name: "KERB", chain: "Robinhood Chain", desc: "Stock-token swaps with a fee that follows market hours." }, { img: "/showcase/prod-subfloor.webp", name: "SUBFLOOR", chain: "Base · ETHOnline", desc: "An AI agent trades your portfolio, never below your floor." }, { img: "/showcase/prod-starraid.webp", name: "Star Raid", chain: "Monad", desc: "A co-op boss fight where holders buy out a token wall together." }, { img: "/showcase/prod-grimswap-v2.webp", name: "GrimSwap", chain: "Unichain", desc: "Private swaps on Uniswap v4 with zero-knowledge proofs." }, { img: "/showcase/prod-zero-v2.webp", name: "Zero", chain: "ForU AI", desc: "Insurance that fits your situation." }, ]; const fraksi = [ { img: "/showcase/fraksi-software.webp", name: "Fraksi Software" }, { img: "/showcase/fraksi-film.webp", name: "Fraksi Film" }, { img: "/showcase/fraksi-roblox.webp", name: "Fraksi Roblox" }, { img: "/showcase/oku.webp", name: "Oku" }, { img: "/showcase/prod-zero-v2.webp", name: "Zero" }, ]; /** A slide that zooms gently into focus when it becomes the selected one. / function ProductSlide({ index, item }: { index: number; item: (typeof products)[number] }) { const { selected } = useCarousel(); const active = selected === index; return (

{item.name}
{item.chain}

{item.desc}

); } export default function CarouselDemo() { return (
{products.map((p, i) => ( ))} {/ Multiple per view: a strip of thumbnails. /} {fraksi.map((f) => (

{f.name}

))}
); } ``` ## Source (components/ui/carousel.tsx) ```tsx "use client"; import as React from "react"; import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react"; import { motion } from "motion/react"; import { ArrowLeftIcon, ArrowRightIcon } from "@phosphor-icons/react"; import { Button } from "@/components/ui/button"; import { springs } from "@/lib/motion"; import { cn } from "@/lib/utils"; type CarouselApi = UseEmblaCarouselType[1]; type Options = Parameters[0]; type Plugins = Parameters[1]; type CarouselProps = { opts?: Options; plugins?: Plugins; orientation?: "horizontal" | "vertical"; setApi?: (api: CarouselApi) => void; }; type Ctx = { carouselRef: ReturnType[0]; api: CarouselApi; scrollPrev: () => void; scrollNext: () => void; canScrollPrev: boolean; canScrollNext: boolean; selected: number; snaps: number[]; } & CarouselProps; const CarouselContext = React.createContext(null); export function useCarousel() { const c = React.useContext(CarouselContext); if (!c) throw new Error("useCarousel must be used within a "); return c; } export function Carousel({ orientation = "horizontal", opts, setApi, plugins, className, children, ...p }: React.HTMLAttributes & CarouselProps) { const [carouselRef, api] = useEmblaCarousel({ ...opts, axis: orientation === "horizontal" ? "x" : "y" }, plugins); const [state, setState] = React.useState({ prev: false, next: false, selected: 0, snaps: [] as number[] }); React.useEffect(() => { if (!api) return; setApi?.(api); const sync = (a: NonNullable) => setState({ prev: a.canScrollPrev(), next: a.canScrollNext(), selected: a.selectedScrollSnap(), snaps: a.scrollSnapList() }); sync(api); api.on("reInit", sync).on("select", sync); return () => { api.off("reInit", sync).off("select", sync); }; }, [api, setApi]); const scrollPrev = React.useCallback(() => api?.scrollPrev(), [api]); const scrollNext = React.useCallback(() => api?.scrollNext(), [api]); return (
{ if (e.key === "ArrowLeft") { e.preventDefault(); scrollPrev(); } else if (e.key === "ArrowRight") { e.preventDefault(); scrollNext(); } }} className={cn("relative", className)} role="region" aria-roledescription="carousel" {...p} > {children}
); } export function CarouselContent({ className, ...p }: React.HTMLAttributes) { const { carouselRef, orientation } = useCarousel(); return ( // padding gives the clay shadows room inside the clipped viewport

); } export function CarouselItem({ className, ...p }: React.HTMLAttributes) { const { orientation } = useCarousel(); return (
); } export function CarouselPrevious({ className, ...p }: React.ComponentProps) { const { orientation, scrollPrev, canScrollPrev } = useCarousel(); return ( ); } export function CarouselNext({ className, ...p }: React.ComponentProps) { const { orientation, scrollNext, canScrollNext } = useCarousel(); return ( ); } /** Dot indicators with a sliding active pill. / export function CarouselDots({ className }: { className?: string }) { const { api, snaps, selected } = useCarousel(); const id = React.useId(); return (
{snaps.map((_, i) => ( ))}
); } export type { CarouselApi }; ``` # Chart > Recharts wrapped with semantic colours, clay tooltips and pill legends. Docs: https://ui.parlemen.dev/docs/chart ## Installation ```bash npx shadcn@latest add @parlemen/chart ``` ## Usage ```tsx "use client"; import as React from "react"; import { Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, Label, Line, LineChart, Pie, PieChart, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart, RadialBar, RadialBarChart, XAxis, YAxis, } from "recharts"; import { ArrowUpRightIcon } from "@phosphor-icons/react"; import { Badge } from "@/components/ui/badge"; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"; import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, type ChartConfig } from "@/components/ui/chart"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; /* ---------- Data ---------- / const activity = [ { month: "Jan", bills: 18, petitions: 42, hearings: 12 }, { month: "Feb", bills: 24, petitions: 55, hearings: 19 }, { month: "Mar", bills: 31, petitions: 48, hearings: 15 }, { month: "Apr", bills: 22, petitions: 71, hearings: 28 }, { month: "May", bills: 37, petitions: 66, hearings: 24 }, { month: "Jun", bills: 44, petitions: 89, hearings: 33 }, ]; const activityConfig = { petitions: { label: "Petitions", color: "var(--secondary)" }, bills: { label: "Bills", color: "var(--primary)" }, hearings: { label: "Hearings", color: "var(--tertiary)" }, } satisfies ChartConfig; const votes = [ { commission: "I", yes: 62, no: 18, abstain: 9 }, { commission: "II", yes: 36, no: 44, abstain: 12 }, { commission: "V", yes: 71, no: 11, abstain: 6 }, { commission: "VII", yes: 33, no: 47, abstain: 10 }, { commission: "X", yes: 55, no: 22, abstain: 14 }, ]; const votesConfig = { yes: { label: "Yes", color: "var(--primary)" }, no: { label: "No", color: "var(--tertiary)" }, abstain: { label: "Abstain", color: "var(--accent)" }, } satisfies ChartConfig; const seats = [ { faction: "hijau", seats: 128, fill: "var(--color-hijau)" }, { faction: "biru", seats: 94, fill: "var(--color-biru)" }, { faction: "ungu", seats: 71, fill: "var(--color-ungu)" }, { faction: "kuning", seats: 52, fill: "var(--color-kuning)" }, { faction: "lain", seats: 30, fill: "var(--color-lain)" }, ]; const seatsConfig = { seats: { label: "Seats" }, hijau: { label: "Fraksi Hijau", color: "var(--success)" }, biru: { label: "Fraksi Biru", color: "var(--secondary)" }, ungu: { label: "Fraksi Ungu", color: "var(--tertiary)" }, kuning: { label: "Fraksi Kuning", color: "var(--warning)" }, lain: { label: "Others", color: "var(--primary)" }, } satisfies ChartConfig; const goals = [ { goal: "bills", value: 78, fill: "var(--color-bills)" }, { goal: "hearings", value: 62, fill: "var(--color-hearings)" }, { goal: "petitions", value: 91, fill: "var(--color-petitions)" }, ]; const goalsConfig = { value: { label: "Progress" }, bills: { label: "Bills passed", color: "var(--primary)" }, hearings: { label: "Hearings held", color: "var(--tertiary)" }, petitions: { label: "Petitions answered", color: "var(--secondary)" }, } satisfies ChartConfig; const skills = [ { area: "Economy", fraksiHijau: 82, fraksiBiru: 64 }, { area: "Health", fraksiHijau: 70, fraksiBiru: 88 }, { area: "Education", fraksiHijau: 91, fraksiBiru: 72 }, { area: "Environment", fraksiHijau: 95, fraksiBiru: 48 }, { area: "Defense", fraksiHijau: 40, fraksiBiru: 77 }, { area: "Tech", fraksiHijau: 66, fraksiBiru: 81 }, ]; const skillsConfig = { fraksiHijau: { label: "Fraksi Hijau", color: "var(--success)" }, fraksiBiru: { label: "Fraksi Biru", color: "var(--secondary)" }, } satisfies ChartConfig; / ---------- Shared bits ---------- / const axis = { tickLine: false, axisLine: false } as const; function ChartCard({ title, description, children, footer, action }: { title: string; description: string; children: React.ReactNode; footer?: React.ReactNode; action?: React.ReactNode }) { return (
{title} {description}
{action} {children} {footer && {footer}} ); } function Trend({ children }: { children: React.ReactNode }) { return ( <> {children} vs last session ); } / ---------- Area ---------- / function AreaCharts() { const [mode, setMode] = React.useState<"overlap" | "stacked" | "expanded">("overlap"); const stack = mode === "overlap" ? undefined : "a"; return ( v && setMode(v as typeof mode)} aria-label="Area layout"> Overlap Stacked 100% } footer={+18.4%} > {(Object.keys(activityConfig) as (keyof typeof activityConfig)[]).map((k) => ( ))} `${Math.round(v 100)}%` : undefined} /> } /> {(["petitions", "hearings", "bills"] as const).map((k) => ( ))} } /> ); } /* ---------- Bar ---------- / function BarCharts() { return (
+6 yes votes}> `K-${v}`} /> `Komisi ${l}`} />} /> {(["yes", "no", "abstain"] as const).map((k) => ( ))} } /> `K-${v}`} /> `Komisi ${l}`} />} /> b.yes - a.yes)} layout="vertical" margin={{ left: 0, right: 24 }}> `K-${v}`} /> } /> ({ commission: v.commission, net: v.yes - v.no }))} margin={{ left: -16, right: 8, top: 8 }}> `K-${v}`} /> `Komisi ${l}`} />} /> {votes.map((v) => ( = 0 ? "var(--success)" : "var(--danger)"} /> ))}
); } / ---------- Line ---------- / function LineCharts() { const [series, setSeries] = React.useState<(keyof typeof activityConfig)[]>(["petitions", "bills"]); return ( v.length && setSeries(v as typeof series)} aria-label="Series"> {(Object.keys(activityConfig) as (keyof typeof activityConfig)[]).map((k) => ( {activityConfig[k].label} ))} } > } /> {series.map((k) => ( ))} ); } / ---------- Pie ---------- */ function PieCharts() { const total = seats.reduce((s, d) => s + d.seats, 0); const [active, setActive] = React.useState("hijau"); const current = seats.find((s) => s.faction === active)!; return (
} /> viewBox && "cx" in viewBox ? ( {total} seats ) : null } /> } /> v && setActive(v)} aria-label="Faction" className="flex-wrap"> {seats.slice(0, 3).map((s) => ( {s.faction} ))} } footer={ {seatsConfig[current.faction as keyof typeof seatsConfig].label} holds **{Math.round((current.seats / total) * 100)}%** of the floor. } > } /> {seats.map((s) => ( ))}
); } /* ---------- Radial ---------- / function RadialCharts() { return (
} /> } /> +4 members}> viewBox && "cx" in viewBox ? ( 412 of 575 members ) : null } />
); } / ---------- Radar ---------- / function RadarCharts() { return ( } /> } /> ); } / ---------- Gallery ---------- / const kinds = [ { value: "area", label: "Area", Chart: AreaCharts }, { value: "bar", label: "Bar", Chart: BarCharts }, { value: "line", label: "Line", Chart: LineCharts }, { value: "pie", label: "Pie", Chart: PieCharts }, { value: "radial", label: "Radial", Chart: RadialCharts }, { value: "radar", label: "Radar", Chart: RadarCharts }, ]; export default function ChartDemo() { return (
{kinds.map((k) => ( {k.label} ))}
{kinds.map(({ value, Chart }) => ( ))} ); } ``` ## Source (components/ui/chart.tsx) ```tsx "use client"; import as React from "react"; import * as RechartsPrimitive from "recharts"; import { cn } from "@/lib/utils"; /** * shadcn-compatible chart kit. Each series gets a colour in `config`; ChartContainer * turns that into `--color-` CSS vars scoped to this chart, so you write * `fill="var(--color-votes)"`. Use semantic roles (var(--primary) ...) so .dark just works. */ export type ChartConfig = Record; const ChartContext = React.createContext<{ config: ChartConfig } | null>(null); export function useChart() { const ctx = React.useContext(ChartContext); if (!ctx) throw new Error("useChart must be used within a "); return ctx; } export function ChartContainer({ id, className, children, config, style, ...props }: React.ComponentProps<"div"> & { config: ChartConfig; children: React.ComponentProps["children"]; }) { const uid = React.useId(); const chartId = `chart-${id ?? uid.replace(/:/g, "")}`; const vars = Object.fromEntries( Object.entries(config).flatMap(([k, v]) => (v.color ? [[`--color-${k}`, v.color]] : [])) ) as React.CSSProperties; return (
{children}
); } export const ChartTooltip = RechartsPrimitive.Tooltip; type TooltipItem = { name?: string | number; value?: number | string | Array; dataKey?: string | number | ((obj: unknown) => unknown); color?: string; fill?: string; payload?: Record & { fill?: string }; }; function itemConfig(config: ChartConfig, item: TooltipItem, key?: string) { const k = key ?? String(item.dataKey ?? item.name ?? "value"); return config[k] ?? config[String(item.name)]; } /** Raised clay card with a colour pip per series. */ export function ChartTooltipContent({ active, payload, label, className, hideLabel = false, hideIndicator = false, indicator = "dot", labelFormatter, formatter, nameKey, }: { active?: boolean; payload?: ReadonlyArray; label?: React.ReactNode; className?: string; hideLabel?: boolean; hideIndicator?: boolean; indicator?: "dot" | "line"; labelFormatter?: (label: React.ReactNode, payload: ReadonlyArray) => React.ReactNode; formatter?: (value: TooltipItem["value"], name: string, item: TooltipItem) => React.ReactNode; nameKey?: string; }) { const { config } = useChart(); if (!active || !payload?.length) return null; const labelNode = hideLabel ? null : (
{labelFormatter ? labelFormatter(label, payload) : (config[String(label)]?.label ?? label)}
); return (
{labelNode}
{payload.map((item, i) => { const conf = itemConfig(config, item, nameKey ? String(item.payload?.[nameKey]) : undefined); const color = item.payload?.fill ?? item.color ?? item.fill; const name = String(item.name ?? item.dataKey ?? ""); return (
{!hideIndicator && ( )} {formatter ? ( formatter(item.value, name, item) ) : ( <> {conf?.label ?? name} {typeof item.value === "number" ? item.value.toLocaleString() : String(item.value ?? "")} )}
); })}

); } export const ChartLegend = RechartsPrimitive.Legend; /** Pill legend chips. / export function ChartLegendContent({ className, payload, verticalAlign = "bottom", hideIcon = false, nameKey, }: { className?: string; payload?: ReadonlyArray<{ value?: string | number; dataKey?: unknown; color?: string; payload?: Record }>; verticalAlign?: "top" | "middle" | "bottom"; hideIcon?: boolean; nameKey?: string; }) { const { config } = useChart(); if (!payload?.length) return null; return (
{payload.map((item, i) => { // With nameKey (pie, radial) each legend item names a row, so read the key from that row's data. const key = nameKey ? String(item.payload?.[nameKey] ?? item.value ?? i) : String(item.dataKey ?? item.value ?? "value"); const conf = config[key]; const Icon = conf?.icon; return ( {Icon && !hideIcon ? : } {conf?.label ?? String(item.value ?? key)} ); })}
); } export { RechartsPrimitive }; ``` # Checkbox > Sunken box that fills and draws its check in. Docs: https://ui.parlemen.dev/docs/checkbox ## Installation ```bash npx shadcn@latest add @parlemen/checkbox ``` ## Usage ```tsx "use client"; import as React from "react"; import { MoonIcon, SparkleIcon, CubeIcon, GavelIcon, type Icon } from "@phosphor-icons/react"; import { Checkbox } from "@/components/ui/checkbox"; import { Label } from "@/components/ui/label"; const items = ["Dark mode", "Motion springs", "Clay shadows"]; const icons: Record = { "Dark mode": MoonIcon, "Motion springs": SparkleIcon, "Clay shadows": CubeIcon }; export default function CheckboxDemo() { const [picked, setPicked] = React.useState(["Motion springs"]); const all = picked.length === items.length ? true : picked.length ? "indeterminate" : false; return (

setPicked(v === true ? items : [])} /> Setujui semua RUU

{items.map((it) => { const I = icons[it]; return (
setPicked((p) => (v ? [...p, it] : p.filter((x) => x !== it)))} /> {it}
); })}

Sudah diketok palu

); } ``` ## Source (components/ui/checkbox.tsx) ```tsx "use client"; import * as React from "react"; import * as C from "@radix-ui/react-checkbox"; import { AnimatePresence, motion } from "motion/react"; import { CheckIcon, MinusIcon } from "@phosphor-icons/react"; import { springs } from "@/lib/motion"; import { cn } from "@/lib/utils"; /** Sunken box that fills with primary and pops its Phosphor check in. Supports `checked="indeterminate"`. / export function Checkbox({ className, checked, defaultChecked, onCheckedChange, ...p }: React.ComponentProps) { const [inner, setInner] = React.useState(defaultChecked ?? false); const state = checked ?? inner; const Mark = state === "indeterminate" ? MinusIcon : CheckIcon; return ( { setInner(v); onCheckedChange?.(v); }} className={cn( "peer grid size-6 shrink-0 cursor-pointer place-items-center rounded-[0.55rem] bg-surface-sunken text-on-primary shadow-well transition-[background-color,box-shadow] duration-200 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-4 aria-invalid:ring-danger/40 data-[state=checked]:bg-primary data-[state=checked]:shadow-clay-sm data-[state=indeterminate]:bg-primary data-[state=indeterminate]:shadow-clay-sm", className )} {...p} > {state && ( )} ); } ``` # Collapsible > Show and hide a section with a gentle height spring. Docs: https://ui.parlemen.dev/docs/collapsible ## Installation ```bash npx shadcn@latest add @parlemen/collapsible ``` ## Usage ```tsx "use client"; import as React from "react"; import { CaretUpDownIcon, FileTextIcon } from "@phosphor-icons/react"; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"; import { Button } from "@/components/ui/button"; const bills = ["RUU Perlindungan Data", "RUU Energi Baru", "RUU Masyarakat Adat"]; export default function CollapsibleDemo() { const [open, setOpen] = React.useState(false); return (

3 bills you follow

{bills[0]}
{bills.slice(1).map((b) => (
{b}
))} ); } ``` ## Source (components/ui/collapsible.tsx) ```tsx "use client"; import * as React from "react"; import * as C from "@radix-ui/react-collapsible"; import { AnimatePresence, motion } from "motion/react"; import { springs } from "@/lib/motion"; import { cn } from "@/lib/utils"; const Ctx = React.createContext(false); /** Same API as Radix Collapsible. Tracks open state so content can animate its height. / export function Collapsible({ open, defaultOpen, onOpenChange, ...p }: React.ComponentProps) { const [inner, setInner] = React.useState(defaultOpen ?? false); const current = open ?? inner; return ( { setInner(v); onOpenChange?.(v); }} {...p} /> ); } export const CollapsibleTrigger = C.Trigger; export function CollapsibleContent({ className, children, ...p }: React.ComponentProps) { const open = React.useContext(Ctx); return ( {open && (
{children}
)} ); } ``` # Command > Searchable command palette with a sliding selection pill. Docs: https://ui.parlemen.dev/docs/command ## Installation ```bash npx shadcn@latest add @parlemen/command ``` ## Usage ```tsx "use client"; import as React from "react"; import { CalendarBlankIcon, GavelIcon, GearIcon, SmileyIcon, UserIcon, UsersThreeIcon } from "@phosphor-icons/react"; import { Button } from "@/components/ui/button"; import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, } from "@/components/ui/command"; function Items() { return ( <> Tidak ada yang cocok. Jadwal sidang Voting RUU Cari emoji Profil ⌘P Fraksi ⌘F Pengaturan ⌘S ); } export default function CommandDemo() { const [open, setOpen] = React.useState(false); React.useEffect(() => { const down = (e: KeyboardEvent) => { if (e.key.toLowerCase() === "k" && (e.metaKey || e.ctrlKey)) { e.preventDefault(); setOpen((o) => !o); } }; document.addEventListener("keydown", down); return () => document.removeEventListener("keydown", down); }, []); return (

); } ``` ## Source (components/ui/command.tsx) ```tsx "use client"; import * as React from "react"; import { Command as C } from "cmdk"; import { motion } from "motion/react"; import { MagnifyingGlassIcon } from "@phosphor-icons/react"; import { springs } from "@/lib/motion"; import { cn } from "@/lib/utils"; import { Dialog, DialogContent, DialogDescription, DialogTitle } from "@/components/ui/dialog"; const PillCtx = React.createContext("cmd"); export function Command({ className, ...p }: React.ComponentProps) { const id = React.useId(); return ( ); } export function CommandDialog({ title = "Command palette", description = "Search for a command to run", children, ...p }: React.ComponentProps & { title?: string; description?: string }) { return ( {title} {description} {children} ); } export function CommandInput({ className, ...p }: React.ComponentProps) { return (

); } export function CommandList({ className, ...p }: React.ComponentProps) { return ; } export function CommandEmpty({ className, ...p }: React.ComponentProps) { return ; } export function CommandGroup({ className, ...p }: React.ComponentProps) { return ( ); } export function CommandSeparator({ className, ...p }: React.ComponentProps) { return ; } /** Item. The selected one gets a pill that slides between items (watches cmdk's data-selected). / export function CommandItem({ className, children, ...p }: React.ComponentProps) { const id = React.useContext(PillCtx); const ref = React.useRef(null); const [selected, setSelected] = React.useState(false); React.useEffect(() => { const el = ref.current; if (!el) return; const sync = () => setSelected(el.getAttribute("data-selected") === "true"); sync(); const mo = new MutationObserver(sync); mo.observe(el, { attributes: true, attributeFilter: ["data-selected"] }); return () => mo.disconnect(); }, []); return ( {selected && ( )} {children} ); } export function CommandShortcut({ className, ...p }: React.ComponentProps<"span">) { return ; } ``` # Context Menu > Right-click menu with the same clay feel as the dropdown. Docs: https://ui.parlemen.dev/docs/context-menu ## Installation ```bash npx shadcn@latest add @parlemen/context-menu ``` ## Usage ```tsx "use client"; import as React from "react"; import { ArrowClockwiseIcon, ArrowLeftIcon, ArrowRightIcon, CopyIcon, LinkIcon, MarkdownLogoIcon } from "@phosphor-icons/react"; import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, } from "@/components/ui/context-menu"; export default function ContextMenuDemo() { const [pinned, setPinned] = React.useState(true); const [size, setSize] = React.useState("sedang"); return ( Klik kanan di sini Kembali ⌘[ Maju ⌘] Muat ulang ⌘R Salin sebagai Tautan Markdown Sematkan agenda Ukuran teks Kecil Sedang Besar ); } ``` ## Source (components/ui/context-menu.tsx) ```tsx "use client"; import * as React from "react"; import * as M from "@radix-ui/react-context-menu"; import { AnimatePresence, motion } from "motion/react"; import { CaretRightIcon, CheckIcon, CircleIcon } from "@phosphor-icons/react"; import { springs } from "@/lib/motion"; import { cn } from "@/lib/utils"; const MenuCtx = React.createContext(false); const panel = "z-50 min-w-48 overflow-hidden rounded-xl bg-surface p-1.5 text-on-surface shadow-clay outline-none"; const item = "relative flex cursor-pointer select-none items-center gap-2 rounded-full px-3 py-2 text-sm font-semibold outline-none transition-colors data-[highlighted]:bg-surface-sunken data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0"; /** Same API as Radix ContextMenu. Tracks open state so content can animate out. / export function ContextMenu({ onOpenChange, ...p }: React.ComponentProps) { const [current, setInner] = React.useState(false); return ( { setInner(v); onOpenChange?.(v); }} {...p} /> ); } export const ContextMenuTrigger = M.Trigger; export const ContextMenuGroup = M.Group; export const ContextMenuPortal = M.Portal; export const ContextMenuSub = M.Sub; export const ContextMenuRadioGroup = M.RadioGroup; export function ContextMenuContent({ className, children, ...p }: React.ComponentProps) { const open = React.useContext(MenuCtx); return ( {open && ( {children} )} ); } export function ContextMenuSubContent({ className, children, ...p }: React.ComponentProps) { return ( {children} ); } export function ContextMenuItem({ className, inset, variant, ...p }: React.ComponentProps & { inset?: boolean; variant?: "default" | "destructive" }) { return ( ); } export function ContextMenuSubTrigger({ className, inset, children, ...p }: React.ComponentProps & { inset?: boolean }) { return ( {children} ); } export function ContextMenuCheckboxItem({ className, children, ...p }: React.ComponentProps) { return ( {children} ); } export function ContextMenuRadioItem({ className, children, ...p }: React.ComponentProps) { return ( {children} ); } export function ContextMenuLabel({ className, inset, ...p }: React.ComponentProps & { inset?: boolean }) { return ; } export function ContextMenuSeparator({ className, ...p }: React.ComponentProps) { return ; } export function ContextMenuShortcut({ className, ...p }: React.ComponentProps<"span">) { return ; } ``` # Data Table > Sortable, searchable, selectable table built on TanStack Table. Docs: https://ui.parlemen.dev/docs/data-table ## Installation ```bash npx shadcn@latest add @parlemen/data-table ``` ## Usage ```tsx "use client"; import as React from "react"; import { columnFilteringFeature, createColumnHelper, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, filterFn_equalsString, filterFn_includesString, globalFilteringFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_basic, tableFeatures, useTable, } from "@tanstack/react-table"; import { MagnifyingGlassIcon } from "@phosphor-icons/react"; import { DataTableColumnHeader, DataTablePagination } from "@/components/ui/data-table"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Badge } from "@/components/ui/badge"; import { Checkbox } from "@/components/ui/checkbox"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"; type Status = "paid" | "pending" | "overdue" | "refunded"; type Color = "primary" | "secondary" | "tertiary" | "accent" | "success" | "warning" | "danger" | "info"; type Invoice = { id: string; member: string; email: string; photo?: string; color: Color; plan: string; amount: number; status: Status }; const statusTone = { paid: "success", pending: "warning", overdue: "danger", refunded: "info" } as const; const data: Invoice[] = [ { id: "INV-1044", member: "Rina Wulandari", email: "rina@parlemen.dev", photo: "/avatars/w1.jpg", color: "primary", plan: "Solo", amount: 99000, status: "paid" }, { id: "INV-1046", member: "Budi Santoso", email: "budi@parlemen.dev", photo: "/avatars/m1.jpg", color: "secondary", plan: "Solo", amount: 99000, status: "refunded" }, { id: "INV-1042", member: "Fraksi Hijau", email: "bendahara@fraksihijau.id", color: "success", plan: "Caucus Pro", amount: 2400000, status: "paid" }, { id: "INV-1049", member: "Dewi Lestari", email: "dewi@parlemen.dev", photo: "/avatars/w3.jpg", color: "tertiary", plan: "Solo", amount: 99000, status: "paid" }, { id: "INV-1052", member: "Ahmad Fauzi", email: "ahmad@parlemen.dev", photo: "/avatars/m2.jpg", color: "accent", plan: "Solo", amount: 99000, status: "pending" }, { id: "INV-1043", member: "Komisi VII Office", email: "sekre@komisi7.go.id", color: "info", plan: "Committee", amount: 1150000, status: "pending" }, { id: "INV-1054", member: "Sari Kusuma", email: "sari@parlemen.dev", photo: "/avatars/w4.jpg", color: "danger", plan: "Solo", amount: 99000, status: "overdue" }, { id: "INV-1055", member: "Raka Hidayat", email: "raka@parlemen.dev", photo: "/avatars/m4.jpg", color: "success", plan: "Media", amount: 780000, status: "paid" }, { id: "INV-1045", member: "Yayasan Suara Desa", email: "halo@suaradesa.org", color: "accent", plan: "NGO", amount: 450000, status: "overdue" }, { id: "INV-1047", member: "Press Gallery", email: "desk@pressgallery.id", color: "tertiary", plan: "Media", amount: 780000, status: "paid" }, { id: "INV-1048", member: "Fraksi Biru", email: "keuangan@fraksibiru.id", color: "secondary", plan: "Caucus Pro", amount: 2400000, status: "pending" }, { id: "INV-1050", member: "Lembaga Riset Kebijakan", email: "riset@lrk.or.id", color: "warning", plan: "NGO", amount: 450000, status: "paid" }, { id: "INV-1051", member: "Komisi II Office", email: "sekre@komisi2.go.id", color: "info", plan: "Committee", amount: 1150000, status: "overdue" }, { id: "INV-1053", member: "Civic Tech Jakarta", email: "hi@civictech.id", color: "primary", plan: "NGO", amount: 450000, status: "paid" }, ]; const initials = (name: string) => name.split(" ").filter(Boolean).slice(0, 2).map((w) => w[0]).join("").toUpperCase(); const statuses = ["all", "paid", "pending", "overdue", "refunded"] as const; const rupiah = new Intl.NumberFormat("id-ID", { style: "currency", currency: "IDR", notation: "compact", maximumFractionDigits: 2 }); const features = tableFeatures({ rowSortingFeature, columnFilteringFeature, globalFilteringFeature, rowSelectionFeature, rowPaginationFeature, filteredRowModel: createFilteredRowModel(), sortedRowModel: createSortedRowModel(), paginatedRowModel: createPaginatedRowModel(), filterFns: { includesString: filterFn_includesString, equalsString: filterFn_equalsString }, sortFns: { alphanumeric: sortFn_alphanumeric, basic: sortFn_basic }, }); const helper = createColumnHelper(); const columns = helper.columns([ helper.display({ id: "select", header: ({ table }) => ( table.toggleAllPageRowsSelected(v === true)} /> ), cell: ({ row }) => row.toggleSelected(v === true)} />, enableSorting: false, enableGlobalFilter: false, }), // The value carries id + email so the global search finds them; it still sorts by name first. helper.accessor((r) => `${r.member} ${r.id} ${r.email}`, { id: "member", header: ({ column }) => Member, cell: (c) => { const m = c.row.original; return (
{m.photo && } {initials(m.member)}

{m.member}

{m.id} · {m.email}

); }, }), helper.accessor("plan", { header: "Plan", cell: (c) => {c.getValue()} }), helper.accessor("status", { filterFn: "equalsString", header: ({ column }) => Status, cell: (c) => ( {c.getValue()} ), }), helper.accessor("amount", { header: ({ column }) => ( Amount ), cell: (c) =>
{rupiah.format(c.getValue())}
, enableGlobalFilter: false, }), ]); export default function DataTableDemo() { const table = useTable({ features, columns, data, globalFilterFn: "includesString", initialState: { pagination: { pageIndex: 0, pageSize: 5 } }, }); const state = table.state; const selected = Object.keys(state.rowSelection ?? {}).length; const filtered = table.getFilteredRowModel().rows.length; const rows = table.getRowModel().rows; const status = (table.getColumn("status")?.getFilterValue() as string | undefined) ?? "all"; // Count per status among rows matching the search, ignoring the status filter itself. const query = String(state.globalFilter ?? "").toLowerCase(); const searched = data.filter((d) => !query || [d.id, d.member, d.email, d.plan, d.status].some((v) => v.toLowerCase().includes(query))); const countFor = (s: (typeof statuses)[number]) => (s === "all" ? searched.length : searched.filter((d) => d.status === s).length); return (

table.setGlobalFilter(e.target.value)} aria-label="Search invoices" /> {/* Status chips filter the status column. Counts follow the search box. /}
{ if (!v) return; table.getColumn("status")?.setFilterValue(v === "all" ? undefined : v); table.setPageIndex(0); }} aria-label="Filter by status" > {statuses.map((s) => ( {s} {countFor(s)} ))}

{table.getHeaderGroups().map((group) => ( {group.headers.map((header) => ( {header.isPlaceholder ? null : } ))} ))} {rows.length ? ( rows.map((row) => ( {row.getAllCells().map((cell) => ( ))} )) ) : ( No invoices match that search. )}

table.previousPage()} onNext={() => table.nextPage()} />
); } ``` ## Source (components/ui/data-table.tsx) ```tsx "use client"; import as React from "react"; import { motion } from "motion/react"; import type { CellData, Column, RowData, TableFeatures } from "@tanstack/react-table"; import { CaretLeftIcon, CaretRightIcon, CaretUpIcon } from "@phosphor-icons/react"; import { springs } from "@/lib/motion"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; /** * Helpers for building data tables with @tanstack/react-table on top of components/ui/table. * Like shadcn, the table itself lives in your page: these are the reusable bits. */ /** Sortable header button. The caret flips with a bouncy spring when direction changes. */ export function DataTableColumnHeader({ column, children, align = "left", }: { column: Column; children: React.ReactNode; align?: "left" | "right"; }) { const c = column as unknown as { getIsSorted: () => false | "asc" | "desc"; getToggleSortingHandler: () => undefined | ((e: unknown) => void) }; const dir = c.getIsSorted(); return (

); } /** Footer with a selection count and Prev/Next clay buttons. / export function DataTablePagination({ selected, total, pageIndex, pageCount, canPrevious, canNext, onPrevious, onNext, className, }: { selected?: number; total: number; pageIndex: number; pageCount: number; canPrevious: boolean; canNext: boolean; onPrevious: () => void; onNext: () => void; className?: string; }) { return (

{selected !== undefined ? `${selected} of ${total} selected` : `${total} rows`}

Page {pageIndex + 1} / {Math.max(pageCount, 1)}

); } ``` # Date Picker > A calendar that pops out of a button. Docs: https://ui.parlemen.dev/docs/date-picker ## Installation Date Picker is a recipe built from calendar, popover, button. ```bash npx shadcn@latest add @parlemen/calendar @parlemen/popover @parlemen/button ``` ## Usage ```tsx "use client"; import as React from "react"; import * as Popover from "@radix-ui/react-popover"; import { AnimatePresence, motion } from "motion/react"; import { addDays, format } from "date-fns"; import type { DateRange } from "react-day-picker"; import { CalendarBlankIcon, CalendarDotsIcon } from "@phosphor-icons/react"; import { springs } from "@/lib/motion"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import { Calendar } from "@/components/ui/calendar"; /** Popover that pops in with springs.bouncy. Uses Radix directly so this demo stands alone. / function Pop({ trigger, children }: { trigger: React.ReactNode; children: (close: () => void) => React.ReactNode }) { const [open, setOpen] = React.useState(false); return ( {trigger} {open && ( {children(() => setOpen(false))} )} ); } function Field({ label, children }: { label: string; children: React.ReactNode }) { return (
{label} {children}
); } export default function DatePickerDemo() { const [date, setDate] = React.useState(); const [range, setRange] = React.useState(() => ({ from: new Date(), to: addDays(new Date(), 6) })); return (
{date ? format(date, "PPP") : "Pick a date"} } > {(close) => ( { setDate(d); if (d) close(); }} autoFocus /> )} {range?.from ? (range.to ? `${format(range.from, "d LLL")} to ${format(range.to, "d LLL y")}` : format(range.from, "d LLL y")) : "Pick a range"} } > {() => }
); } ``` # Dialog > A modal window over a blurred backdrop. Docs: https://ui.parlemen.dev/docs/dialog ## Installation ```bash npx shadcn@latest add @parlemen/dialog ``` ## Usage ```tsx import { CheckIcon, GavelIcon } from "@phosphor-icons/react/dist/ssr"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogDescription, DialogTitle, DialogTrigger } from "@/components/ui/dialog"; export default function DialogDemo() { return (

Hey there 👋 Soft, squishy, a little bit clay.

); } ``` ## Source (components/ui/dialog.tsx) ```tsx "use client"; import as React from "react"; import * as D from "@radix-ui/react-dialog"; import { AnimatePresence, motion } from "motion/react"; import { XIcon } from "@phosphor-icons/react"; import { springs } from "@/lib/motion"; import { cn } from "@/lib/utils"; const DialogCtx = React.createContext(false); /** Same API as Radix Dialog. Tracks open state so content can animate out before unmounting. / export function Dialog({ open, defaultOpen, onOpenChange, ...p }: React.ComponentProps) { const [inner, setInner] = React.useState(defaultOpen ?? false); const current = open ?? inner; return ( { setInner(v); onOpenChange?.(v); }} {...p} /> ); } export const DialogTrigger = D.Trigger; export const DialogClose = D.Close; export function DialogContent({ className, children, ...p }: React.ComponentProps) { const open = React.useContext(DialogCtx); return ( {open && (
{children}
)} ); } export function DialogTitle({ className, ...p }: React.ComponentProps) { return ; } export function DialogDescription({ className, ...p }: React.ComponentProps) { return ; } ``` # Drawer > Draggable bottom panel with a sunken grab handle. Docs: https://ui.parlemen.dev/docs/drawer ## Installation ```bash npx shadcn@latest add @parlemen/drawer ``` ## Usage ```tsx "use client"; import as React from "react"; import { CoffeeIcon, MinusIcon, PlusIcon, XIcon } from "@phosphor-icons/react"; import { Button } from "@/components/ui/button"; import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "@/components/ui/drawer"; export default function DrawerDemo() { const [cups, setCups] = React.useState(3); return (
Kopi untuk sidang Berapa gelas yang dibutuhkan pagi ini?
{cups}

); } ``` ## Source (components/ui/drawer.tsx) ```tsx "use client"; import * as React from "react"; import { Drawer as V } from "vaul"; import { cn } from "@/lib/utils"; export function Drawer({ shouldScaleBackground = true, ...p }: React.ComponentProps) { return ; } export const DrawerTrigger = V.Trigger; export const DrawerPortal = V.Portal; export const DrawerClose = V.Close; export function DrawerOverlay({ className, ...p }: React.ComponentProps) { return ; } export function DrawerContent({ className, children, ...p }: React.ComponentProps) { return (
{children} ); } export function DrawerHeader({ className, ...p }: React.ComponentProps<"div">) { return
; } export function DrawerFooter({ className, ...p }: React.ComponentProps<"div">) { return
; } export function DrawerTitle({ className, ...p }: React.ComponentProps) { return ; } export function DrawerDescription({ className, ...p }: React.ComponentProps) { return ; } ``` # Dropdown Menu > A menu of actions that pops out of a button. Docs: https://ui.parlemen.dev/docs/dropdown-menu ## Installation ```bash npx shadcn@latest add @parlemen/dropdown-menu ``` ## Usage ```tsx "use client"; import * as React from "react"; import { GearIcon, SignOutIcon, UserIcon, UsersThreeIcon, EnvelopeIcon, ChatCircleIcon } from "@phosphor-icons/react"; import { Button } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; export default function DropdownMenuDemo() { const [notif, setNotif] = React.useState(true); const [mode, setMode] = React.useState("santai"); return ( Anggota dewan Profil ⇧⌘P Pengaturan ⌘, Undang fraksi Email Pesan Notifikasi sidang Mode rapat Santai Serius Lembur Keluar ⇧⌘Q ); } ``` ## Source (components/ui/dropdown-menu.tsx) ```tsx "use client"; import * as React from "react"; import * as M from "@radix-ui/react-dropdown-menu"; import { AnimatePresence, motion } from "motion/react"; import { CaretRightIcon, CheckIcon, CircleIcon } from "@phosphor-icons/react"; import { springs } from "@/lib/motion"; import { cn } from "@/lib/utils"; const MenuCtx = React.createContext(false); const panel = "z-50 min-w-48 overflow-hidden rounded-xl bg-surface p-1.5 text-on-surface shadow-clay outline-none"; const item = "relative flex cursor-pointer select-none items-center gap-2 rounded-full px-3 py-2 text-sm font-semibold outline-none transition-colors data-[highlighted]:bg-surface-sunken data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0"; /** Same API as Radix DropdownMenu. Tracks open state so content can animate out. / export function DropdownMenu({ open, defaultOpen, onOpenChange, ...p }: React.ComponentProps) { const [inner, setInner] = React.useState(defaultOpen ?? false); const current = open ?? inner; return ( { setInner(v); onOpenChange?.(v); }} {...p} /> ); } export const DropdownMenuTrigger = M.Trigger; export const DropdownMenuGroup = M.Group; export const DropdownMenuPortal = M.Portal; export const DropdownMenuSub = M.Sub; export const DropdownMenuRadioGroup = M.RadioGroup; export function DropdownMenuContent({ className, children, sideOffset = 6, ...p }: React.ComponentProps) { const open = React.useContext(MenuCtx); return ( {open && ( {children} )} ); } export function DropdownMenuSubContent({ className, children, ...p }: React.ComponentProps) { return ( {children} ); } export function DropdownMenuItem({ className, inset, variant, ...p }: React.ComponentProps & { inset?: boolean; variant?: "default" | "destructive" }) { return ( ); } export function DropdownMenuSubTrigger({ className, inset, children, ...p }: React.ComponentProps & { inset?: boolean }) { return ( {children} ); } export function DropdownMenuCheckboxItem({ className, children, ...p }: React.ComponentProps) { return ( {children} ); } export function DropdownMenuRadioItem({ className, children, ...p }: React.ComponentProps) { return ( {children} ); } export function DropdownMenuLabel({ className, inset, ...p }: React.ComponentProps & { inset?: boolean }) { return ; } export function DropdownMenuSeparator({ className, ...p }: React.ComponentProps) { return ; } export function DropdownMenuShortcut({ className, ...p }: React.ComponentProps<"span">) { return ; } ``` # Empty > A friendly empty state with a floating icon tile. Docs: https://ui.parlemen.dev/docs/empty ## Installation ```bash npx shadcn@latest add @parlemen/empty ``` ## Usage ```tsx "use client"; import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty"; import { Button } from "@/components/ui/button"; import { ScrollIcon, PlusIcon } from "@phosphor-icons/react"; export default function EmptyDemo() { return ( No bills yet The chamber is quiet. Draft the first bill and get the debate rolling. ); } ``` ## Source (components/ui/empty.tsx) ```tsx "use client"; import as React from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; type Color = "primary" | "secondary" | "tertiary" | "accent" | "success" | "warning" | "danger" | "info"; const container: Record = { primary: "bg-primary-container text-on-primary-container", secondary: "bg-secondary-container text-on-secondary-container", tertiary: "bg-tertiary-container text-on-tertiary-container", accent: "bg-accent-container text-on-accent-container", success: "bg-success-container text-on-success-container", warning: "bg-warning-container text-on-warning-container", danger: "bg-danger-container text-on-danger-container", info: "bg-info-container text-on-info-container", }; export function Empty({ className, ...p }: React.HTMLAttributes) { return (
); } export function EmptyHeader({ className, ...p }: React.HTMLAttributes) { return
; } /** Floating role-coloured tile. Put a duotone Phosphor icon inside. / export function EmptyMedia({ className, color = "primary", children, }: { className?: string; color?: Color; children?: React.ReactNode }) { return ( {children} ); } export function EmptyTitle({ className, ...p }: React.HTMLAttributes) { return
; } export function EmptyDescription({ className, ...p }: React.HTMLAttributes) { return
; } export function EmptyContent({ className, ...p }: React.HTMLAttributes) { return
; } ``` # Footer > Cloudy footer with the hanging mascot, link columns and socials. Docs: https://ui.parlemen.dev/docs/footer ## Installation ```bash npx shadcn@latest add @parlemen/footer ``` ## Usage ```tsx "use client"; import { GithubLogoIcon, InstagramLogoIcon, YoutubeLogoIcon } from "@phosphor-icons/react"; import { Footer, FooterBottom, FooterBrand, FooterColumn, FooterColumns, FooterLink, FooterMain, FooterSocial, FooterSocials, } from "@/components/ui/footer"; export default function FooterDemo() { return ( // The demo sits inside a preview box, so trim the outer margin and clip to its rounded corners.

Fraksi Kopi

Rapat paripurna, tapi santai. Every cup passes unanimously.
Espresso Kopi susu About Careers
© 2026 Fraksi Kopi

); } ``` ## Source (components/ui/footer.tsx) ```tsx "use client"; import as React from "react"; import { motion, useInView } from "motion/react"; import { LiveLogo } from "@/components/ui/brand"; import { springs } from "@/lib/motion"; import { cn } from "@/lib/utils"; /* * Ported from the company profile footer (web/components/Footer.tsx): * a cloudy top edge, the P mascot hanging upside down and swinging, drifting cloud banks, * then columns of links. Colours come from tokens so it works in light and dark. */ const CLOUD_EDGE = "M0 160V96c60-30 120-44 190-28 50-58 150-70 210-20 40-50 130-62 190-8 70-62 190-64 250 6 50-40 140-46 200 4 60-56 170-54 220 12 70-30 130-20 180 20V160z"; const BANK_BACK = "M-40 400V250c40-60 140-80 200-40 30-70 150-90 210-30 50-60 170-60 220 10 60-50 170-40 210 20 50-60 160-70 220-10 40-50 150-60 210 0 50-40 140-30 170 30 40-30 120-20 160 20V400z"; const BANK_FRONT = "M-60 400V320c50-50 150-60 200-20 40-60 160-70 220-10 50-50 160-50 210 10 60-40 160-30 200 20 50-50 170-60 220 0 40-40 140-50 200 0 40-30 120-20 150 20 40-30 110-20 150 20 40-30 110-20 150 20V400z"; /** Mascot hanging from the cloud edge. Drops in on first view, swings, and wobbles when poked. / function HangingMascot({ show }: { show: boolean }) { const [poke, setPoke] = React.useState(0); return ( setPoke((p) => p + 1)} > {/ The mascot's own stem points up when flipped, so it reads as hanging. /} ); } export function Footer({ className, children, mascot = true, ...p }: React.HTMLAttributes & { mascot?: boolean }) { const ref = React.useRef(null); const inView = useInView(ref, { once: true, amount: 0.3 }); return (

{/ Own layer above both the cloud edge and the clipped body, so the swinging mascot is never cut off. /} {mascot && (

)}
{/ Drifting cloud banks along the bottom, same colours as the company footer. /} {/ Fixed height (not a % of a tall mobile footer) so the clouds keep their round shape at every width. */}

{children}

); } /** Top row: brand + blurb + newsletter on the left, link columns on the right. Stacks on mobile. */ export function FooterMain({ className, ...p }: React.HTMLAttributes) { return
; } export function FooterBrand({ className, ...p }: React.HTMLAttributes) { return
; } export function FooterColumns({ className, ...p }: React.HTMLAttributes) { return
; } export function FooterColumn({ title, className, children, ...p }: React.HTMLAttributes & { title: string }) { return (

{title}

{children}

); } /** Link that nudges right and turns accent on hover. Pass `as` for next/link. */ export function FooterLink({ as: Comp = "a", className, children, ...p }: React.AnchorHTMLAttributes & { as?: React.ElementType }) { return (
{children}
); } /** Row of round social buttons that hop and tilt on hover. */ export function FooterSocials({ className, ...p }: React.HTMLAttributes) { return
; } export function FooterSocial({ label, index = 0, className, children, ...p }: React.AnchorHTMLAttributes & { label: string; index?: number }) { return ( )} > {children} ); } /** Bottom bar: copyright and legal links, separated by a soft divider. / export function FooterBottom({ className, ...p }: React.HTMLAttributes) { return (
); } ``` # Form > react-hook-form + zod bindings with springy error messages. Docs: https://ui.parlemen.dev/docs/form ## Installation ```bash npx shadcn@latest add @parlemen/form ``` ## Usage ```tsx "use client"; import as React from "react"; import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { z } from "zod"; import { Button } from "@/components/ui/button"; import { Checkbox } from "@/components/ui/checkbox"; import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"; import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input"; import { UserIcon, EnvelopeSimpleIcon, PaletteIcon, CodeIcon, HardDrivesIcon, UserPlusIcon } from "@phosphor-icons/react"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Switch } from "@/components/ui/switch"; const schema = z.object({ username: z.string().min(3, "Minimal 3 huruf, ya."), email: z.email("Email-nya belum valid."), komisi: z.string().min(1, "Pilih satu komisi dulu."), newsletter: z.boolean(), terms: z.boolean().refine((v) => v, "Wajib setuju tata tertib."), }); type Values = z.infer; export default function FormDemo() { const [done, setDone] = React.useState(null); const form = useForm({ resolver: zodResolver(schema), defaultValues: { username: "", email: "", komisi: "", newsletter: true, terms: false }, }); return (
setDone(v.username))} className="grid w-full max-w-sm gap-5"> ( Username Nama yang tampil di risalah sidang. )} /> ( Email )} /> ( Komisi )} /> ( Kabar sidang mingguan )} /> (
field.onChange(v === true)} /> Saya setuju tata tertib parlemen
)} /> {done &&
Selamat bergabung, {done}!
} ); } ``` ## Source (components/ui/form.tsx) ```tsx "use client"; import * as React from "react"; import { Slot } from "@radix-ui/react-slot"; import { AnimatePresence, motion } from "motion/react"; import { Controller, FormProvider, useFormContext, useFormState, type ControllerProps, type FieldPath, type FieldValues, } from "react-hook-form"; import { Label } from "@/components/ui/label"; import { springs } from "@/lib/motion"; import { cn } from "@/lib/utils"; /** shadcn-compatible react-hook-form bindings. */ export const Form = FormProvider; const FieldCtx = React.createContext<{ name: string }>({ name: "" }); const ItemCtx = React.createContext<{ id: string }>({ id: "" }); export function FormField = FieldPath>( props: ControllerProps ) { return ( ); } export function useFormField() { const field = React.useContext(FieldCtx); const item = React.useContext(ItemCtx); const { getFieldState } = useFormContext(); const formState = useFormState({ name: field.name }); const state = getFieldState(field.name, formState); return { id: item.id, name: field.name, formItemId: `${item.id}-item`, formDescriptionId: `${item.id}-description`, formMessageId: `${item.id}-message`, ...state, }; } export function FormItem({ className, ...p }: React.ComponentProps<"div">) { const id = React.useId(); return (
); } export function FormLabel({ className, ...p }: React.ComponentProps) { const { error, formItemId } = useFormField(); return ; } export function FormControl(p: React.ComponentProps) { const { error, formItemId, formDescriptionId, formMessageId } = useFormField(); return ( ); } export function FormDescription({ className, ...p }: React.ComponentProps<"p">) { const { formDescriptionId } = useFormField(); return
; } /** Error text that pops in with a little wobble and collapses away when fixed. / export function FormMessage({ className, children, ...p }: React.ComponentProps<"p">) { const { error, formMessageId } = useFormField(); const body = error ? String(error.message ?? "") : children; return ( {body && ( )} > {body} )} ); } ``` # Hover Card > Preview content when hovering a link. Docs: https://ui.parlemen.dev/docs/hover-card ## Installation ```bash npx shadcn@latest add @parlemen/hover-card ``` ## Usage ```tsx "use client"; import { CalendarBlankIcon } from "@phosphor-icons/react"; import { LiveLogo } from "@/components/ui/brand"; import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card"; export default function HoverCardDemo() { return ( @parlemen

Parlemen

Studio kecil yang bikin produk digital empuk dan menyenangkan.

Bergabung Januari 2024

); } ``` ## Source (components/ui/hover-card.tsx) ```tsx "use client"; import as React from "react"; import * as H from "@radix-ui/react-hover-card"; import { AnimatePresence, motion } from "motion/react"; import { springs } from "@/lib/motion"; import { cn } from "@/lib/utils"; const HoverCardCtx = React.createContext(false); export function HoverCard({ open, defaultOpen, onOpenChange, openDelay = 200, closeDelay = 150, ...p }: React.ComponentProps) { const [inner, setInner] = React.useState(defaultOpen ?? false); const current = open ?? inner; return ( { setInner(v); onOpenChange?.(v); }} {...p} /> ); } export const HoverCardTrigger = H.Trigger; export function HoverCardContent({ className, children, align = "center", sideOffset = 8, ...p }: React.ComponentProps) { const open = React.useContext(HoverCardCtx); return ( {open && ( {children} )} ); } ``` # Input > Recessed fields, plus InputGroup for addons and an action button. Docs: https://ui.parlemen.dev/docs/input ## Installation ```bash npx shadcn@latest add @parlemen/input ``` ## Usage ```tsx "use client"; import * as React from "react"; import { AnimatePresence, motion } from "motion/react"; import { ArrowRightIcon, CheckIcon, EnvelopeSimpleIcon, MagnifyingGlassIcon } from "@phosphor-icons/react"; import { Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "@/components/ui/input"; import { springs } from "@/lib/motion"; /** Newsletter field from the company site footer: arrow becomes a check after submit. / function Newsletter() { const [sent, setSent] = React.useState(false); return (
{ e.preventDefault(); setSent(true); setTimeout(() => setSent(false), 2000); }} > {sent ? : }
); } export default function InputDemo() { return (

); } ``` ## Source (components/ui/input.tsx) ```tsx "use client"; import as React from "react"; import { motion, type HTMLMotionProps } from "motion/react"; import { springs } from "@/lib/motion"; import { cn } from "@/lib/utils"; /** A recessed text field. Sinks a little deeper and glows when focused. */ export function Input({ className, ...p }: React.InputHTMLAttributes) { return ( ); } /** * Sunken track that holds a borderless input plus addons and an action button, * like the newsletter field on the company site. The focus ring wraps the whole group. */ export function InputGroup({ className, ...p }: React.HTMLAttributes) { return (
); } export function InputGroupInput({ className, ...p }: React.InputHTMLAttributes) { return ( ); } /** Icon or text that sits inside the group, e.g. a search icon or "https://". */ export function InputGroupAddon({ className, ...p }: React.HTMLAttributes) { return ; } /** Round action button that lives at the end of the group. Squishes like Button. / export function InputGroupButton({ className, ...p }: HTMLMotionProps<"button">) { return ( ); } ``` # Input OTP > One-time code tiles with a blinking caret. Docs: https://ui.parlemen.dev/docs/input-otp ## Installation ```bash npx shadcn@latest add @parlemen/input-otp ``` ## Usage ```tsx "use client"; import as React from "react"; import { ShieldCheckIcon } from "@phosphor-icons/react"; import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "@/components/ui/input-otp"; export default function InputOTPDemo() { const [v, setV] = React.useState(""); return (

Verifikasi dua langkah

{v.length === 6 ? "Kode diterima. Selamat datang di parlemen!" : "Masukkan 6 digit kode dari email kamu."}

); } ``` ## Source (components/ui/input-otp.tsx) ```tsx "use client"; import * as React from "react"; import { OTPInput, OTPInputContext } from "input-otp"; import { motion } from "motion/react"; import { springs } from "@/lib/motion"; import { cn } from "@/lib/utils"; /** One-time code field built on `input-otp`. */ export function InputOTP({ className, containerClassName, ...p }: React.ComponentProps & { containerClassName?: string }) { return ( ); } export function InputOTPGroup({ className, ...p }: React.HTMLAttributes) { return
; } /** Sunken rounded tile. Active tile gets the focus ring and a blinking caret. / export function InputOTPSlot({ index, className, ...p }: React.HTMLAttributes & { index: number }) { const ctx = React.useContext(OTPInputContext); const slot = ctx?.slots[index]; return (
{slot?.char && ( {slot.char} )} {slot?.hasFakeCaret && (

)}
); } export function InputOTPSeparator(p: React.HTMLAttributes) { return (

); } ``` # Kbd > Little raised keys for shortcuts. Docs: https://ui.parlemen.dev/docs/kbd ## Installation ```bash npx shadcn@latest add @parlemen/kbd ``` ## Usage ```tsx import { ArrowFatUpIcon, CommandIcon } from "@phosphor-icons/react/dist/ssr"; import { Kbd, KbdGroup } from "@/components/ui/kbd"; export default function KbdDemo() { return (
`K`
Press{" "} `Ctrl`+ `Shift` +`V` {" "} to cast your vote.

Use `Esc` to leave the chamber.

); } ``` ## Source (components/ui/kbd.tsx) ```tsx import as React from "react"; import { cn } from "@/lib/utils"; /** A tiny raised clay key. / export function Kbd({ className, ...p }: React.HTMLAttributes) { return ( ); } export function KbdGroup({ className, ...p }: React.HTMLAttributes) { return ; } ``` # Label > Accessible label for form controls. Docs: https://ui.parlemen.dev/docs/label ## Installation ```bash npx shadcn@latest add @parlemen/label ``` ## Usage ```tsx import { IdentificationBadgeIcon } from "@phosphor-icons/react/dist/ssr"; import { Label } from "@/components/ui/label"; import { Input } from "@/components/ui/input"; export default function LabelDemo() { return ( Nama dewan ); } ``` ## Source (components/ui/label.tsx) ```tsx "use client"; import as React from "react"; import * as L from "@radix-ui/react-label"; import { cn } from "@/lib/utils"; /** Bold form label. Dims when its peer or group is disabled. / export function Label({ className, ...p }: React.ComponentProps) { return ( ); } ``` # Menubar > A puffy app menu bar with springy menus. Docs: https://ui.parlemen.dev/docs/menubar ## Installation ```bash npx shadcn@latest add @parlemen/menubar ``` ## Usage ```tsx "use client"; import as React from "react"; import { PlusIcon, ExportIcon, TrashIcon, BookOpenIcon, BugIcon } from "@phosphor-icons/react"; import { Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarTrigger, } from "@/components/ui/menubar"; export default function MenubarDemo() { const [alerts, setAlerts] = React.useState(true); const [chamber, setChamber] = React.useState("dpr"); return ( File New watchlist ⌘N Export votes ⌘E Delete watchlist View Vote alerts DPR DPD MPR Help How we count votes Report a mistake ); } ``` ## Source (components/ui/menubar.tsx) ```tsx "use client"; import * as React from "react"; import * as M from "@radix-ui/react-menubar"; import { AnimatePresence, motion } from "motion/react"; import { CaretRightIcon, CheckIcon, CircleIcon } from "@phosphor-icons/react"; import { springs } from "@/lib/motion"; import { cn } from "@/lib/utils"; const BarCtx = React.createContext<{ value: string; id: string }>({ value: "", id: "" }); const MenuCtx = React.createContext(""); /** Same API as Radix Menubar. Tracks the open menu so popovers can spring in and out. / export function Menubar({ className, value, defaultValue, onValueChange, ...p }: React.ComponentProps) { const [inner, setInner] = React.useState(defaultValue ?? ""); const current = value ?? inner; const id = React.useId(); return ( { setInner(v); onValueChange?.(v); }} className={cn("inline-flex h-14 items-center gap-1 rounded-full bg-surface p-2 shadow-clay-sm", className)} {...p} /> ); } export function MenubarMenu({ value, ...p }: React.ComponentProps) { const auto = React.useId(); const v = value ?? auto; return ( ); } export const MenubarGroup = M.Group; export const MenubarPortal = M.Portal; export const MenubarSub = M.Sub; export const MenubarRadioGroup = M.RadioGroup; export function MenubarTrigger({ className, children, ...p }: React.ComponentProps) { const bar = React.useContext(BarCtx); const open = bar.value === React.useContext(MenuCtx); return ( {open && ( )} {children} ); } const panel = "z-50 min-w-[12rem] rounded-xl bg-surface p-2 text-on-surface shadow-clay"; export function MenubarContent({ className, align = "start", alignOffset = -4, sideOffset = 10, children, ...p }: React.ComponentProps) { const bar = React.useContext(BarCtx); const open = bar.value === React.useContext(MenuCtx); return ( {open && ( {children} )} ); } const item = "relative flex cursor-pointer select-none items-center gap-2 rounded-[1.2rem] px-3 py-2 text-sm font-semibold outline-none transition-colors data-[highlighted]:bg-surface-sunken data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0"; export function MenubarItem({ className, inset, variant, ...p }: React.ComponentProps & { inset?: boolean; variant?: "default" | "destructive" }) { return ( ); } export function MenubarCheckboxItem({ className, children, ...p }: React.ComponentProps) { return ( {children} ); } export function MenubarRadioItem({ className, children, ...p }: React.ComponentProps) { return ( {children} ); } export function MenubarLabel({ className, inset, ...p }: React.ComponentProps & { inset?: boolean }) { return ; } export function MenubarSeparator({ className, ...p }: React.ComponentProps) { return ; } export function MenubarShortcut({ className, ...p }: React.ComponentProps<"span">) { return ; } export function MenubarSubTrigger({ className, inset, children, ...p }: React.ComponentProps & { inset?: boolean }) { return ( {children} ); } export function MenubarSubContent({ className, ...p }: React.ComponentProps) { return ( ); } ``` # Navbar > Floating pill header with links and actions. Docs: https://ui.parlemen.dev/docs/navbar ## Installation ```bash npx shadcn@latest add @parlemen/navbar ``` ## Usage ```tsx import { BriefcaseIcon, HandWavingIcon, InfoIcon, PathIcon } from "@phosphor-icons/react/dist/ssr"; import { Button } from "@/components/ui/button"; import { Navbar, NavbarActions, NavbarBrand, NavbarInner, NavbarLink, NavbarLinks } from "@/components/ui/navbar"; export default function NavbarDemo() { return ( parlemen Work Process About ); } ``` ## Source (components/ui/navbar.tsx) ```tsx import as React from "react"; import { cn } from "@/lib/utils"; export function Navbar({ className, ...p }: React.HTMLAttributes) { return ( ); } export function NavbarInner({ className, ...p }: React.HTMLAttributes) { return ( ); } export function NavbarBrand({ className, ...p }: React.HTMLAttributes) { return ; } export function NavbarLinks({ className, ...p }: React.HTMLAttributes) { return ; } export function NavbarLink({ className, active, ...p }: React.AnchorHTMLAttributes & { active?: boolean }) { return ( ); } export function NavbarActions({ className, ...p }: React.HTMLAttributes) { return ; } ``` # Navigation Menu > Site navigation with a sliding pill and a morphing panel. Docs: https://ui.parlemen.dev/docs/navigation-menu ## Installation ```bash npx shadcn@latest add @parlemen/navigation-menu ``` ## Usage ```tsx "use client"; import { UsersThreeIcon, ScrollIcon, BankIcon, ChartBarIcon, UsersIcon, NewspaperIcon, InfoIcon } from "@phosphor-icons/react"; import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTopLink, NavigationMenuTrigger, } from "@/components/ui/navigation-menu"; const explore = [ { icon: UsersThreeIcon, title: "Members", body: "Every MP, their votes, attendance and speeches." }, { icon: ScrollIcon, title: "Bills", body: "Track a bill from first reading to law." }, { icon: BankIcon, title: "Committees", body: "Who sits where, and what they argue about." }, { icon: ChartBarIcon, title: "Votes", body: "Roll calls, broken down by party and region." }, ]; export default function NavigationMenuDemo() { return ( Explore {explore.map((x) => ( {x.title} {x.body} ))} About Parlemen Open data for an open parliament. Built by volunteers in Jakarta. Team Press kit Blog ); } ``` ## Source (components/ui/navigation-menu.tsx) ```tsx "use client"; import * as React from "react"; import * as N from "@radix-ui/react-navigation-menu"; import { motion } from "motion/react"; import { CaretDownIcon } from "@phosphor-icons/react"; import { springs } from "@/lib/motion"; import { cn } from "@/lib/utils"; type Ctx = { id: string; value: string; hovered: string | null; setHovered: (v: string | null) => void }; const NavCtx = React.createContext({ id: "", value: "", hovered: null, setHovered: () => {} }); const ItemCtx = React.createContext(""); /** Same API as Radix NavigationMenu. Tracks open/hovered item so a pill can slide between triggers. */ export function NavigationMenu({ className, children, value, defaultValue, onValueChange, viewport = true, ...p }: React.ComponentProps & { viewport?: boolean }) { const [inner, setInner] = React.useState(defaultValue ?? ""); const [hovered, setHovered] = React.useState(null); const current = value ?? inner; const id = React.useId(); return ( { setInner(v); onValueChange?.(v); }} className={cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className)} {...p} > {children} {viewport && } ); } export function NavigationMenuList({ className, onPointerLeave, ...p }: React.ComponentProps) { const { setHovered } = React.useContext(NavCtx); return ( { setHovered(null); onPointerLeave?.(e); }} className={cn("group flex flex-1 list-none items-center justify-center gap-1", className)} {...p} /> ); } export function NavigationMenuItem({ value, ...p }: React.ComponentProps) { const auto = React.useId(); const v = value ?? auto; return ( ); } export const navigationMenuTriggerStyle = () => "relative inline-flex h-10 cursor-pointer items-center justify-center gap-1 rounded-full px-4 text-sm font-bold text-on-surface-muted transition-colors hover:text-on-surface focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring/40 data-[state=open]:text-on-surface data-[active]:text-on-surface disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-[1.15em] [&_svg]:shrink-0"; function Pill({ item }: { item: string }) { const ctx = React.useContext(NavCtx); const shown = (ctx.hovered ?? ctx.value) === item; if (!shown) return null; return ( ); } export function NavigationMenuTrigger({ className, children, onPointerEnter, ...p }: React.ComponentProps) { const item = React.useContext(ItemCtx); const ctx = React.useContext(NavCtx); const open = ctx.value === item; return ( { ctx.setHovered(item); onPointerEnter?.(e); }} className={cn(navigationMenuTriggerStyle(), "group", className)} {...p} > {children} ); } export function NavigationMenuLink({ className, onPointerEnter, children, asChild, ...p }: React.ComponentProps) { const item = React.useContext(ItemCtx); const ctx = React.useContext(NavCtx); return ( { if (item && !asChild) ctx.setHovered(item); onPointerEnter?.(e); }} className={cn( "block rounded-[1.2rem] p-3 text-sm font-medium transition-colors hover:bg-surface-sunken focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring/40", className )} {...p} > {children} ); } /** A top-level link that sits in the list next to triggers and shares the sliding pill. / export function NavigationMenuTopLink({ className, children, active, ...p }: React.ComponentProps<"a"> & { active?: boolean }) { const item = React.useContext(ItemCtx); const ctx = React.useContext(NavCtx); return ( ctx.setHovered(item)} data-active={active || undefined} className={cn(navigationMenuTriggerStyle(), className)} {...p} > {children} ); } export function NavigationMenuContent({ className, ...p }: React.ComponentProps) { return ( ); } export function NavigationMenuViewport({ className, ...p }: React.ComponentProps) { const { value } = React.useContext(NavCtx); return ( ); } export function NavigationMenuIndicator({ className, ...p }: React.ComponentProps) { return ( ); } ``` # Pagination > Page pills with a sliding active page. Docs: https://ui.parlemen.dev/docs/pagination ## Installation ```bash npx shadcn@latest add @parlemen/pagination ``` ## Usage ```tsx "use client"; import as React from "react"; import { CaretDoubleLeftIcon, CaretDoubleRightIcon } from "@phosphor-icons/react"; import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationJump, PaginationLink, PaginationNext, PaginationPrevious, getPageRange, } from "@/components/ui/pagination"; const TOTAL = 20; export default function PaginationDemo() { const [page, setPage] = React.useState(10); const go = (p: number) => (e: React.MouseEvent) => { e.preventDefault(); setPage(Math.min(TOTAL, Math.max(1, p))); }; // One neighbour each side on wider screens (1 … 9 10 11 … 20), none on phones (1 … 10 … 20). const pages = (siblings: number, className: string) => getPageRange(page, TOTAL, siblings).map((n, i) => n === "ellipsis" ? ( ) : ( {n} ) ); return ( {pages(0, "sm:hidden")} {pages(1, "hidden sm:block")} Showing bills {(page - 1) * 10 + 1}–{page * 10} of {TOTAL * 10} ); } ``` ## Source (components/ui/pagination.tsx) ```tsx "use client"; import * as React from "react"; import { motion } from "motion/react"; import { CaretLeftIcon, CaretRightIcon, DotsThreeIcon } from "@phosphor-icons/react"; import { springs } from "@/lib/motion"; import { cn } from "@/lib/utils"; const Ctx = React.createContext(""); export function Pagination({ className, ...p }: React.ComponentProps<"nav">) { const id = React.useId(); return ( ); } export function PaginationContent({ className, ...p }: React.ComponentProps<"ul">) { return ( ); } export function PaginationItem(p: React.ComponentProps<"li">) { return ; } type PaginationLinkProps = { isActive?: boolean; size?: "icon" | "default"; disabled?: boolean; /** Separate sliding-pill group, e.g. when rendering a compact and a full page list side by side. */ group?: string; } & React.ComponentProps<"a">; export function PaginationLink({ className, isActive, size = "icon", disabled, group = "", children, ...p }: PaginationLinkProps) { const id = React.useContext(Ctx); return ( )} > {isActive && ( )} {children} ); } export function PaginationPrevious({ className, ...p }: React.ComponentProps) { return ( Previous ); } export function PaginationNext({ className, ...p }: React.ComponentProps) { return ( Next ); } export function PaginationEllipsis({ className, ...p }: React.ComponentProps<"span">) { return ( More pages ); } /** * Which page numbers to show. Always the first and last page, `siblings` pages either side of the * current one, and "ellipsis" where pages are skipped. The length stays constant so the bar doesn't jump. * getPageRange(10, 20) -> [1, "ellipsis", 9, 10, 11, "ellipsis", 20] / export function getPageRange(current: number, total: number, siblings = 1): (number | "ellipsis")[] { const slots = siblings 2 + 5; // first, last, current, 2 ellipses, siblings if (total <= slots) return Array.from({ length: total }, (_, i) => i + 1); const left = Math.max(current - siblings, 1); const right = Math.min(current + siblings, total); const showLeftDots = left > 3; const showRightDots = right < total - 2; const edge = siblings * 2 + 3; if (!showLeftDots) return [...Array.from({ length: edge }, (_, i) => i + 1), "ellipsis", total]; if (!showRightDots) return [1, "ellipsis", ...Array.from({ length: edge }, (_, i) => total - edge + 1 + i)]; return [1, "ellipsis", ...Array.from({ length: right - left + 1 }, (_, i) => left + i), "ellipsis", total]; } /** * "Go to page" field: a small sunken input that jumps on Enter or blur, clamped to 1..total. * Invalid entries shake and reset. / export function PaginationJump({ page, total, onPageChange, label = "Go to", className, }: { page: number; total: number; onPageChange: (page: number) => void; label?: string; className?: string; }) { const [value, setValue] = React.useState(String(page)); const [lastPage, setLastPage] = React.useState(page); const [shake, setShake] = React.useState(0); const id = React.useId(); // Keep the field in sync when the page changes elsewhere. if (page !== lastPage) { setLastPage(page); setValue(String(page)); } const commit = () => { const n = Number(value); if (!Number.isInteger(n) || n < 1 || n > total) { setShake((s) => s + 1); setValue(String(page)); return; } if (n !== page) onPageChange(n); }; return ( { e.preventDefault(); commit(); }} className={cn("inline-flex items-center gap-2 text-sm font-semibold text-on-surface-muted", className)} > {label} e.currentTarget.select()} onChange={(e) => setValue(e.target.value.replace(/[^0-9]/g, "").slice(0, String(total).length))} onBlur={commit} animate={shake ? { x: [0, -6, 6, -4, 4, 0] } : undefined} transition={{ duration: 0.35 }} className="h-10 w-14 rounded-full bg-surface-sunken text-center font-mono font-bold text-on-surface shadow-well outline-none focus-visible:ring-4 focus-visible:ring-ring/40" /> of {total} ); } ``` # Popover > Raised clay panel anchored to a trigger. Docs: https://ui.parlemen.dev/docs/popover ## Installation ```bash npx shadcn@latest add @parlemen/popover ``` ## Usage ```tsx "use client"; import { MapPinIcon, SlidersHorizontalIcon, TimerIcon } from "@phosphor-icons/react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; export default function PopoverDemo() { return ( Rapat paripurna Pilih ruangan dan durasi. Ruangan Durasi ); } ``` ## Source (components/ui/popover.tsx) ```tsx "use client"; import as React from "react"; import * as P from "@radix-ui/react-popover"; import { AnimatePresence, motion } from "motion/react"; import { springs } from "@/lib/motion"; import { cn } from "@/lib/utils"; const PopoverCtx = React.createContext(false); /** Same API as Radix Popover. Tracks open state so content can animate out. / export function Popover({ open, defaultOpen, onOpenChange, ...p }: React.ComponentProps) { const [inner, setInner] = React.useState(defaultOpen ?? false); const current = open ?? inner; return ( { setInner(v); onOpenChange?.(v); }} {...p} /> ); } export const PopoverTrigger = P.Trigger; export const PopoverAnchor = P.Anchor; export const PopoverClose = P.Close; export function PopoverContent({ className, children, align = "center", sideOffset = 8, ...p }: React.ComponentProps) { const open = React.useContext(PopoverCtx); return ( {open && ( {children} )} ); } ``` # Progress > A sunken track with a springy clay fill. Docs: https://ui.parlemen.dev/docs/progress ## Installation ```bash npx shadcn@latest add @parlemen/progress ``` ## Usage ```tsx "use client"; import { MinusIcon, PlusIcon, ChartBarIcon } from "@phosphor-icons/react"; import as React from "react"; import { Progress } from "@/components/ui/progress"; import { Button } from "@/components/ui/button"; export default function ProgressDemo() { const [v, setV] = React.useState(35); return ( Votes counted {v}% ); } ``` ## Source (components/ui/progress.tsx) ```tsx "use client"; import * as React from "react"; import * as ProgressPrimitive from "@radix-ui/react-progress"; import { motion } from "motion/react"; import { springs } from "@/lib/motion"; import { cn } from "@/lib/utils"; type Color = "primary" | "secondary" | "tertiary" | "accent" | "success" | "warning" | "danger" | "info"; const fill: Record = { primary: "bg-primary", secondary: "bg-secondary", tertiary: "bg-tertiary", accent: "bg-accent", success: "bg-success", warning: "bg-warning", danger: "bg-danger", info: "bg-info", }; export function Progress({ className, value, color = "primary", ...p }: Omit, "color"> & { color?: Color }) { const v = Math.max(0, Math.min(100, value ?? 0)); return ( ); } ``` # Radio Group > Pick one. The dot pops in. Docs: https://ui.parlemen.dev/docs/radio-group ## Installation ```bash npx shadcn@latest add @parlemen/radio-group ``` ## Usage ```tsx import { CheckCircleIcon, XCircleIcon, CoffeeIcon } from "@phosphor-icons/react/dist/ssr"; import { Label } from "@/components/ui/label"; import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; const options = [ { v: "setuju", l: "Setuju", Icon: CheckCircleIcon, tone: "text-success" }, { v: "tidak", l: "Tidak setuju", Icon: XCircleIcon, tone: "text-danger" }, { v: "abstain", l: "Abstain (lagi ngopi)", Icon: CoffeeIcon, tone: "text-on-surface-muted" }, ]; export default function RadioGroupDemo() { return ( {options.map(({ v, l, Icon, tone }) => ( {l} ))} ); } ``` ## Source (components/ui/radio-group.tsx) ```tsx "use client"; import * as React from "react"; import * as R from "@radix-ui/react-radio-group"; import { motion } from "motion/react"; import { springs } from "@/lib/motion"; import { cn } from "@/lib/utils"; export function RadioGroup({ className, ...p }: React.ComponentProps) { return ; } /** Sunken circle. The primary dot pops in when selected. / export function RadioGroupItem({ className, ...p }: React.ComponentProps) { return ( ); } ``` # Resizable > Drag clay grips to resize panels. Docs: https://ui.parlemen.dev/docs/resizable ## Installation ```bash npx shadcn@latest add @parlemen/resizable ``` ## Usage ```tsx "use client"; import type { Icon } from "@phosphor-icons/react"; import { ChartBarIcon, FileTextIcon, UsersThreeIcon } from "@phosphor-icons/react"; import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable"; function Pane({ icon: PaneIcon, children }: { icon: Icon; children: React.ReactNode }) { return ( {children} ); } export default function ResizableDemo() { return ( Members Bill Votes ); } ``` ## Source (components/ui/resizable.tsx) ```tsx "use client"; import as React from "react"; import { Group, Panel, Separator } from "react-resizable-panels"; import { DotsSixVerticalIcon } from "@phosphor-icons/react"; import { cn } from "@/lib/utils"; /** shadcn-compatible names over react-resizable-panels v4 (Group / Panel / Separator). / export function ResizablePanelGroup({ className, ...p }: React.ComponentProps) { return ; } export function ResizablePanel(p: React.ComponentProps) { return ; } // Separator aria-orientation is "vertical" for a side-by-side split, "horizontal" for stacked panels. export function ResizableHandle({ withHandle, className, ...p }: React.ComponentProps & { withHandle?: boolean }) { return ( {withHandle && ( )} ); } ``` # Scroll Area > Custom scrolling with the clay pill thumb. Docs: https://ui.parlemen.dev/docs/scroll-area ## Installation ```bash npx shadcn@latest add @parlemen/scroll-area ``` ## Usage ```tsx import { TagIcon, UserIcon, UsersThreeIcon } from "@phosphor-icons/react/dist/ssr"; import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; const members = Array.from({ length: 40 }, (_, i) => `Anggota DPR #${String(i + 1).padStart(3, "0")}`); const tags = ["Energi", "Pendidikan", "Kesehatan", "Data", "Pajak", "Lingkungan", "Pangan", "Transportasi", "Digital"]; export default function ScrollAreaDemo() { return ( Members {members.map((m) => ( {m} ))} {tags.map((t) => ( {t} ))} ); } ``` ## Source (components/ui/scroll-area.tsx) ```tsx "use client"; import as React from "react"; import * as S from "@radix-ui/react-scroll-area"; import { cn } from "@/lib/utils"; export function ScrollArea({ className, children, ...p }: React.ComponentProps) { return ( {children} ); } export function ScrollBar({ className, orientation = "vertical", ...p }: React.ComponentProps) { return ( ); } ``` # Select > Custom dropdown in a raised clay popover. Docs: https://ui.parlemen.dev/docs/select ## Installation ```bash npx shadcn@latest add @parlemen/select ``` ## Usage ```tsx import { PaletteIcon, SparkleIcon, CodeIcon, DatabaseIcon } from "@phosphor-icons/react/dist/ssr"; import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from "@/components/ui/select"; export default function SelectDemo() { return ( ); } ``` ## Source (components/ui/select.tsx) ```tsx "use client"; import * as React from "react"; import * as S from "@radix-ui/react-select"; import { motion } from "motion/react"; import { CaretDownIcon, CaretUpIcon, CheckIcon } from "@phosphor-icons/react"; import { springs } from "@/lib/motion"; import { cn } from "@/lib/utils"; export const Select = S.Root; export const SelectGroup = S.Group; export const SelectValue = S.Value; /** Looks like Input: a sunken pill with a caret. */ export function SelectTrigger({ className, children, ...p }: React.ComponentProps) { return ( span]:flex [&>span]:items-center [&>span]:gap-2 [&>span]:truncate [&_svg]:pointer-events-none [&_svg]:size-[1.15em] [&_svg]:shrink-0", className )} {...p} > {children} ); } /** * Raised clay popover that pops in with springs.bouncy. * Radix Select cannot forceMount its content, so it closes instantly (no exit animation). */ export function SelectContent({ className, children, position = "popper", ...p }: React.ComponentProps) { return ( {children} ); } export function SelectLabel({ className, ...p }: React.ComponentProps) { return ; } /** Highlighted item gets a soft primary pill. / export function SelectItem({ className, children, ...p }: React.ComponentProps) { return ( {children} ); } export function SelectSeparator({ className, ...p }: React.ComponentProps) { return ; } export const SelectScrollUpButton = S.ScrollUpButton; export const SelectScrollDownButton = S.ScrollDownButton; ``` # Separator > A soft groove pressed into the surface. Docs: https://ui.parlemen.dev/docs/separator ## Installation ```bash npx shadcn@latest add @parlemen/separator ``` ## Usage ```tsx import { FileTextIcon, UsersThreeIcon, CheckSquareIcon } from "@phosphor-icons/react/dist/ssr"; import { Separator } from "@/components/ui/separator"; export default function SeparatorDemo() { return ( Parlemen UI Soft clay components for civic apps. Bills Votes Members ); } ``` ## Source (components/ui/separator.tsx) ```tsx "use client"; import as React from "react"; import * as SeparatorPrimitive from "@radix-ui/react-separator"; import { cn } from "@/lib/utils"; /** A soft groove pressed into the surface. / export function Separator({ className, orientation = "horizontal", decorative = true, ...p }: React.ComponentProps) { return ( ); } ``` # Sheet > A panel that slides in from any edge. Docs: https://ui.parlemen.dev/docs/sheet ## Installation ```bash npx shadcn@latest add @parlemen/sheet ``` ## Usage ```tsx "use client"; import { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, FloppyDiskIcon, UserCircleIcon } from "@phosphor-icons/react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"; const sides = [ { side: "top", Icon: ArrowUpIcon }, { side: "right", Icon: ArrowRightIcon }, { side: "bottom", Icon: ArrowDownIcon }, { side: "left", Icon: ArrowLeftIcon }, ] as const; export default function SheetDemo() { return ( {sides.map(({ side, Icon }) => ( Edit profil Ubah nama panggilanmu di ruang sidang. ))} ); } ``` ## Source (components/ui/sheet.tsx) ```tsx "use client"; import as React from "react"; import * as D from "@radix-ui/react-dialog"; import { AnimatePresence, motion } from "motion/react"; import { XIcon } from "@phosphor-icons/react"; import { springs } from "@/lib/motion"; import { cn } from "@/lib/utils"; const SheetCtx = React.createContext(false); /** Same API as Radix Dialog, shown as a side sheet. / export function Sheet({ open, defaultOpen, onOpenChange, ...p }: React.ComponentProps) { const [inner, setInner] = React.useState(defaultOpen ?? false); const current = open ?? inner; return ( { setInner(v); onOpenChange?.(v); }} {...p} /> ); } export const SheetTrigger = D.Trigger; export const SheetClose = D.Close; type Side = "top" | "right" | "bottom" | "left"; const sides: Record = { top: { className: "inset-x-3 top-3 max-h-[85vh]", hidden: { y: "-110%" } }, bottom: { className: "inset-x-3 bottom-3 max-h-[85vh]", hidden: { y: "110%" } }, left: { className: "inset-y-3 left-3 w-[min(24rem,calc(100vw-1.5rem))]", hidden: { x: "-110%" } }, right: { className: "inset-y-3 right-3 w-[min(24rem,calc(100vw-1.5rem))]", hidden: { x: "110%" } }, }; export function SheetContent({ className, children, side = "right", ...p }: React.ComponentProps & { side?: Side }) { const open = React.useContext(SheetCtx); const s = sides[side]; return ( {open && ( {children} )} ); } export function SheetHeader({ className, ...p }: React.ComponentProps<"div">) { return ; } export function SheetFooter({ className, ...p }: React.ComponentProps<"div">) { return ; } export function SheetTitle({ className, ...p }: React.ComponentProps) { return ; } export function SheetDescription({ className, ...p }: React.ComponentProps) { return ; } ``` # Sidebar > Grouped vertical navigation. Docs: https://ui.parlemen.dev/docs/sidebar ## Installation ```bash npx shadcn@latest add @parlemen/sidebar ``` ## Usage ```tsx "use client"; import { BellIcon, FolderIcon, GearIcon, HouseIcon, TrayIcon } from "@phosphor-icons/react"; import { Sidebar, SidebarGroup, SidebarItem, SidebarLabel } from "@/components/ui/sidebar"; export default function SidebarDemo() { return ( Workspace Dashboard Projects Inbox Account Notifications Settings ); } ``` ## Source (components/ui/sidebar.tsx) ```tsx "use client"; import as React from "react"; import { LayoutGroup, motion, type Variants } from "motion/react"; import type { Icon } from "@phosphor-icons/react"; import { springs } from "@/lib/motion"; import { ScrollArea } from "@/components/ui/scroll-area"; import { cn } from "@/lib/utils"; const SidebarCtx = React.createContext("sidebar"); /** Items fade in one after another the first time the sidebar mounts. / const list: Variants = { hidden: {}, show: { transition: { staggerChildren: 0.03, delayChildren: 0.05 } }, }; const entry: Variants = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { duration: 0.35, ease: "easeOut" } }, }; export function Sidebar({ className, children, ...p }: React.HTMLAttributes) { const id = React.useId(); return ( )} > {/ Long nav scrolls inside the clay panel with the Parlemen scrollbar instead of the browser's. */} {children} ); } export function SidebarGroup({ className, ...p }: React.HTMLAttributes) { return ( )} /> ); } export function SidebarLabel({ className, ...p }: React.HTMLAttributes) { return ( )} /> ); } const motionCache = new Map(); /** Wrap a link component (e.g. next/link) once so it can animate. */ function motionFor(as: React.ElementType) { if (!motionCache.has(as)) motionCache.set(as, motion.create(as as React.ComponentType)); return motionCache.get(as)!; } export function SidebarItem({ className, active, icon: Icon, as, children, ...p }: React.AnchorHTMLAttributes & { active?: boolean; icon?: Icon; /** Link component to render, e.g. next/link for client-side navigation. Defaults to . / as?: React.ElementType; }) { const id = React.useContext(SidebarCtx); const Comp = (as ? motionFor(as) : motion.a) as typeof motion.a; // Hover/tap are tracked in state rather than whileHover variant labels. A variant label on the item // would make it its own controller and break the cascade it inherits from SidebarGroup. const [hover, setHover] = React.useState(false); const [tap, setTap] = React.useState(false); return ( setHover(true)} onHoverEnd={() => setHover(false)} onTapStart={() => setTap(true)} onTap={() => setTap(false)} onTapCancel={() => setTap(false)} data-active={active || undefined} className={cn( "group relative flex items-center gap-2 rounded-full px-3 py-2 text-sm font-semibold text-on-surface-muted transition-colors duration-200 hover:bg-surface-sunken hover:text-on-surface data-[active]:font-bold data-[active]:text-on-primary data-[active]:hover:bg-transparent", className )} {...(p as React.ComponentProps)} > {/ The active pill is shared across items and slides to the new one. /} {active && ( )} {Icon && ( {/ Icons switch to the filled weight when the item is active. /} )} {/ Label nudges right on hover. /} {children} ); } ``` # Skeleton > Sunken shimmering placeholders while content loads. Docs: https://ui.parlemen.dev/docs/skeleton ## Installation ```bash npx shadcn@latest add @parlemen/skeleton ``` ## Usage ```tsx import { ImageIcon } from "@phosphor-icons/react/dist/ssr"; import { Skeleton } from "@/components/ui/skeleton"; export default function SkeletonDemo() { return ( ); } ``` ## Source (components/ui/skeleton.tsx) ```tsx import as React from "react"; import { cn } from "@/lib/utils"; const css = `@keyframes parlemen-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}} [data-slot=skeleton]::after{animation:parlemen-shimmer 1.6s ease-in-out infinite} @media (prefers-reduced-motion: reduce){[data-slot=skeleton]::after{animation:none;opacity:0}}`; /** Sunken placeholder with a soft shimmer. / export function Skeleton({ className, ...p }: React.HTMLAttributes) { return ( <> ); } ``` # Slider > Drag a clay thumb along a sunken track. Docs: https://ui.parlemen.dev/docs/slider ## Installation ```bash npx shadcn@latest add @parlemen/slider ``` ## Usage ```tsx "use client"; import as React from "react"; import { SpeakerLowIcon, SpeakerHighIcon } from "@phosphor-icons/react"; import { Label } from "@/components/ui/label"; import { Slider } from "@/components/ui/slider"; export default function SliderDemo() { const [v, setV] = React.useState([62]); return ( Kuorum {v[0]}% Anggaran (range) Volume interupsi ); } ``` ## Source (components/ui/slider.tsx) ```tsx "use client"; import * as React from "react"; import * as S from "@radix-ui/react-slider"; import { motion } from "motion/react"; import { springs } from "@/lib/motion"; import { cn } from "@/lib/utils"; /** Sunken track, primary range, clay thumbs that swell while dragged. */ export function Slider({ className, value, defaultValue, min = 0, max = 100, ...p }: React.ComponentProps) { const count = (value ?? defaultValue ?? [min]).length; return ( {Array.from({ length: count }, (_, i) => ( ))} ); } ``` # Sonner > Clay toasts with coloured icons per type. Docs: https://ui.parlemen.dev/docs/sonner ## Installation ```bash npx shadcn@latest add @parlemen/sonner ``` ## Usage ```tsx "use client"; import { CheckCircleIcon, HourglassMediumIcon, InfoIcon, XCircleIcon } from "@phosphor-icons/react"; import { toast } from "sonner"; import { Button } from "@/components/ui/button"; import { Toaster } from "@/components/ui/sonner"; export default function SonnerDemo() { return ( ); } ``` ## Source (components/ui/sonner.tsx) ```tsx "use client"; import { useTheme } from "next-themes"; import { Toaster as Sonner, type ToasterProps } from "sonner"; import { CheckCircleIcon, InfoIcon, SpinnerGapIcon, WarningIcon, XCircleIcon } from "@phosphor-icons/react"; /** Sonner themed with clay. Theme follows next-themes. / export function Toaster({ toastOptions, ...p }: ToasterProps) { const { theme = "system" } = useTheme(); return ( , error: , info: , warning: , loading: , }} toastOptions={{ ...toastOptions, unstyled: true, classNames: { toast: "flex w-full items-center gap-3 rounded-xl bg-surface p-4 text-on-surface shadow-clay font-semibold text-sm", title: "font-bold", description: "font-medium text-on-surface-muted", actionButton: "ml-auto rounded-full bg-primary px-3 py-1.5 text-xs font-bold text-on-primary shadow-clay-sm", cancelButton: "rounded-full bg-surface-sunken px-3 py-1.5 text-xs font-bold shadow-well", icon: "shrink-0", ...toastOptions?.classNames, }, }} {...p} /> ); } ``` # Spinner > Three clay dots hopping in turn. Docs: https://ui.parlemen.dev/docs/spinner ## Installation ```bash npx shadcn@latest add @parlemen/spinner ``` ## Usage ```tsx import { FloppyDiskIcon } from "@phosphor-icons/react/dist/ssr"; import { Spinner } from "@/components/ui/spinner"; import { Button } from "@/components/ui/button"; export default function SpinnerDemo() { return ( ); } ``` ## Source (components/ui/spinner.tsx) ```tsx "use client"; import as React from "react"; import { motion, useReducedMotion } from "motion/react"; import { cn } from "@/lib/utils"; const sizes = { sm: "size-1.5 gap-1", md: "size-2.5 gap-1.5", lg: "size-3.5 gap-2" } as const; /** Three clay dots that hop in sequence. Uses currentColor. / export function Spinner({ className, size = "md", ...p }: React.HTMLAttributes & { size?: keyof typeof sizes }) { const reduce = useReducedMotion(); const [dot, gap] = sizes[size].split(" "); return ( {[0, 1, 2].map((i) => ( ))} ); } ``` # Switch > Clay thumb that slides and squashes. Docs: https://ui.parlemen.dev/docs/switch ## Installation ```bash npx shadcn@latest add @parlemen/switch ``` ## Usage ```tsx import { BellIcon, PauseCircleIcon, ProhibitIcon } from "@phosphor-icons/react/dist/ssr"; import { Label } from "@/components/ui/label"; import { Switch } from "@/components/ui/switch"; export default function SwitchDemo() { return ( Notifikasi sidang Mode reses Hak veto (disabled) ); } ``` ## Source (components/ui/switch.tsx) ```tsx "use client"; import as React from "react"; import * as S from "@radix-ui/react-switch"; import { motion } from "motion/react"; import { springs } from "@/lib/motion"; import { cn } from "@/lib/utils"; const thumb = { off: { x: 0, scaleX: 1, scaleY: 1 }, on: { x: 20, scaleX: 1, scaleY: 1 }, press: { scaleX: 1.18, scaleY: 0.86 }, }; /** Sunken track with a raised clay thumb that slides and squashes while pressed. / export function Switch({ className, checked, defaultChecked, onCheckedChange, ...p }: React.ComponentProps) { const [inner, setInner] = React.useState(defaultChecked ?? false); const on = checked ?? inner; return ( { setInner(v); onCheckedChange?.(v); }} className={cn( "peer inline-flex h-8 w-13 shrink-0 cursor-pointer items-center rounded-full bg-surface-sunken p-1 shadow-well transition-colors duration-200 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary", className )} asChild {...p} > ); } ``` # Table > A raised panel for rows of data. Docs: https://ui.parlemen.dev/docs/table ## Installation ```bash npx shadcn@latest add @parlemen/table ``` ## Usage ```tsx "use client"; import as React from "react"; import { AnimatePresence, motion } from "motion/react"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Badge } from "@/components/ui/badge"; import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "@/components/ui/table"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; import { springs } from "@/lib/motion"; type Status = "Passed" | "Debate" | "Drafting" | "Rejected"; type Color = "primary" | "secondary" | "tertiary" | "accent" | "success" | "warning" | "danger" | "info"; const bills: { id: string; title: string; sponsor: string; photo: string; initials: string; color: Color; committee: string; status: Status; votes: number }[] = [ { id: "RUU-021", title: "Data Protection Amendment", sponsor: "Sari Wulandari", photo: "/avatars/w1.jpg", initials: "SW", color: "primary", committee: "Komisi I", status: "Passed", votes: 412 }, { id: "RUU-034", title: "Green Energy Transition", sponsor: "Bima Pratama", photo: "/avatars/m1.jpg", initials: "BP", color: "secondary", committee: "Komisi VII", status: "Debate", votes: 288 }, { id: "RUU-047", title: "Village Funds Reform", sponsor: "Dewi Lestari", photo: "/avatars/w3.jpg", initials: "DL", color: "tertiary", committee: "Komisi II", status: "Drafting", votes: 0 }, { id: "RUU-052", title: "Public Transit Subsidy", sponsor: "Raka Hidayat", photo: "/avatars/m4.jpg", initials: "RH", color: "accent", committee: "Komisi V", status: "Rejected", votes: 131 }, { id: "RUU-058", title: "Creative Economy Act", sponsor: "Nadia Putri", photo: "/avatars/w5.jpg", initials: "NP", color: "info", committee: "Komisi X", status: "Debate", votes: 254 }, { id: "RUU-063", title: "Coastal Fisheries Protection", sponsor: "Yoga Saputra", photo: "/avatars/m6.jpg", initials: "YS", color: "success", committee: "Komisi IV", status: "Passed", votes: 377 }, ]; const tone = { Passed: "success", Debate: "info", Drafting: "warning", Rejected: "danger" } as const; const filters = ["All", "Passed", "Debate", "Drafting", "Rejected"] as const; export default function TableDemo() { const [filter, setFilter] = React.useState<(typeof filters)[number]>("All"); const rows = filter === "All" ? bills : bills.filter((b) => b.status === filter); const count = (f: (typeof filters)[number]) => (f === "All" ? bills.length : bills.filter((b) => b.status === f).length); return ( {/* Filter chips: the active one gets the sliding pill from ToggleGroup. /} v && setFilter(v as typeof filter)} aria-label="Filter by status"> {filters.map((f) => ( {f} {count(f)} ))} Bills tracked in this session of Parlemen. Bill Sponsor Committee Status Votes {rows.map((b) => ( {b.title} {b.id} {b.initials} {b.sponsor} {b.committee} {b.status} {b.votes} ))} Total votes Total votes cast {rows.reduce((s, b) => s + b.votes, 0)} ); } ``` ## Source (components/ui/table.tsx) ```tsx import as React from "react"; import { cn } from "@/lib/utils"; /** Raised clay panel that clips a plain semantic table. Scrolls sideways on small screens. / export function Table({ className, ...p }: React.TableHTMLAttributes) { return ( ); } export function TableHeader({ className, ...p }: React.HTMLAttributes) { return ; } export function TableBody({ className, ...p }: React.HTMLAttributes) { return ; } export function TableFooter({ className, ...p }: React.HTMLAttributes) { return ; } export function TableRow({ className, ...p }: React.HTMLAttributes) { return ( ); } export function TableHead({ className, ...p }: React.ThHTMLAttributes) { return ( ); } export function TableCell({ className, ...p }: React.TdHTMLAttributes) { return ; } export function TableCaption({ className, ...p }: React.HTMLAttributes) { return ; } ``` # Tabs > Switch between views inside a pressed-in track. Docs: https://ui.parlemen.dev/docs/tabs ## Installation ```bash npx shadcn@latest add @parlemen/tabs ``` ## Usage ```tsx import { BinocularsIcon, PathIcon, RocketLaunchIcon } from "@phosphor-icons/react/dist/ssr"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; export default function TabsDemo() { return ( Overview Process Work The big picture. How we get there. Stuff we shipped. ); } ``` ## Source (components/ui/tabs.tsx) ```tsx "use client"; import as React from "react"; import * as T from "@radix-ui/react-tabs"; import { motion } from "motion/react"; import { springs } from "@/lib/motion"; import { cn } from "@/lib/utils"; const TabsCtx = React.createContext<{ value?: string; id: string }>({ id: "" }); /** Same API as Radix Tabs. Tracks the value so the active pill can slide between triggers. / export function Tabs({ value, defaultValue, onValueChange, ...p }: React.ComponentProps) { const [inner, setInner] = React.useState(defaultValue); const current = value ?? inner; const id = React.useId(); return ( { setInner(v); onValueChange?.(v); }} {...p} /> ); } export function TabsList({ className, ...p }: React.ComponentProps) { // Never wider than its container: on narrow spaces the track scrolls sideways (scrollbar hidden) instead of spilling out. return ( ); } export function TabsTrigger({ className, value, children, ...p }: React.ComponentProps) { const ctx = React.useContext(TabsCtx); const active = ctx.value === value; return ( {active && ( )} {children} ); } export function TabsContent({ className, children, ...p }: React.ComponentProps) { return ( {children} ); } ``` # Textarea > Recessed multi-line field that can auto-grow. Docs: https://ui.parlemen.dev/docs/textarea ## Installation ```bash npx shadcn@latest add @parlemen/textarea ``` ## Usage ```tsx import { ChatTextIcon, PaperPlaneTiltIcon } from "@phosphor-icons/react/dist/ssr"; import { Button } from "@/components/ui/button"; import { Label } from "@/components/ui/label"; import { Textarea } from "@/components/ui/textarea"; export default function TextareaDemo() { return ( Aspirasi rakyat <Button size="sm" className="justify-self-end"><PaperPlaneTiltIcon weight="bold" /> Kirim aspirasi</Button> </div> <div className="grid gap-2"> <Label htmlFor="ta-2" className="pl-1">Auto-grow</Label> <Textarea id="ta-2" autoGrow className="min-h-14" placeholder="Makin panjang, makin tinggi." /> </div> <Textarea aria-invalid defaultValue="Interupsi!" aria-label="Invalid" /> </div> ); } ``` ## Source (components/ui/textarea.tsx) ```tsx import as React from "react"; import { cn } from "@/lib/utils"; export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> { /** Grow with the content instead of scrolling (CSS field-sizing). */ autoGrow?: boolean; } /** Recessed multi-line field, same well as Input. / export function Textarea({ className, autoGrow, ...p }: TextareaProps) { return ( <textarea className={cn( "min-h-28 w-full resize-y rounded-[1.4rem] bg-surface-sunken px-5 py-3.5 font-medium text-on-surface shadow-well outline-none transition-shadow duration-200 placeholder:text-on-surface-muted focus-visible:ring-4 focus-visible:ring-ring/40 disabled:opacity-50 aria-invalid:ring-4 aria-invalid:ring-danger/40", autoGrow && "resize-none [field-sizing:content]", className )} {...p} /> ); } ``` # Toggle > Two-state button that presses into the clay. Docs: https://ui.parlemen.dev/docs/toggle ## Installation ```bash npx shadcn@latest add @parlemen/toggle ``` ## Usage ```tsx "use client"; import { TextBIcon, TextItalicIcon, PushPinIcon } from "@phosphor-icons/react"; import { Toggle } from "@/components/ui/toggle"; export default function ToggleDemo() { return ( <div className="flex flex-wrap items-center gap-3"> <Toggle aria-label="Bold" defaultPressed><TextBIcon weight="bold" /></Toggle> <Toggle aria-label="Italic"><TextItalicIcon weight="bold" /></Toggle> <Toggle variant="clay"><PushPinIcon weight="bold" /> Sematkan</Toggle> <Toggle variant="clay" size="sm" disabled>Disabled</Toggle> </div> ); } ``` ## Source (components/ui/toggle.tsx) ```tsx "use client"; import as React from "react"; import * as T from "@radix-ui/react-toggle"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; export const toggleVariants = cva( "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-full font-bold text-on-surface transition-[box-shadow,background-color,color,scale] duration-150 active:scale-95 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-primary-container data-[state=on]:text-on-primary-container data-[state=on]:shadow-clay-pressed [&_svg]:pointer-events-none [&_svg]:size-[1.15em] [&_svg]:shrink-0", { variants: { variant: { default: "bg-transparent hover:bg-surface-sunken", clay: "bg-surface shadow-clay-sm", }, size: { sm: "h-9 min-w-9 px-3 text-sm", default: "h-11 min-w-11 px-4", lg: "h-13 min-w-13 px-5 text-lg", }, }, defaultVariants: { variant: "default", size: "default" }, } ); /** Two-state button. Pressed = pushed into the clay with primary-container colours. / export function Toggle({ className, variant, size, ...p }: React.ComponentProps<typeof T.Root> & VariantProps<typeof toggleVariants>) { return <T.Root className={cn(toggleVariants({ variant, size }), className)} {...p} />; } ``` # Toggle Group > Toggles in a track with a sliding pill. Docs: https://ui.parlemen.dev/docs/toggle-group ## Installation ```bash npx shadcn@latest add @parlemen/toggle-group ``` ## Usage ```tsx "use client"; import { TextAlignCenterIcon, TextAlignLeftIcon, TextAlignRightIcon, TextBIcon, TextItalicIcon, TextUnderlineIcon } from "@phosphor-icons/react"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; export default function ToggleGroupDemo() { return ( <div className="grid justify-items-start gap-5"> <ToggleGroup type="single" defaultValue="center" aria-label="Alignment"> <ToggleGroupItem value="left" aria-label="Left"><TextAlignLeftIcon weight="bold" /></ToggleGroupItem> <ToggleGroupItem value="center" aria-label="Center"><TextAlignCenterIcon weight="bold" /></ToggleGroupItem> <ToggleGroupItem value="right" aria-label="Right"><TextAlignRightIcon weight="bold" /></ToggleGroupItem> </ToggleGroup> <ToggleGroup type="single" defaultValue="minggu" size="sm" aria-label="Periode"> <ToggleGroupItem value="hari">Hari</ToggleGroupItem> <ToggleGroupItem value="minggu">Minggu</ToggleGroupItem> <ToggleGroupItem value="periode">Satu periode</ToggleGroupItem> </ToggleGroup> <ToggleGroup type="multiple" defaultValue={["b"]} aria-label="Format"> <ToggleGroupItem value="b" aria-label="Bold"><TextBIcon weight="bold" /></ToggleGroupItem> <ToggleGroupItem value="i" aria-label="Italic"><TextItalicIcon weight="bold" /></ToggleGroupItem> <ToggleGroupItem value="u" aria-label="Underline"><TextUnderlineIcon weight="bold" /></ToggleGroupItem> </ToggleGroup> </div> ); } ``` ## Source (components/ui/toggle-group.tsx) ```tsx "use client"; import as React from "react"; import * as G from "@radix-ui/react-toggle-group"; import { motion } from "motion/react"; import type { VariantProps } from "class-variance-authority"; import { springs } from "@/lib/motion"; import { cn } from "@/lib/utils"; import { toggleVariants } from "@/components/ui/toggle"; type Size = VariantProps<typeof toggleVariants>["size"]; const Ctx = React.createContext<{ single: boolean; value?: string; id: string; size: Size }>({ single: false, id: "", size: "default" }); /** * Same API as Radix ToggleGroup, sitting in a sunken track. * With type="single" the active item gets a pill that slides between items. / export function ToggleGroup(props: React.ComponentProps<typeof G.Root> & { size?: Size }) { const id = React.useId(); const cls = cn("inline-flex items-center gap-1 rounded-full bg-surface-sunken p-1.5 shadow-well", props.className); const [inner, setInner] = React.useState(props.type === "single" ? props.defaultValue : undefined); if (props.type === "single") { const { value, defaultValue: _d, onValueChange, size = "default", className: _c, ...p } = props; void _d; void _c; const current = value ?? inner; return ( <Ctx.Provider value={{ single: true, value: current, id, size }}> <G.Root {...p} type="single" value={current ?? ""} onValueChange={(v) => { setInner(v); onValueChange?.(v); }} className={cls} /> </Ctx.Provider> ); } const { size = "default", className: _c, ...p } = props; void _c; return ( <Ctx.Provider value={{ single: false, id, size }}> <G.Root {...p} className={cls} /> </Ctx.Provider> ); } export function ToggleGroupItem({ className, value, children, ...p }: React.ComponentProps<typeof G.Item>) { const ctx = React.useContext(Ctx); const active = ctx.single && ctx.value === value; return ( <G.Item value={value} className={cn( toggleVariants({ size: ctx.size }), "relative hover:bg-transparent hover:text-on-surface", ctx.single ? "data-[state=on]:bg-transparent data-[state=on]:text-on-primary data-[state=on]:shadow-none" : "data-[state=on]:bg-primary data-[state=on]:text-on-primary data-[state=on]:shadow-clay-sm", className )} {...p} > {active && ( <motion.span layoutId={`${ctx.id}-pill`} className="absolute inset-0 rounded-full bg-primary shadow-clay-sm" transition={springs.snappy} /> )} <span className="relative inline-flex items-center gap-2">{children}</span> </G.Item> ); } ``` # Tooltip > Tiny inverse pill that pops in on hover. Docs: https://ui.parlemen.dev/docs/tooltip ## Installation ```bash npx shadcn@latest add @parlemen/tooltip ``` ## Usage ```tsx "use client"; import { HeartIcon, ShareNetworkIcon, BookmarkSimpleIcon } from "@phosphor-icons/react"; import { Button } from "@/components/ui/button"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; const actions = [ { label: "Suka", Icon: HeartIcon }, { label: "Bagikan", Icon: ShareNetworkIcon }, { label: "Simpan", Icon: BookmarkSimpleIcon }, ]; export default function TooltipDemo() { return ( <TooltipProvider> <div className="flex gap-3"> {actions.map(({ label, Icon }) => ( <Tooltip key={label}> <TooltipTrigger asChild> <Button size="icon" variant="soft" color="neutral" aria-label={label}> <Icon weight="bold" /> </Button> </TooltipTrigger> <TooltipContent>{label}</TooltipContent> </Tooltip> ))} </div> </TooltipProvider> ); } ``` ## Source (components/ui/tooltip.tsx) ```tsx "use client"; import as React from "react"; import * as T from "@radix-ui/react-tooltip"; import { AnimatePresence, motion } from "motion/react"; import { springs } from "@/lib/motion"; import { cn } from "@/lib/utils"; const TooltipCtx = React.createContext(false); export function TooltipProvider({ delayDuration = 150, ...p }: React.ComponentProps<typeof T.Provider>) { return <T.Provider delayDuration={delayDuration} {...p} />; } /** Same API as Radix Tooltip. Wraps itself in a provider so it works standalone. / export function Tooltip({ open, defaultOpen, onOpenChange, ...p }: React.ComponentProps<typeof T.Root>) { const [inner, setInner] = React.useState(defaultOpen ?? false); const current = open ?? inner; return ( <TooltipProvider> <TooltipCtx.Provider value={current}> <T.Root open={current} onOpenChange={(v) => { setInner(v); onOpenChange?.(v); }} {...p} /> </TooltipCtx.Provider> </TooltipProvider> ); } export const TooltipTrigger = T.Trigger; export function TooltipContent({ className, children, sideOffset = 6, ...p }: React.ComponentProps<typeof T.Content>) { const open = React.useContext(TooltipCtx); return ( <AnimatePresence> {open && ( <T.Portal forceMount> <T.Content asChild forceMount sideOffset={sideOffset} {...p}> <motion.div className={cn( "z-50 rounded-full bg-surface-inverse px-3 py-1.5 text-xs font-bold text-on-surface-inverse shadow-clay-sm", className )} style={{ transformOrigin: "var(--radix-tooltip-content-transform-origin)" }} initial={{ opacity: 0, scale: 0.6, y: 4 }} animate={{ opacity: 1, scale: 1, y: 0 }} exit={{ opacity: 0, scale: 0.85, transition: { duration: 0.12 } }} transition={springs.bouncy} > {children} </motion.div> </T.Content> </T.Portal> )} </AnimatePresence> ); } ``` # Typography > Headings, text, quotes, lists and tables on tokens. Docs: https://ui.parlemen.dev/docs/typography ## Installation ```bash npx shadcn@latest add @parlemen/typography ``` ## Usage ```tsx import { QuotesIcon } from "@phosphor-icons/react/dist/ssr"; import { TypographyBlockquote, TypographyH1, TypographyH2, TypographyH3, TypographyH4, TypographyInlineCode, TypographyLarge, TypographyLead, TypographyList, TypographyMuted, TypographyP, TypographySmall, } from "@/components/ui/typography"; export default function TypographyDemo() { return ( <article className="w-full max-w-2xl text-on-surface"> <TypographyH1>The People's Pudding Act</TypographyH1> <TypographyLead className="mt-4">A short tale of how one chamber learned to share dessert.</TypographyLead> <TypographyH2 className="mt-10">The motion</TypographyH2> <TypographyP> It began when the member for Sweetwater proposed that every Friday session end with pudding. The motion was filed as{" "} <TypographyInlineCode>bill/2026-042</TypographyInlineCode> and immediately caused a stir. </TypographyP> <TypographyBlockquote> <QuotesIcon weight="fill" className="mr-1.5 inline size-5 -translate-y-0.5 align-middle text-primary" /> “A chamber that eats together, votes together.” The Speaker, probably </TypographyBlockquote> <TypographyH3 className="mt-8">Amendments</TypographyH3> <TypographyList> <li>Chocolate on odd weeks, vanilla on even weeks</li> <li>Spoons provided by the opposition</li> <li>No pudding during budget debates</li> </TypographyList> <TypographyH4>Final tally</TypographyH4> <div className="my-5 w-full overflow-hidden rounded-xl bg-surface shadow-clay-sm"> <table className="w-full text-sm"> <thead className="bg-surface-sunken"> <tr> <th className="px-4 py-2 text-left font-bold">Party</th> <th className="px-4 py-2 text-right font-bold">Ayes</th> </tr> </thead> <tbody className="font-medium"> <tr className="border-t border-outline/60"> <td className="px-4 py-2">Sweet Coalition</td> <td className="px-4 py-2 text-right">58</td> </tr> <tr className="border-t border-outline/60"> <td className="px-4 py-2">Savoury Front</td> <td className="px-4 py-2 text-right">31</td> </tr> </tbody> </table> </div> <div className="flex flex-col gap-2"> <TypographyLarge>Motion carried.</TypographyLarge> <TypographySmall>Recorded 14 Nov 2026</TypographySmall> <TypographyMuted>Pudding served at 16:00.</TypographyMuted> </div> </article> ); } ``` ## Source (components/ui/typography.tsx) ```tsx import as React from "react"; import { cn } from "@/lib/utils"; type P<T> = React.HTMLAttributes<T>; export const TypographyH1 = ({ className, ...p }: P<HTMLHeadingElement>) => ( <h1 className={cn("scroll-m-20 text-4xl font-extrabold tracking-tight text-balance lg:text-5xl", className)} {...p} /> ); export const TypographyH2 = ({ className, ...p }: P<HTMLHeadingElement>) => ( <h2 className={cn("scroll-m-20 pb-2 text-3xl font-extrabold tracking-tight first:mt-0", className)} {...p} /> ); export const TypographyH3 = ({ className, ...p }: P<HTMLHeadingElement>) => ( <h3 className={cn("scroll-m-20 text-2xl font-extrabold tracking-tight", className)} {...p} /> ); export const TypographyH4 = ({ className, ...p }: P<HTMLHeadingElement>) => ( <h4 className={cn("scroll-m-20 text-xl font-bold tracking-tight", className)} {...p} /> ); export const TypographyP = ({ className, ...p }: P<HTMLParagraphElement>) => ( <p className={cn("font-medium leading-7 [&:not(:first-child)]:mt-5", className)} {...p} /> ); export const TypographyLead = ({ className, ...p }: P<HTMLParagraphElement>) => ( <p className={cn("text-xl font-medium text-on-surface-muted", className)} {...p} /> ); export const TypographyLarge = ({ className, ...p }: P<HTMLDivElement>) => ( <div className={cn("text-lg font-bold", className)} {...p} /> ); export const TypographySmall = ({ className, ...p }: P<HTMLElement>) => ( <small className={cn("text-sm font-bold leading-none", className)} {...p} /> ); export const TypographyMuted = ({ className, ...p }: P<HTMLParagraphElement>) => ( <p className={cn("text-sm font-medium text-on-surface-muted", className)} {...p} /> ); export const TypographyBlockquote = ({ className, ...p }: P<HTMLQuoteElement>) => ( <blockquote className={cn("mt-6 rounded-xl bg-tertiary-container px-6 py-4 font-semibold italic text-on-tertiary-container shadow-clay-sm", className)} {...p} /> ); export const TypographyList = ({ className, ...p }: P<HTMLUListElement>) => ( <ul className={cn("my-5 ml-6 list-disc font-medium marker:text-primary [&>li]:mt-2", className)} {...p} /> ); export const TypographyInlineCode = ({ className, ...p }: P<HTMLElement>) => ( <code className={cn("rounded-[0.6rem] bg-surface-sunken px-1.5 py-0.5 font-mono text-sm font-bold shadow-well", className)} {...p} /> ); ```