@soroush.tech/design-system 0.1.0

package/dist/Switch.mjs

@@ -0,0 +1,329 @@
+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 { alpha } from "./utils.mjs";
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/Switch/Switch.tsx
+const OUTSIDE_TRACK = {
+	sm: {
+		width: "34px",
+		height: "14px"
+	},
+	md: {
+		width: "44px",
+		height: "18px"
+	},
+	lg: {
+		width: "54px",
+		height: "22px"
+	}
+};
+const OUTSIDE_THUMB = {
+	sm: "20px",
+	md: "24px",
+	lg: "28px"
+};
+const OUTSIDE_THUMB_START = {
+	sm: "-2px",
+	md: "-2px",
+	lg: "-2px"
+};
+const OUTSIDE_TRANSLATE = {
+	sm: "18px",
+	md: "24px",
+	lg: "30px"
+};
+const INSIDE_TRACK = {
+	sm: {
+		width: "36px",
+		height: "20px"
+	},
+	md: {
+		width: "46px",
+		height: "26px"
+	},
+	lg: {
+		width: "56px",
+		height: "32px"
+	}
+};
+const INSIDE_THUMB = {
+	sm: "16px",
+	md: "22px",
+	lg: "28px"
+};
+const INSIDE_THUMB_START = {
+	sm: "2px",
+	md: "2px",
+	lg: "2px"
+};
+const INSIDE_TRANSLATE = {
+	sm: "16px",
+	md: "20px",
+	lg: "24px"
+};
+const knownSize = (size, theme) => {
+	const resolved = size ?? themeDefault(theme, "size", "md");
+	return resolved === "sm" || resolved === "lg" ? resolved : "md";
+};
+const CheckMarkIcon = () => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 12 12",
+	width: "0.6em",
+	height: "0.6em",
+	fill: "none",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M2 6L5 9L10 3",
+		stroke: "currentColor",
+		strokeWidth: "1.8",
+		strokeLinecap: "round",
+		strokeLinejoin: "round"
+	})
+});
+const XMarkIcon = () => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 12 12",
+	width: "0.6em",
+	height: "0.6em",
+	fill: "none",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M3 3L9 9M9 3L3 9",
+		stroke: "currentColor",
+		strokeWidth: "1.8",
+		strokeLinecap: "round"
+	})
+});
+const HiddenInput = styled("input", {
+	name: "Switch",
+	slot: "input",
+	label: "SwitchInput"
+})({
+	position: "absolute",
+	width: 0,
+	height: 0,
+	opacity: 0,
+	margin: 0,
+	padding: 0,
+	pointerEvents: "none"
+});
+const SwitchTrack = styled("span", {
+	name: "Switch",
+	slot: "track",
+	label: "SwitchTrack",
+	shouldForwardProp: (p) => p !== "size" && p !== "variant" && p !== "bg"
+})(({ theme, size, variant = "outside", bg = themeDefault(theme, "bg", "default") }) => {
+	const trackBg = theme.background[bg];
+	if (variant === "outside") return {
+		display: "inline-block",
+		position: "relative",
+		flexShrink: 0,
+		width: OUTSIDE_TRACK[knownSize(size, theme)].width,
+		height: OUTSIDE_THUMB[knownSize(size, theme)],
+		"&::before": {
+			content: "\"\"",
+			position: "absolute",
+			top: "50%",
+			left: 0,
+			right: 0,
+			height: OUTSIDE_TRACK[knownSize(size, theme)].height,
+			transform: "translateY(-50%)",
+			borderRadius: "999px",
+			backgroundColor: trackBg,
+			transition: "background-color 0.15s ease"
+		}
+	};
+	return {
+		display: "inline-block",
+		position: "relative",
+		flexShrink: 0,
+		width: INSIDE_TRACK[knownSize(size, theme)].width,
+		height: INSIDE_TRACK[knownSize(size, theme)].height,
+		borderRadius: "999px",
+		backgroundColor: trackBg,
+		transition: "background-color 0.3s ease"
+	};
+});
+const SwitchThumb = styled("span", {
+	name: "Switch",
+	slot: "thumb",
+	label: "SwitchThumb",
+	shouldForwardProp: (p) => p !== "size" && p !== "variant"
+})(({ size, variant = "outside", theme }) => {
+	const thumbSize = variant === "outside" ? OUTSIDE_THUMB[knownSize(size, theme)] : INSIDE_THUMB[knownSize(size, theme)];
+	const thumbStart = variant === "outside" ? OUTSIDE_THUMB_START[knownSize(size, theme)] : INSIDE_THUMB_START[knownSize(size, theme)];
+	const transitionDuration = variant === "inside" ? "0.3s" : "0.15s";
+	return {
+		position: "absolute",
+		top: "50%",
+		left: thumbStart,
+		transform: "translateY(-50%)",
+		width: thumbSize,
+		height: thumbSize,
+		borderRadius: "50%",
+		backgroundColor: theme.switch.thumb,
+		boxShadow: `0px 2px 1px -1px ${alpha(theme.shadow.color, .2)},0px 1px 1px 0px ${alpha(theme.shadow.color, .14)},0px 1px 3px 0px ${alpha(theme.shadow.color, .12)}`,
+		transition: `transform ${transitionDuration} ease, background-color ${transitionDuration} ease`,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		overflow: "hidden",
+		fontSize: thumbSize,
+		lineHeight: 1,
+		zIndex: 1
+	};
+});
+const shouldForwardProp = createShouldForwardProp([
+	...props,
+	"color",
+	"size",
+	"variant",
+	"disabled",
+	"edge"
+]);
+const baseStyle = ({ disabled, size, variant = "outside", theme, color = themeDefault(theme, "neutralColor", "default") }) => {
+	const focusRing = theme.palette[themeDefault(theme, "color", "primary")].main;
+	const thumbTranslate = variant === "outside" ? OUTSIDE_TRANSLATE[knownSize(size, theme)] : INSIDE_TRANSLATE[knownSize(size, theme)];
+	const gap = theme?.space?.[1];
+	return {
+		display: "inline-flex",
+		alignItems: "center",
+		position: "relative",
+		cursor: disabled ? "not-allowed" : "pointer",
+		gap,
+		userSelect: "none",
+		...variant === "outside" && {
+			paddingTop: 4,
+			paddingBottom: 4,
+			paddingLeft: 8,
+			paddingRight: 8
+		},
+		...disabled && { opacity: .5 },
+		...variant === "outside" ? {
+			"& input:checked ~ .sw-track::before": { backgroundColor: theme?.palette[color].dark },
+			"&:has(input:focus-visible) .sw-track::before": {
+				outline: `2px solid ${focusRing}`,
+				outlineOffset: "2px",
+				borderRadius: "999px"
+			}
+		} : {
+			"& input:checked ~ .sw-track": { backgroundColor: theme?.palette[color].dark },
+			"&:has(input:focus-visible) .sw-track": {
+				outline: `2px solid ${focusRing}`,
+				outlineOffset: "2px",
+				borderRadius: "999px"
+			}
+		},
+		"& input:checked ~ .sw-track .sw-thumb": {
+			transform: `translateX(${thumbTranslate}) translateY(-50%)`,
+			backgroundColor: theme?.palette[color].main
+		},
+		"& input:not(:checked) ~ .sw-track .sw-checked-icon": { display: "none" },
+		"& input:checked ~ .sw-track .sw-icon": { display: "none" },
+		"& .sw-track .sw-icon": {
+			color: theme?.palette.default.contrastText,
+			lineHeight: 0
+		},
+		"& .sw-track .sw-checked-icon": {
+			color: theme?.palette[color].contrastText,
+			lineHeight: 0
+		},
+		"& .sw-track .sw-track-check": {
+			position: "absolute",
+			left: "8px",
+			top: "50%",
+			transform: "translateY(-50%)",
+			lineHeight: 0,
+			pointerEvents: "none",
+			color: theme?.palette[color].contrastText
+		},
+		"& .sw-track .sw-track-x": {
+			position: "absolute",
+			right: "8px",
+			top: "50%",
+			transform: "translateY(-50%)",
+			lineHeight: 0,
+			pointerEvents: "none",
+			color: theme?.palette.default.contrastText
+		}
+	};
+};
+const colorStyle = ({ theme, color = themeDefault(theme, "neutralColor", "default") }) => {
+	return { color: theme.palette[color].main };
+};
+const edgeStyle = ({ edge }) => {
+	if (!edge) return {};
+	return {
+		...edge === "start" && { marginLeft: -8 },
+		...edge === "end" && { marginRight: -8 }
+	};
+};
+const SwitchRoot = styled("label", {
+	name: "Switch",
+	label: "Switch",
+	shouldForwardProp,
+	systemProps: [src_exports.space]
+})(baseStyle, colorStyle, edgeStyle);
+function Switch({ checked, defaultChecked, disabled = false, disableRipple: _disableRipple, color, size, variant: variantProp, marked = false, bg, edge = false, icon, checkedIcon, onChange, id, required, children, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-testid": dataTestid, ...spaceProps }) {
+	const theme = useTheme();
+	const variant = variantProp ?? themeDefault(theme, "switchVariant", "outside");
+	const effectiveIcon = icon ?? (marked && variant === "outside" ? /* @__PURE__ */ jsx(XMarkIcon, {}) : null);
+	const effectiveCheckedIcon = checkedIcon ?? (marked && variant === "outside" ? /* @__PURE__ */ jsx(CheckMarkIcon, {}) : null);
+	const handleKeyDown = (event) => {
+		if (event.key !== "Enter") return;
+		event.preventDefault();
+		event.currentTarget.click();
+	};
+	return /* @__PURE__ */ jsxs(SwitchRoot, {
+		color,
+		size,
+		variant,
+		disabled,
+		edge,
+		className,
+		"data-testid": dataTestid,
+		...spaceProps,
+		children: [
+			/* @__PURE__ */ jsx(HiddenInput, {
+				type: "checkbox",
+				role: "switch",
+				checked,
+				defaultChecked,
+				disabled,
+				id,
+				required,
+				onChange,
+				onKeyDown: handleKeyDown,
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledby,
+				"aria-describedby": ariaDescribedby
+			}),
+			/* @__PURE__ */ jsxs(SwitchTrack, {
+				className: "sw-track",
+				size,
+				variant,
+				bg,
+				children: [variant === "inside" && marked && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					className: "sw-track-check",
+					children: /* @__PURE__ */ jsx(CheckMarkIcon, {})
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sw-track-x",
+					children: /* @__PURE__ */ jsx(XMarkIcon, {})
+				})] }), /* @__PURE__ */ jsxs(SwitchThumb, {
+					className: "sw-thumb",
+					size,
+					variant,
+					children: [effectiveIcon != null && /* @__PURE__ */ jsx("span", {
+						className: "sw-icon",
+						children: effectiveIcon
+					}), effectiveCheckedIcon != null && /* @__PURE__ */ jsx("span", {
+						className: "sw-checked-icon",
+						children: effectiveCheckedIcon
+					})]
+				})]
+			}),
+			children != null && /* @__PURE__ */ jsx("span", { children })
+		]
+	});
+}
+//#endregion
+export { Switch };

