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

package/src/compositions/radio-card.tsx

@@ -0,0 +1,57 @@
+import { RadioCard } from "@chakra-ui/react"
+import { Fragment, forwardRef } from "react"
+
+interface RadioCardItemProps extends RadioCard.ItemProps {
+  icon?: React.ReactElement
+  label?: React.ReactNode
+  description?: React.ReactNode
+  addon?: React.ReactNode
+  indicator?: React.ReactNode | null
+  indicatorPlacement?: "start" | "end" | "inside"
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
+}
+
+export const RadioCardItem = forwardRef<HTMLInputElement, RadioCardItemProps>(
+  function RadioCardItem(props, ref) {
+    const {
+      inputProps,
+      label,
+      description,
+      addon,
+      icon,
+      indicator = <RadioCard.ItemIndicator />,
+      indicatorPlacement = "end",
+      ...rest
+    } = props
+
+    const hasContent = label || description || icon
+    const ContentWrapper = indicator ? RadioCard.ItemContent : Fragment
+
+    return (
+      <RadioCard.Item {...rest}>
+        <RadioCard.ItemHiddenInput ref={ref} {...inputProps} />
+        <RadioCard.ItemControl>
+          {indicatorPlacement === "start" && indicator}
+          {hasContent && (
+            <ContentWrapper>
+              {icon}
+              {label && <RadioCard.ItemText>{label}</RadioCard.ItemText>}
+              {description && (
+                <RadioCard.ItemDescription>
+                  {description}
+                </RadioCard.ItemDescription>
+              )}
+              {indicatorPlacement === "inside" && indicator}
+            </ContentWrapper>
+          )}
+          {indicatorPlacement === "end" && indicator}
+        </RadioCard.ItemControl>
+        {addon && <RadioCard.ItemAddon>{addon}</RadioCard.ItemAddon>}
+      </RadioCard.Item>
+    )
+  },
+)
+
+export const RadioCardRoot = RadioCard.Root
+export const RadioCardLabel = RadioCard.Label
+export const RadioCardItemIndicator = RadioCard.ItemIndicator

package/src/compositions/radio.tsx

@@ -0,0 +1,24 @@
+import { RadioGroup as ChakraRadioGroup } from "@chakra-ui/react"
+import { forwardRef } from "react"
+
+export interface RadioProps extends ChakraRadioGroup.ItemProps {
+  rootRef?: React.Ref<HTMLDivElement>
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
+}
+
+export const Radio = forwardRef<HTMLInputElement, RadioProps>(
+  function Radio(props, ref) {
+    const { children, inputProps, rootRef, ...rest } = props
+    return (
+      <ChakraRadioGroup.Item ref={rootRef} {...rest}>
+        <ChakraRadioGroup.ItemHiddenInput ref={ref} {...inputProps} />
+        <ChakraRadioGroup.ItemIndicator />
+        {children && (
+          <ChakraRadioGroup.ItemText>{children}</ChakraRadioGroup.ItemText>
+        )}
+      </ChakraRadioGroup.Item>
+    )
+  },
+)
+
+export const RadioGroup = ChakraRadioGroup.Root

package/src/compositions/rating.tsx

@@ -0,0 +1,27 @@
+import { RatingGroup } from "@chakra-ui/react"
+import { forwardRef } from "react"
+
+export interface RatingProps extends RatingGroup.RootProps {
+  icon?: React.ReactElement
+  count?: number
+  label?: React.ReactNode
+}
+
+export const Rating = forwardRef<HTMLDivElement, RatingProps>(
+  function Rating(props, ref) {
+    const { icon, count = 5, label, ...rest } = props
+    return (
+      <RatingGroup.Root ref={ref} count={count} {...rest}>
+        {label && <RatingGroup.Label>{label}</RatingGroup.Label>}
+        <RatingGroup.HiddenInput />
+        <RatingGroup.Control>
+          {Array.from({ length: count }).map((_, index) => (
+            <RatingGroup.Item key={index} index={index + 1}>
+              <RatingGroup.ItemIndicator icon={icon} />
+            </RatingGroup.Item>
+          ))}
+        </RatingGroup.Control>
+      </RatingGroup.Root>
+    )
+  },
+)

