@delightui/components 0.1.24 → 0.1.25

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/library.css

@@ -2390,6 +2390,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;