@xjur-ui/react 2.1.0 → 2.1.1

package/dist/input-mask-DhbtCxF7.d.ts

@@ -0,0 +1,3 @@
+type InputMaskType = 'cpf' | 'cnpj' | 'telefone' | 'cep' | 'numero-processo' | 'custom' | 'data' | 'hora' | 'data-hora';
+
+export type { InputMaskType as I };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xjur-ui/react",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "type": "module",
   "description": "React components for XJur Design System",
   "main": "dist/index.js",
@@ -26,7 +26,7 @@
     "./divider": "./dist/components/divider.js",
     "./sheet": "./dist/components/sheet.js",
     "./badge": "./dist/components/badge.js",
-    "./table": "./dist/components/table.js",
+    "./table": "./dist/components/table/index.js",
     "./avatar-group": "./dist/components/avatar-group.js",
     "./skeleton": "./dist/components/skeleton.js",
     "./tooltip": "./dist/components/tooltip.js",
@@ -35,17 +35,20 @@
     "./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"
+    "./button": "./dist/components/controls/button.js",
+    "./calendar": "./dist/components/controls/calendar.js",
+    "./checkbox": "./dist/components/controls/checkbox.js",
+    "./date-picker": "./dist/components/controls/date-picker.js",
+    "./input": "./dist/components/controls/input.js",
+    "./otp-input": "./dist/components/controls/otp-input.js",
+    "./radio": "./dist/components/controls/radio.js",
+    "./rich-editor": "./dist/components/controls/rich-editor.js",
+    "./search-input": "./dist/components/controls/search-input.js",
+    "./search-selector": "./dist/components/controls/search-selector.js",
+    "./select": "./dist/components/controls/select.js",
+    "./switch": "./dist/components/controls/switch.js",
+    "./pessoa": "./dist/components/custom/pessoa/index.js",
+    "./steps": "./dist/components/steps/index.js"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",

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

@@ -8,7 +8,7 @@ import {
   getDefaultClassNames
 } from 'react-day-picker'
 import { Icon, type IconType } from '../icon'
