@flikk/ui 1.0.0-beta.1

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

@@ -0,0 +1,225 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useRef, useState, useCallback, useEffect } from 'react';
+import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
+import { createPortal } from 'react-dom';
+import { cn } from '../../../utils/cn.js';
+import { useDropdownContext } from './DropdownContext.js';
+import { useClickOutside } from '../../../hooks/useClickOutside.js';
+import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
+import { useIsClient } from '../../../hooks/useIsClient.js';
+
+/**
+ * Hook to detect dark mode state from document
+ */
+const useDarkMode = () => {
+    const [isDark, setIsDark] = useState(false);
+    useEffect(() => {
+        if (typeof document === "undefined")
+            return;
+        const checkDarkMode = () => {
+            const hasDarkClass = document.documentElement.classList.contains("dark") ||
+                document.body.classList.contains("dark") ||
+                document.querySelector(".dark") !== null;
+            setIsDark(hasDarkClass);
+        };
+        checkDarkMode();
+        // Observe class changes on html and body
+        const observer = new MutationObserver(checkDarkMode);
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ["class"],
+        });
+        observer.observe(document.body, {
+            attributes: true,
+            attributeFilter: ["class"],
+        });
+        return () => observer.disconnect();
+    }, []);
+    return isDark;
+};
+/**
+ * DropdownMenu component - renders the menu with keyboard navigation
+ */
+const DropdownMenu = React__default.forwardRef(({ children, className, animation = true, portal = true, horizontal = false, "aria-label": ariaLabel, ...props }, ref) => {
+    const { isOpen, onOpenChange, triggerRef, menuRef, placement, offset, theme, } = useDropdownContext();
+    // Detect dark mode for portal content
+    const isDarkMode = useDarkMode();
+    const isClient = useIsClient();
+    const shouldReduceMotion = useReducedMotion();
+    const localRef = useRef(null);
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+    const [typeaheadString, setTypeaheadString] = useState("");
+    const typeaheadTimeoutRef = useRef(null);
+    // Use the positioning hook from Popover/Select
+    const { position, cssVariables, contentRef: portalContentRef, } = useSelectPortal({
+        triggerRef,
+        isOpen: isOpen || false,
+        placement: placement,
+        offset: offset || 4,
+        autoWidth: false,
+    });
+    // Get all menu items (not separators or sections)
+    const getMenuItems = useCallback(() => {
+        if (!localRef.current)
+            return [];
+        return Array.from(localRef.current.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])'));
+    }, []);
+    // Focus a menu item by index
+    const focusItem = useCallback((index) => {
+        var _a;
+        const 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
+    const handleKeyDown = useCallback((e) => {
+        var _a;
+        const items = getMenuItems();
+        const currentIndex = focusedIndex;
+        switch (e.key) {
+            case "ArrowDown":
+                e.preventDefault();
+                const nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+                focusItem(nextIndex);
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                const 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
+                    const newString = typeaheadString + e.key.toLowerCase();
+                    setTypeaheadString(newString);
+                    // Find matching item
+                    const matchIndex = items.findIndex((item) => { var _a; return (_a = item.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase().startsWith(newString); });
+                    if (matchIndex !== -1) {
+                        focusItem(matchIndex);
+                    }
+                    // Clear typeahead string after 500ms
+                    typeaheadTimeoutRef.current = setTimeout(() => {
+                        setTypeaheadString("");
+                    }, 500);
+                }
+                break;
+        }
+    }, [
+        focusedIndex,
+        focusItem,
+        getMenuItems,
+        onOpenChange,
+        triggerRef,
+        typeaheadString,
+    ]);
+    // Click outside to close
+    useClickOutside(localRef, (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(() => {
+        if (isOpen) {
+            // Focus first item after a small delay to allow render
+            requestAnimationFrame(() => {
+                const items = getMenuItems();
+                if (items.length > 0) {
+                    focusItem(0);
+                }
+            });
+        }
+        else {
+            setFocusedIndex(-1);
+            setTypeaheadString("");
+        }
+    }, [isOpen, getMenuItems, focusItem]);
+    // Combine refs
+    const handleRef = useCallback((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
+    const 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
+    const { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...domProps } = props;
+    const menuContent = (jsx(AnimatePresence, { children: isOpen && (jsx(motion.div, { ref: handleRef, className: cn("fixed z-50", theme.menuStyle, horizontal ? "flex-row p-1" : "flex-col p-1", className), style: {
+                ...cssVariables,
+                top: `${position.top}px`,
+                left: `${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: children })) }));
+    // Use portal if specified - wrap with dark class for dark mode support
+    if (portal && isClient) {
+        return createPortal(jsx("div", { className: isDarkMode ? "dark" : undefined, children: menuContent }), document.body);
+    }
+    return 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,15 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useDropdownContext } from './DropdownContext.js';
+
+/**
+ * DropdownSection component - groups related menu items
+ */
+const DropdownSection = React__default.forwardRef(({ children, className, title, showDivider = false, ...props }, ref) => {
+    const { theme } = useDropdownContext();
+    return (jsxs(Fragment, { children: [showDivider && jsx("div", { className: theme.separatorStyle, role: "separator" }), jsxs("div", { ref: ref, role: "group", "aria-label": title, className: cn(theme.sectionStyle, className), ...props, children: [title && (jsx("div", { className: theme.sectionTitleStyle, role: "presentation", children: 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,15 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useDropdownContext } from './DropdownContext.js';
+
+/**
+ * DropdownSeparator component - visual separator between menu items
+ */
+const DropdownSeparator = React__default.forwardRef(({ className, ...props }, ref) => {
+    const { theme } = useDropdownContext();
+    return (jsx("div", { 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,44 @@
+import React__default, { useCallback } from 'react';
+import { useDropdownContext } from './DropdownContext.js';
+
+/**
+ * DropdownTrigger component - wraps the trigger element
+ */
+const DropdownTrigger = ({ children, className }) => {
+    var _a;
+    const { isOpen, onOpenChange, triggerRef } = useDropdownContext();
+    const handleClick = useCallback(() => {
+        onOpenChange(!isOpen);
+    }, [isOpen, onOpenChange]);
+    // Clone the child element and add our props
+    const trigger = React__default.cloneElement(children, {
+        ref: (el) => {
+            triggerRef.current = el;
+            // Preserve any existing ref from the child
+            const childRef = children.ref;
+            if (typeof childRef === "function") {
+                childRef(el);
+            }
+            else if (childRef && typeof childRef === "object") {
+                childRef.current = el;
+            }
+        },
+        onClick: (e) => {
+            // Call our handler
+            handleClick();
+            // Preserve any existing onClick from the child
+            const 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 || ((_a = children.props) === null || _a === void 0 ? void 0 : _a.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,19 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default from 'react';
+import { emptyTheme } from './Empty.theme.js';
+import { cn } from '../../../utils/cn.js';
+
+const Empty = React__default.forwardRef(({ title, description, image, imageAlt, icon, action, className, children, ...props }, ref) => {
+    // Fixed image and icon dimensions
+    const imageDimensions = "size-32";
+    const iconDimensions = "size-16";
+    // If children are provided, render them instead of the default layout
+    if (children) {
+        return (jsx("div", { ref: ref, className: cn(emptyTheme.baseStyle, className), role: "region", "aria-label": "Empty state", ...props, children: children }));
+    }
+    return (jsxs("div", { ref: ref, className: cn(emptyTheme.baseStyle, className), role: "region", "aria-label": "Empty state", ...props, children: [image ? (jsx("div", { className: "flex-shrink-0 mb-6", children: jsx("img", { src: image, alt: imageAlt || "Empty state illustration", className: cn("mx-auto object-cover", imageDimensions), loading: "lazy" }) })) : icon ? (jsx("div", { className: cn("flex-shrink-0 mx-auto text-[var(--color-text-muted)] mb-6", iconDimensions), "aria-hidden": "true", children: icon })) : null, jsxs("div", { className: "flex flex-col items-center justify-center gap-1", children: [title && jsx("div", { className: emptyTheme.titleStyle, children: title }), description && (jsx("div", { className: emptyTheme.descriptionStyle, children: description }))] }), action && (jsx("div", { className: "flex flex-col sm:flex-row gap-2 justify-center items-center mt-3", children: 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
+ */
+const 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/Feed/Feed.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { FeedProps, FeedItemProps } from "./Feed.types";
+export declare const Feed: React.ForwardRefExoticComponent<FeedProps & React.RefAttributes<HTMLDivElement>> & {
+    Item: React.ForwardRefExoticComponent<FeedItemProps & React.RefAttributes<HTMLLIElement>>;
+};

package/dist/components/core/Feed/Feed.js

@@ -0,0 +1,88 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { createContext, useMemo, useState, useContext } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { feedTheme } from './Feed.theme.js';
+import { Avatar } from '../Avatar/Avatar.js';
+import { Button } from '../Button/Button.js';
+import { Textarea } from '../../forms/Textarea/Textarea.js';
+import '../../forms/Textarea/Textarea.theme.js';
+
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+const FeedContext = createContext(undefined);
+const useFeedContext = () => {
+    const ctx = useContext(FeedContext);
+    if (!ctx)
+        return { theme: feedTheme };
+    return ctx;
+};
+// ---------------------------------------------------------------------------
+// Feed (root)
+// ---------------------------------------------------------------------------
+const FeedRoot = React__default.forwardRef(({ children, className, theme: themeOverrides, ...props }, ref) => {
+    const theme = useMemo(() => ({ ...feedTheme, ...themeOverrides }), [themeOverrides]);
+    const contextValue = useMemo(() => ({ theme }), [theme]);
+    return (jsx(FeedContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cn(theme.baseStyle, className), ...props, children: jsx("ul", { role: "list", className: theme.listStyle, children: children }) }) }));
+});
+FeedRoot.displayName = "Feed";
+// ---------------------------------------------------------------------------
+// Feed.Item
+// ---------------------------------------------------------------------------
+const FeedItem = React__default.forwardRef(({ variant = "default", title, timestamp, icon, avatar, children, placeholder = "Add your comment...", submitLabel = "Comment", onSubmit, className, ...props }, ref) => {
+    const { theme } = useFeedContext();
+    // Always call useState (rules of hooks) — only used for comment-input
+    const [inputValue, setInputValue] = useState("");
+    // ------- Indicator rendering -------
+    const renderIndicator = () => {
+        var _a;
+        switch (variant) {
+            case "icon":
+                return jsx("div", { className: theme.iconIndicatorStyle, children: icon });
+            case "avatar":
+            case "comment-input":
+                return (jsx("div", { className: theme.avatarIndicatorStyle, children: jsx(Avatar, { src: avatar === null || avatar === void 0 ? void 0 : avatar.src, alt: (_a = avatar === null || avatar === void 0 ? void 0 : avatar.alt) !== null && _a !== void 0 ? _a : "", className: "size-10 ring-8 ring-[var(--color-background)]" }) }));
+            case "default":
+            default:
+                return (jsx("div", { className: theme.dotIndicatorStyle, children: jsx("span", { className: "size-1.5 rounded-full bg-[var(--color-text-muted)]" }) }));
+        }
+    };
+    // ------- Content rendering -------
+    const renderContent = () => {
+        switch (variant) {
+            case "default":
+            case "icon":
+                return (jsxs("div", { className: cn(theme.contentStyle, "py-1.5"), children: [jsxs("p", { className: theme.actionTextStyle, children: [title && jsxs("span", { className: theme.titleStyle, children: [title, " "] }), children] }), timestamp && jsx("p", { className: theme.timestampStyle, children: timestamp })] }));
+            case "avatar":
+                return (jsxs("div", { className: theme.contentStyle, children: [title && (jsx("p", { className: cn(theme.titleStyle, "text-sm"), children: title })), jsx("p", { className: cn(theme.actionTextStyle, "mt-0.5"), children: children }), timestamp && jsx("p", { className: theme.timestampStyle, children: timestamp })] }));
+            case "comment-input": {
+                const handleSubmit = () => {
+                    const trimmed = inputValue.trim();
+                    if (trimmed && onSubmit) {
+                        onSubmit(trimmed);
+                        setInputValue("");
+                    }
+                };
+                const handleKeyDown = (e) => {
+                    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+                        e.preventDefault();
+                        handleSubmit();
+                    }
+                };
+                return (jsxs("div", { className: theme.commentInputWrapperStyle, children: [jsx(Textarea, { size: "sm", rows: 3, placeholder: placeholder, value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyDown: handleKeyDown }), jsx("div", { className: theme.commentInputFooterStyle, children: jsx(Button, { size: "sm", onClick: handleSubmit, children: submitLabel }) })] }));
+            }
+            default:
+                return null;
+        }
+    };
+    return (jsx("li", { ref: ref, className: className, ...props, children: jsxs("div", { className: theme.itemInnerStyle, children: [jsx("span", { "aria-hidden": "true", className: theme.connectorStyle }), jsxs("div", { className: theme.itemContentStyle, children: [renderIndicator(), renderContent()] })] }) }));
+});
+FeedItem.displayName = "Feed.Item";
+// ---------------------------------------------------------------------------
+// Compound export
+// ---------------------------------------------------------------------------
+const Feed = Object.assign(FeedRoot, {
+    Item: FeedItem,
+});
+
+export { Feed };

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

@@ -0,0 +1,2 @@
+import type { FeedTheme } from "./Feed.types";
+export declare const feedTheme: FeedTheme;

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

@@ -0,0 +1,22 @@
+const feedTheme = {
+    // Structural
+    baseStyle: "flow-root",
+    listStyle: "-mb-8 [&>li:last-child_.feed-connector]:hidden",
+    itemInnerStyle: "relative pb-8",
+    itemContentStyle: "relative flex items-start space-x-3",
+    connectorStyle: "feed-connector absolute top-5 left-[18px] h-full w-0.5 bg-[var(--color-border)]",
+    // Indicators
+    dotIndicatorStyle: "relative flex size-9 items-center justify-center",
+    iconIndicatorStyle: "flex size-9 items-center justify-center rounded-full bg-[var(--color-background-tertiary)] ring-8 ring-[var(--color-background)]",
+    avatarIndicatorStyle: "relative flex-shrink-0",
+    // Content
+    contentStyle: "min-w-0 flex-1",
+    titleStyle: "font-medium text-[var(--color-text-primary)]",
+    actionTextStyle: "text-sm text-[var(--color-text-secondary)]",
+    timestampStyle: "mt-1 text-xs text-[var(--color-text-muted)]/80 whitespace-nowrap font-medium",
+    // Comment input
+    commentInputWrapperStyle: "min-w-0 flex-1 space-y-2",
+    commentInputFooterStyle: "flex justify-end",
+};
+
+export { feedTheme };

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

@@ -0,0 +1,64 @@
+import { ReactNode } from "react";
+export type FeedItemVariant = "default" | "icon" | "avatar" | "comment-input";
+export interface FeedAvatarConfig {
+    src?: string;
+    alt: string;
+}
+export interface FeedTheme {
+    baseStyle: string;
+    listStyle: string;
+    itemInnerStyle: string;
+    itemContentStyle: string;
+    connectorStyle: string;
+    dotIndicatorStyle: string;
+    iconIndicatorStyle: string;
+    avatarIndicatorStyle: string;
+    contentStyle: string;
+    titleStyle: string;
+    actionTextStyle: string;
+    timestampStyle: string;
+    commentInputWrapperStyle: string;
+    commentInputFooterStyle: string;
+}
+export interface FeedThemeOverrides {
+    baseStyle?: string;
+    listStyle?: string;
+    itemInnerStyle?: string;
+    itemContentStyle?: string;
+    connectorStyle?: string;
+    dotIndicatorStyle?: string;
+    iconIndicatorStyle?: string;
+    avatarIndicatorStyle?: string;
+    contentStyle?: string;
+    titleStyle?: string;
+    actionTextStyle?: string;
+    timestampStyle?: string;
+    commentInputWrapperStyle?: string;
+    commentInputFooterStyle?: string;
+}
+export interface FeedProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    theme?: FeedThemeOverrides;
+    className?: string;
+}
+export interface FeedItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>, "onSubmit"> {
+    /** Visual variant of the feed item */
+    variant?: FeedItemVariant;
+    /** Name/label of the entity that performed the action */
+    title?: string;
+    /** Timestamp label (e.g. "6d ago") */
+    timestamp?: string;
+    /** Icon element for the "icon" variant indicator */
+    icon?: ReactNode;
+    /** Avatar configuration for avatar/comment-input variants */
+    avatar?: FeedAvatarConfig;
+    /** Body content (action description, comment text, etc.) */
+    children?: ReactNode;
+    /** Placeholder text for the comment-input textarea */
+    placeholder?: string;
+    /** Label for the comment-input submit button */
+    submitLabel?: string;
+    /** Callback when the comment-input form is submitted */
+    onSubmit?: (text: string) => void;
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export { Feed } from "./Feed";
+export type { FeedProps, FeedItemProps, FeedItemVariant, FeedAvatarConfig, FeedTheme, FeedThemeOverrides, } from "./Feed.types";

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

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