@cerberus-design/react 0.10.4-next-8007762 → 0.10.4-next-4e536c0

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/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmFA,cAAc;","names":[]}

package/package.json

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

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,
+        }),
+      )}
+    />
+  )
+}

package/src/components/FieldsetLabel.tsx

@@ -0,0 +1,59 @@
+import { cx } from '@cerberus/styled-system/css'
+import { label, type LabelVariantProps } from '@cerberus/styled-system/recipes'
+import type { LabelProps } from './Label'
+
+/**
+ * This module contains the FieldsetLabel component.
+ * @module FieldsetLabel
+ */
+
+export type FieldsetLabelProps = LabelProps & LabelVariantProps
+
+/**
+ * Used for labeling inputs that are children of a Fieldset group.
+ * @memberof Fieldset
+ * @see https://cerberus.digitalu.design/react/fieldset
+ * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)
+ * @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" />
+ *          <FieldsetLabel htmlFor="yes">Yes</FieldsetLabel>
+ *        </Field>
+ *      </Hstack>
+ *      <Hstack>
+ *        <Field>
+ *         <Radio id="no" name="cats" value="no" />
+ *         <FieldsetLabel htmlFor="no">No</FieldsetLabel>
+ *        </Field>
+ *      </Hstack>
+ *     </Fieldset>
+ *    </form>
+ *   )
+ * }
+ * ```
+ */
+export function FieldsetLabel(props: FieldsetLabelProps) {
+  const { size, usage, ...nativeProps } = props
+  return (
+    <label
+      {...nativeProps}
+      className={cx(
+        nativeProps.className,
+        label({
+          size,
+          usage,
+        }),
+      )}
+    />
+  )
+}

package/src/components/Label.tsx

@@ -57,7 +57,7 @@ export function Label(props: PropsWithChildren<LabelProps>) {
       <Show when={required}>
         <span
           className={css({
-            color: 'inherit',
+            color: 'page.text.100',
             fontSize: 'inherit',
           })}
         >

package/src/components/Legend.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import { css, cx } from '@cerberus/styled-system/css'
+import { type HTMLAttributes } from 'react'
+import { useFieldContext } from '../context/field'
+import { Show } from './Show'
+import {
+  label,
+  type LabelVariantProps,
+} from '@cerberus-design/styled-system/recipes'
+import { hstack } from '@cerberus-design/styled-system/patterns'
+
+/**
+ * This module contains the Fieldset component.
+ * @module Fieldset
+ */
+
+export type LegendProps = HTMLAttributes<HTMLLegendElement> & LabelVariantProps
+
+/**
+ * A component to provide a global label for a group of related elements in a form (for accessibility).
+ * @memberof Fieldset
+ * @see https://cerberus.digitalu.com/react/fieldset
+ * @description [A11y Form Checklist](https://www.a11yproject.com/checklist/#forms)
+ * @description [MDN Web Docs: Legend](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend)
+ * @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 Legend(props: LegendProps) {
+  const { size, ...nativeProps } = props
+  const { invalid, ...formState } = useFieldContext()
+
+  return (
+    <legend
+      {...nativeProps}
+      {...formState}
+      {...(invalid && { 'aria-invalid': true })}
+      className={cx(
+        nativeProps.className,
+        hstack({
+          justify: 'space-between',
+          w: 'full',
+        }),
+        label({
+          size,
+        }),
+      )}
+    >
+      {nativeProps.children}
+      <Show when={formState.required}>
+        <span
+          className={css({
+            color: 'page.text.100',
+            fontSize: 'inherit',
+          })}
+        >
+          (required)
+        </span>
+      </Show>
+    </legend>
+  )
+}

package/src/index.ts

@@ -12,11 +12,14 @@ export * from './components/CircularProgress'
 export * from './components/Droppable'
 export * from './components/FieldMessage'
 export * from './components/FeatureFlag'
+export * from './components/Fieldset'
+export * from './components/FieldsetLabel'
 export * from './components/FileStatus'
 export * from './components/FileUploader'
 export * from './components/IconButton'
 export * from './components/Input'
 export * from './components/Label'
+export * from './components/Legend'
 export * from './components/Modal'
 export * from './components/ModalHeader'
 export * from './components/ModalHeading'