@eml-payments/ui-kit 1.8.0 → 1.8.2

package/dist/src/components/Filters/FilterSelect.d.ts

@@ -0,0 +1,21 @@
+import type { FC } from 'react';
+export type FilterSelectOption = {
+    value: string;
+    label: string;
+    icon?: React.ReactNode;
+    description?: React.ReactNode;
+};
+export interface FilterSelectProps {
+    value?: string;
+    onValueChange?: (value: string) => void;
+    onChange?: (value: string) => void;
+    onBlur?: () => void;
+    disabled?: boolean;
+    placeholder?: string;
+    options: FilterSelectOption[];
+    showAlwaysSearch?: boolean;
+    error?: boolean;
+    className?: string;
+    label?: string;
+}
+export declare const FilterSelect: FC<FilterSelectProps>;

package/dist/src/components/Filters/FilterSelect.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FaChevronUp, FaChevronDown } from 'react-icons/fa';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectGroup, SelectItem, SelectScrollUpButton, SelectScrollDownButton, } from '../Select';
+import { cn } from '../../lib/utils';
+export const FilterSelect = ({ value, onValueChange, onChange, onBlur, disabled, placeholder = 'Select an option...', options, showAlwaysSearch, error, className, }) => {
+    const handleValueChange = (newValue) => {
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    };
+    return (_jsxs(Select, { value: value, onValueChange: handleValueChange, disabled: disabled, children: [_jsx(SelectTrigger, { onBlur: onBlur, error: error, className: cn('h-full', className), children: _jsx(SelectValue, { placeholder: placeholder }) }), _jsxs(SelectContent, { showAlwaysSearch: showAlwaysSearch, children: [_jsx(SelectScrollUpButton, { children: _jsx(FaChevronUp, { className: "h-4 w-4" }) }), _jsx(SelectScrollDownButton, { children: _jsx(FaChevronDown, { className: "h-4 w-4" }) }), _jsx(SelectGroup, { children: options.map((option) => (_jsx(SelectItem, { value: option.value, children: _jsxs("div", { className: "flex items-center gap-2", children: [option.icon, _jsx("span", { children: option.label }), option.description] }) }, option.value))) })] })] }));
+};

package/dist/src/components/Filters/Filters.d.ts

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+import { type FiltersProps } from './Filters.types';
+export declare const Filters: FC<FiltersProps>;

package/dist/src/components/Filters/Filters.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { useForm, Controller, useWatch } from 'react-hook-form';
+import { DatePicker } from '../DatePicker';
+import { FilterSelect } from './FilterSelect';
+import { Checkbox } from '../Checkbox';
+import { CHECKBOX_TYPE, DATE_RANGE_TYPE, SELECT_TYPE } from './Filters.types';
+import { cn } from '../../lib/utils';
+export const Filters = ({ filters, defaultValues, onChange }) => {
+    const { control } = useForm({
+        defaultValues,
+    });
+    const values = useWatch({ control });
+    useEffect(() => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(values);
+    }, [values, onChange]);
+    const renderFilterComponent = (filterConfig, field) => {
+        const { type, ...filterProps } = filterConfig;
+        switch (type) {
+            case DATE_RANGE_TYPE: {
+                const dateProps = filterProps;
+                return (_jsx(DatePicker, { mode: "range", currentDate: field.value, onChangeDate: field.onChange, onBlur: field.onBlur, ...dateProps, className: cn('min-w-[200px]', dateProps.className) }));
+            }
+            case SELECT_TYPE: {
+                const selectProps = filterProps;
+                return (_jsx(FilterSelect, { value: field.value, onChange: field.onChange, onBlur: field.onBlur, ...selectProps, className: cn('min-w-[200px]', selectProps.className) }));
+            }
+            case CHECKBOX_TYPE:
+                return (_jsx(Checkbox, { checked: field.value, onCheckedChange: field.onChange, labelPosition: "right", className: "border-(--uikit-inputEnabledBorder)", ...filterProps }));
+            default:
+                throw new Error(`Unknown filter type: ${type}`);
+        }
+    };
+    return (_jsx("div", { className: "flex items-center gap-3 h-15", children: filters.map((filterConfig) => (_jsx("div", { className: "flex items-center mb-3 h-10", children: _jsx(Controller, { name: filterConfig.name, control: control, render: ({ field }) => renderFilterComponent(filterConfig, field) }) }, filterConfig.name))) }));
+};

