@kb.ui/react 0.0.0-stage → 0.10.2

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,45 @@
+import { Radio } from "@base-ui/react/radio";
+import { type ComponentProps, type ReactNode } from "react";
+import { type ClassNames } from "../../utils/kb";
+export type RadioGroupProps = Omit<ComponentProps<"div">, "onChange" | "defaultValue"> & {
+    /** Visible group label. */
+    label: string;
+    /** Controlled choice; null means none selected. */
+    value: string | null;
+    /** Receives the selected item's value. */
+    onValueChange: (value: string) => void;
+    /** Disable all items. */
+    disabled?: boolean;
+    /** Segmented visual treatment; native single-choice behavior stays shared. */
+    appearance?: "standard" | "segmented";
+    /** Segmented background movement; reduced motion always wins. */
+    selectionMotion?: "slide" | "none";
+    /** Segmented selection color. */
+    selectionTone?: "primary" | "neutral";
+    /** Native form field name. */
+    name?: string;
+    /** Helper text for group. */
+    description?: string;
+    /** Group error message. */
+    error?: string;
+    /** Keep group label accessible but visually hidden. */
+    visuallyHidden?: boolean;
+    /** Classes for inner parts, keyed by part. */
+    classNames?: ClassNames<"label" | "options" | "description" | "error">;
+};
+export type RadioGroupItemProps = Omit<Radio.Root.Props<string>, "className" | "children" | "render"> & {
+    /** Plain class on item label. */
+    className?: string;
+    /** Caller content supplies meaningful item label. */
+    children: ReactNode;
+    /** Class on focusable radio slot. */
+    controlClassName?: string;
+    /** Classes for inner parts, keyed by part. */
+    classNames?: ClassNames<"item" | "control" | "indicator" | "content">;
+};
+declare function RadioGroupRoot({ classNames, label, value, onValueChange, disabled, appearance, selectionMotion, selectionTone, name, description, error, visuallyHidden, className, children, onFocusCapture, onBlurCapture, "aria-invalid": callerAriaInvalid, ...props }: RadioGroupProps): import("react").JSX.Element;
+declare function RadioGroupItem({ classNames, className, children, controlClassName, ...props }: RadioGroupItemProps): import("react").JSX.Element;
+export declare const RadioGroup: typeof RadioGroupRoot & {
+    Item: typeof RadioGroupItem;
+};
+export {};

package/dist/components/ScrollArea/ScrollArea.d.ts

@@ -0,0 +1,17 @@
+import { ScrollArea as Base } from "@base-ui/react/scroll-area";
+import type { ReactNode } from "react";
+import { type ClassNames } from "../../utils/kb";
+/** Scrolling region that keyboard users can reach: the viewport is a named, focusable region. */
+export type ScrollAreaProps = Omit<Base.Root.Props, "className" | "children"> & {
+    /** Plain class string; Base UI's function form is not supported. */
+    className?: string;
+    /** Accessible name of the region. */
+    label: string;
+    /** Height cap, any CSS length; content scrolls past it. */
+    maxHeight?: string;
+    /** Scrolled content. */
+    children: ReactNode;
+    /** Classes for inner parts, keyed by part. */
+    classNames?: ClassNames<"viewport" | "scrollbar" | "thumb">;
+};
+export declare function ScrollArea({ classNames, label, maxHeight, className, style, children, ...props }: ScrollAreaProps): import("react").JSX.Element;

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

