@xjur-ui/react 1.0.6 → 2.1.0

package/src/components/{checkbox.tsx → form/checkbox.tsx}

@@ -1,7 +1,7 @@
 import * as CheckoxPrimitive from '@radix-ui/react-checkbox'
 import { cx } from '@xjur-ui/util'
-import { Icon } from './icon'
-import { Typography } from './typography'
+import { Icon } from '../icon'
+import { Typography } from '../typography'
 
 export function Checkbox({
   label,

package/src/components/form/context/field.context.ts

@@ -0,0 +1,27 @@
+import { createContext, useContext } from 'react'
+import type { MaskOptions } from '@react-input/mask'
+import type { InputMaskType } from '../../../resources/input-mask'
+
+export interface FieldContextValue {
+  state?: 'normal' | 'error' | 'disabled'
+  variant?: 'normal' | 'filter'
+  customMask?: MaskOptions
+  mask?: InputMaskType
+}
+
+export const FieldContext = createContext<FieldContextValue>({
+  state: 'normal',
+  variant: 'normal',
+  customMask: undefined,
+  mask: undefined
+})
+
+export function useFieldContext() {
+  const context = useContext(FieldContext)
+  if (!context) {
+    throw new Error(
+      'useFieldContext must be used within a InputRoot, SelectRoot, DatePickerRoot, etc.'
+    )
+  }
+  return context
+}

package/src/components/form/date-picker.tsx

@@ -0,0 +1,199 @@
+import { tv, twJoin, twMerge } from '@xjur-ui/util'
+import { useMemo, type ComponentProps } from 'react'
+import * as RadixPopover from '@radix-ui/react-popover'
+import { Icon, type IconType } from '../icon'
+import { Typography } from '../typography'
+import {
+  FieldContext,
+  useFieldContext,
+  type FieldContextValue
+} from './context/field.context'
+import { FloatingLabel } from './floating-label'
+
+export const datePicker = tv({
+  slots: {
+    wrapper: 'group flex w-full flex-col gap-small-2x',
+    trigger: [
+      'h-large-4x w-full cursor-pointer 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: [
+      '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)]'
+    ],
+    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'
+  },
+  variants: {
+    state: {
+      normal: {
+        trigger:
+          'hover:border-border-layer-1 data-[state=open]:border-primary-idle data-[state=open]:hover:border-primary-idle'
+      },
+      error: {
+        trigger:
+          'border-danger-idle hover:border-danger-idle data-[state=open]:border-danger-idle data-[state=open]:hover:border-danger-idle',
+        caption: 'text-danger-label-idle'
+      },
+      disabled: {
+        trigger: 'pointer-events-none border-transparent bg-layer-2-idle'
+      }
+    }
+  }
+})
+
+const { wrapper, trigger, icon, caption, slotText, content } = datePicker()
+
+export function DatePickerRoot({
+  className,
+  state = 'normal',
+  defaultOpen,
+  variant = 'normal',
+  modal,
+  open,
+  onOpenChange: handleOpenChange,
+  ...props
+}: ComponentProps<'div'> &
+  FieldContextValue &
+  ComponentProps<typeof RadixPopover.Root>) {
+  return (
+    <RadixPopover.Root
+      defaultOpen={defaultOpen}
+      modal={modal}
+      open={open}
+      onOpenChange={handleOpenChange}
+    >
+      <FieldContext.Provider value={{ state, variant }}>
+        <div className={wrapper({ className, state })} {...props} />
+      </FieldContext.Provider>
+    </RadixPopover.Root>
+  )
+}
+
+export function DatePickerTrigger({
+  className,
+  ...props
+}: ComponentProps<typeof RadixPopover.Trigger>) {
+  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 (
+    <RadixPopover.Trigger
+      className={mergedClassName}
+      disabled={state === 'disabled'}
+      {...props}
+    />
+  )
+}
+
+export function DatePickerLabel(props: ComponentProps<typeof FloatingLabel>) {
+  return <FloatingLabel {...props} />
+}
+
+export function DatePickerIcon({
+  className,
+  name,
+  ...props
+}: ComponentProps<'div'> & {
+  name: IconType
+}) {
+  const { state } = useFieldContext()
+
+  return (
+    <div className={icon({ className, state })} {...props}>
+      <Icon name={name} />
+    </div>
+  )
+}
+
+export function DatePickerSlot({
+  className,
+  ...props
+}: ComponentProps<'span'>) {
+  const { state } = useFieldContext()
+  return <span className={slotText({ className, state })} {...props} />
+}
+
+export function DatePickerValue({
+  className,
+  displayValue = '',
+  value,
+  ...props
+}: ComponentProps<'input'> & { displayValue?: string }) {
+  const { variant } = useFieldContext()
+
+  const valueOrPlaceholder = useMemo(() => {
+    if (variant === 'filter') return displayValue
+    return displayValue || props.placeholder
+  }, [displayValue, props.placeholder, variant])
+
+  return (
+    <>
+      <Typography className="text-neutral-dark group-has-[div[data-slot=date-picker-left-slot]]:pl-large-1x">
+        {valueOrPlaceholder}
+      </Typography>
+
+      <input
+        {...props}
+        aria-readonly={true}
+        className={twJoin('pointer-events-none', className)}
+        hidden={true}
+        placeholder={' '}
+        readOnly={true}
+        value={value ?? ''}
+      />
+    </>
+  )
+}
+
+export function DatePickerContent({
+  className,
+  sideOffset = 5,
+  side = 'bottom',
+  align = 'start',
+  ...props
+}: ComponentProps<typeof RadixPopover.Content>) {
+  const { state } = useFieldContext()
+
+  return (
+    <RadixPopover.Portal>
+      <RadixPopover.Content
+        align={align}
+        className={content({ className, state })}
+        side={side}
+        sideOffset={sideOffset}
+        {...props}
+      />
+    </RadixPopover.Portal>
+  )
+}
+
+export function DatePickerCaption({
+  className,
+  ...props
+}: ComponentProps<'p'>) {
+  const { state } = useFieldContext()
+  return <p className={caption({ className, state })} {...props} />
+}

package/src/components/form/floating-label.tsx

@@ -0,0 +1,60 @@
+import type { ComponentProps } from 'react'
+import { tv } from '@xjur-ui/util'
+import { useFieldContext } from './context/field.context'
+
+export function FloatingLabel({
+  className,
+  htmlFor,
+  children,
+  ...props
+}: ComponentProps<'label'>) {
+  const { state } = useFieldContext()
+
+  const label = tv({
+    base: [
+      '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',
+      'text-size-body-md',
+      // Filled
+      'group-focus-within:-top-[3px]',
+      'group-data-[state=open]:-top-[3px]',
+
+      'group-focus-within:text-size-label-sm-1x group-focus-within:font-medium',
+      'group-data-[state=open]:text-size-label-sm-1x group-data-[state=open]: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',
+      // If has left slot
+      'group-has-[div[data-slot=control-slot]]:left-large-4x',
+      'group-has-[div[data-slot=control-slot]]:group-focus-within:left-small',
+      'group-has-[div[data-slot=control-slot]]:group-has-[input:not(:placeholder-shown)]:left-small',
+      'group-has-[div[data-slot=control-slot]]:group-data-[state=open]:left-small',
+      // Animate
+      'group-focus-within:animate-in',
+      'group-has-[input:not(:placeholder-shown)]:animate-out',
+      'data-[disabled=true]:hidden'
+    ],
+    variants: {
+      state: {
+        normal: [
+          'group-focus-within:!text-primary-idle group-data-[state=open]:!text-primary-idle',
+          'group-has-[input:not(:placeholder-shown)]:!text-primary-idle'
+        ],
+        error: [
+          'group-focus-within:!text-danger-label-active group-data-[state=open]:!text-danger-label-active',
+          'group-has-[input:not(:placeholder-shown)]:!text-danger-label-active'
+        ],
+        disabled: []
+      }
+    }
+  })
+
+  return (
+    <label className={label({ className, state })} htmlFor={htmlFor} {...props}>
+      <span className="rounded-small-1x bg-layer-2-idle max-w-full">
+        {children}
+      </span>
+    </label>
+  )
+}

package/src/components/form/input.tsx

@@ -0,0 +1,235 @@
+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/{radio.tsx → form/radio.tsx}

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
 import { cx } from '@xjur-ui/util'
-import { Typography } from './typography'
+import { Typography } from '../typography'
 
 export function RadioGroup({
   className,

package/src/components/{rich-editor.tsx → form/rich-editor.tsx}

@@ -6,15 +6,16 @@ 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 { useOS } from '../hooks'
-import { Icon, type IconType } from './icon'
-import { Button, type ButtonProps } from './button'
+// 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 '../form/button'
 import {
   DropdownMenuContent,
   DropdownMenuItem,
@@ -22,9 +23,9 @@ import {
   DropdownMenuList,
   DropdownMenuRoot,
   DropdownMenuTrigger
-} from './dropdown-menu'
-import { Tooltip, TooltipTrigger, TooltipContent } from './tooltip'
-import { Typography } from './typography'
+} from '../dropdown-menu'
+import { Tooltip, TooltipTrigger, TooltipContent } from '../tooltip'
+import { Typography } from '../typography'
 
 const headingClasses: Partial<Record<Level, string>> = {
   1: 'text-size-body-md',

package/src/components/{search-input.tsx → form/search-input.tsx}

@@ -1,7 +1,7 @@
 import { cva, cx } from '@xjur-ui/util'
 import { createContext, type ComponentProps } from 'react'
-import { Typography } from './typography'
-import { Button, type ButtonProps } from './button'
+import { Typography } from '../typography'
+import { Button, type ButtonProps } from '../form/button'
 
 export type SearchInputProps = {
   variant?: 'outlined' | 'line' | 'action'