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,25 +1,42 @@
 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}
     >
+      {props.legend && (
         <legend>
           <Typography
             hierarchy="label"
@@ -33,9 +50,8 @@ export const Fieldset = (props: FieldsetProps) => {
             {props.legend}
           </Typography>
         </legend>
-      <div class="fields">
-        {props.fields({ ...props, orientation: orientation() })}
-      </div>
+      )}
+      <div class="fields">{props.children(fieldProps)}</div>
       {props.error && (
         <div class="error" role="alert">
           <Typography