@loword/loword-design-system 0.0.2 → 0.0.4

package/README.md

@@ -1,24 +1,93 @@
 # @loword/loword-design-system
 
-loword design system React 컴포넌트 패키지입니다.
+[![npm version](https://img.shields.io/npm/v/@loword/loword-design-system.svg)](https://www.npmjs.com/package/@loword/loword-design-system)
+[![license](https://img.shields.io/npm/l/@loword/loword-design-system.svg)](./LICENSE)
+
+로워드 디자인 시스템 — React 19 컴포넌트 패키지. Tailwind CSS v4 기반이며 NPM(ESM)으로 배포됩니다.
+
+> 모든 공개 컴포넌트는 `LD` 접두사를 사용합니다 (예: `LDButton`, `LDModal`, `LDInput`).
+
+## 요구사항
+
+- **React 19** / **React DOM 19** (peer dependency)
+- **Tailwind CSS v4** — 스타일 적용을 위해 필요
+- **Next.js 15** — 일부 컴포넌트(`LDTanstackTable`, `LDBreadCrumb`)는 `next/navigation`·`next/link`에 의존하므로 Next 환경에서만 동작 (optional)
 
 ## 설치
 
 ```bash
 npm install @loword/loword-design-system
+# 또는
+pnpm add @loword/loword-design-system
+```
+
+특정 컴포넌트(Editor, Carousel, Drawer, Table, Select, DatePicker 등)는 해당 기능의 라이브러리를 **optional peer dependency**로 사용합니다. 그 컴포넌트를 쓸 때만 함께 설치하세요 — 예: `@tiptap/*`(Editor), `embla-carousel-react`(Carousel), `vaul`(Drawer), `@radix-ui/*`(Modal/Popover/Tooltip/Select), `@tanstack/react-table`(Table), `react-day-picker`·`dayjs`(DatePicker), `react-hot-toast`(Toast).
+
+## 설정
+
+스타일시트를 앱 진입점에서 **한 번** import 합니다.
+
+```ts
+import '@loword/loword-design-system/styles.css';
+```
+
+## 사용
+
+```tsx
+import { LDButton } from '@loword/loword-design-system';
+
+export default function Example() {
+  return (
+    <LDButton variant="solid" color="point" onClick={() => alert('clicked')}>
+      확인
+    </LDButton>
+  );
+}
+```
+
+명령형 API 예시:
+
+```tsx
+import { openModal, Toast } from '@loword/loword-design-system';
+
+const result = await openModal({ title: '삭제할까요?', /* ... */ });
+Toast.success('저장되었습니다');
 ```
 
+### import 방식
+
 ```ts
-import { Button } from '@loword/loword-design-system';
-import '@loword/loword-design-system/styles.css'; // 스타일 1회 import
+// 1) barrel — 이름으로 가져오기
+import { LDButton, LDModal, LDInput } from '@loword/loword-design-system';
+
+// 2) 개별 경로 — 트리셰이킹/명시적 경로
+import LDButton from '@loword/loword-design-system/components/LDButton/LDButton';
 ```
 
+## 컴포넌트
+
+**기본/입력**: `LDButton` · `LDInput` · `LDCheckbox` · `LDCheckboxGroup` · `LDRadio` · `LDRadioGroup` · `LDSelect` · `LDMultiSelect` · `LDToggleButton` · `LDSlider` · `LDOTPInput` · `LDFileUploadBase`
+
+**날짜/시간**: `LDCalendar` · `LDDataCalendar` · `LDDatePicker` · `LDDateRangePicker` · `LDTimePicker`
+
+**레이아웃/표시**: `LDBadge` · `LDAvatar` · `LDDivider` · `LDCallout` · `LDSkeleton` · `LDSpinner` · `LDLoadingDots` · `LDScrollArea` · `LDBreadCrumb` · `LDMenuBar` · `LDLNBBase`
+
+**오버레이/피드백/내비**: `LDModal` (+ `openModal`) · `LDDrawer` · `LDPopover` · `LDTooltip` · `LDToast` · `LDToaster`
+
+**콘텐츠**: `LDEditor` · `LDViewer` · `LDCarousel` · `LDTable` · `LDTanstackTable` · `LDPagination`
+
+**폼 연동 / 헬퍼** (LD 접두사 없음): `Form` · `NativeForm` · `FormField` · `FormErrorMessage` · `FormInput` · `FormSelect` · `FormMultiSelect` · `FormCheckbox` · `FormCheckboxGroup` · `FormRadioGroup` · `FormDatePicker` · `FormDateRangePicker` · `FormTimePicker` · `FormToggleButton` · `TableField` · `LucideIcon`
+
+> 폼 래퍼(`Form*`, `TableField`)와 `LucideIcon`은 디자인 컴포넌트가 아니므로 원래 이름을 유지합니다.
+
 ## 빠른 시작 (개발)
 
 ```bash
 pnpm install          # 의존성 설치
 pnpm storybook        # Storybook 개발 서버 (port 6006)
 pnpm build            # 프로덕션 빌드
+pnpm check-types      # 타입 체크
+pnpm lint             # 린트 (--max-warnings 0)
 ```
 
 ## 문서
@@ -29,3 +98,8 @@ pnpm build            # 프로덕션 빌드
   - 스타일 체계 (디자인 토큰, `cn()`)
   - Storybook 스타일 제어 및 stories 생성 방법
   - Props 문서화 (JSDoc)
+- **변경 이력**: [docs/CHANGELOG.md](./docs/CHANGELOG.md)
+
+## 라이선스
+
+[MIT](./LICENSE)

package/dist/components/BreadCrumb/BreadCrumb.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from 'react';
+import { type ButtonSize } from '../Button/Button.js';
+import { type IconName } from '../Icon/LucideIcon.js';
+export interface BreadCrumbItem {
+    label: string;
+    href?: string;
+    icon?: IconName | ReactNode;
+}
+export interface BreadCrumbProps {
+    items: BreadCrumbItem[];
+    size?: ButtonSize;
+    separator?: ReactNode;
+    className?: string;
+}
+declare const BreadCrumb: ({ items, size, separator, className, }: BreadCrumbProps) => import("react/jsx-runtime").JSX.Element;
+export default BreadCrumb;
+//# sourceMappingURL=BreadCrumb.d.ts.map

package/dist/components/BreadCrumb/BreadCrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadCrumb.d.ts","sourceRoot":"","sources":["../../../src/components/BreadCrumb/BreadCrumb.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAe,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAInD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC7B;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA6BD,QAAA,MAAM,UAAU,GAAI,wCAKjB,eAAe,4CAiDjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/BreadCrumb/BreadCrumb.js

@@ -0,0 +1,37 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import BreadCrumbBase from './BreadCrumbBase.js';
+import Button from '../Button/Button.js';
+import { renderIcon } from '../../utils/renderIcon.js';
+import cn from '../../utils/cn.js';
+const textSizeClasses = {
+    '2xsmall': 'bread-crumb-2xs',
+    xsmall: 'bread-crumb-xs',
+    small: 'bread-crumb-sm',
+    medium: 'bread-crumb-md',
+    large: 'bread-crumb-lg',
+    xlarge: 'bread-crumb-xl',
+};
+const iconSizeClasses = {
+    '2xsmall': 'icon-2xs',
+    xsmall: 'icon-xs',
+    small: 'icon-sm',
+    medium: 'icon-md',
+    large: 'icon-lg',
+    xlarge: 'icon-xl',
+};
+const separatorIconSizeClasses = {
+    '2xsmall': '[&>svg]:icon-2xs',
+    xsmall: '[&>svg]:icon-xs',
+    small: '[&>svg]:icon-sm',
+    medium: '[&>svg]:icon-md',
+    large: '[&>svg]:icon-lg',
+    xlarge: '[&>svg]:icon-xl',
+};
+const BreadCrumb = ({ items, size = 'small', separator, className, }) => {
+    return (_jsx(BreadCrumbBase.Root, { children: _jsx(BreadCrumbBase.List, { className: className, children: items.map((item, index) => {
+                const isCurrent = index === items.length - 1;
+                return (_jsxs(React.Fragment, { children: [_jsx(BreadCrumbBase.Item, { className: "gap-xs", children: !item.href ? (_jsxs("span", { "aria-current": "page", className: cn(textSizeClasses[size], 'flex items-center text-neutral700 gap-0.5'), children: [renderIcon(item.icon, iconSizeClasses[size]), item.label] })) : (_jsx(Button, { as: "a", href: item.href, variant: "ghost", color: "neutral", size: size, leftIcon: item.icon, className: "h-auto! px-0! min-w-0 hover:bg-transparent active:bg-transparent text-neutral700 regular flex flex-row gap-0.5", children: item.label })) }), !isCurrent && (_jsx(BreadCrumbBase.Separator, { className: separatorIconSizeClasses[size], children: separator }))] }, `${item.label}-${index}`));
+            }) }) }));
+};
+export default BreadCrumb;

package/dist/components/BreadCrumb/BreadCrumbBase.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export declare const BreadCrumb: {
+    Root: ({ className, ...props }: React.ComponentProps<"nav">) => import("react/jsx-runtime").JSX.Element;
+    List: ({ className, ...props }: React.ComponentProps<"ol">) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ className, children, ...props }: React.ComponentProps<"li">) => import("react/jsx-runtime").JSX.Element;
+    Separator: ({ children, className, ...props }: React.ComponentProps<"li">) => import("react/jsx-runtime").JSX.Element;
+};
+export default BreadCrumb;
+//# sourceMappingURL=BreadCrumbBase.d.ts.map

package/dist/components/BreadCrumb/BreadCrumbBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadCrumbBase.d.ts","sourceRoot":"","sources":["../../../src/components/BreadCrumb/BreadCrumbBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA8C/B,eAAO,MAAM,UAAU;oCA1CgB,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;oCAI3B,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC;8CAU9D,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC;mDAY1B,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC;CAgB4B,CAAC;AAE1D,eAAe,UAAU,CAAC"}

package/dist/components/BreadCrumb/BreadCrumbBase.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChevronRightIcon } from 'lucide-react';
+import cn from '../../utils/cn.js';
+const Root = ({ className, ...props }) => {
+    return _jsx("nav", { "aria-label": "breadcrumb", className: cn(className), ...props });
+};
+const List = ({ className, ...props }) => {
+    return (_jsx("ol", { className: cn('flex flex-wrap items-center', className), ...props }));
+};
+const Item = ({ className, children, ...props }) => {
+    return (_jsx("li", { className: cn('inline-flex items-center', className), ...props, children: children }));
+};
+const Separator = ({ children, className, ...props }) => {
+    return (_jsx("li", { role: "presentation", "aria-hidden": "true", className: cn('inline-flex items-center justify-center text-neutral700 [&>svg]:shrink-0', className), ...props, children: children ?? _jsx(ChevronRightIcon, {}) }));
+};
+export const BreadCrumb = { Root, List, Item, Separator };
+export default BreadCrumb;

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

@@ -1,9 +1,8 @@
 interface ButtonSpinnerProps {
     size?: ButtonSpinnerSize;
-    repeat?: 'once' | 'infinite';
     className?: string;
 }
 type ButtonSpinnerSize = '2xsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-declare const ButtonSpinner: ({ size, repeat, className, }: ButtonSpinnerProps) => import("react/jsx-runtime").JSX.Element;
+declare const ButtonSpinner: ({ size, className }: ButtonSpinnerProps) => import("react/jsx-runtime").JSX.Element;
 export default ButtonSpinner;
 //# sourceMappingURL=ButtonSpinner.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonSpinner.d.ts","sourceRoot":"","sources":["../../../src/components/Button/ButtonSpinner.tsx"],"names":[],"mappings":"AAEA,UAAU,kBAAkB;IAC1B,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,KAAK,iBAAiB,GAClB,SAAS,GACT,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,CAAC;AAWb,QAAA,MAAM,aAAa,GAAI,8BAIpB,kBAAkB,4CAWpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ButtonSpinner.d.ts","sourceRoot":"","sources":["../../../src/components/Button/ButtonSpinner.tsx"],"names":[],"mappings":"AAGA,UAAU,kBAAkB;IAC1B,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,KAAK,iBAAiB,GAClB,SAAS,GACT,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,CAAC;AAWb,QAAA,MAAM,aAAa,GAAI,qBAA+B,kBAAkB,4CAMvE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/Button/ButtonSpinner.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import Spinner from '../Spinner/Spinner.js';
 import cn from '../../utils/cn.js';
 const sizeClasses = {
     '2xsmall': 'spinner-2xs',
@@ -8,7 +9,7 @@ const sizeClasses = {
     large: 'spinner-lg',
     xlarge: 'spinner-xl',
 };
-const ButtonSpinner = ({ size = 'small', repeat, className, }) => {
-    return (_jsx("div", { className: cn('shrink-0 rounded-full border-2 border-current border-t-transparent', sizeClasses[size], repeat !== 'once' && 'animate-spin', className) }));
+const ButtonSpinner = ({ size = 'small', className }) => {
+    return (_jsx(Spinner, { className: cn('shrink-0 text-current', sizeClasses[size], className) }));
 };
 export default ButtonSpinner;

package/dist/components/Callout/Callout.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from 'react';
+interface INoticeProps {
+    title: string;
+    description?: string;
+    button?: ReactNode;
+    className?: string;
+}
+declare const Callout: (props: INoticeProps) => import("react/jsx-runtime").JSX.Element;
+export default Callout;
+//# sourceMappingURL=Callout.d.ts.map

package/dist/components/Callout/Callout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Callout.d.ts","sourceRoot":"","sources":["../../../src/components/Callout/Callout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,OAAO,GAAI,OAAO,YAAY,4CAUnC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/Callout/Callout.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CalloutBase from './CalloutBase.js';
+const Callout = (props) => {
+    return (_jsxs(CalloutBase.Root, { className: props.className, children: [_jsxs("div", { className: "flex flex-col gap-xs", children: [_jsx(CalloutBase.Title, { title: props.title }), _jsx(CalloutBase.Description, { description: props.description })] }), props.button] }));
+};
+export default Callout;

package/dist/components/Callout/CalloutBase.d.ts

@@ -0,0 +1,18 @@
+import { HTMLAttributes, ReactNode, Ref } from 'react';
+interface RootProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const CalloutBase: {
+    Root: ({ ref, children, className, ...props }: RootProps) => import("react/jsx-runtime").JSX.Element;
+    Title: (props: {
+        title?: string;
+        className?: string;
+    }) => import("react/jsx-runtime").JSX.Element | null;
+    Description: (props: {
+        description?: string;
+        className?: string;
+    }) => import("react/jsx-runtime").JSX.Element | null;
+};
+export default CalloutBase;
+//# sourceMappingURL=CalloutBase.d.ts.map

package/dist/components/Callout/CalloutBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalloutBase.d.ts","sourceRoot":"","sources":["../../../src/components/Callout/CalloutBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGvD,UAAU,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IACxD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAqCD,eAAO,MAAM,WAAW;mDAnC8B,SAAS;mBAezC;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE;yBAUhC;QAAE,WAAW,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE;CAcvE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/Callout/CalloutBase.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from '../../utils/cn.js';
+const Root = ({ ref, children, className, ...props }) => {
+    return (_jsx("div", { ref: ref, className: cn('inline-flex flex-row items-center justify-between bg-tintBlue w-full p-5 rounded-lg', className), ...props, children: children }));
+};
+const Title = (props) => {
+    if (!props.title)
+        return null;
+    return (_jsx("span", { className: cn('text-lb500 extrabold display16', props.className), children: props.title }));
+};
+const Description = (props) => {
+    if (!props.description)
+        return null;
+    return (_jsx("span", { className: cn('text-lb500 display14', props.className), children: props.description }));
+};
+export const CalloutBase = {
+    Root,
+    Title,
+    Description,
+};
+export default CalloutBase;

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,9 @@
+import { type DividerBaseRootProps } from './DividerBase.js';
+export type TOrientation = 'horizontal' | 'vertical';
+export interface DividerProps extends Omit<DividerBaseRootProps, 'children'> {
+    orientation?: TOrientation;
+    decorative?: boolean;
+}
+declare const Divider: ({ orientation, decorative, className, ...props }: DividerProps) => import("react/jsx-runtime").JSX.Element;
+export default Divider;
+//# sourceMappingURL=Divider.d.ts.map

package/dist/components/Divider/Divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":"AACA,OAAoB,EAAE,KAAK,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAEvE,MAAM,MAAM,YAAY,GAAG,YAAY,GAAG,UAAU,CAAC;AAErD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC;IAC1E,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAOD,QAAA,MAAM,OAAO,GAAI,kDAKd,YAAY,4CASd,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/Divider/Divider.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from '../../utils/cn.js';
+import DividerBase from './DividerBase.js';
+const orientationClasses = {
+    horizontal: 'w-full h-px',
+    vertical: 'h-full w-px',
+};
+const Divider = ({ orientation = 'horizontal', decorative = true, className, ...props }) => {
+    return (_jsx(DividerBase.Root, { role: decorative ? 'undefined' : 'separator', "aria-orientation": decorative ? undefined : orientation, className: cn(orientationClasses[orientation], className), ...props }));
+};
+export default Divider;

package/dist/components/Divider/DividerBase.d.ts

@@ -0,0 +1,9 @@
+import { type HTMLAttributes, type Ref } from 'react';
+export interface DividerBaseRootProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const DividerBase: {
+    Root: ({ ref, className, ...props }: DividerBaseRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default DividerBase;
+//# sourceMappingURL=DividerBase.d.ts.map

package/dist/components/Divider/DividerBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DividerBase.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/DividerBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAGtD,MAAM,WAAW,oBAAqB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC1E,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAYD,eAAO,MAAM,WAAW;yCAVoB,oBAAoB;CAY/D,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/Divider/DividerBase.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from '../../utils/cn.js';
+const Root = ({ ref, className, ...props }) => {
+    return (_jsx("div", { ref: ref, className: cn('shrink-0 bg-neutral100', className), ...props }));
+};
+export const DividerBase = {
+    Root,
+};
+export default DividerBase;

package/dist/components/FileUpload/FileUploadBase.d.ts

@@ -1,8 +1,8 @@
 import { Dispatch, type ReactNode, SetStateAction } from 'react';
 import { TMimeType } from '../../constants/file.js';
-import { type ButtonProps } from '../../components/Button/Button.js';
+import { type LDButtonProps } from '../../components/LDButton/LDButton.js';
 import { IFile } from '../../utils/file.js';
-interface EditorContextType {
+interface FileUploadContextType {
     recommendedSize?: {
         width: number;
         height: number;
@@ -13,7 +13,7 @@ interface EditorContextType {
     setFileList: Dispatch<SetStateAction<IFile[]>>;
     maxFileCount: number;
 }
-export declare const useFileUploadContext: () => EditorContextType;
+export declare const useFileUploadContext: () => FileUploadContextType;
 interface RootProps {
     recommendedSize?: {
         width: number;
@@ -27,7 +27,7 @@ interface RootProps {
     className?: string;
     children?: ReactNode;
 }
-interface InputProps extends ButtonProps<'button'> {
+interface LDInputProps extends LDButtonProps<'button'> {
     onChangeFile: ({ fileName, fileBase64, file, }: {
         fileName: string;
         fileBase64: string;
@@ -37,7 +37,7 @@ interface InputProps extends ButtonProps<'button'> {
 }
 export declare const FileUploadBase: {
     Root: ({ recommendedSize, maxSize, allowedExtensions, maxFileCount, fileList, setFileList, className, children, }: RootProps) => import("react/jsx-runtime").JSX.Element;
-    Input: ({ onChangeFile, label, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
+    LDInput: ({ onChangeFile, label, ...props }: LDInputProps) => import("react/jsx-runtime").JSX.Element;
     CardList: ({ emptyContent, className, }: {
         emptyContent?: ReactNode;
         className?: string;

package/dist/components/FileUpload/FileUploadBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploadBase.d.ts","sourceRoot":"","sources":["../../../src/components/FileUpload/FileUploadBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,QAAQ,EACR,KAAK,SAAS,EACd,cAAc,EAIf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAmB,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAe,EAAE,KAAK,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC1E,OAAO,EAGL,KAAK,EAKN,MAAM,kBAAkB,CAAC;AAG1B,UAAU,iBAAiB;IACzB,eAAe,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,SAAS,EAAE,CAAC;IAC/B,QAAQ,EAAE,KAAK,EAAE,CAAC;IAClB,WAAW,EAAE,QAAQ,CAAC,cAAc,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAC/C,YAAY,EAAE,MAAM,CAAC;CACtB;AAID,eAAO,MAAM,oBAAoB,yBAUhC,CAAC;AAEF,UAAU,SAAS;IACjB,eAAe,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,SAAS,EAAE,CAAC;IAC/B,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC;IACvB,WAAW,EAAE,QAAQ,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;IACpD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA8BD,UAAU,UAAW,SAAQ,WAAW,CAAC,QAAQ,CAAC;IAChD,YAAY,EAAE,CAAC,EACb,QAAQ,EACR,UAAU,EACV,IAAI,GACL,EAAE;QACD,QAAQ,EAAE,MAAM,CAAC;QACjB,UAAU,EAAE,MAAM,CAAC;QACnB,IAAI,EAAE,IAAI,CAAC;KACZ,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA+ID,eAAO,MAAM,cAAc;uHA7KxB,SAAS;+CAgCgD,UAAU;6CA2EnE;QACD,YAAY,CAAC,EAAE,SAAS,CAAC;QACzB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB;iCA6CmC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE;CAuBzD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"FileUploadBase.d.ts","sourceRoot":"","sources":["../../../src/components/FileUpload/FileUploadBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,QAAQ,EACR,KAAK,SAAS,EACd,cAAc,EAGf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAmB,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAiB,EACf,KAAK,aAAa,EACnB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAGL,KAAK,EAKN,MAAM,kBAAkB,CAAC;AAG1B,UAAU,qBAAqB;IAC7B,eAAe,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,SAAS,EAAE,CAAC;IAC/B,QAAQ,EAAE,KAAK,EAAE,CAAC;IAClB,WAAW,EAAE,QAAQ,CAAC,cAAc,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAC/C,YAAY,EAAE,MAAM,CAAC;CACtB;AAID,eAAO,MAAM,oBAAoB,6BAUhC,CAAC;AAEF,UAAU,SAAS;IACjB,eAAe,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,SAAS,EAAE,CAAC;IAC/B,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC;IACvB,WAAW,EAAE,QAAQ,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;IACpD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA8BD,UAAU,YAAa,SAAQ,aAAa,CAAC,QAAQ,CAAC;IACpD,YAAY,EAAE,CAAC,EACb,QAAQ,EACR,UAAU,EACV,IAAI,GACL,EAAE;QACD,QAAQ,EAAE,MAAM,CAAC;QACjB,UAAU,EAAE,MAAM,CAAC;QACnB,IAAI,EAAE,IAAI,CAAC;KACZ,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAmJD,eAAO,MAAM,cAAc;uHAjLxB,SAAS;iDAoCT,YAAY;6CA2EZ;QACD,YAAY,CAAC,EAAE,SAAS,CAAC;QACzB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB;iCA6CmC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE;CAuBzD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/FileUpload/FileUploadBase.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { createContext, useContext, } from 'react';
 import cn from '../../utils/cn.js';
 import { FILE_EXTENSIONS } from '../../constants/file.js';
-import Button from '../../components/Button/Button.js';
+import LDButton from '../../components/LDButton/LDButton.js';
 import { fileToBase64, getFileSizeUnit, isImage, validAllowedExtesions, validFileSize, validImageSize, } from '../../utils/file.js';
 import Toast from '../../components/Toast/Toast.js';
 const FileUploadContext = createContext(null);
@@ -25,7 +25,7 @@ const Root = ({ recommendedSize, maxSize, allowedExtensions, maxFileCount, fileL
             setFileList,
         }, children: _jsx("div", { className: cn('w-full', className), children: children }) }));
 };
-const Input = ({ onChangeFile, label = '파일 선택', ...props }) => {
+const LDInput = ({ onChangeFile, label = '파일 선택', ...props }) => {
     const { allowedExtensions, maxSize, fileList, setFileList, maxFileCount } = useFileUploadContext();
     const getFileError = async (file) => {
         if (!validAllowedExtesions(file, allowedExtensions)) {
@@ -70,7 +70,7 @@ const Input = ({ onChangeFile, label = '파일 선택', ...props }) => {
             }
         }
     };
-    return (_jsxs(Button, { as: "label", ...props, children: [label, _jsx("input", { type: "file", multiple: maxFileCount > 1, onClick: (e) => (e.currentTarget.value = ''), onChange: (e) => handleFile(e), className: "sr-only" })] }));
+    return (_jsxs(LDButton, { as: "label", ...props, children: [label, _jsx("input", { type: "file", multiple: maxFileCount > 1, onClick: (e) => (e.currentTarget.value = ''), onChange: (e) => handleFile(e), className: "sr-only" })] }));
 };
 const CardList = ({ emptyContent, className, }) => {
     /*
@@ -95,7 +95,7 @@ const Description = ({ className }) => {
 };
 export const FileUploadBase = {
     Root,
-    Input,
+    LDInput,
     CardList,
     Description,
 };

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

@@ -18,7 +18,7 @@ interface FormFieldRenderProps<TValue = any> {
         value: TValue;
         /**
          * react-hook-form의 controllerField.ref와 외부 ref를 합친 콜백 ref.
-         * Input, Select 등 다양한 DOM 요소에 연결되므로 element 타입을 any로 받음.
+         * LDInput, LDSelect 등 다양한 DOM 요소에 연결되므로 element 타입을 any로 받음.
          */
         ref: (element: any) => void;
         /**
@@ -44,7 +44,7 @@ interface FormFieldProps<TValue = any> {
     customErrorMessage?: string;
     disabled?: boolean;
     /**
-     * Input, Select 등 다양한 컴포넌트의 ref를 받아야 하므로 Ref<any>로 선언.
+     * LDInput, LDSelect 등 다양한 컴포넌트의 ref를 받아야 하므로 Ref<any>로 선언.
      * (HTMLInputElement, HTMLButtonElement 등 요소 타입이 사용처마다 다름)
      */
     ref?: Ref<any>;

package/dist/components/LDAvatar/AvatarBase.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from 'react';
+interface AvatarContextType {
+    src?: string | null;
+    status: 'idle' | 'loading' | 'loaded' | 'error';
+    setStatus: (status: 'idle' | 'loading' | 'loaded' | 'error') => void;
+}
+export declare const useAvatarContext: () => AvatarContextType;
+interface RootProps {
+    src?: string | null;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: ReactNode;
+}
+interface ImageProps {
+    alt?: string;
+    width?: number;
+    height?: number;
+    className?: string;
+}
+interface FallbackProps {
+    className?: string;
+    children?: ReactNode;
+    /** 이미지 로드 지연 처리용 딜레이(ms). 기본값 0 (즉시 표시) */
+    delayMs?: number;
+}
+export declare const AvatarBase: {
+    Root: ({ src, className, style, children }: RootProps) => import("react/jsx-runtime").JSX.Element;
+    Image: ({ alt, width, height, className }: ImageProps) => import("react/jsx-runtime").JSX.Element | null;
+    Fallback: ({ className, children, delayMs }: FallbackProps) => import("react/jsx-runtime").JSX.Element | null;
+};
+export default AvatarBase;
+//# sourceMappingURL=AvatarBase.d.ts.map

package/dist/components/LDAvatar/AvatarBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDAvatar/AvatarBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAIf,UAAU,iBAAiB;IACzB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;IAChD,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,KAAK,IAAI,CAAC;CACtE;AAID,eAAO,MAAM,gBAAgB,yBAO5B,CAAC;AAGF,UAAU,SAAS;IACjB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAiCD,UAAU,UAAU;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAqBD,UAAU,aAAa;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AA6BD,eAAO,MAAM,UAAU;gDA3F4B,SAAS;+CAsCC,UAAU;iDA0Bf,aAAa;CA+BpE,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/LDAvatar/AvatarBase.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState, useEffect, } from 'react';
+import cn from '../../utils/cn.js';
+const AvatarContext = createContext(null);
+export const useAvatarContext = () => {
+    const ctx = useContext(AvatarContext);
+    if (!ctx)
+        throw new Error('AvatarBase 하위 컴포넌트는 Root 내부에서 사용해야 합니다.');
+    return ctx;
+};
+const Root = ({ src, className, style, children }) => {
+    const [status, setStatus] = useState(src ? 'loading' : 'error');
+    useEffect(() => {
+        setStatus(src ? 'loading' : 'error');
+    }, [src]);
+    return (_jsx(AvatarContext, { value: {
+            src,
+            status,
+            setStatus,
+        }, children: _jsx("span", { style: style, className: cn('relative flex shrink-0 overflow-hidden rounded-full', className), children: children }) }));
+};
+const Image = ({ alt = 'avatar', width, height, className }) => {
+    const { src, status, setStatus } = useAvatarContext();
+    if (!src || status === 'error')
+        return null;
+    return (_jsx("img", { src: src, alt: alt, width: width, height: height, onLoad: () => setStatus('loaded'), onError: () => setStatus('error'), className: cn('aspect-square h-full w-full object-cover', className) }));
+};
+const Fallback = ({ className, children, delayMs = 0 }) => {
+    const { status } = useAvatarContext();
+    const [show, setShow] = useState(delayMs === 0);
+    useEffect(() => {
+        if (delayMs === 0) {
+            setShow(true);
+            return;
+        }
+        const timer = setTimeout(() => setShow(true), delayMs);
+        return () => clearTimeout(timer);
+    }, [delayMs]);
+    if (status === 'loaded' || !show)
+        return null;
+    return (_jsx("span", { className: cn('flex h-full w-full items-center justify-center rounded-full', className), children: children }));
+};
+export const AvatarBase = {
+    Root,
+    Image,
+    Fallback,
+};
+export default AvatarBase;

package/dist/components/LDAvatar/LDAvatar.d.ts

@@ -0,0 +1,11 @@
+type AvatarSize = 'sm' | 'md' | 'lg';
+export interface LDAvatarProps {
+    src?: string | null;
+    alt?: string;
+    size?: AvatarSize;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const LDAvatar: ({ src, alt, size, className, style, }: LDAvatarProps) => import("react/jsx-runtime").JSX.Element;
+export default LDAvatar;
+//# sourceMappingURL=LDAvatar.d.ts.map

package/dist/components/LDAvatar/LDAvatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LDAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/LDAvatar/LDAvatar.tsx"],"names":[],"mappings":"AAKA,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAqBrC,MAAM,WAAW,aAAa;IAC5B,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,QAAQ,GAAI,uCAMf,aAAa,4CAef,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/LDAvatar/LDAvatar.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { UserRound } from 'lucide-react';
+import AvatarBase from './AvatarBase.js';
+import cn from '../../utils/cn.js';
+const SIZE_MAP = {
+    sm: 'w-8 h-8',
+    md: 'w-12 h-12',
+    lg: 'w-16 h-16',
+};
+const IMAGE_SIZE_MAP = {
+    sm: 32,
+    md: 48,
+    lg: 64,
+};
+const ICON_SIZE_MAP = {
+    sm: 24,
+    md: 32,
+    lg: 40,
+};
+const LDAvatar = ({ src, alt = 'avatar', size = 'sm', className, style, }) => {
+    const px = IMAGE_SIZE_MAP[size];
+    return (_jsxs(AvatarBase.Root, { src: src, style: style, className: cn(SIZE_MAP[size], className), children: [_jsx(AvatarBase.Image, { alt: alt, width: px, height: px }), _jsx(AvatarBase.Fallback, { className: "bg-mono100", children: _jsx(UserRound, { size: ICON_SIZE_MAP[size], className: "text-mono400" }) })] }));
+};
+export default LDAvatar;

package/dist/components/LDBadge/BadgeBase.d.ts

@@ -0,0 +1,10 @@
+import { type HTMLAttributes, type ReactNode, type Ref } from 'react';
+interface RootProps extends HTMLAttributes<HTMLSpanElement> {
+    children?: ReactNode;
+    ref?: Ref<HTMLSpanElement>;
+}
+export declare const BadgeBase: {
+    Root: ({ className, children, ref, ...props }: RootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default BadgeBase;
+//# sourceMappingURL=BadgeBase.d.ts.map

package/dist/components/LDBadge/BadgeBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDBadge/BadgeBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAItE,UAAU,SAAU,SAAQ,cAAc,CAAC,eAAe,CAAC;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC5B;AAcD,eAAO,MAAM,SAAS;mDAZgC,SAAS;CAc9D,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/LDBadge/BadgeBase.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from '../../utils/cn.js';
+const Root = ({ className, children, ref, ...props }) => {
+    return (_jsx("span", { ref: ref, className: cn('inline-flex items-center justify-center', className), ...props, children: children }));
+};
+export const BadgeBase = {
+    Root,
+};
+export default BadgeBase;