@flikk/ui 1.0.0-beta.1 → 1.0.0-beta.11

package/dist/components/{core → data-display}/Table/TableActions.js

@@ -1,14 +1,14 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
-import { Dropdown } from '../Dropdown/Dropdown.js';
-import '../Dropdown/DropdownTrigger.js';
-import '../Dropdown/DropdownMenu.js';
-import '../Dropdown/DropdownItem.js';
-import '../Dropdown/DropdownSection.js';
-import '../Dropdown/DropdownSeparator.js';
-import '../Dropdown/Dropdown.theme.js';
-import { Button } from '../Button/Button.js';
+import { Dropdown } from '../../core/Dropdown/Dropdown.js';
+import '../../core/Dropdown/DropdownTrigger.js';
+import '../../core/Dropdown/DropdownMenu.js';
+import '../../core/Dropdown/DropdownItem.js';
+import '../../core/Dropdown/DropdownSection.js';
+import '../../core/Dropdown/DropdownSeparator.js';
+import '../../core/Dropdown/Dropdown.theme.js';
+import { Button } from '../../core/Button/Button.js';
 import { EllipsisHorizontalIcon } from '@heroicons/react/20/solid';
 
 /**

package/dist/components/{core → data-display}/Table/TableActionsMenu.js

@@ -17,7 +17,7 @@ const TableActionsMenu = ({ actions, row, onClose, className, }) => {
             var _a;
             const isDisabled = (_a = action.disabled) === null || _a === void 0 ? void 0 : _a.call(action, row);
             const Icon = action.icon;
-            return (jsxs("button", { onClick: () => handleActionClick(action), disabled: isDisabled, className: cn("w-full flex items-center gap-3 px-3 py-2 text-sm font-medium text-left transition-all duration-300", "hover:bg-[var(--color-background-secondary)] focus:bg-[var(--color-background-secondary)] focus:outline-none rounded-sm cursor-pointer", action.variant === 'danger'
+            return (jsxs("button", { onClick: () => handleActionClick(action), disabled: isDisabled, className: cn("w-full flex items-center gap-3 px-3 py-2 text-base font-medium text-left transition-all duration-300", "hover:bg-[var(--color-background-secondary)] focus:bg-[var(--color-background-secondary)] focus:outline-none rounded-sm cursor-pointer", action.variant === 'danger'
                     ? "text-[var(--color-danger)] hover:bg-[var(--color-danger-50)] focus:bg-[var(--color-danger-50)]"
                     : "text-[var(--color-text-primary)]", isDisabled && "opacity-50 cursor-not-allowed hover:bg-transparent"), role: "menuitem", "aria-label": action.label, children: [jsx(Icon, { className: "size-4 flex-shrink-0" }), jsx("span", { children: action.label })] }, action.id));
         }) }));

package/dist/components/{core → data-display}/Table/TableColumnManager.js

@@ -1,10 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Popover } from '../Popover/Popover.js';
-import '../Popover/PopoverContext.js';
+import { Popover } from '../../core/Popover/Popover.js';
+import '../../core/Popover/PopoverContext.js';
 import { Cog6ToothIcon } from '@heroicons/react/24/outline';
-import { Button } from '../Button/Button.js';
+import { Button } from '../../core/Button/Button.js';
+import 'react';
 import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
-import { Sortable, SortableItem } from '../Sortable/Sortable.js';
+import { Sortable, SortableItem } from '../../core/Sortable/Sortable.js';
 
 function TableColumnManagerComponent({ columns, visibleColumns, columnOrder, onToggleColumn, onResetToDefault, onColumnReorder, }) {
     const orderedColumns = columnOrder.length > 0
@@ -16,7 +17,7 @@ function TableColumnManagerComponent({ columns, visibleColumns, columnOrder, onT
         const displayName = typeof column.header === 'string' ? column.header : column.id;
         return (jsx(Checkbox, { id: `column-checkbox-${column.id}`, name: `column-${column.id}`, value: column.id, checked: isVisible, onChange: () => onToggleColumn(column.id), "aria-label": `Toggle visibility for ${displayName} column`, label: displayName, state: isLocked ? 'disabled' : 'default' }));
     };
-    return (jsxs(Popover, { placement: "bottom-end", offset: 8, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "neutral", variant: "filled", "aria-label": "Manage column visibility", children: [jsx(Cog6ToothIcon, { className: "size-5", "aria-hidden": "true" }), "Manage Columns"] }) }), jsx(Popover.Content, { className: "p-0", children: jsxs("div", { className: "w-64 p-3 overflow-hidden", role: "dialog", "aria-labelledby": "column-manager-title", "aria-describedby": "column-manager-description", "aria-modal": "true", children: [jsx("div", { id: "column-manager-title", className: "text-xs uppercase font-bold mb-3 text-[var(--color-text-placeholder)]", children: "Manage Columns" }), jsx("div", { id: "column-manager-description", className: "sr-only", children: "Use checkboxes to control which columns are visible in the table. Locked columns cannot be hidden." }), jsx("div", { className: "space-y-0.5", role: "group", "aria-label": "Column visibility options", children: onColumnReorder ? (jsx(Sortable, { onReorder: onColumnReorder, showDragHandle: true, className: "space-y-0.5", children: orderedColumns.map((column) => (jsx(SortableItem, { id: column.id, disabled: column.locked === true, className: `hover:bg-[var(--color-background-tertiary)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-background-secondary)]' : ''}`, children: renderColumnItem(column) }, column.id))) })) : (orderedColumns.map((column) => (jsx("div", { className: `hover:bg-[var(--color-background-tertiary)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-background-secondary)]' : ''}`, children: renderColumnItem(column) }, column.id)))) }), jsx("div", { className: "mt-3 flex justify-end", children: jsx(Button, { color: "neutral", variant: "filled", className: "w-full", onClick: onResetToDefault, children: "Reset to Default" }) })] }) })] }));
+    return (jsxs(Popover, { placement: "bottom-end", offset: 8, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "neutral", variant: "filled", "aria-label": "Manage column visibility", children: [jsx(Cog6ToothIcon, { className: "size-5", "aria-hidden": "true" }), "Manage Columns"] }) }), jsx(Popover.Content, { className: "p-0", children: jsxs("div", { className: "w-64 p-3 overflow-hidden", role: "dialog", "aria-labelledby": "column-manager-title", "aria-describedby": "column-manager-description", "aria-modal": "true", children: [jsx("div", { id: "column-manager-title", className: "text-sm uppercase font-bold mb-3 text-[var(--color-text-placeholder)]", children: "Manage Columns" }), jsx("div", { id: "column-manager-description", className: "sr-only", children: "Use checkboxes to control which columns are visible in the table. Locked columns cannot be hidden." }), jsx("div", { className: "space-y-0.5", role: "group", "aria-label": "Column visibility options", children: onColumnReorder ? (jsx(Sortable, { onReorder: onColumnReorder, showDragHandle: true, className: "space-y-0.5", children: orderedColumns.map((column) => (jsx(SortableItem, { id: column.id, disabled: column.locked === true, className: `hover:bg-[var(--color-background-tertiary)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-background-secondary)]' : ''}`, children: renderColumnItem(column) }, column.id))) })) : (orderedColumns.map((column) => (jsx("div", { className: `hover:bg-[var(--color-background-tertiary)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-background-secondary)]' : ''}`, children: renderColumnItem(column) }, column.id)))) }), jsx("div", { className: "mt-3 flex justify-end", children: jsx(Button, { color: "neutral", variant: "filled", className: "w-full", onClick: onResetToDefault, children: "Reset to Default" }) })] }) })] }));
 }
 const TableColumnManager = TableColumnManagerComponent;
 

package/dist/components/{core → data-display}/Table/TableFilter.js

@@ -1,13 +1,13 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useCallback } from 'react';
 import { inferFilterType, getDefaultOperator, isUnaryOperator, getOperatorsForFilterType, isBetweenOperator } from './Table.filterUtils.js';
-import { Button } from '../Button/Button.js';
+import { Button } from '../../core/Button/Button.js';
 import { Input } from '../../forms/Input/Input.js';
 import '../../forms/Input/Input.theme.js';
 import { Select } from '../../forms/Select/Select.js';
 import '../../forms/Select/Select.theme.js';
-import { Popover } from '../Popover/Popover.js';
-import '../Popover/PopoverContext.js';
+import { Popover } from '../../core/Popover/Popover.js';
+import '../../core/Popover/PopoverContext.js';
 import { FunnelIcon, XMarkIcon, PlusIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../../utils/cn.js';
 
@@ -23,7 +23,7 @@ function FilterValueInput({ filter, column, filterType, onValueChange, }) {
     if (isBetweenOperator(filter.operator)) {
         const betweenValue = Array.isArray(filter.value) ? filter.value : ["", ""];
         const inputType = filterType === "date" ? "date" : "number";
-        return (jsxs("div", { className: "flex items-center gap-1 flex-1 min-w-0", children: [jsx(Input, { value: (_a = betweenValue[0]) !== null && _a !== void 0 ? _a : "", onChange: (e) => onValueChange([e.target.value, betweenValue[1]]), placeholder: "Min", size: "sm", type: inputType, className: "flex-1 min-w-0" }), jsx("span", { className: "text-xs text-[var(--color-text-muted)]", children: "\u2013" }), jsx(Input, { value: (_b = betweenValue[1]) !== null && _b !== void 0 ? _b : "", onChange: (e) => onValueChange([betweenValue[0], e.target.value]), placeholder: "Max", size: "sm", type: inputType, className: "flex-1 min-w-0" })] }));
+        return (jsxs("div", { className: "flex items-center gap-1 flex-1 min-w-0", children: [jsx(Input, { value: (_a = betweenValue[0]) !== null && _a !== void 0 ? _a : "", onChange: (e) => onValueChange([e.target.value, betweenValue[1]]), placeholder: "Min", size: "sm", type: inputType, className: "flex-1 min-w-0" }), jsx("span", { className: "text-sm text-[var(--color-text-muted)]", children: "\u2013" }), jsx(Input, { value: (_b = betweenValue[1]) !== null && _b !== void 0 ? _b : "", onChange: (e) => onValueChange([betweenValue[0], e.target.value]), placeholder: "Max", size: "sm", type: inputType, className: "flex-1 min-w-0" })] }));
     }
     // Select filter type
     if (filterType === "select" && (column === null || column === void 0 ? void 0 : column.filterOptions)) {
@@ -206,9 +206,9 @@ function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: contr
             return true;
         return f.value != null && f.value !== "";
     }).length;
-    return (jsxs(Popover, { placement: "bottom-end", offset: 8, closeOnClickOutside: false, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "neutral", variant: "outline", "aria-label": "Filter table data", size: "sm", children: [jsx(FunnelIcon, { className: "size-4", "aria-hidden": "true" }), "Filters", appliedFilterCount > 0 && (jsx("span", { className: "ml-1 inline-flex items-center justify-center size-5 rounded-full bg-[var(--color-primary)] text-white text-xs font-medium", children: appliedFilterCount }))] }) }), jsx(Popover.Content, { className: "p-0 max-w-none", children: jsxs("div", { className: cn("w-[500px] p-3", className), role: "dialog", "aria-labelledby": "table-filter-title", "aria-modal": "true", children: [jsxs("div", { className: "flex items-center justify-between mb-3", children: [jsx("div", { id: "table-filter-title", className: "text-xs uppercase font-bold text-[var(--color-text-placeholder)]", children: "Filters" }), activeFilters.length > 1 && (jsxs("div", { className: "flex items-center gap-0.5 rounded-md bg-[var(--color-background-secondary)] p-0.5", children: [jsx("button", { type: "button", className: cn("px-2.5 py-0.5 text-xs font-medium rounded transition-colors", filterLogic === "and"
+    return (jsxs(Popover, { placement: "bottom-end", offset: 8, closeOnClickOutside: false, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "neutral", variant: "outline", "aria-label": "Filter table data", size: "sm", children: [jsx(FunnelIcon, { className: "size-4", "aria-hidden": "true" }), "Filters", appliedFilterCount > 0 && (jsx("span", { className: "ml-1 inline-flex items-center justify-center size-5 rounded-full bg-[var(--color-primary)] text-[var(--color-primary-contrast)] text-sm font-medium", children: appliedFilterCount }))] }) }), jsx(Popover.Content, { className: "p-0 max-w-none", children: jsxs("div", { className: cn("w-[500px] p-3", className), role: "dialog", "aria-labelledby": "table-filter-title", "aria-modal": "true", children: [jsxs("div", { className: "flex items-center justify-between mb-3", children: [jsx("div", { id: "table-filter-title", className: "text-sm uppercase font-bold text-[var(--color-text-placeholder)]", children: "Filters" }), activeFilters.length > 1 && (jsxs("div", { className: "flex items-center gap-0.5 rounded-md bg-[var(--color-background-secondary)] p-0.5", children: [jsx("button", { type: "button", className: cn("px-2.5 py-0.5 text-sm font-medium rounded transition-colors", filterLogic === "and"
                                                 ? "bg-[var(--color-background)] text-[var(--color-text-primary)] shadow-sm"
-                                                : "text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]"), onClick: () => handleSetLogic("and"), children: "AND" }), jsx("button", { type: "button", className: cn("px-2.5 py-0.5 text-xs font-medium rounded transition-colors", filterLogic === "or"
+                                                : "text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]"), onClick: () => handleSetLogic("and"), children: "AND" }), jsx("button", { type: "button", className: cn("px-2.5 py-0.5 text-sm font-medium rounded transition-colors", filterLogic === "or"
                                                 ? "bg-[var(--color-background)] text-[var(--color-text-primary)] shadow-sm"
                                                 : "text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]"), onClick: () => handleSetLogic("or"), children: "OR" })] }))] }), jsx("div", { className: "-m-1 p-1 space-y-2 max-h-[300px] overflow-y-auto", children: activeFilters.map((filter) => {
                                 const selectedColumn = getSelectedColumn(filter.columnId);

package/dist/components/{core → data-display}/Table/TableHeader.js

@@ -48,7 +48,7 @@ function TableHeaderComponent({ columns, sortConfig = [], onSortChange, freezeHe
                     }, row: {}, rowId: "", isHeader: true, theme: theme, children: jsx("div", { className: "flex items-center gap-2", children: selectable && selectionType === 'checkbox' && (jsx(Checkbox, { id: "table-select-all", name: "table-select-all", value: "select-all", checked: isAllSelected, indeterminate: isIndeterminate, onChange: handleSelectAll, "aria-label": "Select all rows" })) }) })), columns.map((column, index) => {
                     const currentSort = sortConfig.find(sort => sort.columnId === column.id);
                     const isSortable = column.sortable && onSortChange;
-                    return (jsx(TableCell, { column: column, row: {}, rowId: "header", isHeader: true, isFrozen: freezeFirstColumn && index === 0, isLastFrozen: freezeLastColumn && index === columns.length - 1, theme: theme, children: isSortable ? (jsxs("button", { onClick: () => handleSort(column.id), className: "flex items-center gap-1 w-full text-left hover:text-[var(--color-primary)] transition-colors", "aria-label": `Sort by ${typeof column.header === 'string' ? column.header : column.id}`, children: [column.header, currentSort && (jsx("span", { className: "text-xs", children: currentSort.direction === 'asc' ? '\u2191' : '\u2193' }))] })) : (column.header) }, column.id));
+                    return (jsx(TableCell, { column: column, row: {}, rowId: "header", isHeader: true, isFrozen: freezeFirstColumn && index === 0, isLastFrozen: freezeLastColumn && index === columns.length - 1, theme: theme, children: isSortable ? (jsxs("button", { onClick: () => handleSort(column.id), className: "flex items-center gap-1 w-full text-left hover:text-[var(--color-primary)] transition-colors", "aria-label": `Sort by ${typeof column.header === 'string' ? column.header : column.id}`, children: [column.header, currentSort && (jsx("span", { className: "text-sm", children: currentSort.direction === 'asc' ? '\u2191' : '\u2193' }))] })) : (column.header) }, column.id));
                 })] }) }));
 }
 const TableHeader = TableHeaderComponent;

package/dist/components/data-display/Table/TablePagination.js

@@ -0,0 +1,25 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React__default from 'react';
+import { Pagination } from '../../core/Pagination/Pagination.js';
+import { Select } from '../../forms/Select/Select.js';
+import '../../forms/Select/Select.theme.js';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * TablePagination provides a standardized pagination interface for tables
+ * Combines the core Pagination component with page size selection controls
+ */
+const TablePagination = React__default.forwardRef(({ currentPage, totalItems, pageSize, pageSizeOptions = [10, 25, 50, 100], onPageChange, onPageSizeChange, showPageSizeSelector = true, className, }, ref) => {
+    const totalPages = Math.ceil(totalItems / pageSize);
+    const startItem = (currentPage - 1) * pageSize + 1;
+    const endItem = Math.min(currentPage * pageSize, totalItems);
+    const pageSizeSelectOptions = pageSizeOptions.map((option) => ({
+        id: option,
+        label: option.toString(),
+        value: option,
+    }));
+    return (jsxs("div", { ref: ref, className: cn("flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 px-4 py-3 border-t border-[var(--color-border)] bg-[var(--color-background)]", className), children: [jsxs("div", { className: "flex items-center gap-4", children: [showPageSizeSelector && (jsxs("div", { className: "flex items-center gap-2", children: [jsx("span", { className: "text-base text-[var(--color-text-muted)]", children: "Rows per page:" }), jsx(Select, { value: pageSize, onChange: (value) => onPageSizeChange(value), options: pageSizeSelectOptions, size: "sm", className: "w-20" })] })), jsx("div", { className: "text-base text-[var(--color-text-muted)]", children: totalItems > 0 ? (jsxs(Fragment, { children: ["Showing ", startItem.toLocaleString(), " to ", endItem.toLocaleString(), " of", " ", totalItems.toLocaleString(), " results"] })) : ("No results") })] }), totalPages > 1 && (jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: onPageChange, showPrevNext: true, showFirstLast: false, siblingCount: 1 }))] }));
+});
+TablePagination.displayName = "Table.Pagination";
+
+export { TablePagination };

