@telepix-lab/telepix-ui 0.7.1 → 0.7.2

package/dist/cjs/lib/color-utils.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 주어진 CSS 변수 이름에 대한 Hex 코드를 반환합니다.
+ *
+ * @param variable - CSS 변수 이름 (예: "--color-neutral-10").
+ * @returns Hex 코드 (예: "#fbfbfbff") 또는 변수가 유효한 색상이 아니거나 찾을 수 없는 경우 null.
+ */
+export declare const getColorHex: (variable: string) => string | null;

package/dist/cjs/pagination-control/index.d.ts

@@ -0,0 +1,27 @@
+interface PaginationControlProps {
+    totalPages?: number;
+    totalCount?: number;
+    currentPage: number;
+    pageSize?: number;
+    maxVisiblePages?: number;
+    showPreviousButton?: boolean;
+    showNextButton?: boolean;
+    onPageChange: (page: number) => void;
+}
+/**
+ * 페이지네이션 컨트롤 컴포넌트입니다.<br/>
+ * 사용자는 총 페이지 수(totalPages) 또는 총 아이템 수(totalCount)와 페이지 크기(pageSize)를 기반으로 현재 페이지(currentPage)를 변경할 수 있습니다.<br/>
+ * 최대 노출 페이지 수(maxVisiblePages), 이전/다음 버튼 노출 여부(showPreviousButton, showNextButton) 등을 설정할 수 있습니다.<br/>
+ * <br/>
+ * ### 사용 예시
+ * ```tsx
+ * <PaginationControl
+ *   totalCount={100}
+ *   currentPage={1}
+ *   pageSize={10}
+ *   onPageChange={(page) => console.log(page)}
+ * />
+ * ```
+ */
+export declare const PaginationControl: ({ totalPages, totalCount, currentPage, pageSize, maxVisiblePages, showPreviousButton, showNextButton, onPageChange, }: PaginationControlProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/cjs/toast/Toast.d.ts

@@ -0,0 +1,38 @@
+import { ToastColor, ToastPosition } from "./types";
+interface ToastProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Toast 메시지 내용 */
+    message: string;
+    /** Toast 색상 테마 */
+    theme?: ToastColor;
+    /** 아이콘 (선택적) */
+    icon?: React.ReactNode;
+    /** 닫기 버튼 표시 여부 */
+    dismissible?: boolean;
+    /** 자동 닫힘 시간 (ms). 0이면 자동 닫힘 비활성화 */
+    duration?: number;
+    /** Toast가 닫힐 때 호출되는 콜백 */
+    onClose?: () => void;
+    /** Toast가 표시되는 위치 (애니메이션 방향 결정용) */
+    position?: ToastPosition;
+}
+/**
+ * Toast 컴포넌트
+ *
+ * 사용자에게 짧은 알림 메시지를 표시하는 컴포넌트입니다.
+ * ToastContainer와 함께 사용하여 화면 상단 또는 하단에 오버레이로 표시합니다.
+ *
+ * @example
+ * // 기본 사용
+ * <Toast message="저장되었습니다." />
+ *
+ * // 자동 닫힘과 닫기 버튼
+ * <Toast
+ *   message="작업이 완료되었습니다."
+ *   theme="positive"
+ *   dismissible
+ *   duration={3000}
+ *   onClose={() => console.log('closed')}
+ * />
+ */
+export declare const Toast: import("react").ForwardRefExoticComponent<ToastProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/cjs/toast/index.d.ts

@@ -0,0 +1,18 @@
+import { ToastPosition } from "./types";
+interface ToastContainerProps {
+    /** Toast가 표시될 위치 */
+    position?: ToastPosition;
+}
+/**
+ * ToastContainer 컴포넌트
+ *
+ * Toast 컴포넌트들을 화면의 상단 또는 하단에 오버레이로 표시하는 컨테이너입니다.
+ * sonner의 Toaster를 기반으로 구현되었으며, position prop을 통해 위치를 지정할 수 있습니다.
+ *
+ * @example
+ * <ToastContainer position="top" />
+ */
+export declare const ToastContainer: import("react").ForwardRefExoticComponent<ToastContainerProps & import("react").RefAttributes<HTMLElement>>;
+export { toast } from "sonner";
+export { Toast } from "./Toast";
+export { useToast } from "./useToast";

package/dist/cjs/toast/types.d.ts

