flikkui 0.2.0-beta.2 → 0.2.0-beta.5

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

@@ -1,24 +1,20 @@
-import React from 'react';
-import { PillProps } from './Pill.types';
+import React from "react";
+import { PillProps } from "./Pill.types";
 /**
  * Pill component - Simplified selectable chip for filters and tags
  *
- * A focused alternative to Badge without icons, avatars, or dismissible functionality.
- * Perfect for filter chips, tag selection, and simple category pills.
+ * A focused component with single outline style. For colorful semantic
+ * variations, use Badge instead.
  *
  * @example Basic usage
  * ```tsx
- * <Pill variant="primary">Design</Pill>
+ * <Pill>Design</Pill>
  * ```
  *
  * @example Selectable filter
  * ```tsx
  * const [selected, setSelected] = useState(false);
- * <Pill
- *   variant="primary"
- *   selected={selected}
- *   onSelect={setSelected}
- * >
+ * <Pill selected={selected} onSelect={setSelected}>
  *   Frontend
  * </Pill>
  * ```
@@ -27,7 +23,6 @@ import { PillProps } from './Pill.types';
  * ```tsx
  * const [filters, setFilters] = useState(['design']);
  * <Pill
- *   variant="primary"
  *   selected={filters.includes('design')}
  *   onSelect={(selected) => {
  *     setFilters(selected

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

@@ -2,7 +2,7 @@ import { PillTheme } from "./Pill.types";
 /**
  * Default theme for Pill component
  *
- * Separates visual variants from semantic colors following new convention.
- * All styles can be overridden via className prop (shadcn approach).
+ * 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.types.d.ts

@@ -3,17 +3,16 @@ import React from "react";
  * Pill component props
  *
  * A simplified, focused component for filters, tags, and selectable chips.
- * Lighter alternative to Badge without icons, avatars, or dismissible functionality.
+ * Single outline style - use Badge for colorful semantic variations.
  *
  * @example Basic usage
  * ```tsx
- * <Pill variant="primary">Design</Pill>
+ * <Pill>Design</Pill>
  * ```
  *
  * @example Selectable filter
  * ```tsx
  * <Pill
- *   variant="primary"
  *   selected={isSelected}
  *   onSelect={setIsSelected}
  * >
@@ -24,10 +23,6 @@ import React from "react";
 export interface PillProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "onChange" | "onSelect" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag"> {
     /** Content to display inside the pill */
     children: React.ReactNode;
-    /** Visual style variant (filled, outline, soft) */
-    variant?: PillVariant;
-    /** Semantic color (primary, success, danger, etc.) */
-    color?: PillColor;
     /** Size of the pill */
     size?: PillSize;
     /**
@@ -53,14 +48,6 @@ export interface PillProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "
     /** Theme overrides for component styling */
     theme?: PillThemeOverrides;
 }
-/**
- * Pill visual variants (appearance)
- */
-export type PillVariant = "filled" | "outline" | "soft";
-/**
- * Pill semantic colors (intent)
- */
-export type PillColor = "neutral" | "primary" | "success" | "warning" | "danger";
 /**
  * Pill size variants
  */
