@flikk/ui 1.0.0-beta.1

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

@@ -0,0 +1,36 @@
+/**
+ * Default theme for the Pagination component using modern neutral colors
+ */
+const paginationTheme = {
+    // Base container styles
+    baseStyle: "flex items-center justify-center gap-1",
+    // Unified item styles for all pagination elements (pages, navigation, etc.)
+    // Light mode: white background, muted text, neutral borders
+    // Dark mode: neutral-800 background, lighter text, neutral-600 borders
+    itemStyle: "inline-flex items-center justify-center font-medium rounded-[var(--form-radius)] transition-all duration-200 ease-in-out " +
+        // Focus styles
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 dark:focus-visible:ring-offset-[var(--color-neutral-900)] " +
+        // Base state - light
+        "cursor-pointer bg-white border border-transparent text-[var(--color-text-muted)] " +
+        // Base state - dark
+        "dark:bg-[var(--color-neutral-800)] dark:text-[var(--color-neutral-400)] dark:border-transparent " +
+        // Hover state - light
+        "hover:text-[var(--color-text-primary)] hover:bg-neutral-50 hover:border-[var(--color-border)] " +
+        // Hover state - dark
+        "dark:hover:bg-[var(--color-neutral-700)] dark:hover:text-[var(--color-neutral-200)] dark:hover:border-[var(--color-neutral-600)] " +
+        // Active state - light
+        "data-[active=true]:bg-white data-[active=true]:border-[var(--color-border)] data-[active=true]:text-[var(--color-text-primary)] " +
+        // Active state - dark (uses primary color accent)
+        "dark:data-[active=true]:bg-[var(--color-primary-900)] dark:data-[active=true]:border-[var(--color-primary-700)] dark:data-[active=true]:text-[var(--color-primary-300)] " +
+        // Disabled state
+        "data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none",
+    // Unified item sizes
+    itemSizes: {
+        sm: "size-8 min-w-[2rem] text-sm",
+        md: "size-10 min-w-[2.5rem] text-sm",
+    },
+    // Ellipsis styles
+    ellipsisStyle: "inline-flex items-center justify-center font-medium text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)] cursor-default pointer-events-none",
+};
+
+export { paginationTheme };

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

@@ -0,0 +1,48 @@
+import React from "react";
+import { PaginationTheme } from "./Pagination.theme";
+/**
+ * Pagination component props
+ * @property {number} currentPage - The current active page number (1-based)
+ * @property {number} totalPages - The total number of pages
+ * @property {function} onPageChange - Callback when page changes
+ * @property {PaginationSize} size - Size variant of pagination
+ * @property {boolean} showFirstLast - Whether to show first/last page buttons
+ * @property {boolean} showPrevNext - Whether to show previous/next buttons
+ * @property {number} siblingCount - Number of sibling pages to show around current page
+ */
+export interface PaginationProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The current active page number (1-based) */
+    currentPage: number;
+    /** The total number of pages */
+    totalPages: number;
+    /** Callback when page changes */
+    onPageChange: (page: number) => void;
+    /** Size variant of pagination */
+    size?: PaginationSize;
+    /** Whether to show first/last page buttons */
+    showFirstLast?: boolean;
+    /** Whether to show previous/next buttons */
+    showPrevNext?: boolean;
+    /** Number of sibling pages to show around current page */
+    siblingCount?: number;
+    /** Additional class names */
+    className?: string;
+    /** Theme overrides */
+    theme?: Partial<PaginationTheme>;
+}
+export type PaginationSize = "sm" | "md";
+/**
+ * Internal pagination item props
+ */
+export interface PaginationItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Whether this item is currently active */
+    isActive?: boolean;
+    /** Whether this item is disabled */
+    isDisabled?: boolean;
+    /** Size variant */
+    size?: PaginationSize;
+    /** Item type for styling */
+    variant?: "page" | "ellipsis";
+    /** Additional class names */
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export { Pagination } from "./Pagination";
+export type { PaginationProps, PaginationSize } from "./Pagination.types";

