@smicolon/fasla-ui 0.2.4 → 0.3.0

package/registry/ui/radio/radio.tsx

@@ -0,0 +1,208 @@
+import * as React from "react"
+import { cva } from "class-variance-authority"
+import { cn } from "../../../src/lib/utils"
+
+/**
+ * The height of one line of label text, in whichever script is rendering.
+ *
+ * The type ramp publishes `--leading-sm` as a *unitless ratio* (`calc(20 / 14)`),
+ * not a length, so the line box is ratio × font-size. Writing it this way makes
+ * the control direction-aware for free: under `[dir="rtl"]` the ramp re-points
+ * `--leading-sm` at Cairo's 24px leading and the control re-centres itself with
+ * no RTL-specific class. The fallback, English's 20 / 14, is for a project that
+ * does not load the Fasla preset, where `--leading-sm` does not exist.
+ *
+ * The label deliberately has no fixed height. Figma pins its label boxes to
+ * 16/20/24px, which is a defect there — at `sm` a 16px box holds 20px English
+ * and 24px Arabic text — and it must not be mirrored here. The ramp sets the
+ * leading; nothing else does.
+ */
+const LINE_BOX = "h-[calc(var(--leading-sm,calc(20/14))*0.875rem)]"
+
+const radioVariants = cva(
+  "group relative inline-flex cursor-pointer items-start gap-3 has-[:disabled]:pointer-events-none has-[:disabled]:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "",
+        // In Layout the whole card is the target, so hover fills it and focus
+        // rings it. The card ships with no fill, so hover *adds* one.
+        layout:
+          "rounded-md border p-2 transition-colors motion-reduce:transition-none hover:bg-accent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+/**
+ * Control, dot and hover halo per size. The dot is always the control less 8px;
+ * the halo is always the control plus 8px.
+ */
+const sizeClasses = {
+  sm: { control: "size-4", dot: "size-2", halo: "size-6" },
+  md: { control: "size-5", dot: "size-3", halo: "size-7" },
+  lg: { control: "size-6", dot: "size-4", halo: "size-8" },
+}
+
+export interface RadioProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+  /**
+   * Visual treatment. `layout` wraps the control and text in a bordered card.
+   * Declared here rather than inherited from `VariantProps`, which widens every
+   * variant with `| null` and shows a meaningless third option in Storybook.
+   */
+  variant?: "default" | "layout"
+  /** Label text. Without it (or `description`) pass `aria-label` for an accessible name. */
+  label?: string
+  /** Secondary line below the label */
+  description?: string
+  /** Size variant */
+  size?: "sm" | "md" | "lg"
+}
+
+const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
+  (
+    {
+      className,
+      variant = "default",
+      size = "md",
+      label,
+      description,
+      id,
+      "aria-describedby": ariaDescribedBy,
+      ...props
+    },
+    ref
+  ) => {
+    const generatedId = React.useId()
+    const inputId = id || generatedId
+    const descriptionId = `${inputId}-description`
+    const sizes = sizeClasses[size]
+
+    return (
+      <label
+        htmlFor={inputId}
+        className={cn(radioVariants({ variant }), className)}
+      >
+        <input
+          type="radio"
+          ref={ref}
+          id={inputId}
+          className="peer sr-only"
+          aria-describedby={
+            description ? cn(descriptionId, ariaDescribedBy) : ariaDescribedBy
+          }
+          {...props}
+        />
+        {/*
+         * The control sits in a band exactly one line tall and centres itself
+         * in it, so it aligns optically with the *first* line of the label
+         * rather than drifting to the middle of a wrapped block. At `lg` the
+         * 24px control is taller than a 20px English line and overflows the
+         * band by 2px a side — deliberate, and well inside the card's 8px
+         * padding.
+         */}
+        {/*
+         * Focus rings are real elements, exactly as Figma models them — an
+         * ellipse at −2,−2 for Default and a rounded rectangle at −1,−1 for
+         * Layout, rather than a property of the control or the card.
+         *
+         * Each is a *direct sibling of the input*, so a plain
+         * `peer-focus-visible:opacity-100` drives it. That matters beyond
+         * tidiness: `:has()` and arbitrary-variant selectors both resolve in a
+         * browser but are invisible to the pseudo-state renderer the Storybook
+         * states grid uses, so the grid would quietly stop matching the
+         * component. A simple class on a sibling is the one form that survives.
+         */}
+        {variant === "layout" && (
+          <span
+            aria-hidden="true"
+            // −2px, not −1px: an absolutely positioned child is offset from the
+            // *padding* box, which already sits 1px inside the 1px border. −1
+            // would land the ring exactly on the border with no gap at all.
+            className="pointer-events-none absolute -inset-[2px] rounded-[calc(var(--radius)-1px)] opacity-0 ring-2 ring-ring peer-focus-visible:opacity-100"
+          />
+        )}
+        {variant === "default" && (
+          <span
+            aria-hidden="true"
+            className={cn(
+              "pointer-events-none absolute start-0 top-0 flex items-center opacity-0 peer-focus-visible:opacity-100",
+              LINE_BOX
+            )}
+          >
+            <span
+              className={cn(
+                "rounded-full ring-2 ring-ring ring-offset-2",
+                sizes.control
+              )}
+            />
+          </span>
+        )}
+        <span
+          aria-hidden="true"
+          className={cn("relative flex shrink-0 items-center", LINE_BOX)}
+        >
+          {/*
+           * Hover halo — Default only; in Layout the card fills instead. Kept
+           * absolute so it can never affect layout, which is the constraint the
+           * Figma set is built on: every Interaction variant has identical
+           * frame sizes.
+           */}
+          {variant === "default" && (
+            <span
+              className={cn(
+                "pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-accent opacity-0 transition-opacity motion-reduce:transition-none group-hover:opacity-100",
+                sizes.halo
+              )}
+            />
+          )}
+          <span
+            data-slot="control"
+            className={cn(
+              "relative flex shrink-0 items-center justify-center rounded-full border border-input",
+              sizes.control
+            )}
+          >
+            <span
+              className={cn(
+                // Figma paints the dot with theme/primary — the strong neutral
+                // (#0a0a0a light, #fafafa dark). Both apps now declare exactly
+                // that, so `bg-primary` is the honest token again. This read
+                // `bg-foreground` until the token sync, as a workaround for the
+                // docs app having repurposed `--primary` as the brand red.
+                // Figma gives primary and foreground the same value in both
+                // modes, so this is a rename, not a visual change.
+                "scale-0 rounded-full bg-primary transition-transform motion-reduce:transition-none group-has-[:checked]:scale-100",
+                sizes.dot
+              )}
+            />
+          </span>
+        </span>
+        {(label || description) && (
+          <span className="flex min-w-0 flex-col gap-2">
+            {label && (
+              <span className="text-sm font-medium text-foreground">
+                {label}
+              </span>
+            )}
+            {description && (
+              <span
+                id={descriptionId}
+                className="text-sm text-muted-foreground"
+              >
+                {description}
+              </span>
+            )}
+          </span>
+        )}
+      </label>
+    )
+  }
+)
+Radio.displayName = "Radio"
+
+export { Radio, radioVariants }

