{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"settings-page","type":"registry:block","title":"Settings Page","description":"Account settings with a side nav whose pill glides between Profile, Notifications, Appearance and Billing, sections built from inline edits, switches, selects, toggle groups and usage bars, a draft that slides up a sticky unsaved-changes bar with Reset and an async Save that shakes on failure, and a danger zone behind a type-to-confirm dialog.","author":"kara ","dependencies":["clsx","lucide-react","motion","tailwind-merge"],"registryDependencies":[],"files":[{"path":"components/motion/settings-page.tsx","type":"registry:component","target":"@components/motion/settings-page.tsx","content":"\"use client\";\n// karaui.kamisama-v0.my.id/components/blocks/settings-page\n\nimport {\n Bell,\n CreditCard,\n type LucideIcon,\n Monitor,\n Moon,\n Palette,\n Sun,\n Trash2,\n User,\n} from \"lucide-react\";\nimport {\n AnimatePresence,\n animate,\n LayoutGroup,\n motion,\n useReducedMotion,\n} from \"motion/react\";\nimport { type ReactNode, useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { Badge } from \"@/components/motion/badge\";\nimport { Button, StatefulButton } from \"@/components/motion/button\";\nimport {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogConfirmInput,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogTitle,\n AlertDialogTrigger,\n} from \"@/components/motion/dialog\";\nimport { InlineEdit } from \"@/components/motion/inline-edit\";\nimport { Progress } from \"@/components/motion/progress\";\nimport { ScrollArea } from \"@/components/motion/scroll-area\";\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/motion/select\";\nimport { Switch } from \"@/components/motion/switch\";\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/motion/toggle-group\";\nimport { EASE_OUT, SPRING_LAYOUT, SPRING_PANEL } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\nexport type SettingsSection = \"profile\" | \"notifications\" | \"appearance\" | \"billing\";\n\nexport type SettingsValues = {\n name: string;\n username: string;\n email: string;\n bio: string;\n notifyMentions: boolean;\n notifyComments: boolean;\n notifyProduct: boolean;\n digest: \"off\" | \"daily\" | \"weekly\";\n theme: \"system\" | \"light\" | \"dark\";\n density: \"comfortable\" | \"compact\";\n reduceMotion: boolean;\n};\n\nexport type SettingsBilling = {\n plan: string;\n price: string;\n renewal: string;\n seats: { used: number; total: number };\n storage: { used: number; total: number; unit: string };\n /** Display-only label such as \"Card ending 4242\". Never real card data. */\n paymentMethod?: string;\n};\n\nexport interface SettingsPageProps {\n defaultValues?: Partial;\n /** Persist the draft. Reject to keep the bar open with an error and a shake. */\n onSave?: (values: SettingsValues) => void | Promise;\n /** Fires after the type-to-confirm dialog. */\n onDeleteAccount?: () => void | Promise;\n onManageBilling?: () => void;\n /** Controlled active section. */\n section?: SettingsSection;\n defaultSection?: SettingsSection;\n onSectionChange?: (section: SettingsSection) => void;\n billing?: SettingsBilling;\n className?: string;\n}\n\nconst DEFAULT_VALUES: SettingsValues = {\n name: \"Ada Lovelace\",\n username: \"ada\",\n email: \"ada@example.com\",\n bio: \"Writing the first programs for engines that don't exist yet.\",\n notifyMentions: true,\n notifyComments: true,\n notifyProduct: false,\n digest: \"weekly\",\n theme: \"system\",\n density: \"comfortable\",\n reduceMotion: false,\n};\n\nconst DEFAULT_BILLING: SettingsBilling = {\n plan: \"Pro\",\n price: \"$12 / month\",\n renewal: \"Renews Nov 14, 2026\",\n seats: { used: 3, total: 5 },\n storage: { used: 18, total: 50, unit: \"GB\" },\n paymentMethod: \"Card ending 4242\",\n};\n\nconst SECTIONS: { id: SettingsSection; label: string; icon: LucideIcon }[] = [\n { id: \"profile\", label: \"Profile\", icon: User },\n { id: \"notifications\", label: \"Notifications\", icon: Bell },\n { id: \"appearance\", label: \"Appearance\", icon: Palette },\n { id: \"billing\", label: \"Billing\", icon: CreditCard },\n];\n\nconst EMAIL_PATTERN = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\nconst USERNAME_PATTERN = /^[a-z0-9_]{3,20}$/;\nconst SHAKE = { x: [0, -6, 6, -4, 4, -2, 0] };\nconst SAVED_HOLD_MS = 1100;\n\nfunction SettingRow({\n title,\n description,\n children,\n stacked,\n}: {\n title: string;\n description?: string;\n children: ReactNode;\n stacked?: boolean;\n}) {\n return (\n \n
\n

{title}

\n {description ? (\n

{description}

\n ) : null}\n
\n {children}\n \n );\n}\n\nfunction SectionHeading({ title, description }: { title: string; description: string }) {\n return (\n
\n

{title}

\n

{description}

\n
\n );\n}\n\n/**\n * Account settings block: a side nav whose active pill glides between\n * Profile / Notifications / Appearance / Billing, sections built from\n * `InlineEdit`, `Switch`, `Select`, `ToggleGroup` and `Progress`, a draft that\n * raises a sticky \"unsaved changes\" bar (Save via `StatefulButton`, Reset)\n * and a danger zone behind a type-to-confirm `AlertDialog`.\n */\nexport function SettingsPage({\n defaultValues,\n onSave,\n onDeleteAccount,\n onManageBilling,\n section: sectionProp,\n defaultSection = \"profile\",\n onSectionChange,\n billing = DEFAULT_BILLING,\n className,\n}: SettingsPageProps) {\n const reduce = useReducedMotion();\n const navId = useId();\n\n const [internalSection, setInternalSection] = useState(defaultSection);\n const section = sectionProp ?? internalSection;\n const selectSection = (next: SettingsSection) => {\n if (sectionProp === undefined) setInternalSection(next);\n onSectionChange?.(next);\n };\n\n const [saved, setSaved] = useState(() => ({\n ...DEFAULT_VALUES,\n ...defaultValues,\n }));\n const [draft, setDraft] = useState(saved);\n const [saveState, setSaveState] = useState<\"idle\" | \"loading\" | \"success\" | \"error\">(\n \"idle\",\n );\n const barRef = useRef(null);\n\n const changed = useMemo(\n () => (Object.keys(draft) as (keyof SettingsValues)[]).filter((k) => draft[k] !== saved[k]),\n [draft, saved],\n );\n const dirty = changed.length > 0;\n const showBar = dirty || saveState === \"success\";\n\n useEffect(() => {\n if (saveState !== \"success\") return;\n const id = window.setTimeout(() => setSaveState(\"idle\"), SAVED_HOLD_MS);\n return () => window.clearTimeout(id);\n }, [saveState]);\n\n const set = (key: K, value: SettingsValues[K]) => {\n setDraft((prev) => ({ ...prev, [key]: value }));\n if (saveState === \"error\") setSaveState(\"idle\");\n };\n\n const save = async () => {\n setSaveState(\"loading\");\n try {\n await onSave?.(draft);\n setSaved(draft);\n setSaveState(\"success\");\n } catch {\n setSaveState(\"error\");\n if (!reduce && barRef.current) {\n animate(barRef.current, SHAKE, { duration: 0.42, ease: EASE_OUT });\n }\n }\n };\n\n const reset = () => {\n setDraft(saved);\n setSaveState(\"idle\");\n };\n\n const fade = reduce\n ? { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }\n : {\n initial: { opacity: 0, y: 8 },\n animate: { opacity: 1, y: 0 },\n exit: { opacity: 0, y: -4 },\n };\n\n let content: ReactNode;\n switch (section) {\n case \"profile\":\n content = (\n <>\n \n
\n \n {draft.name.trim().slice(0, 1).toUpperCase() || \"?\"}\n \n
\n

{draft.name}

\n

@{draft.username}

\n
\n
\n \n (next.trim() ? null : \"Name can't be empty.\")}\n onSave={(next) => set(\"name\", next.trim())}\n />\n \n \n \n USERNAME_PATTERN.test(next) ? null : \"Use 3–20 of a–z, 0–9 or _.\"\n }\n onSave={(next) => set(\"username\", next)}\n />\n \n \n \n EMAIL_PATTERN.test(next) ? null : \"That doesn't look like an email address.\"\n }\n onSave={(next) => set(\"email\", next.trim())}\n />\n \n \n set(\"bio\", next)}\n />\n \n\n
\n

Danger zone

\n
\n

\n Permanently delete your account and everything in it.\n

\n \n \n \n Delete account\n \n \n \n Delete your account?\n \n This removes your profile, projects and billing history. It\n can't be undone.\n \n \n \n \n \n void onDeleteAccount?.()}>\n Delete account\n \n \n \n \n
\n
\n \n );\n break;\n case \"notifications\":\n content = (\n <>\n \n \n set(\"notifyMentions\", next)}\n />\n \n \n set(\"notifyComments\", next)}\n />\n \n \n set(\"notifyProduct\", next)}\n />\n \n \n set(\"digest\", next as SettingsValues[\"digest\"])}\n className=\"w-32 shrink-0\"\n >\n \n \n \n \n Off\n Daily\n Weekly\n \n \n \n \n );\n break;\n case \"appearance\":\n content = (\n <>\n \n \n set(\"theme\", next as SettingsValues[\"theme\"])}\n className=\"w-fit\"\n >\n \n \n System\n \n \n \n Light\n \n \n \n Dark\n \n \n \n \n set(\"density\", next as SettingsValues[\"density\"])}\n className=\"w-fit\"\n >\n Comfortable\n Compact\n \n \n \n set(\"reduceMotion\", next)}\n />\n \n \n );\n break;\n case \"billing\":\n content = (\n <>\n \n
\n
\n
\n

{billing.plan} plan

\n \n Active\n \n
\n

\n {billing.price} · {billing.renewal}\n

\n
\n \n
\n
\n `${billing.seats.used} of ${billing.seats.total}`}\n trackClassName=\"bg-foreground/10\"\n />\n \n
\n {billing.paymentMethod ? (\n \n \n \n ) : null}\n \n );\n break;\n }\n\n return (\n
\n
\n \n \n {SECTIONS.map((item) => {\n const active = item.id === section;\n const Icon = item.icon;\n return (\n selectSection(item.id)}\n className={cn(\n \"relative flex shrink-0 items-center gap-2.5 rounded-xl px-3 py-2 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring\",\n active ? \"text-foreground\" : \"text-muted-foreground hover:text-foreground\",\n )}\n >\n {active ? (\n \n ) : null}\n \n {item.label}\n \n );\n })}\n \n \n\n
\n \n
\n \n \n {content}\n \n \n
\n \n\n \n {showBar ? (\n \n \n

\n {saveState === \"success\"\n ? \"All changes saved\"\n : saveState === \"error\"\n ? \"Couldn't save. Try again.\"\n : `${changed.length} unsaved ${changed.length === 1 ? \"change\" : \"changes\"}`}\n

\n
\n \n Reset\n \n void save()}\n disabled={!dirty && saveState !== \"success\"}\n >\n Save\n \n
\n
\n \n ) : null}\n \n
\n
\n \n );\n}\n"},{"path":"components/motion/badge.tsx","type":"registry:component","target":"@components/motion/badge.tsx","content":"\"use client\";\n\nimport { X } from \"lucide-react\";\nimport {\n AnimatePresence,\n motion,\n PresenceContext,\n useAnimate,\n useReducedMotion,\n type Variants,\n} from \"motion/react\";\nimport {\n type KeyboardEvent as ReactKeyboardEvent,\n type ReactNode,\n useContext,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { EASE_OUT, SPRING_LAYOUT, SPRING_PANEL, SPRING_SWAP } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\nexport type BadgeVariant =\n | \"default\"\n | \"secondary\"\n | \"outline\"\n | \"destructive\"\n | \"success\"\n | \"warning\";\n\nexport type BadgeSize = \"sm\" | \"md\" | \"lg\";\n\n/** Soft tinted surface or a filled one. Only the status variants differ. */\nexport type BadgeTone = \"soft\" | \"solid\";\n\nconst BASE: Record<\"default\" | \"secondary\" | \"outline\", string> = {\n default: \"border-transparent bg-primary text-primary-foreground\",\n secondary: \"border-transparent bg-foreground/[0.07] text-foreground\",\n outline: \"border-border-strong bg-transparent text-foreground\",\n};\n\n// Status tints mix the token toward --foreground/--background (as `alert`\n// does), so the text keeps its contrast in both themes and every design style.\nconst SOFT: Record<\"destructive\" | \"success\" | \"warning\", string> = {\n destructive:\n \"border-[color-mix(in_oklab,var(--destructive)_30%,transparent)] bg-[color-mix(in_oklab,var(--destructive)_10%,var(--background))] text-[color-mix(in_oklab,var(--destructive)_78%,var(--foreground))]\",\n success:\n \"border-[color-mix(in_oklab,var(--success)_32%,transparent)] bg-[color-mix(in_oklab,var(--success)_11%,var(--background))] text-[color-mix(in_oklab,var(--success)_60%,var(--foreground))]\",\n warning:\n \"border-[color-mix(in_oklab,var(--warning)_40%,transparent)] bg-[color-mix(in_oklab,var(--warning)_13%,var(--background))] text-[color-mix(in_oklab,var(--warning)_52%,var(--foreground))]\",\n};\n\n// Filled status badges. Red reads best with light text in both themes;\n// green and amber are light hues, so they always get dark text.\nconst SOLID: Record<\"destructive\" | \"success\" | \"warning\", string> = {\n destructive:\n \"border-transparent bg-destructive text-background dark:text-foreground\",\n success:\n \"border-transparent bg-success text-[color-mix(in_oklab,var(--success)_22%,var(--foreground))] dark:text-[color-mix(in_oklab,var(--success)_22%,var(--background))]\",\n warning:\n \"border-transparent bg-warning text-[color-mix(in_oklab,var(--warning)_22%,var(--foreground))] dark:text-[color-mix(in_oklab,var(--warning)_22%,var(--background))]\",\n};\n\nconst SIZE: Record = {\n sm: \"h-5 gap-1 px-1.5 text-[11px] [&_svg]:size-3\",\n md: \"h-6 gap-1.5 px-2 text-xs [&_svg]:size-3.5\",\n lg: \"h-7 gap-1.5 px-2.5 text-[13px] [&_svg]:size-3.5\",\n};\n\n// Count badges are circles at one digit and pills beyond.\nconst COUNT_SIZE: Record = {\n sm: \"h-4 min-w-4 px-1 text-[10px]\",\n md: \"h-5 min-w-5 px-1.5 text-[11px]\",\n lg: \"h-6 min-w-6 px-1.5 text-xs\",\n};\n\nfunction variantClass(variant: BadgeVariant, tone: BadgeTone) {\n if (variant === \"default\" || variant === \"secondary\" || variant === \"outline\") {\n return BASE[variant];\n }\n return tone === \"solid\" ? SOLID[variant] : SOFT[variant];\n}\n\nexport interface BadgeProps {\n children?: ReactNode;\n variant?: BadgeVariant;\n /** Status variants only (destructive/success/warning). Default \"soft\". */\n tone?: BadgeTone;\n size?: BadgeSize;\n /** Leading status dot in the text color; `\"pulse\"` adds a radiating ring. */\n dot?: boolean | \"pulse\";\n /** Leading icon (sized to the badge). Ignored when `dot` is set. */\n icon?: ReactNode;\n /**\n * Makes the badge removable: an × button plays the exit, then calls this.\n * Focus moves to the neighbouring chip's × when the removal came from it.\n */\n onRemove?: () => void;\n /** Accessible name of the × button. Default `Remove `. */\n removeLabel?: string;\n /**\n * Count mode: renders a compact number that rolls up or down as it changes\n * and bumps when it rises. Hidden at 0 unless `showZero`.\n */\n count?: number;\n /** Counts above this read \"max+\". Default 99. */\n max?: number;\n showZero?: boolean;\n /** Spoken label for count mode, e.g. `(n) => \\`${n} unread\\``. */\n countLabel?: (count: number) => string;\n className?: string;\n}\n\n/**\n * General-purpose badge: six variants, three sizes, an optional (pulsing) dot\n * or icon, removable chips with an exit animation, and a count mode with\n * rolling digits capped at \"99+\". For animated status transitions\n * (loading → success) use `AnimatedBadge` instead.\n */\nexport function Badge(props: BadgeProps) {\n if (props.count !== undefined) return ;\n return ;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Label badge */\n/* -------------------------------------------------------------------------- */\n\nfunction LabelBadge({\n children,\n variant = \"default\",\n tone = \"soft\",\n size = \"md\",\n dot = false,\n icon,\n onRemove,\n removeLabel,\n className,\n}: BadgeProps) {\n const reduce = useReducedMotion() ?? false;\n // Inside an AnimatePresence the badge pops in when added; anywhere else it\n // renders as-is so server HTML is visible before hydration.\n const inPresence = useContext(PresenceContext) !== null;\n const rootRef = useRef(null);\n const [leaving, setLeaving] = useState(false);\n const refocus = useRef(null);\n const removable = Boolean(onRemove);\n\n const hidden = reduce ? { opacity: 0 } : { opacity: 0, scale: 0.8 };\n\n const startRemove = (fromKeyboardFocus: boolean) => {\n if (leaving) return;\n if (fromKeyboardFocus) refocus.current = neighbourRemoveButton(rootRef.current);\n setLeaving(true);\n };\n\n const finishRemove = () => {\n if (!leaving) return;\n const target = refocus.current;\n refocus.current = null;\n onRemove?.();\n if (target) requestAnimationFrame(() => target.focus({ preventScroll: true }));\n };\n\n const text = typeof children === \"string\" ? children : undefined;\n\n return (\n