@mcp-b/react-components 0.1.1 → 0.1.3

package/dist/components/GithubMotionMark.js

@@ -0,0 +1,23 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/GithubMotionMark.tsx
+/**
+* Small GitHub motion mark used next to install or repository connection text.
+*/
+function GithubMotionMark({ className, size = 18 }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cx("github-motion-mark", className),
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("svg", {
+			width: size,
+			height: size,
+			viewBox: "0 0 24 24",
+			fill: "currentColor",
+			"aria-hidden": "true",
+			focusable: "false",
+			children: /* @__PURE__ */ jsx("path", { d: "M12 .5A11.5 11.5 0 0 0 8.36 22.9c.58.1.8-.25.8-.56v-2.12c-3.22.7-3.9-1.38-3.9-1.38-.53-1.34-1.3-1.7-1.3-1.7-1.06-.72.08-.7.08-.7 1.17.08 1.78 1.2 1.78 1.2 1.04 1.78 2.73 1.27 3.4.97.1-.76.4-1.27.74-1.56-2.57-.29-5.28-1.29-5.28-5.73 0-1.27.45-2.3 1.2-3.11-.12-.3-.52-1.48.11-3.07 0 0 .98-.32 3.2 1.18a11 11 0 0 1 5.82 0c2.22-1.5 3.2-1.18 3.2-1.18.63 1.6.23 2.78.11 3.07.75.82 1.2 1.85 1.2 3.1 0 4.46-2.72 5.44-5.3 5.73.42.36.8 1.08.8 2.18v3.12c0 .31.2.67.8.56A11.5 11.5 0 0 0 12 .5Z" })
+		})
+	});
+}
+//#endregion
+export { GithubMotionMark };

