@editora/ui-core 0.1.9 → 0.1.12

package/dist/box.cjs.js

@@ -0,0 +1,226 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("./ElementBase-1b301e7f.js"),w={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"],_={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)"},A=`
+  :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 e=i.trim();if(!e.startsWith("{"))return null;try{const r=JSON.parse(e);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 k(i){const e=i.trim();return!e||/[;{}<>]/.test(e)?"":e}function t(i){return _[i]||i}function h(i){if(!i)return"";const e=i.trim().toLowerCase();return e?e==="none"?"0px":e==="sm"?"8px":e==="md"?"12px":e==="lg"?"18px":e==="xl"?"24px":e==="full"?"9999px":/^\d+(\.\d+)?$/.test(e)?`${e}px`:i:""}function l(i,e){return e?f(e)!==null:!1}function p(i,e){const r=k(e);if(!r)return{};switch(i){case"p":return{padding:t(r)};case"px":return{"padding-left":t(r),"padding-right":t(r)};case"py":return{"padding-top":t(r),"padding-bottom":t(r)};case"pt":return{"padding-top":t(r)};case"pr":return{"padding-right":t(r)};case"pb":return{"padding-bottom":t(r)};case"pl":return{"padding-left":t(r)};case"m":return{margin:t(r)};case"mx":return{"margin-left":t(r),"margin-right":t(r)};case"my":return{"margin-top":t(r),"margin-bottom":t(r)};case"mt":return{"margin-top":t(r)};case"mr":return{"margin-right":t(r)};case"mb":return{"margin-bottom":t(r)};case"ml":return{"margin-left":t(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 g extends y.ElementBase{constructor(){super(),this._lastClassname="",this._appliedInlineProps=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 e=h(this.getAttribute("radius"));e&&this.style.setProperty("--ui-box-radius",e),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(e,r,a){if(r!==a){if((e==="interactive"||e==="disabled")&&this._syncInteractiveA11y(),e==="state"&&this._syncBusyState(),e==="radius"){const s=h(a);s?this.style.setProperty("--ui-box-radius",s):this.style.removeProperty("--ui-box-radius")}if(this.isConnected){if(e==="classname"){this._syncLegacyClassname();return}if(d.includes(e)&&!l(e,a)&&!l(e,r)){this._applyInlineStyles();return}this.shouldRenderOnAttributeChange(e,r,a)&&this.requestRender()}}}_syncInteractiveA11y(){const e=this.hasAttribute("interactive"),r=this.hasAttribute("disabled");if(e){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(e){!this.hasAttribute("interactive")||this.hasAttribute("disabled")||e.target===this&&(e.key!=="Enter"&&e.key!==" "||(e.preventDefault(),this.click()))}_syncLegacyClassname(){const e=this.getAttribute("classname")||"";e!==this._lastClassname&&(this._lastClassname&&this._lastClassname.split(/\s+/).forEach(r=>{r&&this.classList.remove(r)}),e&&e.split(/\s+/).forEach(r=>{r&&this.classList.add(r)}),this._lastClassname=e)}_applyInlineStyles(){this._appliedInlineProps.forEach(e=>this.style.removeProperty(e)),this._appliedInlineProps.clear(),d.forEach(e=>{const r=this.getAttribute(e);if(!r||f(r))return;const a=p(e,r);Object.entries(a).forEach(([s,n])=>{n&&(this.style.setProperty(s,n),this._appliedInlineProps.add(s))})})}_buildResponsiveCss(){const e={},r={sm:{},md:{},lg:{},xl:{}};d.forEach(c=>{const b=this.getAttribute(c),o=f(b);if(!o)return;const u=(x,m)=>{const v=p(c,m);Object.assign(x,v)};typeof o.initial=="string"&&u(e,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",e);return n&&s.push(n),Object.keys(r).forEach(c=>{const b=a(":host",r[c]);b&&s.push(`@media (min-width: ${w[c]}) { ${b} }`)}),s.join(`
+`)}render(){this._syncLegacyClassname(),this._syncInteractiveA11y(),this._syncBusyState(),this._applyInlineStyles();const e=this._buildResponsiveCss();this.setContent(`<style>${A}${e?`
+${e}`:""}</style><slot></slot>`)}shouldRenderOnAttributeChange(e,r,a){return r===a||["variant","tone","elevation","radius","interactive","disabled","state","headless"].includes(e)?!1:d.includes(e)?l(e,r)||l(e,a):e==="classname"}}typeof customElements<"u"&&!customElements.get("ui-box")&&customElements.define("ui-box",g);exports.UIBox=g;