@xjur-ui/react 1.0.6 → 2.1.0

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/chip.tsx

@@ -28,9 +28,17 @@ const chipVariants = cva(
 export function ChipRoot({
   className,
   variant = 'primary',
+  disabled = false,
   ...props
-}: ComponentProps<'div'> & ClassVariantProps<typeof chipVariants>) {
-  return <div className={cx(chipVariants({ variant }), className)} {...props} />
+}: ComponentProps<'div'> &
+  ClassVariantProps<typeof chipVariants> & { disabled?: boolean }) {
+  return (
+    <div
+      className={cx(chipVariants({ variant }), className)}
+      data-disabled={disabled}
+      {...props}
+    />
+  )
 }
 
 export function ChipText({
@@ -78,7 +86,7 @@ export function ChipClose({
       className={cx(
         className,
         'cursor-pointer bg-inherit',
-        'invisible items-center justify-center group-hover/chip:visible',
+        'invisible items-center justify-center group-hover/chip:data-[disabled=false]:visible',
         'absolute top-0 right-0',
         'h-large-2x w-large-2x rounded-circle',
         'transition-[visibility] duration-200'

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
+}

package/src/components/{calendar.tsx → form/calendar.tsx}

@@ -7,8 +7,8 @@ import {
   DayPicker,
   getDefaultClassNames
 } from 'react-day-picker'
-import { Icon, type IconType } from './icon'
-import { Button } from './button'
+import { Icon, type IconType } from '../icon'
+import { Button } from '../form/button'
 
 function capitalize(str: string) {
   return str.charAt(0).toUpperCase() + str.slice(1)
@@ -43,20 +43,21 @@ export function Calendar({
     ),
     outside: cx('text-neutral-placeholder', defaultClassNames.outside),
     selected: cx(
-      'text-size-body-md bg-primary-alt-active text-primary-label-active font-medium hover:bg-primary-alt-active'
+      'text-size-body-md bg-primary-alt-active text-primary-label-active font-medium hover:!bg-primary-alt-active'
     ),
     disabled: cx('opacity-60', defaultClassNames.disabled),
     today: cx(
-      '!text-primary-label-active font-medium',
-      defaultClassNames.today
+      'text-neutral-dark font-medium bg-layer-2-active hover:!bg-layer-2-active'
     ),
     range_start: cx(
-      'text-size-body-md bg-primary-alt-active text-primary-label-active font-medium hover:bg-primary-alt-active'
+      'rounded-r-none text-size-body-md bg-primary-alt-active text-primary-label-active font-medium hover:!bg-primary-alt-active'
     ),
     range_end: cx(
-      'text-size-body-md bg-primary-alt-active text-primary-label-active font-medium hover:bg-primary-alt-active'
+      'rounded-l-none text-size-body-md bg-primary-alt-active text-primary-label-active font-medium hover:!bg-primary-alt-active'
     ),
-    range_middle: cx('!bg-layer-2-hover !text-primary-label-active')
+    range_middle: cx(
+      '!bg-primary-alt-active !text-primary-label-active rounded-none hover:!bg-primary-alt-active'
+    )
   }
 
   return (