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

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 };