@x-plat/design-system 0.7.2 → 0.8.1

package/dist/components/Dropdown/index.cjs

@@ -35,30 +35,25 @@ __export(Dropdown_exports, {
 module.exports = __toCommonJS(Dropdown_exports);
 
 // src/components/Dropdown/Dropdown.tsx
-var import_react4 = __toESM(require("react"), 1);
+var import_react3 = __toESM(require("react"), 1);
 
 // src/tokens/hooks/Portal.tsx
-var import_react = __toESM(require("react"), 1);
 var import_react_dom = __toESM(require("react-dom"), 1);
-var import_jsx_runtime = require("react/jsx-runtime");
-var PortalContainerContext = import_react.default.createContext(null);
 var Portal = ({ children }) => {
-  const contextContainer = import_react.default.useContext(PortalContainerContext);
   if (typeof document === "undefined") return null;
-  const container = contextContainer ?? document.body;
-  return import_react_dom.default.createPortal(children, container);
+  return import_react_dom.default.createPortal(children, document.body);
 };
 Portal.displayName = "Portal";
 var Portal_default = Portal;
 
 // src/tokens/hooks/useAutoPosition.ts
-var import_react2 = __toESM(require("react"), 1);
+var import_react = __toESM(require("react"), 1);
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = import_react2.default.useState({
+  const [position, setPosition] = import_react.default.useState({
     position: {},
     direction: "bottom"
   });
-  const calculatePosition = import_react2.default.useCallback(() => {
+  const calculatePosition = import_react.default.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const popW = popRef.current.offsetWidth;
@@ -85,13 +80,13 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       direction
     });
   }, [triggerRef, popRef]);
-  import_react2.default.useLayoutEffect(() => {
+  import_react.default.useLayoutEffect(() => {
     if (!enabled) return;
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
   }, [calculatePosition, enabled]);
-  import_react2.default.useEffect(() => {
+  import_react.default.useEffect(() => {
     if (!enabled || !popRef.current) return;
     const observer = new ResizeObserver(() => {
       calculatePosition();
@@ -99,7 +94,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     observer.observe(popRef.current);
     return () => observer.disconnect();
   }, [calculatePosition, enabled, popRef]);
-  import_react2.default.useEffect(() => {
+  import_react.default.useEffect(() => {
     if (!enabled) return;
     window.addEventListener("resize", calculatePosition);
     window.addEventListener("scroll", calculatePosition, true);
@@ -113,9 +108,9 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
 var useAutoPosition_default = useAutoPosition;
 
 // src/tokens/hooks/useClickOutside.ts
-var import_react3 = __toESM(require("react"), 1);
+var import_react2 = __toESM(require("react"), 1);
 var useClickOutside = (refs, handler, enabled = true) => {
-  import_react3.default.useEffect(() => {
+  import_react2.default.useEffect(() => {
     if (!enabled) return;
     const refArray = Array.isArray(refs) ? refs : [refs];
     const listener = (event) => {
@@ -154,17 +149,17 @@ function clsx() {
 var clsx_default = clsx;
 
 // src/components/Dropdown/Dropdown.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime = require("react/jsx-runtime");
 var Dropdown = (props) => {
   const { items, children } = props;
-  const [isOpen, setIsOpen] = import_react4.default.useState(false);
-  const [mounted, setMounted] = import_react4.default.useState(false);
-  const [visible, setVisible] = import_react4.default.useState(false);
-  const triggerRef = import_react4.default.useRef(null);
-  const menuRef = import_react4.default.useRef(null);
+  const [isOpen, setIsOpen] = import_react3.default.useState(false);
+  const [mounted, setMounted] = import_react3.default.useState(false);
+  const [visible, setVisible] = import_react3.default.useState(false);
+  const triggerRef = import_react3.default.useRef(null);
+  const menuRef = import_react3.default.useRef(null);
   const { position, direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
-  import_react4.default.useEffect(() => {
+  import_react3.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -179,8 +174,8 @@ var Dropdown = (props) => {
     item.onClick?.();
     setIsOpen(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "lib-xplat-dropdown", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "lib-xplat-dropdown", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
         ref: triggerRef,
@@ -189,14 +184,14 @@ var Dropdown = (props) => {
         children
       }
     ),
-    mounted && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    mounted && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
         ref: menuRef,
         className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }),
         style: { top: position.top, left: position.left },
         role: "menu",
-        children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "button",
           {
             className: clsx_default("dropdown-item", {

package/dist/components/Dropdown/index.js

@@ -1,28 +1,23 @@
 // src/components/Dropdown/Dropdown.tsx
-import React4 from "react";
+import React3 from "react";
 
 // src/tokens/hooks/Portal.tsx
-import React from "react";
 import ReactDOM from "react-dom";
-import { jsx } from "react/jsx-runtime";
-var PortalContainerContext = React.createContext(null);
 var Portal = ({ children }) => {
-  const contextContainer = React.useContext(PortalContainerContext);
   if (typeof document === "undefined") return null;
-  const container = contextContainer ?? document.body;
-  return ReactDOM.createPortal(children, container);
+  return ReactDOM.createPortal(children, document.body);
 };
 Portal.displayName = "Portal";
 var Portal_default = Portal;
 
 // src/tokens/hooks/useAutoPosition.ts
-import React2 from "react";
+import React from "react";
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const [position, setPosition] = React2.useState({
+  const [position, setPosition] = React.useState({
     position: {},
     direction: "bottom"
   });
-  const calculatePosition = React2.useCallback(() => {
+  const calculatePosition = React.useCallback(() => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const popW = popRef.current.offsetWidth;
@@ -49,13 +44,13 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       direction
     });
   }, [triggerRef, popRef]);
-  React2.useLayoutEffect(() => {
+  React.useLayoutEffect(() => {
     if (!enabled) return;
     calculatePosition();
     const raf = requestAnimationFrame(calculatePosition);
     return () => cancelAnimationFrame(raf);
   }, [calculatePosition, enabled]);
-  React2.useEffect(() => {
+  React.useEffect(() => {
     if (!enabled || !popRef.current) return;
     const observer = new ResizeObserver(() => {
       calculatePosition();
@@ -63,7 +58,7 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     observer.observe(popRef.current);
     return () => observer.disconnect();
   }, [calculatePosition, enabled, popRef]);
-  React2.useEffect(() => {
+  React.useEffect(() => {
     if (!enabled) return;
     window.addEventListener("resize", calculatePosition);
     window.addEventListener("scroll", calculatePosition, true);
@@ -77,9 +72,9 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
 var useAutoPosition_default = useAutoPosition;
 
 // src/tokens/hooks/useClickOutside.ts
-import React3 from "react";
+import React2 from "react";
 var useClickOutside = (refs, handler, enabled = true) => {
-  React3.useEffect(() => {
+  React2.useEffect(() => {
     if (!enabled) return;
     const refArray = Array.isArray(refs) ? refs : [refs];
     const listener = (event) => {
@@ -118,17 +113,17 @@ function clsx() {
 var clsx_default = clsx;
 
 // src/components/Dropdown/Dropdown.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var Dropdown = (props) => {
   const { items, children } = props;
-  const [isOpen, setIsOpen] = React4.useState(false);
-  const [mounted, setMounted] = React4.useState(false);
-  const [visible, setVisible] = React4.useState(false);
-  const triggerRef = React4.useRef(null);
-  const menuRef = React4.useRef(null);
+  const [isOpen, setIsOpen] = React3.useState(false);
+  const [mounted, setMounted] = React3.useState(false);
+  const [visible, setVisible] = React3.useState(false);
+  const triggerRef = React3.useRef(null);
+  const menuRef = React3.useRef(null);
   const { position, direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -144,7 +139,7 @@ var Dropdown = (props) => {
     setIsOpen(false);
   };
   return /* @__PURE__ */ jsxs("div", { className: "lib-xplat-dropdown", children: [
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx(
       "div",
       {
         ref: triggerRef,
@@ -153,14 +148,14 @@ var Dropdown = (props) => {
         children
       }
     ),
-    mounted && /* @__PURE__ */ jsx2(Portal_default, { children: /* @__PURE__ */ jsx2(
+    mounted && /* @__PURE__ */ jsx(Portal_default, { children: /* @__PURE__ */ jsx(
       "div",
       {
         ref: menuRef,
         className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }),
         style: { top: position.top, left: position.left },
         role: "menu",
-        children: items.map((item) => /* @__PURE__ */ jsx2(
+        children: items.map((item) => /* @__PURE__ */ jsx(
           "button",
           {
             className: clsx_default("dropdown-item", {

package/dist/components/Input/index.css

@@ -21,6 +21,8 @@
 .lib-xplat-input-wrap .lib-xplat-input:focus-within {
   border-color: var(--semantic-interaction-focus-ring);
   box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
 }
 .lib-xplat-input-wrap .lib-xplat-input:has(> input:not(:placeholder-shown)):not(:focus-within) {
   border-color: var(--semantic-border-tertiary);

package/dist/components/Link/index.cjs

@@ -0,0 +1,64 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Link/index.ts
+var Link_exports = {};
+__export(Link_exports, {
+  Link: () => Link_default
+});
+module.exports = __toCommonJS(Link_exports);
+
+// ../../node_modules/clsx/dist/clsx.mjs
+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;
+}
+var clsx_default = clsx;
+
+// src/components/Link/Link.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Link = (props) => {
+  const { children, href, underline = "always", target, rel, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "a",
+    {
+      className: clsx_default("lib-xplat-link", `underline-${underline}`),
+      href,
+      target,
+      rel: target === "_blank" ? rel ?? "noopener noreferrer" : rel,
+      ...rest,
+      children
+    }
+  );
+};
+Link.displayName = "Link";
+var Link_default = Link;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Link
+});

package/dist/components/Link/index.css

@@ -0,0 +1,25 @@
+/* src/components/Link/link.scss */
+.lib-xplat-link {
+  color: var(--semantic-text-link);
+  cursor: pointer;
+  text-underline-offset: 2px;
+  text-decoration-thickness: 1px;
+  border-radius: var(--spacing-radius-sm);
+  transition: text-decoration-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+.lib-xplat-link.underline-always {
+  text-decoration: underline;
+}
+.lib-xplat-link.underline-hover {
+  text-decoration: none;
+}
+.lib-xplat-link.underline-hover:hover {
+  text-decoration: underline;
+}
+.lib-xplat-link.underline-none {
+  text-decoration: none;
+}
+.lib-xplat-link:focus-visible {
+  outline: 2px solid var(--semantic-interaction-focus-ring);
+  outline-offset: 2px;
+}

package/dist/components/Link/index.d.cts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type Underline = "always" | "hover" | "none";
+interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "color" | "href"> {
+    children: React.ReactNode;
+    href: string;
+    /**
+     * 밑줄 표시 방식. 기본은 `"always"`.
+     *
+     * 본문 속 링크는 색만으로 구분하면 색각 이상이 있는 사용자가 놓친다.
+     * 주변 텍스트와 확실히 구분되는 자리(내비게이션·목록 등)에서만 `"hover"` 나
+     * `"none"` 으로 내린다.
+     */
+    underline?: Underline;
+}
+/**
+ * 본문 속 텍스트 링크. 크기·굵기는 주변 텍스트를 그대로 물려받는다.
+ *
+ * 버튼처럼 보여야 하는 링크는 `LinkButton` 을 쓴다.
+ */
+declare const Link: {
+    (props: LinkProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { Link };

package/dist/components/Link/index.d.ts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type Underline = "always" | "hover" | "none";
+interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "color" | "href"> {
+    children: React.ReactNode;
+    href: string;
+    /**
+     * 밑줄 표시 방식. 기본은 `"always"`.
+     *
+     * 본문 속 링크는 색만으로 구분하면 색각 이상이 있는 사용자가 놓친다.
+     * 주변 텍스트와 확실히 구분되는 자리(내비게이션·목록 등)에서만 `"hover"` 나
+     * `"none"` 으로 내린다.
+     */
+    underline?: Underline;
+}
+/**
+ * 본문 속 텍스트 링크. 크기·굵기는 주변 텍스트를 그대로 물려받는다.
+ *
+ * 버튼처럼 보여야 하는 링크는 `LinkButton` 을 쓴다.
+ */
+declare const Link: {
+    (props: LinkProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { Link };

package/dist/components/Link/index.js

@@ -0,0 +1,37 @@
+// ../../node_modules/clsx/dist/clsx.mjs
+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;
+}
+var clsx_default = clsx;
+
+// src/components/Link/Link.tsx
+import { jsx } from "react/jsx-runtime";
+var Link = (props) => {
+  const { children, href, underline = "always", target, rel, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      className: clsx_default("lib-xplat-link", `underline-${underline}`),
+      href,
+      target,
+      rel: target === "_blank" ? rel ?? "noopener noreferrer" : rel,
+      ...rest,
+      children
+    }
+  );
+};
+Link.displayName = "Link";
+var Link_default = Link;
+export {
+  Link_default as Link
+};

package/dist/components/LinkButton/index.cjs

@@ -0,0 +1,64 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/LinkButton/index.ts
+var LinkButton_exports = {};
+__export(LinkButton_exports, {
+  LinkButton: () => LinkButton_default
+});
+module.exports = __toCommonJS(LinkButton_exports);
+
+// ../../node_modules/clsx/dist/clsx.mjs
+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;
+}
+var clsx_default = clsx;
+
+// src/components/LinkButton/LinkButton.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var LinkButton = (props) => {
+  const { children, href, type = "primary", size = "md", target, rel, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "a",
+    {
+      className: clsx_default("lib-xplat-button", type, size),
+      href,
+      target,
+      rel: target === "_blank" ? rel ?? "noopener noreferrer" : rel,
+      ...rest,
+      children
+    }
+  );
+};
+LinkButton.displayName = "LinkButton";
+var LinkButton_default = LinkButton;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LinkButton
+});

package/dist/components/LinkButton/index.css

@@ -0,0 +1,106 @@
+/* src/components/Button/button.scss */
+.lib-xplat-button {
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-space-2);
+  white-space: nowrap;
+  border-radius: var(--spacing-radius-md);
+  font-weight: var(--semantic-typo-label-1-m-weight);
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition: background-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+.lib-xplat-button.sm {
+  height: var(--spacing-control-height-sm);
+  padding: 0 var(--spacing-space-3);
+  font-family: var(--semantic-typo-caption-1-r-font);
+  font-size: var(--semantic-typo-caption-1-r-size);
+  line-height: var(--semantic-typo-caption-1-r-lh);
+  font-weight: var(--semantic-typo-caption-1-r-weight);
+  letter-spacing: var(--semantic-typo-caption-1-r-ls);
+}
+.lib-xplat-button.md {
+  height: var(--spacing-control-height-md);
+  padding: 0 var(--spacing-space-4);
+  font-family: var(--semantic-typo-label-2-m-font);
+  font-size: var(--semantic-typo-label-2-m-size);
+  line-height: var(--semantic-typo-label-2-m-lh);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
+}
+.lib-xplat-button.lg {
+  height: var(--spacing-control-height-lg);
+  padding: 0 var(--spacing-space-6);
+  font-family: var(--semantic-typo-label-1-m-font);
+  font-size: var(--semantic-typo-label-1-m-size);
+  line-height: var(--semantic-typo-label-1-m-lh);
+  font-weight: var(--semantic-typo-label-1-m-weight);
+  letter-spacing: var(--semantic-typo-label-1-m-ls);
+}
+.lib-xplat-button:disabled,
+.lib-xplat-button.disabled {
+  cursor: not-allowed;
+  background-color: var(--semantic-surface-neutral-disabled) !important;
+  border-color: var(--semantic-surface-neutral-disabled) !important;
+  color: var(--semantic-text-disabled) !important;
+}
+.lib-xplat-button.primary {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-brand-default);
+}
+.lib-xplat-button.primary:hover:not(:disabled) {
+  background-color: var(--semantic-surface-brand-strong);
+}
+.lib-xplat-button.primary:active:not(:disabled) {
+  background-color: var(--semantic-surface-brand-strong);
+}
+.lib-xplat-button.primary:focus-visible {
+  outline: 2px solid var(--semantic-interaction-focus-ring);
+  outline-offset: 2px;
+}
+.lib-xplat-button.secondary {
+  color: var(--semantic-surface-brand-default);
+  background-color: var(--semantic-surface-neutral-primary);
+  border-color: var(--semantic-border-primary);
+}
+.lib-xplat-button.secondary:hover:not(:disabled) {
+  background-color: var(--semantic-surface-neutral-secondary);
+}
+.lib-xplat-button.secondary:active:not(:disabled) {
+  background-color: var(--semantic-surface-neutral-tertiary);
+}
+.lib-xplat-button.secondary:focus-visible {
+  outline: 2px solid var(--semantic-interaction-focus-ring);
+  outline-offset: 2px;
+}
+.lib-xplat-button.danger {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-error-default);
+}
+.lib-xplat-button.danger:hover:not(:disabled) {
+  background-color: var(--semantic-surface-error-strong);
+}
+.lib-xplat-button.danger:active:not(:disabled) {
+  background-color: var(--semantic-surface-error-strong);
+}
+.lib-xplat-button.danger:focus-visible {
+  outline: 2px solid var(--semantic-interaction-focus-ring);
+  outline-offset: 2px;
+}
+.lib-xplat-button.ghost {
+  color: var(--semantic-text-secondary);
+  background-color: transparent;
+  border-color: transparent;
+}
+.lib-xplat-button.ghost:hover:not(:disabled) {
+  background-color: var(--semantic-surface-neutral-secondary);
+}
+.lib-xplat-button.ghost:active:not(:disabled) {
+  background-color: var(--semantic-surface-neutral-disabled);
+}
+.lib-xplat-button.ghost:focus-visible {
+  outline: 2px solid var(--semantic-interaction-focus-ring);
+  outline-offset: 2px;
+}

package/dist/components/LinkButton/index.d.cts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type LinkButtonType = "primary" | "secondary" | "danger" | "ghost";
+type LinkButtonSize = "sm" | "md" | "lg";
+interface LinkButtonProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "type" | "color" | "href"> {
+    children: React.ReactNode;
+    href: string;
+    type?: LinkButtonType;
+    size?: LinkButtonSize;
+}
+/**
+ * 버튼처럼 보이지만 **이동하는** 링크. `<a>` 로 렌더된다.
+ *
+ * 우클릭 메뉴·새 탭으로 열기·링크 미리보기가 동작해야 하는 자리에 쓴다.
+ * `<button>` 으로 만들면 그게 전부 막힌다.
+ *
+ * 누르면 무언가 **일어나는** 자리는 `Button`, 본문 속 텍스트 링크는 `Link` 다.
+ *
+ * `width: 100%` 가 들어 있어 부모를 꽉 채운다. 내용만큼만 차지해야 하면
+ * 감싸는 요소에 `width: fit-content` 를 준다.
+ */
+declare const LinkButton: {
+    (props: LinkButtonProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { LinkButton };

package/dist/components/LinkButton/index.d.ts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type LinkButtonType = "primary" | "secondary" | "danger" | "ghost";
+type LinkButtonSize = "sm" | "md" | "lg";
+interface LinkButtonProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "type" | "color" | "href"> {
+    children: React.ReactNode;
+    href: string;
+    type?: LinkButtonType;
+    size?: LinkButtonSize;
+}
+/**
+ * 버튼처럼 보이지만 **이동하는** 링크. `<a>` 로 렌더된다.
+ *
+ * 우클릭 메뉴·새 탭으로 열기·링크 미리보기가 동작해야 하는 자리에 쓴다.
+ * `<button>` 으로 만들면 그게 전부 막힌다.
+ *
+ * 누르면 무언가 **일어나는** 자리는 `Button`, 본문 속 텍스트 링크는 `Link` 다.
+ *
+ * `width: 100%` 가 들어 있어 부모를 꽉 채운다. 내용만큼만 차지해야 하면
+ * 감싸는 요소에 `width: fit-content` 를 준다.
+ */
+declare const LinkButton: {
+    (props: LinkButtonProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { LinkButton };