@smicolon/fasla-ui 0.6.0 → 0.7.0

package/registry/blocks/features-accordion-photo/FeaturesAccordionPhoto.tsx

@@ -0,0 +1,149 @@
+"use client"
+
+import * as React from "react"
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../ui/accordion/accordion"
+import { FeaturesHeader, FeaturesPhotoSlot, FeaturesSection, type FeaturesLocale, type FeaturesPhoto } from "../features/features"
+
+/*
+ * Figma: `Features` (42367:57765), Type=Accordion + Photo.
+ *
+ * The copy beside a tall photo: the header (an eyebrow and the heading) over
+ * an Accordion atom (the plus / minus variant) of five questions, the first
+ * open, and a 512 × 560 photo with a 10px radius.
+ *
+ * Desktop sets the copy at the start (672px) and the photo at the end, 64px
+ * apart. Tablet and Mobile put the photo above the copy at full width.
+ * Opening a question closes the open one, as the Accordion atom does by
+ * default.
+ *
+ * Content limits: a question up to 40 characters and its answer up to 260.
+ * The other limits are in the block's documentation page.
+ */
+
+export interface FeaturesAccordionItem {
+  /** Keys the item, and names it for `defaultValue`. */
+  id: string
+  /** The question, in the trigger. */
+  question: React.ReactNode
+  /** The answer, in the panel. */
+  answer: React.ReactNode
+}
+
+export interface FeaturesAccordionPhotoCopy {
+  /** The 12px line above the heading. */
+  eyebrow: React.ReactNode
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The questions, in order. */
+  items: FeaturesAccordionItem[]
+}
+
+/** Figma's copy for the first answer, English and Arabic; the other four are written for the code, in the same voice. */
+const COPY: Record<FeaturesLocale, FeaturesAccordionPhotoCopy> = {
+  en: {
+    eyebrow: "IN DETAIL",
+    heading: "The features people ask about most",
+    items: [
+      {
+        id: "offline",
+        question: "Does it work offline?",
+        answer: "Yes. Every view you have opened is cached locally, edits queue while you are disconnected, and the merge on reconnect is field-level rather than record-level — so two people editing the same item never overwrite each other.",
+      },
+      {
+        id: "permissions",
+        question: "How do permissions work?",
+        answer: "Roles are set per workspace, project or field, and they inherit downwards. Guests can be limited to a single project, and every change to who can see what is written to the audit log.",
+      },
+      {
+        id: "data",
+        question: "Can we bring our own data?",
+        answer: "Yes. Import from CSV, spreadsheets or the most common work tools, with fields mapped before anything is written. Nothing is overwritten, and an import can be undone for thirty days.",
+      },
+      {
+        id: "api",
+        question: "What about the API?",
+        answer: "Everything the interface can do is available through a documented REST API and webhooks, with the same permissions as the person calling it. The API is included on every plan.",
+      },
+      {
+        id: "arabic",
+        question: "Is it available in Arabic?",
+        answer: "Yes. The interface, the notifications and the exports are available in Arabic, with layouts that mirror from right to left. Switch the language per person, not per workspace.",
+      },
+    ],
+  },
+  ar: {
+    eyebrow: "بالتفصيل",
+    heading: "الميزات الأكثر سؤالًا عنها",
+    items: [
+      {
+        id: "offline",
+        question: "هل يعمل دون اتصال؟",
+        answer: "نعم. كل عرض فتحته مخزَّن محليًا، وتُصطفّ التعديلات أثناء انقطاع الاتصال، ويتم الدمج عند العودة على مستوى الحقل لا السجل، فلا يستبدل شخصان يحرّران العنصر نفسه عمل بعضهما.",
+      },
+      {
+        id: "permissions",
+        question: "كيف تعمل الصلاحيات؟",
+        answer: "تُضبط الأدوار لكل مساحة عمل أو مشروع أو حقل، وتنتقل إلى ما تحتها. يمكن حصر الضيوف في مشروع واحد، ويُسجَّل كل تغيير في من يرى ماذا في سجل التدقيق.",
+      },
+      {
+        id: "data",
+        question: "هل يمكننا إحضار بياناتنا؟",
+        answer: "نعم. استورد من ملفات CSV أو جداول البيانات أو أشهر أدوات العمل، مع مطابقة الحقول قبل كتابة أي شيء. لا يُستبدل شيء، ويمكن التراجع عن أي استيراد خلال ثلاثين يومًا.",
+      },
+      {
+        id: "api",
+        question: "ماذا عن واجهة API؟",
+        answer: "كل ما تفعله الواجهة متاح عبر واجهة REST موثّقة وخطافات ويب، بالصلاحيات نفسها التي لدى من يستدعيها. الواجهة مشمولة في كل الباقات.",
+      },
+      {
+        id: "arabic",
+        question: "هل هو متاح بالعربية؟",
+        answer: "نعم. الواجهة والإشعارات والتصدير متاحة بالعربية، بتخطيطات تنعكس من اليمين إلى اليسار. بدّل اللغة لكل شخص لا لكل مساحة عمل.",
+      },
+    ],
+  },
+}
+
+export interface FeaturesAccordionPhotoProps extends Omit<React.HTMLAttributes<HTMLElement>, "title" | "defaultValue">, Partial<FeaturesAccordionPhotoCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: FeaturesLocale
+  /** The photo beside the copy. A `muted` placeholder shows without it. */
+  photo?: FeaturesPhoto
+  /** The `id`s of the items open on first render. The first by default. */
+  defaultValue?: string[]
+  /** Lets several items stay open at once. */
+  multiple?: boolean
+}
+
+export function FeaturesAccordionPhoto({ locale = "en", eyebrow, heading, items, photo, defaultValue, multiple = false, className, ...props }: FeaturesAccordionPhotoProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = items ?? copy.items
+
+  return (
+    <FeaturesSection labelledBy={headingId} className={className} {...props}>
+      <div className="flex flex-col gap-10 [@container(min-width:72rem)]:flex-row [@container(min-width:72rem)]:items-center [@container(min-width:72rem)]:gap-16">
+        <div className="order-last flex min-w-0 flex-col gap-10 [@container(min-width:72rem)]:order-none [@container(min-width:72rem)]:flex-1">
+          <FeaturesHeader headingId={headingId} eyebrow={eyebrow ?? copy.eyebrow} heading={heading ?? copy.heading} />
+          {list.length > 0 ? (
+            <Accordion indicator="plus" multiple={multiple} defaultValue={defaultValue ?? [list[0]!.id]} className="w-full">
+              {list.map((item) => (
+                <AccordionItem key={item.id} value={item.id}>
+                  <AccordionTrigger>{item.question}</AccordionTrigger>
+                  <AccordionContent>{item.answer}</AccordionContent>
+                </AccordionItem>
+              ))}
+            </Accordion>
+          ) : null}
+        </div>
+        <FeaturesPhotoSlot photo={photo} className="aspect-[296/325] w-full shrink-0 rounded-lg [@container(min-width:48rem)]:aspect-[640/703] [@container(min-width:72rem)]:aspect-[512/560] [@container(min-width:72rem)]:w-[512px] [@container(min-width:72rem)]:max-w-[42%]" />
+      </div>
+    </FeaturesSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const featuresAccordionPhotoCopy = COPY

package/registry/blocks/features-accordion-photo/index.ts

@@ -0,0 +1,7 @@
+export {
+  FeaturesAccordionPhoto,
+  featuresAccordionPhotoCopy,
+  type FeaturesAccordionItem,
+  type FeaturesAccordionPhotoCopy,
+  type FeaturesAccordionPhotoProps,
+} from "./FeaturesAccordionPhoto"

package/registry/blocks/features-colour-block-cards/FeaturesColourBlockCards.tsx

@@ -0,0 +1,118 @@
+"use client"
+
+import * as React from "react"
+import { Activity, Gauge, Lock, ShieldCheck } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { FeaturesHeader, FeaturesSection, Figures, type FeaturesLocale } from "../features/features"
+
+/*
+ * Figma: `Features` (42367:57765), Type=Colour Block Cards.
+ *
+ * A header (the heading and a line under it, 700px wide, no eyebrow), then
+ * four solid cards. A card is 24px of padding, a 28px Lucide mark, a title
+ * and a line, 20px apart, painted `chart-1`, `chart-2` and `chart-3` with
+ * `foreground-inverse` text, and the fourth `primary` with `primary-foreground`
+ * text. Every card in a row is as tall as the tallest.
+ *
+ * Desktop sets the four across, Tablet two across and Mobile one. The cards
+ * hold no state.
+ *
+ * Content limits: a title up to 28 characters and its line up to 110. The
+ * other limits are in the block's documentation page.
+ */
+
+export type FeaturesColourBlockTone = "chart-1" | "chart-2" | "chart-3" | "primary"
+
+export interface FeaturesColourBlockCard {
+  /** Keys the card. */
+  id: string
+  /** The card's title. */
+  title: React.ReactNode
+  /** One line on it. */
+  description: React.ReactNode
+  /** The Lucide mark at the top. */
+  icon?: React.ElementType
+  /** The card's colour. Figma sets them `chart-1`, `chart-2`, `chart-3` and `primary` in turn. */
+  tone: FeaturesColourBlockTone
+}
+
+export interface FeaturesColourBlockCardsCopy {
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The line under the heading. */
+  description: React.ReactNode
+  /** The cards, in order. */
+  cards: FeaturesColourBlockCard[]
+}
+
+const TONES: Record<FeaturesColourBlockTone, string> = {
+  "chart-1": "bg-chart-1 text-foreground-inverse",
+  "chart-2": "bg-chart-2 text-foreground-inverse",
+  "chart-3": "bg-chart-3 text-foreground-inverse",
+  primary: "bg-primary text-primary-foreground",
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<FeaturesLocale, FeaturesColourBlockCardsCopy> = {
+  en: {
+    heading: "Built for scale, without the enterprise tax",
+    description: "Four guarantees that apply from your first workspace to your five-thousandth.",
+    cards: [
+      { id: "security", tone: "chart-1", icon: ShieldCheck, title: "Security by default", description: "Encrypted in transit and at rest. Independently audited, with results published twice a year." },
+      { id: "performance", tone: "chart-2", icon: Gauge, title: "Performance at volume", description: "A million records in a view still opens in under a second, measured on the slowest plan we sell." },
+      { id: "privacy", tone: "chart-3", icon: Lock, title: "Privacy by design", description: "Your content is never used to train a model, and every region can be isolated on request." },
+      { id: "reliability", tone: "primary", icon: Activity, title: "Reliability you can cite", description: "99.99% uptime across the last eight quarters, with a public status page and incident history." },
+    ],
+  },
+  ar: {
+    heading: "مبنيّ للتوسّع، دون ضريبة المؤسسات",
+    description: "أربعة ضمانات تسري من مساحة عملك الأولى حتى الخمسة آلاف.",
+    cards: [
+      { id: "security", tone: "chart-1", icon: ShieldCheck, title: "الأمان افتراضيًا", description: "يتم تشفير البيانات أثناء النقل وأثناء التخزين. تخضع البيانات لتدقيق مستقل، وتُنشر نتائجه مرتين في السنة." },
+      { id: "performance", tone: "chart-2", icon: Gauge, title: "أداء عند الحجم الكبير", description: "مليون سجل في عرض واحد يُفتح في أقل من ثانية، مقيسًا على أبطأ باقة نبيعها." },
+      { id: "privacy", tone: "chart-3", icon: Lock, title: "الخصوصية بحكم التصميم", description: "لا يُستخدم محتواك لتدريب أي نموذج، ويمكن عزل كل منطقة عند الطلب." },
+      { id: "reliability", tone: "primary", icon: Activity, title: "موثوقية يمكنك الاستشهاد بها", description: "جاهز بنسبة 99.99% عبر الأرباع الثمانية الماضية، مع صفحة حالة عامة وسجل للحوادث." },
+    ],
+  },
+}
+
+export interface FeaturesColourBlockCardsProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, Partial<FeaturesColourBlockCardsCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: FeaturesLocale
+}
+
+export function FeaturesColourBlockCards({ locale = "en", heading, description, cards, className, ...props }: FeaturesColourBlockCardsProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = cards ?? copy.cards
+
+  return (
+    <FeaturesSection labelledBy={headingId} contentClassName="gap-16" className={className} {...props}>
+      <FeaturesHeader headingId={headingId} heading={heading ?? copy.heading} description={description ?? copy.description} maxWidth={700} />
+      {list.length > 0 ? (
+        <ul role="list" className="grid grid-cols-1 gap-5 [@container(min-width:48rem)]:grid-cols-2 [@container(min-width:72rem)]:grid-cols-4">
+          {list.map((card) => {
+            const Icon = card.icon
+            return (
+              <li key={card.id} className={cn("flex h-[13.75rem] flex-col items-start justify-between gap-5 rounded-lg p-6 [@container(min-width:48rem)]:h-[16.25rem] [@container(min-width:72rem)]:h-[18.75rem]", TONES[card.tone])}>
+                {Icon ? <Icon size={28} strokeWidth={1.5} absoluteStrokeWidth aria-hidden /> : null}
+                <div className="flex flex-col gap-2">
+                  <h3 className="text-lg font-semibold">{card.title}</h3>
+                  <p className="text-sm">
+                    <Figures>{card.description}</Figures>
+                  </p>
+                </div>
+              </li>
+            )
+          })}
+        </ul>
+      ) : null}
+    </FeaturesSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const featuresColourBlockCardsCopy = COPY

package/registry/blocks/features-colour-block-cards/index.ts

@@ -0,0 +1,8 @@
+export {
+  FeaturesColourBlockCards,
+  featuresColourBlockCardsCopy,
+  type FeaturesColourBlockCard,
+  type FeaturesColourBlockCardsCopy,
+  type FeaturesColourBlockCardsProps,
+  type FeaturesColourBlockTone,
+} from "./FeaturesColourBlockCards"

package/registry/blocks/features-compact-icon-index/FeaturesCompactIconIndex.tsx

@@ -0,0 +1,136 @@
+"use client"
+
+import * as React from "react"
+import { Bell, Calendar, Clock, Code, Database, FileText, Filter, Globe, History, Inbox, Lock, Plug, Search, Table, Tag, Users } from "lucide-react"
+import { FeaturesHeader, FeaturesRule, FeaturesSection, type FeaturesLocale } from "../features/features"
+
+/*
+ * Figma: `Features` (42367:57765), Type=Compact Icon Index.
+ *
+ * A header row, the section header at the start and a 14px note at the end
+ * on its bottom line, then a hairline, then sixteen items. An item is a 16px
+ * Lucide mark and a 14px title on one line, with a 12px line under it.
+ *
+ * Desktop sets the items four across, Tablet three across and Mobile two
+ * across; the header's note drops under the heading on Tablet and Mobile.
+ * Titles and lines wrap rather than cut off, which Figma's Mobile does not.
+ * The index holds no state.
+ *
+ * Content limits: an item's title up to 24 characters and its line up to
+ * 45. The other limits are in the block's documentation page.
+ */
+
+export interface FeaturesCompactIconIndexItem {
+  /** Keys the item. */
+  id: string
+  /** The item's title. */
+  title: React.ReactNode
+  /** The short line under it. */
+  description: React.ReactNode
+  /** The Lucide mark before the title. */
+  icon?: React.ElementType
+}
+
+export interface FeaturesCompactIconIndexCopy {
+  /** The 12px line above the heading. */
+  eyebrow: React.ReactNode
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The note beside the heading. */
+  note: React.ReactNode
+  /** The items, in order. */
+  items: FeaturesCompactIconIndexItem[]
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<FeaturesLocale, FeaturesCompactIconIndexCopy> = {
+  en: {
+    eyebrow: "THE FULL LIST",
+    heading: "Everything else, in one place",
+    note: "Sixteen of the forty-two features included on every plan.",
+    items: [
+      { id: "search", icon: Search, title: "Global search", description: "Across every project" },
+      { id: "filters", icon: Filter, title: "Saved filters", description: "Share them with the team" },
+      { id: "timeline", icon: Calendar, title: "Timeline view", description: "With dependencies" },
+      { id: "table", icon: Table, title: "Table view", description: "Editable inline" },
+      { id: "alerts", icon: Bell, title: "Custom alerts", description: "Per project or field" },
+      { id: "inbox", icon: Inbox, title: "Unified inbox", description: "One place for mentions" },
+      { id: "history", icon: FileText, title: "Version history", description: "Ninety days on every plan" },
+      { id: "fields", icon: Tag, title: "Custom fields", description: "Twelve field types" },
+      { id: "guests", icon: Users, title: "Guest access", description: "Free for external people" },
+      { id: "sso", icon: Lock, title: "SSO & SCIM", description: "Okta, Entra, Google" },
+      { id: "integrations", icon: Plug, title: "Integrations", description: "Two hundred connectors" },
+      { id: "api", icon: Code, title: "Public API", description: "REST and webhooks" },
+      { id: "time", icon: Clock, title: "Time tracking", description: "Exports to billing" },
+      { id: "export", icon: Database, title: "Full data export", description: "JSON or CSV, anytime" },
+      { id: "languages", icon: Globe, title: "Twelve languages", description: "Including RTL layouts" },
+      { id: "audit", icon: History, title: "Audit log", description: "Every action, retained" },
+    ],
+  },
+  ar: {
+    eyebrow: "القائمة الكاملة",
+    heading: "كل ما تبقّى في مكان واحد",
+    note: "ستّ عشرة ميزة من أصل اثنتين وأربعين مشمولة في كل الباقات.",
+    items: [
+      { id: "search", icon: Search, title: "بحث شامل", description: "عبر كل المشاريع" },
+      { id: "filters", icon: Filter, title: "مرشّحات محفوظة", description: "شاركها مع الفريق" },
+      { id: "timeline", icon: Calendar, title: "عرض الجدول الزمني", description: "مع الاعتماديات" },
+      { id: "table", icon: Table, title: "عرض الجدول", description: "قابل للتحرير مباشرة" },
+      { id: "alerts", icon: Bell, title: "تنبيهات مخصّصة", description: "لكل مشروع أو حقل" },
+      { id: "inbox", icon: Inbox, title: "صندوق وارد موحّد", description: "مكان واحد للإشارات" },
+      { id: "history", icon: FileText, title: "سجل الإصدارات", description: "تسعون يومًا في كل الباقات" },
+      { id: "fields", icon: Tag, title: "حقول مخصّصة", description: "اثنا عشر نوعًا من الحقول" },
+      { id: "guests", icon: Users, title: "وصول الضيوف", description: "مجاني للأشخاص الخارجيين" },
+      { id: "sso", icon: Lock, title: "SSO و SCIM", description: "Okta و Entra و Google" },
+      { id: "integrations", icon: Plug, title: "التكاملات", description: "مئتا موصِّل" },
+      { id: "api", icon: Code, title: "واجهة API عامة", description: "REST وخطافات الويب" },
+      { id: "time", icon: Clock, title: "تتبّع الوقت", description: "تصدير إلى الفوترة" },
+      { id: "export", icon: Database, title: "تصدير كامل للبيانات", description: "JSON أو CSV في أي وقت" },
+      { id: "languages", icon: Globe, title: "اثنتا عشرة لغة", description: "بما فيها التخطيطات من اليمين إلى اليسار" },
+      { id: "audit", icon: History, title: "سجل التدقيق", description: "كل إجراء محفوظ" },
+    ],
+  },
+}
+
+export interface FeaturesCompactIconIndexProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, Partial<FeaturesCompactIconIndexCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: FeaturesLocale
+}
+
+export function FeaturesCompactIconIndex({ locale = "en", eyebrow, heading, note, items, className, ...props }: FeaturesCompactIconIndexProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = items ?? copy.items
+
+  return (
+    <FeaturesSection labelledBy={headingId} gap="md" contentClassName="gap-12" className={className} {...props}>
+      <div className="flex flex-col gap-3 [@container(min-width:72rem)]:flex-row [@container(min-width:72rem)]:items-end [@container(min-width:72rem)]:justify-between [@container(min-width:72rem)]:gap-16">
+        <FeaturesHeader headingId={headingId} eyebrow={eyebrow ?? copy.eyebrow} heading={heading ?? copy.heading} className="flex-1" />
+        <p className="text-sm text-muted-foreground [@container(min-width:72rem)]:max-w-[22.5rem]">{note ?? copy.note}</p>
+      </div>
+      <FeaturesRule />
+      {list.length > 0 ? (
+        <ul role="list" className="grid grid-cols-2 gap-x-8 gap-y-8 [@container(min-width:48rem)]:grid-cols-3 [@container(min-width:48rem)]:gap-x-12 [@container(min-width:72rem)]:grid-cols-4 [@container(min-width:72rem)]:gap-y-12">
+          {list.map((item) => {
+            const Icon = item.icon
+            return (
+              <li key={item.id} className="flex min-w-0 flex-col gap-2">
+                <div className="flex items-center gap-2.5 text-sm font-medium text-foreground">
+                  {Icon ? <Icon size={18} strokeWidth={1.5} absoluteStrokeWidth aria-hidden className="shrink-0 [@container(min-width:72rem)]:size-4" /> : null}
+                  <p className="min-w-0 text-sm font-medium">{item.title}</p>
+                </div>
+                <p className="text-xs text-muted-foreground">{item.description}</p>
+              </li>
+            )
+          })}
+        </ul>
+      ) : null}
+    </FeaturesSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const featuresCompactIconIndexCopy = COPY

package/registry/blocks/features-compact-icon-index/index.ts

@@ -0,0 +1,7 @@
+export {
+  FeaturesCompactIconIndex,
+  featuresCompactIconIndexCopy,
+  type FeaturesCompactIconIndexCopy,
+  type FeaturesCompactIconIndexItem,
+  type FeaturesCompactIconIndexProps,
+} from "./FeaturesCompactIconIndex"