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

package/src/components/native-select.tsx

@@ -1,57 +0,0 @@
-"use client"
-
-import { NativeSelect as Select } from "@chakra-ui/react"
-import { forwardRef, useMemo } from "react"
-
-interface NativeSelectRootProps extends Select.RootProps {
-  icon?: React.ReactNode
-}
-
-export const NativeSelectRoot = forwardRef<
-  HTMLDivElement,
-  NativeSelectRootProps
->(function NativeSelect(props, ref) {
-  const { icon, children, ...rest } = props
-  return (
-    <Select.Root ref={ref} {...rest}>
-      {children}
-      <Select.Indicator>{icon}</Select.Indicator>
-    </Select.Root>
-  )
-})
-
-interface NativeSelectItem {
-  value: string
-  label: string
-  disabled?: boolean
-}
-
-interface NativeSelectField extends Select.FieldProps {
-  items?: Array<string | NativeSelectItem>
-}
-
-export const NativeSelectField = forwardRef<
-  HTMLSelectElement,
-  NativeSelectField
->(function NativeSelectField(props, ref) {
-  const { items: itemsProp, children, ...rest } = props
-
-  const items = useMemo(
-    () =>
-      itemsProp?.map((item) =>
-        typeof item === "string" ? { label: item, value: item } : item,
-      ),
-    [itemsProp],
-  )
-
-  return (
-    <Select.Field ref={ref} {...rest}>
-      {children}
-      {items?.map((item) => (
-        <option key={item.value} value={item.value} disabled={item.disabled}>
-          {item.label}
-        </option>
-      ))}
-    </Select.Field>
-  )
-})

package/src/components/navbar/index.ts

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

package/src/components/navbar/namespace.ts

@@ -1,9 +0,0 @@
-export {
-  NavbarRoot as Root,
-  NavbarContent as Content,
-  NavbarBrand as Brand,
-  NavbarItem as Item,
-  NavbarLink as Link,
-} from './navbar'
-
-export type { NavbarRootProps as RootProps } from './navbar'

package/src/components/navbar/navbar.recipe.ts

@@ -1,109 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react'
-
-export const navbarSlotRecipe = defineSlotRecipe({
-  className: 'sui-navbar',
-  slots: ['root', 'content', 'brand', 'item'],
-  base: {
-    root: {
-      display: 'flex',
-      zIndex: 'layer-3',
-      width: 'full',
-      height: 'auto',
-      alignItems: 'center',
-      justifyContent: 'center',
-      top: 0,
-      insetX: 0,
-      transitionProperty: 'common',
-      transitionDuration: 'normal',
-      transitionTimingFunction: 'ease-in-out',
-      _hidden: {
-        transform: 'translateY(-100%)',
-      },
-    },
-    content: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      width: 'full',
-      height: 'var(--navbar-height)',
-      flexWrap: 'nowrap',
-    },
-    brand: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'flex-start',
-      height: 'full',
-      bg: 'transparent',
-      textDecoration: 'none',
-      color: 'inherit',
-      whiteSpace: 'nowrap',
-      boxSizing: 'border-box',
-    },
-    item: {
-      bg: 'transparent',
-      color: 'currentColor',
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      textDecoration: 'none',
-      whiteSpace: 'nowrap',
-      boxSizing: 'border-box',
-      borderRadius: 'md',
-      transitionProperty: 'common',
-      transitionDuration: 'normal',
-      lineHeight: 1,
-      _focusVisible: {
-        outline: 'none',
-        boxShadow: 'outline',
-      },
-      _hover: {
-        bg: 'blackAlpha.100',
-        textDecoration: 'none',
-        _dark: {
-          bg: 'whiteAlpha.200',
-        },
-      },
-      _active: {
-        fontWeight: 'semibold',
-      },
-    },
-  },
-  variants: {
-    variant: {
-      neutral: {
-        root: {
-          bg: 'bg.panel',
-          color: 'fg',
-        },
-      },
-      solid: {
-        root: {
-          bg: 'colorPalette.500',
-          color: 'colorPalette.contrast',
-        },
-      },
-    },
-    size: {
-      md: {
-        root: {
-          fontSize: 'sm',
-        },
-        content: {
-          px: {
-            base: 4,
-            lg: 6,
-          },
-          gap: 4,
-        },
-        item: {
-          px: 3,
-          h: 8,
-        },
-      },
-    },
-  },
-  defaultVariants: {
-    variant: 'neutral',
-    size: 'md',
-  },
-})

