@soroush.tech/design-system 0.1.0

package/dist/Markdown/Preview.mjs

@@ -0,0 +1,236 @@
+import { d as styled } from "../src-DcNT2aIK.mjs";
+import { View } from "../View.mjs";
+import { Typography } from "../Typography.mjs";
+import { Checkbox } from "../Checkbox.mjs";
+import { CodeBlock } from "../CodeBlock.mjs";
+import { Image } from "../Image.mjs";
+import { Link } from "../Link.mjs";
+import { Quote } from "../Quote.mjs";
+import { Table } from "../Table/Table.mjs";
+import { TableBody } from "../Table/TableBody.mjs";
+import { TableCell } from "../Table/TableCell.mjs";
+import { TableContainer } from "../Table/TableContainer.mjs";
+import { TableHead } from "../Table/TableHead.mjs";
+import { TableRow } from "../Table/TableRow.mjs";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeHighlight from "rehype-highlight";
+//#region src/Markdown/Preview/Preview.tsx
+const remarkPlugins = [remarkGfm];
+const rehypePlugins = [[rehypeHighlight, { ignoreMissing: true }]];
+const PreviewRoot = styled(View, {
+	name: "MarkdownPreview",
+	label: "MarkdownPreview"
+})({
+	minWidth: 0,
+	maxWidth: "100%",
+	overflowWrap: "break-word"
+});
+const EMPTY_SLOT_PROPS = {};
+const SlotPropsContext = createContext(EMPTY_SLOT_PROPS);
+function slotted(render) {
+	function Slotted(props) {
+		return render(useContext(SlotPropsContext), props);
+	}
+	return Slotted;
+}
+const components = {
+	h1: slotted(({ h1 }, { children }) => /* @__PURE__ */ jsx(Typography, {
+		mt: 2,
+		variant: "h1",
+		color: "primary",
+		gutterBottom: true,
+		...h1,
+		children
+	})),
+	h2: slotted(({ h2 }, { children }) => /* @__PURE__ */ jsx(Typography, {
+		mt: 2,
+		variant: "h2",
+		color: "primary",
+		gutterBottom: true,
+		...h2,
+		children
+	})),
+	h3: slotted(({ h3 }, { children }) => /* @__PURE__ */ jsx(Typography, {
+		mt: 2,
+		variant: "h3",
+		color: "primary",
+		gutterBottom: true,
+		...h3,
+		children
+	})),
+	h4: slotted(({ h4 }, { children }) => /* @__PURE__ */ jsx(Typography, {
+		mt: 2,
+		variant: "h4",
+		gutterBottom: true,
+		...h4,
+		children
+	})),
+	h5: slotted(({ h5 }, { children }) => /* @__PURE__ */ jsx(Typography, {
+		mt: 2,
+		variant: "h5",
+		gutterBottom: true,
+		...h5,
+		children
+	})),
+	h6: slotted(({ h6 }, { children }) => /* @__PURE__ */ jsx(Typography, {
+		mt: 2,
+		variant: "h6",
+		gutterBottom: true,
+		...h6,
+		children
+	})),
+	p: slotted(({ p }, { children }) => /* @__PURE__ */ jsx(Typography, {
+		variant: "body1",
+		color: "secondary",
+		mb: 2,
+		lineHeight: "relaxed",
+		...p,
+		children
+	})),
+	a: slotted(({ a }, { href, children }) => /* @__PURE__ */ jsx(Link, {
+		href,
+		underline: "hover",
+		...a,
+		children
+	})),
+	strong: slotted(({ strong }, { children }) => /* @__PURE__ */ jsx(Typography, {
+		as: "strong",
+		variant: "inherit",
+		fontWeight: "extraBold",
+		...strong,
+		children
+	})),
+	em: slotted(({ em }, { children }) => /* @__PURE__ */ jsx(Typography, {
+		as: "em",
+		variant: "inherit",
+		fontStyle: "italic",
+		...em,
+		children
+	})),
+	ul: slotted(({ ul }, { children }) => /* @__PURE__ */ jsx(View, {
+		as: "ul",
+		pl: 3,
+		mb: 2,
+		...ul,
+		children
+	})),
+	ol: slotted(({ ol }, { children }) => /* @__PURE__ */ jsx(View, {
+		as: "ol",
+		pl: 3,
+		mb: 2,
+		...ol,
+		children
+	})),
+	li: slotted(({ li }, { children, className }) => /* @__PURE__ */ jsx(Typography, {
+		as: "li",
+		color: "secondary",
+		lineHeight: "base",
+		variant: "body1",
+		gutterBottom: true,
+		style: className?.includes("task-list-item") ? { listStyleType: "none" } : void 0,
+		...li,
+		children
+	})),
+	input: slotted(({ input }, { checked }) => /* @__PURE__ */ jsx(Checkbox, {
+		checked: Boolean(checked),
+		disabled: true,
+		color: "primary",
+		size: "sm",
+		"aria-label": "Task item",
+		mr: 1,
+		...input
+	})),
+	blockquote: slotted(({ blockquote }, { children }) => /* @__PURE__ */ jsx(Quote, {
+		as: "blockquote",
+		pl: 3,
+		py: 1,
+		my: 2,
+		...blockquote,
+		children
+	})),
+	code: slotted(({ code }, { className, children }) => {
+		const isBlock = (className ?? "").includes("language-");
+		return /* @__PURE__ */ jsx(Typography, {
+			as: "code",
+			color: "initial",
+			variant: "inherit",
+			fontFamily: "mono",
+			display: isBlock ? "block" : "inline",
+			bg: isBlock ? "transparent" : "paper",
+			px: isBlock ? 0 : 1,
+			borderRadius: "sm",
+			...code,
+			children
+		});
+	}),
+	pre: slotted(({ pre }, { children }) => /* @__PURE__ */ jsx(CodeBlock, {
+		...pre,
+		children
+	})),
+	table: slotted(({ table }, { children }) => /* @__PURE__ */ jsx(TableContainer, {
+		my: 2,
+		children: /* @__PURE__ */ jsx(Table, {
+			bg: "terminal",
+			borderRadius: "md",
+			...table,
+			children
+		})
+	})),
+	thead: slotted(({ thead }, { children }) => /* @__PURE__ */ jsx(TableHead, {
+		bg: "grid",
+		color: "primary",
+		...thead,
+		children
+	})),
+	tbody: slotted(({ tbody }, { children }) => /* @__PURE__ */ jsx(TableBody, {
+		...tbody,
+		children
+	})),
+	tr: slotted(({ tr }, { children }) => /* @__PURE__ */ jsx(TableRow, {
+		isHoverable: true,
+		...tr,
+		children
+	})),
+	th: slotted(({ th }, { children, style }) => /* @__PURE__ */ jsx(TableCell, {
+		style,
+		...th,
+		children
+	})),
+	td: slotted(({ td }, { children, style }) => /* @__PURE__ */ jsx(TableCell, {
+		style,
+		...td,
+		children
+	})),
+	hr: slotted(({ hr }) => /* @__PURE__ */ jsx(View, {
+		as: "hr",
+		my: 2,
+		height: "1px",
+		bg: "grid",
+		width: "100%",
+		border: "none",
+		...hr
+	})),
+	img: slotted(({ img }, { src, alt }) => /* @__PURE__ */ jsx(Image, {
+		src,
+		alt,
+		maxWidth: "100%",
+		...img
+	}))
+};
+/** Renders a markdown string with every element mapped to a design-system primitive. */
+function Preview({ children, slotProps }) {
+	return /* @__PURE__ */ jsx(PreviewRoot, { children: /* @__PURE__ */ jsx(SlotPropsContext.Provider, {
+		value: slotProps ?? EMPTY_SLOT_PROPS,
+		children: /* @__PURE__ */ jsx(ReactMarkdown, {
+			components,
+			remarkPlugins,
+			rehypePlugins,
+			children
+		})
+	}) });
+}
+//#endregion
+export { Preview };

