@smicolon/fasla-ui 0.2.4 → 0.4.0

package/registry/ui/switch/switch.tsx

@@ -1,89 +1,286 @@
 import * as React from "react"
+import { cva } from "class-variance-authority"
 import { cn } from "../../../src/lib/utils"
 
-export interface SwitchProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
-  /** Label text */
-  label?: string
-  /** Description text */
-  description?: string
-  /** Size variant */
-  size?: "sm" | "default" | "lg"
-}
+/**
+ * Root layout. Figma's two Types:
+ *  - `control-first` (the default): track, then label. The description sits
+ *    under the label, so it is indented by the track width plus the 8px gap,
+ *    exactly as Figma's 40/48/56px indent.
+ *  - `label-first`: label at the start, track pushed to the end — a settings
+ *    row. It fills its container; the description stays under the label.
+ *
+ * `group/switch` is a *named* group so the `:has(:checked)` lookups below can
+ * never be answered by an unrelated checkbox in some outer `.group`.
+ *
+ * Disabled dims the whole component, label and description included — Figma
+ * puts 50% opacity on the variant root, not on the track.
+ */
+const switchVariants = cva(
+  "group/switch cursor-pointer items-start gap-2 has-[:disabled]:pointer-events-none has-[:disabled]:opacity-50",
+  {
+    variants: {
+      layout: {
+        "control-first": "inline-flex",
+        "label-first": "flex justify-between",
+      },
+    },
+    defaultVariants: {
+      layout: "control-first",
+    },
+  }
+)
 
+/**
+ * Geometry per size, straight from the Figma set: track, thumb, and where the
+ * thumb sits when on. The thumb is always inset 1px, so "on" is the track width
+ * less the thumb less 1px.
+ *
+ * `--sw-h` is the track height. With `--sw-line` (one line of label text, see
+ * `LINE` below) it sizes the band the track is centred in, and the label's
+ * padding. Every class is written out literally so Tailwind can find it.
+ */
 const sizeClasses = {
   sm: {
-    track: "h-4 w-7",
-    thumb: "h-3 w-3 data-[state=checked]:translate-x-3",
+    root: "[--sw-h:18px]",
+    track: "h-[18px] w-8",
+    thumb: "size-4 group-has-[:checked]/switch:start-[15px]",
   },
-  default: {
-    track: "h-5 w-9",
-    thumb: "h-4 w-4 data-[state=checked]:translate-x-4",
+  md: {
+    root: "[--sw-h:20px]",
+    track: "h-5 w-10",
+    thumb: "size-[18px] group-has-[:checked]/switch:start-[21px]",
   },
   lg: {
-    track: "h-6 w-11",
-    thumb: "h-5 w-5 data-[state=checked]:translate-x-5",
+    root: "[--sw-h:24px]",
+    track: "h-6 w-12",
+    thumb: "size-[22px] group-has-[:checked]/switch:start-[25px]",
+  },
+}
+
+/**
+ * Colours per Figma Style. All `☾ Mode` tokens, so Dark follows on its own.
+ *
+ *  - solid: track `input` → `primary`, thumb `primary-foreground`, and Figma's
+ *    `shadow/default/xs` on the *track* (Tailwind's `shadow-sm` is the same
+ *    0 1 2 0 black/5%). Disabled keeps the same thumb; only the opacity changes.
+ *  - outline: track `background` with a 1px stroke *outside* it, `input` →
+ *    `primary`; the thumb takes the stroke colour. A CSS outline is the exact
+ *    model of a Figma OUTSIDE stroke: painted, but not part of the box, so the
+ *    track keeps Figma's size and the thumb its 1px inset.
+ *
+ * `focus` is the focus-ring element (see below). Figma draws focus as a 1px
+ * stroke in `ring` — inside the track for solid, replacing the outside stroke
+ * for outline, where an *on* outline keeps its `primary` stroke — plus a 3px
+ * halo. Figma's halo colour is a raw #a1a1aa at 50%; this uses the `ring`
+ * token at 50%, which is the same grey in Light and follows the mode in Dark.
+ */
+const variantClasses = {
+  solid: {
+    track: "bg-input shadow-sm group-has-[:checked]/switch:bg-primary",
+    thumb: "bg-primary-foreground",
+    focus: "border border-ring",
+  },
+  outline: {
+    track:
+      "bg-background outline outline-1 outline-input group-has-[:checked]/switch:outline-primary",
+    thumb: "bg-input group-has-[:checked]/switch:bg-primary",
+    focus: "outline outline-1 outline-ring group-has-[:checked]/switch:outline-primary",
   },
 }
 
+/**
+ * One line of `text-sm` label, in whichever script is rendering — 20px for
+ * Geist, 24px for Cairo. The ramp re-points `--leading-sm` under `[dir="rtl"]`,
+ * so nothing here is direction-specific. The fallback is English's 20 / 14,
+ * for a project without the Fasla preset. Same derivation as Radio's LINE_BOX.
+ */
+const LINE = "[--sw-line:calc(var(--leading-sm,calc(20/14))*0.875rem)]"
+
+/** The taller of one label line and the track. */
+const BAND_HEIGHT = "h-[max(var(--sw-line),var(--sw-h))]"
+
+export interface SwitchProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+  /**
+   * Visual treatment: a filled track, or an outlined one. Declared here rather
+   * than inherited from `VariantProps`, which widens every variant with
+   * `| null` and shows a meaningless third option in Storybook.
+   */
+  variant?: "solid" | "outline"
+  /** Track before the label, or label first with the track at the end. */
+  layout?: "control-first" | "label-first"
+  /** Size variant */
+  size?: "sm" | "md" | "lg"
+  /** Label text. Without it (or `description`) pass `aria-label` for an accessible name. */
+  label?: string
+  /** Secondary line below the label */
+  description?: string
+}
+
 const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
