@eml-payments/ui-kit 1.2.7 → 1.2.8

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

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DatePicker } from './DatePicker';
+const meta = {
+    title: 'UIKit/DatePicker',
+    component: DatePicker,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'A date picker component built with Input, Calendar and Popover components.',
+            },
+        },
+    },
+    argTypes: {
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder text for the input field',
+        },
+        label: {
+            control: 'text',
+            description: 'Label text above the input field',
+        },
+        dateFormat: {
+            control: 'select',
+            options: ['DD/MM/YYYY', 'MM/DD/YYYY', 'YYYY-MM-DD', 'DD-MM-YYYY'],
+            description: 'Format for displaying and parsing dates',
+        },
+        currentDate: {
+            control: 'date',
+            description: 'Initial date value',
+        },
+        onChangeDate: {
+            action: 'dateChanged',
+            description: 'Callback fired when date changes',
+        },
+    },
+    args: {
+        placeholder: 'DD/MM/YYYY',
+        dateFormat: 'DD/MM/YYYY',
+    },
+};
+export default meta;
+export const Default = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Basic date picker with input field that supports both typing and calendar selection. Use the controls below to customize the component.',
+            },
+        },
+    },
+};
+export const WithLabel = {
+    args: {
+        label: 'Select Date',
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Date picker with a label.',
+            },
+        },
+    },
+};
+export const WithError = {
+    render: () => {
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(DatePicker, { label: "Date with Invalid Input", placeholder: "DD/MM/YYYY" }), _jsx("p", { className: "text-sm text-gray-600", children: "Try typing an invalid date format (like \"abc\" or \"99/99/9999\") to see the error state." })] }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Date picker showing error state when invalid date format is entered. The component automatically validates input and shows error messages.',
+            },
+        },
+    },
+};

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

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

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

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

package/dist/src/components/Input/Input.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { useUIKitTheme } from '../../context/useUIKitTheme';
 import { cn } from '../../lib/utils';
-export const Input = React.forwardRef(({ type, label, error, className, helperText, icon, variant = 'default', ...props }, ref) => {
+export const Input = React.forwardRef(({ type, label, error, className, helperText, icon, variant = 'default', endAdornment, ...props }, ref) => {
     const theme = useUIKitTheme();
     return (_jsxs("div", { className: cn(className), children: [label && variant !== 'search' && (_jsx("label", { className: "text-sm font-medium text-foreground", children: label })), _jsxs("div", { className: "relative", children: [_jsx("input", { type: type, style: { fontFamily: theme.fontFamily }, className: cn('flex h-10 w-full text-(--uikit-textSecondary) rounded-(--uikit-radius) border border-(--uikit-inputEnabledBorder) bg-background hover:border-(--uikit-inputHoverBorder) px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 md:text-sm transition focus-visible:outline-none focus-visible:border-(--uikit-primary) focus-visible:ring-2 focus-visible:ring-(--uikit-primary)', {
                             'pl-10': variant === 'search',
                             'border-error': error,
-                        }, className), ref: ref, ...props }), icon && (_jsx("span", { className: cn('absolute inset-y-0 flex items-center', variant === 'search' ? 'left-3' : 'right-3'), children: icon }))] }), error && _jsx("label", { className: "text-sm font-medium text-error", children: error }), !error && helperText && variant !== 'search' && (_jsx("label", { className: "text-sm font-medium text-foreground", children: helperText }))] }));
+                        }, className), ref: ref, ...props }), icon && (_jsx("span", { className: cn('absolute inset-y-0 flex items-center', variant === 'search' ? 'left-3' : 'right-3'), children: icon })), endAdornment && (_jsx("span", { className: "absolute inset-y-0 right-3 flex items-center", children: endAdornment }))] }), error && _jsx("label", { className: "text-sm font-medium text-error", children: error }), !error && helperText && variant !== 'search' && (_jsx("label", { className: "text-sm font-medium text-foreground", children: helperText }))] }));
 });
 Input.displayName = 'Input';

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

@@ -14,3 +14,4 @@ export declare const DisabledWithValue: Story;
 export declare const WithError: Story;
 export declare const withIcon: Story;
 export declare const VariantSearch: Story;
