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

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

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

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

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

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

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

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

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

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

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