@eml-payments/ui-kit 1.8.16 → 1.8.18

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

@@ -0,0 +1,2 @@
+export declare const creditCardFrost = "./credit-card-frost.png";
+export declare const creditCardFront = "./credit-card-front.png";

package/dist/src/assets/index.js

@@ -0,0 +1,3 @@
+// Asset path constants for consumption by consuming applications
+export const creditCardFrost = './credit-card-frost.png';
+export const creditCardFront = './credit-card-front.png';

package/dist/src/assets/index.ts

@@ -0,0 +1,3 @@
+// Asset path constants for consumption by consuming applications
+export const creditCardFrost = './credit-card-frost.png';
+export const creditCardFront = './credit-card-front.png';

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

@@ -1,3 +1,2 @@
-import * as React from 'react';
 import type { ButtonProps } from './Button.types';
-export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/src/components/Button/Button.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cn } from '../../lib/utils';
+import { forwardRef } from 'react';
 import { LuLoaderCircle } from 'react-icons/lu';
-import { buttonVariants } from './ButtonVariants';
-export const Button = React.forwardRef(({ variant, size, asChild = false, loading = false, className, icon, iconPosition = 'left', loadingText, children, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button';
-    return (_jsx(Comp, { className: cn(buttonVariants({ variant, size }), (props.disabled || loading) &&
-            'bg-(--uikit-actionDisabledBackground) text-(--uikit-actionDisabled) border-(--uikit-actionDisabled)', className), ref: ref, disabled: loading || props.disabled, ...props, children: loading ? (_jsxs(_Fragment, { children: [_jsx(LuLoaderCircle, { className: "animate-spin" }), loadingText] })) : (_jsxs("span", { className: cn('flex items-center', iconPosition === 'right' && 'flex-row-reverse', iconPosition === 'left' && 'flex-row', iconPosition === 'top' && 'flex-col', iconPosition === 'bottom' && 'flex-col-reverse', icon && 'gap-2'), children: [icon && _jsx("span", { children: icon }), children] })) }));
+import { buttonVariants, iconButtonPositionVariants } from './ButtonVariants';
+import { cn } from '../../lib/utils';
+export const Button = forwardRef(({ variant, size, loading = false, className, icon, iconPosition = 'left', loadingText, children, disabled, ...props }, ref) => {
+    const isLoading = loading || disabled;
+    return (_jsx("button", { type: "button", className: cn(buttonVariants({ variant, size }), {
+            'bg-(--uikit-actionDisabledBackground) text-(--uikit-actionDisabled) border-(--uikit-actionDisabled)': isLoading,
+        }, className), ref: ref, disabled: isLoading, ...props, children: loading ? (_jsxs(_Fragment, { children: [_jsx(LuLoaderCircle, { className: "animate-spin" }), loadingText] })) : (_jsxs("div", { className: iconButtonPositionVariants({ iconPosition }), children: [icon, children] })) }));
 });
 Button.displayName = 'Button';

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

@@ -3,22 +3,7 @@ import { Button } from './Button';
 declare const meta: Meta<typeof Button>;
 export default meta;
 type Story = StoryObj<typeof Button>;
-export declare const Primary: Story;
-export declare const PrimaryFilled: Story;
-export declare const PrimaryOutlined: Story;
-export declare const PrimaryText: Story;
-export declare const Secondary: Story;
-export declare const SecondaryFilled: Story;
-export declare const SecondaryOutlined: Story;
-export declare const SecondaryText: Story;
-export declare const Outlined: Story;
-export declare const Ghost: Story;
-export declare const Destructive: Story;
-export declare const Loading: Story;
-export declare const WithLoadingText: Story;
-export declare const WithIconLeft: Story;
-export declare const WithIconRight: Story;
-export declare const WithIconTop: Story;
-export declare const WithIconBottom: Story;
-export declare const DisabledVariants: Story;
+export declare const Default: Story;
 export declare const AllSizes: Story;
+export declare const AllVariants: Story;
+export declare const AllIconPositions: Story;

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

@@ -1,5 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LuSearch, LuPlus, LuTrash2 } from 'react-icons/lu';
 import { Button } from './Button';
+const ICON_OPTIONS = ['none', 'search', 'plus', 'trash'];
+const ICON_MAP = {
+    none: undefined,
+    search: _jsx(LuSearch, {}),
+    plus: _jsx(LuPlus, {}),
+    trash: _jsx(LuTrash2, {}),
+};
 const meta = {
     title: 'UIKit/Button',
     component: Button,
@@ -9,87 +17,54 @@ const meta = {
     },
 };
 export default meta;
-export const Primary = {
-    args: {
-        variant: 'primary',
-    },
-};
-export const PrimaryFilled = {
-    args: {
-        variant: 'primaryFilled',
-    },
-};
-export const PrimaryOutlined = {
-    args: {
-        variant: 'primaryOutlined',
-    },
-};
-export const PrimaryText = {
-    args: {
-        variant: 'primaryText',
-    },
-};
-export const Secondary = {
-    args: {
-        variant: 'secondary',
+export const Default = {
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: [
+                'primary',
+                'primaryFilled',
+                'primaryOutlined',
+                'primaryText',
+                'secondary',
+                'secondaryFilled',
+                'secondaryOutlined',
+                'secondaryText',
+                'outlined',
+                'ghost',
+                'destructive',
+            ],
+        },
+        size: {
+            control: 'select',
+            options: ['xs', 'sm', 'default', 'lg', 'icon'],
+        },
+        icon: { table: { disable: true } },
+        // @ts-expect-error custom non-component arg for icon selection
+        iconName: {
+            control: 'radio',
+            options: ICON_OPTIONS,
+            name: 'Icon',
+        },
     },
-};
-export const SecondaryFilled = {
-    args: {
-        variant: 'secondaryFilled',
-    },
-};
-export const SecondaryOutlined = {
-    args: {
-        variant: 'secondaryOutlined',
-    },
-};
-export const SecondaryText = {
     args: {
-        variant: 'secondaryText',
-    },
-};
-export const Outlined = {
-    args: {
-        variant: 'outlined',
-    },
-};
-export const Ghost = {
-    args: {
-        variant: 'ghost',
-    },
-};
-export const Destructive = {
-    args: {
-        variant: 'destructive',
-    },
-};
-export const Loading = {
-    args: {
-        loading: true,
+        variant: 'primary',
+        size: 'default',
+        children: 'Click me',
+        // @ts-expect-error custom arg
+        iconName: 'none',
     },
-};
-export const WithLoadingText = {
-    args: {
-        loading: true,
-        loadingText: 'Saving',
+    render: ({ ...args }) => {
+        const { iconName, ...buttonArgs } = args;
+        return _jsx(Button, { ...buttonArgs, icon: ICON_MAP[iconName] });
     },
 };
-export const WithIconLeft = {
-    render: () => (_jsx(Button, { icon: "\u26A1", iconPosition: "left", children: "Click me" })),
-};
-export const WithIconRight = {
-    render: () => (_jsx(Button, { icon: "\u26A1", iconPosition: "right", children: "Click me" })),
-};
-export const WithIconTop = {
-    render: () => (_jsx(Button, { icon: "\u26A1", iconPosition: "top", children: "Click me" })),
-};
-export const WithIconBottom = {
-    render: () => (_jsx(Button, { icon: "\u26A1", iconPosition: "bottom", children: "Click me" })),
+export const AllSizes = {
+    render: () => (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '12px', flexWrap: 'wrap' }, children: [_jsx(Button, { size: "xs", children: "XSmall" }), _jsx(Button, { size: "sm", children: "Small" }), _jsx(Button, { size: "default", children: "Default" }), _jsx(Button, { size: "lg", children: "Large" }), _jsx(Button, { size: "icon", "aria-label": "Icon", children: "\u26A1" })] })),
 };
-export const DisabledVariants = {
-    render: () => (_jsxs("div", { style: { display: 'flex', gap: '12px', flexWrap: 'wrap' }, children: [_jsx(Button, { variant: "primary", disabled: true, children: "Primary" }), _jsx(Button, { variant: "primaryFilled", disabled: true, children: "Primary Filled" }), _jsx(Button, { variant: "secondary", disabled: true, children: "Secondary" }), _jsx(Button, { variant: "outlined", disabled: true, children: "Outlined" }), _jsx(Button, { variant: "ghost", disabled: true, children: "Ghost" })] })),
+export const AllVariants = {
+    render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '12px', flexWrap: 'wrap' }, children: [_jsx("span", { style: { fontWeight: 'bold', marginBottom: '4px' }, children: "Primary Variants" }), _jsxs("div", { style: { display: 'flex', width: '100%', gap: '12px', flexWrap: 'wrap' }, children: [_jsx(Button, { variant: "primary", children: "Primary" }), _jsx(Button, { variant: "primaryFilled", children: "Primary Filled" }), _jsx(Button, { variant: "primaryOutlined", children: "Primary Outlined" }), _jsx(Button, { variant: "primaryText", children: "Primary Text" })] }), _jsx("span", { style: { fontWeight: 'bold', marginBottom: '4px' }, children: "Secondary Variants" }), _jsxs("div", { style: { display: 'flex', width: '100%', gap: '12px', flexWrap: 'wrap' }, children: [_jsx(Button, { variant: "secondary", children: "Secondary" }), _jsx(Button, { variant: "secondaryFilled", children: "Secondary Filled" }), _jsx(Button, { variant: "secondaryOutlined", children: "Secondary Outlined" }), _jsx(Button, { variant: "secondaryText", children: "Secondary Text" })] }), _jsx("span", { style: { fontWeight: 'bold', marginBottom: '4px' }, children: "Other Variants" }), _jsxs("div", { style: { display: 'flex', width: '100%', gap: '12px', flexWrap: 'wrap' }, children: [_jsx(Button, { variant: "outlined", children: "Outlined" }), _jsx(Button, { variant: "ghost", children: "Ghost" }), _jsx(Button, { variant: "destructive", children: "Destructive" })] })] })),
 };
