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

package/src/components/sidebar/sidebar.tsx

@@ -1,208 +0,0 @@
-import React from 'react'
-
-import type { HTMLChakraProps, SlotRecipeProps } from '@chakra-ui/react'
-import { createSlotRecipeContext } from '@chakra-ui/react'
-import { Sidebar, useSidebar } from '@saas-ui/core/sidebar'
-
-const {
-  withContext,
-  useRecipeResult,
-  StylesProvider,
-  ClassNamesProvider,
-  useStyles: useSidebarStyles,
-} = createSlotRecipeContext({
-  key: 'sidebar',
-})
-
-export { useSidebar, useSidebarStyles }
-
-export interface SidebarProviderProps
-  extends Sidebar.ProviderProps,
-    Omit<SlotRecipeProps<'sidebar'>, 'mode'> {}
-
-export const SidebarProvider = function SidebarProvider(
-  props: SidebarProviderProps,
-) {
-  return (
-    <Sidebar.Provider {...props}>
-      <RecipeProvider {...props}>{props.children}</RecipeProvider>
-    </Sidebar.Provider>
-  )
-}
-
-function RecipeProvider(
-  props: SlotRecipeProps<'sidebar'> & { children: React.ReactNode },
-) {
-  const { mode } = useSidebar()
-
-  const { styles, classNames } = useRecipeResult({
-    ...props,
-    mode,
-  })
-
-  return (
-    <StylesProvider value={styles}>
-      <ClassNamesProvider value={classNames}>
-        {props.children}
-      </ClassNamesProvider>
-    </StylesProvider>
-  )
-}
-
-export interface SidebarRootProps
-  extends Sidebar.RootProps,
-    HTMLChakraProps<'div'> {}
-
-/**
- * Side navigation, commonly used as the primary navigation
- *
- * @see Docs https://saas-ui.dev/docs/components/layout/sidebar
- */
-export const SidebarRoot = withContext<HTMLDivElement, SidebarRootProps>(
-  Sidebar.Root,
-  'root',
-)
-
-export interface SidebarTriggerProps extends HTMLChakraProps<'button'> {}
-
-/**
- * Button that toggles the sidebar visibility.
- *
- * @see Docs https://saas-ui.dev/docs/components/layout/sidebar
- */
-export const SidebarTrigger = withContext<
-  HTMLButtonElement,
-  SidebarTriggerProps
->(Sidebar.Trigger, 'trigger', {
-  forwardAsChild: true,
-})
-
-export interface SidebarFlyoutTriggerProps extends HTMLChakraProps<'button'> {}
-
-/**
- * Opens the sidebar when hovering over the trigger.
- *
- * @see Docs https://saas-ui.dev/docs/components/layout/sidebar
- */
-export const SidebarFlyoutTrigger = withContext<
-  HTMLButtonElement,
-  SidebarFlyoutTriggerProps
->(Sidebar.FlyoutTrigger, 'flyoutTrigger', {
-  forwardAsChild: true,
-})
-
-/**
- * Overlay shown when sidebar is open on mobile.
- *
- * @see Docs https://saas-ui.dev/docs/components/layout/sidebar
- */
-export const SidebarBackdrop = withContext<
-  HTMLDivElement,
-  HTMLChakraProps<'div'>
->(Sidebar.Backdrop, 'backdrop', {
-  forwardAsChild: true,
-})
-
-/**
- * Sidebar header section.
- *
- * @see Docs https://saas-ui.dev/docs/components/layout/sidebar
- */
-export const SidebarHeader = withContext<
-  HTMLDivElement,
-  HTMLChakraProps<'div'>
->(Sidebar.Header, 'header')
-
-/**
- * Sidebar body section, used for the main content of the sidebar.
- *
- * @see Docs https://saas-ui.dev/docs/components/layout/sidebar
- */
-export const SidebarBody = withContext<HTMLDivElement, HTMLChakraProps<'div'>>(
-  Sidebar.Body,
-  'body',
-)
-
-/**
- * Sidebar footer section.
- *
- * @see Docs https://saas-ui.dev/docs/components/layout/sidebar
- */
-export const SidebarFooter = withContext<
-  HTMLDivElement,
-  HTMLChakraProps<'div'>
->(Sidebar.Footer, 'footer')
-
-/**
- * Sidebar track section.
- *
- * @see Docs https://saas-ui.dev/docs/components/layout/sidebar
- */
-export const SidebarTrack = withContext<HTMLDivElement, HTMLChakraProps<'div'>>(
-  Sidebar.Track,
-  'track',
-  {
-    forwardAsChild: true,
-  },
-)
-
-export const SidebarGroup = withContext<HTMLDivElement, HTMLChakraProps<'div'>>(
-  Sidebar.Group,
-  'group',
-  {
-    defaultProps: {
-      role: 'group',
-    },
-  },
-)
-
-export const SidebarGroupHeader = withContext<
-  HTMLDivElement,
-  HTMLChakraProps<'div'>
->(Sidebar.GroupHeader, 'groupHeader')
-
-export const SidebarGroupTitle = withContext<
-  HTMLHeadingElement,
-  HTMLChakraProps<'h5'>
->(Sidebar.GroupTitle, 'groupTitle')
-
-export const SidebarGroupEndElement = withContext<
-  HTMLDivElement,
-  HTMLChakraProps<'div'>
->(Sidebar.GroupEndElement, 'groupEndElement')
-
-export const SidebarGroupContent = withContext<
-  HTMLDivElement,
-  HTMLChakraProps<'div'>
->(Sidebar.GroupContent, 'groupContent')
-
-const {
-  withProvider: withItemProvider,
-  withContext: withItemContext,
-  useStyles: useSidebarItemStyles,
-} = createSlotRecipeContext({
-  key: 'sidebarNavItem',
-})
-
-export { useSidebarItemStyles }
-
-export const SidebarNavItem = withItemProvider<
-  HTMLDivElement,
-  HTMLChakraProps<'div'>
->(Sidebar.NavItem, 'item')
-
-export interface SidebarNavButtonProps extends Sidebar.NavButtonProps {
-  active?: boolean
-}
-
-export const SidebarNavButton = withItemContext<
-  HTMLButtonElement,
-  SidebarNavButtonProps
->(Sidebar.NavButton, 'button', {
-  forwardAsChild: true,
-})
-
-export const SidebarNavItemEndElement = withItemContext<
-  HTMLDivElement,
-  HTMLChakraProps<'div'>
->(Sidebar.NavItemEndElement, 'endElement')