-import { Button } from '../form/button'
+import { Button } from './button'
 
 function capitalize(str: string) {
   return str.charAt(0).toUpperCase() + str.slice(1)

package/src/components/{form → controls}/input.tsx

@@ -151,6 +151,7 @@ export function InputNumber({
   className,
   locales = 'pt-BR',
   placeholder,
+  groupDisplay = false,
   ...props
 }: InputNumberFormatProps) {
   const { state, variant } = useFieldContext()
@@ -160,6 +161,7 @@ export function InputNumber({
       {...props}
       className={value({ className, state })}
       disabled={state === 'disabled'}
+      groupDisplay={groupDisplay}
       locales={locales}
       placeholder={variant === 'filter' ? ' ' : placeholder}
       readOnly={state === 'disabled'}

package/src/components/{form → controls}/rich-editor.tsx

@@ -15,7 +15,7 @@ import { Heading, type Level } from '@tiptap/extension-heading'
 import { Placeholder } from '@tiptap/extension-placeholder'
 import { useOS } from '../../hooks'
 import { Icon, type IconType } from '../icon'
-import { Button, type ButtonProps } from '../form/button'
+import { Button, type ButtonProps } from './button'
 import {
   DropdownMenuContent,
   DropdownMenuItem,

package/src/components/{form → controls}/search-input.tsx

@@ -1,7 +1,16 @@
 import { cva, cx } from '@xjur-ui/util'
 import { createContext, type ComponentProps } from 'react'
+import {
+  InputMask as InputMaskComponent,
+  type MaskOptions
+} from '@react-input/mask'
+import {
+  InputNumberFormat,
+  type InputNumberFormatProps
+} from '@react-input/number-format'
 import { Typography } from '../typography'
-import { Button, type ButtonProps } from '../form/button'
+import { inputMask, type InputMaskType } from '../../resources/input-mask'
+import { Button, type ButtonProps } from './button'
 
 export type SearchInputProps = {
   variant?: 'outlined' | 'line' | 'action'
@@ -18,7 +27,7 @@ export function SearchInputRoot({
 }: ComponentProps<'div'> & SearchInputProps) {
   return (
     <SearchInputRootContext.Provider value={{ variant }}>
-      <div className={cx(className, 'relative flex w-full')} {...props} />
+      <div className={cx('relative flex', className)} {...props} />
     </SearchInputRootContext.Provider>
   )
 }
@@ -84,6 +93,40 @@ export function SearchInputText({
   return <input className={cx(className, 'flex-1 outline-none')} {...props} />
 }
 
+export function SearchInputMask({
+  className,
+  mask,
+  customMask,
+  ...props
+}: ComponentProps<'input'> & {
+  mask?: InputMaskType
+  customMask?: MaskOptions
+}) {
+  return (
+    <InputMaskComponent
+      {...(mask ? { ...inputMask(mask) } : customMask && { ...customMask })}
+      className={cx(className, 'flex-1 outline-none')}
+      {...props}
+    />
+  )
+}
+
+export function SearchInputNumber({
+  className,
+  locales = 'pt-BR',
+  groupDisplay = false,
+  ...props
+}: InputNumberFormatProps) {
+  return (
+    <InputNumberFormat
+      className={cx(className, 'flex-1 outline-none')}
+      groupDisplay={groupDisplay}
+      locales={locales}
+      {...props}
+    />
+  )
+}
+
 export function SearchInputSlot(props: ComponentProps<'div'>) {
   return <div {...props} data-slot="search-input-slot" />
 }
@@ -102,7 +145,7 @@ export function SearchInputAction({
         className,
         'cursor-pointer',
         'h-large-4x rounded-tr-circle rounded-br-circle px-small py-small_1x-alt flex items-center justify-center rounded-none',
-        'text-size-body-md text-neutral-dark gap-small-1x'
+        'text-size-body-md text-neutral-dark gap-small-1x !border-l-0'
       )}
       data-slot="search-input-action"
       variant={variant}

package/src/components/controls/search-selector.tsx

@@ -0,0 +1,98 @@
+import { useMemo, useState, type ComponentProps } from 'react'
+import type { MaskOptions } from '@react-input/mask'
+import type { InputMaskType } from '../../resources/input-mask'
+import {
+  DropdownMenuRoot,
+  DropdownMenuList,
+  DropdownMenuItemText,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from '../dropdown-menu'
+import { Icon } from '../icon'
+import {
+  SearchInputContent,
+  SearchInputRoot,
+  SearchInputSlot,
+  SearchInputAction,
+  SearchInputMask,
+  SearchInputText
+} from './search-input'
+
+interface SelectorOption {
+  label: string
+  value: string
+}
+
+interface SearchSelectorProps extends ComponentProps<'input'> {
+  options: SelectorOption[]
+  selectedSearchOption?: string
+  mask?: InputMaskType
+  customMask?: MaskOptions
+
+  onChangeSearchOption?: (option: string) => void
+}
+
+export function SearchSelector({
+  options,
+  mask,
+  customMask,
+  placeholder = 'Pesquisar',
+  onChangeSearchOption,
+  selectedSearchOption: initialSelectedSearchOption,
+  ...props
+}: SearchSelectorProps) {
+  const [selectedSearchOption, setSelectedSearchOption] = useState(
+    initialSelectedSearchOption
+  )
+
+  const selectedSearchLabel = useMemo(
+    () => options.find(option => option.value === selectedSearchOption)?.label,
+    [options, selectedSearchOption]
+  )
+
+  return (
+    <SearchInputRoot className="w-full" variant="action">
+      <SearchInputContent>
+        <SearchInputSlot>
+          <Icon className="text-icon-neutral-3" name="search" />
+        </SearchInputSlot>
+        {mask || customMask ? (
+          <SearchInputMask
+            customMask={customMask}
+            mask={mask}
+            placeholder={placeholder}
+            {...props}
+          />
+        ) : (
+          <SearchInputText placeholder={placeholder} {...props} />
+        )}
+      </SearchInputContent>
+
+      <DropdownMenuRoot>
+        <DropdownMenuTrigger asChild={true}>
+          <SearchInputAction>
+            {selectedSearchLabel}
+            <Icon className="text-icon-neutral-3" name="keyboard_arrow_down" />
+          </SearchInputAction>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuList>
+            {options.map(option => (
+              <DropdownMenuItem
+                isActive={selectedSearchOption === option.value}
+                key={option.value}
+                onClick={() => {
+                  setSelectedSearchOption(option.value)
+                  onChangeSearchOption?.(option.value)
+                }}
+              >
+                <DropdownMenuItemText>{option.label}</DropdownMenuItemText>
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuList>
+        </DropdownMenuContent>
+      </DropdownMenuRoot>
+    </SearchInputRoot>
+  )
+}

package/src/components/{form → controls}/select.tsx

@@ -29,7 +29,7 @@ export const select = tv({
       'transition-all duration-200'
     ],
     content: [
-      'group z-10 max-h-[var(--radix-popover-content-available-height)] max-w-[var(--radix-popover-content-available-width)] min-w-[var(--radix-popover-trigger-width)]'
+      'group z-1000 max-h-[var(--radix-popover-content-available-height)] max-w-[var(--radix-popover-content-available-width)] min-w-[var(--radix-popover-trigger-width)]'
     ],
     icon: 'size-large text-icon-neutral-3 flex items-center justify-center',
     slotText:

package/src/components/custom/pessoa/index.ts

@@ -0,0 +1,9 @@
+export * from './pessoa'
+export * from './pessoa.context'
+export * from './pessoa-add-button'
+export * from './pessoa-body'
+export * from './pessoa-content'
+export * from './pessoa-footer'
+export * from './pessoa-header'
+export * from './pessoa-trigger'
+export * from './pessoa-close-button'

package/src/components/custom/pessoa/pessoa-add-button.tsx

@@ -0,0 +1,35 @@
+import { twMerge } from '@xjur-ui/util'
+import { type ComponentProps, type MouseEvent, useCallback } from 'react'
+import { Button } from '../../controls/button'
+import { Icon } from '../../icon'
+import { usePessoaContext } from './pessoa.context'
+
+export function PessoaAddButton({
+  appearance = 'ghost',
+  onClick,
+  className,
+  children = 'Adicionar',
+  ...props
+}: ComponentProps<typeof Button>) {
+  const { changeCurrentView } = usePessoaContext()
+
+  const handleAddPessoaClick = useCallback(
+    (event: MouseEvent<HTMLButtonElement>) => {
+      changeCurrentView('form')
+      onClick?.(event)
+    },
+    [changeCurrentView, onClick]
+  )
+
+  return (
+    <Button
+      appearance={appearance}
+      className={twMerge('w-fit', className)}
+      onClick={handleAddPessoaClick}
+      {...props}
+    >
+      {children}
+      <Icon name="add" />
+    </Button>
+  )
+}

package/src/components/custom/pessoa/pessoa-body.tsx

@@ -0,0 +1,22 @@
+import { twMerge } from '@xjur-ui/util'
+import type { ComponentProps } from 'react'
+import { SheetBody } from '../../sheet'
+import { usePessoaContext } from './pessoa.context'
+
+export function PessoaBody({
+  className,
+  ...props
+}: ComponentProps<typeof SheetBody>) {
+  const { currentView } = usePessoaContext()
+
+  return (
+    <SheetBody
+      className={twMerge(
+        'gap-large-2x data-[view=form]:!px-none flex flex-col',
+        className
+      )}
+      data-view={currentView}
+      {...props}
+    />
+  )
+}

package/src/components/custom/pessoa/pessoa-close-button.tsx

@@ -0,0 +1,13 @@
+import type { ComponentProps } from 'react'
+import { SheetClose } from '../../sheet'
+import { Button } from '../../controls/button'
+
+export function PessoaCloseButton({
+  ...props
+}: ComponentProps<typeof SheetClose>) {
+  return (
+    <SheetClose {...props} asChild={true}>
+      <Button appearance="ghost">Cancelar</Button>
+    </SheetClose>
+  )
+}

package/src/components/custom/pessoa/pessoa-content.tsx

@@ -0,0 +1,25 @@
+import { twMerge } from '@xjur-ui/util'
+import type { ComponentProps } from 'react'
+import { SheetContent } from '../../sheet'
+import { usePessoaContext } from './pessoa.context'
+
+export function PessoaContent({
+  className,
+  side = 'right',
+  ...props
+}: ComponentProps<typeof SheetContent>) {
+  const { currentView, isFullscreen } = usePessoaContext()
+
+  return (
+    <SheetContent
+      className={twMerge(
+        'min-w-[900px] data-[fullscreen=true]:min-w-full',
+        className
+      )}
+      data-fullscreen={isFullscreen}
+      data-view={currentView}
+      side={side}
+      {...props}
+    />
+  )
+}

package/src/components/custom/pessoa/pessoa-footer.tsx

@@ -0,0 +1,15 @@
+import { twMerge } from '@xjur-ui/util'
+import type { ComponentProps } from 'react'
+import { SheetFooter } from '../../sheet'
+
+export function PessoaFooter({
+  className,
+  ...props
+}: ComponentProps<typeof SheetFooter>) {
+  return (
+    <SheetFooter
+      className={twMerge('flex items-center justify-between', className)}
+      {...props}
+    />
+  )
+}

package/src/components/custom/pessoa/pessoa-header.tsx

@@ -0,0 +1,35 @@
+import type { ComponentProps } from 'react'
+import { twMerge } from '@xjur-ui/util'
+import { SheetHeader, SheetTitle, SheetClose } from '../../sheet'
+import { Button } from '../../controls/button'
+import { Icon } from '../../icon'
+import { usePessoaContext } from './pessoa.context'
+
+export function PessoaHeader({
+  title,
+  className,
+  ...props
+}: ComponentProps<typeof SheetHeader> & { title: string }) {
+  const { changeIsFullscreen } = usePessoaContext()
+
+  return (
+    <SheetHeader
+      className={twMerge('flex items-center justify-between', className)}
+      {...props}
+    >
+      <SheetTitle>{title}</SheetTitle>
+
+      <div className="gap-small flex items-center">
+        <Button
+          appearance="ghost"
+          size="icon_md"
+          variant="tertiary"
+          onClick={() => changeIsFullscreen()}
+        >
+          <Icon className="text-icon-neutral-3" name="expand_content" />
+        </Button>
+        <SheetClose />
+      </div>
+    </SheetHeader>
+  )
+}

package/src/components/custom/pessoa/pessoa-trigger.tsx

@@ -0,0 +1,25 @@
+import type { ComponentProps } from 'react'
+import { Button } from '../../controls/button'
+import { SheetTrigger } from '../../sheet'
+import { Icon } from '../../icon'
+
+export function PessoaTrigger({
+  children = (
+    <Button
+      appearance="ghost"
+      className="border-border-layer-2 border"
+      variant="secondary"
+    >
+      <Icon className="text-icon-neutral-3" name="add" />
+      Adicionar
+    </Button>
+  ),
+  asChild = true,
+  ...props
+}: ComponentProps<typeof SheetTrigger>) {
+  return (
+    <SheetTrigger asChild={asChild} {...props}>
+      {children}
+    </SheetTrigger>
+  )
+}

package/src/components/custom/pessoa/pessoa.context.tsx

@@ -0,0 +1,73 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useState,
+  useMemo
+} from 'react'
+
+export interface PessoaContextValue {
+  currentView: 'list' | 'form'
+  isFullscreen: boolean
+  pessoas: unknown[]
+  changeCurrentView: (view: PessoaContextValue['currentView']) => void
+  changeIsFullscreen: () => void
+  setPessoas: React.Dispatch<React.SetStateAction<unknown[]>>
+}
+
+export const PessoaContext = createContext<PessoaContextValue>(
+  {} as PessoaContextValue
+)
+
+export function PessoaProvider({ children }: { children: React.ReactNode }) {
+  const [currentView, setCurrentView] = useState<'list' | 'form'>('list')
+  const [isFullscreen, setIsFullscreen] = useState(false)
+  const [pessoas, setPessoas] = useState<unknown[]>([])
+
+  const changeCurrentView = useCallback((view: 'list' | 'form') => {
+    setCurrentView(view)
+  }, [])
+
+  const changeIsFullscreen = useCallback(() => {
+    setIsFullscreen(state => !state)
+  }, [])
+
+  const providerValue = useMemo(
+    () => ({
+      currentView,
+      changeCurrentView,
+      isFullscreen,
+      changeIsFullscreen,
+      pessoas,
+      setPessoas
+    }),
+    [
+      currentView,
+      changeCurrentView,
+      isFullscreen,
+      changeIsFullscreen,
+      pessoas,
+      setPessoas
+    ]
+  )
+
+  return (
+    <PessoaContext.Provider value={providerValue}>
+      {children}
+    </PessoaContext.Provider>
+  )
+}
+
+export function usePessoaContext<T = unknown>() {
+  const context = useContext(PessoaContext)
+
+  if (!context) {
+    throw new Error('usePessoaContext must be used within a PessoaProvider')
+  }
+
+  return {
+    ...context,
+    pessoas: context.pessoas as T[],
+    setPessoas: context.setPessoas as React.Dispatch<React.SetStateAction<T[]>>
+  }
+}

package/src/components/custom/pessoa/pessoa.tsx

@@ -0,0 +1,35 @@
+import { type ComponentProps } from 'react'
+import { SheetRoot } from '../../sheet'
+import {
+  PessoaProvider,
+  PessoaContext,
+  type PessoaContextValue
+} from './pessoa.context'
+
+export function PessoaRoot({
+  onOpenChange,
+  children,
+  ...props
+}: Omit<ComponentProps<typeof SheetRoot>, 'children'> & {
+  children: React.ReactNode | ((context: PessoaContextValue) => React.ReactNode)
+}) {
+  return (
+    <PessoaProvider>
+      <PessoaContext.Consumer>
+        {pessoaContext => (
+          <SheetRoot
+            onOpenChange={open => {
+              pessoaContext.changeCurrentView('list')
+              onOpenChange?.(open)
+            }}
+            {...props}
+          >
+            {typeof children === 'function'
+              ? children(pessoaContext)
+              : children}
+          </SheetRoot>
+        )}
+      </PessoaContext.Consumer>
+    </PessoaProvider>
+  )
+}

package/src/components/dialog.tsx

@@ -1,7 +1,7 @@
 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 { Button } from './controls/button'
 import { Typography } from './typography'
 import { Icon } from './icon'
 

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-[var(--radix-popover-trigger-width)]',
+          'group z-1000 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/full-calendar/calendar-add-event.tsx

@@ -1,4 +1,4 @@
-import { Button } from '../form/button'
+import { Button } from '../controls/button'
 import { Icon } from '../icon'
 
 interface CalendarAddEventProps {

package/src/components/full-calendar/calendar-cell.tsx

@@ -3,7 +3,7 @@ import { useDroppable } from '@dnd-kit/core'
 import { cx, tv } from '@xjur-ui/util'
 import { isPast } from 'date-fns'
 import { Typography } from '../typography'
-import { Button } from '../form/button'
+import { Button } from '../controls/button'
 import { Icon } from '../icon'
 import { isToday } from './helpers/calendar'
 import { useFullCalendar } from './calendar-root'

package/src/components/full-calendar/calendar-more-events-dropdown.tsx

@@ -1,5 +1,5 @@
 import { Fragment } from 'react/jsx-runtime'
-import { Button } from '../form/button'
+import { Button } from '../controls/button'
 import {
   DropdownMenuRoot,
   DropdownMenuList,

package/src/components/full-calendar/calendar-navigator.tsx

@@ -12,7 +12,7 @@ import {
 import { ptBR } from 'date-fns/locale'
 import { capitalize } from '@xjur-ui/util'
 import { Typography } from '../typography'
-import { Button } from '../form/button'
+import { Button } from '../controls/button'
 import { Icon } from '../icon'
 import { useFullCalendar } from './calendar-root'
 import { getStartAndEndDateOfWeek } from './helpers/calendar'

package/src/components/full-calendar/calendar-today-button.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from 'react'
-import { Button, type ButtonProps } from '../form/button'
+import { Button, type ButtonProps } from '../controls/button'
 import { useFullCalendar } from './calendar-root'
 
 export function CalendarTodayButton({

package/src/components/full-calendar/calendar-toggle-view.tsx

@@ -8,7 +8,7 @@ import {
   SelectOptions,
   SelectOptionText,
   SelectIcon
-} from '../form/select'
+} from '../controls/select'
 import type { CalendarView } from './types/calendar-view'
 import { useFullCalendar } from './calendar-root'
 

package/src/components/horizontal-scroll.tsx

@@ -1,7 +1,7 @@
 import type { ComponentProps, ReactNode } from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { cx } from '@xjur-ui/util'
-import { Button } from './form/button'
+import { Button } from './controls/button'
 import { Icon } from './icon'
 
 export interface HorizontalScrollProps extends ComponentProps<'div'> {