@loword/loword-design-system 0.0.2 → 0.0.4

package/dist/components/LDToggleButton/ToggleButtonBase.d.ts

@@ -0,0 +1,41 @@
+import { type ReactNode, type Ref } from 'react';
+interface ToggleButtonContextType {
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    disabled: boolean;
+    isFocused: boolean;
+    setIsFocused: (focused: boolean) => void;
+}
+export declare const useToggleButtonContext: () => ToggleButtonContextType;
+interface RootProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: ReactNode;
+}
+interface HiddenInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    ref?: Ref<HTMLInputElement>;
+}
+interface TrackProps {
+    className?: string;
+    children?: ReactNode;
+}
+interface ThumbProps {
+    className?: string;
+}
+interface LabelProps {
+    className?: string;
+    children?: ReactNode;
+}
+export declare const ToggleButtonBase: {
+    Root: ({ checked, defaultChecked, onCheckedChange, disabled, className, style, children, }: RootProps) => import("react/jsx-runtime").JSX.Element;
+    HiddenInput: ({ ref, onFocus, onBlur, onChange, ...props }: HiddenInputProps) => import("react/jsx-runtime").JSX.Element;
+    Track: ({ className, children }: TrackProps) => import("react/jsx-runtime").JSX.Element;
+    Thumb: ({ className }: ThumbProps) => import("react/jsx-runtime").JSX.Element;
+    Label: ({ className, children }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default ToggleButtonBase;
+//# sourceMappingURL=ToggleButtonBase.d.ts.map

package/dist/components/LDToggleButton/ToggleButtonBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButtonBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDToggleButton/ToggleButtonBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,GAAG,EAIT,MAAM,OAAO,CAAC;AAIf,UAAU,uBAAuB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAID,eAAO,MAAM,sBAAsB,+BAOlC,CAAC;AAGF,UAAU,SAAS;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA+CD,UAAU,gBAAiB,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAC5E,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAuCD,UAAU,UAAU;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAgBD,UAAU,UAAU;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAcD,UAAU,UAAU;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD,eAAO,MAAM,gBAAgB;gGA1H1B,SAAS;gEA+CT,gBAAgB;qCAoCqB,UAAU;2BAkBpB,UAAU;qCAiBA,UAAU;CAUjD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/LDToggleButton/ToggleButtonBase.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState, } from 'react';
+import cn from '../../utils/cn.js';
+const ToggleButtonContext = createContext(null);
+export const useToggleButtonContext = () => {
+    const ctx = useContext(ToggleButtonContext);
+    if (!ctx)
+        throw new Error('ToggleButtonBase 하위 컴포넌트는 Root 내부에서 사용해야 합니다.');
+    return ctx;
+};
+const Root = ({ checked, defaultChecked = false, onCheckedChange, disabled = false, className, style, children, }) => {
+    const [internal, setInternal] = useState(defaultChecked);
+    const [isFocused, setIsFocused] = useState(false);
+    const isControlled = checked !== undefined;
+    const resolved = isControlled ? checked : internal;
+    const handleChange = (val) => {
+        if (!isControlled)
+            setInternal(val);
+        onCheckedChange?.(val);
+    };
+    return (_jsx(ToggleButtonContext, { value: {
+            checked: resolved,
+            onCheckedChange: handleChange,
+            disabled,
+            isFocused,
+            setIsFocused,
+        }, children: _jsx("label", { style: style, onClick: (e) => e.stopPropagation(), className: cn('flex items-center gap-sm', disabled ? 'cursor-not-allowed' : 'cursor-pointer', className), children: children }) }));
+};
+const HiddenInput = ({ ref, onFocus, onBlur, onChange, ...props }) => {
+    const { checked, onCheckedChange, disabled, setIsFocused } = useToggleButtonContext();
+    return (_jsx("input", { type: "checkbox", role: "switch", "aria-checked": checked, ref: ref, className: "sr-only peer", checked: checked, disabled: disabled, onChange: (e) => {
+            e.stopPropagation();
+            onCheckedChange(e.target.checked);
+            onChange?.(e);
+        }, onFocus: (e) => {
+            setIsFocused(true);
+            onFocus?.(e);
+        }, onBlur: (e) => {
+            setIsFocused(false);
+            onBlur?.(e);
+        }, ...props }));
+};
+const Track = ({ className, children }) => {
+    return (_jsx("span", { className: cn('relative flex items-center rounded-full shrink-0', className), children: children }));
+};
+const Thumb = ({ className }) => {
+    return (_jsx("span", { className: cn('absolute rounded-full top-1/2 -translate-y-1/2', className) }));
+};
+const Label = ({ className, children }) => {
+    return _jsx("span", { className: className, children: children });
+};
+export const ToggleButtonBase = {
+    Root,
+    HiddenInput,
+    Track,
+    Thumb,
+    Label,
+};
+export default ToggleButtonBase;

package/dist/components/LDTooltip/LDTooltip.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface LDTooltipProps {
+    /** 툴팁이 표시될 트리거 요소 */
+    children: React.ReactElement;
+    /** 툴팁 내용 (생략 시 children 텍스트가 잘릴 때만 자동 표시) */
+    content?: React.ReactNode;
+    /** 툴팁 표시 위치 */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** 툴팁 정렬 */
+    align?: 'start' | 'center' | 'end';
+    /** 추가 CSS 클래스 */
+    className?: string;
+    /** 인라인 스타일 */
+    style?: React.CSSProperties;
+}
+declare const LDTooltip: ({ children, content, side, align, className, style, }: LDTooltipProps) => import("react/jsx-runtime").JSX.Element;
+export default LDTooltip;
+//# sourceMappingURL=LDTooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LDTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/LDTooltip/LDTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,cAAc;IAC7B,qBAAqB;IACrB,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,6CAA6C;IAC7C,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,eAAe;IACf,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,YAAY;IACZ,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,SAAS,GAAI,uDAOhB,cAAc,4CA8BhB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/LDTooltip/LDTooltip.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import TooltipBase from './TooltipBase.js';
+import cn from '../../utils/cn.js';
+const LDTooltip = ({ children, content, side = 'top', align = 'center', className, style, }) => {
+    const { ref: textRef, isTruncated } = TooltipBase.useTruncation([children]);
+    const tooltipContent = content ?? textRef.current?.textContent ?? '';
+    const shouldShow = content ? true : isTruncated;
+    return (_jsx(TooltipBase.Provider, { children: _jsxs(TooltipBase.Root, { children: [_jsx(TooltipBase.Trigger, { asChild: true, children: _jsx("div", { className: cn('relative w-full', className), style: style, children: React.cloneElement(children, {
+                            ref: textRef,
+                        }) }) }), shouldShow && (_jsxs(TooltipBase.Content, { side: side, align: align, className: "px-2 py-1 text-xs text-white whitespace-nowrap bg-gray-900 rounded", children: [tooltipContent, _jsx(TooltipBase.Arrow, { className: "fill-gray-900" })] }))] }) }));
+};
+export default LDTooltip;

package/dist/components/LDTooltip/TooltipBase.d.ts

@@ -0,0 +1,39 @@
+import { type ReactNode } from 'react';
+interface ProviderProps {
+    delayDuration?: number;
+    children?: ReactNode;
+}
+interface RootProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: ReactNode;
+}
+interface TriggerProps {
+    asChild?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+interface ContentProps {
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    sideOffset?: number;
+    align?: 'start' | 'center' | 'end';
+    className?: string;
+    children?: ReactNode;
+}
+interface ArrowProps {
+    className?: string;
+}
+export declare const TooltipBase: {
+    Provider: ({ delayDuration, children }: ProviderProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ open, defaultOpen, onOpenChange, children }: RootProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ asChild, className, children }: TriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ side, sideOffset, align, className, children, }: ContentProps) => import("react/jsx-runtime").JSX.Element;
+    Arrow: ({ className }: ArrowProps) => import("react/jsx-runtime").JSX.Element;
+    useTruncation: (deps?: React.DependencyList) => {
+        ref: import("react").RefObject<HTMLElement | null>;
+        isTruncated: boolean;
+    };
+};
+export default TooltipBase;
+//# sourceMappingURL=TooltipBase.d.ts.map