-export const AllSizes = {
-    render: () => (_jsxs("div", { style: { display: 'flex', alignItems: 'start', gap: '12px', flexWrap: 'wrap' }, children: [_jsx(Button, { size: "sm", children: "Small" }), _jsx(Button, { size: "default", children: "Default" }), _jsx(Button, { size: "lg", children: "Large" }), _jsx(Button, { size: "icon", "aria-label": "Icon", children: "\u26A1" })] })),
+export const AllIconPositions = {
+    render: () => (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '12px', flexWrap: 'wrap' }, children: [_jsx(Button, { icon: _jsx(LuPlus, {}), iconPosition: "left", children: "Icon Left" }), _jsx(Button, { icon: _jsx(LuPlus, {}), iconPosition: "right", children: "Icon Right" }), _jsx(Button, { icon: _jsx(LuPlus, {}), iconPosition: "top", children: "Icon Top" }), _jsx(Button, { icon: _jsx(LuPlus, {}), iconPosition: "bottom", children: "Icon Bottom" })] })),
 };

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

@@ -1,10 +1,10 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
 import { type VariantProps } from 'class-variance-authority';
 import { type buttonVariants } from './ButtonVariants';
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
-    children?: React.ReactNode;
-    asChild?: boolean;
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    children?: ReactNode;
     loading?: boolean;
     loadingText?: string;