package/dist/Table/Table.cjs

@@ -0,0 +1,65 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("../src-BiocWFSR.cjs");
+const require_TableContext = require("../TableContext-qqp35o8z.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");
+//#region src/Table/Table/Table.tsx
+const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([..._soroush_tech_styled_system_should_forward_prop.props, "tableAlign"]);
+const colorSystem = (0, require_src.src_exports.system)({ bg: {
+	property: "backgroundColor",
+	scale: "background"
+} });
+const alignStyle = ({ tableAlign }) => tableAlign ? { textAlign: tableAlign } : {};
+const collapseStyle = ({ borderRadius }) => borderRadius ? {
+	borderCollapse: "separate",
+	borderSpacing: 0,
+	overflow: "hidden"
+} : { borderCollapse: "collapse" };
+const defaultBorder = ({ theme, borderColor = "light" }) => {
+	const color = (0, require_src.src_exports.get)(theme, `border.${borderColor}`);
+	return {
+		border: `${(0, require_src.src_exports.get)(theme, "borderWidths.thin")} solid ${color}`,
+		"& :where(thead, tbody, tfoot, tr, td, th)": { borderColor: color }
+	};
+};
+const TableElement = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", { ...props });
+const TableBase = require_src.styled(TableElement, {
+	name: "Table",
+	label: "Table",
+	shouldForwardProp,
+	systemProps: [
+		require_src.src_exports.space,
+		require_src.src_exports.layout,
+		colorSystem,
+		require_src.src_exports.border
+	]
+})({ width: "100%" }, collapseStyle, defaultBorder, alignStyle);
+function Table({ size, cellPadding = "normal", hasStickyHeader = false, shouldHideSortIcon = true, hasEllipsis = false, color, align, as, children, ...rest }) {
+	const value = (0, react.useMemo)(() => ({
+		size,
+		cellPadding,
+		hasStickyHeader,
+		shouldHideSortIcon,
+		hasEllipsis,
+		color
+	}), [
+		size,
+		cellPadding,
+		hasStickyHeader,
+		shouldHideSortIcon,
+		hasEllipsis,
+		color
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TableContext.TableContext.Provider, {
+		value,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableBase, {
+			as,
+			tableAlign: align,
+			...rest,
+			children
+		})
+	});
+}
+//#endregion
+exports.Table = Table;

