@delightui/components 0.1.147 → 0.1.149

package/dist/cjs/components/atoms/Chip/ChipExample.d.ts

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

package/dist/cjs/components/atoms/ToastNotification/ToastNotification.types.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, ReactNode, MouseEvent } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
 export type ToastNotificationStyleEnum = 'Neutral' | 'Error' | 'Success';
 export type ToastNotificationProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {
     /**
@@ -11,6 +11,11 @@ export type ToastNotificationProps = Omit<HTMLAttributes<HTMLDivElement>, 'style
      * @default true
      */
     isDismissable?: boolean;
+    /**
+   * Determines if the toast notification is displayed with close button.
+   * @default true
+   */
+    isCloseButtonShown?: boolean;
     /**
      * Icon displayed before the message content.
      */
@@ -26,7 +31,7 @@ export type ToastNotificationProps = Omit<HTMLAttributes<HTMLDivElement>, 'style
     /**
      * Click event handler for the close action.
      */
-    removeToast?: (event?: MouseEvent<HTMLButtonElement>) => void;
+    removeToast?: () => void;
     /**
      * Duration before the toast auto-closes (in milliseconds).
      */

package/dist/cjs/components/molecules/DatePicker/DatePickerBase/DatePickerBase.presenter.d.ts

@@ -1,8 +1,9 @@
 import { Instance } from 'flatpickr/dist/types/instance';
+import DatePicker from 'react-flatpickr';
 import { DatePickerBaseProps } from './DatePickerBase.types';
 declare const usePresenter: (props: DatePickerBaseProps) => {
     value: import("./DatePickerBase.types").DatePickerValue | undefined;
-    datePickerRef: import("react").RefObject<import("react-flatpickr").default> | undefined;
+    datePickerRef: import("react").RefObject<DatePicker>;
     disabled: boolean | undefined;
     required: boolean | undefined;
     mode: "range" | "single";
@@ -11,10 +12,22 @@ declare const usePresenter: (props: DatePickerBaseProps) => {
     isTimePickerOnly: boolean | undefined;
     customPlugin: import("flatpickr/dist/types/options").Plugin[];
     handleKeyDown: (_selectedDates: Date[], _dateStr: string, instance: Instance, event: KeyboardEvent) => void;
+    onDateChange: (dates: Date[]) => void;
+    onCloseDatePicker: import("flatpickr/dist/types/options").Hook;
+    onOpenDatePicker: import("flatpickr/dist/types/options").Hook;
+    calendarVariantProps: {
+        'component-variant': string;
+    };
+    dayVariantProps: {
+        'component-variant': string;
+    };
+    isInDialog: boolean;
     otherProps: {
         initialValue?: import("./DatePickerBase.types").DatePickerValue | undefined;
         checked?: boolean;
+        invalid?: boolean;
         id?: string;
+        className?: string;
         minDate?: string | Date;
         maxDate?: string | Date;
         defaultDate?: string | Date;
@@ -25,14 +38,5 @@ declare const usePresenter: (props: DatePickerBaseProps) => {
         allowInput?: boolean;
         renderInput?: ((props: Omit<import("react-flatpickr").DateTimePickerProps, "options" | "render">, ref: (node: HTMLInputElement | null) => void) => React.ReactElement) | undefined;
     };
-    onDateChange: (dates: Date[]) => void;
-    onCloseDatePicker: import("flatpickr/dist/types/options").Hook;
-    onOpenDatePicker: import("flatpickr/dist/types/options").Hook;
-    calendarVariantProps: {
-        'component-variant': string;
-    };
-    dayVariantProps: {
-        'component-variant': string;
-    };
 };
 export default usePresenter;

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import { ButtonProps, IconButtonProps, TextProps } from '../../atoms';
 import { ControlledFormComponentProps } from '../../molecules/FormField/FormField.types';
 export type DropzoneStatus = 'Empty' | 'Loading' | 'Uploaded';
@@ -101,3 +101,4 @@ export type DropzoneFilenameProps = TextProps & {
      */
     fileIndex?: number;
 };
+export type DropzoneDragProps = HTMLAttributes<HTMLDivElement>;

package/dist/cjs/components/organisms/Dropzone/components/DropzoneDrag.d.ts

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

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

@@ -1,4 +1,4 @@
-type DropzoneContentTypeEnum = 'Empty' | 'Uploaded' | 'Loading';
+type DropzoneContentTypeEnum = 'Empty' | 'Uploaded' | 'Loading' | 'Drag';
 type DropzoneContentProps = {
     className?: string;
     type: DropzoneContentTypeEnum;

package/dist/cjs/library.css

@@ -319,6 +319,7 @@
 }
 .Input-module_input__NAeHe {
   display: flex;
+  align-items: center;
   height: var(--input-height);
   row-gap: var(--input-row-gap);
   -moz-column-gap: var(--input-column-gap);
@@ -362,10 +363,14 @@
 .Input-module_input__NAeHe .Input-module_trailingIcon__UDufB {
   padding-right: var(--input-column-gap);
   align-self: center;
+  padding-top: calc(var(--input-padding-top) - var(--input-border-top-width));
+  padding-bottom: calc(var(--input-padding-bottom) - var(--input-border-bottom-width));
 }
 .Input-module_input__NAeHe .Input-module_leadingIcon__bUFw5 {
   padding-left: var(--input-column-gap);
   align-self: center;
+  padding-top: calc(var(--input-padding-top) - var(--input-border-top-width));
+  padding-bottom: calc(var(--input-padding-bottom) - var(--input-border-bottom-width));
 }
 .Input-module_input__NAeHe .Input-module_error__qP189 {
   --a: 100;
@@ -418,11 +423,9 @@
   --input-placeholder-paragraph-indent: var(--password-placeholder-paragraph-indent);
 }
 .Password-module_password__nk-zf.Password-module_password__nk-zf .Password-module_toggle__1yQxr {
-  padding: 0;
   border: none;
 }
 .Password-module_password__nk-zf.Password-module_password__nk-zf .Password-module_toggle__1yQxr:hover, .Password-module_password__nk-zf.Password-module_password__nk-zf .Password-module_toggle__1yQxr:active, .Password-module_password__nk-zf.Password-module_password__nk-zf .Password-module_toggle__1yQxr:focus, .Password-module_password__nk-zf.Password-module_password__nk-zf .Password-module_toggle__1yQxr:focus-visible, .Password-module_password__nk-zf.Password-module_password__nk-zf .Password-module_toggle__1yQxr:disabled {
-  padding: 0;
   border: none;
 }
 .Password-module_password__nk-zf.Password-module_password__nk-zf .Password-module_toggle__1yQxr .Password-module_hide__N8Nxt {
@@ -911,11 +914,11 @@
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
-  gap: var(--chip-icon-content-container-row-gap) var(--chip-icon-content-container-column-gap);
-  padding-top: var(--chip-icon-content-container-padding-top);
-  padding-bottom: var(--chip-icon-content-container-padding-bottom);
-  padding-left: var(--chip-icon-content-container-padding-left);
-  padding-right: var(--chip-icon-content-container-padding-right);
+  gap: var(--chip-content-row-gap) var(--chip-content-column-gap);
+  padding-top: var(--chip-content-padding-top);
+  padding-bottom: var(--chip-content-padding-bottom);
+  padding-left: var(--chip-content-padding-left);
+  padding-right: var(--chip-content-padding-right);
 }
 .Chip-module_chip__gFkbn .Chip-module_leadingIcon__wzuFC,
 .Chip-module_chip__gFkbn .Chip-module_trailingIcon__jGkIh {
@@ -3028,8 +3031,8 @@ span.flatpickr-weekday {
 }
 .flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInput.cur-year:focus, .flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInput.cur-year:active {
   cursor: text;
-  outline: 1px solid white;
-  outline: 1px solid var(--border-border-4, white);
+  outline: none;
+  border: 1px solid var(--border-border-4, var(--border-primary));
   padding-left: calc(var(--date-picker-months-trigger-padding-left) - 1px);
   padding-right: calc(var(--date-picker-months-trigger-padding-right) - 1px);
   padding-top: calc(var(--date-picker-months-trigger-padding-top) - 1px);
@@ -3183,6 +3186,9 @@ span.flatpickr-weekday {
 .time-dropdown .dropdown-option:hover {
   background-color: var(--date-picker-time-color--hover);
 }
+.flatpickr-wrapper {
+  width: 100%;
+}
 .FormField-module_formField__vNu-s {
   display: flex;
   flex-direction: column;
@@ -4175,6 +4181,8 @@ span.flatpickr-weekday {
   --spinner__width: 4rem;
   --spinner__height: 4rem;
   --spinner__border-width: 6px;
+  --spinner-inner-width: 4rem;
+  --spinner-inner-height: 4rem;
   --spinner-border-color: var(--icon-primary);
 }
 .DropzoneContent-module_dropzoneContent__UjfAn .DropzoneContent-module_dropzoneRemoveUploadButtonDeleteButton__kUcdq {
@@ -4185,6 +4193,16 @@ span.flatpickr-weekday {
   display: block;
   color: rgb(233, 233, 234);
 }
+.DropzoneContent-module_dropzoneContent__UjfAn .DropzoneContent-module_dropzoneDrag__PlBJv {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  border-style: dashed;
+  border-width: 1px;
+  border-color: var(--colours-grey-450);
+  background-color: rgb(128, 128, 128);
+  opacity: 0.5;
+}
 .DropzoneContent-module_type--Empty__5ejbg {
   display: flex;
   flex-flow: column nowrap;
@@ -4232,6 +4250,8 @@ span.flatpickr-weekday {
 }
 .DropzoneContent-module_type--Empty__5ejbg .DropzoneContent-module_dropzoneSupportedFormats__mEgzt {
   color: var(--text-primary);
+  max-width: 80%;
+  text-align: center;
 }
 .DropzoneContent-module_type--Empty__5ejbg .DropzoneContent-module_dropzoneRemoveUploadButton__McYoe {
   display: none;
@@ -4243,6 +4263,9 @@ span.flatpickr-weekday {
   display: none;
   color: rgb(233, 233, 234);
 }
+.DropzoneContent-module_type--Empty__5ejbg .DropzoneContent-module_dropzoneDrag__PlBJv {
+  display: none;
+}
 .DropzoneContent-module_type--Uploaded__4aQy7 {
   display: flex;
   flex-flow: row nowrap;
@@ -4300,6 +4323,9 @@ span.flatpickr-weekday {
   display: block;
   color: rgb(233, 233, 234);
 }
+.DropzoneContent-module_type--Uploaded__4aQy7 .DropzoneContent-module_dropzoneDrag__PlBJv {
+  display: none;
+}
 .DropzoneContent-module_type--Loading__4VgoL {
   display: flex;
   flex-flow: column nowrap;
@@ -4361,6 +4387,76 @@ span.flatpickr-weekday {
   display: none;
   color: rgb(233, 233, 234);
 }
+.DropzoneContent-module_type--Loading__4VgoL .DropzoneContent-module_dropzoneDrag__PlBJv {
+  display: none;
+}
+.DropzoneContent-module_type--Drag__9BalI {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  height: 202px;
+  flex-shrink: 0;
+  gap: 12px;
+  border-width: 1px;
+  border-style: dashed;
+  border-color: rgb(56, 58, 68);
+  border-radius: 4px;
+}
+.DropzoneContent-module_type--Drag__9BalI .DropzoneContent-module_infoTextAndButtonContainer__ZvsDL {
+  display: none;
+  height: auto;
+  width: auto;
+  gap: 8px;
+}
+.DropzoneContent-module_type--Drag__9BalI .DropzoneContent-module_infoText__hywuA {
+  display: none;
+  height: auto;
+  width: auto;
+  color: rgb(186, 187, 191);
+  white-space: nowrap;
+  text-align: left;
+}
+.DropzoneContent-module_type--Drag__9BalI .DropzoneContent-module_dropzoneFileUploadTrigger__-Ai9k {
+  display: none;
+}
+.DropzoneContent-module_type--Drag__9BalI .DropzoneContent-module_dropzoneFileUploadTriggerChooseFileButton__I7Erl {
+  display: none;
+  border-color: rgb(56, 58, 68);
+  border-radius: 4px;
+}
+.DropzoneContent-module_type--Drag__9BalI .DropzoneContent-module_loaderAnim__XxG7G {
+  display: none;
+  height: 64px;
+  width: 64px;
+  flex-shrink: 0;
+}
+.DropzoneContent-module_type--Drag__9BalI .DropzoneContent-module_dropzoneFileName__wcqMo {
+  display: none;
+}
+.DropzoneContent-module_type--Drag__9BalI .DropzoneContent-module_dropzoneSupportedFormats__mEgzt {
+  display: none;
+}
+.DropzoneContent-module_type--Drag__9BalI .DropzoneContent-module_dropzoneRemoveUploadButton__McYoe {
+  display: none;
+}
+.DropzoneContent-module_type--Drag__9BalI .DropzoneContent-module_dropzoneRemoveUploadButtonDeleteButton__kUcdq {
+  display: none;
+}
+.DropzoneContent-module_type--Drag__9BalI .DropzoneContent-module_dropzoneRemoveUploadButtonDeleteButtoncloseDelete__TgTog {
+  display: none;
+  color: rgb(233, 233, 234);
+}
+.DropzoneContent-module_type--Drag__9BalI .DropzoneContent-module_dropzoneDrag__PlBJv {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  border-style: dashed;
+  border-width: 1px;
+  border-color: var(--colours-grey-450);
+  background-color: rgb(128, 128, 128);
+  opacity: 0.5;
+}
 .Form-module_form__9JYdv {
   display: flex;
   flex-direction: column;