@ryanhe919/lumen-ui 0.2.1 → 0.3.0

package/dist/useMessage-BBxUPe8b.cjs

@@ -0,0 +1,242 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const ICONS = {
+  success: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20Z",
+        fill: "currentColor",
+        opacity: "0.15"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M16.7 9.3a1 1 0 0 0-1.4-1.4L11 12.2 8.7 9.9a1 1 0 1 0-1.4 1.4l3 3a1 1 0 0 0 1.4 0l5-5Z",
+        fill: "currentColor"
+      }
+    )
+  ] }),
+  error: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10Z",
+        fill: "currentColor",
+        opacity: "0.15"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M15.5 8.5l-7 7M8.5 8.5l7 7",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round"
+      }
+    )
+  ] }),
+  warning: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M12.9 4.5c-.4-.7-1.4-.7-1.8 0L3.5 18a1 1 0 0 0 .9 1.5h15.2a1 1 0 0 0 .9-1.5l-7.6-13.5Z",
+        fill: "currentColor",
+        opacity: "0.15"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 9v5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "16.5", r: "1", fill: "currentColor" })
+  ] }),
+  info: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z",
+        fill: "currentColor",
+        opacity: "0.15"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M12 10.5v5M12 7.5h.01",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round"
+      }
+    )
+  ] })
+};
+const useTone = (type) => {
+  switch (type) {
+    case "success":
+      return {
+        accent: "var(--lm-success-500)",
+        background: "color-mix(in srgb, var(--lm-success-100) 60%, transparent)",
+        text: "var(--lm-success-700)",
+        title: "var(--lm-success-800)"
+      };
+    case "error":
+      return {
+        accent: "var(--lm-error-500)",
+        background: "color-mix(in srgb, var(--lm-error-100) 60%, transparent)",
+        text: "var(--lm-error-700)",
+        title: "var(--lm-error-800)"
+      };
+    case "warning":
+      return {
+        accent: "var(--lm-warning-500)",
+        background: "color-mix(in srgb, var(--lm-warning-100) 60%, transparent)",
+        text: "var(--lm-warning-700)",
+        title: "var(--lm-warning-800)"
+      };
+    case "info":
+    default:
+      return {
+        accent: "var(--lm-primary-500)",
+        background: "color-mix(in srgb, var(--lm-primary-100) 60%, transparent)",
+        text: "var(--lm-primary-700)",
+        title: "var(--lm-primary-800)"
+      };
+  }
+};
+const LMMessage = ({ id, type, title, content, duration = 2e3, onClose }) => {
+  const tone = useTone(type);
+  React.useEffect(() => {
+    if (duration <= 0) return;
+    const timer = setTimeout(() => onClose(id), duration);
+    return () => clearTimeout(timer);
+  }, [id, duration, onClose]);
+  const icon = React.useMemo(() => ICONS[type], [type]);
+  const ariaRole = "status";
+  const ariaLabel = React.useMemo(() => {
+    switch (type) {
+      case "success":
+        return "Success message";
+      case "error":
+        return "Error message";
+      case "warning":
+        return "Warning message";
+      default:
+        return "Information message";
+    }
+  }, [type]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-sm mx-auto will-change-transform", role: ariaRole, "aria-label": ariaLabel, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "rounded-3xl shadow-lg p-5 mb-3 backdrop-blur-md border transition-all duration-300 ease-out",
+      style: {
+        backgroundColor: tone.background,
+        borderColor: "var(--lm-border-light)",
+        boxShadow: "var(--lm-shadow-lg)"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "mt-0.5 flex h-10 w-10 items-center justify-center rounded-2xl",
+            style: {
+              color: tone.accent,
+              backgroundColor: "color-mix(in srgb, currentColor 12%, transparent)"
+            },
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-semibold mb-2 truncate", style: { color: tone.title }, children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm leading-relaxed wrap-break-word", style: { color: tone.text }, children: content })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => onClose(id),
+            "aria-label": "Close message",
+            className: "shrink-0 p-2 rounded-xl transition-all duration-200 hover:bg-black/5 active:bg-black/10",
+            style: { color: tone.accent },
+            children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                d: "M6 6l12 12M18 6L6 18",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round"
+              }
+            ) })
+          }
+        )
+      ] })
+    }
+  ) });
+};
+const LMMessageContainer = ({
+  messages,
+  onClose,
+  position = "top-right"
+}) => {
+  if (messages.length === 0) return null;
+  const positionClasses = {
+    "top-right": "top-20 right-6",
+    "top-left": "top-20 left-6",
+    "top-center": "top-20 left-1/2 -translate-x-1/2",
+    "bottom-right": "bottom-6 right-6",
+    "bottom-left": "bottom-6 left-6",
+    "bottom-center": "bottom-6 left-1/2 -translate-x-1/2"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `fixed z-50 space-y-3 ${positionClasses[position]}`, children: messages.map((message) => /* @__PURE__ */ jsxRuntime.jsx(LMMessage, { ...message, onClose }, message.id)) });
+};
+let messageIdCounter = 0;
+const useMessage = () => {
+  const [messages, setMessages] = React.useState([]);
+  const addMessage = React.useCallback((message) => {
+    const id = `lm-message-${++messageIdCounter}`;
+    setMessages((prev) => [...prev, { ...message, id }]);
+    return id;
+  }, []);
+  const removeMessage = React.useCallback((id) => {
+    setMessages((prev) => prev.filter((m) => m.id !== id));
+  }, []);
+  const success = React.useCallback(
+    (content, title, duration) => {
+      return addMessage({ type: "success", content, title, duration });
+    },
+    [addMessage]
+  );
+  const error = React.useCallback(
+    (content, title, duration) => {
+      return addMessage({ type: "error", content, title, duration });
+    },
+    [addMessage]
+  );
+  const warning = React.useCallback(
+    (content, title, duration) => {
+      return addMessage({ type: "warning", content, title, duration });
+    },
+    [addMessage]
+  );
+  const info = React.useCallback(
+    (content, title, duration) => {
+      return addMessage({ type: "info", content, title, duration });
+    },
+    [addMessage]
+  );
+  const clearAll = React.useCallback(() => {
+    setMessages([]);
+  }, []);
+  return {
+    messages,
+    addMessage,
+    removeMessage,
+    success,
+    error,
+    warning,
+    info,
+    clearAll
+  };
+};
+exports.LMMessage = LMMessage;
+exports.LMMessageContainer = LMMessageContainer;
+exports.useMessage = useMessage;
+//# sourceMappingURL=useMessage-BBxUPe8b.cjs.map

