@weing-dev/ui-kit-primitive 0.1.2 → 0.3.0

package/README.md

@@ -48,3 +48,12 @@ export default tseslint.config({
   },
 })
 ```
+
+## 임포트 시 실제 로드량 확인 방법
+
+특정 export(예: `Icon`, `ICON_NAMES`)만 import 했을 때 실제로 얼마나 로드되는지 확인하려면:
+
+1. **소비 앱(Storybook 등)에서 production 빌드** 후 번들 분석기로 해당 패키지/청크 크기 확인
+2. **실제 전송량**: 빌드 결과를 서빙한 뒤 브라우저 개발자도구 → Network 탭에서 JS 파일 크기 확인. Icon만 쓰는 페이지와 ICON_NAMES만 쓰는 페이지를 나눠 비교하면 됨
+
+모노레포에서 이 패키지를 **소스로** 참조하면 번들러가 tree-shaking으로 필요한 부분만 포함한다.

package/dist/components/Accordion/Accordion.d.ts

@@ -3,7 +3,7 @@ import { AccordionsRootProviderProps } from './Accordion.context';
 type ItemProps = React.PropsWithChildren<{
     className?: string;
 }>;
-declare const Item: React.MemoExoticComponent<(props: ItemProps) => import("react/jsx-runtime").JSX.Element>;
+declare const Item: (props: ItemProps) => import("react/jsx-runtime").JSX.Element;
 type AsProps = {
     id?: string;
     open?: boolean;
@@ -13,8 +13,8 @@ type TriggerProps = React.PropsWithChildren<{
     as?: (props: AsProps) => React.ReactNode;
     className?: string;
 }>;
-declare const Trigger: React.MemoExoticComponent<(props: TriggerProps) => import("react/jsx-runtime").JSX.Element>;
-declare const Root: React.MemoExoticComponent<(props: Omit<AccordionsRootProviderProps, "#triggerRef" | "#firstClick">) => import("react/jsx-runtime").JSX.Element>;
+declare const Trigger: (props: TriggerProps) => import("react/jsx-runtime").JSX.Element;
+declare const Root: (props: Omit<AccordionsRootProviderProps, "#triggerRef" | "#firstClick">) => import("react/jsx-runtime").JSX.Element;
 interface IAccordion {
     Root: typeof Root;
     Trigger: typeof Trigger;

package/dist/components/Avatar/Avatar.d.ts

@@ -7,7 +7,7 @@ type GroupProps = React.PropsWithChildren<{
     itemSize?: number;
     restCounterProps?: React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>;
 }>;
-declare const Group: React.MemoExoticComponent<(props: GroupProps) => import("react/jsx-runtime").JSX.Element>;
+declare const Group: (props: GroupProps) => import("react/jsx-runtime").JSX.Element;
 type AsProps = {
     isError: boolean;
     nameAbbreviation: boolean;
@@ -26,7 +26,7 @@ type ItemProps = {
     size?: number;
     as?: (props: AsProps) => React.ReactNode;
 } & React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>;
-declare const Item: React.MemoExoticComponent<(props: ItemProps) => import("react/jsx-runtime").JSX.Element>;
+declare const Item: (props: ItemProps) => import("react/jsx-runtime").JSX.Element;
 interface IAvatar {
     Item: typeof Item;
     Group: typeof Group;

package/dist/components/Badge/Badge.d.ts

@@ -13,5 +13,5 @@ export type BadgeRootProps = React.PropsWithChildren<{
     overlap?: "square" | "circle" | null;
     as?: (props: BadgeRenderProps) => React.ReactNode;
 } & BadgeProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
-declare const _default: React.MemoExoticComponent<(props: BadgeRootProps) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined>;
-export default _default;
+declare const Badge: (props: BadgeRootProps) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
+export default Badge;

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -1,13 +1,13 @@
 import { default as React } from 'react';
 type EllipsisProps = {
     className?: string;
-    onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+    onClick?: (e: React.MouseEvent<SVGSVGElement>) => void;
 };
-declare const Ellipsis: React.MemoExoticComponent<(props: EllipsisProps) => import("react/jsx-runtime").JSX.Element>;
+declare const Ellipsis: (props: EllipsisProps) => import("react/jsx-runtime").JSX.Element;
 type SeparatorProps = {
     className?: string;
 };
-declare const Separator: React.MemoExoticComponent<(props: SeparatorProps) => import("react/jsx-runtime").JSX.Element>;
+declare const Separator: (props: SeparatorProps) => import("react/jsx-runtime").JSX.Element;
 type AsProps = {
     className?: string;
     href?: string;
@@ -17,12 +17,12 @@ type AsProps = {
 type LinkProps = React.PropsWithChildren<{
     as?: (props: AsProps) => React.ReactNode;
 } & AsProps>;
-declare const Link: React.MemoExoticComponent<(props: LinkProps) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined>;
+declare const Link: (props: LinkProps) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
 type ListProps = React.PropsWithChildren<{
     className?: string;
     separator?: React.ReactElement;
 }>;
-declare const List: React.MemoExoticComponent<(props: ListProps) => import("react/jsx-runtime").JSX.Element>;
+declare const List: (props: ListProps) => import("react/jsx-runtime").JSX.Element;
 interface IBreadcrumb {
     List: typeof List;
     Link: typeof Link;

package/dist/components/Button/Button.d.ts

@@ -4,17 +4,17 @@ import { ButtonProviderProps } from './Button.context';
 type TextProps = React.PropsWithChildren<{
     className?: string;
 }>;
-declare const Text: React.MemoExoticComponent<(props: TextProps) => import("react/jsx-runtime").JSX.Element>;
+declare const Text: (props: TextProps) => import("react/jsx-runtime").JSX.Element;
 type IconProps = React.PropsWithChildren<React.ComponentProps<typeof IconComponent>> & {
     className?: string;
 };
-declare const Icon: React.MemoExoticComponent<(props: IconProps) => import("react/jsx-runtime").JSX.Element>;
+declare const Icon: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
 /** 버튼 컴포넌트 */
-declare const Root: React.MemoExoticComponent<(props: ButtonProviderProps & {
+declare const Root: (props: ButtonProviderProps & {
     radius?: number;
     rounded?: boolean;
     circle?: boolean;
-} & React.JSX.IntrinsicElements["button"]) => import("react/jsx-runtime").JSX.Element>;
+} & React.JSX.IntrinsicElements["button"]) => import("react/jsx-runtime").JSX.Element;
 interface IButton {
     Text: typeof Text;
     Icon: typeof Icon;

package/dist/components/Button/button.augment.d.ts

@@ -0,0 +1,17 @@
+/**
+ * `@weing-dev/ui-kit-primitive` 모듈 확장 포인트 (Button).
+ *
+ * 소비자 프로젝트에서 아래처럼 확장할 수 있습니다.
+ *
+ * declare module "@weing-dev/ui-kit-primitive" {
+ *   interface ButtonVariantOverrides {
+ *     danger: true;
+ *   }
+ * }
+ */
+declare module "@weing-dev/ui-kit-primitive" {
+    interface ButtonVariantOverrides {
+    }
+}
+export type __UiKitButtonAugmentMarker = true;
+export {};

package/dist/components/Calendar/Calendar.d.ts

@@ -28,7 +28,7 @@ type CalendarBodyProps = {
     columnClassName?: string;
     columnAs?: (props: ColumnAsProps) => React.ReactNode;
 };
-declare const Body: React.MemoExoticComponent<(props: CalendarBodyProps) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined>;
+declare const Body: (props: CalendarBodyProps) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
 type AsDirectionProps = {
     disabled?: boolean;
 };
@@ -38,8 +38,8 @@ type DirectionButtonProps = {
     disabled?: boolean;
     moveValue?: number;
 };
-declare const Next: React.MemoExoticComponent<(props: DirectionButtonProps) => import("react/jsx-runtime").JSX.Element>;
-declare const Prev: React.MemoExoticComponent<(props: DirectionButtonProps) => import("react/jsx-runtime").JSX.Element>;
+declare const Next: (props: DirectionButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Prev: (props: DirectionButtonProps) => import("react/jsx-runtime").JSX.Element;
 type AsDayTextProps = {
     columns: (string | undefined)[];
 };
@@ -49,17 +49,17 @@ type DayTextListProps = React.PropsWithChildren<{
     column?: React.ReactElement;
     className?: string;
 }>;
-declare const DayTextList: React.MemoExoticComponent<(props: DayTextListProps) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined>;
+declare const DayTextList: (props: DayTextListProps) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
 type HeaderDateProps = {
     className?: string;
     format?: string;
 };
-declare const HeaderDate: React.MemoExoticComponent<(props: HeaderDateProps) => import("react/jsx-runtime").JSX.Element>;
+declare const HeaderDate: (props: HeaderDateProps) => import("react/jsx-runtime").JSX.Element;
 type RootProps = CalendarProviderProps & {
     currentDate?: string;
     className?: string;
 };
-declare const Root: React.MemoExoticComponent<(props: RootProps) => import("react/jsx-runtime").JSX.Element>;
+declare const Root: (props: RootProps) => import("react/jsx-runtime").JSX.Element;
 interface ICalendar {
     Root: typeof Root;
     HeaderDate: typeof HeaderDate;

package/dist/components/Cascader/Cascader.d.ts

@@ -17,7 +17,7 @@ type ItemProps = React.PropsWithChildren<{
     level: number;
     as?: (props: ItemAsProps) => React.ReactNode;
 } & React.ComponentProps<"div">>;
-declare const Item: React.MemoExoticComponent<(props: ItemProps) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined>;
+declare const Item: (props: ItemProps) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
 type ColumnAsProps = {
     defaultClassName: string;
     maxColumnView?: number;
@@ -30,16 +30,16 @@ type ColumnProps = React.PropsWithChildren<{
     index: number;
     as?: (props: ColumnAsProps) => React.ReactNode;
 } & React.ComponentProps<"div">>;
-declare const Column: React.MemoExoticComponent<(props: React.PropsWithoutRef<ColumnProps>) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined>;
+declare const Column: (props: React.PropsWithoutRef<ColumnProps>) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
 type MenuAsProps = {
     defaultClassName: string;
 };
 type MenuProps = React.PropsWithChildren<{
     as?: (props: MenuAsProps) => React.ReactNode;
 } & React.ComponentProps<"div">>;
-declare const Menu: React.MemoExoticComponent<(props: React.PropsWithoutRef<MenuProps>) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined>;
+declare const Menu: (props: React.PropsWithoutRef<MenuProps>) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
 type RootProps = Omit<CascaderProviderProps, "selectedOptionTop" | "setSelectedOptionTop"> & Omit<React.ComponentProps<"div">, "onSelect">;
-declare const Root: React.MemoExoticComponent<(props: React.PropsWithoutRef<RootProps>) => import("react/jsx-runtime").JSX.Element>;
+declare const Root: (props: React.PropsWithoutRef<RootProps>) => import("react/jsx-runtime").JSX.Element;
 interface ICascader {
     Root: typeof Root;
     Menu: typeof Menu;

package/dist/components/Chips/Chips.d.ts

@@ -12,5 +12,5 @@ type ChipsProps = React.PropsWithChildren<{
     colorType?: "primary" | "inherit" | "dual";
     shapeType?: "square" | "round";
 }>;
-declare const _default: React.MemoExoticComponent<(props: ChipsProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;
+declare const Chips: (props: ChipsProps) => import("react/jsx-runtime").JSX.Element;
+export default Chips;

package/dist/components/Comment/Comment.d.ts

@@ -17,5 +17,5 @@ type CommentProps = React.PropsWithChildren<{
     /** 아이콘 크기 */
     size?: number;
 }>;
-declare const _default: React.MemoExoticComponent<(props: CommentProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;
+declare const Comment: (props: CommentProps) => import("react/jsx-runtime").JSX.Element;
+export default Comment;

package/dist/components/Editor/Editor.context.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 import { default as QuillType, Delta } from 'quill';
+import { ToolbarOptions } from './constants/editor.constants';
 export type UploadedImageInfo = {
     url: string;
     objectKey?: string;
@@ -14,6 +15,7 @@ export interface EditorContextValue {
     initialValue?: string;
     readOnly?: boolean;
     placeholder?: string;
+    toolbarOptions?: ToolbarOptions;
     onChange?: (props: {
         delta: Delta;
         oldContents: Delta;

package/dist/components/Editor/Editor.d.ts

@@ -1,11 +1,23 @@
 import { default as React } from 'react';
 import { EditorContextValue, CustomImageUploadHandler } from './Editor.context';
+import { TOOLBAR } from './constants/editor.constants';
+export type CustomFontSource = {
+    url: string;
+    format?: string;
+    weight?: string | number;
+    style?: string;
+};
+export type CustomFont = {
+    family: string;
+    sources: CustomFontSource[];
+};
 type EditorSkeletonProps = React.JSX.IntrinsicElements["div"];
 declare const EditorSkeleton: (props: EditorSkeletonProps) => import("react/jsx-runtime").JSX.Element | null;
 type EditorInputProps = React.JSX.IntrinsicElements["div"];
 declare const EditorInput: (props: EditorInputProps) => import("react/jsx-runtime").JSX.Element;
 type EditorRootProps = React.PropsWithChildren<Omit<EditorContextValue, "quill" | "isLoading" | "editorRef" | "onImageUpload"> & {
     onImageUpload?: CustomImageUploadHandler;
+    customFonts?: CustomFont[];
 } & Omit<React.JSX.IntrinsicElements["div"], "onChange">>;
 declare const EditorRoot: (props: EditorRootProps) => import("react/jsx-runtime").JSX.Element;
 interface EditorComposition {
@@ -13,6 +25,10 @@ interface EditorComposition {
     Input: typeof EditorInput;
     Skeleton: typeof EditorSkeleton;
 }
+interface EditorStatics {
+    TOOLBAR: typeof TOOLBAR;
+}
+type EditorComponent = EditorComposition & EditorStatics;
 export type { EditorRootProps as EditorProps };
-declare const Editor: EditorComposition;
+declare const Editor: EditorComponent;
 export default Editor;

package/dist/components/Editor/constants/editor.constants.d.ts

@@ -1,24 +1,73 @@
-export declare const FONT_SIZE_OPTIONS: string[];
-export declare const TOOLBAR_OPTIONS: (string[] | {
-    header: (number | boolean)[];
-}[] | {
-    size: string[];
-}[] | {
-    list: string;
-}[] | {
-    script: string;
-}[] | {
-    indent: string;
-}[] | {
-    direction: string;
-}[] | ({
-    color: never[];
-    background?: undefined;
-} | {
-    background: never[];
-    color?: undefined;
-})[] | {
-    font: never[];
-}[] | {
-    align: never[];
-}[])[];
+export declare const FONT_SIZE_OPTIONS: readonly ["8pt", "9pt", "10pt", "11pt", "12pt", "14pt", "16pt", "18pt", "20pt", "22pt", "24pt", "28pt", "32pt", "36pt", "48pt", "72pt"];
+export type ToolbarSimpleFormat = "bold" | "italic" | "underline" | "strike" | "blockquote" | "code-block" | "link" | "image" | "video" | "formula" | "clean";
+export type ToolbarHeaderValue = 1 | 2 | 3 | 4 | 5 | 6 | false;
+export type ToolbarListValue = "ordered" | "bullet" | "check";
+export type ToolbarScriptValue = "sub" | "super";
+export type ToolbarIndentValue = "-1" | "+1";
+export type ToolbarDirectionValue = "rtl";
+export type ToolbarAlignValue = "" | "center" | "right" | "justify";
+export type ToolbarSizeValue = string | false;
+export type ToolbarColorValue = string;
+export type ToolbarComplexFormat = {
+    header: ToolbarHeaderValue | ToolbarHeaderValue[];
+} | {
+    size: ToolbarSizeValue[];
+} | {
+    list: ToolbarListValue;
+} | {
+    script: ToolbarScriptValue;
+} | {
+    indent: ToolbarIndentValue;
+} | {
+    direction: ToolbarDirectionValue;
+} | {
+    color: ToolbarColorValue[];
+} | {
+    background: ToolbarColorValue[];
+} | {
+    font: string[];
+} | {
+    align: ToolbarAlignValue | ToolbarAlignValue[];
+};
+export type ToolbarItem = ToolbarSimpleFormat | ToolbarComplexFormat;
+export type ToolbarGroup = ToolbarItem[];
+export type ToolbarOptions = (ToolbarItem | ToolbarGroup)[];
+export declare const TOOLBAR: {
+    readonly ITEM: {
+        readonly BOLD: "bold";
+        readonly ITALIC: "italic";
+        readonly UNDERLINE: "underline";
+        readonly STRIKE: "strike";
+        readonly BLOCKQUOTE: "blockquote";
+        readonly CODE_BLOCK: "code-block";
+        readonly LINK: "link";
+        readonly IMAGE: "image";
+        readonly VIDEO: "video";
+        readonly FORMULA: "formula";
+        readonly CLEAN: "clean";
+        readonly LIST_ORDERED: {
+            readonly list: "ordered";
+        };
+        readonly LIST_BULLET: {
+            readonly list: "bullet";
+        };
+        readonly LIST_CHECK: {
+            readonly list: "check";
+        };
+        readonly SCRIPT_SUB: {
+            readonly script: "sub";
+        };
+        readonly SCRIPT_SUPER: {
+            readonly script: "super";
+        };
+        readonly INDENT_OUT: {
+            readonly indent: "-1";
+        };
+        readonly INDENT_IN: {
+            readonly indent: "+1";
+        };
+        readonly DIRECTION_RTL: {
+            readonly direction: "rtl";
+        };
+    };
+};

package/dist/components/Form/CheckBox/CheckBox.d.ts

@@ -16,14 +16,14 @@ type TriggerProps = React.PropsWithChildren<{
     id?: string;
     indeterminated?: boolean;
 }>;
-declare const Trigger: React.MemoExoticComponent<(props: TriggerProps) => import("react/jsx-runtime").JSX.Element>;
-declare const HelperText: React.MemoExoticComponent<(props: React.ComponentProps<typeof HelperTextComponent>) => import("react/jsx-runtime").JSX.Element>;
+declare const Trigger: (props: TriggerProps) => import("react/jsx-runtime").JSX.Element;
+declare const HelperText: (props: React.ComponentProps<typeof HelperTextComponent>) => import("react/jsx-runtime").JSX.Element;
 type LabelProps = React.PropsWithChildren<{
     className?: string;
     checkedColor?: string;
 }>;
-declare const Label: React.MemoExoticComponent<(props: LabelProps) => import("react/jsx-runtime").JSX.Element>;
-declare const Root: React.MemoExoticComponent<(props: CheckBoxProviderProps) => import("react/jsx-runtime").JSX.Element>;
+declare const Label: (props: LabelProps) => import("react/jsx-runtime").JSX.Element;
+declare const Root: (props: CheckBoxProviderProps) => import("react/jsx-runtime").JSX.Element;
 interface ICheckBoxInput {
     Root: typeof Root;
     Label: typeof Label;

package/dist/components/Form/Dropdown/Dropdown.d.ts

@@ -24,7 +24,7 @@ type TriggerProps = React.PropsWithChildren<{
     leftIcon?: React.ComponentProps<typeof Icon> | null;
     rightIcon?: React.ComponentProps<typeof Icon> | null;
 }>;
-declare const Trigger: React.MemoExoticComponent<(props: TriggerProps) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined>;
+declare const Trigger: (props: TriggerProps) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
 type MenuRenderProps = {
     open: boolean;
     id?: string;
@@ -39,7 +39,7 @@ type MenuProps = {
     children?: React.ReactNode | ((props: MenuRenderProps) => React.ReactNode);
     boundaryPadding?: number;
 };
-declare const Menu: React.MemoExoticComponent<(props: MenuProps) => import("react/jsx-runtime").JSX.Element | null>;
+declare const Menu: (props: MenuProps) => import("react/jsx-runtime").JSX.Element | null;
 type ItemProps = React.PropsWithChildren<{
     className?: string;
     value: string;
@@ -47,8 +47,8 @@ type ItemProps = React.PropsWithChildren<{
     variant?: "shadow" | "line";
     size?: "small" | "medium";
 }>;
-declare const Item: React.MemoExoticComponent<(props: ItemProps) => import("react/jsx-runtime").JSX.Element>;
-declare const Root: React.MemoExoticComponent<(props: DropdownProviderProps) => import("react/jsx-runtime").JSX.Element>;
+declare const Item: (props: ItemProps) => import("react/jsx-runtime").JSX.Element;
+declare const Root: (props: DropdownProviderProps) => import("react/jsx-runtime").JSX.Element;
 interface IDropdown {
     Trigger: typeof Trigger;
     Menu: typeof Menu;

package/dist/components/Form/OTPInput/OTPInput.d.ts

@@ -9,7 +9,7 @@ type RootProps = OTPInputProviderProps & {
     input?: React.ReactNode;
 };
 declare const _default: {
-    Root: React.MemoExoticComponent<(props: RootProps) => import("react/jsx-runtime").JSX.Element>;
-    Input: React.MemoExoticComponent<({ index, className }: InputProps) => import("react/jsx-runtime").JSX.Element>;
+    Root: (props: RootProps) => import("react/jsx-runtime").JSX.Element;
+    Input: ({ index, className }: InputProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default _default;

package/dist/components/Form/Radio/Radio.d.ts

@@ -12,14 +12,14 @@ type TriggerProps = React.PropsWithChildren<{
     className?: string;
     checkedClassName?: string;
 }>;
-declare const Trigger: React.MemoExoticComponent<(props: TriggerProps) => import("react/jsx-runtime").JSX.Element>;
-declare const HelperText: React.MemoExoticComponent<(props: React.ComponentProps<typeof HelperTextComponent>) => import("react/jsx-runtime").JSX.Element>;
+declare const Trigger: (props: TriggerProps) => import("react/jsx-runtime").JSX.Element;
+declare const HelperText: (props: React.ComponentProps<typeof HelperTextComponent>) => import("react/jsx-runtime").JSX.Element;
 type LabelProps = React.PropsWithChildren<{
     className?: string;
     checkedColor?: string;
 }>;
-declare const Label: React.MemoExoticComponent<(props: LabelProps) => import("react/jsx-runtime").JSX.Element>;
-declare const Root: React.MemoExoticComponent<(props: RadioProviderProps) => import("react/jsx-runtime").JSX.Element>;
+declare const Label: (props: LabelProps) => import("react/jsx-runtime").JSX.Element;
+declare const Root: (props: RadioProviderProps) => import("react/jsx-runtime").JSX.Element;
 interface IRadioInput {
     Root: typeof Root;
     Trigger: typeof Trigger;

package/dist/components/Form/Switch/Switch.d.ts

@@ -12,13 +12,13 @@ type TriggerProps = React.PropsWithChildren<{
     wrapperClassName?: string;
     bulletClassName?: string;
 }>;
-declare const Trigger: React.MemoExoticComponent<(props: TriggerProps) => import("react/jsx-runtime").JSX.Element>;
+declare const Trigger: (props: TriggerProps) => import("react/jsx-runtime").JSX.Element;
 type LabelProps = React.PropsWithChildren<{
     className?: string;
     checkedColor?: string;
 }>;
-declare const Label: React.MemoExoticComponent<(props: LabelProps) => import("react/jsx-runtime").JSX.Element>;
-declare const Root: React.MemoExoticComponent<(props: SwitchProviderProps) => import("react/jsx-runtime").JSX.Element>;
+declare const Label: (props: LabelProps) => import("react/jsx-runtime").JSX.Element;
+declare const Root: (props: SwitchProviderProps) => import("react/jsx-runtime").JSX.Element;
 interface ISwitch {
     Root: typeof Root;
     Label: typeof Label;

package/dist/components/Form/TextArea/TextArea.d.ts

@@ -4,12 +4,12 @@ import { TextAreaProviderProps } from './TextArea.context';
 type TextCountProps = React.PropsWithChildren<{
     className?: string;
 }>;
-declare const TextCount: React.MemoExoticComponent<(props: TextCountProps) => import("react/jsx-runtime").JSX.Element>;
+declare const TextCount: (props: TextCountProps) => import("react/jsx-runtime").JSX.Element;
 type EraseProps = React.PropsWithChildren<{
     className?: string;
 }>;
-declare const Erase: React.MemoExoticComponent<(props: EraseProps) => import("react/jsx-runtime").JSX.Element>;
-declare const HelperText: React.MemoExoticComponent<(props: React.ComponentProps<typeof HelperTextComponent>) => import("react/jsx-runtime").JSX.Element>;
+declare const Erase: (props: EraseProps) => import("react/jsx-runtime").JSX.Element;
+declare const HelperText: (props: React.ComponentProps<typeof HelperTextComponent>) => import("react/jsx-runtime").JSX.Element;
 type InputProps = React.PropsWithChildren<React.HTMLProps<HTMLTextAreaElement>> & {
     wrapperClassName?: string;
     placeholderColor?: string;
@@ -18,13 +18,13 @@ type InputProps = React.PropsWithChildren<React.HTMLProps<HTMLTextAreaElement>>
     disabledColor?: string;
     maxRows?: number;
 };
-declare const Input: React.MemoExoticComponent<(props: InputProps) => import("react/jsx-runtime").JSX.Element>;
+declare const Input: (props: InputProps) => import("react/jsx-runtime").JSX.Element;
 type LabelProps = React.PropsWithChildren<{
     className?: string;
     focusedColor?: string;
 }>;
-declare const Label: React.MemoExoticComponent<(props: LabelProps) => import("react/jsx-runtime").JSX.Element>;
-declare const Root: React.MemoExoticComponent<(props: TextAreaProviderProps) => import("react/jsx-runtime").JSX.Element>;
+declare const Label: (props: LabelProps) => import("react/jsx-runtime").JSX.Element;
+declare const Root: (props: TextAreaProviderProps) => import("react/jsx-runtime").JSX.Element;
 interface ITextArea {
     Root: typeof Root;
     Label: typeof Label;

package/dist/components/Form/TextInput/TextInput.d.ts

@@ -5,7 +5,7 @@ type EraseProps = React.PropsWithChildren<{
     className?: string;
     color?: string;
 }>;
-declare const Erase: React.MemoExoticComponent<(props: EraseProps) => import("react/jsx-runtime").JSX.Element>;
+declare const Erase: (props: EraseProps) => import("react/jsx-runtime").JSX.Element;
 type InputProps = React.PropsWithChildren<React.HTMLProps<HTMLInputElement>> & {
     wrapperClassName?: string;
     placeholderColor?: string;
@@ -15,14 +15,14 @@ type InputProps = React.PropsWithChildren<React.HTMLProps<HTMLInputElement>> & {
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
 };
-declare const Input: React.MemoExoticComponent<(props: InputProps) => import("react/jsx-runtime").JSX.Element>;
-declare const HelperText: React.MemoExoticComponent<(props: React.ComponentProps<typeof HelperTextComponent>) => import("react/jsx-runtime").JSX.Element>;
+declare const Input: (props: InputProps) => import("react/jsx-runtime").JSX.Element;
+declare const HelperText: (props: React.ComponentProps<typeof HelperTextComponent>) => import("react/jsx-runtime").JSX.Element;
 type LabelProps = React.PropsWithChildren<{
     className?: string;
     focusedColor?: string;
 }>;
-declare const Label: React.MemoExoticComponent<(props: LabelProps) => import("react/jsx-runtime").JSX.Element>;
-declare const Root: React.MemoExoticComponent<(props: TextInputProviderProps) => import("react/jsx-runtime").JSX.Element>;
+declare const Label: (props: LabelProps) => import("react/jsx-runtime").JSX.Element;
+declare const Root: (props: TextInputProviderProps) => import("react/jsx-runtime").JSX.Element;
 interface ITextInput {
     Root: typeof Root;
     Label: typeof Label;

package/dist/components/GlobalStyle/GlobalStyle.d.ts

@@ -0,0 +1,2 @@
+declare const GlobalStyle: import('react').NamedExoticComponent<import('styled-components').ExecutionProps & object>;
+export default GlobalStyle;

package/dist/components/HelperText/HelperText.d.ts

@@ -22,5 +22,6 @@ type HelperTextProps = React.PropsWithChildren<{
     /** 아이콘 표시 여부 */
     iconVisible?: boolean;
 }>;
-declare const _default: React.MemoExoticComponent<(props: HelperTextProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;
+/** Helper Text */
+declare const HelperText: (props: HelperTextProps) => import("react/jsx-runtime").JSX.Element;
+export default HelperText;

package/dist/components/Icon/Icon.constant.d.ts

@@ -0,0 +1,6 @@
+/**
+ * ui-kit-primitive 기본 아이콘 이름 목록입니다.
+ * 이 파일은 scripts/icons/generate-icon-names.cjs 로 생성됩니다.
+ * Icons/index.ts 를 수정한 뒤 pnpm build 전에 이 스크립트를 실행하세요.
+ */
+export declare const ICON_NAMES: readonly ["Add", "AddOutlined", "AddAPhoto", "ApprovalInactive", "ArrowDown", "ArrowRight", "ArrowUp", "ArrowDropDown", "ArticleOutlined", "AttachFile", "BackButton", "CalendarMonth", "CalendarToday", "CancleFilled", "Cancle", "CartFilled", "Cart", "Category", "CategoryOutlined", "Celebration", "Check", "CheckBadge", "CheckBoxRound", "CheckList", "CheckCircle", "ChevronLeft", "ChromeReaderMode", "Close", "Company", "CreditCard", "CropOriginal", "DensityMediumRound", "DoubleArrowDown", "DoubleArrowUp", "Download", "DragHandle", "Eco", "EditSquare", "EditNoteOutlined", "ErrorFilled", "Error", "ExpandAll", "ExpandLess", "ExpandMore", "Factory", "FeedbackOutlined", "FileUpload", "FilecheckInactive", "FileDownloadDoneFilled", "FileDownloadOutlined", "FullScreen", "FullScreenClose", "GoBefore", "GoNext", "HamburgerMenu", "HandshakeRound", "Home", "ImagecheckPlay", "ImportExport", "InfoFilled", "Inventory", "KakaoTalk", "ListAll", "LocalActivityOutlined", "LocalHospital", "LocalShipping", "Logout", "Menu", "Minus", "MinusOutlined", "ModeEdit", "More", "NaverBlog", "Naver", "Notification", "OrderApprove", "OrderInactive", "OrderPlay", "Outward", "Pause", "PayApprove", "PayInactive", "Payment", "PersonAddAlt", "Personcard", "PersonFilled", "PersonOutline", "PictureQuality", "Pip", "PipExit", "Play", "PlaybackSpeed", "PrintInactive", "PrintPlay", "Product", "ScheduleRound", "Search", "Search2", "SettingFilled", "Settings", "Share", "ShippingDone", "SubtitleFilled", "SubtitleOutlined", "SupportAgent", "SwapVert", "Task", "TrashOutlined", "Upload", "User", "VolumeOff", "VolumeUp", "WarningFilled", "Warning", "WarningAmber"];

package/dist/components/Icon/Icon.d.ts

@@ -1,13 +1,16 @@
-import * as Icons from "../Icons";
-type IconName = keyof typeof Icons;
-type IconsProps = (typeof Icons)[IconName];
-type IconProps = Omit<IconsProps, "size" | "color"> & {
-    name: IconName;
+import { default as React } from 'react';
+import { DefaultIconName } from './context';
+import { IconNameOverrides } from '../../index.ts';
+export type IconName = DefaultIconName | Extract<keyof IconNameOverrides, string>;
+type IconBaseProps = Omit<React.SVGProps<SVGSVGElement>, "width" | "height" | "color"> & {
     color?: string;
     size?: number;
-    onClick?: (...args: any) => void;
-    className?: string;
-    style?: React.CSSProperties;
 };
-export declare const Icon: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
+export type StrictIconProps = IconBaseProps & {
+    name: IconName;
+};
+declare function IconComponent(props: StrictIconProps): import("react/jsx-runtime").JSX.Element;
+export declare const Icon: typeof IconComponent & {
+    ICON_NAMES: readonly ["Add", "AddOutlined", "AddAPhoto", "ApprovalInactive", "ArrowDown", "ArrowRight", "ArrowUp", "ArrowDropDown", "ArticleOutlined", "AttachFile", "BackButton", "CalendarMonth", "CalendarToday", "CancleFilled", "Cancle", "CartFilled", "Cart", "Category", "CategoryOutlined", "Celebration", "Check", "CheckBadge", "CheckBoxRound", "CheckList", "CheckCircle", "ChevronLeft", "ChromeReaderMode", "Close", "Company", "CreditCard", "CropOriginal", "DensityMediumRound", "DoubleArrowDown", "DoubleArrowUp", "Download", "DragHandle", "Eco", "EditSquare", "EditNoteOutlined", "ErrorFilled", "Error", "ExpandAll", "ExpandLess", "ExpandMore", "Factory", "FeedbackOutlined", "FileUpload", "FilecheckInactive", "FileDownloadDoneFilled", "FileDownloadOutlined", "FullScreen", "FullScreenClose", "GoBefore", "GoNext", "HamburgerMenu", "HandshakeRound", "Home", "ImagecheckPlay", "ImportExport", "InfoFilled", "Inventory", "KakaoTalk", "ListAll", "LocalActivityOutlined", "LocalHospital", "LocalShipping", "Logout", "Menu", "Minus", "MinusOutlined", "ModeEdit", "More", "NaverBlog", "Naver", "Notification", "OrderApprove", "OrderInactive", "OrderPlay", "Outward", "Pause", "PayApprove", "PayInactive", "Payment", "PersonAddAlt", "Personcard", "PersonFilled", "PersonOutline", "PictureQuality", "Pip", "PipExit", "Play", "PlaybackSpeed", "PrintInactive", "PrintPlay", "Product", "ScheduleRound", "Search", "Search2", "SettingFilled", "Settings", "Share", "ShippingDone", "SubtitleFilled", "SubtitleOutlined", "SupportAgent", "SwapVert", "Task", "TrashOutlined", "Upload", "User", "VolumeOff", "VolumeUp", "WarningFilled", "Warning", "WarningAmber"];
+};
 export {};

package/dist/components/Icon/context/icon.context.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { createIconStore, IconStore } from './icon.store';
+export type IconStoreApi = ReturnType<typeof createIconStore>;
+export declare const IconStoreContext: React.Context<import('zustand').UseBoundStore<import('zustand').StoreApi<IconStore>>>;
+export declare const useIconStore: <R>(selector: (store: IconStore) => R) => R;

package/dist/components/Icon/context/icon.provider.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { IconRegistry } from './icon.store';
+export type IconProviderProps = {
+    children: React.ReactNode;
+    icons?: IconRegistry;
+};
+declare const IconProvider: (props: IconProviderProps) => import("react/jsx-runtime").JSX.Element;
+export default IconProvider;