@react-fabric/form 1.0.0-beta.8 → 1.0.1

package/src/input/Password.tsx

@@ -21,23 +21,17 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Button, CoreIcons, Tooltip } from "@react-fabric/core";
-import { type RefProp } from "@react-fabric/core/dist/types/types";
-import classNames from "classnames";
-import {
-  useCallback,
-  useDeferredValue,
-  useEffect,
-  useMemo,
-  useState,
-  type ChangeEvent,
-} from "react";
+import { Button, Tooltip, useControlledValue } from "@react-fabric/core";
+import type { RefProp } from "@react-fabric/core/dist/types/types";
+import { cn } from "@react-fabric/utilities";
+import type { InputHTMLAttributes } from "react";
+import { useCallback, useId, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { InputWrapper } from "../internal/InputWrapper";
-import { type InputProps } from "../types";
-import { handleEnter } from "../utils";
+import type { InputProps, WrapperProps } from "../types";
+import { getWrapperProps, useHandleEnter } from "../utils";
 
-export interface PasswordProps extends InputProps, RefProp<HTMLInputElement> {
+export interface PasswordProps extends InputProps, WrapperProps, RefProp<HTMLInputElement> {
   /**
    * show password toggle
    */
@@ -46,69 +40,68 @@ export interface PasswordProps extends InputProps, RefProp<HTMLInputElement> {
    * password strength meter (0-1)
    */
   strength?: number;
+
+  autoComplete?: InputHTMLAttributes<HTMLInputElement>["autoComplete"];
 }
 
-export const Password = ({
-  ref,
-  value,
-  name,
-  strength,
-  invalid,
-  readOnly,
-  disabled,
-  required,
-  placeholder,
-  autoFocus,
-  showToggle,
-  onChange,
-  onEnterPressed,
-  ...rest
-}: PasswordProps) => {
-  const { t } = useTranslation("form");
-  const [show, setShow] = useState(false);
+/**
+ * Password input component with optional strength meter and toggle visibility.
+ */
+export function Password(props: PasswordProps) {
+  const {
+    value,
+    defaultValue,
+    onEnterPressed,
+    onChange,
+    onBlur,
+    onFocus,
+    disabled,
+    readOnly,
+    invalid,
+    showToggle,
+    strength,
+    placeholder,
+    name,
+    autoFocus,
+    allowClear,
+    autoComplete = "off",
+    ref,
+  } = props;
 
-  const [actualValue, setActualValue] = useState("");
-  const deferred = useDeferredValue(value);
+  const id = useId();
+  const { currentValue, updateValue } = useControlledValue(value, defaultValue);
 
-  const handleEnterPressed = useMemo(
-    () => handleEnter(onEnterPressed),
-    [onEnterPressed],
-  );
+  const { t } = useTranslation("form");
+  const [show, setShow] = useState(false);
 
-  useEffect(() => {
-    setActualValue(deferred ?? "");
-  }, [deferred]);
+  const handleEnterPressed = useHandleEnter(onEnterPressed);
 
   const handleChange = useCallback(
-    (e?: ChangeEvent<HTMLInputElement>) => {
-      const value = e?.target.value;
-      setActualValue(value ?? "");
-      onChange?.(value ?? undefined);
+    (e?: React.ChangeEvent<HTMLInputElement>) => {
+      const value = e?.target.value ?? defaultValue;
+      updateValue(value);
+      onChange?.(value);
     },
-    [onChange],
+    [defaultValue, updateValue, onChange],
   );
 
   return (
     <InputWrapper
-      showClear={!!actualValue}
+      id={id}
+      showClear={allowClear && !!currentValue && !disabled && !readOnly}
       onClear={handleChange}
       invalid={invalid}
-      readOnly={readOnly}
-      disabled={disabled}
-      required={required}
-      {...rest}
-      decorateEnd={
-        showToggle && (
-          <Tooltip
-            color="warning"
-            content={t(show ? "password.hide" : "password.show")}
-          >
+      {...getWrapperProps(props)}
+      actionButton={
+        showToggle &&
+        currentValue && (
+          <Tooltip color="warning" content={t(show ? "password.hide" : "password.show")}>
             <Button
               tabIndex={-1}
               color="warning"
               variant="link"
               aria-label={t(show ? "password.hide" : "password.show")}
-              icon={show ? CoreIcons.eyeOff : CoreIcons.eye}
+              icon={show ? "icon-[mdi--eye-off-outline]" : "icon-[mdi--eye-outline]"}
               onClick={() => setShow(!show)}
             />
           </Tooltip>
@@ -116,7 +109,8 @@ export const Password = ({
       }
     >
       <input
-        className="appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0"
+        id={id}
+        className="appearance-none bg-transparent py-1 px-4 not-first:ps-2 not-last:pe-2 flex-1 border-none outline-none ring-0 peer"
         aria-invalid={invalid}
         aria-disabled={disabled}
         aria-readonly={readOnly}
@@ -128,23 +122,24 @@ export const Password = ({
         size={1}
         type={show ? "text" : "password"}
         ref={ref}
-        autoComplete="off"
+        autoComplete={autoComplete}
         {...{ autoFocus }}
-        value={actualValue}
+        value={currentValue ?? ""}
+        onBlur={onBlur}
+        onFocus={onFocus}
         onChange={handleChange}
         onKeyDown={handleEnterPressed}
       />
       {!!strength && (
         <div
-          className={classNames(
-            "absolute bottom-px h-[3px] inset-x-0 after:block after:h-full after:bg-dimmed",
-            "ltr:bg-gradient-to-r rtl:bg-gradient-to-l from-danger-500 via-marigold-500 to-jade-500",
-          )}
+          className={cn("absolute bottom-px h-0.5 inset-x-0 after:block after:h-full after:bg-dimmed")}
           style={{
             paddingInlineStart: `${strength > 1 ? 100 : strength * 100}%`,
+            background:
+              "linear-gradient(to right,var(--color-scarlet-500) 25%,var(--color-amber-500) 50%,var(--color-jade-500) 75%,var(--color-avocado-500) 100%)",
           }}
         />
       )}
     </InputWrapper>
   );
-};
+}

package/src/input/Radio.tsx

@@ -21,17 +21,18 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { CoreIcons, Icon } from "@react-fabric/core";
-import { type RefProp } from "@react-fabric/core/dist/types/types";
-import classNames from "classnames";
-import { useCallback, useMemo, type ChangeEvent } from "react";
+import { Icon } from "@react-fabric/core";
+import type { RefProp } from "@react-fabric/core/dist/types/types";
+import { cn } from "@react-fabric/utilities";
+import { useCallback, useMemo } from "react";
+import { ErrorIcon } from "../internal/ErrorIcon";
 
 export interface RadioProps extends RefProp<HTMLInputElement> {
   name?: string;
   /**
    * radio label
    */
-  label?: JSX.Element | string;
+  label?: React.ReactElement | string;
   /**
    * value
    */
@@ -69,49 +70,48 @@ export interface RadioProps extends RefProp<HTMLInputElement> {
   iconChecked?: string;
 }
 
-export const Radio = ({
+/**
+ * Radio input component with custom icons and label.
+ *
+ * This component renders a radio button with an optional label and custom icons for checked and unchecked states.
+ * It supports disabled and invalid states, and allows for custom width.
+ */
+export function Radio({
   ref,
   name,
   label,
   value,
   invalid,
   disabled,
-  error,
   width,
   icon,
+  error,
   iconChecked,
   onChange,
   ...rest
-}: RadioProps) => {
-  const iconOn = useMemo(
-    () => iconChecked ?? icon ?? CoreIcons.radioOn,
-    [icon, iconChecked],
-  );
-  const iconOff = useMemo(() => icon ?? CoreIcons.radioOff, [icon]);
+}: RadioProps) {
+  const iconOn = useMemo(() => iconChecked ?? icon ?? "icon-[mdi--radiobox-marked]", [icon, iconChecked]);
+  const iconOff = useMemo(() => icon ?? "icon-[mdi--radiobox-blank]", [icon]);
 
   const handleChange = useCallback(
-    (e?: ChangeEvent<HTMLInputElement>) => {
+    (e?: React.ChangeEvent<HTMLInputElement>) => {
       // @ts-expect-error ignore
-      e?.target.checked && value && onChange?.(value);
+      if (e?.target.checked && value) onChange?.(value);
     },
     [onChange, value],
   );
 
   return (
     <label
-      className={classNames(
+      className={cn(
         invalid ? "ring-danger-500" : "ring-primary-500",
-        disabled
-          ? "opacity-50 cursor-not-allowed"
-          : "hover:opacity-100 cursor-pointer",
-        "inline-flex gap-1 py-1 items-center relative cursor-pointer opacity-85 rounded ring-offset-2 has-[:focus-visible]:ring-1",
+        disabled ? "opacity-50 cursor-not-allowed" : "hover:opacity-100 cursor-pointer",
+        "inline-flex gap-1 py-1 items-center relative cursor-pointer opacity-85 rounded ring-offset-2 has-focus-visible:ring-1",
       )}
       style={{ width }}
     >
       <input
-        className={classNames(
-          "appearance-none absolute peer opacity-0 inset-0 bg-transparent border-none outline-none ring-0",
-        )}
+        className={cn("appearance-none absolute peer opacity-0 inset-0 bg-transparent border-none outline-none ring-0")}
         aria-disabled={disabled}
         disabled={disabled}
         type="radio"
@@ -124,23 +124,14 @@ export const Radio = ({
         {...rest}
       />
       <Icon
-        className={classNames(
-          "p-0.5 hidden peer-checked:inline-block",
-          icon && !iconChecked && "bg-primary-500 text-white",
-        )}
+        className={cn("p-0.5 not-peer-checked:hidden", icon && !iconChecked && "bg-primary-500 text-white!")}
         color={invalid ? "danger" : "primary"}
         size="1.25em"
         icon={iconOn}
       />
-      <Icon
-        className={classNames("p-0.5 peer-checked:hidden")}
-        color={invalid ? "danger" : "primary"}
-        size="1.25em"
-        icon={iconOff}
-      />
-      {label && (
-        <span className="flex-initial leading-none truncate">{label}</span>
-      )}
+      <Icon className={cn("p-0.5 peer-checked:hidden")} color={invalid ? "danger" : "primary"} size="1.25em" icon={iconOff} />
+      <ErrorIcon invalid={invalid} error={error} />
+      {label && <span className="flex-initial leading-tight truncate">{label}</span>}
     </label>
   );
-};
+}

package/src/input/RadioGroup.tsx

@@ -21,15 +21,14 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import {
-  type ChildrenProp,
-  type CssProp,
-} from "@react-fabric/core/dist/types/types";
-import { Children, cloneElement } from "react";
+import { cloneChildren } from "@react-fabric/core";
+import type { ChildrenProp, CssProp } from "@react-fabric/core/dist/types/types";
+import { cn } from "@react-fabric/utilities";
+import { cloneElement, isValidElement } from "react";
 import { FieldWrapper } from "../internal/FieldWrapper";
-import { type Radio } from "./Radio";
+import type { RadioProps } from "./Radio";
 
-export interface RadioGroupProps extends ChildrenProp<typeof Radio>, CssProp {
+export interface RadioGroupProps extends ChildrenProp<RadioProps>, CssProp {
   /**
    * input label
    */
@@ -37,7 +36,7 @@ export interface RadioGroupProps extends ChildrenProp<typeof Radio>, CssProp {
   /**
    * append to label end
    */
-  appendLabel?: JSX.Element | string | number | boolean;
+  appendLabel?: React.ReactElement | string | number | boolean;
   /**
    * field info
    */
@@ -67,31 +66,37 @@ export interface RadioGroupProps extends ChildrenProp<typeof Radio>, CssProp {
    * vertical orientation
    */
   vertical?: boolean;
+  /**
+   * value
+   */
+  value?: string | number;
   /**
    * change handler
    */
   onChange?: (value: AnyObject) => void;
 }
 
-export const RadioGroup = ({
-  children,
-  name,
-  className,
-  optionWidth,
-  onChange,
-  ...rest
-}: RadioGroupProps) => {
+/**
+ * RadioGroup component for rendering a group of radio buttons.
+ * It allows for customization of the label, options, and layout.
+ * The component supports inline and vertical orientations, and can handle change events.
+ */
+export function RadioGroup({ children, name, className, optionWidth, vertical, value, onChange, ...rest }: RadioGroupProps) {
   return (
     <FieldWrapper {...rest}>
-      <div className={className}>
-        {Children.map(children, (child) =>
-          cloneElement(child as AnyObject, {
-            name,
-            onChange,
-            width: optionWidth,
-          }),
-        )}
+      <div className={cn(className, vertical && "flex flex-col gap-1")}>
+        {cloneChildren(children)?.map((child) => {
+          if (isValidElement<RadioProps & { checked: boolean }>(child)) {
+            return cloneElement(child, {
+              name,
+              checked: child.props?.value === value,
+              onChange,
+              width: optionWidth,
+            });
+          }
+          return child;
+        })}
       </div>
     </FieldWrapper>
   );
-};
+}

package/src/input/{Range.tsx → RangeSlider.tsx}

@@ -21,25 +21,15 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Format } from "@react-fabric/utilities";
-import classNames from "classnames";
-import {
-  Fragment,
-  useCallback,
-  useDeferredValue,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
+import { Format, cn } from "@react-fabric/utilities";
+import { Fragment, useCallback, useDeferredValue, useEffect, useMemo, useState } from "react";
 import { InputWrapper } from "../internal/InputWrapper";
 import { useRanger } from "../ranger";
-import { type InputProps } from "../types";
+import type { InputProps, WrapperProps } from "../types";
+import { getWrapperProps } from "../utils";
 
 export interface RangeProps
-  extends Omit<
-    InputProps<[number, number]>,
-    "placeholder" | "allowClear" | "children"
-  > {
+  extends Omit<InputProps<[number, number]>, "placeholder" | "allowClear" | "children" | "defaultValue">, WrapperProps {
   /**
    * min value
    */
@@ -75,11 +65,11 @@ export interface RangeProps
   /**
    * custom min label
    */
-  minLabel?: string;
+  minLabel?: string | React.ReactElement;
   /**
    * custom max label
    */
-  maxLabel?: string;
+  maxLabel?: string | React.ReactElement;
   /**
    * step ranges
    */
@@ -95,36 +85,34 @@ export interface RangeProps
 }
 
 /**
- * Number Range input
+ * RangeSlider component for rendering a range slider input.
+ * It supports vertical orientation, custom colors, step increments,
+ * min/max values, and display of labels and value tooltips.
+ * The component uses the Ranger library for handling the slider functionality.
+ * It also provides error handling and supports disabled and read-only states.
+ * The component is designed to be flexible and customizable, allowing for various configurations.
  */
-export const Range = ({
-  error,
-  name,
-  value,
-  step = 1,
-  min = 0,
-  max = 100,
-  height = 192,
-  color,
-  vertical,
-  showLabels,
-  showValue,
-  minLabel,
-  maxLabel,
-  ranges,
-  format,
-  autoFocus,
-  disabled,
-  readOnly,
-  onBlur,
-  onChange,
-  onEnterPressed,
-  onFocus,
-  onSlide,
-  invalid,
-  ...rest
-}: RangeProps) => {
-  const [actualValue, setActualValue] = useState<[number, number]>([0, 0]);
+export function RangeSlider(props: RangeProps) {
+  const {
+    value,
+    showLabels,
+    showValue,
+    onChange,
+    onSlide,
+    ranges,
+    invalid,
+    step = 1,
+    min = 0,
+    max = 100,
+    height = 192,
+    vertical,
+    minLabel,
+    maxLabel,
+    format,
+    color,
+  } = props;
+
+  const [actualValue, setActualValue] = useState<[number, number]>(() => [0, 0]);
   const [displayValue, setDisplayValue] = useState(false);
   const deferred = useDeferredValue(value);
 
@@ -132,16 +120,18 @@ export const Range = ({
   const maxValue = useMemo(() => ranges?.slice(-1)[0] ?? max, [max, ranges]);
 
   useEffect(() => {
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
     setActualValue(deferred ?? [min, max]);
   }, [deferred, min, max]);
   useEffect(() => {
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
     setDisplayValue(!!showValue);
   }, [showValue]);
 
   const handleChange = useCallback(
     (val: [number, number]) => {
       setActualValue(val ?? [min, max]);
-      onChange?.(val ?? undefined);
+      onChange?.(val ?? null);
     },
     [onChange, min, max],
   );
@@ -174,23 +164,14 @@ export const Range = ({
     onDrag: (val) => onSlide?.(val[0]),
     onDragStart: () => setDisplayValue(true),
     onDragEnd: () => setDisplayValue(!!showValue),
-    onChange: (values: readonly number[]) =>
-      handleChange([values[0], values[1]]),
+    onChange: (values: readonly number[]) => handleChange([values[0], values[1]]),
   });
 
   return (
-    <InputWrapper
-      {...rest}
-      noOutline
-      error={error}
-      invalid={invalid}
-      isDisabled={disabled}
-      isReadOnly={readOnly}
-      canClear={!!actualValue}
-    >
+    <InputWrapper {...getWrapperProps(props)} borderless focusRing>
       <div
-        className={classNames(
-          "flex-auto order-3 flex items-center select-none z-0",
+        className={cn(
+          "flex-1 order-3 flex items-center select-none z-0",
           vertical && "flex-col w-8",
           invalid ? "text-danger-500" : "text-primary-600",
         )}
@@ -200,17 +181,14 @@ export const Range = ({
         {showLabels && (vertical ? maxDisplay : minDisplay)}
         <div
           ref={rangerInstance.trackElRef}
-          className={classNames(
-            "flex-auto relative flex items-center",
-            vertical ? "my-2 w-8" : "mx-2 h-8",
-          )}
+          className={cn("flex-1 relative flex items-center", vertical ? "my-2 w-8" : "mx-2 h-8")}
           style={{ height: vertical ? height : undefined }}
         >
-          {rangerInstance.ticks.map(({ value, key, styles }) => (
+          {rangerInstance.ticks.map(({ key, styles }) => (
             <div
               key={key}
-              className={classNames(
-                "absolute inline-block h-1 w-1 rounded-sm bg-invert opacity-30 leading-[0] z-1",
+              className={cn(
+                "absolute inline-block h-1 w-1 rounded-sm bg-invert opacity-30 leading-0 z-1",
                 vertical && "left-1/2 -ml-0.5",
               )}
               style={styles}
@@ -219,58 +197,52 @@ export const Range = ({
           {rangerInstance.segments.map(({ key, styles, active }) => (
             <div
               key={key}
-              className={classNames(
+              className={cn(
                 "absolute",
-                active
-                  ? "bg-current z-1 opacity-90"
-                  : "bg-invert opacity-5 z-0",
-                vertical
-                  ? "-bottom-1 left-1/2 -translate-x-1/2"
-                  : "top-1/2 -translate-y-1/2",
+                active ? "bg-current z-1 opacity-90" : "bg-invert opacity-5 z-0",
+                vertical ? "-bottom-1 left-1/2 -translate-x-1/2" : "top-1/2 -translate-y-1/2",
                 !vertical && (active ? "h-1" : "h-0.5"),
                 vertical && (active ? "w-1" : "w-0.5"),
               )}
               style={styles}
             />
           ))}
-          {rangerInstance.handles.map(
-            ({ key, value, props, styles, valueStyles }) => (
-              <Fragment key={key}>
-                <button
-                  type="button"
-                  className={classNames(
-                    "bg-current cursor-pointer appearance-none h-3 w-3 rounded-full z-1 absolute",
-                    "focus:ring-2 focus:ring-offset-2",
-                    vertical && "left-1/2 -ml-1.5",
-                  )}
-                  {...props}
-                  style={styles}
-                />
-                {displayValue && (
-                  <div
-                    className={classNames(
-                      "bg-invert text-invert py-px px-2 text-xs absolute rounded z-1 whitespace-nowrap",
-                      "before:absolute before:h-1.5 before:w-1.5 before:z-[-1] before:bg-invert before:top-1/2 before:-translate-y-1/2 before:rotate-45",
-                      vertical
-                        ? "end-0 ltr:translate-x-full rtl:-translate-x-full translate-y-2"
-                        : "top-1/2 -translate-y-1/2",
-                      !vertical &&
-                        (key === 0
-                          ? "-ms-3 ltr:-translate-x-full rtl:translate-x-full ltr:before:translate-x-[0.125rem] rtl:before:-translate-x-[0.125rem] before:end-0"
-                          : "ms-3 ltr:before:-translate-x-[0.125rem] rtl:before:translate-x-[0.125rem] before:start-0"),
-                    )}
-                    data-align={key === 0 ? "start" : "end"}
-                    style={valueStyles}
-                  >
-                    {Format.number(value, format)}
-                  </div>
+          {rangerInstance.handles.map(({ key, value, props, styles, valueStyles }) => (
+            <Fragment key={key}>
+              <button
+                type="button"
+                className={cn(
+                  "bg-current cursor-pointer appearance-none h-3 w-3 rounded-full z-1 absolute",
+                  "focus:ring-2 focus:ring-offset-2",
+                  vertical && "left-1/2 -ml-1.5",
                 )}
-              </Fragment>
-            ),
-          )}
+                {...props}
+                style={styles}
+              />
+              {displayValue && (
+                <div
+                  className={cn(
+                    "bg-invert text-invert py-px px-2 text-xs absolute rounded z-1 whitespace-nowrap",
+                    "before:absolute before:h-1.5 before:w-1.5 before:z-[-1] before:bg-invert before:top-1/2 before:-translate-y-1/2 before:rotate-45",
+                    vertical
+                      ? "inset-e-0 ltr:translate-x-full rtl:-translate-x-full translate-y-2"
+                      : "top-1/2 -translate-y-1/2",
+                    !vertical &&
+                      (key === 0
+                        ? "-ms-3 ltr:-translate-x-full rtl:translate-x-full ltr:before:translate-x-0.5 rtl:before:-translate-x-0.5 before:inset-e-0"
+                        : "ms-3 ltr:before:-translate-x-0.5 rtl:before:translate-x-0.5 before:inset-s-0"),
+                  )}
+                  data-align={key === 0 ? "start" : "end"}
+                  style={valueStyles}
+                >
+                  {Format.number(value, format)}
+                </div>
+              )}
+            </Fragment>
+          ))}
         </div>
         {showLabels && (vertical ? minDisplay : maxDisplay)}
       </div>
     </InputWrapper>
   );
-};
+}