@soroush.tech/design-system 2.0.0-rc.1 → 2.0.0-rc.3

package/dist/Rating.cjs

@@ -0,0 +1,373 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-DU81aGy9.cjs");
+const require_utils = require("./utils.cjs");
+const require_theme = require("./theme-BxXuXRgQ.cjs");
+const require_Icon = require("./Icon-D-EWsBVg.cjs");
+const require_FormControlContext = require("./FormControlContext-74gvPGFk.cjs");
+const require_FormControl = require("./FormControl.cjs");
+const require_isRtl = require("./isRtl-DTkYHRPo.cjs");
+const require_useControlled = require("./useControlled-C666KpQ0.cjs");
+const require_precision = require("./precision-B58cTPB2.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/Rating/utils/precision.ts
+/** The value under the pointer: along the width, rounded to a step, between one step and `max`. */
+function getHoverValue({ offset, width, max, precision }) {
+	const raw = max * (offset / width) + precision / 2;
+	return require_utils.clamp(require_precision.roundToPrecision(raw, precision), precision, max);
+}
+//#endregion
+//#region src/Rating/hooks/useRating.ts
+const NONE = -1;
+const parseRating = (raw) => raw === "" ? null : Number.parseFloat(raw);
+const getDisplayValue = (focus, rounded) => focus === NONE ? rounded : focus;
+/**
+* A rating's state: the rating itself (controlled or not, rounded to its precision), what the
+* pointer and the focus are on, and the handlers that move them. The pointer takes priority over
+* the keys when both change at once, and pressing the chosen item again clears it.
+*/
+function useRating({ value: valueProp, defaultValue, precision, max, rootRef, onChange, onChangeActive }) {
+	const [value, setValue] = require_useControlled.useControlled({
+		controlled: valueProp,
+		default: defaultValue ?? null
+	});
+	const rounded = require_precision.roundToPrecision(value, precision);
+	const [{ hover, focus }, setActive] = (0, react.useState)({
+		hover: NONE,
+		focus: NONE
+	});
+	const handleMouseMove = (event) => {
+		const { left, right, width } = rootRef.current.getBoundingClientRect();
+		if (width === 0) return;
+		const next = getHoverValue({
+			offset: require_isRtl.isRtl(rootRef.current) ? right - event.clientX : event.clientX - left,
+			width,
+			max,
+			precision
+		});
+		setActive({
+			hover: next,
+			focus: next
+		});
+		if (hover !== next) onChangeActive?.(event, next);
+	};
+	const handleMouseLeave = (event) => {
+		setActive({
+			hover: NONE,
+			focus: NONE
+		});
+		if (hover !== NONE) onChangeActive?.(event, NONE);
+	};
+	const handleChange = (event) => {
+		const next = hover === NONE ? parseRating(event.currentTarget.value) : hover;
+		setValue(next);
+		onChange?.(event, next);
+	};
+	const handleClear = (event) => {
+		if (event.clientX === 0 && event.clientY === 0) return;
+		setActive({
+			hover: NONE,
+			focus: NONE
+		});
+		setValue(null);
+		if (Number.parseFloat(event.currentTarget.value) === rounded) onChange?.(event, null);
+	};
+	const handleFocus = (event) => {
+		const next = Number.parseFloat(event.currentTarget.value);
+		setActive((previous) => ({
+			hover: previous.hover,
+			focus: next
+		}));
+	};
+	const handleBlur = () => {
+		if (hover !== NONE) return;
+		setActive((previous) => ({
+			hover: previous.hover,
+			focus: NONE
+		}));
+	};
+	return {
+		rounded,
+		displayValue: getDisplayValue(focus, rounded),
+		isActive: hover !== NONE || focus !== NONE,
+		handleMouseMove,
+		handleMouseLeave,
+		handleChange,
+		handleClear,
+		handleFocus,
+		handleBlur
+	};
+}
+//#endregion
+//#region src/Rating/Rating.tsx
+const visuallyHidden = {
+	position: "absolute",
+	width: 1,
+	height: 1,
+	margin: -1,
+	padding: 0,
+	border: 0,
+	overflow: "hidden",
+	clip: "rect(0 0 0 0)",
+	whiteSpace: "nowrap"
+};
+const RatingRoot = require_src.styled("span", {
+	name: "Rating",
+	label: "Rating",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+		..._soroush_tech_styled_system_should_forward_prop.props,
+		"size",
+		"color",
+		"isDisabled",
+		"isReadOnly",
+		"isInField"
+	]),
+	systemProps: [require_src.src_exports.space]
+})(({ theme, size, isDisabled, isReadOnly, isInField }) => ({
+	display: isInField ? "flex" : "inline-flex",
+	position: "relative",
+	width: "min-content",
+	fontSize: theme.icon[size],
+	lineHeight: 1,
+	cursor: isReadOnly ? "default" : "pointer",
+	...isDisabled && {
+		opacity: .5,
+		cursor: "not-allowed"
+	},
+	...(isDisabled || isReadOnly) && { pointerEvents: "none" }
+}));
+const focusRing = (theme, color) => {
+	const main = (0, require_src.src_exports.get)(theme, `palette.${color}.main`);
+	return {
+		outline: `${theme.borderWidths.base} solid ${main}`,
+		outlineOffset: theme.borderWidths.thin
+	};
+};
+const RatingItem = require_src.styled("label", {
+	name: "Rating",
+	slot: "item",
+	label: "RatingItem",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)(["color"])
+})(({ theme, color }) => ({
+	display: "block",
+	position: "relative",
+	cursor: "inherit",
+	"&:has(input:focus-visible)": focusRing(theme, color)
+}));
+const RatingEmptyLabel = require_src.styled("label", {
+	name: "Rating",
+	slot: "emptyLabel",
+	label: "RatingEmptyLabel",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)(["color"])
+})(({ theme, color }) => ({
+	position: "absolute",
+	inset: 0,
+	pointerEvents: "none",
+	"&:has(input:focus-visible)": focusRing(theme, color)
+}));
+const RatingInput = require_src.styled("input", {
+	name: "Rating",
+	slot: "input",
+	label: "RatingInput"
+})(visuallyHidden);
+const RatingText = require_src.styled("span", {
+	name: "Rating",
+	slot: "text",
+	label: "RatingText"
+})(visuallyHidden);
+const getIconColor = (theme, { color, isFilled, isError }) => {
+	if (isFilled) return (0, require_src.src_exports.get)(theme, `palette.${color}.main`);
+	if (isError) return (0, require_src.src_exports.get)(theme, "palette.error.main");
+	return (0, require_src.src_exports.get)(theme, "text.disabled");
+};
+const activeTransform = (isActive) => isActive ? "scale(1.2)" : "none";
+const RatingIcon = require_src.styled("span", {
+	name: "Rating",
+	slot: "icon",
+	label: "RatingIcon",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+		"color",
+		"isFilled",
+		"isActive",
+		"isError"
+	])
+})(({ theme, ...style }) => ({
+	display: "flex",
+	flexShrink: 0,
+	width: "max-content",
+	pointerEvents: "none",
+	color: getIconColor(theme, style),
+	transition: "transform 0.2s",
+	transform: activeTransform(style.isActive),
+	"@media (prefers-reduced-motion: reduce)": { transition: "none" }
+}));
+const RatingDecimal = require_src.styled("span", {
+	name: "Rating",
+	slot: "decimal",
+	label: "RatingDecimal",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)(["isActive"])
+})(({ isActive }) => ({
+	position: "relative",
+	display: "flex",
+	transition: "transform 0.2s",
+	transform: activeTransform(isActive),
+	"@media (prefers-reduced-motion: reduce)": { transition: "none" }
+}));
+function Item({ itemValue, isFilled, isActive, isChecked, isInteractive, label, labelStyle, icon, emptyIcon, name, required, disabled, color, isError, state }) {
+	const glyph = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RatingIcon, {
+		color,
+		isFilled,
+		isActive,
+		isError,
+		children: isFilled ? icon : emptyIcon
+	});
+	if (!isInteractive) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RatingItem, {
+		as: "span",
+		color,
+		style: labelStyle,
+		children: glyph
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RatingItem, {
+		color,
+		style: labelStyle,
+		children: [
+			glyph,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RatingText, { children: label }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RatingInput, {
+				type: "radio",
+				name,
+				value: itemValue,
+				checked: isChecked,
+				required,
+				disabled,
+				onChange: state.handleChange,
+				onClick: state.handleClear,
+				onFocus: state.handleFocus,
+				onBlur: state.handleBlur
+			})
+		]
+	});
+}
+/**
+* @description A rating: a row of icons the user sets - or, `readOnly`, shows. A group of visually
+* hidden native radio inputs, so keys (Tab to the rating, the arrows to change it), assistive
+* technology and forms work as the platform's; hovering previews the value, and pressing the
+* chosen item clears it. In a `FormControl` it takes the field's size, color, error and
+* disabled state, and its `FormLabel` names it.
+*/
+function Rating({ value, defaultValue, onChange, onChangeActive, max: maxProp, precision: precisionProp, highlightSelectedOnly: highlightSelectedOnlyProp, icon: iconProp, emptyIcon: emptyIconProp, getLabelText = String, emptyLabelText, readOnly = false, size: sizeProp, color: colorProp, disabled: disabledProp, required: requiredProp, error: errorProp, name: nameProp, id: idProp, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-testid": dataTestid, ...spaceProps }) {
+	const dp = require_theme.useDefaultProps("Rating");
+	const isInField = (0, react.useContext)(require_FormControlContext.FormControlContext) !== null;
+	const fc = require_FormControl.useFormControl({
+		id: idProp,
+		error: errorProp,
+		disabled: disabledProp,
+		required: requiredProp,
+		size: sizeProp ?? dp.size,
+		color: colorProp ?? dp.color
+	});
+	const color = fc.color ?? "warning";
+	const max = maxProp ?? dp.max ?? 5;
+	const precision = precisionProp ?? dp.precision ?? 1;
+	const highlightSelectedOnly = highlightSelectedOnlyProp ?? dp.highlightSelectedOnly ?? false;
+	const icon = iconProp ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+		name: "star",
+		size: "1em",
+		color: "inherit"
+	});
+	const emptyIcon = emptyIconProp ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+		name: "star_border",
+		size: "1em",
+		color: "inherit"
+	});
+	const generatedName = (0, react.useId)();
+	const name = nameProp ?? generatedName;
+	const isInput = !readOnly;
+	const rootRef = (0, react.useRef)(null);
+	const state = useRating({
+		value,
+		defaultValue,
+		precision,
+		max,
+		rootRef,
+		onChange,
+		onChangeActive
+	});
+	const shown = state.displayValue ?? 0;
+	const renderItem = (itemValue, labelStyle, isActive = false) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Item, {
+		itemValue,
+		isFilled: highlightSelectedOnly ? itemValue === shown : itemValue <= shown,
+		isActive,
+		isChecked: itemValue === state.rounded,
+		isInteractive: isInput,
+		label: getLabelText(itemValue),
+		labelStyle,
+		icon,
+		emptyIcon,
+		name,
+		required: fc.required,
+		disabled: fc.disabled,
+		color,
+		isError: fc.error,
+		state
+	}, itemValue);
+	const items = Array.from({ length: max }, (_, index) => {
+		const itemValue = index + 1;
+		const isActive = state.isActive && itemValue === Math.ceil(shown);
+		if (precision >= 1) return renderItem(itemValue, void 0, isActive);
+		const steps = Math.round(1 / precision);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RatingDecimal, {
+			isActive,
+			children: Array.from({ length: steps }, (__, step) => {
+				const stepValue = require_precision.roundToPrecision(itemValue - 1 + (step + 1) * precision, precision);
+				const isLast = step === steps - 1;
+				const width = stepValue === state.displayValue ? `${(step + 1) * precision * 100}%` : "0%";
+				return renderItem(stepValue, isLast ? void 0 : {
+					width,
+					overflow: "hidden",
+					position: "absolute"
+				});
+			})
+		}, itemValue);
+	});
+	const displayLabel = isInput ? void 0 : getLabelText(state.rounded ?? 0);
+	const groupProps = isInput ? {
+		role: "radiogroup",
+		"aria-labelledby": ariaLabelledby ?? fc.labelId,
+		"aria-describedby": ariaDescribedby ?? fc["aria-describedby"],
+		"aria-required": fc.required || void 0,
+		"aria-invalid": fc.error || void 0,
+		onMouseMove: state.handleMouseMove,
+		onMouseLeave: state.handleMouseLeave
+	} : {
+		role: "img",
+		"aria-labelledby": ariaLabelledby
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RatingRoot, {
+		ref: rootRef,
+		id: fc.id,
+		size: fc.size,
+		color,
+		isDisabled: fc.disabled,
+		isReadOnly: readOnly,
+		isInField,
+		className,
+		"data-testid": dataTestid,
+		"aria-label": ariaLabel ?? displayLabel,
+		...groupProps,
+		...spaceProps,
+		children: [items, isInput && !fc.disabled && emptyLabelText !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RatingEmptyLabel, {
+			color,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RatingInput, {
+				type: "radio",
+				name,
+				value: "",
+				checked: state.rounded === null,
+				onChange: state.handleChange
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RatingText, { children: emptyLabelText })]
+		})]
+	});
+}
+//#endregion
+exports.Rating = Rating;

