@soroush.tech/design-system 0.1.0

package/dist/FormHelperText.d.mts

@@ -0,0 +1,16 @@
+import { a as TypographyProps } from "./index-DE5PtzPn.mjs";
+import { ReactNode } from "react";
+//#region src/FormHelperText/FormHelperText.d.ts
+interface FormHelperTextProps extends TypographyProps {
+  children: ReactNode;
+  /** Renders in the error color and announces via `role="alert"`. Falls back to the FormControl `error` value. */
+  error?: boolean;
+}
+/**
+ * Helper or error text for a field. Reads its id and error state from
+ * FormControl context and registers its presence so the control can point
+ * `aria-describedby` at it only while it is rendered.
+ */
+declare function FormHelperText({ children, error, id, role, color, ...rest }: Readonly<FormHelperTextProps>): import("react").JSX.Element;
+//#endregion
+export { FormHelperText, FormHelperTextProps };

package/dist/FormHelperText.mjs

@@ -0,0 +1,39 @@
+import { d as styled } from "./src-DcNT2aIK.mjs";
+import { Typography } from "./Typography.mjs";
+import { t as FormControlContext } from "./FormControlContext-CyxdOxdN.mjs";
+import { t as FormContext } from "./FormContext-_G3sxJyQ.mjs";
+import { useContext, useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/FormHelperText/FormHelperText.tsx
+const FormHelperTextRoot = styled(Typography, {
+	name: "FormHelperText",
+	label: "FormHelperText"
+})();
+/**
+* Helper or error text for a field. Reads its id and error state from
+* FormControl context and registers its presence so the control can point
+* `aria-describedby` at it only while it is rendered.
+*/
+function FormHelperText({ children, error, id, role, color, ...rest }) {
+	const control = useContext(FormControlContext);
+	const form = useContext(FormContext);
+	const isError = error ?? control?.error ?? false;
+	const resolvedId = id ?? control?.helperId;
+	const resolvedColor = isError ? "error" : color ?? control?.textColor ?? form.textColor ?? "secondary";
+	const setHasHelperText = control?.setHasHelperText;
+	useEffect(() => {
+		setHasHelperText?.(true);
+		return () => setHasHelperText?.(false);
+	}, [setHasHelperText]);
+	return /* @__PURE__ */ jsx(FormHelperTextRoot, {
+		as: "p",
+		id: resolvedId,
+		variant: "caption",
+		role: isError ? "alert" : role,
+		...rest,
+		color: resolvedColor,
+		children
+	});
+}
+//#endregion
+export { FormHelperText };

package/dist/FormLabel.cjs

@@ -0,0 +1,34 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-BiocWFSR.cjs");
+const require_Typography = require("./Typography.cjs");
+const require_FormControlContext = require("./FormControlContext-aeKTjRKY.cjs");
+const require_FormContext = require("./FormContext-CRmRgDgu.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/FormLabel/FormLabel.tsx
+const FormLabelRoot = require_src.styled(require_Typography.Typography, {
+	name: "FormLabel",
+	label: "FormLabel"
+})();
+/**
+* Renders a `<label>` linked to the control via `htmlFor`, reading the id and
+* `required` flag from FormControl context. All Typography props pass through,
+* so callers can restyle freely while keeping the wiring automatic.
+*/
+function FormLabel({ children, required, htmlFor, color, ...rest }) {
+	const control = (0, react.useContext)(require_FormControlContext.FormControlContext);
+	const form = (0, react.useContext)(require_FormContext.FormContext);
+	const isRequired = required ?? control?.required ?? false;
+	const resolvedFor = htmlFor ?? control?.id;
+	const resolvedColor = color ?? control?.textColor ?? form.textColor;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(FormLabelRoot, {
+		as: "label",
+		htmlFor: resolvedFor,
+		variant: "body2",
+		...rest,
+		color: resolvedColor,
+		children: [children, isRequired ? " *" : ""]
+	});
+}
+//#endregion
+exports.FormLabel = FormLabel;

package/dist/FormLabel.d.cts

@@ -0,0 +1,2 @@
+import { n as FormLabelProps, t as FormLabel } from "./index-Dg8-CPOO.cjs";
+export { FormLabel, FormLabelProps };

package/dist/FormLabel.d.mts

@@ -0,0 +1,2 @@
+import { n as FormLabelProps, t as FormLabel } from "./index-Cv_UOfYx.mjs";
+export { FormLabel, FormLabelProps };

package/dist/FormLabel.mjs

@@ -0,0 +1,33 @@
+import { d as styled } from "./src-DcNT2aIK.mjs";
+import { Typography } from "./Typography.mjs";
+import { t as FormControlContext } from "./FormControlContext-CyxdOxdN.mjs";
+import { t as FormContext } from "./FormContext-_G3sxJyQ.mjs";
+import { useContext } from "react";
+import { jsxs } from "react/jsx-runtime";
+//#region src/FormLabel/FormLabel.tsx
+const FormLabelRoot = styled(Typography, {
+	name: "FormLabel",
+	label: "FormLabel"
+})();
+/**
+* Renders a `<label>` linked to the control via `htmlFor`, reading the id and
+* `required` flag from FormControl context. All Typography props pass through,
+* so callers can restyle freely while keeping the wiring automatic.
+*/
+function FormLabel({ children, required, htmlFor, color, ...rest }) {
+	const control = useContext(FormControlContext);
+	const form = useContext(FormContext);
+	const isRequired = required ?? control?.required ?? false;
+	const resolvedFor = htmlFor ?? control?.id;
+	const resolvedColor = color ?? control?.textColor ?? form.textColor;
+	return /* @__PURE__ */ jsxs(FormLabelRoot, {
+		as: "label",
+		htmlFor: resolvedFor,
+		variant: "body2",
+		...rest,
+		color: resolvedColor,
+		children: [children, isRequired ? " *" : ""]
+	});
+}
+//#endregion
+export { FormLabel };

package/dist/Grid.cjs

@@ -0,0 +1,37 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-BiocWFSR.cjs");
+const require_View = require("./View.cjs");
+let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
+//#region src/Grid/Grid.tsx
+const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+	..._soroush_tech_styled_system_should_forward_prop.props,
+	"gap",
+	"columnGap",
+	"rowGap"
+]);
+const gapSystem = (0, require_src.src_exports.system)({
+	gap: {
+		property: "gap",
+		scale: "space"
+	},
+	columnGap: {
+		property: "columnGap",
+		scale: "space"
+	},
+	rowGap: {
+		property: "rowGap",
+		scale: "space"
+	}
+});
+const Grid = require_src.styled(require_View.View, {
+	name: "Grid",
+	label: "grid",
+	shouldForwardProp,
+	systemProps: [
+		gapSystem,
+		require_src.src_exports.grid,
+		require_src.src_exports.flexbox
+	]
+})({ display: "grid" });
+//#endregion
+exports.Grid = Grid;

