@delightui/components 0.1.66 → 0.1.67

package/dist/cjs/components/molecules/Modal/Modal.types.d.ts

@@ -47,6 +47,10 @@ export type ModalProps = {
      *  @default false
      */
     disableBackdropDismiss?: boolean;
+    /**
+     * provide a way to override the styling
+     */
+    'component-variant'?: string;
     /**
      * Additional CSS class names to apply to the modal.
      */

package/dist/cjs/components/organisms/SlideOutPanel/SlideOutPanel.d.ts

@@ -0,0 +1,3 @@
+import { SlideOutPanelProps } from './SlideOutPanel.types';
+declare const SlideOutPanel: (props: SlideOutPanelProps) => import("react").JSX.Element;
+export default SlideOutPanel;

package/dist/cjs/components/organisms/SlideOutPanel/SlideOutPanel.types.d.ts

@@ -0,0 +1,7 @@
+import { ModalProps } from '../../molecules';
+export type SlideOutPanelSizeEnum = 'Small' | 'Medium' | 'Large';
+export type SlideOutPanelDirectionEnum = 'Top' | 'Left' | 'Bottom' | 'Right';
+export type SlideOutPanelProps = Omit<ModalProps, 'size' | 'header' | 'footer' | 'component-variant'> & {
+    size?: SlideOutPanelSizeEnum;
+    direction?: SlideOutPanelDirectionEnum;
+};

package/dist/cjs/components/organisms/SlideOutPanel/SlideOutPanelExample.d.ts

@@ -0,0 +1,2 @@
+declare const SlideOutPanelExample: () => import("react").JSX.Element;
+export default SlideOutPanelExample;

package/dist/cjs/components/organisms/SlideOutPanel/index.d.ts

@@ -0,0 +1,3 @@
+import SlideOutPanel from './SlideOutPanel';
+export * from './SlideOutPanel.types';
+export default SlideOutPanel;

package/dist/cjs/components/organisms/index.d.ts

@@ -14,6 +14,7 @@ export { default as TableBody } from './Table/TableBody';
 export { default as Tabs } from './Tabs';
 export { default as TabItem } from './Tabs/TabItem';
 export { default as TabContent } from './Tabs/TabContent';
+export { default as SlideOutPanel } from './SlideOutPanel';
 export * from './Dropzone';
 export * from './DropzoneContent';
 export * from './Form';
@@ -26,3 +27,4 @@ export * from './Table/TableBody';
 export * from './Tabs';
 export * from './Tabs/TabItem';
 export * from './Tabs/TabContent';
+export * from './SlideOutPanel';

package/dist/cjs/library.css

@@ -4267,6 +4267,104 @@ span.flatpickr-weekday {
 .TabContent-module_tabContent__3-qqV {
   display: flex;
 }
+.SlideOutPanel-module_slideOutPanel__eBr9a {
+  display: flex;
+  position: fixed;
+  transform: none;
+  transform: initial;
+  opacity: 0;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+  padding-top: calc(var(--slide-out-panel-padding-top) - var(--slide-out-panel-border-top-width));
+  padding-bottom: calc(var(--slide-out-panel-padding-bottom) - var(--slide-out-panel-border-bottom-width));
+  padding-left: calc(var(--slide-out-panel-padding-left) - var(--slide-out-panel-border-left-width));
+  padding-right: calc(var(--slide-out-panel-padding-right) - var(--slide-out-panel-border-right-width));
+  row-gap: var(--slide-out-panel-row-gap);
+  -moz-column-gap: var(--slide-out-panel-column-gap);
+       column-gap: var(--slide-out-panel-column-gap);
+  border-top-width: var(--slide-out-panel-border-top-width);
+  border-bottom-width: var(--slide-out-panel-border-bottom-width);
+  border-left-width: var(--slide-out-panel-border-left-width);
+  border-right-width: var(--slide-out-panel-border-right-width);
+  border-style: var(--slide-out-panel-border-style);
+  border-color: var(--slide-out-panel-border-color);
+  border-top-left-radius: var(--slide-out-panel-border-top-left-radius);
+  border-top-right-radius: var(--slide-out-panel-border-top-right-radius);
+  border-bottom-right-radius: var(--slide-out-panel-border-bottom-right-radius);
+  border-bottom-left-radius: var(--slide-out-panel-border-bottom-left-radius);
+  outline-width: var(--slide-out-panel-outline-width);
+  outline-style: var(--slide-out-panel-outline-style);
+  outline-color: var(--slide-out-panel-outline-color);
+  background-color: var(--slide-out-panel-background-color);
+  color: var(--slide-out-panel-color);
+}
+
+.SlideOutPanel-module_slideOutPanel--right__I8eTm {
+  top: 0;
+  right: -100%;
+  left: auto;
+  left: initial;
+  height: 100vh;
+}
+
+.SlideOutPanel-module_slideOutPanel--right__I8eTm.SlideOutPanel-module_open__Q-ONw {
+  right: 0;
+  opacity: 1;
+}
+
+.SlideOutPanel-module_slideOutPanel--right__I8eTm.SlideOutPanel-module_slideOutPanel--small__FNO8Q, .SlideOutPanel-module_slideOutPanel--right__I8eTm.SlideOutPanel-module_slideOutPanel--medium__9-tzL, .SlideOutPanel-module_slideOutPanel--right__I8eTm.SlideOutPanel-module_slideOutPanel--large__7RHyd {
+  width: var(--slide-out-panel-width);
+}
+
+.SlideOutPanel-module_slideOutPanel--left__oBPI2 {
+  top: 0;
+  right: auto;
+  right: initial;
+  left: -100%;
+  height: 100vh;
+}
+
+.SlideOutPanel-module_slideOutPanel--left__oBPI2.SlideOutPanel-module_open__Q-ONw {
+  left: 0;
+  opacity: 1;
+}
+
+.SlideOutPanel-module_slideOutPanel--left__oBPI2.SlideOutPanel-module_slideOutPanel--small__FNO8Q, .SlideOutPanel-module_slideOutPanel--left__oBPI2.SlideOutPanel-module_slideOutPanel--medium__9-tzL, .SlideOutPanel-module_slideOutPanel--left__oBPI2.SlideOutPanel-module_slideOutPanel--large__7RHyd {
+  width: var(--slide-out-panel-width);
+}
+
+.SlideOutPanel-module_slideOutPanel--top__4e54e {
+  top: -100%;
+  left: 0;
+  bottom: auto;
+  bottom: initial;
+  width: 100vw;
+}
+
+.SlideOutPanel-module_slideOutPanel--top__4e54e.SlideOutPanel-module_open__Q-ONw {
+  top: 0;
+  opacity: 1;
+}
+
+.SlideOutPanel-module_slideOutPanel--top__4e54e.SlideOutPanel-module_slideOutPanel--small__FNO8Q, .SlideOutPanel-module_slideOutPanel--top__4e54e.SlideOutPanel-module_slideOutPanel--medium__9-tzL, .SlideOutPanel-module_slideOutPanel--top__4e54e.SlideOutPanel-module_slideOutPanel--large__7RHyd {
+  height: var(--slide-out-panel-height);
+}
+
+.SlideOutPanel-module_slideOutPanel--bottom__E3bRO {
+  top: auto;
+  top: initial;
+  left: 0;
+  bottom: -100%;
+  width: 100vw;
+}
+
+.SlideOutPanel-module_slideOutPanel--bottom__E3bRO.SlideOutPanel-module_open__Q-ONw {
+  bottom: 0;
+  opacity: 1;
+}
+
+.SlideOutPanel-module_slideOutPanel--bottom__E3bRO.SlideOutPanel-module_slideOutPanel--small__FNO8Q, .SlideOutPanel-module_slideOutPanel--bottom__E3bRO.SlideOutPanel-module_slideOutPanel--medium__9-tzL, .SlideOutPanel-module_slideOutPanel--bottom__E3bRO.SlideOutPanel-module_slideOutPanel--large__7RHyd {
+  height: var(--slide-out-panel-height);
+}
 
     [data-theme='dark'] [component-variant^="text-"], [data-theme='light'] [component-variant^="text-"] {
         --text-opacity: 1;