@ryanhe919/lumen-ui 0.2.1 → 0.3.0

package/dist/LMInput-CVjawj1F.cjs

@@ -0,0 +1,140 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const componentSizes = require("./componentSizes-DUTZ7uEM.cjs");
+const LMInput = ({
+  leftIcon,
+  rightElement,
+  error = false,
+  errorMessage,
+  className = "",
+  size = "md",
+  includeSeconds = false,
+  ...props
+}) => {
+  const hasLeftIcon = !!leftIcon;
+  const hasRightElement = !!rightElement;
+  const errorId = `lm-input-err-${React.useId()}`;
+  const timeInputProps = () => {
+    if ((props.type === "datetime-local" || props.type === "time") && includeSeconds) {
+      return { step: "1" };
+    }
+    return {};
+  };
+  const baseClassName = `
+    w-full ${componentSizes.SIZE_INPUT_CONFIG[size].padding} ${componentSizes.SIZE_INPUT_CONFIG[size].height} ${componentSizes.SIZE_INPUT_CONFIG[size].fontSize}
+    border rounded-xl
+    focus:ring-2 focus:outline-none
+    ${hasLeftIcon ? "pl-10" : ""}
+    ${hasRightElement ? "pr-10" : ""}
+    ${className}
+  `.trim().replace(/\s+/g, " ");
+  const getInputStyles = () => {
+    const baseStyles = {
+      backgroundColor: "var(--lm-bg-elevated)",
+      color: "var(--lm-text-primary)",
+      borderColor: error ? "var(--lm-error-300)" : "var(--lm-border-default)",
+      boxShadow: "var(--lm-shadow-sm)",
+      transition: "all var(--lm-transition-fast) var(--lm-ease-out)"
+    };
+    return {
+      ...baseStyles,
+      "--tw-ring-color": error ? "var(--lm-error-400)" : "var(--lm-primary-400)",
+      "--tw-ring-opacity": "0.4"
+    };
+  };
+  const getDisabledStyles = () => props.disabled ? {
+    backgroundColor: "var(--lm-bg-paper)",
+    color: "var(--lm-text-disabled)",
+    cursor: "not-allowed",
+    opacity: 0.6
+  } : {};
+  const getIconStyles = () => error ? { color: "var(--lm-error-400)" } : { color: "var(--lm-text-secondary)" };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
+      hasLeftIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "transition-colors duration-200",
+          style: getIconStyles(),
+          children: leftIcon
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ...props,
+          ...timeInputProps(),
+          className: baseClassName,
+          "aria-invalid": error || void 0,
+          "aria-describedby": errorMessage ? errorId : void 0,
+          style: {
+            ...getInputStyles(),
+            ...getDisabledStyles()
+          },
+          onMouseEnter: (e) => {
+            var _a;
+            if (!props.disabled && !error) {
+              e.currentTarget.style.borderColor = "var(--lm-border-strong)";
+            }
+            (_a = props.onMouseEnter) == null ? void 0 : _a.call(props, e);
+          },
+          onMouseLeave: (e) => {
+            var _a;
+            if (!props.disabled && !error) {
+              e.currentTarget.style.borderColor = "var(--lm-border-default)";
+            }
+            (_a = props.onMouseLeave) == null ? void 0 : _a.call(props, e);
+          },
+          onFocus: (e) => {
+            var _a;
+            if (!props.disabled) {
+              e.currentTarget.style.borderColor = error ? "var(--lm-error-400)" : "var(--lm-primary-400)";
+            }
+            (_a = props.onFocus) == null ? void 0 : _a.call(props, e);
+          },
+          onBlur: (e) => {
+            var _a;
+            if (!props.disabled) {
+              e.currentTarget.style.borderColor = error ? "var(--lm-error-300)" : "var(--lm-border-default)";
+            }
+            (_a = props.onBlur) == null ? void 0 : _a.call(props, e);
+          }
+        }
+      ),
+      hasRightElement && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-4 flex items-center z-10", children: rightElement })
+    ] }),
+    errorMessage && /* @__PURE__ */ jsxRuntime.jsxs(
+      "p",
+      {
+        id: errorId,
+        className: "text-xs flex items-center gap-1",
+        style: { color: "var(--lm-error-500)" },
+        role: "alert",
+        "aria-live": "polite",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: "w-3 h-3",
+              fill: "currentColor",
+              viewBox: "0 0 20 20",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  fillRule: "evenodd",
+                  d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
+                  clipRule: "evenodd"
+                }
+              )
+            }
+          ),
+          errorMessage
+        ]
+      }
+    )
+  ] });
+};
+exports.LMInput = LMInput;
+//# sourceMappingURL=LMInput-CVjawj1F.cjs.map

