@xjur-ui/react 2.1.1 → 2.2.0

package/src/components/sheet.tsx

@@ -1,150 +0,0 @@
-import * as React from 'react'
-import * as SheetPrimitive from '@radix-ui/react-dialog'
-import { cx, tv } from '@xjur-ui/util'
-import { Button } from './controls/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
-}) {
-  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={content({ side, 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 h-full', 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-normal', 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/steps/index.ts

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

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

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

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

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

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

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

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

@@ -1,17 +0,0 @@
-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}
-    />
-  )
-}

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

@@ -1,14 +0,0 @@
-import { cx } from '@xjur-ui/util'
-
-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/table/table-footer.tsx

@@ -1,17 +0,0 @@
-import { cx } from '@xjur-ui/util'
-
-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}
-    />
-  )
-}

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

@@ -1,31 +0,0 @@
-import { cx } from '@xjur-ui/util'
-
-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}
-    />
-  )
-}

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

@@ -1,17 +0,0 @@
-import { cx } from '@xjur-ui/util'
-
-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}
-    />
-  )
-}

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

@@ -1,21 +0,0 @@
-import { cx } from '@xjur-ui/util'
-
-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}
-    />
-  )
-}