@cerberus-design/react 0.25.0-rc.7 → 0.25.1-rc.1

package/src/components/file-upload/primitives.ts

@@ -0,0 +1,156 @@
+import {
+  FileUpload,
+  type FileUploadContextProps as ArkFileUploadContextProps,
+  type FileUploadRootProps as ArkFileUploadRootProps,
+  type FileUploadLabelProps as ArkFileUploadLabelProps,
+  type FileUploadDropzoneProps as ArkFileUploadDropzoneProps,
+  type FileUploadTriggerProps as ArkFileUploadTriggerProps,
+  type FileUploadClearTriggerProps as ArkFileUploadClearTriggerProps,
+  type FileUploadItemGroupProps as ArkFileUploadItemGroupProps,
+  type FileUploadItemProps as ArkFileUploadItemProps,
+  type FileUploadItemPreviewProps as ArkFileUploadItemPreviewProps,
+  type FileUploadItemPreviewImageProps as ArkFileUploadItemPreviewImageProps,
+  type FileUploadItemNameProps as ArkFileUploadItemNameProps,
+  type FileUploadItemSizeTextProps as ArkFileUploadItemSizeTextProps,
+  type FileUploadItemDeleteTriggerProps as ArkFileUploadItemDeleteTriggerProps,
+  type FileUploadHiddenInputProps as ArkFileUploadHiddenInputProps,
+} from '@ark-ui/react/file-upload'
+import {
+  fileUploader,
+  type FileUploaderVariantProps,
+} from 'styled-system/recipes'
+import {
+  createCerberusPrimitive,
+  type CerberusPrimitiveProps,
+} from '../../system/index'
+
+const { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(fileUploader)
+
+// Root
+
+export type FileUploadRootProps = CerberusPrimitiveProps<
+  ArkFileUploadRootProps & FileUploaderVariantProps
+>
+export const FileUploadRoot = withSlotRecipe(FileUpload.Root, 'root')
+
+// Dropzone
+
+export type FileUploadDropzoneProps =
+  CerberusPrimitiveProps<ArkFileUploadDropzoneProps>
+export const FileUploadDropzone = withSlotRecipe(
+  FileUpload.Dropzone,
+  'dropzone',
+)
+
+// Label
+
+export type FileUploadLabelProps =
+  CerberusPrimitiveProps<ArkFileUploadLabelProps>
+export const FileUploadLabel = withSlotRecipe(FileUpload.Label, 'label')
+
+// Trigger
+
+export type FileUploadTriggerProps =
+  CerberusPrimitiveProps<ArkFileUploadTriggerProps>
+export const FileUploadTrigger = withSlotRecipe(FileUpload.Trigger, 'trigger')
+
+// ClearTrigger
+
+export type FileUploadClearTriggerProps =
+  CerberusPrimitiveProps<ArkFileUploadClearTriggerProps>
+export const FileUploadClearTrigger = withSlotRecipe(
+  FileUpload.ClearTrigger,
+  'clearTrigger',
+)
+
+// ItemGroup
+
+export type FileUploadItemGroupProps =
+  CerberusPrimitiveProps<ArkFileUploadItemGroupProps>
+export const FileUploadItemGroup = withSlotRecipe(
+  FileUpload.ItemGroup,
+  'itemGroup',
+)
+
+// Item
+
+export type FileUploadItemProps = CerberusPrimitiveProps<ArkFileUploadItemProps>
+export const FileUploadItem = withSlotRecipe(FileUpload.Item, 'item')
+
+// ItemPreview
+
+export type FileUploadItemPreviewProps =
+  CerberusPrimitiveProps<ArkFileUploadItemPreviewProps>
+export const FileUploadItemPreview = withSlotRecipe(
+  FileUpload.ItemPreview,
+  'itemPreview',
+)
+
+// ItemPreviewImage
+
+export type FileUploadItemPreviewImageProps =
+  CerberusPrimitiveProps<ArkFileUploadItemPreviewImageProps>
+export const FileUploadItemPreviewImage = withSlotRecipe(
+  FileUpload.ItemPreviewImage,
+  'itemPreviewImage',
+)
+
+// ItemName
+
+export type FileUploadItemNameProps =
+  CerberusPrimitiveProps<ArkFileUploadItemNameProps>
+export const FileUploadItemName = withSlotRecipe(
+  FileUpload.ItemName,
+  'itemName',
+)
+
+// ItemSizeText
+
+export type FileUploadItemSizeTextProps =
+  CerberusPrimitiveProps<ArkFileUploadItemSizeTextProps>
+export const FileUploadItemSizeText = withSlotRecipe(
+  FileUpload.ItemSizeText,
+  'itemSizeText',
+)
+
+// ItemDeleteTrigger
+
+export type FileUploadItemDeleteTriggerProps =
+  CerberusPrimitiveProps<ArkFileUploadItemDeleteTriggerProps>
+export const FileUploadItemDeleteTrigger = withSlotRecipe(
+  FileUpload.ItemDeleteTrigger,
+  'itemDeleteTrigger',
+)
+
+// HiddenInput
+
+export type FileUploadHiddenInputProps =
+  CerberusPrimitiveProps<ArkFileUploadHiddenInputProps>
+export const FileUploadHiddenInput = withNoRecipe(FileUpload.HiddenInput)
+
+// Context
+
+export type FileUploadContextProps =
+  CerberusPrimitiveProps<ArkFileUploadContextProps>
+export const FileUploadContext = withNoRecipe(FileUpload.Context)
+
+// Icon
+
+export type FileUploadIconProps = CerberusPrimitiveProps<HTMLDivElement>
+export const FileUploadIcon = withSlotRecipe('div', 'icon')
+
+// Heading
+
+export type FileUploadHeadingProps =
+  CerberusPrimitiveProps<HTMLParagraphElement>
+export const FileUploadHeading = withSlotRecipe('p', 'heading')
+
+// Description
+
+export type FileUploadDescriptionProps =
+  CerberusPrimitiveProps<HTMLParagraphElement>
+export const FileUploadDescription = withSlotRecipe('p', 'description')
+
+// Types
+
+export type { UseFileUploadContext } from '@ark-ui/react'

package/src/components/file-upload/utils.ts

@@ -0,0 +1,20 @@
+import { FileUploadRootProps } from '@ark-ui/react'
+
+/**
+ * Format a given file type string into a human-readable format.
+ * @param accept FileUploadRootProps['accept']
+ * @returns string (e.g., ".png, .jpg, .svg")
+ */
+export function formatFileTypes(accept: FileUploadRootProps['accept']): string {
+  if (Array.isArray(accept)) return accept.join(', ')
+  if (typeof accept === 'object') return Object.keys(accept).join(', ')
+
+  if (typeof accept === 'string') {
+    if (accept.includes('/*')) {
+      return `any ${accept.split('/')[0]}`
+    }
+    return accept.split(',').join(', ')
+  }
+
+  return 'any file'
+}

package/src/components/select/select.tsx

@@ -2,7 +2,7 @@
 
 import { HStack } from 'styled-system/jsx'
 import { useCerberusContext } from '../../context/cerberus'
-import { Portal } from '../portal/index'
+import { splitProps } from '../../utils/index'
 import { Show } from '../show/index'
 import { SelectParts } from './parts'
 import type { RefObject } from 'react'
@@ -41,9 +41,7 @@ export interface SelectProps extends Omit<SelectRootProps, 'container'> {
    */
   placeholder?: string
   /**
-   * The container element to render the Select dropdown in. This is used
-   * to render the Select dropdown in a specific context, such as a modal.
-   * @default document.body
+   * @deprecated - this is no longer needed
    */
   container?: RefObject<HTMLElement | null>
 }
@@ -80,7 +78,10 @@ export interface SelectProps extends Omit<SelectRootProps, 'container'> {
  * }
  */
 export function Select(props: SelectProps) {
-  const { collection, container, placeholder, ...rootProps } = props
+  const [{ collection, placeholder }, rootProps] = splitProps(props, [
+    'collection',
+    'placeholder',
+  ])
 
   const { icons } = useCerberusContext()
   const { selectArrow: SelectArrow, invalid: InvalidIcon } = icons
@@ -102,13 +103,11 @@ export function Select(props: SelectProps) {
         </SelectParts.Trigger>
       </SelectParts.Control>
 
-      <Portal container={container}>
-        <SelectParts.Positioner>
-          <SelectParts.Content size={rootProps.size}>
-            {props.children}
-          </SelectParts.Content>
-        </SelectParts.Positioner>
-      </Portal>
+      <SelectParts.Positioner>
+        <SelectParts.Content size={rootProps.size}>
+          {props.children}
+        </SelectParts.Content>
+      </SelectParts.Positioner>
 
       <SelectParts.HiddenSelect />
     </SelectParts.Root>

package/src/context/confirm-modal.tsx

@@ -23,6 +23,7 @@ import {
   DialogHeading,
   DialogProvider,
   type OpenChangeDetails,
+  type DialogRootProps,
 } from '../components/dialog'
 import { useCerberusContext } from './cerberus'
 
@@ -89,7 +90,7 @@ export interface ConfirmModalValue {
 
 const ConfirmModalContext = createContext<ConfirmModalValue | null>(null)
 
-export type ConfirmModalProviderProps = PropsWithChildren<unknown>
+export type ConfirmModalProviderProps = PropsWithChildren<DialogRootProps>
 
 /**
  * Provides a confirm modal to the app.
@@ -119,9 +120,12 @@ export type ConfirmModalProviderProps = PropsWithChildren<unknown>
 export function ConfirmModal(
   props: PropsWithChildren<ConfirmModalProviderProps>,
 ) {
+  const { children, ...rootProps } = props
   const [open, setOpen] = useState<boolean>(false)
   const [content, setContent] = useState<ShowConfirmModalOptions | null>(null)
+
   const resolveRef = useRef<ShowResult>(null)
+
   const showAvatar = content?.showAvatar ?? true
   const kind = content?.kind ?? 'non-destructive'
 
@@ -176,13 +180,14 @@ export function ConfirmModal(
 
   return (
     <ConfirmModalContext.Provider value={value}>
-      {props.children}
+      {children}
 
       <DialogProvider
         lazyMount
         open={open}
         onOpenChange={handleOpenChange}
         unmountOnExit
+        {...rootProps}
       >
         <Dialog
           size="sm"

package/src/context/prompt-modal.tsx

@@ -27,7 +27,8 @@ import {
   DialogDescription,
   DialogHeading,
   DialogProvider,
-} from '../components/dialog'
+  DialogRootProps,
+} from '../components/dialog/index'
 import { useCerberusContext } from './cerberus'
 
 /**
@@ -87,7 +88,7 @@ export interface PromptModalValue {
 
 const PromptModalContext = createContext<PromptModalValue | null>(null)
 
-export type PromptModalProviderProps = PropsWithChildren<unknown>
+export type PromptModalProviderProps = PropsWithChildren<DialogRootProps>
 
 /**
  * Provides a prompt modal to the app.
@@ -119,11 +120,14 @@ export type PromptModalProviderProps = PropsWithChildren<unknown>
 export function PromptModal(
   props: PropsWithChildren<PromptModalProviderProps>,
 ) {
-  const resolveRef = useRef<PromptShowResult>(null)
+  const { children, ...rootProps } = props
+
   const [open, setOpen] = useState<boolean>(false)
   const [content, setContent] = useState<ShowPromptModalOptions | null>(null)
   const [inputValue, setInputValue] = useState<string>('')
 
+  const resolveRef = useRef<PromptShowResult>(null)
+
   const { icons } = useCerberusContext()
   const { promptModal: PromptIcon } = icons
 
@@ -172,13 +176,14 @@ export function PromptModal(
 
   return (
     <PromptModalContext.Provider value={value}>
-      {props.children}
+      {children}
 
       <DialogProvider
         lazyMount
         open={open}
         onOpenChange={(e) => setOpen(e.open)}
         unmountOnExit
+        {...rootProps}
       >
         <Dialog
           size="sm"

package/src/index.client.ts

@@ -7,6 +7,8 @@ export {
   useAccordion,
   DialogRootProvider,
   useDialog,
+  FileUploadRootProvider,
+  useFileUpload,
   // utilities
   ClientOnly,
   DownloadTrigger,