@flikk/ui 1.0.0-beta.2 → 1.0.0-beta.21

package/dist/utils/colorUtils.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Shared semantic color type and common color maps.
+ *
+ * Components with extra colors extend locally:
+ *   export type SpinnerColor = SemanticColor | 'dark';
+ */
+export type SemanticColor = "neutral" | "primary" | "secondary" | "success" | "warning" | "danger";
+/**
+ * Background colors for semantic colors.
+ * neutral uses neutral-400; others use their base variable.
+ */
+export declare const semanticBgColors: Record<SemanticColor, string>;
+/**
+ * Text colors for semantic colors.
+ * neutral uses text-primary; others use their base variable.
+ */
+export declare const semanticTextColors: Record<SemanticColor, string>;
+/**
+ * Spinner border colors for semantic colors.
+ * Each value is the atomic pair: border color + transparent top.
+ * neutral uses --color-border; others use their base variable.
+ */
+export declare const semanticSpinnerColors: Record<SemanticColor, string>;

package/dist/utils/colorUtils.js

@@ -0,0 +1,45 @@
+/**
+ * Shared semantic color type and common color maps.
+ *
+ * Components with extra colors extend locally:
+ *   export type SpinnerColor = SemanticColor | 'dark';
+ */
+/**
+ * Background colors for semantic colors.
+ * neutral uses neutral-400; others use their base variable.
+ */
+const semanticBgColors = {
+    neutral: "bg-[var(--color-neutral-400)]",
+    primary: "bg-[var(--color-primary)]",
+    secondary: "bg-[var(--color-secondary)]",
+    success: "bg-[var(--color-success)]",
+    warning: "bg-[var(--color-warning)]",
+    danger: "bg-[var(--color-danger)]",
+};
+/**
+ * Text colors for semantic colors.
+ * neutral uses text-primary; others use their base variable.
+ */
+const semanticTextColors = {
+    neutral: "text-[var(--color-text-primary)]",
+    primary: "text-[var(--color-primary)]",
+    secondary: "text-[var(--color-secondary)]",
+    success: "text-[var(--color-success)]",
+    warning: "text-[var(--color-warning)]",
+    danger: "text-[var(--color-danger)]",
+};
+/**
+ * Spinner border colors for semantic colors.
+ * Each value is the atomic pair: border color + transparent top.
+ * neutral uses --color-border; others use their base variable.
+ */
+const semanticSpinnerColors = {
+    neutral: "border-[var(--color-border)] border-t-transparent",
+    primary: "border-[var(--color-primary)] border-t-transparent",
+    secondary: "border-[var(--color-secondary)] border-t-transparent",
+    success: "border-[var(--color-success)] border-t-transparent",
+    warning: "border-[var(--color-warning)] border-t-transparent",
+    danger: "border-[var(--color-danger)] border-t-transparent",
+};
+
+export { semanticBgColors, semanticSpinnerColors, semanticTextColors };

package/dist/utils/dateUtils.d.ts

@@ -116,3 +116,33 @@ export declare const getThisYear: () => DateRange;
  * Get date range for last year
  */
 export declare const getLastYear: () => DateRange;
+/**
+ * Normalise a Date | string to a Date at local midnight.
+ *
+ * ISO date-only strings like "2026-01-15" are parsed as UTC by the native
+ * Date constructor, which can shift the day backward in negative-UTC
+ * timezones.  We detect the YYYY-MM-DD pattern and construct the Date with
+ * local year/month/day to avoid an off-by-one.
+ */
+export declare function toDate(input: Date | string): Date;
+/**
+ * Add (or subtract) a number of calendar days to a date.
+ */
+export declare function addDays(date: Date | string, days: number): Date;
+/**
+ * Check if two dates are the same calendar day.
+ */
+export declare function isSameDay(a: Date, b: Date): boolean;
+/**
+ * Check if a date falls on a weekend (Saturday=6, Sunday=0).
+ */
+export declare function isWeekend(date: Date): boolean;
+/**
+ * Number of calendar days between two dates (inclusive).
+ * e.g. Jan 1 → Jan 3 = 3 days.
+ */
+export declare function getDaysBetween(a: Date | string, b: Date | string): number;
+/**
+ * Get the ISO week number for a date.
+ */
+export declare function getWeekNumber(date: Date): number;

