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

package/src/compositions/checkbox-card.tsx

@@ -0,0 +1,57 @@
+import { CheckboxCard as ChakraCheckboxCard } from "@chakra-ui/react"
+import { Fragment, forwardRef } from "react"
+
+export interface CheckboxCardProps extends ChakraCheckboxCard.RootProps {
+  icon?: React.ReactElement
+  label?: React.ReactNode
+  description?: React.ReactNode
+  addon?: React.ReactNode
+  indicator?: React.ReactNode | null
+  indicatorPlacement?: "start" | "end" | "inside"
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
+}
+
+export const CheckboxCard = forwardRef<HTMLInputElement, CheckboxCardProps>(
+  function CheckboxCard(props, ref) {
+    const {
+      inputProps,
+      label,
+      description,
+      icon,
+      addon,
+      indicator = <ChakraCheckboxCard.Indicator />,
+      indicatorPlacement = "end",
+      ...rest
+    } = props
+
+    const hasContent = label || description || icon
+    const ContentWrapper = indicator ? ChakraCheckboxCard.Content : Fragment
+
+    return (
+      <ChakraCheckboxCard.Root {...rest}>
+        <ChakraCheckboxCard.HiddenInput ref={ref} {...inputProps} />
+        <ChakraCheckboxCard.Control>
+          {indicatorPlacement === "start" && indicator}
+          {hasContent && (
+            <ContentWrapper>
+              {icon}
+              {label && (
+                <ChakraCheckboxCard.Label>{label}</ChakraCheckboxCard.Label>
+              )}
+              {description && (
+                <ChakraCheckboxCard.Description>
+                  {description}
+                </ChakraCheckboxCard.Description>
+              )}
+              {indicatorPlacement === "inside" && indicator}
+            </ContentWrapper>
+          )}
+          {indicatorPlacement === "end" && indicator}
+        </ChakraCheckboxCard.Control>
+        {addon && <ChakraCheckboxCard.Addon>{addon}</ChakraCheckboxCard.Addon>}
+      </ChakraCheckboxCard.Root>
+    )
+  },
+)
+
+export const CheckboxCardIndicator = ChakraCheckboxCard.Indicator

package/src/compositions/checkbox.tsx

@@ -0,0 +1,25 @@
+import { Checkbox as ChakraCheckbox } from "@chakra-ui/react"
+import { forwardRef } from "react"
+
+export interface CheckboxProps extends ChakraCheckbox.RootProps {
+  icon?: React.ReactNode
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
+  rootRef?: React.Ref<HTMLLabelElement>
+}
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  function Checkbox(props, ref) {
+    const { icon, children, inputProps, rootRef, ...rest } = props
+    return (
+      <ChakraCheckbox.Root ref={rootRef} {...rest}>
+        <ChakraCheckbox.HiddenInput ref={ref} {...inputProps} />
+        <ChakraCheckbox.Control>
+          {icon || <ChakraCheckbox.Indicator />}
+        </ChakraCheckbox.Control>
+        {children != null && (
+          <ChakraCheckbox.Label>{children}</ChakraCheckbox.Label>
+        )}
+      </ChakraCheckbox.Root>
+    )
+  },
+)

package/src/compositions/clipboard.tsx

