@cerberus-design/react 0.15.0-next-7669d47 → 0.15.0-next-e5dbdbd

package/build/modern/components/deprecated/NavMenuTrigger.js

@@ -0,0 +1,11 @@
+"use client";
+import {
+  NavMenuTrigger
+} from "../../chunk-BRVZVAPT.js";
+import "../../chunk-6WS765J3.js";
+import "../../chunk-BUVVRQLZ.js";
+import "../../chunk-JF76VIL3.js";
+export {
+  NavMenuTrigger
+};
+//# sourceMappingURL=NavMenuTrigger.js.map

package/build/modern/index.js

@@ -1,3 +1,33 @@
+import {
+  Modal
+} from "./chunk-Q3I4H6EC.js";
+import {
+  ModalDescription
+} from "./chunk-WECB67DC.js";
+import {
+  ModalHeader
+} from "./chunk-AUALRL3U.js";
+import {
+  ModalHeading
+} from "./chunk-SWX5JWZR.js";
+import {
+  NavMenuLink
+} from "./chunk-YOTXFCCC.js";
+import {
+  NavMenuList,
+  getPosition
+} from "./chunk-AIJ75ENY.js";
+import {
+  NavMenuTrigger
+} from "./chunk-BRVZVAPT.js";
+import {
+  CTAModal,
+  useCTAModal
+} from "./chunk-FGCO27TC.js";
+import {
+  NavMenu,
+  useNavMenuContext
+} from "./chunk-6WS765J3.js";
 import {
   NotificationCenter,
   useNotificationCenter
@@ -30,9 +60,15 @@ import {
   useConfirmModal
 } from "./chunk-BHB56M7S.js";
 import {
-  CTAModal,
-  useCTAModal
-} from "./chunk-FGCO27TC.js";
+  Option,
+  OptionGroup,
+  OptionGroupLabel,
+  Select,
+  createSelectCollection
+} from "./chunk-X6WFDKKJ.js";
+import {
+  Text
+} from "./chunk-RU5LOXWI.js";
 import {
   Spinner
 } from "./chunk-7SYJFI5E.js";
@@ -61,28 +97,6 @@ import {
 import {
   Td
 } from "./chunk-3R4TIF2X.js";
-import {
-  Text
-} from "./chunk-RU5LOXWI.js";
-import {
-  NavMenuTrigger
-} from "./chunk-PM7CWT3N.js";
-import {
-  Notification
-} from "./chunk-RDRD6ACD.js";
-import {
-  NotificationDescription
-} from "./chunk-UXY3KCC3.js";
-import {
-  NotificationHeading
-} from "./chunk-SLHYBPJ5.js";
-import {
-  Radio
-} from "./chunk-FTPZHG6J.js";
-import {
-  Option,
-  Select
-} from "./chunk-KKHL3ZO4.js";
 import {
   Legend
 } from "./chunk-ILQW5VZT.js";
@@ -96,28 +110,17 @@ import {
   MenuTrigger
 } from "./chunk-RUR5MV54.js";
 import {
-  Modal
-} from "./chunk-JIRW4XOJ.js";
-import {
-  ModalDescription
-} from "./chunk-ZL6ZITLA.js";
-import {
-  ModalHeader
-} from "./chunk-NUMM4TNC.js";
-import {
-  ModalHeading
-} from "./chunk-7NN3SJ7W.js";
+  Notification
+} from "./chunk-RDRD6ACD.js";
 import {
-  NavMenuLink
-} from "./chunk-WPVDQRRF.js";
+  NotificationDescription
+} from "./chunk-UXY3KCC3.js";
 import {
-  NavMenuList,
-  getPosition
-} from "./chunk-UZVQ4INR.js";
+  NotificationHeading
+} from "./chunk-SLHYBPJ5.js";
 import {
-  NavMenu,
-  useNavMenuContext
-} from "./chunk-6WS765J3.js";
+  Radio
+} from "./chunk-FTPZHG6J.js";
 import {
   Fieldset
 } from "./chunk-3ZDFQO25.js";
@@ -207,7 +210,7 @@ import {
 } from "./chunk-CJFW36DZ.js";
 import {
   AccordionItemGroup
-} from "./chunk-BAWZBF5Q.js";
+} from "./chunk-WN7TJX6J.js";
 import {
   AccordionItemIndicator
 } from "./chunk-XZGXRRSQ.js";
