@cerberus-design/react 0.15.0-next-5d7dc1e → 0.15.0-next-7a184be

package/src/components/deprecated/FieldsetLabel.tsx

@@ -0,0 +1,32 @@
+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 & {
+    htmlFor?: string
+  }
+
+/**
+ * @deprecated
+ */
+export function FieldsetLabel(props: FieldsetLabelProps) {
+  const { size, usage, ...nativeProps } = props
+  return (
+    <label
+      {...nativeProps}
+      className={cx(
+        nativeProps.className,
+        label({
+          size,
+          usage,
+        }),
+      )}
+    />
+  )
+}

package/src/components/fieldset/fieldset.tsx

@@ -0,0 +1,55 @@
+import type { FieldsetRootProps } from '@ark-ui/react'
+import { splitProps } from '../../utils'
+import { FieldsetParts } from './parts'
+import type { FieldsetVariantProps } from '@cerberus/styled-system/recipes'
+
+/**
+ * This module contains the Fieldset component.
+ * @module Fieldset
+ */
+
+export interface FieldsetProps extends FieldsetRootProps, FieldsetVariantProps {
+  /**
+   * The legend/title/label of the fieldset group.
+   */
+  legend?: string
+  /**
+   * The description text for the fieldset group.
+   */
+  helperText?: string
+  /**
+   * The error text for the fieldset group shown when the field is invalid.
+   */
+  errorText?: string
+}
+
+/**
+ * A component used for grouping related fields in a form that is an
+ * abstraction of the Fieldset primitives.
+ * @description [Fieldset Docs](https://cerberus.digitalu.design/react/fieldset)
+ * @description [Primitive Docs](https://ark-ui.com/react/docs/components/fieldset)
+ */
+export function Fieldset(props: FieldsetProps) {
+  const [fieldsetProps, { usage }, rootProps] = splitProps(
+    props,
+    ['legend', 'helperText', 'errorText', 'children'],
+    ['usage'],
+  )
+
+  return (
+    <FieldsetParts.Root {...rootProps}>
+      <FieldsetParts.Legend usage={usage}>
+        {fieldsetProps.legend}
+      </FieldsetParts.Legend>
+      <FieldsetParts.HelperText usage={usage}>
+        {fieldsetProps.helperText}
+      </FieldsetParts.HelperText>
+
+      {fieldsetProps.children}
+
+      <FieldsetParts.ErrorText>
+        {fieldsetProps.errorText}
+      </FieldsetParts.ErrorText>
+    </FieldsetParts.Root>
+  )
+}

package/src/components/fieldset/index.ts

@@ -0,0 +1,3 @@
+export * from './fieldset'
+export * from './parts'
+export * from './primitives'

package/src/components/fieldset/parts.ts

@@ -0,0 +1,47 @@
+import type { ElementType } from 'react'
+import {
+  FieldsetErrorText,
+  FieldsetHelperText,
+  FieldsetLegend,
+  FieldsetRoot,
+} from './primitives'
+
+/**
+ * This module contains the parts of the Field component.
+ * @module 'field/parts'
+ */
+
+interface FieldsetPartsValue {
+  /**
+   * The container of the field.
+   */
+  Root: ElementType
+  /**
+   * The label of the field.
+   */
+  Legend: ElementType
+  /**
+   * The text that displays when the field is valid.
+   */
+  HelperText: ElementType
+  /**
+   * The text that displays when the field is invalid.
+   */
+  ErrorText: ElementType
+}
+
+/**
+ * An Object containing the parts of the Field component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the FieldParts object and
+ * the entire family of components vs. only what you use.
+ */
+export const FieldsetParts: FieldsetPartsValue = {
+  Root: FieldsetRoot,
+  Legend: FieldsetLegend,
+  HelperText: FieldsetHelperText,
+  ErrorText: FieldsetErrorText,
+}

package/src/components/fieldset/primitives.tsx