package/src/compositions/segmented-control.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import { For, SegmentGroup } from "@chakra-ui/react"
+import { forwardRef, useMemo } from "react"
+
+interface Item {
+  value: string
+  label: React.ReactNode
+  disabled?: boolean
+}
+
+export interface SegmentedControlProps extends SegmentGroup.RootProps {
+  items: Array<string | Item>
+}
+
+function normalize(items: Array<string | Item>): Item[] {
+  return items.map((item) => {
+    if (typeof item === "string") return { value: item, label: item }
+    return item
+  })
+}
+
+export const SegmentedControl = forwardRef<
+  HTMLDivElement,
+  SegmentedControlProps
+>(function SegmentedControl(props, ref) {
+  const { items, ...rest } = props
+  const data = useMemo(() => normalize(items), [items])
+
+  return (
+    <SegmentGroup.Root ref={ref} {...rest}>
+      <SegmentGroup.Indicator />
+      <For each={data}>
+        {(item) => (
+          <SegmentGroup.Item
+            key={item.value}
+            value={item.value}
+            disabled={item.disabled}
+          >
+            <SegmentGroup.ItemText>{item.label}</SegmentGroup.ItemText>
+            <SegmentGroup.ItemHiddenInput />
+          </SegmentGroup.Item>
+        )}
+      </For>
+    </SegmentGroup.Root>
+  )
+})

package/src/compositions/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/compositions/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/compositions/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/compositions/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/compositions/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/compositions/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>
+    )
+  },
+)

package/src/compositions/timeline.tsx

@@ -0,0 +1,17 @@
+import { Timeline as ChakraTimeline } from "@chakra-ui/react"
+
+export const TimelineRoot = ChakraTimeline.Root
+export const TimelineContent = ChakraTimeline.Content
+export const TimelineItem = ChakraTimeline.Item
+export const TimelineIndicator = ChakraTimeline.Indicator
+export const TimelineTitle = ChakraTimeline.Title
+export const TimelineDescription = ChakraTimeline.Description
+
+export const TimelineConnector = (props: ChakraTimeline.IndicatorProps) => {
+  return (
+    <ChakraTimeline.Connector>
+      <ChakraTimeline.Separator />
+      <ChakraTimeline.Indicator {...props} />
+    </ChakraTimeline.Connector>
+  )
+}

package/src/compositions/toaster.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import {
+  Toaster as ChakraToaster,
+  Portal,
+  Spinner,
+  Stack,
+  Toast,
+  createToaster,
+} from "@chakra-ui/react"
+
+export const toaster = createToaster({
+  placement: "bottom-end",
+  pauseOnPageIdle: true,
+})
+
+export const Toaster = () => {
+  return (
+    <Portal>
+      <ChakraToaster toaster={toaster} insetInline={{ mdDown: "4" }}>
+        {(toast) => (
+          <Toast.Root width={{ md: "sm" }}>
+            {toast.type === "loading" ? (
+              <Spinner size="sm" color="blue.solid" />
+            ) : (
+              <Toast.Indicator />
+            )}
+            <Stack gap="1" flex="1" maxWidth="100%">
+              {toast.title && <Toast.Title>{toast.title}</Toast.Title>}
+              {toast.description && (
+                <Toast.Description>{toast.description}</Toast.Description>
+              )}
+            </Stack>
+            {toast.action && (
+              <Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>
+            )}
+            {toast.meta?.closable && <Toast.CloseTrigger />}
+          </Toast.Root>
+        )}
+      </ChakraToaster>
+    </Portal>
+  )
+}

package/src/compositions/toggle-tip.tsx

