@telepix-lab/telepix-ui 0.7.0 → 0.7.2

package/dist/cjs/input/hooks/useFocusVisibleMode.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 전역 포커스 가시성 제어 훅
+ *
+ * - 마우스 클릭 시: body.using-mouse 추가 → outline 제거
+ * - Tab 키로 이동 시: using-mouse 제거 → outline 정상 표시
+ *
+ * Telepix-UI의 focus-visible outline 정책을 보완하기 위해 사용.
+ */
+export declare function useFocusVisibleMode(): void;

package/dist/cjs/interactive-list-item/index.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 interface InteractiveListItemProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-    isSelected?: boolean;
     disabled?: boolean;
+    isSelected?: boolean;
     showHoverActions?: boolean;
 }
 export declare const InteractiveListItem: React.ForwardRefExoticComponent<Omit<InteractiveListItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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/notify-item/index.d.ts

@@ -7,6 +7,7 @@ interface NotifyItemProps extends React.HTMLAttributes<HTMLDivElement> {
     variant?: "ghost" | "dynamicAccent";
     unread?: boolean;
     disabled?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
 }
 export declare const NotifyItem: import("react").ForwardRefExoticComponent<NotifyItemProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

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/radio-group/index.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
 import { RadioGroup as RadioGroupRadix } from "radix-ui";
+import { ReactNode } from "react";
 import { RadioGroupOrientation } from "./types";
 interface RadioGroupProps extends RadioGroupRadix.RadioGroupProps {
     className?: string;

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

@@ -1,5 +1,5 @@
-import React from "react";
 import { Select as SelectRadix } from "radix-ui";
+import React from "react";
 import { SelectTriggerSize, SelectTriggerVariant } from "./types";
 /**
  * Select 컴포넌트는 드롭다운 선택 상자를 생성하는 데 사용됩니다.<br/>
@@ -14,9 +14,9 @@ import { SelectTriggerSize, SelectTriggerVariant } from "./types";
  * <Select>
  *   <SelectTrigger placeholder="Select an option" />
  *   <SelectContent>
- *     <SelectItem value="option1">Option 1</SelectItem>
- *     <SelectItem value="option2">Option 2</SelectItem>
- *     <SelectItem value="option3">Option 3</SelectItem>
+ *     <SelectItem value="option1" textValue="Option 1"></SelectItem>
+ *     <SelectItem value="option2" textValue="Option 2"></SelectItem>
+ *     <SelectItem value="option3" textValue="Option 3"></SelectItem>
  *   </SelectContent>
  * </Select>
  */

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

@@ -3,7 +3,7 @@ export declare const Table: React.ForwardRefExoticComponent<Omit<React.DetailedH
 export declare const TableHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & React.RefAttributes<HTMLTableRowElement>>;
 export declare const TableBody: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & React.RefAttributes<HTMLTableSectionElement>>;
 interface TableRowProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement> {
-    isSelected?: boolean;
+    isFocused?: boolean;
     shouldLastBorderRender?: boolean;
 }
 export declare const TableRow: React.ForwardRefExoticComponent<Omit<TableRowProps, "ref"> & React.RefAttributes<HTMLTableRowElement>>;

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

@@ -132,9 +132,9 @@ type SelectTriggerSize = (typeof SELECT_TRIGGER_SIZES)[keyof typeof SELECT_TRIGG
  * <Select>
  *   <SelectTrigger placeholder="Select an option" />
  *   <SelectContent>
- *     <SelectItem value="option1">Option 1</SelectItem>
- *     <SelectItem value="option2">Option 2</SelectItem>
- *     <SelectItem value="option3">Option 3</SelectItem>
+ *     <SelectItem value="option1" textValue="Option 1"></SelectItem>
+ *     <SelectItem value="option2" textValue="Option 2"></SelectItem>
+ *     <SelectItem value="option3" textValue="Option 3"></SelectItem>
  *   </SelectContent>
  * </Select>
  */
@@ -304,7 +304,7 @@ declare const Table: React__default.ForwardRefExoticComponent<Omit<React__defaul
 declare const TableHeader: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.TableHTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & React__default.RefAttributes<HTMLTableRowElement>>;
 declare const TableBody: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.TableHTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & React__default.RefAttributes<HTMLTableSectionElement>>;
 interface TableRowProps extends React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement> {
-    isSelected?: boolean;
+    isFocused?: boolean;
     shouldLastBorderRender?: boolean;
 }
 declare const TableRow: React__default.ForwardRefExoticComponent<Omit<TableRowProps, "ref"> & React__default.RefAttributes<HTMLTableRowElement>>;
@@ -352,8 +352,8 @@ interface DataTableProps<T> {
 declare const DataTable: <T extends object>({ config, data, emptyMessage, onRowClick, enableSelection, shouldLastBorderRender, classNames, refs, }: DataTableProps<T>) => react_jsx_runtime.JSX.Element;
 
 interface InteractiveListItemProps extends React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-    isSelected?: boolean;
     disabled?: boolean;
+    isSelected?: boolean;
     showHoverActions?: boolean;
 }
 declare const InteractiveListItem: React__default.ForwardRefExoticComponent<Omit<InteractiveListItemProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
@@ -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/button/index.d.ts

@@ -27,12 +27,12 @@ export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "
 /**
  * Text Dim 스타일의 버튼 컴포넌트입니다.<br/>
  * 텍스트 중심의 보조 액션(secondary / subtle action)에 적합한 low-emphasis 스타일을 제공합니다.<br/>
- * 기본적으로 낮은 명도의 텍스트를 사용하며, hover 시 명도가 상승하고 selected 시 accent 색상으로 강조됩니다.<br/>
+ * 기본적으로 낮은 명도의 텍스트를 사용하며, hover 시 명도가 상승하고 focused 시 accent 색상으로 강조됩니다.<br/>
  * <br/>
  * ### 사용 예시
  * ```tsx
  * <ButtonTextDim>자세히 보기</ButtonTextDim>
- * <ButtonTextDim aria-selected="true">선택됨</ButtonTextDim>
+ * <ButtonTextDim data-focused="true">포커스됨</ButtonTextDim>
  * ```
  */
 export declare const ButtonTextDim: React.ForwardRefExoticComponent<Omit<Omit<ButtonProps, "variant">, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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";