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

package/src/components/accordion.tsx

@@ -1,47 +0,0 @@
-import { Accordion, HStack } from "@chakra-ui/react"
-import { forwardRef } from "react"
-import { LuChevronDown } from "react-icons/lu"
-
-interface AccordionItemTriggerProps extends Accordion.ItemTriggerProps {
-  indicatorPlacement?: "start" | "end"
-}
-
-export const AccordionItemTrigger = forwardRef<
-  HTMLButtonElement,
-  AccordionItemTriggerProps
->(function AccordionItemTrigger(props, ref) {
-  const { children, indicatorPlacement = "end", ...rest } = props
-  return (
-    <Accordion.ItemTrigger {...rest} ref={ref}>
-      {indicatorPlacement === "start" && (
-        <Accordion.ItemIndicator rotate={{ base: "-90deg", _open: "0deg" }}>
-          <LuChevronDown />
-        </Accordion.ItemIndicator>
-      )}
-      <HStack gap="4" flex="1" textAlign="start" width="full">
-        {children}
-      </HStack>
-      {indicatorPlacement === "end" && (
-        <Accordion.ItemIndicator>
-          <LuChevronDown />
-        </Accordion.ItemIndicator>
-      )}
-    </Accordion.ItemTrigger>
-  )
-})
-
-interface AccordionItemContentProps extends Accordion.ItemContentProps {}
-
-export const AccordionItemContent = forwardRef<
-  HTMLDivElement,
-  AccordionItemContentProps
->(function AccordionItemContent(props, ref) {
-  return (
-    <Accordion.ItemContent>
-      <Accordion.ItemBody {...props} ref={ref} />
-    </Accordion.ItemContent>
-  )
-})
-
-export const AccordionRoot = Accordion.Root
-export const AccordionItem = Accordion.Item

package/src/components/action-bar.tsx

@@ -1,40 +0,0 @@
-import { ActionBar, Portal } from "@chakra-ui/react"
-import { CloseButton } from "compositions/ui/close-button"
-import { forwardRef } from "react"
-
-interface ActionBarContentProps extends ActionBar.ContentProps {
-  portalled?: boolean
-  portalRef?: React.RefObject<HTMLElement>
-}
-
-export const ActionBarContent = forwardRef<
-  HTMLDivElement,
-  ActionBarContentProps
->(function ActionBarContent(props, ref) {
-  const { children, portalled = true, portalRef, ...rest } = props
-
-  return (
-    <Portal disabled={!portalled} container={portalRef}>
-      <ActionBar.Positioner>
-        <ActionBar.Content ref={ref} {...rest} asChild={false}>
-          {children}
-        </ActionBar.Content>
-      </ActionBar.Positioner>
-    </Portal>
-  )
-})
-
-export const ActionBarCloseTrigger = forwardRef<
-  HTMLButtonElement,
-  ActionBar.CloseTriggerProps
->(function ActionBarCloseTrigger(props, ref) {
-  return (
-    <ActionBar.CloseTrigger {...props} asChild ref={ref}>
-      <CloseButton size="sm" />
-    </ActionBar.CloseTrigger>
-  )
-})
-
-export const ActionBarRoot = ActionBar.Root
-export const ActionBarSelectionTrigger = ActionBar.SelectionTrigger
-export const ActionBarSeparator = ActionBar.Separator

package/src/components/alert.tsx

@@ -1,51 +0,0 @@
-import { Alert as ChakraAlert } from "@chakra-ui/react"
-import { CloseButton } from "compositions/ui/close-button"
-import { forwardRef } from "react"
-
-export interface AlertProps extends Omit<ChakraAlert.RootProps, "title"> {
-  startElement?: React.ReactNode
-  endElement?: React.ReactNode
-  title?: React.ReactNode
-  icon?: React.ReactElement
-  closable?: boolean
-  onClose?: () => void
-}
-
-export const Alert = forwardRef<HTMLDivElement, AlertProps>(
-  function Alert(props, ref) {
-    const {
-      title,
-      children,
-      icon,
-      closable,
-      onClose,
-      startElement,
-      endElement,
-      ...rest
-    } = props
-    return (
-      <ChakraAlert.Root ref={ref} {...rest}>
-        {startElement || <ChakraAlert.Indicator>{icon}</ChakraAlert.Indicator>}
-        {children ? (
-          <ChakraAlert.Content>
-            <ChakraAlert.Title>{title}</ChakraAlert.Title>
-            <ChakraAlert.Description>{children}</ChakraAlert.Description>
-          </ChakraAlert.Content>
-        ) : (
-          <ChakraAlert.Title flex="1">{title}</ChakraAlert.Title>
-        )}
-        {endElement}
-        {closable && (
-          <CloseButton
-            size="sm"
-            pos="relative"
-            top="-2"
-            insetEnd="-2"
-            alignSelf="flex-start"
-            onClick={onClose}
-          />
-        )}
-      </ChakraAlert.Root>
-    )
-  },
-)

