flikkui 0.1.0-beta.11

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

@@ -0,0 +1,2 @@
+export { NavItem } from './NavItem';
+export type { NavItemProps, NavItemTheme, NavItemThemeOverrides } from './NavItem.types';

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { NotificationProps } from './Notification.types';
+export declare const Notification: React.ForwardRefExoticComponent<NotificationProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Notification/Notification.js

@@ -0,0 +1,121 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { notificationTheme } from './Notification.theme.js';
+import '../Accordion/Accordion.js';
+import '../Modal/Modal.js';
+import '../Avatar/Avatar.js';
+import '../AvatarGroup/AvatarGroup.js';
+import '../Badge/Badge.js';
+import '../Breadcrumbs/Breadcrumbs.js';
+import '../Breadcrumbs/Breadcrumbs.theme.js';
+import { Button } from '../Button/Button.js';
+import '../ButtonGroup/ButtonGroup.js';
+import '../ButtonGroup/ButtonGroupSeparator.js';
+import '../ButtonGroup/ButtonGroupText.js';
+import '../../forms/Select/Select.js';
+import '../../forms/Select/Select.theme.js';
+import '../Segmented/Segmented.js';
+import '../Stepper/Stepper.js';
+import '../Tooltip/Tooltip.js';
+import '../Tooltip/Tooltip.animations.js';
+import '../Tree/Tree.js';
+import '../Pagination/Pagination.js';
+import '../Divider/Divider.js';
+import '../Card/Card.js';
+import '../Drawer/Drawer.js';
+import '../Dropdown/Dropdown.js';
+import '../Dropdown/DropdownTrigger.js';
+import '../Dropdown/DropdownMenu.js';
+import '../Dropdown/DropdownItem.js';
+import '../Dropdown/DropdownSection.js';
+import '../Dropdown/DropdownSeparator.js';
+import '../Popover/Popover.js';
+import '../Popover/PopoverContext.js';
+import '../Tabs/Tabs.js';
+import '../Tabs/TabsList.js';
+import '../Tabs/TabsTrigger.js';
+import '../Tabs/TabsContent.js';
+import '../Tabs/TabsContext.js';
+import '../Carousel/Carousel.js';
+import '../ProgressiveBlur/ProgressiveBlur.js';
+import '../../effects/CustomCursor/CustomCursor.js';
+import '../Alert/Alert.js';
+import '../Toast/Toast.js';
+import '../Toast/ToastProvider.js';
+import '../ChatMessage/ChatMessage.js';
+import '../Empty/Empty.js';
+import '../NavItem/NavItem.js';
+import '../Sidebar/Sidebar.js';
+import '../Sidebar/SidebarHeader.js';
+import '../Sidebar/SidebarContent.js';
+import '../Sidebar/SidebarFooter.js';
+import '../Sidebar/SidebarNav.js';
+import '../Sidebar/SidebarNavGroup.js';
+import '../Sidebar/SidebarToggle.js';
+import '../Sidebar/SidebarContext.js';
+import '../Table/index.js';
+import '../DragDrop/DragDrop.js';
+import '../Sortable/Sortable.js';
+import '../../forms/Input/Input.js';
+import '../../forms/Input/Input.theme.js';
+import '../../forms/Textarea/Textarea.js';
+import '../../forms/Textarea/Textarea.theme.js';
+import '../../forms/DatePicker/DatePicker.js';
+import '../../forms/DatePicker/DatePicker.theme.js';
+import '../../forms/TimePicker/TimePicker.js';
+import 'react-dom';
+import '../../forms/TimePicker/TimePicker.theme.js';
+import '../../forms/Slider/Slider.js';
+import '../../forms/Slider/Slider.theme.js';
+import '../../forms/Signature/Signature.js';
+import '../../forms/Signature/Signature.theme.js';
+import '../../forms/RichTextEditor/RichTextEditor.js';
+import '../../forms/RichTextEditor/RichTextEditor.theme.js';
+import '../../forms/InputOTP/InputOTP.js';
+import '../../forms/InputOTP/InputOTP.theme.js';
+import '../../forms/InputCreditCard/InputCreditCard.theme.js';
+import '../../forms/InputAddress/InputAddress.theme.js';
+import '../../forms/InputDate/InputDate.js';
+import '../Kbd/Kbd.js';
+import '../../effects/Overlay/Overlay.js';
+import '../Link/Link.js';
+import '../SlidingNumber/SlidingNumber.js';
+import ForwardRef from '../../../node_modules/@heroicons/react/24/solid/esm/XMarkIcon.js';
+
+var Notification = React__default.forwardRef(function (_a, ref) {
+    var _b, _c;
+    var _d = _a.variant, variant = _d === void 0 ? 'filled' : _d, _e = _a.color, color = _e === void 0 ? 'primary' : _e, title = _a.title, description = _a.description, avatar = _a.avatar, icon = _a.icon, actions = _a.actions, onDismiss = _a.onDismiss, className = _a.className, children = _a.children, props = __rest(_a, ["variant", "color", "title", "description", "avatar", "icon", "actions", "onDismiss", "className", "children"]);
+    var handleDismiss = function () {
+        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+    };
+    var colorTheme = ((_b = notificationTheme.colors) === null || _b === void 0 ? void 0 : _b[color]) || notificationTheme.colors.primary;
+    var renderIconOrAvatar = function () {
+        if (avatar) {
+            return (React__default.createElement("div", { className: "flex-shrink-0 w-10 h-10 rounded-full" }, avatar));
+        }
+        // icon={null} means hide icon completely
+        if (icon === null) {
+            return null;
+        }
+        // Use custom icon if provided, otherwise use color's default icon
+        var IconToRender = icon || colorTheme.defaultIcon;
+        return (React__default.createElement("div", { className: "flex-shrink-0 w-6 h-6 mt-1" }, React__default.isValidElement(IconToRender)
+            ? IconToRender
+            : React__default.createElement(IconToRender, {
+                className: cn("w-6 h-6", colorTheme.iconColor)
+            })));
+    };
+    return (React__default.createElement("div", __assign({ ref: ref, className: cn(notificationTheme.baseStyle, ((_c = notificationTheme.variants) === null || _c === void 0 ? void 0 : _c[variant]) || "", colorTheme.containerStyle, className), role: "alert" }, props),
+        renderIconOrAvatar(),
+        React__default.createElement("div", { className: "flex-1 min-w-0 ".concat(onDismiss ? 'mr-5' : '') },
+            React__default.createElement("div", { className: cn("font-semibold", colorTheme.titleColor) }, title),
+            description && (React__default.createElement("div", { className: "text-[var(--color-text-secondary)]/90 mt-1" }, description)),
+            children && (React__default.createElement("div", { className: "mt-2" }, children)),
+            actions && (React__default.createElement("div", { className: "flex items-center gap-2 mt-6" }, actions))),
+        onDismiss && (React__default.createElement(Button, { variant: "link", color: "primary", size: "sm", iconOnly: true, onClick: handleDismiss, className: "absolute top-2 right-2 flex-shrink-0 opacity-70 hover:opacity-100 transition-opacity cursor-pointer" },
+            React__default.createElement(ForwardRef, { className: "size-4" })))));
+});
+Notification.displayName = 'Notification';
+
+export { Notification };

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