package/dist/useMessage-BBxUPe8b.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMessage-BBxUPe8b.cjs","sources":["../src/components/Feedback/LMMessage/LMMessage.tsx","../src/hooks/useMessage.ts"],"sourcesContent":["import React, { useEffect, useMemo } from 'react'\n\nexport type LMMessageType = 'success' | 'error' | 'warning' | 'info'\n\nexport interface LMMessageItem {\n  id: string\n  type: LMMessageType\n  title?: string\n  content: string\n  duration?: number\n}\n\nexport interface LMMessageProps {\n  id: string\n  type: LMMessageType\n  title?: string\n  content: string\n  /** Auto close duration in ms, 0 means no auto close */\n  duration?: number\n  onClose: (id: string) => void\n}\n\ninterface Tone {\n  accent: string\n  background: string\n  text: string\n  title: string\n}\n\nconst ICONS: Record<LMMessageType, React.ReactNode> = {\n  success: (\n    <svg viewBox=\"0 0 24 24\" className=\"h-5 w-5\" aria-hidden=\"true\">\n      <path\n        d=\"M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20Z\"\n        fill=\"currentColor\"\n        opacity=\"0.15\"\n      />\n      <path\n        d=\"M16.7 9.3a1 1 0 0 0-1.4-1.4L11 12.2 8.7 9.9a1 1 0 1 0-1.4 1.4l3 3a1 1 0 0 0 1.4 0l5-5Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  ),\n  error: (\n    <svg viewBox=\"0 0 24 24\" className=\"h-5 w-5\" aria-hidden=\"true\">\n      <path\n        d=\"M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10Z\"\n        fill=\"currentColor\"\n        opacity=\"0.15\"\n      />\n      <path\n        d=\"M15.5 8.5l-7 7M8.5 8.5l7 7\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.8\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  ),\n  warning: (\n    <svg viewBox=\"0 0 24 24\" className=\"h-5 w-5\" aria-hidden=\"true\">\n      <path\n        d=\"M12.9 4.5c-.4-.7-1.4-.7-1.8 0L3.5 18a1 1 0 0 0 .9 1.5h15.2a1 1 0 0 0 .9-1.5l-7.6-13.5Z\"\n        fill=\"currentColor\"\n        opacity=\"0.15\"\n      />\n      <path d=\"M12 9v5\" stroke=\"currentColor\" strokeWidth=\"1.8\" strokeLinecap=\"round\" />\n      <circle cx=\"12\" cy=\"16.5\" r=\"1\" fill=\"currentColor\" />\n    </svg>\n  ),\n  info: (\n    <svg viewBox=\"0 0 24 24\" className=\"h-5 w-5\" aria-hidden=\"true\">\n      <path\n        d=\"M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z\"\n        fill=\"currentColor\"\n        opacity=\"0.15\"\n      />\n      <path\n        d=\"M12 10.5v5M12 7.5h.01\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.8\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  ),\n}\n\nconst useTone = (type: LMMessageType): Tone => {\n  switch (type) {\n    case 'success':\n      return {\n        accent: 'var(--lm-success-500)',\n        background: 'color-mix(in srgb, var(--lm-success-100) 60%, transparent)',\n        text: 'var(--lm-success-700)',\n        title: 'var(--lm-success-800)',\n      }\n    case 'error':\n      return {\n        accent: 'var(--lm-error-500)',\n        background: 'color-mix(in srgb, var(--lm-error-100) 60%, transparent)',\n        text: 'var(--lm-error-700)',\n        title: 'var(--lm-error-800)',\n      }\n    case 'warning':\n      return {\n        accent: 'var(--lm-warning-500)',\n        background: 'color-mix(in srgb, var(--lm-warning-100) 60%, transparent)',\n        text: 'var(--lm-warning-700)',\n        title: 'var(--lm-warning-800)',\n      }\n    case 'info':\n    default:\n      return {\n        accent: 'var(--lm-primary-500)',\n        background: 'color-mix(in srgb, var(--lm-primary-100) 60%, transparent)',\n        text: 'var(--lm-primary-700)',\n        title: 'var(--lm-primary-800)',\n      }\n  }\n}\n\nconst LMMessage: React.FC<LMMessageProps> = ({ id, type, title, content, duration = 2000, onClose }) => {\n  const tone = useTone(type)\n\n  useEffect(() => {\n    if (duration <= 0) return\n    const timer = setTimeout(() => onClose(id), duration)\n    return () => clearTimeout(timer)\n  }, [id, duration, onClose])\n\n  const icon = useMemo(() => ICONS[type], [type])\n  const ariaRole = 'status'\n  const ariaLabel = useMemo(() => {\n    switch (type) {\n      case 'success':\n        return 'Success message'\n      case 'error':\n        return 'Error message'\n      case 'warning':\n        return 'Warning message'\n      default:\n        return 'Information message'\n    }\n  }, [type])\n\n  return (\n    <div className=\"max-w-sm mx-auto will-change-transform\" role={ariaRole} aria-label={ariaLabel}>\n      <div\n        className=\"rounded-3xl shadow-lg p-5 mb-3 backdrop-blur-md border transition-all duration-300 ease-out\"\n        style={{\n          backgroundColor: tone.background,\n          borderColor: 'var(--lm-border-light)',\n          boxShadow: 'var(--lm-shadow-lg)',\n        }}\n      >\n        <div className=\"flex items-start gap-4\">\n          <div\n            className=\"mt-0.5 flex h-10 w-10 items-center justify-center rounded-2xl\"\n            style={{\n              color: tone.accent,\n              backgroundColor: 'color-mix(in srgb, currentColor 12%, transparent)',\n            }}\n          >\n            {icon}\n          </div>\n\n          <div className=\"flex-1 min-w-0\">\n            {title && (\n              <h4 className=\"text-sm font-semibold mb-2 truncate\" style={{ color: tone.title }}>\n                {title}\n              </h4>\n            )}\n            <p className=\"text-sm leading-relaxed wrap-break-word\" style={{ color: tone.text }}>\n              {content}\n            </p>\n          </div>\n\n          <button\n            onClick={() => onClose(id)}\n            aria-label=\"Close message\"\n            className=\"shrink-0 p-2 rounded-xl transition-all duration-200 hover:bg-black/5 active:bg-black/10\"\n            style={{ color: tone.accent }}\n          >\n            <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4\" aria-hidden=\"true\">\n              <path\n                d=\"M6 6l12 12M18 6L6 18\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n              />\n            </svg>\n          </button>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport interface LMMessageContainerProps {\n  /** Messages list */\n  messages: LMMessageItem[]\n  /** Close callback */\n  onClose: (id: string) => void\n  /** Position */\n  position?: 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center'\n}\n\nexport const LMMessageContainer: React.FC<LMMessageContainerProps> = ({\n  messages,\n  onClose,\n  position = 'top-right',\n}) => {\n  if (messages.length === 0) return null\n\n  const positionClasses = {\n    'top-right': 'top-20 right-6',\n    'top-left': 'top-20 left-6',\n    'top-center': 'top-20 left-1/2 -translate-x-1/2',\n    'bottom-right': 'bottom-6 right-6',\n    'bottom-left': 'bottom-6 left-6',\n    'bottom-center': 'bottom-6 left-1/2 -translate-x-1/2',\n  }\n\n  return (\n    <div className={`fixed z-50 space-y-3 ${positionClasses[position]}`}>\n      {messages.map((message) => (\n        <LMMessage key={message.id} {...message} onClose={onClose} />\n      ))}\n    </div>\n  )\n}\n\nexport default LMMessage\n","import { useState, useCallback } from 'react'\nimport type { LMMessageItem } from '../components/Feedback/LMMessage/LMMessage'\n\nexport interface UseMessageReturn {\n  messages: LMMessageItem[]\n  addMessage: (message: Omit<LMMessageItem, 'id'>) => string\n  removeMessage: (id: string) => void\n  success: (content: string, title?: string, duration?: number) => string\n  error: (content: string, title?: string, duration?: number) => string\n  warning: (content: string, title?: string, duration?: number) => string\n  info: (content: string, title?: string, duration?: number) => string\n  clearAll: () => void\n}\n\nlet messageIdCounter = 0\n\nexport const useMessage = (): UseMessageReturn => {\n  const [messages, setMessages] = useState<LMMessageItem[]>([])\n\n  const addMessage = useCallback((message: Omit<LMMessageItem, 'id'>) => {\n    const id = `lm-message-${++messageIdCounter}`\n    setMessages((prev) => [...prev, { ...message, id }])\n    return id\n  }, [])\n\n  const removeMessage = useCallback((id: string) => {\n    setMessages((prev) => prev.filter((m) => m.id !== id))\n  }, [])\n\n  const success = useCallback(\n    (content: string, title?: string, duration?: number) => {\n      return addMessage({ type: 'success', content, title, duration })\n    },\n    [addMessage]\n  )\n\n  const error = useCallback(\n    (content: string, title?: string, duration?: number) => {\n      return addMessage({ type: 'error', content, title, duration })\n    },\n    [addMessage]\n  )\n\n  const warning = useCallback(\n    (content: string, title?: string, duration?: number) => {\n      return addMessage({ type: 'warning', content, title, duration })\n    },\n    [addMessage]\n  )\n\n  const info = useCallback(\n    (content: string, title?: string, duration?: number) => {\n      return addMessage({ type: 'info', content, title, duration })\n    },\n    [addMessage]\n  )\n\n  const clearAll = useCallback(() => {\n    setMessages([])\n  }, [])\n\n  return {\n    messages,\n    addMessage,\n    removeMessage,\n    success,\n    error,\n    warning,\n    info,\n    clearAll,\n  }\n}\n"],"names":["jsx","useEffect","useMemo","jsxs","useState","useCallback"],"mappings":"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"}