package/src/components/navbar/navbar.stories.tsx

@@ -1,435 +0,0 @@
-import React, { type HTMLProps, forwardRef } from 'react'
-
-import {
-  Box,
-  Button,
-  Container,
-  Drawer,
-  HStack,
-  Menu,
-  Skeleton as SkeletonPrimitive,
-  type SkeletonProps,
-  Stack,
-  useDisclosure,
-} from '@chakra-ui/react'
-import { SaasUIIcon } from '@saas-ui/assets'
-import { Meta, StoryObj } from '@storybook/react'
-import { LuMenu as FiMenu, LuX as FiX, LuX } from 'react-icons/lu'
-
-import { AppShell } from '../app-shell'
-import { Persona } from '../persona'
-import { SearchInput } from '../search-input'
-import { Navbar } from './index.ts'
-
-export default {
-  title: 'Components/Navbar',
-  parameters: {
-    layout: 'fullscreen',
-  },
-  argTypes: {
-    position: {
-      control: {
-        type: 'select',
-      },
-      options: ['static', 'fixed'],
-    },
-    maxWidth: {
-      control: {
-        type: 'select',
-      },
-      options: ['sm', 'md', 'lg', 'xl', '2xl', 'full'],
-    },
-  },
-} as Meta
-
-type Story = StoryObj<typeof Navbar.Root>
-
-const AppLogo = () => <SaasUIIcon width="28px" height="28px" />
-
-const Link = forwardRef<HTMLAnchorElement, HTMLProps<HTMLAnchorElement>>(
-  ({ children, ...props }, ref) => {
-    return (
-      <Link ref={ref} onClick={(e) => e.preventDefault()} {...props}>
-        {children}
-      </Link>
-    )
-  },
-)
-
-export interface SkeletonTextProps extends SkeletonProps {
-  noOfLines?: number
-}
-
-const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
-  function Skeleton(props, ref) {
-    return (
-      <SkeletonPrimitive ref={ref} variant="none" bg="bg.subtle" {...props} />
-    )
-  },
-)
-
-const SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(
-  function SkeletonText(props, ref) {
-    const { noOfLines = 3, gap, ...rest } = props
-    return (
-      <Stack gap={gap} width="full" ref={ref}>
-        {Array.from({ length: noOfLines }).map((_, index) => (
-          <SkeletonPrimitive
-            height="4"
-            key={index}
-            _last={{ maxW: '80%' }}
-            variant="none"
-            bg="bg.subtle"
-            {...rest}
-          />
-        ))}
-      </Stack>
-    )
-  },
-)
-
-const App = React.forwardRef(({ children, navbar }: any, ref: any) => {
-  return (
-    <AppShell header={navbar}>
-      <Box ref={ref} height="100%" width="100%" overflowY="auto">
-        {children}
-        <Container
-          maxW="container.xl"
-          pt="8"
-          px="8"
-          display="flex"
-          flexDirection="column"
-          margin="0 auto"
-        >
-          <Stack gap="4" mb="14">
-            <Skeleton width="100px" height="24px" />
-          </Stack>
-          <Stack direction="row" gap="8" mb="14">
-            <Stack gap="4" flex="1">
-              <Skeleton width="100px" height="20px" />
-              <SkeletonText />
-            </Stack>
-            <Stack gap="4" flex="1">
-              <Skeleton width="100px" height="20px" />
-              <SkeletonText />
-            </Stack>
-          </Stack>
-          <Stack direction="row" gap="8">
-            <Stack gap="4" flex="1">
-              <Skeleton width="100px" height="20px" />
-              <SkeletonText />
-            </Stack>
-            <Stack gap="4" flex="1">
-              <Skeleton width="100px" height="20px" />
-              <SkeletonText />
-            </Stack>
-          </Stack>
-        </Container>
-      </Box>
-    </AppShell>
-  )
-})
-
-App.displayName = 'App'
-
-const Template = (args: Navbar.RootProps) => {
-  const parentRef = React.useRef(null)
-
-  return (
-    <App ref={parentRef}>
-      <Navbar.Root {...args} parentRef={parentRef}>
-        <Navbar.Content>
-          <Navbar.Brand>
-            <AppLogo />
-          </Navbar.Brand>
-          <HStack display={{ base: 'hidden', md: 'flex' }}>
-            <Navbar.Item asChild>
-              <Link href="#">Features</Link>
-            </Navbar.Item>
-            <Navbar.Item active asChild>
-              <Link href="#">Customers</Link>
-            </Navbar.Item>
-            <Navbar.Item asChild>
-              <Link href="#">Integrations</Link>
-            </Navbar.Item>
-            <Navbar.Item asChild>
-              <Link href="#">Pricing</Link>
-            </Navbar.Item>
-          </HStack>
-          <HStack justifyContent="end" gap="2">
-            <Navbar.Item asChild>
-              <Link href="#">Login</Link>
-            </Navbar.Item>
-            <Button variant="solid" asChild>
-              <Link href="#">Sign Up</Link>
-            </Button>
-          </HStack>
-        </Navbar.Content>
-      </Navbar.Root>
-    </App>
-  )
-}
-
-const WithMenuTemplate = (args: Navbar.RootProps) => {
-  const parentRef = React.useRef(null)
-  const mobileNav = useDisclosure()
-  const menuItems = ['Features', 'Customers', 'Integrations', 'Pricing']
-
-  return (
-    <App ref={parentRef}>
-      <Navbar.Root parentRef={parentRef} position="sticky" {...args}>
-        <Navbar.Content>
-          <Navbar.Brand>
-            <AppLogo />
-          </Navbar.Brand>
-
-          <HStack display={{ base: 'none', sm: 'flex' }}>
-            <Navbar.Item asChild>
-              <Link href="#">Features</Link>
-            </Navbar.Item>
-            <Navbar.Item active asChild>
-              <Link href="#">Customers</Link>
-            </Navbar.Item>
-            <Navbar.Item asChild>
-              <Link href="#">Integrations</Link>
-            </Navbar.Item>
-            <Navbar.Item asChild>
-              <Link href="#">Pricing</Link>
-            </Navbar.Item>
-          </HStack>
-
-          <HStack justifyContent="end" gap="2">
-            <Navbar.Item asChild>
-              <Link href="#">Login</Link>
-            </Navbar.Item>
-
-            <Button variant="solid" asChild>
-              <Link href="#">Sign Up</Link>
-            </Button>
-
-            <Button
-              aria-label={mobileNav.open ? 'Close menu' : 'Open menu'}
-              display={{ base: 'inline-flex', sm: 'none' }}
-              onClick={mobileNav.onToggle}
-              variant="ghost"
-            >
-              {mobileNav.open ? <FiX /> : <FiMenu />}
-            </Button>
-          </HStack>
-        </Navbar.Content>
-
-        <Drawer.Root open={mobileNav.open} onOpenChange={mobileNav.onToggle}>
-          <Drawer.Backdrop />
-          <Drawer.Content>
-            <Drawer.Header>
-              <Drawer.CloseTrigger>
-                <Button variant="ghost">
-                  <LuX />
-                </Button>
-              </Drawer.CloseTrigger>
-            </Drawer.Header>
-            <Drawer.Body fontSize="md">
-              <Stack direction="column" gap="4">
-                {menuItems.map((item, index) => (
-                  <Navbar.Item key={`${item}-${index}`} width="full" asChild>
-                    <Link href="#">{item}</Link>
-                  </Navbar.Item>
-                ))}
-              </Stack>
-            </Drawer.Body>
-          </Drawer.Content>
-        </Drawer.Root>
-      </Navbar.Root>
-    </App>
-  )
-}
-
-const WithUserMenuTemplate = (args: Navbar.RootProps) => {
-  return (
-    <App>
-      <Navbar.Root {...args}>
-        <Navbar.Content>
-          <Navbar.Brand>
-            <AppLogo />
-          </Navbar.Brand>
-
-          <HStack display={{ base: 'hidden', sm: 'flex' }}>
-            <Navbar.Item asChild active>
-              <Link href="#">Inbox</Link>
-            </Navbar.Item>
-            <Navbar.Item asChild>
-              <Link href="#">Contacts</Link>
-            </Navbar.Item>
-            <Navbar.Item asChild>
-              <Link href="#">Tasks</Link>
-            </Navbar.Item>
-          </HStack>
-
-          <Box>
-            <Menu.Root>
-              <Menu.Trigger>
-                <Persona.Avatar
-                  src="/showcase-avatar.jpg"
-                  name="Beatriz"
-                  size="xs"
-                >
-                  <Persona.PresenceBadge presence="online" />
-                </Persona.Avatar>
-              </Menu.Trigger>
-              <Menu.Content>
-                <Menu.ItemGroup title="beatriz@saas-ui.dev">
-                  <Menu.Item value="profile" asChild>
-                    <Link href="#">Profile</Link>
-                  </Menu.Item>
-                  <Menu.Item value="settings" asChild>
-                    <Link href="#">Settings</Link>
-                  </Menu.Item>
-                  <Menu.Item value="help" asChild>
-                    <Link href="#">Help & feedback</Link>
-                  </Menu.Item>
-                </Menu.ItemGroup>
-                <Menu.Separator />
-                <Menu.Item value="logout" asChild>
-                  <Link href="#">Log out</Link>
-                </Menu.Item>
-              </Menu.Content>
-            </Menu.Root>
-          </Box>
-        </Navbar.Content>
-      </Navbar.Root>
-    </App>
-  )
-}
-
-const WithSearchInputTemplate = (args: Navbar.RootProps) => {
-  return (
-    <App>
-      <Navbar.Root {...args}>
-        <Navbar.Content>
-          <Navbar.Brand>
-            <AppLogo />
-          </Navbar.Brand>
-
-          <HStack display={{ base: 'hidden', sm: 'flex' }} gap="1">
-            <Navbar.Item asChild>
-              <Link href="#">Inbox</Link>
-            </Navbar.Item>
-            <Navbar.Item active asChild>
-              <Link href="#">Contacts</Link>
-            </Navbar.Item>
-            <Navbar.Item asChild>
-              <Link href="#">Tasks</Link>
-            </Navbar.Item>
-          </HStack>
-
-          <HStack gap="4">
-            <Box width="180px">
-              <SearchInput size="sm" />
-            </Box>
-            <Menu.Root>
-              <Menu.Trigger>
-                <Persona.Avatar
-                  src="/showcase-avatar.jpg"
-                  name="Beatriz"
-                  size="xs"
-                >
-                  <Persona.PresenceBadge presence="online" />
-                </Persona.Avatar>
-              </Menu.Trigger>
-              <Menu.Content>
-                <Menu.ItemGroup title="beatriz@saas-ui.dev">
-                  <Menu.Item value="profile" asChild>
-                    <Link href="#">Profile</Link>
-                  </Menu.Item>
-                  <Menu.Item value="settings" asChild>
-                    <Link href="#">Settings</Link>
-                  </Menu.Item>
-                  <Menu.Item value="help" asChild>
-                    <Link href="#">Help & feedback</Link>
-                  </Menu.Item>
-                </Menu.ItemGroup>
-                <Menu.Separator />
-                <Menu.Item value="logout" asChild>
-                  <Link href="#">Log out</Link>
-                </Menu.Item>
-              </Menu.Content>
-            </Menu.Root>
-          </HStack>
-        </Navbar.Content>
-      </Navbar.Root>
-    </App>
-  )
-}
-
-export const Static: Story = {
-  render: Template,
-
-  args: {
-    position: 'static',
-  },
-}
-
-export const Sticky: Story = {
-  render: Template,
-
-  args: {
-    position: 'sticky',
-  },
-}
-
-export const Border: Story = {
-  render: Template,
-
-  args: {
-    position: 'sticky',
-    borderBottomWidth: '1px',
-  },
-}
-
-export const BlurredBg: Story = {
-  render: Template,
-
-  args: {
-    position: 'sticky',
-    borderBottomWidth: '1px',
-    background: 'transparent',
-    backdropFilter: 'blur(4px)',
-  },
-}
-
-export const Shadow: Story = {
-  render: Template,
-
-  args: {
-    position: 'sticky',
-    background: 'transparent',
-    backdropFilter: 'blur(4px)',
-    css: {
-      '&:not([data-at-top])': {
-        borderBottomWidth: '1px',
-        boxShadow: 'lg',
-      },
-    },
-  },
-}
-
-export const HideOnScroll: Story = {
-  render: Template,
-
-  args: {
-    position: 'sticky',
-    shouldHideOnScroll: true,
-  },
-}
-
-export const WithMenu: Story = {
-  render: WithMenuTemplate,
-}
-
-export const WithUserMenu: Story = {
-  render: WithUserMenuTemplate,
-}
-
-export const WithSearchInput: Story = {
-  render: WithSearchInputTemplate,
-}