package/dist/components/core/Pill/Pill.animations.d.ts

@@ -0,0 +1,32 @@
+import { Variants } from 'motion/react';
+/**
+ * Animation variants for Pill component
+ *
+ * Reuses Badge's proven animation patterns with spring physics
+ * for natural, responsive interactions.
+ */
+/**
+ * Main pill animation variants
+ * Uses spring physics for smooth, natural motion
+ */
+export declare const pillVariants: Variants;
+/**
+ * Tap/click animation variant
+ * Subtle scale down on press for tactile feedback
+ */
+export declare const pillTapVariant: {
+    scale: number;
+    transition: {
+        duration: number;
+        type: "spring";
+        stiffness: number;
+        damping: number;
+    };
+};
+/**
+ * Utility to check if animations should be enabled
+ * Respects user's reduced-motion preference and Storybook environment
+ *
+ * @returns {boolean} True if animations should be enabled
+ */
+export declare const getShouldAnimate: () => boolean;

package/dist/components/core/Pill/Pill.animations.js

@@ -0,0 +1,25 @@
+/**
+ * Animation variants for Pill component
+ *
+ * Reuses Badge's proven animation patterns with spring physics
+ * for natural, responsive interactions.
+ */
+/**
+ * Main pill animation variants
+ * Uses spring physics for smooth, natural motion
+ */
+/**
+ * Tap/click animation variant
+ * Subtle scale down on press for tactile feedback
+ */
+const pillTapVariant = {
+    scale: 0.98,
+    transition: {
+        duration: 0.1,
+        type: 'spring',
+        stiffness: 400,
+        damping: 10,
+    },
+};
+
+export { pillTapVariant };

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

@@ -0,0 +1,38 @@
+import React from "react";
+import { PillProps } from "./Pill.types";
+/**
+ * Pill component - Simplified selectable chip for filters and tags
+ *
+ * A focused component with single outline style. For colorful semantic
+ * variations, use Badge instead.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Pill>Design</Pill>
+ * ```
+ *
+ * @example Selectable filter
+ * ```tsx
+ * const [selected, setSelected] = useState(false);
+ * <Pill selected={selected} onSelect={setSelected}>
+ *   Frontend
+ * </Pill>
+ * ```
+ *
+ * @example Multi-select filters
+ * ```tsx
+ * const [filters, setFilters] = useState(['design']);
+ * <Pill
+ *   selected={filters.includes('design')}
+ *   onSelect={(selected) => {
+ *     setFilters(selected
+ *       ? [...filters, 'design']
+ *       : filters.filter(f => f !== 'design')
+ *     );
+ *   }}
+ * >
+ *   Design
+ * </Pill>
+ * ```
+ */
+export declare const Pill: React.ForwardRefExoticComponent<PillProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/core/Pill/Pill.js

