@cerberus-design/react 0.12.0-next-bd594cf → 0.12.0-next-635644c

package/build/modern/_tsup-dts-rollup.d.ts

@@ -130,6 +130,7 @@ import { TdVariantProps } from '@cerberus/styled-system/recipes';
 import type { TextareaHTMLAttributes } from 'react';
 import { ThVariantProps } from '@cerberus/styled-system/recipes';
 import { ToggleVariantProps } from '@cerberus/styled-system/recipes';
+import { TooltipContentProps } from '@ark-ui/react/tooltip';
 import { TouchSensor } from '@dnd-kit/core';
 import { TouchSensorOptions } from '@dnd-kit/core';
 import { Translate } from '@dnd-kit/core';
@@ -2731,6 +2732,36 @@ declare type ToggleProps = ToggleBase & ToggleVariantProps;
 export { ToggleProps }
 export { ToggleProps as ToggleProps_alias_1 }
 
+/**
+ * The Tooltip component is used to provide additional information about an element when it is hovered over.
+ * @definition [Tooltip docs](https://cerberus.digitalu.design/react/tooltip)
+ * @example
+ * ```tsx
+ * <Tooltip content="This is a tooltip">
+ *   <Information />
+ * </Tooltip>
+ */
+declare function Tooltip(props: TooltipProps & TooltipContentProps): JSX_2.Element;
+export { Tooltip }
+export { Tooltip as Tooltip_alias_1 }
+
+/**
+ * This module contains the Tooltip component.
+ * @module Tooltip
+ */
+declare interface TooltipProps {
+    /**
+     * The text content to display in the tooltip.
+     */
+    content: ReactNode;
+    /**
+     * The position of the tooltip relative to the trigger element.
+     */
+    position?: 'top' | 'right' | 'bottom' | 'left';
+}
+export { TooltipProps }
+export { TooltipProps as TooltipProps_alias_1 }
+
 export { TouchSensor }
 
 export { TouchSensorOptions }

package/build/modern/chunk-KML4CTMK.js

@@ -0,0 +1,33 @@
+// src/components/Tooltip.tsx
+import {
+  Tooltip as ArkTooltip
+} from "@ark-ui/react/tooltip";
+import { cx } from "@cerberus/styled-system/css";
+import { tooltip } from "@cerberus/styled-system/recipes";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Tooltip(props) {
+  const { content, children, ...nativeProps } = props;
+  const styles = tooltip();
+  const position = {
+    placement: props.position || "top"
+  };
+  return /* @__PURE__ */ jsxs(ArkTooltip.Root, { openDelay: 400, positioning: position, children: [
+    /* @__PURE__ */ jsx(ArkTooltip.Trigger, { className: styles.trigger, children }),
+    /* @__PURE__ */ jsx(ArkTooltip.Positioner, { children: /* @__PURE__ */ jsxs(
+      ArkTooltip.Content,
+      {
+        ...nativeProps,
+        className: cx(nativeProps.className, styles.content),
+        children: [
+          /* @__PURE__ */ jsx(ArkTooltip.Arrow, { className: styles.arrow, children: /* @__PURE__ */ jsx(ArkTooltip.ArrowTip, { className: styles.arrowTip }) }),
+          content
+        ]
+      }
+    ) })
+  ] });
+}
+
+export {
+  Tooltip
+};
+//# sourceMappingURL=chunk-KML4CTMK.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Tooltip.tsx"],"sourcesContent":["import {\n  Tooltip as ArkTooltip,\n  type TooltipContentProps,\n} from '@ark-ui/react/tooltip'\nimport { cx } from '@cerberus/styled-system/css'\nimport { tooltip } from '@cerberus/styled-system/recipes'\nimport type { ReactNode } from 'react'\n\n/**\n * This module contains the Tooltip component.\n * @module Tooltip\n */\n\nexport interface TooltipProps {\n  /**\n   * The text content to display in the tooltip.\n   */\n  content: ReactNode\n  /**\n   * The position of the tooltip relative to the trigger element.\n   */\n  position?: 'top' | 'right' | 'bottom' | 'left'\n}\n\n/**\n * The Tooltip component is used to provide additional information about an element when it is hovered over.\n * @definition [Tooltip docs](https://cerberus.digitalu.design/react/tooltip)\n * @example\n * ```tsx\n * <Tooltip content=\"This is a tooltip\">\n *   <Information />\n * </Tooltip>\n */\nexport function Tooltip(props: TooltipProps & TooltipContentProps) {\n  const { content, children, ...nativeProps } = props\n  const styles = tooltip()\n  const position = {\n    placement: props.position || 'top',\n  }\n\n  return (\n    <ArkTooltip.Root openDelay={400} positioning={position}>\n      <ArkTooltip.Trigger className={styles.trigger}>\n        {children}\n      </ArkTooltip.Trigger>\n\n      <ArkTooltip.Positioner>\n        <ArkTooltip.Content\n          {...nativeProps}\n          className={cx(nativeProps.className, styles.content)}\n        >\n          <ArkTooltip.Arrow className={styles.arrow}>\n            <ArkTooltip.ArrowTip className={styles.arrowTip} />\n          </ArkTooltip.Arrow>\n\n          {content}\n        </ArkTooltip.Content>\n      </ArkTooltip.Positioner>\n    </ArkTooltip.Root>\n  )\n}\n"],"mappings":";AAAA;AAAA,EACE,WAAW;AAAA,OAEN;AACP,SAAS,UAAU;AACnB,SAAS,eAAe;AAqClB,cAKE,YALF;AATC,SAAS,QAAQ,OAA2C;AACjE,QAAM,EAAE,SAAS,UAAU,GAAG,YAAY,IAAI;AAC9C,QAAM,SAAS,QAAQ;AACvB,QAAM,WAAW;AAAA,IACf,WAAW,MAAM,YAAY;AAAA,EAC/B;AAEA,SACE,qBAAC,WAAW,MAAX,EAAgB,WAAW,KAAK,aAAa,UAC5C;AAAA,wBAAC,WAAW,SAAX,EAAmB,WAAW,OAAO,SACnC,UACH;AAAA,IAEA,oBAAC,WAAW,YAAX,EACC;AAAA,MAAC,WAAW;AAAA,MAAX;AAAA,QACE,GAAG;AAAA,QACJ,WAAW,GAAG,YAAY,WAAW,OAAO,OAAO;AAAA,QAEnD;AAAA,8BAAC,WAAW,OAAX,EAAiB,WAAW,OAAO,OAClC,8BAAC,WAAW,UAAX,EAAoB,WAAW,OAAO,UAAU,GACnD;AAAA,UAEC;AAAA;AAAA;AAAA,IACH,GACF;AAAA,KACF;AAEJ;","names":[]}

