@react-fabric/form 1.0.0-beta.56 → 1.0.0-beta.58

package/dist/types/form/Form.d.ts

@@ -65,4 +65,15 @@ export interface FormProps<K extends KeyValue = KeyValue> {
  * @see {@link https://github.com/jquense/yup} for more details on the Yup validation schema.
  */
 export declare const Form: <K extends KeyValue>({ formRef, schema, children, defaultValues, onSubmit, onChange, ...rest }: PropsWithChildren<FormProps<K>>) => import("react/jsx-runtime").JSX.Element;
+export declare const useForm: <K extends KeyValue = KeyValue>() => {
+    values: import("react-hook-form").DeepPartialSkipArrayKey<K> & K;
+    formState: FormState<K>;
+    getValues: import("react-hook-form").UseFormGetValues<K>;
+    setValue: import("react-hook-form").UseFormSetValue<K>;
+    watch: import("react-hook-form").UseFormWatch<K>;
+    reset: import("react-hook-form").UseFormReset<K>;
+    resetField: import("react-hook-form").UseFormResetField<K>;
+    setError: import("react-hook-form").UseFormSetError<K>;
+    setFocus: import("react-hook-form").UseFormSetFocus<K>;
+};
 export {};

package/dist/types/index.d.ts

@@ -1,6 +1,6 @@
 import "./i18n";
 export { Controller } from "./form/Controller";
-export { Form, type FormRef } from "./form/Form";
+export { Form, useForm, type FormRef } from "./form/Form";
 export { SchemaEditor } from "./builder/SchemaEditor";
 export { useFileUploader } from "./hooks/useFileUploader";
 export { useFormBuilder } from "./hooks/useFormBuilder";

package/dist/types/input/ArrayInput.d.ts

@@ -47,16 +47,13 @@ export interface ArrayInputProps<T extends AnyObject = string> {
     children: React.ReactNode | ((props: {
         index: number;
         name: string;
+        item: T;
     }) => ReactNode);
     /**
      * add item button label
      */
     addLabel?: string;
     buttonPosition?: "top" | "bottom" | "both";
-    /**
-     * fixed length list
-     */
-    fixedList?: boolean;
     arrayRef?: Ref<{
         addItem: (item: T) => void;
         removeItem: (idx: number) => void;
@@ -64,7 +61,7 @@ export interface ArrayInputProps<T extends AnyObject = string> {
     /**
      * add new item
      */
-    onAdd?: () => AnyObject;
+    onAdd?: () => T;
     /**
      * on item remove
      */
@@ -76,11 +73,11 @@ export interface ArrayInputProps<T extends AnyObject = string> {
     /**
      * can remove item
      */
-    canRemove?: (props: {
+    canRemove?: false | "newonly" | ((props: {
         item: T;
         index: number;
         lastItem: boolean;
-    }) => boolean;
+    }) => boolean);
     /**
      * field width
      */
@@ -133,4 +130,4 @@ export interface ArrayInputProps<T extends AnyObject = string> {
  * @see {@link https://react-hook-form.com/api/usefieldarray} for more details on `useFieldArray`.
  * @see {@link https://react-dnd.github.io/react-dnd/about} for more details on DnD context and sorting.
  */
-export declare const ArrayInput: <T extends AnyObject = string>({ name, children, addLabel, fixedList, focusName, buttonPosition, onAdd, onRemove, onBeforeRemove, canRemove, arrayRef, enableSorting, disabled, readOnly, minItems, maxItems, ...rest }: ArrayInputProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const ArrayInput: <T extends AnyObject = string>({ name, children, addLabel, focusName, buttonPosition, onAdd, onRemove, onBeforeRemove, canRemove, arrayRef, enableSorting, disabled, readOnly, minItems, maxItems, ...rest }: ArrayInputProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/AvatarInput.d.ts

@@ -1,5 +1,6 @@
 import { type RefProp } from "@react-fabric/core/dist/types/types";
 import { type UploadHandler } from "../hooks/useFileUploader";
+import { AvatarProps } from "@react-fabric/core/dist/types/components/avatar/Avatar";
 export interface Props extends RefProp {
     /**
      * field name
@@ -17,6 +18,10 @@ export interface Props extends RefProp {
      * avatar name
      */
     avatarName?: string;
+    rounded?: boolean;
+    variant?: AvatarProps["variant"];
+    fallbackIcon?: AvatarProps["fallbackIcon"];
+    avatarClassName?: AvatarProps["className"];
     size?: string | number;
     /**
      * upload handler to store file in temp storage
@@ -43,4 +48,4 @@ export interface Props extends RefProp {
  * @param {Props} props - The properties for the AvatarInput component.
  * @returns {JSX.Element} - The rendered AvatarInput component.
  */
-export declare const AvatarInput: ({ size, avatarName, value, defaultValue, fileUrl, uploadHandler, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const AvatarInput: ({ size, avatarName, avatarClassName, value, rounded, defaultValue, fallbackIcon, variant, fileUrl, uploadHandler, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Hidden.d.ts

@@ -7,6 +7,10 @@ interface Props {
      * hidden value will fire change for form update
      */
     hiddenValue?: AnyObject;
+    /**
+     * default avatar image
+     */
+    defaultValue?: string;
     /**
      * form onChange handler
      */
@@ -20,5 +24,5 @@ interface Props {
  * @param {Object} props - Component properties.
  * @returns {JSX.Element} The rendered hidden input field and error icon.
  */
-export declare const HiddenInput: ({ hiddenValue, onChange, invalid, error, value, name, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const HiddenInput: ({ hiddenValue, defaultValue, onChange, invalid, error, value, name, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/select/List.d.ts

@@ -7,6 +7,6 @@ import { type SelectProps } from "../types";
  * @param {SelectProps<T>} props - The properties for the List component.
  * @returns {JSX.Element} The rendered List component.
  */
-export declare const List: <T extends AnyObject = string>({ ref, name, value, readOnly, disabled, required, placeholder, autoFocus, options, height, groupProperty, labelProperty, valueProperty, sortProperty, multiple, allowCreate, searchable, createOption, matcher, renderer, onQuery, onChange, onSelect, onEnterPressed, emptyDisplay, invalid, error, allowClear, decorateStart, decorateEnd, "data-inner": isInner, "data-hide-selected": hideSelected, ...rest }: Omit<SelectProps<T>, "defaultOpen" | "hideHandle"> & {
+export declare const List: <T extends AnyObject = string>({ ref, name, value, readOnly, disabled, required, placeholder, autoFocus, options, height, groupProperty, labelProperty, valueProperty, infoProperty, sortProperty, multiple, allowCreate, searchable, createOption, matcher, renderer, onQuery, onChange, onSelect, onEnterPressed, emptyDisplay, invalid, error, allowClear, decorateStart, decorateEnd, "data-inner": isInner, "data-hide-selected": hideSelected, ...rest }: Omit<SelectProps<T>, "defaultOpen" | "hideHandle"> & {
     height?: string | number;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/types/select/Options.d.ts

@@ -1,6 +1,7 @@
 import { type ReactElement, type ReactNode } from "react";
-export declare const Options: ({ ref, style, items, active, className, itemRef, empty, valueProperty, labelProperty, itemProps, children, ...rest }: {
+export declare const Options: ({ ref, style, items, active, className, itemRef, empty, info, valueProperty, labelProperty, itemProps, children, ...rest }: {
     ref: AnyObject;
+    info?: AnyObject;
     itemRef: AnyObject;
     style?: AnyObject;
     items: AnyObject[];

package/dist/types/select/Select.d.ts

@@ -7,4 +7,4 @@ import { type SelectProps } from "../types";
  * @param {SelectProps<T>} props - The properties for the Select component.
  * @returns {JSX.Element} The rendered Select component.
  */
-export declare const Select: <T extends AnyObject = string>({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, error, options, defaultOpen, hideHandle, groupProperty, labelProperty, valueProperty, sortProperty, multiple, searchable, allowCreate, emptyDisplay, createOption, matcher, renderer, onQuery, onChange, onSelect, onEnterPressed, ...rest }: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: <T extends AnyObject = string>({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, error, options, defaultOpen, hideHandle, groupProperty, labelProperty, valueProperty, sortProperty, infoProperty, multiple, searchable, allowCreate, emptyDisplay, createOption, matcher, renderer, onQuery, onChange, onSelect, onEnterPressed, ...rest }: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/select/useSelect.d.ts

@@ -4,15 +4,17 @@ interface State {
     open: boolean;
     loading: boolean;
     activeIndex: number | null;
+    activeItem: AnyObject;
     selectedIndex: number | null;
     value: AnyObject;
     query?: string;
     items: AnyObject[];
 }
-export declare const useSelect: ({ options, value, defaultOpen, autoComplete, multiple, allowCreate, groupProperty, valueProperty, labelProperty, sortProperty, createOption, matcher, onQuery, onChange, onSelect, }: {
+export declare const useSelect: ({ options, value, autoComplete, alwaysOpen, defaultOpen, multiple, allowCreate, groupProperty, valueProperty, labelProperty, sortProperty, createOption, matcher, onQuery, onChange, onSelect, }: {
     value?: AnyObject;
     options?: AnyObject[];
     multiple?: boolean;
+    alwaysOpen?: boolean;
     defaultOpen?: boolean;
     allowCreate?: boolean;
     groupProperty?: AnyObject;
@@ -29,6 +31,7 @@ export declare const useSelect: ({ options, value, defaultOpen, autoComplete, mu
     state: State | {
         value: any;
         activeIndex: null;
+        activeItem: null;
         selectedIndex: any;
         multiple: boolean;
         emptyValue: AnyObject;

package/dist/types/types/index.d.ts

@@ -122,6 +122,10 @@ export interface BaseSelectProps<T extends AnyObject = string> {
      * value property name
      */
     valueProperty?: keyof T;
+    /**
+     * value property name
+     */
+    infoProperty?: keyof T;
     /**
      * value property name
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/form",
-  "version": "1.0.0-beta.56",
+  "version": "1.0.0-beta.58",
   "description": "RUF: Form package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -35,33 +35,32 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/modifiers": "^9.0.0",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
-    "@floating-ui/react": "^0.27.9",
-    "@hookform/resolvers": "^3.9.0",
-    "@react-fabric/core": "^1.0.0-beta.55",
-    "@react-fabric/date": "^1.0.0-beta.55",
-    "@react-fabric/utilities": "^1.0.0-beta.52",
-    "classnames": "^2.5.1",
-    "color": "^4.2.3",
-    "react-color": "^2.19.3",
-    "react-hook-form": "^7.52.1"
+    "@dnd-kit/core": "~6.3.1",
+    "@dnd-kit/modifiers": "~9.0.0",
+    "@dnd-kit/sortable": "~10.0.0",
+    "@dnd-kit/utilities": "~3.2.2",
+    "@floating-ui/react": "~0.27.16",
+    "@hookform/resolvers": "~5.2.2",
+    "@react-fabric/core": "^1.0.0-beta.58",
+    "@react-fabric/date": "^1.0.0-beta.58",
+    "@react-fabric/utilities": "^1.0.0-beta.58",
+    "classnames": "~2.5.1",
+    "color": "~5.0.2",
+    "react-color": "~2.19.3",
+    "react-hook-form": "~7.65.0"
   },
   "peerDependencies": {
-    "i18next": "^25.2.1",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-i18next": "^15.5.2"
+    "i18next": "~25.6.0",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "react-i18next": "~16.2.1"
   },
   "devDependencies": {
-    "@types/axios": "^0.14.0",
-    "@types/react-color": "^3.0.12"
+    "@types/react-color": "~3.0.13"
   },
   "engines": {
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "fd9dd6cfd1a58efb5c4bfb6446928a78cb4f4266"
+  "gitHead": "7e66f8c498e37a40e410ecafff2ea6b31505dc1a"
 }

package/src/form/Form.tsx

@@ -29,13 +29,16 @@ import {
   useEffect,
   useImperativeHandle,
   useRef,
+  useState,
   useTransition,
   type PropsWithChildren,
   type Ref,
 } from "react";
 import {
   FormProvider,
-  useForm,
+  useFormContext,
+  useForm as useFormHook,
+  useWatch,
   type DefaultValues,
   type FormState,
 } from "react-hook-form";
@@ -120,7 +123,7 @@ export const Form = <K extends KeyValue>({
   ...rest
 }: PropsWithChildren<FormProps<K>>) => {
   const ref = useRef<HTMLFormElement>(null);
-  const form = useForm<K>({
+  const form = useFormHook<K>({
     shouldFocusError: true,
     resolver: schema && (yupResolver(schema) as AnyObject),
     defaultValues: defaultValues as DefaultValues<K>,
@@ -202,3 +205,32 @@ export const Form = <K extends KeyValue>({
     </FormProvider>
   );
 };
+
+export const useForm = <K extends KeyValue = KeyValue>() => {
+  const {
+    formState,
+    getValues,
+    setValue,
+    watch,
+    reset,
+    resetField,
+    setError,
+    setFocus,
+  } = useFormContext<K>();
+  const values = useWatch<K>();
+
+  return {
+    values: {
+      ...values,
+      ...getValues(),
+    },
+    formState,
+    getValues,
+    setValue,
+    watch,
+    reset,
+    resetField,
+    setError,
+    setFocus,
+  };
+};

package/src/index.ts

@@ -24,7 +24,7 @@
 import "./i18n";
 
 export { Controller } from "./form/Controller";
-export { Form, type FormRef } from "./form/Form";
+export { Form, useForm, type FormRef } from "./form/Form";
 
 export { SchemaEditor } from "./builder/SchemaEditor";
 

package/src/input/ArrayInput.tsx

@@ -34,9 +34,12 @@ import { isFalse, isString } from "@react-fabric/utilities";
 import classNames from "classnames";
 import {
   cloneElement,
+  use,
   useCallback,
+  useEffect,
   useImperativeHandle,
   useMemo,
+  useState,
   type PropsWithChildren,
   type ReactNode,
   type Ref,
@@ -96,16 +99,12 @@ export interface ArrayInputProps<T extends AnyObject = string> {
   enableSorting?: boolean;
   children:
     | React.ReactNode
-    | ((props: { index: number; name: string }) => ReactNode);
+    | ((props: { index: number; name: string; item: T }) => ReactNode);
   /**
    * add item button label
    */
   addLabel?: string;
   buttonPosition?: "top" | "bottom" | "both";
-  /**
-   * fixed length list
-   */
-  fixedList?: boolean;
   arrayRef?: Ref<{
     addItem: (item: T) => void;
     removeItem: (idx: number) => void;
@@ -113,7 +112,7 @@ export interface ArrayInputProps<T extends AnyObject = string> {
   /**
    * add new item
    */
-  onAdd?: () => AnyObject;
+  onAdd?: () => T;
   /**
    * on item remove
    */
@@ -125,7 +124,10 @@ export interface ArrayInputProps<T extends AnyObject = string> {
   /**
    * can remove item
    */
-  canRemove?: (props: { item: T; index: number; lastItem: boolean }) => boolean;
+  canRemove?:
+    | false
+    | "newonly"
+    | ((props: { item: T; index: number; lastItem: boolean }) => boolean);
 
   /**
    * field width
@@ -184,7 +186,6 @@ export const ArrayInput = <T extends AnyObject = string>({
   name,
   children,
   addLabel,
-  fixedList,
   focusName = "",
   buttonPosition = "bottom",
   onAdd,
@@ -211,6 +212,11 @@ export const ArrayInput = <T extends AnyObject = string>({
     control: form.control,
   });
 
+  const [initialList, setInitialList] = useState<string[]>([]);
+  useEffect(() => {
+    setInitialList(fields.map((f) => f.__ID__));
+  }, []);
+
   const error = useMemo<AnyObject>(
     () =>
       form.formState.errors[name]?.message ??
@@ -218,8 +224,27 @@ export const ArrayInput = <T extends AnyObject = string>({
     [form.formState.errors],
   );
 
+  const removeCheck = useCallback(
+    (item: T, index: number) => {
+      if (canRemove === false) return false;
+      if (canRemove === "newonly") {
+        return initialList.includes((item as any).__ID__) ? false : true;
+      }
+      if (typeof canRemove === "function") {
+        return canRemove({
+          item,
+          index,
+          lastItem: index + 1 === fields.length,
+        });
+      }
+      return true;
+    },
+    [canRemove, initialList, fields],
+  );
+
   const handleAdd = useCallback(
-    (item: T) => {
+    (item?: T) => {
+      if (!item) return;
       append(item);
       setTimeout(() => {
         form.setFocus(
@@ -349,14 +374,26 @@ export const ArrayInput = <T extends AnyObject = string>({
             onClick={() => handleAdd(onAdd?.())}
             data-invalid={!!error}
             disabled={!!disabled || readOnly || fields.length > maxItems}
-            className={classNames("fabric-addButton", "me-10")}
+            className={classNames(
+              "fabric-addButton",
+              canRemove !== false && "me-10",
+            )}
           >
-            {addLabel ?? t("addArray")}
+            {addLabel ?? t("form:addArray")}
           </Button>
         </Tooltip>
       </div>
     ),
-    [error, fields, handleAdd, disabled, readOnly, addLabel, maxItems],
+    [
+      error,
+      fields,
+      handleAdd,
+      canRemove,
+      disabled,
+      readOnly,
+      addLabel,
+      maxItems,
+    ],
   );
 
   return (
@@ -365,7 +402,7 @@ export const ArrayInput = <T extends AnyObject = string>({
         {...rest}
         appendLabel={
           <div className="-me-2">
-            {!fixedList && onAdd && buttonPosition !== "bottom" && addButton}
+            {onAdd && buttonPosition !== "bottom" && addButton}
           </div>
         }
       >
@@ -379,6 +416,7 @@ export const ArrayInput = <T extends AnyObject = string>({
               {typeof children === "function"
                 ? children({
                     index,
+                    item: item as any,
                     name: `${name}.${index}`,
                   })
                 : cloneChildren(children, (child: AnyObject) =>
@@ -403,7 +441,7 @@ export const ArrayInput = <T extends AnyObject = string>({
                       ),
                     ),
                   )}
-              {!fixedList && (
+              {canRemove !== false && (
                 <Button
                   aria-label="Remove item"
                   icon={CoreIcons.remove}
@@ -414,20 +452,16 @@ export const ArrayInput = <T extends AnyObject = string>({
                     disabled ||
                     readOnly ||
                     fields.length <= minItems ||
-                    canRemove?.({
-                      item: item as T,
-                      index,
-                      lastItem: index + 1 === fields.length,
-                    }) !== false
+                    removeCheck(item as any, index) === false
                   }
-                  onClick={() => handleRemove(item as T, index)}
+                  onClick={() => handleRemove(item as any, index)}
                 />
               )}
             </SortableItem>
           ))}
         </Wrapper>
       </FieldWrapper>
-      {!fixedList && onAdd && buttonPosition !== "top" && addButton}
+      {onAdd && buttonPosition !== "top" && addButton}
     </div>
   );
 };

package/src/input/AvatarInput.tsx

@@ -26,6 +26,8 @@ import { type RefProp } from "@react-fabric/core/dist/types/types";
 import { useEffect, useState } from "react";
 import { useFileUploader, type UploadHandler } from "../hooks/useFileUploader";
 import { HiddenInput } from "./Hidden";
+import { AvatarProps } from "@react-fabric/core/dist/types/components/avatar/Avatar";
+import classNames from "classnames";
 
 export interface Props extends RefProp {
   /**
@@ -44,6 +46,10 @@ export interface Props extends RefProp {
    * avatar name
    */
   avatarName?: string;
+  rounded?: boolean;
+  variant?: AvatarProps["variant"];
+  fallbackIcon?: AvatarProps["fallbackIcon"];
+  avatarClassName?: AvatarProps["className"];
   size?: string | number;
   /**
    * upload handler to store file in temp storage
@@ -74,8 +80,12 @@ export interface Props extends RefProp {
 export const AvatarInput = ({
   size = "6rem",
   avatarName,
+  avatarClassName,
   value,
+  rounded,
   defaultValue,
+  fallbackIcon,
+  variant,
   fileUrl,
   uploadHandler,
   ...rest
@@ -117,9 +127,23 @@ export const AvatarInput = ({
 
   return (
     <div className="flex flex-nowrap items-end overflow-hidden">
-      <div className="inline-block leading-none rounded-full relative outline overflow-hidden">
-        <Avatar name={avatarName ?? "temp"} size={size} avatar={base64} />
-        <div className="absolute inset-x-0 bottom-0 cursor-pointer bg-black/20 hover:bg-black/50 text-white text-xs text-center py-1">
+      <div
+        className={classNames(
+          "inline-block leading-none relative outline overflow-hidden",
+          rounded && "rounded-full",
+          !rounded && "rounded",
+        )}
+      >
+        <Avatar
+          name={avatarName ?? "temp"}
+          size={size}
+          avatar={base64}
+          rounded={rounded}
+          variant={variant}
+          fallbackIcon={fallbackIcon}
+          className={avatarClassName}
+        />
+        <div className="absolute inset-x-0 bottom-0 cursor-pointer opacity-50 bg-black/50 hover:opacity-90 text-white text-xs text-center py-1">
           <span>Edit</span>
           <input
             type="file"
@@ -129,11 +153,14 @@ export const AvatarInput = ({
           />
         </div>
       </div>
-      <HiddenInput hiddenValue={list?.[0]?.path ?? defaultValue} {...rest} />
+      <HiddenInput
+        hiddenValue={list?.[0]?.path}
+        defaultValue={defaultValue}
+        {...rest}
+      />
       {files.map((file, idx) => (
         <div key={idx} className="px-2 py-1 flex-1 overflow-hidden">
           <div className="flex flex-nowrap gap-1 items-center">
-            <div className="flex-initial truncate pe-2">{file.filename}</div>
             {file.error && (
               <div className="flex-1 truncate px-2">
                 <span className="text-danger-600">{file.error}</span>

package/src/input/ColorInput.tsx

@@ -148,6 +148,7 @@ export const ColorInput = ({
     >
       <button
         data-ref="button"
+        type="button"
         className="flex-1 flex items-center"
         ref={refs.setReference}
         {...getReferenceProps({

package/src/input/Hidden.tsx

@@ -33,6 +33,10 @@ interface Props {
    * hidden value will fire change for form update
    */
   hiddenValue?: AnyObject;
+  /**
+   * default avatar image
+   */
+  defaultValue?: string;
   /**
    * form onChange handler
    */
@@ -49,6 +53,7 @@ interface Props {
  */
 export const HiddenInput = ({
   hiddenValue,
+  defaultValue,
   onChange,
   // @ts-expect-error ignore
   // eslint-disable-next-line react/prop-types
@@ -62,11 +67,10 @@ export const HiddenInput = ({
   name,
 }: Props) => {
   useEffect(() => {
-    hiddenValue &&
-      setTimeout(() => {
-        onChange?.(hiddenValue);
-      }, 50);
-  }, [hiddenValue]);
+    setTimeout(() => {
+      onChange?.(hiddenValue ?? defaultValue);
+    }, 50);
+  }, [hiddenValue, defaultValue]);
   return (
     <Fragment>
       <input type="hidden" onChange={onChange} value={value} name={name} />

package/src/input/Slider.tsx

@@ -214,8 +214,8 @@ export const Slider = ({
         <div
           ref={rangerInstance.trackElRef}
           className={classNames(
-            "flex-1 relative flex items-center",
-            vertical ? "my-2 w-8" : "mx-2 h-8",
+            "relative flex items-center",
+            vertical ? "my-2 w-8" : "flex-1 mx-2 h-8",
           )}
           style={{ height: vertical ? height : undefined }}
         >
@@ -262,10 +262,10 @@ export const Slider = ({
                 {displayValue && (
                   <div
                     className={classNames(
-                      "bg-invert text-invert py-px px-2 text-xs absolute rounded z-[5] whitespace-nowrap",
+                      "bg-invert text-invert py-px px-2 text-xs absolute rounded z-[5] whitespace-nowrap pointer-events-none",
                       "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"
+                        ? "end-0 ltr:translate-x-full rtl:-translate-x-full translate-y-2 ltr:before:-translate-x-[0.125rem] rtl:before:translate-x-[0.125rem] before:start-0"
                         : "top-1/2 -translate-y-1/2",
                       !vertical &&
                         (percentage > 50

package/src/input/Textarea.tsx

@@ -131,7 +131,7 @@ export const Textarea = ({
       {...rest}
     >
       <textarea
-        className="appearance-none self-stretch bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 min-h-20 resize-none"
+        className="appearance-none self-stretch bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 min-h-12 resize-none"
         aria-invalid={invalid}
         aria-disabled={disabled}
         aria-readonly={readOnly}