package/src/components/spinner/index.ts

@@ -1,2 +0,0 @@
-export { Spinner } from './spinner.tsx'
-export type { SpinnerProps } from './spinner.tsx'

package/src/components/spinner/spinner.stories.tsx

@@ -1,19 +0,0 @@
-import React from 'react'
-
-import { Spinner } from './spinner.tsx'
-
-export default {
-  title: 'Components/Spinner',
-  component: Spinner,
-}
-
-export const Default = {
-  args: {},
-}
-
-export const RenderingChildren = {
-  args: {
-    loading: false,
-    children: 'Hello world',
-  },
-}

package/src/components/spinner/spinner.tsx

@@ -1,21 +0,0 @@
-import { forwardRef } from 'react'
-
-import type { SpinnerProps as ChakraSpinnerProps } from '@chakra-ui/react'
-import { Spinner as ChakraSpinner } from '@chakra-ui/react'
-
-export interface SpinnerProps extends ChakraSpinnerProps {
-  loading?: boolean
-  children?: React.ReactNode
-}
-
-export const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(
-  function Spinner(props, ref) {
-    const { loading, children, ...rest } = props
-
-    if (loading === false) {
-      return <>{children}</>
-    }
-
-    return <ChakraSpinner ref={ref} {...rest} />
-  },
-)

package/src/components/steps/index.ts

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

package/src/components/steps/namespace.ts

@@ -1,16 +0,0 @@
-export {
-  StepsRoot as Root,
-  StepsItem as Item,
-  StepsIndicator as Indicator,
-  StepsCompletedContent as CompletedContent,
-  StepsContent as Content,
-  StepsList as List,
-  StepsNextTrigger as NextTrigger,
-  StepsPrevTrigger as PrevTrigger,
-} from './steps.tsx'
-
-export type {
-  StepsRootProps as RootProps,
-  StepsItemProps as ItemProps,
-  StepsIndicatorProps as IndicatorProps,
-} from './steps.tsx'

package/src/components/steps/steps.tsx

