@xjur-ui/react 2.1.0 → 2.2.0

package/src/components/collapsible.tsx

@@ -1,35 +0,0 @@
-import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
-import { cx } from '@xjur-ui/util'
-
-export function CollapsibleRoot({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
-  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
-}
-
-export function CollapsibleTrigger({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
-  return (
-    <CollapsiblePrimitive.CollapsibleTrigger
-      data-slot="collapsible-trigger"
-      {...props}
-    />
-  )
-}
-
-export function CollapsibleContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
-  return (
-    <CollapsiblePrimitive.CollapsibleContent
-      className={cx(
-        className,
-        'data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up'
-      )}
-      data-slot="collapsible-content"
-      {...props}
-    />
-  )
-}

package/src/components/dialog.tsx

@@ -1,242 +0,0 @@
-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/divider.tsx

@@ -1,24 +0,0 @@
-import * as React from 'react'
-import * as SeparatorPrimitive from '@radix-ui/react-separator'
-import { cx } from '@xjur-ui/util'
-
-export function Divider({
-  className,
-  orientation = 'horizontal',
-  decorative = true,
-  ...props
-}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
-  return (
-    <SeparatorPrimitive.Root
-      className={cx(
-        'bg-border-layer-2 shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full',
-        'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
-        className
-      )}
-      data-slot="separator"
-      decorative={decorative}
-      orientation={orientation}
-      {...props}
-    />
-  )
-}

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

@@ -1,46 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,39 +0,0 @@
-/* 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

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

package/src/components/dropdown-menu.tsx

@@ -1,101 +0,0 @@
-import * as React from 'react'
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
-import { cx } from '@xjur-ui/util'
-import {
-  ListContent,
-  ListHeader,
-  ListHeaderTitle,
-  ListItem,
-  ListRoot
-} from './list'
-import { Typography } from './typography'
-import { Divider } from './divider'
-
-export function DropdownMenuRoot({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
-}
-
-export function DropdownMenuPortal({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
-  return (
-    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-  )
-}
-
-export function DropdownMenuTrigger({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
-  return (
-    <DropdownMenuPrimitive.Trigger
-      data-slot="dropdown-menu-trigger"
-      {...props}
-    />
-  )
-}
-
-export function DropdownMenuContent({
-  className,
-  sideOffset = 4,
-  align = 'start',
-  side = 'bottom',
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
-  return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.Content
-        align={align}
-        className={cx(
-          'group z-10 max-h-[var(--radix-popover-content-available-height)] max-w-[var(--radix-popover-trigger-width)] min-w-[var(--radix-popover-trigger-width)]',
-          className
-        )}
-        data-slot="dropdown-menu-content"
-        side={side}
-        sideOffset={sideOffset}
-        {...props}
-      >
-        <ListRoot>{children}</ListRoot>
-      </DropdownMenuPrimitive.Content>
-    </DropdownMenuPrimitive.Portal>
-  )
-}
-
-export function DropdownMenuList({
-  ...props
-}: React.ComponentProps<typeof ListContent>) {
-  return <ListContent {...props} />
-}
-
-export function DropdownMenuHeader({
-  ...props
-}: React.ComponentProps<typeof ListHeader>) {
-  return <ListHeader {...props} />
-}
-
-export function DropdownMenuHeaderTitle({
-  ...props
-}: React.ComponentProps<typeof ListHeaderTitle>) {
-  return <ListHeaderTitle {...props} />
-}
-
-export function DropdownMenuItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof ListItem>) {
-  return <ListItem className={cx(className, 'cursor-pointer')} {...props} />
-}
-
-export function DropdownMenuItemText({
-  ...props
-}: React.ComponentProps<typeof Typography>) {
-  return <Typography {...props} />
-}
-
-export function DropdownMenuItemDivider({
-  ...props
-}: React.ComponentProps<typeof Divider>) {
-  return <Divider {...props} />
-}