@techsio/ui-kit 0.54.1 → 0.54.2

package/README.md

@@ -169,28 +169,34 @@ Docker image is defined in `docker/development/playwright/Dockerfile`.
 These tests are intentionally Docker-only; running them directly on the host is blocked to keep snapshots reproducible.
 Make sure Storybook is served at `TEST_BASE_URL` (default `http://127.0.0.1:6006` inside the container).
 You can run `pnpm -C libs/ui storybook` on the host and set `TEST_BASE_URL=http://host.docker.internal:6006`,
-or let Playwright start its own `http-server` inside Docker from `storybook-static`.
-For visual stability, stories used in regression tests should rely on local assets (avoid external image URLs).
+or let Playwright start its own static server inside Docker from `storybook-static`.
+Screenshots must match their baselines byte-for-byte after PNG decoding (Playwright's `toHaveScreenshot` tolerates anti-aliasing differences, so the spec compares decoded RGBA itself). `Math.random` is seeded per story and the clock is fixed.
+Prefer local assets in new stories. Existing remote images replay through Playwright's native `routeFromHAR()` from `test/fixtures/visual-assets/assets.har`; attached binaries are committed beside the HAR. Missing URLs or changed resource types fail the test. Snapshot updates keep these files read-only.
+
+When a story needs a new remote asset, record it using Playwright's [HAR recording](https://playwright.dev/docs/mock#recording-a-har-file). Use one recording context with `recordHar: { path: "assets.har", mode: "minimal", content: "attach", urlFilter: "https://images.unsplash.com/**" }`, visit the affected stories, then close the context to save it. Add the required entries and attachments to the existing HAR; preserve unrelated entries and keep one entry per URL (deduplicate repeated captures). Review image changes before updating screenshots.
+
+Run the focused replay contracts with `pnpm -C libs/ui test:visual-assets` after installing Chromium (`pnpm exec playwright install chromium`).
 
 Optional environment overrides:
 - `TEST_BASE_URL` (default: `http://127.0.0.1:6006` inside the container)
 - `PLAYWRIGHT_STORYBOOK_REBUILD` (default: `1`, rebuilds `storybook-static`; set to `0` to reuse an existing build)
+- `VISUAL_STORYBOOK_STATIC_DIR` (absolute path to another Storybook build, e.g. one built from `master`, to test against the committed baselines; skips the rebuild)
+- `VISUAL_BRANDS` (default: `base,neo,business`; also supports `akros`)
 - `TEST_STORIES` (comma-separated Storybook story ids to run, e.g. `atoms-button--states,molecules-productcard--layout-variants`)
 - `PLAYWRIGHT_WORKERS` (override worker count for parallel runs)
-- `PLAYWRIGHT_PAGE_RESET` (default: `1`, resets cookies/storage between stories; set to `0` for max speed if stable)
-- `DOCKER_PLATFORM` (default: `linux/amd64`)
+- `VISUAL_ASSET_HAR_PATH` (absolute path to an alternative HAR; its directory and attachments mount read-only)
 - `PLAYWRIGHT_DOCKER_IMAGE` (default: `new-engine-ui-playwright`)
 - `PLAYWRIGHT_DOCKER_SHM_SIZE` (default: `2g`, improves Playwright stability in Docker)
 - `PLAYWRIGHT_DOCKER_IPC` (default: `host`, improves Playwright stability in Docker)
-- `PLAYWRIGHT_DOCKER_SEQUENTIAL` (default: `0`, runs projects in parallel; set to `1` to reduce memory spikes)
-- `PLAYWRIGHT_DOCKER_PROJECTS` (comma-separated Playwright project names to run sequentially; default: `desktop,mobile`)
+- `PLAYWRIGHT_DOCKER_SEQUENTIAL` (default: `0`, runs projects in parallel; set to `1` to run one project at a time and reduce memory spikes)
+
+Extra arguments are passed to `playwright test`, e.g. `pnpm -C libs/ui test:components -- --project=neo-mobile-dark`.
+Tests always run as `linux/amd64`, matching the committed baselines. A full run must cover every story in every visual project; component behavior specs (`test/*.spec.ts`) run once in the `desktop` and `mobile` projects.
 
 ### Recommendation for `PLAYWRIGHT_WORKERS` and parallelism
 
-- If `PLAYWRIGHT_WORKERS` is not set, the Playwright config defaults to
-    using (CPU cores - 1) workers. This balances parallelism with leaving one
-    core for system processes. You can override it in CI with `PLAYWRIGHT_WORKERS=4` (or
-    another suitable value) depending on your runner size.
+- If `PLAYWRIGHT_WORKERS` is not set, the Docker runner uses 4 workers to bound
+    browser memory. Override it depending on your machine or CI runner size.
 - The test suite enables `fullyParallel` in Playwright config, so tests can run
     concurrently across files and workers — ensure tests are isolated and use
     unique snapshot names (the visual tests already include `story.id` in the

package/dist/atoms/checkbox.js

@@ -6,7 +6,7 @@ const checkboxVariants = tv({
         "size-checkbox",
         "rounded-checkbox border border-checkbox-border-base",
         "bg-checkbox-bg-base",
-        "after:-translate-x-1/2 after:-translate-y-1/2 after:absolute after:top-1/2 after:left-1/2",
+        "after:-translate-1/2 after:absolute after:top-1/2 after:left-1/2",
         "checked:bg-checkbox-bg-checked",
         "checked:border-checkbox-border-checked",
         "checked:after:token-icon-checkbox",
@@ -34,8 +34,8 @@ const checkboxVariants = tv({
 function Checkbox({ className, indeterminate, invalid, ref, ...props }) {
     const setIndeterminate = (node)=>{
         if (node) node.indeterminate = indeterminate ?? false;
-        if ("function" == typeof ref) ref(node);
-        else if (ref) ref.current = node;
+        if ("function" == typeof ref) return ref(node);
+        if (ref) ref.current = node;
     };
     return /*#__PURE__*/ jsx("input", {
         "aria-invalid": invalid || void 0,

package/dist/atoms/hotkeys.js

@@ -23,6 +23,7 @@ function Hotkeys({ hotkey, formatOptions, children, className, ref, ...props })
         }) : null)
     });
 }
+Hotkeys.Root = Hotkeys;
 Hotkeys.Key = function({ className, ref, ...props }) {
     return /*#__PURE__*/ jsx("kbd", {
         ...props,
@@ -47,6 +48,5 @@ Hotkeys.Separator = function({ children = "+", className, ref, ...props }) {
         children: children
     });
 };
-Hotkeys.Root = Hotkeys;
 Hotkeys.displayName = "Hotkeys";
 export { Hotkeys };

package/dist/atoms/numeric-input.js

@@ -116,7 +116,7 @@ function NumericInput({ id, size, value, defaultValue, onChange, dir = "ltr", de
         id: id || generatedId,
         ids: id ? {
             ...machineProps.ids,
-            input: id
+            input: machineProps.ids?.input ?? id
         } : machineProps.ids,
         dir,
         locale,

package/dist/atoms/skeleton.js

@@ -97,7 +97,6 @@ function Skeleton({ isLoaded = false, variant, children, speed, className, ref,
             children: children
         }) : /*#__PURE__*/ jsx("div", {
             "aria-busy": "true",
-            "aria-label": "Loading content",
             className: styles.root({
                 className
             }),
@@ -123,7 +122,6 @@ Skeleton.Circle = function({ size = "md", speed, isLoaded, variant, children, cl
     });
     return /*#__PURE__*/ jsx("div", {
         "aria-busy": "true",
-        "aria-label": "Loading content",
         className: styles.root({
             className: styles.circle({
                 className
@@ -150,7 +148,6 @@ Skeleton.Text = function({ noOfLines = 3, size = "md", speed, lastLineWidth = "8
     const lineCount = Number.isFinite(noOfLines) ? Math.max(1, noOfLines) : 1;
     return /*#__PURE__*/ jsx("div", {
         "aria-busy": "true",
-        "aria-label": "Loading content",
         className: styles.textContainer({
             className: containerClassName
         }),
@@ -189,7 +186,6 @@ Skeleton.Rectangle = function({ speed, isLoaded, variant, children, className, r
     });
     return /*#__PURE__*/ jsx("div", {
         "aria-busy": "true",
-        "aria-label": "Loading content",
         className: styles.root({
             className: styles.rectangle({
                 className

package/dist/atoms/tooltip.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Portal, normalizeProps, useMachine } from "@zag-js/react";
-import { useId } from "react";
+import { Children, Fragment as external_react_Fragment, cloneElement, isValidElement, useId } from "react";
 import { tv } from "tailwind-variants";
 import * as __rspack_external__zag_js_tooltip_cb65b1a2 from "@zag-js/tooltip";
 const tooltipVariants = tv({
@@ -44,6 +44,22 @@ const tooltipVariants = tv({
         variant: "default"
     }
 });
+function describeTooltipChildren(children, describedBy) {
+    return Children.map(children, (child)=>{
+        if (!/*#__PURE__*/ isValidElement(child)) return child;
+        if (child.type === external_react_Fragment) return /*#__PURE__*/ cloneElement(child, {}, describeTooltipChildren(child.props.children, describedBy));
+        const ids = [
+            child.props["aria-describedby"],
+            describedBy
+        ].flatMap((value)=>value?.split(/\s+/).filter(Boolean) ?? []);
+        const props = {
+            "aria-describedby": [
+                ...new Set(ids)
+            ].join(" ") || void 0
+        };
+        return "string" == typeof child.type && void 0 !== child.props.children ? /*#__PURE__*/ cloneElement(child, props, describeTooltipChildren(child.props.children, describedBy)) : /*#__PURE__*/ cloneElement(child, props);
+    });
+}
 function Tooltip({ content, children, className, ref, size, variant, id: MRAId, dir = "ltr", openDelay = 200, closeDelay = 200, interactive = true, defaultOpen, open, onOpenChange, disabled, closeOnEscape = true, closeOnPointerDown, closeOnScroll, closeOnClick, placement, offset = {
     mainAxis: 16,
     crossAxis: 0
@@ -76,19 +92,18 @@ function Tooltip({ content, children, className, ref, size, variant, id: MRAId,
         }
     });
     const api = __rspack_external__zag_js_tooltip_cb65b1a2.connect(service, normalizeProps);
+    const triggerProps = api.getTriggerProps();
     const { trigger, positioner, content: contentSlot, arrow } = tooltipVariants({
         variant,
         size
     });
-    const triggerProps = api.getTriggerProps();
-    const { onBeforeInput, ...spanCompatibleProps } = triggerProps;
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx("span", {
-                ...spanCompatibleProps,
+                ...triggerProps,
                 className: trigger(),
                 ref: ref,
-                children: children
+                children: describeTooltipChildren(children, triggerProps["aria-describedby"])
             }),
             /*#__PURE__*/ jsx(Portal, {
                 children: api.open && /*#__PURE__*/ jsx("div", {

package/dist/molecules/accordion.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { normalizeProps, useMachine } from "@zag-js/react";
-import { createContext, useContext, useId } from "react";
+import { createContext, useContext, useId, useMemo } from "react";
 import { Button } from "../atoms/button.js";
 import { Icon } from "../atoms/icon.js";
 import { tv } from "../utils.js";
@@ -170,9 +170,17 @@ Accordion.Item = function({ value, disabled, children, ref, className, ...props
 Accordion.Header = function({ children, ref, className, ...props }) {
     const { api, styles } = useAccordionContext();
     const { value, disabled } = useAccordionItemContext();
-    return /*#__PURE__*/ jsx("header", {
+    const headingRef = useMemo(()=>{
+        if ("function" == typeof ref || !ref) return ref;
+        return (node)=>{
+            ref.current = node;
+        };
+    }, [
+        ref
+    ]);
+    return /*#__PURE__*/ jsx("h3", {
         className: className,
-        ref: ref,
+        ref: headingRef,
         ...props,
         children: /*#__PURE__*/ jsx(Button, {
             className: styles.titleTrigger(),

package/dist/molecules/carousel.js

@@ -21,7 +21,7 @@ const carouselVariants = tv({
         ],
         slideGroup: [
             "overflow-hidden",
-            "scrollbar-hide",
+            "scrollbar-none",
             "data-dragging:cursor-grabbing",
             "data-[orientation=vertical]:h-full"
         ],
@@ -29,7 +29,7 @@ const carouselVariants = tv({
             "relative shrink-0",
             "flex items-center justify-center",
             "overflow-hidden",
-            "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-full"
+            "data-[orientation=vertical]:size-full"
         ],
         prevTrigger: "",
         nextTrigger: "",
@@ -77,22 +77,22 @@ const carouselVariants = tv({
                 "nextTrigger"
             ],
             class: [
-                'bg-carousel-trigger-bg-base hover:bg-carousel-trigger-bg-hover text-carousel-trigger',
-                'hover:text-carousel-trigger-fg-hover',
-                'transition-colors duration-200 motion-reduce:transition-none'
+                "bg-carousel-trigger-bg-base text-carousel-trigger hover:bg-carousel-trigger-bg-hover",
+                "hover:text-carousel-trigger-fg-hover",
+                "transition-colors duration-200 motion-reduce:transition-none"
             ]
         }
     ],
     variants: {
         objectFit: {
             cover: {
-                slide: "*:h-full *:w-full *:object-cover"
+                slide: "*:size-full *:object-cover"
             },
             contain: {
-                slide: "*:h-full *:w-full *:object-contain"
+                slide: "*:size-full *:object-contain"
             },
             fill: {
-                slide: "*:h-full *:w-full *:object-fill"
+                slide: "*:size-full *:object-fill"
             },
             none: {
                 slide: ""
@@ -103,10 +103,10 @@ const carouselVariants = tv({
                 control: "flex-col items-center justify-between"
             },
             top: {
-                control: "-translate-x-1/2 absolute top-0 left-1/2"
+                control: "absolute top-0 left-1/2 -translate-x-1/2"
             },
             bottom: {
-                control: "-translate-x-1/2 absolute bottom-0 left-1/2"
+                control: "absolute bottom-0 left-1/2 -translate-x-1/2"
             },
             unset: {}
         },
@@ -211,20 +211,20 @@ function Carousel({ id, size, objectFit, aspectRatio, orientation = "horizontal"
     const rootProps = api.getRootProps();
     const resolvedRootStyle = {
         ...rootProps.style,
-        ...void 0 !== width ? {
+        ...void 0 === width ? {} : {
             width
-        } : {},
-        ...void 0 !== height ? {
+        },
+        ...void 0 === height ? {} : {
             height
-        } : {}
+        }
     };
     const resolvedWrapperStyle = {
         ..."full" === size ? {
             width: "100%"
         } : {},
-        ...void 0 !== width ? {
+        ...void 0 === width ? {} : {
             width
-        } : {}
+        }
     };
     return /*#__PURE__*/ jsx(CarouselContext.Provider, {
         value: {

package/dist/molecules/chart.js

@@ -1,11 +1,12 @@
 import { jsx } from "react/jsx-runtime";
-import { areaY, barX, barY, colorLegend, d3Curve, defineChart, dot, group, lineY, stack } from "@tanstack/charts";
+import { areaY, barX, barY, colorLegend, d3Curve, dot, group, lineY, stack } from "@tanstack/charts";
 import { polar, radialArc } from "@tanstack/charts/polar";
+import { Chart } from "@tanstack/charts/react";
+import { scaleBand } from "@tanstack/charts/scales/band";
+import { scaleLinear } from "@tanstack/charts/scales/linear";
+import { scalePoint } from "@tanstack/charts/scales/point";
+import { renderChartSvg } from "@tanstack/charts/svg";
 import { tooltip as tooltip_tooltip } from "@tanstack/charts/tooltip";
-import { scaleBand } from "@tanstack/charts-scales/band";
-import { scaleLinear } from "@tanstack/charts-scales/linear";
-import { scalePoint } from "@tanstack/charts-scales/point";
-import { Chart } from "@tanstack/react-charts";
 import { scaleUtc } from "d3-scale";
 import { curveMonotoneX, pie } from "d3-shape";
 import { useMemo } from "react";
@@ -24,7 +25,6 @@ function toAccessor(accessor) {
     if ("function" == typeof accessor) return accessor;
     return (datum)=>datum[accessor];
 }
-const defineChartSpec = defineChart;
 const MAX_SERIES = 6;
 function resolveXAxis(data, getX, xLabel) {
     const values = data.map(getX);
@@ -153,7 +153,7 @@ function resolveBuild(config) {
                     label: config.legendLabel
                 })
             } : void 0,
-            animate: config.animate
+            svgAnimation: config.animate
         }
     };
 }
@@ -165,7 +165,7 @@ function warnOnSeriesOverflow(data, getColorIdentity) {
 }
 function buildLine(build) {
     const { data, getX, getY, getSeries } = build;
-    return defineChartSpec({
+    return {
         marks: [
             lineY(data, {
                 x: getX,
@@ -177,16 +177,18 @@ function buildLine(build) {
                 stroke: null == getSeries ? SERIES_1_PAINT : void 0
             })
         ],
-        x: build.xAxis,
-        y: build.valueAxis,
+        scales: {
+            x: build.xAxis,
+            y: build.valueAxis
+        },
         ...build.shared,
         tooltip: build.tooltipFor("y")
-    });
+    };
 }
 function buildArea(build) {
     const { data, getX, getY, getSeries } = build;
     const isStacked = build.stacked ?? true;
-    return defineChartSpec({
+    return {
         marks: [
             areaY(data, {
                 x: getX,
@@ -205,11 +207,13 @@ function buildArea(build) {
                 strokeWidth: 2
             })
         ],
-        x: build.xAxis,
-        y: build.valueAxis,
+        scales: {
+            x: build.xAxis,
+            y: build.valueAxis
+        },
         ...build.shared,
         tooltip: build.tooltipFor("y")
-    });
+    };
 }
 function barLayout(hasSeries, isStacked) {
     if (!hasSeries) return;
@@ -227,7 +231,7 @@ function buildBars(build, horizontal) {
         layout: barLayout(null != getSeries, isStacked),
         radius: null != getSeries && isStacked ? 0 : 4
     };
-    if (horizontal) return defineChartSpec({
+    if (horizontal) return {
         marks: [
             barX(data, {
                 x: getY,
@@ -235,20 +239,22 @@ function buildBars(build, horizontal) {
                 ...barOptions
             })
         ],
-        x: {
-            scale: scaleLinear,
-            nice: true,
-            grid: build.grid,
-            axis: {
-                label: build.yLabel,
-                ticks: build.valueTicks
-            }
+        scales: {
+            x: {
+                scale: scaleLinear,
+                nice: true,
+                grid: build.grid,
+                axis: {
+                    label: build.yLabel,
+                    ticks: build.valueTicks
+                }
+            },
+            y: build.bandAxis
         },
-        y: build.bandAxis,
         ...build.shared,
         tooltip: build.tooltipFor("x", true)
-    });
-    return defineChartSpec({
+    };
+    return {
         marks: [
             barY(data, {
                 x: getX,
@@ -256,15 +262,17 @@ function buildBars(build, horizontal) {
                 ...barOptions
             })
         ],
-        x: build.bandAxis,
-        y: build.valueAxis,
+        scales: {
+            x: build.bandAxis,
+            y: build.valueAxis
+        },
         ...build.shared,
         tooltip: build.tooltipFor("y")
-    });
+    };
 }
 function buildScatter(build) {
     const { data, getX, getY, getSeries } = build;
-    return defineChartSpec({
+    return {
         marks: [
             dot(data, {
                 x: getX,
@@ -275,14 +283,16 @@ function buildScatter(build) {
                 fill: null == getSeries ? SERIES_1_PAINT : void 0
             })
         ],
-        x: {
-            ...build.xAxis,
-            grid: build.grid
+        scales: {
+            x: {
+                ...build.xAxis,
+                grid: build.grid
+            },
+            y: build.valueAxis
         },
-        y: build.valueAxis,
         ...build.shared,
         tooltip: build.tooltipFor("y")
-    });
+    };
 }
 function buildPolar(build, donut) {
     const { data, getX, getY } = build;
@@ -290,12 +300,18 @@ function buildPolar(build, donut) {
     const slices = pie().sort(null).padAngle(0.02).value((datum)=>getY(datum))([
         ...data
     ]);
-    return defineChartSpec({
-        x: null,
-        y: null,
+    return {
+        scales: {
+            x: null,
+            y: null
+        },
         marks: [
             polar({
                 inset: POLAR_INSET,
+                scales: {
+                    angle: null,
+                    radius: null
+                },
                 marks: [
                     radialArc(slices, {
                         startAngle: "startAngle",
@@ -311,7 +327,7 @@ function buildPolar(build, donut) {
         ],
         ...build.shared,
         tooltip: build.polarTooltip()
-    });
+    };
 }
 function buildChartDefinition(config) {
     const build = resolveBuild(config);
@@ -332,6 +348,47 @@ function buildChartDefinition(config) {
             return buildLine(build);
     }
 }
+const CARTESIAN_GRID_PAINT_ORDER = [
+    "y-grid",
+    "x-grid"
+];
+const CARTESIAN_AXIS_PAINT_ORDER = [
+    "x-axis",
+    "y-axis",
+    "x-tick-rule",
+    "x-tick-label",
+    "y-tick-rule",
+    "y-tick-label",
+    "x-label",
+    "y-label"
+];
+function cartesianGuidePaintOrder(key, order) {
+    const index = order.findIndex((prefix)=>key === prefix || key.startsWith(`${prefix}:`));
+    return index < 0 ? order.length : index;
+}
+function renderCartesianChartSvg(scene, options) {
+    const nodes = scene.nodes.map((node)=>{
+        if ("group" !== node.kind || "grid" !== node.key && "axes" !== node.key) return node;
+        const order = "grid" === node.key ? CARTESIAN_GRID_PAINT_ORDER : CARTESIAN_AXIS_PAINT_ORDER;
+        const children = node.children.map((child)=>{
+            if ("axes" === node.key && "rule" === child.kind && child.key.startsWith("y-tick-rule:") && child.x1 > child.x2) return {
+                ...child,
+                x1: child.x2,
+                x2: child.x1
+            };
+            return child;
+        });
+        children.sort((left, right)=>cartesianGuidePaintOrder(left.key, order) - cartesianGuidePaintOrder(right.key, order));
+        return {
+            ...node,
+            children
+        };
+    });
+    return renderChartSvg({
+        ...scene,
+        nodes
+    }, options);
+}
 function chart_Chart({ type = "line", data, x, y, series, stacked, points = false, smooth = false, grid = true, legend, legendLabel, xLabel, yLabel, formatValue, height, aspectRatio, initialWidth = 640, animate = true, tooltip = true, ariaLabel, ariaDescription, className, onSelect }) {
     const { root, tooltip: tooltipSlot } = chartVariants();
     const tooltipClassName = tooltipSlot();
@@ -387,7 +444,8 @@ function chart_Chart({ type = "line", data, x, y, series, stacked, points = fals
         definition: definition,
         height: height,
         initialWidth: initialWidth,
-        onSelect: handleSelect
+        onSelect: handleSelect,
+        renderSvg: isPolar ? void 0 : renderCartesianChartSvg
     });
 }
 export { chart_Chart as Chart };

package/dist/molecules/color-select.js

@@ -20,7 +20,7 @@ const colorSelectVariants = tv({
         ],
         color: [
             "absolute",
-            "h-full w-full hover:brightness-75",
+            "size-full hover:brightness-75",
             "data-[selected=true]:brightness-75"
         ],
         icon: [
@@ -71,8 +71,8 @@ const colorSelectVariants = tv({
                 icon: "text-color-select-lg"
             },
             full: {
-                group: "h-full w-full gap-color-select-md",
-                cell: "h-full w-full",
+                group: "size-full gap-color-select-md",
+                cell: "size-full",
                 atom: "h-full",
                 icon: "size-color-select-icon"
             }

package/dist/molecules/combobox.js

@@ -100,7 +100,7 @@ const comboboxVariants = tv({
         triggerIndicator: [
             "text-combobox-trigger-fg-base group-hover:text-combobox-trigger-fg-hover",
             "motion-safe:transition-[transform,color] motion-safe:duration-200 motion-reduce:transition-none",
-            "rotate-0 group-data-[state=open]:rotate-180"
+            "rotate-none group-data-[state=open]:rotate-180"
         ],
         helper: [
             "data-[validation=success]:text-combobox-success-fg",
@@ -178,6 +178,14 @@ function Combobox({ id, name, label, size, placeholder = "Select option", disabl
         itemToValue: (item)=>item.value,
         isItemDisabled: (item)=>Boolean(resultsHidden || item.disabled || readOnly || navigation && !item.href)
     });
+    let normalizedValue = value;
+    if ("string" == typeof normalizedValue) normalizedValue = normalizedValue ? [
+        normalizedValue
+    ] : [];
+    let normalizedDefaultValue = defaultValue;
+    if ("string" == typeof normalizedDefaultValue) normalizedDefaultValue = normalizedDefaultValue ? [
+        normalizedDefaultValue
+    ] : [];
     const service = useMachine(machine, {
         id: uniqueId,
         name: navigation ? void 0 : name,
@@ -209,12 +217,8 @@ function Combobox({ id, name, label, size, placeholder = "Select option", disabl
             input: `${uniqueId}-input`,
             control: `${uniqueId}-control`
         },
-        value: navigation ? [] : "string" == typeof value ? [
-            value
-        ] : value,
-        defaultValue: navigation ? void 0 : "string" == typeof defaultValue ? [
-            defaultValue
-        ] : defaultValue,
+        value: navigation ? [] : normalizedValue,
+        defaultValue: navigation ? void 0 : normalizedDefaultValue,
         multiple: !navigation && multiple,
         inputValue,
         onValueChange: ({ value: selectedValue })=>{

package/dist/molecules/dialog.js

@@ -243,17 +243,6 @@ function Dialog({ id, open, onOpenChange, initialFocusEl, finalFocusEl, role = "
         }
     });
     const api = __rspack_external__zag_js_dialog_5c81bb31.connect(service, normalizeProps);
-    const contentProps = api.getContentProps();
-    const handleContentKeyDown = (event)=>{
-        contentProps.onKeyDown?.(event);
-        if (void 0 === open || !closeOnEscape || event.defaultPrevented || "Escape" !== event.key) return;
-        event.preventDefault();
-        api.setOpen(false);
-    };
-    const interactiveContentProps = {
-        ...contentProps,
-        onKeyDown: handleContentKeyDown
-    };
     const { backdrop, positioner, content, trigger: triggerSlot, title: titleSlot, description: descriptionSlot, closeTrigger, actions: actionsSlot } = dialogVariants({
         placement,
         size,
@@ -273,7 +262,7 @@ function Dialog({ id, open, onOpenChange, initialFocusEl, finalFocusEl, role = "
                         className: content({
                             className
                         }),
-                        ...interactiveContentProps,
+                        ...api.getContentProps(),
                         children: [
                             !hideCloseButton && /*#__PURE__*/ jsx(ActionIcon, {
                                 className: closeTrigger(),

package/dist/molecules/form-numeric-input.js

@@ -3,7 +3,8 @@ import { useId } from "react";
 import { Label } from "../atoms/label.js";
 import { NumericInput } from "../atoms/numeric-input.js";
 import { StatusText } from "../atoms/status-text.js";
-function FormNumericInput({ id, label, validateStatus = "default", helpText, showHelpTextIcon = "default" !== validateStatus, size = "md", required, disabled, children, describedBy, ...numericInputProps }) {
+function FormNumericInput({ id, ids, label, validateStatus = "default", helpText, showHelpTextIcon = "default" !== validateStatus, size = "md", required, disabled, describedBy, children, ...numericInputProps }) {
+    const inputId = ids?.input ?? id;
     const helpTextId = useId();
     const mergedDescribedBy = [
         describedBy,
@@ -14,7 +15,7 @@ function FormNumericInput({ id, label, validateStatus = "default", helpText, sho
         children: [
             /*#__PURE__*/ jsx(Label, {
                 disabled: disabled,
-                htmlFor: id,
+                htmlFor: inputId,
                 required: required,
                 size: size,
                 children: label
@@ -22,6 +23,7 @@ function FormNumericInput({ id, label, validateStatus = "default", helpText, sho
             /*#__PURE__*/ jsx(NumericInput, {
                 disabled: disabled,
                 id: id,
+                ids: ids,
                 invalid: "error" === validateStatus,
                 required: required,
                 size: size,