@loword/loword-design-system 0.0.18 → 0.1.0

package/dist/components/LDAutoComplete/LDAutoComplete.js

@@ -1,7 +1,144 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import LDAutoCompleteBase from './AutoCompleteBase.js';
-const LDAutoComplete = ({ displayField, subFields, onChange, onSelectedItem, placeholder, size, emptyMessage, className, inputClassName, listClassName, ref, }) => {
-    return (_jsxs(LDAutoCompleteBase.Root, { displayField: displayField, subFields: subFields, onChange: onChange, onSelectedItem: onSelectedItem, className: className, ref: ref, children: [_jsx(LDAutoCompleteBase.Input, { placeholder: placeholder, size: size, className: inputClassName }), _jsx(LDAutoCompleteBase.List, { size: size, className: listClassName, emptyMessage: emptyMessage })] }));
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import AutoCompleteBase, { getItemValue, useAutoCompleteContext, } from '../../components/LDAutoComplete/AutoCompleteBase.js';
+import LDSpinner from '../../components/LDSpinner/LDSpinner.js';
+import RenderIcon from '../../components/RenderIcon/RenderIcon.js';
+import cn from '../../utils/cn.js';
+import tv from '../../utils/tv.js';
+const inputVariants = tv({
+    base: 'w-full rounded-[5px] border-transparent outline-2 -outline-offset-2 ld-transition',
+    variants: {
+        size: {
+            '2xsmall': 'input-2xs [--ac-prefix-ps:calc(var(--control-padding-x-input-2xs)*2+var(--control-icon-2xs))]',
+            xsmall: 'input-xs [--ac-prefix-ps:calc(var(--control-padding-x-input-xs)*2+var(--control-icon-xs))]',
+            small: 'input-sm [--ac-prefix-ps:calc(var(--control-padding-x-input-sm)*2+var(--control-icon-sm))]',
+            medium: 'input-md [--ac-prefix-ps:calc(var(--control-padding-x-input-md)*2+var(--control-icon-md))]',
+            large: 'input-lg [--ac-prefix-ps:calc(var(--control-padding-x-input-lg)*2+var(--control-icon-lg))]',
+            xlarge: 'input-xl [--ac-prefix-ps:calc(var(--control-padding-x-input-xl)*2+var(--control-icon-xl))]',
+        },
+        // 활성 스타일은 드롭다운 open이 아니라 입력창 포커스에 따라 적용된다.
+        variant: {
+            filled: 'bg-neutral50 outline-transparent focus:bg-tintBlue focus:outline-lb500',
+            outline: 'bg-transparent outline-neutral100 focus:outline-lb500',
+            ghost: 'bg-transparent outline-transparent focus:bg-neutral50',
+        },
+        prefix: { true: 'peer' },
+        hasValue: { true: '' },
+        shadow: { true: 'shadow-[0_0_20px_0_rgba(0,0,0,0.10)]' },
+    },
+    compoundVariants: [
+        // 아이콘이 실제로 보일 때만 자리를 비운다. 값 여부는 query로, 포커스 여부는
+        // not-focus로 판단한다. 자리가 사라지면서 캐럿이 아이콘이 있던 위치로 이동한다.
+        {
+            prefix: true,
+            hasValue: false,
+            className: 'not-focus:ps-[var(--ac-prefix-ps)]',
+        },
+    ],
+});
+const prefixIconVariants = tv({
+    base: 'pointer-events-none absolute top-1/2 -translate-y-1/2 text-neutral500 ld-transition peer-focus:opacity-0',
+    variants: {
+        size: {
+            '2xsmall': 'left-[var(--control-padding-x-input-2xs)] size-[var(--control-icon-2xs)]',
+            xsmall: 'left-[var(--control-padding-x-input-xs)] size-[var(--control-icon-xs)]',
+            small: 'left-[var(--control-padding-x-input-sm)] size-[var(--control-icon-sm)]',
+            medium: 'left-[var(--control-padding-x-input-md)] size-[var(--control-icon-md)]',
+            large: 'left-[var(--control-padding-x-input-lg)] size-[var(--control-icon-lg)]',
+            xlarge: 'left-[var(--control-padding-x-input-xl)] size-[var(--control-icon-xl)]',
+        },
+        // 값이 차면 포커스가 빠져도 계속 숨긴다. placeholder 유무에 의존하지 않도록
+        // :placeholder-shown 대신 Context의 query로 판단한다.
+        hasValue: { true: 'opacity-0' },
+    },
+});
+const dropdownVariants = tv({
+    base: 'absolute left-0 z-40 mt-1 h-45 w-full overflow-y-auto rounded-[5px] border border-mono300 bg-white shadow-md ld-transition',
+    variants: {
+        size: {
+            '2xsmall': 'autocomplete-2xs',
+            xsmall: 'autocomplete-xs',
+            small: 'autocomplete-sm',
+            medium: 'autocomplete-md',
+            large: 'autocomplete-lg',
+            xlarge: 'autocomplete-xl',
+        },
+        open: {
+            true: 'pointer-events-auto visible opacity-100',
+            false: 'pointer-events-none invisible opacity-0',
+        },
+    },
+});
+/** 검색 상태와 외부 클릭 닫기를 관리하는 Styled Compound 루트입니다. */
+const Root = ({ className, ...props }) => (_jsx(AutoCompleteBase.Root, { className: cn('relative w-full', className), ...props }));
+/**
+ * 검색어를 입력받는 combobox 입력창입니다.
+ * `prefixIcon`은 값이 없고 포커스도 없을 때만 표시됩니다. 포커스하거나 값이 차면
+ * 사라지면서 캐럿이 아이콘이 있던 자리로 이동합니다.
+ */
+const Input = ({ size = 'medium', variant = 'filled', showShadow = false, prefixIcon, className, ...props }) => {
+    const { query } = useAutoCompleteContext();
+    const hasValue = Boolean(query);
+    return (_jsxs(_Fragment, { children: [_jsx(AutoCompleteBase.Input, { className: inputVariants({
+                    size,
+                    variant,
+                    prefix: Boolean(prefixIcon),
+                    hasValue,
+                    shadow: showShadow,
+                    className,
+                }), ...props }), _jsx(RenderIcon, { className: prefixIconVariants({ size, hasValue }), children: prefixIcon })] }));
 };
+/** 입력창 아래에 떠서 목록과 빈 상태를 담는 드롭다운 컨테이너입니다. */
+const Dropdown = ({ size = 'medium', className, ...props }) => {
+    const { isOpen } = useAutoCompleteContext();
+    return (_jsx("div", { className: dropdownVariants({ size, open: isOpen, className }), ...props }));
+};
+/** 옵션을 나열하는 listbox입니다. 항목은 `renderItem`으로 그립니다. */
+const List = ({ className, ...props }) => {
+    const { options } = useAutoCompleteContext();
+    return (_jsx(AutoCompleteBase.List, { className: cn('ld-transition', options.length > 0 ? 'visible opacity-100' : 'invisible opacity-0', className), ...props }));
+};
+/** 옵션 한 줄입니다. children을 주지 않으면 displayField와 subFields를 그립니다. */
+const Item = ({ item, index, className, children, ...props }) => {
+    const { displayField, subFields, focusedIdx } = useAutoCompleteContext();
+    const secondary = subFields
+        ?.map((field) => String(getItemValue(item, field) ?? ''))
+        .filter(Boolean)
+        .join(' / ');
+    return (_jsx(AutoCompleteBase.Item, { item: item, index: index, className: cn('autocomplete-item flex cursor-pointer flex-col border-b border-mono300 ld-transition', focusedIdx === index ? 'bg-tintBlue' : 'hover:bg-mono100', className), ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsx(ItemPrimary, { children: String(getItemValue(item, displayField) ?? '') }), secondary && _jsx(ItemSecondary, { children: secondary })] })) }));
+};
+/** 항목의 주 텍스트입니다. */
+const ItemPrimary = ({ className, ...props }) => (_jsx("div", { className: cn('truncate text-black', className), ...props }));
+/** 항목의 보조 텍스트입니다. */
+const ItemSecondary = ({ className, ...props }) => (_jsx("span", { className: cn('autocomplete-secondary truncate text-neutral500', className), ...props }));
+/** 조회 결과가 없을 때의 영역입니다. 조회 중에는 스피너를 대신 표시합니다. */
+// LDSpinner는 폰트 크기(1em) 기준으로 사이징되므로 size 프리셋을 아이콘 크기 클래스로 옮긴다.
+const spinnerVariants = tv({
+    variants: {
+        size: {
+            '2xsmall': 'icon-2xs',
+            xsmall: 'icon-xs',
+            small: 'icon-sm',
+            medium: 'icon-md',
+            large: 'icon-lg',
+            xlarge: 'icon-xl',
+        },
+    },
+});
+const Empty = ({ size = 'medium', className, children, ...props }) => {
+    const { options, isLoading } = useAutoCompleteContext();
+    return (_jsx("div", { className: cn('flex items-center justify-center text-neutral500 transition-opacity duration-300 ease-in-out', options.length === 0
+            ? 'visible h-full opacity-100'
+            : 'invisible h-0 opacity-0', className), ...props, children: isLoading ? (_jsx(LDSpinner, { className: cn(spinnerVariants({ size }), 'text-lb500!') })) : (children) }));
+};
+/** 입력창과 목록을 props로 구성하는 Styled Single 컴포넌트입니다. */
+const LDAutoComplete = ({ displayField, subFields, onChange, onSelectedItem, placeholder, prefixIcon, size, variant, showShadow, emptyMessage = '조회하신 데이터가 없습니다.', className, inputClassName, listClassName, ref, }) => (_jsxs(Root, { displayField: displayField, subFields: subFields, onChange: onChange, onSelectedItem: onSelectedItem, className: className, ref: ref, children: [_jsx(Input, { placeholder: placeholder, prefixIcon: prefixIcon, size: size, variant: variant, showShadow: showShadow, className: inputClassName }), _jsxs(Dropdown, { size: size, className: listClassName, children: [_jsx(List, { renderItem: (item, index) => (_jsx(Item, { item: item, index: index }, item.id)) }), _jsx(Empty, { size: size, children: emptyMessage })] })] }));
+LDAutoComplete.Root = Root;
+LDAutoComplete.Input = Input;
+LDAutoComplete.Dropdown = Dropdown;
+LDAutoComplete.List = List;
+LDAutoComplete.Item = Item;
+LDAutoComplete.ItemPrimary = ItemPrimary;
+LDAutoComplete.ItemSecondary = ItemSecondary;
+LDAutoComplete.Empty = Empty;
 export default LDAutoComplete;

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