@@ -216,7 +219,7 @@ import {
   AccordionItem,
   AccordionItemContent,
   AccordionItemTrigger
-} from "./chunk-IGHMP4WA.js";
+} from "./chunk-AZRFYQO7.js";
 import {
   Admonition,
   AdmonitionDescription,
@@ -363,6 +366,8 @@ export {
   NotificationDescription,
   NotificationHeading,
   Option,
+  OptionGroup,
+  OptionGroupLabel,
   Portal,
   ProgressBar,
   PromptModal,
@@ -392,6 +397,7 @@ export {
   Tooltip,
   Tr,
   createNavTriggerProps,
+  createSelectCollection,
   defineIcons,
   formatISOToMilitary,
   formatMilitaryDate,

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// deprecated\n\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'\n\n// components\n\nexport * from './components/Accordion'\nexport * from './components/Accordion.client'\nexport * from './components/AccordionItemGroup'\nexport * from './components/Admonition'\nexport * from './components/Avatar'\nexport * from './components/Button'\nexport * from './components/Checkbox'\nexport * from './components/CircularProgress'\nexport * from './components/DatePicker.client'\nexport * from './components/DatePicker.server'\nexport * from './components/Dialog'\nexport * from './components/Dialog.client'\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/Menu'\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/Tabs.client'\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/Text'\nexport * from './components/Textarea'\nexport * from './components/Toggle'\nexport * from './components/Tooltip'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/cerberus'\nexport * from './context/confirm-modal'\nexport * from './context/cta-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/useDate'\nexport * from './hooks/useModal'\nexport * from './hooks/useTheme'\nexport * from './hooks/useToggle'\nexport * from './hooks/useRootColors'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/index'\nexport * from './utils/index'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmGA,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// deprecated\n\nexport * from './components/deprecated/Modal'\nexport * from './components/deprecated/ModalHeader'\nexport * from './components/deprecated/ModalHeading'\nexport * from './components/deprecated/ModalDescription'\nexport * from './components/deprecated/NavMenuTrigger'\nexport * from './components/deprecated/NavMenuList'\nexport * from './components/deprecated/NavMenuLink'\n\n// components\n\nexport * from './components/Accordion'\nexport * from './components/Accordion.client'\nexport * from './components/AccordionItemGroup'\nexport * from './components/Admonition'\nexport * from './components/Avatar'\nexport * from './components/Button'\nexport * from './components/Checkbox'\nexport * from './components/CircularProgress'\nexport * from './components/DatePicker.client'\nexport * from './components/DatePicker.server'\nexport * from './components/Dialog'\nexport * from './components/Dialog.client'\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/Menu'\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/Spinner'\nexport * from './components/Tabs.client'\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/Text'\nexport * from './components/Textarea'\nexport * from './components/Toggle'\nexport * from './components/Tooltip'\nexport * from './components/Select'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/cerberus'\nexport * from './context/confirm-modal'\nexport * from './context/cta-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/useDate'\nexport * from './hooks/useModal'\nexport * from './hooks/useTheme'\nexport * from './hooks/useToggle'\nexport * from './hooks/useRootColors'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/index'\nexport * from './utils/index'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmGA,cAAc;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.15.0-next-7669d47",
+  "version": "0.15.0-next-e5dbdbd",
   "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/styled-system": "npm:@cerberus-design/styled-system@0.15.0-next-7669d47"
+    "@cerberus/styled-system": "npm:@cerberus-design/styled-system@0.15.0-next-e5dbdbd"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Accordion.tsx

@@ -22,6 +22,7 @@ export type AccordionProps = ArkAccordion.RootProps & AccordionVariantProps
 export function Accordion(props: AccordionProps) {
   const { size, className, ...rootProps } = props
   const styles = accordion({ size })
+
   return (
     <ArkAccordion.Root
       collapsible

package/src/components/Select.tsx

@@ -1,108 +1,225 @@
 'use client'
 
-import { cx } from '@cerberus/styled-system/css'
-import { hstack } from '@cerberus/styled-system/patterns'
+import {
+  Select as ArkSelect,
+  createListCollection,
+  type SelectRootProps,
+  type SelectItemProps,
+  type SelectItemGroupProps,
+  type SelectItemGroupLabelProps,
+  type ListCollection,
+  type SelectValueChangeDetails,
+} from '@ark-ui/react/select'
 import {
   select,
   type SelectVariantProps,
 } from '@cerberus/styled-system/recipes'
-import type { OptionHTMLAttributes, SelectHTMLAttributes } from 'react'
-import { useFieldContext } from '../context/field'
+import { cx } from '@cerberus/styled-system/css'
+import { HStack } from '@cerberus/styled-system/jsx'
 import { useCerberusContext } from '../context/cerberus'
+import { Portal } from './Portal'
 import { Show } from './Show'
+import { Text } from './Text'
 
 /**
- * This module contains the select components.
- * @module
+ * This module contains the Select components.
+ * @module 'react/select'
  */
 
-export type SelectProps = Omit<
-  SelectHTMLAttributes<HTMLSelectElement>,
-  'size'
-> &
-  SelectVariantProps & {
-    /**
-     * The unique id of the select element. Required for accessibility.
-     */
-    id: string
-    /**
-     * The id of the FieldMessage that describes the select element.
-     */
-    describedBy?: string
-  }
+export interface SelectCollectionItem {
+  /**
+   * What is displayed in the dropdown list.
+   */
+  label: string
+  /**
+   * The value of the selected item used in the form.
+   */
+  value: string
+  /**
+   * If the item is disabled.
+   */
+  disabled?: boolean
+}
+
+export interface SelectCollection {
+  /**
+   * The items to be displayed in the dropdown list.
+   */
+  items: SelectCollectionItem[]
+}
+
+export interface BaseSelectProps {
+  /**
+   * The placeholder text when no option is selected.
+   */
+  placeholder?: string
+  /**
+   * The label of the select.
+   */
+  label: string
+}
+
+export type SelectProps = SelectRootProps<SelectCollectionItem> &
+  BaseSelectProps &
+  SelectVariantProps
 
 /**
- * Used to allow users to select a single option from a list of options.
- * @see https://cerberus.digitalu.design/react/select
- * @memberof module:Field
+ * The Select component is a dropdown list that allows users to select an
+ * option from a list.
+ * @definition [Select docs](https://cerberus.digitalu.design/react/select)
+ * @definition [ARK docs](https://ark-ui.com/react/docs/components/select)
  * @example
  * ```tsx
- * <Field>
- *   <Select describedby="help:fruit" id="fruit">
- *    <Option value="">Choose option</Option>
- *    <Option value="one">Option 1</Option>
- *    <Option value="two">Option 2</Option>
- *    <Option value="three">Option 3</Option>
- *   </Select>
- * </Field>
- * ```
+ * import { Select, Option, createListCollection } from '@cerberus-design/react'
+ *
+ * export function SelectBasicPreview() {
+ *  const collection = createListCollection({
+ *   items: [
+ *    { label: 'Hades', value: 'hades' },
+ *    { label: 'Persephone', value: 'persephone' },
+ *    { label: 'Zeus', value: 'zeus', disabled: true },
+ *   ]
+ *  })
+ *
+ *  return (
+ *   <Select
+ *    collection={collection}
+ *    label="Select Relative"
+ *    placeholder="Choose option"
+ *   >
+ *   {collection.items.map((item) => (
+ *    <Option key={item.value} item={item} />
+ *   ))}
+ *  </Select>
+ *  )
+ * }
  */
 export function Select(props: SelectProps) {
-  const { describedBy, size, ...nativeProps } = props
-  const { invalid, ...fieldStates } = useFieldContext()
-
+  const { collection, label, placeholder, size, ...rootProps } = props
   const { icons } = useCerberusContext()
-  const { invalid: InvalidIcon, selectArrow: SelectArrow } = icons
+  const { selectArrow: SelectArrow, invalid: InvalidIcon } = icons
 
-  const styles = select({
-    size,
-  })
+  const styles = select({ size })
 
   return (
-    <div className={styles.root}>
-      <select
-        {...nativeProps}
-        {...fieldStates}
-        {...(describedBy && { 'aria-describedby': describedBy })}
-        {...(invalid && { 'aria-invalid': true })}
-        className={styles.input}
-      />
-      <span
-        className={cx(
-          styles.iconStack,
-          hstack({
-            gap: '2',
-          }),
-        )}
-      >
-        <Show when={invalid}>
-          <span
-            {...(invalid && { 'data-invalid': true })}
-            className={styles.stateIcon}
-          >
-            <InvalidIcon />
-          </span>
+    <ArkSelect.Root
+      className={styles.root}
+      collection={collection}
+      {...rootProps}
+    >
+      <ArkSelect.Label className={styles.label}>
+        {label}
+        <Show when={props.required}>
+          <Text as="span" color="page.text.100">
+            (required)
+          </Text>
         </Show>
-        <span className={styles.arrowIcon}>
-          <SelectArrow />
-        </span>
-      </span>
-    </div>
+      </ArkSelect.Label>
+
+      <ArkSelect.Control className={styles.control}>
+        <ArkSelect.Trigger className={styles.trigger}>
+          <ArkSelect.ValueText placeholder={placeholder} />
+
+          <HStack>
+            <Show when={props.invalid}>
+              <InvalidIcon data-part="invalid-icon" />
+            </Show>
+            <ArkSelect.Indicator className={styles.indicator}>
+              <SelectArrow />
+            </ArkSelect.Indicator>
+          </HStack>
+        </ArkSelect.Trigger>
+      </ArkSelect.Control>
+
+      <Portal>
+        <ArkSelect.Positioner className={styles.positioner}>
+          <ArkSelect.Content className={styles.content}>
+            {props.children}
+          </ArkSelect.Content>
+        </ArkSelect.Positioner>
+      </Portal>
+
+      <ArkSelect.HiddenSelect />
+    </ArkSelect.Root>
   )
 }
 
-// We only export this component for consistency with the other components
+export interface OptionProps extends SelectItemProps {
+  /**
+   * The CollectionListItem to be displayed in the dropdown list.
+   */
+  item: SelectCollectionItem
+}
+
+export function Option(props: OptionProps) {
+  const { item, ...itemProps } = props
+
+  const { icons } = useCerberusContext()
+  const { selectChecked: CheckedIcon } = icons
+
+  const styles = select()
 
-export type OptionProps = OptionHTMLAttributes<HTMLOptionElement>
+  return (
+    <ArkSelect.Item {...itemProps} item={item} className={styles.item}>
+      <ArkSelect.ItemText className={styles.itemText}>
+        {item?.label}
+      </ArkSelect.ItemText>
+      <ArkSelect.ItemIndicator className={styles.itemIndicator}>
+        <CheckedIcon />
+      </ArkSelect.ItemIndicator>
+    </ArkSelect.Item>
+  )
+}
 
 /**
- * Option component
- * props: OptionHTMLAttributes<HTMLOptionElement>
+ * The OptionGroup component is a group of options in the dropdown list.
+ * @definition [Select docs](https://cerberus.digitalu.design/react/select)
+ * @definition [ARK docs](https://ark-ui.com/react/docs/components/select)
  * @example
  * ```tsx
- * <Option value="one">Option 1</Option>
+ * <OptionGroup>
+ *  <OptionGroupLabel>Greek gods</OptionGroupLabel>
+ *  ...
+ * </OptionGroup>
  * ```
  */
-export function Option(props: OptionProps) {
-  return <option {...props} />
+export function OptionGroup(props: SelectItemGroupProps) {
+  return <ArkSelect.ItemGroup {...props} />
 }
+
+/**
+ * The OptionGroupLabel component is the label of the OptionGroup.
+ * @definition [Select docs](https://cerberus.digitalu.design/react/select)
+ * @definition [ARK docs](https://ark-ui.com/react/docs/components/select)
+ * @example
+ * ```tsx
+ * <OptionGroupLabel>Greek gods</OptionGroupLabel>
+ * ```
+ */
+export function OptionGroupLabel(props: SelectItemGroupLabelProps) {
+  const styles = select()
+  return (
+    <ArkSelect.ItemGroupLabel
+      {...props}
+      className={cx(props.className, styles.itemGroupLabel)}
+    />
+  )
+}
+
+/**
+ * A helper function to create a SelectCollection object.
+ * @param collection - An array of SelectCollectionItem objects that matches
+ * the following shape:
+ * ```ts
+ * [{ label: 'Hades', value: 'hades', disabled?: true }]
+ * ```
+ */
+export function createSelectCollection(
+  collection: SelectCollectionItem[],
+): ListCollection<SelectCollectionItem> {
+  return createListCollection({
+    items: collection,
+  })
+}
+
+export type { SelectValueChangeDetails, ListCollection }

package/src/components/{NavMenuLink.tsx → deprecated/NavMenuLink.tsx}

@@ -1,6 +1,6 @@
 import type { AnchorHTMLAttributes, ElementType } from 'react'
 import { css, cx } from '@cerberus/styled-system/css'
-import { Show } from './Show'
+import { Show } from '../Show'
 
 /**
  * This module contains the NavMenuLink component.

package/src/components/{NavMenuList.tsx → deprecated/NavMenuList.tsx}

@@ -3,9 +3,9 @@
 import { useMemo, type HTMLAttributes } from 'react'
 import { cx } from '@cerberus/styled-system/css'
 import { vstack } from '@cerberus/styled-system/patterns'
-import { useNavMenuContext } from '../context/navMenu'
-import type { Positions } from '../types'
-import { Show } from './Show'
+import { useNavMenuContext } from '../../context/navMenu'
+import type { Positions } from '../../types'
+import { Show } from '../Show'
 
 /**
  * This module contains the NavMenuList component.

package/src/components/{NavMenuTrigger.tsx → deprecated/NavMenuTrigger.tsx}

@@ -11,10 +11,10 @@ import { button } from '@cerberus/styled-system/recipes'
 import {
   createNavTriggerProps,
   type NavTriggerAriaValues,
-} from '../aria-helpers/nav-menu.aria'
-import { useNavMenuContext } from '../context/navMenu'
-import type { ButtonProps } from './Button'
-import { Show } from './Show'
+} from '../../aria-helpers/nav-menu.aria'
+import { useNavMenuContext } from '../../context/navMenu'
+import type { ButtonProps } from '../Button'
+import { Show } from '../Show'
 
 /**
  * This module contains the NavMenuTrigger component.

package/src/config/types.ts

@@ -34,6 +34,7 @@ export interface DefinedIcons<T extends IconType = IconType> {
   invalidAlt: T
   redo: T
   selectArrow: T
+  selectChecked: T
   toggleChecked: T
 }
 

package/src/index.ts

@@ -5,13 +5,13 @@
 
 // deprecated
 
-export * from './components/Modal'
-export * from './components/ModalHeader'
-export * from './components/ModalHeading'
-export * from './components/ModalDescription'
-export * from './components/NavMenuTrigger'
-export * from './components/NavMenuList'
-export * from './components/NavMenuLink'
+export * from './components/deprecated/Modal'
+export * from './components/deprecated/ModalHeader'
+export * from './components/deprecated/ModalHeading'
+export * from './components/deprecated/ModalDescription'
+export * from './components/deprecated/NavMenuTrigger'
+export * from './components/deprecated/NavMenuList'
+export * from './components/deprecated/NavMenuLink'
 
 // components
 
@@ -45,7 +45,6 @@ export * from './components/NotificationDescription'
 export * from './components/Portal'
 export * from './components/ProgressBar'
 export * from './components/Radio'
-export * from './components/Select'
 export * from './components/Spinner'
 export * from './components/Tabs.client'
 export * from './components/Table'
@@ -58,6 +57,7 @@ export * from './components/Text'
 export * from './components/Textarea'
 export * from './components/Toggle'
 export * from './components/Tooltip'
+export * from './components/Select'
 export * from './components/Show'
 
 // context

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/Modal.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport { forwardRef, type ForwardedRef, type HTMLAttributes } from 'react'\n\n/**\n * This module contains the Modal root component for a customizable modal.\n * @module\n */\n\n// Modal\n\nexport type ModalProps = HTMLAttributes<HTMLDialogElement>\n\nfunction ModalEl(props: ModalProps, ref: ForwardedRef<HTMLDialogElement>) {\n  return (\n    <dialog\n      {...props}\n      className={cx(props.className, modal().dialog)}\n      ref={ref}\n    />\n  )\n}\n\n/**\n * @deprecated use `Dialog` instead\n */\nexport const Modal = forwardRef(ModalEl)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAmB;AACnB,qBAAsB;AACtB,mBAAmE;AAa/D;AAFJ,SAAS,QAAQ,OAAmB,KAAsC;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,MAAM,eAAW,sBAAM,EAAE,MAAM;AAAA,MAC7C;AAAA;AAAA,EACF;AAEJ;AAKO,IAAM,YAAQ,yBAAW,OAAO;","names":[]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/ModalDescription.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalDescription component for a customizable modal.\n * @module\n */\n\nexport type ModalDescriptionProps = HTMLAttributes<HTMLParagraphElement>\n\n/**\n * @deprecated use `DialogDescription` instead\n */\nexport function ModalDescription(props: ModalDescriptionProps) {\n  return <p {...props} className={cx(props.className, modal().description)} />\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAmB;AACnB,qBAAsB;AAcb;AADF,SAAS,iBAAiB,OAA8B;AAC7D,SAAO,4CAAC,OAAG,GAAG,OAAO,eAAW,eAAG,MAAM,eAAW,sBAAM,EAAE,WAAW,GAAG;AAC5E;","names":[]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/ModalHeader.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalHeader component for a customizable modal.\n * @module\n */\n\nexport type ModalHeaderProps = HTMLAttributes<HTMLDivElement>\n\n/**\n * @deprecated there is no replacement for this component\n */\nexport function ModalHeader(props: ModalHeaderProps) {\n  return (\n    <div\n      {...props}\n      className={cx(\n        props.className,\n        vstack({\n          alignItems: 'flex-start',\n          gap: 'md',\n          position: 'relative',\n        }),\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAmB;AACnB,sBAAuB;AAenB;AAFG,SAAS,YAAY,OAAyB;AACnD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,QACT,MAAM;AAAA,YACN,wBAAO;AAAA,UACL,YAAY;AAAA,UACZ,KAAK;AAAA,UACL,UAAU;AAAA,QACZ,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/ModalHeading.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalHeading component for a customizable modal.\n * @module\n */\n\nexport type ModalHeadingProps = HTMLAttributes<HTMLParagraphElement>\n\n/**\n * @deprecated use `DialogHeading` instead\n */\nexport function ModalHeading(props: ModalHeadingProps) {\n  return <p {...props} className={cx(props.className, modal().heading)} />\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAmB;AACnB,qBAAsB;AAcb;AADF,SAAS,aAAa,OAA0B;AACrD,SAAO,4CAAC,OAAG,GAAG,OAAO,eAAW,eAAG,MAAM,eAAW,sBAAM,EAAE,OAAO,GAAG;AACxE;","names":[]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/NavMenuLink.tsx","../../../src/components/Show.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ElementType } from 'react'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { Show } from './Show'\n\n/**\n * This module contains the NavMenuLink component.\n * @module\n */\n\nexport interface NavMenuLinkProps\n  extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * The element type to render as. Recommended to use for Next apps with the\n   * `Link` component.\n   */\n  as?: ElementType\n}\n\n/**\n * @deprecated use the {@link Menu} family instead\n */\nexport function NavMenuLink(props: NavMenuLinkProps): JSX.Element {\n  const { as, ...nativeProps } = props\n  const hasAs = Boolean(as)\n  const AsSub: ElementType = as!\n\n  return (\n    <li\n      className={css({\n        w: 'full',\n      })}\n    >\n      <Show\n        when={hasAs}\n        fallback={\n          <a\n            {...nativeProps}\n            className={cx(\n              nativeProps.className,\n              css({\n                color: 'action.navigation.initial',\n                textStyle: 'link',\n                _hover: {\n                  color: 'action.navigation.hover',\n                },\n              }),\n            )}\n          />\n        }\n      >\n        {hasAs && <AsSub {...nativeProps} />}\n      </Show>\n    </li>\n  )\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,iBAAwB;;;ACCxB,mBAAgE;AA4BzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,sBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,sBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;ADHU;AAdH,SAAS,YAAY,OAAsC;AAChE,QAAM,EAAE,IAAI,GAAG,YAAY,IAAI;AAC/B,QAAM,QAAQ,QAAQ,EAAE;AACxB,QAAM,QAAqB;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,gBAAI;AAAA,QACb,GAAG;AAAA,MACL,CAAC;AAAA,MAED;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,UACE;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,eAAW;AAAA,gBACT,YAAY;AAAA,oBACZ,gBAAI;AAAA,kBACF,OAAO;AAAA,kBACP,WAAW;AAAA,kBACX,QAAQ;AAAA,oBACN,OAAO;AAAA,kBACT;AAAA,gBACF,CAAC;AAAA,cACH;AAAA;AAAA,UACF;AAAA,UAGD,mBAAS,4CAAC,SAAO,GAAG,aAAa;AAAA;AAAA,MACpC;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/NavMenuList.tsx","../../../src/context/navMenu.tsx","../../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type HTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport { useNavMenuContext } from '../context/navMenu'\nimport type { Positions } from '../types'\nimport { Show } from './Show'\n\n/**\n * This module contains the NavMenuList component.\n * @module\n */\n\ninterface GetPositionResult {\n  /**\n   * The left position of the element.\n   */\n  left: string\n  /**\n   * The right position of the element.\n   */\n  right: string\n  /**\n   * The top position of the element.\n   */\n  top: string\n  /**\n   * The bottom position of the element.\n   */\n  bottom: string\n}\n\n/**\n * @deprecated use the {@link Menu} family instead\n */\nexport function getPosition(position: Positions): GetPositionResult {\n  const defaultPositions = {\n    left: 'auto',\n    right: 'auto',\n    top: 'auto',\n    bottom: 'auto',\n  }\n  switch (position) {\n    case 'right':\n      return { ...defaultPositions, top: '0%', left: '105%' }\n    case 'left':\n      return { ...defaultPositions, top: '0%', right: '105%' }\n    case 'bottom':\n      return { ...defaultPositions, top: '110%' }\n    case 'top':\n      return { ...defaultPositions, bottom: '110%' }\n    default:\n      return defaultPositions\n  }\n}\n\nconst navListStyles = vstack({\n  alignItems: 'flex-start',\n  bgColor: 'page.surface.100',\n  boxShadow: 'lg',\n  gap: '2',\n  opacity: '0',\n  p: '4',\n  position: 'absolute',\n  rounded: 'md',\n  zIndex: 'dropdown',\n  _motionSafe: {\n    animationName: 'zoomIn',\n    animationDelay: '100ms',\n    animationDuration: '150ms',\n    animationFillMode: 'both',\n    animationTimingFunction: 'ease-in-out',\n  },\n  _positionBottom: {\n    transformOrigin: 'top left',\n  },\n  _positionTop: {\n    transformOrigin: 'bottom left',\n  },\n  _positionLeft: {\n    transformOrigin: 'top right',\n  },\n  _positionRight: {\n    transformOrigin: 'top left',\n  },\n})\n\nexport interface NavMenuListProps extends HTMLAttributes<HTMLUListElement> {\n  /**\n   * The unique identifier for the NavMenuList. Required for accessibility.\n   */\n  id: string\n  /**\n   * The position of the NavMenuList.\n   * @type 'top' | 'right' | 'bottom' | 'left'\n   * @default 'bottom'\n   */\n  position?: Positions\n}\n\n/**\n * A component that allows the user to display a menu of navigation links.\n * @definition [Disclosure Nav](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/)\n * @see https://cerberus.digitalu.design/react/nav-menu\n *\n * @example\n * ```tsx\n * <NavMenu>\n *  <NavMenuList id=\"nav-menu-list\" position=\"bottom\">\n *   <NavMenuLink href=\"/home\">Home</NavMenuLink>\n *   <NavMenuLink href=\"/about\">About</NavMenuLink>\n *  </NavMenuList>\n * </NavMenu>\n * ```\n **/\nexport function NavMenuList(props: NavMenuListProps): JSX.Element {\n  const { position, ...nativeProps } = props\n  const { menuRef, expanded } = useNavMenuContext()\n  const locationStyles = useMemo(\n    () => getPosition(position ?? 'bottom'),\n    [position],\n  )\n\n  return (\n    <Show when={expanded}>\n      <ul\n        {...nativeProps}\n        data-position={position ?? 'bottom'}\n        className={cx(nativeProps.className, navListStyles)}\n        ref={menuRef}\n        style={locationStyles}\n      />\n    </Show>\n  )\n}\n","'use client'\n\nimport { css } from '@cerberus/styled-system/css'\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type PropsWithChildren,\n  type RefObject,\n} from 'react'\n\n/**\n * This module provides a context and hook for the nav menu.\n * @module NavMenu\n */\n\nexport type NavTriggerRef = RefObject<HTMLButtonElement>\nexport type NavMenuRef = RefObject<HTMLUListElement>\n\nexport interface NavMenuContextValue {\n  /**\n   * The ref for the trigger button.\n   */\n  triggerRef: NavTriggerRef | null\n  /**\n   * The ref for the menu.\n   */\n  menuRef: NavMenuRef | null\n  /**\n   * Whether the menu is expanded.\n   */\n  expanded: boolean\n  /**\n   * Called when the menu button is clicked.\n   */\n  onToggle: () => void\n}\n\nconst NavMenuContext = createContext<NavMenuContextValue | null>(null)\n\n/**\n * @deprecated use the {@link Menu} family instead\n */\nexport function NavMenu(props: PropsWithChildren): JSX.Element {\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const menuRef = useRef<HTMLUListElement>(null)\n  const [expanded, setExpanded] = useState<boolean>(false)\n\n  const handleToggle = useCallback(() => {\n    setExpanded((prev) => !prev)\n  }, [])\n\n  const value = useMemo(\n    () => ({\n      triggerRef,\n      menuRef,\n      expanded,\n      onToggle: handleToggle,\n    }),\n    [expanded, handleToggle],\n  )\n\n  return (\n    <NavMenuContext.Provider value={value}>\n      <nav\n        className={css({\n          position: 'relative',\n        })}\n      >\n        {props.children}\n      </nav>\n    </NavMenuContext.Provider>\n  )\n}\n\n/**\n * Used to access the nav menu context.\n * @returns The nav menu context.\n */\nexport function useNavMenuContext(): NavMenuContextValue {\n  const context = useContext(NavMenuContext)\n  if (!context) {\n    throw new Error('useNavMenuContext must be used within a NavMenu.')\n  }\n  return context\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n  const { when, children, fallback } = props\n  const condition = useMemo(() => when ?? false, [when])\n\n  return useMemo(() => {\n    if (condition) return children\n    return fallback ?? null\n  }, [condition, children, fallback])\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,IAAAA,gBAA6C;AAC7C,IAAAC,cAAmB;AACnB,sBAAuB;;;ACFvB,iBAAoB;AACpB,mBASO;AAuDD;AA1BN,IAAM,qBAAiB,4BAA0C,IAAI;AAyC9D,SAAS,oBAAyC;AACvD,QAAM,cAAU,yBAAW,cAAc;AACzC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,kDAAkD;AAAA,EACpE;AACA,SAAO;AACT;;;ACtFA,IAAAC,gBAAgE;AA4BzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,uBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,uBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;AFwFM,IAAAC,sBAAA;AA1FC,SAAS,YAAY,UAAwC;AAClE,QAAM,mBAAmB;AAAA,IACvB,MAAM;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,IACL,QAAQ;AAAA,EACV;AACA,UAAQ,UAAU;AAAA,IAChB,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,MAAM,MAAM,OAAO;AAAA,IACxD,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,MAAM,OAAO,OAAO;AAAA,IACzD,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,OAAO;AAAA,IAC5C,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,QAAQ,OAAO;AAAA,IAC/C;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,oBAAgB,wBAAO;AAAA,EAC3B,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,WAAW;AAAA,EACX,KAAK;AAAA,EACL,SAAS;AAAA,EACT,GAAG;AAAA,EACH,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AAAA,IACX,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,mBAAmB;AAAA,IACnB,yBAAyB;AAAA,EAC3B;AAAA,EACA,iBAAiB;AAAA,IACf,iBAAiB;AAAA,EACnB;AAAA,EACA,cAAc;AAAA,IACZ,iBAAiB;AAAA,EACnB;AAAA,EACA,eAAe;AAAA,IACb,iBAAiB;AAAA,EACnB;AAAA,EACA,gBAAgB;AAAA,IACd,iBAAiB;AAAA,EACnB;AACF,CAAC;AA8BM,SAAS,YAAY,OAAsC;AAChE,QAAM,EAAE,UAAU,GAAG,YAAY,IAAI;AACrC,QAAM,EAAE,SAAS,SAAS,IAAI,kBAAkB;AAChD,QAAM,qBAAiB;AAAA,IACrB,MAAM,YAAY,YAAY,QAAQ;AAAA,IACtC,CAAC,QAAQ;AAAA,EACX;AAEA,SACE,6CAAC,QAAK,MAAM,UACV;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe,YAAY;AAAA,MAC3B,eAAW,gBAAG,YAAY,WAAW,aAAa;AAAA,MAClD,KAAK;AAAA,MACL,OAAO;AAAA;AAAA,EACT,GACF;AAEJ;","names":["import_react","import_css","import_react","import_jsx_runtime"]}