@smicolon/fasla-ui 0.2.4 → 0.4.0

package/dist/motion/index.cjs

@@ -0,0 +1,61 @@
+'use strict';
+
+var framerMotion = require('framer-motion');
+
+// src/motion/presets.ts
+function useMotionPresets() {
+  const prefersReduced = framerMotion.useReducedMotion();
+  const durations = {
+    fast: 0.12,
+    base: 0.18,
+    slow: 0.26
+  };
+  const easing = {
+    standard: [0.2, 0, 0, 1],
+    emphasized: [0.2, 0.8, 0.2, 1]
+  };
+  const safe = (preset) => {
+    if (!prefersReduced) return preset;
+    return {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      transition: { duration: durations.fast }
+    };
+  };
+  return {
+    fadeIn: safe({
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      transition: { duration: durations.base, ease: easing.standard }
+    }),
+    slideUp: safe({
+      initial: { opacity: 0, y: 10 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: 6 },
+      transition: { duration: durations.base, ease: easing.standard }
+    }),
+    modalScale: safe({
+      initial: { opacity: 0, scale: 0.98 },
+      animate: { opacity: 1, scale: 1 },
+      exit: { opacity: 0, scale: 0.98 },
+      transition: { duration: durations.base, ease: easing.emphasized }
+    }),
+    stagger: {
+      container: safe({
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        transition: { staggerChildren: 0.06, delayChildren: 0.02 }
+      }),
+      item: safe({
+        initial: { opacity: 0, y: 8 },
+        animate: { opacity: 1, y: 0 },
+        transition: { duration: durations.base, ease: easing.standard }
+      })
+    },
+    meta: { prefersReduced, durations, easing }
+  };
+}
+
+exports.useMotionPresets = useMotionPresets;

package/dist/motion/index.d.cts

@@ -0,0 +1,33 @@
+/**
+ * Motion presets: use these across the app to keep motion consistent.
+ * Rule: do not hardcode durations/easing elsewhere.
+ */
+type MotionPreset = {
+    initial?: Record<string, unknown>;
+    animate?: Record<string, unknown>;
+    exit?: Record<string, unknown>;
+    transition?: Record<string, unknown>;
+};
+declare function useMotionPresets(): {
+    fadeIn: MotionPreset;
+    slideUp: MotionPreset;
+    modalScale: MotionPreset;
+    stagger: {
+        container: MotionPreset;
+        item: MotionPreset;
+    };
+    meta: {
+        prefersReduced: boolean | null;
+        durations: {
+            fast: number;
+            base: number;
+            slow: number;
+        };
+        easing: {
+            standard: number[];
+            emphasized: number[];
+        };
+    };
+};
+
+export { type MotionPreset, useMotionPresets };

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

@@ -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"]
   },
@@ -40,10 +59,19 @@ 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"]
   },
+  {
+    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.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/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 };