package/dist/components/{core → data-display}/Table/TableRow.js

@@ -2,7 +2,7 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { AnimatePresence, motion } from 'motion/react';
 import { TableCell } from './TableCell.js';
-import { Button } from '../Button/Button.js';
+import { Button } from '../../core/Button/Button.js';
 import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
 import { Radio } from '../../forms/Radio/Radio.js';
 import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline';

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

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

package/dist/components/{core → data-display}/Timeline/Timeline.theme.js

@@ -19,8 +19,8 @@ const timelineTheme = {
     markerStyle: "relative z-10 flex items-center justify-center shrink-0 rounded-full border-2 transition-colors duration-200",
     // Marker status-specific styles
     markerStatuses: {
-        completed: "w-8 h-8 bg-[var(--color-success)] border-[var(--color-success)] text-white",
-        active: "w-8 h-8 bg-[var(--color-primary)] border-[var(--color-primary)] text-white ring-4 ring-[var(--color-primary-100)]",
+        completed: "w-8 h-8 bg-[var(--color-success)] border-[var(--color-success)] text-[var(--color-success-contrast)]",
+        active: "w-8 h-8 bg-[var(--color-primary)] border-[var(--color-primary)] text-[var(--color-primary-contrast)] ring-4 ring-[var(--color-primary-100)]",
         pending: "w-8 h-8 bg-[var(--color-background)] border-[var(--color-border)]",
     },
     // Content area - vertical

package/dist/components/data-display/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./Table";
+export * from "./KPI";
+export * from "./Metric";
+export * from "./DescriptionList";
+export * from "./Timeline";
+export * from "./Feed";
+export * from "./GanttChart";

package/dist/components/data-display/index.js

@@ -0,0 +1,20 @@
+export { Table } from './Table/index.js';
+export { KPI } from './KPI/KPI.js';
+export { kpiTheme } from './KPI/KPI.theme.js';
+export { Metric } from './Metric/Metric.js';
+export { metricTheme } from './Metric/Metric.theme.js';
+export { DescriptionList } from './DescriptionList/DescriptionList.js';
+export { Timeline } from './Timeline/Timeline.js';
+export { Feed } from './Feed/Feed.js';
+export { GanttChart } from './GanttChart/GanttChart.js';
+export { ganttChartTheme } from './GanttChart/GanttChart.theme.js';
+export { TableActions } from './Table/TableActions.js';
+export { TableActionsMenu } from './Table/TableActionsMenu.js';
+export { TableFilter } from './Table/TableFilter.js';
+export { TablePagination } from './Table/TablePagination.js';
+export { filterData, getDefaultOperator, getOperatorsForFilterType, inferFilterType, isBetweenOperator, isUnaryOperator, operatorLabels } from './Table/Table.filterUtils.js';
+export { useTableColumns } from './Table/hooks/useTableColumns.js';
+export { useTableExpansion } from './Table/hooks/useTableExpansion.js';
+export { useTableFilter } from './Table/hooks/useTableFilter.js';
+export { useTablePagination } from './Table/hooks/useTablePagination.js';
+export { useTableSelection } from './Table/hooks/useTableSelection.js';

package/dist/components/effects/3d/index.d.ts

@@ -0,0 +1,6 @@
+export { AIOrb } from "../AIOrb";
+export type { AIOrbProps, DotSphereProps, LiquidProps } from "../AIOrb";
+export { Particles } from "../Particles";
+export type { ParticlesProps } from "../Particles";
+export { SpotlightBorder } from "../SpotlightBorder";
+export type { SpotlightBorderProps, SpotlightBorderVariation, } from "../SpotlightBorder";

package/dist/components/effects/3d/index.js

@@ -0,0 +1,3 @@
+export { AIOrb } from '../AIOrb/AIOrb.js';
+export { Particles } from '../Particles/Particles.js';
+export { SpotlightBorder } from '../SpotlightBorder/SpotlightBorder.js';

package/dist/components/effects/Aurora/Aurora.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { AuroraProps } from './Aurora.types';
+/**
+ * Aurora creates an animated multi-color gradient background effect.
+ *
+ * Renders several large, blurred, semi-transparent blobs that slowly drift
+ * and morph, producing an organic aurora-like glow. Ideal for hero sections
+ * and decorative backgrounds.
+ *
+ * The component renders as an absolutely-positioned layer with
+ * `pointer-events-none`, so it will not interfere with interactive content.
+ * The parent element should have `position: relative` and `overflow: hidden`.
+ *
+ * @example
+ * ```tsx
+ * <div className="relative overflow-hidden h-96 bg-gray-950">
+ *   <Aurora />
+ *   <div className="relative z-10 text-white p-8">
+ *     <h1>Hero Content</h1>
+ *   </div>
+ * </div>
+ * ```
+ */
+export declare const Aurora: React.FC<AuroraProps>;

package/dist/components/effects/Aurora/Aurora.js

@@ -0,0 +1,119 @@
+import { jsx } from 'react/jsx-runtime';
+import { useReducedMotion, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+
+const DEFAULT_COLORS = ['#3b82f6', '#8b5cf6', '#ec4899', '#06b6d4'];
+/**
+ * Each blob follows a unique organic path using keyframed x/y translations
+ * and scale changes. The durations are intentionally varied so the blobs
+ * never synchronize, producing a natural morphing look.
+ */
+const blobAnimations = [
+    {
+        // Blob 0 -- slow horizontal drift with vertical bob
+        x: ['0%', '30%', '-20%', '10%', '0%'],
+        y: ['0%', '-25%', '15%', '-10%', '0%'],
+        scale: [1, 1.15, 0.9, 1.05, 1],
+        baseDuration: 20,
+    },
+    {
+        // Blob 1 -- figure-8-ish path, slightly faster
+        x: ['0%', '-35%', '25%', '-15%', '0%'],
+        y: ['0%', '20%', '-30%', '25%', '0%'],
+        scale: [1, 0.9, 1.2, 0.95, 1],
+        baseDuration: 23,
+    },
+    {
+        // Blob 2 -- wide circular sweep
+        x: ['0%', '25%', '0%', '-25%', '0%'],
+        y: ['0%', '-20%', '25%', '-15%', '0%'],
+        scale: [1, 1.1, 0.85, 1.15, 1],
+        baseDuration: 27,
+    },
+    {
+        // Blob 3 -- gentle diagonal drift
+        x: ['0%', '-20%', '30%', '-10%', '0%'],
+        y: ['0%', '30%', '-20%', '10%', '0%'],
+        scale: [1, 0.95, 1.1, 0.9, 1],
+        baseDuration: 31,
+    },
+];
+/**
+ * Positions each blob at a different quadrant of the container so they
+ * begin spread out. Additional blobs beyond 4 cycle through positions.
+ */
+const blobPositions = [
+    { top: '10%', left: '15%' },
+    { top: '5%', right: '10%' },
+    { bottom: '10%', left: '20%' },
+    { bottom: '5%', right: '15%' },
+];
+/**
+ * Aurora creates an animated multi-color gradient background effect.
+ *
+ * Renders several large, blurred, semi-transparent blobs that slowly drift
+ * and morph, producing an organic aurora-like glow. Ideal for hero sections
+ * and decorative backgrounds.
+ *
+ * The component renders as an absolutely-positioned layer with
+ * `pointer-events-none`, so it will not interfere with interactive content.
+ * The parent element should have `position: relative` and `overflow: hidden`.
+ *
+ * @example
+ * ```tsx
+ * <div className="relative overflow-hidden h-96 bg-gray-950">
+ *   <Aurora />
+ *   <div className="relative z-10 text-white p-8">
+ *     <h1>Hero Content</h1>
+ *   </div>
+ * </div>
+ * ```
+ */
+const Aurora = ({ colors = DEFAULT_COLORS, blur = 80, speed = 1, opacity = 0.3, size = 1, className, style, ...props }) => {
+    const shouldReduceMotion = useReducedMotion();
+    // Compute base blob dimension from the size multiplier.
+    // Using percentage-based sizing so it scales with the container.
+    const blobDimension = `${40 * size}%`;
+    return (jsx("div", { className: cn('absolute inset-0 overflow-hidden pointer-events-none', className), style: {
+            opacity,
+            filter: `blur(${blur}px)`,
+            ...style,
+        }, "aria-hidden": "true", ...props, children: colors.map((color, index) => {
+            const anim = blobAnimations[index % blobAnimations.length];
+            const position = blobPositions[index % blobPositions.length];
+            const duration = anim.baseDuration / speed;
+            // When reduced motion is preferred, render static blobs with no animation.
+            if (shouldReduceMotion) {
+                return (jsx("div", { style: {
+                        position: 'absolute',
+                        ...position,
+                        width: blobDimension,
+                        height: blobDimension,
+                        borderRadius: '50%',
+                        background: `radial-gradient(circle at center, ${color}, transparent 70%)`,
+                        mixBlendMode: 'screen',
+                    } }, index));
+            }
+            return (jsx(motion.div, { animate: {
+                    x: anim.x,
+                    y: anim.y,
+                    scale: anim.scale,
+                }, transition: {
+                    duration,
+                    repeat: Infinity,
+                    repeatType: 'loop',
+                    ease: 'easeInOut',
+                }, style: {
+                    position: 'absolute',
+                    ...position,
+                    width: blobDimension,
+                    height: blobDimension,
+                    borderRadius: '50%',
+                    background: `radial-gradient(circle at center, ${color}, transparent 70%)`,
+                    mixBlendMode: 'screen',
+                    willChange: 'transform',
+                } }, index));
+        }) }));
+};
+
+export { Aurora };

package/dist/components/effects/Aurora/Aurora.types.d.ts

@@ -0,0 +1,15 @@
+import type React from 'react';
+export interface AuroraProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Array of CSS color values for the gradient blobs (default: ['#3b82f6', '#8b5cf6', '#ec4899', '#06b6d4']) */
+    colors?: string[];
+    /** Blur amount in pixels applied to blobs (default: 80) */
+    blur?: number;
+    /** Animation speed multiplier. Higher values = faster movement (default: 1) */
+    speed?: number;
+    /** Overall opacity of the aurora layer, 0-1 (default: 0.3) */
+    opacity?: number;
+    /** Blob size multiplier. Higher values = larger blobs (default: 1) */
+    size?: number;
+    /** Additional className for the container */
+    className?: string;
+}

package/dist/components/effects/Aurora/index.d.ts

@@ -0,0 +1,2 @@
+export { Aurora } from './Aurora';
+export type { AuroraProps } from './Aurora.types';

package/dist/components/effects/CustomCursor/CustomCursor.d.ts

@@ -31,5 +31,5 @@ export declare const CustomCursorProvider: React.ForwardRefExoticComponent<Omit<
  * </CustomCursor>
  * ```
  */
-export declare const CustomCursor: React.ForwardRefExoticComponent<Omit<CustomCursorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare const CustomCursorFollow: React.ForwardRefExoticComponent<Omit<CustomCursorFollowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const CustomCursor: React.ForwardRefExoticComponent<CustomCursorProps & React.RefAttributes<HTMLDivElement>>;
+export declare const CustomCursorFollow: React.ForwardRefExoticComponent<CustomCursorFollowProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/effects/CustomCursor/CustomCursor.js

@@ -312,7 +312,7 @@ const CustomCursorFollow = React.forwardRef(({ children, sideOffset = 15, align
     // Determine content based on variant
     const renderContent = () => {
         if (variant === 'user') {
-            return (jsxs(Fragment, { children: [avatar && jsx(Avatar, { src: avatar, alt: name || 'User', size: "xs" }), name && (jsx("span", { className: "text-white text-xs font-medium whitespace-nowrap", children: name }))] }));
+            return (jsxs(Fragment, { children: [avatar && jsx(Avatar, { src: avatar, alt: name || 'User', size: "xs" }), name && (jsx("span", { className: "text-white text-sm font-medium whitespace-nowrap", children: name }))] }));
         }
         return children;
     };

package/dist/components/effects/CustomCursor/CustomCursor.theme.js

@@ -6,13 +6,14 @@ const customCursorTheme = {
     baseStyle: "pointer-events-none z-[9999] absolute transform-[translate(-50%,-50%)]",
     cursorStyle: "transition-transform duration-150",
     cursorFollowVariants: {
-        default: "rounded-[var(--radius-base)] bg-white dark:bg-[var(--color-background-secondary)] shadow-lg border border-[var(--color-border)] px-3 py-2 text-sm text-[var(--color-text-primary)]",
+        default: "rounded-[var(--radius-base)] bg-white dark:bg-[var(--color-background-secondary)] shadow-lg border border-[var(--color-border)] px-3 py-2 text-base text-[var(--color-text-primary)]",
         user: "flex items-center gap-2 rounded-full pl-1 pr-3 py-1 shadow-xl",
     },
     cursorFollowColors: {
         neutral: "bg-[var(--color-background-secondary)]",
         dark: "bg-[var(--color-text-primary)]",
         primary: "bg-[var(--color-primary)]",
+        secondary: "bg-[var(--color-secondary)]",
         success: "bg-[var(--color-success)]",
         warning: "bg-[var(--color-warning)]",
         danger: "bg-[var(--color-danger)]",
@@ -26,6 +27,7 @@ const customCursorTheme = {
         neutral: "text-[var(--color-background-secondary)]",
         dark: "text-[var(--color-text-primary)]",
         primary: "text-[var(--color-primary)]",
+        secondary: "text-[var(--color-secondary)]",
         success: "text-[var(--color-success)]",
         warning: "text-[var(--color-warning)]",
         danger: "text-[var(--color-danger)]",

package/dist/components/effects/CustomCursor/CustomCursor.types.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import type { HTMLMotionProps, SpringOptions } from 'motion/react';
+import type { SpringOptions } from 'motion/react';
+import { SemanticColor } from '../../../utils/colorUtils';
 /**
  * Alignment positions for CustomCursorFollow relative to the main cursor
  */
@@ -11,7 +12,7 @@ export type CustomCursorSize = 'sm' | 'md' | 'lg';
 /**
  * Color variants for the custom cursor
  */
-export type CustomCursorColor = 'neutral' | 'dark' | 'primary' | 'success' | 'warning' | 'danger';
+export type CustomCursorColor = SemanticColor | 'dark';
 /**
  * Visual variants for the custom cursor
  */
@@ -48,7 +49,7 @@ export interface CustomCursorProviderProps extends React.ComponentProps<'div'> {
 /**
  * Props for CustomCursor component
  */
-export interface CustomCursorProps extends HTMLMotionProps<'div'> {
+export interface CustomCursorProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
     size?: CustomCursorSize;
     color?: CustomCursorColor;
@@ -59,7 +60,7 @@ export interface CustomCursorProps extends HTMLMotionProps<'div'> {
 /**
  * Props for CustomCursorFollow component
  */
-export interface CustomCursorFollowProps extends HTMLMotionProps<'div'> {
+export interface CustomCursorFollowProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
     sideOffset?: number;
     align?: AlignType;

package/dist/components/effects/DotPattern/DotPattern.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import type { DotPatternProps } from "./DotPattern.types";
+/**
+ * DotPattern renders an SVG-based dot grid background pattern.
+ *
+ * Use it as an absolute-positioned decorative background inside a container
+ * with `position: relative`. The pattern is fully non-interactive
+ * (`pointer-events: none`) and sits at `z-index: 0` by default.
+ *
+ * @example
+ * ```tsx
+ * <div className="relative overflow-hidden h-96">
+ *   <DotPattern spacing={24} dotSize={1.5} fade animated />
+ *   <div className="relative z-10">Your content here</div>
+ * </div>
+ * ```
+ */
+export declare const DotPattern: React.ForwardRefExoticComponent<DotPatternProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/effects/DotPattern/DotPattern.js

@@ -0,0 +1,65 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useId, useMemo } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * Build a CSS mask-image value for the given fade direction and size.
+ */
+function buildMaskImage(direction, fadeSize) {
+    const stop = Math.max(0, Math.min(100, fadeSize));
+    if (direction === "radial") {
+        return `radial-gradient(ellipse at center, black ${100 - stop}%, transparent 100%)`;
+    }
+    const directionMap = {
+        top: "to top",
+        bottom: "to bottom",
+        left: "to left",
+        right: "to right",
+    };
+    return `linear-gradient(${directionMap[direction]}, black ${100 - stop}%, transparent 100%)`;
+}
+/**
+ * DotPattern renders an SVG-based dot grid background pattern.
+ *
+ * Use it as an absolute-positioned decorative background inside a container
+ * with `position: relative`. The pattern is fully non-interactive
+ * (`pointer-events: none`) and sits at `z-index: 0` by default.
+ *
+ * @example
+ * ```tsx
+ * <div className="relative overflow-hidden h-96">
+ *   <DotPattern spacing={24} dotSize={1.5} fade animated />
+ *   <div className="relative z-10">Your content here</div>
+ * </div>
+ * ```
+ */
+const DotPattern = React__default.forwardRef(({ spacing = 20, dotSize = 1, color = "var(--color-border)", fade = true, fadeDirection = "radial", fadeSize = 50, animated = false, className, style, ...rest }, ref) => {
+    const patternId = useId();
+    const shouldReduceMotion = useReducedMotion();
+    const enableAnimation = animated && !shouldReduceMotion;
+    const maskImage = useMemo(() => (fade ? buildMaskImage(fadeDirection, fadeSize) : undefined), [fade, fadeDirection, fadeSize]);
+    const containerStyle = {
+        ...style,
+        ...(maskImage
+            ? {
+                maskImage,
+                WebkitMaskImage: maskImage,
+            }
+            : {}),
+    };
+    // Center the dot within each cell
+    const cx = spacing / 2;
+    const cy = spacing / 2;
+    const dotElement = enableAnimation ? (jsx(motion.circle, { cx: cx, cy: cy, r: dotSize, fill: color, animate: {
+            opacity: [0.4, 1, 0.4],
+        }, transition: {
+            duration: 4,
+            ease: "easeInOut",
+            repeat: Infinity,
+        } })) : (jsx("circle", { cx: cx, cy: cy, r: dotSize, fill: color }));
+    return (jsx("div", { ref: ref, className: cn("absolute inset-0 pointer-events-none z-0 overflow-hidden", className), style: containerStyle, ...rest, children: jsxs("svg", { "aria-hidden": "true", className: "absolute inset-0 w-full h-full", children: [jsx("defs", { children: jsx("pattern", { id: patternId, x: "0", y: "0", width: spacing, height: spacing, patternUnits: "userSpaceOnUse", children: dotElement }) }), jsx("rect", { width: "100%", height: "100%", fill: `url(#${patternId})` })] }) }));
+});
+DotPattern.displayName = "DotPattern";
+
+export { DotPattern };

