@rehagro/ui 1.0.42 → 1.0.44

package/dist/index.d.mts

@@ -239,8 +239,9 @@ declare const IconButton: React__default.ForwardRefExoticComponent<React__defaul
 } & React__default.RefAttributes<HTMLButtonElement>>;
 
 type TextInputStatus = "default" | "error";
-type TextInputSize = "sm" | "md" | "lg";
+type TextInputSize = "sm" | "md" | "lg" | "xl";
 type TextInputRadius = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
+type TextInputBorderWidth = "sm" | "md" | "lg";
 type TextInputLabelWeight = "normal" | "medium" | "semibold" | "bold";
 type TextInputProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size"> & {
     /** Label text displayed above the input */
@@ -263,6 +264,23 @@ type TextInputProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>,
     helperText?: React__default.ReactNode;
     /** Custom class for the outermost wrapper */
     wrapperClassName?: string;
+    /**
+     * Custom border color for the input container. Accepts any valid
+     * CSS color value (hex, rgb, CSS variable, etc). When provided,
+     * overrides the border color from the current `status`. Useful
+     * for highlighting cells/rows in tables, marking fields with
+     * non-error states, or theming. Does NOT change focus/ring
+     * colors — those still come from `statusClasses`.
+     */
+    borderColor?: string;
+    /**
+     * Border width token for the input container.
+     *
+     * - `sm`: default 1px border.
+     * - `md`: default 2px border.
+     * - `lg`: default 3px border.
+     */
+    borderWidth?: TextInputBorderWidth;
 };
 declare const TextInput: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size"> & {
     /** Label text displayed above the input */
@@ -285,6 +303,23 @@ declare const TextInput: React__default.ForwardRefExoticComponent<Omit<React__de
     helperText?: React__default.ReactNode;
     /** Custom class for the outermost wrapper */
     wrapperClassName?: string;
+    /**
+     * Custom border color for the input container. Accepts any valid
+     * CSS color value (hex, rgb, CSS variable, etc). When provided,
+     * overrides the border color from the current `status`. Useful
+     * for highlighting cells/rows in tables, marking fields with
+     * non-error states, or theming. Does NOT change focus/ring
+     * colors — those still come from `statusClasses`.
+     */
+    borderColor?: string;
+    /**
+     * Border width token for the input container.
+     *
+     * - `sm`: default 1px border.
+     * - `md`: default 2px border.
+     * - `lg`: default 3px border.
+     */
+    borderWidth?: TextInputBorderWidth;
 } & React__default.RefAttributes<HTMLInputElement>>;
 
 type CheckboxSize = "sm" | "md" | "lg";

package/dist/index.d.ts

@@ -239,8 +239,9 @@ declare const IconButton: React__default.ForwardRefExoticComponent<React__defaul
 } & React__default.RefAttributes<HTMLButtonElement>>;
 
 type TextInputStatus = "default" | "error";
-type TextInputSize = "sm" | "md" | "lg";
+type TextInputSize = "sm" | "md" | "lg" | "xl";
 type TextInputRadius = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
+type TextInputBorderWidth = "sm" | "md" | "lg";
 type TextInputLabelWeight = "normal" | "medium" | "semibold" | "bold";
 type TextInputProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size"> & {
     /** Label text displayed above the input */
@@ -263,6 +264,23 @@ type TextInputProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>,
     helperText?: React__default.ReactNode;
     /** Custom class for the outermost wrapper */
     wrapperClassName?: string;
+    /**
+     * Custom border color for the input container. Accepts any valid
+     * CSS color value (hex, rgb, CSS variable, etc). When provided,
+     * overrides the border color from the current `status`. Useful
+     * for highlighting cells/rows in tables, marking fields with
+     * non-error states, or theming. Does NOT change focus/ring
+     * colors — those still come from `statusClasses`.
+     */
+    borderColor?: string;
+    /**
+     * Border width token for the input container.
+     *
+     * - `sm`: default 1px border.
+     * - `md`: default 2px border.
+     * - `lg`: default 3px border.
+     */
+    borderWidth?: TextInputBorderWidth;
 };
 declare const TextInput: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size"> & {
     /** Label text displayed above the input */
