@theh0n/ui 1.1.3 → 1.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +1 -1
- package/dist/index.css +1 -1
- package/dist/index.js +410 -366
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),I={colors:{primary:"#171f2a",secondary:"#202a38",tertiary:"#293648",success:"#22c55e",warning:"#ffaa33",danger:"#ff4444",text:"#eaeff6",description:"#6c808c"},borderRadius:{sm:"4px",md:"8px",lg:"16px"},fontFamily:'"Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif',focusRingColor:"rgba(79, 70, 229, 0.4)"};function ee(t){if(!t)return T(I);const o=T(I);return L(o,t)}function te(t){if(typeof window>"u"||typeof document>"u")return;const o=document.documentElement,n=ne(t);Object.entries(n).forEach(([r,l])=>{o.style.setProperty(r,l)})}function ne(t){return{"--h0n-primary":t.colors.primary,"--h0n-secondary":t.colors.secondary,"--h0n-tertiary":t.colors.tertiary,"--h0n-success":t.colors.success,"--h0n-warning":t.colors.warning,"--h0n-danger":t.colors.danger,"--h0n-text-primary":t.colors.text,"--h0n-text-secondary":t.colors.description,"--h0n-radius-sm":t.borderRadius.sm,"--h0n-radius-md":t.borderRadius.md,"--h0n-radius-lg":t.borderRadius.lg,"--h0n-font-family-base":t.fontFamily,"--h0n-focus-ring":t.focusRingColor}}function L(t,o){const n=Array.isArray(t)?[...t]:{...t};return o&&Object.entries(o).forEach(([r,l])=>{if(l===void 0)return;const f=t[r];D(f)&&D(l)?n[r]=L(f,l):n[r]=l}),n}function T(t){return JSON.parse(JSON.stringify(t))}function D(t){return Object.prototype.toString.call(t)==="[object Object]"}const oe=["disabled","aria-expanded","aria-controls","onClick"],le={class:"h0n-ui-accordion__title"},ae={class:"h0n-ui-accordion__title-text"},re={key:0,class:"h0n-ui-accordion__badge"},se=["id","aria-label"],ce={class:"h0n-ui-accordion__body-inner"},ie={key:0},A=e.defineComponent({__name:"Accordion",props:{items:{default:()=>[]},modelValue:{},multiple:{type:Boolean,default:!1},defaultOpen:{default:null},compact:{type:Boolean,default:!1}},emits:["update:modelValue","toggle"],setup(t,{emit:o}){const n=t,r=o;function l(a){return a==null?[]:Array.isArray(a)?n.multiple?a:a.slice(0,1):[a]}const f=e.ref(l(n.defaultOpen)),u=e.computed(()=>n.modelValue!==void 0?l(n.modelValue):f.value),d=e.computed(()=>new Set(u.value));function i(a){return d.value.has(a)}function s(a){n.modelValue===void 0&&(f.value=a),r("update:modelValue",n.multiple?a:a[0]??null)}function p(a){const m=[...u.value];if(n.multiple){const h=new Set(m);h.has(a)?h.delete(a):h.add(a);const S=Array.from(h);s(S),r("toggle",{id:a,open:h.has(a)});return}const c=m[0]===a;s(c?[]:[a]),r("toggle",{id:a,open:!c})}function v(a){return`h0n-ui-accordion-body-${String(a)}`}function _(a){return a.querySelector(".h0n-ui-accordion__body-inner")}function b(a){const m=a,c=_(m);c&&(m.style.height="0px",m.style.opacity="0",requestAnimationFrame(()=>{m.style.height=`${c.scrollHeight}px`,m.style.opacity="1"}))}function $(a){const m=a;m.style.height="auto",m.style.opacity=""}function E(a){const m=a,c=_(m);c&&(m.style.height=`${c.scrollHeight}px`,m.style.opacity="1",m.offsetHeight,requestAnimationFrame(()=>{m.style.height="0px",m.style.opacity="0"}))}function V(a){const m=a;m.style.height="",m.style.opacity=""}return(a,m)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["h0n-ui-accordion",{"is-compact":t.compact}])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.items,c=>(e.openBlock(),e.createElementBlock("div",{key:c.id,class:e.normalizeClass(["h0n-ui-accordion__item",{"is-open":i(c.id),"is-disabled":!!c.disabled}])},[e.createElementVNode("button",{class:"h0n-ui-accordion__header",type:"button",disabled:c.disabled,"aria-expanded":i(c.id)?"true":"false","aria-controls":v(c.id),onClick:y=>p(c.id)},[e.createElementVNode("span",le,[e.renderSlot(a.$slots,"header",{item:c,open:i(c.id)},()=>[e.createElementVNode("span",ae,e.toDisplayString(c.title),1),c.badge?(e.openBlock(),e.createElementBlock("span",re,e.toDisplayString(c.badge),1)):e.createCommentVNode("",!0)])]),m[0]||(m[0]=e.createElementVNode("svg",{class:"h0n-ui-accordion__chevron",viewBox:"0 0 20 20","aria-hidden":"true"},[e.createElementVNode("path",{d:"M5 7.5L10 12.5L15 7.5",fill:"none",stroke:"currentColor","stroke-width":"1.8","stroke-linecap":"round","stroke-linejoin":"round"})],-1))],8,oe),e.createVNode(e.Transition,{name:"h0n-ui-accordion",onEnter:b,onAfterEnter:$,onLeave:E,onAfterLeave:V},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{class:"h0n-ui-accordion__body",id:v(c.id),role:"region","aria-label":c.title},[e.createElementVNode("div",ce,[e.renderSlot(a.$slots,"body",{item:c,open:i(c.id)},()=>[c.body?(e.openBlock(),e.createElementBlock("p",ie,e.toDisplayString(c.body),1)):e.createCommentVNode("",!0)])])],8,se),[[e.vShow,i(c.id)]])]),_:2},1024)],2))),128))],2))}});function N(){return typeof crypto<"u"&&"randomUUID"in crypto?crypto.randomUUID():Date.now().toString(36)+Math.random().toString(36).slice(2,10)}const R=1e4,g=e.ref([]);function k(){const t=e.computed(()=>g.value.at(-1)??null);function o(d){return g.value.findIndex(i=>i.id===d)}function n(d){const i=o(d);return i===-1?R:R+i*2}function r(d){return n(d)+1}function l(d){const i=d.id??N();return f(i),g.value.push({showOverlay:!0,closeOnOverlay:!0,closeOnEsc:!0,...d,id:i}),i}function f(d){const i=o(d);i!==-1&&g.value.splice(i,1)}function u(){t.value?.onRequestClose?.()}return e.watch(()=>g.value.length,d=>{document.documentElement.classList.toggle("no-scroll",d>0)},{immediate:!0}),{stack:g,top:t,push:l,remove:f,requestCloseTop:u,getBackdropZIndex:n,getContentZIndex:r}}const B=e.shallowRef(null);let w=null;function M(){const t=k();function o(r){return new Promise(l=>{const f=N();w=l,B.value={...r,id:f},t.push({id:f,showOverlay:!0,closeOnOverlay:!0,closeOnEsc:!0,onRequestClose:()=>n(!1)})})}function n(r){if(!B.value)return;const l=B.value.id;B.value=null,t.remove(l),w?.(r),w=null}return{active:B,open:o,close:n}}const ue={class:"h0n-alert",role:"dialog","aria-modal":"true"},de={key:0,class:"h0n-alert__header"},me={class:"h0n-alert__title"},fe={class:"h0n-alert__body"},pe={key:1},he=e.defineComponent({__name:"Alert",setup(t){const{active:o,close:n}=M(),{getContentZIndex:r}=k(),l=()=>n(!0),f=()=>n(!1),u=()=>n(!0),d=e.computed(()=>o.value?.type==="info"),i=e.computed(()=>o.value?r(o.value.id):void 0);return(s,p)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(e.Transition,{name:"h0n-alert-scale",appear:""},{default:e.withCtx(()=>[e.unref(o)?(e.openBlock(),e.createElementBlock("div",{key:0,class:"h0n-alert-layer",style:e.normalizeStyle({zIndex:i.value})},[e.createElementVNode("section",ue,[e.unref(o).title||s.$slots.header?(e.openBlock(),e.createElementBlock("header",de,[e.renderSlot(s.$slots,"header",{},()=>[e.createElementVNode("h4",me,e.toDisplayString(e.unref(o).title),1)],!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",fe,[e.unref(o).component?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(o).component),e.normalizeProps(e.mergeProps({key:0},e.unref(o).props)),null,16)):e.unref(o).message?(e.openBlock(),e.createElementBlock("p",pe,e.toDisplayString(e.unref(o).message),1)):e.createCommentVNode("",!0)]),e.createElementVNode("footer",{class:e.normalizeClass(["h0n-alert__actions",{"is-single":d.value}])},[d.value?(e.openBlock(),e.createElementBlock("button",{key:0,class:"h0n-alert__btn h0n-alert__btn--primary",type:"button",onClick:u}," Ok ")):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createElementVNode("button",{class:"h0n-alert__btn is-danger",type:"button",onClick:f}," Cancel "),e.createElementVNode("button",{class:e.normalizeClass(["h0n-alert__btn h0n-alert__btn--primary",{"is-danger":e.unref(o).type==="danger"}]),type:"button",onClick:l}," Confirm ",2)],64))],2)])],4)):e.createCommentVNode("",!0)]),_:3})]))}}),ve=(t,o)=>{const n=t.__vccOpts||t;for(const[r,l]of o)n[r]=l;return n},H=ve(he,[["__scopeId","data-v-290cad87"]]),x=e.defineComponent({__name:"Spinner",props:{size:{},color:{}},setup(t){const n=t.size??"md";return(r,l)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["h0n-ui-spinner",[`h0n-ui-spinner--${e.unref(n)}`,t.color]]),role:"status","aria-label":"Loading"},null,2))}}),ye=["type","disabled","aria-busy"],ge={key:0,class:"h0n-ui-btn__icon h0n-ui-btn__icon--left"},ke={key:1,class:"h0n-ui-btn__label"},_e={key:2,class:"h0n-ui-btn__spinner","aria-hidden":"true"},be={key:3,class:"h0n-ui-btn__icon h0n-ui-btn__icon--right"},P=e.defineComponent({__name:"Button",props:{text:{},position:{default:"center"},size:{default:"md"},variant:{default:"primary"},pill:{type:Boolean,default:!1},border:{type:Boolean,default:!0},block:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},loading:{type:Boolean},type:{default:"button"},action:{}},emits:["click","done","error"],setup(t,{emit:o}){const n=t,r=o,l=e.ref(!1),f=e.computed(()=>n.loading!==void 0),u=e.computed(()=>f.value?!!n.loading:l.value);function d(s){f.value||(l.value=s)}async function i(s){if(!(n.disabled||u.value)&&(r("click",s),!!n.action))try{d(!0),await n.action(),r("done")}catch(p){r("error",p)}finally{d(!1)}}return(s,p)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["h0n-ui-btn",[`h0n-ui-btn--${t.variant}`,`h0n-ui-btn--${t.size}`,`h0n-ui-btn--text-${t.position}`,{"h0n-ui-btn--loading":u.value,"h0n-ui-btn--pill":t.pill,"h0n-ui-btn--radius":t.border,"h0n-ui-btn--block":t.block}]]),type:t.type,disabled:t.disabled||u.value,"aria-busy":u.value?"true":void 0,onClick:i},[s.$slots.left&&!u.value?(e.openBlock(),e.createElementBlock("span",ge,[e.renderSlot(s.$slots,"left")])):e.createCommentVNode("",!0),u.value?(e.openBlock(),e.createElementBlock("span",_e,[e.createVNode(x,{size:"sm"})])):(e.openBlock(),e.createElementBlock("span",ke,[e.renderSlot(s.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])])),s.$slots.right&&!u.value?(e.openBlock(),e.createElementBlock("span",be,[e.renderSlot(s.$slots,"right")])):e.createCommentVNode("",!0)],10,ye))}}),Be={class:"h0n-ui-card"},Ce={key:0,class:"h0n-ui-card--title"},U=e.defineComponent({__name:"Card",props:{title:{}},setup(t){return(o,n)=>(e.openBlock(),e.createElementBlock("section",Be,[t.title?(e.openBlock(),e.createElementBlock("p",Ce,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"default")]))}}),C=e.shallowRef(null);function q(){const t=k();function o(r){const l=N();C.value={...r,id:l},t.push({id:l,showOverlay:!0,closeOnOverlay:!0,closeOnEsc:!0,onRequestClose:n})}function n(){C.value&&(t.remove(C.value.id),C.value=null)}return{active:C,open:o,close:n}}const $e={class:"content-title-dialog"},Ee={key:0,class:"title-dialog"},Ve={key:0,class:"h0n-dialog-bg-hero"},Se={class:"h0n-dialog-content"},j=e.defineComponent({__name:"Dialog",setup(t){const{active:o,close:n}=q(),{getContentZIndex:r}=k(),l=e.ref("bottom");e.watch(()=>o.value?.side,p=>{p&&(l.value=p)},{immediate:!0});const f=e.computed(()=>`h0n-slide-${l.value}`),u=e.computed(()=>o.value?r(o.value.id):void 0),d=e.computed(()=>o.value?.backgroundUrl?.trim()??""),i=e.computed(()=>d.value.length>0),s=e.computed(()=>i.value?{"--h0n-dialog-bg-image":`url("${d.value.replace(/\\/g,"\\\\").replace(/"/g,'\\"')}")`}:void 0);return(p,v)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(e.Transition,{name:f.value,appear:""},{default:e.withCtx(()=>[e.unref(o)?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["h0n-dialog-layer",`is-${l.value}`]),style:e.normalizeStyle({zIndex:u.value})},[e.createElementVNode("section",{class:e.normalizeClass(["h0n-dialog-panel",[`is-${e.unref(o).side}`,{"has-background-image":i.value}]]),style:e.normalizeStyle(s.value)},[e.createElementVNode("header",{class:e.normalizeClass(["h0n-dialog-header",[`is-${e.unref(o).side}`,{"has-background-image":i.value}]])},[e.createElementVNode("div",$e,[e.unref(o).title?(e.openBlock(),e.createElementBlock("p",Ee,e.toDisplayString(e.unref(o).title),1)):e.createCommentVNode("",!0),e.renderSlot(p.$slots,"dialogHeader")]),e.createElementVNode("button",{class:"h0n-dialog-close",onClick:v[0]||(v[0]=_=>e.unref(n)())}," x ")],2),i.value?(e.openBlock(),e.createElementBlock("div",Ve,[...v[1]||(v[1]=[e.createElementVNode("div",{class:"h0n-dialog-bg-image"},null,-1)])])):e.createCommentVNode("",!0),e.createElementVNode("div",Se,[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(o).component),e.mergeProps(e.unref(o).props,{onClose:e.unref(n)}),null,16,["onClose"]))])],6)],6)):e.createCommentVNode("",!0)]),_:3},8,["name"])]))}}),we={class:"h0n-ui-menu-item__left"},Ne={key:0,class:"h0n-ui-menu-item__icon"},xe={class:"h0n-ui-menu-item__text"},Oe={key:0,class:"h0n-ui-menu-item__desc"},ze={key:0,class:"h0n-ui-menu-item__right"},Ie={key:0,class:"h0n-ui-menu-item__right-text"},Te={key:0,class:"h0n-ui-menu-item__chevron"},F=e.defineComponent({__name:"Menu",props:{title:{},description:{},right:{},icon:{},to:{},as:{},disabled:{type:Boolean},danger:{type:Boolean},chevron:{type:Boolean,default:void 0}},emits:["click"],setup(t,{emit:o}){const n=t,r=o,l=e.computed(()=>!!n.to),f=e.computed(()=>n.as??(l.value?"a":"div")),u=e.computed(()=>n.chevron!==void 0?n.chevron:l.value),d=e.computed(()=>n.disabled?{role:"button",tabindex:-1}:n.as?n.to?{to:n.to}:{}:l.value?{href:"#"}:{role:"button",tabindex:0});function i(s){if(n.disabled){s.preventDefault(),s.stopPropagation();return}!n.as&&l.value&&s.preventDefault(),r("click",s)}return(s,p)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(f.value),e.mergeProps({class:"h0n-ui-menu-item"},d.value,{"aria-disabled":t.disabled||void 0,onClick:i}),{default:e.withCtx(()=>[e.createElementVNode("div",we,[s.$slots.icon||t.icon?(e.openBlock(),e.createElementBlock("div",Ne,[e.renderSlot(s.$slots,"icon",{},()=>[e.createTextVNode(e.toDisplayString(t.icon),1)])])):e.createCommentVNode("",!0),e.createElementVNode("div",xe,[e.createElementVNode("p",{class:e.normalizeClass(["h0n-ui-menu-item__title",{"is-danger":t.danger}])},[e.renderSlot(s.$slots,"title",{},()=>[e.createTextVNode(e.toDisplayString(t.title),1)])],2),t.description||s.$slots.description?(e.openBlock(),e.createElementBlock("p",Oe,[e.renderSlot(s.$slots,"description",{},()=>[e.createTextVNode(e.toDisplayString(t.description),1)])])):e.createCommentVNode("",!0)])]),t.right||s.$slots.right||u.value?(e.openBlock(),e.createElementBlock("div",ze,[e.renderSlot(s.$slots,"right",{},()=>[t.right?(e.openBlock(),e.createElementBlock("p",Ie,e.toDisplayString(t.right),1)):e.createCommentVNode("",!0)]),u.value?(e.openBlock(),e.createElementBlock("span",Te,"›")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)]),_:3},16,["aria-disabled"]))}}),De={key:0,class:"h0n-ui-image__loader"},Re={key:1,class:"h0n-ui-image__error"},Le=["src"],Ae=["src","alt"],W=e.defineComponent({__name:"Image",props:{src:{},alt:{},lazy:{type:Boolean,default:!0},fallback:{},fit:{default:"cover"},radius:{}},setup(t){const o=t,n=e.ref("loading");function r(){n.value="loading";const u=new Image;u.src=o.src,u.onload=()=>{n.value="loaded"},u.onerror=()=>{n.value="error"}}e.onMounted(()=>{if(o.lazy&&"IntersectionObserver"in window){const u=new IntersectionObserver(([d])=>{d.isIntersecting&&(r(),u.disconnect())});u.observe(document.body)}else r()}),e.watch(()=>o.src,r);const l=e.computed(()=>({borderRadius:typeof o.radius=="number"?`${o.radius}px`:o.radius})),f=e.computed(()=>({objectFit:o.fit}));return(u,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["h0n-ui-image",n.value]),style:e.normalizeStyle(l.value)},[n.value==="loading"?(e.openBlock(),e.createElementBlock("div",De)):n.value==="error"?(e.openBlock(),e.createElementBlock("div",Re,[t.fallback?(e.openBlock(),e.createElementBlock("img",{key:0,src:t.fallback},null,8,Le)):e.createCommentVNode("",!0)])):(e.openBlock(),e.createElementBlock("img",{key:2,src:t.src,alt:t.alt,style:e.normalizeStyle(f.value),draggable:"false"},null,12,Ae))],6))}}),Z=e.defineComponent({__name:"Overlay",setup(t){const{top:o,getBackdropZIndex:n,requestCloseTop:r}=k(),l=e.computed(()=>!!o.value&&o.value.showOverlay!==!1),f=e.computed(()=>{if(o.value?.id)return n(o.value.id)});function u(){}function d(s){const p=o.value;!p||p.closeOnOverlay===!1||r()}function i(s){const p=o.value;!p||p.closeOnEsc===!1||s.key==="Escape"&&r()}return e.onMounted(()=>window.addEventListener("keydown",i)),e.onUnmounted(()=>window.removeEventListener("keydown",i)),(s,p)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(e.Transition,{name:"h0n-ui-fade"},{default:e.withCtx(()=>[l.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"h0n-ui-overlay",style:e.normalizeStyle({zIndex:f.value}),onPointerdown:e.withModifiers(u,["self","prevent","stop"]),onPointerup:e.withModifiers(u,["self","prevent","stop"]),onClick:e.withModifiers(d,["self","prevent","stop"])},null,36)):e.createCommentVNode("",!0)]),_:1})]))}}),J=e.defineComponent({__name:"Skeleton",props:{width:{default:"100%"},height:{default:12},radius:{default:8},variant:{default:"rect"},animated:{type:Boolean,default:!0}},setup(t){const o=t,n=l=>typeof l=="number"?`${l}px`:l,r=e.computed(()=>{const l={width:n(o.width),height:n(o.height),borderRadius:n(o.radius)};return o.variant==="circle"?{...l,borderRadius:"999px"}:o.variant==="round"?{...l,borderRadius:"14px"}:l});return(l,f)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["h0n-skeleton",{"is-animated":t.animated}]),style:e.normalizeStyle(r.value)},null,6))}}),Me={class:"h0n-tabs"},He=["onClick"],Pe={class:"h0n-tabs__label"},Ue={key:0,class:"h0n-tabs__content"},K=e.defineComponent({__name:"Tabs",props:{modelValue:{},tabs:{}},emits:["update:modelValue"],setup(t,{emit:o}){const n=t,r=o,l=e.computed(()=>n.tabs.findIndex(a=>a.value===n.modelValue)),f=e.ref(null),u=e.ref(null),d=e.ref(0),i=e.ref(0),s=e.ref("forward");let p=0;const v=()=>{b("auto")},_=()=>{const a=u.value;return a?a.querySelector(".h0n-tabs__tab.is-active"):null},b=async(a="smooth")=>{const m=++p;if(await e.nextTick(),m!==p)return;const c=u.value,y=_(),h=f.value;if(!y||!c){d.value=0,i.value=0;return}const S=y.querySelector(".h0n-tabs__label")??y,G=c.getBoundingClientRect(),O=S.getBoundingClientRect();if(d.value=O.left-G.left,i.value=O.width,!h)return;const Q=y.offsetLeft+y.offsetWidth/2-h.clientWidth/2,Y=Math.max(h.scrollWidth-h.clientWidth,0),z=Math.min(Math.max(Q,0),Y);Math.abs(h.scrollLeft-z)<1||h.scrollTo({left:z,behavior:a})},$=e.computed(()=>({left:"0px",width:`${i.value}px`,transform:`translateX(${d.value}px)`}));e.watch(()=>l.value,(a,m)=>{if(m===void 0||m===-1||a===-1){s.value="forward";return}s.value=a>=m?"forward":"backward"});const E=e.computed(()=>s.value==="forward"?"h0n-tabs-slide-left":"h0n-tabs-slide-right"),V=a=>{r("update:modelValue",a)};return e.onMounted(()=>{b("auto"),window.addEventListener("resize",v)}),e.onBeforeUnmount(()=>{p++,window.removeEventListener("resize",v)}),e.watch(()=>[n.modelValue,n.tabs.length],()=>{b()}),(a,m)=>(e.openBlock(),e.createElementBlock("div",Me,[e.createElementVNode("div",{ref_key:"scrollerRef",ref:f,class:"h0n-tabs__scroller"},[e.createElementVNode("div",{ref_key:"listRef",ref:u,class:"h0n-tabs__list"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.tabs,(c,y)=>(e.openBlock(),e.createElementBlock("button",{key:`${String(c.value)}-${y}`,class:e.normalizeClass(["h0n-tabs__tab",{"is-active":c.value===t.modelValue}]),type:"button",onClick:h=>V(c.value)},[e.createElementVNode("span",Pe,e.toDisplayString(c.label),1)],10,He))),128)),e.createElementVNode("span",{class:"h0n-tabs__indicator",style:e.normalizeStyle($.value)},null,4)],512)],512),a.$slots.default?(e.openBlock(),e.createElementBlock("div",Ue,[e.createVNode(e.Transition,{name:E.value,mode:"out-in"},{default:e.withCtx(()=>[(e.openBlock(),e.createElementBlock("div",{key:t.modelValue,class:"h0n-tabs__panel"},[e.renderSlot(a.$slots,"default",{activeTab:t.modelValue})]))]),_:3},8,["name"])])):e.createCommentVNode("",!0)]))}});function X(t){const o=je(t);return{install(n){n.component("H0Accordion",A),n.component("H0Alert",H),n.component("H0Button",P),n.component("H0Card",U),n.component("H0Dialog",j),n.component("H0Spinner",x),n.component("H0Menu",F),n.component("H0Image",W),n.component("H0Overlay",Z),n.component("H0Skeleton",J),n.component("H0Tabs",K),te(o.theme)}}}const qe=X();function je(t){return{autoRegisterComponents:t?.autoRegisterComponents??!0,theme:ee(t?.theme)}}exports.Accordion=A;exports.Alert=H;exports.Button=P;exports.Card=U;exports.Dialog=j;exports.Image=W;exports.Menu=F;exports.Overlay=Z;exports.Skeleton=J;exports.Spinner=x;exports.Tabs=K;exports.createH0NPlugin=X;exports.h0nUi=qe;exports.useOverlayStack=k;exports.useWebAlert=M;exports.useWebDialog=q;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),I={colors:{primary:"#171f2a",secondary:"#202a38",tertiary:"#293648",success:"#22c55e",warning:"#ffaa33",danger:"#ff4444",text:"#eaeff6",description:"#6c808c"},borderRadius:{sm:"4px",md:"8px",lg:"16px"},fontFamily:'"Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif',focusRingColor:"rgba(79, 70, 229, 0.4)"};function te(t){if(!t)return T(I);const o=T(I);return L(o,t)}function ne(t){if(typeof window>"u"||typeof document>"u")return;const o=document.documentElement,n=oe(t);Object.entries(n).forEach(([c,a])=>{o.style.setProperty(c,a)})}function oe(t){return{"--h0n-primary":t.colors.primary,"--h0n-secondary":t.colors.secondary,"--h0n-tertiary":t.colors.tertiary,"--h0n-success":t.colors.success,"--h0n-warning":t.colors.warning,"--h0n-danger":t.colors.danger,"--h0n-text-primary":t.colors.text,"--h0n-text-secondary":t.colors.description,"--h0n-radius-sm":t.borderRadius.sm,"--h0n-radius-md":t.borderRadius.md,"--h0n-radius-lg":t.borderRadius.lg,"--h0n-font-family-base":t.fontFamily,"--h0n-focus-ring":t.focusRingColor}}function L(t,o){const n=Array.isArray(t)?[...t]:{...t};return o&&Object.entries(o).forEach(([c,a])=>{if(a===void 0)return;const f=t[c];D(f)&&D(a)?n[c]=L(f,a):n[c]=a}),n}function T(t){return JSON.parse(JSON.stringify(t))}function D(t){return Object.prototype.toString.call(t)==="[object Object]"}const ae=["disabled","aria-expanded","aria-controls","onClick"],le={class:"h0n-ui-accordion__title"},re={class:"h0n-ui-accordion__title-text"},se={key:0,class:"h0n-ui-accordion__badge"},ce=["id","aria-label"],ie={class:"h0n-ui-accordion__body-inner"},ue={key:0},A=e.defineComponent({__name:"Accordion",props:{items:{default:()=>[]},modelValue:{},multiple:{type:Boolean,default:!1},defaultOpen:{default:null},compact:{type:Boolean,default:!1}},emits:["update:modelValue","toggle"],setup(t,{emit:o}){const n=t,c=o;function a(r){return r==null?[]:Array.isArray(r)?n.multiple?r:r.slice(0,1):[r]}const f=e.ref(a(n.defaultOpen)),d=e.computed(()=>n.modelValue!==void 0?a(n.modelValue):f.value),m=e.computed(()=>new Set(d.value));function u(r){return m.value.has(r)}function i(r){n.modelValue===void 0&&(f.value=r),c("update:modelValue",n.multiple?r:r[0]??null)}function p(r){const s=[...d.value];if(n.multiple){const y=new Set(s);y.has(r)?y.delete(r):y.add(r);const k=Array.from(y);i(k),c("toggle",{id:r,open:y.has(r)});return}const l=s[0]===r;i(l?[]:[r]),c("toggle",{id:r,open:!l})}function g(r){return`h0n-ui-accordion-body-${String(r)}`}function _(r){return r.querySelector(".h0n-ui-accordion__body-inner")}function b(r){const s=r,l=_(s);l&&(s.style.height="0px",s.style.opacity="0",requestAnimationFrame(()=>{s.style.height=`${l.scrollHeight}px`,s.style.opacity="1"}))}function $(r){const s=r;s.style.height="auto",s.style.opacity=""}function E(r){const s=r,l=_(s);l&&(s.style.height=`${l.scrollHeight}px`,s.style.opacity="1",s.offsetHeight,requestAnimationFrame(()=>{s.style.height="0px",s.style.opacity="0"}))}function h(r){const s=r;s.style.height="",s.style.opacity=""}return(r,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["h0n-ui-accordion",{"is-compact":t.compact}])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.items,l=>(e.openBlock(),e.createElementBlock("div",{key:l.id,class:e.normalizeClass(["h0n-ui-accordion__item",{"is-open":u(l.id),"is-disabled":!!l.disabled}])},[e.createElementVNode("button",{class:"h0n-ui-accordion__header",type:"button",disabled:l.disabled,"aria-expanded":u(l.id)?"true":"false","aria-controls":g(l.id),onClick:v=>p(l.id)},[e.createElementVNode("span",le,[e.renderSlot(r.$slots,"header",{item:l,open:u(l.id)},()=>[e.createElementVNode("span",re,e.toDisplayString(l.title),1),l.badge?(e.openBlock(),e.createElementBlock("span",se,e.toDisplayString(l.badge),1)):e.createCommentVNode("",!0)])]),s[0]||(s[0]=e.createElementVNode("svg",{class:"h0n-ui-accordion__chevron",viewBox:"0 0 20 20","aria-hidden":"true"},[e.createElementVNode("path",{d:"M5 7.5L10 12.5L15 7.5",fill:"none",stroke:"currentColor","stroke-width":"1.8","stroke-linecap":"round","stroke-linejoin":"round"})],-1))],8,ae),e.createVNode(e.Transition,{name:"h0n-ui-accordion",onEnter:b,onAfterEnter:$,onLeave:E,onAfterLeave:h},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{class:"h0n-ui-accordion__body",id:g(l.id),role:"region","aria-label":l.title},[e.createElementVNode("div",ie,[e.renderSlot(r.$slots,"body",{item:l,open:u(l.id)},()=>[l.body?(e.openBlock(),e.createElementBlock("p",ue,e.toDisplayString(l.body),1)):e.createCommentVNode("",!0)])])],8,ce),[[e.vShow,u(l.id)]])]),_:2},1024)],2))),128))],2))}});function N(){return typeof crypto<"u"&&"randomUUID"in crypto?crypto.randomUUID():Date.now().toString(36)+Math.random().toString(36).slice(2,10)}const R=1e4,B=e.ref([]);function C(){const t=e.computed(()=>B.value.at(-1)??null);function o(m){return B.value.findIndex(u=>u.id===m)}function n(m){const u=o(m);return u===-1?R:R+u*2}function c(m){return n(m)+1}function a(m){const u=m.id??N();return f(u),B.value.push({showOverlay:!0,closeOnOverlay:!0,closeOnEsc:!0,...m,id:u}),u}function f(m){const u=o(m);u!==-1&&B.value.splice(u,1)}function d(){t.value?.onRequestClose?.()}return e.watch(()=>B.value.length,m=>{document.documentElement.classList.toggle("no-scroll",m>0)},{immediate:!0}),{stack:B,top:t,push:a,remove:f,requestCloseTop:d,getBackdropZIndex:n,getContentZIndex:c}}const w=e.shallowRef(null);let S=null;function M(){const t=C();function o(c){return new Promise(a=>{const f=N();S=a,w.value={...c,id:f},t.push({id:f,showOverlay:!0,closeOnOverlay:!0,closeOnEsc:!0,onRequestClose:()=>n(!1)})})}function n(c){if(!w.value)return;const a=w.value.id;w.value=null,t.remove(a),S?.(c),S=null}return{active:w,open:o,close:n}}const de={class:"h0n-alert",role:"dialog","aria-modal":"true"},me={key:0,class:"h0n-alert__header"},fe={class:"h0n-alert__title"},pe={class:"h0n-alert__body"},he={key:1},ve=e.defineComponent({__name:"Alert",setup(t){const{active:o,close:n}=M(),{getContentZIndex:c}=C(),a=()=>n(!0),f=()=>n(!1),d=()=>n(!0),m=e.computed(()=>o.value?.type==="info"),u=e.computed(()=>o.value?c(o.value.id):void 0);return(i,p)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(e.Transition,{name:"h0n-alert-scale",appear:""},{default:e.withCtx(()=>[e.unref(o)?(e.openBlock(),e.createElementBlock("div",{key:0,class:"h0n-alert-layer",style:e.normalizeStyle({zIndex:u.value})},[e.createElementVNode("section",de,[e.unref(o).title||i.$slots.header?(e.openBlock(),e.createElementBlock("header",me,[e.renderSlot(i.$slots,"header",{},()=>[e.createElementVNode("h4",fe,e.toDisplayString(e.unref(o).title),1)],!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",pe,[e.unref(o).component?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(o).component),e.normalizeProps(e.mergeProps({key:0},e.unref(o).props)),null,16)):e.unref(o).message?(e.openBlock(),e.createElementBlock("p",he,e.toDisplayString(e.unref(o).message),1)):e.createCommentVNode("",!0)]),e.createElementVNode("footer",{class:e.normalizeClass(["h0n-alert__actions",{"is-single":m.value}])},[m.value?(e.openBlock(),e.createElementBlock("button",{key:0,class:"h0n-alert__btn h0n-alert__btn--primary",type:"button",onClick:d}," Ok ")):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createElementVNode("button",{class:"h0n-alert__btn is-danger",type:"button",onClick:f}," Cancel "),e.createElementVNode("button",{class:e.normalizeClass(["h0n-alert__btn h0n-alert__btn--primary",{"is-danger":e.unref(o).type==="danger"}]),type:"button",onClick:a}," Confirm ",2)],64))],2)])],4)):e.createCommentVNode("",!0)]),_:3})]))}}),ye=(t,o)=>{const n=t.__vccOpts||t;for(const[c,a]of o)n[c]=a;return n},P=ye(ve,[["__scopeId","data-v-290cad87"]]),x=e.defineComponent({__name:"Spinner",props:{size:{},color:{}},setup(t){const n=t.size??"md";return(c,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["h0n-ui-spinner",[`h0n-ui-spinner--${e.unref(n)}`,t.color]]),role:"status","aria-label":"Loading"},null,2))}}),ge=["type","disabled","aria-busy"],ke={key:0,class:"h0n-ui-btn__icon h0n-ui-btn__icon--left"},_e={key:1,class:"h0n-ui-btn__label"},be={key:2,class:"h0n-ui-btn__spinner","aria-hidden":"true"},Be={key:3,class:"h0n-ui-btn__icon h0n-ui-btn__icon--right"},H=e.defineComponent({__name:"Button",props:{text:{},position:{default:"center"},size:{default:"md"},variant:{default:"primary"},pill:{type:Boolean,default:!1},border:{type:Boolean,default:!0},block:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},loading:{type:Boolean},type:{default:"button"},action:{}},emits:["click","done","error"],setup(t,{emit:o}){const n=t,c=o,a=e.ref(!1),f=e.computed(()=>n.loading!==void 0),d=e.computed(()=>f.value?!!n.loading:a.value);function m(i){f.value||(a.value=i)}async function u(i){if(!(n.disabled||d.value)&&(c("click",i),!!n.action))try{m(!0),await n.action(),c("done")}catch(p){c("error",p)}finally{m(!1)}}return(i,p)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["h0n-ui-btn",[`h0n-ui-btn--${t.variant}`,`h0n-ui-btn--${t.size}`,`h0n-ui-btn--text-${t.position}`,{"h0n-ui-btn--loading":d.value,"h0n-ui-btn--pill":t.pill,"h0n-ui-btn--radius":t.border,"h0n-ui-btn--block":t.block}]]),type:t.type,disabled:t.disabled||d.value,"aria-busy":d.value?"true":void 0,onClick:u},[i.$slots.left&&!d.value?(e.openBlock(),e.createElementBlock("span",ke,[e.renderSlot(i.$slots,"left")])):e.createCommentVNode("",!0),d.value?(e.openBlock(),e.createElementBlock("span",be,[e.createVNode(x,{size:"sm"})])):(e.openBlock(),e.createElementBlock("span",_e,[e.renderSlot(i.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])])),i.$slots.right&&!d.value?(e.openBlock(),e.createElementBlock("span",Be,[e.renderSlot(i.$slots,"right")])):e.createCommentVNode("",!0)],10,ge))}}),Ce={class:"h0n-ui-card"},$e={key:0,class:"h0n-ui-card--title"},U=e.defineComponent({__name:"Card",props:{title:{}},setup(t){return(o,n)=>(e.openBlock(),e.createElementBlock("section",Ce,[t.title?(e.openBlock(),e.createElementBlock("p",$e,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"default")]))}}),V=e.shallowRef(null);function q(){const t=C();function o(c){const a=N();V.value={...c,id:a},t.push({id:a,showOverlay:!0,closeOnOverlay:!0,closeOnEsc:!0,onRequestClose:n})}function n(){V.value&&(t.remove(V.value.id),V.value=null)}return{active:V,open:o,close:n}}const Ee={class:"content-title-dialog"},we={key:0,class:"title-dialog"},Ve={key:0,class:"h0n-dialog-bg-hero"},Se={class:"h0n-dialog-content"},F=e.defineComponent({__name:"Dialog",setup(t){const{active:o,close:n}=q(),{getContentZIndex:c}=C(),a=e.ref("bottom");e.watch(()=>o.value?.side,h=>{h&&(a.value=h)},{immediate:!0});const f=e.computed(()=>`h0n-slide-${a.value}`),d=e.computed(()=>o.value?c(o.value.id):void 0),m=e.computed(()=>o.value?.backgroundUrl?.trim()??""),u=e.ref(""),i=new Set;let p=0;const g=e.computed(()=>m.value.length>0),_=e.computed(()=>u.value.length>0),b=h=>new Promise(r=>{setTimeout(r,h)}),$=h=>new Promise((r,s)=>{const l=new Image;l.decoding="async",l.fetchPriority="low",l.onload=async()=>{try{typeof l.decode=="function"&&await l.decode()}catch{}r()},l.onerror=()=>{s(new Error("Failed to load dialog background image"))},l.src=h}),E=e.computed(()=>_.value?{"--h0n-dialog-bg-image":`url("${u.value.replace(/\\/g,"\\\\").replace(/"/g,'\\"')}")`}:void 0);return e.watch(m,async(h,r,s)=>{const l=++p;let v=!1;if(s(()=>{v=!0}),u.value="",!!h){if(i.has(h)){u.value=h;return}if(await b(140),!(v||l!==p))try{if(await $(h),v||l!==p)return;i.add(h),u.value=h}catch{if(v||l!==p)return;u.value=""}}},{immediate:!0}),(h,r)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(e.Transition,{name:f.value,appear:""},{default:e.withCtx(()=>[e.unref(o)?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["h0n-dialog-layer",`is-${a.value}`]),style:e.normalizeStyle({zIndex:d.value})},[e.createElementVNode("section",{class:e.normalizeClass(["h0n-dialog-panel",[`is-${e.unref(o).side}`,{"has-background-image":g.value}]]),style:e.normalizeStyle(E.value)},[e.createElementVNode("header",{class:e.normalizeClass(["h0n-dialog-header",[`is-${e.unref(o).side}`,{"has-background-image":g.value}]])},[e.createElementVNode("div",Ee,[e.unref(o).title?(e.openBlock(),e.createElementBlock("p",we,e.toDisplayString(e.unref(o).title),1)):e.createCommentVNode("",!0),e.renderSlot(h.$slots,"dialogHeader")]),e.createElementVNode("button",{class:"h0n-dialog-close",onClick:r[0]||(r[0]=s=>e.unref(n)())}," x ")],2),g.value?(e.openBlock(),e.createElementBlock("div",Ve,[e.createElementVNode("div",{class:e.normalizeClass(["h0n-dialog-bg-image",{"is-loaded":_.value}])},null,2)])):e.createCommentVNode("",!0),e.createElementVNode("div",Se,[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(o).component),e.mergeProps(e.unref(o).props,{onClose:e.unref(n)}),null,16,["onClose"]))])],6)],6)):e.createCommentVNode("",!0)]),_:3},8,["name"])]))}}),Ne={class:"h0n-ui-menu-item__left"},xe={key:0,class:"h0n-ui-menu-item__icon"},ze={class:"h0n-ui-menu-item__text"},Oe={key:0,class:"h0n-ui-menu-item__desc"},Ie={key:0,class:"h0n-ui-menu-item__right"},Te={key:0,class:"h0n-ui-menu-item__right-text"},De={key:0,class:"h0n-ui-menu-item__chevron"},j=e.defineComponent({__name:"Menu",props:{title:{},description:{},right:{},icon:{},to:{},as:{},disabled:{type:Boolean},danger:{type:Boolean},chevron:{type:Boolean,default:void 0}},emits:["click"],setup(t,{emit:o}){const n=t,c=o,a=e.computed(()=>!!n.to),f=e.computed(()=>n.as??(a.value?"a":"div")),d=e.computed(()=>n.chevron!==void 0?n.chevron:a.value),m=e.computed(()=>n.disabled?{role:"button",tabindex:-1}:n.as?n.to?{to:n.to}:{}:a.value?{href:"#"}:{role:"button",tabindex:0});function u(i){if(n.disabled){i.preventDefault(),i.stopPropagation();return}!n.as&&a.value&&i.preventDefault(),c("click",i)}return(i,p)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(f.value),e.mergeProps({class:"h0n-ui-menu-item"},m.value,{"aria-disabled":t.disabled||void 0,onClick:u}),{default:e.withCtx(()=>[e.createElementVNode("div",Ne,[i.$slots.icon||t.icon?(e.openBlock(),e.createElementBlock("div",xe,[e.renderSlot(i.$slots,"icon",{},()=>[e.createTextVNode(e.toDisplayString(t.icon),1)])])):e.createCommentVNode("",!0),e.createElementVNode("div",ze,[e.createElementVNode("p",{class:e.normalizeClass(["h0n-ui-menu-item__title",{"is-danger":t.danger}])},[e.renderSlot(i.$slots,"title",{},()=>[e.createTextVNode(e.toDisplayString(t.title),1)])],2),t.description||i.$slots.description?(e.openBlock(),e.createElementBlock("p",Oe,[e.renderSlot(i.$slots,"description",{},()=>[e.createTextVNode(e.toDisplayString(t.description),1)])])):e.createCommentVNode("",!0)])]),t.right||i.$slots.right||d.value?(e.openBlock(),e.createElementBlock("div",Ie,[e.renderSlot(i.$slots,"right",{},()=>[t.right?(e.openBlock(),e.createElementBlock("p",Te,e.toDisplayString(t.right),1)):e.createCommentVNode("",!0)]),d.value?(e.openBlock(),e.createElementBlock("span",De,"›")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)]),_:3},16,["aria-disabled"]))}}),Re={key:0,class:"h0n-ui-image__loader"},Le={key:1,class:"h0n-ui-image__error"},Ae=["src"],Me=["src","alt"],W=e.defineComponent({__name:"Image",props:{src:{},alt:{},lazy:{type:Boolean,default:!0},fallback:{},fit:{default:"cover"},radius:{}},setup(t){const o=t,n=e.ref("loading");function c(){n.value="loading";const d=new Image;d.src=o.src,d.onload=()=>{n.value="loaded"},d.onerror=()=>{n.value="error"}}e.onMounted(()=>{if(o.lazy&&"IntersectionObserver"in window){const d=new IntersectionObserver(([m])=>{m.isIntersecting&&(c(),d.disconnect())});d.observe(document.body)}else c()}),e.watch(()=>o.src,c);const a=e.computed(()=>({borderRadius:typeof o.radius=="number"?`${o.radius}px`:o.radius})),f=e.computed(()=>({objectFit:o.fit}));return(d,m)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["h0n-ui-image",n.value]),style:e.normalizeStyle(a.value)},[n.value==="loading"?(e.openBlock(),e.createElementBlock("div",Re)):n.value==="error"?(e.openBlock(),e.createElementBlock("div",Le,[t.fallback?(e.openBlock(),e.createElementBlock("img",{key:0,src:t.fallback},null,8,Ae)):e.createCommentVNode("",!0)])):(e.openBlock(),e.createElementBlock("img",{key:2,src:t.src,alt:t.alt,style:e.normalizeStyle(f.value),draggable:"false"},null,12,Me))],6))}}),Z=e.defineComponent({__name:"Overlay",setup(t){const{top:o,getBackdropZIndex:n,requestCloseTop:c}=C(),a=e.computed(()=>!!o.value&&o.value.showOverlay!==!1),f=e.computed(()=>{if(o.value?.id)return n(o.value.id)});function d(){}function m(i){const p=o.value;!p||p.closeOnOverlay===!1||c()}function u(i){const p=o.value;!p||p.closeOnEsc===!1||i.key==="Escape"&&c()}return e.onMounted(()=>window.addEventListener("keydown",u)),e.onUnmounted(()=>window.removeEventListener("keydown",u)),(i,p)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(e.Transition,{name:"h0n-ui-fade"},{default:e.withCtx(()=>[a.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"h0n-ui-overlay",style:e.normalizeStyle({zIndex:f.value}),onPointerdown:e.withModifiers(d,["self","prevent","stop"]),onPointerup:e.withModifiers(d,["self","prevent","stop"]),onClick:e.withModifiers(m,["self","prevent","stop"])},null,36)):e.createCommentVNode("",!0)]),_:1})]))}}),J=e.defineComponent({__name:"Skeleton",props:{width:{default:"100%"},height:{default:12},radius:{default:8},variant:{default:"rect"},animated:{type:Boolean,default:!0}},setup(t){const o=t,n=a=>typeof a=="number"?`${a}px`:a,c=e.computed(()=>{const a={width:n(o.width),height:n(o.height),borderRadius:n(o.radius)};return o.variant==="circle"?{...a,borderRadius:"999px"}:o.variant==="round"?{...a,borderRadius:"14px"}:a});return(a,f)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["h0n-skeleton",{"is-animated":t.animated}]),style:e.normalizeStyle(c.value)},null,6))}}),Pe={class:"h0n-tabs"},He=["onClick"],Ue={class:"h0n-tabs__label"},qe={key:0,class:"h0n-tabs__content"},K=e.defineComponent({__name:"Tabs",props:{modelValue:{},tabs:{}},emits:["update:modelValue"],setup(t,{emit:o}){const n=t,c=o,a=e.computed(()=>n.tabs.findIndex(s=>s.value===n.modelValue)),f=e.ref(null),d=e.ref(null),m=e.ref(0),u=e.ref(0),i=e.ref("forward");let p=0;const g=()=>{b("auto")},_=()=>{const s=d.value;return s?s.querySelector(".h0n-tabs__tab.is-active"):null},b=async(s="smooth")=>{const l=++p;if(await e.nextTick(),l!==p)return;const v=d.value,y=_(),k=f.value;if(!y||!v){m.value=0,u.value=0;return}const G=y.querySelector(".h0n-tabs__label")??y,Q=v.getBoundingClientRect(),z=G.getBoundingClientRect();if(m.value=z.left-Q.left,u.value=z.width,!k)return;const Y=y.offsetLeft+y.offsetWidth/2-k.clientWidth/2,ee=Math.max(k.scrollWidth-k.clientWidth,0),O=Math.min(Math.max(Y,0),ee);Math.abs(k.scrollLeft-O)<1||k.scrollTo({left:O,behavior:s})},$=e.computed(()=>({left:"0px",width:`${u.value}px`,transform:`translateX(${m.value}px)`}));e.watch(()=>a.value,(s,l)=>{if(l===void 0||l===-1||s===-1){i.value="forward";return}i.value=s>=l?"forward":"backward"});const E=e.computed(()=>i.value==="forward"?"h0n-tabs-slide-left":"h0n-tabs-slide-right"),h=e.computed(()=>n.tabs.length>0&&n.tabs.length<=3),r=s=>{c("update:modelValue",s)};return e.onMounted(()=>{b("auto"),window.addEventListener("resize",g)}),e.onBeforeUnmount(()=>{p++,window.removeEventListener("resize",g)}),e.watch(()=>[n.modelValue,n.tabs.length],()=>{b()}),(s,l)=>(e.openBlock(),e.createElementBlock("div",Pe,[e.createElementVNode("div",{ref_key:"scrollerRef",ref:f,class:"h0n-tabs__scroller"},[e.createElementVNode("div",{ref_key:"listRef",ref:d,class:e.normalizeClass(["h0n-tabs__list",{"is-even":h.value}])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.tabs,(v,y)=>(e.openBlock(),e.createElementBlock("button",{key:`${String(v.value)}-${y}`,class:e.normalizeClass(["h0n-tabs__tab",{"is-active":v.value===t.modelValue}]),type:"button",onClick:k=>r(v.value)},[e.createElementVNode("span",Ue,e.toDisplayString(v.label),1)],10,He))),128)),e.createElementVNode("span",{class:"h0n-tabs__indicator",style:e.normalizeStyle($.value)},null,4)],2)],512),s.$slots.default?(e.openBlock(),e.createElementBlock("div",qe,[e.createVNode(e.Transition,{name:E.value,mode:"out-in"},{default:e.withCtx(()=>[(e.openBlock(),e.createElementBlock("div",{key:t.modelValue,class:"h0n-tabs__panel"},[e.renderSlot(s.$slots,"default",{activeTab:t.modelValue})]))]),_:3},8,["name"])])):e.createCommentVNode("",!0)]))}});function X(t){const o=je(t);return{install(n){n.component("H0Accordion",A),n.component("H0Alert",P),n.component("H0Button",H),n.component("H0Card",U),n.component("H0Dialog",F),n.component("H0Spinner",x),n.component("H0Menu",j),n.component("H0Image",W),n.component("H0Overlay",Z),n.component("H0Skeleton",J),n.component("H0Tabs",K),ne(o.theme)}}}const Fe=X();function je(t){return{autoRegisterComponents:t?.autoRegisterComponents??!0,theme:te(t?.theme)}}exports.Accordion=A;exports.Alert=P;exports.Button=H;exports.Card=U;exports.Dialog=F;exports.Image=W;exports.Menu=j;exports.Overlay=Z;exports.Skeleton=J;exports.Spinner=x;exports.Tabs=K;exports.createH0NPlugin=X;exports.h0nUi=Fe;exports.useOverlayStack=C;exports.useWebAlert=M;exports.useWebDialog=q;
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";.h0n-alert-layer[data-v-290cad87]{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none}.h0n-alert-layer[data-v-290cad87]>*{pointer-events:auto}.h0n-alert-scale-enter-active[data-v-290cad87],.h0n-alert-scale-leave-active[data-v-290cad87]{transition:transform .18s ease,opacity .18s ease}.h0n-alert-scale-enter-from[data-v-290cad87],.h0n-alert-scale-leave-to[data-v-290cad87]{transform:translateY(6px) scale(.98);opacity:0}.h0n-ui-btn{--btn-bg: var(--h0n-btn-primary-bg);--btn-fg: var(--h0n-btn-primary-text);--btn-border: transparent;--btn-bg-hover: var(--h0n-btn-primary-bg-hover);--btn-bg-active: var(--h0n-btn-primary-bg-active);--btn-layer-hover: var(--h0n-layer-hover);--btn-layer-active: var(--h0n-layer-active);--btn-ring: var(--h0n-layer-focus);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:0;width:auto;border:none;outline:none;color:var(--btn-fg);background:var(--btn-bg);box-shadow:0 0 0 1px var(--btn-border);font-weight:700;cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .03s ease,opacity .12s ease,background .12s ease,color .12s ease,box-shadow .12s ease}.h0n-ui-btn:focus-visible{box-shadow:0 0 0 1px var(--btn-border),0 0 0 4px var(--btn-ring)}.h0n-ui-btn:disabled{opacity:.65;cursor:default}@media(hover:hover){.h0n-ui-btn:not(:disabled):hover{background:var(--btn-bg-hover)}}.h0n-ui-btn:not(:disabled):active{transform:scale(.99)}.h0n-ui-btn--block{width:100%}.h0n-ui-btn--sm{height:40px;padding:0 14px;font-size:14px}.h0n-ui-btn--md{height:50px;padding:0 16px;font-size:15px}.h0n-ui-btn--lg{height:56px;padding:0 18px;font-size:16px}.h0n-ui-btn--pill{border-radius:999px}.h0n-ui-btn--radius{border-radius:var(--h0n-radius-16, 16px)}.h0n-ui-btn--secondary{--btn-bg: var(--h0n-btn-secondary-bg);--btn-fg: var(--h0n-btn-secondary-text);--btn-bg-hover: linear-gradient(var(--btn-layer-hover), var(--btn-layer-hover)), var(--btn-bg);--btn-bg-active: linear-gradient(var(--btn-layer-active), var(--btn-layer-active)), var(--btn-bg);--btn-ring: var(--h0n-border-strong)}.h0n-ui-btn--outline{--btn-bg: transparent;--btn-fg: var(--h0n-text-primary);--btn-border: var(--h0n-border-strong);--btn-ring: var(--h0n-border-strong);--btn-bg-hover: linear-gradient(var(--btn-layer-hover), var(--btn-layer-hover)), transparent;--btn-bg-active: linear-gradient(var(--btn-layer-active), var(--btn-layer-active)), transparent}.h0n-ui-btn--ghost{--btn-bg: transparent;--btn-fg: var(--h0n-btn-ghost-text);--btn-border: transparent;--btn-ring: var(--h0n-border-strong);--btn-bg-hover: linear-gradient(var(--btn-layer-hover), var(--btn-layer-hover)), transparent;--btn-bg-active: linear-gradient(var(--btn-layer-active), var(--btn-layer-active)), transparent}.h0n-ui-btn--loading .h0n-ui-btn__label,.h0n-ui-btn--loading .h0n-ui-btn__icon{display:none}.h0n-ui-btn--text-center{justify-content:center}.h0n-ui-btn--text-left{justify-content:flex-start}.h0n-ui-btn--text-right{justify-content:flex-end}.h0n-ui-btn__icon{display:inline-flex}.h0n-ui-btn__label{display:inline-block;font-weight:600}.h0n-ui-btn__spinner{display:inline-flex}.h0n-ui-image{position:relative;overflow:hidden;background:var(--h0n-secondary);width:100%;height:100%}.h0n-ui-image__loader{position:absolute;inset:0;background:linear-gradient(90deg,#1c1c1c 25%,#2a2a2a 37%,#1c1c1c 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite}.h0n-ui-image img{width:100%;height:100%;display:block}.h0n-ui-image.error{display:flex;align-items:center;justify-content:center;opacity:.6}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.h0n-ui-spinner{border:2px solid transparent;border-top-color:currentColor;border-radius:50%;animation:h0n-spin 1s linear infinite;display:inline-block}.h0n-ui-spinner--sm{width:16px;height:16px}.h0n-ui-spinner--md{width:24px;height:24px}.h0n-ui-spinner--lg{width:36px;height:36px}@keyframes h0n-spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.h0n-ui-menu-item{padding:12px 15px;border-bottom:1px solid var(--h0n-primary);display:flex;align-items:center;justify-content:space-between;cursor:pointer;text-decoration:none;color:inherit;width:100%;min-height:50px}.h0n-ui-menu-item:last-child{border-bottom:0}.h0n-ui-menu-item[aria-disabled=true]{opacity:.55;cursor:default}.h0n-ui-menu-item__left{display:flex;gap:12px;min-width:0}.h0n-ui-menu-item__icon{display:flex;align-items:center;justify-content:center;height:26px;width:26px;flex:0 0 auto}.h0n-ui-menu-item__text{display:flex;flex-direction:column;justify-content:center;min-width:0}.h0n-ui-menu-item__title{font-weight:500;color:var(--h0n-text-primary);margin:0}.h0n-ui-menu-item__title.is-danger{color:var(--h0n-status-danger)}.h0n-ui-menu-item__desc{font-size:14px;color:var(--h0n-text-secondary);margin:0}.h0n-ui-menu-item__right{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto}.h0n-ui-menu-item__right-text{font-weight:500;font-size:14px;color:#73b9fffa;margin:0}.h0n-ui-menu-item__chevron{opacity:.7;transform:translateY(-1px)}.h0n-ui-accordion{--acc-body-padding: 0 14px 12px;display:grid;gap:10px;width:100%}.h0n-ui-accordion.is-compact{--acc-body-padding: 0 12px 10px}.h0n-ui-accordion.is-compact .h0n-ui-accordion__header{padding:10px 12px}.h0n-ui-accordion__item{border-radius:12px;background:var(--h0n-secondary);overflow:hidden}.h0n-ui-accordion__item.is-open .h0n-ui-accordion__chevron{transform:rotate(180deg)}.h0n-ui-accordion__item.is-disabled .h0n-ui-accordion__header{cursor:not-allowed;opacity:.5}.h0n-ui-accordion__header{width:100%;background:transparent;border:none;color:inherit;padding:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;text-align:left}.h0n-ui-accordion__title{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600}.h0n-ui-accordion__badge{font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:2px 6px;border-radius:999px;color:#ffffffb3;background:#ffffff14}.h0n-ui-accordion__chevron{width:16px;height:16px;transition:transform .2s ease}.h0n-ui-accordion__body{overflow:hidden}.h0n-ui-accordion__body-inner{padding:var(--acc-body-padding);font-size:13px;color:var(--h0n-text-secondary)}.h0n-ui-accordion__body-inner p{margin:0;line-height:1.6}.h0n-ui-accordion-enter-active,.h0n-ui-accordion-leave-active{transition:height .22s ease,opacity .22s ease;will-change:height,opacity}.h0n-ui-overlay{position:fixed;inset:0;background:#00000073;pointer-events:auto;touch-action:none}.h0n-ui-fade-enter-active,.h0n-ui-fade-leave-active{transition:opacity .22s ease}.h0n-ui-fade-enter-from,.h0n-ui-fade-leave-to{opacity:0}.h0n-ui-card{background-color:var(--h0n-secondary);border-radius:12px;overflow:hidden}.h0n-ui-card:not(:last-child){margin-bottom:10px}.h0n-ui-card--title{padding:12px 12px 6px;font-weight:500;font-size:15px;color:#73b9fffa;margin:0}.h0n-alert{width:min(360px,92vw);border-radius:12px;background:var(--h0n-primary);color:var(--h0n-text-primary);overflow:hidden;pointer-events:auto}.h0n-alert .h0n-alert__header{padding:12px 12px 0}.h0n-alert .h0n-alert__header .h0n-alert__title{margin:0;font-size:15px;font-weight:500;color:#11a8fff2}.h0n-alert .h0n-alert__body{padding:12px}.h0n-alert .h0n-alert__actions{padding:0 12px 12px;display:flex;justify-content:right;gap:8px}.h0n-alert .h0n-alert__actions.is-single{justify-content:flex-end}.h0n-alert .h0n-alert__actions .h0n-alert__btn{border:0;background:transparent;color:#91c8fff2;font-weight:500;font-size:14px;padding:10px 12px;border-radius:10px;cursor:pointer;transition:background .15s ease,color .15s ease}.h0n-alert .h0n-alert__actions .h0n-alert__btn:active{background:#ffffff0f}.h0n-alert .h0n-alert__actions .h0n-alert__btn--primary{color:#11a8fff2}.h0n-alert .h0n-alert__actions .is-danger{color:var(--h0n-danger)}.h0n-dialog-layer{position:fixed;inset:0;display:grid;overscroll-behavior:contain;pointer-events:none;place-items:end center}.h0n-dialog-layer.is-center{place-items:center}.h0n-dialog-layer.is-left{place-items:stretch start}.h0n-dialog-layer.is-right{place-items:stretch end}.h0n-dialog-layer .h0n-dialog-panel{position:relative;isolation:isolate;background:var(--h0n-primary);color:var(--h0n-text-primary);box-shadow:0 20px 60px #00000059;transform:translateZ(0);backface-visibility:hidden;overflow:hidden;display:flex;flex-direction:column;pointer-events:auto}.h0n-dialog-layer .h0n-dialog-panel .h0n-dialog-bg-hero{position:absolute;inset:0 0 auto;height:260px;pointer-events:none;z-index:0;transform:translateZ(0);backface-visibility:hidden}.h0n-dialog-layer .h0n-dialog-panel .h0n-dialog-bg-hero:after{content:"";position:absolute;inset:0 0 -4px;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 26%,color-mix(in srgb,var(--h0n-primary) 82%,transparent) 59%,var(--h0n-primary) 100%)}.h0n-dialog-layer .h0n-dialog-panel .h0n-dialog-bg-hero .h0n-dialog-bg-image{position:absolute;inset:-72px 0 0;z-index:0;background-image:var(--h0n-dialog-bg-image);background-repeat:no-repeat;background-position:center top;background-size:cover;opacity:.96;transform:translateZ(0);backface-visibility:hidden}.h0n-dialog-layer .h0n-dialog-panel.is-left,.h0n-dialog-layer .h0n-dialog-panel.is-right{width:min(420px,85vw - 32px);height:100dvh;border-radius:0;padding-top:var(--tg-safe-top, 10px)}.h0n-dialog-layer .h0n-dialog-panel.is-bottom{margin-inline:auto;width:100%;max-width:min(420px,100%);max-height:85dvh;padding-top:10px;border-radius:0;border-top-left-radius:var(--h0n-radius-12, 12px);border-top-right-radius:var(--h0n-radius-12, 12px)}.h0n-dialog-layer .h0n-dialog-panel.is-center{width:min(400px,92vw);max-height:85dvh;padding-top:10px;border-radius:var(--h0n-radius-12, 12px)}.h0n-dialog-layer .h0n-dialog-panel .h0n-dialog-header{padding:10px 12px;display:flex;justify-content:space-between;align-items:center;width:100%;position:absolute;top:0;padding-top:var(--tg-safe-top, 10px);z-index:2;background:color-mix(in srgb,var(--h0n-primary) 70%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.h0n-dialog-layer .h0n-dialog-panel .h0n-dialog-header.has-background-image{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.h0n-dialog-layer .h0n-dialog-panel .h0n-dialog-header.is-center,.h0n-dialog-layer .h0n-dialog-panel .h0n-dialog-header.is-bottom{padding-top:10px}.h0n-dialog-layer .h0n-dialog-panel .h0n-dialog-header .h0n-dialog-close{border:none;outline:none;cursor:pointer;color:inherit;display:inline-flex;align-items:center;gap:6px;border-radius:16px;background:#00000026;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);padding:6px 16px}.h0n-dialog-layer .h0n-dialog-panel .h0n-dialog-header .h0n-dialog-close:hover{color:var(--h0n-text-primary)}.h0n-dialog-layer .h0n-dialog-panel .h0n-dialog-header .h0n-dialog-close:focus-visible{outline:2px solid rgba(255,255,255,.35);outline-offset:2px}.h0n-dialog-layer .h0n-dialog-panel .h0n-dialog-content{overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-top:50px;position:relative;z-index:1}.h0n-slide-left-enter-active,.h0n-slide-right-enter-active,.h0n-slide-bottom-enter-active,.h0n-slide-center-enter-active{transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .16s ease;will-change:transform,opacity}.h0n-slide-left-leave-active,.h0n-slide-right-leave-active,.h0n-slide-bottom-leave-active,.h0n-slide-center-leave-active{transition:transform .16s cubic-bezier(.4,0,.8,.2),opacity .16s ease;will-change:transform,opacity}.h0n-slide-left-enter-from,.h0n-slide-left-leave-to{transform:translate3d(-105%,0,0)}.h0n-slide-right-enter-from,.h0n-slide-right-leave-to{transform:translate3d(105%,0,0)}.h0n-slide-bottom-enter-from,.h0n-slide-bottom-leave-to{transform:translate3d(0,105%,0)}.h0n-slide-center-enter-from,.h0n-slide-center-leave-to{transform:translate3d(0,10%,0) scale(.98);opacity:0}.h0n-slide-left-enter-to,.h0n-slide-left-leave-from,.h0n-slide-right-enter-to,.h0n-slide-right-leave-from,.h0n-slide-bottom-enter-to,.h0n-slide-bottom-leave-from,.h0n-slide-center-enter-to,.h0n-slide-center-leave-from{transform:translateZ(0);opacity:1}@media(prefers-reduced-motion:reduce){.h0n-slide-left-enter-active,.h0n-slide-left-leave-active,.h0n-slide-right-enter-active,.h0n-slide-right-leave-active,.h0n-slide-bottom-enter-active,.h0n-slide-bottom-leave-active,.h0n-slide-center-enter-active,.h0n-slide-center-leave-active{transition:none!important}}.h0-skeleton{position:relative;overflow:hidden;background:#ffffff14}.h0-skeleton.is-animated:after{content:"";position:absolute;inset:0;transform:translate(-120%);background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.18) 50%,transparent 100%);animation:h0n-skeleton-shimmer 1.4s ease-in-out infinite}@keyframes h0n-skeleton-shimmer{0%{transform:translate(-120%)}to{transform:translate(120%)}}.h0n-tabs{--h0n-tabs-accent: rgba(17, 168, 255, .95);width:100%;max-width:100%;min-width:0}.h0n-tabs .h0n-tabs__scroller{width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.h0n-tabs .h0n-tabs__list{position:relative;display:inline-flex;align-items:center;min-width:100%;width:max-content;white-space:nowrap}.h0n-tabs .h0n-tabs__tab{flex:0 0 auto;padding:16px 14px;text-align:center;font-weight:500;opacity:.6;background:transparent;border:none;cursor:pointer;display:flex;justify-content:center;white-space:nowrap}.h0n-tabs .h0n-tabs__tab.is-active{font-weight:600;opacity:1;color:var(--h0n-tabs-accent)}.h0n-tabs .h0n-tabs__label{display:inline-block;color:var(--h0n-text-primary)}.h0n-tabs .h0n-tabs__indicator{position:absolute;left:0;bottom:0;height:4px;border-top-left-radius:12px;border-top-right-radius:12px;background:var(--h0n-tabs-accent);transition:transform .2s ease,width .2s ease}.h0n-tabs .h0n-tabs__content{overflow:hidden;filter:none;-webkit-backdrop-filter:none;backdrop-filter:none}.h0n-tabs .h0n-tabs__panel{backface-visibility:hidden}@media(max-width:768px){.h0n-tabs .h0n-tabs__panel{will-change:transform,opacity}}.h0n-tabs-slide-left-enter-active,.h0n-tabs-slide-left-leave-active,.h0n-tabs-slide-right-enter-active,.h0n-tabs-slide-right-leave-active{transition:opacity .1s ease,transform .1s ease}.h0n-tabs-slide-left-enter-from,.h0n-tabs-slide-right-leave-to{opacity:0;transform:translate(24px)}.h0n-tabs-slide-left-leave-to,.h0n-tabs-slide-right-enter-from{opacity:0;transform:translate(-24px)}:root{color-scheme:light;--h0n-primary: "#171f2a";--h0n-secondary: "#202a38", --h0n-tertiary: "#293648", --h0n-success: "#22c55e", --h0n-warning: "#ffaa33", --h0n-danger: "#ff4444", --h0n-text-primary: "#eaeff6", --h0n-text-secondary: "#6c808c", --h0n-radius-sm: 8px;--h0n-radius-md: 12px;--h0n-radius-lg: 16px;--h0n-font-family-base: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;--h0n-focus-ring: rgba(79, 70, 229, .4)}[class^=H0],[class*=" H0"]{font-family:inherit}.h0n-focusable:focus-visible{outline:2px solid var(--h0n-focus-ring);outline-offset:2px}
|
|
1
|
+
@charset "UTF-8";.h0n-alert-layer[data-v-290cad87]{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none}.h0n-alert-layer[data-v-290cad87]>*{pointer-events:auto}.h0n-alert-scale-enter-active[data-v-290cad87],.h0n-alert-scale-leave-active[data-v-290cad87]{transition:transform .18s ease,opacity .18s ease}.h0n-alert-scale-enter-from[data-v-290cad87],.h0n-alert-scale-leave-to[data-v-290cad87]{transform:translateY(6px) scale(.98);opacity:0}.h0n-ui-btn{--btn-bg: var(--h0n-btn-primary-bg);--btn-fg: var(--h0n-btn-primary-text);--btn-border: transparent;--btn-bg-hover: var(--h0n-btn-primary-bg-hover);--btn-bg-active: var(--h0n-btn-primary-bg-active);--btn-layer-hover: var(--h0n-layer-hover);--btn-layer-active: var(--h0n-layer-active);--btn-ring: var(--h0n-layer-focus);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:0;width:auto;border:none;outline:none;color:var(--btn-fg);background:var(--btn-bg);box-shadow:0 0 0 1px var(--btn-border);font-weight:700;cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .03s ease,opacity .12s ease,background .12s ease,color .12s ease,box-shadow .12s ease}.h0n-ui-btn:focus-visible{box-shadow:0 0 0 1px var(--btn-border),0 0 0 4px var(--btn-ring)}.h0n-ui-btn:disabled{opacity:.65;cursor:default}@media(hover:hover){.h0n-ui-btn:not(:disabled):hover{background:var(--btn-bg-hover)}}.h0n-ui-btn:not(:disabled):active{transform:scale(.99)}.h0n-ui-btn--block{width:100%}.h0n-ui-btn--sm{height:40px;padding:0 14px;font-size:14px}.h0n-ui-btn--md{height:50px;padding:0 16px;font-size:15px}.h0n-ui-btn--lg{height:56px;padding:0 18px;font-size:16px}.h0n-ui-btn--pill{border-radius:999px}.h0n-ui-btn--radius{border-radius:var(--h0n-radius-16, 16px)}.h0n-ui-btn--secondary{--btn-bg: var(--h0n-btn-secondary-bg);--btn-fg: var(--h0n-btn-secondary-text);--btn-bg-hover: linear-gradient(var(--btn-layer-hover), var(--btn-layer-hover)), var(--btn-bg);--btn-bg-active: linear-gradient(var(--btn-layer-active), var(--btn-layer-active)), var(--btn-bg);--btn-ring: var(--h0n-border-strong)}.h0n-ui-btn--outline{--btn-bg: transparent;--btn-fg: var(--h0n-text-primary);--btn-border: var(--h0n-border-strong);--btn-ring: var(--h0n-border-strong);--btn-bg-hover: linear-gradient(var(--btn-layer-hover), var(--btn-layer-hover)), transparent;--btn-bg-active: linear-gradient(var(--btn-layer-active), var(--btn-layer-active)), transparent}.h0n-ui-btn--ghost{--btn-bg: transparent;--btn-fg: var(--h0n-btn-ghost-text);--btn-border: transparent;--btn-ring: var(--h0n-border-strong);--btn-bg-hover: linear-gradient(var(--btn-layer-hover), var(--btn-layer-hover)), transparent;--btn-bg-active: linear-gradient(var(--btn-layer-active), var(--btn-layer-active)), transparent}.h0n-ui-btn--loading .h0n-ui-btn__label,.h0n-ui-btn--loading .h0n-ui-btn__icon{display:none}.h0n-ui-btn--text-center{justify-content:center}.h0n-ui-btn--text-left{justify-content:flex-start}.h0n-ui-btn--text-right{justify-content:flex-end}.h0n-ui-btn__icon{display:inline-flex}.h0n-ui-btn__label{display:inline-block;font-weight:600}.h0n-ui-btn__spinner{display:inline-flex}.h0n-ui-image{position:relative;overflow:hidden;background:var(--h0n-secondary);width:100%;height:100%}.h0n-ui-image__loader{position:absolute;inset:0;background:linear-gradient(90deg,#1c1c1c 25%,#2a2a2a 37%,#1c1c1c 63%);background-size:400% 100%;animation:shimmer 1.4s ease infinite}.h0n-ui-image img{width:100%;height:100%;display:block}.h0n-ui-image.error{display:flex;align-items:center;justify-content:center;opacity:.6}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.h0n-ui-spinner{border:2px solid transparent;border-top-color:currentColor;border-radius:50%;animation:h0n-spin 1s linear infinite;display:inline-block}.h0n-ui-spinner--sm{width:16px;height:16px}.h0n-ui-spinner--md{width:24px;height:24px}.h0n-ui-spinner--lg{width:36px;height:36px}@keyframes h0n-spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.h0n-ui-menu-item{padding:12px 15px;border-bottom:1px solid var(--h0n-primary);display:flex;align-items:center;justify-content:space-between;cursor:pointer;text-decoration:none;color:inherit;width:100%;min-height:50px}.h0n-ui-menu-item:last-child{border-bottom:0}.h0n-ui-menu-item[aria-disabled=true]{opacity:.55;cursor:default}.h0n-ui-menu-item__left{display:flex;gap:12px;min-width:0}.h0n-ui-menu-item__icon{display:flex;align-items:center;justify-content:center;height:26px;width:26px;flex:0 0 auto}.h0n-ui-menu-item__text{display:flex;flex-direction:column;justify-content:center;min-width:0}.h0n-ui-menu-item__title{font-weight:500;color:var(--h0n-text-primary);margin:0}.h0n-ui-menu-item__title.is-danger{color:var(--h0n-status-danger)}.h0n-ui-menu-item__desc{font-size:14px;color:var(--h0n-text-secondary);margin:0}.h0n-ui-menu-item__right{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto}.h0n-ui-menu-item__right-text{font-weight:500;font-size:14px;color:#73b9fffa;margin:0}.h0n-ui-menu-item__chevron{opacity:.7;transform:translateY(-1px)}.h0n-ui-accordion{--acc-body-padding: 0 14px 12px;display:grid;gap:10px;width:100%}.h0n-ui-accordion.is-compact{--acc-body-padding: 0 12px 10px}.h0n-ui-accordion.is-compact .h0n-ui-accordion__header{padding:10px 12px}.h0n-ui-accordion__item{border-radius:12px;background:var(--h0n-secondary);overflow:hidden}.h0n-ui-accordion__item.is-open .h0n-ui-accordion__chevron{transform:rotate(180deg)}.h0n-ui-accordion__item.is-disabled .h0n-ui-accordion__header{cursor:not-allowed;opacity:.5}.h0n-ui-accordion__header{width:100%;background:transparent;border:none;color:inherit;padding:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;text-align:left}.h0n-ui-accordion__title{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600}.h0n-ui-accordion__badge{font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:2px 6px;border-radius:999px;color:#ffffffb3;background:#ffffff14}.h0n-ui-accordion__chevron{width:16px;height:16px;transition:transform .2s ease}.h0n-ui-accordion__body{overflow:hidden}.h0n-ui-accordion__body-inner{padding:var(--acc-body-padding);font-size:13px;color:var(--h0n-text-secondary)}.h0n-ui-accordion__body-inner p{margin:0;line-height:1.6}.h0n-ui-accordion-enter-active,.h0n-ui-accordion-leave-active{transition:height .22s ease,opacity .22s ease;will-change:height,opacity}.h0n-ui-overlay{position:fixed;inset:0;background:#00000073;pointer-events:auto;touch-action:none}.h0n-ui-fade-enter-active,.h0n-ui-fade-leave-active{transition:opacity .22s ease;will-change:opacity}.h0n-ui-fade-enter-from,.h0n-ui-fade-leave-to{opacity:0}.h0n-ui-card{background-color:var(--h0n-secondary);border-radius:12px;overflow:hidden}.h0n-ui-card:not(:last-child){margin-bottom:10px}.h0n-ui-card--title{padding:12px 12px 6px;font-weight:500;font-size:15px;color:#73b9fffa;margin:0}.h0n-alert{width:min(360px,92vw);border-radius:12px;background:var(--h0n-primary);color:var(--h0n-text-primary);overflow:hidden;pointer-events:auto}.h0n-alert .h0n-alert__header{padding:12px 12px 0}.h0n-alert .h0n-alert__header .h0n-alert__title{margin:0;font-size:15px;font-weight:500;color:#11a8fff2}.h0n-alert .h0n-alert__body{padding:12px}.h0n-alert .h0n-alert__actions{padding:0 12px 12px;display:flex;justify-content:right;gap:8px}.h0n-alert .h0n-alert__actions.is-single{justify-content:flex-end}.h0n-alert .h0n-alert__actions .h0n-alert__btn{border:0;background:transparent;color:#91c8fff2;font-weight:500;font-size:14px;padding:10px 12px;border-radius:10px;cursor:pointer;transition:background .15s ease,color .15s ease}.h0n-alert .h0n-alert__actions .h0n-alert__btn:active{background:#ffffff0f}.h0n-alert .h0n-alert__actions .h0n-alert__btn--primary{color:#11a8fff2}.h0n-alert .h0n-alert__actions .is-danger{color:var(--h0n-danger)}.h0n-dialog-layer{position:fixed;inset:0;display:grid;overscroll-behavior:contain;pointer-events:none;place-items:end center}.h0n-dialog-layer.is-center{place-items:center}.h0n-dialog-layer.is-left{place-items:stretch start}.h0n-dialog-layer.is-right{place-items:stretch end}.h0n-dialog-layer .h0n-dialog-panel{position:relative;isolation:isolate;contain:layout paint;background:var(--h0n-primary);color:var(--h0n-text-primary);box-shadow:0 20px 60px #00000059;transform:translateZ(0);backface-visibility:hidden;overflow:hidden;display:flex;flex-direction:column;pointer-events:auto}.h0n-dialog-layer .h0n-dialog-panel .h0n-dialog-bg-hero{position:absolute;inset:0 0 auto;height:260px;pointer-events:none;z-index:0;contain:paint;transform:translateZ(0);backface-visibility:hidden;overflow:hidden}.h0n-dialog-layer .h0n-dialog-panel .h0n-dialog-bg-hero:after{content:"";position:absolute;inset:0 0 -4px;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 26%,color-mix(in srgb,var(--h0n-primary) 82%,transparent) 59%,var(--h0n-primary) 100%)}.h0n-dialog-layer .h0n-dialog-panel .h0n-dialog-bg-hero .h0n-dialog-bg-image{position:absolute;inset:-72px 0 0;z-index:0;background-image:var(--h0n-dialog-bg-image);background-repeat:no-repeat;background-position:center top;background-size:cover;opacity:0;transform:translateZ(0);backface-visibility:hidden;transition:opacity .22s ease}.h0n-dialog-layer .h0n-dialog-panel .h0n-dialog-bg-hero .h0n-dialog-bg-image.is-loaded{opacity:.96}.h0n-dialog-layer .h0n-dialog-panel.is-left,.h0n-dialog-layer .h0n-dialog-panel.is-right{width:min(420px,85vw - 32px);height:100dvh;border-radius:0;padding-top:var(--tg-safe-top, 10px)}.h0n-dialog-layer .h0n-dialog-panel.is-bottom{margin-inline:auto;width:100%;max-width:min(420px,100%);max-height:85dvh;padding-top:10px;border-radius:0;border-top-left-radius:var(--h0n-radius-12, 12px);border-top-right-radius:var(--h0n-radius-12, 12px)}.h0n-dialog-layer .h0n-dialog-panel.is-center{width:min(400px,92vw);max-height:85dvh;padding-top:10px;border-radius:var(--h0n-radius-12, 12px)}.h0n-dialog-layer .h0n-dialog-panel .h0n-dialog-header{padding:10px 12px;display:flex;justify-content:space-between;align-items:center;width:100%;position:absolute;top:0;padding-top:var(--tg-safe-top, 10px);z-index:2;background:color-mix(in srgb,var(--h0n-primary) 70%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.h0n-dialog-layer .h0n-dialog-panel .h0n-dialog-header.has-background-image{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.h0n-dialog-layer .h0n-dialog-panel .h0n-dialog-header.is-center,.h0n-dialog-layer .h0n-dialog-panel .h0n-dialog-header.is-bottom{padding-top:10px}.h0n-dialog-layer .h0n-dialog-panel .h0n-dialog-header .h0n-dialog-close{border:none;outline:none;cursor:pointer;color:inherit;display:inline-flex;align-items:center;gap:6px;border-radius:16px;background:#00000026;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);padding:6px 16px}.h0n-dialog-layer .h0n-dialog-panel .h0n-dialog-header .h0n-dialog-close:hover{color:var(--h0n-text-primary)}.h0n-dialog-layer .h0n-dialog-panel .h0n-dialog-header .h0n-dialog-close:focus-visible{outline:2px solid rgba(255,255,255,.35);outline-offset:2px}.h0n-dialog-layer .h0n-dialog-panel .h0n-dialog-content{overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-top:50px;position:relative;z-index:1;contain:layout paint}.h0n-slide-left-enter-active,.h0n-slide-right-enter-active,.h0n-slide-bottom-enter-active,.h0n-slide-center-enter-active{transition:transform .16s cubic-bezier(.2,.8,.2,1),opacity .16s ease;will-change:transform,opacity}.h0n-slide-left-leave-active,.h0n-slide-right-leave-active,.h0n-slide-bottom-leave-active,.h0n-slide-center-leave-active{transition:transform .16s cubic-bezier(.4,0,.8,.2),opacity .16s ease;will-change:transform,opacity}.h0n-slide-left-enter-from,.h0n-slide-left-leave-to{transform:translate3d(-105%,0,0)}.h0n-slide-right-enter-from,.h0n-slide-right-leave-to{transform:translate3d(105%,0,0)}.h0n-slide-bottom-enter-from,.h0n-slide-bottom-leave-to{transform:translate3d(0,105%,0)}.h0n-slide-center-enter-from,.h0n-slide-center-leave-to{transform:translate3d(0,10%,0) scale(.98);opacity:0}.h0n-slide-left-enter-to,.h0n-slide-left-leave-from,.h0n-slide-right-enter-to,.h0n-slide-right-leave-from,.h0n-slide-bottom-enter-to,.h0n-slide-bottom-leave-from,.h0n-slide-center-enter-to,.h0n-slide-center-leave-from{transform:translateZ(0);opacity:1}@media(prefers-reduced-motion:reduce){.h0n-slide-left-enter-active,.h0n-slide-left-leave-active,.h0n-slide-right-enter-active,.h0n-slide-right-leave-active,.h0n-slide-bottom-enter-active,.h0n-slide-bottom-leave-active,.h0n-slide-center-enter-active,.h0n-slide-center-leave-active,.h0n-dialog-layer .h0n-dialog-panel .h0n-dialog-bg-hero .h0n-dialog-bg-image{transition:none!important}}.h0n-skeleton{position:relative;overflow:hidden;background:#ffffff14}.h0n-skeleton.is-animated:after{content:"";position:absolute;inset:0;transform:translate(-120%);background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.18) 50%,transparent 100%);animation:h0n-skeleton-shimmer 1.4s ease-in-out infinite}@keyframes h0n-skeleton-shimmer{0%{transform:translate(-120%)}to{transform:translate(120%)}}.h0n-tabs{--h0n-tabs-accent: rgba(17, 168, 255, .95);width:100%;max-width:100%;min-width:0}.h0n-tabs .h0n-tabs__scroller{width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.h0n-tabs .h0n-tabs__list{position:relative;display:inline-flex;align-items:center;min-width:100%;width:max-content;white-space:nowrap}.h0n-tabs .h0n-tabs__list.is-even{display:flex;width:100%}.h0n-tabs .h0n-tabs__list.is-even .h0n-tabs__tab{flex:1 1 0}.h0n-tabs .h0n-tabs__tab{flex:0 0 auto;padding:16px 14px;text-align:center;font-weight:500;opacity:.6;background:transparent;border:none;cursor:pointer;display:flex;justify-content:center;white-space:nowrap}.h0n-tabs .h0n-tabs__tab.is-active{font-weight:600;opacity:1;color:var(--h0n-tabs-accent)}.h0n-tabs .h0n-tabs__label{display:inline-block;color:var(--h0n-text-primary)}.h0n-tabs .h0n-tabs__indicator{position:absolute;left:0;bottom:0;height:4px;border-top-left-radius:12px;border-top-right-radius:12px;background:var(--h0n-tabs-accent);transition:transform .2s ease,width .2s ease}.h0n-tabs .h0n-tabs__content{overflow:hidden;filter:none;-webkit-backdrop-filter:none;backdrop-filter:none}.h0n-tabs .h0n-tabs__panel{backface-visibility:hidden}@media(max-width:768px){.h0n-tabs .h0n-tabs__panel{will-change:transform,opacity}}.h0n-tabs-slide-left-enter-active,.h0n-tabs-slide-left-leave-active,.h0n-tabs-slide-right-enter-active,.h0n-tabs-slide-right-leave-active{transition:opacity .1s ease,transform .1s ease}.h0n-tabs-slide-left-enter-from,.h0n-tabs-slide-right-leave-to{opacity:0;transform:translate(24px)}.h0n-tabs-slide-left-leave-to,.h0n-tabs-slide-right-enter-from{opacity:0;transform:translate(-24px)}:root{color-scheme:light;--h0n-primary: "#171f2a";--h0n-secondary: "#202a38", --h0n-tertiary: "#293648", --h0n-success: "#22c55e", --h0n-warning: "#ffaa33", --h0n-danger: "#ff4444", --h0n-text-primary: "#eaeff6", --h0n-text-secondary: "#6c808c", --h0n-radius-sm: 8px;--h0n-radius-md: 12px;--h0n-radius-lg: 16px;--h0n-font-family-base: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;--h0n-focus-ring: rgba(79, 70, 229, .4)}[class^=H0],[class*=" H0"]{font-family:inherit}.h0n-focusable:focus-visible{outline:2px solid var(--h0n-focus-ring);outline-offset:2px}
|