@mcp-b/react-components 0.1.1 → 0.1.3

package/dist/components/NavigationMenu.js

@@ -0,0 +1,228 @@
+import { s as ChevronDownIcon } from "../icons-BsWc8g4E.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react/navigation-menu";
+//#region src/components/NavigationMenu.tsx
+/**
+* Navigation landmark for top-level or section-level links. Compose with
+* NavigationMenu.List, NavigationMenu.Item, NavigationMenu.Trigger, and
+* NavigationMenu.Content for disclosure-style navigation.
+*
+* Sigvelo changes: wraps Base UI NavigationMenu with stable class names and
+* CSS-token styling, and removes invalid `aria-orientation` from the rendered
+* list for axe compatibility.
+*
+* Use for app or section navigation. Do not use it for command menus or
+* context actions. Base UI owns keyboard navigation and focus behavior; apps
+* provide meaningful link text and panel content.
+*
+* @example
+* ```tsx
+* <NavigationMenu.Root>
+*   <NavigationMenu.List>
+*     <NavigationMenu.Item>
+*       <NavigationMenu.Trigger>Products</NavigationMenu.Trigger>
+*       <NavigationMenu.Portal>
+*         <NavigationMenu.Positioner>
+*           <NavigationMenu.Popup>
+*             <NavigationMenu.Content>
+*               <NavigationMenu.Link href="/products">All products</NavigationMenu.Link>
+*             </NavigationMenu.Content>
+*           </NavigationMenu.Popup>
+*         </NavigationMenu.Positioner>
+*       </NavigationMenu.Portal>
+*     </NavigationMenu.Item>
+*   </NavigationMenu.List>
+* </NavigationMenu.Root>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/navigation-menu | Base UI NavigationMenu}
+*/
+function Root({ className = "", children, viewport = true, ref, ...props }) {
+	const classes = ["navigation-menu", className].filter(Boolean).join(" ");
+	const shouldRenderViewport = viewport && !hasChildOfType(children, NavigationMenuPortal) && !hasChildOfType(children, NavigationMenu$1.Portal);
+	return /* @__PURE__ */ jsxs(NavigationMenu$1.Root, {
+		ref,
+		render: /* @__PURE__ */ jsx("nav", {}),
+		"data-slot": "navigation-menu",
+		"data-viewport": viewport,
+		className: classes,
+		...props,
+		children: [children, shouldRenderViewport && /* @__PURE__ */ jsx(NavigationMenuPortal, { children: /* @__PURE__ */ jsx(NavigationMenuPositioner, {
+			sideOffset: 4,
+			children: /* @__PURE__ */ jsx(NavigationMenuPopup, { children: /* @__PURE__ */ jsx(NavigationMenuViewport, {}) })
+		}) })]
+	});
+}
+function NavigationMenuList({ className = "", ref, ...props }) {
+	const classes = ["navigation-menu__list", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(NavigationMenu$1.List, {
+		ref,
+		"data-slot": "navigation-menu-list",
+		className: classes,
+		"aria-orientation": void 0,
+		...props
+	});
+}
+function NavigationMenuItem({ className = "", ref, ...props }) {
+	const classes = ["navigation-menu__item", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Item, {
+		ref,
+		"data-slot": "navigation-menu-item",
+		className: classes,
+		...props
+	});
+}
+function NavigationMenuTrigger({ className = "", children, ref, ...props }) {
+	const classes = ["navigation-menu__trigger", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs(NavigationMenu$1.Trigger, {
+		ref,
+		"data-slot": "navigation-menu-trigger",
+		className: classes,
+		...props,
+		children: [children, hasChildOfType(children, NavigationMenuIcon) ? null : /* @__PURE__ */ jsx(NavigationMenuIcon, { children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12 }) })]
+	});
+}
+function NavigationMenuIcon({ className = "", ref, ...props }) {
+	const classes = ["navigation-menu__icon", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Icon, {
+		ref,
+		"data-slot": "navigation-menu-icon",
+		className: classes,
+		...props
+	});
+}
+function NavigationMenuContent({ className = "", ref, ...props }) {
+	const classes = ["navigation-menu__content", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Content, {
+		ref,
+		"data-slot": "navigation-menu-content",
+		className: classes,
+		...props
+	});
+}
+function NavigationMenuLink({ className = "", ref, ...props }) {
+	const classes = ["navigation-menu__link", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Link, {
+		ref,
+		"data-slot": "navigation-menu-link",
+		className: classes,
+		...props
+	});
+}
+function NavigationMenuPortal(props) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Portal, {
+		"data-slot": "navigation-menu-portal",
+		...props
+	});
+}
+function NavigationMenuPositioner({ className = "", ref, ...props }) {
+	const classes = ["navigation-menu__positioner", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Positioner, {
+		ref,
+		"data-slot": "navigation-menu-positioner",
+		className: classes,
+		...props
+	});
+}
+function NavigationMenuPopup({ className = "", ref, ...props }) {
+	const classes = ["navigation-menu__popup", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Popup, {
+		ref,
+		"data-slot": "navigation-menu-popup",
+		className: classes,
+		...props
+	});
+}
+function NavigationMenuViewport({ className = "", ref, ...props }) {
+	const classes = ["navigation-menu__viewport", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Viewport, {
+		ref,
+		"data-slot": "navigation-menu-viewport",
+		className: classes,
+		...props
+	});
+}
+function NavigationMenuArrow({ className = "", ref, ...props }) {
+	const classes = ["navigation-menu__arrow", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Arrow, {
+		ref,
+		"data-slot": "navigation-menu-arrow",
+		className: classes,
+		...props
+	});
+}
+/**
+* A navigation menu component for website navigation with dropdown support.
+* Provides keyboard navigation and supports nested submenus.
+*
+* @example
+* ```tsx
+* // Basic navigation menu
+* <NavigationMenu.Root>
+*   <NavigationMenu.List>
+*     <NavigationMenu.Item>
+*       <NavigationMenu.Trigger>
+*         Products
+*         <NavigationMenu.Icon>
+*           <ChevronDownIcon />
+*         </NavigationMenu.Icon>
+*       </NavigationMenu.Trigger>
+*       <NavigationMenu.Content>
+*         <NavigationMenu.Link href="/products/analytics">
+*           Analytics
+*         </NavigationMenu.Link>
+*         <NavigationMenu.Link href="/products/automation">
+*           Automation
+*         </NavigationMenu.Link>
+*       </NavigationMenu.Content>
+*     </NavigationMenu.Item>
+*     <NavigationMenu.Item>
+*       <NavigationMenu.Link href="/about">About</NavigationMenu.Link>
+*     </NavigationMenu.Item>
+*   </NavigationMenu.List>
+*   <NavigationMenu.Portal>
+*     <NavigationMenu.Positioner>
+*       <NavigationMenu.Popup>
+*         <NavigationMenu.Viewport />
+*       </NavigationMenu.Popup>
+*     </NavigationMenu.Positioner>
+*   </NavigationMenu.Portal>
+* </NavigationMenu.Root>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/navigation-menu | Base UI NavigationMenu}
+*/
+const NavigationMenu = Object.assign(Root, {
+	Root,
+	List: NavigationMenuList,
+	Item: NavigationMenuItem,
+	Trigger: NavigationMenuTrigger,
+	Icon: NavigationMenuIcon,
+	Content: NavigationMenuContent,
+	Link: NavigationMenuLink,
+	Portal: NavigationMenuPortal,
+	Positioner: NavigationMenuPositioner,
+	Popup: NavigationMenuPopup,
+	Viewport: NavigationMenuViewport,
+	Arrow: NavigationMenuArrow
+});
+function NavigationMenuIndicator(props) {
+	return /* @__PURE__ */ jsx(NavigationMenuIcon, {
+		"data-slot": "navigation-menu-indicator",
+		...props
+	});
+}
+function navigationMenuTriggerStyle({ className } = {}) {
+	return ["navigation-menu__trigger", className].filter(Boolean).join(" ");
+}
+function hasChildOfType(children, type) {
+	return React.Children.toArray(children).some((child) => {
+		if (!React.isValidElement(child)) return false;
+		if (child.type === type) return true;
+		if (child.type === React.Fragment) return hasChildOfType(child.props.children, type);
+		return false;
+	});
+}
+//#endregion
+export { NavigationMenu, NavigationMenuArrow, NavigationMenuContent, NavigationMenuIcon, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPopup, NavigationMenuPortal, NavigationMenuPositioner, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle };

