@techsio/ui-kit 0.54.0 → 0.54.2

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

@@ -10,8 +10,8 @@ const colorSelectVariants = tv({
         cell: "grid",
         atom: [
             "relative cursor-pointer p-color-select-atom",
-            "aspect-square overflow-hidden",
-            "border-2 transition-all duration-200 motion-reduce:transition-none",
+            "aspect-square min-w-0 overflow-clip",
+            "border-2 transition duration-200 motion-reduce:transition-none",
             "border-color-select-border shadow-color-select hover:border-color-select-border-hover",
             "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
             "focus-visible:outline-color-select-ring",
@@ -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

@@ -18,7 +18,7 @@ const comboboxVariants = tv({
             "block font-label text-label-md"
         ],
         control: [
-            "form-control-base relative flex w-full items-center overflow-hidden",
+            "form-control-base relative flex w-full min-w-0 items-center overflow-clip",
             "bg-combobox-bg-base",
             "transition-colors duration-200 ease-in-out motion-reduce:transition-none",
             "hover:border-combobox-border-hover hover:bg-combobox-bg-hover",
@@ -36,7 +36,7 @@ const comboboxVariants = tv({
         ],
         input: [
             "relative h-full min-w-0 flex-1 border-none bg-combobox-input-bg-base",
-            "hover:bg-combobox-input-bg-hover focus-visible:outline-none",
+            "hover:bg-combobox-input-bg-hover focus-visible:outline-hidden",
             "focus:bg-combobox-input-bg-focus",
             "placeholder:text-combobox-fg-placeholder",
             "data-disabled:text-combobox-fg-disabled",
@@ -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/date-picker.js

@@ -32,13 +32,13 @@ const datePickerVariants = tv({
             "transition-colors duration-200 motion-reduce:transition-none"
         ],
         segments: [
-            "date-picker-scrollbar-hidden flex min-w-0 flex-1 items-center overflow-x-auto overflow-y-hidden outline-none",
+            "date-picker-scrollbar-hidden flex min-w-0 flex-1 items-center overflow-x-auto overflow-y-hidden outline-hidden",
             "data-disabled:overflow-hidden"
         ],
         segmentGroup: "flex min-w-0 items-center",
         rangeSeparator: "shrink-0 px-date-picker-range-separator text-date-picker-range-separator-fg",
         segment: [
-            "date-picker-segment-size inline-flex shrink-0 items-center justify-center rounded-date-picker-day px-date-picker-segment tabular-nums outline-none",
+            "date-picker-segment-size inline-flex shrink-0 items-center justify-center rounded-date-picker-day px-date-picker-segment tabular-nums outline-hidden",
             "data-placeholder-shown:text-date-picker-segment-fg-placeholder",
             "focus:bg-date-picker-segment-bg-focus",
             "data-[type=literal]:min-h-0 data-[type=literal]:min-w-0 data-[type=literal]:px-0 data-[type=literal]:text-date-picker-control-fg",
@@ -74,7 +74,7 @@ const datePickerVariants = tv({
             "data-[selection-mode=range]:w-date-picker-content-range",
             "border-(length:--border-width-date-picker-content) border-date-picker-content-border",
             "rounded-date-picker-content bg-date-picker-content-bg text-date-picker-content-fg shadow-date-picker-content",
-            "outline-none duration-200 ease-out",
+            "outline-hidden duration-200 ease-out",
             "motion-safe:transition motion-reduce:transition-none",
             "starting:-translate-y-date-picker-enter-offset starting:opacity-0"
         ],
@@ -84,7 +84,7 @@ const datePickerVariants = tv({
         ],
         monthPanel: [
             "grid min-w-0 content-start gap-date-picker-calendar",
-            "sm:data-[index=1]:border-date-picker-month-divider-border sm:data-[index=1]:border-l sm:data-[index=1]:pl-date-picker-content"
+            "sm:data-[index=1]:border-date-picker-month-divider-border sm:data-[index=1]:border-s sm:data-[index=1]:ps-date-picker-content"
         ],
         view: "min-w-0",
         viewControl: "flex min-w-0 items-center justify-between gap-date-picker-calendar",
@@ -120,8 +120,8 @@ const datePickerVariants = tv({
             "data-today:border-date-picker-day-today-border",
             "data-in-range:rounded-none data-in-range:bg-date-picker-day-bg-range",
             "data-in-hover-range:rounded-none data-in-hover-range:bg-date-picker-day-bg-range-hover",
-            "data-range-start:rounded-date-picker-day data-range-start:rounded-r-none",
-            "data-range-end:rounded-date-picker-day data-range-end:rounded-l-none",
+            "data-range-start:rounded-date-picker-day data-range-start:rounded-e-none",
+            "data-range-end:rounded-date-picker-day data-range-end:rounded-s-none",
             "data-range-start:bg-date-picker-day-bg-selected data-range-end:bg-date-picker-day-bg-selected",
             "data-range-start:text-date-picker-day-fg-selected data-range-end:text-date-picker-day-fg-selected",
             "data-selected:bg-date-picker-day-bg-selected data-selected:text-date-picker-day-fg-selected",
@@ -150,7 +150,7 @@ const datePickerVariants = tv({
         timeGroup: [
             "flex min-w-0 items-center gap-date-picker-time",
             "data-[index=1]:border-date-picker-time-border data-[index=1]:border-t data-[index=1]:pt-date-picker-time",
-            "sm:data-[index=1]:border-l sm:data-[index=1]:border-t-0 sm:data-[index=1]:pt-0 sm:data-[index=1]:pl-date-picker-time"
+            "sm:data-[index=1]:border-s sm:data-[index=1]:border-t-0 sm:data-[index=1]:pt-0 sm:data-[index=1]:ps-date-picker-time"
         ],
         timeGroupLabel: "shrink-0 font-date-picker-view text-date-picker-time-label-fg text-date-picker-time-label",
         timeFields: "flex min-w-0 items-center gap-date-picker-indicator",

package/dist/molecules/dialog.js

@@ -31,7 +31,7 @@ const dialogVariants = tv({
         ],
         trigger: [],
         closeTrigger: [
-            "absolute top-dialog-close-trigger-offset right-dialog-close-trigger-offset"
+            "absolute end-dialog-close-trigger-offset top-dialog-close-trigger-offset"
         ],
         actions: "mt-auto flex shrink-0 justify-end gap-dialog-actions pt-dialog-actions-top"
     },
@@ -43,11 +43,11 @@ const dialogVariants = tv({
             },
             left: {
                 positioner: "items-stretch justify-start",
-                content: "h-full rounded-dialog-content-side border-l-0"
+                content: "h-full rounded-dialog-content-side border-s-0"
             },
             right: {
                 positioner: "items-stretch justify-end",
-                content: "h-full rounded-dialog-content-side border-r-0"
+                content: "h-full rounded-dialog-content-side border-e-0"
             },
             top: {
                 positioner: "items-start justify-stretch",
@@ -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/file-upload.js

@@ -34,7 +34,7 @@ const fileUploadStyles = tv({
             "data-disabled:text-file-upload-item-disabled-fg"
         ],
         itemPreview: [
-            "flex size-file-upload-item-preview shrink-0 items-center justify-center overflow-hidden rounded-file-upload-item-preview text-file-upload-item-preview-fg",
+            "flex size-file-upload-item-preview shrink-0 items-center justify-center overflow-clip rounded-file-upload-item-preview text-file-upload-item-preview-fg",
             "data-disabled:text-file-upload-item-disabled-fg"
         ],
         itemPreviewImage: "size-full object-cover",

package/dist/molecules/form-checkbox.js

@@ -13,7 +13,7 @@ const checkboxVariants = tv({
             "rounded-checkbox border border-checkbox-border-base",
             "bg-checkbox-bg-base",
             "flex items-center justify-center",
-            "transition-all duration-200 motion-reduce:transition-none",
+            "transition duration-200 motion-reduce:transition-none",
             "data-[state=checked]:bg-checkbox-bg-checked",
             "data-[state=checked]:border-checkbox-border-checked",
             "data-[state=indeterminate]:bg-checkbox-bg-indeterminate",
@@ -42,7 +42,7 @@ const checkboxVariants = tv({
             "data-disabled:text-label-fg-disabled"
         ],
         hiddenInput: "sr-only",
-        textIndented: "data-[icon=false]:pl-form-checkbox-text-offset"
+        textIndented: "data-[icon=false]:ps-form-checkbox-text-offset"
     },
     variants: {
         size: {

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,