@@ -72,12 +59,12 @@ export type PillSize = "sm" | "md" | "lg";
  * the shadcn approach where className prop takes highest priority.
  */
 export interface PillThemeOverrides {
-    /** Style for the pill container */
+    /** Base style - structure and default colors */
     baseStyle?: string;
-    /** Variant-specific styles (visual appearance) */
-    variants?: Partial<Record<PillVariant, string>>;
-    /** Color-specific styles (semantic intent) */
-    colors?: Partial<Record<PillColor, 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 */
@@ -88,8 +75,8 @@ export interface PillThemeOverrides {
  */
 export interface PillTheme {
     baseStyle: string;
-    variants: Record<PillVariant, string>;
-    colors: Record<PillColor, string>;
+    hoverStyle: string;
+    selectedStyle: string;
     sizes: Record<PillSize, string>;
     iconSizes: Record<PillSize, string>;
 }

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

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

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

@@ -1,6 +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, ...props }: PopoverProps) => React.JSX.Element) & {
+export declare const Popover: (({ children, className, isOpen: controlledIsOpen, defaultIsOpen, onOpenChange, placement, offset, triggerType, closeOnClickOutside, closeOnEsc, preventClose, hasBackdrop, theme: themeOverrides, darkMode, ...props }: PopoverProps) => React.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

@@ -21,7 +21,7 @@ import { popoverTheme } from './Popover.theme.js';
  * </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, ...props }) => {
+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 }) => {
     // State for uncontrolled mode
     const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState(defaultIsOpen);
     // Determine if controlled or uncontrolled
@@ -58,7 +58,7 @@ const PopoverRoot = ({ children, className, isOpen: controlledIsOpen, defaultIsO
         theme,
     };
     return (React__default.createElement(PopoverContext.Provider, { value: contextValue },
-        React__default.createElement("div", { className: cn("popover", className), "data-state": isOpen ? "open" : "closed", "data-backdrop": hasBackdrop ? "true" : "false", ...props }, children)));
+        React__default.createElement("div", { className: cn("popover", darkMode && "dark", className), "data-state": isOpen ? "open" : "closed", "data-backdrop": hasBackdrop ? "true" : "false", ...props }, children)));
 };
 // Export as a unified component
 const Popover = Object.assign(PopoverRoot, {

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

@@ -29,6 +29,14 @@ export interface PopoverRootProps extends React.HTMLAttributes<HTMLDivElement> {
     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;

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { ProgressProps } from "./Progress.types";
+/**
+ * Progress component - Linear progress bar for tracking completion
+ *
+ * Features:
+ * - Determinate mode: Shows specific progress value (0-100)
+ * - Indeterminate mode: Animated loading state when value is undefined
+ * - Multiple sizes and semantic colors
+ * - Flexible label positioning (right, top, bottom, inside)
+ * - Respects reduced motion preferences
+ * - Full className override support
+ *
+ * @example
+ * // Determinate progress
+ * <Progress value={60} color="primary" />
+ *
+ * // With label
+ * <Progress value={75} showLabel labelPosition="right" />
+ *
+ * // Indeterminate (loading)
+ * <Progress color="primary" />
+ *
+ * // Custom label format
+ * <Progress value={50} showLabel formatLabel={(pct) => `${pct}% complete`} />
+ */
+declare const Progress: React.FC<ProgressProps>;
+export { Progress };

package/dist/components/core/Progress/Progress.js

@@ -0,0 +1,114 @@
+import React__default, { useMemo } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { progressTheme } from './Progress.theme.js';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * Progress component - Linear progress bar for tracking completion
+ *
+ * Features:
+ * - Determinate mode: Shows specific progress value (0-100)
+ * - Indeterminate mode: Animated loading state when value is undefined
+ * - Multiple sizes and semantic colors
+ * - Flexible label positioning (right, top, bottom, inside)
+ * - Respects reduced motion preferences
+ * - Full className override support
+ *
+ * @example
+ * // Determinate progress
+ * <Progress value={60} color="primary" />
+ *
+ * // With label
+ * <Progress value={75} showLabel labelPosition="right" />
+ *
+ * // Indeterminate (loading)
+ * <Progress color="primary" />
+ *
+ * // Custom label format
+ * <Progress value={50} showLabel formatLabel={(pct) => `${pct}% complete`} />
+ */
+const Progress = ({ value, size = "md", color = "primary", showLabel = false, labelPosition = "right", formatLabel, animated = true, trackClassName, fillClassName, className, theme: customTheme, ...props }) => {
+    const shouldReduceMotion = useReducedMotion();
+    // Merge custom theme with default theme
+    const theme = useMemo(() => {
+        if (!customTheme)
+            return progressTheme;
+        return {
+            ...progressTheme,
+            ...customTheme,
+            sizes: { ...progressTheme.sizes, ...customTheme.sizes },
+            colors: { ...progressTheme.colors, ...customTheme.colors },
+        };
+    }, [customTheme]);
+    // Calculate percentage (clamped to 0-100)
+    const percentage = useMemo(() => {
+        if (value === undefined || value === null)
+            return 0;
+        return Math.min(Math.max(Math.round(value), 0), 100);
+    }, [value]);
+    // Determine if this is indeterminate mode
+    const isIndeterminate = value === undefined || value === null;
+    // Format the label
+    const label = useMemo(() => {
+        if (formatLabel)
+            return formatLabel(percentage);
+        return `${percentage}%`;
+    }, [percentage, formatLabel]);
+    // Determine if animation should be applied
+    const shouldAnimate = animated && !shouldReduceMotion;
+    // Get container layout based on label position
+    const containerLayoutClass = useMemo(() => {
+        if (!showLabel || isIndeterminate)
+            return "";
+        switch (labelPosition) {
+            case "top":
+                return "flex flex-col gap-1.5";
+            case "bottom":
+                return "flex flex-col-reverse gap-1.5";
+            case "right":
+                return "flex items-center gap-3";
+            case "inside":
+                return "";
+            default:
+                return "";
+        }
+    }, [showLabel, labelPosition, isIndeterminate]);
+    // Render label element
+    const renderLabel = () => {
+        if (!showLabel || isIndeterminate)
+            return null;
+        if (labelPosition === "inside") {
+            // Only show inside label for lg size (enough height)
+            if (size !== "lg")
+                return null;
+            return React__default.createElement("span", { className: theme.insideLabelStyle }, label);
+        }
+        return (React__default.createElement("span", { className: cn(theme.labelStyle, labelPosition === "top" || labelPosition === "bottom"
+                ? "text-left"
+                : "") }, label));
+    };
+    // Track element with optional fill
+    const renderTrack = () => (React__default.createElement("div", { className: cn(theme.trackStyle, theme.sizes[size], "relative", trackClassName) },
+        isIndeterminate ? (
+        // Indeterminate animation
+        React__default.createElement("div", { className: cn(theme.fillStyle, theme.colors[color], "w-1/3", theme.indeterminateStyle, fillClassName) })) : shouldAnimate ? (
+        // Animated determinate progress with spring animation
+        React__default.createElement(motion.div, { className: cn(theme.fillStyle, theme.colors[color], fillClassName), initial: { width: 0 }, animate: { width: `${percentage}%` }, transition: {
+                type: "spring",
+                stiffness: 100,
+                damping: 20,
+                mass: 0.5,
+            } })) : (
+        // Static determinate progress
+        React__default.createElement("div", { className: cn(theme.fillStyle, theme.colors[color], fillClassName), style: { width: `${percentage}%` } })),
+        showLabel && labelPosition === "inside" && size === "lg" && !isIndeterminate && (React__default.createElement("span", { className: theme.insideLabelStyle }, label))));
+    return (React__default.createElement("div", { className: cn(theme.containerStyle, containerLayoutClass, className), role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": isIndeterminate ? undefined : percentage, "aria-label": isIndeterminate ? "Loading" : `${percentage}% complete`, ...props },
+        labelPosition === "top" && renderLabel(),
+        labelPosition === "right" ? (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("div", { className: "flex-1" }, renderTrack()),
+            renderLabel())) : (renderTrack()),
+        labelPosition === "bottom" && renderLabel()));
+};
+Progress.displayName = "Progress";
+
+export { Progress };

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

@@ -0,0 +1,5 @@
+import { ProgressTheme } from "./Progress.types";
+/**
+ * Default theme configuration for Progress component
+ */
+export declare const progressTheme: ProgressTheme;

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

@@ -0,0 +1,33 @@
+/**
+ * Default theme configuration for Progress component
+ */
+const progressTheme = {
+    // Container styles
+    containerStyle: "w-full",
+    // Track (background) styles
+    trackStyle: "relative w-full rounded-full bg-[var(--color-background-tertiary)] overflow-hidden",
+    // Fill (progress bar) styles
+    fillStyle: "h-full rounded-full",
+    // Label text styles
+    labelStyle: "text-sm font-medium text-[var(--color-text-secondary)] tabular-nums min-w-[2.5rem] text-right",
+    // Inside label styles (when label is positioned inside the bar)
+    insideLabelStyle: "absolute inset-0 flex items-center justify-center text-xs font-medium text-white tabular-nums",
+    // Size variants for track height
+    sizes: {
+        sm: "h-1.5",
+        md: "h-2.5",
+        lg: "h-4",
+    },
+    // Color variants for the fill
+    colors: {
+        neutral: "bg-[var(--color-neutral-400)] dark:bg-[var(--color-neutral-500)]",
+        primary: "bg-[var(--color-primary)] dark:bg-[var(--color-primary-400)]",
+        success: "bg-[var(--color-success)] dark:bg-[var(--color-success-400)]",
+        warning: "bg-[var(--color-warning)] dark:bg-[var(--color-warning-400)]",
+        danger: "bg-[var(--color-danger)] dark:bg-[var(--color-danger-400)]",
+    },
+    // Indeterminate animation styles
+    indeterminateStyle: "animate-[progress-indeterminate_1.5s_ease-in-out_infinite]",
+};
+
+export { progressTheme };

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

@@ -0,0 +1,92 @@
+import React from "react";
+export type ProgressSize = "sm" | "md" | "lg";
+export type ProgressColor = "neutral" | "primary" | "success" | "warning" | "danger";
+export type ProgressLabelPosition = "right" | "top" | "bottom" | "inside";
+/**
+ * Theme configuration for Progress component
+ */
+export interface ProgressTheme {
+    /** Outer container styles */
+    containerStyle: string;
+    /** Track (background) styles */
+    trackStyle: string;
+    /** Fill (progress bar) styles */
+    fillStyle: string;
+    /** Label text styles */
+    labelStyle: string;
+    /** Inside label styles (when label is inside the bar) */
+    insideLabelStyle: string;
+    /** Size variants for the track height */
+    sizes: Record<ProgressSize, string>;
+    /** Color variants for the fill */
+    colors: Record<ProgressColor, string>;
+    /** Indeterminate animation styles */
+    indeterminateStyle: string;
+}
+/**
+ * Theme overrides for Progress component
+ */
+export interface ProgressThemeOverrides {
+    containerStyle?: string;
+    trackStyle?: string;
+    fillStyle?: string;
+    labelStyle?: string;
+    insideLabelStyle?: string;
+    sizes?: Partial<Record<ProgressSize, string>>;
+    colors?: Partial<Record<ProgressColor, string>>;
+    indeterminateStyle?: string;
+}
+export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Progress value from 0 to 100.
+     * If undefined, the progress bar will be in indeterminate mode.
+     */
+    value?: number;
+    /**
+     * The size of the progress bar
+     * @default 'md'
+     */
+    size?: ProgressSize;
+    /**
+     * The semantic color of the progress bar
+     * @default 'primary'
+     */
+    color?: ProgressColor;
+    /**
+     * Whether to show the percentage label
+     * @default false
+     */
+    showLabel?: boolean;
+    /**
+     * Position of the label
+     * @default 'right'
+     */
+    labelPosition?: ProgressLabelPosition;
+    /**
+     * Custom label formatter function
+     * @param percentage - The current percentage value (0-100)
+     * @returns The formatted label string
+     */
+    formatLabel?: (percentage: number) => string;
+    /**
+     * Whether to animate value changes
+     * @default true
+     */
+    animated?: boolean;
+    /**
+     * Additional class name for the track (background) element
+     */
+    trackClassName?: string;
+    /**
+     * Additional class name for the fill (progress) element
+     */
+    fillClassName?: string;
+    /**
+     * Additional class name for the container
+     */
+    className?: string;
+    /**
+     * Component-level theme overrides
+     */
+    theme?: ProgressThemeOverrides;
+}

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

@@ -0,0 +1,2 @@
+export { Progress } from "./Progress";
+export type { ProgressProps, ProgressSize, ProgressColor, ProgressLabelPosition, ProgressThemeOverrides, } from "./Progress.types";

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

@@ -1,21 +1,10 @@
 import { Variants } from "motion/react";
 /**
- * Get table row animation variants for row transitions (selection, expansion, etc.)
+ * Container animation for row expansion (height: 0 -> auto with opacity)
+ * Uses the same easing curve pattern as Accordion for consistency
  */
-export declare const getTableRowVariants: (shouldReduceMotion: boolean | null) => Variants | undefined;
+export declare const tableExpandAnimations: Variants;
 /**
- * Get table expanded row animation variants for row expansion
+ * Content slide-in animation for expanded row content (staggered after container)
  */
-export declare const getTableExpandedRowVariants: (shouldReduceMotion: boolean | null) => Variants | undefined;
-/**
- * Get table column manager slide animation variants
- */
-export declare const getTableColumnManagerVariants: (shouldReduceMotion: boolean | null) => Variants | undefined;
-/**
- * Get table loading state animation variants
- */
-export declare const getTableLoadingVariants: (shouldReduceMotion: boolean | null) => Variants | undefined;
-/**
- * Get table sort indicator animation variants
- */
-export declare const getTableSortVariants: (shouldReduceMotion: boolean | null) => Variants | undefined;
+export declare const tableExpandContentAnimations: Variants;

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

@@ -0,0 +1,46 @@
+/**
+ * Container animation for row expansion (height: 0 -> auto with opacity)
+ * Uses the same easing curve pattern as Accordion for consistency
+ */
+const tableExpandAnimations = {
+    collapsed: {
+        height: 0,
+        opacity: 0,
+        transition: {
+            height: { duration: 0.3, ease: [0.04, 0.62, 0.23, 0.98] },
+            opacity: { duration: 0.25 },
+        },
+    },
+    expanded: {
+        height: 'auto',
+        opacity: 1,
+        transition: {
+            height: { duration: 0.4, ease: [0.04, 0.62, 0.23, 0.98] },
+            opacity: { duration: 0.3, delay: 0.1 },
+        },
+    },
+};
+/**
+ * Content slide-in animation for expanded row content (staggered after container)
+ */
+const tableExpandContentAnimations = {
+    collapsed: {
+        opacity: 0,
+        y: -10,
+        transition: {
+            y: { duration: 0.2 },
+            opacity: { duration: 0.2 },
+        },
+    },
+    expanded: {
+        opacity: 1,
+        y: 0,
+        transition: {
+            delay: 0.15,
+            y: { duration: 0.3 },
+            opacity: { duration: 0.3 },
+        },
+    },
+};
+
+export { tableExpandAnimations, tableExpandContentAnimations };

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

@@ -17,33 +17,6 @@ declare const TableContext: React.Context<TableContextType>;
  * - Pagination support
  * - Full accessibility compliance (WCAG 2.1 AA)
  * - Theme customization with className overrides
- *
- * @example
- * // Data-driven API with stable row keys
- * <Table data={data} columns={columns} rowKey="id" sortable selectable />
- *
- * // Using a function for complex row keys
- * <Table
- *   data={data}
- *   columns={columns}
- *   rowKey={(row, index) => `${row.category}-${row.id}`}
- *   sortable
- *   selectable
- * />
- *
- * // Declarative API
- * <Table>
- *   <Table.Header>
- *     <Table.Row>
- *       <Table.HeaderCell>Name</Table.HeaderCell>
- *     </Table.Row>
- *   </Table.Header>
- *   <Table.Body>
- *     <Table.Row>
- *       <Table.Cell>John Doe</Table.Cell>
- *     </Table.Row>
- *   </Table.Body>
- * </Table>
  */
 declare function TableComponent<T extends Record<string, any>>(props: TableProps<T>): React.ReactElement;
 declare namespace TableComponent {