package/dist/useMessage-CRsCgzDR.js

@@ -0,0 +1,243 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useState, useCallback } from "react";
+const ICONS = {
+  success: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20Z",
+        fill: "currentColor",
+        opacity: "0.15"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M16.7 9.3a1 1 0 0 0-1.4-1.4L11 12.2 8.7 9.9a1 1 0 1 0-1.4 1.4l3 3a1 1 0 0 0 1.4 0l5-5Z",
+        fill: "currentColor"
+      }
+    )
+  ] }),
+  error: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10Z",
+        fill: "currentColor",
+        opacity: "0.15"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M15.5 8.5l-7 7M8.5 8.5l7 7",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round"
+      }
+    )
+  ] }),
+  warning: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M12.9 4.5c-.4-.7-1.4-.7-1.8 0L3.5 18a1 1 0 0 0 .9 1.5h15.2a1 1 0 0 0 .9-1.5l-7.6-13.5Z",
+        fill: "currentColor",
+        opacity: "0.15"
+      }
+    ),
+    /* @__PURE__ */ jsx("path", { d: "M12 9v5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "16.5", r: "1", fill: "currentColor" })
+  ] }),
+  info: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z",
+        fill: "currentColor",
+        opacity: "0.15"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M12 10.5v5M12 7.5h.01",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round"
+      }
+    )
+  ] })
+};
+const useTone = (type) => {
+  switch (type) {
+    case "success":
+      return {
+        accent: "var(--lm-success-500)",
+        background: "color-mix(in srgb, var(--lm-success-100) 60%, transparent)",
+        text: "var(--lm-success-700)",
+        title: "var(--lm-success-800)"
+      };
+    case "error":
+      return {
+        accent: "var(--lm-error-500)",
+        background: "color-mix(in srgb, var(--lm-error-100) 60%, transparent)",
+        text: "var(--lm-error-700)",
+        title: "var(--lm-error-800)"
+      };
+    case "warning":
+      return {
+        accent: "var(--lm-warning-500)",
+        background: "color-mix(in srgb, var(--lm-warning-100) 60%, transparent)",
+        text: "var(--lm-warning-700)",
+        title: "var(--lm-warning-800)"
+      };
+    case "info":
+    default:
+      return {
+        accent: "var(--lm-primary-500)",
+        background: "color-mix(in srgb, var(--lm-primary-100) 60%, transparent)",
+        text: "var(--lm-primary-700)",
+        title: "var(--lm-primary-800)"
+      };
+  }
+};
+const LMMessage = ({ id, type, title, content, duration = 2e3, onClose }) => {
+  const tone = useTone(type);
+  useEffect(() => {
+    if (duration <= 0) return;
+    const timer = setTimeout(() => onClose(id), duration);
+    return () => clearTimeout(timer);
+  }, [id, duration, onClose]);
+  const icon = useMemo(() => ICONS[type], [type]);
+  const ariaRole = "status";
+  const ariaLabel = useMemo(() => {
+    switch (type) {
+      case "success":
+        return "Success message";
+      case "error":
+        return "Error message";
+      case "warning":
+        return "Warning message";
+      default:
+        return "Information message";
+    }
+  }, [type]);
+  return /* @__PURE__ */ jsx("div", { className: "max-w-sm mx-auto will-change-transform", role: ariaRole, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "rounded-3xl shadow-lg p-5 mb-3 backdrop-blur-md border transition-all duration-300 ease-out",
+      style: {
+        backgroundColor: tone.background,
+        borderColor: "var(--lm-border-light)",
+        boxShadow: "var(--lm-shadow-lg)"
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "mt-0.5 flex h-10 w-10 items-center justify-center rounded-2xl",
+            style: {
+              color: tone.accent,
+              backgroundColor: "color-mix(in srgb, currentColor 12%, transparent)"
+            },
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          title && /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold mb-2 truncate", style: { color: tone.title }, children: title }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed wrap-break-word", style: { color: tone.text }, children: content })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => onClose(id),
+            "aria-label": "Close message",
+            className: "shrink-0 p-2 rounded-xl transition-all duration-200 hover:bg-black/5 active:bg-black/10",
+            style: { color: tone.accent },
+            children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M6 6l12 12M18 6L6 18",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round"
+              }
+            ) })
+          }
+        )
+      ] })
+    }
+  ) });
+};
+const LMMessageContainer = ({
+  messages,
+  onClose,
+  position = "top-right"
+}) => {
+  if (messages.length === 0) return null;
+  const positionClasses = {
+    "top-right": "top-20 right-6",
+    "top-left": "top-20 left-6",
+    "top-center": "top-20 left-1/2 -translate-x-1/2",
+    "bottom-right": "bottom-6 right-6",
+    "bottom-left": "bottom-6 left-6",
+    "bottom-center": "bottom-6 left-1/2 -translate-x-1/2"
+  };
+  return /* @__PURE__ */ jsx("div", { className: `fixed z-50 space-y-3 ${positionClasses[position]}`, children: messages.map((message) => /* @__PURE__ */ jsx(LMMessage, { ...message, onClose }, message.id)) });
+};
+let messageIdCounter = 0;
+const useMessage = () => {
+  const [messages, setMessages] = useState([]);
+  const addMessage = useCallback((message) => {
+    const id = `lm-message-${++messageIdCounter}`;
+    setMessages((prev) => [...prev, { ...message, id }]);
+    return id;
+  }, []);
+  const removeMessage = useCallback((id) => {
+    setMessages((prev) => prev.filter((m) => m.id !== id));
+  }, []);
+  const success = useCallback(
+    (content, title, duration) => {
+      return addMessage({ type: "success", content, title, duration });
+    },
+    [addMessage]
+  );
+  const error = useCallback(
+    (content, title, duration) => {
+      return addMessage({ type: "error", content, title, duration });
+    },
+    [addMessage]
+  );
+  const warning = useCallback(
+    (content, title, duration) => {
+      return addMessage({ type: "warning", content, title, duration });
+    },
+    [addMessage]
+  );
+  const info = useCallback(
+    (content, title, duration) => {
+      return addMessage({ type: "info", content, title, duration });
+    },
+    [addMessage]
+  );
+  const clearAll = useCallback(() => {
+    setMessages([]);
+  }, []);
+  return {
+    messages,
+    addMessage,
+    removeMessage,
+    success,
+    error,
+    warning,
+    info,
+    clearAll
+  };
+};
+export {
+  LMMessage as L,
+  LMMessageContainer as a,
+  useMessage as u
+};
+//# sourceMappingURL=useMessage-CRsCgzDR.js.map

