@saas-ui/react 3.0.0-alpha.0 → 3.0.0-alpha.10

package/src/components/dialog/dialog.tsx

@@ -1,66 +0,0 @@
-import { forwardRef } from 'react'
-
-import { Dialog as ChakraDialog, Portal } from '@chakra-ui/react'
-
-import { CloseButton } from '#components/close-button'
-
-export interface DialogContentProps extends ChakraDialog.ContentProps {
-  portalled?: boolean
-  portalRef?: React.RefObject<HTMLElement>
-  backdrop?: boolean
-}
-
-export const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
-  function DialogContent(props, ref) {
-    const {
-      children,
-      portalled = true,
-      portalRef,
-      backdrop = true,
-      ...rest
-    } = props
-
-    return (
-      <Portal disabled={!portalled} container={portalRef}>
-        {backdrop && <ChakraDialog.Backdrop />}
-        <ChakraDialog.Positioner>
-          <ChakraDialog.Content ref={ref} {...rest} asChild={false}>
-            {children}
-          </ChakraDialog.Content>
-        </ChakraDialog.Positioner>
-      </Portal>
-    )
-  },
-)
-
-export const DialogCloseTrigger = forwardRef<
-  HTMLButtonElement,
-  ChakraDialog.CloseTriggerProps
->(function DialogCloseTrigger(props, ref) {
-  return (
-    <ChakraDialog.CloseTrigger
-      position="absolute"
-      top="2"
-      insetEnd="2"
-      {...props}
-      asChild
-    >
-      <CloseButton size="sm" ref={ref}>
-        {props.children}
-      </CloseButton>
-    </ChakraDialog.CloseTrigger>
-  )
-})
-
-export type DialogRootProps = ChakraDialog.RootProps
-
-export const DialogRoot = ChakraDialog.Root
-export const DialogFooter = ChakraDialog.Footer
-export const DialogHeader = ChakraDialog.Header
-export const DialogBody = ChakraDialog.Body
-export const DialogBackdrop = ChakraDialog.Backdrop
-export const DialogTitle = ChakraDialog.Title
-export const DialogDescription = ChakraDialog.Description
-export const DialogTrigger = ChakraDialog.Trigger
-export const DialogActionTrigger = ChakraDialog.ActionTrigger
-export const DialogContext = ChakraDialog.Context

package/src/components/dialog/index.ts

@@ -1 +0,0 @@
-export * as Dialog from './namespace.ts'

package/src/components/dialog/namespace.ts

@@ -1,18 +0,0 @@
-export {
-  DialogRoot as Root,
-  DialogContent as Content,
-  DialogCloseTrigger as CloseTrigger,
-  DialogHeader as Header,
-  DialogBody as Body,
-  DialogFooter as Footer,
-  DialogActionTrigger as ActionTrigger,
-  DialogBackdrop as Backdrop,
-  DialogDescription as Description,
-  DialogTitle as Title,
-  DialogTrigger as Trigger,
-  DialogContext as Context,
-} from './dialog.tsx'
-export type {
-  DialogContentProps as ContentProps,
-  DialogRootProps as RootProps,
-} from './dialog.tsx'

package/src/components/drawer/drawer.tsx

