@soroush.tech/design-system 0.1.0

package/dist/Checkbox.mjs

@@ -0,0 +1,190 @@
+import { a as createShouldForwardProp, c as props, d as styled, l as src_exports } from "./src-DcNT2aIK.mjs";
+import { t as themeDefault } from "./themeDefault-CjXaY3ok.mjs";
+import { useFormControl } from "./FormControl.mjs";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Checkbox/Checkbox.tsx
+const UncheckedIcon = () => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 18 18",
+	width: "1em",
+	height: "1em",
+	fill: "none",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("rect", {
+		x: "1.5",
+		y: "1.5",
+		width: "15",
+		height: "15",
+		rx: "2.5",
+		stroke: "currentColor",
+		strokeWidth: "1.5"
+	})
+});
+const CheckedIcon = () => /* @__PURE__ */ jsxs("svg", {
+	viewBox: "0 0 18 18",
+	width: "1em",
+	height: "1em",
+	"aria-hidden": "true",
+	children: [/* @__PURE__ */ jsx("rect", {
+		width: "18",
+		height: "18",
+		rx: "3",
+		fill: "currentColor"
+	}), /* @__PURE__ */ jsx("path", {
+		d: "M4.5 9L7.5 12L13.5 6",
+		stroke: "white",
+		strokeWidth: "1.8",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		fill: "none"
+	})]
+});
+const IndeterminateIcon = () => /* @__PURE__ */ jsxs("svg", {
+	viewBox: "0 0 18 18",
+	width: "1em",
+	height: "1em",
+	"aria-hidden": "true",
+	children: [/* @__PURE__ */ jsx("rect", {
+		width: "18",
+		height: "18",
+		rx: "3",
+		fill: "currentColor"
+	}), /* @__PURE__ */ jsx("rect", {
+		x: "4.5",
+		y: "8.1",
+		width: "9",
+		height: "1.8",
+		rx: "0.9",
+		fill: "white"
+	})]
+});
+const HiddenInput = styled("input", {
+	name: "Checkbox",
+	slot: "input",
+	label: "CheckboxInput"
+})({
+	position: "absolute",
+	width: 0,
+	height: 0,
+	opacity: 0,
+	margin: 0,
+	padding: 0,
+	pointerEvents: "none"
+});
+const CheckboxIconWrapper = styled("span", {
+	name: "Checkbox",
+	slot: "icon",
+	label: "CheckboxIcon",
+	shouldForwardProp: (prop) => prop !== "size"
+})(({ theme, size = themeDefault(theme, "size", "md") }) => ({
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	flexShrink: 0,
+	fontSize: theme.icon[size],
+	lineHeight: 0,
+	transition: "color 0.15s ease"
+}));
+const shouldForwardProp = createShouldForwardProp([
+	...props,
+	"color",
+	"size",
+	"disabled",
+	"fullWidth"
+]);
+const baseStyle = ({ disabled, theme }) => ({
+	display: "inline-flex",
+	alignItems: "center",
+	position: "relative",
+	cursor: disabled ? "not-allowed" : "pointer",
+	gap: (theme?.space)?.[1],
+	userSelect: "none",
+	...disabled && { opacity: .5 },
+	"& input:not(:checked):not(:indeterminate) ~ span > .cb-checked": { display: "none" },
+	"& input:not(:checked):not(:indeterminate) ~ span > .cb-indeterminate": { display: "none" },
+	"& input:checked:not(:indeterminate) ~ span > .cb-unchecked": { display: "none" },
+	"& input:checked:not(:indeterminate) ~ span > .cb-indeterminate": { display: "none" },
+	"& input:indeterminate ~ span > .cb-unchecked": { display: "none" },
+	"& input:indeterminate ~ span > .cb-checked": { display: "none" },
+	"&:has(input:focus-visible) > span:first-of-type": {
+		outline: `2px solid ${theme.palette.primary.main}`,
+		outlineOffset: "2px",
+		borderRadius: "3px"
+	}
+});
+const colorStyle = ({ theme, color = themeDefault(theme, "neutralColor", "default") }) => {
+	return { color: color === "default" ? theme.text.secondary : theme.palette[color].main };
+};
+const fullWidthStyle = ({ fullWidth }) => fullWidth ? {
+	display: "flex",
+	width: "100%"
+} : {};
+const CheckboxRoot = styled("label", {
+	name: "Checkbox",
+	label: "Checkbox",
+	shouldForwardProp,
+	systemProps: [src_exports.space]
+})(baseStyle, colorStyle, fullWidthStyle);
+function Checkbox({ checked, defaultChecked, disabled: disabledProp, color: colorProp, size: sizeProp, fullWidth: fullWidthProp, indeterminate = false, icon, checkedIcon, onChange, id: idProp, required: requiredProp, name, value, children, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-testid": dataTestid, ...spaceProps }) {
+	const fc = useFormControl({
+		id: idProp,
+		disabled: disabledProp,
+		required: requiredProp,
+		size: sizeProp,
+		fullWidth: fullWidthProp
+	});
+	const { id, disabled, required, size, fullWidth } = fc;
+	const color = colorProp ?? fc.color;
+	const describedBy = ariaDescribedby ?? fc["aria-describedby"];
+	const inputRef = useRef(null);
+	useEffect(() => {
+		inputRef.current.indeterminate = indeterminate;
+	}, [indeterminate]);
+	return /* @__PURE__ */ jsxs(CheckboxRoot, {
+		color,
+		size,
+		disabled,
+		fullWidth,
+		className,
+		"data-testid": dataTestid,
+		...spaceProps,
+		children: [
+			/* @__PURE__ */ jsx(HiddenInput, {
+				ref: inputRef,
+				type: "checkbox",
+				checked,
+				defaultChecked,
+				disabled,
+				id,
+				required,
+				name,
+				value,
+				onChange,
+				"data-indeterminate": indeterminate || void 0,
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledby,
+				"aria-describedby": describedBy
+			}),
+			/* @__PURE__ */ jsxs(CheckboxIconWrapper, {
+				size,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "cb-unchecked",
+						children: icon ?? /* @__PURE__ */ jsx(UncheckedIcon, {})
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "cb-checked",
+						children: checkedIcon ?? /* @__PURE__ */ jsx(CheckedIcon, {})
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "cb-indeterminate",
+						children: /* @__PURE__ */ jsx(IndeterminateIcon, {})
+					})
+				]
+			}),
+			children != null && /* @__PURE__ */ jsx("span", { children })
+		]
+	});
+}
+//#endregion
+export { Checkbox };

