@uipath/apollo-wind 2.56.0 → 2.57.0

package/dist/components/ui/combobox.cjs

@@ -32,18 +32,33 @@ const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
 const external_button_cjs_namespaceObject = require("./button.cjs");
 const external_command_cjs_namespaceObject = require("./command.cjs");
+const external_input_group_cjs_namespaceObject = require("./input-group.cjs");
 const external_popover_cjs_namespaceObject = require("./popover.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
 const external_form_field_cjs_namespaceObject = require("./form-field.cjs");
+const external_input_group_context_cjs_namespaceObject = require("./input-group-context.cjs");
 const combobox_Combobox = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ id, items, value, onValueChange, placeholder = 'Select an option...', searchPlaceholder = 'Search...', emptyText = 'No results found.', disabled, className, error, errorId, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
     const [open, setOpen] = external_react_namespaceObject.useState(false);
+    const group = (0, external_input_group_context_cjs_namespaceObject.useInputGroup)();
+    const grouped = group.inGroup;
     const generatedId = external_react_namespaceObject.useId();
     const validationId = errorId ?? `${id ?? `combobox-${generatedId.replace(/:/g, '')}`}-error`;
-    const describedBy = [
-        ariaDescribedBy,
-        error ? validationId : void 0
-    ].filter(Boolean).join(' ');
     const selectedItem = items.find((item)=>item.value === value);
+    const validation = (0, external_input_group_context_cjs_namespaceObject.useControlValidation)(group, {
+        error,
+        errorId: validationId,
+        'aria-invalid': ariaInvalid,
+        'aria-describedby': ariaDescribedBy,
+        'aria-errormessage': ariaErrorMessage
+    });
+    const triggerProps = {
+        id,
+        role: 'combobox',
+        'aria-expanded': open,
+        'aria-label': id ? void 0 : selectedItem ? selectedItem.label : placeholder,
+        ...validation.aria,
+        disabled: disabled || group.disabled
+    };
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
@@ -51,20 +66,22 @@ const combobox_Combobox = /*#__PURE__*/ external_react_namespaceObject.forwardRe
                 open: open,
                 onOpenChange: setOpen,
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverTrigger, {
+                    grouped ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupPopoverTrigger, {
+                        ref: ref,
+                        ...triggerProps,
+                        className: className,
+                        placeholder: placeholder,
+                        children: selectedItem && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                            className: "truncate",
+                            children: selectedItem.label
+                        })
+                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverTrigger, {
                         asChild: true,
                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_button_cjs_namespaceObject.Button, {
                             ref: ref,
-                            id: id,
                             variant: "outline",
-                            role: "combobox",
-                            "aria-expanded": open,
-                            "aria-label": id ? void 0 : selectedItem ? selectedItem.label : placeholder,
-                            "aria-describedby": describedBy || void 0,
-                            "aria-errormessage": error ? validationId : ariaErrorMessage,
-                            "aria-invalid": error ? true : ariaInvalid,
+                            ...triggerProps,
                             className: (0, index_cjs_namespaceObject.cn)('w-[280px] justify-between future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:hover:bg-surface-hover future:font-normal future:text-foreground future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
-                            disabled: disabled,
                             children: [
                                 selectedItem ? selectedItem.label : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                                     className: "text-foreground-muted",
@@ -77,7 +94,8 @@ const combobox_Combobox = /*#__PURE__*/ external_react_namespaceObject.forwardRe
                         })
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverContent, {
-                        className: "w-[280px] p-0",
+                        className: (0, index_cjs_namespaceObject.cn)('p-0', grouped ? 'w-(--radix-popover-trigger-width)' : 'w-[280px]'),
+                        align: grouped ? 'start' : void 0,
                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_command_cjs_namespaceObject.Command, {
                             children: [
                                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_command_cjs_namespaceObject.CommandInput, {
@@ -110,7 +128,7 @@ const combobox_Combobox = /*#__PURE__*/ external_react_namespaceObject.forwardRe
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldError, {
+            validation.ownMessage && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldError, {
                 id: validationId,
                 children: error
             })

package/dist/components/ui/combobox.js

@@ -4,18 +4,33 @@ import { Check, ChevronDown } from "lucide-react";
 import { forwardRef, useId, useState } from "react";
 import { Button } from "./button.js";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "./command.js";
+import { InputGroupPopoverTrigger } from "./input-group.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { cn } from "../../lib/index.js";
 import { FormFieldError } from "./form-field.js";
+import { useControlValidation, useInputGroup } from "./input-group-context.js";
 const combobox_Combobox = /*#__PURE__*/ forwardRef(function({ id, items, value, onValueChange, placeholder = 'Select an option...', searchPlaceholder = 'Search...', emptyText = 'No results found.', disabled, className, error, errorId, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
     const [open, setOpen] = useState(false);
+    const group = useInputGroup();
+    const grouped = group.inGroup;
     const generatedId = useId();
     const validationId = errorId ?? `${id ?? `combobox-${generatedId.replace(/:/g, '')}`}-error`;
-    const describedBy = [
-        ariaDescribedBy,
-        error ? validationId : void 0
-    ].filter(Boolean).join(' ');
     const selectedItem = items.find((item)=>item.value === value);
+    const validation = useControlValidation(group, {
+        error,
+        errorId: validationId,
+        'aria-invalid': ariaInvalid,
+        'aria-describedby': ariaDescribedBy,
+        'aria-errormessage': ariaErrorMessage
+    });
+    const triggerProps = {
+        id,
+        role: 'combobox',
+        'aria-expanded': open,
+        'aria-label': id ? void 0 : selectedItem ? selectedItem.label : placeholder,
+        ...validation.aria,
+        disabled: disabled || group.disabled
+    };
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsxs(Popover, {
@@ -23,20 +38,22 @@ const combobox_Combobox = /*#__PURE__*/ forwardRef(function({ id, items, value,
                 open: open,
                 onOpenChange: setOpen,
                 children: [
-                    /*#__PURE__*/ jsx(PopoverTrigger, {
+                    grouped ? /*#__PURE__*/ jsx(InputGroupPopoverTrigger, {
+                        ref: ref,
+                        ...triggerProps,
+                        className: className,
+                        placeholder: placeholder,
+                        children: selectedItem && /*#__PURE__*/ jsx("span", {
+                            className: "truncate",
+                            children: selectedItem.label
+                        })
+                    }) : /*#__PURE__*/ jsx(PopoverTrigger, {
                         asChild: true,
                         children: /*#__PURE__*/ jsxs(Button, {
                             ref: ref,
-                            id: id,
                             variant: "outline",
-                            role: "combobox",
-                            "aria-expanded": open,
-                            "aria-label": id ? void 0 : selectedItem ? selectedItem.label : placeholder,
-                            "aria-describedby": describedBy || void 0,
-                            "aria-errormessage": error ? validationId : ariaErrorMessage,
-                            "aria-invalid": error ? true : ariaInvalid,
+                            ...triggerProps,
                             className: cn('w-[280px] justify-between future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:hover:bg-surface-hover future:font-normal future:text-foreground future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
-                            disabled: disabled,
                             children: [
                                 selectedItem ? selectedItem.label : /*#__PURE__*/ jsx("span", {
                                     className: "text-foreground-muted",
@@ -49,7 +66,8 @@ const combobox_Combobox = /*#__PURE__*/ forwardRef(function({ id, items, value,
                         })
                     }),
                     /*#__PURE__*/ jsx(PopoverContent, {
-                        className: "w-[280px] p-0",
+                        className: cn('p-0', grouped ? 'w-(--radix-popover-trigger-width)' : 'w-[280px]'),
+                        align: grouped ? 'start' : void 0,
                         children: /*#__PURE__*/ jsxs(Command, {
                             children: [
                                 /*#__PURE__*/ jsx(CommandInput, {
@@ -82,7 +100,7 @@ const combobox_Combobox = /*#__PURE__*/ forwardRef(function({ id, items, value,
                     })
                 ]
             }),
-            /*#__PURE__*/ jsx(FormFieldError, {
+            validation.ownMessage && /*#__PURE__*/ jsx(FormFieldError, {
                 id: validationId,
                 children: error
             })

package/dist/components/ui/date-picker.cjs

@@ -34,34 +34,51 @@ const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
 const external_button_cjs_namespaceObject = require("./button.cjs");
 const external_calendar_cjs_namespaceObject = require("./calendar.cjs");
+const external_input_group_cjs_namespaceObject = require("./input-group.cjs");
 const external_popover_cjs_namespaceObject = require("./popover.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
 const external_form_field_cjs_namespaceObject = require("./form-field.cjs");
+const external_input_group_context_cjs_namespaceObject = require("./input-group-context.cjs");
 const date_picker_DatePicker = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ id, value, onValueChange, disabled, placeholder = 'Pick a date', className, calendarProps, error, errorId, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
     const generatedId = external_react_namespaceObject.useId();
     const validationId = errorId ?? `${id ?? `date-picker-${generatedId.replace(/:/g, '')}`}-error`;
-    const describedBy = [
-        ariaDescribedBy,
-        error ? validationId : void 0
-    ].filter(Boolean).join(' ');
+    const group = (0, external_input_group_context_cjs_namespaceObject.useInputGroup)();
+    const grouped = group.inGroup;
+    const validation = (0, external_input_group_context_cjs_namespaceObject.useControlValidation)(group, {
+        error,
+        errorId: validationId,
+        'aria-invalid': ariaInvalid,
+        'aria-describedby': ariaDescribedBy,
+        'aria-errormessage': ariaErrorMessage
+    });
+    const triggerProps = {
+        id,
+        'aria-label': id || ariaLabelledBy ? void 0 : value ? `Selected date: ${(0, external_date_fns_namespaceObject.format)(value, 'PPP')}` : placeholder,
+        'aria-labelledby': ariaLabelledBy,
+        ...validation.aria,
+        disabled: disabled || group.disabled
+    };
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
                 "data-slot": "date-picker",
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverTrigger, {
+                    grouped ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupPopoverTrigger, {
+                        ref: ref,
+                        ...triggerProps,
+                        className: className,
+                        placeholder: placeholder,
+                        children: value && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                            className: "truncate",
+                            children: (0, external_date_fns_namespaceObject.format)(value, 'PPP')
+                        })
+                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverTrigger, {
                         asChild: true,
                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_button_cjs_namespaceObject.Button, {
+                            ...triggerProps,
                             ref: ref,
-                            id: id,
                             variant: "outline",
-                            "aria-label": id || ariaLabelledBy ? void 0 : value ? `Selected date: ${(0, external_date_fns_namespaceObject.format)(value, 'PPP')}` : placeholder,
-                            "aria-labelledby": ariaLabelledBy,
-                            "aria-describedby": describedBy || void 0,
-                            "aria-errormessage": error ? validationId : ariaErrorMessage,
-                            "aria-invalid": error ? true : ariaInvalid,
                             className: (0, index_cjs_namespaceObject.cn)('w-full justify-start text-left font-normal [&>svg]:text-foreground-muted hover:[&>svg]:text-accent-foreground', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
-                            disabled: disabled,
                             children: [
                                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CalendarIcon, {}),
                                 value ? (0, external_date_fns_namespaceObject.format)(value, 'PPP') : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
@@ -73,6 +90,7 @@ const date_picker_DatePicker = /*#__PURE__*/ external_react_namespaceObject.forw
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverContent, {
                         className: "w-auto p-0",
+                        align: grouped ? 'start' : void 0,
                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_calendar_cjs_namespaceObject.Calendar, {
                             mode: "single",
                             selected: value,
@@ -83,7 +101,7 @@ const date_picker_DatePicker = /*#__PURE__*/ external_react_namespaceObject.forw
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldError, {
+            validation.ownMessage && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldError, {
                 id: validationId,
                 children: error
             })
@@ -93,29 +111,47 @@ const date_picker_DatePicker = /*#__PURE__*/ external_react_namespaceObject.forw
 const date_picker_DateRangePicker = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ id, value, onValueChange, disabled, placeholder = 'Pick a date range', className, calendarProps, error, errorId, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
     const generatedId = external_react_namespaceObject.useId();
     const validationId = errorId ?? `${id ?? `date-range-picker-${generatedId.replace(/:/g, '')}`}-error`;
-    const describedBy = [
-        ariaDescribedBy,
-        error ? validationId : void 0
-    ].filter(Boolean).join(' ');
     const computedLabel = value?.from ? value.to ? `Selected range: ${(0, external_date_fns_namespaceObject.format)(value.from, 'LLL dd, y')} to ${(0, external_date_fns_namespaceObject.format)(value.to, 'LLL dd, y')}` : `Selected date: ${(0, external_date_fns_namespaceObject.format)(value.from, 'LLL dd, y')}` : placeholder;
+    const group = (0, external_input_group_context_cjs_namespaceObject.useInputGroup)();
+    const grouped = group.inGroup;
+    const validation = (0, external_input_group_context_cjs_namespaceObject.useControlValidation)(group, {
+        error,
+        errorId: validationId,
+        'aria-invalid': ariaInvalid,
+        'aria-describedby': ariaDescribedBy,
+        'aria-errormessage': ariaErrorMessage
+    });
+    const triggerProps = {
+        id,
+        'aria-label': id || ariaLabelledBy ? void 0 : computedLabel,
+        'aria-labelledby': ariaLabelledBy,
+        ...validation.aria,
+        disabled: disabled || group.disabled
+    };
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
                 "data-slot": "date-range-picker",
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverTrigger, {
+                    grouped ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupPopoverTrigger, {
+                        ref: ref,
+                        ...triggerProps,
+                        className: className,
+                        placeholder: placeholder,
+                        children: value?.from && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+                            className: "truncate",
+                            children: [
+                                (0, external_date_fns_namespaceObject.format)(value.from, 'LLL dd, y'),
+                                value.to && ` - ${(0, external_date_fns_namespaceObject.format)(value.to, 'LLL dd, y')}`
+                            ]
+                        })
+                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverTrigger, {
                         asChild: true,
                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_button_cjs_namespaceObject.Button, {
+                            ...triggerProps,
                             ref: ref,
-                            id: id,
                             variant: "outline",
-                            "aria-label": id || ariaLabelledBy ? void 0 : computedLabel,
-                            "aria-labelledby": ariaLabelledBy,
-                            "aria-describedby": describedBy || void 0,
-                            "aria-errormessage": error ? validationId : ariaErrorMessage,
-                            "aria-invalid": error ? true : ariaInvalid,
                             className: (0, index_cjs_namespaceObject.cn)('w-[300px] justify-start text-left font-normal [&>svg]:text-foreground-muted hover:[&>svg]:text-accent-foreground', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
-                            disabled: disabled,
                             children: [
                                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CalendarIcon, {}),
                                 value?.from ? value.to ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
@@ -147,7 +183,7 @@ const date_picker_DateRangePicker = /*#__PURE__*/ external_react_namespaceObject
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldError, {
+            validation.ownMessage && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldError, {
                 id: validationId,
                 children: error
             })

package/dist/components/ui/date-picker.js

@@ -5,34 +5,51 @@ import { CalendarIcon } from "lucide-react";
 import { forwardRef, useId } from "react";
 import { Button } from "./button.js";
 import { Calendar } from "./calendar.js";
+import { InputGroupPopoverTrigger } from "./input-group.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { cn } from "../../lib/index.js";
 import { FormFieldError } from "./form-field.js";
+import { useControlValidation, useInputGroup } from "./input-group-context.js";
 const date_picker_DatePicker = /*#__PURE__*/ forwardRef(function({ id, value, onValueChange, disabled, placeholder = 'Pick a date', className, calendarProps, error, errorId, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
     const generatedId = useId();
     const validationId = errorId ?? `${id ?? `date-picker-${generatedId.replace(/:/g, '')}`}-error`;
-    const describedBy = [
-        ariaDescribedBy,
-        error ? validationId : void 0
-    ].filter(Boolean).join(' ');
+    const group = useInputGroup();
+    const grouped = group.inGroup;
+    const validation = useControlValidation(group, {
+        error,
+        errorId: validationId,
+        'aria-invalid': ariaInvalid,
+        'aria-describedby': ariaDescribedBy,
+        'aria-errormessage': ariaErrorMessage
+    });
+    const triggerProps = {
+        id,
+        'aria-label': id || ariaLabelledBy ? void 0 : value ? `Selected date: ${format(value, 'PPP')}` : placeholder,
+        'aria-labelledby': ariaLabelledBy,
+        ...validation.aria,
+        disabled: disabled || group.disabled
+    };
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsxs(Popover, {
                 "data-slot": "date-picker",
                 children: [
-                    /*#__PURE__*/ jsx(PopoverTrigger, {
+                    grouped ? /*#__PURE__*/ jsx(InputGroupPopoverTrigger, {
+                        ref: ref,
+                        ...triggerProps,
+                        className: className,
+                        placeholder: placeholder,
+                        children: value && /*#__PURE__*/ jsx("span", {
+                            className: "truncate",
+                            children: format(value, 'PPP')
+                        })
+                    }) : /*#__PURE__*/ jsx(PopoverTrigger, {
                         asChild: true,
                         children: /*#__PURE__*/ jsxs(Button, {
+                            ...triggerProps,
                             ref: ref,
-                            id: id,
                             variant: "outline",
-                            "aria-label": id || ariaLabelledBy ? void 0 : value ? `Selected date: ${format(value, 'PPP')}` : placeholder,
-                            "aria-labelledby": ariaLabelledBy,
-                            "aria-describedby": describedBy || void 0,
-                            "aria-errormessage": error ? validationId : ariaErrorMessage,
-                            "aria-invalid": error ? true : ariaInvalid,
                             className: cn('w-full justify-start text-left font-normal [&>svg]:text-foreground-muted hover:[&>svg]:text-accent-foreground', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
-                            disabled: disabled,
                             children: [
                                 /*#__PURE__*/ jsx(CalendarIcon, {}),
                                 value ? format(value, 'PPP') : /*#__PURE__*/ jsx("span", {
@@ -44,6 +61,7 @@ const date_picker_DatePicker = /*#__PURE__*/ forwardRef(function({ id, value, on
                     }),
                     /*#__PURE__*/ jsx(PopoverContent, {
                         className: "w-auto p-0",
+                        align: grouped ? 'start' : void 0,
                         children: /*#__PURE__*/ jsx(Calendar, {
                             mode: "single",
                             selected: value,
@@ -54,7 +72,7 @@ const date_picker_DatePicker = /*#__PURE__*/ forwardRef(function({ id, value, on
                     })
                 ]
             }),
-            /*#__PURE__*/ jsx(FormFieldError, {
+            validation.ownMessage && /*#__PURE__*/ jsx(FormFieldError, {
                 id: validationId,
                 children: error
             })
@@ -64,29 +82,47 @@ const date_picker_DatePicker = /*#__PURE__*/ forwardRef(function({ id, value, on
 const date_picker_DateRangePicker = /*#__PURE__*/ forwardRef(function({ id, value, onValueChange, disabled, placeholder = 'Pick a date range', className, calendarProps, error, errorId, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
     const generatedId = useId();
     const validationId = errorId ?? `${id ?? `date-range-picker-${generatedId.replace(/:/g, '')}`}-error`;
-    const describedBy = [
-        ariaDescribedBy,
-        error ? validationId : void 0
-    ].filter(Boolean).join(' ');
     const computedLabel = value?.from ? value.to ? `Selected range: ${format(value.from, 'LLL dd, y')} to ${format(value.to, 'LLL dd, y')}` : `Selected date: ${format(value.from, 'LLL dd, y')}` : placeholder;
+    const group = useInputGroup();
+    const grouped = group.inGroup;
+    const validation = useControlValidation(group, {
+        error,
+        errorId: validationId,
+        'aria-invalid': ariaInvalid,
+        'aria-describedby': ariaDescribedBy,
+        'aria-errormessage': ariaErrorMessage
+    });
+    const triggerProps = {
+        id,
+        'aria-label': id || ariaLabelledBy ? void 0 : computedLabel,
+        'aria-labelledby': ariaLabelledBy,
+        ...validation.aria,
+        disabled: disabled || group.disabled
+    };
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsxs(Popover, {
                 "data-slot": "date-range-picker",
                 children: [
-                    /*#__PURE__*/ jsx(PopoverTrigger, {
+                    grouped ? /*#__PURE__*/ jsx(InputGroupPopoverTrigger, {
+                        ref: ref,
+                        ...triggerProps,
+                        className: className,
+                        placeholder: placeholder,
+                        children: value?.from && /*#__PURE__*/ jsxs("span", {
+                            className: "truncate",
+                            children: [
+                                format(value.from, 'LLL dd, y'),
+                                value.to && ` - ${format(value.to, 'LLL dd, y')}`
+                            ]
+                        })
+                    }) : /*#__PURE__*/ jsx(PopoverTrigger, {
                         asChild: true,
                         children: /*#__PURE__*/ jsxs(Button, {
+                            ...triggerProps,
                             ref: ref,
-                            id: id,
                             variant: "outline",
-                            "aria-label": id || ariaLabelledBy ? void 0 : computedLabel,
-                            "aria-labelledby": ariaLabelledBy,
-                            "aria-describedby": describedBy || void 0,
-                            "aria-errormessage": error ? validationId : ariaErrorMessage,
-                            "aria-invalid": error ? true : ariaInvalid,
                             className: cn('w-[300px] justify-start text-left font-normal [&>svg]:text-foreground-muted hover:[&>svg]:text-accent-foreground', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
-                            disabled: disabled,
                             children: [
                                 /*#__PURE__*/ jsx(CalendarIcon, {}),
                                 value?.from ? value.to ? /*#__PURE__*/ jsxs(Fragment, {
@@ -118,7 +154,7 @@ const date_picker_DateRangePicker = /*#__PURE__*/ forwardRef(function({ id, valu
                     })
                 ]
             }),
-            /*#__PURE__*/ jsx(FormFieldError, {
+            validation.ownMessage && /*#__PURE__*/ jsx(FormFieldError, {
                 id: validationId,
                 children: error
             })

package/dist/components/ui/datetime-picker.cjs

@@ -33,18 +33,16 @@ const external_react_namespaceObject = require("react");
 const external_button_cjs_namespaceObject = require("./button.cjs");
 const external_calendar_cjs_namespaceObject = require("./calendar.cjs");
 const external_input_cjs_namespaceObject = require("./input.cjs");
+const external_input_group_cjs_namespaceObject = require("./input-group.cjs");
 const external_label_cjs_namespaceObject = require("./label.cjs");
 const external_popover_cjs_namespaceObject = require("./popover.cjs");
 const index_cjs_namespaceObject = require("../../lib/index.cjs");
 const external_form_field_cjs_namespaceObject = require("./form-field.cjs");
+const external_input_group_context_cjs_namespaceObject = require("./input-group-context.cjs");
 const datetime_picker_DateTimePicker = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ value, onValueChange, disabled, placeholder = 'Pick a date and time', className, use12Hour = false, id, error, errorId, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
     const [open, setOpen] = external_react_namespaceObject.useState(false);
     const generatedId = external_react_namespaceObject.useId();
     const validationId = errorId ?? `${id ?? `datetime-picker-${generatedId.replace(/:/g, '')}`}-error`;
-    const describedBy = [
-        ariaDescribedBy,
-        error ? validationId : void 0
-    ].filter(Boolean).join(' ');
     const [selectedDate, setSelectedDate] = external_react_namespaceObject.useState(value);
     const [timeValue, setTimeValue] = external_react_namespaceObject.useState(value ? (0, external_date_fns_namespaceObject.format)(value, use12Hour ? 'hh:mm a' : 'HH:mm') : '');
     const handleDateSelect = (date)=>{
@@ -74,6 +72,21 @@ const datetime_picker_DateTimePicker = /*#__PURE__*/ external_react_namespaceObj
         const timePart = (0, external_date_fns_namespaceObject.format)(selectedDate, use12Hour ? 'hh:mm a' : 'HH:mm');
         return `${datePart} at ${timePart}`;
     };
+    const group = (0, external_input_group_context_cjs_namespaceObject.useInputGroup)();
+    const grouped = group.inGroup;
+    const validation = (0, external_input_group_context_cjs_namespaceObject.useControlValidation)(group, {
+        error,
+        errorId: validationId,
+        'aria-invalid': ariaInvalid,
+        'aria-describedby': ariaDescribedBy,
+        'aria-errormessage': ariaErrorMessage
+    });
+    const triggerProps = {
+        id,
+        'aria-labelledby': ariaLabelledBy,
+        ...validation.aria,
+        disabled: disabled || group.disabled
+    };
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
@@ -81,18 +94,22 @@ const datetime_picker_DateTimePicker = /*#__PURE__*/ external_react_namespaceObj
                 open: open,
                 onOpenChange: setOpen,
                 children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverTrigger, {
+                    grouped ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupPopoverTrigger, {
+                        ref: ref,
+                        ...triggerProps,
+                        className: className,
+                        placeholder: placeholder,
+                        children: selectedDate && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                            className: "truncate",
+                            children: formatDisplayValue()
+                        })
+                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverTrigger, {
                         asChild: true,
                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_button_cjs_namespaceObject.Button, {
+                            ...triggerProps,
                             ref: ref,
-                            id: id,
-                            "aria-labelledby": ariaLabelledBy,
-                            "aria-describedby": describedBy || void 0,
-                            "aria-errormessage": error ? validationId : ariaErrorMessage,
-                            "aria-invalid": error ? true : ariaInvalid,
                             variant: "outline",
                             className: (0, index_cjs_namespaceObject.cn)('w-full justify-start text-left font-normal [&>svg]:text-foreground-muted hover:[&>svg]:text-accent-foreground', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
-                            disabled: disabled,
                             children: [
                                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CalendarIcon, {
                                     className: "mr-2 h-4 w-4"
@@ -163,7 +180,7 @@ const datetime_picker_DateTimePicker = /*#__PURE__*/ external_react_namespaceObj
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldError, {
+            validation.ownMessage && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldError, {
                 id: validationId,
                 children: error
             })

package/dist/components/ui/datetime-picker.js

@@ -5,18 +5,16 @@ import { forwardRef, useId, useState } from "react";
 import { Button } from "./button.js";
 import { Calendar } from "./calendar.js";
 import { Input } from "./input.js";
+import { InputGroupPopoverTrigger } from "./input-group.js";
 import { Label } from "./label.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { cn } from "../../lib/index.js";
 import { FormFieldError } from "./form-field.js";
+import { useControlValidation, useInputGroup } from "./input-group-context.js";
 const datetime_picker_DateTimePicker = /*#__PURE__*/ forwardRef(function({ value, onValueChange, disabled, placeholder = 'Pick a date and time', className, use12Hour = false, id, error, errorId, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage }, ref) {
     const [open, setOpen] = useState(false);
     const generatedId = useId();
     const validationId = errorId ?? `${id ?? `datetime-picker-${generatedId.replace(/:/g, '')}`}-error`;
-    const describedBy = [
-        ariaDescribedBy,
-        error ? validationId : void 0
-    ].filter(Boolean).join(' ');
     const [selectedDate, setSelectedDate] = useState(value);
     const [timeValue, setTimeValue] = useState(value ? format(value, use12Hour ? 'hh:mm a' : 'HH:mm') : '');
     const handleDateSelect = (date)=>{
@@ -46,6 +44,21 @@ const datetime_picker_DateTimePicker = /*#__PURE__*/ forwardRef(function({ value
         const timePart = format(selectedDate, use12Hour ? 'hh:mm a' : 'HH:mm');
         return `${datePart} at ${timePart}`;
     };
+    const group = useInputGroup();
+    const grouped = group.inGroup;
+    const validation = useControlValidation(group, {
+        error,
+        errorId: validationId,
+        'aria-invalid': ariaInvalid,
+        'aria-describedby': ariaDescribedBy,
+        'aria-errormessage': ariaErrorMessage
+    });
+    const triggerProps = {
+        id,
+        'aria-labelledby': ariaLabelledBy,
+        ...validation.aria,
+        disabled: disabled || group.disabled
+    };
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsxs(Popover, {
@@ -53,18 +66,22 @@ const datetime_picker_DateTimePicker = /*#__PURE__*/ forwardRef(function({ value
                 open: open,
                 onOpenChange: setOpen,
                 children: [
-                    /*#__PURE__*/ jsx(PopoverTrigger, {
+                    grouped ? /*#__PURE__*/ jsx(InputGroupPopoverTrigger, {
+                        ref: ref,
+                        ...triggerProps,
+                        className: className,
+                        placeholder: placeholder,
+                        children: selectedDate && /*#__PURE__*/ jsx("span", {
+                            className: "truncate",
+                            children: formatDisplayValue()
+                        })
+                    }) : /*#__PURE__*/ jsx(PopoverTrigger, {
                         asChild: true,
                         children: /*#__PURE__*/ jsxs(Button, {
+                            ...triggerProps,
                             ref: ref,
-                            id: id,
-                            "aria-labelledby": ariaLabelledBy,
-                            "aria-describedby": describedBy || void 0,
-                            "aria-errormessage": error ? validationId : ariaErrorMessage,
-                            "aria-invalid": error ? true : ariaInvalid,
                             variant: "outline",
                             className: cn('w-full justify-start text-left font-normal [&>svg]:text-foreground-muted hover:[&>svg]:text-accent-foreground', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:gap-4 future:text-foreground future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background', className),
-                            disabled: disabled,
                             children: [
                                 /*#__PURE__*/ jsx(CalendarIcon, {
                                     className: "mr-2 h-4 w-4"
@@ -135,7 +152,7 @@ const datetime_picker_DateTimePicker = /*#__PURE__*/ forwardRef(function({ value
                     })
                 ]
             }),
-            /*#__PURE__*/ jsx(FormFieldError, {
+            validation.ownMessage && /*#__PURE__*/ jsx(FormFieldError, {
                 id: validationId,
                 children: error
             })