@hina-ui/vue 1.1.0 → 1.3.0

package/dist/types/components/select/SelectList.vue.d.ts

@@ -1,20 +1,27 @@
 import { type SelectItems, type SelectOption } from './types';
-type __VLS_Props = {
-    options: SelectItems;
-    keyboard?: boolean;
-};
-type __VLS_Slots = {
-    option(props: {
-        option: SelectOption;
-    }): unknown;
+declare const __VLS_export: <T extends SelectOption = SelectOption>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<{
+        options: SelectItems<T>;
+        keyboard?: boolean;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        option?(props: {
+            option: T;
+        }): unknown;
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};
 //# sourceMappingURL=SelectList.vue.d.ts.map

package/dist/types/components/select/SelectList.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectList.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/select/SelectList.vue"],"names":[],"mappings":"AAqIE,OAAO,EAAiB,KAAK,WAAW,EAAE,KAAK,YAAY,EAAE,MAAM,SAAS,CAAA;AAI5E,KAAK,WAAW,GAAG;IAAE,OAAO,EAAE,WAAW,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAKhE,KAAK,WAAW,GAAG;IAAE,MAAM,CAAC,KAAK,EAAE;QAAE,MAAM,EAAE,YAAY,CAAA;KAAE,GAAG,OAAO,CAAA;CAAE,CAAC;AA0W1E,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"SelectList.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/select/SelectList.vue"],"names":[],"mappings":"AAqIE,OAAO,EAAiB,KAAK,WAAW,EAAE,KAAK,YAAY,EAAE,MAAM,SAAS,CAAA;AAE5E,QAAA,MAAM,YAAY,GAAK,CAAC,SAAS,YAAY,GAAG,YAAY,EAC7D,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAmXO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB;iBAhXvB,WAAW,CAAC,CAAC,CAAC;mBAAa,OAAO;MAgXQ,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC1I,CAAC,OAAO,EAAE,EAAE,KAAK,IAAI;WACtB,GAAG;;uBA7W2B;YAAE,MAAM,EAAE,CAAC,CAAA;SAAE,GAAG,OAAO;;UA+WtD,EAAE;EAEL,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}

package/dist/types/components/select/composables/useClearTransition.d.ts

@@ -0,0 +1,10 @@
+export declare function useClearTransition(visible: () => boolean): {
+    reserved: import("vue").ComputedRef<boolean>;
+    hooks: {
+        beforeEnter: (element: Element) => void;
+        beforeLeave: (element: Element) => void;
+        afterLeave: () => void;
+        leaveCancelled: () => void;
+    };
+};
+//# sourceMappingURL=useClearTransition.d.ts.map

package/dist/types/components/select/composables/useClearTransition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClearTransition.d.ts","sourceRoot":"","sources":["../../../../../src/components/select/composables/useClearTransition.ts"],"names":[],"mappings":"AAEA,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,MAAM,OAAO;;;+BAIzB,OAAO;+BAKP,OAAO;;;;EAatC"}

package/dist/types/components/select/select.variants.d.ts

@@ -1,8 +1,24 @@
 export declare const selectTrigger: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;
