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

package/package.json

@@ -1,24 +1,33 @@
 {
   "name": "@saas-ui/react",
-  "version": "2.11.2",
+  "version": "3.0.0-alpha.1",
   "description": "Saas UI - The React component library for startups.",
+  "source": "src/index.ts",
+  "type": "module",
   "exports": {
     ".": {
+      "sui": "./src/index.ts",
       "types": "./dist/index.d.ts",
-      "require": "./dist/index.js",
-      "import": "./dist/index.mjs"
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
     },
-    "./src": {
-      "default": "./src/index.ts"
+    "./*": {
+      "sui": "./src/components/*/index.ts",
+      "types": "./dist/components/*/index.d.ts",
+      "require": "./dist/components/*/index.cjs",
+      "import": "./dist/components/*/index.js"
     }
   },
-  "source": "src/index.ts",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
+  "imports": {
+    "#system": "./src/system",
+    "#components/*": "./src/components/*"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "scripts": {
     "clean": "rimraf --no-glob ./dist",
-    "build": "tsup src/index.ts --config tsup.config.ts",
+    "build": "NODE_OPTIONS='--max-old-space-size=16384' tsup --config tsup.config.ts",
     "lint": "eslint src --ext .ts,.tsx,.js,.jsx --config ../../.eslintrc.js",
     "lint:staged": "lint-staged --allow-empty --config ../../lint-staged.config.js",
     "typecheck": "tsc --noEmit"
@@ -31,7 +40,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "author": "Eelco Wiersma <eelco@appulse.nl>",
+  "author": "Eelco Wiersma <eelco@saas-ui.dev>",
   "license": "MIT",
   "homepage": "https://saas-ui.dev/",
   "repository": {
@@ -56,22 +65,17 @@
     "url": "https://storybook.saas-ui.dev"
   },
   "dependencies": {
-    "@chakra-ui/utils": "^2.2.3",
-    "@saas-ui/core": "2.8.1",
-    "@saas-ui/data-table": "13.0.2",
-    "@saas-ui/forms": "2.9.1",
-    "@saas-ui/hooks": "2.3.0",
-    "@saas-ui/hotkeys": "2.5.1",
-    "@saas-ui/modals": "2.4.2",
-    "@saas-ui/nprogress": "2.2.1",
-    "@saas-ui/theme": "2.6.1"
+    "@saas-ui/core": "3.0.0-alpha.1",
+    "@saas-ui/hooks": "3.0.0-alpha.1"
   },
   "peerDependencies": {
-    "@chakra-ui/react": ">=2.9.0 <3",
+    "@chakra-ui/react": "^3.0.0",
     "@emotion/react": "^11",
-    "@emotion/styled": "^11",
-    "framer-motion": ">=5.5.0",
     "react": ">=18",
     "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "react-icons": "^5.3.0",
+    "tsup": "^8.3.5"
   }
 }

package/src/components/app-shell/app-shell.recipe.ts

@@ -0,0 +1,52 @@
+import { defineSlotRecipe } from '@chakra-ui/react'
+
+export const appShellSlotRecipe = defineSlotRecipe({
+  className: 'sui-app-shell',
+  slots: ['root', 'content', 'main'],
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+    },
+    content: {
+      display: 'flex',
+      flex: 1,
+      minWidth: 0,
+      minHeight: 0,
+    },
+    main: {
+      display: 'flex',
+      flex: 1,
+      flexDirection: 'column',
+      minWidth: 0,
+    },
+  },
+  variants: {
+    position: {
+      static: {
+        root: {
+          height: '100vh',
+        },
+      },
+      fullscreen: {
+        root: {
+          position: 'fixed',
+          inset: 0,
+        },
+      },
+    },
+    variant: {
+      plain: {},
+      raised: {
+        main: {
+          boxShadow: 'xs',
+          zIndex: 'layer-1',
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    position: 'static',
+    variant: 'raised',
+  },
+})

package/src/components/app-shell/app-shell.stories.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react'
+
+import { Box } from '@chakra-ui/react'
+import type { Meta } from '@storybook/react'
+
+import { useAppShellStyles } from './app-shell.tsx'
+import { AppShell } from './index.ts'
+
+export default {
+  title: 'Components/AppShell',
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as Meta
+
+export const FullscreenVariant = {
+  render: () => (
+    <AppShell
+      header={
+        <Box height="40px" borderBottomWidth="1px" p="2">
+          Header
+        </Box>
+      }
+      sidebar={
+        <Box width="200px" borderRightWidth="1px" p="2">
+          Sidebar
+        </Box>
+      }
+      aside={
+        <Box width="200px" borderLeftWidth="1px" p="2">
+          Aside
+        </Box>
+      }
+      footer={
+        <Box height="40px" borderTopWidth="1px" p="2">
+          Footer
+        </Box>
+      }
+    >
+      <Box p="2">Content</Box>
+    </AppShell>
+  ),
+}
+
+function Test() {
+  const styles = useAppShellStyles()
+
+  console.log(styles)
+
+  return null
+}

package/src/components/app-shell/app-shell.tsx

@@ -0,0 +1,94 @@
+'use client'
+
+import { forwardRef } from 'react'
+
+import {
+  type HTMLChakraProps,
+  type SlotRecipeProps,
+  createSlotRecipeContext,
+} from '@chakra-ui/react'
+
+////////////////////////////////////////////////////////////////////////////////////
+
+const {
+  withProvider,
+  withContext,
+  useStyles: useAppShellStyles,
+} = createSlotRecipeContext({
+  key: 'appShell',
+})
+
+export { useAppShellStyles }
+
+export interface AppShellProps extends HTMLChakraProps<'div'> {
+  /**
+   * The top header navigation
+   */
+  header?: React.ReactNode
+  /**
+   * Main sidebar, positioned on the left
+   */
+  sidebar?: React.ReactElement
+  /**
+   * Secondary sidebar, positioned on the right
+   */
+  aside?: React.ReactNode
+  /**
+   * The footer
+   */
+  footer?: React.ReactNode
+  /**
+   * The main content
+   */
+  children: React.ReactNode
+}
+
+export interface AppShellRootProps
+  extends AppShellProps,
+    SlotRecipeProps<'appShell'> {}
+
+/**
+ * The App Shell defines the main structure of your app.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/layout/app-shell
+ */
+export const AppShellRoot = withProvider<HTMLDivElement, AppShellRootProps>(
+  'div',
+  'root',
+  { forwardAsChild: true },
+)
+
+export interface AppShellContentProps extends HTMLChakraProps<'div'> {}
+
+export const AppShellContent = withContext<
+  HTMLDivElement,
+  AppShellContentProps
+>('div', 'content', { forwardAsChild: true })
+
+export interface AppShellMainProps extends HTMLChakraProps<'div'> {}
+
+export const AppShellMain = withContext<HTMLDivElement, AppShellMainProps>(
+  'div',
+  'main',
+  { forwardAsChild: true },
+)
+
+export const AppShell = forwardRef<HTMLDivElement, AppShellRootProps>(
+  (props, ref) => {
+    const { header, sidebar, aside, footer, children, ...rootProps } = props
+
+    return (
+      <AppShellRoot ref={ref} {...rootProps}>
+        {header}
+        <AppShellContent>
+          {sidebar}
+          <AppShellMain>{children}</AppShellMain>
+          {aside}
+        </AppShellContent>
+        {footer}
+      </AppShellRoot>
+    )
+  },
+)
+
+AppShell.displayName = 'AppShell'

package/src/components/app-shell/index.ts

@@ -0,0 +1,3 @@
+export { AppShell } from './app-shell'
+
+export type { AppShellProps } from './app-shell'

package/src/components/breadcrumbs/breadcrumb.stories.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import { Breadcrumb } from './index.ts'
+
+export default {
+  title: 'Components/Breadcrumbs',
+  component: Breadcrumb.Root,
+}
+
+export const Default = {
+  args: {
+    children: [
+      <Breadcrumb.Link href="/">Home</Breadcrumb.Link>,
+      <Breadcrumb.CurrentLink>Contact</Breadcrumb.CurrentLink>,
+    ],
+  },
+}

package/src/components/breadcrumbs/breadcrumb.tsx

@@ -0,0 +1,36 @@
+import { Children, Fragment, forwardRef, isValidElement } from 'react'
+
+import { Breadcrumb, type SystemStyleObject } from '@chakra-ui/react'
+
+export interface BreadcrumbRootProps extends Breadcrumb.RootProps {
+  separator?: React.ReactNode
+  separatorGap?: SystemStyleObject['gap']
+}
+
+export const BreadcrumbRoot = forwardRef<HTMLDivElement, BreadcrumbRootProps>(
+  function BreadcrumbRoot(props, ref) {
+    const { separator = '/', separatorGap, children, ...rest } = props
+    const validChildren = Children.toArray(children).filter(isValidElement)
+    return (
+      <Breadcrumb.Root ref={ref} {...rest}>
+        <Breadcrumb.List gap={separatorGap}>
+          {validChildren.map((child, index) => {
+            const last = index === validChildren.length - 1
+            return (
+              <Fragment key={index}>
+                <Breadcrumb.Item>{child}</Breadcrumb.Item>
+                {!last && (
+                  <Breadcrumb.Separator>{separator}</Breadcrumb.Separator>
+                )}
+              </Fragment>
+            )
+          })}
+        </Breadcrumb.List>
+      </Breadcrumb.Root>
+    )
+  },
+)
+
+export const BreadcrumbLink = Breadcrumb.Link
+export const BreadcrumbCurrentLink = Breadcrumb.CurrentLink
+export const BreadcrumbEllipsis = Breadcrumb.Ellipsis

package/src/components/breadcrumbs/index.ts

@@ -0,0 +1 @@
+export * as Breadcrumb from './namespace.ts'

package/src/components/breadcrumbs/namespace.ts

@@ -0,0 +1,8 @@
+export {
+  BreadcrumbRoot as Root,
+  BreadcrumbLink as Link,
+  BreadcrumbCurrentLink as CurrentLink,
+  BreadcrumbEllipsis as Ellipsis,
+} from './breadcrumb.tsx'
+
+export type { BreadcrumbRootProps } from './breadcrumb.tsx'

package/src/components/button/button.recipe.ts

@@ -0,0 +1,182 @@
+import { defineRecipe } from '@chakra-ui/react'
+
+export const buttonRecipe = defineRecipe({
+  className: 'chakra-button',
+  base: {
+    display: 'inline-flex',
+    appearance: 'none',
+    alignItems: 'center',
+    justifyContent: 'center',
+    userSelect: 'none',
+    position: 'relative',
+    whiteSpace: 'nowrap',
+    verticalAlign: 'middle',
+    cursor: 'pointer',
+    flexShrink: '0',
+    outline: '0',
+    lineHeight: '1.2',
+    isolation: 'isolate',
+    fontWeight: 'medium',
+    transitionProperty: 'common',
+    transitionDuration: 'moderate',
+    focusVisibleRing: 'outside',
+    _disabled: {
+      layerStyle: 'disabled',
+    },
+    _icon: {
+      fontSize: '1em',
+      flexShrink: 0,
+    },
+  },
+
+  variants: {
+    size: {
+      xs: {
+        gap: '1',
+        h: '6',
+        minW: '6',
+        textStyle: 'xs',
+        borderRadius: 'sm',
+        px: '2',
+      },
+      sm: {
+        gap: '2',
+        h: '7',
+        minW: '8',
+        textStyle: 'sm',
+        borderRadius: 'md',
+        px: '3',
+      },
+      md: {
+        gap: '2',
+        h: '8',
+        minW: '8',
+        borderRadius: 'md',
+        textStyle: 'sm',
+        px: '4',
+      },
+      lg: {
+        gap: '3',
+        h: '10',
+        minW: '10',
+        borderRadius: 'lg',
+        textStyle: 'md',
+        px: '5',
+      },
+      xl: {
+        gap: '3',
+        h: '12',
+        minW: '12',
+        borderRadius: 'lg',
+        textStyle: 'lg',
+        px: '6',
+      },
+    },
+
+    variant: {
+      solid: {
+        bg: 'colorPalette.solid',
+        boxShadow: 'sm',
+        color: 'colorPalette.contrast',
+        _hover: {
+          bg: 'colorPalette.solid/90',
+        },
+        _expanded: {
+          bg: 'colorPalette.solid/90',
+        },
+      },
+
+      subtle: {
+        bg: 'colorPalette.muted',
+        color: 'colorPalette.fg',
+        _hover: {
+          bg: 'colorPalette.subtle',
+        },
+        _expanded: {
+          bg: 'colorPalette.subtle',
+        },
+      },
+
+      glass: {
+        bg: 'colorPalette.solid',
+        color: 'colorPalette.contrast',
+        '--btn-shadow': 'shadows.sm',
+        boxShadow:
+          '0 0 0 1px rgba(0,0,0,0.4) inset, 0px 2px 0px 0px rgba(255,255,255,0.2) inset, var(--btn-shadow)',
+        textShadow: '0 1px 2px rgba(0,0,0,0.3)',
+        _after: {
+          content: '""',
+          position: 'absolute',
+          top: '0',
+          left: '0',
+          right: '0',
+          bottom: '0',
+          background: 'linear-gradient(180deg, white 40%, rgba(0,0,0,0.2))',
+          opacity: 0.2,
+          transitionProperty: 'opacity',
+          transitionDuration: 'moderate',
+          pointerEvents: 'none',
+        },
+        _hover: {
+          bg: 'colorPalette.solid',
+          _after: {
+            opacity: 0.24,
+          },
+        },
+        _expanded: {
+          bg: 'colorPalette.solid',
+          _after: {
+            opacity: 0.24,
+          },
+        },
+      },
+
+      surface: {
+        bg: 'colorPalette.surface',
+        borderWidth: '0.5px',
+        borderColor: 'colorPalette.emphasized',
+        color: 'colorPalette.fg',
+        shadow: 'sm',
+        shadowColor: 'colorPalette.emphasized',
+        _hover: {
+          bg: 'colorPalette.muted',
+        },
+        _expanded: {
+          bg: 'colorPalette.muted',
+        },
+      },
+
+      outline: {
+        borderWidth: '0.5px',
+        borderColor: 'colorPalette.emphasized',
+        color: 'colorPalette.fg',
+        _hover: {
+          bg: 'colorPalette.muted',
+        },
+        _expanded: {
+          bg: 'colorPalette.muted',
+        },
+      },
+
+      ghost: {
+        color: 'colorPalette.fg',
+        _hover: {
+          bg: 'colorPalette.muted',
+        },
+        _expanded: {
+          bg: 'colorPalette.muted',
+        },
+      },
+
+      plain: {
+        color: 'colorPalette.fg',
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+    variant: 'solid',
+    colorPalette: 'gray',
+  },
+})

package/src/components/button/button.stories.tsx

@@ -0,0 +1,99 @@
+import React from 'react'
+
+import { Box, HStack, Stack } from '@chakra-ui/react'
+
+import { Button } from './button.tsx'
+
+export default {
+  title: 'Components/Button',
+  component: Button,
+}
+
+export const Default = {
+  args: {
+    children: 'Default button',
+  },
+}
+
+export const Variants = {
+  render: () => (
+    <Stack gap="4">
+      <HStack>
+        <Button variant="glass" colorPalette="indigo">
+          Primary
+        </Button>
+        <Button variant="surface">Secondary</Button>
+      </HStack>
+      <HStack>
+        <Button variant="solid">Solid</Button>
+        <Button variant="glass">Glass</Button>
+        <Button variant="surface">Surface</Button>
+        <Button variant="outline">Outline</Button>
+        <Button variant="subtle">Subtle</Button>
+        <Button variant="ghost">Ghost</Button>
+      </HStack>
+      <HStack>
+        <Button variant="solid" colorPalette="neutral">
+          Solid
+        </Button>
+        <Button variant="glass" colorPalette="neutral">
+          Glass
+        </Button>
+        <Button variant="surface" colorPalette="neutral">
+          Surface
+        </Button>
+        <Button variant="outline" colorPalette="neutral">
+          Outline
+        </Button>
+        <Button variant="subtle" colorPalette="neutral">
+          Subtle
+        </Button>
+        <Button variant="ghost" colorPalette="neutral">
+          Ghost
+        </Button>
+      </HStack>
+      <HStack>
+        <Button variant="solid" colorPalette="blue">
+          Solid
+        </Button>
+        <Button variant="glass" colorPalette="blue">
+          Glass
+        </Button>
+        <Button variant="surface" colorPalette="blue">
+          Surface
+        </Button>
+        <Button variant="outline" colorPalette="blue">
+          Outline
+        </Button>
+        <Button variant="subtle" colorPalette="blue">
+          Subtle
+        </Button>
+        <Button variant="ghost" colorPalette="blue">
+          Ghost
+        </Button>
+      </HStack>
+    </Stack>
+  ),
+}
+
+export const Sizes = {
+  render: () => (
+    <HStack>
+      <Button size="xs" variant="glass">
+        XSmall
+      </Button>
+      <Button size="sm" variant="glass">
+        Small
+      </Button>
+      <Button size="md" variant="glass">
+        Medium
+      </Button>
+      <Button size="lg" variant="glass">
+        Large
+      </Button>
+      <Button size="xl" variant="glass">
+        XLarge
+      </Button>
+    </HStack>
+  ),
+}

package/src/components/button/button.tsx

@@ -0,0 +1,55 @@
+import { forwardRef } from 'react'
+
+import type { ButtonProps as ButtonPrimitiveProps } from '@chakra-ui/react'
+import {
+  AbsoluteCenter,
+  Button as ButtonPrimitive,
+  Span,
+  Spinner,
+} from '@chakra-ui/react'
+
+interface ButtonLoadingProps {
+  loading?: boolean
+  loadingText?: React.ReactNode
+}
+
+export interface ButtonProps extends ButtonPrimitiveProps, ButtonLoadingProps {}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  function Button(props, ref) {
+    const {
+      loading,
+      disabled,
+      loadingText,
+      children,
+      variant = 'glass',
+      colorPalette = variant === 'glass' ? 'accent' : 'gray',
+      ...rest
+    } = props
+    return (
+      <ButtonPrimitive
+        colorPalette={colorPalette}
+        disabled={loading || disabled}
+        variant={variant as any}
+        ref={ref}
+        {...rest}
+      >
+        {loading && !loadingText ? (
+          <>
+            <AbsoluteCenter display="inline-flex">
+              <Spinner size="inherit" color="inherit" />
+            </AbsoluteCenter>
+            <Span opacity={0}>{children}</Span>
+          </>
+        ) : loading && loadingText ? (
+          <>
+            <Spinner size="inherit" color="inherit" />
+            {loadingText}
+          </>
+        ) : (
+          children
+        )}
+      </ButtonPrimitive>
+    )
+  },
+)

package/src/components/button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from './button.tsx'
+export type { ButtonProps } from './button.tsx'