flikkui 0.1.0-beta.11

package/dist/types/button.types.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+/**
+ * Button component props
+ * @property {ButtonVariant} variant - The visual style variant of the button
+ * @property {ButtonSize} size - The size of the button
+ * @property {boolean} isLoading - Whether the button is in a loading state
+ * @property {boolean} isDisabled - Whether the button is disabled
+ * @property {React.ReactNode} leftIcon - Icon to display before the button text
+ * @property {React.ReactNode} rightIcon - Icon to display after the button text
+ * @property {ButtonThemeOverrides} theme - Component-level theme overrides
+ */
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    isLoading?: boolean;
+    isDisabled?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    children: React.ReactNode;
+    theme?: ButtonThemeOverrides;
+}
+export type ButtonVariant = "primary" | "secondary" | "tertiary" | "ghost";
+export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
+export interface ButtonThemeOverrides {
+    baseStyle?: Record<string, string>;
+    variants?: Partial<Record<ButtonVariant, Record<string, string>>>;
+    sizes?: Partial<Record<ButtonSize, Record<string, string>>>;
+}

package/dist/utils/calendarUtils.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Calendar utility functions for event positioning, sizing, and layout calculations
+ */
+export interface CalendarEvent {
+    id: string;
+    title: string;
+    startTime: string;
+    endTime: string;
+    date: string;
+    allDay?: boolean;
+    color?: string;
+}
+export interface GridConfig {
+    startTime: string;
+    endTime: string;
+    intervalMinutes: number;
+    pixelsPerSlot: number;
+    showAllDay: boolean;
+}
+export interface EventPosition {
+    top: number;
+    height: number;
+    left: number;
+    width: number;
+    zIndex: number;
+}
+export interface EventLayout {
+    event: CalendarEvent;
+    position: EventPosition;
+    column: number;
+    totalColumns: number;
+}
+export interface TimeSlot {
+    startTime: string;
+    endTime: string;
+    index: number;
+}
+export declare const timeToMinutes: (time: string) => number;
+export declare const minutesToTime: (minutes: number) => string;
+export declare const getEventDuration: (startTime: string, endTime: string) => number;
+export declare const getTotalTimeSlots: (gridConfig: GridConfig) => number;
+export declare const getTimeSlotIndex: (time: string, gridConfig: GridConfig) => number;
+export declare const getTimeSlotForIndex: (index: number, gridConfig: GridConfig) => TimeSlot;
+export declare const calculateEventPosition: (event: CalendarEvent, gridConfig: GridConfig, containerWidth?: number) => EventPosition;
+export declare const calculateEventHeight: (duration: number, intervalMinutes: number, pixelsPerSlot: number) => number;
+export declare const eventsOverlap: (event1: CalendarEvent, event2: CalendarEvent) => boolean;
+export declare const findOverlappingEvents: (events: CalendarEvent[], targetEvent: CalendarEvent) => CalendarEvent[];
+export declare const groupOverlappingEvents: (events: CalendarEvent[]) => CalendarEvent[][];
+export declare const resolveOverlappingEvents: (events: CalendarEvent[], gridConfig: GridConfig, containerWidth?: number) => EventLayout[];
+export declare const generateTimeGrid: (gridConfig: GridConfig) => TimeSlot[];
+export declare const filterEventsByDate: (events: CalendarEvent[], date: string) => CalendarEvent[];
+export declare const sortEventsByStartTime: (events: CalendarEvent[]) => CalendarEvent[];
+export declare const separateAllDayEvents: (events: CalendarEvent[]) => {
+    allDayEvents: CalendarEvent[];
+    timedEvents: CalendarEvent[];
+};
+export declare const isValidTimeFormat: (time: string) => boolean;
+export declare const isValidDateFormat: (date: string) => boolean;
+export declare const validateEvent: (event: CalendarEvent) => string[];
+export declare const DEFAULT_GRID_CONFIGS: Record<string, GridConfig>;

package/dist/utils/cn.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/utils/cn.js

@@ -0,0 +1,12 @@
+import { clsx } from '../node_modules/clsx/dist/clsx.js';
+import { twMerge } from '../node_modules/tailwind-merge/dist/bundle-mjs.js';
+
+function cn() {
+    var inputs = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        inputs[_i] = arguments[_i];
+    }
+    return twMerge(clsx(inputs));
+}
+
+export { cn };