package/src/components/navbar/navbar.test.tsx

@@ -1,49 +0,0 @@
-import * as React from 'react'
-import { render, testStories } from '@saas-ui/test-utils'
-
-import { Navbar, NavbarBrand, NavbarItem, NavbarContent } from './index'
-
-import * as stories from './navbar.stories'
-
-testStories<typeof stories>(stories)
-
-describe('Navbar', () => {
-  it('should render correctly', () => {
-    const wrapper = render(<Navbar />)
-
-    expect(() => wrapper.unmount()).not.toThrow()
-  })
-
-  it('ref should be forwarded', () => {
-    const ref = React.createRef<HTMLDivElement>()
-
-    render(<Navbar ref={ref} />)
-    expect(ref.current).not.toBeNull()
-  })
-
-  it('should render correctly with brand', () => {
-    const wrapper = render(
-      <Navbar>
-        <NavbarBrand data-testid="navbar-test">Saas UI</NavbarBrand>
-      </Navbar>
-    )
-
-    expect(wrapper.getByTestId('navbar-test')).toBeInTheDocument()
-  })
-
-  it('should render correctly content children', () => {
-    const wrapper = render(
-      <Navbar>
-        <NavbarContent data-testid="navbar-content-test">
-          <NavbarItem>Dashboard</NavbarItem>
-          <NavbarItem>Contacts</NavbarItem>
-          <NavbarItem>Settings</NavbarItem>
-        </NavbarContent>
-      </Navbar>
-    )
-
-    const navbarContent = wrapper.getByTestId('navbar-content-test')
-
-    expect(navbarContent.children.length).toBe(3)
-  })
-})