package/dist/Markdown/Toolbar.cjs

@@ -0,0 +1,4 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_Toolbar = require("../Toolbar-B-W22Sk4.cjs");
+exports.TablePicker = require_Toolbar.TablePicker;
+exports.Toolbar = require_Toolbar.Toolbar;

package/dist/Markdown/Toolbar.d.cts

@@ -0,0 +1,13 @@
+//#region src/Markdown/Toolbar/Toolbar.d.ts
+/** Formatting buttons, heading + code-language selects, and the table-size picker. */
+declare function Toolbar(): import("react").JSX.Element;
+//#endregion
+//#region src/Markdown/Toolbar/TablePicker.d.ts
+interface TablePickerProps {
+  /** Fired with the chosen (rows, cols) when a grid cell is picked. */
+  onSelect: (rows: number, cols: number) => void;
+}
+/** A "Table" trigger that opens a hover grid for choosing table dimensions. */
+declare function TablePicker({ onSelect }: Readonly<TablePickerProps>): import("react").JSX.Element;
+//#endregion
+export { TablePicker, TablePickerProps, Toolbar };

package/dist/Markdown/Toolbar.d.mts

@@ -0,0 +1,13 @@
+//#region src/Markdown/Toolbar/Toolbar.d.ts
+/** Formatting buttons, heading + code-language selects, and the table-size picker. */
+declare function Toolbar(): import("react").JSX.Element;
+//#endregion
+//#region src/Markdown/Toolbar/TablePicker.d.ts
+interface TablePickerProps {
+  /** Fired with the chosen (rows, cols) when a grid cell is picked. */
+  onSelect: (rows: number, cols: number) => void;
+}
+/** A "Table" trigger that opens a hover grid for choosing table dimensions. */
+declare function TablePicker({ onSelect }: Readonly<TablePickerProps>): import("react").JSX.Element;
+//#endregion
+export { TablePicker, TablePickerProps, Toolbar };

