@eml-payments/ui-kit 1.5.2 → 1.5.4

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

@@ -21,7 +21,7 @@ const ControlledLengthIndicator = (args) => {
 export const Text = {
     args: { type: 'text', placeholder: 'Enter text...' },
 };
-export const Number = {
+export const NumberInput = {
     args: { type: 'number', placeholder: 'Enter number...' },
 };
 export const WithValue = {
@@ -36,9 +36,16 @@ export const PasswordInput = {
 export const WithHelperText = {
     args: { helperText: 'This is a helper text', placeholder: 'Enter text...' },
 };
-export const WithTextLengthIndicator = {
+export const WithControlledLengthIndicator = {
     render: (args) => _jsx(ControlledLengthIndicator, { ...args }),
 };
+export const WithMaxLengthIndicator = {
+    args: {
+        maxLength: 50,
+        helperText: 'This is a helper text',
+        placeholder: 'Type here to see counter...',
+    },
+};
 export const Disabled = {
     args: { disabled: true, placeholder: 'Disabled input' },
 };

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { Button } from '../../components/Button';
+declare function InputGroup({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare const inputGroupAddonVariants: (props?: ({
+    align?: "block-end" | "block-start" | "inline-end" | "inline-start" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>): import("react/jsx-runtime").JSX.Element;
+declare const inputGroupButtonVariants: (props?: ({
+    size?: "sm" | "xs" | "icon-xs" | "icon-sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, 'size'> & VariantProps<typeof inputGroupButtonVariants>): import("react/jsx-runtime").JSX.Element;
+declare function InputGroupText({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+declare function InputGroupInput({ className, ...props }: React.ComponentProps<'input'>): import("react/jsx-runtime").JSX.Element;
+declare function InputGroupTextarea({ className, ...props }: React.ComponentProps<'textarea'>): import("react/jsx-runtime").JSX.Element;
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea };

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

@@ -0,0 +1,58 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+import { Button } from '../../components/Button';
+import { Input } from '../../components/Input';
+import { Textarea } from '../../components/Textarea';
+function InputGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "input-group", role: "group", className: cn('border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto', className), ...props }));
+}
+const inputGroupAddonVariants = cva("text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none", {
+    variants: {
+        align: {
+            'inline-start': 'pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first',
+            'inline-end': 'pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last',
+            'block-start': 'px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start',
+            'block-end': 'px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start',
+        },
+    },
+    defaultVariants: {
+        align: 'inline-start',
+    },
+});
+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) => {
+            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();
+        }, ...props }));
+}
+const inputGroupButtonVariants = cva('gap-2 text-sm flex items-center shadow-none', {
+    variants: {
+        size: {
+            xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+            sm: '',
+            'icon-xs': 'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',
+            'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
+        },
+    },
+    defaultVariants: {
+        size: 'xs',
+    },
+});
+function InputGroupButton({ className, type = 'button', variant = 'ghost', size = 'xs', ...props }) {
+    return (_jsx(Button, { type: type, "data-size": size, variant: variant, className: cn(inputGroupButtonVariants({ size }), className), ...props }));
+}
+function InputGroupText({ className, ...props }) {
+    return (_jsx("span", { className: cn("text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none", className), ...props }));
+}
+function InputGroupInput({ className, ...props }) {
+    return (_jsx(Input, { "data-slot": "input-group-control", className: cn('rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1', className), ...props }));
+}
+function InputGroupTextarea({ className, ...props }) {
+    return (_jsx(Textarea, { "data-slot": "input-group-control", className: cn('rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none', className), ...props }));
+}
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea };

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

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { InputGroup } from './InputGroup';
+declare const meta: Meta<typeof InputGroup>;
+export default meta;
+type Story = StoryObj<typeof InputGroup>;
+export declare const Basic: Story;
+export declare const WithInlineStartAddon: Story;
+export declare const WithInlineEndAddon: Story;
+export declare const WithBothInlineAddons: Story;
+export declare const WithBlockStartAddon: Story;
+export declare const WithBlockEndAddon: Story;
+export declare const WithInlineStartButton: Story;
+export declare const WithInlineEndButton: Story;
+export declare const WithPassword: Story;
+export declare const WithMultipleButtons: Story;
+export declare const WithTextAndIcon: Story;
+export declare const WithTextarea: Story;
+export declare const Disabled: Story;
+export declare const Invalid: Story;

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

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SearchIcon, CalendarIcon, UserIcon, MailIcon, XIcon, EyeIcon, EyeOffIcon } from 'lucide-react';
+import { useState } from 'react';
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, } from './InputGroup';
+const meta = {
+    title: 'UIKit/InputGroup',
+    component: InputGroup,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'A versatile input group component that allows combining inputs with addons, buttons, and text.',
+            },
+        },
+    },
+};
+export default meta;
+export const Basic = {
+    render: () => (_jsx(InputGroup, { children: _jsx(InputGroupInput, { placeholder: "Enter text..." }) })),
+};
+export const WithInlineStartAddon = {
+    render: () => (_jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { align: "inline-start", children: _jsx(SearchIcon, {}) }), _jsx(InputGroupInput, { placeholder: "Search..." })] })),
+};
+export const WithInlineEndAddon = {
+    render: () => (_jsxs(InputGroup, { children: [_jsx(InputGroupInput, { placeholder: "Enter email..." }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(MailIcon, {}) })] })),
+};
+export const WithBothInlineAddons = {
+    render: () => (_jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { align: "inline-start", children: _jsx(UserIcon, {}) }), _jsx(InputGroupInput, { placeholder: "Username" }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx("span", { className: "text-xs", children: "@domain.com" }) })] })),
+};
+export const WithBlockStartAddon = {
+    render: () => (_jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { align: "block-start", children: _jsx(InputGroupText, { children: "Email Address" }) }), _jsx(InputGroupInput, { placeholder: "john@example.com" })] })),
+};
+export const WithBlockEndAddon = {
+    render: () => (_jsxs(InputGroup, { children: [_jsx(InputGroupInput, { placeholder: "Enter your message..." }), _jsx(InputGroupAddon, { align: "block-end", children: _jsx(InputGroupText, { children: "Additional information" }) })] })),
+};
+export const WithInlineStartButton = {
+    render: () => (_jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { align: "inline-start", children: _jsx(InputGroupButton, { size: "icon-xs", children: _jsx(SearchIcon, {}) }) }), _jsx(InputGroupInput, { placeholder: "Search..." })] })),
+};
+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, {}) }) })] })),
+};
+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, {}) }) })] }));
+    },
+};
+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, {}) })] })] })),
+};
+export const WithTextAndIcon = {
+    render: () => (_jsxs(InputGroup, { children: [_jsxs(InputGroupAddon, { align: "inline-start", children: [_jsx(CalendarIcon, {}), _jsx(InputGroupText, { children: "Date" })] }), _jsx(InputGroupInput, { placeholder: "Select date..." })] })),
+};
+export const WithTextarea = {
+    render: () => (_jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { align: "block-start", children: _jsx(InputGroupText, { children: "Description" }) }), _jsx(InputGroupTextarea, { placeholder: "Enter your description...", rows: 4 }), _jsx(InputGroupAddon, { align: "block-end", children: _jsx(InputGroupText, { children: "Max 500 characters" }) })] })),
+};
+export const Disabled = {
+    render: () => (_jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { align: "inline-start", children: _jsx(UserIcon, {}) }), _jsx(InputGroupInput, { placeholder: "Disabled input...", disabled: true }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { size: "icon-xs", disabled: true, children: _jsx(XIcon, {}) }) })] })),
+};
+export const Invalid = {
+    render: () => (_jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { align: "inline-start", children: _jsx(MailIcon, {}) }), _jsx(InputGroupInput, { placeholder: "Enter email...", "aria-invalid": "true", defaultValue: "Invalid email" })] })),
+};

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

