jaci-ui 0.6.2 → 0.7.0

package/dist/components/stat/stat.cjs

@@ -0,0 +1,122 @@
+const require_cx = require("../../styled-system/css/cx.cjs");
+const require_stat_group = require("../../styled-system/recipes/stat-group.cjs");
+const require_stat = require("../../styled-system/recipes/stat.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/stat/stat.tsx
+const StatContext = (0, react.createContext)(null);
+function useStatContext() {
+	const context = (0, react.useContext)(StatContext);
+	if (!context) throw new Error("Stat parts must be rendered inside Stat.Root.");
+	return context;
+}
+const StatRoot = (0, react.forwardRef)(function StatRoot({ children, className, size = "md", tone = "neutral", ...props }, ref) {
+	const styles = require_stat.stat({
+		size,
+		tone
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatContext.Provider, {
+		value: {
+			size,
+			styles,
+			tone
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("article", {
+			...props,
+			ref,
+			className: require_cx.cx(styles.root, className),
+			"data-jaci-component": "stat",
+			"data-size": size,
+			"data-slot": "stat",
+			"data-tone": tone,
+			children
+		})
+	});
+});
+const StatIcon = (0, react.forwardRef)(function StatIcon({ className, ...props }, ref) {
+	const { styles } = useStatContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		...props,
+		ref,
+		className: require_cx.cx(styles.icon, className),
+		"data-slot": "stat-icon"
+	});
+});
+const StatLabel = (0, react.forwardRef)(function StatLabel({ className, ...props }, ref) {
+	const { styles } = useStatContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		...props,
+		ref,
+		className: require_cx.cx(styles.label, className),
+		"data-slot": "stat-label"
+	});
+});
+const StatValue = (0, react.forwardRef)(function StatValue({ className, ...props }, ref) {
+	const { styles } = useStatContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
+		...props,
+		ref,
+		className: require_cx.cx(styles.value, className),
+		"data-slot": "stat-value"
+	});
+});
+const StatDescription = (0, react.forwardRef)(function StatDescription({ className, ...props }, ref) {
+	const { styles } = useStatContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		...props,
+		ref,
+		className: require_cx.cx(styles.description, className),
+		"data-slot": "stat-description"
+	});
+});
+const StatTrend = (0, react.forwardRef)(function StatTrend({ className, direction = "neutral", ...props }, ref) {
+	const { styles } = useStatContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		...props,
+		ref,
+		className: require_cx.cx(styles.trend, require_stat.stat({ direction }).trend, className),
+		"data-direction": direction,
+		"data-slot": "stat-trend"
+	});
+});
+const Stat = {
+	Root: StatRoot,
+	Icon: StatIcon,
+	Label: StatLabel,
+	Value: StatValue,
+	Description: StatDescription,
+	Trend: StatTrend
+};
+const StatGroupRoot = (0, react.forwardRef)(function StatGroupRoot({ children, className, columns = 3, gap = "md", responsive = true, style, ...props }, ref) {
+	const columnValue = String(columns);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		ref,
+		className: require_cx.cx(require_stat_group.statGroup({
+			columns: columnValue,
+			gap
+		}), className),
+		"data-columns": columns,
+		"data-jaci-component": "stat-group",
+		"data-responsive": responsive || void 0,
+		"data-slot": "stat-group",
+		style: responsive ? style : {
+			gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+			...style
+		},
+		children
+	});
+});
+const StatGroup = { Root: StatGroupRoot };
+//#endregion
+exports.Stat = Stat;
+exports.StatDescription = StatDescription;
+exports.StatGroup = StatGroup;
+exports.StatGroupRoot = StatGroupRoot;
+exports.StatIcon = StatIcon;
+exports.StatLabel = StatLabel;
+exports.StatRoot = StatRoot;
+exports.StatTrend = StatTrend;
+exports.StatValue = StatValue;
+
+//# sourceMappingURL=stat.cjs.map

