@soroush.tech/design-system 0.1.0

package/dist/Icon.cjs

@@ -0,0 +1,4 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_Icon = require("./Icon-1YtNCUKo.cjs");
+exports.Icon = require_Icon.Icon;
+exports.icons = require_Icon.icons;

package/dist/Icon.d.cts

@@ -0,0 +1,2 @@
+import { i as icons, n as IconProps, r as IconName, t as Icon } from "./index-Dp81rWM1.cjs";
+export { Icon, type IconName, IconProps, icons };

package/dist/Icon.d.mts

@@ -0,0 +1,2 @@
+import { i as icons, n as IconProps, r as IconName, t as Icon } from "./index-BLfFycfJ.mjs";
+export { Icon, type IconName, IconProps, icons };

package/dist/Icon.mjs

@@ -0,0 +1,2 @@
+import { n as icons, t as Icon } from "./Icon-CAKRmFz3.mjs";
+export { Icon, icons };

package/dist/Image.cjs

@@ -0,0 +1,82 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-BiocWFSR.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/Image/Image.tsx
+const baseShouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+	..._soroush_tech_styled_system_should_forward_prop.props,
+	"fallback",
+	"objectFit",
+	"objectPosition",
+	"borderRadius"
+]);
+const shouldForwardProp = (prop) => prop === "fetchPriority" || baseShouldForwardProp(prop);
+const StyledImg = require_src.styled("img", {
+	name: "Image",
+	label: "image",
+	shouldForwardProp,
+	systemProps: [
+		require_src.src_exports.layout,
+		require_src.src_exports.space,
+		require_src.src_exports.background,
+		require_src.src_exports.position,
+		(0, require_src.src_exports.system)({
+			objectFit: { property: "objectFit" },
+			objectPosition: { property: "objectPosition" },
+			borderRadius: {
+				property: "borderRadius",
+				scale: "radii"
+			}
+		})
+	]
+})();
+function Image({ src, srcSet, fallback, alt, onError, ...rest }) {
+	const [prevSrc, setPrevSrc] = (0, react.useState)(src);
+	const [prevSrcSet, setPrevSrcSet] = (0, react.useState)(srcSet);
+	const [prevFallback, setPrevFallback] = (0, react.useState)(fallback);
+	const [phase, setPhase] = (0, react.useState)("initial");
+	if (prevSrc !== src || prevSrcSet !== srcSet || prevFallback !== fallback) {
+		setPrevSrc(src);
+		setPrevSrcSet(srcSet);
+		setPrevFallback(fallback);
+		setPhase("initial");
+	}
+	const handleError = () => {
+		if (phase === "initial") {
+			if (srcSet && src) {
+				setPhase("without-srcset");
+				return;
+			}
+			if (fallback) {
+				setPhase("fallback");
+				return;
+			}
+			setPhase("failed");
+			onError?.();
+			return;
+		}
+		if (phase === "without-srcset") {
+			if (fallback) {
+				setPhase("fallback");
+				return;
+			}
+			setPhase("failed");
+			onError?.();
+			return;
+		}
+		if (phase === "fallback") {
+			setPhase("failed");
+			onError?.();
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledImg, {
+		src: phase === "fallback" || !src ? fallback : src,
+		srcSet: phase === "initial" ? srcSet : void 0,
+		alt,
+		onError: handleError,
+		...rest
+	});
+}
+//#endregion
+exports.Image = Image;

package/dist/Image.d.cts

@@ -0,0 +1,2 @@
+import { n as ImageProps, t as Image } from "./index-DD2AVtiR.cjs";
+export { Image, ImageProps };

package/dist/Image.d.mts

@@ -0,0 +1,2 @@
+import { n as ImageProps, t as Image } from "./index-DgRS5Aqv.mjs";
+export { Image, ImageProps };

package/dist/Image.mjs

@@ -0,0 +1,80 @@
+import { a as createShouldForwardProp, c as props, d as styled, l as src_exports } from "./src-DcNT2aIK.mjs";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Image/Image.tsx
+const baseShouldForwardProp = createShouldForwardProp([
+	...props,
+	"fallback",
+	"objectFit",
+	"objectPosition",
+	"borderRadius"
+]);
+const shouldForwardProp = (prop) => prop === "fetchPriority" || baseShouldForwardProp(prop);
+const StyledImg = styled("img", {
+	name: "Image",
+	label: "image",
+	shouldForwardProp,
+	systemProps: [
+		src_exports.layout,
+		src_exports.space,
+		src_exports.background,
+		src_exports.position,
+		(0, src_exports.system)({
+			objectFit: { property: "objectFit" },
+			objectPosition: { property: "objectPosition" },
+			borderRadius: {
+				property: "borderRadius",
+				scale: "radii"
+			}
+		})
+	]
+})();
+function Image({ src, srcSet, fallback, alt, onError, ...rest }) {
+	const [prevSrc, setPrevSrc] = useState(src);
+	const [prevSrcSet, setPrevSrcSet] = useState(srcSet);
+	const [prevFallback, setPrevFallback] = useState(fallback);
+	const [phase, setPhase] = useState("initial");
+	if (prevSrc !== src || prevSrcSet !== srcSet || prevFallback !== fallback) {
+		setPrevSrc(src);
+		setPrevSrcSet(srcSet);
+		setPrevFallback(fallback);
+		setPhase("initial");
+	}
+	const handleError = () => {
+		if (phase === "initial") {
+			if (srcSet && src) {
+				setPhase("without-srcset");
+				return;
+			}
+			if (fallback) {
+				setPhase("fallback");
+				return;
+			}
+			setPhase("failed");
+			onError?.();
+			return;
+		}
+		if (phase === "without-srcset") {
+			if (fallback) {
+				setPhase("fallback");
+				return;
+			}
+			setPhase("failed");
+			onError?.();
+			return;
+		}
+		if (phase === "fallback") {
+			setPhase("failed");
+			onError?.();
+		}
+	};
+	return /* @__PURE__ */ jsx(StyledImg, {
+		src: phase === "fallback" || !src ? fallback : src,
+		srcSet: phase === "initial" ? srcSet : void 0,
+		alt,
+		onError: handleError,
+		...rest
+	});
+}
+//#endregion
+export { Image };

package/dist/LinearProgress.cjs

@@ -0,0 +1,217 @@
+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/LinearProgress/LinearProgress.tsx
+const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+	..._soroush_tech_styled_system_should_forward_prop.props,
+	"color",
+	"variant",
+	"thickness",
+	"value",
+	"buffer",
+	"valueBuffer",
+	"min",
+	"max",
+	"spinning",
+	"easing",
+	"showTrack",
+	"round"
+]);
+const THICKNESS_DEFAULT = 4;
+const indeterminateBar1 = (0, _emotion_react.keyframes)({
+	"0%": {
+		left: "-35%",
+		right: "100%"
+	},
+	"60%": {
+		left: "100%",
+		right: "-90%"
+	},
+	"100%": {
+		left: "100%",
+		right: "-90%"
+	}
+});
+const indeterminateBar2 = (0, _emotion_react.keyframes)({
+	"0%": {
+		left: "-200%",
+		right: "100%"
+	},
+	"60%": {
+		left: "107%",
+		right: "-8%"
+	},
+	"100%": {
+		left: "107%",
+		right: "-8%"
+	}
+});
+const bufferDots = (0, _emotion_react.keyframes)({
+	"0%": {
+		opacity: 1,
+		backgroundPosition: "0 -23px"
+	},
+	"60%": {
+		opacity: 0,
+		backgroundPosition: "0 -23px"
+	},
+	"100%": {
+		opacity: 1,
+		backgroundPosition: "-200px -23px"
+	}
+});
+const travel = (0, _emotion_react.keyframes)({
+	"0%": { transform: "translateX(0%)" },
+	"100%": { transform: "translateX(100%)" }
+});
+const LinearProgressTrack = require_src.styled("span", {
+	name: "LinearProgress",
+	slot: "track",
+	label: "LinearProgressTrack"
+})({
+	position: "absolute",
+	inset: 0,
+	backgroundColor: "currentColor",
+	opacity: .2
+});
+const LinearProgressDash = require_src.styled("span", {
+	name: "LinearProgress",
+	slot: "dash",
+	label: "LinearProgressDash"
+})({
+	position: "absolute",
+	inset: 0,
+	backgroundImage: "radial-gradient(currentColor 0%, currentColor 16%, transparent 42%)",
+	backgroundSize: "10px 10px",
+	backgroundPosition: "0 -23px",
+	opacity: .3,
+	animation: `${bufferDots} 3s infinite linear`
+});
+const barShouldForwardProp = (prop) => prop !== "variant" && prop !== "buffer" && prop !== "easing";
+const LinearProgressBar = require_src.styled("span", {
+	name: "LinearProgress",
+	slot: "bar",
+	label: "LinearProgressBar",
+	shouldForwardProp: barShouldForwardProp
+})(({ variant, easing = "linear" }) => ({
+	position: "absolute",
+	top: 0,
+	bottom: 0,
+	left: 0,
+	transformOrigin: "left",
+	backgroundColor: "currentColor",
+	...variant === "determinate" ? {
+		width: "100%",
+		transition: `transform 0.4s ${easing}`
+	} : { animation: `${indeterminateBar1} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite` }
+}));
+const LinearProgressTraveler = require_src.styled("span", {
+	name: "LinearProgress",
+	slot: "traveler",
+	label: "LinearProgressTraveler",
+	shouldForwardProp: barShouldForwardProp
+})(({ easing = "linear" }) => ({
+	position: "absolute",
+	inset: 0,
+	animation: `${travel} 1.4s ${easing} infinite`
+}));
+const LinearProgressSegment = require_src.styled("span", {
+	name: "LinearProgress",
+	slot: "segment",
+	label: "LinearProgressSegment"
+})({
+	position: "absolute",
+	top: 0,
+	bottom: 0,
+	left: 0,
+	backgroundColor: "currentColor"
+});
+const LinearProgressBarSecondary = require_src.styled("span", {
+	name: "LinearProgress",
+	slot: "secondaryBar",
+	label: "LinearProgressBarSecondary",
+	shouldForwardProp: barShouldForwardProp
+})(({ buffer, easing = "linear" }) => ({
+	position: "absolute",
+	top: 0,
+	bottom: 0,
+	left: 0,
+	transformOrigin: "left",
+	backgroundColor: "currentColor",
+	...buffer ? {
+		width: "100%",
+		opacity: .4,
+		transition: `transform 0.4s ${easing}`
+	} : { animation: `${indeterminateBar2} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s 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 baseStyle = {
+	display: "block",
+	position: "relative",
+	overflow: "hidden",
+	width: "100%"
+};
+const thicknessStyle = ({ thickness = THICKNESS_DEFAULT }) => ({ height: thickness });
+const directionStyle = ({ variant = "indeterminate" }) => variant === "query" ? { transform: "rotate(180deg)" } : {};
+const roundStyle = ({ round }) => round ? { borderRadius: "9999px" } : {};
+const LinearProgressRoot = require_src.styled("span", {
+	name: "LinearProgress",
+	label: "LinearProgress",
+	shouldForwardProp,
+	systemProps: [require_src.src_exports.space, require_src.src_exports.layout]
+})(baseStyle, thicknessStyle, colorStyle, directionStyle, roundStyle);
+function LinearProgress({ variant = "indeterminate", color, thickness = THICKNESS_DEFAULT, value, buffer = false, valueBuffer, min = 0, max = 100, spinning = false, easing = "linear", showTrack = true, round = false, ...rest }) {
+	const isDeterminate = variant === "determinate";
+	const isBuffer = isDeterminate && buffer;
+	const isSpinning = isDeterminate && spinning;
+	const normalizedValue = require_utils.clamp(value ?? min, min, max);
+	const normalizedBuffer = require_utils.clamp(valueBuffer ?? min, min, max);
+	const toPercent = (n) => max === 0 ? 0 : n / max * 100;
+	const valuePercent = toPercent(normalizedValue);
+	const barStyle = isDeterminate ? { transform: `translateX(${valuePercent - 100}%)` } : void 0;
+	const bufferBarStyle = isBuffer ? { transform: `translateX(${toPercent(normalizedBuffer) - 100}%)` } : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LinearProgressRoot, {
+		role: "progressbar",
+		"aria-label": "Loading",
+		color,
+		variant,
+		thickness,
+		round,
+		...isDeterminate ? {
+			"aria-valuenow": normalizedValue,
+			"aria-valuemin": min,
+			"aria-valuemax": max
+		} : {},
+		...rest,
+		children: [
+			showTrack && (isBuffer ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinearProgressDash, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinearProgressTrack, {})),
+			(!isDeterminate || isBuffer) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinearProgressBarSecondary, {
+				buffer: isBuffer,
+				easing,
+				style: bufferBarStyle
+			}),
+			isSpinning ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(LinearProgressTraveler, {
+				easing,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinearProgressSegment, { style: { width: `${valuePercent}%` } }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinearProgressSegment, { style: {
+					width: `${valuePercent}%`,
+					left: "-100%"
+				} })]
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinearProgressBar, {
+				variant,
+				easing,
+				style: barStyle
+			})
+		]
+	});
+}
+//#endregion
+exports.LinearProgress = LinearProgress;

package/dist/LinearProgress.d.cts

@@ -0,0 +1,36 @@
+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/LinearProgress/LinearProgress.d.ts
+type LinearProgressVariant = 'indeterminate' | 'determinate' | 'query';
+type LinearProgressColor = ButtonColor | 'inherit';
+type LinearProgressEasing = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out';
+interface LinearProgressProps extends HTMLAttributes<HTMLSpanElement>, Omit<index_d_exports.SpaceProps<Theme>, keyof index_d_exports.PaddingProps>, index_d_exports.LayoutProps<Theme> {
+  /** Visual variant — looping animation, value-driven bar, or reversed loop. Default: `'indeterminate'`. */
+  variant?: LinearProgressVariant;
+  /** Bar color — resolves to `theme.palette[color].main`; `'inherit'` uses `currentColor`. Default: 'primary', overridable via `theme.defaults.color`. */
+  color?: LinearProgressColor;
+  /** Bar height. Number → px; string → raw CSS unit (e.g. `'0.5rem'`). Default: `4`. */
+  thickness?: number | string;
+  /** Progress value for the `'determinate'` variant. Clamped between `min` and `max`. */
+  value?: number;
+  /** Renders a buffer bar driven by `valueBuffer` behind a `'determinate'` bar, with a dotted leading edge. */
+  buffer?: boolean;
+  /** Buffer value when `buffer` is set. Clamped between `min` and `max`. */
+  valueBuffer?: number;
+  /** Minimum value for `'determinate'`. Default: `0`. */
+  min?: number;
+  /** Maximum value for `'determinate'`. Default: `100`. */
+  max?: number;
+  /** Sends the value-length segment travelling along a `'determinate'` track, wrapping past the end back to the beginning. */
+  spinning?: boolean;
+  /** Timing function for the value transition and the `spinning` glint. Default: `'linear'`. */
+  easing?: LinearProgressEasing;
+  /** Renders the faint track behind the bars (dotted edge when `buffer` is set). Default: `true`. */
+  showTrack?: boolean;
+  /** Rounds the bar's corners into a pill shape. Default: `false`. */
+  round?: boolean;
+}
+declare function LinearProgress({ variant, color, thickness, value, buffer, valueBuffer, min, max, spinning, easing, showTrack, round, ...rest }: Readonly<LinearProgressProps>): import("react").JSX.Element;
+//#endregion
+export { LinearProgress, LinearProgressColor, LinearProgressEasing, LinearProgressProps, LinearProgressVariant };

package/dist/LinearProgress.d.mts

@@ -0,0 +1,36 @@
+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/LinearProgress/LinearProgress.d.ts
+type LinearProgressVariant = 'indeterminate' | 'determinate' | 'query';
+type LinearProgressColor = ButtonColor | 'inherit';
+type LinearProgressEasing = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out';
+interface LinearProgressProps extends HTMLAttributes<HTMLSpanElement>, Omit<index_d_exports.SpaceProps<Theme>, keyof index_d_exports.PaddingProps>, index_d_exports.LayoutProps<Theme> {
+  /** Visual variant — looping animation, value-driven bar, or reversed loop. Default: `'indeterminate'`. */
+  variant?: LinearProgressVariant;
+  /** Bar color — resolves to `theme.palette[color].main`; `'inherit'` uses `currentColor`. Default: 'primary', overridable via `theme.defaults.color`. */
+  color?: LinearProgressColor;
+  /** Bar height. Number → px; string → raw CSS unit (e.g. `'0.5rem'`). Default: `4`. */
+  thickness?: number | string;
+  /** Progress value for the `'determinate'` variant. Clamped between `min` and `max`. */
+  value?: number;
+  /** Renders a buffer bar driven by `valueBuffer` behind a `'determinate'` bar, with a dotted leading edge. */
+  buffer?: boolean;
+  /** Buffer value when `buffer` is set. Clamped between `min` and `max`. */
+  valueBuffer?: number;
+  /** Minimum value for `'determinate'`. Default: `0`. */
+  min?: number;
+  /** Maximum value for `'determinate'`. Default: `100`. */
+  max?: number;
+  /** Sends the value-length segment travelling along a `'determinate'` track, wrapping past the end back to the beginning. */
+  spinning?: boolean;
+  /** Timing function for the value transition and the `spinning` glint. Default: `'linear'`. */
+  easing?: LinearProgressEasing;
+  /** Renders the faint track behind the bars (dotted edge when `buffer` is set). Default: `true`. */
+  showTrack?: boolean;
+  /** Rounds the bar's corners into a pill shape. Default: `false`. */
+  round?: boolean;
+}
+declare function LinearProgress({ variant, color, thickness, value, buffer, valueBuffer, min, max, spinning, easing, showTrack, round, ...rest }: Readonly<LinearProgressProps>): import("react").JSX.Element;
+//#endregion
+export { LinearProgress, LinearProgressColor, LinearProgressEasing, LinearProgressProps, LinearProgressVariant };