@@ -0,0 +1,16 @@
+import { NotificationVariant, NotificationColor } from './Notification.types';
+/**
+ * Color-specific theme with icon colors, title colors, and container styles
+ */
+export interface NotificationColorTheme {
+    containerStyle: string;
+    iconColor: string;
+    titleColor: string;
+    defaultIcon: React.ComponentType<any>;
+}
+export interface NotificationTheme {
+    baseStyle: string;
+    variants: Record<NotificationVariant, string>;
+    colors: Record<NotificationColor, NotificationColorTheme>;
+}
+export declare const notificationTheme: NotificationTheme;

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

@@ -0,0 +1,61 @@
+import ForwardRef from '../../../node_modules/@heroicons/react/24/solid/esm/XCircleIcon.js';
+import ForwardRef$1 from '../../../node_modules/@heroicons/react/24/solid/esm/ExclamationTriangleIcon.js';
+import ForwardRef$2 from '../../../node_modules/@heroicons/react/24/solid/esm/CheckCircleIcon.js';
+import ForwardRef$3 from '../../../node_modules/@heroicons/react/24/solid/esm/InformationCircleIcon.js';
+import ForwardRef$4 from '../../../node_modules/@heroicons/react/24/solid/esm/BellIcon.js';
+
+var notificationTheme = {
+    // Base container styles - layout and spacing only
+    baseStyle: 'relative flex items-start gap-4 rounded-xl border-t border-white px-6 py-4 shadow-lg shadow-black/5 text-sm glass-effect',
+    /**
+     * Visual style variants (appearance treatment)
+     */
+    variants: {
+        filled: 'ring-[1px]',
+        outline: 'bg-transparent ring-2',
+        soft: 'ring-[1px] ring-transparent',
+    },
+    /**
+     * Semantic colors with container, icon, and title styling
+     */
+    colors: {
+        neutral: {
+            containerStyle: 'bg-[var(--color-background)]/80 ring-[var(--color-border)]',
+            iconColor: 'text-[var(--color-text-primary)]',
+            titleColor: 'text-[var(--color-text-primary)]',
+            defaultIcon: ForwardRef$4,
+        },
+        dark: {
+            containerStyle: 'bg-[var(--color-neutral-950)]/90 ring-[var(--color-border)]',
+            iconColor: 'text-white',
+            titleColor: 'text-white',
+            defaultIcon: ForwardRef$4,
+        },
+        primary: {
+            containerStyle: 'bg-[var(--color-primary-50)]/80 ring-[var(--color-primary)]/10',
+            iconColor: 'text-[var(--color-primary)]',
+            titleColor: 'text-[var(--color-primary-700)]',
+            defaultIcon: ForwardRef$3,
+        },
+        success: {
+            containerStyle: 'bg-[var(--color-success-50)]/80 ring-[var(--color-success)]/20',
+            iconColor: 'text-[var(--color-success)]',
+            titleColor: 'text-[var(--color-success-700)]',
+            defaultIcon: ForwardRef$2,
+        },
+        warning: {
+            containerStyle: 'bg-[var(--color-warning-50)]/80 ring-[var(--color-warning)]/10',
+            iconColor: 'text-[var(--color-warning)]',
+            titleColor: 'text-[var(--color-warning-700)]',
+            defaultIcon: ForwardRef$1,
+        },
+        danger: {
+            containerStyle: 'bg-[var(--color-danger-50)]/80 ring-[var(--color-danger)]/10',
+            iconColor: 'text-[var(--color-danger)]',
+            titleColor: 'text-[var(--color-danger-700)]',
+            defaultIcon: ForwardRef,
+        },
+    },
+};
+
+export { notificationTheme };

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

