@pagamio/frontend-commons-lib 0.8.175 → 0.8.183

package/lib/components/ui/NotificationModal.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal } from 'flowbite-react';
+import { HiCheckCircle, HiExclamationCircle, HiInformationCircle, HiXCircle } from 'react-icons/hi';
+import Button from './Button';
+const variantConfig = {
+    success: {
+        icon: HiCheckCircle,
+        iconColor: 'text-green-500',
+        buttonVariant: 'primary',
+    },
+    error: {
+        icon: HiXCircle,
+        iconColor: 'text-red-500',
+        buttonVariant: 'primary',
+    },
+    warning: {
+        icon: HiExclamationCircle,
+        iconColor: 'text-yellow-500',
+        buttonVariant: 'primary',
+    },
+    info: {
+        icon: HiInformationCircle,
+        iconColor: 'text-blue-500',
+        buttonVariant: 'primary',
+    },
+};
+const NotificationModal = ({ show, onClose, onConfirm, title, message, variant = 'info', confirmText = 'OK', cancelText = 'Cancel', showConfirmButton = true, showCancelButton = false, loading = false, size = 'md', children, }) => {
+    const config = variantConfig[variant];
+    const IconComponent = config.icon;
+    const handleConfirm = () => {
+        if (onConfirm) {
+            onConfirm();
+        }
+        else {
+            onClose();
+        }
+    };
+    return (_jsxs(Modal, { show: show, size: size, popup: true, onClose: onClose, children: [_jsx(Modal.Header, { className: "border-b-0 pb-0" }), _jsxs(Modal.Body, { className: "text-center", children: [_jsx("div", { className: `mx-auto mb-4 h-14 w-14 ${config.iconColor}`, children: _jsx(IconComponent, { className: "h-full w-full" }) }), title && _jsx("h3", { className: "mb-3 text-xl font-semibold text-gray-900 dark:text-white", children: title }), _jsx("p", { className: "mb-5 text-lg font-normal text-gray-500 dark:text-gray-400", children: message }), children, !children && (showConfirmButton || showCancelButton) && (_jsxs("div", { className: "flex justify-center gap-4", children: [showConfirmButton && (_jsx(Button, { variant: config.buttonVariant, onClick: handleConfirm, disabled: loading, children: confirmText })), showCancelButton && (_jsx(Button, { variant: "outline", onClick: onClose, disabled: loading, children: cancelText }))] }))] })] }));
+};
+export default NotificationModal;

package/lib/components/ui/PhoneInput.d.ts

@@ -0,0 +1,12 @@
+import type { Country } from 'react-phone-number-input';
+import 'react-phone-number-input/style.css';
+import React from 'react';
+import type { InputProps } from '../../form-engine';
+interface PhoneInputSpecificProps {
+    onCountryChange?: (country: Country) => void;
+    defaultCountry?: Country;
+}
+type PhoneInputProps = InputProps & PhoneInputSpecificProps;
+declare const PhoneInput: React.ForwardRefExoticComponent<Omit<PhoneInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default PhoneInput;
+export type { PhoneInputProps };

package/lib/components/ui/PhoneInput.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ParseError, isPossiblePhoneNumber, parsePhoneNumberWithError } from 'libphonenumber-js';
+import ReachPhoneNumberInput from 'react-phone-number-input';
+import 'react-phone-number-input/style.css';
+import React, { useState } from 'react';
+const PhoneInput = React.forwardRef(({ field, error, onChange, onBlur, value, onCountryChange, ...props }, ref) => {
+    const [isTouched, setIsTouched] = useState(false);
+    const [localError, setLocalError] = useState(null);
+    const defaultCountry = field.defaultCountry ?? 'ZA';
+    const isValid = !value || isPossiblePhoneNumber(value);
+    const handleChange = (newValue) => {
+        onChange?.(newValue);
+        setLocalError(null);
+        if (newValue) {
+            try {
+                const phoneNumber = parsePhoneNumberWithError(newValue, { defaultCountry });
+                if (phoneNumber && onCountryChange) {
+                    onCountryChange(phoneNumber.country);
+                }
+            }
+            catch (error) {
+                if (error instanceof ParseError) {
+                    switch (error.message) {
+                        case 'NOT_A_NUMBER':
+                            setLocalError('Please enter a valid phone number.');
+                            break;
+                        case 'INVALID_COUNTRY':
+                            setLocalError('Invalid or unsupported country.');
+                            break;
+                        case 'TOO_SHORT':
+                            setLocalError('Phone number is too short.');
+                            break;
+                        case 'TOO_LONG':
+                            setLocalError('Phone number is too long.');
+                            break;
+                        default:
+                            setLocalError('Invalid phone number.');
+                    }
+                }
+                else {
+                    console.error('Unexpected error:', error);
+                }
+            }
+        }
+    };
+    const handleBlur = () => {
+        setIsTouched(true);
+        onBlur?.();
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: field.name, className: "block text-sm font-medium text-gray-700", children: field.label }), _jsx(ReachPhoneNumberInput, { international: true, defaultCountry: defaultCountry, value: value || '', onChange: handleChange, id: field.name, onBlur: handleBlur, placeholder: field.placeholder, numberInputProps: {
+                    className: `mt-1 block w-full p-2 border rounded-md shadow-sm 
+              ${error || localError ? 'border-red-500' : 'border-gray-300'} 
+              ${field.disabled ? 'text-gray-400 bg-gray-50' : ''}`,
+                    disabled: field.disabled,
+                    ref: ref,
+                }, ...props }), (error || localError || (!isValid && isTouched)) && (_jsx("p", { className: "mt-2 text-sm text-red-500", children: error?.message ?? localError ?? 'Please enter a valid phone number' }))] }));
+});
+export default PhoneInput;

