@yr3/ui 1.0.22 → 1.0.24

package/dist/components/Control/control.css

@@ -109,4 +109,9 @@
   width: 100%;
 }
 
+.yr3Control--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
 /*# sourceMappingURL=control.css.map */

package/dist/components/Control/control.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/Control/control.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAIF;EACE;;;AAGF;EACE;;;AAEF;EACE","file":"control.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/Control/control.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAIF;EACE;;;AAGF;EACE;;;AAEF;EACE;;;AAGF;EACI;EACA","file":"control.css"}

package/dist/components/Date/month.css

@@ -128,4 +128,9 @@
   --border-selected: var(--color-white);
 }
 
+.yr3MonthSelector--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
 /*# sourceMappingURL=month.css.map */

package/dist/components/Date/month.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/Date/month.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;;AAIN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;;AAMR;EACI;EACA;;;AAKJ;EACI;EACA;;;AAKR;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA","file":"month.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/Date/month.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;;AAIN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;;AAMR;EACI;EACA;;;AAKJ;EACI;EACA;;;AAKR;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAGJ;EACI;EACA","file":"month.css"}

package/dist/components/Input/input.css

@@ -100,4 +100,9 @@ input::placeholder {
   width: 150px;
 }
 
+.yr3Input--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
 /*# sourceMappingURL=input.css.map */

package/dist/components/Input/input.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/Input/input.scss"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACI;EACA;EACA;;;AAGJ;AAAA;EAEE;EACA;;;AAEF;EACI;EACA;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;AACA;EACE;;;AAIF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAEF;EACE","file":"input.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/Input/input.scss"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACI;EACA;EACA;;;AAGJ;AAAA;EAEE;EACA;;;AAEF;EACI;EACA;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;AACA;EACE;;;AAIF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAEF;EACE;;;AAGF;EACE;EACA","file":"input.css"}

package/dist/components/Select/select.css

@@ -17,7 +17,7 @@
   margin-top: 10px;
   position: absolute;
   right: 0;
-  z-index: 3;
+  z-index: 1;
 }
 .yr3Select--icon--open {
   transform: rotate(180deg);
@@ -93,4 +93,9 @@
   transition: transform 0.3s ease;
 }
 
+.yr3Select--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
 /*# sourceMappingURL=select.css.map */

package/dist/components/Select/select.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/Select/select.scss"],"names":[],"mappings":"AACE;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AACA;EACI;;;AAMV;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAGJ;EACI","file":"select.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/Select/select.scss"],"names":[],"mappings":"AACE;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AACA;EACI;;;AAMV;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA","file":"select.css"}

package/dist/components/Slide/slide.css

@@ -1,50 +1,55 @@
+@charset "UTF-8";
 .yr3Slide {
-  position: absolute;
+  z-index: 1200;
+}
+
+.yr3Slide--content {
+  position: absolute; /* 🔥 fondamentale */
   transition: transform 0.3s ease;
-  will-change: transform;
-  z-index: 2;
-  overflow: hidden;
 }
 
