@xjur-ui/react 1.0.2 → 1.0.4

package/src/components/avatar-group.tsx

@@ -0,0 +1,76 @@
+import { cx } from '@xjur-ui/util'
+import { AvatarRoot, AvatarImage, AvatarFallback } from './avatar'
+import { Typography } from './typography'
+
+export interface AvatarGroupProps {
+  /**
+   * Lista de avatares para exibir
+   */
+  avatars: Array<{
+    src?: string
+    alt?: string
+    fallback?: string
+  }>
+  /**
+   * Número máximo de avatares a exibir antes de mostrar o indicador de overflow
+   * @default 3
+   */
+  max?: number
+  /**
+   * Tamanho dos avatares
+   * @default 'md'
+   */
+  size?: 'xs' | 'sm' | 'md' | 'lg'
+  /**
+   * Classe CSS adicional
+   */
+  className?: string
+  /**
+   * Espaçamento entre os avatares (em pixels)
+   * @default -8
+   */
+  spacing?: number
+}
+
+export function AvatarGroup({
+  avatars,
+  max = 3,
+  size = 'md',
+  className
+}: AvatarGroupProps) {
+  const visibleAvatars = avatars.slice(0, max)
+  const remainingCount = avatars.length - max
+
+  return (
+    <div
+      className={cx('-space-x-small-1x flex items-center', className)}
+      data-slot="avatar-group"
+    >
+      {visibleAvatars.map((avatar, index) => (
+        <AvatarRoot
+          className="border-icon-neutral-5 border-2"
+          key={index}
+          size={size}
+        >
+          {avatar.src && (
+            <AvatarImage
+              alt={avatar.alt || `Avatar ${index + 1}`}
+              src={avatar.src}
+            />
+          )}
+          <AvatarFallback>{avatar.fallback || `A${index + 1}`}</AvatarFallback>
+        </AvatarRoot>
+      ))}
+
+      {remainingCount > 0 && (
+        <AvatarRoot className="bg-layer-1-hover" size={size}>
+          <AvatarFallback className="bg-layer-1-hover font-medium">
+            <Typography className="text-neutral-dark" weight="medium">
+              +{remainingCount}
+            </Typography>
+          </AvatarFallback>
+        </AvatarRoot>
+      )}
+    </div>
+  )
+}

package/src/components/avatar.tsx

