@xjur-ui/react 2.0.0 → 2.1.1

package/src/components/controls/select.tsx

@@ -0,0 +1,274 @@
+import { tv, twJoin, twMerge } from '@xjur-ui/util'
+import { useMemo, type ComponentProps } from 'react'
+import * as RadixPopover from '@radix-ui/react-popover'
+import { Icon, type IconType } from '../icon'
+import { Typography } from '../typography'
+import {
+  ListHeaderTitle,
+  ListHeader,
+  ListContent,
+  ListItem,
+  ListRoot
+} from '../list'
+import {
+  FieldContext,
+  useFieldContext,
+  type FieldContextValue
+} from './context/field.context'
+import { FloatingLabel } from './floating-label'
+
+export const select = tv({
+  slots: {
+    wrapper: 'group flex w-full flex-col gap-small-2x',
+    trigger: [
+      'h-large-4x w-full cursor-pointer relative',
+      'flex items-center gap-small rounded-small-1x justify-between',
+      'py-small_1x-alt px-small',
+      'bg-layer-2-idle border border-border-layer-2',
+      'group-has-[div[data-slot=input-action-slot]]:rounded-r-none',
+      'transition-all duration-200'
+    ],
+    content: [
+      '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:
+      'size-large flex items-center justify-center !text-size-label-md text-neutral-placeholder',
+    caption: '!text-size-body-sm font-normal'
+  },
+  variants: {
+    state: {
+      normal: {
+        trigger:
+          'hover:border-border-layer-3 data-[state=open]:border-primary-idle data-[state=open]:hover:border-primary-idle'
+      },
+      error: {
+        trigger:
+          'border-danger-idle hover:border-danger-idle data-[state=open]:border-danger-idle data-[state=open]:hover:border-danger-idle',
+        caption: 'text-danger-label-idle'
+      },
+      disabled: {
+        trigger: 'pointer-events-none border-transparent bg-layer-2-idle'
+      }
+    }
+  }
+})
+
+const { wrapper, trigger, icon, caption, slotText, content } = select()
+
+export function SelectRoot({
+  className,
+  state = 'normal',
+  defaultOpen,
+  variant = 'normal',
+  modal,
+  open,
+  onOpenChange: handleOpenChange,
+  ...props
+}: ComponentProps<'div'> &
+  FieldContextValue &
+  ComponentProps<typeof RadixPopover.Root>) {
+  return (
+    <RadixPopover.Root
+      defaultOpen={defaultOpen}
+      modal={modal}
+      open={open}
+      onOpenChange={handleOpenChange}
+    >
+      <FieldContext.Provider value={{ state, variant }}>
+        <div className={wrapper({ className, state })} {...props} />
+      </FieldContext.Provider>
+    </RadixPopover.Root>
+  )
+}
+
+export function SelectTrigger({
+  className,
+  ...props
+}: ComponentProps<typeof RadixPopover.Trigger>) {
+  const { state, variant } = useFieldContext()
+
+  const filterTrigger = tv({
+    base: ['group bg-layer-2-idle'],
+    variants: {
+      state: {
+        normal: [
+          'border-border-layer-2 hover:border-border-layer-3 has-[input:not(:placeholder-shown)]:border-primary-idle'
+        ],
+        error: ['border-danger-idle hover:border-danger-idle'],
+        disabled: ['border border-border-layer-2 opacity-60']
+      }
+    }
+  })
+
+  const mergedClassName = twMerge(
+    trigger({ state, className }),
+    variant === 'filter' && filterTrigger({ state, className })
+  )
+
+  return (
+    <RadixPopover.Trigger
+      className={mergedClassName}
+      disabled={state === 'disabled'}
+      {...props}
+    />
+  )
+}
+
+export function SelectIcon({
+  className,
+  name,
+  ...props
+}: ComponentProps<'div'> & {
+  name: IconType
+}) {
+  const { state } = useFieldContext()
+
+  return (
+    <div className={icon({ className, state })} {...props}>
+      <Icon name={name} />
+    </div>
+  )
+}
+
+export function SelectLabel(props: ComponentProps<typeof FloatingLabel>) {
+  return <FloatingLabel {...props} />
+}
+
+export function SelectValue({
+  className,
+  displayValue = '',
+  value,
+  placeholder,
+  ...props
+}: ComponentProps<'input'> & { displayValue?: string }) {
+  const { variant } = useFieldContext()
+
+  const valueOrPlaceholder = useMemo(() => {
+    if (variant === 'filter') return displayValue
+    return displayValue || placeholder
+  }, [displayValue, placeholder, variant])
+
+  return (
+    <div className="flex w-full">
+      <Typography className="text-neutral-dark group-has-[div[data-slot=date-picker-left-slot]]:pl-large-1x">
+        {valueOrPlaceholder}
+      </Typography>
+
+      <input
+        {...props}
+        aria-readonly={true}
+        className={twJoin('pointer-events-none', className)}
+        hidden={true}
+        placeholder={' '}
+        readOnly={true}
+        value={value ?? ''}
+      />
+    </div>
+  )
+}
+
+export function SelectMultiValue({
+  className,
+  value,
+  placeholder,
+  children,
+  ...props
+}: ComponentProps<'input'>) {
+  const { variant } = useFieldContext()
+
+  const shouldShowPlaceholder = useMemo(() => {
+    if (variant === 'filter') return false
+    return Array.isArray(value) && value.length === 0 && placeholder
+  }, [value, placeholder, variant])
+
+  return (
+    <div
+      className={twMerge(
+        className,
+        'gap-small-1x scrollbar-hide flex w-full overflow-x-hidden',
+        'group-disabled:!pl-0'
+      )}
+    >
+      {shouldShowPlaceholder && (
+        <Typography className="text-neutral-dark group-has-[div[data-slot=date-picker-left-slot]]:pl-large-1x">
+          {placeholder}
+        </Typography>
+      )}
+
+      {children}
+
+      <input
+        {...props}
+        aria-readonly={true}
+        className={twMerge(className, 'pointer-events-none')}
+        hidden={true}
+        placeholder={' '}
+        readOnly={true}
+        value={value}
+      />
+    </div>
+  )
+}
+
+export function SelectContent({
+  className,
+  sideOffset = 5,
+  side = 'bottom',
+  align = 'start',
+  children,
+  ...props
+}: ComponentProps<typeof RadixPopover.Content>) {
+  const { state } = useFieldContext()
+
+  return (
+    <RadixPopover.Portal>
+      <RadixPopover.Content
+        align={align}
+        className={content({ className, state })}
+        side={side}
+        sideOffset={sideOffset}
+        {...props}
+      >
+        <ListRoot>{children}</ListRoot>
+      </RadixPopover.Content>
+    </RadixPopover.Portal>
+  )
+}
+
+export function SelectCaption({ className, ...props }: ComponentProps<'p'>) {
+  const { state } = useFieldContext()
+  return <p className={caption({ className, state })} {...props} />
+}
+
+export function SelectSlot({ className, ...props }: ComponentProps<'span'>) {
+  const { state } = useFieldContext()
+  return <span className={slotText({ className, state })} {...props} />
+}
+
+export function SelectOptions(props: ComponentProps<typeof ListContent>) {
+  return <ListContent {...props} />
+}
+
+export function SelectOption({
+  className,
+  ...props
+}: ComponentProps<typeof ListItem>) {
+  return (
+    <ListItem className={twMerge(className, 'cursor-pointer')} {...props} />
+  )
+}
+
+export function SelectOptionText(props: ComponentProps<typeof Typography>) {
+  return <Typography {...props} />
+}
+
+export function SelectHeader(props: ComponentProps<typeof ListHeader>) {
+  return <ListHeader {...props} />
+}
+
+export function SelectHeaderTitle(
+  props: ComponentProps<typeof ListHeaderTitle>
+) {
+  return <ListHeaderTitle {...props} />
+}

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