@@ -0,0 +1,118 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useState, useEffect, useCallback } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { pillTheme } from './Pill.theme.js';
+import { pillTapVariant } from './Pill.animations.js';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * Pill component - Simplified selectable chip for filters and tags
+ *
+ * A focused component with single outline style. For colorful semantic
+ * variations, use Badge instead.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Pill>Design</Pill>
+ * ```
+ *
+ * @example Selectable filter
+ * ```tsx
+ * const [selected, setSelected] = useState(false);
+ * <Pill selected={selected} onSelect={setSelected}>
+ *   Frontend
+ * </Pill>
+ * ```
+ *
+ * @example Multi-select filters
+ * ```tsx
+ * const [filters, setFilters] = useState(['design']);
+ * <Pill
+ *   selected={filters.includes('design')}
+ *   onSelect={(selected) => {
+ *     setFilters(selected
+ *       ? [...filters, 'design']
+ *       : filters.filter(f => f !== 'design')
+ *     );
+ *   }}
+ * >
+ *   Design
+ * </Pill>
+ * ```
+ */
+const Pill = React__default.forwardRef(({ children, size = "md", iconStart, selected = false, onSelect, readOnly = false, className, theme = {}, onClick, ...props }, ref) => {
+    // ========== State Management ==========
+    var _a, _b;
+    const [isSelected, setIsSelected] = useState(selected);
+    useEffect(() => {
+        setIsSelected(selected);
+    }, [selected]);
+    const shouldReduceMotion = useReducedMotion();
+    // ========== Derived State ==========
+    const isSelectable = Boolean(onSelect);
+    const isClickable = Boolean(onClick);
+    const isInteractive = (isSelectable || isClickable) && !readOnly;
+    // ========== Development Warnings ==========
+    useEffect(() => {
+        if (process.env.NODE_ENV !== "production") {
+            if (selected !== undefined && !onSelect) {
+                // eslint-disable-next-line no-console
+                console.warn('[Pill] Component has "selected" prop but missing "onSelect" handler. The pill will not be interactive.');
+            }
+        }
+    }, [selected, onSelect]);
+    // ========== Event Handlers ==========
+    const handleClick = useCallback((e) => {
+        if (readOnly) {
+            e.preventDefault();
+            return;
+        }
+        if (onSelect) {
+            const newSelected = !isSelected;
+            setIsSelected(newSelected);
+            onSelect(newSelected);
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    }, [readOnly, onSelect, isSelected, onClick]);
+    const handleKeyDown = useCallback((e) => {
+        if (readOnly || !isSelectable)
+            return;
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            const newSelected = !isSelected;
+            setIsSelected(newSelected);
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(newSelected);
+        }
+    }, [readOnly, isSelectable, isSelected, onSelect]);
+    // ========== Theme Merging ==========
+    const mergedTheme = {
+        baseStyle: theme.baseStyle || pillTheme.baseStyle,
+        hoverStyle: theme.hoverStyle || pillTheme.hoverStyle,
+        selectedStyle: theme.selectedStyle || pillTheme.selectedStyle,
+        sizeStyle: ((_a = theme.sizes) === null || _a === void 0 ? void 0 : _a[size]) || pillTheme.sizes[size],
+        iconSizeStyle: ((_b = theme.iconSizes) === null || _b === void 0 ? void 0 : _b[size]) || pillTheme.iconSizes[size],
+    };
+    // ========== Icon Rendering ==========
+    const renderStartIcon = useCallback(() => {
+        if (iconStart) {
+            return (jsx("span", { className: cn("flex-shrink-0", mergedTheme.iconSizeStyle), "aria-hidden": "true", children: iconStart }));
+        }
+        return null;
+    }, [iconStart, mergedTheme.iconSizeStyle]);
+    // ========== Render ==========
+    return (jsxs(motion.span, { ref: ref, className: cn(mergedTheme.baseStyle, mergedTheme.sizeStyle, 
+        // Hover only when interactive and NOT selected
+        isInteractive && !isSelected && mergedTheme.hoverStyle, 
+        // Selected styles
+        isSelected && mergedTheme.selectedStyle, 
+        // Cursor styling
+        isInteractive ? "cursor-pointer" : "cursor-default", className // User overrides (highest priority)
+        ), onClick: handleClick, onKeyDown: handleKeyDown, "data-size": size, "data-selected": isSelected ? "true" : "false", "data-readonly": !isInteractive ? "true" : "false", "data-selectable": isSelectable ? "true" : "false", 
+        // Accessibility
+        role: isSelectable && !readOnly ? "button" : undefined, tabIndex: isInteractive ? 0 : undefined, "aria-pressed": isSelectable && !readOnly ? isSelected : undefined, "aria-readonly": readOnly || undefined, 
+        // Animation
+        whileTap: isInteractive && !shouldReduceMotion ? pillTapVariant : undefined, ...props, children: [renderStartIcon(), children] }));
+});
+Pill.displayName = "Pill";
+
+export { Pill };

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

@@ -0,0 +1,8 @@
+import { PillTheme } from "./Pill.types";
+/**
+ * Default theme for Pill component
+ *
+ * Simple outline style for filter chips and tags.
+ * For colorful semantic variations, use Badge instead.
+ */
+export declare const pillTheme: PillTheme;

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

@@ -0,0 +1,44 @@
+/**
+ * Default theme for Pill component
+ *
+ * Simple outline style for filter chips and tags.
+ * For colorful semantic variations, use Badge instead.
+ */
+const pillTheme = {
+    /**
+     * Base pill style - structure and default colors (no hover)
+     */
+    baseStyle: "inline-flex items-center justify-center font-medium rounded-full select-none whitespace-nowrap " +
+        "ring-1 bg-white transition-all duration-300 " +
+        "text-[var(--color-text-primary)] ring-[var(--color-border)] " +
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] " +
+        "dark:bg-[var(--color-background-secondary)]",
+    /**
+     * Hover state - applied only when interactive and NOT selected
+     */
+    hoverStyle: "hover:bg-[var(--color-neutral-100)] hover:ring-[var(--color-neutral-300)] " +
+        "dark:hover:bg-[var(--color-neutral-800)] dark:hover:ring-[var(--color-neutral-500)]",
+    /**
+     * Selected state - applied when selected
+     */
+    selectedStyle: "bg-[var(--color-primary)]/5 ring-[var(--color-primary)] text-[var(--color-primary)] " +
+        "dark:bg-[var(--color-primary)]/20 dark:text-[var(--color-primary-300)] ",
+    /**
+     * Size variants
+     */
+    sizes: {
+        sm: "text-xs px-2 py-0.5 gap-0.5",
+        md: "text-sm px-2.5 py-1 gap-1",
+        lg: "text-sm px-3 py-1 gap-1.5",
+    },
+    /**
+     * Icon sizes for iconStart and CheckIcon
+     */
+    iconSizes: {
+        sm: "size-3",
+        md: "size-3.5",
+        lg: "size-4",
+    },
+};
+
+export { pillTheme };

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

@@ -0,0 +1,82 @@
+import React from "react";
+/**
+ * Pill component props
+ *
+ * A simplified, focused component for filters, tags, and selectable chips.
+ * Single outline style - use Badge for colorful semantic variations.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Pill>Design</Pill>
+ * ```
+ *
+ * @example Selectable filter
+ * ```tsx
+ * <Pill
+ *   selected={isSelected}
+ *   onSelect={setIsSelected}
+ * >
+ *   Frontend
+ * </Pill>
+ * ```
+ */
+export interface PillProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "onChange" | "onSelect" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag"> {
+    /** Content to display inside the pill */
+    children: React.ReactNode;
+    /** Size of the pill */
+    size?: PillSize;
+    /**
+     * Icon element to display at the start (before the content)
+     * Note: Replaced by CheckIcon when pill is selected
+     */
+    iconStart?: React.ReactNode;
+    /** Whether the pill is selected (controlled state) */
+    selected?: boolean;
+    /**
+     * Callback when selection state changes
+     * @param selected - The new selected state
+     */
+    onSelect?: (selected: boolean) => void;
+    /**
+     * Whether the pill is read-only (non-interactive)
+     * Read-only pills don't show hover effects and can't be interacted with
+     * @default false
+     */
+    readOnly?: boolean;
+    /** Additional class name for customization (highest priority) */
+    className?: string;
+    /** Theme overrides for component styling */
+    theme?: PillThemeOverrides;
+}
+/**
+ * Pill size variants
+ */
+export type PillSize = "sm" | "md" | "lg";
+/**
+ * Theme overrides for Pill component
+ *
+ * Allows customization of component styling while maintaining
+ * the shadcn approach where className prop takes highest priority.
+ */
+export interface PillThemeOverrides {
+    /** Base style - structure and default colors */
+    baseStyle?: string;
+    /** Hover state - applied when interactive and NOT selected */
+    hoverStyle?: string;
+    /** Selected state - applied when selected */
+    selectedStyle?: string;
+    /** Size-specific styles */
+    sizes?: Partial<Record<PillSize, string>>;
+    /** Icon sizes for iconStart and CheckIcon */
+    iconSizes?: Partial<Record<PillSize, string>>;
+}
+/**
+ * Complete theme interface for Pill component
+ */
+export interface PillTheme {
+    baseStyle: string;
+    hoverStyle: string;
+    selectedStyle: string;
+    sizes: Record<PillSize, string>;
+    iconSizes: Record<PillSize, string>;
+}

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

