@x-plat/design-system 0.12.0 → 0.14.0

package/dist/components/Input/index.cjs

@@ -178,11 +178,11 @@ var FieldMessage = (props) => {
 FieldMessage.displayName = "FieldMessage";
 var FieldMessage_default = FieldMessage;
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, 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 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),

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

@@ -23,6 +23,10 @@ interface PasswordInputProps extends Omit<InputAttributes, "size"> {
     validations?: Validation[];
     /** 높이와 글자 크기 */
     size?: InputSize;
+    /** 컨트롤 위에 붙는 라벨. 클릭하면 입력칸에 포커스가 간다 */
+    label?: React.ReactNode;
+    /** 라벨 뒤에 필수 표시(*)를 붙인다 */
+    required?: boolean;
     reg?: RegExp;
 }
 declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -23,6 +23,10 @@ interface PasswordInputProps extends Omit<InputAttributes, "size"> {
     validations?: Validation[];
     /** 높이와 글자 크기 */
     size?: InputSize;
+    /** 컨트롤 위에 붙는 라벨. 클릭하면 입력칸에 포커스가 간다 */
+    label?: React.ReactNode;
+    /** 라벨 뒤에 필수 표시(*)를 붙인다 */
+    required?: boolean;
     reg?: RegExp;
 }
 declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Input/index.js

@@ -141,11 +141,11 @@ var FieldMessage = (props) => {
 FieldMessage.displayName = "FieldMessage";
 var FieldMessage_default = FieldMessage;
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, 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 && /* @__PURE__ */ jsxs3("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ jsx4("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),

package/dist/components/Radio/index.cjs

@@ -177,11 +177,11 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, 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 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),

package/dist/components/Radio/index.js

@@ -140,11 +140,11 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, 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 && /* @__PURE__ */ jsxs3("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ jsx4("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),

package/dist/components/Select/index.cjs

