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

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { TableSelectionHeaderProps } from "./Table.types";
+/**
+ * Selection header that appears when rows are selected
+ * Shows selection count and bulk action buttons
+ */
+export declare const TableSelectionHeader: React.FC<TableSelectionHeaderProps>;

package/dist/components/core/Table/{components/TableSelectionHeader/TableSelectionHeader.js → TableSelectionHeader.js}

@@ -1,7 +1,7 @@
 import React__default from 'react';
 import { XMarkIcon } from '@heroicons/react/24/outline';
-import { Button } from '../../../Button/Button.js';
-import { cn } from '../../../../../utils/cn.js';
+import { Button } from '../Button/Button.js';
+import { cn } from '../../../utils/cn.js';
 
 /**
  * Selection header that appears when rows are selected
@@ -10,13 +10,12 @@ import { cn } from '../../../../../utils/cn.js';
 const TableSelectionHeader = ({ selectedCount, totalCount, selectedRows, bulkActions = [], onClearSelection, className, }) => {
     if (selectedCount === 0)
         return null;
-    return (React__default.createElement("div", { className: cn("flex items-center justify-between px-3 py-1 rounded-lg shadow-xl bg-neutral-50 z-10", className) },
+    return (React__default.createElement("div", { className: cn("flex items-center justify-between px-3 py-1 rounded-lg shadow-xl bg-[var(--color-background-secondary)] z-10", className) },
         React__default.createElement("div", { className: "flex items-center gap-3" },
-            React__default.createElement("span", { className: "text-[var(--color-text-muted)] text-sm border-r border-border pr-3" }, selectedCount === totalCount
+            React__default.createElement("span", { className: "text-[var(--color-text-muted)] text-sm border-r border-[var(--color-border)] pr-3" }, selectedCount === totalCount
                 ? `All ${selectedCount} selected`
                 : `${selectedCount} selected`),
             bulkActions.length > 0 && (React__default.createElement("div", { className: "flex items-center gap-2" }, bulkActions.map((action) => {
-                action.icon;
                 return (React__default.createElement(Button, { key: action.id, color: "neutral", variant: "filled", onClick: () => action.onClick(selectedRows), className: "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]", size: "sm" }, action.label));
             })))),
         React__default.createElement(Button, { color: "primary", variant: "link", onClick: onClearSelection, "aria-label": "Clear selection" },

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

@@ -0,0 +1,10 @@
+export { useTableColumns } from './useTableColumns';
+export { useTableSelection } from './useTableSelection';
+export { useTableExpansion } from './useTableExpansion';
+export { useTablePagination } from './useTablePagination';
+export { useTableFilter } from './useTableFilter';
+export type { UseTableColumnsReturn } from './useTableColumns';
+export type { UseTableSelectionReturn } from './useTableSelection';
+export type { UseTableExpansionReturn } from './useTableExpansion';
+export type { UseTablePaginationReturn } from './useTablePagination';
+export type { UseTableFilterReturn } from './useTableFilter';

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

@@ -0,0 +1,16 @@
+import { Column } from '../Table.types';
+export interface UseTableColumnsOptions<T> {
+    columns?: Column<T>[];
+    initialVisibleColumns?: string[];
+    onVisibleColumnsChange?: (visibleColumns: string[]) => void;
+    onColumnReorder?: (fromIndex: number, toIndex: number) => void;
+}
+export interface UseTableColumnsReturn<T> {
+    visibleColumns: string[];
+    columnOrder: string[];
+    visibleColumnsList: Column<T>[];
+    handleToggleColumn: (columnId: string) => void;
+    handleColumnReorder: (fromIndex: number, toIndex: number) => void;
+    handleResetToDefault: () => void;
+}
+export declare function useTableColumns<T>({ columns, initialVisibleColumns, onVisibleColumnsChange, onColumnReorder, }: UseTableColumnsOptions<T>): UseTableColumnsReturn<T>;

package/dist/components/core/Table/hooks/useTableColumns.js

@@ -0,0 +1,67 @@
+import { useState, useEffect, useCallback, useMemo } from 'react';
+
+function useTableColumns({ columns, initialVisibleColumns, onVisibleColumnsChange, onColumnReorder, }) {
+    const defaultVisibleColumns = initialVisibleColumns || (columns ? columns.map((col) => col.id) : []);
+    const defaultColumnOrder = columns ? columns.map((col) => col.id) : [];
+    const [visibleColumns, setVisibleColumns] = useState(defaultVisibleColumns);
+    const [columnOrder, setColumnOrder] = useState(defaultColumnOrder);
+    // Sync column order when columns prop changes
+    useEffect(() => {
+        if (columns) {
+            setColumnOrder(columns.map((col) => col.id));
+        }
+    }, [columns]);
+    const handleVisibleColumnsChange = useCallback((newVisibleColumns) => {
+        setVisibleColumns(newVisibleColumns);
+        onVisibleColumnsChange === null || onVisibleColumnsChange === void 0 ? void 0 : onVisibleColumnsChange(newVisibleColumns);
+    }, [onVisibleColumnsChange]);
+    const handleToggleColumn = useCallback((columnId) => {
+        const column = columns === null || columns === void 0 ? void 0 : columns.find(col => col.id === columnId);
+        if (column === null || column === void 0 ? void 0 : column.locked)
+            return;
+        setVisibleColumns(prev => {
+            const newVisibleColumns = prev.includes(columnId)
+                ? prev.filter((id) => id !== columnId)
+                : [...prev, columnId];
+            onVisibleColumnsChange === null || onVisibleColumnsChange === void 0 ? void 0 : onVisibleColumnsChange(newVisibleColumns);
+            return newVisibleColumns;
+        });
+    }, [columns, onVisibleColumnsChange]);
+    const handleColumnReorder = useCallback((fromIndex, toIndex) => {
+        setColumnOrder(prev => {
+            const newColumnOrder = [...prev];
+            const [movedColumn] = newColumnOrder.splice(fromIndex, 1);
+            newColumnOrder.splice(toIndex, 0, movedColumn);
+            return newColumnOrder;
+        });
+        onColumnReorder === null || onColumnReorder === void 0 ? void 0 : onColumnReorder(fromIndex, toIndex);
+    }, [onColumnReorder]);
+    const handleResetToDefault = useCallback(() => {
+        const lockedColumnIds = (columns === null || columns === void 0 ? void 0 : columns.filter(col => col.locked).map(col => col.id)) || [];
+        const resetVisibleColumns = Array.from(new Set([...defaultVisibleColumns, ...lockedColumnIds]));
+        handleVisibleColumnsChange(resetVisibleColumns);
+        if (columns) {
+            setColumnOrder(columns.map((col) => col.id));
+        }
+    }, [columns, defaultVisibleColumns, handleVisibleColumnsChange]);
+    const visibleColumnsList = useMemo(() => {
+        if (!columns)
+            return [];
+        if (columnOrder.length > 0) {
+            return columnOrder
+                .map(colId => columns.find(col => col.id === colId))
+                .filter((col) => col !== undefined && visibleColumns.includes(col.id));
+        }
+        return columns.filter((col) => visibleColumns.includes(col.id));
+    }, [columns, columnOrder, visibleColumns]);
+    return {
+        visibleColumns,
+        columnOrder,
+        visibleColumnsList,
+        handleToggleColumn,
+        handleColumnReorder,
+        handleResetToDefault,
+    };
+}
+
+export { useTableColumns };

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

@@ -0,0 +1,8 @@
+export interface UseTableExpansionOptions {
+    expandedRows?: string[];
+    onExpandedRowsChange?: (expandedRows: string[]) => void;
+}
+export interface UseTableExpansionReturn {
+    handleExpandChange: (rowId: string, expanded: boolean) => void;
+}
+export declare function useTableExpansion({ expandedRows, onExpandedRowsChange, }: UseTableExpansionOptions): UseTableExpansionReturn;

package/dist/components/core/Table/hooks/useTableExpansion.js

@@ -0,0 +1,15 @@
+import { useCallback } from 'react';
+
+function useTableExpansion({ expandedRows = [], onExpandedRowsChange, }) {
+    const handleExpandChange = useCallback((rowId, expanded) => {
+        if (!onExpandedRowsChange)
+            return;
+        const newExpandedRows = expanded
+            ? [...expandedRows, rowId]
+            : expandedRows.filter(id => id !== rowId);
+        onExpandedRowsChange(newExpandedRows);
+    }, [expandedRows, onExpandedRowsChange]);
+    return { handleExpandChange };
+}
+
+export { useTableExpansion };

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

@@ -0,0 +1,12 @@
+import { FilterConfig, FilterOperator } from '../Table.types';
+export interface UseTableFilterOptions {
+    filterConfig?: FilterConfig[];
+    onFilterChange?: (filterConfig: FilterConfig[]) => void;
+}
+export interface UseTableFilterReturn {
+    handleAddFilter: (columnId: string, value: any, operator?: FilterOperator) => void;
+    handleRemoveFilter: (columnId: string) => void;
+    handleUpdateFilter: (columnId: string, value: any, operator?: FilterOperator) => void;
+    handleClearFilters: () => void;
+}
+export declare function useTableFilter({ filterConfig, onFilterChange, }: UseTableFilterOptions): UseTableFilterReturn;

package/dist/components/core/Table/hooks/useTableFilter.js

@@ -0,0 +1,37 @@
+import { useCallback } from 'react';
+
+function useTableFilter({ filterConfig = [], onFilterChange, }) {
+    const handleAddFilter = useCallback((columnId, value, operator) => {
+        if (!onFilterChange)
+            return;
+        const existing = filterConfig.find(f => f.columnId === columnId);
+        if (existing) {
+            const updated = filterConfig.map(f => f.columnId === columnId ? { ...f, value, operator } : f);
+            onFilterChange(updated);
+        }
+        else {
+            onFilterChange([...filterConfig, { columnId, value, operator }]);
+        }
+    }, [filterConfig, onFilterChange]);
+    const handleRemoveFilter = useCallback((columnId) => {
+        if (!onFilterChange)
+            return;
+        onFilterChange(filterConfig.filter(f => f.columnId !== columnId));
+    }, [filterConfig, onFilterChange]);
+    const handleUpdateFilter = useCallback((columnId, value, operator) => {
+        if (!onFilterChange)
+            return;
+        onFilterChange(filterConfig.map(f => f.columnId === columnId ? { ...f, value, operator } : f));
+    }, [filterConfig, onFilterChange]);
+    const handleClearFilters = useCallback(() => {
+        onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange([]);
+    }, [onFilterChange]);
+    return {
+        handleAddFilter,
+        handleRemoveFilter,
+        handleUpdateFilter,
+        handleClearFilters,
+    };
+}
+
+export { useTableFilter };

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

@@ -0,0 +1,12 @@
+export interface UseTablePaginationOptions<T> {
+    data?: T[];
+    pagination?: {
+        pageSize: number;
+        currentPage: number;
+        totalItems: number;
+    };
+}
+export interface UseTablePaginationReturn<T> {
+    paginatedData: T[];
+}
+export declare function useTablePagination<T>({ data, pagination, }: UseTablePaginationOptions<T>): UseTablePaginationReturn<T>;

package/dist/components/core/Table/hooks/useTablePagination.js

@@ -0,0 +1,13 @@
+import { useMemo } from 'react';
+
+function useTablePagination({ data, pagination, }) {
+    const paginatedData = useMemo(() => {
+        if (pagination && data) {
+            return data.slice((pagination.currentPage - 1) * pagination.pageSize, pagination.currentPage * pagination.pageSize);
+        }
+        return data || [];
+    }, [data, pagination]);
+    return { paginatedData };
+}
+
+export { useTablePagination };

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

@@ -0,0 +1,17 @@
+import { SelectionType } from '../Table.types';
+export interface UseTableSelectionOptions<T> {
+    data: T[];
+    rowKey?: keyof T | ((row: T, index: number) => string | number);
+    selectable?: boolean;
+    selectionType?: SelectionType;
+    selectedRows?: string[];
+    onSelectionChange?: (selectedRows: string[]) => void;
+}
+export interface UseTableSelectionReturn {
+    isAllSelected: boolean;
+    isIndeterminate: boolean;
+    handleSelectAll: (checked: boolean) => void;
+    handleSelectionChange: (rowId: string, selected: boolean) => void;
+    handleClearSelection: () => void;
+}
+export declare function useTableSelection<T extends Record<string, any>>({ data, rowKey, selectionType, selectedRows, onSelectionChange, }: UseTableSelectionOptions<T>): UseTableSelectionReturn;

package/dist/components/core/Table/hooks/useTableSelection.js

@@ -0,0 +1,40 @@
+import { useMemo, useCallback } from 'react';
+import { getRowId } from '../Table.utils.js';
+
+function useTableSelection({ data, rowKey, selectionType = 'checkbox', selectedRows = [], onSelectionChange, }) {
+    const isAllSelected = useMemo(() => selectedRows.length === data.length && data.length > 0, [selectedRows.length, data.length]);
+    const isIndeterminate = useMemo(() => selectedRows.length > 0 && selectedRows.length < data.length, [selectedRows.length, data.length]);
+    const handleSelectAll = useCallback((checked) => {
+        if (!onSelectionChange || selectionType !== 'checkbox')
+            return;
+        if (checked) {
+            const allRowIds = data.map((row, index) => getRowId(row, index, rowKey));
+            onSelectionChange(allRowIds);
+        }
+        else {
+            onSelectionChange([]);
+        }
+    }, [data, rowKey, selectionType, onSelectionChange]);
+    const handleSelectionChange = useCallback((rowId, selected) => {
+        if (!onSelectionChange)
+            return;
+        const newSelectedRows = selectionType === 'checkbox'
+            ? selected
+                ? [...selectedRows, rowId]
+                : selectedRows.filter(id => id !== rowId)
+            : selected ? [rowId] : [];
+        onSelectionChange(newSelectedRows);
+    }, [selectionType, selectedRows, onSelectionChange]);
+    const handleClearSelection = useCallback(() => {
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([]);
+    }, [onSelectionChange]);
+    return {
+        isAllSelected,
+        isIndeterminate,
+        handleSelectAll,
+        handleSelectionChange,
+        handleClearSelection,
+    };
+}
+
+export { useTableSelection };

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

@@ -1,9 +1,8 @@
-import { TableProps, Column, SortConfig, FilterConfig, TableThemeOverrides, TableVariant, TableAlignment, SelectionType, TableHeaderProps, TableBodyProps, TableRowProps, TableCellProps, TableHeaderCellProps, BulkAction } from './Table.types';
-import { TableActions } from './components/TableActions/TableActions';
-import { TableActionsMenu } from './components/TableActions/TableActionsMenu';
-import { TablePagination } from './components/TablePagination';
-import { ActionItem, ActionVariant, ActionPriority, TableActionsProps, TableActionsMenuProps } from './components/TableActions/TableActions.types';
-import { TablePaginationProps } from './components/TablePagination/TablePagination.types';
+import { TableProps, Column, SortConfig, FilterConfig, FilterOperator, FilterType, FilterOption, TableThemeOverrides, TableVariant, TableAlignment, SelectionType, TableHeaderProps, TableBodyProps, TableRowProps, TableCellProps, TableHeaderCellProps, BulkAction, ActionItem, ActionVariant, ActionPriority, TableActionsProps, TableActionsMenuProps, TablePaginationProps, TableSelectionHeaderProps, TableColumnManagerProps, TableFilterProps } from './Table.types';
+import { TableActions } from './TableActions';
+import { TableActionsMenu } from './TableActionsMenu';
+import { TablePagination } from './TablePagination';
+import { TableFilter } from './TableFilter';
 interface TableCompound {
     <T extends Record<string, any>>(props: TableProps<T>): React.ReactElement;
     Header: React.FC<TableHeaderProps>;
@@ -13,8 +12,10 @@ interface TableCompound {
     HeaderCell: React.FC<TableHeaderCellProps>;
     Actions: typeof TableActions;
     Pagination: React.FC<TablePaginationProps>;
+    Filter: typeof TableFilter;
 }
 declare const Table: TableCompound;
 export { Table };
-export type { TableProps, Column, SortConfig, FilterConfig, TableThemeOverrides, TableVariant, TableAlignment, SelectionType, TableHeaderProps, TableBodyProps, TableRowProps, TableCellProps, TableHeaderCellProps, BulkAction, ActionItem, ActionVariant, ActionPriority, TableActionsProps, TableActionsMenuProps, TablePaginationProps, };
-export { TableActions, TableActionsMenu, TablePagination };
+export type { TableProps, Column, SortConfig, FilterConfig, FilterOperator, FilterType, FilterOption, TableThemeOverrides, TableVariant, TableAlignment, SelectionType, TableHeaderProps, TableBodyProps, TableRowProps, TableCellProps, TableHeaderCellProps, BulkAction, ActionItem, ActionVariant, ActionPriority, TableActionsProps, TableActionsMenuProps, TablePaginationProps, TableSelectionHeaderProps, TableColumnManagerProps, TableFilterProps, };
+export { TableActions, TableActionsMenu, TablePagination, TableFilter };
+export { useTableColumns, useTableSelection, useTableExpansion, useTablePagination, useTableFilter, } from './hooks';

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

@@ -1,10 +1,11 @@
 import { Table as Table$1 } from './Table.js';
-import { HeaderCell, Cell, Row, Body, Header } from './components/DeclarativeComponents.js';
-import { TableActions } from './components/TableActions/TableActions.js';
+import { HeaderCell, Cell, Row, Body, Header } from './TableDeclarative.js';
+import { TableActions } from './TableActions.js';
 import 'react';
 import 'clsx';
 import 'tailwind-merge';
-import { TablePagination } from './components/TablePagination/TablePagination.js';
+import { TablePagination } from './TablePagination.js';
+import { TableFilter } from './TableFilter.js';
 
 // First import the Table component itself
 // Create a compound component by attaching the subcomponents
@@ -15,7 +16,8 @@ const Table = Object.assign(Table$1, {
     Cell: Cell,
     HeaderCell: HeaderCell,
     Actions: TableActions,
-    Pagination: TablePagination
+    Pagination: TablePagination,
+    Filter: TableFilter,
 });
 
-export { Table, TableActions, TablePagination };
+export { Table, TableActions, TableFilter, TablePagination };

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";

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

@@ -1,6 +1,6 @@
 const tooltipTheme = {
     // Base style for the tooltip - using fixed positioning for portal rendering
-    baseStyle: "fixed z-50 rounded-lg py-1 px-2 text-xs text-[var(--color-text-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 pointer-events-none bg-white/60 backdrop-blur-md outline outline-[var(--color-border)] shadow-lg border-t-[1px] border-white " +
+    baseStyle: "fixed z-[99] rounded-lg py-1 px-2 text-xs text-[var(--color-text-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 pointer-events-none bg-white/60 backdrop-blur-md outline outline-[var(--color-border)] shadow-lg border-t-[1px] border-white " +
         "dark:bg-neutral-800/80 dark:outline-[var(--color-border)]/80 dark:border-[var(--color-border)]",
 };
 

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

@@ -78,4 +78,21 @@ export interface TooltipProps {
      * @default "tooltip"
      */
     role?: 'tooltip' | 'dialog' | 'region';
+    /**
+     * Distance offset between the tooltip and trigger element (in pixels)
+     * Positive values increase the gap, negative values decrease it (can overlap)
+     * The offset is applied based on placement direction:
+     * - top/bottom: affects Y axis
+     * - left/right: affects X axis
+     * @default 8
+     */
+    offset?: number;
+    /**
+     * 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;
 }