@xjur-ui/react 2.0.0 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xjur-ui/react",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "type": "module",
   "description": "React components for XJur Design System",
   "main": "dist/index.js",
@@ -10,25 +10,18 @@
     "./styles": "./dist/index.css",
     "./css": "./dist/index.css",
     "./hooks": "./dist/hooks/index.js",
-    "./button": "./dist/components/button.js",
     "./icon": "./dist/components/icon.js",
     "./typography": "./dist/components/typography.js",
     "./logo": "./dist/components/logo.js",
-    "./input": "./dist/components/input.js",
-    "./otp-input": "./dist/components/otp-input.js",
     "./collapsible": "./dist/components/collapsible.js",
     "./list": "./dist/components/list.js",
     "./tabs": "./dist/components/tabs.js",
-    "./calendar": "./dist/components/calendar.js",
-    "./checkbox": "./dist/components/checkbox.js",
-    "./radio": "./dist/components/radio.js",
-    "./switch": "./dist/components/switch.js",
-    "./select": "./dist/components/select.js",
-    "./search-input": "./dist/components/search-input.js",
     "./tag": "./dist/components/tag.js",
     "./chip": "./dist/components/chip.js",
     "./avatar": "./dist/components/avatar.js",
-    "./date-picker": "./dist/components/date-picker.js",
+    "./dialog": "./dist/components/dialog.js",
+    "./upload": "./dist/components/upload.js",
+    "./selection-bar": "./dist/components/selection-bar.js",
     "./dropdown-menu": "./dist/components/dropdown-menu.js",
     "./divider": "./dist/components/divider.js",
     "./sheet": "./dist/components/sheet.js",
@@ -36,11 +29,27 @@
     "./table": "./dist/components/table.js",
     "./avatar-group": "./dist/components/avatar-group.js",
     "./skeleton": "./dist/components/skeleton.js",
-    "./rich-editor": "./dist/components/rich-editor.js",
     "./tooltip": "./dist/components/tooltip.js",
-    "./status": "./dist/components/status.js"
+    "./status": "./dist/components/status.js",
+    "./horizontal-scroll": "./dist/components/horizontal-scroll.js",
+    "./breadcrumb": "./dist/components/breadcrumb.js",
+    "./dnd": "./dist/components/drag-and-drop/index.js",
+    "./full-calendar": "./dist/components/full-calendar/index.js",
+    "./button": "./dist/components/form/button.js",
+    "./calendar": "./dist/components/form/calendar.js",
+    "./checkbox": "./dist/components/form/checkbox.js",
+    "./date-picker": "./dist/components/form/date-picker.js",
+    "./input": "./dist/components/form/input.js",
+    "./otp-input": "./dist/components/form/otp-input.js",
+    "./radio": "./dist/components/form/radio.js",
+    "./rich-editor": "./dist/components/form/rich-editor.js",
+    "./search-input": "./dist/components/form/search-input.js",
+    "./select": "./dist/components/form/select.js",
+    "./switch": "./dist/components/form/switch.js"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-collapsible": "^1.1.12",

package/src/components/breadcrumb.tsx

@@ -0,0 +1,119 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cx } from '@xjur-ui/util'
+import { Icon } from './icon'
+import { Typography, type TypographyProps } from './typography'
+
+export function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+}
+
+export function BreadcrumbList({
+  className,
+  ...props
+}: React.ComponentProps<'ol'>) {
+  return (
+    <ol
+      className={cx(
+        'text-neutral-placeholder flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
+        className
+      )}
+      data-slot="breadcrumb-list"
+      {...props}
+    />
+  )
+}
+
+export function BreadcrumbItem({
+  className,
+  ...props
+}: React.ComponentProps<'li'>) {
+  return (
+    <li
+      className={cx('inline-flex items-center gap-1.5', className)}
+      data-slot="breadcrumb-item"
+      {...props}
+    />
+  )
+}
+
+export function BreadcrumbLink({
+  asChild,
+  className,
+  variant = 'headline',
+  size = 'sm',
+  ...props
+}: React.ComponentProps<'a'> & {
+  asChild?: boolean
+  href?: string
+  variant?: TypographyProps['variant']
+  size?: TypographyProps['size']
+}) {
+  const Comp = asChild ? Slot : 'a'
+
+  return (
+    <Typography asChild={true} size={size} variant={variant}>
+      <Comp
+        className={cx('hover:text-neutral-dark transition-colors', className)}
+        data-slot="breadcrumb-link"
+        {...props}
+      />
+    </Typography>
+  )
+}
+
+export function BreadcrumbPage({
+  variant = 'headline',
+  size = 'sm',
+  className,
+  ...props
+}: React.ComponentProps<typeof Typography>) {
+  return (
+    <Typography
+      aria-current="page"
+      aria-disabled="true"
+      className={cx('text-neutral-dark font-normal', className)}
+      data-slot="breadcrumb-page"
+      role="link"
+      size={size}
+      variant={variant}
+      {...props}
+    />
+  )
+}
+
+export function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'li'>) {
+  return (
+    <li
+      aria-hidden="true"
+      className={cx('[&>span]:text-size-title-lg', className)}
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      {...props}
+    >
+      {children ?? <Icon name="chevron_right" />}
+    </li>
+  )
+}
+
+export function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      aria-hidden="true"
+      className={cx('flex size-9 items-center justify-center', className)}
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      {...props}
+    >
+      <Icon className="size-4" name="more_horiz" />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}

