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

package/src/components/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/components/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/components/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/components/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'

package/src/provider/sui-provider.tsx

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

package/src/provider/use-link.test.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react'
+import { hooks, render } from '@saas-ui/test-utils'
+
+import { SaasProvider, useLink } from './index'
+
+const DummyComponent = ({ href = '' }) => {
+  const LinkWrapper = useLink()
+
+  if (LinkWrapper) {
+    return (
+      <LinkWrapper href={href}>
+        <a>Link</a>
+      </LinkWrapper>
+    )
+  }
+  return <a>Link</a>
+}
+
+const Link = ({
+  href = '',
+  children,
+}: {
+  href: string
+  children: React.ReactNode
+}) => {
+  return (
+    <>
+      {React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+          return React.cloneElement<any>(child, {
+            href,
+          })
+        }
+        return child
+      })}
+    </>
+  )
+}
+
+const renderLink = (ui: React.ReactNode) => {
+  return render(<SaasProvider linkComponent={Link}>{ui}</SaasProvider>, {
+    withSaasProvider: false,
+  })
+}
+
+test('it should not throw without context', () => {
+  const { result } = hooks.render(() => useLink())
+})
+
+test('it should render', () => {
+  const { getByText } = renderLink(<DummyComponent />)
+
+  expect(getByText('Link')).toBeInTheDocument()
+})
+
+test('it should render with href', () => {
+  const { getByText } = renderLink(<DummyComponent href="/test" />)
+
+  expect(getByText('Link')).toHaveAttribute('href', '/test')
+})

package/src/provider/use-link.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+import { chakra } from '@chakra-ui/react'
+
+import { useSui } from './sui-provider'
+
+export function useLink(): React.ElementType {
+  const context = useSui()
+  if (context?.linkComponent) {
+    return context.linkComponent
+  }
+  return chakra.a
+}

package/src/theme/animation-styles.ts

@@ -0,0 +1,53 @@
+import { defineAnimationStyles } from '@chakra-ui/react'
+
+export const animationStyles: any = defineAnimationStyles({
+  'slide-fade-in': {
+    value: {
+      transformOrigin: 'var(--transform-origin)',
+      '&[data-placement^=top]': {
+        animationName: 'slide-from-bottom, fade-in',
+      },
+      '&[data-placement^=bottom]': {
+        animationName: 'slide-from-top, fade-in',
+      },
+      '&[data-placement^=left]': {
+        animationName: 'slide-from-right, fade-in',
+      },
+      '&[data-placement^=right]': {
+        animationName: 'slide-from-left, fade-in',
+      },
+    },
+  },
+
+  'slide-fade-out': {
+    value: {
+      transformOrigin: 'var(--transform-origin)',
+      '&[data-placement^=top]': {
+        animationName: 'slide-to-bottom, fade-out',
+      },
+      '&[data-placement^=bottom]': {
+        animationName: 'slide-to-top, fade-out',
+      },
+      '&[data-placement^=left]': {
+        animationName: 'slide-to-right, fade-out',
+      },
+      '&[data-placement^=right]': {
+        animationName: 'slide-to-left, fade-out',
+      },
+    },
+  },
+
+  'scale-fade-in': {
+    value: {
+      transformOrigin: 'var(--transform-origin)',
+      animationName: 'scale-in, fade-in',
+    },
+  },
+
+  'scale-fade-out': {
+    value: {
+      transformOrigin: 'var(--transform-origin)',
+      animationName: 'scale-out, fade-out',
+    },
+  },
+})

package/src/theme/breakpoints.ts

@@ -0,0 +1,11 @@
+export const breakpointValues = {
+  sm: '480px',
+  md: '768px',
+  lg: '1024px',
+  xl: '1280px',
+  '2xl': '1536px',
+}
+
+export const breakpoints = Object.fromEntries(
+  Object.entries(breakpointValues).map(([key, value]) => [key, `${value}px`]),
+)

package/src/theme/conditions.ts