package/dist/Markdown/Toolbar.mjs

@@ -0,0 +1,2 @@
+import { n as TablePicker, t as Toolbar } from "../Toolbar-KbR97iJS.mjs";
+export { TablePicker, Toolbar };

package/dist/Markdown.cjs

@@ -0,0 +1,13 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_MarkdownContext = require("./MarkdownContext-DSwjzpH8.cjs");
+const require_Markdown_Control = require("./Markdown/Control.cjs");
+const require_Toolbar = require("./Toolbar-B-W22Sk4.cjs");
+const require_Markdown_Editor = require("./Markdown/Editor.cjs");
+const require_Markdown_Preview = require("./Markdown/Preview.cjs");
+exports.Control = require_Markdown_Control.Control;
+exports.Editor = require_Markdown_Editor.Editor;
+exports.MarkdownContext = require_MarkdownContext.MarkdownContext;
+exports.Preview = require_Markdown_Preview.Preview;
+exports.TablePicker = require_Toolbar.TablePicker;
+exports.Toolbar = require_Toolbar.Toolbar;
+exports.useMarkdownContext = require_MarkdownContext.useMarkdownContext;

package/dist/Markdown.d.cts

@@ -0,0 +1,80 @@
+import { r as IconName } from "./index-Dp81rWM1.cjs";
+import { Control, ControlProps } from "./Markdown/Control.cjs";
+import { Editor, EditorProps } from "./Markdown/Editor.cjs";
+import { Preview, PreviewProps, PreviewSlotProps } from "./Markdown/Preview.cjs";
+import { TablePicker, TablePickerProps, Toolbar } from "./Markdown/Toolbar.cjs";
+//#region src/Markdown/const.d.ts
+/** How a text label is rendered — mirrors the mark it inserts. */
+type ToolbarLabelEmphasis = 'bold' | 'italic' | 'strike';
+/** Shared presentation for a toolbar control. */
+interface BaseAction {
+  id: string;
+  /** Text label shown when no `icon` is set. */
+  label: string;
+  /** Accessible name — always the control's aria-label. */
+  ariaLabel: string;
+  /** Registry icon shown instead of the text label. */
+  icon?: IconName;
+  /** Styles the text label to mirror the mark (e.g. bold `B`). Ignored when `icon` is set. */
+  emphasis?: ToolbarLabelEmphasis;
+  /** Consecutive actions sharing a group id render as one joined button cluster. */
+  group?: string;
+}
+/** Wraps the selection (or a placeholder) in a leading/trailing marker — bold, links, code blocks. */
+interface WrapAction extends BaseAction {
+  kind: 'wrap';
+  prefix: string;
+  suffix: string;
+  placeholder: string;
+  /** Block-level fence (e.g. code block): separated by newlines and never toggled off. */
+  block?: boolean;
+}
+/** Prepends a marker to every line the selection touches — headings, quotes, lists. */
+interface LinePrefixAction extends BaseAction {
+  kind: 'linePrefix';
+  linePrefix: string;
+  /**
+   * Line-start pattern for a family of mutually-exclusive markers (e.g. all list types). When
+   * set, applying the action strips any matching marker first, then toggles its own off or
+   * replaces a sibling's — so the list/ordered/task buttons swap and toggle instead of stacking.
+   */
+  family?: RegExp;
+  /**
+   * Whether re-applying an action that already owns the line's marker removes it. Defaults to
+   * toggling off; set `false` for replace-only families (e.g. heading levels from a select,
+   * where picking a level should set it, not toggle it away).
+   */
+  toggle?: boolean;
+}
+/** Inserts a standalone snippet at the caret, ignoring the selection — tables, rules. */
+interface InsertAction extends BaseAction {
+  kind: 'insert';
+  snippet: string;
+}
+type ToolbarAction = WrapAction | LinePrefixAction | InsertAction;
+//#endregion
+//#region src/Markdown/MarkdownContext.d.ts
+/** A textarea selection range shared between the Editor and the Toolbar. */
+interface MarkdownSelection {
+  start: number;
+  end: number;
+}
+interface MarkdownContextValue {
+  /** Current markdown source. */
+  value: string;
+  /** Called with the next source on edit or a toolbar action. */
+  onChange: (value: string) => void;
+  /** Applies a toolbar action at the last remembered selection and queues the caret to restore. */
+  dispatch: (action: ToolbarAction) => void;
+  /** Records the current textarea selection — the Editor calls this on select/blur. */
+  rememberSelection: (selection: MarkdownSelection) => void;
+  /** Queues a selection to restore after the next value change (e.g. after Tab). */
+  queueSelection: (selection: MarkdownSelection) => void;
+  /** Returns and clears the queued selection — the Editor's effect calls this to restore focus. */
+  takeQueuedSelection: () => MarkdownSelection | null;
+}
+declare const MarkdownContext: import("react").Context<MarkdownContextValue | null>;
+/** Reads the Markdown compound context; throws if used outside `<Markdown.Control>`. */
+declare function useMarkdownContext(): MarkdownContextValue;
+//#endregion
+export { Control, ControlProps, Editor, EditorProps, MarkdownContext, MarkdownContextValue, MarkdownSelection, Preview, PreviewProps, PreviewSlotProps, TablePicker, TablePickerProps, Toolbar, useMarkdownContext };

