@smicolon/fasla-ui 0.2.4 → 0.3.0

package/registry.json

@@ -47,11 +47,14 @@
       "name": "avatar",
       "type": "registry:ui",
       "title": "Avatar",
-      "description": "Represent users with images, fallback content, and grouping.",
+      "description": "A user's photo, initials or icon, in three sizes and two radii, with an optional border and presence dot. Falls back from photo to initials to icon on its own.",
       "dependencies": [
-        "class-variance-authority"
+        "class-variance-authority",
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "status-indicator"
       ],
-      "registryDependencies": [],
       "files": [
         {
           "path": "registry/ui/avatar/avatar.tsx",
@@ -68,9 +71,10 @@
       "name": "badge",
       "type": "registry:ui",
       "title": "Badge",
-      "description": "A badge component for status indicators with multiple variants.",
+      "description": "A compact inline label for status, category or metadata: solid, soft and outline types in six semantic tones, with an optional icon, avatar and close button.",
       "dependencies": [
-        "class-variance-authority"
+        "class-variance-authority",
+        "lucide-react"
       ],
       "registryDependencies": [],
       "files": [
@@ -113,7 +117,8 @@
       "description": "A button component with multiple variants, sizes, and loading state.",
       "dependencies": [
         "@radix-ui/react-slot",
-        "class-variance-authority"
+        "class-variance-authority",
+        "lucide-react"
       ],
       "registryDependencies": [],
       "files": [
@@ -152,7 +157,9 @@
       "type": "registry:ui",
       "title": "Checkbox",
       "description": "An accessible checkbox for binary selections with controlled state.",
-      "dependencies": [],
+      "dependencies": [
+        "lucide-react"
+      ],
       "registryDependencies": [],
       "files": [
         {
@@ -166,12 +173,35 @@
         "forms"
       ]
     },
+    {
+      "name": "radio",
+      "type": "registry:ui",
+      "title": "Radio",
+      "description": "An accessible radio for choosing one option from a set, with a plain and a bordered layout variant.",
+      "dependencies": [
+        "class-variance-authority"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "registry/ui/radio/radio.tsx",
+          "type": "registry:ui",
+          "target": "components/ui/radio.tsx"
+        }
+      ],
+      "categories": [
+        "primitives",
+        "forms"
+      ]
+    },
     {
       "name": "combobox",
       "type": "registry:ui",
       "title": "Combobox",
       "description": "A searchable combobox with single or multiple selection.",
-      "dependencies": [],
+      "dependencies": [
+        "lucide-react"
+      ],
       "registryDependencies": [],
       "files": [
         {
@@ -209,7 +239,9 @@
       "type": "registry:block",
       "title": "Empty State",
       "description": "Empty state component with icon, title, description, and actions.",
-      "dependencies": [],
+      "dependencies": [
+        "lucide-react"
+      ],
       "registryDependencies": [],
       "files": [
         {
@@ -287,7 +319,9 @@
       "type": "registry:block",
       "title": "Navbar",
       "description": "Responsive navigation bar with desktop links and mobile menu.",
-      "dependencies": [],
+      "dependencies": [
+        "lucide-react"
+      ],
       "registryDependencies": [],
       "files": [
         {
@@ -325,7 +359,9 @@
       "type": "registry:ui",
       "title": "Select",
       "description": "A select control for choosing one option from a list.",
-      "dependencies": [],
+      "dependencies": [
+        "lucide-react"
+      ],
       "registryDependencies": [],
       "files": [
         {
@@ -365,7 +401,9 @@
       "type": "registry:block",
       "title": "Sidebar",
       "description": "Responsive sidebar navigation with collapsible structure.",
-      "dependencies": [],
+      "dependencies": [
+        "lucide-react"
+      ],
       "registryDependencies": [],
       "files": [
         {
@@ -424,7 +462,9 @@
       "type": "registry:block",
       "title": "Stats Card",
       "description": "Display a metric with trend, icon, and supporting label.",
-      "dependencies": [],
+      "dependencies": [
+        "lucide-react"
+      ],
       "registryDependencies": [],
       "files": [
         {
@@ -438,12 +478,35 @@
         "application"
       ]
     },
+    {
+      "name": "status-indicator",
+      "type": "registry:ui",
+      "title": "Status Indicator",
+      "description": "A presence dot — online, away, busy or offline — with an accessible name in the page's language, so colour never carries the status alone.",
+      "dependencies": [
+        "class-variance-authority"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "registry/ui/status-indicator/status-indicator.tsx",
+          "type": "registry:ui",
+          "target": "components/ui/status-indicator.tsx"
+        }
+      ],
+      "categories": [
+        "primitives",
+        "data-display"
+      ]
+    },
     {
       "name": "switch",
       "type": "registry:ui",
       "title": "Switch",
-      "description": "An accessible switch for on-off settings.",
-      "dependencies": [],
+      "description": "An accessible switch for on-off settings: solid and outline styles in three sizes, with the track before or after its label.",
+      "dependencies": [
+        "class-variance-authority"
+      ],
       "registryDependencies": [],
       "files": [
         {

package/tailwind-preset.ts

@@ -0,0 +1,143 @@
+import plugin from "tailwindcss/plugin"
+import type { Config } from "tailwindcss"
+
+/**
+ * Shared typography preset — the single place the Fasla type system lives.
+ *
+ * Every value here is read from the `Tailwind En/*` and `Tailwind AR/*` text
+ * styles in the Fasla Figma file. Figma is the source of truth: nothing in this
+ * file is rounded, averaged or invented. If a value looks wrong, fix the style
+ * in Figma and mirror it here — never the other way round.
+ *
+ * Geist carries LTR, Cairo carries RTL. The two ramps are 1:1 by size and
+ * deliberately not 1:1 by line-height — Cairo needs more vertical room for
+ * descenders and diacritics.
+ *
+ * Line-height is delivered as a CSS variable per rung, so `[dir="rtl"]`
+ * re-points the whole ramp at once. That is what makes every `text-*` utility
+ * direction-aware without a single component knowing about it.
+ */
+
+/**
+ * Line-height as Figma states it: a px value against a px size.
+ *
+ * It is emitted as `calc(lineHeight / fontSize)` — a unitless ratio, so it
+ * stays correct when a rung is used at a responsive size, and exact, because
+ * CSS does the division at full precision. Eight of these ratios are
+ * non-terminating (18→26 is 1.444…), so writing them as decimals would mean
+ * rounding a source-of-truth value. calc() avoids that entirely.
+ *
+ * `null` means Figma has the rung on AUTO — the font's own metrics, which CSS
+ * spells `normal`. No rung is currently on AUTO: all 144 styles are bound, in
+ * both scripts, at every size. The mechanism stays because AUTO is a legitimate
+ * choice Figma can express, and a rung may return to it.
+ */
+const LEADING = {
+  //           size          En            AR
+  // XXS is the one rung below Tailwind's stock scale. Figma binds En to
+  // `typography/line-height/L-neg-0,5` (14) and AR to `L-0` (16).
+  xxs: /*       10 */ [/*    14 */ 14, /*    16 */ 16],
+  xs: /*        12 */ [/*    16 */ 16, /*    20 */ 20],
+  sm: /*        14 */ [/*    20 */ 20, /*    24 */ 24],
+  base: /*      16 */ [/*    24 */ 24, /*    28 */ 28],
+  lg: /*        18 */ [/*    28 */ 28, /*    32 */ 32],
+  xl: /*        20 */ [/*    28 */ 28, /*    36 */ 36],
+  "2xl": /*     24 */ [/*    32 */ 32, /*    40 */ 40],
+  "3xl": /*     30 */ [/*    40 */ 40, /*    50 */ 50],
+  "4xl": /*     36 */ [/*    44 */ 44, /*    60 */ 60],
+  "5xl": /*     48 */ [/*    58 */ 58, /*    72 */ 72],
+  "6xl": /*     60 */ [/*    72 */ 72, /*    90 */ 90],
+  "7xl": /*     72 */ [/*    90 */ 90, /*   108 */ 108],
+  "8xl": /*     96 */ [/*   108 */ 108, /*  144 */ 144],
+  "9xl": /*    128 */ [/*   144 */ 144, /*  192 */ 192],
+  // `Extra/*` — two styles that sit outside the XXS–9XL ramp but are part of it.
+  // Weight, underline and case are left to the ordinary utilities: `Extra/Link`
+  // is 400 + underline, `Extra/List Header` is 500 + uppercase. Uppercase is
+  // English-only; Arabic has no uppercase and must never be given one.
+  link: /*      16 */ [/*    24 */ 24, /*    24 */ 24],
+  "list-header": /* 14 */ [/*  16 */ 16, /*    16 */ 16],
+} as const satisfies Record<string, readonly [number | null, number | null]>
+
+/**
+ * Figma's size scale. From XS up it matches Tailwind's own scale 1:1; XXS
+ * (10px, `typography/font-size/xxs`) is Fasla's addition below it.
+ */
+const SIZE_PX = {
+  xxs: 10,
+  xs: 12,
+  sm: 14,
+  base: 16,
+  lg: 18,
+  xl: 20,
+  "2xl": 24,
+  "3xl": 30,
+  "4xl": 36,
+  "5xl": 48,
+  "6xl": 60,
+  "7xl": 72,
+  "8xl": 96,
+  "9xl": 128,
+  link: 16,
+  "list-header": 14,
+} as const
+
+type Rung = keyof typeof LEADING
+
+const rungs = Object.keys(LEADING) as Rung[]
+
+const rem = (px: number) => `${px / 16}rem`
+const cssVar = (rung: Rung) => `--leading-${rung}`
+
+/** Exact, unitless, and never rounded — CSS divides at full precision. */
+const ratio = (leadingPx: number, sizePx: number) => `calc(${leadingPx} / ${sizePx})`
+
+/** `text-xl` resolves its leading through the variable, never a literal. */
+const fontSize = Object.fromEntries(
+  rungs.map((rung) => [rung, [rem(SIZE_PX[rung]), `var(${cssVar(rung)})`]])
+) as Record<Rung, [string, string]>
+
+const leadingFor = (index: 0 | 1) =>
+  Object.fromEntries(
+    rungs.map((rung) => {
+      const px = LEADING[rung][index]
+      return [cssVar(rung), px === null ? "normal" : ratio(px, SIZE_PX[rung])]
+    })
+  )
+
+/**
+ * Figma sets `letterSpacing` to 0% on all 144 text styles, both scripts, every
+ * weight — so the ramp declares no tracking and components should set none.
+ * Tailwind's stock `tracking-*` scale is left in place for the one sanctioned
+ * exception, the letter-spaced eyebrow that design/DESIGN.md documents as
+ * deliberately detached. Reach for it only for that.
+ */
+
+const preset = {
+  content: [],
+  theme: {
+    extend: {
+      fontFamily: {
+        // Brand V2.5 §14 — product tier.
+        sans: ["var(--font-geist-sans)", "system-ui", "sans-serif"],
+        mono: ["var(--font-geist-mono)", "ui-monospace", "monospace"],
+        // Brand V2.5 §14 — the Arabic face. Geist has no Arabic coverage.
+        arabic: ["var(--font-cairo)", "system-ui", "sans-serif"],
+      },
+      fontSize,
+    },
+  },
+  plugins: [
+    plugin(({ addBase }) => {
+      addBase({
+        ":root": leadingFor(0),
+        // Source order matters: same specificity as `:root`, so this must win by
+        // coming second. `dir` is on a wrapper element, not <html>, in both apps —
+        // the variables cascade down from wherever it sits.
+        '[dir="rtl"]': leadingFor(1),
+      })
+    }),
+  ],
+} satisfies Config
+
+export { LEADING, SIZE_PX }
+export default preset