@uipath/apollo-wind 2.56.0 → 2.57.0

package/dist/components/ui/input-group.d.ts

@@ -3,31 +3,98 @@ import * as React from 'react';
 import { type ButtonProps } from './button';
 import { type InputProps } from './input';
 import { type TextareaProps } from './textarea';
+import { type InputGroupLayout, useInputGroup } from './input-group-context';
+export type { InputGroupLayout, InputGroupState } from './input-group-context';
 export interface InputGroupProps extends React.HTMLAttributes<HTMLDivElement> {
-    variant?: 'default' | 'ghost';
+    /**
+     * `default` paints the field box, `ghost` a borderless fill, `outline` a border with no fill and
+     * no ring, and `none` nothing at all while keeping the row's height and right-hand padding, so an
+     * unboxed control still lines up with the boxed fields around it.
+     */
+    variant?: 'default' | 'ghost' | 'outline' | 'none';
     size?: 'default' | 'xs';
+    /**
+     * `row` is one control row. `grow` keeps that as a minimum and lets the content grow it. `block`
+     * stacks an `InputGroupRow` above an `InputGroupBody`, with no padding of its own. `fill` hands
+     * the height to a multi-line editor and drops the padding the editor draws itself.
+     */
+    layout?: InputGroupLayout;
+    /** Draws the invalid state for a control that cannot carry `aria-invalid` itself (a code editor). */
+    invalid?: boolean;
+    /** Draws the disabled state for a control that cannot be `:disabled` itself. */
+    disabled?: boolean;
     /** Field-specific validation feedback rendered below the grouped control. */
     error?: React.ReactNode;
     /** Optional id for the inline validation message. */
     errorId?: string;
 }
