@xjur-ui/react 2.1.0 → 2.2.0

package/src/components/form/select.tsx

@@ -1,274 +0,0 @@
-import { tv, twJoin, twMerge } from '@xjur-ui/util'
-import { useMemo, type ComponentProps } from 'react'
-import * as RadixPopover from '@radix-ui/react-popover'
-import { Icon, type IconType } from '../icon'
-import { Typography } from '../typography'
-import {
-  ListHeaderTitle,
-  ListHeader,
-  ListContent,
-  ListItem,
-  ListRoot
-} from '../list'
-import {
-  FieldContext,
-  useFieldContext,
-  type FieldContextValue
-} from './context/field.context'
-import { FloatingLabel } from './floating-label'
-
-export const select = tv({
-  slots: {
-    wrapper: 'group flex w-full flex-col gap-small-2x',
-    trigger: [
-      'h-large-4x w-full cursor-pointer relative',
-      'flex items-center gap-small rounded-small-1x justify-between',
-      'py-small_1x-alt px-small',
-      'bg-layer-2-idle border border-border-layer-2',
-      'group-has-[div[data-slot=input-action-slot]]:rounded-r-none',
-      'transition-all duration-200'
-    ],
-    content: [
-      '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)]'
-    ],
-    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'
-  },
-  variants: {
-    state: {
-      normal: {
-        trigger:
-          'hover:border-border-layer-3 data-[state=open]:border-primary-idle data-[state=open]:hover:border-primary-idle'
-      },
-      error: {
-        trigger:
-          'border-danger-idle hover:border-danger-idle data-[state=open]:border-danger-idle data-[state=open]:hover:border-danger-idle',
-        caption: 'text-danger-label-idle'
-      },
-      disabled: {
-        trigger: 'pointer-events-none border-transparent bg-layer-2-idle'
-      }
-    }
-  }
-})
-
-const { wrapper, trigger, icon, caption, slotText, content } = select()
-
-export function SelectRoot({
-  className,
-  state = 'normal',
-  defaultOpen,
-  variant = 'normal',
-  modal,
-  open,
-  onOpenChange: handleOpenChange,
-  ...props
-}: ComponentProps<'div'> &
-  FieldContextValue &
-  ComponentProps<typeof RadixPopover.Root>) {
-  return (
-    <RadixPopover.Root
-      defaultOpen={defaultOpen}
-      modal={modal}
-      open={open}
-      onOpenChange={handleOpenChange}
-    >
-      <FieldContext.Provider value={{ state, variant }}>
-        <div className={wrapper({ className, state })} {...props} />
-      </FieldContext.Provider>
-    </RadixPopover.Root>
-  )
-}
-
-export function SelectTrigger({
-  className,
-  ...props
-}: ComponentProps<typeof RadixPopover.Trigger>) {
-  const { state, variant } = useFieldContext()
-
-  const filterTrigger = tv({
-    base: ['group bg-layer-2-idle'],
-    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 (
-    <RadixPopover.Trigger
-      className={mergedClassName}
-      disabled={state === 'disabled'}
-      {...props}
-    />
-  )
-}
-
-export function SelectIcon({
-  className,
-  name,
-  ...props
-}: ComponentProps<'div'> & {
-  name: IconType
-}) {
-  const { state } = useFieldContext()
-
-  return (
-    <div className={icon({ className, state })} {...props}>
-      <Icon name={name} />
-    </div>
-  )
-}
-
-export function SelectLabel(props: ComponentProps<typeof FloatingLabel>) {
-  return <FloatingLabel {...props} />
-}
-
-export function SelectValue({
-  className,
-  displayValue = '',
-  value,
-  placeholder,
-  ...props
-}: ComponentProps<'input'> & { displayValue?: string }) {
-  const { variant } = useFieldContext()
-
-  const valueOrPlaceholder = useMemo(() => {
-    if (variant === 'filter') return displayValue
-    return displayValue || placeholder
-  }, [displayValue, placeholder, variant])
-
-  return (
-    <div className="flex w-full">
-      <Typography className="text-neutral-dark group-has-[div[data-slot=date-picker-left-slot]]:pl-large-1x">
-        {valueOrPlaceholder}
-      </Typography>
-
-      <input
-        {...props}
-        aria-readonly={true}
-        className={twJoin('pointer-events-none', className)}
-        hidden={true}
-        placeholder={' '}
-        readOnly={true}
-        value={value ?? ''}
-      />
-    </div>
-  )
-}
-
-export function SelectMultiValue({
-  className,
-  value,
-  placeholder,
-  children,
-  ...props
-}: ComponentProps<'input'>) {
-  const { variant } = useFieldContext()
-
-  const shouldShowPlaceholder = useMemo(() => {
-    if (variant === 'filter') return false
-    return Array.isArray(value) && value.length === 0 && placeholder
-  }, [value, placeholder, variant])
-
-  return (
-    <div
-      className={twMerge(
-        className,
-        'gap-small-1x scrollbar-hide flex w-full overflow-x-hidden',
-        'group-disabled:!pl-0'
-      )}
-    >
-      {shouldShowPlaceholder && (
-        <Typography className="text-neutral-dark group-has-[div[data-slot=date-picker-left-slot]]:pl-large-1x">
-          {placeholder}
-        </Typography>
-      )}
-
-      {children}
-
-      <input
-        {...props}
-        aria-readonly={true}
-        className={twMerge(className, 'pointer-events-none')}
-        hidden={true}
-        placeholder={' '}
-        readOnly={true}
-        value={value}
-      />
-    </div>
-  )
-}
-
-export function SelectContent({
-  className,
-  sideOffset = 5,
-  side = 'bottom',
-  align = 'start',
-  children,
-  ...props
-}: ComponentProps<typeof RadixPopover.Content>) {
-  const { state } = useFieldContext()
-
-  return (
-    <RadixPopover.Portal>
-      <RadixPopover.Content
-        align={align}
-        className={content({ className, state })}
-        side={side}
-        sideOffset={sideOffset}
-        {...props}
-      >
-        <ListRoot>{children}</ListRoot>
-      </RadixPopover.Content>
-    </RadixPopover.Portal>
-  )
-}
-
-export function SelectCaption({ className, ...props }: ComponentProps<'p'>) {
-  const { state } = useFieldContext()
-  return <p className={caption({ className, state })} {...props} />
-}
-
-export function SelectSlot({ className, ...props }: ComponentProps<'span'>) {
-  const { state } = useFieldContext()
-  return <span className={slotText({ className, state })} {...props} />
-}
-
-export function SelectOptions(props: ComponentProps<typeof ListContent>) {
-  return <ListContent {...props} />
-}
-
-export function SelectOption({
-  className,
-  ...props
-}: ComponentProps<typeof ListItem>) {
-  return (
-    <ListItem className={twMerge(className, 'cursor-pointer')} {...props} />
-  )
-}
-
-export function SelectOptionText(props: ComponentProps<typeof Typography>) {
-  return <Typography {...props} />
-}
-
-export function SelectHeader(props: ComponentProps<typeof ListHeader>) {
-  return <ListHeader {...props} />
-}
-
-export function SelectHeaderTitle(
-  props: ComponentProps<typeof ListHeaderTitle>
-) {
-  return <ListHeaderTitle {...props} />
-}

package/src/components/form/switch.tsx

@@ -1,31 +0,0 @@
-import * as React from 'react'
-import * as SwitchPrimitive from '@radix-ui/react-switch'
-import { cx } from '@xjur-ui/util'
-
-function Switch({
-  className,
-  ...props
-}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
-  return (
-    <SwitchPrimitive.Root
-      className={cx(
-        'w-large-3x h-large rounded-circle inline-flex shrink-0 items-center border border-transparent',
-        'peer data-[state=checked]:bg-primary-idle data-[state=unchecked]:bg-alt-4',
-        'focus-visible:border-ring focus-visible:ring-ring/50 transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50',
-        'hover:shadow-focus-primary p-[2px]',
-        className
-      )}
-      data-slot="switch"
-      {...props}
-    >
-      <SwitchPrimitive.Thumb
-        className={cx(
-          'bg-layer-2-idle size-medium pointer-events-none rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'
-        )}
-        data-slot="switch-thumb"
-      />
-    </SwitchPrimitive.Root>
-  )
-}
-
-export { Switch }

package/src/components/full-calendar/calendar-add-event.tsx

@@ -1,15 +0,0 @@
-import { Button } from '../form/button'
-import { Icon } from '../icon'
-
-interface CalendarAddEventProps {
-  date: Date
-  onAddEvent: (date: Date) => void
-}
-
-export function CalendarAddEvent({ date, onAddEvent }: CalendarAddEventProps) {
-  return (
-    <Button size="icon_sm" variant="outlined" onClick={() => onAddEvent(date)}>
-      <Icon className="text-icon-neutral-3" name="add" />
-    </Button>
-  )
-}

package/src/components/full-calendar/calendar-body.tsx

@@ -1,12 +0,0 @@
-import { cx } from '@xjur-ui/util'
-import type { ComponentProps } from 'react'
-
-export function CalendarBody({ className, ...props }: ComponentProps<'div'>) {
-  return (
-    <div
-      className={cx(className, 'gap-large-2x p-large flex flex-col')}
-      data-slot="calendar-body"
-      {...props}
-    />
-  )
-}

package/src/components/full-calendar/calendar-cell.tsx

@@ -1,120 +0,0 @@
-import { Fragment, useMemo } from 'react'
-import { useDroppable } from '@dnd-kit/core'
-import { cx, tv } from '@xjur-ui/util'
-import { isPast } from 'date-fns'
-import { Typography } from '../typography'
-import { Button } from '../form/button'
-import { Icon } from '../icon'
-import { isToday } from './helpers/calendar'
-import { useFullCalendar } from './calendar-root'
-import type { ICalendarCell } from './types/calendar-cell'
-import type { ICalendarEvent } from './types/calendar-event'
-import { CalendarMoreEventsDropdown } from './calendar-more-events-dropdown'
-
-interface CalendarCellProps {
-  events: ICalendarEvent[]
-  cell: ICalendarCell
-}
-
-const calendarCellVariants = tv({
-  base: 'group/calendar-cell p-small flex flex-col gap-small-1x w-full bg-layer-2-idle ',
-  variants: {
-    type: {
-      month: 'h-[212px]',
-      week: 'min-h-[64px] max-h-[212px]',
-      day: 'min-h-[64px] max-h-[212px]'
-    }
-  }
-})
-
-export function CalendarCell({ cell, events }: CalendarCellProps) {
-  const { date, type } = cell
-
-  const { renderEvent, activeEventId, onAddEvent, disableEventCreationInPast } =
-    useFullCalendar()
-  const eventsToShow = useMemo(() => events.slice(0, 2), [events])
-  const hasMore = events.length >= 3
-
-  const { isOver, setNodeRef } = useDroppable({
-    id: `calendar-cell-${type}-${date.toISOString()}`,
-    data: {
-      date,
-      type
-    }
-  })
-
-  const isDraggingInCell = useMemo(() => {
-    const cellEvent = events.find(event => event.id === activeEventId)
-
-    if (!cellEvent) return false
-
-    const formatDate = (date: Date) => {
-      return date.toLocaleDateString('pt-BR', {
-        year: 'numeric',
-        month: '2-digit',
-        day: '2-digit'
-      })
-    }
-
-    const cellDate = formatDate(date)
-    const cellEventDate = formatDate(cellEvent.eventDate)
-
-    return cellDate === cellEventDate
-  }, [activeEventId, date, events])
-
-  const calendarCellClassNames = calendarCellVariants({ type })
-
-  const disableEventCreation = useMemo(
-    () => disableEventCreationInPast && isPast(date) && !isToday(date),
-    [disableEventCreationInPast, date]
-  )
-
-  return (
-    <div
-      className={calendarCellClassNames}
-      data-slot="calendar-cell"
-      ref={setNodeRef}
-    >
-      {type === 'month' && (
-        <div className="flex items-center justify-center">
-          <div
-            className={cx(
-              'size-large-2x rounded-circle bg-layer-2-idle flex items-center justify-center',
-              isToday(date) && 'bg-primary-idle text-neutral-label'
-            )}
-          >
-            <Typography size="sm" variant="label" weight="medium">
-              {cell.date.getDate()}
-            </Typography>
-          </div>
-        </div>
-      )}
-
-      <div className="gap-small-1x flex flex-col">
-        {eventsToShow.map(event => (
-          <Fragment key={event.id}>{renderEvent(event)}</Fragment>
-        ))}
-
-        {isOver && eventsToShow.length < 2 && !isDraggingInCell && (
-          <div className="border-border-layer-4 rounded-small-2x h-[68px] w-full border border-dashed" />
-        )}
-      </div>
-
-      <div className="mt-auto flex items-center justify-between">
-        {hasMore && <CalendarMoreEventsDropdown events={events.slice(2)} />}
-
-        {onAddEvent && !disableEventCreation && (
-          <div className="invisible ml-auto transition-opacity duration-100 ease-in-out group-hover/calendar-cell:visible">
-            <Button
-              size="icon_sm"
-              variant="outlined"
-              onClick={() => onAddEvent(date)}
-            >
-              <Icon className="text-icon-neutral-3" name="add" />
-            </Button>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}

package/src/components/full-calendar/calendar-day-view.tsx

@@ -1,76 +0,0 @@
-import { useCallback } from 'react'
-import { cx } from '@xjur-ui/util'
-import { setHours } from 'date-fns'
-import { Typography } from '../typography'
-import { WEEK_HOURS, getEventsForDayAndHour } from './helpers/calendar'
-import { useFullCalendar } from './calendar-root'
-import { CalendarWeekDay } from './calendar-week-day'
-import { CalendarCell } from './calendar-cell'
-import type { ICalendarCell } from './types/calendar-cell'
-
-export function CalendarDayView() {
-  const { selectedDate, events } = useFullCalendar()
-
-  const getEventsForDayAndHourCallback = useCallback(
-    (date: Date, hour: number) => {
-      return getEventsForDayAndHour(events, date, hour)
-    },
-    [events]
-  )
-
-  const cellsWithHour = useCallback((cell: ICalendarCell, hour: number) => {
-    return {
-      ...cell,
-      date: setHours(cell.date, hour)
-    }
-  }, [])
-
-  return (
-    <div className="bg-layer-2-hover rounded-small-1x border-border-layer-2 scrollbar-hide h-full w-full border">
-      <div className="flex flex-1 flex-col">
-        <div
-          className="bg-layer-2-hover sticky top-0 z-10 flex w-full"
-          data-slot="week-header"
-        >
-          <div className="w-[64px]" />
-          <CalendarWeekDay
-            className="border-border-layer-2 items-start border-l"
-            date={selectedDate}
-          />
-        </div>
-
-        <div className="overflow-hidden">
-          {WEEK_HOURS.map(({ hour, label }) => (
-            <div className="flex items-start" key={hour}>
-              <div className="px-small flex h-full w-[64px] items-start justify-end">
-                <Typography size="sm-1x" variant="label" weight="medium">
-                  {label}
-                </Typography>
-              </div>
-
-              <div
-                className={cx(
-                  'flex flex-1',
-                  '[&>*]:border-border-layer-2',
-                  '[&>*]:border-t',
-                  '[&>*]:border-l'
-                )}
-              >
-                <CalendarCell
-                  cell={cellsWithHour(
-                    {
-                      date: selectedDate,
-                      type: 'day'
-                    },
-                    hour
-                  )}
-                  events={getEventsForDayAndHourCallback(selectedDate, hour)}
-                />
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/full-calendar/calendar-event.tsx

@@ -1,178 +0,0 @@
-import { cx, tv } from '@xjur-ui/util'
-import type { ComponentProps } from 'react'
-import { useDraggable } from '@dnd-kit/core'
-import { Typography } from '../typography'
-import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip'
-import type {
-  ICalendarEvent,
-  ICalendarEventStatus
-} from './types/calendar-event'
-import { useFullCalendar } from './calendar-root'
-
-const eventVariants = tv({
-  base: 'py-small_1x-alt pr-small pl-medium rounded-small-2x transition-colors duration-100 ease-out',
-  variants: {
-    status: {
-      pending:
-        'bg-layer-2-hover border-l-2 border-border-layer-4 hover:bg-layer-2-pressed active:bg-layer-2-active',
-      completed:
-        'bg-success-alt-idle border-l-2 border-success-idle hover:bg-success-alt-hover active:bg-success-alt-pressed',
-      cancelled:
-        'bg-danger-alt-idle border-l-2 border-danger-idle hover:bg-danger-alt-hover active:bg-danger-alt-pressed'
-    }
-  },
-  defaultVariants: {
-    status: 'pending'
-  }
-})
-
-interface CalendarEventProps extends ComponentProps<'div'> {
-  event: ICalendarEvent
-  disabled?: boolean
-  status?: ICalendarEventStatus
-}
-
-export function CalendarEvent({
-  event,
-  disabled = false,
-  status = 'pending',
-  className,
-  children,
-  ...props
-}: CalendarEventProps) {
-  const { onEventMove } = useFullCalendar()
-  const isDraggingDisabled = disabled || !onEventMove
-
-  const { attributes, listeners, setNodeRef, transform, isDragging } =
-    useDraggable({
-      id: event.id,
-      disabled: isDraggingDisabled,
-      data: {
-        event,
-        type: 'calendar-event'
-      }
-    })
-
-  const style = transform
-    ? {
-        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`
-      }
-    : undefined
-
-  return (
-    <div
-      className={cx(
-        disabled && 'pointer-events-none',
-        'cursor-pointer active:cursor-grabbing',
-        isDragging && 'z-1000 -rotate-2',
-        eventVariants({ status }),
-        className
-      )}
-      data-draggable-event-id={event.id}
-      data-slot="calendar-event"
-      ref={setNodeRef}
-      style={style}
-      {...listeners}
-      {...attributes}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}
-
-export function CalendarEventTitle({
-  size = 'sm',
-  variant = 'label',
-  weight = 'medium',
-  className,
-  ...props
-}: ComponentProps<typeof Typography>) {
-  const { activeEventId } = useFullCalendar()
-
-  if (activeEventId !== null) {
-    return (
-      <Typography
-        className={cx(className, 'text-title-neutral truncate')}
-        size={size}
-        variant={variant}
-        weight={weight}
-        {...props}
-      />
-    )
-  }
-
-  return (
-    <Tooltip delayDuration={500}>
-      <TooltipTrigger asChild={true}>
-        <Typography
-          className={cx(className, 'text-title-neutral truncate')}
-          size={size}
-          variant={variant}
-          weight={weight}
-          {...props}
-        />
-      </TooltipTrigger>
-      <TooltipContent className="max-w-[320px]">
-        {props.children}
-      </TooltipContent>
-    </Tooltip>
-  )
-}
-
-export function CalendarEventDescription({
-  size = 'sm-1x',
-  variant = 'body',
-  weight = 'normal',
-  className,
-  ...props
-}: ComponentProps<typeof Typography>) {
-  const { activeEventId } = useFullCalendar()
-
-  if (activeEventId !== null) {
-    return (
-      <Typography
-        className={cx(className, 'truncate')}
-        size={size}
-        variant={variant}
-        weight={weight}
-        {...props}
-      />
-    )
-  }
-
-  return (
-    <Tooltip delayDuration={500}>
-      <TooltipTrigger asChild={true}>
-        <Typography
-          className={cx(className, 'truncate')}
-          size={size}
-          variant={variant}
-          weight={weight}
-          {...props}
-        />
-      </TooltipTrigger>
-      <TooltipContent className="max-w-[320px]">
-        {props.children}
-      </TooltipContent>
-    </Tooltip>
-  )
-}
-
-export function CalendarEventStatus({
-  variant = 'body',
-  size = 'sm-1x',
-  weight = 'normal',
-  className,
-  ...props
-}: ComponentProps<typeof Typography>) {
-  return (
-    <Typography
-      className={cx(className, 'truncate')}
-      size={size}
-      variant={variant}
-      weight={weight}
-      {...props}
-    />
-  )
-}