@loword/loword-design-system 0.0.1

package/README.md

@@ -0,0 +1,20 @@
+# @loword/ui-custom
+
+노코드 빌더용 React 컴포넌트 패키지입니다.
+
+## 빠른 시작
+
+```bash
+pnpm install          # 의존성 설치
+pnpm storybook        # Storybook 개발 서버 (port 6006)
+pnpm build            # 프로덕션 빌드
+```
+
+## 문서
+
+- **아키텍처 및 상세 가이드**: [docs/architecture.md](./docs/architecture.md)
+  - 3-Layer 구조 (Base → Custom → Function)
+  - 컴포넌트 목록 및 특수 구조
+  - 스타일 체계 (디자인 토큰, `cn()`)
+  - Storybook 스타일 제어 및 stories 생성 방법
+  - Props 문서화 (JSDoc)

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAKA,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAqBrC,MAAM,WAAW,WAAW;IAC1B,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,MAAM,GAAI,uCAMb,WAAW,4CAeb,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/Avatar/Avatar.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 Avatar = ({ 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 Avatar;

package/dist/components/Avatar/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/Avatar/AvatarBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarBase.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/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/Avatar/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/Badge/Badge.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from 'react';
+import { type IconName } from '../Icon/LucideIcon.js';
+type BadgeSize = 'xsmall' | 'small' | 'medium' | 'large';
+type BadgeColor = 'orange' | 'fillOrange' | 'red' | 'fillRed' | 'green' | 'fillGreen' | 'blue' | 'fillBlue' | 'yellow' | 'fillYellow' | 'gray' | 'fillGray';
+export interface BadgeProps<T extends string> {
+    /** 뱃지 유형 키 (colorsMap의 키와 매칭) */
+    type: T;
+    /** 뱃지 사이즈 */
+    size?: BadgeSize;
+    /** type별 색상 매핑 객체 (프리셋 BadgeColor 또는 커스텀 Tailwind 클래스) */
+    colorsMap: Record<T, BadgeColor | string>;
+    /** 뱃지 내용 */
+    children?: ReactNode;
+    /** 왼쪽 아이콘 (IconName 또는 ReactNode) */
+    leftIcon?: IconName | ReactNode;
+    /** 오른쪽 아이콘 (IconName 또는 ReactNode) */
+    rightIcon?: IconName | ReactNode;
+    /** 추가 CSS 클래스 */
+    className?: string;
+    /** 인라인 스타일 */
+    style?: React.CSSProperties;
+}
+declare const Badge: <T extends string>({ type, size, colorsMap, children, leftIcon, rightIcon, className, style, }: BadgeProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default Badge;
+//# sourceMappingURL=Badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAInD,KAAK,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AACzD,KAAK,UAAU,GACX,QAAQ,GACR,YAAY,GACZ,KAAK,GACL,SAAS,GACT,OAAO,GACP,WAAW,GACX,MAAM,GACN,UAAU,GACV,QAAQ,GACR,YAAY,GACZ,MAAM,GACN,UAAU,CAAC;AAEf,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,MAAM;IAC1C,iCAAiC;IACjC,IAAI,EAAE,CAAC,CAAC;IACR,aAAa;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0DAA0D;IAC1D,SAAS,EAAE,MAAM,CAAC,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,CAAC;IAC1C,YAAY;IACZ,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAChC,sCAAsC;IACtC,SAAS,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACjC,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AA+BD,QAAA,MAAM,KAAK,GAAI,CAAC,SAAS,MAAM,EAAE,6EAS9B,UAAU,CAAC,CAAC,CAAC,4CAmBf,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/Badge/Badge.js

@@ -0,0 +1,36 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import BadgeBase from './BadgeBase.js';
+import { renderIcon } from '../../utils/renderIcon.js';
+import cn from '../../utils/cn.js';
+const colorClasses = {
+    orange: 'bg-tintOrange text-orange500',
+    fillOrange: 'bg-orange400 text-white',
+    green: 'bg-tintGreen text-green700',
+    fillGreen: 'bg-success600 text-white',
+    red: 'bg-tintRed text-red200',
+    fillRed: 'bg-danger600 text-white',
+    blue: 'bg-tintBlue text-blue200',
+    fillBlue: 'bg-accept600 text-white',
+    yellow: 'bg-tintYellow text-yellow700',
+    fillYellow: 'bg-warning600 text-white',
+    gray: 'bg-mono200 text-neutral800',
+    fillGray: 'bg-neutral200 text-white',
+};
+const sizeClasses = {
+    xsmall: 'badge-xs',
+    small: 'badge-sm',
+    medium: 'badge-md',
+    large: 'badge-lg',
+};
+const iconSizes = {
+    xsmall: 'icon-xs',
+    small: 'icon-sm',
+    medium: 'icon-md',
+    large: 'icon-lg',
+};
+const Badge = ({ type, size = 'small', colorsMap, children, leftIcon, rightIcon, className, style, }) => {
+    const color = colorsMap[type];
+    const iconSize = iconSizes[size];
+    return (_jsxs(BadgeBase.Root, { className: cn('w-auto text-center whitespace-nowrap border border-transparent', colorClasses[color] ?? color, sizeClasses[size], className), style: style, children: [renderIcon(leftIcon, iconSize), children, renderIcon(rightIcon, iconSize)] }));
+};
+export default Badge;

package/dist/components/Badge/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/Badge/BadgeBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeBase.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/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/Badge/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;

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { type ElementType } from 'react';
+import { PolymorphicComponentProps } from '../../types/polymorphic.js';
+import { type IconName } from '../Icon/LucideIcon.js';
+type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'link';
+type ButtonColor = 'neutral' | 'point' | 'danger';
+export type ButtonSize = '2xsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+type ButtonShape = 'default' | 'capsule';
+type ButtonAlign = 'left' | 'center' | 'right';
+type _ButtonProps = {
+    variant?: ButtonVariant;
+    color?: ButtonColor;
+    size?: ButtonSize;
+    shape?: ButtonShape;
+    align?: ButtonAlign;
+    loading?: boolean;
+    block?: boolean;
+    leftIcon?: IconName | React.ReactNode;
+    rightIcon?: IconName | React.ReactNode;
+    compact?: boolean;
+};
+export type ButtonProps<T extends ElementType> = PolymorphicComponentProps<T, _ButtonProps>;
+type ButtonComponent = <T extends React.ElementType = 'button'>(props: ButtonProps<T>) => React.ReactElement | null;
+declare const Button: ButtonComponent;
+export default Button;
+//# sourceMappingURL=Button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAQnD,KAAK,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAC5D,KAAK,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAClD,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,CAAC;AACb,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;AACzC,KAAK,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAkG/C,KAAK,YAAY,GAAG;IAClB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC;IACtC,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,IAAI,yBAAyB,CACxE,CAAC,EACD,YAAY,CACb,CAAC;AAEF,KAAK,eAAe,GAAG,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAC5D,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAClB,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B,QAAA,MAAM,MAAM,EAAE,eAoEb,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/Button/Button.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from '../../utils/cn.js';
+import ButtonBase from './ButtonBase.js';
+import { renderIcon } from '../../utils/renderIcon.js';
+import ButtonSpinner from './ButtonSpinner.js';
+// ── 스타일 매핑 (static) ──
+const variantBaseClasses = {
+    solid: {
+        neutral: 'bg-neutral800 text-white',
+        point: 'bg-lb500 text-white',
+        danger: 'bg-danger500 text-white',
+    },
+    outline: {
+        neutral: 'bg-white outline outline-neutral200',
+        point: 'bg-white outline outline-lb500 text-lb500',
+        danger: 'bg-white outline outline-danger500 text-danger500',
+    },
+    ghost: {
+        neutral: 'bg-transparent',
+        point: 'bg-transparent text-lb500',
+        danger: 'bg-transparent text-danger500',
+    },
+    link: {
+        neutral: 'bg-transparent underline underline-offset-[4px]',
+        point: 'bg-transparent text-lb500 underline underline-offset-[4px]',
+        danger: 'bg-transparent text-danger500 underline underline-offset-[4px]',
+    },
+};
+const variantHoverClasses = {
+    solid: {
+        neutral: 'hover:bg-neutral900 active:bg-neutral900',
+        point: 'hover:bg-lb700 active:bg-lb700',
+        danger: 'hover:bg-danger700 active:bg-danger700',
+    },
+    outline: {
+        neutral: 'hover:bg-mono100 active:bg-mono100',
+        point: 'hover:bg-accept50 active:bg-accept50',
+        danger: 'hover:bg-danger50 active:bg-danger50',
+    },
+    ghost: {
+        neutral: 'hover:bg-mono100',
+        point: 'hover:bg-accept50',
+        danger: 'hover:bg-danger50',
+    },
+    link: {
+        neutral: 'hover:text-neutral700 active:text-neutral700',
+        point: 'hover:text-lb700 active:text-lb700',
+        danger: 'hover:text-danger600 active:text-danger600',
+    },
+};
+const variantDisabledClasses = {
+    solid: 'bg-mono300 text-white',
+    outline: 'text-mono300 outline outline-neutral100',
+    ghost: 'text-mono300',
+    link: 'text-mono300 underline underline-offset-[4px]',
+};
+const colorFocusClasses = {
+    neutral: 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral800',
+    point: 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-lb500',
+    danger: 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-danger500',
+};
+const sizeClasses = {
+    '2xsmall': 'btn-2xs',
+    xsmall: 'btn-xs',
+    small: 'btn-sm',
+    medium: 'btn-md',
+    large: 'btn-lg',
+    xlarge: 'btn-xl',
+};
+const iconSizeClasses = {
+    '2xsmall': 'icon-2xs',
+    xsmall: 'icon-xs',
+    small: 'icon-sm',
+    medium: 'icon-md',
+    large: 'icon-lg',
+    xlarge: 'icon-xl',
+};
+const alignClasses = {
+    left: 'justify-start',
+    center: 'justify-center',
+    right: 'justify-end',
+};
+const shapeClasses = {
+    default: 'rounded-[5px]',
+    capsule: 'rounded-full',
+};
+const Button = ({ as, variant = 'solid', color = 'point', size = 'small', shape = 'default', align = 'center', loading = false, block = false, children, className, leftIcon, rightIcon, compact = false, ref, ...props }) => {
+    const iconSize = iconSizeClasses[size];
+    return (_jsxs(ButtonBase.Root, { as: as, ref: ref, className: cn('relative ld-transition', {
+            [variantBaseClasses[variant][color]]: !props.disabled,
+            [variantHoverClasses[variant][color]]: !props.disabled && !loading,
+            [variantDisabledClasses[variant]]: props.disabled,
+        }, {
+            [`${colorFocusClasses[color]} focus-visible:ring-offset-2`]: variant === 'solid',
+            [`${colorFocusClasses[color]} focus-visible:ring-inset`]: variant !== 'solid',
+        }, {
+            ['cursor-pointer']: !props.disabled && !loading,
+            ['cursor-wait']: !props.disabled && loading,
+            ['cursor-not-allowed']: props.disabled,
+        }, block && 'w-full', sizeClasses[size], shapeClasses[shape], alignClasses[align], compact && 'px-0 min-w-0 aspect-square', className), ...props, disabled: props.disabled || loading, children: [loading ? (_jsx(ButtonSpinner, { size: size, className: "mobile:absolute mobile:left-1/2 mobile:top-1/2 mobile:-translate-x-1/2 mobile:-translate-y-1/2" })) : (renderIcon(leftIcon, iconSize)), children && (_jsx("span", { className: cn('shrink-0', loading && 'mobile:invisible'), children: children })), renderIcon(rightIcon, iconSize, loading && 'mobile:invisible')] }));
+};
+export default Button;

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

@@ -0,0 +1,5 @@
+export declare const ButtonBase: {
+    Root: React.ElementType;
+};
+export default ButtonBase;
+//# sourceMappingURL=ButtonBase.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonBase.d.ts","sourceRoot":"","sources":["../../../src/components/Button/ButtonBase.tsx"],"names":[],"mappings":"AA0BA,eAAO,MAAM,UAAU;UACP,KAAK,CAAC,WAAW;CAChC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/Button/ButtonBase.js

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

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

@@ -0,0 +1,9 @@
+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;
+export default ButtonSpinner;
+//# sourceMappingURL=ButtonSpinner.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/Button/ButtonSpinner.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from '../../utils/cn.js';
+const sizeClasses = {
+    '2xsmall': 'spinner-2xs',
+    xsmall: 'spinner-xs',
+    small: 'spinner-sm',
+    medium: 'spinner-md',
+    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) }));
+};
+export default ButtonSpinner;

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

