sellmate-design-system-react 0.1.11 → 0.3.0

package/dist/components/SGhostButton/SGhostButton.d.ts

@@ -11,12 +11,18 @@ export interface SGhostButtonProps {
     intent?: SGhostButtonIntent;
     /** 스크린리더용 접근성 레이블 */
     ariaLabel?: string;
+    /** 토글 버튼일 때 눌림 상태 (aria-pressed). 미지정 시 속성 자체를 내보내지 않는다. */
+    ariaPressed?: boolean;
     /** 호버 시 표시할 툴팁 텍스트 */
     tooltipText?: string;
     /** 비활성 */
     disabled?: boolean;
     /** 클릭 (sdClick) */
     onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+    /** tooltip anchor wrapper 클래스. tooltipText가 있을 때 위치 조정용으로 사용합니다. */
+    anchorClassName?: string;
+    /** tooltip anchor wrapper 스타일. tooltipText가 있을 때 위치 조정용으로 사용합니다. */
+    anchorStyle?: CSSProperties;
     className?: string;
     style?: CSSProperties;
 }
@@ -24,4 +30,4 @@ export interface SGhostButtonProps {
  * SGhostButton — sd-ghost-button 포팅. 아이콘 전용 투명 버튼.
  * hover 시 intent 색 오버레이(5%), focus-visible 링, 옵션 툴팁(회색 STag).
  */
-export declare function SGhostButton({ icon, size, intent, ariaLabel, tooltipText, disabled, onClick, className, style, }: SGhostButtonProps): import("react").JSX.Element;
+export declare function SGhostButton({ icon, size, intent, ariaLabel, ariaPressed, tooltipText, disabled, onClick, anchorClassName, anchorStyle, className, style, }: SGhostButtonProps): import("react").JSX.Element;

package/dist/components/SGhostButton/SGhostButton.js

@@ -2971,9 +2971,12 @@ function SGhostButton({
   size = "sm",
   intent = "default",
   ariaLabel = "",
+  ariaPressed,
   tooltipText,
   disabled = false,
   onClick,
+  anchorClassName,
+  anchorStyle,
   className,
   style
 }) {
@@ -2996,6 +2999,8 @@ function SGhostButton({
   };
   const s = SIZE[size];
   const contentColor = disabled ? intent === "inverse" ? "var(--cmp-ghostButton-inverse-disabled)" : "var(--cmp-ghostButton-icon-disabled)" : `var(--cmp-ghostButton-${intent}-content)`;
+  const text = (tooltipText ?? "").trim();
+  const hasTooltip = text !== "";
   const btn = /* @__PURE__ */ jsxs(
     "button",
     {
@@ -3003,6 +3008,7 @@ function SGhostButton({
       disabled,
       "aria-disabled": disabled ? "true" : void 0,
       "aria-label": ariaLabel.trim() || void 0,
+      "aria-pressed": ariaPressed,
       tabIndex: disabled ? -1 : void 0,
       onClick: (e) => {
         if (disabled) {
@@ -3036,13 +3042,13 @@ function SGhostButton({
       ]
     }
   );
-  const text = (tooltipText ?? "").trim();
-  if (text === "") return btn;
+  if (!hasTooltip) return btn;
   return /* @__PURE__ */ jsxs(RPopover.Root, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(RPopover.Anchor, { asChild: true, children: /* @__PURE__ */ jsx(
       "span",
       {
-        className: "inline-flex",
+        className: cn("inline-flex", anchorClassName),
+        style: anchorStyle,
         onMouseEnter: openNow,
         onMouseLeave: startHide,
         onFocus: openNow,