package/dist/components/effects/DotPattern/DotPattern.types.d.ts

@@ -0,0 +1,47 @@
+import React from "react";
+/** Direction for the fade gradient mask */
+export type DotPatternFadeDirection = "radial" | "top" | "bottom" | "left" | "right";
+export interface DotPatternProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Distance between dots in pixels (center to center).
+     * @default 20
+     */
+    spacing?: number;
+    /**
+     * Radius of each dot in pixels.
+     * @default 1
+     */
+    dotSize?: number;
+    /**
+     * Fill color of the dots.
+     * Accepts any valid CSS color value or CSS variable.
+     * @default "var(--color-border)"
+     */
+    color?: string;
+    /**
+     * Whether to apply a gradient mask that fades the pattern at the edges.
+     * @default true
+     */
+    fade?: boolean;
+    /**
+     * Direction of the fade gradient.
+     * - "radial" fades from center outward
+     * - "top" | "bottom" | "left" | "right" fades toward that edge
+     * @default "radial"
+     */
+    fadeDirection?: DotPatternFadeDirection;
+    /**
+     * Size of the fade area as a percentage (0-100).
+     * Higher values create a larger transparent region.
+     * @default 50
+     */
+    fadeSize?: number;
+    /**
+     * Whether to apply a subtle pulse animation to the dots.
+     * Respects prefers-reduced-motion automatically.
+     * @default false
+     */
+    animated?: boolean;
+    /** Additional className for style overrides (shadcn pattern). */
+    className?: string;
+}

package/dist/components/effects/DotPattern/index.d.ts

@@ -0,0 +1,2 @@
+export { DotPattern } from "./DotPattern";
+export type { DotPatternProps, DotPatternFadeDirection, } from "./DotPattern.types";