@@ -0,0 +1,3 @@
+export { Pill } from './Pill';
+export type { PillProps, PillSize, PillTheme, PillThemeOverrides, } from './Pill.types';
+export { pillTheme } from './Pill.theme';

package/dist/components/core/Popover/Popover.animations.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Animation variants for Popover component
+ */
+export declare const popoverContentVariants: {
+    hidden: {
+        opacity: number;
+        scale: number;
+    };
+    visible: {
+        opacity: number;
+        scale: number;
+    };
+    exit: {
+        opacity: number;
+        scale: number;
+    };
+};
+export declare const popoverTransitions: {
+    content: {
+        duration: number;
+    };
+};

package/dist/components/core/Popover/Popover.animations.js

@@ -0,0 +1,13 @@
+/**
+ * Animation variants for Popover component
+ */
+const popoverContentVariants = {
+    hidden: { opacity: 0, scale: 0.95 },
+    visible: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.95 }
+};
+const popoverTransitions = {
+    content: { duration: 0.2 },
+};
+
+export { popoverContentVariants, popoverTransitions };

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { PopoverRootProps as PopoverProps } from "./Popover.types";
+export declare const Popover: (({ children, className, isOpen: controlledIsOpen, defaultIsOpen, onOpenChange, placement, offset, triggerType, closeOnClickOutside, closeOnEsc, preventClose, hasBackdrop, theme: themeOverrides, darkMode, ...props }: PopoverProps) => import("react/jsx-runtime").JSX.Element) & {
+    Trigger: React.ForwardRefExoticComponent<Omit<import("./Popover.types").PopoverTriggerProps, "ref"> & React.RefAttributes<any>>;
+    Content: React.ForwardRefExoticComponent<import("./Popover.types").PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
+};

