ados-rcm 1.0.8 → 1.0.9

package/dist/AModule/AComponents/ABase/ABase.d.ts

@@ -1,28 +1,63 @@
-/**
- * ABase
- * div that can be disabled, loading, and have tooltip
- *
- * Notice :
- *  1. z-index of tooltip is 1000
- *  2. z-index of dimming is 100, and UseDimming.UseDimming.Dimmer.z-index is 0
- *  3.
- *
- * Todo :
- *  1. Dimmer and Spinner are rendered when they are not visible.
- *
- * Used Color Variables
- * --ABase_Dimming
- */
 /// <reference types="react" />
 export interface IABaseProps extends React.HTMLAttributes<HTMLElement> {
     className?: string;
     style?: React.CSSProperties;
     children?: React.ReactNode;
+    /**
+     * abaseRef? : React.RefObject<HTMLDivElement>
+     * Description : ref of ABase   *
+     * Basic Usage :
+     * (1) const ref = useRef<HtmlDivElement>();
+     * <ABase abaseRef={ref}/>
+     */
     abaseRef?: React.RefObject<HTMLDivElement>;
+    /**
+     * isDisabled? : any
+     * Description : if truthy, dimming is applied. if isLoading is true, spinner is dimmed as well.
+     * Basic Usage :
+     * (1) <ABase isDisabled/>
+     */
     isDisabled?: any;
+    /**
+     * isLoading? : any
+     * Description : if truthy, dimming and spinner are applied.
+     * Basic Usage :
+     * (1) <ABase isLoading/>
+     */
     isLoading?: any;
+    /**
+     * tooltip? : React.ReactNode
+     * Description : tooltip. if tooltip is truthy, tooltip is shown.
+     * Basic Usage :
+     * (1) <ABase tooltip="tooltip text"/>
+     * (2) <ABase tooltip={<div>tooltip text</div>}/>
+     */
     tooltip?: React.ReactNode;
+    /**
+     * tooltipDistance? : number = 10
+     * Description : distance in pixels between tooltip and target.
+     * Basic Usage :
+     * (1) <ABase tooltipDistance={10}/>
+     */
     tooltipDistance?: number;
+    /**
+     * tooltipDelay? : number
+     * Description : delay in seconds of tooltip after mouse enter.
+     * Basic Usage :
+     * (1) <ABase tooltipDelay={100}/>
+     */
     tooltipDelay?: number;
 }
-export declare const ABase: ({ children, abaseRef, isDisabled, isLoading, tooltip, tooltipDistance, tooltipDelay, ...divProps }: IABaseProps) => React.ReactNode;
+/**
+ * AComponent : ABase
+ * Description : ABase is a base component(like div) that can have isDisabled, isLoading and tooltip.
+ * Basic Usage :
+ * (1) return <ABase>{children}</ABase>
+ *
+ * (2) return <ABase isDisabled>{children}</ABase>
+ *
+ * (3) return <ABase isLoading>{children}</ABase>
+ *
+ * (4) return <ABase tooltip="tooltip text">{children}</ABase>
+ */
+export declare const ABase: (props: IABaseProps) => React.ReactNode;

package/dist/AModule/AComponents/AButton/AButton.d.ts

@@ -2,6 +2,20 @@ import { IABaseProps } from '../ABase/ABase';
 import { IAWrapProps } from '../AWrap/AWrap';
 export type TAButtonType = 'Primary' | 'Secondary' | 'Undefined';
 export interface IAButtonProps extends IABaseProps, IAWrapProps {
+    /**
+     * type? : TAButtonType = 'Primary'
+     * Description : type of IAButton
+     * Basic Usage :
+     * (1) <AButton type="Secondary"/>
+     */
     type?: TAButtonType;
 }