+declare const inputGroupVariants: (props?: ({
+    size?: "default" | "xs" | null | undefined;
+    layout?: "fill" | "row" | "block" | "grow" | null | undefined;
+    variant?: "default" | "outline" | "ghost" | "none" | null | undefined;
+    invalid?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const InputGroup: React.ForwardRefExoticComponent<InputGroupProps & React.RefAttributes<HTMLDivElement>>;
 declare const inputGroupAddonVariants: (props?: ({
     align?: "inline-end" | "inline-start" | null | undefined;
+    layout?: "fill" | "row" | "block" | "grow" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export interface InputGroupAddonProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof inputGroupAddonVariants> {
+export interface InputGroupAddonProps extends React.HTMLAttributes<HTMLDivElement>, Pick<VariantProps<typeof inputGroupAddonVariants>, 'align'> {
+    /**
+     * Focus the group's `[data-slot=input-group-control]` when the addon's own surface is clicked.
+     * Turn off for an addon whose clicks mean something else.
+     */
+    focusControlOnClick?: boolean;
 }
 declare const InputGroupAddon: React.ForwardRefExoticComponent<InputGroupAddonProps & React.RefAttributes<HTMLDivElement>>;
+export interface InputGroupRowProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * The first row of a `layout="block"` group, holding the control and its addons. The box has no
+ * padding in that layout, so the row carries the box's usual padding and trailing trim. Padding the
+ * control instead would inset its caret out of line with other fields.
+ */
+declare const InputGroupRow: React.ForwardRefExoticComponent<InputGroupRowProps & React.RefAttributes<HTMLDivElement>>;
+export interface InputGroupBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * Content below a `layout="block"` group's first row, behind a divider. Controls here are standard
+ * fields with their own box, message and popovers; one that needs addons takes its own InputGroup.
+ * The divider goes when there is nothing to divide: an empty body, or a closed Radix collapsible,
+ * which leaves its content in place and `hidden`.
+ */
+declare const InputGroupBody: React.ForwardRefExoticComponent<InputGroupBodyProps & React.RefAttributes<HTMLDivElement>>;
 export interface InputGroupButtonProps extends ButtonProps {
 }
 declare const InputGroupButton: React.ForwardRefExoticComponent<InputGroupButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export interface InputGroupTriggerProps extends Omit<ButtonProps, 'variant' | 'size' | 'icon'> {
+}
+/**
+ * A Button rendered as the group's control, for pickers that open a list or a collapsible. In a
+ * `layout="block"` group it is the first row, whose height is its content's.
+ */
+declare const InputGroupTrigger: React.ForwardRefExoticComponent<InputGroupTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export interface InputGroupPopoverTriggerProps extends InputGroupTriggerProps {
+    /** Shown, dimmed, when there are no children to show. */
+    placeholder?: React.ReactNode;
+    /** Draws the trailing caret. Pass `false` for a trigger that brings its own. */
+    caret?: boolean;
+}
+/**
+ * A popover's trigger as the group's control. Must be rendered inside a `Popover`. The panel
+ * anchors to the group's box, so it opens below the border at the box's width.
+ */
+declare const InputGroupPopoverTrigger: React.ForwardRefExoticComponent<InputGroupPopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 export interface InputGroupTextProps extends React.HTMLAttributes<HTMLSpanElement> {
 }
 declare const InputGroupText: React.ForwardRefExoticComponent<InputGroupTextProps & React.RefAttributes<HTMLSpanElement>>;
 export interface InputGroupInputProps extends Omit<InputProps, 'variant' | 'size' | 'error' | 'errorId'> {
 }
+/** `Input` as the group's control. Inside an InputGroup a plain `Input` is the same; kept for shadcn parity. */
 declare const InputGroupInput: React.ForwardRefExoticComponent<InputGroupInputProps & React.RefAttributes<HTMLInputElement>>;
 export interface InputGroupTextareaProps extends Omit<TextareaProps, 'variant' | 'error' | 'errorId'> {
 }
+/** `Textarea` as the group's control. Inside an InputGroup a plain `Textarea` is the same; kept for shadcn parity. */
 declare const InputGroupTextarea: React.ForwardRefExoticComponent<Omit<InputGroupTextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
-export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };
+export { InputGroup, InputGroupAddon, InputGroupBody, InputGroupButton, InputGroupInput, InputGroupPopoverTrigger, InputGroupRow, InputGroupText, InputGroupTextarea, InputGroupTrigger, inputGroupVariants, useInputGroup, };

package/dist/components/ui/input-group.js

@@ -1,111 +1,340 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-import { createContext, forwardRef, useContext, useId } from "react";
+import { ChevronDown } from "lucide-react";
+import { forwardRef, useCallback, useId, useMemo, useRef, useState } from "react";
 import { Button } from "./button.js";
 import { Input } from "./input.js";
+import { PopoverAnchor, PopoverTrigger } from "./popover.js";
 import { Textarea } from "./textarea.js";
 import { cn } from "../../lib/index.js";
 import { FormFieldError } from "./form-field.js";
-const InputGroupValidationContext = /*#__PURE__*/ createContext({});
-const InputGroup = /*#__PURE__*/ forwardRef(({ className, error, errorId, variant = 'default', size = 'default', ...props }, ref)=>{
+import { InputGroupContext, NO_GROUP, NO_GROUP_DISABLED, controlValidation, useInputGroup } from "./input-group-context.js";
+const ROW_LAYOUTS = [
+    'row',
+    'grow',
+    'fill'
+];
+const FILLED = [
+    'default',
+    'ghost'
+];
+const BOXED = [
+    'default',
+    'ghost',
+    'outline'
+];
+const inputGroupVariants = cva([
+    'group/input-group relative flex w-full items-center gap-2 transition-colors has-[>textarea]:h-auto has-[>textarea]:items-start',
+    'has-[[data-slot=input-group-control]:disabled]:cursor-not-allowed has-[[data-slot=input-group-control]:disabled]:opacity-50'
+], {
+    variants: {
+        size: {
+            default: 'h-9 rounded-md px-3 py-1 future:h-10 future:rounded-xl future:py-2 has-[>[data-slot=input-group-addon][data-align=inline-end]]:pr-2 future:has-[>[data-slot=input-group-addon][data-align=inline-end]]:pr-2',
+            xs: 'h-6 gap-1 rounded px-2'
+        },
+        layout: {
+            row: '',
+            grow: 'h-auto min-h-9 future:h-auto future:min-h-10',
+            block: 'h-auto flex-col items-stretch gap-0 overflow-hidden p-0 future:h-auto future:p-0',
+            fill: 'h-auto min-h-9 items-stretch py-0 pl-0 pr-0 future:h-auto future:min-h-10 future:py-0 future:pl-0 future:pr-0'
+        },
+        variant: {
+            default: 'border border-input bg-transparent future:border-0 future:bg-surface-overlay',
+            ghost: 'border-0 bg-surface-overlay',
+            outline: 'border border-input bg-transparent shadow-none future:border future:border-input future:bg-transparent future:has-[[data-slot][aria-invalid=true]]:border-error',
+            none: 'border-0 bg-transparent shadow-none future:bg-transparent'
+        },
+        invalid: {
+            true: '',
+            false: ''
+        },
+        disabled: {
+            true: 'cursor-not-allowed opacity-50',
+            false: ''
+        }
+    },
+    compoundVariants: [
+        {
+            variant: 'none',
+            layout: ROW_LAYOUTS,
+            class: 'px-0 pr-3'
+        },
+        {
+            layout: ROW_LAYOUTS,
+            class: 'has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]_:focus-visible]:ring-2 has-[[data-slot][aria-invalid=true]]:has-[[data-slot=input-group-control]:focus-visible]:ring-error has-[[data-slot][aria-invalid=true]]:has-[[data-slot=input-group-control]_:focus-visible]:ring-error future:has-[[data-slot=input-group-control]:focus-visible]:ring-offset-2 future:has-[[data-slot=input-group-control]:focus-visible]:ring-offset-background future:has-[[data-slot=input-group-control]_:focus-visible]:ring-offset-2 future:has-[[data-slot=input-group-control]_:focus-visible]:ring-offset-background'
+        },
+        {
+            layout: ROW_LAYOUTS,
+            invalid: false,
+            class: 'has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]_:focus-visible]:ring-ring'
+        },
+        {
+            layout: ROW_LAYOUTS,
+            invalid: true,
+            class: 'has-[[data-slot=input-group-control]:focus-visible]:ring-error has-[[data-slot=input-group-control]_:focus-visible]:ring-error'
+        },
+        {
+            variant: BOXED,
+            class: 'has-[[data-slot][aria-invalid=true]]:border-error'
+        },
+        {
+            variant: BOXED,
+            invalid: true,
+            class: 'border-error'
+        },
+        {
+            variant: 'outline',
+            invalid: true,
+            class: 'future:border-error'
+        },
+        {
+            variant: FILLED,
+            class: 'has-[[data-slot][aria-invalid=true]]:ring-error/20 future:has-[[data-slot][aria-invalid=true]]:ring-1 future:has-[[data-slot][aria-invalid=true]]:ring-error/40'
+        },
+        {
+            variant: FILLED,
+            invalid: true,
+            class: 'ring-error/20 future:ring-1 future:ring-error/40'
+        },
+        {
+            variant: FILLED,
+            layout: ROW_LAYOUTS,
+            class: 'has-[button[data-slot=input-group-control]:not(:disabled):hover]:bg-accent future:has-[button[data-slot=input-group-control]:not(:disabled):hover]:bg-surface-hover'
+        }
+    ],
+    defaultVariants: {
+        size: 'default',
+        layout: 'row',
+        variant: 'default',
+        invalid: false,
+        disabled: false
+    }
+});
+const InputGroup = /*#__PURE__*/ forwardRef(({ className, error, errorId, variant = 'default', size = 'default', layout = 'row', invalid, disabled, ...props }, ref)=>{
     const generatedId = useId();
     const validationId = errorId ?? `input-group-${generatedId.replace(/:/g, '')}-error`;
-    return /*#__PURE__*/ jsxs(InputGroupValidationContext.Provider, {
-        value: {
+    const flagged = Boolean(invalid || error);
+    const [controlError, setControlError] = useState();
+    const boxRef = useRef(null);
+    const setBox = useCallback((node)=>{
+        boxRef.current = node;
+        if ('function' == typeof ref) ref(node);
+        else if (ref) ref.current = node;
+    }, [
+        ref
+    ]);
+    const group = useMemo(()=>({
+            inGroup: true,
+            layout,
             error,
-            errorId: validationId
-        },
+            errorId: validationId,
+            invalid,
+            disabled,
+            anchor: boxRef,
+            reportError: setControlError
+        }), [
+        layout,
+        error,
+        validationId,
+        invalid,
+        disabled
+    ]);
+    return /*#__PURE__*/ jsxs(InputGroupContext.Provider, {
+        value: group,
         children: [
             /*#__PURE__*/ jsx("div", {
-                ref: ref,
+                ref: setBox,
                 role: "group",
-                className: cn('group/input-group relative flex w-full items-center gap-2 transition-colors has-[>textarea]:h-auto has-[>textarea]:items-start', 'default' === size && 'h-9 rounded-md px-3 py-1 future:h-10 future:rounded-xl future:py-2', 'xs' === size && 'h-6 gap-1 rounded px-2', 'default' === variant && 'border border-input bg-transparent future:border-0 future:bg-surface-overlay', 'ghost' === variant && 'border-0 bg-surface-overlay', 'has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-ring future:has-[[data-slot=input-group-control]:focus-visible]:ring-offset-2 future:has-[[data-slot=input-group-control]:focus-visible]:ring-offset-background', 'has-[[data-slot][aria-invalid=true]]:border-error has-[[data-slot][aria-invalid=true]]:ring-error/20 future:has-[[data-slot][aria-invalid=true]]:ring-1 future:has-[[data-slot][aria-invalid=true]]:ring-error/40', error && 'border-error ring-error/20 future:ring-1 future:ring-error/40', 'has-[[data-slot=input-group-control]:disabled]:cursor-not-allowed has-[[data-slot=input-group-control]:disabled]:opacity-50', className),
+                "data-slot": "input-group",
+                "data-layout": layout,
+                "data-invalid": flagged ? '' : void 0,
+                "data-disabled": disabled ? '' : void 0,
+                "aria-disabled": disabled || void 0,
+                className: cn(inputGroupVariants({
+                    size,
+                    layout,
+                    variant,
+                    invalid: flagged,
+                    disabled
+                }), className),
                 ...props
             }),
             /*#__PURE__*/ jsx(FormFieldError, {
                 id: validationId,
-                children: error
+                children: error || controlError
             })
         ]
     });
 });
 InputGroup.displayName = 'InputGroup';
-const inputGroupAddonVariants = cva('flex h-auto cursor-text items-center justify-center gap-1 text-sm text-muted-foreground select-none group-has-[[data-slot=input-group-control]:disabled]/input-group:opacity-50 [&>svg:not([class*="size-"])]:size-4', {
+const inputGroupAddonVariants = cva('flex h-auto cursor-text empty:hidden items-center justify-center gap-1 text-sm text-muted-foreground select-none group-has-[[data-slot=input-group-control]:disabled]/input-group:opacity-50 [&>svg:not([class*="size-"])]:size-4', {
     variants: {
         align: {
             'inline-start': 'order-first',
-            'inline-end': 'order-last'
+            'inline-end': 'order-last ml-auto'
+        },
+        layout: {
+            row: '',
+            grow: 'shrink-0 self-stretch max-h-6.5 future:max-h-6',
+            block: 'shrink-0 self-stretch max-h-9 future:max-h-10',
+            fill: 'shrink-0 self-stretch max-h-9 future:max-h-10'
         }
     },
     defaultVariants: {
-        align: 'inline-start'
+        align: 'inline-start',
+        layout: 'row'
     }
 });
-const InputGroupAddon = /*#__PURE__*/ forwardRef(({ className, align = 'inline-start', onClick, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
+const ADDON_INTERACTIVE = 'button, a[href], input, textarea, select, [contenteditable], [tabindex]';
+const InputGroupAddon = /*#__PURE__*/ forwardRef(({ className, align = 'inline-start', focusControlOnClick = true, onClick, ...props }, ref)=>{
+    const { layout, disabled } = useInputGroup();
+    return /*#__PURE__*/ jsx(InputGroupContext.Provider, {
+        value: disabled ? NO_GROUP_DISABLED : NO_GROUP,
+        children: /*#__PURE__*/ jsx("div", {
+            ref: ref,
+            role: "group",
+            "data-slot": "input-group-addon",
+            "data-align": align,
+            className: cn(inputGroupAddonVariants({
+                align,
+                layout
+            }), className),
+            onClick: (e)=>{
+                const hit = e.target.closest(ADDON_INTERACTIVE);
+                if (focusControlOnClick && !(hit && e.currentTarget.contains(hit))) e.currentTarget.parentElement?.querySelector('[data-slot=input-group-control]')?.focus();
+                onClick?.(e);
+            },
+            ...props
+        })
+    });
+});
+InputGroupAddon.displayName = 'InputGroupAddon';
+const InputGroupRow = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
         ref: ref,
-        role: "group",
-        "data-slot": "input-group-addon",
-        "data-align": align,
-        className: cn(inputGroupAddonVariants({
-            align
-        }), className),
-        onClick: (e)=>{
-            if (!e.target.closest('button')) e.currentTarget.parentElement?.querySelector('input, textarea')?.focus();
-            onClick?.(e);
-        },
+        "data-slot": "input-group-row",
+        className: cn('flex min-h-9 min-w-0 items-stretch gap-2 px-3 has-[>[data-slot=input-group-addon][data-align=inline-end]]:pr-2 future:min-h-10', 'rounded-[inherit] has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-inset has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]_:focus-visible]:ring-2 has-[[data-slot=input-group-control]_:focus-visible]:ring-inset has-[[data-slot=input-group-control]_:focus-visible]:ring-ring has-[[data-slot][aria-invalid=true]]:has-[[data-slot=input-group-control]:focus-visible]:ring-error has-[[data-slot][aria-invalid=true]]:has-[[data-slot=input-group-control]_:focus-visible]:ring-error', className),
         ...props
     }));
-InputGroupAddon.displayName = 'InputGroupAddon';
-const InputGroupButton = /*#__PURE__*/ forwardRef(({ className, type = 'button', variant = 'ghost', size = 'xs', ...props }, ref)=>/*#__PURE__*/ jsx(Button, {
+InputGroupRow.displayName = 'InputGroupRow';
+const InputGroupBody = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
+    const { disabled } = useInputGroup();
+    return /*#__PURE__*/ jsx(InputGroupContext.Provider, {
+        value: disabled ? NO_GROUP_DISABLED : NO_GROUP,
+        children: /*#__PURE__*/ jsx("div", {
+            ref: ref,
+            "data-slot": "input-group-body",
+            className: cn('border-t empty:border-t-0 has-[>[hidden]]:border-t-0', className),
+            ...props
+        })
+    });
+});
+InputGroupBody.displayName = 'InputGroupBody';
+const InputGroupButton = /*#__PURE__*/ forwardRef(({ className, type = 'button', variant = 'ghost', size = 'xs', disabled, ...props }, ref)=>{
+    const group = useInputGroup();
+    return /*#__PURE__*/ jsx(Button, {
         ref: ref,
         type: type,
         variant: variant,
         size: size,
+        disabled: disabled || group.disabled,
         className: cn('gap-1', className),
         ...props
-    }));
+    });
+});
 InputGroupButton.displayName = 'InputGroupButton';
+const inputGroupTriggerVariants = cva('flex w-full min-w-0 flex-1 gap-2 rounded-none border-0 bg-transparent text-left font-normal shadow-none hover:bg-transparent focus-visible:ring-offset-0 future:text-foreground future:hover:text-foreground', {
+    variants: {
+        layout: {
+            row: 'h-full min-h-5 justify-between p-0 focus-visible:ring-0',
+            block: 'h-auto min-h-9 justify-start px-0 focus-visible:ring-0 future:min-h-10'
+        }
+    },
+    defaultVariants: {
+        layout: 'row'
+    }
+});
+const InputGroupTrigger = /*#__PURE__*/ forwardRef(({ className, type = 'button', disabled, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, ...props }, ref)=>{
+    const group = useInputGroup();
+    const { layout } = group;
+    return /*#__PURE__*/ jsx(Button, {
+        ref: ref,
+        type: type,
+        variant: "ghost",
+        disabled: disabled || group.disabled,
+        className: cn(inputGroupTriggerVariants({
+            layout: 'block' === layout ? 'block' : 'row'
+        }), className),
+        ...props,
+        ...controlValidation(group, {
+            'aria-invalid': ariaInvalid,
+            'aria-describedby': ariaDescribedBy,
+            'aria-errormessage': ariaErrorMessage
+        }),
+        "data-slot": "input-group-control"
+    });
+});
+InputGroupTrigger.displayName = 'InputGroupTrigger';
+function isEmpty(children) {
+    return null == children || false === children || '' === children;
+}
+const InputGroupPopoverTrigger = /*#__PURE__*/ forwardRef(({ children, placeholder, caret = true, ...props }, ref)=>{
+    const { anchor } = useInputGroup();
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(PopoverTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ jsxs(InputGroupTrigger, {
+                    ref: ref,
+                    ...props,
+                    children: [
+                        isEmpty(children) ? void 0 !== placeholder && /*#__PURE__*/ jsx("span", {
+                            "data-slot": "input-group-placeholder",
+                            className: "truncate text-muted-foreground",
+                            children: placeholder
+                        }) : children,
+                        caret && /*#__PURE__*/ jsx(ChevronDown, {
+                            className: "ml-auto shrink-0 text-muted-foreground"
+                        })
+                    ]
+                })
+            }),
+            anchor && /*#__PURE__*/ jsx(PopoverAnchor, {
+                virtualRef: anchor
+            })
+        ]
+    });
+});
+InputGroupPopoverTrigger.displayName = 'InputGroupPopoverTrigger';
 const InputGroupText = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("span", {
         ref: ref,
         className: cn('flex items-center gap-1 text-sm text-muted-foreground [&>svg:not([class*="size-"])]:size-4', className),
         ...props
     }));
 InputGroupText.displayName = 'InputGroupText';
-const InputGroupInput = /*#__PURE__*/ forwardRef(({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, className, ...props }, ref)=>{
-    const validation = useContext(InputGroupValidationContext);
-    const describedBy = [
-        ariaDescribedBy,
-        validation.error ? validation.errorId : void 0
-    ].filter(Boolean).join(' ');
-    return /*#__PURE__*/ jsx("div", {
-        className: "min-w-0 flex-1",
+const FORCED_GROUP = {
+    ...NO_GROUP,
+    inGroup: true
+};
+const InputGroupInput = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const group = useInputGroup();
+    return /*#__PURE__*/ jsx(InputGroupContext.Provider, {
+        value: group.inGroup ? group : FORCED_GROUP,
         children: /*#__PURE__*/ jsx(Input, {
             ref: ref,
-            "data-slot": "input-group-control",
-            "aria-describedby": describedBy || void 0,
-            "aria-errormessage": validation.error ? validation.errorId : ariaErrorMessage,
-            "aria-invalid": validation.error ? true : ariaInvalid,
-            className: cn('h-full w-full rounded-none !border-0 !ring-0 bg-transparent p-0 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 future:h-full future:rounded-none future:border-0 future:bg-transparent future:p-0 future:focus-visible:ring-offset-0', className),
             ...props
         })
     });
 });
 InputGroupInput.displayName = 'InputGroupInput';
-const InputGroupTextarea = /*#__PURE__*/ forwardRef(({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, className, ...props }, ref)=>{
-    const validation = useContext(InputGroupValidationContext);
-    const describedBy = [
-        ariaDescribedBy,
-        validation.error ? validation.errorId : void 0
-    ].filter(Boolean).join(' ');
-    return /*#__PURE__*/ jsx(Textarea, {
-        ref: ref,
-        "data-slot": "input-group-control",
-        "aria-describedby": describedBy || void 0,
-        "aria-errormessage": validation.error ? validation.errorId : ariaErrorMessage,
-        "aria-invalid": validation.error ? true : ariaInvalid,
-        className: cn('min-h-0 flex-1 resize-none rounded-none !border-0 !ring-0 bg-transparent p-0 py-2 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 future:rounded-none future:border-0 future:bg-transparent future:focus-visible:ring-offset-0', className),
-        ...props
+const InputGroupTextarea = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const group = useInputGroup();
+    return /*#__PURE__*/ jsx(InputGroupContext.Provider, {
+        value: group.inGroup ? group : FORCED_GROUP,
+        children: /*#__PURE__*/ jsx(Textarea, {
+            ref: ref,
+            ...props
+        })
     });
 });
 InputGroupTextarea.displayName = 'InputGroupTextarea';
-export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };
+export { InputGroup, InputGroupAddon, InputGroupBody, InputGroupButton, InputGroupInput, InputGroupPopoverTrigger, InputGroupRow, InputGroupText, InputGroupTextarea, InputGroupTrigger, inputGroupVariants, useInputGroup };

package/dist/components/ui/input.cjs

@@ -30,27 +30,38 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_react_namespaceObject = require("react");
 const utils_cjs_namespaceObject = require("../../lib/utils.cjs");
 const external_form_field_cjs_namespaceObject = require("./form-field.cjs");
-const Input = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, className, error, errorId, id, type, variant = 'default', size = 'default', ...props }, ref)=>{
+const external_input_group_context_cjs_namespaceObject = require("./input-group-context.cjs");
+const IN_GROUP_CLASS = 'h-full w-full rounded-none !border-0 !ring-0 bg-transparent p-0 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 future:h-full future:rounded-none future:border-0 future:bg-transparent future:p-0 future:focus-visible:ring-offset-0';
+const Input = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, className, error, errorId, id, type, variant: variantProp = 'default', size: sizeProp = 'default', ...props }, ref)=>{
+    const group = (0, external_input_group_context_cjs_namespaceObject.useInputGroup)();
+    const variant = group.inGroup ? 'default' : variantProp;
+    const size = group.inGroup ? 'default' : sizeProp;
     const generatedId = external_react_namespaceObject.useId();
     const validationId = errorId ?? `${id ?? `input-${generatedId.replace(/:/g, '')}`}-error`;
-    const describedBy = [
-        ariaDescribedBy,
-        error ? validationId : void 0
-    ].filter(Boolean).join(' ');
+    const validation = (0, external_input_group_context_cjs_namespaceObject.useControlValidation)(group, {
+        error,
+        errorId: validationId,
+        'aria-invalid': ariaInvalid,
+        'aria-describedby': ariaDescribedBy,
+        'aria-errormessage': ariaErrorMessage
+    });
+    const input = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("input", {
+        type: type,
+        "data-slot": group.inGroup ? 'input-group-control' : 'input',
+        id: id,
+        ...props,
+        ...validation.aria,
+        disabled: props.disabled || group.disabled,
+        className: (0, utils_cjs_namespaceObject.cn)('flex w-full transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring read-only:cursor-default disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-error aria-invalid:focus-visible:ring-error', 'default' === size && 'h-9 rounded-md px-3 py-1 text-base placeholder:text-muted-foreground md:text-sm', 'xs' === size && 'h-6 rounded px-2 text-xs placeholder:text-muted-foreground', 'default' === variant && 'border border-input bg-transparent', 'ghost' === variant && 'border-0 bg-surface-overlay', 'default' === variant && 'default' === size && 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:py-2 future:text-sm future:placeholder:text-foreground-muted future:placeholder:font-normal future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background future:aria-invalid:ring-1 future:aria-invalid:ring-error/40', group.inGroup && IN_GROUP_CLASS, className),
+        ref: ref
+    });
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("input", {
-                type: type,
-                "data-slot": "input",
-                id: id,
-                ...props,
-                "aria-describedby": describedBy || void 0,
-                "aria-errormessage": error ? validationId : ariaErrorMessage,
-                "aria-invalid": error ? true : ariaInvalid,
-                className: (0, utils_cjs_namespaceObject.cn)('flex w-full transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring read-only:cursor-default disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-error aria-invalid:focus-visible:ring-error', 'default' === size && 'h-9 rounded-md px-3 py-1 text-base placeholder:text-muted-foreground md:text-sm', 'xs' === size && 'h-6 rounded px-2 text-xs placeholder:text-muted-foreground', 'default' === variant && 'border border-input bg-transparent', 'ghost' === variant && 'border-0 bg-surface-overlay', 'default' === variant && 'default' === size && 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:py-2 future:text-sm future:placeholder:text-foreground-muted future:placeholder:font-normal future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background future:aria-invalid:ring-1 future:aria-invalid:ring-error/40', className),
-                ref: ref
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldError, {
+            group.inGroup ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: "min-w-0 flex-1",
+                children: input
+            }) : input,
+            validation.ownMessage && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldError, {
                 id: validationId,
                 children: error
             })

package/dist/components/ui/input.js

@@ -2,27 +2,38 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useId } from "react";
 import { cn } from "../../lib/utils.js";
 import { FormFieldError } from "./form-field.js";
-const Input = /*#__PURE__*/ forwardRef(({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, className, error, errorId, id, type, variant = 'default', size = 'default', ...props }, ref)=>{
+import { useControlValidation, useInputGroup } from "./input-group-context.js";
+const IN_GROUP_CLASS = 'h-full w-full rounded-none !border-0 !ring-0 bg-transparent p-0 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 future:h-full future:rounded-none future:border-0 future:bg-transparent future:p-0 future:focus-visible:ring-offset-0';
+const Input = /*#__PURE__*/ forwardRef(({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, className, error, errorId, id, type, variant: variantProp = 'default', size: sizeProp = 'default', ...props }, ref)=>{
+    const group = useInputGroup();
+    const variant = group.inGroup ? 'default' : variantProp;
+    const size = group.inGroup ? 'default' : sizeProp;
     const generatedId = useId();
     const validationId = errorId ?? `${id ?? `input-${generatedId.replace(/:/g, '')}`}-error`;
-    const describedBy = [
-        ariaDescribedBy,
-        error ? validationId : void 0
-    ].filter(Boolean).join(' ');
+    const validation = useControlValidation(group, {
+        error,
+        errorId: validationId,
+        'aria-invalid': ariaInvalid,
+        'aria-describedby': ariaDescribedBy,
+        'aria-errormessage': ariaErrorMessage
+    });
+    const input = /*#__PURE__*/ jsx("input", {
+        type: type,
+        "data-slot": group.inGroup ? 'input-group-control' : 'input',
+        id: id,
+        ...props,
+        ...validation.aria,
+        disabled: props.disabled || group.disabled,
+        className: cn('flex w-full transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring read-only:cursor-default disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-error aria-invalid:focus-visible:ring-error', 'default' === size && 'h-9 rounded-md px-3 py-1 text-base placeholder:text-muted-foreground md:text-sm', 'xs' === size && 'h-6 rounded px-2 text-xs placeholder:text-muted-foreground', 'default' === variant && 'border border-input bg-transparent', 'ghost' === variant && 'border-0 bg-surface-overlay', 'default' === variant && 'default' === size && 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:py-2 future:text-sm future:placeholder:text-foreground-muted future:placeholder:font-normal future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background future:aria-invalid:ring-1 future:aria-invalid:ring-error/40', group.inGroup && IN_GROUP_CLASS, className),
+        ref: ref
+    });
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            /*#__PURE__*/ jsx("input", {
-                type: type,
-                "data-slot": "input",
-                id: id,
-                ...props,
-                "aria-describedby": describedBy || void 0,
-                "aria-errormessage": error ? validationId : ariaErrorMessage,
-                "aria-invalid": error ? true : ariaInvalid,
-                className: cn('flex w-full transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring read-only:cursor-default disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-error aria-invalid:focus-visible:ring-error', 'default' === size && 'h-9 rounded-md px-3 py-1 text-base placeholder:text-muted-foreground md:text-sm', 'xs' === size && 'h-6 rounded px-2 text-xs placeholder:text-muted-foreground', 'default' === variant && 'border border-input bg-transparent', 'ghost' === variant && 'border-0 bg-surface-overlay', 'default' === variant && 'default' === size && 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:py-2 future:text-sm future:placeholder:text-foreground-muted future:placeholder:font-normal future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background future:aria-invalid:ring-1 future:aria-invalid:ring-error/40', className),
-                ref: ref
-            }),
-            /*#__PURE__*/ jsx(FormFieldError, {
+            group.inGroup ? /*#__PURE__*/ jsx("div", {
+                className: "min-w-0 flex-1",
+                children: input
+            }) : input,
+            validation.ownMessage && /*#__PURE__*/ jsx(FormFieldError, {
                 id: validationId,
                 children: error
             })