package/src/components/dialog.tsx

@@ -0,0 +1,242 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { cva, cx, type ClassVariantProps } from '@xjur-ui/util'
+import { forwardRef, type ComponentProps } from 'react'
+import { Button } from './form/button'
+import { Typography } from './typography'
+import { Icon } from './icon'
+
+const dialogOverlayVariants = cva([
+  'fixed inset-0 z-50 bg-black/50 backdrop-blur-sm',
+  'data-[state=open]:animate-in data-[state=closed]:animate-out',
+  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0'
+])
+
+const dialogContentVariants = cva(
+  [
+    'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-layer-1-idle p-6 shadow-lg duration-200',
+    'data-[state=open]:animate-in data-[state=closed]:animate-out',
+    'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+    'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+    'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]',
+    'data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
+    'sm:rounded-lg'
+  ],
+  {
+    variants: {
+      size: {
+        sm: 'max-w-sm',
+        md: 'max-w-lg',
+        lg: 'max-w-2xl',
+        xl: 'max-w-4xl'
+      }
+    },
+    defaultVariants: {
+      size: 'md'
+    }
+  }
+)
+
+const dialogHeaderVariants = cva([
+  'flex flex-col space-y-1.5 text-center sm:text-left'
+])
+
+const dialogFooterVariants = cva([
+  'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2'
+])
+
+const dialogTitleVariants = cva([
+  'text-lg font-semibold leading-none tracking-tight'
+])
+
+const dialogDescriptionVariants = cva(['text-sm text-neutral-dark'])
+
+export const Dialog = DialogPrimitive.Root
+
+export const DialogTrigger = DialogPrimitive.Trigger
+
+export const DialogPortal = DialogPrimitive.Portal
+
+export const DialogClose = DialogPrimitive.Close
+
+export interface DialogOverlayProps
+  extends ComponentProps<typeof DialogPrimitive.Overlay>,
+    ClassVariantProps<typeof dialogOverlayVariants> {}
+
+export const DialogOverlay = forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  DialogOverlayProps
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    className={cx(dialogOverlayVariants(), className)}
+    ref={ref}
+    {...props}
+  />
+))
+
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+export interface DialogContentProps
+  extends ComponentProps<typeof DialogPrimitive.Content>,
+    ClassVariantProps<typeof dialogContentVariants> {}
+
+export const DialogContent = forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  DialogContentProps
+>(({ className, children, size, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      className={cx(dialogContentVariants({ size }), className)}
+      ref={ref}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none">
+        <Icon className="h-4 w-4" name="close" />
+        <span className="sr-only">Fechar</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+export interface DialogHeaderProps
+  extends ComponentProps<'div'>,
+    ClassVariantProps<typeof dialogHeaderVariants> {}
+
+export const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      className={cx(dialogHeaderVariants(), className)}
+      ref={ref}
+      {...props}
+    />
+  )
+)
+
+DialogHeader.displayName = 'DialogHeader'
+
+export interface DialogFooterProps
+  extends ComponentProps<'div'>,
+    ClassVariantProps<typeof dialogFooterVariants> {}
+
+export const DialogFooter = forwardRef<HTMLDivElement, DialogFooterProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      className={cx(dialogFooterVariants(), className)}
+      ref={ref}
+      {...props}
+    />
+  )
+)
+
+DialogFooter.displayName = 'DialogFooter'
+
+export interface DialogTitleProps
+  extends ComponentProps<typeof DialogPrimitive.Title>,
+    ClassVariantProps<typeof dialogTitleVariants> {}
+
+export const DialogTitle = forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  DialogTitleProps
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    className={cx(dialogTitleVariants(), className)}
+    ref={ref}
+    {...props}
+  />
+))
+
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+export interface DialogDescriptionProps
+  extends ComponentProps<typeof DialogPrimitive.Description>,
+    ClassVariantProps<typeof dialogDescriptionVariants> {}
+
+export const DialogDescription = forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  DialogDescriptionProps
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    className={cx(dialogDescriptionVariants(), className)}
+    ref={ref}
+    {...props}
+  />
+))
+
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export interface DeleteDialogProps {
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  title?: string
+  description?: string
+  onConfirm?: () => void
+  onCancel?: () => void
+  confirmText?: string
+  cancelText?: string
+  isLoading?: boolean
+}
+
+export function DeleteDialog({
+  open,
+  onOpenChange,
+  title = 'Excluir documento',
+  description = 'Você tem certeza que deseja excluir este documento permanentemente?',
+  onConfirm,
+  onCancel,
+  confirmText = 'Excluir permanentemente',
+  cancelText = 'Cancelar',
+  isLoading = false
+}: DeleteDialogProps) {
+  const handleCancel = () => {
+    onCancel?.()
+    onOpenChange?.(false)
+  }
+
+  const handleConfirm = () => {
+    onConfirm?.()
+  }
+
+  const handleOpenChange = (newOpen: boolean) => {
+    onOpenChange?.(newOpen)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent size="sm">
+        <DialogHeader>
+          <DialogTitle>
+            <Typography size="md" variant="title" weight="semibold">
+              {title}
+            </Typography>
+          </DialogTitle>
+          <DialogDescription>
+            <Typography size="md" variant="body">
+              {description}
+            </Typography>
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button
+            appearance="ghost"
+            disabled={isLoading}
+            variant="tertiary"
+            onClick={handleCancel}
+          >
+            {cancelText}
+          </Button>
+          <Button
+            appearance="solid"
+            disabled={isLoading}
+            variant="destructive"
+            onClick={handleConfirm}
+          >
+            {isLoading ? 'Excluindo...' : confirmText}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/drag-and-drop/drag-handle.tsx

@@ -0,0 +1,46 @@
+import { createContext, use, type ComponentProps } from 'react'
+import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities'
+import { Slot } from '@radix-ui/react-slot'
+import { cx } from '@xjur-ui/util'
+import { useDndContext } from '@dnd-kit/core'
+
+interface DragHandleContextType {
+  listeners?: SyntheticListenerMap
+  setActivatorNodeRef: (el: HTMLElement | null) => void
+}
+
+export const DragHandlerContext = createContext<DragHandleContextType>(
+  {} as DragHandleContextType
+)
+
+export function DragHandle({
+  className,
+  asChild,
+  ...props
+}: ComponentProps<'button'> & {
+  asChild?: boolean
+}) {
+  const { active } = useDndContext()
+  const context = use(DragHandlerContext)
+
+  if (!context) {
+    throw new Error('DragHandle must be used within a DragHandlerContext')
+  }
+
+  const { listeners, setActivatorNodeRef } = context
+
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp
+      className={cx(
+        className,
+        'cursor-grab',
+        active !== null && 'cursor-grabbing'
+      )}
+      {...props}
+      {...listeners}
+      ref={setActivatorNodeRef}
+    />
+  )
+}

package/src/components/drag-and-drop/drag-list-item.tsx

@@ -0,0 +1,91 @@
+import type { UniqueIdentifier } from '@dnd-kit/core'
+import { useSortable } from '@dnd-kit/sortable'
+import { cx } from '@xjur-ui/util'
+import { type ComponentProps, type CSSProperties } from 'react'
+import { CSS } from '@dnd-kit/utilities'
+import type { DragItem } from './types/drag-item'
+import { DragHandlerContext } from './drag-handle'
+
+export function DragListItem({
+  id,
+  className,
+  draggableClassName = '',
+  data,
+  useCustomDragHandle = false,
+  hasOverlay = true,
+  ...props
+}: Omit<ComponentProps<'li'>, 'id'> & {
+  id: UniqueIdentifier
+  draggableClassName?: string
+  data: DragItem
+  useCustomDragHandle?: boolean
+  hasOverlay?: boolean
+}) {
+  const {
+    setNodeRef,
+    setActivatorNodeRef,
+    attributes,
+    listeners,
+    transition,
+    transform,
+    isDragging
+  } = useSortable({
+    id,
+    data
+  })
+
+  const style: CSSProperties = {
+    transition,
+    transform: CSS.Transform.toString(transform),
+    ...(isDragging && {
+      boxShadow: 'none'
+    })
+  }
+
+  const listClassNames = cx(
+    'list-none',
+    useCustomDragHandle ? 'cursor-default' : 'cursor-grab',
+    className
+  )
+
+  if (isDragging) {
+    return (
+      <li
+        className={cx(
+          'data-[overlay=true]:border-border-layer-2 data-[overlay=true]:border-2 data-[overlay=true]:border-dashed data-[overlay=true]:bg-transparent data-[overlay=true]:opacity-60',
+          draggableClassName,
+          className
+        )}
+        data-overlay={hasOverlay}
+        ref={setNodeRef}
+        style={style}
+        {...props}
+      />
+    )
+  }
+
+  if (useCustomDragHandle) {
+    return (
+      <DragHandlerContext.Provider value={{ listeners, setActivatorNodeRef }}>
+        <li
+          className={listClassNames}
+          ref={setNodeRef}
+          style={style}
+          {...attributes}
+          {...props}
+        />
+      </DragHandlerContext.Provider>
+    )
+  }
+
+  return (
+    <li
+      className={listClassNames}
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      {...listeners}
+      {...props}
+    />
+  )
+}

package/src/components/drag-and-drop/drag-list.tsx

@@ -0,0 +1,47 @@
+import { useDroppable, type UniqueIdentifier } from '@dnd-kit/core'
+import {
+  type SortableContextProps,
+  verticalListSortingStrategy,
+  horizontalListSortingStrategy,
+  SortableContext
+} from '@dnd-kit/sortable'
+import { cx } from '@xjur-ui/util'
+import type { DragItem } from './types/drag-item'
+
+export function DragList({
+  items,
+  orientation = 'vertical',
+  children,
+  className,
+  id,
+  data,
+  ...props
+}: Omit<SortableContextProps, 'items' | 'id'> & {
+  items: DragItem[]
+  orientation?: 'vertical' | 'horizontal'
+  className?: string
+  id: UniqueIdentifier
+  data?: DragItem
+}) {
+  const strategy =
+    orientation === 'vertical'
+      ? verticalListSortingStrategy
+      : horizontalListSortingStrategy
+
+  const { setNodeRef } = useDroppable({
+    id,
+    data
+  })
+
+  return (
+    <SortableContext
+      items={items.map(item => item)}
+      strategy={strategy}
+      {...props}
+    >
+      <ul className={cx(className)} ref={setNodeRef}>
+        {children}
+      </ul>
+    </SortableContext>
+  )
+}

package/src/components/drag-and-drop/drag-root.tsx

@@ -0,0 +1,30 @@
+import {
+  closestCenter,
+  useSensors,
+  useSensor,
+  PointerSensor,
+  KeyboardSensor,
+  DndContext,
+  type DndContextProps
+} from '@dnd-kit/core'
+import { sortableKeyboardCoordinates } from '@dnd-kit/sortable'
+
+export function DragRoot({
+  collisionDetection = closestCenter,
+  ...props
+}: DndContextProps) {
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  )
+
+  return (
+    <DndContext
+      collisionDetection={collisionDetection}
+      sensors={props.sensors ?? sensors}
+      {...props}
+    />
+  )
+}

