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

package/src/components/button/button.stories.tsx

@@ -1,99 +0,0 @@
-import React from 'react'
-
-import { Box, HStack, Stack } from '@chakra-ui/react'
-
-import { Button } from './button.tsx'
-
-export default {
-  title: 'Components/Button',
-  component: Button,
-}
-
-export const Default = {
-  args: {
-    children: 'Default button',
-  },
-}
-
-export const Variants = {
-  render: () => (
-    <Stack gap="4">
-      <HStack>
-        <Button variant="glass" colorPalette="indigo">
-          Primary
-        </Button>
-        <Button variant="surface">Secondary</Button>
-      </HStack>
-      <HStack>
-        <Button variant="solid">Solid</Button>
-        <Button variant="glass">Glass</Button>
-        <Button variant="surface">Surface</Button>
-        <Button variant="outline">Outline</Button>
-        <Button variant="subtle">Subtle</Button>
-        <Button variant="ghost">Ghost</Button>
-      </HStack>
-      <HStack>
-        <Button variant="solid" colorPalette="neutral">
-          Solid
-        </Button>
-        <Button variant="glass" colorPalette="neutral">
-          Glass
-        </Button>
-        <Button variant="surface" colorPalette="neutral">
-          Surface
-        </Button>
-        <Button variant="outline" colorPalette="neutral">
-          Outline
-        </Button>
-        <Button variant="subtle" colorPalette="neutral">
-          Subtle
-        </Button>
-        <Button variant="ghost" colorPalette="neutral">
-          Ghost
-        </Button>
-      </HStack>
-      <HStack>
-        <Button variant="solid" colorPalette="blue">
-          Solid
-        </Button>
-        <Button variant="glass" colorPalette="blue">
-          Glass
-        </Button>
-        <Button variant="surface" colorPalette="blue">
-          Surface
-        </Button>
-        <Button variant="outline" colorPalette="blue">
-          Outline
-        </Button>
-        <Button variant="subtle" colorPalette="blue">
-          Subtle
-        </Button>
-        <Button variant="ghost" colorPalette="blue">
-          Ghost
-        </Button>
-      </HStack>
-    </Stack>
-  ),
-}
-
-export const Sizes = {
-  render: () => (
-    <HStack>
-      <Button size="xs" variant="glass">
-        XSmall
-      </Button>
-      <Button size="sm" variant="glass">
-        Small
-      </Button>
-      <Button size="md" variant="glass">
-        Medium
-      </Button>
-      <Button size="lg" variant="glass">
-        Large
-      </Button>
-      <Button size="xl" variant="glass">
-        XLarge
-      </Button>
-    </HStack>
-  ),
-}

package/src/components/button/button.tsx

@@ -1,55 +0,0 @@
-import { forwardRef } from 'react'
-
-import type { ButtonProps as ButtonPrimitiveProps } from '@chakra-ui/react'
-import {
-  AbsoluteCenter,
-  Button as ButtonPrimitive,
-  Span,
-  Spinner,
-} from '@chakra-ui/react'
-
-interface ButtonLoadingProps {
-  loading?: boolean
-  loadingText?: React.ReactNode
-}
-
-export interface ButtonProps extends ButtonPrimitiveProps, ButtonLoadingProps {}
-
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  function Button(props, ref) {
-    const {
-      loading,
-      disabled,
-      loadingText,
-      children,
-      variant = 'glass',
-      colorPalette = variant === 'glass' ? 'accent' : 'gray',
-      ...rest
-    } = props
-    return (
-      <ButtonPrimitive
-        colorPalette={colorPalette}
-        disabled={loading || disabled}
-        variant={variant as any}
-        ref={ref}
-        {...rest}
-      >
-        {loading && !loadingText ? (
-          <>
-            <AbsoluteCenter display="inline-flex">
-              <Spinner size="inherit" color="inherit" />
-            </AbsoluteCenter>
-            <Span opacity={0}>{children}</Span>
-          </>
-        ) : loading && loadingText ? (
-          <>
-            <Spinner size="inherit" color="inherit" />
-            {loadingText}
-          </>
-        ) : (
-          children
-        )}
-      </ButtonPrimitive>
-    )
-  },
-)

package/src/components/button/index.ts

@@ -1,2 +0,0 @@
-export { Button } from './button.tsx'
-export type { ButtonProps } from './button.tsx'

package/src/components/checkbox/checkbox.tsx

@@ -1,26 +0,0 @@
-import { forwardRef } from 'react'
-
-import { Checkbox as ChakraCheckbox } from '@chakra-ui/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/components/checkbox/index.ts

@@ -1,2 +0,0 @@
-export { Checkbox } from './checkbox.tsx'
-export type { CheckboxProps } from './checkbox.tsx'

package/src/components/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/components/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/components/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/components/close-button/close-button.stories.tsx

@@ -1,12 +0,0 @@
-import React from 'react'
-
-import { CloseButton } from './close-button.tsx'
-
-export default {
-  title: 'Components/CloseButton',
-  component: CloseButton,
-}
-
-export const Default = {
-  args: {},
-}

package/src/components/close-button/close-button.tsx

@@ -1,18 +0,0 @@
-import { forwardRef } from 'react'
-
-import type { ButtonProps } from '@chakra-ui/react'
-import { IconButton as ChakraIconButton } from '@chakra-ui/react'
-
-import { CloseIcon } from '../icons/icons.tsx'
-
-export interface CloseButtonProps extends ButtonProps {}
-
-export const CloseButton = forwardRef<HTMLButtonElement, CloseButtonProps>(
-  function CloseButton(props, ref) {
-    return (
-      <ChakraIconButton variant="ghost" aria-label="Close" ref={ref} {...props}>
-        {props.children ?? <CloseIcon />}
-      </ChakraIconButton>
-    )
-  },
-)

package/src/components/close-button/index.ts

@@ -1,2 +0,0 @@
-export { CloseButton } from './close-button.tsx'
-export type { CloseButtonProps } from './close-button.tsx'

package/src/components/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/components/command/command.recipe.ts

@@ -1,17 +0,0 @@
-import { defineRecipe } from '@chakra-ui/react'
-
-export const commandRecipe = defineRecipe({
-  className: 'sui-command',
-  base: {
-    display: 'inline-flex',
-    gap: 1,
-    '[role=tooltip] > &': {
-      ms: 1,
-      _before: {
-        content: '"•"',
-        me: 1,
-        fontSize: 'xs',
-      },
-    },
-  },
-})

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

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

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

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

package/src/components/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>
-    )
-  },
-)