@flikk/ui 1.0.0-beta.13 → 1.0.0-beta.15

package/dist/utils/dateUtils.js

@@ -73,16 +73,67 @@ 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)
 // ---------------------------------------------------------------------------
@@ -141,4 +192,4 @@ function getDaysBetween(a, b) {
     return Math.round((end.getTime() - start.getTime()) / 86400000) + 1;
 }
 
-export { addDays, formatDateCustom, formatTimestamp, getDaysBetween, isSameDay, isWeekend, toDate };
+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, toDate, addDays, isSameDay, isWeekend, getDaysBetween, getWeekNumber, type DateInput, type TimestampOptions, type DateRange, } from "./dateUtils";
-export { useClickOutside } from "./useClickOutside";
 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";
@@ -14,4 +13,5 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flikk/ui",
-  "version": "1.0.0-beta.13",
+  "version": "1.0.0-beta.15",
   "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",
@@ -71,6 +71,7 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "rollup -c && npm run build:css",
     "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",
@@ -104,8 +105,11 @@
     "npm": ">=10.0.0"
   },
   "peerDependencies": {
+    "@heroicons/react": ">=2.0.0",
     "@react-three/drei": ">=10.0.0",
     "@react-three/fiber": ">=9.0.0",
+    "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",
@@ -132,11 +136,15 @@
     },
     "@react-three/drei": {
       "optional": true
+    },
+    "gsap": {
+      "optional": true
     }
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.0.0",
     "@emotion/is-prop-valid": "^1.4.0",
+    "@heroicons/react": "^2.2.0",
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.5.0",
     "@rollup/plugin-commonjs": "^29.0.0",
@@ -158,6 +166,8 @@
     "autoprefixer": "^10.4.24",
     "concurrently": "^9.2.1",
     "eslint-plugin-storybook": "^10.2.7",
+    "gsap": "^3.14.2",
+    "motion": "^12.19.1",
     "postcss": "^8.5.3",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
@@ -165,16 +175,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",
     "three": "^0.182.0",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3"
   },
   "dependencies": {
-    "@heroicons/react": "^2.2.0",
     "clsx": "^2.1.1",
-    "gsap": "^3.14.2",
-    "motion": "^12.19.1",
     "tailwind-merge": "^3.0.2"
   }
 }

package/src/global.scss

@@ -506,6 +506,102 @@
   }
 }
 
+/* ─── Neumorphic Surface Utilities ───
+   Usage: <div class="neu-raised rounded-2xl p-4 bg-neutral-800">
+   Uses ::after for gradient border — composes cleanly with bg-image (::before).
+   Content inside needs "relative z-2" to sit above the ::after border.
+*/
+@layer utilities {
+  .neu-raised {
+    position: relative;
+    box-shadow: var(--neu-raised-shadow);
+
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      padding: var(--neu-border-width, 1.5px);
+      background: var(--neu-raised-border);
+      -webkit-mask:
+        linear-gradient(#fff 0 0) content-box,
+        linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor;
+      mask-composite: exclude;
+      pointer-events: none;
+      z-index: 1;
+    }
+  }
+
+  .neu-inset {
+    position: relative;
+    box-shadow: var(--neu-inset-shadow);
+
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      padding: var(--neu-border-width, 1.5px);
+      background: var(--neu-inset-border);
+      -webkit-mask:
+        linear-gradient(#fff 0 0) content-box,
+        linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor;
+      mask-composite: exclude;
+      pointer-events: none;
+      z-index: 1;
+    }
+  }
+
+  /* Circle button — outer groove */
+  .neu-circle-groove {
+    position: relative;
+    border-radius: 9999px;
+    box-shadow: var(--neu-circle-groove-shadow);
+    border: 1px solid rgba(0,0,0,0.12);
+
+    .dark & {
+      border-color: rgba(0,0,0,0.40);
+    }
+  }
+
+  /* Circle button — inner disc (gradient border via ::after) */
+  .neu-circle-disc {
+    position: absolute;
+    inset: 2px;
+    border-radius: 9999px;
+    box-shadow: var(--neu-circle-disc-shadow);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      padding: var(--neu-border-width, 1.5px);
+      background: var(--neu-raised-border);
+      -webkit-mask:
+        linear-gradient(#fff 0 0) content-box,
+        linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor;
+      mask-composite: exclude;
+      pointer-events: none;
+      z-index: 1;
+    }
+  }
+
+  /* Preset border-width modifiers */
+  .neu-border-thin {
+    --neu-border-width: 1px;
+  }
+  .neu-border-thick {
+    --neu-border-width: 2px;
+  }
+}
+
 /* Background image utility system
    Usage: <div className="background-1 background-blur-2xl background-scale-125">
    Uses ::before pseudo-element — content needs "relative z-10" to appear above.
@@ -513,16 +609,7 @@
 */
 @layer utilities {
   /* Shared base setup for all bg-image classes */
-  .bg-image-1,
-  .bg-image-2,
-  .bg-image-3,
-  .bg-image-4,
-  .bg-image-5,
   .bg-image {
-    --bg-image-blur: 0px;
-    --bg-image-scale: 1;
-    --bg-image-opacity: 0.5;
-    --bg-image-blend: multiply;
     position: relative;
     overflow: hidden;
 
@@ -534,51 +621,243 @@
       background-image: var(--bg-image);
       background-size: cover;
       background-position: center;
-      filter: blur(var(--bg-image-blur));
-      transform: scale(var(--bg-image-scale));
-      opacity: var(--bg-image-opacity);
-      mix-blend-mode: var(--bg-image-blend);
+      filter: blur(var(--bg-image-blur, 0px));
+      transform: scale(var(--bg-image-scale, 1));
+      opacity: var(--bg-image-opacity, 0.5);
+      mix-blend-mode: var(--bg-image-blend, multiply);
       pointer-events: none;
     }
   }
 
   /* Image presets */