@@ -0,0 +1,46 @@
+import { HTMLAttributes, ReactNode } from 'react';
+/**
+ * Notification visual variants (appearance treatment)
+ */
+export type NotificationVariant = 'filled' | 'outline' | 'soft';
+/**
+ * Notification semantic colors (intent)
+ */
+export type NotificationColor = 'neutral' | 'dark' | 'primary' | 'success' | 'warning' | 'danger';
+export interface NotificationProps extends HTMLAttributes<HTMLDivElement> {
+    /** Visual style variant (filled, outline, soft) */
+    variant?: NotificationVariant;
+    /** Semantic color (neutral, dark, primary, success, warning, danger) */
+    color?: NotificationColor;
+    /** The main title of the notification */
+    title: string;
+    /** Additional description text */
+    description?: string;
+    /**
+     * Avatar to display (takes precedence over icons)
+     * Recommended: Use Avatar component from @/components/core/Avatar
+     * Example: avatar={<Avatar src="..." alt="User name" size="md" />}
+     */
+    avatar?: ReactNode;
+    /**
+     * Custom icon for the notification
+     * - Provide custom icon: overrides the default variant icon
+     * - Set to null: hides icon completely
+     * - Leave undefined: shows default variant icon
+     */
+    icon?: ReactNode | null;
+    /**
+     * Action buttons as ReactNode - use Button components directly
+     * Example: actions={<><Button>Cancel</Button><Button variant="primary">Save</Button></>}
+     */
+    actions?: ReactNode;
+    /**
+     * Callback when the notification is dismissed
+     * Note: Providing this callback automatically makes the notification dismissible
+     */
+    onDismiss?: () => void;
+    /** Custom class name */
+    className?: string;
+    /** Children content */
+    children?: ReactNode;
+}

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

