@manafishrov/ui 1.3.3 → 1.3.5

package/src/components/form/TextInputField.tsx

@@ -1,13 +1,15 @@
-import { type Component, type ComponentProps, splitProps } from 'solid-js';
+import type { Component, ComponentProps, JSXElement } from 'solid-js';
 
 import { Field, FieldLabel, FieldContent, FieldError, FieldDescription } from '@/components/Field';
 import { TextInputControl, TextInputInput } from '@/components/TextInput';
 
 import { useFieldContext } from './context';
+import { WithTrailingAddon } from './WithTrailingAddon';
 
 export type TextInputFieldProps = ComponentProps<typeof TextInputInput> & {
   label?: string;
   description?: string;
+  trailingAddon?: JSXElement;
 };
 
 export const TextInputField: Component<TextInputFieldProps> = (props) => {
@@ -15,6 +17,7 @@ export const TextInputField: Component<TextInputFieldProps> = (props) => {
   const [local, others] = splitProps(props, [
     'label',
     'description',
+    'trailingAddon',
     'required',
     'disabled',
     'readOnly',
@@ -29,18 +32,20 @@ export const TextInputField: Component<TextInputFieldProps> = (props) => {
     >
       <FieldLabel>{local.label}</FieldLabel>
       <FieldContent>
-        <TextInputControl>
-          <TextInputInput
-            value={field().state.value}
-            onInput={(event) => {
-              field().handleChange(event.target.value);
-            }}
-            onBlur={() => {
-              field().handleBlur();
-            }}
-            {...others}
-          />
-        </TextInputControl>
+        <WithTrailingAddon addon={local.trailingAddon}>
+          <TextInputControl>
+            <TextInputInput
+              value={field().state.value}
+              onInput={(event) => {
+                field().handleChange(event.target.value);
+              }}
+              onBlur={() => {
+                field().handleBlur();
+              }}
+              {...others}
+            />
+          </TextInputControl>
+        </WithTrailingAddon>
         <FieldError errors={field().state.meta.errors} />
         <FieldDescription>{local.description}</FieldDescription>
       </FieldContent>

package/src/components/form/TextareaField.tsx

@@ -1,13 +1,15 @@
-import type { Component, ComponentProps } from 'solid-js';
+import type { Component, ComponentProps, JSXElement } from 'solid-js';
 
 import { Field, FieldLabel, FieldContent, FieldError, FieldDescription } from '@/components/Field';
 import { TextInputControl, TextInputArea } from '@/components/TextInput';
 
 import { useFieldContext } from './context';
+import { WithTrailingAddon } from './WithTrailingAddon';
 
 export type TextareaFieldProps = ComponentProps<typeof TextInputArea> & {
   label?: string;
   description?: string;
+  trailingAddon?: JSXElement;
 };
 
 export const TextareaField: Component<TextareaFieldProps> = (props) => {
@@ -18,6 +20,7 @@ export const TextareaField: Component<TextareaFieldProps> = (props) => {
     'required',
     'disabled',
     'readOnly',
+    'trailingAddon',
   ]);
 
   return (
@@ -29,18 +32,20 @@ export const TextareaField: Component<TextareaFieldProps> = (props) => {
     >
       <FieldLabel>{local.label}</FieldLabel>
       <FieldContent>
-        <TextInputControl>
-          <TextInputArea
-            value={field().state.value}
-            onInput={(event) => {
-              field().handleChange(event.target.value);
-            }}
-            onBlur={() => {
-              field().handleBlur();
-            }}
-            {...others}
-          />
-        </TextInputControl>
+        <WithTrailingAddon addon={local.trailingAddon}>
+          <TextInputControl>
+            <TextInputArea
+              value={field().state.value}
+              onInput={(event) => {
+                field().handleChange(event.target.value);
+              }}
+              onBlur={() => {
+                field().handleBlur();
+              }}
+              {...others}
+            />
+          </TextInputControl>
+        </WithTrailingAddon>
         <FieldError errors={field().state.meta.errors} />
         <FieldDescription>{local.description}</FieldDescription>
       </FieldContent>

package/src/components/form/WithTrailingAddon.tsx

@@ -0,0 +1,15 @@
+import type { Component, JSXElement } from 'solid-js';
+
+export type WithTrailingAddonProps = {
+  addon?: JSXElement;
+  children: JSXElement;
+};
+
+export const WithTrailingAddon: Component<WithTrailingAddonProps> = (props) => (
+  <Show when={props.addon} fallback={props.children}>
+    <div class='gap-2 flex items-center'>
+      {props.children}
+      {props.addon}
+    </div>
+  </Show>
+);

package/src/components/form/index.ts

@@ -1,3 +1,4 @@
+export * from './WithTrailingAddon';
 export * from './Form';
 export * from './context';
 export * from './TextInputField';
@@ -15,3 +16,4 @@ export * from './ComboboxField';
 export * from './TagsInputField';
 export * from './SubmitButton';
 export * from './AutoSubmit';
+export * from './WithTrailingAddon';