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

package/src/components/button/button.recipe.ts

@@ -0,0 +1,182 @@
+import { defineRecipe } from '@chakra-ui/react'
+
+export const buttonRecipe = defineRecipe({
+  className: 'chakra-button',
+  base: {
+    display: 'inline-flex',
+    appearance: 'none',
+    alignItems: 'center',
+    justifyContent: 'center',
+    userSelect: 'none',
+    position: 'relative',
+    whiteSpace: 'nowrap',
+    verticalAlign: 'middle',
+    cursor: 'pointer',
+    flexShrink: '0',
+    outline: '0',
+    lineHeight: '1.2',
+    isolation: 'isolate',
+    fontWeight: 'medium',
+    transitionProperty: 'common',
+    transitionDuration: 'moderate',
+    focusVisibleRing: 'outside',
+    _disabled: {
+      layerStyle: 'disabled',
+    },
+    _icon: {
+      fontSize: '1em',
+      flexShrink: 0,
+    },
+  },
+
+  variants: {
+    size: {
+      xs: {
+        gap: '1',
+        h: '6',
+        minW: '6',
+        textStyle: 'xs',
+        borderRadius: 'sm',
+        px: '2',
+      },
+      sm: {
+        gap: '2',
+        h: '7',
+        minW: '8',
+        textStyle: 'sm',
+        borderRadius: 'md',
+        px: '3',
+      },
+      md: {
+        gap: '2',
+        h: '8',
+        minW: '8',
+        borderRadius: 'md',
+        textStyle: 'sm',
+        px: '4',
+      },
+      lg: {
+        gap: '3',
+        h: '10',
+        minW: '10',
+        borderRadius: 'lg',
+        textStyle: 'md',
+        px: '5',
+      },
+      xl: {
+        gap: '3',
+        h: '12',
+        minW: '12',
+        borderRadius: 'lg',
+        textStyle: 'lg',
+        px: '6',
+      },
+    },
+
+    variant: {
+      solid: {
+        bg: 'colorPalette.solid',
+        boxShadow: 'sm',
+        color: 'colorPalette.contrast',
+        _hover: {
+          bg: 'colorPalette.solid/90',
+        },
+        _expanded: {
+          bg: 'colorPalette.solid/90',
+        },
+      },
+
+      subtle: {
+        bg: 'colorPalette.muted',
+        color: 'colorPalette.fg',
+        _hover: {
+          bg: 'colorPalette.subtle',
+        },
+        _expanded: {
+          bg: 'colorPalette.subtle',
+        },
+      },
+
+      glass: {
+        bg: 'colorPalette.solid',
+        color: 'colorPalette.contrast',
+        '--btn-shadow': 'shadows.sm',
+        boxShadow:
+          '0 0 0 1px rgba(0,0,0,0.4) inset, 0px 2px 0px 0px rgba(255,255,255,0.2) inset, var(--btn-shadow)',
+        textShadow: '0 1px 2px rgba(0,0,0,0.3)',
+        _after: {
+          content: '""',
+          position: 'absolute',
+          top: '0',
+          left: '0',
+          right: '0',
+          bottom: '0',
+          background: 'linear-gradient(180deg, white 40%, rgba(0,0,0,0.2))',
+          opacity: 0.2,
+          transitionProperty: 'opacity',
+          transitionDuration: 'moderate',
+          pointerEvents: 'none',
+        },
+        _hover: {
+          bg: 'colorPalette.solid',
+          _after: {
+            opacity: 0.24,
+          },
+        },
+        _expanded: {
+          bg: 'colorPalette.solid',
+          _after: {
+            opacity: 0.24,
+          },
+        },
+      },
+
+      surface: {
+        bg: 'colorPalette.surface',
+        borderWidth: '0.5px',
+        borderColor: 'colorPalette.emphasized',
+        color: 'colorPalette.fg',
+        shadow: 'sm',
+        shadowColor: 'colorPalette.emphasized',
+        _hover: {
+          bg: 'colorPalette.muted',
+        },
+        _expanded: {
+          bg: 'colorPalette.muted',
+        },
+      },
+
+      outline: {
+        borderWidth: '0.5px',
+        borderColor: 'colorPalette.emphasized',
+        color: 'colorPalette.fg',
+        _hover: {
+          bg: 'colorPalette.muted',
+        },
+        _expanded: {
+          bg: 'colorPalette.muted',
+        },
+      },
+
+      ghost: {
+        color: 'colorPalette.fg',
+        _hover: {
+          bg: 'colorPalette.muted',
+        },
+        _expanded: {
+          bg: 'colorPalette.muted',
+        },
+      },
+
+      plain: {
+        color: 'colorPalette.fg',
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+    variant: 'solid',
+    colorPalette: 'gray',
+  },
+})

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

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

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

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

package/src/components/checkbox/checkbox.tsx

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

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

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

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

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

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

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

@@ -0,0 +1,17 @@
+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',
+      },
+    },
+  },
+})