@gentleduck/registry-ui 0.2.1

package/src/toggle-group/toggle-group.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+import { cn } from '@gentleduck/libs/cn'
+import * as ToggleGroupPrimitive from '@gentleduck/primitives/toggle-group'
+import type { VariantProps } from '@gentleduck/variants'
+import * as React from 'react'
+import { toggleVariants } from '../toggle/toggle.constants'
+
+interface ToggleGroupContextProps extends VariantProps<typeof toggleVariants> {}
+
+const ToggleGroupContext = React.createContext<ToggleGroupContextProps>({
+  size: 'default',
+  variant: 'default',
+})
+
+type ToggleGroupElement = React.ComponentRef<typeof ToggleGroupPrimitive.Root>
+type ToggleGroupProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants>
+
+const ToggleGroup: React.ForwardRefExoticComponent<ToggleGroupProps & React.RefAttributes<ToggleGroupElement>> =
+  React.forwardRef<ToggleGroupElement, ToggleGroupProps>(
+    ({ className, variant = 'default', size = 'default', children, ...props }, ref) => {
+      return (
+        <ToggleGroupContext.Provider value={{ size, variant }}>
+          <ToggleGroupPrimitive.Root
+            className={cn(
+              'isolate flex items-center justify-center rounded-md *:first:rounded-s-md *:last:rounded-e-md',
+              variant === 'outline' &&
+                '[&>*:first-child]:border-e-0 [&>*:not(:first-child):not(:last-child)]:border-e-0',
+              className,
+            )}
+            ref={ref}
+            data-slot="toggle-group"
+            {...props}>
+            {children}
+          </ToggleGroupPrimitive.Root>
+        </ToggleGroupContext.Provider>
+      )
+    },
+  )
+ToggleGroup.displayName = 'ToggleGroup'
+
+type ToggleGroupItemElement = React.ComponentRef<typeof ToggleGroupPrimitive.Item>
+type ToggleGroupItemProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>
+const ToggleGroupItem: React.ForwardRefExoticComponent<
+  ToggleGroupItemProps & React.RefAttributes<ToggleGroupItemElement>
+> = React.forwardRef<ToggleGroupItemElement, ToggleGroupItemProps>(
+  ({ className, variant, size, children, ...props }, ref) => {
+    const context = React.useContext(ToggleGroupContext)
+
+    return (
+      <ToggleGroupPrimitive.Item
+        className={cn(
+          toggleVariants({ variant: variant || context.variant, size: size || context.size }),
+          'relative rounded-none focus-visible:z-10 focus-visible:ring-offset-0',
+          className,
+        )}
+        ref={ref}
+        data-slot="toggle-group-item"
+        {...props}>
+        {children}
+      </ToggleGroupPrimitive.Item>
+    )
+  },
+)
+ToggleGroupItem.displayName = 'ToggleGroupItem'
+
+export { ToggleGroup, ToggleGroupItem }

package/src/tooltip/index.ts

@@ -0,0 +1 @@
+export * from './tooltip'

package/src/tooltip/tooltip.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import { cn } from '@gentleduck/libs/cn'
+import * as TooltipPrimitive from '@gentleduck/primitives/tooltip'
+import * as React from 'react'
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ComponentRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'fade-in-0 zoom-in-95 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 origin-(--gentleduck-tooltip-content-transform-origin) animate-in overflow-hidden rounded-md border bg-background px-3 py-1.5 text-base text-foreground data-[state=closed]:animate-out',
+        'transition-all transition-discrete duration-[200ms,150ms] ease-(--duck-motion-ease)',
+        className,
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/upload/index.ts

@@ -0,0 +1 @@
+export * from './upload'

package/src/upload/upload.constants.tsx

@@ -0,0 +1,19 @@
+import { File, FileAudio, FileImage, FileText, FileVideo } from 'lucide-react'
+
+export enum FileTypeEnum {
+  Audio = 'audio',
+  Text = 'text',
+  Image = 'image',
+  Video = 'video',
+  Pdf = 'pdf',
+  Unknown = 'unknown',
+}
+
+export const FILE_TYPE_ICONS: Record<FileTypeEnum, React.JSX.Element> = {
+  [FileTypeEnum.Audio]: <FileAudio aria-hidden="true" className="w-8 h-8" />,
+  [FileTypeEnum.Text]: <FileText aria-hidden="true" className="w-8 h-8" />,
+  [FileTypeEnum.Image]: <FileImage aria-hidden="true" className="w-8 h-8" />,
+  [FileTypeEnum.Video]: <FileVideo aria-hidden="true" className="w-8 h-8" />,
+  [FileTypeEnum.Pdf]: <FileText aria-hidden="true" className="w-8 h-8" />,
+  [FileTypeEnum.Unknown]: <File aria-hidden="true" className="w-8 h-8" />,
+}

