@theh0n/ui 1.1.1 → 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/README.md CHANGED
@@ -5,7 +5,7 @@
5
5
  ## Основные возможности
6
6
 
7
7
  - 🔌 Глобальный Vue-плагин `createH0NPlugin` с авто-регистрацией компонентов `H0*`.
8
- - 🧱 Набор готовых компонентов: Accordion, Alert, Button, Card, Dialog, Spinner, Menu, Image, Overlay.
8
+ - 🧱 Набор готовых компонентов: Accordion, Alert, Button, Card, Dialog, Spinner, Menu, Image, Overlay Tabs, Skeleton.
9
9
  - 🎨 Гибкая тема: можно переопределять цвета, радиусы, шрифты и focus ring через опции плагина.
10
10
  - 🧩 Tree-shaking: при точечных импортах берутся только нужные компоненты и стили.
11
11
 
@@ -0,0 +1,16 @@
1
+ type SkeletonVariant = "rect" | "round" | "circle";
2
+ type __VLS_Props = {
3
+ width?: number | string;
4
+ height?: number | string;
5
+ radius?: number | string;
6
+ variant?: SkeletonVariant;
7
+ animated?: boolean;
8
+ };
9
+ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
10
+ variant: SkeletonVariant;
11
+ radius: number | string;
12
+ width: number | string;
13
+ height: number | string;
14
+ animated: boolean;
15
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
16
+ export default _default;
@@ -0,0 +1,37 @@
1
+ type TabItem = {
2
+ label: string;
3
+ value: string | number;
4
+ };
5
+ type __VLS_Props = {
6
+ modelValue: string | number;
7
+ tabs: TabItem[];
8
+ };
9
+ declare function __VLS_template(): {
10
+ attrs: Partial<{}>;
11
+ slots: {
12
+ default?(_: {
13
+ activeTab: string | number;
14
+ }): any;
15
+ };
16
+ refs: {
17
+ scrollerRef: HTMLDivElement;
18
+ listRef: HTMLDivElement;
19
+ };
20
+ rootEl: HTMLDivElement;
21
+ };
22
+ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
23
+ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
24
+ "update:modelValue": (value: string | number) => any;
25
+ }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
26
+ "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
27
+ }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
28
+ scrollerRef: HTMLDivElement;
29
+ listRef: HTMLDivElement;
30
+ }, HTMLDivElement>;
31
+ declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
32
+ export default _default;
33
+ type __VLS_WithTemplateSlots<T, S> = T & {
34
+ new (): {
35
+ $slots: S;
36
+ };
37
+ };
@@ -4,6 +4,7 @@ export type DialogPayload = {
4
4
  id: string;
5
5
  title?: string;
6
6
  side?: DialogSide;
7
+ backgroundUrl?: string;
7
8
  component: Component;
8
9
  props?: Record<string, any>;
9
10
  };
