@danxbot/ui 1.0.0

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

@@ -0,0 +1,24 @@
+import { type ReactNode } from "react";
+export interface MarkdownEditorProps {
+    /** The markdown. Controlled when `onChange` is given. */
+    value: string;
+    onChange?: (value: string) => void;
+    /**
+     * Read-only surfaces are not editable at all — not a disabled editor.
+     *
+     * Same reasoning as `CodeEditor`: a `value` with no change handler on an
+     * editable surface is the React controlled-input trap, where the field
+     * silently refuses every keystroke and nothing reports why.
+     */
+    readOnly?: boolean;
+    /** Accessible name. Rendered visibly unless `hideLabel`. */
+    label: string;
+    hideLabel?: boolean;
+    placeholder?: string;
+    /** Extra toolbar content, after the built-in groups. */
+    toolbar?: ReactNode;
+    className?: string;
+    /** Height of the editable area. Grows with content when omitted. */
+    minHeight?: number | string;
+}
+export declare function MarkdownEditor({ value, onChange, readOnly, label, hideLabel, placeholder, toolbar, className, minHeight, }: MarkdownEditorProps): import("react").JSX.Element;

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

@@ -0,0 +1,57 @@
+import type { ReactNode, Ref } from "react";
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+export interface MenuProps {
+    /** The control that opens the menu. */
+    trigger: ReactNode;
+    /** Which side of the trigger the popup prefers. */
+    side?: "top" | "bottom" | "left" | "right";
+    /** How the popup lines up along that side. */
+    align?: "start" | "center" | "end";
+    /**
+     * Controlled open state.
+     *
+     * Not decoration: a menu that advertises a keyboard shortcut has to know
+     * when it is open in order to honour it, and a caller cannot listen for a
+     * key that only applies while a popup it cannot see is showing.
+     */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+    children: ReactNode;
+}
+export declare function Menu({ trigger, side, align, open, onOpenChange, className, children, }: MenuProps): import("react").JSX.Element;
+export interface MenuItemProps extends Omit<BaseMenu.Item.Props, "className"> {
+    className?: string;
+    /**
+     * Marks this row as the current choice among alternatives.
+     *
+     * For menus that ARE a choice but are not a radio group — a model picker
+     * that draws its own tick, say. Without it the only signal is the tick, and
+     * a tick is not a state a pointer can see it is already on.
+     */
+    selected?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function MenuItem({ className, selected, children, ref, ...props }: MenuItemProps): import("react").JSX.Element;
+export interface MenuRadioGroupProps extends Omit<BaseMenu.RadioGroup.Props, "className"> {
+    className?: string;
+}
+/** Single-choice group — for a setting rather than a list of actions. */
+export declare function MenuRadioGroup({ className, children, ...props }: MenuRadioGroupProps): import("react").JSX.Element;
+export interface MenuRadioItemProps extends Omit<BaseMenu.RadioItem.Props, "className"> {
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function MenuRadioItem({ className, children, ref, ...props }: MenuRadioItemProps): import("react").JSX.Element;
+export interface MenuGroupProps {
+    /**
+     * The group's heading. A prop rather than a child component, so a label
+     * cannot be placed outside a group — where it would throw at render.
+     */
+    label?: ReactNode;
+    children: ReactNode;
+}
+export declare function MenuGroup({ label, children }: MenuGroupProps): import("react").JSX.Element;
+export declare function MenuSeparator({ className }: {
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,46 @@
+import type { ReactNode } from "react";
+export type Crumb = {
+    label: ReactNode;
+    href?: string;
+    onClick?: () => void;
+};
+export interface BreadcrumbProps {
+    items: Crumb[];
+    /**
+     * Collapse the middle when the trail is longer than this.
+     *
+     * A trail that wraps to two lines has stopped being a trail. Collapsing
+     * keeps the two ends — where you came from and where you are — which is the
+     * information people actually use; the middle is nearly always scenery.
+     */
+    maxItems?: number;
+    className?: string;
+}
+export declare function Breadcrumb({ items, maxItems, className }: BreadcrumbProps): import("react").JSX.Element;
+export interface PaginationProps {
+    page: number;
+    pageCount: number;
+    onPageChange: (page: number) => void;
+    /**
+     * How many numbers to show around the current page.
+     *
+     * CLAMPED TO 0 BELOW 640px, whatever is passed. Every control in this row is
+     * at least 44px wide once the pointer is coarse, so the default window is
+     * nine targets plus eight gaps — 428px, which does not fit a 375px phone and
+     * pushed the entire page sideways. Fewer numbers is the only thing that can
+     * give here: a horizontally scrolling pagination control is a worse answer
+     * than a shorter one, because the pages you cannot see are the ones you were
+     * looking for.
+     */
+    siblings?: number;
+    className?: string;
+}
+/**
+ * Numbered pagination with a stable width.
+ *
+ * The window of page numbers is padded so the control does not change size as
+ * you move through it — a row of buttons that grows and shrinks under the
+ * pointer makes people misclick, and it is the single most common flaw in
+ * hand-rolled pagination.
+ */
+export declare function Pagination({ page, pageCount, onPageChange, siblings, className, }: PaginationProps): import("react").JSX.Element;

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

@@ -0,0 +1,88 @@
+import type { Ref } from "react";
+import { NumberField } from "@base-ui/react/number-field";
+import { type VariantProps } from "tailwind-variants";
+declare const numberInput: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            group: string;
+            input: string;
+            stepper: string;
+        };
+        md: {
+            group: string;
+            input: string;
+            stepper: string;
+        };
+        lg: {
+            group: string;
+            input: string;
+            stepper: string;
+        };
+    };
+}, {
+    group: string[];
+    input: string[];
+    stepper: string[];
+    scrub: string;
+}, undefined, {
+    size: {
+        sm: {
+            group: string;
+            input: string;
+            stepper: string;
+        };
+        md: {
+            group: string;
+            input: string;
+            stepper: string;
+        };
+        lg: {
+            group: string;
+            input: string;
+            stepper: string;
+        };
+    };
+}, {
+    group: string[];
+    input: string[];
+    stepper: string[];
+    scrub: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            group: string;
+            input: string;
+            stepper: string;
+        };
+        md: {
+            group: string;
+            input: string;
+            stepper: string;
+        };
+        lg: {
+            group: string;
+            input: string;
+            stepper: string;
+        };
+    };
+}, {
+    group: string[];
+    input: string[];
+    stepper: string[];
+    scrub: string;
+}>>;
+export interface NumberInputProps extends Omit<NumberField.Root.Props, "className" | "render">, VariantProps<typeof numberInput> {
+    className?: string;
+    /** Hide the +/− buttons — for a field driven by typing or scrubbing alone. */
+    hideSteppers?: boolean;
+    /**
+     * A draggable label. Dragging it left or right changes the value.
+     *
+     * Worth adding wherever the exact number matters less than the relationship
+     * between it and what it affects — a delay, a threshold, a weight.
+     */
+    scrubLabel?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function NumberInput({ size, className, hideSteppers, scrubLabel, ref, ...props }: NumberInputProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,11 @@
+import type { Ref } from "react";
+import { OTPField } from "@base-ui/react/otp-field";
+export interface OTPInputProps extends Omit<OTPField.Root.Props, "className" | "render" | "length"> {
+    /** How many characters. 6 is the near-universal default. */
+    length?: number;
+    /** Draw a gap after this many characters — "123 456" reads faster than "123456". */
+    groupAfter?: number;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function OTPInput({ length, groupAfter, className, ref, ...props }: OTPInputProps): import("react").JSX.Element;

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

@@ -0,0 +1,94 @@
+import { type ReactNode, type Ref } from "react";
+import { type Breakpoint } from "../lib/use-media-query";
+export type PanelDirection = "horizontal" | "vertical";
+/** What a group turns into below its narrow breakpoint. */
+export type PanelNarrowMode = "tabs" | "stack";
+type Sizes = Record<string, number>;
+export interface PanelGroupProps {
+    children: ReactNode;
+    direction?: PanelDirection;
+    /**
+     * Below this width the group stops being a splitter. `narrowMode` decides
+     * what it becomes; either way splitters are not rendered and stored sizes are
+     * ignored until the width comes back.
+     *
+     * A SPLITTER IS A POINTER AFFORDANCE, and phone width has neither the room
+     * nor the precision for it. Left as a splitter, a two-pane chat at 375px
+     * gives each pane about 170px: prose wraps one word per line and the buttons
+     * inside it collide. That is not a narrower version of the layout, it is a
+     * broken one.
+     *
+     * Defaults to `md` (768px) — a portrait tablet is the last width where two
+     * panes and a splitter between them still leave each pane a readable column.
+     * Pass `false` for a group that genuinely must stay split at every width.
+     */
+    narrowBelow?: Breakpoint | false;
+    /**
+     * What the group becomes below `narrowBelow`.
+     *
+     * TABS is the default, for panes a person moves BETWEEN — a conversation and
+     * the thing it is about. Only one of those is being read at any moment, so
+     * giving the active one the whole screen and charging a tap to switch costs
+     * nothing and keeps both reachable at a fixed place on screen.
+     *
+     * STACK is for panes read TOGETHER, where scrolling out of one and into the
+     * next is the point. Tabs there hide half the content behind a control the
+     * reader has no reason to expect, and the two halves can no longer be
+     * compared at all.
+     */
+    narrowMode?: PanelNarrowMode;
+    /**
+     * Remembers this group's layout under `danxbot-<persistId>`.
+     *
+     * A layout stored against a different set of panels is DISCARDED, not merged:
+     * ids are compared as a set on mount, and any mismatch falls back to the
+     * defaults and clears the entry. Merging would produce a broken layout that
+     * survives every refresh, because it keeps getting written back — the one
+     * failure a person cannot fix by dragging.
+     */
+    persistId?: string;
+    onLayout?: (sizes: Sizes) => void;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function PanelGroup({ children, direction, narrowBelow, narrowMode, persistId, onLayout, className, ref, }: PanelGroupProps): import("react").JSX.Element;
+export interface PanelProps {
+    children: ReactNode;
+    /** Stable identity — the key its size persists under. Required precisely so
+        a remembered layout can be matched against the panels that exist now. */
+    id: string;
+    /** The panel's name on its tab, once the group is narrow enough to show one.
+        Falls back to `id`, which is readable often enough to be a useful default
+        and obviously wrong when it is not. */
+    label?: string;
+    /** Percent of the group. Omitted panels split whatever is left over. */
+    defaultSize?: number;
+    minSize?: number;
+    maxSize?: number;
+    collapsible?: boolean;
+    collapsedSize?: number;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Panel({ children, id, label, defaultSize, minSize, maxSize, collapsible, collapsedSize, className, ref, }: PanelProps): import("react").JSX.Element;
+export interface PanelResizerProps {
+    /** Names the splitter for screen readers — "Sidebar width", not "separator". */
+    label: string;
+    /** Percent moved per arrow key. */
+    step?: number;
+    /** Shows a grip so the splitter reads as draggable rather than decorative. */
+    withGrip?: boolean;
+    disabled?: boolean;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * The draggable divider.
+ *
+ * `role="separator"` with `tabindex="0"` is the WAI-ARIA window splitter: the
+ * one case where a separator is interactive. Keyboard support is not a bonus
+ * here — a pointer-only splitter is unusable for anyone who cannot drag, and
+ * "drag" is the entire interaction.
+ */
+export declare function PanelResizer({ label, step, withGrip, disabled, className, ref, }: PanelResizerProps): import("react").JSX.Element | null;
+export {};

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

@@ -0,0 +1,64 @@
+import type { ReactNode, Ref } from "react";
+export interface PopoverProps {
+    trigger: ReactNode;
+    side?: "top" | "bottom" | "left" | "right";
+    align?: "start" | "center" | "end";
+    /** Draws the little pointer at the trigger. Off by default — see below. */
+    arrow?: boolean;
+    className?: string;
+    children: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * Render open on mount. Uncontrolled — the popover still closes on its own
+     * afterwards; this only decides the starting state.
+     *
+     * `Menu` already forwarded its open state and consequently had a preview
+     * card showing a real open menu, while these two showed a picture of a
+     * button. Consistency across the three overlays is the point; a static
+     * documentation surface cannot dispatch a click.
+     */
+    defaultOpen?: boolean;
+}
+export declare function Popover({ trigger, side, align, arrow, className, children, ref, defaultOpen, }: PopoverProps): import("react").JSX.Element;
+/** Closes the nearest Popover. */
+export declare function PopoverClose({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export interface TooltipProps {
+    /** The label. Plain text — anything interactive belongs in a Popover. */
+    content: ReactNode;
+    children: ReactNode;
+    side?: "top" | "bottom" | "left" | "right";
+    className?: string;
+    /**
+     * Render open on mount, without a hover. For documentation surfaces and
+     * static captures — a tooltip nobody is pointing at is otherwise invisible,
+     * so a preview card of one shows an unexplained button.
+     */
+    defaultOpen?: boolean;
+}
+/**
+ * Hover delay is set once on `TooltipProvider`, not per tooltip — that is where
+ * Base UI keeps it, and it is the right place: the delay only means anything
+ * relative to the OTHER tooltips nearby.
+ */
+export declare function Tooltip({ content, children, side, className, defaultOpen }: TooltipProps): import("react").JSX.Element;
+/**
+ * Share hover timing across every tooltip beneath it.
+ *
+ * Wrap the app once. Without it each tooltip keeps its own timer, so moving
+ * between two adjacent icons makes you wait out the full delay twice — the
+ * thing that makes tooltips feel broken in dense toolbars.
+ *
+ * THE DEFAULT IS ZERO. A hover delay exists to stop tooltips firing while the
+ * pointer merely crosses a toolbar on its way somewhere else — but the cost is
+ * paid by everyone who actually wanted the label, every time, and it is the
+ * cost people describe as "the tooltip is slow". These tooltips name controls
+ * that are often icon-only, so the label IS the affordance and withholding it
+ * for 400ms is withholding the interface. The prop remains for anyone who
+ * wants the traditional behaviour back.
+ */
+export declare function TooltipProvider({ children, delay }: {
+    children: ReactNode;
+    delay?: number;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,178 @@
+import type { ReactNode, Ref } from "react";
+import { type VariantProps } from "tailwind-variants";
+declare const bar: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            track: string;
+        };
+        md: {
+            track: string;
+        };
+        lg: {
+            track: string;
+        };
+    };
+    tone: {
+        accent: {
+            indicator: string;
+        };
+        brand: {
+            indicator: string;
+        };
+        success: {
+            indicator: string;
+        };
+        warning: {
+            indicator: string;
+        };
+        danger: {
+            indicator: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    label: string;
+    value: string;
+    track: string;
+    indicator: string[];
+}, undefined, {
+    size: {
+        sm: {
+            track: string;
+        };
+        md: {
+            track: string;
+        };
+        lg: {
+            track: string;
+        };
+    };
+    tone: {
+        accent: {
+            indicator: string;
+        };
+        brand: {
+            indicator: string;
+        };
+        success: {
+            indicator: string;
+        };
+        warning: {
+            indicator: string;
+        };
+        danger: {
+            indicator: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    label: string;
+    value: string;
+    track: string;
+    indicator: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            track: string;
+        };
+        md: {
+            track: string;
+        };
+        lg: {
+            track: string;
+        };
+    };
+    tone: {
+        accent: {
+            indicator: string;
+        };
+        brand: {
+            indicator: string;
+        };
+        success: {
+            indicator: string;
+        };
+        warning: {
+            indicator: string;
+        };
+        danger: {
+            indicator: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    label: string;
+    value: string;
+    track: string;
+    indicator: string[];
+}>>;
+export interface ProgressProps extends VariantProps<typeof bar> {
+    /** 0–100, or `null` for work of unknown length. */
+    value: number | null;
+    label?: ReactNode;
+    /** Turn the number into what a person should read. */
+    format?: (value: number) => string;
+    showValue?: boolean;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Progress({ value, label, format, showValue, size, tone, className, ref, }: ProgressProps): import("react").JSX.Element;
+export interface MeterProps extends VariantProps<typeof bar> {
+    value: number;
+    min?: number;
+    max?: number;
+    label?: ReactNode;
+    format?: (value: number) => string;
+    showValue?: boolean;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+/** A gauge: how full something is right now. Never indeterminate. */
+export declare function Meter({ value, min, max, label, format, showValue, size, tone, className, ref, }: MeterProps): import("react").JSX.Element;
+declare const ring: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: "size-10";
+        md: "size-16";
+        lg: "size-24";
+    };
+}, undefined, "relative grid shrink-0 place-items-center", {
+    size: {
+        sm: "size-10";
+        md: "size-16";
+        lg: "size-24";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: "size-10";
+        md: "size-16";
+        lg: "size-24";
+    };
+}, undefined>>;
+export interface ProgressRingProps extends VariantProps<typeof ring> {
+    value: number | null;
+    /**
+     * REQUIRED, and a plain string.
+     *
+     * The ring draws a bare number in a circle, so unlike the bar it has no
+     * visible label to borrow a name from — without this it announces as
+     * "progress bar, 64" with no indication of 64 WHAT. Optional here would mean
+     * "forgotten most of the time", which the browser scan proved within minutes
+     * of this component existing.
+     */
+    label: string;
+    tone?: VariantProps<typeof bar>["tone"];
+    className?: string;
+}
+/**
+ * Circular progress, for when the number belongs INSIDE the indicator —
+ * a tile, a card corner, a stat.
+ *
+ * Uses `pathLength="1"` so the dash numbers are fractions rather than
+ * circumference maths: the same two values work at any radius, and it dodges
+ * the Safari bug where a zoomed SVG rescales absolute dash lengths.
+ */
+export declare function ProgressRing({ value, label, size, tone, className, }: ProgressRingProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,53 @@
+import type { ReactNode, Ref } from "react";
+import { Select as BaseSelect } from "@base-ui/react/select";
+import { type VariantProps } from "tailwind-variants";
+declare const trigger: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: "h-control-sm rounded-md px-3 text-xs";
+        md: "h-control-md rounded-md px-3.5 text-sm";
+        lg: "h-control-lg rounded-lg px-4 text-md";
+    };
+}, undefined, string[], {
+    size: {
+        sm: "h-control-sm rounded-md px-3 text-xs";
+        md: "h-control-md rounded-md px-3.5 text-sm";
+        lg: "h-control-lg rounded-lg px-4 text-md";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: "h-control-sm rounded-md px-3 text-xs";
+        md: "h-control-md rounded-md px-3.5 text-sm";
+        lg: "h-control-lg rounded-lg px-4 text-md";
+    };
+}, undefined>>;
+export interface SelectProps<Value> extends Omit<BaseSelect.Root.Props<Value, boolean>, "children">, VariantProps<typeof trigger> {
+    placeholder?: string;
+    className?: string;
+    /** Accessible name for the trigger when no visible label is present. */
+    "aria-label"?: string;
+    children: ReactNode;
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare function Select<Value>({ size, placeholder, className, children, ref, "aria-label": ariaLabel, ...props }: SelectProps<Value>): import("react").JSX.Element;
+export interface SelectItemProps extends Omit<BaseSelect.Item.Props, "className"> {
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function SelectItem({ className, children, ref, ...props }: SelectItemProps): import("react").JSX.Element;
+export interface SelectGroupProps {
+    /**
+     * The group's heading.
+     *
+     * A prop rather than a `<SelectGroupLabel>` child, because the label is only
+     * valid INSIDE a group — as a separate exported component it can be placed
+     * anywhere and throws at render. Making it a prop makes the misuse
+     * unrepresentable, which is how a blank page happened here once.
+     */
+    label?: ReactNode;
+    children: ReactNode;
+}
+export declare function SelectGroup({ label, children }: SelectGroupProps): import("react").JSX.Element;
+export declare function SelectSeparator({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+export {};