@ansh-ui/react 0.2.0

package/dist/navigation.d.cts

@@ -0,0 +1,210 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+export { A as AppShell, a as AppShellProps, N as NavItem, b as NavSection, S as Sidebar, c as SidebarProps } from './sidebar-D-PafAXw.cjs';
+
+interface TabItem {
+    id: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    /** Count or status shown after the label. */
+    badge?: ReactNode;
+    disabled?: boolean;
+    content?: ReactNode;
+}
+interface TabsProps {
+    items: readonly TabItem[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    variant?: 'underline' | 'pill' | 'enclosed';
+    orientation?: 'horizontal' | 'vertical';
+    size?: 'sm' | 'md';
+    /** Stretch tabs to fill the available width. */
+    fitted?: boolean;
+    /**
+     * Activate on arrow-key focus, rather than requiring Enter.
+     *
+     * 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?: boolean;
+    /** Accessible name for the tab list. */
+    label: string;
+    className?: string;
+    children?: ReactNode;
+}
+/**
+ * Tabs.
+ *
+ * The full WAI-ARIA tab pattern: a single tab stop for the whole list (roving tabindex), 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.
+ *
+ * Panels are unmounted when inactive rather than hidden. Hiding keeps the whole tree mounted, which
+ * means 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.
+ */
+declare function Tabs({ items, value, defaultValue, onChange, variant, orientation, size, fitted, activateOnFocus, label, className, children, }: TabsProps): react.JSX.Element;
+
+interface Crumb {
+    label: ReactNode;
+    href?: string;
+    icon?: ReactNode;
+    onClick?: () => void;
+}
+interface BreadcrumbsProps {
+    items: readonly Crumb[];
+    /** Collapse the middle when there are more than this many. Default `Infinity`. */
+    maxItems?: number;
+    separator?: ReactNode;
+    className?: string;
+}
+/**
+ * A breadcrumb trail.
+ *
+ * `<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 function Breadcrumbs({ items, maxItems, separator, className, }: BreadcrumbsProps): react.JSX.Element;
+interface Step {
+    id: string;
+    label: ReactNode;
+    description?: ReactNode;
+    /** Marks the step failed — validation errors on a wizard page. */
+    error?: boolean;
+    /** Allow jumping to this step directly. */
+    clickable?: boolean;
+}
+interface StepperProps {
+    steps: readonly Step[];
+    /** Index of the current step. Steps before it are complete. */
+    current: number;
+    onStepChange?: (index: number) => void;
+    orientation?: 'horizontal' | 'vertical';
+    className?: string;
+}
+/**
+ * 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.
+ */
+declare function Stepper({ steps, current, onStepChange, orientation, className, }: StepperProps): react.JSX.Element;
+
+interface MegaMenuLink {
+    id: string;
+    label: string;
+    description?: string;
+    href?: string;
+    icon?: ReactNode;
+    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?: ReactNode;
+}
+interface NavigationMenuProps {
+    items: readonly NavMenuItem[];
+    label?: string;
+    className?: string;
+}
+/**
+ * A site navigation bar with mega-menu dropdowns.
+ *
+ * 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 portal. A mega menu is full-width
+ * and anchored to the bar, not to a point, so the portal's viewport-relative positioning would fight
+ * the layout rather than help it.
+ */
+declare function NavigationMenu({ items, label, className, }: NavigationMenuProps): react.JSX.Element;
+
+/**
+ * Disclosure widgets.
+ *
+ * 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. It needs the extra wrapper with `min-height: 0` — without that the grid
+ * child refuses to shrink below its content size and nothing animates.
+ */
+interface CollapsibleProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    trigger: ReactNode;
+    /** Render the trigger as-is rather than wrapping it in the styled button row. */
+    bare?: boolean;
+    className?: string;
+    children: ReactNode;
+}
+/** A single show/hide region. */
+declare function Collapsible({ open, defaultOpen, onOpenChange, trigger, bare, className, children, }: CollapsibleProps): react.JSX.Element;
+interface AccordionItem {
+    id: string;
+    title: ReactNode;
+    /** Secondary line under the title. */
+    subtitle?: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+    content: ReactNode;
+}
+interface AccordionProps {
+    items: readonly AccordionItem[];
+    /** Allow several panels open at once. Default `false`. */
+    multiple?: boolean;
+    /** Open panel ids. */
+    value?: readonly string[];
+    defaultValue?: readonly string[];
+    onChange?: (value: readonly string[]) => void;
+    variant?: 'bordered' | 'separated' | 'plain';
+    className?: string;
+}
+/**
+ * A stack of collapsible sections.
+ *
+ * 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 — the accordion is a composite
+ * widget, so this is expected behaviour rather than a nicety.
+ */
+declare function Accordion({ items, multiple, value, defaultValue, onChange, variant, className, }: AccordionProps): react.JSX.Element;
+interface DisclosureListProps {
+    /** Simple show-more list — the pattern for "N more items". */
+    items: readonly ReactNode[];
+    /** How many to show before collapsing. Default `3`. */
+    initial?: number;
+    moreLabel?: (hidden: number) => string;
+    lessLabel?: string;
+    className?: string;
+}
+/** Show a few items with a "show N more" toggle. */
+declare function DisclosureList({ items, initial, moreLabel, lessLabel, className, }: DisclosureListProps): react.JSX.Element;
+
+export { Accordion, type AccordionItem, type AccordionProps, Breadcrumbs, type BreadcrumbsProps, Collapsible, type CollapsibleProps, type Crumb, DisclosureList, type DisclosureListProps, type MegaMenuColumn, type MegaMenuLink, type NavMenuItem, NavigationMenu, type NavigationMenuProps, type Step, Stepper, type StepperProps, type TabItem, Tabs, type TabsProps };

