@uipath/apollo-wind 2.56.0 → 2.57.1

package/dist/components/ui/code-editors.shared.js

@@ -0,0 +1,264 @@
+import { jsx } from "react/jsx-runtime";
+import react from "@monaco-editor/react";
+import { useEffect, useId, useRef, useState } from "react";
+import { apolloCoreDarkCodeMirror, apolloCoreDarkHCCodeMirror, apolloCoreDarkHCMonaco, apolloCoreDarkMonaco, apolloCoreLightCodeMirror, apolloCoreLightHCCodeMirror, apolloCoreLightHCMonaco, apolloCoreLightMonaco, apolloFutureDarkCodeMirror, apolloFutureDarkMonaco, apolloFutureLightCodeMirror, apolloFutureLightMonaco } from "../../editor-themes/index.js";
+const editorThemeConfigs = [
+    {
+        key: 'future-dark',
+        label: 'Future Dark',
+        monacoThemeName: 'apollo-future-dark',
+        monacoExport: 'apolloFutureDarkMonaco',
+        cmExport: 'apolloFutureDarkCodeMirror',
+        monacoThemeObj: apolloFutureDarkMonaco,
+        cmTokens: apolloFutureDarkCodeMirror,
+        isDark: true,
+        family: 'Future'
+    },
+    {
+        key: 'future-light',
+        label: 'Future Light',
+        monacoThemeName: 'apollo-future-light',
+        monacoExport: 'apolloFutureLightMonaco',
+        cmExport: 'apolloFutureLightCodeMirror',
+        monacoThemeObj: apolloFutureLightMonaco,
+        cmTokens: apolloFutureLightCodeMirror,
+        isDark: false,
+        family: 'Future'
+    },
+    {
+        key: 'dark',
+        label: 'Dark',
+        monacoThemeName: 'apollo-core-dark',
+        monacoExport: 'apolloCoreDarkMonaco',
+        cmExport: 'apolloCoreDarkCodeMirror',
+        monacoThemeObj: apolloCoreDarkMonaco,
+        cmTokens: apolloCoreDarkCodeMirror,
+        isDark: true,
+        family: 'Core'
+    },
+    {
+        key: 'light',
+        label: 'Light',
+        monacoThemeName: 'apollo-core-light',
+        monacoExport: 'apolloCoreLightMonaco',
+        cmExport: 'apolloCoreLightCodeMirror',
+        monacoThemeObj: apolloCoreLightMonaco,
+        cmTokens: apolloCoreLightCodeMirror,
+        isDark: false,
+        family: 'Core'
+    },
+    {
+        key: 'dark-hc',
+        label: 'Dark High Contrast',
+        monacoThemeName: 'apollo-core-dark-hc',
+        monacoExport: 'apolloCoreDarkHCMonaco',
+        cmExport: 'apolloCoreDarkHCCodeMirror',
+        monacoThemeObj: apolloCoreDarkHCMonaco,
+        cmTokens: apolloCoreDarkHCCodeMirror,
+        isDark: true,
+        family: 'Core HC'
+    },
+    {
+        key: 'light-hc',
+        label: 'Light High Contrast',
+        monacoThemeName: 'apollo-core-light-hc',
+        monacoExport: 'apolloCoreLightHCMonaco',
+        cmExport: 'apolloCoreLightHCCodeMirror',
+        monacoThemeObj: apolloCoreLightHCMonaco,
+        cmTokens: apolloCoreLightHCCodeMirror,
+        isDark: false,
+        family: 'Core HC'
+    }
+];
+const monacoFullSample = `import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+type SortDirection = 'asc' | 'desc';
+
+interface Column<T> {
+  key: keyof T;
+  header: string;
+  sortable?: boolean;
+  render?: (value: T[keyof T], row: T) => ReactNode;
+}
+
+interface TableProps<T> {
+  data: T[];
+  columns: Column<T>[];
+  pageSize?: number;
+}
+
+export function DataTable<T extends { id: string | number }>({
+  data,
+  columns,
+  pageSize = 10,
+}: TableProps<T>) {
+  const [query, setQuery] = useState('');
+  const [sortKey, setSortKey] = useState<keyof T | null>(null);
+  const [sortDir, setSortDir] = useState<SortDirection>('asc');
+  const [page, setPage] = useState(1);
+
+  useEffect(() => { setPage(1); }, [query, sortKey, sortDir]);
+
+  const filtered = useMemo(() => {
+    if (!query.trim()) return data;
+    const q = query.toLowerCase();
+    return data.filter((row) =>
+      columns.some((col) => String(row[col.key]).toLowerCase().includes(q))
+    );
+  }, [data, columns, query]);
+
+  const sorted = useMemo(() => {
+    if (!sortKey) return filtered;
+    return [...filtered].sort((a, b) => {
+      const cmp = a[sortKey] < b[sortKey] ? -1 : a[sortKey] > b[sortKey] ? 1 : 0;
+      return sortDir === 'asc' ? cmp : -cmp;
+    });
+  }, [filtered, sortKey, sortDir]);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <input
+        className="rounded-lg border border-border px-3 py-2 text-sm"
+        placeholder="Search..."
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+      />
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="border-b border-border">
+            {columns.map((col) => (
+              <th key={String(col.key)} className="px-4 py-2 text-left">
+                {col.header}
+              </th>
+            ))}
+          </tr>
+        </thead>
+      </table>
+    </div>
+  );
+}`.trim();
+const monacoSample = `interface WorkflowNode {
+  id: string;
+  type: 'action' | 'condition' | 'trigger';
+  executionStatus: 'NotExecuted' | 'InProgress' | 'Completed' | 'Failed';
+}
+
+function getNextNodes(node: WorkflowNode): string[] {
+  if (node.executionStatus === 'Completed') {
+    return node.type === 'condition'
+      ? ['true-branch', 'false-branch']
+      : ['next'];
+  }
+  return [];
+}`.trim();
+let monacoThemesRegistered = false;
+function registerAllMonacoThemes(monaco) {
+    if (monacoThemesRegistered) return;
+    for (const cfg of editorThemeConfigs)monaco.editor.defineTheme(cfg.monacoThemeName, cfg.monacoThemeObj);
+    monacoThemesRegistered = true;
+}
+let demoDefaultsUsers = 0;
+let savedTypescriptDefaults = null;
+function acquireDemoTypescriptDefaults(monaco) {
+    demoDefaultsUsers += 1;
+    if (demoDefaultsUsers > 1) return;
+    const ts = monaco.languages.typescript.typescriptDefaults;
+    savedTypescriptDefaults = {
+        diagnostics: ts.getDiagnosticsOptions(),
+        compiler: ts.getCompilerOptions()
+    };
+    ts.setDiagnosticsOptions({
+        ...ts.getDiagnosticsOptions(),
+        noSemanticValidation: true
+    });
+    ts.setCompilerOptions({
+        ...ts.getCompilerOptions(),
+        jsx: monaco.languages.typescript.JsxEmit.Preserve
+    });
+}
+function releaseDemoTypescriptDefaults(monaco) {
+    demoDefaultsUsers -= 1;
+    if (demoDefaultsUsers > 0 || !savedTypescriptDefaults) return;
+    const ts = monaco.languages.typescript.typescriptDefaults;
+    ts.setDiagnosticsOptions(savedTypescriptDefaults.diagnostics);
+    ts.setCompilerOptions(savedTypescriptDefaults.compiler);
+    savedTypescriptDefaults = null;
+}
+function LiveMonacoEditor({ themeConfig, height = '220px', value, onChange, onMount, language = "typescript", options = {} }) {
+    const extension = 'json' === language ? 'json' : 'tsx';
+    const modelPath = `file:///editor-${useId().replace(/[^a-zA-Z0-9]/g, '')}.${extension}`;
+    const monacoRef = useRef(null);
+    useEffect(()=>()=>{
+            if (monacoRef.current) releaseDemoTypescriptDefaults(monacoRef.current);
+            monacoRef.current = null;
+        }, []);
+    return /*#__PURE__*/ jsx(react, {
+        height: height,
+        path: modelPath,
+        defaultLanguage: language,
+        ...onChange ? {
+            value: value ?? ''
+        } : {
+            defaultValue: value ?? monacoSample
+        },
+        theme: themeConfig.monacoThemeName,
+        beforeMount: (monaco)=>{
+            registerAllMonacoThemes(monaco);
+            if (!monacoRef.current) {
+                monacoRef.current = monaco;
+                acquireDemoTypescriptDefaults(monaco);
+            }
+        },
+        onChange: onChange,
+        onMount: onMount,
+        options: {
+            fontSize: 13,
+            lineHeight: 20,
+            minimap: {
+                enabled: false
+            },
+            scrollBeyondLastLine: false,
+            wordWrap: 'on',
+            fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace',
+            padding: {
+                top: 16,
+                bottom: 16
+            },
+            lineNumbers: 'on',
+            glyphMargin: false,
+            folding: false,
+            renderLineHighlight: 'line',
+            hideCursorInOverviewRuler: true,
+            overviewRulerBorder: false,
+            scrollbar: {
+                vertical: 'auto',
+                horizontal: 'hidden',
+                alwaysConsumeMouseWheel: false
+            },
+            automaticLayout: true,
+            fixedOverflowWidgets: true,
+            ...options
+        }
+    });
+}
+const futureDarkConfig = editorThemeConfigs[0];
+function getStorybookThemeConfig() {
+    const keys = editorThemeConfigs.map((c)=>c.key);
+    const found = Array.from(document.body.classList).find((c)=>keys.includes(c));
+    return editorThemeConfigs.find((c)=>c.key === found) ?? futureDarkConfig;
+}
+function useEditorThemeConfig() {
+    const [themeConfig, setThemeConfig] = useState(getStorybookThemeConfig);
+    useEffect(()=>{
+        const observer = new MutationObserver(()=>setThemeConfig(getStorybookThemeConfig()));
+        observer.observe(document.body, {
+            attributes: true,
+            attributeFilter: [
+                'class'
+            ]
+        });
+        return ()=>observer.disconnect();
+    }, []);
+    return themeConfig;
+}
+export { LiveMonacoEditor, editorThemeConfigs, monacoFullSample, monacoSample, registerAllMonacoThemes, useEditorThemeConfig };

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
             })