@particle-network/ui-react 0.1.4-beta.0 → 0.1.4-beta.11

package/dist/components/UXCalendar/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { type CalendarProps } from '@heroui/calendar';
+export type UXCalendarProps = CalendarProps;
+export declare const calendarClassNames: {
+    base: string;
+    prevButton: string;
+    nextButton: string;
+    title: string;
+    gridWrapper: string;
+    gridBody: string;
+    cell: string;
+    cellButton: string[];
+};
+export declare const UXCalendar: React.FC<UXCalendarProps>;

package/dist/components/UXCalendar/index.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Calendar } from "@heroui/calendar";
+const calendarClassNames = {
+    base: 'bg-content1',
+    prevButton: 'text-foreground',
+    nextButton: 'text-foreground',
+    title: 'text-foreground',
+    gridWrapper: 'bg-content1',
+    gridBody: 'bg-content1',
+    cell: 'text-sm font-medium',
+    cellButton: [
+        'data-[today=true]:after:content-[""] data-[today=true]:after:absolute data-[today=true]:after:h-1 data-[today=true]:after:w-1 data-[today=true]:after:rounded-full data-[today=true]:after:bg-primary data-[today=true]:after:-bottom-1.5'
+    ]
+};
+const UXCalendar = ({ classNames, ...props })=>/*#__PURE__*/ jsx(Calendar, {
+        classNames: {
+            ...calendarClassNames,
+            ...classNames
+        },
+        ...props
+    });
+UXCalendar.displayName = 'UX.Calendar';
+export { UXCalendar, calendarClassNames };

package/dist/components/UXCheckbox/checkbox.extend.d.ts

@@ -1,7 +1,8 @@
 import type React from 'react';
 import { type CheckboxProps } from '@heroui/checkbox';
 type ExtendedCheckboxProps = Omit<CheckboxProps, 'color'> & {
-    color?: 'primary' | 'success' | 'warning' | 'danger' | 'bullish' | 'bearish';
+    color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'bullish' | 'bearish';
+    labelPlacement?: 'left' | 'right';
 };
 declare const ExtendedCheckbox: React.ForwardRefExoticComponent<ExtendedCheckboxProps>;
 export default ExtendedCheckbox;

package/dist/components/UXCheckbox/checkbox.extend.js

