@esic-lab/data-core-ui 0.0.56 → 0.0.57

package/dist/index.d.mts

@@ -0,0 +1,623 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import react, { ReactNode } from 'react';
+import * as antd_es_table_interface from 'antd/es/table/interface';
+import { ColumnsType, TableProps } from 'antd/es/table';
+import { EventSourceInput } from '@fullcalendar/core';
+import { InputNumberProps, SelectProps } from 'antd';
+import { Color } from 'antd/es/color-picker';
+import { MessageInstance } from 'antd/es/message/interface';
+import { ItemType } from 'antd/es/breadcrumb/Breadcrumb';
+import { ReactNode as ReactNode$1 } from '@tabler/icons-react';
+
+type ColorScale = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+type BaseColor = "primary" | "gray" | "green" | "red" | "yellow" | "blue";
+type ThemeColor = `bg-${BaseColor}-${ColorScale}`;
+interface PrimaryButtonProps {
+    title: string;
+    onClick: () => void;
+    iconLeft?: React.ReactNode;
+    iconRight?: React.ReactNode;
+    bgColor?: ThemeColor;
+    textColor?: "white" | "black";
+    disabled?: boolean;
+}
+declare function PrimaryButton({ title, onClick, iconLeft, iconRight, bgColor, textColor, disabled, }: PrimaryButtonProps): react_jsx_runtime.JSX.Element;
+
+interface SecondaryButtonProps {
+    title: string;
+    onClick: () => void;
+    iconLeft?: React.ReactNode;
+    iconRight?: React.ReactNode;
+    disabled?: boolean;
+}
+declare function SecondaryButton({ title, onClick, iconLeft, iconRight, disabled }: SecondaryButtonProps): react_jsx_runtime.JSX.Element;
+
+interface GhostButtonProps {
+    title: string;
+    onClick: () => void;
+    iconLeft?: React.ReactNode;
+    iconRight?: React.ReactNode;
+    disabled?: boolean;
+}
+declare function GhostButton({ title, onClick, iconLeft, iconRight, disabled }: GhostButtonProps): react_jsx_runtime.JSX.Element;
+
+interface Title {
+    path: string;
+    name: string;
+}
+interface ParamTabSelection {
+    title: Title[];
+    now: string;
+    onClickGoto: (path: string) => void;
+}
+declare const TabSelectionButton: ({ title, now, onClickGoto }: ParamTabSelection) => react_jsx_runtime.JSX.Element;
+
+interface LoaderProps {
+    size?: number;
+    color?: string;
+}
+declare function Loader({ size, color }: LoaderProps): react_jsx_runtime.JSX.Element;
+
+interface CheckboxProps {
+    label?: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+}
+declare function Checkbox({ label, checked, onChange, disabled }: CheckboxProps): react_jsx_runtime.JSX.Element;
+
+interface CheckboxOption {
+    checked: boolean;
+    label: string;
+    disabled?: boolean;
+}
+interface CheckboxGroupProps {
+    options: CheckboxOption[];
+    onChange: (label: string) => void;
+    alignment?: "horizontal" | "vertical";
+}
+declare function CheckboxGroup({ options, onChange, alignment }: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
+
+interface RadioProps {
+    selected: boolean;
+    onChange: (selected: boolean) => void;
+    disabled?: boolean;
+}
+declare function Radio({ selected, onChange, disabled }: RadioProps): react_jsx_runtime.JSX.Element;
+
+interface RadioOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface RadioGroupProps {
+    options: RadioOption[];
+    value: string;
+    onChange: (value: string) => void;
+    alignment?: "vertical" | "horizontal";
+}
+declare function RadioGroup({ options, value, onChange, alignment }: RadioGroupProps): react_jsx_runtime.JSX.Element;
+
+interface SwitchProps {
+    label?: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+}
+declare function Switch({ label, checked, onChange, disabled }: SwitchProps): react_jsx_runtime.JSX.Element;
+
+interface SwitchSelectProp {
+    option: {
+        value: string;
+        label: string;
+    }[];
+    value: string | number;
+    label: string;
+    color?: string;
+    required?: boolean;
+    onClick: (active: string) => void;
+}
+declare function SwitchSelect({ option, onClick, value, label, required, color, }: SwitchSelectProp): react_jsx_runtime.JSX.Element;
+
+interface Menu {
+    title: string;
+    subMenus: {
+        title: string;
+        icon?: React.ReactNode | React.ReactElement;
+        iconActive?: React.ReactNode | React.ReactElement;
+        path: string;
+        customNode?: React.ReactNode | React.ReactElement;
+    }[];
+}
+interface MenuNavBarProps {
+    menus: Menu[];
+    onClick: (path: string) => void;
+}
+declare function MenuNavBar({ menus, onClick }: MenuNavBarProps): react_jsx_runtime.JSX.Element;
+
+interface SidebarProps {
+    children: React.ReactNode;
+    logo?: string;
+}
+interface Sidebar {
+    icon: React.ReactNode;
+    iconHover?: React.ReactNode;
+    text: string;
+    disabled?: boolean;
+}
+declare function Sidebar({ children, logo }: SidebarProps): react_jsx_runtime.JSX.Element;
+
+interface TopNavBarProps {
+    onClickNoti: () => void;
+    logo?: React.ReactNode;
+}
+declare function TopNavBar({ onClickNoti, logo }: TopNavBarProps): react_jsx_runtime.JSX.Element;
+
+interface Column<T> {
+    header: string;
+    accessor: keyof T | ((row: T) => react.ReactNode);
+    sortable?: boolean;
+}
+interface DataTableProps<T> {
+    columns: Column<T>[];
+    data: T[];
+    onSort: () => void;
+    isLoading?: boolean;
+}
+declare function DataTable<T>({ columns, data, onSort, isLoading }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+
+interface AntDataTableProps<T> {
+    dataSource: T[];
+    columns: ColumnsType<T>;
+    pageSize?: number;
+    rowCheckbox?: boolean;
+    onRowSelect?: (newSelectedRowKeys: React.Key[]) => void;
+    onFilter: (filters: Record<string, antd_es_table_interface.FilterValue | null>) => void;
+    onChange?: TableProps<T>["onChange"];
+    width?: number;
+    height?: number;
+    pagination?: boolean;
+}
+declare function AntDataTable<T extends {
+    key: React.Key;
+}>({ dataSource, columns, pageSize, rowCheckbox, onRowSelect, onFilter, onChange, width, height, pagination, }: AntDataTableProps<T>): react_jsx_runtime.JSX.Element;
+
+interface CalendarProps {
+    events: EventSourceInput | undefined;
+}
+declare function Calendar({ events }: CalendarProps): react_jsx_runtime.JSX.Element;
+
+interface TextInputProps {
+    label?: string;
+    placeholder?: string;
+    type?: "text" | "password";
+    maxLength?: number;
+    required?: boolean;
+    error?: string;
+    value?: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+}
+declare function TextInput({ label, placeholder, type, maxLength, required, error, value, onChange, disabled, }: TextInputProps): react_jsx_runtime.JSX.Element;
+
+interface TextAreaProps {
+    label?: string;
+    height?: number;
+    placeholder?: string;
+    value: string;
+    onChange: (value: string) => void;
+    maxLength?: number;
+    resizable?: boolean;
+    showCount?: boolean;
+    required?: boolean;
+    error?: string;
+    disabled?: boolean;
+}
+declare function TextAreaInput({ label, height, placeholder, onChange, value, maxLength, resizable, showCount, required, error, disabled, }: TextAreaProps): react_jsx_runtime.JSX.Element;
+
+interface InputFieldProps {
+    value: string | undefined;
+    onChange: (value: string | undefined) => void;
+    placeholder?: string;
+    label?: string;
+    required?: boolean;
+    disabled?: boolean;
+    error?: string;
+    addonBefore?: ReactNode;
+    addonAfter?: ReactNode;
+    defaultValue?: string;
+    className?: string;
+    onClear?: () => void;
+    statickey?: string;
+}
+declare function InputField({ value, onChange, placeholder, label, required, disabled, error, addonBefore, addonAfter, defaultValue, className, onClear, statickey, }: InputFieldProps): react_jsx_runtime.JSX.Element;
+
+interface InputFieldNumberProps {
+    value: number | string | null;
+    onChange: (value: number | string | null) => void;
+    placeholder?: string;
+    label?: string;
+    required?: boolean;
+    disabled?: boolean;
+    error?: string;
+    addonBefore?: React.ReactNode;
+    addonAfter?: React.ReactNode;
+    defaultValue?: number;
+    className?: string;
+    max?: number;
+    min?: number;
+    controls?: boolean | {
+        upIcon?: React.ReactNode;
+        downIcon?: React.ReactNode;
+    };
+    size?: "large" | "middle" | "small";
+    changeOnWheel?: boolean;
+    formatter?: InputNumberProps["formatter"];
+    parser?: InputNumberProps["parser"];
+}
+declare function InputFieldNumber({ value, onChange, placeholder, label, required, disabled, error, addonBefore, addonAfter, defaultValue, className, max, min, controls, size, changeOnWheel, formatter, parser, }: InputFieldNumberProps): react_jsx_runtime.JSX.Element;
+
+interface DatePickerBasicProps {
+    value: Date | null;
+    onChange: (day: Date | null) => void;
+    required?: boolean;
+    label?: string;
+    error?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    defaultValue?: Date | null;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDate?: (currentDate: Date) => boolean;
+    disablePast?: boolean;
+    className?: string;
+    size?: "small" | "middle" | "large";
+}
+declare function DatePickerBasic({ value, onChange, label, required, error, disabled, placeholder, minDate, maxDate, disabledDate, disablePast, }: DatePickerBasicProps): react_jsx_runtime.JSX.Element;
+
+interface DatePickerRangeProps {
+    value: [Date | null, Date | null];
+    onChange: (range: [Date | null, Date | null]) => void;
+    required?: boolean;
+    label?: string;
+    error?: string;
+    disabled?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDate?: (currentDate: Date) => boolean;
+    disablePast?: boolean;
+    className?: string;
+}
+declare function DatePickerRange({ value, onChange, label, required, error, disabled, minDate, maxDate, disabledDate, disablePast, }: DatePickerRangeProps): react_jsx_runtime.JSX.Element;
+
+interface ColorPickerProps {
+    value: string | null;
+    onChange?: (color: Color, hex: string) => void;
+    required?: boolean;
+    label?: string;
+    error?: string;
+    disabled?: boolean;
+    allowClear?: boolean;
+    defaultFormat?: "hex" | "rgb" | "hsb";
+    className?: string;
+    placeholder?: string;
+}
+declare function ColorPickerBasic({ value, onChange, required, label, error, disabled, allowClear, defaultFormat, className, placeholder, }: ColorPickerProps): react_jsx_runtime.JSX.Element;
+
+interface ColorPalettePickerBasicProps {
+    value: string | null;
+    onChange?: (color: Color, hex: string) => void;
+    required?: boolean;
+    label?: string;
+    error?: string;
+    disabled?: boolean;
+    allowClear?: boolean;
+    defaultFormat?: "hex" | "rgb" | "hsb";
+    className?: string;
+    placeholder?: string;
+    onClear?: () => void;
+}
+declare function ColorPalettePickerBasic({ value, onChange, required, label, error, disabled, allowClear, defaultFormat, className, placeholder, onClear, }: ColorPalettePickerBasicProps): react_jsx_runtime.JSX.Element;
+
+interface SelectFieldProps$1 {
+    value?: SelectProps["value"];
+    onChange: (value: SelectProps["value"]) => void;
+    placeholder?: string;
+    label?: string;
+    required?: boolean;
+    error?: string;
+    disabled?: boolean;
+    defaultValue?: string;
+    options?: {
+        label: ReactNode;
+        value: string | number | null;
+        disabled?: boolean;
+    }[];
+    mode?: "multiple" | "tags";
+    handleSearch?: (value: string) => void;
+    prefix?: ReactNode;
+    prefixSize?: number;
+    className?: string;
+    onClear?: () => void;
+}
+declare function SelectField({ value, onChange, placeholder, label, required, error, disabled, defaultValue, options, mode, prefix, prefixSize, handleSearch, className, onClear, }: SelectFieldProps$1): react_jsx_runtime.JSX.Element;
+
+interface SelectFieldProps {
+    value?: SelectProps["value"];
+    onChange: (value: SelectProps["value"]) => void;
+    placeholder?: string;
+    label?: string;
+    required?: boolean;
+    error?: string;
+    disabled?: boolean;
+    defaultValue?: string;
+    options?: {
+        label: ReactNode;
+        options: {
+            label: ReactNode;
+            value: string | number;
+            disabled?: boolean;
+        }[];
+    }[];
+    mode?: "multiple" | "tags";
+    handleSearch?: (value: string) => void;
+    prefix?: ReactNode;
+    prefixSize?: number;
+    className?: string;
+}
+declare function SelectFieldGroup({ value, onChange, placeholder, label, required, error, disabled, defaultValue, options, mode, prefix, prefixSize, handleSearch, className, }: SelectFieldProps): react_jsx_runtime.JSX.Element;
+
+interface SelectFieldStatusProps {
+    value: string | undefined;
+    onChange: (value: string | undefined) => void;
+    placeholder?: string;
+    label?: string;
+    required?: boolean;
+    disabled?: boolean;
+    error?: string;
+    options?: {
+        label: ReactNode;
+        value: string | number | null;
+        disabled?: boolean;
+    }[];
+    className?: string;
+}
+declare function SelectFieldStatus({ value, onChange, placeholder, label, required, disabled, error, options, className, }: SelectFieldStatusProps): react_jsx_runtime.JSX.Element;
+
+interface SelectFieldStatusReportProps {
+    value: string | undefined;
+    onChange: (value: string | undefined) => void;
+    placeholder?: string;
+    label?: string;
+    required?: boolean;
+    disabled?: boolean;
+    error?: string;
+    className?: string;
+    options?: {
+        label: ReactNode;
+        value: string | number | null;
+        disabled?: boolean;
+    }[];
+}
+declare function SelectFieldStatusReport({ value, onChange, placeholder, label, required, disabled, error, className, options, }: SelectFieldStatusReportProps): react_jsx_runtime.JSX.Element;
+
+interface SelectFieldTagProps {
+    label?: string | null;
+    required?: boolean;
+    placeholder?: string;
+    options?: {
+        label: ReactNode;
+        value: string | number | null;
+        disabled?: boolean;
+    }[];
+    error?: string;
+    value?: string[];
+    onChange?: (val: string[]) => void;
+    className?: string;
+    onClear?: () => void;
+}
+declare function SelectFieldTag({ label, required, placeholder, options, error, value: controlledValue, className, onChange, onClear, }: SelectFieldTagProps): react_jsx_runtime.JSX.Element;
+
+interface OptionItem {
+    value: string;
+    label: string;
+}
+interface SelectCustomProps {
+    label?: string;
+    placeholder?: string;
+    options: OptionItem[];
+    required?: boolean;
+    onChange?: (valueList: string[]) => void;
+    error?: string;
+    onClear?: () => void;
+}
+declare function SelectCustom({ label, placeholder, options, required, onChange, error, onClear, }: SelectCustomProps): react_jsx_runtime.JSX.Element;
+
+interface SortFilterProps {
+    showYear?: boolean;
+    showQuarter?: boolean;
+    showMonth?: boolean;
+    onSortClick?: () => void;
+    onFilterClick?: () => void;
+}
+declare function SortFilter({ showYear, showQuarter, showMonth, onSortClick, onFilterClick, }: SortFilterProps): react_jsx_runtime.JSX.Element;
+
+interface FileUploaderProps {
+    onUpload: (file: any) => Promise<void>;
+    onRemove?: (index: number) => Promise<void>;
+    onError?: (message: string) => void;
+    onClickFile?: (file: any) => void;
+    accept?: string[];
+    maxSize?: number;
+    disabled?: boolean;
+    mode: "upload" | "drop";
+    description?: string;
+    label?: string;
+    value?: File[] | any[];
+    uploadText?: string;
+    uploaderWidth?: string;
+    attachWidth?: string;
+    readOnly?: boolean;
+}
+declare function FileUploader({ onUpload, onError, onRemove, onClickFile, accept, maxSize, disabled, mode, description, label, value, uploadText, uploaderWidth, attachWidth, readOnly, }: FileUploaderProps): react_jsx_runtime.JSX.Element;
+
+declare function setMessageApi(api: MessageInstance): void;
+declare function messageSuccess(content: string): void;
+declare function messageError(content: string): void;
+declare function messageWarning(content: string): void;
+declare function messageInfo(content: string): void;
+declare function messageLoading(content: string, duration?: number): void;
+
+interface BreadcrumbsProps {
+    items: ItemType[];
+    separator: ReactNode;
+    itemRender?: (route: any, params: any, routes: any[], paths: string[]) => ReactNode;
+    classname?: string;
+    params?: object;
+}
+declare function Breadcrumbs({ items, separator, itemRender, classname, params, }: BreadcrumbsProps): react_jsx_runtime.JSX.Element;
+
+interface HeadingPageProps {
+    Heading: string;
+}
+declare function HeadingPage({ Heading }: HeadingPageProps): react_jsx_runtime.JSX.Element;
+
+interface ProgressBarProps {
+    percent: number | undefined;
+    size?: number | [number | string, number] | {
+        width: number;
+        height: number;
+    } | "small" | "default";
+    checkpoints?: number[] | undefined;
+    showInfo?: boolean;
+    trailColor?: string;
+    type: "line" | "circle" | "dashboard";
+    strokeLinecap?: "round" | "butt" | "square";
+    strokeWidth?: number;
+    steps?: number;
+    isCheckPoints?: boolean;
+}
+declare function ProgressBar({ percent, size, checkpoints, showInfo, trailColor, type, strokeLinecap, strokeWidth, steps, isCheckPoints, }: ProgressBarProps): react_jsx_runtime.JSX.Element;
+
+interface KpiNumberItem {
+    id: string;
+    name: string;
+    value: string;
+    unit: string;
+    isEditing?: boolean;
+}
+
+interface KpiSectionProps {
+    type: "number" | "text";
+    onChangeKpiList?: (data: KpiNumberItem[]) => void;
+}
+declare function KpiSection({ type, onChangeKpiList }: KpiSectionProps): react_jsx_runtime.JSX.Element;
+
+interface ModalProps {
+    children: ReactNode;
+    isOpen: boolean;
+    width?: string | number;
+    onCancel: () => void;
+}
+declare function AntDModal({ children, isOpen, width, onCancel }: ModalProps): react_jsx_runtime.JSX.Element;
+
+interface IndicatorProps {
+    option?: {
+        value: string;
+        label: string;
+    }[];
+    type: "OUTPUT" | "OUTCOME";
+    arrayData: IndicatorArray[];
+    canEdit?: boolean;
+    setArrayData: (data: IndicatorArray[]) => void;
+    onDeleteClick?: (payload: {
+        index: number;
+        item: IndicatorArray;
+        confirm: () => void;
+    }) => void;
+}
+interface IndicatorArray {
+    indicatorType: "OUTPUT" | "OUTCOME";
+    inputType: "TEXT" | "NUMBER";
+    textValue: string;
+    numberValue?: number;
+    unit?: string;
+}
+declare function Indicator({ option, type, arrayData, setArrayData, canEdit, onDeleteClick, }: IndicatorProps): react_jsx_runtime.JSX.Element;
+
+interface optionSelect {
+    value: string;
+    label: string;
+}
+declare const FilterPopUp: (filter: {
+    selectionFilter: optionSelect[];
+    handleSearch: (listFiler: string[]) => void;
+}) => react_jsx_runtime.JSX.Element;
+
+interface UserData {
+    id: string;
+    name: string;
+    profile: string;
+}
+interface ProfileSelectProp {
+    allUser: UserData[];
+    assignUser: UserData[];
+    mode: "show" | "showAssign" | "icon";
+    className?: string;
+    onUpdateAssignUser: (user: UserData, action?: "add" | "remove") => void;
+}
+declare function ProfileSelect({ allUser, assignUser, mode, className, onUpdateAssignUser, }: ProfileSelectProp): react_jsx_runtime.JSX.Element;
+
+interface QRCodeGeneratorProps {
+    url: string;
+    previewSize?: number;
+    defaultExportSize?: number;
+    fileBaseName?: string;
+}
+declare const QRCodeGenerator: react.FC<QRCodeGeneratorProps>;
+
+interface TabProjectProp {
+    tabOption: {
+        key: string;
+        label: string;
+        icon: ReactNode$1;
+    }[];
+    projectId: string;
+    now: string;
+    onChange: (key: string) => void;
+}
+declare function TabProject({ tabOption, now, onChange }: TabProjectProp): react_jsx_runtime.JSX.Element;
+
+type Datum = {
+    x: string;
+    y: number;
+};
+type Props = {
+    data: Datum[];
+    height?: number;
+    margin?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    yLabel?: string;
+    xLabel?: string;
+    colorPalette?: string[];
+};
+declare const BarChart: ({ data, height, margin, yLabel, xLabel, colorPalette, }: Props) => react_jsx_runtime.JSX.Element;
+
+interface PieChartProps {
+    title?: string;
+    description?: string;
+    data: {
+        label: string;
+        value: number;
+    }[];
+    width: number;
+    height: number;
+    colorPalette?: string[];
+}
+declare const PieChart: react.FC<PieChartProps>;
+
+export { AntDModal, AntDataTable, BarChart, Breadcrumbs, Calendar, Checkbox, CheckboxGroup, ColorPalettePickerBasic, ColorPickerBasic, DataTable, DatePickerBasic, DatePickerRange, FileUploader, FilterPopUp, GhostButton, HeadingPage, Indicator, InputField, InputFieldNumber, KpiSection, Loader, MenuNavBar, type MenuNavBarProps, PieChart, PrimaryButton, ProfileSelect, ProgressBar, QRCodeGenerator, Radio, RadioGroup, SecondaryButton, SelectCustom, SelectField, SelectFieldGroup, SelectFieldStatus, SelectFieldStatusReport, SelectFieldTag, Sidebar, SortFilter, Switch, SwitchSelect, TabProject, TabSelectionButton, TextAreaInput, TextInput, TopNavBar, messageError, messageInfo, messageLoading, messageSuccess, messageWarning, setMessageApi };

package/dist/index.d.ts

@@ -0,0 +1,623 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import react, { ReactNode } from 'react';
+import * as antd_es_table_interface from 'antd/es/table/interface';
+import { ColumnsType, TableProps } from 'antd/es/table';
+import { EventSourceInput } from '@fullcalendar/core';
+import { InputNumberProps, SelectProps } from 'antd';
+import { Color } from 'antd/es/color-picker';
+import { MessageInstance } from 'antd/es/message/interface';
+import { ItemType } from 'antd/es/breadcrumb/Breadcrumb';
+import { ReactNode as ReactNode$1 } from '@tabler/icons-react';
+
+type ColorScale = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+type BaseColor = "primary" | "gray" | "green" | "red" | "yellow" | "blue";
+type ThemeColor = `bg-${BaseColor}-${ColorScale}`;
+interface PrimaryButtonProps {
+    title: string;
+    onClick: () => void;
+    iconLeft?: React.ReactNode;
+    iconRight?: React.ReactNode;
+    bgColor?: ThemeColor;
+    textColor?: "white" | "black";
+    disabled?: boolean;
+}
+declare function PrimaryButton({ title, onClick, iconLeft, iconRight, bgColor, textColor, disabled, }: PrimaryButtonProps): react_jsx_runtime.JSX.Element;
+
+interface SecondaryButtonProps {
+    title: string;
+    onClick: () => void;
+    iconLeft?: React.ReactNode;
+    iconRight?: React.ReactNode;
+    disabled?: boolean;
+}
+declare function SecondaryButton({ title, onClick, iconLeft, iconRight, disabled }: SecondaryButtonProps): react_jsx_runtime.JSX.Element;
+
+interface GhostButtonProps {
+    title: string;
+    onClick: () => void;
+    iconLeft?: React.ReactNode;
+    iconRight?: React.ReactNode;
+    disabled?: boolean;
+}
+declare function GhostButton({ title, onClick, iconLeft, iconRight, disabled }: GhostButtonProps): react_jsx_runtime.JSX.Element;
+
+interface Title {
+    path: string;
+    name: string;
+}
+interface ParamTabSelection {
+    title: Title[];
+    now: string;
+    onClickGoto: (path: string) => void;
+}
+declare const TabSelectionButton: ({ title, now, onClickGoto }: ParamTabSelection) => react_jsx_runtime.JSX.Element;
+
+interface LoaderProps {
+    size?: number;
+    color?: string;
+}
+declare function Loader({ size, color }: LoaderProps): react_jsx_runtime.JSX.Element;
+
+interface CheckboxProps {
+    label?: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+}
+declare function Checkbox({ label, checked, onChange, disabled }: CheckboxProps): react_jsx_runtime.JSX.Element;
+
+interface CheckboxOption {
+    checked: boolean;
+    label: string;
+    disabled?: boolean;
+}
+interface CheckboxGroupProps {
+    options: CheckboxOption[];
+    onChange: (label: string) => void;
+    alignment?: "horizontal" | "vertical";
+}
+declare function CheckboxGroup({ options, onChange, alignment }: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
+
+interface RadioProps {
+    selected: boolean;
+    onChange: (selected: boolean) => void;
+    disabled?: boolean;
+}
+declare function Radio({ selected, onChange, disabled }: RadioProps): react_jsx_runtime.JSX.Element;
+
+interface RadioOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface RadioGroupProps {
+    options: RadioOption[];
+    value: string;
+    onChange: (value: string) => void;
+    alignment?: "vertical" | "horizontal";
+}
+declare function RadioGroup({ options, value, onChange, alignment }: RadioGroupProps): react_jsx_runtime.JSX.Element;
+
+interface SwitchProps {
+    label?: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+}
+declare function Switch({ label, checked, onChange, disabled }: SwitchProps): react_jsx_runtime.JSX.Element;
+
+interface SwitchSelectProp {
+    option: {
+        value: string;
+        label: string;
+    }[];
+    value: string | number;
+    label: string;
+    color?: string;
+    required?: boolean;
+    onClick: (active: string) => void;
+}
+declare function SwitchSelect({ option, onClick, value, label, required, color, }: SwitchSelectProp): react_jsx_runtime.JSX.Element;
+
+interface Menu {
+    title: string;
+    subMenus: {
+        title: string;
+        icon?: React.ReactNode | React.ReactElement;
+        iconActive?: React.ReactNode | React.ReactElement;
+        path: string;
+        customNode?: React.ReactNode | React.ReactElement;
+    }[];
+}
+interface MenuNavBarProps {
+    menus: Menu[];
+    onClick: (path: string) => void;
+}
+declare function MenuNavBar({ menus, onClick }: MenuNavBarProps): react_jsx_runtime.JSX.Element;
+
+interface SidebarProps {
+    children: React.ReactNode;
+    logo?: string;
+}
+interface Sidebar {
+    icon: React.ReactNode;
+    iconHover?: React.ReactNode;
+    text: string;
+    disabled?: boolean;
+}
+declare function Sidebar({ children, logo }: SidebarProps): react_jsx_runtime.JSX.Element;
+
+interface TopNavBarProps {
+    onClickNoti: () => void;
+    logo?: React.ReactNode;
+}
+declare function TopNavBar({ onClickNoti, logo }: TopNavBarProps): react_jsx_runtime.JSX.Element;
+
+interface Column<T> {
+    header: string;
+    accessor: keyof T | ((row: T) => react.ReactNode);
+    sortable?: boolean;
+}
+interface DataTableProps<T> {
+    columns: Column<T>[];
+    data: T[];
+    onSort: () => void;
+    isLoading?: boolean;
+}
+declare function DataTable<T>({ columns, data, onSort, isLoading }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+
+interface AntDataTableProps<T> {
+    dataSource: T[];
+    columns: ColumnsType<T>;
+    pageSize?: number;
+    rowCheckbox?: boolean;
+    onRowSelect?: (newSelectedRowKeys: React.Key[]) => void;
+    onFilter: (filters: Record<string, antd_es_table_interface.FilterValue | null>) => void;
+    onChange?: TableProps<T>["onChange"];
+    width?: number;
+    height?: number;
+    pagination?: boolean;
+}
+declare function AntDataTable<T extends {
+    key: React.Key;
+}>({ dataSource, columns, pageSize, rowCheckbox, onRowSelect, onFilter, onChange, width, height, pagination, }: AntDataTableProps<T>): react_jsx_runtime.JSX.Element;
+
+interface CalendarProps {
+    events: EventSourceInput | undefined;
+}
+declare function Calendar({ events }: CalendarProps): react_jsx_runtime.JSX.Element;
+
+interface TextInputProps {
+    label?: string;
+    placeholder?: string;
+    type?: "text" | "password";
+    maxLength?: number;
+    required?: boolean;
+    error?: string;
+    value?: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+}
+declare function TextInput({ label, placeholder, type, maxLength, required, error, value, onChange, disabled, }: TextInputProps): react_jsx_runtime.JSX.Element;
+
+interface TextAreaProps {
+    label?: string;
+    height?: number;
+    placeholder?: string;
+    value: string;
+    onChange: (value: string) => void;
+    maxLength?: number;
+    resizable?: boolean;
+    showCount?: boolean;
+    required?: boolean;
+    error?: string;
+    disabled?: boolean;
+}
+declare function TextAreaInput({ label, height, placeholder, onChange, value, maxLength, resizable, showCount, required, error, disabled, }: TextAreaProps): react_jsx_runtime.JSX.Element;
+
+interface InputFieldProps {
+    value: string | undefined;
+    onChange: (value: string | undefined) => void;
+    placeholder?: string;
+    label?: string;
+    required?: boolean;
+    disabled?: boolean;
+    error?: string;
+    addonBefore?: ReactNode;
+    addonAfter?: ReactNode;
+    defaultValue?: string;
+    className?: string;
+    onClear?: () => void;
+    statickey?: string;
+}
+declare function InputField({ value, onChange, placeholder, label, required, disabled, error, addonBefore, addonAfter, defaultValue, className, onClear, statickey, }: InputFieldProps): react_jsx_runtime.JSX.Element;
+
+interface InputFieldNumberProps {
+    value: number | string | null;
+    onChange: (value: number | string | null) => void;
+    placeholder?: string;
+    label?: string;
+    required?: boolean;
+    disabled?: boolean;
+    error?: string;
+    addonBefore?: React.ReactNode;
+    addonAfter?: React.ReactNode;
+    defaultValue?: number;
+    className?: string;
+    max?: number;
+    min?: number;
+    controls?: boolean | {
+        upIcon?: React.ReactNode;
+        downIcon?: React.ReactNode;
+    };
+    size?: "large" | "middle" | "small";
+    changeOnWheel?: boolean;
+    formatter?: InputNumberProps["formatter"];
+    parser?: InputNumberProps["parser"];
+}
+declare function InputFieldNumber({ value, onChange, placeholder, label, required, disabled, error, addonBefore, addonAfter, defaultValue, className, max, min, controls, size, changeOnWheel, formatter, parser, }: InputFieldNumberProps): react_jsx_runtime.JSX.Element;
+
+interface DatePickerBasicProps {
+    value: Date | null;
+    onChange: (day: Date | null) => void;
+    required?: boolean;
+    label?: string;
+    error?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    defaultValue?: Date | null;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDate?: (currentDate: Date) => boolean;
+    disablePast?: boolean;
+    className?: string;
+    size?: "small" | "middle" | "large";
+}
+declare function DatePickerBasic({ value, onChange, label, required, error, disabled, placeholder, minDate, maxDate, disabledDate, disablePast, }: DatePickerBasicProps): react_jsx_runtime.JSX.Element;
+
+interface DatePickerRangeProps {
+    value: [Date | null, Date | null];
+    onChange: (range: [Date | null, Date | null]) => void;
+    required?: boolean;
+    label?: string;
+    error?: string;
+    disabled?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDate?: (currentDate: Date) => boolean;
+    disablePast?: boolean;
+    className?: string;
+}
+declare function DatePickerRange({ value, onChange, label, required, error, disabled, minDate, maxDate, disabledDate, disablePast, }: DatePickerRangeProps): react_jsx_runtime.JSX.Element;
+
+interface ColorPickerProps {
+    value: string | null;
+    onChange?: (color: Color, hex: string) => void;
+    required?: boolean;
+    label?: string;
+    error?: string;
+    disabled?: boolean;
+    allowClear?: boolean;
+    defaultFormat?: "hex" | "rgb" | "hsb";
+    className?: string;
+    placeholder?: string;
+}
+declare function ColorPickerBasic({ value, onChange, required, label, error, disabled, allowClear, defaultFormat, className, placeholder, }: ColorPickerProps): react_jsx_runtime.JSX.Element;
+
+interface ColorPalettePickerBasicProps {
+    value: string | null;
+    onChange?: (color: Color, hex: string) => void;
+    required?: boolean;
+    label?: string;
+    error?: string;
+    disabled?: boolean;
+    allowClear?: boolean;
+    defaultFormat?: "hex" | "rgb" | "hsb";
+    className?: string;
+    placeholder?: string;
+    onClear?: () => void;
+}
+declare function ColorPalettePickerBasic({ value, onChange, required, label, error, disabled, allowClear, defaultFormat, className, placeholder, onClear, }: ColorPalettePickerBasicProps): react_jsx_runtime.JSX.Element;
+
+interface SelectFieldProps$1 {
+    value?: SelectProps["value"];
+    onChange: (value: SelectProps["value"]) => void;
+    placeholder?: string;
+    label?: string;
+    required?: boolean;
+    error?: string;
+    disabled?: boolean;
+    defaultValue?: string;
+    options?: {
+        label: ReactNode;
+        value: string | number | null;
+        disabled?: boolean;
+    }[];
+    mode?: "multiple" | "tags";
+    handleSearch?: (value: string) => void;
+    prefix?: ReactNode;
+    prefixSize?: number;
+    className?: string;
+    onClear?: () => void;
+}
+declare function SelectField({ value, onChange, placeholder, label, required, error, disabled, defaultValue, options, mode, prefix, prefixSize, handleSearch, className, onClear, }: SelectFieldProps$1): react_jsx_runtime.JSX.Element;
+
+interface SelectFieldProps {
+    value?: SelectProps["value"];
+    onChange: (value: SelectProps["value"]) => void;
+    placeholder?: string;
+    label?: string;
+    required?: boolean;
+    error?: string;
+    disabled?: boolean;
+    defaultValue?: string;
+    options?: {
+        label: ReactNode;
+        options: {
+            label: ReactNode;
+            value: string | number;
+            disabled?: boolean;
+        }[];
+    }[];
+    mode?: "multiple" | "tags";
+    handleSearch?: (value: string) => void;
+    prefix?: ReactNode;
+    prefixSize?: number;
+    className?: string;
+}
+declare function SelectFieldGroup({ value, onChange, placeholder, label, required, error, disabled, defaultValue, options, mode, prefix, prefixSize, handleSearch, className, }: SelectFieldProps): react_jsx_runtime.JSX.Element;
+
+interface SelectFieldStatusProps {
+    value: string | undefined;
+    onChange: (value: string | undefined) => void;
+    placeholder?: string;
+    label?: string;
+    required?: boolean;
+    disabled?: boolean;
+    error?: string;
+    options?: {
+        label: ReactNode;
+        value: string | number | null;
+        disabled?: boolean;
+    }[];
+    className?: string;
+}
+declare function SelectFieldStatus({ value, onChange, placeholder, label, required, disabled, error, options, className, }: SelectFieldStatusProps): react_jsx_runtime.JSX.Element;
+
+interface SelectFieldStatusReportProps {
+    value: string | undefined;
+    onChange: (value: string | undefined) => void;
+    placeholder?: string;
+    label?: string;
+    required?: boolean;
+    disabled?: boolean;
+    error?: string;
+    className?: string;
+    options?: {
+        label: ReactNode;
+        value: string | number | null;
+        disabled?: boolean;
+    }[];
+}
+declare function SelectFieldStatusReport({ value, onChange, placeholder, label, required, disabled, error, className, options, }: SelectFieldStatusReportProps): react_jsx_runtime.JSX.Element;
+
+interface SelectFieldTagProps {
+    label?: string | null;
+    required?: boolean;
+    placeholder?: string;
+    options?: {
+        label: ReactNode;
+        value: string | number | null;
+        disabled?: boolean;
+    }[];
+    error?: string;
+    value?: string[];
+    onChange?: (val: string[]) => void;
+    className?: string;
+    onClear?: () => void;
+}
+declare function SelectFieldTag({ label, required, placeholder, options, error, value: controlledValue, className, onChange, onClear, }: SelectFieldTagProps): react_jsx_runtime.JSX.Element;
+
+interface OptionItem {
+    value: string;
+    label: string;
+}
+interface SelectCustomProps {
+    label?: string;
+    placeholder?: string;
+    options: OptionItem[];
+    required?: boolean;
+    onChange?: (valueList: string[]) => void;
+    error?: string;
+    onClear?: () => void;
+}
+declare function SelectCustom({ label, placeholder, options, required, onChange, error, onClear, }: SelectCustomProps): react_jsx_runtime.JSX.Element;
+
+interface SortFilterProps {
+    showYear?: boolean;
+    showQuarter?: boolean;
+    showMonth?: boolean;
+    onSortClick?: () => void;
+    onFilterClick?: () => void;
+}
+declare function SortFilter({ showYear, showQuarter, showMonth, onSortClick, onFilterClick, }: SortFilterProps): react_jsx_runtime.JSX.Element;
+
+interface FileUploaderProps {
+    onUpload: (file: any) => Promise<void>;
+    onRemove?: (index: number) => Promise<void>;
+    onError?: (message: string) => void;
+    onClickFile?: (file: any) => void;
+    accept?: string[];
+    maxSize?: number;
+    disabled?: boolean;
+    mode: "upload" | "drop";
+    description?: string;
+    label?: string;
+    value?: File[] | any[];
+    uploadText?: string;
+    uploaderWidth?: string;
+    attachWidth?: string;
+    readOnly?: boolean;
+}
+declare function FileUploader({ onUpload, onError, onRemove, onClickFile, accept, maxSize, disabled, mode, description, label, value, uploadText, uploaderWidth, attachWidth, readOnly, }: FileUploaderProps): react_jsx_runtime.JSX.Element;
+
+declare function setMessageApi(api: MessageInstance): void;
+declare function messageSuccess(content: string): void;
+declare function messageError(content: string): void;
+declare function messageWarning(content: string): void;
+declare function messageInfo(content: string): void;
+declare function messageLoading(content: string, duration?: number): void;
+
+interface BreadcrumbsProps {
+    items: ItemType[];
+    separator: ReactNode;
+    itemRender?: (route: any, params: any, routes: any[], paths: string[]) => ReactNode;
+    classname?: string;
+    params?: object;
+}
+declare function Breadcrumbs({ items, separator, itemRender, classname, params, }: BreadcrumbsProps): react_jsx_runtime.JSX.Element;
+
+interface HeadingPageProps {
+    Heading: string;
+}
+declare function HeadingPage({ Heading }: HeadingPageProps): react_jsx_runtime.JSX.Element;
+
+interface ProgressBarProps {
+    percent: number | undefined;
+    size?: number | [number | string, number] | {
+        width: number;
+        height: number;
+    } | "small" | "default";
+    checkpoints?: number[] | undefined;
+    showInfo?: boolean;
+    trailColor?: string;
+    type: "line" | "circle" | "dashboard";
+    strokeLinecap?: "round" | "butt" | "square";
+    strokeWidth?: number;
+    steps?: number;
+    isCheckPoints?: boolean;
+}
+declare function ProgressBar({ percent, size, checkpoints, showInfo, trailColor, type, strokeLinecap, strokeWidth, steps, isCheckPoints, }: ProgressBarProps): react_jsx_runtime.JSX.Element;
+
+interface KpiNumberItem {
+    id: string;
+    name: string;
+    value: string;
+    unit: string;
+    isEditing?: boolean;
+}
+
+interface KpiSectionProps {
+    type: "number" | "text";
+    onChangeKpiList?: (data: KpiNumberItem[]) => void;
+}
+declare function KpiSection({ type, onChangeKpiList }: KpiSectionProps): react_jsx_runtime.JSX.Element;
+
+interface ModalProps {
+    children: ReactNode;
+    isOpen: boolean;
+    width?: string | number;
+    onCancel: () => void;
+}
+declare function AntDModal({ children, isOpen, width, onCancel }: ModalProps): react_jsx_runtime.JSX.Element;
+
+interface IndicatorProps {
+    option?: {
+        value: string;
+        label: string;
+    }[];
+    type: "OUTPUT" | "OUTCOME";
+    arrayData: IndicatorArray[];
+    canEdit?: boolean;
+    setArrayData: (data: IndicatorArray[]) => void;
+    onDeleteClick?: (payload: {
+        index: number;
+        item: IndicatorArray;
+        confirm: () => void;
+    }) => void;
+}
+interface IndicatorArray {
+    indicatorType: "OUTPUT" | "OUTCOME";
+    inputType: "TEXT" | "NUMBER";
+    textValue: string;
+    numberValue?: number;
+    unit?: string;
+}
+declare function Indicator({ option, type, arrayData, setArrayData, canEdit, onDeleteClick, }: IndicatorProps): react_jsx_runtime.JSX.Element;
+
+interface optionSelect {
+    value: string;
+    label: string;
+}
+declare const FilterPopUp: (filter: {
+    selectionFilter: optionSelect[];
+    handleSearch: (listFiler: string[]) => void;
+}) => react_jsx_runtime.JSX.Element;
+
+interface UserData {
+    id: string;
+    name: string;
+    profile: string;
+}
+interface ProfileSelectProp {
+    allUser: UserData[];
+    assignUser: UserData[];
+    mode: "show" | "showAssign" | "icon";
+    className?: string;
+    onUpdateAssignUser: (user: UserData, action?: "add" | "remove") => void;
+}
+declare function ProfileSelect({ allUser, assignUser, mode, className, onUpdateAssignUser, }: ProfileSelectProp): react_jsx_runtime.JSX.Element;
+
+interface QRCodeGeneratorProps {
+    url: string;
+    previewSize?: number;
+    defaultExportSize?: number;
+    fileBaseName?: string;
+}
+declare const QRCodeGenerator: react.FC<QRCodeGeneratorProps>;
+
+interface TabProjectProp {
+    tabOption: {
+        key: string;
+        label: string;
+        icon: ReactNode$1;
+    }[];
+    projectId: string;
+    now: string;
+    onChange: (key: string) => void;
+}
+declare function TabProject({ tabOption, now, onChange }: TabProjectProp): react_jsx_runtime.JSX.Element;
+
+type Datum = {
+    x: string;
+    y: number;
+};
+type Props = {
+    data: Datum[];
+    height?: number;
+    margin?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    yLabel?: string;
+    xLabel?: string;
+    colorPalette?: string[];
+};
+declare const BarChart: ({ data, height, margin, yLabel, xLabel, colorPalette, }: Props) => react_jsx_runtime.JSX.Element;
+
+interface PieChartProps {
+    title?: string;
+    description?: string;
+    data: {
+        label: string;
+        value: number;
+    }[];
+    width: number;
+    height: number;
+    colorPalette?: string[];
+}
+declare const PieChart: react.FC<PieChartProps>;
+
+export { AntDModal, AntDataTable, BarChart, Breadcrumbs, Calendar, Checkbox, CheckboxGroup, ColorPalettePickerBasic, ColorPickerBasic, DataTable, DatePickerBasic, DatePickerRange, FileUploader, FilterPopUp, GhostButton, HeadingPage, Indicator, InputField, InputFieldNumber, KpiSection, Loader, MenuNavBar, type MenuNavBarProps, PieChart, PrimaryButton, ProfileSelect, ProgressBar, QRCodeGenerator, Radio, RadioGroup, SecondaryButton, SelectCustom, SelectField, SelectFieldGroup, SelectFieldStatus, SelectFieldStatusReport, SelectFieldTag, Sidebar, SortFilter, Switch, SwitchSelect, TabProject, TabSelectionButton, TextAreaInput, TextInput, TopNavBar, messageError, messageInfo, messageLoading, messageSuccess, messageWarning, setMessageApi };

package/dist/index.js

@@ -4588,11 +4588,32 @@ var BarChart = ({
       (enter) => enter.append("text").attr("class", "x-axis-label").attr("fill", "currentColor").attr("x", width).attr("y", height - margin.bottom).attr("text-anchor", "middle").style("font-size", "14px").style("font-family", "Arial").text((d) => d),
       (update) => update.text((d) => d).attr("x", width)
     );
-    const t = svg.transition().duration(400);
+    const t = d3.transition().duration(400);
     const bars = g.selectAll("rect.bar").data(data, (d) => d.x);
     bars.join(
-      (enter) => enter.append("rect").attr("class", "bar").attr("x", (d) => margin.left).attr("width", x.bandwidth()).attr("y", () => margin.top + y(0)).attr("height", () => innerH - y(0)).attr("rx", 5).attr("ry", 5).style("fill", (d, i) => colorPalette[i % colorPalette.length]).append("title").text((d) => `${d.x}: ${d.y}`).merge(bars).attr("width", x.bandwidth()).attr("y", (d) => y(d.y)).attr("height", (d) => innerH - y(d.y)).call((enter2) => enter2.raise()),
-      // Bring the new bars to the front
+      // (enter) =>
+      //   enter
+      //     .append("rect")
+      //     .attr("class", "bar")
+      //     .attr("x", (d) => margin.left)
+      //     .attr("width", x.bandwidth())
+      //     .attr("y", () => margin.top + y(0))
+      //     .attr("height", () => innerH - y(0))
+      //     .attr("rx", 5) // rounded corners
+      //     .attr("ry", 5) // rounded corners
+      //     .style("fill", (d, i) => colorPalette[i % colorPalette.length]) // Apply color based on index
+      //     .append("title")
+      //     .text((d) => `${d.x}: ${d.y}`)
+      //     .merge(bars) // merge the existing bars after joining
+      //     .attr("width", x.bandwidth())
+      //     .attr("y", (d) => y(d.y))
+      //     .attr("height", (d) => innerH - y(d.y))
+      //     .call((enter) => enter.raise()), // Bring the new bars to the front
+      (enter) => {
+        const rects = enter.append("rect").attr("class", "bar").attr("x", (d) => margin.left).attr("width", x.bandwidth()).attr("y", () => margin.top + y(0)).attr("height", () => innerH - y(0)).attr("rx", 5).attr("ry", 5).style("fill", (d, i) => colorPalette[i % colorPalette.length]);
+        rects.append("title").text((d) => `${d.x}: ${d.y}`);
+        return rects.merge(bars).attr("width", x.bandwidth()).attr("y", (d) => y(d.y)).attr("height", (d) => innerH - y(d.y)).call((g2) => g2.raise());
+      },
       (update) => update.call((update2) => update2.raise()).transition(t).attr("x", (d) => x(d.x) ?? 0).attr("width", x.bandwidth()).attr("y", (d) => y(d.y)).attr("height", (d) => innerH - y(d.y)).style("fill", (d, i) => colorPalette[i % colorPalette.length]),
       // Update color on update
       (exit) => exit.transition(t).attr("y", margin.top + y(0)).attr("height", innerH - y(0)).remove()

package/dist/index.mjs

@@ -4531,11 +4531,32 @@ var BarChart = ({
       (enter) => enter.append("text").attr("class", "x-axis-label").attr("fill", "currentColor").attr("x", width).attr("y", height - margin.bottom).attr("text-anchor", "middle").style("font-size", "14px").style("font-family", "Arial").text((d) => d),
       (update) => update.text((d) => d).attr("x", width)
     );
-    const t = svg.transition().duration(400);
+    const t = d3.transition().duration(400);
     const bars = g.selectAll("rect.bar").data(data, (d) => d.x);
     bars.join(
-      (enter) => enter.append("rect").attr("class", "bar").attr("x", (d) => margin.left).attr("width", x.bandwidth()).attr("y", () => margin.top + y(0)).attr("height", () => innerH - y(0)).attr("rx", 5).attr("ry", 5).style("fill", (d, i) => colorPalette[i % colorPalette.length]).append("title").text((d) => `${d.x}: ${d.y}`).merge(bars).attr("width", x.bandwidth()).attr("y", (d) => y(d.y)).attr("height", (d) => innerH - y(d.y)).call((enter2) => enter2.raise()),
-      // Bring the new bars to the front
+      // (enter) =>
+      //   enter
+      //     .append("rect")
+      //     .attr("class", "bar")
+      //     .attr("x", (d) => margin.left)
+      //     .attr("width", x.bandwidth())
+      //     .attr("y", () => margin.top + y(0))
+      //     .attr("height", () => innerH - y(0))
+      //     .attr("rx", 5) // rounded corners
+      //     .attr("ry", 5) // rounded corners
+      //     .style("fill", (d, i) => colorPalette[i % colorPalette.length]) // Apply color based on index
+      //     .append("title")
+      //     .text((d) => `${d.x}: ${d.y}`)
+      //     .merge(bars) // merge the existing bars after joining
+      //     .attr("width", x.bandwidth())
+      //     .attr("y", (d) => y(d.y))
+      //     .attr("height", (d) => innerH - y(d.y))
+      //     .call((enter) => enter.raise()), // Bring the new bars to the front
+      (enter) => {
+        const rects = enter.append("rect").attr("class", "bar").attr("x", (d) => margin.left).attr("width", x.bandwidth()).attr("y", () => margin.top + y(0)).attr("height", () => innerH - y(0)).attr("rx", 5).attr("ry", 5).style("fill", (d, i) => colorPalette[i % colorPalette.length]);
+        rects.append("title").text((d) => `${d.x}: ${d.y}`);
+        return rects.merge(bars).attr("width", x.bandwidth()).attr("y", (d) => y(d.y)).attr("height", (d) => innerH - y(d.y)).call((g2) => g2.raise());
+      },
       (update) => update.call((update2) => update2.raise()).transition(t).attr("x", (d) => x(d.x) ?? 0).attr("width", x.bandwidth()).attr("y", (d) => y(d.y)).attr("height", (d) => innerH - y(d.y)).style("fill", (d, i) => colorPalette[i % colorPalette.length]),
       // Update color on update
       (exit) => exit.transition(t).attr("y", margin.top + y(0)).attr("height", innerH - y(0)).remove()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esic-lab/data-core-ui",
-  "version": "0.0.56",
+  "version": "0.0.57",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -41,8 +41,7 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "build": "tsup src/index.ts --format esm,cjs --out-dir dist && npm run copy-assets",
-    "build:dts": "tsup src/index.ts --dts --dts-resolve --out-dir dist",
+    "build": "tsup src/index.ts --dts --dts-resolve --format esm,cjs --out-dir dist && npm run copy-assets",
     "copy-assets": "xcopy src\\assets dist\\assets /E /I /Y",
     "type-check": "tsc --noEmit"
   },