@xjur-ui/react 2.0.0 → 2.1.1

package/src/components/selection-bar.tsx

@@ -0,0 +1,273 @@
+import type { ComponentProps, ReactNode } from 'react'
+import { createContext, useContext, useState, useCallback } from 'react'
+import { cva, cx, type ClassVariantProps } from '@xjur-ui/util'
+import { Icon, type IconType } from './icon'
+import { Button } from './controls/button'
+
+const selectionBarVariants = cva(
+  [
+    'flex items-center gap-4 rounded-lg px-4 py-3 shadow-lg transition-colors duration-200 ease-in-out',
+    'fixed bottom-6 left-1/2 -translate-x-1/2 transform z-50',
+    'backdrop-blur-sm bg-white/95 border border-border-layer-2'
+  ],
+  {
+    variants: {
+      size: {
+        sm: 'px-3 py-2 text-sm',
+        md: 'px-4 py-3 text-base',
+        lg: 'px-6 py-4 text-lg'
+      },
+      variant: {
+        primary:
+          'bg-primary-idle text-neutral-label hover:bg-primary-hover rounded-circle active:bg-primary-pressed',
+        secondary:
+          'bg-secondary-idle text-white border-secondary-idle hover:bg-secondary-hover rounded-circle',
+        success:
+          'bg-success-idle text-white border-success-idle hover:bg-success-hover rounded-circle',
+        warning:
+          'bg-warning-idle text-white border-warning-idle hover:bg-warning-hover rounded-circle',
+        destructive:
+          'bg-destructive-idle text-white border-destructive-idle hover:bg-destructive-hover rounded-circle',
+        neutral:
+          'bg-neutral-dark text-white border-neutral-dark hover:bg-neutral-hover rounded-circle',
+        outline:
+          'bg-white text-neutral-dark border-border-layer-2 hover:bg-layer-2-hover rounded-circle'
+      },
+      position: {
+        fixed: 'fixed bottom-6 left-1/2 -translate-x-1/2 transform',
+        absolute: 'absolute bottom-6 left-1/2 -translate-x-1/2 transform',
+        relative: 'relative',
+        sticky: 'sticky bottom-6'
+      }
+    },
+    defaultVariants: {
+      size: 'md',
+      variant: 'primary',
+      position: 'fixed'
+    }
+  }
+)
+
+export interface SelectionAction {
+  id: string
+  label?: string
+  icon: IconType
+  onClick: () => void
+  variant?: 'primary' | 'secondary' | 'destructive' | 'tertiary' | 'outlined'
+  disabled?: boolean
+}
+
+interface SelectionBarProps
+  extends Omit<ComponentProps<'div'>, 'onClose'>,
+    ClassVariantProps<typeof selectionBarVariants> {
+  selectedCount: number
+  onClose: () => void
+  actions?: SelectionAction[]
+  showCloseButton?: boolean
+  closeButtonText?: string
+  selectedText?: string
+  className?: string
+}
+
+function SelectionBar({
+  selectedCount,
+  onClose,
+  actions = [],
+  showCloseButton = true,
+  selectedText,
+  size = 'md',
+  variant = 'primary',
+  position = 'fixed',
+  className,
+  ...props
+}: SelectionBarProps) {
+  if (selectedCount === 0) return null
+
+  const getSelectedText = () => {
+    if (selectedText) return selectedText
+    return selectedCount === 1
+      ? '1 item selecionado'
+      : `${selectedCount} itens selecionados`
+  }
+
+  const getIconSize = () => {
+    switch (size) {
+      case 'sm':
+        return 'text-sm'
+      case 'md':
+        return 'text-base'
+      case 'lg':
+        return 'text-lg'
+      default:
+        return 'text-base'
+    }
+  }
+
+  return (
+    <div
+      className={cx(
+        selectionBarVariants({ size, variant, position }),
+        className
+      )}
+      {...props}
+    >
+      {showCloseButton && (
+        <Button
+          appearance="ghost"
+          className="rounded-full text-current"
+          size={size === 'lg' ? 'md' : 'sm'}
+          variant="secondary"
+          onClick={() => onClose()}
+        >
+          <Icon className={getIconSize()} name="close" />
+        </Button>
+      )}
+
+      <span className="font-medium whitespace-nowrap">{getSelectedText()}</span>
+
+      {actions.map(action => (
+        <Button
+          appearance="ghost"
+          className="rounded-full text-current"
+          disabled={action.disabled}
+          key={action.id}
+          size={size === 'lg' ? 'md' : 'sm'}
+          variant={action.variant || 'secondary'}
+          onClick={() => action.onClick()}
+        >
+          <Icon className={getIconSize()} name={action.icon} />
+          {action.label && <span className="ml-2">{action.label}</span>}
+        </Button>
+      ))}
+    </div>
+  )
+}
+
+interface SelectionBarContextType {
+  selectedItems: Set<string>
+  toggleSelection: (id: string) => void
+  clearSelection: () => void
+  selectAll: (ids: string[]) => void
+  isSelected: (id: string) => boolean
+  selectedCount: number
+}
+
+const SelectionBarContext = createContext<SelectionBarContextType | null>(null)
+
+interface SelectionBarProviderProps {
+  children: ReactNode
+  onSelectionChange?: (selectedIds: string[]) => void
+}
+
+function SelectionBarProvider({
+  children,
+  onSelectionChange
+}: SelectionBarProviderProps) {
+  const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set())
+
+  const toggleSelection = useCallback(
+    (id: string) => {
+      setSelectedItems(prev => {
+        const newSet = new Set(prev)
+        if (newSet.has(id)) {
+          newSet.delete(id)
+        } else {
+          newSet.add(id)
+        }
+        onSelectionChange?.(Array.from(newSet))
+        return newSet
+      })
+    },
+    [onSelectionChange]
+  )
+
+  const clearSelection = useCallback(() => {
+    setSelectedItems(new Set())
+    onSelectionChange?.([])
+  }, [onSelectionChange])
+
+  const selectAll = useCallback(
+    (ids: string[]) => {
+      setSelectedItems(new Set(ids))
+      onSelectionChange?.(ids)
+    },
+    [onSelectionChange]
+  )
+
+  const isSelected = useCallback(
+    (id: string) => {
+      return selectedItems.has(id)
+    },
+    [selectedItems]
+  )
+
+  const value: SelectionBarContextType = {
+    selectedItems,
+    toggleSelection,
+    clearSelection,
+    selectAll,
+    isSelected,
+    selectedCount: selectedItems.size
+  }
+
+  return (
+    <SelectionBarContext.Provider value={value}>
+      {children}
+    </SelectionBarContext.Provider>
+  )
+}
+
+function useSelectionBar() {
+  const context = useContext(SelectionBarContext)
+  if (!context) {
+    throw new Error(
+      'useSelectionBar must be used within a SelectionBarProvider'
+    )
+  }
+  return context
+}
+
+interface SelectionBarContainerProps
+  extends Omit<SelectionBarProps, 'selectedCount' | 'onClose'> {
+  showCloseButton?: boolean
+  closeButtonText?: string
+  selectedText?: string
+}
+
+function SelectionBarContainer({
+  actions = [],
+  showCloseButton = true,
+  selectedText,
+  ...props
+}: SelectionBarContainerProps) {
+  const { selectedCount, clearSelection } = useSelectionBar()
+
+  return (
+    <SelectionBar
+      actions={actions}
+      selectedCount={selectedCount}
+      selectedText={selectedText}
+      showCloseButton={showCloseButton}
+      onClose={() => clearSelection()}
+      {...props}
+    />
+  )
+}
+
+export const SelectionBarComponents = {
+  Root: SelectionBar,
+  Provider: SelectionBarProvider,
+  Container: SelectionBarContainer,
+  useSelectionBar
+}
+
+export { SelectionBar }
+export { SelectionBarProvider }
+export { SelectionBarContainer }
+export { useSelectionBar }
+export { selectionBarVariants }
+export type {
+  SelectionBarProps,
+  SelectionBarProviderProps,
+  SelectionBarContainerProps
+}