package/dist/components/stat/stat.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat.cjs","names":["stat","cx","statGroup"],"sources":["../../../src/components/stat/stat.tsx"],"sourcesContent":["import { createContext, forwardRef, useContext } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { stat, statGroup } from \"../../styled-system/recipes\";\n\nexport type StatTone = \"neutral\" | \"accent\" | \"success\" | \"warning\" | \"danger\";\nexport type StatSize = \"sm\" | \"md\" | \"lg\";\nexport type StatTrendDirection = \"up\" | \"down\" | \"neutral\";\n\ninterface StatContextValue {\n  size: StatSize;\n  styles: ReturnType<typeof stat>;\n  tone: StatTone;\n}\n\nconst StatContext = createContext<StatContextValue | null>(null);\n\nfunction useStatContext() {\n  const context = useContext(StatContext);\n  if (!context) {\n    throw new Error(\"Stat parts must be rendered inside Stat.Root.\");\n  }\n\n  return context;\n}\n\nexport interface StatRootProps extends ComponentPropsWithoutRef<\"article\"> {\n  size?: StatSize;\n  tone?: StatTone;\n}\n\nexport const StatRoot = forwardRef<HTMLElement, StatRootProps>(function StatRoot(\n  { children, className, size = \"md\", tone = \"neutral\", ...props },\n  ref,\n) {\n  const styles = stat({ size, tone });\n\n  return (\n    <StatContext.Provider value={{ size, styles, tone }}>\n      <article\n        {...props}\n        ref={ref}\n        className={cx(styles.root, className)}\n        data-jaci-component=\"stat\"\n        data-size={size}\n        data-slot=\"stat\"\n        data-tone={tone}\n      >\n        {children}\n      </article>\n    </StatContext.Provider>\n  );\n});\n\nexport type StatIconProps = ComponentPropsWithoutRef<\"span\">;\nexport const StatIcon = forwardRef<HTMLSpanElement, StatIconProps>(function StatIcon(\n  { className, ...props },\n  ref,\n) {\n  const { styles } = useStatContext();\n  return <span {...props} ref={ref} className={cx(styles.icon, className)} data-slot=\"stat-icon\" />;\n});\n\nexport type StatLabelProps = ComponentPropsWithoutRef<\"span\">;\nexport const StatLabel = forwardRef<HTMLSpanElement, StatLabelProps>(function StatLabel(\n  { className, ...props },\n  ref,\n) {\n  const { styles } = useStatContext();\n  return (\n    <span {...props} ref={ref} className={cx(styles.label, className)} data-slot=\"stat-label\" />\n  );\n});\n\nexport type StatValueProps = ComponentPropsWithoutRef<\"strong\">;\nexport const StatValue = forwardRef<HTMLElement, StatValueProps>(function StatValue(\n  { className, ...props },\n  ref,\n) {\n  const { styles } = useStatContext();\n  return (\n    <strong {...props} ref={ref} className={cx(styles.value, className)} data-slot=\"stat-value\" />\n  );\n});\n\nexport type StatDescriptionProps = ComponentPropsWithoutRef<\"p\">;\nexport const StatDescription = forwardRef<HTMLParagraphElement, StatDescriptionProps>(\n  function StatDescription({ className, ...props }, ref) {\n    const { styles } = useStatContext();\n    return (\n      <p\n        {...props}\n        ref={ref}\n        className={cx(styles.description, className)}\n        data-slot=\"stat-description\"\n      />\n    );\n  },\n);\n\nexport interface StatTrendProps extends ComponentPropsWithoutRef<\"span\"> {\n  direction?: StatTrendDirection;\n}\n\nexport const StatTrend = forwardRef<HTMLSpanElement, StatTrendProps>(function StatTrend(\n  { className, direction = \"neutral\", ...props },\n  ref,\n) {\n  const { styles } = useStatContext();\n  return (\n    <span\n      {...props}\n      ref={ref}\n      className={cx(styles.trend, stat({ direction }).trend, className)}\n      data-direction={direction}\n      data-slot=\"stat-trend\"\n    />\n  );\n});\n\nexport const Stat = {\n  Root: StatRoot,\n  Icon: StatIcon,\n  Label: StatLabel,\n  Value: StatValue,\n  Description: StatDescription,\n  Trend: StatTrend,\n};\n\nexport type StatGroupRootProps = ComponentPropsWithoutRef<\"div\"> & {\n  columns?: 1 | 2 | 3 | 4;\n  gap?: \"sm\" | \"md\" | \"lg\";\n  responsive?: boolean;\n};\n\nexport const StatGroupRoot = forwardRef<HTMLDivElement, StatGroupRootProps>(function StatGroupRoot(\n  { children, className, columns = 3, gap = \"md\", responsive = true, style, ...props },\n  ref,\n) {\n  const columnValue = String(columns) as \"1\" | \"2\" | \"3\" | \"4\";\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={cx(statGroup({ columns: columnValue, gap }), className)}\n      data-columns={columns}\n      data-jaci-component=\"stat-group\"\n      data-responsive={responsive || undefined}\n      data-slot=\"stat-group\"\n      style={\n        responsive ? style : { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`, ...style }\n      }\n    >\n      {children}\n    </div>\n  );\n});\n\nexport const StatGroup = { Root: StatGroupRoot };\n\nexport type StatGroupProps = StatGroupRootProps;\n\nexport type StatChildren = ReactNode;\n"],"mappings":"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"}

package/dist/components/stat/stat.d.cts

@@ -0,0 +1,51 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/components/stat/stat.d.ts
+type StatTone = "neutral" | "accent" | "success" | "warning" | "danger";
+type StatSize = "sm" | "md" | "lg";
+type StatTrendDirection = "up" | "down" | "neutral";
+interface StatRootProps extends ComponentPropsWithoutRef<"article"> {
+  size?: StatSize;
+  tone?: StatTone;
+}
+declare const StatRoot: import("react").ForwardRefExoticComponent<StatRootProps & import("react").RefAttributes<HTMLElement>>;
+type StatIconProps = ComponentPropsWithoutRef<"span">;
+declare const StatIcon: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+type StatLabelProps = ComponentPropsWithoutRef<"span">;
+declare const StatLabel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+type StatValueProps = ComponentPropsWithoutRef<"strong">;
+declare const StatValue: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+type StatDescriptionProps = ComponentPropsWithoutRef<"p">;
+declare const StatDescription: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+interface StatTrendProps extends ComponentPropsWithoutRef<"span"> {
+  direction?: StatTrendDirection;
+}
+declare const StatTrend: import("react").ForwardRefExoticComponent<StatTrendProps & import("react").RefAttributes<HTMLSpanElement>>;
+declare const Stat: {
+  Root: import("react").ForwardRefExoticComponent<StatRootProps & import("react").RefAttributes<HTMLElement>>;
+  Icon: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  Label: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  Value: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+  Description: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+  Trend: import("react").ForwardRefExoticComponent<StatTrendProps & import("react").RefAttributes<HTMLSpanElement>>;
+};
+type StatGroupRootProps = ComponentPropsWithoutRef<"div"> & {
+  columns?: 1 | 2 | 3 | 4;
+  gap?: "sm" | "md" | "lg";
+  responsive?: boolean;
+};
+declare const StatGroupRoot: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+  columns?: 1 | 2 | 3 | 4;
+  gap?: "sm" | "md" | "lg";
+  responsive?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
+declare const StatGroup: {
+  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    columns?: 1 | 2 | 3 | 4;
+    gap?: "sm" | "md" | "lg";
+    responsive?: boolean;
+  } & import("react").RefAttributes<HTMLDivElement>>;
+};
+type StatGroupProps = StatGroupRootProps;
+//#endregion
+export { Stat, StatDescription, StatDescriptionProps, StatGroup, StatGroupProps, StatGroupRoot, StatGroupRootProps, StatIcon, StatIconProps, StatLabel, StatLabelProps, StatRoot, StatRootProps, StatSize, StatTone, StatTrend, StatTrendDirection, StatTrendProps, StatValue, StatValueProps };
+//# sourceMappingURL=stat.d.cts.map

package/dist/components/stat/stat.d.ts