package/dist/Markdown.d.mts

@@ -0,0 +1,80 @@
+import { r as IconName } from "./index-BLfFycfJ.mjs";
+import { Control, ControlProps } from "./Markdown/Control.mjs";
+import { Editor, EditorProps } from "./Markdown/Editor.mjs";
+import { Preview, PreviewProps, PreviewSlotProps } from "./Markdown/Preview.mjs";
+import { TablePicker, TablePickerProps, Toolbar } from "./Markdown/Toolbar.mjs";
+//#region src/Markdown/const.d.ts
+/** How a text label is rendered — mirrors the mark it inserts. */
+type ToolbarLabelEmphasis = 'bold' | 'italic' | 'strike';
+/** Shared presentation for a toolbar control. */
+interface BaseAction {
+  id: string;
+  /** Text label shown when no `icon` is set. */
+  label: string;
+  /** Accessible name — always the control's aria-label. */
+  ariaLabel: string;
+  /** Registry icon shown instead of the text label. */
+  icon?: IconName;
+  /** Styles the text label to mirror the mark (e.g. bold `B`). Ignored when `icon` is set. */
+  emphasis?: ToolbarLabelEmphasis;
+  /** Consecutive actions sharing a group id render as one joined button cluster. */
+  group?: string;
+}
+/** Wraps the selection (or a placeholder) in a leading/trailing marker — bold, links, code blocks. */
+interface WrapAction extends BaseAction {
+  kind: 'wrap';
+  prefix: string;
+  suffix: string;
+  placeholder: string;
+  /** Block-level fence (e.g. code block): separated by newlines and never toggled off. */
+  block?: boolean;
+}
+/** Prepends a marker to every line the selection touches — headings, quotes, lists. */
+interface LinePrefixAction extends BaseAction {
+  kind: 'linePrefix';
+  linePrefix: string;
+  /**
+   * Line-start pattern for a family of mutually-exclusive markers (e.g. all list types). When
+   * set, applying the action strips any matching marker first, then toggles its own off or
+   * replaces a sibling's — so the list/ordered/task buttons swap and toggle instead of stacking.
+   */
+  family?: RegExp;
+  /**
+   * Whether re-applying an action that already owns the line's marker removes it. Defaults to
+   * toggling off; set `false` for replace-only families (e.g. heading levels from a select,
+   * where picking a level should set it, not toggle it away).
+   */
+  toggle?: boolean;
+}
+/** Inserts a standalone snippet at the caret, ignoring the selection — tables, rules. */
+interface InsertAction extends BaseAction {
+  kind: 'insert';
+  snippet: string;
+}
+type ToolbarAction = WrapAction | LinePrefixAction | InsertAction;
+//#endregion
+//#region src/Markdown/MarkdownContext.d.ts
+/** A textarea selection range shared between the Editor and the Toolbar. */
+interface MarkdownSelection {
+  start: number;
+  end: number;
+}
+interface MarkdownContextValue {
+  /** Current markdown source. */
+  value: string;
+  /** Called with the next source on edit or a toolbar action. */
+  onChange: (value: string) => void;
+  /** Applies a toolbar action at the last remembered selection and queues the caret to restore. */
+  dispatch: (action: ToolbarAction) => void;
+  /** Records the current textarea selection — the Editor calls this on select/blur. */
+  rememberSelection: (selection: MarkdownSelection) => void;
+  /** Queues a selection to restore after the next value change (e.g. after Tab). */
+  queueSelection: (selection: MarkdownSelection) => void;
+  /** Returns and clears the queued selection — the Editor's effect calls this to restore focus. */
+  takeQueuedSelection: () => MarkdownSelection | null;
+}
+declare const MarkdownContext: import("react").Context<MarkdownContextValue | null>;
+/** Reads the Markdown compound context; throws if used outside `<Markdown.Control>`. */
+declare function useMarkdownContext(): MarkdownContextValue;
+//#endregion
+export { Control, ControlProps, Editor, EditorProps, MarkdownContext, MarkdownContextValue, MarkdownSelection, Preview, PreviewProps, PreviewSlotProps, TablePicker, TablePickerProps, Toolbar, useMarkdownContext };