-  .bg-image-1 { --bg-image: url("/bg/1.jpg"); }
-  .bg-image-2 { --bg-image: url("/bg/2.jpg"); }
-  .bg-image-3 { --bg-image: url("/bg/3.jpg"); }
-  .bg-image-4 { --bg-image: url("/bg/4.jpg"); }
-  .bg-image-5 { --bg-image: url("/bg/5.jpg"); }
+  .bg-image-1 {
+    --bg-image: url("/bg/1.jpg");
+  }
+  .bg-image-2 {
+    --bg-image: url("/bg/2.jpg");
+  }
+  .bg-image-3 {
+    --bg-image: url("/bg/3.jpg");
+  }
+  .bg-image-4 {
+    --bg-image: url("/bg/4.jpg");
+  }
+  .bg-image-5 {
+    --bg-image: url("/bg/5.jpg");
+  }
+  .bg-image-6 {
+    --bg-image: url("/bg/6.jpg");
+  }
+  .bg-image-7 {
+    --bg-image: url("/bg/7.jpg");
+  }
+  .bg-image-8 {
+    --bg-image: url("/bg/8.jpg");
+  }
+  .bg-image-9 {
+    --bg-image: url("/bg/9.jpg");
+  }
+  .bg-image-10 {
+    --bg-image: url("/bg/10.jpg");
+  }
+  .bg-image-11 {
+    --bg-image: url("/bg/11.jpg");
+  }
+  .bg-image-12 {
+    --bg-image: url("/bg/12.jpg");
+  }
+  .bg-image-13 {
+    --bg-image: url("/bg/13.jpg");
+  }
+  .bg-image-14 {
+    --bg-image: url("/bg/14.jpg");
+  }
+  .bg-image-15 {
+    --bg-image: url("/bg/15.jpg");
+  }
+  .bg-image-16 {
+    --bg-image: url("/bg/16.jpg");
+  }
+  .bg-image-17 {
+    --bg-image: url("/bg/17.jpg");
+  }
+  .bg-image-18 {
+    --bg-image: url("/bg/18.jpg");
+  }
+  .bg-image-19 {
+    --bg-image: url("/bg/19.jpg");
+  }
+  .bg-image-20 {
+    --bg-image: url("/bg/20.jpg");
+  }
+  .bg-image-21 {
+    --bg-image: url("/bg/21.jpg");
+  }
+  .bg-image-22 {
+    --bg-image: url("/bg/22.jpg");
+  }
+  .bg-image-23 {
+    --bg-image: url("/bg/23.jpg");
+  }
+  .bg-image-24 {
+    --bg-image: url("/bg/24.jpg");
+  }
 
   /* Blur modifiers */
-  .bg-image-blur-sm { --bg-image-blur: 4px; }
-  .bg-image-blur-md { --bg-image-blur: 8px; }
-  .bg-image-blur-lg { --bg-image-blur: 16px; }
-  .bg-image-blur-xl { --bg-image-blur: 24px; }
-  .bg-image-blur-2xl { --bg-image-blur: 40px; }
-  .bg-image-blur-3xl { --bg-image-blur: 64px; }
+  .bg-image-blur-sm {
+    --bg-image-blur: 4px;
+  }
+  .bg-image-blur-md {
+    --bg-image-blur: 8px;
+  }
+  .bg-image-blur-lg {
+    --bg-image-blur: 16px;
+  }
+  .bg-image-blur-xl {
+    --bg-image-blur: 24px;
+  }
+  .bg-image-blur-2xl {
+    --bg-image-blur: 40px;
+  }
+  .bg-image-blur-3xl {
+    --bg-image-blur: 64px;
+  }
 
   /* Scale modifiers */