package/src/components/sheet.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as SheetPrimitive from '@radix-ui/react-dialog'
-import { cx } from '@xjur-ui/util'
-import { Button } from './button'
+import { cx, tv } from '@xjur-ui/util'
+import { Button } from './controls/button'
 import { Icon } from './icon'
 
 export function SheetRoot({
@@ -44,7 +44,7 @@ export function SheetOverlay({
   return (
     <SheetPrimitive.Overlay
       className={cx(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50',
         className
       )}
       data-slot="sheet-overlay"
@@ -63,22 +63,31 @@ export function SheetContent({
   side?: 'top' | 'right' | 'bottom' | 'left'
   overlay?: boolean
 }) {
+  const content = tv({
+    base: [
+      'border-border-layer-2 bg-layer-2-idle shadow-elevation-2 fixed z-50 flex flex-col gap-medium',
+      'data-[state=open]:animate-in data-[state=closed]:animate-out transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500'
+    ],
+    variants: {
+      side: {
+        right:
+          'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full border-l sm:max-w-sm',
+        left: 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full border-r sm:max-w-sm',
+        top: 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+        bottom:
+          'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t'
+      }
+    },
+    defaultVariants: {
+      side: 'right'
+    }
+  })
+
   return (
     <SheetPortal>
       {overlay && <SheetOverlay />}
       <SheetPrimitive.Content
-        className={cx(
-          'border-border-layer-2 bg-layer-2-idle data-[state=open]:animate-in data-[state=closed]:animate-out shadow-elevation-2 fixed z-50 flex flex-col gap-4 transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
-          side === 'right' &&
-            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
-          side === 'left' &&
-            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
-          side === 'top' &&
-            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
-          side === 'bottom' &&
-            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
-          className
-        )}
+        className={content({ side, className })}
         data-slot="sheet-content"
         {...props}
       >
@@ -92,7 +101,7 @@ export function SheetBody({
   className,
   ...props
 }: React.ComponentProps<'div'>) {
-  return <div className={cx('px-large-2x', className)} {...props} />
+  return <div className={cx('px-large-2x h-full', className)} {...props} />
 }
 
 export function SheetHeader({
@@ -133,7 +142,7 @@ export function SheetTitle({
 }: React.ComponentProps<typeof SheetPrimitive.Title>) {
   return (
     <SheetPrimitive.Title
-      className={cx('text-size-title-lg font-medium', className)}
+      className={cx('text-size-title-lg font-normal', className)}
       data-slot="sheet-title"
       {...props}
     />

package/src/components/steps/index.ts

@@ -0,0 +1,6 @@
+export * from './steps-context'
+export * from './steps-root'
+export * from './steps-navigation'
+export * from './steps-content'
+export * from './step'
+export * from './steps-action'

package/src/components/steps/step.tsx

@@ -0,0 +1,23 @@
+import type { ComponentProps } from 'react'
+import { twMerge } from '@xjur-ui/util'
+import { useSteps } from './steps-context'
+
+export function Step({
+  stepIndex,
+  className,
+  ...props
+}: ComponentProps<'div'> & { stepIndex: number }) {
+  const { currentStepIndex } = useSteps()
+
+  if (currentStepIndex !== stepIndex) {
+    return null
+  }
+
+  return (
+    <div
+      className={twMerge('h-full w-full', className)}
+      data-slot="step-item"
+      {...props}
+    />
+  )
+}

package/src/components/steps/steps-action.tsx

@@ -0,0 +1,65 @@
+import { useCallback, type ComponentProps } from 'react'
+import { Button } from '../controls/button'
+import { useSteps } from './steps-context'
+
+export function NextStep({
+  children = 'Próximo',
+  type,
+  onClick,
+  ...props
+}: Omit<ComponentProps<typeof Button>, 'children'> & {
+  children?: React.ReactNode | ((stepIndex: number) => React.ReactNode)
+}) {
+  const { handleNextStep, currentStepIndex, isLastStep } = useSteps()
+
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      if (onClick) {
+        onClick(event)
+      } else {
+        event.preventDefault()
+        handleNextStep()
+      }
+    },
+    [onClick, handleNextStep]
+  )
+
+  const buttonType = type || (isLastStep ? 'submit' : 'button')
+
+  return (
+    <Button
+      type={buttonType}
+      {...(buttonType === 'button' ? { onClick: handleClick } : {})}
+      {...props}
+    >
+      {typeof children === 'function' ? children(currentStepIndex) : children}
+    </Button>
+  )
+}
+
+export function PreviousStep({
+  appearance = 'ghost',
+  children = 'Anterior',
+  onClick,
+  ...props
+}: ComponentProps<typeof Button>) {
+  const { handlePreviousStep } = useSteps()
+
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      if (onClick) {
+        onClick(event)
+      } else {
+        event.preventDefault()
+        handlePreviousStep()
+      }
+    },
+    [onClick, handlePreviousStep]
+  )
+
+  return (
+    <Button appearance={appearance} onClick={handleClick} {...props}>
+      {children}
+    </Button>
+  )
+}

package/src/components/steps/steps-content.tsx

@@ -0,0 +1,12 @@
+import { twMerge } from '@xjur-ui/util'
+import type { ComponentProps } from 'react'
+
+export function Steps({ className, ...props }: ComponentProps<'div'>) {
+  return (
+    <div
+      className={twMerge('h-full w-full', className)}
+      data-slot="steps-content"
+      {...props}
+    />
+  )
+}

package/src/components/steps/steps-context.tsx

@@ -0,0 +1,121 @@
+import { twMerge } from '@xjur-ui/util'
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type ComponentProps
+} from 'react'
+
+export interface StepsContextValue {
+  steps: string[]
+  currentStepIndex: number
+  isLastStep: boolean
+
+  handleStepChange: (index: number) => void
+  handleNextStep: () => void
+  handlePreviousStep: () => void
+}
+
+export const StepsContext = createContext<StepsContextValue>({
+  steps: [],
+  currentStepIndex: 0,
+  isLastStep: false,
+  handleStepChange: () => {},
+  handleNextStep: () => {},
+  handlePreviousStep: () => {}
+})
+
+export function StepsProvider({
+  steps,
+  currentStepIndex: currentStepIndexProp = 0,
+  onStepChange,
+  children,
+  className,
+  ...props
+}: {
+  steps: string[]
+  currentStepIndex?: number
+  onStepChange?: (index: number) => void
+  children: React.ReactNode | ((context: StepsContextValue) => React.ReactNode)
+} & Omit<ComponentProps<'div'>, 'children'>) {
+  const [currentStepIndex, setCurrentStepIndex] = useState(currentStepIndexProp)
+
+  const handleStepChange = useCallback(
+    (index: number) => {
+      setCurrentStepIndex(index)
+      onStepChange?.(index)
+    },
+    [onStepChange]
+  )
+
+  const handleNextStep = useCallback(() => {
+    const isLastStep = currentStepIndex === steps.length - 1
+
+    if (isLastStep) {
+      return
+    }
+
+    setCurrentStepIndex(prev => prev + 1)
+    onStepChange?.(currentStepIndex + 1)
+  }, [currentStepIndex, onStepChange, steps])
+
+  const handlePreviousStep = useCallback(() => {
+    if (currentStepIndex === 0) {
+      return
+    }
+
+    setCurrentStepIndex(prev => prev - 1)
+    onStepChange?.(currentStepIndex - 1)
+  }, [currentStepIndex, onStepChange])
+
+  const isLastStep = useMemo(
+    () => currentStepIndex === steps.length - 1,
+    [currentStepIndex, steps]
+  )
+
+  const providerValue = useMemo(
+    () => ({
+      steps,
+      currentStepIndex,
+      isLastStep,
+      setCurrentStepIndex,
+
+      handleStepChange,
+      handleNextStep,
+      handlePreviousStep
+    }),
+    [
+      steps,
+      currentStepIndex,
+      isLastStep,
+      setCurrentStepIndex,
+      handleStepChange,
+      handleNextStep,
+      handlePreviousStep
+    ]
+  )
+
+  return (
+    <StepsContext.Provider value={providerValue}>
+      <div
+        className={twMerge('h-full w-full', className)}
+        data-slot="steps-root"
+        {...props}
+      >
+        {typeof children === 'function' ? children(providerValue) : children}
+      </div>
+    </StepsContext.Provider>
+  )
+}
+
+export function useSteps() {
+  const context = useContext(StepsContext)
+
+  if (!context) {
+    throw new Error('useSteps must be used within a StepsContext.Provider')
+  }
+
+  return context
+}

package/src/components/steps/steps-navigation.tsx

@@ -0,0 +1,80 @@
+import { Fragment, useCallback, type ComponentProps } from 'react'
+import { twMerge } from '@xjur-ui/util'
+import { useSteps } from './steps-context'
+
+export function StepsNavigation({
+  className,
+  ...props
+}: ComponentProps<'div'>) {
+  const { steps, currentStepIndex } = useSteps()
+
+  const isLastStep = useCallback(
+    (stepIndex: number) => stepIndex === steps.length - 1,
+    [steps]
+  )
+
+  const stepState = useCallback(
+    (stepIndex: number) => {
+      const isActive = stepIndex === currentStepIndex
+      const isPassed = stepIndex < currentStepIndex
+
+      if (isPassed) {
+        return 'disabled'
+      }
+
+      return isActive ? 'active' : 'normal'
+    },
+    [currentStepIndex]
+  )
+
+  return (
+    <div
+      className={twMerge('gap-small flex items-center', className)}
+      data-slot="steps-navigation"
+      {...props}
+    >
+      {steps.map((step, stepIndex) => {
+        const state = stepState(stepIndex)
+
+        return (
+          <Fragment key={`${step}-${stepIndex}`}>
+            <div
+              className="group gap-small flex items-center"
+              data-disabled={state === 'disabled'}
+              data-slot="step-trigger"
+              data-state={state}
+              {...props}
+            >
+              <div
+                className={twMerge(
+                  'size-large-4x rounded-circle border-border-layer-2 text-size-label-sm bg-layer-2-idle flex items-center justify-center border',
+                  'group-data-[state=active]:border-primary-active group-data-[state=active]:bg-primary-alt-active group-data-[state=active]:text-primary-label-active',
+                  'group-data-[state=disabled]:bg-layer-1-idle group-data-[state=disabled]:border-border-layer-2 group-data-[state=disabled]:text-neutral-light'
+                )}
+                data-slot="step-number"
+              >
+                {stepIndex + 1}
+              </div>
+
+              <span
+                className="text-size-label-sm group-data-[state=active]:text-primary-label-active group-data-[state=disabled]:text-neutral-light font-medium"
+                data-slot="step-title"
+              >
+                {step}
+              </span>
+            </div>
+
+            {!isLastStep(stepIndex) && (
+              <div
+                className={twMerge(
+                  'bg-border-layer-2 mx-2 h-px flex-1',
+                  className
+                )}
+              />
+            )}
+          </Fragment>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/steps/steps-root.tsx

@@ -0,0 +1,9 @@
+import type { ComponentProps } from 'react'
+import { StepsProvider } from './steps-context'
+
+export function StepsRoot({
+  className,
+  ...props
+}: ComponentProps<typeof StepsProvider>) {
+  return <StepsProvider className={className} {...props} />
+}

package/src/components/table/index.ts

@@ -0,0 +1,8 @@
+export * from './table'
+export * from './table-body'
+export * from './table-cell'
+export * from './table-footer'
+export * from './table-header'
+export * from './table-head'
+export * from './table-row'
+export * from './table-sort'

package/src/components/table/table-body.tsx

@@ -0,0 +1,17 @@
+import { cx } from '@xjur-ui/util'
+
+export function TableBody({
+  className,
+  ...props
+}: React.ComponentProps<'tbody'>) {
+  return (
+    <tbody
+      className={cx(
+        '[&_tr]:border-border-layer-2 [&_tr]:border-b [&_tr:last-child]:border-0',
+        className
+      )}
+      data-slot="table-body"
+      {...props}
+    />
+  )
+}