@smicolon/fasla-ui 0.6.0 → 0.7.0

package/registry/blocks/faq-masonry-cards/FaqMasonryCards.tsx

@@ -0,0 +1,268 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../ui/accordion/accordion"
+
+/*
+ * Figma: `FAQ` (42359:9029), Type=Masonry Cards.
+ *
+ * Questions as raised cards, the Accordion's Split style, in two columns
+ * that each grow on their own, so an open card pushes down only its own
+ * column. Each item says which column it goes in; the columns stack on
+ * Mobile, the first above the second, which keeps the reading order.
+ *
+ * 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 here is a logical one.
+ */
+
+export interface FaqMasonryCardsItem {
+  question: React.ReactNode
+  /** The answer. An intro line and a list are what Figma shows; any content works. */
+  answer: React.ReactNode
+  /** Identifies the item for `defaultValue`. Defaults to its index, as a string. */
+  value?: string
+  /** Which column the card goes in. Without it, the first half of the items fill the first column. */
+  column?: 1 | 2
+}
+
+export interface FaqMasonryCardsCopy {
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The questions, as cards. Each item has a `question`, an `answer` and an optional `value` that `defaultValue` opens it by. An optional `column`, 1 or 2, pins a card to a column; without it the first half fill the first column. */
+  items: FaqMasonryCardsItem[]
+  /** Shown in place of the questions when `items` is empty. */
+  empty: React.ReactNode
+}
+
+/** An answer made of an intro line and a list, as Figma's open card has it. */
+function ListAnswer({ intro, points }: { intro: React.ReactNode; points: React.ReactNode[] }) {
+  return (
+    <>
+      <p>{intro}</p>
+      <ul className="list-disc ps-5">
+        {points.map((point, index) => (
+          <li key={index}>{point}</li>
+        ))}
+      </ul>
+    </>
+  )
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", FaqMasonryCardsCopy> = {
+  en: {
+    heading: "Frequently Asked Questions",
+    items: [
+      {
+        column: 1,
+        question: "What is a design system, really?",
+        answer:
+          "A shared set of components, tokens and rules that designers and developers both build from, so every screen is made of the same parts.",
+      },
+      {
+        column: 1,
+        question: "How much does Fasla cost?",
+        answer: "One licence per editor seat, paid yearly. Viewers and developers are free, and every update is included.",
+      },
+      {
+        column: 1,
+        question: "How does Fasla work alongside Tailwind, shadcn/ui and your own CSS?",
+        answer: (
+          <ListAnswer
+            intro="It sits on top of them:"
+            points={[
+              "Tokens follow shadcn/ui names, mapped into your Tailwind theme",
+              "Components are copied into your project, so you own the code",
+              "Your own CSS keeps working beside them",
+            ]}
+          />
+        ),
+      },
+      {
+        column: 1,
+        question: "What integrations are available?",
+        answer: "Figma variables, Dev Mode, a shadcn-compatible code registry and a CLI that installs components with one command.",
+      },
+      {
+        column: 1,
+        question: "Do I need a developer to use it?",
+        answer: "Not to design with it. To ship the coded components, someone on your team needs to run one install command.",
+      },
+      {
+        column: 2,
+        question: "What do teams get on day one?",
+        answer: (
+          <ListAnswer
+            intro="Everything ships in one file:"
+            points={[
+              "1,600+ components across 129 variant sets",
+              "Light and dark themes bound to variables",
+              "LTR and RTL directions for every block",
+              "Desktop, tablet and mobile breakpoints",
+              "A living changelog and a request channel",
+            ]}
+          />
+        ),
+      },
+      {
+        column: 2,
+        question: "How long does implementation take?",
+        answer: "Most teams publish the library on the first day and replace their own components over two to four weeks.",
+      },
+      {
+        column: 2,
+        question: "What kind of support can I expect?",
+        answer: "Email support with a reply within one business day, onboarding help for teams, and a channel to request components.",
+      },
+    ],
+    empty: "No questions yet.",
+  },
+  ar: {
+    heading: "الأسئلة الشائعة",
+    items: [
+      {
+        column: 1,
+        question: "ما نظام التصميم في حقيقته؟",
+        answer: "مجموعة مشتركة من المكوّنات والرموز والقواعد يبني منها المصممون والمطوّرون معًا، فتتكوّن كل شاشة من الأجزاء نفسها.",
+      },
+      {
+        column: 1,
+        question: "كم تبلغ تكلفة فاصلة؟",
+        answer: "ترخيص واحد لكل مقعد تحرير، يُدفع سنويًا. المشاهدون والمطوّرون مجانيون، وكل التحديثات مشمولة.",
+      },
+      {
+        column: 1,
+        question: "كيف تعمل فاصلة جنبًا إلى جنب مع أدوات مثل Tailwind، shadcn/ui، وأنماط CSS الخاصة بك؟",
+        answer: (
+          <ListAnswer
+            intro="تعمل فوقها:"
+            points={[
+              "تتبع الرموز أسماء shadcn/ui، وتُربط بسمة Tailwind في مشروعك",
+              "تُنسخ المكوّنات إلى مشروعك، فتملك شيفرتها",
+              "تبقى أنماط CSS الخاصة بك تعمل إلى جانبها",
+            ]}
+          />
+        ),
+      },
+      {
+        column: 1,
+        question: "ما عمليات الربط المتاحة؟",
+        answer: "متغيّرات Figma، ووضع Dev Mode، وسجل شيفرة متوافق مع shadcn، وأداة سطر أوامر تثبّت المكوّنات بأمر واحد.",
+      },
+      {
+        column: 1,
+        question: "هل أحتاج إلى مطوّر لاستخدامها؟",
+        answer: "لا تحتاج إليه للتصميم بها. أما لنشر المكوّنات البرمجية، فيكفي أن يشغّل أحد أفراد فريقك أمر تثبيت واحدًا.",
+      },
+      {
+        column: 2,
+        question: "ما الذي تحصل عليه الفرق في اليوم الأول؟",
+        answer: (
+          <ListAnswer
+            intro="كل شيء يأتي في ملف واحد:"
+            points={[
+              <>
+                أكثر من <bdi dir="ltr">1,600</bdi> مكوّن ضمن <bdi dir="ltr">129</bdi> مجموعة نسخ
+              </>,
+              "وضعان فاتح وداكن مرتبطان بالمتغيّرات",
+              "اتجاها القراءة لكل كتلة",
+              "نقاط توقّف لسطح المكتب واللوحي والجوال",
+              "سجلّ تغييرات حيّ وقناة للطلبات",
+            ]}
+          />
+        ),
+      },
+      {
+        column: 2,
+        question: "كم يستغرق التنفيذ؟",
+        answer: (
+          <>
+            تنشر معظم الفرق المكتبة في اليوم الأول، وتستبدل مكوّناتها خلال أسبوعين إلى <bdi dir="ltr">4</bdi> أسابيع.
+          </>
+        ),
+      },
+      {
+        column: 2,
+        question: "ما نوع الدعم الذي يمكنني توقّعه؟",
+        answer: "دعم عبر البريد الإلكتروني بردّ خلال يوم عمل واحد، ومساعدة الفرق في البدء، وقناة لطلب المكوّنات.",
+      },
+    ],
+    empty: "لا توجد أسئلة بعد.",
+  },
+}
+
+export interface FaqMasonryCardsProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<FaqMasonryCardsCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /** The items open at first, by `value`. The first card of the second column, by default. */
+  defaultValue?: string[]
+  /**
+   * Lets several questions stay open at once.
+   * @default false
+   */
+  multiple?: boolean
+}
+
+export function FaqMasonryCards({
+  locale = "en",
+  heading,
+  items,
+  empty,
+  defaultValue = ["5"],
+  multiple,
+  className,
+  ...props
+}: FaqMasonryCardsProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = (items ?? copy.items).map((item, index) => ({ ...item, value: item.value ?? String(index) }))
+  const split = Math.ceil(list.length / 2)
+  const columnOf = (item: FaqMasonryCardsItem, index: number) => item.column ?? (index < split ? 1 : 2)
+  const columns = [1, 2].map((column) => list.filter((item, index) => columnOf(item, index) === column))
+
+  return (
+    <section
+      aria-labelledby={headingId}
+      className={cn("bg-background px-4 py-8 md:px-6 md:py-16 lg:px-8 lg:py-24", className)}
+      {...props}
+    >
+      <div className="mx-auto flex w-full max-w-[1248px] flex-col items-center gap-12">
+        <h2 id={headingId} className="w-full max-w-[760px] text-center text-2xl font-semibold text-foreground md:text-3xl">
+          {heading ?? copy.heading}
+        </h2>
+
+        {list.length === 0 ? (
+          <p className="text-center text-sm text-muted-foreground">{empty ?? copy.empty}</p>
+        ) : (
+          <Accordion
+            variant="split"
+            className="w-full max-w-[1120px] gap-6 md:flex-row md:items-start md:gap-5"
+            defaultValue={defaultValue}
+            multiple={multiple}
+          >
+            {columns.map((column, c) => (
+              <div key={c} className="flex min-w-0 flex-1 flex-col gap-3">
+                {column.map((item) => (
+                  <AccordionItem key={item.value} value={item.value}>
+                    <AccordionTrigger>{item.question}</AccordionTrigger>
+                    <AccordionContent>{item.answer}</AccordionContent>
+                  </AccordionItem>
+                ))}
+              </div>
+            ))}
+          </Accordion>
+        )}
+      </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 faqMasonryCardsCopy = COPY

package/registry/blocks/faq-masonry-cards/index.ts

@@ -0,0 +1,7 @@
+export {
+  FaqMasonryCards,
+  faqMasonryCardsCopy,
+  type FaqMasonryCardsItem,
+  type FaqMasonryCardsCopy,
+  type FaqMasonryCardsProps,
+} from "./FaqMasonryCards"

package/registry/blocks/faq-media-split/FaqMediaSplit.tsx

@@ -0,0 +1,197 @@
+"use client"
+
+import * as React from "react"
+import { Headphones } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../ui/accordion/accordion"
+
+/*
+ * Figma: `FAQ` (42359:9029), Type=Media Split.
+ *
+ * A photo with a caption chip beside the heading and questions. The photo
+ * sits at the start on Desktop and above the questions on Tablet and
+ * Mobile. No photo comes with the block: pass `image`, and until then the
+ * frame is a `muted` placeholder of the same size.
+ *
+ * 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 here is a logical one. The photo itself is never mirrored.
+ */
+
+export interface FaqMediaSplitItem {
+  question: React.ReactNode
+  answer: React.ReactNode
+  /** Identifies the item for `defaultValue`. Defaults to its index, as a string. */
+  value?: string
+}
+
+export interface FaqMediaSplitImage {
+  src: string
+  /** Describes the photo. Pass "" for a purely decorative one. */
+  alt: string
+}
+
+export interface FaqMediaSplitCopy {
+  /** The chip on the photo. Hidden when empty. */
+  caption: React.ReactNode
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The line of text under the heading. */
+  description: React.ReactNode
+  /** The questions, in order. Each item has a `question`, an `answer` and an optional `value` that `defaultValue` opens it by. */
+  items: FaqMediaSplitItem[]
+  /** Shown in place of the questions when `items` is empty. */
+  empty: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", FaqMediaSplitCopy> = {
+  en: {
+    caption: "The people who answer your questions",
+    heading: "FAQ and support",
+    description:
+      "In our FAQ you will find answers to the questions we are asked most, and a route to a person for everything else.",
+    items: [
+      {
+        question: "What do we actually get — a design system or a starting point?",
+        answer:
+          "Both. You get the structure: components, states, RTL/LTR, light and dark. The surface — colour, type, tone — is yours to define.",
+      },
+      {
+        question: "Why do you version components instead of files?",
+        answer:
+          "So you can take one fix without taking every change. Each component has its own version, and the changelog says what moved.",
+      },
+      {
+        question: "Are the photographs in the blocks licensed?",
+        answer: "The photos in our previews are licensed for the previews only. The blocks ship without images, so you add your own.",
+      },
+      {
+        question: "Can I swap the imagery for my own?",
+        answer: "Yes. Pass your own photo to the block; the frame keeps its size and corners whatever image you use.",
+      },
+      {
+        question: "Do you ship illustration as well?",
+        answer: "Yes. A set of illustrations bound to the theme colours comes with the library, so they follow light and dark.",
+      },
+    ],
+    empty: "No questions yet.",
+  },
+  ar: {
+    caption: "الأشخاص الذين يجيبون عن أسئلتك",
+    heading: "الأسئلة الشائعة والدعم",
+    description: "في قسم الأسئلة الشائعة ستجد إجابات عن أكثر ما يُسأل عنه، وطريقًا إلى شخص حقيقي لكل ما عدا ذلك.",
+    items: [
+      {
+        question: "ما الذي نحصل عليه فعليًا: نظام تصميم أم نقطة انطلاق؟",
+        answer:
+          "الاثنان معًا. تحصل على البنية: المكوّنات، والحالات، ودعم RTL/LTR، والوضعين الفاتح والداكن. أما الشكل، أي الألوان والخطوط ونبرة التصميم، فأنت من يحدده.",
+      },
+      {
+        question: "لماذا تصدرون نسخًا للمكوّنات بدل الملفات؟",
+        answer: "لتأخذ إصلاحًا واحدًا دون أن تأخذ كل تغيير. لكل مكوّن نسخته، ويذكر سجل التغييرات ما تغيّر.",
+      },
+      {
+        question: "هل الصور في الكتل مرخّصة؟",
+        answer: "الصور في معايناتنا مرخّصة للمعاينات فقط. تأتي الكتل دون صور، فتضيف صورك أنت.",
+      },
+      {
+        question: "هل يمكنني استبدال الصور بصوري؟",
+        answer: "نعم. مرّر صورتك إلى الكتلة، ويحتفظ الإطار بحجمه وزواياه أيًّا كانت الصورة.",
+      },
+      {
+        question: "هل توفّرون رسومًا توضيحية أيضًا؟",
+        answer: "نعم. تأتي مع المكتبة مجموعة رسوم مرتبطة بألوان السمة، فتتبع الوضعين الفاتح والداكن.",
+      },
+    ],
+    empty: "لا توجد أسئلة بعد.",
+  },
+}
+
+export interface FaqMediaSplitProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<FaqMediaSplitCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The photo. None by default: the frame shows a `muted` placeholder.
+   * @default none: a `muted` placeholder
+   */
+  image?: FaqMediaSplitImage
+  /** The items open at first, by `value`. The first item, by default. */
+  defaultValue?: string[]
+  /**
+   * Lets several questions stay open at once.
+   * @default false
+   */
+  multiple?: boolean
+}
+
+export function FaqMediaSplit({
+  locale = "en",
+  caption,
+  heading,
+  description,
+  items,
+  empty,
+  image,
+  defaultValue = ["0"],
+  multiple,
+  className,
+  ...props
+}: FaqMediaSplitProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = items ?? copy.items
+  const chip = caption ?? copy.caption
+
+  return (
+    <section
+      aria-labelledby={headingId}
+      className={cn("bg-background px-4 py-8 md:px-6 md:py-16 lg:px-8 lg:py-24", className)}
+      {...props}
+    >
+      <div className="mx-auto flex w-full max-w-[1248px] flex-col gap-6 md:gap-8 lg:flex-row lg:items-center lg:gap-16">
+        <div className="relative h-[260px] w-full shrink-0 overflow-hidden rounded-2xl bg-muted md:h-[380px] lg:h-[620px] lg:w-[560px]">
+          {image ? (
+            <img src={image.src} alt={image.alt} loading="lazy" decoding="async" className="absolute inset-0 size-full object-cover" />
+          ) : null}
+          {chip ? (
+            <p className="absolute bottom-6 start-6 flex max-w-[calc(100%-3rem)] items-center gap-2 rounded-full bg-card px-4 py-2 text-xs font-medium text-foreground lg:bottom-5">
+              <Headphones size={14} strokeWidth={1.5} absoluteStrokeWidth aria-hidden="true" className="size-3.5 shrink-0 text-primary" />
+              {chip}
+            </p>
+          ) : null}
+        </div>
+
+        <div className="flex min-w-0 flex-1 flex-col gap-8">
+          <header className="flex flex-col gap-3">
+            <h2 id={headingId} className="text-3xl font-semibold text-foreground lg:text-4xl">
+              {heading ?? copy.heading}
+            </h2>
+            <p className="text-base text-muted-foreground">{description ?? copy.description}</p>
+          </header>
+
+          {list.length === 0 ? (
+            <p className="text-sm text-muted-foreground">{empty ?? copy.empty}</p>
+          ) : (
+            <Accordion defaultValue={defaultValue} multiple={multiple}>
+              {list.map((item, index) => (
+                <AccordionItem key={item.value ?? index} value={item.value ?? String(index)}>
+                  <AccordionTrigger className="text-base">{item.question}</AccordionTrigger>
+                  <AccordionContent>{item.answer}</AccordionContent>
+                </AccordionItem>
+              ))}
+            </Accordion>
+          )}
+        </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 faqMediaSplitCopy = COPY

package/registry/blocks/faq-media-split/index.ts

@@ -0,0 +1,8 @@
+export {
+  FaqMediaSplit,
+  faqMediaSplitCopy,
+  type FaqMediaSplitImage,
+  type FaqMediaSplitItem,
+  type FaqMediaSplitCopy,
+  type FaqMediaSplitProps,
+} from "./FaqMediaSplit"