package/dist/Markdown.mjs

@@ -0,0 +1,6 @@
+import { n as useMarkdownContext, t as MarkdownContext } from "./MarkdownContext-BN8A3W-J.mjs";
+import { Control } from "./Markdown/Control.mjs";
+import { n as TablePicker, t as Toolbar } from "./Toolbar-KbR97iJS.mjs";
+import { Editor } from "./Markdown/Editor.mjs";
+import { Preview } from "./Markdown/Preview.mjs";
+export { Control, Editor, MarkdownContext, Preview, TablePicker, Toolbar, useMarkdownContext };

package/dist/MarkdownContext-BN8A3W-J.mjs

@@ -0,0 +1,11 @@
+import { createContext, useContext } from "react";
+//#region src/Markdown/MarkdownContext.ts
+const MarkdownContext = createContext(null);
+/** Reads the Markdown compound context; throws if used outside `<Markdown.Control>`. */
+function useMarkdownContext() {
+	const context = useContext(MarkdownContext);
+	if (!context) throw new Error("Markdown parts must be rendered inside <Markdown.Control>");
+	return context;
+}
+//#endregion
+export { useMarkdownContext as n, MarkdownContext as t };

package/dist/MarkdownContext-DSwjzpH8.cjs

@@ -0,0 +1,22 @@
+let react = require("react");
+//#region src/Markdown/MarkdownContext.ts
+const MarkdownContext = (0, react.createContext)(null);
+/** Reads the Markdown compound context; throws if used outside `<Markdown.Control>`. */
+function useMarkdownContext() {
+	const context = (0, react.useContext)(MarkdownContext);
+	if (!context) throw new Error("Markdown parts must be rendered inside <Markdown.Control>");
+	return context;
+}
+//#endregion
+Object.defineProperty(exports, "MarkdownContext", {
+	enumerable: true,
+	get: function() {
+		return MarkdownContext;
+	}
+});
+Object.defineProperty(exports, "useMarkdownContext", {
+	enumerable: true,
+	get: function() {
+		return useMarkdownContext;
+	}
+});

