@flikk/ui 1.0.0-beta.1

package/dist/components/core/KPI/KPI.js

@@ -0,0 +1,48 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useMemo } from 'react';
+import { ArrowUpRightIcon, ArrowDownRightIcon } from '@heroicons/react/20/solid';
+import { cn } from '../../../utils/cn.js';
+import { kpiTheme } from './KPI.theme.js';
+
+const KPI = React__default.forwardRef(({ value, label, trend, trendLabel, progress, barCount = 24, description, icon, size = "md", color = "primary", className, theme: customTheme = {}, ...props }, ref) => {
+    const theme = useMemo(() => ({
+        ...kpiTheme,
+        ...customTheme,
+        valueSizes: { ...kpiTheme.valueSizes, ...customTheme.valueSizes },
+        barFilledColors: {
+            ...kpiTheme.barFilledColors,
+            ...customTheme.barFilledColors,
+        },
+    }), [customTheme]);
+    // Format trend label
+    const formattedTrend = useMemo(() => {
+        if (trendLabel)
+            return trendLabel;
+        if (trend === undefined)
+            return null;
+        const sign = trend > 0 ? "+" : "";
+        return `${sign}${trend}%`;
+    }, [trend, trendLabel]);
+    const trendDirection = trend === undefined ? null : trend > 0 ? "up" : trend < 0 ? "down" : "neutral";
+    // Calculate filled bar count from progress
+    const filledBars = useMemo(() => {
+        if (progress === undefined)
+            return 0;
+        return Math.round((Math.min(Math.max(progress, 0), 100) / 100) * barCount);
+    }, [progress, barCount]);
+    const barSize = kpiTheme.barSizes[size];
+    return (jsxs("div", { ref: ref, className: cn(theme.baseStyle, className), ...props, children: [jsxs("div", { className: "flex items-start justify-between", children: [jsxs("div", { className: "flex items-baseline gap-2", children: [jsx("span", { className: cn(theme.valueSizes[size]), children: value }), label && (jsxs("span", { className: cn(theme.labelStyle, theme.labelSizes[size]), children: [icon && (jsx("span", { className: "inline-flex items-center mr-1", children: icon })), label] }))] }), formattedTrend && trendDirection && (jsxs("span", { className: cn("inline-flex items-center gap-0.5 font-medium", theme.trendSizes[size], trendDirection === "up" && theme.trendPositive, trendDirection === "down" && theme.trendNegative, trendDirection === "neutral" && theme.trendNeutral), children: [formattedTrend, trendDirection === "up" && jsx(ArrowUpRightIcon, { className: "size-4" }), trendDirection === "down" && jsx(ArrowDownRightIcon, { className: "size-4" })] }))] }), progress !== undefined && (jsx("div", { className: cn("flex items-end", barSize.gap), role: "img", "aria-label": `Progress: ${progress}%`, children: Array.from({ length: barCount }, (_, i) => {
+                    const isFilled = i < filledBars;
+                    // Fade the last 2-3 filled bars for a smooth transition
+                    const fadeDistance = filledBars - i;
+                    const opacity = isFilled && fadeDistance <= 3
+                        ? 0.4 + (fadeDistance / 3) * 0.6
+                        : undefined;
+                    return (jsx("div", { className: cn("rounded-sm flex-1", barSize.height, isFilled
+                            ? theme.barFilledColors[color]
+                            : theme.barEmptyColor), style: isFilled && opacity !== undefined ? { opacity } : undefined }, i));
+                }) })), description && (jsx("span", { className: cn(theme.descriptionStyle, size === "sm" ? "text-xs" : "text-sm"), children: description }))] }));
+});
+KPI.displayName = "KPI";
+
+export { KPI };

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

@@ -0,0 +1,2 @@
+import { KPITheme } from "./KPI.types";
+export declare const kpiTheme: KPITheme;

package/dist/components/core/KPI/KPI.theme.js