@@ -1,82 +0,0 @@
-import { Box, Steps as ChakraSteps } from '@chakra-ui/react'
-
-import { CheckIcon } from '../icons'
-
-interface StepInfoProps {
-  title?: React.ReactNode
-  description?: React.ReactNode
-}
-
-export interface StepsItemProps
-  extends Omit<ChakraSteps.ItemProps, 'title'>,
-    StepInfoProps {
-  completedIcon?: React.ReactNode
-  icon?: React.ReactNode
-}
-
-export const StepsItem = (props: StepsItemProps) => {
-  const { title, description, completedIcon, icon, ...rest } = props
-  return (
-    <ChakraSteps.Item {...rest}>
-      <ChakraSteps.Trigger>
-        <ChakraSteps.Indicator>
-          <ChakraSteps.Status
-            complete={completedIcon || <CheckIcon />}
-            incomplete={icon || <ChakraSteps.Number />}
-          />
-        </ChakraSteps.Indicator>
-        <StepInfo title={title} description={description} />
-      </ChakraSteps.Trigger>
-      <ChakraSteps.Separator />
-    </ChakraSteps.Item>
-  )
-}
-
-const StepInfo = (props: StepInfoProps) => {
-  const { title, description } = props
-  if (title && description) {
-    return (
-      <Box>
-        <ChakraSteps.Title>{title}</ChakraSteps.Title>
-        <ChakraSteps.Description>{description}</ChakraSteps.Description>
-      </Box>
-    )
-  }
-  return (
-    <>
-      {title && <ChakraSteps.Title>{title}</ChakraSteps.Title>}
-      {description && (
-        <ChakraSteps.Description>{description}</ChakraSteps.Description>
-      )}
-    </>
-  )
-}
-
-export interface StepsIndicatorProps {
-  completedIcon: React.ReactNode
-  icon?: React.ReactNode
-}
-
-export const StepsIndicator = (props: StepsIndicatorProps) => {
-  const { icon = <ChakraSteps.Number />, completedIcon } = props
-  return (
-    <ChakraSteps.Indicator>
-      <ChakraSteps.Status complete={completedIcon} incomplete={icon} />
-    </ChakraSteps.Indicator>
-  )
-}
-
-export const StepsList = ChakraSteps.List
-
-export type StepsRootProps = ChakraSteps.RootProps
-export const StepsRoot = ChakraSteps.Root
-export const StepsContent = ChakraSteps.Content
-export const StepsCompletedContent = ChakraSteps.CompletedContent
-
-export const StepsNextTrigger = (props: ChakraSteps.NextTriggerProps) => {
-  return <ChakraSteps.NextTrigger {...props} />
-}
-
-export const StepsPrevTrigger = (props: ChakraSteps.PrevTriggerProps) => {
-  return <ChakraSteps.PrevTrigger {...props} />
-}

package/src/components/switch/index.ts

@@ -1,3 +0,0 @@
-export { Switch } from './switch.tsx'
-
-export type { SwitchProps } from './switch.tsx'

package/src/components/switch/switch.tsx

@@ -1,39 +0,0 @@
-import { Switch as ChakraSwitch } from "@chakra-ui/react"
-import { forwardRef } from "react"
-
-export interface SwitchProps extends ChakraSwitch.RootProps {
-  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
-  rootRef?: React.Ref<HTMLLabelElement>
-  trackLabel?: { on: React.ReactNode; off: React.ReactNode }
-  thumbLabel?: { on: React.ReactNode; off: React.ReactNode }
-}
-
-export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
-  function Switch(props, ref) {
-    const { inputProps, children, rootRef, trackLabel, thumbLabel, ...rest } =
-      props
-
-    return (
-      <ChakraSwitch.Root ref={rootRef} {...rest}>
-        <ChakraSwitch.HiddenInput ref={ref} {...inputProps} />
-        <ChakraSwitch.Control>
-          <ChakraSwitch.Thumb>
-            {thumbLabel && (
-              <ChakraSwitch.ThumbIndicator fallback={thumbLabel?.off}>
-                {thumbLabel?.on}
-              </ChakraSwitch.ThumbIndicator>
-            )}
-          </ChakraSwitch.Thumb>
-          {trackLabel && (
-            <ChakraSwitch.Indicator fallback={trackLabel.off}>
-              {trackLabel.on}
-            </ChakraSwitch.Indicator>
-          )}
-        </ChakraSwitch.Control>
-        {children != null && (
-          <ChakraSwitch.Label>{children}</ChakraSwitch.Label>
-        )}
-      </ChakraSwitch.Root>
-    )
-  },
-)

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