@smicolon/fasla-ui 0.2.3 → 0.3.0

package/registry/ui/checkbox/checkbox.tsx

@@ -1,4 +1,5 @@
 import * as React from "react"
+import { CheckIcon, MinusIcon } from "lucide-react"
 import { cn } from "../../../src/lib/utils"
 
 export interface CheckboxProps
@@ -48,34 +49,16 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
             className
           )}
         >
-          <svg
-            width="12"
-            height="12"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="3"
-            strokeLinecap="round"
-            strokeLinejoin="round"
+          <CheckIcon
+            size={12}
+            strokeWidth={1.5}
             className={cn(
               "opacity-0 peer-checked:opacity-100",
               indeterminate ? "hidden" : "block"
             )}
-          >
-            <polyline points="20 6 9 17 4 12" />
-          </svg>
+          />
           {indeterminate && (
-            <svg
-              width="12"
-              height="12"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="3"
-              strokeLinecap="round"
-            >
-              <line x1="5" y1="12" x2="19" y2="12" />
-            </svg>
+            <MinusIcon size={12} strokeWidth={1.5} />
           )}
         </div>
       </div>
@@ -85,15 +68,19 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
       return checkbox
     }
 
+    // The label takes the type ramp's leading (24px Arabic, 20px English), so a
+    // wrapped label never overlaps. The box sits in a box one line tall, as
+    // Radio's control does, so it stays centred on the first line.
     return (
       <div className="flex items-start gap-3">
-        {checkbox}
-        <div className="grid gap-1 leading-none">
+        {/* One label line tall, as Radio's control; falls back to English's 20 / 14 without the Fasla preset */}
+        <div className="flex h-[calc(var(--leading-sm,calc(20/14))*0.875rem)] shrink-0 items-center">{checkbox}</div>
+        <div className="grid gap-1">
           {label && (
             <label
               htmlFor={inputId}
               className={cn(
-                "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+                "text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
                 error && "text-destructive"
               )}
             >

package/registry/ui/combobox/combobox.test.tsx

@@ -0,0 +1,43 @@
+import { describe, it, expect } from "vitest"
+import { render, screen, fireEvent } from "@testing-library/react"
+import { Combobox } from "./combobox"
+
+const options = [
+  { value: "riyadh", label: "Riyadh" },
+  { value: "jeddah", label: "Jeddah" },
+]
+
+describe("Combobox text", () => {
+  it("keeps its English defaults when no text props are passed", () => {
+    render(<Combobox options={options} value={["riyadh"]} multiple loading />)
+
+    expect(screen.getByRole("button", { name: "Open" })).toBeTruthy()
+    expect(screen.getByRole("button", { name: "Remove Riyadh" })).toBeTruthy()
+
+    fireEvent.click(screen.getByRole("button", { name: "Open" }))
+    expect(screen.getByRole("button", { name: "Close" })).toBeTruthy()
+    expect(screen.getByText("Loading...")).toBeTruthy()
+  })
+
+  it("uses the loading, toggle and remove text it is given", () => {
+    render(
+      <Combobox
+        options={options}
+        value={["riyadh"]}
+        multiple
+        loading
+        loadingText="جارٍ التحميل"
+        openLabel="فتح القائمة"
+        closeLabel="إغلاق القائمة"
+        removeLabel={(label) => `إزالة ${label}`}
+      />
+    )
+
+    expect(screen.getByRole("button", { name: "فتح القائمة" })).toBeTruthy()
+    expect(screen.getByRole("button", { name: "إزالة Riyadh" })).toBeTruthy()
+
+    fireEvent.click(screen.getByRole("button", { name: "فتح القائمة" }))
+    expect(screen.getByRole("button", { name: "إغلاق القائمة" })).toBeTruthy()
+    expect(screen.getByText("جارٍ التحميل")).toBeTruthy()
+  })
+})

package/registry/ui/combobox/combobox.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react"
+import { CheckIcon, ChevronDownIcon, PlusIcon, XIcon } from "lucide-react"
 import { cn } from "../../../src/lib/utils"
 
 export interface ComboboxOption {
@@ -36,6 +37,14 @@ export interface ComboboxProps {
   className?: string
   /** Loading state */
   loading?: boolean
+  /** Text shown while loading */
+  loadingText?: string
+  /** Accessible name of the toggle button while the list is closed */
+  openLabel?: string
+  /** Accessible name of the toggle button while the list is open */
+  closeLabel?: string
+  /** Accessible name of a selected chip’s remove button, given the option label */
+  removeLabel?: (label: string) => string
 }
 
 export function Combobox({
@@ -52,6 +61,10 @@ export function Combobox({
   disabled = false,
   className,
   loading = false,
+  loadingText = "Loading...",
+  openLabel = "Open",
+  closeLabel = "Close",
+  removeLabel = (label) => `Remove ${label}`,
 }: ComboboxProps) {
   const [open, setOpen] = React.useState(false)
   const [search, setSearch] = React.useState("")
@@ -224,22 +237,14 @@ export function Combobox({
           type="button"
           onClick={() => !disabled && setOpen(!open)}
           disabled={disabled}
-          className="ml-2 shrink-0 text-muted-foreground hover:text-foreground"
-          aria-label={open ? "Close" : "Open"}
+          className="ms-2 shrink-0 text-muted-foreground hover:text-foreground"
+          aria-label={open ? closeLabel : openLabel}
         >
-          <svg
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            className={cn("transition-transform", open && "rotate-180")}
-          >
-            <polyline points="6 9 12 15 18 9" />
-          </svg>
+          <ChevronDownIcon
+            size={16}
+            strokeWidth={1.5}
+            className={cn("transition-transform motion-reduce:transition-none", open && "rotate-180")}
+          />
         </button>
       </div>
 
@@ -268,7 +273,7 @@ export function Combobox({
           >
             {loading ? (
               <li className="px-2 py-4 text-center text-sm text-muted-foreground">
-                Loading...
+                {loadingText}
               </li>
             ) : filteredOptions.length === 0 && !showCreate ? (
               <li className="px-2 py-4 text-center text-sm text-muted-foreground">
@@ -297,39 +302,20 @@ export function Combobox({
                       {multiple && (
                         <span
                           className={cn(
-                            "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border",
+                            "me-2 flex h-4 w-4 items-center justify-center rounded-sm border",
                             isSelected
                               ? "border-primary bg-primary text-primary-foreground"
                               : "border-input"
                           )}
                         >
                           {isSelected && (
-                            <svg
-                              width="12"
-                              height="12"
-                              viewBox="0 0 24 24"
-                              fill="none"
-                              stroke="currentColor"
-                              strokeWidth="3"
-                            >
-                              <polyline points="20 6 9 17 4 12" />
-                            </svg>
+                            <CheckIcon size={12} strokeWidth={1.5} />
                           )}
                         </span>
                       )}
                       <span className="flex-1">{option.label}</span>
                       {!multiple && isSelected && (
-                        <svg
-                          width="16"
-                          height="16"
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          stroke="currentColor"
-                          strokeWidth="2"
-                          className="ml-2 text-primary"
-                        >
-                          <polyline points="20 6 9 17 4 12" />
-                        </svg>
+                        <CheckIcon size={16} strokeWidth={1.5} className="ms-2 text-primary" />
                       )}
                     </li>
                   )
@@ -347,18 +333,7 @@ export function Combobox({
                         "bg-accent text-accent-foreground"
                     )}
                   >
-                    <svg
-                      width="16"
-                      height="16"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      className="mr-2"
-                    >
-                      <line x1="12" y1="5" x2="12" y2="19" />
-                      <line x1="5" y1="12" x2="19" y2="12" />
-                    </svg>
+                    <PlusIcon size={16} strokeWidth={1.5} className="me-2" />
                     {createText} "{search}"
                   </li>
                 )}
@@ -393,12 +368,9 @@ export function Combobox({
                     handleSelect(val)
                   }}
                   className="hover:text-destructive"
-                  aria-label={`Remove ${option?.label || val}`}
+                  aria-label={removeLabel(option?.label || val)}
                 >
-                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                    <line x1="18" y1="6" x2="6" y2="18" />
-                    <line x1="6" y1="6" x2="18" y2="18" />
-                  </svg>
+                  <XIcon size={12} strokeWidth={1.5} />
                 </button>
               </span>
             )

package/registry/ui/input/input.test.tsx

@@ -38,7 +38,7 @@ describe("Input", () => {
       />
     )
     expect(screen.getByTestId("start-icon")).toBeInTheDocument()
-    expect(screen.getByTestId("input")).toHaveClass("pl-10")
+    expect(screen.getByTestId("input")).toHaveClass("ps-10")
   })
 
   it("renders with end icon", () => {
@@ -49,7 +49,7 @@ describe("Input", () => {
       />
     )
     expect(screen.getByTestId("end-icon")).toBeInTheDocument()
-    expect(screen.getByTestId("input")).toHaveClass("pr-10")
+    expect(screen.getByTestId("input")).toHaveClass("pe-10")
   })
 
   it("handles onChange", () => {

package/registry/ui/input/input.tsx

@@ -37,7 +37,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       return (
         <div className="relative">
           {startIcon && (
-            <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground">
+            <div className="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3 text-muted-foreground">
               {startIcon}
             </div>
           )}
@@ -45,15 +45,15 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             type={type}
             className={cn(
               inputVariants({ variant, inputSize }),
-              startIcon && "pl-10",
-              endIcon && "pr-10",
+              startIcon && "ps-10",
+              endIcon && "pe-10",
               className
             )}
             ref={ref}
             {...props}
           />
           {endIcon && (
-            <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground">
+            <div className="pointer-events-none absolute inset-y-0 end-0 flex items-center pe-3 text-muted-foreground">
               {endIcon}
             </div>
           )}

package/registry/ui/radio/index.ts

@@ -0,0 +1 @@
+export { Radio, radioVariants, type RadioProps } from "./radio"

package/registry/ui/radio/radio.test.tsx

@@ -0,0 +1,248 @@
+import { describe, it, expect, vi } from "vitest"
+import { render, screen, fireEvent } from "@testing-library/react"
+import { Radio } from "./radio"
+
+/**
+ * What these tests can and cannot prove.
+ *
+ * jsdom has no layout engine and no style resolution: it does not match
+ * `:hover`, `:focus-visible`, `:has()` or `:checked` selectors, it does not
+ * apply a stylesheet, and every `getBoundingClientRect` is zero. So the
+ * interaction tests below assert **class presence only** — that the component
+ * emits the right utility on the right element. They do NOT prove the rule was
+ * generated by Tailwind, that it resolves to the right token, or that anything
+ * is actually painted.
+ *
+ * Rendered proof lives outside this file:
+ *  - hover/focus actually painting, the halo geometry (control + 8, centred),
+ *    the 2px-gap/2px-ring focus shadow, and that no Interaction state shifts
+ *    layout — all verified in a real browser against Storybook.
+ *  - the label leading and control alignment across scripts — same.
+ * Treat a green run here as "the contract is wired", not "it looks right".
+ */
+
+/** label ▸ input ▸ focusRing ▸ band ▸ [halo?, control ▸ dot] */
+const parts = (input: HTMLElement) => {
+  const root = input.closest("label") as HTMLElement
+  const control = root.querySelector("[data-slot=control]") as HTMLElement
+  const band = control.parentElement as HTMLElement
+  const siblings = [...(input.parentElement?.children ?? [])] as HTMLElement[]
+  const focusRing =
+    siblings.find((el) => el.className.includes("peer-focus-visible:opacity-100")) ?? null
+  return {
+    root,
+    band,
+    control,
+    focusRing,
+    dot: control.firstElementChild as HTMLElement,
+    halo: band.children.length > 1 ? (band.firstElementChild as HTMLElement) : null,
+  }
+}
+
+const radio = () => screen.getByRole("radio")
+
+describe("Radio", () => {
+  it("renders a radio input", () => {
+    render(<Radio aria-label="Option A" />)
+    expect(radio()).toBeInTheDocument()
+  })
+
+  it("is unchecked by default and reflects defaultChecked", () => {
+    const { rerender } = render(<Radio aria-label="Option A" />)
+    expect(radio()).not.toBeChecked()
+
+    rerender(<Radio aria-label="Option A" defaultChecked />)
+    expect(radio()).toBeChecked()
+  })
+
+  it("renders with different sizes", () => {
+    const { rerender } = render(<Radio size="sm" label="Small" />)
+    expect(parts(radio()).control).toHaveClass("size-4")
+
+    rerender(<Radio size="md" label="Medium" />)
+    expect(parts(radio()).control).toHaveClass("size-5")
+
+    rerender(<Radio size="lg" label="Large" />)
+    expect(parts(radio()).control).toHaveClass("size-6")
+  })
+
+  it("sizes the hover halo to the control plus 8px", () => {
+    // Geometry is asserted as the class Figma's "control + 8" maps to; the
+    // rendered box was measured in a browser, not here.
+    const cases = [
+      ["sm", "size-4", "size-6"],
+      ["md", "size-5", "size-7"],
+      ["lg", "size-6", "size-8"],
+    ] as const
+    for (const [size, control, halo] of cases) {
+      const { unmount } = render(<Radio size={size} label="Option" />)
+      const p = parts(radio())
+      expect(p.control).toHaveClass(control)
+      expect(p.halo).toHaveClass(halo)
+      unmount()
+    }
+  })
+
+  it("paints the dot with the primary token", () => {
+    // Figma paints the dot with theme/primary, the strong neutral. Guarding the
+    // token choice, not the colour: Figma gives primary and foreground the same
+    // value in both modes, so this fails only if the dot is repointed at
+    // something semantically different.
+    render(<Radio label="Option" defaultChecked />)
+    const { dot } = parts(radio())
+    expect(dot).toHaveClass("bg-primary")
+  })
+
+  it("lets the type ramp own the label leading", () => {
+    // The ramp makes `text-sm` direction-aware (20px English, 24px Arabic). A
+    // hardcoded leading or a fixed line height would override it and clip
+    // Arabic, which is the defect this component set had in Figma.
+    render(<Radio label="Option" description="Detail" size="sm" />)
+    const label = screen.getByText("Option")
+    const description = screen.getByText("Detail")
+    for (const el of [label, description]) {
+      expect(el).toHaveClass("text-sm")
+      expect(el.className).not.toMatch(/\bleading-/)
+      expect(el.className).not.toMatch(/\bh-\d/)
+    }
+  })
+
+  it("puts hover and focus on the control for the default variant", () => {
+    // Class presence only — jsdom matches neither :hover nor :focus-visible.
+    render(<Radio label="Option" />)
+    const { root, halo, focusRing } = parts(radio())
+    expect(halo).not.toBeNull()
+    expect(halo).toHaveClass("bg-accent", "group-hover:opacity-100")
+    // A circular ring around the control, sized to it — Figma's ellipse node.
+    expect(focusRing).not.toBeNull()
+    const ring = focusRing!.firstElementChild as HTMLElement
+    expect(ring).toHaveClass("rounded-full", "ring-2", "ring-ring", "ring-offset-2")
+    expect(ring).toHaveClass("size-5") // matches the md control
+    expect(root).not.toHaveClass("hover:bg-accent")
+  })
+
+  it("puts hover and focus on the card for the layout variant", () => {
+    // Class presence only — see the note at the top of this file.
+    render(<Radio variant="layout" label="Option" />)
+    const { root, halo, focusRing } = parts(radio())
+    expect(halo).toBeNull() // the card fills instead of showing a halo
+    expect(root).toHaveClass("hover:bg-accent")
+    // A rounded rectangle around the whole card — Figma's −1,−1 node.
+    expect(focusRing).not.toBeNull()
+    expect(focusRing).toHaveClass("-inset-[2px]", "ring-2", "ring-ring")
+    expect(focusRing!.className).toMatch(/rounded-\[calc\(var\(--radius\)-1px\)\]/)
+  })
+
+  it("drives hover and focus without a has-[] utility", () => {
+    // `:has()` resolves in a browser but is invisible to the pseudo-state
+    // renderer the Storybook states grid uses, so a `has-[:hover]` or
+    // `has-[:focus-visible]` here would make the grid silently stop matching the
+    // component. Both are `peer`- or `group`-driven instead.
+    //
+    // `has-[:disabled]` is deliberately still allowed: `disabled` is a real
+    // attribute, not a simulated pseudo-state, so it renders statically anyway.
+    for (const variant of ["default", "layout"] as const) {
+      const { unmount } = render(<Radio variant={variant} label="Option" />)
+      const html = (radio().closest("label") as HTMLElement).outerHTML
+      expect(html).not.toMatch(/has-\[:hover\]/)
+      expect(html).not.toMatch(/has-\[:focus-visible\]/)
+      expect(html).toMatch(/has-\[:disabled\]/)
+      unmount()
+    }
+  })
+
+  it("renders the layout variant with a border", () => {
+    const { rerender } = render(<Radio label="Default" data-testid="radio" />)
+    expect(screen.getByTestId("radio").closest("label")).not.toHaveClass("border")
+
+    rerender(<Radio variant="layout" label="Layout" data-testid="radio" />)
+    expect(screen.getByTestId("radio").closest("label")).toHaveClass("border")
+  })
+
+  it("defaults to the default variant when variant is omitted", () => {
+    render(<Radio label="Option" data-testid="radio" />)
+    expect(screen.getByTestId("radio").closest("label")).not.toHaveClass(
+      "border"
+    )
+  })
+
+  it("rejects null as a variant", () => {
+    // @ts-expect-error `variant` is declared on RadioProps rather than
+    // inherited from CVA's VariantProps, which widens every variant with
+    // `| null` and shows a meaningless third option in the Storybook control.
+    render(<Radio label="Option" variant={null} data-testid="radio" />)
+    expect(screen.getByTestId("radio")).toBeInTheDocument()
+  })
+
+  it("associates the label so clicking it selects the radio", () => {
+    render(<Radio label="Express delivery" />)
+    fireEvent.click(screen.getByText("Express delivery"))
+    expect(radio()).toBeChecked()
+  })
+
+  it("links the description via aria-describedby", () => {
+    render(<Radio label="Express" description="Arrives tomorrow" />)
+    expect(radio()).toHaveAccessibleDescription("Arrives tomorrow")
+  })
+
+  it("keeps the control and its decoration out of the accessibility tree", () => {
+    render(<Radio label="Option" />)
+    expect(parts(radio()).band).toHaveAttribute("aria-hidden", "true")
+  })
+
+  it("renders no text column when label and description are omitted", () => {
+    render(<Radio aria-label="Bare" />)
+    // input, focus ring, control band — and no text column.
+    expect(radio().parentElement?.childElementCount).toBe(3)
+    expect(screen.queryByText(/./)).toBeNull()
+  })
+
+  it("selects only one radio per name group", () => {
+    render(
+      <>
+        <Radio name="plan" value="a" label="Plan A" />
+        <Radio name="plan" value="b" label="Plan B" />
+      </>
+    )
+    const radios = screen.getAllByRole("radio")
+    const a = radios[0]!
+    const b = radios[1]!
+
+    fireEvent.click(a)
+    expect(a).toBeChecked()
+    expect(b).not.toBeChecked()
+
+    fireEvent.click(b)
+    expect(a).not.toBeChecked()
+    expect(b).toBeChecked()
+  })
+
+  it("handles onChange", () => {
+    const handleChange = vi.fn()
+    render(<Radio label="Option" onChange={handleChange} />)
+
+    fireEvent.click(radio())
+    expect(handleChange).toHaveBeenCalled()
+  })
+
+  it("is disabled when disabled prop is true", () => {
+    render(<Radio label="Option" disabled />)
+    expect(radio()).toBeDisabled()
+    expect(radio().closest("label")).toHaveClass(
+      "has-[:disabled]:opacity-50",
+      // also kills hover, so a disabled card cannot fill
+      "has-[:disabled]:pointer-events-none"
+    )
+  })
+
+  it("applies custom className to the root", () => {
+    render(<Radio label="Option" className="custom-class" />)
+    expect(radio().closest("label")).toHaveClass("custom-class")
+  })
+
+  it("forwards ref correctly", () => {
+    const ref = vi.fn()
+    render(<Radio aria-label="Option" ref={ref} />)
+    expect(ref).toHaveBeenCalled()
+  })
+})