@xjur-ui/react 1.0.0 → 1.0.2

package/src/components/ui/input/content.tsx

@@ -1,59 +0,0 @@
-import type { ComponentProps } from 'react'
-import { cx, cva } from '@xjur-ui/util'
-import { useInput } from './root'
-
-const variants = cva(
-  [
-    'flex items-center gap-small py-small_1x-alt px-small',
-    'border-1 border-border-layer-2',
-    'bg-layer-2-idle',
-    'group-hover:border-border-layer-3',
-    'transition-[border-color] duration-100 ease',
-    'data-[disabled=true]:pointer-events-none',
-    'has-[input[data-filled=true]]:bg-layer-2-hover'
-  ],
-  {
-    variants: {
-      isError: {
-        true: 'border-1 border-danger-idle focus-within:border-danger-idle focus-within:shadow-focus-danger group-hover:border-danger-idle',
-        false:
-          'focus-within:border-primary-idle focus-within:shadow-focus-primary'
-      },
-      rounded: {
-        true: 'rounded-circle',
-        false: 'rounded-small-1x'
-      }
-    },
-    defaultVariants: {
-      rounded: false
-    }
-  }
-)
-
-export type InputContentProps = ComponentProps<'div'> & {
-  children: ComponentProps<'div'>['children']
-}
-
-export function InputContent({
-  className,
-  children,
-  ...props
-}: InputContentProps) {
-  const { errorMessage, rounded, disabled } = useInput()
-
-  const classNames = variants({
-    className,
-    isError: !!errorMessage,
-    rounded
-  })
-
-  return (
-    <div
-      {...props}
-      className={cx('group', classNames)}
-      data-disabled={disabled}
-    >
-      {children}
-    </div>
-  )
-}

package/src/components/ui/input/index.ts

@@ -1,6 +0,0 @@
-export * from './root'
-export * from './text'
-export * from './content'
-export * from './slot'
-export * from './message'
-export * from './label'

package/src/components/ui/input/label.tsx

@@ -1,41 +0,0 @@
-import { memo } from 'react'
-import { cx } from '@xjur-ui/util'
-import { Typography, type TypographyProps } from '../typography'
-import { useInput } from './root'
-
-export type InputLabelProps = TypographyProps & {
-  htmlFor?: string
-}
-
-export const InputLabel = memo(
-  ({
-    children,
-    htmlFor,
-    variant = 'label',
-    weight = 'medium',
-    size = 'sm',
-    className,
-    ...props
-  }: InputLabelProps) => {
-    const { errorMessage } = useInput()
-
-    return (
-      <Typography
-        asChild={true}
-        className={cx(
-          'text-title-neutral data-[error=true]:text-danger-label-active w-fit',
-          className
-        )}
-        data-error={!!errorMessage}
-        size={size}
-        variant={variant}
-        weight={weight}
-        {...props}
-      >
-        <label htmlFor={htmlFor}>{children}</label>
-      </Typography>
-    )
-  }
-)
-
-InputLabel.displayName = 'InputLabel'

package/src/components/ui/input/message.tsx

@@ -1,37 +0,0 @@
-import { memo } from 'react'
-import { cx } from '@xjur-ui/util'
-import { Typography, type TypographyProps } from '../typography'
-import { useInput } from './root'
-
-export type InputMessageProps = TypographyProps
-
-export const InputMessage = memo(
-  ({
-    children,
-    className,
-    weight = 'normal',
-    variant = 'body',
-    size = 'sm-1x',
-    ...props
-  }: InputMessageProps) => {
-    const { errorMessage } = useInput()
-
-    return (
-      <Typography
-        className={cx(
-          'text-neutral-dark data-[error=true]:text-danger-idle',
-          className
-        )}
-        data-error={!!errorMessage}
-        size={size}
-        variant={variant}
-        weight={weight}
-        {...props}
-      >
-        {children}
-      </Typography>
-    )
-  }
-)
-
-InputMessage.displayName = 'InputMessage'

package/src/components/ui/input/root.tsx