package/dist/utils/dateUtils.d.ts

@@ -0,0 +1,118 @@
+/**
+ * Date and time utility functions for consistent formatting across the component library
+ */
+export type DateInput = Date | string | number;
+export interface TimestampOptions {
+    /**
+     * Show full date and time even for today
+     * @default false
+     */
+    alwaysShowDate?: boolean;
+    /**
+     * Include seconds in time display
+     * @default false
+     */
+    includeSeconds?: boolean;
+    /**
+     * Use 12-hour format instead of 24-hour
+     * @default false
+     */
+    use12Hour?: boolean;
+    /**
+     * Locale for date formatting
+     * @default undefined (uses browser default)
+     */
+    locale?: string;
+}
+/**
+ * Formats a timestamp for display in chat messages, notifications, etc.
+ * Shows time only for today, date + time for other days.
+ */
+export declare const formatTimestamp: (input: DateInput, options?: TimestampOptions) => string;
+/**
+ * Formats a date for display (date only, no time)
+ */
+export declare const formatDate: (input: DateInput, options?: Intl.DateTimeFormatOptions, locale?: string) => string;
+/**
+ * Formats time only (no date)
+ */
+export declare const formatTime: (input: DateInput, options?: {
+    includeSeconds?: boolean;
+    use12Hour?: boolean;
+}, locale?: string) => string;
+/**
+ * Returns a relative time string (e.g., "2 minutes ago", "in 3 hours")
+ */
+export declare const formatRelativeTime: (input: DateInput, locale?: string) => string;
+/**
+ * Checks if a date is today
+ */
+export declare const isToday: (input: DateInput) => boolean;
+/**
+ * Checks if a date is yesterday
+ */
+export declare const isYesterday: (input: DateInput) => boolean;
+/**
+ * Checks if a date is within the current week
+ */
+export declare const isThisWeek: (input: DateInput) => boolean;
+/**
+ * Formats a date using a custom format string
+ * Supports common format tokens for flexible date display
+ *
+ * @param date - The date to format
+ * @param formatString - Format string with tokens (e.g., 'DD MMM YYYY', 'DD/MM/YYYY')
+ * @param locale - Optional locale for month names (default: 'en-US')
+ *
+ * Supported tokens:
+ * - DD: Day with leading zero (01, 02, ..., 31)
+ * - D: Day without leading zero (1, 2, ..., 31)
+ * - MMM: Short month name (Jan, Feb, ..., Dec)
+ * - MMMM: Full month name (January, February, ..., December)
+ * - MM: Month with leading zero (01, 02, ..., 12)
+ * - M: Month without leading zero (1, 2, ..., 12)
+ * - YYYY: Full year (2023, 2024, etc.)
+ * - YY: Two-digit year (23, 24, etc.)
+ *
+ * @example
+ * formatDateCustom(new Date('2023-09-21'), 'DD MMM YYYY') // "21 Sept 2023"
+ * formatDateCustom(new Date('2023-09-21'), 'DD/MM/YYYY') // "21/09/2023"
+ * formatDateCustom(new Date('2023-09-21'), 'MM-DD-YYYY') // "09-21-2023"
+ * formatDateCustom(new Date('2023-09-21'), 'D MMMM YYYY') // "21 September 2023"
+ */
+export declare const formatDateCustom: (date: Date, formatString: string, locale?: string) => string;
+/**
+ * Date range type for utility functions
+ */
+export interface DateRange {
+    start: Date | null;
+    end: Date | null;
+}
+/**
+ * Get date range for the last N days
+ */
+export declare const getLastNDays: (days: number) => DateRange;
+/**
+ * Get date range for this week (Monday to Sunday)
+ */
+export declare const getThisWeek: () => DateRange;
+/**
+ * Get date range for last week (Monday to Sunday)
+ */
+export declare const getLastWeek: () => DateRange;
+/**
+ * Get date range for this month
+ */
+export declare const getThisMonth: () => DateRange;
+/**
+ * Get date range for last month
+ */
+export declare const getLastMonth: () => DateRange;
+/**
+ * Get date range for this year
+ */
+export declare const getThisYear: () => DateRange;
+/**
+ * Get date range for last year
+ */
+export declare const getLastYear: () => DateRange;

