@sirlund/mindset-ui 0.1.0

package/dist/index.cjs

@@ -0,0 +1,521 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Button: () => Button,
+  Card: () => Card,
+  Icon: () => Icon,
+  colors: () => colors,
+  getCSSVar: () => getCSSVar,
+  spacing: () => spacing,
+  tokens: () => tokens_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/Button/Button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Button = ({
+  children,
+  variant = "primary",
+  size = "medium",
+  disabled = false,
+  loading = false,
+  fullWidth = false,
+  startIcon,
+  endIcon,
+  onClick,
+  type = "button",
+  className = "",
+  ...props
+}) => {
+  const baseClasses = "btn";
+  const variantClass = `btn--${variant}`;
+  const sizeClass = `btn--${size}`;
+  const disabledClass = disabled ? "btn--disabled" : "";
+  const loadingClass = loading ? "btn--loading" : "";
+  const fullWidthClass = fullWidth ? "btn--full-width" : "";
+  const classes = [
+    baseClasses,
+    variantClass,
+    sizeClass,
+    disabledClass,
+    loadingClass,
+    fullWidthClass,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      type,
+      className: classes,
+      disabled: disabled || loading,
+      onClick,
+      ...props,
+      children: [
+        loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "btn__spinner", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "svg",
+          {
+            className: "btn__spinner-icon",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "circle",
+              {
+                className: "btn__spinner-circle",
+                cx: "12",
+                cy: "12",
+                r: "9",
+                stroke: "currentColor",
+                strokeWidth: "3",
+                strokeLinecap: "round"
+              }
+            )
+          }
+        ) }),
+        startIcon && !loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "btn__icon btn__icon--start", "aria-hidden": "true", children: startIcon }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "btn__content", children }),
+        endIcon && !loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "btn__icon btn__icon--end", "aria-hidden": "true", children: endIcon })
+      ]
+    }
+  );
+};
+
+// src/components/Card/Card.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var PlanIcons = ({ planType = "Starter" }) => {
+  if (planType === "Individual") {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "plan-icon plan-icon--individual", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "plan-icon__square plan-icon__square--top-left" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "plan-icon__square plan-icon__square--bottom-left" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "plan-icon__square plan-icon__square--top-right" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "plan-icon__square plan-icon__square--bottom-right" })
+    ] });
+  }
+  if (planType === "Teams") {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "plan-icon plan-icon--teams", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "plan-icon__square plan-icon__square--top-left" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "plan-icon__square plan-icon__square--middle-left" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "plan-icon__square plan-icon__square--bottom-center" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "plan-icon__square plan-icon__square--top-center" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "plan-icon__square plan-icon__square--middle-right" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "plan-icon__square plan-icon__square--center" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "plan-icon__square plan-icon__square--bottom-right" })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "plan-icon plan-icon--starter", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "plan-icon__square plan-icon__square--left" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "plan-icon__square plan-icon__square--right" })
+  ] });
+};
+var Card = ({
+  plan = "Starter",
+  price = 0,
+  pricePeriod = "/Month",
+  seats = 1,
+  canEditSeats = false,
+  nextBillingAmount = 0,
+  renewalDate = "Sep 07, 2024",
+  className = "",
+  onActionClick
+}) => {
+  const getPlanPrice = () => {
+    switch (plan) {
+      case "Individual":
+        return 20;
+      case "Teams":
+        return 49;
+      default:
+        return 0;
+    }
+  };
+  const getSeatsText = () => {
+    if (plan === "Teams") {
+      return `${seats} Monthly seats`;
+    }
+    return "1 Monthly seat";
+  };
+  const getUpgradeText = () => {
+    if (plan === "Starter" || plan === "Individual") {
+      return "Upgrade to Teams unlock multiple seats";
+    }
+    return "";
+  };
+  const getNextBillingAmount = () => {
+    if (plan === "Teams") {
+      return price * seats;
+    }
+    return nextBillingAmount;
+  };
+  const actualPrice = price || getPlanPrice();
+  const actualNextBilling = getNextBillingAmount();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `card ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "card__container", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "card__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "card__header-title", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "card__header-icon", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M8 2V5M16 2V5M3.5 9.09H20.5M21 8.5V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V8.5C3 5.5 4.5 3.5 8 3.5H16C19.5 3.5 21 5.5 21 8.5Z", stroke: "#6d6d6e", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 13.2H12.01M8.8 13.2H8.81M15.2 13.2H15.21", stroke: "#6d6d6e", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "card__header-text", children: "Plan" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "card__header-action", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          className: "card__action-button",
+          onClick: onActionClick,
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "card__action-text", children: "Edit" })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "card__body", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "card__content", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "card__plan", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "card__plan-icon", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PlanIcons, { planType: plan }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "card__plan-name", children: plan })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "card__price-section", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "card__price", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "card__price-currency", children: "$" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "card__price-amount", children: actualPrice }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "card__price-period", children: pricePeriod })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "card__seats", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "card__seats-divider" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "card__seats-info", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "card__seats-count", children: plan === "Teams" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "card__seats-teams", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "card__seats-multiplier", children: "x" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "card__seats-number", children: seats }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "card__seats-text", children: "Monthly seats" }),
+              canEditSeats && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "card__seats-edit", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Edit" }) })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "card__seats-number", children: "1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "card__seats-text", children: "Monthly seat" })
+            ] }) }),
+            getUpgradeText() && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "card__seats-upgrade", children: getUpgradeText() })
+          ] })
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "card__footer", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "card__footer-left", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "card__footer-price", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "card__footer-currency", children: "$" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "card__footer-amount", children: actualNextBilling })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "card__footer-label", children: "Next plan bill" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "card__footer-right", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "card__footer-renewal", children: "Renews on" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "card__footer-date", children: renewalDate })
+      ] })
+    ] })
+  ] }) });
+};
+
+// src/components/Icon/Icon.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Icon = ({
+  name,
+  size = "M",
+  className = "",
+  color = "#29292a",
+  onClick
+}) => {
+  const sizeMap = {
+    XS: 16,
+    S: 20,
+    M: 24,
+    L: 32
+  };
+  const iconSize = sizeMap[size];
+  const iconPaths = {
+    "add": "M12 5v14M5 12h14",
+    "add-circle": "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM12 8v8M8 12h8",
+    "alert-circle": "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM12 8v4M12 16h.01",
+    "alert-triangle": "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h.01",
+    "archive": "M21 8v13H3V8M1 3h22l-1 5H2zM10 12h4",
+    "arrow-down": "M12 5v14M19 12l-7 7-7-7",
+    "arrow-left": "M19 12H5M12 19l-7-7 7-7",
+    "arrow-right": "M5 12h14M12 5l7 7-7 7",
+    "arrow-up": "M12 19V5M5 12l7-7 7 7",
+    "bell": "M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0",
+    "trash": "M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M10 11v6M14 11v6",
+    "building": "M3 21h18M5 21V7l8-4v18M19 21V11l-6-4",
+    "calendar": "M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z",
+    "camera": "M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2zM12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8z",
+    "check": "M20 6L9 17l-5-5",
+    "chevron-down": "M6 9l6 6 6-6",
+    "chevron-left": "M15 18l-6-6 6-6",
+    "chevron-right": "M9 18l6-6-6-6",
+    "chevron-up": "M18 15l-6-6-6 6",
+    "close": "M18 6L6 18M6 6l12 12",
+    "mail": "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2zM22 6l-10 7L2 6",
+    "folder": "M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z",
+    "folder-open": "M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2zM2 9h20",
+    "lock": "M19 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2zM7 11V7a5 5 0 0 1 10 0v4",
+    "menu": "M3 12h18M3 6h18M3 18h18",
+    "pencil": "M12 20h9M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z",
+    "question-circle": "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z",
+    "remove": "M18 6L6 18M6 6l12 12",
+    "search": "M21 21l-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0z",
+    "settings": "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z",
+    "upload": "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12",
+    "user": "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z",
+    "view": "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8zM12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z",
+    "view-off": "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24M1 1l22 22"
+  };
+  const path = iconPaths[name];
+  if (!path) {
+    console.warn(`Icon "${name}" not found`);
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      className: `icon icon--${size.toLowerCase()} ${className}`,
+      onClick,
+      style: { color },
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "svg",
+        {
+          width: iconSize,
+          height: iconSize,
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: path })
+        }
+      )
+    }
+  );
+};
+
+// src/tokens/tokens.ts
+var tokens = {
+  // Scale
+  scale: {
+    0: "0px",
+    12.5: "1px",
+    25: "2px",
+    50: "4px",
+    75: "6px",
+    100: "8px",
+    150: "12px",
+    175: "14px",
+    200: "16px",
+    250: "20px",
+    300: "24px",
+    400: "32px",
+    500: "40px",
+    600: "48px",
+    700: "56px",
+    800: "64px",
+    900: "72px",
+    1e3: "80px",
+    2e3: "160px",
+    2500: "200px"
+  },
+  // Typography
+  typography: {
+    fontFamily: {
+      default: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+      mono: "'Fira Code', 'Monaco', 'Courier New', monospace"
+    },
+    fontSize: {
+      xs: "12px",
+      s: "14px",
+      m: "16px",
+      l: "20px",
+      xl: "24px"
+    }
+  },
+  // Spacing/Gap
+  gap: {
+    none: "0px",
+    "3xs": "2px",
+    "2xs": "4px",
+    xs: "8px",
+    s: "12px",
+    m: "16px",
+    l: "20px",
+    xl: "24px",
+    "2xl": "32px",
+    "3xl": "40px",
+    "4xl": "48px",
+    "5xl": "56px",
+    "6xl": "64px",
+    "7xl": "80px"
+  },
+  // Border Radius
+  radius: {
+    none: "0px",
+    xs: "4px",
+    s: "6px",
+    m: "8px",
+    l: "12px",
+    xl: "16px",
+    rounded: "9999px"
+  },
+  // Stroke Width
+  stroke: {
+    none: "0px",
+    thin: "1px",
+    light: "1.25px",
+    medium: "1.5px",
+    large: "2px"
+  },
+  // Container Max Widths
+  maxWidth: {
+    mobile: "480px",
+    tabletPortrait: "768px",
+    tabletLandscape: "1024px",
+    desktop: "1440px",
+    desktopLg: "1600px",
+    desktopXl: "1980px"
+  }
+};
+var getCSSVar = (name) => `var(--${name})`;
+var spacing = {
+  none: getCSSVar("gap-none"),
+  "3xs": getCSSVar("gap-3xs"),
+  "2xs": getCSSVar("gap-2xs"),
+  xs: getCSSVar("gap-xs"),
+  s: getCSSVar("gap-s"),
+  m: getCSSVar("gap-m"),
+  l: getCSSVar("gap-l"),
+  xl: getCSSVar("gap-xl"),
+  "2xl": getCSSVar("gap-2xl"),
+  "3xl": getCSSVar("gap-3xl"),
+  "4xl": getCSSVar("gap-4xl"),
+  "5xl": getCSSVar("gap-5xl"),
+  "6xl": getCSSVar("gap-6xl"),
+  "7xl": getCSSVar("gap-7xl")
+};
+var colors = {
+  // Accent
+  accent: {
+    default: getCSSVar("color-accent-default"),
+    subtle: getCSSVar("color-accent-subtle"),
+    strong: getCSSVar("color-accent-strong"),
+    lighter: getCSSVar("color-accent-lighter"),
+    light: getCSSVar("color-accent-light")
+  },
+  // Primary
+  primary: {
+    default: getCSSVar("color-primary-default"),
+    inverted: getCSSVar("color-primary-inverted"),
+    subtle: getCSSVar("color-primary-subtle"),
+    light: getCSSVar("color-primary-light")
+  },
+  // Surface
+  surface: {
+    background: getCSSVar("color-surface-background"),
+    backgroundInverted: getCSSVar("color-surface-background-inverted"),
+    layer: getCSSVar("color-surface-layer"),
+    layerStrong: getCSSVar("color-surface-layer-strong"),
+    layerStronger: getCSSVar("color-surface-layer-stronger"),
+    elevated: getCSSVar("color-surface-elevated"),
+    accent: getCSSVar("color-surface-accent"),
+    input: getCSSVar("color-surface-input")
+  },
+  // Content/Text
+  content: {
+    heading: getCSSVar("color-content-heading"),
+    primary: getCSSVar("color-content-primary"),
+    secondary: getCSSVar("color-content-secondary"),
+    disabled: getCSSVar("color-content-disabled"),
+    inverted: getCSSVar("color-content-inverted"),
+    accent: getCSSVar("color-content-accent"),
+    error: getCSSVar("color-content-error"),
+    success: getCSSVar("color-content-success"),
+    warning: getCSSVar("color-content-warning")
+  },
+  // Content On Inverted
+  contentOnInverted: {
+    heading: getCSSVar("color-content-on-inverted-heading"),
+    primary: getCSSVar("color-content-on-inverted-primary"),
+    secondary: getCSSVar("color-content-on-inverted-secondary"),
+    disabled: getCSSVar("color-content-on-inverted-disabled"),
+    accent: getCSSVar("color-content-on-inverted-accent")
+  },
+  // Icon
+  icon: {
+    primary: getCSSVar("color-icon-primary"),
+    secondary: getCSSVar("color-icon-secondary"),
+    disabled: getCSSVar("color-icon-disabled"),
+    inverted: getCSSVar("color-icon-inverted"),
+    accent: getCSSVar("color-icon-accent"),
+    accentSubtle: getCSSVar("color-icon-accent-subtle"),
+    accentStrong: getCSSVar("color-icon-accent-strong"),
+    error: getCSSVar("color-icon-error"),
+    success: getCSSVar("color-icon-success"),
+    warning: getCSSVar("color-icon-warning")
+  },
+  // Stroke/Border
+  stroke: {
+    subtle: getCSSVar("color-stroke-subtle"),
+    medium: getCSSVar("color-stroke-medium"),
+    strong: getCSSVar("color-stroke-strong"),
+    alphaSubtle: getCSSVar("color-stroke-alpha-subtle"),
+    alphaMedium: getCSSVar("color-stroke-alpha-medium"),
+    alphaStrong: getCSSVar("color-stroke-alpha-strong")
+  },
+  // Feedback
+  feedback: {
+    negative: {
+      light: getCSSVar("color-feedback-negative-light"),
+      default: getCSSVar("color-feedback-negative-default"),
+      strong: getCSSVar("color-feedback-negative-strong")
+    },
+    positive: {
+      light: getCSSVar("color-feedback-positive-light"),
+      default: getCSSVar("color-feedback-positive-default"),
+      strong: getCSSVar("color-feedback-positive-strong")
+    },
+    warning: {
+      light: getCSSVar("color-feedback-warning-light"),
+      default: getCSSVar("color-feedback-warning-default"),
+      strong: getCSSVar("color-feedback-warning-strong")
+    }
+  },
+  // Build System
+  build: {
+    action: getCSSVar("color-build-action"),
+    data: getCSSVar("color-build-data"),
+    function: getCSSVar("color-build-function"),
+    input: getCSSVar("color-build-input"),
+    workflow: getCSSVar("color-build-workflow")
+  }
+};
+var tokens_default = tokens;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  Card,
+  Icon,
+  colors,
+  getCSSVar,
+  spacing,
+  tokens
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/components/Button/Button.tsx","../src/components/Card/Card.tsx","../src/components/Icon/Icon.tsx","../src/tokens/tokens.ts"],"sourcesContent":["// Components\nexport { Button, type ButtonProps } from './components/Button';\nexport { Card, type CardProps } from './components/Card';\nexport { Icon, type IconProps, type IconName, type IconSize } from './components/Icon';\n\n// Tokens\nexport { tokens, colors, spacing, getCSSVar } from './tokens';\nexport type { Scale, FontFamily, FontSize, Gap, Radius, Stroke, MaxWidth } from './tokens';\n","import React from 'react';\nimport './Button.css';\n\nexport interface ButtonProps {\n  /**\n   * The content of the button\n   */\n  children: React.ReactNode;\n  /**\n   * The variant of the button\n   * - primary: Dark background (inverted)\n   * - accent: Blue background (secondary)\n   * - tertiary: Transparent with border (ghost)\n   * - text: No background or border\n   * - danger: Red for destructive actions\n   */\n  variant?: 'primary' | 'accent' | 'tertiary' | 'text' | 'danger';\n  /**\n   * The size of the button\n   */\n  size?: 'xsmall' | 'small' | 'medium' | 'large';\n  /**\n   * Whether the button is disabled\n   */\n  disabled?: boolean;\n  /**\n   * Whether the button is in loading state\n   */\n  loading?: boolean;\n  /**\n   * Whether the button takes full width\n   */\n  fullWidth?: boolean;\n  /**\n   * Icon to display before the text\n   */\n  startIcon?: React.ReactNode;\n  /**\n   * Icon to display after the text\n   */\n  endIcon?: React.ReactNode;\n  /**\n   * Click handler\n   */\n  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * HTML button type\n   */\n  type?: 'button' | 'submit' | 'reset';\n  /**\n   * Additional CSS class name\n   */\n  className?: string;\n}\n\nexport const Button: React.FC<ButtonProps> = ({\n  children,\n  variant = 'primary',\n  size = 'medium',\n  disabled = false,\n  loading = false,\n  fullWidth = false,\n  startIcon,\n  endIcon,\n  onClick,\n  type = 'button',\n  className = '',\n  ...props\n}) => {\n  const baseClasses = 'btn';\n  const variantClass = `btn--${variant}`;\n  const sizeClass = `btn--${size}`;\n  const disabledClass = disabled ? 'btn--disabled' : '';\n  const loadingClass = loading ? 'btn--loading' : '';\n  const fullWidthClass = fullWidth ? 'btn--full-width' : '';\n\n  const classes = [\n    baseClasses,\n    variantClass,\n    sizeClass,\n    disabledClass,\n    loadingClass,\n    fullWidthClass,\n    className\n  ].filter(Boolean).join(' ');\n\n  return (\n    <button\n      type={type}\n      className={classes}\n      disabled={disabled || loading}\n      onClick={onClick}\n      {...props}\n    >\n      {loading && (\n        <span className=\"btn__spinner\" aria-hidden=\"true\">\n          <svg\n            className=\"btn__spinner-icon\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <circle\n              className=\"btn__spinner-circle\"\n              cx=\"12\"\n              cy=\"12\"\n              r=\"9\"\n              stroke=\"currentColor\"\n              strokeWidth=\"3\"\n              strokeLinecap=\"round\"\n            />\n          </svg>\n        </span>\n      )}\n      {startIcon && !loading && (\n        <span className=\"btn__icon btn__icon--start\" aria-hidden=\"true\">\n          {startIcon}\n        </span>\n      )}\n      <span className=\"btn__content\">{children}</span>\n      {endIcon && !loading && (\n        <span className=\"btn__icon btn__icon--end\" aria-hidden=\"true\">\n          {endIcon}\n        </span>\n      )}\n    </button>\n  );\n};\n\nexport default Button;\n","import React from 'react';\nimport './Card.css';\n\n// Plan Icons Component\ninterface PlanIconsProps {\n  planType?: 'Starter' | 'Individual' | 'Teams';\n}\n\nconst PlanIcons: React.FC<PlanIconsProps> = ({ planType = 'Starter' }) => {\n  if (planType === 'Individual') {\n    return (\n      <div className=\"plan-icon plan-icon--individual\">\n        <div className=\"plan-icon__square plan-icon__square--top-left\"></div>\n        <div className=\"plan-icon__square plan-icon__square--bottom-left\"></div>\n        <div className=\"plan-icon__square plan-icon__square--top-right\"></div>\n        <div className=\"plan-icon__square plan-icon__square--bottom-right\"></div>\n      </div>\n    );\n  }\n  \n  if (planType === 'Teams') {\n    return (\n      <div className=\"plan-icon plan-icon--teams\">\n        <div className=\"plan-icon__square plan-icon__square--top-left\"></div>\n        <div className=\"plan-icon__square plan-icon__square--middle-left\"></div>\n        <div className=\"plan-icon__square plan-icon__square--bottom-center\"></div>\n        <div className=\"plan-icon__square plan-icon__square--top-center\"></div>\n        <div className=\"plan-icon__square plan-icon__square--middle-right\"></div>\n        <div className=\"plan-icon__square plan-icon__square--center\"></div>\n        <div className=\"plan-icon__square plan-icon__square--bottom-right\"></div>\n      </div>\n    );\n  }\n  \n  return (\n    <div className=\"plan-icon plan-icon--starter\">\n      <div className=\"plan-icon__square plan-icon__square--left\"></div>\n      <div className=\"plan-icon__square plan-icon__square--right\"></div>\n    </div>\n  );\n};\n\n// Card Props Interface\nexport interface CardProps {\n  /**\n   * The plan type\n   */\n  plan?: 'Starter' | 'Individual' | 'Teams';\n  /**\n   * The plan price\n   */\n  price?: number;\n  /**\n   * The plan price per period\n   */\n  pricePeriod?: string;\n  /**\n   * Number of seats/users\n   */\n  seats?: number;\n  /**\n   * Whether seats can be edited\n   */\n  canEditSeats?: boolean;\n  /**\n   * Next billing amount\n   */\n  nextBillingAmount?: number;\n  /**\n   * Renewal date\n   */\n  renewalDate?: string;\n  /**\n   * Additional CSS class name\n   */\n  className?: string;\n  /**\n   * Click handler for the action button\n   */\n  onActionClick?: () => void;\n}\n\nexport const Card: React.FC<CardProps> = ({\n  plan = 'Starter',\n  price = 0,\n  pricePeriod = '/Month',\n  seats = 1,\n  canEditSeats = false,\n  nextBillingAmount = 0,\n  renewalDate = 'Sep 07, 2024',\n  className = '',\n  onActionClick,\n}) => {\n  const getPlanPrice = () => {\n    switch (plan) {\n      case 'Individual':\n        return 20;\n      case 'Teams':\n        return 49;\n      default:\n        return 0;\n    }\n  };\n\n  const getSeatsText = () => {\n    if (plan === 'Teams') {\n      return `${seats} Monthly seats`;\n    }\n    return '1 Monthly seat';\n  };\n\n  const getUpgradeText = () => {\n    if (plan === 'Starter' || plan === 'Individual') {\n      return 'Upgrade to Teams unlock multiple seats';\n    }\n    return '';\n  };\n\n  const getNextBillingAmount = () => {\n    if (plan === 'Teams') {\n      return price * seats;\n    }\n    return nextBillingAmount;\n  };\n\n  const actualPrice = price || getPlanPrice();\n  const actualNextBilling = getNextBillingAmount();\n\n  return (\n    <div className={`card ${className}`}>\n      <div className=\"card__container\">\n        {/* Card Header */}\n        <div className=\"card__header\">\n          <div className=\"card__header-title\">\n            <div className=\"card__header-icon\">\n              <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M8 2V5M16 2V5M3.5 9.09H20.5M21 8.5V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V8.5C3 5.5 4.5 3.5 8 3.5H16C19.5 3.5 21 5.5 21 8.5Z\" stroke=\"#6d6d6e\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n                <path d=\"M12 13.2H12.01M8.8 13.2H8.81M15.2 13.2H15.21\" stroke=\"#6d6d6e\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n              </svg>\n            </div>\n            <div className=\"card__header-text\">Plan</div>\n          </div>\n          <div className=\"card__header-action\">\n            <button \n              className=\"card__action-button\"\n              onClick={onActionClick}\n            >\n              <span className=\"card__action-text\">Edit</span>\n            </button>\n          </div>\n        </div>\n\n        {/* Card Body */}\n        <div className=\"card__body\">\n          <div className=\"card__content\">\n            {/* Plan Info */}\n            <div className=\"card__plan\">\n              <div className=\"card__plan-icon\">\n                <PlanIcons planType={plan} />\n              </div>\n              <div className=\"card__plan-name\">{plan}</div>\n            </div>\n\n            {/* Price Info */}\n            <div className=\"card__price-section\">\n              <div className=\"card__price\">\n                <span className=\"card__price-currency\">$</span>\n                <span className=\"card__price-amount\">{actualPrice}</span>\n                <span className=\"card__price-period\">{pricePeriod}</span>\n              </div>\n\n              {/* Seats Info */}\n              <div className=\"card__seats\">\n                <div className=\"card__seats-divider\"></div>\n                <div className=\"card__seats-info\">\n                  <div className=\"card__seats-count\">\n                    {plan === 'Teams' ? (\n                      <div className=\"card__seats-teams\">\n                        <span className=\"card__seats-multiplier\">x</span>\n                        <span className=\"card__seats-number\">{seats}</span>\n                        <span className=\"card__seats-text\">Monthly seats</span>\n                        {canEditSeats && (\n                          <button className=\"card__seats-edit\">\n                            <span>Edit</span>\n                          </button>\n                        )}\n                      </div>\n                    ) : (\n                      <>\n                        <span className=\"card__seats-number\">1</span>\n                        <span className=\"card__seats-text\">Monthly seat</span>\n                      </>\n                    )}\n                  </div>\n                  {getUpgradeText() && (\n                    <div className=\"card__seats-upgrade\">\n                      {getUpgradeText()}\n                    </div>\n                  )}\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        {/* Card Footer */}\n        <div className=\"card__footer\">\n          <div className=\"card__footer-left\">\n            <div className=\"card__footer-price\">\n              <span className=\"card__footer-currency\">$</span>\n              <span className=\"card__footer-amount\">{actualNextBilling}</span>\n            </div>\n            <div className=\"card__footer-label\">Next plan bill</div>\n          </div>\n          <div className=\"card__footer-right\">\n            <div className=\"card__footer-renewal\">Renews on</div>\n            <div className=\"card__footer-date\">{renewalDate}</div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default Card;\n","import React from 'react';\nimport './Icon.css';\n\nexport type IconName = \n  | 'add'\n  | 'add-circle'\n  | 'alert-circle'\n  | 'alert-triangle'\n  | 'archive'\n  | 'arrow-down'\n  | 'arrow-left'\n  | 'arrow-right'\n  | 'arrow-up'\n  | 'bell'\n  | 'trash'\n  | 'building'\n  | 'calendar'\n  | 'camera'\n  | 'check'\n  | 'chevron-down'\n  | 'chevron-left'\n  | 'chevron-right'\n  | 'chevron-up'\n  | 'close'\n  | 'mail'\n  | 'folder'\n  | 'folder-open'\n  | 'lock'\n  | 'menu'\n  | 'pencil'\n  | 'question-circle'\n  | 'remove'\n  | 'search'\n  | 'settings'\n  | 'upload'\n  | 'user'\n  | 'view'\n  | 'view-off';\n\nexport type IconSize = 'XS' | 'S' | 'M' | 'L';\n\nexport interface IconProps {\n  name: IconName;\n  size?: IconSize;\n  className?: string;\n  color?: string;\n  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n}\n\nexport const Icon: React.FC<IconProps> = ({\n  name,\n  size = 'M',\n  className = '',\n  color = '#29292a',\n  onClick,\n}) => {\n  const sizeMap = {\n    XS: 16,\n    S: 20,\n    M: 24,\n    L: 32,\n  };\n\n  const iconSize = sizeMap[size];\n\n  const iconPaths: Record<IconName, string> = {\n    'add': 'M12 5v14M5 12h14',\n    'add-circle': 'M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM12 8v8M8 12h8',\n    'alert-circle': 'M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM12 8v4M12 16h.01',\n    'alert-triangle': 'M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h.01',\n    'archive': 'M21 8v13H3V8M1 3h22l-1 5H2zM10 12h4',\n    'arrow-down': 'M12 5v14M19 12l-7 7-7-7',\n    'arrow-left': 'M19 12H5M12 19l-7-7 7-7',\n    'arrow-right': 'M5 12h14M12 5l7 7-7 7',\n    'arrow-up': 'M12 19V5M5 12l7-7 7 7',\n    'bell': 'M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0',\n    'trash': 'M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M10 11v6M14 11v6',\n    'building': 'M3 21h18M5 21V7l8-4v18M19 21V11l-6-4',\n    'calendar': 'M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z',\n    'camera': 'M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2zM12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8z',\n    'check': 'M20 6L9 17l-5-5',\n    'chevron-down': 'M6 9l6 6 6-6',\n    'chevron-left': 'M15 18l-6-6 6-6',\n    'chevron-right': 'M9 18l6-6-6-6',\n    'chevron-up': 'M18 15l-6-6-6 6',\n    'close': 'M18 6L6 18M6 6l12 12',\n    'mail': 'M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2zM22 6l-10 7L2 6',\n    'folder': 'M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z',\n    'folder-open': 'M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2zM2 9h20',\n    'lock': 'M19 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2zM7 11V7a5 5 0 0 1 10 0v4',\n    'menu': 'M3 12h18M3 6h18M3 18h18',\n    'pencil': 'M12 20h9M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z',\n    'question-circle': 'M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z',\n    'remove': 'M18 6L6 18M6 6l12 12',\n    'search': 'M21 21l-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0z',\n    'settings': 'M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z',\n    'upload': 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12',\n    'user': 'M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z',\n    'view': 'M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8zM12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z',\n    'view-off': 'M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24M1 1l22 22',\n  };\n\n  const path = iconPaths[name];\n  \n  if (!path) {\n    console.warn(`Icon \"${name}\" not found`);\n    return null;\n  }\n\n  return (\n    <div \n      className={`icon icon--${size.toLowerCase()} ${className}`}\n      onClick={onClick}\n      style={{ color }}\n    >\n      <svg\n        width={iconSize}\n        height={iconSize}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      >\n        <path d={path} />\n      </svg>\n    </div>\n  );\n};\n\nexport default Icon;","/**\n * MindSet Design System - Design Tokens (TypeScript)\n * Type-safe access to design tokens\n */\n\nexport const tokens = {\n  // Scale\n  scale: {\n    0: '0px',\n    12.5: '1px',\n    25: '2px',\n    50: '4px',\n    75: '6px',\n    100: '8px',\n    150: '12px',\n    175: '14px',\n    200: '16px',\n    250: '20px',\n    300: '24px',\n    400: '32px',\n    500: '40px',\n    600: '48px',\n    700: '56px',\n    800: '64px',\n    900: '72px',\n    1000: '80px',\n    2000: '160px',\n    2500: '200px',\n  },\n\n  // Typography\n  typography: {\n    fontFamily: {\n      default: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif\",\n      mono: \"'Fira Code', 'Monaco', 'Courier New', monospace\",\n    },\n    fontSize: {\n      xs: '12px',\n      s: '14px',\n      m: '16px',\n      l: '20px',\n      xl: '24px',\n    },\n  },\n\n  // Spacing/Gap\n  gap: {\n    none: '0px',\n    '3xs': '2px',\n    '2xs': '4px',\n    xs: '8px',\n    s: '12px',\n    m: '16px',\n    l: '20px',\n    xl: '24px',\n    '2xl': '32px',\n    '3xl': '40px',\n    '4xl': '48px',\n    '5xl': '56px',\n    '6xl': '64px',\n    '7xl': '80px',\n  },\n\n  // Border Radius\n  radius: {\n    none: '0px',\n    xs: '4px',\n    s: '6px',\n    m: '8px',\n    l: '12px',\n    xl: '16px',\n    rounded: '9999px',\n  },\n\n  // Stroke Width\n  stroke: {\n    none: '0px',\n    thin: '1px',\n    light: '1.25px',\n    medium: '1.5px',\n    large: '2px',\n  },\n\n  // Container Max Widths\n  maxWidth: {\n    mobile: '480px',\n    tabletPortrait: '768px',\n    tabletLandscape: '1024px',\n    desktop: '1440px',\n    desktopLg: '1600px',\n    desktopXl: '1980px',\n  },\n} as const;\n\n// Export types for better TypeScript support\nexport type Scale = keyof typeof tokens.scale;\nexport type FontFamily = keyof typeof tokens.typography.fontFamily;\nexport type FontSize = keyof typeof tokens.typography.fontSize;\nexport type Gap = keyof typeof tokens.gap;\nexport type Radius = keyof typeof tokens.radius;\nexport type Stroke = keyof typeof tokens.stroke;\nexport type MaxWidth = keyof typeof tokens.maxWidth;\n\n// Helper function to get CSS variable\nexport const getCSSVar = (name: string): string => `var(--${name})`;\n\n// Helper to create spacing values\nexport const spacing = {\n  none: getCSSVar('gap-none'),\n  '3xs': getCSSVar('gap-3xs'),\n  '2xs': getCSSVar('gap-2xs'),\n  xs: getCSSVar('gap-xs'),\n  s: getCSSVar('gap-s'),\n  m: getCSSVar('gap-m'),\n  l: getCSSVar('gap-l'),\n  xl: getCSSVar('gap-xl'),\n  '2xl': getCSSVar('gap-2xl'),\n  '3xl': getCSSVar('gap-3xl'),\n  '4xl': getCSSVar('gap-4xl'),\n  '5xl': getCSSVar('gap-5xl'),\n  '6xl': getCSSVar('gap-6xl'),\n  '7xl': getCSSVar('gap-7xl'),\n} as const;\n\n// Color system - semantic tokens\nexport const colors = {\n  // Accent\n  accent: {\n    default: getCSSVar('color-accent-default'),\n    subtle: getCSSVar('color-accent-subtle'),\n    strong: getCSSVar('color-accent-strong'),\n    lighter: getCSSVar('color-accent-lighter'),\n    light: getCSSVar('color-accent-light'),\n  },\n  \n  // Primary\n  primary: {\n    default: getCSSVar('color-primary-default'),\n    inverted: getCSSVar('color-primary-inverted'),\n    subtle: getCSSVar('color-primary-subtle'),\n    light: getCSSVar('color-primary-light'),\n  },\n  \n  // Surface\n  surface: {\n    background: getCSSVar('color-surface-background'),\n    backgroundInverted: getCSSVar('color-surface-background-inverted'),\n    layer: getCSSVar('color-surface-layer'),\n    layerStrong: getCSSVar('color-surface-layer-strong'),\n    layerStronger: getCSSVar('color-surface-layer-stronger'),\n    elevated: getCSSVar('color-surface-elevated'),\n    accent: getCSSVar('color-surface-accent'),\n    input: getCSSVar('color-surface-input'),\n  },\n  \n  // Content/Text\n  content: {\n    heading: getCSSVar('color-content-heading'),\n    primary: getCSSVar('color-content-primary'),\n    secondary: getCSSVar('color-content-secondary'),\n    disabled: getCSSVar('color-content-disabled'),\n    inverted: getCSSVar('color-content-inverted'),\n    accent: getCSSVar('color-content-accent'),\n    error: getCSSVar('color-content-error'),\n    success: getCSSVar('color-content-success'),\n    warning: getCSSVar('color-content-warning'),\n  },\n  \n  // Content On Inverted\n  contentOnInverted: {\n    heading: getCSSVar('color-content-on-inverted-heading'),\n    primary: getCSSVar('color-content-on-inverted-primary'),\n    secondary: getCSSVar('color-content-on-inverted-secondary'),\n    disabled: getCSSVar('color-content-on-inverted-disabled'),\n    accent: getCSSVar('color-content-on-inverted-accent'),\n  },\n  \n  // Icon\n  icon: {\n    primary: getCSSVar('color-icon-primary'),\n    secondary: getCSSVar('color-icon-secondary'),\n    disabled: getCSSVar('color-icon-disabled'),\n    inverted: getCSSVar('color-icon-inverted'),\n    accent: getCSSVar('color-icon-accent'),\n    accentSubtle: getCSSVar('color-icon-accent-subtle'),\n    accentStrong: getCSSVar('color-icon-accent-strong'),\n    error: getCSSVar('color-icon-error'),\n    success: getCSSVar('color-icon-success'),\n    warning: getCSSVar('color-icon-warning'),\n  },\n  \n  // Stroke/Border\n  stroke: {\n    subtle: getCSSVar('color-stroke-subtle'),\n    medium: getCSSVar('color-stroke-medium'),\n    strong: getCSSVar('color-stroke-strong'),\n    alphaSubtle: getCSSVar('color-stroke-alpha-subtle'),\n    alphaMedium: getCSSVar('color-stroke-alpha-medium'),\n    alphaStrong: getCSSVar('color-stroke-alpha-strong'),\n  },\n  \n  // Feedback\n  feedback: {\n    negative: {\n      light: getCSSVar('color-feedback-negative-light'),\n      default: getCSSVar('color-feedback-negative-default'),\n      strong: getCSSVar('color-feedback-negative-strong'),\n    },\n    positive: {\n      light: getCSSVar('color-feedback-positive-light'),\n      default: getCSSVar('color-feedback-positive-default'),\n      strong: getCSSVar('color-feedback-positive-strong'),\n    },\n    warning: {\n      light: getCSSVar('color-feedback-warning-light'),\n      default: getCSSVar('color-feedback-warning-default'),\n      strong: getCSSVar('color-feedback-warning-strong'),\n    },\n  },\n  \n  // Build System\n  build: {\n    action: getCSSVar('color-build-action'),\n    data: getCSSVar('color-build-data'),\n    function: getCSSVar('color-build-function'),\n    input: getCSSVar('color-build-input'),\n    workflow: getCSSVar('color-build-workflow'),\n  },\n} as const;\n\nexport default tokens;\n"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime"]}