package/dist/Table/Table.d.cts

@@ -0,0 +1,2 @@
+import { a as TableProps, i as TableBorderColorToken, n as TableAlign, o as TableSize, r as TableBackgroundToken, t as Table } from "../index-CM_KCTee.cjs";
+export { Table, TableAlign, TableBackgroundToken, TableBorderColorToken, TableProps, TableSize };

package/dist/Table/Table.d.mts

@@ -0,0 +1,2 @@
+import { a as TableProps, i as TableBorderColorToken, n as TableAlign, o as TableSize, r as TableBackgroundToken, t as Table } from "../index-CEOZI-6L.mjs";
+export { Table, TableAlign, TableBackgroundToken, TableBorderColorToken, TableProps, TableSize };

package/dist/Table/Table.mjs

@@ -0,0 +1,63 @@
+import { a as createShouldForwardProp, c as props, d as styled, l as src_exports } from "../src-DcNT2aIK.mjs";
+import { t as TableContext } from "../TableContext-BRWPghAI.mjs";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Table/Table/Table.tsx
+const shouldForwardProp = createShouldForwardProp([...props, "tableAlign"]);
+const colorSystem = (0, src_exports.system)({ bg: {
+	property: "backgroundColor",
+	scale: "background"
+} });
+const alignStyle = ({ tableAlign }) => tableAlign ? { textAlign: tableAlign } : {};
+const collapseStyle = ({ borderRadius }) => borderRadius ? {
+	borderCollapse: "separate",
+	borderSpacing: 0,
+	overflow: "hidden"
+} : { borderCollapse: "collapse" };
+const defaultBorder = ({ theme, borderColor = "light" }) => {
+	const color = (0, src_exports.get)(theme, `border.${borderColor}`);
+	return {
+		border: `${(0, src_exports.get)(theme, "borderWidths.thin")} solid ${color}`,
+		"& :where(thead, tbody, tfoot, tr, td, th)": { borderColor: color }
+	};
+};
+const TableElement = (props) => /* @__PURE__ */ jsx("table", { ...props });
+const TableBase = styled(TableElement, {
+	name: "Table",
+	label: "Table",
+	shouldForwardProp,
+	systemProps: [
+		src_exports.space,
+		src_exports.layout,
+		colorSystem,
+		src_exports.border
+	]
+})({ width: "100%" }, collapseStyle, defaultBorder, alignStyle);
+function Table({ size, cellPadding = "normal", hasStickyHeader = false, shouldHideSortIcon = true, hasEllipsis = false, color, align, as, children, ...rest }) {
+	const value = useMemo(() => ({
+		size,
+		cellPadding,
+		hasStickyHeader,
+		shouldHideSortIcon,
+		hasEllipsis,
+		color
+	}), [
+		size,
+		cellPadding,
+		hasStickyHeader,
+		shouldHideSortIcon,
+		hasEllipsis,
+		color
+	]);
+	return /* @__PURE__ */ jsx(TableContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx(TableBase, {
+			as,
+			tableAlign: align,
+			...rest,
+			children
+		})
+	});
+}
+//#endregion
+export { Table };

