@xjur-ui/react 2.0.0 → 2.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xjur-ui/react",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "type": "module",
   "description": "React components for XJur Design System",
   "main": "dist/index.js",
@@ -10,37 +10,49 @@
     "./styles": "./dist/index.css",
     "./css": "./dist/index.css",
     "./hooks": "./dist/hooks/index.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",
+    "./dialog": "./dist/components/dialog.js",
+    "./upload": "./dist/components/upload.js",
+    "./selection-bar": "./dist/components/selection-bar.js",
     "./dropdown-menu": "./dist/components/dropdown-menu.js",
     "./divider": "./dist/components/divider.js",
     "./sheet": "./dist/components/sheet.js",
     "./badge": "./dist/components/badge.js",
-    "./table": "./dist/components/table.js",
+    "./table": "./dist/components/table/index.js",
     "./avatar-group": "./dist/components/avatar-group.js",
     "./skeleton": "./dist/components/skeleton.js",
-    "./rich-editor": "./dist/components/rich-editor.js",
     "./tooltip": "./dist/components/tooltip.js",
-    "./status": "./dist/components/status.js"
+    "./status": "./dist/components/status.js",
+    "./horizontal-scroll": "./dist/components/horizontal-scroll.js",
+    "./breadcrumb": "./dist/components/breadcrumb.js",
+    "./dnd": "./dist/components/drag-and-drop/index.js",
+    "./full-calendar": "./dist/components/full-calendar/index.js",
+    "./button": "./dist/components/controls/button.js",
+    "./calendar": "./dist/components/controls/calendar.js",
+    "./checkbox": "./dist/components/controls/checkbox.js",
+    "./date-picker": "./dist/components/controls/date-picker.js",
+    "./input": "./dist/components/controls/input.js",
+    "./otp-input": "./dist/components/controls/otp-input.js",
+    "./radio": "./dist/components/controls/radio.js",
+    "./rich-editor": "./dist/components/controls/rich-editor.js",
+    "./search-input": "./dist/components/controls/search-input.js",
+    "./search-selector": "./dist/components/controls/search-selector.js",
+    "./select": "./dist/components/controls/select.js",
+    "./switch": "./dist/components/controls/switch.js",
+    "./pessoa": "./dist/components/custom/pessoa/index.js",
+    "./steps": "./dist/components/steps/index.js"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-collapsible": "^1.1.12",

package/src/components/breadcrumb.tsx

@@ -0,0 +1,119 @@
+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/{calendar.tsx → controls/calendar.tsx}

@@ -7,7 +7,7 @@ import {
   DayPicker,
   getDefaultClassNames
 } from 'react-day-picker'