@@ -0,0 +1,79 @@
+import {
+  Fieldset,
+  type FieldsetHelperTextProps,
+  type FieldsetLegendProps,
+  type FieldsetRootProps,
+} from '@ark-ui/react/fieldset'
+import { cx } from '@cerberus/styled-system/css'
+import {
+  fieldset,
+  type FieldsetVariantProps,
+} from '@cerberus/styled-system/recipes'
+
+/**
+ * This module contains all the primitives of the Fieldset component.
+ * @module 'react/fieldset'
+ */
+
+/**
+ * The context & container for the Fieldset components.
+ * @description [Fieldset Docs](https://cerberus.digitalu.design/react/fieldset)
+ * @description [Primitive Docs](https://ark-ui.com/react/docs/components/fieldset)
+ */
+export function FieldsetRoot(props: FieldsetRootProps) {
+  const styles = fieldset()
+  return (
+    <Fieldset.Root {...props} className={cx(styles.root, props.className)} />
+  )
+}
+
+/**
+ * The legend element for the Fieldset group.
+ * @description [Fieldset Docs](https://cerberus.digitalu.design/react/fieldset)
+ * @description [Primitive Docs](https://ark-ui.com/react/docs/components/fieldset)
+ */
+export function FieldsetLegend(
+  props: FieldsetLegendProps & FieldsetVariantProps,
+) {
+  const { usage, ...legendProps } = props
+  const styles = fieldset({ usage })
+  return (
+    <Fieldset.Legend
+      {...legendProps}
+      className={cx(styles.legend, legendProps.className)}
+    />
+  )
+}
+
+/**
+ * The description element for the Fieldset group.
+ * @description [Fieldset Docs](https://cerberus.digitalu.design/react/fieldset)
+ * @description [Primitive Docs](https://ark-ui.com/react/docs/components/fieldset)
+ */
+export function FieldsetHelperText(
+  props: FieldsetHelperTextProps & FieldsetVariantProps,
+) {
+  const { usage, ...helperTextProps } = props
+  const styles = fieldset({ usage })
+  return (
+    <Fieldset.HelperText
+      {...helperTextProps}
+      className={cx(styles.helperText, helperTextProps.className)}
+    />
+  )
+}
+
+/**
+ * The error text element for the Fieldset group.
+ * @description [Fieldset Docs](https://cerberus.digitalu.design/react/fieldset)
+ * @description [Primitive Docs](https://ark-ui.com/react/docs/components/fieldset)
+ */
+export function FieldsetErrorText(props: FieldsetHelperTextProps) {
+  const styles = fieldset()
+  return (
+    <Fieldset.ErrorText
+      {...props}
+      className={cx(styles.errorText, props.className)}
+    />
+  )
+}

package/src/components/radio/index.ts

@@ -0,0 +1,3 @@
+export * from './parts'
+export * from './primitives'
+export * from './radio'

package/src/components/radio/parts.ts

@@ -0,0 +1,65 @@
+import type { ElementType } from 'react'
+import {
+  RadioGroupRoot,
+  RadioGroupLabel,
+  RadioGroupIndicator,
+  RadioGroupItem,
+  RadioGroupItemText,
+  RadioGroupItemControl,
+  RadioGroupItemHiddenInput,
+} from './primitives'
+
+/**
+ * This module contains the parts of the Radio parts.
+ * @module 'radio/parts'
+ */
+
+interface RadioPartsValue {
+  /**
+   * The container of the field.
+   */
+  Root: ElementType
+  /**
+   * The label of the field.
+   */
+  Label: ElementType
+  /**
+   * The indicator that appears when a radio is checked.
+   */
+  Indicator: ElementType
+  /**
+   * An individual radio item of the field.
+   */
+  Item: ElementType
+  /**
+   * The text that labels a single radio of the field.
+   */
+  ItemText: ElementType
+  /**
+   * The visual radio control of the field.
+   */
+  ItemControl: ElementType
+  /**
+   * The native input for a radio item in the field.
+   */
+  ItemHiddenInput: ElementType
+}
+
+/**
+ * An Object containing the parts of the Radio component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the RadioParts object and
+ * the entire family of components vs. only what you use.
+ */
+export const RadioParts: RadioPartsValue = {
+  Root: RadioGroupRoot,
+  Label: RadioGroupLabel,
+  Indicator: RadioGroupIndicator,
+  Item: RadioGroupItem,
+  ItemText: RadioGroupItemText,
+  ItemControl: RadioGroupItemControl,
+  ItemHiddenInput: RadioGroupItemHiddenInput,
+}

