@smicolon/fasla-ui 0.2.4 → 0.3.0

package/registry/ui/switch/switch.test.tsx

@@ -0,0 +1,323 @@
+import { describe, it, expect, vi } from "vitest"
+import { render, screen, fireEvent } from "@testing-library/react"
+import { Switch } from "./switch"
+
+/**
+ * What these tests can and cannot prove.
+ *
+ * jsdom has no layout engine and no style resolution: it matches neither
+ * `:checked` inside `:has()` nor `:focus-visible`, applies no stylesheet, and
+ * every `getBoundingClientRect` is zero. So the visual tests below assert
+ * **class presence only** — that the component emits the right utility on the
+ * right element. Track and thumb geometry, the thumb's travel in both
+ * directions, the focus ring and the tokens in Light and Dark were measured in
+ * a real browser.
+ * Treat a green run here as "the contract is wired", not "it looks right".
+ */
+
+/** label ▸ input ▸ [band ▸ track ▸ (thumb, focusRing), text] */
+const parts = (input: HTMLElement) => {
+  const root = input.closest("label") as HTMLElement
+  const track = root.querySelector("[data-slot=track]") as HTMLElement
+  return {
+    root,
+    band: track.parentElement as HTMLElement,
+    track,
+    thumb: root.querySelector("[data-slot=thumb]") as HTMLElement,
+    focusRing: root.querySelector("[data-slot=focus-ring]") as HTMLElement,
+  }
+}
+
+const control = () => screen.getByRole("switch")
+
+describe("Switch", () => {
+  it("renders a native checkbox exposed as a switch", () => {
+    render(<Switch aria-label="Wi-Fi" />)
+    expect(control()).toHaveAttribute("type", "checkbox")
+    expect(control()).toHaveAccessibleName("Wi-Fi")
+  })
+
+  it("is off by default and reflects defaultChecked", () => {
+    const { rerender } = render(<Switch aria-label="Wi-Fi" />)
+    expect(control()).not.toBeChecked()
+
+    rerender(<Switch aria-label="Wi-Fi" defaultChecked />)
+    expect(control()).toBeChecked()
+  })
+
+  it("toggles uncontrolled from defaultChecked", () => {
+    render(<Switch label="Wi-Fi" defaultChecked />)
+    fireEvent.click(screen.getByText("Wi-Fi"))
+    expect(control()).not.toBeChecked()
+    fireEvent.click(screen.getByText("Wi-Fi"))
+    expect(control()).toBeChecked()
+  })
+
+  it("follows a controlled checked prop", () => {
+    const handleChange = vi.fn()
+    const { rerender } = render(
+      <Switch label="Wi-Fi" checked={false} onChange={handleChange} />
+    )
+    fireEvent.click(control())
+    expect(handleChange).toHaveBeenCalledTimes(1)
+    expect(control()).not.toBeChecked()
+
+    rerender(<Switch label="Wi-Fi" checked onChange={handleChange} />)
+    expect(control()).toBeChecked()
+  })
+
+  it("drives the thumb from the input itself, not from React props", () => {
+    // The thumb must move for `defaultChecked` and for a form reset alike, so
+    // its position comes from CSS reading the real input — never from a
+    // `data-state` derived from props.
+    render(<Switch label="Wi-Fi" defaultChecked />)
+    const { thumb } = parts(control())
+    expect(thumb).not.toHaveAttribute("data-state")
+    expect(thumb.className).toMatch(/group-has-\[:checked\]\/switch:start-\[/)
+  })
+
+  it("sizes the track and thumb to the Figma set", () => {
+    const cases = [
+      ["sm", ["h-[18px]", "w-8"], "size-4", "start-[15px]"],
+      ["md", ["h-5", "w-10"], "size-[18px]", "start-[21px]"],
+      ["lg", ["h-6", "w-12"], "size-[22px]", "start-[25px]"],
+    ] as const
+    for (const [size, track, thumb, on] of cases) {
+      const { unmount } = render(<Switch size={size} aria-label="Wi-Fi" />)
+      const p = parts(control())
+      expect(p.track).toHaveClass(...track)
+      expect(p.thumb).toHaveClass(thumb, "start-px", "top-px")
+      expect(p.thumb).toHaveClass(`group-has-[:checked]/switch:${on}`)
+      // The focus ring lives inside the track and covers it exactly.
+      expect(p.focusRing.parentElement).toBe(p.track)
+      expect(p.focusRing).toHaveClass("absolute", "inset-0")
+      unmount()
+    }
+  })
+
+  it("defaults to md", () => {
+    render(<Switch aria-label="Wi-Fi" />)
+    expect(parts(control()).track).toHaveClass("h-5", "w-10")
+  })
+
+  it("positions the thumb with logical properties only", () => {
+    // No physical offsets and no `rtl:` overrides: `inset-inline-start` makes
+    // the thumb travel towards the end of the line in either direction.
+    for (const size of ["sm", "md", "lg"] as const) {
+      const { unmount } = render(<Switch size={size} aria-label="Wi-Fi" />)
+      const html = parts(control()).root.outerHTML
+      expect(html).not.toMatch(/\brtl:/)
+      expect(html).not.toMatch(/translate-x/)
+      expect(html).not.toMatch(/\b(left|right)-/)
+      unmount()
+    }
+  })
+
+  it("paints the solid variant with Figma's tokens", () => {
+    render(<Switch aria-label="Wi-Fi" />)
+    const { track, thumb, focusRing } = parts(control())
+    expect(track).toHaveClass(
+      "bg-input",
+      "group-has-[:checked]/switch:bg-primary",
+      "shadow-sm"
+    )
+    // Disabled keeps this thumb too: only the root's opacity changes.
+    expect(thumb).toHaveClass("bg-primary-foreground")
+    expect(thumb.className).not.toMatch(/:disabled/)
+    // Focus: a 1px ring stroke inside the track.
+    expect(focusRing).toHaveClass("border", "border-ring")
+  })
+
+  it("paints the outline variant with Figma's tokens", () => {
+    render(<Switch variant="outline" aria-label="Wi-Fi" />)
+    const { track, thumb, focusRing } = parts(control())
+    // A Figma OUTSIDE stroke is a CSS outline: painted, but not in the box.
+    expect(track).toHaveClass(
+      "bg-background",
+      "outline",
+      "outline-1",
+      "outline-input",
+      "group-has-[:checked]/switch:outline-primary"
+    )
+    expect(track).not.toHaveClass("border", "shadow-sm")
+    expect(thumb).toHaveClass("bg-input", "group-has-[:checked]/switch:bg-primary")
+    // Focus replaces the stroke with `ring`, except an on switch keeps primary.
+    expect(focusRing).toHaveClass(
+      "outline-ring",
+      "group-has-[:checked]/switch:outline-primary"
+    )
+  })
+
+  it("draws focus as a ring-coloured halo, relayed from the input by its sibling band", () => {
+    // The band is the input's direct sibling, so a plain peer-focus-visible
+    // (the form the Storybook pseudo-states addon can force) sets a variable
+    // on it; the ring inside the track reads that variable as its opacity.
+    for (const variant of ["solid", "outline"] as const) {
+      const { unmount } = render(<Switch variant={variant} aria-label="Wi-Fi" />)
+      const { band, focusRing } = parts(control())
+      expect(control().nextElementSibling).toBe(band)
+      expect(band).toHaveClass("peer-focus-visible:[--sw-focus:1]")
+      expect(focusRing).toHaveClass(
+        "ring-[3px]",
+        "ring-ring/50",
+        "opacity-[var(--sw-focus,0)]",
+        "rounded-full"
+      )
+      unmount()
+    }
+  })
+
+  it("keeps the focus ring on the track when the root is padded", () => {
+    // Padding passed through className used to push the track away from a ring
+    // positioned on the root. Inside the track, it moves with the track.
+    render(<Switch layout="label-first" label="Wi-Fi" className="p-4" />)
+    const { track, focusRing } = parts(control())
+    expect(track.contains(focusRing)).toBe(true)
+    expect(focusRing.className).not.toMatch(/\b(start|end|top)-/)
+  })
+
+  it("drives focus without a has-[] utility", () => {
+    // `:has()` is invisible to the pseudo-state renderer the Storybook states
+    // grid uses. Checked and disabled are real attributes, so `:has()` is fine
+    // for them; focus must stay `peer`-driven.
+    render(<Switch label="Wi-Fi" />)
+    const html = parts(control()).root.outerHTML
+    expect(html).not.toMatch(/has-\[:focus/)
+    expect(html).not.toMatch(/focus-within/)
+  })
+
+  it("puts the track first by default, and last for label-first", () => {
+    const { rerender } = render(<Switch label="Wi-Fi" description="Detail" />)
+    let { root, band } = parts(control())
+    // input, band, text
+    expect(root.children[1]).toBe(band)
+    expect(root).toHaveClass("inline-flex")
+
+    rerender(<Switch layout="label-first" label="Wi-Fi" description="Detail" />)
+    ;({ root, band } = parts(control()))
+    expect(root.children[2]).toBe(band)
+    expect(root).toHaveClass("flex", "justify-between")
+  })
+
+  it("sets the label and description in Figma's text styles", () => {
+    // The ramp owns the leading (20px English, 24px Arabic), so neither line
+    // may carry a leading or a fixed height of its own.
+    render(<Switch label="Wi-Fi" description="Detail" />)
+    const label = screen.getByText("Wi-Fi")
+    const description = screen.getByText("Detail")
+    expect(label).toHaveClass("text-sm", "font-medium", "text-foreground")
+    expect(description).toHaveClass("text-xs", "font-light", "text-muted-foreground")
+    for (const el of [label, description]) {
+      expect(el.className).not.toMatch(/\bleading-/)
+      expect(el.className).not.toMatch(/\bh-\d/)
+    }
+    // Figma's 2px label-to-description gap.
+    expect(label.parentElement).toHaveClass("gap-0.5")
+  })
+
+  it("dims the whole component when disabled", () => {
+    render(<Switch label="Wi-Fi" disabled />)
+    expect(control()).toBeDisabled()
+    expect(control().closest("label")).toHaveClass(
+      "has-[:disabled]:opacity-50",
+      "has-[:disabled]:pointer-events-none"
+    )
+  })
+
+  it("associates the label so clicking it toggles the switch", () => {
+    render(<Switch label="Airplane mode" />)
+    fireEvent.click(screen.getByText("Airplane mode"))
+    expect(control()).toBeChecked()
+  })
+
+  it("links the description via aria-describedby", () => {
+    render(<Switch label="Notifications" description="Receive push notifications" />)
+    expect(control()).toHaveAccessibleDescription("Receive push notifications")
+  })
+
+  it("names the switch with the label alone, not the description", () => {
+    // The description sits inside the wrapping <label>; without
+    // aria-labelledby it would be read as part of the name and again as the
+    // description.
+    render(<Switch label="Notifications" description="Receive push notifications" />)
+    expect(control()).toHaveAccessibleName("Notifications")
+    expect(control()).toHaveAccessibleDescription("Receive push notifications")
+  })
+
+  it("keeps a caller's aria-label as the name", () => {
+    render(<Switch label="Wi-Fi" aria-label="Wireless networking" />)
+    expect(control()).toHaveAccessibleName("Wireless networking")
+    expect(control()).not.toHaveAttribute("aria-labelledby")
+  })
+
+  it("does not read a description twice when it is the only text", () => {
+    render(<Switch description="Receive push notifications" />)
+    expect(control()).not.toHaveAttribute("aria-describedby")
+  })
+
+  it("joins aria-describedby ids without merging them as classes", () => {
+    // `cn` would drop "text-sm" as a conflicting Tailwind class.
+    render(
+      <>
+        <span id="text-sm">Small print</span>
+        <span id="text-lg">Large print</span>
+        <Switch label="Wi-Fi" description="Detail" aria-describedby="text-sm text-lg" />
+      </>
+    )
+    expect(control().getAttribute("aria-describedby")).toMatch(/-description text-sm text-lg$/)
+    expect(control()).toHaveAccessibleDescription("Detail Small print Large print")
+  })
+
+  it("keeps a caller's aria-describedby alongside the description", () => {
+    render(
+      <>
+        <span id="hint">Hint</span>
+        <Switch label="Wi-Fi" description="Detail" aria-describedby="hint" />
+      </>
+    )
+    expect(control()).toHaveAccessibleDescription("Detail Hint")
+  })
+
+  it("keeps the track and focus ring out of the accessibility tree", () => {
+    render(<Switch label="Wi-Fi" />)
+    const { band, focusRing } = parts(control())
+    expect(band).toHaveAttribute("aria-hidden", "true")
+    expect(band.contains(focusRing)).toBe(true)
+  })
+
+  it("renders no text column when label and description are omitted", () => {
+    render(<Switch aria-label="Wi-Fi" />)
+    // input and band — no text column.
+    expect(control().parentElement?.childElementCount).toBe(2)
+    expect(screen.queryByText(/./)).toBeNull()
+  })
+
+  it("keeps a stable id across renders and honours a given one", () => {
+    const { rerender } = render(<Switch label="Wi-Fi" />)
+    const first = control().id
+    rerender(<Switch label="Wi-Fi" />)
+    expect(control().id).toBe(first)
+
+    rerender(<Switch label="Wi-Fi" id="wifi" />)
+    expect(control().id).toBe("wifi")
+    expect(screen.getByText("Wi-Fi").closest("label")).toHaveAttribute("for", "wifi")
+  })
+
+  it("applies custom className to the root", () => {
+    render(<Switch label="Wi-Fi" className="custom-class" />)
+    expect(control().closest("label")).toHaveClass("custom-class")
+  })
+
+  it("forwards ref to the input", () => {
+    const ref = { current: null as HTMLInputElement | null }
+    render(<Switch aria-label="Wi-Fi" ref={ref} />)
+    expect(ref.current).toBe(control())
+  })
+
+  it("rejects null as a variant", () => {
+    // @ts-expect-error `variant` is declared on SwitchProps rather than
+    // inherited from CVA's VariantProps, which would widen it with `| null`.
+    render(<Switch aria-label="Wi-Fi" variant={null} />)
+    expect(control()).toBeInTheDocument()
+  })
+})

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>