@eml-payments/ui-kit 1.8.10 → 1.8.12

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/Combobox/Combobox.d.ts

@@ -1,28 +1,28 @@
 import * as React from 'react';
 import { Combobox as ComboboxPrimitive } from '@base-ui/react';
 declare const Combobox: typeof ComboboxPrimitive.Root;
-declare function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props): import("react/jsx-runtime").JSX.Element;
-declare function ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxValue({ ...props }: Readonly<ComboboxPrimitive.Value.Props>): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxTrigger({ className, children, ...props }: Readonly<ComboboxPrimitive.Trigger.Props>): import("react/jsx-runtime").JSX.Element;
 declare function ComboboxInput({ className, children, disabled, isLoading, showTrigger, showClear, ...props }: ComboboxPrimitive.Input.Props & {
     showTrigger?: boolean;
     showClear?: boolean;
     isLoading?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 declare function ComboboxContent({ className, side, sideOffset, align, alignOffset, anchor, ...props }: ComboboxPrimitive.Popup.Props & Pick<ComboboxPrimitive.Positioner.Props, 'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'>): import("react/jsx-runtime").JSX.Element;
-declare function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props): import("react/jsx-runtime").JSX.Element;
-declare function ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props): import("react/jsx-runtime").JSX.Element;
-declare function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props): import("react/jsx-runtime").JSX.Element;
-declare function ComboboxLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props): import("react/jsx-runtime").JSX.Element;
-declare function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxList({ className, ...props }: Readonly<ComboboxPrimitive.List.Props>): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxItem({ className, children, ...props }: Readonly<ComboboxPrimitive.Item.Props>): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxGroup({ className, ...props }: Readonly<ComboboxPrimitive.Group.Props>): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxLabel({ className, ...props }: Readonly<ComboboxPrimitive.GroupLabel.Props>): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxCollection({ ...props }: Readonly<ComboboxPrimitive.Collection.Props>): import("react/jsx-runtime").JSX.Element;
 declare function ComboboxEmpty({ className, showAddButton, onAddItem, addButtonText, children, ...props }: ComboboxPrimitive.Empty.Props & {
     showAddButton?: boolean;
     onAddItem?: () => void;
     addButtonText?: string;
 }): import("react/jsx-runtime").JSX.Element;
-declare function ComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxSeparator({ className, ...props }: Readonly<ComboboxPrimitive.Separator.Props>): import("react/jsx-runtime").JSX.Element;
 declare function ComboboxChips({ className, ...props }: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> & ComboboxPrimitive.Chips.Props): import("react/jsx-runtime").JSX.Element;
 declare function ComboboxChip({ className, children, showRemove, ...props }: ComboboxPrimitive.Chip.Props & {
     showRemove?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
-declare function ComboboxChipsInput({ className, ...props }: ComboboxPrimitive.Input.Props): import("react/jsx-runtime").JSX.Element;
+declare function ComboboxChipsInput({ className, ...props }: Readonly<ComboboxPrimitive.Input.Props>): import("react/jsx-runtime").JSX.Element;
 export { Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxGroup, ComboboxLabel, ComboboxCollection, ComboboxEmpty, ComboboxSeparator, ComboboxChips, ComboboxChip, ComboboxChipsInput, ComboboxTrigger, ComboboxValue, };

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

@@ -32,26 +32,28 @@ export const Basic = {
 export const WithClearButton = {
     render: () => (_jsxs(Combobox, { items: fruits, defaultValue: fruits[0], children: [_jsx(ComboboxInput, { placeholder: "Select a fruit", showClear: true }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: "No fruits found." }), _jsx(ComboboxList, { children: (item) => (_jsx(ComboboxItem, { value: item, children: item }, item)) })] })] })),
 };
