@loword/loword-design-system 0.0.4 → 0.0.6

package/src/styles/typography.css

@@ -0,0 +1,171 @@
+@theme {
+  --font-pretendard: 'var(--font-pretendard)', sans-serif;
+
+  /* typography */
+  --text-display10: 10px;
+  --leading-display10: 14px;
+  --tracking-display10: -1px;
+
+  --text-display12: 12px;
+  --leading-display12: 16px;
+  --tracking-display12: -1px;
+
+  --text-display14: 14px;
+  --leading-display14: 18px;
+  --tracking-display14: -1px;
+
+  --text-display16: 16px;
+  --leading-display16: 20px;
+  --tracking-display16: -1px;
+
+  --text-display18: 18px;
+  --leading-display18: 22px;
+  --tracking-display18: -1px;
+
+  --text-display20: 20px;
+  --leading-display20: 24px;
+  --tracking-display20: -1px;
+
+  --text-display24: 24px;
+  --leading-display24: 28px;
+  --tracking-display24: -1px;
+
+  --text-display28: 28px;
+  --leading-display28: 32px;
+  --tracking-display28: -1px;
+
+  --text-display30: 30px;
+  --leading-display30: 36px;
+  --tracking-display30: -1px;
+
+  --text-display32: 32px;
+  --leading-display32: 38px;
+  --tracking-display32: -1px;
+
+  --text-display36: 36px;
+  --leading-display36: 42px;
+  --tracking-display36: -1px;
+
+  --text-display40: 40px;
+  --leading-display40: 48px;
+  --tracking-display40: -1px;
+
+  --text-display64: 64px;
+  --leading-display64: 72px;
+  --tracking-display64: -1px;
+
+  --text-display80: 80px;
+  --leading-display80: 88px;
+  --tracking-display80: -1px;
+
+  --text-display120: 120px;
+  --leading-display120: 128px;
+  --tracking-display120: -1px;
+
+  /* font-weight */
+  --font-light: 300;
+  --font-regular: 400;
+  --font-medium: 500;
+  --font-semibold: 550;
+  --font-bold: 600;
+  --font-extrabold: 700;
+  --font-black: 900;
+}
+
+@utility display10 {
+  font-size: var(--text-display10);
+  line-height: var(--leading-display10);
+  letter-spacing: var(--tracking-display10);
+}
+@utility display12 {
+  font-size: var(--text-display12);
+  line-height: var(--leading-display12);
+  letter-spacing: var(--tracking-display12);
+}
+@utility display14 {
+  font-size: var(--text-display14);
+  line-height: var(--leading-display14);
+  letter-spacing: var(--tracking-display14);
+}
+@utility display16 {
+  font-size: var(--text-display16);
+  line-height: var(--leading-display16);
+  letter-spacing: var(--tracking-display16);
+}
+@utility display18 {
+  font-size: var(--text-display18);
+  line-height: var(--leading-display18);
+  letter-spacing: var(--tracking-display18);
+}
+@utility display20 {
+  font-size: var(--text-display20);
+  line-height: var(--leading-display20);
+  letter-spacing: var(--tracking-display20);
+}
+@utility display24 {
+  font-size: var(--text-display24);
+  line-height: var(--leading-display24);
+  letter-spacing: var(--tracking-display24);
+}
+@utility display28 {
+  font-size: var(--text-display28);
+  line-height: var(--leading-display28);
+  letter-spacing: var(--tracking-display28);
+}
+@utility display30 {
+  font-size: var(--text-display30);
+  line-height: var(--leading-display30);
+  letter-spacing: var(--tracking-display30);
+}
+@utility display32 {
+  font-size: var(--text-display32);
+  line-height: var(--leading-display32);
+  letter-spacing: var(--tracking-display32);
+}
+@utility display36 {
+  font-size: var(--text-display36);
+  line-height: var(--leading-display36);
+  letter-spacing: var(--tracking-display36);
+}
+@utility display40 {
+  font-size: var(--text-display40);
+  line-height: var(--leading-display40);
+  letter-spacing: var(--tracking-display40);
+}
+@utility display64 {
+  font-size: var(--text-display64);
+  line-height: var(--leading-display64);
+  letter-spacing: var(--tracking-display64);
+}
+@utility display80 {
+  font-size: var(--text-display80);
+  line-height: var(--leading-display80);
+  letter-spacing: var(--tracking-display80);
+}
+@utility display120 {
+  font-size: var(--text-display120);
+  line-height: var(--leading-display120);
+  letter-spacing: var(--tracking-display120);
+}
+
+@utility light {
+  font-weight: var(--font-light);
+}
+@utility regular {
+  font-weight: var(--font-regular);
+}
+@utility medium {
+  font-weight: var(--font-medium);
+}
+@utility semibold {
+  font-weight: var(--font-semibold);
+}
+@utility bold {
+  font-weight: var(--font-bold);
+}
+@utility extrabold {
+  font-weight: var(--font-extrabold);
+}
+@utility black {
+  font-weight: var(--font-black);
+}

package/src/theme.css

@@ -0,0 +1,19 @@
+/**
+ * theme.css — 소비처(ledu-mono 등)의 Tailwind 컴파일러가 직접 처리하는
+ * raw @theme/@utility 진입점.
+ *
+ * 컴파일된 dist/index.css(styles.css)와 달리 토큰·유틸 정의가 원문 그대로 남아있어,
+ * 소비처가 자기 코드에 대해 `display40`, `bg-mono600` 같은 클래스를 on-demand로 생성할 수 있다.
+ *
+ * 주의:
+ * - `@import 'tailwindcss'`를 넣지 않는다. 소비처가 이미 import하므로 중복되면 충돌난다.
+ * - 컴포넌트 스타일(components/*, slider/carousel 등)은 포함하지 않는다 — styles.css가 담당.
+ */
+@import './styles/color.css';
+@import './styles/typography.css';
+@import './styles/text-utils.css';
+@import './styles/radius.css';
+@import './styles/spacing.css';
+@import './styles/layout.css';
+@import './styles/gradient.css';
+@import './styles/motion.css';

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

@@ -1,11 +0,0 @@
-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

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

@@ -1,24 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

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

@@ -1,49 +0,0 @@
-'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

@@ -1,25 +0,0 @@
-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

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

@@ -1,36 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

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

@@ -1,9 +0,0 @@
-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/BreadCrumb/BreadCrumb.d.ts

@@ -1,17 +0,0 @@
-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

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

@@ -1,37 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

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

@@ -1,17 +0,0 @@
-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/Button.d.ts

@@ -1,26 +0,0 @@
-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

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

@@ -1,102 +0,0 @@
-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

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

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

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