@@ -0,0 +1,51 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/components/stat/stat.d.ts
+type StatTone = "neutral" | "accent" | "success" | "warning" | "danger";
+type StatSize = "sm" | "md" | "lg";
+type StatTrendDirection = "up" | "down" | "neutral";
+interface StatRootProps extends ComponentPropsWithoutRef<"article"> {
+  size?: StatSize;
+  tone?: StatTone;
+}
+declare const StatRoot: import("react").ForwardRefExoticComponent<StatRootProps & import("react").RefAttributes<HTMLElement>>;
+type StatIconProps = ComponentPropsWithoutRef<"span">;
+declare const StatIcon: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+type StatLabelProps = ComponentPropsWithoutRef<"span">;
+declare const StatLabel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+type StatValueProps = ComponentPropsWithoutRef<"strong">;
+declare const StatValue: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+type StatDescriptionProps = ComponentPropsWithoutRef<"p">;
+declare const StatDescription: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+interface StatTrendProps extends ComponentPropsWithoutRef<"span"> {
+  direction?: StatTrendDirection;
+}
+declare const StatTrend: import("react").ForwardRefExoticComponent<StatTrendProps & import("react").RefAttributes<HTMLSpanElement>>;
+declare const Stat: {
+  Root: import("react").ForwardRefExoticComponent<StatRootProps & import("react").RefAttributes<HTMLElement>>;
+  Icon: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  Label: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  Value: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+  Description: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+  Trend: import("react").ForwardRefExoticComponent<StatTrendProps & import("react").RefAttributes<HTMLSpanElement>>;
+};
+type StatGroupRootProps = ComponentPropsWithoutRef<"div"> & {
+  columns?: 1 | 2 | 3 | 4;
+  gap?: "sm" | "md" | "lg";
+  responsive?: boolean;
+};
+declare const StatGroupRoot: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+  columns?: 1 | 2 | 3 | 4;
+  gap?: "sm" | "md" | "lg";
+  responsive?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
+declare const StatGroup: {
+  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    columns?: 1 | 2 | 3 | 4;
+    gap?: "sm" | "md" | "lg";
+    responsive?: boolean;
+  } & import("react").RefAttributes<HTMLDivElement>>;
+};
+type StatGroupProps = StatGroupRootProps;
+//#endregion
+export { Stat, StatDescription, StatDescriptionProps, StatGroup, StatGroupProps, StatGroupRoot, StatGroupRootProps, StatIcon, StatIconProps, StatLabel, StatLabelProps, StatRoot, StatRootProps, StatSize, StatTone, StatTrend, StatTrendDirection, StatTrendProps, StatValue, StatValueProps };
+//# sourceMappingURL=stat.d.ts.map

package/dist/components/stat/stat.js

@@ -0,0 +1,114 @@
+import { cx } from "../../styled-system/css/cx.js";
+import { statGroup } from "../../styled-system/recipes/stat-group.js";
+import { stat } from "../../styled-system/recipes/stat.js";
+import { createContext, forwardRef, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/stat/stat.tsx
+const StatContext = createContext(null);
+function useStatContext() {
+	const context = useContext(StatContext);
+	if (!context) throw new Error("Stat parts must be rendered inside Stat.Root.");
+	return context;
+}
+const StatRoot = forwardRef(function StatRoot({ children, className, size = "md", tone = "neutral", ...props }, ref) {
+	const styles = stat({
+		size,
+		tone
+	});
+	return /* @__PURE__ */ jsx(StatContext.Provider, {
+		value: {
+			size,
+			styles,
+			tone
+		},
+		children: /* @__PURE__ */ jsx("article", {
+			...props,
+			ref,
+			className: cx(styles.root, className),
+			"data-jaci-component": "stat",
+			"data-size": size,
+			"data-slot": "stat",
+			"data-tone": tone,
+			children
+		})
+	});
+});
+const StatIcon = forwardRef(function StatIcon({ className, ...props }, ref) {
+	const { styles } = useStatContext();
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		ref,
+		className: cx(styles.icon, className),
+		"data-slot": "stat-icon"
+	});
+});
+const StatLabel = forwardRef(function StatLabel({ className, ...props }, ref) {
+	const { styles } = useStatContext();
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		ref,
+		className: cx(styles.label, className),
+		"data-slot": "stat-label"
+	});
+});
+const StatValue = forwardRef(function StatValue({ className, ...props }, ref) {
+	const { styles } = useStatContext();
+	return /* @__PURE__ */ jsx("strong", {
+		...props,
+		ref,
+		className: cx(styles.value, className),
+		"data-slot": "stat-value"
+	});
+});
+const StatDescription = forwardRef(function StatDescription({ className, ...props }, ref) {
+	const { styles } = useStatContext();
+	return /* @__PURE__ */ jsx("p", {
+		...props,
+		ref,
+		className: cx(styles.description, className),
+		"data-slot": "stat-description"
+	});
+});
+const StatTrend = forwardRef(function StatTrend({ className, direction = "neutral", ...props }, ref) {
+	const { styles } = useStatContext();
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		ref,
+		className: cx(styles.trend, stat({ direction }).trend, className),
+		"data-direction": direction,
+		"data-slot": "stat-trend"
+	});
+});
+const Stat = {
+	Root: StatRoot,
+	Icon: StatIcon,
+	Label: StatLabel,
+	Value: StatValue,
+	Description: StatDescription,
+	Trend: StatTrend
+};
+const StatGroupRoot = forwardRef(function StatGroupRoot({ children, className, columns = 3, gap = "md", responsive = true, style, ...props }, ref) {
+	const columnValue = String(columns);
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		ref,
+		className: cx(statGroup({
+			columns: columnValue,
+			gap
+		}), className),
+		"data-columns": columns,
+		"data-jaci-component": "stat-group",
+		"data-responsive": responsive || void 0,
+		"data-slot": "stat-group",
+		style: responsive ? style : {
+			gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+			...style
+		},
+		children
+	});
+});
+const StatGroup = { Root: StatGroupRoot };
+//#endregion
+export { Stat, StatDescription, StatGroup, StatGroupRoot, StatIcon, StatLabel, StatRoot, StatTrend, StatValue };
+
+//# sourceMappingURL=stat.js.map