package/dist/src/components/Filters/Filters.stories.d.ts

@@ -0,0 +1,12 @@
+import { FiltersProps } from './Filters.types';
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta<FiltersProps>;
+type Story = StoryObj<FiltersProps>;
+export declare const Default: Story;
+export declare const DateRangeOnly: Story;
+export declare const SelectOnly: Story;
+export declare const CheckboxOnly: Story;
+export declare const WithDefaultValues: Story;
+export declare const MultipleSelects: Story;
+export declare const ComplexFilters: Story;
+export default meta;

package/dist/src/components/Filters/Filters.stories.js

@@ -0,0 +1,235 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Filters } from './Filters';
+import { dayjs } from '../../utils/dayjs';
+const meta = {
+    title: 'UIKit/Filters',
+    component: Filters,
+    tags: ['autodocs'],
+    args: {
+        onChange: (values) => console.log('Filters changed:', values),
+    },
+};
+// Sample data for filter options
+const selectOptions = [
+    { label: 'Active', value: 'active' },
+    { label: 'Inactive', value: 'inactive' },
+    { label: 'Pending', value: 'pending' },
+];
+const statusOptions = [
+    { label: 'Approved', value: 'approved' },
+    { label: 'Rejected', value: 'rejected' },
+    { label: 'Under Review', value: 'under-review' },
+];
+export const Default = {
+    args: {
+        filters: [
+            {
+                type: 'dateRange',
+                name: 'dateRange',
+                rangeDateFormat: 'D MMM YY',
+                placeholder: `${dayjs().subtract(6, 'month').format('D MMM YY')} - Today`,
+            },
+            {
+                type: 'select',
+                name: 'status',
+                label: 'Status',
+                options: selectOptions,
+                placeholder: 'Select status...',
+            },
+            {
+                type: 'checkbox',
+                name: 'active',
+                label: 'Active Only',
+            },
+        ],
+    },
+    render: (args) => {
+        const [values, setValues] = useState({});
+        return (_jsxs("div", { children: [_jsx(Filters, { ...args, onChange: (newValues) => {
+                        var _a;
+                        setValues(newValues);
+                        (_a = args.onChange) === null || _a === void 0 ? void 0 : _a.call(args, newValues);
+                    } }), _jsxs("div", { className: "mt-4 rounded border border-gray-200 bg-gray-50 p-4", children: [_jsx("p", { className: "text-sm font-semibold", children: "Current Values:" }), _jsx("pre", { className: "mt-2 text-xs", children: JSON.stringify(values, null, 2) })] })] }));
+    },
+};
+export const DateRangeOnly = {
+    args: {
+        filters: [
+            {
+                type: 'dateRange',
+                name: 'dateRange',
+                rangeDateFormat: 'D MMM YY',
+                placeholder: `${dayjs().subtract(1, 'month').format('D MMM YY')} - Today`,
+            },
+        ],
+    },
+    render: (args) => {
+        const [values, setValues] = useState({});
+        return (_jsxs("div", { children: [_jsx(Filters, { ...args, onChange: (newValues) => {
+                        var _a;
+                        setValues(newValues);
+                        (_a = args.onChange) === null || _a === void 0 ? void 0 : _a.call(args, newValues);
+                    } }), _jsxs("div", { className: "mt-4 rounded border border-gray-200 bg-gray-50 p-4", children: [_jsx("p", { className: "text-sm font-semibold", children: "Selected Dates:" }), _jsx("pre", { className: "mt-2 text-xs", children: JSON.stringify(values, null, 2) })] })] }));
+    },
+};
+export const SelectOnly = {
+    args: {
+        filters: [
+            {
+                type: 'select',
+                name: 'status',
+                label: 'Filter by Status',
+                options: statusOptions,
+                placeholder: 'Choose a status...',
+            },
+        ],
+    },
+    render: (args) => {
+        const [values, setValues] = useState({});
+        return (_jsxs("div", { children: [_jsx(Filters, { ...args, onChange: (newValues) => {
+                        var _a;
+                        setValues(newValues);
+                        (_a = args.onChange) === null || _a === void 0 ? void 0 : _a.call(args, newValues);
+                    } }), _jsxs("div", { className: "mt-4 rounded border border-gray-200 bg-gray-50 p-4", children: [_jsx("p", { className: "text-sm font-semibold", children: "Selected Value:" }), _jsx("pre", { className: "mt-2 text-xs", children: JSON.stringify(values, null, 2) })] })] }));
+    },
+};
+export const CheckboxOnly = {
+    args: {
+        filters: [
+            {
+                type: 'checkbox',
+                name: 'verified',
+                label: 'Verified Only',
+            },
+            {
+                type: 'checkbox',
+                name: 'archived',
+                label: 'Show Archived',
+            },
+        ],
+    },
+    render: (args) => {
+        const [values, setValues] = useState({});
+        return (_jsxs("div", { children: [_jsx(Filters, { ...args, onChange: (newValues) => {
+                        var _a;
+                        setValues(newValues);
+                        (_a = args.onChange) === null || _a === void 0 ? void 0 : _a.call(args, newValues);
+                    } }), _jsxs("div", { className: "mt-4 rounded border border-gray-200 bg-gray-50 p-4", children: [_jsx("p", { className: "text-sm font-semibold", children: "Checked Items:" }), _jsx("pre", { className: "mt-2 text-xs", children: JSON.stringify(values, null, 2) })] })] }));
+    },
+};
+export const WithDefaultValues = {
+    args: {
+        filters: [
+            {
+                type: 'select',
+                name: 'category',
+                label: 'Category',
+                options: [
+                    { label: 'Electronics', value: 'electronics' },
+                    { label: 'Clothing', value: 'clothing' },
+                    { label: 'Food', value: 'food' },
+                ],
+                placeholder: 'Select category...',
+            },
+            {
+                type: 'checkbox',
+                name: 'inStock',
+                label: 'In Stock Only',
+            },
+        ],
+        defaultValues: {
+            category: 'electronics',
+            inStock: true,
+        },
+    },
+    render: (args) => {
+        const [values, setValues] = useState(args.defaultValues || {});
+        return (_jsxs("div", { children: [_jsx(Filters, { ...args, onChange: (newValues) => {
+                        var _a;
+                        setValues(newValues);
+                        (_a = args.onChange) === null || _a === void 0 ? void 0 : _a.call(args, newValues);
+                    } }), _jsxs("div", { className: "mt-4 rounded border border-gray-200 bg-gray-50 p-4", children: [_jsx("p", { className: "text-sm font-semibold", children: "Current Values:" }), _jsx("pre", { className: "mt-2 text-xs", children: JSON.stringify(values, null, 2) })] })] }));
+    },
+};
+export const MultipleSelects = {
+    args: {
+        filters: [
+            {
+                type: 'select',
+                name: 'department',
+                label: 'Department',
+                options: [
+                    { label: 'Sales', value: 'sales' },
+                    { label: 'Engineering', value: 'engineering' },
+                    { label: 'HR', value: 'hr' },
+                    { label: 'Finance', value: 'finance' },
+                ],
+                placeholder: 'Select department...',
+            },
+            {
+                type: 'select',
+                name: 'region',
+                label: 'Region',
+                options: [
+                    { label: 'North America', value: 'na' },
+                    { label: 'Europe', value: 'eu' },
+                    { label: 'Asia', value: 'asia' },
+                    { label: 'Australia', value: 'au' },
+                ],
+                placeholder: 'Select region...',
+            },
+        ],
+    },
+    render: (args) => {
+        const [values, setValues] = useState({});
+        return (_jsxs("div", { children: [_jsx(Filters, { ...args, onChange: (newValues) => {
+                        var _a;
+                        setValues(newValues);
+                        (_a = args.onChange) === null || _a === void 0 ? void 0 : _a.call(args, newValues);
+                    } }), _jsxs("div", { className: "mt-4 rounded border border-gray-200 bg-gray-50 p-4", children: [_jsx("p", { className: "text-sm font-semibold", children: "Selected Filters:" }), _jsx("pre", { className: "mt-2 text-xs", children: JSON.stringify(values, null, 2) })] })] }));
+    },
+};
+export const ComplexFilters = {
+    args: {
+        filters: [
+            {
+                type: 'dateRange',
+                name: 'createdDate',
+                rangeDateFormat: 'D MMM YY',
+                placeholder: `${dayjs().subtract(3, 'month').format('D MMM YY')} - Today`,
+            },
+            {
+                type: 'select',
+                name: 'priority',
+                label: 'Priority',
+                options: [
+                    { label: 'Low', value: 'low' },
+                    { label: 'Medium', value: 'medium' },
+                    { label: 'High', value: 'high' },
+                    { label: 'Critical', value: 'critical' },
+                ],
+                placeholder: 'Select priority...',
+            },
+            {
+                type: 'checkbox',
+                name: 'urgent',
+                label: 'Urgent Only',
+            },
+            {
+                type: 'checkbox',
+                name: 'assigned',
+                label: 'Assigned to Me',
+            },
+        ],
+    },
+    render: (args) => {
+        const [values, setValues] = useState({});
+        return (_jsxs("div", { children: [_jsx(Filters, { ...args, onChange: (newValues) => {
+                        var _a;
+                        setValues(newValues);
+                        (_a = args.onChange) === null || _a === void 0 ? void 0 : _a.call(args, newValues);
+                    } }), _jsxs("div", { className: "mt-4 rounded border border-gray-200 bg-gray-50 p-4", children: [_jsx("p", { className: "text-sm font-semibold", children: "Applied Filters:" }), _jsx("pre", { className: "mt-2 text-xs", children: JSON.stringify(values, null, 2) })] })] }));
+    },
+};
+export default meta;

