@pagamio/frontend-commons-lib 0.8.175 → 0.8.183

package/lib/components/layout/Sidebar.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Sidebar, TextInput } from 'flowbite-react';
+import { HiSearch } from 'react-icons/hi';
+import { twMerge } from 'tailwind-merge';
+import React, { useEffect, useState } from 'react';
+import { useAppSidebarContext } from '../../context';
+import { useLibTranslations, useTranslation } from '../../translations';
+const AppSidebarMenu = () => {
+    const { pages } = useAppSidebarContext();
+    return (_jsx(Sidebar.Items, { children: _jsx(Sidebar.ItemGroup, { className: "mt-0 border-t-0 pb-1 pt-0", children: pages.map((item) => (_jsx(AppSidebarItem, { ...item }, item.label))) }) }));
+};
+const AppSidebarItem = ({ href, target, icon, label, items, badge, forceDropdown }) => {
+    const { pathname, linkComponent: Link } = useAppSidebarContext();
+    const { t } = useTranslation();
+    // Check if current path matches this item or any of its descendants
+    const isParentActive = href ? pathname === href || pathname.startsWith(`${href}/`) : false;
+    // Recursive function to check if any nested child is active
+    const hasActiveChild = (children = []) => {
+        return children.some((child) => {
+            if (child.href && pathname.startsWith(child.href))
+                return true;
+            if (child.items)
+                return hasActiveChild(child.items);
+            return false;
+        });
+    };
+    // If there's exactly one item, render it as a direct link instead of a dropdown
+    if (items?.length === 1 && !forceDropdown) {
+        const singleItem = items[0];
+        return (_jsx(Sidebar.Item, { as: Link, href: singleItem.href, target: target, icon: icon, label: badge && t(badge), className: twMerge('text-gray-600 hover:text-primary-700 hover:bg-primary-50/70', 'dark:text-gray-400 dark:hover:text-primary-300 dark:hover:bg-primary-900/30', pathname === singleItem.href &&
+                'text-primary-700 bg-primary-100/80 hover:bg-primary-100/80 dark:text-primary-300 dark:bg-primary-900/40 dark:hover:bg-primary-900/40'), children: t(label) }));
+    }
+    if (items?.length) {
+        const isOpen = isParentActive || hasActiveChild(items);
+        return (_jsx(Sidebar.Collapse, { icon: icon, label: t(label), open: isOpen, className: twMerge('text-gray-600 hover:text-primary-700 hover:bg-primary-50/70', 'dark:text-gray-400 dark:hover:text-primary-300 dark:hover:bg-primary-900/30', 
+            // Parent styling when its child is active
+            hasActiveChild(items) && 'text-primary-700 dark:text-primary-300', 
+            // Parent styling when it's directly active
+            isParentActive &&
+                !hasActiveChild(items) &&
+                'text-primary-700 bg-primary-100/80 hover:bg-primary-100/80 dark:text-primary-300 dark:bg-primary-900/40 dark:hover:bg-primary-900/40'), theme: { list: 'space-y-2 py-2 [&>li>div]:w-full' }, children: items.map((child) => (_jsx(React.Fragment, { children: child.items?.length ? (
+                // Recursively render nested items
+                _jsx("div", { className: "pl-3", children: _jsx(AppSidebarItem, { ...child }) })) : (
+                // Render leaf item
+                _jsx(Sidebar.Item, { as: Link, href: child.href, target: child.target, icon: child.icon, className: twMerge('justify-center [&>*]:font-normal', 'text-gray-600 hover:text-primary-700 hover:bg-primary-50/70', 'dark:text-gray-400 dark:hover:text-primary-300 dark:hover:bg-primary-900/30', pathname === child.href &&
+                        'text-primary-700 bg-primary-100/80 hover:bg-primary-100/80 dark:text-primary-300 dark:bg-primary-900/40 dark:hover:bg-primary-900/40'), children: t(child.label) })) }, child.label))) }));
+    }
+    // Render leaf item
+    return (_jsx(Sidebar.Item, { as: Link, href: href, target: target, icon: icon, label: badge && t(badge), className: twMerge('text-gray-600 hover:text-primary-700 hover:bg-primary-50/70', 'dark:text-gray-400 dark:hover:text-primary-300 dark:hover:bg-primary-900/30', isParentActive &&
+            'text-primary-700 bg-primary-100/80 hover:bg-primary-100/80 dark:text-primary-300 dark:bg-primary-900/40 dark:hover:bg-primary-900/40'), children: t(label) }));
+};
+const AppMobileSidebar = () => {
+    const { mobile: { isOpen, close }, } = useAppSidebarContext();
+    const { t } = useTranslation();
+    const { tLib } = useLibTranslations();
+    if (!isOpen)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx(Sidebar, { "aria-label": t('sidebar.mobileAriaLabel', 'Sidebar with multi-level dropdown example'), className: twMerge('fixed inset-y-0 left-0 z-20 hidden h-full shrink-0 flex-col border-r border-gray-200 pt-16 dark:border-gray-700 md:flex', isOpen && 'flex'), id: "sidebar", children: _jsx("div", { className: "flex h-full flex-col justify-between", children: _jsxs("div", { className: "py-2", children: [_jsx("form", { className: "pb-3", children: _jsx(TextInput, { icon: HiSearch, type: "search", placeholder: tLib('sidebar.searchPlaceholder', 'Search'), required: true, size: 32 }) }), _jsx(AppSidebarMenu, {})] }) }) }), _jsx("div", { onClick: close, "aria-hidden": "true", className: "fixed inset-0 z-10 h-full w-full bg-gray-900/50 pt-16 dark:bg-gray-900/90" })] }));
+};
+const AppDesktopSidebar = () => {
+    const { desktop: { isCollapsed, setCollapsed }, } = useAppSidebarContext();
+    const [isPreview, setIsPreview] = useState(isCollapsed);
+    const { tLib } = useLibTranslations();
+    useEffect(() => {
+        if (isCollapsed)
+            setIsPreview(false);
+    }, [isCollapsed]);
+    const preview = {
+        enable() {
+            if (!isCollapsed)
+                return;
+            setIsPreview(true);
+            setCollapsed(false);
+        },
+        disable() {
+            if (!isPreview)
+                return;
+            setCollapsed(true);
+        },
+    };
+    return (_jsx(Sidebar, { onMouseEnter: preview.enable, onMouseLeave: preview.disable, "aria-label": tLib('sidebar.desktopAriaLabel', 'Sidebar with multi-level dropdown example'), collapsed: isCollapsed, className: twMerge('fixed inset-y-0 left-0 z-20 flex h-full shrink-0 flex-col border-r border-gray-200 pt-16 duration-75 dark:border-gray-700', isCollapsed && 'hidden w-16'), id: "sidebar", children: _jsx("div", { className: "flex h-full flex-col justify-between", children: _jsx("div", { className: "py-2", children: _jsx(AppSidebarMenu, {}) }) }) }));
+};
+const AppDashboardSidebar = () => {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "md:hidden", children: _jsx(AppMobileSidebar, {}) }), _jsx("div", { className: "hidden md:block", children: _jsx(AppDesktopSidebar, {}) })] }));
+};
+export default AppDashboardSidebar;
+export { AppSidebarMenu, AppMobileSidebar, AppDesktopSidebar, AppDashboardSidebar };

