@x-plat/design-system 0.1.2 → 0.1.3

package/dist/components/Accordion/index.cjs

@@ -0,0 +1,131 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Accordion/index.ts
+var Accordion_exports = {};
+__export(Accordion_exports, {
+  Accordion: () => Accordion_default
+});
+module.exports = __toCommonJS(Accordion_exports);
+
+// src/components/Accordion/Accordion.tsx
+var import_react = __toESM(require("react"), 1);
+
+// 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/Accordion/Accordion.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var AccordionItem = ({ item, isOpen, onToggle }) => {
+  const bodyRef = import_react.default.useRef(null);
+  const [height, setHeight] = import_react.default.useState(0);
+  import_react.default.useEffect(() => {
+    if (bodyRef.current) {
+      setHeight(bodyRef.current.scrollHeight);
+    }
+  }, [isOpen, item.content]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: clsx_default("accordion-item", { open: isOpen }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "button",
+      {
+        className: "accordion-header",
+        onClick: onToggle,
+        "aria-expanded": isOpen,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "title", children: item.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "svg",
+            {
+              className: "chevron",
+              viewBox: "0 0 24 24",
+              fill: "currentColor",
+              width: "20",
+              height: "20",
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z" })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref: bodyRef,
+        className: "accordion-body",
+        style: { maxHeight: isOpen ? height : 0 },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "accordion-content", children: item.content })
+      }
+    )
+  ] });
+};
+var Accordion = (props) => {
+  const { items, multiple = false, defaultActiveKeys = [], className } = props;
+  const [activeKeys, setActiveKeys] = import_react.default.useState(
+    new Set(defaultActiveKeys)
+  );
+  const toggle = (key) => {
+    setActiveKeys((prev) => {
+      const next = new Set(multiple ? prev : []);
+      if (prev.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx_default("lib-xplat-accordion", className), children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    AccordionItem,
+    {
+      item,
+      isOpen: activeKeys.has(item.key),
+      onToggle: () => toggle(item.key)
+    },
+    item.key
+  )) });
+};
+Accordion.displayName = "Accordion";
+var Accordion_default = Accordion;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Accordion
+});

package/dist/components/Accordion/index.css

@@ -0,0 +1,51 @@
+/* src/components/Accordion/accordion.scss */
+.lib-xplat-accordion {
+  border: 1px solid #E5E5E5;
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+.lib-xplat-accordion .accordion-item {
+  border-bottom: 1px solid #E5E5E5;
+}
+.lib-xplat-accordion .accordion-item:last-child {
+  border-bottom: none;
+}
+.lib-xplat-accordion .accordion-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0.875rem 1rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  color: #171717;
+  text-align: left;
+  transition: background-color 0.2s;
+}
+.lib-xplat-accordion .accordion-header:hover {
+  background-color: #FAFAFA;
+}
+.lib-xplat-accordion .accordion-header .chevron {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  transition: transform 0.25s ease;
+  color: #737373;
+}
+.lib-xplat-accordion .accordion-body {
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height 0.25s ease;
+}
+.lib-xplat-accordion .accordion-content {
+  padding: 0 1rem 0.875rem;
+  font-size: 14px;
+  color: #525252;
+  line-height: 1.6;
+}
+.lib-xplat-accordion .accordion-item.open .chevron {
+  transform: rotate(180deg);
+}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+
+interface AccordionItemData {
+    key: string;
+    title: React.ReactNode;
+    content: React.ReactNode;
+}
+interface AccordionProps {
+    items: AccordionItemData[];
+    multiple?: boolean;
+    defaultActiveKeys?: string[];
+    className?: string;
+}
+declare const Accordion: React.FC<AccordionProps>;
+
+export { Accordion };

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

@@ -0,0 +1,16 @@
+import React from 'react';
+
+interface AccordionItemData {
+    key: string;
+    title: React.ReactNode;
+    content: React.ReactNode;
+}
+interface AccordionProps {
+    items: AccordionItemData[];
+    multiple?: boolean;
+    defaultActiveKeys?: string[];
+    className?: string;
+}
+declare const Accordion: React.FC<AccordionProps>;
+
+export { Accordion };

package/dist/components/Accordion/index.js