+export declare const selectButton: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;
 export declare const selectContent: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;
 export declare const selectList: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "max-h-[min(20rem,var(--reka-select-content-available-height))]", {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;
 export declare const selectItem: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;
 export declare const selectLabel: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "text-muted px-2.5 py-1.5 text-xs font-medium", {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;
 export declare const selectEmpty: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "text-muted px-2.5 py-2 text-sm", {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;
 export declare const selectListBody: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "flex flex-col p-1", {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;
+export declare const selectHost: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "relative cursor-pointer", {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;
+export declare const selectValue: import("tailwind-variants").TVReturnType<{
+    clearing: {
+        true: "pe-[var(--hn-input-h)]";
+    };
+}, undefined, "min-w-0 flex-1 truncate", {
+    clearing: {
+        true: "pe-[var(--hn-input-h)]";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    clearing: {
+        true: "pe-[var(--hn-input-h)]";
+    };
+}, undefined>>;
+export declare const selectClearSlot: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;
 //# sourceMappingURL=select.variants.d.ts.map

package/dist/types/components/select/select.variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.variants.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select.variants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,mKAOxB,CAAA;AAEF,eAAO,MAAM,aAAa,mKAKxB,CAAA;AAEF,eAAO,MAAM,UAAU,2NAErB,CAAA;AAEF,eAAO,MAAM,UAAU,mKAOrB,CAAA;AAEF,eAAO,MAAM,WAAW,yMAEtB,CAAA;AAEF,eAAO,MAAM,WAAW,2LAEtB,CAAA;AAEF,eAAO,MAAM,cAAc,8KAEzB,CAAA"}
+{"version":3,"file":"select.variants.d.ts","sourceRoot":"","sources":["../../../../src/components/select/select.variants.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,mKAOxB,CAAA;AAEF,eAAO,MAAM,YAAY,mKAMvB,CAAA;AAEF,eAAO,MAAM,aAAa,mKAKxB,CAAA;AAEF,eAAO,MAAM,UAAU,2NAErB,CAAA;AAEF,eAAO,MAAM,UAAU,mKAOrB,CAAA;AAEF,eAAO,MAAM,WAAW,yMAEtB,CAAA;AAEF,eAAO,MAAM,WAAW,2LAEtB,CAAA;AAEF,eAAO,MAAM,cAAc,8KAEzB,CAAA;AAEF,eAAO,MAAM,UAAU,oLAErB,CAAA;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;cAKtB,CAAA;AAEF,eAAO,MAAM,eAAe,mKAE1B,CAAA"}

package/dist/types/components/select/types.d.ts

@@ -1,14 +1,14 @@
-export interface SelectOption {
+export type SelectOption<T extends object = object> = {
     value: string | number;
     label: string;
     description?: string;
     disabled?: boolean;
-}
-export interface SelectOptionGroup {
+} & T;
+export interface SelectOptionGroup<T extends SelectOption = SelectOption> {
     label: string;
-    options: SelectOption[];
+    options: T[];
 }
-export type SelectItems = Array<SelectOption | SelectOptionGroup>;
-export declare function isOptionGroup(item: SelectOption | SelectOptionGroup): item is SelectOptionGroup;
-export declare function flattenOptions(items: SelectItems): SelectOption[];
+export type SelectItems<T extends SelectOption = SelectOption> = Array<T | SelectOptionGroup<T>>;
+export declare function isOptionGroup<T extends SelectOption>(item: T | SelectOptionGroup<T>): item is SelectOptionGroup<T>;
+export declare function flattenOptions<T extends SelectOption>(items: SelectItems<T>): T[];
 //# sourceMappingURL=types.d.ts.map

package/dist/types/components/select/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/select/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,YAAY,EAAE,CAAA;CACxB;AAED,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,YAAY,GAAG,iBAAiB,CAAC,CAAA;AAEjE,wBAAgB,aAAa,CAAC,IAAI,EAAE,YAAY,GAAG,iBAAiB,GAAG,IAAI,IAAI,iBAAiB,CAE/F;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,WAAW,GAAG,YAAY,EAAE,CAEjE"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/select/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IACpD,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,CAAC,CAAA;AAEL,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,YAAY,GAAG,YAAY;IACtE,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,CAAC,EAAE,CAAA;CACb;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,YAAY,GAAG,YAAY,IAAI,KAAK,CAAC,CAAC,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAA;AAEhG,wBAAgB,aAAa,CAAC,CAAC,SAAS,YAAY,EAClD,IAAI,EAAE,CAAC,GAAG,iBAAiB,CAAC,CAAC,CAAC,GAC7B,IAAI,IAAI,iBAAiB,CAAC,CAAC,CAAC,CAE9B;AAED,wBAAgB,cAAc,CAAC,CAAC,SAAS,YAAY,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAEjF"}

package/dist/types/components/tabs/TabsTrigger.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabsTrigger.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/TabsTrigger.vue"],"names":[],"mappings":"AA8CE,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;AAwEJ,QAAA,IAAI,QAAQ,IAAY,CAAE;AAC1B,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAKhD,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"TabsTrigger.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/TabsTrigger.vue"],"names":[],"mappings":"AAmDE,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;AA0EJ,QAAA,IAAI,QAAQ,IAAY,CAAE;AAC1B,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAKhD,QAAA,MAAM,UAAU,kSAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/types/components/textarea/Textarea.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/textarea/Textarea.vue"],"names":[],"mappings":"AAwHE,OAAO,EAA2B,KAAK,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAcpF,KAAK,WAAW,GAAG;IACf,OAAO,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAA;IACrC,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAA;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,GAAG;QAAE,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC3D,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAA;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;AAiDN,KAAK,gBAAgB,GAAG;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAMF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AAsFxD,QAAA,MAAM,YAAY;;;;;UArJL,MAAM;6EAyJjB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"Textarea.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/textarea/Textarea.vue"],"names":[],"mappings":"AAgFE,OAAO,EAA2B,KAAK,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAcpF,KAAK,WAAW,GAAG;IACf,OAAO,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAA;IACrC,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAA;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,GAAG;QAAE,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC3D,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAA;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;AAWN,KAAK,gBAAgB,GAAG;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAMF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AAsFxD,QAAA,MAAM,YAAY;;;;;UA/GL,MAAM;6EAmHjB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/types/components/textarea/composables/useTextareaSizing.d.ts

@@ -0,0 +1,27 @@
+import { type Ref } from 'vue';
+import type { TextareaVariants } from '../textarea.variants';
+interface TextareaSizingProps {
+    autosize?: boolean | {
+        minRows?: number;
+        maxRows?: number;
+    };
+    rows: number;
+    size?: TextareaVariants['size'];
+    variant?: TextareaVariants['variant'];
+}
+export declare function useTextareaSizing(props: TextareaSizingProps, model: Ref<string | undefined>): {
+    el: import("vue").ShallowRef<HTMLTextAreaElement | null, HTMLTextAreaElement | null>;
+    area: import("vue").ShallowRef<{
+        viewport?: HTMLElement;
+    } | undefined, {
+        viewport?: HTMLElement;
+    } | undefined>;
+    bounds: import("vue").ComputedRef<{
+        min: number;
+        max: number | undefined;
+    }>;
+    fit: () => void;
+    focus: (event: MouseEvent) => void;
+};
+export {};
+//# sourceMappingURL=useTextareaSizing.d.ts.map

package/dist/types/components/textarea/composables/useTextareaSizing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTextareaSizing.d.ts","sourceRoot":"","sources":["../../../../../src/components/textarea/composables/useTextareaSizing.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoD,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AAEhF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAE5D,UAAU,mBAAmB;IAC3B,QAAQ,CAAC,EAAE,OAAO,GAAG;QAAE,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC3D,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAA;IAC/B,OAAO,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAA;CACtC;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,GAAG,CAAC,MAAM,GAAG,SAAS,CAAC;;;mBAErD,WAAW;;mBAAX,WAAW;;;;;;;mBA0B1B,UAAU;EAcjC"}

package/dist/types/components/textarea/textarea.variants.d.ts

@@ -1,8 +1,9 @@
 import { type VariantProps } from '../../lib/tv';
 export declare const textarea: import("tailwind-variants").TVReturnType<{
     variant: {
-        primary: "border-line [--hn-field-bg:var(--hn-surface)] [--hn-field-shadow:var(--hn-shadow-sm)]";
-        secondary: "border-transparent [--hn-field-bg:var(--hn-bg-inset)]";
+        bare: "rounded-none border-0 bg-transparent shadow-none outline-none [--hn-textarea-border-w:0px]";
+        primary: "hn-field border-line [--hn-field-bg:var(--hn-surface)] [--hn-field-shadow:var(--hn-shadow-sm)]";
+        secondary: "hn-field border-transparent [--hn-field-bg:var(--hn-bg-inset)]";
     };
     size: {
         sm: "text-sm [--hn-textarea-h:var(--hn-control-h-sm)] [--hn-textarea-px:var(--hn-control-px-sm)]";
@@ -19,8 +20,9 @@ export declare const textarea: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, string[], {
     variant: {
-        primary: "border-line [--hn-field-bg:var(--hn-surface)] [--hn-field-shadow:var(--hn-shadow-sm)]";
-        secondary: "border-transparent [--hn-field-bg:var(--hn-bg-inset)]";
+        bare: "rounded-none border-0 bg-transparent shadow-none outline-none [--hn-textarea-border-w:0px]";
+        primary: "hn-field border-line [--hn-field-bg:var(--hn-surface)] [--hn-field-shadow:var(--hn-shadow-sm)]";
+        secondary: "hn-field border-transparent [--hn-field-bg:var(--hn-bg-inset)]";
     };
     size: {
         sm: "text-sm [--hn-textarea-h:var(--hn-control-h-sm)] [--hn-textarea-px:var(--hn-control-px-sm)]";
@@ -37,8 +39,9 @@ export declare const textarea: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        primary: "border-line [--hn-field-bg:var(--hn-surface)] [--hn-field-shadow:var(--hn-shadow-sm)]";
-        secondary: "border-transparent [--hn-field-bg:var(--hn-bg-inset)]";
+        bare: "rounded-none border-0 bg-transparent shadow-none outline-none [--hn-textarea-border-w:0px]";
+        primary: "hn-field border-line [--hn-field-bg:var(--hn-surface)] [--hn-field-shadow:var(--hn-shadow-sm)]";
+        secondary: "hn-field border-transparent [--hn-field-bg:var(--hn-bg-inset)]";
     };
     size: {
         sm: "text-sm [--hn-textarea-h:var(--hn-control-h-sm)] [--hn-textarea-px:var(--hn-control-px-sm)]";

package/dist/types/components/textarea/textarea.variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.variants.d.ts","sourceRoot":"","sources":["../../../../src/components/textarea/textarea.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,cAAc,CAAA;AAEpD,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAkCnB,CAAA;AAEF,eAAO,MAAM,aAAa,mKAMxB,CAAA;AAEF,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAA"}
+{"version":3,"file":"textarea.variants.d.ts","sourceRoot":"","sources":["../../../../src/components/textarea/textarea.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,cAAc,CAAA;AAEpD,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAmCnB,CAAA;AAEF,eAAO,MAAM,aAAa,mKAMxB,CAAA;AAEF,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAA"}

package/dist/types/lib/anchored-overlay.d.ts

@@ -0,0 +1,23 @@
+import { type Ref } from 'vue';
+import type { DropdownMenuContentEmits } from 'reka-ui';
+export declare function useAnchoredOverlay(props: {
+    anchor?: HTMLElement | null;
+    modal: boolean;
+}, open: Ref<boolean | undefined>, emit: <K extends keyof DropdownMenuContentEmits>(event: K, ...args: DropdownMenuContentEmits[K]) => void, openAutoFocus?: (event: Event) => void): {
+    trigger: import("vue").ShallowRef<{
+        $el: HTMLElement;
+    } | null, {
+        $el: HTMLElement;
+    } | null>;
+    reference: import("vue").ComputedRef<HTMLElement | undefined>;
+    visible: import("vue").WritableComputedRef<boolean, boolean>;
+    events: {
+        onCloseAutoFocus: (event: Event) => void;
+        onInteractOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => void;
+        onPointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => void;
+        onFocusOutside: (event: import("reka-ui").FocusOutsideEvent) => void;
+        onEscapeKeyDown: (event: KeyboardEvent) => void;
+        onOpenAutoFocus?: ((event: Event) => void) | undefined;
+    };
+};
+//# sourceMappingURL=anchored-overlay.d.ts.map

package/dist/types/lib/anchored-overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"anchored-overlay.d.ts","sourceRoot":"","sources":["../../../src/lib/anchored-overlay.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyC,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AACrE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAEvD,wBAAgB,kBAAkB,CAChC,KAAK,EAAE;IAAE,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAAC,KAAK,EAAE,OAAO,CAAA;CAAE,EACtD,IAAI,EAAE,GAAG,CAAC,OAAO,GAAG,SAAS,CAAC,EAC9B,IAAI,EAAE,CAAC,CAAC,SAAS,MAAM,wBAAwB,EAC7C,KAAK,EAAE,CAAC,EACR,GAAG,IAAI,EAAE,wBAAwB,CAAC,CAAC,CAAC,KACjC,IAAI,EACT,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI;;aAEJ,WAAW;;aAAX,WAAW;;;;;;;;;;;;EAiG9C"}

package/dist/types/lib/caret.d.ts

@@ -1,6 +1,2 @@
-/**
- * 量出 textarea 光标所在行的顶边（相对 textarea 自身的边框盒）。
- * 原生没有光标几何 API，只能用同排版的镜像块把光标前的文字排一遍。
- */
 export declare function caretTop(node: HTMLTextAreaElement, at?: number): number;
 //# sourceMappingURL=caret.d.ts.map

package/dist/types/lib/caret.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"caret.d.ts","sourceRoot":"","sources":["../../../src/lib/caret.ts"],"names":[],"mappings":"AAwBA;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,mBAAmB,EAAE,EAAE,SAAoB,GAAG,MAAM,CAuBlF"}
+{"version":3,"file":"caret.d.ts","sourceRoot":"","sources":["../../../src/lib/caret.ts"],"names":[],"mappings":"AAwBA,wBAAgB,QAAQ,CAAC,IAAI,EAAE,mBAAmB,EAAE,EAAE,SAAoB,GAAG,MAAM,CAuBlF"}

package/dist/types/lib/collapse.d.ts

@@ -1,3 +1,4 @@
+import { type ComponentPublicInstance } from 'vue';
 export type CollapseAxis = 'y' | 'x';
 export declare function collapseGapOf(parent: Element | null, axis?: CollapseAxis): string;
 export declare function writeCollapseGap(el: Element, parent: Element | null, axis?: CollapseAxis): void;
@@ -11,4 +12,5 @@ export declare function useCollapseHooks(axis?: CollapseAxis): {
     afterEnter: (el: Element) => void;
     beforeLeave: (el: Element) => void;
 };
+export declare function useCollapseGap(): import("vue").ShallowRef<ComponentPublicInstance | null, ComponentPublicInstance | null>;
 //# sourceMappingURL=collapse.d.ts.map

package/dist/types/lib/collapse.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collapse.d.ts","sourceRoot":"","sources":["../../../src/lib/collapse.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,YAAY,GAAG,GAAG,GAAG,GAAG,CAAA;AAEpC,wBAAgB,aAAa,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,EAAE,IAAI,GAAE,YAAkB,UAM7E;AAED,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,GAAG,IAAI,EAAE,IAAI,GAAE,YAAkB,QAE7F;AAED,wBAAgB,aAAa,CAAC,IAAI,GAAE,YAAkB,EAAE,QAAQ,CAAC,EAAE,MAAM,OAAO,GAAG,IAAI;sBAC5D,OAAO;qBAQR,OAAO;sBAJN,OAAO;EASjC;AAED,wBAAgB,gBAAgB,CAAC,IAAI,GAAE,YAAkB;sBAf9B,OAAO;qBAQR,OAAO;sBAJN,OAAO;EAuBjC"}
+{"version":3,"file":"collapse.d.ts","sourceRoot":"","sources":["../../../src/lib/collapse.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,uBAAuB,EAC7B,MAAM,KAAK,CAAA;AAEZ,MAAM,MAAM,YAAY,GAAG,GAAG,GAAG,GAAG,CAAA;AAEpC,wBAAgB,aAAa,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,EAAE,IAAI,GAAE,YAAkB,UAM7E;AAED,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,GAAG,IAAI,EAAE,IAAI,GAAE,YAAkB,QAE7F;AAED,wBAAgB,aAAa,CAAC,IAAI,GAAE,YAAkB,EAAE,QAAQ,CAAC,EAAE,MAAM,OAAO,GAAG,IAAI;sBAC5D,OAAO;qBAQR,OAAO;sBAJN,OAAO;EASjC;AAED,wBAAgB,gBAAgB,CAAC,IAAI,GAAE,YAAkB;sBAf9B,OAAO;qBAQR,OAAO;sBAJN,OAAO;EAuBjC;AAED,wBAAgB,cAAc,6FAY7B"}

package/dist/types/lib/field-focus.d.ts

@@ -1,6 +1,2 @@
-/**
- * 点击输入面里非交互的部分（附属格、前后缀、空白）时把焦点交给最近的输入区，返回被聚焦的输入区；点击落在交互元素上或者没有可聚焦的输入区时返回 null。
- * 点击所在的段自己含输入区时只认它、不动光标（段内的处理器已经定过位）；否则先向后找，再向前找；落在点击位置之后的输入区把光标放到开头，之前的放到末尾。
- */
 export declare function focusFieldFrom(root: HTMLElement, target: HTMLElement): HTMLInputElement | HTMLTextAreaElement | null;
 //# sourceMappingURL=field-focus.d.ts.map

package/dist/types/lib/field-focus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field-focus.d.ts","sourceRoot":"","sources":["../../../src/lib/field-focus.ts"],"names":[],"mappings":"AAUA;;;GAGG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,iDAyBpE"}
+{"version":3,"file":"field-focus.d.ts","sourceRoot":"","sources":["../../../src/lib/field-focus.ts"],"names":[],"mappings":"AAUA,wBAAgB,cAAc,CAAC,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,iDAyBpE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hina-ui/vue",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "An elegant, restrained Vue 3 component library built on Reka UI and Tailwind CSS v4.",
   "keywords": [
     "vue",

package/src/components/accordion/AccordionContent.vue

@@ -1,23 +1,14 @@
 <script setup lang="ts">
-  import { onBeforeUpdate, onMounted, shallowRef, type ComponentPublicInstance } from 'vue'
   import { AccordionContent as RekaAccordionContent } from 'reka-ui'
   import { cn } from '../../lib/cn'
-  import { writeCollapseGap } from '../../lib/collapse'
+  import { useCollapseGap } from '../../lib/collapse'
   import { accordionContent } from './accordion.variants'
 
   defineOptions({ name: 'HnAccordionContent' })
 
   const props = defineProps<{ class?: string }>()
 
-  const content = shallowRef<ComponentPublicInstance | null>(null)
-
-  function measure() {
-    const el = content.value?.$el as Element | undefined
-    if (el instanceof Element) writeCollapseGap(el, el.parentElement)
-  }
-
-  onMounted(measure)
-  onBeforeUpdate(measure)
+  const content = useCollapseGap()
 </script>
 
 <template>

package/src/components/alert-dialog/AlertDialog.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-  import { ref } from 'vue'
   import {
     AlertDialogCancel,
     AlertDialogContent,
@@ -17,6 +16,14 @@
   import { dialogCard, dialogWrapper } from '../dialog/dialog.variants'
   import Heading from '../heading/Heading.vue'
   import Text from '../text/Text.vue'
+  import { useAlertDialogConfirm } from './composables/useAlertDialogConfirm'
+  import { useConfirmDelay } from './composables/useConfirmDelay'
+  import {
+    alertDialogHeader,
+    alertDialogContent,
+    alertDialogActions,
+    alertDialogCountdown,
+  } from './alert-dialog.variants'
 
   defineOptions({ name: 'HnAlertDialog' })
 
@@ -25,6 +32,7 @@
       title: string
       description?: string
       confirmText?: string
+      confirmDelay?: number
       cancelText?: string
       tone?: 'accent' | 'danger'
       size?: 'sm' | 'md'
@@ -32,31 +40,19 @@
       onConfirm?: () => unknown
       class?: string
     }>(),
-    { tone: 'accent', size: 'sm' },
+    { tone: 'accent', size: 'sm', confirmDelay: 0 },
   )
-  const emit = defineEmits<{ cancel: [] }>()
+  const emit = defineEmits<{ cancel: []; error: [error: unknown] }>()
 
   const open = defineModel<boolean>('open')
-  const busy = ref(false)
   const t = useUiLocale()
-
-  function guard(event: Event) {
-    if (busy.value) event.preventDefault()
-  }
-
-  async function confirm() {
-    if (busy.value) return
-    const result = props.onConfirm?.()
-    if (result instanceof Promise) {
-      busy.value = true
-      try {
-        await result
-      } finally {
-        busy.value = false
-      }
-    }
-    open.value = false
-  }
+  const remaining = useConfirmDelay(open, () => props.confirmDelay)
+  const { busy, guard, confirm } = useAlertDialogConfirm(
+    props,
+    open,
+    error => emit('error', error),
+    () => remaining.value > 0,
+  )
 </script>
 
 <template>
@@ -66,14 +62,7 @@
     </AlertDialogTrigger>
     <AlertDialogPortal>
       <AlertDialogOverlay class="hn-scrim" />
-      <div
-        :class="
-          cn(
-            'pointer-events-none fixed inset-0 z-(--hn-z-overlay) grid',
-            dialogWrapper({ placement: props.placement ?? 'auto' }),
-          )
-        "
-      >
+      <div :class="dialogWrapper({ placement: props.placement ?? 'auto' })">
         <AlertDialogContent as-child @escape-key-down="guard">
           <Card
             :padded="false"
@@ -81,14 +70,12 @@
             :aria-busy="busy || undefined"
             :class="
               cn(
-                'pointer-events-auto flex w-full flex-col gap-4 shadow-lg outline-none',
-                'py-(--hn-panel-p)',
                 dialogCard({ placement: props.placement ?? 'auto', size: props.size }),
                 props.class,
               )
             "
           >
-            <div class="flex min-w-0 flex-col gap-1.5 px-(--hn-panel-p)">
+            <div :class="alertDialogHeader()">
               <AlertDialogTitle as-child>
                 <Heading :level="2" size="lg">{{ props.title }}</Heading>
               </AlertDialogTitle>
@@ -96,17 +83,18 @@
                 <Text tone="muted">{{ props.description }}</Text>
               </AlertDialogDescription>
             </div>
-            <div v-if="$slots.content" class="px-(--hn-panel-p)">
+            <div v-if="$slots.content" :class="alertDialogContent()">
               <slot name="content" />
             </div>
-            <div class="flex justify-end gap-(--hn-inline-gap) px-(--hn-panel-p)">
+            <div :class="alertDialogActions()">
               <AlertDialogCancel as-child>
                 <Button variant="soft" tone="neutral" :disabled="busy" @click="emit('cancel')">
                   {{ props.cancelText ?? t.common.cancel }}
                 </Button>
               </AlertDialogCancel>
-              <Button :tone="props.tone" :loading="busy" @click="confirm">
+              <Button :tone="props.tone" :loading="busy" :disabled="remaining > 0" @click="confirm">
                 {{ props.confirmText ?? t.common.confirm }}
+                <span v-if="remaining > 0" :class="alertDialogCountdown()">({{ remaining }})</span>
               </Button>
             </div>
           </Card>

package/src/components/alert-dialog/alert-dialog.variants.ts

@@ -0,0 +1,17 @@
+import { tv } from '../../lib/tv'
+
+export const alertDialogHeader = tv({
+  base: 'flex min-w-0 flex-col gap-1.5 px-(--hn-panel-p)',
+})
+
+export const alertDialogContent = tv({
+  base: 'px-(--hn-panel-p)',
+})
+
+export const alertDialogActions = tv({
+  base: 'flex justify-end gap-(--hn-inline-gap) px-(--hn-panel-p)',
+})
+
+export const alertDialogCountdown = tv({
+  base: 'tabular-nums',
+})

package/src/components/alert-dialog/composables/useAlertDialogConfirm.ts

@@ -0,0 +1,29 @@
+import { ref, type Ref } from 'vue'
+
+export function useAlertDialogConfirm(
+  props: { onConfirm?: () => unknown },
+  open: Ref<boolean | undefined>,
+  onError: (error: unknown) => void,
+  blocked: () => boolean = () => false,
+) {
+  const busy = ref(false)
+
+  function guard(event: Event) {
+    if (busy.value) event.preventDefault()
+  }
+
+  async function confirm() {
+    if (!open.value || busy.value || blocked()) return
+    busy.value = true
+    try {
+      await props.onConfirm?.()
+      open.value = false
+    } catch (error) {
+      onError(error)
+    } finally {
+      busy.value = false
+    }
+  }
+
+  return { busy, guard, confirm }
+}

package/src/components/alert-dialog/composables/useConfirmDelay.ts

@@ -0,0 +1,37 @@
+import { onMounted, onScopeDispose, ref, watch, type Ref } from 'vue'
+
+export function useConfirmDelay(open: Ref<boolean | undefined>, delay: () => number) {
+  const remaining = ref(0)
+  let mounted = false
+  let timer: ReturnType<typeof setTimeout> | undefined
+
+  function stop() {
+    clearTimeout(timer)
+    timer = undefined
+  }
+
+  function restart() {
+    stop()
+    if (!open.value) return
+    const seconds = Math.ceil(delay())
+    remaining.value = Number.isFinite(seconds) && seconds > 0 ? seconds : 0
+    if (!mounted || !remaining.value) return
+
+    const deadline = performance.now() + remaining.value * 1000
+    function tick() {
+      const milliseconds = deadline - performance.now()
+      remaining.value = Math.max(0, Math.ceil(milliseconds / 1000))
+      timer = remaining.value > 0 ? setTimeout(tick, Math.min(1000, milliseconds)) : undefined
+    }
+    tick()
+  }
+
+  watch([open, delay], restart, { immediate: true, flush: 'sync' })
+  onMounted(() => {
+    mounted = true
+    restart()
+  })
+  onScopeDispose(stop)
+
+  return remaining
+}

package/src/components/anchor/Anchor.vue

@@ -43,6 +43,7 @@
         <Highlight
           v-if="span"
           as="li"
+          axis="y"
           role="presentation"
           :style="{ gridRow: span }"
           class="bg-accent col-start-1 -ms-px w-0.5 self-stretch justify-self-start rounded-full"

package/src/components/avatar/AvatarGroup.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-  import { computed, useSlots, Fragment, type VNode } from 'vue'
+  import { computed, useSlots } from 'vue'
   import { cn } from '../../lib/cn'
   import Avatar from './Avatar.vue'
+  import { flattenChildren } from './utils/children'
   import type { AvatarVariants } from './avatar.variants'
   import { avatarGroupItem } from './avatar-group.variants'
   import { provideAvatarGroup } from './context'
@@ -16,13 +17,7 @@
 
   const slots = useSlots()
 
-  function flatten(nodes: VNode[] | undefined): VNode[] {
-    return (nodes ?? []).flatMap(node =>
-      node.type === Fragment ? flatten(node.children as VNode[]) : [node],
-    )
-  }
-
-  const children = computed(() => flatten(slots.default?.()))
+  const children = computed(() => flattenChildren(slots.default?.()))
   const visible = computed(() =>
     props.max && props.max > 0 ? children.value.slice(0, props.max) : children.value,
   )

package/src/components/avatar/utils/children.ts

@@ -0,0 +1,7 @@
+import { Fragment, type VNode } from 'vue'
+
+export function flattenChildren(nodes: VNode[] | undefined): VNode[] {
+  return (nodes ?? []).flatMap(node =>
+    node.type === Fragment ? flattenChildren(node.children as VNode[]) : [node],
+  )
+}

package/src/components/checkbox-group/CheckboxGroup.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends SelectOption = SelectOption">
   import { CheckboxGroupRoot } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { shieldFormField, useFieldControl } from '../form-field/context'
@@ -14,7 +14,7 @@
   defineOptions({ name: 'HnCheckboxGroup' })
 
   const props = defineProps<{
-    options: SelectOption[]
+    options: T[]
     orientation?: CheckboxGroupVariants['orientation']
     size?: CheckboxVariants['size']
     controlPlacement?: CheckboxVariants['controlPlacement']
@@ -32,7 +32,7 @@
   })
   shieldFormField()
 
-  defineSlots<{ option(props: { option: SelectOption }): unknown }>()
+  defineSlots<{ option?(props: { option: T }): unknown }>()
 </script>
 
 <template>