package/lib/components/layout/VerticalTabsLayout.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface Content {
+    id: number;
+    label: string;
+    content: React.ReactNode;
+}
+interface VerticalTabsLayoutProps {
+    content: Content[];
+}
+declare const VerticalTabsLayout: ({ content }: VerticalTabsLayoutProps) => import("react/jsx-runtime").JSX.Element;
+export default VerticalTabsLayout;
+export type { VerticalTabsLayoutProps };

package/lib/components/layout/VerticalTabsLayout.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { useState } from 'react';
+import { useTranslation } from '../../translations';
+const VerticalTabsLayout = ({ content }) => {
+    const [activeTab, setActiveTab] = useState(content[0].id);
+    const { t } = useTranslation();
+    return (_jsxs("div", { className: "flex ", children: [_jsx("div", { className: "bg-gray-10 w-[260px]", children: _jsx("ul", { className: "flex flex-col space-y-3 border-r border-primary-700 pr-4", children: content.map((tab) => (_jsx("li", { children: _jsx("button", { type: "button", className: classNames('flex w-full cursor-pointer items-center justify-center rounded-lg p-4 text-lg font-semibold', {
+                                'border border-gray-400 text-gray-700 hover:bg-gray-400 hover:text-white': activeTab === tab.id,
+                                'bg-gray-300 text-gray-700 hover:bg-gray-200': activeTab !== tab.id,
+                            }), onClick: () => setActiveTab(tab.id), children: t(tab.label) }) }, tab.id))) }) }), _jsx("div", { className: "flex-1 p-6", children: _jsx("div", { className: "text-xl text-gray-800", children: content.find((tab) => tab.id === activeTab)?.content }) })] }));
+};
+export default VerticalTabsLayout;