@@ -0,0 +1,39 @@
+import { Select as Base } from "@base-ui/react/select";
+import { type ComponentProps } from "react";
+import { type ClassNames } from "../../utils/kb";
+export type SelectOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+export type SelectProps = Omit<ComponentProps<"div">, "onChange" | "children" | "defaultValue"> & {
+    /** Visible label for the trigger. */
+    label: string;
+    /** Controlled selection; null displays the placeholder. */
+    value: string | null;
+    /** Receives selected value; consumers own domain transitions. */
+    onValueChange: (value: string | null) => void;
+    /** Unique string-valued options; an empty collection is supported. */
+    options: readonly SelectOption[];
+    /** Text when value is null. */
+    placeholder?: string;
+    /** Field helper text. */
+    description?: string;
+    /** Visible invalid-state message. */
+    error?: string;
+    /** Disable interaction and form submission. */
+    disabled?: boolean;
+    /** Preserve value while preventing changes. */
+    readOnly?: boolean;
+    /** Native form field name. */
+    name?: string;
+    /** Class on trigger slot. */
+    controlClassName?: string;
+    /** Class on popup slot. */
+    popupClassName?: string;
+    /** Portal host; defaults to field root to retain theme. */
+    container?: Base.Portal.Props["container"];
+    /** Classes for inner parts, keyed by part. */
+    classNames?: ClassNames<"control" | "popup" | "label" | "icon" | "portal" | "positioner" | "list" | "item" | "indicator" | "empty" | "description" | "error">;
+};
+export declare function Select({ classNames, label, value, onValueChange, options, placeholder, description, error, disabled, readOnly, name, className, controlClassName, popupClassName, container, ref, "aria-describedby": callerDescription, "aria-invalid": callerAriaInvalid, ...props }: SelectProps): import("react").JSX.Element;

package/dist/components/Separator/Separator.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps } from "react";
+export type SeparatorOrientation = "horizontal" | "vertical";
+export type SeparatorProps = Omit<ComponentProps<"hr">, "children" | "role" | "aria-hidden" | "aria-orientation"> & {
+    /** Direction of the visible rule and announced separator. */
+    orientation?: SeparatorOrientation;
+    /** Hide a visual-only divider from assistive technology. */
+    decorative?: boolean;
+};
+export declare function Separator({ orientation, decorative, className, ...props }: SeparatorProps): import("react").JSX.Element;

package/dist/components/Split/Split.d.ts

@@ -0,0 +1,20 @@
+import { type ClassNames } from "../../utils/kb";
+import type { LayoutAlign, LayoutElementProps, LayoutGap } from "../../utils/layout";
+export type SplitElement = "div" | "section" | "article";
+export type SplitRatio = "equal" | "wide-start" | "wide-end";
+export type SplitCollapse = "sm" | "md" | "lg";
+export type SplitProps<T extends SplitElement = "div"> = LayoutElementProps<T> & {
+    /** Classes for each layout-owned column track. */
+    classNames?: ClassNames<"track">;
+    /** Column proportions: 1:1, 2:1 or 1:2 in source order. */
+    ratio?: SplitRatio;
+    /** Available-width threshold below which columns stack. */
+    collapse?: SplitCollapse;
+    /** Space between columns or stacked rows. */
+    gap?: LayoutGap;
+    /** Cross-axis alignment while columns share a row. */
+    align?: LayoutAlign;
+};
+export declare function Split<T extends SplitElement = "div">({ as, ratio, collapse, gap, align, className, classNames, children, ...props }: SplitProps<T>): import("react").DetailedReactHTMLElement<Omit<SplitProps<T>, "align" | "as" | "children" | "className" | "classNames" | "collapse" | "gap" | "ratio"> & {
+    className: string;
+} & Record<`data-${string}`, string>, HTMLElement>;

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

@@ -0,0 +1,15 @@
+import type { ComponentProps, ReactNode } from "react";
+import { type ClassNames } from "../../utils/kb";
+export type StatSize = "md" | "display";
+/** A labelled value; the label renders first so it is read first. */
+export type StatProps = Omit<ComponentProps<"div">, "children"> & {
+    /** What the value measures. */
+    label: ReactNode;
+    /** The number or short text; figures are tabular. */
+    value: ReactNode;
+    /** Value size; display is for one headline number. */
+    size?: StatSize;
+    /** Classes for inner parts, keyed by part. */
+    classNames?: ClassNames<"label" | "value">;
+};
+export declare function Stat({ classNames, label, value, size, className, ...props }: StatProps): import("react").JSX.Element;

