@rehagro/ui 1.0.10 → 1.0.12

package/dist/index.d.mts

@@ -116,6 +116,9 @@ type RehagroTheme = {
     inputPxSm?: string;
     inputPxMd?: string;
     inputPxLg?: string;
+    /** Typography — Inter for body/labels, Sora for headings/display */
+    fontFamilyBody?: string;
+    fontFamilyDisplay?: string;
 };
 type RehagroProviderProps = {
     /** Theme overrides — any token not provided keeps the default value */
@@ -265,6 +268,8 @@ type CheckboxProps = Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "type"
     label?: string;
     /** Indeterminate state (partially checked) */
     indeterminate?: boolean;
+    checked?: boolean;
+    defaultChecked?: boolean;
 };
 declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     /** Checkbox size */
@@ -273,6 +278,8 @@ declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTML
     label?: string;
     /** Indeterminate state (partially checked) */
     indeterminate?: boolean;
+    checked?: boolean;
+    defaultChecked?: boolean;
 } & React$1.RefAttributes<HTMLInputElement>>;
 
 type SelectSize = "sm" | "md" | "lg";

package/dist/index.d.ts

@@ -116,6 +116,9 @@ type RehagroTheme = {
     inputPxSm?: string;
     inputPxMd?: string;
     inputPxLg?: string;
+    /** Typography — Inter for body/labels, Sora for headings/display */
+    fontFamilyBody?: string;
+    fontFamilyDisplay?: string;
 };
 type RehagroProviderProps = {
     /** Theme overrides — any token not provided keeps the default value */
@@ -265,6 +268,8 @@ type CheckboxProps = Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "type"
     label?: string;
     /** Indeterminate state (partially checked) */
     indeterminate?: boolean;
+    checked?: boolean;
+    defaultChecked?: boolean;
 };
 declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
     /** Checkbox size */
@@ -273,6 +278,8 @@ declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTML
     label?: string;
     /** Indeterminate state (partially checked) */
     indeterminate?: boolean;
+    checked?: boolean;
+    defaultChecked?: boolean;
 } & React$1.RefAttributes<HTMLInputElement>>;
 
 type SelectSize = "sm" | "md" | "lg";

package/dist/index.js

@@ -44,7 +44,9 @@ var TOKEN_MAP = {
   inputHeightLg: { var: "--rh-input-height-lg", isColor: false },
   inputPxSm: { var: "--rh-input-px-sm", isColor: false },
   inputPxMd: { var: "--rh-input-px-md", isColor: false },
-  inputPxLg: { var: "--rh-input-px-lg", isColor: false }
+  inputPxLg: { var: "--rh-input-px-lg", isColor: false },
+  fontFamilyBody: { var: "--rh-font-family", isColor: false },
+  fontFamilyDisplay: { var: "--rh-font-family-display", isColor: false }
 };
 var DeleteIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
   "svg",
