@soroush.tech/design-system 0.1.0

package/dist/Select.mjs

@@ -0,0 +1,525 @@
+import { a as createShouldForwardProp, c as props, d as styled, l as src_exports, u as useTheme } from "./src-DcNT2aIK.mjs";
+import { t as themeDefault } from "./themeDefault-CjXaY3ok.mjs";
+import { t as Icon } from "./Icon-CAKRmFz3.mjs";
+import { useFormControl } from "./FormControl.mjs";
+import { NativeSelect } from "./NativeSelect.mjs";
+import { t as Popover } from "./Popover-B61J7C79.mjs";
+import { Children, cloneElement, isValidElement, useCallback, useId, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/Select/hooks/useSelectPopover.ts
+/**
+* Owns `Select`'s open state (controlled or uncontrolled) and fires the open/close
+* callbacks. Positioning is delegated to `Popover`.
+*/
+function useSelectPopover({ open: openProp, defaultOpen = false, onOpen, onClose }) {
+	const isControlled = openProp !== void 0;
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+	return {
+		open: isControlled ? openProp : uncontrolledOpen,
+		openMenu: useCallback(() => {
+			if (!isControlled) setUncontrolledOpen(true);
+			onOpen?.();
+		}, [isControlled, onOpen]),
+		closeMenu: useCallback(() => {
+			if (!isControlled) setUncontrolledOpen(false);
+			onClose?.();
+		}, [isControlled, onClose])
+	};
+}
+//#endregion
+//#region src/Select/utils/getOptionsFromChildren.ts
+/**
+* Flattens `Select`'s `MenuItem` children into a plain option list. Any child that
+* is not a valid element carrying a `value` prop (e.g. whitespace, `null`) is skipped,
+* so the returned indices line up with the rendered, selectable rows.
+*/
+function getOptionsFromChildren(children) {
+	return Children.toArray(children).flatMap((child) => {
+		if (!isValidElement(child)) return [];
+		const props = child.props;
+		if (props.value === void 0) return [];
+		return [{
+			value: props.value,
+			label: props.children,
+			disabled: props.disabled ?? false
+		}];
+	});
+}
+//#endregion
+//#region src/Select/utils/getNextEnabledIndex.ts
+/**
+* Walks `options` from `from` by `step` (+1 / -1), skipping disabled rows, and
+* returns the first enabled index reached. Stops at the edges (no wrap-around);
+* returns `from` when no enabled option lies in that direction.
+*/
+function getNextEnabledIndex(options, from, step) {
+	for (let next = from + step; next >= 0 && next < options.length; next += step) if (!options[next].disabled) return next;
+	return from;
+}
+/** First (`'first'`) or last (`'last'`) enabled index, or `-1` when every option is disabled. */
+function getEdgeEnabledIndex(options, edge) {
+	if (edge === "first") return options.findIndex((option) => !option.disabled);
+	for (let index = options.length - 1; index >= 0; index -= 1) if (!options[index].disabled) return index;
+	return -1;
+}
+//#endregion
+//#region src/Select/utils/isOptionSelected.ts
+/** True when `optionValue` is the current single value, or is contained in the multiple-mode array. */
+function isOptionSelected(value, optionValue) {
+	return Array.isArray(value) ? value.includes(optionValue) : value === optionValue;
+}
+//#endregion
+//#region src/Select/utils/computeNextValue.ts
+/**
+* The value that results from choosing `optionValue`.
+* - Multiple mode: toggles `optionValue` in/out of the array, preserving order.
+* - Single mode: replaces the value outright.
+*/
+function computeNextValue(value, optionValue) {
+	if (!Array.isArray(value)) return optionValue;
+	return value.includes(optionValue) ? value.filter((item) => item !== optionValue) : [...value, optionValue];
+}
+//#endregion
+//#region src/Select/utils/resolveDisplayLabel.ts
+/**
+* The label(s) to show in the trigger for the current `value`, or `null` when nothing
+* is selected (the caller then falls back to the placeholder). Multiple-mode selections
+* are joined in option order with `, `.
+*/
+function resolveDisplayLabel(options, value) {
+	if (Array.isArray(value)) {
+		const selected = options.filter((option) => value.includes(option.value));
+		if (selected.length === 0) return null;
+		return selected.map((option) => option.label).reduce((acc, label, index) => {
+			if (index > 0) acc.push(", ");
+			acc.push(label);
+			return acc;
+		}, []);
+	}
+	const match = options.find((option) => option.value === value);
+	return match ? match.label : null;
+}
+//#endregion
+//#region src/Select/Select.tsx
+const shouldForwardProp = createShouldForwardProp([
+	...props,
+	"variant",
+	"sizeToken",
+	"color",
+	"textColor",
+	"bg",
+	"error",
+	"disabled",
+	"fullWidth",
+	"borderRadius",
+	"open"
+]);
+const baseStyle = ({ theme }) => ({
+	position: "relative",
+	boxSizing: "border-box",
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "space-between",
+	gap: theme.space[1],
+	cursor: "pointer",
+	outline: "none",
+	textAlign: "left",
+	transition: "border-color 0.15s ease"
+});
+const variantStyles = (0, src_exports.variant)({
+	prop: "variant",
+	variants: {
+		outlined: {
+			borderRadius: "sq",
+			borderWidth: "thin",
+			borderStyle: "solid"
+		},
+		default: {
+			borderRadius: "sq",
+			borderStyle: "none"
+		},
+		underline: {
+			borderRadius: "sq",
+			borderStyle: "none",
+			borderBottomWidth: "thin",
+			borderBottomStyle: "solid"
+		},
+		text: {
+			borderRadius: "sq",
+			borderStyle: "none"
+		}
+	}
+});
+const borderRadiusStyle = ({ variant: v, borderRadius, theme }) => {
+	if (v === "underline" || v === "text" || !borderRadius) return {};
+	return { borderRadius: (0, src_exports.get)(theme, `radii.${borderRadius}`) };
+};
+const colorBorder = ({ color, error, theme }) => ({ borderColor: error ? (0, src_exports.get)(theme, "palette.error.main") : (0, src_exports.get)(theme, `palette.${color}.light`) });
+const activeBorder = ({ color, error, open, theme }) => {
+	const activeColor = error ? (0, src_exports.get)(theme, "palette.error.main") : (0, src_exports.get)(theme, `palette.${color}.main`);
+	return {
+		...open ? { borderColor: activeColor } : {},
+		"&:focus": { borderColor: activeColor },
+		"&:focus-visible": {
+			outline: `2px solid ${(0, src_exports.get)(theme, `palette.${themeDefault(theme, "color", "primary")}.main`)}`,
+			outlineOffset: "2px"
+		}
+	};
+};
+const backgroundStyle = ({ color, textColor, bg, variant: v, theme }) => ({
+	backgroundColor: v === "text" ? "transparent" : (0, src_exports.get)(theme, `background.${bg}`),
+	color: textColor ? (0, src_exports.get)(theme, `text.${textColor}`) : (0, src_exports.get)(theme, `palette.${color}.main`),
+	fontFamily: (0, src_exports.get)(theme, "fonts.body"),
+	fontSize: (0, src_exports.get)(theme, "fontSizes.1"),
+	lineHeight: (0, src_exports.get)(theme, "lineHeights.base")
+});
+const sizeVariants = ({ theme, sizeToken }) => {
+	const s = theme.sizes[sizeToken];
+	return {
+		paddingTop: theme.space[s.paddingTop],
+		paddingBottom: theme.space[s.paddingBottom],
+		paddingLeft: theme.space[s.paddingLeft],
+		paddingRight: theme.space[s.paddingRight],
+		fontSize: theme.fontSizes[s.fontSize]
+	};
+};
+const layoutStyles = ({ fullWidth, disabled }) => ({
+	...fullWidth ? {
+		display: "flex",
+		width: "100%"
+	} : { alignSelf: "flex-start" },
+	...disabled ? {
+		opacity: .5,
+		cursor: "not-allowed"
+	} : {}
+});
+const Trigger = styled("div", {
+	name: "Select",
+	label: "Select",
+	shouldForwardProp,
+	systemProps: [src_exports.space, (0, src_exports.system)({
+		width: true,
+		minWidth: true,
+		maxWidth: true
+	})]
+})(baseStyle, variantStyles, borderRadiusStyle, colorBorder, activeBorder, backgroundStyle, sizeVariants, layoutStyles);
+const ValueArea = styled("span", {
+	name: "Select",
+	slot: "valueArea",
+	label: "SelectValueArea",
+	shouldForwardProp: (prop) => prop !== "autoWidth"
+})(({ autoWidth }) => ({
+	flex: 1,
+	minWidth: 0,
+	display: autoWidth ? "block" : "inline-grid",
+	"& > *": { gridArea: "1 / 1" }
+}));
+const ValueGhost = styled("span", {
+	name: "Select",
+	slot: "valueGhost",
+	label: "SelectValueGhost"
+})({
+	height: 0,
+	overflow: "hidden",
+	visibility: "hidden",
+	display: "flex",
+	flexDirection: "column",
+	"& > span": { whiteSpace: "nowrap" }
+});
+const TriggerValue = styled("span", {
+	name: "Select",
+	slot: "value",
+	label: "SelectValue"
+})({
+	minWidth: 0,
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap"
+});
+const ListBox = styled("ul", {
+	name: "Select",
+	slot: "listbox",
+	label: "SelectListbox"
+})(({ theme }) => ({
+	margin: 0,
+	padding: `${theme.space[1]} 0`,
+	width: "100%",
+	maxHeight: "16rem",
+	overflowY: "auto",
+	listStyle: "none"
+}));
+function Select({ children, native = false, multiple = false, autoWidth = false, value: valueProp, defaultValue, onChange, open: openProp, defaultOpen, onOpen, onClose, placeholder, renderValue, borderRadius, color: colorProp, textColor: textColorProp, bg: bgProp, disabled: disabledProp, error: errorProp, fullWidth: fullWidthProp, required: requiredProp, size: sizeProp, variant: variantProp, iconName, iconProps, id: idProp, name, labelId, "aria-label": ariaLabel, className, "data-testid": dataTestid, ...spaceProps }) {
+	const fc = useFormControl({
+		id: idProp,
+		error: errorProp,
+		disabled: disabledProp,
+		required: requiredProp,
+		size: sizeProp,
+		fullWidth: fullWidthProp,
+		color: colorProp,
+		textColor: textColorProp
+	});
+	const { id, error, disabled, required, size, fullWidth } = fc;
+	const theme = useTheme();
+	const color = fc.color ?? themeDefault(theme, "color", "primary");
+	const bg = bgProp ?? themeDefault(theme, "inputBg", "terminal");
+	const variant = variantProp ?? themeDefault(theme, "inputVariant", "default");
+	const textColor = fc.textColor;
+	const options = getOptionsFromChildren(children);
+	const isControlledValue = valueProp !== void 0;
+	const [internalValue, setInternalValue] = useState(defaultValue ?? (multiple ? [] : ""));
+	const rawValue = isControlledValue ? valueProp : internalValue;
+	const value = multiple ? Array.isArray(rawValue) ? rawValue : [] : Array.isArray(rawValue) ? "" : rawValue;
+	if (native) return /* @__PURE__ */ jsx(NativeSelect, {
+		options: options.map((option) => ({
+			value: option.value,
+			label: typeof option.label === "string" ? option.label : String(option.label)
+		})),
+		value: Array.isArray(valueProp) ? void 0 : valueProp,
+		defaultValue: Array.isArray(defaultValue) ? void 0 : defaultValue,
+		onChange,
+		placeholder,
+		borderRadius,
+		color: colorProp,
+		textColor: textColorProp,
+		bg,
+		disabled: disabledProp,
+		error: errorProp,
+		fullWidth: fullWidthProp,
+		required: requiredProp,
+		size: sizeProp,
+		variant,
+		iconName,
+		iconProps,
+		id: idProp,
+		name,
+		className,
+		"data-testid": dataTestid,
+		...spaceProps
+	});
+	return /* @__PURE__ */ jsx(NonNativeSelect, {
+		options,
+		value,
+		onChangeValue: (next) => {
+			if (!isControlledValue) setInternalValue(next);
+			onChange?.(next);
+		},
+		multiple,
+		autoWidth,
+		openProp,
+		defaultOpen,
+		onOpen,
+		onClose,
+		placeholder,
+		renderValue,
+		borderRadius,
+		color,
+		textColor,
+		bg,
+		error,
+		disabled,
+		required,
+		fullWidth,
+		size,
+		variant,
+		iconName,
+		iconProps,
+		id,
+		name,
+		labelId,
+		ariaLabel,
+		ariaDescribedby: fc["aria-describedby"],
+		className,
+		dataTestid,
+		spaceProps,
+		children
+	});
+}
+function NonNativeSelect({ children, options, value, autoWidth, onChangeValue, multiple, openProp, defaultOpen, onOpen, onClose, placeholder, renderValue, borderRadius, color, textColor, bg, error, disabled, required, fullWidth, size, variant: variantProp, iconName, iconProps, id, name, labelId, ariaLabel, ariaDescribedby, className, dataTestid, spaceProps }) {
+	const [anchorEl, setAnchorEl] = useState(null);
+	const listboxId = `${useId()}-listbox`;
+	const { open, openMenu, closeMenu } = useSelectPopover({
+		open: openProp,
+		defaultOpen,
+		onOpen,
+		onClose
+	});
+	const [highlightedIndex, setHighlightedIndex] = useState(-1);
+	const getInitialHighlight = () => {
+		if (!Array.isArray(value)) {
+			const current = options.findIndex((option) => option.value === value && !option.disabled);
+			if (current !== -1) return current;
+		}
+		return getEdgeEnabledIndex(options, "first");
+	};
+	const openWithHighlight = () => {
+		setHighlightedIndex(getInitialHighlight());
+		openMenu();
+	};
+	const selectValue = (optionValue) => {
+		onChangeValue(computeNextValue(value, optionValue));
+		setHighlightedIndex(options.findIndex((option) => option.value === optionValue));
+		if (!multiple) closeMenu();
+	};
+	const selectHighlighted = () => {
+		const option = options[highlightedIndex];
+		if (option && !option.disabled) selectValue(option.value);
+	};
+	const moveHighlight = (step) => {
+		if (open) setHighlightedIndex((index) => getNextEnabledIndex(options, index, step));
+		else openWithHighlight();
+	};
+	const handleKeyDown = (event) => {
+		if (disabled) return;
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault();
+				moveHighlight(1);
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				moveHighlight(-1);
+				break;
+			case "Home":
+				if (open) {
+					event.preventDefault();
+					setHighlightedIndex(getEdgeEnabledIndex(options, "first"));
+				}
+				break;
+			case "End":
+				if (open) {
+					event.preventDefault();
+					setHighlightedIndex(getEdgeEnabledIndex(options, "last"));
+				}
+				break;
+			case "Enter":
+			case " ":
+				event.preventDefault();
+				if (open) selectHighlighted();
+				else openWithHighlight();
+				break;
+			case "Escape":
+				if (open) {
+					event.preventDefault();
+					closeMenu();
+				}
+				break;
+			default: break;
+		}
+	};
+	const handleTriggerClick = () => {
+		if (disabled) return;
+		if (open) closeMenu();
+		else openWithHighlight();
+	};
+	const handleBlur = () => {
+		if (open) closeMenu();
+	};
+	const display = renderValue ? renderValue(value) : resolveDisplayLabel(options, value);
+	const showPlaceholder = !renderValue && resolveDisplayLabel(options, value) === null;
+	const activeDescendant = open && highlightedIndex >= 0 ? `${listboxId}-option-${highlightedIndex}` : void 0;
+	const childArray = Children.toArray(children);
+	const isOptionChild = (child) => isValidElement(child) && child.props.value !== void 0;
+	const renderedItems = childArray.map((child, position) => {
+		if (!isOptionChild(child)) return child;
+		const index = childArray.slice(0, position).filter(isOptionChild).length;
+		const option = options[index];
+		const childProps = child.props;
+		return cloneElement(child, {
+			id: `${listboxId}-option-${index}`,
+			selected: isOptionSelected(value, option.value),
+			highlighted: index === highlightedIndex,
+			multiple,
+			size,
+			color: childProps.color ?? color,
+			textColor: childProps.textColor ?? textColor,
+			onSelect: selectValue
+		});
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs(Trigger, {
+			ref: setAnchorEl,
+			role: "combobox",
+			tabIndex: disabled ? -1 : 0,
+			"aria-haspopup": "listbox",
+			"aria-expanded": open,
+			"aria-controls": open ? listboxId : void 0,
+			"aria-activedescendant": activeDescendant,
+			"aria-labelledby": labelId,
+			"aria-label": ariaLabel,
+			"aria-describedby": ariaDescribedby,
+			"aria-invalid": error || void 0,
+			"aria-required": required || void 0,
+			"aria-disabled": disabled || void 0,
+			variant: variantProp,
+			sizeToken: size,
+			color,
+			textColor,
+			bg,
+			error,
+			disabled,
+			fullWidth,
+			borderRadius,
+			open,
+			id,
+			className,
+			"data-testid": dataTestid,
+			onClick: handleTriggerClick,
+			onKeyDown: handleKeyDown,
+			onBlur: handleBlur,
+			...spaceProps,
+			children: [/* @__PURE__ */ jsxs(ValueArea, {
+				autoWidth,
+				children: [!autoWidth && /* @__PURE__ */ jsxs(ValueGhost, {
+					"aria-hidden": true,
+					children: [options.map((option) => /* @__PURE__ */ jsx("span", { children: option.label }, String(option.value))), placeholder !== void 0 && /* @__PURE__ */ jsx("span", { children: placeholder })]
+				}), /* @__PURE__ */ jsx(TriggerValue, { children: showPlaceholder ? placeholder ?? "​" : display })]
+			}), /* @__PURE__ */ jsx(Icon, {
+				name: iconName ?? (open ? "expand_less" : "expand_more"),
+				size: "1.25rem",
+				color: "secondary",
+				...iconProps
+			})]
+		}),
+		name !== void 0 && /* @__PURE__ */ jsx("input", {
+			type: "hidden",
+			name,
+			value: Array.isArray(value) ? value.join(",") : String(value)
+		}),
+		/* @__PURE__ */ jsx(Popover, {
+			open,
+			anchorEl,
+			anchorOrigin: {
+				vertical: "bottom",
+				horizontal: "left"
+			},
+			transformOrigin: {
+				vertical: "top",
+				horizontal: "left"
+			},
+			onClose: closeMenu,
+			disableScrollLock: true,
+			disableAriaHidden: true,
+			shouldAutoFocus: false,
+			shouldTrapFocus: false,
+			shouldEnforceFocus: false,
+			shouldRestoreFocus: false,
+			slotProps: { paper: {
+				p: 0,
+				bg,
+				borderRadius,
+				style: { minWidth: anchorEl?.offsetWidth }
+			} },
+			children: /* @__PURE__ */ jsx(ListBox, {
+				role: "listbox",
+				id: listboxId,
+				"aria-multiselectable": multiple || void 0,
+				"aria-labelledby": labelId,
+				onMouseDown: (event) => event.preventDefault(),
+				children: renderedItems
+			})
+		})
+	] });
+}
+//#endregion
+export { Select };

