@cerberus-design/react 0.10.4 → 0.11.0

package/build/modern/index.js

@@ -1,32 +1,15 @@
-import {
-  ThemeProvider,
-  useThemeContext
-} from "./chunk-EB37HRCN.js";
-import {
-  Toggle
-} from "./chunk-GMG3B34U.js";
-import {
-  ConfirmModal,
-  useConfirmModal
-} from "./chunk-6YUB3ITX.js";
 import {
   NotificationCenter,
   useNotificationCenter
-} from "./chunk-EZNGCXVJ.js";
+} from "./chunk-RDQHHCFR.js";
 import {
   PromptModal,
   usePromptModal
-} from "./chunk-LKFXUM3Z.js";
-import {
-  TabPanel
-} from "./chunk-AYIRV5CL.js";
+} from "./chunk-3NE6C66J.js";
 import {
-  Table,
-  Tr
-} from "./chunk-B4CVET74.js";
-import {
-  Tag
-} from "./chunk-S7XGIQY6.js";
+  ThemeProvider,
+  useThemeContext
+} from "./chunk-EB37HRCN.js";
 import {
   Tbody
 } from "./chunk-PKQTTFWA.js";
@@ -38,20 +21,21 @@ import {
 } from "./chunk-JIJM6JFJ.js";
 import {
   Th
-} from "./chunk-7K6PZBHN.js";
+} from "./chunk-CO4BKT7K.js";
 import {
   Thead
 } from "./chunk-PKY46RRA.js";
 import {
-  Portal
-} from "./chunk-GLY7GU5S.js";
+  Toggle
+} from "./chunk-YWCTMLLO.js";
 import {
-  Radio
-} from "./chunk-LJYCFFX7.js";
+  ConfirmModal,
+  useConfirmModal
+} from "./chunk-X4Y4WTRU.js";
 import {
   Option,
   Select
-} from "./chunk-O6JYYVO7.js";
+} from "./chunk-PA5EB7EO.js";
 import {
   Spinner
 } from "./chunk-7SYJFI5E.js";
@@ -62,14 +46,15 @@ import {
   TabList
 } from "./chunk-UKPF7JOB.js";
 import {
-  ModalHeader
-} from "./chunk-WLEX22KS.js";
+  TabPanel
+} from "./chunk-AYIRV5CL.js";
 import {
-  ModalHeading
-} from "./chunk-2UXE5PDG.js";
+  Table,
+  Tr
+} from "./chunk-B4CVET74.js";
 import {
-  NavMenuLink
-} from "./chunk-KBBASJIY.js";
+  Tag
+} from "./chunk-243VUIA6.js";
 import {
   NavMenuList,
   getPosition
@@ -83,17 +68,63 @@ import {
 } from "./chunk-O75QAT4Z.js";
 import {
   Notification
-} from "./chunk-CMUFJU4S.js";
+} from "./chunk-KLUBAM4U.js";
 import {
   NotificationDescription
 } from "./chunk-XEW6TJJ4.js";
 import {
   NotificationHeading
 } from "./chunk-SXIXDXG3.js";
+import {
+  Portal
+} from "./chunk-GLY7GU5S.js";
+import {
+  Radio
+} from "./chunk-FTPZHG6J.js";
+import {
+  Input
+} from "./chunk-UJKS4DDN.js";
+import {
+  Label
+} from "./chunk-NMF2HYWO.js";
+import {
+  Legend
+} from "./chunk-6TTN2JMY.js";
+import {
+  Modal
+} from "./chunk-BE4EOU2P.js";
+import {
+  ModalDescription
+} from "./chunk-Q7BRMIBR.js";
+import {
+  ModalHeader
+} from "./chunk-ULYQLKWA.js";
+import {
+  ModalHeading
+} from "./chunk-2UXE5PDG.js";
+import {
+  NavMenuLink
+} from "./chunk-KBBASJIY.js";
+import {
+  Droppable
+} from "./chunk-TKI2CKHH.js";
+import {
+  FeatureFlag
+} from "./chunk-BIDE4IJG.js";
+import {
+  FeatureFlags,
+  useFeatureFlags
+} from "./chunk-CJFW36DZ.js";
+import {
+  Fieldset
+} from "./chunk-3ZDFQO25.js";
+import {
+  FieldsetLabel
+} from "./chunk-PZAZKQMO.js";
 import {
   FileStatus,
   processStatus
-} from "./chunk-UXHAFEBA.js";
+} from "./chunk-YMJMB6OP.js";
 import {
   ProgressBar
 } from "./chunk-KCANMM64.js";
