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

package/dist/index.cjs

@@ -860,11 +860,6 @@ var inputRecipe = (0, import_react14.defineRecipe)({
   },
   variants: {
     size: {
-      "2xs": {
-        textStyle: "xs",
-        px: "2",
-        "--input-height": "sizes.7"
-      },
       xs: {
         textStyle: "xs",
         px: "2",
@@ -889,11 +884,6 @@ var inputRecipe = (0, import_react14.defineRecipe)({
         textStyle: "md",
         px: "4.5",
         "--input-height": "sizes.12"
-      },
-      "2xl": {
-        textStyle: "lg",
-        px: "5",
-        "--input-height": "sizes.16"
       }
     },
     variant: {
@@ -2147,7 +2137,7 @@ var loadingOverlaySlotRecipe = (0, import_react30.defineSlotRecipe)({
 var import_react31 = require("@chakra-ui/react");
 var navbarSlotRecipe = (0, import_react31.defineSlotRecipe)({
   className: "sui-navbar",
-  slots: ["root", "content", "brand", "item"],
+  slots: ["root", "content", "brand", "item", "link"],
   base: {
     root: {
       display: "flex",
@@ -2351,7 +2341,7 @@ var personaSlotRecipe = (0, import_react32.defineSlotRecipe)({
 var import_react33 = require("@chakra-ui/react");
 var sidebarNavItemSlotRecipe = (0, import_react33.defineSlotRecipe)({
   className: "sui-sidebar-nav-item",
-  slots: ["item", "button"],
+  slots: ["item", "button", "endElement"],
   base: {
     item: {
       position: "relative"

package/dist/index.js

@@ -827,11 +827,6 @@ var inputRecipe = defineRecipe10({
   },
   variants: {
     size: {
-      "2xs": {
-        textStyle: "xs",
-        px: "2",
-        "--input-height": "sizes.7"
-      },
       xs: {
         textStyle: "xs",
         px: "2",
@@ -856,11 +851,6 @@ var inputRecipe = defineRecipe10({
         textStyle: "md",
         px: "4.5",
         "--input-height": "sizes.12"
-      },
-      "2xl": {
-        textStyle: "lg",
-        px: "5",
-        "--input-height": "sizes.16"
       }
     },
     variant: {
@@ -2114,7 +2104,7 @@ var loadingOverlaySlotRecipe = defineSlotRecipe3({
 import { defineSlotRecipe as defineSlotRecipe4 } from "@chakra-ui/react";
 var navbarSlotRecipe = defineSlotRecipe4({
   className: "sui-navbar",
-  slots: ["root", "content", "brand", "item"],
+  slots: ["root", "content", "brand", "item", "link"],
   base: {
     root: {
       display: "flex",
@@ -2318,7 +2308,7 @@ var personaSlotRecipe = defineSlotRecipe5({
 import { defineSlotRecipe as defineSlotRecipe6 } from "@chakra-ui/react";
 var sidebarNavItemSlotRecipe = defineSlotRecipe6({
   className: "sui-sidebar-nav-item",
-  slots: ["item", "button"],
+  slots: ["item", "button", "endElement"],
   base: {
     item: {
       position: "relative"

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "@saas-ui/react",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.2",
   "description": "Saas UI - The React component library for startups.",
-  "source": "src/index.ts",
   "type": "module",
   "exports": {
     ".": {
@@ -33,8 +32,7 @@
     "typecheck": "tsc --noEmit"
   },
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "sideEffects": false,
   "publishConfig": {
@@ -65,8 +63,8 @@
     "url": "https://storybook.saas-ui.dev"
   },
   "dependencies": {
-    "@saas-ui/core": "3.0.0-alpha.1",
-    "@saas-ui/hooks": "3.0.0-alpha.1"
+    "@saas-ui/core": "3.0.0-alpha.2",
+    "@saas-ui/hooks": "3.0.0-alpha.2"
   },
   "peerDependencies": {
     "@chakra-ui/react": "^3.0.0",

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

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

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

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

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

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

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

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

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

package/src/components/breadcrumbs/namespace.ts

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

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

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