@@ -0,0 +1,37 @@
+const kpiTheme = {
+    baseStyle: "flex flex-col gap-3",
+    valueSizes: {
+        sm: "text-xl font-bold text-[var(--color-text-primary)]",
+        md: "text-3xl font-bold text-[var(--color-text-primary)]",
+        lg: "text-4xl font-bold text-[var(--color-text-primary)]",
+    },
+    labelStyle: "text-[var(--color-text-muted)]",
+    labelSizes: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base",
+    },
+    trendPositive: "text-[var(--color-success)]",
+    trendNegative: "text-[var(--color-danger)]",
+    trendNeutral: "text-[var(--color-text-muted)]",
+    trendSizes: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base",
+    },
+    barFilledColors: {
+        primary: "bg-[var(--color-primary)]",
+        success: "bg-[var(--color-success)]",
+        warning: "bg-[var(--color-warning)]",
+        danger: "bg-[var(--color-danger)]",
+    },
+    barEmptyColor: "bg-[var(--color-background-tertiary)]",
+    barSizes: {
+        sm: { height: "h-4", width: "w-[3px]", gap: "gap-[2px]" },
+        md: { height: "h-6", width: "w-[3px]", gap: "gap-[3px]" },
+        lg: { height: "h-8", width: "w-1", gap: "gap-1" },
+    },
+    descriptionStyle: "text-[var(--color-text-muted)]",
+};
+
+export { kpiTheme };

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

@@ -0,0 +1,84 @@
+import { ReactNode, HTMLAttributes } from "react";
+export type KPISize = "sm" | "md" | "lg";
+export type KPIColor = "primary" | "success" | "warning" | "danger";
+export interface KPITheme {
+    baseStyle: string;
+    valueSizes: Record<KPISize, string>;
+    labelStyle: string;
+    labelSizes: Record<KPISize, string>;
+    trendPositive: string;
+    trendNegative: string;
+    trendNeutral: string;
+    trendSizes: Record<KPISize, string>;
+    barFilledColors: Record<KPIColor, string>;
+    barEmptyColor: string;
+    barSizes: Record<KPISize, {
+        height: string;
+        width: string;
+        gap: string;
+    }>;
+    descriptionStyle: string;
+}
+export interface KPIThemeOverrides {
+    baseStyle?: string;
+    valueSizes?: Partial<Record<KPISize, string>>;
+    labelStyle?: string;
+    trendPositive?: string;
+    trendNegative?: string;
+    barFilledColors?: Partial<Record<KPIColor, string>>;
+    barEmptyColor?: string;
+    descriptionStyle?: string;
+}
+export interface KPIProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /**
+     * The main metric value to display (e.g. "$25.5M", "1,234", "89%")
+     */
+    value: ReactNode;
+    /**
+     * Label describing the metric (e.g. "Fund raised", "Total Revenue")
+     */
+    label?: string;
+    /**
+     * Percentage change value (e.g. 20, -5.3). Determines trend direction & color.
+     */
+    trend?: number;
+    /**
+     * Custom trend label override (default: auto-formats as "+20%" or "-5.3%")
+     */
+    trendLabel?: string;
+    /**
+     * Progress value from 0-100. Controls how many bars are filled.
+     */
+    progress?: number;
+    /**
+     * Total number of bars in the visualization.
+     * @default 24
+     */
+    barCount?: number;
+    /**
+     * Description text below the bars (e.g. "Compared to last month")
+     */
+    description?: string;
+    /**
+     * Icon to display before the label.
+     */
+    icon?: ReactNode;
+    /**
+     * Size variant.
+     * @default 'md'
+     */
+    size?: KPISize;
+    /**
+     * Color for the filled bars and positive trend.
+     * @default 'primary'
+     */
+    color?: KPIColor;
+    /**
+     * Custom class name.
+     */
+    className?: string;
+    /**
+     * Component-level theme overrides.
+     */
+    theme?: KPIThemeOverrides;
+}

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

@@ -0,0 +1,2 @@
+export { KPI } from "./KPI";
+export type { KPIProps, KPISize, KPIColor, KPITheme, KPIThemeOverrides, } from "./KPI.types";

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { KbdProps } from './Kbd.types';
+/**
+ * Kbd component for displaying keyboard keys inline within text or instructions.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Kbd keys={["command", "k"]} />
+ * <Kbd keys={["shift", "enter"]} size="sm" />
+ * <Kbd>Custom</Kbd>
+ * ```
+ */
+export declare const Kbd: React.ForwardRefExoticComponent<KbdProps & React.RefAttributes<HTMLElement>>;

package/dist/components/core/Kbd/Kbd.js