@@ -0,0 +1,62 @@
+import { Popover as ChakraPopover, IconButton, Portal } from "@chakra-ui/react"
+import { forwardRef } from "react"
+import { HiOutlineInformationCircle } from "react-icons/hi"
+
+export interface ToggleTipProps extends ChakraPopover.RootProps {
+  showArrow?: boolean
+  portalled?: boolean
+  portalRef?: React.RefObject<HTMLElement>
+  content?: React.ReactNode
+}
+
+export const ToggleTip = forwardRef<HTMLDivElement, ToggleTipProps>(
+  function ToggleTip(props, ref) {
+    const {
+      showArrow,
+      children,
+      portalled = true,
+      content,
+      portalRef,
+      ...rest
+    } = props
+
+    return (
+      <ChakraPopover.Root
+        {...rest}
+        positioning={{ ...rest.positioning, gutter: 4 }}
+      >
+        <ChakraPopover.Trigger asChild>{children}</ChakraPopover.Trigger>
+        <Portal disabled={!portalled} container={portalRef}>
+          <ChakraPopover.Positioner>
+            <ChakraPopover.Content
+              width="auto"
+              px="2"
+              py="1"
+              textStyle="xs"
+              rounded="sm"
+              ref={ref}
+            >
+              {showArrow && (
+                <ChakraPopover.Arrow>
+                  <ChakraPopover.ArrowTip />
+                </ChakraPopover.Arrow>
+              )}
+              {content}
+            </ChakraPopover.Content>
+          </ChakraPopover.Positioner>
+        </Portal>
+      </ChakraPopover.Root>
+    )
+  },
+)
+
+export const InfoTip = (props: Partial<ToggleTipProps>) => {
+  const { children, ...rest } = props
+  return (
+    <ToggleTip content={children} {...rest}>
+      <IconButton variant="ghost" aria-label="info" size="2xs">
+        <HiOutlineInformationCircle />
+      </IconButton>
+    </ToggleTip>
+  )
+}

package/src/compositions/tooltip.tsx

@@ -0,0 +1,46 @@
+import { Tooltip as ChakraTooltip, Portal } from "@chakra-ui/react"
+import { forwardRef } from "react"
+
+export interface TooltipProps extends ChakraTooltip.RootProps {
+  showArrow?: boolean
+  portalled?: boolean
+  portalRef?: React.RefObject<HTMLElement>
+  content: React.ReactNode
+  contentProps?: ChakraTooltip.ContentProps
+  disabled?: boolean
+}
+
+export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
+  function Tooltip(props, ref) {
+    const {
+      showArrow,
+      children,
+      disabled,
+      portalled,
+      content,
+      contentProps,
+      portalRef,
+      ...rest
+    } = props
+
+    if (disabled) return children
+
+    return (
+      <ChakraTooltip.Root {...rest}>
+        <ChakraTooltip.Trigger asChild>{children}</ChakraTooltip.Trigger>
+        <Portal disabled={!portalled} container={portalRef}>
+          <ChakraTooltip.Positioner>
+            <ChakraTooltip.Content ref={ref} {...contentProps}>
+              {showArrow && (
+                <ChakraTooltip.Arrow>
+                  <ChakraTooltip.ArrowTip />
+                </ChakraTooltip.Arrow>
+              )}
+              {content}
+            </ChakraTooltip.Content>
+          </ChakraTooltip.Positioner>
+        </Portal>
+      </ChakraTooltip.Root>
+    )
+  },
+)

package/src/index.ts

@@ -1,8 +1,7 @@
 export * from '@saas-ui/core'
-export * from '@saas-ui/hooks'
-export * from '@saas-ui/theme'
-export * from '@saas-ui/nprogress'
-export * from '@saas-ui/modals'
-export * from '@saas-ui/data-table'
-export * from '@saas-ui/hotkeys'
-export * from '@saas-ui/forms'
+
+export { defaultSystem, defaultConfig } from './preset.ts'
+export { createSystem } from '@chakra-ui/react'
+
+export { SuiProvider, SuiContext, useLink, useSui } from './provider/index.ts'
+export type { SuiContextValue, SuiProviderProps } from './provider/index.ts'

package/src/preset.ts

@@ -0,0 +1,9 @@
+import { createSystem, defaultBaseConfig, mergeConfigs } from '@chakra-ui/react'
+
+import { defaultThemeConfig } from './theme'
+
+export const defaultConfig = mergeConfigs(defaultBaseConfig, defaultThemeConfig)
+
+export const defaultSystem = createSystem(defaultConfig)
+
+export { defaultSystem as system }

package/src/provider/index.ts

@@ -0,0 +1,4 @@
+export { SuiContext, SuiProvider, useSui } from './sui-provider'
+export type { SuiContextValue, SuiProviderProps } from './sui-provider'
+
+export { useLink } from './use-link'