@smicolon/fasla-ui 0.5.1 → 0.7.0

package/registry/blocks/footer-legal-first-slim/FooterLegalFirstSlim.tsx

@@ -0,0 +1,174 @@
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { Badge } from "../../ui/badge/badge"
+import { Button } from "../../ui/button/button"
+import { SOCIAL_PLATFORM_NAMES, SocialIcon, type SocialPlatform } from "../../ui/social-icons/social-icons"
+import { FooterDot, FooterLinkItem, FooterLogo, FooterRule, FooterSection, type FooterLink, type FooterLocale } from "../footer/footer"
+
+/*
+ * Figma: `Footer` (46380:22515), Type=Legal-First Slim. Figma has no motion
+ * chip for this Type; the links keep the shared 120ms colour change and the
+ * Button keeps its own states.
+ *
+ * The legal footer: six policy links in `foreground` at the start and an
+ * Outline xs Button ("Cookie preferences") at the end; a row of four soft
+ * Badges (privacy, security, process, accessibility); a hairline; then the
+ * logo, the entity line (name, address, tax and registration numbers, four facts
+ * with a dot drawn between them) and two social marks.
+ *
+ * Desktop (1440) is one row for the policies and the button, one for the entity,
+ * 40px above and 32px below. Tablet (768) lets the links and badges wrap and
+ * puts the social marks under the entity line. Mobile (360) stacks everything and
+ * the button fills the width; Figma draws that button 24px tall, which is not a
+ * Button size: it is the standard xs, 26px. In Arabic everything mirrors by the
+ * page's `dir`; the marks and the logo are never flipped.
+ */
+
+export interface FooterLegalFirstSlimCopy {
+  /** The policy links. Hidden when empty. */
+  policies: FooterLink[]
+  /** The accessible name of the policy links. */
+  policiesLabel: string
+  /** The label of the Outline button. Hidden when empty. */
+  cookieLabel: string
+  /** The compliance badges. Hidden when empty. */
+  badges: string[]
+  /** The accessible name of the badges. */
+  badgesLabel: string
+  /** The entity line, one fact per entry; a dot is drawn between them. */
+  entity: string[]
+  /** The accessible name of the social marks. */
+  socialLabel: string
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<FooterLocale, FooterLegalFirstSlimCopy> = {
+  en: {
+    policies: ["Privacy Policy", "Terms of Service", "Data Processing Addendum", "Subprocessors", "Security", "Accessibility Statement"].map((label) => ({ label, href: "#" })),
+    policiesLabel: "Policies",
+    cookieLabel: "Cookie preferences",
+    badges: ["Privacy compliance", "Security certified", "Process certified", "Accessibility statement"],
+    badgesLabel: "Compliance",
+    entity: ["© 2026 Fasla", "123 Example Street, 12345 Example City", "VAT 000000000", "Reg. 000000, Example Court"],
+    socialLabel: "Social",
+  },
+  ar: {
+    policies: ["سياسة الخصوصية", "شروط الخدمة", "ملحق معالجة البيانات", "المعالجون الفرعيون", "الأمان", "بيان إمكانية الوصول"].map((label) => ({ label, href: "#" })),
+    policiesLabel: "السياسات",
+    cookieLabel: "تفضيلات ملفات تعريف الارتباط",
+    badges: ["الامتثال للخصوصية", "معتمد للأمان", "معتمد للعمليات", "بيان إمكانية الوصول"],
+    badgesLabel: "الامتثال",
+    entity: ["© 2026 فاصلة", "123 شارع المثال، 12345 مدينة المثال", "الرقم الضريبي 000000000", "السجل 000000، محكمة المثال"],
+    socialLabel: "التواصل الاجتماعي",
+  },
+}
+
+/** The block's English and Arabic copy, for stories and previews. */
+export const footerLegalFirstSlimCopy = COPY
+
+export interface FooterLegalFirstSlimProps extends Omit<React.HTMLAttributes<HTMLElement>, "children">, Partial<FooterLegalFirstSlimCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: FooterLocale
+  /** The social marks, in order. */
+  socials?: SocialPlatform[]
+  /** Called when the cookie preferences button is pressed. */
+  onCookiePreferences?: () => void
+}
+
+const DEFAULT_SOCIALS: SocialPlatform[] = ["linkedin", "x"]
+
+/** Latin and digit runs inside Arabic text keep their own direction. */
+const LATIN = /([A-Za-z0-9][A-Za-z0-9@.:/+_–-]*(?:\s[A-Za-z0-9][A-Za-z0-9@.:/+_–-]*)*)/g
+function bidi(text: string, on: boolean): React.ReactNode {
+  if (!on) return text
+  return text.split(LATIN).map((part, index) =>
+    index % 2 ? (
+      <bdi key={index} dir="ltr">
+        {part}
+      </bdi>
+    ) : (
+      part
+    )
+  )
+}
+
+export function FooterLegalFirstSlim({ locale = "en", policies, policiesLabel, cookieLabel, badges, badgesLabel, entity, socialLabel, socials = DEFAULT_SOCIALS, onCookiePreferences, className, ...props }: FooterLegalFirstSlimProps) {
+  const copy = COPY[locale]
+  const ar = locale === "ar"
+  const links = policies ?? copy.policies
+  const cookie = cookieLabel ?? copy.cookieLabel
+  const chips = badges ?? copy.badges
+  const facts = entity ?? copy.entity
+  return (
+    <FooterSection
+      className={cn("border-t border-border pb-4 pt-5 md:pb-6 md:pt-8 lg:pb-8 lg:pt-10", className)}
+      contentClassName="gap-4 [@container(min-width:40rem)]:gap-5 [@container(min-width:64rem)]:gap-6"
+      {...props}
+    >
+      {links.length || cookie ? (
+        <div className="flex flex-col gap-4 [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:items-center [@container(min-width:40rem)]:justify-between [@container(min-width:40rem)]:gap-6 [@container(min-width:64rem)]:gap-8">
+          {links.length ? (
+            <nav aria-label={policiesLabel ?? copy.policiesLabel}>
+              <ul className="flex flex-wrap items-center gap-x-4 gap-y-2 [@container(min-width:40rem)]:gap-x-5 [@container(min-width:64rem)]:gap-x-6">
+                {links.map((link) => (
+                  <li key={`${link.label}-${link.href}`} className="flex">
+                    <FooterLinkItem link={link} className="text-xs text-foreground hover:text-muted-foreground focus-visible:text-muted-foreground active:text-muted-foreground" />
+                  </li>
+                ))}
+              </ul>
+            </nav>
+          ) : null}
+          {cookie ? (
+            <Button type="button" variant="outline" size="xs" onClick={onCookiePreferences} className="w-full shrink-0 [@container(min-width:40rem)]:w-auto">
+              {cookie}
+            </Button>
+          ) : null}
+        </div>
+      ) : null}
+      {chips.length ? (
+        <ul aria-label={badgesLabel ?? copy.badgesLabel} className="flex flex-wrap items-center gap-2">
+          {chips.map((chip) => (
+            <li key={chip} className="flex">
+              <Badge variant="soft" tone="secondary" size="sm" radius="standard">
+                {chip}
+              </Badge>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+      <FooterRule />
+      <div className="flex flex-col gap-3 [@container(min-width:64rem)]:flex-row [@container(min-width:64rem)]:items-center [@container(min-width:64rem)]:justify-between">
+        <div className="flex flex-col items-start gap-3 [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:flex-wrap [@container(min-width:40rem)]:items-center [@container(min-width:64rem)]:gap-4">
+          <FooterLogo className="h-[22px]" />
+          {facts.length ? (
+            <p className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
+              {facts.map((fact, index) => (
+                <React.Fragment key={fact}>
+                  {index > 0 ? <FooterDot /> : null}
+                  <span>{bidi(fact, ar)}</span>
+                </React.Fragment>
+              ))}
+            </p>
+          ) : null}
+        </div>
+        {socials.length ? (
+          <nav aria-label={socialLabel ?? copy.socialLabel}>
+            <ul className="flex items-center gap-2 [@container(min-width:40rem)]:gap-3">
+              {socials.map((platform) => (
+                <li key={platform} className="flex">
+                  <a
+                    href="#"
+                    aria-label={SOCIAL_PLATFORM_NAMES[platform]}
+                    className="relative inline-flex rounded-sm [outline:none] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring after:absolute after:-inset-3.5 after:content-['']"
+                  >
+                    <SocialIcon platform={platform} color="negative" className="size-4" />
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        ) : null}
+      </div>
+    </FooterSection>
+  )
+}

package/registry/blocks/footer-legal-first-slim/index.ts

@@ -0,0 +1,6 @@
+export {
+  FooterLegalFirstSlim,
+  footerLegalFirstSlimCopy,
+  type FooterLegalFirstSlimCopy,
+  type FooterLegalFirstSlimProps,
+} from "./FooterLegalFirstSlim"

package/registry/blocks/footer-legal.test.tsx

@@ -0,0 +1,180 @@
+import * as React from "react"
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
+import { fireEvent, render, screen } from "@testing-library/react"
+import { FooterLegalFirstSlim, footerLegalFirstSlimCopy } from "./footer-legal-first-slim"
+import { FooterTrustCompliance, footerTrustComplianceCopy } from "./footer-trust-compliance"
+
+/** Whether some class on `cls` has every variant in `spec`, in any order, and the same utility: `a:b:x` matches `b:a:x`. */
+function hasVariants(cls: string, spec: string): boolean {
+  const split = (token: string) => {
+    const out: string[] = []
+    let cur = ""
+    let depth = 0
+    for (const ch of token) {
+      if (ch === "[" || ch === "(") depth++
+      if (ch === "]" || ch === ")") depth--
+      if (ch === ":" && depth === 0) {
+        out.push(cur)
+        cur = ""
+      } else cur += ch
+    }
+    out.push(cur)
+    return out
+  }
+  const want = split(spec)
+  const util = want.pop()
+  return cls.split(/\s+/).some((token) => {
+    const have = split(token)
+    return have.pop() === util && want.every((variant) => have.includes(variant))
+  })
+}
+
+
+// What these tests can and cannot prove: jsdom has no layout and no hover, so
+// the rows, the wrapping, the 160ms lift and the breakpoints were checked in a
+// browser. Here `matchMedia` is a stub and the tests assert the contracts: one
+// footer landmark, labelled link groups, the Figma copy, an Arabic copy without
+// an em dash or a middle dot, empty collections, the atoms' sizes and the
+// classes that carry the hover, :active and reduced-motion rules.
+
+beforeEach(() => {
+  window.matchMedia = ((query: string) => ({
+    matches: false,
+    media: query,
+    addEventListener() {},
+    removeEventListener() {},
+    addListener() {},
+    removeListener() {},
+    onchange: null,
+    dispatchEvent: () => false,
+  })) as typeof window.matchMedia
+})
+afterEach(() => {
+  vi.restoreAllMocks()
+  // @ts-expect-error the stub is removed again
+  delete window.matchMedia
+})
+
+const strings = (value: unknown): string[] =>
+  typeof value === "string" ? [value] : value && typeof value === "object" ? Object.values(value).flatMap(strings) : []
+
+const TYPES = [
+  { name: "Legal-First Slim", Component: FooterLegalFirstSlim, copy: footerLegalFirstSlimCopy, text: { en: "Data Processing Addendum", ar: "ملحق معالجة البيانات" }, empty: { policies: [], cookieLabel: "", badges: [], entity: [], socials: [] } },
+  { name: "Trust & Compliance", Component: FooterTrustCompliance, copy: footerTrustComplianceCopy, text: { en: "Built to pass your security review.", ar: "مبني ليجتاز مراجعتك الأمنية." }, empty: { certifications: [], payments: [], paymentNote: "", legal: [], title: "", sub: "", trustLabel: "" } },
+] as const
+
+describe.each(TYPES)("$name", ({ Component, copy, text, empty }) => {
+  const C = Component as React.ComponentType<Record<string, unknown>>
+  it.each(["en", "ar"] as const)("renders in %s with one footer landmark and the Figma copy", (locale) => {
+    const { container } = render(<C locale={locale} />)
+    expect(container.querySelectorAll("footer")).toHaveLength(1)
+    expect(screen.getAllByRole("contentinfo")).toHaveLength(1)
+    expect(container.textContent).toContain(text[locale])
+  })
+
+  it.each(["en", "ar"] as const)("labels every link group in %s", (locale) => {
+    const { container } = render(<C locale={locale} />)
+    const groups = container.querySelectorAll("nav, ul[aria-label]")
+    expect(groups.length).toBeGreaterThan(0)
+    container.querySelectorAll("nav").forEach((nav) => expect(nav.getAttribute("aria-label")?.trim()).toBeTruthy())
+  })
+
+  it("has no em dash or middle dot in the Arabic copy", () => {
+    for (const value of strings((copy as Record<string, unknown>).ar)) expect(value).not.toMatch(/[—·]/)
+  })
+
+  it("accepts empty collections without crashing or drawing an empty group", () => {
+    const { container } = render(<C {...empty} />)
+    expect(container.querySelectorAll("footer")).toHaveLength(1)
+    expect(container.querySelectorAll("ul:empty")).toHaveLength(0)
+  })
+})
+
+describe("Legal-First Slim", () => {
+  it("draws four soft secondary small badges and an Outline xs button", () => {
+    const { container } = render(<FooterLegalFirstSlim />)
+    const items = container.querySelectorAll("ul[aria-label='Compliance'] > li")
+    expect(items).toHaveLength(4)
+    expect(items[0]!.textContent).toBe("Privacy compliance")
+    const button = screen.getByRole("button", { name: "Cookie preferences" })
+    expect(button.className).toContain("h-[1.625rem]")
+  })
+
+  it("calls onCookiePreferences from the button", () => {
+    const onCookiePreferences = vi.fn()
+    render(<FooterLegalFirstSlim onCookiePreferences={onCookiePreferences} />)
+    fireEvent.click(screen.getByRole("button", { name: "Cookie preferences" }))
+    expect(onCookiePreferences).toHaveBeenCalledTimes(1)
+  })
+
+  it("draws a dot between the entity facts, not a typed one, in both languages", () => {
+    for (const locale of ["en", "ar"] as const) {
+      const { container, unmount } = render(<FooterLegalFirstSlim locale={locale} />)
+      const line = container.querySelector("p.text-xs") as HTMLElement
+      expect(line.querySelectorAll("span[aria-hidden='true'].rounded-full")).toHaveLength(3)
+      expect(line.textContent).not.toMatch(/[·—]/)
+      unmount()
+    }
+  })
+
+  it("writes the Arabic numbers as left-to-right runs", () => {
+    const { container } = render(<FooterLegalFirstSlim locale="ar" />)
+    const runs = Array.from(container.querySelectorAll("bdi[dir='ltr']")).map((n) => n.textContent)
+    expect(runs).toContain("000000000")
+  })
+
+  it("keeps the policy links in the foreground colour", () => {
+    render(<FooterLegalFirstSlim />)
+    expect(screen.getByRole("link", { name: "Privacy Policy" }).className).toContain("text-foreground")
+  })
+})
+
+describe("Trust & Compliance", () => {
+  it("draws four certification cards with the icons and arrows that mirror in RTL", () => {
+    const { container } = render(<FooterTrustCompliance />)
+    const cards = container.querySelectorAll("ul[aria-label='Certifications'] > li")
+    expect(cards).toHaveLength(4)
+    const icons = Array.from(cards).map((card) => card.querySelector("span[aria-hidden='true'] svg")?.getAttribute("class") ?? "")
+    expect(icons[0]).toContain("lucide-shield")
+    expect(icons[1]).toContain("lucide-lock")
+    expect(icons[2]).toContain("lucide-badge-check")
+    expect(icons[3]).toContain("lucide-users")
+    cards.forEach((card) => {
+      expect(card.querySelector("a svg")?.getAttribute("class")).toContain("rtl:-scale-x-100")
+    })
+  })
+
+  it("lifts a card on hover through its own border class, 160ms, only where hover exists", () => {
+    const { container } = render(<FooterTrustCompliance />)
+    const surface = container.querySelector("ul[aria-label='Certifications'] > li > div") as HTMLElement
+    expect(surface.className).toContain("border-border")
+    expect(hasVariants(surface.getAttribute("class") ?? "", "hover:border-foreground")).toBe(true)
+    expect(hasVariants(surface.getAttribute("class") ?? "", "hover:[@container(min-width:40rem)]:border-foreground")).toBe(true)
+    expect(hasVariants(surface.getAttribute("class") ?? "", "hover:motion-safe:[@container(min-width:40rem)]:-translate-y-0.5")).toBe(true)
+    expect(surface.className).toContain("duration-[160ms]")
+    expect(hasVariants(surface.getAttribute("class") ?? "", "active:bg-secondary")).toBe(true)
+    expect(hasVariants(surface.getAttribute("class") ?? "", "motion-reduce:transform-none")).toBe(true)
+  })
+
+  it("slides the arrow 4px toward its direction only with hover and motion", () => {
+    const { container } = render(<FooterTrustCompliance />)
+    const mover = container.querySelector("ul[aria-label='Certifications'] a svg")!.parentElement as HTMLElement
+    expect(hasVariants(mover.getAttribute("class") ?? "", "group-hover/card:motion-safe:[@container(min-width:40rem)]:translate-x-1")).toBe(true)
+    expect(hasVariants(mover.getAttribute("class") ?? "", "group-hover/card:rtl:[@container(min-width:40rem)]:-translate-x-1")).toBe(true)
+  })
+
+  it("keeps the trust-centre button an Outline sm Button link", () => {
+    render(<FooterTrustCompliance />)
+    const link = screen.getByRole("link", { name: "Visit the trust centre" })
+    expect(link.className).toContain("h-8")
+  })
+
+  it("draws the five payment names as plain text pills, left-to-right in both languages", () => {
+    for (const locale of ["en", "ar"] as const) {
+      const { container, unmount } = render(<FooterTrustCompliance locale={locale} />)
+      const pills = Array.from(container.querySelectorAll("ul[aria-label] > li > span[dir='ltr']")).map((n) => n.textContent)
+      expect(pills).toEqual(["VISA", "Mastercard", "Amex", "PayPal", "Apple Pay"])
+      unmount()
+    }
+  })
+})

package/registry/blocks/footer-local-business/FooterLocalBusiness.tsx

@@ -0,0 +1,258 @@
+import * as React from "react"
+import { MailIcon, MapPinIcon } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { buttonVariants } from "../../ui/button/button"
+import { SOCIAL_PLATFORM_NAMES, SocialIcon, type SocialPlatform } from "../../ui/social-icons/social-icons"
+import { FooterColumnTitle, FooterCopyright, FooterDot, FooterLinkItem, FooterLogo, FooterRule, FooterSection, type FooterLink, type FooterLocale, type FooterPhoto } from "../footer/footer"
+
+/*
+ * Figma: `Footer` (46380:22515), Type=Local Business. Figma has no motion chip
+ * for this Type, so nothing here is animated beyond the shared link colour change
+ * and the Button atom's own states.
+ *
+ * A map beside the business's details: a map photo with a pin in its centre and a
+ * small pill at its top corner naming the place; then the logo, the business name,
+ * the address, three rows of opening hours and two buttons (Solid Primary "Get
+ * directions" with a map-pin, Outline Secondary with the email and a mail icon);
+ * a hairline; the legal bar (copyright, three legal links, four social marks).
+ *
+ * Desktop (1440) sets the map 660x360 beside the details, 64px above and 32px
+ * below. Tablet (768) stacks them, the map 300px tall and full width. Mobile
+ * (360) shrinks the map to 200px, stacks the buttons and the legal bar. Without
+ * `map` the panel shows the muted ground at the same size. In Arabic everything
+ * mirrors by the page's `dir`; the map and the logo are never flipped.
+ */
+
+export interface FooterOpeningHours {
+  day: string
+  /** The hours, or a word such as "Closed". */
+  time: string
+}
+
+export interface FooterLocalBusinessCopy {
+  /** The business's name, as the heading. */
+  businessName: string
+  /** The address, one line per entry. */
+  address: string[]
+  /** The title of the opening hours. Hidden with the hours when they are empty. */
+  hoursTitle: string
+  /** The opening hours, a row each. */
+  hours: FooterOpeningHours[]
+  /** The pill's parts on the map. English draws a dot between them; Arabic is one phrase. */
+  mapLabel: string[]
+  /** The Solid Primary button's label. */
+  directionsLabel: string
+  /** Where "Get directions" goes. */
+  directionsHref: string
+  /** The address on the Outline button, which is also where it writes to. */
+  email: string
+  /** The copyright line. */
+  copyright: string
+  /** The legal links. Hidden when empty. */
+  legal: FooterLink[]
+  /** The accessible name of the legal links. */
+  legalLabel: string
+  /** The accessible name of the social marks. */
+  socialLabel: string
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<FooterLocale, FooterLocalBusinessCopy> = {
+  en: {
+    businessName: "Fasla Studio",
+    address: ["123 Example Street", "12345 Example City"],
+    hoursTitle: "Opening hours",
+    hours: [
+      { day: "Monday – Friday", time: "09:00 – 18:00" },
+      { day: "Saturday", time: "Closed" },
+      { day: "Sunday", time: "Closed" },
+    ],
+    mapLabel: ["Fasla Studio", "Example City"],
+    directionsLabel: "Get directions",
+    directionsHref: "#",
+    email: "you@company.com",
+    copyright: "© 2026 Fasla Studio. All rights reserved.",
+    legal: ["Privacy", "Terms", "Accessibility"].map((label) => ({ label, href: "#" })),
+    legalLabel: "Legal links",
+    socialLabel: "Social",
+  },
+  ar: {
+    businessName: "استوديو فاصلة",
+    address: ["123 شارع المثال", "12345 مدينة المثال"],
+    hoursTitle: "ساعات العمل",
+    hours: [
+      { day: "الاثنين إلى الجمعة", time: "09:00 – 18:00" },
+      { day: "السبت", time: "مغلق" },
+      { day: "الأحد", time: "مغلق" },
+    ],
+    mapLabel: ["استوديو فاصلة، مدينة المثال"],
+    directionsLabel: "الاتجاهات",
+    directionsHref: "#",
+    email: "you@company.com",
+    copyright: "© 2026 استوديو فاصلة. جميع الحقوق محفوظة.",
+    legal: ["الخصوصية", "الشروط", "إمكانية الوصول"].map((label) => ({ label, href: "#" })),
+    legalLabel: "روابط قانونية",
+    socialLabel: "التواصل الاجتماعي",
+  },
+}
+
+/** The block's English and Arabic copy, for stories and previews. */
+export const footerLocalBusinessCopy = COPY
+
+export interface FooterLocalBusinessProps extends Omit<React.HTMLAttributes<HTMLElement>, "children">, Partial<FooterLocalBusinessCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: FooterLocale
+  /** The map photo. Without one the panel shows the muted ground at the same size. */
+  map?: FooterPhoto
+  /** The social marks, in order. */
+  socials?: SocialPlatform[]
+}
+
+const DEFAULT_SOCIALS: SocialPlatform[] = ["instagram", "linkedin", "whatsapp", "x"]
+
+/** Latin and digit runs inside Arabic text keep their own direction. */
+const LATIN = /([A-Za-z0-9][A-Za-z0-9@.:/+_–-]*(?:\s[A-Za-z0-9][A-Za-z0-9@.:/+_–-]*)*)/g
+function bidi(text: string, on: boolean): React.ReactNode {
+  if (!on) return text
+  return text.split(LATIN).map((part, index) =>
+    index % 2 ? (
+      <bdi key={index} dir="ltr">
+        {part}
+      </bdi>
+    ) : (
+      part
+    )
+  )
+}
+
+export function FooterLocalBusiness({
+  locale = "en",
+  map,
+  businessName,
+  address,
+  hoursTitle,
+  hours,
+  mapLabel,
+  directionsLabel,
+  directionsHref,
+  email,
+  copyright,
+  legal,
+  legalLabel,
+  socialLabel,
+  socials = DEFAULT_SOCIALS,
+  className,
+  ...props
+}: FooterLocalBusinessProps) {
+  const copy = COPY[locale]
+  const ar = locale === "ar"
+  const name = businessName ?? copy.businessName
+  const lines = address ?? copy.address
+  const rows = hours ?? copy.hours
+  const pill = mapLabel ?? copy.mapLabel
+  const mail = email ?? copy.email
+  const links = legal ?? copy.legal
+  return (
+    <FooterSection
+      className={cn("border-t border-border py-8 md:py-16 lg:pb-8 lg:pt-16", className)}
+      contentClassName="gap-5 [@container(min-width:40rem)]:gap-8 [@container(min-width:64rem)]:gap-10"
+      {...props}
+    >
+      <div className="flex flex-col gap-8 [@container(min-width:40rem)]:gap-10 [@container(min-width:64rem)]:flex-row [@container(min-width:64rem)]:items-center">
+        <div className="relative h-[200px] w-full shrink-0 overflow-hidden rounded-xl bg-muted [@container(min-width:40rem)]:h-[300px] [@container(min-width:64rem)]:h-[360px] [@container(min-width:64rem)]:w-[660px]">
+          {map ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img src={map.src} alt={map.alt} loading="lazy" className="absolute inset-0 size-full object-cover" />
+          ) : null}
+          <span aria-hidden="true" className="absolute inset-0 m-auto flex size-11 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-md">
+            <MapPinIcon className="size-5" />
+          </span>
+          {pill.length ? (
+            <div className="absolute start-5 top-5 inline-flex items-center gap-2 rounded-full bg-background p-2 text-xs font-medium text-foreground shadow-md [@container(min-width:40rem)]:px-3">
+              <MapPinIcon aria-hidden="true" className="size-3.5 shrink-0" />
+              <span className="inline-flex items-center gap-2">
+                {pill.map((part, index) => (
+                  <React.Fragment key={part}>
+                    {index > 0 ? <FooterDot /> : null}
+                    <span>{part}</span>
+                  </React.Fragment>
+                ))}
+              </span>
+            </div>
+          ) : null}
+        </div>
+        <div className="flex min-w-0 flex-1 flex-col items-start gap-4 [@container(min-width:40rem)]:gap-5 [@container(min-width:64rem)]:gap-6">
+          <FooterLogo className="h-7" />
+          <h2 className="text-xl font-semibold text-foreground [@container(min-width:40rem)]:text-2xl">{name}</h2>
+          {lines.length ? (
+            <address className="flex flex-col text-sm not-italic text-muted-foreground">
+              {lines.map((line) => (
+                <span key={line}>{bidi(line, ar)}</span>
+              ))}
+            </address>
+          ) : null}
+          {rows.length ? (
+            <div className="flex w-full flex-col">
+              {hoursTitle ?? copy.hoursTitle ? <FooterColumnTitle as="h3">{hoursTitle ?? copy.hoursTitle}</FooterColumnTitle> : null}
+              <ul className="flex w-full flex-col">
+                {rows.map((row) => (
+                  <li key={row.day} className="flex items-center justify-between gap-4 border-b border-border py-2 text-sm">
+                    <span className="text-muted-foreground">{row.day}</span>
+                    <span className="font-medium text-foreground">{bidi(row.time, ar)}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ) : null}
+          <div className="flex w-fit max-w-full flex-col gap-2 [@container(min-width:40rem)]:w-auto [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:gap-3">
+            <a href={directionsHref ?? copy.directionsHref} className={buttonVariants({ variant: "default", size: "md" })}>
+                <MapPinIcon aria-hidden="true" />
+                {directionsLabel ?? copy.directionsLabel}
+              </a>
+            {mail ? (
+              <a href={`mailto:${mail}`} className={buttonVariants({ variant: "outline", size: "md", className: "min-w-0 max-w-full" })}>
+                  <MailIcon aria-hidden="true" />
+                  {/* A long address shortens with an ellipsis inside the button instead of pushing the page sideways. */}
+                  <bdi dir="ltr" className="min-w-0 truncate">{mail}</bdi>
+                </a>
+            ) : null}
+          </div>
+        </div>
+      </div>
+      <FooterRule />
+      <div className="flex flex-col gap-3 [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:items-center [@container(min-width:40rem)]:justify-between">
+        <div className="flex flex-col gap-4 [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:items-center [@container(min-width:40rem)]:gap-5 [@container(min-width:64rem)]:gap-6">
+          <FooterCopyright>{copyright ?? copy.copyright}</FooterCopyright>
+          {links.length ? (
+            <nav aria-label={legalLabel ?? copy.legalLabel}>
+              <ul className="flex flex-wrap items-center gap-x-3 gap-y-2 [@container(min-width:40rem)]:gap-x-4 [@container(min-width:64rem)]:gap-x-5">
+                {links.map((link) => (
+                  <li key={`${link.label}-${link.href}`} className="flex">
+                    <FooterLinkItem link={link} className="text-xs" />
+                  </li>
+                ))}
+              </ul>
+            </nav>
+          ) : null}
+        </div>
+        {socials.length ? (
+          <nav aria-label={socialLabel ?? copy.socialLabel}>
+            <ul className="flex items-center gap-3 [@container(min-width:64rem)]:gap-4">
+              {socials.map((platform) => (
+                <li key={platform} className="flex">
+                  <a
+                    href="#"
+                    aria-label={SOCIAL_PLATFORM_NAMES[platform]}
+                    className="relative inline-flex rounded-sm [outline:none] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring after:absolute after:-inset-3.5 after:content-['']"
+                  >
+                    <SocialIcon platform={platform} color="negative" className="size-[18px]" />
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        ) : null}
+      </div>
+    </FooterSection>
+  )
+}

package/registry/blocks/footer-local-business/index.ts

@@ -0,0 +1,7 @@
+export {
+  FooterLocalBusiness,
+  footerLocalBusinessCopy,
+  type FooterLocalBusinessCopy,
+  type FooterLocalBusinessProps,
+  type FooterOpeningHours,
+} from "./FooterLocalBusiness"