package/dist/components/NumberField.d.ts

@@ -0,0 +1,159 @@
+import * as React from "react";
+import { NumberField as NumberField$1 } from "@base-ui/react/number-field";
+
+//#region src/components/NumberField.d.ts
+/**
+ * Props for the NumberField.Root component.
+ */
+interface NumberFieldRootProps extends Omit<React.ComponentPropsWithoutRef<typeof NumberField$1.Root>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the NumberField.Group component.
+ */
+interface NumberFieldGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof NumberField$1.Group>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the NumberField.Input component.
+ */
+interface NumberFieldInputProps extends Omit<React.ComponentPropsWithoutRef<typeof NumberField$1.Input>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the NumberField.Increment component.
+ */
+interface NumberFieldIncrementProps extends Omit<React.ComponentPropsWithoutRef<typeof NumberField$1.Increment>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the NumberField.Decrement component.
+ */
+interface NumberFieldDecrementProps extends Omit<React.ComponentPropsWithoutRef<typeof NumberField$1.Decrement>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the NumberField.ScrubArea component.
+ */
+interface NumberFieldScrubAreaProps extends Omit<React.ComponentPropsWithoutRef<typeof NumberField$1.ScrubArea>, "className"> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Container that groups all parts and manages state. Renders a `<div>` element.
+ *
+ * @example
+ * ```tsx
+ * <NumberField.Root defaultValue={50} min={0} max={100}>
+ *   <NumberField.Group>
+ *     <NumberField.Decrement>-</NumberField.Decrement>
+ *     <NumberField.Input />
+ *     <NumberField.Increment>+</NumberField.Increment>
+ *   </NumberField.Group>
+ * </NumberField.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/number-field | Base UI NumberField}
+ */
+declare function NumberFieldRoot({
+  className,
+  ref,
+  ...props
+}: NumberFieldRootProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Groups the input with increment and decrement buttons.
+ */
+declare function NumberFieldGroup({
+  className,
+  ref,
+  ...props
+}: NumberFieldGroupProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * The native input control for the number field.
+ */
+declare function NumberFieldInput({
+  className,
+  ref,
+  ...props
+}: NumberFieldInputProps & {
+  ref?: React.Ref<HTMLInputElement>;
+}): React.JSX.Element;
+/**
+ * Button that increases the value.
+ */
+declare function NumberFieldIncrement({
+  className,
+  ref,
+  ...props
+}: NumberFieldIncrementProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+/**
+ * Button that decreases the value.
+ */
+declare function NumberFieldDecrement({
+  className,
+  ref,
+  ...props
+}: NumberFieldDecrementProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+/**
+ * Interactive area for click-and-drag value changes.
+ */
+declare function NumberFieldScrubArea({
+  className,
+  ref,
+  ...props
+}: NumberFieldScrubAreaProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+/**
+ * A numeric input with increment/decrement buttons and optional scrub area.
+ * Supports keyboard modifiers for different step sizes and locale formatting.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <NumberField.Root defaultValue={0}>
+ *   <NumberField.Group>
+ *     <NumberField.Decrement>-</NumberField.Decrement>
+ *     <NumberField.Input />
+ *     <NumberField.Increment>+</NumberField.Increment>
+ *   </NumberField.Group>
+ * </NumberField.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With min/max constraints
+ * <NumberField.Root defaultValue={50} min={0} max={100} step={5}>
+ *   <NumberField.Group>
+ *     <NumberField.Decrement>-</NumberField.Decrement>
+ *     <NumberField.Input />
+ *     <NumberField.Increment>+</NumberField.Increment>
+ *   </NumberField.Group>
+ * </NumberField.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/number-field | Base UI NumberField}
+ */
+declare const NumberField: {
+  Root: typeof NumberFieldRoot;
+  Group: typeof NumberFieldGroup;
+  Input: typeof NumberFieldInput;
+  Increment: typeof NumberFieldIncrement;
+  Decrement: typeof NumberFieldDecrement;
+  ScrubArea: typeof NumberFieldScrubArea;
+};
+//#endregion
+export { NumberField, NumberFieldDecrementProps, NumberFieldGroupProps, NumberFieldIncrementProps, NumberFieldInputProps, NumberFieldRootProps, NumberFieldScrubAreaProps };

package/dist/components/NumberField.js

@@ -0,0 +1,123 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { NumberField as NumberField$1 } from "@base-ui/react/number-field";
+//#region src/components/NumberField.tsx
+/**
+* Container that groups all parts and manages state. Renders a `<div>` element.
+*
+* @example
+* ```tsx
+* <NumberField.Root defaultValue={50} min={0} max={100}>
+*   <NumberField.Group>
+*     <NumberField.Decrement>-</NumberField.Decrement>
+*     <NumberField.Input />
+*     <NumberField.Increment>+</NumberField.Increment>
+*   </NumberField.Group>
+* </NumberField.Root>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/number-field | Base UI NumberField}
+*/
+function NumberFieldRoot({ className = "", ref, ...props }) {
+	const classes = ["number-field", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(NumberField$1.Root, {
+		ref,
+		className: classes,
+		...props
+	});
+}
+/**
+* Groups the input with increment and decrement buttons.
+*/
+function NumberFieldGroup({ className = "", ref, ...props }) {
+	const classes = ["number-field__group", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(NumberField$1.Group, {
+		ref,
+		className: classes,
+		...props
+	});
+}
+/**
+* The native input control for the number field.
+*/
+function NumberFieldInput({ className = "", ref, ...props }) {
+	const classes = ["number-field__input", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(NumberField$1.Input, {
+		ref,
+		className: classes,
+		...props
+	});
+}
+/**
+* Button that increases the value.
+*/
+function NumberFieldIncrement({ className = "", ref, ...props }) {
+	const classes = ["number-field__increment", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(NumberField$1.Increment, {
+		ref,
+		className: classes,
+		...props
+	});
+}
+/**
+* Button that decreases the value.
+*/
+function NumberFieldDecrement({ className = "", ref, ...props }) {
+	const classes = ["number-field__decrement", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(NumberField$1.Decrement, {
+		ref,
+		className: classes,
+		...props
+	});
+}
+/**
+* Interactive area for click-and-drag value changes.
+*/
+function NumberFieldScrubArea({ className = "", ref, ...props }) {
+	const classes = ["number-field__scrub-area", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(NumberField$1.ScrubArea, {
+		ref,
+		className: classes,
+		...props
+	});
+}
+/**
+* A numeric input with increment/decrement buttons and optional scrub area.
+* Supports keyboard modifiers for different step sizes and locale formatting.
+*
+* @example
+* ```tsx
+* // Basic usage
+* <NumberField.Root defaultValue={0}>
+*   <NumberField.Group>
+*     <NumberField.Decrement>-</NumberField.Decrement>
+*     <NumberField.Input />
+*     <NumberField.Increment>+</NumberField.Increment>
+*   </NumberField.Group>
+* </NumberField.Root>
+* ```
+*
+* @example
+* ```tsx
+* // With min/max constraints
+* <NumberField.Root defaultValue={50} min={0} max={100} step={5}>
+*   <NumberField.Group>
+*     <NumberField.Decrement>-</NumberField.Decrement>
+*     <NumberField.Input />
+*     <NumberField.Increment>+</NumberField.Increment>
+*   </NumberField.Group>
+* </NumberField.Root>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/number-field | Base UI NumberField}
+*/
+const NumberField = {
+	Root: NumberFieldRoot,
+	Group: NumberFieldGroup,
+	Input: NumberFieldInput,
+	Increment: NumberFieldIncrement,
+	Decrement: NumberFieldDecrement,
+	ScrubArea: NumberFieldScrubArea
+};
+//#endregion
+export { NumberField };