@smicolon/fasla-ui 0.6.0 → 0.8.0

package/registry/blocks/how-it-works-accordion-steps/HowItWorksAccordionSteps.tsx

@@ -0,0 +1,213 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../ui/accordion/accordion"
+import {
+  enter,
+  HowItWorksEyebrow,
+  HowItWorksImage,
+  HowItWorksSection,
+  revealTargets,
+  useRevealOnEnter,
+  type HowItWorksLocale,
+  type HowItWorksPhoto,
+} from "../how-it-works/how-it-works"
+
+/*
+ * Figma: `How it Works` (42334:294272), Type=Accordion Steps.
+ *
+ * A header (an eyebrow and the heading, with a line at its end), then the
+ * Accordion atom with the plus and minus mark and five steps, beside a 480 × 420
+ * photo. One step is open at a time, the first at first; opening another closes
+ * the open one. The photo cross-fades to the open step's, or stays on the last
+ * one when every step is closed.
+ *
+ * Desktop sets a 704px accordion and the photo beside it. Tablet stacks the photo
+ * under the accordion at 260px tall, and Mobile drops the photo and lets the
+ * accordion take the column. The page's `dir` is all the accordion needs: it
+ * puts the mark at the other end by itself.
+ *
+ * Motion: the open step's panel grows and the closing one shuts as a real height
+ * change (the atom's 180ms), the plus turns into a minus, and the photo
+ * cross-fades over 320ms. The block's entrance plays once: the rows rise 8px,
+ * 70ms apart. Under reduced motion the panels open at once and the photo cuts.
+ * Figma's card also fades the body in 60ms behind the height; the atom's panel
+ * has no such delay, so the two arrive together.
+ *
+ * Content limits: five steps in Figma; any number from two to eight works. The
+ * heading up to 40 characters, the line up to 70. A step's title up to 44
+ * characters and its body up to 220. Figma draws only the first step's body;
+ * the other four are written for the code.
+ */
+
+export interface HowItWorksAccordionStep {
+  /** Keys the step. */
+  id: string
+  /** The row's title, such as "01 — Get the problem onto one wall". */
+  title: React.ReactNode
+  body: React.ReactNode
+}
+
+export interface HowItWorksAccordionStepsCopy {
+  eyebrow: React.ReactNode
+  /** The heading, an `h2`. */
+  heading: React.ReactNode
+  description: React.ReactNode
+  steps: HowItWorksAccordionStep[]
+}
+
+/** Figma's copy for the first step, English and Arabic, and copy for the other four. */
+const COPY: Record<HowItWorksLocale, HowItWorksAccordionStepsCopy> = {
+  en: {
+    eyebrow: "How it works",
+    heading: "Open a step to see what it involves",
+    description: "Five steps, and the detail stays out of the way until you ask for it.",
+    steps: [
+      {
+        id: "wall",
+        title: "01 — Get the problem onto one wall",
+        body: "One session with everyone who has a stake. Constraints, assumptions and open questions all go up where they can be argued with, and we leave with a written list of what is out of scope.",
+      },
+      {
+        id: "paper",
+        title: "02 — Sketch the flow on paper",
+        body: "Boxes and arrows on paper or a board, every screen in order and nothing styled. It is the cheapest place to find that two screens do the same job, or that one is missing.",
+      },
+      {
+        id: "grid",
+        title: "03 — Build the screens on a shared grid",
+        body: "Real layouts with real words and real numbers, all on one grid. Every state is drawn, not only the happy one, so the design is tested against what it will hold.",
+      },
+      {
+        id: "team",
+        title: "04 — Walk the flow with the team",
+        body: "The whole team goes through the flow on one call and says what is unclear. Questions are written down beside the screen they belong to, not carried away in someone's head.",
+      },
+      {
+        id: "handover",
+        title: "05 — Hand over with the reasoning intact",
+        body: "The flow passes to whoever builds it, with the notes that explain each decision. They can tell what was decided and why, without asking the person who drew it.",
+      },
+    ],
+  },
+  ar: {
+    eyebrow: "كيف نعمل",
+    heading: "افتح خطوة لترى ما تتضمّنه",
+    description: "خمس خطوات، وتبقى التفاصيل بعيدة عن الطريق حتى تطلبها.",
+    steps: [
+      {
+        id: "wall",
+        title: "01 — ضع المشكلة على حائط واحد",
+        body: "جلسة واحدة تحضرها كل الأطراف المعنيّة. تُعلَّق المحدّدات والافتراضات والأسئلة المفتوحة حيث يمكن مناقشتها، ونخرج بقائمة مكتوبة بما هو خارج النطاق.",
+      },
+      {
+        id: "paper",
+        title: "02 — ارسم المسار على الورق",
+        body: "مربعات وأسهم على ورقة أو لوح، وكل شاشة بترتيبها دون أي تنسيق. هو أرخص مكان لتكتشف أن شاشتين تؤديان العمل نفسه، أو أن إحداهما ناقصة.",
+      },
+      {
+        id: "grid",
+        title: "03 — ابنِ الشاشات على شبكة مشتركة",
+        body: "تخطيطات حقيقية بكلمات وأرقام حقيقية، كلها على شبكة واحدة. كل حالة مرسومة لا الحالة المثالية وحدها، فيُختبر التصميم بما سيحمله.",
+      },
+      {
+        id: "team",
+        title: "04 — استعرض المسار مع الفريق",
+        body: "يستعرض الفريق كله المسار في مكالمة واحدة ويقول ما هو غير واضح. تُدوَّن الأسئلة بجانب الشاشة التي تخصها، لا في رأس أحدهم.",
+      },
+      {
+        id: "handover",
+        title: "05 — سلّم مع حفظ المبرّرات",
+        body: "ينتقل المسار إلى من يبنيه، مع الملاحظات التي تشرح كل قرار. يعرف ما تقرّر ولماذا دون أن يسأل من رسمه.",
+      },
+    ],
+  },
+}
+
+export interface HowItWorksAccordionStepsProps extends Omit<React.HTMLAttributes<HTMLElement>, "title" | "onChange">, Partial<HowItWorksAccordionStepsCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: HowItWorksLocale
+  /**
+   * One photo per step, in order; the last one stays when every step is closed.
+   * A box without one is a quiet `muted` one.
+   * @default none: a `muted` placeholder
+   */
+  photos?: HowItWorksPhoto[]
+  /** The id of the step open at first. */
+  defaultStep?: string
+  /** Called with the id of the open step, or `null` when every step is closed. */
+  onStepChange?: (id: string | null) => void
+}
+
+export function HowItWorksAccordionSteps({ locale = "en", eyebrow, heading, description, steps, photos, defaultStep, onStepChange, className, ...props }: HowItWorksAccordionStepsProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const rootRef = React.useRef<HTMLElement>(null)
+  const list = steps ?? copy.steps
+  const [open, setOpen] = React.useState<string[]>([defaultStep ?? list[0]?.id ?? ""])
+  const [shownIndex, setShownIndex] = React.useState(Math.max(0, list.findIndex((step) => step.id === (defaultStep ?? list[0]?.id))))
+
+  useRevealOnEnter(rootRef, (node) =>
+    revealTargets(node, "row").map((row, index) => enter(row, [{ opacity: 0, transform: "translateY(8px)" }, { opacity: 1, transform: "none" }], { duration: 400, delay: index * 70 }))
+  )
+
+  const hasPhotos = !!photos && photos.length > 0
+  const photoIndex = hasPhotos ? Math.min(shownIndex, photos!.length - 1) : 0
+  return (
+    <HowItWorksSection ref={rootRef} labelledBy={headingId} className={className} {...props}>
+      <header className="flex w-full flex-col gap-4 [@container(min-width:64rem)]:flex-row [@container(min-width:64rem)]:items-end [@container(min-width:64rem)]:justify-between [@container(min-width:64rem)]:gap-24">
+        <div className="flex flex-col items-start gap-3">
+          <HowItWorksEyebrow>{eyebrow ?? copy.eyebrow}</HowItWorksEyebrow>
+          <h2 id={headingId} className="text-2xl font-semibold text-foreground [@container(min-width:40rem)]:text-3xl [@container(min-width:64rem)]:text-4xl">
+            {heading ?? copy.heading}
+          </h2>
+        </div>
+        <p className="text-base text-muted-foreground [@container(min-width:64rem)]:w-[360px] [@container(min-width:64rem)]:shrink-0">{description ?? copy.description}</p>
+      </header>
+
+      <div className="flex flex-col gap-8 [@container(min-width:64rem)]:flex-row [@container(min-width:64rem)]:items-start [@container(min-width:64rem)]:gap-16">
+        <Accordion
+          indicator="plus"
+          value={open}
+          onValueChange={(next) => {
+            const value = next as string[]
+            setOpen(value)
+            const id = value[0] ?? null
+            if (id !== null) setShownIndex(Math.max(0, list.findIndex((step) => step.id === id)))
+            onStepChange?.(id)
+          }}
+          className="min-w-0 flex-1"
+        >
+          {list.map((step) => (
+            <AccordionItem key={step.id} value={step.id} data-reveal="row">
+              <AccordionTrigger>{step.title}</AccordionTrigger>
+              <AccordionContent>{step.body}</AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+
+        <div
+          className={cn(
+            "relative hidden w-full shrink-0 overflow-hidden rounded-[10px] bg-muted [@container(min-width:40rem)]:block [@container(min-width:40rem)]:h-[260px] [@container(min-width:64rem)]:h-[420px] [@container(min-width:64rem)]:w-[480px]"
+          )}
+          aria-hidden={hasPhotos ? undefined : true}
+        >
+          {hasPhotos
+            ? photos!.map((photo, index) => (
+                <div key={photo.src + index} aria-hidden={index !== photoIndex} className={cn("absolute inset-0 transition-opacity duration-[320ms] ease-out motion-reduce:transition-none", index === photoIndex ? "opacity-100" : "opacity-0")}>
+                  <HowItWorksImage photo={photo} />
+                </div>
+              ))
+            : null}
+        </div>
+      </div>
+    </HowItWorksSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const howItWorksAccordionStepsCopy = COPY

package/registry/blocks/how-it-works-accordion-steps/index.ts

@@ -0,0 +1,7 @@
+export {
+  HowItWorksAccordionSteps,
+  howItWorksAccordionStepsCopy,
+  type HowItWorksAccordionStep,
+  type HowItWorksAccordionStepsCopy,
+  type HowItWorksAccordionStepsProps,
+} from "./HowItWorksAccordionSteps"

package/registry/blocks/how-it-works-center-spine-timeline/HowItWorksCenterSpineTimeline.tsx

@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import {
+  enter,
+  HowItWorksEyebrow,
+  HowItWorksFigures,
+  HowItWorksHeader,
+  HowItWorksImage,
+  HowItWorksSection,
+  revealTargets,
+  useRevealOnEnter,
+  type HowItWorksLocale,
+  type HowItWorksPhoto,
+} from "../how-it-works/how-it-works"
+
+/*
+ * Figma: `How it Works` (42334:294272), Type=Center Spine Timeline.
+ *
+ * A centred header (an eyebrow and the heading), then four weeks along a spine:
+ * a 1px `border` line with a 24px node on it for each week, the week's copy on
+ * one side and its photo on the other, alternating. Week 1's copy is at the
+ * start, week 2's at the end, and so on.
+ *
+ * Desktop is the two-sided spine, in a 1248px column: copy and photo are 452px
+ * wide, 40px from the spine, and each row is centred on its node. Tablet and
+ * Mobile move the spine to a rail at the start (a 40px gutter, 32px on phones)
+ * and stack each week: eyebrow, title, line, then the photo. The page's `dir`
+ * mirrors every width, so in Arabic the sides swap and the rail is at the right.
+ *
+ * Motion plays once, when the block comes into view: the spine draws down from
+ * its top (1.2s), each node pops as the line reaches it, then that week's copy
+ * rises 16px and its photo slides 24px in towards the spine. Figma ties the
+ * spine to the scroll position; the code draws it once and lets it rest, with no
+ * scroll tracking. Phones skip the node pop, as Figma does. Under reduced motion
+ * the block is its finished state.
+ *
+ * Content limits: the heading up to 56 characters. A week's eyebrow up to 16, its
+ * title up to 32 and its line up to 120. Four weeks in Figma; two to six work.
+ */
+
+export interface HowItWorksSpineStep {
+  /** Keys the week. */
+  id: string
+  /** The small line above the title, such as "Week 1". */
+  eyebrow: string
+  title: React.ReactNode
+  body: React.ReactNode
+}
+
+export interface HowItWorksCenterSpineTimelineCopy {
+  eyebrow: React.ReactNode
+  /** The heading, an `h2`. */
+  heading: React.ReactNode
+  steps: HowItWorksSpineStep[]
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<HowItWorksLocale, HowItWorksCenterSpineTimelineCopy> = {
+  en: {
+    eyebrow: "Project timeline",
+    heading: "What the first four weeks actually look like",
+    steps: [
+      { id: "room", eyebrow: "Week 1", title: "Get everyone in one room", body: "Kickoff, constraints, and a shared list of what we are not doing. That last one saves the most time." },
+      { id: "wireframe", eyebrow: "Week 2", title: "Wireframe the whole flow", body: "Every screen sketched at low fidelity, so gaps in the flow surface before anything looks finished." },
+      { id: "screens", eyebrow: "Week 3", title: "Build the real screens", body: "Layouts move into the file and start carrying real content. Real content changes decisions, so it arrives early." },
+      { id: "handover", eyebrow: "Week 4", title: "Review, refine, hand over", body: "A full walkthrough with the team, then a clean handover with the reasoning written down beside the work." },
+    ],
+  },
+  ar: {
+    eyebrow: "الجدول الزمني للمشروع",
+    heading: "كيف تبدو الأسابيع الأربعة الأولى فعلًا",
+    steps: [
+      { id: "room", eyebrow: "الأسبوع 1", title: "اجمع الجميع في غرفة واحدة", body: "انطلاقة ومحدّدات وقائمة مشتركة بما لن نفعله. هذه القائمة الأخيرة هي التي توفّر أكبر وقت." },
+      { id: "wireframe", eyebrow: "الأسبوع 2", title: "خطّط المسار كاملًا", body: "كل شاشة مرسومة بدقة منخفضة، فتظهر الفراغات في المسار قبل أن يبدو أي شيء مكتملًا." },
+      { id: "screens", eyebrow: "الأسبوع 3", title: "ابنِ الشاشات الحقيقية", body: "تنتقل التخطيطات إلى الملف وتبدأ بحمل محتوى حقيقي. المحتوى الحقيقي يغيّر القرارات، لذلك يأتي مبكرًا." },
+      { id: "handover", eyebrow: "الأسبوع 4", title: "راجِع، اصقُل، سلّم", body: "استعراض كامل مع الفريق، ثم تسليم نظيف مع تدوين المبرّرات جانب العمل." },
+    ],
+  },
+}
+
+export interface HowItWorksCenterSpineTimelineProps extends Omit<React.HTMLAttributes<HTMLElement>, "title" | "onChange">, Partial<HowItWorksCenterSpineTimelineCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: HowItWorksLocale
+  /**
+   * One photo per week, in order. A week without one shows a quiet `muted` box.
+   * @default none: `muted` placeholders
+   */
+  photos?: HowItWorksPhoto[]
+}
+
+export function HowItWorksCenterSpineTimeline({ locale = "en", eyebrow, heading, steps, photos, className, ...props }: HowItWorksCenterSpineTimelineProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const rootRef = React.useRef<HTMLElement>(null)
+  const list = steps ?? copy.steps
+
+  useRevealOnEnter(rootRef, (node) => {
+    const started: Animation[] = []
+    const spine = revealTargets(node, "spine")[0]
+    const wide = (spine?.parentElement?.clientWidth ?? 0) >= 1024
+    const phone = (spine?.parentElement?.clientWidth ?? 0) < 520
+    const rtl = getComputedStyle(node).direction === "rtl"
+    const total = 1200
+    if (spine) {
+      spine.style.transformOrigin = "top"
+      started.push(enter(spine, [{ transform: "scaleY(0)" }, { transform: "scaleY(1)" }], { duration: total, easing: "ease-in-out" }))
+    }
+    const rows = revealTargets(node, "row")
+    rows.forEach((row, index) => {
+      // The line reaches a node about when the line has covered that row's share of the spine.
+      const reached = ((index + 0.5) / rows.length) * total
+      const dot = row.querySelector<HTMLElement>('[data-reveal="node"]')
+      const words = row.querySelector<HTMLElement>('[data-reveal="copy"]')
+      const photo = row.querySelector<HTMLElement>('[data-reveal="photo"]')
+      if (dot && !phone) started.push(enter(dot, [{ opacity: 0, transform: "scale(0)" }, { opacity: 1, transform: "scale(1.2)", offset: 0.7 }, { opacity: 1, transform: "scale(1)" }], { duration: 300, delay: reached }))
+      if (words) started.push(enter(words, [{ opacity: 0, transform: "translateY(16px)" }, { opacity: 1, transform: "none" }], { duration: 450, delay: reached + 100 }))
+      if (photo) {
+        // On the wide spine a photo comes in towards it: from the outer side, which depends on the row and the direction.
+        const fromEnd = index % 2 === 0 ? 1 : -1
+        const x = wide ? 24 * fromEnd * (rtl ? -1 : 1) : 0
+        const y = wide ? 0 : 16
+        started.push(enter(photo, [{ opacity: 0, transform: `translate(${x}px, ${y}px)` }, { opacity: 1, transform: "none" }], { duration: 500, delay: reached + 150 }))
+      }
+    })
+    return started
+  })
+
+  return (
+    <HowItWorksSection ref={rootRef} labelledBy={headingId} className={className} {...props}>
+      <HowItWorksHeader
+        headingId={headingId}
+        eyebrow={eyebrow ?? copy.eyebrow}
+        heading={heading ?? copy.heading}
+        className="items-center text-center"
+        headingClassName="text-2xl [@container(min-width:40rem)]:text-3xl [@container(min-width:64rem)]:text-4xl"
+      />
+
+      <div className="relative">
+        {/* The spine: a rail at the start on phones and Tablet, down the middle from Desktop. */}
+        <span
+          aria-hidden="true"
+          data-reveal="spine"
+          className="absolute inset-y-0 start-4 w-px bg-border [@container(min-width:40rem)]:start-5 [@container(min-width:64rem)]:start-[calc(50%-0.5px)]"
+        />
+        <ol className="relative flex flex-col gap-10">
+          {list.map((step, index) => {
+            const copyFirst = index % 2 === 0
+            return (
+              <li key={step.id} data-reveal="row" className="relative ps-12 [@container(min-width:40rem)]:ps-14 [@container(min-width:64rem)]:grid [@container(min-width:64rem)]:grid-cols-[1fr_80px_1fr] [@container(min-width:64rem)]:items-center [@container(min-width:64rem)]:ps-0">
+                <span
+                  aria-hidden="true"
+                  data-reveal="node"
+                  className="absolute -top-1 start-1 flex size-6 items-center justify-center rounded-full border border-border bg-background [@container(min-width:40rem)]:start-2 [@container(min-width:64rem)]:static [@container(min-width:64rem)]:col-start-2 [@container(min-width:64rem)]:row-start-1 [@container(min-width:64rem)]:justify-self-center"
+                >
+                  <span className="size-2.5 rounded-full bg-primary" />
+                </span>
+                <div
+                  className={cn(
+                    "[@container(min-width:64rem)]:row-start-1 [@container(min-width:64rem)]:flex",
+                    copyFirst
+                      ? "[@container(min-width:64rem)]:col-start-1 [@container(min-width:64rem)]:justify-end [@container(min-width:64rem)]:pe-10 [@container(min-width:64rem)]:text-end"
+                      : "[@container(min-width:64rem)]:col-start-3 [@container(min-width:64rem)]:justify-start [@container(min-width:64rem)]:ps-10"
+                  )}
+                >
+                  <div data-reveal="copy" className="flex w-full flex-col gap-2 [@container(min-width:64rem)]:max-w-[452px]">
+                    <HowItWorksEyebrow>
+                      <HowItWorksFigures>{step.eyebrow}</HowItWorksFigures>
+                    </HowItWorksEyebrow>
+                    <h3 className="text-xl font-semibold text-foreground">{step.title}</h3>
+                    <p className="text-sm text-muted-foreground">{step.body}</p>
+                  </div>
+                </div>
+                <div
+                  className={cn(
+                    "mt-5 [@container(min-width:64rem)]:row-start-1 [@container(min-width:64rem)]:mt-0 [@container(min-width:64rem)]:flex",
+                    copyFirst
+                      ? "[@container(min-width:64rem)]:col-start-3 [@container(min-width:64rem)]:justify-start [@container(min-width:64rem)]:ps-10"
+                      : "[@container(min-width:64rem)]:col-start-1 [@container(min-width:64rem)]:justify-end [@container(min-width:64rem)]:pe-10"
+                  )}
+                >
+                  <div data-reveal="photo" className="relative h-[180px] w-full overflow-hidden rounded-[10px] bg-muted [@container(min-width:40rem)]:h-[240px] [@container(min-width:64rem)]:h-[268px] [@container(min-width:64rem)]:w-[452px]">
+                    <HowItWorksImage photo={photos?.[Math.min(index, (photos?.length ?? 1) - 1)]} />
+                  </div>
+                </div>
+              </li>
+            )
+          })}
+        </ol>
+      </div>
+    </HowItWorksSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const howItWorksCenterSpineTimelineCopy = COPY

package/registry/blocks/how-it-works-center-spine-timeline/index.ts

@@ -0,0 +1,7 @@
+export {
+  HowItWorksCenterSpineTimeline,
+  howItWorksCenterSpineTimelineCopy,
+  type HowItWorksCenterSpineTimelineCopy,
+  type HowItWorksCenterSpineTimelineProps,
+  type HowItWorksSpineStep,
+} from "./HowItWorksCenterSpineTimeline"