@loword/loword-design-system 0.0.1

package/dist/components/Select/MultiSelect.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import SelectBase from './SelectBase.js';
+import LucideIcon from '../Icon/LucideIcon.js';
+import cn from '../../utils/cn.js';
+// ── variant × color 조합 ──
+const variantColorClasses = {
+    filled: {
+        neutral: 'bg-neutral5 text-neutral100 border-[0.5px] border-mono200 data-[state=open]:border-lb500',
+        point: 'bg-neutral5 text-neutral100 border-[0.5px] border-mono200 data-[state=open]:border-lb500',
+        danger: 'bg-tintRed text-neutral100 border-[0.5px] border-transparent data-[state=open]:border-red500',
+    },
+    outline: {
+        neutral: 'bg-transparent text-neutral100 border border-neutral10 data-[state=open]:border-lb500',
+        point: 'bg-transparent text-neutral100 border border-neutral10 data-[state=open]:border-lb500',
+        danger: 'bg-transparent text-neutral100 border border-danger100 data-[state=open]:border-red500',
+    },
+    ghost: {
+        neutral: 'bg-transparent text-neutral100 border-[0.5px] border-transparent data-[state=open]:border-lb500 hover:bg-neutral5',
+        point: 'bg-transparent text-neutral100 border-[0.5px] border-transparent data-[state=open]:border-lb500 hover:bg-neutral5',
+        danger: 'bg-transparent text-danger500 border-[0.5px] border-transparent data-[state=open]:border-red500 hover:bg-tintRed',
+    },
+};
+const disabledVariantClasses = {
+    filled: 'bg-mono20 text-neutral20',
+    outline: 'bg-transparent text-neutral20 border border-mono20',
+    ghost: 'bg-transparent text-neutral20',
+};
+const sizeClasses = {
+    xs: 'min-h-[38px] display14',
+    sm: 'min-h-10 display14',
+    md: 'min-h-[56px] display16',
+    lg: 'min-h-[62px] display18',
+};
+const iconSizes = {
+    xs: 15,
+    sm: 15,
+    md: 16,
+    lg: 16,
+};
+const MultiSelect = ({ items, placeholder = '선택하세요', value = [], onChange, disabled = false, name, variant, color = 'neutral', size, maxDisplay = 2, truncate = true, className, style, contentClassName, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedby, }) => {
+    const iconSize = iconSizes[size ?? 'sm'];
+    return (_jsxs(SelectBase.Root, { multiple: true, values: value, onMultiChange: onChange, disabled: disabled, name: name, items: items, maxDisplay: maxDisplay, children: [_jsx(SelectBase.Trigger, { style: style, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, className: cn('group rounded-[5px] ld-transition outline-none cursor-pointer', variant &&
+                    (disabled
+                        ? disabledVariantClasses[variant]
+                        : variantColorClasses[variant][color]), size && sizeClasses[size], disabled && 'cursor-not-allowed disabled:cursor-not-allowed', className), children: truncate ? (_jsxs("div", { className: "flex gap-sm items-center w-full justify-center px-3 py-1.5", children: [_jsx(SelectBase.Value, { placeholder: placeholder, className: "flex flex-1 bold display14 justify-center text-neutral900", placeholderClassName: "text-neutral200" }), _jsx(LucideIcon, { name: "chevronDown", size: iconSize, className: "text-neutral500 shrink-0" })] })) : (_jsxs("div", { className: "flex gap-sm items-center w-full justify-between px-3 py-1.5", children: [_jsx("div", { className: "flex flex-1 flex-wrap gap-1.5 items-center justify-start text-left", children: value.length === 0 ? (_jsx("span", { className: "text-neutral900", children: placeholder })) : (value.map((v) => {
+                                const label = items.find((i) => i.value === v)?.label || v;
+                                return (_jsxs("span", { className: "flex items-center justify-between px-2 py-1 bg-white rounded-[4px] display12 text-neutral900 shadow-sm", children: [label, _jsx("div", { role: "button", "aria-label": `${label} 삭제`, onClick: (e) => {
+                                                e.stopPropagation();
+                                                e.preventDefault();
+                                                if (!disabled) {
+                                                    onChange?.(value.filter((val) => val !== v));
+                                                }
+                                            }, className: "ml-1 text-neutral900 hover:text-neutral800 cursor-pointer flex items-center justify-center", children: _jsx(LucideIcon, { name: "x", size: 14 }) })] }, v));
+                            })) }), _jsx(LucideIcon, { name: "chevronDown", size: iconSize, className: "text-neutral40 shrink-0" })] })) }), _jsx(SelectBase.Content, { className: cn('rounded-[5px] bg-mono5 border border-mono200 p-2 flex flex-col gap-[2px]', 'origin-top overflow-hidden ld-transition', contentClassName), openClassName: "max-h-[230px] opacity-100 translate-y-0 overflow-y-auto scrollbar-none", closedClassName: "max-h-0 opacity-0 -translate-y-1 pointer-events-none", children: items.map((opt) => {
+                    const isSelected = value.includes(opt.value);
+                    return (_jsxs(SelectBase.Item, { value: opt.value, className: cn('cursor-pointer hover:bg-neutral5 py-xs px-sm rounded-[5px] display14 regular transition-all duration-200 outline-none', 'focus:bg-neutral5 focus:ring-1 focus:ring-inset focus:ring-lb500', 'flex items-center gap-2', isSelected && 'bg-neutral5'), children: [_jsx("div", { className: cn('w-4 h-4 rounded border flex items-center justify-center transition-all', isSelected ? 'bg-lb500 border-lb500' : 'border-neutral20'), children: isSelected && (_jsx(LucideIcon, { name: "check", size: 12, className: "text-white" })) }), _jsx(SelectBase.ItemText, { children: opt.label })] }, opt.value));
+                }) })] }));
+};
+export default MultiSelect;

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,41 @@
+import type { CSSProperties } from 'react';
+import { type SelectOption } from './SelectBase.js';
+type SelectVariant = 'filled' | 'outline' | 'ghost';
+type SelectColor = 'neutral' | 'point' | 'danger';
+type SelectSize = 'xs' | 'sm' | 'md' | 'lg';
+export interface SelectProps {
+    /** 선택 옵션 목록 ({ value, label }) */
+    items: SelectOption[];
+    /** 미선택 시 표시할 텍스트 */
+    placeholder?: string;
+    /** 현재 선택된 값 (controlled) */
+    value?: string;
+    /** 초기 선택 값 (uncontrolled) */
+    defaultValue?: string;
+    /** 값 변경 시 호출되는 콜백 */
+    onChange?: (value: string) => void;
+    /** 비활성화 여부 */
+    disabled?: boolean;
+    /** 폼 필드 이름 */
+    name?: string;
+    /** 드롭다운 스타일 유형 */
+    variant?: SelectVariant;
+    /** 색상 테마 */
+    color?: SelectColor;
+    /** 드롭다운 높이 및 폰트 크기 프리셋 */
+    size?: SelectSize;
+    /** 추가 CSS 클래스 */
+    className?: string;
+    /** 인라인 스타일 */
+    style?: CSSProperties;
+    /** 드롭다운 콘텐츠 영역 className */
+    contentClassName?: string;
+    /** 에러 상태 속성 */
+    'aria-invalid'?: boolean | 'true' | 'false';
+    /** 설명 요소 ID 연결 */
+    'aria-describedby'?: string;
+}
+export type { SelectOption };
+declare const Select: ({ items, placeholder, value, defaultValue, onChange, disabled, name, variant, color, size, className, style, contentClassName, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+export default Select;
+//# sourceMappingURL=Select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAmB,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAK7D,KAAK,aAAa,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;AACpD,KAAK,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAClD,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAwD5C,MAAM,WAAW,WAAW;IAC1B,kCAAkC;IAClC,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,oBAAoB;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6BAA6B;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,cAAc;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kBAAkB;IAClB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,YAAY;IACZ,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,0BAA0B;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc;IACd,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,4BAA4B;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe;IACf,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAC5C,kBAAkB;IAClB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,YAAY,EAAE,YAAY,EAAE,CAAC;AAE7B,QAAA,MAAM,MAAM,GAAI,oMAgBb,WAAW,4CAyEb,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/Select/Select.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import SelectBase from './SelectBase.js';
+import LucideIcon from '../Icon/LucideIcon.js';
+import cn from '../../utils/cn.js';
+// ── variant × color 조합 (LDDropdown 기준) ──
+const variantColorClasses = {
+    filled: {
+        neutral: 'bg-neutral50 text-neutral900 border-[0.5px] border-transparent data-[state=open]:border-lb500',
+        point: 'bg-neutral50 text-neutral900 border-[0.5px] border-transparent data-[state=open]:border-lb500',
+        danger: 'bg-tintRed text-neutral900 border-[0.5px] border-transparent data-[state=open]:border-red500',
+    },
+    outline: {
+        neutral: 'bg-transparent text-neutral900 border border-neutral100 data-[state=open]:border-lb500',
+        point: 'bg-transparent text-neutral900 border border-neutral100 data-[state=open]:border-lb500',
+        danger: 'bg-transparent text-neutral900 border border-danger100 data-[state=open]:border-red500',
+    },
+    ghost: {
+        neutral: 'bg-transparent text-neutral900 border-[0.5px] border-transparent data-[state=open]:border-lb500 hover:bg-neutral50',
+        point: 'bg-transparent text-neutral900 border-[0.5px] border-transparent data-[state=open]:border-lb500 hover:bg-neutral50',
+        danger: 'bg-transparent text-danger500 border-[0.5px] border-transparent data-[state=open]:border-red500 hover:bg-tintRed',
+    },
+};
+// ── disabled 시 variant별 스타일 ──
+const disabledVariantClasses = {
+    filled: 'bg-mono300 text-neutral300',
+    outline: 'bg-transparent text-neutral300 border border-mono300',
+    ghost: 'bg-transparent text-neutral300',
+};
+// ── size (LDDropdown: display14, h-[38px] 기준) ──
+const sizeClasses = {
+    xs: 'h-[38px] display14',
+    sm: 'h-10 display14',
+    md: 'h-[56px] display16',
+    lg: 'h-[62px] display18',
+};
+const iconSizes = {
+    xs: 15,
+    sm: 15,
+    md: 16,
+    lg: 16,
+};
+const Select = ({ items, placeholder = '선택하세요', value, defaultValue, onChange, disabled = false, name, variant, color = 'neutral', size, className, style, contentClassName, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedby, }) => {
+    const iconSize = iconSizes[size ?? 'sm'];
+    // value가 items에 매칭되지 않으면 undefined (Value가 placeholder 표시)
+    const resolvedValue = items.some((item) => item.value === value)
+        ? value
+        : undefined;
+    return (_jsxs(SelectBase.Root, { value: resolvedValue, defaultValue: defaultValue, onChange: onChange, disabled: disabled, name: name, items: items, children: [_jsx(SelectBase.Trigger, { style: style, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, className: cn('group rounded-[5px] ld-transition outline-none cursor-pointer', variant &&
+                    (disabled
+                        ? disabledVariantClasses[variant]
+                        : variantColorClasses[variant][color]), size && sizeClasses[size], disabled && 'cursor-not-allowed disabled:cursor-not-allowed', className), children: _jsxs("div", { className: "flex gap-sm items-center w-full justify-center px-3", children: [_jsx(SelectBase.Value, { placeholder: placeholder, className: "flex flex-1 bold justify-center" }), _jsx(LucideIcon, { name: "chevronDown", size: iconSize, className: "text-neutral500" })] }) }), _jsx(SelectBase.Content, { className: cn('rounded-[5px] bg-white border border-mono100 p-2 flex flex-col gap-3xs', 'origin-top overflow-hidden ld-transition', contentClassName), openClassName: "max-h-[230px] opacity-100 translate-y-0 overflow-y-auto scrollbar-none", closedClassName: "max-h-0 opacity-0 -translate-y-1 pointer-events-none", children: items.map((opt) => (_jsx(SelectBase.Item, { value: opt.value, className: cn('w-full text-left px-3 py-2 rounded-[5px] display14 transition-all cursor-pointer outline-none', 'hover:bg-lb50 hover:text-lb500', 'focus:bg-lb50 focus:text-lb500 focus:ring-1 focus:ring-inset focus:ring-lb500', resolvedValue === opt.value
+                        ? 'bg-neutral10 font-bold text-neutral900'
+                        : 'text-neutral800'), children: _jsx(SelectBase.ItemText, { children: opt.label }) }, opt.value))) })] }));
+};
+export default Select;

package/dist/components/Select/SelectBase.d.ts

@@ -0,0 +1,59 @@
+import { type CSSProperties, type ReactNode } from 'react';
+interface RootProps {
+    multiple?: boolean;
+    value?: string;
+    defaultValue?: string;
+    values?: string[];
+    defaultValues?: string[];
+    onChange?: (value: string) => void;
+    onMultiChange?: (value: string[]) => void;
+    disabled?: boolean;
+    name?: string;
+    items?: SelectOption[];
+    maxDisplay?: number;
+    children?: ReactNode;
+}
+interface TriggerProps {
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+    'aria-invalid'?: boolean | 'true' | 'false';
+    'aria-describedby'?: string;
+}
+interface ValueProps {
+    placeholder?: string;
+    className?: string;
+    placeholderClassName?: string;
+}
+interface ContentProps {
+    className?: string;
+    openClassName?: string;
+    closedClassName?: string;
+    children?: ReactNode;
+}
+interface ItemProps {
+    value: string;
+    className?: string;
+    children?: ReactNode;
+}
+interface ItemIndicatorProps {
+    className?: string;
+    children?: ReactNode;
+}
+export interface SelectOption {
+    label: string;
+    value: string;
+}
+export declare const SelectBase: {
+    Root: ({ multiple, value, defaultValue, values, defaultValues, onChange, onMultiChange, disabled, name, items, maxDisplay, children, }: RootProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ className, style, children, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, }: TriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Value: ({ placeholder, className, placeholderClassName, }: ValueProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ className, openClassName, closedClassName, children, }: ContentProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ value: itemValue, className, children }: ItemProps) => import("react/jsx-runtime").JSX.Element;
+    ItemText: ({ children }: {
+        children?: ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+    ItemIndicator: ({ className, children }: ItemIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
+};
+export default SelectBase;
+//# sourceMappingURL=SelectBase.d.ts.map

package/dist/components/Select/SelectBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectBase.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SelectBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,SAAS,EAQf,MAAM,OAAO,CAAC;AAsCf,UAAU,SAAS;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAsGD,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAC5C,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAyDD,UAAU,UAAU;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AA8CD,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA4DD,UAAU,SAAS;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA4FD,UAAU,kBAAkB;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAeD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,UAAU;4IAhYpB,SAAS;iHAqGT,YAAY;+DA2DZ,UAAU;wEAoDV,YAAY;sDA2D0C,SAAS;6BAqFlC;QAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;KAAE;6CAUR,kBAAkB;CA0BjE,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/Select/SelectBase.js

@@ -0,0 +1,211 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useState, useEffect, useRef, useId, useCallback, } from 'react';
+import cn from '../../utils/cn.js';
+const SelectContext = createContext(null);
+const useSelectContext = () => {
+    const ctx = useContext(SelectContext);
+    if (!ctx)
+        throw new Error('SelectBase 하위 컴포넌트는 Root 내부에서 사용해야 합니다.');
+    return ctx;
+};
+// ── Item Context (Item → ItemIndicator 간 value 공유) ──
+const ItemContext = createContext(null);
+const useItemContext = () => {
+    return useContext(ItemContext);
+};
+const Root = ({ multiple = false, value, defaultValue, values, defaultValues = [], onChange, onMultiChange, disabled = false, name, items, maxDisplay = 2, children, }) => {
+    const [open, setOpen] = useState(false);
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const [internalValues, setInternalValues] = useState(defaultValues);
+    const rootRef = useRef(null);
+    const listboxId = useId();
+    const isControlled = value !== undefined;
+    const isMultiControlled = values !== undefined;
+    const resolvedValue = isControlled ? value : internalValue;
+    const resolvedValues = isMultiControlled ? values : internalValues;
+    const handleChange = useCallback((val) => {
+        if (!isControlled)
+            setInternalValue(val);
+        onChange?.(val);
+    }, [isControlled, onChange]);
+    const handleMultiChange = useCallback((vals) => {
+        if (!isMultiControlled)
+            setInternalValues(vals);
+        onMultiChange?.(vals);
+    }, [isMultiControlled, onMultiChange]);
+    const toggleValue = useCallback((val) => {
+        if (disabled)
+            return;
+        const newValues = resolvedValues.includes(val)
+            ? resolvedValues.filter((v) => v !== val)
+            : [...resolvedValues, val];
+        handleMultiChange(newValues);
+    }, [disabled, resolvedValues, handleMultiChange]);
+    // click-outside (LDDropdown 방식: capture phase)
+    useEffect(() => {
+        const handler = (e) => {
+            if (!rootRef.current?.contains(e.target)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handler, { capture: true });
+        return () => document.removeEventListener('mousedown', handler, { capture: true });
+    }, []);
+    return (_jsx(SelectContext.Provider, { value: {
+            open,
+            setOpen,
+            multiple,
+            value: resolvedValue,
+            values: resolvedValues,
+            onChange: handleChange,
+            onMultiChange: handleMultiChange,
+            toggleValue,
+            disabled,
+            listboxId,
+            items,
+            maxDisplay,
+        }, children: _jsxs("div", { ref: rootRef, className: "relative w-full", children: [name && (_jsx("input", { type: "hidden", name: name, value: multiple ? JSON.stringify(resolvedValues) : (resolvedValue ?? '') })), children] }) }));
+};
+const Trigger = ({ className, style, children, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedby, }) => {
+    const { open, setOpen, disabled, listboxId } = useSelectContext();
+    return (_jsx("button", { type: "button", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": listboxId, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, disabled: disabled, "data-state": open ? 'open' : 'closed', onClick: () => {
+            if (!disabled)
+                setOpen(!open);
+        }, onKeyDown: (e) => {
+            if (disabled)
+                return;
+            if (e.key === 'Enter' ||
+                e.key === ' ' ||
+                e.key === 'ArrowDown' ||
+                e.key === 'ArrowUp') {
+                e.preventDefault();
+                if (!open) {
+                    setOpen(true);
+                }
+                else if (e.key === 'ArrowDown') {
+                    const listbox = document.getElementById(listboxId);
+                    const firstOption = listbox?.querySelector('[role="option"]');
+                    firstOption?.focus();
+                }
+            }
+            else if (e.key === 'Escape') {
+                setOpen(false);
+                // 닫힐 때 트리거로 포커스 이동을 위해 버튼을 찾음
+                e.currentTarget.focus();
+            }
+        }, style: style, className: cn('w-full flex justify-center items-center', className), children: children }));
+};
+const Value = ({ placeholder, className, placeholderClassName, }) => {
+    const { multiple, value, values, items, maxDisplay } = useSelectContext();
+    // 단일 선택
+    if (!multiple) {
+        const selectedLabel = items?.find((item) => item.value === value)?.label;
+        return (_jsx("span", { className: cn(className, selectedLabel == null && placeholderClassName), children: selectedLabel ?? placeholder }));
+    }
+    // 다중 선택
+    if (values.length === 0) {
+        return (_jsx("span", { className: cn(className, placeholderClassName), children: placeholder }));
+    }
+    const selectedLabels = items
+        ?.filter((item) => values.includes(item.value))
+        .map((item) => item.label) ?? [];
+    if (selectedLabels.length <= maxDisplay) {
+        return _jsx("span", { className: className, children: selectedLabels.join(', ') });
+    }
+    return (_jsxs("span", { className: className, children: [selectedLabels.slice(0, maxDisplay).join(', '), " \uC678", ' ', selectedLabels.length - maxDisplay, "\uAC1C"] }));
+};
+const Content = ({ className, openClassName, closedClassName, children, }) => {
+    const { open, multiple, listboxId } = useSelectContext();
+    useEffect(() => {
+        if (open) {
+            const focusAndScroll = () => {
+                const listbox = document.getElementById(listboxId);
+                if (!listbox)
+                    return;
+                let targetOption = listbox.querySelector('[role="option"][aria-selected="true"]');
+                if (!targetOption) {
+                    targetOption = listbox.querySelector('[role="option"]');
+                }
+                if (targetOption) {
+                    targetOption.focus();
+                    targetOption.scrollIntoView({ block: 'nearest' });
+                }
+            };
+            // 즉시 포커스 (키보드 대응)
+            setTimeout(focusAndScroll, 0);
+            // 트랜지션(약 200ms) 후 스크롤 재조정 (max-height가 0일 때 scrollIntoView가 씹히는 문제 방지)
+            setTimeout(focusAndScroll, 200);
+        }
+    }, [open, listboxId]);
+    return (_jsx("ul", { id: listboxId, role: "listbox", tabIndex: -1, "aria-hidden": !open, "aria-multiselectable": multiple || undefined, "data-state": open ? 'open' : 'closed', className: cn('absolute z-50 w-full mt-1', className, open ? openClassName : closedClassName), children: children }));
+};
+const Item = ({ value: itemValue, className, children }) => {
+    const { multiple, value, values, onChange, toggleValue, setOpen, disabled, listboxId, } = useSelectContext();
+    const [highlighted, setHighlighted] = useState(false);
+    const isSelected = multiple
+        ? values.includes(itemValue)
+        : value === itemValue;
+    const handleClick = useCallback(() => {
+        if (disabled)
+            return;
+        if (multiple) {
+            toggleValue(itemValue);
+        }
+        else {
+            onChange?.(itemValue);
+            setOpen(false);
+        }
+    }, [disabled, multiple, onChange, toggleValue, itemValue, setOpen]);
+    return (_jsx(ItemContext.Provider, { value: itemValue, children: _jsx("li", { role: "option", tabIndex: 0, "aria-selected": isSelected, "data-state": isSelected ? 'checked' : 'unchecked', "data-highlighted": highlighted || undefined, onMouseDown: (e) => e.preventDefault(), onClick: handleClick, onMouseEnter: () => setHighlighted(true), onMouseLeave: () => setHighlighted(false), onFocus: () => setHighlighted(true), onBlur: () => setHighlighted(false), onKeyDown: (e) => {
+                switch (e.key) {
+                    case 'Enter':
+                    case ' ':
+                        e.preventDefault();
+                        handleClick();
+                        // 단일 선택 시 닫히고 트리거로 포커스 복귀
+                        if (!multiple) {
+                            const trigger = document.querySelector(`[aria-controls="${listboxId}"]`);
+                            trigger?.focus();
+                        }
+                        break;
+                    case 'Escape':
+                        e.preventDefault();
+                        setOpen(false);
+                        document.querySelector(`[aria-controls="${listboxId}"]`)?.focus();
+                        break;
+                    case 'ArrowDown':
+                        e.preventDefault();
+                        e.currentTarget.nextElementSibling?.focus();
+                        break;
+                    case 'ArrowUp':
+                        e.preventDefault();
+                        e.currentTarget.previousElementSibling?.focus();
+                        break;
+                }
+            }, className: cn('relative flex items-center outline-none cursor-pointer', className), children: children }) }));
+};
+// ── ItemText ──
+const ItemText = ({ children }) => {
+    return _jsx("span", { children: children });
+};
+const ItemIndicator = ({ className, children }) => {
+    const { multiple, value, values } = useSelectContext();
+    const itemValue = useItemContext();
+    const isSelected = multiple
+        ? itemValue != null && values.includes(itemValue)
+        : value === itemValue;
+    if (!isSelected)
+        return null;
+    return _jsx("span", { className: cn('ml-auto', className), children: children });
+};
+export const SelectBase = {
+    Root,
+    Trigger,
+    Value,
+    Content,
+    Item,
+    ItemText,
+    ItemIndicator,
+};
+export default SelectBase;

package/dist/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export interface SkeletonProps {
+    /** false이면 children을 그대로 렌더링합니다 */
+    loading?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+declare const Skeleton: ({ loading, className, children }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;
+export default Skeleton;
+//# sourceMappingURL=Skeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,aAAa;IAC5B,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,QAAQ,GAAI,kCAAyC,aAAa,4CAgBvE,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/Skeleton/Skeleton.js

@@ -0,0 +1,8 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from '../../utils/cn.js';
+const Skeleton = ({ loading = true, className, children }) => {
+    if (!loading)
+        return _jsx(_Fragment, { children: children });
+    return (_jsxs("span", { "aria-busy": "true", "aria-label": "\uB85C\uB529 \uC911", className: cn('relative inline-block overflow-hidden rounded-md', className), children: [_jsx("span", { className: "invisible", children: children }), _jsx("span", { className: "absolute inset-0 rounded-[inherit] bg-mono200 animate-pulse" })] }));
+};
+export default Skeleton;

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,23 @@
+type SliderSingleProps = {
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+};
+type SliderRangeProps = {
+    value?: [number, number];
+    defaultValue?: [number, number];
+    onChange?: (value: [number, number]) => void;
+};
+export type SliderProps = (SliderSingleProps | SliderRangeProps) & {
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    showLabel?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+};
+declare const Slider: (props: SliderProps) => import("react/jsx-runtime").JSX.Element;
+export default Slider;
+//# sourceMappingURL=Slider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAKA,KAAK,iBAAiB,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,CAAC,iBAAiB,GAAG,gBAAgB,CAAC,GAAG;IACjE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAiCF,QAAA,MAAM,MAAM,GAAI,OAAO,WAAW,4CAgUjC,CAAC;AAEF,eAAe,MAAM,CAAC"}