@xjur-ui/react 2.1.0 → 2.2.0

package/src/components/form/button.tsx

@@ -1,107 +0,0 @@
-import { Slot } from '@radix-ui/react-slot'
-import type { ComponentProps } from 'react'
-import { cva, cx, type ClassVariantProps } from '@xjur-ui/util'
-
-export const buttonVariants = cva(
-  [
-    'outline-none inline-flex items-center justify-center rounded-circle gap-small cursor-pointer disabled:opacity-38 disabled:pointer-events-none transition-colors'
-  ],
-  {
-    variants: {
-      size: {
-        md: 'py-small_1x-alt px-medium text-size-body-md',
-        sm: 'py-small-1x px-small text-size-label-sm',
-        icon_md: 'p-small text-size-body-md h-large-4x w-large-4x',
-        icon_sm: 'p-small-1x text-size-label-sm h-large-2x w-large-2x'
-      },
-      variant: {
-        primary: '',
-        secondary: '',
-        tertiary: '',
-        destructive: '',
-        outlined:
-          'bg-layer-2-idle border border-border-layer-2 hover:bg-layer-2-hover active:bg-layer-2-pressed'
-      },
-      appearance: {
-        solid: '',
-        ghost: 'bg-transparent'
-      }
-    },
-    compoundVariants: [
-      {
-        variant: 'primary',
-        appearance: 'solid',
-        class:
-          'bg-primary-idle text-neutral-label hover:bg-primary-hover active:bg-primary-pressed'
-      },
-      {
-        variant: 'primary',
-        appearance: 'ghost',
-        class:
-          'text-primary-idle hover:bg-primary-alt-idle active:bg-primary-alt-pressed'
-      },
-      {
-        variant: 'secondary',
-        appearance: 'solid',
-        class:
-          'bg-layer-1-hover text-neutral-dark hover:bg-layer-1-pressed active:bg-layer-1-active'
-      },
-      {
-        variant: 'secondary',
-        appearance: 'ghost',
-        class: 'hover:bg-layer-1-hover active:bg-layer-1-pressed'
-      },
-      {
-        variant: 'tertiary',
-        appearance: 'solid',
-        class:
-          'bg-layer-2-hover text-neutral-dark hover:bg-layer-2-pressed active:bg-layer-2-active'
-      },
-      {
-        variant: 'tertiary',
-        appearance: 'ghost',
-        class: 'hover:bg-layer-2-hover active:bg-layer-2-pressed'
-      },
-      {
-        variant: 'destructive',
-        appearance: 'solid',
-        class:
-          'bg-danger-idle text-neutral-label hover:bg-danger-hover active:bg-danger-pressed'
-      },
-      {
-        variant: 'destructive',
-        appearance: 'ghost',
-        class:
-          'text-danger-label-idle hover:bg-danger-alt-idle active:bg-danger-alt-pressed'
-      }
-    ],
-    defaultVariants: {
-      size: 'md',
-      variant: 'primary',
-      appearance: 'solid'
-    }
-  }
-)
-
-export interface ButtonProps
-  extends ComponentProps<'button'>,
-    ClassVariantProps<typeof buttonVariants> {
-  asChild?: boolean
-}
-
-export function Button({
-  asChild,
-  className,
-  variant = 'primary',
-  size = 'md',
-  appearance = 'solid',
-  ...props
-}: ButtonProps) {
-  const Component = asChild ? Slot : 'button'
-  return (
-    <Component
-      className={cx(buttonVariants({ variant, appearance, size }), className)}
-      {...props}
-    />
-  )
-}

package/src/components/form/calendar.tsx