package/src/components/app-shell/app-shell.recipe.ts

@@ -1,52 +0,0 @@
-import { defineSlotRecipe } from '@chakra-ui/react'
-
-export const appShellSlotRecipe = defineSlotRecipe({
-  className: 'sui-app-shell',
-  slots: ['root', 'content', 'main'],
-  base: {
-    root: {
-      display: 'flex',
-      flexDirection: 'column',
-    },
-    content: {
-      display: 'flex',
-      flex: 1,
-      minWidth: 0,
-      minHeight: 0,
-    },
-    main: {
-      display: 'flex',
-      flex: 1,
-      flexDirection: 'column',
-      minWidth: 0,
-    },
-  },
-  variants: {
-    position: {
-      static: {
-        root: {
-          height: '100vh',
-        },
-      },
-      fullscreen: {
-        root: {
-          position: 'fixed',
-          inset: 0,
-        },
-      },
-    },
-    variant: {
-      plain: {},
-      raised: {
-        main: {
-          boxShadow: 'xs',
-          zIndex: 'layer-1',
-        },
-      },
-    },
-  },
-  defaultVariants: {
-    position: 'static',
-    variant: 'raised',
-  },
-})

package/src/components/app-shell/app-shell.stories.tsx

@@ -1,51 +0,0 @@
-import * as React from 'react'
-
-import { Box } from '@chakra-ui/react'
-import type { Meta } from '@storybook/react'
-
-import { useAppShellStyles } from './app-shell.tsx'
-import { AppShell } from './index.ts'
-
-export default {
-  title: 'Components/AppShell',
-  parameters: {
-    layout: 'fullscreen',
-  },
-} as Meta
-
-export const FullscreenVariant = {
-  render: () => (
-    <AppShell
-      header={
-        <Box height="40px" borderBottomWidth="1px" p="2">
-          Header
-        </Box>
-      }
-      sidebar={
-        <Box width="200px" borderRightWidth="1px" p="2">
-          Sidebar
-        </Box>
-      }
-      aside={
-        <Box width="200px" borderLeftWidth="1px" p="2">
-          Aside
-        </Box>
-      }
-      footer={
-        <Box height="40px" borderTopWidth="1px" p="2">
-          Footer
-        </Box>
-      }
-    >
-      <Box p="2">Content</Box>
-    </AppShell>
-  ),
-}
-
-function Test() {
-  const styles = useAppShellStyles()
-
-  console.log(styles)
-
-  return null
-}

package/src/components/app-shell/app-shell.tsx

