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

package/src/components/sidebar/sidebar.tsx

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

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

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

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

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

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

package/src/components/steps/namespace.ts

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

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

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

package/src/components/switch/switch.tsx

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

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

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

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

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

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