@@ -0,0 +1,16 @@
+import { type DayPickerProps, type Matcher } from 'react-day-picker';
+import { type CSSProperties } from 'react';
+/** react-day-picker의 DayPickerProps를 확장한 캘린더 props */
+type CalendarProps = DayPickerProps & {
+    /** 추가 CSS 클래스 */
+    className?: string;
+    /** 인라인 스타일 */
+    style?: CSSProperties;
+    /** 예약 완료된 날짜 (취소선 표시) */
+    booked?: Matcher | Matcher[];
+    /** 예약 가능한 날짜 (아래에 점 표시) */
+    book?: Matcher | Matcher[];
+};
+declare const Calendar: ({ className, style, classNames, showOutsideDays, captionLayout, formatters, components, booked, book, modifiers, ...props }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
+export default Calendar;
+//# sourceMappingURL=Calendar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/components/Calendar/Calendar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,OAAO,EACb,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,KAAK,aAAa,EAInB,MAAM,OAAO,CAAC;AAIf,sDAAsD;AACtD,KAAK,aAAa,GAAG,cAAc,GAAG;IACpC,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc;IACd,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,yBAAyB;IACzB,MAAM,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;IAC7B,2BAA2B;IAC3B,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;CAC5B,CAAC;AAEF,QAAA,MAAM,QAAQ,GAAI,6HAYf,aAAa,4CAsJf,CAAC;AAoEF,eAAe,QAAQ,CAAC"}

package/dist/components/Calendar/Calendar.js

@@ -0,0 +1,75 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DayPicker, getDefaultClassNames, } from 'react-day-picker';
+import { useRef, useEffect, } from 'react';
+import LucideIcon from '../Icon/LucideIcon.js';
+import cn from '../../utils/cn.js';
+const Calendar = ({ className, style, classNames, showOutsideDays = true, captionLayout = 'label', formatters, components, booked, book, modifiers, ...props }) => {
+    // 라이브러리가 기본적으로 사용하는 모든 css 클래스 이름을 담고있는 객체
+    const defaultClassNames = getDefaultClassNames();
+    return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, startMonth: new Date(1900, 0), endMonth: new Date(new Date().getFullYear() + 10, 11), style: style, className: cn('bg-white group/calendar p-3 [--cell-size:--spacing(8)] w-fit', 
+        //rtl일때 버튼 아이콘 방향 전환
+        String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className), captionLayout: captionLayout, formatters: {
+            formatMonthDropdown: (date) => date.toLocaleString('default', { month: 'short' }),
+            ...formatters,
+        }, classNames: {
+            root: cn(defaultClassNames.root),
+            months: cn('flex gap-4 flex-col md:flex-row relative', defaultClassNames.months),
+            month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
+            nav: cn('flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between', defaultClassNames.nav),
+            button_previous: cn('inline-flex items-center justify-center rounded-md text-sm font-medium transition-all outline-none hover:bg-neutral-100 hover:text-neutral-900 focus-visible:border-neutral-950 focus-visible:ring-neutral-950/50 focus-visible:ring-[3px]', 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none cursor-pointer', defaultClassNames.button_previous),
+            button_next: cn('inline-flex items-center justify-center rounded-md text-sm font-medium transition-all outline-none hover:bg-neutral-100 hover:text-neutral-900 focus-visible:border-neutral-950 focus-visible:ring-neutral-950/50 focus-visible:ring-[3px]', 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none cursor-pointer', defaultClassNames.button_next),
+            month_caption: cn('flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)', defaultClassNames.month_caption),
+            dropdowns: cn('w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5', defaultClassNames.dropdowns),
+            dropdown_root: cn('relative has-focus:border-lb600 border border-neutral-200 shadow-xs has-focus:ring-lb600/50 has-focus:ring-[3px] rounded-md', defaultClassNames.dropdown_root),
+            dropdown: cn('absolute bg-white inset-0 opacity-0', defaultClassNames.dropdown),
+            caption_label: cn('select-none font-medium', captionLayout === 'label'
+                ? 'text-sm'
+                : cn('rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-neutral-500 [&>svg]:size-3.5'), defaultClassNames.caption_label),
+            table: 'w-full border-collapse',
+            weekdays: cn('flex', defaultClassNames.weekdays),
+            weekday: cn('text-neutral-500 rounded-md flex-1 font-normal text-[0.8rem] select-none', defaultClassNames.weekday),
+            week: cn('flex w-full mt-2', defaultClassNames.week),
+            week_number_header: cn('select-none w-(--cell-size)', defaultClassNames.week_number_header),
+            week_number: cn('text-[0.8rem] select-none text-neutral-500', defaultClassNames.week_number),
+            day: cn('relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none', defaultClassNames.day),
+            range_start: cn('rounded-l-md bg-neutral-100', defaultClassNames.range_start),
+            range_middle: cn('rounded-none', defaultClassNames.range_middle),
+            range_end: cn('rounded-r-md bg-neutral-100', defaultClassNames.range_end),
+            today: cn('bg-lb50 text-lb900 rounded-md data-[selected=true]:rounded-none font-semibold', defaultClassNames.today),
+            outside: cn('text-neutral-500 aria-selected:text-neutral-500', defaultClassNames.outside),
+            disabled: cn('text-neutral-500 opacity-50', defaultClassNames.disabled),
+            hidden: cn('invisible', defaultClassNames.hidden),
+            ...classNames,
+        }, modifiers: {
+            booked,
+            book,
+            ...modifiers,
+        }, components: {
+            Root: ({ className: rootClassName, rootRef, ...rootProps }) => (_jsx("div", { "data-slot": "calendar", ref: rootRef, className: cn(rootClassName), ...rootProps })),
+            Chevron: ({ className: chevronClassName, orientation }) => {
+                const iconName = orientation === 'left'
+                    ? 'chevronLeft'
+                    : orientation === 'right'
+                        ? 'chevronRight'
+                        : 'chevronDown';
+                return (_jsx(LucideIcon, { name: iconName, className: cn('size-4', chevronClassName) }));
+            },
+            DayButton: CalendarDayButton,
+            WeekNumber: ({ children, ...weekNumberProps }) => (_jsx("td", { ...weekNumberProps, children: _jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children: children }) })),
+            ...components,
+        }, ...props }));
+};
+function CalendarDayButton({ className: btnClassName, day, modifiers, ...btnProps }) {
+    const defaultClassNames = getDefaultClassNames();
+    const ref = useRef(null);
+    useEffect(() => {
+        if (modifiers.focused)
+            ref.current?.focus();
+    }, [modifiers.focused]);
+    return (_jsxs("button", { ref: ref, type: "button", "data-day": day.date.toLocaleDateString(), "data-selected-single": modifiers.selected &&
+            !modifiers.range_start &&
+            !modifiers.range_end &&
+            !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn('relative inline-flex items-center justify-center rounded-md text-sm font-medium transition-all outline-none cursor-pointer', 'hover:bg-lb50 hover:text-lb900', 'focus-visible:border-lb600 focus-visible:ring-lb600/50 focus-visible:ring-[3px]', 'data-[selected-single=true]:bg-lb600 data-[selected-single=true]:text-white', 'data-[range-middle=true]:bg-lb50 data-[range-middle=true]:text-lb900', 'data-[range-start=true]:bg-lb600 data-[range-start=true]:text-white', 'data-[range-end=true]:bg-lb600 data-[range-end=true]:text-white', 'flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal', 'group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-lb600/50 group-data-[focused=true]/day:ring-[3px]', 'data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md', 'data-[range-middle=true]:rounded-none', 'data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md', '[&>span]:text-xs [&>span]:opacity-70', defaultClassNames.day, btnClassName), ...btnProps, children: [_jsx("span", { className: cn('relative z-10', modifiers.booked && 'line-through opacity-40 decoration-current'), children: btnProps.children }), modifiers.book && (_jsx("span", { className: cn('absolute bottom-1.5 size-1 rounded-full bg-lb600', modifiers.selected && 'bg-white') }))] }));
+}
+export default Calendar;

