@cerberus-design/react 0.7.4-next-1cd5801 → 0.7.4-next-7fa6bfb

package/build/{legacy/chunk-6TXQZ3PB.js → modern/chunk-OLQQB53X.js}

@@ -1,6 +1,6 @@
 import {
   defaultIcons
-} from "./chunk-C45DY4VE.js";
+} from "./chunk-GIHAFJYX.js";
 
 // src/config/defineIcons.ts
 function _validateIconsProperties(icons) {
@@ -24,4 +24,4 @@ export {
   defineIcons,
   $cerberusIcons
 };
-//# sourceMappingURL=chunk-6TXQZ3PB.js.map
+//# sourceMappingURL=chunk-OLQQB53X.js.map

package/build/modern/{chunk-TPRGGEVJ.js → chunk-SHNZS357.js}

@@ -27,7 +27,7 @@ import {
 } from "./chunk-JIZQFTW6.js";
 import {
   $cerberusIcons
-} from "./chunk-6TXQZ3PB.js";
+} from "./chunk-OLQQB53X.js";
 import {
   useModal
 } from "./chunk-C5HLLGME.js";
@@ -151,4 +151,4 @@ export {
   ConfirmModal,
   useConfirmModal
 };
-//# sourceMappingURL=chunk-TPRGGEVJ.js.map
+//# sourceMappingURL=chunk-SHNZS357.js.map

package/build/modern/components/Droppable.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  Droppable
+} from "../chunk-7VJOPJVX.js";
+export {
+  Droppable
+};
+//# sourceMappingURL=Droppable.js.map

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

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

package/build/modern/components/FileUploader.js

@@ -0,0 +1,11 @@
+"use client";
+import {
+  FileUploader
+} from "../chunk-2NSXMFKX.js";
+import "../chunk-4O4QFF4S.js";
+import "../chunk-OLQQB53X.js";
+import "../chunk-GIHAFJYX.js";
+export {
+  FileUploader
+};
+//# sourceMappingURL=FileUploader.js.map

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

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

package/build/modern/components/Input.js

@@ -1,11 +1,11 @@
 "use client";
 import {
   Input
-} from "../chunk-5GEC53G7.js";
-import "../chunk-4O4QFF4S.js";
+} from "../chunk-DED42MIR.js";
 import "../chunk-ZAU4JVLL.js";
-import "../chunk-6TXQZ3PB.js";
-import "../chunk-C45DY4VE.js";
+import "../chunk-4O4QFF4S.js";
+import "../chunk-OLQQB53X.js";
+import "../chunk-GIHAFJYX.js";
 export {
   Input
 };

package/build/modern/components/Label.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   Label
-} from "../chunk-CU7HXAKM.js";
-import "../chunk-4O4QFF4S.js";
+} from "../chunk-JJGZRBIR.js";
 import "../chunk-ZAU4JVLL.js";
+import "../chunk-4O4QFF4S.js";
 export {
   Label
 };

package/build/modern/components/Toggle.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   Toggle
-} from "../chunk-JWQJLOX4.js";
+} from "../chunk-ANXV7JDK.js";
 import "../chunk-ZAU4JVLL.js";
-import "../chunk-6TXQZ3PB.js";
-import "../chunk-C45DY4VE.js";
+import "../chunk-OLQQB53X.js";
+import "../chunk-GIHAFJYX.js";
 export {
   Toggle
 };

package/build/modern/config/cerbIcons.js

@@ -1,6 +1,6 @@
 import {
   defaultIcons
-} from "../chunk-C45DY4VE.js";
+} from "../chunk-GIHAFJYX.js";
 export {
   defaultIcons
 };

package/build/modern/config/defineIcons.js

@@ -1,8 +1,8 @@
 import {
   $cerberusIcons,
   defineIcons
-} from "../chunk-6TXQZ3PB.js";
-import "../chunk-C45DY4VE.js";
+} from "../chunk-OLQQB53X.js";
+import "../chunk-GIHAFJYX.js";
 export {
   $cerberusIcons,
   defineIcons

package/build/modern/context/confirm-modal.js

@@ -2,7 +2,7 @@
 import {
   ConfirmModal,
   useConfirmModal
-} from "../chunk-TPRGGEVJ.js";
+} from "../chunk-SHNZS357.js";
 import "../chunk-4CAT3FHV.js";
 import "../chunk-2UFNQM55.js";
 import "../chunk-4M4LCQ43.js";
