@xjur-ui/react 1.0.0 → 1.0.1

package/src/components/dropdown-menu.tsx

@@ -0,0 +1,101 @@
+import * as React from 'react'
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import { cx } from '@xjur-ui/util'
+import {
+  ListContent,
+  ListHeader,
+  ListHeaderTitle,
+  ListItem,
+  ListRoot
+} from './list'
+import { Typography } from './typography'
+import { Divider } from './divider'
+
+export function DropdownMenuRoot({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+export function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+export function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+export function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  align = 'start',
+  side = 'bottom',
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        align={align}
+        className={cx(
+          'group z-10 max-h-[var(--radix-popover-content-available-height)] max-w-[var(--radix-popover-trigger-width)] min-w-[240px]',
+          className
+        )}
+        data-slot="dropdown-menu-content"
+        side={side}
+        sideOffset={sideOffset}
+        {...props}
+      >
+        <ListRoot>{children}</ListRoot>
+      </DropdownMenuPrimitive.Content>
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+export function DropdownMenuList({
+  ...props
+}: React.ComponentProps<typeof ListContent>) {
+  return <ListContent {...props} />
+}
+
+export function DropdownMenuHeader({
+  ...props
+}: React.ComponentProps<typeof ListHeader>) {
+  return <ListHeader {...props} />
+}
+
+export function DropdownMenuHeaderTitle({
+  ...props
+}: React.ComponentProps<typeof ListHeaderTitle>) {
+  return <ListHeaderTitle {...props} />
+}
+
+export function DropdownMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof ListItem>) {
+  return <ListItem className={cx(className, 'cursor-pointer')} {...props} />
+}
+
+export function DropdownMenuItemText({
+  ...props
+}: React.ComponentProps<typeof Typography>) {
+  return <Typography {...props} />
+}
+
+export function DropdownMenuItemDivider({
+  ...props
+}: React.ComponentProps<typeof Divider>) {
+  return <Divider {...props} />
+}

package/src/components/{ui/icon.tsx → 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-icon-neutral-3',
+        'text-size-body-lg',
         className
       )}
       style={{

package/src/components/input.tsx

@@ -0,0 +1,241 @@
+import { cva, cx } from '@xjur-ui/util'
+import type { ComponentProps } from 'react'
+import { createContext } 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'
+
+export { inputMask, type InputMaskType, type MaskOptions }
+
+export type InputProps = {
+  variant?: 'outlined' | 'filled'
+}
+
+const FieldContext = createContext<InputProps>({
+  variant: 'filled'
+})
+
+export function InputRoot({
+  className,
+  children,
+  variant = 'filled',
+  ...props
+}: ComponentProps<'div'> & InputProps) {
+  return (
+    <FieldContext.Provider value={{ variant }}>
+      <div
+        className={cx(
+          'group gap-small relative flex w-full flex-col',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </FieldContext.Provider>
+  )
+}
+
+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:shadow-focus-primary focus-within:border',
+      '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: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'
+        }
+      }
+    }
+  )
+
+  return (
+    <FieldContext.Consumer>
+      {({ variant }) => {
+        return (
+          <div className={cx(className, variants({ variant }))} {...props} />
+        )
+      }}
+    </FieldContext.Consumer>
+  )
+}
+
+export function InputLabel({
+  htmlFor,
+  className,
+  ...props
+}: ComponentProps<'label'> & { htmlFor: string }) {
+  return (
+    <FieldContext.Consumer>
+      {({ variant }) => {
+        return (
+          <label
+            className={cx(
+              'rounded-small-1x text-size-body-md text-neutral-dark data-[variant=outlined]:bg-layer-2-idle bg-layer-2-hover w-fit font-normal',
+              'ease animate-in pointer-events-none absolute top-1/2 left-auto -translate-y-1/2 transition-all duration-250',
+              // Filled
+              'group-focus-within:text-primary-idle group-focus-within:bg-layer-2-hover data-[variant=outlined]:group-focus-within:bg-layer-2-idle 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',
+              // 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-auto',
+              'group-has-[div[data-slot=input-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-auto',
+              // Animate
+              'group-focus-within:animate-in',
+              'group-has-[input:not(:placeholder-shown)]:animate-out',
+              className
+            )}
+            data-variant={variant}
+            htmlFor={htmlFor}
+            {...props}
+          />
+        )
+      }}
+    </FieldContext.Consumer>
+  )
+}
+
+export function InputText({
+  className,
+  maskOptions,
+  maskType,
+  ...props
+}: ComponentProps<'input'> & {
+  maskOptions?: MaskOptions
+  maskType?: InputMaskType
+}) {
+  const Component = maskOptions || maskType ? InputMask : 'input'
+
+  return (
+    <Component
+      {...props}
+      {...(maskType
+        ? { ...inputMask(maskType) }
+        : maskOptions && { ...maskOptions })}
+      className={cx(
+        className,
+        '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'
+      )}
+      placeholder={props.placeholder || ' '}
+      {...(maskOptions && { ...maskOptions })}
+    />
+  )
+}
+
+export function InputNumber({
+  className,
+  locales = 'pt-BR',
+  ...props
+}: InputNumberFormatProps) {
+  return (
+    <InputNumberFormat
+      {...props}
+      className={cx(
+        className,
+        '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'
+      )}
+      locales={locales}
+      placeholder={props.placeholder || ' '}
+    />
+  )
+}
+
+export function InputLeftSlot({ className, ...props }: ComponentProps<'div'>) {
+  return (
+    <div
+      {...props}
+      className={cx(
+        className,
+        'left-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center'
+      )}
+      data-slot="input-left-slot"
+    />
+  )
+}
+
+export function InputRightSlot({ className, ...props }: ComponentProps<'div'>) {
+  return (
+    <div
+      {...props}
+      className={cx(
+        className,
+        'right-small absolute top-1/2 flex -translate-y-1/2 items-center justify-center'
+      )}
+      data-slot="input-right-slot"
+    />
+  )
+}
+
+export function InputMessage({ className, ...props }: ComponentProps<'p'>) {
+  return (
+    <p
+      {...props}
+      className={cx(
+        'text-size-body-sm text-neutral-dark font-normal',
+        className
+      )}
+    />
+  )
+}
+
+export function InputContainer({ className, ...props }: ComponentProps<'div'>) {
+  return (
+    <div
+      {...props}
+      className={cx(className, 'flex items-center')}
+      data-slot="input-content"
+    />
+  )
+}
+
+export function InputAction({
+  className,
+  side,
+  ...props
+}: ComponentProps<'div'> & {
+  side: 'left' | 'right'
+}) {
+  return (
+    <div
+      {...props}
+      className={cx(
+        className,
+        'group h-large-4x flex items-center justify-center'
+      )}
+      data-side={side}
+      data-slot={`input-${side}-action-slot`}
+    />
+  )
+}
+
+export function InputActionButton({
+  className,
+  ...props
+}: ComponentProps<'div'>) {
+  return (
+    <div
+      {...props}
+      className={cx(
+        className,
+        'h-large-4x w-large-4x bg-layer-2-hover flex cursor-pointer items-center justify-center'
+      )}
+    />
+  )
+}