@@ -735,7 +737,7 @@ var Button = React8.forwardRef(function Button2({
       style: computedStyle,
       className: [
         "rh-inline-flex rh-items-center rh-justify-center rh-gap-2",
-        "rh-border rh-font-sans rh-font-medium",
+        "rh-border rh-font-display rh-font-medium",
         "rh-transition-colors rh-duration-150",
         "focus-visible:rh-outline-none focus-visible:rh-ring-2 focus-visible:rh-ring-ring focus-visible:rh-ring-offset-2",
         preset && !hasCustomHover ? variantColorClasses[variant][color] : "",
@@ -868,7 +870,7 @@ var IconButton = React8.forwardRef(function IconButton2({
       style: computedStyle,
       className: [
         "rh-inline-flex rh-items-center rh-justify-center",
-        "rh-border rh-font-sans",
+        "rh-border rh-font-display",
         "rh-transition-colors rh-duration-150",
         "focus-visible:rh-outline-none focus-visible:rh-ring-2 focus-visible:rh-ring-ring focus-visible:rh-ring-offset-2",
         preset ? variantColorClasses2[variant][color] : "hover:rh-brightness-90",
@@ -1085,98 +1087,79 @@ var MinusIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     "aria-hidden": "true",
-    children: /* @__PURE__ */ jsxRuntime.jsx(
-      "path",
-      {
-        d: "M1 1H9",
-        stroke: "currentColor",
-        strokeWidth: "2",
-        strokeLinecap: "round"
-      }
-    )
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 1H9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
   }
 );
-var Checkbox = React8.forwardRef(
-  function Checkbox2({
-    size = "md",
-    label,
-    indeterminate = false,
-    disabled,
-    checked,
-    defaultChecked,
-    className = "",
-    id,
-    onChange,
-    ...rest
-  }, ref) {
-    const innerRef = React8__default.default.useRef(null);
-    const inputId = id || React8__default.default.useId();
-    React8__default.default.useImperativeHandle(ref, () => innerRef.current);
-    React8__default.default.useEffect(() => {
-      if (innerRef.current) {
-        innerRef.current.indeterminate = indeterminate;
-      }
-    }, [indeterminate]);
-    const isChecked = checked ?? innerRef.current?.checked ?? defaultChecked ?? false;
-    const isActive = isChecked || indeterminate;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "label",
-      {
-        htmlFor: inputId,
-        className: [
-          "rh-inline-flex rh-items-center rh-gap-2 rh-font-sans rh-select-none",
-          disabled ? "rh-cursor-not-allowed rh-opacity-50" : "rh-cursor-pointer",
-          className
-        ].filter(Boolean).join(" "),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "rh-relative rh-inline-flex rh-items-center rh-justify-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                ref: innerRef,
-                id: inputId,
-                type: "checkbox",
-                disabled,
-                checked,
-                defaultChecked,
-                "aria-checked": indeterminate ? "mixed" : void 0,
-                onChange,
-                className: "rh-peer rh-sr-only",
-                ...rest
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                className: [
-                  "rh-inline-flex rh-items-center rh-justify-center",
-                  "rh-border rh-border-border rh-rounded-xxs",
-                  "rh-transition-colors rh-duration-150",
-                  sizeClasses4[size],
-                  isActive ? "rh-bg-primary rh-border-primary rh-text-surface" : "rh-bg-surface rh-text-transparent",
-                  !disabled && !isActive ? "hover:rh-border-primary" : "",
-                  "peer-focus-visible:rh-ring-2 peer-focus-visible:rh-ring-ring peer-focus-visible:rh-ring-offset-2"
-                ].filter(Boolean).join(" "),
-                "aria-hidden": "true",
-                children: indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(MinusIcon, { className: iconSizeClasses2[size] }) : isChecked ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: iconSizeClasses2[size] }) : null
-              }
-            )
-          ] }),
-          label && /* @__PURE__ */ jsxRuntime.jsx(
+var Checkbox = React8.forwardRef(function Checkbox2({
+  size = "md",
+  label,
+  indeterminate = false,
+  disabled,
+  checked,
+  defaultChecked,
+  className = "",
+  id,
+  onChange,
+  ...rest
+}, ref) {
+  const innerRef = React8__default.default.useRef(null);
+  const inputId = id || React8__default.default.useId();
+  React8__default.default.useImperativeHandle(ref, () => innerRef.current);
+  React8__default.default.useEffect(() => {
+    if (innerRef.current) {
+      innerRef.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
+  const isChecked = checked ?? innerRef.current?.checked ?? defaultChecked ?? false;
+  const isActive = isChecked || indeterminate;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      htmlFor: inputId,
+      className: [
+        "rh-inline-flex rh-items-center rh-gap-2 rh-font-display rh-select-none",
+        disabled ? "rh-cursor-not-allowed rh-opacity-50" : "rh-cursor-pointer",
+        className
+      ].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "rh-relative rh-inline-flex rh-items-center rh-justify-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref: innerRef,
+              id: inputId,
+              type: "checkbox",
+              disabled,
+              checked,
+              defaultChecked,
+              "aria-checked": indeterminate ? "mixed" : void 0,
+              onChange,
+              className: "rh-peer rh-sr-only",
+              ...rest
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
               className: [
-                "rh-text-text",
-                labelSizeClasses[size]
-              ].join(" "),
-              children: label
+                "rh-inline-flex rh-items-center rh-justify-center",
+                "rh-border rh-border-border rh-rounded-xxs",
+                "rh-transition-colors rh-duration-150",
+                sizeClasses4[size],
+                isActive ? "rh-bg-primary rh-border-primary rh-text-surface" : "rh-bg-surface rh-text-transparent",
+                !disabled && !isActive ? "hover:rh-border-primary" : "",
+                "peer-focus-visible:rh-ring-2 peer-focus-visible:rh-ring-ring peer-focus-visible:rh-ring-offset-2"
+              ].filter(Boolean).join(" "),
+              "aria-hidden": "true",
+              children: indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(MinusIcon, { className: iconSizeClasses2[size] }) : isChecked ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: iconSizeClasses2[size] }) : null
             }
           )
-        ]
-      }
-    );
-  }
-);
+        ] }),
+        label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: ["rh-text-text", labelSizeClasses[size]].join(" "), children: label })
+      ]
+    }
+  );
+});
 var statusClasses2 = {
   default: "rh-border-border focus-within:rh-ring-2 focus-within:rh-ring-ring focus-within:rh-ring-offset-2",
   error: "rh-border-danger focus-within:rh-ring-2 focus-within:rh-ring-danger focus-within:rh-ring-offset-2"
@@ -1842,7 +1825,7 @@ var Avatar = React8.forwardRef(function Avatar2({ src, alt = "", initials, size
       className: [
         "rh-inline-flex rh-items-center rh-justify-center rh-shrink-0 rh-overflow-hidden",
         avatarColors ? "" : "rh-bg-primary rh-text-surface",
-        "rh-font-sans rh-font-medium rh-select-none",
+        "rh-font-display rh-font-medium rh-select-none",
         sizeClasses7[size],
         variantClasses2[variant],
         className
@@ -1947,7 +1930,7 @@ var Tag = React8.forwardRef(function Tag2({
       "aria-pressed": clickable ? active : void 0,
       "aria-disabled": disabled || void 0,
       className: [
-        "rh-inline-flex rh-items-center rh-font-sans rh-font-medium rh-rounded-full",
+        "rh-inline-flex rh-items-center rh-font-display rh-font-medium rh-rounded-full",
         "rh-border rh-whitespace-nowrap rh-select-none",
         "rh-transition-colors rh-duration-150",
         "rh-cursor-pointer",
@@ -2428,7 +2411,7 @@ function ToggleGroupInner({
             onClick: () => !isDisabled && onChange(option.value),
             className: [
               "rh-flex rh-items-center rh-justify-center rh-h-full",
-              "rh-border-0 rh-font-sans rh-font-medium",
+              "rh-border-0 rh-font-display rh-font-medium",
               "rh-transition-all rh-duration-150",
               "focus-visible:rh-outline-none focus-visible:rh-ring-2 focus-visible:rh-ring-ring",
               radiusClasses6[radius],