package/dist/src/components/Filters/Filters.types.d.ts

@@ -0,0 +1,27 @@
+import type { DatePickerProps } from '../DatePicker';
+import type { CheckboxProps } from '../Checkbox';
+import type { FilterSelectProps } from './FilterSelect';
+export declare const DATE_RANGE_TYPE = "dateRange";
+export declare const SELECT_TYPE = "select";
+export declare const CHECKBOX_TYPE = "checkbox";
+export type FilterType = typeof DATE_RANGE_TYPE | typeof SELECT_TYPE | typeof CHECKBOX_TYPE;
+type DateRangeFilterOption = Omit<DatePickerProps, 'type'> & {
+    type: typeof DATE_RANGE_TYPE;
+    name: string;
+};
+type SelectFilterOption = Omit<FilterSelectProps, 'value' | 'onValueChange'> & {
+    type: typeof SELECT_TYPE;
+    name: string;
+    label?: string;
+};
+type CheckboxFilterOption = Omit<CheckboxProps, 'type'> & {
+    type: typeof CHECKBOX_TYPE;
+    name: string;
+};
+export type FilterConfigType = DateRangeFilterOption | SelectFilterOption | CheckboxFilterOption;
+export type FiltersProps = {
+    filters: FilterConfigType[];
+    defaultValues?: Record<string, unknown>;
+    onChange: (values: Record<string, unknown>) => void;
+};
+export {};