package/dist/Skeleton.cjs

@@ -0,0 +1,82 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-BiocWFSR.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/Skeleton/Skeleton.tsx
+const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+	..._soroush_tech_styled_system_should_forward_prop.props,
+	"variant",
+	"animation",
+	"width",
+	"height"
+]);
+const pulse = (0, _emotion_react.keyframes)({
+	"0%": { opacity: 1 },
+	"50%": { opacity: .4 },
+	"100%": { opacity: 1 }
+});
+const wave = (0, _emotion_react.keyframes)({
+	from: { backgroundPositionX: "100vw" },
+	to: { backgroundPositionX: "-100vw" }
+});
+const shapeVariants = (0, require_src.src_exports.variant)({
+	prop: "variant",
+	variants: {
+		text: { borderRadius: "sm" },
+		rectangular: { borderRadius: "sq" }
+	}
+});
+const radiusSystem = (0, require_src.src_exports.system)({ borderRadius: {
+	property: "borderRadius",
+	scale: "radii"
+} });
+const circularStyle = ({ variant }) => variant === "circular" ? { borderRadius: "50%" } : {};
+const baseStyle = ({ theme }) => ({
+	display: "block",
+	backgroundColor: theme.background.default
+});
+const dimensionStyle = ({ width, height, variant }) => ({
+	width,
+	height: height ?? (variant === "text" ? "auto" : void 0),
+	...variant === "text" && height === void 0 ? { "&:empty::before": { content: String.raw`"\00a0"` } } : {}
+});
+const animationStyle = ({ animation, theme }) => {
+	if (animation === "pulse") return { animation: `${pulse} 2s ease-in-out infinite` };
+	if (animation === "wave") return {
+		backgroundImage: `linear-gradient(90deg, transparent, ${theme.skeleton.highlight}, transparent)`,
+		backgroundRepeat: "no-repeat",
+		backgroundSize: "50vw 100%",
+		backgroundAttachment: "fixed",
+		animation: `${wave} 1.6s linear infinite`
+	};
+	return {};
+};
+const SkeletonRoot = require_src.styled("span", {
+	name: "Skeleton",
+	label: "skeleton",
+	shouldForwardProp,
+	systemProps: [require_src.src_exports.space]
+})(baseStyle, shapeVariants, radiusSystem, circularStyle, animationStyle, dimensionStyle, { "@media (prefers-reduced-motion: reduce)": { animation: "none" } });
+const HiddenContent = require_src.styled("span", {
+	name: "Skeleton",
+	slot: "content",
+	label: "SkeletonContent"
+})({
+	visibility: "hidden",
+	display: "block"
+});
+function Skeleton({ variant = "text", animation = "pulse", width, height, children, ...rest }) {
+	const hasChildren = children != null && children !== "";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonRoot, {
+		variant,
+		animation,
+		width: width ?? (hasChildren ? "fit-content" : void 0),
+		height,
+		...rest,
+		children: hasChildren ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HiddenContent, { children }) : null
+	});
+}
+//#endregion
+exports.Skeleton = Skeleton;