@@ -1200,11 +1200,11 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, validations, children } = props;
   const hasMessages = !!validations && validations.length > 0;
   if (!label && !hasMessages) return /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(import_jsx_runtime295.Fragment, { children });
   return /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("div", { className: "lib-xplat-field", children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("label", { className: "lib-xplat-field-label", htmlFor, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),

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

@@ -34,10 +34,8 @@ interface SelectProps {
     children: SelectItemElement | SelectItemElement[];
     /** 비활성화 상태 */
     disabled?: boolean;
-    /** 에러 상태 */
     /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
     validations?: Validation[];
-    /** 메시지 없이 테두리만 붉게 한다. validations 와 함께 쓰면 둘 중 하나만 참이어도 적용된다 */
     /** 컨트롤 위에 붙는 라벨. 클릭하면 컨트롤에 포커스가 간다 */
     label?: React.ReactNode;
     /** 라벨 뒤에 필수 표시(*)를 붙인다 */
@@ -49,6 +47,7 @@ interface SelectProps {
     searchable?: boolean;
     /** 검색칸 안내 문구 */
     searchPlaceholder?: string;
+    /** 메시지 없이 테두리만 붉게 한다. validations 와 함께 쓰면 둘 중 하나만 참이어도 적용된다 */
     error?: boolean;
     /** 사이즈 */
     size?: SelectSize;

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

@@ -34,10 +34,8 @@ interface SelectProps {
     children: SelectItemElement | SelectItemElement[];
     /** 비활성화 상태 */
     disabled?: boolean;
-    /** 에러 상태 */
     /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
     validations?: Validation[];
-    /** 메시지 없이 테두리만 붉게 한다. validations 와 함께 쓰면 둘 중 하나만 참이어도 적용된다 */
     /** 컨트롤 위에 붙는 라벨. 클릭하면 컨트롤에 포커스가 간다 */
     label?: React.ReactNode;
     /** 라벨 뒤에 필수 표시(*)를 붙인다 */
@@ -49,6 +47,7 @@ interface SelectProps {
     searchable?: boolean;
     /** 검색칸 안내 문구 */
     searchPlaceholder?: string;
+    /** 메시지 없이 테두리만 붉게 한다. validations 와 함께 쓰면 둘 중 하나만 참이어도 적용된다 */
     error?: boolean;
     /** 사이즈 */
     size?: SelectSize;

package/dist/components/Select/index.js

@@ -1163,11 +1163,11 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, validations, children } = props;
   const hasMessages = !!validations && validations.length > 0;
   if (!label && !hasMessages) return /* @__PURE__ */ jsx295(Fragment, { children });
   return /* @__PURE__ */ jsxs189("div", { className: "lib-xplat-field", children: [
-    label && /* @__PURE__ */ jsxs189("label", { className: "lib-xplat-field-label", htmlFor, children: [
+    label && /* @__PURE__ */ jsxs189("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ jsx295("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),

package/dist/components/Switch/index.cjs

@@ -179,11 +179,11 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, 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 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),

package/dist/components/Switch/index.js

@@ -143,11 +143,11 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, 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 && /* @__PURE__ */ jsxs3("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ jsx4("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),

package/dist/components/TextArea/index.cjs

@@ -176,11 +176,11 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, 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 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),

package/dist/components/TextArea/index.js

@@ -140,11 +140,11 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, 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 && /* @__PURE__ */ jsxs3("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ jsx4("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),

package/dist/components/TimePicker/index.cjs

@@ -308,11 +308,11 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, 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 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),

package/dist/components/TimePicker/index.js

@@ -272,11 +272,11 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { label, required = false, htmlFor, validations, children } = props;
+  const { label, required = false, htmlFor, labelId, 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 && /* @__PURE__ */ jsxs3("label", { className: "lib-xplat-field-label", id: labelId, htmlFor, children: [
       label,
       required && /* @__PURE__ */ jsx4("span", { className: "required", "aria-hidden": "true", children: "*" })
     ] }),

package/dist/components/ToggleChip/index.cjs

@@ -0,0 +1,69 @@
+"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/ToggleChip/index.ts
+var ToggleChip_exports = {};
+__export(ToggleChip_exports, {
+  ToggleChip: () => ToggleChip_default
+});
+module.exports = __toCommonJS(ToggleChip_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/ToggleChip/ToggleChip.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ToggleChip = (props) => {
+  const { children, selected = false, onClick, disabled = false, size = "md" } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      type: "button",
+      className: clsx_default(
+        "lib-xplat-chip",
+        "lib-xplat-toggle-chip",
+        size,
+        selected ? "selected" : "unselected"
+      ),
+      "aria-pressed": selected,
+      disabled,
+      onClick,
+      children
+    }
+  );
+};
+ToggleChip.displayName = "ToggleChip";
+var ToggleChip_default = ToggleChip;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ToggleChip
+});

package/dist/components/ToggleChip/index.css

@@ -0,0 +1,102 @@
+@charset "UTF-8";
+
+/* src/components/Chip/chip.scss */
+.lib-xplat-chip {
+  border-radius: var(--spacing-radius-full);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+  transition: background-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+.lib-xplat-chip.sm {
+  padding: 1px var(--spacing-space-2);
+  font-family: var(--semantic-typo-caption-2-r-font);
+  font-size: var(--semantic-typo-caption-2-r-size);
+  line-height: var(--semantic-typo-caption-2-r-lh);
+  font-weight: var(--semantic-typo-caption-2-r-weight);
+  letter-spacing: var(--semantic-typo-caption-2-r-ls);
+}
+.lib-xplat-chip.md {
+  padding: 2px 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-chip.lg {
+  padding: var(--spacing-space-1) 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-chip.primary {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-brand-default);
+}
+.lib-xplat-chip.secondary {
+  color: var(--semantic-surface-brand-default);
+  background-color: var(--semantic-surface-neutral-primary);
+  border: 1px solid var(--semantic-border-primary);
+}
+.lib-xplat-chip.neutral {
+  color: var(--semantic-text-secondary);
+  background-color: var(--semantic-surface-neutral-secondary);
+  border: 1px solid var(--semantic-border-primary);
+}
+.lib-xplat-chip.success {
+  color: var(--semantic-text-success);
+  background-color: var(--semantic-surface-success-subtle);
+}
+.lib-xplat-chip.error {
+  color: var(--semantic-text-error);
+  background-color: var(--semantic-surface-error-subtle);
+}
+.lib-xplat-chip.warning {
+  color: var(--semantic-text-warning);
+  background-color: var(--semantic-surface-warning-subtle);
+}
+.lib-xplat-chip.info {
+  color: var(--semantic-text-info);
+  background-color: var(--semantic-surface-info-subtle);
+}
+
+/* src/components/ToggleChip/togglechip.scss */
+.lib-xplat-toggle-chip {
+  cursor: pointer;
+  font-family: inherit;
+  transition:
+    background-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+    border-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+    color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+.lib-xplat-toggle-chip.unselected {
+  color: var(--semantic-text-secondary);
+  background-color: var(--semantic-surface-neutral-primary);
+  border: 1px solid var(--semantic-border-primary);
+}
+.lib-xplat-toggle-chip.unselected:hover:not(:disabled) {
+  color: var(--semantic-text-primary);
+  background-color: var(--semantic-surface-neutral-secondary);
+}
+.lib-xplat-toggle-chip {
+}
+.lib-xplat-toggle-chip.selected {
+  color: var(--semantic-text-brand-primary);
+  background-color: var(--semantic-surface-brand-subtle);
+  border: 1px solid var(--semantic-border-brand-primary);
+}
+.lib-xplat-toggle-chip.selected:hover:not(:disabled) {
+  background-color: var(--semantic-surface-brand-secondary);
+}
+.lib-xplat-toggle-chip:focus-visible {
+  outline: 2px solid var(--semantic-interaction-focus-ring);
+  outline-offset: 2px;
+}
+.lib-xplat-toggle-chip:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}

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

@@ -0,0 +1,37 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type ToggleChipSize = "sm" | "md" | "lg";
+interface ToggleChipProps {
+    children: React.ReactNode;
+    /** 켜진 상태인가. 색과 `aria-pressed` 가 함께 바뀐다 */
+    selected?: boolean;
+    /** 누를 때. 켜고 끄는 판단은 쓰는 쪽이 한다 */
+    onClick?: () => void;
+    /** 흐리게 하고 못 누르게 한다 */
+    disabled?: boolean;
+    /** 칩 크기. `Chip` 과 같은 눈금이다 */
+    size?: ToggleChipSize;
+}
+/**
+ * 눌러서 고르는 칩.
+ *
+ * `Chip` 은 표시 전용이고 `Tag` 의 클릭은 **삭제**다. 이것만이 **켜짐/꺼짐**을
+ * 다룬다. 여러 개 고르기와 한 개 고르기 양쪽에 쓴다 — 몇 개까지 켤 수 있는지,
+ * 마지막 하나를 뗄 수 있는지 같은 규칙은 쓰는 쪽 사정이라 여기서 정하지 않는다.
+ *
+ * 모양은 `.lib-xplat-chip` 을 그대로 쓴다. 알약 반지름·크기 눈금·글자 크기가
+ * `Chip` 과 **한 곳에서** 정의되므로 둘이 따로 놀 수 없다. 같은 화면에 나란히
+ * 놓이는 일이 많아서 이게 중요하다.
+ *
+ * @example
+ * <ToggleChip selected={picked.has("ko")} onClick={() => toggle("ko")}>
+ *   한국어
+ * </ToggleChip>
+ */
+declare const ToggleChip: {
+    (props: ToggleChipProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { ToggleChip };

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

@@ -0,0 +1,37 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type ToggleChipSize = "sm" | "md" | "lg";
+interface ToggleChipProps {
+    children: React.ReactNode;
+    /** 켜진 상태인가. 색과 `aria-pressed` 가 함께 바뀐다 */
+    selected?: boolean;
+    /** 누를 때. 켜고 끄는 판단은 쓰는 쪽이 한다 */
+    onClick?: () => void;
+    /** 흐리게 하고 못 누르게 한다 */
+    disabled?: boolean;
+    /** 칩 크기. `Chip` 과 같은 눈금이다 */
+    size?: ToggleChipSize;
+}
+/**
+ * 눌러서 고르는 칩.
+ *
+ * `Chip` 은 표시 전용이고 `Tag` 의 클릭은 **삭제**다. 이것만이 **켜짐/꺼짐**을
+ * 다룬다. 여러 개 고르기와 한 개 고르기 양쪽에 쓴다 — 몇 개까지 켤 수 있는지,
+ * 마지막 하나를 뗄 수 있는지 같은 규칙은 쓰는 쪽 사정이라 여기서 정하지 않는다.
+ *
+ * 모양은 `.lib-xplat-chip` 을 그대로 쓴다. 알약 반지름·크기 눈금·글자 크기가
+ * `Chip` 과 **한 곳에서** 정의되므로 둘이 따로 놀 수 없다. 같은 화면에 나란히
+ * 놓이는 일이 많아서 이게 중요하다.
+ *
+ * @example
+ * <ToggleChip selected={picked.has("ko")} onClick={() => toggle("ko")}>
+ *   한국어
+ * </ToggleChip>
+ */
+declare const ToggleChip: {
+    (props: ToggleChipProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { ToggleChip };

package/dist/components/ToggleChip/index.js

@@ -0,0 +1,42 @@
+// ../../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/ToggleChip/ToggleChip.tsx
+import { jsx } from "react/jsx-runtime";
+var ToggleChip = (props) => {
+  const { children, selected = false, onClick, disabled = false, size = "md" } = props;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: clsx_default(
+        "lib-xplat-chip",
+        "lib-xplat-toggle-chip",
+        size,
+        selected ? "selected" : "unselected"
+      ),
+      "aria-pressed": selected,
+      disabled,
+      onClick,
+      children
+    }
+  );
+};
+ToggleChip.displayName = "ToggleChip";
+var ToggleChip_default = ToggleChip;
+export {
+  ToggleChip_default as ToggleChip
+};