@uipath/apollo-wind 2.16.0 → 2.17.0

package/dist/components/forms/field-renderer.cjs

@@ -450,38 +450,12 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                 ]
             });
         case 'slider':
-            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(FormField, {
-                children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                        className: "flex justify-between",
-                        children: [
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FormLabel, {
-                                required: required,
-                                children: field.label
-                            }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                className: "text-sm text-muted-foreground",
-                                children: formField.value
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(slider_cjs_namespaceObject.Slider, {
-                        value: [
-                            formField.value
-                        ],
-                        onValueChange: (values)=>formField.onChange(values[0]),
-                        min: field.min || 0,
-                        max: field.max || 100,
-                        step: field.step || 1,
-                        disabled: disabled
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FormDescription, {
-                        children: field.description
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FormError, {
-                        children: error
-                    })
-                ]
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SliderField, {
+                field: field,
+                formField: formField,
+                error: error,
+                disabled: disabled,
+                required: required
             });
         case 'date':
             return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(FormField, {
@@ -588,6 +562,68 @@ function FormError({ children }) {
         children: children
     });
 }
+function SliderField({ field, formField, error, disabled, required }) {
+    const { watch } = (0, external_react_hook_form_namespaceObject.useFormContext)();
+    const watchedMax = field.maxRef ? watch(field.maxRef.fromField) : void 0;
+    const resolvedMax = resolveSliderMax(field, watchedMax);
+    const prevMaxRef = (0, external_react_namespaceObject.useRef)(resolvedMax);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (resolvedMax === prevMaxRef.current) return;
+        prevMaxRef.current = resolvedMax;
+        const v = formField.value;
+        if ('number' == typeof v && v > resolvedMax) formField.onChange(resolvedMax);
+    }, [
+        resolvedMax,
+        formField.value,
+        formField.onChange
+    ]);
+    const displayValue = (()=>{
+        const v = formField.value;
+        if ('number' == typeof v) return Math.min(v, resolvedMax);
+        return v;
+    })();
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(FormField, {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "flex justify-between",
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FormLabel, {
+                        required: required,
+                        children: field.label
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        className: "text-sm text-muted-foreground",
+                        children: displayValue
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(slider_cjs_namespaceObject.Slider, {
+                value: [
+                    displayValue ?? field.min ?? 0
+                ],
+                onValueChange: (values)=>formField.onChange(values[0]),
+                min: field.min || 0,
+                max: resolvedMax,
+                step: field.step || 1,
+                disabled: disabled
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FormDescription, {
+                children: field.description
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FormError, {
+                children: error
+            })
+        ]
+    });
+}
+function resolveSliderMax(field, watchedValue) {
+    if (field.maxRef) {
+        if ('number' == typeof watchedValue && Number.isFinite(watchedValue) && watchedValue > 0) return watchedValue;
+        if ('number' == typeof field.maxRef.fallback) return field.maxRef.fallback;
+    }
+    if ('number' == typeof field.max) return field.max;
+    return 100;
+}
 exports.FormFieldRenderer = __webpack_exports__.FormFieldRenderer;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "FormFieldRenderer"

package/dist/components/forms/field-renderer.js

@@ -422,38 +422,12 @@ function FieldByType({ field, formField, error, disabled, required, options }) {
                 ]
             });
         case 'slider':
-            return /*#__PURE__*/ jsxs(FormField, {
-                children: [
-                    /*#__PURE__*/ jsxs("div", {
-                        className: "flex justify-between",
-                        children: [
-                            /*#__PURE__*/ jsx(FormLabel, {
-                                required: required,
-                                children: field.label
-                            }),
-                            /*#__PURE__*/ jsx("span", {
-                                className: "text-sm text-muted-foreground",
-                                children: formField.value
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsx(Slider, {
-                        value: [
-                            formField.value
-                        ],
-                        onValueChange: (values)=>formField.onChange(values[0]),
-                        min: field.min || 0,
-                        max: field.max || 100,
-                        step: field.step || 1,
-                        disabled: disabled
-                    }),
-                    /*#__PURE__*/ jsx(FormDescription, {
-                        children: field.description
-                    }),
-                    /*#__PURE__*/ jsx(FormError, {
-                        children: error
-                    })
-                ]
+            return /*#__PURE__*/ jsx(SliderField, {
+                field: field,
+                formField: formField,
+                error: error,
+                disabled: disabled,
+                required: required
             });
         case 'date':
             return /*#__PURE__*/ jsxs(FormField, {
@@ -560,4 +534,66 @@ function FormError({ children }) {
         children: children
     });
 }
+function SliderField({ field, formField, error, disabled, required }) {
+    const { watch } = useFormContext();
+    const watchedMax = field.maxRef ? watch(field.maxRef.fromField) : void 0;
+    const resolvedMax = resolveSliderMax(field, watchedMax);
+    const prevMaxRef = useRef(resolvedMax);
+    useEffect(()=>{
+        if (resolvedMax === prevMaxRef.current) return;
+        prevMaxRef.current = resolvedMax;
+        const v = formField.value;
+        if ('number' == typeof v && v > resolvedMax) formField.onChange(resolvedMax);
+    }, [
+        resolvedMax,
+        formField.value,
+        formField.onChange
+    ]);
+    const displayValue = (()=>{
+        const v = formField.value;
+        if ('number' == typeof v) return Math.min(v, resolvedMax);
+        return v;
+    })();
+    return /*#__PURE__*/ jsxs(FormField, {
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex justify-between",
+                children: [
+                    /*#__PURE__*/ jsx(FormLabel, {
+                        required: required,
+                        children: field.label
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: "text-sm text-muted-foreground",
+                        children: displayValue
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(Slider, {
+                value: [
+                    displayValue ?? field.min ?? 0
+                ],
+                onValueChange: (values)=>formField.onChange(values[0]),
+                min: field.min || 0,
+                max: resolvedMax,
+                step: field.step || 1,
+                disabled: disabled
+            }),
+            /*#__PURE__*/ jsx(FormDescription, {
+                children: field.description
+            }),
+            /*#__PURE__*/ jsx(FormError, {
+                children: error
+            })
+        ]
+    });
+}
+function resolveSliderMax(field, watchedValue) {
+    if (field.maxRef) {
+        if ('number' == typeof watchedValue && Number.isFinite(watchedValue) && watchedValue > 0) return watchedValue;
+        if ('number' == typeof field.maxRef.fallback) return field.maxRef.fallback;
+    }
+    if ('number' == typeof field.max) return field.max;
+    return 100;
+}
 export { FormFieldRenderer };

package/dist/components/forms/form-schema.d.ts

@@ -184,10 +184,26 @@ export interface CheckboxFieldMetadata extends BaseFieldMetadata {
 export interface SwitchFieldMetadata extends BaseFieldMetadata {
     type: 'switch';
 }
+/**
+ * Reference to another form field's value, used to drive a numeric property
+ * (e.g. a slider's `max`) at render time.
+ */
+export interface FieldRef {
+    /** Form field path to watch (react-hook-form name). */
+    fromField: string;
+    /** Used when the watched value is missing or not a finite positive number. */
+    fallback?: number;
+}
 export interface SliderFieldMetadata extends BaseFieldMetadata {
     type: 'slider';
     min?: number;
     max?: number;
+    /**
+     * Dynamic upper bound sourced from another form field. Takes precedence
+     * over `max` when present. The watched field's value is used as the slider's
+     * `max` when it's a finite positive number; otherwise `fallback` is used.
+     */
+    maxRef?: FieldRef;
     step?: number;
 }
 export interface DateFieldMetadata extends BaseFieldMetadata {

package/dist/components/ui/calendar.cjs

@@ -62,7 +62,6 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
             dropdown_root: (0, index_cjs_namespaceObject.cn)('has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border', defaultClassNames.dropdown_root),
             dropdown: (0, index_cjs_namespaceObject.cn)('bg-popover absolute inset-0 opacity-0', defaultClassNames.dropdown),
             caption_label: (0, index_cjs_namespaceObject.cn)('select-none font-medium', 'label' === captionLayout ? 'text-sm' : '[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5', defaultClassNames.caption_label),
-            table: 'w-full border-collapse',
             weekdays: (0, index_cjs_namespaceObject.cn)('flex gap-2', defaultClassNames.weekdays),
             weekday: (0, index_cjs_namespaceObject.cn)('text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal', defaultClassNames.weekday),
             week: (0, index_cjs_namespaceObject.cn)('mt-2 flex w-full gap-2', defaultClassNames.week),

package/dist/components/ui/calendar.js

@@ -33,7 +33,6 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
             dropdown_root: cn('has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border', defaultClassNames.dropdown_root),
             dropdown: cn('bg-popover absolute inset-0 opacity-0', defaultClassNames.dropdown),
             caption_label: cn('select-none font-medium', 'label' === captionLayout ? 'text-sm' : '[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5', defaultClassNames.caption_label),
-            table: 'w-full border-collapse',
             weekdays: cn('flex gap-2', defaultClassNames.weekdays),
             weekday: cn('text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal', defaultClassNames.weekday),
             week: cn('mt-2 flex w-full gap-2', defaultClassNames.week),

package/dist/components/ui/index.cjs

@@ -36,7 +36,7 @@ var __webpack_modules__ = {
     "@/components/ui/checkbox" (module) {
         module.exports = require("./checkbox.cjs");
     },
-    "./collapsible" (module) {
+    "@/components/ui/collapsible" (module) {
         module.exports = require("./collapsible.cjs");
     },
     "./combobox" (module) {
@@ -45,7 +45,7 @@ var __webpack_modules__ = {
     "@/components/ui/command" (module) {
         module.exports = require("./command.cjs");
     },
-    "./context-menu" (module) {
+    "@/components/ui/context-menu" (module) {
         module.exports = require("./context-menu.cjs");
     },
     "./data-table" (module) {
@@ -72,7 +72,7 @@ var __webpack_modules__ = {
     "./file-upload" (module) {
         module.exports = require("./file-upload.cjs");
     },
-    "./hover-card" (module) {
+    "@/components/ui/hover-card" (module) {
         module.exports = require("./hover-card.cjs");
     },
     "@/components/ui/input" (module) {
@@ -150,7 +150,7 @@ var __webpack_modules__ = {
     "./toggle-group" (module) {
         module.exports = require("./toggle-group.cjs");
     },
-    "@/components/ui/toggle" (module) {
+    "./toggle" (module) {
         module.exports = require("./toggle.cjs");
     },
     "./tooltip" (module) {
@@ -290,7 +290,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_checkbox__rspack_import_11[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _collapsible__rspack_import_12 = __webpack_require__("./collapsible");
+    var _collapsible__rspack_import_12 = __webpack_require__("@/components/ui/collapsible");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _collapsible__rspack_import_12)if ([
         "TreeView",
@@ -311,7 +311,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_command__rspack_import_14[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _context_menu__rspack_import_15 = __webpack_require__("./context-menu");
+    var _context_menu__rspack_import_15 = __webpack_require__("@/components/ui/context-menu");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _context_menu__rspack_import_15)if ([
         "TreeView",
@@ -374,7 +374,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_file_upload__rspack_import_23[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _hover_card__rspack_import_24 = __webpack_require__("./hover-card");
+    var _hover_card__rspack_import_24 = __webpack_require__("@/components/ui/hover-card");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _hover_card__rspack_import_24)if ([
         "TreeView",
@@ -549,7 +549,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_textarea__rspack_import_48[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _toggle__rspack_import_49 = __webpack_require__("@/components/ui/toggle");
+    var _toggle__rspack_import_49 = __webpack_require__("./toggle");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _toggle__rspack_import_49)if ([
         "TreeView",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-wind",
-  "version": "2.16.0",
+  "version": "2.17.0",
   "description": "UiPath wind design system - A Tailwind CSS based React component library",
   "type": "module",
   "main": "./dist/index.js",
@@ -111,7 +111,7 @@
     "tailwindcss": "^4.1.17",
     "vaul": "^1.1.2",
     "zod": "^4.3.5",
-    "@uipath/apollo-core": "5.9.0"
+    "@uipath/apollo-core": "5.9.1"
   },
   "devDependencies": {
     "@rsbuild/plugin-react": "^1.4.1",
@@ -134,8 +134,8 @@
     "@types/react": "^19.2.6",
     "@types/react-dom": "^19.2.2",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "@vitest/coverage-v8": "^4.1.0",
-    "@vitest/ui": "^4.1.0",
+    "@vitest/coverage-v8": "^4.1.5",
+    "@vitest/ui": "^4.1.5",
     "ajv": "^8.18.0",
     "autoprefixer": "^10.4.22",
     "globals": "^16.5.0",
@@ -150,7 +150,7 @@
     "storybook": "^10.2.15",
     "tailwindcss": "^4.1.17",
     "typescript": "^5.9.3",
-    "vitest": "^4.1.0"
+    "vitest": "^4.1.5"
   },
   "keywords": [
     "react",
@@ -164,15 +164,12 @@
   "author": "UiPath",
   "license": "MIT",
   "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org"
+    "access": "public"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/uipath/apollo-ui"
-  },
-  "bugs": {
-    "url": "https://github.com/uipath/apollo-ui/issues"
+    "url": "https://github.com/UiPath/apollo-ui.git",
+    "directory": "packages/apollo-wind"
   },
   "homepage": "https://apollo-design.vercel.app",
   "scripts": {