@flikk/ui 1.0.0-beta.1 → 1.0.0-beta.3

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

@@ -83,5 +83,62 @@ const formatDateCustom = (date, formatString, locale = 'en-US') => {
     result = result.replace(/D/g, day.toString());
     return result;
 };
+// ---------------------------------------------------------------------------
+// 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, isSameDay, isWeekend, toDate };

package/dist/utils/index.d.ts

@@ -1,6 +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 { 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";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flikk/ui",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.3",
   "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",
@@ -21,6 +21,10 @@
       "import": "./dist/components/core/index.js",
       "types": "./dist/components/core/index.d.ts"
     },
+    "./data-display": {
+      "import": "./dist/components/data-display/index.js",
+      "types": "./dist/components/data-display/index.d.ts"
+    },
     "./forms": {
       "import": "./dist/components/forms/index.js",
       "types": "./dist/components/forms/index.d.ts"
@@ -41,7 +45,10 @@
       "import": "./dist/components/*.js",
       "types": "./dist/components/*.d.ts"
     },
-    "./styles.css": "./dist/styles.css",
+    "./styles.css": {
+      "style": "./dist/styles.css",
+      "default": "./dist/styles.css"
+    },
     "./tailwind.preset.cjs": "./tailwind.preset.cjs",
     "./shadcn-compat.css": "./src/shadcn-compat.css"
   },

package/dist/components/core/Card/CardDescription.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { CardDescriptionProps } from './Card.types';
-export declare const CardDescription: React.ForwardRefExoticComponent<CardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;

package/dist/components/core/Card/CardDescription.js

@@ -1,11 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import React__default from 'react';
-import { cn } from '../../../utils/cn.js';
-import { cardTheme } from './Card.theme.js';
-
-const CardDescription = React__default.forwardRef(({ children, className, ...props }, ref) => {
-    return (jsx("div", { ref: ref, className: cn(cardTheme.descriptionStyle, className), ...props, children: children }));
-});
-CardDescription.displayName = 'CardDescription';
-
-export { CardDescription };

package/dist/components/core/Modal/ModalDescription.d.ts

