bianic-ui 0.5.16 → 0.5.18

package/dist/esm/types/components/TagLabel/configs.d.ts

@@ -9,7 +9,7 @@ import TbCloseAbleGraySmall from './Small/TbCloseAbleGraySmall';
 import TbCloseable from './Medium/TbCloseable';
 declare const TagLabelConfig: {
     default: {
-        medium: {
+        md: {
             iconColor: string;
             XColor: string;
             XcolorV: string;
@@ -35,7 +35,7 @@ declare const TagLabelConfig: {
                 Xicon: typeof TbCheckBlack;
             };
         };
-        small: {
+        sm: {
             iconColor: string;
             XColor: string;
             XcolorV: string;
@@ -61,7 +61,7 @@ declare const TagLabelConfig: {
                 Xicon: typeof TbCheckBlackSmall;
             };
         };
-        tiny: {
+        tn: {
             iconColor: string;
             XColor: string;
             XcolorV: string;
@@ -89,7 +89,7 @@ declare const TagLabelConfig: {
         };
     };
     blue: {
-        medium: {
+        md: {
             iconColor: string;
             XColor: string;
             XcolorV: string;
@@ -115,7 +115,7 @@ declare const TagLabelConfig: {
                 Xicon: typeof TbCheck;
             };
         };
-        small: {
+        sm: {
             iconColor: string;
             XColor: string;
             XcolorV: string;
@@ -141,7 +141,7 @@ declare const TagLabelConfig: {
                 Xicon: typeof TbCheckWhiteSmall;
             };
         };
-        tiny: {
+        tn: {
             iconColor: string;
             XColor: string;
             XcolorV: string;
@@ -169,7 +169,7 @@ declare const TagLabelConfig: {
         };
     };
     teal: {
-        medium: {
+        md: {
             iconColor: string;
             XColor: string;
             XcolorV: string;
@@ -195,7 +195,7 @@ declare const TagLabelConfig: {
                 Xicon: typeof TbCheck;
             };
         };
-        small: {
+        sm: {
             iconColor: string;
             XColor: string;
             XcolorV: string;
@@ -221,7 +221,7 @@ declare const TagLabelConfig: {
                 Xicon: typeof TbCheckWhiteSmall;
             };
         };
-        tiny: {
+        tn: {
             iconColor: string;
             XColor: string;
             XcolorV: string;
@@ -249,7 +249,7 @@ declare const TagLabelConfig: {
         };
     };
     green: {
-        medium: {
+        md: {
             iconColor: string;
             XColor: string;
             XcolorV: string;
@@ -275,7 +275,7 @@ declare const TagLabelConfig: {
                 Xicon: typeof TbCheck;
             };
         };
-        small: {
+        sm: {
             iconColor: string;
             XColor: string;
             XcolorV: string;
@@ -301,7 +301,7 @@ declare const TagLabelConfig: {
                 Xicon: typeof TbCheckWhiteSmall;
             };
         };
-        tiny: {
+        tn: {
             iconColor: string;
             XColor: string;
             XcolorV: string;
@@ -329,7 +329,7 @@ declare const TagLabelConfig: {
         };
     };
     yellow: {
-        medium: {
+        md: {
             iconColor: string;
             XColor: string;
             XcolorV: string;
@@ -355,7 +355,7 @@ declare const TagLabelConfig: {
                 Xicon: typeof TbCheck;
             };
         };
-        small: {
+        sm: {
             iconColor: string;
             XColor: string;
             XcolorV: string;
@@ -381,7 +381,7 @@ declare const TagLabelConfig: {
                 Xicon: typeof TbCheckWhiteSmall;
             };
         };
-        tiny: {
+        tn: {
             iconColor: string;
             XColor: string;
             XcolorV: string;
@@ -409,7 +409,7 @@ declare const TagLabelConfig: {
         };
     };
     red: {
-        medium: {
+        md: {
             iconColor: string;
             XColor: string;
             XcolorV: string;
@@ -435,7 +435,7 @@ declare const TagLabelConfig: {
                 Xicon: typeof TbCheck;
             };
         };
-        small: {
+        sm: {
             iconColor: string;
             XColor: string;
             XcolorV: string;
@@ -461,7 +461,7 @@ declare const TagLabelConfig: {
                 Xicon: typeof TbCheckWhiteSmall;
             };
         };
-        tiny: {
+        tn: {
             iconColor: string;
             XColor: string;
             XcolorV: string;
@@ -489,7 +489,7 @@ declare const TagLabelConfig: {
         };
     };
     black: {
-        medium: {
+        md: {
             iconColor: string;
             XColor: string;
             XcolorV: string;
@@ -515,7 +515,7 @@ declare const TagLabelConfig: {
                 Xicon: typeof TbCheck;
             };
         };
-        small: {
+        sm: {
             iconColor: string;
             XColor: string;
             XcolorV: string;
@@ -541,7 +541,7 @@ declare const TagLabelConfig: {
                 Xicon: typeof TbCheckWhiteSmall;
             };
         };
-        tiny: {
+        tn: {
             iconColor: string;
             XColor: string;
             XcolorV: string;
@@ -569,7 +569,7 @@ declare const TagLabelConfig: {
         };
     };
     white: {
-        medium: {
+        md: {
             iconColor: string;
             XColor: string;
             XcolorV: string;
@@ -595,7 +595,7 @@ declare const TagLabelConfig: {
                 Xicon: typeof TbCheckBlack;
             };
         };
-        small: {
+        sm: {
             iconColor: string;
             XColor: string;
             XcolorV: string;
@@ -621,7 +621,7 @@ declare const TagLabelConfig: {
                 Xicon: typeof TbCheckBlackSmall;
             };
         };
-        tiny: {
+        tn: {
             iconColor: string;
             XColor: string;
             XcolorV: string;

package/dist/esm/types/components/TagLabel/index.d.ts

@@ -1,7 +1,7 @@
 import React, { ComponentPropsWithoutRef } from 'react';
 interface TagLabelProps extends ComponentPropsWithoutRef<'div'> {
     color: 'default' | 'blue' | 'teal' | 'green' | 'yellow' | 'red' | 'black' | 'white';
-    size?: 'medium' | 'small' | 'tiny';
+    size?: 'md' | 'sm' | 'tn';
     variant?: 'label' | 'icon' | 'closeable';
     closeHandler?: () => void;
     isShow?: boolean;

package/dist/esm/types/stories/Button.stories.d.ts

@@ -26,3 +26,7 @@ export declare const InfoOutlined: Story;
 export declare const PrimaryOutlined: Story;
 export declare const SuccessOutlined: Story;
 export declare const WarningOutlined: Story;
+export declare const DemoWithIconLeft: Story;
+export declare const DemoWithIconRight: Story;
+export declare const DemoWithIconBoth: Story;
+export declare const DemoWithIconOnly: Story;

package/dist/index.d.ts

@@ -23,7 +23,7 @@ declare namespace Alert {
 }
 
 interface AvatarProps extends ComponentPropsWithoutRef<'div'> {
-    size: 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
     variant: 'image' | 'picture' | 'initial';
     name?: string;
 }
@@ -31,6 +31,7 @@ declare function Avatar({ size, variant, name }: AvatarProps): React.JSX.Element
 declare namespace Avatar {
     var defaultProps: {
         name: string;
+        size: string;
     };
 }
 
@@ -70,12 +71,12 @@ declare function Brand({ variant, brand }: BrandProps): React.JSX.Element;
 
 interface BreadcrumbProps extends ComponentPropsWithoutRef<'button'> {
     disabled: boolean;
-    isActive?: boolean;
+    selected?: boolean;
 }
-declare function Breadcrumb({ disabled, isActive, children, onClick, ...rest }: BreadcrumbProps): React.JSX.Element;
+declare function Breadcrumb({ disabled, selected, children, onClick, ...rest }: BreadcrumbProps): React.JSX.Element;
 declare namespace Breadcrumb {
     var defaultProps: {
-        isActive: boolean;
+        selected: boolean;
     };
 }
 
@@ -86,7 +87,7 @@ interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
     iconLeft?: React.ReactNode;
     label?: string;
     radius?: 'default' | 'full-rounded';
-    size?: 'large' | 'medium' | 'small' | 'tiny';
+    size?: 'lg' | 'md' | 'sm' | 'tn';
     variant?: 'default' | 'danger' | 'info' | 'link' | 'primary' | 'subtle' | 'subtle-link' | 'success' | 'warning' | 'default-outlined' | 'danger-outlined' | 'info-outlined' | 'primary-outlined' | 'success-outlined' | 'warning-outlined';
 }
 declare function Button({ label, className, disabled, radius, size, variant, iconLeft, iconRight, ...props }: ButtonProps): React.JSX.Element;
@@ -116,12 +117,12 @@ declare namespace Divider {
     };
 }
 
-interface TextInputProps extends ComponentPropsWithoutRef<'input'> {
+interface TextInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {
     descText?: string;
     isDisabled?: boolean;
     icon?: React.ReactNode;
     id?: string;
-    inputSize?: 'medium' | 'small';
+    size?: 'md' | 'sm';
     isValid?: boolean | null;
     label?: string;
     placeholder?: string;
@@ -130,14 +131,14 @@ interface TextInputProps extends ComponentPropsWithoutRef<'input'> {
     value?: string;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
 }
-declare function TextInput({ descText, isDisabled, icon, id, inputSize, isValid, label, placeholder, readOnly, required, variant, value, onChange, }: TextInputProps): React.JSX.Element;
+declare function TextInput({ descText, isDisabled, icon, id, size, isValid, label, placeholder, readOnly, required, variant, value, onChange, }: TextInputProps): React.JSX.Element;
 declare namespace TextInput {
     var defaultProps: {
         descText: string;
         isDisabled: boolean;
         icon: null;
         id: string;
-        inputSize: string;
+        size: string;
         isValid: null;
         label: string;
         placeholder: string;
@@ -149,7 +150,7 @@ declare namespace TextInput {
 }
 
 interface TextInputSimulationProps {
-    size?: 'medium' | 'small';
+    size?: 'md' | 'sm';
 }
 declare function TextInputSimulation({ size }: TextInputSimulationProps): React.JSX.Element;
 declare namespace TextInputSimulation {
@@ -158,23 +159,23 @@ declare namespace TextInputSimulation {
     };
 }
 
-interface RadioProps extends ComponentPropsWithoutRef<'input'> {
+interface RadioProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {
     label?: string;
-    inputSize?: 'medium' | 'small';
+    size?: 'md' | 'sm';
     id?: string;
     onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
     isDisabled?: boolean;
-    isChecked?: boolean;
+    checked?: boolean;
 }
-declare function Radio({ label, inputSize, id, onClick, isDisabled, isChecked, }: RadioProps): React.JSX.Element;
+declare function Radio({ label, size, id, onClick, isDisabled, checked, }: RadioProps): React.JSX.Element;
 declare namespace Radio {
     var defaultProps: {
         label: string;
-        inputSize: string;
+        size: string;
         id: string;
         onClick: () => void;
         isDisabled: boolean;
-        isChecked: boolean;
+        checked: boolean;
     };
 }
 
@@ -182,19 +183,19 @@ interface TextAreaProps extends ComponentPropsWithoutRef<'textarea'> {
     descText?: string;
     disabled?: boolean;
     id?: string;
-    inputSize?: 'medium' | 'small';
+    size?: 'md' | 'sm';
     label?: string;
     placeholder?: string;
     required?: boolean;
     rows?: number;
 }
-declare function TextArea({ descText, disabled, id, inputSize, label, placeholder, required, rows, ...props }: TextAreaProps): React.JSX.Element;
+declare function TextArea({ descText, disabled, id, size, label, placeholder, required, rows, ...props }: TextAreaProps): React.JSX.Element;
 declare namespace TextArea {
     var defaultProps: {
         disabled: boolean;
         descText: string;
         id: string;
-        inputSize: string;
+        size: string;
         label: string;
         placeholder: string;
         required: boolean;
@@ -202,29 +203,29 @@ declare namespace TextArea {
     };
 }
 
-interface CheckboxProps$1 extends ComponentPropsWithoutRef<'input'> {
+interface CheckboxProps$1 extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {
     disabled?: boolean;
     id?: string;
-    inputSize?: 'medium' | 'small';
-    isChecked?: boolean;
+    size?: 'md' | 'sm';
+    checked?: boolean;
     label?: string;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     value: string | number | readonly string[] | undefined;
 }
-declare function Checkbox({ disabled, id, inputSize, isChecked, label, onChange, value, }: CheckboxProps$1): React.JSX.Element;
+declare function Checkbox({ disabled, id, size, checked, label, onChange, value, }: CheckboxProps$1): React.JSX.Element;
 declare namespace Checkbox {
     var defaultProps: {
         disabled: boolean;
         id: string;
-        inputSize: string;
-        isChecked: boolean;
+        size: string;
+        checked: boolean;
         label: string;
         onChange: () => void;
     };
 }
 
 interface CheckboxSimulationProps {
-    size?: 'medium' | 'small';
+    size?: 'md' | 'sm';
 }
 declare function CheckboxSimulation({ size }: CheckboxSimulationProps): React.JSX.Element;
 declare namespace CheckboxSimulation {
@@ -233,11 +234,11 @@ declare namespace CheckboxSimulation {
     };
 }
 
-interface SelectInputProps extends ComponentPropsWithoutRef<'input'> {
+interface SelectInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {
     descText?: string;
     isDisabled?: boolean;
     id?: string;
-    inputSize?: 'medium' | 'small';
+    size?: 'md' | 'sm';
     label?: string;
     options: any;
     isRequired?: boolean;
@@ -247,13 +248,13 @@ interface SelectInputProps extends ComponentPropsWithoutRef<'input'> {
     };
     setSelected?: any;
 }
-declare function SelectInput({ descText, isDisabled, inputSize, id, label, options, isRequired, selected, setSelected, }: SelectInputProps): React.JSX.Element;
+declare function SelectInput({ descText, isDisabled, size, id, label, options, isRequired, selected, setSelected, }: SelectInputProps): React.JSX.Element;
 declare namespace SelectInput {
     var defaultProps: {
         descText: string;
         isDisabled: boolean;
         id: string;
-        inputSize: string;
+        size: string;
         label: string;
         isRequired: boolean;
         selected: {};
@@ -262,15 +263,15 @@ declare namespace SelectInput {
 }
 
 interface SelectInputSimulationProps {
-    size: 'medium' | 'small';
+    size: 'md' | 'sm';
 }
 declare function SelectInputSimulation({ size, }: SelectInputSimulationProps): React.JSX.Element;
 
-interface LiveSearchProps extends ComponentPropsWithoutRef<'input'> {
+interface LiveSearchProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {
     descText?: string;
     disabled?: boolean;
     id?: string;
-    inputSize?: 'medium' | 'small';
+    size?: 'md' | 'sm';
     label?: string;
     placeholder?: string;
     required?: boolean;
@@ -278,13 +279,13 @@ interface LiveSearchProps extends ComponentPropsWithoutRef<'input'> {
     setValue?: any;
     value?: any;
 }
-declare function LiveSearch({ descText, disabled, id, inputSize, label, placeholder, required, options, setValue, value, }: LiveSearchProps): React.JSX.Element;
+declare function LiveSearch({ descText, disabled, id, size, label, placeholder, required, options, setValue, value, }: LiveSearchProps): React.JSX.Element;
 declare namespace LiveSearch {
     var defaultProps: {
         descText: string;
         disabled: boolean;
         id: string;
-        inputSize: string;
+        size: string;
         label: string;
         placeholder: string;
         required: boolean;
@@ -294,46 +295,46 @@ declare namespace LiveSearch {
     };
 }
 
-interface CheckboxProps extends ComponentPropsWithoutRef<'input'> {
+interface CheckboxProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {
     label?: string;
-    inputSize?: 'medium' | 'small';
-    isChecked?: boolean;
+    size?: 'md' | 'sm';
+    checked?: boolean;
     id?: string;
     onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
     disabled?: boolean;
 }
-declare function Toggle({ label, inputSize, onClick, isChecked, id, disabled, }: CheckboxProps): React.JSX.Element;
+declare function Toggle({ label, size, onClick, checked, id, disabled, }: CheckboxProps): React.JSX.Element;
 declare namespace Toggle {
     var defaultProps: {
         label: string;
-        inputSize: string;
+        size: string;
         onClick: () => void;
-        isChecked: boolean;
+        checked: boolean;
         id: string;
         disabled: boolean;
     };
 }
 
 interface SegmentButtonItemProps extends ComponentPropsWithoutRef<'button'> {
-    active: boolean;
-    size: 'large' | 'medium' | 'small' | 'tiny';
+    selected: boolean;
+    size: 'lg' | 'md' | 'sm' | 'tn';
     children: React.ReactNode;
     disabled: boolean;
     onClick: () => void;
 }
-declare function SegmentButtonItem({ active, size, children, disabled, onClick, }: SegmentButtonItemProps): React.JSX.Element;
+declare function SegmentButtonItem({ selected, size, children, disabled, onClick, }: SegmentButtonItemProps): React.JSX.Element;
 
 declare function SegmentButtonGroup({ children }: {
     children: React.ReactNode;
 }): React.JSX.Element;
 
 interface SegmentButtonSimulationProps {
-    size: 'large' | 'medium' | 'small' | 'tiny';
+    size: 'lg' | 'md' | 'sm' | 'tn';
 }
 declare function SegmentButtonSimulation({ size, }: SegmentButtonSimulationProps): React.JSX.Element;
 
 interface ModalProps extends ComponentPropsWithoutRef<'div'> {
-    size: 'small' | 'medium' | 'large' | 'extra large';
+    size: 'sm' | 'md' | 'lg' | 'xl';
     title?: string;
     isShow: boolean;
     setIsShow: (arg0: boolean) => void;
@@ -346,7 +347,7 @@ declare namespace Modal {
 }
 
 interface PagingProps extends ComponentPropsWithoutRef<'div'> {
-    size: 'small' | 'medium';
+    size: 'sm' | 'md';
     position: 'start' | 'center' | 'end';
     currentPage: number;
     totalPages: number;
@@ -374,10 +375,10 @@ interface PopoverProps {
     delay?: number;
     direction?: 'top' | 'right' | 'bottom' | 'left';
     title?: string;
-    isActive: boolean;
+    open: boolean;
     setIsActive: (arg0: boolean) => void;
 }
-declare function Popover({ children, content, delay, direction, title, isActive, setIsActive, }: PopoverProps): React.JSX.Element;
+declare function Popover({ children, content, delay, direction, title, open, setIsActive, }: PopoverProps): React.JSX.Element;
 declare namespace Popover {
     var defaultProps: {
         delay: number;
@@ -427,7 +428,7 @@ interface TabProps extends ComponentPropsWithoutRef<'button'> {
     card?: boolean;
     mode?: 'horizontal' | 'vertical';
     fit?: 'fit-content' | 'maximize';
-    size?: 'medium' | 'small';
+    size?: 'md' | 'sm';
 }
 declare function Tab({ children, active, icon, disabled, mode, fit, size, card, ...rest }: TabProps): React.JSX.Element;
 declare namespace Tab {
@@ -442,7 +443,7 @@ declare namespace Tab {
 }
 
 interface TableProps extends ComponentPropsWithoutRef<'table'> {
-    tableSize?: 'medium' | 'small' | 'tiny';
+    tableSize?: 'md' | 'sm' | 'tn';
     className?: string;
     children: React.ReactNode;
 }
@@ -469,7 +470,7 @@ interface TableColProps extends ComponentPropsWithoutRef<'td'> {
     variant?: 'head' | 'body';
     alignment?: 'middle' | 'right' | 'left';
     lined?: boolean;
-    size?: 'medium' | 'small' | 'tiny';
+    size?: 'md' | 'sm' | 'tn';
 }
 declare function TableCol({ variant, lined, alignment, className, children, size, }: TableColProps): React.JSX.Element;
 declare namespace TableCol {
@@ -504,7 +505,7 @@ declare namespace TableBody {
 }
 
 interface TableDemoProps {
-    tableSize?: 'medium' | 'small' | 'tiny';
+    tableSize?: 'md' | 'sm' | 'tn';
 }
 declare function TableDemo({ tableSize }: TableDemoProps): React.JSX.Element;
 declare namespace TableDemo {
@@ -515,7 +516,7 @@ declare namespace TableDemo {
 
 interface TagLabelProps extends ComponentPropsWithoutRef<'div'> {
     color: 'default' | 'blue' | 'teal' | 'green' | 'yellow' | 'red' | 'black' | 'white';
-    size?: 'medium' | 'small' | 'tiny';
+    size?: 'md' | 'sm' | 'tn';
     variant?: 'label' | 'icon' | 'closeable';
     closeHandler?: () => void;
     isShow?: boolean;

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "@biaenergi:registry": "https://gitlab.com/api/v4/projects/50905269/packages/npm/"
   },
-  "version": "0.5.16",
+  "version": "0.5.18",
   "description": "Design Language System develop by BIAENERGI",
   "scripts": {
     "rollup": "rollup -c",