@xjur-ui/react 2.1.1 → 2.2.0

package/src/components/controls/select.tsx

@@ -1,274 +0,0 @@
-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/controls/switch.tsx

@@ -1,31 +0,0 @@
-import * as React from 'react'
-import * as SwitchPrimitive from '@radix-ui/react-switch'
-import { cx } from '@xjur-ui/util'
-
-function Switch({
-  className,
-  ...props
-}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
-  return (
-    <SwitchPrimitive.Root
-      className={cx(
-        'w-large-3x h-large rounded-circle inline-flex shrink-0 items-center border border-transparent',
-        'peer data-[state=checked]:bg-primary-idle data-[state=unchecked]:bg-alt-4',
-        'focus-visible:border-ring focus-visible:ring-ring/50 transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50',
-        'hover:shadow-focus-primary p-[2px]',
-        className
-      )}
-      data-slot="switch"
-      {...props}
-    >
-      <SwitchPrimitive.Thumb
-        className={cx(
-          'bg-layer-2-idle size-medium pointer-events-none rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'
-        )}
-        data-slot="switch-thumb"
-      />
-    </SwitchPrimitive.Root>
-  )
-}
-
-export { Switch }

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

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

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

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

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

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

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

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

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

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

@@ -1,35 +0,0 @@
-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>
-  )
-}