@xjur-ui/react 2.1.1 → 2.2.0

package/src/components/controls/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/controls/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>
-  )
-}

package/src/components/controls/input.tsx

@@ -1,237 +0,0 @@
-import { tv, twMerge } from '@xjur-ui/util'
-import type { ComponentProps } from 'react'
-import { InputMask as InputMaskComponent } from '@react-input/mask'
-import {
-  InputNumberFormat,
-  type InputNumberFormatProps
-} from '@react-input/number-format'
-import { Icon, type IconType } from '../icon'
-import { inputMask } from '../../resources/input-mask'
-import { Divider } from '../divider'
-import {
-  type FieldContextValue,
-  FieldContext,
-  useFieldContext
-} from './context/field.context'
-import { FloatingLabel } from './floating-label'
-
-export const input = tv({
-  slots: {
-    wrapper: 'group flex w-full flex-col gap-small-2x',
-    trigger: [
-      'h-large-4x w-full 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: 'flex w-full',
-    value:
-      'text-size-body-md font-normal placeholder:text-neutral-placeholder flex-1 outline-none',
-    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',
-    action: 'h-large-4x overflow-hidden'
-  },
-  variants: {
-    state: {
-      normal: {
-        trigger:
-          'hover:border-border-layer-1 focus-within:border-primary-idle focus-within:hover:border-primary-idle'
-      },
-      error: {
-        trigger:
-          'border-danger-idle hover:border-danger-idle focus-within:border-danger-idle focus-within:hover:border-danger-idle',
-        caption: 'text-danger-label-idle'
-      },
-      disabled: {
-        trigger: 'pointer-events-none border-transparent bg-layer-2-idle'
-      }
-    }
-  }
-})
-
-const { wrapper, trigger, content, value, icon, caption, action, slotText } =
-  input()
-
-export function InputRoot({
-  className,
-  state = 'normal',
-  customMask,
-  variant = 'normal',
-  mask,
-  ...props
-}: ComponentProps<'div'> & FieldContextValue) {
-  return (
-    <FieldContext.Provider value={{ state, customMask, mask, variant }}>
-      <div className={wrapper({ className, state })} {...props} />
-    </FieldContext.Provider>
-  )
-}
-
-export function InputContent({ className, ...props }: ComponentProps<'div'>) {
-  const { state } = useFieldContext()
-  return <div className={content({ className, state })} {...props} />
-}
-
-export function InputLabel(props: ComponentProps<typeof FloatingLabel>) {
-  return <FloatingLabel {...props} />
-}
-
-export function InputTrigger({ className, ...props }: ComponentProps<'div'>) {
-  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 (
-    <div
-      aria-disabled={state === 'disabled'}
-      className={mergedClassName}
-      {...props}
-    />
-  )
-}
-
-export function InputMask({
-  className,
-  placeholder,
-  ...props
-}: ComponentProps<'input'>) {
-  const { customMask, state, mask, variant } = useFieldContext()
-
-  return (
-    <InputMaskComponent
-      {...props}
-      {...(mask ? { ...inputMask(mask) } : customMask && { ...customMask })}
-      className={value({ className, state })}
-      disabled={state === 'disabled'}
-      placeholder={variant === 'filter' ? ' ' : placeholder}
-      readOnly={state === 'disabled'}
-    />
-  )
-}
-
-export function InputText({
-  className,
-  placeholder,
-  ...props
-}: ComponentProps<'input'>) {
-  const { state, variant } = useFieldContext()
-
-  return (
-    <input
-      {...props}
-      className={value({ className, state })}
-      disabled={state === 'disabled'}
-      placeholder={variant === 'filter' ? ' ' : placeholder}
-      readOnly={state === 'disabled'}
-    />
-  )
-}
-
-export function InputNumber({
-  className,
-  locales = 'pt-BR',
-  placeholder,
-  groupDisplay = false,
-  ...props
-}: InputNumberFormatProps) {
-  const { state, variant } = useFieldContext()
-
-  return (
-    <InputNumberFormat
-      {...props}
-      className={value({ className, state })}
-      disabled={state === 'disabled'}
-      groupDisplay={groupDisplay}
-      locales={locales}
-      placeholder={variant === 'filter' ? ' ' : placeholder}
-      readOnly={state === 'disabled'}
-    />
-  )
-}
-
-export function InputIcon({
-  className,
-  name,
-  ...props
-}: ComponentProps<'div'> & {
-  name: IconType
-}) {
-  const { state } = useFieldContext()
-
-  return (
-    <div className={icon({ className, state })} {...props}>
-      <Icon name={name} />
-    </div>
-  )
-}
-
-export function InputSlot({ className, ...props }: ComponentProps<'span'>) {
-  const { state } = useFieldContext()
-  return <span className={slotText({ className, state })} {...props} />
-}
-
-export function InputCaption({ className, ...props }: ComponentProps<'p'>) {
-  const { state } = useFieldContext()
-  return <p className={caption({ className, state })} {...props} />
-}
-
-export function InputAction({ className, ...props }: ComponentProps<'div'>) {
-  const { state } = useFieldContext()
-  return (
-    <div
-      className={action({ className, state })}
-      data-slot="input-action-slot"
-      {...props}
-    />
-  )
-}
-
-export function InputNumericStepper({
-  handleIncrement,
-  handleDecrement
-}: {
-  handleIncrement: () => void
-  handleDecrement: () => void
-}) {
-  return (
-    <InputAction className="w-large-4x border-border-layer-2 rounded-r-small-1x bg-layer-2-hover flex flex-col items-center justify-center border">
-      <button
-        className="flex h-1/2 items-center justify-center"
-        type="button"
-        onClick={handleIncrement}
-      >
-        <Icon className="text-icon-neutral-3" name="keyboard_arrow_up" />
-      </button>
-
-      <Divider />
-
-      <button
-        className="flex h-1/2 items-center justify-center"
-        type="button"
-        onClick={handleDecrement}
-      >
-        <Icon className="text-icon-neutral-3" name="keyboard_arrow_down" />
-      </button>
-    </InputAction>
-  )
-}

package/src/components/controls/otp-input.tsx

@@ -1,45 +0,0 @@
-import * as OTPPasswordField from '@radix-ui/react-one-time-password-field'
-import { cx } from '@xjur-ui/util'
-
-function Root({
-  children,
-  className,
-  ...props
-}: OTPPasswordField.OneTimePasswordFieldProps) {
-  return (
-    <OTPPasswordField.Root
-      className={cx(className, 'group gap-small flex items-center')}
-      {...props}
-    >
-      {children}
-    </OTPPasswordField.Root>
-  )
-}
-
-function Input({
-  className,
-  ...props
-}: OTPPasswordField.OneTimePasswordFieldInputProps) {
-  return (
-    <OTPPasswordField.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:border'
-      )}
-      {...props}
-    />
-  )
-}
-
-function HiddenInput({
-  ...props
-}: OTPPasswordField.OneTimePasswordFieldHiddenInputProps) {
-  return <OTPPasswordField.HiddenInput {...props} />
-}
-
-export const OTPInput = {
-  Root,
-  Input,
-  HiddenInput
-}

