@smicolon/fasla-ui 0.3.0 → 0.4.1

package/dist/registry/index.cjs

@@ -0,0 +1,179 @@
+'use strict';
+
+// src/registry/index.ts
+var registry = [
+  // UI Primitives
+  {
+    name: "button",
+    type: "ui",
+    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", "lucide-react"],
+    categories: ["primitives", "forms"]
+  },
+  {
+    name: "input",
+    type: "ui",
+    title: "Input",
+    description: "An input component with variants for validation states and icon support.",
+    sourcePath: "registry/ui/input",
+    dependencies: ["class-variance-authority"],
+    categories: ["primitives", "forms"]
+  },
+  {
+    name: "card",
+    type: "ui",
+    title: "Card",
+    description: "A card component with header, content, and footer sections.",
+    sourcePath: "registry/ui/card",
+    categories: ["primitives", "layout"]
+  },
+  {
+    name: "badge",
+    type: "ui",
+    title: "Badge",
+    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"]
+  },
+  {
+    name: "skeleton",
+    type: "ui",
+    title: "Skeleton",
+    description: "Loading placeholders that replace shadcn's Skeleton: a plain block plus text, avatar, list item and card shapes that stay still under reduced motion.",
+    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",
+    type: "block",
+    title: "App Shell",
+    description: "Application shell with sidebar, header, and content area.",
+    sourcePath: "registry/blocks/app-shell",
+    categories: ["layout", "application"]
+  },
+  {
+    name: "page-header",
+    type: "block",
+    title: "Page Header",
+    description: "Page header with title, breadcrumb, description, and actions.",
+    sourcePath: "registry/blocks/page-header",
+    categories: ["layout", "navigation"]
+  },
+  {
+    name: "empty-state",
+    type: "block",
+    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"]
+  },
+  {
+    name: "form-section",
+    type: "block",
+    title: "Form Section",
+    description: "Form section with title, description, fields, and actions.",
+    sourcePath: "registry/blocks/form-section",
+    categories: ["forms", "layout"]
+  },
+  {
+    name: "data-table",
+    type: "block",
+    title: "Data Table",
+    description: "Data table with sorting, pagination, and custom cell rendering.",
+    sourcePath: "registry/blocks/data-table",
+    categories: ["data-display", "tables"]
+  },
+  // Effects
+  {
+    name: "shimmer-button",
+    type: "effect",
+    title: "Shimmer Button",
+    description: "A button with animated shimmer effect.",
+    sourcePath: "registry/effects/shimmer-button",
+    dependencies: ["framer-motion"],
+    categories: ["effects", "buttons"]
+  },
+  {
+    name: "animated-gradient",
+    type: "effect",
+    title: "Animated Gradient",
+    description: "Animated gradient background and text effects.",
+    sourcePath: "registry/effects/animated-gradient",
+    dependencies: ["framer-motion"],
+    categories: ["effects", "backgrounds"]
+  },
+  {
+    name: "text-reveal",
+    type: "effect",
+    title: "Text Reveal",
+    description: "Character and word reveal animations.",
+    sourcePath: "registry/effects/text-reveal",
+    dependencies: ["framer-motion"],
+    categories: ["effects", "text"]
+  },
+  {
+    name: "border-beam",
+    type: "effect",
+    title: "Border Beam",
+    description: "Animated border beam and glowing border effects.",
+    sourcePath: "registry/effects/border-beam",
+    dependencies: ["framer-motion"],
+    categories: ["effects", "borders"]
+  },
+  {
+    name: "spotlight",
+    type: "effect",
+    title: "Spotlight",
+    description: "Cursor-following spotlight effect.",
+    sourcePath: "registry/effects/spotlight",
+    dependencies: ["framer-motion"],
+    categories: ["effects", "interactive"]
+  }
+];
+function getRegistryItem(name) {
+  return registry.find((item) => item.name === name);
+}
+function getRegistryItemsByType(type) {
+  return registry.filter((item) => item.type === type);
+}
+function getRegistryItemsByCategory(category) {
+  return registry.filter((item) => item.categories?.includes(category));
+}
+
+exports.getRegistryItem = getRegistryItem;
+exports.getRegistryItemsByCategory = getRegistryItemsByCategory;
+exports.getRegistryItemsByType = getRegistryItemsByType;
+exports.registry = registry;

package/dist/registry/index.d.cts

@@ -0,0 +1,17 @@
+type RegistryItemType = "ui" | "block" | "effect" | "hook";
+type RegistryItem = {
+    name: string;
+    type: RegistryItemType;
+    title: string;
+    description: string;
+    sourcePath: string;
+    dependencies?: string[];
+    registryDependencies?: string[];
+    categories?: string[];
+};
+declare const registry: RegistryItem[];
+declare function getRegistryItem(name: string): RegistryItem | undefined;
+declare function getRegistryItemsByType(type: RegistryItemType): RegistryItem[];
+declare function getRegistryItemsByCategory(category: string): RegistryItem[];
+
+export { type RegistryItem, type RegistryItemType, getRegistryItem, getRegistryItemsByCategory, getRegistryItemsByType, registry };

package/dist/registry/index.js

@@ -59,7 +59,7 @@ var registry = [
     name: "skeleton",
     type: "ui",
     title: "Skeleton",
-    description: "Loading skeleton placeholders with pre-built variants for text, avatars, and cards.",
+    description: "Loading placeholders that replace shadcn's Skeleton: a plain block plus text, avatar, list item and card shapes that stay still under reduced motion.",
     sourcePath: "registry/ui/skeleton",
     categories: ["primitives", "feedback"]
   },