package/dist/utils/dateUtils.js

@@ -0,0 +1,86 @@
+import { __assign } from '../node_modules/tslib/tslib.es6.js';
+
+/**
+ * Date and time utility functions for consistent formatting across the component library
+ */
+/**
+ * Formats a timestamp for display in chat messages, notifications, etc.
+ * Shows time only for today, date + time for other days.
+ */
+var formatTimestamp = function (input, options) {
+    if (options === void 0) { options = {}; }
+    var _a = options.alwaysShowDate, alwaysShowDate = _a === void 0 ? false : _a, _b = options.includeSeconds, includeSeconds = _b === void 0 ? false : _b, _c = options.use12Hour, use12Hour = _c === void 0 ? false : _c, locale = options.locale;
+    var date = new Date(input);
+    // Check if date is valid
+    if (isNaN(date.getTime())) {
+        return 'Invalid date';
+    }
+    // Check if date is today
+    var now = new Date();
+    var isToday = date.toDateString() === now.toDateString();
+    var timeOptions = __assign(__assign({ hour: '2-digit', minute: '2-digit' }, (includeSeconds && { second: '2-digit' })), (use12Hour && { hour12: true }));
+    if (isToday && !alwaysShowDate) {
+        // Show time only if today
+        return date.toLocaleTimeString(locale ? [locale] : [], timeOptions);
+    }
+    else {
+        // Show date and time if not today or if alwaysShowDate is true
+        return date.toLocaleDateString(locale ? [locale] : [], __assign({ month: 'short', day: 'numeric' }, timeOptions));
+    }
+};
+/**
+ * Formats a date using a custom format string
+ * Supports common format tokens for flexible date display
+ *
+ * @param date - The date to format
+ * @param formatString - Format string with tokens (e.g., 'DD MMM YYYY', 'DD/MM/YYYY')
+ * @param locale - Optional locale for month names (default: 'en-US')
+ *
+ * Supported tokens:
+ * - DD: Day with leading zero (01, 02, ..., 31)
+ * - D: Day without leading zero (1, 2, ..., 31)
+ * - MMM: Short month name (Jan, Feb, ..., Dec)
+ * - MMMM: Full month name (January, February, ..., December)
+ * - MM: Month with leading zero (01, 02, ..., 12)
+ * - M: Month without leading zero (1, 2, ..., 12)
+ * - YYYY: Full year (2023, 2024, etc.)
+ * - YY: Two-digit year (23, 24, etc.)
+ *
+ * @example
+ * formatDateCustom(new Date('2023-09-21'), 'DD MMM YYYY') // "21 Sept 2023"
+ * formatDateCustom(new Date('2023-09-21'), 'DD/MM/YYYY') // "21/09/2023"
+ * formatDateCustom(new Date('2023-09-21'), 'MM-DD-YYYY') // "09-21-2023"
+ * formatDateCustom(new Date('2023-09-21'), 'D MMMM YYYY') // "21 September 2023"
+ */
+var formatDateCustom = function (date, formatString, locale) {
+    if (locale === void 0) { locale = 'en-US'; }
+    if (!(date instanceof Date) || isNaN(date.getTime())) {
+        return 'Invalid date';
+    }
+    var day = date.getDate();
+    var month = date.getMonth() + 1;
+    var year = date.getFullYear();
+    // Get month names based on locale
+    var shortMonths = Array.from({ length: 12 }, function (_, i) {
+        return new Date(2000, i, 1).toLocaleDateString(locale, { month: 'short' });
+    });
+    var fullMonths = Array.from({ length: 12 }, function (_, i) {
+        return new Date(2000, i, 1).toLocaleDateString(locale, { month: 'long' });
+    });
+    // Replace tokens in order of length (longest first to avoid conflicts)
+    var result = formatString;
+    // 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]);
+    result = result.replace(/MM/g, month.toString().padStart(2, '0'));
+    result = result.replace(/M/g, month.toString());
+    // Day tokens (DD before D)
+    result = result.replace(/DD/g, day.toString().padStart(2, '0'));
+    result = result.replace(/D/g, day.toString());
+    return result;
+};
+
+export { formatDateCustom, formatTimestamp };

