raft-ui
Version:
React UI components for Raft.
320 lines • 8.78 kB
text/typescript
import { Dialog } from "@base-ui/react/dialog";
import { VariantProps } from "tailwind-variants/lite";
import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
import { Button } from "@base-ui/react/button";
import { useRender } from "@base-ui/react/use-render";
//#region src/lib/styled-props.d.ts
/**
* Base UI components type `className` as `string | ((state) => string)`, but our
* tv() recipes only accept a plain string. `StyledProps` narrows a Base UI
* component's props to a string `className` so they can flow into a recipe.
*
* The state-callback form is intentionally dropped: our components express every
* state through `data-*` variants in the recipe, so a caller never needs it.
*/
type StyledProps<P> = Omit<P, "className" | "style"> & {
className?: string;
style?: CSSProperties;
};
//#endregion
//#region src/lib/data-attributes.d.ts
type DataAttributes = Record<`data-${string}`, string | undefined>;
//#endregion
//#region src/components/button/button.d.ts
declare const buttonVariants: import("tailwind-variants/lite").TVReturnType<{
variant: {
primary: {
root: string[];
};
accent: {
root: string[];
};
warning: {
root: string[];
};
danger: {
root: string[];
};
default: {
root: string[];
};
outline: {
root: string[];
};
information: {
root: string[];
};
muted: {
root: string[];
};
success: {
root: string[];
};
"danger-secondary": {
root: string[];
};
"danger-outline": {
root: string[];
};
ghost: {
root: string[];
};
link: {
root: string[];
};
};
size: {
xs: {
root: string[];
};
sm: {
root: string[];
};
md: {
root: string[];
};
lg: {
root: string[];
};
xl: {
root: string[];
};
inline: {
root: string[];
};
"icon-xs": {
root: string[];
};
"icon-sm": {
root: string[];
};
"icon-md": {
root: string[];
};
"icon-lg": {
root: string;
};
};
}, {
root: string[];
content: string;
loadingIndicator: string;
}, undefined, {
variant: {
primary: {
root: string[];
};
accent: {
root: string[];
};
warning: {
root: string[];
};
danger: {
root: string[];
};
default: {
root: string[];
};
outline: {
root: string[];
};
information: {
root: string[];
};
muted: {
root: string[];
};
success: {
root: string[];
};
"danger-secondary": {
root: string[];
};
"danger-outline": {
root: string[];
};
ghost: {
root: string[];
};
link: {
root: string[];
};
};
size: {
xs: {
root: string[];
};
sm: {
root: string[];
};
md: {
root: string[];
};
lg: {
root: string[];
};
xl: {
root: string[];
};
inline: {
root: string[];
};
"icon-xs": {
root: string[];
};
"icon-sm": {
root: string[];
};
"icon-md": {
root: string[];
};
"icon-lg": {
root: string;
};
};
}, {
root: string[];
content: string;
loadingIndicator: string;
}, import("tailwind-variants/lite").TVReturnTypeLike<{
variant: {
primary: {
root: string[];
};
accent: {
root: string[];
};
warning: {
root: string[];
};
danger: {
root: string[];
};
default: {
root: string[];
};
outline: {
root: string[];
};
information: {
root: string[];
};
muted: {
root: string[];
};
success: {
root: string[];
};
"danger-secondary": {
root: string[];
};
"danger-outline": {
root: string[];
};
ghost: {
root: string[];
};
link: {
root: string[];
};
};
size: {
xs: {
root: string[];
};
sm: {
root: string[];
};
md: {
root: string[];
};
lg: {
root: string[];
};
xl: {
root: string[];
};
inline: {
root: string[];
};
"icon-xs": {
root: string[];
};
"icon-sm": {
root: string[];
};
"icon-md": {
root: string[];
};
"icon-lg": {
root: string;
};
};
}, {
root: string[];
content: string;
loadingIndicator: string;
}>>;
type ButtonProps = StyledProps<Button.Props> & VariantProps<typeof buttonVariants> & DataAttributes & {
loading?: boolean;
loadingLabel?: string;
};
declare function Button$1({ variant, size, loading, loadingLabel, disabled, className, children, render, nativeButton, ...props }: ButtonProps): import("react").JSX.Element;
//#endregion
//#region src/components/dialog/dialog.d.ts
type DialogProps = Dialog.Root.Props;
declare function Dialog$1(props: DialogProps): import("react").JSX.Element;
type DialogTriggerProps = Dialog.Trigger.Props;
declare function DialogTrigger(props: DialogTriggerProps): import("react").JSX.Element;
type DialogPortalProps = Dialog.Portal.Props;
declare function DialogPortal(props: DialogPortalProps): import("react").JSX.Element;
type DialogOverlayProps = StyledProps<Dialog.Backdrop.Props> & {
layer?: 0 | 1;
};
declare function DialogOverlay({ className, layer, ...props }: DialogOverlayProps): import("react").JSX.Element;
type DialogContentProps = StyledProps<Dialog.Popup.Props> & {
portalProps?: DialogPortalProps;
overlay?: false | DialogOverlayProps;
size?: "sm" | "md" | "lg" | "wide";
layer?: 0 | 1;
};
declare function DialogContent({ className, children, portalProps, overlay, size, layer, ...props }: DialogContentProps): import("react").JSX.Element;
type DialogCloseProps = Dialog.Close.Props & Pick<ButtonProps, "variant" | "size"> & {
className?: string;
children?: ReactNode;
};
declare function DialogClose({ className, variant, size, children, render, "aria-label": ariaLabel, ...props }: DialogCloseProps): import("react").JSX.Element;
type DialogHeaderProps = ComponentPropsWithRef<"div"> & {
/** A pinned bar of a scrolling (`size="wide"`) dialog. */
bar?: boolean;
};
declare function DialogHeader({ className, bar, ...props }: DialogHeaderProps): import("react").JSX.Element;
type DialogBodyProps = ComponentPropsWithRef<"div"> & {
/** A pinned bar of a scrolling (`size="wide"`) dialog. */
bar?: boolean;
};
declare function DialogBody({ className, bar, ...props }: DialogBodyProps): import("react").JSX.Element;
type DialogFooterProps = ComponentPropsWithRef<"div"> & {
/** A pinned bar of a scrolling (`size="wide"`) dialog. */
bar?: boolean;
};
declare function DialogFooter({ className, bar, ...props }: DialogFooterProps): import("react").JSX.Element;
type DialogTitleProps = StyledProps<Dialog.Title.Props>;
declare function DialogTitle({ className, ...props }: DialogTitleProps): import("react").JSX.Element;
type DialogDescriptionProps = StyledProps<Dialog.Description.Props>;
declare function DialogDescription({ className, ...props }: DialogDescriptionProps): import("react").JSX.Element;
type DialogSurfaceProps = useRender.ComponentProps<"div">;
/**
* The dialog's frame — the popover layer, the dialog radius, the seam ring
* and the float shadow — for a centred modal whose lifecycle the app owns
* (its own backdrop, Escape and focus handling). It neither positions nor
* animates itself: the host centres it, and a centred modal has no motion.
* DialogContent draws the same frame for a Base UI dialog.
*/
declare function DialogSurface({ className, render, ...props }: DialogSurfaceProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
type DialogNavProps = useRender.ComponentProps<"nav">;
/** The section list of a wide (`size="wide"`) dialog, inside a `bar` body. */
declare function DialogNav({ className, render, ...props }: DialogNavProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
//#endregion
export { VariantProps as A, DialogTitle as C, Button$1 as D, DialogTriggerProps as E, StyledProps as M, ButtonProps as O, DialogSurfaceProps as S, DialogTrigger as T, DialogOverlayProps as _, DialogCloseProps as a, DialogProps as b, DialogDescription as c, DialogFooterProps as d, DialogHeader as f, DialogOverlay as g, DialogNavProps as h, DialogClose as i, DataAttributes as j, buttonVariants as k, DialogDescriptionProps as l, DialogNav as m, DialogBody as n, DialogContent as o, DialogHeaderProps as p, DialogBodyProps as r, DialogContentProps as s, Dialog$1 as t, DialogFooter as u, DialogPortal as v, DialogTitleProps as w, DialogSurface as x, DialogPortalProps as y };