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

package/src/compositions/checkbox-card.tsx

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

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

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

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

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

@@ -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/compositions/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/compositions/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/compositions/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/compositions/link-button.tsx

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

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