@mcp-b/react-components 0.1.1 → 0.1.2

package/dist/components/Select.js

@@ -0,0 +1,260 @@
+import { i as ArrowUpIcon, o as CheckIcon, t as ArrowDownIcon } from "../icons-BsWc8g4E.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Select as Select$1 } from "@base-ui/react/select";
+//#region src/components/Select.tsx
+const SelectLabelsContext = React.createContext(null);
+/**
+* A select component for choosing from a list of options.
+*
+* @example
+* ```tsx
+* <Select defaultValue="option1">
+*   <SelectTrigger>
+*     <SelectValue placeholder="Select..." />
+*   </SelectTrigger>
+*   <SelectPortal>
+*     <SelectPositioner>
+*       <SelectPopup>
+*         <SelectList>
+*           <SelectOption value="option1">Option 1</SelectOption>
+*           <SelectOption value="option2">Option 2</SelectOption>
+*         </SelectList>
+*       </SelectPopup>
+*     </SelectPositioner>
+*   </SelectPortal>
+* </Select>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/select | Base UI Select}
+*/
+function Select({ items, ...props }) {
+	const [labels, setLabels] = React.useState(() => /* @__PURE__ */ new Map());
+	const itemLabels = React.useMemo(() => {
+		if (!items) return null;
+		const map = /* @__PURE__ */ new Map();
+		for (const item of items) map.set(item.value, item.label);
+		return map;
+	}, [items]);
+	const registerLabel = React.useCallback((value, label) => {
+		setLabels((prev) => {
+			if (prev.get(value) === label && prev.has(value)) return prev;
+			const next = new Map(prev);
+			next.set(value, label);
+			return next;
+		});
+	}, []);
+	const unregisterLabel = React.useCallback((value) => {
+		setLabels((prev) => {
+			if (!prev.has(value)) return prev;
+			const next = new Map(prev);
+			next.delete(value);
+			return next;
+		});
+	}, []);
+	const mergedLabels = React.useMemo(() => {
+		if (!itemLabels) return labels;
+		const merged = new Map(itemLabels);
+		for (const [k, v] of labels) merged.set(k, v);
+		return merged;
+	}, [labels, itemLabels]);
+	const contextValue = React.useMemo(() => ({
+		labels: mergedLabels,
+		registerLabel,
+		unregisterLabel
+	}), [
+		mergedLabels,
+		registerLabel,
+		unregisterLabel
+	]);
+	return /* @__PURE__ */ jsx(SelectLabelsContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(Select$1.Root, {
+			"data-slot": "select",
+			...props
+		})
+	});
+}
+function SelectTrigger({ size = "default", className = "", children, ref, ...props }) {
+	const normalizedSize = size === "md" ? "default" : size;
+	const classes = [
+		"select__trigger",
+		normalizedSize === "sm" && "select__trigger--sm",
+		className
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs(Select$1.Trigger, {
+		ref,
+		"data-slot": "select-trigger",
+		"data-size": normalizedSize,
+		className: classes,
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Select$1.Icon, {
+			className: "select__icon",
+			children: /* @__PURE__ */ jsx(ArrowDownIcon, {})
+		})]
+	});
+}
+function SelectValue({ placeholder, children, ref, ...props }) {
+	const context = React.useContext(SelectLabelsContext);
+	if (children) return /* @__PURE__ */ jsx(Select$1.Value, {
+		ref,
+		"data-slot": "select-value",
+		placeholder,
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsx(Select$1.Value, {
+		ref,
+		"data-slot": "select-value",
+		...props,
+		children: (value) => {
+			if (value === null || value === void 0 || value === "") return placeholder ? /* @__PURE__ */ jsx("span", {
+				className: "select__placeholder",
+				children: placeholder
+			}) : null;
+			return context?.labels.get(value) ?? value;
+		}
+	});
+}
+const SelectPortal = Select$1.Portal;
+function SelectPositioner({ className = "", ref, ...props }) {
+	const classes = ["select__positioner", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Select$1.Positioner, {
+		ref,
+		className: classes,
+		...props
+	});
+}
+function SelectPopup({ className = "", ref, ...props }) {
+	const classes = ["select__popup", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Select$1.Popup, {
+		ref,
+		"data-slot": "select-content",
+		className: classes,
+		...props
+	});
+}
+function SelectContent({ anchor, positionMethod, side, sideOffset = 4, align, alignOffset, collisionBoundary, collisionPadding, sticky, arrowPadding, disableAnchorTracking, collisionAvoidance, position, children, ...props }) {
+	return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(SelectPositioner, {
+		anchor,
+		positionMethod,
+		side,
+		sideOffset: position === "item-aligned" ? 0 : sideOffset,
+		align,
+		alignOffset,
+		collisionBoundary,
+		collisionPadding,
+		sticky,
+		arrowPadding,
+		disableAnchorTracking,
+		collisionAvoidance,
+		children: /* @__PURE__ */ jsxs(SelectPopup, {
+			...props,
+			children: [
+				/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+				/* @__PURE__ */ jsx(SelectList, { children }),
+				/* @__PURE__ */ jsx(SelectScrollDownButton, {})
+			]
+		})
+	}) });
+}
+function SelectList({ className = "", ref, ...props }) {
+	const classes = ["select__list", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Select$1.List, {
+		ref,
+		"data-slot": "select-viewport",
+		className: classes,
+		...props
+	});
+}
+function SelectOption({ className = "", value, children, ref, ...props }) {
+	const context = React.useContext(SelectLabelsContext);
+	const contextRef = React.useRef(context);
+	contextRef.current = context;
+	const childrenRef = React.useRef(children);
+	childrenRef.current = children;
+	React.useEffect(() => {
+		const ctx = contextRef.current;
+		if (ctx && value !== void 0) {
+			ctx.registerLabel(value, childrenRef.current);
+			return () => ctx.unregisterLabel(value);
+		}
+	}, [value]);
+	const classes = ["select__option", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs(Select$1.Item, {
+		ref,
+		"data-slot": "select-item",
+		className: classes,
+		value,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-slot": "select-item-indicator",
+			className: "select__item-indicator",
+			children: /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+		}), /* @__PURE__ */ jsx(Select$1.ItemText, { children })]
+	});
+}
+const SelectItem = SelectOption;
+function SelectOptionGroup({ label, className = "", children, ref, ...props }) {
+	const classes = ["select__option-group", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs(Select$1.Group, {
+		ref,
+		"data-slot": "select-group",
+		className: classes,
+		...props,
+		children: [label && /* @__PURE__ */ jsx(Select$1.GroupLabel, {
+			"data-slot": "select-label",
+			className: "select__group-label",
+			children: label
+		}), children]
+	});
+}
+const SelectGroup = SelectOptionGroup;
+function SelectLabel({ className = "", ref, ...props }) {
+	const classes = ["select__group-label", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Select$1.GroupLabel, {
+		ref,
+		"data-slot": "select-label",
+		className: classes,
+		...props
+	});
+}
+function SelectSeparator({ className = "", ref, ...props }) {
+	const classes = ["select__separator", className].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Select$1.Separator, {
+		ref,
+		"data-slot": "select-separator",
+		className: classes,
+		...props
+	});
+}
+function SelectScrollUpButton({ className = "", children, ref, ...props }) {
+	const classes = [
+		"select__scroll-button",
+		"select__scroll-button--up",
+		className
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Select$1.ScrollUpArrow, {
+		ref,
+		"data-slot": "select-scroll-up-button",
+		className: classes,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ArrowUpIcon, {})
+	});
+}
+function SelectScrollDownButton({ className = "", children, ref, ...props }) {
+	const classes = [
+		"select__scroll-button",
+		"select__scroll-button--down",
+		className
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Select$1.ScrollDownArrow, {
+		ref,
+		"data-slot": "select-scroll-down-button",
+		className: classes,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ArrowDownIcon, {})
+	});
+}
+//#endregion
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectList, SelectOption, SelectOptionGroup, SelectPopup, SelectPortal, SelectPositioner, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };

