@caspeco/casper-ui-library 8.4.0 → 9.0.0-alpha.0

package/dist/components/date-picker/datepicker-week-recipe.d.ts

@@ -0,0 +1,48 @@
+import { ThemeColorToken } from '../../theme/theme-tokens.js';
+export declare const dateCellWeekRecipe: import('@chakra-ui/react').RecipeDefinition<{
+    variant: {
+        normal: {
+            _disabled: {
+                _hover: {
+                    background: "none";
+                };
+            };
+        };
+        outSideMonth: {
+            color: ThemeColorToken.OnBackgroundSubdued;
+            _disabled: {
+                background: "none";
+            };
+        };
+        currentDay: {
+            color: ThemeColorToken.Accent;
+            background: ThemeColorToken.Background;
+            "& span": {
+                background: ThemeColorToken.Accent;
+            };
+            _hover: {
+                color: ThemeColorToken.AccentHover;
+                _disabled: {
+                    borderColor: ThemeColorToken.Accent;
+                    background: "none";
+                };
+            };
+        };
+        startDateRange: {};
+        endDateRange: {};
+        isSelectedRangeDay: {};
+        selectedDay: {
+            background: ThemeColorToken.AccentContainer;
+            color: ThemeColorToken.OnSurface;
+            _disabled: {
+                background: ThemeColorToken.AccentContainer;
+                color: ThemeColorToken.OnSurface;
+            };
+            _hover: {
+                background: ThemeColorToken.AccentHover;
+                color: ThemeColorToken.OnAccent;
+            };
+        };
+    };
+}>;
+//# sourceMappingURL=datepicker-week-recipe.d.ts.map

package/dist/components/date-picker/datepicker-week-recipe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"datepicker-week-recipe.d.ts","sourceRoot":"","sources":["../../../lib/components/date-picker/datepicker-week-recipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAsC,MAAM,sBAAsB,CAAC;AAG3F,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiG7B,CAAC"}

package/dist/components/date-picker/datepicker-week-recipe.js

@@ -0,0 +1,93 @@
+import { ThemeColorToken as e, ThemeFontToken as o, ThemeFontSizeToken as n } from "../../theme/theme-tokens.js";
+import { defineRecipe as r } from "@chakra-ui/react";
+const c = r({
+  base: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    flexDirection: "row",
+    padding: "12px 8px",
+    height: "unset",
+    borderRadius: "none",
+    minWidth: "32px",
+    fontSize: n.Medium,
+    fontFamily: o.Body,
+    color: e.OnSurface,
+    position: "relative",
+    border: "2px solid transparent",
+    "& span": {
+      position: "absolute",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      top: "50%",
+      left: "50%",
+      width: "24px",
+      height: "2px",
+      transform: "translate(-50%,-50%)rotate(-45deg)",
+      background: e.OnSurface,
+      opacity: "0.48"
+    },
+    _hover: {
+      background: e.AccentHoverAlpha
+    },
+    _active: {
+      background: e.AccentActiveAlpha
+    },
+    _disabled: {
+      cursor: "not-allowed",
+      borderRadius: "none",
+      color: e.OnSurfaceSubdued,
+      opacity: 0.48
+    }
+  },
+  variants: {
+    variant: {
+      normal: {
+        _disabled: {
+          _hover: {
+            background: "none"
+          }
+        }
+      },
+      outSideMonth: {
+        color: e.OnBackgroundSubdued,
+        _disabled: {
+          background: "none"
+        }
+      },
+      currentDay: {
+        color: e.Accent,
+        background: e.Background,
+        "& span": {
+          background: e.Accent
+        },
+        _hover: {
+          color: e.AccentHover,
+          _disabled: {
+            borderColor: e.Accent,
+            background: "none"
+          }
+        }
+      },
+      startDateRange: {},
+      endDateRange: {},
+      isSelectedRangeDay: {},
+      selectedDay: {
+        background: e.AccentContainer,
+        color: e.OnSurface,
+        _disabled: {
+          background: e.AccentContainer,
+          color: e.OnSurface
+        },
+        _hover: {
+          background: e.AccentHover,
+          color: e.OnAccent
+        }
+      }
+    }
+  }
+});
+export {
+  c as dateCellWeekRecipe
+};

package/dist/components/date-picker/types.d.ts