package/dist/utils/debounce.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Creates a debounced function that delays invoking the provided function until after
+ * wait milliseconds have elapsed since the last time the debounced function was invoked.
+ *
+ * @param func - The function to debounce
+ * @param wait - The number of milliseconds to delay
+ * @returns A debounced version of the function
+ */
+export declare function debounce<T extends (...args: any[]) => any>(func: T, wait: number): (...args: Parameters<T>) => void;

package/dist/utils/debounce.js

@@ -0,0 +1,21 @@
+/**
+ * Creates a debounced function that delays invoking the provided function until after
+ * wait milliseconds have elapsed since the last time the debounced function was invoked.
+ *
+ * @param func - The function to debounce
+ * @param wait - The number of milliseconds to delay
+ * @returns A debounced version of the function
+ */
+function debounce(func, wait) {
+    var timeoutId;
+    return function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(function () { return func.apply(void 0, args); }, wait);
+    };
+}
+
+export { debounce };

package/dist/utils/index.d.ts

@@ -0,0 +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 { 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';

package/dist/utils/typeaheadUtils.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Typeahead utilities for dropdown components
+ * Provides functions to search and navigate through options by typing
+ */
+export interface TypeaheadOption {
+    /** Display label for the option */
+    label: string;
+    /** Whether the option is disabled */
+    disabled?: boolean;
+}
+export interface FindNextMatchingOptionParams<T extends TypeaheadOption> {
+    /** Array of options to search through */
+    options: T[];
+    /** The character or string to search for */
+    searchChar: string;
+    /** Current highlighted index (to start searching from next item) */
+    currentIndex: number;
+    /** Previous search string (for multi-character matching) */
+    previousSearch?: string;
+}
+/**
+ * Finds the next matching option based on typeahead input
+ * Supports cycling through multiple matches and multi-character search
+ */
+export declare function findNextMatchingOption<T extends TypeaheadOption>({ options, searchChar, currentIndex, previousSearch, }: FindNextMatchingOptionParams<T>): number;
+/**
+ * Checks if a character is valid for typeahead search
+ * Excludes control keys and special navigation keys
+ */
+export declare function isValidTypeaheadChar(key: string): boolean;
+/**
+ * Debounce timeout for resetting typeahead search
+ * After this timeout, the next character starts a new search
+ */
+export declare const TYPEAHEAD_TIMEOUT_MS = 1000;

package/dist/utils/typeaheadUtils.js

@@ -0,0 +1,60 @@
+/**
+ * Typeahead utilities for dropdown components
+ * Provides functions to search and navigate through options by typing
+ */
+/**
+ * Finds the next matching option based on typeahead input
+ * Supports cycling through multiple matches and multi-character search
+ */
+function findNextMatchingOption(_a) {
+    var options = _a.options, searchChar = _a.searchChar, currentIndex = _a.currentIndex, _b = _a.previousSearch, previousSearch = _b === void 0 ? '' : _b;
+    if (!searchChar || options.length === 0) {
+        return -1;
+    }
+    // Build the search string (either new character or continuation)
+    var searchString = searchChar.toLowerCase();
+    var isNewSearch = previousSearch === '' || !searchString.startsWith(previousSearch.toLowerCase());
+    // For single character searches, we want to cycle through matches
+    // For multi-character, we want to find the best match
+    var searchTerm = isNewSearch ? searchString : searchString;
+    // Find all matching options (not disabled)
+    var matchingIndices = [];
+    options.forEach(function (option, index) {
+        if (!option.disabled && option.label.toLowerCase().startsWith(searchTerm)) {
+            matchingIndices.push(index);
+        }
+    });
+    if (matchingIndices.length === 0) {
+        return -1;
+    }
+    // If it's a single character and we're repeating the same character,
+    // cycle to the next match after current position
+    if (searchString.length === 1 && searchString === previousSearch.toLowerCase()) {
+        var currentMatchIndex = matchingIndices.findIndex(function (index) { return index > currentIndex; });
+        return currentMatchIndex >= 0
+            ? matchingIndices[currentMatchIndex]
+            : matchingIndices[0]; // Wrap to first match
+    }
+    // For new searches or multi-character, find the first match after current position
+    // or wrap to the first match if none found after current
+    var nextMatch = matchingIndices.find(function (index) { return index > currentIndex; });
+    return nextMatch !== undefined ? nextMatch : matchingIndices[0];
+}
+/**
+ * Checks if a character is valid for typeahead search
+ * Excludes control keys and special navigation keys
+ */
+function isValidTypeaheadChar(key) {
+    // Allow letters, numbers, and some symbols
+    if (key.length === 1) {
+        return /[a-zA-Z0-9\s]/.test(key);
+    }
+    return false;
+}
+/**
+ * Debounce timeout for resetting typeahead search
+ * After this timeout, the next character starts a new search
+ */
+var TYPEAHEAD_TIMEOUT_MS = 1000;
+
+export { TYPEAHEAD_TIMEOUT_MS, findNextMatchingOption, isValidTypeaheadChar };

package/dist/utils/useClickOutside.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+/**
+ * Custom hook that handles clicks outside of the specified element
+ * @param ref The reference to the element to detect clicks outside of
+ * @param handler The callback function to execute when a click outside is detected
+ */
+export declare const useClickOutside: <T extends HTMLElement | null>(ref: RefObject<T>, handler: (event: MouseEvent | TouchEvent) => void) => void;

package/dist/utils/useClickOutside.js

@@ -0,0 +1,26 @@
+import { useEffect } from 'react';
+
+/**
+ * Custom hook that handles clicks outside of the specified element
+ * @param ref The reference to the element to detect clicks outside of
+ * @param handler The callback function to execute when a click outside is detected
+ */
+var useClickOutside = function (ref, handler) {
+    useEffect(function () {
+        var listener = function (event) {
+            var el = ref.current;
+            if (!el || el.contains(event.target)) {
+                return;
+            }
+            handler(event);
+        };
+        document.addEventListener('mousedown', listener);
+        document.addEventListener('touchstart', listener);
+        return function () {
+            document.removeEventListener('mousedown', listener);
+            document.removeEventListener('touchstart', listener);
+        };
+    }, [ref, handler]);
+};
+
+export { useClickOutside };

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "flikkui",
+  "version": "0.1.0-beta.11",
+  "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",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./components/*": {
+      "import": "./dist/components/*.js",
+      "types": "./dist/components/*.d.ts"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./tailwind.preset.cjs": "./tailwind.preset.cjs",
+    "./shadcn-compat.css": "./src/shadcn-compat.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "tailwind.preset.cjs",
+    "src/shadcn-compat.css"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "rollup -c && npm run build:css",
+    "build:css": "tailwindcss -m -i ./src/global.scss -o ./dist/styles.css",
+    "watch": "rollup -c -w",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx",
+    "clean": "rimraf dist",
+    "storybook": "concurrently \"npm run storybook:css\" \"storybook dev -p 6006\"",
+    "storybook:css": "tailwindcss -w -i ./src/global.scss -o ./src/index.css",
+    "build-storybook": "concurrently \"npm run build-storybook:css\" \"storybook build\"",
+    "build-storybook:css": "tailwindcss -m -i ./src/global.scss -o ./src/index.css",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "typescript",
+    "components",
+    "ui",
+    "tailwindcss",
+    "framer-motion",
+    "component-library",
+    "shadcn",
+    "design-system"
+  ],
+  "author": "Espranza Innovations <g.singh@espranza.net>",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0",
+    "tailwindcss": "^4.0.9"
+  },
+  "dependencies": {
+    "@heroicons/react": "^2.2.0",
+    "clsx": "^2.1.1",
+    "motion": "^12.19.1",
+    "tailwind-merge": "^3.0.2"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.0.0",
+    "@emotion/is-prop-valid": "^1.3.1",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@storybook/addon-a11y": "^9.0.13",
+    "@storybook/addon-docs": "^9.0.13",
+    "@storybook/addon-links": "^9.0.13",
+    "@storybook/addon-onboarding": "^9.0.13",
+    "@storybook/addon-themes": "^9.0.13",
+    "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
+    "@storybook/react-webpack5": "^9.0.13",
+    "@tailwindcss/cli": "^4.0.9",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "autoprefixer": "^10.4.20",
+    "concurrently": "^9.1.2",
+    "motion": "^12.19.1",
+    "postcss": "^8.5.3",
+    "rollup": "^4.34.8",
+    "storybook": "^9.0.13",
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.3"
+  }
+}