@@ -0,0 +1,66 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { kbdTheme } from './Kbd.theme.js';
+
+// Key display mapping with proper symbols and labels
+const keyMap = {
+    command: '⌘',
+    shift: '⇧',
+    ctrl: '⌃',
+    option: '⌥',
+    enter: 'Enter',
+    delete: 'Delete',
+    escape: 'Esc',
+    tab: 'Tab',
+    capslock: 'Caps Lock',
+    up: '↑',
+    right: '→',
+    down: '↓',
+    left: '←',
+    pageup: 'Page Up',
+    pagedown: 'Page Down',
+    home: 'Home',
+    end: 'End',
+    help: 'Help',
+    space: 'Space',
+    fn: 'fn',
+    win: '⊞',
+    alt: 'Alt',
+};
+/**
+ * Kbd component for displaying keyboard keys inline within text or instructions.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Kbd keys={["command", "k"]} />
+ * <Kbd keys={["shift", "enter"]} size="sm" />
+ * <Kbd>Custom</Kbd>
+ * ```
+ */
+const Kbd = React__default.forwardRef(({ keys, children, size = 'md', className, ...props }, ref) => {
+    // Base styles from theme
+    const baseStyles = cn(kbdTheme.baseStyle, kbdTheme.sizes[size], className);
+    // If both keys and children are provided, combine them in a single kbd
+    if (keys && children) {
+        return (jsxs("kbd", { ref: ref, className: baseStyles, ...props, children: [keys.map(key => keyMap[key]).join(''), children] }));
+    }
+    // If only children are provided, render them directly
+    if (children) {
+        return (jsx("kbd", { ref: ref, className: baseStyles, ...props, children: children }));
+    }
+    // If no keys are provided, return null
+    if (!keys || keys.length === 0) {
+        return null;
+    }
+    // Single key
+    if (keys.length === 1) {
+        return (jsx("kbd", { ref: ref, className: baseStyles, ...props, children: keyMap[keys[0]] }));
+    }
+    // Multiple keys - render with separator
+    return (jsx("span", { className: "inline-flex items-center gap-1", children: keys.map((key, index) => (jsxs(React__default.Fragment, { children: [jsx("kbd", { ref: index === 0 ? ref : undefined, className: baseStyles, ...props, children: keyMap[key] }), index < keys.length - 1 && (jsx("span", { className: kbdTheme.separatorStyle, children: "+" }))] }, `${key}-${index}`))) }));
+});
+Kbd.displayName = 'Kbd';
+
+export { Kbd };

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

@@ -0,0 +1,10 @@
+import { KbdSize } from './Kbd.types';
+export interface KbdTheme {
+    baseStyle: string;
+    sizes: Record<KbdSize, string>;
+    separatorStyle: string;
+}
+/**
+ * Default theme configuration for Kbd component
+ */
+export declare const kbdTheme: KbdTheme;

package/dist/components/core/Kbd/Kbd.theme.js

@@ -0,0 +1,13 @@
+/**
+ * Default theme configuration for Kbd component
+ */
+const kbdTheme = {
+    baseStyle: 'inline-flex items-center justify-center font-sans font-medium rounded-[calc(var(--radius-base)*0.75)]  bg-neutral-100 border border-[var(--color-border)] text-[var(--color-text-secondary)] glass-effect',
+    sizes: {
+        sm: 'text-xs px-1 py-0.5 min-w-[1.25rem]',
+        md: 'text-sm px-1.5 py-0.5 min-w-[1.5rem]',
+    },
+    separatorStyle: 'text-[var(--color-text-muted)] text-xs',
+};
+
+export { kbdTheme };

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

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+export type KbdKey = "command" | "shift" | "ctrl" | "option" | "enter" | "delete" | "escape" | "tab" | "capslock" | "up" | "right" | "down" | "left" | "pageup" | "pagedown" | "home" | "end" | "help" | "space" | "fn" | "win" | "alt";
+export type KbdSize = 'sm' | 'md';
+export interface KbdProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Array of keyboard keys to display
+     */
+    keys?: KbdKey[];
+    /**
+     * Custom content to display instead of using keys prop
+     */
+    children?: ReactNode;
+    /**
+     * Size variant
+     * @default 'md'
+     */
+    size?: KbdSize;
+    /**
+     * Custom class name for styling overrides
+     */
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export { Kbd } from './Kbd';
+export type { KbdProps, KbdKey, KbdSize } from './Kbd.types';

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { LinkProps } from "./Link.types";
+declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+export { Link };

package/dist/components/core/Link/Link.js

