@danxbot/ui 1.0.0

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

@@ -0,0 +1,154 @@
+import type { ReactNode, Ref } from "react";
+import { type VariantProps } from "tailwind-variants";
+declare const avatar: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            root: string;
+            fallback: string;
+            status: string;
+        };
+        sm: {
+            root: string;
+            fallback: string;
+            status: string;
+        };
+        md: {
+            root: string;
+            fallback: string;
+            status: string;
+        };
+        lg: {
+            root: string;
+            fallback: string;
+            status: string;
+        };
+        xl: {
+            root: string;
+            fallback: string;
+            status: string;
+        };
+    };
+    shape: {
+        circle: {
+            root: string;
+        };
+        rounded: {
+            root: string;
+        };
+    };
+}, {
+    root: string[];
+    image: string;
+    fallback: string;
+    status: string[];
+}, undefined, {
+    size: {
+        xs: {
+            root: string;
+            fallback: string;
+            status: string;
+        };
+        sm: {
+            root: string;
+            fallback: string;
+            status: string;
+        };
+        md: {
+            root: string;
+            fallback: string;
+            status: string;
+        };
+        lg: {
+            root: string;
+            fallback: string;
+            status: string;
+        };
+        xl: {
+            root: string;
+            fallback: string;
+            status: string;
+        };
+    };
+    shape: {
+        circle: {
+            root: string;
+        };
+        rounded: {
+            root: string;
+        };
+    };
+}, {
+    root: string[];
+    image: string;
+    fallback: string;
+    status: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        xs: {
+            root: string;
+            fallback: string;
+            status: string;
+        };
+        sm: {
+            root: string;
+            fallback: string;
+            status: string;
+        };
+        md: {
+            root: string;
+            fallback: string;
+            status: string;
+        };
+        lg: {
+            root: string;
+            fallback: string;
+            status: string;
+        };
+        xl: {
+            root: string;
+            fallback: string;
+            status: string;
+        };
+    };
+    shape: {
+        circle: {
+            root: string;
+        };
+        rounded: {
+            root: string;
+        };
+    };
+}, {
+    root: string[];
+    image: string;
+    fallback: string;
+    status: string[];
+}>>;
+export type AvatarStatus = "online" | "busy" | "away" | "offline";
+export interface AvatarProps extends VariantProps<typeof avatar> {
+    src?: string;
+    /** Drives the initials, the fallback tint, and the accessible name. */
+    name: string;
+    /** Overrides the derived initials — for an icon, or a custom mark. */
+    fallback?: ReactNode;
+    status?: AvatarStatus;
+    className?: string;
+    ref?: Ref<HTMLSpanElement>;
+}
+export declare function Avatar({ src, name, fallback, status, size, shape, className, ref }: AvatarProps): import("react").JSX.Element;
+export interface AvatarGroupProps {
+    children: ReactNode;
+    /** Show at most this many, then a +N chip. */
+    max?: number;
+    size?: VariantProps<typeof avatar>["size"];
+    className?: string;
+}
+/**
+ * Overlapping avatars with an overflow count.
+ *
+ * The stack order is REVERSED so earlier avatars sit on top of later ones.
+ * Left-to-right overlap with natural order puts each avatar's face under its
+ * neighbour, which is exactly the half you need to see.
+ */
+export declare function AvatarGroup({ children, max, size, className }: AvatarGroupProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,73 @@
+import type { HTMLAttributes, ReactNode, Ref } from "react";
+import { type VariantProps } from "tailwind-variants";
+declare const badge: import("tailwind-variants").TVReturnType<{
+    tone: {
+        neutral: "border-border bg-surface-raised text-secondary";
+        accent: "border-accent-border bg-accent-subtle text-accent-text";
+        brand: "border-transparent bg-brand-subtle text-brand-text";
+        success: "border-success-border bg-success-subtle text-success-text";
+        warning: "border-warning-border bg-warning-subtle text-warning-text";
+        danger: "border-danger-border bg-danger-subtle text-danger-text";
+        info: "border-info-border bg-info-subtle text-info-text";
+    };
+    size: {
+        sm: "h-5 rounded-sm px-1.5 text-2xs";
+        md: "h-6 rounded-md px-2 text-xs";
+        lg: "h-7 rounded-md px-2.5 text-sm";
+    };
+    dot: {
+        true: "";
+        false: "";
+    };
+}, undefined, string[], {
+    tone: {
+        neutral: "border-border bg-surface-raised text-secondary";
+        accent: "border-accent-border bg-accent-subtle text-accent-text";
+        brand: "border-transparent bg-brand-subtle text-brand-text";
+        success: "border-success-border bg-success-subtle text-success-text";
+        warning: "border-warning-border bg-warning-subtle text-warning-text";
+        danger: "border-danger-border bg-danger-subtle text-danger-text";
+        info: "border-info-border bg-info-subtle text-info-text";
+    };
+    size: {
+        sm: "h-5 rounded-sm px-1.5 text-2xs";
+        md: "h-6 rounded-md px-2 text-xs";
+        lg: "h-7 rounded-md px-2.5 text-sm";
+    };
+    dot: {
+        true: "";
+        false: "";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    tone: {
+        neutral: "border-border bg-surface-raised text-secondary";
+        accent: "border-accent-border bg-accent-subtle text-accent-text";
+        brand: "border-transparent bg-brand-subtle text-brand-text";
+        success: "border-success-border bg-success-subtle text-success-text";
+        warning: "border-warning-border bg-warning-subtle text-warning-text";
+        danger: "border-danger-border bg-danger-subtle text-danger-text";
+        info: "border-info-border bg-info-subtle text-info-text";
+    };
+    size: {
+        sm: "h-5 rounded-sm px-1.5 text-2xs";
+        md: "h-6 rounded-md px-2 text-xs";
+        lg: "h-7 rounded-md px-2.5 text-sm";
+    };
+    dot: {
+        true: "";
+        false: "";
+    };
+}, undefined>>;
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badge> {
+    icon?: ReactNode;
+    /**
+     * Ping the dot outward — for genuinely LIVE states only (running, connected,
+     * streaming). A pulse on a static label is the badge equivalent of a blinking
+     * tag: it captures attention permanently and therefore stops meaning
+     * anything.
+     */
+    pulse?: boolean;
+    ref?: Ref<HTMLSpanElement>;
+}
+export declare function Badge({ className, tone, size, dot, icon, pulse, children, ref, ...props }: BadgeProps): import("react").JSX.Element;
+export { badge as badgeVariants };

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

@@ -0,0 +1,103 @@
+import type { ButtonHTMLAttributes, ReactNode, Ref } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { type VariantProps } from "tailwind-variants";
+declare const button: import("tailwind-variants").TVReturnType<{
+    variant: {
+        solid: string[];
+        brand: string[];
+        subtle: string[];
+        outline: string[];
+        ghost: string[];
+        danger: string[];
+        "danger-subtle": string[];
+        link: string[];
+    };
+    size: {
+        xs: "h-control-xs rounded-sm px-2.5 text-2xs gap-1.5";
+        sm: "h-control-sm rounded-md px-3.5 text-xs";
+        md: "h-control-md rounded-md px-5 text-sm";
+        lg: "h-control-lg rounded-lg px-6 text-md";
+        xl: "h-control-xl rounded-lg px-8 text-lg";
+    };
+    iconOnly: {
+        true: "px-0 aspect-square";
+        false: "";
+    };
+    fullWidth: {
+        true: "w-full";
+        false: "";
+    };
+}, undefined, string[], {
+    variant: {
+        solid: string[];
+        brand: string[];
+        subtle: string[];
+        outline: string[];
+        ghost: string[];
+        danger: string[];
+        "danger-subtle": string[];
+        link: string[];
+    };
+    size: {
+        xs: "h-control-xs rounded-sm px-2.5 text-2xs gap-1.5";
+        sm: "h-control-sm rounded-md px-3.5 text-xs";
+        md: "h-control-md rounded-md px-5 text-sm";
+        lg: "h-control-lg rounded-lg px-6 text-md";
+        xl: "h-control-xl rounded-lg px-8 text-lg";
+    };
+    iconOnly: {
+        true: "px-0 aspect-square";
+        false: "";
+    };
+    fullWidth: {
+        true: "w-full";
+        false: "";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        solid: string[];
+        brand: string[];
+        subtle: string[];
+        outline: string[];
+        ghost: string[];
+        danger: string[];
+        "danger-subtle": string[];
+        link: string[];
+    };
+    size: {
+        xs: "h-control-xs rounded-sm px-2.5 text-2xs gap-1.5";
+        sm: "h-control-sm rounded-md px-3.5 text-xs";
+        md: "h-control-md rounded-md px-5 text-sm";
+        lg: "h-control-lg rounded-lg px-6 text-md";
+        xl: "h-control-xl rounded-lg px-8 text-lg";
+    };
+    iconOnly: {
+        true: "px-0 aspect-square";
+        false: "";
+    };
+    fullWidth: {
+        true: "w-full";
+        false: "";
+    };
+}, undefined>>;
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof button> {
+    /**
+     * Render as a different element, keeping every style and behaviour.
+     *
+     * Takes the element itself (`render={<a href="/x" />}`) rather than a
+     * `asChild` boolean over `children`. The difference matters: with `asChild`
+     * the rendered element is buried inside children and TypeScript cannot tell
+     * you that you passed two of them, which fails at runtime. Here the element
+     * is a prop with a type.
+     */
+    render?: useRender.RenderProp;
+    /** Show a spinner and block interaction. Width is preserved — no layout shift. */
+    loading?: boolean;
+    /** Element rendered before the label. */
+    leadingIcon?: ReactNode;
+    /** Element rendered after the label. */
+    trailingIcon?: ReactNode;
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare function Button({ className, variant, size, iconOnly, fullWidth, render, loading, leadingIcon, trailingIcon, disabled, children, onPointerDown, ref, ...props }: ButtonProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export { button as buttonVariants };

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

@@ -0,0 +1,193 @@
+import type { ReactNode, Ref } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { type VariantProps } from "tailwind-variants";
+declare const card: import("tailwind-variants").TVReturnType<{
+    variant: {
+        raised: {
+            root: string;
+        };
+        flat: {
+            root: string;
+        };
+        sunken: {
+            root: string;
+        };
+        ghost: {
+            root: string;
+        };
+    };
+    padding: {
+        none: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    interactive: {
+        true: {
+            root: string[];
+        };
+        false: {};
+    };
+    selected: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+}, {
+    root: string[];
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+    footer: string;
+}, undefined, {
+    variant: {
+        raised: {
+            root: string;
+        };
+        flat: {
+            root: string;
+        };
+        sunken: {
+            root: string;
+        };
+        ghost: {
+            root: string;
+        };
+    };
+    padding: {
+        none: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    interactive: {
+        true: {
+            root: string[];
+        };
+        false: {};
+    };
+    selected: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+}, {
+    root: string[];
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+    footer: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        raised: {
+            root: string;
+        };
+        flat: {
+            root: string;
+        };
+        sunken: {
+            root: string;
+        };
+        ghost: {
+            root: string;
+        };
+    };
+    padding: {
+        none: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    interactive: {
+        true: {
+            root: string[];
+        };
+        false: {};
+    };
+    selected: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+}, {
+    root: string[];
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+    footer: string;
+}>>;
+export interface CardProps extends VariantProps<typeof card> {
+    /** Render as something else — a link, an article, a button. */
+    render?: useRender.RenderProp;
+    className?: string;
+    children?: ReactNode;
+    ref?: Ref<HTMLElement>;
+    onClick?: (event: React.MouseEvent) => void;
+}
+export declare function Card({ variant, padding, interactive, selected, render, className, children, ref, ...props }: CardProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export interface CardHeaderProps {
+    title?: ReactNode;
+    description?: ReactNode;
+    /** Sits at the trailing edge — a menu, a badge, an action. */
+    action?: ReactNode;
+    /** Sits before the text — an icon or avatar. */
+    media?: ReactNode;
+    /**
+     * The heading level the title renders as.
+     *
+     * A CARD'S CORRECT HEADING LEVEL IS A PROPERTY OF WHERE IT SITS, NOT OF THE
+     * CARD, and this used to be hard-coded to `h3`. Headings have to descend one
+     * level at a time — a screen reader's heading list IS the page outline, and a
+     * gap in it reads as a missing section. So a card placed directly under a
+     * page's `<h1>` needs `h2`, and the same card nested inside a titled
+     * section needs `h3`. Only the caller knows which.
+     *
+     * Hard-coding it did not merely risk that defect, it shipped it: a demo page
+     * whose first section deliberately carries no heading of its own put a row of
+     * `h3` cards straight under the page title, and axe's `heading-order`
+     * reported the gap while `a11y-scan` stayed green — it blocks on serious and
+     * critical, and heading-order is moderate.
+     *
+     * `h3` remains the default because a card is usually inside something.
+     *
+     * @default "h3"
+     */
+    titleAs?: "h2" | "h3" | "h4" | "h5" | "h6";
+    className?: string;
+}
+export declare function CardHeader({ title, description, action, media, titleAs: Title, className, }: CardHeaderProps): import("react").JSX.Element;
+export declare function CardFooter({ className, children }: {
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,112 @@
+import type { ReactNode, Ref } from "react";
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+import { Switch as BaseSwitch } from "@base-ui/react/switch";
+import { Radio as BaseRadio } from "@base-ui/react/radio";
+import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
+import { type VariantProps } from "tailwind-variants";
+import { type FieldProps } from "./Field";
+declare const checkbox: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: "size-[1.125rem] rounded-[0.3125rem]";
+        md: "size-[1.375rem] rounded-md";
+        lg: "size-[1.625rem] rounded-md";
+    };
+}, undefined, string[], {
+    size: {
+        sm: "size-[1.125rem] rounded-[0.3125rem]";
+        md: "size-[1.375rem] rounded-md";
+        lg: "size-[1.625rem] rounded-md";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: "size-[1.125rem] rounded-[0.3125rem]";
+        md: "size-[1.375rem] rounded-md";
+        lg: "size-[1.625rem] rounded-md";
+    };
+}, undefined>>;
+export interface CheckboxProps extends Omit<BaseCheckbox.Root.Props, "className" | "render">, VariantProps<typeof checkbox> {
+    className?: string;
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare function Checkbox({ size, className, ref, ...props }: CheckboxProps): import("react").JSX.Element;
+declare const switchTrack: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: "h-(--switch-h) w-(--switch-w) [--switch-h:calc(1.25rem*var(--ui-scale))] [--switch-w:calc(2.25rem*var(--ui-scale))]";
+        md: "h-(--switch-h) w-(--switch-w) [--switch-h:calc(1.5rem*var(--ui-scale))] [--switch-w:calc(2.75rem*var(--ui-scale))]";
+        lg: "h-(--switch-h) w-(--switch-w) [--switch-h:calc(1.75rem*var(--ui-scale))] [--switch-w:calc(3.25rem*var(--ui-scale))]";
+    };
+}, undefined, string[], {
+    size: {
+        sm: "h-(--switch-h) w-(--switch-w) [--switch-h:calc(1.25rem*var(--ui-scale))] [--switch-w:calc(2.25rem*var(--ui-scale))]";
+        md: "h-(--switch-h) w-(--switch-w) [--switch-h:calc(1.5rem*var(--ui-scale))] [--switch-w:calc(2.75rem*var(--ui-scale))]";
+        lg: "h-(--switch-h) w-(--switch-w) [--switch-h:calc(1.75rem*var(--ui-scale))] [--switch-w:calc(3.25rem*var(--ui-scale))]";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: "h-(--switch-h) w-(--switch-w) [--switch-h:calc(1.25rem*var(--ui-scale))] [--switch-w:calc(2.25rem*var(--ui-scale))]";
+        md: "h-(--switch-h) w-(--switch-w) [--switch-h:calc(1.5rem*var(--ui-scale))] [--switch-w:calc(2.75rem*var(--ui-scale))]";
+        lg: "h-(--switch-h) w-(--switch-w) [--switch-h:calc(1.75rem*var(--ui-scale))] [--switch-w:calc(3.25rem*var(--ui-scale))]";
+    };
+}, undefined>>;
+export interface SwitchProps extends Omit<BaseSwitch.Root.Props, "className" | "render">, VariantProps<typeof switchTrack> {
+    className?: string;
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare function Switch({ size, className, ref, ...props }: SwitchProps): import("react").JSX.Element;
+declare const radio: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: "size-[1.125rem]";
+        md: "size-[1.375rem]";
+        lg: "size-[1.625rem]";
+    };
+}, undefined, string[], {
+    size: {
+        sm: "size-[1.125rem]";
+        md: "size-[1.375rem]";
+        lg: "size-[1.625rem]";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: "size-[1.125rem]";
+        md: "size-[1.375rem]";
+        lg: "size-[1.625rem]";
+    };
+}, undefined>>;
+export interface RadioProps extends Omit<BaseRadio.Root.Props, "className" | "render">, VariantProps<typeof radio> {
+    className?: string;
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare function Radio({ size, className, ref, ...props }: RadioProps): import("react").JSX.Element;
+export interface RadioGroupProps extends Omit<BaseRadioGroup.Props, "className" | "render"> {
+    className?: string;
+    /** Lay options out in a row instead of a column. */
+    orientation?: "vertical" | "horizontal";
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function RadioGroup({ className, orientation, children, ref, ...props }: RadioGroupProps): import("react").JSX.Element;
+type LabelledProps = Pick<FieldProps, "label" | "description" | "error" | "disabled" | "name">;
+export interface CheckboxFieldProps extends CheckboxProps, LabelledProps {
+    fieldClassName?: string;
+}
+export declare function CheckboxField({ label, description, error, name, disabled, fieldClassName, ...props }: CheckboxFieldProps): import("react").JSX.Element;
+export interface SwitchFieldProps extends SwitchProps, LabelledProps {
+    fieldClassName?: string;
+}
+export declare function SwitchField({ label, description, error, name, disabled, fieldClassName, ...props }: SwitchFieldProps): import("react").JSX.Element;
+export interface RadioFieldProps extends RadioProps, LabelledProps {
+    fieldClassName?: string;
+}
+export declare function RadioField({ label, description, error, name, disabled, fieldClassName, ...props }: RadioFieldProps): import("react").JSX.Element;
+export interface RadioCardProps extends RadioProps {
+    label: ReactNode;
+    description?: ReactNode;
+}
+/**
+ * A radio rendered as a full selectable card.
+ *
+ * The whole card is the hit target, which is the point: on touch, a 22px dot
+ * beside a paragraph of text is a target most people miss at least once, and
+ * the card turns the same choice into something you cannot miss.
+ */
+export declare function RadioCard({ label, description, className, size, ...props }: RadioCardProps): import("react").JSX.Element;
+export {};