package/dist/Table/TableBody.cjs

@@ -0,0 +1,42 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("../src-BiocWFSR.cjs");
+const require_TableSectionContext = require("../TableSectionContext-pYlJ-duI.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");
+//#region src/Table/TableBody/TableBody.tsx
+const TableBodyBase = require_src.styled("tbody", {
+	name: "TableBody",
+	label: "TableBody",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([..._soroush_tech_styled_system_should_forward_prop.props]),
+	systemProps: [
+		require_src.src_exports.space,
+		(0, require_src.src_exports.system)({
+			color: {
+				property: "color",
+				scale: "text"
+			},
+			bg: {
+				property: "backgroundColor",
+				scale: "background"
+			},
+			borderColor: {
+				property: "borderColor",
+				scale: "border"
+			}
+		}),
+		require_src.src_exports.border
+	]
+})();
+function TableBody({ as, children, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TableSectionContext.TableSectionContext.Provider, {
+		value: "body",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableBodyBase, {
+			as,
+			...rest,
+			children
+		})
+	});
+}
+//#endregion
+exports.TableBody = TableBody;

package/dist/Table/TableBody.d.cts

@@ -0,0 +1,2 @@
+import { a as TableBodyProps, i as TableBodyColorToken, n as TableBodyBackgroundToken, r as TableBodyBorderColorToken, t as TableBody } from "../index-GVsFY00r.cjs";
+export { TableBody, TableBodyBackgroundToken, TableBodyBorderColorToken, TableBodyColorToken, TableBodyProps };

