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

package/src/compositions/radio-card.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,46 +0,0 @@
-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,7 +0,0 @@
-export * from '@saas-ui/core'
-
-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

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

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

package/src/provider/sui-provider.tsx

@@ -1,34 +0,0 @@
-import * as React from 'react'
-
-import { ChakraProvider, ChakraProviderProps } from '@chakra-ui/react'
-
-export interface SuiContextValue {
-  linkComponent?: React.ElementType<any>
-}
-
-export const SuiContext = React.createContext<SuiContextValue>({})
-
-export interface SuiProviderProps extends ChakraProviderProps {
-  linkComponent?: React.ElementType<any>
-  children: React.ReactNode
-  onError?: (error: Error, errorInfo: React.ErrorInfo) => void
-}
-
-export function SuiProvider(props: SuiProviderProps) {
-  const { linkComponent, onError, children, ...rest } = props
-
-  const context = React.useMemo(
-    () => ({
-      linkComponent,
-    }),
-    [],
-  )
-
-  return (
-    <SuiContext.Provider value={context}>
-      <ChakraProvider {...rest}>{children}</ChakraProvider>
-    </SuiContext.Provider>
-  )
-}
-
-export const useSui = (): SuiContextValue => React.useContext(SuiContext)