@x-plat/design-system 0.9.0 → 0.11.0

package/dist/components/PopOver/index.cjs

@@ -35,7 +35,7 @@ __export(PopOver_exports, {
 module.exports = __toCommonJS(PopOver_exports);
 
 // src/components/PopOver/PopOver.tsx
-var import_react3 = __toESM(require("react"), 1);
+var import_react4 = __toESM(require("react"), 1);
 
 // src/tokens/hooks/Portal.tsx
 var import_react_dom = __toESM(require("react-dom"), 1);
@@ -132,6 +132,30 @@ var useClickOutside = (refs, handler, enabled = true) => {
 };
 var useClickOutside_default = useClickOutside;
 
+// src/tokens/hooks/useOverlayKeyboard.ts
+var import_react3 = __toESM(require("react"), 1);
+var FOCUSABLE = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled]):not([type='hidden'])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "[tabindex]:not([tabindex='-1'])"
+].join(",");
+var useEscapeKey = (enabled, onEscape) => {
+  import_react3.default.useEffect(() => {
+    if (!enabled) return;
+    const onKey = (e) => {
+      if (e.key !== "Escape") return;
+      if (e.defaultPrevented) return;
+      e.preventDefault();
+      onEscape();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [enabled, onEscape]);
+};
+
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -152,13 +176,17 @@ var clsx_default = clsx;
 var import_jsx_runtime = require("react/jsx-runtime");
 var PopOver = (props) => {
   const { children, isOpen, onClose, PopOverEl } = props;
-  const popRef = import_react3.default.useRef(null);
-  const triggerRef = import_react3.default.useRef(null);
-  const [localOpen, setLocalOpen] = import_react3.default.useState(false);
-  const [eventTrigger, setEventTrigger] = import_react3.default.useState(false);
+  const popRef = import_react4.default.useRef(null);
+  const triggerRef = import_react4.default.useRef(null);
+  const [localOpen, setLocalOpen] = import_react4.default.useState(false);
+  const [eventTrigger, setEventTrigger] = import_react4.default.useState(false);
   useClickOutside_default([popRef, triggerRef], onClose, isOpen);
+  useEscapeKey(isOpen, () => {
+    onClose();
+    triggerRef.current?.focus({ preventScroll: true });
+  });
   const position = useAutoPosition_default(triggerRef, popRef, localOpen);
-  import_react3.default.useEffect(() => {
+  import_react4.default.useEffect(() => {
     if (isOpen) {
       setLocalOpen(isOpen);
       setTimeout(() => {

package/dist/components/PopOver/index.js

@@ -1,5 +1,5 @@
 // src/components/PopOver/PopOver.tsx
-import React3 from "react";
+import React4 from "react";
 
 // src/tokens/hooks/Portal.tsx
 import ReactDOM from "react-dom";
@@ -96,6 +96,30 @@ var useClickOutside = (refs, handler, enabled = true) => {
 };
 var useClickOutside_default = useClickOutside;
 
+// src/tokens/hooks/useOverlayKeyboard.ts
+import React3 from "react";
+var FOCUSABLE = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled]):not([type='hidden'])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "[tabindex]:not([tabindex='-1'])"
+].join(",");
+var useEscapeKey = (enabled, onEscape) => {
+  React3.useEffect(() => {
+    if (!enabled) return;
+    const onKey = (e) => {
+      if (e.key !== "Escape") return;
+      if (e.defaultPrevented) return;
+      e.preventDefault();
+      onEscape();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [enabled, onEscape]);
+};
+
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -116,13 +140,17 @@ var clsx_default = clsx;
 import { jsx, jsxs } from "react/jsx-runtime";
 var PopOver = (props) => {
   const { children, isOpen, onClose, PopOverEl } = props;
-  const popRef = React3.useRef(null);
-  const triggerRef = React3.useRef(null);
-  const [localOpen, setLocalOpen] = React3.useState(false);
-  const [eventTrigger, setEventTrigger] = React3.useState(false);
+  const popRef = React4.useRef(null);
+  const triggerRef = React4.useRef(null);
+  const [localOpen, setLocalOpen] = React4.useState(false);
+  const [eventTrigger, setEventTrigger] = React4.useState(false);
   useClickOutside_default([popRef, triggerRef], onClose, isOpen);
+  useEscapeKey(isOpen, () => {
+    onClose();
+    triggerRef.current?.focus({ preventScroll: true });
+  });
   const position = useAutoPosition_default(triggerRef, popRef, localOpen);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (isOpen) {
       setLocalOpen(isOpen);
       setTimeout(() => {

package/dist/components/Progress/index.cjs

@@ -24,6 +24,9 @@ __export(Progress_exports, {
 });
 module.exports = __toCommonJS(Progress_exports);
 
+// src/tokens/interface/status.ts
+var normalizeStatus = (value) => value === "brand" ? "primary" : value;
+
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -47,11 +50,12 @@ var Progress = (props) => {
     value,
     max = 100,
     size = "md",
-    type = "brand",
+    type = "primary",
     showLabel = false
   } = props;
+  const statusType = normalizeStatus(type);
   const percentage = Math.min(100, Math.max(0, value / max * 100));
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: clsx_default("lib-xplat-progress", size, type), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: clsx_default("lib-xplat-progress", size, statusType), children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {

package/dist/components/Progress/index.css

@@ -25,6 +25,7 @@
   border-radius: var(--spacing-radius-full);
   transition: width 0.3s ease;
 }
+.lib-xplat-progress.primary .bar,
 .lib-xplat-progress.brand .bar {
   background-color: var(--semantic-surface-brand-default);
 }

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

@@ -1,12 +1,21 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { L as LegacyStatusType } from '../../status-njWqQWFV.cjs';
 
 type ProgressSize = "sm" | "md" | "lg";
-type ProgressType = "brand" | "success" | "error" | "warning" | "info";
+/** Progress 의 상태 색 */
+type ProgressType = "primary" | "success" | "error" | "warning" | "info";
+/** 입력으로는 예전 이름 `brand` 도 받는다 (= `primary`) */
+type ProgressTypeInput = ProgressType | LegacyStatusType;
 interface ProgressProps {
+    /** 현재 값. max 에 대한 비율로 채워진다 */
     value: number;
+    /** 최대값. 기본 100 */
     max?: number;
+    /** 막대 두께 */
     size?: ProgressSize;
-    type?: ProgressType;
+    /** 막대 색 */
+    type?: ProgressTypeInput;
+    /** 오른쪽에 퍼센트 글자를 표시한다 */
     showLabel?: boolean;
 }
 declare const Progress: {

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

@@ -1,12 +1,21 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { L as LegacyStatusType } from '../../status-njWqQWFV.js';
 
 type ProgressSize = "sm" | "md" | "lg";
-type ProgressType = "brand" | "success" | "error" | "warning" | "info";
+/** Progress 의 상태 색 */
+type ProgressType = "primary" | "success" | "error" | "warning" | "info";
+/** 입력으로는 예전 이름 `brand` 도 받는다 (= `primary`) */
+type ProgressTypeInput = ProgressType | LegacyStatusType;
 interface ProgressProps {
+    /** 현재 값. max 에 대한 비율로 채워진다 */
     value: number;
+    /** 최대값. 기본 100 */
     max?: number;
+    /** 막대 두께 */
     size?: ProgressSize;
-    type?: ProgressType;
+    /** 막대 색 */
+    type?: ProgressTypeInput;
+    /** 오른쪽에 퍼센트 글자를 표시한다 */
     showLabel?: boolean;
 }
 declare const Progress: {

package/dist/components/Progress/index.js

@@ -1,3 +1,6 @@
+// src/tokens/interface/status.ts
+var normalizeStatus = (value) => value === "brand" ? "primary" : value;
+
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -21,11 +24,12 @@ var Progress = (props) => {
     value,
     max = 100,
     size = "md",
-    type = "brand",
+    type = "primary",
     showLabel = false
   } = props;
+  const statusType = normalizeStatus(type);
   const percentage = Math.min(100, Math.max(0, value / max * 100));
-  return /* @__PURE__ */ jsxs("div", { className: clsx_default("lib-xplat-progress", size, type), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx_default("lib-xplat-progress", size, statusType), children: [
     /* @__PURE__ */ jsx(
       "div",
       {

package/dist/components/Radio/index.cjs

@@ -35,6 +35,9 @@ __export(Radio_exports, {
 });
 module.exports = __toCommonJS(Radio_exports);
 
+// src/tokens/interface/status.ts
+var normalizeStatus = (value) => value === "brand" ? "primary" : value;
+
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -174,11 +177,16 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { validations, children } = props;
-  if (!validations || validations.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children });
+  const { label, required = false, htmlFor, validations, children } = props;
+  const hasMessages = !!validations && validations.length > 0;
+  if (!label && !hasMessages) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children });
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lib-xplat-field", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "lib-xplat-field-label", htmlFor, children: [
+      label,
+      required && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "required", "aria-hidden": "true", children: "*" })
+    ] }),
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FieldMessage, { validations })
+    hasMessages && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FieldMessage, { validations })
   ] });
 };
 Field.displayName = "Field";
@@ -202,10 +210,11 @@ var Radio = (props) => {
     className,
     value,
     size: sizeProp,
-    type = "brand",
+    type = "primary",
     validations,
     ...rest
   } = props;
+  const statusType = normalizeStatus(type);
   const context = useRadioGroupContext();
   const size = sizeProp ?? context?.size ?? "md";
   const isGroup = !!context;
@@ -221,7 +230,7 @@ var Radio = (props) => {
       className: clsx_default(
         "lib-xplat-radio",
         size,
-        type,
+        statusType,
         localChecked ? "checked" : void 0,
         className
       ),

package/dist/components/Radio/index.css

@@ -4,6 +4,21 @@
   flex-direction: column;
   gap: var(--spacing-space-2);
 }
+.lib-xplat-field-label {
+  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);
+  color: var(--semantic-text-secondary);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-space-1);
+  cursor: pointer;
+}
+.lib-xplat-field-label > .required {
+  color: var(--semantic-text-error);
+}
 .lib-xplat-field-message-wrap {
   display: flex;
   gap: var(--spacing-space-2);
@@ -112,6 +127,7 @@
   border-color: var(--semantic-icon-primary);
   background-color: var(--semantic-surface-neutral-secondary);
 }
+.lib-xplat-radio.primary > .circle.checked,
 .lib-xplat-radio.brand > .circle.checked {
   background-color: var(--semantic-surface-brand-default);
   border-color: var(--semantic-surface-brand-default);
@@ -132,6 +148,7 @@
   background-color: var(--semantic-surface-info-default);
   border-color: var(--semantic-surface-info-default);
 }
+.lib-xplat-radio:hover.primary > .circle.checked,
 .lib-xplat-radio:hover.brand > .circle.checked {
   background-color: var(--semantic-surface-brand-strong);
   border-color: var(--semantic-surface-brand-strong);

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

@@ -1,10 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { I as InputAttributes } from '../../attributes-DJIWir_0.cjs';
+import { L as LegacyStatusType } from '../../status-njWqQWFV.cjs';
 import { V as Validation } from '../../validation-Dqo1zqhT.cjs';
 import React from 'react';
 
 type RadioSize = "sm" | "md" | "lg";
-type RadioType = "brand" | "success" | "error" | "warning" | "info";
+/** Radio 의 상태 색 */
+type RadioType = "primary" | "success" | "error" | "warning" | "info";
+/** 입력으로는 예전 이름 `brand` 도 받는다 (= `primary`) */
+type RadioTypeInput = RadioType | LegacyStatusType;
 interface RadioProps extends Omit<InputAttributes, "size"> {
     label?: string;
     /**
@@ -14,8 +18,10 @@ interface RadioProps extends Omit<InputAttributes, "size"> {
     value: string | number;
     /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
     validations?: Validation[];
+    /** 컨트롤 크기 */
     size?: RadioSize;
-    type?: RadioType;
+    /** 선택됐을 때의 색 */
+    type?: RadioTypeInput;
 }
 /**
  * 그룹모드 check 조건 : RadioGroup value === radio value
@@ -27,9 +33,12 @@ declare const Radio: {
 };
 
 interface RadioGroupContextProps {
+    /** 이 항목의 값. 그룹의 선택값과 비교된다 */
     value?: string | number;
+    /** 같은 name 끼리 한 그룹이 된다. RadioGroup 안에서는 자동으로 채워진다 */
     name: string;
     onChange: React.ChangeEventHandler<HTMLInputElement>;
+    /** 컨트롤 크기 */
     size?: "sm" | "md" | "lg";
 }
 

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

@@ -1,10 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { I as InputAttributes } from '../../attributes-DJIWir_0.js';
+import { L as LegacyStatusType } from '../../status-njWqQWFV.js';
 import { V as Validation } from '../../validation-Dqo1zqhT.js';
 import React from 'react';
 
 type RadioSize = "sm" | "md" | "lg";
-type RadioType = "brand" | "success" | "error" | "warning" | "info";
+/** Radio 의 상태 색 */
+type RadioType = "primary" | "success" | "error" | "warning" | "info";
+/** 입력으로는 예전 이름 `brand` 도 받는다 (= `primary`) */
+type RadioTypeInput = RadioType | LegacyStatusType;
 interface RadioProps extends Omit<InputAttributes, "size"> {
     label?: string;
     /**
@@ -14,8 +18,10 @@ interface RadioProps extends Omit<InputAttributes, "size"> {
     value: string | number;
     /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
     validations?: Validation[];
+    /** 컨트롤 크기 */
     size?: RadioSize;
-    type?: RadioType;
+    /** 선택됐을 때의 색 */
+    type?: RadioTypeInput;
 }
 /**
  * 그룹모드 check 조건 : RadioGroup value === radio value
@@ -27,9 +33,12 @@ declare const Radio: {
 };
 
 interface RadioGroupContextProps {
+    /** 이 항목의 값. 그룹의 선택값과 비교된다 */
     value?: string | number;
+    /** 같은 name 끼리 한 그룹이 된다. RadioGroup 안에서는 자동으로 채워진다 */
     name: string;
     onChange: React.ChangeEventHandler<HTMLInputElement>;
+    /** 컨트롤 크기 */
     size?: "sm" | "md" | "lg";
 }
 

package/dist/components/Radio/index.js

@@ -1,3 +1,6 @@
+// src/tokens/interface/status.ts
+var normalizeStatus = (value) => value === "brand" ? "primary" : value;
+
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -137,11 +140,16 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { validations, children } = props;
-  if (!validations || validations.length === 0) return /* @__PURE__ */ jsx4(Fragment, { children });
+  const { label, required = false, htmlFor, validations, children } = props;
+  const hasMessages = !!validations && validations.length > 0;
+  if (!label && !hasMessages) return /* @__PURE__ */ jsx4(Fragment, { children });
   return /* @__PURE__ */ jsxs3("div", { className: "lib-xplat-field", children: [
+    label && /* @__PURE__ */ jsxs3("label", { className: "lib-xplat-field-label", htmlFor, children: [
+      label,
+      required && /* @__PURE__ */ jsx4("span", { className: "required", "aria-hidden": "true", children: "*" })
+    ] }),
     children,
-    /* @__PURE__ */ jsx4(FieldMessage, { validations })
+    hasMessages && /* @__PURE__ */ jsx4(FieldMessage, { validations })
   ] });
 };
 Field.displayName = "Field";
@@ -165,10 +173,11 @@ var Radio = (props) => {
     className,
     value,
     size: sizeProp,
-    type = "brand",
+    type = "primary",
     validations,
     ...rest
   } = props;
+  const statusType = normalizeStatus(type);
   const context = useRadioGroupContext();
   const size = sizeProp ?? context?.size ?? "md";
   const isGroup = !!context;
@@ -184,7 +193,7 @@ var Radio = (props) => {
       className: clsx_default(
         "lib-xplat-radio",
         size,
-        type,
+        statusType,
         localChecked ? "checked" : void 0,
         className
       ),