package/dist/Table/TableBody.d.mts

@@ -0,0 +1,2 @@
+import { a as TableBodyProps, i as TableBodyColorToken, n as TableBodyBackgroundToken, r as TableBodyBorderColorToken, t as TableBody } from "../index-C-P_hipv.mjs";
+export { TableBody, TableBodyBackgroundToken, TableBodyBorderColorToken, TableBodyColorToken, TableBodyProps };

package/dist/Table/TableBody.mjs

@@ -0,0 +1,40 @@
+import { a as createShouldForwardProp, c as props, d as styled, l as src_exports } from "../src-DcNT2aIK.mjs";
+import { t as TableSectionContext } from "../TableSectionContext-meIG4lFZ.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Table/TableBody/TableBody.tsx
+const TableBodyBase = styled("tbody", {
+	name: "TableBody",
+	label: "TableBody",
+	shouldForwardProp: createShouldForwardProp([...props]),
+	systemProps: [
+		src_exports.space,
+		(0, src_exports.system)({
+			color: {
+				property: "color",
+				scale: "text"
+			},
+			bg: {
+				property: "backgroundColor",
+				scale: "background"
+			},
+			borderColor: {
+				property: "borderColor",
+				scale: "border"
+			}
+		}),
+		src_exports.border
+	]
+})();
+function TableBody({ as, children, ...rest }) {
+	return /* @__PURE__ */ jsx(TableSectionContext.Provider, {
+		value: "body",
+		children: /* @__PURE__ */ jsx(TableBodyBase, {
+			as,
+			...rest,
+			children
+		})
+	});
+}
+//#endregion
+export { TableBody };

package/dist/Table/TableCell.cjs