package/src/components/list.tsx

@@ -0,0 +1,111 @@
+import { Slot } from '@radix-ui/react-slot'
+import { cx, cva, type ClassVariantProps } from '@xjur-ui/util'
+import type { ComponentProps } from 'react'
+import { type TypographyProps, Typography } from './typography'
+
+export function ListRoot({
+  className,
+  asChild,
+  ...props
+}: ComponentProps<'div'> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : 'div'
+
+  return (
+    <Comp
+      {...props}
+      className={cx(
+        className,
+        'rounded-small scrollbar-hide bg-layer-2-idle border-border-layer-2 shadow-elevation-3 z-10 max-h-[400px] list-none overflow-y-auto border'
+      )}
+    />
+  )
+}
+
+export function ListHeader({
+  className,
+  asChild,
+  ...props
+}: ComponentProps<'div'> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : 'div'
+  return <Comp {...props} className={cx(className, 'px-small pt-small-1x')} />
+}
+
+export function ListHeaderTitle({
+  variant = 'label',
+  size = 'sm',
+  weight = 'medium',
+  className,
+  ...props
+}: TypographyProps) {
+  return (
+    <Typography
+      className={cx(className, 'text-neutral-placeholder')}
+      size={size}
+      variant={variant}
+      weight={weight}
+      {...props}
+    />
+  )
+}
+
+export function ListContent({
+  className,
+  asChild,
+  ...props
+}: ComponentProps<'ul'> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : 'ul'
+
+  return (
+    <Comp
+      {...props}
+      className={cx('gap-small-1x p-small flex flex-col', className)}
+    />
+  )
+}
+
+const variants = cva(
+  [
+    'py-medium px-small flex items-center gap-small rounded-small-1x',
+    'bg-layer-2-idle text-neutral-dark',
+    'hover:bg-layer-2-hover transition-colors duration-100 ease-out',
+    'active:bg-layer-2-pressed'
+  ],
+  {
+    variants: {
+      size: {
+        md: 'h-large-4x',
+        lg: 'h-large-7x'
+      },
+      isActive: {
+        true: 'bg-primary-alt-active text-primary-label-active hover:bg-primary-alt-hover active:bg-primary-alt-pressed'
+      }
+    },
+    defaultVariants: {
+      size: 'md',
+      isActive: false
+    }
+  }
+)
+
+export function ListItem({
+  className,
+  size,
+  isActive,
+  asChild,
+  ...props
+}: ComponentProps<'li'> &
+  ClassVariantProps<typeof variants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : 'li'
+
+  return (
+    <Comp {...props} className={cx(variants({ size, isActive }), className)} />
+  )
+}