package/dist/components/Status/Status.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentProps, ReactNode } from "react";
+import { type ClassNames } from "../../utils/kb";
+export type StatusTone = "neutral" | "info" | "running" | "success" | "warning" | "blocked";
+export type StatusAppearance = "plain" | "chip";
+/** Text is mandatory: tone is never conveyed by color alone. */
+export type StatusProps = Omit<ComponentProps<"span">, "children"> & {
+    /** Visible label. */
+    children: ReactNode;
+    /** Meaning of the state; drives color and the icon slot's color. */
+    tone?: StatusTone;
+    /** Caller-provided decorative icon; kbui ships no icons. */
+    icon?: ReactNode;
+    /** Announce changes: adds role="status" and nothing else. */
+    live?: boolean;
+    /** Plain text and icon, or a chip tinted from the tone. */
+    appearance?: StatusAppearance;
+    /** Tighter spacing and smaller text; the text stays visible. */
+    compact?: boolean;
+    /** Classes for inner parts, keyed by part. */
+    classNames?: ClassNames<"icon" | "text">;
+};
+export declare function Status({ classNames, tone, appearance, icon, live, compact, className, children, ...props }: StatusProps): import("react").JSX.Element;

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,41 @@
+import { type ComponentProps, type CSSProperties, type ReactNode } from "react";
+import { type ClassNames } from "../../utils/kb";
+export type SwitchSize = "sm" | "md" | "lg";
+export type SwitchTone = "neutral" | "accent" | "info" | "success" | "warning" | "danger";
+export type SwitchProps = Omit<ComponentProps<"input">, "type" | "role" | "checked" | "defaultChecked" | "onChange" | "size" | "children" | "style"> & {
+    /** Visible, associated label. */
+    label: string;
+    /** Owner controls checked state. */
+    checked: boolean;
+    /** Requests next checked state. */
+    onCheckedChange: (checked: boolean) => void;
+    /** Track size; defaults to sm inside Fieldset and md elsewhere. */
+    size?: SwitchSize | undefined;
+    /** Shorthand tone for the on side when onTone is omitted. */
+    tone?: SwitchTone | undefined;
+    /** Semantic tone for the off side. */
+    offTone?: SwitchTone | undefined;
+    /** Semantic tone for the on side; defaults to accent. */
+    onTone?: SwitchTone | undefined;
+    /** Custom CSS color or token for the off side. */
+    offColor?: string | undefined;
+    /** Custom CSS color or token for the on side. */
+    onColor?: string | undefined;
+    /** Associated helper text. */
+    description?: string | undefined;
+    /** Associated error; marks native control invalid for assistive technology. */
+    error?: string | undefined;
+    /** Hide label visually; keep its accessible name. */
+    visuallyHidden?: boolean | undefined;
+    /** Decorative content in off position. */
+    offIcon?: ReactNode;
+    /** Decorative content in on position. */
+    onIcon?: ReactNode;
+    /** Added to native input; className belongs to root. */
+    controlClassName?: string | undefined;
+    /** Native styles; custom properties also feed visible planes. */
+    style?: CSSProperties | (CSSProperties & Record<`--${string}`, string | number | undefined>);
+    /** Classes for inner parts, keyed by part. */
+    classNames?: ClassNames<"control" | "label" | "field" | "target" | "track" | "thumb" | "off" | "on" | "description" | "error"> | undefined;
+};
+export declare function Switch({ classNames, label, checked, onCheckedChange, size, tone, offTone, onTone, offColor, onColor, description, error, visuallyHidden, offIcon, onIcon, controlClassName, className, style, id, disabled, readOnly, "aria-describedby": describedBy, "aria-invalid": callerAriaInvalid, ...props }: SwitchProps): import("react").JSX.Element;

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,15 @@
+import { type ComponentProps } from "react";
+export type TextElement = "p" | "span" | "div";
+export type TextSize = "sm" | "md" | "lg";
+export type TextTone = "default" | "muted";
+export type TextProps<T extends TextElement = "p"> = ComponentProps<T> & {
+    /** Native element; use span inside paragraphs and div for block children. */
+    as?: T;
+    /** Body size; inline links and code inherit surrounding size. */
+    size?: TextSize;
+    /** Default ink or secondary text with readable contrast. */
+    tone?: TextTone;
+};
+export declare function Text<T extends TextElement = "p">({ as, size, tone, className, ...props }: TextProps<T>): import("react").DetailedReactHTMLElement<Omit<TextProps<T>, "as" | "className" | "size" | "tone"> & {
+    className: string;
+} & Record<`data-${string}`, string>, HTMLSpanElement>;

package/dist/components/Textarea/Textarea.d.ts

