@danxbot/ui 1.0.0

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

@@ -0,0 +1,203 @@
+import type { ReactNode, Ref } from "react";
+import { type VariantProps } from "tailwind-variants";
+declare const slider: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            track: string;
+            thumb: string;
+        };
+        md: {
+            track: string;
+            thumb: string;
+        };
+        lg: {
+            track: string;
+            thumb: string;
+        };
+    };
+    tone: {
+        accent: {
+            indicator: string;
+            thumb: string;
+        };
+        brand: {
+            indicator: string;
+            thumb: string;
+        };
+        success: {
+            indicator: string;
+            thumb: string;
+        };
+        warning: {
+            indicator: string;
+            thumb: string;
+        };
+        danger: {
+            indicator: string;
+            thumb: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+            control: string;
+            label: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    header: string;
+    label: string;
+    readout: string;
+    control: string;
+    track: string;
+    indicator: string;
+    thumb: string[];
+    marks: string;
+    markLabel: string;
+}, undefined, {
+    size: {
+        sm: {
+            track: string;
+            thumb: string;
+        };
+        md: {
+            track: string;
+            thumb: string;
+        };
+        lg: {
+            track: string;
+            thumb: string;
+        };
+    };
+    tone: {
+        accent: {
+            indicator: string;
+            thumb: string;
+        };
+        brand: {
+            indicator: string;
+            thumb: string;
+        };
+        success: {
+            indicator: string;
+            thumb: string;
+        };
+        warning: {
+            indicator: string;
+            thumb: string;
+        };
+        danger: {
+            indicator: string;
+            thumb: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+            control: string;
+            label: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    header: string;
+    label: string;
+    readout: string;
+    control: string;
+    track: string;
+    indicator: string;
+    thumb: string[];
+    marks: string;
+    markLabel: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            track: string;
+            thumb: string;
+        };
+        md: {
+            track: string;
+            thumb: string;
+        };
+        lg: {
+            track: string;
+            thumb: string;
+        };
+    };
+    tone: {
+        accent: {
+            indicator: string;
+            thumb: string;
+        };
+        brand: {
+            indicator: string;
+            thumb: string;
+        };
+        success: {
+            indicator: string;
+            thumb: string;
+        };
+        warning: {
+            indicator: string;
+            thumb: string;
+        };
+        danger: {
+            indicator: string;
+            thumb: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+            control: string;
+            label: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    header: string;
+    label: string;
+    readout: string;
+    control: string;
+    track: string;
+    indicator: string;
+    thumb: string[];
+    marks: string;
+    markLabel: string;
+}>>;
+export type SliderMark = {
+    value: number;
+    /** Shown under the tick. Omit for a bare tick. */
+    label?: ReactNode;
+};
+export interface SliderProps extends Omit<VariantProps<typeof slider>, "disabled"> {
+    /** A number for a single thumb; two numbers for a range. */
+    value?: number | number[];
+    defaultValue?: number | number[];
+    onValueChange?: (value: number | number[]) => void;
+    /** Fired once when dragging ends — for expensive commits. */
+    onValueCommitted?: (value: number | number[]) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Smallest allowed gap between range thumbs. */
+    minStepsBetweenValues?: number;
+    label?: ReactNode;
+    /** Turn the raw number into what a person should read. */
+    format?: (value: number) => string;
+    /** Show the formatted value beside the label. */
+    showValue?: boolean;
+    /** Ticks. `true` derives them from `step`; an array places them exactly. */
+    marks?: boolean | SliderMark[];
+    /** When to float the value over the thumb. */
+    tooltip?: "never" | "drag" | "always";
+    disabled?: boolean;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Slider({ value, defaultValue, onValueChange, onValueCommitted, min, max, step, minStepsBetweenValues, label, format, showValue, marks, tooltip, size, tone, disabled, className, ref, }: SliderProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,29 @@
+import type { Ref, SVGProps } from "react";
+import type { IconSize } from "./Icon";
+export interface SpinnerProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
+    size?: IconSize;
+    /**
+     * An accessible name. Omitted by default because a spinner is almost always
+     * inside something that already announces its own busy state — a button with
+     * `aria-busy`, or a region with `aria-live`. Announcing "Loading" a second
+     * time from the spinner itself is noise, not help.
+     */
+    label?: string;
+    ref?: Ref<SVGSVGElement>;
+}
+/**
+ * An indeterminate spinner built from TWO nested rates: the whole SVG rotates
+ * at a constant speed while the visible arc grows and shrinks underneath it.
+ *
+ * That combination is what separates a spinner that reads as alive from one
+ * that reads as mechanical. A single constant rotation has one frequency, and
+ * the eye locks onto it within a second — which is precisely when a spinner
+ * starts feeling like the app has hung. The second rate keeps the motion from
+ * ever repeating exactly where the eye expects it.
+ *
+ * Both animations are transform / stroke-dash on a ~20px element, so the cost
+ * is inside the paint budget even though `stroke-dasharray` is a paint
+ * property: the rule is animated AREA x FREQUENCY, and this loops forever but
+ * over almost no area.
+ */
+export declare function Spinner({ size, label, className, style, ref, ...props }: SpinnerProps): import("react").JSX.Element;

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

@@ -0,0 +1,98 @@
+import type { ReactNode, Ref } from "react";
+import { type VariantProps } from "tailwind-variants";
+declare const stat: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            value: string;
+        };
+        md: {
+            value: string;
+        };
+        lg: {
+            value: string;
+        };
+    };
+}, {
+    root: string;
+    label: string;
+    value: string;
+    unit: string;
+    delta: string;
+    hint: string;
+}, undefined, {
+    size: {
+        sm: {
+            value: string;
+        };
+        md: {
+            value: string;
+        };
+        lg: {
+            value: string;
+        };
+    };
+}, {
+    root: string;
+    label: string;
+    value: string;
+    unit: string;
+    delta: string;
+    hint: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            value: string;
+        };
+        md: {
+            value: string;
+        };
+        lg: {
+            value: string;
+        };
+    };
+}, {
+    root: string;
+    label: string;
+    value: string;
+    unit: string;
+    delta: string;
+    hint: string;
+}>>;
+export type StatTrend = "up" | "down" | "flat";
+/** Whether this movement is good news, bad news, or neither. */
+export type StatSentiment = "positive" | "negative" | "neutral";
+export interface StatProps extends VariantProps<typeof stat> {
+    label: ReactNode;
+    value: ReactNode;
+    /** Rendered smaller, beside the value — "ms", "/min", "GB". */
+    unit?: ReactNode;
+    /** The change itself — "12%", "+1.2k". */
+    delta?: ReactNode;
+    trend?: StatTrend;
+    /** Whether that movement is good. Independent of direction, on purpose. */
+    sentiment?: StatSentiment;
+    hint?: ReactNode;
+    /** A sparkline, ring, or icon shown alongside. */
+    visual?: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Stat({ label, value, unit, delta, trend, sentiment, hint, visual, size, className, ref, }: StatProps): import("react").JSX.Element;
+export interface SparklineProps {
+    values: number[];
+    /** Matches the stat's sentiment, so the line agrees with the delta beside it. */
+    sentiment?: StatSentiment;
+    className?: string;
+}
+/**
+ * A bare trend line — no axes, no grid, no labels.
+ *
+ * A sparkline answers "which way, and how steadily", not "what value". Adding
+ * axes makes it a bad chart instead of a good sparkline, and at this size the
+ * ink spent on them is ink taken from the only thing being communicated.
+ *
+ * The last point is marked, because "where it ended up" is the one specific
+ * value anyone reads off a shape this small.
+ */
+export declare function Sparkline({ values, sentiment, className }: SparklineProps): import("react").JSX.Element | null;
+export {};

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

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+import { type BadgeProps } from "./Badge";
+export interface StatusOption<Value extends string = string> {
+    value: Value;
+    label: string;
+    tone: BadgeProps["tone"];
+    /** Rendered inside the Badge via its own `icon` slot — pass an `<Icon>`. */
+    icon?: ReactNode;
+    dot?: boolean;
+    /** Reserved for a genuinely live state — see `Badge`'s own `pulse` doc. */
+    pulse?: boolean;
+}
+export interface StatusSelectProps<Value extends string = string> {
+    value: Value;
+    options: StatusOption<Value>[];
+    onValueChange: (value: Value) => void;
+    size?: "sm" | "md";
+    /** Accessible name for the trigger — there is no visible label otherwise. */
+    "aria-label"?: string;
+    disabled?: boolean;
+    className?: string;
+}
+export declare function StatusSelect<Value extends string = string>({ value, options, onValueChange, size, "aria-label": ariaLabel, disabled, className, }: StatusSelectProps<Value>): import("react").JSX.Element;

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

@@ -0,0 +1,110 @@
+import type { ReactNode, Ref } from "react";
+export interface SeparatorProps {
+    orientation?: "horizontal" | "vertical";
+    /** Text or a chip centred on the line — "or", "Today", a count. */
+    label?: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * A rule.
+ *
+ * With a label it becomes two rules with content between them, which is the
+ * only correct way to do it — a background-coloured span sitting on top of one
+ * continuous line looks right until the surface behind it changes, and then
+ * the patch is visible.
+ */
+export declare function Separator({ orientation, label, className, ref }: SeparatorProps): import("react").JSX.Element;
+export interface ScrollAreaProps {
+    children: ReactNode;
+    /** Caps the height and scrolls internally. */
+    maxHeight?: string;
+    className?: string;
+}
+/**
+ * A scrollable region with a styled, always-consistent scrollbar.
+ *
+ * Native scrollbars differ per platform: macOS overlays and hides them, Windows
+ * reserves a permanent 17px gutter. That difference silently changes your
+ * content width between platforms, which is why a layout that fits on a Mac
+ * wraps on Windows. This reserves nothing and draws its own.
+ *
+ * The scrollbar FADES IN on hover and interaction rather than sitting there —
+ * present when you are steering, invisible when you are reading.
+ */
+export declare function ScrollArea({ children, maxHeight, className }: ScrollAreaProps): import("react").JSX.Element;
+export interface CollapsibleProps {
+    /**
+     * The trigger's CONTENT — not a button.
+     *
+     * This component supplies the button itself, so passing one nests a button
+     * inside a button: invalid HTML, and unreachable by keyboard past the outer
+     * one. The prop is content-only by design, which removes the possibility
+     * rather than documenting against it.
+     */
+    trigger: ReactNode;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Restyles the trigger — for disclosures whose header is a full-width row
+     * rather than a line of text, which is most of them outside prose.
+     */
+    triggerClassName?: string;
+    /**
+     * Draws the leading chevron. Turn it off when the trigger places its own
+     * (trailing, usually) and rotate it with
+     * `group-data-panel-open/collapsible:rotate-90`.
+     */
+    chevron?: boolean;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * One disclosure, without the accordion around it.
+ *
+ * Height animates from `--collapsible-panel-height`, which Base UI publishes —
+ * no measuring, no effect, no frame of lag on first open.
+ */
+export declare function Collapsible({ trigger, defaultOpen, open, onOpenChange, triggerClassName, chevron, children, className, }: CollapsibleProps): import("react").JSX.Element;
+export interface EmptyStateProps {
+    icon?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    /** The primary way out. An empty state without one is a dead end. */
+    action?: ReactNode;
+    /** A quieter alternative — "learn more", "clear filters". */
+    secondaryAction?: ReactNode;
+    className?: string;
+}
+/**
+ * Nothing here — and what to do about it.
+ *
+ * The action is the point. An empty state that only apologises leaves someone
+ * exactly where they started; the two questions worth answering are "why is
+ * this empty" and "what do I press". "No results" with a Clear filters button
+ * is a different experience from "No results" alone, and it is the same amount
+ * of screen.
+ */
+export declare function EmptyState({ icon, title, description, action, secondaryAction, className, }: EmptyStateProps): import("react").JSX.Element;
+export interface TimelineItem {
+    id: string;
+    title: ReactNode;
+    description?: ReactNode;
+    timestamp?: ReactNode;
+    icon?: ReactNode;
+    tone?: "neutral" | "accent" | "success" | "warning" | "danger";
+}
+export interface TimelineProps {
+    items: TimelineItem[];
+    className?: string;
+}
+/**
+ * A vertical sequence of events.
+ *
+ * The connecting line is drawn per item and stops at the LAST one, rather than
+ * being one line behind everything. A single full-height line runs past the
+ * final marker into empty space, which reads as "and then something else
+ * happened" — the opposite of what a finished timeline means.
+ */
+export declare function Timeline({ items, className }: TimelineProps): import("react").JSX.Element;

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

@@ -0,0 +1,46 @@
+import { type ReactNode } from "react";
+import { type ColumnDef, type Table as TanstackTable } from "@tanstack/react-table";
+export type TableDensity = "comfortable" | "cozy" | "compact";
+export interface DataTableProps<TData> {
+    data: TData[];
+    columns: ColumnDef<TData, unknown>[];
+    density?: TableDensity;
+    /** Adds a leading checkbox column with header select-all. */
+    selectable?: boolean;
+    /** Constrain height and scroll internally, keeping the header pinned. */
+    maxHeight?: string;
+    /** Tint alternating rows. Off by default — hairlines usually suffice. */
+    zebra?: boolean;
+    /**
+     * First load — no data yet. Draws skeleton rows.
+     *
+     * Distinct from `refreshing` on purpose: a skeleton REPLACES content, which
+     * is right when there is none and wrong the moment there is. Collapsing the
+     * two into one `loading` flag is what produces the table that flashes to grey
+     * bars on every filter change.
+     */
+    loading?: boolean;
+    /** Refetching with data already on screen. Dims the rows under a card. */
+    refreshing?: boolean;
+    /** Skeleton row count while `loading`. */
+    loadingRows?: number;
+    emptyState?: ReactNode;
+    onRowClick?: (row: TData) => void;
+    /** Rendered above the table; receives the table instance for counts/filters. */
+    toolbar?: (table: TanstackTable<TData>) => ReactNode;
+    className?: string;
+    getRowId?: (row: TData, index: number) => string;
+}
+export declare function DataTable<TData>({ data, columns, density, selectable, maxHeight, zebra, loading, refreshing, loadingRows, emptyState, onRowClick, toolbar, className, getRowId, }: DataTableProps<TData>): import("react").JSX.Element;
+export declare function TableEmptyState({ icon, title, description, action, }: {
+    icon?: ReactNode;
+    title?: string;
+    description?: string;
+    action?: ReactNode;
+}): import("react").JSX.Element;
+/** Two-line cell: a strong primary value with a muted secondary beneath. */
+export declare function CellStack({ primary, secondary, mono, }: {
+    primary: ReactNode;
+    secondary?: ReactNode;
+    mono?: boolean;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,84 @@
+import type { ReactNode, Ref } from "react";
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+import { type VariantProps } from "tailwind-variants";
+declare const tabs: import("tailwind-variants").TVReturnType<{
+    variant: {
+        line: {
+            list: string;
+            tab: string;
+            indicator: string;
+        };
+        pill: {
+            list: string;
+            tab: string;
+            indicator: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    tab: string[];
+    indicator: string[];
+    panel: string;
+}, undefined, {
+    variant: {
+        line: {
+            list: string;
+            tab: string;
+            indicator: string;
+        };
+        pill: {
+            list: string;
+            tab: string;
+            indicator: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    tab: string[];
+    indicator: string[];
+    panel: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        line: {
+            list: string;
+            tab: string;
+            indicator: string;
+        };
+        pill: {
+            list: string;
+            tab: string;
+            indicator: string;
+        };
+    };
+}, {
+    root: string;
+    list: string;
+    tab: string[];
+    indicator: string[];
+    panel: string;
+}>>;
+export interface TabsProps extends Omit<BaseTabs.Root.Props, "className">, VariantProps<typeof tabs> {
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Tabs({ variant, className, children, ref, ...props }: TabsProps): import("react").JSX.Element;
+export interface TabListProps {
+    className?: string;
+    children: ReactNode;
+    variant?: VariantProps<typeof tabs>["variant"];
+}
+export declare function TabList({ className, children, variant }: TabListProps): import("react").JSX.Element;
+export interface TabProps extends Omit<BaseTabs.Tab.Props, "className"> {
+    className?: string;
+    variant?: VariantProps<typeof tabs>["variant"];
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare function Tab({ className, children, variant, ref, ...props }: TabProps): import("react").JSX.Element;
+export interface TabPanelProps extends Omit<BaseTabs.Panel.Props, "className"> {
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function TabPanel({ className, children, ref, ...props }: TabPanelProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,4 @@
+export interface ThemeMenuProps {
+    className?: string;
+}
+export declare function ThemeMenu({ className }: ThemeMenuProps): import("react").JSX.Element;

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

@@ -0,0 +1,46 @@
+import type { ReactNode } from "react";
+import { type IconName } from "./Icon";
+declare const TONE: Record<string, {
+    icon: IconName;
+    className: string;
+}>;
+export type ToastTone = keyof typeof TONE;
+export interface ToasterProps {
+    /** Where the stack lives. Bottom-right keeps it clear of primary content. */
+    position?: "top-right" | "top-center" | "bottom-right" | "bottom-center";
+}
+/** Renders the stack. Mount once, inside `ToastProvider`. */
+export declare function Toaster({ position }: ToasterProps): import("react").JSX.Element;
+export interface ToastProviderProps {
+    children: ReactNode;
+    limit?: number;
+}
+export declare function ToastProvider({ children, limit }: ToastProviderProps): import("react").JSX.Element;
+export interface ToastOptions {
+    title: ReactNode;
+    description?: ReactNode;
+    tone?: ToastTone;
+    /** Override the tone's default lifetime. `0` keeps it until dismissed. */
+    timeout?: number;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+/**
+ * Raise toasts from anywhere under `ToastProvider`.
+ *
+ * `promise` is the one worth reaching for: it shows a loading toast, then
+ * swaps that SAME toast to success or error in place. Two separate toasts for
+ * one operation makes the stack tell a story nobody asked for.
+ */
+export declare function useToast(): {
+    show({ title, description, tone, timeout, action }: ToastOptions): string;
+    promise<T>(promise: Promise<T>, messages: {
+        loading: ReactNode;
+        success: ReactNode;
+        error: ReactNode;
+    }): Promise<T>;
+    close: (toastId?: string) => void;
+};
+export {};