@editora/ui-core 0.1.9 → 0.1.10

package/dist/icon-eaa486b3.js

@@ -0,0 +1,207 @@
+"use strict";const x=require("./ElementBase-1b301e7f.js"),l=require("@editora/icons"),s=new Map,d=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||"",f=e.strokeLinejoin||"",p=e.rotate==null?"":String(e.rotate),m=e.flip||"",v=e.rtl?"1":"0";return[r,i,t,n,o,a,f,p,m,v].join("::")}function y(r,e){const i=c(r);i&&s.set(i,e)}function z(r){const e=c(r);e&&s.delete(e)}function C(){s.clear()}function w(r){const e=c(r);return e?s.has(e)?!0:l.hasIcon(e):!1}function I(r,e){return u(r,{variant:e})}function u(r,e){const i=c(r);if(!i)return"";const t=s.get(i);if(t)return t;if(!l.hasIcon(i))return"";const n=k(i,e),o=d.get(n);if(o)return o;const a=l.renderIconSvg(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&&d.set(n,a),a}const A=`
+  :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 h(r){return r.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function S(r){if(!r)return null;const e=r.trim();return e?/^\d+(\.\d+)?$/.test(e)?`${e}px`:e:null}function b(r){if(!r)return;const e=Number(r);return Number.isFinite(e)?e:void 0}class g extends x.ElementBase{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=S(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?u(e,{variant:this.getAttribute("icon-variant")||void 0,secondaryColor:this.getAttribute("secondary-color")||void 0,strokeWidth:b(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:b(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="${h(i||e||"icon")}"`;this.setContent(`
+      <style>${A}</style>
+      <span class="icon" part="icon" ${a}>
+        <span class="glyph" part="glyph">
+          ${o?n:`<span class="fallback" part="fallback">${h((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",g);exports.UIIcon=g;exports.clearCustomIcons=C;exports.getIcon=u;exports.getIconVariant=I;exports.hasIcon=w;exports.registerIcon=y;exports.unregisterIcon=z;

package/dist/icon.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./icon-eaa486b3.js");require("./ElementBase-1b301e7f.js");require("@editora/icons");exports.UIIcon=e.UIIcon;

package/dist/icon.esm.js

@@ -0,0 +1,6 @@
+import { U as t } from "./icon-9ed13093.mjs";
+import "./ElementBase-909688f3.mjs";
+import "@editora/icons";
+export {
+  t as UIIcon
+};