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

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'

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

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

package/src/components/icons/icons.tsx

@@ -1,121 +0,0 @@
-import * as React from 'react'
-
-import { createIcon } from './create-icon'
-
-export const ChevronUpIcon = createIcon({
-  displayName: 'ChevronUpIcon',
-  path: <polyline points="18 15 12 9 6 15"></polyline>,
-})
-
-export const ChevronDownIcon = createIcon({
-  displayName: 'ChevronDownIcon',
-  path: <polyline points="6 9 12 15 18 9"></polyline>,
-})
-
-export const ChevronLeftIcon = createIcon({
-  displayName: 'ChevronLeftIcon',
-  path: <polyline points="15 18 9 12 15 6"></polyline>,
-})
-
-export const ChevronRightIcon = createIcon({
-  displayName: 'ChevronRightIcon',
-  path: <polyline points="9 18 15 12 9 6"></polyline>,
-})
-
-export const HamburgerIcon = createIcon({
-  displayName: 'ChevronDownIcon',
-  path: (
-    <g fill="none">
-      <line x1="3" y1="12" x2="21" y2="12"></line>
-      <line x1="3" y1="6" x2="21" y2="6"></line>
-      <line x1="3" y1="18" x2="21" y2="18"></line>
-    </g>
-  ),
-})
-
-export const CloseIcon = createIcon({
-  displayName: 'CloseIcon',
-  path: (
-    <g>
-      <line x1="18" y1="6" x2="6" y2="18"></line>
-      <line x1="6" y1="6" x2="18" y2="18"></line>
-    </g>
-  ),
-})
-
-export const FilterIcon = createIcon({
-  displayName: 'FilterIcon',
-  path: (
-    <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
-  ),
-})
-
-export const CalendarIcon = createIcon({
-  displayName: 'CalendarIcon',
-  path: (
-    <g>
-      <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
-      <line x1="16" y1="2" x2="16" y2="6"></line>
-      <line x1="8" y1="2" x2="8" y2="6"></line>
-      <line x1="3" y1="10" x2="21" y2="10"></line>
-    </g>
-  ),
-})
-
-export const PlusIcon = createIcon({
-  displayName: 'PlusIcon',
-  path: (
-    <g>
-      <line x1="12" y1="5" x2="12" y2="19"></line>
-      <line x1="5" y1="12" x2="19" y2="12"></line>
-    </g>
-  ),
-})
-
-export const MinusIcon = createIcon({
-  displayName: 'MinusIcon',
-  path: (
-    <g>
-      <line x1="5" y1="12" x2="19" y2="12"></line>
-    </g>
-  ),
-})
-
-export const ViewOffIcon = createIcon({
-  displayName: 'ViewOffIcon',
-  path: (
-    <g>
-      <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
-      <line x1="1" y1="1" x2="23" y2="23"></line>
-    </g>
-  ),
-})
-
-export const ViewIcon = createIcon({
-  displayName: 'ViewOffIcon',
-  path: (
-    <g>
-      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
-      <circle cx="12" cy="12" r="3"></circle>
-    </g>
-  ),
-})
-
-export const SearchIcon = createIcon({
-  displayName: 'SearchIcon',
-  path: (
-    <g>
-      <circle cx="11" cy="11" r="8"></circle>
-      <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-    </g>
-  ),
-})
-
-export const CheckIcon = createIcon({
-  displayName: 'CheckIcon',
-  path: (
-    <g>
-      <polyline points="20 6 9 17 4 12"></polyline>
-    </g>
-  ),
-})

package/src/components/icons/index.ts

@@ -1 +0,0 @@
-export * from './icons.tsx'

package/src/components/input-group/index.ts

@@ -1 +0,0 @@
-export * from './input-group'

package/src/components/input-group/input-group.tsx