package/src/components/navbar/navbar.tsx

@@ -1,39 +0,0 @@
-import { type HTMLChakraProps, createSlotRecipeContext } from '@chakra-ui/react'
-import { Navbar } from '@saas-ui/core/navbar'
-
-const {
-  withProvider,
-  withContext,
-  useStyles: useNavbarStyles,
-} = createSlotRecipeContext({
-  key: 'navbar',
-})
-
-export { useNavbarStyles }
-
-export type NavbarRootProps = Navbar.RootProps & HTMLChakraProps<'div'>
-
-export const NavbarRoot = withProvider<HTMLDivElement, NavbarRootProps>(
-  Navbar.Root,
-  'root',
-)
-
-export const NavbarBrand = withContext<HTMLDivElement, HTMLChakraProps<'div'>>(
-  Navbar.Brand,
-  'brand',
-)
-
-export const NavbarContent = withContext<
-  HTMLDivElement,
-  HTMLChakraProps<'div'>
->(Navbar.Content, 'content')
-
-export const NavbarItem = withContext<HTMLLIElement, HTMLChakraProps<'li'>>(
-  Navbar.Item,
-  'item',
-)
-
-export const NavbarLink = withContext<HTMLAnchorElement, HTMLChakraProps<'a'>>(
-  Navbar.Link,
-  'link',
-)

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

@@ -1,2 +0,0 @@
-export { NumberInput } from './number-input.tsx'
-export type { NumberInputProps } from './number-input.tsx'