package/dist/index.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),E={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 W(t){if(!t)return V(E);const o=V(E);return w(o,t)}function J(t){if(typeof window>"u"||typeof document>"u")return;const o=document.documentElement,n=K(t);Object.entries(n).forEach(([l,r])=>{o.style.setProperty(l,r)})}function K(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 w(t,o){const n=Array.isArray(t)?[...t]:{...t};return o&&Object.entries(o).forEach(([l,r])=>{if(r===void 0)return;const m=t[l];S(m)&&S(r)?n[l]=w(m,r):n[l]=r}),n}function V(t){return JSON.parse(JSON.stringify(t))}function S(t){return Object.prototype.toString.call(t)==="[object Object]"}const G=["disabled","aria-expanded","aria-controls","onClick"],Q={class:"h0n-ui-accordion__title"},X={class:"h0n-ui-accordion__title-text"},Y={key:0,class:"h0n-ui-accordion__badge"},ee=["id","aria-label"],te={class:"h0n-ui-accordion__body-inner"},ne={key:0},O=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,l=o;function r(a){return a==null?[]:Array.isArray(a)?n.multiple?a:a.slice(0,1):[a]}const m=e.ref(r(n.defaultOpen)),c=e.computed(()=>n.modelValue!==void 0?r(n.modelValue):m.value),i=e.computed(()=>new Set(c.value));function u(a){return i.value.has(a)}function s(a){n.modelValue===void 0&&(m.value=a),l("update:modelValue",n.multiple?a:a[0]??null)}function f(a){const p=[...c.value];if(n.multiple){const v=new Set(p);v.has(a)?v.delete(a):v.add(a);const Z=Array.from(v);s(Z),l("toggle",{id:a,open:v.has(a)});return}const d=p[0]===a;s(d?[]:[a]),l("toggle",{id:a,open:!d})}function C(a){return`h0n-ui-accordion-body-${String(a)}`}function $(a){return a.querySelector(".h0n-ui-accordion__body-inner")}function M(a){const p=a,d=$(p);d&&(p.style.height="0px",p.style.opacity="0",requestAnimationFrame(()=>{p.style.height=`${d.scrollHeight}px`,p.style.opacity="1"}))}function j(a){const p=a;p.style.height="auto",p.style.opacity=""}function q(a){const p=a,d=$(p);d&&(p.style.height=`${d.scrollHeight}px`,p.style.opacity="1",p.offsetHeight,requestAnimationFrame(()=>{p.style.height="0px",p.style.opacity="0"}))}function F(a){const p=a;p.style.height="",p.style.opacity=""}return(a,p)=>(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,d=>(e.openBlock(),e.createElementBlock("div",{key:d.id,class:e.normalizeClass(["h0n-ui-accordion__item",{"is-open":u(d.id),"is-disabled":!!d.disabled}])},[e.createElementVNode("button",{class:"h0n-ui-accordion__header",type:"button",disabled:d.disabled,"aria-expanded":u(d.id)?"true":"false","aria-controls":C(d.id),onClick:U=>f(d.id)},[e.createElementVNode("span",Q,[e.renderSlot(a.$slots,"header",{item:d,open:u(d.id)},()=>[e.createElementVNode("span",X,e.toDisplayString(d.title),1),d.badge?(e.openBlock(),e.createElementBlock("span",Y,e.toDisplayString(d.badge),1)):e.createCommentVNode("",!0)])]),p[0]||(p[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,G),e.createVNode(e.Transition,{name:"h0n-ui-accordion",onEnter:M,onAfterEnter:j,onLeave:q,onAfterLeave:F},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{class:"h0n-ui-accordion__body",id:C(d.id),role:"region","aria-label":d.title},[e.createElementVNode("div",te,[e.renderSlot(a.$slots,"body",{item:d,open:u(d.id)},()=>[d.body?(e.openBlock(),e.createElementBlock("p",ne,e.toDisplayString(d.body),1)):e.createCommentVNode("",!0)])])],8,ee),[[e.vShow,u(d.id)]])]),_:2},1024)],2))),128))],2))}});function b(){return typeof crypto<"u"&&"randomUUID"in crypto?crypto.randomUUID():Date.now().toString(36)+Math.random().toString(36).slice(2,10)}const N=1e4,h=e.ref([]);function y(){const t=e.computed(()=>h.value.at(-1)??null);function o(i){return h.value.findIndex(u=>u.id===i)}function n(i){const u=o(i);return u===-1?N:N+u*2}function l(i){return n(i)+1}function r(i){const u=i.id??b();return m(u),h.value.push({showOverlay:!0,closeOnOverlay:!0,closeOnEsc:!0,...i,id:u}),u}function m(i){const u=o(i);u!==-1&&h.value.splice(u,1)}function c(){t.value?.onRequestClose?.()}return e.watch(()=>h.value.length,i=>{document.documentElement.classList.toggle("no-scroll",i>0)},{immediate:!0}),{stack:h,top:t,push:r,remove:m,requestCloseTop:c,getBackdropZIndex:n,getContentZIndex:l}}const g=e.shallowRef(null);let _=null;function x(){const t=y();function o(l){return new Promise(r=>{const m=b();_=r,g.value={...l,id:m},t.push({id:m,showOverlay:!0,closeOnOverlay:!0,closeOnEsc:!0,onRequestClose:()=>n(!1)})})}function n(l){if(!g.value)return;const r=g.value.id;g.value=null,t.remove(r),_?.(l),_=null}return{active:g,open:o,close:n}}const oe={class:"h0n-alert",role:"dialog","aria-modal":"true"},re={key:0,class:"h0n-alert__header"},le={class:"h0n-alert__title"},ae={class:"h0n-alert__body"},se={key:1},ie=e.defineComponent({__name:"Alert",setup(t){const{active:o,close:n}=x(),{getContentZIndex:l}=y(),r=()=>n(!0),m=()=>n(!1),c=()=>n(!0),i=e.computed(()=>o.value?.type==="info"),u=e.computed(()=>o.value?l(o.value.id):void 0);return(s,f)=>(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",oe,[e.unref(o).title||s.$slots.header?(e.openBlock(),e.createElementBlock("header",re,[e.renderSlot(s.$slots,"header",{},()=>[e.createElementVNode("h4",le,e.toDisplayString(e.unref(o).title),1)],!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",ae,[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",se,e.toDisplayString(e.unref(o).message),1)):e.createCommentVNode("",!0)]),e.createElementVNode("footer",{class:e.normalizeClass(["h0n-alert__actions",{"is-single":i.value}])},[i.value?(e.openBlock(),e.createElementBlock("button",{key:0,class:"h0n-alert__btn h0n-alert__btn--primary",type:"button",onClick:c}," Ok ")):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createElementVNode("button",{class:"h0n-alert__btn is-danger",type:"button",onClick:m}," Cancel "),e.createElementVNode("button",{class:e.normalizeClass(["h0n-alert__btn h0n-alert__btn--primary",{"is-danger":e.unref(o).type==="danger"}]),type:"button",onClick:r}," Confirm ",2)],64))],2)])],4)):e.createCommentVNode("",!0)]),_:3})]))}}),ce=(t,o)=>{const n=t.__vccOpts||t;for(const[l,r]of o)n[l]=r;return n},z=ce(ie,[["__scopeId","data-v-290cad87"]]),B=e.defineComponent({__name:"Spinner",props:{size:{},color:{}},setup(t){const n=t.size??"md";return(l,r)=>(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))}}),ue=["type","disabled","aria-busy"],de={key:0,class:"h0n-ui-btn__icon h0n-ui-btn__icon--left"},me={key:1,class:"h0n-ui-btn__label"},pe={key:2,class:"h0n-ui-btn__spinner","aria-hidden":"true"},fe={key:3,class:"h0n-ui-btn__icon h0n-ui-btn__icon--right"},I=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,l=o,r=e.ref(!1),m=e.computed(()=>n.loading!==void 0),c=e.computed(()=>m.value?!!n.loading:r.value);function i(s){m.value||(r.value=s)}async function u(s){if(!(n.disabled||c.value)&&(l("click",s),!!n.action))try{i(!0),await n.action(),l("done")}catch(f){l("error",f)}finally{i(!1)}}return(s,f)=>(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":c.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||c.value,"aria-busy":c.value?"true":void 0,onClick:u},[s.$slots.left&&!c.value?(e.openBlock(),e.createElementBlock("span",de,[e.renderSlot(s.$slots,"left")])):e.createCommentVNode("",!0),c.value?(e.openBlock(),e.createElementBlock("span",pe,[e.createVNode(B,{size:"sm"})])):(e.openBlock(),e.createElementBlock("span",me,[e.renderSlot(s.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])])),s.$slots.right&&!c.value?(e.openBlock(),e.createElementBlock("span",fe,[e.renderSlot(s.$slots,"right")])):e.createCommentVNode("",!0)],10,ue))}}),he={class:"h0n-ui-card"},ye={key:0,class:"h0n-ui-card--title"},D=e.defineComponent({__name:"Card",props:{title:{}},setup(t){return(o,n)=>(e.openBlock(),e.createElementBlock("section",he,[t.title?(e.openBlock(),e.createElementBlock("p",ye,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"default")]))}}),k=e.shallowRef(null);function T(){const t=y();function o(l){const r=b();k.value={...l,id:r},t.push({id:r,showOverlay:!0,closeOnOverlay:!0,closeOnEsc:!0,onRequestClose:n})}function n(){k.value&&(t.remove(k.value.id),k.value=null)}return{active:k,open:o,close:n}}const ve={class:"content-title-dialog"},ge={key:0,class:"title-dialog"},ke={class:"h0n-dialog-content"},A=e.defineComponent({__name:"Dialog",setup(t){const{active:o,close:n}=T(),{getContentZIndex:l}=y(),r=e.ref("bottom");e.watch(()=>o.value?.side,i=>{i&&(r.value=i)},{immediate:!0});const m=e.computed(()=>`h0n-slide-${r.value}`),c=e.computed(()=>o.value?l(o.value.id):void 0);return(i,u)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(e.Transition,{name:m.value,appear:""},{default:e.withCtx(()=>[e.unref(o)?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["h0n-dialog-layer",`is-${r.value}`]),style:e.normalizeStyle({zIndex:c.value})},[e.createElementVNode("section",{class:e.normalizeClass(["h0n-dialog-panel",`is-${e.unref(o).side}`])},[e.createElementVNode("header",{class:e.normalizeClass(["h0n-dialog-header",`is-${e.unref(o).side}`])},[e.createElementVNode("div",ve,[e.unref(o).title?(e.openBlock(),e.createElementBlock("p",ge,e.toDisplayString(e.unref(o).title),1)):e.createCommentVNode("",!0),e.renderSlot(i.$slots,"dialogHeader")]),e.createElementVNode("button",{class:"h0n-dialog-close",onClick:u[0]||(u[0]=s=>e.unref(n)())}," x ")],2),e.createElementVNode("div",ke,[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(o).component),e.mergeProps(e.unref(o).props,{onClose:e.unref(n)}),null,16,["onClose"]))])],2)],6)):e.createCommentVNode("",!0)]),_:3},8,["name"])]))}}),_e={class:"h0n-ui-menu-item__left"},be={key:0,class:"h0n-ui-menu-item__icon"},Be={class:"h0n-ui-menu-item__text"},Ce={key:0,class:"h0n-ui-menu-item__desc"},$e={key:0,class:"h0n-ui-menu-item__right"},Ee={key:0,class:"h0n-ui-menu-item__right-text"},Ve={key:0,class:"h0n-ui-menu-item__chevron"},H=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,l=o,r=e.computed(()=>!!n.to),m=e.computed(()=>n.as??(r.value?"a":"div")),c=e.computed(()=>n.chevron!==void 0?n.chevron:r.value),i=e.computed(()=>n.disabled?{role:"button",tabindex:-1}:n.as?n.to?{to:n.to}:{}:r.value?{href:"#"}:{role:"button",tabindex:0});function u(s){if(n.disabled){s.preventDefault(),s.stopPropagation();return}!n.as&&r.value&&s.preventDefault(),l("click",s)}return(s,f)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(m.value),e.mergeProps({class:"h0n-ui-menu-item"},i.value,{"aria-disabled":t.disabled||void 0,onClick:u}),{default:e.withCtx(()=>[e.createElementVNode("div",_e,[s.$slots.icon||t.icon?(e.openBlock(),e.createElementBlock("div",be,[e.renderSlot(s.$slots,"icon",{},()=>[e.createTextVNode(e.toDisplayString(t.icon),1)])])):e.createCommentVNode("",!0),e.createElementVNode("div",Be,[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",Ce,[e.renderSlot(s.$slots,"description",{},()=>[e.createTextVNode(e.toDisplayString(t.description),1)])])):e.createCommentVNode("",!0)])]),t.right||s.$slots.right||c.value?(e.openBlock(),e.createElementBlock("div",$e,[e.renderSlot(s.$slots,"right",{},()=>[t.right?(e.openBlock(),e.createElementBlock("p",Ee,e.toDisplayString(t.right),1)):e.createCommentVNode("",!0)]),c.value?(e.openBlock(),e.createElementBlock("span",Ve,"›")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)]),_:3},16,["aria-disabled"]))}}),Se={key:0,class:"h0n-ui-image__loader"},Ne={key:1,class:"h0n-ui-image__error"},we=["src"],Oe=["src","alt"],P=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 l(){n.value="loading";const c=new Image;c.src=o.src,c.onload=()=>{n.value="loaded"},c.onerror=()=>{n.value="error"}}e.onMounted(()=>{if(o.lazy&&"IntersectionObserver"in window){const c=new IntersectionObserver(([i])=>{i.isIntersecting&&(l(),c.disconnect())});c.observe(document.body)}else l()}),e.watch(()=>o.src,l);const r=e.computed(()=>({borderRadius:typeof o.radius=="number"?`${o.radius}px`:o.radius})),m=e.computed(()=>({objectFit:o.fit}));return(c,i)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["h0n-ui-image",n.value]),style:e.normalizeStyle(r.value)},[n.value==="loading"?(e.openBlock(),e.createElementBlock("div",Se)):n.value==="error"?(e.openBlock(),e.createElementBlock("div",Ne,[t.fallback?(e.openBlock(),e.createElementBlock("img",{key:0,src:t.fallback},null,8,we)):e.createCommentVNode("",!0)])):(e.openBlock(),e.createElementBlock("img",{key:2,src:t.src,alt:t.alt,style:e.normalizeStyle(m.value),draggable:"false"},null,12,Oe))],6))}}),R=e.defineComponent({__name:"Overlay",setup(t){const{top:o,getBackdropZIndex:n,requestCloseTop:l}=y(),r=e.computed(()=>!!o.value&&o.value.showOverlay!==!1),m=e.computed(()=>{if(o.value?.id)return n(o.value.id)});function c(){}function i(s){const f=o.value;!f||f.closeOnOverlay===!1||l()}function u(s){const f=o.value;!f||f.closeOnEsc===!1||s.key==="Escape"&&l()}return e.onMounted(()=>window.addEventListener("keydown",u)),e.onUnmounted(()=>window.removeEventListener("keydown",u)),(s,f)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(e.Transition,{name:"h0n-ui-fade"},{default:e.withCtx(()=>[r.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"h0n-ui-overlay",style:e.normalizeStyle({zIndex:m.value}),onPointerdown:e.withModifiers(c,["self","prevent","stop"]),onPointerup:e.withModifiers(c,["self","prevent","stop"]),onClick:e.withModifiers(i,["self","prevent","stop"])},null,36)):e.createCommentVNode("",!0)]),_:1})]))}});function L(t){const o=ze(t);return{install(n){n.component("H0Accordion",O),n.component("H0Alert",z),n.component("H0Button",I),n.component("H0Card",D),n.component("H0Dialog",A),n.component("H0Spinner",B),n.component("H0Menu",H),n.component("H0Image",P),n.component("H0Overlay",R),J(o.theme)}}}const xe=L();function ze(t){return{autoRegisterComponents:t?.autoRegisterComponents??!0,theme:W(t?.theme)}}exports.Accordion=O;exports.Alert=z;exports.Button=I;exports.Card=D;exports.Dialog=A;exports.Image=P;exports.Menu=H;exports.Overlay=R;exports.Spinner=B;exports.createH0NPlugin=L;exports.h0nUi=xe;exports.useOverlayStack=y;exports.useWebAlert=x;exports.useWebDialog=T;
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{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.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.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}.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}}: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}
package/dist/index.d.ts CHANGED
@@ -9,8 +9,10 @@ import { default as Spinner } from './components/Spinner';
9
9
  import { default as Menu } from './components/Menu';
10
10
  import { default as Image } from './components/Image';
11
11
  import { default as Overlay } from './components/Overlay';
12
+ import { default as Skeleton } from './components/Skeleton';
13
+ import { default as Tabs } from './components/Tabs';
12
14
  export * from './composables';
13
- export { Accordion, Alert, Button, Card, Dialog, Spinner, Menu, Image, Overlay, };
15
+ export { Accordion, Alert, Button, Card, Dialog, Spinner, Menu, Image, Overlay, Skeleton, Tabs, };
14
16
  export type { H0NPluginOptions, H0NTheme };
15
17
  export declare function createH0NPlugin(options?: H0NPluginOptions): Plugin;
16
18
  declare const plugin: Plugin;
@@ -25,6 +27,8 @@ declare module "@vue/runtime-core" {
25
27
  H0Menu: typeof Menu;
26
28
  H0Image: typeof Image;
27
29
  H0Overlay: typeof Overlay;
30
+ H0Skeleton: typeof Skeleton;
31
+ H0Tabs: typeof Tabs;
28
32
  }
29
33
  }
30
34
  export { plugin as h0nUi };