@@ -0,0 +1,60 @@
+export declare const TOAST_COLORS: {
+    readonly THEME: "theme";
+    readonly ERROR: "error";
+    readonly WARNING: "warning";
+    readonly POSITIVE: "positive";
+    readonly CLOUD: "cloud";
+    readonly ACCENT: "accent";
+};
+export type ToastColor = (typeof TOAST_COLORS)[keyof typeof TOAST_COLORS];
+export declare const TOAST_POSITIONS: {
+    readonly TOP: "top";
+    readonly BOTTOM: "bottom";
+};
+export type ToastPosition = (typeof TOAST_POSITIONS)[keyof typeof TOAST_POSITIONS];
+export interface ToastItem {
+    /** Toast 고유 ID */
+    id: string;
+    /** Toast 메시지 */
+    message: string;
+    /** Toast 색상 */
+    theme: ToastColor;
+    /** 아이콘 */
+    icon?: React.ReactNode;
+    /** 닫기 버튼 표시 여부 */
+    dismissible?: boolean;
+    /** 자동 닫힘 시간 (ms) */
+    duration?: number;
+}
+export interface ToastOptions {
+    /** Toast 메시지 */
+    message: string;
+    /** Toast 색상 */
+    theme?: ToastColor;
+    /** 아이콘 */
+    icon?: React.ReactNode;
+    /** 닫기 버튼 표시 여부 */
+    dismissible?: boolean;
+    /** 자동 닫힘 시간 (ms). undefined면 defaultDuration 사용 */
+    duration?: number;
+}
+export interface UseToastOptions {
+    /** Toast 표시 위치 */
+    position?: ToastPosition;
+    /** 기본 자동 닫힘 시간 (ms) */
+    defaultDuration?: number;
+    /** 최대 Toast 개수 */
+    maxToasts?: number;
+}
+export interface UseToastReturn {
+    /** 현재 표시중인 Toast 목록 */
+    toasts: ToastItem[];
+    /** Toast 위치 */
+    position: ToastPosition;
+    /** Toast를 추가하고 ID를 반환 */
+    toast: (options: ToastOptions) => string;
+    /** 특정 Toast를 제거 */
+    removeToast: (id: string) => void;
+    /** 모든 Toast를 제거 */
+    clearToasts: () => void;
+}

package/dist/cjs/toast/useToast.d.ts

@@ -0,0 +1,32 @@
+import { UseToastOptions, UseToastReturn } from "./types";
+/**
+ * Toast를 쉽게 관리할 수 있는 커스텀 훅
+ * sonner 기반으로 구현되었습니다.
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const { toast } = useToast({
+ *     position: "top",
+ *     defaultDuration: 3000,
+ *     maxToasts: 5,
+ *   });
+ *
+ *   const handleSuccess = () => {
+ *     toast({
+ *       message: "저장되었습니다!",
+ *       theme: "positive",
+ *       icon: <CheckCircle size={20} />,
+ *     });
+ *   };
+ *
+ *   return (
+ *     <>
+ *       <button onClick={handleSuccess}>저장</button>
+ *       <ToastContainer position="top" />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export declare function useToast(options?: UseToastOptions): UseToastReturn;

package/dist/client.d.ts

@@ -449,5 +449,13 @@ interface SwitchProps {
 }
 declare const Switch: (props: SwitchProps & React.ComponentProps<typeof Switch$1.Root>) => react_jsx_runtime.JSX.Element;
 
-export { Autocomplete, Calendar, Checkbox, ContextMenu, ContextMenuArrow, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuItemIndicator, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogTrigger, HORIZONTAL_TAB_SIZES, HorizontalTab, HorizontalTabs, InteractiveListItem, InteractiveListItemActions, InteractiveListItemContent, InteractiveListItemIcon, MULTIPLE_SELECT_SIZES, ModeTab, ModeTabs, MultipleSelect, MultipleSelectContent, MultipleSelectTrigger, MultipleSelectValue, RadioGroup, RadioItem, SELECT_TRIGGER_SIZES, SELECT_TRIGGER_VARIANTS, SWITCH_SIZES, SWITCH_VARIANTS, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, Switch, TOOLTIP_SHORT_SIZES, TOOLTIP_SHORT_VARIANTS, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tooltip, TooltipArrow, TooltipContent, TooltipDescription, TooltipFooter, TooltipHeader, TooltipTrigger, VERTICAL_MENU_SIZES, VERTICAL_MENU_VARIANTS, VerticalMenu, VerticalMenus };
+/**
+ * 주어진 CSS 변수 이름에 대한 Hex 코드를 반환합니다.
+ *
+ * @param variable - CSS 변수 이름 (예: "--color-neutral-10").
+ * @returns Hex 코드 (예: "#fbfbfbff") 또는 변수가 유효한 색상이 아니거나 찾을 수 없는 경우 null.
+ */
+declare const getColorHex: (variable: string) => string | null;
+
+export { Autocomplete, Calendar, Checkbox, ContextMenu, ContextMenuArrow, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuItemIndicator, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogTrigger, HORIZONTAL_TAB_SIZES, HorizontalTab, HorizontalTabs, InteractiveListItem, InteractiveListItemActions, InteractiveListItemContent, InteractiveListItemIcon, MULTIPLE_SELECT_SIZES, ModeTab, ModeTabs, MultipleSelect, MultipleSelectContent, MultipleSelectTrigger, MultipleSelectValue, RadioGroup, RadioItem, SELECT_TRIGGER_SIZES, SELECT_TRIGGER_VARIANTS, SWITCH_SIZES, SWITCH_VARIANTS, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, Switch, TOOLTIP_SHORT_SIZES, TOOLTIP_SHORT_VARIANTS, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tooltip, TooltipArrow, TooltipContent, TooltipDescription, TooltipFooter, TooltipHeader, TooltipTrigger, VERTICAL_MENU_SIZES, VERTICAL_MENU_VARIANTS, VerticalMenu, VerticalMenus, getColorHex };
 export type { AutocompleteProps, CalendarProps, DataTableConfig, DataTableProps, DatePickerProps, HorizontalTabSize, MultipleSelectSize, RadioGroupOrientation, SelectTriggerSize, SelectTriggerVariant, SwitchSize, SwitchVariant, TableInfo, TooltipShortSize, TooltipShortVariant, VerticalMenuSize, VerticalMenuVariant };