@@ -0,0 +1,40 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useMemo } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { buttonTheme } from '../Button/Button.theme.js';
+import { cn } from '../../../utils/cn.js';
+
+const Link = React__default.forwardRef(({ children, className = "", size = "inherit", disabled = false, href, ...props }, ref) => {
+    const shouldReduceMotion = useReducedMotion();
+    const color = "primary"; // Default to primary, can be overridden by className
+    // A link is essentially a button with variant="link"
+    const resolvedVariant = "link";
+    // Memoize theme classes for performance
+    const themeClasses = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f;
+        const sizeClasses = size === "inherit"
+            ? "h-fit"
+            : ((_b = (_a = buttonTheme.sizes) === null || _a === void 0 ? void 0 : _a[size]) === null || _b === void 0 ? void 0 : _b[resolvedVariant]) || "";
+        const colorClasses = ((_d = (_c = buttonTheme.variantColors) === null || _c === void 0 ? void 0 : _c[resolvedVariant]) === null || _d === void 0 ? void 0 : _d[color]) || "";
+        const variantClasses = ((_e = buttonTheme.variantStyles) === null || _e === void 0 ? void 0 : _e[resolvedVariant]) || "";
+        const stateClasses = disabled ? ((_f = buttonTheme.states) === null || _f === void 0 ? void 0 : _f.disabled) || "" : "";
+        return {
+            sizeClasses,
+            colorClasses,
+            variantClasses,
+            stateClasses,
+        };
+    }, [size, color, disabled]);
+    const animationProps = useMemo(() => shouldReduceMotion
+        ? {}
+        : {
+            whileHover: { scale: 1.02 },
+            whileTap: { scale: 0.98 },
+        }, [shouldReduceMotion]);
+    return (jsx(motion.a, { ref: ref, href: disabled ? undefined : href, className: cn(buttonTheme.baseStyle, themeClasses.colorClasses, themeClasses.variantClasses, themeClasses.sizeClasses, themeClasses.stateClasses, 
+        // Special case for link variant to have an underline
+        "underline underline-offset-4 rounded-none", className), "data-color": color, "data-variant": resolvedVariant, "data-size": size, "aria-disabled": disabled || undefined, ...(disabled ? {} : animationProps), ...props, children: children }));
+});
+Link.displayName = "Link";
+
+export { Link };

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

@@ -0,0 +1,22 @@
+import { HTMLMotionProps } from "motion/react";
+import { ButtonSize } from "../Button";
+export type LinkSize = ButtonSize | "inherit";
+/**
+ * Link component props
+ * Extends standard anchor attributes.
+ */
+export interface LinkProps extends Omit<HTMLMotionProps<"a">, 'color'> {
+    /**
+     * The size of the link.
+     * @default "inherit"
+     */
+    size?: LinkSize;
+    /** The state of the link */
+    disabled?: boolean;
+    /** Link contents */
+    children?: React.ReactNode;
+    /** Additional class names */
+    className?: string;
+    /** The URL that the hyperlink points to. */
+    href?: string;
+}

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

@@ -0,0 +1,2 @@
+export { Link } from "./Link";
+export * from "./Link.types";

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { LoaderProps } from './Loader.types';
+/**
+ * Loader component - Supports both circular (spinner) and linear (progress bar) variants
+ *
+ * Features:
+ * - Circular variant: Spinning loader for indeterminate loading
+ * - Linear variant: Progress bar with determinate (value) or indeterminate modes
+ * - Multiple sizes and semantic colors
+ * - Optional percentage/label display for linear variant
+ * - Full theme customization
+ *
+ * @example
+ * // Circular loader
+ * <Loader variant="circular" size="md" />
+ *
+ * // Linear progress bar (determinate)
+ * <Loader variant="linear" value={60} showLabel />
+ *
+ * // Linear loading bar (indeterminate)
+ * <Loader variant="linear" />
+ */
+declare const Loader: React.ForwardRefExoticComponent<LoaderProps & React.RefAttributes<HTMLDivElement>>;
+export { Loader };

