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

package/package.json

@@ -1,20 +1,29 @@
 {
   "name": "@saas-ui/react",
-  "version": "2.11.2",
+  "version": "3.0.0-alpha.0",
   "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",
@@ -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,16 @@
     "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.0",
+    "@saas-ui/hooks": "3.0.0-alpha.0"
   },
   "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"
   }
 }

package/src/components/accordion.tsx

@@ -0,0 +1,47 @@
+import { Accordion, HStack } from "@chakra-ui/react"
+import { forwardRef } from "react"
+import { LuChevronDown } from "react-icons/lu"
+
+interface AccordionItemTriggerProps extends Accordion.ItemTriggerProps {
+  indicatorPlacement?: "start" | "end"
+}
+
+export const AccordionItemTrigger = forwardRef<
+  HTMLButtonElement,
+  AccordionItemTriggerProps
+>(function AccordionItemTrigger(props, ref) {
+  const { children, indicatorPlacement = "end", ...rest } = props
+  return (
+    <Accordion.ItemTrigger {...rest} ref={ref}>
+      {indicatorPlacement === "start" && (
+        <Accordion.ItemIndicator rotate={{ base: "-90deg", _open: "0deg" }}>
+          <LuChevronDown />
+        </Accordion.ItemIndicator>
+      )}
+      <HStack gap="4" flex="1" textAlign="start" width="full">
+        {children}
+      </HStack>
+      {indicatorPlacement === "end" && (
+        <Accordion.ItemIndicator>
+          <LuChevronDown />
+        </Accordion.ItemIndicator>
+      )}
+    </Accordion.ItemTrigger>
+  )
+})
+
+interface AccordionItemContentProps extends Accordion.ItemContentProps {}
+
+export const AccordionItemContent = forwardRef<
+  HTMLDivElement,
+  AccordionItemContentProps
+>(function AccordionItemContent(props, ref) {
+  return (
+    <Accordion.ItemContent>
+      <Accordion.ItemBody {...props} ref={ref} />
+    </Accordion.ItemContent>
+  )
+})
+
+export const AccordionRoot = Accordion.Root
+export const AccordionItem = Accordion.Item

package/src/components/action-bar.tsx

@@ -0,0 +1,40 @@
+import { ActionBar, Portal } from "@chakra-ui/react"
+import { CloseButton } from "compositions/ui/close-button"
+import { forwardRef } from "react"
+
+interface ActionBarContentProps extends ActionBar.ContentProps {
+  portalled?: boolean
+  portalRef?: React.RefObject<HTMLElement>
+}
+
+export const ActionBarContent = forwardRef<
+  HTMLDivElement,
+  ActionBarContentProps
+>(function ActionBarContent(props, ref) {
+  const { children, portalled = true, portalRef, ...rest } = props
+
+  return (
+    <Portal disabled={!portalled} container={portalRef}>
+      <ActionBar.Positioner>
+        <ActionBar.Content ref={ref} {...rest} asChild={false}>
+          {children}
+        </ActionBar.Content>
+      </ActionBar.Positioner>
+    </Portal>
+  )
+})
+
+export const ActionBarCloseTrigger = forwardRef<
+  HTMLButtonElement,
+  ActionBar.CloseTriggerProps
+>(function ActionBarCloseTrigger(props, ref) {
+  return (
+    <ActionBar.CloseTrigger {...props} asChild ref={ref}>
+      <CloseButton size="sm" />
+    </ActionBar.CloseTrigger>
+  )
+})
+
+export const ActionBarRoot = ActionBar.Root
+export const ActionBarSelectionTrigger = ActionBar.SelectionTrigger
+export const ActionBarSeparator = ActionBar.Separator

package/src/components/alert.tsx

@@ -0,0 +1,51 @@
+import { Alert as ChakraAlert } from "@chakra-ui/react"
+import { CloseButton } from "compositions/ui/close-button"
+import { forwardRef } from "react"
+
+export interface AlertProps extends Omit<ChakraAlert.RootProps, "title"> {
+  startElement?: React.ReactNode
+  endElement?: React.ReactNode
+  title?: React.ReactNode
+  icon?: React.ReactElement
+  closable?: boolean
+  onClose?: () => void
+}
+
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  function Alert(props, ref) {
+    const {
+      title,
+      children,
+      icon,
+      closable,
+      onClose,
+      startElement,
+      endElement,
+      ...rest
+    } = props
+    return (
+      <ChakraAlert.Root ref={ref} {...rest}>
+        {startElement || <ChakraAlert.Indicator>{icon}</ChakraAlert.Indicator>}
+        {children ? (
+          <ChakraAlert.Content>
+            <ChakraAlert.Title>{title}</ChakraAlert.Title>
+            <ChakraAlert.Description>{children}</ChakraAlert.Description>
+          </ChakraAlert.Content>
+        ) : (
+          <ChakraAlert.Title flex="1">{title}</ChakraAlert.Title>
+        )}
+        {endElement}
+        {closable && (
+          <CloseButton
+            size="sm"
+            pos="relative"
+            top="-2"
+            insetEnd="-2"
+            alignSelf="flex-start"
+            onClick={onClose}
+          />
+        )}
+      </ChakraAlert.Root>
+    )
+  },
+)

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/avatar.tsx