-export declare const AButton: ({ wrapProps, helperText, label, type, onClick: propsOnClick, ...abaseProps }: IAButtonProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * AComponent : AButton
+ * Description : AButton is a button component.
+ * Basic Usage :
+ * (1) <AButton onClick={onClick}>Click Me</AButton>
+ *
+ * (2) <AButton type="Secondary" onClick={onClick} isDisabled={isDisabled} tooltip={isDisabled && 'Button Disabled'}>Click Me</AButton>
+ */
+export declare const AButton: (props: IAButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/AModule/AComponents/AButton/AIconButton.d.ts

@@ -1,12 +1,26 @@
-/// <reference types="react" />
+import { IABaseProps } from '../ABase/ABase';
 import { TIcons } from '../AIcon/AIcon';
-interface IAIconButtonProps {
+interface IAIconButtonProps extends IABaseProps {
+    /**
+     * icon : TIcons
+     * Description : icon of AIconButton
+     * Basic Usage :
+     * (1) <AIconButton icon="Alert"/>
+     */
     icon: TIcons;
+    /**
+     * size? : 'Small' | 'Medium' | 'Large' = 'Medium'
+     * Description : size of AIconButton
+     * Basic Usage :
+     * (1) <AIconButton icon="Alert" size="Small"/>
+     */
     size?: 'Small' | 'Medium' | 'Large';
-    onClick?: () => void;
-    isDisabled?: boolean;
-    isLoading?: boolean;
-    tooltip?: React.ReactNode;
 }
-export declare const AIconButton: ({ icon, size, onClick, isDisabled, isLoading, tooltip }: IAIconButtonProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * AComponent : AIconButton
+ * Description : AIconButton is a button component with an Icon.
+ * Basic Usage :
+ * (1) <AIconButton icon="Alert" size="Small" onClick={onClick}/>
+ */
+export declare const AIconButton: (props: IAIconButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/AModule/AComponents/ACheckBox/ACheckBox.d.ts

@@ -1,13 +1,27 @@
 import { TUseValues } from '../../AHooks/useValues';
 import { IABaseProps } from '../ABase/ABase';
 export interface IACheckBoxProps extends IABaseProps {
+    /**
+     * useCheck? : TUseValues<any>
+     * Description : [useCheck, setUseCheck] = useValues of ACheckBox. if useCheck is truthy, ACheckBox is checked.
+     * Basic Usage :
+     * (1) const [useCheck, setUseCheck] = useState(false);
+     * <ACheckBox useCheck={[useCheck, setUseCheck]}/>
+     */
     useCheck?: TUseValues<any>;
+    /**
+     * isIndeterminate? : boolean
+     * Description : if true, ACheckBox is indeterminate. priority is higher than useCheck.
+     * Basic Usage :
+     * (1) <ACheckBox isIndeterminate/>
+     */
     isIndeterminate?: boolean;
 }
 /**
- * ACheckBox
- * 체크박스 컴포넌트
- * useValue를 통해 체크박스의 상태를 관리할 수 있다.
- * Default : Indeterminate -> UnChecked -> -> Checked -> UnChecked
+ * AComponent : ACheckBox
+ * Description : ACheckBox is a checkbox component.
+ * Basic Usage :
+ * (1) const [useCheck, setUseCheck] = useState(false);
+ * <ACheckBox useCheck={[useCheck, setUseCheck]} onClick={onClick} isDisabled={isDisabled} tooltip={isDisabled && 'CheckBox Disabled'} />
  */
 export declare const ACheckBox: ({ useCheck, isIndeterminate, ...abaseProps }: IACheckBoxProps) => React.ReactNode;

package/dist/AModule/AComponents/AClock/AClock.d.ts

@@ -3,15 +3,79 @@ import React from 'react';
 import { IABaseProps } from '../ABase/ABase';
 import { TActionRef } from '../ATypes/ATypes';
 export interface IAClockActions {
+    /**
+     * start : () => void
+     * Description : start clock running
+     */
     start: () => void;
+    /**
+     * stop : () => void
+     * Description : stop clock running
+     */
     stop: () => void;
+    /**
+     * reset : () => void
+     * Description : set clock's tick to maxTicks and stop clock running
+     */
     reset: () => void;
+    /**
+     * setTicks : (ticks: number) => void
+     * Description : set clock's tick to specified number
+     */
     setTicks: (ticks: number) => void;
 }
 export interface IAClockProps extends IAWrapProps, IABaseProps {
+    /**
+     * maxTicks? : number = 300
+     * Description : maxTicks of AClock
+     * Basic Usage :
+     * (1) <AClock maxTicks={180}/>
+     */
     maxTicks?: number;
+    /**
+     * interval? : number = 1000
+     * Description : interval in milliseconds of AClock
+     * Basic Usage :
+     * (1) <AClock interval={500}/>
+     */
     interval?: number;
+    /**
+     * onFinish? : () => void
+     * Description : onFinish of AClock
+     * Basic Usage :
+     * (1) <AClock onFinish={onFinish}/>
+     */
     onFinish?: () => void;
+    /**
+     * actionRef? : TActionRef<IAClockActions>
+     * Description : actionRef of AClock
+     * Basic Usage :
+     * (1) const actionRef = useRef<IAClockActions>();
+     * <AClock actionRef={ref}/>
+     */
     actionRef?: TActionRef<IAClockActions>;
 }
+/**
+ * AComponent : AClock
+ * Description : AClock is a clock component.
+ * Basic Usage :
+ * (1) const actionRef = useRef<IAClockActions>();
+ * const onStartClick = () => {
+ *   actionRef.current?.start();
+ * }
+ * const onStopClick = () => {
+ *  actionRef.current?.stop();
+ * }
+ * const onResetClick = () => {
+ *   actionRef.current?.reset();
+ * }
+ * return (
+ *   <div>
+ *     <AClock onFinish={onFinish} actionRef={ref}/>
+ *     <AButton onClick={onStartClick}>Start</AButton>
+ *     <AButton onClick={onStopClick}>Stop</AButton>
+ *     <AButton onClick={onResetClick}>Reset</AButton>
+ *   </div>
+ * )
+ */
 export declare const AClock: ({ maxTicks, interval, onFinish, actionRef, wrapProps, helperText, label, ...abaseProps }: IAClockProps) => React.ReactNode;

package/dist/AModule/AComponents/ADatePicker/ADatePicker.d.ts

@@ -3,19 +3,111 @@ import { TUseValues } from '../../AHooks/useValues';
 import { EDir12, TActionRef } from '../ATypes/ATypes';
 import { Resources } from '../AResource/AResource';
 export interface IADatePickerActions {
+    /**
+     * open : () => void
+     * Description : opens calendar when called
+     */
     open: () => void;
+    /**
+     * close : () => void
+     * Description : closes calendar when called
+     */
     close: () => void;
+    /**
+     * toggle : () => void
+     * Description : toggles calendar(open <> close) when called
+     */
     toggle: () => void;
 }
 export interface IADatePickerProps {
+    /**
+     * className? : string
+     * Description : className of ADatePicker
+     * Basic Usage :
+     * (1) <ADatePicker className="className"/>
+     */
     className?: string;
+    /**
+     * useDate? : TUseValues<Date>
+     * Description : useDate of ADatePicker
+     * Basic Usage :
+     * (1) const [date, setDate] = useState(new Date());
+     * <ADatePicker useDate={[date, setDate]}/>
+     * (2) const [date, setDate] = useState(new Date());
+     * const onDateChange = (newDate: Date) => {
+     *  setDate(newDate);
+     * }
+     * <ADatePicker useDate={[date, onDateChange]}/>
+     */
     useDate?: TUseValues<Date>;
+    /**
+     * position? : EDir12 = EDir12.SE
+     * Description : position of calendar
+     * Basic Usage :
+     * (1) <ADatePicker position={EDir12.E}/>
+     */
     position?: EDir12;
+    /**
+     * actionRef? : TActionRef<IADatePickerActions>
+     * Description : actionRef of ADatePicker
+     * Basic Usage :
+     * (1) const actionRef = useRef<IADatePickerActions>();
+     * return (
+     * <>
+     *   <ADatePicker actionRef={ref}/>
+     *   <AButton onClick={() => ref.current?.open()}>Open</AButton>
+     *   <AButton onClick={() => ref.current?.close()}>Close</AButton>
+     * </>
+     */
     actionRef?: TActionRef<IADatePickerActions>;
+    /**
+     * minDate? : Date = new Date(new Date().getFullYear() - 1, new Date().getMonth(), new Date().getDate())
+     * Description : minimum date of ADatePicker. default is a year ago from now
+     * Basic Usage :
+     * (1) <ADatePicker minDate={new Date(2021, 0, 1)}/>
+     */
     minDate?: Date;
+    /**
+     * maxDate? : Date = new Date(new Date().getFullYear() + 1, new Date().getMonth(), new Date().getDate())
+     * Description : maximum date of ADatePicker. default is a year later from now
+     * Basic Usage :
+     * (1) <ADatePicker maxDate={new Date(2022, 0, 1)}/>
+     */
     maxDate?: Date;
+    /**
+     * resources? : Partial<typeof Resources.ADatePicker>
+     * Description : language resources of ADatePicker
+     * Basic Usage :
+     * (1) <ADatePicker resources={{months: (x) => 'current month :' +  x}}/>
+     */
     resources?: Partial<typeof Resources.ADatePicker>;
+    /**
+     * LeftAddon? : React.ReactNode
+     * Description : LeftAddon of ADatePicker
+     * Basic Usage :
+     * (1) <ADatePicker LeftAddon={<AIcon icon="Alert"/>}/>
+     */
     LeftAddon?: React.ReactNode;
+    /**
+     * RightAddon? : React.ReactNode
+     * Description : RightAddon of ADatePicker
+     * Basic Usage :
+     * (1) <ADatePicker RightAddon={<AIcon icon="Alert"/>}/>
+     */
     RightAddon?: React.ReactNode;
 }
+/**
+ * AComponent : ADatePicker
+ * Description : ADatePicker is a component for selecting single date.
+ * Basic Usage :
+ * (1) const actionRef = useRef<IADatePickerActions>();
+ * const [date, setDate] = useState(new Date());
+ * return (
+ *   <>
+ *     <ADatePicker useDate={[date, setDate]} actionRef={actionRef}/>
+ *     <AButton onClick={() => actionRef.current?.open()}>Open</AButton>
+ *     <AButton onClick={() => actionRef.current?.close()}>Close</AButton>
+ *   </>
+ * )
+ */
 export declare const ADatePicker: ({ className, useDate, actionRef, position, minDate: exMinDate, maxDate: exMaxDate, resources: extResources, LeftAddon, RightAddon, }: IADatePickerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/AModule/AComponents/ADatePicker/ADateRangePicker.d.ts

@@ -1,21 +1,44 @@
-/// <reference types="react" />
 import { TUseValues } from '../../AHooks/useValues';
-import { EDir12, TActionRef } from '../ATypes/ATypes';
-import { IADatePickerActions } from './ADatePicker';
-import { Resources } from '../AResource/AResource';
+import { IADatePickerProps } from './ADatePicker';
 export interface IDateRange {
+    /**
+     * sDate : Date;
+     * Description : start date of IDateRange
+     */
     sDate: Date;
+    /**
+     * eDate : Date;
+     * Description : end date of IDateRange
+     */
     eDate: Date;
 }
-export interface IADateRangePickerProps {
-    className?: string;
+export interface IADateRangePickerProps extends Omit<IADatePickerProps, 'useDate'> {
+    /**
+     * useDateRange : TUseValues<IDateRange>;
+     * Description : useDateRange of ADateRangePicker
+     * Basic Usage :
+     * (1) const [useDateRange, setUseDateRange] = useState<IDateRange>({ sDate: new Date(), eDate: new Date() });
+     * return <ADateRangePicker useDateRange={[useDateRange, setUseDateRange]} />
+     * (2) const useDateRange = useValues<IDateRange>({ sDate: new Date(), eDate: new Date() });
+     * const onDateRangeChange = (newDateRange: IDateRange) => {
+     *  setUseDateRange(newDateRange);
+     * };
+     * return <ADateRangePicker useDateRange={[useDateRange, onDateRangeChange]} />
+     */
     useDateRange?: TUseValues<IDateRange>;
-    position?: EDir12;
-    actionRef?: TActionRef<IADatePickerActions>;
-    minDate?: Date;
-    maxDate?: Date;
-    resources?: Partial<typeof Resources.ADatePicker>;
-    LeftAddon?: React.ReactNode;
-    RightAddon?: React.ReactNode;
 }
+/**
+ * AComponent : ADateRangePicker
+ * Description : ADateRangePicker is a component for selecting dateRange
+ * Basic Usage :
+ * (1) const actionRef = useRef<IADatePickerActions>();
+ * const [dateRange, setDateRange] = useState<IDateRange>({ sDate: new Date(), eDate: new Date() });
+ * return (
+ *   <>
+ *     <ADateRangePicker useDateRange={[dateRange, setDateRange]} actionRef={actionRef} />
+ *     <AButton onClick={() => actionRef.current?.open()}>Open</AButton>
+ *     <AButton onClick={() => actionRef.current?.close()}>Close</AButton>
+ *   </>
+ * )
+ */
 export declare const ADateRangePicker: ({ className, useDateRange, actionRef, position, minDate: exMinDate, maxDate: exMaxDate, resources: extResources, LeftAddon, RightAddon, }: IADateRangePickerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/AModule/AComponents/ADialog/ADialog.d.ts

@@ -1,30 +1,151 @@
 /// <reference types="react" />
 import { Resources } from '../AResource/AResource';
-import { TActionRef } from '../ATypes/ATypes';
+import { IAEventCallers, TActionRef } from '../ATypes/ATypes';
+/**
+ * onOk와 ok의 네이밍 차이 : 해당 function이 Action임을 정의하는 기준을 고찰.
+ * onAction은 callback으로 action이 수행될 때 호출된다. 따라서 기본적으로 onAction을 호출하는 곳은 action 한 곳 뿐이다.
+ * 이와 다르게 action은 여러 곳에서 해당 action을 수행하고 싶을 때 호출할 수 있다. 만약 한 곳에서만 action을 호출하는 상황이라면 onAction을 사용하도록 한다.
+ */
 export interface IADialogActions {
+    /**
+     * open : () => void
+     * Description : open dialog
+     */
     open: () => void;
+    /**
+     * close : () => void
+     * Description : close dialog
+     */
     close: () => void;
+    /**
+     * toggle : () => void
+     * Description : toggle dialog
+     */
     toggle: () => void;
+    /**
+     * ok : () => void
+     * Description : run ok of the dialog
+     */
     ok: () => void;
+    /**
+     * cancel : () => void
+     * Description : run cancel of the dialog
+     */
     cancel: () => void;
 }
 export type TADialogTypes = 'okCancel' | 'cancelOk' | 'ok' | 'cancel' | 'none';
-export interface IADialogEventCallers {
-    preventClose: () => void;
-}
 export interface IADialogProps {
+    /**
+     * type? : TADialogTypes = 'okCancel'
+     * Description : type of dialog. decides the type of action buttons
+     * Basic Usage :
+     * (1) <ADialog type='cancelOk'/>
+     */
     type?: TADialogTypes;
+    /**
+     * title? : React.ReactNode
+     * Description : title of the dialog
+     * Basic Usage :
+     * (1) <ADialog title='Title'/>
+     */
     title?: React.ReactNode;
+    /**
+     * actionRef? : TActionRef<IADialogActions>
+     * Description : actionRef of the dialog
+     * Basic Usage :
+     * (1) const actionRef = useRef<IADialogActions>();
+     * return <ADialog actionRef={ref}/>
+     */
     actionRef?: TActionRef<IADialogActions>;
+    /**
+     * children? : React.ReactNode
+     * Description : children of the dialog
+     * Basic Usage :
+     * (1) <ADialog>children</ADialog>
+     */
     children?: React.ReactNode;
-    onOk?: (e: any) => void;
-    onCancel?: (e: any) => void;
+    /**
+     * onOk : (e: IAEventCallers) => void;
+     * Description : onOk of the dialog. it closes the dialog by default
+     * Basic Usage :
+     * (1) <ADialog onOk={onOk}/>
+     * (2) <ADialog onOk={(e) =>  e.preventDefault()}/>
+     */
+    onOk?: (e: IAEventCallers) => void;
+    /**
+     * onCancel : (e: IAEventCallers) => void;
+     * Description : onCancel of the dialog. it closes the dialog by default
+     * Basic Usage :
+     * (1) <ADialog onCancel={onCancel}/>
+     * (2) <ADialog onCancel={(e) =>  e.preventDefault()}/>
+     */
+    onCancel?: (e: IAEventCallers) => void;
+    /**
+     * onEnterPress : (e: IAEventCallers) => void;
+     * Description : onEnterPress of the dialog. it runs ok by default
+     * Basic Usage :
+     * (1) <ADialog onEnterPress={onEnterPress}/>
+     * (2) <ADialog onEnterPress={(e) =>  e.preventDefault()}/>
+     */
+    onEnterPress?: (e: IAEventCallers) => void;
+    /**
+     * onEscPress : (e: IAEventCallers) => void;
+     * Description : onEscPress of the dialog. it runs cancel by default
+     * Basic Usage :
+     * (1) <ADialog onEscPress={onEscPress}/>
+     * (2) <ADialog onEscPress={(e) =>  e.preventDefault()}/>
+     */
+    onEscPress?: (e: IAEventCallers) => void;
+    /**
+     * onSpacePress : (e: IAEventCallers) => void;
+     * Description : onSpacePress of the dialog. it runs ok by default
+     * Basic Usage :
+     * (1) <ADialog onSpacePress={onSpacePress}/>
+     * (2) <ADialog onSpacePress={(e) =>  e.preventDefault()}/>
+     */
+    onSpacePress?: (e: IAEventCallers) => void;
+    /**
+     * onPaperClick : (e: IAEventCallers) => void;
+     * Description : onPaperClick of the dialog. it runs cancel by default
+     * Basic Usage :
+     * (1) <ADialog onPaperClick={onPaperClick}/>
+     * (2) <ADialog onPaperClick={(e) =>  e.preventDefault()}/>
+     */
+    onPaperClick?: (e: IAEventCallers) => void;
+    /**
+     * noDim? : boolean = false
+     * Description : decides whether the dialog has dim or not
+     * Basic Usage :
+     * (1) <ADialog noDim/>
+     */
     noDim?: boolean;
-    noCancelOnPaperClick?: boolean;
-    noCloseOnOk?: boolean;
-    noCloseOnCancel?: boolean;
-    noOkOnEnter?: boolean;
-    noCancelOnEsc?: boolean;
+    /**
+     * resources? : Partial<typeof Resources.ADialog>
+     * Description : language resources of the dialog
+     * Basic Usage :
+     * (1) <ADialog resources={{ ok: "I'm ok", cancel: "I'm Cancel" }}/>
+     */
     resources?: Partial<typeof Resources.ADialog>;
 }
-export declare const ADialog: ({ type, title, actionRef, children, onOk, onCancel, noDim, noCancelOnPaperClick, noCloseOnOk, noCloseOnCancel, noOkOnEnter, noCancelOnEsc, resources: extResources, }: IADialogProps) => import("react").ReactPortal | null;
+/**
+ * AComponent : ADialog
+ * Description : ADialog is a dialog component.
+ * Basic Usage :
+ * (1) const actionRef = useRef<IADialogActions>();
+ * const onOk = () => {
+ *  console.log('ok');
+ * }
+ * const onCancel = () => {
+ *   console.log('cancel');
+ * }
+ * return (
+ *   <div>
+ *     <ADialog actionRef={actionRef} title='Dialog Title onOk={onOk} onCancel={onCancel}>
+ *       <div>Content</div>
+ *     </ADialog>
+ *     <AButton onClick={actionRef.current?.open}>Open</AButton>
+ *     <AButton onClick={actionRef.current?.close}>Close</AButton>
+ *   </div>
+ * )
+ */
+export declare const ADialog: ({ type, title, actionRef, children, onOk: extOnOk, onCancel: extOnCancel, onEnterPress: extOnEnterPress, onEscPress: extOnEscPress, onSpacePress: extOnSpacePress, onPaperClick: extOnPaperClick, noDim, resources: extResources, }: IADialogProps) => import("react").ReactPortal | null;

package/dist/AModule/AComponents/AFileBox/AFileBox.d.ts

@@ -3,11 +3,41 @@ import { TUseValues } from '../../AHooks/useValues';
 import { IABaseProps } from '../ABase/ABase';
 import { Resources } from '../AResource/AResource';
 export interface IFileRendererProps {
+    /**
+     * file : File
+     * Description : file to render
+     */
     file: File;
 }
 export interface IAFileBoxProps extends IABaseProps {
+    /**
+     * useFile : TUseValues<File | null>
+     * Description : useFile of AFileBox
+     * Basic Usage :
+     * (1) const [file, setFile] = useState<File | null>(null);
+     * <AFileBox useFile={[file, setFile]}/>
+     */
     useFile: TUseValues<File | null>;
+    /**
+     * FileRenderer? : (props: IFileRendererProps) => React.ReactNode
+     * Description : FileRenderer of AFileBox
+     * Basic Usage :
+     * (1) <AFileBox FileRenderer={file => <div>{file.name}</div>}/>
+     */
     FileRenderer?: (props: IFileRendererProps) => React.ReactNode;
+    /**
+     * resources? : typeof Resources.AFileBox
+     * Description : resources of AFileBox
+     * Basic Usage :
+     * (1) <AFileBox resources={{'or Drag & Drop': 'or Drag the File and Drop it here'}}/>
+     */
     resources?: typeof Resources.AFileBox;
 }
+/**
+ * AComponent : AFileBox
+ * Description : AFileBox is a file box component that can select a file.
+ * Basic Usage :
+ * (1) const [file, setFile] = useState<File | null>(null);
+ * return <AFileBox useFile={[file, setFile]}/>
+ */
 export declare const AFileBox: ({ useFile, FileRenderer, resources: extResources, ...props }: IAFileBoxProps) => import("react/jsx-runtime").JSX.Element;