package/dist/Skeleton.d.cts

@@ -0,0 +1,21 @@
+import { l as index_d_exports, o as Theme } from "./index-Bihpwn75.cjs";
+import { HTMLAttributes } from "react";
+//#region src/Skeleton/Skeleton.d.ts
+type SkeletonVariant = 'text' | 'circular' | 'rectangular';
+type SkeletonAnimation = 'pulse' | 'wave' | false;
+type SkeletonRadius = keyof Theme['radii'];
+interface SkeletonProps extends HTMLAttributes<HTMLSpanElement>, Omit<index_d_exports.SpaceProps<Theme>, keyof index_d_exports.PaddingProps> {
+  /** Shape of the placeholder. Default: `'text'`. */
+  variant?: SkeletonVariant;
+  /** Corner radius — resolves against `theme.radii` (sq · sm · md · lg). Overrides the variant default. */
+  borderRadius?: SkeletonRadius;
+  /** Loading animation. `false` disables it. Default: `'pulse'`. */
+  animation?: SkeletonAnimation;
+  /** Width. Number → px; string → raw CSS unit (e.g. `'10rem'`). Inferred from children when omitted. */
+  width?: number | string;
+  /** Height. Number → px; string → raw CSS unit. */
+  height?: number | string;
+}
+declare function Skeleton({ variant, animation, width, height, children, ...rest }: Readonly<SkeletonProps>): import("react").JSX.Element;
+//#endregion
+export { Skeleton, SkeletonAnimation, SkeletonProps, SkeletonRadius, SkeletonVariant };

