@soroush.tech/design-system 0.1.0

package/dist/Skeleton.mjs

@@ -0,0 +1,79 @@
+import { a as createShouldForwardProp, c as props, d as styled, l as src_exports, s as keyframes } from "./src-DcNT2aIK.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Skeleton/Skeleton.tsx
+const shouldForwardProp = createShouldForwardProp([
+	...props,
+	"variant",
+	"animation",
+	"width",
+	"height"
+]);
+const pulse = keyframes({
+	"0%": { opacity: 1 },
+	"50%": { opacity: .4 },
+	"100%": { opacity: 1 }
+});
+const wave = keyframes({
+	from: { backgroundPositionX: "100vw" },
+	to: { backgroundPositionX: "-100vw" }
+});
+const shapeVariants = (0, src_exports.variant)({
+	prop: "variant",
+	variants: {
+		text: { borderRadius: "sm" },
+		rectangular: { borderRadius: "sq" }
+	}
+});
+const radiusSystem = (0, 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 = styled("span", {
+	name: "Skeleton",
+	label: "skeleton",
+	shouldForwardProp,
+	systemProps: [src_exports.space]
+})(baseStyle, shapeVariants, radiusSystem, circularStyle, animationStyle, dimensionStyle, { "@media (prefers-reduced-motion: reduce)": { animation: "none" } });
+const HiddenContent = 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__ */ jsx(SkeletonRoot, {
+		variant,
+		animation,
+		width: width ?? (hasChildren ? "fit-content" : void 0),
+		height,
+		...rest,
+		children: hasChildren ? /* @__PURE__ */ jsx(HiddenContent, { children }) : null
+	});
+}
+//#endregion
+export { Skeleton };

package/dist/Switch.cjs

@@ -0,0 +1,332 @@
+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/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 ?? require_themeDefault.themeDefault(theme, "size", "md");
+	return resolved === "sm" || resolved === "lg" ? resolved : "md";
+};
+const CheckMarkIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+	viewBox: "0 0 12 12",
+	width: "0.6em",
+	height: "0.6em",
+	fill: "none",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		d: "M2 6L5 9L10 3",
+		stroke: "currentColor",
+		strokeWidth: "1.8",
+		strokeLinecap: "round",
+		strokeLinejoin: "round"
+	})
+});
+const XMarkIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+	viewBox: "0 0 12 12",
+	width: "0.6em",
+	height: "0.6em",
+	fill: "none",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		d: "M3 3L9 9M9 3L3 9",
+		stroke: "currentColor",
+		strokeWidth: "1.8",
+		strokeLinecap: "round"
+	})
+});
+const HiddenInput = require_src.styled("input", {
+	name: "Switch",
+	slot: "input",
+	label: "SwitchInput"
+})({
+	position: "absolute",
+	width: 0,
+	height: 0,
+	opacity: 0,
+	margin: 0,
+	padding: 0,
+	pointerEvents: "none"
+});
+const SwitchTrack = require_src.styled("span", {
+	name: "Switch",
+	slot: "track",
+	label: "SwitchTrack",
+	shouldForwardProp: (p) => p !== "size" && p !== "variant" && p !== "bg"
+})(({ theme, size, variant = "outside", bg = require_themeDefault.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 = require_src.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 ${require_utils.alpha(theme.shadow.color, .2)},0px 1px 1px 0px ${require_utils.alpha(theme.shadow.color, .14)},0px 1px 3px 0px ${require_utils.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 = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+	..._soroush_tech_styled_system_should_forward_prop.props,
+	"color",
+	"size",
+	"variant",
+	"disabled",
+	"edge"
+]);
+const baseStyle = ({ disabled, size, variant = "outside", theme, color = require_themeDefault.themeDefault(theme, "neutralColor", "default") }) => {
+	const focusRing = theme.palette[require_themeDefault.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 = require_themeDefault.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 = require_src.styled("label", {
+	name: "Switch",
+	label: "Switch",
+	shouldForwardProp,
+	systemProps: [require_src.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 = (0, _emotion_react.useTheme)();
+	const variant = variantProp ?? require_themeDefault.themeDefault(theme, "switchVariant", "outside");
+	const effectiveIcon = icon ?? (marked && variant === "outside" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(XMarkIcon, {}) : null);
+	const effectiveCheckedIcon = checkedIcon ?? (marked && variant === "outside" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckMarkIcon, {}) : null);
+	const handleKeyDown = (event) => {
+		if (event.key !== "Enter") return;
+		event.preventDefault();
+		event.currentTarget.click();
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SwitchRoot, {
+		color,
+		size,
+		variant,
+		disabled,
+		edge,
+		className,
+		"data-testid": dataTestid,
+		...spaceProps,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HiddenInput, {
+				type: "checkbox",
+				role: "switch",
+				checked,
+				defaultChecked,
+				disabled,
+				id,
+				required,
+				onChange,
+				onKeyDown: handleKeyDown,
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledby,
+				"aria-describedby": ariaDescribedby
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SwitchTrack, {
+				className: "sw-track",
+				size,
+				variant,
+				bg,
+				children: [variant === "inside" && marked && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "sw-track-check",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckMarkIcon, {})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "sw-track-x",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(XMarkIcon, {})
+				})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SwitchThumb, {
+					className: "sw-thumb",
+					size,
+					variant,
+					children: [effectiveIcon != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "sw-icon",
+						children: effectiveIcon
+					}), effectiveCheckedIcon != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "sw-checked-icon",
+						children: effectiveCheckedIcon
+					})]
+				})]
+			}),
+			children != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children })
+		]
+	});
+}
+//#endregion
+exports.Switch = Switch;

