@theh0n/ui 1.1.0 → 1.1.1

package/dist/components/Accordion.d.ts

@@ -0,0 +1,56 @@
+type AccordionId = string | number;
+export type AccordionItem = {
+    id: AccordionId;
+    title: string;
+    body?: string;
+    badge?: string;
+    disabled?: boolean;
+};
+type __VLS_Props = {
+    items?: AccordionItem[];
+    modelValue?: AccordionId | AccordionId[] | null;
+    multiple?: boolean;
+    defaultOpen?: AccordionId | AccordionId[] | null;
+    compact?: boolean;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        header?(_: {
+            item: AccordionItem;
+            open: boolean;
+        }): any;
+        body?(_: {
+            item: AccordionItem;
+            open: boolean;
+        }): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: AccordionId | AccordionId[] | null) => any;
+    toggle: (value: {
+        id: AccordionId;
+        open: boolean;
+    }) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: AccordionId | AccordionId[] | null) => any) | undefined;
+    onToggle?: ((value: {
+        id: AccordionId;
+        open: boolean;
+    }) => any) | undefined;
+}>, {
+    items: AccordionItem[];
+    multiple: boolean;
+    defaultOpen: AccordionId | AccordionId[] | null;
+    compact: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Alert.d.ts

@@ -0,0 +1,17 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        header?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Button.d.ts

@@ -0,0 +1,54 @@
+type Variant = "primary" | "secondary" | "outline" | "ghost";
+type Size = "sm" | "md" | "lg";
+type TextPosition = "center" | "left" | "right";
+type ButtonType = "button" | "submit" | "reset";
+type MaybePromise<T = void> = Promise<T> | T;
+type __VLS_Props = {
+    text?: string;
+    position?: TextPosition;
+    size?: Size;
+    variant?: Variant;
+    pill?: boolean;
+    border?: boolean;
+    block?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    type?: ButtonType;
+    action?: () => MaybePromise;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        left?(_: {}): any;
+        default?(_: {}): any;
+        right?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLButtonElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    done: () => any;
+    click: (ev: MouseEvent) => any;
+    error: (err: unknown) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDone?: (() => any) | undefined;
+    onClick?: ((ev: MouseEvent) => any) | undefined;
+    onError?: ((err: unknown) => any) | undefined;
+}>, {
+    type: ButtonType;
+    disabled: boolean;
+    size: Size;
+    position: TextPosition;
+    variant: Variant;
+    pill: boolean;
+    border: boolean;
+    block: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Card.d.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    title?: string;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Dialog.d.ts

@@ -0,0 +1,17 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        dialogHeader?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Image.d.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    src: string;
+    alt?: string;
+    lazy?: boolean;
+    fallback?: string;
+    fit?: "cover" | "contain" | "fill";
+    radius?: number | string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    lazy: boolean;
+    fit: "cover" | "contain" | "fill";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/Menu.d.ts

@@ -0,0 +1,42 @@
+type To = any;
+type __VLS_Props = {
+    title?: string;
+    description?: string;
+    right?: string;
+    icon?: string;
+    /** Навигация */
+    to?: To;
+    /** Позволяет интегрировать свой component */
+    as?: any;
+    /** Поведение */
+    disabled?: boolean;
+    danger?: boolean;
+    /** Визуальные подсказки */
+    chevron?: boolean;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        icon?(_: {}): any;
+        title?(_: {}): any;
+        description?(_: {}): any;
+        right?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    click: (ev: MouseEvent) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((ev: MouseEvent) => any) | undefined;
+}>, {
+    chevron: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Overlay.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/Spinner.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    size?: "sm" | "md" | "lg";
+    color?: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/composables/index.d.ts

@@ -0,0 +1,3 @@
+export { useWebAlert } from './useWebAlert';
+export { useWebDialog } from './useWebDialog';
+export { useOverlayStack } from './useOverlayStack';

package/dist/composables/useOverlayStack.d.ts

@@ -0,0 +1,34 @@
+export type OverlayLayer = {
+    id?: string;
+    showOverlay?: boolean;
+    closeOnOverlay?: boolean;
+    closeOnEsc?: boolean;
+    onRequestClose?: () => void;
+};
+export declare function useOverlayStack(): {
+    stack: import('vue').Ref<{
+        id?: string | undefined;
+        showOverlay?: boolean | undefined;
+        closeOnOverlay?: boolean | undefined;
+        closeOnEsc?: boolean | undefined;
+        onRequestClose?: (() => void) | undefined;
+    }[], OverlayLayer[] | {
+        id?: string | undefined;
+        showOverlay?: boolean | undefined;
+        closeOnOverlay?: boolean | undefined;
+        closeOnEsc?: boolean | undefined;
+        onRequestClose?: (() => void) | undefined;
+    }[]>;
+    top: import('vue').ComputedRef<{
+        id?: string | undefined;
+        showOverlay?: boolean | undefined;
+        closeOnOverlay?: boolean | undefined;
+        closeOnEsc?: boolean | undefined;
+        onRequestClose?: (() => void) | undefined;
+    } | null>;
+    push: (layer: OverlayLayer) => string;
+    remove: (id: string) => void;
+    requestCloseTop: () => void;
+    getBackdropZIndex: (id: string) => number;
+    getContentZIndex: (id: string) => number;
+};

package/dist/composables/useWebAlert.d.ts

@@ -0,0 +1,15 @@
+import { Component } from 'vue';
+export type AlertType = "info" | "action" | "danger";
+export type AlertPayload = {
+    id: string;
+    title?: string;
+    type: AlertType;
+    message?: string;
+    component?: Component;
+    props?: Record<string, any>;
+};
+export declare function useWebAlert(): {
+    active: import('vue').ShallowRef<AlertPayload | null, AlertPayload | null>;
+    open: (payload: Omit<AlertPayload, "id">) => Promise<boolean>;
+    close: (result: boolean) => void;
+};

package/dist/composables/useWebDialog.d.ts

@@ -0,0 +1,14 @@
+import { Component } from 'vue';
+export type DialogSide = "left" | "right" | "bottom" | "center";
+export type DialogPayload = {
+    id: string;
+    title?: string;
+    side?: DialogSide;
+    component: Component;
+    props?: Record<string, any>;
+};
+export declare function useWebDialog(): {
+    active: import('vue').ShallowRef<DialogPayload | null, DialogPayload | null>;
+    open: (payload: Omit<DialogPayload, "id">) => void;
+    close: () => void;
+};

package/dist/composables/useWebLink.d.ts

@@ -0,0 +1 @@
+export declare function useWebLink(): void;

package/dist/index.cjs

@@ -0,0 +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;

package/dist/index.css

@@ -0,0 +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}

package/dist/index.d.ts

@@ -0,0 +1,30 @@
+import { Plugin } from 'vue';
+import { H0NPluginOptions, H0NTheme } from './types';
+import { default as Accordion } from './components/Accordion';
+import { default as Alert } from './components/Alert';
+import { default as Button } from './components/Button';
+import { default as Card } from './components/Card';
+import { default as Dialog } from './components/Dialog';
+import { default as Spinner } from './components/Spinner';
+import { default as Menu } from './components/Menu';
+import { default as Image } from './components/Image';
+import { default as Overlay } from './components/Overlay';
+export * from './composables';
+export { Accordion, Alert, Button, Card, Dialog, Spinner, Menu, Image, Overlay, };
+export type { H0NPluginOptions, H0NTheme };
+export declare function createH0NPlugin(options?: H0NPluginOptions): Plugin;
+declare const plugin: Plugin;
+declare module "@vue/runtime-core" {
+    interface GlobalComponents {
+        H0Accordion: typeof Accordion;
+        H0Alert: typeof Alert;
+        H0Button: typeof Button;
+        H0Card: typeof Card;
+        H0Dialog: typeof Dialog;
+        H0Spinner: typeof Spinner;
+        H0Menu: typeof Menu;
+        H0Image: typeof Image;
+        H0Overlay: typeof Overlay;
+    }
+}
+export { plugin as h0nUi };

package/dist/index.js

@@ -0,0 +1,734 @@
+import { defineComponent as C, ref as z, computed as _, openBlock as i, createElementBlock as c, normalizeClass as k, Fragment as K, renderList as ae, createElementVNode as p, renderSlot as b, toDisplayString as $, createCommentVNode as m, createVNode as A, Transition as R, withCtx as E, withDirectives as re, vShow as le, watch as V, shallowRef as G, createBlock as w, Teleport as P, unref as v, normalizeStyle as B, resolveDynamicComponent as M, normalizeProps as ce, mergeProps as j, createTextVNode as L, onMounted as Q, onUnmounted as ue, withModifiers as D } from "vue";
+import './index.css';const U = {
+  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 de(e) {
+  if (!e)
+    return Z(U);
+  const n = Z(U);
+  return X(n, e);
+}
+function fe(e) {
+  if (typeof window > "u" || typeof document > "u")
+    return;
+  const n = document.documentElement, t = he(e);
+  Object.entries(t).forEach(([s, o]) => {
+    n.style.setProperty(s, o);
+  });
+}
+function he(e) {
+  return {
+    "--h0n-primary": e.colors.primary,
+    "--h0n-secondary": e.colors.secondary,
+    "--h0n-tertiary": e.colors.tertiary,
+    "--h0n-success": e.colors.success,
+    "--h0n-warning": e.colors.warning,
+    "--h0n-danger": e.colors.danger,
+    "--h0n-text-primary": e.colors.text,
+    "--h0n-text-secondary": e.colors.description,
+    "--h0n-radius-sm": e.borderRadius.sm,
+    "--h0n-radius-md": e.borderRadius.md,
+    "--h0n-radius-lg": e.borderRadius.lg,
+    "--h0n-font-family-base": e.fontFamily,
+    "--h0n-focus-ring": e.focusRingColor
+  };
+}
+function X(e, n) {
+  const t = Array.isArray(e) ? [...e] : { ...e };
+  return n && Object.entries(n).forEach(([s, o]) => {
+    if (o === void 0)
+      return;
+    const h = e[s];
+    J(h) && J(o) ? t[s] = X(
+      h,
+      o
+    ) : t[s] = o;
+  }), t;
+}
+function Z(e) {
+  return JSON.parse(JSON.stringify(e));
+}
+function J(e) {
+  return Object.prototype.toString.call(e) === "[object Object]";
+}
+const ye = ["disabled", "aria-expanded", "aria-controls", "onClick"], pe = { class: "h0n-ui-accordion__title" }, ve = { class: "h0n-ui-accordion__title-text" }, me = {
+  key: 0,
+  class: "h0n-ui-accordion__badge"
+}, _e = ["id", "aria-label"], ge = { class: "h0n-ui-accordion__body-inner" }, be = { key: 0 }, $e = /* @__PURE__ */ C({
+  __name: "Accordion",
+  props: {
+    items: { default: () => [] },
+    modelValue: {},
+    multiple: { type: Boolean, default: !1 },
+    defaultOpen: { default: null },
+    compact: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "toggle"],
+  setup(e, { emit: n }) {
+    const t = e, s = n;
+    function o(a) {
+      return a == null ? [] : Array.isArray(a) ? t.multiple ? a : a.slice(0, 1) : [a];
+    }
+    const h = z(o(t.defaultOpen)), u = _(
+      () => t.modelValue !== void 0 ? o(t.modelValue) : h.value
+    ), l = _(() => new Set(u.value));
+    function d(a) {
+      return l.value.has(a);
+    }
+    function r(a) {
+      t.modelValue === void 0 && (h.value = a), s("update:modelValue", t.multiple ? a : a[0] ?? null);
+    }
+    function g(a) {
+      const y = [...u.value];
+      if (t.multiple) {
+        const x = new Set(y);
+        x.has(a) ? x.delete(a) : x.add(a);
+        const ie = Array.from(x);
+        r(ie), s("toggle", { id: a, open: x.has(a) });
+        return;
+      }
+      const f = y[0] === a;
+      r(f ? [] : [a]), s("toggle", { id: a, open: !f });
+    }
+    function N(a) {
+      return `h0n-ui-accordion-body-${String(a)}`;
+    }
+    function F(a) {
+      return a.querySelector(".h0n-ui-accordion__body-inner");
+    }
+    function ee(a) {
+      const y = a, f = F(y);
+      f && (y.style.height = "0px", y.style.opacity = "0", requestAnimationFrame(() => {
+        y.style.height = `${f.scrollHeight}px`, y.style.opacity = "1";
+      }));
+    }
+    function te(a) {
+      const y = a;
+      y.style.height = "auto", y.style.opacity = "";
+    }
+    function ne(a) {
+      const y = a, f = F(y);
+      f && (y.style.height = `${f.scrollHeight}px`, y.style.opacity = "1", y.offsetHeight, requestAnimationFrame(() => {
+        y.style.height = "0px", y.style.opacity = "0";
+      }));
+    }
+    function oe(a) {
+      const y = a;
+      y.style.height = "", y.style.opacity = "";
+    }
+    return (a, y) => (i(), c("div", {
+      class: k(["h0n-ui-accordion", { "is-compact": e.compact }])
+    }, [
+      (i(!0), c(K, null, ae(e.items, (f) => (i(), c("div", {
+        key: f.id,
+        class: k(["h0n-ui-accordion__item", {
+          "is-open": d(f.id),
+          "is-disabled": !!f.disabled
+        }])
+      }, [
+        p("button", {
+          class: "h0n-ui-accordion__header",
+          type: "button",
+          disabled: f.disabled,
+          "aria-expanded": d(f.id) ? "true" : "false",
+          "aria-controls": N(f.id),
+          onClick: (se) => g(f.id)
+        }, [
+          p("span", pe, [
+            b(a.$slots, "header", {
+              item: f,
+              open: d(f.id)
+            }, () => [
+              p("span", ve, $(f.title), 1),
+              f.badge ? (i(), c("span", me, $(f.badge), 1)) : m("", !0)
+            ])
+          ]),
+          y[0] || (y[0] = p("svg", {
+            class: "h0n-ui-accordion__chevron",
+            viewBox: "0 0 20 20",
+            "aria-hidden": "true"
+          }, [
+            p("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, ye),
+        A(R, {
+          name: "h0n-ui-accordion",
+          onEnter: ee,
+          onAfterEnter: te,
+          onLeave: ne,
+          onAfterLeave: oe
+        }, {
+          default: E(() => [
+            re(p("div", {
+              class: "h0n-ui-accordion__body",
+              id: N(f.id),
+              role: "region",
+              "aria-label": f.title
+            }, [
+              p("div", ge, [
+                b(a.$slots, "body", {
+                  item: f,
+                  open: d(f.id)
+                }, () => [
+                  f.body ? (i(), c("p", be, $(f.body), 1)) : m("", !0)
+                ])
+              ])
+            ], 8, _e), [
+              [le, d(f.id)]
+            ])
+          ]),
+          _: 2
+        }, 1024)
+      ], 2))), 128))
+    ], 2));
+  }
+});
+function q() {
+  return typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID() : Date.now().toString(36) + Math.random().toString(36).slice(2, 10);
+}
+const W = 1e4, O = z([]);
+function H() {
+  const e = _(() => O.value.at(-1) ?? null);
+  function n(l) {
+    return O.value.findIndex((d) => d.id === l);
+  }
+  function t(l) {
+    const d = n(l);
+    return d === -1 ? W : W + d * 2;
+  }
+  function s(l) {
+    return t(l) + 1;
+  }
+  function o(l) {
+    const d = l.id ?? q();
+    return h(d), O.value.push({
+      showOverlay: !0,
+      closeOnOverlay: !0,
+      closeOnEsc: !0,
+      ...l,
+      id: d
+    }), d;
+  }
+  function h(l) {
+    const d = n(l);
+    d !== -1 && O.value.splice(d, 1);
+  }
+  function u() {
+    e.value?.onRequestClose?.();
+  }
+  return V(
+    () => O.value.length,
+    (l) => {
+      document.documentElement.classList.toggle("no-scroll", l > 0);
+    },
+    { immediate: !0 }
+  ), {
+    stack: O,
+    top: e,
+    push: o,
+    remove: h,
+    requestCloseTop: u,
+    getBackdropZIndex: t,
+    getContentZIndex: s
+  };
+}
+const I = G(null);
+let T = null;
+function ke() {
+  const e = H();
+  function n(s) {
+    return new Promise((o) => {
+      const h = q();
+      T = o, I.value = { ...s, id: h }, e.push({
+        id: h,
+        showOverlay: !0,
+        closeOnOverlay: !0,
+        closeOnEsc: !0,
+        onRequestClose: () => t(!1)
+      });
+    });
+  }
+  function t(s) {
+    if (!I.value) return;
+    const o = I.value.id;
+    I.value = null, e.remove(o), T?.(s), T = null;
+  }
+  return {
+    active: I,
+    open: n,
+    close: t
+  };
+}
+const Ce = {
+  class: "h0n-alert",
+  role: "dialog",
+  "aria-modal": "true"
+}, Oe = {
+  key: 0,
+  class: "h0n-alert__header"
+}, we = { class: "h0n-alert__title" }, xe = { class: "h0n-alert__body" }, Ie = { key: 1 }, Se = /* @__PURE__ */ C({
+  __name: "Alert",
+  setup(e) {
+    const { active: n, close: t } = ke(), { getContentZIndex: s } = H(), o = () => t(!0), h = () => t(!1), u = () => t(!0), l = _(() => n.value?.type === "info"), d = _(
+      () => n.value ? s(n.value.id) : void 0
+    );
+    return (r, g) => (i(), w(P, { to: "body" }, [
+      A(R, {
+        name: "h0n-alert-scale",
+        appear: ""
+      }, {
+        default: E(() => [
+          v(n) ? (i(), c("div", {
+            key: 0,
+            class: "h0n-alert-layer",
+            style: B({ zIndex: d.value })
+          }, [
+            p("section", Ce, [
+              v(n).title || r.$slots.header ? (i(), c("header", Oe, [
+                b(r.$slots, "header", {}, () => [
+                  p("h4", we, $(v(n).title), 1)
+                ], !0)
+              ])) : m("", !0),
+              p("div", xe, [
+                v(n).component ? (i(), w(M(v(n).component), ce(j({ key: 0 }, v(n).props)), null, 16)) : v(n).message ? (i(), c("p", Ie, $(v(n).message), 1)) : m("", !0)
+              ]),
+              p("footer", {
+                class: k(["h0n-alert__actions", { "is-single": l.value }])
+              }, [
+                l.value ? (i(), c("button", {
+                  key: 0,
+                  class: "h0n-alert__btn h0n-alert__btn--primary",
+                  type: "button",
+                  onClick: u
+                }, " Ok ")) : (i(), c(K, { key: 1 }, [
+                  p("button", {
+                    class: "h0n-alert__btn is-danger",
+                    type: "button",
+                    onClick: h
+                  }, " Cancel "),
+                  p("button", {
+                    class: k(["h0n-alert__btn h0n-alert__btn--primary", {
+                      "is-danger": v(n).type === "danger"
+                    }]),
+                    type: "button",
+                    onClick: o
+                  }, " Confirm ", 2)
+                ], 64))
+              ], 2)
+            ])
+          ], 4)) : m("", !0)
+        ]),
+        _: 3
+      })
+    ]));
+  }
+}), Be = (e, n) => {
+  const t = e.__vccOpts || e;
+  for (const [s, o] of n)
+    t[s] = o;
+  return t;
+}, ze = /* @__PURE__ */ Be(Se, [["__scopeId", "data-v-290cad87"]]), Y = /* @__PURE__ */ C({
+  __name: "Spinner",
+  props: {
+    size: {},
+    color: {}
+  },
+  setup(e) {
+    const t = e.size ?? "md";
+    return (s, o) => (i(), c("div", {
+      class: k(["h0n-ui-spinner", [`h0n-ui-spinner--${v(t)}`, e.color]]),
+      role: "status",
+      "aria-label": "Loading"
+    }, null, 2));
+  }
+}), Ae = ["type", "disabled", "aria-busy"], Ee = {
+  key: 0,
+  class: "h0n-ui-btn__icon h0n-ui-btn__icon--left"
+}, He = {
+  key: 1,
+  class: "h0n-ui-btn__label"
+}, Le = {
+  key: 2,
+  class: "h0n-ui-btn__spinner",
+  "aria-hidden": "true"
+}, Re = {
+  key: 3,
+  class: "h0n-ui-btn__icon h0n-ui-btn__icon--right"
+}, De = /* @__PURE__ */ C({
+  __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(e, { emit: n }) {
+    const t = e, s = n, o = z(!1), h = _(() => t.loading !== void 0), u = _(
+      () => h.value ? !!t.loading : o.value
+    );
+    function l(r) {
+      h.value || (o.value = r);
+    }
+    async function d(r) {
+      if (!(t.disabled || u.value) && (s("click", r), !!t.action))
+        try {
+          l(!0), await t.action(), s("done");
+        } catch (g) {
+          s("error", g);
+        } finally {
+          l(!1);
+        }
+    }
+    return (r, g) => (i(), c("button", {
+      class: k(["h0n-ui-btn", [
+        `h0n-ui-btn--${e.variant}`,
+        `h0n-ui-btn--${e.size}`,
+        `h0n-ui-btn--text-${e.position}`,
+        {
+          "h0n-ui-btn--loading": u.value,
+          "h0n-ui-btn--pill": e.pill,
+          "h0n-ui-btn--radius": e.border,
+          "h0n-ui-btn--block": e.block
+        }
+      ]]),
+      type: e.type,
+      disabled: e.disabled || u.value,
+      "aria-busy": u.value ? "true" : void 0,
+      onClick: d
+    }, [
+      r.$slots.left && !u.value ? (i(), c("span", Ee, [
+        b(r.$slots, "left")
+      ])) : m("", !0),
+      u.value ? (i(), c("span", Le, [
+        A(Y, { size: "sm" })
+      ])) : (i(), c("span", He, [
+        b(r.$slots, "default", {}, () => [
+          L($(e.text), 1)
+        ])
+      ])),
+      r.$slots.right && !u.value ? (i(), c("span", Re, [
+        b(r.$slots, "right")
+      ])) : m("", !0)
+    ], 10, Ae));
+  }
+}), Te = { class: "h0n-ui-card" }, Ve = {
+  key: 0,
+  class: "h0n-ui-card--title"
+}, Pe = /* @__PURE__ */ C({
+  __name: "Card",
+  props: {
+    title: {}
+  },
+  setup(e) {
+    return (n, t) => (i(), c("section", Te, [
+      e.title ? (i(), c("p", Ve, $(e.title), 1)) : m("", !0),
+      b(n.$slots, "default")
+    ]));
+  }
+}), S = G(null);
+function Me() {
+  const e = H();
+  function n(s) {
+    const o = q();
+    S.value = { ...s, id: o }, e.push({
+      id: o,
+      showOverlay: !0,
+      closeOnOverlay: !0,
+      closeOnEsc: !0,
+      onRequestClose: t
+    });
+  }
+  function t() {
+    S.value && (e.remove(S.value.id), S.value = null);
+  }
+  return {
+    active: S,
+    open: n,
+    close: t
+  };
+}
+const je = { class: "content-title-dialog" }, qe = {
+  key: 0,
+  class: "title-dialog"
+}, Ne = { class: "h0n-dialog-content" }, Fe = /* @__PURE__ */ C({
+  __name: "Dialog",
+  setup(e) {
+    const { active: n, close: t } = Me(), { getContentZIndex: s } = H(), o = z("bottom");
+    V(
+      () => n.value?.side,
+      (l) => {
+        l && (o.value = l);
+      },
+      { immediate: !0 }
+    );
+    const h = _(() => `h0n-slide-${o.value}`), u = _(
+      () => n.value ? s(n.value.id) : void 0
+    );
+    return (l, d) => (i(), w(P, { to: "body" }, [
+      A(R, {
+        name: h.value,
+        appear: ""
+      }, {
+        default: E(() => [
+          v(n) ? (i(), c("div", {
+            key: 0,
+            class: k(["h0n-dialog-layer", `is-${o.value}`]),
+            style: B({ zIndex: u.value })
+          }, [
+            p("section", {
+              class: k(["h0n-dialog-panel", `is-${v(n).side}`])
+            }, [
+              p("header", {
+                class: k(["h0n-dialog-header", `is-${v(n).side}`])
+              }, [
+                p("div", je, [
+                  v(n).title ? (i(), c("p", qe, $(v(n).title), 1)) : m("", !0),
+                  b(l.$slots, "dialogHeader")
+                ]),
+                p("button", {
+                  class: "h0n-dialog-close",
+                  onClick: d[0] || (d[0] = (r) => v(t)())
+                }, " x ")
+              ], 2),
+              p("div", Ne, [
+                (i(), w(M(v(n).component), j(v(n).props, { onClose: v(t) }), null, 16, ["onClose"]))
+              ])
+            ], 2)
+          ], 6)) : m("", !0)
+        ]),
+        _: 3
+      }, 8, ["name"])
+    ]));
+  }
+}), Ue = { class: "h0n-ui-menu-item__left" }, Ze = {
+  key: 0,
+  class: "h0n-ui-menu-item__icon"
+}, Je = { class: "h0n-ui-menu-item__text" }, We = {
+  key: 0,
+  class: "h0n-ui-menu-item__desc"
+}, Ke = {
+  key: 0,
+  class: "h0n-ui-menu-item__right"
+}, Ge = {
+  key: 0,
+  class: "h0n-ui-menu-item__right-text"
+}, Qe = {
+  key: 0,
+  class: "h0n-ui-menu-item__chevron"
+}, Xe = /* @__PURE__ */ C({
+  __name: "Menu",
+  props: {
+    title: {},
+    description: {},
+    right: {},
+    icon: {},
+    to: {},
+    as: {},
+    disabled: { type: Boolean },
+    danger: { type: Boolean },
+    chevron: { type: Boolean, default: void 0 }
+  },
+  emits: ["click"],
+  setup(e, { emit: n }) {
+    const t = e, s = n, o = _(() => !!t.to), h = _(() => t.as ?? (o.value ? "a" : "div")), u = _(() => t.chevron !== void 0 ? t.chevron : o.value), l = _(() => t.disabled ? {
+      role: "button",
+      tabindex: -1
+    } : t.as ? t.to ? { to: t.to } : {} : o.value ? { href: "#" } : { role: "button", tabindex: 0 });
+    function d(r) {
+      if (t.disabled) {
+        r.preventDefault(), r.stopPropagation();
+        return;
+      }
+      !t.as && o.value && r.preventDefault(), s("click", r);
+    }
+    return (r, g) => (i(), w(M(h.value), j({ class: "h0n-ui-menu-item" }, l.value, {
+      "aria-disabled": e.disabled || void 0,
+      onClick: d
+    }), {
+      default: E(() => [
+        p("div", Ue, [
+          r.$slots.icon || e.icon ? (i(), c("div", Ze, [
+            b(r.$slots, "icon", {}, () => [
+              L($(e.icon), 1)
+            ])
+          ])) : m("", !0),
+          p("div", Je, [
+            p("p", {
+              class: k(["h0n-ui-menu-item__title", { "is-danger": e.danger }])
+            }, [
+              b(r.$slots, "title", {}, () => [
+                L($(e.title), 1)
+              ])
+            ], 2),
+            e.description || r.$slots.description ? (i(), c("p", We, [
+              b(r.$slots, "description", {}, () => [
+                L($(e.description), 1)
+              ])
+            ])) : m("", !0)
+          ])
+        ]),
+        e.right || r.$slots.right || u.value ? (i(), c("div", Ke, [
+          b(r.$slots, "right", {}, () => [
+            e.right ? (i(), c("p", Ge, $(e.right), 1)) : m("", !0)
+          ]),
+          u.value ? (i(), c("span", Qe, "›")) : m("", !0)
+        ])) : m("", !0)
+      ]),
+      _: 3
+    }, 16, ["aria-disabled"]));
+  }
+}), Ye = {
+  key: 0,
+  class: "h0n-ui-image__loader"
+}, et = {
+  key: 1,
+  class: "h0n-ui-image__error"
+}, tt = ["src"], nt = ["src", "alt"], ot = /* @__PURE__ */ C({
+  __name: "Image",
+  props: {
+    src: {},
+    alt: {},
+    lazy: { type: Boolean, default: !0 },
+    fallback: {},
+    fit: { default: "cover" },
+    radius: {}
+  },
+  setup(e) {
+    const n = e, t = z("loading");
+    function s() {
+      t.value = "loading";
+      const u = new Image();
+      u.src = n.src, u.onload = () => {
+        t.value = "loaded";
+      }, u.onerror = () => {
+        t.value = "error";
+      };
+    }
+    Q(() => {
+      if (n.lazy && "IntersectionObserver" in window) {
+        const u = new IntersectionObserver(([l]) => {
+          l.isIntersecting && (s(), u.disconnect());
+        });
+        u.observe(document.body);
+      } else
+        s();
+    }), V(() => n.src, s);
+    const o = _(() => ({
+      borderRadius: typeof n.radius == "number" ? `${n.radius}px` : n.radius
+    })), h = _(() => ({
+      objectFit: n.fit
+    }));
+    return (u, l) => (i(), c("div", {
+      class: k(["h0n-ui-image", t.value]),
+      style: B(o.value)
+    }, [
+      t.value === "loading" ? (i(), c("div", Ye)) : t.value === "error" ? (i(), c("div", et, [
+        e.fallback ? (i(), c("img", {
+          key: 0,
+          src: e.fallback
+        }, null, 8, tt)) : m("", !0)
+      ])) : (i(), c("img", {
+        key: 2,
+        src: e.src,
+        alt: e.alt,
+        style: B(h.value),
+        draggable: "false"
+      }, null, 12, nt))
+    ], 6));
+  }
+}), st = /* @__PURE__ */ C({
+  __name: "Overlay",
+  setup(e) {
+    const { top: n, getBackdropZIndex: t, requestCloseTop: s } = H(), o = _(() => !!n.value && n.value.showOverlay !== !1), h = _(() => {
+      if (n.value?.id)
+        return t(n.value.id);
+    });
+    function u() {
+    }
+    function l(r) {
+      const g = n.value;
+      !g || g.closeOnOverlay === !1 || s();
+    }
+    function d(r) {
+      const g = n.value;
+      !g || g.closeOnEsc === !1 || r.key === "Escape" && s();
+    }
+    return Q(() => window.addEventListener("keydown", d)), ue(() => window.removeEventListener("keydown", d)), (r, g) => (i(), w(P, { to: "body" }, [
+      A(R, { name: "h0n-ui-fade" }, {
+        default: E(() => [
+          o.value ? (i(), c("div", {
+            key: 0,
+            class: "h0n-ui-overlay",
+            style: B({ zIndex: h.value }),
+            onPointerdown: D(u, ["self", "prevent", "stop"]),
+            onPointerup: D(u, ["self", "prevent", "stop"]),
+            onClick: D(l, ["self", "prevent", "stop"])
+          }, null, 36)) : m("", !0)
+        ]),
+        _: 1
+      })
+    ]));
+  }
+});
+function it(e) {
+  const n = at(e);
+  return {
+    install(t) {
+      t.component("H0Accordion", $e), t.component("H0Alert", ze), t.component("H0Button", De), t.component("H0Card", Pe), t.component("H0Dialog", Fe), t.component("H0Spinner", Y), t.component("H0Menu", Xe), t.component("H0Image", ot), t.component("H0Overlay", st), fe(n.theme);
+    }
+  };
+}
+const lt = it();
+function at(e) {
+  return {
+    autoRegisterComponents: e?.autoRegisterComponents ?? !0,
+    theme: de(e?.theme)
+  };
+}
+export {
+  $e as Accordion,
+  ze as Alert,
+  De as Button,
+  Pe as Card,
+  Fe as Dialog,
+  ot as Image,
+  Xe as Menu,
+  st as Overlay,
+  Y as Spinner,
+  it as createH0NPlugin,
+  lt as h0nUi,
+  H as useOverlayStack,
+  ke as useWebAlert,
+  Me as useWebDialog
+};

package/dist/theme/index.d.ts

@@ -0,0 +1,5 @@
+import { DeepPartial, H0NTheme } from '../types';
+export declare const defaultTheme: H0NTheme;
+export declare function resolveTheme(overrides?: DeepPartial<H0NTheme>): H0NTheme;
+export declare function applyTheme(theme: H0NTheme): void;
+export declare function mapThemeToCssVariables(theme: H0NTheme): Record<string, string>;

package/dist/types.d.ts

@@ -0,0 +1,43 @@
+import { Component } from 'vue';
+export type DeepPartial<T> = {
+    [K in keyof T]?: T[K] extends Record<string, any> ? DeepPartial<T[K]> : T[K];
+};
+export interface H0nColorPalette {
+    primary: string;
+    secondary: string;
+    tertiary: string;
+    success: string;
+    warning: string;
+    danger: string;
+    text: string;
+    description: string;
+}
+export interface H0nBorderRadius {
+    sm: string;
+    md: string;
+    lg: string;
+}
+export interface H0NTheme {
+    colors: H0nColorPalette;
+    borderRadius: H0nBorderRadius;
+    fontFamily: string;
+    focusRingColor: string;
+}
+export interface H0NPluginOptions {
+    /**
+     * Toggle automatic global component registration.
+     */
+    autoRegisterComponents?: boolean;
+    /**
+     * Theme overrides that will extend the default palette.
+     */
+    theme?: DeepPartial<H0NTheme>;
+}
+export interface ResolvedH0nOptions {
+    autoRegisterComponents: boolean;
+    theme: H0NTheme;
+}
+export interface ComponentRegistryItem {
+    name: string;
+    component: Component;
+}

package/dist/utils/createId.d.ts

@@ -0,0 +1 @@
+export declare function createId(): string;

package/package.json

@@ -1,12 +1,11 @@
 {
     "name": "@theh0n/ui",
-    "version": "1.1.0",
+    "version": "1.1.1",
     "description": "",
     "author": "blockh0n",
     "license": "MIT",
     "keywords": [
-        "Vue",
-        "H0N"
+        "Vue"
     ],
     "files": [
         "dist",