@xjur-ui/react 1.0.4 → 2.0.0

package/src/components/date-picker.tsx

@@ -1,29 +1,86 @@
+import { createContext, useContext } from 'react'
 import type { ComponentProps } from 'react'
 import * as RadixPopover from '@radix-ui/react-popover'
-import { cx } from '@xjur-ui/util'
+import { tv, twJoin, twMerge } from '@xjur-ui/util'
 import { Typography, type TypographyProps } from './typography'
 
-export function DatePickerRoot(
-  props: ComponentProps<typeof RadixPopover.Root>
-) {
-  return <RadixPopover.Root {...props} />
+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={cx(
-        className,
-        'group h-large-4x rounded-small-1x gap-small py-small_1x-alt px-small relative flex w-full cursor-pointer items-center',
-        'bg-layer-2-idle border-border-layer-2 hover:border-border-layer-3 border',
-        'data-[state=open]:border-primary-idle',
-        'has-[input:not(:placeholder-shown)]:text-primary-idle',
-        'has-[input:not(:placeholder-shown)]:border-primary-idle'
-      )}
+      className={trigger({
+        variant: disabled ? 'disabled' : variant,
+        state: hasError ? 'error' : 'idle',
+        className
+      })}
       {...props}
+      disabled={disabled}
     />
   )
 }
@@ -39,7 +96,7 @@ export function DatePickerContent({
     <RadixPopover.Portal>
       <RadixPopover.Content
         align={align}
-        className={cx(
+        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)]'
         )}