package/dist/MenuItem.cjs

@@ -0,0 +1,150 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-BiocWFSR.cjs");
+const require_themeDefault = require("./themeDefault-B-QjpGEO.cjs");
+const require_Icon = require("./Icon-1YtNCUKo.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
+let _emotion_react = require("@emotion/react");
+//#region src/MenuItem/MenuItem.tsx
+const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+	"color",
+	"textColor",
+	"sizeToken",
+	"selected",
+	"highlighted",
+	"disabled",
+	"dense",
+	"disableGutters",
+	"divider"
+]);
+const baseStyle = ({ theme }) => ({
+	display: "flex",
+	alignItems: "center",
+	gap: theme.space[1],
+	cursor: "pointer",
+	fontFamily: theme.fonts.body,
+	lineHeight: theme.lineHeights.base,
+	listStyle: "none",
+	userSelect: "none",
+	whiteSpace: "nowrap",
+	transition: "background-color 0.12s ease",
+	outline: "none"
+});
+const sizeVariants = ({ theme, sizeToken, dense, disableGutters }) => {
+	const s = theme.sizes[sizeToken];
+	const verticalPadding = dense ? theme.space[.5] : void 0;
+	return {
+		paddingTop: verticalPadding ?? theme.space[s.paddingTop],
+		paddingBottom: verticalPadding ?? theme.space[s.paddingBottom],
+		paddingLeft: disableGutters ? 0 : theme.space[s.paddingLeft],
+		paddingRight: disableGutters ? 0 : theme.space[s.paddingRight],
+		fontSize: theme.fontSizes[s.fontSize]
+	};
+};
+const dividerStyle = ({ theme, divider }) => divider ? {
+	borderBottomWidth: theme.borderWidths.thin,
+	borderBottomStyle: "solid",
+	borderBottomColor: (0, require_src.src_exports.get)(theme, "border.light")
+} : {};
+const interactionStyles = ({ theme, color, textColor, selected, highlighted, disabled }) => {
+	const main = (0, require_src.src_exports.get)(theme, `palette.${color}.main`);
+	const hoverBg = `${main}1F`;
+	const selectedBg = `${main}29`;
+	const activeSelectedBg = `${main}3D`;
+	if (disabled) return {
+		color: (0, require_src.src_exports.get)(theme, "text.disabled"),
+		cursor: "not-allowed",
+		pointerEvents: "none"
+	};
+	const baseColor = textColor ? (0, require_src.src_exports.get)(theme, `text.${textColor}`) : main;
+	return {
+		color: selected ? main : baseColor,
+		backgroundColor: selected ? highlighted ? activeSelectedBg : selectedBg : highlighted ? hoverBg : "transparent",
+		"&:hover": { backgroundColor: selected ? activeSelectedBg : hoverBg }
+	};
+};
+const MenuItemRoot = require_src.styled("li", {
+	name: "MenuItem",
+	label: "MenuItem",
+	shouldForwardProp
+})(baseStyle, sizeVariants, dividerStyle, interactionStyles);
+const CheckSlot = require_src.styled("span", {
+	name: "MenuItem",
+	slot: "check",
+	label: "MenuItemCheck"
+})({
+	display: "inline-flex",
+	width: "1.125rem",
+	flexShrink: 0
+});
+function isKeyboardFocus(element) {
+	try {
+		return element.matches(":focus-visible");
+	} catch {
+		return false;
+	}
+}
+/**
+* @description A single option row for `Select`'s listbox. Rendered as a semantic
+* `<li role="option">` (override via `as`). Selection/highlight/density props are
+* injected by `Select`; used on its own it renders a static, styled row.
+*/
+function MenuItem({ value, children, as, disabled = false, selected = false, highlighted = false, multiple = false, color: colorProp, textColor, size: sizeProp, dense = false, disableGutters = false, divider = false, autoFocus = false, focusVisibleClassName, onSelect, id, className, "data-testid": dataTestid }) {
+	const theme = (0, _emotion_react.useTheme)();
+	const color = colorProp ?? require_themeDefault.themeDefault(theme, "color", "primary");
+	const size = sizeProp ?? require_themeDefault.themeDefault(theme, "size", "md");
+	const rootRef = (0, react.useRef)(null);
+	const [isFocusVisible, setIsFocusVisible] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		if (autoFocus) rootRef.current?.focus();
+	}, [autoFocus]);
+	const handleClick = () => {
+		if (!disabled) onSelect?.(value);
+	};
+	const handleMouseDown = (event) => {
+		event.preventDefault();
+	};
+	const handleFocus = (event) => {
+		if (focusVisibleClassName && isKeyboardFocus(event.currentTarget)) setIsFocusVisible(true);
+	};
+	const handleBlur = () => {
+		setIsFocusVisible(false);
+	};
+	const rootClassName = [className, isFocusVisible ? focusVisibleClassName : void 0].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MenuItemRoot, {
+		as,
+		ref: rootRef,
+		id,
+		role: "option",
+		tabIndex: -1,
+		"aria-selected": selected,
+		"aria-disabled": disabled || void 0,
+		"data-value": value,
+		color,
+		textColor,
+		sizeToken: size,
+		selected,
+		highlighted,
+		disabled,
+		dense,
+		disableGutters,
+		divider,
+		className: rootClassName,
+		"data-testid": dataTestid,
+		onMouseDown: handleMouseDown,
+		onClick: handleClick,
+		onFocus: handleFocus,
+		onBlur: handleBlur,
+		children: [multiple && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckSlot, {
+			"aria-hidden": true,
+			children: selected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+				name: "check",
+				size: "1.125rem",
+				color: "inherit"
+			})
+		}), children]
+	});
+}
+//#endregion
+exports.MenuItem = MenuItem;