@manafishrov/ui 1.3.3 → 1.3.5

package/src/components/form/DatePickerField.tsx

@@ -1,5 +1,5 @@
 import type { DatePickerInputProps, DateValue } from '@ark-ui/solid';
-import type { Component, ComponentProps } from 'solid-js';
+import type { Component, ComponentProps, JSXElement } from 'solid-js';
 
 import {
   DatePicker,
@@ -13,6 +13,7 @@ import {
 import { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from '@/components/Field';
 
 import { useFieldContext } from './context';
+import { WithTrailingAddon } from './WithTrailingAddon';
 
 const DATE_PICKER_ROOT_PROPS = [
   'min',
@@ -63,6 +64,7 @@ export type DatePickerFieldProps = DatePickerInputProps &
     label?: string;
     description?: string;
     showTrigger?: boolean;
+    trailingAddon?: JSXElement;
   };
 
 const DatePickerInputGroup: Component<DatePickerInputProps & { showTrigger?: boolean }> = (
@@ -95,6 +97,7 @@ const DATE_PICKER_FIELD_PROPS = [
   'readOnly',
   'placeholder',
   'showTrigger',
+  'trailingAddon',
 ] as const;
 
 export const DatePickerField: Component<DatePickerFieldProps> = (props) => {
@@ -111,25 +114,27 @@ export const DatePickerField: Component<DatePickerFieldProps> = (props) => {
     >
       <FieldLabel>{local.label}</FieldLabel>
       <FieldContent>
-        <DatePicker
-          value={field().state.value}
-          onValueChange={(details) => {
-            field().handleChange(details.value);
-          }}
-          onBlur={() => {
-            field().handleBlur();
-          }}
-          invalid={field().state.meta.errors.length > 0}
-          disabled={local.disabled ?? false}
-          readOnly={local.readOnly ?? false}
-          {...rootProps}
-        >
-          <DatePickerInputGroup
-            {...inputProps}
-            placeholder={local.placeholder}
-            {...(typeof local.showTrigger === 'boolean' && { showTrigger: local.showTrigger })}
-          />
-        </DatePicker>
+        <WithTrailingAddon addon={local.trailingAddon}>
+          <DatePicker
+            value={field().state.value}
+            onValueChange={(details) => {
+              field().handleChange(details.value);
+            }}
+            onBlur={() => {
+              field().handleBlur();
+            }}
+            invalid={field().state.meta.errors.length > 0}
+            disabled={local.disabled ?? false}
+            readOnly={local.readOnly ?? false}
+            {...rootProps}
+          >
+            <DatePickerInputGroup
+              {...inputProps}
+              placeholder={local.placeholder}
+              {...(typeof local.showTrigger === 'boolean' && { showTrigger: local.showTrigger })}
+            />
+          </DatePicker>
+        </WithTrailingAddon>
         <FieldError errors={field().state.meta.errors} />
         <FieldDescription>{local.description}</FieldDescription>
       </FieldContent>

package/src/components/form/Form.tsx

@@ -1,5 +1,6 @@
+import type { Component, ComponentProps } from 'solid-js';
+
 import { createFormHook } from '@tanstack/solid-form';
-import { splitProps, type Component, type ComponentProps } from 'solid-js';
 import { cn } from 'tailwind-variants';
 
 import { AutoSubmit } from './AutoSubmit';
@@ -27,7 +28,7 @@ export const Form: Component<FormProps> = (props) => {
 
   return (
     <form
-      class={cn('space-y-6 relative', local.class)}
+      class={cn('space-y-8 relative', local.class)}
       onSubmit={(submitEvent) => {
         submitEvent.preventDefault();
         submitEvent.stopPropagation();

package/src/components/form/NumberInputField.tsx

@@ -1,4 +1,4 @@
-import type { Component, ComponentProps, JSX } from 'solid-js';
+import type { Component, ComponentProps, JSX, JSXElement } from 'solid-js';
 
 import { Field, FieldLabel, FieldContent, FieldError, FieldDescription } from '@/components/Field';
 import {
@@ -9,6 +9,7 @@ import {
 } from '@/components/NumberInput';
 
 import { useFieldContext } from './context';
+import { WithTrailingAddon } from './WithTrailingAddon';
 
 const NUMBER_INPUT_ROOT_PROPS = [
   'min',
@@ -34,6 +35,7 @@ export type NumberInputFieldProps = ComponentProps<typeof NumberInputInput> &
     label?: string;
     description?: string;
     showTriggers?: boolean;
+    trailingAddon?: JSXElement;
   };
 
 const toNumberInputValue = (value: number | undefined): string => {
@@ -46,7 +48,7 @@ const toNumberInputValue = (value: number | undefined): string => {
 
 type NumberInputFieldLocalProps = Pick<
   NumberInputFieldProps,
-  'label' | 'description' | 'required' | 'disabled' | 'readOnly' | 'showTriggers'
+  'label' | 'description' | 'required' | 'disabled' | 'readOnly' | 'showTriggers' | 'trailingAddon'
 >;
 
 type NumberInputFieldRootProps = Pick<
@@ -122,24 +124,26 @@ const renderNumberInputField = (props: RenderNumberInputFieldProps): JSX.Element
   >
     <FieldLabel>{props.local.label}</FieldLabel>
     <FieldContent>
-      <NumberInput
-        value={props.inputValue()}
-        onValueChange={props.onValueChange}
-        onValueCommit={props.onValueCommit}
-        onBlur={props.onBlur}
-        invalid={props.field().state.meta.errors.length > 0}
-        disabled={props.local.disabled ?? false}
-        readOnly={props.local.readOnly ?? false}
-        required={props.local.required ?? false}
-        {...props.rootProps}
-      >
-        <NumberInputControl>
-          <NumberInputInput {...props.inputProps} />
-          <Show when={props.local.showTriggers !== false}>
-            <NumberInputTriggers />
-          </Show>
-        </NumberInputControl>
-      </NumberInput>
+      <WithTrailingAddon addon={props.local.trailingAddon}>
+        <NumberInput
+          value={props.inputValue()}
+          onValueChange={props.onValueChange}
+          onValueCommit={props.onValueCommit}
+          onBlur={props.onBlur}
+          invalid={props.field().state.meta.errors.length > 0}
+          disabled={props.local.disabled ?? false}
+          readOnly={props.local.readOnly ?? false}
+          required={props.local.required ?? false}
+          {...props.rootProps}
+        >
+          <NumberInputControl>
+            <NumberInputInput {...props.inputProps} />
+            <Show when={props.local.showTriggers !== false}>
+              <NumberInputTriggers />
+            </Show>
+          </NumberInputControl>
+        </NumberInput>
+      </WithTrailingAddon>
       <FieldError errors={props.field().state.meta.errors} />
       <FieldDescription>{props.local.description}</FieldDescription>
     </FieldContent>
@@ -155,6 +159,7 @@ export const NumberInputField: Component<NumberInputFieldProps> = (props) => {
     'disabled',
     'readOnly',
     'showTriggers',
+    'trailingAddon',
   ]);
   const [rootProps, inputProps] = splitProps(others, NUMBER_INPUT_ROOT_PROPS);
   const state = createNumberInputFieldState(field);

package/src/components/form/PasswordInputField.tsx

@@ -1,4 +1,4 @@
-import { splitProps, type Component, type ComponentProps } from 'solid-js';
+import type { Component, ComponentProps, JSXElement } from 'solid-js';
 
 import { Field, FieldLabel, FieldContent, FieldError, FieldDescription } from '@/components/Field';
 import {
@@ -10,23 +10,66 @@ import {
 } from '@/components/PasswordInput';
 
 import { useFieldContext } from './context';
+import { WithTrailingAddon } from './WithTrailingAddon';
 
 export type PasswordInputFieldProps = ComponentProps<typeof PasswordInputInput> & {
   label?: string;
   description?: string;
   showVisibilityTrigger?: boolean;
+  trailingAddon?: JSXElement;
 };
 
+const PASSWORD_INPUT_FIELD_PROPS = [
+  'label',
+  'description',
+  'required',
+  'disabled',
+  'readOnly',
+  'showVisibilityTrigger',
+  'trailingAddon',
+] as const;
+
+type PasswordInputFieldLocalProps = Pick<
+  PasswordInputFieldProps,
+  (typeof PASSWORD_INPUT_FIELD_PROPS)[number]
+>;
+
+const PasswordInputFieldControl: Component<{
+  field: ReturnType<typeof useFieldContext<string>>;
+  local: PasswordInputFieldLocalProps;
+  others: Omit<PasswordInputFieldProps, keyof PasswordInputFieldLocalProps>;
+}> = (props) => (
+  <WithTrailingAddon addon={props.local.trailingAddon}>
+    <PasswordInput
+      invalid={props.field().state.meta.errors.length > 0}
+      disabled={props.local.disabled ?? false}
+      readOnly={props.local.readOnly ?? false}
+      required={props.local.required ?? false}
+    >
+      <PasswordInputControl>
+        <PasswordInputInput
+          value={props.field().state.value}
+          onInput={(event) => {
+            props.field().handleChange(event.target.value);
+          }}
+          onBlur={() => {
+            props.field().handleBlur();
+          }}
+          {...props.others}
+        />
+        <Show when={props.local.showVisibilityTrigger !== false}>
+          <PasswordInputVisibilityTrigger>
+            <PasswordInputIndicator />
+          </PasswordInputVisibilityTrigger>
+        </Show>
+      </PasswordInputControl>
+    </PasswordInput>
+  </WithTrailingAddon>
+);
+
 export const PasswordInputField: Component<PasswordInputFieldProps> = (props) => {
   const field = useFieldContext<string>();
-  const [local, others] = splitProps(props, [
-    'label',
-    'description',
-    'required',
-    'disabled',
-    'readOnly',
-    'showVisibilityTrigger',
-  ]);
+  const [local, others] = splitProps(props, PASSWORD_INPUT_FIELD_PROPS);
 
   return (
     <Field
@@ -37,30 +80,7 @@ export const PasswordInputField: Component<PasswordInputFieldProps> = (props) =>
     >
       <FieldLabel>{local.label}</FieldLabel>
       <FieldContent>
-        <PasswordInput
-          invalid={field().state.meta.errors.length > 0}
-          disabled={local.disabled ?? false}
-          readOnly={local.readOnly ?? false}
-          required={local.required ?? false}
-        >
-          <PasswordInputControl>
-            <PasswordInputInput
-              value={field().state.value}
-              onInput={(event) => {
-                field().handleChange(event.target.value);
-              }}
-              onBlur={() => {
-                field().handleBlur();
-              }}
-              {...others}
-            />
-            <Show when={local.showVisibilityTrigger !== false}>
-              <PasswordInputVisibilityTrigger>
-                <PasswordInputIndicator />
-              </PasswordInputVisibilityTrigger>
-            </Show>
-          </PasswordInputControl>
-        </PasswordInput>
+        <PasswordInputFieldControl field={field} local={local} others={others} />
         <FieldError errors={field().state.meta.errors} />
         <FieldDescription>{local.description}</FieldDescription>
       </FieldContent>

package/src/components/form/PinInputField.tsx

@@ -1,4 +1,4 @@
-import { splitProps, type Component, type ComponentProps, Index } from 'solid-js';
+import type { Component, ComponentProps, JSXElement } from 'solid-js';
 
 import { Field, FieldLabel, FieldContent, FieldError, FieldDescription } from '@/components/Field';
 import {
@@ -10,11 +10,13 @@ import {
 } from '@/components/PinInput';
 
 import { useFieldContext } from './context';
+import { WithTrailingAddon } from './WithTrailingAddon';
 
 export type PinInputFieldProps = ComponentProps<typeof PinInput> & {
   label?: string;
   description?: string;
   count?: number;
+  trailingAddon?: JSXElement;
 };
 
 const DEFAULT_PIN_COUNT = 6;
@@ -25,6 +27,7 @@ const PIN_INPUT_FIELD_PROPS = [
   'disabled',
   'readOnly',
   'count',
+  'trailingAddon',
 ] as const;
 
 const PinInputDigits: Component<{ count: number }> = (props) => (
@@ -51,24 +54,26 @@ export const PinInputField: Component<PinInputFieldProps> = (props) => {
     >
       <FieldLabel>{local.label}</FieldLabel>
       <FieldContent>
-        <PinInput
-          value={field().state.value}
-          onValueChange={(details) => {
-            field().handleChange(details.value);
-          }}
-          onBlur={() => {
-            field().handleBlur();
-          }}
-          invalid={field().state.meta.errors.length > 0}
-          disabled={local.disabled ?? false}
-          readOnly={local.readOnly ?? false}
-          required={local.required ?? false}
-          count={pinCount}
-          {...others}
-        >
-          <PinInputDigits count={pinCount} />
-          <PinInputHiddenInput />
-        </PinInput>
+        <WithTrailingAddon addon={local.trailingAddon}>
+          <PinInput
+            value={field().state.value}
+            onValueChange={(details) => {
+              field().handleChange(details.value);
+            }}
+            onBlur={() => {
+              field().handleBlur();
+            }}
+            invalid={field().state.meta.errors.length > 0}
+            disabled={local.disabled ?? false}
+            readOnly={local.readOnly ?? false}
+            required={local.required ?? false}
+            count={pinCount}
+            {...others}
+          >
+            <PinInputDigits count={pinCount} />
+            <PinInputHiddenInput />
+          </PinInput>
+        </WithTrailingAddon>
         <FieldError errors={field().state.meta.errors} />
         <FieldDescription>{local.description}</FieldDescription>
       </FieldContent>

package/src/components/form/RadioGroupField.tsx

@@ -1,18 +1,28 @@
-import type { Component, ComponentProps } from 'solid-js';
+import type { Component, ComponentProps, JSXElement } from 'solid-js';
 
 import { Field, FieldContent, FieldError, FieldDescription } from '@/components/Field';
-import { RadioGroup } from '@/components/RadioGroup';
+import { RadioGroup, RadioGroupLabel } from '@/components/RadioGroup';
 
 import { useFieldContext } from './context';
+import { WithTrailingAddon } from './WithTrailingAddon';
 
 export type RadioGroupFieldProps = ComponentProps<typeof RadioGroup> & {
   label?: string;
   description?: string;
+  trailingAddon?: JSXElement;
 };
 
 export const RadioGroupField: Component<RadioGroupFieldProps> = (props) => {
   const field = useFieldContext<string>();
-  const [local, others] = splitProps(props, ['description', 'required', 'disabled', 'readOnly']);
+  const [local, others] = splitProps(props, [
+    'label',
+    'description',
+    'required',
+    'disabled',
+    'readOnly',
+    'children',
+    'trailingAddon',
+  ]);
 
   return (
     <Field
@@ -22,20 +32,25 @@ export const RadioGroupField: Component<RadioGroupFieldProps> = (props) => {
       readOnly={local.readOnly ?? false}
     >
       <FieldContent>
-        <RadioGroup
-          value={field().state.value}
-          onValueChange={(details) => {
-            field().handleChange(details.value ?? '');
-          }}
-          onBlur={() => {
-            field().handleBlur();
-          }}
-          invalid={field().state.meta.errors.length > 0}
-          disabled={local.disabled ?? false}
-          readOnly={local.readOnly ?? false}
-          required={local.required ?? false}
-          {...others}
-        />
+        <WithTrailingAddon addon={local.trailingAddon}>
+          <RadioGroup
+            value={field().state.value}
+            onValueChange={(details) => {
+              field().handleChange(details.value ?? '');
+            }}
+            onBlur={() => {
+              field().handleBlur();
+            }}
+            invalid={field().state.meta.errors.length > 0}
+            disabled={local.disabled ?? false}
+            readOnly={local.readOnly ?? false}
+            required={local.required ?? false}
+            {...others}
+          >
+            <RadioGroupLabel>{local.label}</RadioGroupLabel>
+            {local.children}
+          </RadioGroup>
+        </WithTrailingAddon>
         <FieldError errors={field().state.meta.errors} />
         <FieldDescription>{local.description}</FieldDescription>
       </FieldContent>

package/src/components/form/SelectField.tsx

@@ -1,4 +1,4 @@
-import type { Component, ComponentProps, JSX } from 'solid-js';
+import type { Component, ComponentProps, JSX, JSXElement } from 'solid-js';
 
 import { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from '@/components/Field';
 import {
@@ -11,6 +11,7 @@ import {
 } from '@/components/Select';
 
 import { useFieldContext } from './context';
+import { WithTrailingAddon } from './WithTrailingAddon';
 
 const SelectInput: Component<{ placeholder: string; children: JSX.Element }> = (props) => (
   <>
@@ -29,6 +30,7 @@ export type SelectFieldProps = ComponentProps<typeof Select> & {
   label?: string;
   description?: string;
   placeholder?: string;
+  trailingAddon?: JSXElement;
 };
 
 export const SelectField: Component<SelectFieldProps> = (props) => {
@@ -41,6 +43,7 @@ export const SelectField: Component<SelectFieldProps> = (props) => {
     'readOnly',
     'placeholder',
     'children',
+    'trailingAddon',
   ]);
 
   return (
@@ -52,21 +55,23 @@ export const SelectField: Component<SelectFieldProps> = (props) => {
     >
       <FieldLabel>{local.label}</FieldLabel>
       <FieldContent>
-        <Select
-          value={field().state.value}
-          onValueChange={(details) => {
-            field().handleChange(details.value);
-          }}
-          onBlur={() => {
-            field().handleBlur();
-          }}
-          invalid={field().state.meta.errors.length > 0}
-          disabled={local.disabled ?? false}
-          readOnly={local.readOnly ?? false}
-          {...others}
-        >
-          <SelectInput placeholder={local.placeholder ?? ''}>{local.children}</SelectInput>
-        </Select>
+        <WithTrailingAddon addon={local.trailingAddon}>
+          <Select
+            value={field().state.value}
+            onValueChange={(details) => {
+              field().handleChange(details.value);
+            }}
+            onBlur={() => {
+              field().handleBlur();
+            }}
+            invalid={field().state.meta.errors.length > 0}
+            disabled={local.disabled ?? false}
+            readOnly={local.readOnly ?? false}
+            {...others}
+          >
+            <SelectInput placeholder={local.placeholder ?? ''}>{local.children}</SelectInput>
+          </Select>
+        </WithTrailingAddon>
         <FieldError errors={field().state.meta.errors} />
         <FieldDescription>{local.description}</FieldDescription>
       </FieldContent>

package/src/components/form/SliderField.tsx

@@ -1,4 +1,4 @@
-import type { Component, ComponentProps } from 'solid-js';
+import type { Component, ComponentProps, JSXElement } from 'solid-js';
 
 import { Field, FieldDescription, FieldError } from '@/components/Field';
 import {
@@ -14,6 +14,7 @@ import {
 } from '@/components/Slider';
 
 import { useFieldContext } from './context';
+import { WithTrailingAddon } from './WithTrailingAddon';
 
 const SliderInput: Component<{
   value: number[];
@@ -48,6 +49,7 @@ export type SliderFieldProps = ComponentProps<typeof Slider> & {
   description?: string;
   marks?: { value: number; label?: string }[];
   required?: boolean;
+  trailingAddon?: JSXElement;
 };
 
 export const SliderField: Component<SliderFieldProps> = (props) => {
@@ -59,6 +61,7 @@ export const SliderField: Component<SliderFieldProps> = (props) => {
     'disabled',
     'readOnly',
     'marks',
+    'trailingAddon',
   ]);
 
   return (
@@ -68,25 +71,27 @@ export const SliderField: Component<SliderFieldProps> = (props) => {
       readOnly={local.readOnly ?? false}
       required={local.required ?? false}
     >
-      <Slider
-        value={field().state.value}
-        onValueChange={(details) => {
-          field().handleChange(details.value);
-        }}
-        onFocusChange={() => {
-          field().handleBlur();
-        }}
-        invalid={field().state.meta.errors.length > 0}
-        disabled={local.disabled ?? false}
-        readOnly={local.readOnly ?? false}
-        {...others}
-      >
-        <SliderInput
+      <WithTrailingAddon addon={local.trailingAddon}>
+        <Slider
           value={field().state.value}
-          {...(typeof local.label === 'string' && { label: local.label })}
-          {...(Array.isArray(local.marks) && { marks: local.marks })}
-        />
-      </Slider>
+          onValueChange={(details) => {
+            field().handleChange(details.value);
+          }}
+          onFocusChange={() => {
+            field().handleBlur();
+          }}
+          invalid={field().state.meta.errors.length > 0}
+          disabled={local.disabled ?? false}
+          readOnly={local.readOnly ?? false}
+          {...others}
+        >
+          <SliderInput
+            value={field().state.value}
+            {...(typeof local.label === 'string' && { label: local.label })}
+            {...(Array.isArray(local.marks) && { marks: local.marks })}
+          />
+        </Slider>
+      </WithTrailingAddon>
       <FieldError errors={field().state.meta.errors} />
       <FieldDescription>{local.description}</FieldDescription>
     </Field>

package/src/components/form/TagsInputField.tsx

@@ -1,4 +1,4 @@
-import { type Component, type ComponentProps, splitProps, For } from 'solid-js';
+import type { Component, ComponentProps, JSXElement } from 'solid-js';
 
 import { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from '@/components/Field';
 import {
@@ -16,6 +16,7 @@ import {
 } from '@/components/TagsInput';
 
 import { useFieldContext } from './context';
+import { WithTrailingAddon } from './WithTrailingAddon';
 
 const TAGS_INPUT_ROOT_PROPS = [
   'max',
@@ -42,6 +43,7 @@ export type TagsInputFieldProps = ComponentProps<typeof TagsInputInput> &
     label?: string;
     description?: string;
     showClearTrigger?: boolean;
+    trailingAddon?: JSXElement;
   };
 
 const TagsInputGroup: Component<
@@ -85,6 +87,7 @@ const TAGS_INPUT_FIELD_PROPS = [
   'disabled',
   'readOnly',
   'showClearTrigger',
+  'trailingAddon',
 ] as const;
 
 export const TagsInputField: Component<TagsInputFieldProps> = (props) => {
@@ -101,26 +104,28 @@ export const TagsInputField: Component<TagsInputFieldProps> = (props) => {
     >
       <FieldLabel>{local.label}</FieldLabel>
       <FieldContent>
-        <TagsInput
-          value={field().state.value}
-          onValueChange={(details) => {
-            field().handleChange(details.value);
-          }}
-          onBlur={() => {
-            field().handleBlur();
-          }}
-          invalid={field().state.meta.errors.length > 0}
-          disabled={local.disabled ?? false}
-          readOnly={local.readOnly ?? false}
-          {...rootProps}
-        >
-          <TagsInputGroup
-            {...inputProps}
-            {...(typeof local.showClearTrigger === 'boolean' && {
-              showClearTrigger: local.showClearTrigger,
-            })}
-          />
-        </TagsInput>
+        <WithTrailingAddon addon={local.trailingAddon}>
+          <TagsInput
+            value={field().state.value}
+            onValueChange={(details) => {
+              field().handleChange(details.value);
+            }}
+            onBlur={() => {
+              field().handleBlur();
+            }}
+            invalid={field().state.meta.errors.length > 0}
+            disabled={local.disabled ?? false}
+            readOnly={local.readOnly ?? false}
+            {...rootProps}
+          >
+            <TagsInputGroup
+              {...inputProps}
+              {...(typeof local.showClearTrigger === 'boolean' && {
+                showClearTrigger: local.showClearTrigger,
+              })}
+            />
+          </TagsInput>
+        </WithTrailingAddon>
         <FieldError errors={field().state.meta.errors} />
         <FieldDescription>{local.description}</FieldDescription>
       </FieldContent>