@udixio/ui-react 1.4.0 → 1.6.0

package/dist/lib/components/SlideSheet.d.ts

@@ -0,0 +1,9 @@
+import { MotionProps } from '../utils';
+import { SlideSheetInterface } from '../interfaces';
+/**
+ * Side sheets show secondary content anchored to the side of the screen
+ * @status beta
+ * @category Layout
+ */
+export declare const SlideSheet: ({ variant, className, children, title, position, extended, onExtendedChange, closeIcon, transition, ...rest }: MotionProps<SlideSheetInterface>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SlideSheet.d.ts.map

package/dist/lib/components/SlideSheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlideSheet.d.ts","sourceRoot":"","sources":["../../../src/lib/components/SlideSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAUpD;;;;GAIG;AACH,eAAO,MAAM,UAAU,GAAI,+GAWxB,WAAW,CAAC,mBAAmB,CAAC,4CA8FlC,CAAC"}

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

@@ -9,6 +9,7 @@ export * from './IconButton';
 export * from './IconButton';
 export * from './ProgressIndicator';
 export * from './Slider';
+export * from './SlideSheet';
 export * from './Snackbar';
 export * from './Switch';
 export * from './Tab';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC"}

package/dist/lib/effects/ThemeProvider.d.ts

@@ -1,5 +1,7 @@
-import { ConfigInterface } from '@udixio/theme';
-export declare const ThemeProvider: ({ config }: {
+import { API, ConfigInterface } from '@udixio/theme';
+export declare const ThemeProvider: ({ config, throttleDelay, onLoad, }: {
     config: ConfigInterface;
+    onLoad?: (api: API) => void;
+    throttleDelay?: number;
 }) => import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/lib/effects/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/lib/effects/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAAU,MAAM,eAAe,CAAC;AAS7D,eAAO,MAAM,aAAa,GAAI,YAAY;IAAE,MAAM,EAAE,eAAe,CAAA;CAAE,mDAgDpE,CAAC"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/lib/effects/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAE,KAAK,eAAe,EAAU,MAAM,eAAe,CAAC;AASvE,eAAO,MAAM,aAAa,GAAI,oCAI3B;IACD,MAAM,EAAE,eAAe,CAAC;IACxB,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,mDAoFA,CAAC"}

package/dist/lib/interfaces/index.d.ts

@@ -6,6 +6,7 @@ export * from './divider.interface';
 export * from './fab.interface';
 export * from './icon-button.interface';
 export * from './progress-indicator.interface';
+export * from './slide-sheet.interface';
 export * from './slider.interface';
 export * from './snackbar.interface';
 export * from './switch.interface';

package/dist/lib/interfaces/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kCAAkC,CAAC;AACjD,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kCAAkC,CAAC;AACjD,cAAc,qBAAqB,CAAC"}

package/dist/lib/interfaces/navigation-rail.interface.d.ts

@@ -20,12 +20,12 @@ export interface NavigationRailInterface {
         selectedItem?: number | null;
         setSelectedItem?: Dispatch<SetStateAction<number | null>>;
         extended?: boolean;
+        onExtendedChange?: (extended: boolean) => void;
         alignment?: 'middle' | 'top';
         menu?: {
             closed: MenuState;
             opened: MenuState;
         };
-        onExtendedChange?: (extended: boolean) => void;
         transition?: Transition;
     };
     states: {

package/dist/lib/interfaces/navigation-rail.interface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-rail.interface.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/navigation-rail.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE;QACL,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;QAC/B,cAAc,CAAC,EAAE,CACf,IAAI,EAAE;YAAE,KAAK,EAAE,MAAM,CAAA;SAAE,GAAG,IAAI,CAC5B,UAAU,CAAC,2BAA2B,CAAC,EACvC,OAAO,GAAG,MAAM,CACjB,GAAG;YACA,GAAG,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;SACrB,KACA,IAAI,CAAC;QACV,QAAQ,EAAE,SAAS,CAAC;QACpB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QAC7B,eAAe,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;QAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;QAC7B,IAAI,CAAC,EAAE;YACL,MAAM,EAAE,SAAS,CAAC;YAClB,MAAM,EAAE,SAAS,CAAC;SACnB,CAAC;QACF,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;QAE/C,UAAU,CAAC,EAAE,UAAU,CAAC;KACzB,CAAC;IACF,MAAM,EAAE;QAAE,UAAU,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IACjC,QAAQ,EAAE,CAAC,gBAAgB,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC;CAChE"}
+{"version":3,"file":"navigation-rail.interface.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/navigation-rail.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE;QACL,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;QAC/B,cAAc,CAAC,EAAE,CACf,IAAI,EAAE;YAAE,KAAK,EAAE,MAAM,CAAA;SAAE,GAAG,IAAI,CAC5B,UAAU,CAAC,2BAA2B,CAAC,EACvC,OAAO,GAAG,MAAM,CACjB,GAAG;YACA,GAAG,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;SACrB,KACA,IAAI,CAAC;QACV,QAAQ,EAAE,SAAS,CAAC;QACpB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QAC7B,eAAe,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;QAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;QAC/C,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;QAC7B,IAAI,CAAC,EAAE;YACL,MAAM,EAAE,SAAS,CAAC;YAClB,MAAM,EAAE,SAAS,CAAC;SACnB,CAAC;QAEF,UAAU,CAAC,EAAE,UAAU,CAAC;KACzB,CAAC;IACF,MAAM,EAAE;QAAE,UAAU,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IACjC,QAAQ,EAAE,CAAC,gBAAgB,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC;CAChE"}

package/dist/lib/interfaces/slide-sheet.interface.d.ts

@@ -0,0 +1,29 @@
+import { Transition } from 'motion';
+import { Icon } from '../icon';
+export interface SlideSheetInterface {
+    type: 'div';
+    props: {
+        variant?: 'standard' | 'modal';
+        children: React.ReactNode;
+        title?: string;
+        position?: 'left' | 'right';
+        extended?: boolean;
+        onExtendedChange?: (extended: boolean) => void;
+        transition?: Transition;
+        closeIcon?: Icon;
+    };
+    states: {
+        isExtended: boolean;
+    };
+    elements: [
+        'slideSheet',
+        'container',
+        'title',
+        'content',
+        'header',
+        'closeButton',
+        'divider',
+        'overlay'
+    ];
+}
+//# sourceMappingURL=slide-sheet.interface.d.ts.map

package/dist/lib/interfaces/slide-sheet.interface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slide-sheet.interface.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/slide-sheet.interface.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE;QACL,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;QAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;QAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;QAC/C,UAAU,CAAC,EAAE,UAAU,CAAC;QACxB,SAAS,CAAC,EAAE,IAAI,CAAC;KAClB,CAAC;IACF,MAAM,EAAE;QAAE,UAAU,EAAE,OAAO,CAAA;KAAE,CAAC;IAChC,QAAQ,EAAE;QACR,YAAY;QACZ,WAAW;QACX,OAAO;QACP,SAAS;QACT,QAAQ;QACR,aAAa;QACb,SAAS;QACT,SAAS;KACV,CAAC;CACH"}

package/dist/lib/styles/index.d.ts

@@ -6,6 +6,7 @@ export * from './divider.style';
 export * from './fab.style';
 export * from './icon-button.style';
 export * from './progress-indicator.style';
+export * from './slide-sheet.style';
 export * from './slider.style';
 export * from './snackbar.style';
 export * from './switch.style';

package/dist/lib/styles/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC"}

package/dist/lib/styles/navigation-rail.style.d.ts

@@ -6,9 +6,9 @@ export declare const navigationRailStyle: (states: {
     selectedItem: any;
     setSelectedItem: any;
     extended: any;
+    onExtendedChange: any;
     alignment: any;
     menu: any;
-    onExtendedChange: any;
     transition: any;
 } & {
     variant?: "standard" | "modal";
@@ -21,6 +21,7 @@ export declare const navigationRailStyle: (states: {
     selectedItem?: number | null;
     setSelectedItem?: import('react').Dispatch<import('react').SetStateAction<number | null>>;
     extended?: boolean;
+    onExtendedChange?: (extended: boolean) => void;
     alignment?: "middle" | "top";
     menu?: {
         closed: {
@@ -32,7 +33,6 @@ export declare const navigationRailStyle: (states: {
             label: string;
         };
     };
-    onExtendedChange?: (extended: boolean) => void;
     transition?: import('motion').Transition;
 } & {
     isExtended?: boolean;

package/dist/lib/styles/slide-sheet.style.d.ts

@@ -0,0 +1,25 @@
+import { SlideSheetInterface } from '../interfaces/slide-sheet.interface';
+export declare const slideSheetStyle: (states: {
+    variant: any;
+    children: any;
+    title: any;
+    position: any;
+    extended: any;
+    onExtendedChange: any;
+    transition: any;
+    closeIcon: any;
+} & {
+    variant?: "standard" | "modal";
+    children: React.ReactNode;
+    title?: string;
+    position?: "left" | "right";
+    extended?: boolean;
+    onExtendedChange?: (extended: boolean) => void;
+    transition?: import('motion').Transition;
+    closeIcon?: import('..').Icon;
+} & {
+    isExtended: boolean;
+} & {
+    className: string | import('..').ClassNameComponent<SlideSheetInterface> | undefined;
+}) => Record<"container" | "content" | "header" | "title" | "overlay" | "divider" | "slideSheet" | "closeButton", string>;
+//# sourceMappingURL=slide-sheet.style.d.ts.map

package/dist/lib/styles/slide-sheet.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slide-sheet.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/slide-sheet.style.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAE1E,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;yHA2B3B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udixio/ui-react",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -36,7 +36,7 @@
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "@udixio/theme": "1.2.0",
-    "@udixio/tailwind": "1.4.0"
+    "@udixio/tailwind": "1.6.0"
   },
   "repository": {
     "type": "git",

package/src/lib/components/SlideSheet.tsx

@@ -0,0 +1,122 @@
+import { MotionProps } from '../utils';
+import { SlideSheetInterface } from '../interfaces';
+import { slideSheetStyle } from '../styles';
+import { Divider } from './Divider';
+
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
+import { IconButton } from './IconButton';
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { AnimatePresence, motion } from 'motion/react';
+
+/**
+ * Side sheets show secondary content anchored to the side of the screen
+ * @status beta
+ * @category Layout
+ */
+export const SlideSheet = ({
+  variant = 'standard',
+  className,
+  children,
+  title,
+  position = 'right',
+  extended,
+  onExtendedChange,
+  closeIcon = faXmark,
+  transition,
+  ...rest
+}: MotionProps<SlideSheetInterface>) => {
+  transition = { duration: 0.3, ...transition };
+
+  const [isExtended, setIsExtended] = useState(extended ?? true);
+
+  const styles = slideSheetStyle({
+    transition,
+    title,
+    position,
+    closeIcon,
+    className,
+    children,
+    onExtendedChange,
+    isExtended,
+    extended: isExtended,
+    variant,
+  });
+
+  useEffect(() => {
+    onExtendedChange?.(isExtended ?? false);
+  }, [isExtended]);
+
+  useEffect(() => {
+    if (extended != undefined) {
+      setIsExtended(extended);
+    }
+  }, [extended]);
+
+  const variants = {
+    close: {
+      width: 0,
+    },
+    open: {
+      width: 'auto',
+    },
+  };
+
+  const render = () => (
+    <>
+      <AnimatePresence>
+        {variant == 'modal' && isExtended && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={transition}
+            onClick={() => setIsExtended(false)}
+            className={styles.overlay}
+          ></motion.div>
+        )}
+      </AnimatePresence>
+      <AnimatePresence>
+        {isExtended && (
+          <div
+            {...rest}
+            className={styles.slideSheet}
+            style={{ transition: transition.duration + 's' }}
+          >
+            <motion.div
+              variants={variants}
+              initial={extended === false ? 'open' : 'close'}
+              animate={'open'}
+              exit={'close'}
+              className={styles.container}
+            >
+              <div className={styles.header}>
+                {title && <p className={styles.title}>{title}</p>}
+                <IconButton
+                  size={'small'}
+                  label={'close'}
+                  icon={closeIcon}
+                  onClick={() => setIsExtended(false)}
+                  className={styles.closeButton}
+                ></IconButton>
+              </div>
+              <div
+                className={styles.content}
+                style={{ transition: transition.duration + 's' }}
+              >
+                {children}
+              </div>
+            </motion.div>
+            <Divider className={styles.divider} orientation="vertical" />
+          </div>
+        )}
+      </AnimatePresence>
+    </>
+  );
+
+  if (variant == 'modal') {
+    return createPortal(render(), document.body);
+  }
+
+  return render();
+};

package/src/lib/components/index.ts

@@ -9,6 +9,7 @@ export * from './IconButton';
 export * from './IconButton';
 export * from './ProgressIndicator';
 export * from './Slider';
+export * from './SlideSheet';
 export * from './Snackbar';
 export * from './Switch';
 export * from './Tab';

package/src/lib/effects/ThemeProvider.tsx

@@ -1,5 +1,5 @@
-import { type ConfigInterface, loader } from '@udixio/theme';
-import { useEffect, useState } from 'react';
+import { type API, type ConfigInterface, loader } from '@udixio/theme';
+import { useEffect, useRef, useState } from 'react';
 import { TailwindPlugin } from '@udixio/tailwind';
 
 function isValidHexColor(hexColorString: string) {
@@ -7,52 +7,96 @@ function isValidHexColor(hexColorString: string) {
   return regex.test(hexColorString);
 }
 
-export const ThemeProvider = ({ config }: { config: ConfigInterface }) => {
-  const [error, setError] = useState<string | null>(null);
-
+export const ThemeProvider = ({
+  config,
+  throttleDelay = 100, // Délai par défaut de 300ms
+  onLoad,
+}: {
+  config: ConfigInterface;
+  onLoad?: (api: API) => void;
+  throttleDelay?: number;
+}) => {
   const [outputCss, setOutputCss] = useState<null | string>(null);
 
+  // Refs pour gérer le throttling
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const lastSourceColorRef = useRef<string>(config.sourceColor);
+  const isInitialLoadRef = useRef<boolean>(true);
+
   useEffect(() => {
-    if (!isValidHexColor(config.sourceColor)) {
-      setError('Invalid hex color');
+    // Si c'est le premier chargement, on applique immédiatement
+    if (isInitialLoadRef.current) {
+      isInitialLoadRef.current = false;
+      lastSourceColorRef.current = config.sourceColor;
+      applyThemeChange(config.sourceColor);
       return;
     }
 
-    const initTheme = async () => {
-      try {
-        const api = await loader(config);
-
-        api.themes.update({
-          sourceColorHex: config.sourceColor,
-        });
+    // Si la couleur n'a pas changé, on ne fait rien
+    if (config.sourceColor === lastSourceColorRef.current) {
+      return;
+    }
 
-        await api.load();
+    // Annuler le timeout précédent s'il existe
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
 
-        setOutputCss(
-          api.plugins.getPlugin(TailwindPlugin).getInstance().outputCss,
-        );
+    // Programmer un nouveau changement de thème avec un délai
+    timeoutRef.current = setTimeout(async () => {
+      lastSourceColorRef.current = config.sourceColor;
+      await applyThemeChange(config.sourceColor);
+      timeoutRef.current = null;
+    }, throttleDelay);
 
-        console.log('Theme loaded');
-      } catch (err) {
-        console.error('Theme loading failed:', err);
-        setError(err instanceof Error ? err.message : 'Theme loading failed');
+    // Cleanup function pour annuler le timeout si le composant se démonte
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
       }
     };
+  }, [config.sourceColor, throttleDelay]);
 
-    initTheme();
-  }, [config.sourceColor]);
-  if (error) {
-    console.error('ThemeProvider error:', error);
-    return null;
-  }
+  const applyThemeChange = async (sourceColor: string) => {
+    if (!isValidHexColor(sourceColor)) {
+      throw new Error('Invalid hex color');
+    }
+
+    try {
+      // Mesure du temps de chargement de l'API
+      const api = await loader({
+        ...config,
+        sourceColor,
+      });
+      onLoad?.(api);
+
+      const generatedCss = api.plugins
+        .getPlugin(TailwindPlugin)
+        .getInstance().outputCss;
+
+      if (generatedCss) {
+        setOutputCss(generatedCss);
+      }
+    } catch (err) {
+      throw new Error(
+        err instanceof Error ? err.message : 'Theme loading failed',
+      );
+    }
+  };
+
+  // Cleanup lors du démontage du composant
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
 
   if (!outputCss) {
     return null;
   }
-  return (
-    <style
-      type="text/tailwindcss"
-      dangerouslySetInnerHTML={{ __html: outputCss }}
-    />
-  );
+
+  return <style dangerouslySetInnerHTML={{ __html: outputCss }} />;
 };

package/src/lib/interfaces/index.ts

@@ -6,6 +6,7 @@ export * from './divider.interface';
 export * from './fab.interface';
 export * from './icon-button.interface';
 export * from './progress-indicator.interface';
+export * from './slide-sheet.interface';
 export * from './slider.interface';
 export * from './snackbar.interface';
 export * from './switch.interface';

package/src/lib/interfaces/navigation-rail.interface.ts

@@ -25,12 +25,12 @@ export interface NavigationRailInterface {
     selectedItem?: number | null;
     setSelectedItem?: Dispatch<SetStateAction<number | null>>;
     extended?: boolean;
+    onExtendedChange?: (extended: boolean) => void;
     alignment?: 'middle' | 'top';
     menu?: {
       closed: MenuState;
       opened: MenuState;
     };
-    onExtendedChange?: (extended: boolean) => void;
 
     transition?: Transition;
   };

package/src/lib/interfaces/slide-sheet.interface.tsx

@@ -0,0 +1,27 @@
+import { Transition } from 'motion';
+import { Icon } from '../icon';
+
+export interface SlideSheetInterface {
+  type: 'div';
+  props: {
+    variant?: 'standard' | 'modal';
+    children: React.ReactNode;
+    title?: string;
+    position?: 'left' | 'right';
+    extended?: boolean;
+    onExtendedChange?: (extended: boolean) => void;
+    transition?: Transition;
+    closeIcon?: Icon;
+  };
+  states: { isExtended: boolean };
+  elements: [
+    'slideSheet',
+    'container',
+    'title',
+    'content',
+    'header',
+    'closeButton',
+    'divider',
+    'overlay',
+  ];
+}

package/src/lib/styles/index.ts

@@ -6,6 +6,7 @@ export * from './divider.style';
 export * from './fab.style';
 export * from './icon-button.style';
 export * from './progress-indicator.style';
+export * from './slide-sheet.style';
 export * from './slider.style';
 export * from './snackbar.style';
 export * from './switch.style';

package/src/lib/styles/slide-sheet.style.ts

@@ -0,0 +1,31 @@
+import { classNames, defaultClassNames } from '../utils';
+import { SlideSheetInterface } from '../interfaces/slide-sheet.interface';
+
+export const slideSheetStyle = defaultClassNames<SlideSheetInterface>(
+  'slideSheet',
+  ({ variant, position }) => ({
+    slideSheet: classNames(
+      'bg-surface flex justify-between  max-w-xs z-10',
+      {
+        'flex-row-reverse': position == 'right',
+        'h-screen': variant == 'standard',
+      },
+      variant == 'modal' && [
+        'rounded-2xl fixed top-0 m-[1rem] h-[calc(100dvh-2rem)]',
+        {
+          'right-0': position == 'right',
+          'left-0': position == 'left',
+        },
+      ],
+    ),
+    container: classNames('w-full overflow-hidden', {}),
+    content: classNames('w-fit '),
+    header: classNames('p-4 flex items-center gap-2'),
+    title: classNames('text-on-surface-variant text-title-large'),
+    closeButton: classNames('ml-auto'),
+    divider: classNames({ hidden: variant == 'modal' }),
+    overlay: classNames(
+      'bg-[black]/[0.32] fixed top-0 left-0 w-screen h-screen',
+    ),
+  }),
+);

package/src/stories/containment/slide-sheet.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  MotionProps,
+  ReactProps,
+  SlideSheet,
+  SlideSheetInterface,
+} from '../../';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'containment/SlideSheet',
+  component: SlideSheet,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {},
+} satisfies Meta<typeof SlideSheet>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+
+const createSlideSheetStory = (
+  variant: ReactProps<SlideSheetInterface>['variant'],
+) => {
+  const SlideSheetStory: Story = (args: MotionProps<SlideSheetInterface>) => (
+    <>
+      <div
+        className={
+          'bg-surface-container-highest h-screen w-full flex justify-between'
+        }
+      >
+        <SlideSheet position={'left'} {...args}></SlideSheet>
+        <SlideSheet position={'right'} {...args}></SlideSheet>
+      </div>
+    </>
+  );
+  SlideSheetStory.args = {
+    children: <div className={'h-96 w-96 bg-secondary-container'}></div>,
+    variant: variant,
+    title: 'SlideSheet',
+  };
+  return SlideSheetStory;
+};
+export const Standard = createSlideSheetStory('standard');
+export const Modal = createSlideSheetStory('modal');