package/dist/CircularProgress.cjs

@@ -0,0 +1,136 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-BiocWFSR.cjs");
+const require_themeDefault = require("./themeDefault-B-QjpGEO.cjs");
+const require_utils = require("./utils.cjs");
+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/CircularProgress/CircularProgress.tsx
+const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+	..._soroush_tech_styled_system_should_forward_prop.props,
+	"color",
+	"size",
+	"thickness",
+	"variant",
+	"disableShrink",
+	"value",
+	"min",
+	"max",
+	"spinning",
+	"easing",
+	"showTrack"
+]);
+const VIEWBOX = 44;
+const SIZE_DEFAULT = 40;
+const THICKNESS_DEFAULT = 3.6;
+const rotate = (0, _emotion_react.keyframes)({
+	"0%": { transform: "rotate(0deg)" },
+	"100%": { transform: "rotate(360deg)" }
+});
+const dash = (0, _emotion_react.keyframes)({
+	"0%": {
+		strokeDasharray: "1px, 200px",
+		strokeDashoffset: "0px"
+	},
+	"50%": {
+		strokeDasharray: "100px, 200px",
+		strokeDashoffset: "-15px"
+	},
+	"100%": {
+		strokeDasharray: "100px, 200px",
+		strokeDashoffset: "-125px"
+	}
+});
+const CircularProgressTrack = require_src.styled("circle", {
+	name: "CircularProgress",
+	slot: "track",
+	label: "CircularProgressTrack"
+})({
+	fill: "none",
+	stroke: "currentColor",
+	opacity: .2
+});
+const CircularProgressCircle = require_src.styled("circle", {
+	name: "CircularProgress",
+	slot: "circle",
+	label: "CircularProgressCircle",
+	shouldForwardProp: (prop) => prop !== "variant" && prop !== "disableShrink"
+})(({ variant, disableShrink }) => ({
+	fill: "none",
+	stroke: "currentColor",
+	...variant === "indeterminate" ? {
+		strokeDasharray: "80px, 200px",
+		strokeDashoffset: "0px",
+		...!disableShrink && { animation: `${dash} 1.4s ease-in-out infinite` }
+	} : {}
+}));
+const colorStyle = ({ color: colorProp, theme }) => {
+	const color = colorProp ?? require_themeDefault.themeDefault(theme, "color", "primary");
+	if (color === "inherit") return {};
+	return { color: theme.palette[color].main };
+};
+const sizeStyle = ({ size = SIZE_DEFAULT }) => ({
+	display: "inline-flex",
+	width: size,
+	height: size,
+	flexShrink: 0,
+	verticalAlign: "middle"
+});
+const rotationStyle = ({ variant = "indeterminate", spinning, easing = "linear" }) => variant === "indeterminate" || spinning ? { animation: `${rotate} 1.4s ${easing} infinite` } : {};
+const safeLayout = (props) => (0, require_src.src_exports.layout)({
+	...props,
+	size: void 0
+});
+const CircularProgressRoot = require_src.styled("span", {
+	name: "CircularProgress",
+	label: "CircularProgress",
+	shouldForwardProp,
+	systemProps: [require_src.src_exports.space, safeLayout]
+})(colorStyle, sizeStyle, rotationStyle);
+function CircularProgress({ variant = "indeterminate", color, size = SIZE_DEFAULT, thickness = THICKNESS_DEFAULT, value, min = 0, max = 100, disableShrink = false, spinning = false, easing = "linear", showTrack = false, ...rest }) {
+	const r = (VIEWBOX - thickness * 2) / 2;
+	const circumference = 2 * Math.PI * r;
+	const normalizedValue = require_utils.clamp(value ?? min, min, max);
+	const circleStyle = variant === "determinate" ? {
+		strokeDasharray: `${circumference}px`,
+		strokeDashoffset: `${circumference * (1 - normalizedValue / max)}px`,
+		transition: `stroke-dashoffset 0.3s ${easing}`
+	} : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CircularProgressRoot, {
+		role: "progressbar",
+		"aria-label": "Loading",
+		color,
+		size,
+		variant,
+		spinning,
+		easing,
+		...variant === "determinate" ? {
+			"aria-valuenow": value,
+			"aria-valuemin": min,
+			"aria-valuemax": max
+		} : {},
+		...rest,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+			viewBox: `0 0 ${VIEWBOX} ${VIEWBOX}`,
+			width: "100%",
+			height: "100%",
+			children: [showTrack && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CircularProgressTrack, {
+				cx: VIEWBOX / 2,
+				cy: VIEWBOX / 2,
+				r,
+				strokeWidth: thickness
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CircularProgressCircle, {
+				cx: VIEWBOX / 2,
+				cy: VIEWBOX / 2,
+				r,
+				strokeWidth: thickness,
+				style: circleStyle,
+				variant,
+				disableShrink
+			})]
+		})
+	});
+}
+//#endregion
+exports.CircularProgress = CircularProgress;

