@xjur-ui/react 1.0.0

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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,57 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,69 @@
+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 })
+      }}
+    />
+  )
+}

package/src/components/ui/logo.tsx

@@ -0,0 +1,39 @@
+import { memo } from 'react'
+import { Horizontal, Vertical, Icon } from '../resources/logo'
+
+export interface LogoProps {
+  mode?: 'horizontal' | 'vertical' | 'icon'
+  variant?: 'colorful' | 'orange' | 'purple' | 'white' | 'gray'
+}
+
+export const Logo = memo(
+  ({ mode = 'horizontal', variant = 'colorful' }: LogoProps) => {
+    const colorToHex = {
+      orange: '#D68600',
+      purple: '#66127D',
+      white: '#FFFFFF',
+      gray: '#6B7280'
+    }
+
+    switch (mode) {
+      case 'icon':
+        if (variant === 'colorful') {
+          return <Icon.Colorful />
+        }
+        return <Icon.Solid color={colorToHex[variant]} />
+      case 'vertical':
+        if (variant === 'colorful') {
+          return <Vertical.Colorful />
+        }
+        return <Vertical.Solid color={colorToHex[variant]} />
+      case 'horizontal':
+      default:
+        if (variant === 'colorful') {
+          return <Horizontal.Colorful />
+        }
+        return <Horizontal.Solid color={colorToHex[variant]} />
+    }
+  }
+)
+
+Logo.displayName = 'Logo'

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

@@ -0,0 +1,45 @@
+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:shadow-focus-primary focus-within:border'
+      )}
+      {...props}
+    />
+  )
+}
+
+function HiddenInput({
+  ...props
+}: OTPPasswordField.OneTimePasswordFieldHiddenInputProps) {
+  return <OTPPasswordField.HiddenInput {...props} />
+}
+
+export const OTPInput = {
+  Root,
+  Input,
+  HiddenInput
+}

package/src/components/ui/typography.tsx

@@ -0,0 +1,85 @@
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type ClassVariantProps } from '@xjur-ui/util'
+import { memo, type ComponentProps } from 'react'
+
+const typographyVariants = cva('', {
+  variants: {
+    variant: {
+      body: '',
+      label: '',
+      title: '',
+      headline: ''
+    },
+    size: {
+      'sm-2x': '',
+      'sm-1x': '',
+      sm: '',
+      md: '',
+      lg: ''
+    },
+    weight: {
+      thin: 'font-thin',
+      extraLight: 'font-extralight',
+      light: 'font-light',
+      normal: 'font-normal',
+      medium: 'font-medium',
+      semibold: 'font-semibold',
+      bold: 'font-bold',
+      extraBold: 'font-extrabold',
+      black: 'font-black'
+    }
+  },
+  compoundVariants: [
+    { variant: 'body', size: 'sm-1x', class: 'text-size-body-sm-1x' },
+    { variant: 'body', size: 'sm', class: 'text-size-body-sm' },
+    { variant: 'body', size: 'md', class: 'text-size-body-md' },
+    { variant: 'body', size: 'lg', class: 'text-size-body-lg' },
+
+    { variant: 'label', size: 'sm-2x', class: 'text-size-label-sm-2x' },
+    { variant: 'label', size: 'sm-1x', class: 'text-size-label-sm-1x' },
+    { variant: 'label', size: 'sm', class: 'text-size-label-sm' },
+    { variant: 'label', size: 'md', class: 'text-size-label-md' },
+    { variant: 'label', size: 'lg', class: 'text-size-label-lg' },
+
+    { variant: 'title', size: 'sm', class: 'text-size-title-sm' },
+    { variant: 'title', size: 'md', class: 'text-size-title-md' },
+    { variant: 'title', size: 'lg', class: 'text-size-title-lg' },
+
+    { variant: 'headline', size: 'sm', class: 'text-size-headline-sm' },
+    { variant: 'headline', size: 'md', class: 'text-size-headline-md' },
+    { variant: 'headline', size: 'lg', class: 'text-size-headline-lg' }
+  ],
+  defaultVariants: {
+    variant: 'body',
+    size: 'md',
+    weight: 'normal'
+  }
+})
+
+export interface TypographyProps
+  extends ComponentProps<'base'>,
+    ClassVariantProps<typeof typographyVariants> {
+  asChild?: boolean
+}
+
+export const Typography = memo(
+  ({
+    variant,
+    size,
+    weight,
+    asChild,
+    className,
+    ...props
+  }: TypographyProps) => {
+    const Component = asChild ? Slot : 'span'
+
+    return (
+      <Component
+        className={typographyVariants({ variant, size, weight, className })}
+        {...props}
+      />
+    )
+  }
+)
+
+Typography.displayName = 'Typography'

package/src/index.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "@xjur-ui/styles/theme.css";

package/src/index.ts

@@ -0,0 +1,2 @@
+import './index.css'
+export * from './components/ui'

package/src/types.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+  const content: Record<string, string>
+  export default content
+}

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@xjur-ui/typescript-config/react",
+  "include": ["src"]
+}

package/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+  // all js and ts
+  entry: ['src/index.ts', 'src/components/**/*.ts', 'src/components/**/*.tsx'],
+  format: ['esm'],
+  outDir: 'dist',
+  external: ['react', 'react-dom'],
+  dts: true,
+  splitting: false,
+  clean: true
+})