@@ -0,0 +1,3 @@
+export { Notification } from './Notification';
+export type { NotificationProps, NotificationVariant } from './Notification.types';
+export { notificationTheme, type NotificationTheme } from './Notification.theme';

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { PaginationProps } from "./Pagination.types";
+/**
+ * Pagination component for navigating through pages
+ */
+declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLDivElement>>;
+export { Pagination };

package/dist/components/core/Pagination/Pagination.js

@@ -0,0 +1,111 @@
+import { __rest, __assign, __spreadArray } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useMemo } from 'react';
+import { paginationTheme } from './Pagination.theme.js';
+import { cn } from '../../../utils/cn.js';
+import ForwardRef from '../../../node_modules/@heroicons/react/24/outline/esm/ChevronDoubleLeftIcon.js';
+import ForwardRef$1 from '../../../node_modules/@heroicons/react/24/outline/esm/ChevronLeftIcon.js';
+import ForwardRef$2 from '../../../node_modules/@heroicons/react/24/outline/esm/ChevronRightIcon.js';
+import ForwardRef$3 from '../../../node_modules/@heroicons/react/24/outline/esm/ChevronDoubleRightIcon.js';
+
+/**
+ * Internal PaginationItem component for page numbers and ellipsis
+ */
+var PaginationItem = React__default.forwardRef(function (_a, ref) {
+    var isActive = _a.isActive, isDisabled = _a.isDisabled, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.variant, variant = _c === void 0 ? "page" : _c, className = _a.className, children = _a.children, props = __rest(_a, ["isActive", "isDisabled", "size", "variant", "className", "children"]);
+    // Use appropriate style based on variant
+    var baseStyle = variant === "ellipsis"
+        ? paginationTheme.ellipsisStyle
+        : paginationTheme.itemStyle;
+    var sizeStyle = variant === "ellipsis"
+        ? paginationTheme.itemSizes[size]
+        : paginationTheme.itemSizes[size];
+    return (React__default.createElement("button", __assign({ ref: ref, type: "button", disabled: isDisabled, "data-active": isActive, "data-disabled": isDisabled, className: cn(baseStyle, sizeStyle, className), "aria-current": isActive ? "page" : undefined }, props), children));
+});
+PaginationItem.displayName = "PaginationItem";
+/**
+ * Generate pagination range with ellipsis
+ */
+var usePaginationRange = function (currentPage, totalPages, siblingCount) {
+    if (siblingCount === void 0) { siblingCount = 1; }
+    return useMemo(function () {
+        var DOTS = "...";
+        // Total page numbers to show: current + siblings + first + last + 2 dots
+        var totalPageNumbers = siblingCount + 5;
+        // If total pages is less than total page numbers, show all pages
+        if (totalPageNumbers >= totalPages) {
+            return Array.from({ length: totalPages }, function (_, i) { return i + 1; });
+        }
+        var leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+        var rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
+        var shouldShowLeftDots = leftSiblingIndex > 2;
+        var shouldShowRightDots = rightSiblingIndex < totalPages - 2;
+        var firstPageIndex = 1;
+        var lastPageIndex = totalPages;
+        // No left dots, but right dots
+        if (!shouldShowLeftDots && shouldShowRightDots) {
+            var leftItemCount = 3 + 2 * siblingCount;
+            var leftRange = Array.from({ length: leftItemCount }, function (_, i) { return i + 1; });
+            return __spreadArray(__spreadArray([], leftRange, true), [DOTS, totalPages], false);
+        }
+        // Left dots, but no right dots
+        if (shouldShowLeftDots && !shouldShowRightDots) {
+            var rightItemCount_1 = 3 + 2 * siblingCount;
+            var rightRange = Array.from({ length: rightItemCount_1 }, function (_, i) { return totalPages - rightItemCount_1 + i + 1; });
+            return __spreadArray([firstPageIndex, DOTS], rightRange, true);
+        }
+        // Both left and right dots
+        if (shouldShowLeftDots && shouldShowRightDots) {
+            var middleRange = Array.from({ length: rightSiblingIndex - leftSiblingIndex + 1 }, function (_, i) { return leftSiblingIndex + i; });
+            return __spreadArray(__spreadArray([firstPageIndex, DOTS], middleRange, true), [DOTS, lastPageIndex], false);
+        }
+        return [];
+    }, [currentPage, totalPages, siblingCount]);
+};
+/**
+ * Pagination component for navigating through pages
+ */
+var Pagination = React__default.forwardRef(function (_a, ref) {
+    var currentPage = _a.currentPage, totalPages = _a.totalPages, onPageChange = _a.onPageChange, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.showFirstLast, showFirstLast = _c === void 0 ? false : _c, _d = _a.showPrevNext, showPrevNext = _d === void 0 ? true : _d, _e = _a.siblingCount, siblingCount = _e === void 0 ? 1 : _e, className = _a.className, _f = _a.theme, customTheme = _f === void 0 ? {} : _f, props = __rest(_a, ["currentPage", "totalPages", "onPageChange", "size", "showFirstLast", "showPrevNext", "siblingCount", "className", "theme"]);
+    // Merge theme with custom overrides
+    var theme = __assign(__assign({}, paginationTheme), customTheme);
+    var paginationRange = usePaginationRange(currentPage, totalPages, siblingCount);
+    // Don't render if there's only one page
+    if (totalPages <= 1) {
+        return null;
+    }
+    var handlePageChange = function (page) {
+        if (page >= 1 && page <= totalPages && page !== currentPage) {
+            onPageChange(page);
+        }
+    };
+    var isFirstPage = currentPage === 1;
+    var isLastPage = currentPage === totalPages;
+    return (React__default.createElement("nav", __assign({ ref: ref, role: "navigation", "aria-label": "Pagination Navigation", className: cn(theme.baseStyle, className) }, props),
+        showFirstLast && (React__default.createElement(PaginationItem, { size: size, isDisabled: isFirstPage, onClick: function () { return handlePageChange(1); }, "aria-label": "Go to first page" },
+            React__default.createElement(ForwardRef, { className: "w-4 h-4" }),
+            React__default.createElement("span", { className: "sr-only" }, "First"))),
+        showPrevNext && (React__default.createElement(PaginationItem, { size: size, isDisabled: isFirstPage, onClick: function () { return handlePageChange(currentPage - 1); }, "aria-label": "Go to previous page (".concat(currentPage - 1, ")") },
+            React__default.createElement(ForwardRef$1, { className: "w-4 h-4" }),
+            React__default.createElement("span", { className: "sr-only" }, "Previous"))),
+        paginationRange.map(function (pageNumber, index) {
+            if (pageNumber === "...") {
+                return (React__default.createElement(PaginationItem, { key: "ellipsis-".concat(index), size: size, variant: "ellipsis", isDisabled: true, "aria-label": "More pages", role: "separator" },
+                    React__default.createElement("span", { "aria-hidden": "true" }, "\u2026"),
+                    React__default.createElement("span", { className: "sr-only" }, "More pages")));
+            }
+            var page = pageNumber;
+            var isActive = page === currentPage;
+            return (React__default.createElement(PaginationItem, { key: page, size: size, variant: "page", isActive: isActive, onClick: function () { return handlePageChange(page); }, "aria-label": isActive ? "Page ".concat(page, ", current page") : "Go to page ".concat(page) },
+                page,
+                isActive && React__default.createElement("span", { className: "sr-only" }, "(current)")));
+        }),
+        showPrevNext && (React__default.createElement(PaginationItem, { size: size, isDisabled: isLastPage, onClick: function () { return handlePageChange(currentPage + 1); }, "aria-label": "Go to next page (".concat(currentPage + 1, ")") },
+            React__default.createElement(ForwardRef$2, { className: "w-4 h-4" }),
+            React__default.createElement("span", { className: "sr-only" }, "Next"))),
+        showFirstLast && (React__default.createElement(PaginationItem, { size: size, isDisabled: isLastPage, onClick: function () { return handlePageChange(totalPages); }, "aria-label": "Go to last page" },
+            React__default.createElement(ForwardRef$3, { className: "w-4 h-4" }),
+            React__default.createElement("span", { className: "sr-only" }, "Last")))));
+});
+Pagination.displayName = "Pagination";
+
+export { Pagination };

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