package/dist/components/Input.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { InputProps as InputProps$1 } from "@base-ui/react/input";
+
+//#region src/components/Input.d.ts
+/**
+ * Props for the Input component.
+ */
+interface InputProps extends Omit<InputProps$1, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * An accessible text input component with consistent styling.
+ *
+ * @example
+ * ```tsx
+ * <Input type="text" placeholder="Enter your name" />
+ *
+ * <Label htmlFor="email">Email</Label>
+ * <Input id="email" type="email" placeholder="user@example.com" />
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/input | Base UI Input}
+ */
+declare function Input({
+  className,
+  ref,
+  ...props
+}: InputProps & {
+  ref?: React.Ref<HTMLInputElement>;
+}): React.JSX.Element;
+//#endregion
+export { Input, InputProps };

package/dist/components/Input.js

@@ -0,0 +1,27 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { Input as Input$1 } from "@base-ui/react/input";
+//#region src/components/Input.tsx
+/**
+* An accessible text input component with consistent styling.
+*
+* @example
+* ```tsx
+* <Input type="text" placeholder="Enter your name" />
+*
+* <Label htmlFor="email">Email</Label>
+* <Input id="email" type="email" placeholder="user@example.com" />
+* ```
+*
+* @see {@link https://base-ui.com/react/components/input | Base UI Input}
+*/
+function Input({ className = "", ref, ...props }) {
+	return /* @__PURE__ */ jsx(Input$1, {
+		ref,
+		"data-slot": "input",
+		className: ["input", className].filter(Boolean).join(" "),
+		...props
+	});
+}
+//#endregion
+export { Input };

package/dist/components/Label.d.ts

@@ -0,0 +1,44 @@
+import * as React from "react";
+
+//#region src/components/Label.d.ts
+interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  /** ID of the form control this label names. */
+  htmlFor?: string;
+  /** Additional class names for layout only; use shared styles for visual variants. */
+  className?: string;
+  /** Label text or inline label content. */
+  children?: React.ReactNode;
+}
+/**
+ * A semantic label component for form inputs.
+ *
+ * Built internally as a thin styled wrapper over the native `label` element.
+ * Use it to name inputs, checkboxes, radio controls, and field-level controls.
+ * Do not use it for arbitrary text; use text elements or Field labels instead.
+ *
+ * Styling consumes Sigvelo typography, text, spacing, and disabled-state tokens.
+ * Keep accessibility through `htmlFor` or by wrapping the control with the
+ * label. Add variants here only if multiple apps need the same label treatment.
+ *
+ * @example
+ * ```tsx
+ * <Label htmlFor="username">Username</Label>
+ * <Input id="username" type="text" />
+ *
+ * <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+ *   <Checkbox id="newsletter" />
+ *   <Label htmlFor="newsletter">Subscribe to newsletter</Label>
+ * </div>
+ * ```
+ */
+declare function Label({
+  className,
+  children,
+  onMouseDown,
+  ref,
+  ...props
+}: LabelProps & {
+  ref?: React.Ref<HTMLLabelElement>;
+}): React.JSX.Element;
+//#endregion
+export { Label, LabelProps };

package/dist/components/Label.js

@@ -0,0 +1,41 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Label.tsx
+/**
+* A semantic label component for form inputs.
+*
+* Built internally as a thin styled wrapper over the native `label` element.
+* Use it to name inputs, checkboxes, radio controls, and field-level controls.
+* Do not use it for arbitrary text; use text elements or Field labels instead.
+*
+* Styling consumes Sigvelo typography, text, spacing, and disabled-state tokens.
+* Keep accessibility through `htmlFor` or by wrapping the control with the
+* label. Add variants here only if multiple apps need the same label treatment.
+*
+* @example
+* ```tsx
+* <Label htmlFor="username">Username</Label>
+* <Input id="username" type="text" />
+*
+* <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+*   <Checkbox id="newsletter" />
+*   <Label htmlFor="newsletter">Subscribe to newsletter</Label>
+* </div>
+* ```
+*/
+function Label({ className = "", children, onMouseDown, ref, ...props }) {
+	return /* @__PURE__ */ jsx("label", {
+		ref,
+		"data-slot": "label",
+		className: ["label", className].filter(Boolean).join(" "),
+		onMouseDown: (event) => {
+			if (event.target.closest("button, input, select, textarea")) return;
+			onMouseDown?.(event);
+			if (!event.defaultPrevented && event.detail > 1) event.preventDefault();
+		},
+		...props,
+		children
+	});
+}
+//#endregion
+export { Label };

package/dist/components/Menu.d.ts

@@ -0,0 +1,395 @@
+import * as React from "react";
+import { Menu as Menu$1 } from "@base-ui/react/menu";
+
+//#region src/components/Menu.d.ts
+/**
+ * Props for the Menu.Root component.
+ */
+interface MenuProps extends React.ComponentPropsWithoutRef<typeof Menu$1.Root> {}
+/**
+ * Props for the Menu.Trigger component.
+ */
+interface MenuTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof Menu$1.Trigger>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Menu.Portal component.
+ */
+interface MenuPortalProps extends React.ComponentPropsWithoutRef<typeof Menu$1.Portal> {}
+/**
+ * Props for the Menu.Positioner component.
+ */
+interface MenuPositionerProps extends Omit<React.ComponentPropsWithoutRef<typeof Menu$1.Positioner>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Menu.Popup component.
+ */
+interface MenuPopupProps extends Omit<React.ComponentPropsWithoutRef<typeof Menu$1.Popup>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+type MenuPlacementProps = Pick<MenuPositionerProps, "anchor" | "positionMethod" | "side" | "sideOffset" | "align" | "alignOffset" | "collisionBoundary" | "collisionPadding" | "sticky" | "arrowPadding" | "disableAnchorTracking" | "collisionAvoidance">;
+type MenuContentProps = MenuPopupProps & MenuPlacementProps;
+/**
+ * Props for the Menu.Item component.
+ */
+interface MenuItemProps extends Omit<React.ComponentPropsWithoutRef<typeof Menu$1.Item>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}
+/**
+ * Props for the Menu.Group component.
+ */
+interface MenuGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof Menu$1.Group>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Menu.GroupLabel component.
+ */
+interface MenuGroupLabelProps extends Omit<React.ComponentPropsWithoutRef<typeof Menu$1.GroupLabel>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+  inset?: boolean;
+}
+type MenuLabelProps = MenuGroupLabelProps;
+/**
+ * Props for the Menu.Arrow component.
+ */
+interface MenuArrowProps extends Omit<React.ComponentPropsWithoutRef<typeof Menu$1.Arrow>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Menu.Separator component.
+ */
+interface MenuSeparatorProps extends Omit<React.ComponentPropsWithoutRef<typeof Menu$1.Separator>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Menu.RadioGroup component.
+ */
+interface MenuRadioGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof Menu$1.RadioGroup>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Menu.RadioItem component.
+ */
+interface MenuRadioItemProps extends Omit<React.ComponentPropsWithoutRef<typeof Menu$1.RadioItem>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Menu.RadioItemIndicator component.
+ */
+interface MenuRadioItemIndicatorProps extends Omit<React.ComponentPropsWithoutRef<typeof Menu$1.RadioItemIndicator>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Menu.CheckboxItem component.
+ */
+interface MenuCheckboxItemProps extends Omit<React.ComponentPropsWithoutRef<typeof Menu$1.CheckboxItem>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Menu.CheckboxItemIndicator component.
+ */
+interface MenuCheckboxItemIndicatorProps extends Omit<React.ComponentPropsWithoutRef<typeof Menu$1.CheckboxItemIndicator>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+interface MenuShortcutProps extends React.HTMLAttributes<HTMLSpanElement> {}
+interface MenuSubProps extends React.ComponentPropsWithoutRef<typeof Menu$1.SubmenuRoot> {}
+type MenuSubContentProps = MenuContentProps;
+/**
+ * Props for the Menu.SubmenuTrigger component.
+ */
+interface MenuSubmenuTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof Menu$1.SubmenuTrigger>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+  inset?: boolean;
+}
+type MenuSubTriggerProps = MenuSubmenuTriggerProps;
+/**
+ * Root component that manages menu state.
+ *
+ * @example
+ * ```tsx
+ * <Menu.Root>
+ *   <Menu.Trigger>Actions</Menu.Trigger>
+ *   <Menu.Portal>
+ *     <Menu.Positioner>
+ *       <Menu.Popup>
+ *         <Menu.Item>Edit</Menu.Item>
+ *         <Menu.Item>Delete</Menu.Item>
+ *       </Menu.Popup>
+ *     </Menu.Positioner>
+ *   </Menu.Portal>
+ * </Menu.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/menu | Base UI Menu}
+ */
+declare const MenuRoot: (props: MenuProps) => React.JSX.Element;
+/**
+ * Button that toggles the menu visibility.
+ */
+declare function MenuTrigger({
+  className,
+  ref,
+  ...props
+}: MenuTriggerProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+/**
+ * Renders menu content in a portal.
+ */
+declare const MenuPortal: (props: MenuPortalProps) => React.JSX.Element;
+/**
+ * Positions the menu popup relative to the trigger.
+ */
+declare function MenuPositioner({
+  className,
+  ref,
+  ...props
+}: MenuPositionerProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Container for menu items.
+ */
+declare function MenuPopup({
+  className,
+  ref,
+  ...props
+}: MenuPopupProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function MenuContent({
+  anchor,
+  positionMethod,
+  side,
+  sideOffset,
+  align,
+  alignOffset,
+  collisionBoundary,
+  collisionPadding,
+  sticky,
+  arrowPadding,
+  disableAnchorTracking,
+  collisionAvoidance,
+  ...props
+}: MenuContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Interactive menu item.
+ */
+declare function MenuItem({
+  className,
+  inset,
+  variant,
+  ref,
+  ...props
+}: MenuItemProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Groups related menu items.
+ */
+declare function MenuGroup({
+  className,
+  ref,
+  ...props
+}: MenuGroupProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Label for a group of menu items.
+ */
+declare function MenuGroupLabel({
+  className,
+  inset,
+  ref,
+  ...props
+}: MenuGroupLabelProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare const MenuLabel: typeof MenuGroupLabel;
+/**
+ * Arrow pointing to the trigger.
+ */
+declare function MenuArrow({
+  className,
+  ref,
+  ...props
+}: MenuArrowProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Visual separator between menu sections.
+ */
+declare function MenuSeparator({
+  className,
+  ref,
+  ...props
+}: MenuSeparatorProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Group for exclusive radio selection.
+ */
+declare function MenuRadioGroup({
+  className,
+  ref,
+  ...props
+}: MenuRadioGroupProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Radio item for exclusive selection.
+ */
+declare function MenuRadioItem({
+  className,
+  children,
+  ref,
+  ...props
+}: MenuRadioItemProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Indicator for selected radio item.
+ */
+declare function MenuRadioItemIndicator({
+  className,
+  ref,
+  ...props
+}: MenuRadioItemIndicatorProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+/**
+ * Checkbox item for toggling options.
+ */
+declare function MenuCheckboxItem({
+  className,
+  children,
+  ref,
+  ...props
+}: MenuCheckboxItemProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Indicator for checked checkbox item.
+ */
+declare function MenuCheckboxItemIndicator({
+  className,
+  ref,
+  ...props
+}: MenuCheckboxItemIndicatorProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+declare function MenuShortcut({
+  className,
+  ref,
+  ...props
+}: MenuShortcutProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+declare function MenuSub(props: MenuSubProps): React.JSX.Element;
+declare function MenuSubContent({
+  side,
+  align,
+  sideOffset,
+  ...props
+}: MenuSubContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Trigger that opens a submenu.
+ */
+declare function MenuSubmenuTrigger({
+  className,
+  inset,
+  ref,
+  ...props
+}: MenuSubmenuTriggerProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare const MenuSubTrigger: typeof MenuSubmenuTrigger;
+/**
+ * A dropdown menu with keyboard navigation support.
+ * Provides items, groups, checkboxes, radio selections, and nested submenus.
+ *
+ * @example
+ * ```tsx
+ * // Basic menu
+ * <Menu.Root>
+ *   <Menu.Trigger>Actions</Menu.Trigger>
+ *   <Menu.Portal>
+ *     <Menu.Positioner>
+ *       <Menu.Popup>
+ *         <Menu.Item onClick={() => console.log('Edit')}>Edit</Menu.Item>
+ *         <Menu.Item onClick={() => console.log('Copy')}>Copy</Menu.Item>
+ *         <Menu.Separator />
+ *         <Menu.Item onClick={() => console.log('Delete')}>Delete</Menu.Item>
+ *       </Menu.Popup>
+ *     </Menu.Positioner>
+ *   </Menu.Portal>
+ * </Menu.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Menu with checkbox items
+ * <Menu.Root>
+ *   <Menu.Trigger>View Options</Menu.Trigger>
+ *   <Menu.Portal>
+ *     <Menu.Positioner>
+ *       <Menu.Popup>
+ *         <Menu.CheckboxItem checked={showGrid} onCheckedChange={setShowGrid}>
+ *           <Menu.CheckboxItemIndicator />
+ *           Show Grid
+ *         </Menu.CheckboxItem>
+ *       </Menu.Popup>
+ *     </Menu.Positioner>
+ *   </Menu.Portal>
+ * </Menu.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/menu | Base UI Menu}
+ */
+declare const Menu: ((props: MenuProps) => React.JSX.Element) & {
+  Root: (props: MenuProps) => React.JSX.Element;
+  Trigger: typeof MenuTrigger;
+  Portal: (props: MenuPortalProps) => React.JSX.Element;
+  Positioner: typeof MenuPositioner;
+  Popup: typeof MenuPopup;
+  Content: typeof MenuContent;
+  Item: typeof MenuItem;
+  Group: typeof MenuGroup;
+  GroupLabel: typeof MenuGroupLabel;
+  Label: typeof MenuGroupLabel;
+  Arrow: typeof MenuArrow;
+  Separator: typeof MenuSeparator;
+  RadioGroup: typeof MenuRadioGroup;
+  RadioItem: typeof MenuRadioItem;
+  RadioItemIndicator: typeof MenuRadioItemIndicator;
+  CheckboxItem: typeof MenuCheckboxItem;
+  CheckboxItemIndicator: typeof MenuCheckboxItemIndicator;
+  Shortcut: typeof MenuShortcut;
+  Sub: typeof MenuSub;
+  SubContent: typeof MenuSubContent;
+  SubTrigger: typeof MenuSubmenuTrigger;
+  SubmenuTrigger: typeof MenuSubmenuTrigger;
+};
+//#endregion
+export { Menu, MenuArrow, MenuArrowProps, MenuCheckboxItem, MenuCheckboxItemIndicator, MenuCheckboxItemIndicatorProps, MenuCheckboxItemProps, MenuContent, MenuContentProps, MenuGroup, MenuGroupLabel, MenuGroupLabelProps, MenuGroupProps, MenuItem, MenuItemProps, MenuLabel, MenuLabelProps, MenuPopup, MenuPopupProps, MenuPortal, MenuPortalProps, MenuPositioner, MenuPositionerProps, MenuProps, MenuRadioGroup, MenuRadioGroupProps, MenuRadioItem, MenuRadioItemIndicator, MenuRadioItemIndicatorProps, MenuRadioItemProps, MenuRoot, MenuSeparator, MenuSeparatorProps, MenuShortcut, MenuShortcutProps, MenuSub, MenuSubContent, MenuSubContentProps, MenuSubProps, MenuSubTrigger, MenuSubTriggerProps, MenuSubmenuTrigger, MenuSubmenuTriggerProps, MenuTrigger, MenuTriggerProps };