@multiplatform.one/theme 7.83.1 → 7.83.2

package/dist/cjs/theme/devtools/knobIcons.cjs

@@ -0,0 +1,498 @@
+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);
+var knobIcons_exports = {};
+__export(knobIcons_exports, {
+  bodyFontIcon: () => bodyFontIcon,
+  borderRadiusIcon: () => borderRadiusIcon,
+  borderWidthIcon: () => borderWidthIcon,
+  bulkBarPlacementIcon: () => bulkBarPlacementIcon,
+  cornerSmoothingIcon: () => cornerSmoothingIcon,
+  disabledStyleIcon: () => disabledStyleIcon,
+  elevationIcon: () => elevationIcon,
+  fieldLabelPlacementIcon: () => fieldLabelPlacementIcon,
+  fillIcon: () => fillIcon,
+  fontWeightIcon: () => fontWeightIcon,
+  formAutofocusIcon: () => formAutofocusIcon,
+  headingFontIcon: () => headingFontIcon,
+  modeIcon: () => modeIcon,
+  requiredMarkingIcon: () => requiredMarkingIcon,
+  selectAllScopeIcon: () => selectAllScopeIcon,
+  tableZebraIcon: () => tableZebraIcon,
+  textAccentIcon: () => textAccentIcon,
+  timestampStyleIcon: () => timestampStyleIcon
+});
+module.exports = __toCommonJS(knobIcons_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+function fillIcon(value, color) {
+  if (value === "filled") {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      style: {
+        width: 14,
+        height: 14,
+        background: color,
+        borderRadius: 2
+      }
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+    style: {
+      width: 14,
+      height: 14,
+      border: `1.5px solid ${color}`,
+      borderRadius: 2
+    }
+  });
+}
+function borderRadiusIcon(value, color) {
+  const radius = {
+    none: 0,
+    small: 2,
+    medium: 4,
+    large: 7,
+    full: 10
+  }[value] ?? 0;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+    style: {
+      width: 14,
+      height: 14,
+      border: `1.5px solid ${color}`,
+      borderRadius: radius
+    }
+  });
+}
+function cornerSmoothingIcon(value, color) {
+  const smooth = value === "smooth";
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    role: "img",
+    "aria-label": value,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("title", {
+      children: value
+    }), smooth ? /* @__PURE__ */(0, import_jsx_runtime.jsx)("path", {
+      d: "M7 1 C2.8 1 1 2.8 1 7 C1 11.2 2.8 13 7 13 C11.2 13 13 11.2 13 7 C13 2.8 11.2 1 7 1 Z",
+      stroke: color,
+      strokeWidth: "1.5"
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)("rect", {
+      x: "1",
+      y: "1",
+      width: "12",
+      height: "12",
+      rx: "4",
+      stroke: color,
+      strokeWidth: "1.5"
+    })]
+  });
+}
+function borderWidthIcon(value, color) {
+  if (value === "none") {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      style: {
+        width: 14,
+        height: 14,
+        background: color,
+        borderRadius: 2,
+        opacity: 0.35
+      }
+    });
+  }
+  const width = {
+    small: 1,
+    medium: 1.5,
+    large: 2
+  }[value] ?? 1;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+    style: {
+      width: 14,
+      height: 14,
+      border: `${width}px solid ${color}`,
+      borderRadius: 2
+    }
+  });
+}
+function elevationIcon(value, color, _isDark) {
+  const shadowColor = "rgba(128,128,128,0.55)";
+  const offset = {
+    none: 0,
+    small: 1,
+    medium: 2,
+    large: 3
+  }[value] ?? 0;
+  const shadowSize = {
+    none: 0,
+    small: 10,
+    medium: 11,
+    large: 12
+  }[value] ?? 0;
+  const squareSize = 10;
+  const total = squareSize + offset * 2 + 1;
+  if (offset === 0) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      style: {
+        width: squareSize,
+        height: squareSize,
+        border: `1px solid ${color}`,
+        borderRadius: 1
+      }
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+    style: {
+      position: "relative",
+      width: total,
+      height: total
+    },
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      style: {
+        position: "absolute",
+        bottom: 0,
+        right: 0,
+        width: shadowSize,
+        height: shadowSize,
+        background: shadowColor,
+        borderRadius: 1
+      }
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: squareSize,
+        height: squareSize,
+        border: `1px solid ${color}`,
+        borderRadius: 1
+      }
+    })]
+  });
+}
+function textAccentIcon(value, color) {
+  const weight = value === "low" ? 300 : value === "medium" ? 500 : 700;
+  const opacity = value === "low" ? 0.35 : value === "medium" ? 0.7 : 1;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+    style: {
+      fontSize: 12,
+      fontWeight: weight,
+      color,
+      opacity,
+      fontFamily: "system-ui, sans-serif",
+      lineHeight: 1
+    },
+    children: "Aa"
+  });
+}
+const fontCategoryStyles = {
+  "sans-serif": {
+    family: "-apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+    label: "Aa"
+  },
+  serif: {
+    family: "Georgia, 'Times New Roman', Times, serif",
+    label: "Aa"
+  },
+  mono: {
+    family: "'SF Mono', 'Cascadia Code', Menlo, monospace",
+    label: "Aa"
+  },
+  slab: {
+    family: "'Rockwell', 'Courier New', serif",
+    label: "Aa"
+  },
+  rounded: {
+    family: "'Nunito', 'Varela Round', system-ui, sans-serif",
+    label: "Aa"
+  },
+  condensed: {
+    family: "'Arial Narrow', sans-serif",
+    label: "Aa",
+    letterSpacing: "-0.03em"
+  },
+  cursive: {
+    family: "'Segoe Script', cursive",
+    label: "Aa",
+    style: "italic"
+  },
+  handwriting: {
+    family: "'Comic Sans MS', 'Caveat', cursive",
+    label: "Aa"
+  },
+  pixel: {
+    family: "'Courier New', monospace",
+    label: "Aa",
+    letterSpacing: "0.05em"
+  },
+  blackletter: {
+    family: "'Old English Text MT', serif",
+    label: "Aa"
+  },
+  geometric: {
+    family: "'Century Gothic', 'Futura', sans-serif",
+    label: "Aa"
+  }
+};
+function headingFontIcon(value, color) {
+  const s = fontCategoryStyles[value] ?? {
+    family: "inherit",
+    label: "Aa"
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+    style: {
+      fontSize: 13,
+      fontWeight: 700,
+      color,
+      fontFamily: s.family,
+      fontStyle: s.style,
+      lineHeight: 1,
+      letterSpacing: s.letterSpacing
+    },
+    children: s.label
+  });
+}
+function bodyFontIcon(value, color) {
+  const s = fontCategoryStyles[value] ?? {
+    family: "inherit",
+    label: "Aa"
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+    style: {
+      fontSize: 13,
+      fontWeight: 400,
+      color,
+      fontFamily: s.family,
+      fontStyle: s.style,
+      lineHeight: 1,
+      letterSpacing: s.letterSpacing
+    },
+    children: s.label
+  });
+}
+function fontWeightIcon(value, color) {
+  const weight = {
+    light: 300,
+    regular: 400,
+    bold: 700
+  }[value] ?? 400;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+    style: {
+      fontSize: 12,
+      fontWeight: weight,
+      color,
+      fontFamily: "system-ui, sans-serif",
+      lineHeight: 1
+    },
+    children: "W"
+  });
+}
+function modeIcon(value, color) {
+  const base = {
+    width: 14,
+    height: 14,
+    borderRadius: "50%"
+  };
+  if (value === "system") {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      style: {
+        ...base,
+        border: `1.5px solid ${color}`,
+        background: `linear-gradient(90deg, ${color} 50%, transparent 50%)`
+      }
+    });
+  }
+  if (value === "light") {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      style: {
+        ...base,
+        border: `1.5px solid ${color}`
+      }
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+    style: {
+      ...base,
+      background: color
+    }
+  });
+}
+function glyph(label, color, size = 9) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+    style: {
+      fontSize: size,
+      fontWeight: 600,
+      color,
+      fontFamily: "system-ui, sans-serif",
+      lineHeight: 1,
+      letterSpacing: "-0.02em"
+    },
+    children: label
+  });
+}
+function fieldLabelPlacementIcon(value, color) {
+  if (value === "side") return glyph("\u229F", color, 12);
+  if (value === "floating") return glyph("\u2B1A", color, 12);
+  return glyph("\u229E", color, 12);
+}
+function requiredMarkingIcon(value, color) {
+  if (value === "asterisk") return glyph("*", color, 14);
+  if (value === "optional") return glyph("opt", color, 8);
+  return glyph("min", color, 8);
+}
+function tableZebraIcon(value, color) {
+  const on = value === "on";
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 1,
+      width: 14
+    },
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      style: {
+        height: 3,
+        background: color,
+        borderRadius: 1,
+        opacity: on ? 1 : 0.35
+      }
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      style: {
+        height: 3,
+        background: color,
+        borderRadius: 1,
+        opacity: on ? 0.35 : 0.35
+      }
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      style: {
+        height: 3,
+        background: color,
+        borderRadius: 1,
+        opacity: on ? 1 : 0.35
+      }
+    })]
+  });
+}
+function bulkBarPlacementIcon(value, color) {
+  const top = value !== "bottom";
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+    style: {
+      width: 14,
+      height: 14,
+      border: `1px solid ${color}`,
+      borderRadius: 2,
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: top ? "flex-start" : "flex-end",
+      padding: 1
+    },
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      style: {
+        height: 3,
+        background: color,
+        borderRadius: 1
+      }
+    })
+  });
+}
+function selectAllScopeIcon(value, color) {
+  const filtered = value === "filtered";
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 1,
+      width: 14
+    },
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      style: {
+        height: 3,
+        background: color,
+        borderRadius: 1
+      }
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      style: {
+        height: 3,
+        background: color,
+        borderRadius: 1
+      }
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      style: {
+        height: 3,
+        background: color,
+        borderRadius: 1,
+        opacity: filtered ? 1 : 0.3
+      }
+    })]
+  });
+}
+function timestampStyleIcon(value, color) {
+  return glyph(value === "relative" ? "~t" : "12:00", color, value === "relative" ? 10 : 7);
+}
+function disabledStyleIcon(value, color) {
+  if (value === "dimWhole") {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      style: {
+        width: 14,
+        height: 14,
+        background: color,
+        borderRadius: 2,
+        opacity: 0.35
+      }
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 2,
+      width: 14
+    },
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      style: {
+        height: 3,
+        background: color,
+        borderRadius: 1
+      }
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+      style: {
+        height: 7,
+        background: color,
+        borderRadius: 1,
+        opacity: 0.3
+      }
+    })]
+  });
+}
+function formAutofocusIcon(value, color) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+    style: {
+      width: 14,
+      height: 14,
+      border: `1.5px solid ${color}`,
+      borderRadius: 2,
+      outlineWidth: value === "on" ? 2 : 0,
+      outlineStyle: "solid",
+      outlineColor: color,
+      outlineOffset: 0,
+      opacity: value === "on" ? 1 : 0.45
+    }
+  });
+}