@telepix-lab/telepix-ui 0.6.6 → 0.6.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/cjs/client.js +9 -25
  2. package/dist/cjs/index.js +8 -24
  3. package/dist/esm/client.js +9 -25
  4. package/dist/esm/index.js +8 -24
  5. package/package.json +1 -1
package/dist/cjs/client.js CHANGED
@@ -12345,7 +12345,7 @@ const Checkbox = React.forwardRef(({ label, labelClassName, wrapperClassName, ..
12345
12345
  setChecked(value);
12346
12346
  onChange?.(value);
12347
12347
  };
12348
- return (jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2.5 pr-3 pl-1.5 py-1 relative group/state rounded-lg", wrapperClassName), children: [jsxRuntime.jsx(Checkbox$1, { ref: ref, id: id ?? randomId, ...rest, checked: defaultChecked ? checked : isChecked, className: cn("size-4 p-0 cursor-pointer border-transparent bg-transparent", className), onCheckedChange: onCheckedChange, children: renderCheckboxIcon(defaultChecked ? checked : isChecked, disabled) }), jsxRuntime.jsx("label", { className: cn("text-body leading-body-compact text-comp-mono-default font-medium cursor-pointer", disabled && "text-comp-disabled cursor-default", labelClassName), htmlFor: id ?? randomId, "aria-disabled": disabled, children: label }), jsxRuntime.jsx(StateColorContainer, { className: cn("rounded-lg", disabled
12348
+ return (jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2.5 pl-1.5 py-1 relative group/state", !label ? "pr-1.5 rounded-sm" : "pr-3 rounded-lg", wrapperClassName), children: [jsxRuntime.jsx(Checkbox$1, { ref: ref, id: id ?? randomId, ...rest, checked: defaultChecked ? checked : isChecked, className: cn("size-4 p-0 cursor-pointer border-transparent bg-transparent", className), onCheckedChange: onCheckedChange, children: renderCheckboxIcon(defaultChecked ? checked : isChecked, disabled) }), label && (jsxRuntime.jsx("label", { className: cn("text-body leading-body-compact text-comp-mono-default font-medium cursor-pointer", disabled && "text-comp-disabled cursor-default", labelClassName), htmlFor: id ?? randomId, "aria-disabled": disabled, children: label })), jsxRuntime.jsx(StateColorContainer, { className: cn(label ? "rounded-lg" : "rounded-sm", disabled
12349
12349
  ? "bg-fill-default group-hover/state:bg-fill-default group-active/state:bg-fill-default"
12350
12350
  : "") })] }));
12351
12351
  });
