@telepix-lab/telepix-ui 0.5.1 → 0.6.2

package/dist/cjs/index.js

@@ -11,10 +11,14 @@ const BUTTON_SIZES = {
 const BUTTON_VARIANTS = {
     ACCENT: "accent",
     OUTLINE: "outline",
+    OUTLINE_TO_ACCENT: "outline_to_accent",
     GHOST: "ghost",
     THUMBNAIL_GHOST: "thumbnail_ghost",
+    GHOST_TO_ACCENT: "ghost_to_accent",
     SUBTLE_FILLED: "subtle_filled",
-    ACCENT_GHOST: "accent_ghost",
+    OUTLINE_ACCENT: "outline_accent",
+    GHOST_ACCENT: "ghost_accent",
+    GHOST_DIM: "ghost_dim",
 };
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
@@ -3316,6 +3320,39 @@ function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
 
+const StateColorContainer = ({ groupName = "state", isInverted, className, }) => {
+    const fillClassMap = {
+        wrapper: {
+            normal: "group-hover/wrapper:bg-fill-hovered bg-fill-default group-active/wrapper:bg-fill-pressed group-aria-selected/wrapper:bg-fill-selected",
+            invert: "group-hover/wrapper:bg-fill-invert-hovered group-active/wrapper:bg-fill-invert-pressed bg-fill-invert-default group-aria-selected/wrapper:bg-fill-invert-selected",
+        },
+        item: {
+            normal: "group-hover/item:bg-fill-hovered bg-fill-default group-active/item:bg-fill-pressed group-aria-selected/item:bg-fill-selected",
+            invert: "group-hover/item:bg-fill-invert-hovered group-active/item:bg-fill-invert-pressed bg-fill-invert-default group-aria-selected/item:bg-fill-invert-selected",
+        },
+        option: {
+            normal: "group-hover/option:bg-fill-hovered bg-fill-default group-active/option:bg-fill-pressed group-aria-selected/option:bg-fill-selected",
+            invert: "group-hover/option:bg-fill-invert-hovered group-active/option:bg-fill-invert-pressed bg-fill-invert-default group-aria-selected/option:bg-fill-invert-selected",
+        },
+        tab: {
+            normal: "group-hover/tab:bg-fill-hovered bg-fill-default group-active/tab:bg-fill-pressed group-aria-selected/tab:bg-fill-selected",
+            invert: "group-hover/tab:bg-fill-invert-hovered group-active/tab:bg-fill-invert-pressed bg-fill-invert-default group-aria-selected/tab:bg-fill-invert-selected",
+        },
+        chip: {
+            normal: "group-hover/chip:bg-fill-hovered bg-fill-default group-active/chip:bg-fill-pressed group-aria-selected/chip:bg-fill-selected",
+            invert: "group-hover/chip:bg-fill-invert-hovered group-active/chip:bg-fill-invert-pressed bg-fill-invert-default group-aria-selected/chip:bg-fill-invert-selected",
+        },
+        state: {
+            normal: "group-hover/state:bg-fill-hovered bg-fill-default group-active/state:bg-fill-pressed group-aria-selected/state:bg-fill-selected",
+            invert: "group-hover/state:bg-fill-invert-hovered group-active/state:bg-fill-invert-pressed bg-fill-invert-default group-aria-selected/state:bg-fill-invert-selected",
+        },
+    };
+    const group = groupName || "state";
+    const mode = isInverted ? "invert" : "normal";
+    const actionClass = fillClassMap[group]?.[mode] ?? fillClassMap.state[mode];
+    return (jsxRuntime.jsx("div", { className: cn("absolute left-0 top-0 right-0 bottom-0 inset-0 pointer-events-none z-0", actionClass, className) }));
+};
+
 /**
  * 다양한 스타일과 속성을 지원하는 버튼 컴포넌트입니다.<br/>
  * 사용자는 버튼의 변형(variant), 크기(size), 전체 너비(fullWidth), 로딩 상태(isLoading), 아이콘(leftIcon, rightIcon) 등을 지정할 수 있습니다.<br/>
@@ -3330,7 +3367,7 @@ function cn(...inputs) {
  * </Button>
  * ```
  */
-const Button = react.forwardRef(({ variant = "accent", size = "regular", fullWidth = false, isLoading = false, leftIcon, rightIcon, children, disabled, className, ...rest }, ref) => {
+const Button = react.forwardRef(({ variant = "accent", size = "regular", fullWidth = false, isLoading = false, leftIcon, rightIcon, children, disabled, className, stateContainerClassName, ...rest }, ref) => {
     const getClassName = (size, variant) => {
         const sizeClassName = {
             small: "h-7 py-0 px-1.5 text-label leading-label-compact",
@@ -3343,12 +3380,16 @@ const Button = react.forwardRef(({ variant = "accent", size = "regular", fullWid
             large: "px-1.5",
         }[size];
         const variantClassName = {
-            accent: "bg-fill-accent-default hover:bg-fill-accent-hovered active:bg-fill-accent-pressed disabled:bg-fill-disabled text-comp-accent-default disabled:text-comp-disabled",
-            outline: "bg-fill-mono-default hover:bg-fill-mono-hovered active:bg-fill-mono-pressed disabled:bg-fill-disabled text-comp-mono-default disabled:text-comp-disabled border border-border-bound disabled:border-pure-transparent",
-            ghost: "bg-fill-mono-default hover:bg-fill-mono-hovered active:bg-fill-mono-pressed disabled:bg-fill-disabled text-comp-mono-default disabled:text-comp-disabled",
-            thumbnail_ghost: "bg-transparent hover:bg-fill-mono-hovered active:bg-fill-mono-pressed disabled:bg-fill-disabled text-comp-mono-default disabled:text-comp-disabled",
-            subtle_filled: "bg-fill-mono-subtle-default hover:bg-fill-mono-subtle-hovered active:bg-fill-mono-subtle-pressed disabled:bg-fill-disabled text-comp-mono-subtle-default disabled:text-comp-disabled",
-            accent_ghost: "bg-fill-mono-default hover:bg-fill-accent-hovered active:bg-fill-accent-pressed disabled:bg-fill-disabled text-comp-accent-default disabled:text-comp-disabled",
+            accent: "bg-page-accent-l0 disabled:bg-pure-transparent text-comp-accent-default disabled:text-comp-disabled",
+            outline: "bg-page-l-null disabled:bg-page-l-null text-comp-mono-default disabled:text-comp-disabled border border-border-bound disabled:border-pure-transparent aria-selected:border-border-selected",
+            outline_to_accent: "bg-page-l-null disabled:bg-page-l-null text-comp-mono-default disabled:text-comp-disabled border border-border-bound disabled:border-pure-transparent aria-selected:border-border-selected aria-selected:bg-page-accent-l0 aria-selected:text-comp-accent-default",
+            ghost: "bg-page-l-null disabled:bg-page-l-null text-comp-mono-default disabled:text-comp-disabled",
+            thumbnail_ghost: "bg-page-l-null disabled:bg-fill-disabled text-comp-mono-default disabled:text-comp-disabled",
+            ghost_to_accent: "bg-page-l-null disabled:bg-page-l-null text-comp-mono-default disabled:text-comp-disabled aria-selected:bg-page-accent-l0 aria-selected:text-comp-accent-default",
+            subtle_filled: "bg-page-l3 disabled:bg-fill-disabled text-comp-mono-subtle-default disabled:text-comp-disabled aria-selected:text-comp-mono-default",
+            outline_accent: "bg-page-l-null disabled:bg-page-l-null text-comp-accent-default disabled:text-comp-disabled border border-border-accent-bound disabled:border-pure-transparent aria-selected:border-border-accent-selected",
+            ghost_accent: "bg-page-l-null disabled:bg-page-l-null text-comp-accent-default disabled:text-comp-disabled",
+            ghost_dim: "bg-page-l-null disabled:bg-page-l-null text-comp-mono-subtle-default disabled:text-comp-disabled aria-selected:text-comp-mono-default",
         }[variant];
         return [
             sizeClassName,
@@ -3377,7 +3418,7 @@ const Button = react.forwardRef(({ variant = "accent", size = "regular", fullWid
             return "px-1.5";
         return "px-2"; // 기본값은 regular 크기
     };
-    return (jsxRuntime.jsxs("button", { ref: ref, disabled: disabled ?? isLoading, className: cn("flex items-center justify-center relative box-border m-0 border-transparent outline-none cursor-pointer select-none align-middle appearance-none text-center transition-normal font-medium w-auto rounded-md overflow-hidden pointer-events-auto disabled:pointer-events-none disabled:cursor-not-allowed", ...getClassName(size, variant), fullWidth && "w-full", !children && (leftIcon || rightIcon) && getPaddingOnlyIcon(size), className), ...rest, children: [isLoading && (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: cn("lucide lucide-loader-circle-icon lucide-loader-circle absolute animate-spin", size === BUTTON_SIZES.SMALL &&
+    return (jsxRuntime.jsxs("button", { ref: ref, disabled: disabled ?? isLoading, className: cn("flex group/state items-center justify-center relative box-border m-0 border-transparent outline-none cursor-pointer select-none align-middle appearance-none text-center transition-normal font-medium w-auto rounded-md overflow-hidden pointer-events-auto disabled:pointer-events-none disabled:cursor-not-allowed", ...getClassName(size, variant), fullWidth && "w-full", !children && (leftIcon || rightIcon) && getPaddingOnlyIcon(size), className), ...rest, children: [jsxRuntime.jsx(StateColorContainer, { isInverted: variant === BUTTON_VARIANTS.ACCENT, className: stateContainerClassName }), isLoading && (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: cn("lucide lucide-loader-circle-icon lucide-loader-circle absolute animate-spin", size === BUTTON_SIZES.SMALL &&
                     "size-4 top-[calc(50%-8px)] left-[calc(50%-8px)]", size === BUTTON_SIZES.REGULAR &&
                     "size-5 top-[calc(50%-10px)] left-[calc(50%-10px)]", size === BUTTON_SIZES.LARGE &&
                     "size-6 top-[calc(50%-12px)] left-[calc(50%-12px)]"), children: jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) })), leftIcon && (jsxRuntime.jsx("div", { className: cn("flex items-center justify-center relative", variant === BUTTON_VARIANTS.THUMBNAIL_GHOST &&
@@ -3630,14 +3671,24 @@ const INPUT_SIZES = {
  * ```
  */
 const Input = react.forwardRef(({ size = "regular", leftIcon, rightIcon, wrapperClassName, isError = false, useHoverStyle = true, errorMessage, ...rest }, ref) => {
-    return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntime.jsxs("div", { "aria-disabled": rest.disabled, className: cn("flex items-center justify-center rounded-lg bg-fill-mono-default focus-within:bg-fill-mono-default border border-border-bound focus-within:border-border-focused has-[input:disabled]:border-transparent", useHoverStyle && "hover:bg-fill-mono-hovered", size === INPUT_SIZES.REGULAR &&
+    const innerRef = react.useRef(null);
+    const mergedRef = (node) => {
+        if (typeof ref === "function")
+            ref(node);
+        else if (ref)
+            ref.current = node;
+        innerRef.current = node;
+    };
+    return (jsxRuntime.jsxs(react.Fragment, { children: [jsxRuntime.jsxs("div", { "aria-disabled": rest.disabled, className: cn("relative group/state flex items-center justify-center rounded-lg bg-Page-l-null border border-border-bound focus-within:border-border-focused has-[input:disabled]:border-transparent", size === INPUT_SIZES.REGULAR &&
                     "py-1.5 px-2 text-body leading-body-compact font-medium gap-2", size === INPUT_SIZES.LARGE &&
                     "py-[11px] px-4 text-base leading-base-compact font-medium gap-3", isError &&
-                    "border-comp-chroma-error focus-within:border-comp-chroma-error", wrapperClassName), children: [leftIcon && (jsxRuntime.jsx("div", { className: cn("flex items-center justify-center text-comp-mono-default", isError && "text-comp-chroma-error"), children: leftIcon })), jsxRuntime.jsx("input", { ref: ref, className: cn("border-none outline-none p-0 flex-1 bg-transparent text-comp-mono-default placeholder:text-comp-mono-subtle-default focus:placeholder:text-comp-mono-subtle-selected disabled:text-comp-disabled disabled:placeholder:text-comp-disabled", useHoverStyle &&
+                    "border-comp-chroma-error focus-within:border-comp-chroma-error", wrapperClassName), onClick: () => {
+                    innerRef.current?.focus();
+                }, children: [jsxRuntime.jsx(StateColorContainer, { className: cn("group-focus-within/state:bg-page-l-null", (!useHoverStyle || rest.disabled) && "hover:bg-fill-default") }), leftIcon && (jsxRuntime.jsx("div", { className: cn("flex items-center justify-center text-comp-mono-default", isError && "text-comp-chroma-error"), children: leftIcon })), jsxRuntime.jsx("input", { ref: mergedRef, className: cn("border-none outline-none p-0 flex-1 bg-transparent text-comp-mono-default placeholder:text-comp-mono-subtle-default focus:placeholder:text-comp-mono-subtle-selected disabled:text-comp-disabled disabled:placeholder:text-comp-disabled", useHoverStyle &&
                             "hover:placeholder:text-comp-mono-subtle-hovered", size === INPUT_SIZES.REGULAR &&
                             "text-body leading-body-compact font-medium", size === INPUT_SIZES.LARGE &&
                             "text-base leading-base-compact font-medium", isError &&
-                            "placeholder:text-comp-chroma-error text-comp-chroma-error hover:placeholder:text-comp-error focus:placeholder:text-comp-error", rest.className), ...rest }), rightIcon && (jsxRuntime.jsx("div", { className: cn("flex items-center justify-center text-comp-mono-default", isError && "text-comp-chroma-error"), children: rightIcon }))] }), errorMessage && (jsxRuntime.jsx(Text, { variant: "medLabelMedCompact", className: "text-comp-chroma-error", children: errorMessage }))] }));
+                            "placeholder:text-comp-chroma-error text-comp-chroma-error hover:placeholder:text-comp-error focus:placeholder:text-comp-error", rest.className), ...rest }), rightIcon && (jsxRuntime.jsx("div", { className: cn("flex items-center justify-center text-comp-mono-default", isError && "text-comp-chroma-error"), children: rightIcon }))] }), errorMessage && (jsxRuntime.jsx(Text, { variant: "medLabelMedCompact", className: "text-comp-chroma-error mt-2", children: errorMessage }))] }));
 });
 Input.displayName = "Input";
 
@@ -3868,22 +3919,13 @@ const Tag = react.forwardRef(({ icon, value, variant = "filled", size = "regular
         event.stopPropagation();
         onDeleteClick?.(value, event);
     };
-    return (jsxRuntime.jsxs("button", { ref: ref, className: cn("flex items-center justify-center rounded-sm bg-transparent", variant === "filled" &&
-            `bg-fill-mono-subtle-default text-comp-mono-subtle-default border border-fill-mono-subtle-default 
-            hover:bg-fill-mono-subtle-hovered hover:comp-mono-subtle-hovered hover:border-fill-mono-subtle-hovered 
-            disabled:bg-fill-disabled disabled:text-comp-disabled disabled:border-fill-disabled`, variant === "filled" &&
-            useSelectedStyle &&
-            "active:fill-mono-subtle-pressed active:comp-mono-subtle-pressed active:border-fill-mono-subtle-pressed", variant === "filled" &&
-            isSelected &&
-            `bg-fill-mono-subtle-selected text-comp-mono-subtle-selected border-border-selected`, variant === "accent" &&
-            `bg-fill-accent-default text-comp-accent-default hover:bg-fill-accent-hovered hover:text-comp-accent-hovered 
-            disabled:bg-fill-disabled disabled:text-comp-disabled`, variant === "accent" &&
-            useSelectedStyle &&
-            "active:bg-fill-accent-pressed active:text-comp-accent-pressed", variant === "accent" &&
-            isSelected &&
-            `bg-fill-accent-selected text-comp-accent-selected`, size === "regular" &&
-            "text-body font-medium leading-body-compact px-1 py-0.5 gap-2", size === "small" &&
-            "text-label font-medium leading-label-compact p-0.5 gap-1.5", className), onClick: handleClick, "data-selected": isSelected, ...props, children: [icon && (jsxRuntime.jsx("span", { className: "flex items-center justify-center size-4 border-none bg-transparent outline-none p-0", children: icon })), jsxRuntime.jsx("span", { className: "flex-1 text-nowrap overflow-hidden text-ellipsis text-inherit text-size-inherit leading-inherit font-inherit", children: value.label }), onDeleteClick && (jsxRuntime.jsx("span", { className: "flex items-center justify-center size-4 border-none bg-transparent outline-none p-0 cursor-pointer", onClick: handleDeleteClick, children: jsxRuntime.jsx(X, {}) }))] }));
+    return (jsxRuntime.jsxs("button", { ref: ref, className: cn("flex items-center justify-center rounded-sm bg-transparent relative group/state", variant === "filled" &&
+            `bg-page-l4 text-comp-mono-subtle-default data-disabled:text-comp-disabled data-disabled:bg-page-l-null`, variant === "accent" &&
+            `bg-page-accent-l0 text-comp-accent-default data-disabled:text-comp-disabled data-disabled:bg-page-l-null`, size === "regular" &&
+            "text-body font-medium leading-body-compact px-2 py-1 gap-2", size === "small" &&
+            "text-label font-medium leading-label-compact px-1.5 py-0.5 gap-1.5", className), onClick: handleClick, "data-selected": isSelected, "aria-selected": isSelected, ...props, children: [icon && (jsxRuntime.jsx("span", { className: "flex items-center justify-center size-4 border-none bg-transparent outline-none p-0", children: icon })), jsxRuntime.jsx("span", { className: "flex-1 text-nowrap overflow-hidden text-ellipsis text-inherit text-size-inherit leading-inherit font-inherit", children: value.label }), onDeleteClick && (jsxRuntime.jsx("span", { className: "flex items-center justify-center size-4 border-none bg-transparent outline-none p-0 cursor-pointer text-comp-mono-default group-disabled/state:text-comp-disabled", onClick: handleDeleteClick, children: jsxRuntime.jsx(X, {}) })), jsxRuntime.jsx(StateColorContainer, { className: cn("rounded-sm", useSelectedStyle
+                    ? ""
+                    : "group-active/state:bg-fill-default group-active/state:border-transparent group-disabled/state:bg-fill-default"), isInverted: variant === "accent" })] }));
 });
 Tag.displayName = "Tag";
 
@@ -3906,7 +3948,7 @@ const PaginationItem = (props) => {
     return jsxRuntime.jsx("li", { "data-slot": "pagination-item", ...props });
 };
 const PaginationLink = ({ className, isActive, size = "regular", variant = "ghost", ...rest }) => {
-    return (jsxRuntime.jsx(Button, { "aria-current": isActive ? "page" : undefined, "data-slot": "pagination-link", "data-active": isActive, size: size, variant: variant, className: cn("h-9 min-h-9", isActive && "bg-fill-mono-selected text-comp-mono-default", className), ...rest }));
+    return (jsxRuntime.jsx(Button, { "aria-current": isActive ? "page" : undefined, "data-slot": "pagination-link", "data-active": isActive, size: size, variant: variant, className: cn("h-9 min-h-9", isActive && "bg-fill-selected text-comp-mono-default", className), ...rest }));
 };
 const PaginationPrevious = ({ className, ...rest }) => {
     return (jsxRuntime.jsx(PaginationLink, { "aria-label": "Go to previous page", className: cn("flex items-center justify-center mr-4", className), leftIcon: jsxRuntime.jsx(ChevronLeft, { size: 20 }), ...rest }));
@@ -3936,6 +3978,7 @@ exports.PaginationItem = PaginationItem;
 exports.PaginationLink = PaginationLink;
 exports.PaginationNext = PaginationNext;
 exports.PaginationPrevious = PaginationPrevious;
+exports.StateColorContainer = StateColorContainer;
 exports.TAG_SIZES = TAG_SIZES;
 exports.TAG_VARIANTS = TAG_VARIANTS;
 exports.TEXT_ALIGNMENTS = TEXT_ALIGNMENTS;

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

@@ -1,9 +1,11 @@
 export declare const SELECT_TRIGGER_VARIANTS: {
     readonly OUTLINE: "outline";
     readonly GHOST: "ghost";
+    readonly FILLED: "filled";
 };
 export type SelectTriggerVariant = (typeof SELECT_TRIGGER_VARIANTS)[keyof typeof SELECT_TRIGGER_VARIANTS];
 export declare const SELECT_TRIGGER_SIZES: {
+    readonly COMPACT: "compact";
     readonly REGULAR: "regular";
     readonly LARGE: "large";
 };

package/dist/cjs/state-color-container/index.d.ts

@@ -0,0 +1,8 @@
+import { StateGroupName } from "./types";
+interface StateColorContainerProps {
+    groupName?: StateGroupName;
+    isInverted?: boolean;
+    className?: string;
+}
+export declare const StateColorContainer: ({ groupName, isInverted, className, }: StateColorContainerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/state-color-container/types.d.ts

@@ -0,0 +1 @@
+export type StateGroupName = "state" | "wrapper" | "item" | "option" | "tab" | "chip";

package/dist/client.d.ts

@@ -109,9 +109,11 @@ declare const DialogBody: ({ className, ...rest }: React$1.ComponentProps<typeof
 declare const SELECT_TRIGGER_VARIANTS: {
     readonly OUTLINE: "outline";
     readonly GHOST: "ghost";
+    readonly FILLED: "filled";
 };
 type SelectTriggerVariant = (typeof SELECT_TRIGGER_VARIANTS)[keyof typeof SELECT_TRIGGER_VARIANTS];
 declare const SELECT_TRIGGER_SIZES: {
+    readonly COMPACT: "compact";
     readonly REGULAR: "regular";
     readonly LARGE: "large";
 };

package/dist/color.css

@@ -1 +1 @@
-@theme{--color-pure-black:#000;--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-5:hsla(0,0%,100%,.05);--color-pure-white-15:hsla(0,0%,100%,.15);--color-pure-white-30:hsla(0,0%,100%,.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-25:#fafafa;--color-neutral-50:#f2f2f2;--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-850:#212121;--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-25:rgba(4,4,4,.03);--color-dark-opacity-50:rgba(4,4,4,.05);--color-dark-opacity-100:rgba(4,4,4,.1);--color-dark-opacity-150:rgba(4,4,4,.15);--color-dark-opacity-200:rgba(4,4,4,.2);--color-dark-opacity-250:rgba(4,4,4,.25);--color-dark-opacity-300:rgba(4,4,4,.3);--color-dark-opacity-350:rgba(4,4,4,.35);--color-dark-opacity-400:rgba(4,4,4,.4);--color-dark-opacity-450:rgba(4,4,4,.46);--color-dark-opacity-500:rgba(4,4,4,.51);--color-dark-opacity-550:rgba(4,4,4,.58);--color-dark-opacity-600:rgba(4,4,4,.63);--color-dark-opacity-650:rgba(4,4,4,.68);--color-dark-opacity-700:rgba(4,4,4,.73);--color-dark-opacity-750:rgba(4,4,4,.8);--color-dark-opacity-800:rgba(4,4,4,.84);--color-dark-opacity-850:rgba(4,4,4,.89);--color-dark-opacity-900:rgba(4,4,4,.92);--color-light-opacity-25:hsla(0,0%,100%,.03);--color-light-opacity-50:hsla(0,0%,100%,.05);--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:1rem;--spacing-body:1.5rem;--spacing-body-compact:1.3125rem;--spacing-base:1.75rem;--spacing-base-compact:1.5rem;--spacing-large:2rem;--spacing-large-compact:1.625rem;--spacing-xl:2.25rem;--spacing-xl-compact:1.75rem;--spacing-xxl:2.5rem;--spacing-xxl-compact:1.875rem;--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:1rem;--spacing-body:1.5rem;--spacing-body-compact:1.3125rem;--spacing-base:1.75rem;--spacing-base-compact:1.5rem;--spacing-large:2rem;--spacing-large-compact:1.625rem;--spacing-xl:2.25rem;--spacing-xl-compact:1.75rem;--spacing-xxl:2.5rem;--spacing-xxl-compact:1.875rem;--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}

package/dist/esm/button/index.d.ts

@@ -7,6 +7,7 @@ export interface ButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAtt
     isLoading?: boolean;
     leftIcon?: ReactNode;
     rightIcon?: ReactNode;
+    stateContainerClassName?: string;
 }
 /**
  * 다양한 스타일과 속성을 지원하는 버튼 컴포넌트입니다.<br/>

package/dist/esm/button/types.d.ts

@@ -7,9 +7,13 @@ export type ButtonSize = (typeof BUTTON_SIZES)[keyof typeof BUTTON_SIZES];
 export declare const BUTTON_VARIANTS: {
     readonly ACCENT: "accent";
     readonly OUTLINE: "outline";
+    readonly OUTLINE_TO_ACCENT: "outline_to_accent";
     readonly GHOST: "ghost";
     readonly THUMBNAIL_GHOST: "thumbnail_ghost";
+    readonly GHOST_TO_ACCENT: "ghost_to_accent";
     readonly SUBTLE_FILLED: "subtle_filled";
-    readonly ACCENT_GHOST: "accent_ghost";
+    readonly OUTLINE_ACCENT: "outline_accent";
+    readonly GHOST_ACCENT: "ghost_accent";
+    readonly GHOST_DIM: "ghost_dim";
 };
 export type ButtonVariant = (typeof BUTTON_VARIANTS)[keyof typeof BUTTON_VARIANTS];