package/dist/CircularProgress.d.cts

@@ -0,0 +1,34 @@
+import { l as index_d_exports, o as Theme } from "./index-Bihpwn75.cjs";
+import { n as ButtonColor } from "./index-DASvoACZ.cjs";
+import { HTMLAttributes } from "react";
+//#region src/CircularProgress/CircularProgress.d.ts
+type CircularProgressVariant = 'indeterminate' | 'determinate';
+type CircularProgressColor = ButtonColor | 'inherit';
+type CircularProgressEasing = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out';
+interface CircularProgressProps extends HTMLAttributes<HTMLSpanElement>, Omit<index_d_exports.SpaceProps<Theme>, keyof index_d_exports.PaddingProps>, index_d_exports.LayoutProps<Theme> {
+  /** Visual variant — looping animation or value-driven arc. Default: `'indeterminate'`. */
+  variant?: CircularProgressVariant;
+  /** Stroke color — resolves to `theme.palette[color].main`; `'inherit'` uses `currentColor`. Default: 'primary', overridable via `theme.defaults.color`. */
+  color?: CircularProgressColor;
+  /** Width and height. Number → px; string → raw CSS unit (e.g. `'3rem'`). Default: `40`. */
+  size?: number | string;
+  /** SVG stroke width in viewBox user units. Default: `3.6`. */
+  thickness?: number;
+  /** Progress value for the `'determinate'` variant. Clamped between `min` and `max`. */
+  value?: number;
+  /** Minimum value for `'determinate'`. Default: `0`. */
+  min?: number;
+  /** Maximum value for `'determinate'`. Default: `100`. */
+  max?: number;
+  /** Disables the stroke shrink/expand animation (`'indeterminate'` only). */
+  disableShrink?: boolean;
+  /** Applies the rotation animation to a `'determinate'` arc — arc length reflects `value` while the spinner still rotates. */
+  spinning?: boolean;
+  /** Timing function for the rotation animation. Default: `'linear'`. */
+  easing?: CircularProgressEasing;
+  /** Renders a faint full-ring track behind the progress arc. Default: `false`. */
+  showTrack?: boolean;
+}
+declare function CircularProgress({ variant, color, size, thickness, value, min, max, disableShrink, spinning, easing, showTrack, ...rest }: Readonly<CircularProgressProps>): import("react").JSX.Element;
+//#endregion
+export { CircularProgress, CircularProgressColor, CircularProgressEasing, CircularProgressProps, CircularProgressVariant };

