@kismet-ux/constellation 1.9.0 → 1.11.0

package/dist/index-C-n7hM4G.d.ts

@@ -0,0 +1,354 @@
+import * as React from 'react';
+import React__default from 'react';
+import { d as SidebarSection, S as SidebarNavItem, B as BreadcrumbItemData, c as NavUserProps } from './nav-user-CJIcWKyY.js';
+import { R as RowProps } from './row-CuhTBQhK.js';
+import { I as Input } from './input-Cp5LET5i.js';
+import { b as TooltipContent, B as Button } from './tooltip-540OmbEG.js';
+import { VariantProps } from 'class-variance-authority';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+interface ColumnProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    children?: React__default.ReactNode;
+    el?: React__default.ElementType<React__default.HTMLAttributes<HTMLDivElement>>;
+    gap?: number;
+    full?: boolean;
+    fullHeight?: boolean;
+    align?: 'start' | 'center' | 'end';
+    flex?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+}
+
+interface ContainerProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    children?: React__default.ReactNode;
+    el?: React__default.ElementType<React__default.HTMLAttributes<HTMLDivElement>>;
+    styled?: boolean;
+    direction?: 'column' | 'row';
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+    full?: boolean;
+    rounded?: boolean | 'extra';
+    outlined?: boolean;
+    /** A border colour outside the theme scale; pairs with `outlined`. */
+    color?: string;
+    theme?: 'primary' | 'secondary' | 'success' | 'destructive' | 'warning' | 'info' | 'slate' | 'light-slate';
+    elevation?: number;
+    padding?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'none';
+    darkMode?: boolean;
+    gap?: number;
+    /**
+     * Draw one edge in `color` as a thick rule.
+     *
+     * A card that belongs to a category — an aisle, a shelf, a queue — reads
+     * faster with a coloured edge than with a full outline in the same hue,
+     * because the edge is a mark and the outline is a box. Pairs with `color`.
+     */
+    accent?: 'left' | 'right' | 'top' | 'bottom';
+    /** Colour for the `accent` edge. Falls back to `color`, then the divider. */
+    accentColor?: string;
+    /**
+     * Cap the content width and centre it.
+     *
+     * `text` for a column of prose, `content` for ordinary forms and lists,
+     * `wide` for dense work that earns the room. A CSS length is accepted for
+     * the case the scale does not cover. Without it a container simply fills its
+     * parent, which is right until the parent is a very large screen.
+     */
+    measure?: 'text' | 'content' | 'wide' | 'full' | (string & {});
+    /**
+     * Fade the container in shortly after mount.
+     *
+     * Off by default. Only sensible for something that appears once — a hero
+     * panel, an empty state. Anything that repeats or is toggled should not use
+     * it: the container renders invisible until the timer fires.
+     */
+    appear?: boolean;
+}
+
+type GridColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+interface GridProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    children?: React__default.ReactNode;
+    /** Number of columns (1–12). Default: 1. */
+    columns?: GridColumns;
+    /** Responsive column overrides. Each breakpoint sets the column count at that width and above. */
+    sm?: GridColumns;
+    md?: GridColumns;
+    lg?: GridColumns;
+    xl?: GridColumns;
+    /** Gap between items (0–12, maps to --size-N tokens). Default: 2. */
+    gap?: number;
+    /**
+     * A minimum track width — `repeat(auto-fit, minmax(<min>, 1fr))`.
+     *
+     * For a grid whose column COUNT is not the interesting question: "these
+     * boxes hold one word each, fit as many as will read" is a statement about
+     * the content, and it reflows without naming a breakpoint. Takes precedence
+     * over `columns` and the responsive overrides, which it replaces.
+     */
+    min?: string;
+    /**
+     * With `min`, keep empty tracks instead of collapsing them (`auto-fill`
+     * rather than `auto-fit`).
+     *
+     * The difference only shows when the items do not fill the row. A grid of
+     * CARDS wants this: one card in an aisle should stay card-sized, not stretch
+     * to the full width. A grid of form FIELDS wants the default, where two
+     * fields share the row rather than leaving a hole.
+     */
+    fill?: boolean;
+    /**
+     * Pack items by height instead of by row, so a short item does not leave a
+     * hole under a tall neighbour.
+     *
+     * Implemented with CSS multi-column, which is the only masonry that works
+     * everywhere today — `grid-template-rows: masonry` is still behind a flag.
+     * The trade is reading order: items flow DOWN each column and then across,
+     * rather than left to right. For a list already grouped and sorted that is
+     * fine; for anything where "the next one" must sit to the right, it is not.
+     *
+     * Pairs with `min`, which sets the column width.
+     */
+    masonry?: boolean;
+    /**
+     * Animate children to their new positions instead of letting them jump.
+     *
+     * Wires up FLIP (see `useFlip`). Worth it wherever the layout reflows on its
+     * own — a masonry that restacks when the window narrows, or a card that
+     * pushes its neighbours down as it expands. Respects
+     * the app's motion preference (`useMotion`), which defaults to
+     * `prefers-reduced-motion`.
+     */
+    animate?: boolean;
+    /** Horizontal alignment of items within cells. */
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    /** Vertical alignment of items within cells. */
+    justify?: 'start' | 'center' | 'end' | 'stretch';
+    /** Whether the grid fills its parent width. */
+    full?: boolean;
+    /** Semantic HTML element to render. Default: div. */
+    el?: React__default.ElementType<React__default.HTMLAttributes<HTMLDivElement>>;
+}
+
+type SidebarVariant = 'sidebar' | 'floating' | 'inset';
+type SidebarContextValue = {
+    state: 'expanded' | 'collapsed';
+    open: boolean;
+    setOpen: React__default.Dispatch<React__default.SetStateAction<boolean>>;
+    isMobile: boolean;
+    openMobile: boolean;
+    setOpenMobile: React__default.Dispatch<React__default.SetStateAction<boolean>>;
+    toggleSidebar: () => void;
+    variant: SidebarVariant;
+    setVariant: React__default.Dispatch<React__default.SetStateAction<SidebarVariant>>;
+};
+
+declare function AppContent({ children, className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+
+interface AppContentFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The element to render. Defaults to `footer`. */
+    el?: React.ElementType<React.HTMLAttributes<HTMLDivElement>>;
+}
+/**
+ * The band at the foot of a content area — a search field, a toolbar, the
+ * action that commits the page.
+ *
+ * ⚠️ It must be a SIBLING of `AppContentMain`, not a child of it:
+ *
+ * ```tsx
+ * <AppContent>
+ *   <AppSidebarHeader />
+ *   <AppContentMain>{page}</AppContentMain>
+ *   <AppContentFooter>{search}</AppContentFooter>
+ * </AppContent>
+ * ```
+ *
+ * Nothing here is pinned. `AppContent` is a full-height column and only the
+ * middle band scrolls, so the foot of the column IS the foot of the screen and
+ * the band stays there by arithmetic rather than by being told to.
+ *
+ * It was `position: sticky; bottom: 0` inside the scrolling area, and that
+ * cannot work however the offsets are tuned: a sticky element travels only
+ * within its containing block, and a band that is the LAST child of the page it
+ * scrolls with has nothing below it to travel over. It docked on short pages,
+ * where there was no scrolling to survive, and scrolled away on long ones.
+ *
+ * Fixed positioning is the other wrong answer — it is measured against the
+ * viewport, so in an app with a sidebar the band runs underneath it and has to
+ * be inset by hand for every state the sidebar can be in.
+ *
+ * There is no matching header band; the shell's header is already a band of the
+ * same column, so it is always in view without being told to be.
+ */
+declare function AppContentFooter({ children, className, el, ...props }: AppContentFooterProps): React.JSX.Element;
+
+interface AppContentMainProps extends React.HTMLAttributes<HTMLElement> {
+    /** The element to render. Defaults to `main`. */
+    el?: React.ElementType<React.HTMLAttributes<HTMLElement>>;
+}
+/**
+ * The scrolling middle band of a content area.
+ *
+ * `AppContent` is a column of exactly three bands — header, this, footer — and
+ * this is the only one that scrolls. It takes whatever height the other two
+ * leave and scrolls inside itself, so the bands above and below it are always
+ * on screen without being pinned there.
+ *
+ * That is why the footer does not need to be sticky, and why a page must not
+ * put its footer INSIDE this band hoping `position: sticky; bottom: 0` will
+ * dock it. A sticky element can only travel within its containing block, and a
+ * band that is the last child of the thing it scrolls in has no room below it
+ * to travel — it looks docked on a short page (where nothing scrolls anyway)
+ * and scrolls away on a long one, which is the case it was added for.
+ *
+ * The composition, and the only one that docks a footer:
+ *
+ * ```tsx
+ * <AppContent>
+ *   <AppSidebarHeader />
+ *   <AppContentMain>{page}</AppContentMain>
+ *   <AppContentFooter>{search}</AppContentFooter>
+ * </AppContent>
+ * ```
+ *
+ * A sticky band INSIDE the page still works, and now pins to this element
+ * rather than to the window — but note that sticky offsets are measured from
+ * the scroller's PADDING edge, so a band meant to sit flush against the top of
+ * the scrollport has to offset by this element's own padding.
+ */
+declare function AppContentMain({ children, className, el, ...props }: AppContentMainProps): React.JSX.Element;
+
+interface AppFooterProps {
+    brand: string;
+    links: {
+        label: string;
+        href: string;
+    }[];
+}
+declare function AppFooter({ brand, links }: AppFooterProps): React.JSX.Element;
+
+interface AppShellProps {
+    children: React.ReactNode;
+    /**
+     * Initial sidebar state. Persist this server-side (cookie, session) or in
+     * localStorage and pass it in, so the sidebar doesn't flash open on load.
+     */
+    defaultSidebarOpen?: boolean;
+}
+declare function AppShell({ children, defaultSidebarOpen }: AppShellProps): React.JSX.Element;
+
+interface AppSidebarProps {
+    logo: React.ReactNode;
+    homeHref?: string;
+    currentPath?: string;
+    linkComponent?: React.ElementType;
+    sections: SidebarSection[];
+    footerItems?: SidebarNavItem[];
+    footerSeparator?: boolean;
+    children?: React.ReactNode;
+}
+declare function AppSidebar({ logo, homeHref, currentPath, linkComponent, sections, footerItems, footerSeparator, children, }: AppSidebarProps): React.JSX.Element;
+
+interface AppSidebarHeaderProps extends React.HTMLAttributes<HTMLElement> {
+    breadcrumbs?: BreadcrumbItemData[];
+    /** Omit to hide the account menu (e.g. on signed-out chrome). */
+    user?: NavUserProps['user'];
+    userMenu?: Omit<NavUserProps, 'user'>;
+    /** Extra controls between the appearance toggle and the account menu. */
+    actions?: React.ReactNode;
+}
+/**
+ * The header band of a content area.
+ *
+ * `className` and any other DOM props reach the `header` element. They used to
+ * be dropped on the floor — the component took four named props and spread
+ * nothing — so a caller passing `className` got no error and no class, and
+ * spent the difference looking at its own stylesheet.
+ */
+declare function AppSidebarHeader({ breadcrumbs, user, userMenu, actions, className, ...props }: AppSidebarHeaderProps): React.JSX.Element;
+
+interface CollapseProps extends React.HTMLAttributes<HTMLDivElement> {
+    open: boolean;
+    /** Transition length in ms. Also how long the unmount is deferred. */
+    duration?: number;
+    /**
+     * Unmount children once the close animation finishes. Keeps focus traps,
+     * `autoFocus` and dismiss handlers out of the tree while the panel is shut.
+     * Set `false` to keep children mounted — cheaper for a panel toggled often,
+     * and required if they hold state you need to survive a close.
+     */
+    unmountOnClose?: boolean;
+}
+/**
+ * A panel that animates its own height, so content below slides rather than
+ * jumping.
+ *
+ * Uses `grid-template-rows: 0fr → 1fr` rather than animating `max-height`: it
+ * interpolates to the panel's real height, so there is no magic number to
+ * guess and no pause at the end when the guess was too generous.
+ */
+declare const Collapse: React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<HTMLDivElement>>;
+
+declare const Column: React.FC<ColumnProps>;
+
+declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;
+
+declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
+
+declare const Row: React.FC<RowProps>;
+
+declare const sidebarMenuButtonVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<'div'> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: React.Dispatch<React.SetStateAction<boolean>>;
+}): React.JSX.Element;
+declare function Sidebar({ side, variant, collapsible, className, children, ...props }: React.ComponentProps<'div'> & {
+    side?: 'left' | 'right';
+    variant?: SidebarVariant;
+    collapsible?: 'offcanvas' | 'icon' | 'none';
+}): React.JSX.Element;
+declare function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+declare function SidebarRail({ className, ...props }: React.ComponentProps<'button'>): React.JSX.Element;
+declare function SidebarInset({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>): React.JSX.Element;
+declare function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SidebarContent({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SidebarGroupLabel({ className, asChild, ...props }: React.ComponentProps<'div'> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+declare function SidebarGroupAction({ className, asChild, ...props }: React.ComponentProps<'button'> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+declare function SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>): React.JSX.Element;
+declare function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>): React.JSX.Element;
+declare function SidebarMenuButton({ asChild, isActive, variant, size, tooltip, className, ...props }: React.ComponentProps<'button'> & {
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+} & VariantProps<typeof sidebarMenuButtonVariants>): React.JSX.Element;
+declare function SidebarMenuAction({ className, asChild, showOnHover, ...props }: React.ComponentProps<'button'> & {
+    asChild?: boolean;
+    showOnHover?: boolean;
+}): React.JSX.Element;
+declare function SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SidebarMenuSkeleton({ className, showIcon, ...props }: React.ComponentProps<'div'> & {
+    showIcon?: boolean;
+}): React.JSX.Element;
+declare function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>): React.JSX.Element;
+declare function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>): React.JSX.Element;
+declare function SidebarMenuSubButton({ asChild, size, isActive, tooltip, className, ...props }: React.ComponentProps<'a'> & {
+    asChild?: boolean;
+    size?: 'sm' | 'md';
+    isActive?: boolean;
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+}): React.JSX.Element;
+
+declare function Skeleton({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+
+export { AppContent as A, SidebarHeader as B, Collapse as C, SidebarInput as D, SidebarInset as E, SidebarMenu as F, Grid as G, SidebarMenuAction as H, SidebarMenuBadge as I, SidebarMenuButton as J, SidebarMenuItem as K, SidebarMenuSkeleton as L, SidebarMenuSub as M, SidebarMenuSubButton as N, SidebarMenuSubItem as O, SidebarProvider as P, SidebarRail as Q, Row as R, SidebarTrigger as T, Skeleton as V, AppContentFooter as a, AppContentMain as c, AppFooter as e, AppShell as g, AppSidebar as i, AppSidebarHeader as j, Column as n, Container as p, Sidebar as t, SidebarContent as u, SidebarFooter as v, SidebarGroup as w, SidebarGroupAction as x, SidebarGroupContent as y, SidebarGroupLabel as z };
+export type { SidebarContextValue as S, SidebarVariant as U, AppContentFooterProps as b, AppContentMainProps as d, AppFooterProps as f, AppShellProps as h, AppSidebarHeaderProps as k, AppSidebarProps as l, CollapseProps as m, ColumnProps as o, ContainerProps as q, GridColumns as r, GridProps as s };