package/dist/color.css

@@ -1 +1 @@
-@theme{--color-pure-black:#000;--color-pure-black-5:rgba(0,0,0,.05);--color-pure-black-15:rgba(0,0,0,.15);--color-pure-black-30:rgba(0,0,0,.3);--color-pure-black-50:rgba(0,0,0,.5);--color-pure-black-75:rgba(0,0,0,.75);--color-pure-white:#fff;--color-pure-white-2:hsla(0,0%,100%,.02);--color-pure-white-5:hsla(0,0%,100%,.05);--color-pure-white-15:hsla(0,0%,100%,.15);--color-pure-white-30:rgba(255,255,25 5,0.3);--color-pure-white-50:hsla(0,0%,100%,.5);--color-pure-white-75:hsla(0,0%,100%,.75);--color-pure-transparent:hsla(0,0%,100%,0);--color-pure-near-transparent:hsla(0,0%,60%,.001);--color-neutral-10:#fbfbfb;--color-neutral-25:#f9f9f9;--color-neutral-50:#f3f3f3;--color-neutral-75:#ededed;--color-neutral-100:#e5e5e5;--color-neutral-150:#d9d9d9;--color-neutral-200:#ccc;--color-neutral-250:#bfbfbf;--color-neutral-300:#b2b2b2;--color-neutral-350:#a6a6a6;--color-neutral-400:#999;--color-neutral-450:#8c8c8c;--color-neutral-500:grey;--color-neutral-550:#6e6e6e;--color-neutral-600:#616161;--color-neutral-650:#545454;--color-neutral-700:#474747;--color-neutral-750:#383838;--color-neutral-800:#2e2e2e;--color-neutral-825:#292929;--color-neutral-850:#212121;--color-neutral-875:#1d1d1d;--color-neutral-900:#1a1a1a;--color-neutral-950:#0d0d0d;--color-telepix-red-100:#fce8eb;--color-telepix-red-200:#f7bbc3;--color-telepix-red-300:#f28d9a;--color-telepix-red-400:#ec5f72;--color-telepix-red-500:#e7344c;--color-telepix-red-600:#cd1831;--color-telepix-red-700:#a01326;--color-telepix-red-800:#720d1b;--color-telepix-red-900:#37060d;--color-red-100:#facccc;--color-red-200:#f59999;--color-red-300:#ef6666;--color-red-400:#ea3333;--color-red-500:#e50000;--color-red-600:#b70000;--color-red-700:#890000;--color-red-800:#5c0000;--color-red-900:#2e0000;--color-orange-100:#ffe6cc;--color-orange-200:#fc9;--color-orange-300:#ffb366;--color-orange-400:#f93;--color-orange-500:#ff8000;--color-orange-600:#c60;--color-orange-700:#994d00;--color-orange-800:#630;--color-orange-900:#331a00;--color-yellow-100:#fff5cc;--color-yellow-200:#ffeb99;--color-yellow-300:#ffe066;--color-yellow-400:#ffd633;--color-yellow-500:#fc0;--color-yellow-600:#cca300;--color-yellow-700:#997a00;--color-yellow-800:#665200;--color-yellow-900:#332900;--color-green-100:#ccebd6;--color-green-200:#99d6ad;--color-green-300:#66c285;--color-green-400:#33ad5c;--color-green-500:#093;--color-green-600:#007a29;--color-green-700:#005c1f;--color-green-800:#003d14;--color-green-900:#001f0a;--color-teal-100:#ccf5f5;--color-teal-200:#99ebeb;--color-teal-300:#66e0e0;--color-teal-400:#33d6d6;--color-teal-500:#0cc;--color-teal-600:#00a3a3;--color-teal-700:#007a7a;--color-teal-800:#005252;--color-teal-900:#002929;--color-cyan-100:#cef;--color-cyan-200:#9df;--color-cyan-300:#6cf;--color-cyan-400:#3bf;--color-cyan-500:#0af;--color-cyan-600:#08c;--color-cyan-700:#069;--color-cyan-800:#046;--color-cyan-900:#023;--color-blue-100:#d6ddff;--color-blue-200:#adbbff;--color-blue-300:#8599ff;--color-blue-400:#5c77ff;--color-blue-500:#35f;--color-blue-600:#2944cc;--color-blue-700:#1f3399;--color-blue-800:#142266;--color-blue-900:#0a1133;--color-purple-100:#e4d6ff;--color-purple-200:#c9adff;--color-purple-300:#ad85ff;--color-purple-400:#925cff;--color-purple-500:#73f;--color-purple-600:#5f29cc;--color-purple-700:#471f99;--color-purple-800:#301466;--color-purple-900:#180a33;--color-violet-100:#f1d6ff;--color-violet-200:#e4adff;--color-violet-300:#d685ff;--color-violet-400:#c95cff;--color-violet-500:#b3f;--color-violet-600:#9629cc;--color-violet-700:#701f99;--color-violet-800:#4b1466;--color-violet-900:#250a33;--color-pink-100:#ffd6dd;--color-pink-200:#ffadbb;--color-pink-300:#ff8599;--color-pink-400:#ff5c77;--color-pink-500:#f35;--color-pink-600:#cc2944;--color-pink-700:#991f33;--color-pink-800:#661422;--color-pink-900:#330a11;--color-magenta-100:#feebfb;--color-magenta-200:#fdc4f2;--color-magenta-300:#fb92e7;--color-magenta-400:#fa65dd;--color-magenta-500:#f939d3;--color-magenta-600:#ed08c0;--color-magenta-700:#940578;--color-magenta-800:#5e034c;--color-magenta-900:#190114;--color-dark-opacity-10:rgba(0,0,0,.01);--color-dark-opacity-20:rgba(0,0,0,.02);--color-dark-opacity-30:rgba(0,0,0,.03);--color-dark-opacity-40:rgba(0,0,0,.04);--color-dark-opacity-50:rgba(0,0,0,.05);--color-dark-opacity-70:rgba(0,0,0,.07);--color-dark-opacity-100:rgba(0,0,0,.1);--color-dark-opacity-150:rgba(0,0,0,.15);--color-dark-opacity-200:rgba(0,0,0,.2);--color-dark-opacity-250:rgba(0,0,0,.25);--color-dark-opacity-300:rgba(0,0,0,.3);--color-dark-opacity-350:rgba(0,0,0,.35);--color-dark-opacity-400:rgba(0,0,0,.4);--color-dark-opacity-450:rgba(0,0,0,.46);--color-dark-opacity-500:rgba(0,0,0,.51);--color-dark-opacity-550:rgba(0,0,0,.58);--color-dark-opacity-600:rgba(0,0,0,.63);--color-dark-opacity-650:rgba(0,0,0,.68);--color-dark-opacity-700:rgba(0,0,0,.73);--color-dark-opacity-750:rgba(0,0,0,.8);--color-dark-opacity-800:rgba(0,0,0,.84);--color-dark-opacity-850:rgba(0,0,0,.89);--color-dark-opacity-900:rgba(0,0,0,.92);--color-light-opacity-10:hsla(0,0%,100%,.01);--color-light-opacity-20:hsla(0,0%,100%,.02);--color-light-opacity-30:hsla(0,0%,100%,.03);--color-light-opacity-40:hsla(0,0%,100%,.04);--color-light-opacity-50:hsla(0,0%,100%,.05);--color-light-opacity-70:hsla(0,0%,100%,.07);--color-light-opacity-100:hsla(0,0%,100%,.09);--color-light-opacity-150:hsla(0,0%,100%,.14);--color-light-opacity-200:hsla(0,0%,100%,.18);--color-light-opacity-250:hsla(0,0%,100%,.24);--color-light-opacity-300:hsla(0,0%,100%,.3);--color-light-opacity-350:hsla(0,0%,100%,.35);--color-light-opacity-400:hsla(0,0%,100%,.4);--color-light-opacity-450:hsla(0,0%,100%,.48);--color-light-opacity-500:hsla(0,0%,100%,.53);--color-light-opacity-550:hsla(0,0%,100%,.58);--color-light-opacity-600:hsla(0,0%,100%,.63);--color-light-opacity-650:hsla(0,0%,100%,.68);--color-light-opacity-700:hsla(0,0%,100%,.73);--color-light-opacity-750:hsla(0,0%,100%,.79);--color-light-opacity-800:hsla(0,0%,100%,.84);--color-light-opacity-850:hsla(0,0%,100%,.89);--color-light-opacity-900:hsla(0,0%,100%,.94);--text-xsmall:0.625rem;--text-label:0.75rem;--text-body:0.875rem;--text-base:1rem;--text-large:1.125rem;--text-xl:1.25rem;--text-xxl:1.5rem;--text-xxxl:1.875rem;--text-xxxxl:2.25rem;--text-size-inherit:inherit;--font-weight-thin:100;--font-weight-extralight:200;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-weight-black:900;--font-weight-inherit:inherit;--spacing-xsmall:0.875rem;--spacing-label:1.3125rem;--spacing-label-compact:0.75rem;--spacing-body:1.5rem;--spacing-body-compact:0.875rem;--spacing-base:1.75rem;--spacing-base-compact:1rem;--spacing-large:2rem;--spacing-large-compact:1.125rem;--spacing-xl:2.25rem;--spacing-xl-compact:1.25rem;--spacing-xxl:2.625rem;--spacing-xxl-compact:1.5rem;--spacing-xxxl:3.25rem;--spacing-inherit:inherit;--shadow-small:0 1px 1px 0 rgba(0,0,0,.2);--shadow-basic:0 1px 1px 0 rgba(0,0,0,.3),0 1px 3px 1px rgba(0,0,0,.1);--shadow-medium:0 1px 2px 0 rgba(0,0,0,.4),0 3px 4px 2px rgba(0,0,0,.15);--shadow-large:0 1px 4px -1px rgba(0,0,0,.6),0 6px 8px 2px rgba(0,0,0,.2);--shadow-xlarge:0px 20px 25px -5px rgba(0,0,0,.1),0px 8px 10px -6px rgba(0,0,0,.1);--shadow-xxlarge:0px 25px 50px -12px rgba(0,0,0,.25);--shadow-inner:0px 2px 4px 0px rgba(0,0,0,.3) inset;--shadow-none:0px 0px 0px 0px transparent;--shadow-glass-basic:0 1px 1px 0 rgba(0,0,0,.3),0 1px 3px 0 rgba(0,0,0,.1);--shadow-glass-medium:0 1px 2px -1px rgba(0,0,0,.5),0 2px 4px 1px rgba(0,0,0,.25);--blur-glass:blur(8px);@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes content-fade-in{0%{opacity:0;transform:translate(-50%,-53%)}to{opacity:1;transform:translate(-50%,-50%)}}--animate-fade-in:fade-in 150ms ease-in-out forwards;--animate-content-fade-in:content-fade-in 150ms ease-in-out forwards}
+@theme{--color-pure-black:#000;--color-pure-black-5:rgba(0,0,0,.05);--color-pure-black-15:rgba(0,0,0,.15);--color-pure-black-30:rgba(0,0,0,.3);--color-pure-black-50:rgba(0,0,0,.5);--color-pure-black-75:rgba(0,0,0,.75);--color-pure-white:#fff;--color-pure-white-2:hsla(0,0%,100%,.02);--color-pure-white-5:hsla(0,0%,100%,.05);--color-pure-white-15:hsla(0,0%,100%,.15);--color-pure-white-30:rgba(255,255,25 5,0.3);--color-pure-white-50:hsla(0,0%,100%,.5);--color-pure-white-75:hsla(0,0%,100%,.75);--color-pure-transparent:hsla(0,0%,100%,0);--color-pure-near-transparent:hsla(0,0%,60%,.001);--color-neutral-10:#fbfbfb;--color-neutral-25:#f9f9f9;--color-neutral-50:#f3f3f3;--color-neutral-75:#ededed;--color-neutral-100:#e5e5e5;--color-neutral-150:#d9d9d9;--color-neutral-200:#ccc;--color-neutral-250:#bfbfbf;--color-neutral-300:#b2b2b2;--color-neutral-350:#a6a6a6;--color-neutral-400:#999;--color-neutral-450:#8c8c8c;--color-neutral-500:grey;--color-neutral-550:#6e6e6e;--color-neutral-600:#616161;--color-neutral-650:#545454;--color-neutral-700:#474747;--color-neutral-750:#383838;--color-neutral-800:#2e2e2e;--color-neutral-825:#292929;--color-neutral-850:#212121;--color-neutral-875:#1d1d1d;--color-neutral-900:#1a1a1a;--color-neutral-950:#0d0d0d;--color-telepix-red-100:#fce8eb;--color-telepix-red-200:#f7bbc3;--color-telepix-red-300:#f28d9a;--color-telepix-red-400:#ec5f72;--color-telepix-red-500:#e7344c;--color-telepix-red-600:#cd1831;--color-telepix-red-700:#a01326;--color-telepix-red-800:#720d1b;--color-telepix-red-900:#37060d;--color-red-100:#facccc;--color-red-200:#f59999;--color-red-300:#ef6666;--color-red-400:#ea3333;--color-red-500:#e50000;--color-red-600:#b70000;--color-red-700:#890000;--color-red-800:#5c0000;--color-red-900:#2e0000;--color-orange-100:#ffe6cc;--color-orange-200:#fc9;--color-orange-300:#ffb366;--color-orange-400:#f93;--color-orange-500:#ff8000;--color-orange-600:#c60;--color-orange-700:#994d00;--color-orange-800:#630;--color-orange-900:#331a00;--color-yellow-100:#fff5cc;--color-yellow-200:#ffeb99;--color-yellow-300:#ffe066;--color-yellow-400:#ffd633;--color-yellow-500:#fc0;--color-yellow-600:#cca300;--color-yellow-700:#997a00;--color-yellow-800:#665200;--color-yellow-900:#332900;--color-green-100:#ccebd6;--color-green-200:#99d6ad;--color-green-300:#66c285;--color-green-400:#33ad5c;--color-green-500:#093;--color-green-600:#007a29;--color-green-700:#005c1f;--color-green-800:#003d14;--color-green-900:#001f0a;--color-teal-100:#ccf5f5;--color-teal-200:#99ebeb;--color-teal-300:#66e0e0;--color-teal-400:#33d6d6;--color-teal-500:#0cc;--color-teal-600:#00a3a3;--color-teal-700:#007a7a;--color-teal-800:#005252;--color-teal-900:#002929;--color-cyan-100:#cef;--color-cyan-200:#9df;--color-cyan-300:#6cf;--color-cyan-400:#3bf;--color-cyan-500:#0af;--color-cyan-600:#08c;--color-cyan-700:#069;--color-cyan-800:#046;--color-cyan-900:#023;--color-blue-100:#d6ddff;--color-blue-200:#adbbff;--color-blue-300:#8599ff;--color-blue-400:#5c77ff;--color-blue-500:#35f;--color-blue-600:#2944cc;--color-blue-700:#1f3399;--color-blue-800:#142266;--color-blue-900:#0a1133;--color-purple-100:#e4d6ff;--color-purple-200:#c9adff;--color-purple-300:#ad85ff;--color-purple-400:#925cff;--color-purple-500:#73f;--color-purple-600:#5f29cc;--color-purple-700:#471f99;--color-purple-800:#301466;--color-purple-900:#180a33;--color-violet-100:#f1d6ff;--color-violet-200:#e4adff;--color-violet-300:#d685ff;--color-violet-400:#c95cff;--color-violet-500:#b3f;--color-violet-600:#9629cc;--color-violet-700:#701f99;--color-violet-800:#4b1466;--color-violet-900:#250a33;--color-pink-100:#ffd6dd;--color-pink-200:#ffadbb;--color-pink-300:#ff8599;--color-pink-400:#ff5c77;--color-pink-500:#f35;--color-pink-600:#cc2944;--color-pink-700:#991f33;--color-pink-800:#661422;--color-pink-900:#330a11;--color-magenta-100:#feebfb;--color-magenta-200:#fdc4f2;--color-magenta-300:#fb92e7;--color-magenta-400:#fa65dd;--color-magenta-500:#f939d3;--color-magenta-600:#ed08c0;--color-magenta-700:#940578;--color-magenta-800:#5e034c;--color-magenta-900:#190114;--color-dark-opacity-10:rgba(0,0,0,.01);--color-dark-opacity-20:rgba(0,0,0,.02);--color-dark-opacity-30:rgba(0,0,0,.03);--color-dark-opacity-40:rgba(0,0,0,.04);--color-dark-opacity-50:rgba(0,0,0,.05);--color-dark-opacity-70:rgba(0,0,0,.07);--color-dark-opacity-100:rgba(0,0,0,.1);--color-dark-opacity-150:rgba(0,0,0,.15);--color-dark-opacity-200:rgba(0,0,0,.2);--color-dark-opacity-250:rgba(0,0,0,.25);--color-dark-opacity-300:rgba(0,0,0,.3);--color-dark-opacity-350:rgba(0,0,0,.35);--color-dark-opacity-400:rgba(0,0,0,.4);--color-dark-opacity-450:rgba(0,0,0,.46);--color-dark-opacity-500:rgba(0,0,0,.51);--color-dark-opacity-550:rgba(0,0,0,.58);--color-dark-opacity-600:rgba(0,0,0,.63);--color-dark-opacity-650:rgba(0,0,0,.68);--color-dark-opacity-700:rgba(0,0,0,.73);--color-dark-opacity-750:rgba(0,0,0,.8);--color-dark-opacity-800:rgba(0,0,0,.84);--color-dark-opacity-850:rgba(0,0,0,.89);--color-dark-opacity-900:rgba(0,0,0,.92);--color-light-opacity-10:hsla(0,0%,100%,.01);--color-light-opacity-20:hsla(0,0%,100%,.02);--color-light-opacity-30:hsla(0,0%,100%,.03);--color-light-opacity-40:hsla(0,0%,100%,.04);--color-light-opacity-50:hsla(0,0%,100%,.05);--color-light-opacity-70:hsla(0,0%,100%,.07);--color-light-opacity-100:hsla(0,0%,100%,.09);--color-light-opacity-150:hsla(0,0%,100%,.14);--color-light-opacity-200:hsla(0,0%,100%,.18);--color-light-opacity-250:hsla(0,0%,100%,.24);--color-light-opacity-300:hsla(0,0%,100%,.3);--color-light-opacity-350:hsla(0,0%,100%,.35);--color-light-opacity-400:hsla(0,0%,100%,.4);--color-light-opacity-450:hsla(0,0%,100%,.48);--color-light-opacity-500:hsla(0,0%,100%,.53);--color-light-opacity-550:hsla(0,0%,100%,.58);--color-light-opacity-600:hsla(0,0%,100%,.63);--color-light-opacity-650:hsla(0,0%,100%,.68);--color-light-opacity-700:hsla(0,0%,100%,.73);--color-light-opacity-750:hsla(0,0%,100%,.79);--color-light-opacity-800:hsla(0,0%,100%,.84);--color-light-opacity-850:hsla(0,0%,100%,.89);--color-light-opacity-900:hsla(0,0%,100%,.94);--text-xsmall:0.625rem;--text-label:0.75rem;--text-body:0.875rem;--text-base:1rem;--text-large:1.125rem;--text-xl:1.25rem;--text-xxl:1.5rem;--text-xxxl:1.875rem;--text-xxxxl:2.25rem;--text-size-inherit:inherit;--font-weight-thin:100;--font-weight-extralight:200;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-weight-black:900;--font-weight-inherit:inherit;--spacing-xsmall:0.875rem;--spacing-label:1.3125rem;--spacing-label-compact:0.75rem;--spacing-body:1.5rem;--spacing-body-compact:0.875rem;--spacing-base:1.75rem;--spacing-base-compact:1rem;--spacing-large:2rem;--spacing-large-compact:1.125rem;--spacing-xl:2.25rem;--spacing-xl-compact:1.25rem;--spacing-xxl:2.625rem;--spacing-xxl-compact:1.5rem;--spacing-xxxl:3.25rem;--spacing-inherit:inherit;--shadow-small:0 1px 1px 0 rgba(0,0,0,.2);--shadow-basic:0 1px 1px 0 rgba(0,0,0,.3),0 1px 3px 1px rgba(0,0,0,.1);--shadow-medium:0 1px 2px 0 rgba(0,0,0,.4),0 3px 4px 2px rgba(0,0,0,.15);--shadow-large:0 1px 4px -1px rgba(0,0,0,.6),0 6px 8px 2px rgba(0,0,0,.2);--shadow-xlarge:0px 20px 25px -5px rgba(0,0,0,.1),0px 8px 10px -6px rgba(0,0,0,.1);--shadow-xxlarge:0px 25px 50px -12px rgba(0,0,0,.25);--shadow-inner:0px 2px 4px 0px rgba(0,0,0,.3) inset;--shadow-none:0px 0px 0px 0px transparent;--shadow-glass-basic:0 1px 1px 0 rgba(0,0,0,.3),0 1px 3px 0 rgba(0,0,0,.1);--shadow-glass-medium:0 1px 2px -1px rgba(0,0,0,.5),0 2px 4px 1px rgba(0,0,0,.25);--blur-glass:blur(8px)}

package/dist/esm/client.d.ts

@@ -32,3 +32,4 @@ export type { AutocompleteProps } from "./autocomplete";
 export { Switch } from "./switch";
 export { SWITCH_SIZES, SWITCH_VARIANTS } from "./switch/types";
 export type { SwitchSize, SwitchVariant } from "./switch/types";
+export { getColorHex } from "./lib/color-utils";

package/dist/esm/client.js

@@ -13048,7 +13048,7 @@ const MultipleSelect = forwardRef(({ open, onOpenChange, disabled, value, onValu
 });
 const MultipleSelectTrigger = forwardRef(({ size = "regular", children, ...rest }, ref) => {
     const { className, onClick, ...otherProps } = rest;
-    const { disabled, values, isOpen, setIsOpen } = useContext(MultipleSelectContext);
+    const { disabled, isOpen, setIsOpen } = useContext(MultipleSelectContext);
     const handleTriggerClick = (e) => {
         e.stopPropagation();
         if (disabled)
@@ -13696,4 +13696,65 @@ const Switch = (props) => {
     return (jsxs(Fragment, { children: [props.variant === SWITCH_VARIANTS.FILLED && (jsx(FilledSwitch, { checked: defaultChecked ? checked : isChecked, onCheckedChange: handleCheckedChange, ...props })), props.variant === SWITCH_VARIANTS.OUTLINED && (jsx(OutlinedSwitch, { checked: defaultChecked ? checked : isChecked, onCheckedChange: handleCheckedChange, ...props })), props.variant === SWITCH_VARIANTS.SLIDE && (jsx(SlideSwitch, { checked: defaultChecked ? checked : isChecked, onCheckedChange: handleCheckedChange, ...props }))] }));
 };
 
-export { Autocomplete, Calendar, Checkbox, ContextMenu, ContextMenuArrow, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuItemIndicator, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogTrigger, HORIZONTAL_TAB_SIZES, HorizontalTab, HorizontalTabs, InteractiveListItem, InteractiveListItemActions, InteractiveListItemContent, InteractiveListItemIcon, MULTIPLE_SELECT_SIZES, ModeTab, ModeTabs, MultipleSelect, MultipleSelectContent, MultipleSelectTrigger, MultipleSelectValue, RadioGroup, RadioItem, SELECT_TRIGGER_SIZES, SELECT_TRIGGER_VARIANTS, SWITCH_SIZES, SWITCH_VARIANTS, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, Switch, TOOLTIP_SHORT_SIZES, TOOLTIP_SHORT_VARIANTS, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tooltip, TooltipArrow, TooltipContent, TooltipDescription, TooltipFooter, TooltipHeader, TooltipTrigger, VERTICAL_MENU_SIZES, VERTICAL_MENU_VARIANTS, VerticalMenu, VerticalMenus };
+/**
+ * RGB 또는 RGBA 문자열을 Hex 문자열로 변환합니다.
+ * @param rgb - RGB/RGBA 문자열 (예: "rgb(255, 0, 0)" 또는 "rgba(255, 0, 0, 0.5)")
+ * @returns Hex 문자열 (예: "#ff0000" 또는 "#ff000080") 또는 유효하지 않은 경우 null.
+ */
+const rgbaToHex = (rgb) => {
+    const match = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([^)]+))?\)$/);
+    if (!match)
+        return null;
+    const r = parseInt(match[1], 10);
+    const g = parseInt(match[2], 10);
+    const b = parseInt(match[3], 10);
+    const a = match[4] !== undefined ? parseFloat(match[4]) : 1;
+    const clamp = (val) => Math.round(Math.max(0, Math.min(255, val)));
+    const toHex = (n) => clamp(n).toString(16).padStart(2, "0");
+    const getHexAlpha = (alpha) => {
+        if (alpha === undefined || alpha === 1)
+            return "";
+        const alphaVal = Math.round(Math.max(0, Math.min(1, alpha)) * 255);
+        return alphaVal.toString(16).padStart(2, "0");
+    };
+    const hexA = getHexAlpha(a);
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}${hexA}`;
+};
+/**
+ * 주어진 CSS 변수 이름에 대한 Hex 코드를 반환합니다.
+ *
+ * @param variable - CSS 변수 이름 (예: "--color-neutral-10").
+ * @returns Hex 코드 (예: "#fbfbfbff") 또는 변수가 유효한 색상이 아니거나 찾을 수 없는 경우 null.
+ */
+const getColorHex = (variable) => {
+    if (typeof document === "undefined") {
+        return null;
+    }
+    const varQuery = variable.startsWith("--") ? variable : `--${variable}`;
+    // 값을 해결하기 위한 헬퍼 함수
+    const resolveValue = (val) => {
+        if (!val)
+            return null;
+        if (val.startsWith("#"))
+            return val;
+        if (val.startsWith("rgb"))
+            return rgbaToHex(val);
+        if (val.startsWith("var(")) {
+            const match = val.match(/var\(([^)]+)\)/);
+            if (match && match[1]) {
+                return getColorHex(match[1]);
+            }
+        }
+        return null;
+    };
+    const style = getComputedStyle(document.documentElement);
+    const computedValue = style.getPropertyValue(varQuery).trim();
+    if (computedValue) {
+        const resolved = resolveValue(computedValue);
+        if (resolved)
+            return resolved;
+    }
+    return null;
+};
+
+export { Autocomplete, Calendar, Checkbox, ContextMenu, ContextMenuArrow, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuItemIndicator, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogTrigger, HORIZONTAL_TAB_SIZES, HorizontalTab, HorizontalTabs, InteractiveListItem, InteractiveListItemActions, InteractiveListItemContent, InteractiveListItemIcon, MULTIPLE_SELECT_SIZES, ModeTab, ModeTabs, MultipleSelect, MultipleSelectContent, MultipleSelectTrigger, MultipleSelectValue, RadioGroup, RadioItem, SELECT_TRIGGER_SIZES, SELECT_TRIGGER_VARIANTS, SWITCH_SIZES, SWITCH_VARIANTS, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, Switch, TOOLTIP_SHORT_SIZES, TOOLTIP_SHORT_VARIANTS, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tooltip, TooltipArrow, TooltipContent, TooltipDescription, TooltipFooter, TooltipHeader, TooltipTrigger, VERTICAL_MENU_SIZES, VERTICAL_MENU_VARIANTS, VerticalMenu, VerticalMenus, getColorHex };

package/dist/esm/icons/Icon.d.ts

@@ -0,0 +1,2 @@
+import type { IconProps } from "./icon-types";
+export declare const Icon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;