@@ -285,6 +303,23 @@ declare const TextInput: React__default.ForwardRefExoticComponent<Omit<React__de
     helperText?: React__default.ReactNode;
     /** Custom class for the outermost wrapper */
     wrapperClassName?: string;
+    /**
+     * Custom border color for the input container. Accepts any valid
+     * CSS color value (hex, rgb, CSS variable, etc). When provided,
+     * overrides the border color from the current `status`. Useful
+     * for highlighting cells/rows in tables, marking fields with
+     * non-error states, or theming. Does NOT change focus/ring
+     * colors — those still come from `statusClasses`.
+     */
+    borderColor?: string;
+    /**
+     * Border width token for the input container.
+     *
+     * - `sm`: default 1px border.
+     * - `md`: default 2px border.
+     * - `lg`: default 3px border.
+     */
+    borderWidth?: TextInputBorderWidth;
 } & React__default.RefAttributes<HTMLInputElement>>;
 
 type CheckboxSize = "sm" | "md" | "lg";

package/dist/index.js

@@ -1064,7 +1064,8 @@ var statusClasses = {
 var sizeClasses3 = {
   sm: "rh-h-input-sm rh-text-sm rh-px-input-x-sm",
   md: "rh-h-input-md rh-text-sm rh-px-input-x-md",
-  lg: "rh-h-input-lg rh-text-base rh-px-input-x-lg"
+  lg: "rh-h-input-lg rh-text-base rh-px-input-x-lg",
+  xl: "rh-h-input-xl rh-text-sm rh-px-input-x-md"
 };
 var radiusClasses3 = {
   none: "rh-rounded-none",
@@ -1076,10 +1077,16 @@ var radiusClasses3 = {
   xl: "rh-rounded-xl",
   full: "rh-rounded-full"
 };
+var borderWidthClasses = {
+  sm: "rh-border-sm",
+  md: "rh-border-md",
+  lg: "rh-border-lg"
+};
 var iconSizeClasses = {
   sm: "rh-w-4 rh-h-4",
   md: "rh-w-5 rh-h-5",
-  lg: "rh-w-5 rh-h-5"
+  lg: "rh-w-5 rh-h-5",
+  xl: "rh-w-5 rh-h-5"
 };
 var helperStatusClasses = {
   default: "rh-text-text-muted",
@@ -1105,6 +1112,8 @@ var TextInput = React9.forwardRef(function TextInput2({
   disabled,
   className = "",
   wrapperClassName = "",
+  borderColor,
+  borderWidth = "sm",
   id,
   ...rest
 }, ref) {
@@ -1125,9 +1134,11 @@ var TextInput = React9.forwardRef(function TextInput2({
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
+            style: borderColor ? { borderColor } : void 0,
             className: [
               "rh-flex rh-items-center rh-gap-2",
-              "rh-border rh-bg-surface rh-font-body",
+              "rh-bg-surface rh-font-body",
+              borderWidthClasses[borderWidth],
               "rh-transition-colors rh-duration-150",
               "rh-overflow-hidden",
               statusClasses[visualStatus],
@@ -2311,6 +2322,7 @@ var addButtonSizeClasses = {
   md: "rh-w-5 rh-h-5",
   lg: "rh-w-5 rh-h-5"
 };
+var getSubtitleClassName3 = (subtitle) => subtitle.trim() === "*" ? "rh-text-danger" : "rh-text-text-muted";
 var TagInput = React9.forwardRef(function TagInput2({
   label,
   subtitle,
@@ -2367,7 +2379,7 @@ var TagInput = React9.forwardRef(function TagInput2({
       children: [
         label && /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: inputId, className: "rh-flex rh-items-baseline rh-gap-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-text-sm rh-font-semibold rh-text-text", children: label }),
-          subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-text-sm rh-text-text-muted", children: subtitle })
+          subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `rh-text-sm ${getSubtitleClassName3(subtitle)}`, children: subtitle })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",