-import { Icon, type IconType } from './icon'
+import { Icon, type IconType } from '../icon'
 import { Button } from './button'
 
 function capitalize(str: string) {

package/src/components/{checkbox.tsx → controls/checkbox.tsx}

@@ -1,7 +1,7 @@
 import * as CheckoxPrimitive from '@radix-ui/react-checkbox'
 import { cx } from '@xjur-ui/util'
-import { Icon } from './icon'
-import { Typography } from './typography'
+import { Icon } from '../icon'
+import { Typography } from '../typography'
 
 export function Checkbox({
   label,

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

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

package/src/components/controls/date-picker.tsx

@@ -0,0 +1,199 @@
+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 {
+  FieldContext,
+  useFieldContext,
+  type FieldContextValue
+} from './context/field.context'
+import { FloatingLabel } from './floating-label'
+
+export const datePicker = 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',
+      'py-small_1x-alt px-small',
+      'bg-layer-2-hover border border-transparent',
+      '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-1 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 } = datePicker()
+
+export function DatePickerRoot({
+  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 DatePickerTrigger({
+  className,
+  ...props
+}: ComponentProps<typeof RadixPopover.Trigger>) {
+  const { state, variant } = useFieldContext()
+
+  const filterTrigger = tv({
+    base: ['group bg-layer-2-idle relative'],
+    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 DatePickerLabel(props: ComponentProps<typeof FloatingLabel>) {
+  return <FloatingLabel {...props} />
+}
+
+export function DatePickerIcon({
+  className,
+  name,
+  ...props
+}: ComponentProps<'div'> & {
+  name: IconType
+}) {
+  const { state } = useFieldContext()
+
+  return (
+    <div className={icon({ className, state })} {...props}>
+      <Icon name={name} />
+    </div>
+  )
+}
+
+export function DatePickerSlot({
+  className,
+  ...props
+}: ComponentProps<'span'>) {
+  const { state } = useFieldContext()
+  return <span className={slotText({ className, state })} {...props} />
+}
+
+export function DatePickerValue({
+  className,
+  displayValue = '',
+  value,
+  ...props
+}: ComponentProps<'input'> & { displayValue?: string }) {
+  const { variant } = useFieldContext()
+
+  const valueOrPlaceholder = useMemo(() => {
+    if (variant === 'filter') return displayValue
+    return displayValue || props.placeholder
+  }, [displayValue, props.placeholder, variant])
+
+  return (
+    <>
+      <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 ?? ''}
+      />
+    </>
+  )
+}
+
+export function DatePickerContent({
+  className,
+  sideOffset = 5,
+  side = 'bottom',
+  align = 'start',
+  ...props
+}: ComponentProps<typeof RadixPopover.Content>) {
+  const { state } = useFieldContext()
+
+  return (
+    <RadixPopover.Portal>
+      <RadixPopover.Content
+        align={align}
+        className={content({ className, state })}
+        side={side}
+        sideOffset={sideOffset}
+        {...props}
+      />
+    </RadixPopover.Portal>
+  )
+}
+
+export function DatePickerCaption({
+  className,
+  ...props
+}: ComponentProps<'p'>) {
+  const { state } = useFieldContext()
+  return <p className={caption({ className, state })} {...props} />
+}

package/src/components/controls/floating-label.tsx

@@ -0,0 +1,60 @@
+import type { ComponentProps } from 'react'
+import { tv } from '@xjur-ui/util'
+import { useFieldContext } from './context/field.context'
+
+export function FloatingLabel({
+  className,
+  htmlFor,
+  children,
+  ...props
+}: ComponentProps<'label'>) {
+  const { state } = useFieldContext()
+
+  const label = tv({
+    base: [
+      'group 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',
+      'text-size-body-md',
+      // Filled
+      'group-focus-within:-top-[3px]',
+      'group-data-[state=open]:-top-[3px]',
+
+      'group-focus-within:text-size-label-sm-1x group-focus-within:font-medium',
+      'group-data-[state=open]:text-size-label-sm-1x group-data-[state=open]: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',
+      // If has left slot
+      'group-has-[div[data-slot=control-slot]]:left-large-4x',
+      'group-has-[div[data-slot=control-slot]]:group-focus-within:left-small',
+      'group-has-[div[data-slot=control-slot]]:group-has-[input:not(:placeholder-shown)]:left-small',
+      'group-has-[div[data-slot=control-slot]]:group-data-[state=open]:left-small',
+      // Animate
+      'group-focus-within:animate-in',
+      'group-has-[input:not(:placeholder-shown)]:animate-out',
+      'data-[disabled=true]:hidden'
+    ],
+    variants: {
+      state: {
+        normal: [
+          'group-focus-within:!text-primary-idle group-data-[state=open]:!text-primary-idle',
+          'group-has-[input:not(:placeholder-shown)]:!text-primary-idle'
+        ],
+        error: [
+          'group-focus-within:!text-danger-label-active group-data-[state=open]:!text-danger-label-active',
+          'group-has-[input:not(:placeholder-shown)]:!text-danger-label-active'
+        ],
+        disabled: []
+      }
+    }
+  })
+
+  return (
+    <label className={label({ className, state })} htmlFor={htmlFor} {...props}>
+      <span className="rounded-small-1x bg-layer-2-idle max-w-full">
+        {children}
+      </span>
+    </label>
+  )
+}