@@ -1 +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"}
+{"version":3,"file":"AvatarBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDAvatar/AvatarBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAKf,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

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useState, useEffect, } from 'react';
+import { createContext, useContext, useEffect, useState, } from 'react';
 import cn from '../../utils/cn.js';
 const AvatarContext = createContext(null);
 export const useAvatarContext = () => {
@@ -24,7 +24,7 @@ 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) }));
+    return (_jsx("img", { src: src, alt: alt, width: width, height: height, onLoad: () => setStatus('loaded'), onError: () => setStatus('error'), className: cn('aspect-square size-full object-cover', className) }));
 };
 const Fallback = ({ className, children, delayMs = 0 }) => {
     const { status } = useAvatarContext();
@@ -39,7 +39,7 @@ const Fallback = ({ className, children, delayMs = 0 }) => {
     }, [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 }));
+    return (_jsx("span", { className: cn('flex size-full items-center justify-center rounded-full', className), children: children }));
 };
 export const AvatarBase = {
     Root,

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

@@ -1,4 +1,6 @@
-type AvatarSize = '2xsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+import type { Size } from '../../types/common.js';
+import type { Subset } from '../../types/subset.js';
+export type AvatarSize = Subset<Size, '2xsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'>;
 export interface LDAvatarProps {
     src?: string | null;
     alt?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"LDAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/LDAvatar/LDAvatar.tsx"],"names":[],"mappings":"AAKA,KAAK,UAAU,GACX,SAAS,GACT,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,QAAQ,CAAC;AA8Bb,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"}
