@soroush.tech/design-system 0.1.0

package/dist/Radio.cjs

@@ -0,0 +1,143 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-BiocWFSR.cjs");
+const require_themeDefault = require("./themeDefault-B-QjpGEO.cjs");
+const require_FormControl = require("./FormControl.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/Radio/Radio.tsx
+const UncheckedIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+	viewBox: "0 0 18 18",
+	width: "1em",
+	height: "1em",
+	fill: "none",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+		cx: "9",
+		cy: "9",
+		r: "7.5",
+		stroke: "currentColor",
+		strokeWidth: "1.5"
+	})
+});
+const CheckedIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+	viewBox: "0 0 18 18",
+	width: "1em",
+	height: "1em",
+	"aria-hidden": "true",
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+		cx: "9",
+		cy: "9",
+		r: "9",
+		fill: "currentColor"
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+		cx: "9",
+		cy: "9",
+		r: "4",
+		fill: "white"
+	})]
+});
+const HiddenInput = require_src.styled("input", {
+	name: "Radio",
+	slot: "input",
+	label: "RadioInput"
+})({
+	position: "absolute",
+	width: 0,
+	height: 0,
+	opacity: 0,
+	margin: 0,
+	padding: 0,
+	pointerEvents: "none"
+});
+const RadioIconWrapper = require_src.styled("span", {
+	name: "Radio",
+	slot: "icon",
+	label: "RadioIcon",
+	shouldForwardProp: (prop) => prop !== "size"
+})(({ theme, size = require_themeDefault.themeDefault(theme, "size", "md") }) => ({
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	flexShrink: 0,
+	fontSize: theme.icon[size],
+	lineHeight: 0,
+	transition: "color 0.15s ease"
+}));
+const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+	..._soroush_tech_styled_system_should_forward_prop.props,
+	"color",
+	"size",
+	"disabled"
+]);
+const baseStyle = ({ disabled, theme }) => ({
+	display: "inline-flex",
+	alignItems: "center",
+	position: "relative",
+	cursor: disabled ? "not-allowed" : "pointer",
+	gap: (theme?.space)?.[1],
+	userSelect: "none",
+	...disabled && { opacity: .5 },
+	"& input:not(:checked) ~ span > .rb-checked": { display: "none" },
+	"& input:checked ~ span > .rb-unchecked": { display: "none" },
+	"&:has(input:focus-visible) > span:first-of-type": {
+		outline: `2px solid ${theme.palette.primary.main}`,
+		outlineOffset: "2px",
+		borderRadius: "50%"
+	}
+});
+const colorStyle = ({ theme, color = require_themeDefault.themeDefault(theme, "neutralColor", "default") }) => {
+	return { color: color === "default" ? theme.text.secondary : theme.palette[color].main };
+};
+const RadioRoot = require_src.styled("label", {
+	name: "Radio",
+	label: "Radio",
+	shouldForwardProp,
+	systemProps: [require_src.src_exports.space]
+})(baseStyle, colorStyle);
+function Radio({ checked, disabled: disabledProp, color: colorProp, size: sizeProp, icon, checkedIcon, onChange, id: idProp, required: requiredProp, name, value, inputProps, children, className, "data-testid": dataTestid, ...spaceProps }) {
+	const fc = require_FormControl.useFormControl({
+		id: idProp,
+		disabled: disabledProp,
+		required: requiredProp,
+		size: sizeProp
+	});
+	const { id, disabled, required, size } = fc;
+	const color = colorProp ?? fc.color;
+	const describedBy = inputProps?.["aria-describedby"] ?? fc["aria-describedby"];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RadioRoot, {
+		color,
+		size,
+		disabled,
+		className,
+		"data-testid": dataTestid,
+		...spaceProps,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HiddenInput, {
+				...inputProps,
+				type: "radio",
+				checked,
+				disabled,
+				id,
+				required,
+				name,
+				value,
+				onChange,
+				"aria-describedby": describedBy
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RadioIconWrapper, {
+				size,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "rb-unchecked",
+					children: icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UncheckedIcon, {})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "rb-checked",
+					children: checkedIcon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckedIcon, {})
+				})]
+			}),
+			children != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children })
+		]
+	});
+}
+//#endregion
+exports.Radio = Radio;

package/dist/Radio.d.cts

