kku-ui 0.1.4 → 0.2.1

package/README.md

@@ -1,36 +1,54 @@
-<h1 align="center">✨ KKU-UI: React Components Libirary ✨</h1>
+# ✨ KKU-UI ✨
+### React Component Library for Modern UI Development<br>
+
+### 🎨 스토리북
+
+ 🔗 [Link](https://macjjuni.github.io/kku-ui)
+
+### 소개
+
+kku-ui는 React 기반의 컴포넌트 라이브러리로, 컴포넌트 간 유연한 조합을 위해 컴파운드 패턴과 동적인 UI 구성을 위한 Render Props 패턴이 적용되어 있습니다. 
+이를 통해 재사용성과 확장성을 높이며, 가볍게 사용할 수 있도록 만들어졌습니다.
+
+### 컴포넌트 구조
+
+프로젝트 내 컴포넌트는 크게 **Main 컴포넌트**와 **Core 컴포넌트**로 분리되어 있습니다.
+
+#### **Main 컴포넌트**
+  다지안이 적용된 최종 UI 컴포넌트입니다.
+
+| 컴포넌트               | 기능 | 스토리북 | a11y |
+|:-------------------|:----:|:--------:|:----:|
+| `<KButton/>`       | ✅   | ✅       | ✅   |
+| `<KButtonGroup/>`  | ✅   | ✅       | ✅   |
+| `<KToggleButton/>` | ✅   | ✅       | ✅   |
+| `<KSwitch/>`       | ✅   | ✅       | ✅   |
+| `<KTextField/>`    | ✅   | ✅       | ✅   |
+| `<KSelect/>`       | ✅   | ✅       | ✅   |
+| `<KAccordion/>`    | ✅   | ✅       | ✅   |
+| `<KMenu/>`         | ✅   | ✅       | ✅   |
+| `<KDropdown/>`     | ✅   | ✅       | ✅   |
+| `<KBackdrop/>`     | ✅   | ✅       | ✅   |
+| `<KModal/>`        | ✅   | ✅       | ✅   |
+| `<KSpinner/>`      | ✅   | ✅       | ✅   |
+| `<KIcon/>`         | ✅   | ✅       | ✅   |
+| 🏃🏻‍♂             
+
+#### **Core 컴포넌트**  
+  디자인 없이 기본 로직과 접근성(A11y) 처리만 포함된 단일 컴포넌트입니다.  
+  Main 컴포넌트 내부에서 재사용되며, 재사용성과 별도의 디자인을 적용하기 위해 만들어 졌습니다.
+
+| 컴포넌트                    | 기능 | 스토리북 | a11y |
+|:------------------------|:----:|:--------:|:----:|
+| `<Button/>`            | ✅   | ✅       | ✅   |
+| `<TextField/>`         | ✅  | ✅       | ✅   |
+| `<Switch/>`            | ✅   | ✅       | ✅   |
+| `<Menu/>`              | ✅   | ✅       | ✅   |
+| `<MenuItem/>`          | ✅   | ✅       | ✅   |
+| `<Accordion/>`         | ✅  | ✅       | ✅   |
+| `<Accordion.Summary/>` | ✅  | ✅       | ✅   |
+| `<Accordion.Content/>` | ✅  | ✅       | ✅   |
 
-<br>
-
-<div align="center">
-  <img width="360" height="360" src="https://github.com/macjjuni/kku-ui/assets/38034518/9b93b70e-a5d5-4d5e-8794-e4b206bff57a" alt="kku-ui thumbnail" >
-</div>
-
-## 🎁 Components
-
-| 컴포넌트&nbsp; \ &nbsp; 지원 |&nbsp;&nbsp;&nbsp;기능&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;디자인&nbsp;&nbsp;| 접근성 |테스트 코드|&nbsp;스토리북&nbsp;| 사용/배포 |
-|:-----------------------|:---:|:-------------------------:|:---:|:----:|:---:|:-----:|
-| `<KButton />`          |✅|             ✅             |  ✅  |  ✅   |✅|✅|
-| `<KTextField /> `      |✅|             ✅             |  ✅  |  ✅   |✅|✅|
-| `<KIcon />`            |✅|             ✅             |  ✅  |  ✅   |✅|✅|
-| `<KSelect />`          |✅|             ✅             |  ✅   |  ✅   |✅|✅|
-| `<KDropHolder />`      |✅|             ✅             |  ✅  |  ✅   |✅|✅|
-| `<KSwitch />`          |✅|             ✅             |  ✅  |  ✅   |✅|✅|
-| `<KCard />`            |✅|             ✅             |  ✅  |  ✅   |✅|✅|
-| `<KAccordion />`       |✅|             ✅              |  ✅  |   ✅   |✅|✅|
-| `<KModal />`           |✅|             ✅             |  ✅  |  ✅   |✅|✅|
-| 🏃🏻‍♂️..              |✨|             ✨             |  ✨  |  ✨   |✨|✨|
-
-
-✅ Good ⚠️ Not Good 🧑🏻‍💻 Trying 
-
-<br>
-
-## 📆 Planning
-
-### 📌 <a href="https://github.com/users/macjjuni/projects/1/views/1" target="_blank" >GitHub Project</a>
-
-<br>
 
 ## 📦 Install
 ```
@@ -39,8 +57,9 @@ npm install kku-ui
 ```
 yarn add kku-ui
 ```
-
-<br>
+```
+pnpm add kku-ui
+```
 
 ## ⚙️ Initial Setting
 ```typescript
@@ -49,23 +68,17 @@ yarn add kku-ui
 import 'kku-ui/lib/styles/index.css'
 ```
 
-<br>
-
 ## 🧑🏻‍💻 Use Examples
 
 ```typescript
 import { KButton } from 'kku-ui'
 
 export default function Component() {
- return (<KButton primary label="Hello World!" />);
+  return (
+    <KButton label="Hello World!"/>
+  );
 } 
 ```
 
-<br>
-
-## 🕺🏻 Preview
-
-###  🔗 [StoryBook](https://macjjuni.github.io/kku-ui)
-
 
 

package/lib/es/common/hooks/index.d.ts

@@ -0,0 +1,7 @@
+export { default as useRipple } from './useRipple/useRipple';
+export { default as useCleanId } from './useCleanId';
+export { default as useClickOutside } from './useClickOutside';
+export { default as useDynamicRefs } from './useDynamicRefs';
+export { default as useDropdownPosition } from './useDropdownPosition';
+export { default as useSafePortalContainer } from './useSafePortalContainer';
+export { default as useEscapeKey } from './useEscapeKey';

package/lib/es/common/hooks/useCleanId.d.ts

@@ -0,0 +1 @@
+export default function useCleanId(text: string): string;

package/lib/es/common/hooks/useDropdownPosition.d.ts

@@ -0,0 +1,16 @@
+import { RefObject } from 'react';
+import { KDropdownOffsetType, KDropdownPositionType } from '../../components/data-display/dropdown/KDropdown.interface';
+interface Position {
+    top: number;
+    left: number;
+}
+interface UseDropdownPositionParams {
+    triggerRef: RefObject<HTMLElement | null>;
+    contentRef: RefObject<HTMLElement | null>;
+    position: KDropdownPositionType;
+    open: boolean;
+    offset?: KDropdownOffsetType;
+    gap?: number;
+}
+export default function useDropdownPosition({ triggerRef, contentRef, position, open, offset, gap, }: UseDropdownPositionParams): Position;
+export {};

package/lib/es/common/hooks/useDynamicRefs.d.ts

@@ -0,0 +1,4 @@
+export default function useDynamicRefs<T>(): {
+    refs: T[];
+    handleRef: (key: string) => (ref: T) => void;
+};

package/lib/es/common/hooks/useEscapeKey.d.ts

@@ -0,0 +1,2 @@
+declare const useEscapeKey: (callback: () => void) => void;
+export default useEscapeKey;

package/lib/es/common/hooks/useSafePortalContainer.d.ts

@@ -0,0 +1 @@
+export default function useSafePortalContainer(Element?: HTMLElement): HTMLElement | null;

package/lib/es/common/util/keyboard.d.ts

@@ -0,0 +1,2 @@
+import { KeyboardEvent } from 'react';
+export declare const handleEnterOrSpacePress: (e: KeyboardEvent<HTMLElement> | KeyboardEvent, callback: () => void) => void;

package/lib/es/components/{button → actions/button}/KButton.d.ts

@@ -1,3 +1,3 @@
-import { KButtonProps, KButtonRefs } from '..';
+import { KButtonProps, KButtonRefs } from '../..';
 declare const KButton: import('react').NamedExoticComponent<KButtonProps & import('react').RefAttributes<KButtonRefs>>;
 export default KButton;

package/lib/es/components/actions/button/KButton.interface.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { SizeType } from '../../../common/base/base.interface';
+import { ButtonProps } from '../../../core';
+export declare const BUTTON_VARIANTS: readonly ["outlined", "solid", "primary", "subtle", "plain"];
+export type KButtonVariantType = (typeof BUTTON_VARIANTS)[number];
+export interface KButtonProps extends ButtonProps {
+    children?: ReactNode;
+    size?: SizeType;
+    variant?: KButtonVariantType;
+    isDanger?: boolean;
+    width?: number | string;
+    height?: number | string;
+}
+export interface KButtonRefs {
+    focus: () => void;
+    blur: () => void;
+    click: () => void;
+}

package/lib/es/components/actions/button-group/KButtonGroup.d.ts

@@ -0,0 +1,6 @@
+import { KButtonGroupProps } from '../..';
+declare const KButtonGroup: import('react').MemoExoticComponent<{
+    (props: KButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+}>;
+export default KButtonGroup;

package/lib/es/components/actions/button-group/KButtonGroup.interface.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { KButtonVariantType } from '../..';
+export interface KButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: KButtonVariantType;
+    children: ReactNode;
+}

package/lib/es/components/actions/button-group/index.d.ts

@@ -0,0 +1,2 @@
+export { default as KButtonGroup } from './KButtonGroup';
+export * from './KButtonGroup.interface';

package/lib/es/components/actions/index.d.ts

@@ -0,0 +1,4 @@
+export * from './button';
+export * from './button-group';
+export * from './toggle-button';
+export * from './switch';

package/lib/es/components/actions/switch/KSwitch.interface.d.ts

@@ -0,0 +1,8 @@
+import { SwitchProps } from '../../../core/switch/Switch.interface';
+import { SizeType } from '../../../common/base/base.interface';
+export interface KSwitchProps extends SwitchProps {
+    size?: SizeType;
+}
+export interface KSwitchRefs {
+    toggle: () => void;
+}

package/lib/es/components/actions/toggle-button/KToggleButton.d.ts

@@ -0,0 +1,6 @@
+import { KToggleButtonProps } from './KToggleButton.interface';
+declare const _default: import('react').MemoExoticComponent<{
+    ({ multiple, className, variant, children, ...restProps }: KToggleButtonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+}>;
+export default _default;

package/lib/es/components/actions/toggle-button/KToggleButton.interface.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { KButtonVariantType } from '../..';
+export interface KToggleButtonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    variant?: KButtonVariantType;
+    children: ReactNode;
+    multiple?: boolean;
+}

package/lib/es/components/actions/toggle-button/index.d.ts

@@ -0,0 +1,2 @@
+export { default as KToggleButton } from './KToggleButton';
+export * from './KToggleButton.interface';

package/lib/es/components/{accordion → data-display/accordion}/KAccordion.d.ts

@@ -1,6 +1,6 @@
 import { KAccordionProps } from './KAccordion.interface';
 declare const KAccordion: import('react').MemoExoticComponent<{
-    ({ ...restProps }: KAccordionProps): import("react/jsx-runtime").JSX.Element;
+    (props: KAccordionProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 }>;
 export default KAccordion;

package/lib/es/components/data-display/accordion/KAccordion.interface.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { SizeType } from '../../../common/base/base.interface';
+import { AccordionProps } from '../../../core/accordion';
+export interface KAccordionProps extends AccordionProps {
+    summary: string | ReactNode;
+    children: ReactNode;
+    size?: SizeType;
+    width?: number;
+}

package/lib/es/components/data-display/dropdown/KDropdown.context.d.ts

@@ -0,0 +1,3 @@
+import { KDropdownContextProps } from './KDropdown.interface';
+export declare const KDropdownContext: import('react').Context<KDropdownContextProps | null>;
+export declare function useKDropdownContext(): KDropdownContextProps;

package/lib/es/components/data-display/dropdown/KDropdown.d.ts

@@ -0,0 +1,10 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { default as DropdownTrigger } from './KDropdownTrigger';
+import { default as DropdownContent } from './KDropdownContent';
+import { KDropdownProps } from './KDropdown.interface';
+interface DropdownNamespace extends ForwardRefExoticComponent<KDropdownProps & RefAttributes<HTMLElement>> {
+    Trigger: typeof DropdownTrigger;
+    Content: typeof DropdownContent;
+}
+declare const KDropdown: DropdownNamespace;
+export default KDropdown;

package/lib/es/components/data-display/dropdown/KDropdown.interface.d.ts

@@ -0,0 +1,43 @@
+import { HTMLAttributes, KeyboardEvent, ReactNode, RefObject } from 'react';
+export declare const K_DROPDOWN_POSITIONS: readonly ["top-start", "top", "top-end", "right-start", "right", "right-end", "bottom-start", "bottom", "bottom-end", "left-start", "left", "left-end"];
+export type KDropdownPositionType = typeof K_DROPDOWN_POSITIONS[number];
+export type KDropdownTriggerType = 'hover' | 'click';
+export interface KDropdownOffsetType {
+    x: number;
+    y: number;
+}
+export interface KDropdownContextProps {
+    open: boolean;
+    onOpen: () => void;
+    onClose: () => void;
+    onFocusContent: () => void;
+    onBlurContent: (e: KeyboardEvent<HTMLElement>) => void;
+    id: string;
+    triggerRef: RefObject<HTMLDivElement | null>;
+    contentRef: RefObject<HTMLDivElement | null>;
+    trigger: KDropdownTriggerType;
+    position: KDropdownPositionType;
+}
+export interface KDropdownRefs {
+    onOpen: () => void;
+    onClose: () => void;
+}
+export type DropdownElementType = 'div' | 'ul' | 'li' | 'p' | 'span';
+export interface KDropdownProps extends HTMLAttributes<HTMLElement> {
+    as?: DropdownElementType;
+    children?: ReactNode;
+    trigger?: KDropdownTriggerType;
+    position?: KDropdownPositionType;
+}
+export interface KDropdownTriggerProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    disabled?: boolean;
+}
+export interface KDropdownContentProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    autoClose?: boolean;
+    gap?: number;
+    offset?: KDropdownOffsetType;
+    container?: HTMLElement;
+    zIndex?: number;
+}

package/lib/es/components/data-display/dropdown/KDropdownContent.d.ts

@@ -0,0 +1,3 @@
+import { KDropdownContentProps } from './KDropdown.interface';
+declare const KDropdownContent: import('react').NamedExoticComponent<KDropdownContentProps & import('react').RefAttributes<HTMLDivElement | null>>;
+export default KDropdownContent;

package/lib/es/components/data-display/dropdown/KDropdownTrigger.d.ts

@@ -0,0 +1,3 @@
+import { KDropdownTriggerProps } from './KDropdown.interface';
+declare const KDropdownTrigger: import('react').NamedExoticComponent<KDropdownTriggerProps & import('react').RefAttributes<HTMLDivElement>>;
+export default KDropdownTrigger;

package/lib/es/components/data-display/dropdown/index.d.ts

@@ -0,0 +1,2 @@
+export { default as KDropdown } from './KDropdown';
+export * from './KDropdown.interface';

package/lib/es/components/data-display/index.d.ts

@@ -0,0 +1,4 @@
+export * from './accordion';
+export * from './menu';
+export * from './dropdown';
+export * from './skeleton';

package/lib/es/components/data-display/menu/KMenu.d.ts

@@ -0,0 +1,12 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { KMenuProps } from './KMenu.interface';
+import { default as KMenuItem } from './KMenuItem';
+import { default as KMenuItemSelectable } from './KMenuItemSelectable';
+import { default as KMenuItemDivider } from './KMenuItemDivider';
+interface KMenuNamespace extends ForwardRefExoticComponent<KMenuProps & RefAttributes<HTMLUListElement>> {
+    Item: typeof KMenuItem;
+    ItemSelectable: typeof KMenuItemSelectable;
+    ItemDivider: typeof KMenuItemDivider;
+}
+declare const KMenu: KMenuNamespace;
+export default KMenu;

package/lib/es/components/data-display/menu/KMenu.interface.d.ts

@@ -0,0 +1,19 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { MenuItemProps, MenuProps } from '../../../core';
+import { SizeType } from '../../../common/base/base.interface';
+export interface KMenuProps extends Omit<MenuProps, 'as'> {
+    size?: SizeType;
+    width?: number | string;
+}
+export interface KMenuItemProps extends Omit<MenuItemProps, 'as'> {
+    leftContent?: ReactNode;
+    rightContent?: ReactNode;
+    shortcut?: string;
+    label?: string;
+    size?: SizeType;
+}
+export interface KMenuItemSelectableProps extends Omit<KMenuItemProps, 'leftContent'> {
+    selected?: boolean;
+}
+export interface KMenuItemDividerProps extends HTMLAttributes<HTMLLIElement> {
+}

package/lib/es/components/data-display/menu/KMenuItem.d.ts

@@ -0,0 +1,3 @@
+import { KMenuItemProps } from './KMenu.interface';
+declare const KMenuItem: import('react').NamedExoticComponent<Omit<KMenuItemProps, "ref"> & import('react').RefAttributes<HTMLLIElement>>;
+export default KMenuItem;

package/lib/es/components/data-display/menu/KMenuItemDivider.d.ts

@@ -0,0 +1,3 @@
+import { KMenuItemDividerProps } from './KMenu.interface';
+declare const KMenuItemDivider: import('react').NamedExoticComponent<KMenuItemDividerProps & import('react').RefAttributes<HTMLLIElement>>;
+export default KMenuItemDivider;

package/lib/es/components/data-display/menu/KMenuItemSelectable.d.ts

@@ -0,0 +1,3 @@
+import { KMenuItemSelectableProps } from './KMenu.interface';
+declare const KMenuItemSelectable: import('react').NamedExoticComponent<Omit<KMenuItemSelectableProps, "ref"> & import('react').RefAttributes<HTMLLIElement>>;
+export default KMenuItemSelectable;

package/lib/es/components/data-display/menu/index.d.ts

@@ -0,0 +1,2 @@
+export { default as KMenu } from './KMenu';
+export * from './KMenu.interface';

package/lib/es/components/data-display/skeleton/KSkeleton.d.ts

@@ -0,0 +1,6 @@
+import { KSkeletonProps } from '../..';
+declare const KSkeleton: import('react').MemoExoticComponent<{
+    ({ ...restProps }: KSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+}>;
+export default KSkeleton;

package/lib/es/components/data-display/skeleton/KSkeleton.interface.d.ts

@@ -0,0 +1,8 @@
+import { KBaseProp } from '../../../common/base/base.interface';
+export interface KSkeletonProps extends KBaseProp {
+    width?: string | number;
+    height?: string | number;
+    borderRadius: string | number;
+    animation?: 'pulse' | 'wave';
+    onClick?: () => void;
+}

package/lib/es/components/data-display/skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export { default as KSkeleton } from './KSkeleton';
+export * from './KSkeleton.interface';

package/lib/es/components/feedback/backdrop/KBackdrop.d.ts

@@ -0,0 +1,6 @@
+import { KBackdropProps } from './KBackdrop.interface';
+declare const KBackdrop: import('react').MemoExoticComponent<{
+    (props: KBackdropProps): import('react').ReactPortal | null;
+    displayName: string;
+}>;
+export default KBackdrop;

package/lib/es/components/feedback/backdrop/KBackdrop.motion.d.ts

@@ -0,0 +1,3 @@
+import { MotionType } from '../../../common/base/base.interface';
+declare const KBackdropMotion: MotionType;
+export default KBackdropMotion;

package/lib/es/components/feedback/backdrop/index.d.ts

@@ -0,0 +1,2 @@
+export { default as KBackdrop } from './KBackdrop';
+export type { KBackdropProps } from './KBackdrop.interface';

package/lib/es/components/feedback/index.d.ts

@@ -0,0 +1,3 @@
+export * from './modal';
+export * from './backdrop';
+export * from './spinner';

package/lib/es/components/feedback/modal/KModal.context.d.ts

@@ -0,0 +1,3 @@
+import { KModalContextProps } from './KModal.interface';
+export declare const ModalContext: import('react').Context<KModalContextProps | null>;
+export declare const useModal: () => KModalContextProps;

package/lib/es/components/feedback/modal/KModal.d.ts

@@ -0,0 +1,12 @@
+import { ForwardRefExoticComponent } from 'react';
+import { KModalProps } from './KModal.interface';
+import { default as KModalHeader } from './KModalHeader';
+import { default as KModalContent } from './KModalContent';
+import { default as KModalFooter } from './KModalFooter';
+interface KModalNamespace extends ForwardRefExoticComponent<KModalProps> {
+    Header: typeof KModalHeader;
+    Content: typeof KModalContent;
+    Footer: typeof KModalFooter;
+}
+declare const KModal: KModalNamespace;
+export default KModal;

package/lib/es/components/feedback/modal/KModal.interface.d.ts

@@ -0,0 +1,34 @@
+import { Dispatch, HTMLAttributes, ReactNode, SetStateAction } from 'react';
+export declare const KMODAL_SIZES: readonly ["medium", "small", "large"];
+export type KModalSizeType = (typeof KMODAL_SIZES)[number];
+export interface KModalContextProps {
+    isOpen: boolean;
+    title: string | null;
+    setTitle: Dispatch<SetStateAction<string | null>>;
+}
+export interface KModalProps extends HTMLAttributes<HTMLElement> {
+    isOpen: boolean;
+    setIsOpen?: Dispatch<SetStateAction<boolean>>;
+    onClose?: () => void;
+    container?: HTMLElement;
+    children: ReactNode;
+    size?: KModalSizeType;
+    animation?: 'slide' | 'fade' | 'scale';
+    width?: number | string;
+    height?: number | string;
+    isOverlay?: boolean;
+    overlayOpacity?: number;
+    overlayClosable?: boolean;
+    escClosable?: boolean;
+}
+export interface KModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    title?: string;
+    children: ReactNode;
+}
+export interface KModalContentProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+export interface KModalFooterProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    align?: 'left' | 'center' | 'right';
+}

package/lib/es/components/feedback/modal/KModal.motion.d.ts

@@ -0,0 +1,2 @@
+import { MotionType } from '../../../common/base/base.interface';
+export declare const KModalMotion: Record<string, MotionType>;

package/lib/es/components/feedback/modal/KModalContent.d.ts

@@ -0,0 +1,3 @@
+import { KModalContentProps } from './KModal.interface';
+declare const KModalContent: import('react').NamedExoticComponent<KModalContentProps & import('react').RefAttributes<HTMLDivElement>>;
+export default KModalContent;

package/lib/es/components/feedback/modal/KModalFooter.d.ts

@@ -0,0 +1,3 @@
+import { KModalFooterProps } from './KModal.interface';
+declare const KModalFooter: import('react').NamedExoticComponent<KModalFooterProps & import('react').RefAttributes<HTMLDivElement>>;
+export default KModalFooter;

package/lib/es/components/feedback/modal/KModalHeader.d.ts

@@ -0,0 +1,3 @@
+import { KModalHeaderProps } from './KModal.interface';
+declare const KModalHeader: import('react').NamedExoticComponent<KModalHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
+export default KModalHeader;

package/lib/es/components/feedback/spinner/KSpinner.d.ts

@@ -0,0 +1,3 @@
+import { KSpinnerProps } from '../..';
+declare const KSpinner: import('react').NamedExoticComponent<KSpinnerProps & import('react').RefAttributes<HTMLDivElement>>;
+export default KSpinner;

package/lib/es/components/feedback/spinner/index.d.ts

@@ -0,0 +1,2 @@
+export { default as KSpinner } from './KSpinner';
+export type { KSpinnerProps } from './KSpinner.interface';

package/lib/es/components/{icon → foundations/icon}/KIcon.interface.d.ts

@@ -1,12 +1,8 @@
 import { MouseEvent, KeyboardEvent } from 'react';
-import { KBaseProp } from '../../common/base/base.interface';
-export declare const ICON_SIZES: {
-    readonly large: "large";
-    readonly medium: "medium";
-    readonly small: "small";
-};
-export type KIconSize = keyof typeof ICON_SIZES;
-export declare const KIconSizeList: ("small" | "medium" | "large")[];
+import { KBaseProp } from '../../../common/base/base.interface';
+export declare const ICON_SIZES: readonly ["xsmall", "small", "medium", "large", "xlarge"];
+export type KIconSize = (typeof ICON_SIZES)[number];
+export declare const KIconSizeList: ("small" | "medium" | "large" | "xsmall" | "xlarge")[];
 export interface KIconProps extends KBaseProp {
     icon: string;
     size?: KIconSize | number;

package/lib/es/components/foundations/index.d.ts

@@ -0,0 +1 @@
+export * from './icon';

package/lib/es/components/index.d.ts

@@ -1,9 +1,5 @@
-export * from './button';
-export * from './input/textfield';
-export * from './icon';
-export * from './input/select';
-export * from './drop-holder';
-export * from './input/switch';
-export * from './card';
-export * from './accordion';
-export * from './modal';
+export * from './actions';
+export * from './data-display';
+export * from './feedback';
+export * from './foundations';
+export * from './input';

package/lib/es/components/input/index.d.ts

@@ -0,0 +1,2 @@
+export * from './select';
+export * from './textfield';

package/lib/es/components/input/select/KSelect.interface.d.ts

@@ -1,23 +1,31 @@
-import { KeyboardEvent } from 'react';
-import { KBaseProp, KSizeProp } from '../../../common/base/base.interface';
+import { CSSProperties, HTMLAttributes, KeyboardEvent } from 'react';
+import { SizeType } from '../../../common/base/base.interface';
+import { KInputValidateType } from '../..';
 export interface KSelectItemType {
-    ['value']: string;
+    ['value']: string | number;
     ['label']: string;
 }
-export interface KSelectProps extends KBaseProp, KSizeProp {
-    value?: string;
+export interface KSelectProps extends KInputValidateType, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    value?: string | number;
     items: KSelectItemType[];
+    label?: string;
     placeholder?: string;
     noDataText?: string;
     disabled?: boolean;
-    onChange: (value: string) => void;
+    required?: boolean;
+    onChange: (val: string | number) => void;
     onFocus?: () => void;
     onBlur?: () => void;
+    size?: SizeType;
     width?: number;
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
 }
 export interface KSelectRefs {
-    open: () => void;
-    close: () => void;
+    onOpen: () => void;
+    onClose: () => void;
+    onValidate: () => Promise<boolean> | boolean;
 }
 export interface KSelectListProps {
     value?: string;

package/lib/es/components/input/textfield/KTextField.d.ts

@@ -1,3 +1,3 @@
 import { KTextFieldProps, KTextFieldRefs } from './KTextField.interface';
-declare const KTextField: import('react').NamedExoticComponent<KTextFieldProps & import('react').RefAttributes<KTextFieldRefs>>;
-export default KTextField;
+declare const _default: import('react').NamedExoticComponent<KTextFieldProps & import('react').RefAttributes<KTextFieldRefs>>;
+export default _default;