@@ -1,46 +0,0 @@
-import { cloneElement, forwardRef, isValidElement } from 'react'
-
-import type { BoxProps, InputElementProps } from '@chakra-ui/react'
-import { Group, InputElement } from '@chakra-ui/react'
-
-export interface InputGroupProps extends BoxProps {
-  startElementProps?: InputElementProps
-  endElementProps?: InputElementProps
-  startElement?: React.ReactNode
-  endElement?: React.ReactNode
-  children: React.ReactNode
-}
-
-export const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(
-  function InputGroup(props, ref) {
-    const {
-      startElement,
-      startElementProps,
-      endElement,
-      endElementProps,
-      children,
-      ...rest
-    } = props
-
-    return (
-      <Group ref={ref} display="flex" {...rest}>
-        {startElement && (
-          <InputElement pointerEvents="none" {...startElementProps}>
-            {startElement}
-          </InputElement>
-        )}
-        {isValidElement(children) &&
-          cloneElement(children, {
-            ...(startElement && { ps: 'calc(var(--input-height) - 6px)' }),
-            ...(endElement && { pe: 'calc(var(--input-height) - 6px)' }),
-            ...children.props,
-          })}
-        {endElement && (
-          <InputElement placement="end" {...endElementProps}>
-            {endElement}
-          </InputElement>
-        )}
-      </Group>
-    )
-  },
-)

package/src/components/link/index.ts

@@ -1,2 +0,0 @@
-export { Link } from './link'
-export type { LinkProps } from './link'

package/src/components/link/link.stories.tsx

@@ -1,17 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react'
-
-import { Link } from './'
-
-export default {
-  title: 'Components/Link',
-  component: Link,
-} as Meta
-
-type Story = StoryObj<typeof Link>
-
-export const Default: Story = {
-  args: {
-    href: '#',
-    children: 'Link',
-  },
-}

package/src/components/link/link.test.tsx

@@ -1,33 +0,0 @@
-import * as React from 'react'
-
-import { render } from '@saas-ui/test-utils'
-
-import { SaasProvider } from '../provider'
-
-import { Link } from './link'
-
-interface LinkComponentProps {
-  href: string
-  children: React.ReactNode
-}
-
-const LinkComponent: React.FC<LinkComponentProps> = (props) => {
-  const { children, href, ...rest } = props
-  return (
-    <a href={href} {...rest} className="saas-ui-link">
-      {children}
-    </a>
-  )
-}
-
-const renderLink = (ui: React.ReactNode) => {
-  return render(<SaasProvider linkComponent={LinkComponent}>{ui}</SaasProvider>)
-}
-
-test('should render the link', async () => {
-  const { getByText } = renderLink(<Link>Test</Link>)
-
-  const link = getByText('Test')
-
-  expect(link).toHaveClass('saas-ui-link')
-})

package/src/components/link/link.tsx

@@ -1,27 +0,0 @@
-import React from 'react'
-
-import { Link as ChakraLink, LinkProps } from '@chakra-ui/react'
-
-import { useLink } from '../provider'
-
-export type { LinkProps }
-
-/**
- * Chakra UI `Link` component wrapped in a router specific link component.
- * Falls back to a plain `Link` if no Saas UI context is available or no `linkComponent` is configured
- * The router link component can be configured in `SaasProvider`.
- * @see https://saas-ui.dev/docs/core/getting-started
- */
-export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
-  (props, ref) => {
-    const LinkComponent = useLink()
-
-    return (
-      <ChakraLink asChild>
-        <LinkComponent ref={ref} {...props} />
-      </ChakraLink>
-    )
-  },
-)
-
-Link.displayName = 'Link'

package/src/components/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/components/loading-overlay/index.ts

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

package/src/components/loading-overlay/loading-overlay.recipe.ts

@@ -1,61 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react'
-
-export const loadingOverlaySlotRecipe = defineSlotRecipe({
-  className: 'sui-loading-overlay',
-  slots: ['root', 'text'],
-  base: {
-    root: {
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center',
-      p: 4,
-      transitionProperty: 'opacity',
-      transitionDuration: 'slower',
-      _open: {
-        opacity: 1,
-      },
-      _closed: {
-        opacity: 0,
-      },
-    },
-  },
-  variants: {
-    variant: {
-      fill: {
-        root: {
-          flex: 1,
-          height: '100%',
-          bg: {
-            base: 'whiteAlpha.400',
-            _dark: 'blackAlpha.400',
-          },
-        },
-      },
-      fullscreen: {
-        root: {
-          position: 'fixed',
-          inset: 0,
-          zIndex: 'modal',
-          bg: {
-            base: 'white',
-            _dark: 'gray.800',
-          },
-        },
-      },
-      overlay: {
-        root: {
-          position: 'absolute',
-          inset: 0,
-          bg: {
-            base: 'whiteAlpha.300',
-            _dark: 'blackAlpha.300',
-          },
-        },
-      },
-    },
-  },
-  defaultVariants: {
-    variant: 'fill',
-  },
-})

