@cerberus-design/react 0.16.0-next-feeb186 → 0.16.0-next-22894bb

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/deprecated/FieldMessage'\nexport * from './components/deprecated/FieldsetLabel'\nexport * from './components/deprecated/Label'\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'\nexport * from './hooks/useDate'\nexport * from './hooks/useModal'\nexport * from './hooks/useToggle'\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/index'\nexport * from './components/checkbox/index'\nexport * from './components/CircularProgress'\nexport * from './components/cta-dialog/index'\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/FeatureFlag'\nexport * from './components/field/index'\nexport * from './components/fieldset/index'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/for'\nexport * from './components/IconButton'\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/index'\nexport * from './components/select/index'\nexport * from './components/Show'\nexport * from './components/Spinner'\nexport * from './components/switch/index'\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/toggle/index'\nexport * from './components/Tooltip'\n\n// context\n\nexport * from './context/cerberus'\nexport * from './context/confirm-modal'\nexport * from './context/feature-flags'\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/useTheme'\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/FieldMessage'\nexport * from './components/deprecated/FieldsetLabel'\nexport * from './components/deprecated/Label'\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'\nexport * from './hooks/useDate'\nexport * from './hooks/useModal'\nexport * from './hooks/useToggle'\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/index'\nexport * from './components/checkbox/index'\nexport * from './components/CircularProgress'\nexport * from './components/cta-dialog/index'\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/FeatureFlag'\nexport * from './components/field/index'\nexport * from './components/fieldset/index'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/for'\nexport * from './components/IconButton'\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/index'\nexport * from './components/rating/index'\nexport * from './components/select/index'\nexport * from './components/Show'\nexport * from './components/Spinner'\nexport * from './components/switch/index'\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/toggle/index'\nexport * from './components/Tooltip'\n\n// context\n\nexport * from './context/cerberus'\nexport * from './context/confirm-modal'\nexport * from './context/feature-flags'\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/useTheme'\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoGA,cAAc;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.16.0-next-feeb186",
+  "version": "0.16.0-next-22894bb",
   "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.16.0-next-feeb186"
