@uipath/apollo-wind 2.16.1 → 2.18.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

@@ -27,10 +27,10 @@ var __webpack_modules__ = {
     "@/components/ui/button" (module) {
         module.exports = require("./button.cjs");
     },
-    "./calendar" (module) {
+    "@/components/ui/calendar" (module) {
         module.exports = require("./calendar.cjs");
     },
-    "./card" (module) {
+    "@/components/ui/card" (module) {
         module.exports = require("./card.cjs");
     },
     "@/components/ui/checkbox" (module) {
@@ -57,13 +57,13 @@ var __webpack_modules__ = {
     "./datetime-picker" (module) {
         module.exports = require("./datetime-picker.cjs");
     },
-    "./dialog" (module) {
+    "@/components/ui/dialog" (module) {
         module.exports = require("./dialog.cjs");
     },
     "@/components/ui/dropdown-menu" (module) {
         module.exports = require("./dropdown-menu.cjs");
     },
-    "./editable-cell" (module) {
+    "@/components/ui/editable-cell" (module) {
         module.exports = require("./editable-cell.cjs");
     },
     "./empty-state" (module) {
@@ -78,7 +78,7 @@ var __webpack_modules__ = {
     "@/components/ui/input" (module) {
         module.exports = require("./input.cjs");
     },
-    "./label" (module) {
+    "@/components/ui/label" (module) {
         module.exports = require("./label.cjs");
     },
     "./layout" (module) {
@@ -138,7 +138,7 @@ var __webpack_modules__ = {
     "./switch" (module) {
         module.exports = require("./switch.cjs");
     },
-    "./table" (module) {
+    "@/components/ui/table" (module) {
         module.exports = require("./table.cjs");
     },
     "./tabs" (module) {
@@ -269,14 +269,14 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_button_group__rspack_import_8[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _calendar__rspack_import_9 = __webpack_require__("./calendar");
+    var _calendar__rspack_import_9 = __webpack_require__("@/components/ui/calendar");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _calendar__rspack_import_9)if ([
         "TreeView",
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_calendar__rspack_import_9[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _card__rspack_import_10 = __webpack_require__("./card");
+    var _card__rspack_import_10 = __webpack_require__("@/components/ui/card");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _card__rspack_import_10)if ([
         "TreeView",
@@ -339,7 +339,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_datetime_picker__rspack_import_18[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _dialog__rspack_import_19 = __webpack_require__("./dialog");
+    var _dialog__rspack_import_19 = __webpack_require__("@/components/ui/dialog");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _dialog__rspack_import_19)if ([
         "TreeView",
@@ -353,7 +353,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_dropdown_menu__rspack_import_20[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _editable_cell__rspack_import_21 = __webpack_require__("./editable-cell");
+    var _editable_cell__rspack_import_21 = __webpack_require__("@/components/ui/editable-cell");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _editable_cell__rspack_import_21)if ([
         "TreeView",
@@ -388,7 +388,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_input__rspack_import_25[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _label__rspack_import_26 = __webpack_require__("./label");
+    var _label__rspack_import_26 = __webpack_require__("@/components/ui/label");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _label__rspack_import_26)if ([
         "TreeView",
@@ -528,7 +528,7 @@ var __webpack_exports__ = {};
         "default"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_switch__rspack_import_45[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _table__rspack_import_46 = __webpack_require__("./table");
+    var _table__rspack_import_46 = __webpack_require__("@/components/ui/table");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _table__rspack_import_46)if ([
         "TreeView",

package/dist/styles.css

@@ -2143,6 +2143,12 @@
       border-color: color-mix(in oklab, var(--destructive) 20%, transparent);
     }
   }
+  .border-destructive\/30 {
+    border-color: var(--destructive);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--destructive) 30%, transparent);
+    }
+  }
   .border-destructive\/50 {
     border-color: var(--destructive);
     @supports (color: color-mix(in lab, red, red)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-wind",
-  "version": "2.16.1",
+  "version": "2.18.0",
   "description": "UiPath wind design system - A Tailwind CSS based React component library",
   "type": "module",
   "main": "./dist/index.js",
@@ -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": {