flikkui 0.1.0-beta.11

package/dist/components/core/Dropdown/DropdownMenu.js

@@ -0,0 +1,179 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useRef, useState, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { cn } from '../../../utils/cn.js';
+import { useDropdownContext } from './DropdownContext.js';
+import { useClickOutside } from '../../../utils/useClickOutside.js';
+import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
+import { useReducedMotion } from '../../../node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.js';
+import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
+import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+
+/**
+ * DropdownMenu component - renders the menu with keyboard navigation
+ */
+var DropdownMenu = React__default.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, _b = _a.animation, animation = _b === void 0 ? true : _b, _c = _a.portal, portal = _c === void 0 ? true : _c, _d = _a.horizontal, horizontal = _d === void 0 ? false : _d, ariaLabel = _a["aria-label"], props = __rest(_a, ["children", "className", "animation", "portal", "horizontal", "aria-label"]);
+    var _e = useDropdownContext(), isOpen = _e.isOpen, onOpenChange = _e.onOpenChange, triggerRef = _e.triggerRef, menuRef = _e.menuRef, placement = _e.placement, offset = _e.offset, theme = _e.theme;
+    var shouldReduceMotion = useReducedMotion();
+    var localRef = useRef(null);
+    var _f = useState(-1), focusedIndex = _f[0], setFocusedIndex = _f[1];
+    var _g = useState(""), typeaheadString = _g[0], setTypeaheadString = _g[1];
+    var typeaheadTimeoutRef = useRef(null);
+    // Use the positioning hook from Popover/Select
+    var _h = useSelectPortal({
+        triggerRef: triggerRef,
+        isOpen: isOpen || false,
+        placement: placement,
+        offset: offset || 4,
+        autoWidth: false,
+    }), position = _h.position, cssVariables = _h.cssVariables, portalContentRef = _h.contentRef;
+    // Get all menu items (not separators or sections)
+    var getMenuItems = useCallback(function () {
+        if (!localRef.current)
+            return [];
+        return Array.from(localRef.current.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])'));
+    }, []);
+    // Focus a menu item by index
+    var focusItem = useCallback(function (index) {
+        var _a;
+        var items = getMenuItems();
+        if (index >= 0 && index < items.length) {
+            (_a = items[index]) === null || _a === void 0 ? void 0 : _a.focus();
+            setFocusedIndex(index);
+        }
+    }, [getMenuItems]);
+    // Keyboard navigation handler
+    var handleKeyDown = useCallback(function (e) {
+        var _a;
+        var items = getMenuItems();
+        var currentIndex = focusedIndex;
+        switch (e.key) {
+            case "ArrowDown":
+                e.preventDefault();
+                var nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+                focusItem(nextIndex);
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                var prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+                focusItem(prevIndex);
+                break;
+            case "Home":
+                e.preventDefault();
+                focusItem(0);
+                break;
+            case "End":
+                e.preventDefault();
+                focusItem(items.length - 1);
+                break;
+            case "Escape":
+                e.preventDefault();
+                onOpenChange(false);
+                // Return focus to trigger
+                (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                break;
+            case "Tab":
+                // Close menu on Tab
+                onOpenChange(false);
+                break;
+            default:
+                // Type-ahead functionality
+                if (e.key.length === 1 && !e.ctrlKey && !e.altKey && !e.metaKey) {
+                    e.preventDefault();
+                    // Clear previous timeout
+                    if (typeaheadTimeoutRef.current) {
+                        clearTimeout(typeaheadTimeoutRef.current);
+                    }
+                    // Add character to typeahead string
+                    var newString_1 = typeaheadString + e.key.toLowerCase();
+                    setTypeaheadString(newString_1);
+                    // Find matching item
+                    var matchIndex = items.findIndex(function (item) { var _a; return (_a = item.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase().startsWith(newString_1); });
+                    if (matchIndex !== -1) {
+                        focusItem(matchIndex);
+                    }
+                    // Clear typeahead string after 500ms
+                    typeaheadTimeoutRef.current = setTimeout(function () {
+                        setTypeaheadString("");
+                    }, 500);
+                }
+                break;
+        }
+    }, [focusedIndex, focusItem, getMenuItems, onOpenChange, triggerRef, typeaheadString]);
+    // Click outside to close
+    useClickOutside(localRef, function (e) {
+        var _a;
+        // Skip if clicking on the trigger element
+        if (e.target === triggerRef.current || ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+            return;
+        }
+        onOpenChange(false);
+    });
+    // Focus first item when menu opens
+    useEffect(function () {
+        if (isOpen) {
+            // Focus first item after a small delay to allow render
+            requestAnimationFrame(function () {
+                var items = getMenuItems();
+                if (items.length > 0) {
+                    focusItem(0);
+                }
+            });
+        }
+        else {
+            setFocusedIndex(-1);
+            setTypeaheadString("");
+        }
+    }, [isOpen, getMenuItems, focusItem]);
+    // Combine refs
+    var handleRef = useCallback(function (el) {
+        localRef.current = el;
+        if (typeof ref === "function") {
+            ref(el);
+        }
+        else if (ref) {
+            ref.current = el;
+        }
+        if (menuRef) {
+            menuRef.current = el;
+        }
+        if (portalContentRef && typeof portalContentRef === "object" && "current" in portalContentRef) {
+            portalContentRef.current = el;
+        }
+    }, [ref, menuRef, portalContentRef]);
+    // Animation variants
+    var menuVariants = {
+        hidden: {
+            opacity: 0,
+            scale: 0.95,
+            y: -10,
+        },
+        visible: {
+            opacity: 1,
+            scale: 1,
+            y: 0,
+        },
+        exit: {
+            opacity: 0,
+            scale: 0.95,
+            y: -10,
+        },
+    };
+    // Extract DOM props to avoid type conflicts with Framer Motion
+    props.onAnimationStart; props.onAnimationEnd; props.onDrag; props.onDragStart; props.onDragEnd; var domProps = __rest(props, ["onAnimationStart", "onAnimationEnd", "onDrag", "onDragStart", "onDragEnd"]);
+    var menuContent = (React__default.createElement(AnimatePresence, null, isOpen && (React__default.createElement(motion.div, __assign({ ref: handleRef, className: cn("fixed z-50", theme.menuStyle, horizontal ? "flex-row p-1" : "flex-col p-1", className), style: __assign(__assign({}, cssVariables), { top: "".concat(position.top, "px"), left: "".concat(position.left, "px") }), role: "menu", "aria-label": ariaLabel || "Menu", "aria-orientation": horizontal ? "horizontal" : "vertical", tabIndex: -1, onKeyDown: handleKeyDown, variants: shouldReduceMotion || !animation ? {} : menuVariants, initial: shouldReduceMotion || !animation ? undefined : "hidden", animate: shouldReduceMotion || !animation ? undefined : "visible", exit: shouldReduceMotion || !animation ? undefined : "exit", transition: shouldReduceMotion || !animation
+            ? { duration: 0 }
+            : {
+                type: "spring",
+                stiffness: 500,
+                damping: 30,
+            }, "data-state": isOpen ? "open" : "closed", "data-placement": placement }, domProps), children))));
+    // Use portal if specified
+    return portal && typeof document !== "undefined"
+        ? createPortal(menuContent, document.body)
+        : menuContent;
+});
+DropdownMenu.displayName = "DropdownMenu";
+
+export { DropdownMenu };

