@xjur-ui/react 2.0.0 → 2.1.1

package/src/components/controls/input.tsx

@@ -0,0 +1,237 @@
+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,
+  groupDisplay = false,
+  ...props
+}: InputNumberFormatProps) {
+  const { state, variant } = useFieldContext()
+
+  return (
+    <InputNumberFormat
+      {...props}
+      className={value({ className, state })}
+      disabled={state === 'disabled'}
+      groupDisplay={groupDisplay}
+      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 → controls/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 → controls/rich-editor.tsx}

@@ -13,8 +13,8 @@ import { StarterKit } from '@tiptap/starter-kit'
 import { Heading, type Level } from '@tiptap/extension-heading'
 // 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 { useOS } from '../../hooks'
+import { Icon, type IconType } from '../icon'
 import { Button, type ButtonProps } from './button'
 import {
   DropdownMenuContent,
@@ -23,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 → controls/search-input.tsx}

@@ -1,6 +1,15 @@
 import { cva, cx } from '@xjur-ui/util'
 import { createContext, type ComponentProps } from 'react'
-import { Typography } from './typography'
+import {
+  InputMask as InputMaskComponent,
+  type MaskOptions
+} from '@react-input/mask'
+import {
+  InputNumberFormat,
+  type InputNumberFormatProps
+} from '@react-input/number-format'
+import { Typography } from '../typography'
+import { inputMask, type InputMaskType } from '../../resources/input-mask'
 import { Button, type ButtonProps } from './button'
 
 export type SearchInputProps = {
@@ -18,7 +27,7 @@ export function SearchInputRoot({
 }: ComponentProps<'div'> & SearchInputProps) {
   return (
     <SearchInputRootContext.Provider value={{ variant }}>
-      <div className={cx(className, 'relative flex w-full')} {...props} />
+      <div className={cx('relative flex', className)} {...props} />
     </SearchInputRootContext.Provider>
   )
 }
@@ -84,6 +93,40 @@ export function SearchInputText({
   return <input className={cx(className, 'flex-1 outline-none')} {...props} />
 }
 
+export function SearchInputMask({
+  className,
+  mask,
+  customMask,
+  ...props
+}: ComponentProps<'input'> & {
+  mask?: InputMaskType
+  customMask?: MaskOptions
+}) {
+  return (
+    <InputMaskComponent
+      {...(mask ? { ...inputMask(mask) } : customMask && { ...customMask })}
+      className={cx(className, 'flex-1 outline-none')}
+      {...props}
+    />
+  )
+}
+
+export function SearchInputNumber({
+  className,
+  locales = 'pt-BR',
+  groupDisplay = false,
+  ...props
+}: InputNumberFormatProps) {
+  return (
+    <InputNumberFormat
+      className={cx(className, 'flex-1 outline-none')}
+      groupDisplay={groupDisplay}
+      locales={locales}
+      {...props}
+    />
+  )
+}
+
 export function SearchInputSlot(props: ComponentProps<'div'>) {
   return <div {...props} data-slot="search-input-slot" />
 }
@@ -102,7 +145,7 @@ export function SearchInputAction({
         className,
         'cursor-pointer',
         'h-large-4x rounded-tr-circle rounded-br-circle px-small py-small_1x-alt flex items-center justify-center rounded-none',
-        'text-size-body-md text-neutral-dark gap-small-1x'
+        'text-size-body-md text-neutral-dark gap-small-1x !border-l-0'
       )}
       data-slot="search-input-action"
       variant={variant}

package/src/components/controls/search-selector.tsx

@@ -0,0 +1,98 @@
+import { useMemo, useState, type ComponentProps } from 'react'
+import type { MaskOptions } from '@react-input/mask'
+import type { InputMaskType } from '../../resources/input-mask'
+import {
+  DropdownMenuRoot,
+  DropdownMenuList,
+  DropdownMenuItemText,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from '../dropdown-menu'
+import { Icon } from '../icon'
+import {
+  SearchInputContent,
+  SearchInputRoot,
+  SearchInputSlot,
+  SearchInputAction,
+  SearchInputMask,
+  SearchInputText
+} from './search-input'
+
+interface SelectorOption {
+  label: string
+  value: string
+}
+
+interface SearchSelectorProps extends ComponentProps<'input'> {
+  options: SelectorOption[]
+  selectedSearchOption?: string
+  mask?: InputMaskType
+  customMask?: MaskOptions
+
+  onChangeSearchOption?: (option: string) => void
+}
+
+export function SearchSelector({
+  options,
+  mask,
+  customMask,
+  placeholder = 'Pesquisar',
+  onChangeSearchOption,
+  selectedSearchOption: initialSelectedSearchOption,
+  ...props
+}: SearchSelectorProps) {
+  const [selectedSearchOption, setSelectedSearchOption] = useState(
+    initialSelectedSearchOption
+  )
+
+  const selectedSearchLabel = useMemo(
+    () => options.find(option => option.value === selectedSearchOption)?.label,
+    [options, selectedSearchOption]
+  )
+
+  return (
+    <SearchInputRoot className="w-full" variant="action">
+      <SearchInputContent>
+        <SearchInputSlot>
+          <Icon className="text-icon-neutral-3" name="search" />
+        </SearchInputSlot>
+        {mask || customMask ? (
+          <SearchInputMask
+            customMask={customMask}
+            mask={mask}
+            placeholder={placeholder}
+            {...props}
+          />
+        ) : (
+          <SearchInputText placeholder={placeholder} {...props} />
+        )}
+      </SearchInputContent>
+
+      <DropdownMenuRoot>
+        <DropdownMenuTrigger asChild={true}>
+          <SearchInputAction>
+            {selectedSearchLabel}
+            <Icon className="text-icon-neutral-3" name="keyboard_arrow_down" />
+          </SearchInputAction>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuList>
+            {options.map(option => (
+              <DropdownMenuItem
+                isActive={selectedSearchOption === option.value}
+                key={option.value}
+                onClick={() => {
+                  setSelectedSearchOption(option.value)
+                  onChangeSearchOption?.(option.value)
+                }}
+              >
+                <DropdownMenuItemText>{option.label}</DropdownMenuItemText>
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuList>
+        </DropdownMenuContent>
+      </DropdownMenuRoot>
+    </SearchInputRoot>
+  )
+}