package/dist/components/Separator.d.ts

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { Separator as Separator$1 } from "@base-ui/react/separator";
+
+//#region src/components/Separator.d.ts
+/**
+ * Props for the Separator component.
+ */
+interface SeparatorProps extends Omit<React.ComponentPropsWithRef<typeof Separator$1>, "className"> {
+  /**
+   * Whether the separator is purely visual.
+   * @default true
+   */
+  decorative?: boolean;
+  /**
+   * Additional CSS class names.
+   */
+  className?: string;
+}
+/**
+ * A visual divider component that separates content sections.
+ *
+ * @example
+ * ```tsx
+ * <Separator />
+ *
+ * <nav style={{ display: 'flex', alignItems: 'center' }}>
+ *   <a href="/home">Home</a>
+ *   <Separator orientation="vertical" />
+ *   <a href="/about">About</a>
+ * </nav>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/separator | Base UI Separator}
+ */
+declare function Separator({
+  orientation,
+  decorative,
+  className,
+  ref,
+  ...props
+}: SeparatorProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
+export { Separator, SeparatorProps };

package/dist/components/Separator.js

@@ -0,0 +1,40 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { Separator as Separator$1 } from "@base-ui/react/separator";
+//#region src/components/Separator.tsx
+/**
+* A visual divider component that separates content sections.
+*
+* @example
+* ```tsx
+* <Separator />
+*
+* <nav style={{ display: 'flex', alignItems: 'center' }}>
+*   <a href="/home">Home</a>
+*   <Separator orientation="vertical" />
+*   <a href="/about">About</a>
+* </nav>
+* ```
+*
+* @see {@link https://base-ui.com/react/components/separator | Base UI Separator}
+*/
+function Separator({ orientation = "horizontal", decorative = true, className = "", ref, ...props }) {
+	const classes = [
+		"separator",
+		`separator--${orientation}`,
+		className
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsx(Separator$1, {
+		ref,
+		"data-slot": "separator",
+		...decorative ? {
+			role: "none",
+			"aria-orientation": void 0
+		} : { "aria-orientation": orientation === "vertical" ? orientation : void 0 },
+		orientation,
+		className: classes,
+		...props
+	});
+}
+//#endregion
+export { Separator };

package/dist/components/Shell.d.ts

@@ -0,0 +1,163 @@
+import * as React from "react";
+
+//#region src/components/Shell.d.ts
+/**
+ * Props for the Shell.Root component.
+ */
+interface ShellRootProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Additional CSS class names */
+  className?: string;
+  /** The heading text displayed in the header */
+  heading?: string;
+}
+/**
+ * Props for the Shell.ActionBar component.
+ */
+interface ShellActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Props for the Shell.Action component.
+ */
+interface ShellActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Additional CSS class names */
+  className?: string;
+  /** Icon to display */
+  icon?: React.ReactNode;
+  /** Whether this action is currently active */
+  active?: boolean;
+  /** Accessible label for the action */
+  label?: string;
+}
+/**
+ * Props for the Shell.Panel component.
+ */
+interface ShellPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Additional CSS class names */
+  className?: string;
+  /** The panel heading */
+  heading?: string;
+  /** Whether the panel is visible */
+  open?: boolean;
+}
+/**
+ * Props for the Shell.Content component.
+ */
+interface ShellContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Additional CSS class names */
+  className?: string;
+}
+/**
+ * Root container for the shell layout.
+ * Provides a structured layout with optional header, action bar, panel, and content areas.
+ *
+ * Built internally for dense tools with side actions and optional panels. Use
+ * for app-like work surfaces, not marketing pages or generic sections.
+ *
+ * Styling consumes Sigvelo layout, border, surface, spacing, and focus tokens.
+ * Actions need labels because the visible affordance is usually icon-only.
+ *
+ * @example
+ * ```tsx
+ * <Shell.Root heading="Project">
+ *   <Shell.ActionBar>
+ *     <Shell.Action icon={<FilterIcon />} label="Filter" />
+ *   </Shell.ActionBar>
+ *   <Shell.Content>Map or tool content</Shell.Content>
+ * </Shell.Root>
+ * ```
+ */
+declare function ShellRoot({
+  className,
+  heading,
+  children,
+  ref,
+  ...props
+}: ShellRootProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Container for action buttons that toggle panels.
+ * Typically placed on the left side of the shell.
+ */
+declare function ShellActionBar({
+  className,
+  children,
+  ref,
+  ...props
+}: ShellActionBarProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * An action button within the action bar.
+ */
+declare function ShellAction({
+  className,
+  icon,
+  active,
+  label,
+  ref,
+  ...props
+}: ShellActionProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+/**
+ * A collapsible panel that slides in from the side.
+ */
+declare function ShellPanel({
+  className,
+  heading,
+  open,
+  children,
+  ref,
+  ...props
+}: ShellPanelProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * The main content area of the shell.
+ */
+declare function ShellContent({
+  className,
+  children,
+  ref,
+  ...props
+}: ShellContentProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * A shell layout component with action bar, collapsible panel, and content areas.
+ * Useful for map applications and other interactive tools.
+ *
+ * @example
+ * ```tsx
+ * const [filterOpen, setFilterOpen] = useState(false);
+ *
+ * <Shell.Root heading="My Map Application">
+ *   <Shell.ActionBar>
+ *     <Shell.Action
+ *       icon={<FilterIcon />}
+ *       active={filterOpen}
+ *       onClick={() => setFilterOpen(!filterOpen)}
+ *       label="Filter"
+ *     />
+ *   </Shell.ActionBar>
+ *   <Shell.Panel heading="Filter" open={filterOpen}>
+ *     <p>Filter controls here</p>
+ *   </Shell.Panel>
+ *   <Shell.Content>
+ *     <div id="map" />
+ *   </Shell.Content>
+ * </Shell.Root>
+ * ```
+ */
+declare const Shell: {
+  Root: typeof ShellRoot;
+  ActionBar: typeof ShellActionBar;
+  Action: typeof ShellAction;
+  Panel: typeof ShellPanel;
+  Content: typeof ShellContent;
+};
+//#endregion
+export { Shell, ShellActionBarProps, ShellActionProps, ShellContentProps, ShellPanelProps, ShellRootProps };

package/dist/components/Shell.js

@@ -0,0 +1,137 @@
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Shell.tsx
+/**
+* Root container for the shell layout.
+* Provides a structured layout with optional header, action bar, panel, and content areas.
+*
+* Built internally for dense tools with side actions and optional panels. Use
+* for app-like work surfaces, not marketing pages or generic sections.
+*
+* Styling consumes Sigvelo layout, border, surface, spacing, and focus tokens.
+* Actions need labels because the visible affordance is usually icon-only.
+*
+* @example
+* ```tsx
+* <Shell.Root heading="Project">
+*   <Shell.ActionBar>
+*     <Shell.Action icon={<FilterIcon />} label="Filter" />
+*   </Shell.ActionBar>
+*   <Shell.Content>Map or tool content</Shell.Content>
+* </Shell.Root>
+* ```
+*/
+function ShellRoot({ className = "", heading, children, ref, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: ["shell", className].filter(Boolean).join(" "),
+		...props,
+		children: [heading && /* @__PURE__ */ jsx("header", {
+			className: "shell__header",
+			children: /* @__PURE__ */ jsx("h3", {
+				className: "shell__heading",
+				children: heading
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "shell__body",
+			children
+		})]
+	});
+}
+/**
+* Container for action buttons that toggle panels.
+* Typically placed on the left side of the shell.
+*/
+function ShellActionBar({ className = "", children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: ["shell__action-bar", className].filter(Boolean).join(" "),
+		...props,
+		children
+	});
+}
+/**
+* An action button within the action bar.
+*/
+function ShellAction({ className = "", icon, active, label, ref, ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		className: [
+			"shell__action",
+			active && "shell__action--active",
+			className
+		].filter(Boolean).join(" "),
+		"aria-label": label,
+		"aria-pressed": active,
+		...props,
+		children: icon
+	});
+}
+/**
+* A collapsible panel that slides in from the side.
+*/
+function ShellPanel({ className = "", heading, open = false, children, ref, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: [
+			"shell__panel",
+			open && "shell__panel--open",
+			className
+		].filter(Boolean).join(" "),
+		hidden: !open,
+		...props,
+		children: [heading && /* @__PURE__ */ jsx("div", {
+			className: "shell__panel-heading",
+			children: heading
+		}), /* @__PURE__ */ jsx("div", {
+			className: "shell__panel-content",
+			children
+		})]
+	});
+}
+/**
+* The main content area of the shell.
+*/
+function ShellContent({ className = "", children, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: ["shell__content", className].filter(Boolean).join(" "),
+		...props,
+		children
+	});
+}
+/**
+* A shell layout component with action bar, collapsible panel, and content areas.
+* Useful for map applications and other interactive tools.
+*
+* @example
+* ```tsx
+* const [filterOpen, setFilterOpen] = useState(false);
+*
+* <Shell.Root heading="My Map Application">
+*   <Shell.ActionBar>
+*     <Shell.Action
+*       icon={<FilterIcon />}
+*       active={filterOpen}
+*       onClick={() => setFilterOpen(!filterOpen)}
+*       label="Filter"
+*     />
+*   </Shell.ActionBar>
+*   <Shell.Panel heading="Filter" open={filterOpen}>
+*     <p>Filter controls here</p>
+*   </Shell.Panel>
+*   <Shell.Content>
+*     <div id="map" />
+*   </Shell.Content>
+* </Shell.Root>
+* ```
+*/
+const Shell = {
+	Root: ShellRoot,
+	ActionBar: ShellActionBar,
+	Action: ShellAction,
+	Panel: ShellPanel,
+	Content: ShellContent
+};
+//#endregion
+export { Shell };