feat(ui): refine Fieldset API

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}

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 {
+export type FieldsetFieldProps = Pick<
-  legend: string;
+  FieldProps,
-  disabled: boolean;
+  "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 })}
+      class={cx({ inverted: props.inverted })}
-      disabled={props.disabled}
+      disabled={props.disabled || false}
     >
-      <legend>
+      {props.legend && (
-        <Typography
+        <legend>
-          hierarchy="label"
+          <Typography
-          family="mono"
+            hierarchy="label"
-          size="default"
+            family="mono"
-          weight="normal"
+            size="default"
-          color="tertiary"
+            weight="normal"
-          transform="uppercase"
+            color="tertiary"
-          inverted={props.inverted}
+            transform="uppercase"
-        >
+            inverted={props.inverted}
-          {props.legend}
+          >
-        </Typography>
+            {props.legend}
-      </legend>
+          </Typography>
-      <div class="fields">
+        </legend>
-        {props.fields({ ...props, orientation: orientation() })}
+      )}
-      </div>
+      <div class="fields">{props.children(fieldProps)}</div>
       {props.error && (
         <div class="error" role="alert">
           <Typography