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

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

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

@@ -1 +0,0 @@
-export * as Dialog from './namespace.ts'

package/src/components/dialog/namespace.ts

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

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

@@ -1,3 +0,0 @@
-import * as Drawer from './namespace.ts'
-
-export { Drawer }

package/src/components/drawer/namespace.ts

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

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

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

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

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

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