package/dist/components/core/Dropdown/DropdownSection.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { DropdownSectionProps } from "./Dropdown.types";
+/**
+ * DropdownSection component - groups related menu items
+ */
+export declare const DropdownSection: React.ForwardRefExoticComponent<DropdownSectionProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Dropdown/DropdownSection.js

@@ -0,0 +1,20 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useDropdownContext } from './DropdownContext.js';
+
+/**
+ * DropdownSection component - groups related menu items
+ */
+var DropdownSection = React__default.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, title = _a.title, _b = _a.showDivider, showDivider = _b === void 0 ? false : _b, props = __rest(_a, ["children", "className", "title", "showDivider"]);
+    var theme = useDropdownContext().theme;
+    return (React__default.createElement(React__default.Fragment, null,
+        showDivider && React__default.createElement("div", { className: theme.separatorStyle, role: "separator" }),
+        React__default.createElement("div", __assign({ ref: ref, role: "group", "aria-label": title, className: cn(theme.sectionStyle, className) }, props),
+            title && (React__default.createElement("div", { className: theme.sectionTitleStyle, role: "presentation" }, title)),
+            children)));
+});
+DropdownSection.displayName = "DropdownSection";
+
+export { DropdownSection };

package/dist/components/core/Dropdown/DropdownSeparator.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { DropdownSeparatorProps } from "./Dropdown.types";
+/**
+ * DropdownSeparator component - visual separator between menu items
+ */
+export declare const DropdownSeparator: React.ForwardRefExoticComponent<DropdownSeparatorProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Dropdown/DropdownSeparator.js

