@editora/ui-core 0.1.9 → 0.1.12

package/dist/box.esm.js

@@ -0,0 +1,556 @@
+import { E as v } from "./ElementBase-909688f3.mjs";
+const y = {
+  sm: "var(--ui-breakpoint-sm, 640px)",
+  md: "var(--ui-breakpoint-md, 768px)",
+  lg: "var(--ui-breakpoint-lg, 1024px)",
+  xl: "var(--ui-breakpoint-xl, 1280px)"
+}, d = [
+  "p",
+  "px",
+  "py",
+  "pt",
+  "pr",
+  "pb",
+  "pl",
+  "m",
+  "mx",
+  "my",
+  "mt",
+  "mr",
+  "mb",
+  "ml",
+  "width",
+  "w",
+  "minwidth",
+  "minw",
+  "maxwidth",
+  "maxw",
+  "height",
+  "h",
+  "minheight",
+  "minh",
+  "maxheight",
+  "maxh",
+  "background",
+  "bg",
+  "color",
+  "opacity",
+  "overflow",
+  "overflowx",
+  "overflowy",
+  "zindex",
+  "display",
+  "position",
+  "inset",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "justify",
+  "align",
+  "alignself",
+  "aligncontent",
+  "flexbasis",
+  "flexgrow",
+  "flexshrink",
+  "gap",
+  "rowgap",
+  "columngap",
+  "gridarea",
+  "gridcolumn",
+  "gridcolumnstart",
+  "gridcolumnend",
+  "gridrow",
+  "gridrowstart",
+  "gridrowend"
+], w = {
+  none: "0",
+  xxs: "var(--ui-space-2xs, 2px)",
+  xs: "var(--ui-space-xs, 4px)",
+  sm: "var(--ui-space-sm, 8px)",
+  md: "var(--ui-space-md, 12px)",
+  lg: "var(--ui-space-lg, 20px)",
+  xl: "var(--ui-space-xl, 28px)",
+  "2xl": "var(--ui-space-2xl, 40px)"
+}, _ = `
+  :host {
+    --ui-box-bg: transparent;
+    --ui-box-color: inherit;
+    --ui-box-border: none;
+    --ui-box-border-color: transparent;
+    --ui-box-border-width: 1px;
+    --ui-box-border-style: solid;
+    --ui-box-shadow: none;
+    --ui-box-radius: var(--base-box-radius, var(--ui-radius, 4px));
+    --ui-box-backdrop: none;
+    --ui-box-accent: var(--ui-color-primary, var(--ui-primary, #2563eb));
+    --ui-box-outline: color-mix(in srgb, var(--ui-box-accent) 30%, transparent);
+    --ui-box-duration: 180ms;
+    color-scheme: light dark;
+    display: block;
+    box-sizing: border-box;
+    position: relative;
+    min-inline-size: 0;
+    background: var(--ui-box-bg);
+    color: var(--ui-box-color);
+    border: var(--ui-box-border);
+    border-radius: var(--ui-box-radius);
+    box-shadow: var(--ui-box-shadow);
+    backdrop-filter: var(--ui-box-backdrop);
+    transition: none;
+    font-family: var(--ui-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+  }
+
+  :host([data-ui-ready]) {
+    transition:
+      background-color var(--ui-box-duration) cubic-bezier(0.2, 0.8, 0.2, 1),
+      border-color var(--ui-box-duration) cubic-bezier(0.2, 0.8, 0.2, 1),
+      box-shadow var(--ui-box-duration) cubic-bezier(0.2, 0.8, 0.2, 1),
+      transform var(--ui-box-duration) cubic-bezier(0.2, 0.8, 0.2, 1),
+      opacity var(--ui-box-duration) cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+
+  :host([variant]),
+  :host([state="error"]),
+  :host([state="success"]) {
+    --ui-box-border: var(--ui-box-border-width) var(--ui-box-border-style) var(--ui-box-border-color);
+  }
+
+  :host([variant="surface"]) {
+    --ui-box-bg: var(--base-box-bg, var(--ui-color-surface, var(--ui-surface, #ffffff)));
+    --ui-box-color: var(--ui-color-text, var(--ui-text, #0f172a));
+    --ui-box-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 80%, transparent);
+    --ui-box-shadow: var(--base-box-shadow, 0 1px 3px rgba(2, 6, 23, 0.05), 0 10px 24px rgba(2, 6, 23, 0.06));
+  }
+
+  :host([variant="elevated"]) {
+    --ui-box-bg: var(--ui-color-surface, var(--ui-surface, #ffffff));
+    --ui-box-color: var(--ui-color-text, var(--ui-text, #0f172a));
+    --ui-box-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 70%, transparent);
+    --ui-box-shadow: 0 2px 8px rgba(2, 6, 23, 0.08), 0 24px 52px rgba(2, 6, 23, 0.14);
+  }
+
+  :host([variant="outline"]) {
+    --ui-box-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 92%, transparent);
+    --ui-box-color: var(--ui-color-text, var(--ui-text, #0f172a));
+    --ui-box-border-color: color-mix(in srgb, var(--ui-box-accent) 30%, var(--ui-color-border, #cbd5e1));
+    --ui-box-shadow: none;
+  }
+
+  :host([variant="glass"]) {
+    --ui-box-bg:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--ui-color-surface, #ffffff) 84%, #ffffff 16%),
+        color-mix(in srgb, var(--ui-color-surface, #ffffff) 88%, transparent)
+      );
+    --ui-box-color: var(--ui-color-text, var(--ui-text, #0f172a));
+    --ui-box-border-color: color-mix(in srgb, #ffffff 68%, var(--ui-color-border, #cbd5e1));
+    --ui-box-shadow: 0 1px 2px rgba(2, 6, 23, 0.06), 0 26px 58px rgba(2, 6, 23, 0.14);
+    --ui-box-backdrop: var(--base-box-backdrop, blur(12px) saturate(1.08));
+  }
+
+  :host([variant="gradient"]) {
+    --ui-box-bg:
+      linear-gradient(
+        140deg,
+        color-mix(in srgb, var(--ui-box-accent) 14%, var(--ui-color-surface, #ffffff)),
+        color-mix(in srgb, var(--ui-box-accent) 6%, var(--ui-color-surface, #ffffff))
+      );
+    --ui-box-color: var(--ui-color-text, var(--ui-text, #0f172a));
+    --ui-box-border-color: color-mix(in srgb, var(--ui-box-accent) 24%, transparent);
+    --ui-box-shadow: 0 2px 10px rgba(2, 6, 23, 0.08), 0 16px 36px rgba(2, 6, 23, 0.1);
+  }
+
+  :host([variant="soft"]) {
+    --ui-box-bg: color-mix(in srgb, var(--ui-box-accent) 7%, var(--ui-color-surface, #ffffff));
+    --ui-box-color: var(--ui-color-text, var(--ui-text, #0f172a));
+    --ui-box-border-color: color-mix(in srgb, var(--ui-box-accent) 18%, var(--ui-color-border, #cbd5e1));
+    --ui-box-shadow: 0 1px 2px rgba(2, 6, 23, 0.04), 0 8px 18px rgba(2, 6, 23, 0.08);
+  }
+
+  :host([variant="contrast"]) {
+    --ui-box-bg: #0f172a;
+    --ui-box-color: #e2e8f0;
+    --ui-box-border-color: #334155;
+    --ui-box-shadow: 0 2px 10px rgba(2, 6, 23, 0.22), 0 18px 42px rgba(2, 6, 23, 0.34);
+  }
+
+  :host([tone="neutral"]) { --ui-box-accent: color-mix(in srgb, var(--ui-color-muted, #64748b) 72%, var(--ui-color-text, #0f172a) 28%); }
+  :host([tone="brand"]) { --ui-box-accent: var(--ui-color-primary, var(--ui-primary, #2563eb)); }
+  :host([tone="info"]) { --ui-box-accent: var(--ui-color-primary, #2563eb); }
+  :host([tone="success"]) { --ui-box-accent: #16a34a; }
+  :host([tone="warning"]) { --ui-box-accent: #d97706; }
+  :host([tone="danger"]) { --ui-box-accent: #dc2626; }
+
+  :host([elevation="none"]) { --ui-box-shadow: none; }
+  :host([elevation="low"]) { --ui-box-shadow: 0 1px 3px rgba(2, 6, 23, 0.06), 0 10px 24px rgba(2, 6, 23, 0.08); }
+  :host([elevation="high"]) { --ui-box-shadow: 0 2px 12px rgba(2, 6, 23, 0.12), 0 34px 72px rgba(2, 6, 23, 0.18); }
+
+  :host([radius="none"]) { --ui-box-radius: 0; }
+  :host([radius="sm"]) { --ui-box-radius: 8px; }
+  :host([radius="md"]) { --ui-box-radius: 12px; }
+  :host([radius="lg"]) { --ui-box-radius: 18px; }
+  :host([radius="xl"]) { --ui-box-radius: 24px; }
+  :host([radius="full"]) { --ui-box-radius: 9999px; }
+
+  :host([interactive]) {
+    cursor: pointer;
+  }
+
+  :host([interactive]:not([disabled])):hover {
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(2, 6, 23, 0.09), 0 22px 44px rgba(2, 6, 23, 0.14);
+  }
+
+  :host([interactive]:not([disabled])):active {
+    transform: translateY(0) scale(0.995);
+  }
+
+  :host([interactive]):focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px var(--ui-box-outline), var(--ui-box-shadow);
+  }
+
+  :host(:focus-within) {
+    box-shadow: 0 0 0 2px var(--ui-box-outline), var(--ui-box-shadow);
+  }
+
+  :host([state="loading"]) {
+    cursor: progress;
+  }
+
+  :host([state="loading"])::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    background:
+      linear-gradient(
+        100deg,
+        color-mix(in srgb, transparent 100%, #ffffff) 0%,
+        color-mix(in srgb, var(--ui-box-accent) 14%, transparent) 40%,
+        color-mix(in srgb, transparent 100%, #ffffff) 78%
+      );
+    background-size: 220% 100%;
+    animation: ui-box-shimmer 1.3s linear infinite;
+    opacity: 0.58;
+  }
+
+  :host([state="error"]) {
+    --ui-box-accent: var(--ui-color-danger, #dc2626);
+    --ui-box-border-color: color-mix(in srgb, var(--ui-box-accent) 42%, var(--ui-color-border, #cbd5e1));
+    --ui-box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-box-accent) 16%, transparent), var(--ui-box-shadow);
+  }
+
+  :host([state="success"]) {
+    --ui-box-accent: var(--ui-color-success, #16a34a);
+    --ui-box-border-color: color-mix(in srgb, var(--ui-box-accent) 42%, var(--ui-color-border, #cbd5e1));
+    --ui-box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-box-accent) 16%, transparent), var(--ui-box-shadow);
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: 0.58;
+    filter: saturate(0.76);
+    transform: none !important;
+  }
+
+  :host([headless]) {
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+    backdrop-filter: none;
+  }
+
+  @keyframes ui-box-shimmer {
+    from { background-position: 120% 0; }
+    to { background-position: -120% 0; }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host,
+    :host::after {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    :host {
+      --ui-box-border-width: 2px;
+      --ui-box-shadow: none;
+      --ui-box-backdrop: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-box-bg: Canvas;
+      --ui-box-color: CanvasText;
+      --ui-box-border-color: CanvasText;
+      --ui-box-shadow: none;
+      --ui-box-backdrop: none;
+    }
+  }
+`;
+function f(i) {
+  if (!i)
+    return null;
+  const t = i.trim();
+  if (!t.startsWith("{"))
+    return null;
+  try {
+    const r = JSON.parse(t);
+    if (!r || typeof r != "object")
+      return null;
+    const a = {};
+    return Object.keys(r).forEach((s) => {
+      const n = r[s];
+      (typeof n == "string" || typeof n == "number") && (a[s] = String(n));
+    }), a;
+  } catch {
+    return null;
+  }
+}
+function A(i) {
+  const t = i.trim();
+  return !t || /[;{}<>]/.test(t) ? "" : t;
+}
+function e(i) {
+  return w[i] || i;
+}
+function h(i) {
+  if (!i)
+    return "";
+  const t = i.trim().toLowerCase();
+  return t ? t === "none" ? "0px" : t === "sm" ? "8px" : t === "md" ? "12px" : t === "lg" ? "18px" : t === "xl" ? "24px" : t === "full" ? "9999px" : /^\d+(\.\d+)?$/.test(t) ? `${t}px` : i : "";
+}
+function l(i, t) {
+  return t ? f(t) !== null : !1;
+}
+function p(i, t) {
+  const r = A(t);
+  if (!r)
+    return {};
+  switch (i) {
+    case "p":
+      return { padding: e(r) };
+    case "px":
+      return { "padding-left": e(r), "padding-right": e(r) };
+    case "py":
+      return { "padding-top": e(r), "padding-bottom": e(r) };
+    case "pt":
+      return { "padding-top": e(r) };
+    case "pr":
+      return { "padding-right": e(r) };
+    case "pb":
+      return { "padding-bottom": e(r) };
+    case "pl":
+      return { "padding-left": e(r) };
+    case "m":
+      return { margin: e(r) };
+    case "mx":
+      return { "margin-left": e(r), "margin-right": e(r) };
+    case "my":
+      return { "margin-top": e(r), "margin-bottom": e(r) };
+    case "mt":
+      return { "margin-top": e(r) };
+    case "mr":
+      return { "margin-right": e(r) };
+    case "mb":
+      return { "margin-bottom": e(r) };
+    case "ml":
+      return { "margin-left": e(r) };
+    case "background":
+    case "bg":
+      return { background: r };
+    case "w":
+    case "width":
+      return { width: r };
+    case "h":
+    case "height":
+      return { height: r };
+    case "minw":
+    case "minwidth":
+      return { "min-width": r };
+    case "maxw":
+    case "maxwidth":
+      return { "max-width": r };
+    case "minh":
+    case "minheight":
+      return { "min-height": r };
+    case "maxh":
+    case "maxheight":
+      return { "max-height": r };
+    case "align":
+      return { "align-items": r };
+    case "alignself":
+      return { "align-self": r };
+    case "aligncontent":
+      return { "align-content": r };
+    case "justify":
+      return { "justify-content": r };
+    case "flexbasis":
+      return { "flex-basis": r };
+    case "flexgrow":
+      return { "flex-grow": r };
+    case "flexshrink":
+      return { "flex-shrink": r };
+    case "gridarea":
+      return { "grid-area": r };
+    case "gridcolumn":
+      return { "grid-column": r };
+    case "gridcolumnstart":
+      return { "grid-column-start": r };
+    case "gridcolumnend":
+      return { "grid-column-end": r };
+    case "gridrow":
+      return { "grid-row": r };
+    case "gridrowstart":
+      return { "grid-row-start": r };
+    case "gridrowend":
+      return { "grid-row-end": r };
+    case "rowgap":
+      return { "row-gap": r };
+    case "columngap":
+      return { "column-gap": r };
+    case "overflowx":
+      return { "overflow-x": r };
+    case "overflowy":
+      return { "overflow-y": r };
+    case "zindex":
+      return { "z-index": r };
+    default:
+      return { [i]: r };
+  }
+}
+class k extends v {
+  constructor() {
+    super(), this._lastClassname = "", this._appliedInlineProps = /* @__PURE__ */ new Set(), this._managedRole = !1, this._managedTabIndex = !1, this._managedAriaDisabled = !1, this._managedAriaBusy = !1, this._readyFrame = null, this._onInteractiveKeyDown = this._onInteractiveKeyDown.bind(this);
+  }
+  static get observedAttributes() {
+    return [
+      "classname",
+      "headless",
+      "variant",
+      "tone",
+      "elevation",
+      "radius",
+      "interactive",
+      "disabled",
+      "state",
+      ...d
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("keydown", this._onInteractiveKeyDown), this._syncInteractiveA11y(), this._syncBusyState();
+    const t = h(this.getAttribute("radius"));
+    t && this.style.setProperty("--ui-box-radius", t), this.hasAttribute("data-ui-ready") || (typeof requestAnimationFrame == "function" ? this._readyFrame = requestAnimationFrame(() => {
+      this._readyFrame = null, this.setAttribute("data-ui-ready", "");
+    }) : this._readyFrame = window.setTimeout(() => {
+      this._readyFrame = null, this.setAttribute("data-ui-ready", "");
+    }, 16));
+  }
+  disconnectedCallback() {
+    this.removeEventListener("keydown", this._onInteractiveKeyDown), this._readyFrame != null && (typeof cancelAnimationFrame == "function" && cancelAnimationFrame(this._readyFrame), clearTimeout(this._readyFrame), this._readyFrame = null), super.disconnectedCallback();
+  }
+  attributeChangedCallback(t, r, a) {
+    if (r !== a) {
+      if ((t === "interactive" || t === "disabled") && this._syncInteractiveA11y(), t === "state" && this._syncBusyState(), t === "radius") {
+        const s = h(a);
+        s ? this.style.setProperty("--ui-box-radius", s) : this.style.removeProperty("--ui-box-radius");
+      }
+      if (this.isConnected) {
+        if (t === "classname") {
+          this._syncLegacyClassname();
+          return;
+        }
+        if (d.includes(t) && !l(t, a) && !l(t, r)) {
+          this._applyInlineStyles();
+          return;
+        }
+        this.shouldRenderOnAttributeChange(t, r, a) && this.requestRender();
+      }
+    }
+  }
+  _syncInteractiveA11y() {
+    const t = this.hasAttribute("interactive"), r = this.hasAttribute("disabled");
+    if (t) {
+      this.hasAttribute("role") || (this.setAttribute("role", "button"), this._managedRole = !0), this.hasAttribute("tabindex") ? this._managedTabIndex && this.setAttribute("tabindex", r ? "-1" : "0") : (this.setAttribute("tabindex", r ? "-1" : "0"), this._managedTabIndex = !0), (!this.hasAttribute("aria-disabled") || this._managedAriaDisabled) && (this.setAttribute("aria-disabled", r ? "true" : "false"), this._managedAriaDisabled = !0);
+      return;
+    }
+    this._managedRole && (this.removeAttribute("role"), this._managedRole = !1), this._managedTabIndex && (this.removeAttribute("tabindex"), this._managedTabIndex = !1), this._managedAriaDisabled && (this.removeAttribute("aria-disabled"), this._managedAriaDisabled = !1);
+  }
+  _syncBusyState() {
+    if (this.getAttribute("state") === "loading") {
+      (!this.hasAttribute("aria-busy") || this._managedAriaBusy) && (this.setAttribute("aria-busy", "true"), this._managedAriaBusy = !0);
+      return;
+    }
+    this._managedAriaBusy && (this.removeAttribute("aria-busy"), this._managedAriaBusy = !1);
+  }
+  _onInteractiveKeyDown(t) {
+    !this.hasAttribute("interactive") || this.hasAttribute("disabled") || t.target === this && (t.key !== "Enter" && t.key !== " " || (t.preventDefault(), this.click()));
+  }
+  _syncLegacyClassname() {
+    const t = this.getAttribute("classname") || "";
+    t !== this._lastClassname && (this._lastClassname && this._lastClassname.split(/\s+/).forEach((r) => {
+      r && this.classList.remove(r);
+    }), t && t.split(/\s+/).forEach((r) => {
+      r && this.classList.add(r);
+    }), this._lastClassname = t);
+  }
+  _applyInlineStyles() {
+    this._appliedInlineProps.forEach((t) => this.style.removeProperty(t)), this._appliedInlineProps.clear(), d.forEach((t) => {
+      const r = this.getAttribute(t);
+      if (!r || f(r))
+        return;
+      const a = p(t, r);
+      Object.entries(a).forEach(([s, n]) => {
+        n && (this.style.setProperty(s, n), this._appliedInlineProps.add(s));
+      });
+    });
+  }
+  _buildResponsiveCss() {
+    const t = {}, r = {
+      sm: {},
+      md: {},
+      lg: {},
+      xl: {}
+    };
+    d.forEach((c) => {
+      const b = this.getAttribute(c), o = f(b);
+      if (!o)
+        return;
+      const u = (x, m) => {
+        const g = p(c, m);
+        Object.assign(x, g);
+      };
+      typeof o.initial == "string" && u(t, o.initial), typeof o.sm == "string" && u(r.sm, o.sm), typeof o.md == "string" && u(r.md, o.md), typeof o.lg == "string" && u(r.lg, o.lg), typeof o.xl == "string" && u(r.xl, o.xl);
+    });
+    const a = (c, b) => {
+      const o = Object.entries(b).filter(([, u]) => !!u);
+      return o.length ? `${c} { ${o.map(([u, x]) => `${u}: ${x};`).join(" ")} }` : "";
+    }, s = [], n = a(":host", t);
+    return n && s.push(n), Object.keys(r).forEach((c) => {
+      const b = a(":host", r[c]);
+      b && s.push(`@media (min-width: ${y[c]}) { ${b} }`);
+    }), s.join(`
+`);
+  }
+  render() {
+    this._syncLegacyClassname(), this._syncInteractiveA11y(), this._syncBusyState(), this._applyInlineStyles();
+    const t = this._buildResponsiveCss();
+    this.setContent(`<style>${_}${t ? `
+${t}` : ""}</style><slot></slot>`);
+  }
+  shouldRenderOnAttributeChange(t, r, a) {
+    return r === a || ["variant", "tone", "elevation", "radius", "interactive", "disabled", "state", "headless"].includes(t) ? !1 : d.includes(t) ? l(t, r) || l(t, a) : t === "classname";
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-box") && customElements.define("ui-box", k);
+export {
+  k as UIBox
+};