package/dist/CircularProgress.d.mts

@@ -0,0 +1,34 @@
+import { l as index_d_exports, o as Theme } from "./index-Dm9HfgV6.mjs";
+import { n as ButtonColor } from "./index-C0xMvDjL.mjs";
+import { HTMLAttributes } from "react";
+//#region src/CircularProgress/CircularProgress.d.ts
+type CircularProgressVariant = 'indeterminate' | 'determinate';
+type CircularProgressColor = ButtonColor | 'inherit';
+type CircularProgressEasing = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out';
+interface CircularProgressProps extends HTMLAttributes<HTMLSpanElement>, Omit<index_d_exports.SpaceProps<Theme>, keyof index_d_exports.PaddingProps>, index_d_exports.LayoutProps<Theme> {
+  /** Visual variant — looping animation or value-driven arc. Default: `'indeterminate'`. */
+  variant?: CircularProgressVariant;
+  /** Stroke color — resolves to `theme.palette[color].main`; `'inherit'` uses `currentColor`. Default: 'primary', overridable via `theme.defaults.color`. */
+  color?: CircularProgressColor;
+  /** Width and height. Number → px; string → raw CSS unit (e.g. `'3rem'`). Default: `40`. */
+  size?: number | string;
+  /** SVG stroke width in viewBox user units. Default: `3.6`. */
+  thickness?: number;
+  /** Progress value for the `'determinate'` variant. Clamped between `min` and `max`. */
+  value?: number;
+  /** Minimum value for `'determinate'`. Default: `0`. */
+  min?: number;
+  /** Maximum value for `'determinate'`. Default: `100`. */
+  max?: number;
+  /** Disables the stroke shrink/expand animation (`'indeterminate'` only). */
+  disableShrink?: boolean;
+  /** Applies the rotation animation to a `'determinate'` arc — arc length reflects `value` while the spinner still rotates. */
+  spinning?: boolean;
+  /** Timing function for the rotation animation. Default: `'linear'`. */
+  easing?: CircularProgressEasing;
+  /** Renders a faint full-ring track behind the progress arc. Default: `false`. */
+  showTrack?: boolean;
+}
+declare function CircularProgress({ variant, color, size, thickness, value, min, max, disableShrink, spinning, easing, showTrack, ...rest }: Readonly<CircularProgressProps>): import("react").JSX.Element;
+//#endregion
+export { CircularProgress, CircularProgressColor, CircularProgressEasing, CircularProgressProps, CircularProgressVariant };

package/dist/CircularProgress.mjs