package/dist/tokens/index.cjs

@@ -0,0 +1,77 @@
+'use strict';
+
+// src/tokens/model.ts
+var baseTokens = {
+  radius: { sm: "0.5rem", md: "0.75rem", lg: "1rem" },
+  spacing: { densityMultiplier: { compact: 0.9, comfortable: 1, spacious: 1.1 } },
+  // 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 = {
+  // 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")
+  },
+  // 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")
+  }
+};
+
+exports.baseTokens = baseTokens;
+exports.semanticColor = semanticColor;
+exports.tailwindSemanticColors = tailwindSemanticColors;

package/dist/tokens/index.d.cts

@@ -0,0 +1,124 @@
+type Density = "compact" | "comfortable" | "spacious";
+interface TokenSet {
+    radius: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    spacing: {
+        /** Multipliers for vertical rhythm based on density */
+        densityMultiplier: Record<Density, number>;
+    };
+    typography: {
+        fontFamily: string;
+        baseFontSizePx: number;
+        lineHeight: number;
+    };
+    motion: {
+        durationsMs: {
+            fast: number;
+            base: number;
+            slow: number;
+        };
+    };
+}
+declare const baseTokens: TokenSet;
+
+/**
+ * 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: {
+    background: string;
+    foreground: string;
+    card: {
+        DEFAULT: string;
+        foreground: string;
+    };
+    popover: {
+        DEFAULT: string;
+        foreground: string;
+    };
+    primary: {
+        DEFAULT: string;
+        foreground: string;
+    };
+    secondary: {
+        DEFAULT: string;
+        foreground: string;
+    };
+    muted: {
+        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, semanticColor, tailwindSemanticColors };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smicolon/fasla-ui",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "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",
@@ -84,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/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", () => {

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

@@ -99,18 +99,26 @@ export function EmptyState({
 /** Pre-built empty state for no search results */
 export function EmptySearchResults({
   query,
-  onClear,
   title,
   description,
-  ...props
+  ...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
       // ?? rather than a later spread, so an undefined title keeps the English one

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

package/registry/blocks/sidebar/Sidebar.tsx

@@ -20,6 +20,11 @@ const widthClasses = {
   lg: "w-72",
 }
 
+/** The enclosing Sidebar's onCollapsedChange, for SidebarCollapseButton. */
+const SidebarCollapsedChangeContext = React.createContext<
+  ((collapsed: boolean) => void) | undefined
+>(undefined)
+
 export function Sidebar({
   collapsed = false,
   onCollapsedChange,
@@ -29,16 +34,18 @@ export function Sidebar({
   ...props
 }: SidebarProps) {
   return (
-    <aside
-      className={cn(
-        "flex h-full flex-col border-e bg-background transition-all duration-200",
-        collapsed ? "w-16" : widthClasses[width],
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </aside>
+    <SidebarCollapsedChangeContext.Provider value={onCollapsedChange}>
+      <aside
+        className={cn(
+          "flex h-full flex-col border-e bg-background transition-all duration-200",
+          collapsed ? "w-16" : widthClasses[width],
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </aside>
+    </SidebarCollapsedChangeContext.Provider>
   )
 }
 
@@ -174,9 +181,19 @@ export function SidebarCollapseButton({
   className,
   ...props
 }: SidebarCollapseButtonProps) {
+  const onSidebarCollapsedChange = React.useContext(SidebarCollapsedChangeContext)
+
+  // Tells the enclosing Sidebar too, once if both were given the same handler
+  const toggle = () => {
+    onCollapsedChange(!collapsed)
+    if (onSidebarCollapsedChange && onSidebarCollapsedChange !== onCollapsedChange) {
+      onSidebarCollapsedChange(!collapsed)
+    }
+  }
+
   return (
     <button
-      onClick={() => onCollapsedChange(!collapsed)}
+      onClick={toggle}
       className={cn(
         "flex h-8 w-8 items-center justify-center rounded-md hover:bg-accent",
         className

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

@@ -60,8 +60,9 @@ export function StatsCard({
             <span
               className={cn(
                 "inline-flex items-center gap-1 font-medium",
-                trend.direction === "up" && "text-green-600 dark:text-green-400",
-                trend.direction === "down" && "text-red-600 dark:text-red-400",
+                // The tokens already change with the mode, so no dark: variants.
+                trend.direction === "up" && "text-success",
+                trend.direction === "down" && "text-destructive",
                 trend.direction === "neutral" && "text-muted-foreground"
               )}
             >

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

@@ -13,14 +13,10 @@ const filledList = (colors: string[] | undefined, fallback: string[]) => {
   return usable.length ? usable : fallback
 }
 
-const GRADIENT_COLORS = [
-  "var(--primary)",
-  "var(--secondary)",
-  "hsl(280 100% 70%)",
-  "hsl(200 100% 70%)",
-]
+// Theme tokens only, so the gradient follows the project's palette and mode.
+const GRADIENT_COLORS = ["var(--primary)", "var(--secondary)", "var(--chart-5)", "var(--info)"]
 
-const TEXT_COLORS = ["var(--primary)", "hsl(280 100% 70%)", "var(--primary)"]
+const TEXT_COLORS = ["var(--primary)", "var(--chart-5)", "var(--primary)"]
 
 export interface AnimatedGradientProps
   extends React.HTMLAttributes<HTMLDivElement> {