@theh0n/ui 1.1.0 → 1.1.3

package/README.md

@@ -5,7 +5,7 @@
 ## Основные возможности
 
 - 🔌 Глобальный Vue-плагин `createH0NPlugin` с авто-регистрацией компонентов `H0*`.
-- 🧱 Набор готовых компонентов: Accordion, Alert, Button, Card, Dialog, Spinner, Menu, Image, Overlay.
+- 🧱 Набор готовых компонентов: Accordion, Alert, Button, Card, Dialog, Spinner, Menu, Image, Overlay Tabs, Skeleton.
 - 🎨 Гибкая тема: можно переопределять цвета, радиусы, шрифты и focus ring через опции плагина.
 - 🧩 Tree-shaking: при точечных импортах берутся только нужные компоненты и стили.
 

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/Skeleton.d.ts

@@ -0,0 +1,16 @@
+type SkeletonVariant = "rect" | "round" | "circle";
+type __VLS_Props = {
+    width?: number | string;
+    height?: number | string;
+    radius?: number | string;
+    variant?: SkeletonVariant;
+    animated?: boolean;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    variant: SkeletonVariant;
+    radius: number | string;
+    width: number | string;
+    height: number | string;
+    animated: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+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/components/Tabs.d.ts

@@ -0,0 +1,37 @@
+type TabItem = {
+    label: string;
+    value: string | number;
+};
+type __VLS_Props = {
+    modelValue: string | number;
+    tabs: TabItem[];
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            activeTab: string | number;
+        }): any;
+    };
+    refs: {
+        scrollerRef: HTMLDivElement;
+        listRef: HTMLDivElement;
+    };
+    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: string | number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    scrollerRef: HTMLDivElement;
+    listRef: HTMLDivElement;
+}, 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/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,15 @@
+import { Component } from 'vue';
+export type DialogSide = "left" | "right" | "bottom" | "center";
+export type DialogPayload = {
+    id: string;
+    title?: string;
+    side?: DialogSide;
+    backgroundUrl?: string;
+    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"),I={colors:{primary:"#171f2a",secondary:"#202a38",tertiary:"#293648",success:"#22c55e",warning:"#ffaa33",danger:"#ff4444",text:"#eaeff6",description:"#6c808c"},borderRadius:{sm:"4px",md:"8px",lg:"16px"},fontFamily:'"Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif',focusRingColor:"rgba(79, 70, 229, 0.4)"};function ee(t){if(!t)return T(I);const o=T(I);return L(o,t)}function te(t){if(typeof window>"u"||typeof document>"u")return;const o=document.documentElement,n=ne(t);Object.entries(n).forEach(([r,l])=>{o.style.setProperty(r,l)})}function ne(t){return{"--h0n-primary":t.colors.primary,"--h0n-secondary":t.colors.secondary,"--h0n-tertiary":t.colors.tertiary,"--h0n-success":t.colors.success,"--h0n-warning":t.colors.warning,"--h0n-danger":t.colors.danger,"--h0n-text-primary":t.colors.text,"--h0n-text-secondary":t.colors.description,"--h0n-radius-sm":t.borderRadius.sm,"--h0n-radius-md":t.borderRadius.md,"--h0n-radius-lg":t.borderRadius.lg,"--h0n-font-family-base":t.fontFamily,"--h0n-focus-ring":t.focusRingColor}}function L(t,o){const n=Array.isArray(t)?[...t]:{...t};return o&&Object.entries(o).forEach(([r,l])=>{if(l===void 0)return;const f=t[r];D(f)&&D(l)?n[r]=L(f,l):n[r]=l}),n}function T(t){return JSON.parse(JSON.stringify(t))}function D(t){return Object.prototype.toString.call(t)==="[object Object]"}const oe=["disabled","aria-expanded","aria-controls","onClick"],le={class:"h0n-ui-accordion__title"},ae={class:"h0n-ui-accordion__title-text"},re={key:0,class:"h0n-ui-accordion__badge"},se=["id","aria-label"],ce={class:"h0n-ui-accordion__body-inner"},ie={key:0},A=e.defineComponent({__name:"Accordion",props:{items:{default:()=>[]},modelValue:{},multiple:{type:Boolean,default:!1},defaultOpen:{default:null},compact:{type:Boolean,default:!1}},emits:["update:modelValue","toggle"],setup(t,{emit:o}){const n=t,r=o;function l(a){return a==null?[]:Array.isArray(a)?n.multiple?a:a.slice(0,1):[a]}const f=e.ref(l(n.defaultOpen)),u=e.computed(()=>n.modelValue!==void 0?l(n.modelValue):f.value),d=e.computed(()=>new Set(u.value));function i(a){return d.value.has(a)}function s(a){n.modelValue===void 0&&(f.value=a),r("update:modelValue",n.multiple?a:a[0]??null)}function p(a){const m=[...u.value];if(n.multiple){const h=new Set(m);h.has(a)?h.delete(a):h.add(a);const S=Array.from(h);s(S),r("toggle",{id:a,open:h.has(a)});return}const c=m[0]===a;s(c?[]:[a]),r("toggle",{id:a,open:!c})}function v(a){return`h0n-ui-accordion-body-${String(a)}`}function _(a){return a.querySelector(".h0n-ui-accordion__body-inner")}function b(a){const m=a,c=_(m);c&&(m.style.height="0px",m.style.opacity="0",requestAnimationFrame(()=>{m.style.height=`${c.scrollHeight}px`,m.style.opacity="1"}))}function $(a){const m=a;m.style.height="auto",m.style.opacity=""}function E(a){const m=a,c=_(m);c&&(m.style.height=`${c.scrollHeight}px`,m.style.opacity="1",m.offsetHeight,requestAnimationFrame(()=>{m.style.height="0px",m.style.opacity="0"}))}function V(a){const m=a;m.style.height="",m.style.opacity=""}return(a,m)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["h0n-ui-accordion",{"is-compact":t.compact}])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.items,c=>(e.openBlock(),e.createElementBlock("div",{key:c.id,class:e.normalizeClass(["h0n-ui-accordion__item",{"is-open":i(c.id),"is-disabled":!!c.disabled}])},[e.createElementVNode("button",{class:"h0n-ui-accordion__header",type:"button",disabled:c.disabled,"aria-expanded":i(c.id)?"true":"false","aria-controls":v(c.id),onClick:y=>p(c.id)},[e.createElementVNode("span",le,[e.renderSlot(a.$slots,"header",{item:c,open:i(c.id)},()=>[e.createElementVNode("span",ae,e.toDisplayString(c.title),1),c.badge?(e.openBlock(),e.createElementBlock("span",re,e.toDisplayString(c.badge),1)):e.createCommentVNode("",!0)])]),m[0]||(m[0]=e.createElementVNode("svg",{class:"h0n-ui-accordion__chevron",viewBox:"0 0 20 20","aria-hidden":"true"},[e.createElementVNode("path",{d:"M5 7.5L10 12.5L15 7.5",fill:"none",stroke:"currentColor","stroke-width":"1.8","stroke-linecap":"round","stroke-linejoin":"round"})],-1))],8,oe),e.createVNode(e.Transition,{name:"h0n-ui-accordion",onEnter:b,onAfterEnter:$,onLeave:E,onAfterLeave:V},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{class:"h0n-ui-accordion__body",id:v(c.id),role:"region","aria-label":c.title},[e.createElementVNode("div",ce,[e.renderSlot(a.$slots,"body",{item:c,open:i(c.id)},()=>[c.body?(e.openBlock(),e.createElementBlock("p",ie,e.toDisplayString(c.body),1)):e.createCommentVNode("",!0)])])],8,se),[[e.vShow,i(c.id)]])]),_:2},1024)],2))),128))],2))}});function N(){return typeof crypto<"u"&&"randomUUID"in crypto?crypto.randomUUID():Date.now().toString(36)+Math.random().toString(36).slice(2,10)}const R=1e4,g=e.ref([]);function k(){const t=e.computed(()=>g.value.at(-1)??null);function o(d){return g.value.findIndex(i=>i.id===d)}function n(d){const i=o(d);return i===-1?R:R+i*2}function r(d){return n(d)+1}function l(d){const i=d.id??N();return f(i),g.value.push({showOverlay:!0,closeOnOverlay:!0,closeOnEsc:!0,...d,id:i}),i}function f(d){const i=o(d);i!==-1&&g.value.splice(i,1)}function u(){t.value?.onRequestClose?.()}return e.watch(()=>g.value.length,d=>{document.documentElement.classList.toggle("no-scroll",d>0)},{immediate:!0}),{stack:g,top:t,push:l,remove:f,requestCloseTop:u,getBackdropZIndex:n,getContentZIndex:r}}const B=e.shallowRef(null);let w=null;function M(){const t=k();function o(r){return new Promise(l=>{const f=N();w=l,B.value={...r,id:f},t.push({id:f,showOverlay:!0,closeOnOverlay:!0,closeOnEsc:!0,onRequestClose:()=>n(!1)})})}function n(r){if(!B.value)return;const l=B.value.id;B.value=null,t.remove(l),w?.(r),w=null}return{active:B,open:o,close:n}}const ue={class:"h0n-alert",role:"dialog","aria-modal":"true"},de={key:0,class:"h0n-alert__header"},me={class:"h0n-alert__title"},fe={class:"h0n-alert__body"},pe={key:1},he=e.defineComponent({__name:"Alert",setup(t){const{active:o,close:n}=M(),{getContentZIndex:r}=k(),l=()=>n(!0),f=()=>n(!1),u=()=>n(!0),d=e.computed(()=>o.value?.type==="info"),i=e.computed(()=>o.value?r(o.value.id):void 0);return(s,p)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(e.Transition,{name:"h0n-alert-scale",appear:""},{default:e.withCtx(()=>[e.unref(o)?(e.openBlock(),e.createElementBlock("div",{key:0,class:"h0n-alert-layer",style:e.normalizeStyle({zIndex:i.value})},[e.createElementVNode("section",ue,[e.unref(o).title||s.$slots.header?(e.openBlock(),e.createElementBlock("header",de,[e.renderSlot(s.$slots,"header",{},()=>[e.createElementVNode("h4",me,e.toDisplayString(e.unref(o).title),1)],!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",fe,[e.unref(o).component?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(o).component),e.normalizeProps(e.mergeProps({key:0},e.unref(o).props)),null,16)):e.unref(o).message?(e.openBlock(),e.createElementBlock("p",pe,e.toDisplayString(e.unref(o).message),1)):e.createCommentVNode("",!0)]),e.createElementVNode("footer",{class:e.normalizeClass(["h0n-alert__actions",{"is-single":d.value}])},[d.value?(e.openBlock(),e.createElementBlock("button",{key:0,class:"h0n-alert__btn h0n-alert__btn--primary",type:"button",onClick:u}," Ok ")):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createElementVNode("button",{class:"h0n-alert__btn is-danger",type:"button",onClick:f}," Cancel "),e.createElementVNode("button",{class:e.normalizeClass(["h0n-alert__btn h0n-alert__btn--primary",{"is-danger":e.unref(o).type==="danger"}]),type:"button",onClick:l}," Confirm ",2)],64))],2)])],4)):e.createCommentVNode("",!0)]),_:3})]))}}),ve=(t,o)=>{const n=t.__vccOpts||t;for(const[r,l]of o)n[r]=l;return n},H=ve(he,[["__scopeId","data-v-290cad87"]]),x=e.defineComponent({__name:"Spinner",props:{size:{},color:{}},setup(t){const n=t.size??"md";return(r,l)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["h0n-ui-spinner",[`h0n-ui-spinner--${e.unref(n)}`,t.color]]),role:"status","aria-label":"Loading"},null,2))}}),ye=["type","disabled","aria-busy"],ge={key:0,class:"h0n-ui-btn__icon h0n-ui-btn__icon--left"},ke={key:1,class:"h0n-ui-btn__label"},_e={key:2,class:"h0n-ui-btn__spinner","aria-hidden":"true"},be={key:3,class:"h0n-ui-btn__icon h0n-ui-btn__icon--right"},P=e.defineComponent({__name:"Button",props:{text:{},position:{default:"center"},size:{default:"md"},variant:{default:"primary"},pill:{type:Boolean,default:!1},border:{type:Boolean,default:!0},block:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},loading:{type:Boolean},type:{default:"button"},action:{}},emits:["click","done","error"],setup(t,{emit:o}){const n=t,r=o,l=e.ref(!1),f=e.computed(()=>n.loading!==void 0),u=e.computed(()=>f.value?!!n.loading:l.value);function d(s){f.value||(l.value=s)}async function i(s){if(!(n.disabled||u.value)&&(r("click",s),!!n.action))try{d(!0),await n.action(),r("done")}catch(p){r("error",p)}finally{d(!1)}}return(s,p)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["h0n-ui-btn",[`h0n-ui-btn--${t.variant}`,`h0n-ui-btn--${t.size}`,`h0n-ui-btn--text-${t.position}`,{"h0n-ui-btn--loading":u.value,"h0n-ui-btn--pill":t.pill,"h0n-ui-btn--radius":t.border,"h0n-ui-btn--block":t.block}]]),type:t.type,disabled:t.disabled||u.value,"aria-busy":u.value?"true":void 0,onClick:i},[s.$slots.left&&!u.value?(e.openBlock(),e.createElementBlock("span",ge,[e.renderSlot(s.$slots,"left")])):e.createCommentVNode("",!0),u.value?(e.openBlock(),e.createElementBlock("span",_e,[e.createVNode(x,{size:"sm"})])):(e.openBlock(),e.createElementBlock("span",ke,[e.renderSlot(s.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])])),s.$slots.right&&!u.value?(e.openBlock(),e.createElementBlock("span",be,[e.renderSlot(s.$slots,"right")])):e.createCommentVNode("",!0)],10,ye))}}),Be={class:"h0n-ui-card"},Ce={key:0,class:"h0n-ui-card--title"},U=e.defineComponent({__name:"Card",props:{title:{}},setup(t){return(o,n)=>(e.openBlock(),e.createElementBlock("section",Be,[t.title?(e.openBlock(),e.createElementBlock("p",Ce,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"default")]))}}),C=e.shallowRef(null);function q(){const t=k();function o(r){const l=N();C.value={...r,id:l},t.push({id:l,showOverlay:!0,closeOnOverlay:!0,closeOnEsc:!0,onRequestClose:n})}function n(){C.value&&(t.remove(C.value.id),C.value=null)}return{active:C,open:o,close:n}}const $e={class:"content-title-dialog"},Ee={key:0,class:"title-dialog"},Ve={key:0,class:"h0n-dialog-bg-hero"},Se={class:"h0n-dialog-content"},j=e.defineComponent({__name:"Dialog",setup(t){const{active:o,close:n}=q(),{getContentZIndex:r}=k(),l=e.ref("bottom");e.watch(()=>o.value?.side,p=>{p&&(l.value=p)},{immediate:!0});const f=e.computed(()=>`h0n-slide-${l.value}`),u=e.computed(()=>o.value?r(o.value.id):void 0),d=e.computed(()=>o.value?.backgroundUrl?.trim()??""),i=e.computed(()=>d.value.length>0),s=e.computed(()=>i.value?{"--h0n-dialog-bg-image":`url("${d.value.replace(/\\/g,"\\\\").replace(/"/g,'\\"')}")`}:void 0);return(p,v)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(e.Transition,{name:f.value,appear:""},{default:e.withCtx(()=>[e.unref(o)?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["h0n-dialog-layer",`is-${l.value}`]),style:e.normalizeStyle({zIndex:u.value})},[e.createElementVNode("section",{class:e.normalizeClass(["h0n-dialog-panel",[`is-${e.unref(o).side}`,{"has-background-image":i.value}]]),style:e.normalizeStyle(s.value)},[e.createElementVNode("header",{class:e.normalizeClass(["h0n-dialog-header",[`is-${e.unref(o).side}`,{"has-background-image":i.value}]])},[e.createElementVNode("div",$e,[e.unref(o).title?(e.openBlock(),e.createElementBlock("p",Ee,e.toDisplayString(e.unref(o).title),1)):e.createCommentVNode("",!0),e.renderSlot(p.$slots,"dialogHeader")]),e.createElementVNode("button",{class:"h0n-dialog-close",onClick:v[0]||(v[0]=_=>e.unref(n)())}," x ")],2),i.value?(e.openBlock(),e.createElementBlock("div",Ve,[...v[1]||(v[1]=[e.createElementVNode("div",{class:"h0n-dialog-bg-image"},null,-1)])])):e.createCommentVNode("",!0),e.createElementVNode("div",Se,[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(o).component),e.mergeProps(e.unref(o).props,{onClose:e.unref(n)}),null,16,["onClose"]))])],6)],6)):e.createCommentVNode("",!0)]),_:3},8,["name"])]))}}),we={class:"h0n-ui-menu-item__left"},Ne={key:0,class:"h0n-ui-menu-item__icon"},xe={class:"h0n-ui-menu-item__text"},Oe={key:0,class:"h0n-ui-menu-item__desc"},ze={key:0,class:"h0n-ui-menu-item__right"},Ie={key:0,class:"h0n-ui-menu-item__right-text"},Te={key:0,class:"h0n-ui-menu-item__chevron"},F=e.defineComponent({__name:"Menu",props:{title:{},description:{},right:{},icon:{},to:{},as:{},disabled:{type:Boolean},danger:{type:Boolean},chevron:{type:Boolean,default:void 0}},emits:["click"],setup(t,{emit:o}){const n=t,r=o,l=e.computed(()=>!!n.to),f=e.computed(()=>n.as??(l.value?"a":"div")),u=e.computed(()=>n.chevron!==void 0?n.chevron:l.value),d=e.computed(()=>n.disabled?{role:"button",tabindex:-1}:n.as?n.to?{to:n.to}:{}:l.value?{href:"#"}:{role:"button",tabindex:0});function i(s){if(n.disabled){s.preventDefault(),s.stopPropagation();return}!n.as&&l.value&&s.preventDefault(),r("click",s)}return(s,p)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(f.value),e.mergeProps({class:"h0n-ui-menu-item"},d.value,{"aria-disabled":t.disabled||void 0,onClick:i}),{default:e.withCtx(()=>[e.createElementVNode("div",we,[s.$slots.icon||t.icon?(e.openBlock(),e.createElementBlock("div",Ne,[e.renderSlot(s.$slots,"icon",{},()=>[e.createTextVNode(e.toDisplayString(t.icon),1)])])):e.createCommentVNode("",!0),e.createElementVNode("div",xe,[e.createElementVNode("p",{class:e.normalizeClass(["h0n-ui-menu-item__title",{"is-danger":t.danger}])},[e.renderSlot(s.$slots,"title",{},()=>[e.createTextVNode(e.toDisplayString(t.title),1)])],2),t.description||s.$slots.description?(e.openBlock(),e.createElementBlock("p",Oe,[e.renderSlot(s.$slots,"description",{},()=>[e.createTextVNode(e.toDisplayString(t.description),1)])])):e.createCommentVNode("",!0)])]),t.right||s.$slots.right||u.value?(e.openBlock(),e.createElementBlock("div",ze,[e.renderSlot(s.$slots,"right",{},()=>[t.right?(e.openBlock(),e.createElementBlock("p",Ie,e.toDisplayString(t.right),1)):e.createCommentVNode("",!0)]),u.value?(e.openBlock(),e.createElementBlock("span",Te,"›")):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)]),_:3},16,["aria-disabled"]))}}),De={key:0,class:"h0n-ui-image__loader"},Re={key:1,class:"h0n-ui-image__error"},Le=["src"],Ae=["src","alt"],W=e.defineComponent({__name:"Image",props:{src:{},alt:{},lazy:{type:Boolean,default:!0},fallback:{},fit:{default:"cover"},radius:{}},setup(t){const o=t,n=e.ref("loading");function r(){n.value="loading";const u=new Image;u.src=o.src,u.onload=()=>{n.value="loaded"},u.onerror=()=>{n.value="error"}}e.onMounted(()=>{if(o.lazy&&"IntersectionObserver"in window){const u=new IntersectionObserver(([d])=>{d.isIntersecting&&(r(),u.disconnect())});u.observe(document.body)}else r()}),e.watch(()=>o.src,r);const l=e.computed(()=>({borderRadius:typeof o.radius=="number"?`${o.radius}px`:o.radius})),f=e.computed(()=>({objectFit:o.fit}));return(u,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["h0n-ui-image",n.value]),style:e.normalizeStyle(l.value)},[n.value==="loading"?(e.openBlock(),e.createElementBlock("div",De)):n.value==="error"?(e.openBlock(),e.createElementBlock("div",Re,[t.fallback?(e.openBlock(),e.createElementBlock("img",{key:0,src:t.fallback},null,8,Le)):e.createCommentVNode("",!0)])):(e.openBlock(),e.createElementBlock("img",{key:2,src:t.src,alt:t.alt,style:e.normalizeStyle(f.value),draggable:"false"},null,12,Ae))],6))}}),Z=e.defineComponent({__name:"Overlay",setup(t){const{top:o,getBackdropZIndex:n,requestCloseTop:r}=k(),l=e.computed(()=>!!o.value&&o.value.showOverlay!==!1),f=e.computed(()=>{if(o.value?.id)return n(o.value.id)});function u(){}function d(s){const p=o.value;!p||p.closeOnOverlay===!1||r()}function i(s){const p=o.value;!p||p.closeOnEsc===!1||s.key==="Escape"&&r()}return e.onMounted(()=>window.addEventListener("keydown",i)),e.onUnmounted(()=>window.removeEventListener("keydown",i)),(s,p)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createVNode(e.Transition,{name:"h0n-ui-fade"},{default:e.withCtx(()=>[l.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"h0n-ui-overlay",style:e.normalizeStyle({zIndex:f.value}),onPointerdown:e.withModifiers(u,["self","prevent","stop"]),onPointerup:e.withModifiers(u,["self","prevent","stop"]),onClick:e.withModifiers(d,["self","prevent","stop"])},null,36)):e.createCommentVNode("",!0)]),_:1})]))}}),J=e.defineComponent({__name:"Skeleton",props:{width:{default:"100%"},height:{default:12},radius:{default:8},variant:{default:"rect"},animated:{type:Boolean,default:!0}},setup(t){const o=t,n=l=>typeof l=="number"?`${l}px`:l,r=e.computed(()=>{const l={width:n(o.width),height:n(o.height),borderRadius:n(o.radius)};return o.variant==="circle"?{...l,borderRadius:"999px"}:o.variant==="round"?{...l,borderRadius:"14px"}:l});return(l,f)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["h0n-skeleton",{"is-animated":t.animated}]),style:e.normalizeStyle(r.value)},null,6))}}),Me={class:"h0n-tabs"},He=["onClick"],Pe={class:"h0n-tabs__label"},Ue={key:0,class:"h0n-tabs__content"},K=e.defineComponent({__name:"Tabs",props:{modelValue:{},tabs:{}},emits:["update:modelValue"],setup(t,{emit:o}){const n=t,r=o,l=e.computed(()=>n.tabs.findIndex(a=>a.value===n.modelValue)),f=e.ref(null),u=e.ref(null),d=e.ref(0),i=e.ref(0),s=e.ref("forward");let p=0;const v=()=>{b("auto")},_=()=>{const a=u.value;return a?a.querySelector(".h0n-tabs__tab.is-active"):null},b=async(a="smooth")=>{const m=++p;if(await e.nextTick(),m!==p)return;const c=u.value,y=_(),h=f.value;if(!y||!c){d.value=0,i.value=0;return}const S=y.querySelector(".h0n-tabs__label")??y,G=c.getBoundingClientRect(),O=S.getBoundingClientRect();if(d.value=O.left-G.left,i.value=O.width,!h)return;const Q=y.offsetLeft+y.offsetWidth/2-h.clientWidth/2,Y=Math.max(h.scrollWidth-h.clientWidth,0),z=Math.min(Math.max(Q,0),Y);Math.abs(h.scrollLeft-z)<1||h.scrollTo({left:z,behavior:a})},$=e.computed(()=>({left:"0px",width:`${i.value}px`,transform:`translateX(${d.value}px)`}));e.watch(()=>l.value,(a,m)=>{if(m===void 0||m===-1||a===-1){s.value="forward";return}s.value=a>=m?"forward":"backward"});const E=e.computed(()=>s.value==="forward"?"h0n-tabs-slide-left":"h0n-tabs-slide-right"),V=a=>{r("update:modelValue",a)};return e.onMounted(()=>{b("auto"),window.addEventListener("resize",v)}),e.onBeforeUnmount(()=>{p++,window.removeEventListener("resize",v)}),e.watch(()=>[n.modelValue,n.tabs.length],()=>{b()}),(a,m)=>(e.openBlock(),e.createElementBlock("div",Me,[e.createElementVNode("div",{ref_key:"scrollerRef",ref:f,class:"h0n-tabs__scroller"},[e.createElementVNode("div",{ref_key:"listRef",ref:u,class:"h0n-tabs__list"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.tabs,(c,y)=>(e.openBlock(),e.createElementBlock("button",{key:`${String(c.value)}-${y}`,class:e.normalizeClass(["h0n-tabs__tab",{"is-active":c.value===t.modelValue}]),type:"button",onClick:h=>V(c.value)},[e.createElementVNode("span",Pe,e.toDisplayString(c.label),1)],10,He))),128)),e.createElementVNode("span",{class:"h0n-tabs__indicator",style:e.normalizeStyle($.value)},null,4)],512)],512),a.$slots.default?(e.openBlock(),e.createElementBlock("div",Ue,[e.createVNode(e.Transition,{name:E.value,mode:"out-in"},{default:e.withCtx(()=>[(e.openBlock(),e.createElementBlock("div",{key:t.modelValue,class:"h0n-tabs__panel"},[e.renderSlot(a.$slots,"default",{activeTab:t.modelValue})]))]),_:3},8,["name"])])):e.createCommentVNode("",!0)]))}});function X(t){const o=je(t);return{install(n){n.component("H0Accordion",A),n.component("H0Alert",H),n.component("H0Button",P),n.component("H0Card",U),n.component("H0Dialog",j),n.component("H0Spinner",x),n.component("H0Menu",F),n.component("H0Image",W),n.component("H0Overlay",Z),n.component("H0Skeleton",J),n.component("H0Tabs",K),te(o.theme)}}}const qe=X();function je(t){return{autoRegisterComponents:t?.autoRegisterComponents??!0,theme:ee(t?.theme)}}exports.Accordion=A;exports.Alert=H;exports.Button=P;exports.Card=U;exports.Dialog=j;exports.Image=W;exports.Menu=F;exports.Overlay=Z;exports.Skeleton=J;exports.Spinner=x;exports.Tabs=K;exports.createH0NPlugin=X;exports.h0nUi=qe;exports.useOverlayStack=k;exports.useWebAlert=M;exports.useWebDialog=q;

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{position:relative;isolation:isolate;background:var(--h0n-primary);color:var(--h0n-text-primary);box-shadow:0 20px 60px #00000059;transform:translateZ(0);backface-visibility:hidden;overflow:hidden;display:flex;flex-direction:column;pointer-events:auto}.h0n-dialog-layer .h0n-dialog-panel .h0n-dialog-bg-hero{position:absolute;inset:0 0 auto;height:260px;pointer-events:none;z-index:0;transform:translateZ(0);backface-visibility:hidden}.h0n-dialog-layer .h0n-dialog-panel .h0n-dialog-bg-hero:after{content:"";position:absolute;inset:0 0 -4px;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 26%,color-mix(in srgb,var(--h0n-primary) 82%,transparent) 59%,var(--h0n-primary) 100%)}.h0n-dialog-layer .h0n-dialog-panel .h0n-dialog-bg-hero .h0n-dialog-bg-image{position:absolute;inset:-72px 0 0;z-index:0;background-image:var(--h0n-dialog-bg-image);background-repeat:no-repeat;background-position:center top;background-size:cover;opacity:.96;transform:translateZ(0);backface-visibility:hidden}.h0n-dialog-layer .h0n-dialog-panel.is-left,.h0n-dialog-layer .h0n-dialog-panel.is-right{width:min(420px,85vw - 32px);height:100dvh;border-radius:0;padding-top:var(--tg-safe-top, 10px)}.h0n-dialog-layer .h0n-dialog-panel.is-bottom{margin-inline:auto;width:100%;max-width:min(420px,100%);max-height:85dvh;padding-top:10px;border-radius:0;border-top-left-radius:var(--h0n-radius-12, 12px);border-top-right-radius:var(--h0n-radius-12, 12px)}.h0n-dialog-layer .h0n-dialog-panel.is-center{width:min(400px,92vw);max-height:85dvh;padding-top:10px;border-radius:var(--h0n-radius-12, 12px)}.h0n-dialog-layer .h0n-dialog-panel .h0n-dialog-header{padding:10px 12px;display:flex;justify-content:space-between;align-items:center;width:100%;position:absolute;top:0;padding-top:var(--tg-safe-top, 10px);z-index:2;background:color-mix(in srgb,var(--h0n-primary) 70%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.h0n-dialog-layer .h0n-dialog-panel .h0n-dialog-header.has-background-image{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.h0n-dialog-layer .h0n-dialog-panel .h0n-dialog-header.is-center,.h0n-dialog-layer .h0n-dialog-panel .h0n-dialog-header.is-bottom{padding-top:10px}.h0n-dialog-layer .h0n-dialog-panel .h0n-dialog-header .h0n-dialog-close{border:none;outline:none;cursor:pointer;color:inherit;display:inline-flex;align-items:center;gap:6px;border-radius:16px;background:#00000026;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);padding:6px 16px}.h0n-dialog-layer .h0n-dialog-panel .h0n-dialog-header .h0n-dialog-close:hover{color:var(--h0n-text-primary)}.h0n-dialog-layer .h0n-dialog-panel .h0n-dialog-header .h0n-dialog-close:focus-visible{outline:2px solid rgba(255,255,255,.35);outline-offset:2px}.h0n-dialog-layer .h0n-dialog-panel .h0n-dialog-content{overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-top:50px;position:relative;z-index:1}.h0n-slide-left-enter-active,.h0n-slide-right-enter-active,.h0n-slide-bottom-enter-active,.h0n-slide-center-enter-active{transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .16s ease;will-change:transform,opacity}.h0n-slide-left-leave-active,.h0n-slide-right-leave-active,.h0n-slide-bottom-leave-active,.h0n-slide-center-leave-active{transition:transform .16s cubic-bezier(.4,0,.8,.2),opacity .16s ease;will-change:transform,opacity}.h0n-slide-left-enter-from,.h0n-slide-left-leave-to{transform:translate3d(-105%,0,0)}.h0n-slide-right-enter-from,.h0n-slide-right-leave-to{transform:translate3d(105%,0,0)}.h0n-slide-bottom-enter-from,.h0n-slide-bottom-leave-to{transform:translate3d(0,105%,0)}.h0n-slide-center-enter-from,.h0n-slide-center-leave-to{transform:translate3d(0,10%,0) scale(.98);opacity:0}.h0n-slide-left-enter-to,.h0n-slide-left-leave-from,.h0n-slide-right-enter-to,.h0n-slide-right-leave-from,.h0n-slide-bottom-enter-to,.h0n-slide-bottom-leave-from,.h0n-slide-center-enter-to,.h0n-slide-center-leave-from{transform:translateZ(0);opacity:1}@media(prefers-reduced-motion:reduce){.h0n-slide-left-enter-active,.h0n-slide-left-leave-active,.h0n-slide-right-enter-active,.h0n-slide-right-leave-active,.h0n-slide-bottom-enter-active,.h0n-slide-bottom-leave-active,.h0n-slide-center-enter-active,.h0n-slide-center-leave-active{transition:none!important}}.h0-skeleton{position:relative;overflow:hidden;background:#ffffff14}.h0-skeleton.is-animated:after{content:"";position:absolute;inset:0;transform:translate(-120%);background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.18) 50%,transparent 100%);animation:h0n-skeleton-shimmer 1.4s ease-in-out infinite}@keyframes h0n-skeleton-shimmer{0%{transform:translate(-120%)}to{transform:translate(120%)}}.h0n-tabs{--h0n-tabs-accent: rgba(17, 168, 255, .95);width:100%;max-width:100%;min-width:0}.h0n-tabs .h0n-tabs__scroller{width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.h0n-tabs .h0n-tabs__list{position:relative;display:inline-flex;align-items:center;min-width:100%;width:max-content;white-space:nowrap}.h0n-tabs .h0n-tabs__tab{flex:0 0 auto;padding:16px 14px;text-align:center;font-weight:500;opacity:.6;background:transparent;border:none;cursor:pointer;display:flex;justify-content:center;white-space:nowrap}.h0n-tabs .h0n-tabs__tab.is-active{font-weight:600;opacity:1;color:var(--h0n-tabs-accent)}.h0n-tabs .h0n-tabs__label{display:inline-block;color:var(--h0n-text-primary)}.h0n-tabs .h0n-tabs__indicator{position:absolute;left:0;bottom:0;height:4px;border-top-left-radius:12px;border-top-right-radius:12px;background:var(--h0n-tabs-accent);transition:transform .2s ease,width .2s ease}.h0n-tabs .h0n-tabs__content{overflow:hidden;filter:none;-webkit-backdrop-filter:none;backdrop-filter:none}.h0n-tabs .h0n-tabs__panel{backface-visibility:hidden}@media(max-width:768px){.h0n-tabs .h0n-tabs__panel{will-change:transform,opacity}}.h0n-tabs-slide-left-enter-active,.h0n-tabs-slide-left-leave-active,.h0n-tabs-slide-right-enter-active,.h0n-tabs-slide-right-leave-active{transition:opacity .1s ease,transform .1s ease}.h0n-tabs-slide-left-enter-from,.h0n-tabs-slide-right-leave-to{opacity:0;transform:translate(24px)}.h0n-tabs-slide-left-leave-to,.h0n-tabs-slide-right-enter-from{opacity:0;transform:translate(-24px)}:root{color-scheme:light;--h0n-primary: "#171f2a";--h0n-secondary: "#202a38", --h0n-tertiary: "#293648", --h0n-success: "#22c55e", --h0n-warning: "#ffaa33", --h0n-danger: "#ff4444", --h0n-text-primary: "#eaeff6", --h0n-text-secondary: "#6c808c", --h0n-radius-sm: 8px;--h0n-radius-md: 12px;--h0n-radius-lg: 16px;--h0n-font-family-base: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;--h0n-focus-ring: rgba(79, 70, 229, .4)}[class^=H0],[class*=" H0"]{font-family:inherit}.h0n-focusable:focus-visible{outline:2px solid var(--h0n-focus-ring);outline-offset:2px}

package/dist/index.d.ts

@@ -0,0 +1,34 @@
+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';
+import { default as Skeleton } from './components/Skeleton';
+import { default as Tabs } from './components/Tabs';
+export * from './composables';
+export { Accordion, Alert, Button, Card, Dialog, Spinner, Menu, Image, Overlay, Skeleton, Tabs, };
+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;
+        H0Skeleton: typeof Skeleton;
+        H0Tabs: typeof Tabs;
+    }
+}
+export { plugin as h0nUi };