@namuna-nur/ui-kit 1.7.1 → 1.9.3

package/lib/src/molecules/CardStat/CardStat.types.d.ts

@@ -0,0 +1,29 @@
+import { StoryObj } from '@storybook/react-vite';
+import { CardStat } from '..';
+export type CardStatProps = {
+    title: string;
+    mode?: 'bid' | 'stat' | 'payment' | 'count';
+    data: {
+        total: number;
+        growth?: number;
+        physical?: number;
+        legal?: number;
+    };
+    settings?: {
+        chartColor?: string;
+        arrowDown?: boolean;
+        allWhite?: boolean;
+        icon?: React.ReactNode;
+    };
+    classNames?: {
+        container?: string;
+        total?: string;
+        title?: string;
+        growth?: string;
+        icon?: string;
+        totalBlock?: string;
+        badge?: string;
+        countBlock?: string;
+    };
+};
+export type CardStatStory = StoryObj<typeof CardStat>;

package/lib/src/molecules/CardStat/CardStat.utils.d.ts

@@ -0,0 +1,38 @@
+export declare const getChartSize: (mode: string) => {
+    width: number;
+    height: number;
+} | null;
+export declare const getChartOptions: (mode: string, color: string) => {
+    grid: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+    };
+    xAxis: {
+        type: string;
+        show: boolean;
+    };
+    yAxis: {
+        type: string;
+        show: boolean;
+        boundaryGap: boolean;
+    };
+    series: {
+        type: string;
+        smooth: number;
+        data: number[];
+        emphasis: {
+            disabled: boolean;
+        };
+        lineStyle: {
+            width: number;
+        };
+        symbol: string;
+        symbolSize: number;
+        itemStyle: {
+            borderWidth: number;
+        };
+        color: string;
+    }[];
+};

package/lib/src/molecules/CardStat/index.d.ts

@@ -0,0 +1,3 @@
+export { CardStat } from './CardStat';
+export * from './CardStat.tokens';
+export type * from './CardStat.types';

package/lib/src/molecules/CommentInput/CommentInput.tokens.d.ts

@@ -1,9 +1,2 @@
-export declare const commentInputTokens: {
-    parent: string;
-    base: string;
-    button: {
-        base: string;
-        disabled: string;
-        icon: string;
-    };
-};
+import { CommentInputTokens } from '..';
+export declare const commentInputTokens: CommentInputTokens;

package/lib/src/molecules/CommentInput/CommentInput.types.d.ts