@@ -0,0 +1,74 @@
+"use client"
+
+import type { GroupProps, SlotRecipeProps } from "@chakra-ui/react"
+import { Avatar as ChakraAvatar, Group } from "@chakra-ui/react"
+import { forwardRef } from "react"
+
+type ImageProps = React.ImgHTMLAttributes<HTMLImageElement>
+
+export interface AvatarProps extends ChakraAvatar.RootProps {
+  name?: string
+  src?: string
+  srcSet?: string
+  loading?: ImageProps["loading"]
+  icon?: React.ReactElement
+  fallback?: React.ReactNode
+}
+
+export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
+  function Avatar(props, ref) {
+    const { name, src, srcSet, loading, icon, fallback, children, ...rest } =
+      props
+    return (
+      <ChakraAvatar.Root ref={ref} {...rest}>
+        <AvatarFallback name={name} icon={icon}>
+          {fallback}
+        </AvatarFallback>
+        <ChakraAvatar.Image src={src} srcSet={srcSet} loading={loading} />
+        {children}
+      </ChakraAvatar.Root>
+    )
+  },
+)
+
+interface AvatarFallbackProps extends ChakraAvatar.FallbackProps {
+  name?: string
+  icon?: React.ReactElement
+}
+
+const AvatarFallback = forwardRef<HTMLDivElement, AvatarFallbackProps>(
+  function AvatarFallback(props, ref) {
+    const { name, icon, children, ...rest } = props
+    return (
+      <ChakraAvatar.Fallback ref={ref} {...rest}>
+        {children}
+        {name != null && children == null && <>{getInitials(name)}</>}
+        {name == null && children == null && (
+          <ChakraAvatar.Icon asChild={!!icon}>{icon}</ChakraAvatar.Icon>
+        )}
+      </ChakraAvatar.Fallback>
+    )
+  },
+)
+
+function getInitials(name: string) {
+  const names = name.trim().split(" ")
+  const firstName = names[0] != null ? names[0] : ""
+  const lastName = names.length > 1 ? names[names.length - 1] : ""
+  return firstName && lastName
+    ? `${firstName.charAt(0)}${lastName.charAt(0)}`
+    : firstName.charAt(0)
+}
+
+interface AvatarGroupProps extends GroupProps, SlotRecipeProps<"avatar"> {}
+
+export const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(
+  function AvatarGroup(props, ref) {
+    const { size, variant, borderless, ...rest } = props
+    return (
+      <ChakraAvatar.PropsProvider value={{ size, variant, borderless }}>
+        <Group gap="0" spaceX="-3" ref={ref} {...rest} />
+      </ChakraAvatar.PropsProvider>
+    )
+  },
+)

package/src/components/blockquote.tsx

@@ -0,0 +1,31 @@
+import { Blockquote as ChakraBlockquote } from "@chakra-ui/react"
+import { forwardRef } from "react"
+
+export interface BlockquoteProps extends ChakraBlockquote.RootProps {
+  cite?: React.ReactNode
+  citeUrl?: string
+  icon?: React.ReactNode
+  showDash?: boolean
+}
+
+export const Blockquote = forwardRef<HTMLDivElement, BlockquoteProps>(
+  function Blockquote(props, ref) {
+    const { children, cite, citeUrl, showDash, icon, ...rest } = props
+
+    return (
+      <ChakraBlockquote.Root ref={ref} {...rest}>
+        {icon}
+        <ChakraBlockquote.Content cite={citeUrl}>
+          {children}
+        </ChakraBlockquote.Content>
+        {cite && (
+          <ChakraBlockquote.Caption>
+            {showDash ? <>&mdash;</> : null} <cite>{cite}</cite>
+          </ChakraBlockquote.Caption>
+        )}
+      </ChakraBlockquote.Root>
+    )
+  },
+)
+
+export const BlockquoteIcon = ChakraBlockquote.Icon

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'