-/* DIRECTIONS */
-.yr3Slide--content--left::before {
-  content: "";
-  overflow: hidden;
-  height: 100%;
+.yr3Slide--content--right {
+  top: 0;
+  left: 0;
 }
-.yr3Slide--content--left {
-  transform: translateX(-110%);
+.yr3Slide--content--right.yr3Slide--in {
+  transform: translate(0, 0);
+}
+.yr3Slide--content--right.yr3Slide--out {
+  transform: translateX(100%);
 }
 
-.yr3Slide--content--right::before {
-  content: "";
-  overflow: hidden;
-  height: 100%;
+.yr3Slide--content--left {
+  top: 0;
+  right: 0;
 }
-.yr3Slide--content--right {
-  transform: translateX(110%);
+.yr3Slide--content--left.yr3Slide--in {
+  transform: translate(0, 0);
+}
+.yr3Slide--content--left.yr3Slide--out {
+  transform: translateX(-100%);
 }
 
 .yr3Slide--content--top {
-  transform: translateY(-100%);
+  top: 0;
+  left: 0;
 }
-
-.yr3Slide--content--bottom::before {
-  content: "";
-  overflow: hidden;
-  height: 100%;
+.yr3Slide--content--top.yr3Slide--in {
+  transform: translate(0, 0);
 }
-.yr3Slide--content--bottom {
+.yr3Slide--content--top.yr3Slide--out {
   transform: translateY(-100%);
 }
 
-/* OPEN */
-.yr3Slide--content--in {
+.yr3Slide--content--bottom {
+  bottom: 0;
+  left: 0;
+}
+.yr3Slide--content--bottom.yr3Slide--in {
   transform: translate(0, 0);
 }
-
-.yr3Slide--content--out {
-  transition: all 0.3s ease;
+.yr3Slide--content--bottom.yr3Slide--out {
+  transform: translateY(100%);
 }
 
 /*# sourceMappingURL=slide.css.map */

package/dist/components/Slide/slide.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/Slide/slide.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;;;AAGJ;AAGI;EACI;EACA;EACA;;AAJR;EAMG;;;AAIE;EACG;EACA;EACA;;AAJR;EAMG;;;AAGH;EACE;;;AAIE;EACI;EACA;EACA;;AAJR;EAMG;;;AAGH;AAEA;EACE;;;AAGF;EACE","file":"slide.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/Slide/slide.scss"],"names":[],"mappings":";AAAA;EAGE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;AACA;EACA;;AAEA;EACC;;;AAIH;EACE;EACA;;AACA;EACA;;AAEA;EACC;;;AAIH;EACE;EACA;;AACA;EACA;;AAEA;EACC;;;AAIH;EACE;EACA;;AACA;EACA;;AAEA;EACC","file":"slide.css"}

package/dist/index.cjs

@@ -953,9 +953,9 @@ var buttonVariant = createVariants({
 
 // src/components/Button/Button.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var Button = ({ children, color = "text", variant = "text", animated, disabled, gradientBorder = false, size = "auto", ui, style, propsComponent, ...props }) => {
+var Button = ({ icon, children, color = "text", variant = "text", animated, disabled, gradientBorder = false, size = "auto", ui, style, propsComponent, ...props }) => {
   const buttonClassname = buttonVariant({ variant, color, animated, disabled, gradientBorder, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "button",
     {
       className: buttonClassname,
@@ -963,7 +963,10 @@ var Button = ({ children, color = "text", variant = "text", animated, disabled,
       "data-testid": "yr3Button",
       ...props,
       style: composeStyles(ui, style),
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { variant: propsComponent?.text?.variant || "button", ...propsComponent?.text, children })
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "yr3Button--icon", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { variant: propsComponent?.text?.variant || "button", ...propsComponent?.text, children })
+      ]
     }
   );
 };
@@ -1381,7 +1384,7 @@ var Control = ({
     error,
     disabled
   };
-  const classes = controlVariants({ variant, color, label, size });
+  const classes = controlVariants({ variant, color, label, size, disabled });
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ControlContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "div",
     {
@@ -1614,6 +1617,7 @@ var Input = React9.forwardRef(
     pattern = "text",
     color = "primary",
     size = "auto",
+    disabled = false,
     ...props
   }, ref) => {
     const [focused, setFocused] = React9.useState(false);
@@ -1645,7 +1649,7 @@ var Input = React9.forwardRef(
       onChange?.(e, newValue);
     };
     const classes = inputVariants({ color, label: propsComponent?.label?.display });
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Control, { variant, color, label: propsComponent?.label?.display, ...propsComponent.control, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Control, { variant, color, label: propsComponent?.label?.display, disabled, ...propsComponent.control, children: [
       propsComponent?.label?.display && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         Label,
         {
@@ -1663,6 +1667,7 @@ var Input = React9.forwardRef(
           inputMode: pattern === "currency" ? "numeric" : pattern === "phone" ? "tel" : void 0,
           autoComplete: "off",
           type: "text",
+          disabled,
           onChange: handleChange,
           onFocus: () => setFocused(true),
           onBlur: () => setFocused(false),
@@ -1713,6 +1718,17 @@ var IconLeft = (props) => {
 };
 
 // src/components/Date/month.variants.ts
+var monthSelectorVariants = createVariants({
+  base: "yr3MonthSelector",
+  variants: {
+    wrapper: {
+      true: "yr3MonthSelector--wrapper"
+    },
+    disabled: {
+      true: "yr3MonthSelector--disabled"
+    }
+  }
+});
 var monthSelectorIconVariants = createVariants({
   base: "yr3MonthSelector--icon",
   variants: {
@@ -1822,17 +1838,24 @@ var MonthSelector = ({ label, value, disabled, propsComponent, data, daysFormat,
   const getData = React10.useMemo(() => {
     return getMonthCalendarProps({ year: data.years[yearSelected], data, daysFormat, value: valueState });
   }, [yearSelected, data, daysFormat, valueState]);
-  React10.useEffect(() => {
-    if (onNext) onNext(getData.prev);
-    if (onLast) onLast(getData.last);
-  }, [getData]);
-  React10.useEffect(() => {
-    setValueState(value || null);
-  }, [value]);
-  React10.useEffect(() => {
-    if (onChange && valueState) onChange(valueState);
-  }, [valueState, onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "yr3MonthSelector", ref, children: [
+  const handleYearChange = (newIndex) => {
+    setYearSelected(newIndex);
+  };
+  const handleMonthChange = (month) => {
+    const newValue = `${month}-${data.years[yearSelected]}`;
+    setValueState(newValue);
+    onChange(newValue);
+    const nextData = getMonthCalendarProps({
+      year: data.years[yearSelected],
+      data,
+      daysFormat,
+      value: newValue
+    });
+    onNext?.(nextData.prev);
+    onLast?.(nextData.last);
+  };
+  const classes = monthSelectorVariants({ wrapper: true, disabled });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: classes, ref, children: [
     /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       Input,
       {
@@ -1851,7 +1874,7 @@ var MonthSelector = ({ label, value, disabled, propsComponent, data, daysFormat,
       {
         className: iconClasses,
         style: properties?.icon?.style,
-        onClick: () => !disabled && setOpen((prev) => !prev),
+        onClick: () => !disabled && setOpen(true),
         "data-testid": "yr3MonthSelector--icon",
         children: properties?.icon?.component ? properties?.icon.component : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           IconCalendar,
@@ -1883,7 +1906,7 @@ var MonthSelector = ({ label, value, disabled, propsComponent, data, daysFormat,
                     disabled: disabled || yearSelected === 0,
                     type: "button",
                     className: `yr3MonthSelector--year-button-back ${yearSelected === 0 ? "yr3MonthSelector--year-button-back--disabled" : ""} `,
-                    onClick: () => setYearSelected(yearSelected - 1),
+                    onClick: () => handleYearChange(yearSelected - 1),
                     children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconLeft, { width: 20, height: 20, stroke: "currentColor" })
                   }
                 ),
@@ -1897,7 +1920,7 @@ var MonthSelector = ({ label, value, disabled, propsComponent, data, daysFormat,
                     disabled: disabled || yearSelected === data.years.length - 1,
                     type: "button",
                     className: `yr3MonthSelector--year-button-next ${yearSelected === data.years.length - 1 ? "yr3MonthSelector--year-button-next--disabled" : ""}`,
-                    onClick: () => setYearSelected(yearSelected + 1),
+                    onClick: () => handleYearChange(yearSelected + 1),
                     children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconRight, { width: 20, height: 30, stroke: "currentColor" })
                   }
                 )
@@ -1912,8 +1935,7 @@ var MonthSelector = ({ label, value, disabled, propsComponent, data, daysFormat,
               disabled: m.disabled,
               className: `yr3MonthSelector--month ${m.disabled ? "yr3MonthSelector--month--disabled" : ""} ${m.selected ? "yr3MonthSelector--month--selected" : ""}`,
               onClick: () => {
-                setValueState(`${m.value}-${data.years[yearSelected]}`);
-                setOpen(false);
+                handleMonthChange(m.value);
               },
               children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text, { ...properties?.text, weight: m.disabled ? "thin" : "medium", children: m.label })
             },
@@ -3071,6 +3093,9 @@ var selectVariants = createVariants({
       base: "yr3Select--base",
       lined: "yr3Select--lined"
     },
+    disabled: {
+      true: "yr3Select--disabled"
+    },
     color: {
       primary: "yr3Select--color-primary",
       secondary: "yr3Select--color-secondary",
@@ -3155,14 +3180,14 @@ var initiaPropsComponent4 = {
     component: void 0
   }
 };
-var Select = ({ label, options, name, value, defaultValue, onChange, propsComponent }) => {
+var Select = ({ label, options, name, value, defaultValue, onChange, propsComponent, disabled }) => {
   const [open, setOpen] = React21.useState(false);
   const [valueState, setValueState] = React21.useState(value || defaultValue || null);
   const ref = React21.useRef(null);
   useClickAway(ref, () => setOpen(false));
   const properties = mergeDeep(initiaPropsComponent4, propsComponent || {});
   const classesIcon = selectIconVariants({ color: properties?.icon?.color, animated: open, open });
-  const classes = selectVariants({ wrapper: true });
+  const classes = selectVariants({ wrapper: true, disabled });
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: classes, ref, children: [
     /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       Input,
@@ -3182,7 +3207,7 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
       {
         className: classesIcon,
         style: properties?.icon?.style,
-        onClick: () => setOpen((prev) => !prev),
+        onClick: () => !disabled && setOpen((prev) => !prev),
         "data-testid": "yr3Select-icon",
         children: properties?.icon?.component ? properties?.icon.component : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           IconDown,
@@ -3234,13 +3259,40 @@ var Select = ({ label, options, name, value, defaultValue, onChange, propsCompon
 
 // src/components/Slide/Slide.tsx
 var React22 = __toESM(require("react"), 1);
+
+// src/components/Slide/variants.slide.ts
+var variantsSlide = createVariants({
+  base: "yr3Slide--content",
+  variants: {
+    direction: {
+      left: "yr3Slide--content--left",
+      right: "yr3Slide--content--right",
+      top: "yr3Slide--content--top",
+      bottom: "yr3Slide--content--bottom"
+    },
+    open: {
+      true: "yr3Slide--in",
+      false: "yr3Slide--out"
+    }
+  }
+});
+
+// src/components/Slide/Slide.tsx
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var initialPropsComponent5 = {
   slide: {
     ui: {},
     style: {}
   },
-  box: {}
+  content: {
+    ui: {},
+    style: {}
+  },
+  box: {
+    as: "div",
+    ui: {},
+    style: {}
+  }
 };
 var Slide = ({
   in: inProp,
@@ -3251,33 +3303,29 @@ var Slide = ({
   propsComponent
 }) => {
   const properties = mergeDeep(initialPropsComponent5, propsComponent || {});
-  const bemContent = bem("yr3Slide--content");
-  const classNameContent = bemContent(void 0, {
-    [direction]: true,
-    "in": !!inProp,
-    "out": !inProp
-  });
+  const stateRef = React22.useRef(inProp ? "in" : "out");
   React22.useEffect(() => {
-    let timeoutId;
-    if (inProp) {
-      timeoutId = setTimeout(() => {
-        onTransitionEnd && onTransitionEnd();
-      }, duration);
-    }
-    return () => clearTimeout(timeoutId);
-  }, [inProp, duration, onTransitionEnd]);
-  const uiStyleContent = uiStyle({ ...properties?.slide?.ui, transitionDuration: `${duration}ms` });
+    stateRef.current = inProp ? "in" : "out";
+  }, [inProp]);
+  const classesContent = variantsSlide({ direction, open: !!inProp ? "true" : "false" });
+  const uiStyleSlider = uiStyle({ ...properties?.slide?.ui, transitionDuration: `${duration}ms` });
+  const uiStyleContent = uiStyle({ ...properties?.content?.ui, transitionDuration: `${duration}ms` });
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "div",
     {
       className: "yr3Slide",
-      style: composeStyles(),
+      style: composeStyles(uiStyleSlider, properties?.slide?.style || {}),
       "data-testid": "yr3Slide",
       children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
         "div",
         {
-          className: classNameContent,
-          style: composeStyles(uiStyleContent, properties?.slide?.style || {}),
+          className: classesContent,
+          onTransitionEnd: (e) => {
+            if (e.target === e.currentTarget && e.propertyName === "transform") {
+              onTransitionEnd?.(stateRef?.current);
+            }
+          },
+          style: composeStyles(uiStyleContent, properties?.content?.style || {}),
           "data-testid": "yr3Slide-content",
           children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Box, { ...properties?.box, "data-testid": "yr3Slide-box", children })
         }

package/dist/index.d.cts

@@ -1039,6 +1039,7 @@ type ButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
     gradientBorder?: boolean;
     ui?: UIProps;
     size?: 'auto' | 'full';
+    icon?: React$1.ReactNode;
     propsComponent?: {
         text?: Omit<TextProps, 'children'>;
     };
@@ -1437,7 +1438,7 @@ type MonthSelectorProps = {
     };
     onNext?: (value: string) => void;
     onLast?: (value: string) => void;
-    onChange?: (value: string) => void;
+    onChange: (value: string) => void;
     propsComponent?: {
         control?: Omit<React$1.ComponentProps<typeof Input>, 'value' | 'onChange'>;
         wrapper?: {
@@ -1843,12 +1844,16 @@ type SlideProps = {
     children?: React$1.ReactNode;
     direction?: 'left' | 'right' | 'top' | 'bottom';
     duration?: number;
-    onTransitionEnd?: () => void;
+    onTransitionEnd?: (state: 'in' | 'out') => void;
     propsComponent?: {
         slide?: {
             ui?: UIProps;
             style?: React$1.CSSProperties;
         };
+        content?: {
+            ui?: UIProps;
+            style?: React$1.CSSProperties;
+        };
         box?: Omit<BoxProps, 'children'>;
     };
 };

package/dist/index.d.ts

@@ -1039,6 +1039,7 @@ type ButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
     gradientBorder?: boolean;
     ui?: UIProps;
     size?: 'auto' | 'full';
+    icon?: React$1.ReactNode;
     propsComponent?: {
         text?: Omit<TextProps, 'children'>;
     };
@@ -1437,7 +1438,7 @@ type MonthSelectorProps = {
     };
     onNext?: (value: string) => void;
     onLast?: (value: string) => void;
-    onChange?: (value: string) => void;
+    onChange: (value: string) => void;
     propsComponent?: {
         control?: Omit<React$1.ComponentProps<typeof Input>, 'value' | 'onChange'>;
         wrapper?: {
@@ -1843,12 +1844,16 @@ type SlideProps = {
     children?: React$1.ReactNode;
     direction?: 'left' | 'right' | 'top' | 'bottom';
     duration?: number;
-    onTransitionEnd?: () => void;
+    onTransitionEnd?: (state: 'in' | 'out') => void;
     propsComponent?: {
         slide?: {
             ui?: UIProps;
             style?: React$1.CSSProperties;
         };
+        content?: {
+            ui?: UIProps;
+            style?: React$1.CSSProperties;
+        };
         box?: Omit<BoxProps, 'children'>;
     };
 };