@@ -0,0 +1,24 @@
+import { type ComponentProps } from "react";
+import { type ClassNames } from "../../utils/kb";
+export type TextareaResize = "vertical" | "none" | "both";
+export type TextareaPart = "label" | "control" | "description" | "error";
+export interface TextareaProps extends Omit<ComponentProps<"textarea">, "children"> {
+    /** Visible field label and accessible name. */
+    label: string;
+    /** Hide the label visually while keeping its accessible name. */
+    visuallyHidden?: boolean | undefined;
+    /** Supporting helper text below the textarea. */
+    description?: string | undefined;
+    /** Validation error message; marks the textarea invalid. */
+    error?: string | undefined;
+    /** Drag-resize axis for the native textarea. */
+    resize?: TextareaResize | undefined;
+    /** Callback fired with the next string value on change. */
+    onValueChange?: ((value: string) => void) | undefined;
+    /** Root wrapper class name. */
+    className?: string | undefined;
+    /** Classes for the label, control, description and error slots. */
+    classNames?: ClassNames<TextareaPart> | undefined;
+}
+/** Labelled multiline text control with associated helper and error messages. */
+export declare const Textarea: ({ ref, id, label, visuallyHidden, description, error, resize, rows, disabled, readOnly, onChange, onValueChange, className, classNames, "aria-describedby": ariaDescribedBy, "aria-invalid": callerAriaInvalid, ...props }: TextareaProps) => import("react").JSX.Element;

package/dist/components/Toolbar/Toolbar.d.ts

@@ -0,0 +1,31 @@
+import { Toolbar as Base } from "@base-ui/react/toolbar";
+import { type ButtonVariant } from "../Button/Button";
+/** One tab stop for a row of actions; arrow keys move between them. Name it with aria-label. */
+export type ToolbarProps = Omit<Base.Root.Props, "className"> & {
+    /** Plain class string; Base UI's function form is not supported. */
+    className?: string;
+};
+export type ToolbarGroupProps = Omit<Base.Group.Props, "className"> & {
+    /** Plain class string; Base UI's function form is not supported. */
+    className?: string;
+};
+export type ToolbarButtonProps = Omit<Base.Button.Props, "className" | "render"> & {
+    /** Plain class string; Base UI's function form is not supported. */
+    className?: string;
+    /** Button weight; toolbars default to ghost. */
+    variant?: ButtonVariant;
+};
+export type ToolbarSeparatorProps = Omit<Base.Separator.Props, "className"> & {
+    /** Plain class string; Base UI's function form is not supported. */
+    className?: string;
+};
+declare function ToolbarRoot({ className, ...props }: ToolbarProps): import("react").JSX.Element;
+declare function ToolbarGroup({ className, ...props }: ToolbarGroupProps): import("react").JSX.Element;
+declare function ToolbarButton({ variant, className, ...props }: ToolbarButtonProps): import("react").JSX.Element;
+declare function ToolbarSeparator({ className, ...props }: ToolbarSeparatorProps): import("react").JSX.Element;
+export declare const Toolbar: typeof ToolbarRoot & {
+    Group: typeof ToolbarGroup;
+    Button: typeof ToolbarButton;
+    Separator: typeof ToolbarSeparator;
+};
+export {};

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,20 @@
+import { Tooltip as Base } from "@base-ui/react/tooltip";
+import type { ReactElement, ReactNode, Ref } from "react";
+/** A visual hint only; the trigger still needs its own accessible name. */
+export type TooltipProps = {
+    /** Text shown in the popup. */
+    content: ReactNode;
+    /** The element that shows the tooltip on hover and focus. */
+    children: ReactElement;
+    /** Portal target for nested consumer themes. */
+    container?: Base.Portal.Props["container"];
+    /** Plain class on popup slot. */
+    className?: string;
+    /** Side of the trigger the popup prefers. */
+    side?: Base.Positioner.Props["side"];
+    /** Hover delay in ms before opening. */
+    delay?: number;
+    /** Ref forwarded to the popup element. */
+    ref?: Ref<HTMLDivElement>;
+};
+export declare function Tooltip({ content, children, side, delay, container, className, ref, }: TooltipProps): import("react").JSX.Element;

package/dist/index.d.ts

