feat(fieldset): add fieldset component

Author: adaptive-shield-matrix

lib/input/fieldset/Fieldset.tsx

@@ -0,0 +1,23 @@
+import type { Component, JSXElement } from "solid-js"
+import { splitProps } from "solid-js"
+import { classMerge } from "~ui/utils/classMerge"
+import type { MayHaveChildren } from "~ui/utils/MayHaveChildren"
+import type { MayHaveSubtitle } from "~ui/utils/MayHaveSubtitle"
+import type { MayHaveTitle } from "~ui/utils/MayHaveTitle"
+import { classesFieldset } from "./classesFieldset"
+
+export interface FieldsetProps extends MayHaveChildren, MayHaveTitle, MayHaveSubtitle {
+  class?: string
+  titleChildren?: JSXElement
+}
+
+export const Fieldset: Component<FieldsetProps> = (p) => {
+  const [s, rest] = splitProps(p, ["children", "title", "titleClass", "titleChildren", "subtitleClass", "class"])
+
+  return (
+    <fieldset class={classMerge(classesFieldset, s.class)} {...rest}>
+      <legend class={classMerge("px-1", s.titleClass)}>{s.titleChildren ?? s.title}</legend>
+      {s.children}
+    </fieldset>
+  )
+}

lib/input/fieldset/classesFieldset.ts

@@ -0,0 +1 @@
+export const classesFieldset = "rounded-lg border border-solid border-gray-300 dark:border-gray-700 p-3"