@delightui/components 0.1.10 → 0.1.11

package/dist/cjs/App.d.ts

@@ -1,6 +1,4 @@
 import React from 'react';
 import './resources/themes/base.css';
-import './resources/themes/light.css';
-import './resources/themes/dark.css';
 declare function App(): React.JSX.Element;
 export default App;

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

@@ -73,5 +73,13 @@ export type DatePickerProps = {
      * this function will be used to parse initial date string and date string from input field.
      */
     parseDate?: (date: string) => Date;
+    /**
+    * Allow user to type date/time in input.
+    * @default false
+    */
+    allowInput?: boolean;
+};
+export type CustomTimePickerConfig = {
+    minuteStep: number;
 };
 export {};

package/dist/cjs/components/molecules/DatePicker/Plugins/dateTimeSelector.d.ts

@@ -0,0 +1,4 @@
+import { Plugin } from "flatpickr/dist/types/options";
+import { CustomTimePickerConfig } from "../DatePicker.types";
+declare const dateTimeDropdownPlugin: (config: CustomTimePickerConfig) => Plugin;
+export default dateTimeDropdownPlugin;

package/dist/cjs/components/molecules/DatePicker/Plugins/timeSelector.d.ts

@@ -0,0 +1,4 @@
+import { Plugin } from "flatpickr/dist/types/options";
+import { CustomTimePickerConfig } from "../DatePicker.types";
+declare const timeDropdownPlugin: (config: CustomTimePickerConfig) => Plugin;
+export default timeDropdownPlugin;

package/dist/cjs/components/molecules/DatePicker/Plugins/utils.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Creates a dropdown element with a specific className.
+ * @param className - The class to add to the dropdown element.
+ * @returns The created dropdown element.
+ */
+export declare const createDropdownElement: (className: string) => HTMLDivElement;
+/**
+ * Filters the dropdown options based on the query string.
+ * @param dropdown - The dropdown element to populate.
+ * @param query - The query string to filter options by.
+ * @param options - Array of string options to display in the dropdown.
+ */
+export declare const filterDropdownOptions: (dropdown: HTMLDivElement, query: string, options: string[], handleTimeOptionClick: (option: string) => void, closeDropdown?: () => void) => void;
+/**
+ * Positions the dropdown relative to the input field.
+ * @param dropdown - The dropdown element to position.
+ * @param inputElement - The input element to base the dropdown positioning on.
+ */
+export declare const positionDropdownRelativeToInput: (dropdown: HTMLDivElement, inputElement: HTMLInputElement) => void;
+/**
+ * Formats a Date object into a time string (HH:MM AM/PM).
+ * @param date - The Date object to format.
+ * @returns The formatted time string (e.g., "12:00 PM").
+ */
+export declare const formatTime: (date: Date) => string;
+/**
+ * Toggles the visibility of a dropdown element.
+ * @param dropdown - The dropdown element to show or hide.
+ * @param isVisible - A boolean indicating whether the dropdown should be visible.
+ */
+export declare const toggleDropdownVisibility: (dropdown: HTMLDivElement, isVisible: boolean) => void;
+export declare const generateTimeOptions: (minuteStep: number) => string[];

package/dist/cjs/library.css

