@editora/ui-core 0.1.8 → 0.1.10

package/dist/icon-9ed13093.mjs

@@ -0,0 +1,364 @@
+import { E as v } from "./ElementBase-909688f3.mjs";
+import { hasIcon as h, renderIconSvg as x } from "@editora/icons";
+const s = /* @__PURE__ */ new Map(), l = /* @__PURE__ */ new Map();
+function c(r) {
+  return String(r || "").trim().toLowerCase().replace(/\s+/g, "-").replace(/_/g, "-");
+}
+function k(r, e) {
+  if (!e)
+    return `${r}::default`;
+  const i = e.variant || "outline", t = e.secondaryColor || "", n = e.strokeWidth == null ? "" : String(e.strokeWidth), o = e.absoluteStrokeWidth ? "1" : "0", a = e.strokeLinecap || "", g = e.strokeLinejoin || "", f = e.rotate == null ? "" : String(e.rotate), p = e.flip || "", m = e.rtl ? "1" : "0";
+  return [
+    r,
+    i,
+    t,
+    n,
+    o,
+    a,
+    g,
+    f,
+    p,
+    m
+  ].join("::");
+}
+function I(r, e) {
+  const i = c(r);
+  i && s.set(i, e);
+}
+function S(r) {
+  const e = c(r);
+  e && s.delete(e);
+}
+function L() {
+  s.clear();
+}
+function W(r) {
+  const e = c(r);
+  return e ? s.has(e) ? !0 : h(e) : !1;
+}
+function $(r, e) {
+  return b(r, { variant: e });
+}
+function b(r, e) {
+  const i = c(r);
+  if (!i)
+    return "";
+  const t = s.get(i);
+  if (t)
+    return t;
+  if (!h(i))
+    return "";
+  const n = k(i, e), o = l.get(n);
+  if (o)
+    return o;
+  const a = x(i, {
+    variant: (e == null ? void 0 : e.variant) || "outline",
+    secondaryColor: e == null ? void 0 : e.secondaryColor,
+    strokeWidth: e == null ? void 0 : e.strokeWidth,
+    absoluteStrokeWidth: e == null ? void 0 : e.absoluteStrokeWidth,
+    strokeLinecap: e == null ? void 0 : e.strokeLinecap,
+    strokeLinejoin: e == null ? void 0 : e.strokeLinejoin,
+    rotate: e == null ? void 0 : e.rotate,
+    flip: e == null ? void 0 : e.flip,
+    rtl: e == null ? void 0 : e.rtl,
+    color: "currentColor",
+    decorative: !0
+  });
+  return a && l.set(n, a), a;
+}
+const y = `
+  :host {
+    --ui-icon-size: 1em;
+    --ui-icon-color: currentColor;
+    --ui-icon-radius: 8px;
+    --ui-icon-bg: transparent;
+    --ui-icon-border: 1px solid transparent;
+    --ui-icon-shadow: none;
+    --ui-icon-pad: 0;
+    --ui-icon-rotate-duration: 0.9s;
+    --ui-icon-pulse-duration: 1.35s;
+    color-scheme: light dark;
+    display: inline-grid;
+    place-items: center;
+    inline-size: calc(var(--ui-icon-size) + (var(--ui-icon-pad) * 2));
+    block-size: calc(var(--ui-icon-size) + (var(--ui-icon-pad) * 2));
+    color: var(--ui-icon-color);
+    vertical-align: middle;
+  }
+
+  .icon {
+    position: relative;
+    display: grid;
+    place-items: center;
+    inline-size: 100%;
+    block-size: 100%;
+    border-radius: var(--ui-icon-radius);
+    border: var(--ui-icon-border);
+    background: var(--ui-icon-bg);
+    box-shadow: var(--ui-icon-shadow);
+    transition: transform 170ms ease, box-shadow 170ms ease, background-color 170ms ease, border-color 170ms ease;
+    overflow: hidden;
+    isolation: isolate;
+  }
+
+  .glyph {
+    inline-size: var(--ui-icon-size);
+    block-size: var(--ui-icon-size);
+    display: grid;
+    place-items: center;
+    line-height: 0;
+    color: currentColor;
+  }
+
+  .glyph > svg {
+    inline-size: 100%;
+    block-size: 100%;
+    display: block;
+    fill: currentColor;
+    stroke-width: var(--ui-icon-stroke-width, 1.5);
+    shape-rendering: geometricPrecision;
+  }
+
+  .fallback {
+    display: inline-grid;
+    place-items: center;
+    inline-size: 100%;
+    block-size: 100%;
+    border-radius: max(4px, calc(var(--ui-icon-radius) - 3px));
+    font: 700 11px/1 "IBM Plex Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    letter-spacing: 0.02em;
+    color: color-mix(in srgb, currentColor 74%, transparent);
+    background: color-mix(in srgb, currentColor 10%, transparent);
+  }
+
+  .badge {
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: translate(36%, -36%);
+    min-inline-size: 8px;
+    block-size: 8px;
+    border-radius: 999px;
+    background: var(--ui-icon-badge-bg, #ef4444);
+    border: 2px solid var(--ui-icon-bg, transparent);
+    box-sizing: border-box;
+  }
+
+  :host([size="xs"]) { --ui-icon-size: 12px; }
+  :host([size="sm"]) { --ui-icon-size: 14px; }
+  :host([size="md"]) { --ui-icon-size: 18px; }
+  :host([size="lg"]) { --ui-icon-size: 22px; }
+  :host([size="xl"]) { --ui-icon-size: 28px; }
+
+  :host([variant="surface"]) {
+    --ui-icon-pad: 6px;
+    --ui-icon-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
+    --ui-icon-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
+    --ui-icon-shadow: 0 1px 3px rgba(2, 6, 23, 0.08);
+  }
+
+  :host([variant="soft"]) {
+    --ui-icon-pad: 6px;
+    --ui-icon-bg: color-mix(in srgb, currentColor 8%, transparent);
+    --ui-icon-border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
+  }
+
+  :host([variant="contrast"]) {
+    --ui-icon-pad: 6px;
+    --ui-icon-bg: #0f172a;
+    --ui-icon-color: #e2e8f0;
+    --ui-icon-border: 1px solid #334155;
+    --ui-icon-shadow: 0 2px 8px rgba(2, 6, 23, 0.28);
+  }
+
+  :host([variant="minimal"]) {
+    --ui-icon-pad: 0;
+    --ui-icon-bg: transparent;
+    --ui-icon-border: 0;
+    --ui-icon-shadow: none;
+  }
+
+  :host([variant="elevated"]) {
+    --ui-icon-pad: 6px;
+    --ui-icon-bg: linear-gradient(
+      165deg,
+      color-mix(in srgb, var(--ui-color-surface, #ffffff) 92%, #ffffff 8%),
+      color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent)
+    );
+    --ui-icon-border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 68%, transparent);
+    --ui-icon-shadow:
+      0 1px 4px rgba(2, 6, 23, 0.08),
+      0 10px 20px rgba(2, 6, 23, 0.12);
+  }
+
+  :host([tone="brand"]) { --ui-icon-color: var(--ui-color-primary, var(--ui-primary, #2563eb)); }
+  :host([tone="success"]) { --ui-icon-color: var(--ui-color-success, var(--ui-success, #16a34a)); }
+  :host([tone="warning"]) { --ui-icon-color: var(--ui-color-warning, var(--ui-warning, #d97706)); }
+  :host([tone="danger"]) { --ui-icon-color: var(--ui-color-danger, var(--ui-error, #dc2626)); }
+
+  :host([shape="square"]) { --ui-icon-radius: 4px; }
+  :host([shape="soft"]) { --ui-icon-radius: 13px; }
+
+  :host([spin]) .glyph {
+    animation: spin var(--ui-icon-rotate-duration) linear infinite;
+  }
+
+  :host([pulse]) .icon {
+    animation: pulse var(--ui-icon-pulse-duration) ease-in-out infinite;
+  }
+
+  :host(:not([headless])) .icon:hover {
+    transform: translateY(-0.5px);
+    box-shadow: 0 3px 12px rgba(2, 6, 23, 0.14);
+  }
+
+  :host([headless]) .icon {
+    display: none;
+  }
+
+  @keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+
+  @keyframes pulse {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.06); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .icon,
+    .glyph {
+      animation: none !important;
+      transition: none !important;
+      transform: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    :host {
+      --ui-icon-border: 2px solid color-mix(in srgb, currentColor 48%, transparent);
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-icon-color: CanvasText;
+      --ui-icon-bg: Canvas;
+      --ui-icon-border: 1px solid CanvasText;
+      --ui-icon-shadow: none;
+    }
+
+    .icon,
+    .fallback {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+      box-shadow: none;
+    }
+
+    .badge {
+      background: Highlight;
+      border-color: Canvas;
+    }
+  }
+`;
+function u(r) {
+  return r.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function z(r) {
+  if (!r)
+    return null;
+  const e = r.trim();
+  return e ? /^\d+(\.\d+)?$/.test(e) ? `${e}px` : e : null;
+}
+function d(r) {
+  if (!r)
+    return;
+  const e = Number(r);
+  return Number.isFinite(e) ? e : void 0;
+}
+class w extends v {
+  constructor() {
+    super(), this._lastName = "";
+  }
+  static get observedAttributes() {
+    return [
+      "name",
+      "size",
+      "color",
+      "variant",
+      "icon-variant",
+      "secondary-color",
+      "tone",
+      "shape",
+      "spin",
+      "pulse",
+      "badge",
+      "label",
+      "decorative",
+      "stroke-width",
+      "absolute-stroke-width",
+      "stroke-linecap",
+      "stroke-linejoin",
+      "rotate",
+      "flip",
+      "rtl",
+      "headless"
+    ];
+  }
+  _syncDynamicVars() {
+    const e = z(this.getAttribute("size"));
+    e ? this.style.setProperty("--ui-icon-size", e) : this.style.removeProperty("--ui-icon-size");
+    const i = this.getAttribute("color");
+    i ? this.style.setProperty("--ui-icon-color", i) : this.style.removeProperty("--ui-icon-color");
+    const t = this.getAttribute("stroke-width");
+    t ? this.style.setProperty("--ui-icon-stroke-width", t) : this.style.removeProperty("--ui-icon-stroke-width");
+  }
+  render() {
+    if (this._syncDynamicVars(), this.hasAttribute("headless")) {
+      this.setContent("<style></style><slot></slot>");
+      return;
+    }
+    const e = this.getAttribute("name") || "", i = this.getAttribute("label") || "", t = this.hasAttribute("decorative"), n = e ? b(e, {
+      variant: this.getAttribute("icon-variant") || void 0,
+      secondaryColor: this.getAttribute("secondary-color") || void 0,
+      strokeWidth: d(this.getAttribute("stroke-width")),
+      absoluteStrokeWidth: this.hasAttribute("absolute-stroke-width"),
+      strokeLinecap: this.getAttribute("stroke-linecap") || void 0,
+      strokeLinejoin: this.getAttribute("stroke-linejoin") || void 0,
+      rotate: d(this.getAttribute("rotate")),
+      flip: this.getAttribute("flip") || void 0,
+      rtl: this.hasAttribute("rtl")
+    }) : "", o = !!n, a = t ? 'aria-hidden="true" role="presentation"' : `role="img" aria-label="${u(i || e || "icon")}"`;
+    this.setContent(`
+      <style>${y}</style>
+      <span class="icon" part="icon" ${a}>
+        <span class="glyph" part="glyph">
+          ${o ? n : `<span class="fallback" part="fallback">${u((e || "?").slice(0, 1).toUpperCase())}</span>`}
+          ${o ? "" : "<slot></slot>"}
+        </span>
+        ${this.hasAttribute("badge") ? '<span class="badge" part="badge" aria-hidden="true"></span>' : ""}
+      </span>
+    `), e !== this._lastName && (this.dispatchEvent(
+      new CustomEvent("iconchange", {
+        detail: { name: e, found: o },
+        bubbles: !0
+      })
+    ), this._lastName = e);
+  }
+  shouldRenderOnAttributeChange(e, i, t) {
+    return !0;
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-icon") && customElements.define("ui-icon", w);
+export {
+  w as U,
+  b as a,
+  L as c,
+  $ as g,
+  W as h,
+  I as r,
+  S as u
+};