@@ -0,0 +1,38 @@
+import { l as index_d_exports, o as Theme } from "./index-Bihpwn75.cjs";
+import { l as PaletteColor } from "./themes-D81JYbqm.cjs";
+import { ChangeEvent, InputHTMLAttributes, ReactNode } from "react";
+//#region src/Radio/Radio.d.ts
+type RadioColor = PaletteColor;
+type RadioSize = keyof Theme['sizes'];
+interface RadioProps extends index_d_exports.SpaceProps<Theme> {
+  /** Controlled checked state. Must be paired with `onChange`. */
+  checked?: boolean;
+  /** Disables the radio. */
+  disabled?: boolean;
+  /** Stroke/fill color. `'default'` resolves to `theme.text.secondary`. Default: `'default'`. */
+  color?: RadioColor;
+  /** Icon size. Default: `'medium'`. */
+  size?: RadioSize;
+  /** Custom icon for the unchecked state. */
+  icon?: ReactNode;
+  /** Custom icon for the checked state. */
+  checkedIcon?: ReactNode;
+  /** Called when the user selects the radio. */
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+  /** Forwarded to the underlying `<input>` for label association. */
+  id?: string;
+  /** Marks the field as required in a form. */
+  required?: boolean;
+  /** Radio group name — required for native group exclusivity. */
+  name?: string;
+  /** Value submitted with the form when this radio is selected. */
+  value?: string | number | readonly string[];
+  /** Extra props spread onto the underlying `<input>` (e.g. `aria-label`, `tabIndex`). Explicit top-level props take priority. */
+  inputProps?: InputHTMLAttributes<HTMLInputElement>;
+  children?: ReactNode;
+  className?: string;
+  'data-testid'?: string;
+}
+declare function Radio({ checked, disabled: disabledProp, color: colorProp, size: sizeProp, icon, checkedIcon, onChange, id: idProp, required: requiredProp, name, value, inputProps, children, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<RadioProps>): import("react").JSX.Element;
+//#endregion
+export { Radio, RadioColor, RadioProps, RadioSize };

package/dist/Radio.d.mts

@@ -0,0 +1,38 @@
+import { l as index_d_exports, o as Theme } from "./index-Dm9HfgV6.mjs";
+import { l as PaletteColor } from "./themes-D1SAp3SL.mjs";
+import { ChangeEvent, InputHTMLAttributes, ReactNode } from "react";
+//#region src/Radio/Radio.d.ts
+type RadioColor = PaletteColor;
+type RadioSize = keyof Theme['sizes'];
+interface RadioProps extends index_d_exports.SpaceProps<Theme> {
+  /** Controlled checked state. Must be paired with `onChange`. */
+  checked?: boolean;
+  /** Disables the radio. */
+  disabled?: boolean;
+  /** Stroke/fill color. `'default'` resolves to `theme.text.secondary`. Default: `'default'`. */
+  color?: RadioColor;
+  /** Icon size. Default: `'medium'`. */
+  size?: RadioSize;
+  /** Custom icon for the unchecked state. */
+  icon?: ReactNode;
+  /** Custom icon for the checked state. */
+  checkedIcon?: ReactNode;
+  /** Called when the user selects the radio. */
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+  /** Forwarded to the underlying `<input>` for label association. */
+  id?: string;
+  /** Marks the field as required in a form. */
+  required?: boolean;
+  /** Radio group name — required for native group exclusivity. */
+  name?: string;
+  /** Value submitted with the form when this radio is selected. */
+  value?: string | number | readonly string[];
+  /** Extra props spread onto the underlying `<input>` (e.g. `aria-label`, `tabIndex`). Explicit top-level props take priority. */
+  inputProps?: InputHTMLAttributes<HTMLInputElement>;
+  children?: ReactNode;
+  className?: string;
+  'data-testid'?: string;
+}
+declare function Radio({ checked, disabled: disabledProp, color: colorProp, size: sizeProp, icon, checkedIcon, onChange, id: idProp, required: requiredProp, name, value, inputProps, children, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<RadioProps>): import("react").JSX.Element;
+//#endregion
+export { Radio, RadioColor, RadioProps, RadioSize };

package/dist/Radio.mjs

@@ -0,0 +1,141 @@
+import { a as createShouldForwardProp, c as props, d as styled, l as src_exports } from "./src-DcNT2aIK.mjs";
+import { t as themeDefault } from "./themeDefault-CjXaY3ok.mjs";
+import { useFormControl } from "./FormControl.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Radio/Radio.tsx
+const UncheckedIcon = () => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 18 18",
+	width: "1em",
+	height: "1em",
+	fill: "none",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("circle", {
+		cx: "9",
+		cy: "9",
+		r: "7.5",
+		stroke: "currentColor",
+		strokeWidth: "1.5"
+	})
+});
+const CheckedIcon = () => /* @__PURE__ */ jsxs("svg", {
+	viewBox: "0 0 18 18",
+	width: "1em",
+	height: "1em",
+	"aria-hidden": "true",
+	children: [/* @__PURE__ */ jsx("circle", {
+		cx: "9",
+		cy: "9",
+		r: "9",
+		fill: "currentColor"
+	}), /* @__PURE__ */ jsx("circle", {
+		cx: "9",
+		cy: "9",
+		r: "4",
+		fill: "white"
+	})]
+});
+const HiddenInput = styled("input", {
+	name: "Radio",
+	slot: "input",
+	label: "RadioInput"
+})({
+	position: "absolute",
+	width: 0,
+	height: 0,
+	opacity: 0,
+	margin: 0,
+	padding: 0,
+	pointerEvents: "none"
+});
+const RadioIconWrapper = styled("span", {
+	name: "Radio",
+	slot: "icon",
+	label: "RadioIcon",
+	shouldForwardProp: (prop) => prop !== "size"
+})(({ theme, size = themeDefault(theme, "size", "md") }) => ({
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	flexShrink: 0,
+	fontSize: theme.icon[size],
+	lineHeight: 0,
+	transition: "color 0.15s ease"
+}));
+const shouldForwardProp = createShouldForwardProp([
+	...props,
+	"color",
+	"size",
+	"disabled"
+]);
+const baseStyle = ({ disabled, theme }) => ({
+	display: "inline-flex",
+	alignItems: "center",
+	position: "relative",
+	cursor: disabled ? "not-allowed" : "pointer",
+	gap: (theme?.space)?.[1],
+	userSelect: "none",
+	...disabled && { opacity: .5 },
+	"& input:not(:checked) ~ span > .rb-checked": { display: "none" },
+	"& input:checked ~ span > .rb-unchecked": { display: "none" },
+	"&:has(input:focus-visible) > span:first-of-type": {
+		outline: `2px solid ${theme.palette.primary.main}`,
+		outlineOffset: "2px",
+		borderRadius: "50%"
+	}
+});
+const colorStyle = ({ theme, color = themeDefault(theme, "neutralColor", "default") }) => {
+	return { color: color === "default" ? theme.text.secondary : theme.palette[color].main };
+};
+const RadioRoot = styled("label", {
+	name: "Radio",
+	label: "Radio",
+	shouldForwardProp,
+	systemProps: [src_exports.space]
+})(baseStyle, colorStyle);
+function Radio({ checked, disabled: disabledProp, color: colorProp, size: sizeProp, icon, checkedIcon, onChange, id: idProp, required: requiredProp, name, value, inputProps, children, className, "data-testid": dataTestid, ...spaceProps }) {
+	const fc = useFormControl({
+		id: idProp,
+		disabled: disabledProp,
+		required: requiredProp,
+		size: sizeProp
+	});
+	const { id, disabled, required, size } = fc;
+	const color = colorProp ?? fc.color;
+	const describedBy = inputProps?.["aria-describedby"] ?? fc["aria-describedby"];
+	return /* @__PURE__ */ jsxs(RadioRoot, {
+		color,
+		size,
+		disabled,
+		className,
+		"data-testid": dataTestid,
+		...spaceProps,
+		children: [
+			/* @__PURE__ */ jsx(HiddenInput, {
+				...inputProps,
+				type: "radio",
+				checked,
+				disabled,
+				id,
+				required,
+				name,
+				value,
+				onChange,
+				"aria-describedby": describedBy
+			}),
+			/* @__PURE__ */ jsxs(RadioIconWrapper, {
+				size,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "rb-unchecked",
+					children: icon ?? /* @__PURE__ */ jsx(UncheckedIcon, {})
+				}), /* @__PURE__ */ jsx("span", {
+					className: "rb-checked",
+					children: checkedIcon ?? /* @__PURE__ */ jsx(CheckedIcon, {})
+				})]
+			}),
+			children != null && /* @__PURE__ */ jsx("span", { children })
+		]
+	});
+}
+//#endregion
+export { Radio };