package/dist/components/stat/stat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat.js","names":[],"sources":["../../../src/components/stat/stat.tsx"],"sourcesContent":["import { createContext, forwardRef, useContext } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { stat, statGroup } from \"../../styled-system/recipes\";\n\nexport type StatTone = \"neutral\" | \"accent\" | \"success\" | \"warning\" | \"danger\";\nexport type StatSize = \"sm\" | \"md\" | \"lg\";\nexport type StatTrendDirection = \"up\" | \"down\" | \"neutral\";\n\ninterface StatContextValue {\n  size: StatSize;\n  styles: ReturnType<typeof stat>;\n  tone: StatTone;\n}\n\nconst StatContext = createContext<StatContextValue | null>(null);\n\nfunction useStatContext() {\n  const context = useContext(StatContext);\n  if (!context) {\n    throw new Error(\"Stat parts must be rendered inside Stat.Root.\");\n  }\n\n  return context;\n}\n\nexport interface StatRootProps extends ComponentPropsWithoutRef<\"article\"> {\n  size?: StatSize;\n  tone?: StatTone;\n}\n\nexport const StatRoot = forwardRef<HTMLElement, StatRootProps>(function StatRoot(\n  { children, className, size = \"md\", tone = \"neutral\", ...props },\n  ref,\n) {\n  const styles = stat({ size, tone });\n\n  return (\n    <StatContext.Provider value={{ size, styles, tone }}>\n      <article\n        {...props}\n        ref={ref}\n        className={cx(styles.root, className)}\n        data-jaci-component=\"stat\"\n        data-size={size}\n        data-slot=\"stat\"\n        data-tone={tone}\n      >\n        {children}\n      </article>\n    </StatContext.Provider>\n  );\n});\n\nexport type StatIconProps = ComponentPropsWithoutRef<\"span\">;\nexport const StatIcon = forwardRef<HTMLSpanElement, StatIconProps>(function StatIcon(\n  { className, ...props },\n  ref,\n) {\n  const { styles } = useStatContext();\n  return <span {...props} ref={ref} className={cx(styles.icon, className)} data-slot=\"stat-icon\" />;\n});\n\nexport type StatLabelProps = ComponentPropsWithoutRef<\"span\">;\nexport const StatLabel = forwardRef<HTMLSpanElement, StatLabelProps>(function StatLabel(\n  { className, ...props },\n  ref,\n) {\n  const { styles } = useStatContext();\n  return (\n    <span {...props} ref={ref} className={cx(styles.label, className)} data-slot=\"stat-label\" />\n  );\n});\n\nexport type StatValueProps = ComponentPropsWithoutRef<\"strong\">;\nexport const StatValue = forwardRef<HTMLElement, StatValueProps>(function StatValue(\n  { className, ...props },\n  ref,\n) {\n  const { styles } = useStatContext();\n  return (\n    <strong {...props} ref={ref} className={cx(styles.value, className)} data-slot=\"stat-value\" />\n  );\n});\n\nexport type StatDescriptionProps = ComponentPropsWithoutRef<\"p\">;\nexport const StatDescription = forwardRef<HTMLParagraphElement, StatDescriptionProps>(\n  function StatDescription({ className, ...props }, ref) {\n    const { styles } = useStatContext();\n    return (\n      <p\n        {...props}\n        ref={ref}\n        className={cx(styles.description, className)}\n        data-slot=\"stat-description\"\n      />\n    );\n  },\n);\n\nexport interface StatTrendProps extends ComponentPropsWithoutRef<\"span\"> {\n  direction?: StatTrendDirection;\n}\n\nexport const StatTrend = forwardRef<HTMLSpanElement, StatTrendProps>(function StatTrend(\n  { className, direction = \"neutral\", ...props },\n  ref,\n) {\n  const { styles } = useStatContext();\n  return (\n    <span\n      {...props}\n      ref={ref}\n      className={cx(styles.trend, stat({ direction }).trend, className)}\n      data-direction={direction}\n      data-slot=\"stat-trend\"\n    />\n  );\n});\n\nexport const Stat = {\n  Root: StatRoot,\n  Icon: StatIcon,\n  Label: StatLabel,\n  Value: StatValue,\n  Description: StatDescription,\n  Trend: StatTrend,\n};\n\nexport type StatGroupRootProps = ComponentPropsWithoutRef<\"div\"> & {\n  columns?: 1 | 2 | 3 | 4;\n  gap?: \"sm\" | \"md\" | \"lg\";\n  responsive?: boolean;\n};\n\nexport const StatGroupRoot = forwardRef<HTMLDivElement, StatGroupRootProps>(function StatGroupRoot(\n  { children, className, columns = 3, gap = \"md\", responsive = true, style, ...props },\n  ref,\n) {\n  const columnValue = String(columns) as \"1\" | \"2\" | \"3\" | \"4\";\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={cx(statGroup({ columns: columnValue, gap }), className)}\n      data-columns={columns}\n      data-jaci-component=\"stat-group\"\n      data-responsive={responsive || undefined}\n      data-slot=\"stat-group\"\n      style={\n        responsive ? style : { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`, ...style }\n      }\n    >\n      {children}\n    </div>\n  );\n});\n\nexport const StatGroup = { Root: StatGroupRoot };\n\nexport type StatGroupProps = StatGroupRootProps;\n\nexport type StatChildren = ReactNode;\n"],"mappings":";;;;;;AAgBA,MAAM,cAAc,cAAuC,IAAI;AAE/D,SAAS,iBAAiB;CACxB,MAAM,UAAU,WAAW,WAAW;CACtC,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,+CAA+C;CAGjE,OAAO;AACT;AAOA,MAAa,WAAW,WAAuC,SAAS,SACtE,EAAE,UAAU,WAAW,OAAO,MAAM,OAAO,WAAW,GAAG,SACzD,KACA;CACA,MAAM,SAAS,KAAK;EAAE;EAAM;CAAK,CAAC;CAElC,OACE,oBAAC,YAAY,UAAb;EAAsB,OAAO;GAAE;GAAM;GAAQ;EAAK;YAChD,oBAAC,WAAD;GACE,GAAI;GACC;GACL,WAAW,GAAG,OAAO,MAAM,SAAS;GACpC,uBAAoB;GACpB,aAAW;GACX,aAAU;GACV,aAAW;GAEV;EACM,CAAA;CACW,CAAA;AAE1B,CAAC;AAGD,MAAa,WAAW,WAA2C,SAAS,SAC1E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,MAAM,EAAE,WAAW,eAAe;CAClC,OAAO,oBAAC,QAAD;EAAM,GAAI;EAAY;EAAK,WAAW,GAAG,OAAO,MAAM,SAAS;EAAG,aAAU;CAAa,CAAA;AAClG,CAAC;AAGD,MAAa,YAAY,WAA4C,SAAS,UAC5E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,MAAM,EAAE,WAAW,eAAe;CAClC,OACE,oBAAC,QAAD;EAAM,GAAI;EAAY;EAAK,WAAW,GAAG,OAAO,OAAO,SAAS;EAAG,aAAU;CAAc,CAAA;AAE/F,CAAC;AAGD,MAAa,YAAY,WAAwC,SAAS,UACxE,EAAE,WAAW,GAAG,SAChB,KACA;CACA,MAAM,EAAE,WAAW,eAAe;CAClC,OACE,oBAAC,UAAD;EAAQ,GAAI;EAAY;EAAK,WAAW,GAAG,OAAO,OAAO,SAAS;EAAG,aAAU;CAAc,CAAA;AAEjG,CAAC;AAGD,MAAa,kBAAkB,WAC7B,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAS,KAAK;CACrD,MAAM,EAAE,WAAW,eAAe;CAClC,OACE,oBAAC,KAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,OAAO,aAAa,SAAS;EAC3C,aAAU;CACX,CAAA;AAEL,CACF;AAMA,MAAa,YAAY,WAA4C,SAAS,UAC5E,EAAE,WAAW,YAAY,WAAW,GAAG,SACvC,KACA;CACA,MAAM,EAAE,WAAW,eAAe;CAClC,OACE,oBAAC,QAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,OAAO,OAAO,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,SAAS;EAChE,kBAAgB;EAChB,aAAU;CACX,CAAA;AAEL,CAAC;AAED,MAAa,OAAO;CAClB,MAAM;CACN,MAAM;CACN,OAAO;CACP,OAAO;CACP,aAAa;CACb,OAAO;AACT;AAQA,MAAa,gBAAgB,WAA+C,SAAS,cACnF,EAAE,UAAU,WAAW,UAAU,GAAG,MAAM,MAAM,aAAa,MAAM,OAAO,GAAG,SAC7E,KACA;CACA,MAAM,cAAc,OAAO,OAAO;CAClC,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,UAAU;GAAE,SAAS;GAAa;EAAI,CAAC,GAAG,SAAS;EACjE,gBAAc;EACd,uBAAoB;EACpB,mBAAiB,cAAc,KAAA;EAC/B,aAAU;EACV,OACE,aAAa,QAAQ;GAAE,qBAAqB,UAAU,QAAQ;GAAoB,GAAG;EAAM;EAG5F;CACE,CAAA;AAET,CAAC;AAED,MAAa,YAAY,EAAE,MAAM,cAAc"}