package/dist/useMessage-CRsCgzDR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMessage-CRsCgzDR.js","sources":["../src/components/Feedback/LMMessage/LMMessage.tsx","../src/hooks/useMessage.ts"],"sourcesContent":["import React, { useEffect, useMemo } from 'react'\n\nexport type LMMessageType = 'success' | 'error' | 'warning' | 'info'\n\nexport interface LMMessageItem {\n  id: string\n  type: LMMessageType\n  title?: string\n  content: string\n  duration?: number\n}\n\nexport interface LMMessageProps {\n  id: string\n  type: LMMessageType\n  title?: string\n  content: string\n  /** Auto close duration in ms, 0 means no auto close */\n  duration?: number\n  onClose: (id: string) => void\n}\n\ninterface Tone {\n  accent: string\n  background: string\n  text: string\n  title: string\n}\n\nconst ICONS: Record<LMMessageType, React.ReactNode> = {\n  success: (\n    <svg viewBox=\"0 0 24 24\" className=\"h-5 w-5\" aria-hidden=\"true\">\n      <path\n        d=\"M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20Z\"\n        fill=\"currentColor\"\n        opacity=\"0.15\"\n      />\n      <path\n        d=\"M16.7 9.3a1 1 0 0 0-1.4-1.4L11 12.2 8.7 9.9a1 1 0 1 0-1.4 1.4l3 3a1 1 0 0 0 1.4 0l5-5Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  ),\n  error: (\n    <svg viewBox=\"0 0 24 24\" className=\"h-5 w-5\" aria-hidden=\"true\">\n      <path\n        d=\"M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10Z\"\n        fill=\"currentColor\"\n        opacity=\"0.15\"\n      />\n      <path\n        d=\"M15.5 8.5l-7 7M8.5 8.5l7 7\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.8\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  ),\n  warning: (\n    <svg viewBox=\"0 0 24 24\" className=\"h-5 w-5\" aria-hidden=\"true\">\n      <path\n        d=\"M12.9 4.5c-.4-.7-1.4-.7-1.8 0L3.5 18a1 1 0 0 0 .9 1.5h15.2a1 1 0 0 0 .9-1.5l-7.6-13.5Z\"\n        fill=\"currentColor\"\n        opacity=\"0.15\"\n      />\n      <path d=\"M12 9v5\" stroke=\"currentColor\" strokeWidth=\"1.8\" strokeLinecap=\"round\" />\n      <circle cx=\"12\" cy=\"16.5\" r=\"1\" fill=\"currentColor\" />\n    </svg>\n  ),\n  info: (\n    <svg viewBox=\"0 0 24 24\" className=\"h-5 w-5\" aria-hidden=\"true\">\n      <path\n        d=\"M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z\"\n        fill=\"currentColor\"\n        opacity=\"0.15\"\n      />\n      <path\n        d=\"M12 10.5v5M12 7.5h.01\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.8\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  ),\n}\n\nconst useTone = (type: LMMessageType): Tone => {\n  switch (type) {\n    case 'success':\n      return {\n        accent: 'var(--lm-success-500)',\n        background: 'color-mix(in srgb, var(--lm-success-100) 60%, transparent)',\n        text: 'var(--lm-success-700)',\n        title: 'var(--lm-success-800)',\n      }\n    case 'error':\n      return {\n        accent: 'var(--lm-error-500)',\n        background: 'color-mix(in srgb, var(--lm-error-100) 60%, transparent)',\n        text: 'var(--lm-error-700)',\n        title: 'var(--lm-error-800)',\n      }\n    case 'warning':\n      return {\n        accent: 'var(--lm-warning-500)',\n        background: 'color-mix(in srgb, var(--lm-warning-100) 60%, transparent)',\n        text: 'var(--lm-warning-700)',\n        title: 'var(--lm-warning-800)',\n      }\n    case 'info':\n    default:\n      return {\n        accent: 'var(--lm-primary-500)',\n        background: 'color-mix(in srgb, var(--lm-primary-100) 60%, transparent)',\n        text: 'var(--lm-primary-700)',\n        title: 'var(--lm-primary-800)',\n      }\n  }\n}\n\nconst LMMessage: React.FC<LMMessageProps> = ({ id, type, title, content, duration = 2000, onClose }) => {\n  const tone = useTone(type)\n\n  useEffect(() => {\n    if (duration <= 0) return\n    const timer = setTimeout(() => onClose(id), duration)\n    return () => clearTimeout(timer)\n  }, [id, duration, onClose])\n\n  const icon = useMemo(() => ICONS[type], [type])\n  const ariaRole = 'status'\n  const ariaLabel = useMemo(() => {\n    switch (type) {\n      case 'success':\n        return 'Success message'\n      case 'error':\n        return 'Error message'\n      case 'warning':\n        return 'Warning message'\n      default:\n        return 'Information message'\n    }\n  }, [type])\n\n  return (\n    <div className=\"max-w-sm mx-auto will-change-transform\" role={ariaRole} aria-label={ariaLabel}>\n      <div\n        className=\"rounded-3xl shadow-lg p-5 mb-3 backdrop-blur-md border transition-all duration-300 ease-out\"\n        style={{\n          backgroundColor: tone.background,\n          borderColor: 'var(--lm-border-light)',\n          boxShadow: 'var(--lm-shadow-lg)',\n        }}\n      >\n        <div className=\"flex items-start gap-4\">\n          <div\n            className=\"mt-0.5 flex h-10 w-10 items-center justify-center rounded-2xl\"\n            style={{\n              color: tone.accent,\n              backgroundColor: 'color-mix(in srgb, currentColor 12%, transparent)',\n            }}\n          >\n            {icon}\n          </div>\n\n          <div className=\"flex-1 min-w-0\">\n            {title && (\n              <h4 className=\"text-sm font-semibold mb-2 truncate\" style={{ color: tone.title }}>\n                {title}\n              </h4>\n            )}\n            <p className=\"text-sm leading-relaxed wrap-break-word\" style={{ color: tone.text }}>\n              {content}\n            </p>\n          </div>\n\n          <button\n            onClick={() => onClose(id)}\n            aria-label=\"Close message\"\n            className=\"shrink-0 p-2 rounded-xl transition-all duration-200 hover:bg-black/5 active:bg-black/10\"\n            style={{ color: tone.accent }}\n          >\n            <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4\" aria-hidden=\"true\">\n              <path\n                d=\"M6 6l12 12M18 6L6 18\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n              />\n            </svg>\n          </button>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport interface LMMessageContainerProps {\n  /** Messages list */\n  messages: LMMessageItem[]\n  /** Close callback */\n  onClose: (id: string) => void\n  /** Position */\n  position?: 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center'\n}\n\nexport const LMMessageContainer: React.FC<LMMessageContainerProps> = ({\n  messages,\n  onClose,\n  position = 'top-right',\n}) => {\n  if (messages.length === 0) return null\n\n  const positionClasses = {\n    'top-right': 'top-20 right-6',\n    'top-left': 'top-20 left-6',\n    'top-center': 'top-20 left-1/2 -translate-x-1/2',\n    'bottom-right': 'bottom-6 right-6',\n    'bottom-left': 'bottom-6 left-6',\n    'bottom-center': 'bottom-6 left-1/2 -translate-x-1/2',\n  }\n\n  return (\n    <div className={`fixed z-50 space-y-3 ${positionClasses[position]}`}>\n      {messages.map((message) => (\n        <LMMessage key={message.id} {...message} onClose={onClose} />\n      ))}\n    </div>\n  )\n}\n\nexport default LMMessage\n","import { useState, useCallback } from 'react'\nimport type { LMMessageItem } from '../components/Feedback/LMMessage/LMMessage'\n\nexport interface UseMessageReturn {\n  messages: LMMessageItem[]\n  addMessage: (message: Omit<LMMessageItem, 'id'>) => string\n  removeMessage: (id: string) => void\n  success: (content: string, title?: string, duration?: number) => string\n  error: (content: string, title?: string, duration?: number) => string\n  warning: (content: string, title?: string, duration?: number) => string\n  info: (content: string, title?: string, duration?: number) => string\n  clearAll: () => void\n}\n\nlet messageIdCounter = 0\n\nexport const useMessage = (): UseMessageReturn => {\n  const [messages, setMessages] = useState<LMMessageItem[]>([])\n\n  const addMessage = useCallback((message: Omit<LMMessageItem, 'id'>) => {\n    const id = `lm-message-${++messageIdCounter}`\n    setMessages((prev) => [...prev, { ...message, id }])\n    return id\n  }, [])\n\n  const removeMessage = useCallback((id: string) => {\n    setMessages((prev) => prev.filter((m) => m.id !== id))\n  }, [])\n\n  const success = useCallback(\n    (content: string, title?: string, duration?: number) => {\n      return addMessage({ type: 'success', content, title, duration })\n    },\n    [addMessage]\n  )\n\n  const error = useCallback(\n    (content: string, title?: string, duration?: number) => {\n      return addMessage({ type: 'error', content, title, duration })\n    },\n    [addMessage]\n  )\n\n  const warning = useCallback(\n    (content: string, title?: string, duration?: number) => {\n      return addMessage({ type: 'warning', content, title, duration })\n    },\n    [addMessage]\n  )\n\n  const info = useCallback(\n    (content: string, title?: string, duration?: number) => {\n      return addMessage({ type: 'info', content, title, duration })\n    },\n    [addMessage]\n  )\n\n  const clearAll = useCallback(() => {\n    setMessages([])\n  }, [])\n\n  return {\n    messages,\n    addMessage,\n    removeMessage,\n    success,\n    error,\n    warning,\n    info,\n    clearAll,\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/utils/cn.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Utility for merging class names
+ * Simple implementation without external dependencies
+ */
+type ClassValue = string | undefined | null | false | ClassValue[];
+export declare function cn(...inputs: ClassValue[]): string;
+export {};
+//# sourceMappingURL=cn.d.ts.map

package/dist/utils/cn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../src/utils/cn.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,KAAK,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,KAAK,GAAG,UAAU,EAAE,CAAA;AAElE,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAKlD"}

package/dist/utils/componentSizes.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @file Component size utilities
+ * @description Shared size tokens for LumenUI components
+ */
+export type ComponentSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/** Size order for iteration */
+export declare const COMPONENT_SIZE_ORDER: ComponentSize[];
+/** Text size classes with Apple-like line heights */
+export declare const SIZE_TEXT_CLASSES: Record<ComponentSize, string>;
+/** Heading size classes with tight tracking */
+export declare const SIZE_HEADING_CLASSES: Record<ComponentSize, string>;
+/** Display size classes with extra tight tracking */
+export declare const SIZE_DISPLAY_CLASSES: Record<ComponentSize, string>;
+/** Gap classes */
+export declare const SIZE_GAP_CLASSES: Record<ComponentSize, string>;
+/** Padding classes */
+export declare const SIZE_PADDING_CLASSES: Record<ComponentSize, string>;
+/** Button size config */
+export declare const SIZE_BUTTON_CONFIG: Record<ComponentSize, {
+    padding: string;
+    height: string;
+}>;
+/** Input size config */
+export declare const SIZE_INPUT_CONFIG: Record<ComponentSize, {
+    padding: string;
+    height: string;
+    fontSize: string;
+}>;
+/** Selector size config */
+export declare const SIZE_SELECTOR_CONFIG: Record<ComponentSize, {
+    padding: string;
+    height: string;
+    fontSize: string;
+}>;
+/** Modal size config */
+export declare const SIZE_MODAL_CONFIG: Record<ComponentSize, {
+    width: string;
+    maxWidth: string;
+}>;
+/** Tooltip size config */
+export declare const SIZE_TOOLTIP_CONFIG: Record<ComponentSize, {
+    paddingClass: string;
+    textClass: string;
+    maxWidth: number;
+}>;
+/** Icon size config */
+export declare const SIZE_ICON_CONFIG: Record<ComponentSize, string>;
+/** Table size config */
+export declare const SIZE_TABLE_CONFIG: Record<ComponentSize, {
+    cellPadding: string;
+    rowHeight: string;
+}>;
+/**
+ * Clamp size to allowed values
+ */
+export declare const clampComponentSize: (size: ComponentSize | undefined, allowedSizes: ComponentSize[], fallback?: ComponentSize) => ComponentSize;
+//# sourceMappingURL=componentSizes.d.ts.map

package/dist/utils/componentSizes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"componentSizes.d.ts","sourceRoot":"","sources":["../../src/utils/componentSizes.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;AAEpE,+BAA+B;AAC/B,eAAO,MAAM,oBAAoB,EAAE,aAAa,EAO/C,CAAA;AAED,qDAAqD;AACrD,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAO3D,CAAA;AAED,+CAA+C;AAC/C,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAO9D,CAAA;AAED,qDAAqD;AACrD,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAO9D,CAAA;AAED,kBAAkB;AAClB,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAO1D,CAAA;AAED,sBAAsB;AACtB,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAO9D,CAAA;AAED,yBAAyB;AACzB,eAAO,MAAM,kBAAkB,EAAE,MAAM,CACrC,aAAa,EACb;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAQpC,CAAA;AAED,wBAAwB;AACxB,eAAO,MAAM,iBAAiB,EAAE,MAAM,CACpC,aAAa,EACb;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAQtD,CAAA;AAED,2BAA2B;AAC3B,eAAO,MAAM,oBAAoB,EAAE,MAAM,CACvC,aAAa,EACb;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAQtD,CAAA;AAED,wBAAwB;AACxB,eAAO,MAAM,iBAAiB,EAAE,MAAM,CACpC,aAAa,EACb;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAQpC,CAAA;AAED,0BAA0B;AAC1B,eAAO,MAAM,mBAAmB,EAAE,MAAM,CACtC,aAAa,EACb;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAQ9D,CAAA;AAED,uBAAuB;AACvB,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAO1D,CAAA;AAED,wBAAwB;AACxB,eAAO,MAAM,iBAAiB,EAAE,MAAM,CACpC,aAAa,EACb;IAAE,WAAW,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,CAQ3C,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,GAC7B,MAAM,aAAa,GAAG,SAAS,EAC/B,cAAc,aAAa,EAAE,EAC7B,WAAU,aAAoB,KAC7B,aAGF,CAAA"}

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './componentSizes';
+export * from './cn';
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA;AAChC,cAAc,MAAM,CAAA"}