package/src/components/radio/primitives.tsx

@@ -0,0 +1,123 @@
+import {
+  RadioGroup as ArkRadioGroup,
+  type RadioGroupIndicatorProps,
+  type RadioGroupItemControlProps,
+  type RadioGroupItemHiddenInputProps,
+  type RadioGroupItemProps,
+  type RadioGroupItemTextProps,
+  type RadioGroupLabelProps,
+  type RadioGroupRootProps,
+} from '@ark-ui/react/radio-group'
+import { cx } from '@cerberus/styled-system/css'
+import {
+  radioGroup,
+  type RadioGroupVariantProps,
+} from '@cerberus/styled-system/recipes'
+
+/**
+ * This module contains the Radio primitives
+ * @module 'react/radio'
+ */
+
+/**
+ * The RadioGroupRoot component is used to group radio buttons together.
+ */
+export function RadioGroupRoot(
+  props: RadioGroupRootProps & RadioGroupVariantProps,
+) {
+  const { size, orientation, ...rootProps } = props
+  const styles = radioGroup({ size, orientation })
+  return (
+    <ArkRadioGroup.Root
+      {...rootProps}
+      className={cx(styles.root, rootProps.className)}
+    />
+  )
+}
+
+/**
+ * The RadioGroupLabel component is used to label a group of radio buttons.
+ */
+export function RadioGroupLabel(props: RadioGroupLabelProps) {
+  const styles = radioGroup()
+  return (
+    <ArkRadioGroup.Label
+      {...props}
+      className={cx(styles.label, props.className)}
+    />
+  )
+}
+
+/**
+ * The RadioGroupIndicator component is used to indicate the selected radio
+ * button in a group.
+ */
+export function RadioGroupIndicator(props: RadioGroupIndicatorProps) {
+  const styles = radioGroup()
+  return (
+    <ArkRadioGroup.Indicator
+      {...props}
+      className={cx(styles.indicator, props.className)}
+    />
+  )
+}
+
+/**
+ * The RadioGroupItem component is used to render a single radio button in a
+ * group.
+ */
+export function RadioGroupItem(props: RadioGroupItemProps) {
+  const styles = radioGroup()
+  return (
+    <ArkRadioGroup.Item
+      {...props}
+      className={cx(styles.item, props.className)}
+    />
+  )
+}
+
+/**
+ * The RadioGroupItemText component is used to render the text label for a
+ * single radio button in a group.
+ */
+export function RadioGroupItemText(
+  props: RadioGroupItemTextProps & RadioGroupVariantProps,
+) {
+  const { size, orientation, ...itemTextProps } = props
+  const styles = radioGroup({ size, orientation })
+  return (
+    <ArkRadioGroup.ItemText
+      {...itemTextProps}
+      className={cx(styles.itemText, itemTextProps.className)}
+    />
+  )
+}
+
+/**
+ * The RadioGroupItemControl component is used to render the control for a
+ * single radio button in a group.
+ */
+export function RadioGroupItemControl(
+  props: RadioGroupItemControlProps & RadioGroupVariantProps,
+) {
+  const { size, orientation, ...itemControlProps } = props
+  const styles = radioGroup({ size, orientation })
+  return (
+    <ArkRadioGroup.ItemControl
+      {...itemControlProps}
+      className={cx(styles.itemControl, itemControlProps.className)}
+    />
+  )
+}
+
+/**
+ * The RadioGroupItemHiddenInput component is used to render the hidden input
+ * for a single radio button in a group.
+ */
+export function RadioGroupItemHiddenInput(
+  props: RadioGroupItemHiddenInputProps,
+) {
+  return <ArkRadioGroup.ItemHiddenInput {...props} />
+}
+
+export const RadioGroup = RadioGroupRoot

