@smicolon/fasla-ui 0.5.1 → 0.7.0

package/registry/blocks/footer-image-backed-brand/FooterImageBackedBrand.tsx

@@ -0,0 +1,251 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { SOCIAL_PLATFORM_NAMES, SocialIcon, type SocialPlatform } from "../../ui/social-icons/social-icons"
+import {
+  FOOTER_LINK_INVERSE,
+  FooterLegalBar,
+  FooterLogo,
+  FooterRule,
+  FooterSection,
+  useFooterReveal,
+  usePrefersReducedMotion,
+  type FooterLink,
+  type FooterLocale,
+  type FooterPhoto,
+} from "../footer/footer"
+
+/*
+ * Figma: `Footer` (46380:22515), Type=Image-Backed Brand.
+ *
+ * An inverse band over a photo. A scrim in `background-inverse` sits between
+ * the photo and the text, so the text is always `foreground-inverse` (the sentence
+ * and the legal line too, not `muted-foreground-inverse`: in dark mode the scrim is light and
+ * the muted token would not read on it) on a dark
+ * (or, in dark mode, light) ground. Centred: the logo, a 3XL Light headline and
+ * a Base line, a wrapping row of eight links, five social marks at 22px, a
+ * hairline, and the legal bar with four links.
+ *
+ * The photo is a prop (`background`); without one the band shows the `muted`
+ * ground at the same size. The scrim is its own layer at .62 (a separate
+ * layer, since Tailwind 3 drops the opacity modifier on a var() colour).
+ *
+ * Motion (Figma chip): the photo drifts translateY -24px to 24px across the
+ * footer's scroll range (16 on Tablet, 8 on Mobile), transform only, and the
+ * scrim goes .72 to .62 over the same range. Both run only with a fine pointer
+ * (iOS Safari judders on scroll-driven layers) and not under reduced motion;
+ * otherwise nothing drifts and the scrim stays .62. The content fades in once
+ * at 30% visible: 320ms, 60ms apart down the stack, the links as one group.
+ */
+
+export interface FooterImageBackedBrandCopy {
+  /** The headline. */
+  headline: string
+  /** The line under it. Hidden when empty. */
+  sub: string
+  /** The row of links. */
+  links: FooterLink[]
+  /** The accessible name of the row of links. */
+  navLabel: string
+  /** The copyright line. */
+  copyright: string
+  /** The legal links. */
+  legal: FooterLink[]
+  /** The accessible name of the legal links. */
+  legalLabel: string
+}
+
+const links = (labels: string[]): FooterLink[] => labels.map((label) => ({ label, href: "#" }))
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<FooterLocale, FooterImageBackedBrandCopy> = {
+  en: {
+    headline: "Design once. Ship in every direction.",
+    sub: "The bilingual design system trusted by product teams across the region.",
+    links: links(["Components", "Blocks", "Templates", "Documentation", "Pricing", "Blog", "Careers", "Contact"]),
+    navLabel: "Footer",
+    copyright: "© 2026 Fasla. All rights reserved.",
+    legal: links(["Privacy", "Terms", "Cookies", "Accessibility"]),
+    legalLabel: "Legal links",
+  },
+  ar: {
+    headline: "صمّم مرة واحدة. أطلق في كل اتجاه.",
+    sub: "نظام التصميم ثنائي اللغة الذي تثق به فرق المنتجات في المنطقة.",
+    links: links(["المكوّنات", "الكتل", "القوالب", "التوثيق", "الأسعار", "المدونة", "الوظائف", "اتصل بنا"]),
+    navLabel: "التذييل",
+    copyright: "© 2026 فاصلة. جميع الحقوق محفوظة.",
+    legal: links(["الخصوصية", "الشروط", "ملفات تعريف الارتباط", "إمكانية الوصول"]),
+    legalLabel: "روابط قانونية",
+  },
+}
+
+/** The block's English and Arabic copy, for stories and previews. */
+export const footerImageBackedBrandCopy = COPY
+
+export interface FooterImageBackedBrandProps extends Omit<React.HTMLAttributes<HTMLElement>, "children">, Partial<FooterImageBackedBrandCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: FooterLocale
+  /** The social marks, in order. */
+  socials?: SocialPlatform[]
+  /** The photo behind the band. Without one the band shows the `muted` ground. */
+  background?: FooterPhoto
+}
+
+const DEFAULT_SOCIALS: SocialPlatform[] = ["linkedin", "x", "github", "instagram", "youtube"]
+
+/** The container width where Figma's Tablet and Desktop start: 40rem and 64rem. */
+const TABLET = 640
+const DESKTOP = 1024
+const SCRIM_START = 0.72
+const SCRIM_END = 0.62
+
+function Digits({ text }: { text: string }) {
+  return (
+    <>
+      {text.split(/(\d+)/).map((part, index) =>
+        index % 2 ? (
+          <bdi key={index} dir="ltr">
+            {part}
+          </bdi>
+        ) : (
+          part
+        )
+      )}
+    </>
+  )
+}
+
+/** Whether reduced motion is asked for right now, read at the moment an effect starts so the first run is already right. */
+const motionReduced = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches
+
+/**
+ * Parallax: with a fine pointer and without reduced motion, one passive scroll
+ * listener maps the block's pass through the window (0 as it enters, 1 as it
+ * leaves) to the photo's translateY (-range to +range) and the scrim's opacity
+ * (.72 to .62). Otherwise nothing is applied and the scrim stays at .62.
+ */
+function useParallax(rootRef: React.RefObject<HTMLElement | null>, photoRef: React.RefObject<HTMLElement | null>, scrimRef: React.RefObject<HTMLElement | null>) {
+  const reduced = usePrefersReducedMotion()
+  React.useEffect(() => {
+    const root = rootRef.current
+    const photo = photoRef.current
+    const scrim = scrimRef.current
+    if (reduced || !root || !photo || !scrim || motionReduced() || typeof window.matchMedia !== "function") return
+    if (!window.matchMedia("(pointer: fine)").matches) return
+    let frame = 0
+    const update = () => {
+      frame = 0
+      const width = root.clientWidth
+      const range = width >= DESKTOP ? 24 : width >= TABLET ? 16 : 8
+      const rect = root.getBoundingClientRect()
+      const progress = Math.min(1, Math.max(0, (window.innerHeight - rect.top) / (window.innerHeight + rect.height)))
+      photo.style.transform = `translateY(${+(range * (2 * progress - 1)).toFixed(2)}px)`
+      scrim.style.opacity = String(+(SCRIM_START - (SCRIM_START - SCRIM_END) * progress).toFixed(3))
+    }
+    const onScroll = () => {
+      if (!frame) frame = window.requestAnimationFrame(update)
+    }
+    update()
+    window.addEventListener("scroll", onScroll, { passive: true })
+    window.addEventListener("resize", onScroll, { passive: true })
+    return () => {
+      window.removeEventListener("scroll", onScroll)
+      window.removeEventListener("resize", onScroll)
+      if (frame) window.cancelAnimationFrame(frame)
+      photo.style.transform = ""
+      scrim.style.opacity = ""
+    }
+  }, [reduced, rootRef, photoRef, scrimRef])
+}
+
+export function FooterImageBackedBrand({
+  locale = "en",
+  headline,
+  sub,
+  links: navLinks,
+  navLabel,
+  copyright,
+  legal,
+  legalLabel,
+  socials = DEFAULT_SOCIALS,
+  background,
+  className,
+  ...props
+}: FooterImageBackedBrandProps) {
+  const copy = COPY[locale]
+  const rootRef = React.useRef<HTMLElement>(null)
+  const photoRef = React.useRef<HTMLDivElement>(null)
+  const scrimRef = React.useRef<HTMLDivElement>(null)
+  useFooterReveal(rootRef, { threshold: 0.3, selector: "[data-reveal]", duration: 320, stagger: 60, rise: 12 })
+  useParallax(rootRef, photoRef, scrimRef)
+  const line = sub ?? copy.sub
+  const items = navLinks ?? copy.links
+  return (
+    <FooterSection
+      ref={rootRef}
+      inverse
+      behind={
+        <>
+          {/* The layers fill the whole band, not the 1280px column. The photo is taller than the band by the parallax range, so it never shows an edge. */}
+      <div ref={photoRef} aria-hidden="true" data-photo="" className="pointer-events-none absolute inset-x-0 -inset-y-2 -z-20 bg-muted [@container(min-width:40rem)]:-inset-y-4 [@container(min-width:64rem)]:-inset-y-6">
+        {background ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img src={background.src} alt="" loading="lazy" className="size-full object-cover" />
+        ) : null}
+      </div>
+      <div ref={scrimRef} aria-hidden="true" data-scrim="" className="pointer-events-none absolute inset-0 -z-10 bg-background-inverse opacity-[.62]" />
+        </>
+      }
+      className={cn("relative isolate overflow-hidden py-8 md:py-16 lg:pb-10 lg:pt-20", className)}
+      contentClassName="relative z-10 gap-5 [@container(min-width:40rem)]:gap-8 [@container(min-width:64rem)]:gap-10"
+      {...props}
+    >
+      <div className="flex flex-col items-center gap-3 text-center [@container(min-width:40rem)]:gap-4 [@container(min-width:64rem)]:gap-5">
+        <div data-reveal="">
+          <FooterLogo inverse className="h-9" />
+        </div>
+        <h2 data-reveal="" className="text-2xl font-light text-foreground-inverse [@container(min-width:40rem)]:text-3xl">
+          {headline ?? copy.headline}
+        </h2>
+        {line ? (
+          <p data-reveal="" className="text-base text-foreground-inverse">
+            {line}
+          </p>
+        ) : null}
+      </div>
+      {items.length ? (
+        <nav data-reveal="" aria-label={navLabel ?? copy.navLabel}>
+          <ul className="flex flex-wrap items-center justify-center gap-x-4 gap-y-2 [@container(min-width:40rem)]:gap-x-5 [@container(min-width:64rem)]:gap-x-6">
+            {items.map((link) => (
+              <li key={`${link.label}-${link.href}`} className="flex">
+                <a href={link.href} className={cn(FOOTER_LINK_INVERSE, "text-foreground-inverse hover:text-muted-foreground-inverse focus-visible:text-foreground-inverse active:text-muted-foreground-inverse")}>
+                  {link.label}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      ) : null}
+      {socials.length ? (
+        <ul data-reveal="" className="flex flex-wrap items-center justify-center gap-x-3 gap-y-2 [@container(min-width:40rem)]:gap-x-4 [@container(min-width:64rem)]:gap-x-5">
+          {socials.map((platform) => (
+            <li key={platform} className="flex">
+              <a
+                href="#"
+                aria-label={SOCIAL_PLATFORM_NAMES[platform]}
+                className="relative inline-flex rounded-sm text-foreground-inverse [outline:none] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring after:absolute after:-inset-3 after:content-['']"
+              >
+                <SocialIcon platform={platform} color="current" className="size-[22px]" />
+              </a>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+      <div data-reveal="" className="flex flex-col gap-5 [@container(min-width:40rem)]:gap-8 [@container(min-width:64rem)]:gap-10">
+        <FooterRule inverse className="opacity-[.18]" />
+        <FooterLegalBar inverse className="[&_a]:text-foreground-inverse" copyright={<span className="text-foreground-inverse"><Digits text={copyright ?? copy.copyright} /></span>} links={legal ?? copy.legal} label={legalLabel ?? copy.legalLabel} />
+      </div>
+    </FooterSection>
+  )
+}

package/registry/blocks/footer-image-backed-brand/index.ts

@@ -0,0 +1,6 @@
+export {
+  FooterImageBackedBrand,
+  footerImageBackedBrandCopy,
+  type FooterImageBackedBrandCopy,
+  type FooterImageBackedBrandProps,
+} from "./FooterImageBackedBrand"

package/registry/blocks/footer-index-numbered-columns/FooterIndexNumberedColumns.tsx

@@ -0,0 +1,236 @@
+"use client"
+
+import * as React from "react"
+import { ArrowUpIcon } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { FaslaLogo } from "../../ui/fasla-logo/fasla-logo"
+import {
+  FooterCopyright,
+  FooterLinkItem,
+  FooterRule,
+  FooterSection,
+  usePrefersReducedMotion,
+  type FooterColumn,
+  type FooterLink,
+  type FooterLocale,
+} from "../footer/footer"
+
+/*
+ * Figma: `Footer` (46380:22515), Type=Index-Numbered Columns.
+ *
+ * An editorial index: a masthead (the logo over a light statement, with an
+ * INDEX label at the far end), four columns each headed by its number (01 to
+ * 04) and a title with five links, a hairline, and a legal bar with the
+ * copyright, three legal links and a Back to top link. A 1px hairline marks
+ * the inline start of each column (the left in English, the right in Arabic).
+ *
+ * Desktop (Figma 1440): four columns across. Tablet (768): two across. Mobile
+ * (360): one, and the hairlines read as one continuous line.
+ *
+ * Motion (Figma's chip), once, when 35% of the index is on screen: each hairline
+ * draws down from its top (scale Y 0 to 1, 320ms ease-out), 60ms apart in
+ * reading order, so Arabic runs from the right with no extra code; its links
+ * fade and rise 8px (220ms, 25ms apart) starting 120ms after the hairline. On a
+ * phone every hairline draws at once. Link hover is the shared 120ms colour
+ * change, and `:active` stands in on touch. The Back to top arrow lifts 3px on
+ * hover and on press. Reduced motion plays nothing: everything is drawn in
+ * place.
+ */
+
+export interface FooterIndexColumn extends FooterColumn {
+  /** The index number shown above the title. Defaults to 01, 02, 03 by position. */
+  number?: string
+}
+
+export interface FooterIndexNumberedColumnsCopy {
+  /** The statement under the logo. Hidden when empty. */
+  statement: string
+  /** The label at the masthead's far end. */
+  indexLabel: string
+  columns: FooterIndexColumn[]
+  copyright: string
+  legal: FooterLink[]
+  /** The accessible name of the legal links. */
+  legalLabel: string
+  /** The link at the end of the legal bar. */
+  backToTop: string
+}
+
+const links = (...labels: string[]): FooterLink[] => labels.map((label) => ({ label, href: "#" }))
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<FooterLocale, FooterIndexNumberedColumnsCopy> = {
+  en: {
+    statement: "A design system built in two directions — every component, token and pattern verified in English and Arabic before it ships.",
+    indexLabel: "INDEX",
+    columns: [
+      { number: "01", title: "Product", links: links("Components", "Blocks", "Templates", "Design tokens", "Changelog") },
+      { number: "02", title: "Learn", links: links("Documentation", "Guides", "Playground", "Showcase", "Blog") },
+      { number: "03", title: "Company", links: links("About", "Careers", "Customers", "Press", "Contact") },
+      { number: "04", title: "Support", links: links("Help center", "Community", "Status", "Security", "Accessibility") },
+    ],
+    copyright: "© 2026 Fasla",
+    legal: links("Privacy", "Terms", "Cookies"),
+    legalLabel: "Legal links",
+    backToTop: "Back to top",
+  },
+  ar: {
+    statement: "نظام تصميم مبني في اتجاهين: كل مكوّن ورمز ونمط يُتحقق منه بالعربية والإنجليزية قبل إطلاقه.",
+    indexLabel: "الفهرس",
+    columns: [
+      { number: "01", title: "المنتج", links: links("المكوّنات", "الكتل", "القوالب", "رموز التصميم", "سجل التغييرات") },
+      { number: "02", title: "تعلّم", links: links("التوثيق", "الأدلة", "ساحة التجربة", "المعرض", "المدونة") },
+      { number: "03", title: "الشركة", links: links("من نحن", "الوظائف", "العملاء", "الصحافة", "اتصل بنا") },
+      { number: "04", title: "الدعم", links: links("مركز المساعدة", "المجتمع", "الحالة", "الأمان", "إمكانية الوصول") },
+    ],
+    copyright: "© 2026 فاصلة",
+    legal: links("الخصوصية", "الشروط", "ملفات تعريف الارتباط"),
+    legalLabel: "روابط قانونية",
+    backToTop: "العودة إلى الأعلى",
+  },
+}
+
+/** The block's English and Arabic copy, for stories and previews. */
+export const footerIndexNumberedColumnsCopy = COPY
+
+/** Numbers and Latin words inside an Arabic line keep their own direction. */
+function bidi(text: string, locale: FooterLocale): React.ReactNode {
+  if (locale !== "ar") return text
+  return text.split(/([A-Za-z0-9][A-Za-z0-9@./:–-]*)/).map((part, index) => (index % 2 ? <bdi key={index} dir="ltr">{part}</bdi> : part))
+}
+
+/**
+ * Plays the index's entrance once, at 35% visible. Hairlines draw from the top
+ * in document order; each column's links follow 120ms behind its own hairline.
+ * Reduced motion plays nothing, so everything stays drawn in place.
+ */
+function useIndexReveal(ref: React.RefObject<HTMLElement | null>) {
+  const reduced = usePrefersReducedMotion()
+  React.useEffect(() => {
+    const root = ref.current
+    if (!root || reduced || typeof IntersectionObserver === "undefined" || typeof root.animate !== "function") return
+    const play = () => {
+      // One column on a phone: the hairlines read as one line, drawn together.
+      const single = root.getBoundingClientRect().width < 640
+      root.querySelectorAll<HTMLElement>("[data-index-column]").forEach((column, index) => {
+        const start = single ? 0 : index * 60
+        column.querySelector<HTMLElement>("[data-hairline]")?.animate([{ transform: "scaleY(0)" }, { transform: "scaleY(1)" }], { duration: 320, delay: start, easing: "ease-out", fill: "backwards" })
+        column.querySelectorAll<HTMLElement>("[data-link]").forEach((link, order) => {
+          link.animate(
+            [
+              { opacity: 0, transform: "translateY(8px)" },
+              { opacity: 1, transform: "none" },
+            ],
+            { duration: 220, delay: index * 60 + 120 + order * 25, easing: "ease-out", fill: "backwards" }
+          )
+        })
+      })
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          observer.disconnect()
+          play()
+        }
+      },
+      { threshold: 0.35 }
+    )
+    observer.observe(root)
+    return () => observer.disconnect()
+  }, [ref, reduced])
+}
+
+function IndexColumn({ column, position }: { column: FooterIndexColumn; position: number }) {
+  const id = React.useId()
+  const number = column.number ?? String(position + 1).padStart(2, "0")
+  return (
+    <nav
+      aria-labelledby={id}
+      data-index-column=""
+      className="relative flex min-w-0 flex-col gap-3 px-4 [@container(min-width:40rem)]:gap-4 [@container(min-width:40rem)]:px-5 [@container(min-width:64rem)]:gap-5 [@container(min-width:64rem)]:px-6"
+    >
+      <span aria-hidden="true" data-hairline="" className="absolute inset-y-0 start-0 w-px origin-top bg-border" />
+      <div className="flex flex-col gap-1">
+        <span aria-hidden="true" className="text-sm font-medium text-muted-foreground">
+          {number}
+        </span>
+        <h3 id={id} className="text-base font-semibold text-foreground">
+          {column.title}
+        </h3>
+      </div>
+      <ul className="flex flex-col gap-2 [@container(min-width:40rem)]:gap-3">
+        {column.links.map((link) => (
+          <li key={`${link.label}-${link.href}`} data-link="" className="flex">
+            <FooterLinkItem link={link} />
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}
+
+export interface FooterIndexNumberedColumnsProps extends Omit<React.HTMLAttributes<HTMLElement>, "children">, Partial<FooterIndexNumberedColumnsCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: FooterLocale
+}
+
+export function FooterIndexNumberedColumns({ locale = "en", statement, indexLabel, columns, copyright, legal, legalLabel, backToTop, className, ...props }: FooterIndexNumberedColumnsProps) {
+  const copy = COPY[locale]
+  const rootRef = React.useRef<HTMLElement | null>(null)
+  useIndexReveal(rootRef)
+  const text = statement ?? copy.statement
+  const cols = (columns ?? copy.columns).filter((column) => column.links.length > 0)
+  const legalLinks = legal ?? copy.legal
+  const label = indexLabel ?? copy.indexLabel
+  return (
+    <FooterSection
+      ref={rootRef}
+      className={cn("border-t border-border py-8 md:py-16 lg:pb-8 lg:pt-20", className)}
+      contentClassName="gap-8 [@container(min-width:40rem)]:gap-12 [@container(min-width:64rem)]:gap-16"
+      {...props}
+    >
+      <div className="flex flex-col gap-6 [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:items-start [@container(min-width:40rem)]:justify-between">
+        <div className="flex max-w-[560px] flex-col items-start gap-3 [@container(min-width:40rem)]:gap-4 [@container(min-width:64rem)]:gap-5">
+          <FaslaLogo className="h-8" title="" />
+          {text ? <p className="text-lg font-light text-muted-foreground">{text}</p> : null}
+        </div>
+        {label ? <p className="text-list-header font-medium uppercase text-muted-foreground">{label}</p> : null}
+      </div>
+      {cols.length ? (
+        <div className="grid grid-cols-1 gap-y-6 [@container(min-width:40rem)]:grid-cols-2 [@container(min-width:40rem)]:gap-y-8 [@container(min-width:64rem)]:grid-cols-4">
+          {cols.map((column, index) => (
+            <IndexColumn key={column.title} column={column} position={index} />
+          ))}
+        </div>
+      ) : null}
+      <FooterRule />
+      <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">
+        <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>{bidi(copyright ?? copy.copyright, locale)}</FooterCopyright>
+          {legalLinks.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">
+                {legalLinks.map((link) => (
+                  <li key={`${link.label}-${link.href}`} className="flex">
+                    <FooterLinkItem link={link} className="text-xs" />
+                  </li>
+                ))}
+              </ul>
+            </nav>
+          ) : null}
+        </div>
+        <a
+          href="#"
+          className="group/top relative inline-flex items-center gap-2 self-start rounded-sm text-xs font-medium text-foreground [outline:none] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring after:absolute after:-inset-x-1 after:-inset-y-3 after:content-[''] [@container(min-width:40rem)]:self-auto"
+        >
+          {backToTop ?? copy.backToTop}
+          {/* A vertical arrow: never mirrored. */}
+          <ArrowUpIcon
+            aria-hidden="true"
+            className="size-3.5 transition-transform duration-150 ease-out motion-reduce:transition-none group-active/top:-translate-y-[3px] group-hover/top:[@container(min-width:40rem)]:-translate-y-[3px]"
+          />
+        </a>
+      </div>
+    </FooterSection>
+  )
+}

package/registry/blocks/footer-index-numbered-columns/index.ts

@@ -0,0 +1,7 @@
+export {
+  FooterIndexNumberedColumns,
+  footerIndexNumberedColumnsCopy,
+  type FooterIndexColumn,
+  type FooterIndexNumberedColumnsCopy,
+  type FooterIndexNumberedColumnsProps,
+} from "./FooterIndexNumberedColumns"

package/registry/blocks/footer-inline-preferences/FooterInlinePreferences.tsx

@@ -0,0 +1,164 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { Select } from "../../ui/select/select"
+import { Switch } from "../../ui/switch/switch"
+import { FooterCopyright, FooterLinkItem, FooterLogo, FooterSection, type FooterLink, type FooterLocale } from "../footer/footer"
+
+/*
+ * Figma: `Footer` (46380:22515), Type=Inline + Preferences.
+ *
+ * The logo and five links at the start; at the end the visitor's preferences:
+ * a Switch (label first, sm) for dark mode, a Select (sm) for the language,
+ * and the short copyright. Under a hairline.
+ *
+ * Desktop (1440) is one row, 24px above and below, the preferences 16px apart.
+ * Tablet (768) stacks: the logo and links above, the preferences below with
+ * the controls at their own size, 20px above and below. Mobile (360) stacks the
+ * preferences too: the switch above the language field, both full width, then
+ * the copyright, 16px above and below. In Arabic everything mirrors by the
+ * page's `dir`; the Switch and Select are the atoms, so the thumb and the menu
+ * follow the direction on their own.
+ *
+ * Motion is the atoms' own (the thumb, the menu under the field, flipping above
+ * when there is no room). The block itself animates nothing: the demo toggles
+ * only its own switch and select, not the page's colours.
+ */
+
+export type FooterTheme = "light" | "dark"
+
+export interface FooterInlinePreferencesCopy {
+  /** The links beside the logo. Hidden when empty. */
+  links: FooterLink[]
+  /** The accessible name of the links. */
+  navLabel: string
+  /** The Switch's label. */
+  darkModeLabel: string
+  /** The Select's accessible name. */
+  languageLabel: string
+  /** The Select's options. */
+  languages: { value: string; label: string }[]
+  /** The copyright line. */
+  copyright: string
+}
+
+/** Figma's copy, English and Arabic. The language names are written in their own language in both. */
+const COPY: Record<FooterLocale, FooterInlinePreferencesCopy> = {
+  en: {
+    links: ["Components", "Docs", "Pricing", "Blog", "Support"].map((label) => ({ label, href: "#" })),
+    navLabel: "Footer",
+    darkModeLabel: "Dark mode",
+    languageLabel: "Language",
+    languages: [
+      { value: "en", label: "English (US)" },
+      { value: "ar", label: "العربية" },
+    ],
+    copyright: "© 2026 Fasla",
+  },
+  ar: {
+    links: ["المكوّنات", "التوثيق", "الأسعار", "المدونة", "الدعم"].map((label) => ({ label, href: "#" })),
+    navLabel: "التذييل",
+    darkModeLabel: "الوضع الداكن",
+    languageLabel: "اللغة",
+    languages: [
+      { value: "en", label: "English (US)" },
+      { value: "ar", label: "العربية" },
+    ],
+    copyright: "© 2026 فاصلة",
+  },
+}
+
+/** The block's English and Arabic copy, for stories and previews. */
+export const footerInlinePreferencesCopy = COPY
+
+export interface FooterInlinePreferencesProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "onChange">, Partial<FooterInlinePreferencesCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: FooterLocale
+  /** The theme, when the page controls it. Without it the switch keeps its own state. */
+  theme?: FooterTheme
+  /** The theme the switch starts on when uncontrolled. */
+  defaultTheme?: FooterTheme
+  /** Called with the new theme when the switch is toggled. The block never changes the page's colours itself. */
+  onThemeChange?: (theme: FooterTheme) => void
+  /** The language, when the page controls it. Without it the select keeps its own state. */
+  language?: string
+  /** The language the select starts on when uncontrolled. Defaults to the copy's own language. */
+  defaultLanguage?: string
+  /** Called with the chosen language value. */
+  onLanguageChange?: (language: string) => void
+}
+
+export function FooterInlinePreferences({
+  locale = "en",
+  links,
+  navLabel,
+  darkModeLabel,
+  languageLabel,
+  languages,
+  copyright,
+  theme,
+  defaultTheme = "light",
+  onThemeChange,
+  language,
+  defaultLanguage,
+  onLanguageChange,
+  className,
+  ...props
+}: FooterInlinePreferencesProps) {
+  const copy = COPY[locale]
+  const items = links ?? copy.links
+  const options = languages ?? copy.languages
+  const [ownTheme, setOwnTheme] = React.useState<FooterTheme>(defaultTheme)
+  const [ownLanguage, setOwnLanguage] = React.useState<string>(defaultLanguage ?? locale)
+  const dark = (theme ?? ownTheme) === "dark"
+  const chosen = language ?? ownLanguage
+  return (
+    <FooterSection className={cn("border-t border-border py-4 md:py-5 lg:py-6", className)} {...props}>
+      <div className="flex flex-col gap-4 [@container(min-width:64rem)]:flex-row [@container(min-width:64rem)]:items-center [@container(min-width:64rem)]:justify-between [@container(min-width:64rem)]:gap-8">
+        <div className="flex flex-col items-start gap-4 [@container(min-width:40rem)]:gap-5 [@container(min-width:64rem)]:flex-row [@container(min-width:64rem)]:items-center [@container(min-width:64rem)]:gap-6">
+          <FooterLogo className="h-[26px]" />
+          {items.length ? (
+            <nav aria-label={navLabel ?? copy.navLabel}>
+              <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">
+                {items.map((link) => (
+                  <li key={`${link.label}-${link.href}`} className="flex">
+                    <FooterLinkItem link={link} className="text-foreground" />
+                  </li>
+                ))}
+              </ul>
+            </nav>
+          ) : null}
+        </div>
+        <div className="flex flex-col gap-3 [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:items-center [@container(min-width:64rem)]:gap-4">
+          <Switch
+            variant="solid"
+            layout="label-first"
+            size="sm"
+            label={darkModeLabel ?? copy.darkModeLabel}
+            checked={dark}
+            onChange={(event) => {
+              const next: FooterTheme = event.target.checked ? "dark" : "light"
+              setOwnTheme(next)
+              onThemeChange?.(next)
+            }}
+            className="[@container(min-width:40rem)]:shrink-0"
+          />
+          <Select
+            size="sm"
+            aria-label={languageLabel ?? copy.languageLabel}
+            items={options}
+            value={chosen}
+            onValueChange={(next) => {
+              if (next == null) return
+              setOwnLanguage(next)
+              onLanguageChange?.(next)
+            }}
+            className="w-full [@container(min-width:40rem)]:w-[150px] [@container(min-width:40rem)]:shrink-0"
+          />
+          <FooterCopyright>{copyright ?? copy.copyright}</FooterCopyright>
+        </div>
+      </div>
+    </FooterSection>
+  )
+}

package/registry/blocks/footer-inline-preferences/index.ts

@@ -0,0 +1,7 @@
+export {
+  FooterInlinePreferences,
+  footerInlinePreferencesCopy,
+  type FooterInlinePreferencesCopy,
+  type FooterInlinePreferencesProps,
+  type FooterTheme,
+} from "./FooterInlinePreferences"