@@ -0,0 +1,93 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("../src-BiocWFSR.cjs");
+const require_themeDefault = require("../themeDefault-B-QjpGEO.cjs");
+const require_TableContext = require("../TableContext-qqp35o8z.cjs");
+const require_TableSectionContext = require("../TableSectionContext-pYlJ-duI.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");
+//#region src/Table/TableCell/TableCell.tsx
+const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+	..._soroush_tech_styled_system_should_forward_prop.props,
+	"cellAlign",
+	"cellPadding",
+	"hasEllipsis",
+	"isSticky",
+	"variant"
+]);
+const colorSystem = (0, require_src.src_exports.system)({
+	color: {
+		property: "color",
+		scale: "text"
+	},
+	bg: {
+		property: "backgroundColor",
+		scale: "background"
+	},
+	borderColor: {
+		property: "borderColor",
+		scale: "border"
+	}
+});
+const sizeStyle = ({ theme, size, cellPadding = "normal" }) => {
+	const s = theme.sizes[size ?? require_themeDefault.themeDefault(theme, "size", "md")];
+	const fontSize = theme.fontSizes[s.fontSize];
+	if (cellPadding === "none") return {
+		padding: 0,
+		fontSize
+	};
+	return {
+		paddingTop: theme.space[s.paddingTop],
+		paddingBottom: theme.space[s.paddingBottom],
+		paddingLeft: theme.space[s.paddingLeft],
+		paddingRight: theme.space[s.paddingRight],
+		fontSize
+	};
+};
+const alignStyle = ({ cellAlign = "inherit" }) => ({ textAlign: cellAlign });
+const ellipsisStyle = ({ hasEllipsis }) => hasEllipsis ? {
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap"
+} : {};
+const dividerStyle = ({ theme }) => ({
+	borderBottomWidth: (0, require_src.src_exports.get)(theme, "borderWidths.thin"),
+	borderBottomStyle: "solid"
+});
+const stickyStyle = ({ isSticky, theme }) => isSticky ? {
+	position: "sticky",
+	top: 0,
+	backgroundColor: (0, require_src.src_exports.get)(theme, "background.paper")
+} : {};
+const TableCellBase = require_src.styled("td", {
+	name: "TableCell",
+	label: "TableCell",
+	shouldForwardProp,
+	systemProps: [
+		require_src.src_exports.space,
+		colorSystem,
+		require_src.src_exports.typography,
+		require_src.src_exports.border
+	]
+})(sizeStyle, dividerStyle, stickyStyle, ellipsisStyle, alignStyle);
+function TableCell({ variant, align = "inherit", size, cellPadding, sortDirection, hasEllipsis, scope, as, children, ...rest }) {
+	const section = (0, react.useContext)(require_TableSectionContext.TableSectionContext);
+	const table = (0, react.useContext)(require_TableContext.TableContext);
+	const resolvedVariant = variant ?? section ?? "body";
+	const isHead = resolvedVariant === "head";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TableCellBase, {
+		as: as ?? (isHead ? "th" : "td"),
+		variant: resolvedVariant,
+		cellAlign: align,
+		size: size ?? table.size,
+		cellPadding: cellPadding ?? table.cellPadding,
+		hasEllipsis: hasEllipsis ?? table.hasEllipsis,
+		isSticky: isHead && Boolean(table.hasStickyHeader),
+		scope: scope ?? (isHead ? "col" : void 0),
+		"aria-sort": sortDirection && (sortDirection === "asc" ? "ascending" : "descending"),
+		...rest,
+		children
+	});
+}
+//#endregion
+exports.TableCell = TableCell;

package/dist/Table/TableCell.d.cts

@@ -0,0 +1,2 @@
+import { a as TableCellColorToken, c as TableCellVariant, i as TableCellBorderColorToken, n as TableCellAlign, o as TableCellProps, r as TableCellBackgroundToken, s as TableCellSortDirection, t as TableCell } from "../index-4rC2j7fR.cjs";
+export { TableCell, TableCellAlign, TableCellBackgroundToken, TableCellBorderColorToken, TableCellColorToken, TableCellProps, TableCellSortDirection, TableCellVariant };

package/dist/Table/TableCell.d.mts

@@ -0,0 +1,2 @@
+import { a as TableCellColorToken, c as TableCellVariant, i as TableCellBorderColorToken, n as TableCellAlign, o as TableCellProps, r as TableCellBackgroundToken, s as TableCellSortDirection, t as TableCell } from "../index-BH8jQOdF.mjs";
+export { TableCell, TableCellAlign, TableCellBackgroundToken, TableCellBorderColorToken, TableCellColorToken, TableCellProps, TableCellSortDirection, TableCellVariant };