{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "footer-01",
  "title": "Multi-Column Footer",
  "type": "registry:block",
  "description": "Site footer with brand mark + newsletter form on the left and four link columns (Product / Company / Resources / Legal) on the right. Separator divides into a copyright + social icon row. Each link is spelled out inline so copy lives in one place.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "footer",
  "files": [
    {
      "path": "packages/elements-lit/src/blocks/footer-01/footer-01.ts",
      "content": "import { LitElement, css, html, nothing } from 'lit'\nimport { Boxes } from 'lucide'\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/input/input'\nimport type { UipInput } from '../../components/input/input'\nimport '../../components/separator/separator'\n\nconst Github = (className: string) => html`<svg\n  class=${className}\n  viewBox=\"0 0 24 24\"\n  fill=\"currentColor\"\n  aria-hidden=\"true\"\n>\n  <path\n    d=\"M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.3.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.4-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.4 11.4 0 016 0C17 4.7 18 5 18 5c.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.5-2.7 5.5-5.3 5.8.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6 4.6-1.5 7.9-5.8 7.9-10.9C23.5 5.7 18.3.5 12 .5z\"\n  />\n</svg>`\n\nconst Twitter = (className: string) => html`<svg\n  class=${className}\n  viewBox=\"0 0 24 24\"\n  fill=\"currentColor\"\n  aria-hidden=\"true\"\n>\n  <path\n    d=\"M18.24 2.25h3.31l-7.23 8.26 8.5 11.24h-6.66l-5.21-6.82-5.97 6.82H1.68l7.73-8.84L1.25 2.25h6.83l4.71 6.23zm-1.16 17.52h1.83L7.08 4.13H5.12z\"\n  />\n</svg>`\n\nconst Linkedin = (className: string) => html`<svg\n  class=${className}\n  viewBox=\"0 0 24 24\"\n  fill=\"currentColor\"\n  aria-hidden=\"true\"\n>\n  <path\n    d=\"M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 110-4.13 2.06 2.06 0 010 4.13zm1.78 13.02H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z\"\n  />\n</svg>`\n\n/**\n * <uip-footer-01> — the registry Footer01 block as a web component.\n *\n * Class strings are React's Footer01 verbatim. React state (useState) becomes\n * @state fields. React has no submit callback; the form dispatches a\n * `subscribe` CustomEvent (detail: { email }, bubbles, composed) so consumers\n * can wire it to a mailing-list provider after install.\n */\nexport class UipFooter01 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    newsletter: { state: true },\n    subscribed: { state: true },\n  }\n\n  private newsletter = ''\n  private subscribed = false\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', 'footer-01')\n  }\n\n  private subscribe(e: Event) {\n    e.preventDefault()\n    if (!this.newsletter) return\n    const email = this.newsletter\n    this.subscribed = true\n    this.newsletter = ''\n    this.dispatchEvent(new CustomEvent('subscribe', { detail: { email }, bubbles: true, composed: true }))\n  }\n\n  render() {\n    return html`\n      <footer data-slot=\"footer-01\" class=\"bg-background border-t\">\n        <div class=\"mx-auto max-w-6xl px-6 py-16\">\n          <div class=\"grid gap-10 lg:grid-cols-12\">\n            <div class=\"space-y-4 lg:col-span-4\">\n              <div class=\"flex items-center gap-2\">\n                <div class=\"bg-primary text-primary-foreground flex size-8 items-center justify-center rounded-md\">\n                  ${icon(Boxes, 'boxes', 'size-4')}\n                </div>\n                <span class=\"text-base font-semibold\">Acme</span>\n              </div>\n              <p class=\"text-muted-foreground max-w-sm text-sm\">Built on shadcn-vue. Get product updates monthly.</p>\n              <form class=\"flex max-w-sm gap-2\" @submit=${this.subscribe}>\n                <uip-input\n                  class=\"flex-1\"\n                  .value=${this.newsletter}\n                  type=\"email\"\n                  placeholder=\"you@company.com\"\n                  required\n                  @input=${(e: Event) => {\n                    this.newsletter = (e.target as UipInput).value\n                  }}\n                ></uip-input>\n                <uip-button type=\"submit\">Subscribe</uip-button>\n              </form>\n              ${this.subscribed\n                ? html`<p class=\"text-success text-xs\">Thanks — check your inbox to confirm.</p>`\n                : nothing}\n            </div>\n\n            <div class=\"grid grid-cols-2 gap-6 sm:grid-cols-4 lg:col-span-8\">\n              <div class=\"space-y-3\">\n                <h3 class=\"text-sm font-semibold\">Product</h3>\n                <ul class=\"space-y-2\">\n                  <li>\n                    <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                      Features\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                      Pricing\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                      Changelog\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                      Roadmap\n                    </a>\n                  </li>\n                </ul>\n              </div>\n              <div class=\"space-y-3\">\n                <h3 class=\"text-sm font-semibold\">Company</h3>\n                <ul class=\"space-y-2\">\n                  <li>\n                    <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"> About </a>\n                  </li>\n                  <li>\n                    <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"> Blog </a>\n                  </li>\n                  <li>\n                    <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                      Careers\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                      Contact\n                    </a>\n                  </li>\n                </ul>\n              </div>\n              <div class=\"space-y-3\">\n                <h3 class=\"text-sm font-semibold\">Resources</h3>\n                <ul class=\"space-y-2\">\n                  <li>\n                    <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                      Documentation\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"> API </a>\n                  </li>\n                  <li>\n                    <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                      Help center\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                      Status\n                    </a>\n                  </li>\n                </ul>\n              </div>\n              <div class=\"space-y-3\">\n                <h3 class=\"text-sm font-semibold\">Legal</h3>\n                <ul class=\"space-y-2\">\n                  <li>\n                    <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                      Terms\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                      Privacy\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n                      Security\n                    </a>\n                  </li>\n                  <li>\n                    <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"> DPA </a>\n                  </li>\n                </ul>\n              </div>\n            </div>\n          </div>\n\n          <uip-separator class=\"[&::part(base)]:my-10\"></uip-separator>\n\n          <div class=\"flex flex-wrap items-center justify-between gap-4\">\n            <p class=\"text-muted-foreground text-xs\">© 2026 Acme. All rights reserved.</p>\n            <div class=\"flex items-center gap-3\">\n              <a href=\"#\" aria-label=\"GitHub\" class=\"text-muted-foreground hover:text-foreground transition-colors\">\n                ${Github('size-4')}\n              </a>\n              <a href=\"#\" aria-label=\"Twitter\" class=\"text-muted-foreground hover:text-foreground transition-colors\">\n                ${Twitter('size-4')}\n              </a>\n              <a href=\"#\" aria-label=\"LinkedIn\" class=\"text-muted-foreground hover:text-foreground transition-colors\">\n                ${Linkedin('size-4')}\n              </a>\n            </div>\n          </div>\n        </div>\n      </footer>\n    `\n  }\n}\n\ncustomElements.get('uip-footer-01') || customElements.define('uip-footer-01', UipFooter01)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-footer-01': UipFooter01\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/blocks/footer-01/footer-01.ts"
    }
  ],
  "dependencies": [
    "lit",
    "lucide"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/button.json",
    "https://uipkge.dev/r/lit/input.json",
    "https://uipkge.dev/r/lit/lit-core.json",
    "https://uipkge.dev/r/lit/separator.json"
  ]
}