@@ -1,57 +0,0 @@
-import { type ComponentProps, createContext, use } from 'react'
-import { cx } from '@xjur-ui/util'
-import { InputMessage } from './message'
-
-export type InputRoot = {
-  size?: 'md' | 'lg'
-  rounded?: boolean
-  errorMessage?: string
-  disabled?: boolean
-}
-
-export const InputRootContext = createContext({} as InputRoot)
-
-export function useInput() {
-  const context = use(InputRootContext)
-
-  if (!context) {
-    throw new Error(
-      'useInput must be called within <Input.Root> or <Select.Root>'
-    )
-  }
-
-  return context
-}
-
-export type InputRootProps = ComponentProps<'div'> & {
-  children: ComponentProps<'div'>['children']
-} & InputRoot
-
-export function InputRoot({
-  children,
-  className,
-  errorMessage,
-  size = 'lg',
-  rounded = false,
-  disabled,
-  ...props
-}: InputRootProps) {
-  return (
-    <InputRootContext.Provider
-      value={{ errorMessage, disabled, size, rounded }}
-    >
-      <div
-        {...props}
-        className={cx(
-          'group gap-small relative flex flex-col data-[disabled=true]:opacity-60',
-          className
-        )}
-        data-disabled={disabled}
-      >
-        {children}
-
-        {errorMessage && <InputMessage>{errorMessage}</InputMessage>}
-      </div>
-    </InputRootContext.Provider>
-  )
-}

package/src/components/ui/input/slot.tsx

@@ -1,21 +0,0 @@
-import { type ComponentProps, memo } from 'react'
-import { cx } from '@xjur-ui/util'
-
-export type InputSlotProps = ComponentProps<'label'> & {
-  children: ComponentProps<'label'>['children']
-}
-
-export const InputSlot = memo(
-  ({ children, className, ...props }: InputSlotProps) => {
-    return (
-      <label
-        {...props}
-        className={cx('flex items-center justify-center', className)}
-      >
-        {children}
-      </label>
-    )
-  }
-)
-
-InputSlot.displayName = 'InputSlot'

package/src/components/ui/input/text.tsx

@@ -1,69 +0,0 @@
-import { InputMask, type MaskOptions } from '@react-input/mask'
-import { type ComponentProps, useCallback, useEffect, useRef } from 'react'
-import { cx } from '@xjur-ui/util'
-import { useInput } from './root'
-
-export type InputTextProps = ComponentProps<'input'> & { mask?: MaskOptions }
-
-export function InputText({
-  className,
-  value,
-  mask,
-  ...props
-}: InputTextProps) {
-  const { errorMessage } = useInput()
-  const inputRef = useRef<HTMLInputElement>(null)
-  const InputComponent = mask ? InputMask : 'input'
-
-  const onCheckInputFilled = useCallback(
-    ({ shouldUnfill = false }: { shouldUnfill: boolean }) => {
-      if (inputRef.current) {
-        if (shouldUnfill) inputRef.current.dataset.filled = 'false'
-        else {
-          const hasNotErrorAndHasValue =
-            !errorMessage && !!inputRef.current.value
-          inputRef.current.dataset.filled = String(hasNotErrorAndHasValue)
-        }
-      }
-    },
-    [errorMessage]
-  )
-
-  function setRef(ref: HTMLInputElement) {
-    inputRef.current = ref
-
-    if (typeof props.ref === 'function') {
-      props.ref(ref)
-    }
-  }
-
-  useEffect(() => {
-    onCheckInputFilled({ shouldUnfill: false })
-  }, [onCheckInputFilled])
-
-  return (
-    <InputComponent
-      {...props}
-      {...(mask && { ...mask })}
-      className={cx(
-        'h-full w-full bg-transparent',
-        'border-hidden outline-hidden',
-        'placeholder:text-placeholder-neutral font-normal',
-        'text-neutral-dark text-size-body-md overflow-hidden text-ellipsis',
-        className
-      )}
-      data-filled={!!value && !errorMessage}
-      readOnly={props.readOnly !== undefined && props.readOnly}
-      ref={setRef}
-      value={value}
-      onBlur={event => {
-        props.onBlur?.(event)
-        onCheckInputFilled({ shouldUnfill: false })
-      }}
-      onFocus={event => {
-        props.onFocus?.(event)
-        onCheckInputFilled({ shouldUnfill: true })
-      }}
-    />
-  )
-}