@xjur-ui/react 2.1.1 → 2.2.0

package/src/components/horizontal-scroll.tsx

@@ -1,159 +0,0 @@
-import type { ComponentProps, ReactNode } from 'react'
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { cx } from '@xjur-ui/util'
-import { Button } from './controls/button'
-import { Icon } from './icon'
-
-export interface HorizontalScrollProps extends ComponentProps<'div'> {
-  children: ReactNode
-  gap?: 'small' | 'medium' | 'large'
-  scrollAmount?: number
-}
-
-export function HorizontalScroll({
-  children,
-  className,
-  gap = 'small',
-  scrollAmount = 200,
-  ...props
-}: HorizontalScrollProps) {
-  const scrollContainerRef = useRef<HTMLDivElement>(null)
-  const [canScrollLeft, setCanScrollLeft] = useState(false)
-  const [canScrollRight, setCanScrollRight] = useState(false)
-  const [isScrolling, setIsScrolling] = useState(false)
-
-  const checkScrollable = useCallback(() => {
-    const container = scrollContainerRef.current
-    if (!container) return
-
-    const { scrollLeft, scrollWidth, clientWidth } = container
-    setCanScrollLeft(scrollLeft > 0)
-    setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 1)
-  }, [])
-
-  const handleScrollLeft = useCallback(() => {
-    const container = scrollContainerRef.current
-    if (!container) return
-
-    setIsScrolling(true)
-    container.scrollTo({
-      left: container.scrollLeft - scrollAmount,
-      behavior: 'smooth'
-    })
-
-    setTimeout(() => setIsScrolling(false), 300)
-  }, [scrollAmount])
-
-  const handleScrollRight = useCallback(() => {
-    const container = scrollContainerRef.current
-    if (!container) return
-
-    setIsScrolling(true)
-    container.scrollTo({
-      left: container.scrollLeft + scrollAmount,
-      behavior: 'smooth'
-    })
-
-    setTimeout(() => setIsScrolling(false), 300)
-  }, [scrollAmount])
-
-  useEffect(() => {
-    const container = scrollContainerRef.current
-    if (!container) return
-
-    const handleScroll = () => {
-      checkScrollable()
-    }
-
-    const handleResize = () => {
-      checkScrollable()
-    }
-
-    checkScrollable()
-    container.addEventListener('scroll', handleScroll, { passive: true })
-    window.addEventListener('resize', handleResize)
-
-    let resizeObserver: ResizeObserver | null = null
-    if (typeof ResizeObserver !== 'undefined') {
-      resizeObserver = new ResizeObserver(() => {
-        checkScrollable()
-      })
-      resizeObserver.observe(container)
-    }
-
-    return () => {
-      container.removeEventListener('scroll', handleScroll)
-      window.removeEventListener('resize', handleResize)
-      if (resizeObserver) {
-        resizeObserver.disconnect()
-      }
-    }
-  }, [checkScrollable])
-
-  const gapClass = {
-    small: 'gap-small',
-    medium: 'gap-medium',
-    large: 'gap-large'
-  }[gap]
-
-  return (
-    <div className={cx('relative isolate', className)} {...props}>
-      {/* Left Arrow */}
-      {canScrollLeft && (
-        <div
-          className="absolute top-1/2 left-0 z-[3] flex h-full w-[80px] -translate-y-1/2 items-center"
-          style={{
-            background: `linear-gradient(to right, white 40%, transparent)`
-          }}
-        >
-          <Button
-            appearance="ghost"
-            aria-label="Scroll left"
-            className="ml-0"
-            disabled={isScrolling}
-            size="icon_md"
-            variant="secondary"
-            onClick={handleScrollLeft}
-          >
-            <Icon name="chevron_left" />
-          </Button>
-        </div>
-      )}
-
-      {/* Right Arrow */}
-      {canScrollRight && (
-        <div
-          className="absolute top-1/2 right-0 z-[2] flex h-full w-[80px] -translate-y-1/2 items-center justify-end"
-          style={{
-            background: `linear-gradient(to left, white 40%, transparent)`
-          }}
-        >
-          <Button
-            appearance="ghost"
-            aria-label="Scroll right"
-            className="mr-0"
-            disabled={isScrolling}
-            size="icon_md"
-            variant="secondary"
-            onClick={handleScrollRight}
-          >
-            <Icon name="chevron_right" />
-          </Button>
-        </div>
-      )}
-
-      {/* Scrollable Content */}
-      <div
-        className={cx(
-          'scrollbar-hide relative z-1 flex overflow-x-auto overflow-y-visible',
-          'min-w-0 [&>*]:flex-none [&>*]:whitespace-nowrap',
-          gapClass,
-          className
-        )}
-        ref={scrollContainerRef}
-      >
-        {children}
-      </div>
-    </div>
-  )
-}

package/src/components/icon.tsx