package/dist/components/core/Popover/Popover.js

@@ -0,0 +1,72 @@
+import { jsx } from 'react/jsx-runtime';
+import { useId, useState, useRef, useCallback } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { PopoverContext } from './PopoverContext.js';
+import { PopoverTrigger } from './PopoverTrigger.js';
+import { PopoverContent } from './PopoverContent.js';
+import { popoverTheme } from './Popover.theme.js';
+
+/**
+ * Popover component using compound component pattern
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Popover>
+ *   <Popover.Trigger>
+ *     <Button>Open Popover</Button>
+ *   </Popover.Trigger>
+ *   <Popover.Content>
+ *     <div>Popover content</div>
+ *   </Popover.Content>
+ * </Popover>
+ * ```
+ */
+const PopoverRoot = ({ children, className, isOpen: controlledIsOpen, defaultIsOpen = false, onOpenChange, placement = "bottom", offset = 8, triggerType = "click", closeOnClickOutside = true, closeOnEsc = true, preventClose = false, hasBackdrop = false, theme: themeOverrides, darkMode = false, ...props }) => {
+    // Generate unique ID for content linkage
+    const contentId = `${useId()}-popover-content`;
+    // State for uncontrolled mode
+    const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState(defaultIsOpen);
+    // Determine if controlled or uncontrolled
+    const isControlled = controlledIsOpen !== undefined;
+    const isOpen = isControlled ? controlledIsOpen : uncontrolledIsOpen;
+    // Refs for positioning
+    const triggerRef = useRef(null);
+    const contentRef = useRef(null);
+    // Handle open state changes
+    const handleOpenChange = useCallback((value) => {
+        if (!isControlled) {
+            setUncontrolledIsOpen(value);
+        }
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(value);
+    }, [isControlled, onOpenChange]);
+    // Merge theme with overrides
+    const theme = {
+        ...popoverTheme,
+        ...(themeOverrides || {}),
+    };
+    // Context value
+    const contextValue = {
+        isOpen,
+        onOpenChange: handleOpenChange,
+        triggerRef,
+        contentRef,
+        placement,
+        offset,
+        triggerType,
+        closeOnClickOutside,
+        closeOnEsc,
+        preventClose,
+        hasBackdrop,
+        theme,
+        contentId,
+    };
+    return (jsx(PopoverContext.Provider, { value: contextValue, children: jsx("div", { className: cn("popover", darkMode && "dark", className), "data-state": isOpen ? "open" : "closed", "data-backdrop": hasBackdrop ? "true" : "false", ...props, children: children }) }));
+};
+// Export as a unified component
+const Popover = Object.assign(PopoverRoot, {
+    Trigger: PopoverTrigger,
+    Content: PopoverContent,
+});
+
+export { Popover };

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

