@btst/components 0.0.0-stage → 1.0.0

package/dist/ui/src/components/auto-form/fields/array.mjs

@@ -0,0 +1,264 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { AccordionItem, AccordionTrigger, AccordionContent } from '../../accordion.mjs';
+import { Button } from '../../button.mjs';
+import { FormField, FormItem, FormControl, FormLabel, FormMessage } from '../../form.mjs';
+import { Input } from '../../input.mjs';
+import { Separator } from '../../separator.mjs';
+import { Trash, Plus } from 'lucide-react';
+import { useFieldArray, useWatch } from 'react-hook-form';
+import { getBaseSchema, getBaseType, beautifyObjectName } from '../helpers.mjs';
+import AutoFormObject from './object.mjs';
+
+function getDefType(schema) {
+  return schema._zod?.def?.type || "";
+}
+function getArrayElementType(item) {
+  const def = item._zod?.def;
+  const defType = getDefType(item);
+  if (defType === "array") {
+    return def?.element || null;
+  }
+  if (["default", "optional", "nullable"].includes(defType)) {
+    const innerType = def?.innerType;
+    if (innerType) {
+      return getArrayElementType(innerType);
+    }
+  }
+  return null;
+}
+function getPrimitiveDefault(itemSchema) {
+  const base = getBaseSchema(itemSchema);
+  if (!base) return "";
+  switch (getBaseType(base)) {
+    case "ZodBoolean":
+      return false;
+    case "ZodNumber":
+      return 0;
+    default:
+      return "";
+  }
+}
+function AutoFormArray({
+  name,
+  item,
+  form,
+  path = [],
+  fieldConfig
+}) {
+  const itemDefType = getArrayElementType(item);
+  const elementBaseSchema = itemDefType ? getBaseSchema(itemDefType) : null;
+  const elementPrimitiveType = elementBaseSchema ? getBaseType(elementBaseSchema) : "";
+  const isObjectArray = !!itemDefType && elementPrimitiveType === "ZodObject";
+  const title = fieldConfig?.label ?? beautifyObjectName(name);
+  if (isObjectArray) {
+    return /* @__PURE__ */ jsx(
+      ObjectAutoFormArray,
+      {
+        name,
+        item,
+        form,
+        path,
+        fieldConfig,
+        itemDefType,
+        title
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    PrimitiveAutoFormArray,
+    {
+      name,
+      item,
+      form,
+      path,
+      fieldConfig,
+      itemDefType,
+      title
+    }
+  );
+}
+function ObjectAutoFormArray({
+  name,
+  form,
+  path = [],
+  fieldConfig,
+  itemDefType,
+  title
+}) {
+  const fieldPath = path.join(".");
+  const { fields, append, remove } = useFieldArray({
+    control: form.control,
+    name: fieldPath
+  });
+  return /* @__PURE__ */ jsxs(AccordionItem, { value: name, className: "border-none", children: [
+    /* @__PURE__ */ jsx(AccordionTrigger, { children: title }),
+    /* @__PURE__ */ jsxs(AccordionContent, { children: [
+      fields.map((_field, index) => {
+        const key = _field.id;
+        return /* @__PURE__ */ jsxs("div", { className: "mt-4 flex flex-col", children: [
+          /* @__PURE__ */ jsx(
+            AutoFormObject,
+            {
+              schema: itemDefType,
+              form,
+              fieldConfig,
+              path: [...path, index.toString()]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "my-4 flex justify-end", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              size: "icon",
+              type: "button",
+              className: "hover:bg-zinc-300 hover:text-black focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-white dark:text-black dark:hover:bg-zinc-300 dark:hover:text-black dark:hover:ring-0 dark:hover:ring-offset-0 dark:focus-visible:ring-0 dark:focus-visible:ring-offset-0",
+              onClick: () => remove(index),
+              children: /* @__PURE__ */ jsx(Trash, { className: "size-4" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Separator, {})
+        ] }, key);
+      }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "secondary",
+          onClick: () => append({}),
+          className: "mt-4 flex items-center",
+          children: [
+            /* @__PURE__ */ jsx(Plus, { className: "mr-2", size: 16 }),
+            "Add"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function PrimitiveAutoFormArray({
+  name,
+  item,
+  form,
+  path = [],
+  fieldConfig,
+  itemDefType,
+  title
+}) {
+  const fieldPath = path.join(".");
+  const rawValues = useWatch({ control: form.control, name: fieldPath }) ?? [];
+  const values = Array.isArray(rawValues) ? rawValues : [];
+  const appendItem = () => {
+    const def = itemDefType ? getPrimitiveDefault(itemDefType) : "";
+    form.setValue(fieldPath, [...values, def], {
+      shouldDirty: true,
+      shouldValidate: false
+    });
+  };
+  const removeItem = (index) => {
+    const next = values.filter((_, i) => i !== index);
+    form.setValue(fieldPath, next, {
+      shouldDirty: true,
+      shouldValidate: false
+    });
+  };
+  return /* @__PURE__ */ jsxs(AccordionItem, { value: name, className: "border-none", children: [
+    /* @__PURE__ */ jsx(AccordionTrigger, { children: title }),
+    /* @__PURE__ */ jsxs(AccordionContent, { children: [
+      values.map((_, index) => {
+        const cellPath = `${fieldPath}.${index}`;
+        return /* @__PURE__ */ jsxs("div", { className: "mt-4 flex flex-col", children: [
+          itemDefType ? /* @__PURE__ */ jsx(
+            PrimitiveArrayRow,
+            {
+              form,
+              itemSchema: itemDefType,
+              cellPath
+            }
+          ) : null,
+          /* @__PURE__ */ jsx("div", { className: "my-4 flex justify-end", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              size: "icon",
+              type: "button",
+              className: "hover:bg-zinc-300 hover:text-black focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-white dark:text-black dark:hover:bg-zinc-300 dark:hover:text-black dark:hover:ring-0 dark:hover:ring-offset-0 dark:focus-visible:ring-0 dark:focus-visible:ring-offset-0",
+              onClick: () => removeItem(index),
+              children: /* @__PURE__ */ jsx(Trash, { className: "size-4" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Separator, {})
+        ] }, `${fieldPath}-${index}`);
+      }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "secondary",
+          onClick: appendItem,
+          className: "mt-4 flex items-center",
+          children: [
+            /* @__PURE__ */ jsx(Plus, { className: "mr-2", size: 16 }),
+            "Add"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function PrimitiveArrayRow({
+  form,
+  itemSchema,
+  cellPath
+}) {
+  const baseSchema = getBaseSchema(itemSchema);
+  const t = baseSchema ? getBaseType(baseSchema) : "";
+  if (t === "ZodBoolean") {
+    return /* @__PURE__ */ jsx(
+      FormField,
+      {
+        control: form.control,
+        name: cellPath,
+        render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { className: "flex flex-row items-center gap-2 space-y-0", children: [
+          /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              "aria-label": "Toggle",
+              checked: Boolean(field.value),
+              onChange: (e) => field.onChange(e.target.checked)
+            }
+          ) }),
+          /* @__PURE__ */ jsx(FormLabel, { className: "font-normal cursor-pointer", children: field.value ? "Selected" : "Not selected" }),
+          /* @__PURE__ */ jsx(FormMessage, {})
+        ] })
+      }
+    );
+  }
+  const inputType = t === "ZodNumber" ? "number" : "text";
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      control: form.control,
+      name: cellPath,
+      render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(FormLabel, { className: "sr-only", children: "Row value" }),
+        /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: inputType,
+            name: field.name,
+            ref: field.ref,
+            onBlur: field.onBlur,
+            value: field.value === void 0 || field.value === null ? "" : String(field.value),
+            onChange: (ev) => field.onChange(
+              inputType === "number" ? Number.isNaN(ev.target.valueAsNumber) ? void 0 : ev.target.valueAsNumber : ev.target.value
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx(FormMessage, {})
+      ] })
+    }
+  );
+}
+
+export { AutoFormArray as default };

package/dist/ui/src/components/auto-form/fields/checkbox.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const checkbox = require('../../checkbox.cjs');
+const form = require('../../form.cjs');
+const tooltip = require('../common/tooltip.cjs');
+const label = require('../common/label.cjs');
+
+function AutoFormCheckbox({
+  label: label$1,
+  isRequired,
+  field,
+  fieldConfigItem,
+  fieldProps
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(form.FormItem, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex items-center gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(form.FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        checkbox.Checkbox,
+        {
+          checked: field.value,
+          onCheckedChange: field.onChange,
+          ...fieldProps
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        label,
+        {
+          label: fieldConfigItem?.label || label$1,
+          isRequired
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip, { fieldConfigItem })
+  ] });
+}
+
+module.exports = AutoFormCheckbox;

package/dist/ui/src/components/auto-form/fields/checkbox.mjs

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Checkbox } from '../../checkbox.mjs';
+import { FormItem, FormControl } from '../../form.mjs';
+import AutoFormTooltip from '../common/tooltip.mjs';
+import AutoFormLabel from '../common/label.mjs';
+
+function AutoFormCheckbox({
+  label,
+  isRequired,
+  field,
+  fieldConfigItem,
+  fieldProps
+}) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(FormItem, { children: /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked: field.value,
+          onCheckedChange: field.onChange,
+          ...fieldProps
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        AutoFormLabel,
+        {
+          label: fieldConfigItem?.label || label,
+          isRequired
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(AutoFormTooltip, { fieldConfigItem })
+  ] });
+}
+
+export { AutoFormCheckbox as default };

package/dist/ui/src/components/auto-form/fields/date.cjs

@@ -0,0 +1,67 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const datePicker = require('../../date-picker.cjs');
+const form = require('../../form.cjs');
+const z = require('zod');
+const label = require('../common/label.cjs');
+const tooltip = require('../common/tooltip.cjs');
+const helpers = require('../helpers.cjs');
+
+function toDate(value, dateOnly) {
+  if (!value) return void 0;
+  if (value instanceof Date) return value;
+  if (typeof value === "string") {
+    const date = new Date(dateOnly && /^\d{4}-\d{2}-\d{2}$/.test(value) ? `${value}T00:00:00` : value);
+    return isNaN(date.getTime()) ? void 0 : date;
+  }
+  return void 0;
+}
+function AutoFormDate({
+  label: label$1,
+  isRequired,
+  field,
+  fieldConfigItem,
+  fieldProps,
+  zodItem
+}) {
+  const baseType = helpers.getBaseType(zodItem);
+  const expectsDateObject = baseType === "ZodDate";
+  const baseSchema = helpers.getBaseSchema(zodItem);
+  const dateSchema = baseSchema instanceof z.z.ZodUnion && baseSchema.options.length === 2 && baseSchema.options.some((option) => option instanceof z.z.ZodNull) ? baseSchema.options.find((option) => !(option instanceof z.z.ZodNull)) : baseSchema;
+  const expectsDateOnly = !!dateSchema && ("format" in dateSchema && dateSchema.format === "date" || dateSchema instanceof z.z.ZodString && !!dateSchema._zod.def.checks?.some((check) => "format" in check._zod.def && check._zod.def.format === "date"));
+  const handleChange = (date) => {
+    if (!date) {
+      field.onChange(expectsDateOnly && zodItem.isNullable() ? null : void 0);
+      return;
+    }
+    if (expectsDateObject) {
+      field.onChange(date);
+    } else if (expectsDateOnly) {
+      field.onChange(`${String(date.getFullYear()).padStart(4, "0")}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`);
+    } else {
+      field.onChange(date.toISOString());
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(form.FormItem, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      label,
+      {
+        label: fieldConfigItem?.label || label$1,
+        isRequired
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(form.FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      datePicker.DatePicker,
+      {
+        date: toDate(field.value, expectsDateOnly),
+        setDate: handleChange,
+        ...fieldProps
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip, { fieldConfigItem }),
+    /* @__PURE__ */ jsxRuntime.jsx(form.FormMessage, {})
+  ] });
+}
+
+module.exports = AutoFormDate;

package/dist/ui/src/components/auto-form/fields/date.mjs

@@ -0,0 +1,65 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { DatePicker } from '../../date-picker.mjs';
+import { FormItem, FormControl, FormMessage } from '../../form.mjs';
+import { z } from 'zod';
+import AutoFormLabel from '../common/label.mjs';
+import AutoFormTooltip from '../common/tooltip.mjs';
+import { getBaseType, getBaseSchema } from '../helpers.mjs';
+
+function toDate(value, dateOnly) {
+  if (!value) return void 0;
+  if (value instanceof Date) return value;
+  if (typeof value === "string") {
+    const date = new Date(dateOnly && /^\d{4}-\d{2}-\d{2}$/.test(value) ? `${value}T00:00:00` : value);
+    return isNaN(date.getTime()) ? void 0 : date;
+  }
+  return void 0;
+}
+function AutoFormDate({
+  label,
+  isRequired,
+  field,
+  fieldConfigItem,
+  fieldProps,
+  zodItem
+}) {
+  const baseType = getBaseType(zodItem);
+  const expectsDateObject = baseType === "ZodDate";
+  const baseSchema = getBaseSchema(zodItem);
+  const dateSchema = baseSchema instanceof z.ZodUnion && baseSchema.options.length === 2 && baseSchema.options.some((option) => option instanceof z.ZodNull) ? baseSchema.options.find((option) => !(option instanceof z.ZodNull)) : baseSchema;
+  const expectsDateOnly = !!dateSchema && ("format" in dateSchema && dateSchema.format === "date" || dateSchema instanceof z.ZodString && !!dateSchema._zod.def.checks?.some((check) => "format" in check._zod.def && check._zod.def.format === "date"));
+  const handleChange = (date) => {
+    if (!date) {
+      field.onChange(expectsDateOnly && zodItem.isNullable() ? null : void 0);
+      return;
+    }
+    if (expectsDateObject) {
+      field.onChange(date);
+    } else if (expectsDateOnly) {
+      field.onChange(`${String(date.getFullYear()).padStart(4, "0")}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`);
+    } else {
+      field.onChange(date.toISOString());
+    }
+  };
+  return /* @__PURE__ */ jsxs(FormItem, { children: [
+    /* @__PURE__ */ jsx(
+      AutoFormLabel,
+      {
+        label: fieldConfigItem?.label || label,
+        isRequired
+      }
+    ),
+    /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+      DatePicker,
+      {
+        date: toDate(field.value, expectsDateOnly),
+        setDate: handleChange,
+        ...fieldProps
+      }
+    ) }),
+    /* @__PURE__ */ jsx(AutoFormTooltip, { fieldConfigItem }),
+    /* @__PURE__ */ jsx(FormMessage, {})
+  ] });
+}
+
+export { AutoFormDate as default };

package/dist/ui/src/components/auto-form/fields/enum.cjs

@@ -0,0 +1,73 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const form = require('../../form.cjs');
+const select = require('../../select.cjs');
+const label = require('../common/label.cjs');
+const tooltip = require('../common/tooltip.cjs');
+const helpers = require('../helpers.cjs');
+
+function getEnumValues(schema) {
+  if (Array.isArray(schema.options)) {
+    return schema.options;
+  }
+  if (schema.enum) {
+    return Object.values(schema.enum);
+  }
+  const def = schema._zod?.def;
+  if (def?.entries) {
+    return Object.values(def.entries);
+  }
+  return [];
+}
+function AutoFormEnum({
+  label: label$1,
+  isRequired,
+  field,
+  fieldConfigItem,
+  zodItem,
+  fieldProps
+}) {
+  const baseSchema = helpers.getBaseSchema(zodItem);
+  const baseValues = getEnumValues(baseSchema);
+  let values = [];
+  if (!baseValues || baseValues.length === 0) {
+    values = [];
+  } else {
+    values = baseValues.map((value) => [value, value]);
+  }
+  function findItem(value) {
+    return values.find((item) => item[0] === value);
+  }
+  const handleValueChange = (val) => {
+    if (val === "" && field.value && field.value !== "") {
+      return;
+    }
+    field.onChange(val);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(form.FormItem, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      label,
+      {
+        label: fieldConfigItem?.label || label$1,
+        isRequired
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(form.FormControl, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      select.Select,
+      {
+        onValueChange: handleValueChange,
+        value: field.value ?? "",
+        ...fieldProps,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { className: fieldProps.className, children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, { placeholder: fieldConfigItem.inputProps?.placeholder, children: field.value ? findItem(field.value)?.[1] : "Select an option" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(select.SelectContent, { children: values.map(([value, label2]) => /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: label2, children: label2 }, value)) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip, { fieldConfigItem }),
+    /* @__PURE__ */ jsxRuntime.jsx(form.FormMessage, {})
+  ] });
+}
+
+module.exports = AutoFormEnum;

package/dist/ui/src/components/auto-form/fields/enum.mjs

@@ -0,0 +1,71 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { FormItem, FormControl, FormMessage } from '../../form.mjs';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../../select.mjs';
+import AutoFormLabel from '../common/label.mjs';
+import AutoFormTooltip from '../common/tooltip.mjs';
+import { getBaseSchema } from '../helpers.mjs';
+
+function getEnumValues(schema) {
+  if (Array.isArray(schema.options)) {
+    return schema.options;
+  }
+  if (schema.enum) {
+    return Object.values(schema.enum);
+  }
+  const def = schema._zod?.def;
+  if (def?.entries) {
+    return Object.values(def.entries);
+  }
+  return [];
+}
+function AutoFormEnum({
+  label,
+  isRequired,
+  field,
+  fieldConfigItem,
+  zodItem,
+  fieldProps
+}) {
+  const baseSchema = getBaseSchema(zodItem);
+  const baseValues = getEnumValues(baseSchema);
+  let values = [];
+  if (!baseValues || baseValues.length === 0) {
+    values = [];
+  } else {
+    values = baseValues.map((value) => [value, value]);
+  }
+  function findItem(value) {
+    return values.find((item) => item[0] === value);
+  }
+  const handleValueChange = (val) => {
+    if (val === "" && field.value && field.value !== "") {
+      return;
+    }
+    field.onChange(val);
+  };
+  return /* @__PURE__ */ jsxs(FormItem, { children: [
+    /* @__PURE__ */ jsx(
+      AutoFormLabel,
+      {
+        label: fieldConfigItem?.label || label,
+        isRequired
+      }
+    ),
+    /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs(
+      Select,
+      {
+        onValueChange: handleValueChange,
+        value: field.value ?? "",
+        ...fieldProps,
+        children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { className: fieldProps.className, children: /* @__PURE__ */ jsx(SelectValue, { placeholder: fieldConfigItem.inputProps?.placeholder, children: field.value ? findItem(field.value)?.[1] : "Select an option" }) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: values.map(([value, label2]) => /* @__PURE__ */ jsx(SelectItem, { value: label2, children: label2 }, value)) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(AutoFormTooltip, { fieldConfigItem }),
+    /* @__PURE__ */ jsx(FormMessage, {})
+  ] });
+}
+
+export { AutoFormEnum as default };

package/dist/ui/src/components/auto-form/fields/input.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const form = require('../../form.cjs');
+const input = require('../../input.cjs');
+const label = require('../common/label.cjs');
+const tooltip = require('../common/tooltip.cjs');
+
+function AutoFormInput({
+  label: label$1,
+  isRequired,
+  fieldConfigItem,
+  fieldProps
+}) {
+  const { showLabel: _showLabel, ...fieldPropsWithoutShowLabel } = fieldProps;
+  const showLabel = _showLabel === void 0 ? true : _showLabel;
+  const type = fieldProps.type || "text";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row  items-center space-x-2", children: /* @__PURE__ */ jsxRuntime.jsxs(form.FormItem, { className: "flex w-full flex-col justify-start", children: [
+    showLabel && /* @__PURE__ */ jsxRuntime.jsx(
+      label,
+      {
+        label: fieldConfigItem?.label || label$1,
+        isRequired
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(form.FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(input.Input, { type, ...fieldPropsWithoutShowLabel }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(tooltip, { fieldConfigItem }),
+    /* @__PURE__ */ jsxRuntime.jsx(form.FormMessage, {})
+  ] }) });
+}
+
+module.exports = AutoFormInput;

package/dist/ui/src/components/auto-form/fields/input.mjs

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { FormItem, FormControl, FormMessage } from '../../form.mjs';
+import { Input } from '../../input.mjs';
+import AutoFormLabel from '../common/label.mjs';
+import AutoFormTooltip from '../common/tooltip.mjs';
+
+function AutoFormInput({
+  label,
+  isRequired,
+  fieldConfigItem,
+  fieldProps
+}) {
+  const { showLabel: _showLabel, ...fieldPropsWithoutShowLabel } = fieldProps;
+  const showLabel = _showLabel === void 0 ? true : _showLabel;
+  const type = fieldProps.type || "text";
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-row  items-center space-x-2", children: /* @__PURE__ */ jsxs(FormItem, { className: "flex w-full flex-col justify-start", children: [
+    showLabel && /* @__PURE__ */ jsx(
+      AutoFormLabel,
+      {
+        label: fieldConfigItem?.label || label,
+        isRequired
+      }
+    ),
+    /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, { type, ...fieldPropsWithoutShowLabel }) }),
+    /* @__PURE__ */ jsx(AutoFormTooltip, { fieldConfigItem }),
+    /* @__PURE__ */ jsx(FormMessage, {})
+  ] }) });
+}
+
+export { AutoFormInput as default };