@@ -0,0 +1,26 @@
+import { defineConditions } from '@chakra-ui/react'
+
+export const conditions = defineConditions({
+  collapsible: '&:is([data-scope=collapsible])',
+  groupCollapsible:
+    '.group:is([data-scope=collapsible]) &, [role=group]:is([data-scope=collapsible]) &',
+  groupOpen:
+    '.group:is([data-state=open]) &, [role=group]:is([data-state=open]) &',
+  groupFocus:
+    '.group:is(:focus, [data-focus]) &, [role=group]:is(:focus, [data-focus]) &',
+  groupHover:
+    '.group:is(:hover, [data-hover]):not(:disabled, [data-disabled]) &, [role=group]:is(:hover, [data-hover]):not(:disabled, [data-disabled]) &',
+  groupActive:
+    '.group:is(:active, [data-active]):not(:disabled, [data-disabled]) &, [role=group]:is(:active, [data-active]):not(:disabled, [data-disabled]) &',
+  groupFocusWithin: '.group:focus-within &, [role=group]:focus-within &',
+  groupFocusVisible:
+    '.group:is(:focus-visible, [data-focus-visible]) &, [role=group]:is(:focus-visible, [data-focus-visible]) &',
+  groupDisabled:
+    '.group:is(:disabled, [disabled], [data-disabled]) &, [role=group]:is(:disabled, [disabled], [data-disabled]) &',
+  groupChecked:
+    '.group:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) &, [role=group]:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) &',
+  groupExpanded:
+    '.group:is([aria-expanded=true], [data-expanded], [data-state=expanded]) &, [role=group]:is([aria-expanded=true], [data-expanded], [data-state=expanded]) &',
+  groupInvalid: '.group:invalid &, [role=group]:invalid &',
+  parentHover: 'button:hover > &, a:hover > &',
+})

package/src/theme/fluid-font-sizes.ts

@@ -0,0 +1,65 @@
+// const fluidFontSizes = {
+//   'min-max': fluid({
+//     property: 'fluid-text-size',
+//     from: breakpointValues.sm,
+//     to: breakpointValues['2xl'],
+//     divider: 1,
+//   }),
+// }
+
+// 'fluid-text-size': {
+//   'min-max': fluid({ property: 'fluid-text-size', from: BP_SM, to: BP_2XL, divider: 1 }),
+//   'sm-md': fluid({ property: 'fluid-text-size', from: BP_SM, to: BP_MD, divider: 1 }),
+//   'sm-lg': fluid({ property: 'fluid-text-size', from: BP_SM, to: BP_LG, divider: 1 }),
+//   'sm-xl': fluid({ property: 'fluid-text-size', from: BP_SM, to: BP_XL, divider: 1 }),
+//   'md-lg': fluid({ property: 'fluid-text-size', from: BP_MD, to: BP_LG, divider: 1 }),
+//   'md-xl': fluid({ property: 'fluid-text-size', from: BP_MD, to: BP_XL, divider: 1 }),
+//   'md-2xl': fluid({ property: 'fluid-text-size', from: BP_MD, to: BP_2XL, divider: 1 }),
+//   'lg-xl': fluid({ property: 'fluid-text-size', from: BP_LG, to: BP_XL, divider: 1 }),
+//   'lg-2xl': fluid({ property: 'fluid-text-size', from: BP_LG, to: BP_2XL, divider: 1 }),
+// },
+
+// {
+//   utilities: {
+//     fluidFontSize: {
+//       shorthand: ['fluidFontSize'],
+//       transform(value, args) {
+//         console.log(value, args)
+//         const val = 'min-max(sm, lg)'
+
+//         const match = val.match(/(\w+-\w+)\((\w+),\s*(\w+)\)/)
+
+//         if (!match) {
+//           return {}
+//         }
+
+//         const [, breakpoints, min, max] = match
+//         console.log(match)
+//         const minSize = args.token.raw(`fontSizes.${min}`)?.value
+//         const maxSize = args.token.raw(`fontSizes.${max}`)?.value
+//         console.log(minSize, maxSize)
+//         return {
+//           fontSize: `var(--fluid-text-size-${breakpoints})`,
+//           '--fluid-text-size-min': minSize,
+//           '--fluid-text-size-max': maxSize,
+//         }
+//       },
+//     },
+//     fluidFontSizeMin: {
+//       shorthand: ['fluidFontSizeMin'],
+//       transform(value, args) {
+//         return {
+//           '--fluid-text-size-min': value,
+//         }
+//       },
+//     },
+//     fluidFontSizeMax: {
+//       shorthand: ['fluidFontSizeMax'],
+//       transform(value, args) {
+//         return {
+//           '--fluid-text-size-max': value,
+//         }
+//       },
+//     },
+//   },
+// },

package/src/theme/global-css.ts