@@ -0,0 +1,14 @@
+import { PaginationSize } from "./Pagination.types";
+/**
+ * Simplified theme structure for the Pagination component with unified item styling
+ */
+export interface PaginationTheme {
+    baseStyle: string;
+    itemStyle: string;
+    itemSizes: Record<PaginationSize, string>;
+    ellipsisStyle: string;
+}
+/**
+ * Default theme for the Pagination component using modern neutral colors
+ */
+export declare const paginationTheme: PaginationTheme;

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

@@ -0,0 +1,18 @@
+/**
+ * Default theme for the Pagination component using modern neutral colors
+ */
+var paginationTheme = {
+    // Base container styles
+    baseStyle: "flex items-center justify-center gap-1",
+    // Unified item styles for all pagination elements (pages, navigation, etc.)
+    itemStyle: "inline-flex items-center justify-center font-medium rounded-[var(--form-rounded)] transition-all duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 cursor-pointer bg-white border border-transparent text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-neutral-50 hover:border-[var(--color-border)] data-[active=true]:bg-white data-[active=true]:border-[var(--color-border)] data-[active=true]:text-[var(--color-text-primary)] data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none",
+    // Unified item sizes
+    itemSizes: {
+        sm: "size-8 min-w-[2rem] text-sm",
+        md: "size-10 min-w-[2.5rem] text-sm",
+    },
+    // Ellipsis styles
+    ellipsisStyle: "inline-flex items-center justify-center font-medium text-[var(--color-text-muted)] cursor-default pointer-events-none",
+};
+
+export { paginationTheme };

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