@@ -0,0 +1,11 @@
+/**
+ * Theme for Popover component
+ */
+export interface PopoverTheme {
+    baseStyle: string;
+    contentStyle: string;
+}
+/**
+ * Default theme for the Popover component
+ */
+export declare const popoverTheme: PopoverTheme;

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

@@ -0,0 +1,11 @@
+/**
+ * Default theme for the Popover component
+ */
+const popoverTheme = {
+    // Base styles for the popover
+    baseStyle: "z-50 outline-none",
+    // Content styles
+    contentStyle: "bg-[var(--color-white)] border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-real-xl p-4 max-w-sm dark:bg-[var(--color-background-secondary)] ",
+};
+
+export { popoverTheme };

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

@@ -0,0 +1,60 @@
+import React, { ReactNode } from "react";
+import { PopoverTheme } from "./Popover.theme";
+export type PopoverPlacement = "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
+export type PopoverTriggerType = "click" | "hover";
+export interface PopoverContextValue {
+    isOpen: boolean;
+    onOpenChange: (isOpen: boolean) => void;
+    triggerRef: React.RefObject<HTMLElement | null>;
+    contentRef: React.RefObject<HTMLDivElement | null>;
+    placement: PopoverPlacement;
+    offset: number;
+    triggerType: PopoverTriggerType;
+    closeOnClickOutside: boolean;
+    closeOnEsc: boolean;
+    preventClose: boolean;
+    hasBackdrop: boolean;
+    theme: PopoverTheme;
+    contentId: string;
+}
+export interface PopoverRootProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    isOpen?: boolean;
+    defaultIsOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    placement?: PopoverPlacement;
+    offset?: number;
+    triggerType?: PopoverTriggerType;
+    closeOnClickOutside?: boolean;
+    closeOnEsc?: boolean;
+    preventClose?: boolean;
+    hasBackdrop?: boolean;
+    theme?: Partial<PopoverTheme>;
+    /**
+     * Force dark mode styling for the component. Use when placing the component
+     * on a dark background while the page is in light mode. This applies the
+     * 'dark' class to the container, making text, borders, and other elements
+     * use light colors for visibility.
+     * @default false
+     */
+    darkMode?: boolean;
+}
+export interface PopoverTriggerProps {
+    children: React.ReactElement;
+    className?: string;
+    [key: string]: unknown;
+}
+export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    animation?: boolean;
+    portal?: boolean;
+}
+/**
+ * Theme overrides for the Popover component
+ */
+export interface PopoverThemeOverrides {
+    /** Base style for the popover */
+    baseStyle?: string;
+    /** Content style for the popover */
+    contentStyle?: string;
+}

package/dist/components/core/Popover/PopoverContent.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { PopoverContentProps } from "./Popover.types";
+/**
+ * PopoverContent component displays the content of the popover
+ */
+declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
+export { PopoverContent };