@50arms/ui 0.0.0-stage → 35.1.0

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

@@ -0,0 +1,208 @@
+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[];
+        "ghost-danger": string[];
+        "outline-danger": string[];
+        danger: string[];
+        "danger-subtle": string[];
+        warning: string[];
+        link: string[];
+    };
+    size: {
+        "2xs": string[];
+        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";
+        list: "h-auto w-full items-start justify-start gap-3 rounded-md px-3 py-2 text-left text-sm whitespace-normal";
+    };
+    iconOnly: {
+        true: "px-0 aspect-square shrink-0";
+        false: "";
+    };
+    fullWidth: {
+        true: "w-full";
+        false: "";
+    };
+}, undefined, string[], {
+    variant: {
+        solid: string[];
+        brand: string[];
+        subtle: string[];
+        outline: string[];
+        ghost: string[];
+        "ghost-danger": string[];
+        "outline-danger": string[];
+        danger: string[];
+        "danger-subtle": string[];
+        warning: string[];
+        link: string[];
+    };
+    size: {
+        "2xs": string[];
+        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";
+        list: "h-auto w-full items-start justify-start gap-3 rounded-md px-3 py-2 text-left text-sm whitespace-normal";
+    };
+    iconOnly: {
+        true: "px-0 aspect-square shrink-0";
+        false: "";
+    };
+    fullWidth: {
+        true: "w-full";
+        false: "";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        solid: string[];
+        brand: string[];
+        subtle: string[];
+        outline: string[];
+        ghost: string[];
+        "ghost-danger": string[];
+        "outline-danger": string[];
+        danger: string[];
+        "danger-subtle": string[];
+        warning: string[];
+        link: string[];
+    };
+    size: {
+        "2xs": string[];
+        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";
+        list: "h-auto w-full items-start justify-start gap-3 rounded-md px-3 py-2 text-left text-sm whitespace-normal";
+    };
+    iconOnly: {
+        true: "px-0 aspect-square shrink-0";
+        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;
+    /**
+     * Unavailable, AND WHY — the labelled twin of `IconButton.disabledReason`
+     * (SG-833 slice 7), added here because a labelled `Button` refuses in
+     * silence exactly as an icon-only one used to: `ConfirmAction.tsx` in
+     * gpt-manager's Demand Desk was disabling its trigger with a bare
+     * `disabled` boolean and a SEPARATE hand-rolled `Tooltip` wrapper to explain
+     * why, because `Button` itself had no way to carry the reason.
+     *
+     * Setting this REPLACES `disabled`/`aria-disabled` for the purpose of this
+     * render: the button becomes soft-disabled (`aria-disabled`, not the native
+     * attribute), so it stays focusable and hoverable and the reason stays
+     * reachable — a natively `disabled` control drops out of hit-testing and
+     * the tab order, which is exactly what makes a mute refusal unrepresentable
+     * disguised as a keyboard-accessible one. The reason is announced as the
+     * control's accessible description (`aria-describedby`, wired to a visually
+     * hidden span) and shown as a tooltip on hover and on focus — see
+     * `IconButton`'s own header for why Base UI's tooltip alone is not enough
+     * for the announcement.
+     */
+    disabledReason?: string;
+    /**
+     * Whether `Button` wraps ITSELF in the `disabledReason` tooltip. Defaults to
+     * `true` — a plain, directly-used `Button` needs this, since nothing else
+     * will show the reason.
+     *
+     * `false` is for a caller that already wraps the rendered control in its
+     * own, wider-scoped tooltip — `IconButton` (SG-839) is the one case today:
+     * it needs a tooltip in MORE states than `Button` does on its own (naming
+     * itself while enabled, not only explaining itself while off), so it
+     * supplies that tooltip itself and sets this to `false` to avoid nesting two
+     * tooltips around one trigger. Every other piece of the `disabledReason`
+     * contract — the `aria-disabled`/`aria-describedby` wiring, the `sr-only`
+     * description, the click guard, the dimmed/not-allowed styling — stays
+     * here regardless of this flag; only the self-wrapping tooltip is optional.
+     */
+    disabledReasonTooltip?: boolean;
+    /**
+     * A soft animated glow with a glint sweeping across the button — "this one
+     * is waiting for you", the way a game menu lights the choice it wants made.
+     * Theme tokens `--attention-*`; the effect is a `box-shadow` and a
+     * pseudo-element, so it never moves the layout. Under reduced motion it is a
+     * static highlight ring instead of an animation. Also on `IconButton`.
+     *
+     * TURN IT ON ONLY WHILE AN ACTION IS WAITING FOR THIS VIEWER. Same warning
+     * as `Badge.pulse`: an effect that runs on a button nobody needs to press,
+     * or that a viewer who cannot act still sees, captures attention
+     * permanently and therefore stops meaning anything. The state it signals
+     * must also be in the button's label or tooltip — the glow is never the only
+     * signal. Ignored while the button is disabled, loading or soft-disabled.
+     */
+    attention?: boolean;
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare function Button({ className, variant, size, iconOnly, fullWidth, render, loading, leadingIcon, trailingIcon, disabled, children, onPointerDown, onClick, disabledReason, disabledReasonTooltip, attention, ref, "aria-disabled": ariaDisabled, ...props }: ButtonProps): import("react").JSX.Element;
+export { button as buttonVariants };
+export interface ListItemButtonProps extends Omit<ButtonProps, "size" | "iconOnly" | "fullWidth" | "children"> {
+    /**
+     * The row's bold leading identifier — an actor name, a from-state, a
+     * category label. Always rendered `font-semibold`, on the same wrapping
+     * line as `detail`.
+     */
+    leading: ReactNode;
+    /**
+     * Secondary text following `leading` on the SAME wrapping line — the
+     * action, the target, whatever finishes the sentence `leading` starts.
+     * Rendered `font-normal`; wraps together with `leading` as one line of
+     * text, not as a separate flex item.
+     */
+    detail?: ReactNode;
+    /**
+     * A muted line rendered on its OWN row below `leading`/`detail` — a
+     * trigger, a guard clause, any extra context. Never inlined with the line
+     * above, unlike `detail`.
+     */
+    subline?: ReactNode;
+    /**
+     * Marks this row as the current selection. Stamps `data-selected="true"`
+     * on the rendered `<button>` (omitted entirely, not `"false"`, when unset —
+     * the same convention the native `docs-step-list__item` buttons this
+     * replaces already used, so an existing `[data-selected]` CSS selector
+     * keeps working unchanged) and applies the library's own selected
+     * treatment rather than leaving every consumer to invent one.
+     */
+    selected?: boolean;
+}
+/**
+ * A list-item trigger for multi-line, rich-content rows that `Button`'s
+ * fixed single-line sizes cannot fit — see the file header above.
+ *
+ * `fullWidth` is not a prop here: a list-item row always spans its `<li>`,
+ * which is the entire reason this exists, so it's forced rather than left
+ * for every caller to remember.
+ */
+export declare function ListItemButton({ leading, detail, subline, selected, variant, className, ...props }: ListItemButtonProps): import("react").JSX.Element;

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

@@ -0,0 +1,163 @@
+import type { HTMLAttributes, ReactNode, Ref } from "react";
+import { type VariantProps } from "tailwind-variants";
+declare const callout: import("tailwind-variants").TVReturnType<{
+    tone: {
+        neutral: {
+            root: string;
+            glyph: string;
+            title: string;
+            body: string;
+        };
+        info: {
+            root: string;
+            glyph: string;
+            title: string;
+            body: string;
+        };
+        success: {
+            root: string;
+            glyph: string;
+            title: string;
+            body: string;
+        };
+        warning: {
+            root: string;
+            glyph: string;
+            title: string;
+            body: string;
+        };
+        danger: {
+            root: string;
+            glyph: string;
+            title: string;
+            body: string;
+        };
+    };
+    emphasis: {
+        subtle: {};
+        strong: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    glyph: string;
+    content: string;
+    title: string;
+    body: string;
+    actions: string;
+}, undefined, {
+    tone: {
+        neutral: {
+            root: string;
+            glyph: string;
+            title: string;
+            body: string;
+        };
+        info: {
+            root: string;
+            glyph: string;
+            title: string;
+            body: string;
+        };
+        success: {
+            root: string;
+            glyph: string;
+            title: string;
+            body: string;
+        };
+        warning: {
+            root: string;
+            glyph: string;
+            title: string;
+            body: string;
+        };
+        danger: {
+            root: string;
+            glyph: string;
+            title: string;
+            body: string;
+        };
+    };
+    emphasis: {
+        subtle: {};
+        strong: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    glyph: string;
+    content: string;
+    title: string;
+    body: string;
+    actions: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    tone: {
+        neutral: {
+            root: string;
+            glyph: string;
+            title: string;
+            body: string;
+        };
+        info: {
+            root: string;
+            glyph: string;
+            title: string;
+            body: string;
+        };
+        success: {
+            root: string;
+            glyph: string;
+            title: string;
+            body: string;
+        };
+        warning: {
+            root: string;
+            glyph: string;
+            title: string;
+            body: string;
+        };
+        danger: {
+            root: string;
+            glyph: string;
+            title: string;
+            body: string;
+        };
+    };
+    emphasis: {
+        subtle: {};
+        strong: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    glyph: string;
+    content: string;
+    title: string;
+    body: string;
+    actions: string;
+}>>;
+export interface CalloutProps extends Omit<HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof callout> {
+    /** The condition, in one line. */
+    title: ReactNode;
+    /**
+     * Override the per-tone default shape. Pass `null` to render no icon at all
+     * — for a tone that is genuinely not a severity.
+     */
+    icon?: ReactNode | null;
+    /** What to do about it. The half that makes a callout useful rather than a complaint. */
+    children?: ReactNode;
+    /** Buttons or links. Rendered under the body, never beside the title. */
+    actions?: ReactNode;
+    /**
+     * Announce assertively via `role="alert"`. Opt-in — see the header. Reserve
+     * for a condition that appears in response to a change, not one present at
+     * load.
+     */
+    live?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Callout({ tone, emphasis, title, icon, children, actions, live, className, ref, ...props }: CalloutProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,219 @@
+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;
+        };
+    };
+    radius: {
+        xl: {
+            root: string;
+        };
+        md: {
+            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;
+        };
+    };
+    radius: {
+        xl: {
+            root: string;
+        };
+        md: {
+            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;
+        };
+    };
+    radius: {
+        xl: {
+            root: string;
+        };
+        md: {
+            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;
+    /** DOM id, e.g. a URL-anchor target. */
+    id?: string;
+    className?: string;
+    children?: ReactNode;
+    ref?: Ref<HTMLElement>;
+    onClick?: (event: React.MouseEvent) => void;
+}
+export declare function Card({ variant, radius, 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 {};