@x-plat/design-system 0.1.3 → 0.1.4

package/dist/components/Dropdown/index.cjs

@@ -0,0 +1,185 @@
+"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/Dropdown/index.ts
+var Dropdown_exports = {};
+__export(Dropdown_exports, {
+  Dropdown: () => Dropdown_default
+});
+module.exports = __toCommonJS(Dropdown_exports);
+
+// src/components/Dropdown/Dropdown.tsx
+var import_react3 = __toESM(require("react"), 1);
+
+// src/tokens/hooks/useAutoPosition.ts
+var import_react = __toESM(require("react"), 1);
+var useAutoPosition = (triggerRef, popRef, enabled = true) => {
+  const [position, setPosition] = import_react.default.useState({
+    position: {},
+    direction: "bottom"
+  });
+  const calculatePosition = import_react.default.useCallback(() => {
+    if (!triggerRef.current || !popRef.current) return;
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const popRect = popRef.current.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const position2 = {};
+    let direction = "bottom";
+    if (triggerRect.bottom + popRect.height > viewportHeight) {
+      direction = "top";
+    }
+    if (triggerRect.left + popRect.width > viewportWidth) {
+      position2["right"] = 10;
+    }
+    if (triggerRect.left < 0) {
+      position2["left"] = 10;
+    }
+    setPosition({
+      position: position2,
+      direction
+    });
+  }, [triggerRef, popRef]);
+  import_react.default.useEffect(() => {
+    calculatePosition();
+    window.addEventListener("resize", calculatePosition);
+    return () => window.removeEventListener("resize", calculatePosition);
+  }, [calculatePosition, enabled]);
+  return position;
+};
+var useAutoPosition_default = useAutoPosition;
+
+// src/tokens/hooks/useClickOutside.ts
+var import_react2 = __toESM(require("react"), 1);
+var useClickOutside = (refs, handler, enabled = true) => {
+  import_react2.default.useEffect(() => {
+    if (!enabled) return;
+    const refArray = Array.isArray(refs) ? refs : [refs];
+    const listener = (event) => {
+      const target = event.target;
+      const isInside = refArray.some(
+        (ref) => ref.current && ref.current.contains(target)
+      );
+      if (!isInside) {
+        handler();
+      }
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [refs, handler, enabled]);
+};
+var useClickOutside_default = useClickOutside;
+
+// 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/Dropdown/Dropdown.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Dropdown = (props) => {
+  const { items, children, className } = props;
+  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, isOpen);
+  useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false));
+  import_react3.default.useEffect(() => {
+    if (isOpen) {
+      setMounted(true);
+      const t2 = setTimeout(() => setVisible(true), 1);
+      return () => clearTimeout(t2);
+    }
+    setVisible(false);
+    const t = setTimeout(() => setMounted(false), 150);
+    return () => clearTimeout(t);
+  }, [isOpen]);
+  const handleItemClick = (item) => {
+    if (item.disabled) return;
+    item.onClick?.();
+    setIsOpen(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: clsx_default("lib-xplat-dropdown", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref: triggerRef,
+        className: "dropdown-trigger",
+        onClick: () => setIsOpen((prev) => !prev),
+        children
+      }
+    ),
+    mounted && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref: menuRef,
+        className: clsx_default("dropdown-menu", direction, { visible }),
+        style: { top: position.top, left: position.left },
+        role: "menu",
+        children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            className: clsx_default("dropdown-item", {
+              disabled: item.disabled,
+              danger: item.danger
+            }),
+            role: "menuitem",
+            disabled: item.disabled,
+            onClick: () => handleItemClick(item),
+            children: item.label
+          },
+          item.key
+        ))
+      }
+    )
+  ] });
+};
+Dropdown.displayName = "Dropdown";
+var Dropdown_default = Dropdown;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Dropdown
+});

package/dist/components/Dropdown/index.css