@@ -13147,14 +13147,9 @@ const BUTTON_VARIANTS = {
13147
13147
  const Button = React.forwardRef(({ variant = "accent", size = "regular", fullWidth = false, isLoading = false, leftIcon, rightIcon, children, disabled, className, stateContainerClassName, ...rest }, ref) => {
13148
13148
  const getClassName = (size, variant) => {
13149
13149
  const sizeClassName = {
13150
- small: "h-7 py-0 px-1.5 text-label leading-label-compact",
13151
- regular: "h-9 py-0 px-2 text-body leading-body-compact",
13152
- large: "h-12 py-0 px-3 text-body leading-body-compact",
13153
- }[size];
13154
- const thumbnailGhostSizeClassName = {
13155
- small: "px-1",
13156
- regular: "px-1",
13157
- large: "px-1.5",
13150
+ small: "h-7 py-0 px-1 text-label leading-label-compact gap-1",
13151
+ regular: "h-9 py-0 px-2 text-body leading-body-compact gap-1.5",
13152
+ large: "h-12 py-0 px-3 text-body leading-body-compact gap-2",
13158
13153
  }[size];
13159
13154
  const variantClassName = {
13160
13155
  accent: "bg-page-accent-l0 disabled:bg-pure-transparent text-comp-accent-default disabled:text-comp-disabled",
@@ -13168,11 +13163,7 @@ const Button = React.forwardRef(({ variant = "accent", size = "regular", fullWid
13168
13163
  ghost_accent: "bg-page-l-null disabled:bg-page-l-null text-comp-accent-default disabled:text-comp-disabled",
13169
13164
  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",
13170
13165
  }[variant];
13171
- return [
13172
- sizeClassName,
13173
- variant === "thumbnail_ghost" && thumbnailGhostSizeClassName,
13174
- variantClassName,
13175
- ];
13166
+ return [sizeClassName, variantClassName];
13176
13167
  };
13177
13168
  const getThumbnailSize = (variant, size) => {
13178
13169
  if (variant !== BUTTON_VARIANTS.THUMBNAIL_GHOST) {
@@ -13183,23 +13174,16 @@ const Button = React.forwardRef(({ variant = "accent", size = "regular", fullWid
13183
13174
  return "size-5"; // 기본값은 regular 크기
13184
13175
  }
13185
13176
  if (size === BUTTON_SIZES.LARGE)
13186
- return "size-9";
13177
+ return "size-7";
13187
13178
  if (size === BUTTON_SIZES.SMALL)
13188
13179
  return "size-5";
13189
- return "size-7"; // 기본값은 regular 크기
13190
- };
13191
- const getPaddingOnlyIcon = (size) => {
13192
- if (size === BUTTON_SIZES.LARGE)
13193
- return "px-3";
13194
- if (size === BUTTON_SIZES.SMALL)
13195
- return "px-1.5";
13196
- return "px-2"; // 기본값은 regular 크기
13180
+ return "size-6"; // 기본값은 regular 크기
13197
13181
  };
13198
- 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 &&
13182
+ 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", 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 &&
13199
13183
  "size-4 top-[calc(50%-8px)] left-[calc(50%-8px)]", size === BUTTON_SIZES.REGULAR &&
13200
13184
  "size-5 top-[calc(50%-10px)] left-[calc(50%-10px)]", size === BUTTON_SIZES.LARGE &&
13201
13185
  "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 &&
13202
- "aspect-square [&_img]:rounded-sm", getThumbnailSize(variant, size)), children: leftIcon })), children && (jsxRuntime.jsx("span", { className: "px-2", style: { visibility: isLoading ? "hidden" : "visible" }, children: children })), rightIcon && (jsxRuntime.jsx("div", { className: cn("flex items-center justify-center relative", getThumbnailSize(variant, size)), children: rightIcon }))] }));
13186
+ "aspect-square [&_img]:rounded-sm", getThumbnailSize(variant, size)), children: leftIcon })), children && (jsxRuntime.jsx("div", { className: "flex-1", style: { visibility: isLoading ? "hidden" : "visible" }, children: children })), rightIcon && (jsxRuntime.jsx("div", { className: cn("flex items-center justify-center relative", getThumbnailSize(variant, size)), children: rightIcon }))] }));
13203
13187
  });
13204
13188
  Button.displayName = "Button";
13205
13189
 
