@techsio/ui-kit 0.53.0 → 0.54.1

package/dist/atoms/button.js

@@ -6,7 +6,8 @@ const buttonVariants = tv({
         "relative",
         "inline-flex cursor-pointer items-center justify-center",
         "font-medium",
-        "transition-all duration-200 motion-reduce:transition-none",
+        "transition duration-200 motion-reduce:transition-none",
+        "motion-safe:not-disabled:active:scale-97",
         "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
         "focus-visible:outline-button-ring",
         "focus-visible:outline-offset-(length:--default-ring-offset)",
@@ -265,7 +266,7 @@ function Button({ variant, theme, size, block, isLoading, loadingText, icon, ico
         children: isLoading ? /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 /*#__PURE__*/ jsx(Icon, {
-                    className: "mr-2",
+                    className: "me-2",
                     icon: "token-icon-button-spinner"
                 }),
                 loadingText || children

package/dist/atoms/checkbox.js

@@ -23,7 +23,7 @@ const checkboxVariants = tv({
         "disabled:checked:bg-checkbox-bg-disabled",
         "disabled:checked:text-checkbox-fg-disabled",
         "disabled:checked:border-checkbox-border-disabled",
-        "transition-all duration-200 motion-reduce:transition-none",
+        "transition duration-200 motion-reduce:transition-none",
         "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
         "focus-visible:outline-checkbox-ring-focus",
         "focus-visible:outline-offset-(length:--default-ring-offset)",

package/dist/atoms/input.js

@@ -10,13 +10,17 @@ const inputVariants = tv({
         "placeholder:text-input-fg-placeholder",
         "border-(length:--border-width-input) border-input-border-base",
         "rounded-input",
-        "transition-all duration-200 motion-reduce:transition-none",
+        "transition duration-200 motion-reduce:transition-none",
         "hover:border-input-border-hover hover:bg-input-bg-hover",
         "focus:border-input-border-focus focus:bg-input-bg-focus",
         "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
         "focus-visible:outline-input-ring",
         "focus-visible:outline-offset-(length:--default-ring-offset)",
-        "disabled:cursor-not-allowed disabled:hover:bg-input-bg-disabled"
+        "disabled:cursor-not-allowed disabled:hover:bg-input-bg-disabled",
+        "user-invalid:border-(length:--border-width-validation)",
+        "user-invalid:border-input-border-danger-base",
+        "user-invalid:hover:border-input-border-danger-hover",
+        "user-invalid:focus:border-input-border-danger-focus"
     ],
     variants: {
         size: {

package/dist/atoms/numeric-input.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, useEffect, useId, useLayoutEffect, useMemo, useRef } from "react";
 import { tv } from "../utils.js";
 import { Button } from "./button.js";
 import { Input } from "./input.js";
@@ -13,7 +13,7 @@ const numericInputVariants = tv({
         container: [
             "group form-control-base relative flex",
             "border-numeric-input-border",
-            "items-center overflow-hidden",
+            "min-w-0 items-center overflow-clip",
             "hover:border-numeric-input-border-hover",
             "focus-within:border-numeric-input-border-focus",
             "data-disabled:bg-numeric-input-bg-disabled",
@@ -37,7 +37,7 @@ const numericInputVariants = tv({
             "hover:bg-numeric-input-input-bg-hover",
             "disabled:hover:bg-numeric-input-input-bg",
             "disabled:cursor-not-allowed",
-            "focus-visible:outline-none",
+            "focus-visible:outline-hidden",
             "duration-0 data-invalid:focus:border-input-border-danger-focus"
         ],
         triggerContainer: [
@@ -61,19 +61,19 @@ const numericInputVariants = tv({
                 root: "gap-numeric-input-sm text-numeric-input-sm",
                 container: "h-form-control-sm rounded-numeric-input-sm",
                 trigger: "text-numeric-input-sm",
-                input: "pl-numeric-input-input-sm text-numeric-input-sm"
+                input: "ps-numeric-input-input-sm text-numeric-input-sm"
             },
             md: {
                 root: "gap-numeric-input-md text-numeric-input-md",
                 container: "h-form-control-md rounded-numeric-input-md",
                 trigger: "text-numeric-input-md",
-                input: "pl-numeric-input-input-md text-numeric-input-md"
+                input: "ps-numeric-input-input-md text-numeric-input-md"
             },
             lg: {
                 root: "gap-numeric-input-lg text-numeric-input-lg",
                 container: "h-form-control-lg rounded-numeric-input-lg",
                 trigger: "text-numeric-input-lg",
-                input: "pl-numeric-input-input-lg text-numeric-input-lg"
+                input: "ps-numeric-input-input-lg text-numeric-input-lg"
             }
         }
     },
@@ -81,65 +81,76 @@ const numericInputVariants = tv({
         size: "md"
     }
 });
+const triggerIconSizes = {
+    sm: "xs",
+    md: "sm",
+    lg: "md"
+};
 const NumericInputContext = /*#__PURE__*/ createContext(null);
 function useNumericInputContext() {
     const context = useContext(NumericInputContext);
     if (!context) throw new Error("NumericInput components must be used within NumericInput.Root");
     return context;
 }
-function NumericInput({ id, name, size, disabled = false, required = false, pattern, readOnly, inputMode, value, defaultValue, onChange, dir = "ltr", describedBy, min, max, step = 1, precision, allowMouseWheel = true, allowOverflow, clampValueOnBlur = true, spinOnPress = true, formatOptions, invalid, children, ref, className, locale = "cs-CZ", ...props }) {
+function NumericInput({ id, size, value, defaultValue, onChange, dir = "ltr", describedBy, precision, children, ref, className, locale = "cs-CZ", ...props }) {
     const generatedId = useId();
-    const uniqueId = id || generatedId;
+    const [machineProps, elementProps] = __rspack_external__zag_js_number_input_f1a1f439.splitProps(props);
+    const { formatOptions, invalid, disabled = false, required = false, step = 1, allowMouseWheel = true, clampValueOnBlur = true, spinOnPress = true, focusInputOnChange = true } = machineProps;
     const resolvedFormatOptions = precision ? {
         ...formatOptions ?? {},
         maximumFractionDigits: precision
     } : formatOptions;
     const formatValue = (inputValue)=>{
-        if (!resolvedFormatOptions) return String(inputValue);
+        if ("string" == typeof inputValue || !resolvedFormatOptions) return String(inputValue);
         return new Intl.NumberFormat(locale, resolvedFormatOptions).format(inputValue);
     };
-    const stringValue = void 0 !== value ? formatValue(value) : void 0;
-    const stringDefaultValue = void 0 !== defaultValue ? formatValue(defaultValue) : void 0;
     const service = useMachine(__rspack_external__zag_js_number_input_f1a1f439.machine, {
-        id: uniqueId,
-        ids: id ? {
-            input: id
-        } : void 0,
-        min,
-        max,
-        step,
-        name,
+        ...machineProps,
         disabled,
-        locale,
         required,
-        pattern,
-        readOnly,
-        inputMode,
-        dir,
-        invalid,
-        value: stringValue,
-        defaultValue: stringDefaultValue,
+        step,
         allowMouseWheel,
-        allowOverflow,
         clampValueOnBlur,
         spinOnPress,
+        focusInputOnChange,
+        id: id || generatedId,
+        ids: id ? {
+            ...machineProps.ids,
+            input: id
+        } : machineProps.ids,
+        dir,
+        locale,
+        value: void 0 !== value ? formatValue(value) : void 0,
+        defaultValue: void 0 !== defaultValue ? formatValue(defaultValue) : void 0,
         formatOptions: resolvedFormatOptions,
         onValueChange: (details)=>{
             onChange?.(details.valueAsNumber);
-        },
-        focusInputOnChange: true
+            machineProps.onValueChange?.(details);
+        }
     });
     const api = __rspack_external__zag_js_number_input_f1a1f439.connect(service, normalizeProps);
+    useEffect(()=>{
+        const inputId = api.getInputProps().id;
+        const input = inputId ? service.scope.getById(inputId) : null;
+        if (input && input === service.scope.getActiveElement() && !api.focused) service.send({
+            type: "INPUT.FOCUS"
+        });
+    }, [
+        api,
+        service
+    ]);
     const styles = numericInputVariants({
         size
     });
+    const inputDisabled = api.getInputProps().disabled;
     return /*#__PURE__*/ jsx(NumericInputContext.Provider, {
         value: {
             api,
             size,
             styles,
             invalid,
-            describedBy
+            describedBy,
+            controlledValue: "string" == typeof value ? value : void 0
         },
         children: /*#__PURE__*/ jsx("div", {
             className: styles.root({
@@ -147,7 +158,11 @@ function NumericInput({ id, name, size, disabled = false, required = false, patt
             }),
             ref: ref,
             ...api.getRootProps(),
-            ...props,
+            ...elementProps,
+            onWheelCapture: (event)=>{
+                if (inputDisabled || machineProps.readOnly) event.stopPropagation();
+                elementProps.onWheelCapture?.(event);
+            },
             children: children
         })
     });
@@ -166,13 +181,53 @@ NumericInput.Control = function({ children, ref, className, ...props }) {
     });
 };
 NumericInput.Input = function({ ref, className, ...props }) {
-    const { api, styles, describedBy } = useNumericInputContext();
+    const { api, styles, describedBy, controlledValue } = useNumericInputContext();
+    const inputRef = useRef(null);
+    const mergedRef = useMemo(()=>(node)=>{
+            inputRef.current = node;
+            const cleanup = "function" == typeof ref ? ref(node) : void 0;
+            if (ref && "function" != typeof ref) ref.current = node;
+            return ()=>{
+                inputRef.current = null;
+                if ("function" == typeof cleanup) cleanup();
+                else if ("function" == typeof ref) ref(null);
+                else if (ref) ref.current = null;
+            };
+        }, [
+        ref
+    ]);
+    useLayoutEffect(()=>{
+        if (void 0 === controlledValue) return;
+        const view = inputRef.current?.ownerDocument.defaultView;
+        if (!view) return;
+        let cancelled = false;
+        let frame;
+        queueMicrotask(()=>{
+            if (cancelled) return;
+            frame = view.requestAnimationFrame(()=>{
+                const input = inputRef.current;
+                if (!input || input.value === controlledValue) return;
+                const start = input.selectionStart;
+                const end = input.selectionEnd;
+                const direction = input.selectionDirection;
+                input.value = controlledValue;
+                if (input.ownerDocument.activeElement === input && null !== start && null !== end) input.setSelectionRange(Math.min(start, controlledValue.length), Math.min(end, controlledValue.length), direction ?? void 0);
+            });
+        });
+        return ()=>{
+            cancelled = true;
+            if (void 0 !== frame) view.cancelAnimationFrame(frame);
+        };
+    }, [
+        api,
+        controlledValue
+    ]);
     const ariaDescribedBy = [
         props["aria-describedby"],
         describedBy
     ].filter(Boolean).join(" ") || void 0;
     return /*#__PURE__*/ jsx(Input, {
-        ref: ref,
+        ref: void 0 === controlledValue ? ref : mergedRef,
         ...api.getInputProps(),
         ...props,
         "aria-describedby": ariaDescribedBy,
@@ -183,7 +238,7 @@ NumericInput.Input = function({ ref, className, ...props }) {
 };
 NumericInput.IncrementTrigger = function({ variant = "primary", theme = "borderless", icon = "token-icon-numeric-input-increment", iconPosition = "left", iconSize, uppercase, block, isLoading, loadingText, ref, className, children, ...props }) {
     const { api, styles, size } = useNumericInputContext();
-    const resolvedIconSize = iconSize ?? ("sm" === size ? "xs" : "lg" === size ? "md" : "sm");
+    const resolvedIconSize = iconSize ?? triggerIconSizes[size ?? "md"];
     return /*#__PURE__*/ jsx(Button, {
         block: block,
         className: styles.trigger({
@@ -206,7 +261,7 @@ NumericInput.IncrementTrigger = function({ variant = "primary", theme = "borderl
 };
 NumericInput.DecrementTrigger = function({ variant = "primary", theme = "borderless", icon = "token-icon-numeric-input-decrement", iconPosition = "left", iconSize, uppercase, block, isLoading, loadingText, ref, className, children, ...props }) {
     const { api, styles, size } = useNumericInputContext();
-    const resolvedIconSize = iconSize ?? ("sm" === size ? "xs" : "lg" === size ? "md" : "sm");
+    const resolvedIconSize = iconSize ?? triggerIconSizes[size ?? "md"];
     return /*#__PURE__*/ jsx(Button, {
         block: block,
         className: styles.trigger({

package/dist/atoms/skeleton.js

@@ -4,7 +4,7 @@ import { tv } from "../utils.js";
 const skeletonVariants = tv({
     slots: {
         root: [
-            "relative overflow-hidden"
+            "relative min-w-0 overflow-clip"
         ],
         rectangle: "w-full",
         circle: [

package/dist/atoms/textarea.js

@@ -10,13 +10,17 @@ const textareaVariants = tv({
         "placeholder:text-textarea-fg-placeholder",
         "border-(length:--border-width-textarea) border-textarea-border",
         "rounded-textarea",
-        "transition-all duration-200 motion-reduce:transition-none",
+        "transition duration-200 motion-reduce:transition-none",
         "hover:border-textarea-border-hover hover:bg-textarea-bg-hover",
         "focus:border-textarea-border-focus focus:bg-textarea-bg-focus",
         "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
         "focus-visible:outline-textarea-ring",
         "focus-visible:outline-offset-(length:--default-ring-offset)",
-        "disabled:pointer-events-none disabled:border-textarea-border-disabled disabled:bg-textarea-bg-disabled disabled:text-textarea-fg-disabled"
+        "disabled:pointer-events-none disabled:border-textarea-border-disabled disabled:bg-textarea-bg-disabled disabled:text-textarea-fg-disabled",
+        "user-invalid:border-(length:--border-width-validation)",
+        "user-invalid:border-textarea-border-danger-base",
+        "user-invalid:hover:border-textarea-border-danger-hover",
+        "user-invalid:focus:border-textarea-border-danger-focus"
     ],
     variants: {
         variant: {

package/dist/internal/organisms/sidebar.styles.js

@@ -9,7 +9,7 @@ const sidebarVariants = tv({
         desktopPanel: [
             "group/sidebar-panel sticky top-sidebar-offset hidden h-sidebar-viewport shrink-0 flex-col overflow-hidden",
             "sidebar-desktop:flex bg-sidebar-panel-bg text-sidebar-panel-fg",
-            "border-sidebar-panel-border transition-all duration-(--duration-sidebar) motion-reduce:transition-none",
+            "border-sidebar-panel-border transition-[width,background-color,border-color] duration-(--duration-sidebar) motion-reduce:transition-none",
             "focus-visible:sidebar-focus-ring",
             "data-[side=start]:border-e-(length:--border-width-sidebar)",
             "data-[side=end]:border-s-(length:--border-width-sidebar)"

package/dist/molecules/accordion.js

@@ -10,8 +10,7 @@ const accordionVariants = tv({
         root: [
             "flex w-full flex-col",
             "rounded-accordion bg-accordion-bg",
-            "transition-all duration-200",
-            "transition-all duration-200 motion-reduce:transition-none"
+            "transition duration-200 motion-reduce:transition-none"
         ],
         item: "",
         title: "grid place-items-start",
@@ -21,7 +20,7 @@ const accordionVariants = tv({
             "font-accordion-title",
             "bg-accordion-title-bg text-accordion-title-fg",
             "hover:bg-accordion-title-bg-hover",
-            "pr-accordion-icon-right",
+            "pe-accordion-icon-right",
             "data-[disabled=true]:cursor-not-allowed"
         ],
         subtitle: [

package/dist/molecules/cascade-select.js

@@ -23,7 +23,7 @@ const cascadeSelectVariants = tv({
             "form-control-base group w-full",
             "flex items-center justify-between gap-0",
             "border-cascade-select-trigger-border",
-            "text-left font-normal",
+            "text-start font-normal",
             "hover:border-cascade-select-trigger-border-hover",
             "hover:bg-cascade-select-trigger-bg-hover",
             "focus:border-cascade-select-trigger-border-focus",
@@ -48,7 +48,7 @@ const cascadeSelectVariants = tv({
             "data-[validation=warning]:outline-offset-(length:--default-ring-offset)",
             "transition-colors duration-200 motion-reduce:transition-none"
         ],
-        clearTrigger: "-translate-y-1/2 absolute top-1/2 right-cascade-select-right data-readonly:hidden",
+        clearTrigger: "-translate-y-1/2 absolute end-cascade-select-right top-1/2 data-readonly:hidden",
         content: [
             "popup-surface-base flex w-max min-w-(--reference-width) max-w-(--available-width) overflow-x-auto",
             "duration-200 ease-out motion-safe:transition-[opacity,display,translate,scale]",

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",

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",

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",

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/phone-input.js

@@ -51,7 +51,7 @@ const phoneInputVariants = tv({
         ],
         control: [
             "form-control-base",
-            "relative flex w-full items-center overflow-hidden",
+            "relative flex w-full min-w-0 items-center overflow-clip",
             "text-phone-input-fg",
             "hover:border-phone-input-border-hover hover:bg-phone-input-bg-hover",
             "phone-input-focus",
@@ -84,7 +84,7 @@ const phoneInputVariants = tv({
             "bg-phone-input-trigger-bg-base",
             "hover:bg-phone-input-trigger-bg-hover",
             "border-(length:--border-phone-input-trigger)",
-            "focus-visible:outline-none",
+            "focus-visible:outline-hidden",
             "w-phone-input-trigger",
             "focus-visible:bg-phone-input-trigger-bg-hover",
             "rounded-e-none"
@@ -107,7 +107,7 @@ const phoneInputVariants = tv({
             "placeholder:text-phone-input-fg-placeholder",
             "hover:bg-phone-input-input-bg-hover",
             "focus:bg-phone-input-input-bg-focus",
-            "focus-visible:outline-none",
+            "focus-visible:outline-hidden",
             "disabled:text-phone-input-fg-disabled"
         ],
         itemContent: [

package/dist/molecules/popover.js

@@ -20,7 +20,7 @@ const popoverVariants = tv({
             "bg-popover-bg",
             "text-popover-fg",
             "rounded-popover",
-            "outline-none",
+            "outline-hidden",
             "z-50",
             "relative"
         ],
@@ -36,7 +36,7 @@ const popoverVariants = tv({
             "leading-normal"
         ],
         closeTrigger: [
-            "absolute top-2 right-2"
+            "absolute end-2 top-2"
         ]
     },
     variants: {