package/dist/utils/dateUtils.js

@@ -73,15 +73,123 @@ const formatDateCustom = (date, formatString, locale = 'en-US') => {
     // Year tokens
     result = result.replace(/YYYY/g, year.toString());
     result = result.replace(/YY/g, year.toString().slice(-2));
-    // Month tokens (MMMM before MMM before MM before M)
-    result = result.replace(/MMMM/g, fullMonths[month - 1]);
-    result = result.replace(/MMM/g, shortMonths[month - 1]);
+    // Month tokens (longest first) — use \x00-wrapped placeholders to prevent collisions
+    result = result.replace(/MMMM/g, `\x00${fullMonths[month - 1]}\x00`);
+    result = result.replace(/MMM/g, `\x00${shortMonths[month - 1]}\x00`);
     result = result.replace(/MM/g, month.toString().padStart(2, '0'));
     result = result.replace(/M/g, month.toString());
-    // Day tokens (DD before D)
+    // Day tokens (longest first)
     result = result.replace(/DD/g, day.toString().padStart(2, '0'));
     result = result.replace(/D/g, day.toString());
+    // Strip placeholders
+    result = result.replace(/\x00/g, '');
     return result;
 };
+/**
+ * Get date range for this week (Monday to Sunday)
+ */
+const getThisWeek = () => {
+    const now = new Date();
+    const dayOfWeek = now.getDay();
+    const mondayOffset = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
+    const start = new Date(now);
+    start.setDate(now.getDate() + mondayOffset);
+    start.setHours(0, 0, 0, 0);
+    const end = new Date(start);
+    end.setDate(start.getDate() + 6);
+    end.setHours(23, 59, 59, 999);
+    return { start, end };
+};
+/**
+ * Get date range for last week (Monday to Sunday)
+ */
+const getLastWeek = () => {
+    const thisWeek = getThisWeek();
+    const start = new Date(thisWeek.start);
+    start.setDate(start.getDate() - 7);
+    const end = new Date(thisWeek.start);
+    end.setDate(end.getDate() - 1);
+    end.setHours(23, 59, 59, 999);
+    return { start, end };
+};
+/**
+ * Get date range for this month
+ */
+const getThisMonth = () => {
+    const now = new Date();
+    const start = new Date(now.getFullYear(), now.getMonth(), 1);
+    start.setHours(0, 0, 0, 0);
+    const end = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+    end.setHours(23, 59, 59, 999);
+    return { start, end };
+};
+/**
+ * Get date range for last month
+ */
+const getLastMonth = () => {
+    const now = new Date();
+    const start = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+    start.setHours(0, 0, 0, 0);
+    const end = new Date(now.getFullYear(), now.getMonth(), 0);
+    end.setHours(23, 59, 59, 999);
+    return { start, end };
+};
+// ---------------------------------------------------------------------------
+// Generic date utilities (shared across components)
+// ---------------------------------------------------------------------------
+/**
+ * Normalise a Date | string to a Date at local midnight.
+ *
+ * ISO date-only strings like "2026-01-15" are parsed as UTC by the native
+ * Date constructor, which can shift the day backward in negative-UTC
+ * timezones.  We detect the YYYY-MM-DD pattern and construct the Date with
+ * local year/month/day to avoid an off-by-one.
+ */
+function toDate(input) {
+    if (typeof input === "string") {
+        const match = input.match(/^(\d{4})-(\d{2})-(\d{2})/);
+        if (match) {
+            return new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]));
+        }
+        const d = new Date(input);
+        d.setHours(0, 0, 0, 0);
+        return d;
+    }
+    const d = new Date(input);
+    d.setHours(0, 0, 0, 0);
+    return d;
+}
+/**
+ * Add (or subtract) a number of calendar days to a date.
+ */
+function addDays(date, days) {
+    const d = toDate(date);
+    d.setDate(d.getDate() + days);
+    return d;
+}
+/**
+ * Check if two dates are the same calendar day.
+ */
+function isSameDay(a, b) {
+    return (a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate());
+}
+/**
+ * Check if a date falls on a weekend (Saturday=6, Sunday=0).
+ */
+function isWeekend(date) {
+    const day = date.getDay();
+    return day === 0 || day === 6;
+}
+/**
+ * Number of calendar days between two dates (inclusive).
+ * e.g. Jan 1 → Jan 3 = 3 days.
+ */
+function getDaysBetween(a, b) {
+    const start = toDate(a);
+    const end = toDate(b);
+    return Math.round((end.getTime() - start.getTime()) / 86400000) + 1;
+}
 