package/dist/navigation.d.ts

@@ -0,0 +1,210 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+export { A as AppShell, a as AppShellProps, N as NavItem, b as NavSection, S as Sidebar, c as SidebarProps } from './sidebar-D-PafAXw.js';
+
+interface TabItem {
+    id: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    /** Count or status shown after the label. */
+    badge?: ReactNode;
+    disabled?: boolean;
+    content?: ReactNode;
+}
+interface TabsProps {
+    items: readonly TabItem[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    variant?: 'underline' | 'pill' | 'enclosed';
+    orientation?: 'horizontal' | 'vertical';
+    size?: 'sm' | 'md';
+    /** Stretch tabs to fill the available width. */
+    fitted?: boolean;
+    /**
+     * Activate on arrow-key focus, rather than requiring Enter.
+     *
+     * 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?: boolean;
+    /** Accessible name for the tab list. */
+    label: string;
+    className?: string;
+    children?: ReactNode;
+}
+/**
+ * Tabs.
+ *
+ * The full WAI-ARIA tab pattern: a single tab stop for the whole list (roving tabindex), 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.
+ *
+ * Panels are unmounted when inactive rather than hidden. Hiding keeps the whole tree mounted, which
+ * means 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.
+ */
+declare function Tabs({ items, value, defaultValue, onChange, variant, orientation, size, fitted, activateOnFocus, label, className, children, }: TabsProps): react.JSX.Element;
+
+interface Crumb {
+    label: ReactNode;
+    href?: string;
+    icon?: ReactNode;
+    onClick?: () => void;
+}
+interface BreadcrumbsProps {
+    items: readonly Crumb[];
+    /** Collapse the middle when there are more than this many. Default `Infinity`. */
+    maxItems?: number;
+    separator?: ReactNode;
+    className?: string;
+}
+/**
+ * A breadcrumb trail.
+ *
+ * `<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 function Breadcrumbs({ items, maxItems, separator, className, }: BreadcrumbsProps): react.JSX.Element;
+interface Step {
+    id: string;
+    label: ReactNode;
+    description?: ReactNode;
+    /** Marks the step failed — validation errors on a wizard page. */
+    error?: boolean;
+    /** Allow jumping to this step directly. */
+    clickable?: boolean;
+}
+interface StepperProps {
+    steps: readonly Step[];
+    /** Index of the current step. Steps before it are complete. */
+    current: number;
+    onStepChange?: (index: number) => void;
+    orientation?: 'horizontal' | 'vertical';
+    className?: string;
+}
+/**
+ * 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.
+ */
+declare function Stepper({ steps, current, onStepChange, orientation, className, }: StepperProps): react.JSX.Element;
+
+interface MegaMenuLink {
+    id: string;
+    label: string;
+    description?: string;
+    href?: string;
+    icon?: ReactNode;
+    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?: ReactNode;
+}
+interface NavigationMenuProps {
+    items: readonly NavMenuItem[];
+    label?: string;
+    className?: string;
+}
+/**
+ * A site navigation bar with mega-menu dropdowns.
+ *
+ * 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 portal. A mega menu is full-width
+ * and anchored to the bar, not to a point, so the portal's viewport-relative positioning would fight
+ * the layout rather than help it.
+ */
+declare function NavigationMenu({ items, label, className, }: NavigationMenuProps): react.JSX.Element;
+
+/**
+ * Disclosure widgets.
+ *
+ * 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. It needs the extra wrapper with `min-height: 0` — without that the grid
+ * child refuses to shrink below its content size and nothing animates.
+ */
+interface CollapsibleProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    trigger: ReactNode;
+    /** Render the trigger as-is rather than wrapping it in the styled button row. */
+    bare?: boolean;
+    className?: string;
+    children: ReactNode;
+}
+/** A single show/hide region. */
+declare function Collapsible({ open, defaultOpen, onOpenChange, trigger, bare, className, children, }: CollapsibleProps): react.JSX.Element;
+interface AccordionItem {
+    id: string;
+    title: ReactNode;
+    /** Secondary line under the title. */
+    subtitle?: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+    content: ReactNode;
+}
+interface AccordionProps {
+    items: readonly AccordionItem[];
+    /** Allow several panels open at once. Default `false`. */
+    multiple?: boolean;
+    /** Open panel ids. */
+    value?: readonly string[];
+    defaultValue?: readonly string[];
+    onChange?: (value: readonly string[]) => void;
+    variant?: 'bordered' | 'separated' | 'plain';
+    className?: string;
+}
+/**
+ * A stack of collapsible sections.
+ *
+ * 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 — the accordion is a composite
+ * widget, so this is expected behaviour rather than a nicety.
+ */
+declare function Accordion({ items, multiple, value, defaultValue, onChange, variant, className, }: AccordionProps): react.JSX.Element;
+interface DisclosureListProps {
+    /** Simple show-more list — the pattern for "N more items". */
+    items: readonly ReactNode[];
+    /** How many to show before collapsing. Default `3`. */
+    initial?: number;
+    moreLabel?: (hidden: number) => string;
+    lessLabel?: string;
+    className?: string;
+}
+/** Show a few items with a "show N more" toggle. */
+declare function DisclosureList({ items, initial, moreLabel, lessLabel, className, }: DisclosureListProps): react.JSX.Element;
+
+export { Accordion, type AccordionItem, type AccordionProps, Breadcrumbs, type BreadcrumbsProps, Collapsible, type CollapsibleProps, type Crumb, DisclosureList, type DisclosureListProps, type MegaMenuColumn, type MegaMenuLink, type NavMenuItem, NavigationMenu, type NavigationMenuProps, type Step, Stepper, type StepperProps, type TabItem, Tabs, type TabsProps };