@@ -1,94 +0,0 @@
-'use client'
-
-import { forwardRef } from 'react'
-
-import {
-  type HTMLChakraProps,
-  type SlotRecipeProps,
-  createSlotRecipeContext,
-} from '@chakra-ui/react'
-
-////////////////////////////////////////////////////////////////////////////////////
-
-const {
-  withProvider,
-  withContext,
-  useStyles: useAppShellStyles,
-} = createSlotRecipeContext({
-  key: 'appShell',
-})
-
-export { useAppShellStyles }
-
-export interface AppShellProps extends HTMLChakraProps<'div'> {
-  /**
-   * The top header navigation
-   */
-  header?: React.ReactNode
-  /**
-   * Main sidebar, positioned on the left
-   */
-  sidebar?: React.ReactElement
-  /**
-   * Secondary sidebar, positioned on the right
-   */
-  aside?: React.ReactNode
-  /**
-   * The footer
-   */
-  footer?: React.ReactNode
-  /**
-   * The main content
-   */
-  children: React.ReactNode
-}
-
-export interface AppShellRootProps
-  extends AppShellProps,
-    SlotRecipeProps<'appShell'> {}
-
-/**
- * The App Shell defines the main structure of your app.
- *
- * @see Docs https://saas-ui.dev/docs/components/layout/app-shell
- */
-export const AppShellRoot = withProvider<HTMLDivElement, AppShellRootProps>(
-  'div',
-  'root',
-  { forwardAsChild: true },
-)
-
-export interface AppShellContentProps extends HTMLChakraProps<'div'> {}
-
-export const AppShellContent = withContext<
-  HTMLDivElement,
-  AppShellContentProps
->('div', 'content', { forwardAsChild: true })
-
-export interface AppShellMainProps extends HTMLChakraProps<'div'> {}
-
-export const AppShellMain = withContext<HTMLDivElement, AppShellMainProps>(
-  'div',
-  'main',
-  { forwardAsChild: true },
-)
-
-export const AppShell = forwardRef<HTMLDivElement, AppShellRootProps>(
-  (props, ref) => {
-    const { header, sidebar, aside, footer, children, ...rootProps } = props
-
-    return (
-      <AppShellRoot ref={ref} {...rootProps}>
-        {header}
-        <AppShellContent>
-          {sidebar}
-          <AppShellMain>{children}</AppShellMain>
-          {aside}
-        </AppShellContent>
-        {footer}
-      </AppShellRoot>
-    )
-  },
-)
-
-AppShell.displayName = 'AppShell'

package/src/components/app-shell/index.ts

@@ -1,3 +0,0 @@
-export { AppShell } from './app-shell'
-
-export type { AppShellProps } from './app-shell'

package/src/components/avatar.tsx

@@ -1,74 +0,0 @@
-"use client"
-
-import type { GroupProps, SlotRecipeProps } from "@chakra-ui/react"
-import { Avatar as ChakraAvatar, Group } from "@chakra-ui/react"
-import { forwardRef } from "react"
-
-type ImageProps = React.ImgHTMLAttributes<HTMLImageElement>
-
-export interface AvatarProps extends ChakraAvatar.RootProps {
-  name?: string
-  src?: string
-  srcSet?: string
-  loading?: ImageProps["loading"]
-  icon?: React.ReactElement
-  fallback?: React.ReactNode
-}
-
-export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
-  function Avatar(props, ref) {
-    const { name, src, srcSet, loading, icon, fallback, children, ...rest } =
-      props
-    return (
-      <ChakraAvatar.Root ref={ref} {...rest}>
-        <AvatarFallback name={name} icon={icon}>
-          {fallback}
-        </AvatarFallback>
-        <ChakraAvatar.Image src={src} srcSet={srcSet} loading={loading} />
-        {children}
-      </ChakraAvatar.Root>
-    )
-  },
-)
-
-interface AvatarFallbackProps extends ChakraAvatar.FallbackProps {
-  name?: string
-  icon?: React.ReactElement
-}
-
-const AvatarFallback = forwardRef<HTMLDivElement, AvatarFallbackProps>(
-  function AvatarFallback(props, ref) {
-    const { name, icon, children, ...rest } = props
-    return (
-      <ChakraAvatar.Fallback ref={ref} {...rest}>
-        {children}
-        {name != null && children == null && <>{getInitials(name)}</>}
-        {name == null && children == null && (
-          <ChakraAvatar.Icon asChild={!!icon}>{icon}</ChakraAvatar.Icon>
-        )}
-      </ChakraAvatar.Fallback>
-    )
-  },
-)
-
-function getInitials(name: string) {
-  const names = name.trim().split(" ")
-  const firstName = names[0] != null ? names[0] : ""
-  const lastName = names.length > 1 ? names[names.length - 1] : ""
-  return firstName && lastName
-    ? `${firstName.charAt(0)}${lastName.charAt(0)}`
-    : firstName.charAt(0)
-}
-
-interface AvatarGroupProps extends GroupProps, SlotRecipeProps<"avatar"> {}
-
-export const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(
-  function AvatarGroup(props, ref) {
-    const { size, variant, borderless, ...rest } = props
-    return (
-      <ChakraAvatar.PropsProvider value={{ size, variant, borderless }}>
-        <Group gap="0" spaceX="-3" ref={ref} {...rest} />
-      </ChakraAvatar.PropsProvider>
-    )
-  },
-)

