@mcp-b/react-components 0.1.1 → 0.1.2

package/dist/components/Autocomplete.d.ts

@@ -0,0 +1,186 @@
+import * as React from "react";
+import { Autocomplete as Autocomplete$1 } from "@base-ui/react/autocomplete";
+
+//#region src/components/Autocomplete.d.ts
+declare function Input({
+  className,
+  ref,
+  ...props
+}: Omit<React.ComponentPropsWithRef<typeof Autocomplete$1.Input>, "className"> & {
+  className?: string;
+} & {
+  ref?: React.Ref<HTMLInputElement>;
+}): React.JSX.Element;
+declare function Trigger({
+  className,
+  ref,
+  ...props
+}: Omit<React.ComponentPropsWithRef<typeof Autocomplete$1.Trigger>, "className"> & {
+  className?: string;
+} & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+declare function Clear({
+  className,
+  ref,
+  ...props
+}: Omit<React.ComponentPropsWithRef<typeof Autocomplete$1.Clear>, "className"> & {
+  className?: string;
+} & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+declare function Positioner({
+  className,
+  ref,
+  ...props
+}: Omit<React.ComponentPropsWithRef<typeof Autocomplete$1.Positioner>, "className"> & {
+  className?: string;
+} & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function Popup({
+  className,
+  ref,
+  ...props
+}: Omit<React.ComponentPropsWithRef<typeof Autocomplete$1.Popup>, "className"> & {
+  className?: string;
+} & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function List({
+  className,
+  ref,
+  ...props
+}: Omit<React.ComponentPropsWithRef<typeof Autocomplete$1.List>, "className"> & {
+  className?: string;
+} & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function Item({
+  className,
+  ref,
+  ...props
+}: Omit<React.ComponentPropsWithRef<typeof Autocomplete$1.Item>, "className"> & {
+  className?: string;
+} & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function Empty({
+  className,
+  ref,
+  ...props
+}: Omit<React.ComponentPropsWithRef<typeof Autocomplete$1.Empty>, "className"> & {
+  className?: string;
+} & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function Status({
+  className,
+  ref,
+  ...props
+}: Omit<React.ComponentPropsWithRef<typeof Autocomplete$1.Status>, "className"> & {
+  className?: string;
+} & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function Group({
+  className,
+  ref,
+  ...props
+}: Omit<React.ComponentPropsWithRef<typeof Autocomplete$1.Group>, "className"> & {
+  className?: string;
+} & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function GroupLabel({
+  className,
+  ref,
+  ...props
+}: Omit<React.ComponentPropsWithRef<typeof Autocomplete$1.GroupLabel>, "className"> & {
+  className?: string;
+} & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * An input with a list of filtered options for auto-completion.
+ * Supports async search, grouping, and various autocomplete modes.
+ *
+ * @example
+ * ```tsx
+ * // Basic autocomplete
+ * const tags = ['React', 'Vue', 'Angular', 'Svelte'];
+ *
+ * <Autocomplete.Root items={tags}>
+ *   <Autocomplete.Input placeholder="Search tags..." />
+ *   <Autocomplete.Portal>
+ *     <Autocomplete.Positioner>
+ *       <Autocomplete.Popup>
+ *         <Autocomplete.List>
+ *           {(item) => (
+ *             <Autocomplete.Item value={item}>
+ *               {item}
+ *             </Autocomplete.Item>
+ *           )}
+ *         </Autocomplete.List>
+ *         <Autocomplete.Empty>No tags found</Autocomplete.Empty>
+ *       </Autocomplete.Popup>
+ *     </Autocomplete.Positioner>
+ *   </Autocomplete.Portal>
+ * </Autocomplete.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With async search
+ * const [items, setItems] = useState([]);
+ * const [loading, setLoading] = useState(false);
+ *
+ * <Autocomplete.Root
+ *   items={items}
+ *   filter={null}
+ *   onInputValueChange={async (value) => {
+ *     setLoading(true);
+ *     const results = await fetchResults(value);
+ *     setItems(results);
+ *     setLoading(false);
+ *   }}
+ * >
+ *   <Autocomplete.Input placeholder="Search..." />
+ *   <Autocomplete.Portal>
+ *     <Autocomplete.Positioner>
+ *       <Autocomplete.Popup>
+ *         <Autocomplete.Status>
+ *           {loading ? 'Searching...' : null}
+ *         </Autocomplete.Status>
+ *         <Autocomplete.List>
+ *           {(item) => (
+ *             <Autocomplete.Item value={item}>
+ *               {item.label}
+ *             </Autocomplete.Item>
+ *           )}
+ *         </Autocomplete.List>
+ *       </Autocomplete.Popup>
+ *     </Autocomplete.Positioner>
+ *   </Autocomplete.Portal>
+ * </Autocomplete.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/autocomplete | Base UI Autocomplete}
+ */
+declare const Autocomplete: {
+  Root: typeof Autocomplete$1.Root;
+  Input: typeof Input;
+  Trigger: typeof Trigger;
+  Clear: typeof Clear;
+  Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompletePortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Positioner: typeof Positioner;
+  Popup: typeof Popup;
+  List: typeof List;
+  Item: typeof Item;
+  Empty: typeof Empty;
+  Status: typeof Status;
+  Group: typeof Group;
+  GroupLabel: typeof GroupLabel;
+};
+//#endregion
+export { Autocomplete };

package/dist/components/Autocomplete.js

@@ -0,0 +1,186 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { Autocomplete as Autocomplete$1 } from "@base-ui/react/autocomplete";
+//#region src/components/Autocomplete.tsx
+function Input({ className = "", ref, ...props }) {
+	const classes = ["autocomplete__input", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Autocomplete$1.Input, {
+		ref,
+		"data-slot": "autocomplete-input",
+		className: classes,
+		...props
+	});
+}
+function Trigger({ className = "", ref, ...props }) {
+	const classes = ["autocomplete__trigger", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Autocomplete$1.Trigger, {
+		ref,
+		"data-slot": "autocomplete-trigger",
+		className: classes,
+		...props
+	});
+}
+function Clear({ className = "", ref, ...props }) {
+	const classes = ["autocomplete__clear", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Autocomplete$1.Clear, {
+		ref,
+		"data-slot": "autocomplete-clear",
+		className: classes,
+		...props
+	});
+}
+function Positioner({ className = "", ref, ...props }) {
+	const classes = ["autocomplete__positioner", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Autocomplete$1.Positioner, {
+		ref,
+		"data-slot": "autocomplete-positioner",
+		className: classes,
+		...props
+	});
+}
+function Popup({ className = "", ref, ...props }) {
+	const classes = ["autocomplete__popup", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Autocomplete$1.Popup, {
+		ref,
+		"data-slot": "autocomplete-content",
+		className: classes,
+		...props
+	});
+}
+function List({ className = "", ref, ...props }) {
+	const classes = ["autocomplete__list", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Autocomplete$1.List, {
+		ref,
+		"data-slot": "autocomplete-list",
+		className: classes,
+		...props
+	});
+}
+function Item({ className = "", ref, ...props }) {
+	const classes = ["autocomplete__item", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Autocomplete$1.Item, {
+		ref,
+		"data-slot": "autocomplete-item",
+		className: classes,
+		...props
+	});
+}
+function Empty({ className = "", ref, ...props }) {
+	const classes = ["autocomplete__empty", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Autocomplete$1.Empty, {
+		ref,
+		"data-slot": "autocomplete-empty",
+		className: classes,
+		...props
+	});
+}
+function Status({ className = "", ref, ...props }) {
+	const classes = ["autocomplete__status", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Autocomplete$1.Status, {
+		ref,
+		"data-slot": "autocomplete-status",
+		className: classes,
+		...props
+	});
+}
+function Group({ className = "", ref, ...props }) {
+	const classes = ["autocomplete__group", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Autocomplete$1.Group, {
+		ref,
+		"data-slot": "autocomplete-group",
+		className: classes,
+		...props
+	});
+}
+function GroupLabel({ className = "", ref, ...props }) {
+	const classes = ["autocomplete__group-label", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Autocomplete$1.GroupLabel, {
+		ref,
+		"data-slot": "autocomplete-group-label",
+		className: classes,
+		...props
+	});
+}
+/**
+* An input with a list of filtered options for auto-completion.
+* Supports async search, grouping, and various autocomplete modes.
+*
+* @example
+* ```tsx
+* // Basic autocomplete
+* const tags = ['React', 'Vue', 'Angular', 'Svelte'];
+*
+* <Autocomplete.Root items={tags}>
+*   <Autocomplete.Input placeholder="Search tags..." />
+*   <Autocomplete.Portal>
+*     <Autocomplete.Positioner>
+*       <Autocomplete.Popup>
+*         <Autocomplete.List>
+*           {(item) => (
+*             <Autocomplete.Item value={item}>
+*               {item}
+*             </Autocomplete.Item>
+*           )}
+*         </Autocomplete.List>
+*         <Autocomplete.Empty>No tags found</Autocomplete.Empty>
+*       </Autocomplete.Popup>
+*     </Autocomplete.Positioner>
+*   </Autocomplete.Portal>
+* </Autocomplete.Root>
+* ```
+*
+* @example
+* ```tsx
+* // With async search
+* const [items, setItems] = useState([]);
+* const [loading, setLoading] = useState(false);
+*
+* <Autocomplete.Root
+*   items={items}
+*   filter={null}
+*   onInputValueChange={async (value) => {
+*     setLoading(true);
+*     const results = await fetchResults(value);
+*     setItems(results);
+*     setLoading(false);
+*   }}
+* >
+*   <Autocomplete.Input placeholder="Search..." />
+*   <Autocomplete.Portal>
+*     <Autocomplete.Positioner>
+*       <Autocomplete.Popup>
+*         <Autocomplete.Status>
+*           {loading ? 'Searching...' : null}
+*         </Autocomplete.Status>
+*         <Autocomplete.List>
+*           {(item) => (
+*             <Autocomplete.Item value={item}>
+*               {item.label}
+*             </Autocomplete.Item>
+*           )}
+*         </Autocomplete.List>
+*       </Autocomplete.Popup>
+*     </Autocomplete.Positioner>
+*   </Autocomplete.Portal>
+* </Autocomplete.Root>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/autocomplete | Base UI Autocomplete}
+*/
+const Autocomplete = {
+	Root: Autocomplete$1.Root,
+	Input,
+	Trigger,
+	Clear,
+	Portal: Autocomplete$1.Portal,
+	Positioner,
+	Popup,
+	List,
+	Item,
+	Empty,
+	Status,
+	Group,
+	GroupLabel
+};
+//#endregion
+export { Autocomplete };

package/dist/components/Avatar.d.ts

@@ -0,0 +1,134 @@
+import * as React from "react";
+import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
+
+//#region src/components/Avatar.d.ts
+/**
+ * Props for the Avatar.Root component.
+ */
+interface AvatarRootProps extends Omit<React.ComponentPropsWithoutRef<typeof Avatar$1.Root>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+  size?: "default" | "sm" | "lg";
+}
+/**
+ * Props for the Avatar.Image component.
+ */
+interface AvatarImageProps extends Omit<React.ComponentPropsWithoutRef<typeof Avatar$1.Image>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Avatar.Fallback component.
+ */
+interface AvatarFallbackProps extends Omit<React.ComponentPropsWithoutRef<typeof Avatar$1.Fallback>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface AvatarGroupCountProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface AvatarBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {}
+/**
+ * Container for the avatar. Renders a `<span>` element.
+ *
+ * @example
+ * ```tsx
+ * <Avatar.Root>
+ *   <Avatar.Image src="/photo.jpg" alt="User" />
+ *   <Avatar.Fallback>JD</Avatar.Fallback>
+ * </Avatar.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/avatar | Base UI Avatar}
+ */
+declare function AvatarRoot({
+  className,
+  size,
+  ref,
+  ...props
+}: AvatarRootProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+/**
+ * Displays the avatar image. Renders an `<img>` element.
+ */
+declare function AvatarImage({
+  className,
+  ref,
+  ...props
+}: AvatarImageProps & {
+  ref?: React.Ref<HTMLImageElement>;
+}): React.JSX.Element;
+/**
+ * Displays when the image fails to load or isn't provided.
+ * Typically contains initials or an icon. Renders a `<span>` element.
+ */
+declare function AvatarFallback({
+  className,
+  ref,
+  ...props
+}: AvatarFallbackProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+declare function AvatarGroup({
+  className,
+  ref,
+  ...props
+}: AvatarGroupProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function AvatarGroupCount({
+  className,
+  ref,
+  ...props
+}: AvatarGroupCountProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function AvatarBadge({
+  className,
+  ref,
+  ...props
+}: AvatarBadgeProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+/**
+ * An avatar component for displaying user profile pictures with fallback support.
+ * Shows initials or an icon when the image fails to load or isn't provided.
+ *
+ * @example
+ * ```tsx
+ * // With image
+ * <Avatar.Root>
+ *   <Avatar.Image src="/profile.jpg" alt="John Doe" />
+ *   <Avatar.Fallback>JD</Avatar.Fallback>
+ * </Avatar.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Fallback only (no image)
+ * <Avatar.Root>
+ *   <Avatar.Fallback>AB</Avatar.Fallback>
+ * </Avatar.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With delayed fallback
+ * <Avatar.Root>
+ *   <Avatar.Image src="/slow-loading.jpg" alt="User" />
+ *   <Avatar.Fallback delay={500}>?</Avatar.Fallback>
+ * </Avatar.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/avatar | Base UI Avatar}
+ */
+declare const Avatar: typeof AvatarRoot & {
+  Root: typeof AvatarRoot;
+  Image: typeof AvatarImage;
+  Fallback: typeof AvatarFallback;
+  Group: typeof AvatarGroup;
+  GroupCount: typeof AvatarGroupCount;
+  Badge: typeof AvatarBadge;
+};
+//#endregion
+export { Avatar, AvatarBadge, AvatarBadgeProps, AvatarFallback, AvatarFallbackProps, AvatarGroup, AvatarGroupCount, AvatarGroupCountProps, AvatarGroupProps, AvatarImage, AvatarImageProps, AvatarRoot, AvatarRootProps };

package/dist/components/Avatar.js

@@ -0,0 +1,118 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
+//#region src/components/Avatar.tsx
+/**
+* Container for the avatar. Renders a `<span>` element.
+*
+* @example
+* ```tsx
+* <Avatar.Root>
+*   <Avatar.Image src="/photo.jpg" alt="User" />
+*   <Avatar.Fallback>JD</Avatar.Fallback>
+* </Avatar.Root>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/avatar | Base UI Avatar}
+*/
+function AvatarRoot({ className = "", size = "default", ref, ...props }) {
+	const classes = ["avatar", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Avatar$1.Root, {
+		ref,
+		"data-slot": "avatar",
+		"data-size": size,
+		className: classes,
+		...props
+	});
+}
+/**
+* Displays the avatar image. Renders an `<img>` element.
+*/
+function AvatarImage({ className = "", ref, ...props }) {
+	const classes = ["avatar__image", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Avatar$1.Image, {
+		ref,
+		"data-slot": "avatar-image",
+		className: classes,
+		...props
+	});
+}
+/**
+* Displays when the image fails to load or isn't provided.
+* Typically contains initials or an icon. Renders a `<span>` element.
+*/
+function AvatarFallback({ className = "", ref, ...props }) {
+	const classes = ["avatar__fallback", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Avatar$1.Fallback, {
+		ref,
+		"data-slot": "avatar-fallback",
+		className: classes,
+		...props
+	});
+}
+function AvatarGroup({ className = "", ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "avatar-group",
+		className: ["avatar-group", className].filter(Boolean).join(" "),
+		...props
+	});
+}
+function AvatarGroupCount({ className = "", ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "avatar-group-count",
+		className: ["avatar-group__count", className].filter(Boolean).join(" "),
+		...props
+	});
+}
+function AvatarBadge({ className = "", ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		"data-slot": "avatar-badge",
+		className: ["avatar__badge", className].filter(Boolean).join(" "),
+		...props
+	});
+}
+/**
+* An avatar component for displaying user profile pictures with fallback support.
+* Shows initials or an icon when the image fails to load or isn't provided.
+*
+* @example
+* ```tsx
+* // With image
+* <Avatar.Root>
+*   <Avatar.Image src="/profile.jpg" alt="John Doe" />
+*   <Avatar.Fallback>JD</Avatar.Fallback>
+* </Avatar.Root>
+* ```
+*
+* @example
+* ```tsx
+* // Fallback only (no image)
+* <Avatar.Root>
+*   <Avatar.Fallback>AB</Avatar.Fallback>
+* </Avatar.Root>
+* ```
+*
+* @example
+* ```tsx
+* // With delayed fallback
+* <Avatar.Root>
+*   <Avatar.Image src="/slow-loading.jpg" alt="User" />
+*   <Avatar.Fallback delay={500}>?</Avatar.Fallback>
+* </Avatar.Root>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/avatar | Base UI Avatar}
+*/
+const Avatar = Object.assign(AvatarRoot, {
+	Root: AvatarRoot,
+	Image: AvatarImage,
+	Fallback: AvatarFallback,
+	Group: AvatarGroup,
+	GroupCount: AvatarGroupCount,
+	Badge: AvatarBadge
+});
+//#endregion
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, AvatarRoot };

package/dist/components/Badge.d.ts

@@ -0,0 +1,68 @@
+import * as React from "react";
+
+//#region src/components/Badge.d.ts
+type BadgeVariant = "normal" | "outline" | "ghost" | "link";
+type BadgeColor = "neutral" | "primary" | "success" | "destructive" | "warning";
+type ShadcnBadgeVariant = "default" | "secondary" | "destructive" | "outline" | "ghost" | "link";
+interface BadgeVariantsOptions {
+  variant?: ShadcnBadgeVariant | BadgeVariant | null;
+  color?: BadgeColor | null;
+  size?: "sm" | "md" | null;
+  className?: string;
+}
+declare function badgeVariants({
+  variant,
+  color,
+  size,
+  className
+}?: BadgeVariantsOptions): string;
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /**
+   * The visual rendering style of the badge.
+   * @default 'default'
+   */
+  variant?: ShadcnBadgeVariant | BadgeVariant;
+  /**
+   * The semantic color intent of the badge.
+   * @default 'primary'
+   */
+  color?: BadgeColor;
+  /**
+   * The size of the badge.
+   * @default 'md'
+   */
+  size?: "sm" | "md";
+  /**
+   * Render the badge styles onto the child element.
+   *
+   * Mirrors shadcn's `asChild` API for link badges and custom elements.
+   * @default false
+   */
+  asChild?: boolean;
+}
+/**
+ * A badge component for highlighting status, labels, or categories.
+ *
+ * @example
+ * ```tsx
+ * <Badge>Default</Badge>
+ * <Badge color="success">Active</Badge>
+ * <Badge color="warning">Pending</Badge>
+ * <Badge variant="outline">Info</Badge>
+ * <Badge asChild><a href="/docs">Docs</a></Badge>
+ * ```
+ */
+declare function Badge({
+  variant,
+  color,
+  size,
+  className,
+  asChild,
+  children,
+  ref,
+  ...props
+}: BadgeProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+//#endregion
+export { Badge, BadgeColor, BadgeProps, BadgeVariant, BadgeVariantsOptions, ShadcnBadgeVariant, badgeVariants };