@cerberus-design/react 0.8.0-next-7d49bb9 → 0.8.0-next-4fc3696

package/build/modern/index.js

@@ -1,7 +1,14 @@
+import {
+  NotificationCenter,
+  useNotificationCenter
+} from "./chunk-XWE45ZOL.js";
 import {
   PromptModal,
   usePromptModal
-} from "./chunk-LTDNZRUY.js";
+} from "./chunk-QRTCZO2W.js";
+import {
+  Textarea
+} from "./chunk-TCO46FK7.js";
 import {
   Th
 } from "./chunk-3GXISGPS.js";
@@ -10,15 +17,11 @@ import {
 } from "./chunk-N3FUF4TB.js";
 import {
   Toggle
-} from "./chunk-IL5ELPTT.js";
+} from "./chunk-YRGASCC5.js";
 import {
   ConfirmModal,
   useConfirmModal
-} from "./chunk-Y5IY7O23.js";
-import {
-  NotificationCenter,
-  useNotificationCenter
-} from "./chunk-QO2UXGW4.js";
+} from "./chunk-GM3AUVXL.js";
 import {
   Tab
 } from "./chunk-SONHHNYQ.js";
@@ -41,9 +44,6 @@ import {
 import {
   Td
 } from "./chunk-XREC5IJE.js";
-import {
-  Textarea
-} from "./chunk-TCO46FK7.js";
 import {
   NavMenuList,
   getPosition
@@ -57,7 +57,7 @@ import {
 } from "./chunk-KJUCHZHV.js";
 import {
   Notification
-} from "./chunk-4N2L357B.js";
+} from "./chunk-O7SC4O5S.js";
 import {
   NotificationDescription
 } from "./chunk-HW76XVA3.js";
@@ -70,12 +70,16 @@ import {
 import {
   Radio
 } from "./chunk-PH64POOB.js";
+import {
+  Option,
+  Select
+} from "./chunk-MINQJYGV.js";
 import {
   Input
-} from "./chunk-XB4ZRAH4.js";
+} from "./chunk-URKYD3YB.js";
 import {
   Label
-} from "./chunk-JJGZRBIR.js";
+} from "./chunk-RQPDRHRP.js";
 import {
   Modal
 } from "./chunk-2UFNQM55.js";
@@ -126,7 +130,7 @@ import {
 } from "./chunk-ZAU4JVLL.js";
 import {
   FileUploader
-} from "./chunk-IOG6XIR5.js";
+} from "./chunk-NVCUFUD7.js";
 import {
   Show
 } from "./chunk-4O4QFF4S.js";
@@ -151,8 +155,8 @@ import {
 import {
   $cerberusIcons,
   defineIcons
-} from "./chunk-BEYPMC73.js";
-import "./chunk-GVNPFXKL.js";
+} from "./chunk-TSUSAKL3.js";
+import "./chunk-H4F2ONKN.js";
 import {
   useModal
 } from "./chunk-C5HLLGME.js";