@@ -102,22 +133,10 @@ import {
 } from "./chunk-JWIJHSI6.js";
 import {
   FileUploader
-} from "./chunk-JCGWTIR4.js";
+} from "./chunk-HCB5NQ5J.js";
 import {
   IconButton
 } from "./chunk-APD6IX5R.js";
-import {
-  Input
-} from "./chunk-WZOYPFUU.js";
-import {
-  Label
-} from "./chunk-I35HMGJQ.js";
-import {
-  Modal
-} from "./chunk-BE4EOU2P.js";
-import {
-  ModalDescription
-} from "./chunk-Q7BRMIBR.js";
 import {
   MODE_KEY,
   THEME_KEY,
@@ -126,32 +145,27 @@ import {
 import {
   useToggle
 } from "./chunk-REO5GUNC.js";
+import {
+  Admonition,
+  AdmonitionDescription,
+  AdmonitionHeading
+} from "./chunk-ZW3FFE37.js";
 import {
   Avatar
-} from "./chunk-477G5ZEL.js";
+} from "./chunk-ZX6DBC2Z.js";
 import {
   Button
 } from "./chunk-EXGKZGML.js";
 import {
   Checkbox
-} from "./chunk-AUAPBPGW.js";
+} from "./chunk-MDIUFBDX.js";
 import {
   Field,
   useFieldContext
 } from "./chunk-UZDVOIW5.js";
 import {
   CircularProgress
-} from "./chunk-YLPSE5Z2.js";
-import {
-  Droppable
-} from "./chunk-TKI2CKHH.js";
-import {
-  FeatureFlag
-} from "./chunk-BIDE4IJG.js";
-import {
-  FeatureFlags,
-  useFeatureFlags
-} from "./chunk-CJFW36DZ.js";
+} from "./chunk-6QHOKCV3.js";
 import {
   Show
 } from "./chunk-BUVVRQLZ.js";
@@ -173,17 +187,21 @@ import {
 import {
   $cerberusIcons,
   defineIcons
-} from "./chunk-NBG2OSYI.js";
-import "./chunk-BDCFYW34.js";
+} from "./chunk-FT7DFRHQ.js";
+import "./chunk-TMR7JGMP.js";
 import "./chunk-CP7OUC2Q.js";