package/src/upload/upload.libs.ts

@@ -0,0 +1,97 @@
+import { toast } from 'sonner'
+import { uuidv7 } from 'uuidv7'
+import { FileTypeEnum } from './upload.constants'
+import { FileType } from './upload.types'
+
+export const getFileType = (type: string): string => {
+  if (!type) return FileTypeEnum.Unknown
+  if (type.startsWith('audio/')) return FileTypeEnum.Audio
+  if (type.startsWith('text/')) return FileTypeEnum.Text
+  if (type.startsWith('image/')) return FileTypeEnum.Image
+  if (type.startsWith('video/')) return FileTypeEnum.Video
+  if (type.startsWith('application/pdf')) return FileTypeEnum.Pdf
+  return FileTypeEnum.Unknown
+}
+
+export const getAttachmentsToState = ({
+  e,
+  setAttachmentsState,
+}: {
+  e: React.ChangeEvent<HTMLInputElement>
+  setAttachmentsState: React.Dispatch<React.SetStateAction<FileType[]>>
+}) => {
+  const files = e.currentTarget.files
+
+  if (!files) return toast.error('Please select a file')
+
+  const newAttachments: FileType[] = []
+
+  for (let i = 0; i < files.length; i++) {
+    const file = files[i]
+
+    if (!file) return
+    // if (file !== undefined && file.size > 10 * 1024 * 1024) {
+    //   toast.error(
+    //     `File has exceeded the max size: ${file.name.slice(0, 15)}...`,
+    //   )
+    //   return
+    //   // continue // Skip this file and continue with the next
+    // }
+
+    const attachment: FileType = {
+      file: file,
+      id: uuidv7(),
+      name: file.name,
+      size: file.size,
+      type: file.type,
+      url: null,
+    }
+
+    newAttachments.push(attachment)
+  }
+
+  setAttachmentsState((prev) => [...prev, ...newAttachments])
+  e.currentTarget.value = ''
+}
+
+export const downloadAttachment = async ({ attachment }: { attachment: FileType }) => {
+  if (attachment.file) {
+    const file: Blob = attachment.file as Blob
+    return download(file, attachment.name ?? 'image.jpg')
+  }
+
+  if (attachment.url) {
+    const file = await fetchBlob({
+      url: 'https://cdn.dribbble.com/userupload/15140814/file/original-22eddfd50ce84be4acb8bbbd50cf7840.jpg?resize=1600x1200',
+    })
+    return download(file ?? new Blob([]), attachment.name ?? 'image.jpg')
+  }
+}
+
+function download(blob: Blob, name: string) {
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+
+  a.href = url
+  a.download = new Date().getTime() + '_' + name
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  URL.revokeObjectURL(url)
+}
+
+export const fetchBlob = async ({ url }: { url: string }): Promise<Blob | null> => {
+  try {
+    const response = await fetch(url)
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch audio: ${response.statusText} (status: ${response.status})`)
+    }
+
+    const blob = await response.blob()
+    return blob
+  } catch (error) {
+    console.error('Error fetching audio:', error)
+    return null
+  }
+}

package/src/upload/upload.tsx

@@ -0,0 +1,340 @@
+// 'use client'
+//
+// import { cn } from '@gentleduck/libs/cn'
+// import { filesize } from 'filesize'
+// import { Download, Ellipsis, Trash, Upload as UploadIcon } from 'lucide-react'
+// import { X } from 'lucide-react'
+// import React from 'react'
+// import { uuidv7 } from 'uuidv7'
+// import { AlertDialogSheet } from '../alert-dialog'
+// import { Button, buttonVariants } from '../button'
+// import { ContextMenu, ContextMenuTrigger } from '../context-menu'
+// import { Input } from '../input'
+// import { ScrollArea } from '../scroll-area'
+// import { FILE_TYPE_ICONS } from './upload.constants'
+// import { downloadAttachment, getAttachmentsToState } from './upload.libs'
+// import { getFileType } from './upload.libs'
+// import {
+//   FileType,
+//   UploadContentProps,
+//   UploadContextType,
+//   UploadInputProps,
+//   UploadItemProps,
+//   UploadProps,
+//   UploadTriggerProps,
+//   UploadtItemRemoveProps,
+// } from './upload.types'
+// import { Avatar } from '../avatar'
+// import { DropdownMenuView } from '../dropdown-menu'
+//
+// const UploadContext = React.createContext<UploadContextType<FileType> | null>(null)
+//
+// export const useUploadContext = (): UploadContextType<FileType> => {
+//   const context = React.useContext(UploadContext)
+//   if (!context) {
+//     throw new Error('useUploadContext must be used within an UploadProvider')
+//   }
+//   return context
+// }
+//
+// export const UploadProvider = ({ children }: { children: React.ReactNode }): JSX.Element => {
+//   const [attachments, setAttachments] = React.useState<FileType[]>([])
+//   const [attachmentsState, setAttachmentsState] = React.useState<FileType[]>([])
+//
+//   return (
+//     <UploadContext.Provider
+//       value={{
+//         attachments,
+//         setAttachments,
+//         attachmentsState,
+//         setAttachmentsState,
+//       }}>
+//       {children}
+//     </UploadContext.Provider>
+//   )
+// }
+//
+// export const Upload = ({ children, trigger, content }: UploadProps): JSX.Element => {
+//   const { setAttachments, attachmentsState, setAttachmentsState } = useUploadContext()
+//   return (
+//     <>
+//       {children ? (
+//         children
+//       ) : (
+//         <AlertDialogSheet
+//           header={{
+//             head: 'Upload',
+//             description: 'upload your attahment here and submit.',
+//           }}
+//           actions={{
+//             continue: () => {
+//               setAttachments([])
+//               setAttachmentsState([])
+//             },
+//           }}
+//           footer={{
+//             submit: {
+//               children: (
+//                 <Button
+//                   disabled={attachmentsState.length === 0}
+//                   className="px-6"
+//                   onClick={() => {
+//                     setAttachments((prev) => [...prev, ...attachmentsState])
+//                     setAttachmentsState([])
+//                   }}>
+//                   Submit
+//                 </Button>
+//               ),
+//             },
+//             cancel: {
+//               children: (
+//                 <Button variant="outline" className="px-6">
+//                   Cancel
+//                 </Button>
+//               ),
+//             },
+//           }}
+//           state={attachmentsState.length > 0}
+//           trigger={{ children: trigger }}
+//           content={{ children: content }}
+//         />
+//       )}
+//     </>
+//   )
+// }
+//
+// export const UploadTrigger = ({ className, children, ref, ...props }: UploadTriggerProps) => (
+//   <div className={cn(className)} ref={ref} {...props}>
+//     {children}
+//   </div>
+// )
+//
+// export const UploadInput = ({ className, children, ref, ...props }: UploadInputProps) => {
+//   const { setAttachmentsState } = useUploadContext()
+//
+//   return (
+//     <div className={cn(className)} ref={ref} {...props}>
+//       <ContextMenu>
+//         <ContextMenuTrigger className="relative flex flex-col items-center justify-center w-full h-64 rounded-md border border-dashed border-border text-sm leading-5 transition-colors duration-100 ease-in-out hover:bg-muted/10">
+//           <div className="grid place-items-center gap-4">
+//             <UploadIcon className="size-[30px]" />
+//             <span>Click or Drag to Upload</span>
+//           </div>
+//           <Input
+//             placeholder="Filter files..."
+//             type="file"
+//             className="absolute w-full h-full opacity-0 cursor-pointer"
+//             multiple={true}
+//             onChange={(e) => getAttachmentsToState({ e, setAttachmentsState })}
+//           />
+//         </ContextMenuTrigger>
+//       </ContextMenu>
+//       <p className="mt-2 text-muted-foreground text-[.9rem]">supports all types of files.</p>
+//     </div>
+//   )
+// }
+//
+// export const UploadContent = ({ className, children, ref, ...props }: UploadContentProps) => {
+//   const { attachmentsState, setAttachmentsState } = useUploadContext()
+//
+//   return (
+//     <ScrollArea className={cn('flex flex-col gap-2 max-h-[39ch] md:max-h-[43ch]', className)} ref={ref} {...props}>
+//       {children}
+//       <div className="flex flex-col gap-2">
+//         {attachmentsState.map((attachment) => {
+//           return (
+//             <UploadItem key={attachment.id} attachment={attachment}>
+//               <UploadtItemRemove
+//                 className="absolute top-1/2 -translate-y-1/2 right-2"
+//                 onClick={() => {
+//                   setAttachmentsState((prev) => prev.filter((item) => item.id !== attachment.id))
+//                 }}
+//               />
+//             </UploadItem>
+//           )
+//         })}
+//       </div>
+//     </ScrollArea>
+//   )
+// }
+//
+// export const UploadItem = React.forwardRef<HTMLDivElement, UploadItemProps>(
+//   ({ attachment, children, className, ...props }, ref) => {
+//     const fileType = getFileType(attachment.file.type)
+//
+//     return (
+//       <div
+//         className={cn('relative flex items-center gap-4 bg-secondary/20 rounded-md p-2', className)}
+//         ref={ref}
+//         {...props}>
+//         <div className="flex items-center gap-4">
+//           <div className="relative">{FILE_TYPE_ICONS[fileType]}</div>
+//           <div className="grid items-start">
+//             <h3 className="inline-block text-[.9rem] truncate max-w-[200px]">{attachment.name || 'Empty File'}</h3>
+//             <p className="inline-block truncate text-semibold text-[.8rem] max-w-[300px]">
+//               {filesize(attachment.file ? +attachment.file.size : 0, {
+//                 round: 0,
+//               })}
+//             </p>
+//           </div>
+//         </div>
+//         {children}
+//       </div>
+//     )
+//   },
+// )
+//
+// /**
+//  * UploadtItemRemove component represents a remove button for an uploaded file item.
+//  * It is typically used for removing a file from the upload list.
+//  *
+//  * @param {Object} props - The properties passed to the component.
+//  * @param {string} [props.className] - Optional additional class names.
+//  * @param {React.Ref} ref - The ref forwarded to the underlying div element.
+//  *
+//  * @returns {React.Element} The rendered component.
+//  */
+// export const UploadtItemRemove = React.forwardRef<HTMLDivElement, UploadtItemRemoveProps>(
+//   ({ className, ...props }, ref) => {
+//     return (
+//       <div
+//         className={cn(
+//           'size-4 rounded-md focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 cursor-pointer',
+//           className,
+//         )}
+//         ref={ref}
+//         {...props}>
+//         <X className="w-4 h-4" />
+//       </div>
+//     )
+//   },
+// )
+//
+// export const UploadItemsPreview = () => {
+//   const { attachments } = useUploadContext()
+//
+//   return attachments.length > 0 ? (
+//     <div className="grid grid-cols-6 justify-start items-start place-content-start gap-2 w-full border border-border min-h-[400px] p-4 rounded-lg">
+//       {attachments.map((attachment) => {
+//         const fileType = getFileType(attachment.file.type)
+//
+//         // // If the file is a File object, generate a URL for preview
+//         // const src =
+//         //   typeof attachment.file === 'string'
+//         //     ? attachment.file
+//         //     : URL.createObjectURL(attachment.file as Blob)
+//
+//         return (
+//           <div
+//             className={cn(
+//               'relative bg-secondary/20 rounded-md overflow-hidden w-full flex flex-col place-content-center gap-4 h-[100px] border border-border',
+//             )}>
+//             <div>
+//               <div className="relative [&_svg]:size-12 [&_svg]:mx-auto w-full">{FILE_TYPE_ICONS[fileType]}</div>
+//             </div>
+//             <DropdownMenuView
+//               trigger={{
+//                 icon: <Ellipsis className="h-4 w-4 rounded-sm" />,
+//                 variant: 'outline',
+//                 size: 'icon',
+//                 className: 'h-4 w-6 absolute bottom-2 right-2',
+//               }}
+//               content={{
+//                 options: {
+//                   itemType: 'label',
+//                   optionsData: [
+//                     {
+//                       actionType: 'item',
+//                       children: 'Download',
+//                       icon: <Download className="h-4 w-4 rounded-sm" />,
+//                       onClick: () => {
+//                         downloadAttachment({ attachment: attachment! })
+//                       },
+//                     },
+//                     {
+//                       actionType: 'item',
+//                       children: 'Delete',
+//                       className: 'text-red-500 bg-red-500/10',
+//                       icon: <Trash className="h-4 w-4 rounded-sm" />,
+//
+//                       onClick: () => {},
+//                     },
+//                   ],
+//                 },
+//               }}
+//             />
+//           </div>
+//         )
+//       })}
+//     </div>
+//   ) : (
+//     <div className="flex items-center w-full border border-border min-h-[400px] p-4 rounded-lg">
+//       <p className="text-center w-full">There's no attachments yet uploaded.</p>
+//     </div>
+//   )
+// }
+//
+// export const UploadProfile = () => {
+//   const { attachments, setAttachments } = useUploadContext() ?? {}
+//   const src =
+//     attachments.length > 0
+//       ? typeof attachments?.[0]?.file === 'string'
+//         ? attachments[0].file
+//         : URL.createObjectURL(attachments?.[0]?.file as Blob)
+//       : null
+//
+//   return (
+//     <Button className="relative cursor-pointer w-16 h-16 rounded-full" variant={'outline'}>
+//       <Input
+//         placeholder="Filter files..."
+//         type="file"
+//         className="absolute w-full h-full opacity-0 cursor-pointer"
+//         multiple={false}
+//         onChange={(e) => {
+//           const file = e.currentTarget.files?.[0]
+//           if (file) {
+//             setAttachments([
+//               {
+//                 id: uuidv7(),
+//                 file: file,
+//                 name: file.name,
+//                 url: null,
+//                 type: file.type,
+//                 size: file.size,
+//               },
+//             ])
+//           }
+//         }}
+//       />
+//       <Avatar className="w-16 h-16 pointer-events-none" src={src ?? '/avatars/02.png'} />
+//       <span
+//         className={cn(
+//           buttonVariants({ variant: 'outline' }),
+//           'absolute rounded-full p-2 -bottom-1 -left-1 hover:bg-background h-fit pointer-events-none',
+//         )}>
+//         <UploadIcon className="!size-3" />
+//       </span>
+//     </Button>
+//   )
+// }
+//
+// export const UploadDirectButton = () => {
+//   const { setAttachments } = useUploadContext() ?? {}
+//
+//   return (
+//     <Button className="relative" variant={'outline'} size={'sm'} icon={<UploadIcon />}>
+//       <Input
+//         placeholder="Filter files..."
+//         type="file"
+//         className="absolute w-full h-full opacity-0 cursor-pointer"
+//         multiple={true}
+//         onChange={(e) => getAttachmentsToState({ e, setAttachmentsState: setAttachments })}
+//       />
+//       Upload file
+//     </Button>
+//   )
+// }
+
+import { type Direction, useDirection } from '@gentleduck/primitives/direction'
+
+export const useUploadDirection = (dir?: 'ltr' | 'rtl') => useDirection(dir as Direction)

package/src/upload/upload.types.ts

@@ -0,0 +1,44 @@
+import { Button } from '../button'
+import { ScrollArea } from '../scroll-area'
+
+export type FileType = {
+  id: string
+  file: File
+  name: string
+  url: string | null
+  type: string
+  size: number
+}
+
+export type UploadRenameAttachmentButtonProps = {
+  attachment: FileType[]
+}
+
+export interface UploadContextType<T extends Record<string, any>> {
+  attachments: FileType[]
+  setAttachments: React.Dispatch<React.SetStateAction<FileType[]>>
+  attachmentsState: T[]
+  setAttachmentsState: React.Dispatch<React.SetStateAction<T[]>>
+}
+
+export interface UploadInputProps extends React.HTMLProps<HTMLDivElement> {}
+
+export interface UploadItemProps extends React.HTMLProps<HTMLDivElement> {
+  attachment: FileType
+}
+
+export interface UploadProps extends Omit<React.HTMLProps<HTMLDivElement>, 'content'> {
+  trigger: React.ReactNode
+  content: React.ReactNode
+}
+
+export interface UploadTriggerProps extends React.HTMLProps<HTMLDivElement> {}
+
+export interface UploadtItemRemoveProps extends React.HTMLProps<HTMLDivElement> {}
+
+export interface UploadContentProps extends React.ComponentPropsWithRef<typeof ScrollArea> {}
+
+export interface StateWithExtraFeatures<T extends Record<string, any>> {
+  data: T | null
+  state: 'pending' | 'success' | 'error'
+}

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "incremental": false,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "lib": ["ES2022", "dom", "dom.iterable"],
+    "module": "preserve",
+    "moduleResolution": "bundler",
+    "outDir": "./dist",
+    "paths": {
+      "~/*": ["./*"]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "rootDir": "./"
+  },
+  "exclude": ["node_modules", "dist", "./src/_old", "**/*.tsbuildinfo", "tsconfig.tsbuildinfo"],
+  "extends": "@gentleduck/typescript-config/base.json",
+  "include": ["./**/*.ts", "./**/*.tsx"]
+}