@@ -1,29 +0,0 @@
-import type { ComponentProps } from 'react'
-import { cx } from '@xjur-ui/util'
-import type { IconType } from '../resources/icons'
-
-export type IconProps = {
-  name: IconType
-  filled?: boolean
-} & ComponentProps<'span'>
-
-export function Icon({ className, filled = false, name, ...props }: IconProps) {
-  return (
-    <span
-      {...props}
-      className={cx(
-        'material-symbols-outlined',
-        'text-size-body-lg select-none',
-        className
-      )}
-      style={{
-        fontVariationSettings: `'FILL' ${filled ? 1 : 0}, 'wght' 600, 'GRAD' 0, 'opsz' 20`,
-        ...props.style
-      }}
-    >
-      {name}
-    </span>
-  )
-}
-
-export { icons, type IconType } from '../resources/icons'

package/src/components/list.tsx

@@ -1,111 +0,0 @@
-import { Slot } from '@radix-ui/react-slot'
-import { cx, cva, type ClassVariantProps } from '@xjur-ui/util'
-import type { ComponentProps } from 'react'
-import { type TypographyProps, Typography } from './typography'
-
-export function ListRoot({
-  className,
-  asChild,
-  ...props
-}: ComponentProps<'div'> & {
-  asChild?: boolean
-}) {
-  const Comp = asChild ? Slot : 'div'
-
-  return (
-    <Comp
-      {...props}
-      className={cx(
-        className,
-        'rounded-small scrollbar-hide bg-layer-2-idle border-border-layer-2 shadow-elevation-3 z-1000 max-h-[400px] list-none overflow-y-auto border'
-      )}
-    />
-  )
-}
-
-export function ListHeader({
-  className,
-  asChild,
-  ...props
-}: ComponentProps<'div'> & {
-  asChild?: boolean
-}) {
-  const Comp = asChild ? Slot : 'div'
-  return <Comp {...props} className={cx(className, 'px-small pt-small-1x')} />
-}
-
-export function ListHeaderTitle({
-  variant = 'label',
-  size = 'sm',
-  weight = 'medium',
-  className,
-  ...props
-}: TypographyProps) {
-  return (
-    <Typography
-      className={cx(className, 'text-neutral-placeholder')}
-      size={size}
-      variant={variant}
-      weight={weight}
-      {...props}
-    />
-  )
-}
-
-export function ListContent({
-  className,
-  asChild,
-  ...props
-}: ComponentProps<'ul'> & {
-  asChild?: boolean
-}) {
-  const Comp = asChild ? Slot : 'ul'
-
-  return (
-    <Comp
-      {...props}
-      className={cx('gap-small-1x p-small flex flex-col', className)}
-    />
-  )
-}
-
-const variants = cva(
-  [
-    'py-medium px-small flex items-center gap-small rounded-small-1x',
-    'bg-layer-2-idle text-neutral-dark',
-    'hover:bg-layer-2-hover transition-colors duration-100 ease-out',
-    'active:bg-layer-2-pressed'
-  ],
-  {
-    variants: {
-      size: {
-        md: 'h-large-4x',
-        lg: 'h-large-7x'
-      },
-      isActive: {
-        true: 'bg-primary-alt-active text-primary-label-active hover:bg-primary-alt-hover active:bg-primary-alt-pressed'
-      }
-    },
-    defaultVariants: {
-      size: 'md',
-      isActive: false
-    }
-  }
-)
-
-export function ListItem({
-  className,
-  size,
-  isActive,
-  asChild,
-  ...props
-}: ComponentProps<'li'> &
-  ClassVariantProps<typeof variants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot : 'li'
-
-  return (
-    <Comp {...props} className={cx(variants({ size, isActive }), className)} />
-  )
-}

package/src/components/logo.tsx

@@ -1,44 +0,0 @@
-import { memo, lazy, Suspense } from 'react'
-
-export interface LogoProps {
-  mode?: 'horizontal' | 'vertical' | 'icon'
-  variant?: 'colorful' | 'orange' | 'purple' | 'white' | 'gray'
-}
-
-// Lazy load logo components to reduce initial bundle size
-const LazyLogos = lazy(() => import('../resources/logo'))
-
-function LogoFallback({ mode }: { mode?: string }) {
-  const dimensions =
-    mode === 'icon' ? { width: 24, height: 24 } : { width: 95, height: 26 }
-  return (
-    <div
-      aria-label="Loading logo"
-      className="animate-pulse rounded bg-gray-200"
-      style={dimensions}
-    />
-  )
-}
-
-export const Logo = memo(
-  ({ mode = 'horizontal', variant = 'colorful' }: LogoProps) => {
-    const colorToHex = {
-      orange: '#D68600',
-      purple: '#66127D',
-      white: '#FFFFFF',
-      gray: '#6B7280'
-    }
-
-    return (
-      <Suspense fallback={<LogoFallback mode={mode} />}>
-        <LazyLogos
-          color={variant !== 'colorful' ? colorToHex[variant] : undefined}
-          mode={mode}
-          variant={variant}
-        />
-      </Suspense>
-    )
-  }
-)
-
-Logo.displayName = 'Logo'

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 './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
-}