@delightui/components 0.1.66 → 0.1.68

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,4 @@
+import React from 'react';
+import { SlideOutPanelProps } from './SlideOutPanel.types';
+declare const SlideOutPanel: (props: SlideOutPanelProps) => 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,3 @@
+import React from 'react';
+declare const SlideOutPanelExample: () => 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;
@@ -21522,6 +21620,225 @@ span.flatpickr-weekday {
         --tabs-header-width: 100%;
         --tabs-header-height: 100%
     }
+[data-theme='custom'] [component-variant^="slide-out-panel-"], [data-theme='dark'] [component-variant^="slide-out-panel-"], [data-theme='light'] [component-variant^="slide-out-panel-"] {
+        --slide-out-panel-opacity: 1;
+        --slide-out-panel-height: auto;
+        --slide-out-panel-min-height: auto;
+        --slide-out-panel-max-height: none;
+        --slide-out-panel-width: auto;
+        --slide-out-panel-min-width: auto;
+        --slide-out-panel-max-width: none;
+        --slide-out-panel-background-color: transparent;
+        --slide-out-panel-fill: currentcolor;
+        --slide-out-panel-border-top-left-radius: 0px;
+        --slide-out-panel-border-top-right-radius: 0px;
+        --slide-out-panel-border-bottom-left-radius: 0px;
+        --slide-out-panel-border-bottom-right-radius: 0px;
+        --slide-out-panel-border-color: transparent;
+        --slide-out-panel-border-style: solid;
+        --slide-out-panel-border-gap: normal;
+        --slide-out-panel-border-dash: none;
+        --slide-out-panel-border-top-width: 0px;
+        --slide-out-panel-border-right-width: 0px;
+        --slide-out-panel-border-bottom-width: 0px;
+        --slide-out-panel-border-left-width: 0px;
+        --slide-out-panel-outline-color: auto;
+        --slide-out-panel-outline-style: solid;
+        --slide-out-panel-outline-width: 0px;
+        --slide-out-panel-padding-left: 0px;
+        --slide-out-panel-padding-right: 0px;
+        --slide-out-panel-padding-top: 0px;
+        --slide-out-panel-padding-bottom: 0px;
+        --slide-out-panel-row-gap: 0px;
+        --slide-out-panel-column-gap: 0px;
+        --slide-out-panel-font-family: sans-serif;
+        --slide-out-panel-font-size: medium;
+        --slide-out-panel-color: currentcolor;
+        --slide-out-panel-letter-spacing: normal;
+        --slide-out-panel-line-height: normal;
+        --slide-out-panel-paragraph-spacing: ;
+        --slide-out-panel-paragraph-indent: 
+    }
+[data-theme='custom'] [component-variant="slide-out-panel-right-large"], [data-theme='dark'] [component-variant="slide-out-panel-right-large"], [data-theme='light'] [component-variant="slide-out-panel-right-large"] {
+        --slide-out-panel-height: 100%;
+        --slide-out-panel-width: 944px;
+        --slide-out-panel-background-color: var(--colours-grey-700);
+        --slide-out-panel-border-top-left-radius: 12px;
+        --slide-out-panel-border-bottom-right-radius: 12px;
+        --slide-out-panel-border-color: var(--border-border-grey-3);
+        --slide-out-panel-border-left-width: 1px;
+        --slide-out-panel-font-family: var(--font-family-body);
+        --slide-out-panel-font-size: var(--font-size-body-small);
+        --slide-out-panel-font-weight: var(--font-weight-medium);
+        --slide-out-panel-line-height: var(--line-height-body-small);
+        --slide-out-panel-paragraph-spacing: 0px;
+        --slide-out-panel-paragraph-indent: 0px
+    }
+[data-theme='custom'] [component-variant="slide-out-panel-left-large"], [data-theme='dark'] [component-variant="slide-out-panel-left-large"], [data-theme='light'] [component-variant="slide-out-panel-left-large"] {
+        --slide-out-panel-height: 100%;
+        --slide-out-panel-width: 944px;
+        --slide-out-panel-background-color: var(--colours-grey-700);
+        --slide-out-panel-border-top-right-radius: 12px;
+        --slide-out-panel-border-bottom-left-radius: 12px;
+        --slide-out-panel-border-color: var(--border-border-grey-3);
+        --slide-out-panel-border-right-width: 1px;
+        --slide-out-panel-font-family: var(--font-family-body);
+        --slide-out-panel-font-size: var(--font-size-body-small);
+        --slide-out-panel-font-weight: var(--font-weight-medium);
+        --slide-out-panel-line-height: var(--line-height-body-small);
+        --slide-out-panel-paragraph-spacing: 0px;
+        --slide-out-panel-paragraph-indent: 0px
+    }
+[data-theme='custom'] [component-variant="slide-out-panel-bottom-large"], [data-theme='dark'] [component-variant="slide-out-panel-bottom-large"], [data-theme='light'] [component-variant="slide-out-panel-bottom-large"] {
+        --slide-out-panel-height: 671px;
+        --slide-out-panel-width: 100%;
+        --slide-out-panel-background-color: var(--colours-grey-700);
+        --slide-out-panel-border-top-left-radius: 12px;
+        --slide-out-panel-border-top-right-radius: 12px;
+        --slide-out-panel-border-color: var(--border-border-grey-3);
+        --slide-out-panel-border-top-width: 1px;
+        --slide-out-panel-font-family: var(--font-family-body);
+        --slide-out-panel-font-size: var(--font-size-body-small);
+        --slide-out-panel-font-weight: var(--font-weight-medium);
+        --slide-out-panel-line-height: var(--line-height-body-small);
+        --slide-out-panel-paragraph-spacing: 0px;
+        --slide-out-panel-paragraph-indent: 0px
+    }
+[data-theme='custom'] [component-variant="slide-out-panel-top-large"], [data-theme='dark'] [component-variant="slide-out-panel-top-large"], [data-theme='light'] [component-variant="slide-out-panel-top-large"] {
+        --slide-out-panel-height: 671px;
+        --slide-out-panel-width: 100%;
+        --slide-out-panel-background-color: var(--colours-grey-700);
+        --slide-out-panel-border-bottom-left-radius: 12px;
+        --slide-out-panel-border-bottom-right-radius: 12px;
+        --slide-out-panel-border-color: var(--border-border-grey-3);
+        --slide-out-panel-border-bottom-width: 1px;
+        --slide-out-panel-font-family: var(--font-family-body);
+        --slide-out-panel-font-size: var(--font-size-body-small);
+        --slide-out-panel-font-weight: var(--font-weight-medium);
+        --slide-out-panel-line-height: var(--line-height-body-small);
+        --slide-out-panel-paragraph-spacing: 0px;
+        --slide-out-panel-paragraph-indent: 0px
+    }
+[data-theme='custom'] [component-variant="slide-out-panel-right-medium"], [data-theme='dark'] [component-variant="slide-out-panel-right-medium"], [data-theme='light'] [component-variant="slide-out-panel-right-medium"] {
+        --slide-out-panel-height: 100%;
+        --slide-out-panel-width: 488px;
+        --slide-out-panel-background-color: var(--colours-grey-700);
+        --slide-out-panel-border-top-left-radius: 12px;
+        --slide-out-panel-border-bottom-right-radius: 12px;
+        --slide-out-panel-border-color: var(--border-border-grey-3);
+        --slide-out-panel-border-left-width: 1px;
+        --slide-out-panel-font-family: var(--font-family-body);
+        --slide-out-panel-font-size: var(--font-size-body-small);
+        --slide-out-panel-font-weight: var(--font-weight-medium);
+        --slide-out-panel-line-height: var(--line-height-body-small);
+        --slide-out-panel-paragraph-spacing: 0px;
+        --slide-out-panel-paragraph-indent: 0px
+    }
+[data-theme='custom'] [component-variant="slide-out-panel-left-medium"], [data-theme='dark'] [component-variant="slide-out-panel-left-medium"], [data-theme='light'] [component-variant="slide-out-panel-left-medium"] {
+        --slide-out-panel-height: 100%;
+        --slide-out-panel-width: 488px;
+        --slide-out-panel-background-color: var(--colours-grey-700);
+        --slide-out-panel-border-top-right-radius: 12px;
+        --slide-out-panel-border-bottom-left-radius: 12px;
+        --slide-out-panel-border-color: var(--border-border-grey-3);
+        --slide-out-panel-border-right-width: 1px;
+        --slide-out-panel-font-family: var(--font-family-body);
+        --slide-out-panel-font-size: var(--font-size-body-small);
+        --slide-out-panel-font-weight: var(--font-weight-medium);
+        --slide-out-panel-line-height: var(--line-height-body-small);
+        --slide-out-panel-paragraph-spacing: 0px;
+        --slide-out-panel-paragraph-indent: 0px
+    }
+[data-theme='custom'] [component-variant="slide-out-panel-bottom-medium"], [data-theme='dark'] [component-variant="slide-out-panel-bottom-medium"], [data-theme='light'] [component-variant="slide-out-panel-bottom-medium"] {
+        --slide-out-panel-height: 743px;
+        --slide-out-panel-width: 100%;
+        --slide-out-panel-background-color: var(--colours-grey-700);
+        --slide-out-panel-border-top-left-radius: 12px;
+        --slide-out-panel-border-top-right-radius: 12px;
+        --slide-out-panel-border-color: var(--border-border-grey-3);
+        --slide-out-panel-border-top-width: 1px;
+        --slide-out-panel-font-family: var(--font-family-body);
+        --slide-out-panel-font-size: var(--font-size-body-small);
+        --slide-out-panel-font-weight: var(--font-weight-medium);
+        --slide-out-panel-line-height: var(--line-height-body-small);
+        --slide-out-panel-paragraph-spacing: 0px;
+        --slide-out-panel-paragraph-indent: 0px
+    }
+[data-theme='custom'] [component-variant="slide-out-panel-top-medium"], [data-theme='dark'] [component-variant="slide-out-panel-top-medium"], [data-theme='light'] [component-variant="slide-out-panel-top-medium"] {
+        --slide-out-panel-height: 743px;
+        --slide-out-panel-width: 100%;
+        --slide-out-panel-background-color: var(--colours-grey-700);
+        --slide-out-panel-border-bottom-left-radius: 12px;
+        --slide-out-panel-border-bottom-right-radius: 12px;
+        --slide-out-panel-border-color: var(--border-border-grey-3);
+        --slide-out-panel-border-bottom-width: 1px;
+        --slide-out-panel-font-family: var(--font-family-body);
+        --slide-out-panel-font-size: var(--font-size-body-small);
+        --slide-out-panel-font-weight: var(--font-weight-medium);
+        --slide-out-panel-line-height: var(--line-height-body-small);
+        --slide-out-panel-paragraph-spacing: 0px;
+        --slide-out-panel-paragraph-indent: 0px
+    }
+[data-theme='custom'] [component-variant="slide-out-panel-right-small"], [data-theme='dark'] [component-variant="slide-out-panel-right-small"], [data-theme='light'] [component-variant="slide-out-panel-right-small"] {
+        --slide-out-panel-height: 100%;
+        --slide-out-panel-width: 246px;
+        --slide-out-panel-background-color: var(--colours-grey-700);
+        --slide-out-panel-border-top-left-radius: 12px;
+        --slide-out-panel-border-bottom-right-radius: 12px;
+        --slide-out-panel-border-color: var(--border-border-grey-3);
+        --slide-out-panel-border-left-width: 1px;
+        --slide-out-panel-font-family: var(--font-family-body);
+        --slide-out-panel-font-size: var(--font-size-body-small);
+        --slide-out-panel-font-weight: var(--font-weight-medium);
+        --slide-out-panel-line-height: var(--line-height-body-small);
+        --slide-out-panel-paragraph-spacing: 0px;
+        --slide-out-panel-paragraph-indent: 0px
+    }
+[data-theme='custom'] [component-variant="slide-out-panel-left-small"], [data-theme='dark'] [component-variant="slide-out-panel-left-small"], [data-theme='light'] [component-variant="slide-out-panel-left-small"] {
+        --slide-out-panel-height: 100%;
+        --slide-out-panel-width: 246px;
+        --slide-out-panel-background-color: var(--colours-grey-700);
+        --slide-out-panel-border-top-right-radius: 12px;
+        --slide-out-panel-border-bottom-left-radius: 12px;
+        --slide-out-panel-border-color: var(--border-border-grey-3);
+        --slide-out-panel-border-right-width: 1px;
+        --slide-out-panel-font-family: var(--font-family-body);
+        --slide-out-panel-font-size: var(--font-size-body-small);
+        --slide-out-panel-font-weight: var(--font-weight-medium);
+        --slide-out-panel-line-height: var(--line-height-body-small);
+        --slide-out-panel-paragraph-spacing: 0px;
+        --slide-out-panel-paragraph-indent: 0px
+    }
+[data-theme='custom'] [component-variant="slide-out-panel-bottom-small"], [data-theme='dark'] [component-variant="slide-out-panel-bottom-small"], [data-theme='light'] [component-variant="slide-out-panel-bottom-small"] {
+        --slide-out-panel-height: 532px;
+        --slide-out-panel-width: 100%;
+        --slide-out-panel-background-color: var(--colours-grey-700);
+        --slide-out-panel-border-top-left-radius: 12px;
+        --slide-out-panel-border-top-right-radius: 12px;
+        --slide-out-panel-border-color: var(--border-border-grey-3);
+        --slide-out-panel-border-top-width: 1px;
+        --slide-out-panel-font-family: var(--font-family-body);
+        --slide-out-panel-font-size: var(--font-size-body-small);
+        --slide-out-panel-font-weight: var(--font-weight-medium);
+        --slide-out-panel-line-height: var(--line-height-body-small);
+        --slide-out-panel-paragraph-spacing: 0px;
+        --slide-out-panel-paragraph-indent: 0px
+    }
+[data-theme='custom'] [component-variant="slide-out-panel-top-small"], [data-theme='dark'] [component-variant="slide-out-panel-top-small"], [data-theme='light'] [component-variant="slide-out-panel-top-small"] {
+        --slide-out-panel-height: 532px;
+        --slide-out-panel-width: 100%;
+        --slide-out-panel-background-color: var(--colours-grey-700);
+        --slide-out-panel-border-bottom-left-radius: 12px;
+        --slide-out-panel-border-bottom-right-radius: 12px;
+        --slide-out-panel-border-color: var(--border-border-grey-3);
+        --slide-out-panel-border-bottom-width: 1px;
+        --slide-out-panel-font-family: var(--font-family-body);
+        --slide-out-panel-font-size: var(--font-size-body-small);
+        --slide-out-panel-font-weight: var(--font-weight-medium);
+        --slide-out-panel-line-height: var(--line-height-body-small);
+        --slide-out-panel-paragraph-spacing: 0px;
+        --slide-out-panel-paragraph-indent: 0px
+    }
 [data-theme='dark'] [component-variant^="spinner-"], [data-theme='light'] [component-variant^="spinner-"] {
         --spinner-opacity: 1;
         --spinner-height: auto;