@@ -1,124 +0,0 @@
-import 'react-day-picker/style.css'
-import { ptBR } from 'date-fns/locale'
-import { cx } from '@xjur-ui/util'
-import {
-  type DayPickerProps,
-  type ClassNames,
-  DayPicker,
-  getDefaultClassNames
-} from 'react-day-picker'
-import { Icon, type IconType } from '../icon'
-import { Button } from '../form/button'
-
-function capitalize(str: string) {
-  return str.charAt(0).toUpperCase() + str.slice(1)
-}
-
-export { type DateRange } from 'react-day-picker'
-
-export type CalendarProps = DayPickerProps & {
-  handleClear?: () => void
-  handleToday?: () => void
-}
-
-export function Calendar({
-  showOutsideDays = true,
-  locale = ptBR,
-  navLayout = 'around',
-  handleClear,
-  handleToday,
-  ...props
-}: CalendarProps) {
-  const defaultClassNames = getDefaultClassNames()
-
-  const classNames: Partial<ClassNames> = {
-    root: cx(
-      'bg-layer-2-idle shadow-elevation-2 rounded-[6px] p-small w-fit border border-border-layer-2 text-size-body-md text-neutral-dark font-inter',
-      defaultClassNames.root
-    ),
-    day: cx('rounded-circle  hover:bg-layer-2-hover'),
-    caption_label: cx(
-      'text-size-label-md text-neutral-dark font-medium',
-      defaultClassNames.caption_label
-    ),
-    outside: cx('text-neutral-placeholder', defaultClassNames.outside),
-    selected: cx(
-      'text-size-body-md bg-primary-alt-active text-primary-label-active font-medium hover:!bg-primary-alt-active'
-    ),
-    disabled: cx('opacity-60', defaultClassNames.disabled),
-    today: cx(
-      'text-neutral-dark font-medium bg-layer-2-active hover:!bg-layer-2-active'
-    ),
-    range_start: cx(
-      'rounded-r-none text-size-body-md bg-primary-alt-active text-primary-label-active font-medium hover:!bg-primary-alt-active'
-    ),
-    range_end: cx(
-      'rounded-l-none text-size-body-md bg-primary-alt-active text-primary-label-active font-medium hover:!bg-primary-alt-active'
-    ),
-    range_middle: cx(
-      '!bg-primary-alt-active !text-primary-label-active rounded-none hover:!bg-primary-alt-active'
-    )
-  }
-
-  return (
-    <DayPicker
-      classNames={{ ...classNames, ...props.classNames }}
-      components={{
-        Chevron: ({ orientation }) => {
-          const icon = orientation === 'left' ? 'chevron_left' : 'chevron_right'
-          return (
-            <Icon
-              className="size-large text-icon-neutral-3"
-              name={icon as IconType}
-            />
-          )
-        },
-        ...props.components
-      }}
-      footer={
-        (handleClear || handleToday) && (
-          <div className="py-small border-border-layer-2 mt-small flex h-full w-full items-center justify-between border-t">
-            {handleToday && (
-              <Button
-                appearance="ghost"
-                variant="secondary"
-                onClick={handleToday}
-              >
-                Hoje
-              </Button>
-            )}
-            {handleClear && (
-              <Button
-                appearance="ghost"
-                variant="secondary"
-                onClick={handleClear}
-              >
-                Limpar
-              </Button>
-            )}
-          </div>
-        )
-      }
-      formatters={{
-        formatWeekdayName: date => {
-          const weekday = date.toLocaleDateString('pt-BR', { weekday: 'short' })
-          return (
-            weekday.charAt(0).toUpperCase() + weekday.slice(1).replace('.', '')
-          )
-        },
-        formatCaption(month) {
-          const monthName = month.toLocaleDateString('pt-BR', {
-            month: 'long'
-          })
-          return `${capitalize(monthName)} ${month.getFullYear()}`
-        },
-        ...props.formatters
-      }}
-      locale={locale}
-      mode={props.mode ?? 'single'}
-      navLayout={navLayout}
-      showOutsideDays={showOutsideDays}
-      {...props}
-    />
-  )
-}

package/src/components/form/checkbox.tsx