@@ -0,0 +1,16 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useDropdownContext } from './DropdownContext.js';
+
+/**
+ * DropdownSeparator component - visual separator between menu items
+ */
+var DropdownSeparator = React__default.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    var theme = useDropdownContext().theme;
+    return (React__default.createElement("div", __assign({ ref: ref, role: "separator", className: cn(theme.separatorStyle, className) }, props)));
+});
+DropdownSeparator.displayName = "DropdownSeparator";
+
+export { DropdownSeparator };

package/dist/components/core/Dropdown/DropdownTrigger.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { DropdownTriggerProps } from "./Dropdown.types";
+/**
+ * DropdownTrigger component - wraps the trigger element
+ */
+export declare const DropdownTrigger: {
+    ({ children, className }: DropdownTriggerProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+};

package/dist/components/core/Dropdown/DropdownTrigger.js

@@ -0,0 +1,45 @@
+import React__default, { useCallback } from 'react';
+import { useDropdownContext } from './DropdownContext.js';
+
+/**
+ * DropdownTrigger component - wraps the trigger element
+ */
+var DropdownTrigger = function (_a) {
+    var _b;
+    var children = _a.children, className = _a.className;
+    var _c = useDropdownContext(), isOpen = _c.isOpen, onOpenChange = _c.onOpenChange, triggerRef = _c.triggerRef;
+    var handleClick = useCallback(function () {
+        onOpenChange(!isOpen);
+    }, [isOpen, onOpenChange]);
+    // Clone the child element and add our props
+    var trigger = React__default.cloneElement(children, {
+        ref: function (el) {
+            triggerRef.current = el;
+            // Preserve any existing ref from the child
+            var childRef = children.ref;
+            if (typeof childRef === "function") {
+                childRef(el);
+            }
+            else if (childRef && typeof childRef === "object") {
+                childRef.current = el;
+            }
+        },
+        onClick: function (e) {
+            // Call our handler
+            handleClick();
+            // Preserve any existing onClick from the child
+            var childProps = children.props;
+            if (childProps === null || childProps === void 0 ? void 0 : childProps.onClick) {
+                childProps.onClick(e);
+            }
+        },
+        "aria-expanded": isOpen,
+        "aria-haspopup": "menu",
+        "data-state": isOpen ? "open" : "closed",
+        className: className || ((_b = children.props) === null || _b === void 0 ? void 0 : _b.className),
+    });
+    return trigger;
+};
+DropdownTrigger.displayName = "DropdownTrigger";
+
+export { DropdownTrigger };

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

@@ -0,0 +1,9 @@
+export { Dropdown } from "./Dropdown";
+export { DropdownTrigger } from "./DropdownTrigger";
+export { DropdownMenu } from "./DropdownMenu";
+export { DropdownItem } from "./DropdownItem";
+export { DropdownSection } from "./DropdownSection";
+export { DropdownSeparator } from "./DropdownSeparator";
+export type { DropdownProps, DropdownTriggerProps, DropdownMenuProps, DropdownItemProps, DropdownSectionProps, DropdownSeparatorProps, DropdownPlacement, SelectionMode, } from "./Dropdown.types";
+export { dropdownTheme } from "./Dropdown.theme";
+export type { DropdownTheme } from "./Dropdown.theme";

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

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

package/dist/components/core/Empty/Empty.js

@@ -0,0 +1,26 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { emptyTheme } from './Empty.theme.js';
+import { cn } from '../../../utils/cn.js';
+
+var Empty = React__default.forwardRef(function (_a, ref) {
+    var title = _a.title, description = _a.description, image = _a.image, imageAlt = _a.imageAlt, icon = _a.icon, action = _a.action, className = _a.className, children = _a.children, props = __rest(_a, ["title", "description", "image", "imageAlt", "icon", "action", "className", "children"]);
+    // Fixed image and icon dimensions
+    var imageDimensions = "size-32";
+    var iconDimensions = "size-16";
+    // If children are provided, render them instead of the default layout
+    if (children) {
+        return (React__default.createElement("div", __assign({ ref: ref, className: cn(emptyTheme.baseStyle, className), role: "region", "aria-label": "Empty state" }, props), children));
+    }
+    return (React__default.createElement("div", __assign({ ref: ref, className: cn(emptyTheme.baseStyle, className), role: "region", "aria-label": "Empty state" }, props),
+        image ? (React__default.createElement("div", { className: "flex-shrink-0 mb-6" },
+            React__default.createElement("img", { src: image, alt: imageAlt || "Empty state illustration", className: cn("mx-auto object-cover", imageDimensions), loading: "lazy" }))) : icon ? (React__default.createElement("div", { className: cn("flex-shrink-0 mx-auto text-[var(--color-text-muted)] mb-6", iconDimensions), "aria-hidden": "true" }, icon)) : null,
+        React__default.createElement("div", { className: "flex flex-col items-center justify-center gap-1" },
+            title && React__default.createElement("div", { className: emptyTheme.titleStyle }, title),
+            description && (React__default.createElement("div", { className: emptyTheme.descriptionStyle }, description))),
+        action && (React__default.createElement("div", { className: "flex flex-col sm:flex-row gap-2 justify-center items-center mt-3" }, action))));
+});
+// Set display name for dev tools and Storybook
+Empty.displayName = "Empty";
+
+export { Empty };

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

@@ -0,0 +1,12 @@
+/**
+ * Simplified theme structure for the Empty component - only essential customizable styles
+ */
+export interface EmptyTheme {
+    baseStyle: string;
+    titleStyle: string;
+    descriptionStyle: string;
+}
+/**
+ * Default theme for the Empty component
+ */
+export declare const emptyTheme: EmptyTheme;

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

@@ -0,0 +1,13 @@
+/**
+ * Default theme for the Empty component
+ */
+var emptyTheme = {
+    // Base container styles - customizable spacing, colors, and layout
+    baseStyle: "flex flex-col items-center justify-center text-center w-full max-w-md mx-auto space-y-3 py-12 px-6 ",
+    // Title text styles - customizable typography and colors
+    titleStyle: "text-base font-medium text-[var(--color-text-primary)]",
+    // Description text styles - customizable typography and colors  
+    descriptionStyle: "text-base text-[var(--color-text-secondary)]/70",
+};
+
+export { emptyTheme };

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

@@ -0,0 +1,28 @@
+import React from "react";
+/**
+ * Empty component props for displaying empty states and placeholders
+ */
+export interface EmptyProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Primary title/heading text */
+    title?: React.ReactNode;
+    /** Descriptive text explaining the empty state */
+    description?: React.ReactNode;
+    /**
+     * Optional image source for illustration
+     * Note: If both image and icon are provided, image takes precedence
+     */
+    image?: string;
+    /** Alt text for the image (required if image is provided) */
+    imageAlt?: string;
+    /**
+     * Optional icon component (displayed only when no image is provided)
+     * Note: If both image and icon are provided, image takes precedence
+     */
+    icon?: React.ReactNode;
+    /** Optional action element (button, link, etc.) */
+    action?: React.ReactNode;
+    /** Additional class names */
+    className?: string;
+    /** Children content (overrides all other content when provided) */
+    children?: React.ReactNode;
+}

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

