@xjur-ui/react 2.1.0 → 2.2.0

package/src/components/selection-bar.tsx

@@ -1,273 +0,0 @@
-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 './form/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,141 +0,0 @@
-import * as React from 'react'
-import * as SheetPrimitive from '@radix-ui/react-dialog'
-import { cx } from '@xjur-ui/util'
-import { Button } from './form/button'
-import { Icon } from './icon'
-
-export function SheetRoot({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Root>) {
-  return <SheetPrimitive.Root data-slot="sheet" {...props} />
-}
-
-export function SheetTrigger({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
-  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
-}
-
-export function SheetClose({
-  children = (
-    <Button appearance="ghost" size="icon_md" variant="tertiary">
-      <Icon className="text-icon-neutral-3" name="close" />
-    </Button>
-  ),
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Close>) {
-  return (
-    <SheetPrimitive.Close data-slot="sheet-close" {...props}>
-      {children}
-    </SheetPrimitive.Close>
-  )
-}
-
-export function SheetPortal({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
-  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
-}
-
-export function SheetOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
-  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',
-        className
-      )}
-      data-slot="sheet-overlay"
-      {...props}
-    />
-  )
-}
-
-export function SheetContent({
-  className,
-  children,
-  side = 'right',
-  overlay = false,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Content> & {
-  side?: 'top' | 'right' | 'bottom' | 'left'
-  overlay?: boolean
-}) {
-  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
-        )}
-        data-slot="sheet-content"
-        {...props}
-      >
-        {children}
-      </SheetPrimitive.Content>
-    </SheetPortal>
-  )
-}
-
-export function SheetBody({
-  className,
-  ...props
-}: React.ComponentProps<'div'>) {
-  return <div className={cx('px-large-2x', className)} {...props} />
-}
-
-export function SheetHeader({
-  className,
-  ...props
-}: React.ComponentProps<'div'>) {
-  return (
-    <div
-      className={cx(
-        'py-large px-large-2x border-b-border-layer-2 border-b',
-        className
-      )}
-      data-slot="sheet-header"
-      {...props}
-    />
-  )
-}
-
-export function SheetFooter({
-  className,
-  ...props
-}: React.ComponentProps<'div'>) {
-  return (
-    <div
-      className={cx(
-        'py-large px-large-2x border-t-border-layer-2 mt-auto border-t',
-        className
-      )}
-      data-slot="sheet-footer"
-      {...props}
-    />
-  )
-}
-
-export function SheetTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Title>) {
-  return (
-    <SheetPrimitive.Title
-      className={cx('text-size-title-lg font-medium', className)}
-      data-slot="sheet-title"
-      {...props}
-    />
-  )
-}

package/src/components/skeleton.tsx

@@ -1,12 +0,0 @@
-import type { ComponentProps } from 'react'
-import { cx } from '@xjur-ui/util'
-
-export function Skeleton({ className, ...props }: ComponentProps<'div'>) {
-  return (
-    <div
-      className={cx('bg-layer-skeleton animate-pulse', className)}
-      data-slot="skeleton"
-      {...props}
-    />
-  )
-}

package/src/components/status.tsx

@@ -1,43 +0,0 @@
-import type { ComponentProps } from 'react'
-import { cva, cx, type ClassVariantProps } from '@xjur-ui/util'
-import { Typography } from './typography'
-
-export const statusVariants = cva(
-  [
-    'inline-flex items-center justify-center px-small py-small-1x rounded-small-1x text-label-sm font-medium text-neutral-label h-large-2x'
-  ],
-  {
-    variants: {
-      variant: {
-        success: 'bg-success-idle',
-        warning: 'bg-warning-idle',
-        danger: 'bg-danger-idle',
-        neutral: 'bg-alt-3'
-      }
-    },
-    defaultVariants: {
-      variant: 'neutral'
-    }
-  }
-)
-
-export interface StatusProps
-  extends ComponentProps<'div'>,
-    ClassVariantProps<typeof statusVariants> {
-  text?: string
-}
-
-export function Status({
-  text = 'Status',
-  variant = 'neutral',
-  className,
-  ...props
-}: StatusProps) {
-  return (
-    <div className={cx(statusVariants({ variant }), className)} {...props}>
-      <Typography size="sm" variant="label" weight="medium">
-        {text}
-      </Typography>
-    </div>
-  )
-}

package/src/components/table.tsx