package/dist/components/Carousel/Carousel.d.ts

@@ -0,0 +1,50 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import { type CarouselOrientation, type RootProps } from './CarouselBase.js';
+export interface CarouselProps {
+    /** 슬라이드로 렌더링할 노드 배열 */
+    slides: ReactNode[];
+    /** 가로/세로 방향. 기본 'horizontal' */
+    orientation?: CarouselOrientation;
+    /** 무한 루프. 기본 false */
+    loop?: boolean;
+    /** 자동재생(스텝형). true 또는 { delay, stopOnInteraction } */
+    autoplay?: boolean | {
+        delay?: number;
+        stopOnInteraction?: boolean;
+    };
+    /** 연속 흐름(Auto Scroll). autoplay와 동시 사용 불가, loop와 함께 권장 */
+    autoScroll?: RootProps['autoScroll'];
+    /** 슬라이드 정렬 위치. 기본 'start'(왼쪽 끝 붙음) */
+    align?: RootProps['align'];
+    /** 이전/다음 화살표 표시. 기본 true */
+    showArrows?: boolean;
+    /** 하단 도트 페이지네이션 표시. 기본 true */
+    showDots?: boolean;
+    /** "현재 / 전체" 숫자 표시. 기본 false */
+    showCounter?: boolean;
+    /** 슬라이드 한 개의 크기(basis). 기본 '100%' */
+    slideSize?: string;
+    /** 슬라이드 사이 간격(Tailwind gap 단위 px). 기본 16 */
+    gap?: number;
+    className?: string;
+    style?: CSSProperties;
+    /** Viewport에 적용할 클래스 (세로 모드 높이 지정 등) */
+    viewportClassName?: string;
+}
+/**
+ * embla-carousel 기반 기본 캐러셀.
+ * 고급 커스터마이징이 필요하면 `Carousel.Root` 등 compound API를 직접 조합하세요.
+ */
+declare const Carousel: {
+    ({ slides, orientation, loop, autoplay, autoScroll, align, showArrows, showDots, showCounter, slideSize, gap, className, style, viewportClassName, }: CarouselProps): import("react/jsx-runtime").JSX.Element;
+    Root: ({ orientation, loop, autoplay, autoScroll, align, options, gap, className, style, children, }: RootProps) => import("react/jsx-runtime").JSX.Element;
+    Viewport: ({ className, children }: import("./CarouselBase.js").ViewportProps) => import("react/jsx-runtime").JSX.Element;
+    Container: ({ className, style, children }: import("./CarouselBase.js").ContainerProps) => import("react/jsx-runtime").JSX.Element;
+    Slide: ({ size, index, total, className, style, children, }: import("./CarouselBase.js").SlideProps) => import("react/jsx-runtime").JSX.Element;
+    Prev: ({ className, children, ...props }: import("./CarouselBase.js").NavButtonProps) => import("react/jsx-runtime").JSX.Element;
+    Next: ({ className, children, ...props }: import("./CarouselBase.js").NavButtonProps) => import("react/jsx-runtime").JSX.Element;
+    Dots: ({ className, dotClassName }: import("./CarouselBase.js").DotsProps) => import("react/jsx-runtime").JSX.Element;
+    Counter: ({ className, format }: import("./CarouselBase.js").CounterProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default Carousel;
+//# sourceMappingURL=Carousel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../src/components/Carousel/Carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAqB,EACnB,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACf,MAAM,gBAAgB,CAAC;AAGxB,MAAM,WAAW,aAAa;IAC5B,uBAAuB;IACvB,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,gCAAgC;IAChC,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAClC,sBAAsB;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,iBAAiB,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IACrE,0DAA0D;IAC1D,UAAU,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IACrC,sCAAsC;IACtC,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC3B,4BAA4B;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gCAAgC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,wCAAwC;IACxC,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;GAGG;AACH,QAAA,MAAM,QAAQ;0JAeX,aAAa;;;;;;;;;CAuDf,CAAC;AAWF,eAAe,QAAQ,CAAC"}

package/dist/components/Carousel/Carousel.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CarouselBase from './CarouselBase.js';
+import cn from '../../utils/cn.js';
+/**
+ * embla-carousel 기반 기본 캐러셀.
+ * 고급 커스터마이징이 필요하면 `Carousel.Root` 등 compound API를 직접 조합하세요.
+ */
+const Carousel = ({ slides, orientation = 'horizontal', loop = false, autoplay = false, autoScroll = false, align = 'start', showArrows = true, showDots = true, showCounter = false, slideSize = '100%', gap = 16, className, style, viewportClassName, }) => {
+    const isVertical = orientation === 'vertical';
+    const total = slides.length;
+    return (_jsx(CarouselBase.Root, { orientation: orientation, loop: loop, autoplay: autoplay, autoScroll: autoScroll, align: align, gap: gap, className: className, style: style, children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: cn('flex items-center gap-3 w-full', isVertical && 'flex-col'), children: [showArrows && _jsx(CarouselBase.Prev, {}), _jsx(CarouselBase.Viewport, { className: cn('w-full', viewportClassName), children: _jsx(CarouselBase.Container, { children: slides.map((slide, i) => (_jsx(CarouselBase.Slide, { size: slideSize, index: i, total: total, children: slide }, i))) }) }), showArrows && _jsx(CarouselBase.Next, {})] }), (showDots || showCounter) && (_jsxs("div", { className: "flex items-center justify-center gap-3", children: [showDots && (_jsx(CarouselBase.Dots, { className: isVertical ? 'flex-col' : undefined })), showCounter && _jsx(CarouselBase.Counter, {})] }))] }) }));
+};
+Carousel.Root = CarouselBase.Root;
+Carousel.Viewport = CarouselBase.Viewport;
+Carousel.Container = CarouselBase.Container;
+Carousel.Slide = CarouselBase.Slide;
+Carousel.Prev = CarouselBase.Prev;
+Carousel.Next = CarouselBase.Next;
+Carousel.Dots = CarouselBase.Dots;
+Carousel.Counter = CarouselBase.Counter;
+export default Carousel;