package/dist/Rating.d.cts

@@ -0,0 +1,57 @@
+import { W as Theme } from "./index-DJ0f69wh.cjs";
+import { MouseEvent, ReactNode, SyntheticEvent } from "react";
+import { SpaceProps } from "@soroush.tech/styled-system";
+//#region src/Rating/Rating.d.ts
+interface RatingProps extends SpaceProps<Theme> {
+  /** The rating - `null` for none. Controlled with `onChange`. */
+  value?: number | null;
+  /** The rating at first, when uncontrolled. */
+  defaultValue?: number | null;
+  /** Fired when the rating changes - `null` when it is cleared. */
+  onChange?: (event: SyntheticEvent<HTMLInputElement>, value: number | null) => void;
+  /** Fired as the hovered value changes - `-1` when the pointer leaves. */
+  onChangeActive?: (event: MouseEvent<HTMLElement>, value: number) => void;
+  /** How many items. Default: `5`. */
+  max?: number;
+  /** The least step - `0.5` for halves. Default: `1`. */
+  precision?: number;
+  /** Only the chosen item is filled, not every one up to it. Default: `false`. */
+  highlightSelectedOnly?: boolean;
+  /** The filled item. Default: the `star` icon. */
+  icon?: ReactNode;
+  /** The empty item. Default: the `star_border` icon. */
+  emptyIcon?: ReactNode;
+  /** The accessible name of an item (and of a read-only rating). Default: its number. */
+  getLabelText?: (value: number) => string;
+  /** Names the "no rating" radio, which clears the rating from the keys - none is drawn without it. */
+  emptyLabelText?: string;
+  /** A display: `role="img"` named by `getLabelText`, not focusable. Default: `false`. */
+  readOnly?: boolean;
+  /** Resolves against `theme.sizes`. Default: its `FormControl`'s, else `'md'`. */
+  size?: keyof Theme['sizes'];
+  /** The filled items' color - resolves to `theme.palette`. Default: its `FormControl`'s, else `'warning'`. */
+  color?: keyof Theme['palette'];
+  disabled?: boolean;
+  required?: boolean;
+  /** The empty items take the error color. */
+  error?: boolean;
+  /** Prefixes the radios' names, and submits the rating in a form. Default: generated. */
+  name?: string;
+  /** On the rating's group, which a `FormLabel` names it by. Default: its `FormControl`'s. */
+  id?: string;
+  className?: string;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  'aria-describedby'?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description A rating: a row of icons the user sets - or, `readOnly`, shows. A group of visually
+ * hidden native radio inputs, so keys (Tab to the rating, the arrows to change it), assistive
+ * technology and forms work as the platform's; hovering previews the value, and pressing the
+ * chosen item clears it. In a `FormControl` it takes the field's size, color, error and
+ * disabled state, and its `FormLabel` names it.
+ */
+declare function Rating({ value, defaultValue, onChange, onChangeActive, max: maxProp, precision: precisionProp, highlightSelectedOnly: highlightSelectedOnlyProp, icon: iconProp, emptyIcon: emptyIconProp, getLabelText, emptyLabelText, readOnly, size: sizeProp, color: colorProp, disabled: disabledProp, required: requiredProp, error: errorProp, name: nameProp, id: idProp, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'data-testid': dataTestid, ...spaceProps }: Readonly<RatingProps>): import("react").JSX.Element;
+//#endregion
+export { Rating, RatingProps };

package/dist/Rating.d.mts

@@ -0,0 +1,57 @@
+import { W as Theme } from "./index-CJhK7JND.mjs";
+import { SpaceProps } from "@soroush.tech/styled-system";
+import { MouseEvent, ReactNode, SyntheticEvent } from "react";
+//#region src/Rating/Rating.d.ts
+interface RatingProps extends SpaceProps<Theme> {
+  /** The rating - `null` for none. Controlled with `onChange`. */
+  value?: number | null;
+  /** The rating at first, when uncontrolled. */
+  defaultValue?: number | null;
+  /** Fired when the rating changes - `null` when it is cleared. */
+  onChange?: (event: SyntheticEvent<HTMLInputElement>, value: number | null) => void;
+  /** Fired as the hovered value changes - `-1` when the pointer leaves. */
+  onChangeActive?: (event: MouseEvent<HTMLElement>, value: number) => void;
+  /** How many items. Default: `5`. */
+  max?: number;
+  /** The least step - `0.5` for halves. Default: `1`. */
+  precision?: number;
+  /** Only the chosen item is filled, not every one up to it. Default: `false`. */
+  highlightSelectedOnly?: boolean;
+  /** The filled item. Default: the `star` icon. */
+  icon?: ReactNode;
+  /** The empty item. Default: the `star_border` icon. */
+  emptyIcon?: ReactNode;
+  /** The accessible name of an item (and of a read-only rating). Default: its number. */
+  getLabelText?: (value: number) => string;
+  /** Names the "no rating" radio, which clears the rating from the keys - none is drawn without it. */
+  emptyLabelText?: string;
+  /** A display: `role="img"` named by `getLabelText`, not focusable. Default: `false`. */
+  readOnly?: boolean;
+  /** Resolves against `theme.sizes`. Default: its `FormControl`'s, else `'md'`. */
+  size?: keyof Theme['sizes'];
+  /** The filled items' color - resolves to `theme.palette`. Default: its `FormControl`'s, else `'warning'`. */
+  color?: keyof Theme['palette'];
+  disabled?: boolean;
+  required?: boolean;
+  /** The empty items take the error color. */
+  error?: boolean;
+  /** Prefixes the radios' names, and submits the rating in a form. Default: generated. */
+  name?: string;
+  /** On the rating's group, which a `FormLabel` names it by. Default: its `FormControl`'s. */
+  id?: string;
+  className?: string;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  'aria-describedby'?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description A rating: a row of icons the user sets - or, `readOnly`, shows. A group of visually
+ * hidden native radio inputs, so keys (Tab to the rating, the arrows to change it), assistive
+ * technology and forms work as the platform's; hovering previews the value, and pressing the
+ * chosen item clears it. In a `FormControl` it takes the field's size, color, error and
+ * disabled state, and its `FormLabel` names it.
+ */
+declare function Rating({ value, defaultValue, onChange, onChangeActive, max: maxProp, precision: precisionProp, highlightSelectedOnly: highlightSelectedOnlyProp, icon: iconProp, emptyIcon: emptyIconProp, getLabelText, emptyLabelText, readOnly, size: sizeProp, color: colorProp, disabled: disabledProp, required: requiredProp, error: errorProp, name: nameProp, id: idProp, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'data-testid': dataTestid, ...spaceProps }: Readonly<RatingProps>): import("react").JSX.Element;
+//#endregion
+export { Rating, RatingProps };