@smicolon/fasla-ui 0.2.4 → 0.3.0

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

@@ -118,3 +118,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> {
@@ -99,33 +100,29 @@ export function EmptyState({
 export function EmptySearchResults({
   query,
   onClear,
+  title,
+  description,
   ...props
 }: Omit<EmptyStateProps, "title" | "description"> & {
+  /** Replaces the English title */
+  title?: string
+  /** Replaces the English description */
+  description?: string
   query?: string
   onClear?: () => void
 }) {
   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 +132,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.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react"
+import { ChevronsLeftIcon } from "lucide-react"
 import { cn } from "../../../src/lib/utils"
 
 export interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
@@ -30,7 +31,7 @@ export function Sidebar({
   return (
     <aside
       className={cn(
-        "flex h-full flex-col border-r bg-background transition-all duration-200",
+        "flex h-full flex-col border-e bg-background transition-all duration-200",
         collapsed ? "w-16" : widthClasses[width],
         className
       )}
@@ -116,7 +117,7 @@ export function SidebarGroup({
   return (
     <div className={cn("py-2", className)} {...props}>
       {label && (
-        <div className="mb-2 px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+        <div className="mb-2 px-2 text-xs font-semibold uppercase text-muted-foreground">
           {label}
         </div>
       )}
@@ -183,20 +184,12 @@ export function SidebarCollapseButton({
       aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
       {...props}
     >
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        className={cn("transition-transform", collapsed && "rotate-180")}
-      >
-        <polyline points="11 17 6 12 11 7" />
-        <polyline points="18 17 13 12 18 7" />
-      </svg>
+      {/* Points at the edge the sidebar collapses toward, so it mirrors in RTL. */}
+      <ChevronsLeftIcon
+        size={16}
+        strokeWidth={1.5}
+        className={cn("transition-transform motion-reduce:transition-none rtl:-scale-x-100", collapsed && "rotate-180")}
+      />
     </button>
   )
 }

package/registry/blocks/stats-card/StatsCard.tsx

@@ -1,4 +1,5 @@
 import * as React from "react"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
 import { cn } from "../../../src/lib/utils"
 
 export interface StatsCardProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -43,7 +44,7 @@ export function StatsCard({
           {loading ? (
             <div className="h-8 w-24 animate-pulse rounded bg-muted" />
           ) : (
-            <p className="text-2xl font-bold tracking-tight">{value}</p>
+            <p className="text-2xl font-bold">{value}</p>
           )}
         </div>
         {icon && (
@@ -65,35 +66,16 @@ export function StatsCard({
               )}
             >
               {trend.direction === "up" && (
-                <svg
-                  width="16"
-                  height="16"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                >
-                  <polyline points="18 15 12 9 6 15" />
-                </svg>
+                <ChevronUpIcon size={16} strokeWidth={1.5} />
               )}
               {trend.direction === "down" && (
-                <svg
-                  width="16"
-                  height="16"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                >
-                  <polyline points="6 9 12 15 18 9" />
-                </svg>
+                <ChevronDownIcon size={16} strokeWidth={1.5} />
               )}
-              {trend.value > 0 ? "+" : ""}
-              {trend.value}%
+              {/* One LTR unit: in RTL the sign would otherwise jump to the far end, "12.5%+". */}
+              <bdi dir="ltr">
+                {trend.value > 0 ? "+" : ""}
+                {trend.value}%
+              </bdi>
             </span>
           )}
           {description && (

package/registry/effects/animated-gradient/animated-gradient.tsx

@@ -4,6 +4,24 @@ import * as React from "react"
 import { motion, useReducedMotion } from "framer-motion"
 import { cn } from "../../../src/lib/utils"
 
+/**
+ * The colours, without blank entries (a cleared control, say); the fallback
+ * when none are left, since an empty list would draw nothing.
+ */
+const filledList = (colors: string[] | undefined, fallback: string[]) => {
+  const usable = (colors ?? []).filter((color) => typeof color === "string" && color.trim())
+  return usable.length ? usable : fallback
+}
+
+const GRADIENT_COLORS = [
+  "var(--primary)",
+  "var(--secondary)",
+  "hsl(280 100% 70%)",
+  "hsl(200 100% 70%)",
+]
+
+const TEXT_COLORS = ["var(--primary)", "hsl(280 100% 70%)", "var(--primary)"]
+
 export interface AnimatedGradientProps
   extends React.HTMLAttributes<HTMLDivElement> {
   /** Gradient colors */
@@ -28,12 +46,7 @@ const blurValues = {
  * Respects prefers-reduced-motion by stopping animation.
  */
 export function AnimatedGradient({
-  colors = [
-    "hsl(var(--primary))",
-    "hsl(var(--secondary))",
-    "hsl(280 100% 70%)",
-    "hsl(200 100% 70%)",
-  ],
+  colors: colorsProp,
   speed = 10,
   blur = "3xl",
   className,
@@ -41,10 +54,11 @@ export function AnimatedGradient({
   ...props
 }: AnimatedGradientProps) {
   const prefersReducedMotion = useReducedMotion()
+  const colors = filledList(colorsProp, GRADIENT_COLORS)
 
   return (
     <div
-      className={cn("relative overflow-hidden", className)}
+      className={cn("relative isolate overflow-hidden", className)}
       {...props}
     >
       {/* Gradient blobs */}
@@ -100,12 +114,13 @@ export interface AnimatedGradientTextProps {
 }
 
 export function AnimatedGradientText({
-  colors = ["hsl(var(--primary))", "hsl(280 100% 70%)", "hsl(var(--primary))"],
+  colors: colorsProp,
   speed = 3,
   className,
   children,
 }: AnimatedGradientTextProps) {
   const prefersReducedMotion = useReducedMotion()
+  const colors = filledList(colorsProp, TEXT_COLORS)
 
   return (
     <motion.span