@@ -1,56 +0,0 @@
-import { forwardRef } from 'react'
-
-import { Drawer as ChakraDrawer, Portal } from '@chakra-ui/react'
-
-import { CloseButton } from '#components/close-button'
-
-export interface DrawerContentProps extends ChakraDrawer.ContentProps {
-  portalled?: boolean
-  portalRef?: React.RefObject<HTMLElement>
-  offset?: ChakraDrawer.ContentProps['padding']
-}
-
-export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
-  function DrawerContent(props, ref) {
-    const { children, portalled = true, portalRef, offset, ...rest } = props
-    return (
-      <Portal disabled={!portalled} container={portalRef}>
-        <ChakraDrawer.Positioner padding={offset}>
-          <ChakraDrawer.Content ref={ref} {...rest} asChild={false}>
-            {children}
-          </ChakraDrawer.Content>
-        </ChakraDrawer.Positioner>
-      </Portal>
-    )
-  },
-)
-
-export const DrawerCloseTrigger = forwardRef<
-  HTMLButtonElement,
-  ChakraDrawer.CloseTriggerProps
->(function DrawerCloseTrigger(props, ref) {
-  return (
-    <ChakraDrawer.CloseTrigger
-      position="absolute"
-      top="2"
-      insetEnd="2"
-      {...props}
-      asChild
-    >
-      <CloseButton size="sm" ref={ref} />
-    </ChakraDrawer.CloseTrigger>
-  )
-})
-
-export const DrawerTrigger = ChakraDrawer.Trigger
-export const DrawerRoot = ChakraDrawer.Root
-export const DrawerFooter = ChakraDrawer.Footer
-export const DrawerHeader = ChakraDrawer.Header
-export const DrawerBody = ChakraDrawer.Body
-export const DrawerBackdrop = ChakraDrawer.Backdrop
-export const DrawerDescription = ChakraDrawer.Description
-export const DrawerTitle = ChakraDrawer.Title
-export const DrawerActionTrigger = ChakraDrawer.ActionTrigger
-export const DrawerContext = ChakraDrawer.Context
-
-export type DrawerRootProps = ChakraDrawer.RootProps

package/src/components/drawer/index.ts

@@ -1,3 +0,0 @@
-import * as Drawer from './namespace.ts'
-
-export { Drawer }

package/src/components/drawer/namespace.ts

@@ -1,19 +0,0 @@
-export {
-  DrawerRoot as Root,
-  DrawerContent as Content,
-  DrawerCloseTrigger as CloseTrigger,
-  DrawerHeader as Header,
-  DrawerBody as Body,
-  DrawerFooter as Footer,
-  DrawerActionTrigger as ActionTrigger,
-  DrawerBackdrop as Backdrop,
-  DrawerDescription as Description,
-  DrawerTitle as Title,
-  DrawerTrigger as Trigger,
-  DrawerContext as Context,
-} from './drawer.tsx'
-
-export type {
-  DrawerContentProps as ContentProps,
-  DrawerRootProps as RootProps,
-} from './drawer.tsx'

package/src/components/empty-state.tsx

@@ -1,34 +0,0 @@
-import { EmptyState as ChakraEmptyState, VStack } from "@chakra-ui/react"
-import { forwardRef } from "react"
-
-export interface EmptyStateProps extends ChakraEmptyState.RootProps {
-  title: string
-  description?: string
-  icon?: React.ReactNode
-}
-
-export const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(
-  function EmptyState(props, ref) {
-    const { title, description, icon, children, ...rest } = props
-    return (
-      <ChakraEmptyState.Root ref={ref} {...rest}>
-        <ChakraEmptyState.Content>
-          {icon && (
-            <ChakraEmptyState.Indicator>{icon}</ChakraEmptyState.Indicator>
-          )}
-          {description ? (
-            <VStack textAlign="center">
-              <ChakraEmptyState.Title>{title}</ChakraEmptyState.Title>
-              <ChakraEmptyState.Description>
-                {description}
-              </ChakraEmptyState.Description>
-            </VStack>
-          ) : (
-            <ChakraEmptyState.Title>{title}</ChakraEmptyState.Title>
-          )}
-          {children}
-        </ChakraEmptyState.Content>
-      </ChakraEmptyState.Root>
-    )
-  },
-)

package/src/components/field.tsx