package/lib/components/layout/index.d.ts

@@ -0,0 +1,9 @@
+export { default as AppDashboardNavbar, type AppDashboardNavbarProps, AppDarkThemeToggleWithTooltip, AppSidebarToggleButton, AppUserDropdown, } from './Navbar';
+export { default as AuthPageLayout } from './AuthPageLayout';
+export { default as AppBreadcrumbNav } from './BreadcrumbNav';
+export { default as AppLayoutContent } from './LayoutContent';
+export { default as AppPageHeader, type AppPageHeaderProps } from './PageHeader';
+export { default as AppDashboardSidebar, AppDesktopSidebar, AppMobileSidebar, AppSidebarMenu } from './Sidebar';
+export { default as VerticalTabsLayout, type VerticalTabsLayoutProps } from './VerticalTabsLayout';
+export { default as AppLayout, type AppLayoutProps } from './AppLayout';
+export { default as SessionExpiryModal, type SessionExpiryModalProps } from './SessionExpiryModal';

package/lib/components/layout/index.js

@@ -0,0 +1,9 @@
+export { default as AppDashboardNavbar, AppDarkThemeToggleWithTooltip, AppSidebarToggleButton, AppUserDropdown, } from './Navbar';
+export { default as AuthPageLayout } from './AuthPageLayout';
+export { default as AppBreadcrumbNav } from './BreadcrumbNav';
+export { default as AppLayoutContent } from './LayoutContent';
+export { default as AppPageHeader } from './PageHeader';
+export { default as AppDashboardSidebar, AppDesktopSidebar, AppMobileSidebar, AppSidebarMenu } from './Sidebar';
+export { default as VerticalTabsLayout } from './VerticalTabsLayout';
+export { default as AppLayout } from './AppLayout';
+export { default as SessionExpiryModal } from './SessionExpiryModal';

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

@@ -0,0 +1,6 @@
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as React from 'react';
+declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export { Avatar, AvatarImage, AvatarFallback };

package/lib/components/ui/Avatar.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as React from 'react';
+import { cn } from '../../helpers';
+const Avatar = React.forwardRef(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Root, { ref: ref, className: cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className), ...props })));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+const AvatarImage = React.forwardRef(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Image, { ref: ref, className: cn('aspect-square h-full w-full', className), ...props })));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Fallback, { ref: ref, className: cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className), ...props })));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+export { Avatar, AvatarImage, AvatarFallback };

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