@@ -6,6 +6,9 @@ const ExtendedCheckbox = extendVariants(Checkbox, {
             primary: {
                 wrapper: 'after:bg-primary after:text-primary-foreground text-primary-foreground'
             },
+            secondary: {
+                wrapper: 'after:bg-tertiary after:text-tertiary-foreground text-tertiary-foreground'
+            },
             success: {
                 wrapper: 'after:bg-success after:text-success-foreground text-success-foreground'
             },
@@ -25,9 +28,9 @@ const ExtendedCheckbox = extendVariants(Checkbox, {
         size: {
             sm: {
                 wrapper: [
-                    'w-3.5 h-3.5 me-sm',
+                    'w-3.5 h-3.5 me-0',
                     'rounded-[calc(theme(borderRadius.medium)*0.2)]',
-                    'before:rounded-[calc(theme(borderRadius.medium)*0.2)] before:border-foreground-300 before:border-1.5',
+                    'before:rounded-[calc(theme(borderRadius.medium)*0.2)] before:border-secondary before:border-1.5',
                     'after:rounded-[calc(theme(borderRadius.medium)*0.2)]'
                 ],
                 label: '!text-body3 font-medium',
@@ -35,9 +38,9 @@ const ExtendedCheckbox = extendVariants(Checkbox, {
             },
             md: {
                 wrapper: [
-                    'w-4 h-4 me-2',
+                    'w-4 h-4 me-0',
                     'rounded-[calc(theme(borderRadius.medium)*0.2)]',
-                    'before:rounded-[calc(theme(borderRadius.medium)*0.2)] before:border-foreground-300 before:border-2',
+                    'before:rounded-[calc(theme(borderRadius.medium)*0.2)] before:border-secondary before:border-2',
                     'after:rounded-[calc(theme(borderRadius.medium)*0.2)]'
                 ],
                 label: '!text-body2 font-medium',
@@ -45,9 +48,9 @@ const ExtendedCheckbox = extendVariants(Checkbox, {
             },
             lg: {
                 wrapper: [
-                    'w-5 h-5 me-2',
+                    'w-[18px] h-[18px] me-0',
                     'rounded-[calc(theme(borderRadius.medium)*0.3)]',
-                    'before:rounded-[calc(theme(borderRadius.medium)*0.3)] before:border-foreground-300 before:border-2',
+                    'before:rounded-[calc(theme(borderRadius.medium)*0.3)] before:border-secondary before:border-2',
                     'after:rounded-[calc(theme(borderRadius.medium)*0.3)]'
                 ],
                 label: '!text-body1 font-medium',
@@ -138,13 +141,22 @@ const ExtendedCheckbox = extendVariants(Checkbox, {
                 icon: 'transition-opacity motion-reduce:transition-none',
                 label: 'transition-colors-opacity before:transition-width motion-reduce:transition-none'
             }
+        },
+        labelPlacement: {
+            left: {
+                base: 'flex-row-reverse gap-2'
+            },
+            right: {
+                base: 'flex-row gap-2'
+            }
         }
     },
     defaultVariants: {
         color: 'primary',
         size: 'md',
         isDisabled: false,
-        lineThrough: false
+        lineThrough: false,
+        labelPlacement: 'right'
     }
 });
 const checkbox_extend = ExtendedCheckbox;

package/dist/components/UXCheckbox/index.d.ts

@@ -3,7 +3,8 @@ import { type CheckboxGroupProps } from '@heroui/checkbox';
 import ExtendedCheckbox from './checkbox.extend';
 export type UXCheckboxProps = React.ComponentPropsWithRef<typeof ExtendedCheckbox>;
 declare const UXCheckbox: React.ForwardRefExoticComponent<Omit<Omit<import("@heroui/checkbox").CheckboxProps, "color"> & {
-    color?: "primary" | "success" | "warning" | "danger" | "bullish" | "bearish";
+    color?: "primary" | "secondary" | "success" | "warning" | "danger" | "bullish" | "bearish";
+    labelPlacement?: "left" | "right";
 }, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default UXCheckbox;
 export declare const UXCheckboxGroup: import("@heroui/system-rsc").InternalForwardRefRenderFunction<"div", CheckboxGroupProps, never>;

package/dist/components/UXDateRangePicker/date-range-picker.extend.d.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+import { type PopoverProps } from '@heroui/popover';
+type ExtendedPopoverProps = Omit<PopoverProps, 'color'> & {
+    color?: 'default';
+};
+declare const ExtendedPopover: React.ForwardRefExoticComponent<ExtendedPopoverProps>;
+export default ExtendedPopover;

package/dist/components/UXDateRangePicker/date-range-picker.extend.js

@@ -0,0 +1,26 @@
+import { Popover } from "@heroui/popover";
+import { extendVariants } from "@heroui/system-rsc";
+const ExtendedPopover = extendVariants(Popover, {
+    variants: {
+        size: {
+            md: {
+                content: 'text-tiny !p-md max-w-[300px]'
+            }
+        },
+        color: {
+            default: {
+                base: 'before:bg-content1 before:shadow-box',
+                content: 'bg-content1 text-foreground-300 shadow-box'
+            }
+        }
+    },
+    defaultVariants: {
+        color: 'default',
+        radius: 'md',
+        size: 'md',
+        shadow: 'md',
+        backdrop: 'transparent'
+    }
+});
+const date_range_picker_extend = ExtendedPopover;
+export { date_range_picker_extend as default };

package/dist/components/UXDateRangePicker/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { type DateRangePickerProps } from '@heroui/date-picker';
+export type UXDateRangePickerProps = DateRangePickerProps;
+export declare const UXDateRangePicker: React.FC<UXDateRangePickerProps>;

package/dist/components/UXDateRangePicker/index.js

@@ -0,0 +1,56 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { DateRangePicker } from "@heroui/date-picker";
+import { CalendarIcon } from "../../icons/index.js";
+import { calendarClassNames } from "../UXCalendar/index.js";
+const classes = {
+    inputWrapper: 'bg-background-200 h-[30px] min-h-[30px] rounded-small',
+    focus: 'focus:bg-primary/30 focus:shadow-none focus:outline-none'
+};
+const UXDateRangePicker = ({ classNames, ...props })=>/*#__PURE__*/ jsx(DateRangePicker, {
+        classNames: {
+            inputWrapper: classes.inputWrapper,
+            input: [
+                'gap-px',
+                classes.focus
+            ],
+            segment: [
+                'text-foreground text-xs font-medium',
+                classes.focus
+            ],
+            separator: 'text-foreground-100',
+            timeInputWrapper: 'bg-content1',
+            timeInput: classes.focus,
+            selectorButton: 'w-6 h-6 min-w-6 rounded-sm',
+            selectorIcon: 'text-secondary',
+            ...classNames
+        },
+        calendarProps: {
+            classNames: calendarClassNames
+        },
+        popoverProps: {
+            classNames: {
+                base: 'before:bg-content1 before:shadow-box',
+                content: 'bg-content1 text-foreground-300 shadow-box'
+            }
+        },
+        timeInputProps: {
+            classNames: {
+                base: [
+                    '[&>[data-slot="input-wrapper"]]:h-[30px] [&>[data-slot="input-wrapper"]]:min-h-[30px] [&>[data-slot="input-wrapper"]]:rounded-small [&>[data-slot="input-wrapper"]]:bg-background-200',
+                    '[&_[data-slot=segment]:focus]:bg-primary/30 [&_[data-slot=segment]:focus]:shadow-none [&_[data-slot=segment]:focus]:outline-none'
+                ]
+            }
+        },
+        selectorIcon: /*#__PURE__*/ jsx(CalendarIcon, {
+            size: 18,
+            color: "tertiary"
+        }),
+        granularity: "second",
+        visibleMonths: 2,
+        hourCycle: 24,
+        firstDayOfWeek: "sun",
+        ...props
+    });
+UXDateRangePicker.displayName = 'UX.DateRangePicker';
+export { UXDateRangePicker };

package/dist/components/UXInput/index.d.ts

@@ -325,18 +325,18 @@ declare const UXInput: React.ForwardRefExoticComponent<Omit<Omit<{
     capture?: boolean | "user" | "environment" | undefined;
     checked?: boolean | undefined;
     src?: string | undefined;
-    classNames?: import("@heroui/theme").SlotsToClasses<"label" | "inputWrapper" | "base" | "input" | "description" | "errorMessage" | "mainWrapper" | "innerWrapper" | "clearButton" | "helperWrapper"> | undefined;
+    classNames?: import("@heroui/theme").SlotsToClasses<"label" | "inputWrapper" | "base" | "input" | "errorMessage" | "helperWrapper" | "description" | "innerWrapper" | "mainWrapper" | "clearButton"> | undefined;
+    isReadOnly?: boolean | undefined;
+    validationState?: import("@react-types/shared").ValidationState | undefined;
+    errorMessage?: React.ReactNode | ((v: import("@react-types/shared").ValidationResult) => React.ReactNode);
     placeholder?: string | undefined;
     readOnly?: boolean | undefined;
     required?: boolean | undefined;
     onValueChange?: ((value: string) => void) | undefined;
-    isReadOnly?: boolean | undefined;
     isRequired?: boolean | undefined;
-    validationState?: import("@react-types/shared").ValidationState | undefined;
     validationBehavior?: "aria" | "native" | undefined;
     validate?: ((value: string) => import("@react-types/shared").ValidationError | true | null | undefined) | undefined;
     description?: React.ReactNode;
-    errorMessage?: React.ReactNode | ((v: import("@react-types/shared").ValidationResult) => React.ReactNode);
     isClearable?: boolean | undefined;
     baseRef?: React.Ref<HTMLDivElement> | undefined;
     wrapperRef?: React.Ref<HTMLDivElement> | undefined;

package/dist/components/UXInput/input.extend.d.ts

@@ -322,18 +322,18 @@ declare const ExtendedInput: import("react").ForwardRefExoticComponent<Omit<{
     capture?: boolean | "user" | "environment" | undefined;
     checked?: boolean | undefined;
     src?: string | undefined;
-    classNames?: import("@heroui/theme").SlotsToClasses<"label" | "inputWrapper" | "base" | "input" | "description" | "errorMessage" | "mainWrapper" | "innerWrapper" | "clearButton" | "helperWrapper"> | undefined;
+    classNames?: import("@heroui/theme").SlotsToClasses<"label" | "inputWrapper" | "base" | "input" | "errorMessage" | "helperWrapper" | "description" | "innerWrapper" | "mainWrapper" | "clearButton"> | undefined;
+    isReadOnly?: boolean | undefined;
+    validationState?: import("@react-types/shared").ValidationState | undefined;
+    errorMessage?: import("react").ReactNode | ((v: import("@react-types/shared").ValidationResult) => import("react").ReactNode);
     placeholder?: string | undefined;
     readOnly?: boolean | undefined;
     required?: boolean | undefined;
     onValueChange?: ((value: string) => void) | undefined;
-    isReadOnly?: boolean | undefined;
     isRequired?: boolean | undefined;
-    validationState?: import("@react-types/shared").ValidationState | undefined;
     validationBehavior?: "aria" | "native" | undefined;
     validate?: ((value: string) => import("@react-types/shared").ValidationError | true | null | undefined) | undefined;
     description?: import("react").ReactNode;
-    errorMessage?: import("react").ReactNode | ((v: import("@react-types/shared").ValidationResult) => import("react").ReactNode);
     isClearable?: boolean | undefined;
     baseRef?: import("react").Ref<HTMLDivElement> | undefined;
     wrapperRef?: import("react").Ref<HTMLDivElement> | undefined;

package/dist/components/UXSwitch/index.d.ts

@@ -320,12 +320,12 @@ declare const UXSwitch: React.ForwardRefExoticComponent<Omit<Omit<{
     checked?: boolean | undefined;
     src?: string | undefined;
     classNames?: import("@heroui/theme").SlotsToClasses<"label" | "base" | "startContent" | "endContent" | "wrapper" | "hiddenInput" | "thumb" | "thumbIcon"> | undefined;
+    isReadOnly?: boolean | undefined;
     placeholder?: string | undefined;
     readOnly?: boolean | undefined;
     required?: boolean | undefined;
     onValueChange?: ((isSelected: boolean) => void) | undefined;
     defaultSelected?: boolean | undefined;
-    isReadOnly?: boolean | undefined;
     thumbIcon?: React.ReactNode | ((props: import("@heroui/switch").SwitchThumbIconProps) => React.ReactNode);
 }, "ref"> & React.RefAttributes<React.ReactElement<unknown, string | React.JSXElementConstructor<any>>>, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default UXSwitch;

package/dist/components/UXSwitch/switch.extend.d.ts

@@ -317,12 +317,12 @@ declare const ExtendedSwitch: import("react").ForwardRefExoticComponent<Omit<{
     checked?: boolean | undefined;
     src?: string | undefined;
     classNames?: import("@heroui/theme").SlotsToClasses<"label" | "base" | "startContent" | "endContent" | "wrapper" | "hiddenInput" | "thumb" | "thumbIcon"> | undefined;
+    isReadOnly?: boolean | undefined;
     placeholder?: string | undefined;
     readOnly?: boolean | undefined;
     required?: boolean | undefined;
     onValueChange?: ((isSelected: boolean) => void) | undefined;
     defaultSelected?: boolean | undefined;
-    isReadOnly?: boolean | undefined;
     thumbIcon?: import("react").ReactNode | ((props: import("@heroui/switch").SwitchThumbIconProps) => import("react").ReactNode);
 }, "ref"> & import("react").RefAttributes<import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>>>;
 export default ExtendedSwitch;

package/dist/components/UXTable/index.d.ts

@@ -301,6 +301,8 @@ export declare const UXTable: import("@heroui/system-rsc").InternalForwardRefRen
     frame?: boolean | undefined;
     rules?: "none" | "all" | "groups" | "rows" | "columns" | undefined;
     classNames?: import("@heroui/theme").SlotsToClasses<"table" | "base" | "tbody" | "td" | "tfoot" | "th" | "thead" | "tr" | "wrapper" | "sortIcon" | "emptyWrapper" | "loadingWrapper"> | undefined;
+    topContent?: React.ReactNode;
+    bottomContent?: React.ReactNode;
     scrollRef?: import("@react-types/shared").RefObject<HTMLElement | null> | undefined;
     isVirtualized?: boolean | undefined;
     escapeKeyBehavior?: "none" | "clearSelection" | undefined;
@@ -310,8 +312,6 @@ export declare const UXTable: import("@heroui/system-rsc").InternalForwardRefRen
     selectedKeys?: "all" | Iterable<import("@react-types/shared").Key> | undefined;
     defaultSelectedKeys?: "all" | Iterable<import("@react-types/shared").Key> | undefined;
     onSelectionChange?: ((keys: import("@react-types/shared").Selection) => void) | undefined;
-    topContent?: React.ReactNode;
-    bottomContent?: React.ReactNode;
     baseRef?: import("@heroui/react-utils").ReactRef<HTMLElement | null> | undefined;
     isCompact?: boolean | undefined;
     keyboardDelegate?: import("@react-types/shared").KeyboardDelegate | undefined;

package/dist/components/UXTable/table.extend.d.ts

@@ -298,6 +298,8 @@ declare const ExtendedTable: import("react").ForwardRefExoticComponent<Omit<{
     frame?: boolean | undefined;
     rules?: "none" | "all" | "groups" | "rows" | "columns" | undefined;
     classNames?: import("@heroui/theme").SlotsToClasses<"table" | "base" | "tbody" | "td" | "tfoot" | "th" | "thead" | "tr" | "wrapper" | "sortIcon" | "emptyWrapper" | "loadingWrapper"> | undefined;
+    topContent?: import("react").ReactNode;
+    bottomContent?: import("react").ReactNode;
     scrollRef?: import("@react-types/shared").RefObject<HTMLElement | null> | undefined;
     isVirtualized?: boolean | undefined;
     escapeKeyBehavior?: "none" | "clearSelection" | undefined;
@@ -307,8 +309,6 @@ declare const ExtendedTable: import("react").ForwardRefExoticComponent<Omit<{
     selectedKeys?: "all" | Iterable<import("@react-types/shared").Key> | undefined;
     defaultSelectedKeys?: "all" | Iterable<import("@react-types/shared").Key> | undefined;
     onSelectionChange?: ((keys: import("@react-types/shared").Selection) => void) | undefined;
-    topContent?: import("react").ReactNode;
-    bottomContent?: import("react").ReactNode;
     baseRef?: import("@heroui/react-utils").ReactRef<HTMLElement | null> | undefined;
     isCompact?: boolean | undefined;
     keyboardDelegate?: import("@react-types/shared").KeyboardDelegate | undefined;

package/dist/components/UXTabs/tabs.classes.js

@@ -4,25 +4,25 @@ const tabsClasses = {
         variant: {
             solid: {
                 tabList: 'gap-0 bg-background-400',
-                tab: 'py-0',
+                tab: 'py-0 !outline-none',
                 cursor: 'shadow-none inset-0',
                 tabContent: 'text-foreground-300 font-medium'
             },
             switch: {
                 tabList: 'p-0 gap-0 bg-background-200',
-                tab: 'py-0',
+                tab: 'py-0 !outline-none',
                 cursor: 'shadow-none inset-0',
                 tabContent: 'text-foreground-300 font-medium'
             },
             light: {
                 tabList: 'p-0 gap-md rounded-none bg-transparent dark:bg-transparent',
-                tab: 'py-0 h-full',
+                tab: 'py-0 h-full !outline-none',
                 cursor: 'shadow-none',
                 tabContent: 'text-foreground-300 font-medium'
             },
             text: {
                 tabList: 'p-0 rounded-none bg-transparent dark:bg-transparent',
-                tab: 'font-medium p-0 h-fit rounded-none',
+                tab: 'font-medium p-0 h-fit rounded-none !outline-none',
                 tabContent: 'text-foreground-300 font-medium',
                 cursor: 'hidden'
             }

package/dist/components/UXTooltip/tooltip.extend.d.ts

@@ -290,8 +290,10 @@ declare const ExtendedTooltip: import("react").ForwardRefExoticComponent<Omit<{
     as?: import("@heroui/system-rsc").As<any> | undefined;
     onClose?: ((() => void) & (() => void)) | undefined;
     classNames?: import("@heroui/theme").SlotsToClasses<"content" | "base" | "arrow"> | undefined;
-    placement?: import("@heroui/aria-utils").OverlayPlacement | undefined;
     isOpen?: boolean | undefined;
+    defaultOpen?: boolean | undefined;
+    onOpenChange?: ((isOpen: boolean) => void) | undefined;
+    placement?: import("@heroui/aria-utils").OverlayPlacement | undefined;
     containerPadding?: number | undefined;
     crossOffset?: number | undefined;
     shouldFlip?: boolean | undefined;
@@ -305,8 +307,6 @@ declare const ExtendedTooltip: import("react").ForwardRefExoticComponent<Omit<{
     isTriggerDisabled?: boolean | undefined;
     motionProps?: Omit<import("framer-motion").HTMLMotionProps<"div">, "ref"> | undefined;
     portalContainer?: Element | undefined;
-    defaultOpen?: boolean | undefined;
-    onOpenChange?: ((isOpen: boolean) => void) | undefined;
     trigger?: "focus" | undefined;
     delay?: number | undefined;
     closeDelay?: number | undefined;

package/dist/components/UXTooltip/tooltip.extend.js

@@ -3,14 +3,20 @@ import { Tooltip } from "@heroui/tooltip";
 const ExtendedTooltip = extendVariants(Tooltip, {
     variants: {
         size: {
+            sm: {
+                content: '!p-sm max-w-[300px]'
+            },
             md: {
-                content: 'text-tiny leading-1.4 !p-md max-w-[300px] break-all hyphens-manual wrap-break-word'
+                content: '!p-md max-w-[300px]'
+            },
+            lg: {
+                content: '!p-lg max-w-[300px]'
             }
         },
         color: {
             default: {
                 base: 'before:bg-content1 before:shadow-box',
-                content: 'bg-content1 text-foreground-300 shadow-box'
+                content: 'bg-content1 text-foreground-300 shadow-box text-tiny leading-1.4 break-words wrap-break-word'
             }
         }
     },

package/dist/components/index.d.ts

@@ -15,10 +15,12 @@ export { default as ProgressWrapper } from './ProgressWrapper';
 export { default as Text } from './typography/Text';
 export type { TextProps } from './typography/Text.type';
 export * from './UXButton';
+export * from './UXCalendar';
 export { default as UXCheckbox } from './UXCheckbox';
 export * from './UXCheckbox';
 export type { UXChipProps } from './UXChip';
 export { default as UXChip } from './UXChip';
+export * from './UXDateRangePicker';
 export type { UXDividerProps } from './UXDivider';
 export { default as UXDivider } from './UXDivider';
 export * from './UXDropdown';

package/dist/components/index.js

@@ -20,7 +20,9 @@ import UXSwitch from "./UXSwitch/index.js";
 import UXTabs from "./UXTabs/index.js";
 import UXTooltip from "./UXTooltip/index.js";
 export * from "./UXButton/index.js";
+export * from "./UXCalendar/index.js";
 export * from "./UXCheckbox/index.js";
+export * from "./UXDateRangePicker/index.js";
 export * from "./UXDropdown/index.js";
 export * from "./UXEmpty/index.js";
 export * from "./UXInput/index.js";

package/dist/icons/index.d.ts

@@ -11,3 +11,4 @@ export declare const CircleQuestionIcon: React.FC<IconProps>;
 export declare const EmptyIcon: React.FC<IconProps>;
 export declare const ChevronRightIcon: React.FC<IconProps>;
 export declare const ChevronLeftIcon: React.FC<IconProps>;
+export declare const CalendarIcon: React.FC<IconProps>;

package/dist/icons/index.js

@@ -89,4 +89,21 @@ const ChevronLeftIcon = ({ size = 16, color = 'currentColor', ...props })=>/*#__
             fill: getColor(color)
         })
     });
-export { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CircleQuestionIcon, CloseIcon, EmptyIcon };
+const CalendarIcon = ({ size = 16, color = 'currentColor', ...props })=>/*#__PURE__*/ jsxs("svg", {
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                d: "M16.5557 2C16.895 2 17.1698 2.28823 17.1699 2.64355V3.86914H19.0664C20.0829 3.86914 20.9099 4.73498 20.9102 5.7998V18.6689C20.9102 19.7338 20.0829 20.5996 19.0664 20.5996H4.93359C3.91709 20.5996 3.08984 19.7338 3.08984 18.6689V5.7998C3.08992 4.73498 3.91714 3.86914 4.93359 3.86914H6.83008V2.64355C6.83018 2.28823 7.10497 2 7.44434 2C7.78365 2.00007 8.05849 2.28828 8.05859 2.64355V3.86914H15.9414V2.64355C15.9415 2.28828 16.2164 2.00008 16.5557 2ZM4.31934 10.2148V18.6689C4.31944 19.0238 4.59468 19.3125 4.93359 19.3125H19.0664C19.4051 19.3125 19.6808 19.0238 19.6807 18.6689V10.2148H4.31934ZM15.0254 14.0654C15.3784 14.0655 15.6648 14.3652 15.665 14.7354C15.665 15.1056 15.3787 15.4061 15.0254 15.4062H8.97461C8.62121 15.4062 8.33496 15.1056 8.33496 14.7354C8.33516 14.3652 8.62133 14.0655 8.97461 14.0654H15.0254ZM4.93359 5.15625C4.59488 5.15625 4.31941 5.44468 4.31934 5.7998V8.92676H19.6807V5.7998C19.6806 5.44468 19.4053 5.15625 19.0664 5.15625H17.1699V6.2959C17.1699 6.65154 16.8951 6.94043 16.5557 6.94043C16.2163 6.94035 15.9414 6.65126 15.9414 6.2959V5.15625H8.05859V6.2959C8.05859 6.65149 7.78371 6.94036 7.44434 6.94043C7.1049 6.94043 6.83008 6.65131 6.83008 6.2959V5.15625H4.93359Z",
+                fill: getColor(color)
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M16.5557 2V1.9H16.5556L16.5557 2ZM17.1699 2.64355H17.2699V2.64353L17.1699 2.64355ZM17.1699 3.86914H17.0699V3.96914H17.1699V3.86914ZM20.9102 5.7998H21.0102V5.79978L20.9102 5.7998ZM3.08984 5.7998L2.98984 5.7998V5.7998H3.08984ZM6.83008 3.86914V3.96914H6.93008V3.86914H6.83008ZM6.83008 2.64355L6.73008 2.64353V2.64355H6.83008ZM7.44434 2L7.44436 1.9H7.44434V2ZM8.05859 2.64355H8.15859V2.64353L8.05859 2.64355ZM8.05859 3.86914H7.95859V3.96914H8.05859V3.86914ZM15.9414 3.86914V3.96914H16.0414V3.86914H15.9414ZM15.9414 2.64355L15.8414 2.64353V2.64355H15.9414ZM4.31934 10.2148V10.1148H4.21934V10.2148H4.31934ZM4.31934 18.6689H4.21934V18.669L4.31934 18.6689ZM19.6807 18.6689H19.5807V18.669L19.6807 18.6689ZM19.6807 10.2148H19.7807V10.1148H19.6807V10.2148ZM15.0254 14.0654L15.0254 13.9654H15.0254V14.0654ZM15.665 14.7354H15.765V14.7353L15.665 14.7354ZM15.0254 15.4062V15.5063H15.0254L15.0254 15.4062ZM8.97461 15.4062L8.9746 15.5063H8.97461V15.4062ZM8.33496 14.7354L8.23496 14.7353V14.7354H8.33496ZM8.97461 14.0654V13.9654H8.9746L8.97461 14.0654ZM4.31934 5.7998L4.21934 5.79978V5.7998H4.31934ZM4.31934 8.92676H4.21934V9.02676H4.31934V8.92676ZM19.6807 8.92676V9.02676H19.7807V8.92676H19.6807ZM19.6807 5.7998H19.7807V5.79978L19.6807 5.7998ZM17.1699 5.15625V5.05625H17.0699V5.15625H17.1699ZM16.5557 6.94043L16.5556 7.04043H16.5557V6.94043ZM15.9414 5.15625H16.0414V5.05625H15.9414V5.15625ZM8.05859 5.15625V5.05625H7.95859V5.15625H8.05859ZM7.44434 6.94043V7.04043H7.44436L7.44434 6.94043ZM6.83008 5.15625H6.93008V5.05625H6.83008V5.15625ZM16.5557 2V2.1C16.8354 2.1 17.0698 2.33897 17.0699 2.64358L17.1699 2.64355L17.2699 2.64353C17.2698 2.23749 16.9547 1.9 16.5557 1.9V2ZM17.1699 2.64355H17.0699V3.86914H17.1699H17.2699V2.64355H17.1699ZM17.1699 3.86914V3.96914H19.0664V3.86914V3.76914H17.1699V3.86914ZM19.0664 3.86914V3.96914C20.0233 3.96914 20.8099 4.78581 20.8102 5.79983L20.9102 5.7998L21.0102 5.79978C21.0098 4.68414 20.1424 3.76914 19.0664 3.76914V3.86914ZM20.9102 5.7998H20.8102V18.6689H20.9102H21.0102V5.7998H20.9102ZM20.9102 18.6689H20.8102C20.8102 19.683 20.0234 20.4996 19.0664 20.4996V20.5996V20.6996C20.1424 20.6996 21.0102 19.7847 21.0102 18.6689H20.9102ZM19.0664 20.5996V20.4996H4.93359V20.5996V20.6996H19.0664V20.5996ZM4.93359 20.5996V20.4996C3.9766 20.4996 3.18984 19.683 3.18984 18.6689H3.08984H2.98984C2.98984 19.7847 3.85759 20.6996 4.93359 20.6996V20.5996ZM3.08984 18.6689H3.18984V5.7998H3.08984H2.98984V18.6689H3.08984ZM3.08984 5.7998L3.18984 5.79981C3.18992 4.78582 3.97665 3.96914 4.93359 3.96914V3.86914V3.76914C3.85763 3.76914 2.98992 4.68413 2.98984 5.7998L3.08984 5.7998ZM4.93359 3.86914V3.96914H6.83008V3.86914V3.76914H4.93359V3.86914ZM6.83008 3.86914H6.93008V2.64355H6.83008H6.73008V3.86914H6.83008ZM6.83008 2.64355L6.93008 2.64358C6.93017 2.33897 7.16458 2.1 7.44434 2.1V2V1.9C7.04535 1.9 6.7302 2.23749 6.73008 2.64353L6.83008 2.64355ZM7.44434 2L7.44431 2.1C7.72405 2.10006 7.95851 2.33904 7.95859 2.64358L8.05859 2.64355L8.15859 2.64353C8.15848 2.23751 7.84325 1.90008 7.44436 1.9L7.44434 2ZM8.05859 2.64355H7.95859V3.86914H8.05859H8.15859V2.64355H8.05859ZM8.05859 3.86914V3.96914H15.9414V3.86914V3.76914H8.05859V3.86914ZM15.9414 3.86914H16.0414V2.64355H15.9414H15.8414V3.86914H15.9414ZM15.9414 2.64355L16.0414 2.64358C16.0415 2.33905 16.276 2.10007 16.5557 2.1L16.5557 2L16.5556 1.9C16.1568 1.9001 15.8415 2.23751 15.8414 2.64353L15.9414 2.64355ZM4.31934 10.2148H4.21934V18.6689H4.31934H4.41934V10.2148H4.31934ZM4.31934 18.6689L4.21934 18.669C4.21946 19.0746 4.53506 19.4125 4.93359 19.4125V19.3125V19.2125C4.65429 19.2125 4.41943 18.9731 4.41934 18.6689L4.31934 18.6689ZM4.93359 19.3125V19.4125H19.0664V19.3125V19.2125H4.93359V19.3125ZM19.0664 19.3125V19.4125C19.4646 19.4125 19.7808 19.0746 19.7807 18.6689L19.6807 18.6689L19.5807 18.669C19.5808 18.973 19.3456 19.2125 19.0664 19.2125V19.3125ZM19.6807 18.6689H19.7807V10.2148H19.6807H19.5807V18.6689H19.6807ZM19.6807 10.2148V10.1148H4.31934V10.2148V10.3148H19.6807V10.2148ZM15.0254 14.0654L15.0254 14.1654C15.3189 14.1655 15.5649 14.4161 15.565 14.7354L15.665 14.7354L15.765 14.7353C15.7648 14.3144 15.438 13.9655 15.0254 13.9654L15.0254 14.0654ZM15.665 14.7354H15.565C15.565 15.0549 15.319 15.3061 15.0253 15.3062L15.0254 15.4062L15.0254 15.5063C15.4384 15.506 15.765 15.1562 15.765 14.7354H15.665ZM15.0254 15.4062V15.3062H8.97461V15.4062V15.5063H15.0254V15.4062ZM8.97461 15.4062L8.97462 15.3062C8.6809 15.3062 8.43496 15.055 8.43496 14.7354H8.33496H8.23496C8.23496 15.1563 8.56151 15.5062 8.9746 15.5063L8.97461 15.4062ZM8.33496 14.7354L8.43496 14.7354C8.43513 14.416 8.6809 14.1655 8.97462 14.1654L8.97461 14.0654L8.9746 13.9654C8.56176 13.9655 8.23519 14.3144 8.23496 14.7353L8.33496 14.7354ZM8.97461 14.0654V14.1654H15.0254V14.0654V13.9654H8.97461V14.0654ZM4.93359 5.15625V5.05625C4.53532 5.05625 4.21942 5.39388 4.21934 5.79978L4.31934 5.7998L4.41934 5.79983C4.4194 5.49548 4.65444 5.25625 4.93359 5.25625V5.15625ZM4.31934 5.7998H4.21934V8.92676H4.31934H4.41934V5.7998H4.31934ZM4.31934 8.92676V9.02676H19.6807V8.92676V8.82676H4.31934V8.92676ZM19.6807 8.92676H19.7807V5.7998H19.6807H19.5807V8.92676H19.6807ZM19.6807 5.7998L19.7807 5.79978C19.7806 5.39391 19.4649 5.05625 19.0664 5.05625V5.15625V5.25625C19.3458 5.25625 19.5806 5.49546 19.5807 5.79983L19.6807 5.7998ZM19.0664 5.15625V5.05625H17.1699V5.15625V5.25625H19.0664V5.15625ZM17.1699 5.15625H17.0699V6.2959H17.1699H17.2699V5.15625H17.1699ZM17.1699 6.2959H17.0699C17.0699 6.60095 16.8353 6.84043 16.5557 6.84043V6.94043V7.04043C16.9549 7.04043 17.2699 6.70213 17.2699 6.2959H17.1699ZM16.5557 6.94043L16.5557 6.84043C16.2761 6.84036 16.0414 6.60068 16.0414 6.2959H15.9414H15.8414C15.8414 6.70185 16.1565 7.04033 16.5556 7.04043L16.5557 6.94043ZM15.9414 6.2959H16.0414V5.15625H15.9414H15.8414V6.2959H15.9414ZM15.9414 5.15625V5.05625H8.05859V5.15625V5.25625H15.9414V5.15625ZM8.05859 5.15625H7.95859V6.2959H8.05859H8.15859V5.15625H8.05859ZM8.05859 6.2959H7.95859C7.95859 6.60089 7.72397 6.84037 7.44431 6.84043L7.44434 6.94043L7.44436 7.04043C7.84345 7.04035 8.15859 6.7021 8.15859 6.2959H8.05859ZM7.44434 6.94043V6.84043C7.16468 6.84043 6.93008 6.60075 6.93008 6.2959H6.83008H6.73008C6.73008 6.70188 7.04512 7.04043 7.44434 7.04043V6.94043ZM6.83008 6.2959H6.93008V5.15625H6.83008H6.73008V6.2959H6.83008ZM6.83008 5.15625V5.05625H4.93359V5.15625V5.25625H6.83008V5.15625Z",
+                fill: getColor(color)
+            })
+        ]
+    });
+export { CalendarIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CircleQuestionIcon, CloseIcon, EmptyIcon };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-react",
-  "version": "0.1.4-beta.0",
+  "version": "0.1.4-beta.11",
   "type": "module",
   "exports": {
     ".": {
@@ -39,8 +39,8 @@
     "@types/react": "^19.1.10",
     "react": "^19.1.0",
     "typescript": "^5.8.3",
-    "@particle-network/eslint-config": "0.3.0",
-    "@particle-network/lintstaged-config": "0.1.0"
+    "@particle-network/lintstaged-config": "0.1.0",
+    "@particle-network/eslint-config": "0.3.0"
   },
   "peerDependencies": {
     "react": ">=16.9.0",

package/tailwind-preset.js

@@ -124,6 +124,9 @@ module.exports = {
             content1: {
               DEFAULT: '#FFFFFF',
             },
+            overlay: {
+              DEFAULT: '#FFFFFF',
+            },
             background: {
               200: '#E8E8ED',
               300: '#F0F0F2',
@@ -149,7 +152,11 @@ module.exports = {
               foreground: '#FFFFFF',
             },
             secondary: {
-              DEFAULT: '#E8E8EB',
+              DEFAULT: '#767A80',
+              foreground: '#FFFFFF',
+            },
+            tertiary: {
+              DEFAULT: '#C0C0C9',
               foreground: '#000000',
             },
             success: {
@@ -175,6 +182,9 @@ module.exports = {
             content1: {
               DEFAULT: '#17171C',
             },
+            overlay: {
+              DEFAULT: '#17171C',
+            },
             background: {
               200: '#1F1F23',
               300: '#17171C',
@@ -200,7 +210,11 @@ module.exports = {
               foreground: '#FFFFFF',
             },
             secondary: {
-              DEFAULT: '#1F1F23',
+              DEFAULT: '#A1A1AA',
+              foreground: '#FFFFFF',
+            },
+            tertiary: {
+              DEFAULT: '#4E4E56',
               foreground: '#FFFFFF',
             },
             success: {