flikkui 0.1.0-beta.8 → 0.2.0-beta.1

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

@@ -0,0 +1,43 @@
+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.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Pill variant="primary">Design</Pill>
+ * ```
+ *
+ * @example Selectable filter
+ * ```tsx
+ * const [selected, setSelected] = useState(false);
+ * <Pill
+ *   variant="primary"
+ *   selected={selected}
+ *   onSelect={setSelected}
+ * >
+ *   Frontend
+ * </Pill>
+ * ```
+ *
+ * @example Multi-select filters
+ * ```tsx
+ * const [filters, setFilters] = useState(['design']);
+ * <Pill
+ *   variant="primary"
+ *   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,145 @@
+import React__default, { useState, useEffect, useCallback } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { CheckIcon } from '@heroicons/react/16/solid';
+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 alternative to Badge without icons, avatars, or dismissible functionality.
+ * Perfect for filter chips, tag selection, and simple category pills.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Pill variant="primary">Design</Pill>
+ * ```
+ *
+ * @example Selectable filter
+ * ```tsx
+ * const [selected, setSelected] = useState(false);
+ * <Pill
+ *   variant="primary"
+ *   selected={selected}
+ *   onSelect={setSelected}
+ * >
+ *   Frontend
+ * </Pill>
+ * ```
+ *
+ * @example Multi-select filters
+ * ```tsx
+ * const [filters, setFilters] = useState(['design']);
+ * <Pill
+ *   variant="primary"
+ *   selected={filters.includes('design')}
+ *   onSelect={(selected) => {
+ *     setFilters(selected
+ *       ? [...filters, 'design']
+ *       : filters.filter(f => f !== 'design')
+ *     );
+ *   }}
+ * >
+ *   Design
+ * </Pill>
+ * ```
+ */
+const Pill = React__default.forwardRef(({ children, variant = 'filled', color = 'primary', size = 'md', iconStart, selected = false, onSelect, readOnly = false, className, theme = {}, onClick, ...props }, ref) => {
+    // ========== State Management ==========
+    var _a, _b, _c, _d;
+    // Internal selected state (synced with controlled prop)
+    const [isSelected, setIsSelected] = useState(selected);
+    // Sync internal state with controlled prop
+    useEffect(() => {
+        setIsSelected(selected);
+    }, [selected]);
+    // Check for reduced motion preference
+    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 ==========
+    /**
+     * Handle pill click - toggles selection if selectable
+     */
+    const handleClick = useCallback((e) => {
+        // Don't do anything if read-only
+        if (readOnly) {
+            e.preventDefault();
+            return;
+        }
+        // Toggle selection if selectable
+        if (onSelect) {
+            const newSelected = !isSelected;
+            setIsSelected(newSelected);
+            onSelect(newSelected);
+        }
+        // Call user's onClick handler if provided
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    }, [readOnly, onSelect, isSelected, onClick]);
+    /**
+     * Handle keyboard interactions (Enter/Space to toggle)
+     */
+    const handleKeyDown = useCallback((e) => {
+        if (readOnly || !isSelectable)
+            return;
+        // Toggle on Enter or Space
+        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,
+        variantStyle: ((_a = theme.variants) === null || _a === void 0 ? void 0 : _a[variant]) || pillTheme.variants[variant],
+        colorStyle: ((_b = theme.colors) === null || _b === void 0 ? void 0 : _b[color]) || pillTheme.colors[color],
+        sizeStyle: ((_c = theme.sizes) === null || _c === void 0 ? void 0 : _c[size]) || pillTheme.sizes[size],
+        iconSizeStyle: ((_d = theme.iconSizes) === null || _d === void 0 ? void 0 : _d[size]) || pillTheme.iconSizes[size],
+    };
+    // ========== Icon Rendering ==========
+    /**
+     * Renders the start icon or check icon based on selection state
+     * - When selected: Shows CheckIcon (replaces iconStart)
+     * - When not selected: Shows iconStart if provided
+     * - Otherwise: null
+     */
+    const renderStartIcon = useCallback(() => {
+        // Selected state: show check icon
+        if (isSelected && isSelectable) {
+            return (React__default.createElement(CheckIcon, { className: cn('flex-shrink-0 -ml-0.5', mergedTheme.iconSizeStyle), "aria-hidden": "true" }));
+        }
+        // Unselected state: show iconStart if provided
+        if (iconStart) {
+            return (React__default.createElement("span", { className: cn('flex-shrink-0', mergedTheme.iconSizeStyle), "aria-hidden": "true" }, iconStart));
+        }
+        return null;
+    }, [isSelected, isSelectable, iconStart, mergedTheme.iconSizeStyle]);
+    // ========== Render ==========
+    return (React__default.createElement(motion.span, { ref: ref, className: cn(mergedTheme.baseStyle, mergedTheme.variantStyle, mergedTheme.colorStyle, mergedTheme.sizeStyle, 
+        // Conditional cursor styling - only show pointer for interactive pills
+        isInteractive ? 'cursor-pointer' : 'cursor-default', className // User overrides (highest priority)
+        ), onClick: handleClick, onKeyDown: handleKeyDown, "data-variant": variant, "data-color": color, "data-size": size, "data-selected": isSelected ? 'true' : 'false', "data-readonly": !isInteractive ? 'true' : 'false', "data-selectable": isSelectable ? 'true' : 'false', 
+        // Accessibility attributes
+        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 },
+        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
+ *
+ * Separates visual variants from semantic colors following new convention.
+ * All styles can be overridden via className prop (shadcn approach).
+ */
+export declare const pillTheme: PillTheme;

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

@@ -0,0 +1,65 @@
+/**
+ * Default theme for Pill component
+ *
+ * Separates visual variants from semantic colors following new convention.
+ * All styles can be overridden via className prop (shadcn approach).
+ */
+const pillTheme = {
+    /**
+     * Base pill container style
+     * - Always rounded-full (pill shape)
+     * - Flexbox for centering content
+     * - Smooth transitions for interactions
+     * - Non-selectable text
+     * - Cursor styling is conditionally applied in component based on interactivity
+     */
+    baseStyle: "inline-flex items-center justify-center font-medium rounded-full select-none whitespace-nowrap  transition-all duration-300 focus:outline-none focus-visible:ring focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2",
+    /**
+     * Visual style variants (appearance treatment)
+     */
+    variants: {
+        filled: "ring-1",
+        outline: "bg-transparent ring-2",
+        soft: "ring-1 ring-transparent",
+    },
+    /**
+     * Semantic colors with selection states
+     * Uses data-attributes for state styling:
+     * - data-[selected=true]: Lighter fill background with check icon
+     * - data-[readonly=false]:hover: Hover state (only applies when not read-only)
+     */
+    colors: {
+        neutral: "bg-[var(--color-background)] text-[var(--color-text-primary)] ring-[var(--color-border)] data-[readonly=false]:hover:bg-neutral-100 data-[selected=true]:bg-neutral-100 data-[selected=true]:ring-[var(--color-border)]",
+        primary: "bg-[var(--color-primary-50)] text-[var(--color-primary)] ring-[var(--color-primary)]/30 data-[readonly=false]:hover:bg-[var(--color-primary-100)] data-[selected=true]:bg-[var(--color-primary-300)] data-[selected=true]:ring-[var(--color-primary)]/30",
+        success: "bg-[var(--color-success-50)] text-[var(--color-success-700)] ring-[var(--color-success)]/20 data-[readonly=false]:hover:bg-[var(--color-success-100)] data-[selected=true]:bg-[var(--color-success-200)] data-[selected=true]:ring-[var(--color-success)]/30",
+        warning: "bg-[var(--color-warning-50)] text-[var(--color-warning-700)] ring-[var(--color-warning)]/20 data-[readonly=false]:hover:bg-[var(--color-warning-100)] data-[selected=true]:bg-[var(--color-warning-200)] data-[selected=true]:ring-[var(--color-warning)]/30",
+        danger: "bg-[var(--color-danger-50)] text-[var(--color-danger-700)] ring-[var(--color-danger)]/20 data-[readonly=false]:hover:bg-[var(--color-danger-100)] data-[selected=true]:bg-[var(--color-danger-200)] data-[selected=true]:ring-[var(--color-danger)]/30",
+    },
+    /**
+     * Size variants
+     * Defines padding, text size, and spacing for different pill sizes
+     * Matches Badge pill variant sizing for consistency
+     */
+    sizes: {
+        /** Small pill - matches Badge sm with pill=true */
+        sm: "text-xs px-2 py-0.5 gap-0.5",
+        /** Medium pill (default) - matches Badge md with pill=true */
+        md: "text-sm px-2.5 py-0.5 gap-1",
+        /** Large pill - matches Badge lg with pill=true */
+        lg: "text-sm px-3 py-1 gap-1.5",
+    },
+    /**
+     * Icon sizes for iconStart and CheckIcon
+     * Matches Badge icon sizing pattern
+     */
+    iconSizes: {
+        /** Small icon size */
+        sm: "size-3",
+        /** Medium icon size (default) */
+        md: "size-3.5",
+        /** Large icon size */
+        lg: "size-4",
+    },
+};
+
+export { pillTheme };

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

@@ -0,0 +1,95 @@
+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.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Pill variant="primary">Design</Pill>
+ * ```
+ *
+ * @example Selectable filter
+ * ```tsx
+ * <Pill
+ *   variant="primary"
+ *   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;
+    /** Visual style variant (filled, outline, soft) */
+    variant?: PillVariant;
+    /** Semantic color (primary, success, danger, etc.) */
+    color?: PillColor;
+    /** 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 visual variants (appearance)
+ */
+export type PillVariant = "filled" | "outline" | "soft";
+/**
+ * Pill semantic colors (intent)
+ */
+export type PillColor = "neutral" | "primary" | "success" | "warning" | "danger";
+/**
+ * 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 {
+    /** Style for the pill container */
+    baseStyle?: string;
+    /** Variant-specific styles (visual appearance) */
+    variants?: Partial<Record<PillVariant, string>>;
+    /** Color-specific styles (semantic intent) */
+    colors?: Partial<Record<PillColor, 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;
+    variants: Record<PillVariant, string>;
+    colors: Record<PillColor, 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, PillVariant, PillSize, PillTheme, PillThemeOverrides, } from './Pill.types';
+export { pillTheme } from './Pill.theme';

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

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

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

@@ -1,25 +1,6 @@
 import React from "react";
 import { PopoverRootProps as PopoverProps } from "./Popover.types";
-/**
- * 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>
- * ```
- */
-declare const Popover: ({ children, className, isOpen: controlledIsOpen, defaultIsOpen, onOpenChange, placement, offset, triggerType, closeOnClickOutside, closeOnEsc, preventClose, hasBackdrop, theme: themeOverrides, ...props }: PopoverProps) => React.JSX.Element;
-declare const _default: (({ 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, ...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>>;
 };
-export default _default;
-export { Popover };

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

@@ -1,9 +1,8 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
 import React__default, { 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 { PopoverContent } from './PopoverContent.js';
 import { popoverTheme } from './Popover.theme.js';
 
 /**
@@ -22,47 +21,49 @@ import { popoverTheme } from './Popover.theme.js';
  * </Popover>
  * ```
  */
-var Popover = function (_a) {
-    var children = _a.children, className = _a.className, controlledIsOpen = _a.isOpen, _b = _a.defaultIsOpen, defaultIsOpen = _b === void 0 ? false : _b, onOpenChange = _a.onOpenChange, _c = _a.placement, placement = _c === void 0 ? "bottom" : _c, _d = _a.offset, offset = _d === void 0 ? 8 : _d, _e = _a.triggerType, triggerType = _e === void 0 ? "click" : _e, _f = _a.closeOnClickOutside, closeOnClickOutside = _f === void 0 ? true : _f, _g = _a.closeOnEsc, closeOnEsc = _g === void 0 ? true : _g, _h = _a.preventClose, preventClose = _h === void 0 ? false : _h, _j = _a.hasBackdrop, hasBackdrop = _j === void 0 ? false : _j, themeOverrides = _a.theme, props = __rest(_a, ["children", "className", "isOpen", "defaultIsOpen", "onOpenChange", "placement", "offset", "triggerType", "closeOnClickOutside", "closeOnEsc", "preventClose", "hasBackdrop", "theme"]);
+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 }) => {
     // State for uncontrolled mode
-    var _k = useState(defaultIsOpen), uncontrolledIsOpen = _k[0], setUncontrolledIsOpen = _k[1];
+    const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState(defaultIsOpen);
     // Determine if controlled or uncontrolled
-    var isControlled = controlledIsOpen !== undefined;
-    var isOpen = isControlled ? controlledIsOpen : uncontrolledIsOpen;
+    const isControlled = controlledIsOpen !== undefined;
+    const isOpen = isControlled ? controlledIsOpen : uncontrolledIsOpen;
     // Refs for positioning
-    var triggerRef = useRef(null);
-    var contentRef = useRef(null);
+    const triggerRef = useRef(null);
+    const contentRef = useRef(null);
     // Handle open state changes
-    var handleOpenChange = useCallback(function (value) {
+    const handleOpenChange = useCallback((value) => {
         if (!isControlled) {
             setUncontrolledIsOpen(value);
         }
         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(value);
     }, [isControlled, onOpenChange]);
     // Merge theme with overrides
-    var theme = __assign(__assign({}, popoverTheme), (themeOverrides || {}));
+    const theme = {
+        ...popoverTheme,
+        ...(themeOverrides || {}),
+    };
     // Context value
-    var contextValue = {
-        isOpen: isOpen,
+    const contextValue = {
+        isOpen,
         onOpenChange: handleOpenChange,
-        triggerRef: triggerRef,
-        contentRef: contentRef,
-        placement: placement,
-        offset: offset,
-        triggerType: triggerType,
-        closeOnClickOutside: closeOnClickOutside,
-        closeOnEsc: closeOnEsc,
-        preventClose: preventClose,
-        hasBackdrop: hasBackdrop,
-        theme: theme,
+        triggerRef,
+        contentRef,
+        placement,
+        offset,
+        triggerType,
+        closeOnClickOutside,
+        closeOnEsc,
+        preventClose,
+        hasBackdrop,
+        theme,
     };
     return (React__default.createElement(PopoverContext.Provider, { value: contextValue },
-        React__default.createElement("div", __assign({ className: cn("popover", className), "data-state": isOpen ? "open" : "closed", "data-backdrop": hasBackdrop ? "true" : "false" }, props), children)));
+        React__default.createElement("div", { className: cn("popover", className), "data-state": isOpen ? "open" : "closed", "data-backdrop": hasBackdrop ? "true" : "false", ...props }, children)));
 };
 // Export as a unified component
-var Popover$1 = Object.assign(Popover, {
+const Popover = Object.assign(PopoverRoot, {
     Trigger: PopoverTrigger,
     Content: PopoverContent,
 });
 
-export { Popover, Popover$1 as default };
+export { Popover };

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

@@ -1,11 +1,11 @@
 /**
  * Default theme for the Popover component
  */
-var popoverTheme = {
+const popoverTheme = {
     // Base styles for the popover
     baseStyle: "z-50 outline-none",
     // Content styles
-    contentStyle: "bg-white border border-border rounded-[var(--popover-rounded)] shadow-[var(--popover-shadow)] p-[var(--popover-padding-md)] max-w-[var(--popover-max-width-md)]",
+    contentStyle: "bg-white border border-[var(--color-border)] rounded-lg shadow-real-xl p-4 max-w-sm",
     // Backdrop styles
     backdropStyle: "fixed inset-0 bg-black/50",
 };

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

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