package/src/components/blockquote.tsx

@@ -1,31 +0,0 @@
-import { Blockquote as ChakraBlockquote } from "@chakra-ui/react"
-import { forwardRef } from "react"
-
-export interface BlockquoteProps extends ChakraBlockquote.RootProps {
-  cite?: React.ReactNode
-  citeUrl?: string
-  icon?: React.ReactNode
-  showDash?: boolean
-}
-
-export const Blockquote = forwardRef<HTMLDivElement, BlockquoteProps>(
-  function Blockquote(props, ref) {
-    const { children, cite, citeUrl, showDash, icon, ...rest } = props
-
-    return (
-      <ChakraBlockquote.Root ref={ref} {...rest}>
-        {icon}
-        <ChakraBlockquote.Content cite={citeUrl}>
-          {children}
-        </ChakraBlockquote.Content>
-        {cite && (
-          <ChakraBlockquote.Caption>
-            {showDash ? <>&mdash;</> : null} <cite>{cite}</cite>
-          </ChakraBlockquote.Caption>
-        )}
-      </ChakraBlockquote.Root>
-    )
-  },
-)
-
-export const BlockquoteIcon = ChakraBlockquote.Icon

package/src/components/breadcrumbs/breadcrumb.stories.tsx

@@ -1,17 +0,0 @@
-import React from 'react'
-
-import { Breadcrumb } from './index.ts'
-
-export default {
-  title: 'Components/Breadcrumbs',
-  component: Breadcrumb.Root,
-}
-
-export const Default = {
-  args: {
-    children: [
-      <Breadcrumb.Link href="/">Home</Breadcrumb.Link>,
-      <Breadcrumb.CurrentLink>Contact</Breadcrumb.CurrentLink>,
-    ],
-  },
-}

package/src/components/breadcrumbs/breadcrumb.tsx

@@ -1,36 +0,0 @@
-import { Children, Fragment, forwardRef, isValidElement } from 'react'
-
-import { Breadcrumb, type SystemStyleObject } from '@chakra-ui/react'
-
-export interface BreadcrumbRootProps extends Breadcrumb.RootProps {
-  separator?: React.ReactNode
-  separatorGap?: SystemStyleObject['gap']
-}
-
-export const BreadcrumbRoot = forwardRef<HTMLDivElement, BreadcrumbRootProps>(
-  function BreadcrumbRoot(props, ref) {
-    const { separator = '/', separatorGap, children, ...rest } = props
-    const validChildren = Children.toArray(children).filter(isValidElement)
-    return (
-      <Breadcrumb.Root ref={ref} {...rest}>
-        <Breadcrumb.List gap={separatorGap}>
-          {validChildren.map((child, index) => {
-            const last = index === validChildren.length - 1
-            return (
-              <Fragment key={index}>
-                <Breadcrumb.Item>{child}</Breadcrumb.Item>
-                {!last && (
-                  <Breadcrumb.Separator>{separator}</Breadcrumb.Separator>
-                )}
-              </Fragment>
-            )
-          })}
-        </Breadcrumb.List>
-      </Breadcrumb.Root>
-    )
-  },
-)
-
-export const BreadcrumbLink = Breadcrumb.Link
-export const BreadcrumbCurrentLink = Breadcrumb.CurrentLink
-export const BreadcrumbEllipsis = Breadcrumb.Ellipsis

package/src/components/breadcrumbs/index.ts

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

package/src/components/breadcrumbs/namespace.ts

@@ -1,8 +0,0 @@
-export {
-  BreadcrumbRoot as Root,
-  BreadcrumbLink as Link,
-  BreadcrumbCurrentLink as CurrentLink,
-  BreadcrumbEllipsis as Ellipsis,
-} from './breadcrumb.tsx'
-
-export type { BreadcrumbRootProps } from './breadcrumb.tsx'

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

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