@xjur-ui/react 1.0.0 → 1.0.2

package/src/components/date-picker.tsx

@@ -0,0 +1,160 @@
+import type { ComponentProps } from 'react'
+import * as RadixPopover from '@radix-ui/react-popover'
+import { cx } from '@xjur-ui/util'
+import { Typography, type TypographyProps } from './typography'
+
+export function DatePickerRoot(
+  props: ComponentProps<typeof RadixPopover.Root>
+) {
+  return <RadixPopover.Root {...props} />
+}
+
+export function DatePickerTrigger({
+  className,
+  ...props
+}: ComponentProps<typeof RadixPopover.Trigger>) {
+  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 data-[state=open]:shadow-focus-primary',
+        'has-[input:not(:placeholder-shown)]:text-primary-idle',
+        'has-[input:not(:placeholder-shown)]:border-primary-idle'
+      )}
+      {...props}
+    />
+  )
+}
+
+export function DatePickerContent({
+  className,
+  sideOffset = 5,
+  side = 'bottom',
+  align = 'start',
+  ...props
+}: ComponentProps<typeof RadixPopover.Content>) {
+  return (
+    <RadixPopover.Portal>
+      <RadixPopover.Content
+        align={align}
+        className={cx(
+          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)]'
+        )}
+        side={side}
+        sideOffset={sideOffset}
+        {...props}
+      />
+    </RadixPopover.Portal>
+  )
+}
+
+export function DatePickerValue({
+  className,
+  displayValue = '',
+  value,
+  ...props
+}: ComponentProps<'input'> & { displayValue?: string }) {
+  return (
+    <>
+      {!!displayValue && (
+        <Typography className="text-neutral-dark group-has-[div[data-slot=date-picker-left-slot]]:pl-large-1x">
+          {displayValue}
+        </Typography>
+      )}
+
+      <input
+        {...props}
+        aria-readonly={true}
+        className={cx('pointer-events-none', className)}
+        hidden={true}
+        placeholder={props.placeholder ?? ' '}
+        readOnly={true}
+        value={value ?? ''}
+      />
+    </>
+  )
+}
+
+export function DatePickerLabel({
+  className,
+  htmlFor,
+  children,
+  ...props
+}: TypographyProps & { htmlFor?: string }) {
+  return (
+    <Typography
+      asChild={true}
+      className={cx(
+        '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]:-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)]:-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=date-picker-left-slot]]:left-large-4x',
+        'group-has-[div[data-slot=date-picker-left-slot]]:group-data-[state=open]:left-small',
+        'group-has-[div[data-slot=date-picker-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-small',
+        // If has right slot
+        'group-has-[div[data-slot=date-picker-right-slot]]:right-large-4x',
+        'group-has-[div[data-slot=date-picker-right-slot]]:group-data-[state=open]:right-small',
+        'group-has-[div[data-slot=date-picker-right-slot]]:group-has-[input:not(:placeholder-shown)]:right-small',
+        // Animate
+        'group-data-[state=open]:animate-in',
+        'group-data-[state=closed]:animate-out',
+        'group-has-[input:not(:placeholder-shown)]:animate-out',
+        className
+      )}
+      weight="medium"
+      {...props}
+    >
+      <label htmlFor={htmlFor}>
+        <span className="bg-layer-2-idle rounded-small-1x max-w-full">
+          {children}
+        </span>
+      </label>
+    </Typography>
+  )
+}
+
+export function DatePickerLeftSlot({
+  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="date-picker-left-slot"
+    />
+  )
+}
+
+export function DatePickerRightSlot({
+  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="date-picker-right-slot"
+    />
+  )
+}

package/src/components/divider.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import { cx } from '@xjur-ui/util'
+
+export function Divider({
+  className,
+  orientation = 'horizontal',
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      className={cx(
+        'bg-border-layer-2 shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        className
+      )}
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      {...props}
+    />
+  )
+}

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,256 @@
+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: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'
+        }
+      }
+    }
+  )
+
+  return (
+    <FieldContext.Consumer>
+      {({ variant }) => {
+        return (
+          <div className={cx(className, variants({ variant }))} {...props} />
+        )
+      }}
+    </FieldContext.Consumer>
+  )
+}
+
+export function InputLabel({
+  htmlFor,
+  className,
+  children,
+  ...props
+}: ComponentProps<'label'> & { htmlFor: string }) {
+  return (
+    <FieldContext.Consumer>
+      {({ variant }) => {
+        return (
+          <label
+            className={cx(
+              'group text-size-body-md text-neutral-dark 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-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-small',
+              'group-has-[div[data-slot=input-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-small',
+              // If has right slot
+              'group-has-[div[data-slot=input-right-slot]]:right-large-4x',
+              'group-has-[div[data-slot=input-right-slot]]:group-focus-within:right-small',
+              'group-has-[div[data-slot=input-right-slot]]:group-has-[input:not(:placeholder-shown)]:right-small',
+              // Animate
+              'group-focus-within:animate-in',
+              'group-has-[input:not(:placeholder-shown)]:animate-out',
+              className
+            )}
+            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>
+        )
+      }}
+    </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)} />
+  )
+}