package/dist/Skeleton.d.mts

@@ -0,0 +1,21 @@
+import { l as index_d_exports, o as Theme } from "./index-Dm9HfgV6.mjs";
+import { HTMLAttributes } from "react";
+//#region src/Skeleton/Skeleton.d.ts
+type SkeletonVariant = 'text' | 'circular' | 'rectangular';
+type SkeletonAnimation = 'pulse' | 'wave' | false;
+type SkeletonRadius = keyof Theme['radii'];
+interface SkeletonProps extends HTMLAttributes<HTMLSpanElement>, Omit<index_d_exports.SpaceProps<Theme>, keyof index_d_exports.PaddingProps> {
+  /** Shape of the placeholder. Default: `'text'`. */
+  variant?: SkeletonVariant;
+  /** Corner radius — resolves against `theme.radii` (sq · sm · md · lg). Overrides the variant default. */
+  borderRadius?: SkeletonRadius;
+  /** Loading animation. `false` disables it. Default: `'pulse'`. */
+  animation?: SkeletonAnimation;
+  /** Width. Number → px; string → raw CSS unit (e.g. `'10rem'`). Inferred from children when omitted. */
+  width?: number | string;
+  /** Height. Number → px; string → raw CSS unit. */
+  height?: number | string;
+}
+declare function Skeleton({ variant, animation, width, height, children, ...rest }: Readonly<SkeletonProps>): import("react").JSX.Element;
+//#endregion
+export { Skeleton, SkeletonAnimation, SkeletonProps, SkeletonRadius, SkeletonVariant };