package/dist/components/LDTooltip/TooltipBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDTooltip/TooltipBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AA2BpE,UAAU,aAAa;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAWD,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAeD,UAAU,YAAY;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAWD,UAAU,YAAY;IACpB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA4BD,UAAU,UAAU;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD,eAAO,MAAM,WAAW;4CAtF6B,aAAa;0DAgBL,SAAS;gDAmBnB,YAAY;iEAuB5D,YAAY;2BAwBe,UAAU;2BA7GX,KAAK,CAAC,cAAc;;;;CAwHhD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/LDTooltip/TooltipBase.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect, useState } from 'react';
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+import cn from '../../utils/cn.js';
+// ── 말줄임 감지 Hook ──
+const useTruncation = (deps = []) => {
+    const ref = useRef(null);
+    const [isTruncated, setIsTruncated] = useState(false);
+    useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        const checkTruncation = () => {
+            setIsTruncated(element.scrollWidth > element.clientWidth);
+        };
+        checkTruncation();
+        window.addEventListener('resize', checkTruncation);
+        return () => window.removeEventListener('resize', checkTruncation);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, deps);
+    return { ref, isTruncated };
+};
+const Provider = ({ delayDuration = 200, children }) => {
+    return (_jsx(RadixTooltip.Provider, { delayDuration: delayDuration, children: children }));
+};
+const Root = ({ open, defaultOpen, onOpenChange, children }) => {
+    return (_jsx(RadixTooltip.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: children }));
+};
+const Trigger = ({ asChild, className, children }) => {
+    return (_jsx(RadixTooltip.Trigger, { asChild: asChild, className: className, children: children }));
+};
+const Content = ({ side = 'top', sideOffset = 8, align = 'center', className, children, }) => {
+    return (_jsx(RadixTooltip.Portal, { children: _jsx(RadixTooltip.Content, { side: side, sideOffset: sideOffset, align: align, className: cn('z-50 outline-hidden', 'animate-in fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0', className), children: children }) }));
+};
+const Arrow = ({ className }) => {
+    return _jsx(RadixTooltip.Arrow, { className: className });
+};
+export const TooltipBase = {
+    Provider,
+    Root,
+    Trigger,
+    Content,
+    Arrow,
+    useTruncation,
+};
+export default TooltipBase;

