@techsio/ui-kit 0.54.1 → 0.54.2

package/dist/molecules/menu.js

@@ -72,6 +72,62 @@ const menuVariants = tv({
         size: "md"
     }
 });
+function renderMenuItem(menuItem, { api, service, slots, size, closeOnSelect, onCheckedChange, onSelect }) {
+    const { separator, optionItem, item: itemSlot, itemIcon, itemText, itemIndicator } = slots;
+    if ("separator" === menuItem.type) return /*#__PURE__*/ jsx("hr", {
+        className: separator()
+    }, `separator-${menuItem.id}`);
+    if ("submenu" === menuItem.type) return /*#__PURE__*/ jsx(SubmenuItem, {
+        closeOnSelect: closeOnSelect,
+        item: menuItem,
+        onCheckedChange: onCheckedChange,
+        onSelect: onSelect,
+        parentApi: api,
+        parentService: service,
+        size: size
+    }, menuItem.value);
+    if ("radio" === menuItem.type || "checkbox" === menuItem.type) return /*#__PURE__*/ jsxs("li", {
+        className: `${itemSlot()} ${optionItem()}`,
+        ...api.getOptionItemProps({
+            type: menuItem.type,
+            value: menuItem.value,
+            checked: menuItem.checked,
+            onCheckedChange: (checked)=>{
+                onCheckedChange?.(menuItem, checked);
+            }
+        }),
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                className: itemText(),
+                children: menuItem.label
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: itemIndicator(),
+                children: menuItem.checked && /*#__PURE__*/ jsx(Icon, {
+                    icon: "token-icon-check",
+                    size: "current"
+                })
+            })
+        ]
+    }, menuItem.value);
+    return /*#__PURE__*/ jsxs("li", {
+        className: itemSlot(),
+        ...api.getItemProps({
+            value: menuItem.value,
+            disabled: menuItem.disabled
+        }),
+        children: [
+            menuItem.icon && /*#__PURE__*/ jsx(Icon, {
+                className: itemIcon(),
+                icon: menuItem.icon
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: itemText(),
+                children: menuItem.label
+            })
+        ]
+    }, menuItem.value);
+}
 function SubmenuItem({ item, parentApi, parentService, size = "md", onCheckedChange, onSelect, closeOnSelect = true }) {
     const submenuService = useMachine(__rspack_external__zag_js_menu_d3b38dd2.machine, {
         id: useId(),
@@ -88,63 +144,18 @@ function SubmenuItem({ item, parentApi, parentService, size = "md", onCheckedCha
         submenuService,
         parentService
     ]);
-    const { positioner, content, separator, optionItem, item: itemSlot, itemIcon, itemText, itemIndicator, submenuIndicator } = menuVariants({
+    const slots = menuVariants({
         size
     });
-    const renderMenuItem = (menuItem)=>{
-        if ("separator" === menuItem.type) return /*#__PURE__*/ jsx("hr", {
-            className: separator()
-        }, `separator-${menuItem.id}`);
-        if ("submenu" === menuItem.type) return /*#__PURE__*/ jsx(SubmenuItem, {
-            closeOnSelect: closeOnSelect,
-            item: menuItem,
-            onCheckedChange: onCheckedChange,
-            onSelect: onSelect,
-            parentApi: submenuApi,
-            parentService: submenuService,
-            size: size
-        }, menuItem.value);
-        if ("radio" === menuItem.type || "checkbox" === menuItem.type) return /*#__PURE__*/ jsxs("li", {
-            className: `${itemSlot()} ${optionItem()}`,
-            ...submenuApi.getOptionItemProps({
-                type: menuItem.type,
-                value: menuItem.value,
-                checked: menuItem.checked,
-                onCheckedChange: (checked)=>{
-                    onCheckedChange?.(menuItem, checked);
-                }
-            }),
-            children: [
-                /*#__PURE__*/ jsx("span", {
-                    className: itemText(),
-                    children: menuItem.label
-                }),
-                /*#__PURE__*/ jsx("span", {
-                    className: itemIndicator(),
-                    children: menuItem.checked && /*#__PURE__*/ jsx(Icon, {
-                        icon: "token-icon-check",
-                        size: "current"
-                    })
-                })
-            ]
-        }, menuItem.value);
-        return /*#__PURE__*/ jsxs("li", {
-            className: itemSlot(),
-            ...submenuApi.getItemProps({
-                value: menuItem.value,
-                disabled: menuItem.disabled
-            }),
-            children: [
-                menuItem.icon && /*#__PURE__*/ jsx(Icon, {
-                    className: itemIcon(),
-                    icon: menuItem.icon
-                }),
-                /*#__PURE__*/ jsx("span", {
-                    className: itemText(),
-                    children: menuItem.label
-                })
-            ]
-        }, menuItem.value);
+    const { positioner, content, item: itemSlot, itemIcon, itemText, submenuIndicator } = slots;
+    const itemContext = {
+        api: submenuApi,
+        service: submenuService,
+        slots,
+        size,
+        closeOnSelect,
+        onCheckedChange,
+        onSelect
     };
     const triggerProps = parentApi.getTriggerItemProps(submenuApi);
     return /*#__PURE__*/ jsxs(Fragment, {
@@ -175,7 +186,7 @@ function SubmenuItem({ item, parentApi, parentService, size = "md", onCheckedCha
                     children: /*#__PURE__*/ jsx("ul", {
                         className: content(),
                         ...submenuApi.getContentProps(),
-                        children: item.items.map(renderMenuItem)
+                        children: item.items.map((menuItem)=>renderMenuItem(menuItem, itemContext))
                     })
                 })
             })
@@ -197,7 +208,7 @@ function Menu({ "aria-label": ariaLabel, dir, id, closeOnSelect = true, loopFocu
         open,
         defaultOpen,
         composite,
-        navigate,
+        navigate: navigate ? (details)=>navigate(details.value) : void 0,
         onSelect,
         onOpenChange,
         onEscapeKeyDown,
@@ -208,63 +219,18 @@ function Menu({ "aria-label": ariaLabel, dir, id, closeOnSelect = true, loopFocu
         "aria-label": ariaLabel
     });
     const api = __rspack_external__zag_js_menu_d3b38dd2.connect(service, normalizeProps);
-    const { trigger, positioner, content, separator, optionItem, item: itemSlot, itemIcon, itemText, itemIndicator } = menuVariants({
+    const slots = menuVariants({
         size
     });
-    const renderMenuItem = (item)=>{
-        if ("separator" === item.type) return /*#__PURE__*/ jsx("hr", {
-            className: separator()
-        }, `separator-${item.id}`);
-        if ("submenu" === item.type) return /*#__PURE__*/ jsx(SubmenuItem, {
-            closeOnSelect: closeOnSelect,
-            item: item,
-            onCheckedChange: onCheckedChange,
-            onSelect: onSelect,
-            parentApi: api,
-            parentService: service,
-            size: size
-        }, item.value);
-        if ("radio" === item.type || "checkbox" === item.type) return /*#__PURE__*/ jsxs("li", {
-            className: `${itemSlot()} ${optionItem()}`,
-            ...api.getOptionItemProps({
-                type: item.type,
-                value: item.value,
-                checked: item.checked,
-                onCheckedChange: (checked)=>{
-                    onCheckedChange?.(item, checked);
-                }
-            }),
-            children: [
-                /*#__PURE__*/ jsx("span", {
-                    className: itemText(),
-                    children: item.label
-                }),
-                /*#__PURE__*/ jsx("span", {
-                    className: itemIndicator(),
-                    children: item.checked && /*#__PURE__*/ jsx(Icon, {
-                        icon: "token-icon-check",
-                        size: "current"
-                    })
-                })
-            ]
-        }, item.value);
-        return /*#__PURE__*/ jsxs("li", {
-            className: itemSlot(),
-            ...api.getItemProps({
-                value: item.value,
-                disabled: item.disabled
-            }),
-            children: [
-                item.icon && /*#__PURE__*/ jsx(Icon, {
-                    className: itemIcon(),
-                    icon: item.icon
-                }),
-                /*#__PURE__*/ jsx("span", {
-                    className: itemText(),
-                    children: item.label
-                })
-            ]
-        }, item.value);
+    const { trigger, positioner, content } = slots;
+    const itemContext = {
+        api,
+        service,
+        slots,
+        size,
+        closeOnSelect,
+        onCheckedChange,
+        onSelect
     };
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
@@ -298,7 +264,7 @@ function Menu({ "aria-label": ariaLabel, dir, id, closeOnSelect = true, loopFocu
                     children: /*#__PURE__*/ jsx("ul", {
                         className: content(),
                         ...api.getContentProps(),
-                        children: items.map(renderMenuItem)
+                        children: items.map((item)=>renderMenuItem(item, itemContext))
                     })
                 })
             })

package/dist/molecules/pagination.js

@@ -146,7 +146,8 @@ function Pagination({ page, defaultPage = 1, count, pageSize = 10, siblingCount
                 as: linkAs
             } : {},
             ...isNavigable ? {} : {
-                disabled: true
+                disabled: true,
+                role: triggerProps.role ?? sharedLinkProps?.role ?? "link"
             }
         });
     };

package/dist/molecules/phone-input.js

@@ -269,9 +269,9 @@ PhoneInput.Control = function({ children, className, ref, ...props }) {
     const styles = phoneInputVariants({
         size
     });
-    const validationDataAttrs = "default" !== validateStatus ? {
+    const validationDataAttrs = "default" === validateStatus ? {} : {
         "data-validation": validateStatus
-    } : {};
+    };
     return /*#__PURE__*/ jsx("div", {
         className: styles.control({
             className
@@ -352,12 +352,14 @@ PhoneInput.CountryControl = function({ children, className, ref, ...props }) {
         children: children
     });
 };
-PhoneInput.CountryTrigger = function({ children, className, ref, ...props }) {
+PhoneInput.CountryTrigger = function({ children, className, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
     const { selectedCountryItem, size } = usePhoneInputContext();
     const styles = phoneInputVariants({
         size
     });
     return /*#__PURE__*/ jsx(Select.Trigger, {
+        "aria-label": ariaLabel ?? (ariaLabelledBy ? void 0 : `${getCountryDisplayValue(selectedCountryItem)} (+${getPhoneCountryCallingCode(selectedCountryItem)})`),
+        "aria-labelledby": ariaLabelledBy,
         className: styles.countryTrigger({
             className
         }),

package/dist/molecules/popover.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { connect, machine } from "@zag-js/popover";
 import { Portal, mergeProps, normalizeProps, useMachine } from "@zag-js/react";
-import { createContext, useContext, useId } from "react";
+import { createContext, useContext, useId, useLayoutEffect, useState } from "react";
 import { ActionIcon } from "../atoms/action-icon.js";
 import { Button } from "../atoms/button.js";
 import { tv } from "../utils.js";
@@ -84,6 +84,8 @@ function Popover({ autoFocus = true, border, children, closeOnEscape = true, clo
 }, onOpenChange, onPointerDownOutside, open, overflowPadding = 8, placement = "bottom", portalled = true, sameWidth = false, shadow, size, slide = true, ...props }) {
     const generatedId = useId();
     const uniqueId = id || generatedId;
+    const [titleId, setTitleId] = useState();
+    const [descriptionId, setDescriptionId] = useState();
     const service = useMachine(machine, {
         ...props,
         autoFocus,
@@ -116,6 +118,10 @@ function Popover({ autoFocus = true, border, children, closeOnEscape = true, clo
     return /*#__PURE__*/ jsx(PopoverContext.Provider, {
         value: {
             api,
+            titleId,
+            descriptionId,
+            setTitleId,
+            setDescriptionId,
             placement,
             styles
         },
@@ -183,9 +189,12 @@ Popover.Positioner = function({ children, className, forceMount = false, ref, ..
     }) : positionerNode;
 };
 Popover.Content = function({ children, className, ref, ...props }) {
-    const { api, placement, styles } = usePopoverContext();
+    const { api, descriptionId, placement, styles, titleId } = usePopoverContext();
     const machineContentProps = api.getContentProps();
     const contentProps = mergeProps(props, machineContentProps);
+    const fallbackTitleId = void 0 === titleId ? machineContentProps["aria-labelledby"] : titleId ?? void 0;
+    contentProps["aria-labelledby"] = props["aria-labelledby"] ?? (void 0 === props["aria-label"] ? fallbackTitleId : void 0);
+    contentProps["aria-describedby"] = props["aria-describedby"] ?? (void 0 === descriptionId ? machineContentProps["aria-describedby"] : descriptionId ?? void 0);
     const contentPlacement = contentProps["data-placement"];
     const contentSide = "string" == typeof contentPlacement ? contentPlacement.split("-")[0] : placement.split("-")[0];
     return /*#__PURE__*/ jsx("div", {
@@ -223,8 +232,16 @@ Popover.ArrowTip = function({ className, ref, ...props }) {
     });
 };
 Popover.Title = function({ className, ref, ...props }) {
-    const { api, styles } = usePopoverContext();
+    const { api, setTitleId, styles } = usePopoverContext();
     const titleProps = mergeProps(props, api.getTitleProps());
+    const titleId = titleProps.id;
+    useLayoutEffect(()=>{
+        setTitleId(titleId ?? null);
+        return ()=>setTitleId(null);
+    }, [
+        setTitleId,
+        titleId
+    ]);
     return /*#__PURE__*/ jsx("div", {
         ...titleProps,
         className: styles.title({
@@ -234,8 +251,16 @@ Popover.Title = function({ className, ref, ...props }) {
     });
 };
 Popover.Description = function({ className, ref, ...props }) {
-    const { api, styles } = usePopoverContext();
+    const { api, setDescriptionId, styles } = usePopoverContext();
     const descriptionProps = mergeProps(props, api.getDescriptionProps());
+    const descriptionId = descriptionProps.id;
+    useLayoutEffect(()=>{
+        setDescriptionId(descriptionId ?? null);
+        return ()=>setDescriptionId(null);
+    }, [
+        descriptionId,
+        setDescriptionId
+    ]);
     return /*#__PURE__*/ jsx("div", {
         ...descriptionProps,
         className: styles.description({

package/dist/molecules/radio-group.js

@@ -41,7 +41,7 @@ const radioGroupVariants = tv({
             "data-invalid:outline-offset-(length:--default-ring-offset)"
         ],
         itemContent: [
-            "col-start-2 row-start-1 min-w-0 flex flex-col"
+            "col-start-2 row-start-1 flex min-w-0 flex-col"
         ],
         itemIndicator: [
             "pointer-events-none block leading-none",

package/dist/molecules/search-form.js

@@ -26,7 +26,7 @@ const searchFormVariants = tv({
             "focus-visible:z-10"
         ],
         clearButton: [
-            "-translate-y-1/2 absolute top-1/2"
+            "absolute top-1/2 -translate-y-1/2"
         ]
     },
     variants: {

package/dist/molecules/select.js

@@ -60,7 +60,7 @@ const selectVariants = tv({
             "transition-colors duration-200 motion-reduce:transition-none"
         ],
         clearTrigger: [
-            "-translate-y-1/2 absolute end-select-right top-1/2"
+            "absolute top-1/2 end-select-right -translate-y-1/2"
         ],
         content: [
             "popup-surface-base",
@@ -82,7 +82,7 @@ const selectVariants = tv({
             "transition-colors duration-200 motion-reduce:transition-none"
         ],
         itemIndicator: [
-            "-translate-y-1/2 absolute end-(--popup-item-x) top-1/2",
+            "absolute end-(--popup-item-x) top-1/2 -translate-y-1/2",
             "flex items-center justify-center",
             "size-(--size-popup-indicator) text-popup-item-fg-selected"
         ],
@@ -233,9 +233,9 @@ Select.Trigger = function({ children, className, size: sizeProp, iconSize, ref,
     const styles = selectVariants({
         size: effectiveSize
     });
-    const validationDataAttrs = "default" !== validateStatus ? {
+    const validationDataAttrs = "default" === validateStatus ? {} : {
         "data-validation": validateStatus
-    } : {};
+    };
     return /*#__PURE__*/ jsxs(Button, {
         className: styles.trigger({
             className
@@ -249,7 +249,7 @@ Select.Trigger = function({ children, className, size: sizeProp, iconSize, ref,
         children: [
             children,
             /*#__PURE__*/ jsx(Icon, {
-                className: `${controlGlyphClass[toControlSize(effectiveSize)]} text-select-trigger-fg-base group-hover:text-select-trigger-fg-hover motion-safe:transition-[transform,color] motion-safe:duration-200 motion-reduce:transition-none ${api.open ? "rotate-180" : "rotate-0"}`,
+                className: `${controlGlyphClass[toControlSize(effectiveSize)]} text-select-trigger-fg-base group-hover:text-select-trigger-fg-hover motion-safe:transition-[transform,color] motion-safe:duration-200 motion-reduce:transition-none ${api.open ? "rotate-180" : "rotate-none"}`,
                 icon: "token-icon-select-indicator",
                 size: iconSize ?? "current"
             })
@@ -263,7 +263,7 @@ Select.ValueText = function({ placeholder = "Select an option", className, size:
         size: effectiveSize
     });
     const hasValue = api.value.length > 0;
-    const selectedItems = api.value.map((v)=>items.find((item)=>item.value === v)).filter(Boolean);
+    const selectedItems = api.value.map((v)=>items.find((item)=>item.value === v)).filter((item)=>void 0 !== item);
     const renderContent = ()=>{
         if (!hasValue) return placeholder;
         if ("function" == typeof children) return children(selectedItems);

package/dist/molecules/steps.js

@@ -82,7 +82,7 @@ const stepsVariants = tv({
         progressRange: [
             "absolute rounded-steps-progress bg-steps-progress-range-bg",
             "transition-[width,height] duration-200 motion-reduce:transition-none",
-            "data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:start-0",
+            "data-[orientation=horizontal]:inset-s-0 data-[orientation=horizontal]:inset-y-0",
             "data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:top-0"
         ],
         content: [
@@ -295,11 +295,12 @@ Steps.Item = function({ index, children, className, ref, ...props }) {
     const state = api.getItemState({
         index
     });
-    const itemProps = mergeProps(props, api.getItemProps({
+    const { "aria-current": ariaCurrent, ...itemProps } = mergeProps(props, api.getItemProps({
         index
     }));
     return /*#__PURE__*/ jsx(StepsItemContext.Provider, {
         value: {
+            ariaCurrent,
             index,
             state
         },
@@ -309,13 +310,14 @@ Steps.Item = function({ index, children, className, ref, ...props }) {
             }),
             ref: ref,
             ...itemProps,
+            role: props.role ?? "presentation",
             children: children
         })
     });
 };
 Steps.Trigger = function({ children, className, disabled, ref, ...props }) {
     const { api, styles } = useStepsContext();
-    const { index } = useStepsItemContext();
+    const { ariaCurrent, index } = useStepsItemContext();
     const triggerProps = api.getTriggerProps({
         index
     });
@@ -332,6 +334,7 @@ Steps.Trigger = function({ children, className, disabled, ref, ...props }) {
         theme: "unstyled",
         type: "button",
         ...buttonProps,
+        "aria-current": props["aria-current"] ?? ariaCurrent,
         "data-disabled": isDisabled || void 0,
         disabled: isDisabled,
         onClick: (event)=>{
@@ -455,7 +458,7 @@ Steps.Content = function({ index, children, className, ref, ...props }) {
         children: children
     });
 };
-Steps.Progress = function({ className, ref, style, ...props }) {
+Steps.Progress = function({ "aria-label": ariaLabel = "Step progress", className, ref, style, ...props }) {
     const { api, orientation, styles } = useStepsContext();
     const progressProps = mergeProps(props, api.getProgressProps());
     const progressRangeStyle = "horizontal" === orientation ? {
@@ -469,7 +472,9 @@ Steps.Progress = function({ className, ref, style, ...props }) {
         }),
         ref: ref,
         ...progressProps,
+        "aria-label": ariaLabel,
         "data-orientation": orientation,
+        role: "progressbar",
         style: style,
         children: /*#__PURE__*/ jsx("span", {
             "aria-hidden": "true",

package/dist/molecules/tabs.js

@@ -36,7 +36,7 @@ const tabsVariants = tv({
             "absolute rounded-tabs-indicator bg-tabs-indicator-bg",
             "data-[orientation=vertical]:h-(--height) data-[orientation=horizontal]:w-(--width)",
             "data-[orientation=horizontal]:h-tabs-indicator-height data-[orientation=vertical]:w-tabs-indicator",
-            "data-[orientation=vertical]:start-0 data-[orientation=horizontal]:bottom-0"
+            "data-[orientation=vertical]:inset-s-0 data-[orientation=horizontal]:bottom-0"
         ],
         content: [
             "text-tabs-content-fg",
@@ -124,8 +124,8 @@ function Tabs({ id, defaultValue, value, orientation = "horizontal", dir = "ltr"
         dir,
         activationMode,
         loopFocus,
-        onValueChange: ({ value })=>{
-            onValueChange?.(value);
+        onValueChange: ({ value: nextValue })=>{
+            onValueChange?.(nextValue);
         }
     });
     const api = __rspack_external__zag_js_tabs_b98983a9.connect(service, normalizeProps);

package/dist/molecules/tour.js

@@ -152,6 +152,7 @@ function Tour({ children, getRootNode, id, onStatusChange, steps, ...props }) {
         children: children
     });
 }
+Tour.Root = Tour;
 Tour.Context = function({ children }) {
     return children(useTourContext());
 };
@@ -313,6 +314,5 @@ Tour.CloseTrigger = function({ className, icon = "token-icon-close", onClick, re
         ref: ref
     });
 };
-Tour.Root = Tour;
 Tour.displayName = "Tour";
 export { Tour };

package/dist/molecules/tree-view.js

@@ -46,7 +46,7 @@ const treeViewVariants = tv({
             "data-[state=closed]:hidden"
         ],
         indentGuide: [
-            "absolute start-1 top-0 bottom-0",
+            "absolute inset-s-1 inset-y-0",
             "w-tree-view-indent-width bg-tree-view-indent-bg",
             "opacity-tree-view-indent"
         ],