@@ -4,45 +4,28 @@ export type DateRange = {
 };
 export type LocaleKey = "en-US" | "en-GB" | "nb-NO" | "da-DK" | "sv-SE" | "nl-NL" | "nl-BE" | "fr-FR" | "fr-BE" | "fi-FI" | "es-ES" | "et-EE" | "lt-LT" | "lv-LV";
 export type DatePickerPropsBase = {
-    /**
-     * A callback function called when the user changes the month.
-     * @type {(month: Date) => void}
-     */
+    /** A callback function called when the user changes the month. */
     onMonthChange?: (month: Date) => void;
-    /**
-     * Optional. When set to true, all Sundays will be marked as red.
-     * @type {boolean}
-     */
+    /** Optional. When set to true, all Sundays will be marked as red. */
     markSundayRed?: boolean;
     /**
      * Optional. An array of upcoming dates to be struck through (disabled) in the date picker.
      * These dates will be disabled and the user won't be able to select them.
-     * @type {Date[]}
      */
     strikeThroughDates?: Date[];
     /**
      * The locale used by the date picker.
      * This will set the language of the weekdays and months displayed in the date picker.
-     * @type {LocaleKey}
      */
     localeString: LocaleKey;
     /**
      * This boolean determines if the date picker will be able to select a past date.
      * Default value should be false.
-     * @type {boolean}
      */
     canSelectPastDates?: boolean;
-    /**
-     * This bool will determine if the datepicker should be expanded or collapsed.
-     * @type {boolean}
-     */
+    /** This bool will determine if the datepicker should be expanded or collapsed. */
     isExpanded?: boolean;
-    /**
-     * This will add a dot under the datecell.
-     * Date[],
-     * @type {{Date[]}}
-     *
-     */
+    /** This will add a dot under the datecell. */
     dots?: {
         yellowDotDates?: Date[];
         greenDotDates?: Date[];
@@ -50,12 +33,7 @@ export type DatePickerPropsBase = {
         redDotDates?: Date[];
         greyDotDates?: Date[];
     };
-    /**
-     * This will show week number,
-     * Default value should be false.
-     * @type {boolean}
-     *
-     */
+    /** This will show week number, default value should be false. */
     weekNumbers?: boolean;
     /**
      * Determines if selecting a date should also select the entire week.
@@ -63,75 +41,43 @@ export type DatePickerPropsBase = {
      * When set to `true`, choosing a date within the datepicker will result
      * in the entire week (row) being selected. If set to `false` or left
      * undefined, only the individual date will be selected.
-     *
-     * @type {boolean}
-     * @default false
      */
     selectWeek?: boolean;
     /**
-     * This will show days outside the selected month,
-     * default value is false.
+     * This will show days outside the selected month, default value is false.
      * Since we only should render days outside the selected month, if that is required in the design or use of the datepicker.
      * We are not using the weekNumber then we should not render the days outside month.
-     * @type {boolean}
      *
      */
     showDaysOutsideMonth?: boolean;
-    /**
-     * The currently selected date.
-     * @type {Date}
-     */
+    /** The currently selected date. */
     selectedDate?: Date;
-    /**
-     * A callback function called when the user changes the date.
-     * @type {(date: Date) => void}
-     */
+    /** A callback function called when the user changes the date. */
     onDateChange?: (date: Date) => void;
     /**
      * Prop `shouldDisableDate` is a function that determines if specific dates in the DatePicker should be disabled.
      * Dates for which this function returns true will be unselectable; if it returns false, they remain selectable.
-     *
-     * @type {(date: Date) => boolean}
      */
     shouldDisableDate?: (date: Date) => boolean;
-    /**
-     * The initially selected month.
-     * @type {Date}
-     */
+    /** The initially selected month. */
     selectedMonth?: Date;
     dateRange?: DateRange;
     isRangeDate?: boolean;
     onRangeChange?: (dateRange: DateRange) => void;
-    /**
-     * Disables the Datepicker.
-     *
-     * @type {boolean}
-     */
+    /**  Disables the Datepicker. */
     isDisabled?: boolean;
-    /**
-     * Array of dates that will be highlighted in the date picker that are marked red.
-     *
-     * @type {Date[]}
-     */
+    /** Array of dates that will be highlighted in the date picker that are marked red. */
     redDays?: Date[];
-    /**
-     * If true, the user can't navigate past the current month.
-     *
-     * @type {boolean}
-     */
+    /** If true, the user can't navigate past the current month. */
     disablePastMonths?: boolean;
     /**
      * If true, the left chevron (backward navigation) will be disabled,
      * preventing the user from navigating to previous months.
-     *
-     * @type {boolean}
      */
     disableBackwardNavigation?: boolean;
     /**
      * If true, the right chevron (forward navigation) will be disabled,
      * preventing the user from navigating to future months.
-     *
-     * @type {boolean}
      */
     disableForwardNavigation?: boolean;
 };

package/dist/components/date-picker/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../lib/components/date-picker/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../lib/components/date-picker/types.ts"],"names":[],"mappings":"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"}

package/dist/components/divider/divider-recipe.d.ts

@@ -0,0 +1,3 @@
+import { RecipeDefinition } from '@chakra-ui/react';
+export declare const dividerRecipe: RecipeDefinition;
+//# sourceMappingURL=divider-recipe.d.ts.map

package/dist/components/divider/divider-recipe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider-recipe.d.ts","sourceRoot":"","sources":["../../../lib/components/divider/divider-recipe.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,gBAAgB,EAAgB,MAAM,kBAAkB,CAAC;AAQvE,eAAO,MAAM,aAAa,EAAE,gBAE1B,CAAC"}

package/dist/components/divider/divider-recipe.js

@@ -0,0 +1,12 @@
+import { ThemeColorToken as e } from "../../theme/theme-tokens.js";
+import { defineRecipe as o } from "@chakra-ui/react";
+const r = {
+  borderColor: e.OnBackgroundBorder,
+  m: 0,
+  opacity: 1
+}, c = o({
+  base: r
+});
+export {
+  c as dividerRecipe
+};

package/dist/components/divider/divider.d.ts

@@ -1,6 +1,6 @@
 import { ThemeStyleProps } from '../../theme/index.js';
-import { DividerProps as ChakraDividerProps } from '@chakra-ui/react';
-export type DividerProps = Pick<ChakraDividerProps, "orientation"> & ThemeStyleProps;
+import { SeparatorProps as ChakraSeparatorProps } from '@chakra-ui/react';
+export type DividerProps = Pick<ChakraSeparatorProps, "orientation"> & ThemeStyleProps;
 /**
  * Layout component used to visually separate content in a list or group.
  * It displays a thin horizontal or vertical line, and renders a hr tag.

package/dist/components/divider/divider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../../lib/components/divider/divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,eAAe,EAAE,MAAM,SAAS,CAAC;AACnE,OAAO,EAA4B,KAAK,YAAY,IAAI,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAErG,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,kBAAkB,EAAE,aAAa,CAAC,GAAG,eAAe,CAAC;AAErF;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,EACvB,WAAmD,EACnD,WAA0B,EAC1B,GAAG,KAAK,EACR,EAAE,YAAY,2CAEd"}
+{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../../lib/components/divider/divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,eAAe,EAAE,MAAM,SAAS,CAAC;AACnE,OAAO,EAAgC,KAAK,cAAc,IAAI,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAE7G,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,oBAAoB,EAAE,aAAa,CAAC,GAAG,eAAe,CAAC;AAEvF;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,EACvB,WAAmD,EACnD,WAA0B,EAC1B,GAAG,KAAK,EACR,EAAE,YAAY,2CAUd"}

package/dist/components/divider/divider.js

@@ -1,13 +1,22 @@
 import { jsx as e } from "react/jsx-runtime";
-import { Divider as m } from "@chakra-ui/react";
-import { ThemeColorVariable as t } from "../../theme/theme-types.js";
-function f({
-  borderColor: r = t.OnBackgroundBorder,
-  orientation: o = "horizontal",
+import { Separator as t } from "@chakra-ui/react";
+import { ThemeColorVariable as m } from "../../theme/theme-types.js";
+function l({
+  borderColor: o = m.OnBackgroundBorder,
+  orientation: r = "horizontal",
   ...i
 }) {
-  return /* @__PURE__ */ e(m, { borderColor: r, orientation: o, ...i });
+  return /* @__PURE__ */ e(
+    t,
+    {
+      borderColor: o,
+      orientation: r,
+      height: r === "vertical" ? "100%" : void 0,
+      width: r === "horizontal" ? "100%" : void 0,
+      ...i
+    }
+  );
 }
 export {
-  f as Divider
+  l as Divider
 };

