@xjur-ui/react 2.0.0 → 2.1.0

package/src/components/date-picker.tsx

@@ -1,263 +0,0 @@
-import { createContext, useContext } from 'react'
-import type { ComponentProps } from 'react'
-import * as RadixPopover from '@radix-ui/react-popover'
-import { tv, twJoin, twMerge } from '@xjur-ui/util'
-import { Typography, type TypographyProps } from './typography'
-
-const DatePickerContext = createContext({
-  disabled: false,
-  variant: 'filled' as 'filled' | 'outlined',
-  hasError: false
-})
-
-function useDatePicker() {
-  const context = useContext(DatePickerContext)
-  if (!context) {
-    throw new Error('useDatePicker must be used within a DatePickerRoot')
-  }
-  return context
-}
-
-export function DatePickerRoot({
-  disabled = false,
-  variant = 'filled',
-  hasError = false,
-  ...props
-}: ComponentProps<typeof RadixPopover.Root> & {
-  disabled?: boolean
-  variant?: 'filled' | 'outlined'
-  hasError?: boolean
-}) {
-  return (
-    <DatePickerContext.Provider value={{ disabled, variant, hasError }}>
-      <RadixPopover.Root {...props} />
-    </DatePickerContext.Provider>
-  )
-}
-
-export function DatePickerTrigger({
-  className,
-  ...props
-}: ComponentProps<typeof RadixPopover.Trigger>) {
-  const { disabled, variant, hasError } = useDatePicker()
-
-  const trigger = tv({
-    base: twMerge(
-      'border border-transparent group h-large-4x rounded-small-1x gap-small py-small_1x-alt px-small relative flex w-full items-center cursor-pointer',
-      'data-[state=open]:border-primary-idle',
-      'has-[input:not(:placeholder-shown)]:text-primary-idle',
-      'has-[input:not(:placeholder-shown)]:border-primary-idle',
-      'focus-within:border-primary-idle focus-within:hover:border-primary-idle',
-      'hover:border-border-layer-1'
-    ),
-    variants: {
-      variant: {
-        filled: 'bg-layer-2-hover',
-        outlined:
-          'bg-layer-2-idle border-border-layer-2 hover:border-border-layer-3',
-        disabled:
-          'hover:border-transparent border-none bg-layer-2-idle cursor-text select-text'
-      },
-      state: {
-        idle: '',
-        error: twMerge(
-          'focus-within:border-danger-idle hover:border-danger-idle border-danger-idle focus-within:hover:border-danger-idle',
-          'data-[state=open]:border-danger-idle has-[input:not(:placeholder-shown)]:border-danger-idle'
-        )
-      }
-    },
-    defaultVariants: {
-      variant: 'filled',
-      state: 'idle'
-    }
-  })
-
-  return (
-    <RadixPopover.Trigger
-      className={trigger({
-        variant: disabled ? 'disabled' : variant,
-        state: hasError ? 'error' : 'idle',
-        className
-      })}
-      {...props}
-      disabled={disabled}
-    />
-  )
-}
-
-export function DatePickerContent({
-  className,
-  sideOffset = 5,
-  side = 'bottom',
-  align = 'start',
-  ...props
-}: ComponentProps<typeof RadixPopover.Content>) {
-  return (
-    <RadixPopover.Portal>
-      <RadixPopover.Content
-        align={align}
-        className={twJoin(
-          className,
-          '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)]'
-        )}
-        side={side}
-        sideOffset={sideOffset}
-        {...props}
-      />
-    </RadixPopover.Portal>
-  )
-}
-
-export function DatePickerValue({
-  className,
-  displayValue = '',
-  value,
-  ...props
-}: ComponentProps<'input'> & { displayValue?: string }) {
-  return (
-    <>
-      {!!displayValue && (
-        <Typography className="text-neutral-dark group-has-[div[data-slot=date-picker-left-slot]]:pl-large-1x">
-          {displayValue}
-        </Typography>
-      )}
-
-      <input
-        {...props}
-        aria-readonly={true}
-        className={twJoin('pointer-events-none', className)}
-        hidden={true}
-        placeholder={props.placeholder ?? ' '}
-        readOnly={true}
-        value={value ?? ''}
-      />
-    </>
-  )
-}
-
-export function DatePickerLabel({
-  className,
-  htmlFor,
-  children,
-  ...props
-}: TypographyProps & { htmlFor?: string }) {
-  const { variant, disabled, hasError } = useDatePicker()
-
-  return (
-    <Typography
-      asChild={true}
-      className={twJoin(
-        'group inline-block max-w-full truncate text-left font-normal',
-        'left-small right-small pointer-events-none absolute top-1/2 -translate-y-1/2',
-        'ease transition-all duration-250',
-        // Content Open
-        'group-data-[state=open]:text-primary-idle group-data-[state=open]:data-[error=true]:text-danger-label-active',
-        'group-data-[state=open]:-top-[3px]',
-        'group-data-[state=open]:text-size-label-sm-1x',
-        'group-data-[state=open]:font-medium',
-        // Filled
-        'group-has-[input:not(:placeholder-shown)]:text-primary-idle group-has-[input:not(:placeholder-shown)]:data-[error=true]:text-danger-label-active',
-        '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=date-picker-left-slot]]:left-large-4x',
-        'group-has-[div[data-slot=date-picker-left-slot]]:group-data-[state=open]:left-small',
-        'group-has-[div[data-slot=date-picker-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-small',
-        // If has right slot
-        'group-has-[div[data-slot=date-picker-right-slot]]:right-large-4x',
-        'group-has-[div[data-slot=date-picker-right-slot]]:group-data-[state=open]:right-small',
-        'group-has-[div[data-slot=date-picker-right-slot]]:group-has-[input:not(:placeholder-shown)]:right-small',
-        // Animate
-        'group-data-[state=open]:animate-in',
-        'group-data-[state=closed]:animate-out',
-        'group-has-[input:not(:placeholder-shown)]:animate-out',
-        'data-[disabled=true]:hidden',
-
-        className
-      )}
-      data-disabled={disabled}
-      data-error={hasError}
-      data-variant={variant}
-      weight="medium"
-      {...props}
-    >
-      <label htmlFor={htmlFor}>
-        <span
-          className={twJoin(
-            'rounded-small-1x max-w-full',
-            'group-data-[variant=outlined]:bg-layer-2-idle',
-            'group-data-[variant=filled]:bg-layer-2-hover'
-          )}
-        >
-          {children}
-        </span>
-      </label>
-    </Typography>
-  )
-}
-
-export function DatePickerLeftSlot({
-  className,
-  ...props
-}: ComponentProps<'div'>) {
-  return (
-    <div
-      {...props}
-      className={twJoin(
-        className,
-        'left-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center'
-      )}
-      data-slot="date-picker-left-slot"
-    />
-  )
-}
-
-export function DatePickerRightSlot({
-  className,
-  ...props
-}: ComponentProps<'div'>) {
-  return (
-    <div
-      {...props}
-      className={twJoin(
-        className,
-        'right-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center'
-      )}
-      data-slot="date-picker-right-slot"
-    />
-  )
-}
-
-export function DatePickerCaption({
-  className,
-  variant = 'body',
-  size = 'sm',
-  weight = 'normal',
-  ...props
-}: ComponentProps<typeof Typography>) {
-  const { hasError } = useDatePicker()
-
-  const caption = tv({
-    base: 'text-size-body-sm mt-small-1x font-normal',
-    variants: {
-      state: {
-        error: 'text-danger-label-active',
-        idle: 'text-neutral-dark'
-      }
-    }
-  })
-
-  return (
-    <Typography
-      className={caption({
-        state: hasError ? 'error' : 'idle',
-        className
-      })}
-      size={size}
-      variant={variant}
-      weight={weight}
-      {...props}
-    />
-  )
-}