@@ -1,5 +0,0 @@
-import { ModalDescriptionProps } from "./Modal.types";
-export declare const ModalDescription: {
-    ({ children, className, ...props }: ModalDescriptionProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};

package/dist/components/core/Modal/ModalDescription.js

@@ -1,11 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { cn } from '../../../utils/cn.js';
-import { useModalContext } from './Modal.js';
-
-const ModalDescription = ({ children, className, ...props }) => {
-    const { theme, descriptionId } = useModalContext();
-    return (jsx("p", { id: descriptionId, className: cn(theme.description, className), ...props, children: children }));
-};
-ModalDescription.displayName = "Modal.Description";
-
-export { ModalDescription };

package/dist/components/core/ProgressiveBlur/ProgressiveBlur.d.ts

@@ -1,34 +0,0 @@
-import React, { CSSProperties, PropsWithChildren } from "react";
-export type ProgressiveBlurProps = PropsWithChildren<{
-    position?: "top" | "bottom" | "left" | "right";
-    strength?: number;
-    height?: string;
-    width?: string;
-    divCount?: number;
-    exponential?: boolean;
-    zIndex?: number;
-    animated?: boolean | "scroll";
-    duration?: string;
-    easing?: string;
-    opacity?: number;
-    curve?: "linear" | "bezier" | "ease-in" | "ease-out" | "ease-in-out";
-    responsive?: boolean;
-    mobileHeight?: string;
-    tabletHeight?: string;
-    desktopHeight?: string;
-    mobileWidth?: string;
-    tabletWidth?: string;
-    desktopWidth?: string;
-    preset?: "top" | "bottom" | "left" | "right" | "subtle" | "intense" | "smooth" | "sharp" | "header" | "footer" | "sidebar" | "page-header" | "page-footer";
-    gpuOptimized?: boolean;
-    hoverIntensity?: number;
-    target?: "parent" | "page";
-    onAnimationComplete?: () => void;
-    className?: string;
-    style?: CSSProperties;
-}>;
-export declare const ProgressiveBlur: React.NamedExoticComponent<ProgressiveBlurProps> & {
-    displayName: string;
-    PRESETS: Record<string, Partial<ProgressiveBlurProps>>;
-    CURVE_FUNCTIONS: Record<string, (p: number) => number>;
-};

package/dist/components/core/ProgressiveBlur/ProgressiveBlur.js

@@ -1,218 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { useRef, useState, useMemo, useEffect } from 'react';
-
-const DEFAULT_CONFIG = {
-    position: "bottom",
-    strength: 2,
-    height: "6rem",
-    divCount: 5,
-    exponential: false,
-    zIndex: 1000,
-    animated: false,
-    duration: "0.3s",
-    easing: "ease-out",
-    opacity: 1,
-    curve: "linear",
-    responsive: false,
-    target: "parent",
-    className: "",
-    style: {},
-};
-const PRESETS = {
-    top: { position: "top", height: "6rem" },
-    bottom: { position: "bottom", height: "6rem" },
-    left: { position: "left", height: "6rem" },
-    right: { position: "right", height: "6rem" },
-    subtle: { height: "4rem", strength: 1, opacity: 0.8, divCount: 3 },
-    intense: { height: "10rem", strength: 4, divCount: 8, exponential: true },
-    smooth: { height: "8rem", curve: "bezier", divCount: 10 },
-    sharp: { height: "5rem", curve: "linear", divCount: 4 },
-    header: { position: "top", height: "8rem", curve: "ease-out" },
-    footer: { position: "bottom", height: "8rem", curve: "ease-out" },
-    sidebar: { position: "left", height: "6rem", strength: 2.5 },
-    "page-header": {
-        position: "top",
-        height: "10rem",
-        target: "page",
-        strength: 3,
-    },
-    "page-footer": {
-        position: "bottom",
-        height: "10rem",
-        target: "page",
-        strength: 3,
-    },
-};
-const CURVE_FUNCTIONS = {
-    linear: (p) => p,
-    bezier: (p) => p * p * (3 - 2 * p),
-    "ease-in": (p) => p * p,
-    "ease-out": (p) => 1 - Math.pow(1 - p, 2),
-    "ease-in-out": (p) => (p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2),
-};
-const mergeConfigs = (...configs) => {
-    return configs.reduce((acc, config) => ({ ...acc, ...config }), {});
-};
-const getGradientDirection = (position) => {
-    const directions = {
-        top: "to top",
-        bottom: "to bottom",
-        left: "to left",
-        right: "to right",
-    };
-    return directions[position] || "to bottom";
-};
-const debounce = (fn, wait) => {
-    let t;
-    return (...a) => {
-        clearTimeout(t);
-        t = setTimeout(() => fn(...a), wait);
-    };
-};
-const useResponsiveDimension = (responsive, config, key) => {
-    const [val, setVal] = useState(config[key]);
-    useEffect(() => {
-        if (!responsive)
-            return;
-        const calc = () => {
-            const w = window.innerWidth;
-            let v = config[key];
-            const cap = (s) => s.charAt(0).toUpperCase() + s.slice(1);
-            const k = cap(key);
-            if (w <= 480 && config["mobile" + k])
-                v = config["mobile" + k];
-            else if (w <= 768 && config["tablet" + k])
-                v = config["tablet" + k];
-            else if (w <= 1024 && config["desktop" + k])
-                v = config["desktop" + k];
-            setVal(v);
-        };
-        const deb = debounce(calc, 100);
-        calc();
-        window.addEventListener("resize", deb);
-        return () => window.removeEventListener("resize", deb);
-    }, [responsive, config, key]);
-    return responsive ? val : config[key];
-};
-const useIntersectionObserver = (ref, shouldObserve = false) => {
-    const [isVisible, setIsVisible] = useState(!shouldObserve);
-    useEffect(() => {
-        if (!shouldObserve || !ref.current)
-            return;
-        const observer = new IntersectionObserver(([entry]) => setIsVisible(entry.isIntersecting), { threshold: 0.1 });
-        observer.observe(ref.current);
-        return () => observer.disconnect();
-    }, [ref, shouldObserve]);
-    return isVisible;
-};
-const ProgressiveBlurBase = (props) => {
-    const containerRef = useRef(null);
-    const [isHovered, setIsHovered] = useState(false);
-    const config = useMemo(() => {
-        const presetConfig = props.preset && PRESETS[props.preset] ? PRESETS[props.preset] : {};
-        return mergeConfigs(DEFAULT_CONFIG, presetConfig, props);
-    }, [props]);
-    const responsiveHeight = useResponsiveDimension(config.responsive, config, "height");
-    const responsiveWidth = useResponsiveDimension(config.responsive, config, "width");
-    const isVisible = useIntersectionObserver(containerRef, config.animated === "scroll");
-    const blurDivs = useMemo(() => {
-        const divs = [];
-        const increment = 100 / config.divCount;
-        const currentStrength = isHovered && config.hoverIntensity
-            ? config.strength * config.hoverIntensity
-            : config.strength;
-        const curveFunc = CURVE_FUNCTIONS[config.curve] || CURVE_FUNCTIONS.linear;
-        for (let i = 1; i <= config.divCount; i++) {
-            let progress = i / config.divCount;
-            progress = curveFunc(progress);
-            let blurValue;
-            if (config.exponential) {
-                blurValue =
-                    Math.pow(2, progress * 4) * 0.0625 * currentStrength;
-            }
-            else {
-                blurValue = 0.0625 * (progress * config.divCount + 1) * currentStrength;
-            }
-            const p1 = Math.round((increment * i - increment) * 10) / 10;
-            const p2 = Math.round(increment * i * 10) / 10;
-            const p3 = Math.round((increment * i + increment) * 10) / 10;
-            const p4 = Math.round((increment * i + increment * 2) * 10) / 10;
-            let gradient = `transparent ${p1}%, black ${p2}%`;
-            if (p3 <= 100)
-                gradient += `, black ${p3}%`;
-            if (p4 <= 100)
-                gradient += `, transparent ${p4}%`;
-            const direction = getGradientDirection(config.position);
-            const divStyle = {
-                maskImage: `linear-gradient(${direction}, ${gradient})`,
-                WebkitMaskImage: `linear-gradient(${direction}, ${gradient})`,
-                backdropFilter: `blur(${blurValue.toFixed(3)}rem)`,
-                opacity: config.opacity,
-                transition: config.animated && config.animated !== "scroll"
-                    ? `backdrop-filter ${config.duration} ${config.easing}`
-                    : undefined,
-            };
-            divs.push(jsx("div", { className: "absolute inset-0", style: divStyle }, i));
-        }
-        return divs;
-    }, [config, isHovered]);
-    const containerStyle = useMemo(() => {
-        const isVertical = ["top", "bottom"].includes(config.position);
-        const isHorizontal = ["left", "right"].includes(config.position);
-        const isPageTarget = config.target === "page";
-        const baseStyle = {
-            position: isPageTarget ? "fixed" : "absolute",
-            pointerEvents: config.hoverIntensity ? "auto" : "none",
-            opacity: isVisible ? 1 : 0,
-            transition: config.animated
-                ? `opacity ${config.duration} ${config.easing}`
-                : undefined,
-            zIndex: isPageTarget ? config.zIndex + 100 : config.zIndex,
-            ...config.style,
-        };
-        if (isVertical) {
-            baseStyle.height = responsiveHeight;
-            baseStyle.width = responsiveWidth || "100%";
-            baseStyle[config.position] = 0;
-            baseStyle.left = 0;
-            baseStyle.right = 0;
-        }
-        else if (isHorizontal) {
-            baseStyle.width = responsiveWidth || responsiveHeight;
-            baseStyle.height = "100%";
-            baseStyle[config.position] = 0;
-            baseStyle.top = 0;
-            baseStyle.bottom = 0;
-        }
-        return baseStyle;
-    }, [config, responsiveHeight, responsiveWidth, isVisible]);
-    const { hoverIntensity, animated, onAnimationComplete, duration } = config;
-    useEffect(() => {
-        if (isVisible && animated === "scroll" && onAnimationComplete) {
-            const t = setTimeout(() => onAnimationComplete(), parseFloat(duration) * 1000);
-            return () => clearTimeout(t);
-        }
-    }, [isVisible, animated, onAnimationComplete, duration]);
-    return (jsxs("div", { ref: containerRef, className: `gradual-blur relative isolate ${config.target === "page" ? "gradual-blur-page" : "gradual-blur-parent"} ${config.className}`, style: containerStyle, onMouseEnter: hoverIntensity ? () => setIsHovered(true) : undefined, onMouseLeave: hoverIntensity ? () => setIsHovered(false) : undefined, children: [jsx("div", { className: "relative w-full h-full", children: blurDivs }), props.children && jsx("div", { className: "relative", children: props.children })] }));
-};
-const ProgressiveBlur = Object.assign(React__default.memo(ProgressiveBlurBase), {
-    displayName: "ProgressiveBlur",
-    PRESETS,
-    CURVE_FUNCTIONS,
-});
-const injectStyles = () => {
-    if (typeof document === "undefined")
-        return;
-    const id = "gradual-blur-styles";
-    if (document.getElementById(id))
-        return;
-    const el = document.createElement("style");
-    el.id = id;
-    el.textContent = `.gradual-blur{pointer-events:none;transition:opacity .3s ease-out}.gradual-blur-inner{pointer-events:none}`;
-    document.head.appendChild(el);
-};
-if (typeof document !== "undefined") {
-    injectStyles();
-}
-
-export { ProgressiveBlur };

package/dist/components/core/ProgressiveBlur/ProgressiveBlur.theme.d.ts

@@ -1,9 +0,0 @@
-export declare const progressiveBlurTheme: {
-    readonly baseStyle: "absolute pointer-events-none z-10";
-    readonly positions: {
-        readonly top: "top-0 left-0 right-0";
-        readonly bottom: "bottom-0 left-0 right-0";
-        readonly left: "left-0 top-0 bottom-0";
-        readonly right: "right-0 top-0 bottom-0";
-    };
-};

package/dist/components/core/ProgressiveBlur/ProgressiveBlur.types.d.ts

@@ -1,48 +0,0 @@
-import React from "react";
-export type ProgressiveBlurPosition = "top" | "bottom" | "left" | "right";
-export interface ProgressiveBlurProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Position(s) where the blur effect should be applied
-     * Can be a single position or array of positions
-     */
-    position: ProgressiveBlurPosition | ProgressiveBlurPosition[];
-    /**
-     * Blur intensity in pixels
-     * @default 8
-     */
-    blurIntensity?: number;
-    /**
-     * Custom blur levels array for more control
-     * If provided, overrides blurIntensity
-     */
-    blurLevels?: number[];
-    /**
-     * Number of blur layers to generate for the gradient effect
-     * Higher numbers result in smoother gradients but may impact performance
-     * @default 8
-     */
-    layers?: number;
-    /**
-     * Size of the blur region (height for top/bottom, width for left/right)
-     * @default "40px"
-     */
-    size?: string;
-    /**
-     * Custom className for styling overrides
-     */
-    className?: string;
-    /**
-     * Theme overrides
-     */
-    theme?: ProgressiveBlurThemeOverrides;
-}
-export interface ProgressiveBlurThemeOverrides {
-    /**
-     * Base styles for the blur container
-     */
-    baseStyle?: string;
-    /**
-     * Position-specific styles
-     */
-    positions?: Partial<Record<ProgressiveBlurPosition, string>>;
-}