package/dist/components/LNB/LNBBase.js

@@ -4,7 +4,7 @@ import { createContext, useContext, useEffect, useState } from 'react';
 import { ChevronDown, PanelLeftClose, PanelLeftOpen, LogOut, } from 'lucide-react';
 import cn from '../../utils/cn.js';
 import { isActivePath } from '../../utils/utils.js';
-import Avatar from '../Avatar/Avatar.js';
+import LDAvatar from '../LDAvatar/LDAvatar.js';
 const LNBContext = createContext(null);
 const useLNBContext = () => {
     const ctx = useContext(LNBContext);
@@ -58,7 +58,7 @@ const Header = ({ name, email, profileImage, handleLogout }) => {
     const { collapsed } = useLNBContext();
     return (_jsxs("div", { className: cn('w-full flex gap-sm items-center rounded-[10px] ld-transition overflow-hidden', collapsed
             ? 'p-xs justify-center border-transparent'
-            : 'p-md mobile:p-sm border border-neutral100'), children: [_jsx(Avatar, { size: "md", src: profileImage }), !collapsed && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-xs flex-1 min-w-0", children: [_jsx("span", { className: "display16 bold truncate", children: name ?? '' }), _jsx("span", { className: "display14 text-neutral500 truncate", children: email ?? '' })] }), handleLogout && (_jsx(LogOut, { size: 12, className: "cursor-pointer flex-shrink-0", onClick: handleLogout }))] }))] }));
+            : 'p-md mobile:p-sm border border-neutral100'), children: [_jsx(LDAvatar, { size: "md", src: profileImage }), !collapsed && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-xs flex-1 min-w-0", children: [_jsx("span", { className: "display16 bold truncate", children: name ?? '' }), _jsx("span", { className: "display14 text-neutral500 truncate", children: email ?? '' })] }), handleLogout && (_jsx(LogOut, { size: 12, className: "cursor-pointer flex-shrink-0", onClick: handleLogout }))] }))] }));
 };
 const Content = ({ children, className }) => (_jsxs(_Fragment, { children: [_jsx("div", { className: "w-full border-b border-neutral100" }), _jsx("div", { className: cn('flex flex-col gap-md mobile:overflow-y-auto mobile:h-[calc(62dvh-111px)]', className), children: children })] }));
 const Group = ({ children, label, noSlider }) => {

package/dist/components/Spinner/Spinner.d.ts

@@ -11,7 +11,7 @@ export interface SpinnerProps {
     /**
      * 사용할 아이콘 타입을 지정합니다. (기본값: 'default')
      */
-    variant?: 'default' | 'circle';
+    variant?: 'default' | 'split';
     /**
      * 접근성을 위한 라벨입니다. (기본값: 'loading')
      */

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

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,WAAW,GACnB,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,KAAK,GACL,QAAQ,CAAC;AAWb,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,QAAA,MAAM,OAAO,GAAI,sCAKd,YAAY,4CAYd,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,WAAW,GACnB,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,OAAO,GACP,KAAK,GACL,QAAQ,CAAC;AAWb,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,QAAA,MAAM,OAAO,GAAI,sCAKd,YAAY,4CAYd,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/Spinner/Spinner.js

@@ -13,7 +13,7 @@ const sizeMap = {
  * 디자인 시스템 표준을 따르는 Spinner 컴포넌트입니다.
  */
 const Spinner = ({ size = 'large', className, variant = 'default', label = 'loading', }) => {
-    const Icon = variant === 'circle' ? LoaderCircleIcon : LoaderIcon;
+    const Icon = variant === 'default' ? LoaderCircleIcon : LoaderIcon;
     const pixelSize = typeof size === 'number' ? size : sizeMap[size];
     return (_jsx(Icon, { size: pixelSize, className: cn('animate-spin text-muted-foreground', className), role: "status", "aria-label": label }));
 };

package/dist/index.css

@@ -108,6 +108,7 @@
     --spacing_12: 12px;
     --spacing_16: 16px;
     --spacing_20: 20px;
+    --spacing_24: 24px;
     --spacing_28: 28px;
     --spacing_32: 32px;
     --spacing_40: 40px;
@@ -184,7 +185,7 @@
     --control-icon-sm: 16px;
     --control-icon-md: 20px;
     --control-icon-lg: 24px;
-    --control-icon-xl: 32px;
+    --control-icon-xl: 28px;
     --control-gap-2xs: var(--spacing_2);
     --control-gap-xs: var(--spacing_4);
     --control-gap-sm: var(--spacing_6);
@@ -194,6 +195,12 @@
     --control-border-2xs: 1px;
     --control-border-xs: 2px;
     --control-font-weight: var(--font-medium);
+    --control-size-spinner-2xs: var(--spacing_8);
+    --control-size-spinner-xs: var(--spacing_12);
+    --control-size-spinner-sm: var(--spacing_16);
+    --control-size-spinner-md: var(--spacing_20);
+    --control-size-spinner-lg: var(--spacing_24);
+    --control-size-spinner-xl: var(--spacing_28);
     --control-padding-x-button-2xs: var(--spacing_4);
     --control-padding-x-button-xs: var(--spacing_8);
     --control-padding-x-button-sm: var(--spacing_12);
@@ -217,12 +224,6 @@
     --control-padding-x-badge-xs: var(--spacing_8);
     --control-padding-x-badge-sm: var(--spacing_12);
     --control-padding-x-badge-md: var(--spacing_16);
-    --control-size-spinner-2xs: var(--spacing_4);
-    --control-size-spinner-xs: var(--spacing_8);
-    --control-size-spinner-sm: var(--spacing_12);
-    --control-size-spinner-md: var(--spacing_16);
-    --control-size-spinner-lg: var(--spacing_20);
-    --control-size-spinner-xl: var(--spacing_28);
     --modal-width-sm: 400px;
     --modal-width-md: 520px;
     --modal-width-lg: 680px;
@@ -1575,9 +1576,15 @@
   .h-\[calc\(100vh-64px\)\] {
     height: calc(100vh - 64px);
   }
+  .h-auto\! {
+    height: auto !important;
+  }
   .h-full {
     height: 100%;
   }
+  .h-px {
+    height: 1px;
+  }
   .max-h-0 {
     max-height: calc(var(--spacing) * 0);
   }
@@ -1690,6 +1697,9 @@
   .w-16 {
     width: calc(var(--spacing) * 16);
   }
+  .w-20 {
+    width: calc(var(--spacing) * 20);
+  }
   .w-24 {
     width: calc(var(--spacing) * 24);
   }
@@ -1886,6 +1896,9 @@
   .justify-start {
     justify-content: flex-start;
   }
+  .gap-0\.5 {
+    gap: calc(var(--spacing) * 0.5);
+  }
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
@@ -2067,9 +2080,6 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
-  .border-current {
-    border-color: currentcolor;
-  }
   .border-danger100 {
     border-color: var(--color-danger100);
   }
@@ -2103,9 +2113,6 @@
   .border-transparent {
     border-color: transparent;
   }
-  .border-t-transparent {
-    border-top-color: transparent;
-  }
   .bg-accept600 {
     background-color: var(--color-accept600);
   }
@@ -2274,6 +2281,9 @@
   .px-0 {
     padding-inline: calc(var(--spacing) * 0);
   }
+  .px-0\! {
+    padding-inline: calc(var(--spacing) * 0) !important;
+  }
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
@@ -2386,6 +2396,36 @@
   .font-semibold {
     font-family: var(--font-semibold);
   }
+  .bread-crumb-2xs {
+    font-size: var(--text-display10);
+    line-height: var(--leading-display10);
+    letter-spacing: var(--tracking-display10);
+  }
+  .bread-crumb-lg {
+    font-size: var(--text-display18);
+    line-height: var(--leading-display18);
+    letter-spacing: var(--tracking-display18);
+  }
+  .bread-crumb-md {
+    font-size: var(--text-display16);
+    line-height: var(--leading-display16);
+    letter-spacing: var(--tracking-display16);
+  }
+  .bread-crumb-sm {
+    font-size: var(--text-display14);
+    line-height: var(--leading-display14);
+    letter-spacing: var(--tracking-display14);
+  }
+  .bread-crumb-xl {
+    font-size: var(--text-display20);
+    line-height: var(--leading-display20);
+    letter-spacing: var(--tracking-display20);
+  }
+  .bread-crumb-xs {
+    font-size: var(--text-display12);
+    line-height: var(--leading-display12);
+    letter-spacing: var(--tracking-display12);
+  }
   .display10 {
     font-size: var(--text-display10);
     line-height: var(--leading-display10);
@@ -2481,6 +2521,9 @@
   .bold {
     font-weight: var(--font-bold);
   }
+  .extrabold {
+    font-weight: var(--font-extrabold);
+  }
   .light {
     font-weight: var(--font-light);
   }
@@ -2514,6 +2557,9 @@
   .text-blue400 {
     color: var(--color-blue400);
   }
+  .text-current {
+    color: currentcolor;
+  }
   .text-danger400 {
     color: var(--color-danger400);
   }
@@ -2571,6 +2617,9 @@
   .text-neutral500 {
     color: var(--color-neutral500);
   }
+  .text-neutral700 {
+    color: var(--color-neutral700);
+  }
   .text-neutral800 {
     color: var(--color-neutral800);
   }
@@ -2942,6 +2991,13 @@
       }
     }
   }
+  .hover\:bg-transparent {
+    &:hover {
+      @media (hover: hover) {
+        background-color: transparent;
+      }
+    }
+  }
   .hover\:text-blue400 {
     &:hover {
       @media (hover: hover) {
@@ -3184,6 +3240,11 @@
       background-color: var(--color-neutral900);
     }
   }
+  .active\:bg-transparent {
+    &:active {
+      background-color: transparent;
+    }
+  }
   .active\:text-danger600 {
     &:active {
       color: var(--color-danger600);
@@ -3546,6 +3607,47 @@
       height: calc(var(--spacing) * 3.5);
     }
   }
+  .\[\&\>svg\]\:icon-2xs {
+    &>svg {
+      width: var(--control-icon-2xs);
+      height: var(--control-icon-2xs);
+    }
+  }
+  .\[\&\>svg\]\:icon-lg {
+    &>svg {
+      width: var(--control-icon-lg);
+      height: var(--control-icon-lg);
+    }
+  }
+  .\[\&\>svg\]\:icon-md {
+    &>svg {
+      width: var(--control-icon-md);
+      height: var(--control-icon-md);
+    }
+  }
+  .\[\&\>svg\]\:icon-sm {
+    &>svg {
+      width: var(--control-icon-sm);
+      height: var(--control-icon-sm);
+    }
+  }
+  .\[\&\>svg\]\:icon-xl {
+    &>svg {
+      width: var(--control-icon-xl);
+      height: var(--control-icon-xl);
+    }
+  }
+  .\[\&\>svg\]\:icon-xs {
+    &>svg {
+      width: var(--control-icon-xs);
+      height: var(--control-icon-xs);
+    }
+  }
+  .\[\&\>svg\]\:shrink-0 {
+    &>svg {
+      flex-shrink: 0;
+    }
+  }
   .\[\&\>svg\]\:text-neutral-500 {
     &>svg {
       color: var(--color-neutral-500);

package/dist/index.d.ts

@@ -1,54 +1,57 @@
-export { default as Avatar } from './components/Avatar/Avatar.js';
-export { default as Badge } from './components/Badge/Badge.js';
-export { default as Button } from './components/Button/Button.js';
-export { default as Calendar } from './components/Calendar/Calendar.js';
-export { default as Carousel } from './components/Carousel/Carousel.js';
-export { default as Checkbox } from './components/Checkbox/Checkbox.js';
-export { default as CheckboxGroup } from './components/Checkbox/CheckboxGroup.js';
-export { default as FormCheckbox } from './components/Checkbox/FormCheckbox.js';
-export { default as FormCheckboxGroup } from './components/Checkbox/FormCheckboxGroup.js';
-export { default as DataCalendar } from './components/DataCalendar/DataCalendar.js';
-export { default as DatePicker } from './components/DatePicker/DatePicker.js';
-export { default as FormDatePicker } from './components/DatePicker/FormDatePicker.js';
-export { default as DateRangePicker } from './components/DateRangePicker/DateRangePicker.js';
-export { default as FormDateRangePicker } from './components/DateRangePicker/FormDateRangePicker.js';
-export { default as Drawer } from './components/Drawer/Drawer.js';
-export { default as Editor } from './components/Editor/Editor.js';
-export { default as Viewer } from './components/Editor/Viewer.js';
-export { default as FileUploadBase } from './components/FileUpload/FileUploadBase.js';
+export { default as LDAvatar } from './components/LDAvatar/LDAvatar.js';
+export { default as LDBadge } from './components/LDBadge/LDBadge.js';
+export { default as LDBreadCrumb, type LDBreadCrumbProps, type LDBreadCrumbItem, } from './components/LDBreadCrumb/LDBreadCrumb.js';
+export { default as LDButton } from './components/LDButton/LDButton.js';
+export { default as LDCalendar } from './components/LDCalendar/LDCalendar.js';
+export { default as LDCallout } from './components/LDCallout/LDCallout.js';
+export { default as LDCarousel } from './components/LDCarousel/LDCarousel.js';
+export { default as LDCheckbox } from './components/LDCheckbox/LDCheckbox.js';
+export { default as LDCheckboxGroup } from './components/LDCheckbox/LDCheckboxGroup.js';
+export { default as FormCheckbox } from './components/LDCheckbox/FormCheckbox.js';
+export { default as FormCheckboxGroup } from './components/LDCheckbox/FormCheckboxGroup.js';
+export { default as LDDataCalendar } from './components/LDDataCalendar/LDDataCalendar.js';
+export { default as LDDatePicker } from './components/LDDatePicker/LDDatePicker.js';
+export { default as FormDatePicker } from './components/LDDatePicker/FormDatePicker.js';
+export { default as LDDateRangePicker } from './components/LDDateRangePicker/LDDateRangePicker.js';
+export { default as FormDateRangePicker } from './components/LDDateRangePicker/FormDateRangePicker.js';
+export { default as LDDivider, type LDDividerProps, } from './components/LDDivider/LDDivider.js';
+export { default as LDDrawer } from './components/LDDrawer/LDDrawer.js';
+export { default as LDEditor } from './components/LDEditor/LDEditor.js';
+export { default as LDViewer } from './components/LDEditor/LDViewer.js';
+export { default as LDFileUploadBase } from './components/LDFileUpload/LDFileUploadBase.js';
 export { Form, NativeForm } from './components/Form/Form.js';
 export { default as FormField } from './components/Form/FormField.js';
 export { default as FormErrorMessage } from './components/Form/FormErrorMessage.js';
 export { default as LucideIcon } from './components/Icon/LucideIcon.js';
-export { default as Input, type InputProps } from './components/Input/Input.js';
-export { default as FormInput } from './components/Input/FormInput.js';
-export { default as LNBBase } from './components/LNB/LNBBase.js';
-export { default as LoadingDots } from './components/LoadingDots/LoadingDots.js';
-export { default as MenuBar } from './components/MenuBar/MenuBar.js';
-export { default as Modal } from './components/Modal/Modal.js';
-export { default as openModal } from './components/Modal/openModal.js';
-export { default as OTPInput } from './components/OTPInput/OTPInput.js';
-export { default as Pagination } from './components/Pagination/Pagination.js';
-export { default as Popover } from './components/Popover/Popover.js';
-export { default as Radio } from './components/Radio/Radio.js';
-export { default as RadioGroup } from './components/Radio/RadioGroup.js';
-export { default as FormRadioGroup } from './components/Radio/FormRadioGroup.js';
-export { default as ScrollArea } from './components/ScrollArea/ScrollArea.js';
-export { default as Select } from './components/Select/Select.js';
-export { default as MultiSelect } from './components/Select/MultiSelect.js';
-export { default as FormSelect } from './components/Select/FormSelect.js';
-export { default as FormMultiSelect } from './components/Select/FormMultiSelect.js';
-export { default as Skeleton } from './components/Skeleton/Skeleton.js';
-export { default as Slider, type SliderProps, } from './components/Slider/Slider.js';
-export { default as Spinner } from './components/Spinner/Spinner.js';
-export { default as Table } from './components/Table/Table.js';
-export { default as TanstackTable } from './components/Table/TanstackTable.js';
-export { default as TableField } from './components/Table/TableField.js';
-export { default as TimePicker } from './components/TimePicker/TimePicker.js';
-export { default as FormTimePicker } from './components/TimePicker/FormTimePicker.js';
-export { default as Toast } from './components/Toast/Toast.js';
-export { default as Toaster } from './components/Toast/Toaster.js';
-export { default as ToggleButton, type ToggleButtonProps, } from './components/ToggleButton/ToggleButton.js';
-export { default as FormToggleButton } from './components/ToggleButton/FormToggleButton.js';
-export { default as Tooltip } from './components/Tooltip/Tooltip.js';
+export { default as LDInput, type LDInputProps, } from './components/LDInput/LDInput.js';
+export { default as FormInput } from './components/LDInput/FormInput.js';
+export { default as LDLNBBase } from './components/LDLNB/LDLNBBase.js';
+export { default as LDLoadingDots } from './components/LDLoadingDots/LDLoadingDots.js';
+export { default as LDMenuBar } from './components/LDMenuBar/LDMenuBar.js';
+export { default as LDModal } from './components/LDModal/LDModal.js';
+export { default as openModal } from './components/LDModal/openModal.js';
+export { default as LDOTPInput } from './components/LDOTPInput/LDOTPInput.js';
+export { default as LDPagination } from './components/LDPagination/LDPagination.js';
+export { default as LDPopover } from './components/LDPopover/LDPopover.js';
+export { default as LDRadio } from './components/LDRadio/LDRadio.js';
+export { default as LDRadioGroup } from './components/LDRadio/LDRadioGroup.js';
+export { default as FormRadioGroup } from './components/LDRadio/FormRadioGroup.js';
+export { default as LDScrollArea } from './components/LDScrollArea/LDScrollArea.js';
+export { default as LDSelect } from './components/LDSelect/LDSelect.js';
+export { default as LDMultiSelect } from './components/LDSelect/LDMultiSelect.js';
+export { default as FormSelect } from './components/LDSelect/FormSelect.js';
+export { default as FormMultiSelect } from './components/LDSelect/FormMultiSelect.js';
+export { default as LDSkeleton } from './components/LDSkeleton/LDSkeleton.js';
+export { default as LDSlider, type LDSliderProps, } from './components/LDSlider/LDSlider.js';
+export { default as LDSpinner } from './components/LDSpinner/LDSpinner.js';
+export { default as LDTable } from './components/LDTable/LDTable.js';
+export { default as LDTanstackTable } from './components/LDTable/LDTanstackTable.js';
+export { default as TableField } from './components/LDTable/TableField.js';
+export { default as LDTimePicker } from './components/LDTimePicker/LDTimePicker.js';
+export { default as FormTimePicker } from './components/LDTimePicker/FormTimePicker.js';
+export { default as LDToast } from './components/LDToast/LDToast.js';
+export { default as LDToaster } from './components/LDToast/LDToaster.js';
+export { default as LDToggleButton, type LDToggleButtonProps, } from './components/LDToggleButton/LDToggleButton.js';
+export { default as FormToggleButton } from './components/LDToggleButton/FormToggleButton.js';
+export { default as LDTooltip } from './components/LDTooltip/LDTooltip.js';
 //# sourceMappingURL=index.d.ts.map