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

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/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/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',
+      },
+    },
+  },
+})

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/dialog/dialog.tsx

@@ -0,0 +1,67 @@
+import { forwardRef } from 'react'
+
+import { Dialog as ChakraDialog, Portal } from '@chakra-ui/react'
+
+import { CloseButton } from '#components/close-button'
+
+export { DialogContext } from '@ark-ui/react/dialog'
+
+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

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,57 @@
+import { forwardRef } from 'react'
+
+import { DialogContext } from '@ark-ui/react/dialog'
+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 = DialogContext
+
+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/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/icon-badge/icon-badge.recipe.ts

@@ -0,0 +1,57 @@
+import { defineRecipe } from '@chakra-ui/react'
+
+export const iconBadgeRecipe = defineRecipe({
+  className: 'sui-icon-badge',
+  base: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  variants: {
+    variant: {
+      outline: {
+        borderWidth: '1px',
+        borderColor: 'colorPalette.subtle',
+        color: 'colorPalette.fg',
+      },
+      solid: {
+        bg: 'colorPalette.solid',
+        color: 'white',
+      },
+      subtle: {
+        bg: 'colorPalette.subtle',
+        color: 'colorPalette.fg',
+      },
+    },
+    size: {
+      sm: {
+        borderRadius: 'sm',
+        fontSize: '0.9em',
+        w: 6,
+        h: 6,
+      },
+      md: {
+        borderRadius: 'md',
+        fontSize: '1.1em',
+        w: 8,
+        h: 8,
+      },
+      lg: {
+        borderRadius: 'md',
+        fontSize: '1.3em',
+        w: 10,
+        h: 10,
+      },
+      xl: {
+        borderRadius: 'md',
+        fontSize: '1.5em',
+        w: 12,
+        h: 12,
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'outline',
+    size: 'md',
+  },
+})

package/src/components/icon-badge/icon-badge.stories.tsx

@@ -0,0 +1,38 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { LuUser } from 'react-icons/lu'
+
+import { IconBadge } from './index.ts'
+
+export default {
+  title: 'Components/IconBadge',
+  component: IconBadge,
+} as Meta
+
+type Story = StoryObj<typeof IconBadge>
+
+export const Default: Story = {
+  args: {
+    icon: <LuUser />,
+  },
+}
+
+export const SolidVariant: Story = {
+  args: {
+    variant: 'solid',
+    icon: <LuUser />,
+  },
+}
+
+export const SubtleVariant: Story = {
+  args: {
+    variant: 'subtle',
+    icon: <LuUser />,
+  },
+}
+
+export const Rounded: Story = {
+  args: {
+    borderRadius: 'full',
+    icon: <LuUser />,
+  },
+}

package/src/components/icon-badge/icon-badge.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import * as React from 'react'
+import { cloneElement, isValidElement } from 'react'
+
+import {
+  type HTMLChakraProps,
+  RecipeProps,
+  chakra,
+  useRecipe,
+} from '@chakra-ui/react'
+import { cx } from '@saas-ui/core/utils'
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface IconBadgeProps
+  extends HTMLChakraProps<'div'>,
+    RecipeProps<'iconBadge'> {
+  /**
+   * The icon to display
+   */
+  icon: React.ReactNode
+
+  /**
+   * A11y: A label that describes the icon
+   */
+  'aria-label'?: string
+}
+
+export const IconBadge = React.forwardRef<HTMLDivElement, IconBadgeProps>(
+  (props, ref) => {
+    const { icon, children, ...rest } = props
+    const recipe = useRecipe({ key: 'iconBadge', recipe: props.recipe })
+    const [variantProps, localProps] = recipe.splitVariantProps(rest)
+    const styles = recipe(variantProps)
+
+    /**
+     * Passing the icon as prop or children should work
+     */
+    const element = icon || children
+    const _children = isValidElement(element)
+      ? cloneElement(element as any, {
+          'aria-hidden': true,
+          focusable: false,
+        })
+      : null
+
+    return (
+      <chakra.div
+        ref={ref}
+        {...localProps}
+        css={[styles, props.css]}
+        className={cx(recipe.className, props.className)}
+      >
+        {_children}
+      </chakra.div>
+    )
+  },
+)

package/src/components/icon-badge/index.ts

@@ -0,0 +1,2 @@
+export { IconBadge } from './icon-badge'
+export type { IconBadgeProps } from './icon-badge'

package/src/components/icons/create-icon.tsx

@@ -0,0 +1,41 @@
+import type { IconProps } from '@chakra-ui/react'
+import { createIcon as _createIcon } from '@chakra-ui/react'
+
+interface CreateIconOptions {
+  /**
+   * The icon `svg` viewBox
+   * @default "0 0 24 24"
+   */
+  viewBox?: string
+  /**
+   * The `svg` path or group element
+   * @type React.ReactElement | React.ReactElement[]
+   */
+  path?: React.ReactElement | React.ReactElement[]
+  /**
+   * If the `svg` has a single path, simply copy the path's `d` attribute
+   */
+  d?: string
+  /**
+   * The display name useful in the dev tools
+   */
+  displayName?: string
+  /**
+   * Default props automatically passed to the component; overwriteable
+   */
+  defaultProps?: IconProps
+}
+
+export const createIcon = (props: CreateIconOptions) => {
+  return _createIcon({
+    viewBox: '0 0 24 24',
+    defaultProps: {
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeWidth: '2',
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round',
+    },
+    ...props,
+  })
+}