@@ -0,0 +1,94 @@
+import { defineGlobalStyles } from '@chakra-ui/react'
+
+const empty = 'var(--chakra-empty,/*!*/ /*!*/)'
+
+export const globalCss = defineGlobalStyles({
+  '*': {
+    fontFeatureSettings: '"cv11"',
+    '--ring-inset': empty,
+    '--ring-offset-width': '0px',
+    '--ring-offset-color': '#fff',
+    '--ring-color': 'rgba(66, 153, 225, 0.6)',
+    '--ring-offset-shadow': '0 0 #0000',
+    '--ring-shadow': '0 0 #0000',
+    ...Object.fromEntries(
+      [
+        'brightness',
+        'contrast',
+        'grayscale',
+        'hue-rotate',
+        'invert',
+        'saturate',
+        'sepia',
+        'drop-shadow',
+      ].map((prop) => [`--${prop}`, empty]),
+    ),
+    ...Object.fromEntries(
+      [
+        'blur',
+        'brightness',
+        'contrast',
+        'grayscale',
+        'hue-rotate',
+        'invert',
+        'opacity',
+        'saturate',
+        'sepia',
+      ].map((prop) => [`--backdrop-${prop}`, empty]),
+    ),
+    '--global-font-mono': 'fonts.mono',
+    '--global-font-body': 'fonts.body',
+    '--global-color-border': 'colors.border',
+    '--cursor-button': 'default',
+    '--radius-factor': '1',
+    '--radius-full': '9999px',
+    '--scale-factor': '1',
+  },
+  body: {
+    color: 'fg',
+    bg: 'bg',
+    lineHeight: '1.5',
+    colorPalette: 'accent',
+  },
+  '*::placeholder': {
+    color: 'fg.subtle',
+  },
+  '*::selection': {
+    bg: 'colorPalette.muted/80',
+  },
+  '[data-radius="none"]': {
+    '--radius-factor': '0',
+    '--radius-full': '0',
+  },
+  '[data-radius="sm"]': {
+    '--radius-factor': '0.9',
+    '--radius-full': '0',
+  },
+  '[data-radius="md"]': {
+    '--radius-factor': '1',
+    '--radius-full': '0',
+  },
+  '[data-radius="lg"]': {
+    '--radius-factor': '1.5',
+    '--radius-full': '0',
+  },
+  '[data-radius="full"]': {
+    '--radius-factor': '1.5',
+    '--radius-full': '9999px',
+  },
+  '[data-scale="xs"]': {
+    '--scale-factor': '0.9',
+  },
+  '[data-scale="sm"]': {
+    '--scale-factor': '0.95',
+  },
+  '[data-scale="md"]': {
+    '--scale-factor': '1',
+  },
+  '[data-scale="lg"]': {
+    '--scale-factor': '1.05',
+  },
+  '[data-scale="xl"]': {
+    '--scale-factor': '1.1',
+  },
+})

package/src/theme/index.ts

@@ -0,0 +1,72 @@
+import { defineConfig } from '@chakra-ui/react'
+
+import { animationStyles } from './animation-styles'
+import { breakpoints } from './breakpoints'
+import { conditions } from './conditions'
+import { globalCss } from './global-css'
+import { layerStyles } from './layer-styles'
+import { recipes } from './recipes'
+import { semanticColors } from './semantic-tokens/colors'
+import { semanticRadii } from './semantic-tokens/radii'
+import { semanticShadows } from './semantic-tokens/shadows'
+import { slotRecipes } from './slot-recipes'
+import { textStyles } from './text-styles'
+import { animations } from './tokens/animations'
+import { aspectRatios } from './tokens/aspect-ratios'
+import { blurs } from './tokens/blurs'
+import { borders } from './tokens/borders'
+import { colors } from './tokens/colors'
+import { cursor } from './tokens/cursor'
+import { durations } from './tokens/durations'
+import { easings } from './tokens/easings'
+import { fontSizes } from './tokens/font-sizes'
+import { fontWeights } from './tokens/font-weights'
+import { fonts } from './tokens/fonts'
+import { keyframes } from './tokens/keyframes'
+import { letterSpacings } from './tokens/letter-spacing'
+import { lineHeights } from './tokens/line-heights'
+import { radii } from './tokens/radius'
+import { sizes } from './tokens/sizes'
+import { spacing } from './tokens/spacing'
+import { zIndices } from './tokens/z-indices'
+
+export const defaultThemeConfig = defineConfig({
+  preflight: true,
+  cssVarsPrefix: 'chakra',
+  cssVarsRoot: ':where(html, .chakra-theme)',
+  globalCss: globalCss,
+  theme: {
+    breakpoints: breakpoints,
+    keyframes: keyframes,
+    tokens: {
+      animations,
+      aspectRatios,
+      blurs,
+      borders,
+      colors,
+      durations,
+      easings,
+      fonts,
+      fontSizes,
+      fontWeights,
+      letterSpacings,
+      lineHeights,
+      radii,
+      spacing,
+      sizes,
+      zIndex: zIndices,
+      cursor,
+    },
+    semanticTokens: {
+      colors: semanticColors,
+      radii: semanticRadii,
+      shadows: semanticShadows,
+    },
+    recipes: recipes,
+    slotRecipes: slotRecipes,
+    textStyles: textStyles,
+    layerStyles: layerStyles,
+    animationStyles: animationStyles,
+  },
+  conditions,
+})