@@ -4,6 +4,7 @@ import { CommentInput } from '..';
 export type CommentStory = StoryObj<typeof CommentInput>;
 export type CommentInputTokens = {
     parent: string;
+    wrapper: string;
     base: string;
     button: {
         base: string;
@@ -22,6 +23,7 @@ export type CommentInputProps = {
     };
     classNames?: {
         parent?: string;
+        wrapper?: string;
         target?: string;
         button?: string;
         icon?: string;

package/lib/src/molecules/DatePicker/DatePicker.d.ts

@@ -1,2 +1,2 @@
 import { DatePickerProps } from '..';
-export declare const DatePicker: ({ value, setValue, classNames, disabled, label, message, disabledDate, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DatePicker: ({ value, setValue, classNames, disabled, label, status, disabledDate, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;

package/lib/src/molecules/DatePicker/DatePicker.stories.d.ts

@@ -5,5 +5,5 @@ export declare const Default: StoryFn<DatePickerProps>;
 export declare const WithLabel: DatePickerStory;
 export declare const DisabledDate: DatePickerStory;
 export declare const Disabled: DatePickerStory;
-export declare const Error: DatePickerStory;
+export declare const Danger: DatePickerStory;
 export default meta;

package/lib/src/molecules/DatePicker/DatePicker.tokens.d.ts

@@ -10,6 +10,9 @@ export declare const datePickerTokens: {
         hover: string;
         pressed: string;
     };
+    status: {
+        danger: string;
+    };
     input: {
         base: string;
         disabled: string;
@@ -17,6 +20,9 @@ export declare const datePickerTokens: {
         hover: string;
         pressed: string;
     };
+    label: {
+        wrapper: string;
+    };
     calendarButton: {
         base: string;
         hover: string;
@@ -54,5 +60,4 @@ export declare const datePickerTokens: {
     line: string;
     saveButtonWrapper: string;
     saveButton: string;
-    message: string;
 };

package/lib/src/molecules/DatePicker/DatePicker.types.d.ts

@@ -2,12 +2,13 @@ import { StoryObj } from '@storybook/react';
 import { Dispatch, SetStateAction } from 'react';
 import { DatePicker } from './DatePicker';
 export type DatePickerStory = StoryObj<typeof DatePicker>;
+export type DatePickerStatus = 'success' | 'danger' | 'info';
 export type DatePickerProps = {
     value: string | undefined;
     setValue: Dispatch<SetStateAction<string | undefined>>;
     disabled?: boolean;
     label?: string;
-    message?: string;
+    status?: DatePickerStatus;
     disabledDate?: string;
     classNames?: {
         base?: string;

package/lib/src/molecules/DateRangePicker/DateRangePicker.stories.d.ts

@@ -5,3 +5,4 @@ export default meta;
 export declare const Default: DateRangePickerStory;
 export declare const WithLabel: DateRangePickerStory;
 export declare const Disabled: DateRangePickerStory;
+export declare const Danger: DateRangePickerStory;

package/lib/src/molecules/DateRangePicker/DateRangePicker.types.d.ts

@@ -3,10 +3,12 @@ import { Dispatch, SetStateAction } from 'react';
 import { DateRange } from 'react-day-picker';
 import { DateRangePicker } from './DateRangePicker';
 export type DateRangePickerStory = StoryObj<typeof DateRangePicker>;
+export type DateRangePickerStatus = 'danger' | 'info' | 'success';
 export type DateRangePickerProps = {
     value?: DateRange | undefined;
     setValue: Dispatch<SetStateAction<DateRange | undefined>>;
     label?: string;
+    status?: DateRangePickerStatus;
     disabled?: boolean;
     classNames?: {
         wrapper?: string;

package/lib/src/molecules/InputGroup/InputGroup.d.ts

@@ -1,2 +1,2 @@
-import { InputGroupProps } from './InputGroup.types';
+import { InputGroupProps } from '..';
 export declare const InputGroup: import('react').ForwardRefExoticComponent<InputGroupProps & import('react').RefAttributes<HTMLInputElement>>;

package/lib/src/molecules/InputGroup/InputGroup.stories.d.ts

@@ -5,7 +5,7 @@ export declare const Default: InputGroupStory;
 export declare const WithIconRight: InputGroupStory;
 export declare const WithIconLeft: InputGroupStory;
 export declare const Disabled: InputGroupStory;
-export declare const WithMessageError: InputGroupStory;
+export declare const WithMessageDanger: InputGroupStory;
 export declare const WithTextRight: InputGroupStory;
 export declare const WithTextLeft: InputGroupStory;
 export default meta;

package/lib/src/molecules/InputGroup/InputGroup.tokens.d.ts

@@ -22,12 +22,8 @@ export declare const inputGroupTokens: {
     container: string;
     icon: {
         base: string;
-        left: string;
-        right: string;
         disabled: string;
         clickable: string;
-        inputWithLeftIcon: string;
-        inputWithRightIcon: string;
         icon: string;
         text: string;
     };

package/lib/src/molecules/InputGroup/InputGroup.types.d.ts

@@ -1,10 +1,10 @@
 import { StoryObj } from '@storybook/react';
 import { FunctionComponent, SVGProps } from 'react';
 import { InputGroup } from './InputGroup';
-import { InputMessageType, InputProps } from '../../atoms';
+import { InputStatusType, InputProps } from '../../atoms';
 export type InputGroupStory = StoryObj<typeof InputGroup>;
 export type InputMessage = {
-    type: InputMessageType;
+    type: InputStatusType;
     text: string;
 };
 export type InputGroupProps = {

package/lib/src/molecules/MultiSelect/MultiSelect.stories.d.ts

@@ -3,5 +3,6 @@ import { MultiSelectStory, MultiSelect } from '..';
 declare const meta: Meta<typeof MultiSelect>;
 export declare const Default: MultiSelectStory;
 export declare const Disabled: MultiSelectStory;
+export declare const Danger: MultiSelectStory;
 export declare const NoSearch: MultiSelectStory;
 export default meta;

package/lib/src/molecules/MultiSelect/MultiSelect.types.d.ts

@@ -14,7 +14,7 @@ export type MultiSelectOption = {
 };
 export type MultiSelectTokens = {
     trigger: string;
-    label: string;
+    labelWrapper: string;
     text: string;
     hoverTrigger: string;
     focusTrigger: string;
@@ -39,12 +39,17 @@ export type MultiSelectTokens = {
         trigger: string;
         text: string;
     };
+    status: {
+        danger: string;
+    };
 };
+export type MultiSelectStatusType = 'success' | 'danger' | 'info';
 export type MultiSelectProps = {
     label?: string;
     disabled?: boolean;
     placeholder?: string;
     isSearchable?: boolean;
+    status: MultiSelectStatusType;
     options: MultiSelectOption[];
     selectedItems: MultiSelectOption[];
     setSelectedItems: Dispatch<SetStateAction<MultiSelectOption[]>>;

package/lib/src/molecules/PasswordInput/PasswordInput.stories.d.ts

@@ -8,5 +8,5 @@ export declare const FocusWithVisiblePassword: PasswordInputStory;
 export declare const FocusWithHiddenPassword: PasswordInputStory;
 export declare const FilledWithVisiblePassword: PasswordInputStory;
 export declare const FilledWithHiddenPassword: PasswordInputStory;
-export declare const Error: PasswordInputStory;
+export declare const Danger: PasswordInputStory;
 export default meta;

package/lib/src/molecules/PhoneInput/PhoneInput.stories.d.ts

@@ -5,6 +5,6 @@ declare const meta: Meta<typeof PhoneInput>;
 export declare const Default: PhoneInputStory;
 export declare const Focus: PhoneInputStory;
 export declare const Filled: PhoneInputStory;
-export declare const Error: PhoneInputStory;
 export declare const Disabled: PhoneInputStory;
+export declare const Danger: PhoneInputStory;
 export default meta;

package/lib/src/molecules/PhoneInput/PhoneInput.types.d.ts

@@ -2,10 +2,10 @@ import { StoryObj } from '@storybook/react';
 import { InputHTMLAttributes } from 'react';
 import { PhoneInput } from './PhoneInput';
 export type PhoneInputStory = StoryObj<typeof PhoneInput>;
-export type PhoneInputMessageType = 'danger';
+export type PhoneInputStatusType = 'danger';
 export type PhoneInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> & {
     value: string;
-    status?: PhoneInputMessageType;
+    status?: PhoneInputStatusType;
     message?: string;
     label?: string;
     onChange: (rawValue: string) => void;
@@ -22,6 +22,5 @@ export type PhoneInputTokens = {
     hover: string;
     focus: string;
     disabled: string;
-    variants: Record<PhoneInputMessageType, string>;
-    message: Record<PhoneInputMessageType, string>;
+    variants: Record<PhoneInputStatusType, string>;
 };

package/lib/src/molecules/Rating/Rating.d.ts

@@ -0,0 +1,2 @@
+import { RatingProps } from '..';
+export declare const Rating: React.FC<RatingProps>;

package/lib/src/molecules/Rating/Rating.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/react-vite';
+import { RatingStory, Rating } from '..';
+declare const meta: Meta<typeof Rating>;
+export declare const Default: RatingStory;
+export declare const PositionRight: RatingStory;
+export default meta;

package/lib/src/molecules/Rating/Rating.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/molecules/Rating/Rating.tokens.d.ts

@@ -0,0 +1,12 @@
+export declare const ratingTokens: {
+    root: string;
+    icon: string;
+    filled: string;
+    empty: string;
+    rating: string;
+    block: string;
+    overlay: {
+        block: string;
+        star: string;
+    };
+};

package/lib/src/molecules/Rating/Rating.types.d.ts

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/react-vite';
+import { Rating } from './Rating';
+export type RatingProps = {
+    rating: number;
+    position?: 'right' | 'left';
+    classNames?: {
+        root?: string;
+        rating?: string;
+        star?: string;
+        block?: string;
+    };
+};
+export type RatingStory = StoryObj<typeof Rating>;

package/lib/src/molecules/Rating/Rating.utils.d.ts

@@ -0,0 +1 @@
+export declare const getFillPercent: (index: number, rating: number) => number;

package/lib/src/molecules/Rating/index.d.ts

@@ -0,0 +1,3 @@
+export { Rating } from './Rating';
+export type * from './Rating.types';
+export * from './Rating.tokens';

package/lib/src/molecules/SelectGroup/SelectGroup.stories.d.ts

@@ -3,4 +3,5 @@ import { SelectGroup } from '..';
 type Story = StoryObj<typeof SelectGroup>;
 declare const meta: Meta<typeof SelectGroup>;
 export declare const Default: Story;
+export declare const Danger: Story;
 export default meta;

package/lib/src/molecules/SelectList/SelectList.types.d.ts

@@ -17,4 +17,10 @@ export type SelectListProps = {
     disabled?: boolean;
     isDotable?: boolean;
     label?: string;
+    title?: string;
+    handleCreateItem: (value: string) => void;
+    onSaveEdit?: (value: string, oldValue: string) => void;
+    options: SelectListOption[];
+    handleEditItem: (value: string) => void;
+    handleDeleteItem: (value: string) => void;
 };

package/lib/src/molecules/TextareaGroup/TextareaGroup.types.d.ts

@@ -4,6 +4,7 @@ import { TextareaProps, LabelProps } from '../../atoms';
 export type TextareaGroupStory = StoryObj<typeof TextareaGroup>;
 export type TextareaGroupTokens = {
     root: string;
+    labelWrapper: string;
 };
 export type TextareaGroupProps = {
     disabled?: boolean;

package/lib/src/molecules/UploadInput/UploadInput.d.ts

@@ -7,8 +7,7 @@ export declare const UploadInput: React.ForwardRefExoticComponent<Omit<Omit<Toog
     files: File | File[] | null;
     onChange: (files: File | File[] | null) => void;
     multiple?: boolean;
-    message?: string;
-    status?: "danger";
+    status?: import('..').UploadInputStatus;
     classNames?: {
         root?: string;
         label?: string;

package/lib/src/molecules/UploadInput/UploadInput.tokens.d.ts

@@ -5,13 +5,13 @@ export declare const uploadInputTokens: {
         pressed: string;
         hover: string;
     };
+    label: {
+        wrapper: string;
+    };
     placeholder: string;
     icon: string;
     list: string;
     status: {
         danger: string;
     };
-    message: {
-        danger: string;
-    };
 };

package/lib/src/molecules/UploadInput/UploadInput.types.d.ts

@@ -3,6 +3,7 @@ import { HTMLAttributes } from 'react';
 import { UploadInput } from './UploadInput';
 import type * as Toogle from '@radix-ui/react-toggle';
 export type UploadInputStory = StoryObj<typeof UploadInput>;
+export type UploadInputStatus = 'danger' | 'success' | 'warning';
 export type SelectedFile = {
     name: string;
     type: string;
@@ -15,8 +16,7 @@ export type UploadInputProps = Omit<React.ComponentPropsWithoutRef<typeof Toogle
     files: File | File[] | null;
     onChange: (files: File | File[] | null) => void;
     multiple?: boolean;
-    message?: string;
-    status?: 'danger';
+    status?: UploadInputStatus;
     classNames?: {
         root?: string;
         label?: string;

package/lib/src/molecules/index.d.ts

@@ -50,4 +50,9 @@ export * from './DeleteMessage';
 export * from './MessageSettings';
 export * from './TabList';
 export * from './FloorSelect';
-export * from './CardPie';
+export * from './CardPieChart';
+export * from './CardStat';
+export * from './CardMonthly';
+export * from './Rating';
+export * from './CardRingChart';
+export * from './CardProgress';

package/lib/src/utils/index.d.ts

@@ -1,2 +1,3 @@
 export * from './date';
 export * from './twMerge';
+export * from './numberFormat';

package/lib/src/utils/numberFormat.d.ts

@@ -0,0 +1 @@
+export declare const numberFormat: (n: number | string) => string;