@udixio/ui-react 1.5.0 → 1.6.1

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SideSheet.d.ts","sourceRoot":"","sources":["../../../src/lib/components/SideSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAUnD;;;;GAIG;AACH,eAAO,MAAM,SAAS,GAAI,wHAYvB,WAAW,CAAC,kBAAkB,CAAC,4CAmGjC,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 './SideSheet';
 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,aAAa,CAAC;AAC5B,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,6 +1,7 @@
-import { ConfigInterface } from '@udixio/theme';
-export declare const ThemeProvider: ({ config, throttleDelay, }: {
+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,4BAG3B;IACD,MAAM,EAAE,eAAe,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,mDA2FA,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 './side-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,wBAAwB,CAAC;AACvC,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/side-sheet.interface.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"side-sheet.interface.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/side-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,kBAAkB;IACjC,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;QACjB,OAAO,CAAC,EAAE,OAAO,CAAC;KACnB,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 './side-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,oBAAoB,CAAC;AACnC,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/side-sheet.style.d.ts

@@ -0,0 +1,27 @@
+import { SideSheetInterface } from '../interfaces/side-sheet.interface';
+export declare const sideSheetStyle: (states: {
+    variant: any;
+    children: any;
+    title: any;
+    position: any;
+    extended: any;
+    onExtendedChange: any;
+    transition: any;
+    closeIcon: any;
+    divider: 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;
+    divider?: boolean;
+} & {
+    isExtended: boolean;
+} & {
+    className: string | import('..').ClassNameComponent<SideSheetInterface> | undefined;
+}) => Record<"container" | "content" | "header" | "title" | "overlay" | "divider" | "slideSheet" | "closeButton", string>;
+//# sourceMappingURL=side-sheet.style.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"side-sheet.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/side-sheet.style.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAExE,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;yHA2B1B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udixio/ui-react",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "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.5.0"
+    "@udixio/tailwind": "1.7.0"
   },
   "repository": {
     "type": "git",

package/src/lib/components/SideSheet.tsx

@@ -0,0 +1,128 @@
+import { MotionProps } from '../utils';
+import { SideSheetInterface } from '../interfaces';
+import { sideSheetStyle } 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 SideSheet = ({
+  variant = 'standard',
+  className,
+  children,
+  title,
+  position = 'right',
+  extended,
+  divider,
+  onExtendedChange,
+  closeIcon = faXmark,
+  transition,
+  ...rest
+}: MotionProps<SideSheetInterface>) => {
+  transition = { duration: 0.3, ...transition };
+
+  const [isExtended, setIsExtended] = useState(extended ?? true);
+
+  const styles = sideSheetStyle({
+    transition,
+    title,
+    position,
+    closeIcon,
+    className,
+    children,
+    onExtendedChange,
+    divider,
+    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 == undefined && variant == 'standard'
+              ? true
+              : divider) && (
+              <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 './SideSheet';
 export * from './Snackbar';
 export * from './Switch';
 export * from './Tab';

package/src/lib/effects/ThemeProvider.tsx

@@ -1,4 +1,4 @@
-import { type ConfigInterface, loader } from '@udixio/theme';
+import { type API, type ConfigInterface, loader } from '@udixio/theme';
 import { useEffect, useRef, useState } from 'react';
 import { TailwindPlugin } from '@udixio/tailwind';
 
@@ -10,11 +10,12 @@ function isValidHexColor(hexColorString: string) {
 export const ThemeProvider = ({
   config,
   throttleDelay = 100, // Délai par défaut de 300ms
+  onLoad,
 }: {
   config: ConfigInterface;
+  onLoad?: (api: API) => void;
   throttleDelay?: number;
 }) => {
-  const [error, setError] = useState<string | null>(null);
   const [outputCss, setOutputCss] = useState<null | string>(null);
 
   // Refs pour gérer le throttling
@@ -42,9 +43,9 @@ export const ThemeProvider = ({
     }
 
     // Programmer un nouveau changement de thème avec un délai
-    timeoutRef.current = setTimeout(() => {
+    timeoutRef.current = setTimeout(async () => {
       lastSourceColorRef.current = config.sourceColor;
-      applyThemeChange(config.sourceColor);
+      await applyThemeChange(config.sourceColor);
       timeoutRef.current = null;
     }, throttleDelay);
 
@@ -59,19 +60,16 @@ export const ThemeProvider = ({
 
   const applyThemeChange = async (sourceColor: string) => {
     if (!isValidHexColor(sourceColor)) {
-      setError('Invalid hex color');
-      return;
+      throw new Error('Invalid hex color');
     }
 
-    setError(null);
-
     try {
       // Mesure du temps de chargement de l'API
-      const api = await loader(config);
-      api.themes.update({
-        sourceColorHex: sourceColor,
+      const api = await loader({
+        ...config,
+        sourceColor,
       });
-      await api.load();
+      onLoad?.(api);
 
       const generatedCss = api.plugins
         .getPlugin(TailwindPlugin)
@@ -81,7 +79,9 @@ export const ThemeProvider = ({
         setOutputCss(generatedCss);
       }
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Theme loading failed');
+      throw new Error(
+        err instanceof Error ? err.message : 'Theme loading failed',
+      );
     }
   };
 
@@ -94,12 +94,7 @@ export const ThemeProvider = ({
     };
   }, []);
 
-  if (error) {
-    return null;
-  }
-
   if (!outputCss) {
-    console.error('ThemeProvider null');
     return null;
   }
 

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 './side-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/side-sheet.interface.tsx

@@ -0,0 +1,28 @@
+import { Transition } from 'motion';
+import { Icon } from '../icon';
+
+export interface SideSheetInterface {
+  type: 'div';
+  props: {
+    variant?: 'standard' | 'modal';
+    children: React.ReactNode;
+    title?: string;
+    position?: 'left' | 'right';
+    extended?: boolean;
+    onExtendedChange?: (extended: boolean) => void;
+    transition?: Transition;
+    closeIcon?: Icon;
+    divider?: boolean;
+  };
+  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 './side-sheet.style';
 export * from './slider.style';
 export * from './snackbar.style';
 export * from './switch.style';

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

@@ -0,0 +1,31 @@
+import { classNames, defaultClassNames } from '../utils';
+import { SideSheetInterface } from '../interfaces/side-sheet.interface';
+
+export const sideSheetStyle = defaultClassNames<SideSheetInterface>(
+  'slideSheet',
+  ({ variant, position }) => ({
+    slideSheet: classNames(
+      'bg-surface flex justify-between  max-w-xs z-10',
+      {
+        'flex-row-reverse': position == 'right',
+        'h-full': 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,45 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MotionProps, ReactProps, SideSheet, SideSheetInterface } 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: SideSheet,
+  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 SideSheet>;
+
+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<SideSheetInterface>['variant'],
+) => {
+  const SlideSheetStory: Story = (args: MotionProps<SideSheetInterface>) => (
+    <>
+      <div
+        className={
+          'bg-surface-container-highest h-screen w-full flex justify-between'
+        }
+      >
+        <SideSheet position={'left'} {...args}></SideSheet>
+        <SideSheet position={'right'} {...args}></SideSheet>
+      </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');