@mcp-b/react-components 0.1.1 → 0.1.3

package/dist/components/Popover.d.ts

@@ -0,0 +1,278 @@
+import * as React from "react";
+import { Popover as Popover$1 } from "@base-ui/react/popover";
+
+//#region src/components/Popover.d.ts
+/**
+ * Props for the Popover.Root component.
+ */
+interface PopoverProps extends React.ComponentPropsWithoutRef<typeof Popover$1.Root> {}
+/**
+ * Props for the Popover.Trigger component.
+ */
+interface PopoverTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof Popover$1.Trigger>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+interface PopoverAnchorProps extends React.HTMLAttributes<HTMLDivElement> {}
+/**
+ * Props for the Popover.Portal component.
+ */
+interface PopoverPortalProps extends React.ComponentPropsWithoutRef<typeof Popover$1.Portal> {}
+/**
+ * Props for the Popover.Backdrop component.
+ */
+interface PopoverBackdropProps extends Omit<React.ComponentPropsWithoutRef<typeof Popover$1.Backdrop>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Popover.Positioner component.
+ */
+interface PopoverPositionerProps extends Omit<React.ComponentPropsWithoutRef<typeof Popover$1.Positioner>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Popover.Popup component.
+ */
+interface PopoverPopupProps extends Omit<React.ComponentPropsWithoutRef<typeof Popover$1.Popup>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Popover.Arrow component.
+ */
+interface PopoverArrowProps extends Omit<React.ComponentPropsWithoutRef<typeof Popover$1.Arrow>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Popover.Title component.
+ */
+interface PopoverTitleProps extends Omit<React.ComponentPropsWithoutRef<typeof Popover$1.Title>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Popover.Description component.
+ */
+interface PopoverDescriptionProps extends Omit<React.ComponentPropsWithoutRef<typeof Popover$1.Description>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Popover.Close component.
+ */
+interface PopoverCloseProps extends Omit<React.ComponentPropsWithoutRef<typeof Popover$1.Close>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+type PopoverPlacementProps = Pick<PopoverPositionerProps, "anchor" | "positionMethod" | "side" | "sideOffset" | "align" | "alignOffset" | "collisionBoundary" | "collisionPadding" | "sticky" | "arrowPadding" | "disableAnchorTracking" | "collisionAvoidance">;
+type PopoverContentProps = PopoverPopupProps & PopoverPlacementProps;
+interface PopoverHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+/**
+ * Controls the popover's open state and manages triggers.
+ *
+ * @example
+ * ```tsx
+ * <Popover.Root>
+ *   <Popover.Trigger>Open</Popover.Trigger>
+ *   <Popover.Portal>
+ *     <Popover.Positioner>
+ *       <Popover.Popup>
+ *         <Popover.Title>Popover Title</Popover.Title>
+ *         <Popover.Description>Content here</Popover.Description>
+ *       </Popover.Popup>
+ *     </Popover.Positioner>
+ *   </Popover.Portal>
+ * </Popover.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/popover | Base UI Popover}
+ */
+declare const PopoverRoot: (props: PopoverProps) => React.JSX.Element;
+declare function PopoverAnchor({
+  className,
+  ref,
+  ...props
+}: PopoverAnchorProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Button that toggles the popover visibility.
+ * Renders a `<button>` element.
+ */
+declare function PopoverTrigger({
+  className,
+  ref,
+  ...props
+}: PopoverTriggerProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+/**
+ * Renders popover content in a portal outside the DOM hierarchy.
+ */
+declare const PopoverPortal: (props: PopoverPortalProps) => React.JSX.Element;
+/**
+ * Optional backdrop that appears behind the popover.
+ */
+declare function PopoverBackdrop({
+  className,
+  ref,
+  ...props
+}: PopoverBackdropProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Positions the popup relative to the trigger element.
+ *
+ * @example
+ * ```tsx
+ * // Position on the right with offset
+ * <Popover.Positioner side="right" sideOffset={8}>
+ *   <Popover.Popup>...</Popover.Popup>
+ * </Popover.Positioner>
+ * ```
+ */
+declare function PopoverPositioner({
+  className,
+  anchor,
+  ref,
+  ...props
+}: PopoverPositionerProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * The popup container that holds the popover content.
+ */
+declare function PopoverPopup({
+  className,
+  ref,
+  ...props
+}: PopoverPopupProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function PopoverContent({
+  anchor,
+  positionMethod,
+  side,
+  sideOffset,
+  align,
+  alignOffset,
+  collisionBoundary,
+  collisionPadding,
+  sticky,
+  arrowPadding,
+  disableAnchorTracking,
+  collisionAvoidance,
+  ...props
+}: PopoverContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function PopoverHeader({
+  className,
+  ref,
+  ...props
+}: PopoverHeaderProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Directional arrow pointing to the trigger element.
+ */
+declare function PopoverArrow({
+  className,
+  ref,
+  ...props
+}: PopoverArrowProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Semantic title for the popover content.
+ * Renders an `<h2>` element.
+ */
+declare function PopoverTitle({
+  className,
+  ref,
+  ...props
+}: PopoverTitleProps & {
+  ref?: React.Ref<HTMLHeadingElement>;
+}): React.JSX.Element;
+/**
+ * Description text for the popover content.
+ * Renders a `<p>` element.
+ */
+declare function PopoverDescription({
+  className,
+  ref,
+  ...props
+}: PopoverDescriptionProps & {
+  ref?: React.Ref<HTMLParagraphElement>;
+}): React.JSX.Element;
+/**
+ * Button that closes the popover.
+ */
+declare function PopoverClose({
+  className,
+  ref,
+  ...props
+}: PopoverCloseProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+/**
+ * An accessible popup anchored to a trigger button.
+ * Supports flexible positioning, animations, and optional backdrop.
+ *
+ * @example
+ * ```tsx
+ * // Basic popover
+ * <Popover.Root>
+ *   <Popover.Trigger>Click me</Popover.Trigger>
+ *   <Popover.Portal>
+ *     <Popover.Positioner>
+ *       <Popover.Popup>
+ *         <Popover.Title>Settings</Popover.Title>
+ *         <Popover.Description>
+ *           Configure your preferences here.
+ *         </Popover.Description>
+ *         <Popover.Close>Close</Popover.Close>
+ *       </Popover.Popup>
+ *     </Popover.Positioner>
+ *   </Popover.Portal>
+ * </Popover.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With arrow and custom positioning
+ * <Popover.Root>
+ *   <Popover.Trigger>Info</Popover.Trigger>
+ *   <Popover.Portal>
+ *     <Popover.Positioner side="right" sideOffset={8}>
+ *       <Popover.Popup>
+ *         <Popover.Arrow />
+ *         <p>Additional information</p>
+ *       </Popover.Popup>
+ *     </Popover.Positioner>
+ *   </Popover.Portal>
+ * </Popover.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/popover | Base UI Popover}
+ */
+declare const Popover: ((props: PopoverProps) => React.JSX.Element) & {
+  Root: (props: PopoverProps) => React.JSX.Element;
+  Anchor: typeof PopoverAnchor;
+  Trigger: typeof PopoverTrigger;
+  Portal: (props: PopoverPortalProps) => React.JSX.Element;
+  Backdrop: typeof PopoverBackdrop;
+  Positioner: typeof PopoverPositioner;
+  Popup: typeof PopoverPopup;
+  Content: typeof PopoverContent;
+  Header: typeof PopoverHeader;
+  Arrow: typeof PopoverArrow;
+  Title: typeof PopoverTitle;
+  Description: typeof PopoverDescription;
+  Close: typeof PopoverClose;
+};
+//#endregion
+export { Popover, PopoverAnchor, PopoverAnchorProps, PopoverArrow, PopoverArrowProps, PopoverBackdrop, PopoverBackdropProps, PopoverClose, PopoverCloseProps, PopoverContent, PopoverContentProps, PopoverDescription, PopoverDescriptionProps, PopoverHeader, PopoverHeaderProps, PopoverPopup, PopoverPopupProps, PopoverPortal, PopoverPortalProps, PopoverPositioner, PopoverPositionerProps, PopoverProps, PopoverRoot, PopoverTitle, PopoverTitleProps, PopoverTrigger, PopoverTriggerProps };

package/dist/components/Popover.js

@@ -0,0 +1,245 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { Popover as Popover$1 } from "@base-ui/react/popover";
+//#region src/components/Popover.tsx
+const PopoverAnchorContext = React.createContext(null);
+function setRefs(node, ...refs) {
+	for (const ref of refs) if (typeof ref === "function") ref(node);
+	else if (ref) ref.current = node;
+}
+/**
+* Controls the popover's open state and manages triggers.
+*
+* @example
+* ```tsx
+* <Popover.Root>
+*   <Popover.Trigger>Open</Popover.Trigger>
+*   <Popover.Portal>
+*     <Popover.Positioner>
+*       <Popover.Popup>
+*         <Popover.Title>Popover Title</Popover.Title>
+*         <Popover.Description>Content here</Popover.Description>
+*       </Popover.Popup>
+*     </Popover.Positioner>
+*   </Popover.Portal>
+* </Popover.Root>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/popover | Base UI Popover}
+*/
+const PopoverRoot = (props) => {
+	const anchorRef = React.useRef(null);
+	return /* @__PURE__ */ jsx(PopoverAnchorContext.Provider, {
+		value: anchorRef,
+		children: /* @__PURE__ */ jsx(Popover$1.Root, {
+			"data-slot": "popover",
+			...props
+		})
+	});
+};
+function PopoverAnchor({ className = "", ref, ...props }) {
+	const anchorRef = React.useContext(PopoverAnchorContext);
+	return /* @__PURE__ */ jsx("div", {
+		ref: (node) => setRefs(node, anchorRef, ref),
+		"data-slot": "popover-anchor",
+		className: ["popover__anchor", className].filter(Boolean).join(" "),
+		...props
+	});
+}
+/**
+* Button that toggles the popover visibility.
+* Renders a `<button>` element.
+*/
+function PopoverTrigger({ className = "", ref, ...props }) {
+	const classes = ["popover__trigger", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Popover$1.Trigger, {
+		ref,
+		"data-slot": "popover-trigger",
+		className: classes,
+		...props
+	});
+}
+/**
+* Renders popover content in a portal outside the DOM hierarchy.
+*/
+const PopoverPortal = (props) => {
+	return /* @__PURE__ */ jsx(Popover$1.Portal, { ...props });
+};
+/**
+* Optional backdrop that appears behind the popover.
+*/
+function PopoverBackdrop({ className = "", ref, ...props }) {
+	const classes = ["popover__backdrop", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Popover$1.Backdrop, {
+		ref,
+		"data-slot": "popover-backdrop",
+		className: classes,
+		...props
+	});
+}
+/**
+* Positions the popup relative to the trigger element.
+*
+* @example
+* ```tsx
+* // Position on the right with offset
+* <Popover.Positioner side="right" sideOffset={8}>
+*   <Popover.Popup>...</Popover.Popup>
+* </Popover.Positioner>
+* ```
+*/
+function PopoverPositioner({ className = "", anchor, ref, ...props }) {
+	const anchorRef = React.useContext(PopoverAnchorContext);
+	const classes = ["popover__positioner", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Popover$1.Positioner, {
+		ref,
+		anchor: anchor ?? anchorRef ?? void 0,
+		className: classes,
+		...props
+	});
+}
+/**
+* The popup container that holds the popover content.
+*/
+function PopoverPopup({ className = "", ref, ...props }) {
+	const classes = ["popover__popup", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Popover$1.Popup, {
+		ref,
+		"data-slot": "popover-content",
+		className: classes,
+		...props
+	});
+}
+function PopoverContent({ anchor, positionMethod, side, sideOffset = 4, align = "center", alignOffset, collisionBoundary, collisionPadding, sticky, arrowPadding, disableAnchorTracking, collisionAvoidance, ...props }) {
+	return /* @__PURE__ */ jsx(PopoverPortal, { children: /* @__PURE__ */ jsx(PopoverPositioner, {
+		anchor,
+		positionMethod,
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		collisionBoundary,
+		collisionPadding,
+		sticky,
+		arrowPadding,
+		disableAnchorTracking,
+		collisionAvoidance,
+		children: /* @__PURE__ */ jsx(PopoverPopup, { ...props })
+	}) });
+}
+function PopoverHeader({ className = "", ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "popover-header",
+		className: ["popover__header", className].filter(Boolean).join(" "),
+		...props
+	});
+}
+/**
+* Directional arrow pointing to the trigger element.
+*/
+function PopoverArrow({ className = "", ref, ...props }) {
+	const classes = ["popover__arrow", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Popover$1.Arrow, {
+		ref,
+		"data-slot": "popover-arrow",
+		className: classes,
+		...props
+	});
+}
+/**
+* Semantic title for the popover content.
+* Renders an `<h2>` element.
+*/
+function PopoverTitle({ className = "", ref, ...props }) {
+	const classes = ["popover__title", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Popover$1.Title, {
+		ref,
+		"data-slot": "popover-title",
+		className: classes,
+		...props
+	});
+}
+/**
+* Description text for the popover content.
+* Renders a `<p>` element.
+*/
+function PopoverDescription({ className = "", ref, ...props }) {
+	const classes = ["popover__description", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Popover$1.Description, {
+		ref,
+		"data-slot": "popover-description",
+		className: classes,
+		...props
+	});
+}
+/**
+* Button that closes the popover.
+*/
+function PopoverClose({ className = "", ref, ...props }) {
+	const classes = ["popover__close", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Popover$1.Close, {
+		ref,
+		"data-slot": "popover-close",
+		className: classes,
+		...props
+	});
+}
+/**
+* An accessible popup anchored to a trigger button.
+* Supports flexible positioning, animations, and optional backdrop.
+*
+* @example
+* ```tsx
+* // Basic popover
+* <Popover.Root>
+*   <Popover.Trigger>Click me</Popover.Trigger>
+*   <Popover.Portal>
+*     <Popover.Positioner>
+*       <Popover.Popup>
+*         <Popover.Title>Settings</Popover.Title>
+*         <Popover.Description>
+*           Configure your preferences here.
+*         </Popover.Description>
+*         <Popover.Close>Close</Popover.Close>
+*       </Popover.Popup>
+*     </Popover.Positioner>
+*   </Popover.Portal>
+* </Popover.Root>
+* ```
+*
+* @example
+* ```tsx
+* // With arrow and custom positioning
+* <Popover.Root>
+*   <Popover.Trigger>Info</Popover.Trigger>
+*   <Popover.Portal>
+*     <Popover.Positioner side="right" sideOffset={8}>
+*       <Popover.Popup>
+*         <Popover.Arrow />
+*         <p>Additional information</p>
+*       </Popover.Popup>
+*     </Popover.Positioner>
+*   </Popover.Portal>
+* </Popover.Root>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/popover | Base UI Popover}
+*/
+const Popover = Object.assign(PopoverRoot, {
+	Root: PopoverRoot,
+	Anchor: PopoverAnchor,
+	Trigger: PopoverTrigger,
+	Portal: PopoverPortal,
+	Backdrop: PopoverBackdrop,
+	Positioner: PopoverPositioner,
+	Popup: PopoverPopup,
+	Content: PopoverContent,
+	Header: PopoverHeader,
+	Arrow: PopoverArrow,
+	Title: PopoverTitle,
+	Description: PopoverDescription,
+	Close: PopoverClose
+});
+//#endregion
+export { Popover, PopoverAnchor, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverRoot, PopoverTitle, PopoverTrigger };

package/dist/components/PreviewCard.d.ts

@@ -0,0 +1,156 @@
+import * as React from "react";
+import { PreviewCard as PreviewCard$1 } from "@base-ui/react/preview-card";
+
+//#region src/components/PreviewCard.d.ts
+/**
+ * Props for the PreviewCard.Root component.
+ */
+interface PreviewCardProps extends React.ComponentPropsWithoutRef<typeof PreviewCard$1.Root> {}
+/**
+ * Props for the PreviewCard.Trigger component.
+ */
+interface PreviewCardTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof PreviewCard$1.Trigger>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the PreviewCard.Portal component.
+ */
+interface PreviewCardPortalProps extends React.ComponentPropsWithoutRef<typeof PreviewCard$1.Portal> {}
+/**
+ * Props for the PreviewCard.Backdrop component.
+ */
+interface PreviewCardBackdropProps extends Omit<React.ComponentPropsWithoutRef<typeof PreviewCard$1.Backdrop>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the PreviewCard.Positioner component.
+ */
+interface PreviewCardPositionerProps extends Omit<React.ComponentPropsWithoutRef<typeof PreviewCard$1.Positioner>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the PreviewCard.Popup component.
+ */
+interface PreviewCardPopupProps extends Omit<React.ComponentPropsWithoutRef<typeof PreviewCard$1.Popup>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+type PreviewCardPlacementProps = Pick<PreviewCardPositionerProps, "anchor" | "positionMethod" | "side" | "sideOffset" | "align" | "alignOffset" | "collisionBoundary" | "collisionPadding" | "sticky" | "arrowPadding" | "disableAnchorTracking" | "collisionAvoidance">;
+type PreviewCardContentProps = PreviewCardPopupProps & PreviewCardPlacementProps;
+/**
+ * Props for the PreviewCard.Arrow component.
+ */
+interface PreviewCardArrowProps extends Omit<React.ComponentPropsWithoutRef<typeof PreviewCard$1.Arrow>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Link element that triggers the preview card on hover.
+ */
+declare function PreviewCardTrigger({
+  className,
+  ref,
+  ...props
+}: PreviewCardTriggerProps & {
+  ref?: React.Ref<HTMLAnchorElement>;
+}): React.JSX.Element;
+/**
+ * Optional backdrop behind the preview card.
+ */
+declare function PreviewCardBackdrop({
+  className,
+  ref,
+  ...props
+}: PreviewCardBackdropProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Positions the preview card relative to the trigger.
+ */
+declare function PreviewCardPositioner({
+  className,
+  ref,
+  ...props
+}: PreviewCardPositionerProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Container for preview card content.
+ */
+declare function PreviewCardPopup({
+  className,
+  ref,
+  ...props
+}: PreviewCardPopupProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function PreviewCardContent({
+  anchor,
+  positionMethod,
+  side,
+  sideOffset,
+  align,
+  alignOffset,
+  collisionBoundary,
+  collisionPadding,
+  sticky,
+  arrowPadding,
+  disableAnchorTracking,
+  collisionAvoidance,
+  ...props
+}: PreviewCardContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Decorative arrow pointing to the trigger.
+ */
+declare function PreviewCardArrow({
+  className,
+  ref,
+  ...props
+}: PreviewCardArrowProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * A popup that appears when a link is hovered, showing a preview for sighted users.
+ * Useful for showing user profiles, link previews, or additional context.
+ *
+ * @example
+ * ```tsx
+ * // Basic preview card
+ * <PreviewCard.Root>
+ *   <PreviewCard.Trigger href="/users/john">
+ *     @johndoe
+ *   </PreviewCard.Trigger>
+ *   <PreviewCard.Portal>
+ *     <PreviewCard.Positioner sideOffset={8}>
+ *       <PreviewCard.Popup>
+ *         <PreviewCard.Arrow />
+ *         <div className="preview-content">
+ *           <img src="/john-avatar.jpg" alt="" />
+ *           <h4>John Doe</h4>
+ *           <p>Software Engineer at Acme Corp</p>
+ *         </div>
+ *       </PreviewCard.Popup>
+ *     </PreviewCard.Positioner>
+ *   </PreviewCard.Portal>
+ * </PreviewCard.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/preview-card | Base UI PreviewCard}
+ */
+declare const PreviewCard: {
+  Root: (props: PreviewCardProps) => React.JSX.Element;
+  Trigger: typeof PreviewCardTrigger;
+  Content: typeof PreviewCardContent;
+  Portal: (props: PreviewCardPortalProps) => React.JSX.Element;
+  Backdrop: typeof PreviewCardBackdrop;
+  Positioner: typeof PreviewCardPositioner;
+  Popup: typeof PreviewCardPopup;
+  Arrow: typeof PreviewCardArrow;
+};
+//#endregion
+export { PreviewCard, PreviewCardArrowProps, PreviewCardBackdropProps, PreviewCardContentProps, PreviewCardPopupProps, PreviewCardPortalProps, PreviewCardPositionerProps, PreviewCardProps, PreviewCardTriggerProps };