@@ -0,0 +1,107 @@
+import type { ButtonProps, InputProps } from "@chakra-ui/react"
+import {
+  Button,
+  Clipboard as ChakraClipboard,
+  IconButton,
+  Input,
+} from "@chakra-ui/react"
+import { forwardRef } from "react"
+import { LuCheck, LuClipboard, LuLink } from "react-icons/lu"
+
+const ClipboardIcon = forwardRef<
+  HTMLDivElement,
+  ChakraClipboard.IndicatorProps
+>(function ClipboardIcon(props, ref) {
+  return (
+    <ChakraClipboard.Indicator copied={<LuCheck />} {...props} ref={ref}>
+      <LuClipboard />
+    </ChakraClipboard.Indicator>
+  )
+})
+
+const ClipboardCopyText = forwardRef<
+  HTMLDivElement,
+  ChakraClipboard.IndicatorProps
+>(function ClipboardCopyText(props, ref) {
+  return (
+    <ChakraClipboard.Indicator copied="Copied" {...props} ref={ref}>
+      Copy
+    </ChakraClipboard.Indicator>
+  )
+})
+
+export const ClipboardLabel = forwardRef<
+  HTMLLabelElement,
+  ChakraClipboard.LabelProps
+>(function ClipboardLabel(props, ref) {
+  return (
+    <ChakraClipboard.Label
+      textStyle="sm"
+      fontWeight="medium"
+      display="inline-block"
+      mb="1"
+      {...props}
+      ref={ref}
+    />
+  )
+})
+
+export const ClipboardButton = forwardRef<HTMLButtonElement, ButtonProps>(
+  function ClipboardButton(props, ref) {
+    return (
+      <ChakraClipboard.Trigger asChild>
+        <Button ref={ref} size="sm" variant="surface" {...props}>
+          <ClipboardIcon />
+          <ClipboardCopyText />
+        </Button>
+      </ChakraClipboard.Trigger>
+    )
+  },
+)
+
+export const ClipboardLink = forwardRef<HTMLButtonElement, ButtonProps>(
+  function ClipboardLink(props, ref) {
+    return (
+      <ChakraClipboard.Trigger asChild>
+        <Button
+          unstyled
+          variant="plain"
+          size="xs"
+          display="inline-flex"
+          alignItems="center"
+          gap="2"
+          ref={ref}
+          {...props}
+        >
+          <LuLink />
+          <ClipboardCopyText />
+        </Button>
+      </ChakraClipboard.Trigger>
+    )
+  },
+)
+
+export const ClipboardIconButton = forwardRef<HTMLButtonElement, ButtonProps>(
+  function ClipboardIconButton(props, ref) {
+    return (
+      <ChakraClipboard.Trigger asChild>
+        <IconButton ref={ref} size="xs" variant="subtle" {...props}>
+          <ClipboardIcon />
+          <ClipboardCopyText srOnly />
+        </IconButton>
+      </ChakraClipboard.Trigger>
+    )
+  },
+)
+
+export const ClipboardInput = forwardRef<HTMLInputElement, InputProps>(
+  function ClipboardInputElement(props, ref) {
+    return (
+      <ChakraClipboard.Input asChild>
+        <Input ref={ref} {...props} />
+      </ChakraClipboard.Input>
+    )
+  },
+)
+
+export const ClipboardRoot = ChakraClipboard.Root

package/src/compositions/color-mode.tsx

@@ -0,0 +1,65 @@
+"use client"
+
+import type { IconButtonProps } from "@chakra-ui/react"
+import { ClientOnly, IconButton, Skeleton } from "@chakra-ui/react"
+import { ThemeProvider, useTheme } from "next-themes"
+import type { ThemeProviderProps } from "next-themes/dist/types"
+import { forwardRef } from "react"
+import { LuMoon, LuSun } from "react-icons/lu"
+
+export function ColorModeProvider(props: ThemeProviderProps) {
+  return (
+    <ThemeProvider attribute="class" disableTransitionOnChange {...props} />
+  )
+}
+
+export function useColorMode() {
+  const { resolvedTheme, setTheme } = useTheme()
+  const toggleColorMode = () => {
+    setTheme(resolvedTheme === "light" ? "dark" : "light")
+  }
+  return {
+    colorMode: resolvedTheme,
+    setColorMode: setTheme,
+    toggleColorMode,
+  }
+}
+
+export function useColorModeValue<T>(light: T, dark: T) {
+  const { colorMode } = useColorMode()
+  return colorMode === "light" ? light : dark
+}
+
+export function ColorModeIcon() {
+  const { colorMode } = useColorMode()
+  return colorMode === "light" ? <LuSun /> : <LuMoon />
+}
+
+interface ColorModeButtonProps extends Omit<IconButtonProps, "aria-label"> {}
+
+export const ColorModeButton = forwardRef<
+  HTMLButtonElement,
+  ColorModeButtonProps
+>(function ColorModeButton(props, ref) {
+  const { toggleColorMode } = useColorMode()
+  return (
+    <ClientOnly fallback={<Skeleton boxSize="8" />}>
+      <IconButton
+        onClick={toggleColorMode}
+        variant="ghost"
+        aria-label="Toggle color mode"
+        size="sm"
+        ref={ref}
+        {...props}
+        css={{
+          _icon: {
+            width: "5",
+            height: "5",
+          },
+        }}
+      >
+        <ColorModeIcon />
+      </IconButton>
+    </ClientOnly>
+  )
+})

package/src/compositions/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/compositions/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/compositions/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/compositions/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/compositions/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

package/src/compositions/link-button.tsx