+export declare const WithEndAdornment: Story;

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { AiOutlineSearch } from 'react-icons/ai';
+import { CalendarIcon } from 'lucide-react';
 import { Input } from './Input';
 const meta = {
     title: 'UIKit/Input',
@@ -51,3 +52,9 @@ export const VariantSearch = {
         icon: _jsx(AiOutlineSearch, { size: 20, className: "text-(--uikit-textSecondary)" }),
     },
 };
+export const WithEndAdornment = {
+    args: {
+        placeholder: 'Enter date...',
+        endAdornment: (_jsx("button", { className: "p-1.5 hover:bg-gray-100 rounded-full transition-colors", children: _jsx(CalendarIcon, { size: 16, className: "text-gray-500" }) })),
+    },
+};

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

@@ -5,4 +5,5 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     helperText?: string;
     icon?: React.ReactNode;
     variant?: 'default' | 'search';
+    endAdornment?: React.ReactNode;
 }

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+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/dist/src/components/Popover/Popover.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { cn } from '../../lib/utils';
+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 origin-[--radix-popover-content-transform-origin]', className), ...props }) })));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PopoverContent } from './Popover';
+declare const meta: Meta<typeof PopoverContent>;
+export default meta;
+type Story = StoryObj<typeof PopoverContent>;
+export declare const Default: Story;
+export declare const WithForm: Story;
+export declare const WithActions: Story;
+export declare const CustomStyling: Story;

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

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover, PopoverTrigger, PopoverContent } from './Popover';
+import { Button } from '../Button';
+const meta = {
+    title: 'UIKit/Popover',
+    component: PopoverContent,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        align: {
+            control: { type: 'select' },
+            options: ['start', 'center', 'end'],
+        },
+        side: {
+            control: { type: 'select' },
+            options: ['top', 'right', 'bottom', 'left'],
+        },
+        sideOffset: {
+            control: { type: 'number' },
+        },
+        alignOffset: {
+            control: { type: 'number' },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: (args) => (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "primary", children: "Open Popover" }) }), _jsx(PopoverContent, { ...args, children: _jsxs("div", { children: [_jsx("h4", { className: "font-medium leading-none mb-2", children: "Popover Title" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "This is the content of the popover. You can put any content here." })] }) })] })),
+    args: {
+        align: 'center',
+        sideOffset: 4,
+    },
+};
+export const WithForm = {
+    render: (args) => (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "primary", children: "Settings" }) }), _jsx(PopoverContent, { ...args, children: _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "font-medium leading-none", children: "Settings" }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "name-input", className: "text-sm font-medium", children: "Name" }), _jsx("input", { id: "name-input", type: "text", placeholder: "Enter your name", className: "w-full px-3 py-2 border border-gray-300 rounded-md text-sm" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "email-input", className: "text-sm font-medium", children: "Email" }), _jsx("input", { id: "email-input", type: "email", placeholder: "Enter your email", className: "w-full px-3 py-2 border border-gray-300 rounded-md text-sm" })] }), _jsxs("div", { className: "flex justify-end space-x-2", children: [_jsx(Button, { variant: "ghost", size: "sm", children: "Cancel" }), _jsx(Button, { variant: "primary", size: "sm", children: "Save" })] })] }) })] })),
+    args: {
+        align: 'center',
+        sideOffset: 4,
+    },
+};
+export const WithActions = {
+    render: (args) => (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "primary", children: "More Actions" }) }), _jsx(PopoverContent, { ...args, children: _jsxs("div", { className: "space-y-1", children: [_jsx("button", { className: "w-full text-left px-2 py-1.5 text-sm hover:bg-gray-100 rounded", children: "Edit" }), _jsx("button", { className: "w-full text-left px-2 py-1.5 text-sm hover:bg-gray-100 rounded", children: "Duplicate" }), _jsx("button", { className: "w-full text-left px-2 py-1.5 text-sm hover:bg-gray-100 rounded", children: "Archive" }), _jsx("hr", { className: "my-1" }), _jsx("button", { className: "w-full text-left px-2 py-1.5 text-sm hover:bg-red-50 text-red-600 rounded", children: "Delete" })] }) })] })),
+    args: {
+        align: 'end',
+        sideOffset: 4,
+        className: 'w-48',
+    },
+};
+export const CustomStyling = {
+    render: (args) => (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "primary", children: "Custom Style" }) }), _jsx(PopoverContent, { ...args, children: _jsxs("div", { children: [_jsx("h4", { className: "font-medium leading-none mb-2 text-blue-600", children: "Custom Styled" }), _jsx("p", { className: "text-sm text-gray-600", children: "This popover has custom styling with different colors and spacing." })] }) })] })),
+    args: {
+        align: 'center',
+        sideOffset: 8,
+        className: 'bg-blue-50 border-blue-200 p-6 w-80',
+    },
+};

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

