@smicolon/fasla-ui 0.5.1 → 0.7.0

package/registry/blocks/error-state-colour-field-scatter/ErrorStateColourFieldScatter.tsx

@@ -0,0 +1,144 @@
+"use client"
+
+import * as React from "react"
+import { ArrowRight } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+
+/*
+ * Figma: `Error State` (42556:548), Type=Colour Field Scatter.
+ *
+ * A field of `destructive` with the error code's digits scattered across it
+ * in display type, the brand and a way home in its corners, and a short
+ * message at the bottom. Everything on the field is placed absolutely, as in
+ * Figma, with logical insets: in Arabic the scatter mirrors across the
+ * field's centre and the brand and back link swap corners on their own. The
+ * digits' insets are fractions of the field's width, so the scatter keeps its
+ * shape between breakpoints and lands on Figma's pixels at 360, 768 and 1440.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440).
+ */
+
+export interface ErrorStateColourFieldScatterAction {
+  label: React.ReactNode
+  href: string
+}
+
+export interface ErrorStateColourFieldScatterCopy {
+  /** The status code. Its first three characters are scattered across the field. Hidden when empty. */
+  code: string
+  /** The brand in the top corner. Hidden when empty. */
+  brand: React.ReactNode
+  /** The way home, a link in the opposite corner. Hidden when null. */
+  backAction: ErrorStateColourFieldScatterAction | null
+  /** The page's heading, an `h1`: the small label above the message. */
+  heading: React.ReactNode
+  /** The message under the heading: what happened and what to do. */
+  description: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", ErrorStateColourFieldScatterCopy> = {
+  en: {
+    code: "404",
+    brand: "Fasla",
+    backAction: { label: "Back to home", href: "/" },
+    heading: "Error 404",
+    description:
+      "The page you were looking for does not exist. You may have mistyped the address, or the page may have moved.",
+  },
+  ar: {
+    code: "404",
+    brand: "فاصلة",
+    backAction: { label: "العودة إلى الرئيسية", href: "/" },
+    heading: (
+      <>
+        خطأ <bdi dir="ltr">404</bdi>
+      </>
+    ),
+    description: "الصفحة التي تبحث عنها غير موجودة. ربما أخطأت في كتابة العنوان، أو تم نقل الصفحة.",
+  },
+}
+
+/**
+ * Where each digit sits: its inline-start inset as a fraction of the field's
+ * width (Figma's x over the frame's width) and its top, at each breakpoint.
+ */
+const DIGITS = [
+  "start-[6.6667%] top-[150px] md:start-[6.25%] md:top-[236px] lg:start-[6.6667%] lg:top-[300px]",
+  "start-[38.8889%] top-[54px] md:start-[38.5417%] md:top-[72px] lg:start-[41.6667%] lg:top-[90px]",
+  "start-[54.4444%] top-[268px] md:start-[70.3125%] md:top-[352px] lg:start-[75.6944%] lg:top-[430px]",
+]
+
+export interface ErrorStateColourFieldScatterProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<ErrorStateColourFieldScatterCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+}
+
+export function ErrorStateColourFieldScatter({
+  locale = "en",
+  code,
+  brand,
+  backAction,
+  heading,
+  description,
+  className,
+  ...props
+}: ErrorStateColourFieldScatterProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const digits = Array.from(code ?? copy.code).slice(0, DIGITS.length)
+  const mark = brand ?? copy.brand
+  const back = backAction === undefined ? copy.backAction : backAction
+
+  return (
+    <section
+      aria-labelledby={headingId}
+      className={cn(
+        "relative h-[600px] overflow-hidden bg-destructive text-destructive-foreground md:h-[620px] lg:h-[700px]",
+        className
+      )}
+      {...props}
+    >
+      {/* The heading names the code; the scattered digits are its picture. */}
+      {digits.map((digit, index) => (
+        <span
+          key={index}
+          aria-hidden="true"
+          className={cn("absolute text-7xl font-bold md:text-8xl lg:text-9xl", DIGITS[index])}
+        >
+          {digit}
+        </span>
+      ))}
+
+      {mark ? (
+        <p className="absolute start-6 top-7 text-sm font-semibold md:start-12 md:top-12 lg:start-24 lg:top-16">{mark}</p>
+      ) : null}
+
+      {back ? (
+        <a
+          href={back.href}
+          className="absolute start-6 top-[540px] inline-flex items-center gap-1.5 rounded-sm text-sm font-medium underline-offset-4 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-destructive-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-destructive md:start-auto md:end-[101px] md:top-12 lg:end-[149px] lg:top-16"
+        >
+          {back.label}
+          <ArrowRight aria-hidden="true" size={14} strokeWidth={1.5} absoluteStrokeWidth className="size-3.5 shrink-0 [&:dir(rtl)]:-scale-x-100" />
+        </a>
+      ) : null}
+
+      <div className="absolute start-6 top-[392px] flex w-[300px] max-w-[calc(100%-3rem)] flex-col gap-3 md:start-12 md:top-[462px] lg:start-24 lg:top-[520px] lg:w-[340px]">
+        <h1 id={headingId} className="text-sm font-semibold">
+          {heading ?? copy.heading}
+        </h1>
+        <p className="text-sm">{description ?? copy.description}</p>
+      </div>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const errorStateColourFieldScatterCopy = COPY

package/registry/blocks/error-state-colour-field-scatter/index.ts

@@ -0,0 +1,7 @@
+export {
+  ErrorStateColourFieldScatter,
+  errorStateColourFieldScatterCopy,
+  type ErrorStateColourFieldScatterAction,
+  type ErrorStateColourFieldScatterCopy,
+  type ErrorStateColourFieldScatterProps,
+} from "./ErrorStateColourFieldScatter"

package/registry/blocks/error-state-countdown-redirect/ErrorStateCountdownRedirect.tsx

@@ -0,0 +1,272 @@
+"use client"
+
+import * as React from "react"
+import { Timer } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Button, buttonVariants } from "../../ui/button/button"
+import { Progress } from "../../ui/progress/progress"
+
+/*
+ * Figma: `Error State` (42556:548), Type=Countdown Redirect.
+ *
+ * A card on a muted field that sends the visitor home on its own: a bar
+ * fills over the countdown while the line under it counts the seconds down.
+ * Cancel (or Stay on this page) stops it where it is and greys the bar; Go
+ * home now leaves at once. At zero the block calls `onRedirect`, or follows
+ * the Go home now link when there is none.
+ *
+ * Under `prefers-reduced-motion` the countdown and the redirect run as
+ * usual and only the bar holds still: the line under it counts the seconds.
+ * The block follows the setting live.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440). Direction is the page's `dir`; every
+ * side is a logical one, and the Progress atom fills from the inline start,
+ * so the bar runs right to left in Arabic on its own.
+ */
+
+export interface ErrorStateCountdownRedirectAction {
+  label: React.ReactNode
+  href: string
+}
+
+export interface ErrorStateCountdownRedirectCopy {
+  /** The card's heading, an `h1`. Name what happened. */
+  heading: React.ReactNode
+  /** The line under the heading. */
+  description: React.ReactNode
+  /** The line under the bar while it counts, built from the seconds left. */
+  countdown: (seconds: number) => React.ReactNode
+  /** The line under the bar once the visitor cancels. */
+  cancelled: React.ReactNode
+  /** The line under the bar at zero, while the app takes over. */
+  redirecting: React.ReactNode
+  /** The small button beside the countdown that stops it. */
+  cancelLabel: React.ReactNode
+  /** The solid button: leave now. Its `href` is also where the countdown goes. */
+  primaryAction: ErrorStateCountdownRedirectAction
+  /** The ghost button beside it, which cancels the redirect too. Hidden when empty. */
+  stayLabel: React.ReactNode
+}
+
+/** Arabic counts its nouns: the dual ثانيتين for two, ثوانٍ for three to ten, ثانية otherwise. */
+const arabicSeconds = (seconds: number) => (seconds === 2 ? "ثانيتين" : seconds >= 3 && seconds <= 10 ? "ثوانٍ" : "ثانية")
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", ErrorStateCountdownRedirectCopy> = {
+  en: {
+    heading: "404 — we couldn’t find that page",
+    description: "We’ll take you back to the homepage automatically, so you don’t have to do anything.",
+    countdown: (seconds) => `Redirecting in ${seconds} ${seconds === 1 ? "second" : "seconds"}`,
+    cancelled: "Redirect cancelled",
+    redirecting: "Redirecting…",
+    cancelLabel: "Cancel",
+    primaryAction: { label: "Go home now", href: "/" },
+    stayLabel: "Stay on this page",
+  },
+  ar: {
+    heading: (
+      <>
+        خطأ <bdi dir="ltr">404</bdi>: لم نتمكن من العثور على تلك الصفحة
+      </>
+    ),
+    description: "سنعيدك إلى الصفحة الرئيسية تلقائيًا، فلا داعي لأن تفعل شيئًا.",
+    countdown: (seconds) => (
+      <>
+        إعادة التوجيه خلال <bdi dir="ltr">{seconds}</bdi> {arabicSeconds(seconds)}
+      </>
+    ),
+    cancelled: "أُلغيت إعادة التوجيه",
+    redirecting: "جارٍ إعادة التوجيه…",
+    cancelLabel: "إلغاء",
+    primaryAction: { label: "اذهب إلى الرئيسية الآن", href: "/" },
+    stayLabel: "ابقَ في هذه الصفحة",
+  },
+}
+
+export interface ErrorStateCountdownRedirectProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<ErrorStateCountdownRedirectCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * How long the countdown runs, in seconds.
+   * @default 10
+   */
+  seconds?: number
+  /**
+   * The glyph in the badge. Pass `null` to drop the badge.
+   * @default a timer
+   */
+  icon?: React.ReactNode
+  /** Called at zero, in place of following the Go home now link: route with your app's router here. */
+  onRedirect?: () => void
+  /** Called when the visitor cancels the countdown or chooses to stay. */
+  onCancel?: () => void
+}
+
+type Phase = "counting" | "cancelled" | "redirecting"
+
+/** Whether the visitor asks for reduced motion, kept up to date. False on the server. */
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = React.useState(false)
+  React.useEffect(() => {
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)")
+    const update = () => setReduced(query.matches)
+    update()
+    query.addEventListener("change", update)
+    return () => query.removeEventListener("change", update)
+  }, [])
+  return reduced
+}
+
+/** How often the bar moves on, in ms: small enough to read as a continuous fill. */
+const TICK = 100
+
+export function ErrorStateCountdownRedirect({
+  locale = "en",
+  heading,
+  description,
+  countdown,
+  cancelled,
+  redirecting,
+  cancelLabel,
+  primaryAction,
+  stayLabel,
+  seconds = 10,
+  icon,
+  onRedirect,
+  onCancel,
+  className,
+  ...props
+}: ErrorStateCountdownRedirectProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const reduced = usePrefersReducedMotion()
+  const total = Math.max(1, seconds) * 1000
+  const [elapsed, setElapsed] = React.useState(0)
+  const [stopped, setStopped] = React.useState(false)
+  const primary = primaryAction ?? copy.primaryAction
+  const stay = stayLabel ?? copy.stayLabel
+  const glyph = icon === undefined ? <Timer aria-hidden="true" className="size-6" size={24} strokeWidth={1.5} absoluteStrokeWidth /> : icon
+
+  const phase: Phase = elapsed >= total ? "redirecting" : stopped ? "cancelled" : "counting"
+
+  // Restart when the length changes.
+  React.useEffect(() => setElapsed(0), [total])
+
+  // The count runs only while it is counting: a cancel or zero stops it.
+  React.useEffect(() => {
+    if (phase !== "counting") return
+    const startedAt = Date.now() - elapsed
+    const timer = window.setInterval(() => setElapsed(Math.min(total, Date.now() - startedAt)), TICK)
+    return () => window.clearInterval(timer)
+    // `elapsed` is read once, to resume from where the count stood.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [phase, total])
+
+  // Keep the latest callbacks without restarting the count when they change.
+  const redirect = React.useRef<() => void>(() => {})
+  redirect.current = () => {
+    if (onRedirect) onRedirect()
+    else window.location.assign(primary.href)
+  }
+  // At zero, unless the visitor already left with the link.
+  const leftByLink = React.useRef(false)
+  React.useEffect(() => {
+    if (phase === "redirecting" && !leftByLink.current) redirect.current?.()
+  }, [phase])
+
+  // Go home now: the bar completes at once. With `onRedirect` the app routes;
+  // without it, the link navigates as a link does.
+  const goNow = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    leftByLink.current = true
+    setStopped(false)
+    setElapsed(total)
+    if (onRedirect) {
+      event.preventDefault()
+      onRedirect()
+    }
+  }
+
+  const cancel = () => {
+    if (phase !== "counting") return
+    setStopped(true)
+    onCancel?.()
+  }
+
+  const left = Math.ceil((total - elapsed) / 1000)
+  // Under reduced motion the bar holds still, empty, while the line counts.
+  const value = reduced ? 0 : (elapsed / total) * 100
+  const line =
+    phase === "cancelled"
+      ? cancelled ?? copy.cancelled
+      : phase === "redirecting"
+        ? redirecting ?? copy.redirecting
+        : (countdown ?? copy.countdown)(left)
+  // Screen readers hear the state when it changes, not every second.
+  const announcement =
+    phase === "counting" ? (countdown ?? copy.countdown)(Math.ceil(total / 1000)) : line
+
+  return (
+    <section aria-labelledby={headingId} className={cn("bg-muted p-8 md:p-16 lg:p-24", className)} {...props}>
+      <div className="mx-auto flex w-full max-w-[520px] flex-col items-center gap-5 rounded-xl bg-card p-6 text-center shadow-lg ring-1 ring-inset ring-border md:gap-6 md:p-10">
+        {glyph ? (
+          <div className="flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground md:size-14">
+            {glyph}
+          </div>
+        ) : null}
+        <div className="flex w-full flex-col gap-2.5">
+          <h1 id={headingId} className="text-xl font-semibold text-foreground md:text-2xl">
+            {heading ?? copy.heading}
+          </h1>
+          <p className="text-sm text-muted-foreground">{description ?? copy.description}</p>
+        </div>
+        <div className="flex w-full flex-col gap-2.5">
+          <Progress
+            aria-hidden="true"
+            value={value}
+            size="sm"
+            showPercentage={false}
+            className={cn(phase === "cancelled" && "[&_[data-slot=indicator]]:bg-muted-foreground")}
+          />
+          <div className="flex items-center gap-3">
+            <p aria-hidden="true" className="flex-1 text-start text-xs text-muted-foreground">
+              {line}
+            </p>
+            <p role="status" className="sr-only">
+              {announcement}
+            </p>
+            {phase === "counting" ? (
+              <Button
+                type="button"
+                variant="ghost"
+                size="xs"
+                onClick={cancel}
+                className="h-auto px-0 hover:bg-transparent hover:underline"
+              >
+                {cancelLabel ?? copy.cancelLabel}
+              </Button>
+            ) : null}
+          </div>
+        </div>
+        <div className="flex w-full flex-col gap-2.5 md:w-auto md:flex-row md:gap-3">
+          <a href={primary.href} onClick={goNow} className={buttonVariants()}>
+            {primary.label}
+          </a>
+          {stay ? (
+            <Button type="button" variant="ghost" onClick={cancel}>
+              {stay}
+            </Button>
+          ) : null}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const errorStateCountdownRedirectCopy = COPY

package/registry/blocks/error-state-countdown-redirect/index.ts

@@ -0,0 +1,7 @@
+export {
+  ErrorStateCountdownRedirect,
+  errorStateCountdownRedirectCopy,
+  type ErrorStateCountdownRedirectAction,
+  type ErrorStateCountdownRedirectCopy,
+  type ErrorStateCountdownRedirectProps,
+} from "./ErrorStateCountdownRedirect"

package/registry/blocks/error-state-dark-spotlight/ErrorStateDarkSpotlight.tsx

@@ -0,0 +1,156 @@
+"use client"
+
+import * as React from "react"
+import { ArrowUpRight, Telescope } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { buttonVariants } from "../../ui/button/button"
+
+/*
+ * Figma: `Error State` (42556:548), Type=Dark Spotlight.
+ *
+ * The message on an inverted surface, beside a glyph in two soft halo rings.
+ * The surface is painted with the inverse tokens, the only way Fasla inverts
+ * one: dark in Light, light in Dark, without forcing a `.dark` class. The
+ * theme-inverse registry item maps the tokens, falling back to the page
+ * colours swapped in a theme that doesn't define them. The Button is the
+ * library's; only its focus ring is set here, in the inverse foreground, so
+ * it shows on the inverted surface.
+ *
+ * The halo sits beside the copy on Desktop and above it on Tablet and Mobile.
+ * The telescope is a pictogram, so it is never mirrored; in Arabic only its
+ * place changes. Mobile first: the base classes are Figma's Mobile (360),
+ * `md:` its Tablet (768) and `lg:` its Desktop (1440).
+ */
+
+export interface ErrorStateDarkSpotlightAction {
+  label: React.ReactNode
+  href: string
+}
+
+export interface ErrorStateDarkSpotlightCopy {
+  /** The small label above the heading. Hidden when empty. */
+  eyebrow: React.ReactNode
+  /** The page's heading, an `h1`. Name what happened. */
+  heading: React.ReactNode
+  /** The line under the heading: what to do next. */
+  description: React.ReactNode
+  /** The solid button: the way out, usually home. */
+  primaryAction: ErrorStateDarkSpotlightAction
+  /** The text link beside it, with an outward arrow. Hidden when null. */
+  secondaryAction: ErrorStateDarkSpotlightAction | null
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", ErrorStateDarkSpotlightCopy> = {
+  en: {
+    eyebrow: "ERROR 404",
+    heading: (
+      <>
+        <span className="text-destructive">Oops</span> — this page is off the grid.
+      </>
+    ),
+    description:
+      "We cannot find what you asked for. It may have been retired, or the link that brought you here may be out of date.",
+    primaryAction: { label: "Take me home", href: "/" },
+    secondaryAction: { label: "Report a problem", href: "#report" },
+  },
+  ar: {
+    eyebrow: (
+      <>
+        خطأ <bdi dir="ltr">404</bdi>
+      </>
+    ),
+    heading: "عذرًا، هذه الصفحة خارج التغطية.",
+    description: "لا يمكننا العثور على ما طلبته. ربما تم إيقافها، أو أن الرابط الذي أوصلك إلى هنا لم يعد صالحًا.",
+    primaryAction: { label: "خذني إلى الرئيسية", href: "/" },
+    secondaryAction: { label: "أبلغ عن مشكلة", href: "#report" },
+  },
+}
+
+export interface ErrorStateDarkSpotlightProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<ErrorStateDarkSpotlightCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The glyph in the halo. Pass `null` to drop the halo.
+   * @default a telescope
+   */
+  icon?: React.ReactNode
+}
+
+export function ErrorStateDarkSpotlight({
+  locale = "en",
+  eyebrow,
+  heading,
+  description,
+  primaryAction,
+  secondaryAction,
+  icon,
+  className,
+  ...props
+}: ErrorStateDarkSpotlightProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const label = eyebrow ?? copy.eyebrow
+  const primary = primaryAction ?? copy.primaryAction
+  const secondary = secondaryAction === undefined ? copy.secondaryAction : secondaryAction
+  const glyph =
+    icon === undefined ? (
+      <Telescope aria-hidden="true" size={112} strokeWidth={1.5} absoluteStrokeWidth className="size-[62px] md:size-[84px] lg:size-28" />
+    ) : (
+      icon
+    )
+
+  return (
+    <section
+      aria-labelledby={headingId}
+      className={cn("bg-background-inverse p-8 md:p-16 lg:p-24", className)}
+      {...props}
+    >
+      <div className="mx-auto flex w-full max-w-[1248px] flex-col items-center gap-8 md:gap-10 lg:min-h-[400px] lg:flex-row lg:justify-between lg:gap-16">
+        {glyph ? (
+          <div
+            aria-hidden="true"
+            className="flex size-[220px] shrink-0 items-center justify-center rounded-full bg-muted-foreground-inverse/10 md:size-[300px] lg:order-last lg:size-[400px]"
+          >
+            <div className="flex size-[145px] items-center justify-center rounded-full bg-muted-foreground-inverse/[0.18] text-foreground-inverse md:size-[198px] lg:size-[264px]">
+              {glyph}
+            </div>
+          </div>
+        ) : null}
+
+        <div className="flex w-full flex-col gap-6 lg:w-[560px]">
+          {label ? <p className="text-xs font-medium text-muted-foreground-inverse">{label}</p> : null}
+          <h1 id={headingId} className="text-3xl font-semibold text-foreground-inverse lg:text-5xl">
+            {heading ?? copy.heading}
+          </h1>
+          <p className="text-base text-muted-foreground-inverse">{description ?? copy.description}</p>
+          <div className="flex flex-col gap-3 md:flex-row md:items-center md:gap-4">
+            <a
+              href={primary.href}
+              className={buttonVariants({ variant: "secondary", className: "after:ring-foreground-inverse" })}
+            >
+              {primary.label}
+            </a>
+            {secondary ? (
+              <a
+                href={secondary.href}
+                className="inline-flex items-center justify-center gap-1.5 self-center rounded-sm text-sm font-medium text-foreground-inverse underline-offset-4 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-foreground-inverse focus-visible:ring-offset-2 focus-visible:ring-offset-background-inverse md:self-auto"
+              >
+                {secondary.label}
+                <ArrowUpRight aria-hidden="true" size={14} strokeWidth={1.5} absoluteStrokeWidth className="size-3.5 shrink-0" />
+              </a>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const errorStateDarkSpotlightCopy = COPY

package/registry/blocks/error-state-dark-spotlight/index.ts

@@ -0,0 +1,7 @@
+export {
+  ErrorStateDarkSpotlight,
+  errorStateDarkSpotlightCopy,
+  type ErrorStateDarkSpotlightAction,
+  type ErrorStateDarkSpotlightCopy,
+  type ErrorStateDarkSpotlightProps,
+} from "./ErrorStateDarkSpotlight"