@@ -3152,7 +3152,7 @@ span.flatpickr-weekday {
   --form-field-message-icon__fill: var(--form-field-message-icon--error__fill);
 }
 .flatpickr-calendar {
-  --datePicker-background-color: var(--background-2);
+  --datePicker-background-color: var(--background-3);
   --datePicker-border-color: var(--border-grey-3);
   --datePicker-border-size: 1px;
   --datePicker-selected-color: var(--surface-primary);
@@ -3176,25 +3176,27 @@ span.flatpickr-weekday {
   --datePicker-day-border-color--focus-visible: var(--border-grey-1);
   --datePicker-day-border-color--disabled: transparent;
   --datePicker-day-font: "inter";
-  --datePicker-day-font-size: var(--font-size-1);
+  --datePicker-day-font-size: var(--font-size-2);
   --datePicker-day-font-weight: var(--font-weight-4);
   --datePicker-weekday-color: var(--text-primary);
   --datePicker-weekday-font: "inter";
-  --datePicker-weekday-font-size: var(--font-size-1);
+  --datePicker-weekday-font-size: var(--font-size-2);
   --datePicker-weekday-font-weight: var(--font-weight-4);
   --datePicker-next-month-icon-color: var(--text-primary);
   --datePicker-prev-month-icon-color: var(--text-primary);
   --datePicker-cur-month-color: var(--text-primary);
-  --datePicker-hour-color: var(--text-primary);
-  --datePicker-hour-color--hover: var(--surface-secondary--hover);
-  --datePicker-minute-color: var(--text-primary);
-  --datePicker-minute-color--hover: var(--surface-secondary--hover);
-  --datePicker-am-pm-color: var(--text-primary);
-  --datePicker-am-pm-color--hover: var(--surface-secondary--hover);
+  --datePicker-time-color: var(--text-primary);
+  --datePicker-time-color--hover: var(--surface-secondary--hover);
+  --datePicker-time-dropdown-max-height: 160px;
   background-color: var(--datePicker-background-color);
   border: 1px solid var(--datePicker-border-color);
   border: var(--datePicker-border-size) solid var(--datePicker-border-color);
-  box-shadow: none;
+  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.3490196078);
+  width: -moz-fit-content;
+  width: fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  padding: var(--spacing-large);
 }
 .flatpickr-calendar .flatpickr-day {
   color: var(--datePicker-day-color);
@@ -3204,6 +3206,11 @@ span.flatpickr-weekday {
   font-family: var(--datePicker-day-font);
   font-size: var(--datePicker-day-font-size);
   font-weight: var(--datePicker-day-font-weight);
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-self: center;
+  width: 100%;
 }
 .flatpickr-calendar .flatpickr-day.flatpickr-disabled {
   color: var(--datePicker-day-color--disabled);
@@ -3248,55 +3255,80 @@ span.flatpickr-weekday {
   font-family: var(--datePicker-weekday-font);
   font-size: var(--datePicker-weekday-font-size);
   font-weight: var(--datePicker-weekday-font-weight);
+  padding: var(--spacing-medium);
+}
+.flatpickr-calendar .flatpickr-months {
+  width: 250px;
 }
 .flatpickr-calendar .flatpickr-months .flatpickr-next-month {
   fill: var(--datePicker-next-month-icon-color);
+  position: relative;
 }
 .flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg {
   fill: inherit;
 }
 .flatpickr-calendar .flatpickr-months .flatpickr-prev-month {
   fill: var(--datePicker-prev-month-icon-color);
+  position: relative;
 }
 .flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg {
   fill: inherit;
 }
 .flatpickr-calendar .flatpickr-months .flatpickr-current-month {
   color: var(--datePicker-cur-month-color);
+  display: contents;
 }
-.flatpickr-calendar .flatpickr-months .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
-  background-color: var(--datePicker-background-color);
+.flatpickr-calendar .flatpickr-months .flatpickr-current-month .flatpickr-monthDropdown-months {
+  -webkit-appearance: none;
+  /* Hides the arrow in WebKit browsers */
+  -moz-appearance: none;
+  /* Hides the arrow in Firefox */
+  appearance: none;
+  /* Hides the arrow in modern browsers */
+  text-align: center;
 }
-.flatpickr-calendar .flatpickr-months .arrowUp,
-.flatpickr-calendar .flatpickr-months .arrowDown {
+.flatpickr-calendar .flatpickr-months .flatpickr-current-month .flatpickr-monthDropdown-months::-ms-expand {
   display: none;
 }
-.flatpickr-calendar .flatpickr-time .flatpickr-hour {
-  color: var(--datePicker-hour-color);
+.flatpickr-calendar .flatpickr-months .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
+  background-color: var(--datePicker-background-color);
 }
-.flatpickr-calendar .flatpickr-time .flatpickr-hour:focus {
-  background: inherit;
+.flatpickr-calendar .flatpickr-months .flatpickr-prev-month.flatpickr-disabled {
+  display: block;
+  visibility: hidden;
 }
-.flatpickr-calendar .flatpickr-time .flatpickr-hour:hover {
-  background-color: var(--datePicker-hour-color--hover);
+.flatpickr-calendar .flatpickr-months .flatpickr-next-month.flatpickr-disabled {
+  display: block;
+  visibility: hidden;
 }
-.flatpickr-calendar .flatpickr-time .flatpickr-minute {
-  color: var(--datePicker-minute-color);
+.flatpickr-calendar .flatpickr-months .flatpickr-month {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  font-size: var(--font-size-2);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-body-small);
 }
-.flatpickr-calendar .flatpickr-time .flatpickr-minute:focus {
-  background: inherit;
+.flatpickr-calendar .flatpickr-months .arrowUp,
+.flatpickr-calendar .flatpickr-months .arrowDown {
+  display: none;
 }
-.flatpickr-calendar .flatpickr-time .flatpickr-minute:hover {
-  background-color: var(--datePicker-minute-color--hover);
+.flatpickr-calendar .flatpickr-days {
+  width: 250px;
 }
-.flatpickr-calendar .flatpickr-time .flatpickr-am-pm {
-  color: var(--datePicker-am-pm-color);
+.flatpickr-calendar .flatpickr-innerContainer {
+  width: -moz-fit-content;
+  width: fit-content;
 }
-.flatpickr-calendar .flatpickr-time .flatpickr-am-pm:focus {
-  background: inherit;
+.flatpickr-calendar .dayContainer {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  width: 250px;
+  min-width: 250px;
+  max-width: 250px;
 }
-.flatpickr-calendar .flatpickr-time .flatpickr-am-pm:hover {
-  background-color: var(--datePicker-am-pm-color--hover);
+.flatpickr-calendar .flatpickr-time {
+  display: none !important;
 }
 .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
 .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
@@ -3304,6 +3336,92 @@ span.flatpickr-weekday {
   /* prevent edge case where 2 consecutive dates are selected in range mode */
   box-shadow: -8px 0 0 var(--datePicker-day-inRange-color), 8px 0 0 var(--datePicker-day-inRange-color);
 }
+.flatpickr-calendar.hasTime.noCalendar {
+  padding: 0px;
+}
+.custom-time-selector-input {
+  height: var(--input-inputElement-height);
+  width: 100%;
+  color: var(--text-primary);
+  caret-color: var(--text-primary);
+}
+.custom-time-wrapper {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  gap: var(--spacing-extra-small);
+}
+.custom-time-wrapper .custom-time-label {
+  width: 100%;
+  height: auto;
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-body-small);
+  font-weight: 700;
+  line-height: var(--line-height-body-small);
+  text-align: left;
+  color: var(--text-primary);
+}
+.custom-time-input-wrapper {
+  display: flex;
+  width: 100%;
+  height: auto;
+  gap: var(--spacing-medium);
+  border-radius: var(--corner-radius-extra-small);
+  border: 1px solid var(--border-primary);
+  background: var(--interactive-surface-secondary-default);
+  align-items: center;
+  padding-left: var(--spacing-medium);
+}
+.custom-time-input-wrapper .custom-time-input-icon {
+  width: -moz-fit-content;
+  width: fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+}
+.custom-time-input-wrapper .custom-time-input {
+  width: 100%;
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-body-small);
+  font-weight: 400;
+  line-height: var(--line-height-body-small);
+  text-align: left;
+  padding: var(--spacing-medium);
+  padding-left: 0px;
+  color: var(--text-primary);
+  caret-color: var(--text-primary);
+}
+.time-dropdown {
+  display: flex;
+  flex-direction: column;
+  z-index: 99999;
+  gap: var(--spacing-extra-small);
+  color: #fff;
+  font-size: var(--font-size-body-small);
+  font-family: var(--font-family-body-small);
+  line-height: var(--line-height-body-small);
+  background: var(--surface-background-4);
+  outline: 1px solid var(--border-border-grey-3);
+  width: 250px;
+  max-height: 156px;
+  overflow: auto;
+  padding: var(--spacing-medium);
+  border-radius: var(--corner-radius-extra-small);
+}
+.time-dropdown .dropdown-option {
+  align-items: center;
+  display: flex;
+  cursor: pointer;
+  padding: var(--spacing-medium);
+  gap: var(--spacing-extra-small);
+  color: var(--datePicker-time-color);
+}
+.time-dropdown .dropdown-option:focus {
+  background: inherit;
+}
+.time-dropdown .dropdown-option:hover {
+  background-color: var(--datePicker-time-color--hover);
+}
 /**
  * @mixin set-css-vars
  * 
@@ -28371,3 +28489,78 @@ span.flatpickr-weekday {
     --date-picker__row-gap: 12px;
     --date-picker__column-gap: var(--spacing-large)
 }
+
+[data-theme='light'] {
+  /* Semantic [Colours] */
+  --surface-background-1: var(--colours-grey-0);
+  --surface-background-2: var(--colours-grey-50);
+  --surface-background-3: var(--colours-grey-100);
+  --surface-background-4: var(--colours-grey-200);
+  --surface-background-5: var(--colours-grey-300);
+  --surface-background-6: var(--colours-grey-400);
+  --surface-background-success: var(--colours-green-1000);
+  --interactive-surface-primary-default: var(--colours-purple-500);
+  --interactive-surface-primary-hover: var(--colours-purple-400);
+  --border-border-grey-1: var(--colours-grey-50);
+  --interactive-surface-primary-pressed: var(--colours-purple-400);
+  --interactive-surface-secondary-default: var(--colours-grey-50);
+  --interactive-surface-secondary-hover: var(--colours-grey-100);
+  --interactive-surface-secondary-pressed: var(--colours-grey-100);
+  --interactive-surface-destructive-default: var(--colours-red-700);
+  --border-border-grey-2: var(--colours-grey-100);
+  --border-border-grey-3: var(--colours-grey-200);
+  --interactive-surface-destructive-hover: var(--colours-red-800);
+  --interactive-surface-destructive-pressed: var(--colours-red-900);
+  --interactive-surface-primary-disabled: var(--colours-grey-400);
+  --border-destructive: var(--colours-red-700);
+  --interactive-surface-secondary-disabled: var(--colours-grey-200);
+  --interactive-surface-destructive-disabled: var(--colours-grey-200);
+  --border-primary: var(--colours-purple-500);
+  --border-success: var(--colours-green-800);
+  --text-primary: var(--colours-grey-700);
+  --text-secondary: var(--colours-grey-500);
+  --icon-primary: var(--colours-grey-700);
+  --text-tertiary: var(--colours-grey-450);
+  --icon-secondary: var(--colours-grey-500);
+  --icon-tertiary: var(--colours-grey-450);
+  --icon-destructive: var(--colours-red-600);
+  --text-destructive: var(--colours-red-600);
+  --text-button-text: var(--colours-grey-50)
+}
+[data-theme='dark'] {
+  /* Semantic [Colours] */
+  --surface-background-1: var(--colours-grey-900);
+  --surface-background-2: var(--colours-grey-800);
+  --surface-background-3: var(--colours-grey-700);
+  --surface-background-4: var(--colours-grey-500);
+  --surface-background-5: var(--colours-grey-600);
+  --surface-background-6: var(--colours-grey-450);
+  --surface-background-success: var(--colours-green-1000);
+  --interactive-surface-primary-default: var(--colours-purple-500);
+  --interactive-surface-primary-hover: var(--colours-purple-400);
+  --border-border-grey-1: var(--colours-grey-100);
+  --interactive-surface-primary-pressed: var(--colours-purple-400);
+  --interactive-surface-secondary-default: var(--colours-grey-500);
+  --interactive-surface-secondary-hover: var(--colours-grey-450);
+  --interactive-surface-secondary-pressed: var(--colours-grey-400);
+  --interactive-surface-destructive-default: var(--colours-red-700);
+  --border-border-grey-2: var(--colours-grey-400);
+  --border-border-grey-3: var(--colours-grey-450);
+  --interactive-surface-destructive-hover: var(--colours-red-800);
+  --interactive-surface-destructive-pressed: var(--colours-red-900);
+  --interactive-surface-primary-disabled: var(--colours-grey-450);
+  --border-destructive: var(--colours-red-700);
+  --interactive-surface-secondary-disabled: var(--colours-grey-450);
+  --interactive-surface-destructive-disabled: var(--colours-grey-450);
+  --border-primary: var(--colours-purple-500);
+  --border-success: var(--colours-green-800);
+  --text-primary: var(--colours-grey-50);
+  --text-secondary: var(--colours-grey-100);
+  --icon-primary: var(--colours-grey-50);
+  --text-tertiary: var(--colours-grey-200);
+  --icon-secondary: var(--colours-grey-100);
+  --icon-tertiary: var(--colours-grey-200);
+  --icon-destructive: var(--colours-red-600);
+  --text-destructive: var(--colours-red-600);
+  --text-button-text: var(--colours-grey-50)
+}