@@ -1,57 +0,0 @@
-import * as CheckoxPrimitive from '@radix-ui/react-checkbox'
-import { cx } from '@xjur-ui/util'
-import { Icon } from '../icon'
-import { Typography } from '../typography'
-
-export function Checkbox({
-  label,
-  name,
-  className,
-  disabled = false,
-  ...props
-}: CheckoxPrimitive.CheckboxProps & {
-  label?: string
-}) {
-  const fieldId = `field-checkbox-${name}`
-
-  return (
-    <div className="group gap-small flex items-center">
-      <CheckoxPrimitive.Root
-        disabled={disabled}
-        {...props}
-        className={cx(
-          // layout
-          'size-large-alt rounded-small-1x inline-flex items-center justify-center transition-[border-color,box-shadow,background-color] duration-200 outline-none',
-          // base
-          'border-border-layer-2 bg-layer-2-idle cursor-pointer border-2',
-          // hover/focus (desmarcado)
-          'hover:border-primary-idle focus:border-primary-idle focus:shadow-focus-primary',
-          // estado checked
-          'data-[state=checked]:bg-primary-active data-[state=checked]:border-primary-active',
-          // hover quando estiver checked (opcional)
-          'data-[state=checked]:hover:border-primary-idle',
-          // disabled
-          'disabled:hover:border-border-layer-2 disabled:cursor-not-allowed disabled:opacity-[38%]',
-          className
-        )}
-        id={fieldId}
-        name={name}
-      >
-        <CheckoxPrimitive.Indicator className="flex items-center justify-center">
-          <Icon className="text-neutral-label" name="check" />
-        </CheckoxPrimitive.Indicator>
-      </CheckoxPrimitive.Root>
-
-      {!!label && (
-        <Typography
-          asChild={true}
-          className="text-size-body-sm data-[disabled=true]:opacity-38"
-          data-disabled={disabled}
-          weight="medium"
-        >
-          <label htmlFor={fieldId}>{label}</label>
-        </Typography>
-      )}
-    </div>
-  )
-}

package/src/components/form/context/field.context.ts

@@ -1,27 +0,0 @@
-import { createContext, useContext } from 'react'
-import type { MaskOptions } from '@react-input/mask'
-import type { InputMaskType } from '../../../resources/input-mask'
-
-export interface FieldContextValue {
-  state?: 'normal' | 'error' | 'disabled'
-  variant?: 'normal' | 'filter'
-  customMask?: MaskOptions
-  mask?: InputMaskType
-}
-
-export const FieldContext = createContext<FieldContextValue>({
-  state: 'normal',
-  variant: 'normal',
-  customMask: undefined,
-  mask: undefined
-})
-
-export function useFieldContext() {
-  const context = useContext(FieldContext)
-  if (!context) {
-    throw new Error(
-      'useFieldContext must be used within a InputRoot, SelectRoot, DatePickerRoot, etc.'
-    )
-  }
-  return context
-}

package/src/components/form/date-picker.tsx