package/dist/cjs/index.js CHANGED
@@ -3370,14 +3370,9 @@ const StateColorContainer = ({ groupName = "state", isInverted, className, }) =>
3370
3370
  const Button = react.forwardRef(({ variant = "accent", size = "regular", fullWidth = false, isLoading = false, leftIcon, rightIcon, children, disabled, className, stateContainerClassName, ...rest }, ref) => {
3371
3371
  const getClassName = (size, variant) => {
3372
3372
  const sizeClassName = {
3373
- small: "h-7 py-0 px-1.5 text-label leading-label-compact",
3374
- regular: "h-9 py-0 px-2 text-body leading-body-compact",
3375
- large: "h-12 py-0 px-3 text-body leading-body-compact",
3376
- }[size];
3377
- const thumbnailGhostSizeClassName = {
3378
- small: "px-1",
3379
- regular: "px-1",
3380
- large: "px-1.5",
3373
+ small: "h-7 py-0 px-1 text-label leading-label-compact gap-1",
3374
+ regular: "h-9 py-0 px-2 text-body leading-body-compact gap-1.5",
3375
+ large: "h-12 py-0 px-3 text-body leading-body-compact gap-2",
3381
3376
  }[size];
3382
3377
  const variantClassName = {
3383
3378
  accent: "bg-page-accent-l0 disabled:bg-pure-transparent text-comp-accent-default disabled:text-comp-disabled",
@@ -3391,11 +3386,7 @@ const Button = react.forwardRef(({ variant = "accent", size = "regular", fullWid
3391
3386
  ghost_accent: "bg-page-l-null disabled:bg-page-l-null text-comp-accent-default disabled:text-comp-disabled",
3392
3387
  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",
3393
3388
  }[variant];
3394
- return [
3395
- sizeClassName,
3396
- variant === "thumbnail_ghost" && thumbnailGhostSizeClassName,
3397
- variantClassName,
3398
- ];
3389
+ return [sizeClassName, variantClassName];
3399
3390
  };
3400
3391
  const getThumbnailSize = (variant, size) => {
3401
3392
  if (variant !== BUTTON_VARIANTS.THUMBNAIL_GHOST) {
@@ -3406,23 +3397,16 @@ const Button = react.forwardRef(({ variant = "accent", size = "regular", fullWid
3406
3397
  return "size-5"; // 기본값은 regular 크기
3407
3398
  }
3408
3399
  if (size === BUTTON_SIZES.LARGE)
3409
- return "size-9";
3400
+ return "size-7";
3410
3401
  if (size === BUTTON_SIZES.SMALL)
3411
3402
  return "size-5";
3412
- return "size-7"; // 기본값은 regular 크기
3413
- };
3414
- const getPaddingOnlyIcon = (size) => {
3415
- if (size === BUTTON_SIZES.LARGE)
3416
- return "px-3";
3417
- if (size === BUTTON_SIZES.SMALL)
3418
- return "px-1.5";
3419
- return "px-2"; // 기본값은 regular 크기
3403
+ return "size-6"; // 기본값은 regular 크기
3420
3404
  };
3421
- 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 &&
3405
+ 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", 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 &&
3422
3406
  "size-4 top-[calc(50%-8px)] left-[calc(50%-8px)]", size === BUTTON_SIZES.REGULAR &&
3423
3407
  "size-5 top-[calc(50%-10px)] left-[calc(50%-10px)]", size === BUTTON_SIZES.LARGE &&
3424
3408
  "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 &&
3425
- "aspect-square [&_img]:rounded-sm", getThumbnailSize(variant, size)), children: leftIcon })), children && (jsxRuntime.jsx("span", { className: "px-2", style: { visibility: isLoading ? "hidden" : "visible" }, children: children })), rightIcon && (jsxRuntime.jsx("div", { className: cn("flex items-center justify-center relative", getThumbnailSize(variant, size)), children: rightIcon }))] }));
3409
+ "aspect-square [&_img]:rounded-sm", getThumbnailSize(variant, size)), children: leftIcon })), children && (jsxRuntime.jsx("div", { className: "flex-1", style: { visibility: isLoading ? "hidden" : "visible" }, children: children })), rightIcon && (jsxRuntime.jsx("div", { className: cn("flex items-center justify-center relative", getThumbnailSize(variant, size)), children: rightIcon }))] }));
3426
3410
  });
3427
3411
  Button.displayName = "Button";
3428
3412
 