@@ -0,0 +1 @@
+export * from './InputGroup';

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

@@ -0,0 +1 @@
+export * from './InputGroup';

package/dist/src/components/Select/Select.js

@@ -116,7 +116,7 @@ const SelectContent = React.forwardRef(({ className, children, position = 'poppe
     const filteredItemsCount = React.useMemo(() => {
         return countSelectItems(filteredChildren);
     }, [filteredChildren]);
-    const noResultsContent = (_jsxs("div", { className: "px-2 py-1.5 flex flex-col items-start gap-1", children: [_jsx("span", { className: "text-xs text-muted-foreground", children: noResultsText }), noResultsButtonText && onNoResultsButtonClick && (_jsx(Button, { variant: "primaryText", onMouseDown: (event) => event.preventDefault(), onClick: onNoResultsButtonClick, className: "h-auto p-0 text-sm", children: noResultsButtonText }))] }));
+    const noResultsContent = (_jsxs("div", { className: "px-2 py-1.5 flex flex-col items-start gap-1", children: [_jsx("span", { className: "text-xs text-muted-foreground", children: noResultsText }), noResultsButtonText && onNoResultsButtonClick && (_jsx(Button, { variant: "secondaryText", onMouseDown: (event) => event.preventDefault(), onClick: onNoResultsButtonClick, className: "h-auto p-0 text-sm", children: noResultsButtonText }))] }));
     return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { ref: ref, className: cn('relative z-50 max-h-(--radix-select-content-available-height) min-w-32 overflow-y-auto overflow-x-hidden rounded-(--uikit-radius) border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-select-content-transform-origin)', position === 'popper' &&
                 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), position: position, onCloseAutoFocus: () => {
                 if (shouldShowSearch) {

package/dist/src/components/Stepper/Stepper.js

@@ -19,7 +19,7 @@ export function Stepper({ steps, currentStep, onStepChange, contentProps, classN
                                     onStepChange === null || onStepChange === void 0 ? void 0 : onStepChange(step.id);
                                 }, children: [_jsx("div", { className: cn('w-9 h-9 rounded-full flex items-center justify-center', isPastStep && 'bg-(--uikit-success)/10 text-(--uikit-success)', isActive &&
                                             !isPastStep &&
-                                            'bg-(--uikit-primary)/10 text-[var(--uikit-primary)]', !isPastStep && !isActive && 'bg-muted/50 text-muted-foreground'), children: isPastStep ? _jsx(Check, { size: 16, strokeWidth: 3 }) : ((_a = step.icon) !== null && _a !== void 0 ? _a : index + 1) }), _jsx("span", { className: cn('text-sm font-normal not-italic', isPastStep && 'text-(--uikit-success)', isActive && 'text-[var(--uikit-primary)]', !isPastStep && !isActive && 'text-muted-foreground'), children: step.label })] }), index < steps.length - 1 && (_jsx("div", { className: cn(isVertical ? 'w-[3px] h-14 my-2' : 'h-[3px] flex-1 mx-3 mt-4', isPastStep ? 'bg-(--uikit-success)' : 'bg-muted') }))] }, step.id));
+                                            'bg-(--uikit-secondary)/10 text-[var(--uikit-secondary)]', !isPastStep && !isActive && 'bg-muted/50 text-muted-foreground'), children: isPastStep ? _jsx(Check, { size: 16, strokeWidth: 3 }) : ((_a = step.icon) !== null && _a !== void 0 ? _a : index + 1) }), _jsx("span", { className: cn('text-sm font-normal not-italic', isPastStep && 'text-(--uikit-success)', isActive && 'text-[var(--uikit-secondary)]', !isPastStep && !isActive && 'text-muted-foreground'), children: step.label })] }), index < steps.length - 1 && (_jsx("div", { className: cn(isVertical ? 'w-[3px] h-14 my-2' : 'h-[3px] flex-1 mx-3 mt-4', isPastStep ? 'bg-(--uikit-success)' : 'bg-muted') }))] }, step.id));
                 }) })), _jsx("div", { className: "flex-1", children: (() => {
                     if (React.isValidElement(currentContent)) {
                         return currentContent;

package/dist/src/components/Table/StandardTable/StandardTable.stories.js

@@ -56,7 +56,11 @@ export const EmptyState = {
     render: () => (_jsx(StandardTable, { id: "empty-table", data: [], columns: columns, customNoRows: { message: 'No users found' }, paginationMode: "client" })),
 };
 export const EmptyStateWithIcon = {
-    render: () => (_jsx(StandardTable, { id: "empty-table-with-icon", data: [], columns: columns, paginationMode: "none", customNoRows: { message: 'No transactions', icon: _jsx(MdReceiptLong, { size: 56 }), messageClassName: 'text-xl font-bold' } })),
+    render: () => (_jsx(StandardTable, { id: "empty-table-with-icon", data: [], columns: columns, paginationMode: "none", customNoRows: {
+            message: 'No transactions',
+            icon: _jsx(MdReceiptLong, { size: 56 }),
+            messageClassName: 'text-xl font-bold',
+        } })),
 };
 export const Loading = {
     render: () => _jsx(StandardTable, { id: "loading-table", data: [], columns: columns, isLoading: true, paginationMode: "client" }),

package/dist/src/components/Table/hooks/useInfiniteScrolling.js

@@ -24,6 +24,7 @@ export function useInfiniteScrolling(params) {
         count: allRows.length + (isInfinite && hasNextPage ? 1 : 0),
         getScrollElement: () => parentScrollRef.current,
         estimateSize: () => { var _a; return (_a = virtualization === null || virtualization === void 0 ? void 0 : virtualization.rowEstimate) !== null && _a !== void 0 ? _a : 48; },
+        measureElement: (el) => { var _a; return (_a = el === null || el === void 0 ? void 0 : el.getBoundingClientRect().height) !== null && _a !== void 0 ? _a : 48; },
         overscan: (_a = virtualization === null || virtualization === void 0 ? void 0 : virtualization.overscan) !== null && _a !== void 0 ? _a : 6,
     });
     const loadLockRef = useRef(false);

package/dist/src/components/Table/hooks/useTableController.js

@@ -1,4 +1,4 @@
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useReactTable, getCoreRowModel, getSortedRowModel, getPaginationRowModel, getGroupedRowModel, getExpandedRowModel, } from '@tanstack/react-table';
 import { applyFlexSizes, getCheckboxSelectionColumn } from '../table.helpers';
 import { usePaginationController } from './usePaginationController';
@@ -12,17 +12,7 @@ export function useTableController({ id, height, data, columns, checkboxSelectio
     const columnVisibility = useMemo(() => {
         return Object.fromEntries(stableGrouping.map((columnId) => [columnId, false]));
     }, [stableGrouping]);
-    const [containerWidth, setContainerWidth] = useState(0);
-    useLayoutEffect(() => {
-        if (!parentScrollRef.current)
-            return;
-        const ro = new ResizeObserver(([entry]) => {
-            setContainerWidth(entry.contentRect.width);
-        });
-        ro.observe(parentScrollRef.current);
-        return () => ro.disconnect();
-    }, []);
-    const [tableColumns, setTableColumns] = useState(() => applyFlexSizes(columns !== null && columns !== void 0 ? columns : [], containerWidth, !!(virtualization === null || virtualization === void 0 ? void 0 : virtualization.enabled)));
+    const [tableColumns, setTableColumns] = useState(() => applyFlexSizes(columns !== null && columns !== void 0 ? columns : []));
     const [internalSorting, setInternalSorting] = useState(sorting !== null && sorting !== void 0 ? sorting : []);
     const [internalRowSelection, setInternalRowSelection] = useState(() => {
         if (selectedRowIds) {
@@ -108,7 +98,7 @@ export function useTableController({ id, height, data, columns, checkboxSelectio
         return checkboxSelection ? getCheckboxSelectionColumn(table) : null;
     }, [checkboxSelection, table]);
     useEffect(() => {
-        const normalized = applyFlexSizes(columns !== null && columns !== void 0 ? columns : [], containerWidth, !!(virtualization === null || virtualization === void 0 ? void 0 : virtualization.enabled));
+        const normalized = applyFlexSizes(columns !== null && columns !== void 0 ? columns : []);
         let finalColumns;
         if (checkboxSelection && selectionColumn) {
             if (checkboxPosition === 'start') {
@@ -125,7 +115,7 @@ export function useTableController({ id, height, data, columns, checkboxSelectio
             finalColumns = normalized;
         }
         setTableColumns(finalColumns);
-    }, [columns, checkboxSelection, checkboxPosition, containerWidth, virtualization === null || virtualization === void 0 ? void 0 : virtualization.enabled]);
+    }, [columns, checkboxSelection, checkboxPosition]);
     return {
         table,
         height,

package/dist/src/components/Textarea/Textarea.js

@@ -2,20 +2,25 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { cn } from '../../lib/utils';
 import { useUIKitTheme } from '../../context/useUIKitTheme';
-export const Textarea = React.forwardRef(({ label, error, helperText, className, maxLength, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, ...props }, ref) => {
-    var _a, _b;
+export const Textarea = React.forwardRef(({ label, error, helperText, className, value, defaultValue, onChange, maxLength, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, ...props }, ref) => {
+    var _a;
     const theme = useUIKitTheme();
     const generatedId = React.useId();
     const textareaId = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
     const isInvalid = Boolean(error) || (ariaInvalid !== undefined && ariaInvalid !== false && ariaInvalid !== 'false');
-    const isControlled = props.value !== undefined;
-    const currentValue = isControlled ? String((_b = props.value) !== null && _b !== void 0 ? _b : '') : '';
-    const currentLength = currentValue.length;
-    const showLengthIndicator = isControlled && typeof maxLength === 'number' && !error;
+    const isControlled = value !== undefined;
+    const [uncontrolledLength, setUncontrolledLength] = React.useState(() => String(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '').length);
+    const currentLength = isControlled ? String(value !== null && value !== void 0 ? value : '').length : uncontrolledLength;
+    const showLengthIndicator = typeof maxLength === 'number' && !error;
     const showHelperRow = !error && (helperText || showLengthIndicator);
     const errorId = error ? `${textareaId}-error` : undefined;
     const helperId = showHelperRow ? `${textareaId}-helper` : undefined;
     const describedBy = [ariaDescribedBy, errorId, helperId].filter(Boolean).join(' ') || undefined;
-    return (_jsxs("div", { className: cn(className), children: [label && (_jsx("label", { htmlFor: textareaId, className: "text-sm font-medium text-foreground", children: label })), _jsx("textarea", { id: textareaId, "aria-invalid": isInvalid, "aria-describedby": describedBy, maxLength: maxLength, style: { fontFamily: theme.fontFamily }, className: cn('flex min-h-[80px] 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 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) aria-invalid:border-(--uikit-error) aria-invalid:focus-visible:ring-(--uikit-error)'), ref: ref, ...props }), error && (_jsx("p", { id: errorId, className: "text-sm font-medium text-error", children: error })), showHelperRow && (_jsxs("div", { id: helperId, className: "mt-1 flex items-center justify-between gap-2", children: [helperText ? _jsx("p", { className: "text-sm font-medium text-foreground", children: helperText }) : _jsx("span", {}), showLengthIndicator && (_jsxs("span", { className: "text-sm font-medium text-foreground", children: [currentLength, "/", maxLength] }))] }))] }));
+    return (_jsxs("div", { className: cn(className), children: [label && (_jsx("label", { htmlFor: textareaId, className: "text-xs font-normal text-muted-foreground", children: label })), _jsx("textarea", { id: textareaId, "aria-invalid": isInvalid, "aria-describedby": describedBy, value: value, defaultValue: defaultValue, onChange: (event) => {
+                    if (!isControlled) {
+                        setUncontrolledLength(event.target.value.length);
+                    }
+                    onChange === null || onChange === void 0 ? void 0 : onChange(event);
+                }, maxLength: maxLength, style: { fontFamily: theme.fontFamily }, className: cn('flex min-h-[80px] 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 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) aria-invalid:border-(--uikit-error) aria-invalid:focus-visible:ring-(--uikit-error)'), ref: ref, ...props }), error && (_jsx("p", { id: errorId, className: "text-sm font-medium text-error", children: error })), showHelperRow && (_jsxs("div", { id: helperId, className: "mt-1 flex items-center justify-between gap-2", children: [helperText ? (_jsx("p", { className: "text-xs font-normal text-muted-foreground", children: helperText })) : (_jsx("span", {})), showLengthIndicator && (_jsxs("span", { className: "text-xs font-normal text-muted-foreground", children: [currentLength, "/", maxLength] }))] }))] }));
 });
 Textarea.displayName = 'Textarea';

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

@@ -5,6 +5,7 @@ export default meta;
 type Story = StoryObj<TextareaProps>;
 export declare const Default: Story;
 export declare const WithHelperText: Story;
-export declare const WithTextLengthIndicator: Story;
+export declare const WithMaxLengthIndicator: Story;
+export declare const WithMaxLengthIndicatorControlled: Story;
 export declare const WithError: Story;
 export declare const Disabled: Story;

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

@@ -21,12 +21,16 @@ export const WithHelperText = {
         helperText: 'This is a helper text',
     },
 };
-export const WithTextLengthIndicator = {
-    render: (args) => _jsx(ControlledLengthIndicator, { ...args }),
+export const WithMaxLengthIndicator = {
     args: {
+        maxLength: 50,
         helperText: 'This is a helper text',
+        placeholder: 'Type here to see counter...',
     },
 };
+export const WithMaxLengthIndicatorControlled = {
+    render: (args) => _jsx(ControlledLengthIndicator, { ...args }),
+};
 export const WithError = {
     args: {
         error: 'Something went wrong',

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

@@ -31,3 +31,5 @@ export * from './Popover';
 export * from './DatePicker';
 export * from './Calendar';
 export * from './Textarea';
+export * from './Combobox';
+export * from './InputGroup';

package/dist/src/components/index.js

@@ -31,3 +31,5 @@ export * from './Popover';
 export * from './DatePicker';
 export * from './Calendar';
 export * from './Textarea';
+export * from './Combobox';
+export * from './InputGroup';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eml-payments/ui-kit",
-	"version": "1.5.2",
+	"version": "1.5.4",
 	"private": false,
 	"description": "ARLO UIKit",
 	"homepage": "https://github.com/EML-Payments/arlo.npm.uikit#readme",
@@ -43,12 +43,13 @@
 		"format:fix": "prettier --write \"**/*.{js,jsx,ts,tsx,json,htm,html,yml,yaml}\"",
 		"task:prettier": "prettier \"./src/**/*.{ts,tsx}\" --check --log-level error",
 		"task:prettier:fix": "prettier --write \"./src/**/*.{ts,tsx}\" --check --log-level error",
-		"task:eslint": "eslint \"./src/**/*\" --ext .ts,.tsx --cache",
-		"task:eslint:fix": "eslint \"./src/**/*.tsx\" --fix --cache && eslint \"src/**/*.ts\" --fix --cache",
+		"task:eslint": "eslint \"src/**/*.{ts,tsx}\" --cache",
+		"task:eslint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix --cache",
 		"task:typecheck": "tsc",
 		"formatx": "npm run task:prettier:fix && npm run task:eslint:fix && npm run task:typecheck"
 	},
 	"dependencies": {
+		"@base-ui/react": "^1.3.0",
 		"@radix-ui/react-avatar": "^1.1.10",
 		"@radix-ui/react-checkbox": "^1.3.2",
 		"@radix-ui/react-dialog": "^1.1.14",
@@ -67,7 +68,7 @@
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
 		"dayjs": "^1.11.19",
-		"lucide-react": "^0.575.0",
+		"lucide-react": "^0.577.0",
 		"prettier": "^3.6.2",
 		"react": ">=18.0.0",
 		"react-day-picker": "^9.13.0",
@@ -87,6 +88,7 @@
 		"@storybook/react-vite": "^10.0.6",
 		"@tailwindcss/cli": "^4.1.12",
 		"@typescript-eslint/eslint-plugin": "^8.35.1",
+		"baseline-browser-mapping": "^2.10.0",
 		"eslint": "^9.31.0",
 		"eslint-config-prettier": "^10.1.5",
 		"eslint-plugin-import": "^2.32.0",
@@ -113,6 +115,10 @@
 		]
 	},
 	"lint-staged": {
-		"*.{js,ts,tsx}": "eslint --fix"
+		"*.{js,ts,tsx}": [
+			"prettier --write",
+			"eslint --fix"
+		],
+		"*.{json,md,css}": "prettier --write"
 	}
 }