+{"version":3,"file":"LDAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/LDAvatar/LDAvatar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAI7C,MAAM,MAAM,UAAU,GAAG,MAAM,CAC7B,IAAI,EACJ,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAC/D,CAAC;AA0CF,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,4CAiBf,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/LDAvatar/LDAvatar.js

@@ -1,33 +1,46 @@
 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 = {
-    '2xsmall': 'w-2 h-2',
-    xsmall: 'w-4 h-4',
-    small: 'w-6 h-6',
-    medium: 'w-8 h-8',
-    large: 'w-12 h-12',
-    xlarge: 'w-16 h-16',
-};
+import AvatarBase from '../../components/LDAvatar/AvatarBase.js';
+import RenderIcon from '../../components/RenderIcon/RenderIcon.js';
+import tv from '../../utils/tv.js';
+// next/image 최적화는 숫자 width·height 를 요구하므로 클래스 맵과 별도로 유지한다.
+// rootVariants 의 size-* 와 같은 px 값이어야 한다.
 const IMAGE_SIZE_MAP = {
-    '2xsmall': 8,
+    '2xsmall': 14,
     xsmall: 16,
     small: 24,
     medium: 32,
     large: 48,
     xlarge: 64,
 };
-const ICON_SIZE_MAP = {
-    '2xsmall': 5,
-    xsmall: 10,
-    small: 15,
-    medium: 20,
-    large: 30,
-    xlarge: 40,
-};
+const rootVariants = tv({
+    variants: {
+        size: {
+            '2xsmall': 'size-3.5',
+            xsmall: 'size-4',
+            small: 'size-6',
+            medium: 'size-8',
+            large: 'size-12',
+            xlarge: 'size-16',
+        },
+    },
+});
+// Fallback 아이콘은 텍스트 없이 단독 렌더되므로 크기를 tv로 고정한다.
+const iconVariants = tv({
+    base: 'text-mono400',
+    variants: {
+        size: {
+            '2xsmall': 'size-2.5',
+            xsmall: 'size-3',
+            small: 'size-4',
+            medium: 'size-5.5',
+            large: 'size-7.5',
+            xlarge: 'size-10',
+        },
+    },
+});
 const LDAvatar = ({ src, alt = 'avatar', size = 'small', 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" }) })] }));
+    return (_jsxs(AvatarBase.Root, { src: src, style: style, className: rootVariants({ size, className }), children: [_jsx(AvatarBase.Image, { alt: alt, width: px, height: px }), _jsx(AvatarBase.Fallback, { className: "bg-mono100", children: _jsx(RenderIcon, { className: iconVariants({ size }), children: _jsx(UserRound, {}) }) })] }));
 };
 export default LDAvatar;

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

@@ -1 +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"}
+{"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;AAKtE,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/LDBadge.d.ts

@@ -1,6 +1,9 @@
-import { type ReactNode } from 'react';
-type BadgeSize = 'xsmall' | 'small' | 'medium' | 'large';
-type BadgeColor = 'orange' | 'fillOrange' | 'red' | 'fillRed' | 'green' | 'fillGreen' | 'blue' | 'fillBlue' | 'yellow' | 'fillYellow' | 'gray' | 'fillGray';
+import { type CSSProperties, type ReactNode } from 'react';
+import type { Color, Size } from '../../types/common.js';
+import type { Subset } from '../../types/subset.js';
+type BadgeSize = Subset<Size, 'xsmall' | 'small' | 'medium' | 'large'>;
+type BadgeTint = Subset<Color, 'orange' | 'red' | 'green' | 'blue' | 'yellow' | 'gray'>;
+type BadgeColor = BadgeTint | `fill${Capitalize<BadgeTint>}`;
 export interface LDBadgeProps {
     /** 뱃지 사이즈 */
     size?: BadgeSize;
@@ -15,7 +18,7 @@ export interface LDBadgeProps {
     /** 추가 CSS 클래스 */
     className?: string;
     /** 인라인 스타일 */
-    style?: React.CSSProperties;
+    style?: CSSProperties;
 }
 declare const LDBadge: ({ size, color, leftIcon, rightIcon, children, className, style, }: LDBadgeProps) => import("react/jsx-runtime").JSX.Element;
 export default LDBadge;

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

@@ -1 +1 @@
-{"version":3,"file":"LDBadge.d.ts","sourceRoot":"","sources":["../../../src/components/LDBadge/LDBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,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,YAAY;IAC3B,aAAa;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,aAAa;IACb,KAAK,EAAE,UAAU,CAAC;IAClB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY;IACZ,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AA+BD,QAAA,MAAM,OAAO,GAAI,mEAQd,YAAY,4CAkBd,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"LDBadge.d.ts","sourceRoot":"","sources":["../../../src/components/LDBadge/LDBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI3D,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAG7C,KAAK,SAAS,GAAG,MAAM,CAAC,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAC;AACvE,KAAK,SAAS,GAAG,MAAM,CACrB,KAAK,EACL,QAAQ,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CACxD,CAAC;AACF,KAAK,UAAU,GAAG,SAAS,GAAG,OAAO,UAAU,CAAC,SAAS,CAAC,EAAE,CAAC;AAE7D,MAAM,WAAW,YAAY;IAC3B,aAAa;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,aAAa;IACb,KAAK,EAAE,UAAU,CAAC;IAClB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY;IACZ,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc;IACd,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AA4BD,QAAA,MAAM,OAAO,GAAI,mEAQd,YAAY,4CAed,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/LDBadge/LDBadge.js

@@ -1,35 +1,37 @@
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import BadgeBase from './BadgeBase.js';
-import cn from '../../utils/cn.js';
-import { renderIcon } from '../../utils/renderIcon.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',
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import BadgeBase from '../../components/LDBadge/BadgeBase.js';
+import RenderIcon from '../../components/RenderIcon/RenderIcon.js';
+import tv from '../../utils/tv.js';
+const badgeVariants = tv({
+    base: 'w-auto border border-transparent text-center whitespace-nowrap',
+    variants: {
+        color: {
+            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',
+        },
+        size: {
+            xsmall: 'badge-xs',
+            small: 'badge-sm',
+            medium: 'badge-md',
+            large: 'badge-lg',
+        },
+    },
+});
 const LDBadge = ({ size = 'small', color = 'blue', leftIcon, rightIcon, children, className, style, }) => {
-    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)] }));
+    return (_jsxs(BadgeBase.Root, { className: badgeVariants({
+            size,
+            color,
+            className,
+        }), style: style, children: [_jsx(RenderIcon, { children: leftIcon }), children, _jsx(RenderIcon, { children: rightIcon })] }));
 };
 export default LDBadge;

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
-export declare const LDBreadCrumb: {
+export declare const BreadCrumbBase: {
     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;
+    Page: ({ className, ...props }: React.ComponentProps<"span">) => import("react/jsx-runtime").JSX.Element;
     Separator: ({ children, className, ...props }: React.ComponentProps<"li">) => import("react/jsx-runtime").JSX.Element;
 };
-export default LDBreadCrumb;
+export default BreadCrumbBase;
 //# sourceMappingURL=BreadCrumbBase.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BreadCrumbBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDBreadCrumb/BreadCrumbBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA8C/B,eAAO,MAAM,YAAY;oCA1Cc,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;CAgB8B,CAAC;AAE5D,eAAe,YAAY,CAAC"}
+{"version":3,"file":"BreadCrumbBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDBreadCrumb/BreadCrumbBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAwD/B,eAAO,MAAM,cAAc;oCApDY,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;oCAI3B,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC;8CAU9D,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC;oCAQU,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC;mDAchE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC;CAgBsC,CAAC;AAEpE,eAAe,cAAc,CAAC"}

package/dist/components/LDBreadCrumb/BreadCrumbBase.js

@@ -10,8 +10,11 @@ const List = ({ className, ...props }) => {
 const Item = ({ className, children, ...props }) => {
     return (_jsx("li", { className: cn('inline-flex items-center', className), ...props, children: children }));
 };
+const Page = ({ className, ...props }) => {
+    return (_jsx("span", { "aria-current": "page", className: cn('inline-flex items-center', className), ...props }));
+};
 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, {}) }));