package/dist/components/core/ProgressiveBlur/index.d.ts

@@ -1,2 +0,0 @@
-export { ProgressiveBlur } from "./ProgressiveBlur";
-export type { ProgressiveBlurProps } from "./ProgressiveBlur";

package/dist/components/core/Table/TablePagination.js

@@ -1,25 +0,0 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React__default from 'react';
-import { Pagination } from '../Pagination/Pagination.js';
-import { Select } from '../../forms/Select/Select.js';
-import '../../forms/Select/Select.theme.js';
-import { cn } from '../../../utils/cn.js';
-
-/**
- * TablePagination provides a standardized pagination interface for tables
- * Combines the core Pagination component with page size selection controls
- */
-const TablePagination = React__default.forwardRef(({ currentPage, totalItems, pageSize, pageSizeOptions = [10, 25, 50, 100], onPageChange, onPageSizeChange, showPageSizeSelector = true, className, }, ref) => {
-    const totalPages = Math.ceil(totalItems / pageSize);
-    const startItem = (currentPage - 1) * pageSize + 1;
-    const endItem = Math.min(currentPage * pageSize, totalItems);
-    const pageSizeSelectOptions = pageSizeOptions.map((option) => ({
-        id: option,
-        label: option.toString(),
-        value: option,
-    }));
-    return (jsxs("div", { ref: ref, className: cn("flex items-center justify-between px-4 py-3 border-t border-[var(--color-border)] bg-[var(--color-background)]", className), children: [jsxs("div", { className: "flex items-center gap-4", children: [showPageSizeSelector && (jsxs("div", { className: "flex items-center gap-2", children: [jsx("span", { className: "text-sm text-[var(--color-text-muted)]", children: "Rows per page:" }), jsx(Select, { value: pageSize, onChange: (value) => onPageSizeChange(value), options: pageSizeSelectOptions, size: "sm", className: "w-20" })] })), jsx("div", { className: "text-sm text-[var(--color-text-muted)]", children: totalItems > 0 ? (jsxs(Fragment, { children: ["Showing ", startItem.toLocaleString(), " to ", endItem.toLocaleString(), " of", " ", totalItems.toLocaleString(), " results"] })) : ("No results") })] }), totalPages > 1 && (jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: onPageChange, showPrevNext: true, showFirstLast: false, siblingCount: 1 }))] }));
-});
-TablePagination.displayName = "Table.Pagination";
-
-export { TablePagination };