package/dist/src/components/Filters/Filters.types.js

@@ -0,0 +1,3 @@
+export const DATE_RANGE_TYPE = 'dateRange';
+export const SELECT_TYPE = 'select';
+export const CHECKBOX_TYPE = 'checkbox';

package/dist/src/components/Filters/index.d.ts

@@ -0,0 +1,2 @@
+export { Filters } from './Filters';
+export type { FilterType, FilterConfigType, FiltersProps } from './Filters.types';

package/dist/src/components/Filters/index.js

@@ -0,0 +1 @@
+export { Filters } from './Filters';

package/dist/src/components/Table/Pagination/Pagination.types.d.ts

@@ -9,6 +9,7 @@ export interface PaginationControlsProps {
     onNextPage: () => void;
     onPrevPage: () => void;
     onPageSizeChange: (size: number) => void;
+    showPageSizeSelector?: boolean;
 }
 export type PageSizeSelectorProps = {
     id: string;

package/dist/src/components/Table/Pagination/PaginationFooter.d.ts

@@ -1,2 +1,2 @@
 import type { PaginationControlsProps } from './Pagination.types';
-export declare const PaginationFooter: ({ tableId, pageIndex, pageSize, totalRows, canNextPage, canPrevPage, onNextPage, onPrevPage, onPageSizeChange, }: PaginationControlsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PaginationFooter: ({ tableId, pageIndex, pageSize, totalRows, canNextPage, canPrevPage, onNextPage, onPrevPage, onPageSizeChange, showPageSizeSelector, }: PaginationControlsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Table/Pagination/PaginationFooter.js

@@ -3,8 +3,8 @@ import { FaChevronLeft, FaChevronRight } from 'react-icons/fa6';
 import { PageSizeSelector } from './PageSizeSelector';
 import { Button } from '../../Button';
 import { cn } from '../../../lib/utils';
-export const PaginationFooter = ({ tableId, pageIndex, pageSize, totalRows, canNextPage, canPrevPage, onNextPage, onPrevPage, onPageSizeChange, }) => {
+export const PaginationFooter = ({ tableId, pageIndex, pageSize, totalRows, canNextPage, canPrevPage, onNextPage, onPrevPage, onPageSizeChange, showPageSizeSelector = true, }) => {
     const startRow = totalRows === 0 ? 0 : pageIndex * pageSize + 1;
     const endRow = totalRows === 0 ? 0 : Math.min((pageIndex + 1) * pageSize, totalRows);
-    return (_jsxs("div", { className: "flex justify-end items-center gap-6 px-4 py-2 text-xs text-(--uikit-textSecondary) w-full", children: [_jsx(PageSizeSelector, { id: tableId, value: String(pageSize), onChange: (val) => onPageSizeChange(Number(val)), size: "small", label: "Rows per page" }), totalRows > 0 && _jsx("div", { id: `page-indicator-${tableId}`, children: `${startRow} - ${endRow} of ${totalRows}` }), totalRows > 0 && (_jsxs("div", { className: "flex gap-2", id: `pagination-controls-${tableId}`, children: [_jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Previous page", onClick: onPrevPage, disabled: !canPrevPage, className: cn({ '!bg-transparent': !canPrevPage }), children: _jsx(FaChevronLeft, { className: "!w-3 !h-3" }) }), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Next page", onClick: onNextPage, disabled: !canNextPage, className: cn({ '!bg-transparent': !canNextPage }), children: _jsx(FaChevronRight, { className: "!w-3 !h-3" }) })] }))] }));
+    return (_jsxs("div", { className: "flex justify-end items-center gap-6 px-4 py-2 text-xs text-(--uikit-textSecondary) w-full", children: [showPageSizeSelector && (_jsx(PageSizeSelector, { id: tableId, value: String(pageSize), onChange: (val) => onPageSizeChange(Number(val)), size: "small", label: "Rows per page" })), totalRows > 0 && _jsx("div", { id: `page-indicator-${tableId}`, children: `${startRow} - ${endRow} of ${totalRows}` }), totalRows > 0 && (_jsxs("div", { className: "flex gap-2", id: `pagination-controls-${tableId}`, children: [_jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Previous page", onClick: onPrevPage, disabled: !canPrevPage, className: cn({ '!bg-transparent': !canPrevPage }), children: _jsx(FaChevronLeft, { className: "!w-3 !h-3" }) }), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Next page", onClick: onNextPage, disabled: !canNextPage, className: cn({ '!bg-transparent': !canNextPage }), children: _jsx(FaChevronRight, { className: "!w-3 !h-3" }) })] }))] }));
 };