package/dist/esm/client.js CHANGED
@@ -12325,7 +12325,7 @@ const Checkbox = forwardRef(({ label, labelClassName, wrapperClassName, ...rest
12325
12325
  setChecked(value);
12326
12326
  onChange?.(value);
12327
12327
  };
12328
- return (jsxs("div", { className: cn("flex items-center gap-2.5 pr-3 pl-1.5 py-1 relative group/state rounded-lg", wrapperClassName), children: [jsx(Checkbox$1, { ref: ref, id: id ?? randomId, ...rest, checked: defaultChecked ? checked : isChecked, className: cn("size-4 p-0 cursor-pointer border-transparent bg-transparent", className), onCheckedChange: onCheckedChange, children: renderCheckboxIcon(defaultChecked ? checked : isChecked, disabled) }), jsx("label", { className: cn("text-body leading-body-compact text-comp-mono-default font-medium cursor-pointer", disabled && "text-comp-disabled cursor-default", labelClassName), htmlFor: id ?? randomId, "aria-disabled": disabled, children: label }), jsx(StateColorContainer, { className: cn("rounded-lg", disabled
12328
+ return (jsxs("div", { className: cn("flex items-center gap-2.5 pl-1.5 py-1 relative group/state", !label ? "pr-1.5 rounded-sm" : "pr-3 rounded-lg", wrapperClassName), children: [jsx(Checkbox$1, { ref: ref, id: id ?? randomId, ...rest, checked: defaultChecked ? checked : isChecked, className: cn("size-4 p-0 cursor-pointer border-transparent bg-transparent", className), onCheckedChange: onCheckedChange, children: renderCheckboxIcon(defaultChecked ? checked : isChecked, disabled) }), label && (jsx("label", { className: cn("text-body leading-body-compact text-comp-mono-default font-medium cursor-pointer", disabled && "text-comp-disabled cursor-default", labelClassName), htmlFor: id ?? randomId, "aria-disabled": disabled, children: label })), jsx(StateColorContainer, { className: cn(label ? "rounded-lg" : "rounded-sm", disabled
12329
12329
  ? "bg-fill-default group-hover/state:bg-fill-default group-active/state:bg-fill-default"
12330
12330
  : "") })] }));
12331
12331
  });
@@ -13127,14 +13127,9 @@ const BUTTON_VARIANTS = {
13127
13127
  const Button = forwardRef(({ variant = "accent", size = "regular", fullWidth = false, isLoading = false, leftIcon, rightIcon, children, disabled, className, stateContainerClassName, ...rest }, ref) => {
13128
13128
  const getClassName = (size, variant) => {
13129
13129
  const sizeClassName = {
13130
- small: "h-7 py-0 px-1.5 text-label leading-label-compact",
13131
- regular: "h-9 py-0 px-2 text-body leading-body-compact",
13132
- large: "h-12 py-0 px-3 text-body leading-body-compact",
13133
- }[size];
13134
- const thumbnailGhostSizeClassName = {
13135
- small: "px-1",
13136
- regular: "px-1",
13137
- large: "px-1.5",
13130
+ small: "h-7 py-0 px-1 text-label leading-label-compact gap-1",
13131
+ regular: "h-9 py-0 px-2 text-body leading-body-compact gap-1.5",
13132
+ large: "h-12 py-0 px-3 text-body leading-body-compact gap-2",
13138
13133
  }[size];
13139
13134
  const variantClassName = {
13140
13135
  accent: "bg-page-accent-l0 disabled:bg-pure-transparent text-comp-accent-default disabled:text-comp-disabled",
@@ -13148,11 +13143,7 @@ const Button = forwardRef(({ variant = "accent", size = "regular", fullWidth = f
13148
13143
  ghost_accent: "bg-page-l-null disabled:bg-page-l-null text-comp-accent-default disabled:text-comp-disabled",
13149
13144
  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",
13150
13145
  }[variant];
13151
- return [
13152
- sizeClassName,
13153
- variant === "thumbnail_ghost" && thumbnailGhostSizeClassName,
13154
- variantClassName,
13155
- ];
13146
+ return [sizeClassName, variantClassName];
13156
13147
  };
13157
13148
  const getThumbnailSize = (variant, size) => {
13158
13149
  if (variant !== BUTTON_VARIANTS.THUMBNAIL_GHOST) {
@@ -13163,23 +13154,16 @@ const Button = forwardRef(({ variant = "accent", size = "regular", fullWidth = f
13163
13154
  return "size-5"; // 기본값은 regular 크기
13164
13155
  }
13165
13156
  if (size === BUTTON_SIZES.LARGE)
13166
- return "size-9";
13157
+ return "size-7";
13167
13158
  if (size === BUTTON_SIZES.SMALL)
13168
13159
  return "size-5";
13169
- return "size-7"; // 기본값은 regular 크기
13170
- };
13171
- const getPaddingOnlyIcon = (size) => {
13172
- if (size === BUTTON_SIZES.LARGE)
13173
- return "px-3";
13174
- if (size === BUTTON_SIZES.SMALL)
13175
- return "px-1.5";
13176
- return "px-2"; // 기본값은 regular 크기
13160
+ return "size-6"; // 기본값은 regular 크기
13177
13161
  };
13178
- return (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: [jsx(StateColorContainer, { isInverted: variant === BUTTON_VARIANTS.ACCENT, className: stateContainerClassName }), isLoading && (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 &&
13162
+ return (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", className), ...rest, children: [jsx(StateColorContainer, { isInverted: variant === BUTTON_VARIANTS.ACCENT, className: stateContainerClassName }), isLoading && (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 &&
13179
13163
  "size-4 top-[calc(50%-8px)] left-[calc(50%-8px)]", size === BUTTON_SIZES.REGULAR &&
13180
13164
  "size-5 top-[calc(50%-10px)] left-[calc(50%-10px)]", size === BUTTON_SIZES.LARGE &&
13181
13165
  "size-6 top-[calc(50%-12px)] left-[calc(50%-12px)]"), children: jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) })), leftIcon && (jsx("div", { className: cn("flex items-center justify-center relative", variant === BUTTON_VARIANTS.THUMBNAIL_GHOST &&
13182
- "aspect-square [&_img]:rounded-sm", getThumbnailSize(variant, size)), children: leftIcon })), children && (jsx("span", { className: "px-2", style: { visibility: isLoading ? "hidden" : "visible" }, children: children })), rightIcon && (jsx("div", { className: cn("flex items-center justify-center relative", getThumbnailSize(variant, size)), children: rightIcon }))] }));
13166
+ "aspect-square [&_img]:rounded-sm", getThumbnailSize(variant, size)), children: leftIcon })), children && (jsx("div", { className: "flex-1", style: { visibility: isLoading ? "hidden" : "visible" }, children: children })), rightIcon && (jsx("div", { className: cn("flex items-center justify-center relative", getThumbnailSize(variant, size)), children: rightIcon }))] }));
13183
13167
  });
13184
13168
  Button.displayName = "Button";
13185
13169
 
package/dist/esm/index.js CHANGED
@@ -3368,14 +3368,9 @@ const StateColorContainer = ({ groupName = "state", isInverted, className, }) =>
3368
3368
  const Button = forwardRef(({ variant = "accent", size = "regular", fullWidth = false, isLoading = false, leftIcon, rightIcon, children, disabled, className, stateContainerClassName, ...rest }, ref) => {
3369
3369
  const getClassName = (size, variant) => {
3370
3370
  const sizeClassName = {
3371
- small: "h-7 py-0 px-1.5 text-label leading-label-compact",
3372
- regular: "h-9 py-0 px-2 text-body leading-body-compact",
3373
- large: "h-12 py-0 px-3 text-body leading-body-compact",
3374
- }[size];
3375
- const thumbnailGhostSizeClassName = {
3376
- small: "px-1",
3377
- regular: "px-1",
3378
- large: "px-1.5",
3371
+ small: "h-7 py-0 px-1 text-label leading-label-compact gap-1",
3372
+ regular: "h-9 py-0 px-2 text-body leading-body-compact gap-1.5",
3373
+ large: "h-12 py-0 px-3 text-body leading-body-compact gap-2",
3379
3374
  }[size];
3380
3375
  const variantClassName = {
3381
3376
  accent: "bg-page-accent-l0 disabled:bg-pure-transparent text-comp-accent-default disabled:text-comp-disabled",
@@ -3389,11 +3384,7 @@ const Button = forwardRef(({ variant = "accent", size = "regular", fullWidth = f
3389
3384
  ghost_accent: "bg-page-l-null disabled:bg-page-l-null text-comp-accent-default disabled:text-comp-disabled",
3390
3385
  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",
3391
3386
  }[variant];
3392
- return [
3393
- sizeClassName,
3394
- variant === "thumbnail_ghost" && thumbnailGhostSizeClassName,
3395
- variantClassName,
3396
- ];
3387
+ return [sizeClassName, variantClassName];
3397
3388
  };
3398
3389
  const getThumbnailSize = (variant, size) => {
3399
3390
  if (variant !== BUTTON_VARIANTS.THUMBNAIL_GHOST) {
@@ -3404,23 +3395,16 @@ const Button = forwardRef(({ variant = "accent", size = "regular", fullWidth = f
3404
3395
  return "size-5"; // 기본값은 regular 크기
3405
3396
  }
3406
3397
  if (size === BUTTON_SIZES.LARGE)
3407
- return "size-9";
3398
+ return "size-7";
3408
3399
  if (size === BUTTON_SIZES.SMALL)
3409
3400
  return "size-5";
3410
- return "size-7"; // 기본값은 regular 크기
3411
- };
3412
- const getPaddingOnlyIcon = (size) => {
3413
- if (size === BUTTON_SIZES.LARGE)
3414
- return "px-3";
3415
- if (size === BUTTON_SIZES.SMALL)
3416
- return "px-1.5";
3417
- return "px-2"; // 기본값은 regular 크기
3401
+ return "size-6"; // 기본값은 regular 크기
3418
3402
  };
3419
- return (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: [jsx(StateColorContainer, { isInverted: variant === BUTTON_VARIANTS.ACCENT, className: stateContainerClassName }), isLoading && (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 &&
3403
+ return (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", className), ...rest, children: [jsx(StateColorContainer, { isInverted: variant === BUTTON_VARIANTS.ACCENT, className: stateContainerClassName }), isLoading && (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 &&
3420
3404
  "size-4 top-[calc(50%-8px)] left-[calc(50%-8px)]", size === BUTTON_SIZES.REGULAR &&
3421
3405
  "size-5 top-[calc(50%-10px)] left-[calc(50%-10px)]", size === BUTTON_SIZES.LARGE &&
3422
3406
  "size-6 top-[calc(50%-12px)] left-[calc(50%-12px)]"), children: jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) })), leftIcon && (jsx("div", { className: cn("flex items-center justify-center relative", variant === BUTTON_VARIANTS.THUMBNAIL_GHOST &&
3423
- "aspect-square [&_img]:rounded-sm", getThumbnailSize(variant, size)), children: leftIcon })), children && (jsx("span", { className: "px-2", style: { visibility: isLoading ? "hidden" : "visible" }, children: children })), rightIcon && (jsx("div", { className: cn("flex items-center justify-center relative", getThumbnailSize(variant, size)), children: rightIcon }))] }));
3407
+ "aspect-square [&_img]:rounded-sm", getThumbnailSize(variant, size)), children: leftIcon })), children && (jsx("div", { className: "flex-1", style: { visibility: isLoading ? "hidden" : "visible" }, children: children })), rightIcon && (jsx("div", { className: cn("flex items-center justify-center relative", getThumbnailSize(variant, size)), children: rightIcon }))] }));
3424
3408
  });
3425
3409
  Button.displayName = "Button";
3426
3410
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@telepix-lab/telepix-ui",
3
- "version": "0.6.6",
3
+ "version": "0.6.7",
4
4
  "description": "A UI kit for TelePIX",
5
5
  "types": "./dist/index.d.ts",
6
6
  "exports": {