-export { formatDateCustom, formatTimestamp };
+export { addDays, formatDateCustom, formatTimestamp, getDaysBetween, getLastMonth, getLastWeek, getThisMonth, getThisWeek, isSameDay, isWeekend, toDate };

package/dist/utils/formatUtils.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Format a byte count into a human-readable file size string.
+ * Uses binary units (1 KB = 1024 bytes).
+ */
+export declare const formatFileSize: (bytes: number) => string;
+/**
+ * Extract the file extension from a filename, lowercase.
+ * Returns null if no extension is present.
+ */
+export declare const getFileExtension: (filename: string) => string | null;

package/dist/utils/formatUtils.js

@@ -0,0 +1,24 @@
+/**
+ * Format a byte count into a human-readable file size string.
+ * Uses binary units (1 KB = 1024 bytes).
+ */
+const formatFileSize = (bytes) => {
+    if (bytes === 0)
+        return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
+};
+/**
+ * Extract the file extension from a filename, lowercase.
+ * Returns null if no extension is present.
+ */
+const getFileExtension = (filename) => {
+    const dotIndex = filename.lastIndexOf(".");
+    if (dotIndex === -1 || dotIndex === filename.length - 1)
+        return null;
+    return filename.slice(dotIndex + 1).toLowerCase();
+};
+
+export { formatFileSize, getFileExtension };

package/dist/utils/index.d.ts

@@ -1,7 +1,6 @@
 export { cn } from "./cn";
 export { debounce } from "./debounce";
-export { formatTimestamp, formatDate, formatTime, formatDateCustom, formatRelativeTime, isToday, isYesterday, isThisWeek, getLastNDays, getThisWeek, getLastWeek, getThisMonth, getLastMonth, getThisYear, getLastYear, type DateInput, type TimestampOptions, type DateRange, } from "./dateUtils";
-export { useClickOutside } from "./useClickOutside";
+export { formatTimestamp, formatDate, formatTime, formatDateCustom, formatRelativeTime, isToday, isYesterday, isThisWeek, getLastNDays, getThisWeek, getLastWeek, getThisMonth, getLastMonth, getThisYear, getLastYear, toDate, addDays, isSameDay, isWeekend, getDaysBetween, getWeekNumber, type DateInput, type TimestampOptions, type DateRange, } from "./dateUtils";
 export { findNextMatchingOption, isValidTypeaheadChar, TYPEAHEAD_TIMEOUT_MS, type TypeaheadOption, type FindNextMatchingOptionParams, } from "./typeaheadUtils";
 export { timeToMinutes, minutesToTime, getEventDuration, getTotalTimeSlots, getTimeSlotIndex, getTimeSlotForIndex, calculateEventPosition, calculateEventHeight, eventsOverlap, findOverlappingEvents, groupOverlappingEvents, resolveOverlappingEvents, generateTimeGrid, filterEventsByDate, sortEventsByStartTime, separateAllDayEvents, isValidTimeFormat, isValidDateFormat, validateEvent, DEFAULT_GRID_CONFIGS, type CalendarEvent, type GridConfig, type EventPosition, type EventLayout, type TimeSlot, } from "./calendarUtils";
 export { parseOpenAI, parseAnthropic, parseGemini, parseSSELine, SSE_PARSERS, type SSEFormat, type SSEParser, } from "./sseFormatParsers";