@@ -0,0 +1,37 @@
+export { Badge, type BadgeAppearance, type BadgeProps, type BadgeTone, } from "./components/Badge/Badge";
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, } from "./components/Button/Button";
+export { Callout, type CalloutProps, type CalloutTone } from "./components/Callout/Callout";
+export { Card, type CardProps } from "./components/Card/Card";
+export { Checkbox, type CheckboxProps } from "./components/Checkbox/Checkbox";
+export { Code, type CodeProps } from "./components/Code/Code";
+export { Combobox, type ComboboxOption, type ComboboxProps, type ComboboxSlot, } from "./components/Combobox/Combobox";
+export { Container, type ContainerElement, type ContainerProps, type ContainerSize, } from "./components/Container/Container";
+export { Dialog, type DialogActionsProps, type DialogCloseProps, type DialogContentProps, type DialogDescriptionProps, type DialogProps, type DialogSectionProps, type DialogTitleProps, type DialogTriggerProps, } from "./components/Dialog/Dialog";
+export { ErrorSummary, type ErrorSummaryHeadingLevel, type ErrorSummaryItem, type ErrorSummaryPart, type ErrorSummaryProps, } from "./components/ErrorSummary/ErrorSummary";
+export { Fieldset, type FieldsetPart, type FieldsetProps, } from "./components/Fieldset/Fieldset";
+export { FileInput, type FileInputItem, type FileInputProps, } from "./components/FileInput/FileInput";
+export { FormActions, type FormActionsAlign, type FormActionsProps, } from "./components/FormActions/FormActions";
+export { Grid, type GridProps } from "./components/Grid/Grid";
+export { Heading, type HeadingLevel, type HeadingProps, type HeadingSize, } from "./components/Heading/Heading";
+export { Inline, type InlineElement, type InlineJustify, type InlineProps, } from "./components/Inline/Inline";
+export { Input, type InputProps, type InputSize } from "./components/Input/Input";
+export { Link, type LinkProps } from "./components/Link/Link";
+export { Menu, type MenuContentProps, type MenuItemProps, type MenuProps, type MenuSeparatorProps, type MenuTriggerProps, } from "./components/Menu/Menu";
+export { MultiSelect, type MultiSelectOption, type MultiSelectProps, type MultiSelectSlot, } from "./components/MultiSelect/MultiSelect";
+export { NumberField, type NumberFieldProps, type NumberFieldSize, } from "./components/NumberField/NumberField";
+export { Panel, type PanelBodyProps, type PanelDensity, type PanelFooterProps, type PanelGroupDirection, type PanelGroupProps, type PanelHandleProps, type PanelHeaderProps, type PanelProps, type PanelRail, type PanelToggleProps, type PanelTone, type PanelToolbarProps, type PanelWellProps, } from "./components/Panel/Panel";
+export { Progress, type ProgressProps } from "./components/Progress/Progress";
+export { RadioGroup, type RadioGroupItemProps, type RadioGroupProps, } from "./components/RadioGroup/RadioGroup";
+export { ScrollArea, type ScrollAreaProps } from "./components/ScrollArea/ScrollArea";
+export { Select, type SelectOption, type SelectProps } from "./components/Select/Select";
+export { Separator, type SeparatorOrientation, type SeparatorProps, } from "./components/Separator/Separator";
+export { Split, type SplitCollapse, type SplitElement, type SplitProps, type SplitRatio, } from "./components/Split/Split";
+export { Stat, type StatProps, type StatSize } from "./components/Stat/Stat";
+export { Status, type StatusAppearance, type StatusProps, type StatusTone, } from "./components/Status/Status";
+export { Switch, type SwitchProps, type SwitchSize, type SwitchTone, } from "./components/Switch/Switch";
+export { Text, type TextElement, type TextProps, type TextSize, type TextTone, } from "./components/Text/Text";
+export { Textarea, type TextareaPart, type TextareaProps, type TextareaResize, } from "./components/Textarea/Textarea";
+export { Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarProps, type ToolbarSeparatorProps, } from "./components/Toolbar/Toolbar";
+export { Tooltip, type TooltipProps } from "./components/Tooltip/Tooltip";
+export { type ClassNames, kb } from "./utils/kb";
+export type { LayoutAlign, LayoutGap } from "./utils/layout";