+import "./chunk-HVKM54BA.js";
 import {
   useModal
-} from "./chunk-OW62FLJ6.js";
+} from "./chunk-7T3JIGM7.js";
 
 // src/index.ts
 export * from "@dnd-kit/core";
 export {
   $cerberusIcons,
+  Admonition,
+  AdmonitionDescription,
+  AdmonitionHeading,
   Avatar,
   Button,
   Checkbox,
@@ -194,11 +212,14 @@ export {
   FeatureFlags,
   Field,
   FieldMessage,
+  Fieldset,
+  FieldsetLabel,
   FileStatus,
   FileUploader,
   IconButton,
   Input,
   Label,
+  Legend,
   MODE_KEY,
   Modal,
   ModalDescription,

package/build/modern/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// components\n\nexport * from './components/Avatar'\nexport * from './components/Button'\nexport * from './components/Checkbox'\nexport * from './components/CircularProgress'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/IconButton'\nexport * from './components/Input'\nexport * from './components/Label'\nexport * from './components/Modal'\nexport * from './components/ModalHeader'\nexport * from './components/ModalHeading'\nexport * from './components/ModalDescription'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/Radio'\nexport * from './components/Select'\nexport * from './components/Spinner'\nexport * from './components/Tab'\nexport * from './components/TabList'\nexport * from './components/TabPanel'\nexport * from './components/Table'\nexport * from './components/Thead'\nexport * from './components/Th'\nexport * from './components/Td'\nexport * from './components/Tbody'\nexport * from './components/Tag'\nexport * from './components/Textarea'\nexport * from './components/Toggle'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/confirm-modal'\nexport * from './context/feature-flags'\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/notification-center'\nexport * from './context/prompt-modal'\nexport * from './context/tabs'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useModal'\nexport * from './hooks/useTheme'\nexport * from './hooks/useToggle'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/tabs.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/defineIcons'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFA,cAAc;","names":[]}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// components\n\nexport * from './components/Admonition'\nexport * from './components/Avatar'\nexport * from './components/Button'\nexport * from './components/Checkbox'\nexport * from './components/CircularProgress'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\nexport * from './components/Fieldset'\nexport * from './components/FieldsetLabel'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/IconButton'\nexport * from './components/Input'\nexport * from './components/Label'\nexport * from './components/Legend'\nexport * from './components/Modal'\nexport * from './components/ModalHeader'\nexport * from './components/ModalHeading'\nexport * from './components/ModalDescription'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/Radio'\nexport * from './components/Select'\nexport * from './components/Spinner'\nexport * from './components/Tab'\nexport * from './components/TabList'\nexport * from './components/TabPanel'\nexport * from './components/Table'\nexport * from './components/Thead'\nexport * from './components/Th'\nexport * from './components/Td'\nexport * from './components/Tbody'\nexport * from './components/Tag'\nexport * from './components/Textarea'\nexport * from './components/Toggle'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/confirm-modal'\nexport * from './context/feature-flags'\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/notification-center'\nexport * from './context/prompt-modal'\nexport * from './context/tabs'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useModal'\nexport * from './hooks/useTheme'\nexport * from './hooks/useToggle'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/tabs.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/defineIcons'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoFA,cAAc;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.10.4",
+  "version": "0.11.0",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -25,8 +25,8 @@
     "react": "^18",
     "react-dom": "^18",
     "tsup": "^8.1.0",
-    "@cerberus-design/styled-system": "0.10.4",
-    "@cerberus-design/configs": "0.0.0"
+    "@cerberus-design/configs": "0.0.0",
+    "@cerberus-design/styled-system": "0.11.0"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Admonition.tsx

@@ -0,0 +1,186 @@
+import {
+  admonition,
+  type AdmonitionVariantProps,
+} from '@cerberus/styled-system/recipes'
+import { cx } from '@cerberus-design/styled-system/css'
+import { hstack } from '@cerberus/styled-system/patterns'
+import { $cerberusIcons } from '../config/defineIcons'
+import type { HTMLAttributes, ReactNode } from 'react'
+import { Avatar } from './Avatar'
+import { Show } from './Show'
+
+/**
+ * This module provides a set of components for creating admonitions.
+ * @module Admonition
+ */
+
+export type AdmonitionProps = HTMLAttributes<HTMLDivElement> &
+  AdmonitionVariantProps & {
+    /**
+     * One off replacement for the icon.
+     */
+    icon?: ReactNode
+  }
+
+/**
+ * The `Admonition` component is used to create an admonition.
+ * @example
+ * ```tsx
+ * <Admonition palette="page">
+ *  <AdmonitionHeading palette="page">Page</AdmonitionHeading>
+ *  <AdmonitionDescription palette="page">
+ *   This is a page admonition.
+ *  </AdmonitionDescription>
+ * </Admonition>
+ * ```
+ * @see https://cerberus.digitalu.design/react/admonition
+ */
+export function Admonition(props: AdmonitionProps) {
+  const { children, palette = 'page', usage, icon, ...nativeProps } = props
+  return (
+    <aside
+      {...nativeProps}
+      className={cx(
+        nativeProps.className,
+        hstack({
+          gap: 'md',
+          w: 'full',
+        }),
+        admonition({ palette, usage }).root,
+      )}
+    >
+      <Show when={Boolean(icon)} fallback={<MatchAvatar palette={palette} />}>
+        {icon}
+      </Show>
+      <div>{children}</div>
+    </aside>
+  )
+}
+
+export type AdmonitionHeadingProps = HTMLAttributes<HTMLParagraphElement> &
+  AdmonitionVariantProps
+
+/**
+ * The `AdmonitionHeading` component is used to create a heading within an
+ * admonition.
+ * @example
+ * ```tsx
+ * <Admonition palette="page">
+ *  <AdmonitionHeading palette="page">Page</AdmonitionHeading>
+ *  <AdmonitionDescription palette="page">
+ *   This is a page admonition.
+ *  </AdmonitionDescription>
+ * </Admonition>
+ * ```
+ * @see https://cerberus.digitalu.design/react/admonition
+ */
+export function AdmonitionHeading(props: AdmonitionHeadingProps) {
+  const { palette, usage, ...nativeProps } = props
+  return (
+    <p
+      {...nativeProps}
+      className={cx(
+        nativeProps.className,
+        admonition({ palette, usage }).heading,
+      )}
+    />
+  )
+}
+
+export type AdmonitionDescriptionProps = HTMLAttributes<HTMLParagraphElement> &
+  AdmonitionVariantProps
+
+/**
+ * The `AdmonitionDescription` component is used to create a description within
+ * an admonition.
+ * @example
+ * ```tsx
+ * <Admonition palette="page">
+ *  <AdmonitionHeading palette="page">Page</AdmonitionHeading>
+ *  <AdmonitionDescription palette="page">
+ *   This is a page admonition.
+ *  </AdmonitionDescription>
+ * </Admonition>
+ * ```
+ * @see https://cerberus.digitalu.design/react/admonition
+ */
+export function AdmonitionDescription(props: AdmonitionDescriptionProps) {
+  const { palette, usage, ...nativeProps } = props
+  return (
+    <p
+      {...nativeProps}
+      className={cx(
+        nativeProps.className,
+        admonition({ palette, usage }).description,
+      )}
+    />
+  )
+}
+
+// Private components
+
+type MatchAvatarProps = AdmonitionVariantProps
+
+function MatchAvatar(props: MatchAvatarProps) {
+  const {
+    infoNotification: InfoIcon,
+    successNotification: SuccessIcon,
+    warningNotification: WarningIcon,
+    dangerNotification: DangerIcon,
+  } = $cerberusIcons
+  switch (props.palette) {
+    case 'page':
+      return (
+        <Avatar
+          gradient="charon-light"
+          ariaLabel=""
+          icon={<InfoIcon />}
+          size="sm"
+          src=""
+        />
+      )
+    case 'info':
+      return (
+        <Avatar
+          gradient="amphiaraus-dark"
+          ariaLabel=""
+          icon={<InfoIcon />}
+          size="sm"
+          src=""
+        />
+      )
+    case 'success':
+      return (
+        <Avatar
+          gradient="thanatos-dark"
+          ariaLabel=""
+          icon={<SuccessIcon />}
+          size="sm"
+          src=""
+        />
+      )
+    case 'warning':
+      return (
+        <Avatar
+          gradient="asphodel-light"
+          ariaLabel=""
+          icon={<WarningIcon />}
+          size="sm"
+          src=""
+        />
+      )
+    case 'danger':
+      return (
+        <Avatar
+          gradient="hades-light"
+          ariaLabel=""
+          icon={<DangerIcon />}
+          size="sm"
+          src=""
+        />
+      )
+
+    default:
+      throw new Error('Unsupported admonition palette')
+  }
+}

package/src/components/AnimatingUploadIcon.tsx

@@ -0,0 +1,83 @@
+import { type CarbonIconProps } from '@cerberus/icons'
+
+/**
+ * This module contains an animating icon to use for the FileStatus component.
+ * @module
+ */
+
+export type AnimatingUploadIconProps = CarbonIconProps
+
+export function AnimatingUploadIcon(props: AnimatingUploadIconProps) {
+  return (
+    <svg
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      width={props.size ?? '1em'}
+      height={props.size ?? '1em'}
+      viewBox="0 0 24 24"
+    >
+      <g
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="square"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      >
+        <path
+          data-name="animating-trail"
+          strokeDasharray="2 4"
+          strokeDashoffset={6}
+          d="M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9"
+        >
+          <animate
+            attributeName="stroke-dashoffset"
+            dur="0.45s"
+            repeatCount="indefinite"
+            values="6;0"
+          ></animate>
+        </path>
+
+        <path
+          data-name="half-circle"
+          strokeDasharray={32}
+          strokeDashoffset={32}
+          d="M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9"
+        >
+          <animate
+            fill="freeze"
+            attributeName="stroke-dashoffset"
+            begin="0.075s"
+            dur="0.3s"
+            values="32;0"
+          ></animate>
+        </path>
+
+        <svg
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          width="0.8em"
+          height="0.8em"
+          x="27%"
+          y="27%"
+          viewBox="0 0 24 24"
+        >
+          <polygon
+            fill="currentColor"
+            stroke="currentColor"
+            strokeWidth={0.8}
+            opacity="1"
+            points="3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 "
+          >
+            <animate
+              fill="freeze"
+              attributeName="opacity"
+              values="1;0;1"
+              dur="2s"
+              repeatCount="indefinite"
+            ></animate>
+          </polygon>
+        </svg>
+      </g>
+    </svg>
+  )
+}

package/src/components/CircularProgress.tsx

@@ -3,6 +3,7 @@
 import { cq } from '@cerberus/styled-system/patterns'
 import { css } from '@cerberus/styled-system/css'
 import type { SVGProps } from 'react'
+import { Show } from './Show'
 
 /**
  * This module contains the CircularProgress component.
@@ -30,6 +31,10 @@ export interface CircularProgressProps extends SVGProps<SVGSVGElement> {
    * What is shown below the now value (default: 'Done')
    */
   syntax?: string
+  /**
+   * The background style of the CircularProgress
+   */
+  bgStyle?: 'filled' | 'transparent'
 }
 
 /**
@@ -49,6 +54,7 @@ export function CircularProgress(props: CircularProgressProps) {
   const radius = `calc(50% * (1 - ${strokeW}/100))`
   const status: string = props.syntax ?? 'Done'
   const now: number = props.now >= 100 ? 100 : props.now
+  const bgStyle: string = props.bgStyle ?? 'filled'
 
   return (
     <div
@@ -84,24 +90,26 @@ export function CircularProgress(props: CircularProgressProps) {
           <linearGradient id="gradient">
             <stop
               offset="0%"
-              stopColor="var(--cerberus-colors-action-bg-initial)"
+              stopColor="var(--cerberus-colors-data-viz-progress-start)"
             />
             <stop
               offset="100%"
-              stopColor="var(--cerberus-colors-action-bg-active)"
+              stopColor="var(--cerberus-colors-data-viz-progress-end)"
             />
           </linearGradient>
         </defs>
 
-        <circle
-          className={css({
-            fill: 'page.surface.initial',
-          })}
-          cx="50%"
-          cy="50%"
-          r={`calc(50% * (1 - ${strokeW}/100))`}
-          pathLength="100"
-        />
+        <Show when={bgStyle === 'filled'}>
+          <circle
+            className={css({
+              fill: 'page.surface.initial',
+            })}
+            cx="50%"
+            cy="50%"
+            r={`calc(50% * (1 - ${strokeW}/100))`}
+            pathLength="100"
+          />
+        </Show>
         <circle
           className={css({
             stroke: 'page.bg.100',
@@ -116,7 +124,7 @@ export function CircularProgress(props: CircularProgressProps) {
           className={css({
             stroke: 'url(#gradient)',
             transition: 'stroke-dashoffset, stroke 0.5s ease',
-            '&:is([data-complete=true])': {
+            _isComplete: {
               stroke: 'success.bg.initial',
             },
           })}

package/src/components/Fieldset.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import { css, cx } from '@cerberus/styled-system/css'
+import type { FieldsetHTMLAttributes } from 'react'
+import { useFieldContext } from '../context/field'
+
+/**
+ * This module contains the Fieldset component.
+ * @module Fieldset
+ */
+
+export type FieldsetProps = FieldsetHTMLAttributes<HTMLFieldSetElement>
+
+/**
+ * A component to group related elements in a form for accessibility.
+ * @memberof Field
+ * @see https://cerberus.digitalu.com/react/fieldset
+ * @description [A11y Form Checklist](https://www.a11yproject.com/checklist/#forms)
+ * @description [MDN Web Docs: Fieldset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset)
+ * @example
+ * ```tsx
+ * import { Fieldset, Legend, Field, Radio, Label } from '@cerberus/react'
+ * import { Hstack } from '@cerberus/styled-system/jsx'
+ *
+ * function SomeForm() {
+ *   return (
+ *    <form>
+ *     <Fieldset>
+ *      <Legend>Do you like cats?</Legend>
+ *      <Hstack>
+ *        <Field>
+ *          <Radio id="yes" name="cats" value="yes" />
+ *          <Label htmlFor="yes">Yes</Label>
+ *        </Field>
+ *      </Hstack>
+ *      <Hstack>
+ *        <Field>
+ *         <Radio id="no" name="cats" value="no" />
+ *         <Label htmlFor="no">No</Label>
+ *        </Field>
+ *      </Hstack>
+ *     </Fieldset>
+ *    </form>
+ *   )
+ * }
+ */
+export function Fieldset(props: FieldsetProps) {
+  const { invalid, ...formState } = useFieldContext()
+
+  return (
+    <fieldset
+      {...props}
+      {...formState}
+      {...(invalid && { 'aria-invalid': true })}
+      className={cx(
+        props.className,
+        css({
+          border: 'none',
+          pt: 2,
+          margin: 0,
+        }),
+      )}
+    />
+  )
+}