+function WithAddButtonStory() {
+    const [value, setValue] = useState(null);
+    const [items, setItems] = useState(fruits);
+    const handleChangeValue = (newValue) => {
+        if (newValue === '') {
+            setValue(null);
+            return;
+        }
+        setValue(newValue);
+    };
+    return (_jsxs(Combobox, { items: items, value: value, onInputValueChange: handleChangeValue, children: [_jsx(ComboboxInput, { placeholder: "Select a fruit", showClear: true }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { showAddButton: true, onAddItem: () => setItems((prev) => [...prev, value !== null && value !== void 0 ? value : '']), addButtonText: `Add "${value}" to the list`, children: "No fruits found" }), _jsx(ComboboxList, { children: (item) => (_jsx(ComboboxItem, { value: item, children: item }, item)) })] })] }));
+}
 export const WithAddButton = {
-    render: () => {
-        const [value, onChangeValue] = useState(null);
-        const [items, setItems] = useState(fruits);
-        const handleChangeValue = (newValue) => {
-            if (newValue === '') {
-                onChangeValue(null);
-                return;
-            }
-            onChangeValue(newValue);
-        };
-        return (_jsxs(Combobox, { items: items, value: value, onInputValueChange: handleChangeValue, children: [_jsx(ComboboxInput, { placeholder: "Select a fruit", showClear: true }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { showAddButton: true, onAddItem: () => setItems((prev) => [...prev, value !== null && value !== void 0 ? value : '']), addButtonText: `Add "${value}" to the list`, children: "No fruits found" }), _jsx(ComboboxList, { children: (item) => (_jsx(ComboboxItem, { value: item, children: item }, item)) })] })] }));
-    },
+    render: () => _jsx(WithAddButtonStory, {}),
 };