@@ -0,0 +1,48 @@
+import React from "react";
+import { PaginationTheme } from "./Pagination.theme";
+/**
+ * Pagination component props
+ * @property {number} currentPage - The current active page number (1-based)
+ * @property {number} totalPages - The total number of pages
+ * @property {function} onPageChange - Callback when page changes
+ * @property {PaginationSize} size - Size variant of pagination
+ * @property {boolean} showFirstLast - Whether to show first/last page buttons
+ * @property {boolean} showPrevNext - Whether to show previous/next buttons
+ * @property {number} siblingCount - Number of sibling pages to show around current page
+ */
+export interface PaginationProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The current active page number (1-based) */
+    currentPage: number;
+    /** The total number of pages */
+    totalPages: number;
+    /** Callback when page changes */
+    onPageChange: (page: number) => void;
+    /** Size variant of pagination */
+    size?: PaginationSize;
+    /** Whether to show first/last page buttons */
+    showFirstLast?: boolean;
+    /** Whether to show previous/next buttons */
+    showPrevNext?: boolean;
+    /** Number of sibling pages to show around current page */
+    siblingCount?: number;
+    /** Additional class names */
+    className?: string;
+    /** Theme overrides */
+    theme?: Partial<PaginationTheme>;
+}
+export type PaginationSize = "sm" | "md";
+/**
+ * Internal pagination item props
+ */
+export interface PaginationItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Whether this item is currently active */
+    isActive?: boolean;
+    /** Whether this item is disabled */
+    isDisabled?: boolean;
+    /** Size variant */
+    size?: PaginationSize;
+    /** Item type for styling */
+    variant?: "page" | "ellipsis";
+    /** Additional class names */
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export { Pagination } from "./Pagination";
+export type { PaginationProps, PaginationSize } from "./Pagination.types";

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

@@ -0,0 +1,32 @@
+import { Variants } from 'motion/react';
+/**
+ * Animation variants for Pill component
+ *
+ * Reuses Badge's proven animation patterns with spring physics
+ * for natural, responsive interactions.
+ */
+/**
+ * Main pill animation variants
+ * Uses spring physics for smooth, natural motion
+ */
+export declare const pillVariants: Variants;
+/**
+ * Tap/click animation variant
+ * Subtle scale down on press for tactile feedback
+ */
+export declare const pillTapVariant: {
+    scale: number;
+    transition: {
+        duration: number;
+        type: "spring";
+        stiffness: number;
+        damping: number;
+    };
+};
+/**
+ * Utility to check if animations should be enabled
+ * Respects user's reduced-motion preference and Storybook environment
+ *
+ * @returns {boolean} True if animations should be enabled
+ */
+export declare const getShouldAnimate: () => boolean;

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { PillProps } from './Pill.types';
+/**
+ * Pill component - Simplified selectable chip for filters and tags
+ *
+ * A focused alternative to Badge without icons, avatars, or dismissible functionality.
+ * Perfect for filter chips, tag selection, and simple category pills.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Pill variant="primary">Design</Pill>
+ * ```
+ *
+ * @example Selectable filter
+ * ```tsx
+ * const [selected, setSelected] = useState(false);
+ * <Pill
+ *   variant="primary"
+ *   selected={selected}
+ *   onSelect={setSelected}
+ * >
+ *   Frontend
+ * </Pill>
+ * ```
+ *
+ * @example Multi-select filters
+ * ```tsx
+ * const [filters, setFilters] = useState(['design']);
+ * <Pill
+ *   variant="primary"
+ *   selected={filters.includes('design')}
+ *   onSelect={(selected) => {
+ *     setFilters(selected
+ *       ? [...filters, 'design']
+ *       : filters.filter(f => f !== 'design')
+ *     );
+ *   }}
+ * >
+ *   Design
+ * </Pill>
+ * ```
+ */
+export declare const Pill: React.ForwardRefExoticComponent<PillProps & React.RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,8 @@
+import { PillTheme } from './Pill.types';
+/**
+ * Default theme for Pill component
+ *
+ * Separates visual variants from semantic colors following new convention.
+ * All styles can be overridden via className prop (shadcn approach).
+ */
+export declare const pillTheme: PillTheme;

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