package/dist/Switch.d.cts

@@ -0,0 +1,40 @@
+import { l as index_d_exports, o as Theme } from "./index-Bihpwn75.cjs";
+import { ChangeEvent, ReactNode } from "react";
+//#region src/Switch/Switch.d.ts
+type SwitchColor = keyof Theme['palette'];
+type SwitchSize = keyof Theme['sizes'];
+type SwitchEdge = 'start' | 'end' | false;
+type SwitchVariant = 'outside' | 'inside';
+interface SwitchProps extends index_d_exports.SpaceProps<Theme> {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  disabled?: boolean;
+  /** Accepted for API parity — the design system does not implement ripple. */
+  disableRipple?: boolean;
+  color?: SwitchColor;
+  size?: SwitchSize;
+  variant?: SwitchVariant;
+  bg?: keyof Theme['background'];
+  /**
+   * Shows ✓/✕ indicators.
+   * - `"outside"` — marks appear as SVG icons inside the thumb.
+   * - `"inside"` — marks appear as CSS pseudo-elements in the track.
+   * Custom `icon`/`checkedIcon` override the defaults when `marked` is true.
+   */
+  marked?: boolean;
+  edge?: SwitchEdge;
+  icon?: ReactNode;
+  checkedIcon?: ReactNode;
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+  id?: string;
+  required?: boolean;
+  children?: ReactNode;
+  className?: string;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  'aria-describedby'?: string;
+  'data-testid'?: string;
+}
+declare function Switch({ checked, defaultChecked, disabled, disableRipple: _disableRipple, color, size, variant: variantProp, marked, bg, edge, icon, checkedIcon, onChange, id, required, children, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'data-testid': dataTestid, ...spaceProps }: Readonly<SwitchProps>): import("react").JSX.Element;
+//#endregion
+export { Switch, SwitchColor, SwitchEdge, SwitchProps, SwitchSize, SwitchVariant };

package/dist/Switch.d.mts

@@ -0,0 +1,40 @@
+import { l as index_d_exports, o as Theme } from "./index-Dm9HfgV6.mjs";
+import { ChangeEvent, ReactNode } from "react";
+//#region src/Switch/Switch.d.ts
+type SwitchColor = keyof Theme['palette'];
+type SwitchSize = keyof Theme['sizes'];
+type SwitchEdge = 'start' | 'end' | false;
+type SwitchVariant = 'outside' | 'inside';
+interface SwitchProps extends index_d_exports.SpaceProps<Theme> {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  disabled?: boolean;
+  /** Accepted for API parity — the design system does not implement ripple. */
+  disableRipple?: boolean;
+  color?: SwitchColor;
+  size?: SwitchSize;
+  variant?: SwitchVariant;
+  bg?: keyof Theme['background'];
+  /**
+   * Shows ✓/✕ indicators.
+   * - `"outside"` — marks appear as SVG icons inside the thumb.
+   * - `"inside"` — marks appear as CSS pseudo-elements in the track.
+   * Custom `icon`/`checkedIcon` override the defaults when `marked` is true.
+   */
+  marked?: boolean;
+  edge?: SwitchEdge;
+  icon?: ReactNode;
+  checkedIcon?: ReactNode;
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+  id?: string;
+  required?: boolean;
+  children?: ReactNode;
+  className?: string;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  'aria-describedby'?: string;
+  'data-testid'?: string;
+}
+declare function Switch({ checked, defaultChecked, disabled, disableRipple: _disableRipple, color, size, variant: variantProp, marked, bg, edge, icon, checkedIcon, onChange, id, required, children, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'data-testid': dataTestid, ...spaceProps }: Readonly<SwitchProps>): import("react").JSX.Element;
+//#endregion
+export { Switch, SwitchColor, SwitchEdge, SwitchProps, SwitchSize, SwitchVariant };