package/dist/src/components/Table/StandardTable/StandardTable.js

@@ -46,5 +46,5 @@ export function StandardTable(props) {
                 customNoRows: props.customNoRows,
                 accordion: enableAccordion,
                 showGroupedTotal: props.showGroupedTotal,
-            }), footer: props.paginationMode === 'client' || props.paginationMode === 'server' ? (_jsx(PaginationFooter, { tableId: props.id, pageIndex: pagination.pageIndex, pageSize: pagination.pageSize, totalRows: totalRows, canNextPage: pagination.canNextPage, canPrevPage: pagination.canPrevPage, onNextPage: pagination.onNextPage, onPrevPage: pagination.onPrevPage, onPageSizeChange: pagination.setPageSize })) : null }) }));
+            }), footer: props.paginationMode === 'client' || props.paginationMode === 'server' ? (_jsx(PaginationFooter, { tableId: props.id, pageIndex: pagination.pageIndex, pageSize: pagination.pageSize, totalRows: totalRows, canNextPage: pagination.canNextPage, canPrevPage: pagination.canPrevPage, onNextPage: pagination.onNextPage, onPrevPage: pagination.onPrevPage, onPageSizeChange: pagination.setPageSize, showPageSizeSelector: props.showPageSizeSelector })) : null }) }));
 }