package/src/components/controls/radio.tsx

@@ -1,74 +0,0 @@
-import * as React from 'react'
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
-import { cx } from '@xjur-ui/util'
-import { Typography } from '../typography'
-
-export function RadioGroup({
-  className,
-  orientation = 'vertical',
-  ...props
-}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
-  return (
-    <RadioGroupPrimitive.Root
-      className={cx(
-        'gap-small flex data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col',
-        className
-      )}
-      data-orientation={orientation}
-      data-slot="radio-group"
-      {...props}
-    />
-  )
-}
-
-export function RadioItem({
-  className,
-  id,
-  label,
-  disabled = false,
-  ...props
-}: React.ComponentProps<typeof RadioGroupPrimitive.Item> & {
-  label?: string
-}) {
-  return (
-    <div className="gap-small flex items-center">
-      <RadioGroupPrimitive.Item
-        className={cx(
-          // layout
-          'size-large-alt rounded-circle 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
-        )}
-        data-slot="radio-group-item"
-        disabled={disabled}
-        id={id}
-        {...props}
-      >
-        <RadioGroupPrimitive.Indicator
-          className="relative flex items-center justify-center"
-          data-slot="radio-group-indicator"
-        />
-      </RadioGroupPrimitive.Item>
-
-      {!!label && (
-        <Typography
-          asChild={true}
-          className="text-size-body-sm data-[disabled=true]:opacity-38"
-          data-disabled={disabled}
-          weight="medium"
-        >
-          <label htmlFor={id}>{label}</label>
-        </Typography>
-      )}
-    </div>
-  )
-}