From f04089a40696a1db0223736739fcef15a0abd5a0 Mon Sep 17 00:00:00 2001
From: Brian McGee <brian@bmcgee.ie>
Date: Mon, 7 Jul 2025 10:51:43 +0100
Subject: [PATCH] feat(ui): refine Fieldset API

---
 .../components/v2/Form/Fieldset.stories.tsx   |  4 +-
 .../ui/src/components/v2/Form/Fieldset.tsx    | 62 ++++++++++++-------
 2 files changed, 41 insertions(+), 25 deletions(-)

diff --git a/pkgs/clan-app/ui/src/components/v2/Form/Fieldset.stories.tsx b/pkgs/clan-app/ui/src/components/v2/Form/Fieldset.stories.tsx
index 7320afe05..c157c041f 100644
--- a/pkgs/clan-app/ui/src/components/v2/Form/Fieldset.stories.tsx
+++ b/pkgs/clan-app/ui/src/components/v2/Form/Fieldset.stories.tsx
@@ -40,7 +40,7 @@ export type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     legend: "Signup",
-    fields: (props: FieldProps) => (
+    children: (props: FieldProps) => (
       <>
         <TextInput
           {...props}
@@ -90,7 +90,7 @@ export const Error: Story = {
   args: {
     legend: "Signup",
     error: "You must enter a First Name",
-    fields: (props: FieldProps) => (
+    children: (props: FieldProps) => (
       <>
         <TextInput
           {...props}
diff --git a/pkgs/clan-app/ui/src/components/v2/Form/Fieldset.tsx b/pkgs/clan-app/ui/src/components/v2/Form/Fieldset.tsx
index 6824bac3e..b1d599f7a 100644
--- a/pkgs/clan-app/ui/src/components/v2/Form/Fieldset.tsx
+++ b/pkgs/clan-app/ui/src/components/v2/Form/Fieldset.tsx
@@ -1,41 +1,57 @@
 import "./Fieldset.css";
-import { JSX } from "solid-js";
+import { JSX, splitProps } from "solid-js";
 import cx from "classnames";
 import { Typography } from "@/src/components/v2/Typography/Typography";
 import { FieldProps } from "./Field";
 
-export interface FieldsetProps extends FieldProps {
-  legend: string;
-  disabled: boolean;
+export type FieldsetFieldProps = Pick<
+  FieldProps,
+  "orientation" | "inverted"
+> & {
   error?: string;
-  fields: (props: FieldProps) => JSX.Element;
+  disabled?: boolean;
+};
+
+export interface FieldsetProps
+  extends Pick<FieldProps, "orientation" | "inverted"> {
+  legend?: string;
+  disabled?: boolean;
+  error?: string;
+  children: (props: FieldsetFieldProps) => JSX.Element;
 }
 
 export const Fieldset = (props: FieldsetProps) => {
   const orientation = () => props.orientation || "vertical";
 
+  const [fieldProps] = splitProps(props, [
+    "orientation",
+    "inverted",
+    "disabled",
+    "error",
+  ]);
+
   return (
     <fieldset
       role="group"
-      class={cx(orientation(), { inverted: props.inverted })}
-      disabled={props.disabled}
+      class={cx({ inverted: props.inverted })}
+      disabled={props.disabled || false}
     >
-      <legend>
-        <Typography
-          hierarchy="label"
-          family="mono"
-          size="default"
-          weight="normal"
-          color="tertiary"
-          transform="uppercase"
-          inverted={props.inverted}
-        >
-          {props.legend}
-        </Typography>
-      </legend>
-      <div class="fields">
-        {props.fields({ ...props, orientation: orientation() })}
-      </div>
+      {props.legend && (
+        <legend>
+          <Typography
+            hierarchy="label"
+            family="mono"
+            size="default"
+            weight="normal"
+            color="tertiary"
+            transform="uppercase"
+            inverted={props.inverted}
+          >
+            {props.legend}
+          </Typography>
+        </legend>
+      )}
+      <div class="fields">{props.children(fieldProps)}</div>
       {props.error && (
         <div class="error" role="alert">
           <Typography