package/src/components/radio/radio.tsx

@@ -0,0 +1,35 @@
+import type { RadioGroupItemProps } from '@ark-ui/react'
+import { type RadioGroupVariantProps } from '@cerberus/styled-system/recipes'
+import {
+  RadioGroupItem,
+  RadioGroupItemControl,
+  RadioGroupItemHiddenInput,
+  RadioGroupItemText,
+} from './primitives'
+
+/**
+ * This module contains the Radio component.
+ * @module
+ */
+
+export type RadioProps = RadioGroupVariantProps & RadioGroupItemProps
+
+/**
+ * The Radio component is used to allow users to select a single option from a list of options.
+ * @see https://cerberus.digitalu.design/react/radio
+ * @memberof module:Field
+ * @example
+ * ```tsx
+ * <Radio value="option1">Option 1</Radio>
+ * ```
+ */
+export function Radio(props: RadioProps) {
+  const { size, children, ...groupProps } = props
+  return (
+    <RadioGroupItem {...groupProps}>
+      <RadioGroupItemControl size={size} />
+      <RadioGroupItemText size={size}>{children}</RadioGroupItemText>
+      <RadioGroupItemHiddenInput />
+    </RadioGroupItem>
+  )
+}

package/src/index.ts

@@ -6,6 +6,7 @@
 // deprecated
 
 export * from './components/deprecated/FieldMessage'
+export * from './components/deprecated/FieldsetLabel'
 export * from './components/deprecated/Label'
 export * from './components/deprecated/Modal'
 export * from './components/deprecated/ModalHeader'
@@ -33,8 +34,7 @@ export * from './components/Dialog.client'
 export * from './components/Droppable'
 export * from './components/FeatureFlag'
 export * from './components/field/index'
-export * from './components/Fieldset'
-export * from './components/FieldsetLabel'
+export * from './components/fieldset/index'
 export * from './components/FileStatus'
 export * from './components/FileUploader'
 export * from './components/for'
@@ -46,7 +46,7 @@ export * from './components/NotificationHeading'
 export * from './components/NotificationDescription'
 export * from './components/Portal'
 export * from './components/ProgressBar'
-export * from './components/Radio'
+export * from './components/radio/index'
 export * from './components/Spinner'
 export * from './components/Tabs.client'
 export * from './components/Table'

package/build/legacy/components/Fieldset.cjs

@@ -1,53 +0,0 @@
-"use strict";
-"use client";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/components/Fieldset.tsx
-var Fieldset_exports = {};
-__export(Fieldset_exports, {
-  Fieldset: () => Fieldset
-});
-module.exports = __toCommonJS(Fieldset_exports);
-var import_field = require("@ark-ui/react/field");
-var import_css = require("@cerberus/styled-system/css");
-var import_jsx_runtime = require("react/jsx-runtime");
-function Fieldset(props) {
-  const { invalid, disabled } = (0, import_field.useFieldContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "fieldset",
-    {
-      ...props,
-      disabled,
-      ...invalid && { "aria-invalid": true },
-      className: (0, import_css.cx)(
-        props.className,
-        (0, import_css.css)({
-          border: "none",
-          pt: 2,
-          margin: 0
-        })
-      )
-    }
-  );
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Fieldset
-});
-//# sourceMappingURL=Fieldset.cjs.map

