@x-plat/design-system 0.1.3 → 0.1.5

package/dist/components/Toast/index.cjs

@@ -0,0 +1,150 @@
+"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/Toast/index.ts
+var Toast_exports = {};
+__export(Toast_exports, {
+  ToastProvider: () => ToastProvider,
+  useToast: () => useToast
+});
+module.exports = __toCommonJS(Toast_exports);
+
+// src/components/Toast/Toast.tsx
+var import_react = __toESM(require("react"), 1);
+var import_react_dom = require("react-dom");
+
+// 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/Toast/Toast.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ToastContext = import_react.default.createContext(null);
+var useToast = () => {
+  const ctx = import_react.default.useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used within ToastProvider");
+  return ctx;
+};
+var EXIT_DURATION = 300;
+var ToastItemComponent = ({ item, isExiting, onClose }) => {
+  const ref = import_react.default.useRef(null);
+  const [height, setHeight] = import_react.default.useState(void 0);
+  import_react.default.useEffect(() => {
+    if (ref.current && !isExiting) {
+      setHeight(ref.current.offsetHeight);
+    }
+  }, [isExiting]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: clsx_default("lib-xplat-toast-wrapper", { exit: isExiting }),
+      style: {
+        maxHeight: isExiting ? 0 : height ?? "none",
+        marginBottom: isExiting ? 0 : void 0
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          ref,
+          className: clsx_default("lib-xplat-toast", item.type, { exit: isExiting }),
+          role: "alert",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "message", children: item.message }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
+          ]
+        }
+      )
+    }
+  );
+};
+var ToastProvider = ({
+  children,
+  position = "top-right"
+}) => {
+  const [toasts, setToasts] = import_react.default.useState([]);
+  const [removing, setRemoving] = import_react.default.useState(/* @__PURE__ */ new Set());
+  const [mounted, setMounted] = import_react.default.useState(false);
+  import_react.default.useEffect(() => {
+    setMounted(true);
+  }, []);
+  const remove = import_react.default.useCallback((id) => {
+    setRemoving((prev) => new Set(prev).add(id));
+    setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id));
+      setRemoving((prev) => {
+        const next = new Set(prev);
+        next.delete(id);
+        return next;
+      });
+    }, EXIT_DURATION);
+  }, []);
+  const toast = import_react.default.useCallback(
+    (type, message, duration = 3e3) => {
+      const id = `${Date.now()}-${Math.random()}`;
+      setToasts((prev) => [...prev, { id, type, message }]);
+      if (duration > 0) {
+        setTimeout(() => remove(id), duration);
+      }
+    },
+    [remove]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ToastContext.Provider, { value: { toast }, children: [
+    children,
+    mounted && (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx_default("lib-xplat-toast-container", position), children: toasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        ToastItemComponent,
+        {
+          item: t,
+          isExiting: removing.has(t.id),
+          onClose: () => remove(t.id)
+        },
+        t.id
+      )) }),
+      document.body
+    )
+  ] });
+};
+ToastProvider.displayName = "ToastProvider";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ToastProvider,
+  useToast
+});

package/dist/components/Toast/index.css

@@ -0,0 +1,111 @@
+/* src/components/Toast/toast.scss */
+.lib-xplat-toast-container {
+  position: fixed;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  pointer-events: none;
+}
+.lib-xplat-toast-container.top {
+  top: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+.lib-xplat-toast-container.bottom {
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+.lib-xplat-toast-container.top-left {
+  top: 16px;
+  left: 16px;
+  align-items: flex-start;
+}
+.lib-xplat-toast-container.top-right {
+  top: 16px;
+  right: 16px;
+  align-items: flex-end;
+}
+.lib-xplat-toast-container.bottom-left {
+  bottom: 16px;
+  left: 16px;
+  align-items: flex-start;
+}
+.lib-xplat-toast-container.bottom-right {
+  bottom: 16px;
+  right: 16px;
+  align-items: flex-end;
+}
+.lib-xplat-toast-wrapper {
+  overflow: hidden;
+  transition: max-height 0.3s ease, margin-bottom 0.3s ease;
+  margin-bottom: 8px;
+}
+.lib-xplat-toast-wrapper.exit {
+  margin-bottom: 0;
+}
+.lib-xplat-toast {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0.75rem 1rem;
+  border-radius: 0.5rem;
+  font-size: 14px;
+  line-height: 1.5;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  pointer-events: auto;
+  animation: lib-xplat-toast-enter 0.2s ease;
+  min-width: 240px;
+  max-width: 400px;
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+.lib-xplat-toast.exit {
+  opacity: 0;
+  transform: translateX(30px);
+}
+.lib-xplat-toast .message {
+  flex: 1;
+}
+.lib-xplat-toast .close-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 18px;
+  line-height: 1;
+  padding: 0;
+  opacity: 0.6;
+  transition: opacity 0.2s;
+  color: inherit;
+}
+.lib-xplat-toast .close-btn:hover {
+  opacity: 1;
+}
+.lib-xplat-toast.info {
+  background-color: #1999F7;
+  color: #FFFFFF;
+}
+.lib-xplat-toast.success {
+  background-color: #00A34F;
+  color: #FFFFFF;
+}
+.lib-xplat-toast.warning {
+  background-color: #F0B100;
+  color: #FFFFFF;
+}
+.lib-xplat-toast.error {
+  background-color: #F80409;
+  color: #FFFFFF;
+}
+@keyframes lib-xplat-toast-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

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

@@ -0,0 +1,15 @@
+import React from 'react';
+
+type ToastType = "info" | "success" | "warning" | "error";
+type ToastPosition = "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+interface ToastContextValue {
+    toast: (type: ToastType, message: React.ReactNode, duration?: number) => void;
+}
+declare const useToast: () => ToastContextValue;
+interface ToastProviderProps {
+    children: React.ReactNode;
+    position?: ToastPosition;
+}
+declare const ToastProvider: React.FC<ToastProviderProps>;
+
+export { ToastProvider, useToast };

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

@@ -0,0 +1,15 @@
+import React from 'react';
+
+type ToastType = "info" | "success" | "warning" | "error";
+type ToastPosition = "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+interface ToastContextValue {
+    toast: (type: ToastType, message: React.ReactNode, duration?: number) => void;
+}
+declare const useToast: () => ToastContextValue;
+interface ToastProviderProps {
+    children: React.ReactNode;
+    position?: ToastPosition;
+}
+declare const ToastProvider: React.FC<ToastProviderProps>;
+
+export { ToastProvider, useToast };

