@ansh-ui/vue 0.2.0

package/dist/navigation.cjs

@@ -0,0 +1,48 @@
+'use strict';
+
+var chunkKCA7RNJ4_cjs = require('./chunk-KCA7RNJ4.cjs');
+var chunkSHX2JGID_cjs = require('./chunk-SHX2JGID.cjs');
+require('./chunk-EISHOEB6.cjs');
+require('./chunk-774WBLDR.cjs');
+require('./chunk-6732H4BQ.cjs');
+
+
+
+Object.defineProperty(exports, "Accordion", {
+  enumerable: true,
+  get: function () { return chunkKCA7RNJ4_cjs.Accordion; }
+});
+Object.defineProperty(exports, "Breadcrumbs", {
+  enumerable: true,
+  get: function () { return chunkKCA7RNJ4_cjs.Breadcrumbs; }
+});
+Object.defineProperty(exports, "Collapsible", {
+  enumerable: true,
+  get: function () { return chunkKCA7RNJ4_cjs.Collapsible; }
+});
+Object.defineProperty(exports, "DisclosureList", {
+  enumerable: true,
+  get: function () { return chunkKCA7RNJ4_cjs.DisclosureList; }
+});
+Object.defineProperty(exports, "NavigationMenu", {
+  enumerable: true,
+  get: function () { return chunkKCA7RNJ4_cjs.NavigationMenu; }
+});
+Object.defineProperty(exports, "Stepper", {
+  enumerable: true,
+  get: function () { return chunkKCA7RNJ4_cjs.Stepper; }
+});
+Object.defineProperty(exports, "Tabs", {
+  enumerable: true,
+  get: function () { return chunkKCA7RNJ4_cjs.Tabs; }
+});
+Object.defineProperty(exports, "AppShell", {
+  enumerable: true,
+  get: function () { return chunkSHX2JGID_cjs.AppShell; }
+});
+Object.defineProperty(exports, "Sidebar", {
+  enumerable: true,
+  get: function () { return chunkSHX2JGID_cjs.Sidebar; }
+});
+//# sourceMappingURL=navigation.cjs.map
+//# sourceMappingURL=navigation.cjs.map

package/dist/navigation.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"navigation.cjs"}

package/dist/navigation.d.cts