package/dist/components/core/Loader/Loader.js

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useMemo } from 'react';
+import { loaderTheme } from './Loader.theme.js';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * Loader component - Supports both circular (spinner) and linear (progress bar) variants
+ *
+ * Features:
+ * - Circular variant: Spinning loader for indeterminate loading
+ * - Linear variant: Progress bar with determinate (value) or indeterminate modes
+ * - Multiple sizes and semantic colors
+ * - Optional percentage/label display for linear variant
+ * - Full theme customization
+ *
+ * @example
+ * // Circular loader
+ * <Loader variant="circular" size="md" />
+ *
+ * // Linear progress bar (determinate)
+ * <Loader variant="linear" value={60} showLabel />
+ *
+ * // Linear loading bar (indeterminate)
+ * <Loader variant="linear" />
+ */
+const Loader = React__default.forwardRef(({ variant = 'circular', size = 'md', color = 'primary', value, max = 100, showLabel = false, label, className, theme: customTheme, ...props }, ref) => {
+    var _a, _b;
+    // Merge custom theme with default theme
+    const theme = useMemo(() => customTheme ? { ...loaderTheme, ...customTheme } : loaderTheme, [customTheme]);
+    // Calculate percentage for linear variant
+    const percentage = useMemo(() => {
+        if (value === undefined || value === null)
+            return 0;
+        const pct = Math.min(Math.max((value / max) * 100, 0), 100);
+        return Math.round(pct);
+    }, [value, max]);
+    // Determine if this is indeterminate mode (no value provided)
+    const isIndeterminate = value === undefined || value === null;
+    // Get theme values for current size and color
+    const sizeStyles = ((_a = theme.sizes) === null || _a === void 0 ? void 0 : _a[size]) || theme.sizes['md'];
+    const colorStyles = ((_b = theme.colors) === null || _b === void 0 ? void 0 : _b[color]) || theme.colors['primary'];
+    // Render circular variant (spinner)
+    if (variant === 'circular') {
+        return (jsx("div", { ref: ref, className: cn(theme.baseStyle, className), role: "status", "aria-label": "loading", ...props, children: jsx("div", { className: cn(theme.circularStyle, theme.animation, sizeStyles === null || sizeStyles === void 0 ? void 0 : sizeStyles.circular, colorStyles === null || colorStyles === void 0 ? void 0 : colorStyles.circular) }) }));
+    }
+    // Render linear variant (progress bar)
+    return (jsxs("div", { ref: ref, className: cn(theme.linearContainerStyle, className), role: "progressbar", "aria-valuemin": 0, "aria-valuemax": max, "aria-valuenow": isIndeterminate ? undefined : value, "aria-label": isIndeterminate ? "loading" : `${percentage}% complete`, ...props, children: [jsx("div", { className: cn(theme.linearTrackStyle, sizeStyles === null || sizeStyles === void 0 ? void 0 : sizeStyles.linear), children: isIndeterminate ? (
+                // Indeterminate loading animation
+                jsx("div", { className: cn(theme.linearBarStyle, colorStyles === null || colorStyles === void 0 ? void 0 : colorStyles.linear, "w-1/3 animate-[shimmer_2s_ease-in-out_infinite]"), style: {
+                        backgroundImage: `linear-gradient(90deg, transparent, currentColor, transparent)`,
+                    } })) : (
+                // Determinate progress bar
+                jsx("div", { className: cn(theme.linearBarStyle, colorStyles === null || colorStyles === void 0 ? void 0 : colorStyles.linear), style: { width: `${percentage}%` } })) }), showLabel && !isIndeterminate && (jsx("span", { className: theme.linearLabelStyle, children: label || `${percentage}%` }))] }));
+});
+Loader.displayName = 'Loader';
+
+export { Loader };

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

@@ -0,0 +1,27 @@
+import { LoaderSize, LoaderColor } from "./Loader.types";
+/**
+ * Internal theme structure for the Loader component
+ */
+interface LoaderTheme {
+    baseStyle: string;
+    circularStyle: string;
+    linearContainerStyle: string;
+    linearTrackStyle: string;
+    linearBarStyle: string;
+    linearLabelStyle: string;
+    sizes: Record<LoaderSize, {
+        circular: string;
+        linear: string;
+    }>;
+    colors: Record<LoaderColor, {
+        circular: string;
+        linear: string;
+    }>;
+    animation: string;
+}
+/**
+ * Default theme for the Loader component
+ * Uses production-ready CSS variables from global.scss
+ */
+export declare const loaderTheme: LoaderTheme;
+export {};

package/dist/components/core/Loader/Loader.theme.js