@@ -13,3 +12,6 @@ export * from "./stateMachine";
 export * from "./formValidation";
 export { calculateVelocity, clampScroll, detectScrollDirection, isReducedMotion, lerp, calculateScrollProgress, normalizeWheelDelta, isScrollable, getMaxScroll, throttle, } from './smoothScrollUtils';
 export { PerformanceMonitor, usePerformanceMonitor } from './performanceMonitor';
+export { type SemanticColor, semanticBgColors, semanticTextColors, semanticSpinnerColors, } from './colorUtils';
+export { formatFileSize, getFileExtension } from './formatUtils';
+export { generatePalette, generateThemeCSS, type PaletteStep, type GeneratedPalette, type GeneratePaletteOptions, } from './paletteGenerator';

package/dist/utils/paletteGenerator.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Palette Generator Utility
+ *
+ * Converts a hex color to an 11-step OKLCH palette using
+ * Tailwind-matched lightness/chroma curves. The hue is extracted
+ * from the input color and applied across all steps.
+ */
+export interface PaletteStep {
+    /** Tailwind step number: 50, 100, 200 ... 950 */
+    step: number;
+    /** OKLCH CSS string, e.g. "oklch(0.9778 0.0108 270)" */
+    oklch: string;
+    /** Approximate sRGB hex for preview swatches */
+    hex: string;
+}
+export interface GeneratedPalette {
+    /** Semantic name, e.g. "primary" */
+    name: string;
+    /** Extracted OKLCH hue (degrees) */
+    hue: number;
+    /** 11 palette steps from 50 to 950 */
+    steps: PaletteStep[];
+    /** Auto-calculated contrast color (hex) for text on the base step */
+    contrast: 'light' | 'dark';
+}
+export interface GeneratePaletteOptions {
+    /** Scales chroma up/down. Default 1.0 */
+    vibrancy?: number;
+}
+/**
+ * Generate an 11-step OKLCH palette from a single hex color.
+ * Extracts the hue from the input and applies Tailwind-matched
+ * lightness and chroma curves.
+ */
+export declare function generatePalette(hex: string, name?: string, options?: GeneratePaletteOptions): GeneratedPalette | null;
+/**
+ * Generate a complete CSS variable block for all semantic colors.
+ *
+ * @param palettes - Map of semantic name → hex color
+ * @param options - Generation options (vibrancy)
+ * @returns Object with `theme` (for @theme block) and `root` (for :root block) CSS strings
+ */
+export declare function generateThemeCSS(palettes: Record<string, string>, options?: GeneratePaletteOptions): {
+    theme: string;
+    root: string;
+} | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flikk/ui",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.21",
   "description": "A modern React component library built with TypeScript, Tailwind CSS v4, and Framer Motion. Follows the shadcn philosophy with complete className override support.",
   "type": "module",
   "main": "dist/index.js",
@@ -10,32 +10,41 @@
     "*.css",
     "*.scss",
     "./dist/styles.css",