package/registry/ui/select/select.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
 import { cn } from "../../../src/lib/utils"
 
 export interface SelectOption {
@@ -51,7 +52,7 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
               ? "border-destructive focus-visible:ring-destructive"
               : "border-input",
             sizeClasses[selectSize],
-            "pr-10",
+            "pe-10",
             className
           )}
           {...props}
@@ -71,19 +72,8 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
             </option>
           ))}
         </select>
-        <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground">
-          <svg
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          >
-            <polyline points="6 9 12 15 18 9" />
-          </svg>
+        <div className="pointer-events-none absolute inset-y-0 end-0 flex items-center pe-3 text-muted-foreground">
+          <ChevronDownIcon size={16} strokeWidth={1.5} />
         </div>
       </div>
     )

package/registry/ui/skeleton/skeleton.tsx

@@ -71,7 +71,7 @@ function SkeletonCard({ className, ...props }: SkeletonProps) {
       )}
       {...props}
     >
-      <div className="flex items-center space-x-4">
+      <div className="flex items-center gap-4">
         <SkeletonAvatar />
         <div className="space-y-2 flex-1">
           <Skeleton className="h-4 w-1/2" />

package/registry/ui/status-indicator/index.ts

@@ -0,0 +1,6 @@
+export {
+  StatusIndicator,
+  statusIndicatorVariants,
+  STATUS_LABELS,
+  type StatusIndicatorProps,
+} from "./status-indicator"

package/registry/ui/status-indicator/status-indicator.test.tsx