@@ -0,0 +1,133 @@
+import { a as createShouldForwardProp, c as props, d as styled, l as src_exports, s as keyframes } from "./src-DcNT2aIK.mjs";
+import { t as themeDefault } from "./themeDefault-CjXaY3ok.mjs";
+import { clamp } from "./utils.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/CircularProgress/CircularProgress.tsx
+const shouldForwardProp = createShouldForwardProp([
+	...props,
+	"color",
+	"size",
+	"thickness",
+	"variant",
+	"disableShrink",
+	"value",
+	"min",
+	"max",
+	"spinning",
+	"easing",
+	"showTrack"
+]);
+const VIEWBOX = 44;
+const SIZE_DEFAULT = 40;
+const THICKNESS_DEFAULT = 3.6;
+const rotate = keyframes({
+	"0%": { transform: "rotate(0deg)" },
+	"100%": { transform: "rotate(360deg)" }
+});
+const dash = keyframes({
+	"0%": {
+		strokeDasharray: "1px, 200px",
+		strokeDashoffset: "0px"
+	},
+	"50%": {
+		strokeDasharray: "100px, 200px",
+		strokeDashoffset: "-15px"
+	},
+	"100%": {
+		strokeDasharray: "100px, 200px",
+		strokeDashoffset: "-125px"
+	}
+});
+const CircularProgressTrack = styled("circle", {
+	name: "CircularProgress",
+	slot: "track",
+	label: "CircularProgressTrack"
+})({
+	fill: "none",
+	stroke: "currentColor",
+	opacity: .2
+});
+const CircularProgressCircle = styled("circle", {
+	name: "CircularProgress",
+	slot: "circle",
+	label: "CircularProgressCircle",
+	shouldForwardProp: (prop) => prop !== "variant" && prop !== "disableShrink"
+})(({ variant, disableShrink }) => ({
+	fill: "none",
+	stroke: "currentColor",
+	...variant === "indeterminate" ? {
+		strokeDasharray: "80px, 200px",
+		strokeDashoffset: "0px",
+		...!disableShrink && { animation: `${dash} 1.4s ease-in-out infinite` }
+	} : {}
+}));
+const colorStyle = ({ color: colorProp, theme }) => {
+	const color = colorProp ?? themeDefault(theme, "color", "primary");
+	if (color === "inherit") return {};
+	return { color: theme.palette[color].main };
+};
+const sizeStyle = ({ size = SIZE_DEFAULT }) => ({
+	display: "inline-flex",
+	width: size,
+	height: size,
+	flexShrink: 0,
+	verticalAlign: "middle"
+});
+const rotationStyle = ({ variant = "indeterminate", spinning, easing = "linear" }) => variant === "indeterminate" || spinning ? { animation: `${rotate} 1.4s ${easing} infinite` } : {};
+const safeLayout = (props) => (0, src_exports.layout)({
+	...props,
+	size: void 0
+});
+const CircularProgressRoot = styled("span", {
+	name: "CircularProgress",
+	label: "CircularProgress",
+	shouldForwardProp,
+	systemProps: [src_exports.space, safeLayout]
+})(colorStyle, sizeStyle, rotationStyle);
+function CircularProgress({ variant = "indeterminate", color, size = SIZE_DEFAULT, thickness = THICKNESS_DEFAULT, value, min = 0, max = 100, disableShrink = false, spinning = false, easing = "linear", showTrack = false, ...rest }) {
+	const r = (VIEWBOX - thickness * 2) / 2;
+	const circumference = 2 * Math.PI * r;
+	const normalizedValue = clamp(value ?? min, min, max);
+	const circleStyle = variant === "determinate" ? {
+		strokeDasharray: `${circumference}px`,
+		strokeDashoffset: `${circumference * (1 - normalizedValue / max)}px`,
+		transition: `stroke-dashoffset 0.3s ${easing}`
+	} : void 0;
+	return /* @__PURE__ */ jsx(CircularProgressRoot, {
+		role: "progressbar",
+		"aria-label": "Loading",
+		color,
+		size,
+		variant,
+		spinning,
+		easing,
+		...variant === "determinate" ? {
+			"aria-valuenow": value,
+			"aria-valuemin": min,
+			"aria-valuemax": max
+		} : {},
+		...rest,
+		children: /* @__PURE__ */ jsxs("svg", {
+			viewBox: `0 0 ${VIEWBOX} ${VIEWBOX}`,
+			width: "100%",
+			height: "100%",
+			children: [showTrack && /* @__PURE__ */ jsx(CircularProgressTrack, {
+				cx: VIEWBOX / 2,
+				cy: VIEWBOX / 2,
+				r,
+				strokeWidth: thickness
+			}), /* @__PURE__ */ jsx(CircularProgressCircle, {
+				cx: VIEWBOX / 2,
+				cy: VIEWBOX / 2,
+				r,
+				strokeWidth: thickness,
+				style: circleStyle,
+				variant,
+				disableShrink
+			})]
+		})
+	});
+}
+//#endregion
+export { CircularProgress };

package/dist/CodeBlock.cjs