+    "@cerberus/styled-system": "npm:@cerberus-design/styled-system@0.16.0-next-22894bb"
   },
   "publishConfig": {
     "access": "public"

package/src/components/checkbox/checkbox.tsx

@@ -15,8 +15,8 @@ export type CheckboxProps = CheckboxVariantProps & CheckboxRootProps
 /**
  * Checkbox component is an abstraction of the primitives that displays a
  * controlled checkbox with a label.
- * @description [Cerberus Docs] https://cerberus.digitalu.design/react/checkbox
- * @description [Ark Docs] https://ark-ui.com/docs/components/checkbox
+ * @description [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)
+ * @description [Ark Docs](https://ark-ui.com/docs/components/checkbox)
  */
 export function Checkbox(props: CheckboxProps) {
   const { size, children, ...rootProps } = props

package/src/components/rating/index.ts

@@ -0,0 +1,8 @@
+export * from './parts'
+export * from './primitives'
+export * from './rating'
+
+export type {
+  UseRatingGroupContext,
+  UseRatingGroupItemContext,
+} from '@ark-ui/react/rating-group'

package/src/components/rating/parts.tsx

@@ -0,0 +1,65 @@
+import type { ElementType } from 'react'
+import {
+  RatingContext,
+  RatingControl,
+  RatingHiddenInput,
+  RatingItem,
+  RatingItemContext,
+  RatingLabel,
+  RatingRoot,
+} from './primitives'
+
+/**
+ * This module contains the parts of the Rating component.
+ * @module 'rating/parts'
+ */
+
+interface RatingPartsValue {
+  /**
+   * The container of the rating.
+   */
+  Root: ElementType
+  /**
+   * The label of the rating.
+   */
+  Label: ElementType
+  /**
+   * The visual representation of the rating.
+   */
+  Control: ElementType
+  /**
+   * The context of the rating.
+   */
+  Context: ElementType
+  /**
+   * The item to display for the rating.
+   */
+  Item: ElementType
+  /**
+   * The context provider for the rating items.
+   */
+  ItemContext: ElementType
+  /**
+   * The native input of the rating.
+   */
+  HiddenInput: ElementType
+}
+
+/**
+ * An Object containing the parts of the Rating component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the RatingParts object and
+ * the entire family of components vs. only what you use.
+ */
+export const RatingParts: RatingPartsValue = {
+  Root: RatingRoot,
+  Label: RatingLabel,
+  Control: RatingControl,
+  Context: RatingContext,
+  Item: RatingItem,
+  ItemContext: RatingItemContext,
+  HiddenInput: RatingHiddenInput,
+}

package/src/components/rating/primitives.tsx

@@ -0,0 +1,99 @@
+import {
+  RatingGroup,
+  type RatingGroupContextProps,
+  type RatingGroupControlProps,
+  type RatingGroupHiddenInputProps,
+  type RatingGroupItemContextProps,
+  type RatingGroupItemProps,
+  type RatingGroupLabelProps,
+  type RatingGroupRootProps,
+} from '@ark-ui/react/rating-group'
+import { cx } from '@cerberus/styled-system/css'
+import {
+  ratingGroup,
+  type RatingGroupVariantProps,
+} from '@cerberus/styled-system/recipes'
+
+/**
+ * This module contains the primitives of the Rating component.
+ * @module 'rating/primitives'
+ */
+
+/**
+ * The root primitive of the Rating component.
+ */
+export function RatingRoot(
+  props: RatingGroupRootProps & RatingGroupVariantProps,
+) {
+  const { orientation, size, ...rootProps } = props
+  const styles = ratingGroup({ orientation, size })
+  return (
+    <RatingGroup.Root
+      {...rootProps}
+      className={cx(styles.root, rootProps.className)}
+    />
+  )
+}
+
+/**
+ * The label primitive of the Rating component.
+ */
+export function RatingLabel(props: RatingGroupLabelProps) {
+  const styles = ratingGroup()
+  return (
+    <RatingGroup.Label
+      {...props}
+      className={cx(styles.label, props.className)}
+    />
+  )
+}
+
+/**
+ * The control primitive of the Rating component.
+ */
+export function RatingControl(props: RatingGroupControlProps) {
+  const styles = ratingGroup()
+  return (
+    <RatingGroup.Control
+      {...props}
+      className={cx(styles.control, props.className)}
+    />
+  )
+}
+
+/**
+ * The context primitive of the Rating component.
+ */
+export function RatingContext(props: RatingGroupContextProps) {
+  return <RatingGroup.Context {...props} />
+}
+
+/**
+ * The item primitive of the Rating component.
+ */
+export function RatingItem(
+  props: RatingGroupItemProps & RatingGroupVariantProps,
+) {
+  const { palette, ...itemProps } = props
+  const styles = ratingGroup({ palette })
+  return (
+    <RatingGroup.Item
+      {...itemProps}
+      className={cx(styles.item, itemProps.className)}
+    />
+  )
+}
+
+/**
+ * The item context primitive of the Rating component.
+ */
+export function RatingItemContext(props: RatingGroupItemContextProps) {
+  return <RatingGroup.ItemContext {...props} />
+}
+
+/**
+ * The hidden input primitive of the Rating component.
+ */
+export function RatingHiddenInput(props: RatingGroupHiddenInputProps) {
+  return <RatingGroup.HiddenInput {...props} />
+}

package/src/components/rating/rating.tsx

@@ -0,0 +1,78 @@
+import type {
+  RatingGroupRootProps,
+  UseRatingGroupContext,
+  UseRatingGroupItemContext,
+} from '@ark-ui/react/rating-group'
+import type { RatingGroupVariantProps } from '@cerberus/styled-system/recipes'
+import type { ReactNode } from 'react'
+import { splitProps } from '../../utils/index'
+import { Show } from '../Show'
+import { RatingParts } from './parts'
+
+/**
+ * This module contains the abstracted Rating component.
+ * @module 'react/rating'
+ */
+
+export interface RatingProps
+  extends Omit<RatingGroupRootProps, 'children'>,
+    RatingGroupVariantProps {
+  /**
+   * The label of the rating component.
+   */
+  label?: string
+  /**
+   * The children of the rating component.
+   */
+  children: (context: UseRatingGroupItemContext) => ReactNode
+}
+
+/**
+ * The Rating component is an abstraction of the primitives which provides a
+ * visual rating system for a user to select a value.
+ * @description [Cerberus Docs](https://cerberus.digitalu.design/react/rating)
+ * @description [Ark Docs](https://ark-ui.com/react/docs/components/rating-group#api-reference)
+ * @example
+ * ```tsx
+ * <Rating count={5} defaultValue={3} allowHalf>
+ *  {({ half, highlighted }) => {
+ *   if (half) return <StarHalfIcon fill="current" />
+ *   if (highlighted) return <StarIcon fill="current" />
+ *   return <StarIcon />
+ *  }}
+ * </Rating>
+ * ```
+ */
+export function Rating(props: RatingProps) {
+  const [{ label }, styleProps, rootProps] = splitProps(
+    props,
+    ['label'],
+    ['orientation', 'palette', 'size'],
+  )
+
+  return (
+    <RatingParts.Root {...styleProps} {...rootProps}>
+      <Show when={Boolean(label)}>
+        <RatingParts.Label>{label}</RatingParts.Label>
+      </Show>
+
+      <RatingParts.Control>
+        <RatingParts.Context>
+          {(context: UseRatingGroupContext) =>
+            context.items.map((item) => (
+              <RatingParts.Item
+                key={item}
+                index={item}
+                palette={styleProps.palette}
+              >
+                <RatingParts.ItemContext>
+                  {rootProps.children}
+                </RatingParts.ItemContext>
+              </RatingParts.Item>
+            ))
+          }
+        </RatingParts.Context>
+      </RatingParts.Control>
+    </RatingParts.Root>
+  )
+}

package/src/index.ts

@@ -50,6 +50,7 @@ export * from './components/NotificationDescription'
 export * from './components/Portal'
 export * from './components/ProgressBar'
 export * from './components/radio/index'
+export * from './components/rating/index'
 export * from './components/select/index'
 export * from './components/Show'
 export * from './components/Spinner'

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import type { CheckboxRootProps } from '@ark-ui/react'\nimport { type CheckboxVariantProps } from '@cerberus/styled-system/recipes'\nimport { Show } from '../Show'\nimport { Text } from '../Text'\nimport { CheckboxParts } from './parts'\nimport { CheckboxIcon } from './checkbox-icon'\n\n/**\n * This module contains the Checkbox component.\n * @module\n */\n\nexport type CheckboxProps = CheckboxVariantProps & CheckboxRootProps\n\n/**\n * Checkbox component is an abstraction of the primitives that displays a\n * controlled checkbox with a label.\n * @description [Cerberus Docs] https://cerberus.digitalu.design/react/checkbox\n * @description [Ark Docs] https://ark-ui.com/docs/components/checkbox\n */\nexport function Checkbox(props: CheckboxProps) {\n  const { size, children, ...rootProps } = props\n\n  return (\n    <CheckboxParts.Root {...rootProps}>\n      <CheckboxParts.Control size={size}>\n        <CheckboxIcon indeterminate={rootProps.checked === 'indeterminate'} />\n      </CheckboxParts.Control>\n\n      <CheckboxParts.Label size={size}>\n        {children}\n        <Show when={props.required}>\n          <Text as=\"span\" data-part=\"required-indicator\">\n            (required)\n          </Text>\n        </Show>\n      </CheckboxParts.Label>\n\n      <CheckboxParts.HiddenInput />\n    </CheckboxParts.Root>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AA0BQ,cAGF,YAHE;AAND,SAAS,SAAS,OAAsB;AAC7C,QAAM,EAAE,MAAM,UAAU,GAAG,UAAU,IAAI;AAEzC,SACE,qBAAC,cAAc,MAAd,EAAoB,GAAG,WACtB;AAAA,wBAAC,cAAc,SAAd,EAAsB,MACrB,8BAAC,gBAAa,eAAe,UAAU,YAAY,iBAAiB,GACtE;AAAA,IAEA,qBAAC,cAAc,OAAd,EAAoB,MAClB;AAAA;AAAA,MACD,oBAAC,QAAK,MAAM,MAAM,UAChB,8BAAC,QAAK,IAAG,QAAO,aAAU,sBAAqB,wBAE/C,GACF;AAAA,OACF;AAAA,IAEA,oBAAC,cAAc,aAAd,EAA0B;AAAA,KAC7B;AAEJ;","names":[]}