+    return (_jsx("li", { role: "presentation", "aria-hidden": "true", className: cn('inline-flex items-center justify-center [&>svg]:shrink-0', className), ...props, children: children ?? _jsx(ChevronRightIcon, {}) }));
 };
-export const LDBreadCrumb = { Root, List, Item, Separator };
-export default LDBreadCrumb;
+export const BreadCrumbBase = { Root, List, Item, Page, Separator };
+export default BreadCrumbBase;

package/dist/components/LDBreadCrumb/LDBreadCrumb.d.ts

@@ -1,9 +1,14 @@
 import { type ReactNode } from 'react';
-import { type ButtonSize } from '../LDButton/LDButton.js';
+import { type ButtonSize } from '../../components/LDButton/LDButton.js';
 export interface LDBreadCrumbItem {
+    /** 항목에 표시할 텍스트 */
     label: string;
+    /** 링크 주소. 없으면 현재 위치로 보고 링크 대신 텍스트로 렌더한다 */
     href?: string;
+    /** 라벨 왼쪽 아이콘 (`lucide-react` 노드) */
     icon?: ReactNode;
+    /** 항목 className. 아이콘-라벨 간격(기본 `gap-0.5`) 등을 덮어쓸 때 쓴다 */
+    className?: string;
 }
 export interface LDBreadCrumbProps {
     items: LDBreadCrumbItem[];
@@ -11,6 +16,25 @@ export interface LDBreadCrumbProps {
     separator?: ReactNode;
     className?: string;
 }
-declare const LDBreadCrumb: ({ items, size, separator, className, }: LDBreadCrumbProps) => import("react/jsx-runtime").JSX.Element;
+interface LDBreadCrumbLinkProps extends Omit<React.ComponentProps<'a'>, 'color'> {
+    size?: ButtonSize;
+    icon?: ReactNode;
+}
+interface LDBreadCrumbPageProps extends React.ComponentProps<'span'> {
+    size?: ButtonSize;
+    icon?: ReactNode;
+}
+interface LDBreadCrumbSeparatorProps extends React.ComponentProps<'li'> {
+    size?: ButtonSize;
+}
+declare const LDBreadCrumb: {
+    ({ items, size, separator, className, }: LDBreadCrumbProps): import("react/jsx-runtime").JSX.Element;
+    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, ...props }: React.ComponentProps<"li">) => import("react/jsx-runtime").JSX.Element;
+    Link: ({ size, icon, className, ...props }: LDBreadCrumbLinkProps) => import("react/jsx-runtime").JSX.Element;
+    Page: ({ size, icon, className, children, ...props }: LDBreadCrumbPageProps) => import("react/jsx-runtime").JSX.Element;
+    Separator: ({ size, className, ...props }: LDBreadCrumbSeparatorProps) => import("react/jsx-runtime").JSX.Element;
+};
 export default LDBreadCrumb;
 //# sourceMappingURL=LDBreadCrumb.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"LDBreadCrumb.d.ts","sourceRoot":"","sources":["../../../src/components/LDBreadCrumb/LDBreadCrumb.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAiB,EAAE,KAAK,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAIjE,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA6BD,QAAA,MAAM,YAAY,GAAI,wCAKnB,iBAAiB,4CAiDnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"LDBreadCrumb.d.ts","sourceRoot":"","sources":["../../../src/components/LDBreadCrumb/LDBreadCrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjD,OAAiB,EAAE,KAAK,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAI3E,MAAM,WAAW,gBAAgB;IAC/B,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA6BD,UAAU,qBAAsB,SAAQ,IAAI,CAC1C,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,EACzB,OAAO,CACR;IACC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,UAAU,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC;IAClE,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,UAAU,0BAA2B,SAAQ,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC;IACrE,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAuDD,QAAA,MAAM,YAAY;6CAKf,iBAAiB;oCA5HQ,MAAO,cAAc;oCAIhC,MAAO,cACtB,CAAA,kBAAkB;oCA+DmB,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC;gDAS9D,qBAAqB;0DAqBrB,qBAAqB;+CAcrB,0BAA0B;CA4C5B,CAAC;AASF,eAAe,YAAY,CAAC"}

