{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "settings-page", "title": "Settings Page", "type": "registry:page", "description": "Linear-style settings shell: a nav rail of icon sections (collapses to a horizontal tab strip on narrow screens) switching between fully composed panels — profile form with sticky save bar, notification switches, theme picker, workspace identity, billing summary, and a type-to-confirm danger zone. Swap the panel internals for your own forms.", "categories": [ "layout", "dashboard" ], "files": [ { "path": "packages/elements-lit/src/blocks/settings-page/settings-page.ts", "content": "import { LitElement, css, html, nothing } from 'lit'\nimport { Bell, Building2, CreditCard, Palette, TriangleAlert, User, type IconNode } from 'lucide'\nimport { cn } from '../../lib/utils'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\nimport { icon } from '../../lib/icon'\n// Side-effect imports: register the composed elements for standalone use\n// (consumers who install only this block still get working primitives).\nimport '../../components/button/button'\nimport '../../components/dialog/dialog'\nimport '../../components/input/input'\nimport type { UipInput } from '../../components/input/input'\nimport '../../components/label/label'\nimport '../../components/section-card/section-card'\nimport '../../components/select/select'\nimport '../../components/separator/separator'\nimport '../../components/switch/switch'\nimport type { UipSwitch } from '../../components/switch/switch'\nimport '../../components/textarea/textarea'\n\nexport type SettingsSectionId = 'profile' | 'notifications' | 'appearance' | 'workspace' | 'billing' | 'danger'\n\nexport interface SettingsSection {\n id: SettingsSectionId\n label: string\n /** Lucide icon node (React's `icon` component becomes data — see `icon()` usage below). */\n icon: IconNode\n}\n\nconst defaultSections: SettingsSection[] = [\n { id: 'profile', label: 'Profile', icon: User },\n { id: 'notifications', label: 'Notifications', icon: Bell },\n { id: 'appearance', label: 'Appearance', icon: Palette },\n { id: 'workspace', label: 'Workspace', icon: Building2 },\n { id: 'billing', label: 'Billing', icon: CreditCard },\n { id: 'danger', label: 'Danger zone', icon: TriangleAlert },\n]\n\n// Kebab names for icon()'s lucide- class (React parity). Custom\n// sections should reuse one of these nodes; unknown nodes fall back to\n// rendering without the lucide- suffix.\nconst iconNames = new Map([\n [User, 'user'],\n [Bell, 'bell'],\n [Palette, 'palette'],\n [Building2, 'building-2'],\n [CreditCard, 'credit-card'],\n [TriangleAlert, 'triangle-alert'],\n])\n\n/**\n * — the registry SettingsPage block as a web component.\n *\n * Class strings are React's SettingsPage verbatim. React state (useState)\n * becomes { state: true } fields. `sections` is a JS property (same ids as\n * React; icons are lucide IconNodes — React's component references become\n * data). `initialSection` is React's `initialSection` prop\n * (`initial-section` attribute). There are no onX callbacks in React, so no\n * CustomEvents.\n */\nexport class UipSettingsPage extends LitElement {\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n // :host display can't be a utility class (the host has no template of its own).\n static styles = [tailwind, css`:host { display: block; }`]\n\n static properties = {\n sections: { attribute: false },\n initialSection: { attribute: 'initial-section' },\n active: { state: true },\n notifyEmail: { state: true },\n notifyPush: { state: true },\n notifyDigest: { state: true },\n themeChoice: { state: true },\n deleteOpen: { state: true },\n deleteConfirm: { state: true },\n }\n\n sections: SettingsSection[] = defaultSections\n initialSection: SettingsSectionId = 'profile'\n private active: SettingsSectionId = 'profile'\n private notifyEmail = true\n private notifyPush = false\n private notifyDigest = true\n private themeChoice: 'light' | 'dark' | 'system' = 'system'\n private deleteOpen = false\n private deleteConfirm = ''\n\n constructor() {\n super()\n new ThemeController(this)\n }\n\n connectedCallback() {\n super.connectedCallback()\n this.setAttribute('data-uipkge', '')\n this.setAttribute('data-slot', 'settings-page')\n this.active = this.initialSection\n }\n\n private toggleRow(heading: string, description: string, checked: boolean, onChange: (v: boolean) => void) {\n return html`\n
  • \n
    \n

    ${heading}

    \n

    ${description}

    \n
    \n onChange((e.target as UipSwitch).checked)}\n >\n
    • \n `\n }\n\n render() {\n return html`\n
    \n \n\n
    \n ${this.active === 'profile'\n ? html`\n
    \n
    \n \n
    \n
    \n Display name\n \n
    \n
    \n Email\n \n
    \n
    \n Bio\n \n
    \n
    \n Role\n \n \n \n \n \n
    \n
    \n \n
    \n
    \n Discard\n Save changes\n
    \n
    \n `\n : nothing}\n ${this.active === 'notifications'\n ? html`\n
    \n \n
      \n ${this.toggleRow('Email notifications', 'Mentions, assignments and approvals.', this.notifyEmail, (v) => {\n this.notifyEmail = v\n })}\n ${this.toggleRow('Push notifications', 'Real-time browser alerts while you work.', this.notifyPush, (v) => {\n this.notifyPush = v\n })}\n ${this.toggleRow('Weekly digest', 'A summary of everything, every Monday.', this.notifyDigest, (v) => {\n this.notifyDigest = v\n })}\n
    \n     \n
    \n `\n : nothing}\n ${this.active === 'appearance'\n ? html`\n
    \n \n
    \n
    \n ${(['light', 'dark', 'system'] as const).map(\n (theme) => html`\n {\n this.themeChoice = theme\n }}\n class=${cn(\n 'focus-visible:ring-ring rounded-lg border p-3 text-left transition-colors focus-visible:ring-2 focus-visible:outline-none',\n this.themeChoice === theme ? 'border-primary ring-primary/20 ring-2' : 'hover:bg-accent/50',\n )}\n >\n ${theme}\n \n ${theme === 'light' ? 'Bright surfaces' : theme === 'dark' ? 'Low-light friendly' : 'Match device'}\n \n \n `,\n )}\n
    \n \n
    \n
    \n

    Reduced motion

    \n

    Collapse animations to instant transitions.

    \n
    \n \n
    \n
    \n     \n
    \n `\n : nothing}\n ${this.active === 'workspace'\n ? html`\n
    \n \n
    \n
    \n Workspace name\n \n
    \n
    \n URL slug\n
    \n \n acme.uipkge.app\n \n \n
    \n
    \n

    16 members · 4 pending invites

    \n
    \n     \n
    \n `\n : nothing}\n ${this.active === 'billing'\n ? html`\n
    \n \n
    \n
    \n

    Team plan · $12 / seat / month

    \n

    Next invoice Sep 1, 2026 · 18 seats

    \n
    \n Manage billing\n
    \n     \n
    \n `\n : nothing}\n ${this.active === 'danger'\n ? html`\n
    \n
    \n
    \n
    \n

    Delete this workspace

    \n

    \n All projects, members and data will be permanently removed.\n

    \n
    \n {\n this.deleteOpen = true\n }}\n >Delete…\n
    \n
    \n
    \n `\n : nothing}\n
    \n\n ) => {\n this.deleteOpen = e.detail.open\n }}\n >\n {\n this.deleteConfirm = (e.target as UipInput).value\n }}\n >\n {\n this.deleteOpen = false\n }}\n >Cancel\n {\n this.deleteOpen = false\n }}\n >Delete forever\n \n
    \n `\n }\n\n}\n\ncustomElements.get('uip-settings-page') || customElements.define('uip-settings-page', UipSettingsPage)\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'uip-settings-page': UipSettingsPage\n }\n}\n", "type": "registry:file", "target": "src/uip/blocks/settings-page/settings-page.ts" } ], "dependencies": [ "lit", "lucide" ], "registryDependencies": [ "https://uipkge.dev/r/lit/button.json", "https://uipkge.dev/r/lit/dialog.json", "https://uipkge.dev/r/lit/input.json", "https://uipkge.dev/r/lit/label.json", "https://uipkge.dev/r/lit/lit-core.json", "https://uipkge.dev/r/lit/section-card.json", "https://uipkge.dev/r/lit/select.json", "https://uipkge.dev/r/lit/separator.json", "https://uipkge.dev/r/lit/switch.json", "https://uipkge.dev/r/lit/textarea.json" ] }