package/dist/navigation.js

@@ -0,0 +1,7 @@
+'use client';
+export { Accordion, Breadcrumbs, Collapsible, DisclosureList, NavigationMenu, Stepper, Tabs } from './chunk-OLTS6G5M.js';
+export { AppShell, Sidebar } from './chunk-5CFQFMP5.js';
+import './chunk-LXCIXR5T.js';
+import './chunk-H34OXXJU.js';
+//# sourceMappingURL=navigation.js.map
+//# sourceMappingURL=navigation.js.map

package/dist/navigation.js.map

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

package/dist/overlay.cjs

@@ -0,0 +1,69 @@
+'use client';
+'use strict';
+
+var chunkC5JG6TMM_cjs = require('./chunk-C5JG6TMM.cjs');
+require('./chunk-C32LKF23.cjs');
+require('./chunk-XMXECSQO.cjs');
+require('./chunk-PO5DU3FU.cjs');
+require('./chunk-SFU5EPSN.cjs');
+
+
+
+Object.defineProperty(exports, "AlertDialog", {
+  enumerable: true,
+  get: function () { return chunkC5JG6TMM_cjs.AlertDialog; }
+});
+Object.defineProperty(exports, "CommandPalette", {
+  enumerable: true,
+  get: function () { return chunkC5JG6TMM_cjs.CommandPalette; }
+});
+Object.defineProperty(exports, "ContextMenu", {
+  enumerable: true,
+  get: function () { return chunkC5JG6TMM_cjs.ContextMenu; }
+});
+Object.defineProperty(exports, "Dialog", {
+  enumerable: true,
+  get: function () { return chunkC5JG6TMM_cjs.Dialog; }
+});
+Object.defineProperty(exports, "DialogFooter", {
+  enumerable: true,
+  get: function () { return chunkC5JG6TMM_cjs.DialogFooter; }
+});
+Object.defineProperty(exports, "Drawer", {
+  enumerable: true,
+  get: function () { return chunkC5JG6TMM_cjs.Drawer; }
+});
+Object.defineProperty(exports, "DropdownMenu", {
+  enumerable: true,
+  get: function () { return chunkC5JG6TMM_cjs.DropdownMenu; }
+});
+Object.defineProperty(exports, "HoverCard", {
+  enumerable: true,
+  get: function () { return chunkC5JG6TMM_cjs.HoverCard; }
+});
+Object.defineProperty(exports, "Popover", {
+  enumerable: true,
+  get: function () { return chunkC5JG6TMM_cjs.Popover; }
+});
+Object.defineProperty(exports, "PopoverContent", {
+  enumerable: true,
+  get: function () { return chunkC5JG6TMM_cjs.PopoverContent; }
+});
+Object.defineProperty(exports, "PopoverTrigger", {
+  enumerable: true,
+  get: function () { return chunkC5JG6TMM_cjs.PopoverTrigger; }
+});
+Object.defineProperty(exports, "Tooltip", {
+  enumerable: true,
+  get: function () { return chunkC5JG6TMM_cjs.Tooltip; }
+});
+Object.defineProperty(exports, "TooltipProvider", {
+  enumerable: true,
+  get: function () { return chunkC5JG6TMM_cjs.TooltipProvider; }
+});
+Object.defineProperty(exports, "useCommandShortcut", {
+  enumerable: true,
+  get: function () { return chunkC5JG6TMM_cjs.useCommandShortcut; }
+});
+//# sourceMappingURL=overlay.cjs.map
+//# sourceMappingURL=overlay.cjs.map

package/dist/overlay.cjs.map

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