@@ -1,33 +0,0 @@
-import { Field as ChakraField } from "@chakra-ui/react"
-import { forwardRef } from "react"
-
-export interface FieldProps extends Omit<ChakraField.RootProps, "label"> {
-  label?: React.ReactNode
-  helperText?: React.ReactNode
-  errorText?: React.ReactNode
-  optionalText?: React.ReactNode
-}
-
-export const Field = forwardRef<HTMLDivElement, FieldProps>(
-  function Field(props, ref) {
-    const { label, children, helperText, errorText, optionalText, ...rest } =
-      props
-    return (
-      <ChakraField.Root ref={ref} {...rest}>
-        {label && (
-          <ChakraField.Label>
-            {label}
-            <ChakraField.RequiredIndicator fallback={optionalText} />
-          </ChakraField.Label>
-        )}
-        {children}
-        {helperText && (
-          <ChakraField.HelperText>{helperText}</ChakraField.HelperText>
-        )}
-        {errorText && (
-          <ChakraField.ErrorText>{errorText}</ChakraField.ErrorText>
-        )}
-      </ChakraField.Root>
-    )
-  },
-)

package/src/components/file-button.tsx

@@ -1,166 +0,0 @@
-"use client"
-
-import type { ButtonProps, RecipeProps } from "@chakra-ui/react"
-import {
-  Button,
-  FileUpload as ChakraFileUpload,
-  Icon,
-  IconButton,
-  Span,
-  Text,
-  useFileUploadContext,
-  useRecipe,
-} from "@chakra-ui/react"
-import { forwardRef } from "react"
-import { LuFile, LuUpload, LuX } from "react-icons/lu"
-
-export interface FileUploadRootProps extends ChakraFileUpload.RootProps {
-  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
-}
-
-export const FileUploadRoot = forwardRef<HTMLInputElement, FileUploadRootProps>(
-  function FileUploadRoot(props, ref) {
-    const { children, inputProps, ...rest } = props
-    return (
-      <ChakraFileUpload.Root {...rest}>
-        <ChakraFileUpload.HiddenInput ref={ref} {...inputProps} />
-        {children}
-      </ChakraFileUpload.Root>
-    )
-  },
-)
-
-export interface FileUploadDropzoneProps
-  extends ChakraFileUpload.DropzoneProps {
-  label: React.ReactNode
-  description?: React.ReactNode
-}
-
-export const FileUploadDropzone = forwardRef<
-  HTMLInputElement,
-  FileUploadDropzoneProps
->(function FileUploadDropzone(props, ref) {
-  const { children, label, description, ...rest } = props
-  return (
-    <ChakraFileUpload.Dropzone ref={ref} {...rest}>
-      <Icon fontSize="xl" color="fg.muted">
-        <LuUpload />
-      </Icon>
-      <ChakraFileUpload.DropzoneContent>
-        <div>{label}</div>
-        {description && <Text color="fg.muted">{description}</Text>}
-      </ChakraFileUpload.DropzoneContent>
-      {children}
-    </ChakraFileUpload.Dropzone>
-  )
-})
-
-interface VisibilityProps {
-  showSize?: boolean
-  clearable?: boolean
-}
-
-interface FileUploadItemProps extends VisibilityProps {
-  file: File
-}
-
-const FileUploadItem = (props: FileUploadItemProps) => {
-  const { file, showSize, clearable } = props
-  return (
-    <ChakraFileUpload.Item file={file}>
-      <ChakraFileUpload.ItemPreview asChild>
-        <Icon fontSize="lg" color="fg.muted">
-          <LuFile />
-        </Icon>
-      </ChakraFileUpload.ItemPreview>
-
-      {showSize ? (
-        <ChakraFileUpload.ItemContent>
-          <ChakraFileUpload.ItemName />
-          <ChakraFileUpload.ItemSizeText />
-        </ChakraFileUpload.ItemContent>
-      ) : (
-        <ChakraFileUpload.ItemName flex="1" />
-      )}
-
-      {clearable && (
-        <ChakraFileUpload.ItemDeleteTrigger asChild>
-          <IconButton variant="ghost" color="fg.muted" size="xs">
-            <LuX />
-          </IconButton>
-        </ChakraFileUpload.ItemDeleteTrigger>
-      )}
-    </ChakraFileUpload.Item>
-  )
-}
-
-interface FileUploadListProps
-  extends VisibilityProps,
-    ChakraFileUpload.ItemGroupProps {
-  files?: File[]
-}
-
-export const FileUploadList = forwardRef<HTMLUListElement, FileUploadListProps>(
-  function FileUploadList(props, ref) {
-    const { showSize, clearable, files, ...rest } = props
-
-    const fileUpload = useFileUploadContext()
-    const acceptedFiles = files ?? fileUpload.acceptedFiles
-
-    if (acceptedFiles.length === 0) return null
-
-    return (
-      <ChakraFileUpload.ItemGroup ref={ref} {...rest}>
-        {acceptedFiles.map((file) => (
-          <FileUploadItem
-            key={file.name}
-            file={file}
-            showSize={showSize}
-            clearable={clearable}
-          />
-        ))}
-      </ChakraFileUpload.ItemGroup>
-    )
-  },
-)
-
-type Assign<T, U> = Omit<T, keyof U> & U
-
-interface FileInputProps extends Assign<ButtonProps, RecipeProps<"input">> {
-  placeholder?: React.ReactNode
-}
-
-export const FileInput = forwardRef<HTMLButtonElement, FileInputProps>(
-  function FileInput(props, ref) {
-    const inputRecipe = useRecipe({ key: "input" })
-    const [recipeProps, restProps] = inputRecipe.splitVariantProps(props)
-    const { placeholder = "Select file(s)", ...rest } = restProps
-    return (
-      <ChakraFileUpload.Trigger asChild>
-        <Button
-          unstyled
-          py="0"
-          ref={ref}
-          {...rest}
-          css={[inputRecipe(recipeProps), props.css]}
-        >
-          <ChakraFileUpload.Context>
-            {({ acceptedFiles }) => {
-              if (acceptedFiles.length === 1) {
-                return <span>{acceptedFiles[0].name}</span>
-              }
-              if (acceptedFiles.length > 1) {
-                return <span>{acceptedFiles.length} files</span>
-              }
-              return <Span color="fg.subtle">{placeholder}</Span>
-            }}
-          </ChakraFileUpload.Context>
-        </Button>
-      </ChakraFileUpload.Trigger>
-    )
-  },
-)
-
-export const FileUploadLabel = ChakraFileUpload.Label
-export const FileUploadClearTrigger = ChakraFileUpload.ClearTrigger
-export const FileUploadTrigger = ChakraFileUpload.Trigger

