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

package/src/components/sidebar/sidebar.tsx

@@ -0,0 +1,204 @@
+import React, { type HTMLProps } from 'react'
+
+import {
+  type HTMLChakraProps,
+  type SlotRecipeProps,
+  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,
+    SlotRecipeProps<'sidebar'> {}
+
+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(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(Sidebar.NavItem, 'item')
+
+export interface SidebarNavButtonProps extends HTMLProps<'button'> {
+  active?: boolean
+}
+
+export const SidebarNavButton = withItemContext<
+  HTMLButtonElement,
+  Sidebar.NavButtonProps
+>(Sidebar.NavButton, 'button', {
+  forwardAsChild: true,
+})
+
+export const SidebarNavItemEndElement = withItemContext<
+  HTMLDivElement,
+  HTMLChakraProps<'div'>
+>(Sidebar.NavItemEndElement, 'endElement')

package/src/components/skeleton.tsx

@@ -0,0 +1,44 @@
+import type {
+  SkeletonProps as ChakraSkeletonProps,
+  CircleProps,
+} from "@chakra-ui/react"
+import { Skeleton as ChakraSkeleton, Circle, Stack } from "@chakra-ui/react"
+import { forwardRef } from "react"
+
+export interface SkeletonCircleProps extends ChakraSkeletonProps {
+  size?: CircleProps["size"]
+}
+
+export const SkeletonCircle = (props: SkeletonCircleProps) => {
+  const { size, ...rest } = props
+  return (
+    <Circle size={size} asChild>
+      <ChakraSkeleton {...rest} />
+    </Circle>
+  )
+}
+
+export interface SkeletonTextProps extends ChakraSkeletonProps {
+  noOfLines?: number
+}
+
+export 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) => (
+          <ChakraSkeleton
+            height="4"
+            key={index}
+            {...props}
+            _last={{ maxW: "80%" }}
+            {...rest}
+          />
+        ))}
+      </Stack>
+    )
+  },
+)
+
+export const Skeleton = ChakraSkeleton

package/src/components/slider.tsx

@@ -0,0 +1,53 @@
+import { Slider as ChakraSlider } from "@chakra-ui/react"
+import { forwardRef } from "react"
+
+export interface SliderProps extends ChakraSlider.RootProps {
+  marks?: Array<number | { value: number; label: React.ReactNode }>
+  label?: React.ReactNode
+}
+
+export const Slider = forwardRef<HTMLDivElement, SliderProps>(
+  function Slider(props, ref) {
+    const { marks: marksProp, label, ...rest } = props
+    const value = props.defaultValue ?? props.value
+
+    const marks = marksProp?.map((mark) => {
+      if (typeof mark === "number") return { value: mark, label: undefined }
+      return mark
+    })
+
+    const hasMarkLabel = !!marks?.some((mark) => mark.label)
+
+    return (
+      <ChakraSlider.Root ref={ref} thumbAlignment="center" {...rest}>
+        {label && (
+          <ChakraSlider.Label fontWeight="medium">{label}</ChakraSlider.Label>
+        )}
+        <ChakraSlider.Control mb={hasMarkLabel ? "4" : undefined}>
+          <ChakraSlider.Track>
+            <ChakraSlider.Range />
+          </ChakraSlider.Track>
+          {value?.map((_, index) => (
+            <ChakraSlider.Thumb key={index} index={index}>
+              <ChakraSlider.HiddenInput />
+            </ChakraSlider.Thumb>
+          ))}
+        </ChakraSlider.Control>
+        {marks?.length && (
+          <ChakraSlider.MarkerGroup>
+            {marks.map((mark, index) => {
+              const value = typeof mark === "number" ? mark : mark.value
+              const label = typeof mark === "number" ? undefined : mark.label
+              return (
+                <ChakraSlider.Marker key={index} value={value}>
+                  <ChakraSlider.MarkerIndicator />
+                  {label}
+                </ChakraSlider.Marker>
+              )
+            })}
+          </ChakraSlider.MarkerGroup>
+        )}
+      </ChakraSlider.Root>
+    )
+  },
+)

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/stat.tsx

@@ -0,0 +1,75 @@
+import {
+  Badge,
+  type BadgeProps,
+  Stat as ChakraStat,
+  FormatNumber,
+  IconButton,
+} from "@chakra-ui/react"
+import { ToggleTip } from "compositions/ui/toggle-tip"
+import { forwardRef } from "react"
+import { HiOutlineInformationCircle } from "react-icons/hi"
+
+interface StatLabelProps extends ChakraStat.LabelProps {
+  info?: React.ReactNode
+}
+
+export const StatLabel = forwardRef<HTMLDivElement, StatLabelProps>(
+  function StatLabel(props, ref) {
+    const { info, children, ...rest } = props
+    return (
+      <ChakraStat.Label {...rest} ref={ref}>
+        {children}
+        {info && (
+          <ToggleTip content={info}>
+            <IconButton variant="ghost" aria-label="info" size="2xs">
+              <HiOutlineInformationCircle />
+            </IconButton>
+          </ToggleTip>
+        )}
+      </ChakraStat.Label>
+    )
+  },
+)
+
+interface StatValueTextProps extends ChakraStat.ValueTextProps {
+  value?: number
+  formatOptions?: Intl.NumberFormatOptions
+}
+
+export const StatValueText = forwardRef<HTMLDivElement, StatValueTextProps>(
+  function StatValueText(props, ref) {
+    const { value, formatOptions, children, ...rest } = props
+    return (
+      <ChakraStat.ValueText {...rest} ref={ref}>
+        {children ||
+          (value != null && <FormatNumber value={value} {...formatOptions} />)}
+      </ChakraStat.ValueText>
+    )
+  },
+)
+
+export const StatUpTrend = forwardRef<HTMLDivElement, BadgeProps>(
+  function StatUpTrend(props, ref) {
+    return (
+      <Badge colorPalette="green" gap="0" {...props} ref={ref}>
+        <ChakraStat.UpIndicator />
+        {props.children}
+      </Badge>
+    )
+  },
+)
+
+export const StatDownTrend = forwardRef<HTMLDivElement, BadgeProps>(
+  function StatDownTrend(props, ref) {
+    return (
+      <Badge colorPalette="red" gap="0" {...props} ref={ref}>
+        <ChakraStat.DownIndicator />
+        {props.children}
+      </Badge>
+    )
+  },
+)
+
+export const StatRoot = ChakraStat.Root
+export const StatHelpText = ChakraStat.HelpText
+export const StatValueUnit = ChakraStat.ValueUnit