@@ -12,8 +12,8 @@ import "../chunk-JJP2TFTU.js";
 import "../chunk-2ATICEW3.js";
 import "../chunk-4O4QFF4S.js";
 import "../chunk-JIZQFTW6.js";
-import "../chunk-6TXQZ3PB.js";
-import "../chunk-C45DY4VE.js";
+import "../chunk-OLQQB53X.js";
+import "../chunk-GIHAFJYX.js";
 import "../chunk-C5HLLGME.js";
 export {
   ConfirmModal,

package/build/modern/context/prompt-modal.js

@@ -2,21 +2,21 @@
 import {
   PromptModal,
   usePromptModal
-} from "../chunk-FAXDUWAU.js";
+} from "../chunk-DKHQ5GBY.js";
 import "../chunk-4CAT3FHV.js";
+import "../chunk-DED42MIR.js";
+import "../chunk-JJGZRBIR.js";
 import "../chunk-2UFNQM55.js";
 import "../chunk-4M4LCQ43.js";
 import "../chunk-QU7UV5DB.js";
 import "../chunk-JB7IQ2BM.js";
 import "../chunk-JJP2TFTU.js";
 import "../chunk-2ATICEW3.js";
-import "../chunk-5GEC53G7.js";
-import "../chunk-CU7HXAKM.js";
-import "../chunk-4O4QFF4S.js";
 import "../chunk-ZAU4JVLL.js";
+import "../chunk-4O4QFF4S.js";
 import "../chunk-JIZQFTW6.js";
-import "../chunk-6TXQZ3PB.js";
-import "../chunk-C45DY4VE.js";
+import "../chunk-OLQQB53X.js";
+import "../chunk-GIHAFJYX.js";
 import "../chunk-C5HLLGME.js";
 export {
   PromptModal,

package/build/modern/index.js

@@ -1,14 +1,31 @@
+import {
+  Tag
+} from "./chunk-Z6IWNVPN.js";
+import {
+  Textarea
+} from "./chunk-TCO46FK7.js";
 import {
   Toggle
-} from "./chunk-JWQJLOX4.js";
+} from "./chunk-ANXV7JDK.js";
 import {
   ConfirmModal,
   useConfirmModal
-} from "./chunk-TPRGGEVJ.js";
+} from "./chunk-SHNZS357.js";
 import {
   PromptModal,
   usePromptModal
-} from "./chunk-FAXDUWAU.js";
+} from "./chunk-DKHQ5GBY.js";
+import {
+  NavMenuList,
+  getPosition
+} from "./chunk-PMCYXRAH.js";
+import {
+  NavMenuTrigger
+} from "./chunk-RPZAPUCF.js";
+import {
+  NavMenu,
+  useNavMenuContext
+} from "./chunk-KJUCHZHV.js";
 import {
   Portal
 } from "./chunk-4CAT3FHV.js";
@@ -25,11 +42,11 @@ import {
   TabPanel
 } from "./chunk-U72VPIZA.js";
 import {
-  Tag
-} from "./chunk-Z6IWNVPN.js";
+  Input
+} from "./chunk-DED42MIR.js";
 import {
-  Textarea
-} from "./chunk-TCO46FK7.js";
+  Label
+} from "./chunk-JJGZRBIR.js";
 import {
   Modal
 } from "./chunk-2UFNQM55.js";