-    icon?: React.ReactNode;
+    icon?: ReactNode;
     iconPosition?: 'left' | 'right' | 'top' | 'bottom';
 }

package/dist/src/components/Button/ButtonVariants.d.ts

@@ -2,3 +2,6 @@ export declare const buttonVariants: (props?: ({
     variant?: "primary" | "secondary" | "primaryFilled" | "primaryOutlined" | "primaryText" | "secondaryFilled" | "secondaryOutlined" | "secondaryText" | "outlined" | "ghost" | "destructive" | null | undefined;
     size?: "default" | "sm" | "xs" | "lg" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const iconButtonPositionVariants: (props?: ({
+    iconPosition?: "left" | "right" | "top" | "bottom" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/src/components/Button/ButtonVariants.js

@@ -33,7 +33,6 @@ export const buttonVariants = cva('inline-flex cursor-pointer items-center justi
                 'focus:border-(--uikit-secondary)',
             ghost: 'bg-transparent border border-transparent text-(--uikit-textPrimary) ' +
                 'hover:bg-transparent hover:border hover:border-(--uikit-primary) ',
-            // 'focus:text-(--uikit-secondary) focus:border-(--uikit-secondary)', // to be discussed
             destructive: 'bg-(--uikit-error) text-white ' + 'hover:bg-(--uikit-error)/90 ' + 'focus:bg-(--uikit-error)',
         },
         size: {
@@ -49,3 +48,13 @@ export const buttonVariants = cva('inline-flex cursor-pointer items-center justi
         size: 'default',
     },
 });
+export const iconButtonPositionVariants = cva('flex items-center gap-2', {
+    variants: {
+        iconPosition: {
+            left: 'flex-row',
+            right: 'flex-row-reverse',
+            top: 'flex-col',
+            bottom: 'flex-col-reverse',
+        },
+    },
+});

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

@@ -1,3 +1,3 @@
 export { Button } from './Button';
-export { buttonVariants } from './ButtonVariants';
+export { buttonVariants, iconButtonPositionVariants } from './ButtonVariants';
 export type { ButtonProps } from './Button.types';

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

@@ -1,2 +1,2 @@
 export { Button } from './Button';
-export { buttonVariants } from './ButtonVariants';
+export { buttonVariants, iconButtonPositionVariants } from './ButtonVariants';

package/dist/src/components/Combobox/Combobox.js

@@ -40,7 +40,7 @@ function ComboboxCollection({ ...props }) {
     return _jsx(ComboboxPrimitive.Collection, { "data-slot": "combobox-collection", ...props });
 }
 function ComboboxEmpty({ className, showAddButton, onAddItem, addButtonText, children, ...props }) {
-    return (_jsxs(ComboboxPrimitive.Empty, { "data-slot": "combobox-empty", className: cn('flex flex-col items-center gap-2 text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex', className), ...props, children: [children, showAddButton && onAddItem && (_jsx("button", { className: "text-sm text-(--uikit-secondary-light) underline cursor-pointer hover:text-(--uikit-secondary-dark)", onClick: onAddItem, children: addButtonText || 'Add item to the list' }))] }));
+    return (_jsxs(ComboboxPrimitive.Empty, { "data-slot": "combobox-empty", className: cn('flex flex-col items-center gap-2 text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex', className), ...props, children: [children, showAddButton && onAddItem && (_jsx("button", { type: "button", className: "text-sm text-(--uikit-secondary-light) underline cursor-pointer hover:text-(--uikit-secondary-dark)", onClick: onAddItem, children: addButtonText || 'Add item to the list' }))] }));
 }
 function ComboboxSeparator({ className, ...props }) {
     return (_jsx(ComboboxPrimitive.Separator, { "data-slot": "combobox-separator", className: cn('bg-border -mx-1 my-1 h-px', className), ...props }));

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

@@ -82,6 +82,19 @@ const applyDeletionKey = (displayChars, slotPositions, template, isBackspace, st
 const formatDate = (date, format) => {
     return date ? dayjs(date).format(format) : '';
 };
+const isSameSingleDate = (a, b) => a === b || (a instanceof Date && b instanceof Date && a.getTime() === b.getTime());
+const isSameDateValue = (a, b) => {
+    if (a === b) {
+        return true;
+    }
+    if (a instanceof Date || b instanceof Date) {
+        return isSameSingleDate(a, b);
+    }
+    if (a && b) {
+        return isSameSingleDate(a.from, b.from) && isSameSingleDate(a.to, b.to);
+    }
+    return false;
+};
 const formatRangeDisplay = (dateRange, format) => {
     if (!(dateRange === null || dateRange === void 0 ? void 0 : dateRange.from)) {
         return '';
@@ -126,17 +139,20 @@ export const DatePicker = ({ mode = 'single', placeholder, dateFormat = 'DD/MM/Y
     const [prevDateFormat, setPrevDateFormat] = useState(dateFormat);
     const [prevRangeDateFormat, setPrevRangeDateFormat] = useState(effectiveRangeDateFormat);
     const [prevMode, setPrevMode] = useState(mode);
-    if (currentDate !== prevCurrentDate ||
-        dateFormat !== prevDateFormat ||
-        effectiveRangeDateFormat !== prevRangeDateFormat ||
-        mode !== prevMode) {
+    const formatOrModeChanged = dateFormat !== prevDateFormat || effectiveRangeDateFormat !== prevRangeDateFormat || mode !== prevMode;
+    if (!isSameDateValue(currentDate, prevCurrentDate) || formatOrModeChanged) {
         setPrevCurrentDate(currentDate);
         setPrevDateFormat(dateFormat);
         setPrevRangeDateFormat(effectiveRangeDateFormat);
         setPrevMode(mode);
-        setDate(currentDate);
-        setValue(computeDisplayValue(currentDate));
-        setDefaultError('');
+        // Only rewrite the display for a genuine external change. If the prop merely
+        // caught up with what the user just did (controlled round-trip), or never
+        // updates at all (uncontrolled parent), preserve the in-progress display.
+        if (formatOrModeChanged || !isSameDateValue(currentDate, date)) {
+            setDate(currentDate);
+            setValue(computeDisplayValue(currentDate));
+            setDefaultError('');
+        }
     }
     const onUpdateDate = (selected) => {
         setDate(selected);
@@ -161,7 +177,6 @@ export const DatePicker = ({ mode = 'single', placeholder, dateFormat = 'DD/MM/Y
         if (!isComplete) {
             setDate(undefined);
             setDefaultError('');
-            setPrevCurrentDate(undefined); // absorbs change → sync block won't fire
             onChangeDate === null || onChangeDate === void 0 ? void 0 : onChangeDate(undefined); // notify parent the value is gone
             return;
         }
@@ -170,7 +185,6 @@ export const DatePicker = ({ mode = 'single', placeholder, dateFormat = 'DD/MM/Y
             setDate(undefined);
             setDefaultError(showErrorWhenComplete ? 'Invalid date format' : '');
             if (showErrorWhenComplete) {
-                setPrevCurrentDate(undefined);
                 onChangeDate === null || onChangeDate === void 0 ? void 0 : onChangeDate(undefined);
             }
             return;
@@ -182,7 +196,6 @@ export const DatePicker = ({ mode = 'single', placeholder, dateFormat = 'DD/MM/Y
         }
         else {
             setDate(undefined);
-            setPrevCurrentDate(undefined);
             onChangeDate === null || onChangeDate === void 0 ? void 0 : onChangeDate(undefined);
             setDefaultError('Date is out of range');
         }

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

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof DatePicker>;
 export default meta;
 type Story = StoryObj<typeof DatePicker>;
 export declare const Default: Story;
+export declare const WithDefaultValue: Story;
 export declare const WithLabel: Story;
 export declare const WithError: Story;
 export declare const WithDateRange: Story;

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

@@ -87,6 +87,19 @@ export const Default = {
         },
     },
 };
+export const WithDefaultValue = {
+    args: {
+        label: 'Date of Birth',
+        currentDate: new Date(1990, 5, 15),
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Date picker pre-populated with a default date value.',
+            },
+        },
+    },
+};
 export const WithLabel = {
     args: {
         label: 'Select Date',

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

@@ -70,6 +70,6 @@ export const VariantSearch = {
 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" }) })),
+        endAdornment: (_jsx("button", { type: "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/Popover/Popover.stories.js

@@ -41,7 +41,7 @@ export const WithForm = {
     },
 };
 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" })] }) })] })),
+    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", { type: "button", className: "w-full text-left px-2 py-1.5 text-sm hover:bg-gray-100 rounded", children: "Edit" }), _jsx("button", { type: "button", className: "w-full text-left px-2 py-1.5 text-sm hover:bg-gray-100 rounded", children: "Duplicate" }), _jsx("button", { type: "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", { type: "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,

package/package.json

@@ -1,12 +1,16 @@
 {
 	"name": "@eml-payments/ui-kit",
-	"version": "1.8.16",
+	"version": "1.8.18",
 	"private": false,
 	"description": "ARLO UIKit",
 	"homepage": "https://github.com/EML-Payments/arlo.npm.uikit#readme",
 	"bugs": {
 		"url": "https://github.com/EML-Payments/arlo.npm.uikit/issues"
 	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/EML-Payments/arlo.npm.uikit.git"
+	},
 	"license": "MIT",
 	"author": "EML Payments",
 	"type": "commonjs",