package/dist/components/Toast/index.js

@@ -0,0 +1,112 @@
+// src/components/Toast/Toast.tsx
+import React from "react";
+import { createPortal } from "react-dom";
+
+// 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/Toast/Toast.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ToastContext = React.createContext(null);
+var useToast = () => {
+  const ctx = React.useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used within ToastProvider");
+  return ctx;
+};
+var EXIT_DURATION = 300;
+var ToastItemComponent = ({ item, isExiting, onClose }) => {
+  const ref = React.useRef(null);
+  const [height, setHeight] = React.useState(void 0);
+  React.useEffect(() => {
+    if (ref.current && !isExiting) {
+      setHeight(ref.current.offsetHeight);
+    }
+  }, [isExiting]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx_default("lib-xplat-toast-wrapper", { exit: isExiting }),
+      style: {
+        maxHeight: isExiting ? 0 : height ?? "none",
+        marginBottom: isExiting ? 0 : void 0
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          className: clsx_default("lib-xplat-toast", item.type, { exit: isExiting }),
+          role: "alert",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "message", children: item.message }),
+            /* @__PURE__ */ jsx("button", { className: "close-btn", onClick: onClose, "aria-label": "\uB2EB\uAE30", children: "\xD7" })
+          ]
+        }
+      )
+    }
+  );
+};
+var ToastProvider = ({
+  children,
+  position = "top-right"
+}) => {
+  const [toasts, setToasts] = React.useState([]);
+  const [removing, setRemoving] = React.useState(/* @__PURE__ */ new Set());
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+  const remove = React.useCallback((id) => {
+    setRemoving((prev) => new Set(prev).add(id));
+    setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id));
+      setRemoving((prev) => {
+        const next = new Set(prev);
+        next.delete(id);
+        return next;
+      });
+    }, EXIT_DURATION);
+  }, []);
+  const toast = React.useCallback(
+    (type, message, duration = 3e3) => {
+      const id = `${Date.now()}-${Math.random()}`;
+      setToasts((prev) => [...prev, { id, type, message }]);
+      if (duration > 0) {
+        setTimeout(() => remove(id), duration);
+      }
+    },
+    [remove]
+  );
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { toast }, children: [
+    children,
+    mounted && createPortal(
+      /* @__PURE__ */ jsx("div", { className: clsx_default("lib-xplat-toast-container", position), children: toasts.map((t) => /* @__PURE__ */ jsx(
+        ToastItemComponent,
+        {
+          item: t,
+          isExiting: removing.has(t.id),
+          onClose: () => remove(t.id)
+        },
+        t.id
+      )) }),
+      document.body
+    )
+  ] });
+};
+ToastProvider.displayName = "ToastProvider";
+export {
+  ToastProvider,
+  useToast
+};

package/dist/components/Tooltip/index.css

@@ -20,6 +20,9 @@
   bottom: 100%;
   transition: opacity 0.12s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
 }
+.lib-xplat-tooltip > .tooltip-wrapper.primary {
+  color: #FFFFFF;
+}
 .lib-xplat-tooltip > .tooltip-wrapper.primary.xplat-red-50 {
   background-color: #FFF0F0;
 }