+function MultiSelectStory() {
+    const [value, setValue] = useState([]);
+    const anchor = useComboboxAnchor();
+    return (_jsxs(Combobox, { items: fruits, multiple: true, value: value, onValueChange: setValue, children: [_jsxs(ComboboxChips, { ref: anchor, children: [_jsx(ComboboxValue, { children: value.map((item) => (_jsx(ComboboxChip, { children: item }, item))) }), _jsx(ComboboxChipsInput, { placeholder: "Add fruit" })] }), _jsxs(ComboboxContent, { anchor: anchor, children: [_jsx(ComboboxEmpty, { children: "No fruits found" }), _jsx(ComboboxList, { children: (fruit) => (_jsx(ComboboxItem, { value: fruit, children: fruit }, fruit)) })] })] }));
+}
 export const MultiSelect = {
-    render: () => {
-        const [value, setValue] = useState([]);
-        const anchor = useComboboxAnchor();
-        return (_jsxs(Combobox, { items: fruits, multiple: true, value: value, onValueChange: setValue, children: [_jsxs(ComboboxChips, { ref: anchor, children: [_jsx(ComboboxValue, { children: value.map((item) => (_jsx(ComboboxChip, { children: item }, item))) }), _jsx(ComboboxChipsInput, { placeholder: "Add fruit" })] }), _jsxs(ComboboxContent, { anchor: anchor, children: [_jsx(ComboboxEmpty, { children: "No fruits found" }), _jsx(ComboboxList, { children: (fruit) => (_jsx(ComboboxItem, { value: fruit, children: fruit }, fruit)) })] })] }));
-    },
+    render: () => _jsx(MultiSelectStory, {}),
 };
 export const WithGroups = {
     render: () => {

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

@@ -1,6 +1,8 @@
 import { type FC } from 'react';
+export type CreditCardSize = 'sm' | 'md' | 'lg';
 export interface CreditCardProps {
     imageUrl: string;
     isBlocked: boolean;
+    size?: CreditCardSize;
 }
 export declare const CreditCard: FC<CreditCardProps>;

package/dist/src/components/CreditCard/CreditCard.js

@@ -1,10 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable react-hooks/set-state-in-effect */
 import { useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import creditCardFrost from '../../assets/credit-card-frost.png';
 import { BrokenGlassEffect } from './BrokenGlassEffect';
-export const CreditCard = ({ imageUrl, isBlocked }) => {
+const sizeClasses = {
+    sm: 'w-full max-w-[118px]',
+    md: 'w-full max-w-[236px]',
+    lg: 'w-full max-w-[380px]',
+};
+export const CreditCard = ({ imageUrl, isBlocked, size = 'sm' }) => {
     const [isUnfreezing, setIsUnfreezing] = useState(false);
     const prevBlockedRef = useRef(isBlocked);
     useEffect(() => {
@@ -12,7 +16,7 @@ export const CreditCard = ({ imageUrl, isBlocked }) => {
         prevBlockedRef.current = isBlocked;
         setIsUnfreezing(wasBlocked && !isBlocked);
     }, [isBlocked]);
-    return (_jsxs("div", { className: "relative min-w-[118px] h-[75px] overflow-hidden rounded-[10px] shadow-(--shadow-eml)", children: [_jsx("img", { src: imageUrl, alt: "User credit card", className: clsx('w-full h-full object-cover rounded-[10px] shadow-(--shadow-eml)', 'transition-all duration-700 ease-in-out', { 'filter brightness-70 contrast-110 saturate-75': isBlocked && !isUnfreezing }) }), isBlocked && !isUnfreezing && (_jsx("div", { className: "absolute inset-0 rounded-[10px] transition-all duration-700 ease-out bg-cover bg-center opacity-80", style: {
+    return (_jsxs("div", { className: clsx('relative overflow-hidden rounded-[10px] shadow-(--shadow-eml)', sizeClasses[size]), children: [_jsx("img", { src: imageUrl, alt: "User credit card", className: clsx('w-full h-full object-cover rounded-[10px] shadow-(--shadow-eml)', 'transition-all duration-700 ease-in-out', { 'filter brightness-70 contrast-110 saturate-75': isBlocked && !isUnfreezing }) }), isBlocked && !isUnfreezing && (_jsx("div", { className: "absolute inset-0 rounded-[10px] transition-all duration-700 ease-out bg-cover bg-center opacity-80", style: {
                     backgroundImage: `url(${creditCardFrost})`,
                     zIndex: 15,
                     mixBlendMode: 'overlay',

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

@@ -4,5 +4,6 @@ declare const meta: Meta<typeof CreditCard>;
 export default meta;
 type Story = StoryObj<typeof CreditCard>;
 export declare const Default: Story;
+export declare const AllSizes: Story;
 export declare const Blocked: Story;
 export declare const ControlledTransition: Story;

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

@@ -10,18 +10,28 @@ const meta = {
     args: {
         imageUrl: creditCardFront,
         isBlocked: false,
+        size: 'sm',
     },
     argTypes: {
         imageUrl: { control: 'text' },
         isBlocked: { control: 'boolean' },
+        size: {
+            control: 'select',
+            options: ['sm', 'md', 'lg'],
+            description: 'Card size variant',
+            table: {
+                defaultValue: { summary: 'sm' },
+            },
+        },
     },
 };
 export default meta;
-export const Default = {
-    render: () => (_jsx("div", { className: "flex flex-col items-center gap-4 min-w-[118px] h-[75px]", children: _jsx(CreditCard, { imageUrl: creditCardFront, isBlocked: false }) })),
+export const Default = {};
+export const AllSizes = {
+    render: () => (_jsxs("div", { className: "flex flex-col items-start gap-6 p-4", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-xs text-gray-500 font-medium", children: "Small (max 118px)" }), _jsx(CreditCard, { imageUrl: creditCardFront, isBlocked: false, size: "sm" })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-xs text-gray-500 font-medium", children: "Medium (max 236px)" }), _jsx(CreditCard, { imageUrl: creditCardFront, isBlocked: false, size: "md" })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-xs text-gray-500 font-medium", children: "Large (max 380px)" }), _jsx(CreditCard, { imageUrl: creditCardFront, isBlocked: false, size: "lg" })] })] })),
 };
 export const Blocked = {
-    render: () => (_jsx("div", { className: "flex flex-col items-center gap-4 min-w-[118px] h-[75px]", children: _jsx(CreditCard, { imageUrl: creditCardFront, isBlocked: true }) })),
+    render: () => (_jsxs("div", { className: "flex flex-col items-start gap-6 p-4", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-xs text-gray-500 font-medium", children: "Small (max 118px)" }), _jsx(CreditCard, { imageUrl: creditCardFront, isBlocked: true, size: "sm" })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-xs text-gray-500 font-medium", children: "Medium (max 236px)" }), _jsx(CreditCard, { imageUrl: creditCardFront, isBlocked: true, size: "md" })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-xs text-gray-500 font-medium", children: "Large (max 380px)" }), _jsx(CreditCard, { imageUrl: creditCardFront, isBlocked: true, size: "lg" })] })] })),
 };
 function ControlledTransitionExample() {
     const [isBlocked, setIsBlocked] = useState(true);

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

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
-declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
-declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
-declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
-declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+declare function Dialog({ ...props }: Readonly<React.ComponentProps<typeof DialogPrimitive.Root>>): import("react/jsx-runtime").JSX.Element;
+declare function DialogTrigger({ ...props }: Readonly<React.ComponentProps<typeof DialogPrimitive.Trigger>>): import("react/jsx-runtime").JSX.Element;
+declare function DialogPortal({ ...props }: Readonly<React.ComponentProps<typeof DialogPrimitive.Portal>>): import("react/jsx-runtime").JSX.Element;
+declare function DialogClose({ ...props }: Readonly<React.ComponentProps<typeof DialogPrimitive.Close>>): import("react/jsx-runtime").JSX.Element;
+declare function DialogOverlay({ className, ...props }: Readonly<React.ComponentProps<typeof DialogPrimitive.Overlay>>): import("react/jsx-runtime").JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, ...props }: Readonly<React.ComponentProps<typeof DialogPrimitive.Content> & {
     showCloseButton?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
-declare function DialogHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-declare function DialogFooter({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
-declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
-declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+}>): import("react/jsx-runtime").JSX.Element;
+declare function DialogHeader({ className, ...props }: Readonly<React.ComponentProps<'div'>>): import("react/jsx-runtime").JSX.Element;
+declare function DialogFooter({ className, ...props }: Readonly<React.ComponentProps<'div'>>): import("react/jsx-runtime").JSX.Element;
+declare function DialogTitle({ className, ...props }: Readonly<React.ComponentProps<typeof DialogPrimitive.Title>>): import("react/jsx-runtime").JSX.Element;
+declare function DialogDescription({ className, ...props }: Readonly<React.ComponentProps<typeof DialogPrimitive.Description>>): import("react/jsx-runtime").JSX.Element;
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/src/components/Dialog/Dialog.js

@@ -19,7 +19,7 @@ function DialogOverlay({ className, ...props }) {
     return (_jsx(DialogPrimitive.Overlay, { "data-slot": "dialog-overlay", className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50', className), ...props }));
 }
 function DialogContent({ className, children, showCloseButton = true, ...props }) {
-    return (_jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", className: cn('bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg focus:outline-none focus:ring-0 focus:ring-offset-0', className), ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", children: [_jsx(FiX, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
+    return (_jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", className: cn('bg-background 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 fixed inset-0 z-50 grid w-full gap-4 border p-6 shadow-lg duration-200 overflow-y-auto focus:outline-none focus:ring-0 focus:ring-offset-0 sm:inset-auto sm:top-[50%] sm:left-[50%] sm:max-w-lg sm:h-auto sm:max-h-[calc(100vh-2rem)] sm:translate-x-[-50%] sm:translate-y-[-50%] sm:rounded-lg sm:overflow-visible', className), ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", children: [_jsx(FiX, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
 }
 function DialogHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "dialog-header", className: cn('flex flex-col gap-2 text-center sm:text-left', className), ...props }));

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

@@ -6,3 +6,4 @@ type Story = StoryObj;
 export declare const BasicDialog: Story;
 export declare const WithoutCloseButton: Story;
 export declare const DialogWithCustomContent: Story;
+export declare const MobileView: Story;

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

@@ -17,3 +17,9 @@ export const WithoutCloseButton = {
 export const DialogWithCustomContent = {
     render: () => (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Custom Content" }) }), _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Profile Info" }), _jsx(DialogDescription, { children: "This dialog contains structured UI elements." })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Input, { placeholder: "Name", defaultValue: "Jane Doe" }), _jsx(Input, { type: "email", placeholder: "Email", defaultValue: "jane@example.com" })] }), _jsxs(DialogFooter, { children: [_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "ghost", children: "Cancel" }) }), _jsx(Button, { children: "Save" })] })] })] })),
 };
+export const MobileView = {
+    globals: {
+        viewport: { value: 'mobile' },
+    },
+    render: () => (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open dialog" }) }), _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Mobile Dialog" }), _jsx(DialogDescription, { children: "This dialog is full screen on mobile devices." })] }), _jsx("p", { children: "Resize the viewport to see the responsive behaviour." }), _jsxs(DialogFooter, { children: [_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "ghost", children: "Cancel" }) }), _jsx(Button, { children: "Confirm" })] })] })] })),
+};

package/dist/src/components/InputGroup/InputGroup.js

@@ -22,12 +22,12 @@ const inputGroupAddonVariants = cva("text-muted-foreground h-auto gap-2 py-1.5 t
     },
 });
 function InputGroupAddon({ className, align = 'inline-start', ...props }) {
-    return (_jsx("div", { role: "group", "data-slot": "input-group-addon", "data-align": align, className: cn(inputGroupAddonVariants({ align }), className), onClick: (e) => {
+    return (_jsx("div", { role: "presentation", "data-slot": "input-group-addon", "data-align": align, className: cn(inputGroupAddonVariants({ align }), className), onClick: (e) => {
             var _a, _b;
             if (e.target.closest('button')) {
                 return;
             }
-            (_b = (_a = e.currentTarget.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.focus();
+            (_b = (_a = e.currentTarget.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('[data-slot="input-group-control"]')) === null || _b === void 0 ? void 0 : _b.focus();
         }, ...props }));
 }
 const inputGroupButtonVariants = cva('gap-2 text-sm flex items-center shadow-none', {

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

@@ -39,11 +39,12 @@ export const WithInlineStartButton = {
 export const WithInlineEndButton = {
     render: () => (_jsxs(InputGroup, { children: [_jsx(InputGroupInput, { placeholder: "Enter text..." }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", children: _jsx(XIcon, {}) }) })] })),
 };
+function WithPasswordStory() {
+    const [showPassword, setShowPassword] = useState(false);
+    return (_jsxs(InputGroup, { children: [_jsx(InputGroupInput, { type: showPassword ? 'text' : 'password', placeholder: "Enter password..." }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", onClick: () => setShowPassword((prev) => !prev), children: showPassword ? _jsx(EyeOffIcon, {}) : _jsx(EyeIcon, {}) }) })] }));
+}
 export const WithPassword = {
-    render: () => {
-        const [showPassword, setShowPassword] = useState(false);
-        return (_jsxs(InputGroup, { children: [_jsx(InputGroupInput, { type: showPassword ? 'text' : 'password', placeholder: "Enter password..." }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", onClick: () => setShowPassword(!showPassword), children: showPassword ? _jsx(EyeOffIcon, {}) : _jsx(EyeIcon, {}) }) })] }));
-    },
+    render: () => _jsx(WithPasswordStory, {}),
 };
 export const WithMultipleButtons = {
     render: () => (_jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { align: "inline-start", children: _jsx(InputGroupButton, { size: "xs", children: "Copy" }) }), _jsx(InputGroupInput, { placeholder: "Enter value..." }), _jsxs(InputGroupAddon, { align: "inline-end", children: [_jsx(InputGroupButton, { size: "xs", variant: "primary", children: "Save" }), _jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", children: _jsx(XIcon, {}) })] })] })),

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

@@ -22,7 +22,6 @@ export * from './Ellipsis';
 export * from './Tabs';
 export * from './Avatar';
 export * from './Spinner';
-export * from './UICreditCard';
 export * from './CopyButton';
 export * from './Stepper';
 export * from './Skeleton';

package/dist/src/components/index.js

@@ -22,7 +22,6 @@ export * from './Ellipsis';
 export * from './Tabs';
 export * from './Avatar';
 export * from './Spinner';
-export * from './UICreditCard';
 export * from './CopyButton';
 export * from './Stepper';
 export * from './Skeleton';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eml-payments/ui-kit",
-	"version": "1.8.10",
+	"version": "1.8.12",
 	"private": false,
 	"description": "ARLO UIKit",
 	"homepage": "https://github.com/EML-Payments/arlo.npm.uikit#readme",