@@ -1,199 +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 {
-  FieldContext,
-  useFieldContext,
-  type FieldContextValue
-} from './context/field.context'
-import { FloatingLabel } from './floating-label'
-
-export const datePicker = 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',
-      'py-small_1x-alt px-small',
-      'bg-layer-2-hover border border-transparent',
-      'group-has-[div[data-slot=input-action-slot]]:rounded-r-none',
-      '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)]'
-    ],
-    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-1 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 } = datePicker()
-
-export function DatePickerRoot({
-  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 DatePickerTrigger({
-  className,
-  ...props
-}: ComponentProps<typeof RadixPopover.Trigger>) {
-  const { state, variant } = useFieldContext()
-
-  const filterTrigger = tv({
-    base: ['group bg-layer-2-idle relative'],
-    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 DatePickerLabel(props: ComponentProps<typeof FloatingLabel>) {
-  return <FloatingLabel {...props} />
-}
-
-export function DatePickerIcon({
-  className,
-  name,
-  ...props
-}: ComponentProps<'div'> & {
-  name: IconType
-}) {
-  const { state } = useFieldContext()
-
-  return (
-    <div className={icon({ className, state })} {...props}>
-      <Icon name={name} />
-    </div>
-  )
-}
-
-export function DatePickerSlot({
-  className,
-  ...props
-}: ComponentProps<'span'>) {
-  const { state } = useFieldContext()
-  return <span className={slotText({ className, state })} {...props} />
-}
-
-export function DatePickerValue({
-  className,
-  displayValue = '',
-  value,
-  ...props
-}: ComponentProps<'input'> & { displayValue?: string }) {
-  const { variant } = useFieldContext()
-
-  const valueOrPlaceholder = useMemo(() => {
-    if (variant === 'filter') return displayValue
-    return displayValue || props.placeholder
-  }, [displayValue, props.placeholder, variant])
-
-  return (
-    <>
-      <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 ?? ''}
-      />
-    </>
-  )
-}
-
-export function DatePickerContent({
-  className,
-  sideOffset = 5,
-  side = 'bottom',
-  align = 'start',
-  ...props
-}: ComponentProps<typeof RadixPopover.Content>) {
-  const { state } = useFieldContext()
-
-  return (
-    <RadixPopover.Portal>
-      <RadixPopover.Content
-        align={align}
-        className={content({ className, state })}
-        side={side}
-        sideOffset={sideOffset}
-        {...props}
-      />
-    </RadixPopover.Portal>
-  )
-}
-
-export function DatePickerCaption({
-  className,
-  ...props
-}: ComponentProps<'p'>) {
-  const { state } = useFieldContext()
-  return <p className={caption({ className, state })} {...props} />
-}

package/src/components/form/floating-label.tsx

@@ -1,60 +0,0 @@
-import type { ComponentProps } from 'react'
-import { tv } from '@xjur-ui/util'
-import { useFieldContext } from './context/field.context'
-
-export function FloatingLabel({
-  className,
-  htmlFor,
-  children,
-  ...props
-}: ComponentProps<'label'>) {
-  const { state } = useFieldContext()
-
-  const label = tv({
-    base: [
-      'group inline-block max-w-full truncate text-left',
-      'ease animate-in left-small right-small pointer-events-none absolute top-1/2 -translate-y-1/2 transition-all duration-250',
-      'text-size-body-md',
-      // Filled
-      'group-focus-within:-top-[3px]',
-      'group-data-[state=open]:-top-[3px]',
-
-      'group-focus-within:text-size-label-sm-1x group-focus-within:font-medium',
-      'group-data-[state=open]:text-size-label-sm-1x group-data-[state=open]:font-medium',
-
-      'group-has-[input:not(:placeholder-shown)]:-top-[3px]',
-      'group-has-[input:not(:placeholder-shown)]:text-size-label-sm-1x',
-      'group-has-[input:not(:placeholder-shown)]:font-medium',
-      // If has left slot
-      'group-has-[div[data-slot=control-slot]]:left-large-4x',
-      'group-has-[div[data-slot=control-slot]]:group-focus-within:left-small',
-      'group-has-[div[data-slot=control-slot]]:group-has-[input:not(:placeholder-shown)]:left-small',
-      'group-has-[div[data-slot=control-slot]]:group-data-[state=open]:left-small',
-      // Animate
-      'group-focus-within:animate-in',
-      'group-has-[input:not(:placeholder-shown)]:animate-out',
-      'data-[disabled=true]:hidden'
-    ],
-    variants: {
-      state: {
-        normal: [
-          'group-focus-within:!text-primary-idle group-data-[state=open]:!text-primary-idle',
-          'group-has-[input:not(:placeholder-shown)]:!text-primary-idle'
-        ],
-        error: [
-          'group-focus-within:!text-danger-label-active group-data-[state=open]:!text-danger-label-active',
-          'group-has-[input:not(:placeholder-shown)]:!text-danger-label-active'
-        ],
-        disabled: []
-      }
-    }
-  })
-
-  return (
-    <label className={label({ className, state })} htmlFor={htmlFor} {...props}>
-      <span className="rounded-small-1x bg-layer-2-idle max-w-full">
-        {children}
-      </span>
-    </label>
-  )
-}