@@ -0,0 +1,12 @@
+"use client"
+
+import type { HTMLChakraProps, RecipeProps } from "@chakra-ui/react"
+import { createRecipeContext } from "@chakra-ui/react"
+
+export interface LinkButtonProps
+  extends HTMLChakraProps<"a", RecipeProps<"button">> {}
+
+const { withContext } = createRecipeContext({ key: "button" })
+
+// Replace "a" with your framework's link component
+export const LinkButton = withContext<HTMLAnchorElement, LinkButtonProps>("a")

package/src/compositions/menu.tsx

@@ -0,0 +1,108 @@
+"use client"
+
+import { AbsoluteCenter, Menu as ChakraMenu, Portal } from "@chakra-ui/react"
+import { forwardRef } from "react"
+import { LuCheck, LuChevronRight } from "react-icons/lu"
+
+interface MenuContentProps extends ChakraMenu.ContentProps {
+  portalled?: boolean
+  portalRef?: React.RefObject<HTMLElement>
+}
+
+export const MenuContent = forwardRef<HTMLDivElement, MenuContentProps>(
+  function MenuContent(props, ref) {
+    const { portalled = true, portalRef, ...rest } = props
+    return (
+      <Portal disabled={!portalled} container={portalRef}>
+        <ChakraMenu.Positioner>
+          <ChakraMenu.Content ref={ref} {...rest} />
+        </ChakraMenu.Positioner>
+      </Portal>
+    )
+  },
+)
+
+export const MenuArrow = forwardRef<HTMLDivElement, ChakraMenu.ArrowProps>(
+  function MenuArrow(props, ref) {
+    return (
+      <ChakraMenu.Arrow ref={ref} {...props}>
+        <ChakraMenu.ArrowTip />
+      </ChakraMenu.Arrow>
+    )
+  },
+)
+
+export const MenuCheckboxItem = forwardRef<
+  HTMLDivElement,
+  ChakraMenu.CheckboxItemProps
+>(function MenuCheckboxItem(props, ref) {
+  return (
+    <ChakraMenu.CheckboxItem ref={ref} {...props}>
+      <ChakraMenu.ItemIndicator hidden={false}>
+        <LuCheck />
+      </ChakraMenu.ItemIndicator>
+      {props.children}
+    </ChakraMenu.CheckboxItem>
+  )
+})
+
+export const MenuRadioItem = forwardRef<
+  HTMLDivElement,
+  ChakraMenu.RadioItemProps
+>(function MenuRadioItem(props, ref) {
+  const { children, ...rest } = props
+  return (
+    <ChakraMenu.RadioItem ps="8" ref={ref} {...rest}>
+      <AbsoluteCenter axis="horizontal" left="4" asChild>
+        <ChakraMenu.ItemIndicator>
+          <LuCheck />
+        </ChakraMenu.ItemIndicator>
+      </AbsoluteCenter>
+      <ChakraMenu.ItemText>{children}</ChakraMenu.ItemText>
+    </ChakraMenu.RadioItem>
+  )
+})
+
+export const MenuItemGroup = forwardRef<
+  HTMLDivElement,
+  ChakraMenu.ItemGroupProps
+>(function MenuItemGroup(props, ref) {
+  const { title, children, ...rest } = props
+  return (
+    <ChakraMenu.ItemGroup ref={ref} {...rest}>
+      {title && (
+        <ChakraMenu.ItemGroupLabel userSelect="none">
+          {title}
+        </ChakraMenu.ItemGroupLabel>
+      )}
+      {children}
+    </ChakraMenu.ItemGroup>
+  )
+})
+
+export interface MenuTriggerItemProps extends ChakraMenu.ItemProps {
+  startIcon?: React.ReactNode
+}
+
+export const MenuTriggerItem = forwardRef<HTMLDivElement, MenuTriggerItemProps>(
+  function MenuTriggerItem(props, ref) {
+    const { startIcon, children, ...rest } = props
+    return (
+      <ChakraMenu.TriggerItem ref={ref} {...rest}>
+        {startIcon}
+        {children}
+        <LuChevronRight />
+      </ChakraMenu.TriggerItem>
+    )
+  },
+)
+
+export const MenuRadioItemGroup = ChakraMenu.RadioItemGroup
+export const MenuContextTrigger = ChakraMenu.ContextTrigger
+export const MenuRoot = ChakraMenu.Root
+export const MenuSeparator = ChakraMenu.Separator
+
+export const MenuItem = ChakraMenu.Item
+export const MenuItemText = ChakraMenu.ItemText
+export const MenuItemCommand = ChakraMenu.ItemCommand
+export const MenuTrigger = ChakraMenu.Trigger