package/dist/LMInput-CVjawj1F.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LMInput-CVjawj1F.cjs","sources":["../src/components/Form/LMInput/LMInput.tsx"],"sourcesContent":["import React, { useId } from 'react'\nimport { SIZE_INPUT_CONFIG } from '../../../utils/componentSizes'\nimport type { ComponentSize } from '../../../utils/componentSizes'\n\nexport interface LMInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {\n  /** Left icon */\n  leftIcon?: React.ReactNode\n  /** Right element */\n  rightElement?: React.ReactNode\n  /** Error state */\n  error?: boolean\n  /** Error message */\n  errorMessage?: string\n  /** Size */\n  size?: ComponentSize\n  /** Include seconds for time inputs */\n  includeSeconds?: boolean\n}\n\nconst LMInput: React.FC<LMInputProps> = ({\n  leftIcon,\n  rightElement,\n  error = false,\n  errorMessage,\n  className = '',\n  size = 'md',\n  includeSeconds = false,\n  ...props\n}) => {\n  const hasLeftIcon = !!leftIcon\n  const hasRightElement = !!rightElement\n  const errorId = `lm-input-err-${useId()}`\n\n  const timeInputProps = () => {\n    if (\n      (props.type === 'datetime-local' || props.type === 'time') &&\n      includeSeconds\n    ) {\n      return { step: '1' as const }\n    }\n    return {}\n  }\n\n  // Apple-like refined input styling\n  const baseClassName = `\n    w-full ${SIZE_INPUT_CONFIG[size].padding} ${SIZE_INPUT_CONFIG[size].height} ${SIZE_INPUT_CONFIG[size].fontSize}\n    border rounded-xl\n    focus:ring-2 focus:outline-none\n    ${hasLeftIcon ? 'pl-10' : ''}\n    ${hasRightElement ? 'pr-10' : ''}\n    ${className}\n  `\n    .trim()\n    .replace(/\\s+/g, ' ')\n\n  const getInputStyles = () => {\n    // Apple-like refined input styles\n    const baseStyles = {\n      backgroundColor: 'var(--lm-bg-elevated)',\n      color: 'var(--lm-text-primary)',\n      borderColor: error\n        ? 'var(--lm-error-300)'\n        : 'var(--lm-border-default)',\n      boxShadow: 'var(--lm-shadow-sm)',\n      transition: 'all var(--lm-transition-fast) var(--lm-ease-out)',\n    } as React.CSSProperties\n\n    return {\n      ...baseStyles,\n      '--tw-ring-color': error\n        ? 'var(--lm-error-400)'\n        : 'var(--lm-primary-400)',\n      '--tw-ring-opacity': '0.4',\n    }\n  }\n\n  const getDisabledStyles = () =>\n    props.disabled\n      ? {\n          backgroundColor: 'var(--lm-bg-paper)',\n          color: 'var(--lm-text-disabled)',\n          cursor: 'not-allowed',\n          opacity: 0.6,\n        }\n      : {}\n\n  const getIconStyles = () =>\n    error\n      ? { color: 'var(--lm-error-400)' }\n      : { color: 'var(--lm-text-secondary)' }\n\n  return (\n    <div className=\"space-y-2\">\n      <div className=\"relative group\">\n        {hasLeftIcon && (\n          <div className=\"absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none z-10\">\n            <div\n              className=\"transition-colors duration-200\"\n              style={getIconStyles()}\n            >\n              {leftIcon}\n            </div>\n          </div>\n        )}\n\n        <input\n          {...props}\n          {...timeInputProps()}\n          className={baseClassName}\n          aria-invalid={error || undefined}\n          aria-describedby={errorMessage ? errorId : undefined}\n          style={{\n            ...getInputStyles(),\n            ...getDisabledStyles(),\n          } as React.CSSProperties}\n          onMouseEnter={(e) => {\n            if (!props.disabled && !error) {\n              e.currentTarget.style.borderColor = 'var(--lm-border-strong)'\n            }\n            props.onMouseEnter?.(e)\n          }}\n          onMouseLeave={(e) => {\n            if (!props.disabled && !error) {\n              e.currentTarget.style.borderColor = 'var(--lm-border-default)'\n            }\n            props.onMouseLeave?.(e)\n          }}\n          onFocus={(e) => {\n            if (!props.disabled) {\n              e.currentTarget.style.borderColor = error\n                ? 'var(--lm-error-400)'\n                : 'var(--lm-primary-400)'\n            }\n            props.onFocus?.(e)\n          }}\n          onBlur={(e) => {\n            if (!props.disabled) {\n              e.currentTarget.style.borderColor = error\n                ? 'var(--lm-error-300)'\n                : 'var(--lm-border-default)'\n            }\n            props.onBlur?.(e)\n          }}\n        />\n\n        {hasRightElement && (\n          <div className=\"absolute inset-y-0 right-0 pr-4 flex items-center z-10\">\n            {rightElement}\n          </div>\n        )}\n      </div>\n\n      {errorMessage && (\n        <p\n          id={errorId}\n          className=\"text-xs flex items-center gap-1\"\n          style={{ color: 'var(--lm-error-500)' }}\n          role=\"alert\"\n          aria-live=\"polite\"\n        >\n          <svg\n            className=\"w-3 h-3\"\n            fill=\"currentColor\"\n            viewBox=\"0 0 20 20\"\n            aria-hidden=\"true\"\n          >\n            <path\n              fillRule=\"evenodd\"\n              d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\"\n              clipRule=\"evenodd\"\n            />\n          </svg>\n          {errorMessage}\n        </p>\n      )}\n    </div>\n  )\n}\n\nexport default LMInput\n"],"names":["useId","SIZE_INPUT_CONFIG","jsxs","jsx"],"mappings":"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"}

package/dist/LMInput-D9csGyhj.js

@@ -0,0 +1,141 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import { a as SIZE_INPUT_CONFIG } from "./componentSizes-CdWNL526.js";
+const LMInput = ({
+  leftIcon,
+  rightElement,
+  error = false,
+  errorMessage,
+  className = "",
+  size = "md",
+  includeSeconds = false,
+  ...props
+}) => {
+  const hasLeftIcon = !!leftIcon;
+  const hasRightElement = !!rightElement;
+  const errorId = `lm-input-err-${useId()}`;
+  const timeInputProps = () => {
+    if ((props.type === "datetime-local" || props.type === "time") && includeSeconds) {
+      return { step: "1" };
+    }
+    return {};
+  };
+  const baseClassName = `
+    w-full ${SIZE_INPUT_CONFIG[size].padding} ${SIZE_INPUT_CONFIG[size].height} ${SIZE_INPUT_CONFIG[size].fontSize}
+    border rounded-xl
+    focus:ring-2 focus:outline-none
+    ${hasLeftIcon ? "pl-10" : ""}
+    ${hasRightElement ? "pr-10" : ""}
+    ${className}
+  `.trim().replace(/\s+/g, " ");
+  const getInputStyles = () => {
+    const baseStyles = {
+      backgroundColor: "var(--lm-bg-elevated)",
+      color: "var(--lm-text-primary)",
+      borderColor: error ? "var(--lm-error-300)" : "var(--lm-border-default)",
+      boxShadow: "var(--lm-shadow-sm)",
+      transition: "all var(--lm-transition-fast) var(--lm-ease-out)"
+    };
+    return {
+      ...baseStyles,
+      "--tw-ring-color": error ? "var(--lm-error-400)" : "var(--lm-primary-400)",
+      "--tw-ring-opacity": "0.4"
+    };
+  };
+  const getDisabledStyles = () => props.disabled ? {
+    backgroundColor: "var(--lm-bg-paper)",
+    color: "var(--lm-text-disabled)",
+    cursor: "not-allowed",
+    opacity: 0.6
+  } : {};
+  const getIconStyles = () => error ? { color: "var(--lm-error-400)" } : { color: "var(--lm-text-secondary)" };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
+      hasLeftIcon && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none z-10", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "transition-colors duration-200",
+          style: getIconStyles(),
+          children: leftIcon
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...props,
+          ...timeInputProps(),
+          className: baseClassName,
+          "aria-invalid": error || void 0,
+          "aria-describedby": errorMessage ? errorId : void 0,
+          style: {
+            ...getInputStyles(),
+            ...getDisabledStyles()
+          },
+          onMouseEnter: (e) => {
+            var _a;
+            if (!props.disabled && !error) {
+              e.currentTarget.style.borderColor = "var(--lm-border-strong)";
+            }
+            (_a = props.onMouseEnter) == null ? void 0 : _a.call(props, e);
+          },
+          onMouseLeave: (e) => {
+            var _a;
+            if (!props.disabled && !error) {
+              e.currentTarget.style.borderColor = "var(--lm-border-default)";
+            }
+            (_a = props.onMouseLeave) == null ? void 0 : _a.call(props, e);
+          },
+          onFocus: (e) => {
+            var _a;
+            if (!props.disabled) {
+              e.currentTarget.style.borderColor = error ? "var(--lm-error-400)" : "var(--lm-primary-400)";
+            }
+            (_a = props.onFocus) == null ? void 0 : _a.call(props, e);
+          },
+          onBlur: (e) => {
+            var _a;
+            if (!props.disabled) {
+              e.currentTarget.style.borderColor = error ? "var(--lm-error-300)" : "var(--lm-border-default)";
+            }
+            (_a = props.onBlur) == null ? void 0 : _a.call(props, e);
+          }
+        }
+      ),
+      hasRightElement && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 pr-4 flex items-center z-10", children: rightElement })
+    ] }),
+    errorMessage && /* @__PURE__ */ jsxs(
+      "p",
+      {
+        id: errorId,
+        className: "text-xs flex items-center gap-1",
+        style: { color: "var(--lm-error-500)" },
+        role: "alert",
+        "aria-live": "polite",
+        children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "w-3 h-3",
+              fill: "currentColor",
+              viewBox: "0 0 20 20",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  fillRule: "evenodd",
+                  d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
+                  clipRule: "evenodd"
+                }
+              )
+            }
+          ),
+          errorMessage
+        ]
+      }
+    )
+  ] });
+};
+export {
+  LMInput as L
+};
+//# sourceMappingURL=LMInput-D9csGyhj.js.map