package/src/components/status.tsx

@@ -0,0 +1,29 @@
+import type { ColorPalette } from "@chakra-ui/react"
+import { Status as ChakraStatus } from "@chakra-ui/react"
+import { forwardRef } from "react"
+
+type StatusValue = "success" | "error" | "warning" | "info"
+
+export interface StatusProps extends ChakraStatus.RootProps {
+  value?: StatusValue
+}
+
+const statusMap: Record<StatusValue, ColorPalette> = {
+  success: "green",
+  error: "red",
+  warning: "orange",
+  info: "blue",
+}
+
+export const Status = forwardRef<HTMLDivElement, StatusProps>(
+  function Status(props, ref) {
+    const { children, value = "info", ...rest } = props
+    const colorPalette = rest.colorPalette ?? statusMap[value]
+    return (
+      <ChakraStatus.Root ref={ref} {...rest} colorPalette={colorPalette}>
+        <ChakraStatus.Indicator />
+        {children}
+      </ChakraStatus.Root>
+    )
+  },
+)

package/src/components/stepper-input.tsx

@@ -0,0 +1,49 @@
+import { HStack, IconButton, NumberInput } from "@chakra-ui/react"
+import { forwardRef } from "react"
+import { LuMinus, LuPlus } from "react-icons/lu"
+
+export interface StepperInputProps extends NumberInput.RootProps {
+  label?: React.ReactNode
+}
+
+export const StepperInput = forwardRef<HTMLDivElement, StepperInputProps>(
+  function StepperInput(props, ref) {
+    const { label, ...rest } = props
+    return (
+      <NumberInput.Root {...rest} unstyled ref={ref}>
+        {label && <NumberInput.Label>{label}</NumberInput.Label>}
+        <HStack gap="2">
+          <DecrementTrigger />
+          <NumberInput.ValueText textAlign="center" fontSize="lg" minW="3ch" />
+          <IncrementTrigger />
+        </HStack>
+      </NumberInput.Root>
+    )
+  },
+)
+
+const DecrementTrigger = forwardRef<
+  HTMLButtonElement,
+  NumberInput.DecrementTriggerProps
+>(function DecrementTrigger(props, ref) {
+  return (
+    <NumberInput.DecrementTrigger {...props} asChild ref={ref}>
+      <IconButton variant="outline" size="sm">
+        <LuMinus />
+      </IconButton>
+    </NumberInput.DecrementTrigger>
+  )
+})
+
+const IncrementTrigger = forwardRef<
+  HTMLButtonElement,
+  NumberInput.IncrementTriggerProps
+>(function IncrementTrigger(props, ref) {
+  return (
+    <NumberInput.IncrementTrigger {...props} asChild ref={ref}>
+      <IconButton variant="outline" size="sm">
+        <LuPlus />
+      </IconButton>
+    </NumberInput.IncrementTrigger>
+  )
+})

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/components/tag.tsx

@@ -0,0 +1,39 @@
+import { Tag as ChakraTag } from "@chakra-ui/react"
+import { forwardRef } from "react"
+
+export interface TagProps extends ChakraTag.RootProps {
+  startElement?: React.ReactNode
+  endElement?: React.ReactNode
+  onClose?: VoidFunction
+  closable?: boolean
+}
+
+export const Tag = forwardRef<HTMLSpanElement, TagProps>(
+  function Tag(props, ref) {
+    const {
+      startElement,
+      endElement,
+      onClose,
+      closable = !!onClose,
+      children,
+      ...rest
+    } = props
+
+    return (
+      <ChakraTag.Root ref={ref} {...rest}>
+        {startElement && (
+          <ChakraTag.StartElement>{startElement}</ChakraTag.StartElement>
+        )}
+        <ChakraTag.Label>{children}</ChakraTag.Label>
+        {endElement && (
+          <ChakraTag.EndElement>{endElement}</ChakraTag.EndElement>
+        )}
+        {closable && (
+          <ChakraTag.EndElement>
+            <ChakraTag.CloseTrigger onClick={onClose} />
+          </ChakraTag.EndElement>
+        )}
+      </ChakraTag.Root>
+    )
+  },
+)