package/dist/components/drawer/drawer-recipe.d.ts

@@ -0,0 +1,3 @@
+import { SlotRecipeDefinition } from '@chakra-ui/react';
+export declare const drawerRecipe: SlotRecipeDefinition;
+//# sourceMappingURL=drawer-recipe.d.ts.map

package/dist/components/drawer/drawer-recipe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-recipe.d.ts","sourceRoot":"","sources":["../../../lib/components/drawer/drawer-recipe.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,oBAAoB,EAAoB,MAAM,kBAAkB,CAAC;AAG/E,eAAO,MAAM,YAAY,EAAE,oBAmBzB,CAAC"}

package/dist/components/drawer/drawer-recipe.js

@@ -0,0 +1,31 @@
+import { ThemeColorToken as t } from "../../theme/theme-tokens.js";
+import { defineSlotRecipe as e } from "@chakra-ui/react";
+import { drawerAnatomy as o } from "../../node_modules/@chakra-ui/react/dist/esm/anatomy.js";
+const m = e({
+  className: "drawer",
+  slots: o.keys(),
+  base: {
+    content: {
+      bg: t.Surface,
+      color: t.OnSurface,
+      maxHeight: "100dvh"
+    }
+  },
+  variants: {
+    size: {
+      xs: { content: { maxWidth: "320px" } },
+      // Chakra default
+      sm: { content: { maxWidth: "448px" } },
+      // Chakra default
+      md: { content: { maxWidth: "560px" } },
+      // Custom
+      lg: { content: { maxWidth: "672px" } },
+      // Chakra default
+      xl: { content: { maxWidth: "896px" } }
+      // Chakra default
+    }
+  }
+});
+export {
+  m as drawerRecipe
+};