package/dist/LMInput-D9csGyhj.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LMInput-D9csGyhj.js","sources":["../src/components/Form/LMInput/LMInput.tsx"],"sourcesContent":["import React, { useId } from 'react'\nimport { SIZE_INPUT_CONFIG } from '../../../utils/componentSizes'\nimport type { ComponentSize } from '../../../utils/componentSizes'\n\nexport interface LMInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {\n  /** Left icon */\n  leftIcon?: React.ReactNode\n  /** Right element */\n  rightElement?: React.ReactNode\n  /** Error state */\n  error?: boolean\n  /** Error message */\n  errorMessage?: string\n  /** Size */\n  size?: ComponentSize\n  /** Include seconds for time inputs */\n  includeSeconds?: boolean\n}\n\nconst LMInput: React.FC<LMInputProps> = ({\n  leftIcon,\n  rightElement,\n  error = false,\n  errorMessage,\n  className = '',\n  size = 'md',\n  includeSeconds = false,\n  ...props\n}) => {\n  const hasLeftIcon = !!leftIcon\n  const hasRightElement = !!rightElement\n  const errorId = `lm-input-err-${useId()}`\n\n  const timeInputProps = () => {\n    if (\n      (props.type === 'datetime-local' || props.type === 'time') &&\n      includeSeconds\n    ) {\n      return { step: '1' as const }\n    }\n    return {}\n  }\n\n  // Apple-like refined input styling\n  const baseClassName = `\n    w-full ${SIZE_INPUT_CONFIG[size].padding} ${SIZE_INPUT_CONFIG[size].height} ${SIZE_INPUT_CONFIG[size].fontSize}\n    border rounded-xl\n    focus:ring-2 focus:outline-none\n    ${hasLeftIcon ? 'pl-10' : ''}\n    ${hasRightElement ? 'pr-10' : ''}\n    ${className}\n  `\n    .trim()\n    .replace(/\\s+/g, ' ')\n\n  const getInputStyles = () => {\n    // Apple-like refined input styles\n    const baseStyles = {\n      backgroundColor: 'var(--lm-bg-elevated)',\n      color: 'var(--lm-text-primary)',\n      borderColor: error\n        ? 'var(--lm-error-300)'\n        : 'var(--lm-border-default)',\n      boxShadow: 'var(--lm-shadow-sm)',\n      transition: 'all var(--lm-transition-fast) var(--lm-ease-out)',\n    } as React.CSSProperties\n\n    return {\n      ...baseStyles,\n      '--tw-ring-color': error\n        ? 'var(--lm-error-400)'\n        : 'var(--lm-primary-400)',\n      '--tw-ring-opacity': '0.4',\n    }\n  }\n\n  const getDisabledStyles = () =>\n    props.disabled\n      ? {\n          backgroundColor: 'var(--lm-bg-paper)',\n          color: 'var(--lm-text-disabled)',\n          cursor: 'not-allowed',\n          opacity: 0.6,\n        }\n      : {}\n\n  const getIconStyles = () =>\n    error\n      ? { color: 'var(--lm-error-400)' }\n      : { color: 'var(--lm-text-secondary)' }\n\n  return (\n    <div className=\"space-y-2\">\n      <div className=\"relative group\">\n        {hasLeftIcon && (\n          <div className=\"absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none z-10\">\n            <div\n              className=\"transition-colors duration-200\"\n              style={getIconStyles()}\n            >\n              {leftIcon}\n            </div>\n          </div>\n        )}\n\n        <input\n          {...props}\n          {...timeInputProps()}\n          className={baseClassName}\n          aria-invalid={error || undefined}\n          aria-describedby={errorMessage ? errorId : undefined}\n          style={{\n            ...getInputStyles(),\n            ...getDisabledStyles(),\n          } as React.CSSProperties}\n          onMouseEnter={(e) => {\n            if (!props.disabled && !error) {\n              e.currentTarget.style.borderColor = 'var(--lm-border-strong)'\n            }\n            props.onMouseEnter?.(e)\n          }}\n          onMouseLeave={(e) => {\n            if (!props.disabled && !error) {\n              e.currentTarget.style.borderColor = 'var(--lm-border-default)'\n            }\n            props.onMouseLeave?.(e)\n          }}\n          onFocus={(e) => {\n            if (!props.disabled) {\n              e.currentTarget.style.borderColor = error\n                ? 'var(--lm-error-400)'\n                : 'var(--lm-primary-400)'\n            }\n            props.onFocus?.(e)\n          }}\n          onBlur={(e) => {\n            if (!props.disabled) {\n              e.currentTarget.style.borderColor = error\n                ? 'var(--lm-error-300)'\n                : 'var(--lm-border-default)'\n            }\n            props.onBlur?.(e)\n          }}\n        />\n\n        {hasRightElement && (\n          <div className=\"absolute inset-y-0 right-0 pr-4 flex items-center z-10\">\n            {rightElement}\n          </div>\n        )}\n      </div>\n\n      {errorMessage && (\n        <p\n          id={errorId}\n          className=\"text-xs flex items-center gap-1\"\n          style={{ color: 'var(--lm-error-500)' }}\n          role=\"alert\"\n          aria-live=\"polite\"\n        >\n          <svg\n            className=\"w-3 h-3\"\n            fill=\"currentColor\"\n            viewBox=\"0 0 20 20\"\n            aria-hidden=\"true\"\n          >\n            <path\n              fillRule=\"evenodd\"\n              d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\"\n              clipRule=\"evenodd\"\n            />\n          </svg>\n          {errorMessage}\n        </p>\n      )}\n    </div>\n  )\n}\n\nexport default LMInput\n"],"names":[],"mappings":"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"}

package/dist/LMMenu-IDAgZFuC.cjs

@@ -0,0 +1,234 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const componentSizes = require("./componentSizes-DUTZ7uEM.cjs");
+const ChevronDownIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: className || "w-4 h-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) });
+const LMMenu = ({
+  items,
+  mode = "inline",
+  theme = "light",
+  selectedKeys: controlledSelectedKeys,
+  defaultSelectedKeys = [],
+  openKeys: controlledOpenKeys,
+  defaultOpenKeys = [],
+  collapsed = false,
+  collapsedWidth = 64,
+  onSelect,
+  onOpenChange,
+  size = "md",
+  className = ""
+}) => {
+  const resolvedSize = componentSizes.clampComponentSize(size, componentSizes.COMPONENT_SIZE_ORDER);
+  const [internalSelectedKeys, setInternalSelectedKeys] = React.useState(defaultSelectedKeys);
+  const [internalOpenKeys, setInternalOpenKeys] = React.useState(defaultOpenKeys);
+  const selectedKeys = controlledSelectedKeys ?? internalSelectedKeys;
+  const openKeys = controlledOpenKeys ?? internalOpenKeys;
+  const itemPaddingClasses = {
+    xs: "px-3 py-1.5",
+    sm: "px-3 py-2",
+    md: "px-4 py-2.5",
+    lg: "px-5 py-3",
+    xl: "px-6 py-3.5",
+    "2xl": "px-8 py-4"
+  };
+  const collapsedPaddingClasses = {
+    xs: "px-2 py-1.5",
+    sm: "px-2.5 py-2",
+    md: "px-3 py-2.5",
+    lg: "px-3.5 py-3",
+    xl: "px-4 py-3.5",
+    "2xl": "px-5 py-4"
+  };
+  const iconSizeClasses = {
+    xs: "w-4 h-4",
+    sm: "w-4 h-4",
+    md: "w-5 h-5",
+    lg: "w-5 h-5",
+    xl: "w-6 h-6",
+    "2xl": "w-6 h-6"
+  };
+  const handleSelect = React.useCallback((key, keyPath) => {
+    if (controlledSelectedKeys === void 0) {
+      setInternalSelectedKeys([key]);
+    }
+    onSelect == null ? void 0 : onSelect(key, keyPath);
+  }, [controlledSelectedKeys, onSelect]);
+  const handleOpenChange = React.useCallback((key) => {
+    const newOpenKeys = openKeys.includes(key) ? openKeys.filter((k) => k !== key) : [...openKeys, key];
+    if (controlledOpenKeys === void 0) {
+      setInternalOpenKeys(newOpenKeys);
+    }
+    onOpenChange == null ? void 0 : onOpenChange(newOpenKeys);
+  }, [openKeys, controlledOpenKeys, onOpenChange]);
+  const getItemStyles = (isSelected, isDisabled) => {
+    if (isDisabled) {
+      return {
+        color: theme === "dark" ? "var(--lm-gray-600)" : "var(--lm-text-disabled)",
+        cursor: "not-allowed"
+      };
+    }
+    if (isSelected) {
+      return {
+        color: theme === "dark" ? "white" : "var(--lm-primary-600)",
+        backgroundColor: theme === "dark" ? "var(--lm-primary-600)" : "var(--lm-primary-50)"
+      };
+    }
+    return {
+      color: theme === "dark" ? "var(--lm-gray-200)" : "var(--lm-text-primary)",
+      backgroundColor: "transparent"
+    };
+  };
+  const getHoverStyles = (isSelected, isDisabled) => {
+    if (isDisabled || isSelected) return {};
+    return {
+      backgroundColor: theme === "dark" ? "var(--lm-gray-700)" : "var(--lm-bg-hover)"
+    };
+  };
+  const renderMenuItem = (item, level = 0, keyPath = []) => {
+    var _a, _b;
+    if (item.type === "divider") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "my-2 mx-3 border-t",
+          style: { borderColor: theme === "dark" ? "var(--lm-gray-700)" : "var(--lm-border-light)" }
+        },
+        item.key
+      );
+    }
+    if (item.type === "group") {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `${collapsed ? collapsedPaddingClasses[resolvedSize] : itemPaddingClasses[resolvedSize]} text-xs font-semibold uppercase tracking-wider`,
+            style: { color: theme === "dark" ? "var(--lm-gray-500)" : "var(--lm-text-tertiary)" },
+            children: !collapsed && item.label
+          }
+        ),
+        (_a = item.children) == null ? void 0 : _a.map((child) => renderMenuItem(child, level, [...keyPath, item.key]))
+      ] }, item.key);
+    }
+    const hasChildren = !!(item.children && item.children.length > 0);
+    const isOpen = openKeys.includes(item.key);
+    const isSelected = selectedKeys.includes(item.key);
+    const currentKeyPath = [...keyPath, item.key];
+    const indentStyle = !collapsed && mode === "inline" ? { paddingLeft: `${16 + level * 16}px` } : {};
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        MenuItem,
+        {
+          item,
+          size: resolvedSize,
+          collapsed,
+          hasChildren,
+          isOpen,
+          isSelected,
+          theme,
+          mode,
+          paddingClass: collapsed ? collapsedPaddingClasses[resolvedSize] : itemPaddingClasses[resolvedSize],
+          textClass: componentSizes.SIZE_TEXT_CLASSES[resolvedSize],
+          gapClass: componentSizes.SIZE_GAP_CLASSES[resolvedSize],
+          iconClass: iconSizeClasses[resolvedSize],
+          indentStyle,
+          getStyles: getItemStyles,
+          getHoverStyles,
+          onSelect: () => {
+            if (!item.disabled && !hasChildren) {
+              handleSelect(item.key, currentKeyPath);
+            }
+          },
+          onToggle: () => {
+            if (hasChildren && !item.disabled) {
+              handleOpenChange(item.key);
+            }
+          }
+        }
+      ),
+      hasChildren && isOpen && !collapsed && mode === "inline" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden transition-all duration-200", children: (_b = item.children) == null ? void 0 : _b.map((child) => renderMenuItem(child, level + 1, currentKeyPath)) })
+    ] }, item.key);
+  };
+  const containerStyles = {
+    width: collapsed ? collapsedWidth : void 0,
+    backgroundColor: theme === "dark" ? "var(--lm-gray-900)" : "var(--lm-bg-elevated)",
+    transition: "width 0.2s ease-in-out"
+  };
+  const flexDirection = mode === "horizontal" ? "row" : "column";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "nav",
+    {
+      className: `flex ${className}`,
+      style: {
+        ...containerStyles,
+        flexDirection
+      },
+      role: "menu",
+      children: items.map((item) => renderMenuItem(item))
+    }
+  );
+};
+const MenuItem = ({
+  item,
+  collapsed,
+  hasChildren,
+  isOpen,
+  isSelected,
+  paddingClass,
+  textClass,
+  gapClass,
+  iconClass,
+  indentStyle,
+  getStyles,
+  getHoverStyles,
+  onSelect,
+  onToggle
+}) => {
+  const [isHovered, setIsHovered] = React.useState(false);
+  const baseStyles = getStyles(isSelected, item.disabled || false);
+  const hoverStyles = isHovered ? getHoverStyles(isSelected, item.disabled || false) : {};
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `
+        ${paddingClass} ${textClass}
+        flex items-center ${gapClass}
+        cursor-pointer transition-colors duration-150
+        rounded-lg mx-2 my-0.5
+        ${collapsed ? "justify-center" : ""}
+      `,
+      style: {
+        ...baseStyles,
+        ...hoverStyles,
+        ...indentStyle
+      },
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      onClick: () => {
+        if (hasChildren) {
+          onToggle();
+        } else {
+          onSelect();
+        }
+      },
+      role: "menuitem",
+      "aria-disabled": item.disabled || void 0,
+      "aria-expanded": hasChildren ? isOpen : void 0,
+      title: collapsed ? typeof item.label === "string" ? item.label : void 0 : void 0,
+      children: [
+        item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `flex-shrink-0 ${iconClass}`, children: item.icon }),
+        !collapsed && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: item.label }),
+          hasChildren && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: `flex-shrink-0 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`,
+              children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { className: "w-4 h-4" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+exports.LMMenu = LMMenu;
+//# sourceMappingURL=LMMenu-IDAgZFuC.cjs.map

package/dist/LMMenu-IDAgZFuC.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LMMenu-IDAgZFuC.cjs","sources":["../src/components/Navigation/LMMenu/LMMenu.tsx"],"sourcesContent":["import React, { useState, useCallback } from 'react'\nimport {\n  COMPONENT_SIZE_ORDER,\n  SIZE_TEXT_CLASSES,\n  SIZE_GAP_CLASSES,\n  clampComponentSize,\n} from '../../../utils/componentSizes'\nimport type { ComponentSize } from '../../../utils/componentSizes'\n\nexport interface LMMenuItem {\n  /** Unique key */\n  key: string\n  /** Menu item label */\n  label: React.ReactNode\n  /** Icon before label */\n  icon?: React.ReactNode\n  /** Disabled state */\n  disabled?: boolean\n  /** Sub menu items */\n  children?: LMMenuItem[]\n  /** Item type: group or divider */\n  type?: 'group' | 'divider'\n}\n\nexport interface LMMenuProps {\n  /** Menu items */\n  items: LMMenuItem[]\n  /** Menu mode */\n  mode?: 'vertical' | 'horizontal' | 'inline'\n  /** Menu theme */\n  theme?: 'light' | 'dark'\n  /** Selected keys (controlled) */\n  selectedKeys?: string[]\n  /** Default selected keys */\n  defaultSelectedKeys?: string[]\n  /** Open keys (controlled) */\n  openKeys?: string[]\n  /** Default open keys */\n  defaultOpenKeys?: string[]\n  /** Collapsed state (for inline mode) */\n  collapsed?: boolean\n  /** Collapsed width */\n  collapsedWidth?: number\n  /** Selection handler */\n  onSelect?: (key: string, keyPath: string[]) => void\n  /** Open change handler */\n  onOpenChange?: (openKeys: string[]) => void\n  /** Component size */\n  size?: ComponentSize\n  /** Custom class name */\n  className?: string\n}\n\nconst ChevronDownIcon: React.FC<{ className?: string }> = ({ className }) => (\n  <svg className={className || 'w-4 h-4'} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2}>\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n  </svg>\n)\n\n\nconst LMMenu: React.FC<LMMenuProps> = ({\n  items,\n  mode = 'inline',\n  theme = 'light',\n  selectedKeys: controlledSelectedKeys,\n  defaultSelectedKeys = [],\n  openKeys: controlledOpenKeys,\n  defaultOpenKeys = [],\n  collapsed = false,\n  collapsedWidth = 64,\n  onSelect,\n  onOpenChange,\n  size = 'md',\n  className = '',\n}) => {\n  const resolvedSize = clampComponentSize(size, COMPONENT_SIZE_ORDER)\n  const [internalSelectedKeys, setInternalSelectedKeys] = useState<string[]>(defaultSelectedKeys)\n  const [internalOpenKeys, setInternalOpenKeys] = useState<string[]>(defaultOpenKeys)\n\n  const selectedKeys = controlledSelectedKeys ?? internalSelectedKeys\n  const openKeys = controlledOpenKeys ?? internalOpenKeys\n\n  const itemPaddingClasses: Record<ComponentSize, string> = {\n    xs: 'px-3 py-1.5',\n    sm: 'px-3 py-2',\n    md: 'px-4 py-2.5',\n    lg: 'px-5 py-3',\n    xl: 'px-6 py-3.5',\n    '2xl': 'px-8 py-4',\n  }\n\n  const collapsedPaddingClasses: Record<ComponentSize, string> = {\n    xs: 'px-2 py-1.5',\n    sm: 'px-2.5 py-2',\n    md: 'px-3 py-2.5',\n    lg: 'px-3.5 py-3',\n    xl: 'px-4 py-3.5',\n    '2xl': 'px-5 py-4',\n  }\n\n  const iconSizeClasses: Record<ComponentSize, string> = {\n    xs: 'w-4 h-4',\n    sm: 'w-4 h-4',\n    md: 'w-5 h-5',\n    lg: 'w-5 h-5',\n    xl: 'w-6 h-6',\n    '2xl': 'w-6 h-6',\n  }\n\n  const handleSelect = useCallback((key: string, keyPath: string[]) => {\n    if (controlledSelectedKeys === undefined) {\n      setInternalSelectedKeys([key])\n    }\n    onSelect?.(key, keyPath)\n  }, [controlledSelectedKeys, onSelect])\n\n  const handleOpenChange = useCallback((key: string) => {\n    const newOpenKeys = openKeys.includes(key)\n      ? openKeys.filter((k) => k !== key)\n      : [...openKeys, key]\n\n    if (controlledOpenKeys === undefined) {\n      setInternalOpenKeys(newOpenKeys)\n    }\n    onOpenChange?.(newOpenKeys)\n  }, [openKeys, controlledOpenKeys, onOpenChange])\n\n  const getItemStyles = (isSelected: boolean, isDisabled: boolean): React.CSSProperties => {\n    if (isDisabled) {\n      return {\n        color: theme === 'dark' ? 'var(--lm-gray-600)' : 'var(--lm-text-disabled)',\n        cursor: 'not-allowed',\n      }\n    }\n\n    if (isSelected) {\n      return {\n        color: theme === 'dark' ? 'white' : 'var(--lm-primary-600)',\n        backgroundColor: theme === 'dark' ? 'var(--lm-primary-600)' : 'var(--lm-primary-50)',\n      }\n    }\n\n    return {\n      color: theme === 'dark' ? 'var(--lm-gray-200)' : 'var(--lm-text-primary)',\n      backgroundColor: 'transparent',\n    }\n  }\n\n  const getHoverStyles = (isSelected: boolean, isDisabled: boolean): React.CSSProperties => {\n    if (isDisabled || isSelected) return {}\n\n    return {\n      backgroundColor: theme === 'dark' ? 'var(--lm-gray-700)' : 'var(--lm-bg-hover)',\n    }\n  }\n\n  const renderMenuItem = (item: LMMenuItem, level: number = 0, keyPath: string[] = []) => {\n    if (item.type === 'divider') {\n      return (\n        <div\n          key={item.key}\n          className=\"my-2 mx-3 border-t\"\n          style={{ borderColor: theme === 'dark' ? 'var(--lm-gray-700)' : 'var(--lm-border-light)' }}\n        />\n      )\n    }\n\n    if (item.type === 'group') {\n      return (\n        <div key={item.key} className=\"py-2\">\n          <div\n            className={`${collapsed ? collapsedPaddingClasses[resolvedSize] : itemPaddingClasses[resolvedSize]} text-xs font-semibold uppercase tracking-wider`}\n            style={{ color: theme === 'dark' ? 'var(--lm-gray-500)' : 'var(--lm-text-tertiary)' }}\n          >\n            {!collapsed && item.label}\n          </div>\n          {item.children?.map((child) => renderMenuItem(child, level, [...keyPath, item.key]))}\n        </div>\n      )\n    }\n\n    const hasChildren = !!(item.children && item.children.length > 0)\n    const isOpen = openKeys.includes(item.key)\n    const isSelected = selectedKeys.includes(item.key)\n    const currentKeyPath = [...keyPath, item.key]\n    const indentStyle = !collapsed && mode === 'inline' ? { paddingLeft: `${16 + level * 16}px` } : {}\n\n    return (\n      <div key={item.key}>\n        <MenuItem\n          item={item}\n          size={resolvedSize}\n          collapsed={collapsed}\n          hasChildren={hasChildren}\n          isOpen={isOpen}\n          isSelected={isSelected}\n          theme={theme}\n          mode={mode}\n          paddingClass={collapsed ? collapsedPaddingClasses[resolvedSize] : itemPaddingClasses[resolvedSize]}\n          textClass={SIZE_TEXT_CLASSES[resolvedSize]}\n          gapClass={SIZE_GAP_CLASSES[resolvedSize]}\n          iconClass={iconSizeClasses[resolvedSize]}\n          indentStyle={indentStyle}\n          getStyles={getItemStyles}\n          getHoverStyles={getHoverStyles}\n          onSelect={() => {\n            if (!item.disabled && !hasChildren) {\n              handleSelect(item.key, currentKeyPath)\n            }\n          }}\n          onToggle={() => {\n            if (hasChildren && !item.disabled) {\n              handleOpenChange(item.key)\n            }\n          }}\n        />\n\n        {/* Sub menu */}\n        {hasChildren && isOpen && !collapsed && mode === 'inline' && (\n          <div className=\"overflow-hidden transition-all duration-200\">\n            {item.children?.map((child) => renderMenuItem(child, level + 1, currentKeyPath))}\n          </div>\n        )}\n      </div>\n    )\n  }\n\n  const containerStyles: React.CSSProperties = {\n    width: collapsed ? collapsedWidth : undefined,\n    backgroundColor: theme === 'dark' ? 'var(--lm-gray-900)' : 'var(--lm-bg-elevated)',\n    transition: 'width 0.2s ease-in-out',\n  }\n\n  const flexDirection = mode === 'horizontal' ? 'row' : 'column'\n\n  return (\n    <nav\n      className={`flex ${className}`}\n      style={{\n        ...containerStyles,\n        flexDirection,\n      }}\n      role=\"menu\"\n    >\n      {items.map((item) => renderMenuItem(item))}\n    </nav>\n  )\n}\n\n// Separate MenuItem component for hover state\ninterface MenuItemInternalProps {\n  item: LMMenuItem\n  size: ComponentSize\n  collapsed: boolean\n  hasChildren: boolean\n  isOpen: boolean\n  isSelected: boolean\n  theme: 'light' | 'dark'\n  mode: 'vertical' | 'horizontal' | 'inline'\n  paddingClass: string\n  textClass: string\n  gapClass: string\n  iconClass: string\n  indentStyle: React.CSSProperties\n  getStyles: (isSelected: boolean, isDisabled: boolean) => React.CSSProperties\n  getHoverStyles: (isSelected: boolean, isDisabled: boolean) => React.CSSProperties\n  onSelect: () => void\n  onToggle: () => void\n}\n\nconst MenuItem: React.FC<MenuItemInternalProps> = ({\n  item,\n  collapsed,\n  hasChildren,\n  isOpen,\n  isSelected,\n  paddingClass,\n  textClass,\n  gapClass,\n  iconClass,\n  indentStyle,\n  getStyles,\n  getHoverStyles,\n  onSelect,\n  onToggle,\n}) => {\n  const [isHovered, setIsHovered] = useState(false)\n\n  const baseStyles = getStyles(isSelected, item.disabled || false)\n  const hoverStyles = isHovered ? getHoverStyles(isSelected, item.disabled || false) : {}\n\n  return (\n    <div\n      className={`\n        ${paddingClass} ${textClass}\n        flex items-center ${gapClass}\n        cursor-pointer transition-colors duration-150\n        rounded-lg mx-2 my-0.5\n        ${collapsed ? 'justify-center' : ''}\n      `}\n      style={{\n        ...baseStyles,\n        ...hoverStyles,\n        ...indentStyle,\n      }}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      onClick={() => {\n        if (hasChildren) {\n          onToggle()\n        } else {\n          onSelect()\n        }\n      }}\n      role=\"menuitem\"\n      aria-disabled={item.disabled || undefined}\n      aria-expanded={hasChildren ? isOpen : undefined}\n      title={collapsed ? (typeof item.label === 'string' ? item.label : undefined) : undefined}\n    >\n      {item.icon && (\n        <span className={`flex-shrink-0 ${iconClass}`}>{item.icon}</span>\n      )}\n\n      {!collapsed && (\n        <>\n          <span className=\"flex-1 truncate\">{item.label}</span>\n\n          {hasChildren && (\n            <span\n              className={`flex-shrink-0 transition-transform duration-200 ${\n                isOpen ? 'rotate-180' : ''\n              }`}\n            >\n              <ChevronDownIcon className=\"w-4 h-4\" />\n            </span>\n          )}\n        </>\n      )}\n    </div>\n  )\n}\n\nexport default LMMenu\n"],"names":["jsx","clampComponentSize","COMPONENT_SIZE_ORDER","useState","useCallback","jsxs","SIZE_TEXT_CLASSES","SIZE_GAP_CLASSES","Fragment"],"mappings":"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"}