@xjur-ui/react 1.0.0 → 1.0.1

package/eslint.config.js

@@ -1,3 +1,10 @@
 import eslintConfig from '@xjur-ui/eslint-config/react'
 
-export default [...eslintConfig]
+export default [
+  ...eslintConfig,
+  {
+    rules: {
+      'react/prop-types': 'off'
+    }
+  }
+]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xjur-ui/react",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
   "description": "React components for XJur Design System",
   "main": "dist/index.js",
@@ -8,21 +8,51 @@
   "types": "dist/index.d.ts",
   "exports": {
     "./index.css": "./dist/index.css",
-    ".": "./dist/index.js",
-    "./button": "./dist/components/ui/button.js",
-    "./icon": "./dist/components/ui/icon.js",
-    "./typography": "./dist/components/ui/typography.js",
-    "./logo": "./dist/components/ui/logo.js",
-    "./input": "./dist/components/ui/input/index.js",
-    "./otp-input": "./dist/components/ui/otp-input.js",
-    "./accordion": "./dist/components/ui/accordion.js"
+    "./button": "./dist/components/button.js",
+    "./icon": "./dist/components/icon.js",
+    "./typography": "./dist/components/typography.js",
+    "./logo": "./dist/components/logo.js",
+    "./input": "./dist/components/input.js",
+    "./otp-input": "./dist/components/otp-input.js",
+    "./collapsible": "./dist/components/collapsible.js",
+    "./list": "./dist/components/list.js",
+    "./tabs": "./dist/components/tabs.js",
+    "./calendar": "./dist/components/calendar.js",
+    "./checkbox": "./dist/components/checkbox.js",
+    "./radio": "./dist/components/radio.js",
+    "./switch": "./dist/components/switch.js",
+    "./select": "./dist/components/select.js",
+    "./search-input": "./dist/components/search-input.js",
+    "./tag": "./dist/components/tag.js",
+    "./chip": "./dist/components/chip.js",
+    "./avatar": "./dist/components/avatar.js",
+    "./date-picker": "./dist/components/date-picker.js",
+    "./dropdown-menu": "./dist/components/dropdown-menu.js",
+    "./divider": "./dist/components/divider.js",
+    "./sheet": "./dist/components/sheet.js"
   },
   "dependencies": {
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
     "@radix-ui/react-one-time-password-field": "^0.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
     "@react-input/mask": "^2.0.4",
+    "@react-input/number-format": "^2.0.3",
     "@xjur-ui/styles": "*",
-    "@xjur-ui/util": "*"
+    "@xjur-ui/util": "*",
+    "react-day-picker": "^9.9.0",
+    "tailwind-scrollbar": "^4.0.2",
+    "tailwind-scrollbar-hide": "^4.0.0",
+    "tw-animate-css": "^1.3.7"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.11",

package/src/components/avatar.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react'
+import * as AvatarPrimitive from '@radix-ui/react-avatar'
+import { cx } from '@xjur-ui/util'
+
+export function AvatarRoot({
+  className,
+  size = 'md',
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+  size?: 'xs' | 'sm' | 'md' | 'lg'
+}) {
+  return (
+    <AvatarPrimitive.Root
+      className={cx(
+        'rounded-circle relative flex shrink-0 overflow-hidden',
+        'data-[size=lg]:size-large-8x data-[size=md]:size-large-4x data-[size=sm]:size-large-2x data-[size=xs]:size-large-1x',
+        className
+      )}
+      data-size={size}
+      data-slot="avatar"
+      {...props}
+    />
+  )
+}
+
+export function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      className={cx('aspect-square size-full', className)}
+      data-slot="avatar-image"
+      {...props}
+    />
+  )
+}
+
+export function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      className={cx(
+        'bg-alt-1 rounded-circle flex size-full items-center justify-center font-medium text-white',
+        className
+      )}
+      data-slot="avatar-fallback"
+      {...props}
+    />
+  )
+}

package/src/components/{ui/button.tsx → button.tsx}

@@ -1,16 +1,18 @@
 import { Slot } from '@radix-ui/react-slot'
 import type { ComponentProps } from 'react'
-import { cva, type ClassVariantProps } from '@xjur-ui/util'
+import { cva, cx, type ClassVariantProps } from '@xjur-ui/util'
 
-const buttonVariants = cva(
+export const buttonVariants = cva(
   [
-    'inline-flex items-center justify-center rounded-circle gap-small cursor-pointer disabled:opacity-38 disabled:pointer-events-none transition-colors'
+    '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'
+        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: '',
@@ -98,7 +100,7 @@ export function Button({
   const Component = asChild ? Slot : 'button'
   return (
     <Component
-      className={buttonVariants({ className, variant, appearance, size })}
+      className={cx(buttonVariants({ variant, appearance, size }), className)}
       {...props}
     />
   )

package/src/components/calendar.tsx

@@ -0,0 +1,123 @@
+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-primary-label-active font-medium',
+      defaultClassNames.today
+    ),
+    range_start: cx(
+      'text-size-body-md bg-primary-alt-active text-primary-label-active font-medium hover:bg-primary-alt-active'
+    ),
+    range_end: cx(
+      'text-size-body-md bg-primary-alt-active text-primary-label-active font-medium hover:bg-primary-alt-active'
+    ),
+    range_middle: cx('!bg-layer-2-hover !text-primary-label-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/checkbox.tsx

@@ -0,0 +1,57 @@
+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/chip.tsx

@@ -0,0 +1,109 @@
+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',
+  ...props
+}: ComponentProps<'div'> & ClassVariantProps<typeof chipVariants>) {
+  return <div className={cx(chipVariants({ variant }), className)} {...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: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

@@ -0,0 +1,35 @@
+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/date-picker.tsx

@@ -0,0 +1,154 @@
+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-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(
+        'bg-layer-2-idle w-fit font-normal',
+        'pointer-events-none absolute top-[50%] left-auto -translate-y-1/2',
+        'ease pointer-events-none transition-all duration-150',
+        // Content Open
+        'group-data-[state=open]:text-primary-idle',
+        'group-data-[state=open]:bg-layer-2-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)]:bg-layer-2-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-auto',
+        'group-has-[div[data-slot=date-picker-left-slot]]:group-has-[input:not(:placeholder-shown)]:left-auto',
+        // 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}>{children}</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}
+    />
+  )
+}