package/src/components/radio.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react'
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
+import { cx } from '@xjur-ui/util'
+import { Typography } from './typography'
+
+export function RadioGroup({
+  className,
+  orientation = 'vertical',
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cx(
+        'gap-small flex data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col',
+        className
+      )}
+      data-orientation={orientation}
+      data-slot="radio-group"
+      {...props}
+    />
+  )
+}
+
+export function RadioItem({
+  className,
+  id,
+  label,
+  disabled = false,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item> & {
+  label?: string
+}) {
+  return (
+    <div className="gap-small flex items-center">
+      <RadioGroupPrimitive.Item
+        className={cx(
+          // layout
+          'size-large-alt rounded-circle inline-flex items-center justify-center transition-[border-color,box-shadow,background-color] duration-200 outline-none',
+          // base
+          'border-border-layer-2 bg-layer-2-idle cursor-pointer border-2',
+          // hover/focus (desmarcado)
+          'hover:border-primary-idle focus:border-primary-idle focus:shadow-focus-primary',
+          // estado checked
+          'data-[state=checked]:bg-primary-active data-[state=checked]:border-primary-active',
+          // hover quando estiver checked (opcional)
+          'data-[state=checked]:hover:border-primary-idle',
+          // disabled
+          'disabled:hover:border-border-layer-2 disabled:cursor-not-allowed disabled:opacity-[38%]',
+          className
+        )}
+        data-slot="radio-group-item"
+        disabled={disabled}
+        id={id}
+        {...props}
+      >
+        <RadioGroupPrimitive.Indicator
+          className="relative flex items-center justify-center"
+          data-slot="radio-group-indicator"
+        />
+      </RadioGroupPrimitive.Item>
+
+      {!!label && (
+        <Typography
+          asChild={true}
+          className="text-size-body-sm data-[disabled=true]:opacity-38"
+          data-disabled={disabled}
+          weight="medium"
+        >
+          <label htmlFor={id}>{label}</label>
+        </Typography>
+      )}
+    </div>
+  )
+}

package/src/components/search-input.tsx

@@ -0,0 +1,112 @@
+import { cva, cx } from '@xjur-ui/util'
+import { createContext, type ComponentProps } from 'react'
+import { Typography } from './typography'
+import { Button, type ButtonProps } from './button'
+
+export type SearchInputProps = {
+  variant?: 'outlined' | 'line' | 'action'
+}
+
+const SearchInputRootContext = createContext<SearchInputProps>({
+  variant: 'outlined'
+})
+
+export function SearchInputRoot({
+  className,
+  variant = 'outlined',
+  ...props
+}: ComponentProps<'div'> & SearchInputProps) {
+  return (
+    <SearchInputRootContext.Provider value={{ variant }}>
+      <div className={cx(className, 'relative flex w-full')} {...props} />
+    </SearchInputRootContext.Provider>
+  )
+}
+
+export function SearchInputContent({
+  className,
+  ...props
+}: ComponentProps<'div'>) {
+  const contentVarians = cva(
+    [
+      'gap-small py-small_1x-alt px-small flex items-center w-full',
+      'h-large-4x rounded-circle',
+      'border-border-layer-2 placeholder:placeholder-neutral-placeholder text-size-body-md text-neutral-dark border font-normal',
+      'group-hover:border-border-layer-3 transition-colors duration-200',
+      'disabled:opacity-60',
+      'focus-within:border-primary-idle'
+    ],
+    {
+      variants: {
+        variant: {
+          outlined:
+            'rounded-circle focus-within:border-primary-idle focus-within:shadow-focus-primary',
+          line: 'rounded-none border-t-0 border-b-1 border-x-0',
+          action: 'rounded-tr-none rounded-br-none border-r-0'
+        }
+      }
+    }
+  )
+
+  return (
+    <SearchInputRootContext.Consumer>
+      {({ variant }) => (
+        <div
+          className={cx(className, contentVarians({ variant }))}
+          data-variant={variant}
+          {...props}
+        />
+      )}
+    </SearchInputRootContext.Consumer>
+  )
+}
+
+export function SearchInputLabel({
+  htmlFor,
+  ...props
+}: ComponentProps<'label'>) {
+  return (
+    <Typography
+      asChild={true}
+      className={cx('absolute -top-[22px] left-0')}
+      size="sm"
+      variant="label"
+      weight="medium"
+    >
+      <label htmlFor={htmlFor} {...props} />
+    </Typography>
+  )
+}
+
+export function SearchInputText({
+  className,
+  ...props
+}: ComponentProps<'input'>) {
+  return <input className={cx(className, 'flex-1 outline-none')} {...props} />
+}
+
+export function SearchInputSlot(props: ComponentProps<'div'>) {
+  return <div {...props} data-slot="search-input-slot" />
+}
+
+export function SearchInputAction({
+  className,
+  appearance = 'ghost',
+  variant = 'outlined',
+  ...props
+}: ButtonProps) {
+  return (
+    <Button
+      {...props}
+      appearance={appearance}
+      className={cx(
+        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'
+      )}
+      data-slot="search-input-action"
+      variant={variant}
+    />
+  )
+}