@smicolon/fasla-ui 0.6.0 → 0.8.0

package/registry/ui/fasla-logo/fasla-logo.tsx

@@ -0,0 +1,101 @@
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+/**
+ * Built from the Figma `Fasla Logo` set (41668:149234): the lockup in each
+ * direction and the icon on its own, with the paths exported from Figma.
+ *
+ * - `lockup`, English: the red mark, then "fasla" (273×88).
+ * - `lockup`, Arabic: the red mark on the right, where Arabic starts, then
+ *   «فاصلة» (307×88).
+ * - `icon`: the red mark alone (88×88), the same in both directions.
+ *
+ * The mark is brand artwork, so its red and white are written out; the
+ * wordmark is `primary`, as Figma binds it, so it reads in dark mode too. The
+ * logo never mirrors: the Arabic lockup is its own drawing.
+ */
+
+/** The red mark's brackets and comma, drawn in an 88×88 square whose start is `x`. */
+function Mark({ x = 0 }: { x?: number }) {
+  return (
+    <g transform={x ? `translate(${x} 0)` : undefined}>
+      <rect width="88" height="88" fill="#E40017" />
+      <path d="M76 73H58V65H68V23H58V15H76V73Z" fill="white" />
+      <path d="M30 23H20V65H30V73H12V15H30V23Z" fill="white" />
+      <path d="M51 58H37V30L51 44V58Z" fill="white" />
+    </g>
+  )
+}
+
+const LTR_WORDMARK =
+  "M196.634 30.5742C203.412 30.4298 210.878 32.6908 213.588 39.5322C214.177 41.0191 214.303 42.2818 214.406 43.8477C211.04 43.8989 207.512 43.8524 204.135 43.8535C203.929 42.4601 203.545 41.408 202.534 40.3594C200.087 37.8217 194.538 37.7436 191.968 40.1113C190.584 41.3861 190.441 44.2284 192.098 45.3975C194.879 47.3579 198.886 47.4566 202.106 48.3232C205.747 49.0768 210.011 50.0671 212.756 52.7295C216.841 56.7499 216.071 64.1421 212.089 67.9707C208.009 71.8932 202.753 72.978 197.284 73C189.937 72.9791 182.116 70.5469 179.629 62.8799C179.28 61.8027 179.129 60.8424 178.956 59.7334C182.502 59.6629 186.301 59.7277 189.867 59.7266C190.762 63.9932 194.045 65.2973 198.114 65.1455C199.99 65.0755 202.018 64.6845 203.366 63.2764C204.914 61.6582 204.483 58.9163 202.541 57.8359C201.108 57.001 199.387 56.6529 197.776 56.3193C190.255 54.7622 180.556 53.6376 180.02 43.9756C179.644 37.2028 184.38 32.8789 190.68 31.3086C192.774 30.7868 194.507 30.6501 196.634 30.5742ZM157.333 30.5703C162.41 30.549 167.796 31.6619 171.505 35.3613C173.118 36.9524 174.243 38.9683 174.746 41.1729C175.161 43.0133 175.087 44.9985 175.085 46.8838L175.082 52.4316L175.077 72.1738L163.926 72.1748C163.922 70.2553 164.004 67.7736 163.882 65.9121C162.258 68.0006 161.672 69.359 159.206 70.7783C152.585 74.5875 143.45 73.1452 139.369 66.502C138.496 64.9491 137.99 63.2181 137.89 61.4414C137.425 53.8564 142.509 49.9601 149.525 48.584C151.995 48.0996 154.259 48.0109 156.764 47.8564L163.919 47.4258C163.944 45.5839 164.11 43.42 163.112 41.7559C161.14 38.4691 155.479 38.4581 152.492 40.1973C150.998 41.067 150.279 42.3131 149.883 43.9785H139.682C140.585 34.3133 148.384 30.8567 157.185 30.5723C157.235 30.5712 157.284 30.5705 157.333 30.5703ZM254.578 30.5723C259.741 30.5991 265.018 31.5544 268.833 35.3408C270.442 36.9179 271.567 38.9179 272.079 41.1074C272.532 43.0734 272.44 45.1032 272.438 47.1123L272.431 52.7236L272.432 72.1729L261.268 72.1719C261.271 70.0964 261.301 67.9453 261.247 65.8779C259.68 68.0816 258.693 69.6376 256.218 70.9785C249.609 74.5596 240.407 72.9905 236.591 66.2705C234.365 61.9955 234.688 56.0819 238.3 52.6357C242.593 48.5408 248.492 48.2025 254.059 47.8604L261.266 47.4199C261.277 45.5944 261.466 43.4957 260.505 41.8311C258.578 38.4956 252.962 38.4572 249.941 40.1367C248.381 41.004 247.658 42.2758 247.219 43.9814L237.009 43.9766C237.31 41.4006 237.789 39.3544 239.326 37.1973C242.907 32.1703 248.753 30.7586 254.578 30.5723ZM137.175 25.3662H130.207C129.011 26.6231 129.096 28.7395 129.106 31.4004L137.233 31.4053V39.7773H129.38V63.5244L129.385 69.4043C129.386 69.8811 129.418 71.6917 129.336 72.0713C129.1 72.2492 128.994 72.1797 128.623 72.1768L118.216 72.1729L118.215 39.7803L112.648 39.7773C112.611 37.013 112.646 34.171 112.646 31.4004L118.216 31.3975C118.201 27.5543 117.935 23.1765 120.625 20.0488C122.881 17.4256 126.405 16.7805 129.686 16.5303C130.225 16.4526 130.954 16.4318 131.761 16.4463L131.787 16.4414H143.468L137.175 25.3662ZM230.773 25.1318L230.786 25.1328V25.1445L230.79 25.1484V33.8857H230.787L230.789 53.2061C230.789 59.4383 230.888 65.9646 230.773 72.1768L219.622 72.1729L219.619 36.5146L219.622 33.8857H219.619V14L230.773 25.1318ZM158.33 54.7002C155.574 54.8764 151.923 54.7866 149.927 57.0029C148.398 58.7018 148.585 61.7072 150.339 63.208C150.443 63.2971 150.55 63.3842 150.659 63.4678C154.367 65.8697 160.437 64.7589 162.84 61.0029C164.108 59.0209 163.974 56.8259 163.917 54.5674C163.916 54.5349 163.861 54.4223 163.842 54.3887L163.623 54.3652L158.33 54.7002ZM260.975 54.3662L255.767 54.6934C253.014 54.868 249.253 54.7772 247.287 56.9971C245.666 58.8262 245.963 61.7568 247.827 63.3262L247.907 63.3926C248.71 63.9434 249.355 64.2676 250.316 64.4727C256.004 65.6862 261.846 62.3759 261.287 56.0645C261.248 55.6276 261.425 54.6144 261.099 54.3574L260.975 54.3662Z"
+
+const RTL_WORDMARK =
+  "M131.298 20.6455V35.5273L131.3 35.5293C131.3 36.5456 131.299 37.5627 131.298 38.5801H131.297C131.289 45.3985 131.252 52.2344 131.253 58.9941H137.531L138.048 58.9883V58.9873L138.265 58.9863L138.431 58.9854V58.9863L157.294 58.957L157.293 58.9541C157.495 58.9557 157.697 58.9548 157.898 58.9561L159.976 58.9531V58.9629C160.828 58.9621 161.681 58.9584 162.533 58.9502C160.013 50.4131 162.172 40.1361 171.714 37.5059C175.66 36.4186 179.375 36.6508 183.413 36.6553L192.88 36.6602L192.878 68.0596H159.976V68.1191H138.048V68.0947L137.78 68.1016C135.903 68.0417 133.77 68.0909 131.877 68.0908H120.625L120.622 38.5801H120.62V10L131.298 20.6455ZM54.8379 20.6455V35.5273C54.8388 35.5279 54.8399 35.5288 54.8408 35.5293C54.8436 43.3454 54.7935 51.2026 54.7939 58.96H55.1553L61.1514 58.9668L62.0664 58.957C62.0902 59.0182 62.111 59.0815 62.1338 59.1445C62.1107 59.0808 62.0904 59.0168 62.0664 58.9551L68.8008 58.96L68.8037 36.6543L79.4824 36.6592V45.3662C83.5518 40.4714 85.9122 37.5494 92.7549 36.7686C103.12 35.586 110.325 41.7308 111.102 52.1318C111.251 54.1275 111.193 56.1774 111.192 58.2129L111.188 68.0576H61.8779L61.876 68.0605H61.8428C61.8261 68.0712 61.8101 68.0821 61.793 68.0908L61.3213 68.1016C59.4445 68.0417 57.3098 68.0909 55.417 68.0908H44.166V68.0596H38.0703C39.078 67.2205 39.0296 63.7966 38.9814 62.5078C38.9358 61.2859 38.6817 60.0837 38.2275 58.958L44.1641 58.96L44.1621 38.5801H44.1602V10L54.8379 20.6455ZM21.3086 36.6523L31.3115 36.6592L31.3105 58.96L37.3066 58.9648L38.2266 58.958C38.6806 60.0835 38.9348 61.2851 38.9805 62.5068C39.0287 63.7953 39.0772 67.2205 38.0693 68.0596L37.6172 68.0703C32.9592 67.9653 28.1961 68.1352 23.4902 68.0615C16.9954 67.977 9.07232 68.9701 3.97754 63.917C-1.44118 58.5422 -1.2594 46.354 4.13379 40.9795C8.87558 36.2544 15.1989 36.651 21.3086 36.6523ZM182.2 45.7871C181.32 45.7834 177.607 45.7128 176.9 45.8281C175.714 45.9718 174.189 46.2471 173.453 47.3018C172.034 49.3362 172.153 52.5215 172.396 54.8936C172.759 58.4366 174.683 58.8561 177.727 58.9238C179.176 58.9979 180.738 58.9641 182.197 58.958L182.2 45.7871ZM20.6377 45.7871C19.8615 45.7834 15.9865 45.7207 15.3984 45.8281C11.5517 46.3064 10.924 48.1185 10.7256 51.8896C10.6222 53.8554 10.6824 56.6871 12.2646 58.0771C13.1998 58.8488 14.9892 58.886 16.167 58.9561C17.635 58.9574 19.1686 58.9798 20.6318 58.959L20.6377 45.7871ZM97.4707 46.6904C96.235 45.8909 94.2556 45.6461 92.8203 45.8262C87.4907 46.4318 82.7359 50.8294 79.5059 54.875L79.4844 54.9023L79.4805 58.9629L87.3027 58.96L100.465 58.957C100.478 55.0814 101.159 49.0761 97.4707 46.6904ZM17.543 30.5234H9.72559V22.6592H17.543V30.5234ZM27.2676 30.5234H19.4492V22.6592H27.2676V30.5234ZM182.856 30.5234H175.039V22.6592H182.856V30.5234Z"
+
+/** Where the Arabic lockup's mark starts: at its right end, after the wordmark. */
+const RTL_MARK_X = 218.456
+
+export interface FaslaLogoProps extends React.SVGProps<SVGSVGElement> {
+  /** Figma `Logo Icon Only`: the full lockup, or the red mark alone. */
+  variant?: "lockup" | "icon"
+  /**
+   * Figma `Direction`: the English lockup ("fasla") or the Arabic one
+   * («فاصلة»). `auto` follows the page's `dir`. The icon is the same in both.
+   */
+  direction?: "auto" | "ltr" | "rtl"
+  /** The accessible name. Pass "" when text beside the logo already names it. */
+  title?: string
+}
+
+/**
+ * The Fasla logo. It is 44px tall by default and keeps its proportions; set
+ * the height with `className` (`h-6`, `h-8`). The wordmark is the text colour,
+ * `primary` by default: on a dark band pass `text-foreground-inverse`.
+ */
+export function FaslaLogo({ variant = "lockup", direction = "auto", title = "Fasla", className, ...props }: FaslaLogoProps) {
+  const svg = (dir: "ltr" | "rtl", extra?: string) => {
+    const icon = variant === "icon"
+    const width = icon ? 88 : dir === "rtl" ? 307 : 273
+    return (
+      <svg
+        key={dir}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox={`0 0 ${width} 88`}
+        fill="none"
+        data-slot="fasla-logo"
+        data-variant={variant}
+        data-direction={dir}
+        role={title ? "img" : undefined}
+        aria-label={title || undefined}
+        aria-hidden={title ? undefined : true}
+        focusable="false"
+        className={cn("h-11 w-auto shrink-0 text-primary", extra, className)}
+        {...props}
+      >
+        {icon ? (
+          <Mark />
+        ) : dir === "rtl" ? (
+          <>
+            <Mark x={RTL_MARK_X} />
+            <path d={RTL_WORDMARK} fill="currentColor" />
+          </>
+        ) : (
+          <>
+            <Mark />
+            <path d={LTR_WORDMARK} fill="currentColor" />
+          </>
+        )}
+      </svg>
+    )
+  }
+  if (variant === "icon" || direction === "ltr") return svg("ltr")
+  if (direction === "rtl") return svg("rtl")
+  // `auto`: both drawings, one shown by the nearest `dir` above.
+  return (
+    <>
+      {svg("ltr", "rtl:hidden")}
+      {svg("rtl", "hidden rtl:block")}
+    </>
+  )
+}

