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

package/src/components/command/command.stories.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+
+import { Button, Center, Tooltip, VStack } from '@chakra-ui/react'
+
+import { Command } from './command'
+
+export default {
+  title: 'Components/Command',
+  decorators: [
+    (Story: any) => (
+      <Center height="100%">
+        <Story />
+      </Center>
+    ),
+  ],
+}
+
+export const Basic = {
+  render: () => (
+    <VStack>
+      <Command>shift+X</Command>
+      <Command>A then B</Command>
+      <Command>alt or option</Command>
+    </VStack>
+  ),
+}
+
+export const TooltipCommand = {
+  render: () => (
+    <Tooltip.Root>
+      <Tooltip.Trigger>
+        <Button>Inbox</Button>
+      </Tooltip.Trigger>
+      <Tooltip.Positioner>
+        <Tooltip.Content>
+          <Tooltip.Arrow>
+            <Tooltip.ArrowTip />
+          </Tooltip.Arrow>
+
+          <>
+            Inbox <Command>G then I</Command>
+          </>
+        </Tooltip.Content>
+      </Tooltip.Positioner>
+    </Tooltip.Root>
+  ),
+}

package/src/components/command/command.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react'
+
+import { Kbd } from '@chakra-ui/react'
+import {
+  type HTMLChakraProps,
+  type RecipeProps,
+  UnstyledProp,
+  createRecipeContext,
+} from '@chakra-ui/react'
+
+const { withContext } = createRecipeContext({
+  key: 'command',
+})
+
+export interface CommandBaseProps extends RecipeProps<'span'>, UnstyledProp {}
+
+export interface CommandProps
+  extends HTMLChakraProps<'span', CommandBaseProps> {}
+
+const Key: React.FC<HTMLChakraProps<'span'>> = ({ children }) => {
+  if (typeof children !== 'string') {
+    return <>{children}</>
+  }
+
+  if (['then', 'or', '+'].includes(children)) {
+    return <span>{children}</span>
+  }
+
+  return <Kbd>{children}</Kbd>
+}
+
+export const Command: React.FC<HTMLChakraProps<'span'>> = (props) => {
+  const { children, ...rest } = props
+
+  if (typeof children !== 'string') {
+    return <>{children}</>
+  }
+
+  const keys = children.split(/\s|\+/)
+
+  return (
+    <CommandRoot {...rest}>
+      {keys.map((key) => (
+        <Key key={key}>{key}</Key>
+      ))}
+    </CommandRoot>
+  )
+}
+
+const CommandRoot = withContext('span')

package/src/components/command/index.ts

@@ -0,0 +1 @@
+export { Command } from './command'

package/src/components/data-list.tsx

@@ -0,0 +1,37 @@
+import { DataList as ChakraDataList, IconButton } from "@chakra-ui/react"
+import { ToggleTip } from "compositions/ui/toggle-tip"
+import { forwardRef } from "react"
+import { HiOutlineInformationCircle } from "react-icons/hi2"
+
+export const DataListRoot = ChakraDataList.Root
+
+interface ItemProps extends ChakraDataList.ItemProps {
+  label: React.ReactNode
+  value: React.ReactNode
+  info?: React.ReactNode
+  grow?: boolean
+}
+
+export const DataListItem = forwardRef<HTMLDivElement, ItemProps>(
+  function DataListItem(props, ref) {
+    const { label, info, value, children, grow, ...rest } = props
+    return (
+      <ChakraDataList.Item ref={ref} {...rest}>
+        <ChakraDataList.ItemLabel flex={grow ? "1" : undefined}>
+          {label}
+          {info && (
+            <ToggleTip content={info}>
+              <IconButton variant="ghost" aria-label="info" size="2xs">
+                <HiOutlineInformationCircle />
+              </IconButton>
+            </ToggleTip>
+          )}
+        </ChakraDataList.ItemLabel>
+        <ChakraDataList.ItemValue flex={grow ? "1" : undefined}>
+          {value}
+        </ChakraDataList.ItemValue>
+        {children}
+      </ChakraDataList.Item>
+    )
+  },
+)

package/src/components/dialog/dialog.tsx

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

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

package/src/components/dialog/namespace.ts

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

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

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

package/src/components/drawer/namespace.ts

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

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

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

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

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

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