-  ({ className, label, description, size = "default", id, ...props }, ref) => {
-    const inputId = id || React.useId()
-    const sizes = sizeClasses[size]
+  (
+    {
+      className,
+      variant = "solid",
+      layout = "control-first",
+      size = "md",
+      label,
+      description,
+      id,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      ...props
+    },
+    ref
+  ) => {
+    const generatedId = React.useId()
+    const inputId = id || generatedId
+    const labelId = `${inputId}-label`
+    const descriptionId = `${inputId}-description`
+    /*
+     * The wrapping <label> would name the switch with *all* its text, label
+     * and description together, while `aria-describedby` reads the description
+     * again. So the name points at the label alone, unless the caller named
+     * the switch themselves; and the description is linked only when the name
+     * comes from somewhere else, or it would be the name and the description.
+     */
+    const labelledBy = ariaLabelledBy ?? (label && !ariaLabel ? labelId : undefined)
+    const isNamedElsewhere = Boolean(label || ariaLabel || ariaLabelledBy)
+    // Plain join: these are ids, and `cn` would merge "text-sm text-lg" as classes.
+    const describedBy =
+      [description && isNamedElsewhere ? descriptionId : undefined, ariaDescribedBy]
+        .filter(Boolean)
+        .join(" ") || undefined
+    // Fall back to the defaults for an untyped caller passing null or a typo.
+    const sizes = sizeClasses[size] ?? sizeClasses.md
+    const colors = variantClasses[variant] ?? variantClasses.solid
+    const hasText = Boolean(label || description)
+
+    /*
+     * The track sits in a band one label line tall — or the track's height, if
+     * that is taller — and centres itself in it. So it aligns with the *first*
+     * line of a wrapped label instead of drifting to the middle of the block.
+     *
+     * The band is a *direct sibling of the input*, so a plain
+     * `peer-focus-visible` sets `--sw-focus` on it, and the focus ring inside
+     * the track reads that variable as its opacity. That is the one selector
+     * form `storybook-addon-pseudo-states` can force — it cannot force
+     * `:has(:focus-visible)` — and keeping the ring inside the track means it
+     * follows the track wherever padding on the root moves it.
+     */
+    const band = (
+      <span
+        aria-hidden="true"
+        className={cn(
+          "flex shrink-0 items-center peer-focus-visible:[--sw-focus:1]",
+          BAND_HEIGHT
+        )}
+      >
+        <span
+          data-slot="track"
+          className={cn(
+            "relative block rounded-full transition-colors motion-reduce:transition-none",
+            sizes.track,
+            colors.track
+          )}
+        >
+          {/*
+           * Positioned with `inset-inline-start`, a logical property, so the
+           * thumb travels towards the end of the line in either direction with
+           * no RTL-specific class: `start-px` is left in LTR and right in RTL.
+           */}
+          <span
+            data-slot="thumb"
+            className={cn(
+              "absolute start-px top-px block rounded-full transition-[inset-inline-start,background-color] motion-reduce:transition-none",
+              sizes.thumb,
+              colors.thumb
+            )}
+          />
+          {/*
+           * Laid exactly over the track. Figma draws focus as a 1px `ring`
+           * stroke (inside for solid, replacing the outside stroke for
+           * outline) plus a 3px halo; painted after the thumb, it never
+           * overlaps it, because the thumb is inset by that same 1px.
+           */}
+          <span
+            data-slot="focus-ring"
+            className={cn(
+              "pointer-events-none absolute inset-0 rounded-full opacity-[var(--sw-focus,0)] ring-[3px] ring-ring/50",
+              colors.focus
+            )}
+          />
+        </span>
+      </span>
+    )
+
+    const text = hasText && (
+      <span
+        className={cn(
+          "flex min-w-0 flex-col gap-0.5",
+          layout === "label-first" && "flex-1"
+        )}
+      >
+        {label && (
+          // Padded so a single line centres on a track taller than the line
+          // (lg in English: 24px track, 20px line). The padding is zero
+          // whenever the line is the taller of the two.
+          <span
+            id={labelId}
+            className="py-[max(0px,calc((var(--sw-h)-var(--sw-line))/2))] text-sm font-medium text-foreground"
+          >
+            {label}
+          </span>
+        )}
+        {description && (
+          <span
+            id={descriptionId}
+            className="text-xs font-light text-muted-foreground"
+          >
+            {description}
+          </span>
+        )}
+      </span>
+    )
 
-    const switchElement = (
+    return (
       <label
         htmlFor={inputId}
         className={cn(
-          "peer relative inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
-          "focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
-          "disabled:cursor-not-allowed disabled:opacity-50",
-          "bg-input has-[:checked]:bg-primary",
-          sizes.track,
+          switchVariants({ layout }),
+          LINE,
+          sizes.root,
           className
         )}
       >
         <input
           type="checkbox"
+          role="switch"
           ref={ref}
           id={inputId}
-          className="sr-only"
+          className="peer sr-only"
+          aria-label={ariaLabel}
+          aria-labelledby={labelledBy}
+          aria-describedby={describedBy}
           {...props}
         />
-        <span
-          data-state={props.checked ? "checked" : "unchecked"}
-          className={cn(
-            "pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform",
-            sizes.thumb
-          )}
-        />
+        {layout === "label-first" ? (
+          <>
+            {text}
+            {band}
+          </>
+        ) : (
+          <>
+            {band}
+            {text}
+          </>
+        )}
       </label>
     )
-
-    if (!label && !description) {
-      return switchElement
-    }
-
-    return (
-      <div className="flex items-center justify-between gap-4">
-        <div className="grid gap-1">
-          {label && (
-            <label
-              htmlFor={inputId}
-              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-            >
-              {label}
-            </label>
-          )}
-          {description && (
-            <p className="text-xs text-muted-foreground">{description}</p>
-          )}
-        </div>
-        {switchElement}
-      </div>
-    )
   }
 )
 Switch.displayName = "Switch"
 
-export { Switch }
+export { Switch, switchVariants }

package/registry/ui/textarea/textarea.tsx

@@ -61,7 +61,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <div className="relative">
         {textarea}
-        <div className="absolute bottom-2 right-3 text-xs text-muted-foreground">
+        <div className="absolute bottom-2 end-3 text-xs text-muted-foreground">
           {maxLength ? `${count}/${maxLength}` : count}
         </div>
       </div>

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": [
         {
@@ -383,7 +421,7 @@
       "name": "skeleton",
       "type": "registry:ui",
       "title": "Skeleton",
-      "description": "Loading skeleton placeholders with pre-built variants for text, avatars, and cards.",
+      "description": "Loading placeholders that replace shadcn's Skeleton: a plain block plus text, avatar, list item and card shapes that stay still under reduced motion.",
       "dependencies": [],
       "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