@prokodo/ui 0.0.49 → 0.0.50

package/dist/components/carousel/Carousel.client.js

@@ -5,6 +5,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState, Children, useEffect, useCallback, useImperativeHandle } from "react";
 import { create } from "../../helpers/bem.js";
 import { isNumber } from "../../helpers/validations.js";
+import { useResponsiveValue } from "../../hooks/useResponsiveValue.js";
 import styles from "./Carousel.module.scss.js";
 import { NEXT, PREV, handleTouchStart, handleTouchMove, handleTouchEnd, handleMouseUp, handleMouseDown } from "./Carousel.services.js";
 import { Button } from "../button/Button.js";
@@ -24,6 +25,8 @@ function CarouselClient(props) {
     classNameItem,
     classNameDots,
     classNameDot,
+    classNameDotActive,
+    responsive,
     onKeyDown,
     onMouseEnter,
     onMouseLeave,
@@ -35,22 +38,34 @@ function CarouselClient(props) {
     children,
     ...rest
   } = props;
-  const containerRef = useRef(null);
+  const carouselContainerRef = useRef(null);
+  const { value: resolvedItemsToShow, ref: containerRef } = useResponsiveValue({
+    fallback: (responsive == null ? void 0 : responsive.fallback) ?? itemsToShow,
+    breakpoints: responsive == null ? void 0 : responsive.breakpoints,
+    valuesByBreakpoint: responsive == null ? void 0 : responsive.valuesByBreakpoint,
+    valuesByQueries: responsive == null ? void 0 : responsive.valuesByQueries,
+    containerRules: responsive == null ? void 0 : responsive.containerRules
+  });
+  const effectiveItemsToShow = responsive ? resolvedItemsToShow : itemsToShow;
+  const setHostRef = /* @__PURE__ */ __name((el) => {
+    carouselContainerRef.current = el;
+    containerRef.current = el;
+  }, "setHostRef");
   const touchStartX = useRef(0);
   const touchEndX = useRef(0);
   const mouseStartX = useRef(0);
   const mouseEndX = useRef(0);
   const [mobileHint, setMobileHint] = useState(true);
-  const [current, setCurrent] = useState(itemsToShow);
+  const [current, setCurrent] = useState(effectiveItemsToShow);
   const [transitioning, setTrans] = useState(false);
   const [isPlaying, setPlaying] = useState(Boolean(autoplay));
   const [mouseActive, setMouse] = useState(false);
   const childrenArr = Children.toArray(children);
   const num = childrenArr.length;
   const items = [
-    ...childrenArr.slice(-itemsToShow),
+    ...childrenArr.slice(-effectiveItemsToShow),
     ...childrenArr,
-    ...childrenArr.slice(0, itemsToShow)
+    ...childrenArr.slice(0, effectiveItemsToShow)
   ];
   useEffect(() => {
     const id = setTimeout(() => setMobileHint(false), 1500);
@@ -63,26 +78,26 @@ function CarouselClient(props) {
       const next = dir === NEXT ? current + 1 : current - 1;
       setCurrent(next);
       setTimeout(() => {
-        if (next >= num + itemsToShow) setCurrent(itemsToShow);
-        else if (next < itemsToShow) setCurrent(num);
+        if (next >= num + effectiveItemsToShow) setCurrent(effectiveItemsToShow);
+        else if (next < effectiveItemsToShow) setCurrent(num);
         setTrans(false);
       }, 300);
     },
-    [current, num, itemsToShow, transitioning]
+    [current, num, effectiveItemsToShow, transitioning]
   );
   const slideTo = useCallback(
     (i) => {
       if (transitioning) return;
       setTrans(true);
-      const target = i + itemsToShow;
+      const target = i + effectiveItemsToShow;
       setCurrent(target);
       setTimeout(() => {
-        if (target >= num + itemsToShow) setCurrent(target - num);
-        else if (target < itemsToShow) setCurrent(num + target);
+        if (target >= num + effectiveItemsToShow) setCurrent(target - num);
+        else if (target < effectiveItemsToShow) setCurrent(num + target);
         setTrans(false);
       }, 300);
     },
-    [itemsToShow, num, transitioning]
+    [effectiveItemsToShow, num, transitioning]
   );
   useEffect(() => {
     if (!isNumber(autoplay) || autoplay <= 0) return;
@@ -93,15 +108,18 @@ function CarouselClient(props) {
   useImperativeHandle(ref, () => ({
     slidePrev: /* @__PURE__ */ __name(() => slide(PREV), "slidePrev"),
     slideNext: /* @__PURE__ */ __name(() => slide(NEXT), "slideNext"),
-    carouselContainer: containerRef.current
+    carouselContainer: carouselContainerRef.current
   }));
-  const offset = -current * (100 / itemsToShow);
+  const getTransformValue = /* @__PURE__ */ __name(() => {
+    const offset = -current * (100 / effectiveItemsToShow);
+    return `translateX(${offset}%)`;
+  }, "getTransformValue");
   if (num === 0) return /* @__PURE__ */ jsx(Skeleton, { height: "200px", variant: "rectangular", width: "100%" });
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ...rest,
-      ref: containerRef,
+      ref: setHostRef,
       role: "button",
       tabIndex: 0,
       className: bem(
@@ -111,8 +129,14 @@ function CarouselClient(props) {
       ),
       onKeyDown: /* @__PURE__ */ __name((e) => {
         onKeyDown == null ? void 0 : onKeyDown(e);
-        if (e.key === "ArrowLeft") slide(PREV);
-        if (e.key === "ArrowRight") slide(NEXT);
+        switch (e.key) {
+          case "ArrowLeft":
+            slide("PREV");
+            break;
+          case "ArrowRight":
+            slide("NEXT");
+            break;
+        }
       }, "onKeyDown"),
       onMouseDown: /* @__PURE__ */ __name((e) => {
         onMouseDown == null ? void 0 : onMouseDown(e);
@@ -150,14 +174,14 @@ function CarouselClient(props) {
           {
             className: bem("wrapper", void 0, classNameWrapper),
             style: {
-              transform: `translateX(${offset}%)`,
+              transform: getTransformValue(),
               transition: transitioning ? "transform 0.3s ease-in-out" : "none"
             },
             children: items.map((child, i) => /* @__PURE__ */ jsx(
               "div",
               {
                 className: bem("item", void 0, classNameItem),
-                style: { width: `${100 / itemsToShow}%` },
+                style: { width: `${100 / effectiveItemsToShow}%` },
                 children: child
               },
               `cl-${i}`
@@ -185,11 +209,11 @@ function CarouselClient(props) {
             }
           ),
           /* @__PURE__ */ jsx("span", { className: bem("dots", void 0, classNameDots), children: childrenArr.map((_, i) => {
-            const active = i === (current - itemsToShow + num) % num;
+            const active = i === (current - effectiveItemsToShow + num) % num;
             return /* @__PURE__ */ jsx(
               "button",
               {
-                className: bem("dots__dot", { "is-active": active }, classNameDot),
+                className: bem("dots__dot", { "is-active": active }, `${classNameDot} ${active ? classNameDotActive ?? "" : ""}`),
                 onClick: /* @__PURE__ */ __name(() => slideTo(i), "onClick"),
                 onKeyDown: /* @__PURE__ */ __name((e) => e.key === "Enter" && slideTo(i), "onKeyDown")
               },

package/dist/components/carousel/Carousel.lazy.js

@@ -8,7 +8,7 @@ const Carousel_lazy = createLazyWrapper({
   name: "Carousel",
   Client: CarouselClient,
   Server: CarouselServer,
-  hydrateOnVisible: true,
+  hydrateOnVisible: false,
   isInteractive: /* @__PURE__ */ __name(() => true, "isInteractive")
 });
 export {

package/dist/components/carousel/Carousel.module.scss.js

@@ -1,5 +1,3 @@
-const gradientMove = "gradientMove";
-const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-Carousel": "prokodo-Carousel",
   "prokodo-Carousel--is-active": "prokodo-Carousel--is-active",
@@ -12,12 +10,8 @@ const styles = {
   "prokodo-Carousel__button": "prokodo-Carousel__button",
   "prokodo-Carousel__dots": "prokodo-Carousel__dots",
   "prokodo-Carousel__dots__dot": "prokodo-Carousel__dots__dot",
-  "prokodo-Carousel__dots__dot--is-active": "prokodo-Carousel__dots__dot--is-active",
-  gradientMove,
-  fadeInKeyframe
+  "prokodo-Carousel__dots__dot--is-active": "prokodo-Carousel__dots__dot--is-active"
 };
 export {
-  styles as default,
-  fadeInKeyframe,
-  gradientMove
+  styles as default
 };

package/dist/components/chip/Chip.module.scss.js

@@ -1,5 +1,3 @@
-const gradientMove = "gradientMove";
-const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-Chip": "prokodo-Chip",
   "prokodo-Chip--is-clickable": "prokodo-Chip--is-clickable",
@@ -27,12 +25,8 @@ const styles = {
   "prokodo-Chip__delete--success": "prokodo-Chip__delete--success",
   "prokodo-Chip__delete--error": "prokodo-Chip__delete--error",
   "prokodo-Chip__delete--white": "prokodo-Chip__delete--white",
-  "prokodo-Chip__delete--warning": "prokodo-Chip__delete--warning",
-  gradientMove,
-  fadeInKeyframe
+  "prokodo-Chip__delete--warning": "prokodo-Chip__delete--warning"
 };
 export {
-  styles as default,
-  fadeInKeyframe,
-  gradientMove
+  styles as default
 };

package/dist/components/datePicker/DatePicker.client.js

@@ -3,16 +3,17 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsx } from "react/jsx-runtime";
 import dayjs, { isDayjs } from "dayjs";
-import { useState, useMemo, useEffect, useCallback } from "react";
-import { isNull } from "../../helpers/validations.js";
+import { useMemo, useState, useEffect, useCallback } from "react";
+import { isString, isNull } from "../../helpers/validations.js";
 import { DatePickerView } from "./DatePicker.view.js";
 function toDayjs(val) {
   if (isNull(val)) return null;
-  if (isDayjs(val)) return val;
+  if (isDayjs(val)) return val.isValid() ? val : null;
   const d = dayjs(val);
   return d.isValid() ? d : null;
 }
 __name(toDayjs, "toDayjs");
+const sameByUnit = /* @__PURE__ */ __name((a, b, unit) => a === null && b === null ? true : a !== null && b !== null && a.isSame(b, unit), "sameByUnit");
 const DatePickerClient = /* @__PURE__ */ __name(({
   name,
   value,
@@ -28,58 +29,59 @@ const DatePickerClient = /* @__PURE__ */ __name(({
   minuteStep = 1,
   ...rest
 }) => {
-  const [date, setDate] = useState(toDayjs(value));
-  const [error, setError] = useState(void 0);
+  const unit = withTime ? "minute" : "day";
   const fmt = useMemo(
     () => format ?? (withTime ? "YYYY-MM-DDTHH:mm" : "YYYY-MM-DD"),
     [format, withTime]
   );
-  const unit = withTime ? "minute" : "day";
+  const [date, setDate] = useState(toDayjs(value));
+  const [error, setError] = useState(void 0);
   useEffect(() => {
-    setDate(toDayjs(value));
-    setError(void 0);
-    onValidate == null ? void 0 : onValidate(name, void 0);
-  }, [value, name, onValidate]);
-  const emitValue = useCallback(
-    (e) => {
-      var _a;
-      const val = (_a = e == null ? void 0 : e.target) == null ? void 0 : _a.value;
-      if (!val) {
-        setDate(null);
-        setError(void 0);
-        onValidate == null ? void 0 : onValidate(name, void 0);
-        onChange == null ? void 0 : onChange(null);
-        return;
-      }
-      const d = dayjs(val, fmt, true);
-      if (!d.isValid()) {
-        const msg = withTime ? "Invalid date/time format." : "Invalid date format.";
-        setError(msg);
-        onValidate == null ? void 0 : onValidate(name, msg);
-        onChange == null ? void 0 : onChange(null);
-        return;
-      }
-      if (!isNull(minDate) && d.isBefore(dayjs(minDate), unit)) {
-        const msg = dayjs(minDate).isSame(dayjs(), unit) ? (translations == null ? void 0 : translations.minDate) ?? (withTime ? "Date/time cannot be in the past." : "Date cannot be in the past.") : (translations == null ? void 0 : translations.minDate) ?? `Must be ≥ ${dayjs(minDate).format(fmt)}`;
-        setError(msg);
-        onValidate == null ? void 0 : onValidate(name, msg);
-        onChange == null ? void 0 : onChange(null);
-        return;
-      }
-      if (!isNull(maxDate) && d.isAfter(dayjs(maxDate), unit)) {
-        const msg = dayjs(maxDate).isSame(dayjs(), unit) ? (translations == null ? void 0 : translations.maxDate) ?? (withTime ? "Date/time cannot be in the future." : "Date cannot be in the future.") : (translations == null ? void 0 : translations.maxDate) ?? `Must be ≤ ${dayjs(maxDate).format(fmt)}`;
-        setError(msg);
-        onValidate == null ? void 0 : onValidate(name, msg);
-        onChange == null ? void 0 : onChange(null);
-        return;
-      }
-      setDate(d);
-      setError(void 0);
+    const incoming = toDayjs(value);
+    if (!sameByUnit(date, incoming, unit)) {
+      setDate(incoming);
+      if (incoming) setError(void 0);
+    }
+  }, [value, unit]);
+  const emitRaw = useCallback((raw) => {
+    if (raw === "") {
+      if (date !== null) setDate(null);
+      if (isString(error)) setError(void 0);
       onValidate == null ? void 0 : onValidate(name, void 0);
-      onChange == null ? void 0 : onChange(d);
-    },
-    [fmt, maxDate, minDate, name, onChange, onValidate, translations, withTime, unit]
-  );
+      onChange == null ? void 0 : onChange(null);
+      return;
+    }
+    const parsed = dayjs(raw, fmt, true);
+    const year = parsed.isValid() ? parsed.year() : dayjs(raw).year();
+    if (!parsed.isValid() || year > 9999 || year < 100) {
+      const msg = withTime ? "Invalid date/time format." : "Invalid date format.";
+      setError(msg);
+      onValidate == null ? void 0 : onValidate(name, msg);
+      onChange == null ? void 0 : onChange(null);
+      return;
+    }
+    if (!isNull(minDate) && parsed.isBefore(dayjs(minDate), unit)) {
+      const msg = (translations == null ? void 0 : translations.minDate) ?? (dayjs(minDate).isSame(dayjs(), unit) ? withTime ? "Date/time cannot be in the past." : "Date cannot be in the past." : `Must be ≥ ${dayjs(minDate).format(fmt)}`);
+      setError(msg);
+      onValidate == null ? void 0 : onValidate(name, msg);
+      onChange == null ? void 0 : onChange(null);
+      return;
+    }
+    if (!isNull(maxDate) && parsed.isAfter(dayjs(maxDate), unit)) {
+      const msg = (translations == null ? void 0 : translations.maxDate) ?? (dayjs(maxDate).isSame(dayjs(), unit) ? withTime ? "Date/time cannot be in the future." : "Date cannot be in the future." : `Must be ≤ ${dayjs(maxDate).format(fmt)}`);
+      setError(msg);
+      onValidate == null ? void 0 : onValidate(name, msg);
+      onChange == null ? void 0 : onChange(null);
+      return;
+    }
+    const snapped = withTime ? parsed.minute(
+      Math.round(parsed.minute() / Math.max(1, minuteStep)) * Math.max(1, minuteStep)
+    ) : parsed;
+    if (!sameByUnit(date, snapped, unit)) setDate(snapped);
+    if (isString(error)) setError(void 0);
+    onValidate == null ? void 0 : onValidate(name, void 0);
+    onChange == null ? void 0 : onChange(snapped);
+  }, [date, error, fmt, maxDate, minDate, minuteStep, name, onChange, onValidate, translations, unit, withTime]);
   return /* @__PURE__ */ jsx(
     DatePickerView,
     {
@@ -94,8 +96,7 @@ const DatePickerClient = /* @__PURE__ */ __name(({
       name,
       value: date,
       withTime,
-      onChange: /* @__PURE__ */ __name((value2) => emitValue(value2), "onChange"),
-      onValidate
+      onChangeInput: emitRaw
     }
   );
 }, "DatePickerClient");

package/dist/components/datePicker/DatePicker.view.js

@@ -16,6 +16,8 @@ function DatePickerView({
   maxDate,
   withTime = false,
   minuteStep = 1,
+  onChangeInput,
+  // <- string-based adapter
   ...rest
 }) {
   const effectiveFormat = format ?? (withTime ? "YYYY-MM-DDTHH:mm" : "YYYY-MM-DD");
@@ -24,11 +26,18 @@ function DatePickerView({
   const displayValue = !isNull(value) ? dayjs(value).format(effectiveFormat) : "";
   const min = !isNull(minDate) ? dayjs(minDate).format(htmlMinMaxFormat) : void 0;
   const max = !isNull(maxDate) ? dayjs(maxDate).format(htmlMinMaxFormat) : void 0;
-  const step = withTime ? Math.max(1, minuteStep) * 60 : rest == null ? void 0 : rest.step;
+  const computedStep = withTime ? Math.max(1, minuteStep) * 60 : void 0;
+  const { step: _ignored, ...restWithoutStep } = rest;
+  const handleInput = /* @__PURE__ */ __name((e) => {
+    onChangeInput == null ? void 0 : onChangeInput(e.currentTarget.value);
+  }, "handleInput");
+  const handleChange = /* @__PURE__ */ __name((e) => {
+    onChangeInput == null ? void 0 : onChangeInput(e.currentTarget.value);
+  }, "handleChange");
   return /* @__PURE__ */ jsx(
     InputView,
     {
-      ...rest,
+      ...restWithoutStep,
       errorText,
       helperText,
       isFocused: true,
@@ -39,7 +48,9 @@ function DatePickerView({
       placeholder,
       type: inputType,
       value: displayValue,
-      ...withTime ? { step } : {}
+      onChange: handleChange,
+      onInput: handleInput,
+      ...withTime && computedStep !== void 0 ? { step: computedStep } : {}
     }
   );
 }

package/dist/components/dialog/Dialog.module.scss.js

@@ -1,5 +1,3 @@
-const gradientMove = "gradientMove";
-const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-Dialog": "prokodo-Dialog",
   "prokodo-Dialog--is-visible": "prokodo-Dialog--is-visible",
@@ -17,12 +15,8 @@ const styles = {
   "prokodo-Dialog__actions": "prokodo-Dialog__actions",
   "prokodo-Dialog__backdrop": "prokodo-Dialog__backdrop",
   "prokodo-Dialog__backdrop--is-visible": "prokodo-Dialog__backdrop--is-visible",
-  "prokodo-Dialog--fullScreen": "prokodo-Dialog--fullScreen",
-  gradientMove,
-  fadeInKeyframe
+  "prokodo-Dialog--fullScreen": "prokodo-Dialog--fullScreen"
 };
 export {
-  styles as default,
-  fadeInKeyframe,
-  gradientMove
+  styles as default
 };

package/dist/components/drawer/{Drawer.module.scss.js → Drawer.base.module.scss.js}

@@ -1,14 +1,13 @@
-const slideInLeft = "slideInLeft";
-const slideOutLeft = "slideOutLeft";
-const slideInRight = "slideInRight";
-const slideOutRight = "slideOutRight";
-const slideInTop = "slideInTop";
-const slideOutTop = "slideOutTop";
-const slideInBottom = "slideInBottom";
-const slideOutBottom = "slideOutBottom";
-const gradientMove = "gradientMove";
-const fadeInKeyframe = "fadeInKeyframe";
+const DrawerSlideInLeft = "DrawerSlideInLeft";
+const DrawerSlideOutLeft = "DrawerSlideOutLeft";
+const DrawerSlideInRight = "DrawerSlideInRight";
+const DrawerSlideOutRight = "DrawerSlideOutRight";
+const DrawerSlideInTop = "DrawerSlideInTop";
+const DrawerSlideOutTop = "DrawerSlideOutTop";
+const DrawerSlideInBottom = "DrawerSlideInBottom";
+const DrawerSlideOutBottom = "DrawerSlideOutBottom";
 const styles = {
+  "prokodo-Drawer": "prokodo-Drawer",
   "prokodo-Drawer__backdrop": "prokodo-Drawer__backdrop",
   "prokodo-Drawer__backdrop--open": "prokodo-Drawer__backdrop--open",
   "prokodo-Drawer__container": "prokodo-Drawer__container",
@@ -16,35 +15,31 @@ const styles = {
   "prokodo-Drawer__container--fullscreen": "prokodo-Drawer__container--fullscreen",
   "prokodo-Drawer__container--anchor-left": "prokodo-Drawer__container--anchor-left",
   "prokodo-Drawer__container--anchor-left--open": "prokodo-Drawer__container--anchor-left--open",
-  slideInLeft,
-  slideOutLeft,
+  DrawerSlideInLeft,
+  DrawerSlideOutLeft,
   "prokodo-Drawer__container--anchor-right": "prokodo-Drawer__container--anchor-right",
   "prokodo-Drawer__container--anchor-right--open": "prokodo-Drawer__container--anchor-right--open",
-  slideInRight,
-  slideOutRight,
+  DrawerSlideInRight,
+  DrawerSlideOutRight,
   "prokodo-Drawer__container--anchor-top": "prokodo-Drawer__container--anchor-top",
   "prokodo-Drawer__container--anchor-top--open": "prokodo-Drawer__container--anchor-top--open",
-  slideInTop,
-  slideOutTop,
+  DrawerSlideInTop,
+  DrawerSlideOutTop,
   "prokodo-Drawer__container--anchor-bottom": "prokodo-Drawer__container--anchor-bottom",
   "prokodo-Drawer__container--anchor-bottom--open": "prokodo-Drawer__container--anchor-bottom--open",
-  slideInBottom,
-  slideOutBottom,
+  DrawerSlideInBottom,
+  DrawerSlideOutBottom,
   "prokodo-Drawer__header": "prokodo-Drawer__header",
-  "prokodo-Drawer__content": "prokodo-Drawer__content",
-  gradientMove,
-  fadeInKeyframe
+  "prokodo-Drawer__content": "prokodo-Drawer__content"
 };
 export {
-  styles as default,
-  fadeInKeyframe,
-  gradientMove,
-  slideInBottom,
-  slideInLeft,
-  slideInRight,
-  slideInTop,
-  slideOutBottom,
-  slideOutLeft,
-  slideOutRight,
-  slideOutTop
+  DrawerSlideInBottom,
+  DrawerSlideInLeft,
+  DrawerSlideInRight,
+  DrawerSlideInTop,
+  DrawerSlideOutBottom,
+  DrawerSlideOutLeft,
+  DrawerSlideOutRight,
+  DrawerSlideOutTop,
+  styles as default
 };

package/dist/components/drawer/Drawer.client.js

@@ -2,13 +2,14 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsx } from "react/jsx-runtime";
-import { forwardRef, useRef, useState, useCallback, useImperativeHandle, useEffect } from "react";
+import { forwardRef, useRef, useState, useCallback, useEffect, useImperativeHandle } from "react";
 import { DrawerView } from "./Drawer.view.js";
 function DrawerClient({ open = false, closeOnBackdropClick = true, onChange, ...props }, ref) {
   const triggerRef = useRef(null);
   const closeButtonRef = useRef(null);
   const containerRef = useRef(null);
   const [isOpen, setIsOpen] = useState(() => open);
+  const syncingFromPropRef = useRef(false);
   const openDrawer = useCallback(() => {
     triggerRef.current = document.activeElement;
     setIsOpen(true);
@@ -17,11 +18,27 @@ function DrawerClient({ open = false, closeOnBackdropClick = true, onChange, ...
     (reason) => {
       var _a;
       setIsOpen(false);
-      onChange == null ? void 0 : onChange({}, reason ?? "backdropClick");
+      if (!syncingFromPropRef.current) {
+        onChange == null ? void 0 : onChange({}, reason ?? "backdropClick");
+      }
       (_a = triggerRef.current) == null ? void 0 : _a.focus();
     },
     [onChange]
   );
+  useEffect(() => {
+    var _a;
+    syncingFromPropRef.current = true;
+    if (open && !isOpen) {
+      triggerRef.current = document.activeElement;
+      setIsOpen(true);
+    } else if (!open && isOpen) {
+      setIsOpen(false);
+      (_a = triggerRef.current) == null ? void 0 : _a.focus();
+    }
+    queueMicrotask(() => {
+      syncingFromPropRef.current = false;
+    });
+  }, [open, isOpen]);
   useImperativeHandle(
     ref,
     () => ({

package/dist/components/drawer/Drawer.effects.client.js

@@ -0,0 +1,16 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { useEffect } from "react";
+function DrawerEffectsLoader({ useSlide }) {
+  useEffect(() => {
+    if (Boolean(useSlide)) {
+      void import("./Drawer.effects.module.scss.js");
+    }
+  }, [useSlide]);
+  return null;
+}
+__name(DrawerEffectsLoader, "DrawerEffectsLoader");
+export {
+  DrawerEffectsLoader
+};

package/dist/components/drawer/Drawer.effects.module.scss.js

@@ -0,0 +1,29 @@
+const DrawerSlideInLeft = "DrawerSlideInLeft";
+const DrawerSlideOutLeft = "DrawerSlideOutLeft";
+const DrawerSlideInRight = "DrawerSlideInRight";
+const DrawerSlideOutRight = "DrawerSlideOutRight";
+const DrawerSlideInTop = "DrawerSlideInTop";
+const DrawerSlideOutTop = "DrawerSlideOutTop";
+const DrawerSlideInBottom = "DrawerSlideInBottom";
+const DrawerSlideOutBottom = "DrawerSlideOutBottom";
+const Drawer_effects_module = {
+  DrawerSlideInLeft,
+  DrawerSlideOutLeft,
+  DrawerSlideInRight,
+  DrawerSlideOutRight,
+  DrawerSlideInTop,
+  DrawerSlideOutTop,
+  DrawerSlideInBottom,
+  DrawerSlideOutBottom
+};
+export {
+  DrawerSlideInBottom,
+  DrawerSlideInLeft,
+  DrawerSlideInRight,
+  DrawerSlideInTop,
+  DrawerSlideOutBottom,
+  DrawerSlideOutLeft,
+  DrawerSlideOutRight,
+  DrawerSlideOutTop,
+  Drawer_effects_module as default
+};

package/dist/components/drawer/Drawer.server.js

@@ -3,7 +3,6 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 import { jsx } from "react/jsx-runtime";
 import { DrawerView } from "./Drawer.view.js";
 function DrawerServer(props) {
-  if (Boolean(props == null ? void 0 : props.open)) return null;
   return /* @__PURE__ */ jsx(DrawerView, { ...props });
 }
 __name(DrawerServer, "DrawerServer");