@@ -0,0 +1,3 @@
+export { Empty } from "./Empty";
+export type { EmptyProps } from "./Empty.types";
+export { emptyTheme, type EmptyTheme } from "./Empty.theme";

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,71 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+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
+var 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>
+ * ```
+ */
+var Kbd = React__default.forwardRef(function (_a, ref) {
+    var keys = _a.keys, children = _a.children, _b = _a.size, size = _b === void 0 ? 'md' : _b, className = _a.className, props = __rest(_a, ["keys", "children", "size", "className"]);
+    // Base styles from theme
+    var 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 (React__default.createElement("kbd", __assign({ ref: ref, className: baseStyles }, props),
+            keys.map(function (key) { return keyMap[key]; }).join(''),
+            children));
+    }
+    // If only children are provided, render them directly
+    if (children) {
+        return (React__default.createElement("kbd", __assign({ ref: ref, className: baseStyles }, props), children));
+    }
+    // If no keys are provided, return null
+    if (!keys || keys.length === 0) {
+        return null;
+    }
+    // Single key
+    if (keys.length === 1) {
+        return (React__default.createElement("kbd", __assign({ ref: ref, className: baseStyles }, props), keyMap[keys[0]]));
+    }
+    // Multiple keys - render with separator
+    return (React__default.createElement("span", { className: "inline-flex items-center gap-1" }, keys.map(function (key, index) { return (React__default.createElement(React__default.Fragment, { key: "".concat(key, "-").concat(index) },
+        React__default.createElement("kbd", __assign({ ref: index === 0 ? ref : undefined, className: baseStyles }, props), keyMap[key]),
+        index < keys.length - 1 && (React__default.createElement("span", { className: kbdTheme.separatorStyle }, "+")))); })));
+});
+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
+ */
+var kbdTheme = {
+    baseStyle: 'inline-flex items-center justify-center font-sans font-medium rounded-md  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,42 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useMemo } from 'react';
+import { buttonTheme } from '../Button/Button.theme.js';
+import { cn } from '../../../utils/cn.js';
+import { useReducedMotion } from '../../../node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.js';
+import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+
+var Link = React__default.forwardRef(function (_a, ref) {
+    var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.size, size = _c === void 0 ? "inherit" : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, href = _a.href, props = __rest(_a, ["children", "className", "size", "disabled", "href"]);
+    var shouldReduceMotion = useReducedMotion();
+    var color = "primary"; // Default to primary, can be overridden by className
+    // A link is essentially a button with variant="link"
+    var resolvedVariant = "link";
+    // Memoize theme classes for performance
+    var themeClasses = useMemo(function () {
+        var _a, _b, _c, _d, _e;
+        var 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]) || "";
+        var colorClasses = ((_c = buttonTheme.colorStyles) === null || _c === void 0 ? void 0 : _c[color]) || "";
+        var variantClasses = ((_d = buttonTheme.variantStyles) === null || _d === void 0 ? void 0 : _d[resolvedVariant]) || "";
+        var stateClasses = disabled ? ((_e = buttonTheme.states) === null || _e === void 0 ? void 0 : _e.disabled) || "" : "";
+        return {
+            sizeClasses: sizeClasses,
+            colorClasses: colorClasses,
+            variantClasses: variantClasses,
+            stateClasses: stateClasses,
+        };
+    }, [size, color, disabled]);
+    var animationProps = shouldReduceMotion
+        ? {}
+        : {
+            whileHover: { scale: 1.02 },
+            whileTap: { scale: 0.98 },
+        };
+    return (React__default.createElement(motion.a, __assign({ 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", className), "data-color": color, "data-variant": resolvedVariant, "data-size": size, "aria-disabled": disabled || undefined }, (disabled ? {} : animationProps), props), 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.FC<LoaderProps>;
+export { Loader };