package/dist/Grid.d.cts

@@ -0,0 +1,21 @@
+import { l as index_d_exports, o as Theme } from "./index-Bihpwn75.cjs";
+import { s as ViewProps } from "./index-FwTocqhP.cjs";
+//#region src/Grid/Grid.d.ts
+/** Valid values for the gap / columnGap / rowGap props — derived from theme.space keys. */
+type GapToken = keyof Theme['space'];
+interface GridProps extends ViewProps, index_d_exports.GridProps<Theme>, index_d_exports.FlexboxProps<Theme> {
+  /** Resolves against theme.space — maps to CSS gap. Accepts responsive arrays. */
+  gap?: index_d_exports.ResponsiveValue<GapToken>;
+  /** Resolves against theme.space — maps to CSS column-gap. Accepts responsive arrays. */
+  columnGap?: index_d_exports.ResponsiveValue<GapToken>;
+  /** Resolves against theme.space — maps to CSS row-gap. Accepts responsive arrays. */
+  rowGap?: index_d_exports.ResponsiveValue<GapToken>;
+}
+declare const Grid: import("@emotion/styled").StyledComponent<{
+  theme?: Theme;
+  as?: React.ElementType;
+} & ViewProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+  theme?: Theme;
+} & GridProps, {}, {}>;
+//#endregion
+export { GapToken, Grid, GridProps };

package/dist/Grid.d.mts

@@ -0,0 +1,21 @@
+import { l as index_d_exports, o as Theme } from "./index-Dm9HfgV6.mjs";
+import { s as ViewProps } from "./index-pX7tBQdJ.mjs";
+//#region src/Grid/Grid.d.ts
+/** Valid values for the gap / columnGap / rowGap props — derived from theme.space keys. */
+type GapToken = keyof Theme['space'];
+interface GridProps extends ViewProps, index_d_exports.GridProps<Theme>, index_d_exports.FlexboxProps<Theme> {
+  /** Resolves against theme.space — maps to CSS gap. Accepts responsive arrays. */
+  gap?: index_d_exports.ResponsiveValue<GapToken>;
+  /** Resolves against theme.space — maps to CSS column-gap. Accepts responsive arrays. */
+  columnGap?: index_d_exports.ResponsiveValue<GapToken>;
+  /** Resolves against theme.space — maps to CSS row-gap. Accepts responsive arrays. */
+  rowGap?: index_d_exports.ResponsiveValue<GapToken>;
+}
+declare const Grid: import("@emotion/styled").StyledComponent<{
+  theme?: Theme;
+  as?: React.ElementType;
+} & ViewProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+  theme?: Theme;
+} & GridProps, {}, {}>;
+//#endregion
+export { GapToken, Grid, GridProps };

package/dist/Grid.mjs

@@ -0,0 +1,32 @@
+import { a as createShouldForwardProp, c as props, d as styled, l as src_exports } from "./src-DcNT2aIK.mjs";
+import { View } from "./View.mjs";
+const Grid = styled(View, {
+	name: "Grid",
+	label: "grid",
+	shouldForwardProp: createShouldForwardProp([
+		...props,
+		"gap",
+		"columnGap",
+		"rowGap"
+	]),
+	systemProps: [
+		(0, src_exports.system)({
+			gap: {
+				property: "gap",
+				scale: "space"
+			},
+			columnGap: {
+				property: "columnGap",
+				scale: "space"
+			},
+			rowGap: {
+				property: "rowGap",
+				scale: "space"
+			}
+		}),
+		src_exports.grid,
+		src_exports.flexbox
+	]
+})({ display: "grid" });
+//#endregion
+export { Grid };