@cerberus-design/react 0.16.0-next-ba05f96 → 0.16.0-next-d049636

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/AccordionItemGroup.tsx"],"sourcesContent":["import { Accordion as ArkAccordion } from '@ark-ui/react'\nimport { type AccordionVariantProps } from '@cerberus/styled-system/recipes'\nimport type { PropsWithChildren } from 'react'\nimport { Show } from './Show'\nimport {\n  AccordionItem,\n  AccordionItemContent,\n  AccordionItemTrigger,\n} from './Accordion'\nimport { css } from '@cerberus/styled-system/css'\nimport { AccordionItemIndicator } from './Accordion.client'\n\n/**\n * This module contains an abstraction of the AccordionItem components.\n * @module\n */\n\nexport interface AccordionItemGroupBaseProps extends ArkAccordion.ItemProps {\n  /**\n   * The heading of the accordion item to open and close the content.\n   */\n  heading: string\n  /**\n   * The position of the arrow indicator.\n   */\n  indicatorPosition?: 'start' | 'end'\n}\nexport type AccordionItemGroupProps = AccordionItemGroupBaseProps &\n  AccordionVariantProps\n\n/**\n * A grouped item for the Accordion component.\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)\n * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)\n * @example\n * ```tsx\n * <Accordion>\n *   <AccordionItemGroup heading=\"Accordion Item 1\" value=\"one\">\n *     Accordion Item 1 content\n *   </AccordionItemGroup>\n * </Accordion>\n * ```\n */\nexport function AccordionItemGroup(\n  props: PropsWithChildren<AccordionItemGroupProps>,\n) {\n  const {\n    size,\n    heading,\n    children,\n    indicatorPosition = 'end',\n    ...itemProps\n  } = props\n  const triggerStyles =\n    indicatorPosition === 'start'\n      ? {\n          gap: 'md',\n          justifyContent: 'flex-start',\n        }\n      : undefined\n\n  return (\n    <AccordionItem {...itemProps}>\n      <AccordionItemTrigger className={css(triggerStyles)} size={size}>\n        <Show when={indicatorPosition === 'start'}>\n          <AccordionItemIndicator size={size} />\n        </Show>\n\n        {heading}\n\n        <Show when={indicatorPosition === 'end'}>\n          <AccordionItemIndicator size={size} />\n        </Show>\n      </AccordionItemTrigger>\n\n      <AccordionItemContent size={size}>{children}</AccordionItemContent>\n    </AccordionItem>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AASA,SAAS,WAAW;AAsDd,SAEI,KAFJ;AApBC,SAAS,mBACd,OACA;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,gBACJ,sBAAsB,UAClB;AAAA,IACE,KAAK;AAAA,IACL,gBAAgB;AAAA,EAClB,IACA;AAEN,SACE,qBAAC,iBAAe,GAAG,WACjB;AAAA,yBAAC,wBAAqB,WAAW,IAAI,aAAa,GAAG,MACnD;AAAA,0BAAC,QAAK,MAAM,sBAAsB,SAChC,8BAAC,0BAAuB,MAAY,GACtC;AAAA,MAEC;AAAA,MAED,oBAAC,QAAK,MAAM,sBAAsB,OAChC,8BAAC,0BAAuB,MAAY,GACtC;AAAA,OACF;AAAA,IAEA,oBAAC,wBAAqB,MAAa,UAAS;AAAA,KAC9C;AAEJ;","names":[]}

package/build/modern/chunk-XZGXRRSQ.js

@@ -1,31 +0,0 @@
-import {
-  useCerberusContext
-} from "./chunk-GITT5645.js";
-
-// src/components/Accordion.client.tsx
-import { Accordion as ArkAccordion } from "@ark-ui/react";
-import { cx } from "@cerberus/styled-system/css";
-import {
-  accordion
-} from "@cerberus/styled-system/recipes";
-import { jsx } from "react/jsx-runtime";
-function AccordionItemIndicator(props) {
-  const { size, ...indicatorProps } = props;
-  const styles = accordion({ size });
-  const iconSize = size === "sm" ? 16 : "24";
-  const { icons } = useCerberusContext();
-  const ChevronDown = icons.accordionIndicator;
-  return /* @__PURE__ */ jsx(
-    ArkAccordion.ItemIndicator,
-    {
-      ...indicatorProps,
-      className: cx(indicatorProps.className, styles.itemIndicator),
-      children: /* @__PURE__ */ jsx(ChevronDown, { size: iconSize })
-    }
-  );
-}
-
-export {
-  AccordionItemIndicator
-};
-//# sourceMappingURL=chunk-XZGXRRSQ.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Accordion.client.tsx"],"sourcesContent":["'use client'\n\nimport { Accordion as ArkAccordion } from '@ark-ui/react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  accordion,\n  type AccordionVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { useCerberusContext } from '../context/cerberus'\n\nexport type AccordionItemIndicatorProps = ArkAccordion.ItemIndicatorProps &\n  AccordionVariantProps\n\n/**\n * The indicator for the Accordion component.\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)\n * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)\n * @example\n * ```tsx\n * <Accordion>\n *   <AccordionItem value=\"one\">\n *     <AccordionTrigger>\n *        Accordion Item 1\n *     <AccordionIndicator />\n *     </AccordionTrigger>\n *     <AccordionContent>Accordion Item 1 content</AccordionContent>\n *   </AccordionItem>\n * </Accordion>\n * ```\n * */\nexport function AccordionItemIndicator(props: AccordionItemIndicatorProps) {\n  const { size, ...indicatorProps } = props\n  const styles = accordion({ size })\n  const iconSize = size === 'sm' ? 16 : '24'\n  const { icons } = useCerberusContext()\n  const ChevronDown = icons.accordionIndicator\n\n  return (\n    <ArkAccordion.ItemIndicator\n      {...indicatorProps}\n      className={cx(indicatorProps.className, styles.itemIndicator)}\n    >\n      <ChevronDown size={iconSize} />\n    </ArkAccordion.ItemIndicator>\n  )\n}\n"],"mappings":";;;;;AAEA,SAAS,aAAa,oBAAoB;AAC1C,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AAmCD;AAZC,SAAS,uBAAuB,OAAoC;AACzE,QAAM,EAAE,MAAM,GAAG,eAAe,IAAI;AACpC,QAAM,SAAS,UAAU,EAAE,KAAK,CAAC;AACjC,QAAM,WAAW,SAAS,OAAO,KAAK;AACtC,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,cAAc,MAAM;AAE1B,SACE;AAAA,IAAC,aAAa;AAAA,IAAb;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,eAAe,WAAW,OAAO,aAAa;AAAA,MAE5D,8BAAC,eAAY,MAAM,UAAU;AAAA;AAAA,EAC/B;AAEJ;","names":[]}

package/build/modern/components/Accordion.client.js

@@ -1,9 +0,0 @@
-"use client";
-import {
-  AccordionItemIndicator
-} from "../chunk-XZGXRRSQ.js";
-import "../chunk-GITT5645.js";
-export {
-  AccordionItemIndicator
-};
-//# sourceMappingURL=Accordion.client.js.map

package/build/modern/components/Accordion.js

@@ -1,13 +0,0 @@
-import {
-  Accordion,
-  AccordionItem,
-  AccordionItemContent,
-  AccordionItemTrigger
-} from "../chunk-AZRFYQO7.js";
-export {
-  Accordion,
-  AccordionItem,
-  AccordionItemContent,
-  AccordionItemTrigger
-};
-//# sourceMappingURL=Accordion.js.map

package/build/modern/components/AccordionItemGroup.js

@@ -1,11 +0,0 @@
-import {
-  AccordionItemGroup
-} from "../chunk-WN7TJX6J.js";
-import "../chunk-XZGXRRSQ.js";
-import "../chunk-AZRFYQO7.js";
-import "../chunk-GITT5645.js";
-import "../chunk-BUVVRQLZ.js";
-export {
-  AccordionItemGroup
-};
-//# sourceMappingURL=AccordionItemGroup.js.map

package/build/modern/components/Admonition.client.js

@@ -1,11 +0,0 @@
-"use client";
-import {
-  MatchAvatar
-} from "../chunk-2HOUQ2DX.js";
-import "../chunk-SXLPDPOZ.js";
-import "../chunk-GITT5645.js";
-import "../chunk-BUVVRQLZ.js";
-export {
-  MatchAvatar
-};
-//# sourceMappingURL=Admonition.client.js.map

package/build/modern/components/Admonition.js

@@ -1,15 +0,0 @@
-import {
-  Admonition,
-  AdmonitionDescription,
-  AdmonitionHeading
-} from "../chunk-DXBZ3HMY.js";
-import "../chunk-2HOUQ2DX.js";
-import "../chunk-SXLPDPOZ.js";
-import "../chunk-GITT5645.js";
-import "../chunk-BUVVRQLZ.js";
-export {
-  Admonition,
-  AdmonitionDescription,
-  AdmonitionHeading
-};
-//# sourceMappingURL=Admonition.js.map

package/src/components/Accordion.client.tsx

@@ -1,46 +0,0 @@
-'use client'
-
-import { Accordion as ArkAccordion } from '@ark-ui/react'
-import { cx } from '@cerberus/styled-system/css'
-import {
-  accordion,
-  type AccordionVariantProps,
-} from '@cerberus/styled-system/recipes'
-import { useCerberusContext } from '../context/cerberus'
-
-export type AccordionItemIndicatorProps = ArkAccordion.ItemIndicatorProps &
-  AccordionVariantProps
-
-/**
- * The indicator for the Accordion component.
- * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)
- * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)
- * @example
- * ```tsx
- * <Accordion>
- *   <AccordionItem value="one">
- *     <AccordionTrigger>
- *        Accordion Item 1
- *     <AccordionIndicator />
- *     </AccordionTrigger>
- *     <AccordionContent>Accordion Item 1 content</AccordionContent>
- *   </AccordionItem>
- * </Accordion>
- * ```
- * */
-export function AccordionItemIndicator(props: AccordionItemIndicatorProps) {
-  const { size, ...indicatorProps } = props
-  const styles = accordion({ size })
-  const iconSize = size === 'sm' ? 16 : '24'
-  const { icons } = useCerberusContext()
-  const ChevronDown = icons.accordionIndicator
-
-  return (
-    <ArkAccordion.ItemIndicator
-      {...indicatorProps}
-      className={cx(indicatorProps.className, styles.itemIndicator)}
-    >
-      <ChevronDown size={iconSize} />
-    </ArkAccordion.ItemIndicator>
-  )
-}

package/src/components/Accordion.tsx

@@ -1,125 +0,0 @@
-import { Accordion as ArkAccordion } from '@ark-ui/react'
-import { cx } from '@cerberus/styled-system/css'
-import {
-  accordion,
-  type AccordionVariantProps,
-} from '@cerberus/styled-system/recipes'
-
-export type AccordionProps = ArkAccordion.RootProps & AccordionVariantProps
-
-/**
- * The context provider for the Accordion family.
- * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)
- * @example
- * ```tsx
- * <Accordion>
- *  <AccordionItemGroup heading="Item 1 heading" value="one">
- *     This is the content
- *  </AccordionItemGroup>
- * </Accordion>
- * ```
- */
-export function Accordion(props: AccordionProps) {
-  const { size, className, ...rootProps } = props
-  const styles = accordion({ size })
-
-  return (
-    <ArkAccordion.Root
-      collapsible
-      className={cx(className, styles.root)}
-      {...rootProps}
-    />
-  )
-}
-
-type AccordionItemProps = ArkAccordion.ItemProps & AccordionVariantProps
-
-/**
- * The item for the Accordion component.
- * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)
- * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)
- * @example
- * ```tsx
- * <Accordion>
- *   <AccordionItem value="one">
- *     <AccordionTrigger>
- *        Accordion Item 1
- *     <AccordionIndicator />
- *     </AccordionTrigger>
- *     <AccordionContent>Accordion Item 1 content</AccordionContent>
- *   </AccordionItem>
- * </Accordion>
- * ```
- */
-export function AccordionItem(props: AccordionItemProps) {
-  const { size, ...itemProps } = props
-  const styles = accordion({ size })
-  return (
-    <ArkAccordion.Item
-      {...itemProps}
-      className={cx(itemProps.className, styles.item)}
-    />
-  )
-}
-
-export type AccordionItemTriggerProps = ArkAccordion.ItemTriggerProps &
-  AccordionVariantProps
-
-/**
- * The trigger for the Accordion component.
- * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)
- * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)
- * @example
- * ```tsx
- * <Accordion>
- *   <AccordionItem value="one">
- *     <AccordionTrigger>
- *        Accordion Item 1
- *     <AccordionIndicator />
- *     </AccordionTrigger>
- *     <AccordionContent>Accordion Item 1 content</AccordionContent>
- *   </AccordionItem>
- * </Accordion>
- * ```
- */
-export function AccordionItemTrigger(props: AccordionItemTriggerProps) {
-  const { size, ...triggerProps } = props
-  const styles = accordion({ size })
-  return (
-    <ArkAccordion.ItemTrigger
-      {...triggerProps}
-      className={cx(triggerProps.className, styles.itemTrigger)}
-    />
-  )
-}
-
-export type AccordionItemContentProps = ArkAccordion.ItemContentProps &
-  AccordionVariantProps
-
-/**
- * The content for the Accordion component.
- * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)
- * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)
- * @example
- * ```tsx
- * <Accordion>
- *   <AccordionItem value="one">
- *     <AccordionTrigger>
- *        Accordion Item 1
- *     <AccordionIndicator />
- *     </AccordionTrigger>
- *     <AccordionContent>Accordion Item 1 content</AccordionContent>
- *   </AccordionItem>
- * </Accordion>
- * ```
- * */
-export function AccordionItemContent(props: AccordionItemContentProps) {
-  const { size, ...contentProps } = props
-  const styles = accordion({ size })
-  return (
-    <ArkAccordion.ItemContent
-      {...contentProps}
-      className={cx(contentProps.className, styles.itemContent)}
-    />
-  )
-}

package/src/components/AccordionItemGroup.tsx

@@ -1,79 +0,0 @@
-import { Accordion as ArkAccordion } from '@ark-ui/react'
-import { type AccordionVariantProps } from '@cerberus/styled-system/recipes'
-import type { PropsWithChildren } from 'react'
-import { Show } from './Show'
-import {
-  AccordionItem,
-  AccordionItemContent,
-  AccordionItemTrigger,
-} from './Accordion'
-import { css } from '@cerberus/styled-system/css'
-import { AccordionItemIndicator } from './Accordion.client'
-
-/**
- * This module contains an abstraction of the AccordionItem components.
- * @module
- */
-
-export interface AccordionItemGroupBaseProps extends ArkAccordion.ItemProps {
-  /**
-   * The heading of the accordion item to open and close the content.
-   */
-  heading: string
-  /**
-   * The position of the arrow indicator.
-   */
-  indicatorPosition?: 'start' | 'end'
-}
-export type AccordionItemGroupProps = AccordionItemGroupBaseProps &
-  AccordionVariantProps
-
-/**
- * A grouped item for the Accordion component.
- * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)
- * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)
- * @example
- * ```tsx
- * <Accordion>
- *   <AccordionItemGroup heading="Accordion Item 1" value="one">
- *     Accordion Item 1 content
- *   </AccordionItemGroup>
- * </Accordion>
- * ```
- */
-export function AccordionItemGroup(
-  props: PropsWithChildren<AccordionItemGroupProps>,
-) {
-  const {
-    size,
-    heading,
-    children,
-    indicatorPosition = 'end',
-    ...itemProps
-  } = props
-  const triggerStyles =
-    indicatorPosition === 'start'
-      ? {
-          gap: 'md',
-          justifyContent: 'flex-start',
-        }
-      : undefined
-
-  return (
-    <AccordionItem {...itemProps}>
-      <AccordionItemTrigger className={css(triggerStyles)} size={size}>
-        <Show when={indicatorPosition === 'start'}>
-          <AccordionItemIndicator size={size} />
-        </Show>
-
-        {heading}
-
-        <Show when={indicatorPosition === 'end'}>
-          <AccordionItemIndicator size={size} />
-        </Show>
-      </AccordionItemTrigger>
-
-      <AccordionItemContent size={size}>{children}</AccordionItemContent>
-    </AccordionItem>
-  )
-}

package/src/components/Admonition.client.tsx

@@ -1,73 +0,0 @@
-'use client'
-
-import type { AdmonitionVariantProps } from '@cerberus/styled-system/recipes'
-import { useCerberusContext } from '../context/cerberus'
-import { Avatar } from './Avatar'
-
-type MatchAvatarProps = AdmonitionVariantProps
-
-export function MatchAvatar(props: MatchAvatarProps) {
-  const { icons } = useCerberusContext()
-  const {
-    infoNotification: InfoIcon,
-    successNotification: SuccessIcon,
-    warningNotification: WarningIcon,
-    dangerNotification: DangerIcon,
-  } = icons
-
-  switch (props.palette) {
-    case 'page':
-      return (
-        <Avatar
-          gradient="charon-light"
-          ariaLabel=""
-          icon={<InfoIcon />}
-          size="sm"
-          src=""
-        />
-      )
-    case 'info':
-      return (
-        <Avatar
-          gradient="amphiaraus-dark"
-          ariaLabel=""
-          icon={<InfoIcon />}
-          size="sm"
-          src=""
-        />
-      )
-    case 'success':
-      return (
-        <Avatar
-          gradient="thanatos-dark"
-          ariaLabel=""
-          icon={<SuccessIcon />}
-          size="sm"
-          src=""
-        />
-      )
-    case 'warning':
-      return (
-        <Avatar
-          gradient="asphodel-light"
-          ariaLabel=""
-          icon={<WarningIcon />}
-          size="sm"
-          src=""
-        />
-      )
-    case 'danger':
-      return (
-        <Avatar
-          gradient="hades-light"
-          ariaLabel=""
-          icon={<DangerIcon />}
-          size="sm"
-          src=""
-        />
-      )
-
-    default:
-      throw new Error('Unsupported admonition palette')
-  }
-}

package/src/components/Admonition.tsx

@@ -1,117 +0,0 @@
-import {
-  admonition,
-  type AdmonitionVariantProps,
-} from '@cerberus/styled-system/recipes'
-import { cx } from '@cerberus/styled-system/css'
-import { hstack } from '@cerberus/styled-system/patterns'
-import type { HTMLAttributes, ReactNode } from 'react'
-import { Show } from './Show'
-import { MatchAvatar } from './Admonition.client'
-
-/**
- * This module provides a set of components for creating admonitions.
- * @module Admonition
- */
-
-export type AdmonitionProps = HTMLAttributes<HTMLDivElement> &
-  AdmonitionVariantProps & {
-    /**
-     * One off replacement for the icon.
-     */
-    icon?: ReactNode
-  }
-
-/**
- * The `Admonition` component is used to create an admonition.
- * @example
- * ```tsx
- * <Admonition palette="page">
- *  <AdmonitionHeading palette="page">Page</AdmonitionHeading>
- *  <AdmonitionDescription palette="page">
- *   This is a page admonition.
- *  </AdmonitionDescription>
- * </Admonition>
- * ```
- * @see https://cerberus.digitalu.design/react/admonition
- */
-export function Admonition(props: AdmonitionProps) {
-  const { children, palette = 'page', usage, icon, ...nativeProps } = props
-  return (
-    <aside
-      {...nativeProps}
-      className={cx(
-        nativeProps.className,
-        hstack({
-          gap: 'md',
-          w: 'full',
-        }),
-        admonition({ palette, usage }).root,
-      )}
-    >
-      <Show when={Boolean(icon)} fallback={<MatchAvatar palette={palette} />}>
-        {icon}
-      </Show>
-      <div>{children}</div>
-    </aside>
-  )
-}
-
-export type AdmonitionHeadingProps = HTMLAttributes<HTMLParagraphElement> &
-  AdmonitionVariantProps
-
-/**
- * The `AdmonitionHeading` component is used to create a heading within an
- * admonition.
- * @example
- * ```tsx
- * <Admonition palette="page">
- *  <AdmonitionHeading palette="page">Page</AdmonitionHeading>
- *  <AdmonitionDescription palette="page">
- *   This is a page admonition.
- *  </AdmonitionDescription>
- * </Admonition>
- * ```
- * @see https://cerberus.digitalu.design/react/admonition
- */
-export function AdmonitionHeading(props: AdmonitionHeadingProps) {
-  const { palette, usage, ...nativeProps } = props
-  return (
-    <p
-      {...nativeProps}
-      className={cx(
-        nativeProps.className,
-        admonition({ palette, usage }).heading,
-      )}
-    />
-  )
-}
-
-export type AdmonitionDescriptionProps = HTMLAttributes<HTMLParagraphElement> &
-  AdmonitionVariantProps
-
-/**
- * The `AdmonitionDescription` component is used to create a description within
- * an admonition.
- * @example
- * ```tsx
- * <Admonition palette="page">
- *  <AdmonitionHeading palette="page">Page</AdmonitionHeading>
- *  <AdmonitionDescription palette="page">
- *   This is a page admonition.
- *  </AdmonitionDescription>
- * </Admonition>
- * ```
- * @see https://cerberus.digitalu.design/react/admonition
- */
-export function AdmonitionDescription(props: AdmonitionDescriptionProps) {
-  const { palette, usage, ...nativeProps } = props
-  return (
-    <p
-      {...nativeProps}
-      className={cx(
-        nativeProps.className,
-        admonition({ palette, usage }).description,
-      )}
-    />
-  )
-}