@smicolon/fasla-ui 0.2.4 → 0.4.0

package/dist/tokens/index.js

@@ -2,33 +2,72 @@
 var baseTokens = {
   radius: { sm: "0.5rem", md: "0.75rem", lg: "1rem" },
   spacing: { densityMultiplier: { compact: 0.9, comfortable: 1, spacious: 1.1 } },
-  typography: { fontFamily: "Inter", baseFontSizePx: 16, lineHeight: 1.5 },
+  // Brand V2.5 §14 — Geist is the LTR face. Arabic is set in Cairo, which the
+  // Tailwind preset selects per direction; this scaffold carries only the base.
+  // 16/24 is the `Base` rung, identical in both Figma ramps.
+  typography: { fontFamily: "Geist", baseFontSizePx: 16, lineHeight: 1.5 },
   motion: { durationsMs: { fast: 120, base: 180, slow: 260 } }
 };
 
 // src/tokens/tailwind.ts
+var semanticColor = (name) => `color-mix(in oklch, var(--${name}) calc(<alpha-value> * 100%), transparent)`;
+var c = semanticColor;
 var tailwindSemanticColors = {
-  border: "hsl(var(--border))",
-  input: "hsl(var(--input))",
-  ring: "hsl(var(--ring))",
-  background: "hsl(var(--background))",
-  foreground: "hsl(var(--foreground))",
-  primary: {
-    DEFAULT: "hsl(var(--primary))",
-    foreground: "hsl(var(--primary-foreground))"
-  },
-  secondary: {
-    DEFAULT: "hsl(var(--secondary))",
-    foreground: "hsl(var(--secondary-foreground))"
+  // Surfaces
+  background: c("background"),
+  foreground: c("foreground"),
+  card: { DEFAULT: c("card"), foreground: c("card-foreground") },
+  popover: { DEFAULT: c("popover"), foreground: c("popover-foreground") },
+  // Actions. `primary` is Figma's strong neutral (#0a0a0a light, #fafafa dark),
+  // identical to `foreground` in both modes. It is NOT a brand accent — an app
+  // that wants its brand colour should define its own token for it.
+  primary: { DEFAULT: c("primary"), foreground: c("primary-foreground") },
+  secondary: { DEFAULT: c("secondary"), foreground: c("secondary-foreground") },
+  muted: { DEFAULT: c("muted"), foreground: c("muted-foreground") },
+  accent: { DEFAULT: c("accent"), foreground: c("accent-foreground") },
+  destructive: {
+    DEFAULT: c("destructive"),
+    foreground: c("destructive-foreground")
   },
-  muted: {
-    DEFAULT: "hsl(var(--muted))",
-    foreground: "hsl(var(--muted-foreground))"
+  // Lines and focus
+  border: c("border"),
+  input: c("input"),
+  ring: c("ring"),
+  // Status
+  success: { DEFAULT: c("success"), foreground: c("success-foreground") },
+  warning: { DEFAULT: c("warning"), foreground: c("warning-foreground") },
+  info: { DEFAULT: c("info"), foreground: c("info-foreground") },
+  // Soft tints — Figma's `opacity/*` variables, already translucent. The Badge
+  // Soft type lays one over `card`, exactly as Figma stacks the two fills, so
+  // the chip reads the same on any surface. Only `primary` changes in Dark.
+  soft: {
+    primary: c("soft-primary"),
+    secondary: c("soft-secondary"),
+    info: c("soft-info"),
+    success: c("soft-success"),
+    warning: c("soft-warning"),
+    destructive: c("soft-destructive")
   },
-  destructive: {
-    DEFAULT: "hsl(var(--destructive))",
-    foreground: "hsl(var(--destructive-foreground))"
+  // Inverse — a fixed contrast band, not a mode-reactive surface.
+  "background-inverse": c("background-inverse"),
+  "foreground-inverse": c("foreground-inverse"),
+  "muted-foreground-inverse": c("muted-foreground-inverse"),
+  // Charts
+  "chart-1": c("chart-1"),
+  "chart-2": c("chart-2"),
+  "chart-3": c("chart-3"),
+  "chart-4": c("chart-4"),
+  "chart-5": c("chart-5"),
+  sidebar: {
+    DEFAULT: c("sidebar"),
+    foreground: c("sidebar-foreground"),
+    primary: c("sidebar-primary"),
+    "primary-foreground": c("sidebar-primary-foreground"),
+    accent: c("sidebar-accent"),
+    "accent-foreground": c("sidebar-accent-foreground"),
+    border: c("sidebar-border"),
+    ring: c("sidebar-ring")
   }
 };
 
-export { baseTokens, tailwindSemanticColors };
+export { baseTokens, semanticColor, tailwindSemanticColors };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smicolon/fasla-ui",
-  "version": "0.2.4",
+  "version": "0.4.0",
   "description": "Professional UI components with animations and app building blocks",
   "license": "MIT",
   "author": "Smicolon",
@@ -27,8 +27,15 @@
       "import": "./dist/index.js"
     },
     "./tokens": {
-      "types": "./dist/tokens/index.d.ts",
-      "import": "./dist/tokens/index.js"
+      "import": {
+        "types": "./dist/tokens/index.d.ts",
+        "default": "./dist/tokens/index.js"
+      },
+      "require": {
+        "types": "./dist/tokens/index.d.cts",
+        "default": "./dist/tokens/index.cjs"
+      },
+      "default": "./dist/tokens/index.js"
     },
     "./motion": {
       "types": "./dist/motion/index.d.ts",
@@ -38,6 +45,7 @@
       "types": "./dist/registry/index.d.ts",
       "import": "./dist/registry/index.js"
     },
+    "./tailwind-preset": "./tailwind-preset.ts",
     "./lib/utils": {
       "types": "./dist/lib/utils.d.ts",
       "import": "./dist/lib/utils.js"
@@ -45,6 +53,7 @@
   },
   "files": [
     "dist",
+    "tailwind-preset.ts",
     "registry",
     "registry.json"
   ],
@@ -74,6 +83,7 @@
     "eslint": "^8.57.0",
     "framer-motion": "^11.0.0",
     "jsdom": "^24.0.0",
+    "lucide-react": "^1.48.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tsup": "^8.0.0",
@@ -81,10 +91,10 @@
     "vitest": "^1.6.0"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "framer-motion": "^11.0.0",
-    "tailwindcss": "^3.4.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "framer-motion": "^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0",
+    "tailwindcss": "^3.4.0 || ^4.1.4"
   },
   "peerDependenciesMeta": {
     "framer-motion": {

package/registry/blocks/app-shell/AppShell.tsx

@@ -42,7 +42,7 @@ export function AppShell({
         {sidebar && (
           <aside
             className={cn(
-              "shrink-0 border-r bg-muted/30",
+              "shrink-0 border-e bg-muted/30",
               sidebarWidths[sidebarWidth],
               sidebarMobile ? "block" : "hidden md:block"
             )}

package/registry/blocks/data-table/DataTable.test.tsx

@@ -0,0 +1,61 @@
+import { describe, it, expect } from "vitest"
+import { render, screen } from "@testing-library/react"
+import { DataTable, Pagination } from "./DataTable"
+
+describe("Pagination text", () => {
+  it("keeps its English defaults", () => {
+    render(<Pagination page={2} totalPages={5} onPageChange={() => {}} />)
+    expect(screen.getByRole("navigation", { name: "Pagination" })).toBeTruthy()
+    expect(screen.getByText("Page 2 of 5")).toBeTruthy()
+    expect(screen.getByRole("button", { name: "Go to previous page" })).toBeTruthy()
+    expect(screen.getByRole("button", { name: "Go to page 3" })).toBeTruthy()
+  })
+
+  it("uses the text it is given", () => {
+    render(
+      <Pagination
+        page={2}
+        totalPages={5}
+        onPageChange={() => {}}
+        labels={{
+          pagination: "التنقّل بين الصفحات",
+          status: (page, total) => `الصفحة ${page} من ${total}`,
+          previous: "السابق",
+          next: "التالي",
+          goToPrevious: "الانتقال إلى الصفحة السابقة",
+          goToNext: "الانتقال إلى الصفحة التالية",
+          goToPage: (page) => `الانتقال إلى الصفحة ${page}`,
+        }}
+      />
+    )
+    expect(screen.getByRole("navigation", { name: "التنقّل بين الصفحات" })).toBeTruthy()
+    expect(screen.getByText("الصفحة 2 من 5")).toBeTruthy()
+    expect(screen.getByRole("button", { name: "الانتقال إلى الصفحة السابقة" }).textContent).toBe("السابق")
+    expect(screen.getByRole("button", { name: "الانتقال إلى الصفحة 3" })).toBeTruthy()
+  })
+})
+
+describe("DataTable column align", () => {
+  const cellClass = (align?: "start" | "center" | "end" | "left" | "right") => {
+    const { container, unmount } = render(
+      <DataTable data={[{ id: 1 }]} columns={[{ id: "id", header: "ID", cell: (row) => row.id, align }]} getRowKey={(row) => row.id} />
+    )
+    const className = container.querySelector("td")!.className
+    unmount()
+    return className
+  }
+
+  it("defaults to the start of the reading direction", () => {
+    expect(cellClass()).toContain("text-start")
+  })
+
+  it("maps start and end to logical sides", () => {
+    expect(cellClass("start")).toContain("text-start")
+    expect(cellClass("end")).toContain("text-end")
+  })
+
+  it("keeps left and right physical", () => {
+    expect(cellClass("left")).toContain("text-left")
+    expect(cellClass("right")).toContain("text-right")
+  })
+})

package/registry/blocks/data-table/DataTable.tsx

@@ -13,8 +13,8 @@ export interface Column<T> {
   sortable?: boolean
   /** Column width class */
   width?: string
-  /** Alignment */
-  align?: "left" | "center" | "right"
+  /** Alignment. `start` and `end` follow the reading direction; `left` and `right` are physical sides. Defaults to `start`. */
+  align?: "start" | "center" | "end" | "left" | "right"
 }
 
 export interface DataTableProps<T> extends React.HTMLAttributes<HTMLDivElement> {
@@ -37,8 +37,10 @@ export interface DataTableProps<T> extends React.HTMLAttributes<HTMLDivElement>
 }
 
 const alignClasses = {
-  left: "text-left",
+  start: "text-start",
   center: "text-center",
+  end: "text-end",
+  left: "text-left",
   right: "text-right",
 }
 
@@ -70,7 +72,7 @@ export function DataTable<T>({
                     key={column.id}
                     className={cn(
                       "h-10 px-4 font-medium text-muted-foreground",
-                      alignClasses[column.align || "left"],
+                      alignClasses[column.align || "start"],
                       column.width
                     )}
                   >
@@ -108,7 +110,7 @@ export function DataTable<T>({
                     key={column.id}
                     className={cn(
                       "h-10 px-4 font-medium text-muted-foreground",
-                      alignClasses[column.align || "left"],
+                      alignClasses[column.align || "start"],
                       column.width
                     )}
                   >
@@ -141,7 +143,7 @@ export function DataTable<T>({
                   key={column.id}
                   className={cn(
                     "h-10 px-4 font-medium text-muted-foreground",
-                    alignClasses[column.align || "left"],
+                    alignClasses[column.align || "start"],
                     column.width
                   )}
                 >
@@ -170,7 +172,7 @@ export function DataTable<T>({
                       key={column.id}
                       className={cn(
                         "p-4",
-                        alignClasses[column.align || "left"],
+                        alignClasses[column.align || "start"],
                         column.width
                       )}
                     >
@@ -197,6 +199,38 @@ export interface PaginationProps {
   /** Show page numbers */
   showPageNumbers?: boolean
   className?: string
+  /** Text and accessible names; each defaults to English */
+  labels?: Partial<PaginationLabels>
+}
+
+export interface PaginationLabels {
+  /** Accessible name of the pagination landmark */
+  pagination: string
+  /** Visible status, given the page and the total */
+  status: (page: number, totalPages: number) => string
+  previous: string
+  next: string
+  goToPrevious: string
+  goToNext: string
+  goToPage: (page: number) => string
+}
+
+/** The entries of a partial object whose values are not undefined. */
+function definedOnly<T extends object>(value: Partial<T> | undefined): Partial<T> {
+  if (!value) return {}
+  return Object.fromEntries(
+    Object.entries(value).filter(([, entry]) => entry !== undefined)
+  ) as Partial<T>
+}
+
+const DEFAULT_PAGINATION_LABELS: PaginationLabels = {
+  pagination: "Pagination",
+  status: (page, totalPages) => `Page ${page} of ${totalPages}`,
+  previous: "Previous",
+  next: "Next",
+  goToPrevious: "Go to previous page",
+  goToNext: "Go to next page",
+  goToPage: (page) => `Go to page ${page}`,
 }
 
 /**
@@ -208,7 +242,12 @@ export function Pagination({
   onPageChange,
   showPageNumbers = true,
   className,
+  labels,
 }: PaginationProps) {
+  // A label passed as undefined (a missed translation key, say) keeps its
+  // English default instead of replacing it: a plain spread would leave
+  // status or goToPage undefined, and calling them would crash the render.
+  const text = { ...DEFAULT_PAGINATION_LABELS, ...definedOnly(labels) }
   const canGoPrevious = page > 1
   const canGoNext = page < totalPages
 
@@ -241,19 +280,17 @@ export function Pagination({
   return (
     <nav
       className={cn("flex items-center justify-between px-2 py-3", className)}
-      aria-label="Pagination"
+      aria-label={text.pagination}
     >
-      <p className="text-sm text-muted-foreground">
-        Page {page} of {totalPages}
-      </p>
+      <p className="text-sm text-muted-foreground">{text.status(page, totalPages)}</p>
       <div className="flex items-center gap-1">
         <button
           onClick={() => onPageChange(page - 1)}
           disabled={!canGoPrevious}
           className="inline-flex h-8 items-center justify-center rounded-md px-3 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
-          aria-label="Go to previous page"
+          aria-label={text.goToPrevious}
         >
-          Previous
+          {text.previous}
         </button>
         {showPageNumbers &&
           getPageNumbers().map((pageNum, i) =>
@@ -271,7 +308,7 @@ export function Pagination({
                     ? "bg-primary text-primary-foreground"
                     : "hover:bg-accent hover:text-accent-foreground"
                 )}
-                aria-label={`Go to page ${pageNum}`}
+                aria-label={text.goToPage(pageNum)}
                 aria-current={pageNum === page ? "page" : undefined}
               >
                 {pageNum}
@@ -282,9 +319,9 @@ export function Pagination({
           onClick={() => onPageChange(page + 1)}
           disabled={!canGoNext}
           className="inline-flex h-8 items-center justify-center rounded-md px-3 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
-          aria-label="Go to next page"
+          aria-label={text.goToNext}
         >
-          Next
+          {text.next}
         </button>
       </div>
     </nav>

package/registry/blocks/data-table/index.ts

@@ -4,4 +4,5 @@ export {
   type Column,
   type DataTableProps,
   type PaginationProps,
+  type PaginationLabels,
 } from "./DataTable"

package/registry/blocks/empty-state/EmptyState.test.tsx

@@ -92,6 +92,17 @@ describe("EmptySearchResults", () => {
     const svg = container.querySelector("svg")
     expect(svg).toBeInTheDocument()
   })
+
+  it("accepts the deprecated onClear without passing it to the DOM or showing a control", () => {
+    const error = vi.spyOn(console, "error").mockImplementation(() => {})
+    try {
+      render(<EmptySearchResults onClear={() => {}} />)
+      expect(error).not.toHaveBeenCalled()
+      expect(screen.queryByRole("button")).not.toBeInTheDocument()
+    } finally {
+      error.mockRestore()
+    }
+  })
 })
 
 describe("EmptyData", () => {
@@ -118,3 +129,15 @@ describe("EmptyData", () => {
     expect(svg).toBeInTheDocument()
   })
 })
+
+describe("EmptyState presets", () => {
+  it("take a title and description in place of their English", () => {
+    render(<EmptySearchResults title="لا توجد نتائج" description="جرّب كلمة بحث أخرى." />)
+    expect(screen.getByText("لا توجد نتائج")).toBeInTheDocument()
+    expect(screen.getByText("جرّب كلمة بحث أخرى.")).toBeInTheDocument()
+    expect(screen.queryByText("No results found")).not.toBeInTheDocument()
+
+    render(<EmptyData title="لا توجد طلبات بعد" description="أنشئ طلبك الأول للبدء." />)
+    expect(screen.getByText("لا توجد طلبات بعد")).toBeInTheDocument()
+  })
+})

package/registry/blocks/empty-state/EmptyState.tsx

@@ -1,4 +1,5 @@
 import * as React from "react"
+import { FilePlusIcon, SearchIcon } from "lucide-react"
 import { cn } from "../../../src/lib/utils"
 
 export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -98,34 +99,38 @@ export function EmptyState({
 /** Pre-built empty state for no search results */
 export function EmptySearchResults({
   query,
-  onClear,
-  ...props
+  title,
+  description,
+  ...rest
 }: Omit<EmptyStateProps, "title" | "description"> & {
+  /** Replaces the English title */
+  title?: string
+  /** Replaces the English description */
+  description?: string
   query?: string
+  /**
+   * @deprecated Does nothing: this empty state has no clear control. Pass a
+   * button as `action` instead.
+   */
   onClear?: () => void
 }) {
+  // onClear is kept so existing callers still compile; take it out here so it
+  // never reaches the DOM through EmptyState's spread.
+  const props = { ...rest }
+  delete props.onClear
+
   return (
     <EmptyState
-      title="No results found"
+      // ?? rather than a later spread, so an undefined title keeps the English one
+      title={title ?? "No results found"}
       description={
-        query
+        description ??
+        (query
           ? `No results for "${query}". Try a different search term.`
-          : "Try adjusting your search or filters."
+          : "Try adjusting your search or filters.")
       }
       icon={
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          strokeWidth={1.5}
-          stroke="currentColor"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
-          />
-        </svg>
+        <SearchIcon strokeWidth={1.5} />
       }
       {...props}
     />
@@ -135,28 +140,22 @@ export function EmptySearchResults({
 /** Pre-built empty state for no data */
 export function EmptyData({
   resourceName = "items",
+  title,
+  description,
   ...props
 }: Omit<EmptyStateProps, "title" | "description"> & {
+  /** Replaces the English title */
+  title?: string
+  /** Replaces the English description */
+  description?: string
   resourceName?: string
 }) {
   return (
     <EmptyState
-      title={`No ${resourceName} yet`}
-      description={`Get started by creating your first ${resourceName.replace(/s$/, "")}.`}
+      title={title ?? `No ${resourceName} yet`}
+      description={description ?? `Get started by creating your first ${resourceName.replace(/s$/, "")}.`}
       icon={
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          strokeWidth={1.5}
-          stroke="currentColor"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
-          />
-        </svg>
+        <FilePlusIcon strokeWidth={1.5} />
       }
       {...props}
     />

package/registry/blocks/form-section/FormSection.tsx

@@ -82,7 +82,7 @@ export function FormField({
         )}
       >
         {label}
-        {required && <span className="ml-1 text-destructive">*</span>}
+        {required && <span className="ms-1 text-destructive">*</span>}
       </label>
       {children}
       {description && !error && (

package/registry/blocks/navbar/Navbar.test.tsx

@@ -0,0 +1,12 @@
+import { describe, it, expect } from "vitest"
+import { render, screen } from "@testing-library/react"
+import { NavbarToggle } from "./Navbar"
+
+describe("NavbarToggle", () => {
+  it("tells assistive tech whether the menu is showing", () => {
+    const { rerender } = render(<NavbarToggle />)
+    expect(screen.getByRole("button").getAttribute("aria-expanded")).toBe("false")
+    rerender(<NavbarToggle open />)
+    expect(screen.getByRole("button", { name: "Close menu" }).getAttribute("aria-expanded")).toBe("true")
+  })
+})

package/registry/blocks/navbar/Navbar.tsx

@@ -1,4 +1,5 @@
 import * as React from "react"
+import { MenuIcon, XIcon } from "lucide-react"
 import { cn } from "../../../src/lib/utils"
 
 export interface NavbarProps extends React.HTMLAttributes<HTMLElement> {
@@ -160,31 +161,15 @@ export function NavbarToggle({
         className
       )}
       aria-label={open ? "Close menu" : "Open menu"}
+      // Screen readers announce whether the menu it controls is showing.
+      aria-expanded={open ?? false}
       {...props}
     >
-      <svg
-        width="20"
-        height="20"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        {open ? (
-          <>
-            <line x1="18" y1="6" x2="6" y2="18" />
-            <line x1="6" y1="6" x2="18" y2="18" />
-          </>
-        ) : (
-          <>
-            <line x1="4" y1="12" x2="20" y2="12" />
-            <line x1="4" y1="6" x2="20" y2="6" />
-            <line x1="4" y1="18" x2="20" y2="18" />
-          </>
-        )}
-      </svg>
+      {open ? (
+        <XIcon size={20} strokeWidth={1.5} />
+      ) : (
+        <MenuIcon size={20} strokeWidth={1.5} />
+      )}
     </button>
   )
 }

package/registry/blocks/page-header/PageHeader.tsx

@@ -14,6 +14,8 @@ export interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   bordered?: boolean
   /** Semantic heading level for the title */
   headingLevel?: 1 | 2 | 3
+  /** Accessible name of the breadcrumb landmark */
+  breadcrumbLabel?: string
 }
 
 /**
@@ -27,6 +29,7 @@ export function PageHeader({
   breadcrumb,
   bordered = true,
   headingLevel = 1,
+  breadcrumbLabel = "Breadcrumb",
   className,
   ...props
 }: PageHeaderProps) {
@@ -44,11 +47,11 @@ export function PageHeader({
       <div className="flex items-start justify-between gap-4">
         <div className="min-w-0 flex-1">
           {breadcrumb && (
-            <nav className="mb-2 text-sm text-muted-foreground" aria-label="Breadcrumb">
+            <nav className="mb-2 text-sm text-muted-foreground" aria-label={breadcrumbLabel}>
               {breadcrumb}
             </nav>
           )}
-          <Heading className="truncate text-xl font-semibold tracking-tight md:text-2xl">
+          <Heading className="truncate text-xl font-semibold md:text-2xl">
             {title}
           </Heading>
           {description && (

package/registry/blocks/sidebar/Sidebar.test.tsx

@@ -0,0 +1,39 @@
+import { describe, it, expect, vi } from "vitest"
+import { render, screen, fireEvent } from "@testing-library/react"
+import { Sidebar, SidebarCollapseButton } from "./Sidebar"
+
+describe("Sidebar onCollapsedChange", () => {
+  it("is called when the collapse button inside it is pressed", () => {
+    const onSidebarChange = vi.fn()
+    const onButtonChange = vi.fn()
+    render(
+      <Sidebar onCollapsedChange={onSidebarChange}>
+        <SidebarCollapseButton collapsed={false} onCollapsedChange={onButtonChange} />
+      </Sidebar>
+    )
+    fireEvent.click(screen.getByRole("button", { name: "Collapse sidebar" }))
+    expect(onButtonChange).toHaveBeenCalledWith(true)
+    expect(onSidebarChange).toHaveBeenCalledWith(true)
+  })
+
+  it("calls a handler given to both the sidebar and the button once", () => {
+    const onChange = vi.fn()
+    render(
+      <Sidebar collapsed onCollapsedChange={onChange}>
+        <SidebarCollapseButton collapsed onCollapsedChange={onChange} />
+      </Sidebar>
+    )
+    fireEvent.click(screen.getByRole("button", { name: "Expand sidebar" }))
+    expect(onChange).toHaveBeenCalledTimes(1)
+    expect(onChange).toHaveBeenCalledWith(false)
+  })
+
+  it("is not passed to the aside", () => {
+    const { container } = render(
+      <Sidebar onCollapsedChange={() => {}}>
+        <span />
+      </Sidebar>
+    )
+    expect(container.querySelector("aside")?.getAttributeNames()).toEqual(["class"])
+  })
+})