-  .bg-image-scale-105 { --bg-image-scale: 1.05; }
-  .bg-image-scale-110 { --bg-image-scale: 1.1; }
-  .bg-image-scale-125 { --bg-image-scale: 1.25; }
-  .bg-image-scale-150 { --bg-image-scale: 1.5; }
+  .bg-image-scale-105 {
+    --bg-image-scale: 1.05;
+  }
+  .bg-image-scale-110 {
+    --bg-image-scale: 1.1;
+  }
+  .bg-image-scale-125 {
+    --bg-image-scale: 1.25;
+  }
+  .bg-image-scale-150 {
+    --bg-image-scale: 1.5;
+  }
 
   /* Opacity modifiers */
-  .bg-image-opacity-25 { --bg-image-opacity: 0.25; }
-  .bg-image-opacity-50 { --bg-image-opacity: 0.5; }
-  .bg-image-opacity-75 { --bg-image-opacity: 0.75; }
+  .bg-image-opacity-0 {
+    --bg-image-opacity: 0;
+  }
+  .bg-image-opacity-5 {
+    --bg-image-opacity: 0.05;
+  }
+  .bg-image-opacity-10 {
+    --bg-image-opacity: 0.1;
+  }
+  .bg-image-opacity-15 {
+    --bg-image-opacity: 0.15;
+  }
+  .bg-image-opacity-20 {
+    --bg-image-opacity: 0.2;
+  }
+  .bg-image-opacity-25 {
+    --bg-image-opacity: 0.25;
+  }
+  .bg-image-opacity-30 {
+    --bg-image-opacity: 0.3;
+  }
+  .bg-image-opacity-35 {
+    --bg-image-opacity: 0.35;
+  }
+  .bg-image-opacity-40 {
+    --bg-image-opacity: 0.4;
+  }
+  .bg-image-opacity-45 {
+    --bg-image-opacity: 0.45;
+  }
+  .bg-image-opacity-50 {
+    --bg-image-opacity: 0.5;
+  }
+  .bg-image-opacity-55 {
+    --bg-image-opacity: 0.55;
+  }
+  .bg-image-opacity-60 {
+    --bg-image-opacity: 0.6;
+  }
+  .bg-image-opacity-65 {
+    --bg-image-opacity: 0.65;
+  }
+  .bg-image-opacity-70 {
+    --bg-image-opacity: 0.7;
+  }
+  .bg-image-opacity-75 {
+    --bg-image-opacity: 0.75;
+  }
+  .bg-image-opacity-80 {
+    --bg-image-opacity: 0.8;
+  }
+  .bg-image-opacity-85 {
+    --bg-image-opacity: 0.85;
+  }
+  .bg-image-opacity-90 {
+    --bg-image-opacity: 0.9;
+  }
+  .bg-image-opacity-95 {
+    --bg-image-opacity: 0.95;
+  }
+  .bg-image-opacity-100 {
+    --bg-image-opacity: 1;
+  }
 
   /* Blend mode modifiers */
-  .bg-image-blend-multiply { --bg-image-blend: multiply; }
-  .bg-image-blend-overlay { --bg-image-blend: overlay; }
-  .bg-image-blend-soft-light { --bg-image-blend: soft-light; }
-  .bg-image-blend-normal { --bg-image-blend: normal; }
+  .bg-image-blend-normal {
+    --bg-image-blend: normal;
+  }
+  .bg-image-blend-multiply {
+    --bg-image-blend: multiply;
+  }
+  .bg-image-blend-screen {
+    --bg-image-blend: screen;
+  }
+  .bg-image-blend-overlay {
+    --bg-image-blend: overlay;
+  }
+  .bg-image-blend-darken {
+    --bg-image-blend: darken;
+  }
+  .bg-image-blend-lighten {
+    --bg-image-blend: lighten;
+  }
+  .bg-image-blend-color-dodge {
+    --bg-image-blend: color-dodge;
+  }
+  .bg-image-blend-color-burn {
+    --bg-image-blend: color-burn;
+  }
+  .bg-image-blend-hard-light {
+    --bg-image-blend: hard-light;
+  }
+  .bg-image-blend-soft-light {
+    --bg-image-blend: soft-light;
+  }
+  .bg-image-blend-difference {
+    --bg-image-blend: difference;
+  }
+  .bg-image-blend-exclusion {
+    --bg-image-blend: exclusion;
+  }
+  .bg-image-blend-hue {
+    --bg-image-blend: hue;
+  }
+  .bg-image-blend-saturation {
+    --bg-image-blend: saturation;
+  }
+  .bg-image-blend-color {
+    --bg-image-blend: color;
+  }
+  .bg-image-blend-luminosity {
+    --bg-image-blend: luminosity;
+  }
 }
 
 /* Apply fonts globally */
 html,
 body {
   font-family: var(--font-family-base);
+  font-size: 14px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -661,13 +940,15 @@ body {
 /* Progress bar indeterminate animation */
 @keyframes progress-indeterminate {
   0% {
-    transform: translateX(-100%);
+    left: -33%;
+    width: 33%;
   }
   50% {
-    transform: translateX(200%);
+    left: 40%;
+    width: 45%;
   }
   100% {
-    transform: translateX(-100%);
+    left: 100%;
+    width: 33%;
   }
 }
-