package/build/legacy/components/Fieldset.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/Fieldset.tsx"],"sourcesContent":["'use client'\n\nimport { useFieldContext } from '@ark-ui/react/field'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport type { FieldsetHTMLAttributes } from 'react'\n\n/**\n * This module contains the Fieldset component.\n * @module Fieldset\n */\n\nexport type FieldsetProps = FieldsetHTMLAttributes<HTMLFieldSetElement>\n\n/**\n * A component to group related elements in a form for accessibility.\n * @memberof Field\n * @see https://cerberus.digitalu.com/react/fieldset\n * @description [A11y Form Checklist](https://www.a11yproject.com/checklist/#forms)\n * @description [MDN Web Docs: Fieldset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset)\n * @example\n * ```tsx\n * import { Fieldset, Legend, Field, Radio, Label } from '@cerberus/react'\n * import { Hstack } from '@cerberus/styled-system/jsx'\n *\n * function SomeForm() {\n *   return (\n *    <form>\n *     <Fieldset>\n *      <Legend>Do you like cats?</Legend>\n *      <Hstack>\n *        <Field>\n *          <Radio id=\"yes\" name=\"cats\" value=\"yes\" />\n *          <Label htmlFor=\"yes\">Yes</Label>\n *        </Field>\n *      </Hstack>\n *      <Hstack>\n *        <Field>\n *         <Radio id=\"no\" name=\"cats\" value=\"no\" />\n *         <Label htmlFor=\"no\">No</Label>\n *        </Field>\n *      </Hstack>\n *     </Fieldset>\n *    </form>\n *   )\n * }\n */\nexport function Fieldset(props: FieldsetProps) {\n  const { invalid, disabled } = useFieldContext()\n\n  return (\n    <fieldset\n      {...props}\n      disabled={disabled}\n      {...(invalid && { 'aria-invalid': true })}\n      className={cx(\n        props.className,\n        css({\n          border: 'none',\n          pt: 2,\n          margin: 0,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAgC;AAChC,iBAAwB;AA+CpB;AAJG,SAAS,SAAS,OAAsB;AAC7C,QAAM,EAAE,SAAS,SAAS,QAAI,8BAAgB;AAE9C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACC,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,MACvC,eAAW;AAAA,QACT,MAAM;AAAA,YACN,gBAAI;AAAA,UACF,QAAQ;AAAA,UACR,IAAI;AAAA,UACJ,QAAQ;AAAA,QACV,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/legacy/components/FieldsetLabel.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/FieldsetLabel.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { label, type LabelVariantProps } from '@cerberus/styled-system/recipes'\nimport type { LabelProps } from './deprecated/Label'\n\n/**\n * This module contains the FieldsetLabel component.\n * @module FieldsetLabel\n */\n\nexport type FieldsetLabelProps = LabelProps &\n  LabelVariantProps & {\n    htmlFor?: string\n  }\n\n/**\n * Used for labeling inputs that are children of a Fieldset group.\n * @memberof Fieldset\n * @see https://cerberus.digitalu.design/react/fieldset\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @example\n * ```tsx\n * import { Fieldset, Legend, Field, Radio, Label } from '@cerberus/react'\n * import { Hstack } from '@cerberus/styled-system/jsx'\n *\n * function SomeForm() {\n *   return (\n *    <form>\n *     <Fieldset>\n *      <Legend>Do you like cats?</Legend>\n *      <Hstack>\n *        <Field>\n *          <Radio id=\"yes\" name=\"cats\" value=\"yes\" />\n *          <FieldsetLabel htmlFor=\"yes\">Yes</FieldsetLabel>\n *        </Field>\n *      </Hstack>\n *      <Hstack>\n *        <Field>\n *         <Radio id=\"no\" name=\"cats\" value=\"no\" />\n *         <FieldsetLabel htmlFor=\"no\">No</FieldsetLabel>\n *        </Field>\n *      </Hstack>\n *     </Fieldset>\n *    </form>\n *   )\n * }\n * ```\n */\nexport function FieldsetLabel(props: FieldsetLabelProps) {\n  const { size, usage, ...nativeProps } = props\n  return (\n    <label\n      {...nativeProps}\n      className={cx(\n        nativeProps.className,\n        label({\n          size,\n          usage,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAmB;AACnB,qBAA8C;AAiD1C;AAHG,SAAS,cAAc,OAA2B;AACvD,QAAM,EAAE,MAAM,OAAO,GAAG,YAAY,IAAI;AACxC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,sBAAM;AAAA,UACJ;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/legacy/components/Radio.cjs

@@ -1,64 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/components/Radio.tsx
-var Radio_exports = {};
-__export(Radio_exports, {
-  Radio: () => Radio
-});
-module.exports = __toCommonJS(Radio_exports);
-var import_field = require("@ark-ui/react/field");
-var import_css = require("@cerberus/styled-system/css");
-var import_patterns = require("@cerberus/styled-system/patterns");
-var import_recipes = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime = require("react/jsx-runtime");
-function Radio(props) {
-  const { children, size, ...nativeProps } = props;
-  const styles = (0, import_recipes.radio)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "div",
-    {
-      className: (0, import_css.cx)(
-        "group",
-        (0, import_patterns.hstack)({
-          gap: "sm"
-        }),
-        styles.root
-      ),
-      tabIndex: 0,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_field.Field.Input,
-          {
-            ...nativeProps,
-            className: (0, import_css.cx)(nativeProps.className, styles.input),
-            tabIndex: -1,
-            type: "radio"
-          }
-        ),
-        children
-      ]
-    }
-  );
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Radio
-});
-//# sourceMappingURL=Radio.cjs.map

package/build/legacy/components/Radio.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/Radio.tsx"],"sourcesContent":["import { Field } from '@ark-ui/react/field'\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { radio } from '@cerberus/styled-system/recipes'\nimport type { RecipeVariantProps } from '@cerberus/styled-system/types'\nimport type { InputHTMLAttributes, PropsWithChildren } from 'react'\n\n/**\n * This module contains the Radio component.\n * @module\n */\n\nexport type RadioRecipe = RecipeVariantProps<typeof radio>\nexport interface RadioBaseProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {\n  /**\n   * A unique identifier for the radio button. Required for accessibility.\n   */\n  id: string\n}\nexport type RadioProps = RadioBaseProps & RadioRecipe\n\n/**\n * The Radio component is used to allow users to select a single option from a list of options.\n * @see https://cerberus.digitalu.design/react/radio\n * @memberof module:Field\n * @example\n * ```tsx\n * <Field>\n *  <fieldset name=\"fruit\">\n *    <Radio id=\"radio-1\" name=\"fruit\" value=\"1\">\n *     Option 1\n *    </Radio>\n *    <Radio id=\"radio-2\" name=\"fruit\" value=\"2\">\n *     Option 2\n *    </Radio>\n *    <Radio id=\"radio-3\" name=\"fruit\" value=\"3\">\n *     Option 3\n *    </Radio>\n *   </fieldset>\n * </Field>\n * ```\n */\nexport function Radio(props: PropsWithChildren<RadioProps>) {\n  const { children, size, ...nativeProps } = props\n  const styles = radio({ size })\n\n  return (\n    <div\n      className={cx(\n        'group',\n        hstack({\n          gap: 'sm',\n        }),\n        styles.root,\n      )}\n      tabIndex={0}\n    >\n      <Field.Input\n        {...nativeProps}\n        className={cx(nativeProps.className, styles.input)}\n        tabIndex={-1}\n        type=\"radio\"\n      />\n      {children}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsB;AACtB,iBAAmB;AACnB,sBAAuB;AACvB,qBAAsB;AA6ClB;AALG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,UAAU,MAAM,GAAG,YAAY,IAAI;AAC3C,QAAM,aAAS,sBAAM,EAAE,KAAK,CAAC;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,YACA,wBAAO;AAAA,UACL,KAAK;AAAA,QACP,CAAC;AAAA,QACD,OAAO;AAAA,MACT;AAAA,MACA,UAAU;AAAA,MAEV;AAAA;AAAA,UAAC,mBAAM;AAAA,UAAN;AAAA,YACE,GAAG;AAAA,YACJ,eAAW,eAAG,YAAY,WAAW,OAAO,KAAK;AAAA,YACjD,UAAU;AAAA,YACV,MAAK;AAAA;AAAA,QACP;AAAA,QACC;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/build/modern/chunk-6EUC3SUI.js

@@ -1,28 +0,0 @@
-// src/components/Fieldset.tsx
-import { useFieldContext } from "@ark-ui/react/field";
-import { css, cx } from "@cerberus/styled-system/css";
-import { jsx } from "react/jsx-runtime";
-function Fieldset(props) {
-  const { invalid, disabled } = useFieldContext();
-  return /* @__PURE__ */ jsx(
-    "fieldset",
-    {
-      ...props,
-      disabled,
-      ...invalid && { "aria-invalid": true },
-      className: cx(
-        props.className,
-        css({
-          border: "none",
-          pt: 2,
-          margin: 0
-        })
-      )
-    }
-  );
-}
-
-export {
-  Fieldset
-};
-//# sourceMappingURL=chunk-6EUC3SUI.js.map

package/build/modern/chunk-6EUC3SUI.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Fieldset.tsx"],"sourcesContent":["'use client'\n\nimport { useFieldContext } from '@ark-ui/react/field'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport type { FieldsetHTMLAttributes } from 'react'\n\n/**\n * This module contains the Fieldset component.\n * @module Fieldset\n */\n\nexport type FieldsetProps = FieldsetHTMLAttributes<HTMLFieldSetElement>\n\n/**\n * A component to group related elements in a form for accessibility.\n * @memberof Field\n * @see https://cerberus.digitalu.com/react/fieldset\n * @description [A11y Form Checklist](https://www.a11yproject.com/checklist/#forms)\n * @description [MDN Web Docs: Fieldset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset)\n * @example\n * ```tsx\n * import { Fieldset, Legend, Field, Radio, Label } from '@cerberus/react'\n * import { Hstack } from '@cerberus/styled-system/jsx'\n *\n * function SomeForm() {\n *   return (\n *    <form>\n *     <Fieldset>\n *      <Legend>Do you like cats?</Legend>\n *      <Hstack>\n *        <Field>\n *          <Radio id=\"yes\" name=\"cats\" value=\"yes\" />\n *          <Label htmlFor=\"yes\">Yes</Label>\n *        </Field>\n *      </Hstack>\n *      <Hstack>\n *        <Field>\n *         <Radio id=\"no\" name=\"cats\" value=\"no\" />\n *         <Label htmlFor=\"no\">No</Label>\n *        </Field>\n *      </Hstack>\n *     </Fieldset>\n *    </form>\n *   )\n * }\n */\nexport function Fieldset(props: FieldsetProps) {\n  const { invalid, disabled } = useFieldContext()\n\n  return (\n    <fieldset\n      {...props}\n      disabled={disabled}\n      {...(invalid && { 'aria-invalid': true })}\n      className={cx(\n        props.className,\n        css({\n          border: 'none',\n          pt: 2,\n          margin: 0,\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";AAEA,SAAS,uBAAuB;AAChC,SAAS,KAAK,UAAU;AA+CpB;AAJG,SAAS,SAAS,OAAsB;AAC7C,QAAM,EAAE,SAAS,SAAS,IAAI,gBAAgB;AAE9C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACC,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,MACvC,WAAW;AAAA,QACT,MAAM;AAAA,QACN,IAAI;AAAA,UACF,QAAQ;AAAA,UACR,IAAI;AAAA,UACJ,QAAQ;AAAA,QACV,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}