@@ -68,7 +125,7 @@ export function DatePickerValue({
       <input
         {...props}
         aria-readonly={true}
-        className={cx('pointer-events-none', className)}
+        className={twJoin('pointer-events-none', className)}
         hidden={true}
         placeholder={props.placeholder ?? ' '}
         readOnly={true}
@@ -84,20 +141,22 @@ export function DatePickerLabel({
   children,
   ...props
 }: TypographyProps & { htmlFor?: string }) {
+  const { variant, disabled, hasError } = useDatePicker()
+
   return (
     <Typography
       asChild={true}
-      className={cx(
-        'inline-block max-w-full truncate text-left font-normal',
+      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]: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)]: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',
@@ -113,13 +172,24 @@ export function DatePickerLabel({
         '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="bg-layer-2-idle rounded-small-1x max-w-full">
+        <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>
@@ -134,7 +204,7 @@ export function DatePickerLeftSlot({
   return (
     <div
       {...props}
-      className={cx(
+      className={twJoin(
         className,
         'left-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center'
       )}
@@ -150,7 +220,7 @@ export function DatePickerRightSlot({
   return (
     <div
       {...props}
-      className={cx(
+      className={twJoin(
         className,
         'right-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center'
       )}
@@ -158,3 +228,36 @@ export function DatePickerRightSlot({
     />
   )
 }
+
+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/icon.tsx

@@ -13,7 +13,7 @@ export function Icon({ className, filled = false, name, ...props }: IconProps) {
       {...props}
       className={cx(
         'material-symbols-outlined',
-        'text-size-body-lg',
+        'text-size-body-lg select-none',
         className
       )}
       style={{

package/src/components/input.tsx

@@ -1,36 +1,53 @@
-import { cva, cx } from '@xjur-ui/util'
+import { tv, twMerge } from '@xjur-ui/util'
 import type { ComponentProps } from 'react'
-import { createContext } 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'
+  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={{ variant }}>
+    <FieldContext.Provider value={providerValue}>
       <div
-        className={cx(
-          'group gap-small relative flex w-full flex-col',
-          className
-        )}
+        className={twMerge('group relative flex w-full flex-col', className)}
         {...props}
       >
         {children}
@@ -40,31 +57,45 @@ export function InputRoot({
 }
 
 export function InputContent({ className, ...props }: ComponentProps<'div'>) {
-  const variants = cva(
-    [
-      'relative h-large-4x rounded-small-1x gap-small py-small_1x-alt px-small flex items-center w-full',
-      'focus-within:border-primary-idle focus-within:border',
+  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'
-    ],
-    {
-      variants: {
-        variant: {
-          default: '',
-          outlined:
-            'bg-layer-2-idle border-border-layer-2 border hover:group-has-[input:not(:focus-within)]:border-border-layer-3 has-[input:not(:placeholder-shown)]:border-primary-idle',
-          filled:
-            'bg-layer-2-hover group-hover:border-border-layer-1 group-hover:border-1'
-        }
+      '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 }) => {
+      {({ variant, disabled, hasError }) => {
         return (
-          <div className={cx(className, variants({ variant }))} {...props} />
+          <div
+            className={content({
+              variant: disabled ? 'disabled' : variant,
+              state: hasError ? 'error' : 'idle',
+              className
+            })}
+            {...props}
+          />
         )
       }}
     </FieldContext.Consumer>
@@ -76,22 +107,24 @@ export function InputLabel({
   className,
   children,
   ...props
-}: ComponentProps<'label'> & { htmlFor: string }) {
+}: ComponentProps<typeof Typography> & { htmlFor: string }) {
   return (
     <FieldContext.Consumer>
-      {({ variant }) => {
+      {({ variant, disabled, hasError }) => {
         return (
-          <label
-            className={cx(
-              'group text-size-body-md text-neutral-dark inline-block max-w-full truncate text-left',
+          <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:-top-[3px]',
+              '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',
-              'data-[variant=outlined]:group-has-[input:not(:placeholder-shown)]:text-primary-idle',
+              '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',
@@ -103,22 +136,26 @@ export function InputLabel({
               // 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}
-            htmlFor={htmlFor}
             {...props}
           >
-            <span
-              className={cx(
-                '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>
+            <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>
@@ -134,17 +171,19 @@ export function InputText({
   maskOptions?: MaskOptions
   maskType?: InputMaskType
 }) {
+  const { disabled } = useInput()
   const Component = maskOptions || maskType ? InputMask : 'input'
 
   return (
     <Component
       {...props}
+      disabled={disabled}
       {...(maskType
         ? { ...inputMask(maskType) }
         : maskOptions && { ...maskOptions })}
-      className={cx(
+      className={twMerge(
         className,
-        'peer text-size-body-md text-neutral-dark flex-1 font-medium outline-none',
+        '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 || ' '}
@@ -158,14 +197,16 @@ export function InputNumber({
   locales = 'pt-BR',
   ...props
 }: InputNumberFormatProps) {
+  const { disabled } = useInput()
   return (
     <InputNumberFormat
       {...props}
-      className={cx(
+      className={twMerge(
         className,
-        'peer text-size-body-md text-neutral-dark flex-1 font-medium outline-none',
+        '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 || ' '}
     />
@@ -176,7 +217,7 @@ export function InputLeftSlot({ className, ...props }: ComponentProps<'div'>) {
   return (
     <div
       {...props}
-      className={cx(
+      className={twMerge(
         className,
         'left-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center'
       )}
@@ -189,7 +230,7 @@ export function InputRightSlot({ className, ...props }: ComponentProps<'div'>) {
   return (
     <div
       {...props}
-      className={cx(
+      className={twMerge(
         className,
         'right-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center'
       )}
@@ -198,14 +239,35 @@ export function InputRightSlot({ className, ...props }: ComponentProps<'div'>) {
   )
 }
 
-export function InputMessage({ className, ...props }: ComponentProps<'p'>) {
+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 (
-    <p
-      {...props}
-      className={cx(
-        'text-size-body-sm text-neutral-dark font-normal',
+    <Typography
+      className={caption({
+        state: hasError ? 'error' : 'idle',
         className
-      )}
+      })}
+      size={size}
+      variant={variant}
+      weight={weight}
+      {...props}
     />
   )
 }
@@ -214,7 +276,7 @@ export function InputContainer({ className, ...props }: ComponentProps<'div'>) {
   return (
     <div
       {...props}
-      className={cx(className, 'flex items-center')}
+      className={twMerge(className, 'flex items-center')}
       data-slot="input-content"
     />
   )
@@ -227,13 +289,15 @@ export function InputAction({
 }: ComponentProps<'div'> & {
   side: 'left' | 'right'
 }) {
+  const { disabled } = useInput()
   return (
     <div
       {...props}
-      className={cx(
+      className={twMerge(
         className,
-        'group h-large-4x flex items-center justify-center'
+        '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`}
     />
@@ -247,7 +311,7 @@ export function InputActionButton({
   return (
     <div
       {...props}
-      className={cx(
+      className={twMerge(
         className,
         'h-large-4x w-large-4x bg-layer-2-hover flex cursor-pointer items-center justify-center'
       )}

package/src/components/logo.tsx

@@ -1,11 +1,25 @@
-import { memo } from 'react'
-import { Horizontal, Vertical, Icon } from '../resources/logo'
+import { memo, lazy, Suspense } from 'react'
 
 export interface LogoProps {
   mode?: 'horizontal' | 'vertical' | 'icon'
   variant?: 'colorful' | 'orange' | 'purple' | 'white' | 'gray'
 }
 
+// Lazy load logo components to reduce initial bundle size
+const LazyLogos = lazy(() => import('../resources/logo'))
+
+function LogoFallback({ mode }: { mode?: string }) {
+  const dimensions =
+    mode === 'icon' ? { width: 24, height: 24 } : { width: 95, height: 26 }
+  return (
+    <div
+      aria-label="Loading logo"
+      className="animate-pulse rounded bg-gray-200"
+      style={dimensions}
+    />
+  )
+}
+
 export const Logo = memo(
   ({ mode = 'horizontal', variant = 'colorful' }: LogoProps) => {
     const colorToHex = {
@@ -15,24 +29,15 @@ export const Logo = memo(
       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]} />
-    }
+    return (
+      <Suspense fallback={<LogoFallback mode={mode} />}>
+        <LazyLogos
+          color={variant !== 'colorful' ? colorToHex[variant] : undefined}
+          mode={mode}
+          variant={variant}
+        />
+      </Suspense>
+    )
   }
 )
 

package/src/components/rich-editor.tsx

@@ -6,12 +6,13 @@ import {
   useCurrentEditor as useRichTextEditor,
   useEditorState as useRichTextEditorState,
   useEditor,
-  type EditorOptions,
-  Extension
+  type EditorOptions
 } from '@tiptap/react'
+import type { Extension } from '@tiptap/core'
 import { StarterKit } from '@tiptap/starter-kit'
 import { Heading, type Level } from '@tiptap/extension-heading'
-import { Placeholder } from '@tiptap/extensions'
+// Import specific extension instead of full extensions bundle
+import { Placeholder } from '@tiptap/extension-placeholder'
 import { useOS } from '../hooks'
 import { Icon, type IconType } from './icon'
 import { Button, type ButtonProps } from './button'