@xjur-ui/react 2.1.0 → 2.2.0

package/src/components/form/input.tsx

@@ -1,235 +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,
-  ...props
-}: InputNumberFormatProps) {
-  const { state, variant } = useFieldContext()
-
-  return (
-    <InputNumberFormat
-      {...props}
-      className={value({ className, state })}
-      disabled={state === 'disabled'}
-      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/form/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/form/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>
-  )
-}