package/dist/components/stat-group/index.d.cts

@@ -0,0 +1,2 @@
+import { StatGroup, StatGroupProps, StatGroupRoot, StatGroupRootProps } from "../stat/stat.cjs";
+export { StatGroup, type StatGroupProps, StatGroupRoot, type StatGroupRootProps };

package/dist/components/stat-group/index.d.ts

@@ -0,0 +1,2 @@
+import { StatGroup, StatGroupProps, StatGroupRoot, StatGroupRootProps } from "../stat/stat.js";
+export { StatGroup, type StatGroupProps, StatGroupRoot, type StatGroupRootProps };

package/dist/components/typography/heading.cjs

@@ -11,13 +11,19 @@ const defaultSizeByElement = {
 	h5: "sm",
 	h6: "xs"
 };
-const Heading = (0, react.forwardRef)(function Heading({ as = "h2", className, size, ...props }, ref) {
+const Heading = (0, react.forwardRef)(function Heading({ as = "h2", className, lineClamp, size, truncate = false, weight, width = "auto", ...props }, ref) {
 	const Component = as;
 	const resolvedSize = size ?? defaultSizeByElement[as];
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
 		...props,
 		ref,
-		className: require_cx.cx(require_heading.heading({ size: resolvedSize }), className),
+		className: require_cx.cx(require_heading.heading({
+			lineClamp: lineClamp ? String(lineClamp) : void 0,
+			size: resolvedSize,
+			truncate,
+			weight,
+			width
+		}), className),
 		"data-jaci-component": "heading",
 		"data-slot": "heading"
 	});

package/dist/components/typography/heading.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"heading.cjs","names":["cx","heading"],"sources":["../../../src/components/typography/heading.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementType, ReactElement, Ref } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { heading } from \"../../styled-system/recipes\";\n\nexport type HeadingSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\nexport type HeadingElement = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n\nconst defaultSizeByElement: Record<HeadingElement, HeadingSize> = {\n  h1: \"2xl\",\n  h2: \"xl\",\n  h3: \"lg\",\n  h4: \"md\",\n  h5: \"sm\",\n  h6: \"xs\",\n};\n\nexport interface HeadingProps extends Omit<ComponentPropsWithoutRef<\"h2\">, \"color\"> {\n  as?: HeadingElement;\n  size?: HeadingSize;\n}\n\nexport const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(function Heading(\n  { as = \"h2\", className, size, ...props },\n  ref,\n) {\n  const Component = as as ElementType;\n  const resolvedSize = size ?? defaultSizeByElement[as];\n\n  return (\n    <Component\n      {...props}\n      ref={ref as Ref<HTMLElement>}\n      className={cx(heading({ size: resolvedSize }), className)}\n      data-jaci-component=\"heading\"\n      data-slot=\"heading\"\n    />\n  ) as ReactElement;\n});\n"],"mappings":";;;;;AASA,MAAM,uBAA4D;CAChE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAOA,MAAa,WAAA,GAAA,MAAA,WAAA,CAAuD,SAAS,QAC3E,EAAE,KAAK,MAAM,WAAW,MAAM,GAAG,SACjC,KACA;CACA,MAAM,YAAY;CAClB,MAAM,eAAe,QAAQ,qBAAqB;CAElD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACE,GAAI;EACC;EACL,WAAWA,WAAAA,GAAGC,gBAAAA,QAAQ,EAAE,MAAM,aAAa,CAAC,GAAG,SAAS;EACxD,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CAAC"}
+{"version":3,"file":"heading.cjs","names":["cx","heading"],"sources":["../../../src/components/typography/heading.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementType, ReactElement, Ref } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { heading } from \"../../styled-system/recipes\";\n\nexport type HeadingSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\nexport type HeadingElement = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\nexport type TypographyWeight = \"normal\" | \"medium\" | \"semibold\" | \"bold\";\nexport type TypographyWidth = \"auto\" | \"fit\" | \"full\";\nexport type TypographyLineClamp = 1 | 2 | 3 | 4;\n\nconst defaultSizeByElement: Record<HeadingElement, HeadingSize> = {\n  h1: \"2xl\",\n  h2: \"xl\",\n  h3: \"lg\",\n  h4: \"md\",\n  h5: \"sm\",\n  h6: \"xs\",\n};\n\nexport interface HeadingProps extends Omit<ComponentPropsWithoutRef<\"h2\">, \"color\"> {\n  as?: HeadingElement;\n  size?: HeadingSize;\n  weight?: TypographyWeight;\n  truncate?: boolean;\n  lineClamp?: TypographyLineClamp;\n  width?: TypographyWidth;\n}\n\nexport const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(function Heading(\n  { as = \"h2\", className, lineClamp, size, truncate = false, weight, width = \"auto\", ...props },\n  ref,\n) {\n  const Component = as as ElementType;\n  const resolvedSize = size ?? defaultSizeByElement[as];\n\n  return (\n    <Component\n      {...props}\n      ref={ref as Ref<HTMLElement>}\n      className={cx(\n        heading({\n          lineClamp: lineClamp ? (String(lineClamp) as \"1\" | \"2\" | \"3\" | \"4\") : undefined,\n          size: resolvedSize,\n          truncate,\n          weight,\n          width,\n        }),\n        className,\n      )}\n      data-jaci-component=\"heading\"\n      data-slot=\"heading\"\n    />\n  ) as ReactElement;\n});\n"],"mappings":";;;;;AAYA,MAAM,uBAA4D;CAChE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAWA,MAAa,WAAA,GAAA,MAAA,WAAA,CAAuD,SAAS,QAC3E,EAAE,KAAK,MAAM,WAAW,WAAW,MAAM,WAAW,OAAO,QAAQ,QAAQ,QAAQ,GAAG,SACtF,KACA;CACA,MAAM,YAAY;CAClB,MAAM,eAAe,QAAQ,qBAAqB;CAElD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EACE,GAAI;EACC;EACL,WAAWA,WAAAA,GACTC,gBAAAA,QAAQ;GACN,WAAW,YAAa,OAAO,SAAS,IAA8B,KAAA;GACtE,MAAM;GACN;GACA;GACA;EACF,CAAC,GACD,SACF;EACA,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CAAC"}

package/dist/components/typography/heading.d.cts

@@ -2,11 +2,18 @@ import { ComponentPropsWithoutRef } from "react";
 //#region src/components/typography/heading.d.ts
 type HeadingSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 type HeadingElement = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+type TypographyWeight = "normal" | "medium" | "semibold" | "bold";
+type TypographyWidth = "auto" | "fit" | "full";
+type TypographyLineClamp = 1 | 2 | 3 | 4;
 interface HeadingProps extends Omit<ComponentPropsWithoutRef<"h2">, "color"> {
   as?: HeadingElement;
   size?: HeadingSize;
+  weight?: TypographyWeight;
+  truncate?: boolean;
+  lineClamp?: TypographyLineClamp;
+  width?: TypographyWidth;
 }
 declare const Heading: import("react").ForwardRefExoticComponent<HeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;
 //#endregion
-export { Heading, HeadingElement, HeadingProps, HeadingSize };
+export { Heading, HeadingElement, HeadingProps, HeadingSize, TypographyLineClamp, TypographyWeight, TypographyWidth };
 //# sourceMappingURL=heading.d.cts.map

package/dist/components/typography/heading.d.ts

@@ -2,11 +2,18 @@ import { ComponentPropsWithoutRef } from "react";
 //#region src/components/typography/heading.d.ts
 type HeadingSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 type HeadingElement = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+type TypographyWeight = "normal" | "medium" | "semibold" | "bold";
+type TypographyWidth = "auto" | "fit" | "full";
+type TypographyLineClamp = 1 | 2 | 3 | 4;
 interface HeadingProps extends Omit<ComponentPropsWithoutRef<"h2">, "color"> {
   as?: HeadingElement;
   size?: HeadingSize;
+  weight?: TypographyWeight;
+  truncate?: boolean;
+  lineClamp?: TypographyLineClamp;
+  width?: TypographyWidth;
 }
 declare const Heading: import("react").ForwardRefExoticComponent<HeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;
 //#endregion
-export { Heading, HeadingElement, HeadingProps, HeadingSize };
+export { Heading, HeadingElement, HeadingProps, HeadingSize, TypographyLineClamp, TypographyWeight, TypographyWidth };
 //# sourceMappingURL=heading.d.ts.map

package/dist/components/typography/heading.js

@@ -11,13 +11,19 @@ const defaultSizeByElement = {
 	h5: "sm",
 	h6: "xs"
 };
-const Heading = forwardRef(function Heading({ as = "h2", className, size, ...props }, ref) {
+const Heading = forwardRef(function Heading({ as = "h2", className, lineClamp, size, truncate = false, weight, width = "auto", ...props }, ref) {
 	const Component = as;
 	const resolvedSize = size ?? defaultSizeByElement[as];
 	return /* @__PURE__ */ jsx(Component, {
 		...props,
 		ref,
-		className: cx(heading({ size: resolvedSize }), className),
+		className: cx(heading({
+			lineClamp: lineClamp ? String(lineClamp) : void 0,
+			size: resolvedSize,
+			truncate,
+			weight,
+			width
+		}), className),
 		"data-jaci-component": "heading",
 		"data-slot": "heading"
 	});

package/dist/components/typography/heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"heading.js","names":[],"sources":["../../../src/components/typography/heading.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementType, ReactElement, Ref } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { heading } from \"../../styled-system/recipes\";\n\nexport type HeadingSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\nexport type HeadingElement = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n\nconst defaultSizeByElement: Record<HeadingElement, HeadingSize> = {\n  h1: \"2xl\",\n  h2: \"xl\",\n  h3: \"lg\",\n  h4: \"md\",\n  h5: \"sm\",\n  h6: \"xs\",\n};\n\nexport interface HeadingProps extends Omit<ComponentPropsWithoutRef<\"h2\">, \"color\"> {\n  as?: HeadingElement;\n  size?: HeadingSize;\n}\n\nexport const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(function Heading(\n  { as = \"h2\", className, size, ...props },\n  ref,\n) {\n  const Component = as as ElementType;\n  const resolvedSize = size ?? defaultSizeByElement[as];\n\n  return (\n    <Component\n      {...props}\n      ref={ref as Ref<HTMLElement>}\n      className={cx(heading({ size: resolvedSize }), className)}\n      data-jaci-component=\"heading\"\n      data-slot=\"heading\"\n    />\n  ) as ReactElement;\n});\n"],"mappings":";;;;;AASA,MAAM,uBAA4D;CAChE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAOA,MAAa,UAAU,WAA6C,SAAS,QAC3E,EAAE,KAAK,MAAM,WAAW,MAAM,GAAG,SACjC,KACA;CACA,MAAM,YAAY;CAClB,MAAM,eAAe,QAAQ,qBAAqB;CAElD,OACE,oBAAC,WAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,QAAQ,EAAE,MAAM,aAAa,CAAC,GAAG,SAAS;EACxD,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CAAC"}
+{"version":3,"file":"heading.js","names":[],"sources":["../../../src/components/typography/heading.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementType, ReactElement, Ref } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { heading } from \"../../styled-system/recipes\";\n\nexport type HeadingSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\nexport type HeadingElement = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\nexport type TypographyWeight = \"normal\" | \"medium\" | \"semibold\" | \"bold\";\nexport type TypographyWidth = \"auto\" | \"fit\" | \"full\";\nexport type TypographyLineClamp = 1 | 2 | 3 | 4;\n\nconst defaultSizeByElement: Record<HeadingElement, HeadingSize> = {\n  h1: \"2xl\",\n  h2: \"xl\",\n  h3: \"lg\",\n  h4: \"md\",\n  h5: \"sm\",\n  h6: \"xs\",\n};\n\nexport interface HeadingProps extends Omit<ComponentPropsWithoutRef<\"h2\">, \"color\"> {\n  as?: HeadingElement;\n  size?: HeadingSize;\n  weight?: TypographyWeight;\n  truncate?: boolean;\n  lineClamp?: TypographyLineClamp;\n  width?: TypographyWidth;\n}\n\nexport const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(function Heading(\n  { as = \"h2\", className, lineClamp, size, truncate = false, weight, width = \"auto\", ...props },\n  ref,\n) {\n  const Component = as as ElementType;\n  const resolvedSize = size ?? defaultSizeByElement[as];\n\n  return (\n    <Component\n      {...props}\n      ref={ref as Ref<HTMLElement>}\n      className={cx(\n        heading({\n          lineClamp: lineClamp ? (String(lineClamp) as \"1\" | \"2\" | \"3\" | \"4\") : undefined,\n          size: resolvedSize,\n          truncate,\n          weight,\n          width,\n        }),\n        className,\n      )}\n      data-jaci-component=\"heading\"\n      data-slot=\"heading\"\n    />\n  ) as ReactElement;\n});\n"],"mappings":";;;;;AAYA,MAAM,uBAA4D;CAChE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAWA,MAAa,UAAU,WAA6C,SAAS,QAC3E,EAAE,KAAK,MAAM,WAAW,WAAW,MAAM,WAAW,OAAO,QAAQ,QAAQ,QAAQ,GAAG,SACtF,KACA;CACA,MAAM,YAAY;CAClB,MAAM,eAAe,QAAQ,qBAAqB;CAElD,OACE,oBAAC,WAAD;EACE,GAAI;EACC;EACL,WAAW,GACT,QAAQ;GACN,WAAW,YAAa,OAAO,SAAS,IAA8B,KAAA;GACtE,MAAM;GACN;GACA;GACA;EACF,CAAC,GACD,SACF;EACA,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CAAC"}

package/dist/components/typography/index.d.cts

@@ -1,5 +1,5 @@
-import { Heading, HeadingElement, HeadingProps, HeadingSize } from "./heading.cjs";
+import { Heading, HeadingElement, HeadingProps, HeadingSize, TypographyLineClamp, TypographyWeight, TypographyWidth } from "./heading.cjs";
 import { Link, LinkProps } from "./link.cjs";
 import { Paragraph, ParagraphProps } from "./paragraph.cjs";
 import { Text, TextElement, TextProps, TextSize, TextTone } from "./text.cjs";
-export { Heading, type HeadingElement, type HeadingProps, type HeadingSize, Link, type LinkProps, Paragraph, type ParagraphProps, Text, type TextElement, type TextProps, type TextSize, type TextTone };
+export { Heading, type HeadingElement, type HeadingProps, type HeadingSize, Link, type LinkProps, Paragraph, type ParagraphProps, Text, type TextElement, type TextProps, type TextSize, type TextTone, type TypographyLineClamp, type TypographyWeight, type TypographyWidth };

package/dist/components/typography/index.d.ts

@@ -1,5 +1,5 @@
-import { Heading, HeadingElement, HeadingProps, HeadingSize } from "./heading.js";
+import { Heading, HeadingElement, HeadingProps, HeadingSize, TypographyLineClamp, TypographyWeight, TypographyWidth } from "./heading.js";
 import { Link, LinkProps } from "./link.js";
 import { Paragraph, ParagraphProps } from "./paragraph.js";
 import { Text, TextElement, TextProps, TextSize, TextTone } from "./text.js";
-export { Heading, type HeadingElement, type HeadingProps, type HeadingSize, Link, type LinkProps, Paragraph, type ParagraphProps, Text, type TextElement, type TextProps, type TextSize, type TextTone };
+export { Heading, type HeadingElement, type HeadingProps, type HeadingSize, Link, type LinkProps, Paragraph, type ParagraphProps, Text, type TextElement, type TextProps, type TextSize, type TextTone, type TypographyLineClamp, type TypographyWeight, type TypographyWidth };

package/dist/components/typography/paragraph.cjs

@@ -3,11 +3,16 @@ const require_paragraph = require("../../styled-system/recipes/paragraph.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/typography/paragraph.tsx
-const Paragraph = (0, react.forwardRef)(function Paragraph({ className, ...props }, ref) {
+const Paragraph = (0, react.forwardRef)(function Paragraph({ className, lineClamp, truncate = false, weight, width = "auto", ...props }, ref) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 		...props,
 		ref,
-		className: require_cx.cx(require_paragraph.paragraph(), className),
+		className: require_cx.cx(require_paragraph.paragraph({
+			lineClamp: lineClamp ? String(lineClamp) : void 0,
+			truncate,
+			weight,
+			width
+		}), className),
 		"data-jaci-component": "paragraph",
 		"data-slot": "paragraph"
 	});

package/dist/components/typography/paragraph.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"paragraph.cjs","names":["cx","paragraph"],"sources":["../../../src/components/typography/paragraph.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { paragraph } from \"../../styled-system/recipes\";\n\nexport type ParagraphProps = ComponentPropsWithoutRef<\"p\">;\n\nexport const Paragraph = forwardRef<HTMLParagraphElement, ParagraphProps>(function Paragraph(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <p\n      {...props}\n      ref={ref}\n      className={cx(paragraph(), className)}\n      data-jaci-component=\"paragraph\"\n      data-slot=\"paragraph\"\n    />\n  );\n});\n"],"mappings":";;;;;AAQA,MAAa,aAAA,GAAA,MAAA,WAAA,CAA6D,SAAS,UACjF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;EACE,GAAI;EACC;EACL,WAAWA,WAAAA,GAAGC,kBAAAA,UAAU,GAAG,SAAS;EACpC,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CAAC"}
+{"version":3,"file":"paragraph.cjs","names":["cx","paragraph"],"sources":["../../../src/components/typography/paragraph.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { paragraph } from \"../../styled-system/recipes\";\nimport type { TypographyLineClamp, TypographyWeight, TypographyWidth } from \"./heading\";\n\nexport interface ParagraphProps extends ComponentPropsWithoutRef<\"p\"> {\n  weight?: TypographyWeight;\n  truncate?: boolean;\n  lineClamp?: TypographyLineClamp;\n  width?: TypographyWidth;\n}\n\nexport const Paragraph = forwardRef<HTMLParagraphElement, ParagraphProps>(function Paragraph(\n  { className, lineClamp, truncate = false, weight, width = \"auto\", ...props },\n  ref,\n) {\n  return (\n    <p\n      {...props}\n      ref={ref}\n      className={cx(\n        paragraph({\n          lineClamp: lineClamp ? (String(lineClamp) as \"1\" | \"2\" | \"3\" | \"4\") : undefined,\n          truncate,\n          weight,\n          width,\n        }),\n        className,\n      )}\n      data-jaci-component=\"paragraph\"\n      data-slot=\"paragraph\"\n    />\n  );\n});\n"],"mappings":";;;;;AAcA,MAAa,aAAA,GAAA,MAAA,WAAA,CAA6D,SAAS,UACjF,EAAE,WAAW,WAAW,WAAW,OAAO,QAAQ,QAAQ,QAAQ,GAAG,SACrE,KACA;CACA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;EACE,GAAI;EACC;EACL,WAAWA,WAAAA,GACTC,kBAAAA,UAAU;GACR,WAAW,YAAa,OAAO,SAAS,IAA8B,KAAA;GACtE;GACA;GACA;EACF,CAAC,GACD,SACF;EACA,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CAAC"}

package/dist/components/typography/paragraph.d.cts

@@ -1,7 +1,13 @@
+import { TypographyLineClamp, TypographyWeight, TypographyWidth } from "./heading.cjs";
 import { ComponentPropsWithoutRef } from "react";
 //#region src/components/typography/paragraph.d.ts
-type ParagraphProps = ComponentPropsWithoutRef<"p">;
-declare const Paragraph: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+interface ParagraphProps extends ComponentPropsWithoutRef<"p"> {
+  weight?: TypographyWeight;
+  truncate?: boolean;
+  lineClamp?: TypographyLineClamp;
+  width?: TypographyWidth;
+}
+declare const Paragraph: import("react").ForwardRefExoticComponent<ParagraphProps & import("react").RefAttributes<HTMLParagraphElement>>;
 //#endregion
 export { Paragraph, ParagraphProps };
 //# sourceMappingURL=paragraph.d.cts.map

package/dist/components/typography/paragraph.d.ts

@@ -1,7 +1,13 @@
+import { TypographyLineClamp, TypographyWeight, TypographyWidth } from "./heading.js";
 import { ComponentPropsWithoutRef } from "react";
 //#region src/components/typography/paragraph.d.ts
-type ParagraphProps = ComponentPropsWithoutRef<"p">;
-declare const Paragraph: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+interface ParagraphProps extends ComponentPropsWithoutRef<"p"> {
+  weight?: TypographyWeight;
+  truncate?: boolean;
+  lineClamp?: TypographyLineClamp;
+  width?: TypographyWidth;
+}
+declare const Paragraph: import("react").ForwardRefExoticComponent<ParagraphProps & import("react").RefAttributes<HTMLParagraphElement>>;
 //#endregion
 export { Paragraph, ParagraphProps };
 //# sourceMappingURL=paragraph.d.ts.map

package/dist/components/typography/paragraph.js

@@ -3,11 +3,16 @@ import { paragraph } from "../../styled-system/recipes/paragraph.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/typography/paragraph.tsx
-const Paragraph = forwardRef(function Paragraph({ className, ...props }, ref) {
+const Paragraph = forwardRef(function Paragraph({ className, lineClamp, truncate = false, weight, width = "auto", ...props }, ref) {
 	return /* @__PURE__ */ jsx("p", {
 		...props,
 		ref,
-		className: cx(paragraph(), className),
+		className: cx(paragraph({
+			lineClamp: lineClamp ? String(lineClamp) : void 0,
+			truncate,
+			weight,
+			width
+		}), className),
 		"data-jaci-component": "paragraph",
 		"data-slot": "paragraph"
 	});

package/dist/components/typography/paragraph.js.map

@@ -1 +1 @@
-{"version":3,"file":"paragraph.js","names":[],"sources":["../../../src/components/typography/paragraph.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { paragraph } from \"../../styled-system/recipes\";\n\nexport type ParagraphProps = ComponentPropsWithoutRef<\"p\">;\n\nexport const Paragraph = forwardRef<HTMLParagraphElement, ParagraphProps>(function Paragraph(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <p\n      {...props}\n      ref={ref}\n      className={cx(paragraph(), className)}\n      data-jaci-component=\"paragraph\"\n      data-slot=\"paragraph\"\n    />\n  );\n});\n"],"mappings":";;;;;AAQA,MAAa,YAAY,WAAiD,SAAS,UACjF,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAAC,KAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,UAAU,GAAG,SAAS;EACpC,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CAAC"}
+{"version":3,"file":"paragraph.js","names":[],"sources":["../../../src/components/typography/paragraph.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { paragraph } from \"../../styled-system/recipes\";\nimport type { TypographyLineClamp, TypographyWeight, TypographyWidth } from \"./heading\";\n\nexport interface ParagraphProps extends ComponentPropsWithoutRef<\"p\"> {\n  weight?: TypographyWeight;\n  truncate?: boolean;\n  lineClamp?: TypographyLineClamp;\n  width?: TypographyWidth;\n}\n\nexport const Paragraph = forwardRef<HTMLParagraphElement, ParagraphProps>(function Paragraph(\n  { className, lineClamp, truncate = false, weight, width = \"auto\", ...props },\n  ref,\n) {\n  return (\n    <p\n      {...props}\n      ref={ref}\n      className={cx(\n        paragraph({\n          lineClamp: lineClamp ? (String(lineClamp) as \"1\" | \"2\" | \"3\" | \"4\") : undefined,\n          truncate,\n          weight,\n          width,\n        }),\n        className,\n      )}\n      data-jaci-component=\"paragraph\"\n      data-slot=\"paragraph\"\n    />\n  );\n});\n"],"mappings":";;;;;AAcA,MAAa,YAAY,WAAiD,SAAS,UACjF,EAAE,WAAW,WAAW,WAAW,OAAO,QAAQ,QAAQ,QAAQ,GAAG,SACrE,KACA;CACA,OACE,oBAAC,KAAD;EACE,GAAI;EACC;EACL,WAAW,GACT,UAAU;GACR,WAAW,YAAa,OAAO,SAAS,IAA8B,KAAA;GACtE;GACA;GACA;EACF,CAAC,GACD,SACF;EACA,uBAAoB;EACpB,aAAU;CACX,CAAA;AAEL,CAAC"}