package/src/components/loading-overlay/loading-overlay.stories.tsx

@@ -1,68 +0,0 @@
-import * as React from 'react'
-
-import { Button, Card, Container, Text } from '@chakra-ui/react'
-
-import { LoadingOverlay } from './index.ts'
-
-export default {
-  title: 'Components/LoadingOverlay',
-  decorators: [
-    (Story: any) => (
-      <Container mt="40px">
-        <Story />
-      </Container>
-    ),
-  ],
-}
-
-export const Basic = () => (
-  <Card.Root width="400px" height="200px" overflow="hidden">
-    <LoadingOverlay.Root>
-      <LoadingOverlay.Spinner />
-    </LoadingOverlay.Root>
-  </Card.Root>
-)
-
-export const Overlay = () => (
-  <Card.Root width="400px" height="200px" pos="relative" p="4">
-    <Text>This content will be overlayed.</Text>
-    <LoadingOverlay.Root variant="overlay">
-      <LoadingOverlay.Spinner />
-    </LoadingOverlay.Root>
-  </Card.Root>
-)
-
-export const Fullscreen = () => (
-  <LoadingOverlay.Root variant="fullscreen">
-    <LoadingOverlay.Spinner />
-  </LoadingOverlay.Root>
-)
-
-export const WithText = () => (
-  <Card.Root width="400px" height="200px">
-    <LoadingOverlay.Root borderRadius="md">
-      <LoadingOverlay.Text>Loading...</LoadingOverlay.Text>
-    </LoadingOverlay.Root>
-  </Card.Root>
-)
-
-export const ExitAnimation = () => {
-  const [loading, setLoading] = React.useState(false)
-
-  React.useEffect(() => {
-    if (loading) {
-      setTimeout(() => {
-        setLoading(false)
-      }, 4000)
-    }
-  }, [loading])
-
-  return (
-    <Card.Root width="400px" height="200px" pos="relative" p="4">
-      <Button onClick={() => setLoading(true)}>Show loader</Button>
-      <LoadingOverlay.Root variant="overlay" loading={loading}>
-        <LoadingOverlay.Spinner />
-      </LoadingOverlay.Root>
-    </Card.Root>
-  )
-}

package/src/components/loading-overlay/loading-overlay.tsx

@@ -1,54 +0,0 @@
-import React from 'react'
-
-import {
-  Presence,
-  type PresenceBaseProps,
-  splitPresenceProps,
-} from '@ark-ui/react/presence'
-import {
-  HTMLChakraProps,
-  SlotRecipeProps,
-  chakra,
-  createSlotRecipeContext,
-} from '@chakra-ui/react'
-
-import { Spinner } from '#components/spinner'
-
-const { useStyles, withContext, withProvider } = createSlotRecipeContext({
-  key: 'loadingOverlay',
-})
-
-export const useLoadingOverlayStyles = useStyles
-
-export interface LoadingOverlayProps
-  extends HTMLChakraProps<'div'>,
-    SlotRecipeProps<'loadingOverlay'>,
-    PresenceBaseProps {
-  /**
-   * Show or hide the LoadingOverlay.
-   * @default true
-   */
-  loading?: boolean
-}
-
-const LoadingOverlay: React.FC<LoadingOverlayProps> = (props) => {
-  const { children, loading = true, ...rest } = props
-
-  const [presenceProps, rootProps] = splitPresenceProps(rest)
-
-  return (
-    <Presence present={loading} {...presenceProps} asChild>
-      <chakra.div {...rootProps}>{children}</chakra.div>
-    </Presence>
-  )
-}
-
-export const LoadingOverlayRoot = withProvider(LoadingOverlay, 'root')
-
-LoadingOverlayRoot.displayName = 'LoadingOverlay'
-
-export const LoadingOverlaySpinner = Spinner
-
-export interface LoadingTextProps extends HTMLChakraProps<'p'> {}
-
-export const LoadingOverlayText = withContext('p', 'text')

package/src/components/loading-overlay/namespace.ts

@@ -1,7 +0,0 @@
-import {
-  LoadingOverlayRoot as Root,
-  LoadingOverlaySpinner as Spinner,
-  LoadingOverlayText as Text,
-} from './loading-overlay.tsx'
-
-export { Root, Spinner, Text }

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