package/src/components/input.tsx

@@ -1,320 +0,0 @@
-import { tv, twMerge } from '@xjur-ui/util'
-import type { ComponentProps } from 'react'
-import { createContext, useContext, useMemo } from 'react'
-import { InputMask, type MaskOptions } from '@react-input/mask'
-import {
-  InputNumberFormat,
-  type InputNumberFormatProps
-} from '@react-input/number-format'
-import { inputMask, type InputMaskType } from '../resources/input-mask'
-import { Typography } from './typography'
-
-export { inputMask, type InputMaskType, type MaskOptions }
-
-export type InputProps = {
-  variant?: 'outlined' | 'filled'
-  disabled?: boolean
-  hasError?: boolean
-}
-
-const FieldContext = createContext<InputProps>({
-  variant: 'filled',
-  disabled: false,
-  hasError: false
-})
-
-function useInput() {
-  const context = useContext(FieldContext)
-  if (!context) {
-    throw new Error('useInput must be used within a InputRoot')
-  }
-  return context
-}
-
-export function InputRoot({
-  className,
-  children,
-  variant = 'filled',
-  disabled = false,
-  hasError = false,
-  ...props
-}: ComponentProps<'div'> & InputProps) {
-  const providerValue = useMemo(
-    () => ({ variant, disabled, hasError }),
-    [variant, disabled, hasError]
-  )
-
-  return (
-    <FieldContext.Provider value={providerValue}>
-      <div
-        className={twMerge('group relative flex w-full flex-col', className)}
-        {...props}
-      >
-        {children}
-      </div>
-    </FieldContext.Provider>
-  )
-}
-
-export function InputContent({ className, ...props }: ComponentProps<'div'>) {
-  const content = tv({
-    base: twMerge(
-      'border border-transparent relative h-large-4x rounded-small-1x gap-small py-small_1x-alt px-small flex items-center w-full',
-      'group-has-[div[data-slot=input-right-action-slot]]:rounded-r-none',
-      'group-has-[div[data-slot=input-left-action-slot]]:rounded-l-none',
-      'focus-within:border-primary-idle focus-within:hover:border-primary-idle',
-      'hover:border-border-layer-1'
-    ),
-    variants: {
-      variant: {
-        filled: 'bg-layer-2-hover',
-        outlined:
-          'bg-layer-2-idle border-border-layer-2 hover:border-border-layer-3',
-        disabled: 'hover:border-transparent border-none bg-layer-2-idle'
-      },
-      state: {
-        idle: '',
-        error:
-          'focus-within:border-danger-idle hover:border-danger-idle border-danger-idle focus-within:hover:border-danger-idle'
-      }
-    },
-    defaultVariants: {
-      variant: 'filled',
-      state: 'idle'
-    }
-  })
-
-  return (
-    <FieldContext.Consumer>
-      {({ variant, disabled, hasError }) => {
-        return (
-          <div
-            className={content({
-              variant: disabled ? 'disabled' : variant,
-              state: hasError ? 'error' : 'idle',
-              className
-            })}
-            {...props}
-          />
-        )
-      }}
-    </FieldContext.Consumer>
-  )
-}
-
-export function InputLabel({
-  htmlFor,
-  className,
-  children,
-  ...props
-}: ComponentProps<typeof Typography> & { htmlFor: string }) {
-  return (
-    <FieldContext.Consumer>
-      {({ variant, disabled, hasError }) => {
-        return (
-          <Typography
-            asChild={true}
-            className={twMerge(
-              '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',
-              // Filled
-              'group-focus-within:!text-primary-idle group-focus-within:data-[has-error=true]:!text-danger-label-active group-focus-within:-top-[3px]',
-              'group-focus-within:text-size-label-sm-1x group-focus-within: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',
-              'group-has-[input:not(:placeholder-shown)]:!text-primary-idle',
-              'group-has-[input:not(:placeholder-shown)]:!text-danger-label-active',
-              // If has left slot
-              'group-has-[div[data-slot=input-left-slot]]:left-large-4x',
-              'group-has-[div[data-slot=input-left-slot]]:group-focus-within:left-small',
-              'group-has-[div[data-slot=input-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-small',
-              // If has right slot
-              'group-has-[div[data-slot=input-right-slot]]:right-large-4x',
-              'group-has-[div[data-slot=input-right-slot]]:group-focus-within:right-small',
-              'group-has-[div[data-slot=input-right-slot]]:group-has-[input:not(:placeholder-shown)]:right-small',
-              // Animate
-              'group-focus-within:animate-in',
-              'group-has-[input:not(:placeholder-shown)]:animate-out',
-              'data-[disabled=true]:hidden',
-              className
-            )}
-            data-disabled={disabled}
-            data-has-error={hasError}
-            data-variant={variant}
-            {...props}
-          >
-            <label htmlFor={htmlFor}>
-              <span
-                className={twMerge(
-                  'rounded-small-1x max-w-full',
-                  'group-data-[variant=outlined]:group-focus-within:bg-layer-2-idle group-data-[variant=filled]:group-focus-within:bg-layer-2-hover',
-                  'group-data-[variant=outlined]:bg-layer-2-idle group-data-[variant=filled]:bg-layer-2-hover'
-                )}
-              >
-                {children}
-              </span>
-            </label>
-          </Typography>
-        )
-      }}
-    </FieldContext.Consumer>
-  )
-}
-
-export function InputText({
-  className,
-  maskOptions,
-  maskType,
-  ...props
-}: ComponentProps<'input'> & {
-  maskOptions?: MaskOptions
-  maskType?: InputMaskType
-}) {
-  const { disabled } = useInput()
-  const Component = maskOptions || maskType ? InputMask : 'input'
-
-  return (
-    <Component
-      {...props}
-      disabled={disabled}
-      {...(maskType
-        ? { ...inputMask(maskType) }
-        : maskOptions && { ...maskOptions })}
-      className={twMerge(
-        className,
-        'peer !text-size-body-md text-neutral-dark flex-1 outline-none',
-        'group-has-[div[data-slot=input-left-slot]]:pl-large-1x ml-small-1x'
-      )}
-      placeholder={props.placeholder || ' '}
-      {...(maskOptions && { ...maskOptions })}
-    />
-  )
-}
-
-export function InputNumber({
-  className,
-  locales = 'pt-BR',
-  ...props
-}: InputNumberFormatProps) {
-  const { disabled } = useInput()
-  return (
-    <InputNumberFormat
-      {...props}
-      className={twMerge(
-        className,
-        'peer !text-size-body-md text-neutral-dark flex-1 font-medium outline-none',
-        'group-has-[div[data-slot=input-left-slot]]:pl-large-1x ml-small-1x'
-      )}
-      disabled={disabled}
-      locales={locales}
-      placeholder={props.placeholder || ' '}
-    />
-  )
-}
-
-export function InputLeftSlot({ className, ...props }: ComponentProps<'div'>) {
-  return (
-    <div
-      {...props}
-      className={twMerge(
-        className,
-        'left-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center'
-      )}
-      data-slot="input-left-slot"
-    />
-  )
-}
-
-export function InputRightSlot({ className, ...props }: ComponentProps<'div'>) {
-  return (
-    <div
-      {...props}
-      className={twMerge(
-        className,
-        'right-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center'
-      )}
-      data-slot="input-right-slot"
-    />
-  )
-}
-
-export function InputCaption({
-  className,
-  variant = 'body',
-  size = 'sm',
-  weight = 'normal',
-  ...props
-}: ComponentProps<typeof Typography>) {
-  const { hasError } = useInput()
-
-  const caption = tv({
-    base: 'text-size-body-sm mt-small-1x font-normal',
-    variants: {
-      state: {
-        error: 'text-danger-label-active',
-        idle: 'text-neutral-dark'
-      }
-    }
-  })
-
-  return (
-    <Typography
-      className={caption({
-        state: hasError ? 'error' : 'idle',
-        className
-      })}
-      size={size}
-      variant={variant}
-      weight={weight}
-      {...props}
-    />
-  )
-}
-
-export function InputContainer({ className, ...props }: ComponentProps<'div'>) {
-  return (
-    <div
-      {...props}
-      className={twMerge(className, 'flex items-center')}
-      data-slot="input-content"
-    />
-  )
-}
-
-export function InputAction({
-  className,
-  side,
-  ...props
-}: ComponentProps<'div'> & {
-  side: 'left' | 'right'
-}) {
-  const { disabled } = useInput()
-  return (
-    <div
-      {...props}
-      className={twMerge(
-        className,
-        'group h-large-4x flex items-center justify-center data-[disabled=true]:hidden'
-      )}
-      data-disabled={disabled}
-      data-side={side}
-      data-slot={`input-${side}-action-slot`}
-    />
-  )
-}
-
-export function InputActionButton({
-  className,
-  ...props
-}: ComponentProps<'div'>) {
-  return (
-    <div
-      {...props}
-      className={twMerge(
-        className,
-        'h-large-4x w-large-4x bg-layer-2-hover flex cursor-pointer items-center justify-center'
-      )}
-    />
-  )
-}