@mars-stack/ui 1.0.0

package/dist/index.js

@@ -0,0 +1,544 @@
+"use client";
+import { __export } from './chunk-MLKGABMK.js';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import clsx11 from 'clsx';
+import Link from 'next/link';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import Image from 'next/image';
+
+var baseStyles = "inline-flex items-center justify-center font-medium rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer whitespace-nowrap";
+var variantStyles = {
+  primary: "bg-brand-primary text-text-on-brand hover:bg-brand-primary-hover focus:ring-ring-focus",
+  secondary: "border border-brand-primary text-brand-primary bg-transparent hover:bg-brand-primary-muted focus:ring-ring-focus",
+  subtle: "bg-ghost-hover text-text-primary hover:bg-ghost-active focus:ring-ring-focus",
+  danger: "bg-danger-bg text-text-on-danger hover:bg-danger-hover focus:ring-ring-focus"
+};
+var sizeStyles = {
+  sm: "px-3 py-1.5 text-sm",
+  md: "px-4 py-2 text-base",
+  lg: "px-6 py-3 text-lg"
+};
+function getButtonClasses({
+  variant,
+  size,
+  fullWidth,
+  className
+}) {
+  return clsx11(baseStyles, variantStyles[variant], sizeStyles[size], fullWidth && "w-full", className);
+}
+function ButtonContent({
+  loading,
+  icon,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    loading ? /* @__PURE__ */ jsx("span", { className: "mr-2 inline-block h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent align-middle" }) : icon && /* @__PURE__ */ jsx("span", { className: "ml-2 inline-flex items-center", children: icon })
+  ] });
+}
+var Button = React.forwardRef(
+  ({
+    children,
+    variant = "primary",
+    size = "md",
+    disabled = false,
+    loading = false,
+    fullWidth = false,
+    icon,
+    type = "button",
+    className,
+    onClick,
+    ...props
+  }, ref) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type,
+      disabled: disabled || loading,
+      className: getButtonClasses({ variant, size, fullWidth, className }),
+      onClick,
+      "aria-disabled": disabled || loading,
+      ...props,
+      children: /* @__PURE__ */ jsx(ButtonContent, { loading, icon, children })
+    }
+  )
+);
+Button.displayName = "Button";
+var LinkButton = React.forwardRef(
+  ({
+    children,
+    href,
+    variant = "primary",
+    size = "md",
+    disabled = false,
+    loading = false,
+    fullWidth = false,
+    icon,
+    className,
+    onClick,
+    ...props
+  }, ref) => /* @__PURE__ */ jsx(
+    Link,
+    {
+      href,
+      ref,
+      className: getButtonClasses({ variant, size, fullWidth, className }),
+      "aria-disabled": disabled || loading,
+      tabIndex: disabled ? -1 : 0,
+      onClick,
+      ...props,
+      children: /* @__PURE__ */ jsx(ButtonContent, { loading, icon, children })
+    }
+  )
+);
+LinkButton.displayName = "LinkButton";
+var Input = React.forwardRef(
+  ({ label, error, helperText, fullWidth = false, className, id, type, showPasswordToggle = false, ...props }, ref) => {
+    const [showPassword, setShowPassword] = useState(false);
+    const inputId = id || label?.toLowerCase().replace(/\s+/g, "-");
+    const inputType = showPasswordToggle && type === "password" ? showPassword ? "text" : "password" : type;
+    return /* @__PURE__ */ jsxs("div", { className: clsx11("flex flex-col gap-1", fullWidth && "w-full", className), children: [
+      label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "block text-sm font-medium text-text-primary", children: label }),
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            id: inputId,
+            type: inputType,
+            className: clsx11(
+              "block w-full rounded-md border border-border-input bg-surface-input px-3 py-2 text-text-primary placeholder:text-text-muted focus:border-border-focus focus:outline-none focus:ring-1 focus:ring-ring-focus",
+              error && "border-border-error focus:border-border-error focus:ring-error",
+              showPasswordToggle && type === "password" && "pr-10"
+            ),
+            ...props
+          }
+        ),
+        showPasswordToggle && type === "password" && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "absolute top-0 right-0 bottom-0 flex h-full w-10 shrink-0 items-center justify-center p-0 text-text-muted hover:text-text-secondary",
+            onClick: () => setShowPassword(!showPassword),
+            tabIndex: -1,
+            children: showPassword ? /* @__PURE__ */ jsx("svg", { className: "h-4 w-4 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21" }) }) : /* @__PURE__ */ jsxs("svg", { className: "h-4 w-4 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
+              /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" }),
+              /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" })
+            ] })
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-text-error", children: error }),
+      helperText && !error && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-text-muted", children: helperText })
+    ] });
+  }
+);
+Input.displayName = "Input";
+var Checkbox = React.forwardRef(
+  ({ label, error, className, id, ...props }, ref) => {
+    const checkboxId = id || (typeof label === "string" && label ? label.toLowerCase().replace(/\s+/g, "-") : void 0);
+    return /* @__PURE__ */ jsxs("div", { className: clsx11("flex flex-col gap-1", className), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex h-5 items-center", children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            id: checkboxId,
+            type: "checkbox",
+            className: clsx11(
+              "h-4 w-4 rounded border-border-input text-brand-primary focus:ring-ring-focus",
+              error && "border-border-error"
+            ),
+            ...props
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: "ml-3 text-sm", children: /* @__PURE__ */ jsx(
+          "label",
+          {
+            htmlFor: checkboxId,
+            className: clsx11("font-medium text-text-secondary", error && "text-text-error"),
+            children: label
+          }
+        ) })
+      ] }),
+      error && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-text-error", children: error })
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+var Select = React.forwardRef(
+  ({ label, error, helperText, fullWidth = false, className, id, options, placeholder, ...props }, ref) => {
+    const selectId = id || label?.toLowerCase().replace(/\s+/g, "-");
+    return /* @__PURE__ */ jsxs("div", { className: clsx11("flex flex-col gap-1", fullWidth && "w-full", className), children: [
+      label && /* @__PURE__ */ jsx("label", { htmlFor: selectId, className: "block text-sm font-medium text-text-primary", children: label }),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          ref,
+          id: selectId,
+          className: clsx11(
+            "block w-full rounded-md border border-border-input bg-surface-input px-3 py-2 text-text-primary focus:border-border-focus focus:outline-none focus:ring-1 focus:ring-ring-focus",
+            error && "border-border-error focus:border-border-error focus:ring-error"
+          ),
+          ...props,
+          children: [
+            placeholder !== void 0 && /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }),
+            options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+          ]
+        }
+      ),
+      error && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-text-error", children: error }),
+      helperText && !error && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-text-muted", children: helperText })
+    ] });
+  }
+);
+Select.displayName = "Select";
+var Textarea = React.forwardRef(
+  ({ label, error, helperText, fullWidth = false, className, id, ...props }, ref) => {
+    const textareaId = id || label?.toLowerCase().replace(/\s+/g, "-");
+    return /* @__PURE__ */ jsxs("div", { className: clsx11("flex flex-col gap-1", fullWidth && "w-full", className), children: [
+      label && /* @__PURE__ */ jsx("label", { htmlFor: textareaId, className: "block text-sm font-medium text-text-primary", children: label }),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref,
+          id: textareaId,
+          className: clsx11(
+            "block w-full rounded-md border border-border-input bg-surface-input px-3 py-2 text-text-primary placeholder:text-text-muted focus:border-border-focus focus:outline-none focus:ring-1 focus:ring-ring-focus",
+            error && "border-border-error focus:border-border-error focus:ring-error"
+          ),
+          ...props
+        }
+      ),
+      error && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-text-error", children: error }),
+      helperText && !error && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-text-muted", children: helperText })
+    ] });
+  }
+);
+Textarea.displayName = "Textarea";
+var variantStyles2 = {
+  success: "bg-success-muted text-text-success",
+  warning: "bg-warning-muted text-text-warning",
+  error: "bg-error-muted text-text-error",
+  neutral: "bg-surface-hover text-text-secondary",
+  info: "bg-info-muted text-text-info"
+};
+var Badge = ({ children, variant = "neutral", className }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: clsx11(
+      "inline-flex items-center gap-1.5 rounded-md px-2.5 py-0.5 text-xs font-medium",
+      variantStyles2[variant],
+      className
+    ),
+    children
+  }
+);
+Badge.displayName = "Badge";
+var sizeStyles2 = {
+  sm: "h-8 w-8 text-xs",
+  md: "h-10 w-10 text-sm",
+  lg: "h-12 w-12 text-base",
+  xl: "h-16 w-16 text-lg"
+};
+function getInitials(name) {
+  return name.split(" ").map((word) => word[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
+}
+var Avatar = ({ src, alt = "", name, size = "md", className }) => {
+  if (src) {
+    const pixelSize = { sm: 32, md: 40, lg: 48, xl: 64 }[size];
+    return /* @__PURE__ */ jsx(
+      Image,
+      {
+        src,
+        alt: alt || name || "",
+        width: pixelSize,
+        height: pixelSize,
+        className: clsx11("rounded-full object-cover", sizeStyles2[size], className)
+      }
+    );
+  }
+  const initials = name ? getInitials(name) : "?";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx11(
+        "flex items-center justify-center rounded-full bg-avatar-bg font-medium text-avatar-text",
+        sizeStyles2[size],
+        className
+      ),
+      role: "img",
+      "aria-label": alt || name || "avatar",
+      children: initials
+    }
+  );
+};
+Avatar.displayName = "Avatar";
+var Divider = ({ children, className }) => {
+  if (!children) {
+    return /* @__PURE__ */ jsx("hr", { className: clsx11("border-t border-border-divider", className) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: clsx11("relative", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center", "aria-hidden": "true", children: /* @__PURE__ */ jsx("div", { className: "w-full border-t border-border-divider" }) }),
+    /* @__PURE__ */ jsx("div", { className: "relative flex justify-center", children: /* @__PURE__ */ jsx("span", { className: "bg-surface-card px-4 text-sm text-text-muted", children }) })
+  ] });
+};
+Divider.displayName = "Divider";
+var sizeStyles3 = {
+  sm: "h-4 w-4 border-2",
+  md: "h-6 w-6 border-2",
+  lg: "h-8 w-8 border-[3px]"
+};
+var Spinner = ({ size = "md", className, label = "Loading" }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: clsx11(
+      "inline-block animate-spin rounded-full border-brand-primary border-t-transparent",
+      sizeStyles3[size],
+      className
+    ),
+    role: "status",
+    "aria-label": label
+  }
+);
+Spinner.displayName = "Spinner";
+var Table = ({ className, children }) => /* @__PURE__ */ jsx("div", { className: clsx11("overflow-x-auto", className), children: /* @__PURE__ */ jsx("table", { className: "min-w-full text-left rounded-lg text-base leading-relaxed overflow-hidden", children }) });
+var TableHead = ({ children, className }) => /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: clsx11("font-bold bg-table-header-bg", className), children }) });
+var TableBody = ({ children }) => /* @__PURE__ */ jsx("tbody", { children });
+var TableRow = ({ children, className }) => /* @__PURE__ */ jsx(
+  "tr",
+  {
+    className: clsx11("bg-surface-card border-b border-table-border hover:bg-table-row-hover", className),
+    children
+  }
+);
+var TableHeaderCell = ({
+  children,
+  className
+}) => /* @__PURE__ */ jsx("th", { className: clsx11("py-2 px-4 text-table-header-text font-semibold whitespace-nowrap", className), children });
+var TableCell = ({ children, className }) => /* @__PURE__ */ jsx("td", { className: clsx11("px-4 py-2 align-middle text-text-primary", className), children });
+var JsonLd = ({ data }) => /* @__PURE__ */ jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } });
+JsonLd.displayName = "JsonLd";
+
+// src/components/primitives/Text.tsx
+var Text_exports = {};
+__export(Text_exports, {
+  Blockquote: () => Blockquote,
+  Cite: () => Cite,
+  H1: () => H1,
+  H2: () => H2,
+  H3: () => H3,
+  H4: () => H4,
+  Paragraph: () => Paragraph,
+  TextLink: () => TextLink
+});
+var H1 = ({ children, as: Component = "h1", noMargin = false, className }) => /* @__PURE__ */ jsx(Component, { className: clsx11("text-4xl font-bold leading-tight text-text-primary", !noMargin && "mb-4", className), children });
+var H2 = ({ children, as: Component = "h2", noMargin = false, className }) => /* @__PURE__ */ jsx(Component, { className: clsx11("text-3xl font-bold leading-tight text-text-primary", !noMargin && "mb-2", className), children });
+var H3 = ({ children, as: Component = "h3", noMargin = false, className }) => /* @__PURE__ */ jsx(Component, { className: clsx11("text-2xl font-bold leading-tight text-text-primary", !noMargin && "mb-1", className), children });
+var H4 = ({ children, as: Component = "h4", noMargin = false, className }) => /* @__PURE__ */ jsx(Component, { className: clsx11("text-xl font-bold text-text-primary", !noMargin && "mb-1", className), children });
+var Paragraph = ({
+  children,
+  noMargin = false,
+  className
+}) => /* @__PURE__ */ jsx("p", { className: clsx11("text-base leading-relaxed text-text-secondary", !noMargin && "mb-4", className), children });
+var TextLink = ({ href, children, className, target, rel }) => /* @__PURE__ */ jsx(
+  "a",
+  {
+    href,
+    target,
+    rel,
+    className: clsx11(
+      "text-base font-medium text-text-link hover:text-text-link-hover hover:underline transition-colors duration-150 whitespace-nowrap",
+      className
+    ),
+    children
+  }
+);
+var Cite = ({ children, className }) => /* @__PURE__ */ jsxs("cite", { className: clsx11("not-italic text-text-primary block", className), children: [
+  "\u2014 ",
+  children
+] });
+var Blockquote = ({
+  children,
+  noMargin = false,
+  className
+}) => /* @__PURE__ */ jsx(
+  "blockquote",
+  {
+    className: clsx11("text-lg italic border-l-4 border-border-default pl-4 text-text-secondary", !noMargin && "mb-4", className),
+    children: /* @__PURE__ */ jsx("div", { className: "mb-2", children })
+  }
+);
+var paddingStyles = {
+  none: "",
+  sm: "p-4",
+  md: "p-6",
+  lg: "p-8"
+};
+var Card = ({ children, className, padding = "md" }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: clsx11(
+      "rounded-xl border border-border-default bg-surface-card shadow-xs",
+      paddingStyles[padding],
+      className
+    ),
+    children
+  }
+);
+Card.displayName = "Card";
+var CardHeader = ({ children, className }) => /* @__PURE__ */ jsx("div", { className: clsx11("border-b border-border-divider px-6 py-4", className), children });
+CardHeader.displayName = "CardHeader";
+var CardBody = ({ children, className }) => /* @__PURE__ */ jsx("div", { className: clsx11("px-6 py-4", className), children });
+CardBody.displayName = "CardBody";
+var CardFooter = ({ children, className }) => /* @__PURE__ */ jsx("div", { className: clsx11("border-t border-border-divider px-6 py-4", className), children });
+CardFooter.displayName = "CardFooter";
+var Modal = ({ open, onClose, title, children, className }) => {
+  const dialogRef = useRef(null);
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open && !dialog.open) {
+      dialog.showModal();
+    } else if (!open && dialog.open) {
+      dialog.close();
+    }
+  }, [open]);
+  const handleBackdropClick = useCallback(
+    (e) => {
+      if (e.target === dialogRef.current) {
+        onClose();
+      }
+    },
+    [onClose]
+  );
+  return /* @__PURE__ */ jsx(
+    "dialog",
+    {
+      ref: dialogRef,
+      onClose,
+      onClick: handleBackdropClick,
+      "aria-labelledby": "modal-title",
+      className: "backdrop:bg-surface-overlay bg-transparent p-0 m-auto max-w-md w-full open:flex open:items-center open:justify-center",
+      children: /* @__PURE__ */ jsxs("div", { className: clsx11("bg-surface-card rounded-xl shadow-xl p-6 w-full", className), children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+          /* @__PURE__ */ jsx("h2", { id: "modal-title", className: "text-lg font-semibold text-text-primary", children: title }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onClose,
+              "aria-label": "Close",
+              className: "rounded-full p-1.5 text-text-muted hover:text-text-secondary hover:bg-ghost-hover transition-colors",
+              children: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "text-sm text-text-secondary leading-relaxed", children })
+      ] })
+    }
+  );
+};
+Modal.displayName = "Modal";
+var variantStyles3 = {
+  success: "border-border-success bg-success-muted text-text-success",
+  error: "border-border-error bg-error-muted text-text-error",
+  warning: "border-l-warning bg-warning-muted text-text-warning",
+  info: "border-l-info bg-info-muted text-text-info"
+};
+var iconByVariant = {
+  success: "M5 13l4 4L19 7",
+  error: "M6 18L18 6M6 6l12 12",
+  warning: "M12 9v2m0 4h.01M12 3l9.66 16.5H2.34L12 3z",
+  info: "M13 16h-1v-4h-1m1-4h.01M12 2a10 10 0 100 20 10 10 0 000-20z"
+};
+var Toast = ({
+  message,
+  variant = "info",
+  duration = 5e3,
+  onDismiss,
+  className
+}) => {
+  const [visible, setVisible] = useState(true);
+  const dismiss = useCallback(() => {
+    setVisible(false);
+    onDismiss?.();
+  }, [onDismiss]);
+  useEffect(() => {
+    if (duration <= 0) return;
+    const timer = setTimeout(dismiss, duration);
+    return () => clearTimeout(timer);
+  }, [duration, dismiss]);
+  if (!visible) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "alert",
+      className: clsx11(
+        "flex items-center gap-3 rounded-lg border-l-4 px-4 py-3 shadow-md",
+        variantStyles3[variant],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("svg", { className: "h-5 w-5 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: iconByVariant[variant] }) }),
+        /* @__PURE__ */ jsx("p", { className: "flex-1 text-sm font-medium", children: message }),
+        /* @__PURE__ */ jsx("button", { onClick: dismiss, className: "shrink-0 rounded p-1 hover:opacity-70 transition-opacity", "aria-label": "Dismiss", children: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }) })
+      ]
+    }
+  );
+};
+Toast.displayName = "Toast";
+var strengthColors = {
+  Strong: "text-text-success",
+  Medium: "text-text-warning",
+  Weak: "text-text-error"
+};
+var PasswordStrengthIndicator = ({
+  strength,
+  requirements,
+  className
+}) => /* @__PURE__ */ jsxs("div", { className: clsx11("space-y-2", className), children: [
+  /* @__PURE__ */ jsxs("div", { className: "text-xs text-text-secondary", children: [
+    "Password strength: ",
+    /* @__PURE__ */ jsx("span", { className: strengthColors[strength], children: strength })
+  ] }),
+  /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2 text-xs", children: [
+    [requirements.length, "8-100 characters"],
+    [requirements.lowercase, "Lowercase letter"],
+    [requirements.uppercase, "Uppercase letter"],
+    [requirements.number, "Number"],
+    [requirements.special, "Special character"],
+    [requirements.noPassword, 'No "password"'],
+    [requirements.noSequential, 'No "123"']
+  ].map(([met, label]) => /* @__PURE__ */ jsxs("div", { className: clsx11(met ? "text-text-success" : "text-text-muted"), children: [
+    "\u2713 ",
+    label
+  ] }, label)) })
+] });
+PasswordStrengthIndicator.displayName = "PasswordStrengthIndicator";
+var EmptyState = ({ icon, title, description, action, className }) => /* @__PURE__ */ jsxs("div", { className: clsx11("flex flex-col items-center justify-center py-12 px-4 text-center", className), children: [
+  icon && /* @__PURE__ */ jsx("div", { className: "mb-4 text-text-muted", children: icon }),
+  /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-text-primary mb-1", children: title }),
+  description && /* @__PURE__ */ jsx("p", { className: "text-sm text-text-secondary mb-6 max-w-sm", children: description }),
+  action && /* @__PURE__ */ jsx("div", { children: action })
+] });
+EmptyState.displayName = "EmptyState";
+var FormField = ({
+  label,
+  error,
+  helperText,
+  required,
+  children,
+  className,
+  htmlFor
+}) => /* @__PURE__ */ jsxs("div", { className: clsx11("flex flex-col gap-1", className), children: [
+  label && /* @__PURE__ */ jsxs("label", { htmlFor, className: "block text-sm font-medium text-text-primary", children: [
+    label,
+    required && /* @__PURE__ */ jsx("span", { className: "text-text-error ml-0.5", children: "*" })
+  ] }),
+  children,
+  error && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-text-error", children: error }),
+  helperText && !error && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-text-muted", children: helperText })
+] });
+FormField.displayName = "FormField";
+
+export { Avatar, Badge, Button, Card, CardBody, CardFooter, CardHeader, Checkbox, Divider, EmptyState, FormField, Input, JsonLd, LinkButton, Modal, PasswordStrengthIndicator, Select, Spinner, Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow, Text_exports as Text, Textarea, Toast };

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@mars-stack/ui",
+  "version": "1.0.0",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/greaveselliott/mars.git"
+  },
+  "homepage": "https://github.com/greaveselliott/mars#readme",
+  "keywords": [
+    "saas",
+    "nextjs",
+    "prisma",
+    "auth",
+    "fullstack",
+    "ui"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "import": "./dist/hooks/index.js"
+    },
+    "./styles/*": "./styles/*"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "restricted"
+  },
+  "files": [
+    "dist",
+    "styles"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "yarn build"
+  },
+  "peerDependencies": {
+    "@mars-stack/core": ">=0.4.0",
+    "clsx": ">=2",
+    "next": ">=14",
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "@mars-stack/core": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.2.3",
+    "clsx": "^2.1.1",
+    "jsdom": "^28.1.0",
+    "next": "^16.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.2.4",
+    "tsup": "^8.0.0",
+    "typescript": "^5.7.0",
+    "vitest": "^4.0.18",
+    "zod": "^4.3.6"
+  }
+}

package/styles/breakpoints.css

@@ -0,0 +1,11 @@
+/* MARS Design System: Responsive Breakpoints
+ * Mobile-first breakpoint system.
+ * Use min-width media queries: sm, md, lg, xl, 2xl. */
+
+:root {
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
+}

package/styles/index.css

@@ -0,0 +1,8 @@
+/* MARS Design System: Single entry point
+ * Import this in your app's globals.css.
+ * Override --brand-* in a separate brand.css for project-specific colours. */
+
+@import './primitives.css';
+@import './tokens.css';
+@import './theme.css';
+@import './breakpoints.css';