package/lib/components/ui/Popover.d.ts

@@ -0,0 +1,7 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as React from 'react';
+declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

package/lib/components/ui/Popover.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as React from 'react';
+import { cn } from '../../helpers';
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+const PopoverContent = React.forwardRef(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, className: cn('z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', className), ...props }) })));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

package/lib/components/ui/Progress.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+    value?: number;
+    max?: number;
+}
+declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
+export { Progress };

package/lib/components/ui/Progress.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../helpers';
+const Progress = React.forwardRef(({ className, value = 0, max = 100, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('relative h-2 w-full overflow-hidden rounded-full bg-gray-200', className), ...props, children: _jsx("div", { className: "h-full w-full flex-1 bg-blue-500 transition-all duration-300 ease-in-out", style: { transform: `translateX(-${100 - (value / max) * 100}%)` } }) })));
+Progress.displayName = 'Progress';
+export { Progress };

package/lib/components/ui/Radio.d.ts

@@ -0,0 +1,5 @@
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as React from 'react';
+declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { RadioGroup, RadioGroupItem };

package/lib/components/ui/Radio.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { Circle } from 'lucide-react';
+import * as React from 'react';
+import { cn } from '../../helpers';
+const RadioGroup = React.forwardRef(({ className, ...props }, ref) => {
+    return _jsx(RadioGroupPrimitive.Root, { className: cn('grid gap-2', className), ...props, ref: ref });
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => {
+    return (_jsx(RadioGroupPrimitive.Item, { ref: ref, className: cn('aspect-square h-4 w-4 rounded-full border border-customPurple-5 text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: _jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: _jsx(Circle, { className: "h-2.5 w-2.5 fill-customPurple-5 text-customPurple-5" }) }) }));
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+export { RadioGroup, RadioGroupItem };

package/lib/components/ui/RangeDatePicker.d.ts

@@ -0,0 +1,78 @@
+import 'react-date-range/dist/styles.css';
+import 'react-date-range/dist/theme/default.css';
+import React from 'react';
+export interface RangeDatePickerProps {
+    /**
+     * Selected date range
+     */
+    dateRange?: {
+        startDate: Date;
+        endDate: Date;
+        key?: string;
+    };
+    /**
+     * Handler for date range changes
+     */
+    onChange?: (range: {
+        startDate: Date;
+        endDate: Date;
+        key: string;
+    }) => void;
+    /**
+     * Minimum selectable date
+     */
+    minDate?: Date;
+    /**
+     * Maximum selectable date
+     */
+    maxDate?: Date;
+    /**
+     * CSS classes to apply to the container
+     */
+    className?: string;
+    /**
+     * Number of months to display
+     * @default 2
+     */
+    months?: number;
+    /**
+     * Direction to display months ('horizontal' or 'vertical')
+     * @default 'horizontal'
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * Whether to display preview of selected range
+     * @default true
+     */
+    showPreview?: boolean;
+    /**
+     * Initial key for the range
+     * @default 'selection'
+     */
+    rangeKey?: string;
+}
+/**
+ * A flexible date range picker component using react-date-range
+ *
+ * @see For more customization options, refer to:
+ * - https://hypeserver.github.io/react-date-range/
+ * - https://www.npmjs.com/package/react-date-range
+ *
+ * @example
+ * ```tsx
+ * const [selectedRange, setSelectedRange] = useState({
+ *   startDate: startOfDay(new Date()),
+ *   endDate: endOfDay(addDays(new Date(), 3)),
+ * });
+ *
+ * return (
+ *   <RangeDatePicker
+ *     dateRange={selectedRange}
+ *     onChange={setSelectedRange}
+ *     showPreview={true}
+ *   />
+ * )
+ * ```
+ */
+declare const RangeDatePicker: React.FC<RangeDatePickerProps>;
+export default RangeDatePicker;

package/lib/components/ui/RangeDatePicker.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { addDays, endOfDay, startOfDay } from 'date-fns';
+import { DateRangePicker } from 'react-date-range';
+import 'react-date-range/dist/styles.css';
+// main style file
+import 'react-date-range/dist/theme/default.css';
+import { useEffect, useState } from 'react';
+import { cn } from '../../helpers';
+/**
+ * A flexible date range picker component using react-date-range
+ *
+ * @see For more customization options, refer to:
+ * - https://hypeserver.github.io/react-date-range/
+ * - https://www.npmjs.com/package/react-date-range
+ *
+ * @example
+ * ```tsx
+ * const [selectedRange, setSelectedRange] = useState({
+ *   startDate: startOfDay(new Date()),
+ *   endDate: endOfDay(addDays(new Date(), 3)),
+ * });
+ *
+ * return (
+ *   <RangeDatePicker
+ *     dateRange={selectedRange}
+ *     onChange={setSelectedRange}
+ *     showPreview={true}
+ *   />
+ * )
+ * ```
+ */
+const RangeDatePicker = ({ dateRange, onChange, minDate, maxDate, className, months = 2, direction = 'horizontal', showPreview = true, rangeKey = 'selection', }) => {
+    // Default range: today to 7 days from now
+    const defaultRange = {
+        startDate: startOfDay(new Date()),
+        endDate: endOfDay(addDays(new Date(), 7)),
+        key: rangeKey,
+    };
+    const [range, setRange] = useState(dateRange ?? defaultRange);
+    // Update internal state when dateRange prop changes
+    useEffect(() => {
+        if (dateRange) {
+            setRange({
+                ...dateRange,
+                key: rangeKey,
+            });
+        }
+    }, [dateRange, rangeKey]);
+    // Handle date range changes
+    const handleRangeChange = (rangesByKey) => {
+        const newRange = rangesByKey[rangeKey];
+        if (newRange?.startDate) {
+            // Ensure start/end of day applied appropriately
+            const updatedRange = {
+                startDate: startOfDay(newRange.startDate),
+                endDate: endOfDay(newRange.endDate ?? newRange.startDate),
+                key: rangeKey,
+            };
+            setRange(updatedRange);
+            // Notify parent component if onChange is provided
+            if (onChange) {
+                onChange(updatedRange);
+            }
+        }
+    };
+    return (_jsx("div", { className: cn('range-date-picker', className), children: _jsx(DateRangePicker, { ranges: [range], onChange: handleRangeChange, moveRangeOnFirstSelection: false, months: months, direction: direction, showPreview: showPreview, showDateDisplay: true, minDate: minDate, maxDate: maxDate, rangeColors: ['#b45dae'] }) }));
+};
+export default RangeDatePicker;

package/lib/components/ui/Select.d.ts

@@ -0,0 +1,13 @@
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as React from 'react';
+declare const Select: React.FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/lib/components/ui/Select.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as React from 'react';
+import { cn } from '../../helpers';
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn('z-50 flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1', className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, { className: "h-4 w-4 opacity-50" }) })] })));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollUpButton, { ref: ref, className: cn('z-50 flex cursor-default items-center justify-center py-1', className), ...props, children: _jsx(ChevronUpIcon, {}) })));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollDownButton, { ref: ref, className: cn('z-50 flex cursor-default items-center justify-center py-1', className), ...props, children: _jsx(ChevronDownIcon, {}) })));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+const SelectContent = React.forwardRef(({ className, children, position = 'popper', ...props }, ref) => {
+    const [searchTerm, setSearchTerm] = React.useState('');
+    const [filteredChildren, setFilteredChildren] = React.useState(React.Children.toArray(children));
+    React.useEffect(() => {
+        const filterChildren = (children) => {
+            return React.Children.toArray(children)
+                .map((child) => {
+                if (!React.isValidElement(child))
+                    return null;
+                // Handle SelectGroup
+                if (child.type === SelectGroup) {
+                    const filteredGroupChildren = filterChildren(child.props.children);
+                    if (filteredGroupChildren.length === 0)
+                        return null;
+                    return React.cloneElement(child, {
+                        ...child.props,
+                        children: filteredGroupChildren,
+                    });
+                }
+                // Handle SelectItem
+                if (typeof child.props.children === 'string' &&
+                    !child.props.children.toLowerCase().includes(searchTerm.toLowerCase())) {
+                    return null;
+                }
+                return child;
+            })
+                .filter((child) => child !== null);
+        };
+        setFilteredChildren(filterChildren(children));
+    }, [searchTerm, children]);
+    return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { ref: ref, className: cn('z-50 relative min-w-[8rem] overflow-hidden rounded-md border bg-white text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', position === 'popper' &&
+                'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), position: position, ...props, children: [_jsx("div", { className: "p-2 border-b", children: _jsx("input", { type: "text", placeholder: "Search...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), className: "w-full px-2 py-1 text-sm border rounded focus:outline-none focus:ring-1 focus:ring-gray-400", onKeyDown: (e) => {
+                            e.stopPropagation();
+                        } }) }), _jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn('p-1 max-h-[200px] overflow-y-auto', position === 'popper' && 'w-full min-w-[var(--radix-select-trigger-width)]'), children: filteredChildren.length > 0 ? (filteredChildren) : (_jsx("div", { className: "px-2 py-1.5 text-sm text-gray-500", children: "No options found" })) }), _jsx(SelectScrollDownButton, {})] }) }));
+});
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Label, { ref: ref, className: cn('px-2 py-1.5 text-sm font-semibold', className), ...props })));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn('z-50 relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[highlighted]:bg-gray-100 data-[selected]:bg-gray-200 focus:bg-gray-100 focus:text-gray-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50', className), ...props, children: [_jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "h-4 w-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] })));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Separator, { ref: ref, className: cn('-mx-1 my-1 h-px bg-muted', className), ...props })));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/lib/components/ui/Separator.d.ts

@@ -0,0 +1,4 @@
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as React from 'react';
+declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default Separator;

package/lib/components/ui/Separator.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as React from 'react';
+import { cn } from '../../helpers';
+const Separator = React.forwardRef(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (_jsx(SeparatorPrimitive.Root, { ref: ref, decorative: decorative, orientation: orientation, className: cn('shrink-0 bg-border', orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]', className), ...props })));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+export default Separator;

package/lib/components/ui/Sheet.d.ts

@@ -0,0 +1,26 @@
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const Sheet: React.FC<SheetPrimitive.DialogProps>;
+declare const SheetTrigger: React.ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetRoot: React.FC<SheetPrimitive.DialogProps>;
+declare const SheetClose: React.ForwardRefExoticComponent<SheetPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetPortal: React.FC<SheetPrimitive.DialogPortalProps>;
+declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const sheetVariants: (props?: ({
+    side?: "bottom" | "left" | "right" | "top" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
+}
+declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const SheetHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const SheetFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const SheetTitle: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const SheetDescription: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { Sheet, SheetPortal, SheetOverlay, SheetRoot, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };

package/lib/components/ui/Sheet.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { Cross2Icon } from '@radix-ui/react-icons';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '../../helpers';
+const Sheet = SheetPrimitive.Root;
+const SheetTrigger = SheetPrimitive.Trigger;
+const SheetRoot = SheetPrimitive.Root;
+const SheetClose = SheetPrimitive.Close;
+const SheetPortal = SheetPrimitive.Portal;
+const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(SheetPrimitive.Overlay, { className: cn('fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', className), ...props, ref: ref })));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+const sheetVariants = cva('fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out', {
+    variants: {
+        side: {
+            top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+            bottom: 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+            left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+            right: 'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+        },
+    },
+    defaultVariants: {
+        side: 'right',
+    },
+});
+const SheetContent = React.forwardRef(({ side = 'right', className, children, ...props }, ref) => (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Content, { ref: ref, className: cn(sheetVariants({ side }), className), ...props, children: [_jsxs(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [_jsx(Cross2Icon, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] }), children] })] })));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+const SheetHeader = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-col space-y-2 text-center sm:text-left', className), ...props }));
+SheetHeader.displayName = 'SheetHeader';
+const SheetFooter = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className), ...props }));
+SheetFooter.displayName = 'SheetFooter';
+const SheetTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(SheetPrimitive.Title, { ref: ref, className: cn('text-lg font-semibold text-foreground', className), ...props })));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+const SheetDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(SheetPrimitive.Description, { ref: ref, className: cn('text-sm text-muted-foreground', className), ...props })));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+export { Sheet, SheetPortal, SheetOverlay, SheetRoot, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };

