@smicolon/fasla-ui 0.2.3 → 0.3.0

package/README.md

@@ -48,6 +48,7 @@ Core building blocks with CVA variants for consistent styling:
 | **Tabs** | Tabbed navigation with animations |
 | **Badge** | Status indicators and labels |
 | **Avatar** | User avatars with fallback initials |
+| **Status Indicator** | Presence dot with a language-aware accessible name |
 | **Card** | Flexible content containers |
 | **Skeleton** | Loading placeholders |
 | **Combobox** | Searchable select with autocomplete |

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { cn } from './lib/utils.js';
-export { Density, TokenSet, baseTokens, tailwindSemanticColors } from './tokens/index.js';
+export { Density, TokenSet, baseTokens, semanticColor, tailwindSemanticColors } from './tokens/index.js';
 export { MotionPreset, useMotionPresets } from './motion/index.js';
 export { RegistryItem, RegistryItemType, getRegistryItem, getRegistryItemsByCategory, getRegistryItemsByType, registry } from './registry/index.js';
 import 'clsx';

package/dist/index.js

@@ -11,32 +11,71 @@ function cn(...inputs) {
 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))"
-  },
-  muted: {
-    DEFAULT: "hsl(var(--muted))",
-    foreground: "hsl(var(--muted-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: "hsl(var(--destructive))",
-    foreground: "hsl(var(--destructive-foreground))"
+    DEFAULT: c("destructive"),
+    foreground: c("destructive-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")
+  },
+  // 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")
   }
 };
 function useMotionPresets() {
@@ -103,7 +142,7 @@ var registry = [
     title: "Button",
     description: "A button component with multiple variants, sizes, and loading state.",
     sourcePath: "registry/ui/button",
-    dependencies: ["@radix-ui/react-slot", "class-variance-authority"],
+    dependencies: ["@radix-ui/react-slot", "class-variance-authority", "lucide-react"],
     categories: ["primitives", "forms"]
   },
   {
@@ -127,8 +166,27 @@ var registry = [
     name: "badge",
     type: "ui",
     title: "Badge",
-    description: "A badge component for status indicators with multiple variants.",
+    description: "A compact inline label for status, category or metadata: solid, soft and outline types in six semantic tones, with an optional icon, avatar and close button.",
     sourcePath: "registry/ui/badge",
+    dependencies: ["class-variance-authority", "lucide-react"],
+    categories: ["primitives", "data-display"]
+  },
+  {
+    name: "avatar",
+    type: "ui",
+    title: "Avatar",
+    description: "A user's photo, initials or icon, in three sizes and two radii, with an optional border and presence dot. Falls back from photo to initials to icon on its own.",
+    sourcePath: "registry/ui/avatar",
+    dependencies: ["class-variance-authority", "lucide-react"],
+    registryDependencies: ["status-indicator"],
+    categories: ["primitives", "data-display"]
+  },
+  {
+    name: "status-indicator",
+    type: "ui",
+    title: "Status Indicator",
+    description: "A presence dot \u2014 online, away, busy or offline \u2014 with an accessible name in the page's language, so colour never carries the status alone.",
+    sourcePath: "registry/ui/status-indicator",
     dependencies: ["class-variance-authority"],
     categories: ["primitives", "data-display"]
   },
@@ -140,6 +198,15 @@ var registry = [
     sourcePath: "registry/ui/skeleton",
     categories: ["primitives", "feedback"]
   },
+  {
+    name: "radio",
+    type: "ui",
+    title: "Radio",
+    description: "An accessible radio for choosing one option from a set, with a plain and a bordered layout variant.",
+    sourcePath: "registry/ui/radio",
+    dependencies: ["class-variance-authority"],
+    categories: ["primitives", "forms"]
+  },
   // Blocks
   {
     name: "app-shell",
@@ -163,6 +230,7 @@ var registry = [
     title: "Empty State",
     description: "Empty state component with icon, title, description, and actions.",
     sourcePath: "registry/blocks/empty-state",
+    dependencies: ["lucide-react"],
     categories: ["feedback", "data-display"]
   },
   {
@@ -238,4 +306,4 @@ function getRegistryItemsByCategory(category) {
   return registry.filter((item) => item.categories?.includes(category));
 }
 
-export { baseTokens, cn, getRegistryItem, getRegistryItemsByCategory, getRegistryItemsByType, registry, tailwindSemanticColors, useMotionPresets };
+export { baseTokens, cn, getRegistryItem, getRegistryItemsByCategory, getRegistryItemsByType, registry, semanticColor, tailwindSemanticColors, useMotionPresets };

package/dist/registry/index.js

@@ -7,7 +7,7 @@ var registry = [
     title: "Button",
     description: "A button component with multiple variants, sizes, and loading state.",
     sourcePath: "registry/ui/button",
-    dependencies: ["@radix-ui/react-slot", "class-variance-authority"],
+    dependencies: ["@radix-ui/react-slot", "class-variance-authority", "lucide-react"],
     categories: ["primitives", "forms"]
   },
   {
@@ -31,8 +31,27 @@ var registry = [
     name: "badge",
     type: "ui",
     title: "Badge",
-    description: "A badge component for status indicators with multiple variants.",
+    description: "A compact inline label for status, category or metadata: solid, soft and outline types in six semantic tones, with an optional icon, avatar and close button.",
     sourcePath: "registry/ui/badge",
+    dependencies: ["class-variance-authority", "lucide-react"],
+    categories: ["primitives", "data-display"]
+  },
+  {
+    name: "avatar",
+    type: "ui",
+    title: "Avatar",
+    description: "A user's photo, initials or icon, in three sizes and two radii, with an optional border and presence dot. Falls back from photo to initials to icon on its own.",
+    sourcePath: "registry/ui/avatar",
+    dependencies: ["class-variance-authority", "lucide-react"],
+    registryDependencies: ["status-indicator"],
+    categories: ["primitives", "data-display"]
+  },
+  {
+    name: "status-indicator",
+    type: "ui",
+    title: "Status Indicator",
+    description: "A presence dot \u2014 online, away, busy or offline \u2014 with an accessible name in the page's language, so colour never carries the status alone.",
+    sourcePath: "registry/ui/status-indicator",
     dependencies: ["class-variance-authority"],
     categories: ["primitives", "data-display"]
   },
@@ -44,6 +63,15 @@ var registry = [
     sourcePath: "registry/ui/skeleton",
     categories: ["primitives", "feedback"]
   },
+  {
+    name: "radio",
+    type: "ui",
+    title: "Radio",
+    description: "An accessible radio for choosing one option from a set, with a plain and a bordered layout variant.",
+    sourcePath: "registry/ui/radio",
+    dependencies: ["class-variance-authority"],
+    categories: ["primitives", "forms"]
+  },
   // Blocks
   {
     name: "app-shell",
@@ -67,6 +95,7 @@ var registry = [
     title: "Empty State",
     description: "Empty state component with icon, title, description, and actions.",
     sourcePath: "registry/blocks/empty-state",
+    dependencies: ["lucide-react"],
     categories: ["feedback", "data-display"]
   },
   {

package/dist/tokens/index.d.ts

@@ -25,15 +25,39 @@ interface TokenSet {
 declare const baseTokens: TokenSet;
 
 /**
- * Tailwind mapping helper (scaffold).
- * In real projects, you typically map semantic CSS vars into Tailwind's theme.
+ * Tailwind mapping for the Fasla semantic colour tokens.
+ *
+ * These are the 41 `theme/*` variables of the Figma "☾ Mode" collection, plus
+ * the six `opacity/*` Soft tints. Figma
+ * is the source of truth; `design/tokens/mode.json` holds the committed
+ * snapshot, and both apps declare the same values in their own `globals.css`.
+ *
+ * Spread this into `theme.extend.colors` and define the matching CSS variables
+ * as full colours (hex or oklch) on `:root` and `.dark`.
  */
+/**
+ * Resolve a semantic token to a colour Tailwind can apply an opacity modifier to.
+ *
+ * A bare `var(--x)` does NOT work: in Tailwind 3 the `/opacity` modifier is
+ * silently dropped when the colour is an unparseable string, so `bg-primary/10`
+ * compiles to no rule at all. Wrapping in `color-mix` with the `<alpha-value>`
+ * placeholder keeps both `bg-primary` and `bg-primary/10` working, while letting
+ * the CSS variables stay full colours rather than bare channel triplets.
+ *
+ * Needs Chrome 111+, Safari 16.2+, Firefox 113+.
+ */
+declare const semanticColor: (name: string) => string;
 declare const tailwindSemanticColors: {
-    border: string;
-    input: string;
-    ring: string;
     background: string;
     foreground: string;
+    card: {
+        DEFAULT: string;
+        foreground: string;
+    };
+    popover: {
+        DEFAULT: string;
+        foreground: string;
+    };
     primary: {
         DEFAULT: string;
         foreground: string;
@@ -46,10 +70,55 @@ declare const tailwindSemanticColors: {
         DEFAULT: string;
         foreground: string;
     };
+    accent: {
+        DEFAULT: string;
+        foreground: string;
+    };
     destructive: {
         DEFAULT: string;
         foreground: string;
     };
+    border: string;
+    input: string;
+    ring: string;
+    success: {
+        DEFAULT: string;
+        foreground: string;
+    };
+    warning: {
+        DEFAULT: string;
+        foreground: string;
+    };
+    info: {
+        DEFAULT: string;
+        foreground: string;
+    };
+    soft: {
+        primary: string;
+        secondary: string;
+        info: string;
+        success: string;
+        warning: string;
+        destructive: string;
+    };
+    "background-inverse": string;
+    "foreground-inverse": string;
+    "muted-foreground-inverse": string;
+    "chart-1": string;
+    "chart-2": string;
+    "chart-3": string;
+    "chart-4": string;
+    "chart-5": string;
+    sidebar: {
+        DEFAULT: string;
+        foreground: string;
+        primary: string;
+        "primary-foreground": string;
+        accent: string;
+        "accent-foreground": string;
+        border: string;
+        ring: string;
+    };
 };
 
-export { type Density, type TokenSet, baseTokens, tailwindSemanticColors };
+export { type Density, type TokenSet, baseTokens, semanticColor, tailwindSemanticColors };

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.3",
+  "version": "0.3.0",
   "description": "Professional UI components with animations and app building blocks",
   "license": "MIT",
   "author": "Smicolon",
@@ -38,6 +38,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 +46,7 @@
   },
   "files": [
     "dist",
+    "tailwind-preset.ts",
     "registry",
     "registry.json"
   ],
@@ -74,6 +76,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",

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")
+  })
+})