@@ -0,0 +1 @@
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } from './Popover';

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

@@ -0,0 +1 @@
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } from './Popover';

package/dist/src/components/Table/hooks/useTableController.d.ts

@@ -19,8 +19,8 @@ export declare function useTableController<T extends {
     virtualizationEnabled: boolean;
     rowVirtualizer: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element> | undefined;
     hasNextPage: boolean;
-    parentScrollRef: import("react").RefObject<HTMLDivElement | null>;
-    loaderRef: import("react").RefObject<HTMLTableRowElement | null>;
+    parentScrollRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    loaderRef: import("react").MutableRefObject<HTMLTableRowElement | null>;
     infiniteScroll: import("..").InfiniteScrollOptions | undefined;
     virtualization: import("..").VirtualizationOptions | undefined;
 };

package/dist/src/utils/dayjs.d.ts

@@ -0,0 +1,2 @@
+import dayjs from 'dayjs';
+export { dayjs };

package/dist/src/utils/dayjs.js

@@ -0,0 +1,12 @@
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import duration from 'dayjs/plugin/duration';
+dayjs.extend(customParseFormat);
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(relativeTime);
+dayjs.extend(duration);
+export { dayjs };

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

@@ -0,0 +1,2 @@
+export { dayjs } from './dayjs';
+export * from './classNames';

package/dist/src/utils/index.js

@@ -0,0 +1,2 @@
+export { dayjs } from './dayjs';
+export * from './classNames';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eml-payments/ui-kit",
-	"version": "1.2.7",
+	"version": "1.2.8",
 	"private": false,
 	"description": "ARLO UIKit",
 	"homepage": "https://github.com/EML-Payments/arlo.npm.uikit#readme",
@@ -54,9 +54,10 @@
 		"@radix-ui/react-dialog": "^1.1.14",
 		"@radix-ui/react-dropdown-menu": "^2.1.15",
 		"@radix-ui/react-label": "^2.1.7",
+		"@radix-ui/react-popover": "^1.1.15",
 		"@radix-ui/react-radio-group": "^1.3.7",
 		"@radix-ui/react-select": "^2.2.5",
-		"@radix-ui/react-slot": "^1.2.3",
+		"@radix-ui/react-slot": "^1.2.4",
 		"@radix-ui/react-switch": "^1.2.5",
 		"@radix-ui/react-tabs": "^1.1.12",
 		"@radix-ui/react-tooltip": "^1.2.7",
@@ -65,15 +66,19 @@
 		"@tanstack/react-virtual": "^3.13.13",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
+		"date-fns": "^4.1.0",
+		"dayjs": "^1.11.19",
+		"lucide-react": "^0.562.0",
 		"prettier": "^3.6.2",
 		"react": ">=18.0.0",
+		"react-day-picker": "^9.13.0",
 		"react-dom": ">=18.0.0",
 		"react-icons": "^5.5.0",
 		"react-router-dom": "^7.9.5",
-		"tailwind-merge": "^3.3.1",
+		"tailwind-merge": "^3.4.0",
 		"tailwindcss": "^4.1.11",
 		"tailwindcss-animate": "^1.0.7",
-		"tw-animate-css": "^1.3.5"
+		"tw-animate-css": "^1.4.0"
 	},
 	"devDependencies": {
 		"@eslint/js": "^9.30.1",