@@ -0,0 +1,4 @@
+declare const AvatarIcon: ({ username }: {
+    username: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default AvatarIcon;

package/lib/components/ui/AvatarIcon.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, AvatarFallback, AvatarImage } from './Avatar';
+const AvatarIcon = ({ username }) => {
+    return (_jsxs("div", { className: "flex gap-2 p-3 mb-1", children: [_jsxs("div", { className: "relative", children: [_jsxs(Avatar, { children: [_jsx(AvatarImage, { src: "https://github.com/shadcn.png", alt: "user" }), _jsx(AvatarFallback, { children: "CN" })] }), _jsx("div", { className: "border size-3 absolute bottom-0 right-0 rounded-full bg-green-400" })] }), _jsxs("div", { className: "", children: [_jsx("p", { className: "text-sm", children: username }), _jsx("p", { className: "text-xs", children: "Administrator" })] })] }));
+};
+export default AvatarIcon;

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+type ButtonVariant = 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'primary' | 'outline-primary' | 'transparent';
+type ButtonSize = 'default' | 'sm' | 'md' | 'lg' | 'icon';
+declare const variantStyles: Record<ButtonVariant, string>;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    asChild?: boolean;
+    className?: string;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default Button;
+export { variantStyles };
+export type { ButtonVariant, ButtonSize };

package/lib/components/ui/Button.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from '@radix-ui/react-slot';
+import * as React from 'react';
+import { cn } from '../../helpers';
+const variantStyles = {
+    default: 'bg-primary text-white shadow hover:bg-primary/90',
+    destructive: 'bg-red-500 text-white shadow-sm hover:bg-red-600',
+    outline: 'border border-gray-200 bg-white shadow-sm hover:bg-gray-100',
+    secondary: 'bg-gray-500 text-white shadow-sm hover:bg-gray-600',
+    ghost: 'hover:bg-gray-100 hover:text-gray-900',
+    link: 'text-primary underline-offset-4 hover:underline',
+    primary: 'bg-primary-500 text-white hover:bg-primary-600 focus:ring-primary-500',
+    'outline-primary': 'border border-primary-500 text-primary-500 hover:bg-primary-500 hover:text-white focus:ring-gray-400',
+    transparent: 'bg-transparent text-primary-500 hover:bg-primary-50 focus:ring-primary-500',
+};
+const sizeStyles = {
+    default: 'h-9 px-4 py-2',
+    sm: 'h-8 px-3 py-2 text-sm',
+    md: 'px-6 py-2 text-base',
+    lg: 'h-10 px-8 py-2 text-lg',
+    icon: 'h-9 w-9',
+};
+const Button = React.forwardRef(({ className, variant = 'primary', size = 'default', asChild = false, disabled = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    const baseStyles = 'inline-flex items-center justify-center rounded-md text-xs sm:text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50';
+    return (_jsx(Comp, { className: cn(baseStyles, variantStyles[variant], sizeStyles[size], disabled && 'bg-gray-400 text-white cursor-not-allowed', className), ref: ref, disabled: disabled, ...props }));
+});
+Button.displayName = 'Button';
+export default Button;
+export { variantStyles };

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

@@ -0,0 +1,9 @@
+import { DayPicker } from 'react-day-picker';
+import * as React from 'react';
+type CalendarProps = React.ComponentProps<typeof DayPicker>;
+declare const Calendar: {
+    ({ className, classNames, showOutsideDays, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Calendar;
+export type { CalendarProps };

package/lib/components/ui/Calendar.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DayPicker } from 'react-day-picker';
+import { cn } from '../../helpers';
+import { variantStyles } from '../ui';
+const Calendar = ({ className, classNames, showOutsideDays = true, ...props }) => {
+    return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn('p-3', className), classNames: {
+            months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
+            month: 'space-y-4',
+            caption: 'flex justify-center pt-1 relative items-center',
+            caption_label: 'text-sm font-medium',
+            nav: 'space-x-1 flex items-center',
+            nav_button: cn(variantStyles.outline, 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100'),
+            nav_button_previous: 'absolute left-1',
+            nav_button_next: 'absolute right-1',
+            table: 'w-full border-collapse space-y-1',
+            head_row: 'flex',
+            head_cell: 'text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]',
+            row: 'flex w-full mt-2',
+            cell: cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md', props.mode === 'range'
+                ? '[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'
+                : '[&:has([aria-selected])]:rounded-md'),
+            day: cn(variantStyles.ghost, 'h-8 w-8 p-0 font-normal aria-selected:opacity-100'),
+            day_range_start: 'day-range-start',
+            day_range_end: 'day-range-end',
+            day_selected: 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
+            day_today: 'bg-accent text-accent-foreground',
+            day_outside: 'day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
+            day_disabled: 'text-muted-foreground opacity-50',
+            day_range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground',
+            day_hidden: 'invisible',
+            ...classNames,
+        }, ...props }));
+};
+Calendar.displayName = 'Calendar';
+export default Calendar;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { type ButtonVariant } from './Button';
+interface CardProps {
+    title?: string;
+    description?: string;
+    children: React.ReactNode;
+    className?: string;
+    showButton?: boolean;
+    buttonVariant?: ButtonVariant;
+    buttonText?: string;
+    handleButtonClick?: () => void;
+    /** Custom element to render inline with title and description */
+    headerElement?: React.ReactNode;
+}
+declare const Card: React.FC<CardProps>;
+export default Card;

package/lib/components/ui/Card.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Button from './Button';
+const Card = ({ title, description, children, className = '', showButton, buttonText, buttonVariant = 'primary', handleButtonClick, headerElement, }) => {
+    return (_jsxs("div", { className: `bg-white border rounded-[10px] shadow-sm ${className}`, children: [(title || description || showButton || headerElement) && (_jsx("div", { className: "p-6", children: _jsxs("div", { className: "flex flex-col sm:flex-row sm:justify-between sm:items-start gap-4", children: [_jsxs("div", { children: [title && (_jsx("h2", { className: "text-[1.5rem] font-semibold leading-[1] tracking-[-0.025em] text-gray-900", children: title })), description && _jsx("p", { className: "mt-2 text-[0.875rem] leading-[1.25rem] text-gray-600", children: description })] }), headerElement && _jsx("div", { children: headerElement }), showButton && (_jsx("div", { children: _jsx(Button, { onClick: handleButtonClick, variant: buttonVariant, className: buttonVariant, style: { height: 39 }, children: buttonText ?? 'Add' }) }))] }) })), _jsx("div", { className: "p-6 pt-0", children: children })] }));
+};
+export default Card;

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

@@ -0,0 +1,2 @@
+declare const Chart: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default Chart;

package/lib/components/ui/Chart.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactApexChart from 'react-apexcharts';
+import { useEffect, useState } from 'react';
+import { Loader } from '../ui';
+// TODO:  Define proper props type
+const Chart = (props) => {
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    if (!mounted) {
+        return _jsx(Loader, { colorClassName: "primary-500" });
+    }
+    return _jsx(ReactApexChart, { ...props, width: "100%" });
+};
+export default Chart;

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

@@ -0,0 +1,4 @@
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as React from 'react';
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export default Checkbox;

package/lib/components/ui/Checkbox.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { CheckIcon } from '@radix-ui/react-icons';
+import * as React from 'react';
+import { cn } from '../../helpers';
+const Checkbox = React.forwardRef(({ className, ...props }, ref) => (_jsx(CheckboxPrimitive.Root, { ref: ref, className: cn('peer h-4 w-4 shrink-0 rounded-sm border border-customPurple-25 shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary-500 data-[state=checked]:text-primary-foreground', className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { className: cn('flex items-center justify-center text-current'), children: _jsx(CheckIcon, { className: "h-4 w-4" }) }) })));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+export default Checkbox;

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

@@ -0,0 +1,80 @@
+import { type DialogProps } from '@radix-ui/react-dialog';
+import * as React from 'react';
+declare const Command: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    label?: string;
+    shouldFilter?: boolean;
+    filter?: (value: string, search: string, keywords?: string[]) => number;
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    loop?: boolean;
+    disablePointerSelection?: boolean;
+    vimBindings?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandDialog: ({ children, ...props }: DialogProps) => import("react/jsx-runtime").JSX.Element;
+declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
+    ref?: React.Ref<HTMLInputElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.InputHTMLAttributes<HTMLInputElement> | "asChild">, "type" | "onChange" | "value"> & {
+    value?: string;
+    onValueChange?: (search: string) => void;
+} & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const CommandList: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    label?: string;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
+    heading?: React.ReactNode;
+    value?: string;
+    forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    alwaysRender?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "value" | "disabled"> & {
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+    value?: string;
+    keywords?: string[];
+    forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandShortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };

package/lib/components/ui/Command.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
+import { Command as CommandPrimitive } from 'cmdk';
+import * as React from 'react';
+import { cn } from '../../helpers';
+import { Dialog, DialogContent } from './Dialog';
+const Command = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive, { ref: ref, className: cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', className), ...props })));
+Command.displayName = CommandPrimitive.displayName;
+const CommandDialog = ({ children, ...props }) => {
+    return (_jsx(Dialog, { ...props, children: _jsx(DialogContent, { className: "overflow-hidden p-0", children: _jsx(Command, { className: "[&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:font-medium [&_[data-cmdk-group-heading]]:text-muted-foreground [&_[data-cmdk-group]:not([hidden])_~[data-cmdk-group]]:pt-0 [&_[data-cmdk-group]]:px-2 [&_[data-cmdk-input-wrapper]_svg]:h-5 [&_[data-cmdk-input-wrapper]_svg]:w-5 [&_[data-cmdk-input]]:h-12 [&_[data-cmdk-item]]:px-2 [&_[data-cmdk-item]]:py-3 [&_[data-cmdk-item]_svg]:h-5 [&_[data-cmdk-item]_svg]:w-5", children: children }) }) }));
+};
+const CommandInput = React.forwardRef(({ className, ...props }, ref) => (_jsxs("div", { className: "flex items-center border-b px-3", "data-cmdk-input-wrapper": "", children: [_jsx(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }), _jsx(CommandPrimitive.Input, { ref: ref, className: cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', className), ...props })] })));
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+const CommandList = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.List, { ref: ref, className: cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className), ...props })));
+CommandList.displayName = CommandPrimitive.List.displayName;
+const CommandEmpty = React.forwardRef((props, ref) => _jsx(CommandPrimitive.Empty, { ref: ref, className: "py-6 text-center text-sm", ...props }));
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+const CommandGroup = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.Group, { ref: ref, className: cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', className), ...props })));
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+const CommandSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.Separator, { ref: ref, className: cn('-mx-1 h-px bg-border', className), ...props })));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+const CommandItem = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.Item, { ref: ref, className: cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50', className), ...props })));
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+const CommandShortcut = ({ className, ...props }) => {
+    return _jsx("span", { className: cn('ml-auto text-xs tracking-widest text-muted-foreground', className), ...props });
+};
+CommandShortcut.displayName = 'CommandShortcut';
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };

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

@@ -0,0 +1,21 @@
+interface TabItem {
+    id: number;
+    title: string;
+    content: React.ReactNode;
+}
+interface ContainedTabProps {
+    tabs: TabItem[];
+    activeTab?: number;
+    onTabChange?: (index: number) => void;
+    tabClassName?: string;
+    /** Title to display above the tabs */
+    title?: string;
+    /** Optional description text below the title */
+    description?: string;
+    /** Whether the tab buttons should stick to the top when scrolling */
+    isSticky?: boolean;
+    /** Whether tabs should take full width of container. Default is true */
+    isFullWidth?: boolean;
+}
+declare const ContainedTab: ({ tabs, activeTab: controlledActiveTab, onTabChange, tabClassName, title, description, isSticky, isFullWidth, }: ContainedTabProps) => import("react/jsx-runtime").JSX.Element;
+export default ContainedTab;

package/lib/components/ui/ContainedTab.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tabs } from 'flowbite-react';
+import { useState } from 'react';
+const ContainedTab = ({ tabs, activeTab: controlledActiveTab, onTabChange, tabClassName = '', title, description, isSticky = false, isFullWidth = true, }) => {
+    const [internalActiveTab, setInternalActiveTab] = useState(tabs[0]?.id || 0);
+    const isControlled = typeof controlledActiveTab !== 'undefined';
+    const activeTab = isControlled ? controlledActiveTab : internalActiveTab;
+    const handleTabClick = (tabId) => {
+        if (!isControlled) {
+            setInternalActiveTab(tabId);
+        }
+        onTabChange?.(tabId);
+    };
+    return (_jsxs("div", { className: "w-full", children: [_jsxs("div", { children: [title && _jsx("h2", { className: "text-lg font-semibold", children: title }), description && _jsx("p", { className: "text-sm text-gray-500", children: description })] }), _jsx(Tabs, { "aria-label": "Tabs", className: "flex-nowrap", style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                }, theme: {
+                    base: 'flex flex-col gap-2',
+                    tablist: {
+                        base: `${isSticky ? 'sticky top-0 z-10 bg-white' : ''} flex text-center p-[5px] rounded-lg border-b border-gray-200 dark:border-gray-700 bg-gray-200 ${isFullWidth ? 'w-full' : 'w-fit'} ${tabClassName}`,
+                        tabitem: {
+                            base: 'flex items-center justify-center p-2 flex-1 rounded-lg text-sm font-medium first:ml-0 disabled:cursor-not-allowed disabled:text-gray-400 focus:outline-none',
+                            variant: {
+                                default: {
+                                    base: 'rounded-t-lg',
+                                    active: {
+                                        on: 'text-black bg-white active dark:text-cyan-500 dark:border-cyan-500',
+                                        off: 'border-b-2 border-transparent text-gray-500 dark:text-gray-400 dark:hover:text-gray-300',
+                                    },
+                                },
+                            },
+                        },
+                    },
+                    tabpanel: 'p-0',
+                }, onActiveTabChange: (tab) => handleTabClick(tab), children: tabs.map((tab) => (_jsx(Tabs.Item, { title: tab.title, active: activeTab === tab.id, children: tab.content }, tab.id))) })] }));
+};
+export default ContainedTab;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+type DateFormatterProps = {
+    dateString: string;
+};
+declare const DateFormatter: React.FC<DateFormatterProps>;
+export default DateFormatter;

package/lib/components/ui/DateFormat.js

@@ -0,0 +1,8 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { format, parseISO } from 'date-fns';
+const DateFormatter = ({ dateString }) => {
+    const dateObject = parseISO(dateString);
+    const formattedDate = format(dateObject, 'yyyy/MM/dd HH:mm:ss');
+    return _jsx(_Fragment, { children: formattedDate });
+};
+export default DateFormatter;

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

@@ -0,0 +1,14 @@
+import 'flowbite';
+type DatePickerProps = {
+    ref?: any;
+    name?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+    value?: Date | null;
+    onChange?: (date: Date) => void;
+};
+declare function DatePicker({ value, disabled, name, onChange }: Readonly<DatePickerProps>): import("react/jsx-runtime").JSX.Element;
+export default DatePicker;
+export type { DatePickerProps };