@smicolon/fasla-ui 0.6.0 → 0.7.0

package/registry/blocks/faq-mono-index/FaqMonoIndex.tsx

@@ -0,0 +1,247 @@
+"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=Mono Index.
+ *
+ * A full-bleed inverted band: an intro beside a catalogue of questions, each
+ * indexed `Q.001 /`, set in capitals. The band is painted with the inverse
+ * tokens, the only way Fasla inverts a surface, so it is dark in Light and
+ * light in Dark without forcing a `.dark` or `.light` 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 Accordion is the library's, untouched: every colour it needs on the
+ * band (question, answer, divider, chevron, hover and focus ring) is set here,
+ * through its className props. The questions are written in sentence case
+ * and set in capitals only in a left-to-right page: Arabic has no capitals,
+ * and a Latin name inside Arabic text keeps its own case.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440).
+ */
+
+export interface FaqMonoIndexItem {
+  question: React.ReactNode
+  answer: React.ReactNode
+  /** Identifies the item for `defaultValue`. Defaults to its index, as a string. */
+  value?: string
+}
+
+export interface FaqMonoIndexCopy {
+  /** 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: FaqMonoIndexItem[]
+  /** Shown in place of the questions when `items` is empty. */
+  empty: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", FaqMonoIndexCopy> = {
+  en: {
+    heading: "Before you buy",
+    description: "Thirteen questions we get before every licence. If yours is not here, write to us — a person answers.",
+    items: [
+      {
+        question: "What is the library built on?",
+        answer:
+          "Figma variables for colour, spacing, radius and type, mapped one-to-one to Tailwind. Components are variant-driven, with light and dark modes and LTR/RTL directions.",
+      },
+      {
+        question: "Does it work with Dev Mode and Code Connect?",
+        answer: "Yes. Every component shows its token names in Dev Mode, and Code Connect links each one to its code.",
+      },
+      {
+        question: "Is the file ready for agent-driven UI?",
+        answer: "Yes. Every block documents its slots and content limits, so an agent can choose a block and fill it safely.",
+      },
+      {
+        question: "Am I locked into this exact stack?",
+        answer: "No. The tokens are plain variables; map them to any CSS setup, not only Tailwind.",
+      },
+      {
+        question: "Do I need to know Tailwind?",
+        answer: "No. Designers work in Figma as usual; Tailwind only matters to whoever writes the code.",
+      },
+      {
+        question: "Is this for me if I don’t design?",
+        answer: "Yes. Developers can install the blocks from the registry and ship them without opening Figma.",
+      },
+      {
+        question: "Can I use this for client work?",
+        answer: "Yes. One licence covers unlimited client projects.",
+      },
+      {
+        question: "How is this different from a free kit?",
+        answer: "Every value is token-bound, every block has three breakpoints and both directions, and the code matches the file.",
+      },
+      {
+        question: "Will it break on Figma updates?",
+        answer: "No. We test each Figma release against the library and ship fixes the same week if anything changes.",
+      },
+      {
+        question: "What do I actually get, and for how long?",
+        answer: "The full library and every update for as long as your licence is active.",
+      },
+      {
+        question: "Do you offer support?",
+        answer: "Yes. Write to us and a designer replies within one business day.",
+      },
+      {
+        question: "What if I find a bug?",
+        answer: "Report it from the file’s feedback page. Confirmed bugs are fixed in the next release.",
+      },
+      {
+        question: "Can I get a refund?",
+        answer: "Yes, within 14 days of purchase, with no questions asked.",
+      },
+    ],
+    empty: "No questions yet.",
+  },
+  ar: {
+    heading: "قبل الشراء",
+    description: "ثلاثة عشر سؤالًا تصلنا قبل كل ترخيص. إن لم يكن سؤالك هنا فاكتب إلينا، يردّ عليك إنسان.",
+    items: [
+      {
+        question: "على ماذا بُنيت المكتبة؟",
+        answer:
+          "متغيّرات Figma للّون والمسافات ونصف القطر والخطوط، مقابِلة واحدًا لواحد لـ Tailwind. والمكوّنات مبنية على النسخ، مع وضعين فاتح وداكن واتجاهَي القراءة.",
+      },
+      {
+        question: "هل تعمل مع Dev Mode ومع Code Connect؟",
+        answer: "نعم. يعرض كل مكوّن أسماء رموزه في Dev Mode، ويربط Code Connect كل مكوّن بشيفرته.",
+      },
+      {
+        question: "هل الملف جاهز لواجهات يقودها الوكلاء؟",
+        answer: "نعم. توثّق كل كتلة أجزاءها وحدود محتواها، فيستطيع الوكيل اختيار الكتلة وملئها بأمان.",
+      },
+      {
+        question: "هل أنا مقيّد بهذه المنظومة تحديدًا؟",
+        answer: "لا. الرموز متغيّرات عادية، يمكنك ربطها بأي إعداد CSS وليس بـ Tailwind فقط.",
+      },
+      {
+        question: "هل يلزمني معرفة Tailwind؟",
+        answer: "لا. يعمل المصممون في Figma كالمعتاد، ولا يهم Tailwind إلا من يكتب الشيفرة.",
+      },
+      {
+        question: "هل هذه المكتبة مناسبة لي إن لم أكن مصمّمًا؟",
+        answer: "نعم. يستطيع المطوّرون تثبيت الكتل من السجل وإطلاقها دون فتح Figma.",
+      },
+      {
+        question: "هل يمكنني استخدامها في أعمال العملاء؟",
+        answer: "نعم. يغطي الترخيص الواحد عددًا غير محدود من مشاريع العملاء.",
+      },
+      {
+        question: "بماذا تختلف عن الحزم المجانية؟",
+        answer: "كل قيمة مرتبطة بالرموز، ولكل كتلة ثلاث نقاط توقّف واتجاها القراءة، والشيفرة تطابق الملف.",
+      },
+      {
+        question: "هل تتعطّل مع تحديثات Figma؟",
+        answer: "لا. نختبر المكتبة مع كل إصدار من Figma، ونصدر الإصلاحات في الأسبوع نفسه إن تغيّر شيء.",
+      },
+      {
+        question: "ما الذي أحصل عليه فعليًا، ولأي مدة؟",
+        answer: "المكتبة كاملة وكل التحديثات ما دام ترخيصك فعّالًا.",
+      },
+      {
+        question: "هل تقدّمون دعمًا؟",
+        answer: "نعم. اكتب إلينا ويردّ عليك مصمم خلال يوم عمل واحد.",
+      },
+      {
+        question: "ماذا لو وجدت خللًا؟",
+        answer: "أبلغ عنه من صفحة الملاحظات في الملف. نصلح الأخطاء المؤكدة في الإصدار التالي.",
+      },
+      {
+        question: "هل يمكنني استرداد المبلغ؟",
+        answer: (
+          <>
+            نعم، خلال <bdi dir="ltr">14</bdi> يومًا من الشراء ودون أي أسئلة.
+          </>
+        ),
+      },
+    ],
+    empty: "لا توجد أسئلة بعد.",
+  },
+}
+
+export interface FaqMonoIndexProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, Partial<FaqMonoIndexCopy> {
+  /** 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 item, by default. */
+  defaultValue?: string[]
+  /**
+   * Lets several questions stay open at once.
+   * @default false
+   */
+  multiple?: boolean
+}
+
+export function FaqMonoIndex({
+  locale = "en",
+  heading,
+  description,
+  items,
+  empty,
+  defaultValue = ["0"],
+  multiple,
+  className,
+  ...props
+}: FaqMonoIndexProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = items ?? copy.items
+
+  return (
+    <section
+      aria-labelledby={headingId}
+      className={cn("bg-background-inverse 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 lg:flex-row lg:items-start lg:gap-24">
+        <header className="flex flex-col gap-4 lg:w-80 lg:shrink-0">
+          <h2 id={headingId} className="text-2xl font-semibold text-foreground-inverse md:text-3xl">
+            {heading ?? copy.heading}
+          </h2>
+          <p className="text-sm text-muted-foreground-inverse">{description ?? copy.description}</p>
+        </header>
+
+        {list.length === 0 ? (
+          <p className="min-w-0 flex-1 text-sm text-muted-foreground-inverse">{empty ?? copy.empty}</p>
+        ) : (
+          <Accordion indicator="plus" className="min-w-0 flex-1" defaultValue={defaultValue} multiple={multiple}>
+            {list.map((item, index) => (
+              <AccordionItem
+                key={item.value ?? index}
+                value={item.value ?? String(index)}
+                className="flex items-start gap-4 border-muted-foreground-inverse/[0.24] py-1"
+              >
+                {/* The index is a label, not content: the list's order already numbers it. */}
+                <span aria-hidden="true" className="w-16 shrink-0 pt-3 text-xs font-medium text-muted-foreground-inverse">
+                  <bdi dir="ltr">{`Q.${String(index + 1).padStart(3, "0")} /`}</bdi>
+                </span>
+                <div className="min-w-0 flex-1">
+                  <AccordionTrigger className="text-base [&:dir(ltr)]:uppercase text-foreground-inverse after:border-foreground-inverse [&_[data-slot=accordion-indicator]]:text-muted-foreground-inverse">
+                    {item.question}
+                  </AccordionTrigger>
+                  <AccordionContent className="text-muted-foreground-inverse">{item.answer}</AccordionContent>
+                </div>
+              </AccordionItem>
+            ))}
+          </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 faqMonoIndexCopy = COPY

package/registry/blocks/faq-mono-index/index.ts

@@ -0,0 +1 @@
+export { FaqMonoIndex, faqMonoIndexCopy, type FaqMonoIndexCopy, type FaqMonoIndexItem, type FaqMonoIndexProps } from "./FaqMonoIndex"

package/registry/blocks/faq-newsletter-close/FaqNewsletterClose.tsx

@@ -0,0 +1,314 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../ui/accordion/accordion"
+import { Button } from "../../ui/button/button"
+import { Input } from "../../ui/input/input"
+
+/*
+ * Figma: `FAQ` (42359:9029), Type=Newsletter Close.
+ *
+ * The questions people ask before a trial, then a muted band for readers who
+ * are not ready yet: a short sign-up for the monthly release note.
+ *
+ * The form is real. It validates the address itself, so the error is the
+ * Input's own message, read out with the field, rather than the browser's
+ * bubble. While `onSubmit` runs the button shows its loading state and the
+ * fields are disabled; it then shows the success line, or the error line with
+ * the form kept as it was so the reader can try again.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), where the form
+ * stacks; `md:` is its Tablet (768) and `lg:` its Desktop (1440).
+ */
+
+export interface FaqNewsletterCloseItem {
+  question: React.ReactNode
+  answer: React.ReactNode
+  /** Identifies the item for `defaultValue`. Defaults to its index, as a string. */
+  value?: string
+}
+
+export interface FaqNewsletterCloseValues {
+  email: string
+  /** Empty when the reader left it out. */
+  company?: string
+}
+
+export interface FaqNewsletterCloseCopy {
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The questions, in order. Each item has a `question`, an `answer` and an optional `value` that `defaultValue` opens it by. */
+  items: FaqNewsletterCloseItem[]
+  /** Shown in place of the questions when `items` is empty. */
+  empty: React.ReactNode
+  /** The heading of the newsletter band. */
+  newsletterHeading: React.ReactNode
+  /** The line of text in the newsletter band. */
+  newsletterDescription: React.ReactNode
+  /** The placeholder of the email field. */
+  emailPlaceholder: string
+  /** The placeholder of the optional company field. */
+  companyPlaceholder: string
+  /** The text of the subscribe button. */
+  submitLabel: React.ReactNode
+  /** Read out while the sign-up is sent. */
+  pendingLabel: string
+  /** Under the email field when it is empty or not an address. */
+  emailError: React.ReactNode
+  /** Shown once `onSubmit` resolves. */
+  success: React.ReactNode
+  /** Shown when `onSubmit` throws or rejects. */
+  error: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", FaqNewsletterCloseCopy> = {
+  en: {
+    heading: "Before you start your trial",
+    items: [
+      {
+        question: "What does the trial include?",
+        answer:
+          "Fourteen days of the full library — every component, block and theme — with no card required. Nothing you build during the trial is locked if you decide not to continue.",
+      },
+      {
+        question: "When does my trial start?",
+        answer: "The moment you create your workspace. You can see the days left on your billing page.",
+      },
+      {
+        question: "What are library credits?",
+        answer: "Credits unlock premium templates. Every plan includes a monthly allowance, and unused credits roll over for one month.",
+      },
+      {
+        question: "Why do you need my payment details?",
+        answer: "We don’t, for the trial. We ask for them only when you choose a plan, so your work carries on without a gap.",
+      },
+      {
+        question: "What happens after the trial ends?",
+        answer: "Your workspace becomes read-only until you choose a plan. Nothing is deleted.",
+      },
+      {
+        question: "What is your cancellation policy?",
+        answer: "Cancel at any time from your billing page. Your plan runs to the end of the period you paid for.",
+      },
+      {
+        question: "What if I do not use all my seats?",
+        answer: "Remove a seat at any time and we credit the unused days to your next invoice.",
+      },
+    ],
+    empty: "No questions yet.",
+    newsletterHeading: "Not ready to start today?",
+    newsletterDescription:
+      "Get the monthly release note — new blocks, breaking changes and the occasional workflow tip. By subscribing you agree to receive email from Fasla.",
+    emailPlaceholder: "Email address",
+    companyPlaceholder: "Company (optional)",
+    submitLabel: "Subscribe",
+    pendingLabel: "Subscribing",
+    emailError: "Enter an email address, like name@example.com.",
+    success: "You’re subscribed. The next release note arrives at the start of the month.",
+    error: "We couldn’t subscribe you just now. Check your connection and try again.",
+  },
+  ar: {
+    heading: "قبل أن تبدأ فترتك التجريبية",
+    items: [
+      {
+        question: "ماذا تشمل الفترة التجريبية؟",
+        answer:
+          "أربعة عشر يومًا من المكتبة كاملة: كل مكوّن وكتلة وسمة، دون الحاجة إلى بطاقة. ولا يُقفل أي شيء تبنيه خلال التجربة إن قرّرت عدم المتابعة.",
+      },
+      {
+        question: "متى تبدأ فترتي التجريبية؟",
+        answer: "لحظة إنشاء مساحة العمل. ترى الأيام المتبقية في صفحة الفوترة.",
+      },
+      {
+        question: "ما أرصدة المكتبة؟",
+        answer: "تفتح الأرصدة القوالب المميّزة. تشمل كل خطة رصيدًا شهريًا، ويُرحَّل غير المستخدم منه لشهر واحد.",
+      },
+      {
+        question: "لماذا تحتاجون بيانات الدفع الخاصة بي؟",
+        answer: "لا نحتاجها في الفترة التجريبية. نطلبها فقط حين تختار خطة، ليستمر عملك دون انقطاع.",
+      },
+      {
+        question: "ماذا يحدث بعد انتهاء الفترة التجريبية؟",
+        answer: "تصبح مساحة عملك للقراءة فقط حتى تختار خطة. لا يُحذف أي شيء.",
+      },
+      {
+        question: "ما سياسة الإلغاء لديكم؟",
+        answer: "ألغِ في أي وقت من صفحة الفوترة. تبقى خطتك فعّالة حتى نهاية المدة التي دفعت عنها.",
+      },
+      {
+        question: "ماذا لو لم أستخدم كل مقاعدي؟",
+        answer: "احذف أي مقعد في أي وقت، ونضيف الأيام غير المستخدمة رصيدًا إلى فاتورتك التالية.",
+      },
+    ],
+    empty: "لا توجد أسئلة بعد.",
+    newsletterHeading: "لست مستعدًا للبدء اليوم؟",
+    newsletterDescription:
+      "احصل على نشرة الإصدارات الشهرية: كتل جديدة وتغييرات جذرية ونصائح عملية بين الحين والآخر. باشتراكك توافق على تلقّي رسائل من فاصلة.",
+    emailPlaceholder: "البريد الإلكتروني",
+    companyPlaceholder: "الشركة (اختياري)",
+    submitLabel: "اشترك",
+    pendingLabel: "جارٍ الاشتراك",
+    emailError: (
+      <>
+        أدخل بريدًا إلكترونيًا صحيحًا، مثل <bdi dir="ltr">name@example.com</bdi>.
+      </>
+    ),
+    success: "تم اشتراكك. تصلك نشرة الإصدارات التالية في بداية الشهر.",
+    error: "تعذّر اشتراكك الآن. تحقّق من اتصالك وحاول مرة أخرى.",
+  },
+}
+
+type Status = "idle" | "pending" | "success" | "error"
+
+export interface FaqNewsletterCloseProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "onSubmit">,
+    Partial<FaqNewsletterCloseCopy> {
+  /** 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 item, by default. */
+  defaultValue?: string[]
+  /**
+   * Lets several questions stay open at once.
+   * @default false
+   */
+  multiple?: boolean
+  /**
+   * Sends the sign-up. The form shows its pending state until the promise
+   * settles, then success, or the error line if it rejects.
+   */
+  onSubmit?: (values: FaqNewsletterCloseValues) => Promise<void> | void
+  /**
+   * Turns the sign-up off: the fields and the button are disabled.
+   * @default false
+   */
+  disabled?: boolean
+}
+
+export function FaqNewsletterClose({
+  locale = "en",
+  heading,
+  items,
+  empty,
+  newsletterHeading,
+  newsletterDescription,
+  emailPlaceholder,
+  companyPlaceholder,
+  submitLabel,
+  pendingLabel,
+  emailError,
+  success,
+  error,
+  defaultValue = ["0"],
+  multiple,
+  onSubmit,
+  disabled,
+  className,
+  ...props
+}: FaqNewsletterCloseProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const newsletterId = React.useId()
+  const list = items ?? copy.items
+  const [status, setStatus] = React.useState<Status>("idle")
+  const [emailInvalid, setEmailInvalid] = React.useState(false)
+  const pending = status === "pending"
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    const form = event.currentTarget
+    const email = form.elements.namedItem("email") as HTMLInputElement
+    if (!email.checkValidity()) {
+      setEmailInvalid(true)
+      email.focus()
+      return
+    }
+    setEmailInvalid(false)
+    const company = (form.elements.namedItem("company") as HTMLInputElement).value.trim()
+    setStatus("pending")
+    try {
+      await onSubmit?.({ email: email.value.trim(), company: company || undefined })
+      setStatus("success")
+      form.reset()
+    } catch {
+      setStatus("error")
+    }
+  }
+
+  return (
+    <div className={cn("bg-background", className)} {...props}>
+      <section aria-labelledby={headingId} className="px-4 pb-20 pt-24 md:px-6 lg:px-8">
+        <div className="mx-auto flex w-full max-w-[880px] flex-col gap-8">
+          <h2 id={headingId} className="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 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>
+      </section>
+
+      <section aria-labelledby={newsletterId} className="bg-muted px-4 py-20 md:px-6 lg:px-8">
+        <div className="mx-auto flex w-full max-w-[1248px] flex-col items-center gap-5 text-center">
+          <h2 id={newsletterId} className="text-xl font-semibold text-foreground md:text-2xl">
+            {newsletterHeading ?? copy.newsletterHeading}
+          </h2>
+          <p className="w-full max-w-[720px] text-sm text-muted-foreground">
+            {newsletterDescription ?? copy.newsletterDescription}
+          </p>
+          <form
+            noValidate
+            onSubmit={handleSubmit}
+            aria-labelledby={newsletterId}
+            className="flex w-full flex-col gap-2 text-start md:w-auto md:flex-row md:items-start"
+          >
+            <Input
+              name="email"
+              type="email"
+              autoComplete="email"
+              required
+              placeholder={emailPlaceholder ?? copy.emailPlaceholder}
+              aria-label={emailPlaceholder ?? copy.emailPlaceholder}
+              invalid={emailInvalid}
+              error={emailError ?? copy.emailError}
+              disabled={disabled || pending}
+              onChange={() => emailInvalid && setEmailInvalid(false)}
+              className="md:w-[280px]"
+            />
+            <Input
+              name="company"
+              autoComplete="organization"
+              placeholder={companyPlaceholder ?? copy.companyPlaceholder}
+              aria-label={companyPlaceholder ?? copy.companyPlaceholder}
+              disabled={disabled || pending}
+              className="md:w-[220px]"
+            />
+            <Button type="submit" loading={pending} loadingLabel={pendingLabel ?? copy.pendingLabel} disabled={disabled}>
+              {submitLabel ?? copy.submitLabel}
+            </Button>
+          </form>
+          <p role="status" className="text-sm empty:hidden">
+            {status === "success" && <span className="text-foreground">{success ?? copy.success}</span>}
+            {status === "error" && <span className="text-destructive">{error ?? copy.error}</span>}
+          </p>
+        </div>
+      </section>
+    </div>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const faqNewsletterCloseCopy = COPY

package/registry/blocks/faq-newsletter-close/index.ts

@@ -0,0 +1,8 @@
+export {
+  FaqNewsletterClose,
+  faqNewsletterCloseCopy,
+  type FaqNewsletterCloseCopy,
+  type FaqNewsletterCloseItem,
+  type FaqNewsletterCloseProps,
+  type FaqNewsletterCloseValues,
+} from "./FaqNewsletterClose"