@xjur-ui/react 2.1.1 → 2.2.0

package/src/components/badge.tsx

@@ -1,40 +0,0 @@
-import { cva, type ClassVariantProps, cx } from '@xjur-ui/util'
-import { Typography } from './typography'
-
-const badgeVariants = cva(
-  [
-    'flex items-center justify-center size-large p-small-2x text-neutral-label rounded-circle'
-  ],
-  {
-    variants: {
-      variant: {
-        primary: 'bg-primary-idle',
-        secondary: 'bg-secondary-idle',
-        neutral: 'bg-alt-2-idle',
-        success: 'bg-success-idle',
-        warning: 'bg-warning-idle',
-        danger: 'bg-danger-idle'
-      }
-    },
-    defaultVariants: {
-      variant: 'neutral'
-    }
-  }
-)
-
-export function Badge({
-  variant = 'neutral',
-  children,
-  className
-}: ClassVariantProps<typeof badgeVariants> & {
-  children: string
-  className?: string
-}) {
-  return (
-    <span className={cx(badgeVariants({ variant }), className)}>
-      <Typography className="text-inherit" size="sm-2x" variant="label">
-        {children}
-      </Typography>
-    </span>
-  )
-}

package/src/components/breadcrumb.tsx

@@ -1,119 +0,0 @@
-import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
-import { cx } from '@xjur-ui/util'
-import { Icon } from './icon'
-import { Typography, type TypographyProps } from './typography'
-
-export function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
-  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
-}
-
-export function BreadcrumbList({
-  className,
-  ...props
-}: React.ComponentProps<'ol'>) {
-  return (
-    <ol
-      className={cx(
-        'text-neutral-placeholder flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
-        className
-      )}
-      data-slot="breadcrumb-list"
-      {...props}
-    />
-  )
-}
-
-export function BreadcrumbItem({
-  className,
-  ...props
-}: React.ComponentProps<'li'>) {
-  return (
-    <li
-      className={cx('inline-flex items-center gap-1.5', className)}
-      data-slot="breadcrumb-item"
-      {...props}
-    />
-  )
-}
-
-export function BreadcrumbLink({
-  asChild,
-  className,
-  variant = 'headline',
-  size = 'sm',
-  ...props
-}: React.ComponentProps<'a'> & {
-  asChild?: boolean
-  href?: string
-  variant?: TypographyProps['variant']
-  size?: TypographyProps['size']
-}) {
-  const Comp = asChild ? Slot : 'a'
-
-  return (
-    <Typography asChild={true} size={size} variant={variant}>
-      <Comp
-        className={cx('hover:text-neutral-dark transition-colors', className)}
-        data-slot="breadcrumb-link"
-        {...props}
-      />
-    </Typography>
-  )
-}
-
-export function BreadcrumbPage({
-  variant = 'headline',
-  size = 'sm',
-  className,
-  ...props
-}: React.ComponentProps<typeof Typography>) {
-  return (
-    <Typography
-      aria-current="page"
-      aria-disabled="true"
-      className={cx('text-neutral-dark font-normal', className)}
-      data-slot="breadcrumb-page"
-      role="link"
-      size={size}
-      variant={variant}
-      {...props}
-    />
-  )
-}
-
-export function BreadcrumbSeparator({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<'li'>) {
-  return (
-    <li
-      aria-hidden="true"
-      className={cx('[&>span]:text-size-title-lg', className)}
-      data-slot="breadcrumb-separator"
-      role="presentation"
-      {...props}
-    >
-      {children ?? <Icon name="chevron_right" />}
-    </li>
-  )
-}
-
-export function BreadcrumbEllipsis({
-  className,
-  ...props
-}: React.ComponentProps<'span'>) {
-  return (
-    <span
-      aria-hidden="true"
-      className={cx('flex size-9 items-center justify-center', className)}
-      data-slot="breadcrumb-ellipsis"
-      role="presentation"
-      {...props}
-    >
-      <Icon className="size-4" name="more_horiz" />
-      <span className="sr-only">More</span>
-    </span>
-  )
-}

package/src/components/chip.tsx

@@ -1,117 +0,0 @@
-import { cva, cx, type ClassVariantProps } from '@xjur-ui/util'
-import { type ComponentProps } from 'react'
-import { Typography } from './typography'
-import { Icon, type IconType } from './icon'
-import { AvatarFallback, AvatarImage, AvatarRoot } from './avatar'
-
-const chipVariants = cva(
-  [
-    'group/chip relative h-large-2x w-fit rounded-circle px-small py-none flex items-center gap-small_1x-alt',
-    'transition-all duration-200'
-  ],
-  {
-    variants: {
-      variant: {
-        primary:
-          'bg-primary-alt-idle text-primary-label-idle hover:bg-primary-alt-hover',
-        danger:
-          'bg-danger-alt-idle text-danger-label-idle hover:bg-danger-alt-hover',
-        neutral: 'bg-layer-1-idle text-neutral-dark hover:bg-layer-1-hover'
-      }
-    },
-    defaultVariants: {
-      variant: 'primary'
-    }
-  }
-)
-
-export function ChipRoot({
-  className,
-  variant = 'primary',
-  disabled = false,
-  ...props
-}: ComponentProps<'div'> &
-  ClassVariantProps<typeof chipVariants> & { disabled?: boolean }) {
-  return (
-    <div
-      className={cx(chipVariants({ variant }), className)}
-      data-disabled={disabled}
-      {...props}
-    />
-  )
-}
-
-export function ChipText({
-  variant = 'label',
-  size = 'sm-1x',
-  weight = 'medium',
-  className,
-  ...props
-}: ComponentProps<typeof Typography>) {
-  return (
-    <Typography
-      className={cx(className, 'truncate')}
-      size={size}
-      variant={variant}
-      weight={weight}
-      {...props}
-    />
-  )
-}
-
-export function ChipIcon({ className, ...props }: ComponentProps<typeof Icon>) {
-  return (
-    <Icon
-      className={
-        (cx(
-          'text-size-body-md',
-          'group-data-[variant=primary]:text-primary-label-idle',
-          'group-data-[variant=danger]:text-danger-label-idle',
-          'group-data-[variant=neutral]:text-icon-neutral-3'
-        ),
-        className)
-      }
-      {...props}
-    />
-  )
-}
-
-export function ChipClose({
-  className,
-  children = <ChipIcon name="close" />,
-  ...props
-}: ComponentProps<'button'> & { name?: IconType }) {
-  return (
-    <button
-      className={cx(
-        className,
-        'cursor-pointer bg-inherit',
-        'invisible items-center justify-center group-hover/chip:data-[disabled=false]:visible',
-        'absolute top-0 right-0',
-        'h-large-2x w-large-2x rounded-circle',
-        'transition-[visibility] duration-200'
-      )}
-      type="button"
-      {...props}
-    >
-      {children}
-    </button>
-  )
-}
-
-export function ChipAvatar({
-  size = 'xs',
-  avatarFallback = 'CN',
-  avatarUrl,
-  ...props
-}: ComponentProps<typeof AvatarRoot> & {
-  avatarUrl?: string
-  avatarFallback: string
-}) {
-  return (
-    <AvatarRoot size={size} style={{ marginLeft: '-4px' }} {...props}>
-      {avatarUrl && <AvatarImage src={avatarUrl} />}
-      <AvatarFallback>{avatarFallback}</AvatarFallback>
-    </AvatarRoot>
-  )
-}

package/src/components/collapsible.tsx

@@ -1,35 +0,0 @@
-import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
-import { cx } from '@xjur-ui/util'
-
-export function CollapsibleRoot({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
-  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
-}
-
-export function CollapsibleTrigger({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
-  return (
-    <CollapsiblePrimitive.CollapsibleTrigger
-      data-slot="collapsible-trigger"
-      {...props}
-    />
-  )
-}
-
-export function CollapsibleContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
-  return (
-    <CollapsiblePrimitive.CollapsibleContent
-      className={cx(
-        className,
-        'data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up'
-      )}
-      data-slot="collapsible-content"
-      {...props}
-    />
-  )
-}

package/src/components/controls/button.tsx

@@ -1,107 +0,0 @@
-import { Slot } from '@radix-ui/react-slot'
-import type { ComponentProps } from 'react'
-import { cva, cx, type ClassVariantProps } from '@xjur-ui/util'
-
-export const buttonVariants = cva(
-  [
-    'outline-none inline-flex items-center justify-center rounded-circle gap-small cursor-pointer disabled:opacity-38 disabled:pointer-events-none transition-colors'
-  ],
-  {
-    variants: {
-      size: {
-        md: 'py-small_1x-alt px-medium text-size-body-md',
-        sm: 'py-small-1x px-small text-size-label-sm',
-        icon_md: 'p-small text-size-body-md h-large-4x w-large-4x',
-        icon_sm: 'p-small-1x text-size-label-sm h-large-2x w-large-2x'
-      },
-      variant: {
-        primary: '',
-        secondary: '',
-        tertiary: '',
-        destructive: '',
-        outlined:
-          'bg-layer-2-idle border border-border-layer-2 hover:bg-layer-2-hover active:bg-layer-2-pressed'
-      },
-      appearance: {
-        solid: '',
-        ghost: 'bg-transparent'
-      }
-    },
-    compoundVariants: [
-      {
-        variant: 'primary',
-        appearance: 'solid',
-        class:
-          'bg-primary-idle text-neutral-label hover:bg-primary-hover active:bg-primary-pressed'
-      },
-      {
-        variant: 'primary',
-        appearance: 'ghost',
-        class:
-          'text-primary-idle hover:bg-primary-alt-idle active:bg-primary-alt-pressed'
-      },
-      {
-        variant: 'secondary',
-        appearance: 'solid',
-        class:
-          'bg-layer-1-hover text-neutral-dark hover:bg-layer-1-pressed active:bg-layer-1-active'
-      },
-      {
-        variant: 'secondary',
-        appearance: 'ghost',
-        class: 'hover:bg-layer-1-hover active:bg-layer-1-pressed'
-      },
-      {
-        variant: 'tertiary',
-        appearance: 'solid',
-        class:
-          'bg-layer-2-hover text-neutral-dark hover:bg-layer-2-pressed active:bg-layer-2-active'
-      },
-      {
-        variant: 'tertiary',
-        appearance: 'ghost',
-        class: 'hover:bg-layer-2-hover active:bg-layer-2-pressed'
-      },
-      {
-        variant: 'destructive',
-        appearance: 'solid',
-        class:
-          'bg-danger-idle text-neutral-label hover:bg-danger-hover active:bg-danger-pressed'
-      },
-      {
-        variant: 'destructive',
-        appearance: 'ghost',
-        class:
-          'text-danger-label-idle hover:bg-danger-alt-idle active:bg-danger-alt-pressed'
-      }
-    ],
-    defaultVariants: {
-      size: 'md',
-      variant: 'primary',
-      appearance: 'solid'
-    }
-  }
-)
-
-export interface ButtonProps
-  extends ComponentProps<'button'>,
-    ClassVariantProps<typeof buttonVariants> {
-  asChild?: boolean
-}
-
-export function Button({
-  asChild,
-  className,
-  variant = 'primary',
-  size = 'md',
-  appearance = 'solid',
-  ...props
-}: ButtonProps) {
-  const Component = asChild ? Slot : 'button'
-  return (
-    <Component
-      className={cx(buttonVariants({ variant, appearance, size }), className)}
-      {...props}
-    />
-  )
-}

package/src/components/controls/calendar.tsx

@@ -1,124 +0,0 @@
-import 'react-day-picker/style.css'
-import { ptBR } from 'date-fns/locale'
-import { cx } from '@xjur-ui/util'
-import {
-  type DayPickerProps,
-  type ClassNames,
-  DayPicker,
-  getDefaultClassNames
-} from 'react-day-picker'
-import { Icon, type IconType } from '../icon'
-import { Button } from './button'
-
-function capitalize(str: string) {
-  return str.charAt(0).toUpperCase() + str.slice(1)
-}
-
-export { type DateRange } from 'react-day-picker'
-
-export type CalendarProps = DayPickerProps & {
-  handleClear?: () => void
-  handleToday?: () => void
-}
-
-export function Calendar({
-  showOutsideDays = true,
-  locale = ptBR,
-  navLayout = 'around',
-  handleClear,
-  handleToday,
-  ...props
-}: CalendarProps) {
-  const defaultClassNames = getDefaultClassNames()
-
-  const classNames: Partial<ClassNames> = {
-    root: cx(
-      'bg-layer-2-idle shadow-elevation-2 rounded-[6px] p-small w-fit border border-border-layer-2 text-size-body-md text-neutral-dark font-inter',
-      defaultClassNames.root
-    ),
-    day: cx('rounded-circle  hover:bg-layer-2-hover'),
-    caption_label: cx(
-      'text-size-label-md text-neutral-dark font-medium',
-      defaultClassNames.caption_label
-    ),
-    outside: cx('text-neutral-placeholder', defaultClassNames.outside),
-    selected: cx(
-      'text-size-body-md bg-primary-alt-active text-primary-label-active font-medium hover:!bg-primary-alt-active'
-    ),
-    disabled: cx('opacity-60', defaultClassNames.disabled),
-    today: cx(
-      'text-neutral-dark font-medium bg-layer-2-active hover:!bg-layer-2-active'
-    ),
-    range_start: cx(
-      'rounded-r-none text-size-body-md bg-primary-alt-active text-primary-label-active font-medium hover:!bg-primary-alt-active'
-    ),
-    range_end: cx(
-      'rounded-l-none text-size-body-md bg-primary-alt-active text-primary-label-active font-medium hover:!bg-primary-alt-active'
-    ),
-    range_middle: cx(
-      '!bg-primary-alt-active !text-primary-label-active rounded-none hover:!bg-primary-alt-active'
-    )
-  }
-
-  return (
-    <DayPicker
-      classNames={{ ...classNames, ...props.classNames }}
-      components={{
-        Chevron: ({ orientation }) => {
-          const icon = orientation === 'left' ? 'chevron_left' : 'chevron_right'
-          return (
-            <Icon
-              className="size-large text-icon-neutral-3"
-              name={icon as IconType}
-            />
-          )
-        },
-        ...props.components
-      }}
-      footer={
-        (handleClear || handleToday) && (
-          <div className="py-small border-border-layer-2 mt-small flex h-full w-full items-center justify-between border-t">
-            {handleToday && (
-              <Button
-                appearance="ghost"
-                variant="secondary"
-                onClick={handleToday}
-              >
-                Hoje
-              </Button>
-            )}
-            {handleClear && (
-              <Button
-                appearance="ghost"
-                variant="secondary"
-                onClick={handleClear}
-              >
-                Limpar
-              </Button>
-            )}
-          </div>
-        )
-      }
-      formatters={{
-        formatWeekdayName: date => {
-          const weekday = date.toLocaleDateString('pt-BR', { weekday: 'short' })
-          return (
-            weekday.charAt(0).toUpperCase() + weekday.slice(1).replace('.', '')
-          )
-        },
-        formatCaption(month) {
-          const monthName = month.toLocaleDateString('pt-BR', {
-            month: 'long'
-          })
-          return `${capitalize(monthName)} ${month.getFullYear()}`
-        },
-        ...props.formatters
-      }}
-      locale={locale}
-      mode={props.mode ?? 'single'}
-      navLayout={navLayout}
-      showOutsideDays={showOutsideDays}
-      {...props}
-    />
-  )
-}

package/src/components/controls/checkbox.tsx

@@ -1,57 +0,0 @@
-import * as CheckoxPrimitive from '@radix-ui/react-checkbox'
-import { cx } from '@xjur-ui/util'
-import { Icon } from '../icon'
-import { Typography } from '../typography'
-
-export function Checkbox({
-  label,
-  name,
-  className,
-  disabled = false,
-  ...props
-}: CheckoxPrimitive.CheckboxProps & {
-  label?: string
-}) {
-  const fieldId = `field-checkbox-${name}`
-
-  return (
-    <div className="group gap-small flex items-center">
-      <CheckoxPrimitive.Root
-        disabled={disabled}
-        {...props}
-        className={cx(
-          // layout
-          'size-large-alt rounded-small-1x 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
-        )}
-        id={fieldId}
-        name={name}
-      >
-        <CheckoxPrimitive.Indicator className="flex items-center justify-center">
-          <Icon className="text-neutral-label" name="check" />
-        </CheckoxPrimitive.Indicator>
-      </CheckoxPrimitive.Root>
-
-      {!!label && (
-        <Typography
-          asChild={true}
-          className="text-size-body-sm data-[disabled=true]:opacity-38"
-          data-disabled={disabled}
-          weight="medium"
-        >
-          <label htmlFor={fieldId}>{label}</label>
-        </Typography>
-      )}
-    </div>
-  )
-}

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

@@ -1,27 +0,0 @@
-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
-}