package/src/components/grid-list/grid-list.recipe.ts

@@ -1,113 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react'
-
-export const gridListSlotRecipe = defineSlotRecipe({
-  className: 'sui-grid-list',
-  slots: ['root', 'item', 'header', 'icon'],
-  base: {
-    root: {
-      py: 2,
-      position: 'relative',
-    },
-    item: {
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      flex: 1,
-      cursor: 'pointer',
-      userSelect: 'none',
-      transitionProperty: 'common',
-      transitionDuration: 'normal',
-      borderRadius: 'inherit',
-      outline: 'none',
-      _hover: {
-        bg: 'blackAlpha.50',
-        _dark: {
-          bg: 'whiteAlpha.50',
-        },
-      },
-      _focusVisible: {
-        boxShadow: 'outline',
-      },
-      _focus: {
-        bg: 'blackAlpha.50',
-        _dark: {
-          bg: 'whiteAlpha.50',
-        },
-      },
-      _active: {
-        bg: 'blackAlpha.100',
-        _dark: {
-          bg: 'whiteAlpha.100',
-        },
-      },
-      _disabled: {
-        cursor: 'inherit',
-        opacity: 0.5,
-        _hover: {
-          bg: 'transparent',
-          _dark: {
-            bg: 'transparent',
-          },
-        },
-        _active: {
-          bg: 'transparent',
-          _dark: {
-            bg: 'transparent',
-          },
-        },
-      },
-    },
-    header: {
-      display: 'flex',
-      flexDirection: 'row',
-      position: 'sticky',
-      fontSize: 'md',
-      fontWeight: 'semibold',
-      color: 'muted',
-    },
-    icon: {
-      display: 'flex',
-      flexShrink: 0,
-    },
-  },
-  variants: {
-    size: {
-      sm: {
-        root: {
-          fontSize: 'sm',
-        },
-        item: {
-          py: 1,
-          px: 1,
-        },
-        header: {
-          py: 1,
-          px: 1,
-        },
-        cell: {
-          px: 1,
-        },
-      },
-      md: {
-        root: {
-          fontSize: 'md',
-        },
-        item: {
-          py: 2,
-          px: 2,
-        },
-        header: {
-          py: 2,
-          px: 2,
-        },
-        cell: {
-          px: 2,
-        },
-      },
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-})

package/src/components/hover-card.tsx

@@ -1,35 +0,0 @@
-import { HoverCard, Portal } from "@chakra-ui/react"
-import { forwardRef } from "react"
-
-interface HoverCardContentProps extends HoverCard.ContentProps {
-  portalled?: boolean
-  portalRef?: React.RefObject<HTMLElement>
-}
-
-export const HoverCardContent = forwardRef<
-  HTMLDivElement,
-  HoverCardContentProps
->(function HoverCardContent(props, ref) {
-  const { portalled = true, portalRef, ...rest } = props
-
-  return (
-    <Portal disabled={!portalled} container={portalRef}>
-      <HoverCard.Positioner>
-        <HoverCard.Content ref={ref} {...rest} />
-      </HoverCard.Positioner>
-    </Portal>
-  )
-})
-
-export const HoverCardArrow = forwardRef<HTMLDivElement, HoverCard.ArrowProps>(
-  function HoverCardArrow(props, ref) {
-    return (
-      <HoverCard.Arrow ref={ref} {...props}>
-        <HoverCard.ArrowTip />
-      </HoverCard.Arrow>
-    )
-  },
-)
-
-export const HoverCardRoot = HoverCard.Root
-export const HoverCardTrigger = HoverCard.Trigger

package/src/components/icon-badge/icon-badge.recipe.ts

@@ -1,57 +0,0 @@
-import { defineRecipe } from '@chakra-ui/react'
-
-export const iconBadgeRecipe = defineRecipe({
-  className: 'sui-icon-badge',
-  base: {
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  variants: {
-    variant: {
-      outline: {
-        borderWidth: '1px',
-        borderColor: 'colorPalette.subtle',
-        color: 'colorPalette.fg',
-      },
-      solid: {
-        bg: 'colorPalette.solid',
-        color: 'white',
-      },
-      subtle: {
-        bg: 'colorPalette.subtle',
-        color: 'colorPalette.fg',
-      },
-    },
-    size: {
-      sm: {
-        borderRadius: 'sm',
-        fontSize: '0.9em',
-        w: 6,
-        h: 6,
-      },
-      md: {
-        borderRadius: 'md',
-        fontSize: '1.1em',
-        w: 8,
-        h: 8,
-      },
-      lg: {
-        borderRadius: 'md',
-        fontSize: '1.3em',
-        w: 10,
-        h: 10,
-      },
-      xl: {
-        borderRadius: 'md',
-        fontSize: '1.5em',
-        w: 12,
-        h: 12,
-      },
-    },
-  },
-  defaultVariants: {
-    variant: 'outline',
-    size: 'md',
-  },
-})

package/src/components/icon-badge/icon-badge.stories.tsx

@@ -1,38 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react'
-import { LuUser } from 'react-icons/lu'
-
-import { IconBadge } from './index.ts'
-
-export default {
-  title: 'Components/IconBadge',
-  component: IconBadge,
-} as Meta
-
-type Story = StoryObj<typeof IconBadge>
-
-export const Default: Story = {
-  args: {
-    icon: <LuUser />,
-  },
-}
-
-export const SolidVariant: Story = {
-  args: {
-    variant: 'solid',
-    icon: <LuUser />,
-  },
-}
-
-export const SubtleVariant: Story = {
-  args: {
-    variant: 'subtle',
-    icon: <LuUser />,
-  },
-}
-
-export const Rounded: Story = {
-  args: {
-    borderRadius: 'full',
-    icon: <LuUser />,
-  },
-}