@@ -0,0 +1,94 @@
+// src/components/Accordion/Accordion.tsx
+import React from "react";
+
+// 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/Accordion/Accordion.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var AccordionItem = ({ item, isOpen, onToggle }) => {
+  const bodyRef = React.useRef(null);
+  const [height, setHeight] = React.useState(0);
+  React.useEffect(() => {
+    if (bodyRef.current) {
+      setHeight(bodyRef.current.scrollHeight);
+    }
+  }, [isOpen, item.content]);
+  return /* @__PURE__ */ jsxs("div", { className: clsx_default("accordion-item", { open: isOpen }), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: "accordion-header",
+        onClick: onToggle,
+        "aria-expanded": isOpen,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "title", children: item.title }),
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "chevron",
+              viewBox: "0 0 24 24",
+              fill: "currentColor",
+              width: "20",
+              height: "20",
+              children: /* @__PURE__ */ jsx("path", { d: "M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z" })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: bodyRef,
+        className: "accordion-body",
+        style: { maxHeight: isOpen ? height : 0 },
+        children: /* @__PURE__ */ jsx("div", { className: "accordion-content", children: item.content })
+      }
+    )
+  ] });
+};
+var Accordion = (props) => {
+  const { items, multiple = false, defaultActiveKeys = [], className } = props;
+  const [activeKeys, setActiveKeys] = React.useState(
+    new Set(defaultActiveKeys)
+  );
+  const toggle = (key) => {
+    setActiveKeys((prev) => {
+      const next = new Set(multiple ? prev : []);
+      if (prev.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  };
+  return /* @__PURE__ */ jsx("div", { className: clsx_default("lib-xplat-accordion", className), children: items.map((item) => /* @__PURE__ */ jsx(
+    AccordionItem,
+    {
+      item,
+      isOpen: activeKeys.has(item.key),
+      onToggle: () => toggle(item.key)
+    },
+    item.key
+  )) });
+};
+Accordion.displayName = "Accordion";
+var Accordion_default = Accordion;
+export {
+  Accordion_default as Accordion
+};

package/dist/components/Alert/index.cjs

@@ -0,0 +1,72 @@
+"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/Alert/index.ts
+var Alert_exports = {};
+__export(Alert_exports, {
+  Alert: () => Alert_default
+});
+module.exports = __toCommonJS(Alert_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/Alert/Alert.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Alert = (props) => {
+  const { type = "info", children, onClose, className } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: clsx_default("lib-xplat-alert", type, className),
+      role: "alert",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "content", children }),
+        onClose && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            className: "close-btn",
+            onClick: onClose,
+            "aria-label": "\uB2EB\uAE30",
+            children: "\xD7"
+          }
+        )
+      ]
+    }
+  );
+};
+Alert.displayName = "Alert";
+var Alert_default = Alert;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Alert
+});

package/dist/components/Alert/index.css

@@ -0,0 +1,60 @@
+/* src/components/Alert/alert.scss */
+.lib-xplat-alert {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-radius: 0.5rem;
+  font-size: 14px;
+  line-height: 1.5;
+  border: 1px solid;
+}
+.lib-xplat-alert .content {
+  flex: 1;
+}
+.lib-xplat-alert .close-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 18px;
+  line-height: 1;
+  margin-left: 0.5rem;
+  padding: 0;
+  opacity: 0.6;
+  transition: opacity 0.2s;
+}
+.lib-xplat-alert .close-btn:hover {
+  opacity: 1;
+}
+.lib-xplat-alert.info {
+  background-color: #EEFAFF;
+  border-color: #BBEDFF;
+  color: #1280E3;
+}
+.lib-xplat-alert.info .close-btn {
+  color: #1280E3;
+}
+.lib-xplat-alert.success {
+  background-color: #E5F6EA;
+  border-color: #98D8AC;
+  color: #009143;
+}
+.lib-xplat-alert.success .close-btn {
+  color: #009143;
+}
+.lib-xplat-alert.warning {
+  background-color: #FFFDE7;
+  border-color: #FFF186;
+  color: #A66002;
+}
+.lib-xplat-alert.warning .close-btn {
+  color: #A66002;
+}
+.lib-xplat-alert.error {
+  background-color: #FFF0F0;
+  border-color: #FFC1C2;
+  color: #D40105;
+}
+.lib-xplat-alert.error .close-btn {
+  color: #D40105;
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+
+type AlertType = "info" | "success" | "warning" | "error";
+interface AlertProps {
+    type?: AlertType;
+    children: React.ReactNode;
+    onClose?: () => void;
+    className?: string;
+}
+declare const Alert: React.FC<AlertProps>;
+
+export { Alert };

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

@@ -0,0 +1,12 @@
+import React from 'react';
+
+type AlertType = "info" | "success" | "warning" | "error";
+interface AlertProps {
+    type?: AlertType;
+    children: React.ReactNode;
+    onClose?: () => void;
+    className?: string;
+}
+declare const Alert: React.FC<AlertProps>;
+
+export { Alert };

package/dist/components/Alert/index.js

@@ -0,0 +1,45 @@
+// 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/Alert/Alert.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Alert = (props) => {
+  const { type = "info", children, onClose, className } = props;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx_default("lib-xplat-alert", type, className),
+      role: "alert",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "content", children }),
+        onClose && /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "close-btn",
+            onClick: onClose,
+            "aria-label": "\uB2EB\uAE30",
+            children: "\xD7"
+          }
+        )
+      ]
+    }
+  );
+};
+Alert.displayName = "Alert";
+var Alert_default = Alert;
+export {
+  Alert_default as Alert
+};