@@ -48,17 +65,6 @@ import {
 import {
   NavMenuLink
 } from "./chunk-6DIGPXAD.js";
-import {
-  NavMenuList,
-  getPosition
-} from "./chunk-PMCYXRAH.js";
-import {
-  NavMenuTrigger
-} from "./chunk-RPZAPUCF.js";
-import {
-  NavMenu,
-  useNavMenuContext
-} from "./chunk-KJUCHZHV.js";
 import {
   MODE_KEY,
   THEME_KEY,
@@ -72,6 +78,9 @@ import {
 import {
   Button
 } from "./chunk-2ATICEW3.js";
+import {
+  Droppable
+} from "./chunk-7VJOPJVX.js";
 import {
   FeatureFlag
 } from "./chunk-VULPMZUW.js";
@@ -83,21 +92,18 @@ import {
   FieldMessage
 } from "./chunk-VGHVH2T3.js";
 import {
-  IconButton
-} from "./chunk-SLHX5K6I.js";
-import {
-  Input
-} from "./chunk-5GEC53G7.js";
+  Field,
+  useFieldContext
+} from "./chunk-ZAU4JVLL.js";
 import {
-  Label
-} from "./chunk-CU7HXAKM.js";
+  FileUploader
+} from "./chunk-2NSXMFKX.js";
 import {
   Show
 } from "./chunk-4O4QFF4S.js";
 import {
-  Field,
-  useFieldContext
-} from "./chunk-ZAU4JVLL.js";
+  IconButton
+} from "./chunk-SLHX5K6I.js";
 import "./chunk-55J6XMHW.js";
 import {
   createNavTriggerProps
@@ -116,19 +122,24 @@ import {
 import {
   $cerberusIcons,
   defineIcons
-} from "./chunk-6TXQZ3PB.js";
-import "./chunk-C45DY4VE.js";
+} from "./chunk-OLQQB53X.js";
+import "./chunk-GIHAFJYX.js";
 import {
   useModal
 } from "./chunk-C5HLLGME.js";
+
+// src/index.ts
+export * from "@dnd-kit/core";
 export {
   $cerberusIcons,
   Button,
   ConfirmModal,
+  Droppable,
   FeatureFlag,
   FeatureFlags,
   Field,
   FieldMessage,
+  FileUploader,
   IconButton,
   Input,
   Label,

package/build/modern/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","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/Portal'\nexport * from './components/Radio'\nexport * from './components/Tab'\nexport * from './components/TabList'\nexport * from './components/TabPanel'\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/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEA,cAAc;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.7.4-next-1cd5801",
+  "version": "0.7.4-next-7fa6bfb",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -15,6 +15,9 @@
     "react": "*",
     "react-dom": "*"
   },
+  "dependencies": {
+    "@dnd-kit/core": "^6.1.0"
+  },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.46.2",
     "@types/react": "^18",
@@ -23,7 +26,7 @@
     "react-dom": "^18",
     "tsup": "^8.1.0",
     "@cerberus-design/configs": "0.0.0",
-    "@cerberus-design/styled-system": "0.7.4-next-1cd5801"
+    "@cerberus-design/styled-system": "0.7.4-next-7fa6bfb"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Droppable.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import { useDroppable, type UseDroppableArguments } from '@dnd-kit/core'
+import { useId, type HtmlHTMLAttributes, type PropsWithChildren } from 'react'
+
+export interface DroppableProps
+  extends Omit<HtmlHTMLAttributes<HTMLDivElement>, 'id'>,
+    UseDroppableArguments {
+  dropped?: boolean
+}
+
+export function Droppable(props: PropsWithChildren<DroppableProps>) {
+  const { dropped, id, disabled, data, resizeObserverConfig, ...nativeProps } =
+    props
+  const uuid = useId()
+  const { isOver, setNodeRef } = useDroppable({
+    data,
+    disabled,
+    id: id || uuid,
+    resizeObserverConfig,
+  })
+
+  return (
+    <div
+      {...nativeProps}
+      data-over={isOver}
+      data-dropped={dropped}
+      ref={setNodeRef}
+    >
+      {props.children}
+    </div>
+  )
+}

package/src/components/FileUploader.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import { cx } from '@cerberus-design/styled-system/css'
+import { circle, vstack } from '@cerberus-design/styled-system/patterns'
+import { type InputHTMLAttributes } from 'react'
+import { Show } from './Show'
+import { fileUploader, modalIcon } from '@cerberus-design/styled-system/recipes'
+import { $cerberusIcons } from '../config/defineIcons'
+
+export interface FileUploaderProps
+  extends InputHTMLAttributes<HTMLInputElement> {
+  heading?: string
+  name: string
+}
+
+export function FileUploader(props: FileUploaderProps) {
+  const styles = fileUploader()
+  const Icon = $cerberusIcons.fileUploader
+
+  return (
+    <div
+      className={cx(
+        vstack({
+          justify: 'center',
+        }),
+        styles.container,
+      )}
+    >
+      <span className={cx(styles.icon, modalIcon(), circle())}>
+        <Icon />
+      </span>
+
+      <label
+        className={cx(
+          vstack({
+            justify: 'center',
+          }),
+          styles.label,
+        )}
+        htmlFor={props.name}
+      >
+        <Show when={Boolean(props.heading)}>
+          <p className={styles.heading}>{props.heading}</p>
+        </Show>
+        Import {props.accept?.replace(',', ', ')} files
+        <p className={styles.description}>Or click to upload</p>
+        <input
+          {...props}
+          className={cx(props.className, styles.input)}
+          type="file"
+        />
+      </label>
+    </div>
+  )
+}

package/src/config/cerbIcons.ts

@@ -1,5 +1,6 @@
 import {
   Checkmark,
+  CloudUpload,
   Information,
   WarningFilled,
   type CarbonIconType,
@@ -8,6 +9,7 @@ import type { ElementType } from 'react'
 
 export interface DefinedIcons {
   confirmModal?: CarbonIconType | ElementType
+  fileUploader?: CarbonIconType | ElementType
   promptModal?: CarbonIconType | ElementType
   invalid: CarbonIconType | ElementType
   toggleChecked?: CarbonIconType | ElementType
@@ -15,6 +17,7 @@ export interface DefinedIcons {
 
 export const defaultIcons: DefinedIcons = {
   confirmModal: Information,
+  fileUploader: CloudUpload,
   promptModal: Information,
   invalid: WarningFilled,
   toggleChecked: Checkmark,

package/src/index.ts

@@ -6,8 +6,10 @@
 // components
 
 export * from './components/Button'
+export * from './components/Droppable'
 export * from './components/FieldMessage'
 export * from './components/FeatureFlag'
+export * from './components/FileUploader'
 export * from './components/IconButton'
 export * from './components/Input'
 export * from './components/Label'
@@ -58,3 +60,7 @@ export * from './config/defineIcons'
 // shared types
 
 export * from './types'
+
+// 3rd party
+
+export * from '@dnd-kit/core'

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/config/cerbIcons.ts"],"sourcesContent":["import {\n  Checkmark,\n  Information,\n  WarningFilled,\n  type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\n\nexport interface DefinedIcons {\n  confirmModal?: CarbonIconType | ElementType\n  promptModal?: CarbonIconType | ElementType\n  invalid: CarbonIconType | ElementType\n  toggleChecked?: CarbonIconType | ElementType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  confirmModal: Information,\n  promptModal: Information,\n  invalid: WarningFilled,\n  toggleChecked: Checkmark,\n}\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAUA,IAAM,eAA6B;AAAA,EACxC,cAAc;AAAA,EACd,aAAa;AAAA,EACb,SAAS;AAAA,EACT,eAAe;AACjB;","names":[]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/config/cerbIcons.ts"],"sourcesContent":["import {\n  Checkmark,\n  Information,\n  WarningFilled,\n  type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\n\nexport interface DefinedIcons {\n  confirmModal?: CarbonIconType | ElementType\n  promptModal?: CarbonIconType | ElementType\n  invalid: CarbonIconType | ElementType\n  toggleChecked?: CarbonIconType | ElementType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  confirmModal: Information,\n  promptModal: Information,\n  invalid: WarningFilled,\n  toggleChecked: Checkmark,\n}\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAUA,IAAM,eAA6B;AAAA,EACxC,cAAc;AAAA,EACd,aAAa;AAAA,EACb,SAAS;AAAA,EACT,eAAe;AACjB;","names":[]}