@@ -0,0 +1,54 @@
+/* src/components/Dropdown/dropdown.scss */
+.lib-xplat-dropdown {
+  position: relative;
+  display: inline-flex;
+}
+.lib-xplat-dropdown .dropdown-trigger {
+  cursor: pointer;
+}
+.lib-xplat-dropdown .dropdown-menu {
+  position: absolute;
+  z-index: 100;
+  min-width: 160px;
+  background: #FFFFFF;
+  border: 1px solid #E5E5E5;
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  padding: 4px 0;
+  opacity: 0;
+  transform: translateY(-4px);
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+.lib-xplat-dropdown .dropdown-menu.bottom {
+  transform: translateY(4px);
+}
+.lib-xplat-dropdown .dropdown-menu.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+.lib-xplat-dropdown .dropdown-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 0.5rem 0.875rem;
+  border: none;
+  background: none;
+  font-size: 14px;
+  color: #262626;
+  cursor: pointer;
+  text-align: left;
+  transition: background-color 0.15s;
+}
+.lib-xplat-dropdown .dropdown-item:hover:not(:disabled) {
+  background-color: #FAFAFA;
+}
+.lib-xplat-dropdown .dropdown-item.danger {
+  color: #F80409;
+}
+.lib-xplat-dropdown .dropdown-item.danger:hover:not(:disabled) {
+  background-color: #FFF0F0;
+}
+.lib-xplat-dropdown .dropdown-item:disabled {
+  color: #A1A1A1;
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,17 @@
+import React from 'react';
+
+interface DropdownItem {
+    key: string;
+    label: React.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    danger?: boolean;
+}
+interface DropdownProps {
+    items: DropdownItem[];
+    children: React.ReactNode;
+    className?: string;
+}
+declare const Dropdown: React.FC<DropdownProps>;
+
+export { Dropdown };

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

@@ -0,0 +1,17 @@
+import React from 'react';
+
+interface DropdownItem {
+    key: string;
+    label: React.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    danger?: boolean;
+}
+interface DropdownProps {
+    items: DropdownItem[];
+    children: React.ReactNode;
+    className?: string;
+}
+declare const Dropdown: React.FC<DropdownProps>;
+
+export { Dropdown };

package/dist/components/Dropdown/index.js

@@ -0,0 +1,148 @@
+// src/components/Dropdown/Dropdown.tsx
+import React3 from "react";
+
+// src/tokens/hooks/useAutoPosition.ts
+import React from "react";
+var useAutoPosition = (triggerRef, popRef, enabled = true) => {
+  const [position, setPosition] = React.useState({
+    position: {},
+    direction: "bottom"
+  });
+  const calculatePosition = React.useCallback(() => {
+    if (!triggerRef.current || !popRef.current) return;
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const popRect = popRef.current.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const position2 = {};
+    let direction = "bottom";
+    if (triggerRect.bottom + popRect.height > viewportHeight) {
+      direction = "top";
+    }
+    if (triggerRect.left + popRect.width > viewportWidth) {
+      position2["right"] = 10;
+    }
+    if (triggerRect.left < 0) {
+      position2["left"] = 10;
+    }
+    setPosition({
+      position: position2,
+      direction
+    });
+  }, [triggerRef, popRef]);
+  React.useEffect(() => {
+    calculatePosition();
+    window.addEventListener("resize", calculatePosition);
+    return () => window.removeEventListener("resize", calculatePosition);
+  }, [calculatePosition, enabled]);
+  return position;
+};
+var useAutoPosition_default = useAutoPosition;
+
+// src/tokens/hooks/useClickOutside.ts
+import React2 from "react";
+var useClickOutside = (refs, handler, enabled = true) => {
+  React2.useEffect(() => {
+    if (!enabled) return;
+    const refArray = Array.isArray(refs) ? refs : [refs];
+    const listener = (event) => {
+      const target = event.target;
+      const isInside = refArray.some(
+        (ref) => ref.current && ref.current.contains(target)
+      );
+      if (!isInside) {
+        handler();
+      }
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [refs, handler, enabled]);
+};
+var useClickOutside_default = useClickOutside;
+
+// 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/Dropdown/Dropdown.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Dropdown = (props) => {
+  const { items, children, className } = props;
+  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, isOpen);
+  useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false));
+  React3.useEffect(() => {
+    if (isOpen) {
+      setMounted(true);
+      const t2 = setTimeout(() => setVisible(true), 1);
+      return () => clearTimeout(t2);
+    }
+    setVisible(false);
+    const t = setTimeout(() => setMounted(false), 150);
+    return () => clearTimeout(t);
+  }, [isOpen]);
+  const handleItemClick = (item) => {
+    if (item.disabled) return;
+    item.onClick?.();
+    setIsOpen(false);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: clsx_default("lib-xplat-dropdown", className), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: triggerRef,
+        className: "dropdown-trigger",
+        onClick: () => setIsOpen((prev) => !prev),
+        children
+      }
+    ),
+    mounted && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: menuRef,
+        className: clsx_default("dropdown-menu", direction, { visible }),
+        style: { top: position.top, left: position.left },
+        role: "menu",
+        children: items.map((item) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: clsx_default("dropdown-item", {
+              disabled: item.disabled,
+              danger: item.danger
+            }),
+            role: "menuitem",
+            disabled: item.disabled,
+            onClick: () => handleItemClick(item),
+            children: item.label
+          },
+          item.key
+        ))
+      }
+    )
+  ] });
+};
+Dropdown.displayName = "Dropdown";
+var Dropdown_default = Dropdown;
+export {
+  Dropdown_default as Dropdown
+};