@@ -0,0 +1,515 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+import { S as SlotContent } from './utils-IKPG3zcC.cjs';
+export { A as AppShell, N as NavItem, a as NavSection, S as Sidebar } from './sidebar-CQqEmpid.cjs';
+
+interface TabItem {
+    id: string;
+    label: SlotContent;
+    icon?: SlotContent;
+    /** Count or status shown after the label. */
+    badge?: SlotContent;
+    disabled?: boolean;
+    content?: SlotContent;
+}
+type TabsVariant = 'underline' | 'pill' | 'enclosed';
+type TabsOrientation = 'horizontal' | 'vertical';
+type TabsSize = 'sm' | 'md';
+/**
+ * Tabs — the Vue counterpart of `@ansh-ui/react`'s `Tabs`.
+ *
+ * The full WAI-ARIA tab pattern: a single tab stop for the whole list (roving tabindex, via
+ * `useRovingFocus`), arrow keys to move between tabs, Home/End to jump to the ends, and
+ * `aria-controls`/`aria-labelledby` linking each tab to its panel in both directions.
+ *
+ * `useRovingFocus`'s `items` ref only receives an element for *enabled* tabs — a disabled tab's slot
+ * is left `null`, which is exactly what the hook filters out, so disabled tabs are skipped during
+ * arrow-key and Home/End navigation without any extra bookkeeping here.
+ *
+ * Panels are unmounted when inactive rather than hidden (the render function simply never creates
+ * the `v-if`-equivalent branch), matching the React version's reasoning: hiding keeps the whole tree
+ * mounted, so timers keep running, media keeps buffering and forms keep their state — the last of
+ * which sounds desirable until a hidden required field blocks submission with no visible error.
+ *
+ * `v-model` selects the active tab id. Leave it unbound with `default-value` for an uncontrolled
+ * tab bar.
+ */
+declare const Tabs: vue.DefineComponent<vue.ExtractPropTypes<{
+    items: {
+        type: PropType<readonly TabItem[]>;
+        required: true;
+    };
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    defaultValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    variant: {
+        type: PropType<TabsVariant>;
+        default: string;
+    };
+    orientation: {
+        type: PropType<TabsOrientation>;
+        default: string;
+    };
+    size: {
+        type: PropType<TabsSize>;
+        default: string;
+    };
+    /** Stretch tabs to fill the available width. */
+    fitted: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Activate on arrow-key focus, rather than requiring Enter/Space.
+     *
+     * Automatic is the ARIA-preferred default for cheap panels. Set `false` when switching a tab
+     * triggers a fetch — arrowing past three tabs would fire three requests.
+     */
+    activateOnFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Accessible name for the tab list. */
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    items: {
+        type: PropType<readonly TabItem[]>;
+        required: true;
+    };
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    defaultValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    variant: {
+        type: PropType<TabsVariant>;
+        default: string;
+    };
+    orientation: {
+        type: PropType<TabsOrientation>;
+        default: string;
+    };
+    size: {
+        type: PropType<TabsSize>;
+        default: string;
+    };
+    /** Stretch tabs to fill the available width. */
+    fitted: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Activate on arrow-key focus, rather than requiring Enter/Space.
+     *
+     * Automatic is the ARIA-preferred default for cheap panels. Set `false` when switching a tab
+     * triggers a fetch — arrowing past three tabs would fire three requests.
+     */
+    activateOnFocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Accessible name for the tab list. */
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    size: TabsSize;
+    orientation: TabsOrientation;
+    modelValue: string;
+    defaultValue: string;
+    variant: TabsVariant;
+    fitted: boolean;
+    activateOnFocus: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+interface Crumb {
+    label: SlotContent;
+    href?: string;
+    icon?: SlotContent;
+    onClick?: () => void;
+}
+/**
+ * A breadcrumb trail — the Vue counterpart of `@ansh-ui/react`'s `Breadcrumbs`.
+ *
+ * `<nav aria-label="Breadcrumb">` around an ordered list, with the last item marked
+ * `aria-current="page"` and rendered as text rather than a link. Making the current page a link to
+ * itself is a small thing that wastes a keyboard user's time on every page.
+ *
+ * Separators are `aria-hidden`, so the trail reads as "Home, Projects, Invoice 401" rather than
+ * "Home slash Projects slash".
+ */
+declare const Breadcrumbs: vue.DefineComponent<vue.ExtractPropTypes<{
+    items: {
+        type: PropType<readonly Crumb[]>;
+        required: true;
+    };
+    /** Collapse the middle when there are more than this many. Default `Infinity`. */
+    maxItems: {
+        type: NumberConstructor;
+        default: number;
+    };
+    separator: {
+        type: PropType<SlotContent>;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    items: {
+        type: PropType<readonly Crumb[]>;
+        required: true;
+    };
+    /** Collapse the middle when there are more than this many. Default `Infinity`. */
+    maxItems: {
+        type: NumberConstructor;
+        default: number;
+    };
+    separator: {
+        type: PropType<SlotContent>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    separator: SlotContent;
+    maxItems: number;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+interface Step {
+    id: string;
+    label: SlotContent;
+    description?: SlotContent;
+    /** Marks the step failed — validation errors on a wizard page. */
+    error?: boolean;
+    /** Allow jumping to this step directly. */
+    clickable?: boolean;
+}
+type StepperOrientation = 'horizontal' | 'vertical';
+/**
+ * A progress stepper for multi-page flows — checkout, onboarding, approvals.
+ *
+ * The state of each step is announced in text, not just drawn: `aria-current="step"` on the active
+ * one and a visually hidden "completed"/"current"/"not started" on each. A stepper that
+ * distinguishes its states with a tick glyph and a colour tells a screen-reader user nothing.
+ *
+ * `current` is always controlled by the caller — there is no uncontrolled mode, matching the React
+ * version. `update:current` fires (in addition to plain click handling) so `v-model:current` works
+ * for callers that want it.
+ */
+declare const Stepper: vue.DefineComponent<vue.ExtractPropTypes<{
+    steps: {
+        type: PropType<readonly Step[]>;
+        required: true;
+    };
+    /** Index of the current step. Steps before it are complete. */
+    current: {
+        type: NumberConstructor;
+        required: true;
+    };
+    orientation: {
+        type: PropType<StepperOrientation>;
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:current"[], "update:current", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    steps: {
+        type: PropType<readonly Step[]>;
+        required: true;
+    };
+    /** Index of the current step. Steps before it are complete. */
+    current: {
+        type: NumberConstructor;
+        required: true;
+    };
+    orientation: {
+        type: PropType<StepperOrientation>;
+        default: string;
+    };
+}>> & Readonly<{
+    "onUpdate:current"?: ((...args: any[]) => any) | undefined;
+}>, {
+    orientation: StepperOrientation;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+interface MegaMenuLink {
+    id: string;
+    label: string;
+    description?: string;
+    href?: string;
+    icon?: SlotContent;
+    onClick?: () => void;
+}
+interface MegaMenuColumn {
+    id: string;
+    heading?: string;
+    links: readonly MegaMenuLink[];
+}
+interface NavMenuItem {
+    id: string;
+    label: string;
+    href?: string;
+    /** Columns of links. Presence of this makes the item a dropdown rather than a link. */
+    columns?: readonly MegaMenuColumn[];
+    /** Promoted panel on the right of the dropdown — a featured post, a CTA. */
+    feature?: SlotContent;
+}
+/**
+ * A site navigation bar with mega-menu dropdowns — the Vue counterpart of `@ansh-ui/react`'s
+ * `NavigationMenu` (exported under that name even though the file is `nav-menu.ts`, matching the
+ * React source).
+ *
+ * The pattern marketing sites need and the one most likely to be built with hover alone. This one:
+ *
+ *  - opens on hover **and** on click/Enter, so it works with a keyboard and on touch;
+ *  - keeps the panel open while the pointer travels toward it, via a close delay;
+ *  - closes on Escape, returning focus to the trigger;
+ *  - marks each trigger `aria-expanded` and links it to its panel with `aria-controls`.
+ *
+ * The panel is a plain absolutely-positioned element rather than a `Teleport`. A mega menu is
+ * full-width and anchored to the bar, not to a point, so a portal's viewport-relative positioning
+ * would fight the layout rather than help it — the same reasoning the React version documents.
+ */
+declare const NavigationMenu: vue.DefineComponent<vue.ExtractPropTypes<{
+    items: {
+        type: PropType<readonly NavMenuItem[]>;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    items: {
+        type: PropType<readonly NavMenuItem[]>;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    label: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * Disclosure widgets — the Vue counterpart of `@ansh-ui/react`'s `disclosure.tsx`.
+ *
+ * The animation here is the interesting part. Height cannot be transitioned to `auto`, so the usual
+ * workarounds are measuring the content with JavaScript (a forced layout on every toggle, and wrong
+ * the moment the content reflows) or a `max-height` guess (which either clips tall content or makes
+ * short content ease over an invisible gap, so the timing looks wrong).
+ *
+ * `grid-template-rows: 0fr → 1fr` transitions to the content's intrinsic height with no JavaScript
+ * and no magic numbers — pure CSS keyed off the `data-state` attribute these components set. It
+ * needs the extra wrapper with `min-height: 0` — without that the grid child refuses to shrink below
+ * its content size and nothing animates. See `packages/react/src/styles/navigation.css`'s
+ * `.ansh-collapsible__region` / `.ansh-accordion__region` rules for the mechanism itself; nothing on the
+ * Vue side has to know about it beyond setting the same attribute.
+ */
+interface CollapsibleProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    trigger: SlotContent;
+    /** Render the trigger as-is rather than wrapping it in the styled button row. */
+    bare?: boolean;
+}
+/**
+ * A single show/hide region.
+ *
+ * `v-model:open` (or `default-open` for an uncontrolled one) drives the disclosed state, routed
+ * through `useControllableState` exactly like `Accordion`'s open-item set below.
+ */
+declare const Collapsible: vue.DefineComponent<vue.ExtractPropTypes<{
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    trigger: {
+        type: PropType<SlotContent>;
+        required: true;
+    };
+    bare: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:open"[], "update:open", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    trigger: {
+        type: PropType<SlotContent>;
+        required: true;
+    };
+    bare: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:open"?: ((...args: any[]) => any) | undefined;
+}>, {
+    open: boolean;
+    defaultOpen: boolean;
+    bare: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+interface AccordionItem {
+    id: string;
+    title: SlotContent;
+    /** Secondary line under the title. */
+    subtitle?: SlotContent;
+    icon?: SlotContent;
+    disabled?: boolean;
+    content: SlotContent;
+}
+type AccordionVariant = 'bordered' | 'separated' | 'plain';
+/**
+ * A stack of collapsible sections — the Vue counterpart of `@ansh-ui/react`'s `Accordion`.
+ *
+ * Headings are real `<h3>` elements wrapping the button, which is the ARIA-recommended structure: a
+ * screen-reader user navigating by heading finds each section, and the button inside carries the
+ * expanded state. A `<div>` with `role="button"` looks identical and is invisible to heading
+ * navigation.
+ *
+ * Arrow keys move between headers, and Home/End jump to the ends, via `useRovingFocus` bound to the
+ * accordion root. Unlike `Tabs`, this is *not* a single-tab-stop composite — every header stays in
+ * the normal Tab order (no `tabindex` is set on them at all), matching the ARIA APG accordion
+ * pattern, where arrow keys are an addition to Tab rather than a replacement for it.
+ * `useRovingFocus`'s `active()` getter is derived from `document.activeElement` rather than a stored
+ * index for exactly that reason — there is no single "selected" header the way `Tabs` has a selected
+ * tab, only whichever header currently has focus.
+ *
+ * `v-model` (or `default-value` for an uncontrolled accordion) is the array of open item ids, exactly
+ * like the React version's `value`/`defaultValue`.
+ */
+declare const Accordion: vue.DefineComponent<vue.ExtractPropTypes<{
+    items: {
+        type: PropType<readonly AccordionItem[]>;
+        required: true;
+    };
+    /** Allow several panels open at once. Default `false`. */
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: {
+        type: PropType<readonly string[]>;
+        default: undefined;
+    };
+    defaultValue: {
+        type: PropType<readonly string[]>;
+        default: () => never[];
+    };
+    variant: {
+        type: PropType<AccordionVariant>;
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    items: {
+        type: PropType<readonly AccordionItem[]>;
+        required: true;
+    };
+    /** Allow several panels open at once. Default `false`. */
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: {
+        type: PropType<readonly string[]>;
+        default: undefined;
+    };
+    defaultValue: {
+        type: PropType<readonly string[]>;
+        default: () => never[];
+    };
+    variant: {
+        type: PropType<AccordionVariant>;
+        default: string;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    modelValue: readonly string[];
+    defaultValue: readonly string[];
+    multiple: boolean;
+    variant: AccordionVariant;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+interface DisclosureListProps {
+    /** Simple show-more list — the pattern for "N more items". */
+    items: readonly SlotContent[];
+    /** How many to show before collapsing. Default `3`. */
+    initial?: number;
+    moreLabel?: (hidden: number) => string;
+    lessLabel?: string;
+}
+/** Show a few items with a "show N more" toggle. */
+declare const DisclosureList: vue.DefineComponent<vue.ExtractPropTypes<{
+    items: {
+        type: PropType<readonly SlotContent[]>;
+        required: true;
+    };
+    initial: {
+        type: NumberConstructor;
+        default: number;
+    };
+    moreLabel: {
+        type: PropType<(hidden: number) => string>;
+        default: (hidden: number) => string;
+    };
+    lessLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    items: {
+        type: PropType<readonly SlotContent[]>;
+        required: true;
+    };
+    initial: {
+        type: NumberConstructor;
+        default: number;
+    };
+    moreLabel: {
+        type: PropType<(hidden: number) => string>;
+        default: (hidden: number) => string;
+    };
+    lessLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    initial: number;
+    moreLabel: (hidden: number) => string;
+    lessLabel: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { Accordion, type AccordionItem, type AccordionVariant, Breadcrumbs, Collapsible, type CollapsibleProps, type Crumb, DisclosureList, type DisclosureListProps, type MegaMenuColumn, type MegaMenuLink, type NavMenuItem, NavigationMenu, type Step, Stepper, type StepperOrientation, type TabItem, Tabs, type TabsOrientation, type TabsSize, type TabsVariant };