@@ -0,0 +1,148 @@
+import * as React from "react"
+import { readFileSync } from "node:fs"
+import { dirname, resolve } from "node:path"
+import { fileURLToPath } from "node:url"
+import { beforeAll, describe, it, expect } from "vitest"
+import { render, screen } from "@testing-library/react"
+import { StatusIndicator, type StatusIndicatorProps } from "./status-indicator"
+
+const SOURCE = readFileSync(
+  resolve(dirname(fileURLToPath(import.meta.url)), "status-indicator.tsx"),
+  "utf8"
+)
+
+function dot(props: Partial<StatusIndicatorProps> = {}) {
+  render(<StatusIndicator data-testid="dot" {...props} />)
+  return screen.getByTestId("dot")
+}
+
+/** The name a screen reader would hear: the visible (not display: none) runs. */
+function spokenName(el: HTMLElement) {
+  return Array.from(el.querySelectorAll<HTMLElement>(".sr-only"))
+    .filter((run) => getComputedStyle(run).display !== "none")
+    .map((run) => run.textContent)
+    .join("")
+}
+
+/*
+ * The default name is two hidden runs, and CSS keeps the one matching the
+ * nearest `lang`. jsdom loads no Tailwind, so inject exactly the compiled
+ * rules the name depends on.
+ */
+beforeAll(() => {
+  const style = document.createElement("style")
+  style.textContent = [
+    ".hidden { display: none }",
+    ".\\[\\&\\:lang\\(ar\\)\\]\\:hidden:lang(ar) { display: none }",
+    ".\\[\\&\\:lang\\(ar\\)\\]\\:inline:lang(ar) { display: inline }",
+  ].join("\n")
+  document.head.append(style)
+})
+
+describe("StatusIndicator", () => {
+  it("renders Figma's defaults: Online, 8px, a 2px background ring", () => {
+    const el = dot()
+    expect(el.tagName).toBe("SPAN")
+    expect(el).toHaveClass("bg-success", "size-2", "ring-2", "ring-background", "rounded-full")
+  })
+
+  it.each([
+    ["online", "bg-success"],
+    ["away", "bg-warning"],
+    ["busy", "bg-destructive"],
+    ["offline", "bg-muted"],
+  ] as const)("%s binds the Figma token %s", (status, fill) => {
+    expect(dot({ status })).toHaveClass(fill)
+  })
+
+  it("draws the 4px dot with a 1px ring", () => {
+    const el = dot({ size: "4" })
+    expect(el).toHaveClass("size-1", "ring-1")
+    expect(el).not.toHaveClass("size-2", "ring-2")
+  })
+
+  it("keeps the ring outside the dot, so it never changes the footprint", () => {
+    // A border would add to the box; Figma's stroke is OUTSIDE.
+    expect(SOURCE).not.toMatch(/\bborder(-\d)?\b/)
+  })
+
+  it("uses tokens only — no raw colour or pixel values", () => {
+    expect(SOURCE).not.toMatch(/#[0-9a-f]{3,8}\b|\[\d+px\]|rgb\(/i)
+  })
+
+  it("merges a consumer className", () => {
+    expect(dot({ className: "absolute" })).toHaveClass("absolute", "bg-success")
+  })
+
+  describe("accessible name", () => {
+    it.each([
+      ["online", "Online", "متصل"],
+      ["away", "Away", "بعيد"],
+      ["busy", "Busy", "مشغول"],
+      ["offline", "Offline", "غير متصل"],
+    ] as const)("%s is %s in English and %s in Arabic", (status, en, ar) => {
+      render(
+        <>
+          <div lang="en">
+            <StatusIndicator data-testid="en" status={status} />
+          </div>
+          <div lang="ar" dir="rtl">
+            <StatusIndicator data-testid="ar" status={status} />
+          </div>
+        </>
+      )
+      expect(spokenName(screen.getByTestId("en"))).toBe(en)
+      expect(spokenName(screen.getByTestId("ar"))).toBe(ar)
+    })
+
+    it("follows the nearest lang, so an English island on an Arabic page stays English", () => {
+      render(
+        <div lang="ar">
+          <div lang="en">
+            <StatusIndicator data-testid="dot" status="busy" />
+          </div>
+        </div>
+      )
+      expect(spokenName(screen.getByTestId("dot"))).toBe("Busy")
+    })
+
+    it("follows a live language change without remounting", () => {
+      const { container } = render(
+        <div lang="en">
+          <StatusIndicator data-testid="dot" status="away" />
+        </div>
+      )
+      expect(spokenName(screen.getByTestId("dot"))).toBe("Away")
+      container.firstElementChild!.setAttribute("lang", "ar")
+      expect(spokenName(screen.getByTestId("dot"))).toBe("بعيد")
+    })
+
+    it("takes an explicit label over the page language", () => {
+      render(
+        <div lang="ar">
+          <StatusIndicator data-testid="dot" status="online" label="Layla is online" />
+        </div>
+      )
+      const el = screen.getByTestId("dot")
+      expect(spokenName(el)).toBe("Layla is online")
+      expect(el.querySelectorAll(".sr-only")).toHaveLength(1)
+    })
+
+    it("is silent with label=\"\", for when text beside it already says the status", () => {
+      render(
+        <div lang="ar">
+          <StatusIndicator data-testid="dot" status="busy" label="" />
+        </div>
+      )
+      const el = screen.getByTestId("dot")
+      expect(el.querySelectorAll(".sr-only")).toHaveLength(0)
+      expect(el.textContent).toBe("")
+    })
+
+    it("puts the name in text, not in colour alone", () => {
+      const el = dot({ status: "offline" })
+      expect(el.textContent).toContain("Offline")
+      expect(el).not.toHaveAttribute("aria-hidden")
+    })
+  })
+})

package/registry/ui/status-indicator/status-indicator.tsx

@@ -0,0 +1,87 @@
+import * as React from "react"
+import { cva } from "class-variance-authority"
+import { cn } from "../../../src/lib/utils"
+
+/**
+ * Built against the Figma `Status Indicator` set (323:390): Type × Size, 8
+ * variants. Every colour below is the token the set binds.
+ *
+ * The dot has no Direction axis: it is a circle, so there is nothing to mirror.
+ * Where it sits is the parent's job — Avatar pins it to the end corner.
+ *
+ * Figma's ring is a `theme/background` stroke drawn OUTSIDE the dot, 2px on the
+ * 8px dot and 1px on the 4px one. `ring-*` is a box-shadow, so it draws there
+ * too and never changes the dot's footprint.
+ */
+const statusIndicatorVariants = cva(
+  "relative inline-block shrink-0 rounded-full ring-background",
+  {
+    variants: {
+      status: {
+        online: "bg-success",
+        away: "bg-warning",
+        busy: "bg-destructive",
+        offline: "bg-muted",
+      },
+      size: {
+        "8": "size-2 ring-2",
+        "4": "size-1 ring-1",
+      },
+    },
+    defaultVariants: {
+      status: "online",
+      size: "8",
+    },
+  }
+)
+
+/** The accessible name of each status, per script. Colour alone can't carry it. */
+const STATUS_LABELS = {
+  en: { online: "Online", away: "Away", busy: "Busy", offline: "Offline" },
+  ar: { online: "متصل", away: "بعيد", busy: "مشغول", offline: "غير متصل" },
+} as const
+
+type Status = keyof typeof STATUS_LABELS.en
+type Size = "8" | "4"
+
+export interface StatusIndicatorProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /** Figma `Type`. */
+  status?: Status
+  /** Figma `Size`, in px: `8`, or `4` for the smallest avatar. */
+  size?: Size
+  /**
+   * Accessible name — read by screen readers, never shown. Defaults to the
+   * status in the page's language: "Online" / "متصل", "Away" / "بعيد",
+   * "Busy" / "مشغول", "Offline" / "غير متصل". Pass `""` to silence the dot,
+   * for when text beside it already says the status.
+   */
+  label?: string
+}
+
+const StatusIndicator = React.forwardRef<HTMLSpanElement, StatusIndicatorProps>(
+  ({ className, status = "online", size = "8", label, ...props }, ref) => (
+    <span
+      ref={ref}
+      className={cn(statusIndicatorVariants({ status, size }), className)}
+      {...props}
+    >
+      {/*
+       * Without `label`, the name comes from these two hidden runs, and CSS
+       * keeps the one that matches the nearest `lang` — the same way Badge's
+       * close button names itself. It is right in the server HTML before any
+       * script runs, and follows a live language change.
+       */}
+      {label === "" ? null : label ? (
+        <span className="sr-only">{label}</span>
+      ) : (
+        <>
+          <span className="sr-only [&:lang(ar)]:hidden">{STATUS_LABELS.en[status]}</span>
+          <span className="sr-only hidden [&:lang(ar)]:inline">{STATUS_LABELS.ar[status]}</span>
+        </>
+      )}
+    </span>
+  )
+)
+StatusIndicator.displayName = "StatusIndicator"
+
+export { StatusIndicator, statusIndicatorVariants, STATUS_LABELS }

package/registry/ui/switch/index.ts

@@ -1 +1 @@
-export { Switch, type SwitchProps } from "./switch"
+export { Switch, switchVariants, type SwitchProps } from "./switch"