@@ -0,0 +1,60 @@
+/**
+ * Default theme for the Loader component
+ * Uses production-ready CSS variables from global.scss
+ */
+const loaderTheme = {
+    // Base styles for the loader container
+    baseStyle: "inline-flex items-center justify-center",
+    // Circular variant (spinner) styles
+    circularStyle: "rounded-full",
+    // Linear variant container
+    linearContainerStyle: "w-full flex items-center gap-3",
+    // Linear track (background)
+    linearTrackStyle: "flex-1 h-2 rounded-full bg-[var(--color-background-tertiary)] overflow-hidden",
+    // Linear bar (foreground)
+    linearBarStyle: "h-full rounded-full transition-all duration-300 ease-out",
+    // Label text for linear variant
+    linearLabelStyle: "text-sm font-medium text-[var(--color-text-secondary)] min-w-[3ch] tabular-nums",
+    // Size variants for both circular and linear
+    sizes: {
+        sm: {
+            circular: "size-4 border-2",
+            linear: "h-1.5",
+        },
+        md: {
+            circular: "size-5 border-[3px]",
+            linear: "h-2",
+        },
+        lg: {
+            circular: "size-6 border-[3px]",
+            linear: "h-3",
+        },
+    },
+    // Color variants using correct CSS variables
+    colors: {
+        primary: {
+            circular: "border-[var(--color-primary)] border-t-transparent",
+            linear: "bg-[var(--color-primary)]",
+        },
+        success: {
+            circular: "border-[var(--color-success)] border-t-transparent",
+            linear: "bg-[var(--color-success)]",
+        },
+        warning: {
+            circular: "border-[var(--color-warning)] border-t-transparent",
+            linear: "bg-[var(--color-warning)]",
+        },
+        danger: {
+            circular: "border-[var(--color-danger)] border-t-transparent",
+            linear: "bg-[var(--color-danger)]",
+        },
+        muted: {
+            circular: "border-[var(--color-text-muted)] border-t-transparent",
+            linear: "bg-[var(--color-text-muted)]",
+        },
+    },
+    // Animation class for circular spinner
+    animation: "animate-[spin_1s_linear_infinite]",
+};
+
+export { loaderTheme };

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

@@ -0,0 +1,71 @@
+/**
+ * Loader component props
+ * Supports both circular (spinner) and linear (progress bar) variants
+ */
+export interface LoaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The variant of the loader
+     * @default "circular"
+     */
+    variant?: LoaderVariant;
+    /**
+     * The size of the loader
+     * @default "md"
+     */
+    size?: LoaderSize;
+    /**
+     * The color of the loader
+     * @default "primary"
+     */
+    color?: LoaderColor;
+    /**
+     * Current progress value (0-100)
+     * Only applies to linear variant
+     * If not provided, shows indeterminate loading animation
+     */
+    value?: number;
+    /**
+     * Maximum value for progress
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Show percentage label
+     * Only applies to linear variant with value prop
+     * @default false
+     */
+    showLabel?: boolean;
+    /**
+     * Custom label text (overrides percentage)
+     * Only applies to linear variant
+     */
+    label?: string;
+    /**
+     * Custom CSS class to apply to the loader
+     */
+    className?: string;
+    /**
+     * Theme overrides for the loader
+     */
+    theme?: LoaderThemeOverrides;
+}
+export type LoaderVariant = "circular" | "linear";
+export type LoaderSize = "sm" | "md" | "lg";
+export type LoaderColor = "primary" | "success" | "warning" | "danger" | "muted";
+export interface LoaderThemeOverrides {
+    baseStyle?: string;
+    circularStyle?: string;
+    linearContainerStyle?: string;
+    linearTrackStyle?: string;
+    linearBarStyle?: string;
+    linearLabelStyle?: string;
+    sizes?: Partial<Record<LoaderSize, {
+        circular: string;
+        linear: string;
+    }>>;
+    colors?: Partial<Record<LoaderColor, {
+        circular: string;
+        linear: string;
+    }>>;
+    animation?: string;
+}

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

@@ -0,0 +1,2 @@
+export { Loader } from './Loader';
+export type { LoaderProps, LoaderVariant, LoaderSize, LoaderColor } from './Loader.types';

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { MasonryProps } from './Masonry.types';
+declare const Masonry: React.ForwardRefExoticComponent<MasonryProps & React.RefAttributes<HTMLDivElement>>;
+export { Masonry };