@@ -14,6 +14,7 @@ export function AvatarRoot({
       className={cx(
         'rounded-circle relative flex shrink-0 overflow-hidden',
         'data-[size=lg]:size-large-8x data-[size=md]:size-large-4x data-[size=sm]:size-large-2x data-[size=xs]:size-large-1x',
+        'data-[size=lg]:text-size-headline-md data-[size=md]:text-size-label-lg data-[size=sm]:text-size-label-sm data-[size=xs]:text-size-label-sm',
         className
       )}
       data-size={size}

package/src/components/date-picker.tsx

@@ -19,7 +19,7 @@ export function DatePickerTrigger({
         className,
         'group h-large-4x rounded-small-1x gap-small py-small_1x-alt px-small relative flex w-full cursor-pointer items-center',
         'bg-layer-2-idle border-border-layer-2 hover:border-border-layer-3 border',
-        'data-[state=open]:border-primary-idle data-[state=open]:shadow-focus-primary',
+        'data-[state=open]:border-primary-idle',
         'has-[input:not(:placeholder-shown)]:text-primary-idle',
         'has-[input:not(:placeholder-shown)]:border-primary-idle'
       )}

package/src/components/divider.tsx

@@ -11,7 +11,8 @@ export function Divider({
   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',
+        '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"

package/src/components/dropdown-menu.tsx

@@ -49,7 +49,7 @@ export function DropdownMenuContent({
       <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-[240px]',
+          '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"

package/src/components/input.tsx

@@ -43,7 +43,7 @@ export function InputContent({ className, ...props }: ComponentProps<'div'>) {
   const variants = cva(
     [
       'relative h-large-4x rounded-small-1x gap-small py-small_1x-alt px-small flex items-center w-full',
-      'focus-within:border-primary-idle focus-within:shadow-focus-primary focus-within:border',
+      'focus-within:border-primary-idle focus-within:border',
       'group-has-[div[data-slot=input-right-action-slot]]:rounded-r-none',
       'group-has-[div[data-slot=input-left-action-slot]]:rounded-l-none'
     ],

package/src/components/otp-input.tsx

@@ -25,7 +25,7 @@ function Input({
       className={cx(
         className,
         'text-neutral-dark h-large-6x bg-layer-2-hover rounded-small-1x w-full text-center outline-0',
-        'focus-within:border-primary-idle focus-within:shadow-focus-primary focus-within:border'
+        'focus-within:border-primary-idle focus-within:border'
       )}
       {...props}
     />

package/src/components/rich-editor.tsx

@@ -0,0 +1,371 @@
+import { cx } from '@xjur-ui/util'
+import { useCallback, useMemo, useState, type ComponentProps } from 'react'
+import {
+  EditorContent,
+  EditorContext,
+  useCurrentEditor as useRichTextEditor,
+  useEditorState as useRichTextEditorState,
+  useEditor,
+  type EditorOptions,
+  Extension
+} from '@tiptap/react'
+import { StarterKit } from '@tiptap/starter-kit'
+import { Heading, type Level } from '@tiptap/extension-heading'
+import { Placeholder } from '@tiptap/extensions'
+import { useOS } from '../hooks'
+import { Icon, type IconType } from './icon'
+import { Button, type ButtonProps } from './button'
+import {
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuItemText,
+  DropdownMenuList,
+  DropdownMenuRoot,
+  DropdownMenuTrigger
+} from './dropdown-menu'
+import { Tooltip, TooltipTrigger, TooltipContent } from './tooltip'
+import { Typography } from './typography'
+
+const headingClasses: Partial<Record<Level, string>> = {
+  1: 'text-size-body-md',
+  2: 'text-size-title-lg',
+  3: 'text-size-headline-lg'
+}
+
+export function RichEditorRoot({
+  className,
+  editorOptions,
+  ...props
+}: ComponentProps<'div'> & {
+  editorOptions?: Partial<
+    Omit<EditorOptions, 'extensions'> & {
+      extensions?: Extension[]
+    }
+  >
+}) {
+  const editor = useEditor({
+    ...editorOptions,
+    extensions: [
+      StarterKit.configure({
+        bulletList: {
+          HTMLAttributes: {
+            class: 'list-disc list-outside pl-large-1x'
+          }
+        },
+        orderedList: {
+          HTMLAttributes: {
+            class: 'list-decimal list-outside pl-large-1x'
+          }
+        },
+        heading: false
+      }),
+      Placeholder.configure({
+        placeholder: ({ node, editor }) =>
+          node.type.name === 'paragraph' && editor.isEmpty
+            ? 'Digite aqui…'
+            : '',
+        showOnlyWhenEditable: true,
+        includeChildren: false,
+        emptyNodeClass:
+          'before:content-[attr(data-placeholder)] before:absolute before:top-0 before:left-0 before:text-neutral-placeholder first:before:float-left first:before:content-[attr(data-placeholder)] first:before:pointer-events-none'
+      }),
+      Heading.configure({
+        levels: [1, 2, 3]
+      }).extend({
+        renderHTML({ node, HTMLAttributes }) {
+          const level: Level = node.attrs.level ?? 1
+
+          return [
+            'h',
+            {
+              ...HTMLAttributes,
+              class: headingClasses[level]
+            },
+            0
+          ]
+        }
+      }),
+      ...(editorOptions?.extensions ?? [])
+    ]
+  })
+
+  const value = useMemo(() => ({ editor }), [editor])
+
+  return (
+    <EditorContext.Provider value={value}>
+      <div
+        className={cx('gap-small flex w-full flex-col', className)}
+        data-slot="text-area-root"
+        {...props}
+      />
+    </EditorContext.Provider>
+  )
+}
+
+export function RichEditorContent({
+  className,
+  ...props
+}: ComponentProps<'div'>) {
+  return (
+    <div
+      className={cx(
+        'bg-layer-2-hover py-small_1x-alt px-small rounded-small-1x min-h-[116px] w-full border border-transparent',
+        'hover:border-border-layer-2 transition-colors duration-200',
+        '[&_ul_ul]:list-[circle]',
+        '[&_ul_ul_ul]:list-[square]',
+        '[&_ol_ol]:list-[lower-alpha]',
+        '[&_ol_ol_ol]:list-[lower-roman]',
+        'gap-small flex flex-col overflow-x-hidden overflow-y-auto',
+        className
+      )}
+      data-slot="text-area-content"
+      {...props}
+    />
+  )
+}
+
+export function RichEditorCaption({
+  className,
+  ...props
+}: ComponentProps<'p'>) {
+  return (
+    <p
+      {...props}
+      className={cx(
+        'text-size-body-sm text-neutral-dark font-normal',
+        className
+      )}
+      data-slot="text-area-caption"
+    />
+  )
+}
+
+export function RichEditorAreaText({
+  className,
+  ...props
+}: Omit<ComponentProps<typeof EditorContent>, 'editor'>) {
+  const { editor } = useRichTextEditor()
+
+  return (
+    <EditorContent
+      className={cx(
+        'text-size-body-md text-neutral-dark max-h-[116px] *:h-full *:w-full *:outline-0',
+        className
+      )}
+      editor={editor}
+      {...props}
+    />
+  )
+}
+
+export function RichEditorToolbar({
+  className,
+  ...props
+}: ComponentProps<'div'>) {
+  return (
+    <div
+      className={cx(
+        'h-large-4x gap-small-1x h-large-6px scrollbar-hide flex flex-nowrap items-center overflow-x-auto overflow-y-hidden',
+        className
+      )}
+      data-slot="text-area-toolbar"
+      {...props}
+    />
+  )
+}
+
+export function ToolbarButton({
+  appearance = 'ghost',
+  variant = 'secondary',
+  onMouseDown,
+  onPointerDown,
+  ...props
+}: ButtonProps) {
+  return (
+    <Button
+      appearance={appearance}
+      size="icon_md"
+      tabIndex={-1}
+      type="button"
+      variant={variant}
+      onMouseDown={e => {
+        e.preventDefault()
+        onMouseDown?.(e)
+      }}
+      onPointerDown={e => {
+        e.preventDefault()
+        onPointerDown?.(e)
+      }}
+      {...props}
+    />
+  )
+}
+
+type ToggleButtonName =
+  | 'bold'
+  | 'italic'
+  | 'underline'
+  | 'strike'
+  | 'bulletList'
+  | 'orderedList'
+  | 'undo'
+  | 'redo'
+
+export function ToggleButton({
+  name,
+  ...props
+}: ButtonProps & { name: ToggleButtonName }) {
+  const { editor } = useRichTextEditor()
+  const { shortcut } = useOS()
+
+  const isActive = useRichTextEditorState({
+    editor,
+    selector: ctx => ctx.editor?.isActive(name) ?? false
+  })
+
+  const icon = useMemo(() => {
+    const iconsMap = new Map<ToggleButtonName, IconType>([
+      ['bold', 'format_bold'],
+      ['italic', 'format_italic'],
+      ['underline', 'format_underlined'],
+      ['strike', 'format_strikethrough'],
+      ['bulletList', 'format_list_bulleted'],
+      ['orderedList', 'format_list_numbered'],
+      ['undo', 'undo'],
+      ['redo', 'redo']
+    ])
+
+    return iconsMap.get(name)
+  }, [name])
+
+  const description = useMemo(() => {
+    const descriptionsMap = new Map<ToggleButtonName, string>([
+      ['bold', `Negrito (${shortcut} + B)`],
+      ['italic', `Itálico (${shortcut} + I)`],
+      ['underline', `Sublinhado (${shortcut} + U)`],
+      ['strike', `Tachado (${shortcut} + S)`],
+      ['bulletList', `Lista (${shortcut} + Shift + 7)`],
+      ['orderedList', `Lista numerada (${shortcut} + Shift + 8)`],
+      ['undo', `Desfazer (${shortcut} + Z)`],
+      ['redo', `Refazer (${shortcut} + Y)`]
+    ])
+
+    return descriptionsMap.get(name)
+  }, [name, shortcut])
+
+  const handleToggle = useCallback(() => {
+    if (!editor) throw new Error('Editor not found')
+
+    const commandsMap = new Map<ToggleButtonName, () => void>([
+      ['bold', () => editor.chain().focus().toggleBold().run()],
+      ['italic', () => editor.chain().focus().toggleItalic().run()],
+      ['underline', () => editor.chain().focus().toggleUnderline().run()],
+      ['strike', () => editor.chain().focus().toggleStrike().run()],
+      ['bulletList', () => editor.chain().focus().toggleBulletList().run()],
+      ['orderedList', () => editor.chain().focus().toggleOrderedList().run()],
+      ['undo', () => editor.chain().focus().undo().run()],
+      ['redo', () => editor.chain().focus().redo().run()]
+    ])
+
+    commandsMap.get(name)?.()
+  }, [editor, name])
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild={true}>
+        <ToolbarButton
+          onClick={handleToggle}
+          {...(isActive && { appearance: 'solid' })}
+          {...props}
+        >
+          {icon && <Icon className="text-icon-neutral-3" name={icon} />}
+        </ToolbarButton>
+      </TooltipTrigger>
+
+      <TooltipContent>
+        {description && <Typography size="sm">{description}</Typography>}
+      </TooltipContent>
+    </Tooltip>
+  )
+}
+
+export function HeadingButton({
+  appearance = 'ghost',
+  variant = 'secondary',
+  ...props
+}: ButtonProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const { editor } = useRichTextEditor()
+
+  const isActive = useRichTextEditorState({
+    editor,
+    selector: ctx => ctx.editor?.isActive('heading') ?? false
+  })
+
+  const isLevelActive = useCallback(
+    (level: Level) => {
+      if (!editor) throw new Error('Editor not found')
+      return editor.isActive('heading', { level })
+    },
+    [editor]
+  )
+
+  const toggleHeading = useCallback(
+    (level: Level) => {
+      if (!editor) throw new Error('Editor not found')
+      setIsOpen(false)
+      setTimeout(() => {
+        editor.chain().focus().toggleHeading({ level }).run()
+      }, 0)
+    },
+    [editor]
+  )
+
+  const levels: { level: Level; label: string; className?: string }[] = [
+    { level: 1, label: 'Normal', className: headingClasses[1] },
+    { level: 2, label: 'Grande', className: headingClasses[2] },
+    { level: 3, label: 'Enorme', className: headingClasses[3] }
+  ]
+
+  return (
+    <DropdownMenuRoot open={isOpen} onOpenChange={open => setIsOpen(open)}>
+      <DropdownMenuTrigger asChild={true}>
+        <Button
+          appearance={isActive ? 'solid' : appearance}
+          size="icon_md"
+          tabIndex={-1}
+          type="button"
+          variant={variant}
+          {...props}
+        >
+          <Tooltip>
+            <TooltipTrigger asChild={true}>
+              <Icon className="text-icon-neutral-3" name="format_size" />
+            </TooltipTrigger>
+
+            <TooltipContent>
+              <Typography size="sm">Tamanho</Typography>
+            </TooltipContent>
+          </Tooltip>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuList>
+          {levels.map(level => (
+            <DropdownMenuItem
+              isActive={isLevelActive(level.level)}
+              key={level.level}
+              onPointerDown={() => toggleHeading(level.level)}
+            >
+              <DropdownMenuItemText className={level.className}>
+                {level.label}
+              </DropdownMenuItemText>
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuList>
+      </DropdownMenuContent>
+    </DropdownMenuRoot>
+  )
+}
+
+export { useRichTextEditorState, useRichTextEditor }

package/src/components/search-input.tsx

@@ -39,8 +39,7 @@ export function SearchInputContent({
     {
       variants: {
         variant: {
-          outlined:
-            'rounded-circle focus-within:border-primary-idle focus-within:shadow-focus-primary',
+          outlined: 'rounded-circle focus-within:border-primary-idle ',
           line: 'rounded-none border-t-0 border-b-1 border-x-0',
           action: 'rounded-tr-none rounded-br-none border-r-0'
         }

package/src/components/select.tsx

@@ -31,7 +31,7 @@ export function SelectTrigger({
         className,
         'group h-large-4x rounded-small-1x gap-small py-small_1x-alt px-small relative flex w-full cursor-pointer items-center',
         'bg-layer-2-idle border-border-layer-2 hover:border-border-layer-3 border',
-        'data-[state=open]:border-primary-idle data-[state=open]:shadow-focus-primary',
+        'data-[state=open]:border-primary-idle',
         'has-[input:not(:placeholder-shown)]:text-primary-idle',
         'has-[input:not(:placeholder-shown)]:border-primary-idle'
       )}

package/src/components/skeleton.tsx

@@ -0,0 +1,12 @@
+import type { ComponentProps } from 'react'
+import { cx } from '@xjur-ui/util'
+
+export function Skeleton({ className, ...props }: ComponentProps<'div'>) {
+  return (
+    <div
+      className={cx('bg-layer-skeleton animate-pulse', className)}
+      data-slot="skeleton"
+      {...props}
+    />
+  )
+}

package/src/components/table.tsx

@@ -0,0 +1,160 @@
+import { cx } from '@xjur-ui/util'
+import { Icon } from './icon'
+
+export function Table({ className, ...props }: React.ComponentProps<'table'>) {
+  return (
+    <div
+      className="text-size-body-md scrollbar-thin relative w-full overflow-hidden transition-all hover:overflow-x-auto"
+      data-slot="table-container"
+    >
+      <table
+        className={cx('w-full caption-bottom', className)}
+        data-slot="table"
+        {...props}
+      />
+    </div>
+  )
+}
+
+export function TableHeader({
+  className,
+  ...props
+}: React.ComponentProps<'thead'>) {
+  return (
+    <thead
+      className={cx(
+        'group/table-header [&_tr]:border-border-layer-2 hover:bg-layer-2-hover [&_tr]:border-b',
+        className
+      )}
+      data-slot="table-header"
+      {...props}
+    />
+  )
+}
+
+export function TableBody({
+  className,
+  ...props
+}: React.ComponentProps<'tbody'>) {
+  return (
+    <tbody
+      className={cx(
+        '[&_tr]:border-border-layer-2 [&_tr]:border-b [&_tr:last-child]:border-0',
+        className
+      )}
+      data-slot="table-body"
+      {...props}
+    />
+  )
+}
+
+export function TableFooter({
+  className,
+  ...props
+}: React.ComponentProps<'tfoot'>) {
+  return (
+    <tfoot
+      className={cx(
+        'border-border-layer-2 border-t font-medium [&>tr]:last:border-b-0',
+        className
+      )}
+      data-slot="table-footer"
+      {...props}
+    />
+  )
+}
+
+export function TableRow({
+  className,
+  isSelected = false,
+  ...props
+}: React.ComponentProps<'tr'> & { isSelected?: boolean }) {
+  return (
+    <tr
+      className={cx(
+        'bg-layer-2-idle hover:bg-layer-2-hover ease border-b transition-colors duration-100',
+        'active:bg-layer-2-pressed',
+        'data-[selected=true]:bg-primary-alt-active',
+        className
+      )}
+      data-selected={isSelected}
+      data-slot="table-row"
+      {...props}
+    />
+  )
+}
+
+export function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
+  return (
+    <th
+      className={cx(
+        'group/th text-neutral-placeholder text-size-label-sm h-large-4x py-small-1x px-small text-left align-middle font-medium whitespace-nowrap',
+        'pr-large-2x relative',
+        'animate-in fade-in duration-200 ease-in',
+        className
+      )}
+      data-slot="table-head"
+      {...props}
+    />
+  )
+}
+
+export function TableHeadContent({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cx(
+        'gap-small pr-large-3x relative flex w-fit items-center',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function TableSort({
+  className,
+  sortedDirection,
+  ...props
+}: React.ComponentProps<'button'> & { sortedDirection?: 'asc' | 'desc' }) {
+  return (
+    <button
+      className={cx(
+        'size-large-1x rounded-small-1x',
+        'flex cursor-pointer items-center justify-center',
+        'hidden group-hover/th:flex',
+        'data-[sorted=true]:flex',
+        'transition-all duration-200 ease-out',
+        'data-[sorted=true]:bg-primary-alt-active data-[sorted=true]:text-primary-label-active',
+        'absolute top-1/2 right-0 -translate-y-1/2',
+        className
+      )}
+      data-sorted={sortedDirection !== undefined}
+      type="button"
+      {...props}
+    >
+      {sortedDirection !== undefined ? (
+        <Icon
+          name={sortedDirection === 'asc' ? 'arrow_downward' : 'arrow_upward'}
+        />
+      ) : (
+        <Icon name="swap_vert" />
+      )}
+    </button>
+  )
+}
+
+export function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
+  return (
+    <td
+      className={cx(
+        'px-small py-none h-large-8x text-left align-middle whitespace-nowrap',
+        className
+      )}
+      data-slot="table-cell"
+      {...props}
+    />
+  )
+}