@delightui/components 0.1.24 → 0.1.26

package/dist/cjs/components/atoms/List/components/{ListItem.d.ts → RootListItem.d.ts}

@@ -7,4 +7,4 @@ import { ListItemProps, ListItemType } from "../List.types";
  * @param {ListItemProps<T>} props - The properties for the list item.
  * @returns {JSX.Element} The rendered list item.
  */
-export declare const ListItem: <T extends ListItemType>(props: ListItemProps<T>) => React.JSX.Element;
+export declare const RootListItem: <T extends ListItemType>(props: ListItemProps<T>) => React.JSX.Element;

package/dist/cjs/components/atoms/ListItem/ListItem.d.ts

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

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

@@ -0,0 +1,23 @@
+import type { HTMLAttributes, MouseEvent, ReactNode } from 'react';
+export type ListItemProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {
+    /**
+     * Icon to be displayed before the button's content.
+     */
+    leadingIcon?: ReactNode;
+    /**
+     * Icon to be displayed after the button's content.
+     */
+    trailingIcon?: ReactNode;
+    /**
+     * Whether the list item is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Click event handler for the list item.
+     */
+    onClick?: (event?: MouseEvent<HTMLElement>) => void;
+    /**
+     * Additional class for styling.
+     */
+    className?: string;
+};

package/dist/cjs/components/atoms/ListItem/index.d.ts

@@ -0,0 +1,4 @@
+import ListItem from './ListItem';
+import type { ListItemProps } from './ListItem.types';
+export type { ListItemProps };
+export default ListItem;

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

@@ -12,6 +12,7 @@ export { default as Spinner } from './Spinner';
 export { default as Text } from './Text';
 export { default as TextArea } from './TextArea';
 export { default as ResponsiveComponent } from './ResponsiveComponent';
+export { default as ListItem } from './ListItem';
 export * from './ActionCard';
 export * from './ActionImage';
 export * from './Button';
@@ -26,3 +27,4 @@ export * from './Spinner';
 export * from './Text';
 export * from './TextArea';
 export * from './ResponsiveComponent';
+export * from './ListItem';

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

@@ -16,7 +16,7 @@ export declare const filterDropdownOptions: (dropdown: HTMLDivElement, query: st
  * @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;
+export declare const positionDropdownRelativeToInput: (dropdown: HTMLDivElement, inputElement: HTMLInputElement, wrapperElement?: HTMLElement) => void;
 /**
  * Formats a Date object into a time string (HH:MM AM/PM).
  * @param date - The Date object to format.

package/dist/cjs/library.css

@@ -1482,12 +1482,15 @@ span.flatpickr-weekday {
   height: auto;
   gap: var(--spacing-medium);
   border-radius: var(--corner-radius-extra-small);
-  border: 1px solid var(--border-primary);
+  outline: 1px solid var(--colours-grey-450);
   background: var(--interactive-surface-secondary-default);
   align-items: center;
   padding-left: var(--spacing-medium);
   color: var(--text-primary);
 }
+.custom-time-input-wrapper:focus-within {
+  outline: 1px solid var(--border-primary);
+}
 .custom-time-input-wrapper .custom-time-input {
   width: 100%;
   font-family: var(--font-family-body);
@@ -1506,9 +1509,9 @@ span.flatpickr-weekday {
   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);
+  font-size: 13px;
+  font-family: var(--font-family-body);
+  line-height: 16px;
   background: var(--surface-background-4);
   outline: 1px solid var(--border-border-grey-3);
   width: 250px;
@@ -1516,6 +1519,7 @@ span.flatpickr-weekday {
   overflow: auto;
   padding: var(--spacing-medium);
   border-radius: var(--corner-radius-extra-small);
+  margin-top: 1px;
 }
 .time-dropdown .dropdown-option {
   align-items: center;
@@ -2390,6 +2394,58 @@ span.flatpickr-weekday {
   line-height: var(--text-area-placeholder-line-height);
   color: var(--text-area-placeholder-color);
 }
+.ListItem-module_button__yiYWw {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  height: var(--list-item-height);
+  min-height: var(--list-item-min-height);
+  max-height: var(--list-item-max-height);
+  width: var(--list-item-width);
+  min-width: var(--list-item-min-width);
+  max-width: var(--list-item-max-width);
+  padding-top: calc(var(--list-item-padding-top) - var(--list-item-border-top-width));
+  padding-bottom: calc(var(--list-item-padding-bottom) - var(--list-item-border-bottom-width));
+  padding-left: calc(var(--list-item-padding-left) - var(--list-item-border-left-width));
+  padding-right: calc(var(--list-item-padding-right) - var(--list-item-border-right-width));
+  row-gap: var(--list-item-row-gap);
+  -moz-column-gap: var(--list-item-column-gap);
+       column-gap: var(--list-item-column-gap);
+  border-bottom-width: var(--list-item-border-bottom-width);
+  border-left-width: var(--list-item-border-left-width);
+  border-right-width: var(--list-item-border-right-width);
+  border-top-width: var(--list-item-border-top-width);
+  border-style: var(--list-item-border-style);
+  border-color: var(--list-item-border-color);
+  border-top-left-radius: var(--list-item-border-top-left-radius);
+  border-top-right-radius: var(--list-item-border-top-right-radius);
+  border-bottom-right-radius: var(--list-item-border-bottom-right-radius);
+  border-bottom-left-radius: var(--list-item-border-bottom-left-radius);
+  outline-width: var(--list-item-outline-width);
+  outline-style: var(--list-item-outline-style);
+  outline-color: var(--list-item-outline-color);
+  background-color: var(--list-item-background-color);
+  font-family: var(--list-item-font-family);
+  font-size: var(--list-item-font-size);
+  font-weight: var(--list-item-font-weight);
+  line-height: var(--list-item-line-height);
+  color: var(--list-item-color);
+}
+.ListItem-module_button__yiYWw .ListItem-module_content__I-1o- {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  justify-content: var(--list-item-content-justify-content, center);
+}
+.ListItem-module_button__yiYWw .ListItem-module_content__I-1o- > *,
+.ListItem-module_button__yiYWw .ListItem-module_leadingIcon__BvSjG > *,
+.ListItem-module_button__yiYWw .ListItem-module_trailingIcon__qgDgt > * {
+  color: var(--list-item-color);
+}
+.ListItem-module_button__yiYWw:disabled {
+  cursor: not-allowed;
+}
 .Form-module_form__9JYdv {
   display: flex;
   flex-direction: column;