package/lib/components/ui/StatusCell.d.ts

@@ -0,0 +1,9 @@
+import type { MRT_Cell } from 'mantine-react-table';
+export interface StatusCellProps<T extends Record<string, any> = {}> {
+    readonly cell: MRT_Cell<T>;
+    readonly color: string;
+    readonly displayValue: string;
+    readonly className?: string;
+}
+declare function StatusCell<T extends Record<string, any> = {}>({ displayValue, className, }: Readonly<StatusCellProps<T>>): import("react/jsx-runtime").JSX.Element;
+export default StatusCell;

package/lib/components/ui/StatusCell.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function StatusCell({ displayValue, className = '', }) {
+    const baseClass = 'rounded-full px-4 py-1.5';
+    return _jsx("span", { className: `${baseClass} ${className}`.trim(), children: displayValue });
+}
+export default StatusCell;

package/lib/components/ui/Switch.d.ts

@@ -0,0 +1,10 @@
+interface SwitchProps {
+    id: string;
+    checked: boolean;
+    onChange?: (checked: boolean) => void;
+    label?: string;
+    disabled?: boolean;
+    className?: string;
+}
+declare const Switch: ({ id, checked, onChange, label, disabled, className, ...props }: SwitchProps) => JSX.Element;
+export default Switch;