package/src/components/drag-and-drop/index.ts

@@ -0,0 +1,39 @@
+/* Dnd Kit Sortable helpers */
+export { arrayMove, useSortable } from '@dnd-kit/sortable'
+
+/* Dnd Kit Core helpers */
+export {
+  closestCenter,
+  closestCorners,
+  pointerWithin,
+  getFirstCollision,
+  getClientRect,
+  useDroppable,
+  useDndContext,
+  useDraggable,
+  useSensor,
+  useDndMonitor,
+  useSensors
+} from '@dnd-kit/core'
+
+/* Dnd Kit Core Components */
+export { DragOverlay } from '@dnd-kit/core'
+
+/* Dnd Kit Core Types */
+export {
+  type DragEndEvent,
+  type DragStartEvent,
+  type DragOverEvent,
+  type DragAbortEvent,
+  type DragCancelEvent,
+  type DragMoveEvent,
+  type DragPendingEvent,
+  type UniqueIdentifier
+} from '@dnd-kit/core'
+
+/* Drag And Drop Components */
+export { DragRoot } from './drag-root'
+export { DragList } from './drag-list'
+export { DragListItem } from './drag-list-item'
+export { DragHandle } from './drag-handle'
+export type { DragItem } from './types/drag-item'

package/src/components/drag-and-drop/types/drag-item.ts

@@ -0,0 +1,7 @@
+import type { UniqueIdentifier } from '@dnd-kit/core'
+
+export interface DragItem<T = unknown> {
+  id: UniqueIdentifier
+  type: string
+  data: T
+}