@botiverse/raft-ui 0.50.0 → 0.52.0

package/dist/components/button/button.mjs

@@ -0,0 +1,177 @@
+import { controlIconInset } from "../../lib/head-edges.mjs";
+import { tv } from "../../lib/tv.mjs";
+import { defaultNativeButton } from "../../lib/default-native-button.mjs";
+import { Spinner } from "../spinner/spinner.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+//#region src/components/button/button.tsx
+const sticker = (fill) => [`border-sticker-ink ${fill} text-sticker-ink ring-[1.5px] ring-sticker-edge`, "hover:overlay-sticker-medium active:overlay-sticker-medium"];
+const outline = (ink) => [`border-line-strong bg-layer-card ${ink}`, "hover:overlay-medium active:overlay-medium"];
+const textMd = [
+	"h-8 gap-2 rounded-control px-3 py-0 text-control",
+	"has-data-[icon=inline-start]:pl-2.5 has-data-[icon=inline-end]:pr-2.5",
+	"[&_svg:not([class*='size-'])]:size-4 **:data-icon:size-[1em]",
+	"after:absolute after:inset-x-0 after:-inset-y-[calc(--spacing(1.5)+1.5px)]"
+];
+const iconMd = ["size-8 rounded-control p-0 [&_svg:not([class*='size-'])]:size-[18px]", "after:absolute after:-inset-[calc(--spacing(1.5)+1.5px)]"];
+const buttonVariants = tv({
+	slots: {
+		root: [
+			"relative inline-flex shrink-0 items-center justify-center",
+			"whitespace-nowrap select-none",
+			"rounded-none border-[1.5px] font-sans font-bold shadow-none",
+			"transition-colors duration-100",
+			"outline-[1px] outline-offset-2 outline-transparent focus-visible:outline-transparent",
+			"focus-visible:shadow-focus",
+			"data-[loading=true]:cursor-wait data-[loading=true]:opacity-100",
+			"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+			"disabled:pointer-events-none aria-disabled:cursor-not-allowed",
+			"disabled:transform-none aria-disabled:transform-none",
+			"aria-disabled:hover:translate-none",
+			"aria-disabled:active:translate-none aria-disabled:active:scale-none",
+			"disabled:opacity-100 aria-disabled:opacity-100",
+			"disabled:border-line-hairline disabled:bg-fill-muted disabled:bg-none disabled:text-foreground-disabled disabled:ring-0",
+			"aria-disabled:border-line-hairline aria-disabled:bg-fill-muted aria-disabled:bg-none aria-disabled:text-foreground-disabled aria-disabled:ring-0"
+		],
+		content: "relative z-10 inline-flex items-center justify-center gap-[inherit] data-[loading=true]:invisible",
+		loadingIndicator: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center"
+	},
+	variants: {
+		variant: {
+			primary: { root: sticker("bg-attention-400") },
+			accent: { root: sticker("bg-attention-400") },
+			warning: { root: sticker("bg-warning") },
+			danger: { root: sticker("bg-danger") },
+			default: { root: outline("text-foreground") },
+			outline: { root: outline("text-foreground") },
+			information: { root: outline("text-foreground") },
+			muted: { root: outline("text-foreground") },
+			success: { root: outline("text-foreground") },
+			"danger-secondary": { root: outline("text-danger-strong") },
+			"danger-outline": { root: outline("text-danger-strong") },
+			ghost: { root: ["border-transparent bg-transparent text-foreground", "hover:bg-fill-medium active:bg-fill-medium"] },
+			"on-frame": { root: [
+				"border-transparent bg-transparent text-foreground-on-frame",
+				"hover:bg-fill-frame-medium active:bg-fill-frame-medium",
+				"aria-expanded:bg-fill-frame-medium data-popup-open:bg-fill-frame-medium",
+				"disabled:border-transparent disabled:bg-transparent",
+				"aria-disabled:border-transparent aria-disabled:bg-transparent"
+			] }
+		},
+		size: {
+			xs: { root: textMd },
+			sm: { root: textMd },
+			md: { root: textMd },
+			lg: { root: [
+				"h-control gap-2 rounded-control px-4 py-0 text-subhead",
+				"has-data-[icon=inline-start]:pl-3.5 has-data-[icon=inline-end]:pr-3.5",
+				"[&_svg:not([class*='size-'])]:size-[18px] **:data-icon:size-[1em]",
+				"after:absolute after:inset-x-0 after:-inset-y-[calc(var(--spacing-control-hit)+1.5px)]"
+			] },
+			xl: { root: ["h-control-cta gap-2 rounded-control px-5 py-0 text-body", "[&_svg:not([class*='size-'])]:size-[18px] **:data-icon:size-[1em]"] },
+			"icon-xs": { root: iconMd },
+			"icon-sm": { root: iconMd },
+			"icon-md": { root: iconMd },
+			"icon-lg": { root: ["size-control rounded-control p-0 [&_svg:not([class*='size-'])]:size-control-icon", "after:absolute after:-inset-[calc(var(--spacing-control-hit)+1.5px)]"] }
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "md"
+	},
+	compoundVariants: [
+		{
+			variant: "ghost",
+			size: [
+				"xs",
+				"sm",
+				"md",
+				"lg",
+				"xl"
+			],
+			class: { root: [
+				"in-data-stacked:border-line-strong in-data-stacked:bg-layer-card",
+				"in-data-stacked:hover:bg-layer-card in-data-stacked:active:bg-layer-card",
+				"in-data-stacked:hover:overlay-medium in-data-stacked:active:overlay-medium"
+			] }
+		},
+		{
+			variant: "ghost",
+			size: [
+				"icon-xs",
+				"icon-sm",
+				"icon-md",
+				"icon-lg"
+			],
+			class: { root: ["disabled:border-transparent disabled:bg-transparent", "aria-disabled:border-transparent aria-disabled:bg-transparent"] }
+		},
+		{
+			variant: ["ghost", "on-frame"],
+			size: "icon-lg",
+			class: { root: controlIconInset }
+		},
+		{
+			variant: "ghost",
+			size: [
+				"icon-xs",
+				"icon-sm",
+				"icon-md"
+			],
+			class: { root: "[--icon-inset:calc((--spacing(8)-18px)/2)]" }
+		},
+		{
+			variant: "on-frame",
+			size: [
+				"xs",
+				"sm",
+				"md"
+			],
+			class: { root: "h-9 px-2.5 text-subhead after:-inset-y-[calc(--spacing(1)+1.5px)]" }
+		},
+		{
+			variant: "on-frame",
+			size: [
+				"icon-xs",
+				"icon-sm",
+				"icon-md"
+			],
+			class: { root: ["size-9 after:-inset-[calc(--spacing(1)+1.5px)] [&_svg:not([class*='size-'])]:size-5", "[--icon-inset:calc((--spacing(9)-20px)/2)]"] }
+		}
+	]
+});
+const FRAMELESS = /* @__PURE__ */ new Set(["ghost", "on-frame"]);
+const ICON_SIZES = /* @__PURE__ */ new Set([
+	"icon-xs",
+	"icon-sm",
+	"icon-md",
+	"icon-lg"
+]);
+function Button$1({ variant, size, loading = false, loadingLabel = "Loading", disabled, className, children, render, nativeButton, ...props }) {
+	const { root, content, loadingIndicator } = buttonVariants({
+		variant,
+		size
+	});
+	return /* @__PURE__ */ jsxs(Button, {
+		...props,
+		render,
+		nativeButton: nativeButton ?? defaultNativeButton(render),
+		"data-slot": "button",
+		"data-icon-inset": FRAMELESS.has(variant ?? "default") && ICON_SIZES.has(size ?? "md") ? "" : void 0,
+		className: root({ className }),
+		"data-loading": loading ? "true" : void 0,
+		disabled: disabled || loading,
+		...loading ? { "aria-disabled": true } : {},
+		children: [loading ? /* @__PURE__ */ jsx("span", {
+			"data-slot": "button-loading-indicator",
+			className: loadingIndicator(),
+			children: /* @__PURE__ */ jsx(Spinner, { "aria-label": loadingLabel })
+		}) : null, /* @__PURE__ */ jsx("span", {
+			"data-slot": "button-content",
+			"data-loading": loading ? "true" : void 0,
+			className: content(),
+			children
+		})]
+	});
+}
+//#endregion
+export { Button$1 as Button, buttonVariants };

package/dist/components/button/index.d.mts

@@ -0,0 +1,2 @@
+import { Button, ButtonProps, ButtonSize, DeprecatedButtonSize, buttonVariants } from "./button.mjs";
+export { Button, type ButtonProps, type ButtonSize, type DeprecatedButtonSize, buttonVariants };

package/dist/components/card/card.d.mts

@@ -0,0 +1,21 @@
+import { VariantProps } from "../../lib/tv.mjs";
+import { card } from "./card.recipe.mjs";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/card/card.d.ts
+export type CardProps = useRender.ComponentProps<"div"> & VariantProps<typeof card>;
+export declare function Card({ className, render, variant, ...props }: CardProps): import("react").JSX.Element;
+export type CardHeaderProps = useRender.ComponentProps<"div">;
+export declare function CardHeader({ className, render, ...props }: CardHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type CardTitleProps = useRender.ComponentProps<"div">;
+export declare function CardTitle({ className, render, ...props }: CardTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type CardLeadingProps = useRender.ComponentProps<"div">;
+export declare function CardLeading({ className, render, ...props }: CardLeadingProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type CardDescriptionProps = useRender.ComponentProps<"div">;
+export declare function CardDescription({ className, render, ...props }: CardDescriptionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type CardTrailingProps = useRender.ComponentProps<"div">;
+export declare function CardTrailing({ className, render, ...props }: CardTrailingProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type CardContentProps = useRender.ComponentProps<"div">;
+export declare function CardContent({ className, render, ...props }: CardContentProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type CardFooterProps = useRender.ComponentProps<"div">;
+export declare function CardFooter({ className, render, ...props }: CardFooterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/components/card/card.mjs

@@ -0,0 +1,114 @@
+import { card } from "./card.recipe.mjs";
+import { createContext, use } from "react";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/card/card.tsx
+const CardVariantContext = createContext("default");
+function useCardRecipe() {
+	const variant = use(CardVariantContext);
+	return card({ variant });
+}
+function Card({ className, render, variant = "default", ...props }) {
+	const { root } = card({ variant });
+	const defaultProps = {
+		"data-slot": "card",
+		"data-variant": variant,
+		className: root({ className })
+	};
+	const element = useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+	return /* @__PURE__ */ jsx(CardVariantContext, {
+		value: variant,
+		children: element
+	});
+}
+function CardHeader({ className, render, ...props }) {
+	const { header } = useCardRecipe();
+	const defaultProps = {
+		"data-slot": "card-header",
+		className: header({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function CardTitle({ className, render, ...props }) {
+	const { title } = useCardRecipe();
+	const defaultProps = {
+		"data-slot": "card-title",
+		className: title({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function CardLeading({ className, render, ...props }) {
+	const { leading } = useCardRecipe();
+	const defaultProps = {
+		"data-slot": "card-leading",
+		className: leading({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function CardDescription({ className, render, ...props }) {
+	const { description } = useCardRecipe();
+	const defaultProps = {
+		"data-slot": "card-description",
+		className: description({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function CardTrailing({ className, render, ...props }) {
+	const { trailing } = useCardRecipe();
+	const defaultProps = {
+		"data-slot": "card-trailing",
+		className: trailing({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function CardContent({ className, render, ...props }) {
+	const { content } = useCardRecipe();
+	const defaultProps = {
+		"data-slot": "card-content",
+		className: content({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function CardFooter({ className, render, ...props }) {
+	const { footer } = useCardRecipe();
+	const defaultProps = {
+		"data-slot": "card-footer",
+		className: footer({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardLeading, CardTitle, CardTrailing };

package/dist/components/card/card.recipe.d.mts

@@ -0,0 +1,105 @@
+//#region src/components/card/card.recipe.d.ts
+export declare const card: import("tailwind-variants/lite").TVReturnType<{
+  variant: {
+    default: {
+      root: string[];
+      header: string[];
+      content: string[];
+      footer: string[];
+    };
+    /** A selectable option INSIDE a form, not a panel on top of one: it sits
+     *  in the control plane, and its title drops from the card-title scale
+     *  to the field scale so it cannot outrank the field label above it. */
+    option: {
+      root: string[];
+      header: string[];
+      content: string[];
+      title: string[];
+      description: string[];
+    };
+    inset: {
+      root: string[];
+      header: string[];
+      content: string[];
+      footer: string[];
+    };
+  };
+}, {
+  root: string[];
+  header: string[];
+  title: string[];
+  leading: string[];
+  description: string[];
+  trailing: string[];
+  content: string[];
+  footer: string[];
+}, undefined, {
+  variant: {
+    default: {
+      root: string[];
+      header: string[];
+      content: string[];
+      footer: string[];
+    };
+    /** A selectable option INSIDE a form, not a panel on top of one: it sits
+     *  in the control plane, and its title drops from the card-title scale
+     *  to the field scale so it cannot outrank the field label above it. */
+    option: {
+      root: string[];
+      header: string[];
+      content: string[];
+      title: string[];
+      description: string[];
+    };
+    inset: {
+      root: string[];
+      header: string[];
+      content: string[];
+      footer: string[];
+    };
+  };
+}, {
+  root: string[];
+  header: string[];
+  title: string[];
+  leading: string[];
+  description: string[];
+  trailing: string[];
+  content: string[];
+  footer: string[];
+}, import("tailwind-variants/lite").TVReturnTypeLike<{
+  variant: {
+    default: {
+      root: string[];
+      header: string[];
+      content: string[];
+      footer: string[];
+    };
+    /** A selectable option INSIDE a form, not a panel on top of one: it sits
+     *  in the control plane, and its title drops from the card-title scale
+     *  to the field scale so it cannot outrank the field label above it. */
+    option: {
+      root: string[];
+      header: string[];
+      content: string[];
+      title: string[];
+      description: string[];
+    };
+    inset: {
+      root: string[];
+      header: string[];
+      content: string[];
+      footer: string[];
+    };
+  };
+}, {
+  root: string[];
+  header: string[];
+  title: string[];
+  leading: string[];
+  description: string[];
+  trailing: string[];
+  content: string[];
+  footer: string[];
+}>>;
+//#endregion

package/dist/components/card/card.recipe.mjs

@@ -0,0 +1,67 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/card/card.recipe.ts
+const card = tv({
+	slots: {
+		root: ["flex min-w-0 flex-col overflow-hidden", "text-foreground"],
+		header: [
+			"group/card-header grid min-w-0 auto-rows-min grid-cols-1 items-start gap-x-4 gap-y-1",
+			"has-[>[data-slot=card-leading]]:grid-cols-[auto_minmax(0,1fr)]",
+			"has-[>[data-slot=card-trailing]]:grid-cols-[minmax(0,1fr)_auto]",
+			"has-[>[data-slot=card-leading]]:has-[>[data-slot=card-trailing]]:grid-cols-[auto_minmax(0,1fr)_auto]",
+			"has-[>[data-slot=card-leading]]:[--card-text-col:2]",
+			"has-[>[data-slot=card-leading]]:[--card-trailing-col:3]"
+		],
+		title: [
+			"row-start-1 min-w-0",
+			"col-start-(--card-text-col,1)",
+			"font-sans text-card-title font-card-title text-foreground"
+		],
+		leading: [
+			"col-start-1 row-span-2 row-start-1",
+			"flex shrink-0 items-center self-start",
+			"[&>svg]:size-4 [&>svg]:shrink-0",
+			"min-h-(--card-title-line-height)"
+		],
+		description: [
+			"row-start-2 min-w-0",
+			"col-start-(--card-text-col,1)",
+			"font-sans text-callout text-pretty text-foreground-muted"
+		],
+		trailing: ["row-start-1 col-start-(--card-trailing-col,2)", "flex shrink-0 items-center self-center justify-self-end"],
+		content: ["min-w-0"],
+		footer: [
+			"flex min-w-0 gap-2",
+			"flex-nowrap items-center",
+			"font-sans text-caption text-foreground-hint",
+			"[&>svg]:size-3.5 [&>svg]:shrink-0",
+			"[&>:not(svg)]:min-w-0"
+		]
+	},
+	variants: { variant: {
+		default: {
+			root: ["rounded-container border border-line-hairline bg-layer-card", "shadow-none"],
+			header: ["p-4 has-[+[data-slot=card-content]]:pb-0"],
+			content: ["p-4"],
+			footer: ["border-t border-line-hairline px-4 py-3"]
+		},
+		/** A selectable option INSIDE a form, not a panel on top of one: it sits
+		*  in the control plane, and its title drops from the card-title scale
+		*  to the field scale so it cannot outrank the field label above it. */
+		option: {
+			root: ["rounded-control border-[1.5px] border-line-field bg-layer-card", "shadow-none"],
+			header: ["gap-x-3 p-3"],
+			content: ["px-3 pb-3"],
+			title: ["font-sans text-callout font-semibold"],
+			description: ["font-sans text-footnote text-foreground-muted"]
+		},
+		inset: {
+			root: ["rounded-container border border-line-hairline bg-layer-card", "shadow-none"],
+			header: ["px-4 py-3"],
+			content: ["border-t border-line-hairline p-4 first:border-t-0"],
+			footer: ["border-t border-line-hairline px-4 py-3"]
+		}
+	} },
+	defaultVariants: { variant: "default" }
+});
+//#endregion
+export { card };

package/dist/components/card/index.d.mts

@@ -0,0 +1,2 @@
+import { Card, CardContent, CardContentProps, CardDescription, CardDescriptionProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardLeading, CardLeadingProps, CardProps, CardTitle, CardTitleProps, CardTrailing, CardTrailingProps } from "./card.mjs";
+export { Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, CardLeading, type CardLeadingProps, type CardProps, CardTitle, type CardTitleProps, CardTrailing, type CardTrailingProps };

package/dist/components/checkbox/checkbox-indicator.d.mts

@@ -0,0 +1,92 @@
+import { VariantProps } from "../../lib/tv.mjs";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/checkbox/checkbox-indicator.d.ts
+declare const checkboxIndicator: import("tailwind-variants/lite").TVReturnType<{
+  shape: {
+    square: "";
+    circle: {
+      root: string;
+    };
+  };
+  checked: {
+    true: {
+      root: string;
+    };
+    false: {
+      root: string;
+    };
+  };
+  disabled: {
+    true: {
+      root: string;
+    };
+    false: "";
+  };
+  previewOnHover: {
+    true: "";
+    false: "";
+  };
+}, {
+  root: string[];
+}, undefined, {
+  shape: {
+    square: "";
+    circle: {
+      root: string;
+    };
+  };
+  checked: {
+    true: {
+      root: string;
+    };
+    false: {
+      root: string;
+    };
+  };
+  disabled: {
+    true: {
+      root: string;
+    };
+    false: "";
+  };
+  previewOnHover: {
+    true: "";
+    false: "";
+  };
+}, {
+  root: string[];
+}, import("tailwind-variants/lite").TVReturnTypeLike<{
+  shape: {
+    square: "";
+    circle: {
+      root: string;
+    };
+  };
+  checked: {
+    true: {
+      root: string;
+    };
+    false: {
+      root: string;
+    };
+  };
+  disabled: {
+    true: {
+      root: string;
+    };
+    false: "";
+  };
+  previewOnHover: {
+    true: "";
+    false: "";
+  };
+}, {
+  root: string[];
+}>>;
+type CheckboxIndicatorMark = "check" | "minus";
+export type CheckboxIndicatorProps = ComponentPropsWithRef<"span"> & Omit<VariantProps<typeof checkboxIndicator>, "checked"> & {
+  checked: boolean;
+  mark?: CheckboxIndicatorMark;
+};
+export declare function CheckboxIndicator({ checked, mark, shape, disabled, previewOnHover, className, ...props }: CheckboxIndicatorProps): import("react").JSX.Element;
+//#endregion

package/dist/components/checkbox/checkbox-indicator.mjs

@@ -0,0 +1,61 @@
+import { tv } from "../../lib/tv.mjs";
+import { Check, Minus } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/checkbox/checkbox-indicator.tsx
+const checkboxIndicator = tv({
+	slots: { root: [
+		"inline-flex size-5 shrink-0 items-center justify-center",
+		"rounded-sticker border-[1.5px] border-line-strong transition-colors",
+		"[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 [&_svg]:stroke-2"
+	] },
+	variants: {
+		shape: {
+			square: "",
+			circle: { root: "rounded-full" }
+		},
+		checked: {
+			true: { root: "border-foreground bg-foreground text-foreground-inverse" },
+			false: { root: "bg-layer-card text-transparent" }
+		},
+		disabled: {
+			true: { root: "border-foreground-disabled bg-fill-muted" },
+			false: ""
+		},
+		previewOnHover: {
+			true: "",
+			false: ""
+		}
+	},
+	compoundVariants: [{
+		checked: false,
+		previewOnHover: true,
+		class: { root: "group-hover:text-foreground/20" }
+	}, {
+		checked: true,
+		disabled: true,
+		class: { root: "bg-foreground-disabled text-layer-card" }
+	}],
+	defaultVariants: {
+		shape: "square",
+		disabled: false,
+		previewOnHover: false
+	}
+});
+function CheckboxIndicator({ checked, mark = "check", shape, disabled, previewOnHover, className, ...props }) {
+	const { root } = checkboxIndicator({
+		shape,
+		checked,
+		disabled,
+		previewOnHover
+	});
+	const Icon = mark === "minus" ? Minus : Check;
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		"data-slot": "checkbox-indicator-graphic",
+		"aria-hidden": true,
+		className: root({ className }),
+		children: (checked || previewOnHover) && /* @__PURE__ */ jsx(Icon, {})
+	});
+}
+//#endregion
+export { CheckboxIndicator };

package/dist/components/checkbox/checkbox.d.mts

@@ -0,0 +1,9 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { Checkbox } from "@base-ui/react/checkbox";
+//#region src/components/checkbox/checkbox.d.ts
+export type CheckboxProps = StyledProps<Checkbox.Root.Props> & {
+  shape?: "square" | "circle";
+};
+declare function Checkbox$1({ shape, className, ...props }: CheckboxProps): import("react").JSX.Element;
+//#endregion
+export { Checkbox$1 as Checkbox };