@@ -0,0 +1,95 @@
+import React from 'react';
+/**
+ * Pill component props
+ *
+ * A simplified, focused component for filters, tags, and selectable chips.
+ * Lighter alternative to Badge without icons, avatars, or dismissible functionality.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Pill variant="primary">Design</Pill>
+ * ```
+ *
+ * @example Selectable filter
+ * ```tsx
+ * <Pill
+ *   variant="primary"
+ *   selected={isSelected}
+ *   onSelect={setIsSelected}
+ * >
+ *   Frontend
+ * </Pill>
+ * ```
+ */
+export interface PillProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'onChange' | 'onSelect' | 'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'> {
+    /** Content to display inside the pill */
+    children: React.ReactNode;
+    /** Visual style variant (filled, outline, soft) */
+    variant?: PillVariant;
+    /** Semantic color (primary, success, danger, etc.) */
+    color?: PillColor;
+    /** Size of the pill */
+    size?: PillSize;
+    /**
+     * Icon element to display at the start (before the content)
+     * Note: Replaced by CheckIcon when pill is selected
+     */
+    iconStart?: React.ReactNode;
+    /** Whether the pill is selected (controlled state) */
+    selected?: boolean;
+    /**
+     * Callback when selection state changes
+     * @param selected - The new selected state
+     */
+    onSelect?: (selected: boolean) => void;
+    /**
+     * Whether the pill is read-only (non-interactive)
+     * Read-only pills don't show hover effects and can't be interacted with
+     * @default false
+     */
+    readOnly?: boolean;
+    /** Additional class name for customization (highest priority) */
+    className?: string;
+    /** Theme overrides for component styling */
+    theme?: PillThemeOverrides;
+}
+/**
+ * Pill visual variants (appearance)
+ */
+export type PillVariant = 'filled' | 'outline' | 'soft';
+/**
+ * Pill semantic colors (intent)
+ */
+export type PillColor = 'neutral' | 'dark' | 'primary' | 'success' | 'warning' | 'danger';
+/**
+ * Pill size variants
+ */
+export type PillSize = 'sm' | 'md' | 'lg';
+/**
+ * Theme overrides for Pill component
+ *
+ * Allows customization of component styling while maintaining
+ * the shadcn approach where className prop takes highest priority.
+ */
+export interface PillThemeOverrides {
+    /** Style for the pill container */
+    baseStyle?: string;
+    /** Variant-specific styles (visual appearance) */
+    variants?: Partial<Record<PillVariant, string>>;
+    /** Color-specific styles (semantic intent) */
+    colors?: Partial<Record<PillColor, string>>;
+    /** Size-specific styles */
+    sizes?: Partial<Record<PillSize, string>>;
+    /** Icon sizes for iconStart and CheckIcon */
+    iconSizes?: Partial<Record<PillSize, string>>;
+}
+/**
+ * Complete theme interface for Pill component
+ */
+export interface PillTheme {
+    baseStyle: string;
+    variants: Record<PillVariant, string>;
+    colors: Record<PillColor, string>;
+    sizes: Record<PillSize, string>;
+    iconSizes: Record<PillSize, string>;
+}