@invana/forms 0.0.26 → 0.0.28

package/README.md

@@ -0,0 +1,75 @@
+# @invana/forms
+
+Composable form building blocks for Invana products — `FormField` with an `ObjectField`, plus the
+leaf inputs.
+
+```bash
+pnpm add @invana/forms
+```
+
+Peer dependencies: `@invana/ui`, `@invana/styling`, `react`, `react-dom`, `react-hook-form`.
+
+## This is not a form renderer
+
+There is no `FormRenderer` and no `FormSchema` tree. **You own `useForm`** and you compose your own
+chrome — Card, Tabs, Accordion, a footer, a submit button. This package supplies the fields.
+
+## Usage
+
+`FormField.ObjectField` is the primary building block. Fields render as `${name}.${field.name}`,
+so several ObjectFields in one `useForm` all write into a single shared data object.
+
+```tsx
+import { useForm } from 'react-hook-form';
+import { Form, FormField } from '@invana/forms';
+import { Button } from '@invana/ui';
+
+export function ShapeSettings() {
+  const form = useForm({ defaultValues: { shape: { fill: '#2563eb', radius: 4, visible: true } } });
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(console.log)}>
+        <FormField.ObjectField
+          control={form.control}
+          name="shape"
+          labelPosition="top"
+          fields={[
+            { name: 'fill', type: 'color', label: 'Fill' },
+            { name: 'radius', type: 'number', label: 'Radius', min: 0, max: 32 },
+            { name: 'visible', type: 'boolean', label: 'Visible' },
+          ]}
+          rowConfig={[{ fields: ['fill', 'radius'] }]}
+        />
+        <Button type="submit">Save</Button>
+      </form>
+    </Form>
+  );
+}
+```
+
+A field with a `group` property is auto-wrapped in an Accordion; ungrouped fields render flat.
+`rowConfig` puts named fields side by side in one row.
+
+## Exports
+
+**Fields** — `FormField` (augmented with `.ObjectField`, `.Color`, `.Number`, `.Select`,
+`.Boolean`, `.Input`, `.Icon`), and the standalone `Field`, `ObjectField`, `InputField`,
+`PasswordField`, `TextareaField`, `SelectField`, `BooleanField`, `RadioField`,
+`CheckboxGroupField`, `ColorField`, `NumberField`, `IconField`.
+
+**Controls** — `ColorSwatches`, `SliderNumber`, `IconInput`, and `SettingsPanel`.
+
+**Types** — `FieldConfig`, `RowConfig`, `GroupConfig`, `ObjectFieldProps`, `FieldType`,
+`LabelPosition`, `FieldOrientation`, `FieldSize`, `FieldBadge`, `BooleanControl`, `ColorPreset`.
+
+React Hook Form's `Control`, `FieldValues`, `SubmitHandler`, `UseFormReturn`, `DefaultValues` and
+`Mode` are re-exported so consumers need not import them separately.
+
+## Icons
+
+Pass icons in as props. This package does not bind you to an icon set.
+
+## License
+
+MIT © Ravi Raja Merugu

package/dist/index.cjs

@@ -1413,6 +1413,86 @@ function FieldError({
     }
   );
 }
+var PARAM_SOURCES = ["literal", "argument", "binding"];
+var ParamRow = React2__namespace.forwardRef(
+  ({
+    name,
+    type,
+    source,
+    onSourceChange,
+    value,
+    onValueChange,
+    note,
+    invalid,
+    disabled,
+    className,
+    children,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      "data-invalid": invalid || void 0,
+      "data-disabled": disabled || void 0,
+      className: ui.cn("flex items-start gap-3 py-1.5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-[118px] shrink-0 pt-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate font-mono text-meta", children: name }),
+          type != null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-meta text-muted-foreground", children: type }) : null
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+          children ?? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              Select,
+              {
+                value: source,
+                onValueChange: (v) => onSourceChange?.(v),
+                disabled,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    SelectTrigger,
+                    {
+                      triggerSize: "sm",
+                      "aria-label": `${name} source`,
+                      className: "w-auto shrink-0 rounded-r-none border-r-0 text-meta text-muted-foreground",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {})
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: PARAM_SOURCES.map((s) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: s, children: s }, s)) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Input,
+              {
+                inputSize: "sm",
+                value,
+                onChange: (e) => onValueChange?.(e.target.value),
+                disabled,
+                "aria-invalid": invalid || void 0,
+                "aria-label": name,
+                style: invalid ? { borderColor: "var(--color-destructive)" } : void 0,
+                className: "min-w-0 flex-1 rounded-l-none font-mono"
+              }
+            )
+          ] }),
+          note != null ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: ui.cn(
+                "text-meta",
+                invalid ? "text-destructive" : "text-muted-foreground"
+              ),
+              children: note
+            }
+          ) : null
+        ] })
+      ]
+    }
+  )
+);
+ParamRow.displayName = "ParamRow";
 function InputGroup({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -1589,6 +1669,8 @@ exports.InputGroupTextarea = InputGroupTextarea;
 exports.Label = Label;
 exports.NumberField = NumberField;
 exports.ObjectField = ObjectField;
+exports.PARAM_SOURCES = PARAM_SOURCES;
+exports.ParamRow = ParamRow;
 exports.PasswordField = PasswordField;
 exports.PasswordInput = PasswordInput;
 exports.RadioField = RadioField;