-    "./src/global.scss"
+    "./src/global.scss",
+    "./src/theme-plugin.css"
   ],
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     },
     "./core": {
-      "import": "./dist/components/core/index.js",
-      "types": "./dist/components/core/index.d.ts"
+      "types": "./dist/components/core/index.d.ts",
+      "import": "./dist/components/core/index.js"
+    },
+    "./data-display": {
+      "types": "./dist/components/data-display/index.d.ts",
+      "import": "./dist/components/data-display/index.js"
     },
     "./forms": {
-      "import": "./dist/components/forms/index.js",
-      "types": "./dist/components/forms/index.d.ts"
+      "types": "./dist/components/forms/index.d.ts",
+      "import": "./dist/components/forms/index.js"
     },
     "./charts": {
-      "import": "./dist/components/charts/index.js",
-      "types": "./dist/components/charts/index.d.ts"
+      "types": "./dist/components/charts/index.d.ts",
+      "import": "./dist/components/charts/index.js"
     },
     "./effects": {
-      "import": "./dist/components/effects/index.js",
-      "types": "./dist/components/effects/index.d.ts"
+      "types": "./dist/components/effects/index.d.ts",
+      "import": "./dist/components/effects/index.js"
+    },
+    "./effects/3d": {
+      "types": "./dist/components/effects/3d/index.d.ts",
+      "import": "./dist/components/effects/3d/index.js"
     },
     "./ai": {
-      "import": "./dist/components/ai/index.js",
-      "types": "./dist/components/ai/index.d.ts"
+      "types": "./dist/components/ai/index.d.ts",
+      "import": "./dist/components/ai/index.js"
     },
     "./components/*": {
       "import": "./dist/components/*.js",
@@ -46,18 +55,25 @@
       "default": "./dist/styles.css"
     },
     "./tailwind.preset.cjs": "./tailwind.preset.cjs",
-    "./shadcn-compat.css": "./src/shadcn-compat.css"
+    "./shadcn-compat.css": "./src/shadcn-compat.css",
+    "./theme.css": "./src/theme-plugin.css",
+    "./bg/*": "./dist/bg/*"
   },
   "files": [
     "dist",
     "LICENSE",
     "tailwind.preset.cjs",
-    "src/shadcn-compat.css"
+    "src/shadcn-compat.css",
+    "src/theme-plugin.css",
+    "src/global.scss",
+    "src/styles"
   ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "rollup -c && npm run build:css",
+    "build": "rollup -c && npm run build:css && npm run build:assets",
+    "build:assets": "cp -r public/bg dist/bg",
     "build:css": "tailwindcss -m -i ./src/tailwind-config.css -o ./dist/styles.css",
+    "analyze": "ANALYZE=true rollup -c && open stats.html",
     "watch": "rollup -c -w",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src --ext .ts,.tsx",
@@ -91,17 +107,16 @@
     "npm": ">=10.0.0"
   },
   "peerDependencies": {
-    "@heroicons/react": "^2.2.0",
+    "@heroicons/react": ">=2.0.0",
     "@react-three/drei": ">=10.0.0",
     "@react-three/fiber": ">=9.0.0",
-    "clsx": "^2.1.1",
-    "motion": "^12.19.1",
+    "gsap": ">=3.12.0",
+    "motion": ">=12.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-markdown": "^9.0.1 || ^10.0.0",
     "react-syntax-highlighter": "^15.5.0 || ^16.0.0",
     "remark-gfm": "^4.0.0",
-    "tailwind-merge": "^3.0.2",
     "tailwindcss": "^4.0.9",
     "three": ">=0.170.0"
   },
@@ -123,6 +138,9 @@
     },
     "@react-three/drei": {
       "optional": true
+    },
+    "gsap": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -148,10 +166,10 @@
     "@types/react-syntax-highlighter": "^15.5.11",
     "@types/three": "^0.182.0",
     "autoprefixer": "^10.4.24",
-    "clsx": "^2.1.1",
     "concurrently": "^9.2.1",
     "eslint-plugin-storybook": "^10.2.7",
-    "motion": "^12.33.0",
+    "gsap": "^3.14.2",
+    "motion": "^12.19.1",
     "postcss": "^8.5.3",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
@@ -159,13 +177,14 @@
     "react-syntax-highlighter": "^16.1.0",
     "remark-gfm": "^4.0.1",
     "rollup": "^4.57.1",
+    "rollup-plugin-visualizer": "^7.0.1",
     "storybook": "^10.2.3",
-    "tailwind-merge": "^3.4.0",
     "three": "^0.182.0",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3"
   },
   "dependencies": {
-    "gsap": "^3.14.2"
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.0.2"
   }
 }