@@ -0,0 +1,101 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-BiocWFSR.cjs");
+const require_hooks_useCopyToClipboard = require("./hooks/useCopyToClipboard.cjs");
+const require_View = require("./View.cjs");
+const require_Button = require("./Button.cjs");
+const require_Icon = require("./Icon-1YtNCUKo.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/CodeBlock/CodeBlock.tsx
+const syntaxStyles = ({ theme }) => ({
+	color: theme.syntax.base,
+	fontFamily: theme.fonts.mono,
+	"& .hljs-comment, & .hljs-quote, & .hljs-doctag, & .hljs-meta.prompt_": {
+		color: theme.syntax.comment,
+		fontStyle: "italic"
+	},
+	"& .hljs-keyword, & .hljs-built_in, & .hljs-literal, & .hljs-selector-tag, & .hljs-selector-pseudo, & .hljs-selector-attr": { color: theme.syntax.keyword },
+	"& .hljs-type, & .hljs-title.class_": { color: theme.syntax.type },
+	"& .hljs-string, & .hljs-regexp, & .hljs-char, & .hljs-meta .hljs-string, & .hljs-addition": { color: theme.syntax.string },
+	"& .hljs-number, & .hljs-symbol, & .hljs-bullet, & .hljs-link": { color: theme.syntax.number },
+	"& .hljs-variable.constant_, & .hljs-property": { color: theme.syntax.constant },
+	"& .hljs-title, & .hljs-section, & .hljs-attr, & .hljs-attribute, & .hljs-selector-id": { color: theme.syntax.title },
+	"& .hljs-tag, & .hljs-name, & .hljs-meta, & .hljs-variable, & .hljs-selector-class, & .hljs-deletion": { color: theme.syntax.tag },
+	"& .hljs-emphasis": { fontStyle: "italic" },
+	"& .hljs-strong": { fontWeight: "bold" }
+});
+const CodeSurface = require_src.styled(require_View.View, {
+	name: "CodeBlock",
+	slot: "surface",
+	label: "CodeSurface"
+})(syntaxStyles);
+const Wrapper = require_src.styled(require_View.View, {
+	name: "CodeBlock",
+	label: "CodeBlock"
+})({
+	display: "grid",
+	gridTemplateColumns: "minmax(0, 1fr)",
+	"& .code-copy": {
+		opacity: 0,
+		transition: "opacity 120ms ease"
+	},
+	"&:hover .code-copy, &:focus-within .code-copy": { opacity: 1 },
+	"@media (hover: none)": { "& .code-copy": { opacity: 1 } }
+});
+/**
+* Fenced-code block: a horizontally scrollable, syntax-highlighted surface with a
+* copy-to-clipboard button that sticks to the top-right while the block is in view.
+*/
+function CodeBlock({ children, ...rest }) {
+	const surfaceRef = (0, react.useRef)(null);
+	const { copied, copy } = require_hooks_useCopyToClipboard.useCopyToClipboard();
+	const handleCopy = () => {
+		const raw = surfaceRef.current.textContent;
+		let end = raw.length;
+		while (end > 0 && raw[end - 1] === "\n") end--;
+		const text = raw.slice(0, end);
+		if (text) copy(text);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Wrapper, {
+		my: 2,
+		position: "relative",
+		...rest,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_View.View, {
+			position: "absolute",
+			top: "8px",
+			right: "8px",
+			zIndex: 1,
+			bg: "paper",
+			borderRadius: "sm",
+			className: "code-copy",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+				type: "button",
+				variant: "outlined",
+				color: "default",
+				size: "sm",
+				borderRadius: "sm",
+				onClick: handleCopy,
+				"aria-label": copied ? "Copied" : "Copy code",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+					name: copied ? "check" : "content_copy",
+					color: copied ? "success" : "primary",
+					size: "1.1rem"
+				})
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeSurface, {
+			as: "pre",
+			tabIndex: 0,
+			ref: surfaceRef,
+			bg: "terminal",
+			p: 3,
+			borderRadius: "md",
+			borderColor: "light",
+			borderWidth: "thin",
+			maxWidth: "100%",
+			overflow: "auto",
+			children
+		})]
+	});
+}
+//#endregion
+exports.CodeBlock = CodeBlock;

package/dist/CodeBlock.d.cts

@@ -0,0 +1,2 @@
+import { n as CodeBlockProps, t as CodeBlock } from "./index-BPrjvi7B.cjs";
+export { CodeBlock, CodeBlockProps };

package/dist/CodeBlock.d.mts

@@ -0,0 +1,2 @@
+import { n as CodeBlockProps, t as CodeBlock } from "./index-BoqlPb3Z.mjs";
+export { CodeBlock, CodeBlockProps };