package/dist/components/EmptyState/index.cjs

@@ -0,0 +1,60 @@
+"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/EmptyState/index.ts
+var EmptyState_exports = {};
+__export(EmptyState_exports, {
+  EmptyState: () => EmptyState_default
+});
+module.exports = __toCommonJS(EmptyState_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/EmptyState/EmptyState.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var EmptyState = (props) => {
+  const { icon, title = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4", description, action, className } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: clsx_default("lib-xplat-empty-state", className), children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "empty-icon", children: icon }),
+    !icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "empty-icon", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "empty-title", children: title }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "empty-description", children: description }),
+    action && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "empty-action", children: action })
+  ] });
+};
+EmptyState.displayName = "EmptyState";
+var EmptyState_default = EmptyState;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EmptyState
+});

package/dist/components/EmptyState/index.css

@@ -0,0 +1,32 @@
+/* src/components/EmptyState/emptystate.scss */
+.lib-xplat-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem 1.5rem;
+  text-align: center;
+}
+.lib-xplat-empty-state .empty-icon {
+  color: #D4D4D4;
+  margin-bottom: 1rem;
+}
+.lib-xplat-empty-state .empty-icon svg {
+  width: 48px;
+  height: 48px;
+}
+.lib-xplat-empty-state .empty-title {
+  font-size: 15px;
+  font-weight: 500;
+  color: #525252;
+  margin: 0;
+}
+.lib-xplat-empty-state .empty-description {
+  font-size: 13px;
+  color: #A1A1A1;
+  margin: 0.375rem 0 0;
+  max-width: 320px;
+}
+.lib-xplat-empty-state .empty-action {
+  margin-top: 1.25rem;
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+
+interface EmptyStateProps {
+    icon?: React.ReactNode;
+    title?: string;
+    description?: string;
+    action?: React.ReactNode;
+    className?: string;
+}
+declare const EmptyState: React.FC<EmptyStateProps>;
+
+export { EmptyState };

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

@@ -0,0 +1,12 @@
+import React from 'react';
+
+interface EmptyStateProps {
+    icon?: React.ReactNode;
+    title?: string;
+    description?: string;
+    action?: React.ReactNode;
+    className?: string;
+}
+declare const EmptyState: React.FC<EmptyStateProps>;
+
+export { EmptyState };

package/dist/components/EmptyState/index.js

@@ -0,0 +1,33 @@
+// 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/EmptyState/EmptyState.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var EmptyState = (props) => {
+  const { icon, title = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4", description, action, className } = props;
+  return /* @__PURE__ */ jsxs("div", { className: clsx_default("lib-xplat-empty-state", className), children: [
+    icon && /* @__PURE__ */ jsx("div", { className: "empty-icon", children: icon }),
+    !icon && /* @__PURE__ */ jsx("div", { className: "empty-icon", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" }) }) }),
+    /* @__PURE__ */ jsx("p", { className: "empty-title", children: title }),
+    description && /* @__PURE__ */ jsx("p", { className: "empty-description", children: description }),
+    action && /* @__PURE__ */ jsx("div", { className: "empty-action", children: action })
+  ] });
+};
+EmptyState.displayName = "EmptyState";
+var EmptyState_default = EmptyState;
+export {
+  EmptyState_default as EmptyState
+};