@delightui/components 0.1.23 → 0.1.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -7,4 +7,4 @@ import { ListItemProps, ListItemType } from "../List.types";
7
7
  * @param {ListItemProps<T>} props - The properties for the list item.
8
8
  * @returns {JSX.Element} The rendered list item.
9
9
  */
10
- export declare const ListItem: <T extends ListItemType>(props: ListItemProps<T>) => React.JSX.Element;
10
+ export declare const RootListItem: <T extends ListItemType>(props: ListItemProps<T>) => React.JSX.Element;
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { ListItemProps } from "./ListItem.types";
3
+ declare const ListItem: (props: ListItemProps) => React.JSX.Element;
4
+ export default ListItem;
@@ -0,0 +1,23 @@
1
+ import type { HTMLAttributes, MouseEvent, ReactNode } from 'react';
2
+ export type ListItemProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {
3
+ /**
4
+ * Icon to be displayed before the button's content.
5
+ */
6
+ leadingIcon?: ReactNode;
7
+ /**
8
+ * Icon to be displayed after the button's content.
9
+ */
10
+ trailingIcon?: ReactNode;
11
+ /**
12
+ * Whether the list item is disabled.
13
+ */
14
+ disabled?: boolean;
15
+ /**
16
+ * Click event handler for the list item.
17
+ */
18
+ onClick?: (event?: MouseEvent<HTMLElement>) => void;
19
+ /**
20
+ * Additional class for styling.
21
+ */
22
+ className?: string;
23
+ };
@@ -0,0 +1,4 @@
1
+ import ListItem from './ListItem';
2
+ import type { ListItemProps } from './ListItem.types';
3
+ export type { ListItemProps };
4
+ export default ListItem;
@@ -12,6 +12,7 @@ export { default as Spinner } from './Spinner';
12
12
  export { default as Text } from './Text';
13
13
  export { default as TextArea } from './TextArea';
14
14
  export { default as ResponsiveComponent } from './ResponsiveComponent';
15
+ export { default as ListItem } from './ListItem';
15
16
  export * from './ActionCard';
16
17
  export * from './ActionImage';
17
18
  export * from './Button';
@@ -26,3 +27,4 @@ export * from './Spinner';
26
27
  export * from './Text';
27
28
  export * from './TextArea';
28
29
  export * from './ResponsiveComponent';
30
+ export * from './ListItem';
@@ -41,10 +41,9 @@ export declare const generateTimeOptions: (minuteStep: number) => string[];
41
41
  * @example
42
42
  * parseTimeInput("1") => "1:00 AM"
43
43
  * parseTimeInput("abc") => "12:00 AM"
44
- * parseTimeInput("3456") => "10:00 AM"
44
+ * parseTimeInput("3456") => "12:00 AM"
45
45
  * parseTimeInput("1:30") => "1:30 AM"
46
46
  * parseTimeInput("1:30 PM") => "1:30 PM"
47
47
  * parseTimeInput("13:45") => "1:45 PM"
48
- * parseTimeInput("25:00") => "1:00 AM"
49
48
  */
50
49
  export declare const parseTimeInput: (input: string) => string;
@@ -2390,6 +2390,58 @@ span.flatpickr-weekday {
2390
2390
  line-height: var(--text-area-placeholder-line-height);
2391
2391
  color: var(--text-area-placeholder-color);
2392
2392
  }
2393
+ .ListItem-module_button__yiYWw {
2394
+ display: flex;
2395
+ align-items: center;
2396
+ justify-content: center;
2397
+ position: relative;
2398
+ height: var(--list-item-height);
2399
+ min-height: var(--list-item-min-height);
2400
+ max-height: var(--list-item-max-height);
2401
+ width: var(--list-item-width);
2402
+ min-width: var(--list-item-min-width);
2403
+ max-width: var(--list-item-max-width);
2404
+ padding-top: calc(var(--list-item-padding-top) - var(--list-item-border-top-width));
2405
+ padding-bottom: calc(var(--list-item-padding-bottom) - var(--list-item-border-bottom-width));
2406
+ padding-left: calc(var(--list-item-padding-left) - var(--list-item-border-left-width));
2407
+ padding-right: calc(var(--list-item-padding-right) - var(--list-item-border-right-width));
2408
+ row-gap: var(--list-item-row-gap);
2409
+ -moz-column-gap: var(--list-item-column-gap);
2410
+ column-gap: var(--list-item-column-gap);
2411
+ border-bottom-width: var(--list-item-border-bottom-width);
2412
+ border-left-width: var(--list-item-border-left-width);
2413
+ border-right-width: var(--list-item-border-right-width);
2414
+ border-top-width: var(--list-item-border-top-width);
2415
+ border-style: var(--list-item-border-style);
2416
+ border-color: var(--list-item-border-color);
2417
+ border-top-left-radius: var(--list-item-border-top-left-radius);
2418
+ border-top-right-radius: var(--list-item-border-top-right-radius);
2419
+ border-bottom-right-radius: var(--list-item-border-bottom-right-radius);
2420
+ border-bottom-left-radius: var(--list-item-border-bottom-left-radius);
2421
+ outline-width: var(--list-item-outline-width);
2422
+ outline-style: var(--list-item-outline-style);
2423
+ outline-color: var(--list-item-outline-color);
2424
+ background-color: var(--list-item-background-color);
2425
+ font-family: var(--list-item-font-family);
2426
+ font-size: var(--list-item-font-size);
2427
+ font-weight: var(--list-item-font-weight);
2428
+ line-height: var(--list-item-line-height);
2429
+ color: var(--list-item-color);
2430
+ }
2431
+ .ListItem-module_button__yiYWw .ListItem-module_content__I-1o- {
2432
+ flex: 1;
2433
+ display: flex;
2434
+ justify-content: center;
2435
+ justify-content: var(--list-item-content-justify-content, center);
2436
+ }
2437
+ .ListItem-module_button__yiYWw .ListItem-module_content__I-1o- > *,
2438
+ .ListItem-module_button__yiYWw .ListItem-module_leadingIcon__BvSjG > *,
2439
+ .ListItem-module_button__yiYWw .ListItem-module_trailingIcon__qgDgt > * {
2440
+ color: var(--list-item-color);
2441
+ }
2442
+ .ListItem-module_button__yiYWw:disabled {
2443
+ cursor: not-allowed;
2444
+ }
2393
2445
  .Form-module_form__9JYdv {
2394
2446
  display: flex;
2395
2447
  flex-direction: column;
@@ -11260,7 +11312,8 @@ span.flatpickr-weekday {
11260
11312
  --select-letter-spacing: normal;
11261
11313
  --select-line-height: normal;
11262
11314
  --select-paragraph-spacing: ;
11263
- --select-paragraph-indent:
11315
+ --select-paragraph-indent: ;
11316
+ --select-trigger-border-style: solid;
11264
11317
  }
11265
11318
  [data-theme="light"] [component-variant="select-single-select"], [data-theme="dark"] [component-variant="select-single-select"] {
11266
11319
  --select-width: 100%;