package/registry/ui/fasla-logo/index.ts

@@ -0,0 +1 @@
+export { FaslaLogo, type FaslaLogoProps } from "./fasla-logo"

package/registry/ui/input/index.ts

@@ -1 +1,10 @@
-export { Input, inputVariants, type InputProps } from "./input"
+export {
+  Input,
+  inputBoxVariants,
+  inputLabelRowClassName,
+  inputLabelClassName,
+  type InputProps,
+  type InputSize,
+  type InputRadius,
+  type InputStatus,
+} from "./input"

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

@@ -1,78 +1,285 @@
+import * as React from "react"
 import { describe, it, expect, vi } from "vitest"
 import { render, screen, fireEvent } from "@testing-library/react"
+import { Form } from "@base-ui/react/form"
 import { Input } from "./input"
 
+/**
+ * What these tests can and cannot prove.
+ *
+ * jsdom applies no stylesheet and has no layout, so the visual tests assert
+ * **class presence only** — that the right utility lands on the right element.
+ * Heights, padding, the tokens in Light and Dark and the RTL mirror were
+ * measured in a real browser. The wiring — labels, descriptions, errors,
+ * `aria-invalid`, disabled — is real DOM and is tested as such.
+ */
+
+const box = (container: HTMLElement) => container.querySelector("[data-slot=input-box]")!
+const root = (container: HTMLElement) => container.querySelector("[data-slot=input-field]")!
+
 describe("Input", () => {
-  it("renders with default props", () => {
-    render(<Input placeholder="Enter text" />)
-    expect(screen.getByPlaceholderText("Enter text")).toBeInTheDocument()
+  it("renders a text input with its placeholder", () => {
+    render(<Input placeholder="Type here" />)
+    expect(screen.getByPlaceholderText("Type here").tagName).toBe("INPUT")
+  })
+
+  it("defaults to md and Standard", () => {
+    const { container } = render(<Input />)
+    expect(box(container)).toHaveClass("h-9", "gap-1.5", "rounded-[var(--radius-md)]")
   })
 
-  it("renders with different variants", () => {
-    const { rerender } = render(<Input variant="default" data-testid="input" />)
-    expect(screen.getByTestId("input")).toHaveClass("border-input")
+  it.each([
+    ["xs", "h-7", "gap-0.5"],
+    ["sm", "h-8", "gap-1"],
+    ["md", "h-9", "gap-1.5"],
+    ["lg", "h-10", "gap-2"],
+  ] as const)("size %s is %s with %s", (size, height, gap) => {
+    const { container } = render(<Input size={size} />)
+    expect(box(container)).toHaveClass(height, gap, "px-3")
+    // No block padding: it would shrink the input under Cairo's 16px line.
+    expect(box(container).getAttribute("class")).not.toMatch(/(^|\s)py-/)
+  })
 
-    rerender(<Input variant="error" data-testid="input" />)
-    expect(screen.getByTestId("input")).toHaveClass("border-destructive")
+  it("sets the value at 16px below md and 14px from md up", () => {
+    render(<Input aria-label="Name" />)
+    expect(screen.getByRole("textbox")).toHaveClass("text-base", "md:text-sm")
+  })
 
-    rerender(<Input variant="success" data-testid="input" />)
-    expect(screen.getByTestId("input")).toHaveClass("border-success")
+  it("draws the helper labels at full strength", () => {
+    const { container } = render(<Input label="Bio" labelEnd="Optional" description="Help" descriptionEnd="0/160" />)
+    for (const slot of ["input-label-end", "input-description", "input-description-end"]) {
+      const node = container.querySelector(`[data-slot=${slot}]`)!
+      expect(node).toHaveClass("text-muted-foreground")
+      expect(node.getAttribute("class")).not.toMatch(/\/80/)
+    }
   })
 
-  it("renders with different sizes", () => {
-    const { rerender } = render(<Input inputSize="sm" data-testid="input" />)
-    expect(screen.getByTestId("input")).toHaveClass("h-8")
+  it("renders the Rounded radius", () => {
+    const { container } = render(<Input radius="rounded" />)
+    expect(box(container)).toHaveClass("rounded-full")
+  })
 
-    rerender(<Input inputSize="default" data-testid="input" />)
-    expect(screen.getByTestId("input")).toHaveClass("h-9")
+  it("draws the box from tokens only", () => {
+    const { container } = render(<Input />)
+    expect(box(container)).toHaveClass(
+      "border-input",
+      "bg-background",
+      "dark:bg-input/30",
+      "focus-within:border-ring",
+      "focus-within:ring-[3px]",
+      "focus-within:ring-ring/50"
+    )
+  })
 
-    rerender(<Input inputSize="lg" data-testid="input" />)
-    expect(screen.getByTestId("input")).toHaveClass("h-11")
+  it("links the label to the input", () => {
+    render(<Input label="Email" />)
+    expect(screen.getByLabelText("Email").tagName).toBe("INPUT")
   })
 
-  it("renders with start icon", () => {
+  it("keeps a caller's id, so an outside label still works", () => {
     render(
-      <Input
-        startIcon={<span data-testid="start-icon">🔍</span>}
-        data-testid="input"
-      />
+      <>
+        <label htmlFor="email">Email</label>
+        <Input id="email" />
+      </>
     )
-    expect(screen.getByTestId("start-icon")).toBeInTheDocument()
-    expect(screen.getByTestId("input")).toHaveClass("ps-10")
+    expect(screen.getByLabelText("Email")).toHaveAttribute("id", "email")
   })
 
-  it("renders with end icon", () => {
+  it("describes the input with every helper label", () => {
     render(
+      <Input label="Bio" labelEnd="Optional" description="Shown on your profile" descriptionEnd="0/160" />
+    )
+    const input = screen.getByLabelText("Bio")
+    expect(input).toHaveAccessibleDescription(/Optional/)
+    expect(input).toHaveAccessibleDescription(/Shown on your profile/)
+    expect(input).toHaveAccessibleDescription(/0\/160/)
+  })
+
+  it("puts the helper labels at the start and end of their rows", () => {
+    const { container } = render(
+      <Input label="Bio" labelEnd="Optional" description="Help" descriptionEnd="0/160" />
+    )
+    expect(container.querySelector("[data-slot=input-label-end]")).toHaveClass("ms-auto", "text-end")
+    expect(container.querySelector("[data-slot=input-description-end]")).toHaveClass("ms-auto", "text-end")
+  })
+
+  it("keeps each end note on its row's first line", () => {
+    const { container } = render(
+      <Input label="Bio" labelEnd="Optional" description="Help" descriptionEnd="0/160" />
+    )
+    // The label row shares the label's baseline; the helper row is top-aligned.
+    const labelRow = container.querySelector("[data-slot=input-label-row]")
+    const helperRow = container.querySelector("[data-slot=input-helper-row]")
+    expect(labelRow).toHaveClass("items-baseline")
+    expect(labelRow).not.toHaveClass("items-start")
+    expect(labelRow).not.toHaveClass("items-center")
+    expect(helperRow).toHaveClass("items-start")
+    expect(helperRow).not.toHaveClass("items-baseline")
+    expect(helperRow).not.toHaveClass("items-center")
+  })
+
+  it("renders no label or helper row when they are not used", () => {
+    const { container } = render(<Input aria-label="Search" />)
+    expect(container.querySelector("[data-slot=input-label-row]")).toBeNull()
+    expect(container.querySelector("[data-slot=input-helper-row]")).toBeNull()
+  })
+
+  it("marks the field invalid with `invalid`", () => {
+    const { container } = render(<Input label="Email" invalid />)
+    expect(screen.getByLabelText("Email")).toHaveAttribute("aria-invalid", "true")
+    expect(root(container)).toHaveAttribute("data-invalid")
+  })
+
+  it("marks the field invalid with `aria-invalid`", () => {
+    const { container } = render(<Input label="Email" aria-invalid />)
+    expect(screen.getByLabelText("Email")).toHaveAttribute("aria-invalid", "true")
+    expect(root(container)).toHaveAttribute("data-invalid")
+  })
+
+  it.each(["grammar", "spelling"] as const)("treats aria-invalid=%s as invalid", (value) => {
+    const { container } = render(<Input label="Bio" aria-invalid={value} error="Check the spelling" />)
+    expect(root(container)).toHaveAttribute("data-invalid")
+    expect(screen.getByLabelText("Bio")).toHaveAccessibleDescription("Check the spelling")
+  })
+
+  it.each(["grammar", "spelling"] as const)("keeps aria-invalid=%s on the input", (value) => {
+    render(<Input label="Bio" aria-invalid={value} />)
+    expect(screen.getByLabelText("Bio")).toHaveAttribute("aria-invalid", value)
+  })
+
+  it("keeps the caller's aria-invalid token alongside `invalid`", () => {
+    render(<Input label="Bio" invalid aria-invalid="spelling" />)
+    expect(screen.getByLabelText("Bio")).toHaveAttribute("aria-invalid", "spelling")
+  })
+
+  it("lets `invalid={false}` win over an aria-invalid token", () => {
+    const { container } = render(<Input label="Bio" invalid={false} aria-invalid="spelling" />)
+    expect(root(container)).not.toHaveAttribute("data-invalid")
+    expect(screen.getByLabelText("Bio")).not.toHaveAttribute("aria-invalid", "spelling")
+  })
+
+  it("treats aria-invalid=false as valid", () => {
+    const { container } = render(<Input label="Bio" aria-invalid="false" />)
+    expect(root(container)).not.toHaveAttribute("data-invalid")
+  })
+
+  it("turns the box, label and helpers destructive while invalid", () => {
+    const { container } = render(<Input label="Email" description="Help" invalid />)
+    expect(box(container)).toHaveClass("group-data-[invalid]/input:border-destructive")
+    expect(container.querySelector("[data-slot=input-label]")).toHaveClass(
+      "group-data-[invalid]/input:text-destructive"
+    )
+    expect(container.querySelector("[data-slot=input-description]")).toHaveClass(
+      "group-data-[invalid]/input:text-destructive"
+    )
+  })
+
+  it("shows the error in place of the description while invalid", () => {
+    const { rerender } = render(
+      <Input label="Email" description="We never share it" error="Enter a valid email" />
+    )
+    expect(screen.getByText("We never share it")).toBeInTheDocument()
+    expect(screen.queryByText("Enter a valid email")).toBeNull()
+
+    rerender(<Input label="Email" description="We never share it" error="Enter a valid email" invalid />)
+    expect(screen.queryByText("We never share it")).toBeNull()
+    expect(screen.getByLabelText("Email")).toHaveAccessibleDescription("Enter a valid email")
+  })
+
+  it("keeps the description when invalid with no error message", () => {
+    render(<Input label="Email" description="We never share it" invalid />)
+    expect(screen.getByLabelText("Email")).toHaveAccessibleDescription("We never share it")
+  })
+
+  it("shows Base UI's validation result after a submit", () => {
+    const { container } = render(
+      <Form>
+        <Input label="Name" name="name" required error="Enter your name" />
+        <button type="submit">Save</button>
+      </Form>
+    )
+    expect(root(container)).not.toHaveAttribute("data-invalid")
+    fireEvent.click(screen.getByRole("button", { name: "Save" }))
+    expect(root(container)).toHaveAttribute("data-invalid")
+    expect(screen.getByText("Enter your name")).toBeInTheDocument()
+  })
+
+  it("marks success with `status`", () => {
+    const { container } = render(<Input label="Coupon" status="success" />)
+    expect(root(container)).toHaveAttribute("data-status", "success")
+    expect(box(container)).toHaveClass("group-[:not([data-invalid])[data-status=success]]/input:border-success")
+    expect(container.querySelector("[data-slot=input-label]")).toHaveClass(
+      "group-[:not([data-invalid])[data-status=success]]/input:text-success"
+    )
+  })
+
+  it("dims the whole group and disables the input", () => {
+    const { container } = render(<Input label="Name" disabled />)
+    expect(screen.getByLabelText("Name")).toBeDisabled()
+    expect(root(container)).toHaveAttribute("data-disabled")
+    expect(root(container)).toHaveClass("data-[disabled]:opacity-50")
+  })
+
+  it("places the icons at the start and end of the box", () => {
+    const { container } = render(
       <Input
-        endIcon={<span data-testid="end-icon">✓</span>}
-        data-testid="input"
+        aria-label="Search"
+        startIcon={<svg data-testid="start" />}
+        endIcon={<svg data-testid="end" />}
       />
     )
-    expect(screen.getByTestId("end-icon")).toBeInTheDocument()
-    expect(screen.getByTestId("input")).toHaveClass("pe-10")
+    const children = Array.from(box(container).children)
+    expect(children[0]).toContainElement(screen.getByTestId("start"))
+    expect(children[1]).toBe(screen.getByRole("textbox"))
+    expect(children[2]).toContainElement(screen.getByTestId("end"))
   })
 
-  it("handles onChange", () => {
-    const handleChange = vi.fn()
-    render(<Input onChange={handleChange} data-testid="input" />)
+  it("focuses the input from a press on a decorative icon", () => {
+    render(<Input aria-label="Search" startIcon={<svg data-testid="start" />} />)
+    fireEvent.mouseDown(screen.getByTestId("start"))
+    expect(screen.getByRole("textbox")).toHaveFocus()
+  })
 
-    fireEvent.change(screen.getByTestId("input"), { target: { value: "test" } })
-    expect(handleChange).toHaveBeenCalled()
+  it("leaves a button in an icon slot alone", () => {
+    const onClick = vi.fn()
+    render(
+      <Input
+        aria-label="Password"
+        endIcon={
+          <button type="button" onClick={onClick}>
+            Show
+          </button>
+        }
+      />
+    )
+    fireEvent.mouseDown(screen.getByRole("button"))
+    expect(screen.getByRole("textbox", { name: "Password" })).not.toHaveFocus()
+    fireEvent.click(screen.getByRole("button"))
+    expect(onClick).toHaveBeenCalled()
   })
 
-  it("is disabled when disabled prop is true", () => {
-    render(<Input disabled data-testid="input" />)
-    expect(screen.getByTestId("input")).toBeDisabled()
+  it("uses only logical properties", () => {
+    const { container } = render(
+      <Input label="A" labelEnd="B" description="C" descriptionEnd="D" startIcon={<svg />} endIcon={<svg />} />
+    )
+    const classes = Array.from(container.querySelectorAll("[class]"))
+      .map((node) => node.getAttribute("class"))
+      .join(" ")
+    expect(classes).not.toMatch(/(^|\s)(pl|pr|ml|mr|left|right|text-left|text-right)-/)
   })
 
-  it("applies custom className", () => {
-    render(<Input className="custom-class" data-testid="input" />)
-    expect(screen.getByTestId("input")).toHaveClass("custom-class")
+  it("handles onChange", () => {
+    const onChange = vi.fn()
+    render(<Input aria-label="Name" onChange={onChange} />)
+    fireEvent.change(screen.getByRole("textbox"), { target: { value: "Layla" } })
+    expect(onChange).toHaveBeenCalled()
   })
 
-  it("forwards ref correctly", () => {
-    const ref = vi.fn()
-    render(<Input ref={ref} />)
-    expect(ref).toHaveBeenCalled()
+  it("puts className on the group and forwards the ref to the input", () => {
+    const ref = React.createRef<HTMLInputElement>()
+    const { container } = render(<Input ref={ref} className="max-w-sm" />)
+    expect(root(container)).toHaveClass("max-w-sm")
+    expect(ref.current?.tagName).toBe("INPUT")
   })
 })