package/dist/components/drawer/drawer.d.ts

@@ -5,7 +5,6 @@ import { DrawerProps } from './types.js';
  * or view some details without leaving the current page.
  *
  * @see Docs https://caspeco.github.io/casper-ui-library/components/drawer
- * @see Inspiration https://v2.chakra-ui.com/community/recipes/horizontal-collapse
  */
-export declare function Drawer({ children, isOpen, onClose, isInline, closeOnEsc, closeOnOverlayClick, autoFocus, placement, size, ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Drawer({ children, isOpen, onClose, isInline, closeOnEsc, closeOnOverlayClick, placement, size, ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=drawer.d.ts.map

package/dist/components/drawer/drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../lib/components/drawer/drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C;;;;;;;GAOG;AACH,wBAAgB,MAAM,CAAC,EACtB,QAAQ,EACR,MAAM,EACN,OAAO,EACP,QAAgB,EAChB,UAAiB,EACjB,mBAA0B,EAC1B,SAAgB,EAChB,SAAmB,EACnB,IAAW,EACX,GAAG,KAAK,EACR,EAAE,WAAW,2CAwBb"}
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../lib/components/drawer/drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C;;;;;;GAMG;AACH,wBAAgB,MAAM,CAAC,EACtB,QAAQ,EACR,MAAM,EACN,OAAO,EACP,QAAgB,EAChB,UAAiB,EACjB,mBAA0B,EAC1B,SAAmB,EACnB,IAAW,EACX,GAAG,KAAK,EACR,EAAE,WAAW,2CAmCb"}

package/dist/components/drawer/drawer.js

@@ -1,36 +1,40 @@
-import { jsx as e, jsxs as o } from "react/jsx-runtime";
-import { Drawer as x, DrawerOverlay as g, DrawerContent as l } from "@chakra-ui/react";
-import { InlineDrawer as b } from "./inline-drawer.js";
-function y({
-  children: a,
-  isOpen: f,
-  onClose: u,
-  isInline: w = !1,
-  closeOnEsc: m = !0,
-  closeOnOverlayClick: D = !0,
-  autoFocus: n = !0,
-  placement: i = "right",
-  size: r = "xs",
-  ...t
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import { Drawer as e, Portal as s } from "@chakra-ui/react";
+import { InlineDrawer as p } from "./inline-drawer.js";
+function O({
+  children: o,
+  isOpen: i,
+  onClose: f,
+  isInline: l = !1,
+  closeOnEsc: c = !0,
+  closeOnOverlayClick: h = !0,
+  placement: t = "right",
+  size: n = "xs",
+  ...a
 }) {
-  return w && r !== "full" ? /* @__PURE__ */ e(b, { isOpen: f, onClose: u, size: r, closeOnEsc: m, ...t, children: a }) : /* @__PURE__ */ o(
-    x,
+  if (l && n !== "full")
+    return /* @__PURE__ */ r(p, { isOpen: i, onClose: f, size: n, closeOnEsc: c, ...a, children: o });
+  const u = t === "left" ? "start" : t === "right" ? "end" : t;
+  function d(g) {
+    g.open || f?.();
+  }
+  return /* @__PURE__ */ r(
+    e.Root,
     {
-      isOpen: f,
-      autoFocus: n,
-      onClose: u,
-      placement: i,
-      closeOnEsc: m,
-      closeOnOverlayClick: D,
-      size: r,
-      ...t,
-      children: [
-        /* @__PURE__ */ e(g, { bg: "rgba(0, 0, 0, 0.32)" }),
-        /* @__PURE__ */ e(l, { ...t, children: a })
-      ]
+      open: i,
+      onOpenChange: d,
+      placement: u,
+      closeOnEscape: c,
+      closeOnInteractOutside: h,
+      size: n,
+      ...a,
+      children: /* @__PURE__ */ m(s, { children: [
+        /* @__PURE__ */ r(e.Backdrop, { bg: "rgba(0, 0, 0, 0.32)" }),
+        /* @__PURE__ */ r(e.Positioner, { children: /* @__PURE__ */ r(e.Content, { ...a, children: o }) })
+      ] })
     }
   );
 }
 export {
-  y as Drawer
+  O as Drawer
 };

package/dist/components/drawer/index.d.ts

@@ -1,4 +1,3 @@
-export { useDisclosure } from '@chakra-ui/react';
 export { Drawer } from './drawer.js';
 export type { DrawerProps } from './types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/drawer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/drawer/inline-drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inline-drawer.d.ts","sourceRoot":"","sources":["../../../lib/components/drawer/inline-drawer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAK3C,wBAAgB,YAAY,CAAC,EAC5B,QAAQ,EACR,MAAM,EACN,OAAO,EACP,UAAiB,EACjB,IAAW,EACX,MAAU,EACV,GAAG,KAAK,EACR,EAAE,WAAW,2CA8Db"}
+{"version":3,"file":"inline-drawer.d.ts","sourceRoot":"","sources":["../../../lib/components/drawer/inline-drawer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAK3C,wBAAgB,YAAY,CAAC,EAC5B,QAAQ,EACR,MAAM,EACN,OAAO,EACP,UAAiB,EACjB,IAAW,EACX,MAAU,EACV,GAAG,KAAK,EACR,EAAE,WAAW,2CAqDb"}

package/dist/components/drawer/inline-drawer.js

@@ -1,22 +1,21 @@
 import { jsx as t } from "react/jsx-runtime";
-import { Box as p } from "@chakra-ui/react";
-import { motion as a } from "framer-motion";
-import { useRef as x, useMemo as I, useState as y } from "react";
-import { useInlineDrawerKeydown as S } from "./use-drawer-key-down.js";
-import { ThemeShadowVariable as A, ThemeColorVariable as i } from "../../theme/theme-types.js";
-const n = 0.3;
-function M({
-  children: s,
+import { Box as a } from "@chakra-ui/react";
+import { useRef as h, useMemo as w } from "react";
+import { useInlineDrawerKeydown as f } from "./use-drawer-key-down.js";
+import { ThemeShadowVariable as p, ThemeColorVariable as i } from "../../theme/theme-types.js";
+const r = "0.3s";
+function S({
+  children: n,
   isOpen: e,
-  onClose: d,
-  closeOnEsc: m = !0,
+  onClose: s,
+  closeOnEsc: c = !0,
   size: o = "xs",
-  zIndex: u = 1,
-  ...l
+  zIndex: l = 1,
+  ...u
 }) {
-  const c = x(null);
-  S({ isOpen: e, onClose: d, closeOnEsc: m });
-  const h = I(() => {
+  const d = h(null);
+  f({ isOpen: e, onClose: s, closeOnEsc: c });
+  const m = w(() => {
     switch (o) {
       case "xs":
         return 320;
@@ -31,43 +30,33 @@ function M({
       default:
         return 320;
     }
-  }, [o]), [f, r] = y(!e), w = { width: e ? h : 0 };
+  }, [o]);
   return /* @__PURE__ */ t(
-    a.aside,
+    a,
     {
-      ref: c,
-      hidden: f,
-      initial: !1,
-      onAnimationStart: () => r(!1),
-      onAnimationComplete: () => r(!e),
-      animate: w,
-      transition: {
-        duration: n,
-        ease: "easeInOut"
-      },
-      style: {
-        backgroundColor: i.Surface,
-        color: i.OnSurface,
-        overflow: "hidden",
-        boxShadow: A.Medium,
-        height: "100dvh",
-        top: "0",
-        zIndex: u
-      },
-      children: /* @__PURE__ */ t(
-        a.div,
-        {
-          initial: { opacity: 0 },
-          animate: { opacity: e ? 1 : 0 },
-          exit: { opacity: 0 },
-          transition: { duration: n, ease: "easeInOut" },
-          style: { height: "100%", width: "100%" },
-          children: /* @__PURE__ */ t(p, { h: "100%", w: "100%", overflowY: "auto", ...l, children: s })
+      as: "aside",
+      ref: d,
+      backgroundColor: i.Surface,
+      color: i.OnSurface,
+      overflow: "hidden",
+      boxShadow: p.Medium,
+      height: "100dvh",
+      top: "0",
+      zIndex: l,
+      display: e ? "block" : "none",
+      width: e ? m : 0,
+      opacity: e ? 1 : 0,
+      transition: `width ${r} ease-in-out, opacity ${r} ease-in-out, display ${r} allow-discrete`,
+      css: {
+        "@starting-style": {
+          width: 0,
+          opacity: 0
         }
-      )
+      },
+      children: /* @__PURE__ */ t(a, { h: "100%", w: "100%", overflowY: "auto", ...u, children: n })
     }
   );
 }
 export {
-  M as InlineDrawer
+  S as InlineDrawer
 };

package/dist/components/drawer/types.d.ts

@@ -1,12 +1,12 @@
 import { ColorProps, CustomChakraBoxProps, LayoutProps, PaddingProps, TypographyProps } from '../../theme/index.js';
-import { DrawerProps as ChakraDrawerProps } from '@chakra-ui/react';
-type ChakraDrawerProperties = Pick<ChakraDrawerProps, "id" | "children" | "isOpen" | "onClose" | "placement" | "closeOnEsc" | "closeOnOverlayClick" | "autoFocus">;
-export type DrawerProps = {
+import { DrawerRootProps as ChakraDrawerProps } from '@chakra-ui/react';
+type ChakraDrawerProperties = Pick<ChakraDrawerProps, "id" | "children" | "role">;
+export type DrawerProps = PaddingProps & TypographyProps & ColorProps & LayoutProps & CustomChakraBoxProps & ChakraDrawerProperties & {
     /**
      * When true, the drawer is placed inline in the document flow instead of as a fixed overlay.
      * This means that the drawer will not cover the entire screen and will be placed in the normal document flow.
      *
-     * Note: Not all drawer propertied support inline mode (e.g. `placement`, `closeOnOverlayClick` or `size` "full").
+     * Note: Not all drawer properties support inline mode (e.g. `placement`, `closeOnOverlayClick` or `size` "full").
      *
      * Defaults to `false`.
      */
@@ -19,6 +19,11 @@ export type DrawerProps = {
      * z-index applied to Drawer. Only applicable when `isInline` is true. Defaults to 1.
      */
     zIndex?: number;
-} & ChakraDrawerProperties & PaddingProps & TypographyProps & ColorProps & LayoutProps & CustomChakraBoxProps;
+    isOpen?: boolean;
+    onClose?: () => void;
+    closeOnEsc?: boolean;
+    closeOnOverlayClick?: boolean;
+    placement?: ChakraDrawerProps["placement"] | "left" | "right";
+};
 export {};
 //# sourceMappingURL=types.d.ts.map