flikkui 0.2.0-beta.1 → 0.2.0-beta.4

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/Tabs/Tabs.js

@@ -11,7 +11,7 @@ import { TabsContent } from './TabsContent.js';
  * Uses compound component pattern with Tabs.List, Tabs.Trigger, and Tabs.Content
  * Supports optional Framer Motion animations and comprehensive accessibility
  */
-const TabsComponent = React__default.forwardRef(({ value, defaultValue, onValueChange, orientation = "horizontal", size = "md", disabled = false, children, className, ...props }, ref) => {
+const TabsComponent = React__default.forwardRef(({ value, defaultValue, onValueChange, orientation = "horizontal", size = "md", disabled = false, children, className, darkMode = false, ...props }, ref) => {
     const [currentValue, setCurrentValue] = useState(value || defaultValue || "");
     // Track trigger elements for underline positioning
     const triggerRefs = useRef(new Map());
@@ -74,7 +74,7 @@ const TabsComponent = React__default.forwardRef(({ value, defaultValue, onValueC
         disabledStyle: disabled ? "opacity-50 cursor-not-allowed pointer-events-none" : "",
     }), [disabled]);
     return (React__default.createElement(TabsContext.Provider, { value: contextValue },
-        React__default.createElement("div", { ref: ref, className: cn(themeClasses.baseStyle, themeClasses.disabledStyle, className // User overrides take precedence
+        React__default.createElement("div", { ref: ref, className: cn(themeClasses.baseStyle, themeClasses.disabledStyle, darkMode && "dark", className // User overrides take precedence
             ), "data-orientation": orientation, "data-size": size, "data-disabled": disabled, role: "tablist" // Add semantic role for screen readers
             , "aria-orientation": orientation, ...props }, children)));
 });

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

@@ -48,6 +48,14 @@ export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'o
     disabled?: boolean;
     /** Children components - typically Tabs.List and Tabs.Content components */
     children?: React.ReactNode;
+    /**
+     * 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;
 }
 /**
  * TabsList component props - container for tab trigger buttons

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

@@ -0,0 +1,3 @@
+import type { Variants, Transition } from "motion/react";
+export declare const tagVariants: Variants;
+export declare const tagLayoutTransition: Transition;

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

@@ -0,0 +1,31 @@
+const tagVariants = {
+    initial: {
+        scale: 0,
+        opacity: 0,
+    },
+    animate: {
+        scale: 1,
+        opacity: 1,
+        transition: {
+            type: "spring",
+            stiffness: 500,
+            damping: 25,
+        },
+    },
+    exit: {
+        scale: 0,
+        opacity: 0,
+        transition: {
+            type: "spring",
+            stiffness: 500,
+            damping: 30,
+        },
+    },
+};
+const tagLayoutTransition = {
+    type: "spring",
+    stiffness: 500,
+    damping: 30,
+};
+
+export { tagLayoutTransition, tagVariants };

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

@@ -0,0 +1,14 @@
+import React from "react";
+import { TagProps } from "./Tag.types";
+/**
+ * Tag component for displaying removable labels or keywords.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Tag onRemove={() => handleRemove('tag1')}>JavaScript</Tag>
+ * <Tag size="sm" removable={false}>Read Only</Tag>
+ * <Tag disabled>Disabled Tag</Tag>
+ * ```
+ */
+export declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/core/Tag/Tag.js

@@ -0,0 +1,45 @@
+import React__default from 'react';
+import { motion } from 'motion/react';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import { cn } from '../../../utils/cn.js';
+import { tagTheme } from './Tag.theme.js';
+import { tagVariants, tagLayoutTransition } from './Tag.animations.js';
+
+/**
+ * Tag component for displaying removable labels or keywords.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Tag onRemove={() => handleRemove('tag1')}>JavaScript</Tag>
+ * <Tag size="sm" removable={false}>Read Only</Tag>
+ * <Tag disabled>Disabled Tag</Tag>
+ * ```
+ */
+const Tag = React__default.forwardRef(({ children, size = "md", removable = true, onRemove, disabled = false, className, theme: customTheme, ...props }, ref) => {
+    var _a, _b, _c;
+    // Merge default theme with custom theme overrides
+    const theme = {
+        baseStyle: (_a = customTheme === null || customTheme === void 0 ? void 0 : customTheme.baseStyle) !== null && _a !== void 0 ? _a : tagTheme.baseStyle,
+        sizes: { ...tagTheme.sizes, ...customTheme === null || customTheme === void 0 ? void 0 : customTheme.sizes },
+        disabledStyle: (_b = customTheme === null || customTheme === void 0 ? void 0 : customTheme.disabledStyle) !== null && _b !== void 0 ? _b : tagTheme.disabledStyle,
+        removeButtonStyle: (_c = customTheme === null || customTheme === void 0 ? void 0 : customTheme.removeButtonStyle) !== null && _c !== void 0 ? _c : tagTheme.removeButtonStyle,
+        removeIconSizes: {
+            ...tagTheme.removeIconSizes,
+            ...customTheme === null || customTheme === void 0 ? void 0 : customTheme.removeIconSizes,
+        },
+    };
+    const handleRemove = (e) => {
+        e.stopPropagation();
+        if (!disabled && onRemove) {
+            onRemove();
+        }
+    };
+    return (React__default.createElement(motion.span, { ref: ref, className: cn(theme.baseStyle, theme.sizes[size], disabled && theme.disabledStyle, className), layout: true, transition: tagLayoutTransition, variants: tagVariants, initial: "initial", animate: "animate", exit: "exit", "data-size": size, "data-disabled": disabled ? "true" : "false", "data-removable": removable ? "true" : "false", ...props },
+        children,
+        removable && onRemove && !disabled && (React__default.createElement("button", { type: "button", onClick: handleRemove, className: theme.removeButtonStyle, "aria-label": `Remove ${typeof children === "string" ? children : "tag"}` },
+            React__default.createElement(XMarkIcon, { className: theme.removeIconSizes[size] })))));
+});
+Tag.displayName = "Tag";
+
+export { Tag };

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

@@ -0,0 +1,2 @@
+import { TagTheme } from "./Tag.types";
+export declare const tagTheme: TagTheme;

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

@@ -0,0 +1,21 @@
+const tagTheme = {
+    baseStyle: "inline-flex items-center gap-1 font-medium rounded-full " +
+        "bg-[var(--color-background-secondary)] border border-[var(--color-border)] " +
+        "text-[var(--color-text-primary)]",
+    sizes: {
+        sm: "text-xs px-2 py-0.5 pr-0.5",
+        md: "text-sm px-2.5 py-0.5 pr-0.5",
+    },
+    disabledStyle: "opacity-50 cursor-not-allowed",
+    removeButtonStyle: "inline-flex items-center justify-center rounded-full p-1 " +
+        "hover:bg-[var(--color-background-quaternary)] " +
+        "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] " +
+        "transition-all duration-300 cursor-pointer focus:outline-none " +
+        "focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",
+    removeIconSizes: {
+        sm: "size-3",
+        md: "size-3.5",
+    },
+};
+
+export { tagTheme };

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

@@ -0,0 +1,40 @@
+import React from "react";
+/**
+ * Tag component props
+ */
+export interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "onRemove" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart"> {
+    /** The content of the tag */
+    children: React.ReactNode;
+    /** The size of the tag */
+    size?: TagSize;
+    /** Whether to show the remove button (default: true) */
+    removable?: boolean;
+    /** Callback when the remove button is clicked */
+    onRemove?: () => void;
+    /** Whether the tag is disabled */
+    disabled?: boolean;
+    /** Additional class name for the tag */
+    className?: string;
+    /** Theme overrides */
+    theme?: TagThemeOverrides;
+}
+export type TagSize = "sm" | "md";
+export interface TagTheme {
+    /** Base styles for the tag container */
+    baseStyle: string;
+    /** Size-specific styles */
+    sizes: Record<TagSize, string>;
+    /** Disabled state style */
+    disabledStyle: string;
+    /** Remove button style */
+    removeButtonStyle: string;
+    /** Remove icon sizes for each tag size */
+    removeIconSizes: Record<TagSize, string>;
+}
+export interface TagThemeOverrides {
+    baseStyle?: string;
+    sizes?: Partial<Record<TagSize, string>>;
+    disabledStyle?: string;
+    removeButtonStyle?: string;
+    removeIconSizes?: Partial<Record<TagSize, string>>;
+}

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

@@ -0,0 +1,3 @@
+export { Tag } from "./Tag";
+export type { TagProps, TagSize, TagTheme, TagThemeOverrides } from "./Tag.types";
+export { tagTheme } from "./Tag.theme";

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { TooltipProps } from "./Tooltip.types";
 declare const Tooltip: {
-    ({ content, children, placement, delay, disabled, className, maxWidth, minWidth, showOnFocus, wrapText, id, theme: themeOverrides, "aria-label": ariaLabel, role, }: TooltipProps): React.JSX.Element;
+    ({ content, children, placement, delay, disabled, className, maxWidth, minWidth, showOnFocus, wrapText, id, theme: themeOverrides, "aria-label": ariaLabel, role, offset, darkMode, }: TooltipProps): React.JSX.Element;
     displayName: string;
 };
 export { Tooltip };

package/dist/components/core/Tooltip/Tooltip.js

@@ -35,7 +35,7 @@ const useDarkMode = () => {
     }, []);
     return isDark;
 };
-const Tooltip = ({ content, children, placement = "top", delay = 300, disabled = false, className, maxWidth = "360px", minWidth = "fit-content", showOnFocus = true, wrapText = false, id, theme: themeOverrides, "aria-label": ariaLabel, role = "tooltip", }) => {
+const Tooltip = ({ content, children, placement = "top", delay = 300, disabled = false, className, maxWidth = "360px", minWidth = "fit-content", showOnFocus = true, wrapText = false, id, theme: themeOverrides, "aria-label": ariaLabel, role = "tooltip", offset = 8, darkMode = false, }) => {
     const [isVisible, setIsVisible] = useState(false);
     const tooltipRef = useRef(null);
     const triggerRef = useRef(null);
@@ -53,7 +53,7 @@ const Tooltip = ({ content, children, placement = "top", delay = 300, disabled =
         triggerRef,
         isOpen: isVisible,
         placement: placement, // TooltipPlacement matches SelectPlacement subset
-        offset: 8,
+        offset,
         autoWidth: true,
     });
     // Event handlers - simplified timer management
@@ -123,7 +123,7 @@ const Tooltip = ({ content, children, placement = "top", delay = 300, disabled =
     return (React__default.createElement("div", { className: "relative inline-block", ref: triggerRef, ...triggerHandlers, tabIndex: showOnFocus ? 0 : undefined, "aria-describedby": isVisible && id ? id : undefined },
         children,
         typeof document !== "undefined" &&
-            createPortal(React__default.createElement("div", { className: isDarkMode ? "dark" : undefined }, tooltipContent), document.body)));
+            createPortal(React__default.createElement("div", { className: darkMode || isDarkMode ? "dark" : undefined }, tooltipContent), document.body)));
 };
 // Set display name for dev tools and Storybook
 Tooltip.displayName = "Tooltip";