@@ -1,160 +0,0 @@
-import { cx } from '@xjur-ui/util'
-import { Icon } from './icon'
-
-export function Table({ className, ...props }: React.ComponentProps<'table'>) {
-  return (
-    <div
-      className="text-size-body-md scrollbar-thin relative w-full overflow-hidden transition-all hover:overflow-x-auto"
-      data-slot="table-container"
-    >
-      <table
-        className={cx('w-full caption-bottom', className)}
-        data-slot="table"
-        {...props}
-      />
-    </div>
-  )
-}
-
-export function TableHeader({
-  className,
-  ...props
-}: React.ComponentProps<'thead'>) {
-  return (
-    <thead
-      className={cx(
-        'group/table-header [&_tr]:border-border-layer-2 hover:bg-layer-2-hover [&_tr]:border-b',
-        className
-      )}
-      data-slot="table-header"
-      {...props}
-    />
-  )
-}
-
-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}
-    />
-  )
-}
-
-export function TableFooter({
-  className,
-  ...props
-}: React.ComponentProps<'tfoot'>) {
-  return (
-    <tfoot
-      className={cx(
-        'border-border-layer-2 border-t font-medium [&>tr]:last:border-b-0',
-        className
-      )}
-      data-slot="table-footer"
-      {...props}
-    />
-  )
-}
-
-export function TableRow({
-  className,
-  isSelected = false,
-  ...props
-}: React.ComponentProps<'tr'> & { isSelected?: boolean }) {
-  return (
-    <tr
-      className={cx(
-        'bg-layer-2-idle hover:bg-layer-2-hover ease border-b transition-colors duration-100',
-        'active:bg-layer-2-pressed',
-        'data-[selected=true]:bg-primary-alt-active',
-        className
-      )}
-      data-selected={isSelected}
-      data-slot="table-row"
-      {...props}
-    />
-  )
-}
-
-export function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
-  return (
-    <th
-      className={cx(
-        'group/th text-neutral-placeholder text-size-label-sm h-large-4x py-small-1x px-small text-left align-middle font-medium whitespace-nowrap',
-        'pr-large-2x relative',
-        'animate-in fade-in duration-200 ease-in',
-        className
-      )}
-      data-slot="table-head"
-      {...props}
-    />
-  )
-}
-
-export function TableHeadContent({
-  className,
-  ...props
-}: React.ComponentProps<'div'>) {
-  return (
-    <div
-      className={cx(
-        'gap-small pr-large-3x relative flex w-fit items-center',
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export function TableSort({
-  className,
-  sortedDirection,
-  ...props
-}: React.ComponentProps<'button'> & { sortedDirection?: 'asc' | 'desc' }) {
-  return (
-    <button
-      className={cx(
-        'size-large-1x rounded-small-1x',
-        'flex cursor-pointer items-center justify-center',
-        'hidden group-hover/th:flex',
-        'data-[sorted=true]:flex',
-        'transition-all duration-200 ease-out',
-        'data-[sorted=true]:bg-primary-alt-active data-[sorted=true]:text-primary-label-active',
-        'absolute top-1/2 right-0 -translate-y-1/2',
-        className
-      )}
-      data-sorted={sortedDirection !== undefined}
-      type="button"
-      {...props}
-    >
-      {sortedDirection !== undefined ? (
-        <Icon
-          name={sortedDirection === 'asc' ? 'arrow_downward' : 'arrow_upward'}
-        />
-      ) : (
-        <Icon name="swap_vert" />
-      )}
-    </button>
-  )
-}
-
-export function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
-  return (
-    <td
-      className={cx(
-        'px-small py-none h-large-8x text-left align-middle whitespace-nowrap',
-        className
-      )}
-      data-slot="table-cell"
-      {...props}
-    />
-  )
-}

package/src/components/tabs.tsx

@@ -1,72 +0,0 @@
-import * as React from 'react'
-import * as TabsPrimitive from '@radix-ui/react-tabs'
-import { tv } from '@xjur-ui/util'
-
-const tabsStyles = tv({
-  slots: {
-    list: 'flex items-center gap-0',
-    trigger:
-      'inline-flex items-center justify-center gap-small px-small py-small_1x-alt h-large-4x ' +
-      'font-medium cursor-pointer transition-colors !text-size-label-md ' +
-      'disabled:opacity-38 disabled:pointer-events-none',
-    content: ''
-  },
-  variants: {
-    variant: {
-      line: {
-        trigger:
-          'rounded-small-1x text-neutral-dark border-b-[3px] border-b-transparent ' +
-          'hover:bg-layer-2-hover ' +
-          'data-[state=active]:text-primary-active ' +
-          'data-[state=active]:border-b-primary-active ' +
-          'data-[state=active]:rounded-none data-[state=active]:bg-transparent'
-      },
-      button: {
-        trigger:
-          'rounded-tl-small-1x rounded-tr-small-1x rounded-bl-none rounded-br-none px-large ' +
-          'bg-primary-idle text-neutral-label ' +
-          'hover:bg-primary-hover ' +
-          'data-[state=active]:bg-layer-2-idle data-[state=active]:text-primary-active'
-      }
-    }
-  },
-  defaultVariants: {
-    variant: 'button'
-  }
-})
-
-export function TabsRoot(
-  props: React.ComponentProps<typeof TabsPrimitive.Tabs>
-) {
-  return <TabsPrimitive.Tabs {...props} />
-}
-
-export type TabsListProps = React.ComponentProps<typeof TabsPrimitive.TabsList>
-
-export function TabsList({ className, ...props }: TabsListProps) {
-  const { list } = tabsStyles({})
-  return <TabsPrimitive.TabsList className={list({ className })} {...props} />
-}
-
-export interface TabsTriggerProps
-  extends React.ComponentProps<typeof TabsPrimitive.TabsTrigger> {
-  variant?: 'line' | 'button'
-}
-
-export function TabsTrigger({
-  variant,
-  className,
-  ...props
-}: TabsTriggerProps) {
-  const { trigger } = tabsStyles({ variant })
-  return (
-    <TabsPrimitive.TabsTrigger className={trigger({ className })} {...props} />
-  )
-}
-
-export function TabsContent(
-  props: React.ComponentProps<typeof TabsPrimitive.TabsContent>
-) {
-  const { content } = tabsStyles()
-  return <TabsPrimitive.TabsContent className={content()} {...props} />
-}