@fabio.caffarello/react-design-system 4.1.0 → 4.2.0

package/dist/ui/primitives/Input/Input.d.ts

@@ -1,24 +1,22 @@
-import type { InputHTMLAttributes, ReactNode } from "react";
-export type InputSize = "sm" | "md" | "lg";
-export type InputVariant = "default" | "outlined" | "filled";
-export type InputState = "default" | "error" | "success";
-export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
-    label?: ReactNode;
-    error?: boolean;
-    success?: boolean;
-    helperText?: string;
-    size?: InputSize;
-    variant?: InputVariant;
-    leftIcon?: ReactNode;
-    rightIcon?: ReactNode;
+import type { InputBaseProps } from "./InputBase";
+export type { InputSize, InputVariant, InputState } from "./InputBase";
+export interface InputProps extends Omit<InputBaseProps, "rightSlot"> {
     showClearButton?: boolean;
     onClear?: () => void;
 }
 /**
  * Input Component
  *
- * A styled text input component with label, error/success states, icons, and clear button.
- * Uses Composite Pattern when combined with Label and ErrorMessage.
+ * The interactive text input: everything `InputBase` renders, plus the
+ * client-only affordances that require React state — the password
+ * visibility toggle (`type="password"`), the clear button
+ * (`showClearButton`), and the `useId` auto-id fallback. It **composes**
+ * `InputBase` (issue #224): the presentational shell lives once in
+ * `InputBase`, and `Input` layers the stateful affixes on top, passing
+ * the resolved `id`, the toggled `type`, and its buttons via `rightSlot`.
+ *
+ * Need a server-renderable / native-form input with no client state?
+ * Import `InputBase` from `@fabio.caffarello/react-design-system/server`.
  *
  * @example
  * ```tsx

package/dist/ui/primitives/Input/InputBase.d.ts

@@ -0,0 +1,52 @@
+import type { InputHTMLAttributes, ReactNode } from "react";
+export type InputSize = "sm" | "md" | "lg";
+export type InputVariant = "default" | "outlined" | "filled";
+export type InputState = "default" | "error" | "success";
+export interface InputBaseProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    label?: ReactNode;
+    error?: boolean;
+    success?: boolean;
+    helperText?: string;
+    size?: InputSize;
+    variant?: InputVariant;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    /**
+     * Raw trailing-affix slot rendered inside the input's right edge with
+     * full interactivity (no `pointer-events-none`). The interactive
+     * `Input` injects its password-toggle / clear buttons here; consumers
+     * can use it for a static suffix (a unit, a badge). When omitted,
+     * `rightIcon` renders instead with the muted decorative treatment.
+     */
+    rightSlot?: ReactNode;
+}
+/**
+ * InputBase
+ *
+ * The **presentational core** of the text input — label, the `<input>`
+ * itself, decorative left/right icons, the trailing-affix slot, and the
+ * helper/error line. It holds **no React client state** (no `useState`,
+ * `useId`, `useCallback`), so it is server-safe and ships from the
+ * `./server` entry (issue #224).
+ *
+ * The interactive `Input` (default export of this folder) composes
+ * `InputBase`, owning the password-toggle state, the clear button, and
+ * the `useId` auto-id fallback — it passes the resolved `id`, the
+ * toggled `type`, and its affix buttons (`rightSlot`) down. Use
+ * `InputBase` directly for server-rendered / native-form inputs where
+ * none of that interactivity is needed (`<form method="GET">` filters,
+ * RSC pages).
+ *
+ * Accessible name: pass `id` when you pass `label` so the `<label
+ * htmlFor>` binds — `InputBase` does NOT auto-generate an id (that needs
+ * `useId`, which would make it client). A dev-only warning fires when a
+ * `label` is given without an `id`.
+ *
+ * @example
+ * ```tsx
+ * // Server component / native form — zero client state.
+ * <InputBase id="q" name="q" placeholder="Buscar…" />
+ * ```
+ */
+declare const InputBase: import("react").ForwardRefExoticComponent<InputBaseProps & import("react").RefAttributes<HTMLInputElement>>;
+export default InputBase;

package/dist/ui/primitives/Input/index.d.ts

@@ -1,2 +1,4 @@
 export { default } from "./Input";
 export type { InputProps, InputSize, InputVariant, InputState } from "./Input";
+export { default as InputBase } from "./InputBase";
+export type { InputBaseProps } from "./InputBase";

package/dist/ui/server.d.ts

@@ -8,6 +8,8 @@ export { default as ErrorMessage } from "./primitives/ErrorMessage/ErrorMessage"
 export type { ErrorMessageProps } from "./primitives/ErrorMessage/ErrorMessage";
 export { default as Info } from "./primitives/Info/Info";
 export type { InfoProps } from "./primitives/Info/Info";
+export { default as InputBase } from "./primitives/Input/InputBase";
+export type { InputBaseProps, InputSize, InputVariant, InputState, } from "./primitives/Input/InputBase";
 export { default as Label } from "./primitives/Label/Label";
 export { default as Progress } from "./primitives/Progress/Progress";
 export type { ProgressProps, ProgressSize, ProgressVariant, } from "./primitives/Progress/Progress";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fabio.caffarello/react-design-system",
   "private": false,
-  "version": "4.1.0",
+  "version": "4.2.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",