package/dist/components/LDBreadCrumb/LDBreadCrumb.js

@@ -1,8 +1,8 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import BreadCrumbBase from './BreadCrumbBase.js';
-import LDButton from '../LDButton/LDButton.js';
-import { renderIcon } from '../../utils/renderIcon.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import BreadCrumbBase from '../../components/LDBreadCrumb/BreadCrumbBase.js';
+import LDButton from '../../components/LDButton/LDButton.js';
+import RenderIcon from '../../components/RenderIcon/RenderIcon.js';
 import cn from '../../utils/cn.js';
 const textSizeClasses = {
     '2xsmall': 'bread-crumb-2xs',
@@ -21,17 +21,26 @@ const iconSizeClasses = {
     xlarge: 'icon-xl',
 };
 const separatorIconSizeClasses = {
-    '2xsmall': 'bread-crumb-sep-2xs',
-    xsmall: 'bread-crumb-sep-xs',
-    small: 'bread-crumb-sep-sm',
-    medium: 'bread-crumb-sep-md',
-    large: 'bread-crumb-sep-lg',
-    xlarge: 'bread-crumb-sep-xl',
+    '2xsmall': '[&>svg]:icon-2xs',
+    xsmall: '[&>svg]:icon-xs',
+    small: '[&>svg]:icon-sm',
+    medium: '[&>svg]:icon-md',
+    large: '[&>svg]:icon-lg',
+    xlarge: '[&>svg]:icon-xl',
 };
+// gap은 항목·구분자를 나란히 놓는 List(ol)가 담당한다.
+// li의 자식은 Link 또는 Page 하나뿐이라 여기에 gap을 줘도 효과가 없다.
+const Item = ({ className, ...props }) => (_jsx(BreadCrumbBase.Item, { className: className, ...props }));
+const Link = ({ size = 'small', icon, className, ...props }) => (_jsx(LDButton, { as: "a", variant: "ghost", color: "neutral", size: size, leftIcon: icon, className: cn('flex h-auto min-w-0 flex-row gap-0.5 px-0 regular text-neutral700 hover:bg-transparent active:bg-transparent', className), ...props }));
+const Page = ({ size = 'small', icon, className, children, ...props }) => (_jsxs(BreadCrumbBase.Page, { className: cn(textSizeClasses[size], 'gap-0.5 text-neutral700', className), ...props, children: [_jsx(RenderIcon, { className: iconSizeClasses[size], children: icon }), children] }));
+const Separator = ({ size = 'small', className, ...props }) => (_jsx(BreadCrumbBase.Separator, { className: cn(separatorIconSizeClasses[size], 'text-neutral700', className), ...props }));
 const LDBreadCrumb = ({ 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(LDButton, { 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}`));
-            }) }) }));
+    return (_jsx(BreadCrumbBase.Root, { children: _jsx(BreadCrumbBase.List, { className: cn('gap-xs', className), children: items.map((item, index) => (_jsxs(Fragment, { children: [_jsx(Item, { children: item.href ? (_jsx(Link, { href: item.href, icon: item.icon, size: size, className: item.className, children: item.label })) : (_jsx(Page, { icon: item.icon, size: size, className: item.className, children: item.label })) }), index < items.length - 1 && (_jsx(Separator, { size: size, children: separator }))] }, `${item.label}-${index}`))) }) }));
 };
+LDBreadCrumb.Root = BreadCrumbBase.Root;
+LDBreadCrumb.List = BreadCrumbBase.List;
+LDBreadCrumb.Item = Item;
+LDBreadCrumb.Link = Link;
+LDBreadCrumb.Page = Page;
+LDBreadCrumb.Separator = Separator;
 export default LDBreadCrumb;

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

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

package/dist/components/LDButton/LDButton.d.ts

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { type ElementType } from 'react';
+import type { Color, Size, Variant } from '../../types/common.js';
 import { PolymorphicComponentProps } from '../../types/polymorphic.js';
-type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'link';
-type ButtonColor = 'neutral' | 'point' | 'danger';
-export type ButtonSize = '2xsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+import type { Subset } from '../../types/subset.js';
+type ButtonVariant = Subset<Variant, 'solid' | 'outline' | 'ghost' | 'link'>;
+export type ButtonColor = Subset<Color, 'neutral' | 'point' | 'danger'>;
+export type ButtonSize = Subset<Size, '2xsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'>;
 type ButtonShape = 'default' | 'capsule';
 type ButtonAlign = 'left' | 'center' | 'right';
 type _ButtonProps = {

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

@@ -1 +1 @@
-{"version":3,"file":"LDButton.d.ts","sourceRoot":"","sources":["../../../src/components/LDButton/LDButton.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;AASpE,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;AAoO/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,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,IAAI,yBAAyB,CAC1E,CAAC,EACD,YAAY,CACb,CAAC;AAEF,KAAK,eAAe,GAAG,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAC5D,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,KACpB,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B,QAAA,MAAM,QAAQ,EAAE,eAwDf,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"LDButton.d.ts","sourceRoot":"","sources":["../../../src/components/LDButton/LDButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAMzC,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAM7C,KAAK,aAAa,GAAG,MAAM,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;AAC7E,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC,CAAC;AACxE,MAAM,MAAM,UAAU,GAAG,MAAM,CAC7B,IAAI,EACJ,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAC/D,CAAC;AACF,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;AACzC,KAAK,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAgO/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,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,IAAI,yBAAyB,CAC1E,CAAC,EACD,YAAY,CACb,CAAC;AAEF,KAAK,eAAe,GAAG,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAC5D,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,KACpB,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B,QAAA,MAAM,QAAQ,EAAE,eAyDf,CAAC;AAEF,eAAe,QAAQ,CAAC"}