package/dist/src/components/Table/StandardTable/StandardTable.stories.d.ts

@@ -15,6 +15,7 @@ export declare const EmptyState: Story;
 export declare const EmptyStateWithIcon: Story;
 export declare const Loading: Story;
 export declare const ClientPagination: Story;
+export declare const HiddenPageSizeSelector: Story;
 export declare const ServerPagination: Story;
 export declare const RowClick: Story;
 export declare const ControlledSorting: Story;

package/dist/src/components/Table/StandardTable/StandardTable.stories.js

@@ -68,6 +68,9 @@ export const Loading = {
 export const ClientPagination = {
     render: () => (_jsx(StandardTable, { id: "client-pagination", data: data, columns: columns, paginationMode: "client", rowsPerPage: 5 })),
 };
+export const HiddenPageSizeSelector = {
+    render: () => (_jsx(StandardTable, { id: "hidden-page-size", data: data, columns: columns, paginationMode: "client", rowsPerPage: 5, showPageSizeSelector: false })),
+};
 function ServerPaginationExample() {
     const [rows, setRows] = useState([]);
     const [isLoading, setIsLoading] = useState(false);

package/dist/src/components/Table/Table.types.d.ts

@@ -35,12 +35,14 @@ export type VirtualizationOptions = {
 export type ClientPaginationProps = {
     paginationMode?: 'client' | 'none';
     rowsPerPage?: number;
+    showPageSizeSelector?: boolean;
     onRefetch?: never;
     totalServerRows?: never;
 };
 export type ServerPaginationProps = {
     paginationMode: 'server';
     rowsPerPage?: number;
+    showPageSizeSelector?: boolean;
     onRefetch: (pageIndex: number, pageSize: number) => void;
     totalServerRows: number;
 };

package/dist/src/components/Tooltip/Tooltip.stories.js

@@ -12,7 +12,7 @@ export const Default = {
     render: () => (_jsx(TooltipStoryWrapper, { content: "Simple tooltip", children: _jsx(Button, { children: "Hover me" }) })),
 };
 export const LongTextResponsive = {
-    render: () => (_jsx(TooltipStoryWrapper, { content: "This tooltip contains a longer message that wraps gracefully across multiple lines. On smaller\r\n\t\tscreens, it narrows and stacks vertically so it's easier to read\u2014especially useful for\r\n\t\taccessibility, mobile devices, or multi-language support.", side: "top", children: _jsx(Button, { children: "Hover me" }) })),
+    render: () => (_jsx(TooltipStoryWrapper, { content: "This tooltip contains a longer message that wraps gracefully across multiple lines. On smaller\n\t\tscreens, it narrows and stacks vertically so it's easier to read\u2014especially useful for\n\t\taccessibility, mobile devices, or multi-language support.", side: "top", children: _jsx(Button, { children: "Hover me" }) })),
 };
 export const OnDifferentSides = {
     render: () => (_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(TooltipStoryWrapper, { content: "Top tooltip", side: "top", children: _jsx(Button, { children: "Top" }) }), _jsx(TooltipStoryWrapper, { content: "Bottom tooltip", side: "bottom", children: _jsx(Button, { children: "Bottom" }) }), _jsx(TooltipStoryWrapper, { content: "Left tooltip", side: "left", children: _jsx(Button, { children: "Left" }) }), _jsx(TooltipStoryWrapper, { content: "Right tooltip", side: "right", children: _jsx(Button, { children: "Right" }) })] })),

package/dist/src/components/index.d.ts

@@ -37,3 +37,4 @@ export * from './InputGroup';
 export * from './PhoneInput';
 export * from './ButtonGroup';
 export * from './CreditCard';
+export * from './Filters';

package/dist/src/components/index.js

@@ -37,3 +37,4 @@ export * from './InputGroup';
 export * from './PhoneInput';
 export * from './ButtonGroup';
 export * from './CreditCard';
+export * from './Filters';