package/lib/components/ui/Switch.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { ToggleSwitch } from 'flowbite-react';
+// Custom theme configuration
+const customTheme = {
+    root: {
+        base: 'relative inline-flex h-6 w-11 items-center rounded-full',
+    },
+    toggle: {
+        base: clsx('h-6 w-11 rounded-full border group-focus:ring-4 group-focus:ring-cyan-500/25', 'transition-colors duration-200 relative', 
+        // Thumb styles using before: pseudo-element
+        'before:content-[""] before:absolute before:h-5 before:w-5 before:rounded-full', 'before:bg-white before:transition-transform before:duration-200', 'before:start-0.5 before:top-[0.07rem]'),
+        checked: {
+            on: clsx('bg-primary-500 border-primary-500', 'before:translate-x-5 rtl:before:-translate-x-5'),
+            off: 'border-gray-200 bg-gray-200 dark:border-gray-600 dark:bg-gray-700',
+        },
+    },
+};
+const Switch = ({ id = 'switch-component', checked, onChange, label, disabled, className, ...props }) => {
+    return (_jsxs("div", { className: `flex items-center justify-between gap-2 ${className}`, children: [_jsx(ToggleSwitch, { id: id, theme: customTheme, checked: checked, label: "", onChange: (e) => onChange && onChange(e), disabled: disabled, color: "primary", ...props }), label && _jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-300", children: label })] }));
+};
+export default Switch;

package/lib/components/ui/Tab.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface TabItem {
+    id: number;
+    title: string;
+    content: React.ReactNode;
+}
+interface TabProps {
+    tabs: TabItem[];
+    defaultTab?: number;
+    className?: string;
+    onTabChange?: (index: number) => void;
+}
+declare const Tab: React.FC<TabProps>;
+export default Tab;
+export type { TabProps, TabItem };

package/lib/components/ui/Tab.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+const Tab = ({ tabs, className, defaultTab = 0, onTabChange }) => {
+    const [activeTab, setActiveTab] = useState(defaultTab);
+    const handleTabClick = (index) => {
+        setActiveTab(index);
+        onTabChange?.(index);
+    };
+    return (_jsxs("div", { children: [_jsx("ul", { className: `flex border-b ${className}`, children: tabs.map((tab, index) => (_jsx("li", { className: `mr-2 ${activeTab === index
+                        ? 'border-b-2  border-primary-500 text-gray-900'
+                        : 'border-transparent text-gray-600 hover:bg-gray-100'}`, children: _jsx("button", { onClick: () => handleTabClick(index), className: `block px-4 py-2 text-sm focus:outline-none ${activeTab === index ? 'font-semibold' : ''}`, children: tab.title }) }, tab.id))) }), _jsx("div", { className: "mt-4", children: tabs[activeTab]?.content })] }));
+};
+export default Tab;

package/lib/components/ui/TableDownload.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface TableDownloadProps<T> {
+    columns: {
+        header: string;
+        accessor: keyof T;
+    }[];
+    data: T[];
+}
+declare const TableDownload: React.FC<TableDownloadProps<any>>;
+export default TableDownload;
+export type { TableDownloadProps };