package/build/modern/components/Tooltip.js

@@ -0,0 +1,7 @@
+import {
+  Tooltip
+} from "../chunk-KML4CTMK.js";
+export {
+  Tooltip
+};
+//# sourceMappingURL=Tooltip.js.map

package/build/modern/components/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/index.js

@@ -2,6 +2,9 @@ import {
   ThemeProvider,
   useThemeContext
 } from "./chunk-EB37HRCN.js";
+import {
+  Tooltip
+} from "./chunk-KML4CTMK.js";
 import {
   ConfirmModal,
   useConfirmModal
@@ -280,6 +283,7 @@ export {
   Thead,
   ThemeProvider,
   Toggle,
+  Tooltip,
   Tr,
   createNavTriggerProps,
   defineIcons,

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/Admonition'\nexport * from './components/Avatar'\nexport * from './components/Button'\nexport * from './components/Checkbox'\nexport * from './components/CircularProgress'\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/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'\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/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/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/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'\nexport * from './utils/index'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuFA,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/Admonition'\nexport * from './components/Avatar'\nexport * from './components/Button'\nexport * from './components/Checkbox'\nexport * from './components/CircularProgress'\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/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'\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/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/Tooltip'\nexport * from './components/Show'\n\n// context\n\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/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'\nexport * from './utils/index'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwFA,cAAc;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.12.0-next-bd594cf",
+  "version": "0.12.0-next-635644c",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -26,8 +26,8 @@
     "react": "^18",
     "react-dom": "^18",
     "tsup": "^8.1.0",
-    "@cerberus-design/configs": "0.0.0",
-    "@cerberus-design/styled-system": "0.12.0-next-bd594cf"
+    "@cerberus-design/styled-system": "0.12.0-next-635644c",
+    "@cerberus-design/configs": "0.0.0"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Tooltip.tsx

@@ -0,0 +1,61 @@
+import {
+  Tooltip as ArkTooltip,
+  type TooltipContentProps,
+} from '@ark-ui/react/tooltip'
+import { cx } from '@cerberus/styled-system/css'
+import { tooltip } from '@cerberus/styled-system/recipes'
+import type { ReactNode } from 'react'
+
+/**
+ * This module contains the Tooltip component.
+ * @module Tooltip
+ */
+
+export interface TooltipProps {
+  /**
+   * The text content to display in the tooltip.
+   */
+  content: ReactNode
+  /**
+   * The position of the tooltip relative to the trigger element.
+   */
+  position?: 'top' | 'right' | 'bottom' | 'left'
+}
+
+/**
+ * The Tooltip component is used to provide additional information about an element when it is hovered over.
+ * @definition [Tooltip docs](https://cerberus.digitalu.design/react/tooltip)
+ * @example
+ * ```tsx
+ * <Tooltip content="This is a tooltip">
+ *   <Information />
+ * </Tooltip>
+ */
+export function Tooltip(props: TooltipProps & TooltipContentProps) {
+  const { content, children, ...nativeProps } = props
+  const styles = tooltip()
+  const position = {
+    placement: props.position || 'top',
+  }
+
+  return (
+    <ArkTooltip.Root openDelay={400} positioning={position}>
+      <ArkTooltip.Trigger className={styles.trigger}>
+        {children}
+      </ArkTooltip.Trigger>
+
+      <ArkTooltip.Positioner>
+        <ArkTooltip.Content
+          {...nativeProps}
+          className={cx(nativeProps.className, styles.content)}
+        >
+          <ArkTooltip.Arrow className={styles.arrow}>
+            <ArkTooltip.ArrowTip className={styles.arrowTip} />
+          </ArkTooltip.Arrow>
+
+          {content}
+        </ArkTooltip.Content>
+      </ArkTooltip.Positioner>
+    </ArkTooltip.Root>
+  )
+}

package/src/index.ts

@@ -48,6 +48,7 @@ export * from './components/Tbody'
 export * from './components/Tag'
 export * from './components/Textarea'
 export * from './components/Toggle'
+export * from './components/Tooltip'
 export * from './components/Show'
 
 // context