@@ -186,9 +190,11 @@ export {
   NotificationCenter,
   NotificationDescription,
   NotificationHeading,
+  Option,
   Portal,
   PromptModal,
   Radio,
+  Select,
   Show,
   THEME_KEY,
   Tab,

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/Button'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\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/ModalIcon'\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/Radio'\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EA,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/Button'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\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/ModalIcon'\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/Radio'\nexport * from './components/Select'\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EA,cAAc;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.8.0-next-7d49bb9",
+  "version": "0.8.0-next-4fc3696",
   "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.8.0-next-7d49bb9"
+    "@cerberus-design/styled-system": "0.8.0-next-4fc3696"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Label.tsx

@@ -38,12 +38,13 @@ export function Label(props: PropsWithChildren<LabelProps>) {
   return (
     <label
       {...nativeProps}
-      data-disabled={disabled}
+      {...(disabled && { 'data-disabled': true })}
       className={cx(
         nativeProps.className,
         label({ size, usage }),
         hstack({
           justify: 'space-between',
+          w: 'full',
         }),
       )}
     >
@@ -51,7 +52,7 @@ export function Label(props: PropsWithChildren<LabelProps>) {
       <Show when={required}>
         <span
           className={css({
-            color: 'page.text.100',
+            color: 'inherit',
             fontSize: 'inherit',
           })}
         >

package/src/components/Select.tsx

@@ -0,0 +1,96 @@
+'use client'
+
+import { cx } from '@cerberus/styled-system/css'
+import { hstack } from '@cerberus/styled-system/patterns'
+import {
+  select,
+  type SelectVariantProps,
+} from '@cerberus/styled-system/recipes'
+import type { OptionHTMLAttributes, SelectHTMLAttributes } from 'react'
+import { $cerberusIcons } from '../config/defineIcons'
+import { useFieldContext } from '../context/field'
+import { Show } from './Show'
+
+/**
+ * This module contains the select components.
+ * @module
+ */
+
+export type SelectProps = Omit<
+  SelectHTMLAttributes<HTMLSelectElement>,
+  'size'
+> &
+  SelectVariantProps & {
+    id: string
+    describedBy?: string
+  }
+
+/**
+ * Select component
+ * props: SelectHTMLAttributes<HTMLSelectElement> & SelectVariantProps & { describedBy?: string }
+ * @example
+ * ```tsx
+ * <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>
+ * ```
+ */
+export function Select(props: SelectProps) {
+  const { describedBy, size, ...nativeProps } = props
+  const { invalid, ...fieldStates } = useFieldContext()
+  const { invalid: InvalidIcon, selectArrow: SelectArrow } = $cerberusIcons
+  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>
+        </Show>
+        <span className={styles.arrowIcon}>
+          <SelectArrow />
+        </span>
+      </span>
+    </div>
+  )
+}
+
+// We only export this component for consistency with the other components
+
+export type OptionProps = OptionHTMLAttributes<HTMLOptionElement>
+
+/**
+ * Option component
+ * props: OptionHTMLAttributes<HTMLOptionElement>
+ * @example
+ * ```tsx
+ * <Option value="one">Option 1</Option>
+ * ```
+ */
+export function Option(props: OptionProps) {
+  return <option {...props} />
+}

package/src/config/cerbIcons.ts

@@ -1,6 +1,7 @@
 import {
   Checkmark,
   CheckmarkFilled,
+  ChevronDown,
   CloudUpload,
   ErrorFilled,
   Information,
@@ -21,6 +22,7 @@ export interface DefinedIcons {
   warningNotification?: IconType
   dangerNotification?: IconType
   invalid: IconType
+  selectArrow?: IconType
   toggleChecked?: IconType
 }
 
@@ -33,5 +35,6 @@ export const defaultIcons: DefinedIcons = {
   warningNotification: WarningFilled,
   dangerNotification: ErrorFilled,
   invalid: WarningFilled,
+  selectArrow: ChevronDown,
   toggleChecked: Checkmark,
 }

package/src/index.ts

@@ -26,6 +26,7 @@ export * from './components/NotificationHeading'
 export * from './components/NotificationDescription'
 export * from './components/Portal'
 export * from './components/Radio'
+export * from './components/Select'
 export * from './components/Tab'
 export * from './components/TabList'
 export * from './components/TabPanel'

package/build/legacy/chunk-GVNPFXKL.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/config/cerbIcons.ts"],"sourcesContent":["import {\n  Checkmark,\n  CheckmarkFilled,\n  CloudUpload,\n  ErrorFilled,\n  Information,\n  InformationFilled,\n  WarningFilled,\n  type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n  confirmModal?: IconType\n  promptModal?: IconType\n  fileUploader?: IconType\n  infoNotification?: IconType\n  successNotification?: IconType\n  warningNotification?: IconType\n  dangerNotification?: IconType\n  invalid: IconType\n  toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  confirmModal: Information,\n  promptModal: Information,\n  fileUploader: CloudUpload,\n  infoNotification: InformationFilled,\n  successNotification: CheckmarkFilled,\n  warningNotification: WarningFilled,\n  dangerNotification: ErrorFilled,\n  invalid: WarningFilled,\n  toggleChecked: Checkmark,\n}\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAiBA,IAAM,eAA6B;AAAA,EACxC,cAAc;AAAA,EACd,aAAa;AAAA,EACb,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,eAAe;AACjB;","names":[]}

package/build/modern/chunk-GVNPFXKL.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/config/cerbIcons.ts"],"sourcesContent":["import {\n  Checkmark,\n  CheckmarkFilled,\n  CloudUpload,\n  ErrorFilled,\n  Information,\n  InformationFilled,\n  WarningFilled,\n  type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n  confirmModal?: IconType\n  promptModal?: IconType\n  fileUploader?: IconType\n  infoNotification?: IconType\n  successNotification?: IconType\n  warningNotification?: IconType\n  dangerNotification?: IconType\n  invalid: IconType\n  toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  confirmModal: Information,\n  promptModal: Information,\n  fileUploader: CloudUpload,\n  infoNotification: InformationFilled,\n  successNotification: CheckmarkFilled,\n  warningNotification: WarningFilled,\n  dangerNotification: ErrorFilled,\n  invalid: WarningFilled,\n  toggleChecked: Checkmark,\n}\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAiBA,IAAM,eAA6B;AAAA,EACxC,cAAc;AAAA,EACd,aAAa;AAAA,EACb,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,eAAe;AACjB;","names":[]}